/*
 * ============================================================
 *  Nova Clean UK — Booking Bot  |  Front-End Stylesheet
 *  Version: 1.1.0
 *
 *  TABLE OF CONTENTS
 *  1.  Font Import + CSS Variables
 *  2.  Hard Reset (prevents theme interference on live sites)
 *  3.  Toggle Button  (sticky bottom-right)
 *  4.  Robot Icon + Eye-Blink + Antenna Animations
 *  5.  Cart Badge
 *  6.  Bot Window  (slide-up panel)
 *  7.  Bot Header
 *  8.  Progress Bar
 *  9.  Chat Body + Scrollbar
 * 10.  Message Bubbles  (bot left / user right)
 * 11.  Typing Indicator  (three bouncing dots)
 * 12.  Widget Block  (categories, services, forms)
 * 13.  Category Cards Grid
 * 14.  Service Items  (with emoji icon support)
 * 15.  Quick-Reply Pill Buttons
 * 16.  Form Inputs
 * 17.  Primary + Secondary Action Buttons
 * 18.  Order Summary Card
 * 19.  Payment Method Cards + Stripe Element
 * 20.  Tracking Confirmation Chip  (green)
 * 21.  Chat Footer + Send Button
 * 22.  [novaclean_bot] Inline Shortcode Button
 * 23.  [novaclean_track] Tracking Widget
 *       (matches Image 1: plain input + solid blue TRACK NOW button)
 * 24.  Tracking Result Card + Status Pills
 * 25.  Popup Mode  (bot inside Elementor popup)
 * 26.  Responsive  (mobile ≤ 480 px)
 * ============================================================
 */


/* ─────────────────────────────────────────────────────────────
   1.  Font Import + CSS Variables
   ───────────────────────────────────────────────────────────── */

/*
 * Importing fonts directly here means the bot always looks right
 * regardless of what fonts the theme loads (or doesn't load).
 */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --ncb-navy   : #0a1628;   /* darkest navy – header bg & headings  */
  --ncb-blue   : #1a3a6b;   /* mid blue – gradient end               */
  --ncb-sky    : #2563eb;   /* brand blue – buttons & accents        */
  --ncb-aqua   : #06b6d4;   /* cyan – gradient & robot eyes          */
  --ncb-mint   : #10b981;   /* green – online dot & cart selected    */
  --ncb-white  : #ffffff;
  --ncb-light  : #f0f6ff;   /* very light blue – bot message bubbles */
  --ncb-gray   : #64748b;   /* muted text                            */
  --ncb-border : #e2e8f0;   /* card & input borders                  */
  --ncb-r      : 16px;      /* large radius – window / cards         */
  --ncb-rs     : 10px;      /* small radius – inputs / buttons       */
}


/* ─────────────────────────────────────────────────────────────
   2.  Hard Reset
   ─────────────────────────────────────────────────────────────
   LIVE-SITE FIX:
   Themes like Astra, Hello Elementor, and GeneratePress apply
   aggressive global CSS (box-sizing, font-size, line-height,
   button resets) that breaks the bot's layout.
   We apply "all: initial" to the three root containers so the
   bot is completely isolated, then restore only what we need.
   Child elements inherit from these containers, not the theme.
   ───────────────────────────────────────────────────────────── */

#ncb-toggle,
#ncb-bot-window,
.ncb-track-wrap {
  all          : initial;
  box-sizing   : border-box;
  font-family  : 'DM Sans', sans-serif;
  font-size    : 14px;
  line-height  : 1.5;
  color        : #0a1628;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scope box-sizing to all our children */
#ncb-toggle *,
#ncb-bot-window *,
.ncb-track-wrap * {
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────
   3.  Toggle Button  (sticky, bottom-right corner)
   ─────────────────────────────────────────────────────────────
   LIVE-SITE FIX: z-index 999990 sits above:
     - Elementor sticky header  (~9999)
     - Cookie consent bars      (~99999)
     - Most WP popups           (~999)
   ───────────────────────────────────────────────────────────── */

#ncb-toggle {
  position        : fixed;
  bottom          : 28px;
  right           : 28px;
  z-index         : 999990;
  width           : 66px;
  height          : 66px;
  border-radius   : 50%;
  background      : linear-gradient(135deg, #2563eb, #06b6d4);
  border          : none;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  box-shadow      : 0 8px 32px rgba(37,99,235,.45);
  transition      : transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  animation       : ncb-pulse 2.5s infinite;
  padding         : 0;
}

#ncb-toggle:hover {
  transform : scale(1.1);
  box-shadow: 0 12px 42px rgba(37,99,235,.55);
}

/* Expanding ring that pulses outward */
@keyframes ncb-pulse {
  0%   { box-shadow: 0 8px 32px rgba(37,99,235,.45), 0 0 0 0   rgba(37,99,235,.35); }
  70%  { box-shadow: 0 8px 32px rgba(37,99,235,.45), 0 0 0 18px rgba(37,99,235,0);  }
  100% { box-shadow: 0 8px 32px rgba(37,99,235,.45), 0 0 0 0   rgba(37,99,235,0);  }
}


/* ─────────────────────────────────────────────────────────────
   4.  Robot Icon + Eye-Blink + Antenna Animation
   ─────────────────────────────────────────────────────────────
   The toggle button shows a cute robot face (see bot-widget.php).
   When the bot opens, robot cross-fades to an × close icon.
   The robot's eyes blink every ~3.5 seconds and the antenna bobs.
   ───────────────────────────────────────────────────────────── */

/* Both icons are absolutely centred and layered on top of each other */
.ncb-ico-robot,
.ncb-ico-close {
  position  : absolute;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}

/* Robot visible when bot is closed */
.ncb-ico-robot {
  opacity  : 1;
  transform: scale(1) rotate(0deg);
}

/* × hidden when bot is closed */
.ncb-ico-close {
  opacity  : 0;
  transform: scale(0) rotate(-90deg);
}

/* Swap: bot opened → hide robot, show × */
#ncb-toggle.ncb-open .ncb-ico-robot {
  opacity  : 0;
  transform: scale(0) rotate(90deg);
}
#ncb-toggle.ncb-open .ncb-ico-close {
  opacity  : 1;
  transform: scale(1) rotate(0deg);
}

/* Eye blink — targets the two cyan circles inside the SVG */
.ncb-eye {
  animation       : ncb-blink 3.5s ease-in-out infinite;
  transform-origin: center;
}
.ncb-eye:nth-child(2) {
  animation-delay: .18s; /* tiny offset so eyes aren't perfectly synchronised */
}

@keyframes ncb-blink {
  0%, 88%, 100% { transform: scaleY(1);   opacity: 1;   }
  93%            { transform: scaleY(.12); opacity: .7;  } /* quick squint */
}

/* Antenna gentle rock */
.ncb-antenna {
  animation       : ncb-bob 2.2s ease-in-out infinite;
  transform-origin: 50% 100%; /* pivot at base of stem */
}
@keyframes ncb-bob {
  0%, 100% { transform: rotate(0deg);  }
  30%       { transform: rotate(7deg); }
  70%       { transform: rotate(-7deg);}
}


/* ─────────────────────────────────────────────────────────────
   5.  Cart Badge  (red count bubble on toggle button)
   ───────────────────────────────────────────────────────────── */

.ncb-cart-badge {
  position      : absolute;
  top           : -4px;
  right         : -4px;
  width         : 20px;
  height        : 20px;
  background    : #ef4444;
  border-radius : 50%;
  font-size     : 11px;
  color         : #fff;
  font-weight   : 700;
  display       : none;      /* JS shows this when cart.length > 0 */
  align-items   : center;
  justify-content: center;
  border        : 2px solid #fff; /* white ring makes it legible on blue */
  font-family   : 'DM Sans', sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   6.  Bot Window  (the chat panel itself)
   ─────────────────────────────────────────────────────────────
   LIVE-SITE FIXES applied here:
   - z-index 999989 (one below toggle so toggle is always clickable)
   - max-height uses dvh (dynamic viewport height) which respects
     mobile browser chrome (address bar, toolbar)
   - -webkit-overflow-scrolling for smooth iOS momentum scrolling
   ───────────────────────────────────────────────────────────── */

#ncb-bot-window {
  position        : fixed;
  bottom          : 108px;
  right           : 28px;
  z-index         : 999989;
  width           : 420px;
  max-height      : min(680px, 85dvh);
  background      : #fff;
  border-radius   : 16px;
  box-shadow      : 0 25px 60px rgba(10,22,40,.18);
  display         : flex;
  flex-direction  : column;
  overflow        : hidden;
  /* Start: scaled down + shifted down, then animate to natural size */
  transform       : scale(.85) translateY(24px);
  transform-origin: bottom right;
  opacity         : 0;
  pointer-events  : none;
  transition      : transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  -webkit-overflow-scrolling: touch;
}

/* Active state: fully visible and interactive */
#ncb-bot-window.ncb-open {
  transform    : scale(1) translateY(0);
  opacity      : 1;
  pointer-events: all;
}


/* ─────────────────────────────────────────────────────────────
   7.  Bot Header  (gradient top bar with avatar & status)
   ───────────────────────────────────────────────────────────── */

.ncb-bot-header {
  background  : linear-gradient(135deg, #0a1628, #1a3a6b);
  padding     : 14px 14px 14px 18px;
  display     : flex;
  align-items : center;
  gap         : 10px;
  position    : relative;
  flex-shrink : 0;
  /* overflow NOT hidden — allows minimize button to be fully visible */
}

/* Decorative ghost-circle top-right gives depth */
.ncb-bot-header::after {
  content      : '';
  position     : absolute;
  top          : -30px;
  right        : -20px;
  width        : 120px;
  height       : 120px;
  border-radius: 50%;
  background   : rgba(255,255,255,.05);
  pointer-events: none;
}

/* Round avatar containing the mini-robot SVG */
.ncb-bot-avatar {
  width        : 44px;
  height       : 44px;
  border-radius: 50%;
  background   : linear-gradient(135deg, #2563eb, #06b6d4);
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-shrink  : 0;
  position     : relative;
}

/* Green "online" dot in the bottom-right of the avatar */
.ncb-bot-avatar::after {
  content      : '';
  position     : absolute;
  bottom       : 1px;
  right        : 1px;
  width        : 10px;
  height       : 10px;
  background   : #22c55e;
  border-radius: 50%;
  border       : 2px solid #0a1628;
}

.ncb-bot-info               { display: flex; flex-direction: column; gap: 2px; }
.ncb-bot-info strong        { font-family: 'Syne',sans-serif; font-size:15px; font-weight:600; color:#fff; display:block; }
.ncb-bot-info span          { font-size:12px; color:rgba(255,255,255,.65); }
.ncb-online-badge           { margin-left:auto; margin-right:6px; background:rgba(255,255,255,.15); color:rgba(255,255,255,.9); font-size:11px; padding:4px 8px; border-radius:20px; white-space:nowrap; font-family:'DM Sans',sans-serif; flex-shrink:0; }

/* Ensure minimize button is always visible in header */
#ncb-minimize-btn { display:flex !important; visibility:visible !important; opacity:1 !important; }


/* ─────────────────────────────────────────────────────────────
   8.  Progress Bar  (thin line showing booking step %)
   ───────────────────────────────────────────────────────────── */

.ncb-progress      { height:3px; background:#e2e8f0; flex-shrink:0; }
.ncb-progress-fill { height:100%; background:linear-gradient(90deg,#2563eb,#06b6d4); width:0; transition:width .5s cubic-bezier(.4,0,.2,1); }


/* ─────────────────────────────────────────────────────────────
   9.  Chat Body + Scrollbar
   ───────────────────────────────────────────────────────────── */

.ncb-chat-body {
  flex                      : 1;
  overflow-y                : auto;
  padding                   : 14px;
  display                   : flex;
  flex-direction            : column;
  gap                       : 10px;
  scroll-behavior           : smooth;
  -webkit-overflow-scrolling: touch; /* smooth iOS momentum scroll */
}

/* Thin custom scrollbar so it doesn't dominate the panel */
.ncb-chat-body::-webkit-scrollbar       { width: 4px; }
.ncb-chat-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }


/* ─────────────────────────────────────────────────────────────
   10.  Message Bubbles  (bot = left, user = right)
   ───────────────────────────────────────────────────────────── */

/* Entrance animation: slide up + fade in */
@keyframes ncbMsgIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}

.ncb-msg {
  display    : flex;
  gap        : 8px;
  align-items: flex-start;
  animation  : ncbMsgIn .3s cubic-bezier(.34,1.56,.64,1);
}

/* Bot bubble — light blue, flat top-left corner (like speech from left) */
.ncb-msg-bot .ncb-bubble {
  background   : #f0f6ff;
  color        : #0a1628;
  border-radius: 4px 14px 14px 14px;
  padding      : 10px 14px;
  font-size    : 14px;
  line-height  : 1.5;
  max-width    : 82%;
  font-family  : 'DM Sans', sans-serif;
  word-break   : break-word;
}

/* User bubble — blue gradient, flat top-right corner (speech from right) */
.ncb-msg-user                { flex-direction: row-reverse; }
.ncb-msg-user .ncb-bubble {
  background   : linear-gradient(135deg, #2563eb, #1a3a6b);
  color        : #fff;
  border-radius: 14px 4px 14px 14px;
  padding      : 10px 14px;
  font-size    : 14px;
  line-height  : 1.5;
  max-width    : 82%;
  font-family  : 'DM Sans', sans-serif;
  word-break   : break-word;
}

/* Small avatar circle beside each bubble */
.ncb-msg-av {
  width        : 28px;
  height       : 28px;
  border-radius: 50%;
  background   : linear-gradient(135deg, #2563eb, #06b6d4);
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-shrink  : 0;
}


/* ─────────────────────────────────────────────────────────────
   11.  Typing Indicator  (three bouncing dots)
   ───────────────────────────────────────────────────────────── */

.ncb-typing {
  display      : flex;
  gap          : 4px;
  padding      : 12px 14px;
  background   : #f0f6ff;
  border-radius: 4px 14px 14px 14px;
  width        : fit-content;
}
.ncb-typing span {
  width        : 7px;
  height       : 7px;
  background   : #2563eb;
  border-radius: 50%;
  animation    : ncbDot .8s infinite;
}
.ncb-typing span:nth-child(2) { animation-delay: .15s; }
.ncb-typing span:nth-child(3) { animation-delay: .3s;  }

@keyframes ncbDot {
  0%,80%,100% { transform:scale(.7); opacity:.4; }
  40%          { transform:scale(1);  opacity:1;  }
}


/* ─────────────────────────────────────────────────────────────
   12.  Widget Block  (anything that isn't a plain message bubble)
   ───────────────────────────────────────────────────────────── */

/* Shared entrance animation for all widget blocks */
.ncb-widget { width:100%; animation:ncbMsgIn .3s cubic-bezier(.34,1.56,.64,1); }


/* ─────────────────────────────────────────────────────────────
   13.  Category Cards Grid
   ───────────────────────────────────────────────────────────── */

.ncb-cards-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 8px;
}

.ncb-cat-card {
  background    : #fff;
  border        : 1.5px solid #e2e8f0;
  border-radius : 10px;
  padding       : 12px 10px;
  cursor        : pointer;
  text-align    : center;
  transition    : all .2s;
  font-family   : 'DM Sans', sans-serif;
  display       : flex;
  flex-direction: column;
  align-items   : center;
}
.ncb-cat-card:hover {
  border-color: #2563eb;
  background  : #f0f6ff;
  transform   : translateY(-2px);
  box-shadow  : 0 4px 16px rgba(10,22,40,.1);
}
.ncb-cat-card .ncb-c-icon  { font-size:22px; margin-bottom:6px; }
.ncb-cat-card .ncb-c-label { font-size:12px; font-weight:500; color:#0a1628; }
.ncb-cat-card .ncb-c-count { font-size:11px; color:#64748b; margin-top:2px; }


/* ─────────────────────────────────────────────────────────────
   14.  Service Items  (icon + name + price)
   ─────────────────────────────────────────────────────────────
   Each row: [emoji-icon]  Service Name ··············  £price
   The icon is stored per-service and editable on the dashboard.
   ───────────────────────────────────────────────────────────── */

.ncb-svc-list { display:flex; flex-direction:column; gap:5px; }

.ncb-svc-item {
  background   : #fff;
  border       : 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding      : 9px 12px;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  gap          : 8px;        /* gap between icon → name → price */
  transition   : all .2s;
  font-family  : 'DM Sans', sans-serif;
  width        : 100%;
}
.ncb-svc-item:hover { border-color:#2563eb; background:#f0f6ff; }

/* Emoji icon before the service name */
.ncb-svc-icon { font-size:16px; flex-shrink:0; line-height:1; }

/* Service name — fills remaining horizontal space */
.ncb-sn { font-size:13px; color:#0a1628; font-weight:500; flex:1; text-align:left; }

/* Price — flush right, never wraps */
.ncb-sp { font-size:13px; color:#2563eb; font-weight:600; margin-left:auto; white-space:nowrap; }

/* Selected (added to cart) state */
.ncb-svc-item.selected         { border-color:#10b981; background:#f0fdf4; }
.ncb-svc-item.selected .ncb-sn::before { content:'✓ '; color:#10b981; font-weight:700; }


/* ─────────────────────────────────────────────────────────────
   15.  Quick-Reply Pill Buttons
   ───────────────────────────────────────────────────────────── */

.ncb-qr-row { display:flex; flex-wrap:wrap; gap:6px; }

.ncb-qr-btn {
  background    : #fff;
  border        : 5px solid #2563eb;
  color         : #2563eb;
  font-size     : 13px;
  font-weight   : 500;
  padding       : 7px 14px;
  border-radius : 20px;
  cursor        : pointer;
  transition    : all .2s;
  font-family   : 'DM Sans', sans-serif;
  text-transform: none;
  letter-spacing: normal;
  line-height   : 1.4;
}
.ncb-qr-btn:hover { background:#2563eb; color:#fff; }

/* ─────────────────────────────────────────────────────────────
   Live Cart Summary Bar (shown in service list after adding items)
   ───────────────────────────────────────────────────────────── */
.ncb-cart-summary {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  background    : linear-gradient(135deg, #f0fdf4, #e8f5e9);
  border        : 1.5px solid #10b981;
  border-radius : 10px;
  padding       : 8px 12px;
  margin        : 4px 0 2px;
  font-size     : 13px;
  color         : #065f46;
  font-family   : 'DM Sans', sans-serif;
  animation     : ncb-summary-in .25s ease;
}
@keyframes ncb-summary-in {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
.ncb-cs-icon { font-size:16px; }
.ncb-cs-text { flex:1; }
.ncb-cs-text strong { color:#047857; }


/* ─────────────────────────────────────────────────────────────
   16.  Form Inputs
   ─────────────────────────────────────────────────────────────
   LIVE-SITE FIX: !important on all properties so theme CSS
   (Astra, Elementor, GeneratePress) can't override field styles.
   -webkit-appearance:none normalises iOS date pickers.
   ───────────────────────────────────────────────────────────── */

.ncb-form-group                { display:flex; flex-direction:column; gap:5px; width:100%; }
.ncb-form-group label          { font-size:12px; color:#64748b; font-weight:500; font-family:'DM Sans',sans-serif; }

.ncb-form-group input,
.ncb-form-group select {
  background        : #fff !important;
  border            : 1.5px solid #e2e8f0 !important;
  border-radius     : 10px !important;
  padding           : 10px 12px !important;
  font-size         : 14px !important;
  color             : #0a1628 !important;
  font-family       : 'DM Sans', sans-serif !important;
  transition        : border-color .2s;
  outline           : none !important;
  width             : 100% !important;
  box-shadow        : none !important;
  -webkit-appearance: none;
  appearance        : none;
}
.ncb-form-group input:focus,
.ncb-form-group select:focus   { border-color: #2563eb !important; }

/* Side-by-side date + time selectors */
.ncb-two-col {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 8px;
  width                : 100%;
}


/* ─────────────────────────────────────────────────────────────
   17.  Primary + Secondary Action Buttons
   ─────────────────────────────────────────────────────────────
   LIVE-SITE FIX: !important so themes don't override button color.
   text-transform:none overrides common theme ALL-CAPS button styles.
   ───────────────────────────────────────────────────────────── */

.ncb-btn-primary {
  width         : 100%;
  padding       : 12px;
  border-radius : 10px;
  background    : linear-gradient(135deg, #2563eb, #1a3a6b) !important;
  color         : #fff !important;
  font-size     : 14px;
  font-weight   : 600;
  border        : none !important;
  cursor        : pointer;
  font-family   : 'DM Sans', sans-serif;
  transition    : transform .2s, box-shadow .2s;
  box-shadow    : 0 4px 16px rgba(37,99,235,.3);
  margin-top    : 6px;
  text-transform: none;
  letter-spacing: normal;
  display       : block;
}
.ncb-btn-primary:hover    { transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.4); }
.ncb-btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.ncb-btn-secondary {
  width         : 100%;
  padding       : 10px;
  border-radius : 10px;
  background    : transparent;
  color         : #2563eb;
  font-size     : 13px;
  font-weight   : 500;
  border        : 1.5px solid #2563eb;
  cursor        : pointer;
  font-family   : 'DM Sans', sans-serif;
  transition    : all .2s;
  margin-top    : 6px;
  text-transform: none;
}
.ncb-btn-secondary:hover { background:#2563eb; color:#fff; }


/* ─────────────────────────────────────────────────────────────
   18.  Order Summary Card
   ───────────────────────────────────────────────────────────── */

.ncb-summary { background:#f0f6ff; border:1.5px solid #e2e8f0; border-radius:10px; padding:14px; width:100%; }
.ncb-summary h4 { font-size:12px; color:#64748b; font-weight:500; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; font-family:'DM Sans',sans-serif; }
.ncb-sum-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:#0a1628; font-family:'DM Sans',sans-serif; }
.ncb-sum-row.total { border-top:1px solid #e2e8f0; margin-top:8px; padding-top:10px; font-weight:600; font-size:15px; }
.ncb-sum-row .val  { color:#2563eb; }


/* ─────────────────────────────────────────────────────────────
   19.  Payment Method Cards + Stripe Element
   ───────────────────────────────────────────────────────────── */

.ncb-pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }

.ncb-pay-card {
  background   : #fff;
  border       : 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding      : 12px;
  cursor       : pointer;
  text-align   : center;
  transition   : all .2s;
  font-family  : 'DM Sans', sans-serif;
}
.ncb-pay-card:hover,
.ncb-pay-card.selected { border-color:#2563eb; background:#f0f6ff; }
.ncb-pay-card .pi { font-size:20px; margin-bottom:4px; display:block; }
.ncb-pay-card .pn { font-size:12px; font-weight:500; color:#0a1628; }

/* Stripe.js injects an iframe into this div */
#ncb-stripe-element { border:1.5px solid #e2e8f0; border-radius:10px; padding:14px; background:#fff; margin-top:8px; }


/* ─────────────────────────────────────────────────────────────
   20.  Tracking Confirmation Chip  (green card after booking)
   ───────────────────────────────────────────────────────────── */

.ncb-track-chip { background:linear-gradient(135deg,#f0fdf4,#dcfce7); border:1.5px solid #86efac; border-radius:10px; padding:16px; text-align:center; width:100%; }
.ncb-track-num  { font-family:'Syne','DM Sans',sans-serif; font-size:22px; font-weight:700; color:#15803d; letter-spacing:2px; margin:8px 0; display:block; }
.ncb-track-chip p { font-size:13px; color:#166534; font-family:'DM Sans',sans-serif; }


/* ─────────────────────────────────────────────────────────────
   21.  Chat Footer + Send Button
   ───────────────────────────────────────────────────────────── */

.ncb-chat-footer { padding:12px 14px; border-top:1px solid #e2e8f0; background:#fff; flex-shrink:0; }
.ncb-footer-row  { display:flex; gap:8px; align-items:center; }

.ncb-footer-row input {
  flex         : 1;
  border       : 1.5px solid #e2e8f0 !important;
  border-radius: 24px !important;
  padding      : 10px 16px !important;
  font-size    : 14px !important;
  font-family  : 'DM Sans', sans-serif !important;
  outline      : none !important;
  transition   : border-color .2s;
  color        : #0a1628 !important;
  background   : #fff !important;
  box-shadow   : none !important;
}
.ncb-footer-row input:focus { border-color:#2563eb !important; }

.ncb-footer-row button {
  width        : 40px;
  height       : 40px;
  border-radius: 50%;
  background   : linear-gradient(135deg, #2563eb, #06b6d4);
  border       : none;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  justify-content: center;
  flex-shrink  : 0;
  transition   : transform .2s;
  padding      : 0;
}
.ncb-footer-row button:hover { transform: scale(1.1); }


/* ─────────────────────────────────────────────────────────────
   22.  [novaclean_bot] Inline Shortcode Button
   ─────────────────────────────────────────────────────────────
   Renders a styled "Book Now" button anywhere on any page.
   Clicking it opens the sticky bot window.
   ───────────────────────────────────────────────────────────── */

.ncb-open-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  background     : linear-gradient(135deg, #2563eb, #1a3a6b) !important;
  color          : #fff !important;
  border         : none !important;
  padding        : 13px 26px;
  border-radius  : 10px;
  font-size      : 15px;
  font-weight    : 600;
  cursor         : pointer;
  font-family    : 'DM Sans', sans-serif;
  transition     : opacity .2s, transform .2s;
  text-decoration: none !important;
  text-transform : none;
  letter-spacing : normal;
  line-height    : 1;
}
.ncb-open-btn:hover {
  opacity        : .9;
  transform      : translateY(-1px);
  color          : #fff !important;
  text-decoration: none !important;
}


/* ─────────────────────────────────────────────────────────────
   23.  [novaclean_track] Tracking Widget
   ─────────────────────────────────────────────────────────────
   Matches Image 1 exactly:
     ┌─────────────────────────────┬──────────────────┐
     │  e.g. NC-A3B4C5             │   TRACK NOW →    │
     └─────────────────────────────┴──────────────────┘
   Plain white text input on the left.
   Solid royal-blue "TRACK NOW →" button on the right.
   No outer card shadow — sits directly on the page background.
   ───────────────────────────────────────────────────────────── */

.ncb-track-wrap {
  display    : block;
  max-width  : 580px;
  font-family: 'DM Sans', sans-serif;
}

.ncb-track-title { font-family:'Syne','DM Sans',sans-serif; font-size:22px; font-weight:700; color:#0a1628; margin:0 0 6px; display:block; }
.ncb-track-sub   { font-size:14px; color:#64748b; margin:0 0 18px; display:block; }

/* Row container — input and button sit flush inside a single bordered box */
.ncb-track-form {
  display      : flex;
  align-items  : stretch;
  border       : 1.5px solid #e2e8f0;
  border-radius: 10px;
  overflow     : hidden;
  background   : #fff;
  box-shadow   : 0 2px 12px rgba(10,22,40,.07);
}

/* Text field — left portion, no border of its own */
.ncb-track-input {
  flex              : 1;
  border            : none !important;
  outline           : none !important;
  padding           : 14px 18px !important;
  font-size         : 15px !important;
  color             : #0a1628 !important;
  font-family       : 'DM Sans', sans-serif !important;
  background        : transparent !important;
  box-shadow        : none !important;
  min-width         : 0;
  -webkit-appearance: none;
}
.ncb-track-input::placeholder { color: #94a3b8; }

/* Thin divider between input and button (acts as a visual border) */
.ncb-track-divider {
  width     : 1.5px;
  background: #e2e8f0;
  flex-shrink: 0;
  align-self: stretch;
}

/* Solid blue "TRACK NOW →" button — right portion */
.ncb-track-btn {
  background    : #2563eb !important;
  color         : #fff !important;
  border        : none !important;
  padding       : 14px 24px !important;
  font-size     : 13px !important;
  font-weight   : 700 !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  cursor        : pointer;
  font-family   : 'DM Sans', sans-serif !important;
  display       : flex;
  align-items   : center;
  gap           : 8px;
  white-space   : nowrap;
  transition    : background .2s;
  flex-shrink   : 0;
  border-radius : 0 !important; /* stays flush inside the wrapper */
}
.ncb-track-btn:hover    { background: #1d4ed8 !important; }
.ncb-track-btn:disabled { opacity:.55; cursor:not-allowed; }
.ncb-track-btn svg      { flex-shrink:0; }


/* ─────────────────────────────────────────────────────────────
   24.  Tracking Result Card + Status Pills
   ───────────────────────────────────────────────────────────── */

.ncb-track-result { margin-top:20px; }

.ncb-tr-card    { background:#f0f6ff; border:1.5px solid #bfdbfe; border-radius:14px; padding:20px; }
.ncb-tr-header  { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.ncb-tr-num     { font-size:18px; font-weight:700; color:#0a1628; font-family:'Syne','DM Sans',sans-serif; }

/* Each status has its own colour so staff can glance and understand */
.ncb-tr-status       { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.st-pending          { background:#fef9c3; color:#a16207; }
.st-confirmed        { background:#dcfce7; color:#15803d; }
.st-collected        { background:#dbeafe; color:#1d4ed8; }
.st-cleaning         { background:#ede9fe; color:#6d28d9; }
.st-ready            { background:#d1fae5; color:#065f46; }
.st-out-for-delivery,
.st-out_for_delivery { background:#fef3c7; color:#92400e; }
.st-delivered        { background:#f0fdf4; color:#166534; }
.st-cancelled        { background:#fef2f2; color:#dc2626; }

.ncb-tr-rows { display:grid; gap:6px; }
.ncb-tr-row  { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #e2e8f0; color:#0a1628; font-family:'DM Sans',sans-serif; }
.ncb-tr-row:last-child         { border-bottom:none; }
.ncb-tr-row span:first-child   { color:#64748b; }
.ncb-tr-row span:last-child    { font-weight:500; }

.ncb-tr-items    { margin-top:12px; padding-top:12px; border-top:1px solid #e2e8f0; }
.ncb-tr-items h4 { font-size:12px; color:#64748b; font-weight:500; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; font-family:'DM Sans',sans-serif; }
.ncb-tr-item     { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:#0a1628; font-family:'DM Sans',sans-serif; }

/* Error + spinner feedback */
.ncb-track-error   { background:#fef2f2; border:1.5px solid #fecaca; border-radius:12px; padding:16px 18px; color:#dc2626; font-size:14px; font-family:'DM Sans',sans-serif; }
.ncb-track-spinner { text-align:center; padding:20px; color:#64748b; font-size:14px; font-family:'DM Sans',sans-serif; }


/* ─────────────────────────────────────────────────────────────
   25.  Popup Mode
   ─────────────────────────────────────────────────────────────
   When [novaclean_bot popup="1"] is used in Elementor:
     1. JS adds class ncb-in-popup to body.
     2. JS moves #ncb-bot-window into .ncb-popup-host.
     3. These rules make the bot fill the popup container.
     4. The sticky toggle is hidden while popup is open.
   ───────────────────────────────────────────────────────────── */

/* Host wrapper inside the Elementor popup — set by the shortcode */
.ncb-popup-host {
  display       : flex;
  flex-direction: column;
  width         : 100%;
  height        : 100%;
  min-height    : 500px;
  overflow      : hidden;
}

/* Bot window repositioned to fill the popup */
.ncb-popup-host #ncb-bot-window {
  position      : relative !important;
  bottom        : auto !important;
  right         : auto !important;
  width         : 100% !important;
  max-height    : 100% !important;
  height        : 100% !important;
  border-radius : 0 !important;
  box-shadow    : none !important;
  transform     : none !important;
  opacity       : 1 !important;
  pointer-events: all !important;
}

/* Hide the sticky toggle while popup mode is active */
body.ncb-in-popup #ncb-toggle { display:none !important; }


/* ─────────────────────────────────────────────────────────────
   26.  Responsive  (mobile ≤ 480 px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

  /* Bot panel: full-width strip above the toggle */
  #ncb-bot-window {
    width    : calc(100vw - 20px) !important;
    right    : 10px !important;
    bottom   : 86px !important;
    max-height: 75dvh !important;
  }

  /* Toggle: move closer to corner */
  #ncb-toggle { right:14px !important; bottom:14px !important; }

  /* Tracking form: stack vertically on very small screens */
  .ncb-track-form {
    flex-direction: column;
  }
  .ncb-track-divider { display:none; }
  .ncb-track-input   { border-radius:10px 10px 0 0 !important; }
  .ncb-track-btn     {
    width         : 100% !important;
    justify-content: center;
    border-radius : 0 0 10px 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   27.  Minimum Order Notice & Disabled Button
   ───────────────────────────────────────────────────────────── */

.ncb-min-notice {
  background   : linear-gradient(135deg, #fff7ed, #fef3c7);
  border       : 1px solid #f59e0b;
  border-radius: 10px;
  color        : #92400e;
  font-size    : 12px;
  font-weight  : 600;
  padding      : 9px 12px;
  margin-top   : 8px;
  text-align   : center;
  line-height  : 1.5;
}

.ncb-qr-btn.ncb-btn-disabled {
  opacity       : 0.45;
  cursor        : not-allowed;
  pointer-events: none;
  filter        : grayscale(0.5);
}


/* ═══════════════════════════════════════════════════════════
   ADDRESS LOOKUP — dropdown, fields, minimize button
   ═══════════════════════════════════════════════════════════ */

/* ── Minimize button in the header ── */
#ncb-minimize-btn {
  margin-left     : 0;
  background      : rgba(255,255,255,0.18);
  border          : 1.5px solid rgba(255,255,255,0.40);
  border-radius   : 50%;
  width           : 30px;
  height          : 30px;
  min-width       : 30px;
  display         : flex !important;
  align-items     : center;
  justify-content : center;
  cursor          : pointer;
  color           : #fff;
  transition      : background .2s, transform .15s;
  flex-shrink     : 0;
  position        : relative;
  z-index         : 5;
  visibility      : visible !important;
  opacity         : 1 !important;
}
#ncb-minimize-btn:hover {
  background : rgba(255,255,255,0.32);
  transform  : scale(1.12);
}
#ncb-minimize-btn svg,
#ncb-minimize-btn svg line,
#ncb-minimize-btn svg path {
  stroke : #fff !important;
  color  : #fff !important;
}

/* ── Address dropdown wrapper ── */
.ncb-addr-drop-wrap {
  background    : #fff;
  border        : 1.5px solid #e2e8f0;
  border-radius : 10px;
  margin-top    : 6px;
  overflow      : hidden;
  box-shadow    : 0 8px 24px rgba(10,22,40,0.10);
}

.ncb-addr-drop-label {
  font-size   : 11px;
  font-weight : 600;
  color       : #94a3b8;
  padding     : 8px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ncb-addr-option {
  padding     : 10px 12px;
  font-size   : 13px;
  color       : #0a1628;
  cursor      : pointer;
  border-top  : 1px solid #f1f5f9;
  transition  : background .15s;
  line-height : 1.4;
}
.ncb-addr-option:hover {
  background : #eff6ff;
  color      : #2563eb;
}
.ncb-addr-option:last-child {
  color       : #2563eb;
  font-weight : 500;
  font-style  : italic;
}

/* ── Revealed address fields block ── */
#ncb-addr-fields {
  display        : none;
  flex-direction : column;
  gap            : 8px;
  animation      : ncbFadeSlide .3s ease;
}

@keyframes ncbFadeSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Postcode status badge (valid / invalid / loading) */
#ncb-post-status {
  margin-left : 6px;
  font-size   : 11px;
}



/* ═══════════════════════════════════════════════════════════════
   SWIGGY-STYLE ADDRESS SEARCH  (Step 3)
   ═══════════════════════════════════════════════════════════════ */

/* Root wrapper */
#ncb-addr-root {
  display        : flex;
  flex-direction : column;
  gap            : 0;
}

/* ── Search bar ── */
.ncb-sw-bar {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  background    : #fff;
  border        : 2px solid #2563eb;
  border-radius : 12px;
  padding       : 10px 12px;
  box-shadow    : 0 2px 12px rgba(37,99,235,.12);
  transition    : box-shadow .2s;
}
.ncb-sw-bar:focus-within {
  box-shadow : 0 4px 20px rgba(37,99,235,.22);
}
.ncb-sw-icon { font-size:18px; flex-shrink:0; }
.ncb-sw-input {
  flex        : 1;
  border      : none !important;
  outline     : none !important;
  font-size   : 14px !important;
  font-family : 'DM Sans', sans-serif !important;
  color       : #0a1628 !important;
  background  : transparent !important;
  padding     : 0 !important;
  line-height : 1.4 !important;
}
.ncb-sw-input::placeholder { color:#94a3b8 !important; }
.ncb-sw-spin { font-size:14px; flex-shrink:0; }

/* ── Results dropdown panel ── */
.ncb-sw-panel {
  background    : #fff;
  border        : 1.5px solid #e2e8f0;
  border-top    : none;
  border-radius : 0 0 12px 12px;
  overflow      : hidden;
  box-shadow    : 0 8px 24px rgba(10,22,40,.10);
  margin-top    : -2px;
}

/* ── GPS row ── */
.ncb-gps-row {
  padding    : 8px 10px 4px;
  border-bottom : 1px solid #f1f5f9;
}
.ncb-gps-pill {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  padding       : 10px 12px;
  background    : linear-gradient(135deg, #eff6ff, #e0f2fe);
  border        : 1.5px solid #93c5fd;
  border-radius : 10px;
  font-size     : 13px;
  font-weight   : 600;
  color         : #1d4ed8;
  cursor        : pointer;
  transition    : background .2s, transform .15s;
}
.ncb-gps-pill:hover { background:linear-gradient(135deg,#dbeafe,#bae6fd); transform:translateY(-1px); }

/* Pulsing dot: grey while fetching, green when GPS ready */
.ncb-gps-dot {
  width         : 10px;
  height        : 10px;
  border-radius : 50%;
  background    : #94a3b8;
  flex-shrink   : 0;
  animation     : ncb-gps-pulse 1.4s ease-in-out infinite;
  transition    : background .4s;
}
.ncb-gps-dot.ncb-gps-ready { background:#10b981; }
@keyframes ncb-gps-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(148,163,184,.5); }
  50%     { box-shadow:0 0 0 5px rgba(148,163,184,0); }
}

/* ── Postcode suggestion items ── */
.ncb-sw-item {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 11px 14px;
  cursor        : pointer;
  border-bottom : 1px solid #f8fafc;
  transition    : background .15s;
}
.ncb-sw-item:hover       { background:#f0f6ff; }
.ncb-sw-item-icon        { font-size:16px; flex-shrink:0; }
.ncb-sw-item-label       { font-size:13px; color:#0a1628; font-weight:500; }

/* ── Full address suggestion card ── */
.ncb-sw-addr-card {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 13px 14px;
  cursor        : pointer;
  border-top    : 1px solid #f1f5f9;
  transition    : background .15s, transform .12s;
}
.ncb-sw-addr-card:hover  { background:#f0f6ff; transform:translateX(2px); }
.ncb-swc-left            { font-size:22px; flex-shrink:0; }
.ncb-swc-body            { flex:1; min-width:0; }
.ncb-swc-main            { font-size:13px; font-weight:600; color:#0a1628; line-height:1.3; }
.ncb-swc-post            { font-size:11px; color:#64748b; margin-top:2px; font-family:monospace; letter-spacing:.5px; }
.ncb-swc-arrow           { font-size:20px; color:#2563eb; flex-shrink:0; font-weight:700; }
.ncb-sw-empty            { padding:12px 14px; font-size:13px; color:#ef4444; }

/* ── Confirmed area pill ── */
.ncb-confirmed-pill {
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : 8px;
  background    : #f0fdf4;
  border        : 1.5px solid #10b981;
  border-radius : 10px;
  padding       : 9px 12px;
  font-size     : 13px;
  color         : #065f46;
}
.ncb-change-loc {
  background    : none;
  border        : 1px solid #10b981;
  border-radius : 6px;
  color         : #047857;
  font-size     : 11px;
  padding       : 3px 8px;
  cursor        : pointer;
  font-family   : 'DM Sans', sans-serif;
  white-space   : nowrap;
  flex-shrink   : 0;
}
.ncb-change-loc:hover { background:#dcfce7; }

/* ── Required / optional labels ── */
.ncb-req { color:#ef4444; }
.ncb-opt { color:#94a3b8; font-style:normal; font-weight:400; font-size:11px; }


/* ═══════════════════════════════════════════════════════════════
   COMING SOON CARD  (out-of-zone message)
   ═══════════════════════════════════════════════════════════════ */
.ncb-coming-soon-card {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  background     : linear-gradient(135deg, #fff7ed, #fef3c7);
  border         : 2px solid #fbbf24;
  border-radius  : 14px;
  padding        : 20px 16px;
  gap            : 6px;
}
.ncb-cs-emoji  { font-size:40px; line-height:1; }
.ncb-cs-title  { font-size:16px; font-weight:700; color:#92400e; }
.ncb-cs-text   { font-size:13px; color:#78350f; line-height:1.5; }


/* ═══════════════════════════════════════════════════════════════
   QTY +/- CONTROLS on service items
   ═══════════════════════════════════════════════════════════════ */
.ncb-svc-item {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  cursor        : pointer;
}
.ncb-qty-ctrl {
  display       : flex;
  align-items   : center;
  gap           : 0;
  border        : 2px solid #2563eb;
  border-radius : 20px;
  overflow      : hidden;
  flex-shrink   : 0;
  margin-left   : auto;
}
.ncb-qty-btn {
  background    : #2563eb;
  color         : #fff;
  border        : none;
  padding       : 3px 10px;
  font-size     : 16px;
  font-weight   : 700;
  cursor        : pointer;
  line-height   : 1;
  transition    : background .15s;
  font-family   : 'DM Sans', sans-serif;
}
.ncb-qty-btn:hover  { background:#1d4ed8; }
.ncb-qty-btn:active { background:#1e3a8a; }
.ncb-qty-val {
  padding       : 3px 10px;
  font-size     : 13px;
  font-weight   : 700;
  color         : #1d4ed8;
  background    : #eff6ff;
  min-width     : 24px;
  text-align    : center;
}
/* Push price to far right when qty ctrl visible */
.ncb-svc-item .ncb-sp {
  margin-left   : auto;
  flex-shrink   : 0;
}
.ncb-svc-item:has(.ncb-qty-ctrl[style*='block']) .ncb-sp,
.ncb-svc-item.selected .ncb-sp {
  margin-left   : 6px;
}


/* ═══════════════════════════════════════════════════════════════
   TRACKING PAGE — Pay Now Banner
   ═══════════════════════════════════════════════════════════════ */
.ncb-tr-pay-banner {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 12px;
  background      : linear-gradient(135deg, #fffbeb, #fef3c7);
  border          : 2px solid #fbbf24;
  border-radius   : 12px;
  padding         : 14px 16px;
  margin-top      : 14px;
}
.ncb-tr-pay-banner strong { color:#92400e; font-size:14px; }
.ncb-tr-pay-banner small  { color:#b45309; font-size:12px; }
.ncb-tr-pay-btn {
  background    : linear-gradient(135deg,#2563eb,#06b6d4);
  color         : #fff;
  border        : none;
  border-radius : 10px;
  padding       : 10px 18px;
  font-size     : 14px;
  font-weight   : 700;
  cursor        : pointer;
  white-space   : nowrap;
  transition    : opacity .2s, transform .15s;
  font-family   : 'DM Sans',sans-serif;
  box-shadow    : 0 4px 12px rgba(37,99,235,.3);
}
.ncb-tr-pay-btn:hover  { opacity:.9; transform:translateY(-1px); }
.ncb-unpaid-label      { color:#dc2626; font-weight:600; }