/*
 * D-319 (owner, 8 Nov 2026: "the dropdown, the calendar and other things should be designed from our design system;
 * everything should look our design, not the generic one; alerts should be proper, with proper colours from the
 * design system and micro-animations"). Behaviour: front_js/ui-kit.js. Loaded on every page (head + my-account).
 * Colours and radii are the design tokens (tokens.css); coral = --cy-brand-600, the CTA gradient = --cy-cta-bg.
 */
:root {
  --cyk-coral: var(--cy-brand-600, #f05d49);
  --cyk-coral-ink: var(--cy-brand-700, #a03e31);
  --cyk-coral-soft: var(--cy-brand-50, #fdeae7);
  --cyk-grad: linear-gradient(135deg, #ff8b78 0%, #f05d49 60%, #e5503c 100%);
  --cyk-ink: var(--cy-text-primary, #171717);
  --cyk-muted: var(--cy-neutral-500, #737373);
  --cyk-line: rgba(21, 17, 15, .08);
  --cyk-card-shadow: 0 24px 48px -20px rgba(21, 17, 15, .38), 0 0 0 1px rgba(21, 17, 15, .06);
  --cyk-spring: cubic-bezier(.34, 1.56, .64, 1);
  --cyk-ease: cubic-bezier(.2, 0, 0, 1);
}
@keyframes cyk-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes cyk-pop-up { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes cyk-sheet { from { transform: translateY(100%); } }
@keyframes cyk-fade { from { opacity: 0; } }
@keyframes cyk-in-l { from { opacity: 0; transform: translateX(-14px); } }
@keyframes cyk-in-r { from { opacity: 0; transform: translateX(14px); } }
@keyframes cyk-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* ============================================================ 1. dropdowns (customisable <select>) ============ */
@supports (appearance: base-select) {
  select.cy-sel, select.cy-sel::picker(select) { appearance: base-select !important; }
  /* the chosen value sits in the middle of the field, as before (base-select lays the field out as a row) */
  select.cy-sel { cursor: pointer; align-items: center; }
  select.cy-sel::picker-icon { color: var(--cyk-coral-ink); transition: rotate .25s var(--cyk-ease); }
  select.cy-sel:open::picker-icon { rotate: 180deg; }
  select.cy-sel.cy-sel--own-arrow::picker-icon { display: none; }
  select.cy-sel::picker(select) {
    margin-block: 6px; padding: 6px; border: 0; border-radius: var(--cy-radius-lg, 16px); background: #fff;
    box-shadow: var(--cyk-card-shadow); max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain;
    min-width: anchor-size(width); scrollbar-width: thin; scrollbar-color: var(--cy-brand-200, #fac9c2) transparent;
    opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
    transition: opacity .18s var(--cyk-ease), transform .22s var(--cyk-spring), display .22s allow-discrete, overlay .22s allow-discrete;
  }
  select.cy-sel:open::picker(select) { opacity: 1; transform: none; }
  @starting-style { select.cy-sel:open::picker(select) { opacity: 0; transform: translateY(-6px) scale(.98); } }
  select.cy-sel option {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px;
    font: 500 14px/1.35 var(--cy-font, Inter, system-ui, sans-serif); color: var(--cyk-ink); background: transparent;
    cursor: pointer; transition: background-color .15s, color .15s;
  }
  select.cy-sel option:hover, select.cy-sel option:focus-visible { background: var(--cyk-coral-soft); color: var(--cyk-coral-ink); outline: none; }
  select.cy-sel option:checked { background: var(--cyk-coral-soft); color: var(--cyk-coral-ink); font-weight: 650; }
  select.cy-sel option::checkmark { order: 1; margin-left: auto; color: var(--cyk-coral); font-weight: 700; }
  select.cy-sel option:disabled { color: var(--cy-neutral-400, #a3a3a3); cursor: default; background: none; }
  /* the "Select ..." placeholder line is a hint, not a choice: it stays in the field, not in the list */
  select.cy-sel option[value=""]:disabled { display: none; }
  select.cy-sel optgroup { padding: 0; }
  select.cy-sel optgroup legend, select.cy-sel optgroup::label { padding: 10px 12px 4px; font: 700 11px/1.2 var(--cy-font, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--cyk-muted); }
  @media (prefers-reduced-motion: reduce) { select.cy-sel::picker(select) { transition: none; } }
}

/* ============================================================ 2. calendar (front_js/ui-kit.js) ================= */
.cy-date-wrap { position: relative; display: block; width: 100%; }
.cy-date-wrap > .cy-date { width: 100%; padding-right: 44px !important; }
.cy-date-btn { position: absolute; top: 50%; right: 8px; translate: 0 -50%; width: 32px; height: 32px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--cyk-coral-ink); cursor: pointer; transition: background-color .15s; }
.cy-date-btn:hover { background: var(--cyk-coral-soft); }
.cy-date-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
input.cy-date { cursor: pointer; }

.cy-cal {
  position: fixed; z-index: 2000; width: 316px; padding: 12px; border-radius: 22px; background: #fff; box-shadow: var(--cyk-card-shadow);
  font-family: var(--cy-font, Inter, system-ui, sans-serif); color: var(--cyk-ink); user-select: none;
}
.cy-cal[hidden] { display: none; }
.cy-cal.is-open { animation: cyk-pop .26s var(--cyk-spring) both; transform-origin: top left; }
.cy-cal.cy-cal--up.is-open { animation-name: cyk-pop-up; transform-origin: bottom left; }
.cy-cal__head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 6px; margin-bottom: 8px; }
.cy-cal__nav { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: var(--cy-neutral-100, #f5f5f5); color: var(--cyk-ink); cursor: pointer; transition: background-color .15s, transform .15s; }
.cy-cal__nav:hover { background: var(--cyk-coral-soft); color: var(--cyk-coral-ink); }
.cy-cal__nav:active { transform: scale(.92); }
.cy-cal__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cy-cal__title { height: 36px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1; color: var(--cyk-ink); cursor: pointer; transition: background-color .15s, color .15s; }
.cy-cal__title:hover { background: var(--cyk-coral-soft); color: var(--cyk-coral-ink); }
.cy-cal[data-view="years"] .cy-cal__title { cursor: default; }
.cy-cal[data-view="years"] .cy-cal__title:hover { background: transparent; color: var(--cyk-ink); }
.cy-cal__body.is-in-l { animation: cyk-in-l .22s var(--cyk-ease) both; }
.cy-cal__body.is-in-r { animation: cyk-in-r .22s var(--cyk-ease) both; }
.cy-cal__grid { display: grid; gap: 4px; }
.cy-cal__grid--days { grid-template-columns: repeat(7, 1fr); }
.cy-cal__grid--months, .cy-cal__grid--years { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0; }
.cy-cal__dow { display: grid; place-items: center; height: 26px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cyk-muted); }
.cy-cal__day, .cy-cal__cell {
  position: relative; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--cyk-ink);
  font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer; transition: background-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.cy-cal__day { width: 100%; aspect-ratio: 1; max-height: 40px; border-radius: 12px; }
.cy-cal__cell { height: 46px; border-radius: 14px; background: var(--cy-neutral-50, #fafafa); font-weight: 600; }
.cy-cal__day:hover:not([disabled]), .cy-cal__cell:hover:not([disabled]) { background: var(--cyk-coral-soft); color: var(--cyk-coral-ink); }
.cy-cal__day:active:not([disabled]), .cy-cal__cell:active:not([disabled]) { transform: scale(.9); }
.cy-cal__day.is-today, .cy-cal__cell.is-today { box-shadow: inset 0 0 0 1.5px var(--cyk-coral); color: var(--cyk-coral-ink); font-weight: 700; }
.cy-cal__day.is-selected, .cy-cal__cell.is-selected {
  background: var(--cyk-grad); color: #fff; font-weight: 700; box-shadow: 0 10px 18px -10px rgba(240, 93, 73, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: cyk-select .32s var(--cyk-spring);
}
@keyframes cyk-select { from { transform: scale(.7); } }
.cy-cal__day[disabled], .cy-cal__cell[disabled] { color: var(--cy-neutral-300, #d4d4d4); cursor: default; background: transparent; }
.cy-cal__day:focus-visible, .cy-cal__cell:focus-visible, .cy-cal__nav:focus-visible, .cy-cal__title:focus-visible, .cy-cal__link:focus-visible { outline: 2px solid var(--cyk-coral); outline-offset: 2px; }
.cy-cal__foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cyk-line); }
.cy-cal__link { padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1; color: var(--cyk-muted); cursor: pointer; transition: background-color .15s, color .15s; }
.cy-cal__link:hover { background: var(--cy-neutral-100, #f5f5f5); color: var(--cyk-ink); }
.cy-cal__link--strong { color: var(--cyk-coral-ink); }
.cy-cal__link--strong:hover { background: var(--cyk-coral-soft); color: var(--cyk-coral-ink); }
.cy-cal__link[disabled] { opacity: .4; cursor: default; }
.cy-cal__link[hidden] { visibility: hidden; display: inline-block; }
/* phones: a bottom sheet over a soft backdrop */
.cy-cal.cy-cal--sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; }
.cy-cal.cy-cal--sheet.is-open { animation: cyk-sheet .32s var(--cyk-ease) both; }
.cy-cal.cy-cal--sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 12px; border-radius: 4px; background: var(--cy-neutral-200, #e5e5e5); }
.cy-cal.cy-cal--sheet .cy-cal__day { max-height: 48px; font-size: 15px; }
html.cy-cal-sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 1999; background: rgba(21, 17, 15, .35); animation: cyk-fade .2s both; }
@media (prefers-reduced-motion: reduce) { .cy-cal.is-open, .cy-cal__body, .cy-cal__day.is-selected { animation: none !important; } }

/* ============================================================ 2b. the gijgo pickers, same look ================= */
.gj-picker.gj-picker-bootstrap {
  padding: 12px !important; border: 0 !important; border-radius: 22px !important; background: #fff !important; box-shadow: var(--cyk-card-shadow) !important;
  font-family: var(--cy-font, Inter, system-ui, sans-serif) !important; color: var(--cyk-ink) !important; width: 316px !important; z-index: 2000 !important;
  animation: cyk-pop .26s var(--cyk-spring) both; overflow: hidden;
}
.gj-picker.gj-picker-bootstrap [role=header] {
  display: flex !important; flex-direction: column; gap: 2px; margin: -12px -12px 10px !important; padding: 14px 18px !important; height: auto !important;
  background: var(--cyk-grad) !important; color: #fff !important; border-radius: 0 !important;
}
.gj-picker.gj-picker-bootstrap [role=header] [role=year] { font-size: 12px !important; font-weight: 600 !important; opacity: .82; cursor: pointer; padding: 0 !important; }
.gj-picker.gj-picker-bootstrap [role=header] [role=date], .gj-picker.gj-picker-bootstrap [role=header] [role=year] { color: #fff !important; }
.gj-picker.gj-picker-bootstrap [role=header] [role=date] { font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; padding: 0 !important; cursor: pointer; }
.gj-picker.gj-picker-bootstrap div[role=navigator] { display: grid !important; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 6px; height: auto !important; margin: 0 0 8px !important; }
.gj-picker.gj-picker-bootstrap div[role=navigator] > div:first-child, .gj-picker.gj-picker-bootstrap div[role=navigator] > div:last-child {
  float: none !important; width: 36px !important; height: 36px !important; display: grid !important; place-items: center; border-radius: 12px; background: var(--cy-neutral-100, #f5f5f5); color: var(--cyk-ink); cursor: pointer; transition: background-color .15s, transform .15s; }
.gj-picker.gj-picker-bootstrap div[role=navigator] > div:first-child:hover, .gj-picker.gj-picker-bootstrap div[role=navigator] > div:last-child:hover { background: var(--cyk-coral-soft); color: var(--cyk-coral-ink); }
.gj-picker.gj-picker-bootstrap div[role=navigator] > div:first-child:active, .gj-picker.gj-picker-bootstrap div[role=navigator] > div:last-child:active { transform: scale(.92); }
.gj-picker.gj-picker-bootstrap div[role=navigator] i { font-size: 13px !important; line-height: 1 !important; color: inherit !important; }
.gj-picker.gj-picker-bootstrap div[role=navigator] [role=period] { float: none !important; width: auto !important; height: 36px; line-height: 36px !important; border-radius: 12px; text-align: center; font-size: 15px !important; font-weight: 700 !important; color: var(--cyk-ink) !important; cursor: pointer; transition: background-color .15s, color .15s; }
.gj-picker.gj-picker-bootstrap div[role=navigator] [role=period]:hover { background: var(--cyk-coral-soft); color: var(--cyk-coral-ink) !important; }
.gj-picker.gj-picker-bootstrap table { width: 100% !important; border-collapse: separate !important; border-spacing: 4px !important; margin: 0 !important; }
.gj-picker.gj-picker-bootstrap table tr th div { height: 26px !important; width: auto !important; line-height: 26px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em; color: var(--cyk-muted) !important; }
.gj-picker.gj-picker-bootstrap table tr td { padding: 0 !important; border: 0 !important; }
.gj-picker.gj-picker-bootstrap table tr td div {
  width: auto !important; height: 38px !important; line-height: 38px !important; border-radius: 12px !important; text-align: center; font-size: 14px !important; font-weight: 500;
  color: var(--cyk-ink) !important; background: transparent !important; transition: background-color .15s, color .15s, transform .15s;
}
.gj-picker.gj-picker-bootstrap[type=month] table tr td div, .gj-picker.gj-picker-bootstrap[type=year] table tr td div, .gj-picker.gj-picker-bootstrap[type=decade] table tr td div,
.gj-picker.gj-picker-bootstrap[type=century] table tr td div { height: 46px !important; line-height: 46px !important; border-radius: 14px !important; background: var(--cy-neutral-50, #fafafa) !important; font-weight: 600; }
.gj-picker.gj-picker-bootstrap table tr td.gj-cursor-pointer div:hover { background: var(--cyk-coral-soft) !important; color: var(--cyk-coral-ink) !important; }
.gj-picker.gj-picker-bootstrap table tr td.gj-cursor-pointer div:active { transform: scale(.9); }
.gj-picker.gj-picker-bootstrap table tr td.today div { box-shadow: inset 0 0 0 1.5px var(--cyk-coral); color: var(--cyk-coral-ink) !important; font-weight: 700; }
.gj-picker.gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div, .gj-picker.gj-picker-bootstrap table tr td.focused div {
  background: var(--cyk-grad) !important; color: #fff !important; font-weight: 700; box-shadow: 0 10px 18px -10px rgba(240, 93, 73, .9); animation: cyk-select .32s var(--cyk-spring); }
.gj-picker.gj-picker-bootstrap table tr td.other-month div { color: var(--cy-neutral-400, #a3a3a3) !important; }
.gj-picker.gj-picker-bootstrap table tr td.disabled div { color: var(--cy-neutral-300, #d4d4d4) !important; background: transparent !important; }
.gj-picker.gj-picker-bootstrap [role=footer] { display: flex !important; justify-content: flex-end; gap: 8px; margin-top: 8px; padding: 10px 0 0 !important; border-top: 1px solid var(--cyk-line) !important; }
.gj-picker.gj-picker-bootstrap [role=footer] .btn { min-width: 0; height: 38px; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important; font: 600 14px/38px var(--cy-font, Inter, sans-serif) !important; box-shadow: none !important; transition: background-color .15s, transform .15s; }
.gj-picker.gj-picker-bootstrap [role=footer] .btn:first-child { background: transparent !important; color: var(--cyk-muted) !important; }
.gj-picker.gj-picker-bootstrap [role=footer] .btn:first-child:hover { background: var(--cy-neutral-100, #f5f5f5) !important; color: var(--cyk-ink) !important; }
.gj-picker.gj-picker-bootstrap [role=footer] .btn:last-child { background: var(--cy-cta-bg, var(--cyk-grad)) !important; color: #fff !important; box-shadow: 0 10px 18px -10px rgba(240, 93, 73, .9) !important; }
.gj-picker.gj-picker-bootstrap [role=footer] .btn:active { transform: scale(.96); }
.gj-modal { background: rgba(21, 17, 15, .35) !important; animation: cyk-fade .2s both; }
/* the field's calendar button (gijgo puts it beside the input) */
.gj-datepicker .input-group-append .btn, .gj-datepicker [role=right-icon], .gj-datepicker .gj-icon { color: var(--cyk-coral-ink) !important; }
@media (max-width: 575.98px) { .gj-picker.gj-picker-bootstrap { width: min(316px, calc(100vw - 24px)) !important; } }
@media (prefers-reduced-motion: reduce) { .gj-picker.gj-picker-bootstrap, .gj-picker.gj-picker-bootstrap td div { animation: none !important; } }

/* ============================================================ 3. form check messages ========================== */
.cy-field-err { display: block; min-height: 0; margin-top: 6px; font-size: 12.5px; line-height: 17px; font-weight: 550; color: var(--cy-critical-700, #b00e00); }
.cy-field-err:empty { display: none; }
.cy-field-err.is-on { animation: cyk-pop .3s var(--cyk-spring) both; }
.cy-field-err.is-on::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: -2px 6px 0 0; vertical-align: middle; border-radius: 50%;
  background: var(--cy-critical-600, #c60c08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.6v4.2' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.3' r='1' fill='%23fff'/%3E%3C/svg%3E") center / 14px no-repeat; }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--cy-critical-500, #fe3311) !important; box-shadow: 0 0 0 3px rgba(254, 51, 17, .12) !important; animation: cyk-shake .36s ease both; }
@media (prefers-reduced-motion: reduce) { .cy-field-err.is-on, :is(input, select, textarea)[aria-invalid="true"] { animation: none; } }

/* ============================================================ 4. small native controls ========================= */
/* tick boxes and radio dots in the brand colour (they were the browser's blue) */
html body input[type=checkbox], html body input[type=radio] { accent-color: var(--cyk-coral); }
/* file pickers: the "Choose file" button as a CoverYou secondary button */
input[type=file]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--cyk-coral-soft); color: var(--cyk-coral-ink);
  font: 600 13px/1.2 var(--cy-font, Inter, sans-serif); cursor: pointer; transition: background-color .15s, transform .15s;
}
input[type=file]::file-selector-button:hover { background: var(--cy-brand-100, #fcdfdb); }
input[type=file]::file-selector-button:active { transform: scale(.96); }
/* text selection in the brand tint */
::selection { background: var(--cy-brand-100, #fcdfdb); color: var(--cyk-ink); }

/* ============================================================ 5. in-page alert boxes (Bootstrap .alert) ======== */
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px !important; border: 0 !important; border-radius: 14px !important;
  font-family: var(--cy-font, Inter, sans-serif); font-size: 14px; line-height: 1.5; animation: cyk-pop .4s var(--cyk-spring) both; }
.alert-success { background: var(--cy-success-50) !important; color: var(--cy-success-800) !important; box-shadow: inset 0 0 0 1px var(--cy-success-200); }
.alert-danger, .alert-error { background: var(--cy-critical-50) !important; color: var(--cy-critical-700) !important; box-shadow: inset 0 0 0 1px var(--cy-critical-200); }
.alert-warning { background: var(--cy-warning-50) !important; color: var(--cy-warning-700) !important; box-shadow: inset 0 0 0 1px var(--cy-warning-200); }
.alert-info, .alert-primary { background: var(--cy-info-50) !important; color: var(--cy-info-700) !important; box-shadow: inset 0 0 0 1px var(--cy-info-200); }
@media (prefers-reduced-motion: reduce) { .alert { animation: none; } }

/* ============================================================ 6. D-318 page bits ============================== */
/* claims: which route to use */
.ca-help__route { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--cy-info-50); color: var(--cy-info-800); box-shadow: inset 0 0 0 1px var(--cy-info-200); text-align: left; }
.ca-help__route .cy-icon { flex: none; width: 20px; height: 20px; color: var(--cy-info-600); margin-top: 1px; }
.ca-help__route a { color: var(--cy-info-700); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }