/* public/Styles/components.css — shared components (v3). Loaded on every page after tokens.css. */

/* ═══ Base guarantees ═══════════════════════════════ */
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid var(--orange-text);
    outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: var(--space-4); top: -60px; z-index: 2000;
    padding: var(--space-3) var(--space-4);
    background: var(--ink); color: var(--paper); border-radius: var(--radius-md);
    font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* ═══ Buttons ═══════════════════════════════════════
   Primary = orange fill + ink text (the landing page's CTA).
   Dark = ink fill + paper text. Never white text on orange (2.9:1). */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 0 var(--space-5);
    border: 1px solid transparent; border-radius: var(--radius-md);
    font: 600 var(--fs-sm)/1.2 var(--font-body);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-primary          { background: var(--orange); color: var(--ink); }
.btn-primary:hover    { background: var(--orange-hover); color: var(--ink); }
.btn-dark,
.btn-success          { background: var(--ink); color: var(--paper); }
.btn-dark:hover,
.btn-success:hover    { background: var(--green); color: var(--paper); }
.btn-outline,
.btn-secondary        { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover,
.btn-secondary:hover  { background: var(--paper-deep); color: var(--ink); }
.btn-ghost            { background: transparent; color: var(--ink); }
.btn-ghost:hover      { background: var(--paper-deep); color: var(--ink); }
/* Destructive is never the loudest option beside a safe one */
.btn-danger           { background: transparent; color: var(--bad); border-color: currentColor; }
.btn-danger:hover     { background: var(--bad-bg); color: var(--bad); }
.btn-warning          { background: var(--warn-bg); color: var(--warn); }
.btn-warning:hover    { background: #F1DFA9; color: var(--warn); }
.btn-white            { background: var(--card); color: var(--ink); }
.btn-white:hover      { background: var(--paper); }
.btn-outline-white    { background: transparent; color: var(--paper); border-color: rgba(248, 245, 238, .5); }
.btn-outline-white:hover { background: rgba(248, 245, 238, .1); color: var(--paper); }

.btn-sm   { min-height: 36px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.btn-lg   { min-height: 52px; padding: 0 var(--space-6); font-size: var(--fs-base); }
.btn-full { width: 100%; }
.btn-icon { width: 44px; padding: 0; }

/* ═══ Money — never wraps, tabular figures ═══════════ */
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ═══ Status chips / badges ══════════════════════════ */
.badge, .chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 3px 10px; border-radius: var(--radius-full);
    font: 600 var(--fs-xs)/1.4 var(--font-body);
    white-space: nowrap;
    background: var(--paper-deep); color: var(--muted);
}
.badge-primary                     { background: var(--orange-tint); color: var(--orange-text); }
.badge-success, .chip--done        { background: var(--ok-bg);   color: var(--ok); }
.badge-warning, .chip--pending     { background: var(--warn-bg); color: var(--warn); }
.badge-danger,  .chip--failed      { background: var(--bad-bg);  color: var(--bad); }
.badge-info,    .chip--active      { background: var(--info-bg); color: var(--info); }
.badge-secondary, .chip--neutral   { background: var(--paper-deep); color: var(--muted); }
.chip--ready                       { background: var(--lime); color: var(--green); }

/* ═══ Forms ══════════════════════════════════════════ */
.form-group, .field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-label, .field__label { font: 600 var(--fs-xs)/1.3 var(--font-body); color: var(--ink); }
.form-control, .form-select, .field__input {
    width: 100%; min-height: 46px; padding: 10px 14px;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    font: 400 var(--fs-base)/1.4 var(--font-body);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea.form-control, textarea.field__input { min-height: 96px; resize: vertical; }
.form-control:focus, .form-select:focus, .field__input:focus {
    outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(239, 96, 46, .25);
}
.form-control::placeholder, .field__input::placeholder { color: #8C8E83; }
.form-control[readonly] { background: var(--paper-deep); color: var(--muted); }
.field__hint  { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.field__error { font-size: var(--fs-xs); color: var(--bad); margin: 0; }
.field__error--domain { display: none; }
.field:has(.field__input:user-invalid) .field__error--domain { display: block; }
.field:has(.field__input:user-invalid) .field__hint { display: none; }
.input-group { position: relative; display: flex; align-items: stretch; width: 100%; }
.input-group .form-control { flex: 1; }

/* ═══ Alerts ═════════════════════════════════════════ */
.alert {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    font-size: var(--fs-sm); border: 1px solid transparent; margin-bottom: var(--space-4);
}
.alert-success { background: var(--ok-bg);   color: var(--ok); }
.alert-danger  { background: var(--bad-bg);  color: var(--bad); }
.alert-warning { background: var(--warn-bg); color: var(--warn); }
.alert-info    { background: var(--info-bg); color: var(--info); }

/* ═══ Toasts ═════════════════════════════════════════ */
.toast {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; position: relative; overflow: hidden;
    background: var(--ink); color: var(--paper);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
    pointer-events: auto; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--t-med), transform var(--t-med);
    font-family: var(--font-body);
}
.toast.toast--visible { opacity: 1; transform: none; }
.toast.toast--hiding  { opacity: 0; transform: translateY(-8px); }
.toast__icon { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; font-size: 15px; }
.toast--success .toast__icon { color: #B9D8A6; }
.toast--error   .toast__icon { color: #F4A48C; }
.toast--warning .toast__icon { color: #F0D27A; }
.toast--info    .toast__icon { color: var(--lime); }
.toast__content { flex: 1; min-width: 0; }
.toast__title   { margin: 0 0 2px; font-weight: 700; font-size: var(--fs-sm); }
.toast__message { margin: 0; font-size: var(--fs-sm); color: rgba(248, 245, 238, .82); line-height: 1.45; }
.toast__close {
    flex-shrink: 0; width: 32px; height: 32px; margin: -6px -8px 0 0;
    background: none; border: 0; border-radius: var(--radius-sm);
    color: rgba(248, 245, 238, .7); cursor: pointer; font-size: 14px;
}
.toast__close:hover { color: var(--paper); background: rgba(248, 245, 238, .1); }
.toast__progress {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: currentColor; transform-origin: left;
    animation: toast-progress linear forwards;
}
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 480px) {
    #toast-container { top: 12px !important; right: 12px !important; width: calc(100% - 24px) !important; }
}

/* ═══ Cards ══════════════════════════════════════════ */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden;
}
.card-header { padding: var(--space-5) var(--space-5) 0; }
.card-header h3 { margin: 0 0 var(--space-1); font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--ink); }
.card-header p  { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.card-body   { padding: var(--space-5); }
.card-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-3); }

/* ═══ Empty state ════════════════════════════════════ */
.empty {
    display: grid; place-items: center; gap: var(--space-2);
    min-height: 180px; padding: var(--space-6);
    border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
    text-align: center; color: var(--muted);
}
.empty__title { margin: 0; font: 700 var(--fs-lg)/1.3 var(--font-display); color: var(--ink); }
.empty__body  { margin: 0; font-size: var(--fs-sm); max-width: 36ch; }

/* ═══ Modals (non-Bootstrap) ═════════════════════════ */
@keyframes modalIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.modal-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: var(--space-4);
    background: rgba(37, 42, 34, .55);
}
.modal {
    position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
    display: flex; flex-direction: column;
    background: var(--card); border-radius: var(--radius-xl); padding: var(--space-6);
    box-shadow: var(--shadow-2); animation: modalIn .28s var(--ease);
}
.modal-close {
    position: absolute; top: var(--space-3); right: var(--space-3); z-index: 10;
    width: 44px; height: 44px; display: grid; place-items: center;
    background: var(--paper-deep); border: 0; border-radius: var(--radius-full);
    color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--line); }
.modal-header { margin-bottom: var(--space-4); padding-right: var(--space-8); }
.modal-header h2, .modal-header h3 { margin: 0 0 var(--space-2); font: 700 var(--fs-xl)/1.2 var(--font-display); color: var(--ink); }
.modal-header p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.modal-body { flex: 1; margin-bottom: var(--space-5); }
.modal-footer { display: flex; gap: var(--space-3); margin-top: auto; }
@media (max-width: 767px) {
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal { max-width: 100%; max-height: 88vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-5); }
}

/* ═══ Confirm dialogs built in JS (store, cart, checkout, account) ═══ */
.ui-dialog { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.ui-dialog__backdrop, .ui-dialog .modal-backdrop { position: absolute; inset: 0; z-index: 0; padding: 0; background: rgba(37, 42, 34, .55); }
.ui-dialog__panel {
    position: relative; z-index: 1; width: 100%; max-width: 400px; padding: var(--space-6);
    background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
    animation: modalIn .24s var(--ease);
}
.ui-dialog__title { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.ui-dialog__body { color: var(--muted); font-size: var(--fs-sm); }
.ui-dialog__body strong { color: var(--ink); }
.ui-dialog__note { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--paper); border-radius: var(--radius-sm); font-size: var(--fs-xs); color: var(--muted); }
.ui-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.ui-dialog__actions--stack { flex-direction: column; }

/* ═══ Segmented control ═══ */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: var(--space-4); background: var(--paper-deep); border-radius: var(--radius-md); }
.seg__btn { min-height: 40px; border: 0; border-radius: var(--radius-sm); background: none; font-weight: 600; font-size: var(--fs-sm); color: var(--muted); }
.seg__btn[aria-selected="true"], .seg__btn.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }

/* ═══ Tables ═════════════════════════════════════════ */
.table-wrapper {
    overflow-x: auto; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-4);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 0; }
.table thead th {
    padding: var(--space-3) var(--space-4); text-align: left; white-space: nowrap;
    background: var(--paper); border-bottom: 1px solid var(--line);
    font: 600 var(--fs-xs)/1.3 var(--font-body); color: var(--muted);
}
.table tbody td {
    padding: var(--space-3) var(--space-4); vertical-align: middle;
    border-bottom: 1px solid var(--line); color: var(--ink);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: var(--paper); }
.table tbody td img { border-radius: var(--radius-sm); object-fit: cover; }