/* ============================================================================
   HIGHTIME LOUNGES — COMPONENTS
   Reusable UI: buttons, header/nav, footer, cards, badges, forms, modal,
   tabs, chips, ratings, hero, calendar, stats, steps, tables.
   ==========================================================================*/

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .01em; line-height: 1;
  padding: .95rem 1.6rem; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
  box-shadow: var(--sh-1); text-align: center; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-brand); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 1.15rem 2rem; font-size: var(--fs-base); }
.btn--sm { padding: .6rem 1.05rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }
.btn--copper { --btn-bg: var(--copper); }
.btn--copper:hover { box-shadow: 0 10px 30px rgba(196,122,61,.32); }
.btn--dark { --btn-bg: var(--forest-800); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-dark); box-shadow: var(--sh-1); }
.btn--on-dark { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.28); box-shadow:none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--on-dark:hover { --btn-bg: #fff; --btn-fg: var(--forest-800); border-color:#fff; }
.btn--outline-brand { --btn-bg: transparent; --btn-fg: var(--brand-dark); border-color: var(--brand); box-shadow:none; }
.btn--outline-brand:hover { --btn-bg: var(--brand); --btn-fg:#fff; }
.btn svg { width: 1.05em; height: 1.05em; }

.btn-link { font-weight:700; color: var(--brand-dark); display:inline-flex; align-items:center; gap:.4rem; }
.btn-link svg { width:1em;height:1em; transition: transform var(--t) var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- HEADER */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(11,29,19,.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(243,239,226,.1);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.28); }
.nav {
  display: flex; align-items: center; gap: var(--sp-5);
  height: var(--header-h);
}
.nav__logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--on-dark); flex-shrink:0; }
.nav__logo svg, .nav__logo img { height: 42px; width: auto; }
.nav__logo:hover { color: #fff; }
.nav__links { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav__link {
  position: relative; color: var(--on-dark-soft); font-weight: 600; font-size: var(--fs-sm);
  padding: .6rem .85rem; border-radius: var(--r-sm); white-space: nowrap;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav__link.is-active { color: #fff; }
.nav__link.is-active::after {
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.3rem; height:2px;
  background: var(--brand-light); border-radius:2px;
}
.nav__actions { display:flex; align-items:center; gap:.6rem; }
.nav__toggle { display:none; background:none; border:0; cursor:pointer; padding:.4rem; color:#fff; }
.nav__toggle svg { width:28px; height:28px; }

/* dropdown */
.nav__item { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px;
  background: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: .6rem; opacity:0; visibility:hidden; transform: translateY(8px);
  transition: all var(--t) var(--ease); border:1px solid var(--line-soft);
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity:1; visibility:visible; transform:none; }
.nav__menu a { display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius: var(--r-sm); color: var(--ink); font-weight:600; font-size:var(--fs-sm); }
.nav__menu a:hover { background: var(--fill); color: var(--brand-dark); }
.nav__menu .dot { width:10px;height:10px;border-radius:50%; flex-shrink:0; }

@media (max-width: 1080px){
  .nav__toggle { display:inline-flex; margin-left:auto; }
  .nav__links {
    position: fixed; inset: var(--header-h) 0 0 0; margin:0;
    flex-direction: column; align-items: stretch; gap:.2rem;
    background: var(--forest-900); padding: 1.2rem; overflow-y:auto;
    transform: translateX(100%); transition: transform var(--t) var(--ease);
  }
  .nav__links.is-open { transform:none; }
  .nav__link { font-size: var(--fs-md); padding: .9rem 1rem; }
  .nav__menu { position: static; opacity:1; visibility:visible; transform:none; box-shadow:none; background: transparent; border:0; padding:.2rem 0 .6rem 1rem; }
  .nav__menu a { color: var(--on-dark-soft); }
  .nav__menu a:hover { background: rgba(255,255,255,.06); color:#fff; }
  .nav__actions .btn { display:none; }
}

/* ---------------------------------------------------------------- FOOTER */
.site-footer { background: var(--forest-900); color: var(--on-dark-soft); padding-top: var(--sp-8); }
.site-footer h5 { color: var(--paper); font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing:.12em; text-transform: uppercase; margin-bottom: 1rem; }
.footer__grid { display:grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--sp-6); }
@media (max-width: 960px){ .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer__grid { grid-template-columns: 1fr; } }
.site-footer a { color: var(--on-dark-soft); display:block; padding:.28rem 0; font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--brand-light); }
.footer__brand p { color: var(--on-dark-soft); max-width: 34ch; }
.footer__logo svg, .footer__logo img { height: 46px; margin-bottom: 1rem; }
.footer__bottom { border-top:1px solid var(--line-dark); margin-top: var(--sp-7); padding: var(--sp-5) 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size: var(--fs-xs); }
.footer__social { display:flex; gap:.6rem; }
.footer__social a { width:38px;height:38px; display:grid;place-items:center; border:1px solid var(--line-dark); border-radius:50%; padding:0; }
.footer__social a:hover { background: var(--brand); border-color:var(--brand); color:#fff; }
.footer__social svg{width:18px;height:18px;}

/* ---------------------------------------------------------------- CARDS */
.card {
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1); border: 1px solid var(--line-soft);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.card__media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--sand); }
.card__media img { width:100%; height:100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.25rem 1.35rem 1.45rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.card__title { font-size: var(--fs-lg); line-height:1.15; }
.card__meta { display:flex; align-items:center; gap:.5rem; color: var(--muted); font-size: var(--fs-sm); }
.card__footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.4rem; }
.card__fav { position:absolute; top:.8rem; right:.8rem; width:40px;height:40px; border-radius:50%; background:rgba(255,255,255,.9); border:0; cursor:pointer; display:grid; place-items:center; box-shadow: var(--sh-1); transition: all var(--t) var(--ease); }
.card__fav svg { width:20px;height:20px; fill:none; stroke: var(--ink); stroke-width:2; }
.card__fav:hover { transform: scale(1.1); }
.card__fav.is-fav { background: var(--brand); }
.card__fav.is-fav svg { fill:#fff; stroke:#fff; }

/* feature / info card (icon top) */
.feature {
  background: var(--paper); border-radius: var(--r-lg); padding: 1.8rem;
  box-shadow: var(--sh-1); border:1px solid var(--line-soft); height:100%;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.feature__icon { width:56px;height:56px; border-radius: var(--r-md); display:grid; place-items:center; margin-bottom:1rem; color:#fff; }
.feature__icon svg { width:28px; height:28px; }

/* ---------------------------------------------------------------- BADGES / CHIPS */
.badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size: var(--fs-xs); font-weight:700; letter-spacing:.02em;
  padding:.35rem .7rem; border-radius: var(--r-pill);
  background: var(--fill); color: var(--ink);
}
.badge .dot { width:8px;height:8px; border-radius:50%; }
.badge--cat { color:#fff; }
.badge--status { color:#fff; }
.badge--soft { background: color-mix(in srgb, var(--badge-color, var(--brand)) 14%, transparent); color: var(--badge-color, var(--brand-dark)); }

.chip {
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  font-size: var(--fs-sm); font-weight:600;
  padding:.5rem .9rem; border-radius: var(--r-pill);
  background: var(--paper); border:1.5px solid var(--line); color: var(--ink-soft);
  transition: all var(--t-fast) var(--ease); user-select:none;
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color:#fff; }
.chip svg { width:16px;height:16px; }

.pill-row { display:flex; flex-wrap:wrap; gap:.5rem; }

/* rating — cannabis leaves */
.stars { display:inline-flex; gap:1px; color: var(--brand); }
.stars svg { width:17px;height:17px; fill: currentColor; }
.rating { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; font-size:var(--fs-sm); }

/* ---------------------------------------------------------------- FORMS */
.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field > label, .label { font-weight:700; font-size: var(--fs-sm); color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.input, .select, .textarea {
  font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink);
  background: var(--paper); border:1.5px solid var(--line); border-radius: var(--r-md);
  padding: .85rem 1rem; width:100%; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.textarea { min-height: 130px; resize: vertical; }
.select { appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7f74' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.6rem; }
.input-group { display:flex; gap:.6rem; } .input-group .input { flex:1; }
fieldset { border:0; padding:0; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width:560px){ .form-row { grid-template-columns:1fr; } }

/* checkbox / radio cards */
.check {
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; cursor:pointer;
  border:1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  font-size: var(--fs-sm); font-weight:600; color: var(--ink-soft); transition: all var(--t-fast) var(--ease); user-select:none;
}
.check:hover { border-color: var(--brand); }
.check input { accent-color: var(--brand); width:18px;height:18px; }
.check:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--paper)); color: var(--ink); }
.check-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:.7rem; }

.toggle { position:relative; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; }
.toggle input { position:absolute; opacity:0; }
.toggle .track { width:46px; height:26px; background: var(--line); border-radius:999px; transition: background var(--t) var(--ease); position:relative; }
.toggle .track::after { content:""; position:absolute; top:3px; left:3px; width:20px;height:20px; background:#fff; border-radius:50%; box-shadow: var(--sh-1); transition: transform var(--t) var(--ease); }
.toggle input:checked + .track { background: var(--brand); }
.toggle input:checked + .track::after { transform: translateX(20px); }

/* ---------------------------------------------------------------- MODAL / DRAWER */
.modal-backdrop {
  position: fixed; inset:0; z-index: 2000; background: rgba(11,29,19,.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display:grid; place-items:center; padding: 1.2rem;
  opacity:0; visibility:hidden; transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.modal-backdrop.is-open { opacity:1; visibility:visible; }
.modal {
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  width:100%; max-width: 560px; max-height: 90vh; overflow-y:auto;
  transform: translateY(20px) scale(.98); transition: transform var(--t) var(--ease-out);
}
.modal-backdrop.is-open .modal { transform:none; }
.modal--wide { max-width: 860px; }
.modal__head { padding: 1.4rem 1.6rem; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; position:sticky; top:0; background:var(--paper); z-index:1; }
.modal__body { padding: 1.6rem; }
.modal__close { background: var(--fill); border:0; border-radius:50%; width:40px;height:40px; cursor:pointer; display:grid;place-items:center; flex-shrink:0; }
.modal__close:hover { background: var(--line); }
.modal__close svg { width:20px;height:20px; }

/* ---------------------------------------------------------------- TABS */
.tabs { display:flex; gap:.3rem; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab { background:none; border:0; padding:.9rem 1.1rem; font-weight:700; font-size:var(--fs-sm); color: var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition: all var(--t-fast) var(--ease); }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tab-panel { display:none; } .tab-panel.is-active { display:block; animation: fadeUp .5s var(--ease-out); }

/* ---------------------------------------------------------------- STATS */
.stat { text-align:center; }
.stat__num { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight:600; color: var(--brand); line-height:1; letter-spacing:-.02em; }
.section--dark .stat__num { color: var(--brand-light); }
.stat__label { font-size: var(--fs-sm); color: var(--muted); margin-top:.4rem; font-weight:600; }
.section--dark .stat__label { color: var(--on-dark-soft); }

/* ---------------------------------------------------------------- STEPS */
.steps { display:flex; gap:.5rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.step { flex:1; min-width:120px; display:flex; align-items:center; gap:.6rem; font-size:var(--fs-sm); font-weight:700; color: var(--muted); }
.step__num { width:32px;height:32px;border-radius:50%; display:grid;place-items:center; background: var(--fill); color: var(--muted); flex-shrink:0; border:1.5px solid var(--line); }
.step.is-active .step__num { background: var(--brand); color:#fff; border-color:var(--brand); }
.step.is-done .step__num { background: var(--brand-dark); color:#fff; border-color: var(--brand-dark); }
.step.is-active, .step.is-done { color: var(--ink); }

/* progress bar */
.progress { height:8px; background: var(--fill); border-radius:999px; overflow:hidden; }
.progress > span { display:block; height:100%; background: linear-gradient(90deg, var(--brand), var(--brand-light)); border-radius:999px; transition: width var(--t-slow) var(--ease); }

/* ---------------------------------------------------------------- HERO */
.hero { position: relative; overflow: hidden; background: var(--forest-900); color: var(--on-dark); }
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg img { width:100%;height:100%; object-fit:cover; opacity:.34; }
.hero::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(11,29,19,.5), rgba(11,29,19,.82)); }
.hero__inner { position:relative; z-index:2; }

/* ---------------------------------------------------------------- CALENDAR */
.calendar { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-1); border:1px solid var(--line-soft); overflow:hidden; }
.calendar__head { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line-soft); }
.calendar__grid { display:grid; grid-template-columns: repeat(7,1fr); }
.calendar__dow { text-align:center; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:.7rem 0; border-bottom:1px solid var(--line-soft); }
.calendar__cell { min-height:104px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:.4rem; position:relative; transition: background var(--t-fast) var(--ease); }
.calendar__cell:nth-child(7n){ border-right:0; }
.calendar__cell.is-muted { background: var(--fill); }
.calendar__cell.is-today .calendar__date { background: var(--brand); color:#fff; border-radius:50%; }
.calendar__date { display:inline-grid; place-items:center; width:26px;height:26px; font-size:var(--fs-sm); font-weight:700; }
.calendar__event { display:block; font-size:11px; font-weight:700; color:#fff; padding:2px 6px; border-radius:6px; margin-top:3px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:680px){ .calendar__cell { min-height:64px; } .calendar__event{ font-size:0; padding:5px; } }

/* ---------------------------------------------------------------- TABLE */
.table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table th { text-align:left; font-weight:700; color:var(--muted); padding:.8rem 1rem; border-bottom:2px solid var(--line); text-transform:uppercase; letter-spacing:.05em; font-size:var(--fs-xs); }
.table td { padding:.9rem 1rem; border-bottom:1px solid var(--line-soft); }
.table tr:hover td { background: var(--fill); }

/* ---------------------------------------------------------------- TOAST */
.toast-wrap { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 3000; display:flex; flex-direction:column; gap:.6rem; }
.toast { background: var(--forest-800); color:#fff; padding: .9rem 1.2rem; border-radius: var(--r-md); box-shadow: var(--sh-3); display:flex; align-items:center; gap:.7rem; font-weight:600; font-size:var(--fs-sm); transform: translateX(120%); transition: transform var(--t) var(--ease-out); max-width: 360px; border-left:4px solid var(--brand); }
.toast.is-in { transform:none; }
.toast svg { width:22px;height:22px; flex-shrink:0; color: var(--brand-light); }

/* ---------------------------------------------------------------- MISC */
.divider { height:1px; background: var(--line); border:0; margin: var(--sp-6) 0; }
.tag-dot { width:10px;height:10px;border-radius:50%; display:inline-block; }
.ribbon { position:absolute; top:.9rem; left:0; background: var(--copper); color:#fff; font-size:var(--fs-xs); font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .8rem .35rem .7rem; border-radius:0 var(--r-pill) var(--r-pill) 0; box-shadow: var(--sh-1); z-index:2; }
.glass { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.16); }
.skeleton { background: linear-gradient(90deg, var(--fill), var(--line-soft), var(--fill)); background-size:800px 100%; animation: shimmer 1.4s infinite linear; }
.notice { border-left:4px solid var(--mountain); background: color-mix(in srgb, var(--mountain) 8%, var(--paper)); padding:1rem 1.2rem; border-radius: 0 var(--r-md) var(--r-md) 0; font-size:var(--fs-sm); }
.notice--warn { border-color: var(--sunset); background: color-mix(in srgb, var(--sunset) 10%, var(--paper)); }

/* breadcrumbs */
.crumbs { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:var(--fs-sm); color:var(--muted); }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--brand-dark); }
.crumbs .sep { opacity:.5; }

/* page hero (compact, for interior pages) */
.page-hero { background: var(--forest-800); color: var(--on-dark); padding: calc(var(--header-h) - 20px) 0 var(--sp-7); position:relative; overflow:hidden; }
.page-hero h1 { color:#fff; }
.page-hero p { color: var(--on-dark-soft); }
.page-hero::before { content:""; position:absolute; right:-80px; top:-80px; width:340px;height:340px; background: radial-gradient(circle, var(--brand-glow), transparent 70%); }

/* search bar (concierge) */
.searchbar { display:flex; gap:.5rem; background: var(--paper); border-radius: var(--r-pill); padding:.5rem; box-shadow: var(--sh-2); border:1px solid var(--line-soft); }
.searchbar .input { border:0; box-shadow:none; background: transparent; }
.searchbar .input:focus { box-shadow:none; }
@media (max-width:560px){ .searchbar { flex-direction:column; border-radius: var(--r-lg); } }