/*
Theme Name: Child - Avada
Template: Avada
Version: 1.0.2
*/

/* ==========================================================
   01. GLOBAL DESIGN VARIABLES

   Scope:
   Available throughout the entire website.

   Purpose:
   Keeps the site's colors, borders, shadows, and text colors
   consistent. The variables are defined globally so later
   sections can reuse the same approved visual system.
   ========================================================== */

:root {
    --ccb-navy: #132a4*;
    --ccb-navy-dark: #091525;
  * --ccb-blue: #175cd3;
    --ccb-bl*e-dark: #0f47a8;
    --ccb-blue-li*ht: #eef5ff;
    --ccb-red: #c6282*;
    --ccb-green: #18794e;
    --*cb-text: #1f2937;
    --ccb-text-s*ft: #334155;
    --ccb-muted: #607*86;
    --ccb-border: #cbd5e1;
   *--ccb-border-dark: #94a3b8;
    --*cb-background: #f7f9fc;
    --ccb-*hite: #ffffff;
    --ccb-shadow-so*t: 0 8px 22px rgba(19, 42, 70, 0.08);
    --ccb-shadow-medium: 0 14px 40px rgba(19, 42, 70, 0.1);
}


/* ==========================================================
   02. GLOBAL ACCESSIBILITY AND LINK BEHAVIOR

   Scope:
   Applies across the entire website.

   Purpose:
   Gives keyboard users a clear focus indicator. This section
   does not alter normal link colors or page-specific designs.
   ========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(23, 92, 211, 0.28);
    outline-offset: 3px;
}


/* ==========================================================
   03. GLOBAL AVADA FOOTER

   Scope:
   Applies to the global Avada footer on every page.

   Purpose:
   Creates a clear visual end to each page, improves footer
   readability, and organizes global footer links without
   changing their URLs or SEO anchor text.
   ========================================================== */

.fusion-footer {
    position: relative;
    margin-top: 0;
    color: #d9e4f2;
    background:
        linear-gradient(
            135deg,
            #0d1d31 0%,
            #132a46 60%,
            #17395f 100%
        );
    border-top: 5px solid var(--ccb-blue);
}

.fusion-footer-widget-area {
    padding-top: 48px;
    padding-bottom: 42px;
    color: #d9e4f2;
    background: transparent;
}

.fusion-footer-widget-area .fusion-row {
    position: relative;
}

.fusion-footer .widget {
    margin-bottom: 0;
}

.fusion-footer .widget-title,
.fusion-footer h2,
.fusion-footer h3,
.fusion-footer h4 {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 12px;
    color: var(--ccb-white);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.fusion-footer .widget-title::after,
.fusion-footer h2::after,
.fusion-footer h3::after,
.fusion-footer h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42px;
    height: 3px;
    background: #4f8ee8;
    border-radius: 999px;
}

.fusion-footer-widget-area ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fusion-footer-widget-area li {
    margin: 0;
    padding: 0;
    border: 0;
}

.fusion-footer-widget-area li + li {
    margin-top: 9px;
}

.fusion-footer-widget-area a {
    display: inline-block;
    position: relative;
    padding: 2px 0;
    color: #d9e4f2;
    font-size: 15px;
    line-height: 1.45;
    text-decoration: none;
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.fusion-footer-widget-area a::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 2px;
    margin-right: 0;
    background: #72a7f1;
    vertical-align: middle;
    transition:
        width 160ms ease,
        margin-right 160ms ease;
}

.fusion-footer-widget-area a:hover,
.fusion-footer-widget-area a:focus {
    color: var(--ccb-white);
    transform: translateX(3px);
}

.fusion-footer-widget-area a:hover::before,
.fusion-footer-widget-area a:focus::before {
    width: 14px;
    margin-right: 8px;
}

.fusion-footer-copyright-area {
    padding-top: 22px;
    padding-bottom: 22px;
    color: #b9c8da;
    background: var(--ccb-navy-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fusion-footer-copyright-area .fusion-copyright-notice {
    color: #b9c8da;
    font-size: 13px;
    line-height: 1.65;
}

.fusion-footer-copyright-area a {
    color: #dceaff;
    text-decoration: underline;
    text-decoration-color: rgba(220, 234, 255, 0.45);
    text-underline-offset: 3px;
}

.fusion-footer-copyright-area a:hover,
.fusion-footer-copyright-area a:focus {
    color: var(--ccb-white);
}


/* ==========================================================
   04. REUSABLE SELLER CALL-TO-ACTION SECTION

   Scope:
   Applies only to an Avada container with the CSS class:
   comic-selling-cta

   Current use:
   The "Sell Comic Books in South Jersey, Philadelphia, or
   Delaware" section above the regional telephone cards.

   Purpose:
   Gives the regional seller section a polished card design,
   strong local-commercial heading hierarchy, readable copy,
   and one clear primary submission button.
   ========================================================== */

.comic-selling-cta {
    position: relative;
    max-width: 1180px;
    margin: 56px auto 0;
    padding: 52px 54px 48px !important;
    overflow: hidden;
    color: var(--ccb-text);
    background:
        radial-gradient(
            circle at top right,
            rgba(23, 92, 211, 0.13),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #f9fbff 0%,
            var(--ccb-blue-light) 100%
        ) !important;
    border: 1px solid #ccdbef;
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(19, 42, 70, 0.1);
}

.comic-selling-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background:
        linear-gradient(
            90deg,
            var(--ccb-blue),
            #5792e6
        );
}

.comic-selling-cta .fusion-title {
    max-width: 880px;
    margin: 0 auto 16px !important;
    text-align: center;
}

.comic-selling-cta .fusion-title h2 {
    margin: 0 !important;
    color: var(--ccb-navy) !important;
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em;
}

.comic-selling-cta > .fusion-builder-row >
.fusion-layout-column > .fusion-column-wrapper >
.fusion-text {
    max-width: 860px;
    margin: 0 auto 28px;
    color: var(--ccb-muted);
    font-size: 17px;
    line-height: 1.7;
    text-align: center;
}

.comic-selling-cta > .fusion-builder-row >
.fusion-layout-column > .fusion-column-wrapper >
.fusion-text p {
    margin: 0;
}


/* ==========================================================
   05. SELLER CALL-TO-ACTION BUTTON

   Scope:
   Applies only inside .comic-selling-cta.

   Purpose:
   Converts the existing Avada seller-intake button into the
   section's single primary CTA. The destination URL remains
   controlled by the Avada Button element.
   ========================================================== */

.comic-selling-cta .comic-selling-cta__button,
.comic-selling-cta .fusion-button {
    min-width: 430px;
    min-height: 58px;
    padding: 16px 30px !important;
    color: var(--ccb-white) !important;
    background: var(--ccb-blue) !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: 0 9px 22px rgba(23, 92, 211, 0.25) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: center;
    text-transform: none !important;
    transition:
        background-color 170ms ease,
        box-shadow 170ms ease,
        transform 170ms ease !important;
}

.comic-selling-cta .comic-selling-cta__button:hover,
.comic-selling-cta .comic-selling-cta__button:focus,
.comic-selling-cta .fusion-button:hover,
.comic-selling-cta .fusion-button:focus {
    color: var(--ccb-white) !important;
    background: var(--ccb-blue-dark) !important;
    box-shadow: 0 12px 28px rgba(15, 71, 168, 0.3) !important;
    transform: translateY(-2px);
}


/* ==========================================================
   06. REGIONAL COMIC-BOOK BUYER CARDS

   Scope:
   Applies only to HTML wrappers with the CSS class:
   comic-buyer-location

   Current use:
   The three existing Avada columns for:
   - South Jersey
   - Philadelphia
   - Northern Delaware

   Purpose:
   Styles each existing Text Block independently. No parent
   Nested Columns class is required. Each card contains an H3,
   local supporting copy, and a clickable telephone number.
   ========================================================== */

.comic-selling-cta .comic-buyer-location {
    display: flex;
    flex-direction: column;
    min-height: 230px;
    height: 100%;
    padding: 26px 24px;
    background: var(--ccb-white);
    border: 1px solid #d5e1f1;
    border-radius: 12px;
    box-shadow: var(--ccb-shadow-soft);
    text-align: left;
    transition:
        border-color 170ms ease,
        box-shadow 170ms ease,
        transform 170ms ease;
}

.comic-selling-cta .comic-buyer-location:hover {
    border-color: #87ace6;
    box-shadow: 0 13px 28px rgba(19, 42, 70, 0.13);
    transform: translateY(-3px);
}

.comic-selling-cta .comic-buyer-location h3 {
    margin: 0 0 12px;
    color: var(--ccb-navy);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
}

.comic-selling-cta .comic-buyer-location p {
    margin: 0 0 20px;
    color: var(--ccb-muted);
    font-size: 14px;
    line-height: 1.6;
}

.comic-selling-cta .comic-buyer-location a {
    display: inline-block;
    margin-top: auto;
    color: var(--ccb-blue);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

.comic-selling-cta .comic-buyer-location a:hover,
.comic-selling-cta .comic-buyer-location a:focus {
    color: var(--ccb-blue-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


/* ==========================================================
   07. COMIC-BOOK SELLING RESOURCE LINKS

   Scope:
   Applies only to the separate Avada container with the class:
   comic-resource-links

   Current use:
   The lower three-column section containing:
   - Selling Comic Books
   - By Era
   - Service Areas

   Purpose:
   Visually separates high-value internal SEO links from the
   seller CTA. Existing URLs and anchor text remain controlled
   by each Avada Text Block.
   ========================================================== */

.comic-resource-links {
    position: relative;
    margin-top: 48px !important;
    padding: 50px 52px 44px !important;
    color: #dce6f2;
    background:
        linear-gradient(
            135deg,
            #0c1b2e 0%,
            #132a46 58%,
            #17395f 100%
        ) !important;
    border-top: 5px solid var(--ccb-blue);
    box-shadow: 0 -8px 30px rgba(19, 42, 70, 0.08);
}

.comic-resource-links .fusion-builder-row {
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
}

.comic-resource-links .fusion-title {
    margin-bottom: 18px !important;
}

.comic-resource-links .fusion-title h2,
.comic-resource-links .fusion-title h3,
.comic-resource-links .fusion-title h4 {
    position: relative;
    margin: 0 !important;
    padding-bottom: 13px;
    color: var(--ccb-white) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.comic-resource-links .fusion-title h2::after,
.comic-resource-links .fusion-title h3::after,
.comic-resource-links .fusion-title h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 44px;
    height: 3px;
    background: #6fa6f0;
    border-radius: 999px;
}

.comic-resource-links .fusion-text {
    color: #dce6f2;
    font-size: 15px;
    line-height: 1.55;
}

.comic-resource-links .fusion-text p {
    margin: 0;
}

.comic-resource-links .fusion-text a {
    display: block;
    position: relative;
    padding: 6px 0;
    color: #dce6f2 !important;
    text-decoration: none;
    transition:
        color 160ms ease,
        padding-left 160ms ease;
}

.comic-resource-links .fusion-text a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 2px;
    background: #72a7f1;
    transform: translateY(-50%);
    transition: width 160ms ease;
}

.comic-resource-links .fusion-text a:hover,
.comic-resource-links .fusion-text a:focus {
    padding-left: 22px;
    color: var(--ccb-white) !important;
}

.comic-resource-links .fusion-text a:hover::before,
.comic-resource-links .fusion-text a:focus::before {
    width: 14px;
}


/* ==========================================================
   08. RESOURCE-SECTION DUPLICATE CTA SUPPRESSION

   Scope:
   Applies only inside .comic-resource-links.

   Purpose:
   Hides the duplicate green "Sell Your Comics Today" button
   inside the lower resource section. The primary seller CTA
   remains visible in .comic-selling-cta above.
   ========================================================== */

.comic-resource-links .fusion-button-wrapper {
    display: none;
}


/* ==========================================================
   09. GRAVITY FORMS FORM ID 1 - MAIN FORM CONTAINER

   Scope:
   Applies only to Gravity Form ID 1.

   Current use:
   The ComicBookBuying.com seller collection intake form.

   Purpose:
   Gives the form a professional card appearance and provides
   the design variables used by all Form ID 1 field styles.
   ========================================================== */

#gform_wrapper_1 {
    --comic-form-navy: #132a46;
    --comic-form-blue: #175cd3;
    --comic-form-blue-dark: #0f47a8;
    --comic-form-blue-light: #eef5ff;
    --comic-form-red: #c62828;
    --comic-form-text: #1f2937;
    --comic-form-muted: #5f6b7a;
    --comic-form-border: #cbd5e1;
    --comic-form-border-dark: #94a3b8;
    --comic-form-background: #f7f9fc;
    --comic-form-white: #ffffff;
    --comic-form-success: #18794e;

    max-width: 980px;
    margin: 32px auto 48px;
    padding: 34px 38px 40px;
    color: var(--comic-form-text);
    background: var(--comic-form-background);
    border: 1px solid #dbe3ed;
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(19, 42, 70, 0.09);
}


/* ==========================================================
   10. FORM ID 1 - INTRODUCTORY INFORMATION PANEL

   Scope:
   Applies only to .comic-collection-form-introduction inside
   Gravity Form ID 1.

   Purpose:
   Presents the pre-submission guidance as a readable callout.
   The text disappears naturally after form submission because
   the HTML field belongs to the Gravity Form.
   ========================================================== */

#gform_wrapper_1 .comic-collection-form-introduction {
    margin: 0 0 32px;
    padding: 24px 26px;
    background: var(--comic-form-blue-light);
    border: 1px solid #c9dcfb;
    border-left: 5px solid var(--comic-form-blue);
    border-radius: 10px;
}

#gform_wrapper_1 .comic-collection-form-introduction p {
    margin: 0 0 12px;
    color: #26384d;
    font-size: 16px;
    line-height: 1.65;
}

#gform_wrapper_1 .comic-collection-form-introduction p:last-child {
    margin-bottom: 0;
}

#gform_wrapper_1 .comic-collection-form-introduction em {
    font-style: normal;
}

#gform_wrapper_1 .comic-collection-form-introduction strong {
    color: var(--comic-form-navy);
    font-weight: 800;
}


/* ==========================================================
   11. FORM ID 1 - FIELD SPACING AND LABELS

   Scope:
   Applies only to fields inside Gravity Form ID 1.

   Purpose:
   Improves scanning, label hierarchy, and required-field
   visibility across all intake-form questions.
   ========================================================== */

#gform_wrapper_1 .gform_fields {
    row-gap: 26px;
}

#gform_wrapper_1 .gfield {
    margin: 0;
}

#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 .gform-field-label {
    display: block;
    margin-bottom: 9px;
    color: var(--comic-form-navy);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.35;
}

#gform_wrapper_1 .gfield_required {
    margin-left: 5px;
    color: var(--comic-form-red);
    font-size: 13px;
    font-weight: 700;
}


/* ==========================================================
   12. FORM ID 1 - TEXT INPUTS, SELECTS, AND TEXTAREAS

   Scope:
   Applies only to text-style controls inside Form ID 1.

   Purpose:
   Creates consistent field height, spacing, borders, hover
   states, and keyboard-focus states.
   ========================================================== */

#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 input[type="url"],
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
    min-height: 52px;
    padding: 13px 15px;
    color: var(--comic-form-text);
    background: var(--comic-form-white);
    border: 1px solid var(--comic-form-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 16px;
    line-height: 1.45;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

#gform_wrapper_1 textarea {
    min-height: 180px;
    resize: vertical;
}

#gform_wrapper_1 input[type="text"]:hover,
#gform_wrapper_1 input[type="email"]:hover,
#gform_wrapper_1 input[type="tel"]:hover,
#gform_wrapper_1 input[type="number"]:hover,
#gform_wrapper_1 input[type="url"]:hover,
#gform_wrapper_1 select:hover,
#gform_wrapper_1 textarea:hover {
    border-color: var(--comic-form-border-dark);
}

#gform_wrapper_1 input[type="text"]:focus,
#gform_wrapper_1 input[type="email"]:focus,
#gform_wrapper_1 input[type="tel"]:focus,
#gform_wrapper_1 input[type="number"]:focus,
#gform_wrapper_1 input[type="url"]:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
    outline: 0;
    border-color: var(--comic-form-blue);
    background: var(--comic-form-white);
    box-shadow: 0 0 0 4px rgba(23, 92, 211, 0.14);
}


/* ==========================================================
   13. FORM ID 1 - RADIO BUTTONS AND CHECKBOXES

   Scope:
   Applies only to radio and checkbox options in Form ID 1.

   Purpose:
   Makes long choice lists easier to scan and select by turning
   each choice into a clearly separated interactive row.
   ========================================================== */

#gform_wrapper_1 .gfield_radio,
#gform_wrapper_1 .gfield_checkbox {
    display: grid;
    gap: 9px;
    margin-top: 4px;
}

#gform_wrapper_1 .gchoice {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 44px;
    margin: 0;
    padding: 10px 13px;
    background: var(--comic-form-white);
    border: 1px solid var(--comic-form-border);
    border-radius: 8px;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

#gform_wrapper_1 .gchoice:hover {
    background: #f8fbff;
    border-color: #91b7f5;
}

#gform_wrapper_1 .gchoice:focus-within {
    border-color: var(--comic-form-blue);
    box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.12);
}

#gform_wrapper_1 .gchoice input[type="radio"],
#gform_wrapper_1 .gchoice input[type="checkbox"] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    margin: 1px 11px 0 0;
    accent-color: var(--comic-form-blue);
}

#gform_wrapper_1 .gchoice label {
    margin: 0;
    color: #26384d;
    font-size: 15px;
    line-height: 1.45;
    cursor: pointer;
}


/* ==========================================================
   14. FORM ID 1 - FILE UPLOAD AREA

   Scope:
   Applies only to the multi-image upload field in Form ID 1.

   Purpose:
   Makes the upload target prominent, shows upload rules
   clearly, improves image-preview cards, and styles the custom
   optimization-status message.
   ========================================================== */

#gform_wrapper_1 .gfield_description,
#gform_wrapper_1 .gform_fileupload_rules {
    color: var(--comic-form-muted);
    font-size: 14px;
    line-height: 1.55;
}

#gform_wrapper_1 .gform_drop_area {
    margin-top: 8px;
    padding: 42px 24px;
    background:
        linear-gradient(
            135deg,
            rgba(238, 245, 255, 0.92),
            rgba(255, 255, 255, 0.98)
        );
    border: 2px dashed #7aa7ed;
    border-radius: 12px;
    text-align: center;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

#gform_wrapper_1 .gform_drop_area:hover,
#gform_wrapper_1 .gform_drop_area:focus-within {
    background: #f1f6ff;
    border-color: var(--comic-form-blue);
    box-shadow: 0 0 0 4px rgba(23, 92, 211, 0.09);
}

#gform_wrapper_1 .gform_drop_instructions {
    color: var(--comic-form-navy);
    font-size: 16px;
    font-weight: 700;
}

#gform_wrapper_1 .gform_button_select_files {
    min-height: 46px;
    padding: 11px 20px;
    color: var(--comic-form-white);
    background: var(--comic-form-blue);
    border: 0;
    border-radius: 7px;
    box-shadow: 0 5px 14px rgba(23, 92, 211, 0.22);
    font-size: 15px;
    font-weight: 750;
    cursor: pointer;
}

#gform_wrapper_1 .gform_button_select_files:hover,
#gform_wrapper_1 .gform_button_select_files:focus {
    background: var(--comic-form-blue-dark);
}

#gform_wrapper_1 .gform_fileupload_multifile
.gform_fileupload_rules {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    background: #f1f5f9;
    border-radius: 7px;
}

#gform_wrapper_1 .ginput_preview_list {
    margin-top: 14px;
}

#gform_wrapper_1 .ginput_preview {
    margin-bottom: 10px;
    padding: 12px 14px;
    background: var(--comic-form-white);
    border: 1px solid var(--comic-form-border);
    border-radius: 8px;
}

#gform_wrapper_1 .ts-gf-uo-status {
    margin: 10px 0 0;
    padding: 10px 13px;
    color: #14532d;
    background: #ecfdf3;
    border: 1px solid #a7e3bc;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   15. FORM ID 1 - PRIMARY SUBMIT BUTTON

   Scope:
   Applies only to Form ID 1's submit controls.

   Purpose:
   Creates one highly visible, full-width seller-submission CTA
   at the natural end of the form.
   ========================================================== */

#gform_wrapper_1 .gform_footer {
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid #dbe3ed;
}

#gform_wrapper_1 .gform_footer input[type="submit"],
#gform_wrapper_1 .gform_footer button[type="submit"] {
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 14px 26px;
    color: var(--comic-form-white);
    background: var(--comic-form-blue);
    border: 0;
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(23, 92, 211, 0.24);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

#gform_wrapper_1 .gform_footer input[type="submit"]:hover,
#gform_wrapper_1 .gform_footer button[type="submit"]:hover {
    background: var(--comic-form-blue-dark);
    box-shadow: 0 10px 24px rgba(15, 71, 168, 0.28);
    transform: translateY(-1px);
}


/* ==========================================================
   16. FORM ID 1 - VALIDATION AND ERROR STATES

   Scope:
   Applies only to validation messages in Form ID 1.

   Purpose:
   Makes required-field errors visible without changing Gravity
   Forms validation logic.
   ========================================================== */

#gform_wrapper_1 .gfield_error {
    padding: 16px;
    background: #fff4f4;
    border: 1px solid #f2b8b5;
    border-radius: 9px;
}

#gform_wrapper_1 .validation_message,
#gform_wrapper_1 .gfield_validation_message {
    margin-top: 8px;
    color: #9f1c1c;
    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================
   17. FORM ID 1 - POST-SUBMISSION CONFIRMATION

   Scope:
   Applies only to Gravity Form ID 1's confirmation output.

   Purpose:
   Converts the successful-submission message into a compact
   confirmation card and removes the excessive vertical spacing
   visible in the default Avada/Gravity Forms output.
   ========================================================== */

#gform_confirmation_wrapper_1 {
    max-width: 980px;
    margin: 28px auto 34px;
}

#gform_confirmation_wrapper_1
.comic-collection-form-confirmation {
    padding: 34px 36px;
    background: #f1f7ff;
    border: 1px solid #c7daf7;
    border-left: 6px solid var(--ccb-blue);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(19, 42, 70, 0.08);
}

#gform_confirmation_wrapper_1
.comic-collection-form-confirmation h2 {
    margin: 0 0 14px;
    color: var(--ccb-navy);
    font-size: 38px;
    line-height: 1.15;
}

#gform_confirmation_wrapper_1
.comic-collection-form-confirmation p {
    max-width: 760px;
    margin: 0;
    color: var(--ccb-text-soft);
    font-size: 17px;
    line-height: 1.65;
}