/* Focused, separate card customisation and ordering pages. */
.card-order-page {
  --forest: #213969;
  --forest-hover: #152b52;
  --ink: #1c2536;
  --mint: #eaf0f8;
  --mint-deep: #dce6f3;
  --lime: #b7eddc;
  --muted: #536078;
  --line: #dbe1ea;
  --font: "Instrument Sans", "Noto Sans Devanagari", "Noto Sans Kannada", sans-serif;
  min-height: 100vh;
  background: #f7f9fc;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  color-scheme: light;
}
.card-order-page ::selection { color: #163147; background: #b7eddc; }
.card-order-page :is(input, select, textarea) { accent-color: #213969; caret-color: #213969; }
.card-order-page a { text-underline-offset: 4px; }
.card-order-page :is(a,button,input,select,textarea):focus-visible { outline: 2px solid #213969; outline-offset: 4px; }
.card-order-page [hidden] { display: none !important; }
.card-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 96px; padding: 22px max(32px, calc((100% - 1060px) / 2)); border-bottom: 1px solid #dbe1ea; background: #fff; }
.card-page-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.card-page-brand img { width: 236px; height: auto; }
.card-page-help { display: inline-flex; align-items: center; min-height: 44px; color: #213969; font-size: .875rem; font-weight: 550; text-decoration: underline; }
.card-page-main { width: min(1060px, calc(100% - 64px)); margin: 0 auto; padding: 24px 0 40px; }
.card-page-back-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: #415570; font-size: .875rem; font-weight: 500; }
.card-page-back-link:hover { color: #213969; text-decoration: underline; }
.card-page-step { max-width: 640px; margin: 22px 0 30px; }
.card-page-progress { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.card-page-progress li { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 16px; color: #59677e; font-size: .875rem; line-height: 1.4; }
.card-page-progress li::after { content: ""; height: 1px; flex: 1; background: #cbd4e0; margin-left: 6px; }
.card-page-progress li:last-child { padding-right: 0; }
.card-page-progress li:last-child::after { display: none; }
.card-page-progress li > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #b9c5d6; border-radius: 50%; background: #fff; font-size: .8125rem; font-weight: 550; }
.card-page-progress li > b { font-weight: 500; }
.card-page-progress li.is-current { color: #213969; }
.card-page-progress li.is-current > span { border-color: #213969; background: #213969; color: #fff; }
.card-page-progress li.is-current > b { font-weight: 650; }
.card-page-progress li.is-complete { color: #245b50; }
.card-page-progress li.is-complete > span { border-color: #a6d9ca; background: #e0f4ed; color: #1e5549; }
.card-page-progress li.is-complete::after { background: #a7c9be; }
.card-page-heading { margin-bottom: 22px; }
.card-page-heading h1 { max-width: 28ch; margin: 0; color: #1c2536; font-size: 2.5rem; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.card-page-description { max-width: 65ch; margin: 12px 0 0; color: #536078; font-size: 1rem; line-height: 1.65; }
.card-page-reference { margin: 9px 0 0; color: #59677e; font-size: .8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card-page-reference:empty { display: none; }
.card-page-status { margin: 0 0 18px; color: #415570; font-size: .875rem; line-height: 1.65; overflow-wrap: anywhere; }
.card-page-status:empty { display: none; }
.card-page-status.card-page-error, .card-page-error { color: #a32030; }
.card-page-recovery { display: flex; flex-wrap: wrap; gap: 12px; }
.card-page-recovery:has(> :not([hidden])) { margin-bottom: 24px; }
.card-order-page .card-page-panel { min-width: 0; padding: 32px; border: 1px solid #dbe1ea; border-radius: 14px; background: #fff; }
.card-page-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 36px; }
.card-page-copy, .card-page-summary { min-width: 0; }
.card-page-summary { padding: 24px; border-radius: 12px; background: #f0f4fa; }
.card-page-summary h2, .card-page-copy h2, .card-page-panel > h2 { margin: 0 0 15px; color: #213969; font-size: 1.25rem; line-height: 1.35; font-weight: 600; letter-spacing: -.015em; }
.card-page-copy > p, .card-page-summary > p, .card-page-panel > p { max-width: 65ch; margin: 12px 0 0; color: #536078; font-size: .9375rem; line-height: 1.7; }
.card-order-page .emi-card-customizer { margin: 0; padding: 0; border: 0; }
.card-order-page .emi-card-customizer.card-page-panel { padding: 32px; border: 1px solid #dbe1ea; }
.card-order-page .emi-customise-layout { align-items: start; gap: 36px; }
.card-order-page .emi-customise-preview { min-height: 260px; padding: 26px; background: #edf3fa; }
.card-order-page .emi-account-card .emi-reference-card { width: min(100%, 360px); border-radius: 15px; position: relative; isolation: isolate; }
.card-page-summary .emi-account-card { margin-bottom: 22px; }
.card-order-page .card-page-summary .emi-account-card .emi-reference-card { width: min(100%, 300px); }
.card-order-page .emi-reference-card::after { content: ""; position: absolute; z-index: 4; inset: -40% auto -40% -100%; width: 42%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); pointer-events: none; transform: translateX(0) rotate(20deg); animation: card-page-glare 1800ms cubic-bezier(.16,1,.3,1) 350ms 1 both; }
.card-order-page .emi-reference-card { transform-style: flat; }
.card-order-page .emi-design-choice > span { min-height: 50px; }
.card-order-page .emi-customise-controls .emi-card-name-input { min-height: 50px; font-size: 1rem; }
.card-order-page .emi-card-name-error { color: #a32030; }
.card-order-page .emi-payment-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; }
.card-order-page .emi-payment-options { margin: 24px 0 0; }
.card-order-page .emi-payment-option { border-radius: 10px; }
.card-order-page .emi-payment-option.is-selected { border-color: #213969; background: #edf3fa; }
.card-order-page .emi-payment-option:has(input:disabled) { background: #f7f8fa; border-color: #dbe1ea; cursor: not-allowed; }
.card-order-page .emi-payment-option:has(input:disabled) :is(strong,small) { color: #606c7f; }
.card-payment-section { margin:28px 0 24px; }
.card-order-page .card-payment-section h2 { margin-bottom:14px; }
.card-payment-buttons { display:grid; gap:12px; }
.card-order-page .card-payment-action { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:16px; width:100%; min-width:0; min-height:122px; padding:18px 20px; border:1px solid #a5b4ca; border-radius:12px; background:#fff; color:#213969; font:inherit; text-align:left; cursor:pointer; transition:background-color 160ms ease-out,border-color 160ms ease-out; }
.card-order-page .card-payment-action:hover:not(:disabled) { background:#f0f4fa; border-color:#213969; }
.card-order-page .card-payment-action:focus-visible { outline:3px solid #213969; outline-offset:4px; }
.card-payment-action-copy { display:grid; min-width:0; gap:4px; }
.card-payment-action-copy strong { font-size:1rem; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.card-payment-action-copy small { color:#425574; font-size:.8125rem; line-height:1.6; }
.card-payment-action-total { font-size:1.25rem; font-weight:650; line-height:1.4; font-variant-numeric:tabular-nums; }
.card-order-page .card-payment-icon { display: block; width: 29px; height: 29px; margin-bottom: 3px; fill: none; stroke: #213969; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card-order-page .card-activation-flash { fill: #ffe6a5; stroke: #795415; }
.card-order-page .card-activation-flash.is-visible { animation: card-activation-pulse 2200ms ease-in-out 3; }
.card-order-page.card-page-hidden .card-activation-flash { animation-play-state: paused; }
@keyframes card-activation-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(.88); } }
.card-order-page .application-fees { margin: 0; padding: 0; border: 0; }
.card-order-page .application-fees dl > div { padding-block: 7px; font-size: .9375rem; }
.card-order-page .application-fees .application-fees-total { padding-top: 15px; }
.card-order-page .card-page-summary .application-fees { margin-top: 24px; padding-top: 21px; border-top: 1px solid #d3dce9; }
.card-order-review { display: grid; gap: 0; margin: 0; }
.card-order-review > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid #dbe1ea; }
.card-order-review dt { color: #536078; font-size: .875rem; }
.card-order-review dd { margin: 0; color: #213969; font-size: .9375rem; font-weight: 550; overflow-wrap: anywhere; }
.card-order-review dd small { display: block; margin-top: 4px; color: #536078; font-size: .8125rem; font-weight: 400; line-height: 1.6; }
.card-delivery-address { margin-top: 24px; padding-top: 22px; border-top: 1px solid #dbe1ea; color: #213969; font-size: .9375rem; line-height: 1.7; font-style: normal; overflow-wrap: anywhere; }
.card-delivery-address h2, .card-delivery-address h3 { margin: 0 0 10px; font-size: 1.125rem; line-height: 1.4; font-weight: 600; }
.card-delivery-address > p { margin: 0; white-space: pre-line; }
.card-order-note { max-width: 65ch; margin: 16px 0 0; color: #536078; font-size: .8125rem; line-height: 1.65; }
.card-order-confirmation { padding: 25px; border-radius: 12px; background: #e4f4ec; color: #205246; }
.card-order-confirmation h2, .card-order-confirmation h3 { margin: 0; color: #205246; font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.card-order-confirmation p { margin: 12px 0 0; color: #315d52; font-size: .9375rem; line-height: 1.7; }
.card-order-confirmation .icon { display: block; width: 36px; height: 36px; margin-bottom: 14px; color: #216b54; }
.card-order-page .emi-status-rows { margin-top: 18px; }
.card-order-page .emi-status-rows > div { padding-block: 14px; }
.card-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #dbe1ea; }
.card-order-page .button { gap: 12px; min-height: 50px; padding: 13px 22px; border-radius: 6px; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.card-order-page .button-primary { color: #fff; background: #213969; }
.card-order-page .button-primary:hover { background: #152b52; }
.card-order-page .button-secondary { color: #213969; background: #eaf0f8; }
.card-order-page .button-secondary:hover { background: #dbe5f2; }
.card-order-page .button:disabled, .card-order-page .button[aria-disabled="true"] { color: #5d6a7f; background: #e2e8f1; cursor: not-allowed; opacity: 1; }
.card-page-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; width: min(1060px, calc(100% - 64px)); margin: 0 auto; padding: 22px 0 30px; border-top: 1px solid #dbe1ea; color: #5b687d; font-size: .8125rem; }
.card-page-footer a { color: #213969; text-decoration: underline; overflow-wrap: anywhere; }
@keyframes card-page-glare { 0% { transform: translateX(0) rotate(20deg); opacity: 0; } 12% { opacity: 1; } 90%,100% { transform: translateX(580%) rotate(20deg); opacity: 0; } }
@media (max-width: 760px) {
  .card-order-page { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .card-page-header { min-height: 80px; padding: 16px 20px; gap: 16px; }
  .card-page-brand img { width: 205px; }
  .card-page-help { font-size: .8125rem; }
  .card-page-main { width: calc(100% - 40px); padding-top: 12px; }
  .card-page-step { margin: 16px 0 27px; }
  .card-page-progress li { gap: 7px; padding-right: 9px; font-size: .8125rem; }
  .card-page-progress li::after { margin-left: 0; }
  .card-page-progress li > span { width: 27px; height: 27px; flex-basis: 27px; font-size: .75rem; }
  .card-page-heading h1 { font-size: 2rem; }
  .card-page-description { margin-top: 10px; font-size: .9375rem; }
  .card-page-heading { margin-bottom: 20px; }
  .card-order-page .card-page-panel, .card-order-page .emi-card-customizer.card-page-panel { padding: 22px 18px; border-radius: 12px; }
  .card-page-layout, .card-order-page .emi-customise-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .card-page-summary { padding: 20px 18px; }
  .card-order-page .emi-customise-preview { min-height: 0; padding: 23px 18px; }
  .card-order-page .emi-account-card .emi-reference-card { width: min(100%, 340px); }
  .card-page-actions { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; justify-content: stretch; gap: 10px; margin: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #cbd5e3; }
  .card-page-actions > :is(a,button) { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; }
  .card-page-actions > :only-child { width: 100%; }
  .card-order-page .card-page-actions .button { min-height: 52px; padding: 12px 14px; font-size: .875rem; }
  .card-order-review > div { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 12px; }
  .card-order-page .emi-payment-option { padding: 15px 13px; }
  .card-order-page .emi-card-actions > .button { width: 100%; }
  .card-page-footer { width: calc(100% - 40px); padding-top: 20px; padding-bottom: 18px; }
}
@media (max-width: 360px) {
  .card-page-header { padding-inline: 16px; gap: 8px; }
  .card-page-brand img { width: 182px; }
  .card-page-main, .card-page-footer { width: calc(100% - 32px); }
  .card-page-progress li { gap: 5px; padding-right: 7px; font-size: .75rem; }
  .card-page-progress li > span { width: 25px; height: 25px; flex-basis: 25px; }
  .card-page-heading h1 { font-size: 1.875rem; }
  .card-order-page .card-page-panel, .card-order-page .emi-card-customizer.card-page-panel { padding-inline: 15px; }
  .card-page-actions { padding-inline: 16px; }
  .card-order-page .emi-design-choice > span { gap: 5px; padding-inline: 5px; font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card-order-page { scroll-behavior: auto; }
  .card-order-page *, .card-order-page *::before, .card-order-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card-order-page .emi-reference-card::after { content: none; }
}

.card-delivery-address > :is(strong,span) { display:block; }
.card-order-confirmation { margin-bottom:26px; }
.card-order-page .card-order-confirmation .emi-approval-check { stroke:#216b54; }
.card-order-page .emi-customise-controls > h2 { margin:0 0 10px; color:#213969; font-size:1.25rem; font-weight:600; line-height:1.4; letter-spacing:-.015em; }
.card-order-page .emi-customise-controls > .card-order-note:first-of-type { margin:0 0 24px; }
.card-order-page [aria-busy="true"] a[aria-disabled="true"] { pointer-events:none; }
.card-order-page .card-page-summary .application-fees h2 { font-size:1.125rem; }
.card-order-page .card-page-summary .application-fees-total { white-space:normal; }
@media(max-width:360px) { .card-order-page .card-page-summary .application-fees dl > div { gap:8px; font-size:.875rem; } }

/* Prepaid selection remains pending until captured payment is confirmed. */
.card-order-page .card-order-confirmation.is-payment-pending { background:#fff5d8; color:#664810; }
.card-order-page .card-order-confirmation.is-payment-pending :is(h2,p) { color:#664810; }
.card-order-page .card-order-confirmation.is-payment-held { background:#fff0f1; color:#8c2636; }
.card-order-page .card-order-confirmation.is-payment-held :is(h2,p) { color:#8c2636; }
.card-order-page .card-payment-status-icon { display:block; width:34px; height:34px; margin-bottom:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card-order-page .card-order-confirmation .card-payment-processor { margin-top:16px; font-size:.8125rem; line-height:1.6; }
.card-order-page #card-refresh-status { margin-top:22px; }

/* An explicit prepaid alternative keeps the saved COD order visible. */
.card-order-page .card-cod-prepaid { display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:22px; margin:0 0 28px; padding:28px; border-radius:12px; background:#213969; color:#fff; }
.card-cod-pay-logo { position:relative; display:grid; place-items:center; width:72px; height:72px; border:1px solid #6b83a9; border-radius:12px; }
.card-cod-pay-logo img { display:block; width:44px; height:44px; border-radius:3px; }
.card-order-page .card-cod-pay-logo .card-activation-flash { position:absolute; right:-8px; bottom:-7px; width:28px; height:28px; padding:3px; border-radius:6px; background:#213969; stroke-width:1.6; stroke-linejoin:round; }
.card-order-page .card-cod-pay-copy { min-width:0; }
.card-order-page .card-cod-prepaid h2 { margin:0; color:#fff; font-size:clamp(1.3rem,2.2vw,1.6rem); font-weight:600; line-height:1.3; letter-spacing:-.02em; text-wrap:balance; }
.card-order-page .card-cod-prepaid p { max-width:57ch; margin:10px 0 0; color:#e1eafb; font-size:.875rem; line-height:1.65; }
.card-order-page .card-cod-prepaid .card-cod-pay-choice { margin-top:12px; color:#b7eddc; font-size:.8125rem; }
.card-order-page .card-cod-prepaid .card-cod-pay-availability { margin-top:12px; color:#e1eafb; font-size:.8125rem; }
.card-cod-pay-action { display:grid; justify-items:stretch; gap:9px; }
.card-order-page .card-cod-prepaid [data-cod-pay-now]:not(:disabled) { background:#b7eddc; color:#163e3b; }
.card-order-page .card-cod-prepaid [data-cod-pay-now]:hover:not(:disabled) { background:#d6f7eb; }
.card-order-page .card-cod-prepaid [data-cod-pay-now]:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.card-cod-pay-action > span { color:#d7e3f5; font-size:.75rem; line-height:1.5; text-align:center; }
@media(max-width:880px) { .card-order-page .card-cod-prepaid { grid-template-columns:60px minmax(0,1fr); gap:18px; padding:24px; } .card-cod-pay-logo { width:60px; height:60px; } .card-cod-pay-action { grid-column:2; justify-self:start; } }
@media(max-width:520px) { .card-order-page .card-cod-prepaid { grid-template-columns:minmax(0,1fr); padding:24px 20px; gap:20px; } .card-cod-pay-action { grid-column:auto; justify-self:stretch; } .card-order-page #card-cod-pay-now { width:100%; } }

/* The yellow prepaid action stays a real button; the glare cannot intercept clicks. */
.card-order-page .card-prepaid-glare:not(:disabled) { position:relative; isolation:isolate; overflow:hidden; border-color:#c39418; background:#ffda49; color:#213969; }
.card-order-page .card-prepaid-glare:hover:not(:disabled) { background:#ffe574; color:#213969; }
.card-order-page .card-prepaid-glare:focus-visible { outline:3px solid #213969; outline-offset:4px; }
.card-order-page .card-prepaid-glare:not(:disabled)::after { content:""; position:absolute; pointer-events:none; top:-50%; bottom:-50%; left:-60%; width:35%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent); transform:translateX(0) skewX(-18deg); }
.card-order-page .card-prepaid-glare.is-visible:not(:disabled)::after { animation:card-prepaid-shine 3200ms cubic-bezier(.16,1,.3,1) 3; }
.card-order-page.card-page-hidden .card-prepaid-glare::after { animation-play-state:paused; }
.card-order-page .card-prepaid-glare .card-payment-icon { fill:#fff1aa; }
.card-order-page .card-payment-action:disabled { background:#f2f4f7; color:#526077; border-color:#cbd3df; cursor:not-allowed; }
.card-order-page .card-payment-action:disabled .card-payment-icon { stroke:#526077; }
.card-order-page .card-payment-action:disabled small { color:#526077; }
.card-order-page #card-order-form[aria-busy="true"] { cursor:progress; }
@keyframes card-prepaid-shine { 0%,18% { transform:translateX(0) skewX(-18deg); } 65%,100% { transform:translateX(600%) skewX(-18deg); } }
@media(max-width:360px) { .card-order-page .card-payment-action { padding:16px 14px; gap:12px; } }
@media(prefers-reduced-motion:reduce) { .card-order-page .card-prepaid-glare::after { content:none; } }

/* Saved-order view: one payment action, compact factual status and address. */
.is-order-confirmation .card-confirmation-layout { align-items:start; gap:40px; margin-top:0; }
.is-order-confirmation .card-order-confirmation { padding:22px; margin:0 0 28px; }
.card-confirmation-state { display:flex; align-items:flex-start; gap:12px; }
.card-confirmation-state > div { min-width:0; }
.card-confirmation-icon { display:grid; place-items:center; flex:0 0 28px; padding-top:1px; }
.card-confirmation-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card-order-page .card-confirmation-state h2 { font-size:20px; line-height:1.35; letter-spacing:-.015em; }
.card-order-page .card-confirmation-state p { margin:5px 0 0; font-size:14px; line-height:1.55; }
.card-confirmation-total { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-top:20px; padding-top:16px; border-top:1px solid #d6e4dd; }
.is-payment-pending .card-confirmation-total { border-color:#e4d5aa; }
.is-payment-held .card-confirmation-total { border-color:#e3c6cc; }
.card-confirmation-total > span { font-size:14px; }
.card-confirmation-total strong { font-size:26px; line-height:1.25; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.02em; }
.card-order-page .is-order-confirmation .card-payment-processor { display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; line-height:1.5; }
.card-payment-processor svg { width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card-order-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-order-page .card-order-section-heading h2 { margin:0; font-size:18px; font-weight:600; line-height:1.4; letter-spacing:-.01em; }
.card-status-refresh { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; margin-right:-8px; padding:8px; border:0; background:transparent; color:#213969; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.card-status-refresh:hover { background:#eaf0f8; border-radius:6px; }
.card-status-refresh svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card-order-page .is-order-confirmation #card-refresh-status { margin-top:0; }
.card-confirmation-status { margin:0; }
.card-confirmation-status > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:16px; padding-block:13px; border-bottom:1px solid #e2e6ed; }
.card-confirmation-status dt { color:#536078; font-size:14px; }
.card-confirmation-status dd { margin:0; color:#213969; font-size:14px; font-weight:550; text-align:right; overflow-wrap:anywhere; }
.card-order-address { margin-top:25px; }
.card-order-page .is-order-confirmation .card-delivery-address { margin:12px 0 0; padding:0; border:0; font-size:14px; line-height:1.65; color:#536078; }
.is-order-confirmation .card-delivery-address strong { margin-bottom:4px; color:#213969; font-size:15px; font-weight:600; }
.card-order-shopping { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:14px; color:#213969; font-size:14px; font-weight:550; text-decoration:underline; }
.card-order-shopping svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card-order-breakdown > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:14px 0; border-block:1px solid #dbe1ea; color:#213969; font-size:15px; font-weight:600; list-style:none; cursor:pointer; }
.card-order-breakdown > summary::-webkit-details-marker { display:none; }
.card-order-breakdown > summary:focus-visible { outline:2px solid #213969; outline-offset:4px; }
.card-order-breakdown > summary svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card-order-breakdown[open] > summary svg { transform:rotate(180deg); }
.card-order-breakdown .card-page-summary { margin-top:16px; }
.card-confirmation-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:0 0 24px; padding:0; border:0; text-align:center; }
.card-confirmation-actions > .button { width:100%; min-width:0; }
.card-order-page:has(.is-order-confirmation) .card-page-step { display:none; }
.card-payment-footer-note { color:#536078; font-size:12px; line-height:1.4; }
.card-payment-footer-note:empty {display:none;}
@media(min-width:900px) { .card-order-breakdown > summary { padding-top:0; min-height:44px; border-top:0; } }
@media(max-width:899px) { .is-order-confirmation .card-confirmation-layout { grid-template-columns:minmax(0,1fr); gap:20px; } }
@media(max-width:760px) {
  .card-order-page:has(.is-order-confirmation) { padding-bottom:calc(var(--saved-order-actions-height, 128px) + 16px); }
  .is-order-confirmation .card-order-confirmation { padding:18px; margin-bottom:20px; }
  .card-confirmation-total { margin-top:16px; padding-top:13px; }
  .card-confirmation-total strong { font-size:24px; }
  .card-order-address { margin-top:22px; }
  .card-confirmation-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; margin:0; border-top:1px solid #dbe1ea; padding:12px 16px calc(10px + env(safe-area-inset-bottom,0px)); text-align:center; }
  .card-confirmation-actions > .button { width:100%; min-width:0; }
  .card-confirmation-actions > .card-payment-footer-note { font-size:11px; }
  .card-order-page:has(.is-order-confirmation) .card-page-heading h1 { font-size:27px; }
  .card-order-page:has(.is-order-confirmation) .card-page-heading { margin-bottom:18px; }
}
.card-order-page .card-payment-action.card-upi-payment {display:flex;align-items:center;flex-direction:row;width:min(292px,100%);height:56px;min-height:56px;gap:9px;padding:0 16px;border:1px solid #4e4e4e;border-radius:21px;color:#fff;background:linear-gradient(180deg,#121212 0%,#050505 70%);box-shadow:0 3px 0 #a1a1a1,inset 0 1px 0 #393939;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;font-weight:520;text-align:left;}
.card-order-page .card-payment-action.card-upi-payment:hover:not(:disabled) {background:#171717;}
.card-upi-payment:focus-visible {outline:3px solid var(--color-primary,#203b6c);outline-offset:4px;}
.card-order-page .card-upi-payment .card-payment-action-total {color:#efefef;font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}
.card-order-page .card-payment-action.card-upi-payment:disabled {background:#303030;color:#fff;border-color:#505050;}
.card-upi-brand {margin-left:auto;flex:none;width:40px;height:30px;background:transparent url('/payment-gateway/upi-logo.png') center / 50px 50px no-repeat;filter:url('#card-upi-transparent') brightness(1.7);}
.card-upi-chevron {flex:none;color:#9b9b9b;}
.card-upi-payment[aria-expanded="true"] .card-upi-chevron {transform:rotate(180deg);}
.card-confirmation-actions .card-upi-payment {justify-self:start;}
.card-upi-terms {margin:16px 0 24px;font-size:12px;line-height:1.6;color:#526077;}
.card-confirmation-actions .card-upi-terms {margin:4px 0 0;font-size:12px;line-height:1.5;text-align:center;}
.card-upi-apps {position:relative;flex:none;width:32px;height:32px;overflow:hidden;border-radius:50%;background:#fff;}
.card-upi-apps i {position:absolute;inset:0;background:url('/payment-gateway/upi-app-logos.png') no-repeat;background-size:105.75px 59.4px;opacity:0;animation:card-upi-swap 9s infinite;}
.card-upi-apps i:nth-child(1) {background-position:-3.35px -13.25px;}
.card-upi-apps i:nth-child(2) {background-position:-37.55px -13.25px;animation-delay:3s;}
.card-upi-apps i:nth-child(3) {background-position:-70.85px -13.25px;animation-delay:6s;}
@keyframes card-upi-swap {0%,28%{opacity:1}33%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.card-upi-apps i{animation:none}.card-upi-apps i:first-child{opacity:1}}
.card-inline-payment {width:min(360px,100%);margin:0 auto 28px;}
.card-inline-close {display:block;min-height:44px;margin:0 0 8px auto;border:0;padding:8px 0 8px 12px;background:transparent;color:#213969;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:4px;}
.card-inline-payment iframe {display:block;width:100%;height:70px;border:0;overflow:hidden;background:transparent;}
.is-bank-payment-open .card-confirmation-actions > :not(.card-inline-payment):not(#card-resume-payment) {display:none!important;}
.card-confirmation-actions > .card-inline-payment {min-width:0;max-width:100%;margin-bottom:0;}
@media(max-width:760px) {
  .card-order-page .card-payment-action.card-upi-payment {width:100%;max-width:none;justify-self:stretch;}
  .card-order-page .card-confirmation-actions {box-sizing:border-box;inset:auto 0 0;width:auto;max-width:none;min-width:0;max-height:80vh;max-height:80dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));}
  .card-confirmation-actions > .card-inline-payment {width:100%;max-width:none;margin:0;}
  .card-confirmation-actions .card-upi-terms {overflow-wrap:anywhere;}
}

.card-upi-filter {position:absolute;pointer-events:none;}

/* The dropdown grows above the action, keeping Pay in thumb reach. */
.card-confirmation-actions > .card-inline-payment {grid-row:1;}
.card-order-page .card-payment-action.card-upi-payment {position:relative;isolation:isolate;overflow:hidden;}
.card-upi-payment::after {content:"";position:absolute;inset:0 auto 0 -45%;width:34%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.17),transparent);transform:skewX(-15deg);pointer-events:none;animation:card-upi-shine 4.8s ease-in-out infinite;}
.card-upi-payment:disabled::after,.card-page-hidden .card-upi-payment::after {animation-play-state:paused;}
@keyframes card-upi-shine {0%,65%{left:-45%;opacity:0}70%{opacity:1}95%,100%{left:115%;opacity:0}}
@media(max-width:760px) {
  .card-order-page .is-bank-payment-open .card-confirmation-actions {overflow:visible;}
  .card-confirmation-actions > .card-inline-payment {max-height:calc(80vh - 92px - env(safe-area-inset-bottom,0px));max-height:calc(80dvh - 92px - env(safe-area-inset-bottom,0px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}
  .card-inline-close {position:sticky;top:0;z-index:1;background:#fff;}
}
@media(prefers-reduced-motion:reduce){.card-upi-payment::after{content:none;animation:none}}

/* Initial card order: both choices stay within thumb reach on phones. */
.card-confirmation-actions.has-payment-choices { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.card-confirmation-actions.has-payment-choices > .sf-payu-control { display:contents; }
.has-payment-choices #card-switch-cod { grid-column:1;grid-row:1;min-height:56px; }
.has-payment-choices #card-resume-payment { grid-column:2;grid-row:1;min-height:56px; }
.has-payment-choices .sf-payu-powered { grid-column:2;grid-row:2; }
.has-payment-choices .card-payment-footer-note { grid-column:1/-1; }
@media(max-width:760px) {
  .card-order-page:has(.is-order-choice) { padding-bottom:calc(var(--saved-order-actions-height, 148px) + 16px); }
  .is-order-choice .card-payment-section {
    position:fixed; inset:auto 0 0; z-index:30; box-sizing:border-box;
    width:auto; max-width:none; min-width:0; margin:0;
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    border-top:1px solid #dbe1ea; background:#fff;
  }
  .is-order-choice #card-payment-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .is-order-choice .card-payment-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 10px; align-items:stretch; }
  .is-order-choice .card-payment-buttons > .sf-payu-control { display:contents; }
  .card-order-page .is-order-choice .card-payment-action {
    display:flex; align-items:center; justify-content:center; min-height:82px;
    height:auto; width:100%; max-width:none; gap:0; padding:12px 10px; text-align:center;
  }
  .is-order-choice #card-method-cod { grid-column:1; grid-row:1; }
  .is-order-choice #card-method-online { grid-column:2; grid-row:1; }
  .is-order-choice .sf-payu-powered { grid-column:2; grid-row:2; }
  .is-order-choice .card-payment-action-copy { gap:3px; }
  .is-order-choice .card-payment-action-copy strong { font-size:.875rem; line-height:1.4; }
  .is-order-choice .card-payment-action-total { font-size:1rem; line-height:1.4; white-space:nowrap; }
  .is-order-choice .card-payment-action .card-payment-icon,
  .is-order-choice #card-method-cod .card-payment-action-copy small { display:none; }
}

.card-upi-apps i:first-child {opacity:1;animation:none;}