/* ============================================================
   RMA FORM — dark navy theme overlay
   Alta Labs brand aesthetic for the RMA service-form, success,
   and error pages. Loaded AFTER altalabs.webflow.min.css and
   alta_brand.css; uses the shared design tokens from alta_brand.css.

   alta_brand.css already sets:
     html, body.body { background: #0f0a20 !important; color: #f8f8f8 }
   So this file's job is ONLY the page content and form — making
   them dark to sit correctly on the navy page background.

   Scope: .service-form / .form-5 (form page), .success-message-5
   (success + error pages). Navbar (.uui-navbar*) and footer are
   handled by alta_brand.css and intentionally left untouched here.

   !important is used sparingly only where Webflow's stylesheet
   applies more-specific inline or element-level rules that would
   otherwise win. Every usage is annotated.
   ============================================================ */


/* ============================================================
   1. PAGE BODY
   alta_brand.css owns body.body background/color globally.
   We only set the font-family here; no background override needed.
   ============================================================ */

body.body {
    font-family: var(--alta-font-body);
}


/* ============================================================
   2. FORM WRAPPER CARD — .service-form.w-form
   Elevated dark card sitting on the navy page background.
   ============================================================ */

/**
 * Outer .w-form wrapper: elevated navy card, rounded corners,
 * prominent shadow so it lifts off the page background.
 */
.service-form.w-form {
    background-color: var(--alta-navy-elev); /* #171026 */
    border: 1px solid var(--alta-border-dark);
    border-radius: var(--alta-radius-lg);
    box-shadow: var(--alta-shadow-lg);
    max-width: 640px;
    margin: 2.5rem auto 3rem;
    padding: 2.5rem 2.25rem;
}

/**
 * Inner <form> element. Reset to transparent so the card colour shows.
 * !important: Webflow may apply a background on .form-5 directly.
 */
.service-form.w-form .form-5 {
    background-color: transparent !important;
}

/**
 * Webflow makes .w-form / .form-5 display:flex with the default
 * min-width:auto, so these nested flex containers refuse to shrink
 * below their content's intrinsic width on narrow viewports —
 * overflowing the page and producing a phantom horizontal scrollbar
 * on phones. min-width:0 lets the whole chain shrink to fit.
 */
.service-form.w-form,
.service-form .form-5,
.service-form .sn-addon-container {
    min-width: 0;
}


/* ============================================================
   3. FORM HEADING — h1.title.text-light.centered
   ============================================================ */

/**
 * Page intro heading inside the form.
 * !important: .text-light in Webflow sets a light/white colour that
 * would be invisible on the dark card; we override to the brand token.
 */
.service-form .title.text-light.centered {
    font-family: var(--alta-font-heading);
    font-weight: 600;
    color: var(--alta-text-dark) !important; /* override .text-light white */
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}


/* ============================================================
   4. FIELD LABELS — .field-label, .field-label.white
   ============================================================ */

/**
 * All field labels. The template adds .white to force white text
 * against the old dark background; those need to stay light here too,
 * but we use the proper token rather than a hard #fff.
 * !important: .white sets color:#fff in Webflow's stylesheet —
 * without !important the cascade would leave pure white which looks
 * harsh; we replace it with the brand token value.
 */
.service-form .field-label,
.service-form .field-label.white {
    font-family: var(--alta-font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--alta-text-dark) !important; /* override Webflow .white */
    margin-bottom: 0.375rem;
    display: block;
}

/**
 * Inline helper span — the "(Where Is It Located?)" tooltip trigger.
 * Purple accent signals interactivity.
 * !important: the element also carries .white, so we need to win.
 */
.service-form .field-label .white,
#sn-tooltip {
    color: var(--alta-purple-bright) !important;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/**
 * The long helper <span class="field-label white"> used as
 * explanatory text below the serial number field. Muted style to
 * distinguish it from true labels.
 * !important: overrides the 600-weight set on .field-label above.
 */
.service-form span.field-label.white {
    font-weight: 400 !important;
    color: var(--alta-text-dark-muted) !important;
    font-size: 0.8125rem;
}


/* ============================================================
   5. INPUTS, SELECTS, TEXTAREAS
   Dark navy input wells with light text and a purple focus ring.
   ============================================================ */

/**
 * Base styles shared across all text-entry controls.
 * !important on background/color/border: Webflow's global stylesheet
 * sets its own backgrounds and border colours at high specificity.
 */
.service-form input[type="text"],
.service-form input[type="email"],
.service-form input[type="tel"],
.service-form input[type="date"],
.service-form input[type="number"],
.service-form select,
.service-form textarea {
    font-family: var(--alta-font-body) !important;
    font-size: 0.9375rem;
    color: var(--alta-text-dark) !important;
    background-color: var(--alta-navy-input) !important; /* #0a0717 */
    border: 1px solid var(--alta-border-dark) !important;
    border-radius: var(--alta-radius) !important;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    width: 100%;
    /* Flex items default to min-width:auto; long-option selects (#country,
       #model-number) and size-attributed inputs would otherwise refuse to
       shrink below their intrinsic content width and overflow the viewport.
       The intentional 6rem on the country-code select wins via its more
       specific .sn-addon-container select rule. */
    min-width: 0;
    /* Hard cap so a control can never exceed its container even when
       Webflow forces its intrinsic width (the long-option <select>s
       resolve to ~576px auto width and ignore width:100% otherwise). */
    max-width: 100%;
    box-sizing: border-box;
}

/**
 * Focus state: purple border + soft purple ring (WCAG 2.1 AA).
 * !important required to beat Webflow's :focus rules.
 */
.service-form input[type="text"]:focus,
.service-form input[type="email"]:focus,
.service-form input[type="tel"]:focus,
.service-form input[type="date"]:focus,
.service-form input[type="number"]:focus,
.service-form select:focus,
.service-form textarea:focus {
    border-color: var(--alta-purple) !important;
    box-shadow: 0 0 0 3px rgba(122, 90, 248, 0.30) !important;
}

/**
 * Placeholder: muted so it reads as hint text, not user input.
 */
.service-form input::placeholder,
.service-form textarea::placeholder {
    color: var(--alta-text-dark-muted);
    opacity: 1;
}

/**
 * Browser autofill override — browsers inject a bright yellow/white
 * autofill background that would break the dark theme.
 */
.service-form input:-webkit-autofill,
.service-form input:-webkit-autofill:hover,
.service-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--alta-text-dark) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--alta-navy-input) inset !important;
    box-shadow: 0 0 0 1000px var(--alta-navy-input) inset !important;
    caret-color: var(--alta-text-dark);
}

/**
 * Webflow's .input/.single utility sets display:flex on the native
 * <select>, which makes it size to its longest <option> and ignore
 * width:100% — so #country / #model-number / #state rendered ~576px
 * and overflowed the viewport on narrow screens. Forcing normal block
 * rendering lets width:100% / max-width:100% take effect.
 * Scoped to the form's DIRECT-child selects so the composite
 * country-code select inside .sn-addon-container is left alone.
 */
.service-form .form-5 > select {
    display: block;
    width: 100% !important;
}

/**
 * Select: custom dark chevron arrow so it is visible on the dark bg.
 */
.service-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    padding-right: 2.25rem;
}

/**
 * Textarea: comfortable minimum height for the fault description.
 */
.service-form textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}


/* ============================================================
   6. SERIAL NUMBER ADDON ROW
   .sn-addon-container wraps the purple model prefix badge and the
   serial-number input as a single composite field.
   Also used for the phone country-code select + phone input.
   ============================================================ */

/**
 * Composite field container: single shared border on the dark input
 * background, hiding individual input borders inside.
 *
 * margin-bottom matches the 24px that Webflow applies to standard inputs
 * (via .w-input). The inner rule `.sn-addon-container > * { margin:0 !important }`
 * is REQUIRED to keep the prefix badge and input flush (equal heights); it
 * strips the inner input's own margin-bottom. We therefore restore the
 * missing spacing on the container itself so phone↔email and
 * serial↔next-field get the same gap as every other field group.
 */
.service-form .sn-addon-container {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--alta-border-dark);
    border-radius: var(--alta-radius);
    overflow: hidden;
    background-color: var(--alta-navy-input);
    margin-bottom: 24px;
}

/**
 * Make every direct child fill the SAME height so the prefix
 * (country-code select / model-number badge) is flush with its
 * input. Webflow gives the inner controls a fixed height (~44px)
 * AND inconsistent bottom margins (the country-code select carries
 * a 24px margin, the phone input only 4px), which left the prefix
 * short with a gap below it. Clearing the fixed height + margins
 * lets the container's `align-items: stretch` equalize them.
 */
.service-form .sn-addon-container > * {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: stretch;
    /* Flex items default to min-width:auto, so the phone input (rendered
       with size="30") refuses to shrink below its intrinsic ~30ch width
       and forces the whole form wider than the viewport on phones,
       producing a phantom horizontal scrollbar. min-width:0 lets it
       shrink to fit. (The country-code select keeps its own 6rem
       min-width via the more-specific rule below.) */
    min-width: 0;
}

/**
 * Suppress individual borders from inputs/selects nested inside the
 * composite container — the container border is the single border.
 */
.service-form .sn-addon-container input[type="text"],
.service-form .sn-addon-container select {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto;
    background-color: var(--alta-navy-input) !important;
}

/**
 * Suppress focus ring on the inner element; promote it to the container.
 */
.service-form .sn-addon-container input[type="text"]:focus,
.service-form .sn-addon-container select:focus {
    box-shadow: none !important;
}

/**
 * Container-level focus ring so keyboard users still get clear feedback.
 */
.service-form .sn-addon-container:focus-within {
    border-color: var(--alta-purple);
    box-shadow: 0 0 0 3px rgba(122, 90, 248, 0.30);
}

/**
 * The purple model prefix badge (.sn-addon).
 * Dark purple background with the brand purple text.
 */
.service-form .sn-addon {
    background-color: rgba(122, 90, 248, 0.15); /* subtle purple tint */
    border-right: 1px solid var(--alta-border-dark);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    flex-shrink: 0;
}

.service-form .addon_text {
    font-family: var(--alta-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--alta-purple-bright);
    white-space: nowrap;
}

/**
 * Country-code select (phone row) styled as a prefix badge.
 * !important: override the general dark select background above so
 * this specific select gets the tinted purple addon look.
 */
.service-form .sn-addon-container select {
    background-color: rgba(122, 90, 248, 0.15) !important;
    color: var(--alta-purple-bright) !important;
    font-weight: 600;
    font-size: 0.875rem;
    border-right: 1px solid var(--alta-border-dark) !important;
    flex: 0 0 auto;
    min-width: 6rem;
    max-width: 8rem;
    padding-right: 1.75rem;
}


/* ============================================================
   7. ERROR / VALIDATION MESSAGES
   Brighter danger red for legibility on dark backgrounds.
   ============================================================ */

/**
 * Per-field inline validation error text.
 * !important: Webflow may set a dark colour on .errormessage.
 * Using --alta-danger-dark (#ff6b62) which reads well on dark.
 */
.service-form .errormessage {
    font-family: var(--alta-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--alta-danger-dark) !important;
    margin-top: 0.25rem;
}

/**
 * CAPTCHA / form-level error block.
 */
.service-form .form-error {
    font-family: var(--alta-font-body);
    font-size: 0.875rem;
    color: var(--alta-danger-dark);
    text-align: center;
    margin-top: 0.5rem;
}


/* ============================================================
   8. SUBMIT BUTTON — #button-submit.button-dark.w-button
   Purple CTA — unchanged from the light theme; it was already
   correct. !important required to win against .w-button specificity.
   ============================================================ */

/**
 * Primary CTA: vibrant purple fill, white text, rounded, shadow.
 */
#button-submit.w-button,
.service-form .button-dark.w-button {
    font-family: var(--alta-font-body) !important;
    font-weight: 600 !important;
    font-size: 1rem;
    background-color: var(--alta-purple-cta) !important;
    color: #ffffff !important;
    border: none;
    border-radius: var(--alta-radius) !important;
    box-shadow: var(--alta-shadow);
    padding: 0.75rem 2rem;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    letter-spacing: 0.01em;
    margin-top: 0.5rem;
}

#button-submit.w-button:hover,
.service-form .button-dark.w-button:hover {
    background-color: var(--alta-purple-cta-hover) !important;
    box-shadow: var(--alta-shadow-lg);
    transform: translateY(-1px);
}

#button-submit.w-button:active,
.service-form .button-dark.w-button:active {
    transform: translateY(0);
    box-shadow: var(--alta-shadow);
}

#button-submit.w-button:focus-visible,
.service-form .button-dark.w-button:focus-visible {
    outline: 3px solid var(--alta-ring-dark);
    outline-offset: 2px;
}

/**
 * Error state: validation.js adds .error (and disables the button)
 * while the "Please correct the errors shown above in red" message
 * is showing. Turn the button red to match the inline error text,
 * instead of leaving it the purple CTA colour.
 * opacity:1 overrides the browser's default dimming of :disabled.
 */
#button-submit.w-button.error,
.service-form .button-dark.w-button.error,
#button-submit.w-button.error:disabled,
.service-form .button-dark.w-button.error:disabled {
    background-color: var(--alta-danger) !important;
    color: #ffffff !important;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
    transform: none;
}


/* ============================================================
   9. SERIAL NUMBER MODAL — .modal-bg / .modal-container
   Dark card on a translucent dark scrim.
   ============================================================ */

/**
 * Scrim: deep translucent overlay that dims the form behind the modal.
 * !important: Webflow JS may set inline styles on this element.
 */
.modal-bg {
    background-color: rgba(3, 3, 3, 0.65) !important;
}

/**
 * Modal card: elevated navy panel, light text, purple-tinted shadow.
 * !important: Webflow may apply a light background inline.
 */
.modal-container {
    background-color: var(--alta-navy-elev) !important;
    border: 1px solid var(--alta-border-dark);
    border-radius: var(--alta-radius-lg);
    box-shadow: 0 8px 32px rgba(122, 90, 248, 0.25);
    padding: 2rem;
}

.modal-container .h2.dark {
    font-family: var(--alta-font-heading);
    color: var(--alta-text-dark) !important;
    font-weight: 700;
}

.modal-container .caption {
    font-family: var(--alta-font-body);
    color: var(--alta-text-dark-muted);
    font-size: 0.9rem;
}

/**
 * Close button "+" character. Muted on idle, danger red on hover.
 * !important: may inherit an old dark/light colour from Webflow.
 */
.modal-container .close-text .text-block-49 {
    color: var(--alta-text-dark-muted) !important;
    font-size: 1.75rem;
    line-height: 1;
    transition: color 0.15s ease;
}

.modal-container .close-text:hover .text-block-49 {
    color: var(--alta-danger-dark) !important;
}


/* ============================================================
   10. SUCCESS / ERROR WRAPPER CARD — .success-message-5.w-form-done
   Both success.html and error.html use this class as their
   main content wrapper.
   ============================================================ */

/**
 * Shared card for both result pages.
 * display:block !important — Webflow's .w-form-done default is
 * display:none (it shows on success via JS on the real Webflow form).
 * Our standalone rendered pages must always be visible.
 */
.success-message-5.w-form-done {
    background-color: var(--alta-navy-elev);
    border: 1px solid var(--alta-border-dark);
    border-radius: var(--alta-radius-lg);
    box-shadow: var(--alta-shadow-lg);
    max-width: 640px;
    margin: 3rem auto;
    padding: 3rem 2.5rem;
    text-align: center;
    display: block !important; /* override Webflow's display:none on .w-form-done */
}

/**
 * Large heading (.h3) shared by both result pages.
 * Default is light text on the dark card; per-state colour is
 * applied by the :not/:has rules below.
 */
.success-message-5 .h3 {
    font-family: var(--alta-font-heading);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.3;
    color: var(--alta-text-dark);
    margin-bottom: 0;
}

/**
 * Body copy paragraphs (.title.light used for para text on both pages).
 * !important: .title.light in Webflow applies a light/white colour that
 * would be invisible on the dark card without this override.
 */
.success-message-5 .title.light {
    font-family: var(--alta-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--alta-text-dark-muted) !important; /* override Webflow .title.light */
}

/**
 * Email link accent inside result message text.
 * !important: links may inherit Webflow's default link colour.
 */
.success-message-5 .email-link {
    color: var(--alta-purple-bright) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.success-message-5 .email-link:hover {
    color: var(--alta-purple-cta) !important;
}

/* ---- SUCCESS-specific heading accent ---- */
/**
 * Success page: no .copy-button present, so heading gets green.
 */
.success-message-5:not(:has(.copy-button)) .h3 {
    color: var(--alta-success);
}

/* ---- ERROR-specific heading accent ---- */
/**
 * Error page: .copy-button is present. Heading gets bright danger red.
 */
.success-message-5:has(.copy-button) .h3 {
    color: var(--alta-danger-dark);
}


/* ============================================================
   11. ERROR PAGE — debug textarea + copy button
   The error.html renders a read-only <textarea id="copyField">
   with inline styles. !important is required to beat inline styles.
   ============================================================ */

/**
 * Debug data textarea.
 * Inline styles set background-color:#f8f8f8; color:#111; border:#ccc —
 * all need overriding to dark. !important is the only way to beat
 * element-level inline styles from an external stylesheet.
 */
#copyField {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8125rem;
    color: var(--alta-text-dark) !important;         /* override inline color:#111 */
    background-color: var(--alta-navy-input) !important; /* override inline bg:#f8f8f8 */
    border: 1px solid var(--alta-border-dark) !important; /* override inline border:#ccc */
    border-radius: var(--alta-radius) !important;
    padding: 0.75rem 1rem !important;
    line-height: 1.6;
    resize: none;
    width: 100%;
    box-sizing: border-box;
}

/**
 * "Click to Copy" button. Inherits .uui-button from Webflow.
 * Override to match the brand purple CTA style.
 * !important: .uui-button has high specificity in the Webflow sheet.
 */
.copy-button.uui-button {
    font-family: var(--alta-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem;
    background-color: var(--alta-purple-cta) !important;
    color: #ffffff !important;
    border: none;
    border-radius: var(--alta-radius);
    padding: 0.625rem 1.5rem;
    cursor: pointer;
    box-shadow: var(--alta-shadow);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
}

.copy-button.uui-button:hover {
    background-color: var(--alta-purple-cta-hover) !important;
    box-shadow: var(--alta-shadow-lg);
}

.copy-button.uui-button:focus-visible {
    outline: 3px solid var(--alta-ring-dark);
    outline-offset: 2px;
}


/* ============================================================
   12. SPACING UTILITIES (Webflow .uui-space-small)
   ============================================================ */

.service-form .uui-space-small,
.success-message-5 .uui-space-small {
    height: 1rem;
    display: block;
}


/* ============================================================
   13. REDUCED MOTION SUPPORT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .service-form input,
    .service-form select,
    .service-form textarea,
    #button-submit.w-button,
    .service-form .button-dark.w-button,
    .copy-button.uui-button,
    .success-message-5 .email-link {
        transition: none;
    }

    #button-submit.w-button:hover,
    .service-form .button-dark.w-button:hover {
        transform: none;
    }
}


/* ============================================================
   14. RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 680px) {
    .service-form.w-form {
        margin: 1rem;
        padding: 1.5rem 1.25rem;
        border-radius: var(--alta-radius);
    }

    .success-message-5.w-form-done {
        margin: 1.5rem 1rem;
        padding: 2rem 1.25rem;
        border-radius: var(--alta-radius);
    }

    .success-message-5 .h3 {
        font-size: 1.375rem;
    }
}