:root{--yellow:#f6c400;--black:#111;--bg:#f8f5e9;--line:#d8ceb2;--green:#137a3a}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#fff 0%,#faf7ec 55%,#f0e9d4 100%);color:#111}body:before{content:"";position:fixed;left:0;right:0;bottom:0;height:190px;background:linear-gradient(transparent,rgba(246,196,0,.18)),repeating-linear-gradient(90deg,transparent 0 70px,rgba(0,0,0,.035) 70px 112px);pointer-events:none}.app-shell{max-width:1150px;margin:auto;padding:14px}.topbar{display:flex;align-items:center;justify-content:space-between;background:#111;color:#fff;border-radius:0 0 16px 16px;padding:12px 16px;position:sticky;top:0;z-index:10}.brand{display:flex;gap:10px;align-items:center}.brand-logo{width:52px;height:52px;border-radius:12px;object-fit:cover;background:#fff}.brand-title{font-weight:900;font-size:28px;line-height:1}.brand-title span,h1 span{color:var(--yellow)}.brand-sub{font-size:13px}.api-pill{background:#444;padding:9px 14px;border-radius:20px;font-weight:800}.api-pill.online{background:var(--green)}.api-pill.offline{background:#c92d2d}.screen{display:none}.screen.active{display:block}.auth-card,.panel{background:rgba(255,255,255,.94);border:2px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 12px 28px rgba(0,0,0,.08)}.splash-card,.auth-card{max-width:440px;margin:40px auto;text-align:center;border-color:#111}.splash-logo,.auth-logo{width:170px;height:120px;object-fit:contain;background:#fff;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.12)}.splash-card h1,.auth-card h1{font-size:36px;margin:10px 0 4px}.subline,.splash-card p{font-weight:800}.loader{width:50px;height:50px;border:6px solid #eee;border-top-color:var(--yellow);border-radius:50%;margin:20px auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-form{display:none;text-align:left}.auth-form.active{display:block}.auth-actions.hidden{display:none}label{display:block;font-weight:900;margin:14px 0 7px}input,select{width:100%;padding:14px;border:2px solid var(--line);border-radius:12px;font-size:16px;background:#fffdf6}.btn{border:3px solid #111;border-radius:12px;padding:14px 18px;font-size:17px;font-weight:900;cursor:pointer;margin:8px 0}.btn.primary{background:var(--yellow);color:#111}.btn.secondary{background:#fff;color:#111}.btn.accent{background:#20d46b;color:#111}.btn.small{padding:6px 12px;font-size:13px;border-width:2px}.full{width:100%}.link-btn{background:transparent;border:0;text-decoration:underline;font-weight:900;font-size:16px;cursor:pointer;margin:10px;color:#111}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}.button-row{display:flex;gap:10px}.page-title{font-size:34px;margin:20px 0}.result-card .price{font-size:70px;font-weight:900}.small-label{text-transform:uppercase;font-size:13px;letter-spacing:.08em;font-weight:900;color:#555}.tips button{background:var(--yellow);border:2px solid #111;border-radius:10px;padding:10px 14px;font-weight:900;margin-right:8px}.map{height:340px;border:2px solid #111;border-radius:12px;overflow:hidden}.map-head,.map-metrics{display:flex;justify-content:space-between;gap:10px;align-items:center}.suggestions{background:#fff;border-radius:12px;overflow:hidden;margin-top:5px}.suggestions .item{padding:11px;border:1px solid var(--line);cursor:pointer}.suggestions .item:hover{background:#fff4bf}.message{font-weight:800;color:#6b4d00}.staff-note{font-size:13px;color:#555}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111;color:#fff;border:3px solid var(--yellow);padding:14px 22px;border-radius:22px;font-weight:900;z-index:99;max-width:90%;text-align:center}.driver-row,.ride-row{padding:10px;border-bottom:1px solid #ddd}@media(max-width:760px){.app-shell{padding:0 8px}.grid.two,.grid.three{grid-template-columns:1fr}.topbar{border-radius:0}.brand-title{font-size:22px}.brand-logo{width:46px;height:46px}.auth-card{margin:28px auto}.result-card .price{font-size:48px}.button-row{flex-direction:column}.map{height:270px}.page-title{font-size:28px}.topbar{position:relative}}

.payment-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 12px}
.pay-option{border:3px solid #111;background:#fff;border-radius:14px;padding:14px 10px;font-weight:900;font-size:16px;cursor:pointer}
.pay-option.active{background:#f6c400;box-shadow:0 4px 0 #111}
.hidden-select{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.otp-box{margin-top:10px;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fffaf0}.otp-box[hidden]{display:none!important}.otp-box .link-btn{margin-left:0}
.selfie-preview{display:grid;gap:8px;justify-items:center;margin:10px 0;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fffaf0}.selfie-preview[hidden]{display:none!important}.selfie-preview img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:3px solid #111;background:#fff}.consent-line{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.35}.consent-line input{width:auto;margin-top:2px}
@media(max-width:640px){.payment-choice{grid-template-columns:1fr}.pay-option{font-size:18px;padding:16px 12px}}
.route-marker{width:30px;height:30px;border:3px solid #111;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#111;box-shadow:0 4px 10px rgba(0,0,0,.25)}.route-marker.pickup{background:#fff}.route-marker.dropoff{background:var(--yellow)}.route-marker.driver{background:#20d46b;color:#111}
.ride-status-panel{display:grid;gap:3px;margin:8px 0 10px;padding:12px;border:2px solid var(--yellow);border-radius:12px;background:#101010;color:#fff}.ride-status-panel[hidden]{display:none!important}.ride-status-panel b{color:var(--yellow);font-size:18px}.ride-status-panel span{font-weight:800}
.live-ride-card{margin-top:16px;padding:14px;border:2px solid var(--yellow);border-radius:12px;background:#101010;color:#fff;text-align:left}.live-ride-card[hidden]{display:none!important}.live-ride-card h2{margin:4px 0 8px;color:var(--yellow);font-size:24px;line-height:1.1}.live-ride-card p{font-weight:800}.live-ride-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.live-ride-meta span{border:1px solid #333;border-radius:10px;padding:10px;background:#080808;color:#d8d8d8}.live-ride-meta b{display:block;color:#fff;font-size:18px}.live-ride-card[data-status="ACCEPTED"],.live-ride-card[data-status="ARRIVED"]{border-color:#20d46b}.live-ride-card[data-status="ACCEPTED"] h2,.live-ride-card[data-status="ARRIVED"] h2{color:#20d46b}
.cancel-ride-btn{width:100%;margin-top:12px;border:2px solid #ff5a5a;color:#fff;background:#5f1111;border-radius:10px;padding:11px;font-weight:900;cursor:pointer}.cancel-ride-btn[hidden]{display:none!important}.cancel-ride-btn:hover{border-color:#ff9a9a}

body.theme-dark{background:#090909;color:#fff}
body.theme-dark:before{background:linear-gradient(transparent,rgba(246,196,0,.12)),repeating-linear-gradient(90deg,transparent 0 70px,rgba(246,196,0,.06) 70px 112px)}
body.theme-dark .topbar{background:linear-gradient(135deg,var(--yellow) 0 34%,#111 34% 100%);color:#fff;border-bottom:2px solid var(--yellow);border-radius:0;padding:16px 20px}
body.theme-dark .brand-title,body.theme-dark .brand-sub{color:#111;text-shadow:none}
body.theme-dark .brand-logo{border:2px solid #111}
body.theme-dark .api-pill{background:var(--yellow);color:#111;border:2px solid #111}
body.theme-dark .page-title{color:var(--yellow)}
body.theme-dark .panel,body.theme-dark .auth-card,body.theme-dark .splash-card{background:#171717;border-color:#333;color:#fff;box-shadow:0 18px 34px rgba(0,0,0,.35)}
body.theme-dark .splash-card,body.theme-dark .auth-card{border-color:var(--yellow)}
body.theme-dark label,body.theme-dark .small-label,body.theme-dark .map-head h3{color:var(--yellow)}
body.theme-dark input,body.theme-dark select{background:#0b0b0b;color:#fff;border-color:#444}
body.theme-dark input::placeholder{color:#bdbdbd}
body.theme-dark .btn,body.theme-dark .pay-option,body.theme-dark .tips button{border-color:#111}
body.theme-dark .btn.primary,body.theme-dark .pay-option.active,body.theme-dark .tips button{background:var(--yellow);color:#111}
body.theme-dark .btn.secondary,body.theme-dark .pay-option{background:#0d0d0d;color:#fff;border-color:#555}
body.theme-dark .btn.secondary:hover,body.theme-dark .pay-option:hover{border-color:var(--yellow)}
body.theme-dark .result-card .price{color:#fff}
body.theme-dark .suggestions{background:#0d0d0d;color:#fff;border:1px solid #333}
body.theme-dark .suggestions .item{border-color:#333}
body.theme-dark .suggestions .item:hover{background:#2c2500}
body.theme-dark .map{border-color:var(--yellow)}
body.theme-dark .map-metrics,body.theme-dark .map-head span,body.theme-dark footer,body.theme-dark .staff-note{color:#ddd}
body.theme-dark .link-btn{color:var(--yellow)}
body.theme-dark .otp-box,body.theme-dark .selfie-preview{background:#101010;border-color:#333}

.service-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 14px}.muted-note{color:#aaa;font-size:13px;margin:-4px 0 8px}.surge-banner{display:none;align-items:center;gap:8px;background:linear-gradient(135deg,#3a2600,#241900);border:1.5px solid #f6c400;color:#ffd966;border-radius:12px;padding:10px 14px;margin:0 0 12px;font-weight:800;font-size:14px}.surge-banner.active{display:flex}.surge-banner .surge-mult{background:#f6c400;color:#111;padding:2px 9px;border-radius:999px;font-weight:900}.service-card{min-height:145px;border:2px solid #3b3b3b;border-radius:18px;background:#171717;color:#fff;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;transition:.2s}.service-card:hover,.service-card.active{border-color:#f6c400;box-shadow:0 0 0 3px rgba(246,196,0,.16);transform:translateY(-2px)}.service-card.active{background:linear-gradient(145deg,#2b2400,#171717)}.service-icon{font-size:42px}.service-card b{font-size:22px;color:#f6c400}.service-card small{font-size:14px;color:#ddd}.selected-service-line{display:inline-block;background:#f6c400;color:#000;padding:9px 14px;border-radius:999px;margin-bottom:12px}.booking-heading{margin-top:4px}.service-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #f6c400;border-radius:999px;padding:4px 9px;color:#f6c400;font-weight:700}@media(max-width:760px){.service-selector{grid-template-columns:1fr}.service-card{min-height:105px;display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;align-items:center}.service-icon{grid-row:1/3}.service-card b{font-size:20px}}

#recaptcha-container{margin:10px 0}
.chat-widget-panel{margin-top:16px;padding:16px;border:2px solid var(--yellow);border-radius:14px;background:#121212;color:#fff;text-align:left}
.chat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.chat-header h3{margin:0;font-size:18px;color:var(--yellow)}
.chat-badge{background:var(--green);color:#fff;font-weight:900;font-size:12px;padding:3px 8px;border-radius:10px}
.chat-messages-box{max-height:220px;min-height:120px;overflow-y:auto;border:1px solid #333;border-radius:10px;padding:10px;background:#0a0a0a;display:flex;flex-direction:column;gap:8px}
.chat-empty-notice{font-size:13px;color:#888;text-align:center;margin-top:20px}
.chat-msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.3;word-break:break-word}
.chat-msg.sent{align-self:flex-end;background:var(--yellow);color:#111;border-bottom-right-radius:2px;font-weight:700}
.chat-msg.received{align-self:flex-start;background:#242424;color:#fff;border-bottom-left-radius:2px;border:1px solid #444}
.chat-msg .chat-meta{font-size:10px;opacity:0.75;margin-top:4px;display:block;text-align:right}
.chat-input-form{display:flex;gap:8px;margin-top:10px}
.chat-input-form input{flex:1;padding:10px 14px;font-size:14px;border-radius:10px}
.chat-input-form button{margin:0;padding:10px 16px;font-size:14px}

/* Topbar Navigation Links */
.nav-links{display:flex;gap:8px;align-items:center}
.nav-btn{background:transparent;border:1px solid #444;color:#fff;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s}
.nav-btn:hover{border-color:var(--yellow);color:var(--yellow)}

/* Driver Agent Dashboard & Cards */
.auth-card.wide{max-width:780px}
.agent-dashboard{display:flex;flex-direction:column;gap:16px;text-align:left}
.agent-profile-banner{display:flex;justify-content:space-between;align-items:center;background:#101010;border:2px solid var(--yellow);padding:14px 18px;border-radius:14px}
.agent-profile-banner h3{margin:0 0 4px;color:var(--yellow);font-size:22px}
.highlight-code{background:var(--yellow);color:#111;padding:3px 8px;border-radius:6px;font-family:monospace;font-size:15px}
.metrics-row{margin:10px 0}
.metric-card{background:#111;border:2px solid #333;border-radius:14px;padding:16px;text-align:center}
.metric-card.highlight{border-color:var(--yellow);background:#1d1800}
.metric-label{font-size:13px;color:#aaa;font-weight:700;text-transform:uppercase}
.metric-value{font-size:28px;font-weight:900;color:var(--yellow);margin-top:6px}
.recruits-table{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.table-row{display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr;padding:10px 14px;background:#0d0d0d;border-radius:10px;align-items:center;font-size:14px}
.table-row.head{background:#222;font-weight:900;color:var(--yellow);font-size:12px;text-transform:uppercase}
.badge{padding:3px 8px;border-radius:6px;font-size:11px;font-weight:900;display:inline-block;width:fit-content}
.badge.active{background:var(--green);color:#fff}

/* Floating Gemini AI Widget */
.ai-floating-btn{position:fixed;right:22px;bottom:22px;background:linear-gradient(135deg,#f6c400,#ff9900);border:3px solid #111;color:#111;border-radius:30px;padding:12px 20px;display:flex;align-items:center;gap:8px;font-weight:900;font-size:16px;box-shadow:0 10px 25px rgba(246,196,0,.4);cursor:pointer;z-index:999;transition:transform .2s}
.ai-floating-btn:hover{transform:scale(1.05)}
.ai-modal{position:fixed;right:22px;bottom:84px;width:380px;max-width:calc(100vw - 32px);height:500px;max-height:calc(100vh - 120px);z-index:1000}
.ai-modal-card{background:#141414;border:3px solid var(--yellow);border-radius:20px;height:100%;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(0,0,0,.6);overflow:hidden}
.ai-modal-header{background:#1f1f1f;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #333}
.ai-header-title{display:flex;align-items:center;gap:10px}
.ai-avatar{font-size:24px}
.ai-header-title h3{margin:0;font-size:16px;color:var(--yellow)}
.ai-header-title small{color:#aaa;font-size:11px}
.ai-close-btn{background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}
.ai-chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:#0a0a0a}
.ai-bubble{max-width:88%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.4}
.ai-bubble.sent{align-self:flex-end;background:var(--yellow);color:#111;font-weight:700}
.ai-bubble.received{align-self:flex-start;background:#202020;color:#fff;border:1px solid #333}
.ai-quick-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.quick-btn{background:#2a2a2a;border:1px solid var(--yellow);color:var(--yellow);padding:5px 9px;border-radius:12px;font-size:12px;font-weight:700;cursor:pointer}
.quick-btn:hover{background:var(--yellow);color:#111}
.ai-chat-input-row{display:flex;gap:8px;padding:10px;background:#181818;border-top:1px solid #333}
.ai-chat-input-row input{flex:1;padding:10px;font-size:14px;border-radius:10px}
.ai-chat-input-row button{margin:0;padding:10px 14px;font-size:14px}
.ai-action-line{margin-top:8px}

/* Public Info Modal */
.info-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;z-index:2000;padding:20px}
.info-modal[hidden]{display:none!important}
.info-modal-card{background:#181818;border:3px solid var(--yellow);border-radius:20px;max-width:650px;width:100%;max-height:85vh;overflow-y:auto;padding:24px;position:relative;color:#fff;text-align:left}
.info-modal-card h2{color:var(--yellow);margin-top:0}
.info-modal-card p, .info-modal-card li{line-height:1.6;color:#ddd}
.info-modal-card ul{padding-left:20px}

@media(max-width:760px){
  .nav-links{display:none}
  .ai-modal{right:10px;bottom:75px;width:calc(100vw - 20px)}
  .table-row{grid-template-columns:1fr 1fr;gap:4px}
}

/* Owner portal cross-links (registration / agent -> owner.suk-n-tuk.co.za) */
a.btn{display:inline-block;text-decoration:none;text-align:center;box-sizing:border-box}
.agent-owner-cta{margin-top:18px;padding-top:14px;border-top:2px dashed var(--line);text-align:center}
.agent-owner-cta p{font-weight:700;margin:0 0 8px}

/* Mobile "get the app" banner */
.app-download-banner{display:flex;align-items:center;gap:10px;background:#111;color:#fff;border-bottom:3px solid var(--yellow);padding:10px 14px;font-weight:800;font-size:14px}
.app-download-banner .adb-text{flex:1}
.app-download-banner a.btn{margin:0;padding:8px 14px;font-size:14px}
.app-download-banner .adb-close{background:transparent;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}