/*! AimsCraft — assets/css/bank-transfer.css | Developer: Shahid Malla <https://shahidmalla.com> | Owner: ElySpace —
    owner of this source code | © ElySpace. All rights reserved. */

/* =============================================================================
   Pay by bank transfer — the block partials/bank-transfer.hbs renders on the
   order confirmation and on the account's order page: the shop's account with
   a copy button per line, the UPI ID / QR, and the form that sends the UTR.
   Tokens only (tokens.css): light, dark and high contrast follow on their own.
   ========================================================================== */

.bt-wrap { margin-block: var(--sp-2) var(--sp-8); }

/* waiting for money: the panel carries the warning accent the badge does */
.bt:has(.bt__due) { border-color: color-mix(in oklab, var(--warning) 45%, var(--line)); }

.bt__due {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.bt__due .icon { color: var(--warning); flex: none; margin-block-start: .2em; }
.bt__lede { margin: 0 0 var(--sp-6); max-inline-size: 72ch; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

.bt__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px) {
  .bt__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
}

/* ── the account, one row per thing to type into the banking app ── */
.bt__rows {
  display: grid;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}
.bt__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: 48px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
}
.bt__row + .bt__row { border-block-start: 1px solid var(--line); }
.bt__key {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.bt__val {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
  min-inline-size: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: end;
}
.bt__text { min-inline-size: 0; overflow-wrap: anywhere; }
.bt__mono { font-family: var(--font-mono); letter-spacing: .02em; }
.bt__row--strong .bt__text { font-size: var(--fs-md); font-weight: 700; }
.bt__copy { flex: none; }
.bt__copy-text { display: none; }
@media (min-width: 600px) { .bt__copy-text { display: inline; } }
/* a phone: the label above, the value and its copy button on the line below */
@media (max-width: 599.98px) {
  .bt__row { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--sp-2); }
  .bt__row .bt__val { justify-content: space-between; text-align: start; }
}

/* ── UPI ── */
.bt__upi {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: var(--sp-4);
  padding: var(--sp-4);
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
}
.bt__upi .bt__val { justify-content: flex-start; text-align: start; margin-block: var(--sp-1); }
.bt__upi-text { flex: 1 1 220px; min-inline-size: 0; }
.bt__qr {
  flex: none;
  inline-size: 148px;
  block-size: 148px;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  object-fit: contain;
}
.bt__note { margin: var(--sp-4) 0 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); white-space: pre-line; }

/* ── "here is my UTR" ── */
.bt__proof { display: grid; gap: var(--sp-4); align-content: start; }
.bt__done:focus { outline: none; box-shadow: 0 0 0 var(--ring-w, 3px) var(--focus-ring); }
.bt__form {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.bt__form .field { margin: 0; }
.bt__form-title { margin: 0; color: var(--ink); font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-snug); }
.bt__file { padding-block: var(--sp-2); cursor: pointer; }
.bt__file::file-selector-button {
  margin-inline-end: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bt__form.is-loading { opacity: .7; pointer-events: none; }

/* the account page's panel has its own padding */
.account-panel.bt .bt__body { display: block; }

@media print {
  .bt__proof, .bt__copy { display: none !important; }
  .bt__grid { display: block; }
}