/* Pathway Compass - Responsive Styles
 * Complete mobile and tablet optimizations with working hamburger menu
 * Updated to prevent broken animations on small screens
 */

/* ============================================
   NAVIGATION SCROLL EFFECT
   ============================================ */
nav.fixed {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

nav.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    backdrop-filter: blur(12px) !important;
    /* height increases for nav bar - enable if needed
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    */
}

/* ============================================
   MOBILE NAVIGATION & HAMBURGER MENU
   ============================================ */

/* New hamburger (nav-toggle) */
.nav-toggle {
    display: none;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.nav-toggle .line {
    width: 22px;
    height: 2px;
    background-color: #1e3a8a;
    transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle.active .line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active .line:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active .line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* New nav panel */
.nav-panel {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    overflow: hidden;
}

.nav-panel.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Nav panel links */
.nav-panel a {
    display: block;
    padding: 1rem 1.5rem;
    color: #64748b;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.2s, color 0.2s;
    width: 100%;
    text-align: left;
    background-color: white;
}

.nav-panel a:hover,
.nav-panel a:active {
    background-color: #f9fafb;
    color: #1e3a8a;
}

.nav-panel a.active {
    color: #f97316;
    font-weight: 600;
}

/* Show hamburger button only on mobile screens */
@media screen and (max-width: 768px) {
    .nav-toggle {
        display: inline-flex !important;
    }

    /* Hide desktop navigation on mobile */
    .desktop-nav-links {
        display: none !important;
    }

}

/* Splide pagination (testimonial bubbles) styling */
.splide__pagination.custom-pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.splide__pagination.custom-pagination button,
.splide__pagination button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 9999px;
    border: none;
    background: #cbd5e1;
    /* slate-300 */
    opacity: 0.95;
    transition: transform .18s ease, background-color .18s ease;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06);
}

.splide__pagination.custom-pagination .is-active,
.splide__pagination button.is-active {
    background: var(--navy);
    transform: scale(1.25);
}

.splide__pagination button:focus {
    outline: 2px solid rgba(59, 130, 246, 0.35);
    outline-offset: 2px;
}

/* Ensure slides have smooth transitions and fit nicely */
.splide__slide {
    transition: transform .6s cubic-bezier(.22, .9, .35, 1);
}

/* Mobile-specific testimonial layout */
@media screen and (max-width: 640px) {

    /* Stack avatar and text vertically and center */
    #testimonial-slider .splide__slide .flex.items-center.mb-6 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.5rem;
    }

    #testimonial-slider .splide__slide .w-16.h-16 {
        width: 3.25rem !important;
        height: 3.25rem !important;
        margin-right: 0 !important;
    }

    #testimonial-slider .splide__slide .bg-white {
        padding: 1rem !important;
        margin: 0 0.375rem !important;
    }

    .splide__pagination.custom-pagination button,
    .splide__pagination button {
        width: 14px;
        height: 14px;
    }

    .splide__pagination.custom-pagination {
        margin-top: 0.75rem;
    }

    /* Hide pagination bubbles on small screens to avoid oversized indicators */
    #testimonial-slider .splide__pagination {
        display: none !important;
    }
}


/* ============================================
   INDEX PAGE - HERO SECTION RESPONSIVE
   ============================================ */

/* Hero floating "Live Support" card - hide on smaller screens to prevent overflow */
@media screen and (max-width: 768px) {

    .hero-bg .absolute.-bottom-6.-right-6,
    .absolute.-bottom-6.-right-6 {
        display: none !important;
    }
}

/* Hero section scroll indicator - hidden on mobile as it can be confusing */
@media screen and (max-width: 768px) {

    .hero-bg .absolute.bottom-8,
    section.hero-bg>.absolute {
        display: none !important;
    }
}

/* ============================================
   INDEX PAGE - JOURNEY STEPS RESPONSIVE
   ============================================ */

/* Journey steps - 5 columns to proper responsive grid */
@media screen and (max-width: 1024px) {
    .grid.grid-cols-1.md\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}

@media screen and (max-width: 640px) {
    .grid.grid-cols-1.md\:grid-cols-5 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Journey step cards - more compact on mobile */
    .journey-step {
        padding: 1.25rem !important;
    }

    .journey-step .journey-icon {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.75rem !important;
    }

    .journey-step .journey-icon i {
        font-size: 1.25rem !important;
    }

    .journey-step h3 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .journey-step p {
        font-size: 0.8125rem !important;
        margin-bottom: 1rem !important;
    }

    .journey-step .action-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
}

/* ============================================
   INDEX PAGE - STATISTICS SECTION RESPONSIVE
   ============================================ */

@media screen and (max-width: 768px) {

    /* Stats grid - 2 columns on tablet, 1 on mobile */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Stat cards - more compact */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>div {
        padding: 1.25rem !important;
    }

    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Key highlights section */
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Inner stat boxes - keep 2 columns but smaller */
    .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .grid.grid-cols-2>div {
        padding: 0.75rem !important;
    }

    .grid.grid-cols-2 .text-2xl {
        font-size: 1.25rem !important;
    }
}

@media screen and (max-width: 480px) {

    /* Stats grid - single column on small mobile */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   INDEX PAGE - QUICK ACCESS RESOURCES RESPONSIVE
   ============================================ */

@media screen and (max-width: 768px) {

    /* Resource cards section heading */
    #resources .font-display.text-4xl {
        font-size: 1.75rem !important;
    }

    #resources .text-xl {
        font-size: 0.9375rem !important;
    }

    #resources .mb-16 {
        margin-bottom: 2rem !important;
    }
}

/* ============================================
   FOOTER RESPONSIVE - ALL PAGES
   ============================================ */

/* Ensure social media icons stay on same line on all screen sizes */
footer .flex.space-x-4 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* More specific selector for social icons container */
footer div[class*="space-x-4"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* On smaller screens, reduce spacing between social icons to prevent wrapping */
@media screen and (max-width: 480px) {
    footer .flex.space-x-4 {
        gap: 0.75rem !important;
    }

    footer .flex.space-x-4 a {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 0.875rem !important;
    }
}

/* Footer link hover effects - add underline to all footer links */
footer ul li a:hover {
    text-decoration: underline;
}

/* Footer bottom links (Privacy, Terms, Cookie) - darker shade on hover, no orange */
footer .border-t .flex.gap-6 a {
    transition: color 0.2s ease;
}

footer .border-t .flex.gap-6 a:hover {
    color: #64748b !important;
    /* slate-500 - darker shade */
    text-decoration: none !important;
}

/* Ensure footer bottom section is visible on all screens */
footer .border-t {
    display: flex !important;
    padding-top: 2rem !important;
    margin-top: 3rem !important;
}

/* On small screens, ensure footer bottom is visible and properly spaced */
@media screen and (max-width: 768px) {
    footer .border-t {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    footer .border-t .flex.gap-6 {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}


/* ============================================
   INDEX PAGE - TESTIMONIALS RESPONSIVE
   ============================================ */

@media screen and (max-width: 768px) {

    /* Testimonial cards */
    .splide__slide .bg-white {
        padding: 1.25rem !important;
        margin: 0 0.25rem !important;
    }

    .splide__slide .text-lg {
        font-size: 0.9375rem !important;
    }

    .splide__slide .w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
    }

    .splide__slide .mr-4 {
        margin-right: 0.75rem !important;
    }
}

/* ============================================
   INDEX PAGE - CTA SECTION RESPONSIVE
   ============================================ */

@media screen and (max-width: 640px) {

    /* Journey CTA text wrapping */
    .mt-12.text-center p.text-lg {
        font-size: 0.9375rem !important;
    }

    .mt-12.text-center span.inline-flex {
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ============================================
   REGISTRATION PAGE - RESPONSIVE STYLES
   ============================================ */

/* Hero Section - Stack on mobile */
@media screen and (max-width: 768px) {

    /* Registration hero grid */
    section.pt-24.pb-12 .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    section.pt-24.pb-12 h1.font-display.text-5xl {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    section.pt-24.pb-12 p.text-xl {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    section.pt-24.pb-12 .relative img {
        border-radius: 1rem !important;
    }

    /* Hero CTA button */
    section.pt-24.pb-12 a.inline-block {
        display: block !important;
        text-align: center !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* Registration Timeline - Mobile Layout */
@media screen and (max-width: 768px) {

    /* Timeline section title */
    #registration-timeline .font-display.text-4xl {
        font-size: 1.75rem !important;
    }

    #registration-timeline .text-xl {
        font-size: 0.9375rem !important;
    }

    #registration-timeline .mb-16 {
        margin-bottom: 2rem !important;
    }

    /* Hide the center timeline line on mobile */
    #registration-timeline .absolute.left-1\/2.w-1 {
        display: none !important;
    }

    /* Timeline steps - stack vertically */
    #registration-timeline .space-y-12 {
        gap: 2rem !important;
    }

    /* Each timeline step - convert to single column */
    #registration-timeline .flex.items-center.fade-in {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Remove half-width and text alignment */
    #registration-timeline .flex-shrink-0.w-1\/2 {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    #registration-timeline .flex-shrink-0.w-1\/2.pr-8.text-right {
        order: 2 !important;
        margin-top: 0.5rem !important;
    }

    #registration-timeline .flex-shrink-0.w-1\/2.pl-8 {
        order: 3 !important;
        margin-top: 1rem !important;
    }

    /* Step number circle - positioned at top left */
    #registration-timeline .absolute.left-1\/2.transform.-translate-x-1\/2 {
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        order: 1 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Timeline cards */
    #registration-timeline .bg-white.p-6.rounded-xl {
        padding: 1.25rem !important;
    }

    #registration-timeline .bg-white h3.text-xl {
        font-size: 1.125rem !important;
    }

    #registration-timeline .bg-white p.text-sm {
        font-size: 0.875rem !important;
    }

    /* Final step card */
    #registration-timeline .flex.flex-col.items-center.fade-in {
        padding-top: 0 !important;
    }

    #registration-timeline .max-w-2xl {
        max-width: 100% !important;
    }

    #registration-timeline .bg-gradient-to-br.from-indigo-50 {
        padding: 1.5rem !important;
    }

    #registration-timeline .bg-gradient-to-br.from-indigo-50 h3.text-2xl {
        font-size: 1.375rem !important;
    }
}

/* Testimonial Section - Registration Page */
@media screen and (max-width: 768px) {
    section:has(.font-display.text-3xl):has(blockquote) {
        padding: 2.5rem 0 !important;
    }

    section .font-display.text-3xl {
        font-size: 1.5rem !important;
    }

    /* Testimonial card */
    section .bg-white.p-8.rounded-2xl.shadow-xl {
        padding: 1.5rem !important;
    }

    section .flex.items-start.gap-6 {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }

    section .flex.items-start.gap-6 .w-16.h-16 {
        margin: 0 auto !important;
    }

    section .flex.items-start.gap-6 .flex-1.text-left {
        text-align: center !important;
    }

    section blockquote.text-lg {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }
}

/* FAQ Section - Registration Page */
@media screen and (max-width: 768px) {
    section.py-20.bg-white .font-display.text-4xl {
        font-size: 1.75rem !important;
    }

    section.py-20.bg-white .text-xl {
        font-size: 0.9375rem !important;
    }

    section.py-20.bg-white .mb-16 {
        margin-bottom: 2rem !important;
    }

    /* FAQ items */
    .faq-question {
        padding: 1rem !important;
        flex-wrap: nowrap !important;
    }

    .faq-question h3.text-lg {
        font-size: 0.9375rem !important;
        line-height: 1.4 !important;
        flex: 1 !important;
        text-align: left !important;
    }

    .faq-question i {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .faq-answer .px-6.pb-6 {
        padding: 0 1rem 1rem 1rem !important;
    }

    /* FAQ grid comparison (PathwayConnect vs Advanced) */
    .faq-answer .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .faq-answer .bg-blue-50.p-6,
    .faq-answer .bg-green-50.p-6 {
        padding: 1rem !important;
    }
}

/* Video Tutorials Section - Registration Page */
@media screen and (max-width: 768px) {
    section[style*="background-color: var(--cream)"] .font-display.text-4xl {
        font-size: 1.75rem !important;
    }

    section[style*="background-color: var(--cream)"] .text-xl {
        font-size: 0.9375rem !important;
        padding: 0 0.5rem !important;
    }

    /* Video grid - single column on mobile */
    section[style*="background-color: var(--cream)"] .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Video card improvements */
    .video-thumbnail.relative.h-48 {
        height: 12rem !important;
    }

    .card-hover.bg-white.rounded-2xl .p-6 {
        padding: 1rem !important;
    }

    .card-hover.bg-white.rounded-2xl h3.text-lg {
        font-size: 1rem !important;
    }

    .card-hover.bg-white.rounded-2xl p.text-sm {
        font-size: 0.8125rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Device badge */
    .device-badge {
        font-size: 0.625rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* View all button */
    section[style*="background-color: var(--cream)"] .text-center.mt-12 a {
        display: block !important;
        margin: 0 1rem !important;
        padding: 1rem !important;
        font-size: 0.9375rem !important;
    }
}

/* Contact Support Section - Registration Page */
@media screen and (max-width: 768px) {
    #contact-support .font-display.text-4xl {
        font-size: 1.75rem !important;
    }

    #contact-support .text-xl {
        font-size: 0.9375rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Support options grid - single column */
    #contact-support .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    #contact-support .text-center .w-16.h-16 {
        width: 4rem !important;
        height: 4rem !important;
    }

    #contact-support .text-center h3.text-lg {
        font-size: 1rem !important;
    }

    #contact-support .text-center p.text-sm {
        font-size: 0.8125rem !important;
    }

    /* Hours box */
    #contact-support .bg-blue-50.p-6 {
        padding: 1rem !important;
    }

    #contact-support .bg-blue-50 h3 {
        font-size: 0.9375rem !important;
    }

    #contact-support .bg-blue-50 p.text-sm {
        font-size: 0.8125rem !important;
    }
}

/* English Test Modal - Responsive */
@media screen and (max-width: 640px) {
    .modal-content {
        padding: 1.25rem !important;
        padding-top: 2.5rem !important;
        border-radius: 1rem !important;
        margin: 0.5rem !important;
    }

    .modal-content h3 {
        font-size: 1.25rem !important;
    }

    .modal-content p {
        font-size: 0.875rem !important;
    }
}

/* Small mobile (max-width: 480px) */
@media screen and (max-width: 480px) {

    /* Registration hero */
    section.pt-24.pb-12 {
        padding-top: 5rem !important;
        padding-bottom: 2rem !important;
    }

    section.pt-24.pb-12 h1.font-display.text-5xl {
        font-size: 1.5rem !important;
    }

    /* Timeline */
    #registration-timeline {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    #registration-timeline .font-display.text-4xl {
        font-size: 1.5rem !important;
    }

    /* Smaller step circles */
    #registration-timeline .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        font-size: 0.875rem !important;
    }

    #registration-timeline .w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
    }

    /* Testimonial */
    section .flex.items-start.gap-6 .w-16.h-16 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    /* FAQ */
    .faq-question h3.text-lg {
        font-size: 0.875rem !important;
    }

    /* Contact */
    #contact-support .text-center .w-16.h-16 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
}

/* ============================================
   SETUP GUIDE (POST-REGISTRATION) RESPONSIVE
   ============================================ */

/* Mobile styles (max-width: 768px) */
@media screen and (max-width: 768px) {

    /* Hero section */
    section.pt-24.pb-12 h1.font-display.text-5xl {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    section.pt-24.pb-12 .text-xl {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Hero buttons/stats stack */
    section.pt-24.pb-12 .flex.items-center.space-x-6 {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    section.pt-24.pb-12 .flex.items-center.space-x-6>* {
        margin-left: 0 !important;
    }

    section.pt-24.pb-12 button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* System tour hotspots - hide on small mobile, show list instead? 
       For now, ensure image container is okay 
    */
    .system-tour-hotspot {
        width: 24px !important;
        height: 24px !important;
    }

    /* Checklist Section */
    #checklist .font-display.text-4xl {
        font-size: 1.75rem !important;
    }

    /* Progress Ring */
    #checklist .flex.justify-center.mb-12 {
        margin-bottom: 2rem !important;
    }

    /* Adjust the progress ring container for smaller screens */
    .progress-ring {
        width: 120px !important;
        height: 120px !important;
    }

    .progress-ring.w-32.h-32 {
        width: 120px !important;
        height: 120px !important;
    }

    /* Checklist Items */
    .checklist-item {
        padding: 1rem !important;
    }

    .checklist-item .checkbox {
        width: 20px !important;
        height: 20px !important;
        margin-right: 0.75rem !important;
    }

    .checklist-item h3.text-lg {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }

    .checklist-item p.mb-3 {
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
    }

    .checklist-item .flex.items-center.space-x-4 {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    .checklist-item .flex.items-center.space-x-4>* {
        margin-left: 0 !important;
    }

    .checklist-item a {
        font-size: 0.8125rem !important;
    }

    /* Essential Tools Grid */
    section[style*="background-color: var(--light-blue)"] .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Tool Cards */
    .card-hover.bg-white.p-8.rounded-2xl {
        padding: 1.5rem !important;
    }

    .card-hover h3.text-xl {
        font-size: 1.125rem !important;
    }

    .card-hover p.mb-6 {
        font-size: 0.9375rem !important;
        margin-bottom: 1rem !important;
    }

    .card-hover ul li {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Pro Tip Box */
    .pro-tip {
        padding: 0.75rem !important;
        margin-top: 1rem !important;
    }

    /* Canvas & Microsoft Sections */
    section#canvas .grid.lg\:grid-cols-2,
    section#microsoft365 .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Feature lists */
    section#canvas .flex.items-start,
    section#microsoft365 .flex.items-start {
        margin-bottom: 1rem !important;
    }

    section#canvas .w-12.h-12,
    section#microsoft365 .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        /* Prevent shrinking */
        font-size: 0.875rem !important;
    }

    section#canvas h4.font-semibold,
    section#microsoft365 h4.font-semibold {
        font-size: 1rem !important;
    }

    section#canvas p.text-sm,
    section#microsoft365 p.text-sm {
        font-size: 0.875rem !important;
    }

    /* Simulated Canvas Interface */
    .bg-gray-100.rounded-xl.p-8 {
        padding: 1rem !important;
    }

    .bg-white.rounded-lg.shadow-sm.p-4 {
        padding: 0.75rem !important;
    }

    /* M365 Icons Grid */
    section#microsoft365 .grid.grid-cols-2 {
        gap: 0.75rem !important;
    }

    section#microsoft365 .bg-white.p-6 {
        padding: 1rem !important;
    }

    section#microsoft365 .w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.75rem !important;
    }

    section#microsoft365 .w-16.h-16 i {
        font-size: 1.25rem !important;
    }

    /* Quick Links Grid */
    section[style*="background-color: var(--light-blue)"]+section .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Quick Link Cards */
    .quick-link-card {
        padding: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        gap: 1rem !important;
    }

    .quick-link-card .mx-auto {
        margin: 0 !important;
    }

    .quick-link-card .w-12.h-12 {
        width: 3rem !important;
        height: 3rem !important;
        flex-shrink: 0 !important;
    }

    .quick-link-card .text-xs {
        font-size: 0.8125rem !important;
    }

    /* Community Section */
    section:has(.fa-hand-holding-heart) .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    section:has(.fa-hand-holding-heart) h2.text-4xl {
        font-size: 1.75rem !important;
    }

    section:has(.fa-hand-holding-heart) .bg-gradient-to-tr {
        padding: 1.5rem !important;
    }

    section:has(.fa-hand-holding-heart) .text-8xl {
        font-size: 4rem !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
    }

    section:has(.fa-hand-holding-heart) .text-xl.italic {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Very small screens adjustments */
@media screen and (max-width: 480px) {

    /* Progress ring smaller */
    .progress-ring {
        width: 100px !important;
        height: 100px !important;
    }

    .progress-ring.w-32.h-32 {
        width: 100px !important;
        height: 100px !important;
    }

    .progress-ring-circle {
        r: 40 !important;
        cx: 50 !important;
        cy: 50 !important;
    }

    #checklist .text-2xl {
        font-size: 1.25rem !important;
    }

    /* Adjust the text inside the progress circle */
    #progress-text {
        font-size: 1.2rem !important;
    }

    #progress-text+div {
        font-size: 0.7rem !important;
    }

    /* Stack modal buttons */
    .modal-content button {
        width: 100% !important;
    }
}

/* ============================================
   CAREER RESOURCES (JOBS) PAGE RESPONSIVE
   ============================================ */

/* Mobile styles (max-width: 768px) */
@media screen and (max-width: 768px) {

    /* Hero Section */
    section.pt-24.pb-12 h1.font-display.text-5xl {
        font-size: 1.875rem !important;
        /* Slightly larger for impact */
    }

    /* Hero image stats box */
    section.pt-24.pb-12 .absolute.-bottom-6.-right-6 {
        right: 0 !important;
        bottom: -1rem !important;
        left: 0 !important;
        margin: 0 auto !important;
        width: 90% !important;
        text-align: center !important;
    }

    /* Job Search Strategy Grid */
    section[style*="background-color: var(--white)"] .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }

    /* Strategy Steps adjustments */
    .w-20.h-20 {
        width: 4rem !important;
        height: 4rem !important;
        margin-bottom: 1rem !important;
    }

    .text-2xl.font-bold span {
        font-size: 1.25rem !important;
    }

    /* Resources Grid */
    #resources .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Strategic Partner Cards */
    .partner-card,
    .partner-card-pro {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Partner card header stack */
    .partner-card .flex.justify-between.items-start,
    .partner-card-pro .flex.justify-between.items-start {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 1rem !important;
    }

    .partner-card .flex.flex-col.gap-2.items-end,
    .partner-card-pro .flex.flex-col.gap-2.items-end {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin-top: 1rem !important;
        width: 100% !important;
    }

    /* Partner card icon */
    .partner-icon-wrapper,
    .partner-icon-wrapper-pro {
        margin-bottom: 0 !important;
    }

    /* Partner card badges */
    .partner-badge,
    .partner-badge-pro {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Partner features list */
    .partner-card .flex.gap-4,
    .partner-card-pro .flex.gap-4 {
        gap: 0.75rem !important;
    }

    .partner-card h4.font-bold,
    .partner-card-pro h4.font-bold {
        font-size: 0.9375rem !important;
        margin-bottom: 0.125rem !important;
    }

    .partner-card p.text-sm,
    .partner-card-pro p.text-sm {
        font-size: 0.8125rem !important;
    }

    /* Job Board (if used) */
    .filter-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        flex: 1 1 auto !important;
        /* Make buttons grow to fill row */
        text-align: center !important;
    }

    .job-card {
        padding: 1.25rem !important;
    }
}



/* ============================================
   SCHOLARSHIPS PAGE RESPONSIVE
   ============================================ */
@media screen and (max-width: 768px) {

    /* Hero */
    .hero-bg h1 {
        font-size: 2rem !important;
    }

    .hero-bg .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        width: 100% !important;
    }

    .hero-bg a.inline-flex {
        width: 100% !important;
    }

    /* Laptop & Tuition Sections */
    #laptop .grid.md\:grid-cols-2,
    #tuition .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Section Headers */
    #laptop .flex.items-center.gap-4,
    #tuition .flex.items-center.gap-4 {
        flex-direction: column !important;
        text-align: center !important;
    }

    #laptop .w-12.h-12,
    #tuition .w-12.h-12 {
        margin-bottom: 0.5rem !important;
    }

    /* Card Content */
    .card-hover.p-8 {
        padding: 1.5rem !important;
    }
}

/* ============================================
   TUTORIALS (HOW-TO) PAGE RESPONSIVE
   ============================================ */
@media screen and (max-width: 768px) {

    /* Hero */
    section.pt-24.pb-12 .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    section.pt-24.pb-12 h1.font-display {
        font-size: 2rem !important;
    }

    section.pt-24.pb-12 .flex.items-center.space-x-6 {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    section.pt-24.pb-12 .flex.items-center.space-x-6>* {
        width: 100% !important;
        margin-left: 0 !important;
        /* Reset space-x */
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

    section.pt-24.pb-12 button {
        width: 100% !important;
    }

    /* Search & Filter Container */
    .bg-gray-50.p-6 {
        padding: 1.25rem !important;
    }

    .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Tutorial Grid */
    #tutorialGrid,
    #bookmarkedTutorials {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Device Toggle & Filters */
    #deviceToggle {
        flex-direction: column !important;
    }

    #deviceToggle button {
        width: 100% !important;
        justify-content: center !important;
    }

    #filterTags {
        justify-content: center !important;
    }

    /* Video Modal */
    .video-container {
        width: 100% !important;
        height: auto !important;
        margin: 0 1rem !important;
    }
}

/* ============================================
   WHAT IS BYU PATHWAY PAGE RESPONSIVE
   ============================================ */
@media screen and (max-width: 768px) {

    /* Hero Section */
    .hero-gradient h1.font-display {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .hero-gradient .text-lg.sm\:text-xl {
        font-size: 1rem !important;
    }

    /* Center Help/CTA in Hero */
    .hero-gradient .flex.flex-col.sm\:flex-row {
        align-items: center !important;
    }

    .hero-gradient a.inline-flex {
        width: 100% !important;
    }

    /* How It Works - Align Steps */
    #how-it-works .md\:text-right {
        text-align: center !important;
        padding-right: 0 !important;
    }

    #how-it-works .md\:col-start-2.md\:pl-12 {
        padding-left: 0 !important;
        text-align: center !important;
    }

    #how-it-works .inline-flex.w-12.h-12 {
        margin: 0 auto 1rem auto !important;
        /* Center numbers */
    }

    /* Degree Grid */
    .degree-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Testimonial Quote */
    .quote-mark {
        font-size: 4rem !important;
        top: -10px !important;
        left: 0 !important;
    }

    .glass-card p.text-xl.sm\:text-2xl {
        font-size: 1.125rem !important;
        line-height: 1.6 !important;
    }

    /* History Timeline */
    .py-20[style*="background-color: var(--cream)"] .flex.items-start {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .py-20[style*="background-color: var(--cream)"] .flex-shrink-0.w-16.h-16 {
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }

    /* Final CTA */
    section.py-20.bg-gradient-to-r h2 {
        font-size: 1.75rem !important;
    }
}

/* ============================================
   TABLET STYLES (max-width: 1024px)
   ============================================ */
@media screen and (max-width: 1024px) {

    /* Navigation adjustments */
    .nav-link {
        font-size: 0.875rem;
        padding: 0.5rem;
    }

    /* Hero section */
    .hero-bg h1,
    h1.font-display {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }

    /* Grid adjustments - 2 columns on tablet */
    .grid.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid.lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Card spacing */
    .card-hover {
        margin-bottom: 1rem;
    }

    /* Reduce padding on sections */
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Disable complex animations on tablets */
    @keyframes float {

        0%,
        100% {
            transform: translateY(0);
        }
    }
}

/* ============================================
   MOBILE STYLES (max-width: 768px)
   ============================================ */
@media screen and (max-width: 768px) {

    /* Show new mobile menu button, hide desktop nav */
    .nav-toggle {
        display: inline-flex !important;
    }

    /* ensure panel remains controlled solely by .open */
    .nav-panel {
        /* styles defined above */
    }

    .nav-panel.open {
        /* styles defined above */
    }

    nav .hidden.md\\:block {
        display: none !important;
    }

    /* DISABLE ANIMATIONS ON MOBILE */
    /* remove global animation killer that interferes with menu */
    /* Keep minimal transitions for toggle */
    .nav-toggle .line,
    .nav-panel {
        transition-duration: 0.22s !important;
    }

    /* Base font adjustments */
    body {
        font-size: 0.9375rem;
    }

    /* Fix search input on mobile - Commented out as Nav Search is removed
    nav input[type="text"] {
        width: 100% !important;
        max-width: 220px !important;
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem 0.5rem 2rem !important;
    }

    nav input[type="text"]::placeholder {
        font-size: 0.75rem;
    }

    nav .relative .fa-search {
        left: 0.5rem !important;
        top: 0.625rem !important;
        font-size: 0.875rem;
    }
    */

    /* Hero Section */
    .hero-bg {
        min-height: auto !important;
        padding: 2rem 0 !important;
    }

    .hero-bg h1,
    .font-display.text-5xl,
    .font-display.text-6xl,
    h1.font-display {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .hero-bg p,
    .text-xl {
        font-size: 1rem !important;
    }

    .text-2xl {
        font-size: 1.5rem !important;
    }

    .text-4xl {
        font-size: 1.875rem !important;
    }

    /* Button groups - stack vertically */
    .flex.flex-col.sm\\:flex-row,
    .flex.items-center.space-x-6,
    .flex.space-x-6 {
        flex-direction: column !important;
        gap: 1rem;
    }

    .flex.flex-col.sm\\:flex-row>button,
    .flex.flex-col.sm\\:flex-row>a {
        width: 100%;
        text-align: center;
    }

    /* Grid layouts - single column on mobile */
    .grid.md\\:grid-cols-2,
    .grid.lg\\:grid-cols-2,
    .grid.lg\\:grid-cols-3,
    .grid.lg\\:grid-cols-4,
    .grid.md\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Lists - better spacing */
    ul,
    ol {
        padding-left: 1.5rem;
    }

    li {
        margin-bottom: 0.5rem;
    }

    /* Card adjustments - prevent overflow */
    .card-hover {
        padding: 1.5rem;
        max-width: 100%;
        overflow: hidden;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Job cards specific */
    .job-card {
        padding: 1rem;
    }

    .job-card .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .job-card button {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Filter buttons - wrap properly */
    .flex.flex-wrap {
        gap: 0.5rem;
    }

    .filter-btn,
    .filter-tag {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        flex: 1 1 auto;
        min-width: fit-content;
    }

    /* Search input - full width */
    input[type="text"],
    input[type="search"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Timeline adjustments */
    .relative.flex.items-center {
        flex-direction: column;
        text-align: center;
    }

    /* Hide timeline line on mobile */
    .absolute.left-1\/2 {
        display: none;
    }

    /* Journey steps */
    .grid.grid-cols-1.md\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Testimonial slider */
    .splide__slide {
        padding: 0 0.5rem;
    }

    /* Footer */
    footer {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    /* Section padding reduction */
    .py-20 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Diagnostic cards */
    .diagnostic-card {
        margin-bottom: 1rem;
    }

    /* Checklist items */
    .checklist-item {
        padding: 1rem !important;
    }

    .checklist-item .flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    /* Video cards */
    .video-card {
        margin-bottom: 1.5rem;
    }

    /* Prevent box overflow */
    .partner-card-pro,
    .job-card,
    .video-card {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media screen and (max-width: 480px) {

    /* Even smaller text */
    .hero-bg h1,
    .font-display.text-5xl,
    .font-display.text-6xl,
    h1.font-display {
        font-size: 1.75rem !important;
    }

    .font-display.text-4xl,
    h2.font-display {
        font-size: 1.5rem !important;
    }

    .text-xl {
        font-size: 0.9375rem !important;
    }

    /* Compact padding */
    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .p-8 {
        padding: 1.5rem !important;
    }

    .p-6 {
        padding: 1rem !important;
    }

    /* Compact cards */
    .card-hover {
        padding: 1rem !important;
    }

    /* Smaller icons */
    .w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
    }

    .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    /* Filter buttons - smaller on cramped screens */
    .filter-tag,
    .filter-btn {
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }

    /* Navigation links in mobile menu */
    .nav-panel a {
        padding: 0.875rem 1rem;
        font-size: 0.9375rem;
    }

    /* Search even more compact - Commented out as Nav Search is removed
    nav input[type="text"] {
        width: 140px !important;
        padding: 0.375rem 0.5rem 0.375rem 1.75rem !important;
    }
    */
}

/* ============================================
   TOUCH OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Increase touch targets */
    button,
    a,
    .nav-link,
    .filter-btn,
    .filter-tag {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }

    /* Remove hover effects on touch devices */
    .card-hover:hover {
        transform: none !important;
    }

    .btn-primary:hover {
        transform: none !important;
    }

    /* Make clickable areas more obvious */
    .diagnostic-card:active,
    .checklist-item:active,
    .video-card:active {
        background-color: #f3f4f6;
    }
}

/* ============================================
   LANDSCAPE MOBILE FIXES
   ============================================ */
@media screen and (max-height: 600px) and (orientation: landscape) {
    .hero-bg {
        min-height: auto !important;
        padding: 1rem 0 !important;
    }

    .py-20 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    nav {
        height: auto;
    }
}

/* ============================================
   UTILITY OVERRIDES FOR RESPONSIVE
   ============================================ */
@media screen and (max-width: 768px) {

    /* Ensure no horizontal scroll with safe reset */
    body,
    html {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* Max width for containers */
    .max-w-6xl,
    .max-w-4xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Absolute positioned elements adjustments */
    .absolute.-bottom-6.-right-6 {
        bottom: -1rem;
        right: -1rem;
    }

    /* Flex space-x overrides */
    .space-x-8>* {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .space-x-6>* {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .space-x-4>* {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Stat counters */
    .stats-counter {
        font-size: 2rem !important;
    }
}

/* ============================================
   ACCESSIBILITY FOCUS STATES
   ============================================ */
@media screen and (max-width: 768px) {

    /* Enhanced focus for mobile */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #f97316;
        outline-offset: 2px;
    }
}

/* ============================================
   GLOBAL OVERFLOW PREVENTION
   ============================================ */

/* Prevent horizontal scroll globally */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Ensure all content containers respect boundaries */
main,
section,
footer,
header,
nav {
    max-width: 100%;
    overflow-x: hidden;
}

/* Word break for long text */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
a,
span {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent images from causing overflow */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* ============================================
   ADDITIONAL MOBILE SAFEGUARDS
   ============================================ */

@media screen and (max-width: 768px) {

    /* Ensure all sections don't overflow */
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box;
    }

    /* Container max-width safety */
    .max-w-6xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Flex containers - prevent overflow */
    .flex {
        flex-wrap: wrap;
    }

    /* Hero buttons grid - proper stacking */
    .grid.grid-cols-1.sm\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Hero button sizing */
    .hero-btn {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }

    /* Prevent any absolutely positioned elements from causing scroll */
    .absolute {
        max-width: 100vw;
    }
}

@media screen and (max-width: 480px) {

    /* Extra padding reduction for very small screens */
    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Reduce spacing between elements */
    .gap-8 {
        gap: 1.5rem !important;
    }

    .gap-6 {
        gap: 1rem !important;
    }

    .gap-4 {
        gap: 0.75rem !important;
    }

    /* Smaller margins */
    .mb-16 {
        margin-bottom: 2rem !important;
    }

    .mb-12 {
        margin-bottom: 1.5rem !important;
    }

    .mb-8 {
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   LIVE CHAT RESPONSIVE OPTIMIZATIONS
   ============================================ */

/* Mobile chat launcher adjustments */
@media (max-width: 768px) {
    .pw-chat-launcher {
        bottom: 1rem !important;
        right: 1rem !important;
        padding: 0.75rem 1.25rem !important;
        font-size: 0.85rem !important;
    }

    .pw-chat-launcher .chat-icon {
        font-size: 1rem !important;
    }

    /* Chat intro overlay for mobile */
    .pw-chat-intro-content {
        padding: 1.5rem !important;
        max-width: calc(100vw - 2rem) !important;
    }

    .pw-chat-intro-icon {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto 1rem !important;
    }

    .pw-chat-intro-icon i {
        font-size: 2.5rem !important;
    }

    .pw-chat-intro-title {
        font-size: 1.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .pw-chat-intro-text {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Close button mobile adjustments */
    .pw-chat-close-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }

    /* Side panel adjustments */
    .pw-chat-side-panel {
        max-width: 100% !important;
        height: 100vh !important;
    }

    .pw-chat-side-content {
        padding: 1.5rem 1rem !important;
        justify-content: flex-start !important;
        padding-top: 4rem !important;
    }

    .pw-chat-side-icon {
        width: 70px !important;
        height: 70px !important;
        margin: 0 auto 1rem !important;
    }

    .pw-chat-side-icon i {
        font-size: 1.75rem !important;
    }

    .pw-chat-side-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .pw-chat-side-message {
        font-size: 0.9rem !important;
        margin-bottom: 1.5rem !important;
    }

    .pw-chat-wa-section {
        padding: 1rem !important;
        margin-top: 1rem !important;
        border-radius: 8px !important;
    }

    .pw-chat-wa-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }

    .pw-chat-response-time {
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
    }

    .pw-chat-wa-number {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
    }

    .pw-chat-wa-btn {
        padding: 0.65rem !important;
        font-size: 0.9rem !important;
    }

    .pw-chat-side-panel .pw-chat-close-btn {
        top: 0.75rem !important;
        right: 0.75rem !important;
    }
}

/* Extra small screens (under 480px) */
@media (max-width: 480px) {
    .pw-chat-launcher {
        bottom: 0.75rem !important;
        right: 0.75rem !important;
        padding: 0.65rem 1rem !important;
        font-size: 0.8rem !important;
        gap: 0.5rem !important;
    }

    .pw-chat-launcher .chat-icon {
        font-size: 0.9rem !important;
    }

    /* Full-screen intro for very small screens */
    .pw-chat-intro-overlay {
        padding: 0 !important;
    }

    .pw-chat-intro-content {
        padding: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .pw-chat-intro-icon {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 1rem !important;
    }

    .pw-chat-intro-icon i {
        font-size: 2rem !important;
    }

    .pw-chat-intro-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }

    .pw-chat-intro-text {
        font-size: 0.9rem !important;
        margin-bottom: 1.25rem !important;
        line-height: 1.4 !important;
    }

    .pw-chat-close-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
    }

    /* Side panel for very small screens */
    .pw-chat-side-panel {
        max-width: 100% !important;
        width: 100% !important;
        height: 100vh !important;
    }

    .pw-chat-side-content {
        padding: 1rem 0.75rem !important;
        padding-top: 3.5rem !important;
    }

    .pw-chat-side-icon {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 0.75rem !important;
    }

    .pw-chat-side-icon i {
        font-size: 1.5rem !important;
    }

    .pw-chat-side-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.4rem !important;
        line-height: 1.3 !important;
    }

    .pw-chat-side-message {
        font-size: 0.85rem !important;
        margin-bottom: 1.25rem !important;
        line-height: 1.4 !important;
    }

    .pw-chat-wa-section {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 6px !important;
    }

    .pw-chat-wa-subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 0.4rem !important;
    }

    .pw-chat-response-time {
        font-size: 0.75rem !important;
        margin-bottom: 0.6rem !important;
    }

    .pw-chat-wa-number {
        font-size: 0.9rem !important;
        margin-bottom: 0.6rem !important;
    }

    .pw-chat-wa-number i {
        font-size: 1rem !important;
    }

    .pw-chat-wa-btn {
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
        gap: 0.4rem !important;
    }

    .pw-chat-wa-btn i {
        font-size: 1rem !important;
    }

    .pw-chat-side-panel .pw-chat-close-btn {
        top: 0.5rem !important;
        right: 0.5rem !important;
    }
}