/* ─── Billas Booking – Public Styles ─────────────────────────────────────── */
:root{
  --bb-primary:#0ea5e9;
  --bb-primary-dark:#0284c7;
  --bb-accent:#0f172a;
  --bb-green:#10b981;
  --bb-red:#ef4444;
  --bb-yellow:#f59e0b;
  --bb-purple:#8b5cf6;
  --bb-gray:#64748b;
  --bb-light:#f8fafc;
  --bb-border:#e2e8f0;
  --bb-radius:12px;
  --bb-shadow:0 4px 24px rgba(0,0,0,.08);
  --bb-font:'Segoe UI',system-ui,sans-serif;
}

/* ── Reset ── */
.billas-wrap*{box-sizing:border-box;margin:0;padding:0;}
.billas-wrap{font-family:var(--bb-font);color:var(--bb-accent);}

/* ── Buttons ── */
.bb-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s;text-decoration:none;}
.bb-btn-primary{background:var(--bb-primary);color:#fff;}
.bb-btn-primary:hover{background:var(--bb-primary-dark);transform:translateY(-1px);}
.bb-btn-outline{background:transparent;color:var(--bb-primary);border:2px solid var(--bb-primary);}
.bb-btn-outline:hover{background:var(--bb-primary);color:#fff;}
.bb-btn-sm{padding:8px 16px;font-size:13px;}
.bb-btn-block{width:100%;justify-content:center;}
.bb-btn-danger{background:var(--bb-red);color:#fff;}
.bb-btn-success{background:var(--bb-green);color:#fff;}
.bb-btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;}

/* ── Cards ── */
.bb-card{background:#fff;border-radius:var(--bb-radius);box-shadow:var(--bb-shadow);overflow:hidden;transition:transform .2s,box-shadow .2s;}
.bb-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.12);}

/* ── Form ── */
.bb-form-group{margin-bottom:18px;}
.bb-label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:6px;}
.bb-input,.bb-select,.bb-textarea{width:100%;padding:11px 14px;border:1.5px solid var(--bb-border);border-radius:8px;font-size:14px;font-family:var(--bb-font);background:#fff;color:var(--bb-accent);transition:border .2s;}
.bb-input:focus,.bb-select:focus,.bb-textarea:focus{outline:none;border-color:var(--bb-primary);box-shadow:0 0 0 3px rgba(14,165,233,.1);}
.bb-textarea{resize:vertical;min-height:90px;}
.bb-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:580px){.bb-form-row{grid-template-columns:1fr;}}

/* ── Alert ── */
.bb-alert{padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:16px;}
.bb-alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}
.bb-alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}
.bb-alert-info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.bb-alert-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a;}

/* ── Loading spinner ── */
.bb-spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:bb-spin .6s linear infinite;}
.bb-spinner-dark{border-color:rgba(14,165,233,.2);border-top-color:var(--bb-primary);}
@keyframes bb-spin{to{transform:rotate(360deg);}}

/* ─── Categories Grid ─────────────────────────────────────────────────────── */
.bb-categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;padding:20px 0;}
.bb-cat-card{background:#fff;border-radius:var(--bb-radius);padding:24px 16px;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .2s;box-shadow:var(--bb-shadow);}
.bb-cat-card:hover,.bb-cat-card.active{border-color:var(--bb-primary);transform:translateY(-2px);}
.bb-cat-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;}
.bb-cat-name{font-weight:700;font-size:14px;color:var(--bb-accent);}
.bb-cat-count{font-size:12px;color:var(--bb-gray);margin-top:4px;}

/* ─── Services Grid ───────────────────────────────────────────────────────── */
.bb-services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:20px 0;}
.bb-service-card{background:#fff;border-radius:var(--bb-radius);overflow:hidden;box-shadow:var(--bb-shadow);transition:all .2s;}
.bb-service-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.12);}
.bb-service-img{height:220px;background:var(--bb-light);position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--bb-radius) var(--bb-radius) 0 0;overflow:hidden;}
.bb-service-img img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}
.bb-service-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;}
.bb-service-badge{position:absolute;top:12px;right:12px;background:var(--bb-primary);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;}
.bb-service-body{padding:20px;}
.bb-service-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.bb-service-name{font-size:17px;font-weight:700;margin-bottom:8px;color:var(--bb-accent);}
.bb-service-desc{font-size:13px;color:var(--bb-gray);line-height:1.6;margin-bottom:16px;}
.bb-service-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bb-light);border-top:1px solid var(--bb-border);}
.bb-service-price{font-size:18px;font-weight:800;color:var(--bb-primary);}
.bb-service-price small{font-size:12px;font-weight:400;color:var(--bb-gray);}
.bb-service-duration{font-size:12px;color:var(--bb-gray);display:flex;align-items:center;gap:4px;}

/* ─── SVG Icons ──────────────────────────────────────────────────────────── */
.bb-icon{display:inline-block;width:1.1em;height:1.1em;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ─── Booking Wizard ─────────────────────────────────────────────────────── */
.bb-wizard-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99990;align-items:center;justify-content:center;padding:20px;}
.bb-wizard-overlay.active{display:flex;}
.bb-wizard{background:#fff;border-radius:16px;width:100%;max-width:720px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 80px rgba(0,0,0,.2);}
.bb-wizard-header{background:linear-gradient(135deg,var(--bb-primary) 0%,var(--bb-primary-dark) 100%);color:#fff;padding:24px 28px;}
.bb-wizard-header h2{font-size:20px;font-weight:800;margin-bottom:4px;}
.bb-wizard-header p{font-size:13px;opacity:.85;}
.bb-wizard-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.2);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;}
.bb-wizard-header{position:relative;}

/* Steps indicator */
.bb-steps{display:flex;padding:0 28px;background:#f8fafc;border-bottom:1px solid var(--bb-border);}
.bb-step{flex:1;text-align:center;padding:14px 8px;font-size:12px;font-weight:600;color:#94a3b8;position:relative;cursor:default;}
.bb-step.active{color:var(--bb-primary);}
.bb-step.done{color:var(--bb-green);}
.bb-step-num{width:26px;height:26px;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;margin:0 auto 4px;font-size:11px;}
.bb-step.active .bb-step-num{border-color:var(--bb-primary);background:var(--bb-primary);color:#fff;}
.bb-step.done .bb-step-num{border-color:var(--bb-green);background:var(--bb-green);color:#fff;}

/* Wizard body */
.bb-wizard-body{flex:1;overflow-y:auto;padding:28px;}
.bb-wizard-step{display:none;}
.bb-wizard-step.active{display:block;}
.bb-wizard-footer{padding:20px 28px;border-top:1px solid var(--bb-border);display:flex;justify-content:space-between;align-items:center;gap:16px;}

/* Service picker */
.bb-wizard-services{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:600px){.bb-wizard-services{grid-template-columns:1fr;}}
.bb-ws-card{border:2px solid var(--bb-border);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;}
.bb-ws-card:hover,.bb-ws-card.selected{border-color:var(--bb-primary);background:#eff6ff;}
.bb-ws-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#eff6ff;color:var(--bb-primary);}
.bb-ws-icon svg,.bb-ws-icon .bb-icon{width:28px !important;height:28px !important;min-width:28px;min-height:28px;}
.bb-ws-info{flex:1;min-width:0;}
.bb-ws-info h4{font-size:14px;font-weight:700;margin-bottom:3px;line-height:1.3;}
.bb-ws-info p{font-size:12px;color:var(--bb-gray);line-height:1.4;}
.bb-ws-price{margin-left:auto;font-weight:800;color:var(--bb-primary);font-size:15px;white-space:nowrap;flex-shrink:0;}

/* City zone selector */
.bb-city-zones{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:500px){.bb-city-zones{grid-template-columns:1fr;}}
.bb-city-zone{border:2px solid var(--bb-border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:12px;background:#fff;}
.bb-city-zone:hover,.bb-city-zone.selected{border-color:var(--bb-primary);background:#eff6ff;}
.bb-city-zone-icon{color:var(--bb-primary);flex-shrink:0;}
.bb-city-zone-icon .bb-icon{width:22px;height:22px;}
.bb-city-zone-info{flex:1;}
.bb-city-zone-name{font-weight:700;font-size:14px;line-height:1.3;}
.bb-city-zone-price{font-size:13px;color:var(--bb-primary);font-weight:600;margin-top:2px;}
.bb-city-zone-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--bb-border);flex-shrink:0;margin-left:auto;transition:all .2s;}
.bb-city-zone.selected .bb-city-zone-radio{border-color:var(--bb-primary);background:var(--bb-primary);}

/* Category filter tabs */
.bb-cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.bb-cat-tab{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;border:1.5px solid var(--bb-border);cursor:pointer;transition:all .2s;background:#fff;}
.bb-cat-tab.active{background:var(--bb-primary);color:#fff;border-color:var(--bb-primary);}

/* Staff picker */
.bb-staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:16px;}
.bb-staff-card{border:2px solid var(--bb-border);border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:all .2s;}
.bb-staff-card:hover,.bb-staff-card.selected{border-color:var(--bb-primary);background:#eff6ff;}
.bb-staff-photo{width:56px;height:56px;border-radius:50%;background:var(--bb-primary);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;color:#fff;font-size:22px;font-weight:700;overflow:hidden;}
.bb-staff-photo img{width:100%;height:100%;object-fit:cover;}
.bb-staff-name{font-size:13px;font-weight:700;margin-bottom:2px;}
.bb-staff-rating{font-size:11px;color:var(--bb-yellow);}
.bb-staff-any{border-style:dashed;}

/* Date & Time */
.bb-date-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:580px){.bb-date-time-grid{grid-template-columns:1fr;}}
.bb-time-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;max-height:240px;overflow-y:auto;}
.bb-time-slot{padding:10px;border:1.5px solid var(--bb-border);border-radius:8px;text-align:center;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;}
.bb-time-slot:hover,.bb-time-slot.selected{background:var(--bb-primary);color:#fff;border-color:var(--bb-primary);}
.bb-time-slot.booked{background:#f1f5f9;color:#94a3b8;cursor:not-allowed;}

/* Duration */
.bb-duration-row{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bb-light);border-radius:8px;}
.bb-duration-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--bb-primary);background:#fff;color:var(--bb-primary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;}
.bb-duration-val{font-size:18px;font-weight:800;min-width:100px;text-align:center;}

/* Extras */
.bb-extras{display:grid;gap:10px;}
.bb-extra-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid var(--bb-border);border-radius:8px;cursor:pointer;transition:all .2s;}
.bb-extra-item:hover,.bb-extra-item.selected{border-color:var(--bb-primary);background:#eff6ff;}
.bb-extra-check{width:20px;height:20px;border:2px solid var(--bb-border);border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.bb-extra-item.selected .bb-extra-check{background:var(--bb-primary);border-color:var(--bb-primary);color:#fff;}
.bb-extra-info{flex:1;}
.bb-extra-name{font-size:14px;font-weight:600;}
.bb-extra-desc{font-size:12px;color:var(--bb-gray);}
.bb-extra-price{font-weight:700;color:var(--bb-primary);}

/* Payment methods */
.bb-payment-methods{display:grid;gap:10px;}
.bb-pay-method{display:flex;align-items:center;gap:14px;padding:14px 16px;border:2px solid var(--bb-border);border-radius:10px;cursor:pointer;transition:all .2s;}
.bb-pay-method:hover,.bb-pay-method.selected{border-color:var(--bb-primary);background:#eff6ff;}
.bb-pay-icon{width:44px;height:44px;border-radius:10px;background:var(--bb-light);display:flex;align-items:center;justify-content:center;font-size:22px;}
.bb-pay-info h4{font-size:14px;font-weight:700;}
.bb-pay-info p{font-size:12px;color:var(--bb-gray);}
.bb-pay-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--bb-border);margin-left:auto;position:relative;}
.bb-pay-method.selected .bb-pay-radio{border-color:var(--bb-primary);}
.bb-pay-method.selected .bb-pay-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--bb-primary);}

/* Order summary */
.bb-order-summary{background:var(--bb-light);border-radius:10px;padding:20px;margin-bottom:20px;}
.bb-order-summary h4{font-size:15px;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--bb-border);}
.bb-order-row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;}
.bb-order-row.total{font-weight:800;font-size:17px;color:var(--bb-primary);border-top:1px solid var(--bb-border);padding-top:10px;margin-top:6px;}

/* Coupon */
.bb-coupon-row{display:flex;gap:8px;margin-bottom:16px;}
.bb-coupon-row .bb-input{flex:1;}

/* Confirmation */
.bb-confirmation{text-align:center;padding:20px 0;}
.bb-confirmation-icon{width:80px;height:80px;background:#f0fdf4;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:40px;}
.bb-confirmation h3{font-size:22px;font-weight:800;margin-bottom:8px;color:var(--bb-accent);}
.bb-confirmation p{color:var(--bb-gray);font-size:14px;margin-bottom:20px;}
.bb-ref-badge{display:inline-block;background:var(--bb-primary);color:#fff;font-size:18px;font-weight:800;padding:10px 28px;border-radius:30px;letter-spacing:1px;margin-bottom:20px;}
.bb-bank-details{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:16px;text-align:left;margin:16px 0;font-size:13px;}
.bb-bank-details h5{font-size:14px;font-weight:700;margin-bottom:10px;color:#92400e;}
.bb-bank-details table{width:100%;border-collapse:collapse;}
.bb-bank-details td{padding:5px 0;vertical-align:top;}
.bb-bank-details td:first-child{color:#b45309;font-weight:600;width:45%;}
.bb-receipt-upload{margin-top:16px;}
.bb-receipt-upload label{display:block;padding:16px;border:2px dashed var(--bb-border);border-radius:8px;text-align:center;cursor:pointer;font-size:13px;color:var(--bb-gray);transition:all .2s;}
.bb-receipt-upload label:hover{border-color:var(--bb-primary);color:var(--bb-primary);}
.bb-receipt-upload input{display:none;}

/* ─── Customer Dashboard ──────────────────────────────────────────────────── */
.bb-dashboard{max-width:900px;margin:0 auto;}
.bb-dash-header{background:linear-gradient(135deg,var(--bb-primary) 0%,var(--bb-primary-dark) 100%);color:#fff;border-radius:var(--bb-radius);padding:28px;margin-bottom:24px;display:flex;align-items:center;gap:20px;}
.bb-dash-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;flex-shrink:0;}
.bb-dash-info h2{font-size:22px;font-weight:800;margin-bottom:4px;}
.bb-dash-info p{opacity:.85;font-size:14px;}
.bb-dash-tabs{display:flex;gap:2px;background:var(--bb-light);border-radius:10px;padding:4px;margin-bottom:24px;overflow-x:auto;}
.bb-dash-tab{padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s;color:var(--bb-gray);border:none;background:transparent;}
.bb-dash-tab.active{background:#fff;color:var(--bb-primary);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.bb-dash-panel{display:none;}
.bb-dash-panel.active{display:block;}

/* Booking list */
.bb-booking-list{display:grid;gap:16px;}
.bb-booking-item{background:#fff;border-radius:10px;border:1px solid var(--bb-border);overflow:hidden;}
.bb-booking-item-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--bb-light);}
.bb-booking-ref{font-weight:800;font-size:15px;color:var(--bb-primary);}
.bb-status-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;}
.bb-status-pending{background:#fef3c7;color:#92400e;}
.bb-status-confirmed{background:#d1fae5;color:#065f46;}
.bb-status-completed{background:#dbeafe;color:#1e40af;}
.bb-status-cancelled{background:#fee2e2;color:#991b1b;}
.bb-status-in_progress{background:#fce7f3;color:#9d174d;}
.bb-booking-item-body{padding:16px 18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
@media(max-width:580px){.bb-booking-item-body{grid-template-columns:1fr;}}
.bb-booking-detail-label{font-size:11px;color:var(--bb-gray);font-weight:600;text-transform:uppercase;margin-bottom:2px;}
.bb-booking-detail-val{font-size:14px;font-weight:600;}
.bb-booking-item-footer{padding:12px 18px;border-top:1px solid var(--bb-border);display:flex;gap:8px;flex-wrap:wrap;}

/* Stars */
.bb-stars{display:flex;gap:4px;}
.bb-star{font-size:24px;cursor:pointer;color:#cbd5e1;transition:color .15s;}
.bb-star.active,.bb-star:hover~.bb-star{color:var(--bb-yellow);}
.bb-stars:hover .bb-star{color:var(--bb-yellow);}
.bb-stars .bb-star:hover~.bb-star{color:#cbd5e1;}

/* ─── Auth Form ───────────────────────────────────────────────────────────── */
.bb-auth-wrap{max-width:460px;margin:0 auto;}
.bb-auth-tabs{display:flex;gap:4px;background:var(--bb-light);border-radius:10px;padding:4px;margin-bottom:24px;}
.bb-auth-tab{flex:1;padding:10px;text-align:center;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;color:var(--bb-gray);}
.bb-auth-tab.active{background:#fff;color:var(--bb-primary);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.bb-auth-panel{display:none;}
.bb-auth-panel.active{display:block;}

/* ─── Book Now Button ─────────────────────────────────────────────────────── */
.bb-book-now-btn{position:fixed;bottom:30px;right:30px;z-index:9999;background:var(--bb-primary);color:#fff;padding:14px 24px;border-radius:50px;font-weight:700;font-size:15px;box-shadow:0 8px 32px rgba(14,165,233,.4);cursor:pointer;border:none;display:flex;align-items:center;gap:8px;transition:all .3s;}
.bb-book-now-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(14,165,233,.5);}
.bb-book-now-btn .bb-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:bb-pulse 1.5s infinite;}
@keyframes bb-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ─── Search ─────────────────────────────────────────────────────────────── */
.bb-search-wrap{position:relative;margin-bottom:20px;}
.bb-search-input{width:100%;padding:12px 16px 12px 44px;border:1.5px solid var(--bb-border);border-radius:50px;font-size:14px;font-family:var(--bb-font);}
.bb-search-input:focus{outline:none;border-color:var(--bb-primary);}
.bb-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--bb-gray);}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .bb-wizard{max-height:100vh;border-radius:0;width:100%;}
  .bb-wizard-overlay{padding:0;align-items:flex-start;}
  .bb-steps{overflow-x:auto;padding-bottom:4px;}
  .bb-step{min-width:70px;font-size:11px;}
  .bb-step-num{width:26px;height:26px;font-size:11px;}
  .bb-wizard-header{padding:16px 16px 12px;}
  .bb-wizard-body{padding:16px;}
  .bb-wizard-footer{padding:12px 16px;}
  .bb-ws-card{padding:12px;}
  .bb-ws-icon{width:44px;height:44px;}
  .bb-ws-icon svg,.bb-ws-icon .bb-icon{width:24px !important;height:24px !important;}
  .bb-form-row{grid-template-columns:1fr;}
  .bb-date-time-grid{grid-template-columns:1fr;}
}

/* ── Phone prefix ─────────────────────────────── */
.bb-phone-wrap{display:flex;align-items:center;gap:0;}
.bb-phone-prefix{background:#f1f5f9;border:2px solid var(--bb-border);border-right:none;border-radius:8px 0 0 8px;padding:0 12px;height:44px;display:flex;align-items:center;font-weight:700;color:var(--bb-text);font-size:14px;white-space:nowrap;flex-shrink:0;}
.bb-phone-input{border-radius:0 8px 8px 0 !important;flex:1;}
.bb-field-hint{font-size:11px;color:var(--bb-gray);margin-top:4px;}

/* ── Map address ──────────────────────────────── */
.bb-map-address-wrap{display:flex;gap:8px;align-items:center;}
.bb-map-address-wrap .bb-input{flex:1;}
.bb-map-locate-btn{white-space:nowrap;padding:0 14px;height:44px;border-radius:8px;border:2px solid var(--bb-primary);background:#eff6ff;color:var(--bb-primary);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;flex-shrink:0;transition:all .2s;}
.bb-map-locate-btn:hover{background:var(--bb-primary);color:#fff;}
.bb-map-locate-btn .bb-icon{width:14px;height:14px;}
@media(max-width:500px){.bb-map-address-wrap{flex-direction:column;} .bb-map-locate-btn{width:100%;justify-content:center;}}

/* ── City detect badge ────────────────────────── */
.bb-alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:8px;padding:10px 14px;font-size:13px;margin-top:8px;}

/* ── Service Options (with/without materials) ─── */
.bb-service-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:500px){.bb-service-options{grid-template-columns:1fr;}}
.bb-svc-option{border:2px solid var(--bb-border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:12px;background:#fff;}
.bb-svc-option:hover,.bb-svc-option.selected{border-color:var(--bb-primary);background:#eff6ff;}
.bb-svc-opt-icon{color:var(--bb-border);flex-shrink:0;transition:color .2s;}
.bb-svc-option.selected .bb-svc-opt-icon{color:var(--bb-primary);}
.bb-svc-opt-icon .bb-icon{width:20px;height:20px;}
.bb-svc-opt-info{flex:1;}
.bb-svc-opt-name{font-weight:700;font-size:14px;}
.bb-svc-opt-price{font-size:13px;color:var(--bb-primary);font-weight:600;margin-top:2px;}
.bb-svc-opt-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--bb-border);flex-shrink:0;margin-left:auto;transition:all .2s;}
.bb-svc-option.selected .bb-svc-opt-radio{border-color:var(--bb-primary);background:var(--bb-primary);}

/* ─── UAE City Select ─────────────────────────────────────────────────────── */
#bb-cust-city{cursor:pointer;}

/* ─── Confirmation Dashboard Link ─────────────────────────────────────────── */
.bb-confirmation{text-align:center;padding:20px 10px;}
.bb-confirmation .bb-btn{margin:4px;}

/* ─── Mobile Wizard Fixes ─────────────────────────────────────────────────── */
@media(max-width:480px){
  .bb-wizard{max-height:100dvh;border-radius:0;}
  .bb-wizard-overlay{padding:0;align-items:flex-start;}
  .bb-wizard-body{padding:14px;-webkit-overflow-scrolling:touch;}
  .bb-wizard-footer{padding:10px 14px;flex-wrap:wrap;}
  .bb-wizard-footer #bb-footer-info{order:3;width:100%;text-align:center;font-size:12px;}
  .bb-steps .bb-step div:last-child{display:none;}
  .bb-step{padding:10px 4px;min-width:40px;}
  .bb-phone-wrap{flex-direction:row;}
  .bb-form-row{grid-template-columns:1fr!important;}
  .bb-date-time-grid{grid-template-columns:1fr!important;}
  .bb-map-address-wrap{flex-direction:column;align-items:stretch;}
  .bb-map-locate-btn{justify-content:center;}
  .bb-duration-row{justify-content:center;}
  .bb-ws-card{padding:10px 12px;}
  .bb-ws-price{font-size:13px;white-space:nowrap;}
}