/* Shared card artwork is independent of the app's light/dark surface palette.
   Keep legacy design IDs so saved orders and admin availability remain valid. */
.design-black, .card-design-option.black {
  --bank-card-art: url("assets/cards/glass-smoke-v1.webp");
  --bank-card-ink: #f8fafc;
  --bank-card-muted: #e2e8ee;
  --bank-card-number: #f8fafc;
  --bank-card-logo-filter: grayscale(1) brightness(0) invert(1);
}
.design-light, .card-design-option.light {
  --bank-card-art: url("assets/cards/glass-ice-v1.webp");
  --bank-card-ink: #10214e;
  --bank-card-muted: #374967;
  --bank-card-number: #10214e;
  --bank-card-logo-filter: none;
}
.design-wave, .card-design-option.wave {
  --bank-card-art: url("assets/cards/glass-cobalt-v1.webp");
  --bank-card-ink: #fff;
  --bank-card-muted: #edf6ff;
  --bank-card-number: #10214e;
  --bank-card-logo-filter: brightness(0) invert(1);
}

/* These surface properties intentionally supersede legacy theme gradients. */
:is(.physical-card, .physical-card-preview, .admin-card-preview,
    .card-design-option > i, .pending-card-thumb, .card-thumb, .mini-card) {
  background: var(--bank-card-art, url("assets/cards/glass-smoke-v1.webp")) center / cover no-repeat !important;
  color: var(--bank-card-ink, #fff) !important;
  border: 1px solid #ffffff80 !important;
  box-shadow: 0 10px 24px #152c471c, inset 0 0 0 1px #ffffff35 !important;
  overflow: hidden;
  transition: box-shadow .2s ease !important;
}
html body #screen-card-detail #card-hero,
html body #login-screen .physical-card-preview,
html body .card-product .admin-card-preview {
  position: relative;
  container-type: inline-size;
  flex: none;
  isolation: isolate;
  display: block;
  padding: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.586;
  border-radius: 18px;
  direction: ltr;
}
html body #screen-card-detail #card-hero { width: min(100%, 400px); margin: 14px auto 20px; }
html body #login-screen .physical-card-preview { width: min(100%, 330px); margin: 14px auto 22px; }
html body #login-screen .physical-card-preview.tracking-card-mini { width: min(100%, 280px); }
html body .card-product .admin-card-preview { width: 100%; margin: 0; border-radius: 9px; }
html body .card-product-heading { margin: 14px 0 0; font-size: 17px; font-weight: 700; }

:is(.physical-card, .physical-card-preview, .admin-card-preview)::before,
:is(.physical-card, .physical-card-preview, .admin-card-preview)::after {
  display: none !important;
}
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) > .card-top {
  position: absolute;
  inset: 10% 8% auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  margin: 0;
  padding: 0;
}
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) .card-brand {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  direction: rtl;
  color: var(--bank-card-ink) !important;
  font-family: "Vazirmatn Bold", Tahoma, sans-serif;
  font-size: clamp(11px, 5.4cqw, 20px) !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) .card-brand img {
  display: block;
  width: 12cqw;
  height: auto;
  object-fit: contain;
  filter: var(--bank-card-logo-filter);
}
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) .card-brand span {
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1;
}
html body #screen-card-detail #card-hero #card-detail-state {
  margin: 0;
  padding: 3px 8px;
  border: 1px solid #ffffff55;
  border-radius: 7px;
  background: #ffffffde;
  color: #175a46;
  font-size: clamp(9px, 3cqw, 11px);
  font-style: normal;
  line-height: 1.6;
}
html body #screen-card-detail #card-hero.frozen #card-detail-state { color: #343e51; background: #e8edf4ed; }
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) > .card-hardware {
  position: absolute;
  top: 33%;
  left: 8%;
  right: auto;
  display: flex;
  align-items: center;
  gap: 3cqw;
  margin: 0;
  padding: 0;
  direction: ltr;
}
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) .chip {
  display: block;
  width: 13cqw;
  height: 10cqw;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: url("assets/cards/chip.svg") center / contain no-repeat;
  box-shadow: none;
}
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) .chip::before,
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) .chip::after { display: none; }
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview, .card-product .admin-card-preview) > .card-hardware svg {
  width: 6cqw;
  height: 6cqw;
  color: var(--bank-card-ink) !important;
  opacity: .9;
}
html body #screen-card-detail #card-hero #card-detail-number,
html body #login-screen .physical-card-preview > strong,
html body .admin-card-preview .bank-card-number {
  position: absolute;
  inset: auto auto 21% 8%;
  display: block;
  max-width: 84%;
  width: max-content;
  margin: 0;
  padding: 3px 0;
  font-family: "Vazirmatn Medium", Tahoma, sans-serif;
  font-size: clamp(11px, 4.4cqw, 18px);
  font-weight: 600;
  font-style: normal;
  letter-spacing: .06em;
  line-height: 1.4;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  white-space: nowrap;
  color: var(--bank-card-number) !important;
  text-shadow: none;
}
html body #screen-card-detail #card-hero.design-wave #card-detail-number,
html body #login-screen .physical-card-preview.design-wave > strong {
  padding: 3px 9px;
  border: 1px solid #ffffff88;
  border-radius: 6px;
  background: #f1f8fff0;
}
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview) > footer {
  position: absolute;
  inset: auto 8% 8% auto;
  max-width: 80%;
  display: block;
  margin: 0;
  padding: 0;
  direction: rtl;
  text-align: right;
}
html body :is(#screen-card-detail #card-hero, #login-screen .physical-card-preview) > footer :is(span, strong) {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--bank-card-ink) !important;
  font-size: clamp(10px, 3.7cqw, 14px);
  font-weight: 500;
  letter-spacing: 0;
}
html body #screen-card-detail #card-hero .card-holder small { display: none; }

/* Catalog and thumbnails use the same source image and original vector mark. */
html body .card-product {
  grid-template-columns: clamp(88px, 8vw, 112px) minmax(0, 1fr) 30px;
  gap: 12px;
  align-content: start;
}
html body .card-product > .admin-card-preview { grid-column: 1; }
html body .card-product > div:nth-child(2) { grid-column: 2; }
html body .card-product > .switch { grid-column: 3; margin-top: 2px; }
html body .admin-card-preview .bank-card-number { bottom: 11%; }
html body .card-design-option { min-width: 0; gap: 7px; padding: 7px; }
html body .card-design-option > i { height: auto; aspect-ratio: 1.586; border-radius: 7px; }
html body .card-design-option > span { line-height: 1.7; }
html body .card-design-option > small { font-size: 8px; line-height: 1.8; }
:is(.card-design-option > i, .mini-card, .card-thumb, .pending-card-thumb)::before {
  content: "" !important;
  position: absolute;
  inset: 33% auto auto 8% !important;
  width: 13% !important;
  height: 16% !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/cards/chip.svg") center / contain no-repeat !important;
  transform: none !important;
}
:is(.card-design-option > i, .mini-card, .card-thumb, .pending-card-thumb)::after {
  content: "" !important;
  position: absolute;
  inset: 12% 8% auto auto !important;
  width: 18% !important;
  height: 16% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/logo-biz-mark.svg") center / contain no-repeat !important;
  filter: var(--bank-card-logo-filter);
  transform: none !important;
}
html body .card-thumb { position: relative; justify-content: flex-end; }
html body .card-thumb > span {
  color: var(--bank-card-number);
  font-size: 7px;
  line-height: 1.2;
  z-index: 1;
}
html body .pending-card-thumb.design-wave { color: var(--bank-card-number) !important; }
html body :is(.mini-card, .card-thumb, .pending-card-thumb, .card-design-option > i) {
  box-shadow: 0 3px 8px #152c471c, inset 0 0 0 1px #ffffff35 !important;
}

@font-face {
  font-family: "Bank OCR-B";
  src: url("assets/fonts/OCR-Bitcoin.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
.card-carousel-help, .card-carousel-controls { display: none; }
html:not([data-app-theme="nova"]) .card-design-option .bank-card-number,
html:not([data-app-theme="nova"]) .card-design-option .bank-card-holder { display: none; }
html body .card-product :is(.design-black, .card-design-option.black) {
  --bank-card-art: url("assets/cards/atelier-v1/graphite.png");
  --bank-card-ink: #e7e9eb;
  --bank-card-number: #e7e9eb;
  --bank-card-muted: #e7e9eb;
  --bank-card-logo-color: #cbd1d8;
  --bank-card-engraving: 0 -1px 1px #000b, 0 1px 0 #ffffff40;
}
html body .card-product :is(.design-light, .card-design-option.light) {
  --bank-card-art: url("assets/cards/atelier-v1/ice.png");
  --bank-card-ink: #163f5d;
  --bank-card-number: #163f5d;
  --bank-card-muted: #163f5d;
  --bank-card-logo-color: #244f75;
  --bank-card-engraving: 0 -1px 1px #16445c50, 0 1px 0 #ffffffe0;
}
html body .card-product :is(.design-wave, .card-design-option.wave) {
  --bank-card-art: url("assets/cards/atelier-v1/coral.png");
  --bank-card-ink: #fff1de;
  --bank-card-number: #fff1de;
  --bank-card-muted: #fff1de;
  --bank-card-logo-color: #fff0da;
  --bank-card-engraving: 0 -1px 1px #8c241580, 0 1px 0 #ffffff65;
}
html body .card-product :is(.design-forest, .card-design-option.forest) {
  --bank-card-art: url("assets/cards/atelier-v1/forest.png");
  --bank-card-ink: #e6d4a3;
  --bank-card-number: #e6d4a3;
  --bank-card-muted: #e6d4a3;
  --bank-card-logo-color: #dfc28c;
  --bank-card-engraving: 0 -1px 1px #001b13, 0 1px 0 #ffffff35;
}
html body .card-product :is(.design-pearl, .card-design-option.pearl) {
  --bank-card-art: url("assets/cards/atelier-v1/pearl.png");
  --bank-card-ink: #55415f;
  --bank-card-number: #55415f;
  --bank-card-muted: #55415f;
  --bank-card-logo-color: #62436e;
  --bank-card-engraving: 0 -1px 1px #43233c40, 0 1px 0 #fff;
}
html body .card-product .admin-card-preview {
  background: var(--bank-card-art) center / 100% 100% no-repeat !important;
  aspect-ratio: 85.6 / 53.98;
  border: 0 !important;
  border-radius: 3.74% / 5.93%;
  box-shadow: none !important;
}
html body .card-product .admin-card-preview > .card-top { inset: 12% auto auto 8%; direction: ltr; }
html body .card-product .admin-card-preview .card-brand {
  display: block;
  width: 9.36cqw;
  aspect-ratio: 119 / 61;
  background: var(--bank-card-logo-color);
  mask: url("assets/logo-biz-mark.svg") center / contain no-repeat;
}
html body .card-product .admin-card-preview .card-brand img { width: 9.36cqw; visibility: hidden; }