/* GENERATED from resources/views/forms/partials/_sf-form-css.blade.php — edit the partial, then run `php artisan forms:build-css`. */
/* Progress bar */
.sf-progress { margin-bottom: 1.5rem; }
.sf-progress-bar {
    height: 3px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.sf-progress-fill {
    height: 100%;
    background: var(--sf-accent);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.sf-step-indicator {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.5rem;
    text-align: right;
}

/* Chapter-segmented progress (Quiz-Funnel-Forms §2.4) — replaces .sf-progress-bar
   above when the form has ≥1 field with section_title set; .sf-step-indicator
   is shared between both variants (still shows "Step X of Y" underneath). */
.sf-chapter-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sf-accent);
    margin-bottom: 0.5rem;
    min-height: 1em;
}
.sf-chapter-segments { display: flex; gap: 4px; }
.sf-chapter-segment {
    flex: 1;
    height: 3px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.sf-chapter-segment-fill {
    height: 100%;
    background: var(--sf-accent);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Steps */
.sf-steps { position: relative; overflow: hidden; }
.sf-step { display: none; }
.sf-step.sf-step-active { display: block; }

/* Directional slide animations */
.sf-step.sf-step-active.sf-slide-forward {
    animation: sfSlideForward 0.35s ease;
}
.sf-step.sf-step-active.sf-slide-backward {
    animation: sfSlideBackward 0.35s ease;
}
@keyframes sfSlideForward {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes sfSlideBackward {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
/* Fallback for first load */
.sf-step.sf-step-active:not(.sf-slide-forward):not(.sf-slide-backward) {
    animation: sfFadeIn 0.25s ease;
}
@keyframes sfFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fields — standard mode */
.sf-field-group { margin-bottom: 1rem; }
.sf-field-group:last-child { margin-bottom: 0; }

.sf-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    /* No explicit color — inherits, same as .sf-choice-text and .sf-description.
       Standalone's own <style> block sets `body { color: var(--sf-text) }`, so
       labels there still resolve to the theme color via inheritance. The
       shortcode surfaces (regular + enhanced) paint no background of their
       own — forcing var(--sf-text) here produced illegible text whenever a
       form has no configured theme (default text_color, a dark navy meant for
       a white card) embedded on a dark host-page section. Inheriting lets the
       host page's own text color show through instead, matching how every
       other field-level text element in this file already behaves. */
}

/* white-space: pre-line — a description/help text is authored in a <textarea> in
   the form builder, so a paragraph break the author typed is deliberate. Without
   this the newline collapses to a space and multi-paragraph prose renders as one
   run-on block, which makes the `statement` field type (whose entire purpose is
   prose slides — instructions, terms, explanation) unable to hold more than a
   single paragraph. pre-line honours newlines while still collapsing runs of
   spaces, so single-line descriptions — every one of the 33 currently authored
   across the platform — render byte-identically. */
.sf-description {
    font-size: 0.9375rem;
    color: #6b7280;
    margin-bottom: 1rem;
    line-height: 1.5;
    white-space: pre-line;
}

.sf-required { color: #e53e3e; }
.sf-help-text {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: #6b7280;
    white-space: pre-line;
}
.sf-error {
    font-size: 0.8125rem;
    color: #dc2626;
    margin-top: 0.375rem;
    min-height: 0;
}
.sf-error:empty { display: none; }
/* A soft, non-blocking note — the visitor may carry on. Amber, never red:
   red reads as "you are wrong", and the one case this fires on is somebody
   whose entry we merely do not recognise. */
.sf-error.sf-error-soft { color: #b45309; }

.sf-input, .sf-select, .sf-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: border-color 0.2s ease;
    background: #fff;
    font-family: inherit;
    color: var(--sf-text);
    /* The form is dropped into pages we do not control. Without this a page
       with no box-sizing reset adds the padding and border ON TOP of the 100%. */
    box-sizing: border-box;
}
/* iPhone draws date and time fields as its own native control, which sizes to
   its content and ignores width:100% - the field ran past the card's right edge
   (card #9830). Desktop browsers draw an ordinary input, so this never shows in
   emulation, only on a real phone. Dropping the native look hands sizing back to
   the rules above; tapping still opens the iPhone date wheel. The same fix the
   signed-in app carries in layouts/app.blade.php. */
.sf-input[type="date"],
.sf-input[type="time"],
.sf-input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    /* An empty field has no text to give it height once the native look is gone. */
    min-height: calc(1.5em + 1.5rem + 4px);
}
/* iPhone centres the chosen date; every other field is left-aligned. */
.sf-input::-webkit-date-and-time-value { text-align: left; }
.sf-input:focus, .sf-select:focus, .sf-textarea:focus {
    outline: none;
    border-color: var(--sf-accent);
}
/* A keyboard user must see where they are (WCAG 2.4.7): the border colour alone is too
   faint on a pale accent. Mouse focus keeps the quieter border-only look above. */
.sf-input:focus-visible, .sf-select:focus-visible, .sf-textarea:focus-visible,
.sf-country-select:focus-visible, .sf-checkbox:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
}
/* Choice cards hide their radio/checkbox, so the ring goes on the card. */
.sf-choice-card:has(.sf-choice-input:focus-visible) {
    outline: 2px solid var(--sf-accent);
    outline-offset: 2px;
}
.sf-textarea {
    resize: vertical;
    min-height: 100px;
}

.sf-phone-wrapper { display: flex; gap: 0.5rem; }
.sf-country-select {
    width: 100px;
    min-width: 85px;
    flex-shrink: 0;
    padding: 0.75rem 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fff;
    transition: border-color 0.2s;
    color: var(--sf-text);
}
.sf-country-select:focus { outline: none; border-color: var(--sf-accent); }
.sf-phone-input { flex: 1; min-width: 0; }

.sf-checkbox-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.sf-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    accent-color: var(--sf-accent);
}
.sf-checkbox-label {
    font-size: 0.9375rem;
    cursor: pointer;
}

/* ===== Choice Cards (enhanced mode) ===== */
.sf-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sf-choice-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
}
.sf-choice-card:hover {
    border-color: #c7c9cd;
    background: #fafafa;
}
.sf-choice-card.sf-choice-selected {
    border-color: var(--sf-accent);
    background: color-mix(in srgb, var(--sf-accent) 5%, #fff);
}
.sf-choice-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.sf-choice-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    transition: all 0.15s;
}
.sf-choice-selected .sf-choice-key {
    border-color: var(--sf-accent);
    background: var(--sf-accent);
    color: #fff;
}
.sf-choice-text {
    font-size: 1rem;
    font-weight: 500;
    flex: 1;
}
.sf-choice-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
    transition: all 0.15s;
    position: relative;
}
.sf-choice-selected .sf-choice-check {
    border-color: var(--sf-accent);
    background: var(--sf-accent);
}
.sf-choice-selected .sf-choice-check::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}
.sf-choices-multi .sf-choice-check {
    border-radius: 4px;
}
.sf-choices-multi .sf-choice-selected .sf-choice-check {
    border-radius: 4px;
}
.sf-choices-multi .sf-choice-selected .sf-choice-check::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Big Yes/No cards */
.sf-choice-card-large { padding: 1.25rem 1.5rem; font-size: 1.1rem; }

/* ===== Icon-tile options (Quiz-Funnel-Forms §2.1) — swaps the letter badge
   for an emoji, otherwise the same row layout/JS hooks as a plain choice card. ===== */
.sf-choice-card-icon .sf-choice-key {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    font-size: 1.125rem;
}
.sf-choice-selected.sf-choice-card-icon .sf-choice-key {
    background: color-mix(in srgb, var(--sf-accent) 12%, #fff);
}

/* ===== Photo-card options (Quiz-Funnel-Forms §2.1) — 2-col grid, image fills
   the card, label sits in a bottom banner. Same .sf-choice-card/.sf-choice-input
   hooks, so click, auto-advance, and keyboard shortcuts all keep working. ===== */
.sf-choices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.sf-choice-card-photo {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-width: 2px;
}
.sf-choice-photo {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-color: #f3f4f6;
}
.sf-choice-photo-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--sf-accent);
    color: #fff;
}
.sf-choice-photo-label .sf-choice-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
}
.sf-choice-photo-chevron { flex-shrink: 0; opacity: 0.85; }
.sf-choice-card-photo.sf-choice-selected {
    border-color: var(--sf-accent);
    background: #fff;
}

/* Meeting-mode countdown (shown after submit in kiosk flows) */
.sf-meeting-next {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #eef2ff 0%, #ede9fe 100%);
    border: 1px solid #c7d2fe;
    text-align: center;
}
.sf-meeting-next-hint {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: #4338ca;
}
.sf-meeting-next-hint strong {
    font-size: 1.25rem;
    color: #1e1b4b;
    margin: 0 0.2rem;
}
.sf-meeting-next-btn {
    background: #4f46e5;
    color: #fff;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}
.sf-meeting-next-btn:hover { background: #4338ca; }
.sf-meeting-enter-hint {
    opacity: 0.75;
    font-weight: 400;
    font-size: 0.8rem;
}
body.sf-meeting-mode .sf-powered { display: none; }

/* Resume banner (autosave) */
.sf-resume-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.625rem 1rem;
    margin: -1.75rem -1.75rem 1.25rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.75rem 0.75rem 0 0;
    font-size: 0.85rem;
    color: #92400e;
}
.sf-resume-banner span { flex: 1; }
.sf-resume-banner button {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    transition: background 0.15s;
}
.sf-resume-yes { background: #d97706; color: #fff; }
.sf-resume-yes:hover { background: #b45309; }
.sf-resume-no { background: #fff; color: #78350f; border-color: #fde68a; }
.sf-resume-no:hover { background: #fef3c7; }

/* Rating (stars) */
.sf-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}
.sf-rating-star {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #d1d5db;
    transition: color 0.15s, transform 0.1s;
}
.sf-rating-star:hover,
.sf-rating-star.sf-rating-hover,
.sf-rating-star.sf-rating-active {
    color: #f59e0b;
}
.sf-rating-star:hover { transform: scale(1.1); }
.sf-rating-label {
    margin-left: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
    min-height: 1.25rem;
}

/* NPS (0-10 scale) */
.sf-nps {
    padding: 0.5rem 0;
}
.sf-nps-scale {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.sf-nps-cell {
    background: #f3f4f6;
    border: 1.5px solid transparent;
    border-radius: 0.5rem;
    padding: 0.75rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    font-family: inherit;
}
.sf-nps-cell:hover { transform: translateY(-2px); }
.sf-nps-cell-detractor:hover { background: #fee2e2; color: #b91c1c; }
.sf-nps-cell-passive:hover { background: #fef3c7; color: #92400e; }
.sf-nps-cell-promoter:hover { background: #d1fae5; color: #065f46; }
.sf-nps-cell.sf-nps-active {
    border-color: var(--sf-accent, #6366f1);
    background: #fff;
    color: var(--sf-accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.sf-nps-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #6b7280;
    padding: 0 0.25rem;
}
@media (max-width: 640px) {
    .sf-nps-cell { padding: 0.5rem 0; font-size: 0.8rem; }
    .sf-rating-star svg { width: 28px; height: 28px; }
}

/* Navigation */
.sf-nav {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.75rem;
}
.sf-nav-spacer { flex: 1; }
.sf-back {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem 0;
    font-family: inherit;
    transition: color 0.15s;
}
.sf-back:hover { color: #374151; }

.sf-btn {
    padding: 0.75rem 2rem;
    background-color: var(--sf-accent);
    /* --sf-accent-ink is set only by public/js/lp-form-ground.js, when it had to
       re-colour the button for the page behind a shortcode; unset = white as ever. */
    color: var(--sf-accent-ink, #fff);
    border: none;
    border-radius: var(--sf-btn-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
}
.sf-btn:hover { opacity: 0.9; }
.sf-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.sf-btn-full {
    width: 100%;
    padding: 0.875rem;
}

/* Enter hint */
.sf-enter-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
}
.sf-enter-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    font-size: 0.6875rem;
    font-family: inherit;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    color: #6b7280;
}

/* Welcome screen */
.sf-welcome { text-align: center; padding: 1rem 0; }
.sf-welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.sf-welcome-description {
    font-size: 1.0625rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.sf-welcome .sf-btn {
    padding: 0.875rem 2.5rem;
    font-size: 1.0625rem;
}

/* ===== Richer statement slides — image + testimonial (Quiz-Funnel-Forms §2.5) —
   both independently optional on a statement field; neither set = today's
   plain label/description rendering, unchanged. ===== */
.sf-statement-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin: 1rem 0;
    display: block;
}
/* A picture between the questions, and the day + month birthday pickers. */
.sf-image { margin: 0.75rem 0; line-height: 0; }
.sf-image img { border-radius: 0; }
.sf-birthday { display: flex; gap: 0.5rem; }
.sf-birthday .sf-select { flex: 1 1 0; min-width: 0; }
.sf-birthday .sf-birthday-month { flex: 2 1 0; }
.sf-testimonial {
    background: color-mix(in srgb, var(--sf-accent) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--sf-accent) 15%, #fff);
    border-radius: 10px;
    padding: 1rem 1.125rem;
    margin: 1rem 0;
}
.sf-testimonial-stars {
    color: #f59e0b;
    font-size: 0.875rem;
    letter-spacing: 1px;
    margin-bottom: 0.375rem;
}
.sf-testimonial-quote {
    font-size: 0.9375rem;
    font-style: italic;
    color: #374151;
    line-height: 1.5;
}
.sf-testimonial-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* ===== Loading interstitial (Quiz-Funnel-Forms §2.3) ===== */
.sf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 0;
    min-height: 220px;
    justify-content: center;
}
.sf-loading-ring {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
}
.sf-loading-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sf-loading-ring-track { stroke: #e5e7eb; }
.sf-loading-ring-fill {
    stroke: var(--sf-accent);
    stroke-dasharray: 251;
    stroke-dashoffset: 251;
    animation: sfLoadingRing 3s ease-out forwards;
}
@keyframes sfLoadingRing {
    to { stroke-dashoffset: 40; }
}
.sf-loading-messages {
    position: relative;
    height: 1.5rem;
    width: 100%;
}
.sf-loading-message {
    position: absolute;
    inset: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #374151;
    opacity: 0;
    animation: sfLoadingMsgFade 3s ease-in-out infinite;
}
@keyframes sfLoadingMsgFade {
    0%, 5% { opacity: 0; }
    12%, 28% { opacity: 1; }
    35%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-loading-ring-fill, .sf-loading-message { animation: none; opacity: 1; stroke-dashoffset: 40; }
    .sf-loading-message:not(:first-child) { display: none; }
}

/* Mobile */
@media (max-width: 640px) {
    .sf-input, .sf-select, .sf-textarea, .sf-checkbox { min-height: 48px; }
    .sf-country-select { width: 90px; min-width: 80px; }
        .sf-choice-card { padding: 0.75rem 1rem; }
    .sf-enter-hint { display: none; }
}

/* File upload field */
.sf-file-field { width: 100%; }
.sf-file-dropzone {
    display: block;
    cursor: pointer;
    border: 2px dashed #c7d2fe;
    border-radius: 0.875rem;
    background: #ffffff;
    padding: 2rem 1.25rem;
    text-align: center;
    transition: border-color 0.15s, background-color 0.15s;
}
.sf-file-dropzone:hover,
.sf-file-dropzone:focus-visible,
.sf-file-dropzone.sf-file-dragover {
    border-color: var(--sf-accent);
    background: #eef2ff;
    outline: none;
}
.sf-file-icon {
    display: block;
    color: var(--sf-accent);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}
.sf-file-headline { font-weight: 600; color: #111827; font-size: 0.95rem; }
.sf-file-subline { color: #6b7280; font-size: 0.8rem; margin-top: 0.25rem; }
.sf-file-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sf-file-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem;
}
.sf-file-row.sf-file-row-uploading { background: #eef2ff; border-color: #c7d2fe; }
.sf-file-row.sf-file-row-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.sf-file-row-icon { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; color: #4f46e5; flex-shrink: 0; }
.sf-file-row-meta { flex: 1; min-width: 0; }
.sf-file-row-name { font-size: 0.85rem; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-file-row-status { font-size: 0.75rem; color: #6b7280; }
.sf-file-row-remove {
    background: transparent; border: 0; color: #9ca3af; cursor: pointer; padding: 0.25rem;
    border-radius: 0.25rem; flex-shrink: 0;
}
.sf-file-row-remove:hover { color: #dc2626; background: #fef2f2; }
.sf-file-progress { height: 4px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; margin-top: 0.25rem; }
.sf-file-progress-bar { height: 100%; background: var(--sf-accent); width: 0; transition: width 0.15s; }

/* Video upload field — same dashed-indigo language as the file dropzone, but
   the two states diverge afterwards: a file is a row in a list, a video is one
   card with a poster, because there is only ever one of them. */
.sf-video-field { width: 100%; }
/* 🔴 Any class that sets `display` OUTRANKS the browser's own
   `[hidden] { display: none }`, so `.sf-video-card` (flex) and the
   desktop-hidden "Record now" `.sf-video-btn` (inline-flex) both rendered
   anyway — an empty grey box under the dropzone, and a camera button on a
   machine with no camera. One blanket rule keeps every `el.hidden = true` in
   the widget honest. */
.sf-video-field [hidden] { display: none !important; }
.sf-video-dropzone {
    border: 2px dashed #c7d2fe;
    border-radius: 0.875rem;
    background: #ffffff;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: border-color 0.15s, background-color 0.15s;
}
.sf-video-dropzone.sf-video-dragover {
    border-color: var(--sf-accent);
    background: #eef2ff;
}
.sf-video-icon { display: block; color: var(--sf-accent); font-size: 1.75rem; margin-bottom: 0.5rem; }
.sf-video-headline { font-weight: 600; color: #111827; font-size: 0.95rem; }
.sf-video-subline { color: #6b7280; font-size: 0.8rem; margin-top: 0.25rem; }
.sf-video-buttons {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center; margin-top: 0.875rem;
}
/* The real file input is inside each button's <label>. Off-screen
   rather than display:none so it stays focusable and keyboard-operable. */
.sf-video-file {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sf-video-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 40px; padding: 0 0.875rem;
    border: 1px solid #d1d5db; border-radius: 0.625rem;
    background: #ffffff; color: #374151;
    font-size: 0.85rem; font-weight: 500; line-height: 1;
    cursor: pointer; position: relative;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.sf-video-btn:hover { border-color: var(--sf-accent); color: var(--sf-accent); background: #f5f3ff; }
.sf-video-btn.is-primary {
    background: var(--sf-accent); border-color: var(--sf-accent); color: #ffffff;
}
.sf-video-btn.is-primary:hover { filter: brightness(0.94); color: #ffffff; background: var(--sf-accent); }
.sf-video-btn:focus-within { outline: 2px solid var(--sf-accent); outline-offset: 2px; }

/* One card per video. Empty (no video yet) it must take no room at all, which
   is why the gap lives here and not as a margin on the card. */
.sf-video-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.sf-video-cards:empty { display: none; }
.sf-video-add { margin-top: 0.5rem; }
.sf-video-card {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.875rem;
}
.sf-video-field.sf-video-uploading .sf-video-card { background: #eef2ff; border-color: #c7d2fe; }
.sf-video-field.sf-video-done .sf-video-card { background: #f9fafb; border-color: #e5e7eb; }
.sf-video-media {
    width: 5.5rem; flex-shrink: 0;
    /* Light, not black: a poster is object-fit:cover so this colour only ever
       shows when there ISN'T one, and a black rectangle there reads as a broken
       image rather than as an empty slot. */
    border-radius: 0.5rem; overflow: hidden; background: #e5e7eb;
    aspect-ratio: 16 / 9;
}
.sf-video-media.is-portrait { width: 3.25rem; aspect-ratio: 9 / 16; }
.sf-video-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 🔴 Font Awesome is NOT loaded on the standalone form page (the file field's
   own fa-cloud-arrow-up is invisible there too), so the poster placeholder
   cannot be an icon — it is drawn in CSS and looks identical on every surface. */
.sf-video-thumb-blank {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.sf-video-thumb-blank::after {
    content: '';
    width: 0; height: 0;
    border-left: 0.7rem solid #9ca3af;
    border-top: 0.45rem solid transparent;
    border-bottom: 0.45rem solid transparent;
}
.sf-video-body { flex: 1; min-width: 0; }
.sf-video-name {
    font-size: 0.85rem; font-weight: 500; color: #111827;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-video-meta { font-size: 0.75rem; color: #6b7280; margin-top: 0.125rem; }
.sf-video-progress { height: 4px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; margin-top: 0.5rem; }
.sf-video-progress-bar { height: 100%; background: var(--sf-accent); width: 0; transition: width 0.15s; }
.sf-video-status { font-size: 0.75rem; color: #6b7280; margin-top: 0.375rem; min-height: 1rem; }
.sf-video-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.125rem 0.5rem; border-radius: 9999px;
    background: #ecfdf5; color: #047857; font-size: 0.7rem; font-weight: 600;
}
.sf-video-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.sf-video-actions:empty { margin-top: 0; }
.sf-video-actions .sf-video-btn { min-height: 40px; font-size: 0.8rem; padding: 0 0.75rem; }

.sf-video-error {
    margin-top: 0.5rem; padding: 0.5rem 0.75rem;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem;
    color: #991b1b; font-size: 0.8rem; line-height: 1.4;
}
.sf-video-unavailable {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 0.875rem;
    color: #6b7280; font-size: 0.85rem;
}

@media (max-width: 640px) {
    .sf-video-buttons .sf-video-btn { flex: 1 1 100%; }
    .sf-video-media { width: 4.5rem; }
    .sf-video-media.is-portrait { width: 2.75rem; }
    .sf-video-actions .sf-video-btn { flex: 1 1 auto; }
}

/* License plate field — bold sans-serif font stack approximates the
   Charles Wright / UKNumberPlate look. Tenants can drop a real font
   file in /fonts/uknumberplate.woff2 and add @font-face if they want
   pixel-perfect; the fallback chain here looks plate-y on every OS. */
.sf-plate {
    /* 🔴 flex + width, never inline-flex. An inline-flex box sizes to its
       CONTENT, and .sf-plate-input inside it says flex:1 — "fill the parent" —
       so the width resolved from the input's INTRINSIC size, which depends on
       the plate font's metrics. It filled the card in one browser and came up
       short on a real phone. This makes it full width by rule instead. */
    display: flex;
    width: 100%;
    align-items: stretch;
    border: 2px solid #1f2937;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 0 0 2px rgba(0,0,0,0.05);
    min-height: 56px;
    max-width: 100%;
}
.sf-plate-uk { background: #ffd307; }
.sf-plate-usa { background: #ffffff; }
.sf-plate-strip {
    background: #003399;
    color: #fcd116;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.55rem;
    min-width: 36px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.sf-plate-stars {
    width: 18px;
    height: 18px;
    margin-bottom: 0.15rem;
}
.sf-plate-strip-label {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.sf-plate-banner {
    background: #b91c1c;
    color: #ffffff;
    padding: 0.4rem 0.7rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
}
.sf-plate-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111111;
    font-family: 'UKNumberPlate', 'Charles Wright', 'Arial Black', Impact, 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-size: 1.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.35rem 0.75rem;
    line-height: 1;
}
.sf-plate-input::placeholder {
    color: rgba(0,0,0,0.35);
    font-weight: 700;
}
.sf-plate-input:focus {
    background: rgba(255,255,255,0.18);
}
.sf-plate:has(.sf-plate-input:focus-visible) { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
@media (max-width: 480px) {
    .sf-plate-input { font-size: 1.5rem; padding: 0.3rem 0.5rem; }
    .sf-plate-strip { min-width: 32px; padding: 0.3rem 0.4rem; }
    .sf-plate { min-height: 48px; }
}

/* Recognized-user banner */
.sf-identity-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 0.625rem;
    font-size: 0.82rem;
    color: #4338ca;
}
.sf-identity-icon { color: var(--sf-accent); flex-shrink: 0; }
.sf-identity-text { flex: 1; min-width: 0; }
.sf-identity-action {
    color: var(--sf-accent);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.sf-identity-action:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Signature field
   ---------------------------------------------------------------------------
   Lives here, NOT in forms/standalone.blade.php. The .sf-plate rules were put
   there by mistake, which is why license plates render unstyled in both
   shortcode surfaces — this partial is the one all three .sf-* surfaces share.
   --------------------------------------------------------------------------- */
.sf-signature { width: 100%; }

/* The agreement. Fixed height + scroll is deliberate: it is what makes
   "scrolled to the end" a measurable, recordable fact rather than an assumption. */
.sf-signature-agreement {
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background: #f9fafb;
    padding: 1rem;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: #374151;
    -webkit-overflow-scrolling: touch;
}
.sf-signature-agreement:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.sf-signature-agreement p { margin: 0 0 0.65rem; }
.sf-signature-agreement p:last-child { margin-bottom: 0; }

.sf-signature-readstate {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-top: 0.5rem; font-size: 0.75rem;
}
.sf-signature-readstate-text { color: #b45309; font-weight: 500; }
.sf-signature-readstate-pct { color: #9ca3af; font-variant-numeric: tabular-nums; }
.sf-signature-readstate.is-complete .sf-signature-readstate-text { color: #15803d; }
.sf-signature-readstate.is-complete .sf-signature-readstate-text::before { content: "\2713\00a0"; }

.sf-signature-readbar {
    height: 3px; background: #e5e7eb; border-radius: 9999px;
    overflow: hidden; margin-top: 0.375rem;
}
.sf-signature-readbar > span {
    display: block; height: 100%; width: 0; background: #f59e0b;
    transition: width 0.15s ease-out;
}
.sf-signature-read .sf-signature-readbar > span { background: #22c55e; }

.sf-signature-consent {
    display: flex; gap: 0.75rem; align-items: flex-start;
    margin-top: 1rem; padding: 0.75rem;
    border: 1px solid #c7d2fe; border-radius: 0.5rem;
    background: rgba(238, 242, 255, 0.5);
    font-size: 0.8125rem; line-height: 1.45; color: #374151;
    cursor: pointer;
}
.sf-signature-consent input { margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--sf-accent); }

.sf-signature-methods {
    display: inline-flex; margin-top: 1.25rem; padding: 2px;
    border: 1px solid #d1d5db; border-radius: 0.5rem; background: #f9fafb;
}
.sf-signature-method {
    border: 0; background: transparent; cursor: pointer;
    padding: 0.375rem 1rem; border-radius: 0.375rem;
    font-size: 0.875rem; font-weight: 500; color: #6b7280;
    font-family: inherit;
}
.sf-signature-method.is-active {
    background: #ffffff; color: #111827;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.sf-signature-pane { margin-top: 0.75rem; }

/* The border/background live on the WRAP, not the canvas, so the signing
   baseline can sit behind a transparent drawing surface. Drawing the line onto
   the canvas itself would bake it into toDataURL() — the stored signature image
   must be the mark alone, nothing else. */
.sf-signature-canvas-wrap {
    position: relative;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
}
.sf-signature-canvas-wrap::after {
    content: "";
    position: absolute;
    left: 1.25rem; right: 1.25rem; bottom: 1.75rem;
    border-bottom: 1px solid #e2e8f0;
    pointer-events: none;
}
.sf-signature-canvas {
    display: block; width: 100%; height: 8rem;
    background: transparent;
    /* Without this the page scrolls under the finger instead of drawing. */
    touch-action: none;
    cursor: crosshair;
    position: relative; z-index: 1;
}
.sf-signature-hint {
    position: absolute; left: 1.25rem; bottom: 0.5rem;
    font-size: 0.6875rem; color: #9ca3af; pointer-events: none;
}
.sf-signature-drawn .sf-signature-hint { display: none; }
.sf-signature-clear {
    position: absolute; top: 0.5rem; right: 0.5rem;
    height: 1.75rem; padding: 0 0.625rem;
    border: 1px solid #d1d5db; border-radius: 0.375rem;
    background: #ffffff; color: #4b5563;
    font-size: 0.75rem; font-family: inherit; cursor: pointer;
}
.sf-signature-clear:hover { color: #111827; border-color: #9ca3af; }

/* Typed mode is a live PREVIEW of the legal-name field above, not a second
   input. One name, entered once — asking for it twice invites the two to differ
   and leaves the record contradicting itself. */
.sf-signature-typed-preview {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 8rem; padding: 0 1rem; text-align: center;
    border: 1px dashed #cbd5e1; border-radius: 0.5rem; background: #ffffff;
    font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Brush Script MT", cursive;
    font-size: 2rem; line-height: 1.2; color: #1f2937;
    word-break: break-word; overflow: hidden;
}
.sf-signature-typed-preview.is-empty::before {
    content: attr(data-placeholder);
    /* Explicit UI font — inheriting the cursive would make the empty-state hint
       read as if it were itself a signature. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.8125rem; font-style: normal; color: #9ca3af;
}

.sf-signature-name { margin-top: 1rem; }
.sf-signature-name-label {
    display: block; font-size: 0.75rem; font-weight: 500;
    color: #374151; margin-bottom: 0.25rem;
}
.sf-signature-name-input {
    width: 100%; height: 2.5rem; padding: 0 0.75rem;
    border: 1px solid #d1d5db; border-radius: 0.5rem;
    font-size: 0.875rem; font-family: inherit; color: var(--sf-text);
    background: #ffffff;
}
.sf-signature-name-input:focus {
    outline: none; border-color: transparent;
    box-shadow: 0 0 0 2px var(--sf-accent);
}
.sf-signature-name-help {
    display: block; margin-top: 0.25rem;
    font-size: 0.6875rem; color: #6b7280; line-height: 1.4;
}

.sf-signature-error {
    margin: 0.75rem 0 0; font-size: 0.8125rem; color: #b91c1c;
}

/* A finger needs more room than a mouse. */
@media (max-width: 640px) {
    .sf-signature-canvas { height: 10rem; }
    .sf-signature-typed-preview { height: 6rem; font-size: 1.5rem; }
    .sf-signature-agreement { max-height: 9rem; }
}

/* Early submit — the "you can stop here" button, shown beside Continue.
   Outlined rather than solid so Continue keeps being the obvious default and
   the pair reads as "finish, or carry on" rather than two competing primaries.
   Inherits the accent, so it themes itself for every tenant. */
.sf-btn.sf-btn-early {
    background-color: transparent;
    color: var(--sf-accent);
    border: 1px solid var(--sf-accent);
    margin-right: 0.5rem;
}
.sf-btn.sf-btn-early:hover { background-color: var(--sf-accent); color: #fff; opacity: 1; }

/* 🔴 The label must never wrap. "Take my scrap car" broke onto four lines at
   402px, which looks broken rather than inviting. Below 480px the two actions
   stack full-width instead of fighting over one row — Continue stays on top as
   the default path, with the finish-now option beneath it. */
.sf-btn.sf-btn-early { white-space: nowrap; }
@media (max-width: 480px) {
    /* 🔴 Both actions go full width and stack. Side by side at 50% leaves ~150px
       on a 320px phone, which wraps a label like "Take my scrap car" onto three
       lines. The spacer is invisible but still claims ~80px of the flex row,
       which is what kept the second button short of the edge. */
    .sf-nav { flex-wrap: wrap; gap: 0.5rem; }
    .sf-nav-spacer { display: none; }
    .sf-nav .sf-btn {
        flex: 1 1 100%;
        width: 100%;
        margin-right: 0;
        order: 1;
    }
    .sf-btn.sf-btn-early { order: 2; margin-top: 0; }
    .sf-back { order: 3; width: 100%; text-align: center; }
}

/* Which of the pair is the loud one, per form. Their live site makes the
   finish-now action the prominent one; a form whose later steps carry the value
   wants Continue to lead. Both are legitimate, so neither is hardcoded. */
.sf-nav-early-primary .sf-btn.sf-btn-early {
    background-color: var(--sf-accent);
    color: #fff;
    border: 1px solid var(--sf-accent);
}
.sf-nav-early-primary .sf-btn.sf-btn-early:hover { opacity: 0.9; }
.sf-nav-early-primary [data-sf-continue] {
    background-color: transparent;
    color: var(--sf-accent);
    border: 1px solid var(--sf-accent);
}
.sf-nav-early-primary [data-sf-continue]:hover { background-color: var(--sf-accent); color: #fff; opacity: 1; }

/* Optional per-form colour for the early-submit button. Falls back to the
   form's accent when unset, so nothing changes for a form that has not chosen
   one. --sf-early-ink is DERIVED from the colour by WCAG contrast in PHP, never
   picked by hand, so a pale colour cannot end up with white text on it. */
.sf-btn.sf-btn-early {
    color: var(--sf-early, var(--sf-accent));
    border-color: var(--sf-early, var(--sf-accent));
}
.sf-btn.sf-btn-early:hover {
    background-color: var(--sf-early, var(--sf-accent));
    color: var(--sf-early-ink, #fff);
}
.sf-nav-early-primary .sf-btn.sf-btn-early {
    background-color: var(--sf-early, var(--sf-accent));
    border-color: var(--sf-early, var(--sf-accent));
    color: var(--sf-early-ink, #fff);
}

/* The final button's colour. Inherits the finish-early colour when it has none
   of its own (see the migration) so one setting keeps the whole call to action
   one colour; --sf-submit-ink is derived by WCAG contrast in PHP. */
.sf-btn[data-sf-submit] {
    background-color: var(--sf-submit, var(--sf-accent));
    border-color: var(--sf-submit, var(--sf-accent));
    color: var(--sf-submit-ink, #fff);
}