*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f5f3f8;color:#201b25}
.page{max-width:820px;margin:0 auto;padding:18px}
.card{background:#fff;border-radius:18px;padding:22px;margin-bottom:18px;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.hero{text-align:center;background:linear-gradient(135deg,#44205f,#74508e);color:#fff}
.brand{text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.82rem}
h1{margin:.35rem 0}.hero p{margin:.3rem 0 0}
label{display:block;font-weight:700;margin:14px 0 6px}
input,select{width:100%;padding:14px;border:1px solid #cfc7d5;border-radius:10px;font-size:16px;background:#fff}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
button{width:100%;border:0;border-radius:11px;padding:15px;margin-top:12px;font-weight:700;font-size:16px;background:#5c2a7e;color:#fff;cursor:pointer}
button.secondary{background:#ebe4f0;color:#4d2368;border:1px solid #cdbbd8}
button.small{width:auto;padding:9px 13px;margin:0}
.hidden{display:none}
.rider-account summary{font-weight:700;cursor:pointer;min-height:48px;background:#5c2a7e;color:#fff;border:0;border-radius:11px;padding:15px;text-align:center;list-style:none}
.rider-account summary::-webkit-details-marker{display:none}
.rider-account summary::marker{content:''}
.rider-account h2{font-size:1.2rem;margin-top:24px}
.rider-account #profileMessage{color:#4d2368}
.saved-card-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #ebe4f0}

.ride-type-fieldset{border:0;padding:0;margin:0 0 18px}
.ride-type-fieldset legend{font-weight:800;margin-bottom:10px}
.ride-type-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ride-type-option{position:relative;margin:0;cursor:pointer}
.ride-type-option input{position:absolute;opacity:0;pointer-events:none}
.ride-type-option span{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px;border:2px solid #d7cce0;border-radius:14px;background:#fff;transition:.15s ease}
.ride-type-option strong{font-size:1.08rem;color:#4d2368}
.ride-type-option small{font-weight:400;line-height:1.3;color:#6e6475}
.ride-type-option input:checked+span{border-color:#6e3493;background:#f4eff7;box-shadow:0 0 0 2px rgba(110,52,147,.12)}
.ride-type-option input:focus-visible+span{outline:3px solid #b88bd3;outline-offset:2px}

.estimate-box{margin:18px 0 6px;padding:18px;border-radius:14px;background:#f4eff7;text-align:center}
.price{font-size:2rem;font-weight:800;margin:.15rem 0}.muted{color:#6e6475;font-size:.92rem}
.notice{padding:12px;border-radius:10px;background:#fff6d8;margin-top:12px}
.stop-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.stop-row button{width:auto;padding:13px 15px}
.dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ride{border:1px solid #ddd3e3;border-radius:14px;padding:16px;margin:14px 0}
.ride h3{margin:0 0 8px}.ride p{margin:6px 0}.status{font-weight:800}
.actions{display:flex;gap:10px;margin-top:12px}.actions button{margin:0}
.map-link{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;border-radius:11px;padding:13px 15px;font-weight:700;font-size:16px;background:#2d6a3f;color:#fff;min-width:180px}
.actions .decline{background:#eee;color:#333}
.rate-table{width:100%;border-collapse:collapse}.rate-table td{padding:7px 0;border-bottom:1px solid #eee}
@media(max-width:600px){.grid.two{grid-template-columns:1fr}.card{padding:18px}.page{padding:10px}.actions{flex-direction:column}.ride-type-options{grid-template-columns:1fr 1fr;gap:8px}.ride-type-option span{padding:13px 11px}}

.address-suggestions{display:grid;gap:2px;margin-top:4px;position:relative;z-index:20}
.address-suggestion{background:#fff;color:#251036;border:1px solid #ded3e8;border-radius:8px;padding:10px 12px;text-align:left;font-weight:500}
.address-suggestion:hover,.address-suggestion:focus{background:#f1e9f7}


.pay-summary-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(28,18,34,.72)}
.pay-summary-overlay.hidden{display:none}
.pay-summary-card{width:min(430px,100%);background:#fff;border-radius:18px;padding:24px;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.pay-summary-card h2{text-align:center;margin-top:0;color:#4d2368}
.pay-summary-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #eee}
.pay-summary-total{font-size:1.3rem;border-bottom:0;color:#4d2368}

.tone-control{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:.9rem}
.tone-control select{width:auto;margin:0;padding:8px 10px;font-size:.9rem}

.ride-map{width:100%;height:260px;border-radius:14px;margin:14px 0;overflow:hidden;border:1px solid #d9d0df;background:#eee8f2}
.ride-map .map-error{padding:18px;text-align:center}
@media(max-width:600px){.ride-map{height:220px}}

/* Driver dashboard visual refresh — layout only; existing behavior is unchanged. */
.driver-tools-card{padding:24px}
.driver-tools-heading{text-align:center;margin-bottom:20px}
.driver-tools-heading h2{margin:0;color:#542273;text-transform:uppercase;letter-spacing:.035em;font-size:1.7rem}
.driver-tools-heading h2:before,.driver-tools-heading h2:after{content:"";display:inline-block;width:56px;height:2px;margin:0 12px 6px;background:linear-gradient(90deg,transparent,#7a35a0)}
.driver-tools-heading h2:after{background:linear-gradient(90deg,#7a35a0,transparent)}
.driver-tools-heading p{margin:6px 0 0;color:#625969}
.driver-alert-controls{max-width:680px;margin:0 auto}
.driver-alert-main{width:100%;margin:0 0 14px;padding:15px;border-radius:13px;font-size:1.05rem}
.driver-tone-control{display:grid;grid-template-columns:auto minmax(180px,1fr);align-items:center;gap:14px;margin:0 0 14px;font-size:1rem}
.driver-tone-control span{white-space:nowrap}
.driver-tone-control select{width:100%}
.driver-arm-button{width:100%;margin:0 0 14px;padding:12px}
.driver-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
button.driver-tool-button{width:100%;margin:0;min-height:54px;padding:13px}
.driver-tools-card #rides:empty:after{content:"No ride requests yet.";display:block;text-align:center;color:#6e6475;background:#f7f5f9;border-radius:14px;padding:28px 16px;margin-top:8px}
@media(max-width:600px){
  .driver-tools-card{padding:18px}
  .driver-tools-heading h2{font-size:1.5rem}
  .driver-tools-heading h2:before,.driver-tools-heading h2:after{width:34px;margin-left:8px;margin-right:8px}
  .driver-tone-control{grid-template-columns:auto 1fr;gap:10px}
  .driver-tool-grid{grid-template-columns:1fr 1fr;gap:10px}
  button.driver-tool-button{font-size:.95rem;padding:12px 8px}
}

.no-ride-requests{text-align:center;width:100%;margin:24px auto 8px}

.additional-charges-button{display:block;max-width:100%;margin:0 auto 18px}
.additional-charges-modal h2{margin-bottom:6px}
.additional-charges-intro{text-align:center;margin:0 0 14px}
.additional-charges-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;background:#5c2a7e;color:#fff;font-size:1.8rem;font-family:Georgia,serif;font-weight:700}
.additional-charges-modal .rate-table td{padding:12px 4px}
.additional-charges-modal .rate-table td:last-child{text-align:right;padding-left:18px}

.schedule-picker{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.schedule-picker.hidden{display:none}
.schedule-input-wrap{position:relative}
.schedule-input-wrap input{padding-left:48px;min-height:50px}
.schedule-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1.25rem;pointer-events:none;z-index:1}
@media(max-width:600px){.schedule-picker{grid-template-columns:1fr 1fr;gap:10px}.schedule-input-wrap input{padding-left:42px;padding-right:8px}}

.driver-name-status{display:flex;align-items:center;justify-content:center;gap:9px}
.driver-status-led{display:inline-block;width:13px;height:13px;flex:0 0 13px;border-radius:50%;border:1px solid rgba(255,255,255,.85);transition:background .25s,box-shadow .25s}
.driver-status-led.online{background:#35e34a;box-shadow:0 0 5px #35e34a,0 0 10px rgba(53,227,74,.9),inset 0 0 3px rgba(255,255,255,.9)}
.driver-status-led.offline{background:#ff3838;box-shadow:0 0 5px #ff3838,0 0 10px rgba(255,56,56,.85),inset 0 0 3px rgba(255,255,255,.8)}

/* Driver-only night display. Rider pages remain unchanged. */
html.driver-dark{color-scheme:dark}
html.driver-dark body{background:#0f0d12;color:#eee9f2}
html.driver-dark .card{background:#1a171e;color:#eee9f2;box-shadow:0 8px 28px rgba(0,0,0,.35)}
html.driver-dark .hero{background:linear-gradient(135deg,#281437,#4b2b5d);color:#fff}
html.driver-dark .driver-tools-heading h2{color:#d8a9ef}
html.driver-dark .driver-tools-heading p,
html.driver-dark .muted{color:#bdb4c2}
html.driver-dark input,
html.driver-dark select{background:#242028;color:#f5f1f7;border-color:#4c4353}
html.driver-dark button.secondary{background:#302a35;color:#eadcf1;border-color:#5b4c64}
html.driver-dark .ride{background:#201c24;border-color:#443a4a}
html.driver-dark .pay-summary-card{background:#1d1921;color:#f3edf6}
html.driver-dark .pay-summary-card h2,
html.driver-dark .pay-summary-total{color:#d8a9ef}
html.driver-dark .pay-summary-row,
html.driver-dark .rate-table td{border-color:#3d3542}
html.driver-dark .address-suggestion{background:#242028;color:#f3edf6;border-color:#4c4353}
html.driver-dark .address-suggestion:hover,
html.driver-dark .address-suggestion:focus{background:#342c3a}
html.driver-dark .ride-map{background:#242028;border-color:#4c4353}
html.driver-dark .notice{background:#332d1c;color:#f1e8bf}
html.driver-dark .no-ride-requests{color:#bdb4c2}

/* Keep Display selector aligned with Alert Tone selector. */
.driver-tone-control span{width:104px}
.driver-display-control span{width:104px}
.driver-display-control select{width:100%}


/* Rider Message Us button — compact and independent of driver availability. */
.ride-choice-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ride-choice-head legend{margin:0}
.rider-message-button{display:flex;align-items:center;justify-content:center;width:calc((100% - 12px)/2);min-height:34px;padding:7px 12px;border-radius:10px;background:#5c2a7e;color:#fff;text-decoration:none;text-align:center;font-weight:700;font-size:.92rem;line-height:1.1}
@media(max-width:600px){.ride-choice-head{gap:8px}.rider-message-button{width:calc((100% - 8px)/2);min-height:32px;padding:6px 8px;font-size:.88rem}}

.rider-login-options{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.rider-login-options label{min-height:44px;cursor:pointer}
.rider-login-options input[type=checkbox]{flex-shrink:0}
@media(max-width:480px){
  .rider-login-options{flex-wrap:nowrap;gap:8px}
  .rider-login-options label{font-size:12px;gap:5px!important;white-space:nowrap}
  .rider-login-options input[type=checkbox]{width:16px!important;height:16px}
}

button.availability-switch{display:flex;align-items:center;justify-content:center;gap:10px;background:#ebe4f0;color:#4d2368;border:1px solid #cdbbd8}
.availability-light{width:13px;height:13px;border-radius:50%;flex-shrink:0;background:#dc2626;box-shadow:0 0 7px #dc2626}
.availability-light.on{background:#22c55e;box-shadow:0 0 7px #22c55e}
.availability-toggle{width:38px;height:22px;border-radius:20px;background:#dc2626;position:relative;flex-shrink:0}
.availability-toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:white;top:3px;left:3px}
.availability-toggle.on{background:#22c55e}
.availability-toggle.on::after{left:19px}