/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Password Generator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Length slider ───────────────────────────────────────────────────────────── */
.slider-row {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
    margin-bottom: 1.375rem;
}
.slider-label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--text-dark);
    white-space: nowrap;
    min-width:   110px;
}
.slider-wrap {
    flex:        1;
    position:    relative;
}
.length-slider {
    -webkit-appearance: none;
    appearance:  none;
    width:       100%;
    height:      6px;
    border-radius: var(--r-pill);
    background:  var(--border);
    outline:     none;
    cursor:      pointer;
    transition:  background 0.1s;
}
.length-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:  none;
    width:       22px;
    height:      22px;
    border-radius:50%;
    background:  var(--accent);
    border:      3px solid #fff;
    box-shadow:  0 1px 4px rgba(232,98,42,0.35);
    cursor:      pointer;
    transition:  transform 0.12s, box-shadow 0.12s;
}
.length-slider::-webkit-slider-thumb:hover {
    transform:   scale(1.15);
    box-shadow:  0 2px 8px rgba(232,98,42,0.45);
}
.length-slider::-moz-range-thumb {
    width:       22px;
    height:      22px;
    border-radius:50%;
    background:  var(--accent);
    border:      3px solid #fff;
    box-shadow:  0 1px 4px rgba(232,98,42,0.35);
    cursor:      pointer;
    transition:  transform 0.12s;
}
.length-slider::-moz-range-thumb:hover { transform: scale(1.15); }

.length-display {
    font-size:   1.125rem;
    font-weight: 700;
    color:       var(--accent);
    min-width:   2.25rem;
    text-align:  right;
}

/* ── Options section label ───────────────────────────────────────────────────── */
.options-label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--text-dark);
    margin-bottom: 0.625rem;
    display:     block;
}

/* ── Checkbox group ──────────────────────────────────────────────────────────── */
.checkbox-group {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    margin-bottom:  1.375rem;
}
.checkbox-item {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
    cursor:      pointer;
    user-select: none;
    padding:     0.5rem 0.75rem;
    border:      1px solid var(--border);
    border-radius: var(--r-sm);
    background:  var(--bg);
    transition:  border-color 0.12s, background 0.12s;
}
.checkbox-item:hover {
    border-color: rgba(232,98,42,0.35);
    background:   var(--accent-lt);
}
.checkbox-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance:  none;
    width:       18px;
    height:      18px;
    border:      2px solid var(--border);
    border-radius: 4px;
    background:  var(--card);
    cursor:      pointer;
    flex-shrink: 0;
    transition:  border-color 0.12s, background 0.12s;
    position:    relative;
}
.checkbox-item input[type="checkbox"]:checked {
    background:   var(--accent);
    border-color: var(--accent);
}
.checkbox-item input[type="checkbox"]:checked::after {
    content:    '';
    position:   absolute;
    left:       3px;
    top:        0px;
    width:      6px;
    height:     10px;
    border:     2px solid #fff;
    border-top: none;
    border-left:none;
    transform:  rotate(40deg);
}
.checkbox-item input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.checkbox-text {
    font-size:   0.9rem;
    font-weight: 500;
    color:       var(--text-dark);
    flex:        1;
}
.checkbox-sample {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-size:   0.75rem;
    color:       var(--text-muted);
    background:  var(--card);
    border:      1px solid var(--border);
    border-radius: 4px;
    padding:     0.1rem 0.4rem;
}

/* ── Count stepper ───────────────────────────────────────────────────────────── */
.count-row {
    display:     flex;
    align-items: center;
    gap:         0.875rem;
    margin-bottom: 1.375rem;
}
.count-label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--text-dark);
    white-space: nowrap;
    min-width:   110px;
}
.count-stepper {
    display:     flex;
    align-items: center;
    gap:         0;
    border:      2px solid var(--border);
    border-radius: var(--r-md);
    overflow:    hidden;
    background:  var(--bg);
    transition:  border-color 0.12s;
}
.count-stepper:focus-within { border-color: var(--accent); }
.stepper-btn {
    width:       40px;
    height:      44px;
    border:      none;
    background:  transparent;
    font-size:   1.25rem;
    font-weight: 600;
    color:       var(--text-body);
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background 0.1s, color 0.1s;
    flex-shrink: 0;
}
.stepper-btn:hover { background: var(--accent-lt); color: var(--accent); }
.count-input {
    width:       52px;
    height:      44px;
    border:      none;
    border-left: 1px solid var(--border);
    border-right:1px solid var(--border);
    background:  var(--card);
    font-size:   1rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color:       var(--text-dark);
    text-align:  center;
    outline:     none;
    -moz-appearance: textfield;
}
.count-input::-webkit-inner-spin-button,
.count-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Generate button row ─────────────────────────────────────────────────────── */
.generate-row {
    margin-bottom: 1.5rem;
}

/* ── Password output rows ────────────────────────────────────────────────────── */
#output-section {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    margin-top:     0.25rem;
}

.pw-row {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.75rem 1rem;
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: var(--r-md);
    flex-wrap:     wrap;
    transition:    border-color 0.12s, box-shadow 0.12s;
}
.pw-row:hover {
    border-color: rgba(232,98,42,0.25);
    box-shadow:   0 2px 8px rgba(0,0,0,0.06);
}

.pw-text-wrap {
    flex:       1;
    min-width:  0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.pw-text {
    font-family:    'SFMono-Regular', 'Consolas', 'Courier New', monospace;
    font-size:      0.9375rem;
    font-weight:    600;
    color:          var(--text-dark);
    letter-spacing: 0.04em;
    word-break:     break-all;
    white-space:    pre;
}

.pw-meta {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
    flex-shrink: 0;
}

/* Strength bar */
.strength-bar-wrap {
    width:         80px;
    height:        6px;
    background:    var(--border);
    border-radius: var(--r-pill);
    overflow:      hidden;
    flex-shrink:   0;
}
.strength-bar {
    height:        100%;
    border-radius: var(--r-pill);
    transition:    width 0.35s ease, background 0.35s ease;
}
.strength-weak    { background: #ef4444; }
.strength-fair    { background: #f97316; }
.strength-good    { background: #eab308; }
.strength-strong  { background: #84cc16; }
.strength-vstrong { background: #16a34a; }

.strength-label {
    font-size:   0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    min-width:   62px;
    text-align:  right;
}
.strength-label.strength-weak    { color: #ef4444; }
.strength-label.strength-fair    { color: #f97316; }
.strength-label.strength-good    { color: #ca8a04; }
.strength-label.strength-strong  { color: #65a30d; }
.strength-label.strength-vstrong { color: #16a34a; }

/* Copy button per row */
.copy-btn {
    height:        36px !important;
    padding:       0 0.875rem !important;
    font-size:     0.8125rem !important;
    flex-shrink:   0;
    white-space:   nowrap;
}
.copy-btn.copied {
    color:       var(--accent) !important;
    border-color:var(--accent) !important;
    background:  var(--accent-lt) !important;
}

/* ── Copy All button row ─────────────────────────────────────────────────────── */
.copy-all-row {
    margin-top:  0.75rem;
    display:     flex;
    justify-content: flex-end;
}
#copy-all-btn {
    height:      40px;
    padding:     0 1.25rem;
    font-size:   0.875rem;
}

/* ── Privacy note ────────────────────────────────────────────────────────────── */
.privacy-note {
    display:       flex;
    align-items:   flex-start;
    gap:           0.625rem;
    margin-top:    1.25rem;
    padding:       0.875rem 1rem;
    background:    #eff6ff;
    border:        1px solid #bfdbfe;
    border-radius: var(--r-md);
    font-size:     0.8125rem;
    color:         #1e40af;
    line-height:   1.6;
}
.privacy-note-icon {
    font-size:   1rem;
    flex-shrink: 0;
    margin-top:  0.05rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .slider-row   { flex-wrap: wrap; }
    .slider-label { min-width: auto; }
    .count-row    { flex-wrap: wrap; }
    .count-label  { min-width: auto; }
    .pw-row       { flex-direction: column; align-items: flex-start; }
    .pw-meta      { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .strength-label { min-width: auto; }
    .strength-bar-wrap { width: 60px; }
}

/* cache-buster: 2026-05-24T05:06:05Z */