/* ==========================================================================
   Muse Paintbar — Gift Cards V1
   Scoped under .gcv1 so nothing here can reach the legacy /gift-cards page.
   Colours sampled directly from the approved mockup.
   ========================================================================== */

.gcv1 {
  --gc-accent:        #00D5C2;
  --gc-accent-ink:    #05413C;
  --gc-ink:           #333333;
  --gc-ink-soft:      #707070;
  --gc-ink-faint:     #979797;
  --gc-line:          #D8D8D8;
  --gc-fill:          #F1F2F2;
  --gc-banner:        #DFF6F0;
  --gc-link:          #0076DB;
  --gc-danger:        #C0392B;

  /* Alert banner — sampled from the virtual PP checkout so both match. */
  --gc-alert-bg:      #FAEDEB;
  --gc-alert-border:  #CA6F55;
  --gc-alert-ink:     #7F3120;
  --gc-radius:        4px;
  --gc-gap:           24px;

  color: var(--gc-ink);
  font-family: 'Poppins Light', 'Poppins', Helvetica, Arial, sans-serif;
}

.gcv1 *,
.gcv1 *::before,
.gcv1 *::after { box-sizing: border-box; }

/* --------------------------------------------------------------- masthead */

.gcv1-masthead {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.gcv1-masthead h1 {
  font-family: 'Poppins Medium', 'Poppins', Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--gc-ink);
  margin: 0 0 18px;
  line-height: 1.15;
}

.gcv1-masthead p {
  font-size: 16px;
  line-height: 1.5;
  color: #4e4e4e;
  margin: 0 0 12px;
  font-family: 'Poppins';
  font-weight: 400;
}

.gcv1-masthead p:last-child { margin-bottom: 0; }
.gcv1-masthead a { color: var(--gc-link); }

.gcv1-promo-banner {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.gcv1-promo-banner strong { font-family: 'Poppins Medium', 'Poppins', sans-serif; }
.gcv1-promo-banner span {
  display: block;
  font-size: 12px;
  color: var(--gc-ink-soft);
  margin-top: 2px;
}

.gcv1-flash {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 28px;
  padding: 17px 22px;
  border: 1px solid var(--gc-alert-border);
  border-radius: 6px;
  background: var(--gc-alert-bg);
  color: var(--gc-alert-ink);
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
}

.gcv1-flash-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  margin: -2px 0 0;
  font-size: 22px;
  line-height: 1;
  color: var(--gc-alert-ink);
  cursor: pointer;
  opacity: .8;
}
.gcv1-flash-close:hover { opacity: 1; }

@media (max-width: 600px) {
  .gcv1-flash { padding: 14px 16px; font-size: 15px; gap: 12px; }
}

/* ----------------------------------------------------------------- layout */

.gcv1-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--gc-gap);
}

.gcv1-col-main { flex: 1 1 auto; min-width: 0; }
.gcv1-col-side { flex: 0 0 400px; width: 400px; }

.gcv1-panel {
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: #fff;
  padding: 28px 30px;
  margin-bottom: var(--gc-gap);
}

.gcv1-panel:last-child { margin-bottom: 0; }

.gcv1-panel h2 {
  font-family: 'Poppins Medium', 'Poppins', sans-serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gc-ink);
  margin: 0 0 22px;
}

/* ----------------------------------------------------------------- fields */

.gcv1-field { margin-bottom: 20px; }

.gcv1-row {
  display: flex;
  gap: 16px;
}
.gcv1-row > .gcv1-field { flex: 1 1 0; min-width: 0; }

.gcv1-label {
  display: block;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gc-ink-soft);
  margin: 0 0 7px;
}

/* display:block matters. As inline-block these sit on a text baseline, so a
   wrapper around one is ~4px taller than the field. Anything centred on the
   wrapper (date icon, card brand label) then lands low against the text. */
.gcv1 input[type="text"],
.gcv1 input[type="tel"],
.gcv1 input[type="email"],
.gcv1 textarea,
.gcv1 select {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  background: var(--gc-fill);
  border-radius: var(--gc-radius);
  padding: 0 14px;
  height: 46px;
  font-family: inherit;
  font-size: 15px;
  color: var(--gc-ink);
  -webkit-appearance: none;
  appearance: none;
}

.gcv1 textarea {
  height: auto;
  min-height: 128px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.gcv1 input::placeholder,
.gcv1 textarea::placeholder { color: var(--gc-ink-faint); }

.gcv1 input:focus,
.gcv1 textarea:focus,
.gcv1 select:focus,
.gcv1 button:focus-visible,
.gcv1 a:focus-visible {
  outline: 2px solid var(--gc-accent);
  outline-offset: 2px;
}

.gcv1 .is-invalid,
.gcv1 .is-invalid:focus {
  border-color: var(--gc-danger);
  background: #fff5f4;
}

/* Per-field pass state, matching the other two checkouts. */
.gcv1 .is-valid,
.gcv1 .is-valid:focus { border-color: var(--gc-accent); }

/* Card number: brand label sits inside the field on the right. */
.gcv1-card-wrap { position: relative; }
.gcv1-card-wrap input { padding-right: 96px; }

.gcv1-cc-brand {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Poppins Medium', 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--gc-ink-soft);
  pointer-events: none;
  white-space: nowrap;
}

.gcv1-hint {
  font-size: 12px;
  color: var(--gc-ink-soft);
  line-height: 1.45;
  margin-top: 6px;
}

.gcv1-counter { font-size: 12px; color: var(--gc-ink-soft); margin-top: 6px; }

.gcv1-error {
  display: none;
  font-size: 13px;
  color: var(--gc-danger);
  margin-top: 6px;
}
.gcv1-error.is-shown { display: block; }

/* ------------------------------------------------------------- checkboxes */

.gcv1-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 22px;
}

/* Drawn rather than left to accent-color: the browser picks the tick colour
   from the accent's contrast, and against this teal Chrome chose a dark tick.
   appearance:none plus an inline SVG guarantees a white check everywhere. */
.gcv1-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--gc-line);
  border-radius: 3px;
  background: #fff no-repeat center;
  cursor: pointer;
}

.gcv1-check input[type="checkbox"]:checked {
  border-color: var(--gc-accent);
  background-color: var(--gc-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3.4 3.4 6.2-7'/%3E%3C/svg%3E");
  background-size: 12px 12px;
}

/* Windows high-contrast mode ignores background images. */
@media (forced-colors: active) {
  .gcv1-check input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }
}

.gcv1-check label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--gc-ink);
  cursor: pointer;
  margin: 0;
}

/* ------------------------------------------------------------- amount row */

.gcv1-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.gcv1-amount {
  min-width: 88px;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: #fff;
  font-family: 'Poppins Medium', 'Poppins', sans-serif;
  font-size: 17px;
  color: var(--gc-ink);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.gcv1-amount:hover { border-color: var(--gc-ink-soft); }

.gcv1-amount.is-selected {
  background: var(--gc-accent);
  border-color: var(--gc-accent);
  color: #fff;
}

.gcv1-amount-other {
  position: relative;
  min-width: 176px;
}

.gcv1-amount-other select {
  height: 52px;
  border: 1px solid var(--gc-line);
  background: #fff;
  padding: 0 40px 0 18px;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gc-ink-soft);
  cursor: pointer;
}

.gcv1-amount-other::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--gc-ink-soft);
  border-bottom: 2px solid var(--gc-ink-soft);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Windows Chrome renders the native option list using the select's own
   background and colour, so the teal "selected" state leaked into the open
   dropdown. Pin the options to the default surface — the closed control keeps
   its teal state, the popup stays white with dark text. */
.gcv1-amount-other select option {
  background-color: #fff;
  color: var(--gc-ink);
  font-family: 'Poppins Light', 'Poppins', Helvetica, Arial, sans-serif;
  text-transform: none;
}

.gcv1-amount-other select option[value=""] { color: var(--gc-ink-soft); }

.gcv1-amount-other.is-selected select {
  border-color: var(--gc-accent);
  background: var(--gc-accent);
  color: #fff;
  text-transform: none;
  font-family: 'Poppins Medium', 'Poppins', sans-serif;
  font-size: 17px;
}
.gcv1-amount-other.is-selected::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* ------------------------------------------------------------- date field */

.gcv1-date-wrap { position: relative; }

/* Icon sits on the right, so the text clears it on that side instead. */
.gcv1-date-wrap input {
  padding-right: 48px;
  cursor: pointer;
  background-color: var(--gc-fill);
}

.gcv1-date-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 21px;
  height: 21px;
  color: var(--gc-ink-soft);
  pointer-events: none;
}

.gcv1-date-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.gcv1-date-row .gcv1-date-wrap { flex: 0 0 300px; max-width: 300px; }
.gcv1-date-row .gcv1-hint {
  flex: 1 1 auto;
  margin-top: 13px;
  font-style: italic;
  max-width: 210px;
}

/* jQuery UI datepicker — keep it above the payment panel and preview card,
   which sit later in the document and would otherwise paint over it. */
.ui-datepicker { z-index: 1200 !important; }

/* ------------------------------------------------- recipient add / remove */

.gcv1-recipient-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.gcv1-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--gc-link);
  cursor: pointer;
}
.gcv1-linkbtn:hover { text-decoration: underline; }
.gcv1-linkbtn[hidden] { display: none; }

/* -------------------------------------------------------- preview cartouche */

.gcv1-preview {
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  overflow: hidden;
  background: #fff;
  margin-bottom: var(--gc-gap);
}

.gcv1-preview-img {
  display: block;
  width: 100%;
  height: auto;
}

.gcv1-preview-msg {
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--gc-ink-soft);
  padding: 16px 20px 18px;
  margin: 0;
  border-bottom: 1px solid var(--gc-line);
  min-height: 56px;
  white-space: pre-wrap;
  word-break: break-word;
}

.gcv1-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}

.gcv1-preview-amt {
  background: var(--gc-fill);
  border-radius: var(--gc-radius);
  padding: 8px 16px;
  font-family: 'Poppins Medium', 'Poppins', sans-serif;
  font-size: 19px;
}

.gcv1-preview-logo { max-width: 120px; height: auto; }

/* ------------------------------------------------------------ card picker */

.gcv1-cardpicker { margin-bottom: var(--gc-gap); }

.gcv1-cardpicker-title {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gc-ink-soft);
  margin: 0 0 10px;
}

.gcv1-cardpicker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.gcv1-cardpicker-grid input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.gcv1-cardpicker-grid label {
  display: block;
  border: 2px solid transparent;
  border-radius: var(--gc-radius);
  overflow: hidden;
  cursor: pointer;
  margin: 0;
  line-height: 0;
}

.gcv1-cardpicker-grid img { width: 100%; height: auto; }

.gcv1-cardpicker-grid input:checked + label { border-color: var(--gc-accent); }
.gcv1-cardpicker-grid input:focus-visible + label { outline: 2px solid var(--gc-accent); outline-offset: 2px; }

/* --------------------------------------------------------------- payment */

.gcv1-secure {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--gc-banner);
  border-radius: var(--gc-radius);
  padding: 15px 18px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gc-accent-ink);
}

.gcv1-secure svg { flex: 0 0 auto; margin-top: 1px; }

.gcv1-expiry-row { display: flex; gap: 16px; }
.gcv1-expiry-row .gcv1-field { flex: 1 1 0; margin-bottom: 20px; }

/* creditcardjs needs the original month/year selects in the DOM. They're kept
   here, visually removed, and driven by the single MM/YY input. */
.gcv1-legacy-expiry {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gcv1-submit {
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: var(--gc-radius);
  background: var(--gc-ink);
  color: #fff;
  font-family: 'Poppins Medium', 'Poppins', sans-serif;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 6px;
}
.gcv1-submit:hover { background: #1f1f1f; }
.gcv1-submit[disabled] { opacity: .55; cursor: default; }

/* -------------------------------------------------------------- footnotes */

.gcv1-footnotes {
  text-align: center;
  margin-top: 40px;
  font-size: 13px;
  color: #4e4e4e;
  line-height: 1.6;
}
.gcv1-footnotes span { display: block; }

/* ---------------------------------------------------------------- spinner */

.gcv1-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255,255,255,.82);
  align-items: center;
  justify-content: center;
}
.gcv1-overlay.is-shown { display: flex; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .gcv1-col-side { flex-basis: 340px; width: 340px; }
  .gcv1-panel { padding: 24px 22px; }
}

@media (max-width: 900px) {
  .gcv1-grid { flex-direction: column; }
  .gcv1-col-side { flex: 1 1 auto; width: 100%; order: 2; }
  .gcv1-col-main { order: 1; width: 100%; }
  .gcv1-masthead h1 { font-size: 27px; }
}

@media (max-width: 600px) {
  .gcv1 { --gc-gap: 16px; }
  .gcv1-panel { padding: 20px 16px; }
  .gcv1-row { flex-direction: column; gap: 0; }
  .gcv1-date-row { flex-direction: column; gap: 8px; }
  .gcv1-date-row .gcv1-date-wrap { flex-basis: auto; max-width: none; }
  .gcv1-date-row .gcv1-hint { margin-top: 0; max-width: none; }
  .gcv1-amounts { gap: 8px; }
  .gcv1-amount { min-width: 74px; height: 48px; padding: 0 12px; font-size: 16px; }
  .gcv1-amount-other { min-width: 100%; }
  .gcv1-amount-other select { height: 48px; }
  .gcv1-recipient-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gcv1-masthead h1 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .gcv1 * { transition: none !important; animation: none !important; }
}