/*
Theme Name: Flatsome Child
Description: Child theme for Car Rental Portal — built on Flatsome
Author: UX Themes
Template: flatsome
Version: 1.0.0
*/

/* ── Car Rental: search form — Flatsome compatibility ────────────────────────── */

/*
 * Flatsome's header applies `color: inherit` (white) to all inputs inside it.
 * For the STANDARD form (style="form", used in hero sections and results page),
 * we force the dark text color back so inputs are readable on the white card.
 */
.crs-form:not(.crs-form--header) input.crs-input {
    color:                    var(--crs-text, #222222) !important;
    -webkit-text-fill-color:  var(--crs-text, #222222) !important;
    opacity: 1 !important;
}

.crs-form:not(.crs-form--header) input[type="date"].crs-input {
    -webkit-appearance: auto;
    -moz-appearance:    auto;
    appearance:         auto;
    min-width: 130px;
    cursor: pointer;
}

/*
 * HEADER variant (style="header") — matches Flatsome primary button + input styling.
 * Inherits Flatsome's --primary-color variable. If you have a specific brand
 * color, replace the fallback hex (#446084) at both places below.
 * Find yours at: Flatsome → Theme Options → Styling → Main Color
 */
.crs-form--header {
    --crs-accent:      var(--primary-color, #446084);
    --crs-accent-dark: var(--primary-color, #446084);

    /* Match Flatsome's default input group styling */
    border:        1px solid #ddd !important;
    border-radius: 3px !important;
    box-shadow:    none !important;
    font-family:   inherit;
}

.crs-form--header .crs-field {
    border-right-color: #eaeaea !important;
}

.crs-form--header .crs-label {
    font-family:   inherit;
    font-weight:   700;
}

.crs-form--header .crs-input {
    font-family: inherit !important;
}

/* Submit button: inherit Flatsome primary color, match its rounding & hover feel */
.crs-form--header .crs-submit {
    background:    var(--primary-color, #446084) !important;
    color:         #ffffff !important;
    border-radius: 0 3px 3px 0 !important;
    font-family:   inherit !important;
    box-shadow:    none !important;
    transition:    filter 0.15s ease, background 0.15s ease;
}

.crs-form--header .crs-submit:hover,
.crs-form--header .crs-submit:focus {
    filter:  brightness(0.9);
    outline: none !important;
}

/* Date inputs: appearance must be auto so the calendar icon is tappable */
.crs-form--header input[type="date"].crs-input {
    -webkit-appearance: auto;
    -moz-appearance:    auto;
    appearance:         auto;
    min-width: 120px;
    cursor: pointer;
}

/* Prevent Flatsome from overriding the white input text inside the PAE */
.crs-form--header gmp-place-autocomplete input {
    color:                   #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* Google Places autocomplete dropdown — reposition for header context */
.crs-form--header .pac-container {
    margin-top: 6px;
    border-radius: 4px;
}

/* ── Car Rental: global overrides ───────────────────────────────────────────── */


/* ── Car Rental: product card spec badges ───────────────────────────────────── */


/* ── Car Rental: single product — specs grid ────────────────────────────────── */

.car-rental-specs {
    margin: 16px 0 20px;
    padding: 16px;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.car-rental-specs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.car-rental-spec-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 6px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.car-rental-spec-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin-bottom: 4px;
}

.car-rental-spec-value {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

/* ── Car Rental: Rental Details tab ─────────────────────────────────────────── */

.car-rental-tab {
    padding: 8px 0;
}

.car-rental-tab__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.car-rental-tab__table th,
.car-rental-tab__table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    font-size: 14px;
    vertical-align: top;
}

.car-rental-tab__table th {
    width: 38%;
    font-weight: 600;
    color: #555;
    background: #fafafa;
}

.car-rental-tab__table td {
    color: #333;
}

.car-rental-tab__table tr:last-child th,
.car-rental-tab__table tr:last-child td {
    border-bottom: none;
}

/* Features list */

.car-rental-features {
    margin-top: 20px;
}

.car-rental-features h4,
.car-rental-pickup-info h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #444;
    margin-bottom: 10px;
}

.car-rental-features__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.car-rental-features__list li {
    display: inline-block;
    padding: 4px 12px;
    background: #f0f4f8;
    border: 1px solid #d0dce8;
    border-radius: 20px;
    font-size: 13px;
    color: #446084;
}

/* Pickup locations */

.car-rental-pickup-info {
    margin-top: 24px;
}

.car-rental-pickup-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.car-rental-pickup-info__list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.car-rental-pickup-info__list li:last-child {
    border-bottom: none;
}

.pickup-address {
    color: #333;
}

.pickup-fee {
    font-weight: 600;
    color: #446084;
    white-space: nowrap;
    margin-left: 16px;
}

/* ── Car Rental: checkout — pickup location selector ────────────────────────── */

.car-rental-pickup-options h3 {
    font-size: 16px;
}

.car-rental-pickup-select {
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 10px;
    font-size: 14px;
}

/* ── Dokan vendor dashboard — match Flatsome inputs ─────────────────────────── */


/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 48em) {

    .car-rental-specs__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .car-rental-tab__table th {
        width: 45%;
    }

    .car-rental-pickup-info__list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .pickup-fee {
        margin-left: 0;
    }
}