/**
 * TranslatePress Language Detection Popup — M&M Brand Override
 *
 * Transforms the default intrusive top-bar into a discreet floating
 * pill in the bottom-right corner, following M&M brand guidelines.
 *
 * Brand tokens:
 *   --mm-orange:    #fa4600
 *   --mm-bg:        #100e0d
 *   --mm-surface:   #1c1917
 *   --mm-secondary: #efebeb
 *   --mm-border:    rgba(255,255,255,0.07)
 *
 * @package mm-support
 * @since   2.2.0
 */

/* ── Reset the default top-bar layout ────────────────────────────── */
.trp_ald_no_text_popup {
    position: fixed !important;
    top: auto !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    width: auto !important;
    max-width: 340px !important;
    z-index: 99998 !important;
    background: #1c1917 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important; /* M&M: sharp edges */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(250, 70, 0, 0.12) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Barlow', Arial, sans-serif !important;
    overflow: hidden !important;

    /* Entry animation */
    animation: mmLangSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both !important;
    animation-delay: 1.5s !important;
    opacity: 0;
}

@keyframes mmLangSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Inner wrapper ───────────────────────────────────────────────── */
#trp_ald_not_text_popup_ls_and_button {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 20px !important;
    background: transparent !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* ── Text label ──────────────────────────────────────────────────── */
#trp_ald_no_text_popup_div {
    margin-bottom: 14px !important;
    padding: 0 !important;
    background: transparent !important;
}

#trp_ald_no_text_popup_text {
    font-family: 'Barlow', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #818191 !important; /* muted text */
    display: block !important;
}

/* ── Language selector container ─────────────────────────────────── */
.trp_ald_no_text_popup .trp_ald_ls_container {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ── Language switcher dropdown ───────────────────────────────────── */
.trp_ald_no_text_popup .trp-language-switcher-container {
    flex: 1 !important;
    background: #100e0d !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.trp_ald_no_text_popup .trp-ls-shortcode-current-language {
    padding: 10px 14px !important;
    color: #efebeb !important;
    font-family: 'Barlow', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.trp_ald_no_text_popup .trp-ls-shortcode-current-language:hover {
    border-color: rgba(250, 70, 0, 0.3) !important;
}

.trp_ald_no_text_popup .trp-flag-image {
    width: 20px !important;
    height: 15px !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

/* Dropdown options */
.trp_ald_no_text_popup .trp-ls-shortcode-language {
    background: #100e0d !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-top: none !important;
    position: absolute !important;
    width: 100% !important;
    z-index: 10 !important;
}

.trp_ald_no_text_popup .trp-ald-popup-select {
    padding: 10px 14px !important;
    color: #efebeb !important;
    font-family: 'Barlow', Arial, sans-serif !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.trp_ald_no_text_popup .trp-ald-popup-select:hover {
    background: rgba(250, 70, 0, 0.08) !important;
}

/* ── "Change Language" button ────────────────────────────────────── */
.trp_ald_no_text_popup .trp_ald_change_language_div,
.trp_ald_no_text_popup .trp_ald_change_language_div a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.trp_ald_no_text_popup .trp_ald_change_language_div a {
    background: #fa4600 !important;
    color: #ffffff !important;
    font-family: 'Barlow Condensed', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    border-radius: 0 !important;
    border: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.15s ease !important;
}

.trp_ald_no_text_popup .trp_ald_change_language_div a:hover {
    background: #ff5f19 !important;
    transform: translateY(-1px) !important;
}

.trp_ald_no_text_popup .trp_ald_change_language_div a:active {
    transform: translateY(0) !important;
}

/* ── Close button ────────────────────────────────────────────────── */
.trp_ald_no_text_popup .trp_ald_close_popup_button,
.trp_ald_no_text_popup .trp_ald_close_popup_button a {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #5b5b6b !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    z-index: 2 !important;
}

.trp_ald_no_text_popup .trp_ald_close_popup_button:hover,
.trp_ald_no_text_popup .trp_ald_close_popup_button a:hover {
    color: #efebeb !important;
}

/* ── Orange accent line at top (brand signature) ─────────────────── */
.trp_ald_no_text_popup::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, #fa4600, #ff5f19, #fa4600) !important;
    flex-shrink: 0 !important;
}

/* ── Mobile responsive — centred modal above cookie consent ──────── */
@media (max-width: 768px) {
    .trp_ald_no_text_popup {
        bottom: auto !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: 320px !important;
        width: calc(100% - 32px) !important;
        z-index: 2147483647 !important; /* Above iubenda cookie banner */
        animation: mmLangCenterIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both !important;
        animation-delay: 1.5s !important;
    }

    #trp_ald_not_text_popup_ls_and_button {
        padding: 16px !important;
    }

    #trp_ald_no_text_popup_text {
        font-size: 12px !important;
    }

    .trp_ald_no_text_popup .trp_ald_ls_container {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .trp_ald_no_text_popup .trp-language-switcher-container {
        width: 100% !important;
    }

    .trp_ald_no_text_popup .trp_ald_change_language_div,
    .trp_ald_no_text_popup .trp_ald_change_language_div a {
        width: 100% !important;
    }
}

/* ── Small screens (< 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
    .trp_ald_no_text_popup {
        max-width: 290px !important;
        width: calc(100% - 24px) !important;
    }

    #trp_ald_not_text_popup_ls_and_button {
        padding: 14px !important;
    }
}

/* ── Centred entry animation for mobile ──────────────────────────── */
@keyframes mmLangCenterIn {
    from {
        opacity: 0;
        transform: translate(-50%, -40%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ── Hide when admin bar is visible (logged in) ──────────────────── */
.admin-bar .trp_ald_no_text_popup {
    bottom: 56px !important;
}

@media (max-width: 782px) {
    .admin-bar .trp_ald_no_text_popup {
        bottom: auto !important; /* centred on mobile, admin bar irrelevant */
    }
}

/* ── Override white dropdown to dark ─────────────────────────────── */
.trp_ald_no_text_popup select,
.trp_ald_no_text_popup .trp-ls-shortcode-current-language,
.trp_ald_no_text_popup .trp-language-switcher-container,
.trp_ald_no_text_popup .trp-ald-popup-select,
.trp_ald_no_text_popup .trp_ald_ls_container select {
    background: #100e0d !important;
    background-color: #100e0d !important;
    color: #efebeb !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: 'Barlow', Arial, sans-serif !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ── Modal wrapper — dark background ─────────────────────────────── */
.trp_ald_modal,
#trp_ald_modal_popup {
    background: #1c1917 !important;
    background-color: #1c1917 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ── Close link — remove blue, use muted grey → orange on hover ── */
.trp_ald_modal a,
#trp_ald_modal_popup a[href="#"],
.trp_ald_no_text_popup a[href="#"],
#trp_ald_x_button,
#trp_ald_x_button_textarea {
    color: #5b5b6b !important;
    text-decoration: none !important;
}

.trp_ald_modal a:hover,
#trp_ald_modal_popup a[href="#"]:hover,
.trp_ald_no_text_popup a[href="#"]:hover,
#trp_ald_x_button:hover,
#trp_ald_x_button_textarea:hover {
    color: #fa4600 !important;
}

/* ── Close text label styling ────────────────────────────────────── */
#trp_ald_x_button_textarea {
    font-family: 'Barlow', Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    color: #5b5b6b !important;
}

#trp_ald_x_button_textarea:hover {
    color: #fa4600 !important;
}

/* ── Popup text (inner modal) ────────────────────────────────────── */
#trp_ald_popup_text {
    color: #818191 !important;
    font-family: 'Barlow', Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 16px 16px 12px !important;
    background: transparent !important;
}

/* ── TRP close button (dashicon) — kill the blue ─────────────────── */
#trp_ald_no_text_popup_x {
    text-align: center !important;
    padding: 4px 0 12px !important;
}

#trp_close {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
}

#trp_no_text_popup #trp_ald_no_text_popup_x #trp_close::before,
.trp_ald_no_text_popup #trp_ald_no_text_popup_x #trp_close::before,
#trp_close::before {
    color: #5b5b6b !important;
    font-size: 20px !important;
    transition: color 0.15s ease !important;
}

#trp_no_text_popup #trp_close:hover::before,
.trp_ald_no_text_popup #trp_close:hover::before,
#trp_close:hover::before {
    color: #fa4600 !important;
}

/* ── Tighter card layout — prevent overflow ──────────────────────── */
.trp_ald_no_text_popup * {
    box-sizing: border-box !important;
}

#trp_ald_not_text_popup_ls_and_button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
}

.trp_ald_no_text_popup .trp_ald_ls_container {
    width: 100% !important;
    max-width: 100% !important;
}

.trp_ald_no_text_popup .trp-language-switcher-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

.trp_ald_no_text_popup .trp_ald_change_language_div {
    width: 100% !important;
    margin-top: 10px !important;
}

.trp_ald_no_text_popup .trp_ald_change_language_div a {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 10px 16px !important;
}

#trp_ald_no_text_popup_x {
    padding: 2px 0 8px !important;
}

.trp_ald_select_and_button {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#trp_ald_popup_text {
    padding: 14px 16px 8px !important;
    margin: 0 !important;
}

.trp_ald_modal,
#trp_ald_modal_popup {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}