/* =========================================================
   JGA Quote Form
   ========================================================= */

.jga-quote-step {
    background: #ffffff;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
}

.jga-form-intro {
    margin-bottom: 22px;
}

.jga-form-intro h3 {
    margin: 0 0 4px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    color: #17324d;
}

.jga-step-label {
    margin: 0;
    font-size: 14px;
    color: #687684;
}


/* =========================================================
   Fields
   ========================================================= */

.jga-field {
    margin-bottom: 18px;
}

.jga-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: #25384a;
}

.jga-field input[type="text"],
.jga-field input[type="email"],
.jga-field input[type="tel"],
.jga-field input[type="number"],
.jga-field input[type="date"],
.jga-field select,
.jga-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #ccd4db;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2933;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.jga-field textarea {
    min-height: 110px;
    resize: vertical;
}

.jga-field input:focus,
.jga-field select:focus,
.jga-field textarea:focus {
    border-color: #17324d;
    box-shadow: 0 0 0 3px rgba(23, 50, 77, 0.10);
    outline: none;
}


/* =========================================================
   Two Column Date Fields
   ========================================================= */

.jga-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.jga-two-col .jga-field {
    margin-bottom: 18px;
}


/* =========================================================
   Radio Buttons
   ========================================================= */

.jga-field .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jga-field .wpcf7-list-item {
    margin: 0;
}

.jga-field .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #d3dbe1;
    border-radius: 8px;
    background: #f8fafb;
    cursor: pointer;
    font-weight: 500;
}

.jga-field .wpcf7-list-item input[type="radio"] {
    margin: 0;
}


/* =========================================================
   Buttons
   ========================================================= */

.jga-submit-wrap {
    margin-top: 8px;
}

.jga-submit-wrap input[type="submit"],
.jga-quote-step .cf7mls_next,
.jga-quote-step .cf7mls-next,
.jga-quote-step .wpcf7-next,
.jga-quote-step button {
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    background: #17324d;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.jga-submit-wrap input[type="submit"]:hover,
.jga-quote-step .cf7mls_next:hover,
.jga-quote-step .cf7mls-next:hover,
.jga-quote-step .wpcf7-next:hover,
.jga-quote-step button:hover {
    opacity: 0.92;
}

.jga-submit-wrap input[type="submit"]:active,
.jga-quote-step .cf7mls_next:active,
.jga-quote-step .cf7mls-next:active,
.jga-quote-step .wpcf7-next:active,
.jga-quote-step button:active {
    transform: translateY(1px);
}


/* =========================================================
   Validation
   ========================================================= */

.jga-invalid {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.08) !important;
}

.jga-field-error {
    display: block;
    width: 100%;
    margin-top: 6px;
    color: #d63638;
    font-size: 13px;
    line-height: 1.4;
}

.jga-quote-step .wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 13px;
}


/* =========================================================
   CF7 Multi Step Buttons
   ========================================================= */

.jga-quote-step .cf7mls-btns {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.jga-quote-step .cf7mls_back,
.jga-quote-step .cf7mls-back {
    width: auto;
    min-width: 110px;
    background: #eef2f5;
    color: #17324d;
}


/* =========================================================
   CF7 Response
   ========================================================= */

.wpcf7 form .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .jga-quote-step {
        padding: 20px 16px;
        border-radius: 10px;
    }

    .jga-form-intro h3 {
        font-size: 23px;
    }

    .jga-two-col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .jga-field .wpcf7-radio {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .jga-field .wpcf7-list-item label {
        width: 100%;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .jga-quote-step .cf7mls-btns {
        flex-direction: column-reverse;
    }

    .jga-quote-step .cf7mls_back,
    .jga-quote-step .cf7mls-back {
        width: 100%;
    }
}

/* =========================================================
   JGA Quote Form - Visual Polish
   ========================================================= */

/* Form width */
.wpcf7 .jga-quote-step {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   Header / Progress feel
   --------------------------------------------------------- */

.jga-form-intro {
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid #edf0f2;
}

.jga-form-intro::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 50%;
    height: 3px;
    border-radius: 20px;
    background: #17324d;
}

.jga-contact-details .jga-form-intro::after {
    width: 100%;
}

.jga-step-label {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 9px;
    border-radius: 20px;
    background: #f2f5f7;
    font-size: 12px;
    font-weight: 600;
    color: #5d6c78;
}


/* ---------------------------------------------------------
   Better labels
   --------------------------------------------------------- */

.jga-field > label {
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;
    color: #1e3143;
}


/* ---------------------------------------------------------
   Fields polish
   --------------------------------------------------------- */

.jga-field input[type="text"],
.jga-field input[type="email"],
.jga-field input[type="tel"],
.jga-field input[type="number"],
.jga-field input[type="date"],
.jga-field select,
.jga-field textarea {
    border: 1px solid #d8dee4;
    background-color: #fff;
    box-shadow: none;
}

.jga-field input:hover,
.jga-field select:hover,
.jga-field textarea:hover {
    border-color: #b9c4cd;
}

.jga-field input:focus,
.jga-field select:focus,
.jga-field textarea:focus {
    border-color: #17324d;
    box-shadow: 0 0 0 3px rgba(23, 50, 77, 0.08);
}


/* ---------------------------------------------------------
   Select styling
   --------------------------------------------------------- */

.jga-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #637382 50%),
        linear-gradient(135deg, #637382 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 21px,
        calc(100% - 12px) 21px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}


/* ---------------------------------------------------------
   Radio Pills
   --------------------------------------------------------- */

.jga-field .wpcf7-radio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.jga-field .wpcf7-radio .wpcf7-list-item {
    width: 100%;
}

.jga-field .wpcf7-radio .wpcf7-list-item label {
    position: relative;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #d8dee4;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.jga-field .wpcf7-radio .wpcf7-list-item label:hover {
    border-color: #17324d;
    background: #f7f9fa;
}

.jga-field .wpcf7-radio input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: #17324d;
}

.jga-field .wpcf7-radio label:has(input[type="radio"]:checked) {
    border-color: #17324d;
    background: #f2f6f8;
}


/* ---------------------------------------------------------
   Next / Submit
   --------------------------------------------------------- */

.jga-quote-step .cf7mls_next,
.jga-quote-step .cf7mls-next,
.jga-submit-wrap input[type="submit"] {
    min-height: 52px;
    border-radius: 8px;
    background: #17324d;
    box-shadow: 0 7px 18px rgba(23, 50, 77, 0.15);
}

.jga-quote-step .cf7mls_next:hover,
.jga-quote-step .cf7mls-next:hover,
.jga-submit-wrap input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(23, 50, 77, 0.20);
}


/* ---------------------------------------------------------
   Back button
   --------------------------------------------------------- */

.jga-quote-step .cf7mls_back,
.jga-quote-step .cf7mls-back {
    min-height: 50px;
    border: 1px solid #d5dde3;
    border-radius: 8px;
    background: #fff;
    color: #17324d;
    box-shadow: none;
}


/* ---------------------------------------------------------
   Conditional Fields
   --------------------------------------------------------- */

#jga-flexible-dates,
#jga-other-group-wrap {
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 8px;
    background: #f8fafb;
    border: 1px solid #e8ecef;
}


/* ---------------------------------------------------------
   Validation polish
   --------------------------------------------------------- */

.jga-invalid {
    border-color: #d63638 !important;
    background-color: #fffafa !important;
}

.jga-field-error,
.jga-quote-step .wpcf7-not-valid-tip {
    color: #c62828;
    font-size: 12px;
    font-weight: 500;
}


/* ---------------------------------------------------------
   Desktop compact spacing
   --------------------------------------------------------- */

@media (min-width: 768px) {

    .jga-quote-step {
        padding: 28px 30px;
    }

    .jga-field {
        margin-bottom: 16px;
    }

    .jga-form-intro h3 {
        font-size: 25px;
    }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .wpcf7 .jga-quote-step {
        max-width: 100%;
    }

    .jga-quote-step {
        padding: 18px 15px;
        box-shadow: 0 7px 22px rgba(0, 0, 0, 0.06);
    }

    .jga-form-intro {
        margin-bottom: 18px;
    }

    .jga-form-intro h3 {
        font-size: 22px;
    }

    .jga-field {
        margin-bottom: 15px;
    }

    .jga-field input[type="text"],
    .jga-field input[type="email"],
    .jga-field input[type="tel"],
    .jga-field input[type="number"],
    .jga-field input[type="date"],
    .jga-field select {
        min-height: 50px;
        font-size: 16px;
    }

    .jga-field .wpcf7-radio {
        grid-template-columns: 1fr;
    }

    .jga-field .wpcf7-radio .wpcf7-list-item label {
        min-height: 48px;
    }

    #jga-flexible-dates,
    #jga-other-group-wrap {
        padding: 12px;
    }
}