/*
 * Elite Booking — style.css
 * Scoped tightly to plugin containers only.
 * Google Fonts are loaded per-shortcode in inline <style> blocks — NOT globally here.
 * :root variables renamed with --eb- prefix to avoid clashing with theme variables.
 */

/* ── Plugin-scoped CSS variables ─────────────────────────────────────────
   Using .eb-scope wrapper on every rule below so nothing bleeds into theme.
   ──────────────────────────────────────────────────────────────────────── */
#eb-dir-panel,
#eb-map,
.eb-veh-heading,
.eb-form-wrap,
.eb-grid,
.eb-quotes-outer,
.eb-hf {
    --eb-gold: #efc300;
    --eb-gold-dark: #c9a000;
    --eb-gold-border: rgba(239, 195, 0, 0.25);
    --eb-bg-deep: #080808;
    --eb-bg-card: #111111;
    --eb-bg-input: rgba(255, 255, 255, 0.05);
    --eb-text-soft: #cccccc;
    --eb-text-muted: rgba(255, 255, 255, 0.4);
    --eb-r-card: 18px;
    --eb-r-btn: 50px;
    --eb-r-input: 10px;
}

/* ── Route info panel ──────────────────────────────────────────────────── */
#eb-dir-panel {
    background: var(--eb-bg-card) !important;
    border: none !important;
    border-left: 4px solid var(--eb-gold) !important;
    border-radius: var(--eb-r-card) !important;
    padding: 24px !important;
    color: #fff !important;
    font-family: 'Raleway', Arial, sans-serif !important;
    min-height: unset !important;
    box-sizing: border-box;
}

#eb-dir-panel table {
    width: 100%;
    border-collapse: collapse;
}

#eb-dir-panel table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#eb-dir-panel table tr:last-child {
    border-bottom: none;
}

#eb-dir-panel table th:first-child {
    color: var(--eb-gold) !important;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 12px 16px 12px 0;
    width: 90px;
    vertical-align: top;
}

#eb-dir-panel table th:last-child {
    color: var(--eb-text-soft) !important;
    font-size: 14px;
    padding: 12px 0;
    font-weight: 400;
}

#eb-dir-panel p {
    color: var(--eb-text-soft) !important;
    margin: 0;
}

/* ── Map ───────────────────────────────────────────────────────────────── */
#eb-map {
    width: 100%;
    height: 320px !important;
    border: 1px solid var(--eb-gold-border) !important;
    border-radius: var(--eb-r-card) !important;
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #eb-map {
        height: 220px !important;
    }
}

/* ── Vehicle heading ───────────────────────────────────────────────────── */
.eb-veh-heading {
    text-align: center !important;
    padding: 40px 0 8px !important;
    font-size: 13px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: var(--eb-gold) !important;
    font-family: 'Raleway', Arial, sans-serif !important;
    font-weight: 600 !important;
    position: relative;
}

.eb-veh-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--eb-gold), transparent);
    margin: 12px auto 0;
}

/* ── Booking form — all rules strictly inside .eb-form-wrap ───────────── */
.eb-form-wrap {
    background: var(--eb-bg-deep) !important;
    padding: 40px 0 !important;
    font-family: 'Raleway', Arial, sans-serif !important;
    /* No overflow:hidden — causes mobile scroll issues */
}

/* Labels — scoped, won't affect theme labels */
.eb-form-wrap label {
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #aaaaaa !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Section headings */
.eb-form-wrap h2 {
    font-family: 'Cormorant Garamond', 'Georgia', serif !important;
    color: var(--eb-gold) !important;
    border-bottom: 1px solid var(--eb-gold-border) !important;
    padding-bottom: 12px !important;
    margin: 36px 0 20px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}

/* Inputs / selects / textarea */
.eb-form-wrap input[type="text"],
.eb-form-wrap input[type="email"],
.eb-form-wrap input[type="tel"],
.eb-form-wrap input[type="date"],
.eb-form-wrap input[type="time"],
.eb-form-wrap select,
.eb-form-wrap textarea {
    width: 100% !important;
    background: var(--eb-bg-input) !important;
    border: 1px solid var(--eb-gold-border) !important;
    border-radius: var(--eb-r-input) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-family: 'Raleway', Arial, sans-serif !important;
    padding: 13px 16px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: border-color .22s ease, box-shadow .22s ease !important;
    min-height: 48px !important;
    /* 48px touch target */
}

/* iOS: prevents auto-zoom on focus */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    .eb-form-wrap input[type="text"],
    .eb-form-wrap input[type="email"],
    .eb-form-wrap input[type="tel"],
    .eb-form-wrap input[type="date"],
    .eb-form-wrap input[type="time"],
    .eb-form-wrap select {
        font-size: 16px !important;
    }
}

.eb-form-wrap input::-webkit-input-placeholder,
.eb-form-wrap textarea::-webkit-input-placeholder {
    color: var(--eb-text-muted);
}

.eb-form-wrap input::-moz-placeholder,
.eb-form-wrap textarea::-moz-placeholder {
    color: var(--eb-text-muted);
    opacity: 1;
}

.eb-form-wrap input::placeholder,
.eb-form-wrap textarea::placeholder {
    color: var(--eb-text-muted) !important;
}

.eb-form-wrap input:focus,
.eb-form-wrap select:focus,
.eb-form-wrap textarea:focus {
    border-color: var(--eb-gold) !important;
    box-shadow: 0 0 0 3px rgba(239, 195, 0, 0.12) !important;
}

.eb-form-wrap select option {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

.eb-form-wrap input:disabled,
.eb-form-wrap select:disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--eb-text-muted) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-style: italic !important;
    cursor: not-allowed !important;
}

.eb-form-wrap textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

/* Radio / checkbox — scoped */
.eb-form-wrap input[type="radio"],
.eb-form-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--eb-gold) !important;
    margin-right: 8px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}

/* ── Price display ─────────────────────────────────────────────────────── */
#eb-price {
    font-family: 'Cormorant Garamond', 'Georgia', serif !important;
    color: var(--eb-gold) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    margin-left: 16px !important;
}

/* ── Submit button ─────────────────────────────────────────────────────── */
#eb-submit {
    background: linear-gradient(135deg, var(--eb-gold), var(--eb-gold-dark)) !important;
    color: #000000 !important;
    font-family: 'Raleway', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 15px 36px !important;
    border: none !important;
    border-radius: var(--eb-r-btn) !important;
    cursor: pointer !important;
    min-height: 52px !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
    -webkit-tap-highlight-color: transparent;
}

#eb-submit:not(:disabled):hover,
#eb-submit:not(:disabled):focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(239, 195, 0, 0.35) !important;
}

#eb-submit:disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .eb-form-wrap .col-sm-6 {
        width: 100% !important;
        float: none !important;
    }
}

@media (max-width: 767px) {
    .eb-form-wrap .row>div {
        width: 100% !important;
        float: none !important;
    }

    .eb-form-wrap .col-sm-6,
    .eb-form-wrap .col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #eb-price {
        display: block !important;
        margin: 12px 0 0 0 !important;
        font-size: 24px !important;
    }

    #eb-submit {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 15px 20px !important;
    }
}

@media (max-width: 480px) {
    .eb-form-wrap {
        padding: 24px 0 !important;
    }

    .eb-veh-heading {
        font-size: 11px !important;
        letter-spacing: 3px !important;
    }
}