/* ============================================================
   AccuLock Forms — account.css
   Prefix: alf-  (acculock forms)
   ============================================================ */

:root {
    --alf-bg:          #f5f6f8;
    --alf-surface:     #ffffff;
    --alf-border:      #e2e4e9;
    --alf-text:        #1a1d23;
    --alf-text-muted:  #6b7280;

    --alf-accent:      #1b4fd8;
    --alf-accent-soft: #eff3fd;
    --alf-danger:      #dc2626;
    --alf-danger-bg:   #fef2f2;
    --alf-success:     #16a34a;
    --alf-success-bg:  #f0fdf4;

    --alf-radius:      12px;
    --alf-radius-sm:   8px;
    --alf-shadow:      0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    --alf-font:        'Asap', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[x-cloak] { display: none !important; }

.alf-portal, .alf-portal * , .alf-portal *::before, .alf-portal *::after {
    box-sizing: border-box;
}

.alf-portal {
    font-family: var(--alf-font);
    font-size:   14px;
    line-height: 1.55;
    color:       var(--alf-text);
}

.alf-form-wrap { max-width: 90%; margin: 0 auto; }

.alf-h1 { font-size: 22px; font-weight: 700; margin-bottom: 1rem; }

.alf-card {
    background:    var(--alf-surface);
    border:        1px solid var(--alf-border);
    border-radius: var(--alf-radius);
    box-shadow:    var(--alf-shadow);
    padding:       1.5rem;
}

.alf-card--success { border-color: var(--alf-success); background: var(--alf-success-bg); }
.alf-card--success h2 { color: var(--alf-success); margin-bottom: .5rem; font-size: 18px; }

.alf-card--status h2 { margin-bottom: .5rem; font-size: 18px; }
.alf-card--submitted { border-color: #b45309; background: #fffbeb; }
.alf-card--submitted h2 { color: #b45309; }
.alf-card--approved { border-color: var(--alf-success); background: var(--alf-success-bg); }
.alf-card--approved h2 { color: var(--alf-success); }
.alf-card--rejected { border-color: var(--alf-danger); background: var(--alf-danger-bg); }
.alf-card--rejected h2 { color: var(--alf-danger); }

.alf-text-muted { color: var(--alf-text-muted); margin-bottom: 1rem; }

.alf-errors {
    background:    var(--alf-danger-bg);
    border:        1px solid var(--alf-danger);
    color:         var(--alf-danger);
    border-radius: var(--alf-radius-sm);
    padding:       1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.alf-errors ul { margin: .5rem 0 0 1.25rem; }

.alf-fieldset {
    background:    var(--alf-surface);
    border:        1px solid var(--alf-border);
    border-radius: var(--alf-radius);
    box-shadow:    var(--alf-shadow);
    padding:       1.25rem 1.5rem 1.5rem;
    margin-bottom: 1.25rem;
}

.alf-fieldset legend {
    font-weight:   600;
    font-size:     15px;
    padding:       0 .5rem;
    color:         var(--alf-accent);
}

.alf-row {
    display:        flex;
    flex-wrap:      wrap;
    gap:            1rem;
    margin-bottom:  .9rem;
    align-items:    flex-end;
}

.alf-field { flex: 1 1 200px; }
.alf-field--wide { flex: 1 1 320px; }
.alf-field--sm { max-width: 220px; }

/* Fields placed directly in a fieldset (not inside .alf-row, which already
   spaces its own children) need their own gap — e.g. Authorized Purchasers /
   Product Types / Brand of Locks, which otherwise sit flush against each other. */
.alf-fieldset > .alf-field { margin-bottom: 1.1rem; }
.alf-fieldset > .alf-field:last-child { margin-bottom: 0; }

.alf-label {
    display:       block;
    font-weight:   500;
    margin-bottom: .3rem;
    font-size:     13px;
}

.alf-required { color: var(--alf-danger); }

.alf-input, .alf-select, .alf-textarea {
    width:         100%;
    border:        1px solid var(--alf-border);
    border-radius: var(--alf-radius-sm);
    padding:       .55rem .75rem;
    font-family:   inherit;
    font-size:     14px;
    background:    #fff;
}

.alf-input:focus, .alf-select:focus, .alf-textarea:focus {
    outline:     none;
    border-color: var(--alf-accent);
    box-shadow:  0 0 0 3px var(--alf-accent-soft);
}

.alf-field-hint { color: var(--alf-text-muted); font-size: 12.5px; margin-top: .35rem; }

.alf-radio-group, .alf-checkbox-group {
    display:  flex;
    flex-wrap: wrap;
    gap:      1rem 1.5rem;
    padding-top: .4rem;
}
.alf-radio-group label, .alf-checkbox-group label {
    display:      inline-flex;
    align-items:  center;
    gap:          .4rem;
    font-weight:  normal;
    cursor:       pointer;
}

.alf-checkbox-label {
    display:      flex;
    align-items:  flex-start;
    gap:          .5rem;
    cursor:       pointer;
    font-weight:  500;
}
.alf-checkbox-label input { margin-top: .2rem; }

.alf-repeater-row {
    border:        1px dashed var(--alf-border);
    border-radius: var(--alf-radius-sm);
    padding:       .85rem;
    margin-bottom: .75rem;
}

.alf-repeater-inline {
    display:       flex;
    gap:           .5rem;
    align-items:   center;
    margin-bottom: .5rem;
}
.alf-repeater-inline .alf-input { flex: 1; }

.alf-terms {
    margin:  0 0 1.25rem 1.25rem;
    color:   var(--alf-text);
}
.alf-terms li { margin-bottom: .4rem; }

.alf-sig-pad {
    position:      relative;
    border:        2px dashed var(--alf-border);
    border-radius: var(--alf-radius-sm);
    background:    #fafbfc;
    cursor:        crosshair;
    height:        160px;
}
.alf-sig-pad--signed { border-style: solid; border-color: var(--alf-accent); }
.alf-sig-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.alf-sig-placeholder {
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    color:         var(--alf-text-muted);
    font-size:     .85rem;
    pointer-events: none;
}
.alf-sig-actions { display: flex; justify-content: flex-end; margin-top: .35rem; }

.alf-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .4rem;
    border:         1px solid transparent;
    border-radius:  var(--alf-radius-sm);
    padding:        .6rem 1.4rem;
    font-family:    inherit;
    font-size:      14px;
    font-weight:    600;
    cursor:         pointer;
    background:     #fff;
    transition:     all 160ms ease;
}
.alf-btn:disabled { opacity: .5; cursor: not-allowed; }
.alf-btn--sm { padding: .35rem .85rem; font-size: 12.5px; }

.alf-btn--primary { background: var(--alf-accent); color: #fff; }
.alf-btn--primary:hover:not(:disabled) { background: #1642b8; }

.alf-btn--ghost { border-color: var(--alf-border); color: var(--alf-text); }
.alf-btn--ghost:hover:not(:disabled) { background: var(--alf-bg); }

.alf-submit-row { display: flex; justify-content: flex-end; margin-top: 1.5rem; }

@media (max-width: 640px) {
    .alf-form-wrap { max-width: 100%; }
    .alf-row { flex-direction: column; align-items: stretch; }
    /* flex-basis is measured on the main axis, which the rule above just
       flipped to vertical — without this, "flex: 1 1 200px" turns into a
       200px min-height on every stacked field instead of a min-width. */
    .alf-row > .alf-field,
    .alf-row > .alf-field--wide,
    .alf-row > .alf-field--sm { flex: 1 1 auto; max-width: none; }
}