/* ui-polish.css — cross-viewport fixes loaded after app/mobile/desktop layers.
   Contrast (no dark text on dark panels), nested empty states, native file inputs,
   and vertical rhythm between stacked blocks. */

/* ---------- Contrast: Bootstrap defaults paint dark text inside our dark panels ---------- */
html[data-theme="dark"] .content-body .card,
html[data-theme="dark"] .content-body .card-body,
html[data-theme="dark"] .content-body .surface-card,
html[data-theme="dark"] .content-body .border,
html[data-theme="dark"] .content-body .list-group-item,
html[data-theme="dark"] .content-body .accordion-body,
html[data-theme="dark"] .content-body .modal-content,
html[data-theme="dark"] .content-body .offcanvas-body,
html[data-theme="dark"] .content-body .tab-content {
  color: var(--gray-700);
}

html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary {
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .3);
  color: #bfdbfe;
  flex-wrap: wrap;
}
html[data-theme="dark"] .alert-info strong,
html[data-theme="dark"] .alert-primary strong { color: #eff6ff; }
html[data-theme="dark"] .alert-info code,
html[data-theme="dark"] .alert-primary code {
  color: #eff6ff !important;
  background: rgba(255, 255, 255, .08) !important;
  overflow-wrap: anywhere;
}
html[data-theme="dark"] .alert-success { color: #bbf7d0; }
html[data-theme="dark"] .alert-danger { color: #fecaca; }

html[data-theme="dark"] .content-body h1,
html[data-theme="dark"] .content-body h2,
html[data-theme="dark"] .content-body h3,
html[data-theme="dark"] .content-body h4,
html[data-theme="dark"] .content-body h5,
html[data-theme="dark"] .content-body h6,
html[data-theme="dark"] .content-body .h1,
html[data-theme="dark"] .content-body .h2,
html[data-theme="dark"] .content-body .h3,
html[data-theme="dark"] .content-body .h4,
html[data-theme="dark"] .content-body .h5,
html[data-theme="dark"] .content-body .h6,
html[data-theme="dark"] .content-body .card-title,
html[data-theme="dark"] .content-body .fw-semibold,
html[data-theme="dark"] .content-body .fw-bold,
html[data-theme="dark"] .content-body .modal-title,
html[data-theme="dark"] .content-body strong,
html[data-theme="dark"] .content-body b,
html[data-theme="dark"] .content-body dt,
html[data-theme="dark"] .content-body legend {
  color: var(--gray-900);
}

html[data-theme="dark"] .content-body .text-dark,
html[data-theme="dark"] .content-body .text-body,
html[data-theme="dark"] .content-body .text-black {
  color: var(--gray-900) !important;
}

html[data-theme="dark"] .content-body .text-muted,
html[data-theme="dark"] .content-body .text-secondary,
html[data-theme="dark"] .content-body .form-text {
  color: var(--gray-500) !important;
}

html[data-theme="dark"] .content-body .border,
html[data-theme="dark"] .content-body .border-top,
html[data-theme="dark"] .content-body .border-bottom {
  border-color: rgba(151, 164, 204, .18) !important;
}

html[data-theme="dark"] .content-body .list-group-item,
html[data-theme="dark"] .content-body .accordion-item,
html[data-theme="dark"] .content-body .accordion-button {
  background: transparent;
}

/* ---------- Native file input: match the dark form controls ---------- */
input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0 12px 0 0;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid rgba(24, 231, 255, .24);
  background: rgba(24, 231, 255, .10) !important;
  color: #9be9ff !important;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]:hover::file-selector-button,
.form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
  background: rgba(24, 231, 255, .18) !important;
  border-color: rgba(24, 231, 255, .4);
  color: #c8f3ff !important;
}

input[type="file"]:focus-visible::file-selector-button {
  outline: 2px solid rgba(24, 231, 255, .6);
  outline-offset: 2px;
}

input[type="file"] {
  color: var(--gray-500);
  font-size: 13px;
  line-height: 1.4;
}

/* ---------- Empty state inside a panel: no box-in-box ---------- */
.table-wrapper > .empty-state,
.card > .empty-state,
.card-body > .empty-state,
.glass-card > .empty-state,
.table-wrapper .table td[colspan] .empty-state,
html[data-theme="dark"] .table-wrapper > .empty-state,
html[data-theme="dark"] .card > .empty-state,
html[data-theme="dark"] .card-body > .empty-state,
html[data-theme="dark"] .glass-card > .empty-state {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  max-width: none;
  width: 100%;
  border-radius: 0;
}

/* ---------- Vertical rhythm ---------- */
.wiz-title { margin-bottom: 10px !important; }
.wiz-help { margin-bottom: 18px !important; line-height: 1.55; }

.pay-amount-box {
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
}

.pay-amount-box__label {
  margin-bottom: 8px !important;
  letter-spacing: .02em;
}

.pay-amount-box__value {
  line-height: 1.15;
  margin-bottom: 4px;
}

.pay-amount-box__value + div {
  margin-top: 12px !important;
  line-height: 1.6;
  font-size: 13px !important;
}

.pay-amount-box__value + div code { padding: 2px 6px; }

.pay-field + .pay-field { margin-top: 0; }

.content-body .card + .card,
.content-body .table-wrapper + .table-wrapper,
.content-body .glass-card + .glass-card,
.content-body .payment-note + .payment-note { margin-top: 20px; }

.content-body .alert + .alert { margin-top: 12px; }

.content-body .card-body > .card + .card,
.content-body .card-body > .border + .border { margin-top: 14px; }

.content-body p:last-child { margin-bottom: 0; }

.content-body .card-body > h1:not(:first-child),
.content-body .card-body > h2:not(:first-child),
.content-body .card-body > h3:not(:first-child),
.content-body .card-body > h4:not(:first-child),
.content-body .card-body > h5:not(:first-child),
.content-body .card-body > h6:not(:first-child) { margin-top: 22px; }

.content-body .btn-block + form,
.content-body .btn-block + .btn-block,
.content-body form + .btn-block { margin-top: 12px; }

.content-body .table-wrapper + h3,
.content-body .table-wrapper + h2,
.content-body .card + h3,
.content-body .card + h2 { margin-top: 28px; }

.gift-howto {
  padding: 14px 18px;
  border-radius: 16px;
  margin: 0 0 22px;
  line-height: 1.7;
  background: rgba(99, 102, 241, .08);
  border: 1px solid rgba(99, 102, 241, .22);
  color: var(--gray-700);
}
.gift-howto b, .gift-howto strong { color: var(--gray-900); }
.gift-howto + .card,
.gift-howto + .table-wrapper,
.gift-howto + .glass-card { margin-top: 0; }

/* ---------- Low-ratio accents ---------- */
html[data-theme="dark"] .content-body code:not([class*="language-"]) {
  color: #dbe9ff;
  background: rgba(124, 176, 255, .12);
  border-radius: 6px;
  padding: 2px 6px;
}
html[data-theme="dark"] .content-body .delivered-item-row code {
  color: #eef6ff;
  background: transparent;
  border-radius: 0;
  padding: 4px 0 0;
}
html[data-theme="dark"] .app-footer-inner,
html[data-theme="dark"] .product-price-usd { color: var(--gray-500); }

/* ---------- Product cards: no backdrop-filter inside a clipped, transformed card ----------
   Chrome sometimes paints only the blurred-backdrop region and leaves the rest of the
   card (image, even the whole card) blank until the next repaint. Solid fills instead. */
.product-card .product-instant-delivery,
.product-card .product-card-stock-badge,
.product-card .product-card-favorite button,
.product-card .product-card-pin-badge {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .product-card .product-instant-delivery,
html[data-theme="dark"] .product-card .product-card-stock-badge {
  background: rgba(9, 13, 31, .94);
}
html[data-theme="dark"] .product-card .product-card-favorite button {
  background: rgba(9, 13, 31, .9);
}
.product-card,
.product-card-image-wrapper {
  isolation: isolate;
}