/* ============================================================
   Casa Tequila Prime — Promotional Popup (reusable)
   Currently configured for: Happy Hour, Mon–Fri 3–6 PM.
   Sitewide, on all customer-facing pages. Self-contained: does
   not touch main.js's init cascade or style.css.

   TO DISABLE without deleting anything: set ENABLED to false in
   assets/js/promo-modal.js.
   TO REMOVE ENTIRELY: delete this file, assets/js/promo-modal.js,
   the <link>/<script> tags that reference them, and the
   #promo-modal markup block — all present on every customer-facing
   HTML page (not on admin pages).
   TO REUSE for a future promotion: edit the markup/copy in each
   HTML page's #promo-modal block and adjust the sessionStorage key
   in promo-modal.js so a dismissed old promo doesn't suppress a
   new one. This stylesheet's classes are copy-agnostic and don't
   need to change for a text-only update.

   Uses only existing design tokens from style.css (colors, fonts,
   easing, button classes) — no new tokens added.
   ============================================================ */

body.promo-open { overflow: hidden; }

.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.promo-modal[hidden] { display: none; }

.promo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,8,6,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}

.promo-modal-panel {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: min(680px, 90vh);
  max-height: min(680px, 90dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--black-2);
  border: 1px solid var(--border-hover);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(224,120,24,.1);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}

.promo-modal.is-open .promo-modal-backdrop { opacity: 1; }
.promo-modal.is-open .promo-modal-panel { opacity: 1; transform: translateY(0) scale(1); }

.promo-modal-close {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 14px; right: 14px;
  z-index: 2;
  width: 36px; height: 36px;
  color: var(--ivory);
  background: rgba(8,8,6,.35);
  border: 1px solid rgba(245,240,232,.25); border-radius: 50%;
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.promo-modal-close:hover,
.promo-modal-close:focus-visible { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); }
.promo-modal-close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Decorative image column — desktop only (see the min-width block
   below). Hidden by default so mobile gets the full-width, text-only
   layout without extra markup/JS. */
.promo-modal-media { display: none; }

.promo-modal-content {
  padding: 50px 40px 36px;
  text-align: center;
}

.promo-modal-eyebrow {
  font-family: var(--font-body);
  font-size: .62rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 14px;
}

.promo-modal-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 2.9rem);
  line-height: 1.05;
  margin: 0 0 6px;
  background: linear-gradient(
    105deg,
    var(--gold-dim)           0%,
    var(--gold)               20%,
    var(--amber)              38%,
    var(--gold-light)         46%,
    rgba(255,248,225,.98)     50%,
    var(--gold-light)         54%,
    var(--amber)              62%,
    var(--gold)               80%,
    var(--gold-dim)           100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: promoHeadlineShimmer 6s ease-in-out infinite;
}
@keyframes promoHeadlineShimmer {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.promo-modal-subhead {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ivory-dim);
  margin: 0 0 22px;
}

/* The time block is the single most important piece of information
   in the popup — sized and framed to read in under a second. */
.promo-modal-time {
  border: 1px solid var(--border-hover);
  background: rgba(201,168,76,.07);
  padding: 18px 20px 20px;
  margin: 0 0 22px;
}
.promo-modal-time-days {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 6px;
}
.promo-modal-time-hours {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 9vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.promo-modal-benefits {
  font-family: var(--font-body);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ivory-dim);
  line-height: 1.8;
  margin: 0 0 22px;
}

.promo-modal-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ivory);
  margin: 0 0 26px;
}

.promo-modal-location {
  font-family: var(--font-body);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 18px;
}

.promo-modal-cta.btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 14px;
}

.promo-modal-dismiss-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(133,124,109,.4);
  transition: color .3s ease, text-decoration-color .3s ease;
}
.promo-modal-dismiss-link:hover,
.promo-modal-dismiss-link:focus-visible {
  color: var(--ivory-dim);
  text-decoration-color: var(--ivory-dim);
}

@media (max-width: 480px) {
  .promo-modal { padding: 14px; }
  .promo-modal-content { padding: 56px 22px 26px; }
  .promo-modal-close { top: 12px; right: 12px; width: 32px; height: 32px; }
  .promo-modal-close svg { width: 13px; height: 13px; }
  .promo-modal-headline { font-size: clamp(1.9rem, 9vw, 2.35rem); }
  .promo-modal-time { padding: 15px 16px 17px; }
  .promo-modal-time-hours { font-size: clamp(2.1rem, 11vw, 2.6rem); }
  .promo-modal-benefits { font-size: .64rem; letter-spacing: .12em; }
  .promo-modal-tagline { font-size: 1.05rem; }
}

@media (max-height: 700px) {
  .promo-modal-content { padding-top: 52px; }
  .promo-modal-eyebrow { margin-bottom: 10px; }
  .promo-modal-headline { margin-bottom: 4px; }
  .promo-modal-subhead { margin-bottom: 16px; }
  .promo-modal-time { margin-bottom: 16px; padding: 14px 16px 16px; }
  .promo-modal-benefits { margin-bottom: 16px; }
  .promo-modal-tagline { margin-bottom: 18px; }
}

/* Desktop: two-column layout with a decorative image column. Image
   stays hidden below this breakpoint — mobile prioritizes readability
   over photography per design direction. */
@media (min-width: 760px) {
  .promo-modal-panel {
    width: min(880px, 94vw);
    max-height: min(600px, 88vh);
    max-height: min(600px, 88dvh);
    display: grid;
    grid-template-columns: 1.15fr .95fr;
  }
  .promo-modal-media {
    display: block;
    position: relative;
    order: 2;
    overflow: hidden;
  }
  .promo-modal-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .promo-modal-media::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(270deg, transparent 55%, var(--black-2) 100%),
      linear-gradient(0deg, rgba(8,8,6,.35), transparent 45%);
  }
  .promo-modal-content {
    order: 1;
    text-align: left;
    padding: 46px 46px 40px;
    display: flex;
    flex-direction: column;
  }
  .promo-modal-time { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-modal-backdrop,
  .promo-modal-panel { transition: opacity .01s linear; }
  .promo-modal-panel { transform: none; }
  .promo-modal-headline { animation: none; }
}