/**
 * Rent2Wheels – Booking Form Styles
 * @since 1.0.0-1a
 */

:root {
    --r2w-primary:  #1E3A5F;
    --r2w-accent:   #E8943A;
    --r2w-light:    #F4F7FB;
    --r2w-success:  #2E7D32;
    --r2w-warning:  #E65100;
    --r2w-danger:   #B71C1C;
    --r2w-border:   #C8D8E8;
    --r2w-radius:   6px;
}

/* ── Booking Form Wrapper ─────────────────────────────────────── */
.r2w-booking-form {
    background: #fff;
    border: 1px solid var(--r2w-border);
    border-radius: var(--r2w-radius);
    padding: 24px;
    margin: 24px 0;
    max-width: 680px;
}

/* ── Requirements strip ──────────────────────────────────────── */
.r2w-requirements-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--r2w-border);
}

.r2w-req-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--r2w-light);
    border: 1px solid var(--r2w-border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--r2w-primary);
}

.r2w-req-badge--neutral { color: #555; }

/* ── Form sections ───────────────────────────────────────────── */
.r2w-form-section { margin-bottom: 24px; }

.r2w-form-section__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--r2w-primary);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--r2w-accent);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Date row ────────────────────────────────────────────────── */
.r2w-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.r2w-date-field label,
.r2w-rider-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #444;
}

.r2w-date-input,
.r2w-rider-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--r2w-border);
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    transition: border-color .2s;
    box-sizing: border-box;
}

.r2w-date-input:focus,
.r2w-rider-input:focus {
    border-color: var(--r2w-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(30,58,95,.1);
}

/* ── Rider row ───────────────────────────────────────────────── */
.r2w-rider-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.r2w-rider-field small {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 3px;
}

/* ── Availability status ─────────────────────────────────────── */
.r2w-availability-status {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.r2w-avail--ok      { background: #E8F5E9; color: var(--r2w-success); border: 1px solid #A5D6A7; }
.r2w-avail--no      { background: #FFEBEE; color: var(--r2w-danger);  border: 1px solid #EF9A9A; }
.r2w-avail--loading { background: var(--r2w-light); color: #666; border: 1px solid var(--r2w-border); }

/* ── Eligibility feedback ────────────────────────────────────── */
.r2w-eligibility-feedback {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 13px;
}

.r2w-elig--ok       { background: #E8F5E9; color: var(--r2w-success); border: 1px solid #A5D6A7; }
.r2w-elig--blocked  { background: #FFEBEE; color: var(--r2w-danger);  border: 1px solid #EF9A9A; }
.r2w-elig--warning  { background: #FFF8E1; color: var(--r2w-warning); border: 1px solid #FFCC80; }

.r2w-elig-check { display: flex; align-items: flex-start; gap: 6px; margin: 3px 0; font-size: 12px; }
.r2w-elig-check--pass   { color: var(--r2w-success); }
.r2w-elig-check--fail   { color: var(--r2w-danger); }
.r2w-elig-check--warn   { color: var(--r2w-warning); }

/* ── Price breakdown ─────────────────────────────────────────── */
.r2w-price-breakdown { font-size: 14px; }

.r2w-price-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
}

.r2w-price-line:last-child { border-bottom: none; }
.r2w-tax-line   { color: #666; font-size: 13px; }
.r2w-total-line { font-weight: 700; font-size: 16px; color: var(--r2w-primary); padding-top: 8px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.r2w-form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.r2w-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--r2w-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .2s;
    text-decoration: none;
}

.r2w-btn--primary {
    background: var(--r2w-accent);
    color: #fff;
    border-color: var(--r2w-accent);
}
.r2w-btn--primary:hover { background: #d4831f; border-color: #d4831f; }
.r2w-btn--primary:disabled { background: #ccc; border-color: #ccc; cursor: not-allowed; }

.r2w-btn--secondary {
    background: #fff;
    color: var(--r2w-primary);
    border-color: var(--r2w-primary);
}
.r2w-btn--secondary:hover { background: var(--r2w-light); }

.r2w-btn--link { background: none; border: none; color: #888; padding: 12px 8px; text-decoration: underline; }

/* ── RFQ form ────────────────────────────────────────────────── */
.r2w-rfq-form {
    margin-top: 20px;
    padding: 20px;
    background: var(--r2w-light);
    border-radius: var(--r2w-radius);
    border: 1px solid var(--r2w-border);
}

.r2w-rfq-form h4 { margin-top: 0; color: var(--r2w-primary); }

.r2w-rfq-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.r2w-rfq-fields input,
.r2w-rfq-fields textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--r2w-border);
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.r2w-rfq-fields textarea { grid-column: 1 / -1; resize: vertical; }

.r2w-rfq-response { margin-top: 12px; padding: 10px; border-radius: 4px; display: none; }
.r2w-rfq-response--success { background: #E8F5E9; color: var(--r2w-success); }
.r2w-rfq-response--error   { background: #FFEBEE; color: var(--r2w-danger); }

/* ── Profile loaded notice ───────────────────────────────────── */
.r2w-profile-loaded {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* ── Admin override panel ────────────────────────────────────── */
.r2w-override-panel {
    background: #FFF8E1;
    border: 2px solid var(--r2w-accent);
    border-radius: var(--r2w-radius);
    padding: 16px 20px;
    margin: 16px 0;
}

.r2w-override-panel h3 { margin-top: 0; color: var(--r2w-primary); }
.r2w-override-warning  { color: var(--r2w-warning); font-weight: 600; }

.r2w-override-data { width: 100%; border-collapse: collapse; margin: 12px 0; }
.r2w-override-data th { text-align: left; width: 180px; padding: 4px 8px; color: #666; font-weight: 600; font-size: 13px; }
.r2w-override-data td { padding: 4px 8px; font-size: 13px; }

.r2w-override-form { margin-top: 12px; }
.r2w-badge--danger { background: #FFEBEE; color: var(--r2w-danger); border: 1px solid #EF9A9A; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .r2w-date-row,
    .r2w-rider-row,
    .r2w-rfq-fields { grid-template-columns: 1fr; }
    .r2w-form-actions { flex-direction: column; }
    .r2w-btn { width: 100%; }
}