/* AKGadgets — reusable vanilla-CSS components (buttons, form fields, panels, empty states).
   Framework-independent; used by pages as they're migrated off Bootstrap (Cart/Checkout here,
   more to follow). Builds on tokens.css. */

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font: inherit;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    min-height: var(--tap-target-min);
    line-height: 1.1;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-accent-dark); color: #fff; }
.btn-primary:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
.btn-outline { background: none; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--color-surface-alt); }
.btn-text-danger { background: none; border: none; color: var(--color-danger); font-weight: 700; padding: var(--space-1) var(--space-2); min-height: auto; }
.btn-text-danger:hover { text-decoration: underline; }
.btn-block { width: 100%; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: 0.85rem; min-height: 36px; }

/* ---------- Panels ---------- */
.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-weight: 600; font-size: 0.85rem; }
.field input, .field textarea, .field select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: inherit;
    background: var(--color-surface);
    color: var(--color-text);
    min-height: var(--tap-target-min);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.field-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field-row .field { flex: 1 1 200px; }

.radio-group { display: flex; flex-direction: column; gap: var(--space-2); }
.radio-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
}
.radio-option:has(input:checked) { border-color: var(--color-accent); background: rgba(109, 40, 217, 0.06); }
.radio-option input { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-muted); }
.empty-state .icon { width: 48px; height: 48px; margin-bottom: var(--space-3); opacity: 0.4; }
.empty-state p { margin: 0 0 var(--space-4); }

/* ---------- Validation summary ---------- */
.form-errors {
    background: rgba(225, 75, 75, 0.08);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    color: var(--color-danger);
    margin-bottom: var(--space-4);
}
.form-errors ul { margin: 0; padding-left: var(--space-4); }