/* ==========================================================================
   Evara London — shared vendor components
   Found by auditing every page for plugin/theme markup that carries its own
   light styling: modals, off-canvas panels, search overlay, mobile menu,
   currency switcher, blog and contact blocks, form controls.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Modals (quick view, confirmations)
   -------------------------------------------------------------------------- */

.modal-content {
    background: var(--ev-navy) !important;
    border: 1px solid rgba(163, 152, 115, .4) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
}

.modal-header, .modal-footer {
    background: transparent !important;
    border-color: rgba(163, 152, 115, .25) !important;
}

.modal-title { font-family: var(--ev-font-display) !important; color: var(--ev-white) !important; letter-spacing: .05em; font-weight: 400; }
.modal-body { color: rgba(255, 255, 255, .78) !important; }
.modal-backdrop { background: #02060f !important; }
.modal-backdrop.show { opacity: .82 !important; }

.btn-close {
    background: none !important;
    opacity: 1 !important;
    color: var(--ev-cream) !important;
    filter: none !important;
    position: relative;
    width: 32px; height: 32px;
    border: 1px solid rgba(163, 152, 115, .4) !important;
    border-radius: 0 !important;
}

.btn-close::before {
    content: '\00D7';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; color: var(--ev-cream);
}

.btn-close:hover { border-color: var(--ev-gold) !important; }
.btn-close:hover::before { color: var(--ev-gold-bright); }

/* The review popup's close button could be seen but not clicked.
 *
 * That modal puts its header in a `position-absolute` corner with no z-index,
 * and Bootstrap gives `.modal-body` `position: relative`. Two positioned
 * siblings, both at z-index auto, so the later one in the document — the body
 * — paints over the earlier one, and every click aimed at the cross landed on
 * the body behind it. Hit-testing the button at nine points across its face
 * returned the modal body at all nine.
 *
 * Scoped to absolutely-positioned headers so an ordinary modal header, which
 * sits in normal flow and has never had this problem, is left alone. */
.modal-content > .modal-header.position-absolute {
    z-index: 5;
}

/* Belt to that braces: whatever the stacking works out to, the control the
   user is aiming at must receive the click. */
.modal-header .btn-close {
    position: relative;
    z-index: 6;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Off-canvas (mobile menu, cart drawer, currency)
   -------------------------------------------------------------------------- */

.offcanvas, .offcanvas__area {
    background: var(--ev-navy) !important;
    border-left: 1px solid rgba(163, 152, 115, .35) !important;
    color: var(--ev-cream) !important;
}

.offcanvas__content, .offcanvas__bottom, .offcanvas__footer, .offcanvas__category { background: transparent !important; color: var(--ev-cream) !important; }
.offcanvas__logo img { max-height: 46px; width: auto; }

.offcanvas__close-btn, .offcanvas-close-btn, .offcanvas__close {
    background: transparent !important;
    border: 1px solid rgba(163, 152, 115, .4) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
}

.offcanvas__close-btn:hover, .offcanvas-close-btn:hover { border-color: var(--ev-gold) !important; color: var(--ev-gold-bright) !important; }

.offcanvas a, .offcanvas__area a { color: rgba(255, 255, 255, .8) !important; }
.offcanvas a:hover, .offcanvas__area a:hover { color: var(--ev-gold-bright) !important; }

.offcanvas__currency-wrapper, .offcanvas__currency-list, .tp-currency-list {
    background: var(--ev-navy-deep) !important;
    border: 1px solid rgba(163, 152, 115, .3) !important;
    border-radius: 0 !important;
}

.offcanvas__currency-selected-currency, .tp-currency-toggle {
    color: var(--ev-cream) !important;
    background: transparent !important;
    font-family: var(--ev-font-body) !important;
    font-size: 12px;
    letter-spacing: .12em;
}

.offcanvas__btn .tp-btn-2, .offcanvas__btn a { border-radius: 0 !important; }

/* --------------------------------------------------------------------------
   Search overlay + quick results
   -------------------------------------------------------------------------- */

.tp-search-area {
    background: rgba(5, 13, 31, .97) !important;
    backdrop-filter: blur(6px);
    color: var(--ev-cream) !important;
}

.tp-search-form, .tp-search-input { background: transparent !important; }

.tp-search-input input, .tp-search-form input {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(163, 152, 115, .5) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
    font-family: var(--ev-font-display) !important;
    font-size: clamp(20px, 3vw, 34px) !important;
    letter-spacing: .04em;
    padding: 14px 0 !important;
}

.tp-search-input input::placeholder { color: rgba(253, 224, 191, .35) !important; }

.tp-search-close-btn, .tp-search-close, .tp-search-open-btn {
    background: transparent !important;
    border: 0 !important;
    color: var(--ev-cream) !important;
}

.tp-search-close-btn:hover, .tp-search-open-btn:hover { color: var(--ev-gold-bright) !important; }

.bb-quick-search-results, .bb-form-quick-search {
    background: var(--ev-navy-deep) !important;
    border: 1px solid rgba(163, 152, 115, .35) !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
}

.bb-quick-search-results a { color: rgba(255, 255, 255, .8) !important; }
.bb-quick-search-results a:hover { color: var(--ev-gold-bright) !important; background: rgba(163, 152, 115, .1) !important; }

/* --------------------------------------------------------------------------
   Mobile menu + bottom bar
   -------------------------------------------------------------------------- */

.tp-mobile-menu, .tp-main-menu-mobile, .tp-category-mobile-menu {
    background: var(--ev-navy) !important;
    color: var(--ev-cream) !important;
}

.tp-main-menu-mobile a, .tp-category-mobile-menu a {
    color: rgba(255, 255, 255, .82) !important;
    font-family: var(--ev-font-display) !important;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-color: rgba(163, 152, 115, .2) !important;
}

.tp-main-menu-mobile a:hover { color: var(--ev-gold-bright) !important; }

.tp-mobile-item, .tp-mobile-item-btn {
    background: var(--ev-navy-deep) !important;
    color: var(--ev-cream) !important;
    border-color: rgba(163, 152, 115, .25) !important;
}

.tp-mobile-item-btn:hover, .tp-mobile-item.active .tp-mobile-item-btn { color: var(--ev-gold-bright) !important; }
.tp-offcanvas-open-btn, .tp-offcanvas-category-toggle { background: transparent !important; border-color: rgba(163,152,115,.4) !important; color: var(--ev-cream) !important; }

/* --------------------------------------------------------------------------
   Buttons the theme ships
   -------------------------------------------------------------------------- */

.tp-btn-2, .tp-btn-border-2, .tp-link-btn-3, .btn-auth-submit, .tp-blog-grid-btn {
    border-radius: 0 !important;
    font-family: var(--ev-font-body) !important;
    font-size: 11px !important;
    letter-spacing: .28em !important;
    text-transform: uppercase;
    padding: 14px 32px !important;
}

.tp-btn-2, .btn-auth-submit {
    background: var(--ev-gold) !important;
    border: 1px solid var(--ev-gold) !important;
    color: var(--ev-navy) !important;
}

.tp-btn-2:hover, .btn-auth-submit:hover { background: var(--ev-gold-bright) !important; border-color: var(--ev-gold-bright) !important; }

.tp-btn-border-2, .tp-link-btn-3, .tp-blog-grid-btn {
    background: transparent !important;
    border: 1px solid rgba(163, 152, 115, .55) !important;
    color: var(--ev-gold) !important;
}

.tp-btn-border-2:hover, .tp-link-btn-3:hover, .tp-blog-grid-btn:hover { background: var(--ev-gold) !important; color: var(--ev-navy) !important; }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.form-label {
    font-family: var(--ev-font-body) !important;
    font-size: 10px !important;
    letter-spacing: .22em !important;
    text-transform: uppercase;
    color: var(--ev-gold) !important;
    margin-bottom: 8px;
}

.form-check-input {
    accent-color: var(--ev-gold);
    background-color: rgba(11, 23, 49, .6) !important;
    border-color: rgba(163, 152, 115, .5) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.form-check-input:checked { background-color: var(--ev-gold) !important; border-color: var(--ev-gold) !important; }
.form-check-inline label, .form-check label { color: rgba(255, 255, 255, .78) !important; font-size: 13px; letter-spacing: 0; text-transform: none; }

/* --------------------------------------------------------------------------
   Blog cards
   -------------------------------------------------------------------------- */

.tp-blog-grid-item { background: transparent !important; border: 1px solid rgba(163, 152, 115, .28) !important; border-radius: 0 !important; }
.tp-blog-grid-thumb img { border-radius: 0 !important; }
.tp-blog-grid-content { background: transparent !important; padding: 24px !important; }

.tp-blog-grid-title, .tp-blog-grid-title a {
    font-family: var(--ev-font-display) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: .04em;
    color: var(--ev-white) !important;
}

.tp-blog-grid-title a:hover { color: var(--ev-gold-bright) !important; }
.tp-blog-grid-meta, .tp-blog-grid-meta span, .tp-blog-grid-meta a { color: rgba(255, 255, 255, .5) !important; font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Contact blocks
   -------------------------------------------------------------------------- */

.tp-contact-info-item { background: transparent !important; border: 1px solid rgba(163, 152, 115, .28) !important; border-radius: 0 !important; padding: 28px !important; }
.tp-contact-info-icon svg, .tp-contact-info-icon i { color: var(--ev-gold) !important; }
.tp-contact-info-content, .tp-contact-info-content p, .tp-contact-info-content a { color: rgba(255, 255, 255, .75) !important; }
.tp-contact-info-content h3, .tp-contact-info-content h4 { font-family: var(--ev-font-display) !important; color: var(--ev-white) !important; font-weight: 400; letter-spacing: .05em; }

/* --------------------------------------------------------------------------
   Featured category blocks
   -------------------------------------------------------------------------- */

.tp-featured-category-image { border-radius: 0 !important; }
.tp-featured-category-content, .tp-featured-category-content a {
    font-family: var(--ev-font-display) !important;
    color: var(--ev-cream) !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 13px !important;
}

/* --------------------------------------------------------------------------
   Generic bootstrap surfaces that leak through
   -------------------------------------------------------------------------- */

.card { background: rgba(11, 23, 49, .4) !important; border: 1px solid rgba(163, 152, 115, .28) !important; border-radius: 0 !important; color: var(--ev-cream) !important; }
.card-header, .card-footer { background: transparent !important; border-color: rgba(163, 152, 115, .22) !important; }
.badge { border-radius: 0 !important; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.alert { border-radius: 0 !important; background: rgba(11, 23, 49, .6) !important; border: 1px solid rgba(163, 152, 115, .35) !important; color: rgba(255, 255, 255, .8) !important; }
.table { color: var(--ev-cream) !important; }
.table > :not(caption) > * > * { background: transparent !important; border-color: rgba(163, 152, 115, .18) !important; color: inherit !important; }

/* --------------------------------------------------------------------------
   Second audit pass — the remainder
   -------------------------------------------------------------------------- */

.modal-dialog, .modal-dialog-centered { color: var(--ev-cream); }
.tp-product-modal, .tp-product-modal .modal-content { background: var(--ev-navy) !important; border-color: rgba(163,152,115,.4) !important; }

.offcanvas__wrapper, .offcanvas__top {
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--ev-cream) !important;
}

/* .offcanvas__radius is applied to the SAME element as .offcanvas__area —
   it must not blank the panel background. */
.offcanvas__radius {
    background: var(--ev-navy) !important;
    border-radius: 0 !important;
    border-color: rgba(163, 152, 115, .3) !important;
}

.tp-page-area { background: transparent !important; }

.tp-sidebar-widget, .tp-sidebar-widget-content {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--ev-cream) !important;
}

.tp-sidebar-widget { margin-bottom: clamp(24px, 3vw, 38px); }

.tp-sidebar-widget-title {
    font-family: var(--ev-font-display) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase;
    color: var(--ev-cream) !important;
    background: transparent !important;
    padding: 0 0 12px !important;
    margin: 0 0 16px !important;
    border-bottom: 1px solid rgba(163, 152, 115, .35) !important;
}

.tp-featured-category-item {
    background: transparent !important;
    border: 1px solid rgba(163, 152, 115, .28) !important;
    border-radius: 0 !important;
}

.btn-check + label { border-radius: 0 !important; }
.btn-check:checked + label { background: var(--ev-gold) !important; border-color: var(--ev-gold) !important; color: var(--ev-navy) !important; }

/* ---------- final pass: blog sidebar + remaining filter bits ---------- */

.tp-sidebar-blog-item { background: transparent !important; border-bottom: 1px solid rgba(163,152,115,.18); padding-bottom: 16px; margin-bottom: 16px; }
.tp-sidebar-blog-thumb img { border-radius: 0 !important; border: 1px solid rgba(163,152,115,.25); }
.tp-sidebar-blog-content { background: transparent !important; }
.tp-sidebar-blog-title, .tp-sidebar-blog-title a {
    font-family: var(--ev-font-display) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .04em;
    color: var(--ev-cream) !important;
}
.tp-sidebar-blog-title a:hover { color: var(--ev-gold-bright) !important; }
.tp-sidebar-blog-meta, .tp-sidebar-blog-meta span { color: rgba(255,255,255,.45) !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; }

.bb-product-price-filter-info { color: rgba(255,255,255,.7) !important; background: transparent !important; font-size: 12.5px !important; }
.bb-ecommerce-filter-hidden-fields { display: none !important; }
.tp-product-details-query-item { color: rgba(255,255,255,.7) !important; font-size: 13px; }
.tp-product-details-query-item span { color: var(--ev-gold) !important; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }

/* The consent tick on the contact form. The plugin validates it whenever
   contact_form_show_terms_checkbox is on, so it has to be present and
   readable, not tucked away. */
.ev-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
}

.ev-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--ev-gold);
    cursor: pointer;
}

.ev-consent a { color: var(--ev-gold); text-decoration: underline; }
.ev-consent a:hover { color: var(--ev-gold-bright); }