/* ============================================================
 TG CommerceX — Responsive Product Finder & Floating Button CSS
 ============================================================ */

/* Stacking Context Root Wrapper */
#tgx-floating-wrapper {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999990 !important;
    pointer-events: auto !important;
}

#tgx-floating-wrapper.tgx-pos-right {
    right: 0 !important;
    left: auto !important;
}

#tgx-floating-wrapper.tgx-pos-left {
    left: 0 !important;
    right: auto !important;
}

/* Desktop Vertical Help Tab */
.tgx-floating-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2b1200 !important;
    color: #f6d57b !important;
    padding: 18px 12px !important;
    border: 2px solid #d4a647 !important;
    writing-mode: vertical-rl !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

#tgx-floating-wrapper.tgx-pos-right .tgx-floating-btn {
    border-radius: 16px 0 0 16px !important;
    border-right: none !important;
}

#tgx-floating-wrapper.tgx-pos-left .tgx-floating-btn {
    border-radius: 0 16px 16px 0 !important;
    border-left: none !important;
}

.tgx-floating-btn:hover {
    background: #401b00 !important;
    color: #ffffff !important;
    border-color: #ffe58d !important;
}

/* MOBILE COMPACT RESPONSIVE SIDE BUTTON (320px - 768px) */
@media (max-width: 768px) {
    #tgx-floating-wrapper {
        position: fixed !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        z-index: 999990 !important;
    }

    #tgx-floating-wrapper.tgx-pos-right {
        right: 0 !important;
        left: auto !important;
    }

    #tgx-floating-wrapper.tgx-pos-left {
        left: 0 !important;
        right: auto !important;
    }

    .tgx-floating-btn {
        writing-mode: vertical-rl !important;
        padding: 14px 10px !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    }

    #tgx-floating-wrapper.tgx-pos-right .tgx-floating-btn {
        border-radius: 14px 0 0 14px !important;
        border-right: none !important;
    }

    #tgx-floating-wrapper.tgx-pos-left .tgx-floating-btn {
        border-radius: 0 14px 14px 0 !important;
        border-left: none !important;
    }
}

/* Body Scroll Lock */
body.tgx-modal-open {
    overflow: hidden !important;
    touch-action: none !important;
}

/* Modal Backdrop Overlay */
#tgx-quiz-popup {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Modal Content Box */
#tgx-quiz-popup .tgx-quiz-box {
    width: 100% !important;
    max-width: 540px !important;
    max-height: 90vh !important;
    background: #050403 !important;
    color: #ffffff !important;
    padding: 40px 28px 30px !important;
    border-radius: 28px !important;
    border: 1px solid #3d2b18 !important;
    position: relative !important;
    text-align: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
    overflow-y: auto !important;
    animation: tgxModalSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes tgxModalSlide {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close Button */
#tgx-close {
    position: absolute !important;
    right: 18px !important;
    top: 18px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid #3d2b18 !important;
    background: #19140f !important;
    color: #d2ae68 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

#tgx-close:hover {
    background: #d4a647 !important;
    color: #000000 !important;
}

/* Headers & Typography */
#tgx-quiz-popup h2,
#tgx-quiz-popup h3 {
    color: #ffffff !important;
    font-family: Georgia, serif !important;
    margin-top: 0 !important;
}

#tgx-quiz-popup h2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

#tgx-quiz-popup h3 {
    font-size: 20px !important;
    margin-bottom: 15px !important;
    color: #f6d57b !important;
}

#tgx-quiz-popup p {
    color: #b8aa94 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Icon Badges */
.tgx-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 25px 0 !important;
}

.tgx-icons span {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #1b1209, #4b321b) !important;
    border: 1px solid #5d4425 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #d2ae68 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.tgx-icons i {
    font-style: normal !important;
    font-size: 22px !important;
    margin-bottom: 4px !important;
}

/* Progress Header */
.tgx-progress-header {
    margin-bottom: 20px !important;
}

.tgx-progress-bar-bg {
    width: 100% !important;
    height: 6px !important;
    background: #251a10 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

.tgx-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #c79538, #ffe58d) !important;
    transition: width 0.3s ease !important;
}

.tgx-step-counter {
    font-size: 12px !important;
    color: #8c7044 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Steps Display Control */
.tgx-step {
    display: none;
    text-align: left !important;
}

.tgx-step.active {
    display: block !important;
    animation: tgxStepFade 0.25s ease !important;
}

@keyframes tgxStepFade {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Option Radio Cards */
.tgx-options-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

.tgx-option-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #140e09 !important;
    color: #f6d57b !important;
    padding: 15px 18px !important;
    border-radius: 14px !important;
    border: 1px solid #3a2817 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 15px !important;
}

.tgx-option-card:hover,
.tgx-option-card:has(input:checked) {
    background: #2b1c0d !important;
    border-color: #d4a647 !important;
    box-shadow: 0 4px 15px rgba(212, 166, 71, 0.15) !important;
}

.tgx-option-card input[type="radio"] {
    accent-color: #d4a647 !important;
    width: 18px !important;
    height: 18px !important;
}

/* Form Groups & Inputs */
.tgx-form-group {
    margin-bottom: 14px !important;
    text-align: left !important;
}

.tgx-form-group label {
    display: block !important;
    font-size: 12px !important;
    color: #d2ae68 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important;
}

.tgx-form-group label .req {
    color: #e54848 !important;
}

.tgx-form-group input {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid #3d2b18 !important;
    background: #140e09 !important;
    color: #ffffff !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

.tgx-form-group input:focus {
    outline: none !important;
    border-color: #d4a647 !important;
    box-shadow: 0 0 0 3px rgba(212, 166, 71, 0.2) !important;
}

/* Error Notice */
.tgx-error-notice {
    background: rgba(229, 72, 72, 0.15) !important;
    border: 1px solid #e54848 !important;
    color: #ff9494 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    margin: 15px 0 !important;
    text-align: center !important;
}

/* Navigation Action Buttons */
.tgx-nav-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 25px !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.tgx-btn-primary,
.tgx-btn-submit {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    padding: 14px 20px !important;
    border-radius: 14px !important;
    border: none !important;
    background: linear-gradient(90deg, #c79538, #ffe58d) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    line-height: 1.2 !important;
}

.tgx-btn-whatsapp {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 15px 20px !important;
    border-radius: 14px !important;
    border: none !important;
    background: linear-gradient(90deg, #25D366, #128C7E) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.tgx-btn-secondary {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    border-radius: 14px !important;
    border: 1px solid #3d2b18 !important;
    background: #19140f !important;
    color: #d2ae68 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

.tgx-btn-primary:hover,
.tgx-btn-submit:hover,
.tgx-btn-whatsapp:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(199, 149, 56, 0.3) !important;
}

/* Mobile Responsiveness for Buttons */
@media (max-width: 480px) {
    .tgx-nav-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .tgx-btn-secondary {
        padding: 12px 14px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    .tgx-btn-primary,
    .tgx-btn-submit {
        padding: 12px 12px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        letter-spacing: 0 !important;
    }

    .tgx-btn-whatsapp {
        padding: 13px 16px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 360px) {
    .tgx-nav-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .tgx-btn-secondary,
    .tgx-btn-primary,
    .tgx-btn-submit {
        width: 100% !important;
        text-align: center !important;
    }
}

/* Product Recommendation Cards */
.tgx-products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-top: 15px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}

@media (max-width: 480px) {
    .tgx-products-grid {
        grid-template-columns: 1fr !important;
    }
}

.tgx-product-card {
    background: #140e09 !important;
    border: 1px solid #3d2b18 !important;
    border-radius: 14px !important;
    padding: 12px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.tgx-product-card img {
    width: 100% !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
}

.tgx-product-card h4 {
    color: #ffffff !important;
    font-size: 14px !important;
    margin: 0 0 6px 0 !important;
    font-family: inherit !important;
}

.tgx-product-price {
    color: #f6d57b !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}

.tgx-product-card a.tgx-view-prod {
    display: inline-block !important;
    background: #3d2b18 !important;
    color: #f6d57b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    text-align: center !important;
}