/* Mobile Optimization overrides for GuidisTech Studio */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    /* Base spacing adjustments */
    .container {
        padding: 0 1.25rem;
    }

    /* Prevent horizontal overflow of absolute decorations */
    .bg-shape-container {
        display: none !important; /* Hide background shapes on mobile to improve speed and prevent right scroll */
    }

    .doodle-annotation {
        display: none !important; /* Force hide annotation on mobile */
    }

    /* Header & Navigation overrides */
    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .header-container {
        flex-direction: column;
        height: auto;
        padding: 1.25rem 1rem;
        gap: 1rem;
        text-align: center;
    }

    nav {
        gap: 1.5rem;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    nav a {
        font-size: 0.85rem;
        padding: 0.25rem 0;
    }

    .nav-dropdown {
        position: static;
    }

    .nav-dropdown-toggle {
        padding: 0.25rem 0;
        justify-content: center;
    }

    /* Convert Mega Menu dropdown into a clean absolute mobile overlay */
    .nav-dropdown-menu {
        top: 135px;
        left: 0;
        width: 100vw;
        padding: 1.5rem 1.25rem;
        max-height: calc(100vh - 145px);
        overflow-y: auto;
        box-sizing: border-box;
        border-top: 1.5px solid var(--border-color);
        border-bottom: 2px solid var(--text-primary);
    }

    .mega-menu-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .mega-menu-category {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .mega-menu-links {
        gap: 1rem;
    }

    .mega-menu-links a {
        display: block;
    }

    .mega-menu-links a strong {
        font-size: 0.9rem;
        margin-bottom: 0.15rem;
    }

    .mega-menu-desc {
        font-size: 0.75rem;
    }

    /* Hero Section overrides */
    .hero {
        margin-top: 6rem;
        padding: 3rem 0 5rem 0;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.5rem;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }

    .hero p {
        font-size: 1.05rem;
        margin-bottom: 2rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        text-align: center;
    }

    .hero-preview-box {
        width: 100%;
        padding: 1.25rem;
        margin-top: 1rem;
    }

    /* Scroll Spy Centered Highlight Walkthrough on Mobile */
    .walkthrough-pin-wrapper {
        height: auto !important; /* Standard flow height */
        position: relative !important;
        margin-bottom: 4rem !important;
    }

    .walkthrough-pin-wrapper .walkthrough-section {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        display: block !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        padding: 4rem 0 2rem 0 !important;
    }

    .walkthrough-pin-wrapper .section-header {
        margin-bottom: 3.5rem !important;
        text-align: center !important;
        padding: 0 1rem !important;
    }

    .walkthrough-pin-wrapper .section-header h2 {
        font-size: 1.8rem !important;
        margin-bottom: 0.75rem !important;
    }

    .walkthrough-pin-wrapper .section-header p {
        font-size: 0.95rem !important;
    }

    .walkthrough-pin-wrapper .walkthrough-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 5rem !important; /* Space cards out vertically to allow vertical centering focus transitions */
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        transform: none !important;
        height: auto !important;
    }

    .walkthrough-pin-wrapper .walkthrough-card-1, 
    .walkthrough-pin-wrapper .walkthrough-card-2, 
    .walkthrough-pin-wrapper .walkthrough-card-3 {
        grid-area: auto !important;
        margin: 0 auto !important;
        opacity: 0.45 !important; /* Unfocused state: faded and scaled down */
        transform: scale(0.92) !important;
        pointer-events: auto !important;
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    /* Highlight card when focused (centered in viewport) */
    .walkthrough-pin-wrapper .walkthrough-card-1.scroll-focus,
    .walkthrough-pin-wrapper .walkthrough-card-2.scroll-focus,
    .walkthrough-pin-wrapper .walkthrough-card-3.scroll-focus {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
        z-index: 10 !important;
        filter: none !important;
    }

    /* Phone Mockup scale downs for mobile */
    .walkthrough-pin-wrapper .phone-mockup {
        width: 250px !important;
        height: 380px !important;
        margin: 0 auto !important;
    }

    .walkthrough-pin-wrapper .phone-screen {
        padding: 0.75rem !important;
    }

    .walkthrough-pin-wrapper .phone-body {
        gap: 0.5rem !important;
    }

    /* Adjust accepting/declining button margins for shorter mockup screen */
    .walkthrough-pin-wrapper .phone-mockup div[style*="margin-top: 6rem"] {
        margin-top: 2rem !important;
    }

    .walkthrough-pin-wrapper .phone-mockup i[style*="padding: 12px"] {
        padding: 8px !important;
    }

    /* Static Walkthrough on Mobile (Visible and Stacked) */
    .static-walkthrough {
        position: relative !important;
        height: auto !important;
        display: block !important;
        padding: 4rem 0 !important;
    }
    
    .static-walkthrough .walkthrough-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 3.5rem !important;
        height: auto !important;
        width: 100% !important;
        transform: none !important;
    }

    .static-walkthrough .walkthrough-card-1,
    .static-walkthrough .walkthrough-card-2,
    .static-walkthrough .walkthrough-card-3 {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Hide horizontal loops arrows and floating text on mobile static walkthrough */
    .static-walkthrough .doodly-arrow-right,
    .static-walkthrough .doodly-floating-text {
        display: none !important;
    }

    /* Services List Section overrides */
    .services-section {
        padding: 4rem 0;
    }

    .section-header {
        margin-bottom: 3rem;
        text-align: center;
    }

    .section-header h2 {
        font-size: 2.25rem;
    }

    .section-header p {
        font-size: 1rem;
    }

    .editorial-services {
        border-top-width: 1.5px;
    }

    .service-row {
        grid-template-columns: 1fr;
        padding: 2rem 1.25rem;
        gap: 1rem;
    }

    .service-row:hover {
        padding-left: 1.25rem; /* Prevent shifting layout */
    }

    .service-title h3 {
        font-size: 1.35rem;
    }

    .service-more-info {
        opacity: 1;
        transform: none;
        margin-top: 0.75rem;
    }

    .service-body p {
        font-size: 0.95rem;
    }

    .service-bullet-list {
        gap: 0.5rem;
    }

    /* Calculator & Pricing Section overrides */
    .calculator-section {
        padding: 4rem 0;
    }

    .calc-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .calc-group {
        margin-bottom: 2rem;
    }

    .calc-group h3 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .calc-item {
        padding: 1rem 0;
    }

    .calc-title {
        font-size: 0.95rem;
    }

    .calc-desc {
        font-size: 0.8rem;
    }

    .calc-result-card {
        padding: 2rem 1.25rem;
        position: static;
        width: 100%;
    }

    .calc-result-card h3 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .price-display {
        font-size: 2.75rem;
        margin-bottom: 0.5rem;
    }

    .calc-summary-list {
        margin: 1.5rem 0;
    }

    .calc-summary-row {
        padding: 0.75rem 0;
        font-size: 0.85rem;
    }

    /* Contact Section overrides */
    .contact-section {
        padding: 4rem 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-form-wrapper h3 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group label {
        font-size: 0.8rem;
    }

    .form-control {
        padding: 0.8rem 0.9rem;
        font-size: 0.9rem;
    }

    .form-radio-group {
        grid-template-columns: 1fr; /* Stack options for touch compatibility */
        gap: 0.75rem;
    }

    .phone-simulator-container {
        position: static;
        width: 100%;
    }

    .phone-mockup {
        width: 100%;
        max-width: 320px;
        height: 520px;
        margin: 0 auto;
    }

    /* Footer Section overrides */
    footer {
        padding: 4rem 0 2rem 0;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        text-align: center !important;
        margin-bottom: 2.5rem !important;
    }

    .footer-logo-desc p {
        margin-left: auto;
        margin-right: auto;
        margin-top: 1rem;
    }

    .footer-links h4 {
        margin-bottom: 1rem;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        text-align: center !important;
        padding-top: 1.5rem !important;
    }

    /* Form Wrapper overrides to prevent off-screen overflow */
    .contact-form-wrapper {
        padding: 1.75rem 1.25rem !important;
    }

    .form-radio-group {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .form-radio-card {
        width: 100% !important;
        padding: 0.6rem !important;
        box-sizing: border-box !important;
    }

    .contact-services-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .faq-question h3 {
        font-size: 1rem !important;
    }

    /* Services details specs page overrides */
    .spec-block {
        margin-bottom: 4rem !important;
    }

    .spec-block > div {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .spec-table th, .spec-table td {
        font-size: 0.85rem !important;
        padding: 0.6rem 0 !important;
    }

    /* Chat Assistant Page overrides */
    body.chat-page-body {
        height: auto;
        overflow: auto;
    }

    .chat-page-container {
        height: auto;
        border-left: none;
        border-right: none;
    }

    .chat-main-area {
        height: auto;
    }

    .chat-main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem 1rem;
    }

    .chat-main-header h1 {
        font-size: 1.3rem !important;
    }

    .chat-main-header > div[style*="display: flex"] {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem !important;
    }

    .chat-main-header .btn {
        width: 100%;
        text-align: center;
    }

    .chat-main-messages {
        padding: 1.5rem 1rem;
        gap: 1.25rem;
        min-height: 350px;
    }

    .chat-main-messages .chat-bubble {
        max-width: 90%;
        padding: 0.8rem 1.1rem;
        font-size: 0.9rem;
    }

    .chat-main-input-container {
        padding: 1.25rem 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }

    .chat-main-input {
        width: 100%;
    }

    .chat-main-send {
        width: 100%;
        text-align: center;
        padding: 0.85rem;
    }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
    .logo {
        font-size: 1.25rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .price-display {
        font-size: 2.25rem;
    }
}