/*
 * Bike details form: the upload prompt, and the post-submission confirmation.
 *
 * Loaded only on /bike-details-form/ by functions.php.
 *
 * Selectors are prefixed with #bikeDetailsForm / #bikeDetailsPage on purpose.
 * The Customiser's Additional CSS (post 50532) is printed after the theme's
 * stylesheets and already sets `.image-uploads { padding-top: 20px }`, so a bare
 * class here would lose to it.
 */

/* ── Upload prompt ────────────────────────────────────────────────────────
   Was a single bold line in the middle of a long form and was being missed:
   roughly a third of repeat submissions are people coming back to add photos
   (TASKID-71635). Lifted into its own callout so it reads as a step, not a note. */

#bikeDetailsForm .image-uploads {
    border: 2px solid #000;
    border-radius: 5px;
    background: #FFFBEA;
    padding: 20px 20px 14px;
    margin: 26px 0 10px;
}

#bikeDetailsForm .image-uploads > p:first-child {
    margin: 0 0 4px;
    line-height: 1.35;
}

#bikeDetailsForm .image-uploads > p:first-child strong {
    display: block;
    font-family: "Questrian", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.35rem;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 4px;
}

/* The yellow rule under the heading ties it to the site's buttons. `auto` on the
   side margins so it stays under the text: this form's copy is centre-aligned. */
#bikeDetailsForm .image-uploads > p:first-child strong::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    background: #FBCF0B;
    margin: 8px auto 0;
}

#bikeDetailsForm .image-uploads .whatsapp-text {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

#bikeDetailsForm .image-uploads .whatsapp-text p {
    margin-bottom: 2px;
}

/* ── Confirmation after a successful send ─────────────────────────────────
   Replaces the form, which CF7 would otherwise leave filled in and submittable
   with only a thin line of text at the foot of the page to say it worked. */

#bikeDetailsPage .c4b-done {
    border: 2px solid #000;
    border-radius: 5px;
    background: #FBCF0B;
    color: #000;
    padding: 32px 24px;
    margin: 20px auto 40px;
    max-width: 640px;
    text-align: center;
}

#bikeDetailsPage .c4b-done:focus {
    outline: none;
}

#bikeDetailsPage .c4b-done h2 {
    font-family: "Questrian", "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
    color: #000;
    font-size: 1.9rem;
    line-height: 1.15;
    margin: 0 0 12px;
}

#bikeDetailsPage .c4b-done p {
    margin: 0 0 10px;
    font-weight: 600;
}

#bikeDetailsPage .c4b-done .c4b-done-lead {
    font-size: 1.05rem;
}

#bikeDetailsPage .c4b-done .c4b-done-photos {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 2px solid rgba(0, 0, 0, 0.25);
    font-weight: 400;
}

#bikeDetailsPage .c4b-done .c4b-done-photos a,
#bikeDetailsPage .c4b-done .c4b-done-again a {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
}

#bikeDetailsPage .c4b-done .c4b-done-again {
    margin: 14px 0 0;
    font-size: 0.95rem;
}

@media (max-width: 480px) {
    #bikeDetailsForm .image-uploads {
        padding: 16px 14px 12px;
    }

    #bikeDetailsForm .image-uploads > p:first-child strong {
        font-size: 1.15rem;
    }

    #bikeDetailsPage .c4b-done {
        padding: 24px 16px;
    }

    #bikeDetailsPage .c4b-done h2 {
        font-size: 1.5rem;
    }
}