/* ==========================================================================
   Draisap primitives shared with the order form
   Cards, hero headers, pills, choice tiles, fields, switches, rows and empty
   states. The Draisap theme loads this before draisap.css; the order form
   (themes/order-forms/draisap) loads it on any other site theme, with the
   --dr-* tokens bridged in draisap-order.css, so the form looks the same
   everywhere without a second copy of these rules.
   ========================================================================== */
.dr-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 0 0 22px; }
.dr-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 20px; }
.dr-hero__copy { min-width: 0; }
.dr-hero__eyebrow { display: block; margin: 0 0 3px; color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dr-hero h1 { margin: 0; font-size: 26px; }
.dr-hero__lead { margin: 4px 0 0; color: var(--dr-ink-2); font-size: 13.5px; max-width: 760px; }
.dr-hero__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) {
    .dr-hero { grid-template-columns: auto minmax(0, 1fr); }
    .dr-hero__tools { grid-column: 1 / -1; justify-content: flex-start; }
}
.dr-card { position: relative; margin: 0 0 18px; padding: 20px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.dr-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 0 16px; }
.dr-card__head--simple { grid-template-columns: minmax(0, 1fr) auto; }
.dr-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 15px; }
.dr-card__icon--teal { background: var(--dr-teal-tint); color: var(--dr-teal); }
.dr-card__icon--violet { background: var(--dr-violet-tint); color: var(--dr-violet); }
.dr-card__icon--amber { background: var(--dr-amber-tint); color: var(--dr-amber); }
.dr-card__icon--green { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-card__icon--red { background: var(--dr-bad-tint); color: var(--dr-bad); }
.dr-card__title { margin: 0; font-size: 15px; font-weight: 800; }
.dr-card__lead { margin: 2px 0 0; color: var(--dr-ink-2); font-size: 12.5px; }
.dr-card__tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dr-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px -20px -20px; padding: 12px 16px; border-top: 1px solid var(--dr-line); border-radius: 0 0 var(--dr-radius-card) var(--dr-radius-card); background: var(--dr-soft); }
.dr-card__foot > span { color: var(--dr-ink-2); font-size: 12.5px; }
.dr-card__foot-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.dr-card__foot-buttons--start { margin-left: 0; margin-right: auto; }
.dr-card--flush { padding: 0; overflow: hidden; }
.dr-card--flush > .dr-card__head { margin: 0; padding: 18px 20px 16px; }
.dr-card--flush > .dr-card__foot { margin: 0; }
.dr-card--accent { border-color: rgba(var(--dr-accent-rgb), .35); background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-surface) 60%); }
.dr-card--soft { background: var(--dr-soft); box-shadow: none; }
.dr-sidecard { padding: 12px; }
.dr-sidecard__head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; font-size: 13px; font-weight: 800; }
.dr-sidecard__head .dr-card__icon { width: 32px; height: 32px; font-size: 13px; border-radius: 10px; }
.dr-sidecard__head .badge { margin-left: auto; }
.dr-sidecard__body { padding: 4px 8px 8px; color: var(--dr-ink-2); font-size: 13px; }
.dr-sidecard__list { display: grid; gap: 2px; }
.dr-sidecard__link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--dr-ink-2); font-size: 13px; font-weight: 600; transition: background .15s ease, color .15s ease; }
.dr-sidecard__link i { width: 18px; text-align: center; color: var(--dr-ink-3); }
.dr-sidecard__link:hover { color: var(--dr-accent); background: var(--dr-accent-tint); }
.dr-sidecard__link .badge { margin-left: auto; }
.dr-sidecard__foot { padding: 8px 8px 4px; border-top: 1px solid var(--dr-line); margin-top: 6px; }
.dr-sidecard__body .form-control, .dr-sidecard__body .btn { width: 100%; }
.dr-sidecard__body .btn + .btn { margin-top: 8px; }
.dr-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; text-align: center; color: var(--dr-ink-2); }
.dr-empty > i { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 18px; }
.dr-empty strong { color: var(--dr-ink); font-size: 14px; }
.dr-empty p { margin: 0; max-width: 420px; font-size: 13px; }
.dr-summary { display: grid; gap: 0; margin: 0; }
.dr-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--dr-line-soft); }
.dr-summary > div:last-child { border-bottom: 0; }
.dr-summary dt { margin: 0; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; }
.dr-summary dd { margin: 0; color: var(--dr-ink); font-size: 13.5px; font-weight: 700; text-align: right; }
.dr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; }
.dr-facts > div small { display: block; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-facts > div strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 800; }
.dr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-actions--end { justify-content: flex-end; }
.dr-actions--center { justify-content: center; }
input.dr-switch, input.wbams-ui-slide, .custom-switch .custom-control-input { appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 24px; margin: 0; border: 0; border-radius: 999px; background: var(--dr-control-line); vertical-align: middle; cursor: pointer; transition: background .18s ease; flex: none; }
input.dr-switch::after, input.wbams-ui-slide::after, .custom-switch .custom-control-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: var(--dr-shadow-knob); transition: transform .18s ease; }
input.dr-switch:checked, input.wbams-ui-slide:checked, .custom-switch .custom-control-input:checked { background: var(--dr-accent); }
input.dr-switch:checked::after, input.wbams-ui-slide:checked::after, .custom-switch .custom-control-input:checked::after { transform: translateX(20px); }
input.dr-switch:disabled { opacity: .5; cursor: not-allowed; }
.dr-switch-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; user-select: none; }
.dr-switch-row label { margin: 0; font-weight: 700; cursor: pointer; }
.dr-switch-row small { display: block; color: var(--dr-ink-2); font-size: 12px; font-weight: 500; }
.dr-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.dr-choice { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--dr-line); border-radius: 14px; background: var(--dr-surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; margin: 0; font-weight: 600; }
.dr-choice input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.dr-choice__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--dr-soft); color: var(--dr-ink-2); flex: none; }
.dr-choice strong { display: block; font-size: 13.5px; }
.dr-choice small { display: block; color: var(--dr-ink-2); font-size: 12px; font-weight: 500; }
.dr-choice__state { margin-left: auto; width: 20px; height: 20px; border: 2px solid var(--dr-control-line); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 10px; flex: none; }
.dr-choice:has(input:checked) { border-color: var(--dr-accent); background: var(--dr-accent-tint); }
.dr-choice:has(input:checked) .dr-choice__state { border-color: var(--dr-accent); background: var(--dr-accent); color: var(--dr-on-accent); }
.dr-choice:has(input:checked) .dr-choice__icon { background: var(--dr-surface); color: var(--dr-accent); }
.dr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.dr-fields--1 { grid-template-columns: minmax(0, 1fr); }
.dr-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dr-field { display: block; min-width: 0; margin: 0; }
.dr-field > label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.dr-field > label .optional { margin-left: 6px; color: var(--dr-ink-3); font-weight: 600; font-size: 12px; }
.dr-field .form-group { margin: 0; }
@media (max-width: 760px) {
    .dr-fields, .dr-fields--3 { grid-template-columns: minmax(0, 1fr); }
}
.dr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.dr-pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .8; }
.dr-pill i { display: none; }
.dr-pill.is-active, .dr-pill.is-paid, .dr-pill.is-completed, .dr-pill.is-open, .dr-pill.is-answered, .dr-pill.is-accepted, .dr-pill.is-delivered, .dr-pill.is-ok, .dr-pill.is-positive { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-pill.is-pending, .dr-pill.is-unpaid, .dr-pill.is-customer-reply, .dr-pill.is-payment-pending, .dr-pill.is-on-hold, .dr-pill.is-onhold, .dr-pill.is-in-progress, .dr-pill.is-inprogress, .dr-pill.is-warning, .dr-pill.is-grace, .dr-pill.is-redemption { background: var(--dr-warn-tint); color: var(--dr-warn); }
.dr-pill.is-suspended, .dr-pill.is-overdue, .dr-pill.is-terminated, .dr-pill.is-canceled, .dr-pill.is-fraud, .dr-pill.is-expired, .dr-pill.is-collections, .dr-pill.is-lost, .dr-pill.is-dead, .dr-pill.is-danger { background: var(--dr-bad-tint); color: var(--dr-bad); }
.dr-pill.is-closed, .dr-pill.is-refunded, .dr-pill.is-draft, .dr-pill.is-neutral { background: var(--dr-soft); color: var(--dr-ink-2); }
.dr-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-surface); color: var(--dr-ink); transition: border-color .15s ease; }
a.dr-row:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-ink); text-decoration: none; }
.dr-row__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 15px; flex: none; }
.dr-row__copy { flex: 1; min-width: 0; }
.dr-row__copy strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-row__copy small { display: block; color: var(--dr-ink-2); font-size: 12.5px; }
.dr-row__meta { text-align: right; font-size: 12.5px; color: var(--dr-ink-2); white-space: nowrap; }
.dr-row__meta strong { display: block; color: var(--dr-ink); font-size: 14px; }
.dr-row__arrow { color: var(--dr-ink-3); font-size: 12px; }
@media (max-width: 640px) {
    .dr-row { flex-wrap: wrap; }
    .dr-row__meta { text-align: left; }
}
.dr-prose p:last-child { margin-bottom: 0; }
.dr-pill--sm { padding: 2px 8px; font-size: 10.5px; }
.dr-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .dr-choices--3 { grid-template-columns: minmax(0, 1fr); }
}
.dr-pill[data-status="active"], .dr-pill[data-status="paid"], .dr-pill[data-status="received"], .dr-pill[data-status="completed"], .dr-pill[data-status="open"], .dr-pill[data-status="answered"], .dr-pill[data-status="accepted"], .dr-pill[data-status="delivered"], .dr-pill[data-status="ok"], .dr-pill[data-status="positive"] { background: var(--dr-ok-tint); color: var(--dr-ok); }
.dr-pill[data-status="pending"], .dr-pill[data-status="unpaid"], .dr-pill[data-status="processing"], .dr-pill[data-status="customer-reply"], .dr-pill[data-status="payment-pending"], .dr-pill[data-status="on-hold"], .dr-pill[data-status="onhold"], .dr-pill[data-status="in-progress"], .dr-pill[data-status="inprogress"], .dr-pill[data-status="warning"], .dr-pill[data-status="grace"], .dr-pill[data-status="redemption"] { background: var(--dr-warn-tint); color: var(--dr-warn); }
.dr-pill[data-status="suspended"], .dr-pill[data-status="overdue"], .dr-pill[data-status="declined"], .dr-pill[data-status="terminated"], .dr-pill[data-status="canceled"], .dr-pill[data-status="fraud"], .dr-pill[data-status="expired"], .dr-pill[data-status="collections"], .dr-pill[data-status="lost"], .dr-pill[data-status="dead"], .dr-pill[data-status="danger"] { background: var(--dr-bad-tint); color: var(--dr-bad); }
.dr-pill[data-status="closed"], .dr-pill[data-status="refunded"], .dr-pill[data-status="draft"], .dr-pill[data-status="neutral"] { background: var(--dr-soft); color: var(--dr-ink-2); }
.dr-card__tools input.dr-switch { margin: 0; }
.dr-row__meta.dr-actions { margin-left: auto; align-items: center; }
@media (max-width: 640px) {
    .dr-hero h1 { font-size: 22px; }
    .dr-hero { gap: 12px; }
    .dr-facts { gap: 14px 16px; }
    .dr-hero__tools { width: 100%; }
    .dr-hero__tools .btn { flex: 1 1 auto; justify-content: center; }
}
.dr-choices--1 { grid-template-columns: minmax(0, 1fr); }
.dr-choice__copy { display: grid; gap: 2px; min-width: 0; }
.dr-choice__copy small { color: var(--dr-ink-2); font-weight: 500; font-size: 12.5px; }
.dr-input-row { display: flex; gap: 8px; align-items: stretch; }
.dr-input-row > .form-control { flex: 1; min-width: 0; }
.dr-input-row > .btn { flex: none; white-space: nowrap; }
.dr-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dr-pills .dr-pill { text-transform: none; }
a.dr-row.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
@media (max-width: 767px) {
    .dr-input-row { flex-wrap: wrap; }
    .dr-input-row > .btn { width: 100%; }
}
.dr-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.dr-choice.is-disabled input { pointer-events: none; }
.dr-facts .dr-pill { margin-top: 2px; }