.icabbi-booking{
  width:100%;
  /* defaults if user doesn't touch Elementor */
  --icabbi-primary:#000B1F;
  --icabbi-secondary:#FBE3BC;
  --icabbi-surface:#fff;
  --icabbi-text:#0b1220;
  --icabbi-muted:#5b667a;
  --icabbi-border:#e7e7e7;
}

/* Heading */
.icabbi-heading{ margin-bottom:14px; }
.icabbi-title{ margin:0; }

/* Layout */
.icabbi-layout{
  display:grid;
  grid-template-columns: 30% 70%;
  gap:20px;
  align-items:start;
}
.icabbi-layout__form,
.icabbi-layout__map{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.icabbi-layout__map .icabbi-map{
  flex:1;
  width:100%;
  height:100%;
  min-height:420px;
  overflow:hidden;
}

/* Rows */
.icabbi-row{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.icabbi-row--datetime{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}

/* Fields */
.icabbi-field{ width:100%; }
.icabbi-label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
}
.icabbi-control{ position:relative; }
.icabbi-icon{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  left:10px;
  color: var(--icabbi-muted);
}
.icabbi-input{
  width:100%;
  box-sizing:border-box;
  padding-left:3px; /* space for icon */
}

/* Section */
.icabbi-section{ margin-top:12px; }
.icabbi-section-title{
  font-weight:700;
  margin-bottom:10px;
}

/* Phone split (no inline styles anymore) */
/* Phone split: single row */
.icabbi-control.icabbi-phone-split{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:nowrap; /* force one line */
}

/* Country code dropdown (fixed width) */
.icabbi-phone-prefix{
  flex:0 0 190px;     /* adjust 160-220 as you like */
  max-width:190px;
  width:190px;
}

/* Phone number input (takes remaining space) */
.icabbi-phone-national{
  flex:1 1 auto;
  min-width:160px;
}

/* If your global .icabbi-input adds padding-left for icons,
   remove it only for this split row so it looks clean */
.icabbi-phone-split .icabbi-input{
  padding-left:12px; /* or whatever looks best */
}

/* Mobile: still one row, but tighter */
@media (max-width: 480px){
  .icabbi-phone-prefix{
    flex-basis:150px;
    width:150px;
    max-width:150px;
  }
  .icabbi-control.icabbi-phone-split{
    gap:8px;
  }
}

/* Time inline */
.icabbi-time-inline{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.icabbi-time-inline select{ max-width:75px; }
.icabbi-row--datetime .spacing-left{ padding-left:10px; }

/* Actions */
.icabbi-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.icabbi-btn{
  cursor:pointer;
  width:100%;
}

/* Helpers / validation */
.icabbi-help{
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:.85;
  color: var(--icabbi-muted);
}
.icabbi-field-error{
  color:#d63638;
  margin-top:6px;
  display:block;
}
.icabbi-required{
  color:#d63638;
  margin-left:4px;
  font-weight:600;
}

/* Response */
.icabbi-response{
  border:1px solid var(--icabbi-border);
  padding:12px;
  margin:10px 0 15px;
  border-radius:8px;
  background: var(--icabbi-surface);
  color: var(--icabbi-text);
}
.icabbi-response--success{ border-color:#2e7d32; }
.icabbi-response--error{ border-color:#c62828; }

/* Quote button + inline message */
.icabbi-btn-quote--sm{
  font-size:13px;
  line-height:1.2;
}
.icabbi-btn-quote.is-loading{
  opacity:.7;
  pointer-events:none;
}

.icabbi-quote-inline{
  display:none;
   padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #fde68a;
    background: #fff8db;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
 border-left: 4px solid #f59e0b;
}
.icabbi-quote-inline.icabbi-quote-inline--ok{
  border-color:#b7e4c7;
  background:#f0fff4;
  color:#1b4332;
}
.icabbi-quote-inline.icabbi-quote-inline--err{
  border-color:#ffccd5;
  background:#fff5f7;
  color:#7a0020;
}
.icabbi-quote-inline.icabbi-quote-inline--loading{
  border-color:#cfe2ff;
  background:#f3f7ff;
  color:#0b3d91;
}

/* Responsive */
@media (max-width: 767px){
  .icabbi-layout{ grid-template-columns:1fr; }
  .icabbi-layout__map .icabbi-map{
    min-height:320px;
    height:320px;
  }
  .icabbi-row{ grid-template-columns:1fr; }
  .icabbi-row--2{ grid-template-columns:1fr; }
  .icabbi-row--datetime{ grid-template-columns:1fr !important; }
  .icabbi-row--datetime .spacing-left{ padding-left:0; }
  .icabbi-quote-inline{ white-space:normal; max-width:100%; }
}
/* Hide native select (but keep it in DOM for form submit + JS reads) */
.icabbi-country-dd .icabbi-country-select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Trigger button looks like input */
.icabbi-country-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:1px solid var(--icabbi-border);
  background: var(--icabbi-surface);
  color: var(--icabbi-text);
  border-radius: 10px;
  padding: 10px 12px;
  cursor:pointer;
  line-height:1.2;
}
.icabbi-country-trigger:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(34,113,177,.15);
  border-color:#2271b1;
}
.icabbi-country-trigger__text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-right:8px;
}
.icabbi-country-trigger__chev{ opacity:.8; }

/* Dropdown panel */
.icabbi-country-panel{
  position:absolute;
  z-index:9999;
  width:100%;
  margin-top:6px;
  border:1px solid var(--icabbi-border);
  background: var(--icabbi-surface);
  border-radius: 10px;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Search row */
.icabbi-country-search{ padding:10px; border-bottom:1px solid var(--icabbi-border); }
.icabbi-country-search__input{
  width:100%;
  border:1px solid var(--icabbi-border);
  border-radius: 8px;
  padding:10px 12px;
  background:#fff;
  color: var(--icabbi-text);
}

/* List */
.icabbi-country-list{
  max-height: 260px;
  overflow:auto;
}
.icabbi-country-item{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  gap:8px;
  align-items:center;
}
.icabbi-country-item:hover,
.icabbi-country-item.is-active{
  background: rgba(0,0,0,.06);
}
.icabbi-country-item small{
  opacity:.7;
}

/* Ensure phone split stays one row (your existing rules are ok) */
.icabbi-control.icabbi-phone-split{ position:relative; } /* important for absolute panel */
button.icabbi-country-trigger {background: none ;
  border: 1px solid #666;
  border-radius: 7px;
  padding: 7px;
}
button.icabbi-country-trigger:hover
{
  background: none ;
  border: 1px solid #666;
  border-radius: 7px;
  padding: 7px;
}

.icabbi-payment .icabbi-payment-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.icabbi-payment .icabbi-radio{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--icabbi-border, #e7e7e7);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}

.icabbi-payment .icabbi-radio input{
  margin:0;
}

.icabbi-payment .icabbi-stripe-wrap,
.icabbi-payment .icabbi-wallet-wrap{
  margin-top:12px;
  border:1px solid var(--icabbi-border, #e7e7e7);
  padding:12px;
  border-radius:12px;
  background: var(--icabbi-surface, #fff);
}

.icabbi-payment .icabbi-stripe-card{
  border:1px solid var(--icabbi-border, #e7e7e7);
  border-radius:10px;
  padding:12px;
  background:#fff;
}

.icabbi-payment .icabbi-stripe-error{
  margin-top:8px;
  font-size:13px;
}

.icabbi-payment .icabbi-wallet-hint{
  margin-top:8px;
  font-size:13px;
  color: red;
}
/* Base button loader */
.icabbi-btn,
.icabbi-btn-pay,
.icabbi-pay-now {
  position: relative;
}

.icabbi-spinner {
  display: none;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  vertical-align: middle;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: icabbiSpin .8s linear infinite;
}

.is-loading .icabbi-spinner {
  display: inline-block;
}

.is-loading .btn-text {
  opacity: 0.6;
}

@keyframes icabbiSpin {
  to { transform: rotate(360deg); }
}

/* ===============================
   Promo Code Layout
================================ */

.icabbi-promo-field {
  margin-top: 12px;
}

.icabbi-promo-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Row layout */
.icabbi-promo-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Input grows, buttons stay fixed */
.icabbi-promo-code {
  flex: 1;
  min-width: 0;
}

/* Apply / Remove buttons */
.icabbi-btn-promo,
.icabbi-btn-promo-clear {
  white-space: nowrap;
  padding: 10px 16px;
  line-height: 1;
}

/* Remove button = secondary style */
.icabbi-btn-promo-clear {
  background: transparent;
  border: 1px solid var(--icabbi-border, #ddd);
  color: var(--icabbi-text, #333);
}

/* Mobile: stack neatly if needed */
@media (max-width: 480px) {
  .icabbi-promo-row {
    flex-wrap: wrap;
  }

  .icabbi-btn-promo,
  .icabbi-btn-promo-clear {
    width: 100%;
  }
}

/* ===============================
   Promo Message Styling
================================ */

.icabbi-promo-inline {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  display: none;
}

/* Loading */
.icabbi-promo-inline.is-loading {
  display: block;
  background: #f6f7f9;
  color: #555;
  border: 1px dashed #ccc;
}

/* Success */
.icabbi-promo-inline.is-ok {
  display: block;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* Error (your “Fare estimate missing” case) */
.icabbi-promo-inline.is-err {
  display: block;
  background: #fff5f5;
  color: #991b1b;
  border: 1px solid #fecaca;
}
/* ===============================
   Apply Button Inline Loader
================================ */

.icabbi-btn-promo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.icabbi-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: rgba(255,255,255,1);
  border-radius: 50%;
  display: none;
  animation: icabbiSpin 0.8s linear infinite;
}

@keyframes icabbiSpin {
  to { transform: rotate(360deg); }
}

/* Loading state on button */
.icabbi-btn-promo.is-loading {
  opacity: 0.85;
  pointer-events: none;
}

.icabbi-btn-promo.is-loading .icabbi-btn-spinner {
  display: inline-block;
}

/* If you want text to change to "Applying..." keep visible */
.icabbi-btn-promo.is-loading .icabbi-btn-text {
  opacity: 0.95;
}

/* ===============================
   Promo Price Summary (Strike)
================================ */

.icabbi-promo-inline .icabbi-promo-price {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.icabbi-promo-inline .icabbi-price-old {
  text-decoration: line-through;
  opacity: 0.7;
  font-weight: 600;
}

.icabbi-promo-inline .icabbi-price-new {
  font-weight: 800;
}

.icabbi-promo-inline .icabbi-price-save {
  opacity: 0.85;
  font-size: 12px;
}

/* ===============================
   FIX: Promo input + buttons one line
   (override global .icabbi-btn{width:100%})
================================ */

.icabbi-promo-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  flex-wrap:nowrap;
}

.icabbi-promo-row .icabbi-btn{
  width:auto !important;        /* override global */
  flex:0 0 auto;
}

.icabbi-promo-row .icabbi-promo-code{
  flex:1 1 auto;
  min-width:0;
}

/* make heights match nicely */
.icabbi-promo-row .icabbi-promo-code,
.icabbi-promo-row .icabbi-btn{
  height:44px;
  border-radius:10px;
}

.icabbi-promo-row .icabbi-btn{
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  color: #fff;
}
.icabbi-promo-msg{
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  font-size:13px;
  line-height:1.35;
  border:1px solid #ddd;
}
.icabbi-promo-msg.is-ok{
  border-color:#7bc47f;
}
.icabbi-promo-msg.is-err{
  border-color:#e08a8a;
}
/* =========================================================
   FORCE FORM + MAP STACK ON MOBILE
   (place at VERY END of the CSS file)
========================================================= */
@media (max-width: 767px){

  /* override Elementor's layout_ratio inline/selector output */
  .icabbi-booking .icabbi-layout{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* make sure both blocks take full width */
  .icabbi-booking .icabbi-layout__form,
  .icabbi-booking .icabbi-layout__map{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* optional: map below form (default) */
  .icabbi-booking .icabbi-layout__form{ order: 2; }
  .icabbi-booking .icabbi-layout__map{ order: 1; }

  /* better map height on mobile */
  .icabbi-booking .icabbi-layout__map .icabbi-map{
    min-height: 280px !important;
    height: 280px !important;
  }
}

/* Optional tablet tweak */
@media (min-width: 768px) and (max-width: 1024px){
  .icabbi-booking .icabbi-layout{
    grid-template-columns: 1fr !important; /* stack on tablet too (remove if you want 2-col on tablet) */
  }
}
/* =========================================================
   TABLET + MOBILE: MAP FIRST, THEN FORM
========================================================= */
@media (max-width: 1024px){

  /* switch to flex so 'order' works */
  .icabbi-booking .icabbi-layout{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* map first */
  .icabbi-booking .icabbi-layout__map{ order: 1 !important; }
  .icabbi-booking .icabbi-layout__form{ order: 2 !important; }

  /* map height */
  .icabbi-booking .icabbi-layout__map .icabbi-map{
    min-height: 280px !important;
    height: 280px !important;
  }
}
.icabbi-form button.is-loading,
.icabbi-btn-quote.is-loading,
.icabbi-btn-promo.is-loading {
	opacity: 0.85;
	cursor: not-allowed;
}

.icabbi-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: icabbiSpin 0.8s linear infinite;
}

@keyframes icabbiSpin {
	to {
		transform: rotate(360deg);
	}
}
/* === FIX: tablet map must have an explicit height (avoid height:100%) === */

/* Tablet */
@media (min-width:768px) and (max-width:1024px){
  .icabbi-layout__map{
    min-height: 320px !important;
            width: 100% !important;
        min-width: 0 !important;
  }
  .icabbi-layout__map .icabbi-map{
    height: 320px !important;
    min-height: 320px !important;
  }
}
@media (min-width:200px) and (max-width:650px){
.icabbi-layout__map
{
 min-height: auto; 
}
}

/* mount-safe hidden state (NOT display:none) */
.icabbi-wallet-wrap.is-prehidden {
  display: block !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.icabbi-wallet-wrap.is-prehidden.is-ready {
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
.icabbi-wallet-hint{
  display:block;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #f2c94c;
  background:#fff8e1;
  border-radius:8px;
  font-size:13px;
  line-height:1.4;
}
.icabbi-wallet-hint { margin-top: 10px; font-size: 13px; line-height: 1.4; }
.icabbi-wallet-hint.is-ok { opacity: 1; }
.icabbi-wallet-hint.is-err { color: #b00020; }

.icabbi-wallet-badge{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  margin-right: 8px;
}
.icabbi-wallet-note{ opacity:.9; }

/* Make it obvious it's picker-only */
.icabbi-datetime[readonly],
.icabbi-datetime + input.flatpickr-input[readonly] {
	cursor: pointer;
	caret-color: transparent;
}

.flatpickr-calendar {
	z-index: 999999; /* Elementor overlays */
}
.icabbi-map { position: relative; z-index: 1; pointer-events: auto; }
.icabbi-map * { pointer-events: auto; }
.icabbi-input-error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}
.icabbi-field--error .flatpickr-input,
.icabbi-field--error input,
.icabbi-input-error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}
.icabbi-swap-route {
   display: block;
    width: 100%;
    margin: 0px auto;
    padding: 12px 12px !important;
    background: #111;
    color: #fff !important;
    border-radius: 20px !important;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
}

.icabbi-swap-route:hover {
    background: #caa96a;
    color: #111;
}

.icabbi-booking-rule-message {
	display: none;
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	background: #f8f9fb;
	color: #0b1220;
	font-size: 14px;
	line-height: 1.5;
}
.icabbi-override-notice {
	display: none;
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid #f3c98b;
	background: linear-gradient(180deg, #fff8ef 0%, #fff3df 100%);
	color: #7a4b00;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
	box-shadow: 0 6px 18px rgba(122, 75, 0, 0.08);
}

.icabbi-override-notice::before {
	content: "⚠";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	border-radius: 50%;
	background: #fbe3bc;
	color: #7a4b00;
	font-size: 14px;
	font-weight: 700;
	vertical-align: middle;
}

@media (max-width: 767px) {
	.icabbi-override-notice {
		font-size: 13px;
		padding: 12px 14px;
		border-radius: 10px;
	}
}