/* ── Car Rental — Frontend Styles ─────────────────────────────────────────── */

.cr-rental-form {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 24px;
    margin: 24px 0;
    font-family: inherit;
}

.cr-form-title {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 16px;
    color: #1a1a1a;
}

/* Inline line-icons — replace the raw OS emoji (🚗 📅 🕐 📦 ✅ 🛡️ 🏠 👤 🔒 …)
   the booking widget used to render via car_rental_icon(). Sized to 1em and
   nudged down slightly so they sit on the text baseline instead of floating
   above it, the way the emoji glyphs happened to. */
.cr-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* Car specs strip */
.cr-car-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 0.9em;
    color: #555;
}
.cr-car-specs span { background: #fff; border: 1px solid #ddd; border-radius: 20px; padding: 3px 12px; }
.cr-car-specs .cr-rate { font-weight: 700; color: #0d6efd; border-color: #0d6efd; }

/* Fields */
.cr-field { margin-bottom: 20px; }
.cr-field > label { display: block; font-weight: 600; margin-bottom: 8px; color: #333; }

.cr-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box;
    background: #fff;
}
.cr-input:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,.15); }

.cr-date-info { margin-top: 6px; font-size: 0.85em; color: #0d6efd; font-weight: 600; }

/* Pickup / dropoff time */
.cr-field--times {
    display: grid;
    /* plain 1fr tracks still enforce each column's min-content width (an
       <input>'s intrinsic size, not just its padding) — minmax(0, 1fr) lets
       the column actually shrink to fit, which is what stops it overflowing
       off-screen on narrow viewports */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}
.cr-time-col { min-width: 0; }
.cr-time-col label { display: block; font-weight: 600; margin-bottom: 8px; color: #333; }
.cr-time-col input { min-width: 0; }

/* Packages */
.cr-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.cr-package {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    position: relative;
    transition: all .2s;
    text-align: center;
}
.cr-package:hover { border-color: var(--pkg-color, #0d6efd); background: #fafafa; }
.cr-package--active {
    border-color: var(--pkg-color, #0d6efd);
    background: color-mix(in srgb, var(--pkg-color, #0d6efd) 8%, white);
}

.cr-package__label { font-weight: 700; font-size: 1em; color: var(--pkg-color, #333); margin-bottom: 4px; }
.cr-package__desc  { font-size: 0.8em; color: #666; }
.cr-package__badge {
    position: absolute; top: -10px; right: 8px;
    background: #198754; color: #fff;
    font-size: 0.7em; font-weight: 700;
    padding: 2px 8px; border-radius: 12px;
}

/* Add-ons */
.cr-addons { display: flex; flex-direction: column; gap: 8px; }

.cr-addon {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #ddd; border-radius: 7px;
    padding: 10px 14px; cursor: pointer; transition: border-color .2s;
}
.cr-addon:hover { border-color: #0d6efd; }
.cr-addon--locked { opacity: 0.7; background: #f0fff4; border-color: #198754; }

.cr-addon__check  { width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
.cr-addon__icon   { font-size: 1.2em; display: inline-flex; align-items: center; }
.cr-addon__label  { flex: 1; font-weight: 500; }
.cr-addon__price  { font-size: 0.85em; color: #0d6efd; font-weight: 600; flex-shrink: 0; }

.cr-addon { flex-wrap: wrap; }

.cr-addon__info-toggle {
    background: none; border: 1px solid #ccc; border-radius: 20px;
    padding: 2px 10px; font-size: 0.78em; color: #555;
    cursor: pointer; transition: background .15s, border-color .15s; flex-shrink: 0;
}
.cr-addon__info-toggle:hover { background: #f0f5ff; border-color: #0d6efd; color: #0d6efd; }
.cr-addon__info-toggle[aria-expanded="true"] { background: #0d6efd; border-color: #0d6efd; color: #fff; }

.cr-addon__panel {
    background: #f9fbff; border: 1px solid #dbe6f7; border-top: none;
    border-radius: 0 0 7px 7px; padding: 12px 14px 14px;
    font-size: 0.85em; color: #444;
}
.cr-addon__desc { margin: 0 0 8px; }

.cr-addon__terms-toggle {
    background: none; border: none; color: #0d6efd; font-weight: 600;
    font-size: 0.85em; padding: 0; cursor: pointer;
}
.cr-addon__terms-toggle:hover { text-decoration: underline; }

.cr-addon__terms {
    margin: 8px 0 0; padding-left: 18px; color: #666; font-size: 0.9em;
    display: flex; flex-direction: column; gap: 5px;
}
.cr-addon__terms[hidden] { display: none; }

/* Summary */
.cr-summary {
    background: #fff; border: 2px solid #0d6efd;
    border-radius: 8px; padding: 16px; margin-top: 16px;
}
.cr-breakdown-row {
    display: flex; justify-content: space-between;
    padding: 4px 0; font-size: 0.9em; color: #555;
    border-bottom: 1px dashed #eee;
}
.cr-summary__total {
    text-align: right; font-size: 1.15em; margin-top: 10px; color: #1a1a1a;
}
.cr-summary__total strong { color: #0d6efd; font-size: 1.3em; }

/* Notices */
.cr-notice {
    padding: 10px 16px; border-radius: 7px; margin-top: 12px; font-weight: 500;
}
.cr-available   { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.cr-unavailable { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }

/* Submit area */
.cr-submit-wrap {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cr-btn-cart {
    width: 100%;
    padding: 14px 20px !important;
    font-size: 1.05em !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: opacity .2s, background .2s;
    /* WooCommerce's own CSS has a `button.button.alt{background-color:#7f54b3}`
       rule (assets/css/woocommerce.css) that matches this exact button
       (class="button alt cr-btn-cart") with higher selector specificity
       (element + 2 classes, inside a `.woocommerce` ancestor) than our single
       `.cr-btn-cart` class — so without !important it renders WooCommerce's
       purple instead of the site's teal gradient (used on the checkout
       "Realizar el pedido" button, see class-car-checkout-fields.php's
       #place_order rule). !important forces this rule to win regardless of
       Divi/WooCommerce load order, same pattern as the category-pill bullet
       fix. */
    background: linear-gradient(135deg, #02647C, #21BAE1) !important;
    border: none !important;
    color: #fff !important;
}

.cr-btn-cart:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.cr-btn-cart.cr-loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

.cr-submit-hint {
    text-align: center;
    font-size: 0.85em;
    color: #888;
    margin: 0;
}
.cr-status-pending   { background: #fff3cd; color: #664d03; }
.cr-status-confirmed { background: #d1e7dd; color: #0f5132; }
.cr-status-completed { background: #cfe2ff; color: #084298; }
.cr-status-cancelled,
.cr-status-rejected  { background: #f8d7da; color: #842029; }