/* Cab Booking Form: frontend styles */
.cbf-wrap{
	--cbf-accent:#ff0000;
	--cbf-border:#dcdcdc;
	--cbf-border-strong:#1f1f1f;
	--cbf-text:#222222;
	--cbf-placeholder:#9a9a9a;
	--cbf-error:#d63638;
	--cbf-success-bg:#e9f7ee;
	--cbf-success-text:#1a6e2e;
	--cbf-radius:4px;
	width:100%;
	max-width:100%;
	color:var(--cbf-text);
	font-family:inherit;
}
.cbf-wrap *,.cbf-wrap *::before,.cbf-wrap *::after{box-sizing:border-box;}

.cbf-wrap .cbf-form{margin:0;padding:0;}
.cbf-wrap .cbf-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px 8px;
}
.cbf-wrap .cbf-full{grid-column:1 / -1;}
.cbf-wrap .cbf-field{display:flex;flex-direction:column;min-width:0;margin:0;}

.cbf-wrap .cbf-field > label,
.cbf-wrap .cbf-field > .cbf-label{
	display:block;
	margin:0 0 6px;
	padding:0;
	font-size:13px;
	font-weight:500;
	line-height:1.4;
	color:var(--cbf-text);
}

/* Inputs */
.cbf-wrap .cbf-form .cbf-input{
	display:block;
	width:100%;
	max-width:100%;
	height:36px;
	min-height:36px;
	margin:0;
	padding:7px 12px;
	font-family:inherit;
	font-size:13px;
	line-height:1.4;
	color:var(--cbf-text);
	background:#ffffff;
	border:1px solid var(--cbf-border);
	border-radius:var(--cbf-radius);
	box-shadow:none;
	outline:none;
	-webkit-appearance:none;
	appearance:none;
	transition:border-color .15s ease,box-shadow .15s ease;
}
.cbf-wrap .cbf-form .cbf-input::placeholder{color:var(--cbf-placeholder);opacity:1;}
.cbf-wrap .cbf-form .cbf-input:focus{
	border-color:var(--cbf-border-strong);
	box-shadow:0 0 0 1px var(--cbf-border-strong);
}
.cbf-wrap .cbf-form input[type="number"]{-moz-appearance:textfield;}



/* Native date and time.
   iOS gives these inputs an intrinsic min-width that is wider than the grid
   column, which pushes the whole form sideways and leaves big gaps left and
   right. min-width:0 plus a reset on the inner value box keeps them in place. */
.cbf-wrap .cbf-form input[type="date"],
.cbf-wrap .cbf-form input[type="time"]{
	display:block;
	width:100%;
	min-width:0;
	max-width:100%;
	line-height:20px;
	text-align:left;
	-webkit-appearance:none;
	appearance:none;
}
.cbf-wrap .cbf-form input[type="date"]::-webkit-date-and-time-value,
.cbf-wrap .cbf-form input[type="time"]::-webkit-date-and-time-value{
	text-align:left;
	margin:0;
	padding:0;
	width:100%;
	min-width:0;
}
.cbf-wrap .cbf-form input[type="date"]::-webkit-datetime-edit,
.cbf-wrap .cbf-form input[type="time"]::-webkit-datetime-edit{padding:0;margin:0;}
.cbf-wrap .cbf-form input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.cbf-wrap .cbf-form input[type="time"]::-webkit-datetime-edit-fields-wrapper{padding:0;}
.cbf-wrap .cbf-form input[type="date"]::-webkit-calendar-picker-indicator,
.cbf-wrap .cbf-form input[type="time"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;}

/* Custom placeholder for empty date/time (iOS shows nothing by default) */
.cbf-wrap .cbf-dt{position:relative;display:block;width:100%;min-width:0;}
.cbf-wrap .cbf-dt-ph{
	position:absolute;
	top:50%;
	left:12px;
	right:34px;
	transform:translateY(-50%);
	font-family:inherit;
	font-size:13px;
	line-height:1.4;
	color:var(--cbf-placeholder);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	pointer-events:none;
}
/* Placeholder is visible by default, so it still works if JS is slow or blocked.
   JS adds .cbf-dt-js (so the value is never hidden without JS) and toggles
   .is-filled once the field has a value or focus. */
.cbf-wrap .cbf-form .cbf-dt-js:not(.is-filled) .cbf-dt-input{
	color:transparent;
	-webkit-text-fill-color:transparent;
}
.cbf-wrap .cbf-dt.is-filled .cbf-dt-ph{display:none;}

.cbf-wrap .cbf-form .cbf-textarea{
	height:78px;
	min-height:78px;
	resize:vertical;
	padding-top:9px;
}

/* Dropdown */
.cbf-wrap .cbf-form select.cbf-input{
	padding-right:36px;
	cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:12px 8px;
}
.cbf-wrap .cbf-form select.cbf-input:invalid{color:var(--cbf-placeholder);}
.cbf-wrap .cbf-form select.cbf-input option{color:var(--cbf-text);}

/* Radio buttons and checkboxes */
.cbf-wrap .cbf-choices{display:flex;flex-wrap:wrap;gap:8px 18px;padding:4px 0;}
.cbf-wrap .cbf-field .cbf-choice{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin:0;
	font-size:13px;
	font-weight:400;
	line-height:1.4;
	cursor:pointer;
}
.cbf-wrap .cbf-choice input{width:16px;height:16px;margin:0;accent-color:var(--cbf-accent);cursor:pointer;flex:none;}
.cbf-wrap .cbf-invalid .cbf-choice{color:var(--cbf-error);}

/* Location fields */
.cbf-wrap .cbf-location{position:relative;width:100%;}
.cbf-wrap .cbf-form .cbf-location .cbf-input{
	height:38px;
	min-height:38px;
	padding-left:38px;
	border-color:var(--cbf-border-strong);
	text-overflow:ellipsis;
}
.cbf-wrap .cbf-form .cbf-has-locate .cbf-input{padding-right:44px;}
.cbf-wrap .cbf-location-icon{
	position:absolute;
	top:50%;
	left:12px;
	width:16px;
	height:16px;
	transform:translateY(-50%);
	color:#333333;
	pointer-events:none;
	line-height:0;
}
.cbf-wrap .cbf-location-icon svg{display:block;width:16px;height:16px;}

.cbf-wrap .cbf-form .cbf-locate-btn{
	position:absolute;
	top:50%;
	right:3px;
	width:34px;
	height:32px;
	min-height:0;
	margin:0;
	padding:0 !important;
	display:flex;
	align-items:center;
	justify-content:center;
	transform:translateY(-50%);
	color:#444444;
	background:transparent !important;
	border:0 !important;
	border-radius:var(--cbf-radius);
	box-shadow:none !important;
	cursor:pointer;
	line-height:0;
}
.cbf-wrap .cbf-form .cbf-locate-btn svg{display:block;width:20px;height:20px;}
.cbf-wrap .cbf-form .cbf-locate-btn:hover{color:var(--cbf-accent);background:rgba(0,0,0,.04) !important;}
.cbf-wrap .cbf-form .cbf-locate-btn:focus-visible{outline:2px solid var(--cbf-border-strong);outline-offset:-2px;}
.cbf-wrap .cbf-form .cbf-locate-btn:disabled{cursor:progress;}
.cbf-wrap .cbf-form .cbf-locate-btn.is-loading svg{opacity:0;}
.cbf-wrap .cbf-form .cbf-locate-btn.is-loading::after{
	content:"";
	position:absolute;
	width:16px;
	height:16px;
	border:2px solid rgba(0,0,0,.15);
	border-top-color:var(--cbf-accent);
	border-radius:50%;
	animation:cbf-spin .7s linear infinite;
}

/* Suggestions dropdown */
.cbf-wrap .cbf-suggestions{
	position:absolute;
	top:calc(100% + 4px);
	left:0;
	right:0;
	z-index:99999;
	max-height:280px;
	overflow-y:auto;
	margin:0;
	padding:4px 0;
	list-style:none;
	background:#ffffff;
	border:1px solid var(--cbf-border);
	border-radius:var(--cbf-radius);
	box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.cbf-wrap .cbf-suggestions[hidden]{display:none;}
.cbf-wrap .cbf-suggestion{
	margin:0;
	padding:9px 12px;
	cursor:pointer;
	font-size:13px;
	line-height:1.35;
	list-style:none;
}
.cbf-wrap .cbf-suggestion::before,.cbf-wrap .cbf-suggestion::marker{content:none;}
.cbf-wrap .cbf-suggestion.is-active,.cbf-wrap .cbf-suggestion:hover{background:#f3f3f3;}
.cbf-wrap .cbf-suggestion-main{display:block;font-weight:600;color:var(--cbf-text);}
.cbf-wrap .cbf-suggestion-sub{display:block;color:#6b6b6b;font-size:12px;margin-top:1px;}
.cbf-wrap .cbf-powered{
	margin:0;
	padding:6px 12px 4px;
	text-align:right;
	font-size:11px;
	color:#8a8a8a;
	list-style:none;
	cursor:default;
}

/* Google legacy autocomplete dropdown above popups */
.pac-container{z-index:100000 !important;}

/* Errors */
.cbf-wrap .cbf-error{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--cbf-error);}
.cbf-wrap .cbf-error:empty{display:none;}
.cbf-wrap .cbf-form .cbf-invalid .cbf-input{border-color:var(--cbf-error) !important;}
.cbf-wrap .cbf-form .cbf-invalid .cbf-input:focus{box-shadow:0 0 0 1px var(--cbf-error);}

/* Honeypot */
.cbf-wrap .cbf-hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden;}

/* Submit */
.cbf-wrap .cbf-form .cbf-submit{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:36px;
	min-height:36px;
	margin:0;
	padding:0 20px;
	font-family:inherit;
	font-size:14px;
	font-weight:600;
	line-height:1;
	color:#ffffff;
	background:var(--cbf-accent);
	border:0;
	border-radius:999px;
	box-shadow:none;
	cursor:pointer;
	text-transform:none;
	letter-spacing:normal;
	transition:filter .15s ease;
}
.cbf-wrap .cbf-form .cbf-submit:hover{filter:brightness(.9);color:#ffffff;background:var(--cbf-accent);}
.cbf-wrap .cbf-form .cbf-submit:focus-visible{outline:2px solid var(--cbf-border-strong);outline-offset:2px;}
.cbf-wrap .cbf-form .cbf-submit:disabled{cursor:progress;opacity:.8;}
.cbf-wrap .cbf-form .cbf-submit.is-loading .cbf-submit-text::before{
	content:"";
	display:inline-block;
	width:14px;
	height:14px;
	margin-right:8px;
	vertical-align:-2px;
	border:2px solid rgba(255,255,255,.4);
	border-top-color:#ffffff;
	border-radius:50%;
	animation:cbf-spin .7s linear infinite;
}

/* Message */
.cbf-wrap .cbf-message{
	margin-top:12px;
	padding:10px 14px;
	font-size:13px;
	line-height:1.5;
	border-radius:var(--cbf-radius);
}
.cbf-wrap .cbf-message[hidden]{display:none;}
.cbf-wrap .cbf-message.is-success{background:var(--cbf-success-bg);color:var(--cbf-success-text);}
.cbf-wrap .cbf-message.is-error{background:#fcebeb;color:var(--cbf-error);}

@keyframes cbf-spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
	.cbf-wrap .cbf-form .cbf-locate-btn.is-loading::after,
	.cbf-wrap .cbf-form .cbf-submit.is-loading .cbf-submit-text::before{animation-duration:2s;}
}

/* Mobile: one column, 16px text to stop iOS zoom, larger touch targets */
@media (max-width:600px){
	.cbf-wrap .cbf-grid{grid-template-columns:1fr;gap:12px;}
	.cbf-wrap .cbf-form .cbf-input,
	.cbf-wrap .cbf-form .cbf-location .cbf-input{height:44px;min-height:44px;font-size:16px;}
	.cbf-wrap .cbf-form .cbf-textarea{height:96px;min-height:96px;}
	.cbf-wrap .cbf-form .cbf-locate-btn{width:40px;height:38px;}
	.cbf-wrap .cbf-form .cbf-submit{height:46px;min-height:46px;font-size:15px;}
	.cbf-wrap .cbf-suggestion{padding:11px 12px;font-size:14px;}
	.cbf-wrap .cbf-field .cbf-choice{font-size:15px;}
	.cbf-wrap .cbf-choice input{width:20px;height:20px;}
	.cbf-wrap .cbf-dt-ph{font-size:16px;}
	/* Stop a stray wide field from scrolling the page sideways on iOS */
	.cbf-wrap,.cbf-wrap .cbf-grid,.cbf-wrap .cbf-field{max-width:100%;min-width:0;}
}

/* Admin only setup notice */
.cbf-wrap .cbf-admin-notice{
	margin:0 0 14px;
	padding:10px 12px;
	font-size:13px;
	line-height:1.5;
	color:#6b3b00;
	background:#fff4e0;
	border:1px solid #f0c36d;
	border-radius:var(--cbf-radius);
}
