/*
 Theme Name:   Carz Child Theme
 Theme URI:    https://carz.ancorathemes.com/
 Description:  Carz Child Theme
 Author:       AncoraThemes
 Author URI:   https://ancorathemes.com/
 Template:     carz
 Version:      1.0
 Tags:         flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
 Text Domain:  carz
*/


/* =Theme customization starts here
------------------------------------------------------------ */

/* === Custom Car Card Styling === */

.car_card_spec_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.car_card_spec_box {
    background: #f5f7f9;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.car_card_spec_label {
    font-weight: 500;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.car_card_spec_value {
    font-weight: 700;
    font-size: 16px;
    color: #111;
}

/* === Consistent Car Image Size (No Crop, No Zoom-In) === */
.sc_cars_item_thumb {
    width: 100%;
    height: 250px; /* consistent height across all cards */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f8f9fb; /* optional subtle background */
    padding: 5px; /* adds breathing room for larger images */
    box-sizing: border-box;
    /* Add border to match card */
    border: 1px solid #e6e9ec;
    border-radius: 12px;
}

.sc_cars_item_thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* ensures full image is visible */
    object-position: center center;
    display: block;
}

@media (max-width: 768px) {
    .sc_cars_item_thumb {
        height: 160px;
    }
}

.cars_page_title_price {
    font-size: 44px;
    font-weight: 700;
    color: #888;
}

.cars_page_title_price .car_price_suffix {
    font-size: 16px;
    color: #888;
}

/* CSS for legal disclosure on ninja form */
.legal-disclosure {
    font-size: 11px;
    line-height: 1.2;
    text-align: justify;
    color: #000;

    border: 1px solid #000;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;

    /* makes it fit Ninja Forms width cleanly */
    width: 100%;
    display: block;
}

/* ============================================
   ADDRESS REPEATABLE GRID (to cover 5 years)
   ============================================ */

.address-grid .nf-repeater-fieldset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 10px;
}

/* Flatten the custom wrapper elements so the actual field containers become grid items */
.address-grid .nf-repeater-fieldset > nf-fields-wrap,
.address-grid .nf-repeater-fieldset > nf-fields-wrap > nf-field {
    display: contents;
}

/* STREET ADDRESS: span full width (all 4 columns) */
.address-grid .address-container {
    grid-column: 1 / -1;
}

/* City, State, Zip, Years each take one column on the second row */
.address-grid .city-container,
.address-grid .liststate-container,
.address-grid .zip-container,
.address-grid .textbox-container {
    grid-column: auto;
}

/* Make sure the input element fills its cell */
.address-grid .nf-field-element {
    width: 100%;
}

/* Mobile: stack everything */
@media (max-width: 768px) {
    .address-grid .nf-repeater-fieldset {
        grid-template-columns: 1fr;
    }

    .address-grid .address-container,
    .address-grid .city-container,
    .address-grid .liststate-container,
    .address-grid .zip-container,
    .address-grid .textbox-container {
        grid-column: 1 / -1;
    }
}

/* ============================================
   OCCUPATION / EMPLOYER REPEATABLE GRID
   ============================================ */
.job-grid .nf-repeater-fieldset {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 15px;
}

/* Flatten wrappers (important for Ninja Forms repeaters) */
.job-grid .nf-repeater-fieldset > nf-fields-wrap,
.job-grid .nf-repeater-fieldset > nf-fields-wrap > nf-field {
    display: contents;
}

/* Row 1: Occupation | Employer  (2 columns spanning 2 grid cells each) */
.job-grid .job-rank {
    grid-column: span 3;
}
.job-grid .job-employer {
    grid-column: span 3;
}

/* Row 2: Employer Address (full width) */
.job-grid .job-address {
    grid-column: 1 / -1;
}

/* Row 3: City | State | Zip (3 columns) */
.job-grid .job-city {
    grid-column: span 2;
}
.job-grid .job-state {
    grid-column: span 2;
}
.job-grid .job-zip {
    grid-column: span 2;
}

/* Row 4: Work Phone | How Long (2 columns) */
.job-grid .job-phone {
    grid-column: span 3;
}
.job-grid .job-years {
    grid-column: span 3;
}

/* Ensure fields stretch fully inside grid cells */
.job-grid .nf-field-element {
    width: 100%;
}

/* Mobile: stack into 1 column */
@media (max-width: 768px) {
    .job-grid .nf-repeater-fieldset {
        grid-template-columns: 1fr;
    }

    .job-grid .job-rank,
    .job-grid .job-employer,
    .job-grid .job-address,
    .job-grid .job-city,
    .job-grid .job-state,
    .job-grid .job-zip,
    .job-grid .job-phone,
    .job-grid .job-years {
        grid-column: 1 / -1 !important;
    }
}

/* Hide original required message at the top */
.nf-form-fields-required {
    display: none !important;
}

.nf-input-limit {
    display: none !important;
}

/* Add required message under the Date field */
#nf-field-39-container::after {
    content: "Fields marked with an * are required.";
    display: block;
    margin-top: 50px;
    font-size: 12px;
    color: #666666;
    text-align: center;
}

.nf-fu-button-cancel {
    display: none !important;
}

.application-card {
    background: #414343 !important;
    border-radius: 14px;
    padding: 40px;
    max-width: 1200px;
    margin: 40px auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
}

/* Global styling for all Ninja Forms fields */
.nf-field-label, .nf-field-help {
    color : #ffffff;
}

.nf-add-fieldset, .nf-fu-fileinput-button {
     background : #0073aa !important;
     color: #ffffff !important;
 }

.nf-form-cont input.ninja-forms-field,
.nf-form-cont select.ninja-forms-field,
.nf-form-cont textarea.ninja-forms-field {
    background-color: #fdfdfd !important;
    color: #000000;
    border: 1px solid #e1e1e1 !important;
    border-radius: 5px !important;

    padding: 12px 16px !important;
    font-size: 16px !important;
    box-shadow: none !important;

    height: auto !important;
    min-height: 48px !important;

    outline: none !important;
}


/* === SUBMIT BUTTON STYLE === */
.nf-form-cont .nf-field-container .submit-wrap input[type="submit"],
.nf-form-cont input[type="button"].nf-element {
    background-color: #0073aa !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 32px !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    text-align: center !important;

    width: 100% !important;        /* span full width inside its container */
    max-width: 350px !important;   /* prevent being too wide */
    margin: 30px auto 0 auto !important; /* center horizontally */

    display: block !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

/* === Hover effect === */
.nf-form-cont .nf-field-container .submit-wrap input[type="submit"]:hover,
.nf-form-cont input[type="button"].nf-element:hover {
    background-color: #0036cc !important;   /* darker blue */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 71, 255, 0.35);
}

/* ============================
   SECTION TITLES
   ============================ */
.app-section-title {
    font-size: 22px;
    font-weight: 600;
    color: #4A4F59; /* soft slate matching your form */
    margin: 50px 0 20px 0;
    padding-bottom: 8px;

    border-bottom: 2px solid #e6e6e6;
    width: 100%;
}

.nf-field-container.label-above.app-section-title {
    margin-bottom: 70px !important;
}


/* Fix hidden dropdowns caused by ThemeREX / Carz theme */
.flatpickr-monthDropdown-months,
.flatpickr-yearDropdown-years,
.flatpickr-current-month select {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
}

.flatpickr-current-month select {
    height: auto !important;
}


/* ==========================================================
   THE FIX: FORCE ALL SELECTS VISIBLE (THEMEREX OVERRIDES)
============================================================== */

/* Force the real <select> to always show */
select.ninja-forms-field {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    appearance: auto !important;
    background-color: #fdfdfd !important;
    position: relative !important;
    z-index: 50 !important;
}

/* Kill ThemeRex fake arrow overlay */
.nf-field .nf-field-element::after,
.nf-field .nf-field-wrap::after,
.select_container::before,
.select_container::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    pointer-events: none !important;
}

/* Force visibility of selects inside any ThemeRex wrapper */
.select_container,
.select_container * {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* FINAL OVERRIDE: always show real Ninja Forms <select> */
body .nf-form-cont select.ninja-forms-field {
    display: block !important;      /* <-- critical */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}