/* =========================================================
   SNOWTAILORS · components.css
   Buttons, forms, cards, badges, dividers.
   ========================================================= */

/* ========== BUTTONS ========== */
.btn{
  --btn-bg: transparent;
  --btn-color: #fff;
  --btn-border: var(--gold);
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 28px;
  background:var(--btn-bg);
  color:var(--btn-color);
  border:1px solid var(--btn-border);
  font-family:var(--font-body);
  font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;
  transition:
    background var(--duration) var(--ease-luxe),
    color var(--duration) var(--ease-luxe),
    border-color var(--duration) var(--ease-luxe),
    transform var(--duration-fast) var(--ease-luxe);
  position:relative;overflow:hidden;
  white-space:nowrap;
}
.btn::after{
  content:"→";font-family:var(--font-body);font-weight:300;font-size:14px;
  transition:transform var(--duration) var(--ease-luxe);
}
.btn:hover::after{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Variants */
.btn--gold{
  --btn-bg: var(--gold);
  --btn-color: var(--navy);
  --btn-border: var(--gold);
  font-weight:600;
}
.btn--gold:hover{
  --btn-bg: var(--gold-light);
  --btn-border: var(--gold-light);
}
.btn--ghost{
  --btn-bg: transparent;
  --btn-color: #fff;
  --btn-border: rgba(255,255,255,.5);
}
.btn--ghost:hover{
  --btn-bg: rgba(255,255,255,.08);
  --btn-border: var(--gold);
  --btn-color: var(--gold);
}
.btn--gold-line{
  --btn-bg: transparent;
  --btn-color: #fff;
  --btn-border: var(--gold);
}
.btn--gold-line:hover{
  --btn-bg: var(--gold);
  --btn-color: var(--navy);
}
.btn--dark{
  --btn-bg: transparent;
  --btn-color: var(--navy);
  --btn-border: var(--navy);
}
.btn--dark:hover{
  --btn-bg: var(--navy);
  --btn-color: #fff;
}
.btn--small{padding:11px 20px;font-size:11px}
.btn--lg{padding:20px 36px;font-size:13px}

/* ========== FORM ELEMENTS ========== */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.field label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea{
  background:transparent;
  border:none;border-bottom:1px solid var(--line-dark);
  padding:12px 0;
  font-size:16px;
  font-family:var(--font-body);
  color:var(--txt);
  transition:border-color var(--duration) var(--ease-luxe);
  -webkit-appearance:none;appearance:none;
  border-radius:0;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;border-bottom-color:var(--gold);
}
.field--dark input,
.field--dark select,
.field--dark textarea{
  border-bottom-color:rgba(255,255,255,.25);color:#fff;
}
.field--dark label{color:#fff}
.field--dark input::placeholder,
.field--dark textarea::placeholder{color:rgba(255,255,255,.4)}
.field--dark input:focus,
.field--dark select:focus,
.field--dark textarea:focus{border-bottom-color:var(--gold)}

.field textarea{resize:vertical;min-height:90px}

/* Radio / Checkbox cards */
.choice-grid{display:grid;gap:12px}
.choice{
  position:relative;cursor:pointer;
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px;
  background:#fff;
  border:1px solid var(--line-dark);
  transition:all var(--duration) var(--ease-luxe);
}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .dot{
  width:18px;height:18px;border:1px solid var(--grey-light);border-radius:50%;
  flex-shrink:0;margin-top:2px;
  position:relative;transition:all var(--duration) var(--ease-luxe);
}
.choice input:checked + .dot{
  border-color:var(--gold);
}
.choice input:checked + .dot::after{
  content:"";position:absolute;inset:4px;background:var(--gold);border-radius:50%;
}
.choice input:checked ~ * .choice-title{color:var(--navy)}
.choice:has(input:checked){
  border-color:var(--gold);
  background:rgba(201,169,97,.06);
}
.choice .choice-body{flex:1}
.choice .choice-title{
  font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--navy);
  margin-bottom:4px;
}
.choice .choice-meta{font-size:13px;color:var(--grey)}
.choice .choice-price{
  font-family:var(--font-display);font-size:18px;color:var(--gold);font-weight:500;
  margin-left:auto;align-self:center;white-space:nowrap;
}

/* Dark variant */
.choice--dark{background:var(--navy-2);border-color:rgba(255,255,255,.12)}
.choice--dark .choice-title{color:#fff}
.choice--dark .choice-meta{color:rgba(255,255,255,.65)}
.choice--dark:has(input:checked){background:rgba(201,169,97,.12);border-color:var(--gold)}

/* ========== CARDS ========== */
.card{
  background:#fff;
  border:1px solid var(--line-dark);
  padding:32px;
  transition:transform var(--duration) var(--ease-luxe),box-shadow var(--duration) var(--ease-luxe);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -20px rgba(15,27,60,.15);
}
.card--dark{background:var(--navy-2);border-color:rgba(255,255,255,.12);color:#fff}

/* ========== BADGES ========== */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  border:1px solid var(--gold);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  background:transparent;
}
.badge--solid{background:var(--gold);color:var(--navy)}
.badge--ice{border-color:var(--ice);color:var(--ice)}

/* ========== DIVIDERS ========== */
.divider{
  width:60px;height:1px;background:var(--gold);margin:24px 0;
}
.divider--center{margin:24px auto}
.divider--ornate{
  display:flex;align-items:center;gap:14px;color:var(--gold);font-size:13px;
  margin:32px 0;
}
.divider--ornate::before,
.divider--ornate::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ========== STAR RATING ========== */
.stars{display:inline-flex;gap:2px;color:var(--gold);font-size:14px;letter-spacing:1px}

/* ========== TAGS ========== */
.tag{
  display:inline-block;
  padding:4px 12px;
  background:rgba(201,169,97,.12);
  color:var(--gold-dark);
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}