/* Dublin Silver ERP Connector: Gift cards (Connector C14), the approved docs/roadmap/design/C14 screens with the shared
   --dsec-* tokens: the gift card page with its live preview, the "Gift card or store credit" box at checkout and in
   the basket, the balance page, the Gift cards tab and Send a gift card. Scoped under .dsec-ui; everything works
   without the script. */

.dsec-ui .dsec-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dsec-ui .dsec-hint { font-size: 13px; color: var(--dsec-muted); }
.dsec-ui .dsec-hint.is-over { color: var(--dsec-danger-text); font-weight: 600; white-space: nowrap; }
.dsec-ui .dsec-center { text-align: center; }
.dsec-ui .dsec-gc-err { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--dsec-danger-text); font-size: 13px; line-height: 1.45; }
.dsec-ui .dsec-gc-err .dsec-ic { margin-top: 1px; }
.dsec-ui .dsec-input.is-err { border-color: var(--dsec-danger); }
.dsec-ui textarea.dsec-input.is-err { border-color: var(--dsec-danger); }
.dsec-ui .dsec-gc-fs { display: flex; flex-direction: column; gap: 8px; }
.dsec-ui .dsec-gc-fs > legend { margin-bottom: 8px; }
.dsec-gc-frame { max-width: 1180px; margin: 0 auto; padding: 24px 16px 48px; }
.dsec-ui .dsec-gc-crumbs { margin-bottom: 16px; }
.dsec-ui .dsec-gc-crumbs a { color: var(--dsec-muted); text-decoration: none; }

/* the page: preview on the left, choices on the right from 760 px */
.dsec-ui .dsec-gc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@container dsec (min-width: 760px) {
  .dsec-ui .dsec-gc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dsec-ui .dsec-gc-left { position: sticky; top: 24px; }
}
.dsec-ui .dsec-gc-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container dsec (min-width: 560px) { .dsec-ui .dsec-gc-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* the card (C25a): the design's picture with the logo, the names and the amount written in the room it keeps */
.dsec-ui .dsec-gc-art {
  position: relative; aspect-ratio: 1.586; border-radius: 16px; overflow: hidden; color: var(--gc-ink); background: var(--gc-bg);
  box-shadow: 0 14px 34px rgba(17, 17, 17, .22), 0 2px 6px rgba(17, 17, 17, .10); container-type: inline-size;
}
.dsec-ui .dsec-gc-art--thank_you, .dsec-ui .dsec-gc-art--silver { box-shadow: 0 14px 34px rgba(17, 17, 17, .14), 0 0 0 1px #e5e1d8; }
.dsec-ui .dsec-gc-art .dsec-gc-art__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.dsec-ui .dsec-gc-art__to { position: absolute; left: 6%; top: 80%; width: 50%; font: 500 13px/1.3 var(--dsec-font); font-size: clamp(11px, 2.6cqw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.dsec-ui .dsec-gc-art__amount { position: absolute; right: 6%; bottom: 8%; font: 600 26px/1 var(--dsec-font); font-size: clamp(20px, 7.6cqw, 40px); letter-spacing: -.01em; }
.dsec-ui .dsec-gc-msgcard { gap: 6px; }
.dsec-ui .dsec-gc-msgpreview { font: italic 19px/1.35 var(--dsec-serif); color: var(--dsec-ink); white-space: pre-line; overflow-wrap: anywhere; }

/* the six designs */
.dsec-ui .dsec-gc-designs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dsec-ui .dsec-gc-designs.is-compact { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; }
.dsec-ui .dsec-gc-designs.is-compact .dsec-gc-design { flex: 0 0 72px; }
.dsec-ui .dsec-gc-design { position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; }
.dsec-ui .dsec-gc-design input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dsec-ui .dsec-gc-swatch { display: block; aspect-ratio: 1.586; border-radius: 8px; overflow: hidden; background: var(--gc-bg); }
.dsec-ui .dsec-gc-swatch img, .dsec-ui .dsec-gc-mini img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; margin: 0; border: 0; border-radius: 0; }
.dsec-ui .dsec-gc-swatch.dsec-gc-art--thank_you, .dsec-ui .dsec-gc-swatch.dsec-gc-art--silver, .dsec-ui .dsec-gc-mini.dsec-gc-art--thank_you, .dsec-ui .dsec-gc-mini.dsec-gc-art--silver { box-shadow: inset 0 0 0 1px #e5e1d8; }
.dsec-ui .dsec-gc-design:has(input:checked) .dsec-gc-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dsec-ink); }
.dsec-ui .dsec-gc-design:has(input:checked) .dsec-tiny { color: var(--dsec-ink); font-weight: 600; }
.dsec-ui .dsec-gc-design:has(input:focus-visible) .dsec-gc-swatch { outline: 2px solid var(--dsec-ink); outline-offset: 4px; }
.dsec-ui .dsec-gc-other__in { max-width: 180px; }

/* how to send it, when */
.dsec-ui .dsec-gc-modes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@container dsec (min-width: 560px) { .dsec-ui .dsec-gc-modes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dsec-ui .dsec-gc-radio {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; min-height: 44px; border: 1px solid var(--dsec-line); border-radius: var(--dsec-r-card);
  background: #fff; cursor: pointer; color: var(--dsec-ink);
}
.dsec-ui .dsec-gc-radio > input { width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; accent-color: var(--dsec-ink); }
.dsec-ui .dsec-gc-radio:has(> input:checked) { border-color: var(--dsec-ink); box-shadow: inset 0 0 0 1px var(--dsec-ink); }
.dsec-ui .dsec-gc-seg { display: inline-flex; border: 1px solid #d1d5db; border-radius: var(--dsec-r-control); overflow: hidden; align-self: flex-start; }
.dsec-ui .dsec-gc-seg label { position: relative; cursor: pointer; }
.dsec-ui .dsec-gc-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dsec-ui .dsec-gc-seg span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; font: 600 14px/1 var(--dsec-font); color: var(--dsec-ink); background: #fff; }
.dsec-ui .dsec-gc-seg input:checked + span { background: var(--dsec-ink); color: #fff; }
.dsec-ui .dsec-gc-seg input:focus-visible + span { outline: 2px solid var(--dsec-ink); outline-offset: -4px; }
.dsec-ui .dsec-gc-check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 12px 0; color: var(--dsec-ink); cursor: pointer; }
.dsec-ui .dsec-gc-check input { width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; accent-color: var(--dsec-ink); }
.dsec-ui .dsec-gc-check--plain { padding: 0; font-size: 14px; }
.dsec-ui .dsec-gc-buy { min-height: 52px; font-size: 15px; }
.dsec-ui .dsec-gc-readonly { background: var(--dsec-bg); color: var(--dsec-ink); }
.dsec-ui .dsec-gc-count { align-items: flex-start; flex-wrap: nowrap; }
.dsec-ui .dsec-gc-count .dsec-hint { margin-left: auto; }

/* the checkout box (1.14.0: one tidy row, every part the same 48 px height, whatever the checkout builder's styles) */
.dsec-gc-box { margin: 0 0 20px; }
#dsec-gc-box.dsec-ui.dsec-gc-box { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; clear: both; }
#dsec-gc-box.dsec-ui.dsec-gc-box *, #dsec-gc-box.dsec-ui.dsec-gc-box *::before, #dsec-gc-box.dsec-ui.dsec-gc-box *::after { box-sizing: border-box; }
#dsec-gc-box.dsec-ui.dsec-gc-box > .dsec-card { padding: 18px 20px; gap: 12px; }
.dsec-ui .dsec-gc-box__title { display: flex; align-items: center; gap: 8px; font: 600 16px/1.3 var(--dsec-font); color: var(--dsec-ink); }
.dsec-ui .dsec-gc-box__title .dsec-ic { color: var(--dsec-gold-text); }
.dsec-ui .dsec-gc-codeRow { display: flex; gap: 8px; align-items: stretch; flex-wrap: nowrap; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-codeRow .dsec-input {
  height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid #d1d5db !important;
  border-radius: var(--dsec-r-control) !important; background: #fff !important; box-shadow: none !important;
}
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-codeRow .dsec-input:focus-within { border-color: var(--dsec-ink) !important; box-shadow: 0 0 0 3px rgba(17, 17, 17, .08) !important; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-codeRow .dsec-input.is-err { border-color: var(--dsec-danger) !important; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-codeRow .dsec-input > input { height: 46px !important; }
.dsec-ui .dsec-gc-code { flex: 1 1 auto; min-width: 0; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-code > input, .dsec-ui .dsec-gc-code input {
  font-family: ui-monospace, Menlo, Consolas, monospace !important; letter-spacing: .06em !important; text-transform: uppercase !important;
}
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-code > input::placeholder, .dsec-ui .dsec-gc-code input::placeholder { text-transform: none; font-family: var(--dsec-font); letter-spacing: 0; }
.dsec-ui .dsec-gc-pin { width: 96px; flex: 0 0 96px; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-pin > input { text-align: center; letter-spacing: .2em !important; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-pin > input::placeholder { letter-spacing: 0; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-btn.dsec-gc-apply, #dsec-gc-box.dsec-ui.dsec-gc-box .dsec-btn.dsec-gc-apply:hover, #dsec-gc-box.dsec-ui.dsec-gc-box .dsec-btn.dsec-gc-apply:focus {
  flex: 0 0 auto !important; width: auto !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 22px !important;
  border: 1px solid var(--dsec-ink) !important; border-radius: var(--dsec-r-control) !important; background: var(--dsec-ink) !important;
  color: #fff !important; box-shadow: none !important; font: 600 15px/1 var(--dsec-font) !important; text-transform: none !important;
  letter-spacing: normal !important; text-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-btn.dsec-gc-apply:hover { opacity: .88; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-btn.dsec-gc-apply:focus-visible { outline: 2px solid var(--dsec-ink) !important; outline-offset: 2px; }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-hint { font-size: 13px; line-height: 1.45; color: var(--dsec-muted); }
#dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-codeRow .dsec-input > input[type], #dsec-gc-box.dsec-ui.dsec-gc-box .dsec-gc-codeRow .dsec-input > input[type]:focus {
  display: block !important; flex: 1 1 auto !important; width: 100% !important; height: 46px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  font-size: 15px !important; line-height: 1.3 !important; color: var(--dsec-ink) !important; position: static !important; float: none !important;
}
@media (max-width: 480px) {
  .dsec-ui.dsec-gc-box > .dsec-card { padding: 16px; }
  .dsec-ui .dsec-gc-codeRow { flex-wrap: wrap; }
  #dsec-gc-box.dsec-ui .dsec-gc-codeRow .dsec-gc-code { flex: 1 1 100%; }
  #dsec-gc-box.dsec-ui .dsec-gc-codeRow .dsec-gc-pin { flex: 1 1 0; width: auto; min-width: 0; }
}
.dsec-ui input.dsec-gc-masked { -webkit-text-security: disc; text-security: disc; }
.dsec-ui .dsec-gc-pinbox { max-width: 140px; }
.dsec-ui .dsec-gc-applied {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px;
  background: var(--dsec-gold-tint); border: 1px solid #eedfa8;
}
.dsec-ui .dsec-gc-applied .dsec-ic { color: var(--dsec-gold-text); margin-top: 2px; }
.dsec-ui .dsec-gc-applied__right { align-items: flex-end; flex: 0 0 auto; }
.dsec-ui .dsec-gc-applied__right .dsec-btn { padding: 0; min-height: 32px; }
.dsec-ui .dsec-gc-okmsg { display: flex; gap: 6px; align-items: center; color: var(--dsec-success-text); }
.dsec-ui .dsec-gc-total { border-top: 1px solid var(--dsec-line); padding-top: 8px; font-size: 14px; color: var(--dsec-ink); }
.dsec-ui .dsec-gc-mine { padding: 8px 0; }

/* the balance page */
.dsec-ui .dsec-gc-bal { max-width: 480px; width: 100%; margin: 0 auto; }
.dsec-ui .dsec-gc-bal__head { text-align: center; align-items: center; }
.dsec-ui .dsec-gc-bal__head .dsec-ic { color: var(--dsec-gold-text); }
.dsec-ui .dsec-gc-bal__result { align-items: center; text-align: center; }
.dsec-ui .dsec-gc-bal__amount { font: 600 40px/1 var(--dsec-font); color: var(--dsec-ink); font-variant-numeric: tabular-nums; }
.dsec-ui .dsec-gc-totalcard .dsec-gc-bal__amount { font-size: 32px; }
.dsec-ui .dsec-gc-bal__chips { justify-content: center; }
.dsec-ui .dsec-gc-bal__result .dsec-btn--link { white-space: normal; height: auto; max-width: 100%; text-align: center; line-height: 1.4; }

/* the account tab */
.dsec-ui .dsec-gc-totalcard { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dsec-ui .dsec-gc-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.dsec-ui .dsec-gc-row > .dsec-row { flex: 1 1 260px; flex-wrap: nowrap; min-width: 0; }
.dsec-ui .dsec-gc-row__amt { font-size: 17px; }
.dsec-ui .dsec-gc-row__acts { gap: 8px; }
.dsec-ui .dsec-gc-row__acts form { margin: 0; }
.dsec-ui .dsec-gc-mini { display: block; width: 84px; flex: 0 0 84px; aspect-ratio: 1.586; border-radius: 8px; overflow: hidden; background: var(--gc-bg); }
.dsec-ui .dsec-gc-row--bought .dsec-gc-change { flex: 1 1 100%; }
.dsec-ui .dsec-gc-change > summary, .dsec-ui .dsec-gc-add > summary { list-style: none; cursor: pointer; display: inline-flex; }
.dsec-ui .dsec-gc-change > summary::-webkit-details-marker, .dsec-ui .dsec-gc-add > summary::-webkit-details-marker { display: none; }
.dsec-ui .dsec-gc-change form { margin-top: 8px; max-width: 420px; }
.dsec-ui .dsec-gc-add { display: flex; flex-direction: column; gap: 8px; }
.dsec-ui .dsec-gc-add[open] > summary { display: none; }
.dsec-ui .dsec-gc-add__form { min-width: min(100%, 360px); }
.dsec-ui .dsec-empty .dsec-gc-add { align-items: center; }
.dsec-ui .dsec-gc-send { max-width: 640px; }

/* the totals tables of the basket and checkout (outside .dsec-ui: WooCommerce's own rows) */
.dsec-gc-trow th, .dsec-gc-trow td { color: #8a6d12; }