/*
 * Form controls of the seller site and My Page (PM 2026-09-21: 「style lại tất cả select list,
 * checkbox」). The demo left checkboxes, radios and selects to the browser, so they looked different
 * on every platform and nothing like the text fields next to them. Drawn here with the demo's
 * tokens; no images (My Page's CSP allows none from data: URIs), so the select's arrow is two
 * gradients.
 *
 * Contrast (WCAG 1.4.11, 3:1 for control boundaries): the unticked border is --muted (#8a8072, 3.9:1
 * on white) and the ticked fill is --gold-deep (#7d6236, 6.2:1 against the white tick).
 */
:root { --gold-deep: #7d6236; }

/* ---------- Checkbox and radio ---------- */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--muted);
  background: #fff;
  cursor: pointer;
  vertical-align: -4px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"] { border-radius: 50%; }

/* The tick: two borders of a rotated box, scaled in when checked. */
input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 5px;
  margin-top: -3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.12s ease;
}
input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.12s ease;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked { background: var(--gold-deep); border-color: var(--gold-deep); }
input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) { border-color: var(--gold-deep); }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input[type="checkbox"][aria-invalid="true"] { border-color: #9b3a2e; outline: none; }
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { cursor: not-allowed; opacity: 0.55; }

/* The consent row: the box sits on the first line of its text. */
.consent-row input[type="checkbox"] { margin-top: 1px; }

/* ---------- Select ---------- */
.field select,
select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.4;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  /* A chevron from two gradients: no image, so no CSP exception. */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:focus { outline: 1px solid var(--gold); }
select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
select[aria-invalid="true"] { border-color: #9b3a2e; }
select:disabled { cursor: not-allowed; background-color: var(--panel); }
/* Windows high contrast / dark UI: options keep readable colours. */
select option { color: var(--ink); background: #fff; }

/* ---------- Text fields that cannot be changed (the logged-in application form) ---------- */
.field input:disabled,
.field input[readonly] {
  background: var(--panel);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink); /* iOS fades disabled text below readable contrast */
  opacity: 1;
  cursor: not-allowed;
}

/* iOS zooms the page on a focused control below 16 px. */
@media (max-width: 768px) {
  select { font-size: 16px; }
}