/* Pakstoor :: pks-address-modal.css :: v1.0-000003 :: 2026-05-25 */
/*
 * Self-contained styles for the buy-flow address picker / capture modal.
 *
 * The modal is rendered on any page that loads pks-address-modal.js
 * (item.html, deal.html, etc). The Settings page already has these
 * same styles via account.css's .settings-* rules — we deliberately
 * mirror the namespace so the form inside the modal looks identical
 * to the one on /settings, without forcing every page to load the
 * full account.css bundle.
 *
 * Only the rules the modal actually uses are included here:
 *   .settings-input  .settings-label  .settings-field  .settings-field-row
 * Plus a couple of error-state helpers.
 */

/* Form layout primitives — identical visuals to the settings form. */
.pku-modal-box .settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pku-modal-box .settings-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
/* 2026-05-25 — was 560px which left tablet portrait (641-768px)
   with cramped 2-col field rows (~300px each). Bumped to 768
   so iPad portrait stacks cleanly. */
@media (max-width: 768px) {
  .pku-modal-box .settings-field-row { grid-template-columns: 1fr; }
}
.pku-modal-box .settings-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.pku-modal-box .settings-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-standard), background var(--dur-1) var(--ease-standard);
}
.pku-modal-box .settings-input:focus {
  border-color: var(--gold);
  background: var(--bg-3);
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.10);
}
.pku-modal-box .settings-input.is-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(216, 81, 69, 0.10);
}

/* Picker-mode address card — radio + summary lines. */
.pks-addr-pick {
  /* hover/focus states; layout itself is inline-styled in the JS. */
  transition: border-color 120ms ease, background 120ms ease;
}
.pks-addr-pick:hover {
  border-color: color-mix(in srgb, var(--gold) 35%, var(--bg-4)) !important;
  background: var(--bg-3) !important;
}
.pks-addr-pick input[type="radio"]:checked + div {
  /* dim the body slightly when selected — gives a visual confirm. */
  color: var(--ink);
}