/* Gift card builder. Card designs are driven by [data-design] custom properties so JS only flips one attribute. */
/* The card shows the gift photo under a wash of the design colour (--gc-top fading to --gc-bottom) so the text stays readable. */
[data-design="charcoal"] { --gc-top: rgba(28, 25, 22, .15); --gc-bottom: rgba(28, 25, 22, .78); --gc-bg: #1C1916; --gc-fg: #FFF9F3; --gc-label: #F4A391; --gc-stripe: rgba(255, 249, 243, .08); --gc-logo: none; }
[data-design="coral"] { --gc-top: rgba(184, 71, 47, .15); --gc-bottom: rgba(184, 71, 47, .8); --gc-bg: #B8472F; --gc-fg: #FFF9F3; --gc-label: #FFE3DA; --gc-stripe: rgba(255, 249, 243, .10); --gc-logo: none; }
[data-design="blush"] { --gc-top: rgba(244, 163, 145, .25); --gc-bottom: rgba(244, 163, 145, .88); --gc-bg: #F4A391; --gc-fg: #0B0A08; --gc-label: #0B0A08; --gc-stripe: rgba(11, 10, 8, .07); --gc-logo: brightness(0); }
[data-design="cream"] { --gc-top: rgba(241, 234, 225, .25); --gc-bottom: rgba(241, 234, 225, .88); --gc-bg: #F1EAE1; --gc-fg: #0B0A08; --gc-label: #B8472F; --gc-stripe: rgba(11, 10, 8, .06); --gc-logo: brightness(0); }

.gift-hero-img { max-width: 440px; aspect-ratio: 4 / 5; object-position: 40% 45%; border-radius: 999px 999px 24px 24px; }

.gift-card { width: 100%; max-width: 480px; aspect-ratio: 3 / 2; border-radius: 22px; background-color: var(--gc-bg); background-image: linear-gradient(180deg, var(--gc-top) 0%, var(--gc-bottom) 78%), url('../../img/gift-cards-shoulder-massage.jpg'); background-size: cover; background-position: 54% 40%; color: var(--gc-fg); position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; box-shadow: 0 30px 60px rgba(11, 10, 8, .18); transform: rotate(2deg); }
.gift-card-logo { position: absolute; top: 28px; left: 32px; width: 150px; height: auto; filter: var(--gc-logo); }
.gift-card-label { display: block; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--gc-label); }
.gift-card-title { display: block; margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; }
/* "Preview" caption under the card, tilted to match it. */
.gift-card-note { transform: rotate(2deg); }
/* The builder card: sand preview panel on the left, steps on white to the right (stacked on phones). */
.gc-shell { background: #fff; border: 1px solid rgba(11, 10, 8, .1); border-radius: 28px; overflow: hidden; }
.gc-preview-col { background: var(--sand); padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px); }
.gc-steps { padding: clamp(24px, 4vw, 48px); }
.gift-card-sub { display: block; margin-top: 10px; font-size: 14.5px; opacity: .72; }

.gc-swatch { width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--gc-bg); border: 1px solid rgba(11, 10, 8, .2); }
.gc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink); }
.gc-swatch:focus-visible, .gc-tile:focus-visible { outline: 3px solid var(--coral-light); outline-offset: 3px; }

.gc-tile { font-family: inherit; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; min-height: 140px; padding: 22px 22px 18px; border-radius: 20px; background: #fff; color: var(--ink); border: 1px solid rgba(11, 10, 8, .16); }
/* Selected gift: blush with a coral edge, same as the booking modal's picks (black is kept for the Continue button). */
.gc-tile[aria-pressed="true"] { background: var(--blush); color: var(--ink); border-color: var(--coral-deep); box-shadow: inset 0 0 0 1px var(--coral-deep); }
.gc-tile-len { font-family: var(--serif); font-size: 34px; line-height: 1; }

.gift-modes button[aria-pressed="false"] { opacity: .65; }
#gc-note { resize: none; }
/* Bigger-gift upsell on step 3: blush with a coral edge so it reads as an offer, not another plain row. */
.gc-upsell { background: var(--blush); border-color: var(--coral-deep); box-shadow: inset 0 0 0 1px var(--coral-deep); padding: 16px 18px; }
.gc-upsell .hm-addon-box { border-color: var(--coral-deep); background: #fff; }
.gc-upsell #gc-upsell-price { color: var(--coral-deep); }
/* Missing or invalid field after Continue (set by gift-cards.js; cleared on edit). */
.field .is-invalid { border-color: var(--coral-deep); box-shadow: inset 0 0 0 1px var(--coral-deep); background: #FDF1EE; }
/* The "To them" and "From you" panels: white cards with the same border as the gift tiles. */
.gc-panel { padding: clamp(16px, 2.4vw, 22px); border-radius: 20px; background: #fff; border: 1px solid rgba(11, 10, 8, .12); }
/* display is set here, not with .d-flex, so the [hidden] attribute still wins */
.gc-fields { display: flex; flex-direction: column; gap: 16px; }
.gc-step-num { font-family: var(--serif); font-style: italic; font-size: 26px; width: 24px; flex-shrink: 0; }
.gc-tile { min-height: 124px; }
.gc-custom-wrap { display: flex; align-items: center; gap: 6px; }
.gc-custom-wrap input { max-width: 160px; }
.gc-soon { max-width: 480px; padding: 14px 16px; border-radius: 14px; background: var(--cream); border: 1px solid rgba(11, 10, 8, .12); }
/* Checkout: Square card field and the status line under Pay. */
.gc-card-form { min-height: 90px; }
.gc-msg { margin-top: 24px; padding: 12px 14px; border-radius: 12px; background: var(--sand); }
.gc-msg.is-ok { background: #E3F1EC; }
.gc-msg.is-test { background: var(--blush); }
.gc-msg.is-error { background: #FBE0DA; color: var(--coral-deep); }
/* Six-packs: small secondary chips under the main tiles. */
.gc-packs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gc-tile.gc-tile-pack { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; width: auto; height: auto; min-height: 36px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
/* Phones: the tiles are narrower inside the card, so the length and padding scale down (kept last so it wins over the tile rules above). */
@media (max-width: 575.98px) { .gc-tile { padding: 18px 16px 14px; } .gc-tile-len { font-size: 28px; } }
/* Step 3 preloads invisibly (assets/js/gift-cards.js) so the card field and wallet buttons are sized before it shows. */
#gc-pay { position: relative; }
.gc-preload { position: absolute !important; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; }
#gcWallet .dmt-wallets { min-height: 48px; }

/* Phones and tablets (where the preview sits in a narrow column): a smaller logo, tighter padding and title keep the
   lines clear of the logo (with a note, "For Sam." adds a line). */
@media (max-width: 991.98px) {
  .gift-card { padding: 20px; aspect-ratio: auto; min-height: 220px; }
  .gift-card-logo { top: 18px; left: 20px; width: 118px; }
  .gift-card-label { font-size: 11.5px; }
  .gift-card-title { font-size: 26px; margin-top: 6px; }
  .gift-card-sub { font-size: 13.5px; margin-top: 6px; }
  .gift-card > :not(.gift-card-logo):first-of-type { margin-top: 64px; }
}