/* ============================================================
   FIND-DRIVERS PAGE — styles/find-drivers.css
   ------------------------------------------------------------
   Moved out of find-drivers.html's inline <style> block, verbatim
   (separation standard: docs/frontend-separation.md). Linked after
   styles/styles.css so page rules still win.
   ============================================================ */

.drivers-hero {
    background: linear-gradient(135deg, var(--accent-deep), var(--accent));
    border-radius: 1.5rem; padding: 2.5rem; color: #fff; margin-bottom: 2rem; text-align: center;
}
.drivers-hero h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.drivers-hero p { margin: 0.5rem auto 0; max-width: 640px; opacity: 0.95; }

/* Search + filter bar */
.filter-bar { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.search-wrap { position: relative; }
.search-wrap input {
    width: 100%; padding: 0.85rem 1.1rem 0.85rem 2.8rem; border-radius: 14px;
    border: 1px solid var(--line); background: var(--surface-strong); color: var(--ink);
    font: inherit; font-size: 1rem;
}
.search-wrap input:focus { outline: none; border-color: var(--accent); }
.search-icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
}
.search-icon svg { width: 1.1rem; height: 1.1rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.filter-field { display: flex; flex-direction: column; gap: 0.25rem; }
.filter-field label { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.filter-field select, .filter-field input {
    padding: 0.6rem 0.8rem; border-radius: 12px; border: 1px solid var(--line);
    background: var(--surface-strong); color: var(--ink); font: inherit; font-size: 0.9rem;
}
.filter-field select:focus, .filter-field input:focus { outline: none; border-color: var(--accent); }
.filter-field input[type="date"] { color-scheme: dark; }

/* Driver cards */
.drivers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.driver-card {
    background: var(--surface-strong); border: 1px solid var(--line); border-radius: 1.5rem;
    padding: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.85rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.driver-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.driver-card-top { display: flex; align-items: center; gap: 1rem; }
.driver-avatar {
    width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700;
    flex: 0 0 64px; overflow: hidden;
}
.driver-avatar img { width: 100%; height: 100%; object-fit: cover; }
.driver-card h3 { margin: 0; font-size: 1.2rem; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.verified-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1em; height: 1.1em; border-radius: 50%; background: #1d9bf0;
    color: #fff; font-size: 0.65em; font-weight: 800; line-height: 1;
    vertical-align: middle; cursor: help;
}
.payment-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: rgba(46, 204, 113, 0.15); color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4); border-radius: 999px;
    padding: 0.2rem 0.6rem; font-size: 0.72rem; font-weight: 700;
    cursor: help; margin-top: 0.3rem;
}
.payment-badge svg { width: 0.85em; height: 0.85em; }

.trust-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.85rem; font-weight: 700;
    cursor: help; border: 1px solid transparent;
}
.trust-pill.green { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border-color: rgba(46, 204, 113, 0.4); }
.trust-pill.blue { background: rgba(29, 155, 240, 0.15); color: #1d9bf0; border-color: rgba(29, 155, 240, 0.4); }
.trust-pill.orange { background: rgba(230, 126, 34, 0.15); color: #e67e22; border-color: rgba(230, 126, 34, 0.4); }
.rep-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 600;
    cursor: help; border: 1px solid transparent;
    background: rgba(29, 155, 240, 0.08); color: var(--muted, #8b9bb0); border-color: rgba(29, 155, 240, 0.25);
    margin-left: 0.4rem;
}
.rep-pill.rep-empty { background: rgba(120, 130, 150, 0.1); color: var(--muted, #8b9bb0); border-color: rgba(120, 130, 150, 0.25); }


.driver-meta { color: var(--muted); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.driver-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.driver-bio {
    color: var(--muted); font-size: 0.9rem; line-height: 1.5; flex: 1;
    min-width: 0; margin: 0; overflow: hidden;
}
.driver-bio span {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    line-clamp: 3; overflow: hidden; overflow-wrap: anywhere;
}
.vehicle-list { display: flex; flex-direction: column; gap: 0.4rem; }
.vehicle-photos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem; margin: 0.6rem 0;
}
.vehicle-photos img {
    width: 100%; height: 110px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--line);
}
.vehicle-item {

    display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink);
    background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.4rem 0.7rem;
}
.vehicle-item svg { width: 1rem; height: 1rem; color: var(--accent); flex: 0 0 auto; }
.driver-rate { font-size: 1.3rem; font-weight: 800; color: var(--accent-deep); }
.driver-rate small { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.driver-rate-prompt { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.driver-price-row {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    padding: 0.45rem 0.7rem;
}
.driver-service-select {
    padding: 0.35rem 0.55rem; border-radius: 9px; border: 1px solid var(--line);
    background: var(--surface-strong); color: var(--ink); font: inherit;
    font-size: 0.82rem; font-weight: 600; cursor: pointer; max-width: 100%;
}
.driver-service-select:focus { outline: none; border-color: var(--accent); }
.route-highlight { animation: routeFlash 1.2s ease; }
@keyframes routeFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 93, 4, 0); }
    35% { box-shadow: 0 0 0 4px rgba(232, 93, 4, 0.55); }
}
/* Provider workload notice: informational, muted, never a warning. */
.workload-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
}
.workload-notice svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.workload-notice-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 0.15rem; }
.driver-card-actions { margin-top: 0.25rem; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.guide-tag {
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.25rem 0.7rem; font-size: 0.8rem; color: var(--muted);
}
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.2rem; border: none; border-radius: 12px; background: var(--accent);
    color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.2s, transform 0.2s;
}
.btn:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px); }
.btn.block { width: 100%; }
.btn.outline { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn.outline:hover { border-color: var(--accent); background: transparent; color: var(--accent); }

/* Empty state */
.drivers-empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.drivers-empty .empty-emoji { font-size: 3rem; margin-bottom: 0.5rem; }
.drivers-empty h2 { color: var(--ink); font-size: 1.4rem; margin: 0 0 0.5rem; }
.drivers-empty p { margin: 0 0 1.5rem; }
.drivers-loading { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.hidden { display: none !important; }

/* ============================================================
   Card presentation zones
   ------------------------------------------------------------
   .card-media, .card-main and .card-side group the existing card
   content into the identity, information and action zones used by the
   desktop layout. Below the desktop breakpoint they add no box of their
   own, so the card keeps exactly the vertical layout it has today.
   ============================================================ */
.card-media { display: flex; }
.card-main, .card-side { display: contents; }

@media (min-width: 1024px) {
    /* Desktop: one full-width horizontal card per row. */
    .drivers-grid { grid-template-columns: 1fr; gap: var(--space-6); }

    .driver-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(220px, 260px);
        align-items: start;
        column-gap: var(--space-6);
        row-gap: var(--space-3);
        padding: var(--space-5) var(--space-6);
        /* Desktop premium treatment: no hard outline - the soft warm shadow and
           the white-on-cream surface step carry the card edge instead. */
        border: none;
        box-shadow: var(--shadow);
    }
    .driver-card:hover { box-shadow: 0 30px 80px rgba(120, 52, 16, 0.20); }

    /* Identity zone: portrait, name, verification */
    .driver-card-top { display: contents; }
    .card-media { grid-column: 1; grid-row: 1 / span 2; }
    .card-media .driver-avatar {
        width: 104px; height: 104px; flex: 0 0 104px; font-size: 2.25rem;
        box-shadow: 0 0 0 6px var(--accent-soft);
    }
    .card-identity {
        grid-column: 2; grid-row: 1;
        display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0;
    }
    .card-identity .payment-badge { margin-top: 0; }

    /* Information zone */
    .card-main {
        grid-column: 2; grid-row: 2;
        display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
    }
    .card-main .driver-bio { flex: 0 0 auto; }

    /* Action zone: price, availability notice, primary action */
    .card-side {
        grid-column: 3; grid-row: 1 / span 2;
        display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); min-width: 0;
        border-left: 1px solid var(--line); padding-left: var(--space-5);
    }
    .driver-rate { font-size: 1.5rem; }
    .workload-notice { margin: 0; }
    .driver-card-actions { margin-top: 0; }
}