/* ==========================================================================
   Evara London — sale notification popup
   Real structure (from the plugin's own sheet, which loads with the AJAX
   payload and therefore after this file):

     .sale-popup-container-wrap   <- the visible card: background, radius, shadow
       .sale-popup-container      <- inner flex row (thumb | info)
         .sale-popup-thumb        <- padding:10px
         .sale-popup-info         <- padding:10px 10px 10px 0 !important

   The card is the WRAP, not the container. Styling the container put the
   border inside the padding, which is why content sat on the line.
   ========================================================================== */

.sale-popup-container-wrap {
    background-color: rgba(5, 13, 31, .97) !important;
    border: 1px solid rgba(163, 152, 115, .45) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .75) !important;
    backdrop-filter: blur(6px);
    color: var(--ev-cream) !important;
    overflow: visible;
}

/* the inner row carries the breathing room */
.sale-popup-container {
    background: transparent !important;
    border: 0 !important;
    padding: 16px 18px !important;
    gap: 14px;
    align-items: center !important;
}

.sale-popup-thumb { padding: 0 !important; flex: 0 0 auto; }

.sale-popup-thumb img {
    max-width: 64px !important;
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(163, 152, 115, .35);
    border-radius: 0 !important;
}

.sale-popup-info {
    padding: 0 26px 0 0 !important;   /* right gap clears the close button */
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* ---------- type ---------- */

.sale-popup-info,
.sale-popup-info * { font-family: var(--ev-font-body) !important; }

.sale-popup-location,
.js-sale-popup-location {
    color: rgba(255, 255, 255, .72) !important;
    font-size: 12px !important;
    letter-spacing: .04em;
}

.sale-popup-title,
.js-sale-popup-tt {
    font-family: var(--ev-font-display) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    color: var(--ev-cream) !important;
    line-height: 1.5;
}

.sale-popup-title:hover, .js-sale-popup-tt:hover { color: var(--ev-gold-bright) !important; }

.sale-popup-time,
.sale-popup-ago,
.js-sale-popup-ago {
    color: rgba(255, 255, 255, .45) !important;
    font-size: 11px !important;
    letter-spacing: .06em;
}

.sale-popup-verify {
    color: var(--ev-gold) !important;
    font-size: 11px !important;
    letter-spacing: .06em;
}

.sale-popup-verify svg,
.sale-popup-verify i,
.sale-popup-verify img { color: var(--ev-gold) !important; width: 13px; height: 13px; }

/* ---------- controls: inset from the frame ---------- */

.sale-popup-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important;
    border: 0 !important;
    color: rgba(253, 224, 191, .55) !important;
    opacity: 1 !important;
    font-size: 16px; line-height: 1;
    z-index: 3;
}

.sale-popup-close:hover { color: var(--ev-gold-bright) !important; }

.sale-popup-container [class*="quick-view"],
.sale-popup-container .sale-popup-quick-view {
    position: absolute !important;
    right: 12px !important;
    bottom: 10px !important;
    color: rgba(253, 224, 191, .45) !important;
    z-index: 3;
}

.sale-popup-container [class*="quick-view"]:hover { color: var(--ev-gold-bright) !important; }
.sale-popup-container a { color: inherit !important; }

/* ==========================================================================
   Newsletter popup — the Subscribe button

   It rendered white on gold, roughly 2.3:1, which is below the point where
   text stays comfortably readable. Every other solid button in the theme is
   navy on gold; this one now matches, and loses the 6px corner it inherited
   from Bootstrap.
   ========================================================================== */

.newsletter-popup .btn-primary,
.newsletter-popup button[type="submit"],
.bb-newsletter-popup-form .btn-primary,
.bb-newsletter-popup-form button[type="submit"] {
    background: var(--ev-gold) !important;
    border: 1px solid var(--ev-gold) !important;
    border-radius: 0 !important;
    color: var(--ev-navy) !important;
    font-family: var(--ev-font-display);
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 13px 26px;
    box-shadow: none !important;
    transition: background .3s ease, color .3s ease;
}
.newsletter-popup .btn-primary:hover,
.newsletter-popup button[type="submit"]:hover,
.bb-newsletter-popup-form .btn-primary:hover,
.bb-newsletter-popup-form button[type="submit"]:hover {
    background: transparent !important;
    color: var(--ev-cream) !important;
}