/* Service Care Hub — scoped styles. Every rule is nested under .scb-wrap
   so nothing here leaks into (or gets overridden by) the shop's theme. */

.scb-wrap {
    --scb-bg: #F3F1EC;
    --scb-bg-alt: #E9E4D8;
    --scb-ink: #1B1B1D;
    --scb-ink-soft: #56555A;
    --scb-accent: #FF6B1A;
    --scb-accent-dark: #D9540E;
    --scb-steel: #34424C;
    --scb-steel-light: #5B6B76;
    --scb-success: #2F8F5B;
    --scb-danger: #C0392B;
    --scb-line: #D8D2C2;

    --scb-font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --scb-font-body: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
    --scb-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    max-width: 720px;
    margin: 0 auto;
    padding: 20px 0;
    font-family: var(--scb-font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--scb-ink);
    box-sizing: border-box;
}

.scb-wrap *, .scb-wrap *::before, .scb-wrap *::after { box-sizing: border-box; }

.scb-wrap h1, .scb-wrap h2, .scb-wrap h3 {
    font-family: var(--scb-font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: var(--scb-ink);
    margin: 0 0 0.4em;
}
.scb-wrap h1 { font-size: clamp(24px, 4vw, 34px); }
.scb-wrap h2 { font-family: var(--scb-font-mono); font-size: 20px; letter-spacing: 0.02em; }
.scb-wrap p { margin: 0 0 1em; color: var(--scb-ink-soft); }

.scb-wrap .form-card {
    background: #fff;
    border: 1px solid var(--scb-line);
    border-radius: 10px;
    padding: 28px;
    max-width: 640px;
}

.scb-wrap .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.scb-wrap .form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) {
    .scb-wrap .form-grid { grid-template-columns: 1fr; }
}

.scb-wrap label {
    display: block;
    font-family: var(--scb-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--scb-ink-soft);
    margin-bottom: 6px;
}

.scb-wrap input[type="text"],
.scb-wrap input[type="tel"],
.scb-wrap input[type="date"],
.scb-wrap input[type="file"],
.scb-wrap select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #C7C1B0;
    border-radius: 6px;
    font-family: var(--scb-font-body);
    font-size: 15px;
    background: var(--scb-bg);
    color: var(--scb-ink);
}

.scb-wrap .field-hint { font-size: 12px; color: var(--scb-ink-soft); margin-top: 4px; }
.scb-wrap .required-mark { color: var(--scb-danger); }

/* Multi-machine repeater */
.scb-wrap .machines-section { margin-top: 24px; }
.scb-wrap .machines-section-label {
    display: block;
    font-family: var(--scb-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--scb-ink-soft);
    margin-bottom: 10px;
}
.scb-wrap .machine-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--scb-bg);
    border: 1px solid var(--scb-line);
    border-radius: 8px;
}
@media (max-width: 560px) {
    .scb-wrap .machine-row { grid-template-columns: 1fr; }
}
.scb-wrap .btn-remove-machine {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--scb-line);
    border-radius: 6px;
    background: #fff;
    color: var(--scb-danger);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.scb-wrap .btn-add-machine {
    background: transparent;
    border: 1px dashed var(--scb-steel-light);
    color: var(--scb-steel);
}
.scb-wrap .btn-add-machine:hover { background: var(--scb-bg-alt); }
.scb-wrap .btn-secondary { font-family: var(--scb-font-body); text-transform: none; letter-spacing: 0; }

/* Warranty terms notice, shown on the registration form */
.scb-wrap .warranty-notice {
    margin-top: 24px;
    padding: 16px 18px;
    background: #FFF8ED;
    border: 1px solid #F0DBA6;
    border-left: 4px solid var(--scb-accent);
    border-radius: 8px;
}
.scb-wrap .warranty-notice-title {
    font-family: var(--scb-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #8A5A00;
    margin-bottom: 8px;
}
.scb-wrap .warranty-notice ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #6B4A00;
}
.scb-wrap .warranty-notice li { margin-bottom: 6px; }
.scb-wrap .warranty-notice li:last-child { margin-bottom: 0; }

.scb-wrap .claim-reminder {
    margin-top: 12px;
    padding: 10px 12px;
    background: #FFF8ED;
    border: 1px solid #F0DBA6;
    border-radius: 6px;
    font-size: 12.5px;
    color: #8A5A00;
}

/* Claim warranty block, sits under each result nameplate */
.scb-wrap .scb-result-card { max-width: 460px; margin-bottom: 28px; }
.scb-wrap .claim-details {
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--scb-line);
    border-radius: 8px;
    padding: 12px 16px;
}
.scb-wrap .claim-details summary {
    cursor: pointer;
    font-family: var(--scb-font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--scb-accent-dark);
    font-weight: 600;
}
.scb-wrap .claim-form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.scb-wrap .claim-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #C7C1B0;
    border-radius: 6px;
    font-family: var(--scb-font-body);
    font-size: 14px;
    background: var(--scb-bg);
    color: var(--scb-ink);
    resize: vertical;
}
.scb-wrap .claim-box {
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
}
.scb-wrap .claim-box-muted { background: var(--scb-bg-alt); color: var(--scb-ink-soft); }
.scb-wrap .claim-box-pending { background: #FFF4E0; color: #8A5A00; border: 1px solid #F0DBA6; }
.scb-wrap .claim-status-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0,0,0,0.08);
    font-family: var(--scb-font-mono);
    font-size: 11px;
    text-transform: uppercase;
}

/* Claim roadmap */
.scb-wrap .claim-box-active { background: #fff; border: 1px solid var(--scb-line); }
.scb-wrap .claim-box-heading {
    font-family: var(--scb-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--scb-ink-soft);
    margin-bottom: 14px;
}
.scb-wrap .claim-roadmap {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}
.scb-wrap .roadmap-step {
    flex: 1 1 0;
    min-width: 84px;
    text-align: center;
    position: relative;
    padding-top: 4px;
}
.scb-wrap .roadmap-step::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--scb-line);
    z-index: 0;
}
.scb-wrap .roadmap-step:first-child::before { display: none; }
.scb-wrap .roadmap-step.roadmap-done::before { background: var(--scb-success); }
.scb-wrap .roadmap-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--scb-line);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.scb-wrap .roadmap-step.roadmap-done .roadmap-dot { background: var(--scb-success); border-color: var(--scb-success); }
.scb-wrap .roadmap-step.roadmap-current .roadmap-dot { border-color: var(--scb-accent); background: var(--scb-accent); }
.scb-wrap .roadmap-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--scb-ink-soft);
    line-height: 1.25;
}
.scb-wrap .roadmap-step.roadmap-done .roadmap-label,
.scb-wrap .roadmap-step.roadmap-current .roadmap-label { color: var(--scb-ink); }
.scb-wrap .roadmap-date {
    display: block;
    font-family: var(--scb-font-mono);
    font-size: 10.5px;
    color: var(--scb-ink-soft);
    margin-top: 2px;
}
.scb-wrap .claim-meta { font-size: 13px; margin: 14px 0 0; color: var(--scb-ink-soft); }
@media (max-width: 480px) {
    .scb-wrap .roadmap-step { min-width: 72px; }
    .scb-wrap .roadmap-label { font-size: 10.5px; }
}

/* Past service history */
.scb-wrap .claim-history { margin-top: 10px; background: #fff; border: 1px solid var(--scb-line); border-radius: 8px; padding: 10px 16px; }
.scb-wrap .claim-history summary { cursor: pointer; font-family: var(--scb-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--scb-ink-soft); }
.scb-wrap .claim-history-list { list-style: disc; margin: 10px 0 0 18px; padding: 0; font-size: 13px; color: var(--scb-ink-soft); }
.scb-wrap .claim-history-list li { margin-bottom: 4px; }

.scb-wrap .btn {
    display: inline-block;
    font-family: var(--scb-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.scb-wrap .btn-primary { background: var(--scb-accent); color: var(--scb-ink); }
.scb-wrap .btn-primary:hover { background: var(--scb-accent-dark); color: #fff; }
.scb-wrap .btn-block { width: 100%; }

.scb-wrap .alert {
    padding: 13px 16px;
    border-radius: 7px;
    font-size: 14px;
    margin-bottom: 20px;
}
.scb-wrap .alert-error { background: #FBEAE8; color: var(--scb-danger); border: 1px solid #EFC3BE; }
.scb-wrap .alert-success { background: #E9F5EE; color: var(--scb-success); border: 1px solid #BFE3CE; }

.scb-wrap .search-bar { display: flex; gap: 10px; max-width: 480px; }
.scb-wrap .search-bar input { flex: 1; }
@media (max-width: 480px) { .scb-wrap .search-bar { flex-direction: column; } }

/* Signature nameplate element */
.scb-wrap .nameplate {
    position: relative;
    background: linear-gradient(155deg, #E7E9EA 0%, #CDD1D3 45%, #DCDEDF 100%);
    border-radius: 8px;
    padding: 28px 26px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 8px 20px rgba(27,27,29,0.12);
    color: var(--scb-steel);
    max-width: 460px;
}
.scb-wrap .nameplate .rivet-tl, .scb-wrap .nameplate .rivet-tr,
.scb-wrap .nameplate .rivet-bl, .scb-wrap .nameplate .rivet-br {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #9AA0A3 70%, #6B7276 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.scb-wrap .nameplate .rivet-tl { top: 10px; left: 10px; }
.scb-wrap .nameplate .rivet-tr { top: 10px; right: 10px; }
.scb-wrap .nameplate .rivet-bl { bottom: 10px; left: 10px; }
.scb-wrap .nameplate .rivet-br { bottom: 10px; right: 10px; }

.scb-wrap .nameplate-eyebrow {
    font-family: var(--scb-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--scb-steel-light);
    margin-bottom: 4px;
}
.scb-wrap .nameplate h2 { color: var(--scb-ink); margin-bottom: 14px; }

.scb-wrap .nameplate-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--scb-font-mono);
    font-size: 13.5px;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(52,66,76,0.25);
}
.scb-wrap .nameplate-row:last-of-type { border-bottom: none; }
.scb-wrap .nameplate-row .k { color: var(--scb-steel-light); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.scb-wrap .nameplate-row .v { color: var(--scb-ink); text-align: right; font-weight: 600; }

.scb-wrap .stamp {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: var(--scb-font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 10px;
    border: 2px solid currentColor;
    border-radius: 5px;
    transform: rotate(-7deg);
}
.scb-wrap .status-active { color: var(--scb-success); }
.scb-wrap .status-expired { color: var(--scb-danger); }

@media (prefers-reduced-motion: reduce) {
    .scb-wrap * { transition: none !important; }
}