/*
Theme Name: KiaraHub Cab Rental
Theme URI: https://kiarahub.com
Author: KiaraHub
Description: Ride-hailing & outstation cab rental theme for kiarahub.com. Supports instant city rides and scheduled outstation rentals, driver & customer accounts, real-time GPS/live map driver matching, and cash-only payments.
Version: 1.0.0
Text Domain: kiarahub
*/

:root{
  --kh-primary:#0b8457;
  --kh-primary-dark:#066241;
  --kh-accent:#ffb703;
  --kh-dark:#14213d;
  --kh-gray:#6b7280;
  --kh-bg:#f7f8fa;
  --kh-white:#ffffff;
  --kh-radius:12px;
}

*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--kh-bg);color:#1f2937;line-height:1.5;}
a{color:var(--kh-primary);text-decoration:none;}
img{max-width:100%;display:block;}
.kh-container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* Header */
.kh-header{background:var(--kh-white);border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50;}
.kh-header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.kh-logo{font-weight:800;font-size:22px;color:var(--kh-dark);}
.kh-logo span{color:var(--kh-primary);}
.kh-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
.kh-nav a{color:var(--kh-dark);font-weight:600;font-size:15px;}
.kh-nav a:hover{color:var(--kh-primary);}
.kh-header-actions{display:flex;gap:10px;align-items:center;}

/* Buttons */
.kh-btn{display:inline-block;padding:10px 20px;border-radius:8px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:.15s;}
.kh-btn-primary{background:var(--kh-primary);color:#fff;}
.kh-btn-primary:hover{background:var(--kh-primary-dark);color:#fff;}
.kh-btn-outline{background:transparent;border:2px solid var(--kh-primary);color:var(--kh-primary);}
.kh-btn-outline:hover{background:var(--kh-primary);color:#fff;}
.kh-btn-accent{background:var(--kh-accent);color:#1f2937;}
.kh-btn-decline{background:#fff;color:#b91c1c;border:2px solid #fca5a5;margin-left:6px;}
.kh-btn-decline:hover{background:#fef2f2;}
.kh-btn-block{width:100%;text-align:center;}

/* Driver: mark-completed row */
.kh-complete-row{display:flex;gap:8px;align-items:center;}
.kh-complete-row select{padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:13px;}

/* Customer: UPI pay popover */
.kh-upi-popover{
	position:absolute;z-index:70;margin-top:8px;background:#fff;
	border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);
	padding:16px;text-align:center;width:190px;
}
.kh-upi-popover img{margin:0 auto 8px;border-radius:8px;}

/* Hero */
.kh-hero{background:linear-gradient(135deg,var(--kh-dark),#1e3a5f);color:#fff;padding:70px 0;}
.kh-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.kh-hero h1{font-size:38px;line-height:1.2;margin:0 0 16px;}
.kh-hero p{color:#cbd5e1;font-size:17px;margin-bottom:24px;}

/* Ride type toggle */
.kh-toggle{display:flex;background:#eef1f5;border-radius:10px;padding:4px;margin-bottom:18px;}
.kh-toggle button{flex:1;padding:10px;border:none;background:transparent;border-radius:8px;font-weight:700;cursor:pointer;color:var(--kh-gray);}
.kh-toggle button.active{background:var(--kh-primary);color:#fff;}

/* Card / form */
.kh-card{background:#fff;border-radius:var(--kh-radius);box-shadow:0 8px 30px rgba(0,0,0,.08);padding:24px;}
.kh-field{margin-bottom:14px;}
.kh-field label{display:block;font-size:13px;font-weight:700;color:var(--kh-dark);margin-bottom:6px;}
.kh-field input,.kh-field select,.kh-field textarea{width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;}
.kh-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kh-note{font-size:12px;color:var(--kh-gray);margin-top:4px;}
.kh-cash-badge{display:inline-flex;align-items:center;gap:6px;background:#fff7e6;color:#92610a;border:1px solid #ffe1a8;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:700;}

/* Fare breakdown box */
.kh-fare-box{background:var(--kh-bg);border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;}
.kh-fare-row{display:flex;justify-content:space-between;font-size:13.5px;color:#4b5563;padding:3px 0;}
.kh-fare-row.kh-fare-total{border-top:1px dashed #d1d5db;margin-top:6px;padding-top:8px;font-weight:800;font-size:15px;color:var(--kh-dark);}
.kh-fare-row.kh-fare-note{display:block;background:#fff7e6;color:#92610a;border:1px solid #ffe1a8;border-radius:6px;padding:6px 8px;margin-bottom:8px;font-size:12px;font-weight:600;}

/* Map */
#kh-map{width:100%;height:340px;border-radius:var(--kh-radius);margin-top:16px;}
.kh-driver-pin{background:var(--kh-primary);color:#fff;border-radius:50%;width:14px;height:14px;border:3px solid #fff;box-shadow:0 0 0 2px var(--kh-primary);}
.kh-drop-icon{font-size:22px;line-height:1;text-align:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));}

/* Address autocomplete */
.kh-suggestions{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;z-index:60;display:none;}
.kh-suggestion-item{padding:10px 12px;font-size:13.5px;cursor:pointer;border-bottom:1px solid #f1f3f5;}
.kh-suggestion-item:last-child{border-bottom:none;}
.kh-suggestion-item:hover{background:var(--kh-bg);color:var(--kh-primary);}

/* Sections */
.kh-section{padding:60px 0;}
.kh-section h2{font-size:28px;text-align:center;margin-bottom:8px;}
.kh-section p.kh-sub{text-align:center;color:var(--kh-gray);margin-bottom:36px;}
.kh-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.kh-feature{background:#fff;border-radius:var(--kh-radius);padding:24px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.05);}
.kh-feature .icon{font-size:30px;margin-bottom:10px;}

/* Dashboard */
.kh-dash{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:30px 0;}
.kh-dash-nav{background:#fff;border-radius:var(--kh-radius);padding:16px;height:fit-content;}
.kh-dash-nav a{display:block;padding:10px 12px;border-radius:8px;color:var(--kh-dark);font-weight:600;margin-bottom:4px;}
.kh-dash-nav a.active,.kh-dash-nav a:hover{background:var(--kh-bg);color:var(--kh-primary);}
.kh-status{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;}
.kh-status-pending{background:#fef3c7;color:#92400e;}
.kh-status-accepted{background:#dbeafe;color:#1e40af;}
.kh-status-ongoing{background:#e0e7ff;color:#3730a3;}
.kh-status-completed{background:#dcfce7;color:#166534;}
.kh-status-cancelled{background:#fee2e2;color:#991b1b;}

table.kh-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--kh-radius);overflow:hidden;}
table.kh-table th,table.kh-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eee;font-size:14px;position:relative;}
table.kh-table th{background:var(--kh-bg);font-size:12px;text-transform:uppercase;color:var(--kh-gray);}

.kh-driver-toggle{display:flex;align-items:center;gap:10px;background:#fff;padding:14px 18px;border-radius:var(--kh-radius);margin-bottom:20px;}
.kh-switch{position:relative;width:46px;height:26px;}
.kh-switch input{opacity:0;width:0;height:0;}
.kh-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:26px;transition:.2s;}
.kh-slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.kh-switch input:checked + .kh-slider{background:var(--kh-primary);}
.kh-switch input:checked + .kh-slider:before{transform:translateX(20px);}

/* Footer */
.kh-footer{background:var(--kh-dark);color:#aab4c8;margin-top:70px;font-size:14px;}
.kh-footer a{color:#aab4c8;transition:color .15s;}
.kh-footer a:hover{color:#fff;}

.kh-footer-grid{
	display:grid;
	grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;
	gap:32px;
	padding:56px 0 40px;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.kh-footer-brand{padding-right:10px;}
.kh-footer-logo{font-size:22px;font-weight:800;color:#fff;margin-bottom:12px;}
.kh-footer-logo span{color:var(--kh-primary);}
.kh-footer-brand p{line-height:1.7;margin:0 0 18px;color:#8b96ac;}

.kh-footer-social{display:flex;gap:10px;}
.kh-footer-social a{
	width:34px;height:34px;border-radius:50%;
	background:rgba(255,255,255,.06);
	display:flex;align-items:center;justify-content:center;
	font-size:11px;font-weight:700;color:#cbd5e1;
	border:1px solid rgba(255,255,255,.1);
}
.kh-footer-social a:hover{background:var(--kh-primary);color:#fff;border-color:var(--kh-primary);}

.kh-footer-col h4{
	color:#fff;font-size:14px;font-weight:700;
	text-transform:uppercase;letter-spacing:.04em;
	margin:0 0 18px;
}
.kh-footer-col ul{list-style:none;margin:0;padding:0;}
.kh-footer-col ul li{margin-bottom:12px;font-size:13.5px;}
.kh-footer-contact li{color:#8b96ac;}
.kh-footer-contact a{color:#cbd5e1;}

.kh-footer-widgets{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.08);}

.kh-footer-bottom{padding:20px 0;}
.kh-footer-bottom-inner{
	display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
	font-size:12.5px;color:#77839c;
}
.kh-footer-bottom-inner p{margin:0;}

@media(max-width:960px){
	.kh-footer-grid{grid-template-columns:1fr 1fr;}
	.kh-footer-brand{grid-column:1 / -1;}
}
@media(max-width:560px){
	.kh-footer-grid{grid-template-columns:1fr;}
	.kh-footer-bottom-inner{flex-direction:column;align-items:flex-start;}
}

@media(max-width:880px){
  .kh-hero-grid{grid-template-columns:1fr;}
  .kh-grid-3{grid-template-columns:1fr;}
  .kh-dash{grid-template-columns:1fr;}
  .kh-nav{display:none;}
}