/* Mobile PPC Landing Page Optimizations */
/* For high-converting mobile experience */

/* Hide non-essential elements on mobile */
@media (max-width: 767px) {
    /* Simplify header */
    #nav, .nav-drill, #searchform, .visible-desktop { display: none !important; }

    /* Hide live chat - click-to-call is better for mobile */
    #sw-container, #sw-btn, #sw-panel, #em-chat-button,
    #support-widget, .support-widget, #live-chat, .live-chat-widget,
    [class*="LiveChat"], #mobile-chat-link { display: none !important; }

    /* Hide complex controls initially */
    .pro-option, .toggle-radio, #testimonial { display: none !important; }

    /* Hide secondary CTAs */
    #email-design-cta, .catalog-link, .questions-box { display: none !important; }

    /* Simplify style selector - show fewer */
    #style-panels .style:nth-child(n+5) { display: none; }

    /* Let product image display naturally */
    #render { overflow: visible; }
    #canvas-3d-pmxai img { max-width: 100%; height: auto; }

    /* Streamline controls */
    #info-cols { padding: 10px !important; }
    #info-cols h4.call-to-action { display: none !important; }

    /* Bigger, clearer inputs */
    .form-floating { margin-bottom: 8px !important; }
    .form-select, .form-control {
        font-size: 18px !important;
        height: 50px !important;
        padding: 12px !important;
    }
    .form-floating > label { font-size: 14px; }

    /* Hide fraction selectors on mobile - simplify */
    select[name='DL_FRACT'], select[name='DH_FRACT'] { display: none !important; }

    /* Make essential controls full width */
    #info-cols .row.g-2 .col-6 { width: 100% !important; flex: 0 0 100% !important; }

    /* Hide less common options initially */
    #fieldlist, #louversize, #jambtype, #casing, #crownrail, #archdrop {
        display: none !important;
    }
    #fieldlist + label, #louversize + label, #jambtype + label,
    #casing + label, #crownrail + label, #archdrop + label {
        display: none !important;
    }
    .form-floating:has(#fieldlist), .form-floating:has(#louversize),
    .form-floating:has(#jambtype), .form-floating:has(#casing),
    .form-floating:has(#crownrail), .form-floating:has(#archdrop) {
        display: none !important;
    }

    /* SEO content - hide on mobile PPC */
    #seo-content, #hardware-links, .rhardware { display: none !important; }

    /* Trust signals - make prominent */
    .trust-signals {
        background: #f8f9fa;
        padding: 12px;
        border-radius: 8px;
        margin-top: 10px;
    }
    .trust-signals p { margin-bottom: 4px !important; font-size: 14px !important; }

    /* Styles section - horizontal scroll */
    #styles h4 { font-size: 16px; margin-bottom: 8px; }
    #panel-styles { overflow-x: auto; white-space: nowrap; padding-bottom: 10px; }
    #style-panels { display: flex; flex-wrap: nowrap; }
    #style-panels .style { flex: 0 0 80px; margin: 0 4px !important; }
    #style-panels .style img { width: 70px !important; height: auto !important; }
    #style-panels .panel-name { font-size: 11px; }
    .prev, .next { display: none !important; }

    /* Product name - smaller */
    .name { font-size: 16px !important; line-height: 1.3 !important; }
    .name span { font-size: 13px !important; }

    /* Hide bullet points on mobile */
    .big-button ul { display: none !important; }

    /* Footer - minimal */
    #footer { padding: 20px 10px !important; }
    #footer .col-md-4:not(:first-child) { display: none; }

    /* Add padding at bottom for sticky CTA */
    body { padding-bottom: 90px !important; }
    .container { padding-bottom: 70px; }
}

/* Sticky Bottom CTA Bar */
#mobile-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, #096b3d, #054a2b);
    padding: 10px 15px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    border-top: 3px solid #0a8f52;
}

@media (max-width: 767px) {
    #mobile-sticky-cta { display: block; }
}

#mobile-sticky-cta .cta-buttons {
    display: flex;
    gap: 10px;
}

#mobile-sticky-cta .btn-add-cart {
    flex: 2;
    background: #ffc107;
    color: #000;
    font-size: 18px;
    font-weight: 700;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#mobile-sticky-cta .btn-add-cart:active {
    transform: scale(0.98);
    background: #e0a800;
}

#mobile-sticky-cta .btn-call {
    flex: 1;
    background: #fff;
    color: #096b3d;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#mobile-sticky-cta .btn-call svg {
    width: 20px;
    height: 20px;
}

/* More Options Toggle */
#mobile-more-options {
    display: none;
    background: #e9ecef;
    padding: 8px 15px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: #096b3d;
    border-bottom: 1px solid #ddd;
}

@media (max-width: 767px) {
    #mobile-more-options { display: block; }
}

#mobile-more-options:after {
    content: ' +';
    font-weight: bold;
}

#mobile-more-options.expanded:after {
    content: ' -';
}

/* When expanded, show hidden controls */
.mobile-controls-expanded #fieldlist,
.mobile-controls-expanded #louversize,
.mobile-controls-expanded #jambtype,
.mobile-controls-expanded #casing,
.mobile-controls-expanded #crownrail {
    display: block !important;
}

.mobile-controls-expanded .form-floating:has(#fieldlist),
.mobile-controls-expanded .form-floating:has(#louversize),
.mobile-controls-expanded .form-floating:has(#jambtype),
.mobile-controls-expanded .form-floating:has(#casing),
.mobile-controls-expanded .form-floating:has(#crownrail) {
    display: block !important;
}

/* Checkout Friction Modal */
#checkout-friction-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

#checkout-friction-modal.show {
    display: flex;
}

#checkout-friction-modal .modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    max-width: 90%;
    width: 340px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

#checkout-friction-modal h3 {
    color: #096b3d;
    margin-bottom: 15px;
    font-size: 20px;
}

#checkout-friction-modal p {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

#checkout-friction-modal .modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#checkout-friction-modal .btn-primary {
    background: #096b3d;
    color: #fff;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

#checkout-friction-modal .btn-secondary {
    background: #f8f9fa;
    color: #333;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

#checkout-friction-modal .btn-link {
    background: none;
    border: none;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    padding: 10px;
    text-decoration: underline;
}