/* ==========================================================================
   dc-ui-ext.css - platform additions to dc-ui.css (foundation PR).
   dc-ui.css is the frozen design stylesheet; this file only adds what a real page needs and the design's static PNGs did not
   draw: real <input> inside the search box, native checkbox/radio/file inputs, the menu panel, sheet head/body/foot, the empty-state
   ring, focus rules for pages that use .dc-root instead of body.dc. No raw colours: every colour is a token from dc-ui.css.
   Every control keeps a 44px target and text stays 13px or more.
   ========================================================================== */

.dc [hidden], .dc-root [hidden] { display: none !important; }
.dc-noscroll { overflow: hidden; }
.dc-i { flex: none; vertical-align: middle; }

/* pages that wrap in .dc-root (not body.dc) get the same box model, focus ring and resets */
.dc-root, .dc-root *, .dc-root *::before, .dc-root *::after { box-sizing: border-box; }
.dc-root :focus-visible { outline: 2px solid var(--dc-focus); outline-offset: 2px; }
:where(.dc-root) img { display: block; max-width: 100%; }
:where(.dc-root) a { color: inherit; text-decoration: none; }
:where(.dc-root) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.dc-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; min-height: 44px; padding: 0 16px; display: flex; align-items: center; background: var(--dc-btn); color: var(--dc-btn-fg); font: 700 15px var(--dc-sans); }
.dc-skip:focus { left: 8px; }

/* header: the logo is a link; it keeps the 44px target and the design's centred position */
.dc-hdr__home { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; min-width: 44px; }
.dc-hdr__home .dc-hdr__logo { position: static; transform: none; }
.dc-studio .dc-hdr__home { position: static; transform: none; justify-content: flex-start; }
.dc-hdr--trade .dc-studio__mark { display: inline-block; }
.dc-hdr--trade .dc-hdr__logo { height: 28px; }
.dc-dtop__home { display: flex; align-items: center; min-height: 44px; }
.dc-dtop__home .dc-studio__mark { display: inline-block; }
.dc-dacts .dc-cnt { top: 4px; left: 28px; right: auto; }
@media (min-width: 1024px) { .dc-phone { display: none; } }

/* search: a real input inside the drawn box */
.dc-search svg { flex: none; }
.dc-search input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--dc-ink); font: inherit; -webkit-appearance: none; appearance: none;
}
.dc-search input::placeholder { color: var(--dc-ink-2); opacity: 1; }
.dc-search input:focus-visible { outline: none; }
.dc-search:focus-within { outline: 2px solid var(--dc-focus); outline-offset: 2px; }

/* menu panel opened by the Menu button */
.dc-menu { background: var(--dc-card); border-bottom: 1px solid var(--dc-rule); }
.dc-menu .dc-row { padding: 0 var(--dc-gutter); }

/* theme switch */
.dc-theme { max-width: 320px; }
.dc-theme button { min-width: 44px; }
.dc-theme-wrap { display: flex; align-items: center; gap: 12px; padding: 12px var(--dc-gutter); font: 600 14px var(--dc-sans); }
.dc-theme-wrap .dc-theme { flex: 1 1 220px; min-width: 220px; }

/* buttons: the visible reason beside a disabled one */
.dc-btn-why { align-self: center; font: 500 13px/18px var(--dc-sans); color: var(--dc-ink-2); }
.dc-sticky .dc-btn-why { max-width: 40%; }
.dc-btn { cursor: pointer; text-align: center; }
button.dc-btn { border: 0; }
button.dc-btn.dc-btn--sec { border: 1px solid var(--dc-ink); }

/* fields: native select keeps its arrow; the label sits above, the control is 52px */
.dc-field select { -webkit-appearance: menulist; appearance: menulist; }
.dc-field textarea { display: block; resize: vertical; line-height: 24px; }
.dc-field input[type="file"] { padding-top: 12px; }

/* check row and option row: the real input stays in the row, invisible but focusable, the drawn box shows state */
.dc-check, .dc-opt { position: relative; cursor: pointer; }
.dc-check input, .dc-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dc-check__box svg { display: none; }
.dc-check input:checked + .dc-check__box svg, .dc-check.on .dc-check__box svg { display: block; }
.dc-check input:focus-visible + .dc-check__box, .dc-opt input:focus-visible ~ .dc-opt__r { outline: 2px solid var(--dc-focus); outline-offset: 2px; }
.dc-opt:has(input:checked) { border-color: var(--dc-ink); box-shadow: inset 0 0 0 1px var(--dc-ink); }
.dc-opt input:checked ~ .dc-opt__r::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dc-ink); }

/* stepper */
.dc-stepper button[disabled] { opacity: .45; cursor: not-allowed; }

/* segmented: native buttons */
.dc-seg button { cursor: pointer; }

/* upload zone: the whole box is the label for the file input */
.dc-upload { position: relative; display: block; cursor: pointer; }
.dc-upload svg { display: block; margin: 0 auto 8px; }
.dc-upload__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dc-upload:focus-within { outline: 2px solid var(--dc-focus); outline-offset: 2px; }

/* alert */
.dc-alert > svg { flex: none; }

/* bottom sheet parts */
.dc-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 0 var(--dc-gutter); }
.dc-sheet__body { padding: 0 var(--dc-gutter) 16px; }
.dc-sheet__foot { position: sticky; bottom: 0; display: flex; gap: 12px; padding: 12px var(--dc-gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--dc-card); border-top: 1px solid var(--dc-rule); }
.dc-sheet__foot .dc-btn { flex: 1; width: auto; }
.dc-sheet:focus { outline: none; }
@media (min-width: 1024px) { .dc-sheet { max-width: 560px; left: 50%; right: auto; width: 100%; transform: translateX(-50%); } }

/* empty and error page pattern (B19) */
.dc-empty { max-width: 480px; margin: 0 auto; padding: 48px var(--dc-gutter); text-align: center; }
.dc-empty__ring { width: 72px; height: 72px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--dc-ink); border-radius: 50%; }
.dc-empty p { margin: 12px 0 0; }
.dc-empty__act { margin-top: 24px; display: flex; justify-content: center; }

/* status, steps, tabs, accordion */
.dc-stepw { margin: 0; padding: 8px var(--dc-gutter) 0; }
.dc-progress i[role="progressbar"] { display: block; }
.dc-tabs button { cursor: pointer; }
.dc-acc__h { margin: 0; font: inherit; }
.dc-acc__head { cursor: pointer; }
.dc-acc__head svg { flex: none; }
.dc-acc__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.dc-reqstatus { display: block; margin-top: 8px; color: var(--dc-ink); }
.dc-ocard--link { display: block; }
.dc-notif.dc-req { align-items: flex-start; }
.dc-notif.dc-req > div > span:not(.dc-reqstatus) { display: block; }

/* the live region for snackbars */
.dc-snack-live { position: static; }
.dc-snack a, .dc-snack button { color: inherit; }

/* reference page layout (dev-only route /dc-ui/reference) */
.dc-ref { max-width: 460px; margin: 0 auto; }
.dc-ref__h { margin: 32px var(--dc-gutter) 8px; font: 700 13px var(--dc-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dc-ink-2); }
.dc-ref__box { position: relative; border-top: 1px solid var(--dc-rule); border-bottom: 1px solid var(--dc-rule); padding: 0 0 16px; }
.dc-ref__box--static .dc-sticky, .dc-ref__box--static .dc-tabbar, .dc-ref__box--static .dc-snack { position: relative; bottom: auto; left: auto; right: auto; }
.dc-ref__box--static .dc-snack { margin: 0 var(--dc-gutter); }
.dc-ref__box--static .dc-sheet { position: relative; left: auto; right: auto; bottom: auto; transform: none; max-width: none; border-radius: 16px 16px 0 0; }
.dc-ref__swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 var(--dc-gutter); }
.dc-ref__sw { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--dc-rule); border-radius: 4px; background: var(--dc-card); font: 500 13px/16px var(--dc-sans); }
.dc-ref__sw i { width: 28px; height: 28px; flex: none; border: 1px solid var(--dc-edge); border-radius: 4px; }
.dc-ref--wide { max-width: 1280px; }
@media (min-width: 1024px) { .dc-ref { max-width: 1280px; } .dc-ref__box { padding-bottom: 24px; } }

/* studio bar on desktop: the .dc-dtop bar without a search field; the words Notifications and Account at the right */
.dc-dtop--bare { grid-template-columns: 260px 1fr auto; height: 84px; }
.dc-dtop--bare .dc-dacts { align-items: center; }
.dc-dtop--bare .dc-studio__mark img { height: 40px; }
.dc-theme-wrap { flex-wrap: wrap; }
.dc-theme button { padding: 0 12px; white-space: nowrap; }
/* a long button label wraps instead of pushing the page wider than a 320px screen (400% zoom) */
.dc-btn--inline { max-width: 100%; white-space: normal; padding-top: 8px; padding-bottom: 8px; }
/* the desktop bar sets its own text colour, so a studio bar (always Charcoal) keeps its role word readable inside a Stone page */
.dc-dtop { color: var(--dc-ink); }

/* ==========================================================================
   Kit update of 23 Oct (design/v2/states_css.py, guidelines section 05): button and feedback states, bars drawn as inset shadows,
   timeline connector, neutral snackbar, black Charcoal footer, no unread dot. Hover only where the device has hover; pressed scales
   to .98; motion 120 to 160 ms ease-out; nothing moves under prefers-reduced-motion. Colours are tokens from dc-ui.css.
   ========================================================================== */
.dc-hdr__home, .dc-dtop__home, .dc-avatar, .dc-tabbar a, .dc-footer__links a, .dc-dfooter a, .dc-tog, .dc-snack a, .dc-snack button, .dc-skip, .dc-studio a,
.dc-btn, .dc-chip, .dc-ico, .dc-opt, .dc-tier, .dc-seg button, .dc-tabs a, .dc-tabs button, .dc-nav a, .dc-dnav a, .dc-dacts a, .dc-field input, .dc-field select, .dc-field textarea,
.dc-check__box, .dc-upload, .dc-acc__head, .dc-link, .dc-menu .dc-row, .dc-ocard--link, .dc-notif {
  transition: background-color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out, color 140ms ease-out, transform 120ms ease-out, text-decoration-thickness 120ms ease-out;
}
.dc-btn, .dc-chip { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .dc-btn:not(.dc-btn--sec):not(.dc-btn--dis):not([disabled]):not([aria-disabled="true"]):not(.dc-loading):hover { background: var(--dc-btn-hover); transform: translateY(-1px); box-shadow: var(--dc-lift); }
  .dc-btn--sec:not(.dc-btn--dis):not([disabled]):not([aria-disabled="true"]):not(.dc-loading):hover { background: var(--dc-tint-hover); transform: translateY(-1px); box-shadow: var(--dc-lift); }
  .dc-chip:hover { border-color: var(--dc-ink); background: var(--dc-tint-hover); }
  .dc-chip.on:hover, .dc-chip[aria-pressed="true"]:hover { background: var(--dc-card); }
  .dc-ico:hover { background: var(--dc-tint-hover); border-radius: 50%; }
  .dc-link:hover, .dc-all-link a:hover, .dc-footer a:hover { text-decoration-thickness: 2px; }
  .dc-field input:hover, .dc-field select:hover, .dc-field textarea:hover { border-color: var(--dc-ink); }
  .dc-opt:hover, .dc-tier:hover { border-color: var(--dc-ink); background: var(--dc-tint-hover); }
  .dc-check:hover .dc-check__box { border-color: var(--dc-ink); }
  .dc-seg button:not([aria-pressed="true"]):hover, .dc-tabs a:not([aria-current]):hover, .dc-tabs button:not([aria-selected="true"]):hover,
  .dc-nav a:hover, .dc-dnav a:hover, .dc-dacts a:hover, .dc-acc__head:hover, .dc-menu .dc-row:hover { background: var(--dc-tint-hover); }
  .dc-ocard--link:hover { transform: translateY(-1px); box-shadow: var(--dc-lift); border-color: var(--dc-edge); background: var(--dc-card-hover); }
}
.dc-btn:not(.dc-btn--sec):not(.dc-btn--dis):not([disabled]):not([aria-disabled="true"]):not(.dc-loading):active { background: var(--dc-btn-press); transform: scale(.98); box-shadow: none; }
.dc-btn--sec:not(.dc-btn--dis):not([disabled]):not([aria-disabled="true"]):not(.dc-loading):active { background: var(--dc-tint-press); transform: scale(.98); box-shadow: none; }
.dc-chip:active { background: var(--dc-tint-press); transform: scale(.98); }
.dc-ico:active { background: var(--dc-tint-press); border-radius: 50%; transform: scale(.96); }
.dc-opt:active, .dc-tier:active, .dc-seg button:active, .dc-tabs a:active, .dc-tabs button:active, .dc-acc__head:active, .dc-menu .dc-row:active { background: var(--dc-tint-press); }
.dc-ocard--link:active { transform: translateY(1px); background: var(--dc-tint-press); box-shadow: none; }
.dc-link:active { text-decoration-thickness: 2px; opacity: .7; }

/* disabled: legible, not-allowed, the reason in words beside it */
.dc-btn[disabled], .dc-btn[aria-disabled="true"], .dc-btn--dis { opacity: 1; background: var(--dc-rule); color: var(--dc-ink-2); border: 0; cursor: not-allowed; box-shadow: none; transform: none; }
.dc-btn--sec[disabled], .dc-btn--sec[aria-disabled="true"], .dc-btn--sec.dc-btn--dis { background: transparent; border: 1px dashed var(--dc-edge); }
.dc-btn-why { display: flex; gap: 8px; align-items: flex-start; font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }

/* loading: the dots and the word share one grid cell so the button keeps its width */
.dc-lb { display: grid; }
.dc-lb > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 12px; }
.dc-btn:not(.dc-loading) .dc-lb .dc-ld { visibility: hidden; }
.dc-btn.dc-loading .dc-lb .dc-lbl { visibility: hidden; }
.dc-btn.dc-loading { cursor: progress; }
.dc-dots { display: inline-flex; gap: 4px; align-items: center; }
.dc-dots b { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: dc-dot 1s ease-in-out infinite; }
.dc-dots b:nth-child(2) { animation-delay: .15s; } .dc-dots b:nth-child(3) { animation-delay: .3s; }
@keyframes dc-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dc-btn, .dc-chip, .dc-ico, .dc-ocard--link { transform: none !important; }
  .dc-dots b { opacity: 1 !important; }
}

/* error and accent bars are inset shadows (6 to 8px), not borders, so they never push the text; error text stays ink */
.dc-field--err .dc-field__in, .dc-field--err input, .dc-field--err select, .dc-field--err textarea { border-left-width: 1px; border-left-color: var(--dc-ink); padding-left: 16px; box-shadow: inset 6px 0 0 var(--dc-bad); }
.dc-alert { border-left-width: 1px; box-shadow: inset 8px 0 0 var(--dc-ink); }
.dc-alert--bad { border-left-color: var(--dc-ink); box-shadow: inset 8px 0 0 var(--dc-bad); }

/* timeline: connector line, the current step is a thick ring with no halo, dots level with the title */
.dc-timeline li { position: relative; }
.dc-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 28px; bottom: -4px; width: 2px; background: var(--dc-rule); }
.dc-timeline li.done:not(:last-child)::before { background: var(--dc-ink); }
.dc-timeline__dot { position: relative; top: 1px; margin-top: 0; }   /* 1px optical nudge level with the 20px title line, as an offset so no margin sits off the scale */
.dc-timeline .now .dc-timeline__dot { border: 5px solid var(--dc-ink); background: var(--dc-card); box-shadow: none; }

/* snackbar: a neutral card with a 1px ink border, so it never reads as a second primary button */
.dc-snack { background: var(--dc-card); color: var(--dc-ink); border: 1px solid var(--dc-ink); box-shadow: var(--dc-lift); }

/* Charcoal footers are black with a top rule */
[data-theme="charcoal"] .dc-footer, [data-theme="charcoal"] .dc-dfooter { background: var(--dc-footer-black); border-top: 1px solid var(--dc-rule); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="stone"]) .dc-footer, :root:not([data-theme="stone"]) .dc-dfooter { background: var(--dc-footer-black); border-top: 1px solid var(--dc-rule); } }

/* order and request numbers never wrap; no unread dot anywhere: the NEW pill is the only unread signal */
.dc-num, .dc-ocard__top b, .dc-notif b .dc-status { white-space: nowrap; }
.dc-kv b { white-space: nowrap; }   /* an amount never breaks after the rupee sign; the label wraps instead */
.dc-ocard__top > b { white-space: nowrap; }
.dc-notif__dot { display: none; }

/* ==========================================================================
   Kit drift, second pass of 23 Oct (design/v2/ui.py diffed against this file): spacing snapped to 4, 8, 12, 16, 24, 32, 48 (40 only as
   the desktop gutter), switch, disabled field / chip / check / link, stepper and product-card states, aligned product prices.
   ========================================================================== */
.dc-tag { color: var(--dc-ink); }
.dc-prod { display: flex; flex-direction: column; }
.dc-prod__m { flex: 1; display: flex; flex-direction: column; }
.dc-prod__c { min-height: 36px; }
.dc-prod .dc-price { margin-top: auto; padding-top: 4px; }   /* prices line up along the bottom of a product row */

/* switch: 52 x 32 track inside a 44px target. On = filled track, check in the knob (a state is never colour alone) */
.dc-tog { display: inline-flex; align-items: center; min-height: 44px; min-width: 52px; padding: 4px 0; position: relative; cursor: pointer; }
.dc-tog__track { display: block; width: 52px; height: 32px; position: relative; border: 2px solid var(--dc-edge); border-radius: 16px; background: transparent; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
.dc-tog__knob { position: absolute; left: 6px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dc-ink); color: var(--dc-canvas); transition: left 140ms ease-out, width 140ms ease-out, height 140ms ease-out, box-shadow 140ms ease-out; }
.dc-tog__knob svg { display: none; }
.dc-tog[aria-checked="true"] .dc-tog__track { background: var(--dc-ink); border-color: var(--dc-ink); }
.dc-tog[aria-checked="true"] .dc-tog__knob { left: 22px; width: 24px; height: 24px; background: var(--dc-canvas); color: var(--dc-ink); }
.dc-tog[aria-checked="true"] .dc-tog__knob svg { display: block; }
.dc-tog:focus-visible { outline-offset: 4px; }
.dc-tog:active .dc-tog__knob { box-shadow: 0 0 0 8px var(--dc-tint-press); }
.dc-tog[disabled], .dc-tog[aria-disabled="true"] { cursor: not-allowed; }
.dc-tog[disabled] .dc-tog__track { border-style: dashed; background: transparent; }
.dc-tog[disabled] .dc-tog__knob { background: var(--dc-edge); }
.dc-tog-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; font: 500 16px var(--dc-sans); }

/* disabled field, chip, check and link: dashed, legible, not-allowed; the reason sits beside them in words */
.dc-chip--dis, .dc-chip[aria-disabled="true"] { border-style: dashed; color: var(--dc-ink-2); background: transparent; cursor: not-allowed; }
.dc-field--dis .dc-field__in, .dc-field input:disabled, .dc-field select:disabled, .dc-field textarea:disabled { background: transparent; border-style: dashed; color: var(--dc-ink-2); cursor: not-allowed; }
.dc-check--dis, .dc-check:has(input:disabled) { color: var(--dc-ink-2); cursor: not-allowed; }
.dc-check--dis .dc-check__box, .dc-check:has(input:disabled) .dc-check__box { border-style: dashed; background: transparent; }
.dc-link--dis { text-decoration: none; color: var(--dc-ink-2); cursor: not-allowed; }
.dc-link--loading { text-decoration: none; gap: 8px; cursor: progress; }

/* stepper and product card states */
.dc-stepper button { transition: background-color 140ms ease-out; }
@media (hover: hover) {
  .dc-stepper button:not([disabled]):hover { background: var(--dc-tint-hover); }
  .dc-opt:hover .dc-opt__r { border-color: var(--dc-ink); }
  .dc-prod .dc-prod__ph { transition: transform 120ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out; }
  a.dc-prod:hover .dc-prod__ph { transform: translateY(-1px); box-shadow: var(--dc-lift); border-color: var(--dc-edge); }
}
.dc-stepper button:not([disabled]):active { background: var(--dc-tint-press); }
a.dc-prod:active .dc-prod__ph { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .dc-prod .dc-prod__ph { transform: none !important; } .dc-tog__knob { transition: none; } }

/* hover and pressed tint for the links that had none (tab bar, avatar, footer link rows) */
@media (hover: hover) {
  .dc-tabbar a:not([aria-current]):hover, .dc-avatar:hover { background: var(--dc-tint-hover); }
}
.dc-tabbar a:active, .dc-avatar:active { background: var(--dc-tint-press); }