/*--------------------------------------------------------------
# UI/UX Overhaul — tangoenvivo.com
#
# This file addresses specific UI/UX issues organized into four
# sections. It loads AFTER theme-core.css and plugin-overrides.css.
#
# @package TicketSystemTango
--------------------------------------------------------------*/


/* ==========================================================================
   1. FIX CRITICAL MOBILE OVERLAPS (Z-Index & Positioning)
   ========================================================================== */

/*
 * 1a. WhatsApp widget vs. Sticky Cart Bar
 *
 * The sticky CTA (.ts-sticky-cta) sits at bottom: 0 with z-index: 9999.
 * Push the floating WhatsApp widget above it on mobile so they don't overlap.
 * We target every common WhatsApp chat-widget plugin selector.
 */
@media (max-width: 768px) {

    /* Click to Chat (HT) plugin — confirmed on tangoenvivo.com */
    #ht-ctc-chat,
    #ht-ctc-chat .ht-ctc-cta,
    #ht-ctc-chat .ht_ctc_style {
        bottom: 90px !important;
    }

    /* Joinchat / Join.chat plugin */
    .joinchat,
    .joinchat__button {
        bottom: 90px !important;
    }

    /* WhatsApp Chat by Developer (wa-chat-widget selectors) */
    .wa-chat-widget,
    .wa__btn_popup,
    #wa-widget,
    .wa__popup_chat_window {
        bottom: 90px !important;
    }

    /* Generic catch-all for any WhatsApp-positioned widget in bottom-right */
    [id*="whatsapp"],
    [class*="whatsapp-button"],
    [class*="whatsapp-widget"],
    [class*="wa-float"],
    .floating-wpp,
    #nta-wa-chat-button,
    .nta-wa-btn {
        bottom: 90px !important;
    }
}

/*
 * 1b. Footer Overlap
 *
 * Prevent the WhatsApp button from covering the copyright text
 * by adding bottom padding to the footer on mobile.
 */
@media (max-width: 768px) {

    .site-footer .site-info,
    .site-footer .ts-footer-compliance,
    .ts-footer-disclaimer {
        padding-bottom: 80px;
    }
}


/* ==========================================================================
   2. FORM CONTRAST & CONSISTENCY (Newsletter & Filters)
   ========================================================================== */

/*
 * 2a. Newsletter Inputs — visible on dark backgrounds
 *
 * Override the dark-on-dark default with a subtly lighter background,
 * a gold-tinted border, and bright text/placeholders.
 */
.ts-newsletter input[type="text"],
.ts-newsletter input[type="email"],
.ts-newsletter .wpcf7-form-control:not(.wpcf7-submit) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(201, 169, 110, 0.4) !important;
    border-bottom: 2px solid rgba(201, 169, 110, 0.4) !important;
    border-radius: var(--ts-radius-sm) var(--ts-radius-sm) 0 0 !important;
    color: #ffffff !important;
    padding: 16px !important;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ts-newsletter input[type="text"]::placeholder,
.ts-newsletter input[type="email"]::placeholder,
.ts-newsletter .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
}

.ts-newsletter input[type="text"]:focus,
.ts-newsletter input[type="email"]:focus,
.ts-newsletter .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: var(--ts-gold) !important;
    border-bottom-color: var(--ts-gold) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    outline: none;
}

/*
 * 2b. Newsletter "ENVIAR" Submit Button
 *
 * Make it look active/actionable instead of disabled.
 * Bold gold background with dark text and a hover lift.
 */
.ts-newsletter .wpcf7-submit,
.ts-newsletter input[type="submit"] {
    background-color: var(--ts-gold) !important;
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none !important;
    border-radius: var(--ts-radius-sm) !important;
    padding: 16px 32px !important;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: var(--ts-shadow-1);
}

.ts-newsletter .wpcf7-submit:hover,
.ts-newsletter input[type="submit"]:hover {
    background-color: #E8C37E !important;
    transform: translateY(-2px);
    box-shadow: var(--ts-shadow-2);
}

.ts-newsletter .wpcf7-submit:active,
.ts-newsletter input[type="submit"]:active {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

/*
 * 2c. Filter UI — Unify date inputs with select dropdowns
 *
 * Make input[type="date"] fields visually match the Gold-accented
 * dropdowns for a consistent filter bar.
 */
.ts-event-browser .tc-event-filter__field input[type="date"],
.ts-event-browser .tc-event-datepicker,
.ts-event-browser .tc-event-datepicker-white,
.ts-event-browser input.hasDatepicker,
.ts-event-browser #tc_start_date,
.ts-event-browser #tc_end_date {
    background-color: rgba(198, 166, 100, 0.08) !important;
    border: 1px solid rgba(198, 166, 100, 0.35) !important;
    border-radius: var(--ts-radius) !important;
    color: var(--ts-lightgrey) !important;
    padding: 16px 48px 16px 16px;
    font-size: 1rem;
    font-family: var(--font-body);
    color-scheme: dark;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ts-event-browser .tc-event-filter__field input[type="date"]:focus,
.ts-event-browser .tc-event-datepicker:focus,
.ts-event-browser .tc-event-datepicker-white:focus,
.ts-event-browser input.hasDatepicker:focus,
.ts-event-browser #tc_start_date:focus,
.ts-event-browser #tc_end_date:focus {
    border: 2px solid var(--ts-gold) !important;
    background-color: rgba(198, 166, 100, 0.12) !important;
    padding: 15px 47px 15px 15px;
    /* compensate 1px extra border */
    outline: none;
}


/* ==========================================================================
   3. WOOCOMMERCE SINGLE EVENT PAGE POLISH
   ========================================================================== */

/*
 * 3a. Social Share Icons — Monochromatic Gold
 *
 * Strip out the default bright brand backgrounds (blue, green, etc.)
 * and replace them with a theme-consistent dark/gold treatment.
 */

/* Sharedaddy (Jetpack) */
.sharedaddy .sd-social-icon .sd-content ul li a,
.sharedaddy .sd-content ul li a.sd-button {
    background-color: var(--ts-surface-4) !important;
    border: 1px solid var(--ts-border-color) !important;
    border-radius: var(--ts-radius-sm) !important;
    color: var(--ts-gold) !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sharedaddy .sd-social-icon .sd-content ul li a:hover,
.sharedaddy .sd-content ul li a.sd-button:hover {
    background-color: rgba(198, 166, 100, 0.15) !important;
    border-color: var(--ts-gold) !important;
    color: #ffffff !important;
}

/* AddToAny — override inline SVG brand colors with monochrome gold.
 * The plugin uses .a2a_kit as the parent container and sets background-color
 * inline on each icon span, so we need high specificity.
 */
.a2a_kit a,
.a2a_kit .a2a_button_email,
.a2a_kit .a2a_button_whatsapp,
.a2a_kit .a2a_button_facebook_messenger,
.a2a_kit .a2a_dd,
.addtoany_list a,
.addtoany_list .a2a_button_facebook,
.addtoany_list .a2a_button_twitter,
.addtoany_list .a2a_button_whatsapp,
.addtoany_list .a2a_button_email {
    background-color: var(--ts-surface-4) !important;
    border: 1px solid var(--ts-border-color) !important;
    border-radius: var(--ts-radius-sm) !important;
    color: var(--ts-gold) !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Override the inline background-color on the inner icon span */
.a2a_kit a span[class*="a2a_svg"],
.a2a_kit a .a2a_svg,
.addtoany_list a span[class*="a2a_svg"],
.addtoany_list a .a2a_svg {
    background-color: transparent !important;
}

/* Tint the SVG icons gold using CSS filter */
.a2a_kit a img,
.a2a_kit a svg,
.addtoany_list a img,
.addtoany_list a svg {
    filter: grayscale(1) brightness(2) sepia(0.8) hue-rotate(5deg) saturate(1.5) !important;
    opacity: 0.85;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.a2a_kit a:hover,
.addtoany_list a:hover {
    background-color: rgba(198, 166, 100, 0.15) !important;
    border-color: var(--ts-gold) !important;
}

.a2a_kit a:hover img,
.a2a_kit a:hover svg,
.addtoany_list a:hover img,
.addtoany_list a:hover svg {
    filter: grayscale(0) brightness(1.5) !important;
    opacity: 1;
}

/* Generic social icon wrappers (WC or theme-provided) */
.wc-social-icons a,
.social-icons a,
[class*="share-buttons"] a,
.product_meta .social-share a {
    background-color: var(--ts-surface-4) !important;
    border: 1px solid var(--ts-border-color) !important;
    border-radius: var(--ts-radius-sm) !important;
    color: var(--ts-gold) !important;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wc-social-icons a:hover,
.social-icons a:hover,
[class*="share-buttons"] a:hover,
.product_meta .social-share a:hover {
    background-color: rgba(198, 166, 100, 0.15) !important;
    border-color: var(--ts-gold) !important;
    color: #ffffff !important;
}

/*
 * 3b. Quantity Selector Refinements
 *
 * The custom .gtango-qty component already exists in theme-core.css.
 * We add minor touch-ups: enforce 44px min-height for mobile touch
 * targets and ensure visual harmony with the gold CTA.
 */
.single-product div.product form.cart .quantity,
.single-product div.product form.cart .gtango-qty {
    min-height: 48px;
}

.single-product div.product form.cart .gtango-qty__btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.4rem;
    color: var(--ts-gold);
    border: none;
    background-color: transparent;
}

.single-product div.product form.cart .gtango-qty__btn:hover:not(:disabled) {
    background-color: rgba(198, 166, 100, 0.15);
    color: #ffffff;
}

.single-product div.product form.cart .gtango-qty__input {
    min-height: 44px;
    min-width: 52px;
    background: var(--ts-surface-4) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    border: none !important;
    border-radius: var(--ts-radius-sm);
}

/* Fallback for default WooCommerce quantity (no custom wrapper) */
.woocommerce .quantity .qty {
    min-height: 44px;
    background: var(--ts-surface-4) !important;
    color: #ffffff !important;
    border: 1px solid var(--ts-border-color) !important;
    border-radius: var(--ts-radius-sm);
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 8px 12px;
}

/*
 * 3c. Cross-sells / Related Products Proportions
 *
 * Constrain card widths so they don't stretch across the entire
 * screen on desktop. Center them for a polished look.
 */
.cross-sells ul.products li.product,
.up-sells ul.products li.product,
.related ul.products li.product {
    max-width: 320px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure the grid wrapper itself accommodates centered cards */
.cross-sells ul.products,
.up-sells ul.products,
.related ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}


/* ==========================================================================
   4. GLOBAL LAYOUT & TYPOGRAPHY ADJUSTMENTS
   ========================================================================== */

/*
 * 4a. Desktop Hero Buttons — Group together on the left
 *
 * Ensure .tev-hero__actions groups its children horizontally on
 * the left side, directly under the hero text.
 */
@media (min-width: 769px) {
    .tev-hero__actions {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        margin-top: 12px;
    }

    /* If the "Explorar eventos" scroll-btn is repositioned inside actions
       via PHP in the future, ensure it matches the CTA styling. */
    .tev-hero__actions .tev-hero__scroll-btn {
        position: static;
        transform: none;
    }
}

/*
 * 4b. Hero Badge — "SITIO EN LANZAMIENTO"
 *
 * Refine it to look like a subtle UI badge: smaller font,
 * transparent background, thin gold border, pill shape.
 */
.tev-hero__badge {
    font-size: 0.7rem !important;
    padding: 6px 14px !important;
    background: transparent !important;
    border: 1px solid var(--ts-gold) !important;
    border-radius: 20px !important;
    color: var(--ts-gold) !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Keep the pulsing dot but make it smaller */
.tev-hero__badge::before {
    width: 6px;
    height: 6px;
}

/*
 * 4c. Typography Contrast — Event meta & footer text
 *
 * Increase font-size slightly and lighten color for readability
 * against the dark background (targeting WCAG AA on #121212).
 * #cccccc on #121212 = contrast ratio ~10.5:1 (AAA pass).
 */

/* Event card metadata (dates, locations) */
.ts-meta-datetime,
.ts-meta-location,
.tc-event-date span,
.tc-event-location span {
    font-size: 0.9em;
    color: #cccccc !important;
}

/* Keep the date gold but slightly lighter for better readability */
.ts-meta-datetime {
    color: var(--ts-gold) !important;
}

/* Footer disclaimer & copyright text */
.ts-footer-disclaimer,
.ts-footer-disclaimer p,
.ts-copyright {
    font-size: 0.9em;
    color: #cccccc !important;
}

/* Event excerpt text in the listing cards */
.ts-event-browser .tc-event-excerpt p {
    font-size: 0.9em;
    color: #cccccc !important;
}