/* Sheer Force Pincode Checker - Frontend (compact, single-line, no layout shift) */
/* NOTE: site root font-size is 10px (Bricks 62.5%) - all rem values are sized for that. */

:root {
    /* COLOURS: change the accent / charge colour here. Each references the site's global
       brand token first (so a global brand-colour change flows through), with a hex fallback. */
    --sfpc-charcoal:  var(--sf-charcoal, #3d3d3d);
    --sfpc-brand-red: var(--sf-brand-red, #b83429);
    --sfpc-green:     var(--sf-green, #1a7f37);
    --sfpc-muted:     #8a8a86;
    --sfpc-border:    rgba(0,0,0,.18);
    --sfpc-radius:    0.6rem;
}

.sfpc-widget { margin: 1.4rem 0; }

.sfpc-widget__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 2.6rem;              /* reserves space so showing the result never shifts the page */
}

.sfpc-icon-truck {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--sfpc-muted);
}

.sfpc-field { position: relative; width: 11rem; flex-shrink: 0; }

.sfpc-input {
    width: 100%;
    height: 2.6rem;
    box-sizing: border-box;
    padding: 0 2.8rem 0 1rem;
    font-size: 1.4rem;
    color: var(--sfpc-charcoal);
    background: #fff;
    border: 1px solid var(--sfpc-border);
    border-radius: var(--sfpc-radius);
    letter-spacing: 0.04em;
}
.sfpc-input:focus {
    outline: none;
    border-color: var(--sfpc-brand-red);
    box-shadow: 0 0 0 2px rgba(184,52,41,.15);
}

.sfpc-go {
    position: absolute;
    right: 0.3rem;
    top: 0.3rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sfpc-brand-red);
    cursor: pointer;
}
.sfpc-go svg { width: 1.5rem; height: 1.5rem; }
.sfpc-go__spin {
    display: none;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid rgba(184,52,41,.25);
    border-top-color: var(--sfpc-brand-red);
    border-radius: 50%;
    animation: sfpc-spin .6s linear infinite;
}
.sfpc-widget.is-loading .sfpc-go svg { display: none; }
.sfpc-widget.is-loading .sfpc-go__spin { display: block; }
@keyframes sfpc-spin { to { transform: rotate(360deg); } }

/* Result - inline on the same row, hidden until a check returns */
.sfpc-result {
    display: none;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--sfpc-charcoal);
}
.sfpc-result.is-visible { display: flex; }
.sfpc-result svg { flex-shrink: 0; }
.sfpc-res__seg { display: inline-flex; align-items: center; gap: 0.4rem; }
.sfpc-res__ok  { color: var(--sfpc-green);     display: inline-flex; }
.sfpc-res__no  { color: var(--sfpc-brand-red); display: inline-flex; }
.sfpc-res__mut { color: var(--sfpc-muted);     display: inline-flex; }
.sfpc-free     { font-weight: 600; letter-spacing: .05em; color: var(--sfpc-green); }
.sfpc-res__amt { font-weight: 600; }

@media (max-width: 480px) {
    .sfpc-field { width: 12rem; }
    .sfpc-input { font-size: 1.6rem; }   /* 16px on mobile prevents iOS zoom */
    .sfpc-result { font-size: 1.3rem; }
}