/* ============================================================
   SHOE HAVEN — COMPONENTS
   Small reusable widgets: skip-link, cookie banner, PWA install,
   modals, quickview, autocomplete, scarcity, WhatsApp button,
   floating FAB, review items, size-guide, success screen.
   Uses real CSS tokens from style.css (--accent, --bg-2, ...).
   ============================================================ */

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: .8rem; top: -4rem;
  background: var(--accent); color: #0a0a0a;
  padding: .6rem 1.1rem; border-radius: .8rem;
  z-index: 10001; font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: .8rem; outline: 2px solid var(--gold); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 64rem; margin: 0 auto;
  background: rgba(18,18,22,.92); color: var(--text);
  border: 1px solid var(--border); border-radius: 1rem;
  padding: .9rem 1.1rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  transform: translateY(140%); opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  z-index: 9998;
  font-size: 1.25rem;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner__text { font-size: 1.25rem; line-height: 1.5; }
.cookie-banner__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-banner .btn,
.cookie-banner .cookie-btn { padding: .55rem 1rem; font-size: 1.2rem; }

/* ---------- PWA install card ---------- */
.install-card {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 42rem;
  background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(18,18,22,.96));
  border: 1px solid var(--accent);
  border-radius: 1rem; padding: 1rem;
  display: flex; align-items: center; gap: .9rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,255,136,.18);
  transform: translateY(160%); opacity: 0;
  transition: transform .35s, opacity .35s;
  z-index: 9997;
}
.install-card.show { transform: translateY(0); opacity: 1; }
.install-card > i { font-size: 1.8rem; color: var(--accent); }
.install-card__body { flex: 1; display: flex; flex-direction: column; }
.install-card__body strong { font-size: 1.15rem; }
.install-card__body small { color: var(--text-mute); font-size: 1rem; }
.install-card__close {
  position: absolute; top: .35rem; right: .5rem;
  background: transparent; border: 0; color: var(--text-mute);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.install-card__close:hover { color: var(--text); }

/* ---------- Generic modal (quickview / size guide / shopper pass) ---------- */
.sh-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sh-modal.show,
.sh-modal--open { opacity: 1; pointer-events: auto; }
.sh-modal__panel,
.sh-modal__box {
  position: relative; z-index: 1;
  max-width: 92rem; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: 2rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  transform: translateY(16px) scale(.98);
  transition: transform .3s ease;
}
.sh-modal.show .sh-modal__panel,
.sh-modal--open .sh-modal__box { transform: translateY(0) scale(1); }
.sh-modal__close {
  position: absolute; top: .8rem; right: 1.2rem;
  background: transparent; border: 0;
  color: var(--text-mute); font-size: 2rem; line-height: 1;
  cursor: pointer; z-index: 2;
}
.sh-modal__close:hover { color: var(--accent); }
.sh-modal__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  align-items: center;
}
.sh-modal__img img { width: 100%; border-radius: .8rem; }
body.sh-modal-open { overflow: hidden; }

/* ---------- Confirm dialog (SH_confirm) ---------- */
.sh-modal__backdrop {
  position: absolute; inset: 0; z-index: 0;
  cursor: pointer;
}
.sh-modal--confirm { padding: 1.4rem; }
.sh-confirm {
  max-width: 44rem !important;
  padding: 2.4rem 2rem !important;
  text-align: center;
  border-radius: 1.6rem !important;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.sh-confirm__icon {
  width: 6.4rem; height: 6.4rem;
  margin: 0 auto 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,255,136,.12);
  color: var(--accent);
  font-size: 2.4rem;
  border: 1px solid rgba(0,255,136,.3);
}
.sh-confirm--danger .sh-confirm__icon {
  background: rgba(255,77,90,.12);
  color: #ff7a8f;
  border-color: rgba(255,77,90,.35);
  animation: sh-confirm-pulse 1.6s ease-out infinite;
}
@keyframes sh-confirm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,90,.25); }
  50%      { box-shadow: 0 0 0 12px rgba(255,77,90,0); }
}
.sh-confirm__title {
  margin: 0 0 .6rem;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.sh-confirm__body {
  margin: 0 0 1.8rem;
  color: var(--text-dim);
  font-size: 1.25rem;
  line-height: 1.5;
}
.sh-confirm__actions {
  display: flex; flex-direction: column-reverse;
  gap: .8rem;
}
.sh-confirm__actions .btn {
  width: 100%;
  justify-content: center;
  padding: 1.1rem 1.4rem !important;
  font-size: 1.25rem !important;
}
@media (min-width: 480px) {
  .sh-confirm__actions { flex-direction: row; justify-content: center; }
  .sh-confirm__actions .btn { width: auto; min-width: 14rem; }
}

/* ---------- Danger button variant ---------- */
.btn-danger {
  background: linear-gradient(135deg, #ff4d5a, #d81b3c) !important;
  color: #fff !important;
  border: 0 !important;
}
.btn-danger:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(255,77,90,.35);
}

/* ---------- Quickview button on product cards ---------- */
.qv-btn {
  position: absolute; top: .6rem; left: .6rem;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: rgba(18,18,22,.85); color: var(--text);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transform: translateY(-5px);
  transition: opacity .2s, transform .2s, background .2s;
  backdrop-filter: blur(4px); z-index: 2;
}
.product-card:hover .qv-btn,
.qv-btn:focus-visible { opacity: 1; transform: translateY(0); }
.qv-btn:hover { background: var(--accent); color: #0a0a0a; }

/* ---------- Wishlist heart filled state ---------- */
.product-card__fav.on i { color: var(--danger); }
.product-card__fav.on { border-color: var(--danger); }

/* ---------- Autocomplete dropdown ---------- */
.search-wrap { position: relative; }
.autocomplete {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0;
  list-style: none; margin: 0; padding: .4rem;
  background: rgba(18,18,22,.97);
  border: 1px solid var(--border); border-radius: .9rem;
  max-height: 38rem; overflow-y: auto;
  backdrop-filter: blur(12px);
  z-index: 20;
  opacity: 0; transform: translateY(-5px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.autocomplete.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.autocomplete li { margin: 0; }
.autocomplete a {
  display: flex; gap: .8rem; align-items: center;
  padding: .55rem .7rem; border-radius: .55rem;
  color: var(--text); text-decoration: none;
  font-size: 1.3rem;
}
.autocomplete a:hover,
.autocomplete a:focus-visible { background: rgba(0,255,136,.12); color: var(--accent); }
.autocomplete img { width: 3.8rem; height: 3.8rem; object-fit: contain; border-radius: .5rem; background: #fff; }
.autocomplete span { display: flex; flex-direction: column; }
.autocomplete small { color: var(--text-mute); font-size: 1.1rem; }

/* ---------- Scarcity cue ---------- */
.scarcity {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; border-radius: .6rem;
  background: rgba(255,77,77,.12); border: 1px solid rgba(255,77,77,.35);
  color: #ff7a8f; font-size: 1.25rem;
}
.scarcity i { color: var(--danger); }

/* ---------- Cart badge bump ---------- */
.cart-count.bump,
.wishlist-count.bump { animation: sh-bump .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes sh-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ---------- WhatsApp inline button ---------- */
.btn-whatsapp {
  background: #25D366; color: #fff; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.4rem; border-radius: .8rem; font-weight: 600;
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  color: #fff; filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37,211,102,.35);
}

/* ---------- Floating WhatsApp launcher ---------- */
.wa-fab {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 900;
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow: 0 10px 30px rgba(37,211,102,.45);
  text-decoration: none;
  transition: transform .2s;
}
.wa-fab:hover,
.wa-fab:focus-visible { color: #fff; transform: scale(1.08); }

/* ---------- Size guide link ---------- */
.size-guide-link { font-size: 1.2rem; font-weight: 500; margin-left: .6rem; color: var(--accent); }
.size-guide-link:hover { text-decoration: underline; }

/* ---------- Checkout success ---------- */
.checkout-success { text-align: center; padding: 3rem 1.5rem; max-width: 62rem; margin: 0 auto; }
.checkout-success .success-icon { font-size: 4rem; color: #25D366; margin-bottom: 1rem; }

/* ---------- Shopper Pass nav badge ---------- */
.sh-pass-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem;
  margin-right: .4rem;
  border-radius: 999px;
  background: rgba(0,255,136,.14);
  color: var(--accent);
  border: 1px solid rgba(0,255,136,.28);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease;
}
.sh-pass-badge:hover { background: rgba(0,255,136,.22); }

/* ---------- Route bar (SPA-like top progress) ---------- */
.route-bar {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 0 8px var(--accent);
  transition: width .25s ease, opacity .25s ease;
  opacity: 0;
}
.route-bar.loading { width: 85%; opacity: 1; transition: width 1.8s cubic-bezier(.1,.7,.1,1), opacity .15s; }
.route-bar.done { width: 100%; opacity: 0; transition: width .25s ease, opacity .35s ease .25s; }

/* ---------- View-transition persistent names ---------- */
.nav { view-transition-name: sh-nav; }
.footer { view-transition-name: sh-footer; }

/* ---------- Tiny text/margin helpers ---------- */
.line-through { text-decoration: line-through; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .6rem !important; }
.mt-2 { margin-top: 1.2rem !important; }
.mt-3 { margin-top: 1.8rem !important; }
.mt-4 { margin-top: 2.6rem !important; }

/* ---------- Never overflow horizontally ---------- */
html, body { overflow-x: hidden; }

/* ---------- Safe-area insets ---------- */
.nav { padding-top: env(safe-area-inset-top, 0); }
.mobile-menu { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ============================================================
   CONTACT FORM v2 — side-by-side layout, iconed fields,
   select dropdown, compact textarea with char counter.
   ============================================================ */

/* Override the default 1-col contact-grid with an asymmetric 2-col:
   form on the left (wider, the action), info rail on the right. */
.contact-grid--v2 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.4rem !important;
  align-items: start;
}
@media (min-width: 992px) {
  .contact-grid--v2 {
    grid-template-columns: minmax(0, 1.6fr) minmax(28rem, 1fr) !important;
    gap: 2.8rem !important;
  }
}

/* ---------- The form panel ---------- */
.contact-form {
  padding: 2rem 1.8rem !important;
  border-radius: 1.6rem !important;
  display: flex; flex-direction: column; gap: 1.4rem;
  position: relative; overflow: hidden;
}
@media (min-width: 576px) { .contact-form { padding: 2.4rem 2.2rem !important; } }
@media (min-width: 992px) { .contact-form { padding: 3rem !important; } }

.contact-form::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  background: linear-gradient(135deg, rgba(0,255,136,.25), transparent 45%, rgba(255,215,0,.15));
  border-radius: inherit;
  opacity: .6;
  pointer-events: none;
}

.contact-form__head { margin-bottom: .2rem; }
.contact-form__head h3 {
  font-size: 2rem !important; margin: .6rem 0 .3rem !important;
  line-height: 1.15;
}
.contact-form__head p {
  font-size: 1.2rem; color: var(--text-dim);
  margin: 0;
}
.contact-form__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(0,255,136,.12);
  border: 1px solid rgba(0,255,136,.3);
  color: var(--accent);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase;
}
.contact-form__badge i { font-size: .95rem; }

/* ---------- 2-col field rows ---------- */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 576px) {
  .field-row { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}

.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field > label {
  font-size: 1.1rem !important; font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
  letter-spacing: .02em;
}
.field__hint { color: var(--text-mute); font-weight: 400; font-size: .95rem; }

/* ---------- Iconed input wrapper ---------- */
.field-input {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 0 1.1rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field-input:focus-within {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(0,255,136,.15);
}
.field-input > i:first-child {
  color: var(--text-mute);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-right: .7rem;
  pointer-events: none;
}
.field-input:focus-within > i:first-child { color: var(--accent); }
.field-input input,
.field-input select {
  flex: 1; min-width: 0;
  background: transparent !important;
  border: 0 !important;
  padding: .95rem 0 !important;
  color: var(--text) !important;
  font-size: 1.25rem !important;
  outline: 0 !important;
  font-family: inherit;
}
.field-input input::placeholder { color: var(--text-mute); }

/* ---------- Select styling ---------- */
.field-input--select { position: relative; padding-right: 2.8rem; }
.field-input--select select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.field-input--select select option {
  background: var(--bg-2); color: var(--text);
}
.field-input--select select:invalid,
.field-input--select select option[disabled] {
  color: var(--text-mute);
}
.field-input__caret {
  position: absolute; right: 1.2rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-mute);
  font-size: 1rem;
  pointer-events: none;
  transition: color .2s, transform .2s;
}
.field-input--select:focus-within .field-input__caret {
  color: var(--accent);
  transform: translateY(-50%) rotate(180deg);
}

/* ---------- Compact textarea ---------- */
.contact-form textarea {
  width: 100%;
  min-height: 9rem !important;
  max-height: 22rem;
  padding: 1rem 1.1rem !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: .9rem !important;
  color: var(--text) !important;
  font-size: 1.25rem !important;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: 0;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.contact-form textarea:focus {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(0,255,136,.15);
}
.field__counter {
  display: block;
  margin-top: .4rem;
  text-align: right;
  color: var(--text-mute);
  font-size: 1rem;
}

/* ---------- Submit + fine print ---------- */
.contact-form__submit {
  width: 100%;
  padding: 1.2rem 1.6rem !important;
  font-size: 1.3rem !important;
  justify-content: center;
  margin-top: .4rem;
}
.contact-form__fineprint {
  display: flex; align-items: center; gap: .5rem;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--text-mute);
  margin: .2rem 0 0;
}
.contact-form__fineprint i { color: var(--accent); }

/* ---------- Right-side info rail ----------
   Mobile (<992): compact 2-col icon+label grid (footer-style).
   Desktop (≥992): full stacked cards with room to breathe. */
.contact-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}
.contact-rail .contact-card {
  padding: 1rem 1.1rem !important;
  border-radius: 1rem !important;
  gap: .8rem !important;
}
.contact-rail .contact-card i {
  width: 3.2rem !important; height: 3.2rem !important;
  font-size: 1.2rem !important;
  padding: .7rem !important;
}
.contact-rail .contact-card h4 {
  font-size: 1.15rem !important;
  margin: 0 0 .1rem !important;
  letter-spacing: .02em;
}
.contact-rail .contact-card p,
.contact-rail .contact-card a {
  font-size: 1.02rem !important;
  line-height: 1.3 !important;
}
.contact-rail .contact-card br { display: none; } /* keep lines compact on mobile */
.contact-rail__wa {
  grid-column: 1 / -1;
  margin-top: .4rem;
  padding: 1.1rem 1.4rem !important;
  border-radius: 1rem !important;
  text-decoration: none;
  justify-content: center;
  font-size: 1.2rem !important;
}

@media (min-width: 992px) {
  .contact-rail {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .contact-rail .contact-card {
    padding: 1.3rem 1.4rem !important;
    border-radius: 1.2rem !important;
    gap: 1.1rem !important;
  }
  .contact-rail .contact-card i {
    width: 3.8rem !important; height: 3.8rem !important;
    font-size: 1.4rem !important;
    padding: .9rem !important;
  }
  .contact-rail .contact-card h4 { font-size: 1.3rem !important; margin: 0 0 .25rem !important; }
  .contact-rail .contact-card p,
  .contact-rail .contact-card a { font-size: 1.15rem !important; line-height: 1.45 !important; }
  .contact-rail .contact-card br { display: inline; }
  .contact-rail__wa {
    grid-column: auto;
    padding: 1.3rem 1.6rem !important;
    font-size: 1.3rem !important;
  }
}

/* ---------- Form alert inline ---------- */
.form-alert {
  display: none;
  padding: .9rem 1.1rem;
  border-radius: .8rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.form-alert.show { display: block; }
.form-alert.success {
  background: rgba(0,255,136,.12);
  color: var(--accent);
  border: 1px solid rgba(0,255,136,.35);
}
.form-alert.error {
  background: rgba(255,77,77,.12);
  color: #ff7a8f;
  border: 1px solid rgba(255,77,77,.35);
}