/* ── Gift Card Purchase ───────────────────────────────────────────────────── */
/* Builds on booking-wizard.css (card shell, form fields, buttons, store picker) */
/* so the gift card page and the booking page read as one system.              */

.gc-wrap { max-width: 1040px; }

/* Only the "Change location" link — the card preview already names the store. */
.gc-store-bar { justify-content: flex-end; }

.gc-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}
@media (max-width: 860px) { .gc-layout { grid-template-columns: 1fr; } }

/* ── Preview column ───────────────────────────────────────────────────────── */
.gc-preview-col {
  padding: 40px 32px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
@media (max-width: 860px) {
  .gc-preview-col { padding: 28px 20px 24px; border-right: none; border-bottom: 1px solid var(--border); }
}

.gc-card {
  position: relative;
  aspect-ratio: 1.586;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  box-shadow: 0 14px 34px rgba(185,108,158,0.32);
  overflow: hidden;
}
.gc-card::after {
  content: '';
  position: absolute; right: -40px; bottom: -60px;
  width: 180px; height: 180px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  pointer-events: none;
}
.gc-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gc-card-salon {
  font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gc-card-kind {
  flex-shrink: 0;
  font-family: var(--font-nav); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; opacity: 0.9;
}
.gc-card-amount {
  font-family: var(--font-head); font-size: clamp(2.4rem, 7vw, 3rem); font-weight: 400; line-height: 1;
}
.gc-card-bottom { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.gc-card-line { display: flex; gap: 8px; min-width: 0; }
.gc-card-line span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-card-label {
  flex-shrink: 0; width: 38px;
  font-family: var(--font-nav); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85; line-height: 1.9;
}

.gc-card-message {
  max-width: 340px; margin: 18px auto 0;
  padding: 14px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--font-body); font-style: italic; font-size: 0.92rem; color: #555;
  line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}

.gc-perks {
  list-style: none; max-width: 340px; margin: 24px auto 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.gc-perks li {
  position: relative; padding-left: 24px;
  font-family: var(--font-body); font-size: 0.9rem; color: #555; line-height: 1.45;
}
.gc-perks li::before {
  content: ''; position: absolute; left: 2px; top: 5px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}
@media (max-width: 860px) { .gc-perks { display: none; } }

/* ── Main column ──────────────────────────────────────────────────────────── */
.gc-main-col { padding: 36px 40px 40px; min-width: 0; }
@media (max-width: 600px) { .gc-main-col { padding: 24px 20px 28px; } }

.gc-field-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }

.gc-amounts {
  display: grid; gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1000px) { .gc-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gc-amount {
  padding: 13px 8px;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-btn); font-size: 1.02rem; font-weight: 600; color: var(--text);
  cursor: pointer; -webkit-appearance: none;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.gc-amount:hover { border-color: var(--primary); }
.gc-amount:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gc-amount[aria-checked="true"] {
  border-color: var(--primary); background: var(--surface); color: var(--primary);
}

.gc-custom { position: relative; max-width: 240px; margin-top: 2px; }
.gc-custom-prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 0.95rem; color: #777; pointer-events: none;
}
.gc-custom-input { padding-left: 28px; }

/* Delivery method — one outer box with a single tile that slides inside it to the chosen
   option (the motion of Square's gift card checkout), in the site's own colours and kept
   rectangular. The tile is the only thing that moves; the options themselves never
   change background, so nothing flashes on a switch. */
.gc-toggle {
  --gc-toggle-pad: 4px;
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 360px; padding: var(--gc-toggle-pad);
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius);
}
.gc-toggle::before {
  content: '';
  position: absolute; z-index: 0;
  top: var(--gc-toggle-pad); bottom: var(--gc-toggle-pad); left: var(--gc-toggle-pad);
  width: calc(50% - var(--gc-toggle-pad));
  box-sizing: border-box;
  background: var(--surface); border: 1.5px solid var(--primary); border-radius: var(--radius);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.gc-toggle[data-method="sms"]::before { transform: translateX(100%); }
.gc-toggle-btn {
  position: relative; z-index: 1;
  padding: 11px 8px;
  background: transparent; border: 0; border-radius: var(--radius);
  font-family: var(--font-btn); font-size: 0.95rem; font-weight: 600; color: var(--text);
  cursor: pointer; -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;   /* no grey tap flash on phones */
  transition: color .3s cubic-bezier(.4, 0, .2, 1);
}
.gc-toggle-btn.is-active { color: var(--primary); }
.gc-toggle-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .gc-toggle::before, .gc-toggle-btn { transition: none; }
}

.gc-char-count { align-self: flex-end; font-size: 0.75rem; color: #aaa; }

.gc-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.gc-actions--split { justify-content: space-between; }
@media (max-width: 480px) {
  .gc-actions .btn { flex: 1 1 auto; }
}

/* ── Payment ──────────────────────────────────────────────────────────────── */
.gc-order-summary { max-width: none; margin-bottom: 22px; padding: 16px 20px; }
.gc-order-summary .bw-summary-row { padding: 8px 0; }

/* CardSecure renders its own input inside this frame; match .bw-input around it. */
.gc-cardsecure {
  height: 46px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
/* Expiry, CVV and ZIP share one row under the card number, as on most checkouts. */
.gc-card-row {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.gc-cardsecure.is-valid { border-color: #4caf7d; }
.gc-cardsecure.invalid { border-color: #e05252; box-shadow: 0 0 0 3px rgba(224,82,82,0.12); }
/* Hidden until CardSecure has loaded: for a moment it draws its own unstyled input
   (a small grey box) before our `css` parameter applies, which reads as a flash. */
.gc-cardsecure iframe { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .15s ease-in; }
.gc-cardsecure.is-ready iframe { opacity: 1; }

.gc-fine-print {
  margin-top: 18px;
  font-family: var(--font-body); font-size: 0.8rem; color: #888; line-height: 1.55;
}
.gc-fine-print a { color: var(--primary); text-decoration: underline; }

/* ── Success ──────────────────────────────────────────────────────────────── */
.gc-success-icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--primary);
}
.gc-success-icon svg { width: 36px; height: 36px; }
.gc-code {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 1rem; letter-spacing: 1.5px;
}