/* The gift card form on the product page (product.js). Inside the theme: inherits its text color and font. */
.ncllc-gc { display: flex; flex-direction: column; gap: 18px; margin: 0 0 20px; min-width: 0; max-width: 640px; box-sizing: border-box; }
/* `hidden` must win over the display rules below (a field shown as flex ignored it: the custom amount and the date always showed). */
.ncllc-gc [hidden] { display: none !important; }
.ncllc-gc__group { border: 1px solid rgba(0,0,0,.15); border-radius: 8px; padding: 12px 14px 14px; margin: 0; min-width: 0; }
.ncllc-gc__group legend { font-weight: 700; padding: 0 6px; }
.ncllc-gc__field { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; min-width: 0; flex: 1 1 200px; }
.ncllc-gc__field input, .ncllc-gc__field select, .ncllc-gc__field textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; font: inherit; font-size: max(16px, 1em); }
/* iOS Safari: an empty date / time input collapses and centres its text; keep it a full-size, left-aligned field.
   16px+ text: iOS zooms the page into any field with smaller text when it is tapped. */
.ncllc-gc__field input[type="date"], .ncllc-gc__field input[type="time"] { display: block; text-align: left; line-height: 1.4; }
.ncllc-gc__field input[type="date"]::-webkit-date-and-time-value, .ncllc-gc__field input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.ncllc-gc__field textarea { resize: vertical; }
.ncllc-gc__row { display: flex; gap: 12px; flex-wrap: wrap; }
.ncllc-gc__money { display: flex; align-items: center; gap: 6px; }
.ncllc-gc__choice { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ncllc-gc__hint { margin: 4px 0 6px; font-size: 0.9em; opacity: 0.85; }
.ncllc-gc__designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 10px; min-width: 0; }
.ncllc-gc__design { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; font-size: 0.85em; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.ncllc-gc__design input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ncllc-gc__thumb { display: block; aspect-ratio: 1.75 / 1; border-radius: 8px; overflow: hidden; border: 3px solid transparent; }
.ncllc-gc__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ncllc-gc__design input:checked + .ncllc-gc__thumb { border-color: #222; box-shadow: 0 0 0 2px #fff inset; }
.ncllc-gc__design input:focus-visible + .ncllc-gc__thumb { outline: 3px solid #4a90e2; outline-offset: 2px; }
.ncllc-gc__preview { border: 1px solid rgba(0,0,0,.15); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.ncllc-gc__preview h3 { margin: 0 0 10px; font-size: 1.1em; }
.ncllc-gc__card { margin: 0 0 12px; }
.ncllc-gc__tabs { display: flex; gap: 6px; margin: 0 0 8px; }
.ncllc-gc__tabs button { min-height: 44px; padding: 6px 14px; font: inherit; border: 1px solid rgba(0,0,0,.25); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.ncllc-gc__tabs button[aria-selected="true"] { background: #222; color: #fff; border-color: #222; }
.ncllc-gc__subject { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.ncllc-gc__email { display: block; width: 100%; height: 520px; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; background: #fff; }
.ncllc-gc__sms { margin: 0; padding: 10px 14px; border-radius: 16px; background: #e9e9eb; color: #111; max-width: 420px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ncllc-gc-unavailable { padding: 10px 14px; border: 1px solid #b3261e; border-radius: 8px; color: #b3261e; }

/* The card (shared with the recipient page's look). */
.ncllc-gc .ncllc-gc-card { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1.75 / 1; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.ncllc-gc .ncllc-gc-card__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ncllc-gc .ncllc-gc-card__store { position: absolute; top: 6.5%; left: 5%; font-weight: 700; font-size: clamp(0.75rem, 2.4vw, 0.95rem); text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ncllc-gc .ncllc-gc-card__amount { position: absolute; bottom: 22%; left: 5%; font-weight: 800; font-size: clamp(1.4rem, 6vw, 2.3rem); line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ncllc-gc .ncllc-gc-card__title { position: absolute; bottom: 9%; left: 5%; right: 45%; font-weight: 700; font-size: clamp(0.85rem, 3vw, 1.2rem); line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* The recipient's page preview: a browser frame with the (masked) link, the page scrolling inside it. */
.ncllc-gc__browser { border: 1px solid rgba(0,0,0,.2); border-radius: 10px; overflow: hidden; background: #fff; }
.ncllc-gc__address { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; background: #eceae6; color: #333; font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: anywhere; }
.ncllc-gc__lock { flex-shrink: 0; }
.ncllc-gc__page { display: block; width: 100%; height: 640px; border: 0; background: #f7f5f2; }

/* A phone: two designs a row, each a tidy tile; the tabs share the width. */
@media (max-width: 480px) {
  .ncllc-gc__group { padding: 10px 10px 12px; }
  .ncllc-gc__designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ncllc-gc__tabs button { flex: 1 1 0; }
  .ncllc-gc__email { height: 440px; }
  .ncllc-gc__page { height: 560px; }
  .ncllc-gc__tabs { flex-wrap: wrap; }
}