/* Toggle component styles moved to Components section (search: "2a. Toggle Switch Component") */
/* =============================================================
   custom.css — Swoople Brand UI
   Brand Guidelines v1.0 · May 2025
   -----------------------------------------------------------------
   v1.1.5 – Choice‑button layout: add transparent border in default
   ============================================================= */

/* -------------------------------------------------------------
   1.  Font Imports
   ------------------------------------------------------------- */
/* Google font (unchanged) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@300;400;500;600&display=swap");

/* Druk Medium via OTF only (temporary) */
@font-face {
  font-family: "Druk";
  src: url("fonts/Druk-Medium.otf") format("opentype");
  font-weight: 500;      /* Medium weight */
  font-style: normal;
  font-display: swap;
}




/* -------------------------------------------------------------
   2.  Brand Colour Tokens (WCAG‑AA checked)
   ------------------------------------------------------------- */
:root {
  --blueprint: #1E50DC;
  --blueprint-25: rgba(30, 80, 220, 0.25);
  --blueprint-50: rgba(30, 80, 220, 0.75);
  --button-blue: rgba(30, 80, 220, 0.75);
  --not-zoopla: #5028A0;
  --fresh-coat: #E6DCD2;
  --spec-finish: #191919;
  --prime-yield: #FA9119;
  --sold-sign: #FA3C50;
  --land-value: #1E5F46;
  --e-global-color-primary: #191919;
  --clearview: #4BE1FF;
  --clearview-50:   rgba(75, 225, 255, 0.75);
  --clearview-25:   rgba(75, 225, 255, 0.25);
  --mint-condition: #AFE6D2;
  --trendy-loft: #DC87FF;
  --brick-red: #A50000;
  --neutral-100: #FFFFFF;
  --neutral-90: #F5F7FA;
  --neutral-80: #EDEFF3;
  --neutral-70: #D7DAE0;
  --neutral-40: #9BA1AF;
  --neutral-10: #646B7D;
  --not-zoopla-rgb: 34,  45,  67; /* for tints */
  --brick-red-rgb: 178, 34, 34;
  --prime-yield-rgb:  10, 120, 40;
  --spec-finish-rgb: 100, 100, 200;
    /* Choice palette */
  --choice-bg: #E9EEFB;
  --choice-txt: var(--blueprint);
  --choice-active-bg: #FFFFFF;
  --choice-active-txt: var(--blueprint);
  --choice-active-bdr: var(--not-zoopla);
  --border-radius: 0.5rem;
  --transition-fast: 0.25s ease;
  --bs-body-font-size:1rem;
  --heading-font: 'IBM Plex Sans Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* -------------------------------------------------------------
   3.  Base Styles (abridged)
   ------------------------------------------------------------- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* switch primary UI font to Druk, fall back to IBM Plex / system */
  font-family: "IBM Plex Sans Condensed", Arial, sans-serif;
  background: #ffffff;
  color: var(--spec-finish);
  -webkit-font-smoothing: antialiased;
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
}

input, textarea, select {
  font-size: 16px !important;
}

main { flex: 1; }
footer { flex-shrink: 0; }

/* General heading styles */
/* General heading styles - lighter and smaller */
h1, h2, h3{
  font-family: var(--heading-font);
  font-weight: 600;
  line-height: 1.25;
  color:var(--blueprint);
  margin: 0 0 0.5em;
  text-transform: uppercase;
  letter-spacing: -0.5px; 

}

h4, h5, h6, h7 {
  font-family: var(--heading-font);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--spec-finish);
  margin: 0 0 0.5em;
  text-transform: uppercase;
}

/* Reduced sizes */
h1 { font-size: 2.25rem; font-weight: 600;}
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.75rem; font-weight: 600; }
h4 { font-size: 1.5rem; font-weight: 600;color:var(--neutral-10);}

h5 {
  font-size: 1rem;
  color: #666 !important;
  font-weight: 600 !important;
}

h6 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

h7 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brick-red);
}


p,li,input,textarea,select{font-size:1rem;line-height:1.6;}
a{color:var(--blueprint);text-decoration:none;transition:color var(--transition-fast);}a:hover,a:focus{color:var(--trendy-loft);text-decoration:underline;}
:focus-visible{outline:3px solid var(--clearview);outline-offset:2px;}
a:hover{text-decoration:none;}
/* -------------------------------------------------------------
   4.  Primary Buttons (Gradient) – unchanged
   ------------------------------------------------------------- */
.btn{background-color:var(--blueprint-50);display:inline-flex;align-items:center;justify-content:center;font:600 1rem/1.5 "IBM Plex Sans Condensed",sans-serif;text-transform:uppercase;color:var(--neutral-100);padding:.5rem 1rem;border-radius:var(--border-radius);border:1px solid var(--blueprint);background-color:var(--blueprint);cursor:pointer;transition:filter var(--transition-fast),box-shadow var(--transition-fast); height: 40px; min-height: 40px;} 
.btn:hover,.btn:focus{filter:brightness(95%);} .btn-secondary{background:transparent;border-color:var(--blueprint);color:var(--blueprint);} 
.btn-secondary:hover,.btn-secondary:focus{background:var(--blueprint);color:var(--neutral-100);} 
.btn-danger{background:var(--sold-sign);border-color:var(--sold-sign);} 
.filter-panel .btn,.filter-panel .form-control,.filter-panel .form-select{min-height:2.5rem;}

.btn-sml{padding:10px;color:var(--blueprint);display:inline-flex;align-items:center;justify-content:center;font:500 .75rem "IBM Plex Sans Condensed",sans-serif;border-radius:var(--border-radius);border:0px;cursor:pointer;transition:filter var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none;} 
.btn-sml:hover,.btn-sml:focus{background-color: var(--neutral-40);color:white;} 

.btn-sml-2{color:var(--blueprint);display:inline-flex;align-items:center;justify-content:center;font:600 .75rem "IBM Plex Sans Condensed",sans-serif;cursor:pointer;transition:filter var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none;} 
.btn-sml-2:hover,.btn-sml:focus{filter:brightness(95%);} 

.btn-outline-primary.active {
  background-color: var(--land-value) !important; /* your custom color */
  border-color: var(--land-value) !important;     /* optional to match */
  color: white !important;                /* ensure text is readable */
}

/* -------------------------------------------------------------
   4a.  Choice Buttons (Radio / Checkbox labels)
   ------------------------------------------------------------- */


.btn-check:checked+label{
  background:var(--choice-active-bg)!important;
  color:var(--choice-active-txt)!important;
  border:2px solid var(--choice-active-bdr)!important;
}

/* Native inputs (non‑button radios & checkboxes) */
input[type="radio"]:not(.btn-check),
input[type="checkbox"]:not(.btn-check){
  accent-color:var(--not-zoopla);
}


.btn-check:checked+label{
  background:var(--choice-active-bg)!important;
  color:var(--choice-active-txt)!important;
  border:2px solid var(--choice-active-bdr)!important;}

/* -------------------------------------------------------------
   4b.  Select (dropdown) arrow & background
   ------------------------------------------------------------- */
.form-select{
  background-color:var(--neutral-100);
  /* custom down‑arrow using inline SVG, coloured Not‑Zoopla purple */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235028A0'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:1rem;
}

/* -------------------------------------------------------------
   2a. Components → Toggle Switch Component
   ------------------------------------------------------------- */
.toggle {
  --toggle-bg: #e9ecef;
  --toggle-knob: #fff;
  --toggle-on: var(--blueprint);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: 0.75rem;
}

.toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 44px;
  height: 26px;
  background: var(--toggle-bg);
  border-radius: 9999px;
  position: relative;
  transition: background 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--toggle-knob);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.toggle input:checked + .toggle-track {
  background: var(--toggle-on);
}

.toggle input:checked + .toggle-track .toggle-knob {
  transform: translateX(18px);
}

.toggle:focus-within .toggle-track {
  outline: 2px solid rgba(30, 80, 220, 0.35);
  outline-offset: 2px;
}

.toggle-label {
  font-weight: 500;
}

.toggle-help {
  display: block;
  font-size: 0.85rem;
  color: #6c757d;
}

/* -------------------------------------------------------------
   5.  Cards & Surfaces (abridged)
   ------------------------------------------------------------- */
.card{background:var(--neutral-100);border:1px solid var(--neutral-80);border-radius:var(--border-radius);box-shadow:0 .25rem .75rem rgba(0,0,0,.05);overflow:hidden;} .card-header{padding:1rem 1.25rem;font-weight:600;background:var(--fresh-coat);border-bottom:1px solid var(--neutral-80);} .card-body{padding:1.25rem;}

/* -------------------------------------------------------------
   6.  Progress Tracker (new brand styling)
   ------------------------------------------------------------- */

/* Unified stepper styling with proper APCA compliance */
.progress-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px; /* Issue 1: Rounded square shape */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600; /* Issue 3: APCA compliance */
  font-size: 18px; /* Issue 3: Alternative APCA fix */
  transition: all var(--transition-fast);
  cursor: default; /* Issue 10: Remove clickable appearance */
  margin:5px;
}

/* Issue 2: Clear visual distinction for states */
.progress-circle.active {
  background: var(--blueprint);
  border: none;
  color: var(--neutral-100);
}

.progress-circle:not(.active):not(.completed) {
  background: var(--neutral-100);
  border: 1px solid var(--fresh-coat);
  color: var(--blueprint);
  opacity: 0.5; /* Issue 2: 50% opacity for upcoming steps */
}

.progress-circle.completed {
  background: var(--land-value);
  border: none;
  color: var(--neutral-100);
}



.progress-tracker li.completed::after {
  background: var(--blueprint);
}

/* Remove hover states from steppers (Issue 10) */
.progress-link:hover {
  background: none !important;
  cursor: default;
}

/* -------------------------------------------------------------
   9.  v1.1.6 Overrides (purple accents + gradient navbar)
   ------------------------------------------------------------- */

/* Reset active choice text to Not‑Zoopla purple */
:root{
  --choice-active-txt: var(--not-zoopla);
}

.btn-check:checked+label{
  color: var(--not-zoopla)!important;
}

/* Gradient navbar */
/* Gradient navbar */
.navbar{
  background-color: var(--blueprint) !important;
  border-bottom: none;
}

/* One height for all items */
:root { --nav-item-h: 48px; }

/* Brand + Links share the exact same box + typography */
.navbar-brand,
.navbar .nav-link{
  display: flex;
  align-items: center;
  height: var(--nav-item-h);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 5px;
  margin-right: 5px;

  color: var(--fresh-coat);
  font-family: "IBM Plex Sans", sans-serif; /* fix casing */
  font-size: 14px;
  font-weight: 600;
  line-height: 1;                 /* kill baseline drift */
  letter-spacing: -0.2px;
}

/* Keep the whole nav row centered vertically */
.navbar .navbar-nav{
  align-items: center;
}

/* Icons align with text cleanly */
.navbar .nav-link .bi{
  line-height: 1;
  vertical-align: -0.125em;       /* Bootstrap Icons recommended tweak */
  margin-right: .25rem;
}



/* Brand image: remove inline baseline gap */
.navbar .navbar-brand img{
  display: block;
  height: 40px;                   /* your current logo height */
  width: auto;
}

/* States */
.nav-link:hover,
.nav-link:focus{
  color: var(--neutral-40) !important;
}
.nav-link.active{
  text-decoration: underline;
}


/* Ensure dropdowns stay white */
.form-select{
  background-color: var(--neutral-100) !important;
}

/* -------------------------------------------------------------
   10.  Native form-check inputs (ownership checkbox etc.)
   ------------------------------------------------------------- */
.form-check-input[type="checkbox"],
.form-check-input[type="radio"]{
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--not-zoopla);
  border-radius: .25em;
  cursor: pointer;
  appearance: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.form-check-input[type="checkbox"]:checked,
.form-check-input[type="radio"]:checked{
  background-color: var(--not-zoopla);
  border-color: var(--not-zoopla);
}

/* Tick / dot rendering */
.form-check-input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--neutral-100);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-check-input[type="radio"]{
  border-radius: 50%;
}
.form-check-input[type="radio"]:checked::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--neutral-100);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.form-check {
  align-items: center;
}

.form-check-input {
  margin-right: 8px;
  margin-top:0px;
}

.form-check-label {
  line-height: 1.2;
  margin-bottom: 0;
}
/* -------------------------------------------------------------
   11.  Input‑group button height fix
   ------------------------------------------------------------- */
.input-group > .btn,
.input-group > .btn-outline-secondary{
  padding-top:.375rem!important;
  padding-bottom:.375rem!important;
  line-height:1.5!important;
}

/* -------------------------------------------------------------
   11a.  Icon–text spacing inside buttons
   ------------------------------------------------------------- */
/* Icon spacing inside buttons – works whether or not text is wrapped */
.btn i,
.btn svg{
  display:inline-block;
}
/* Icon before text */
.btn i:first-child,
.btn svg:first-child{
  margin-right:.5rem!important;
}
/* Icon after text */
.btn i:last-child:not(:first-child),
.btn svg:last-child:not(:first-child){
  margin-left:.5rem!important;
}

/* Icon comes after text */ → push icon away */
.btn > i:not(:first-child),
.btn > svg:not(:first-child){
  margin-left:.5rem!important;
}

/* -------------------------------------------------------------
   12.  Dropdown menu background (keep white)
   ------------------------------------------------------------- */
.dropdown-menu{
  background-color:var(--neutral-100)!important;
  border:1px solid var(--neutral-80)!important;
}

/* -------------------------------------------------------------
   12a.  White backgrounds for selects & dropdown menus
   ------------------------------------------------------------- */
.form-select,
.dropdown-menu,
.dropdown-item{
  background-color:#FFFFFF !important;
}

.dropdown-item:hover,
.dropdown-item:focus{
  background-color:var(--choice-bg) !important;
}

/* -------------------------------------------------------------
   12b.  size-unit toggle height & style fix
   ------------------------------------------------------------- */
.low_key_button{
  background-image:none!important; /* remove gradient from generic .btn rule */
  background-color:var(--neutral-100)!important;
  color:var(--blueprint)!important;
  border:1px solid var(--neutral-70)!important;
  border-left:0!important; /* maintain seamless join with select */
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
}

/* Further sections unchanged */ */
.input-group > .btn,
.input-group > .btn-outline-secondary{
  padding-top: .375rem !important; /* match .form-select */
  padding-bottom: .375rem !important;
  line-height: 1.5 !important;
}

/* ──────────────────────────────────────────────────────────────
   Seller ↔ Agent – Conversation Modal
   ────────────────────────────────────────────────────────────── */
#agentMessagesModal .modal-content{
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
}

/* header ------------------------------------------------------ */
#agentMessagesModal .modal-header{
  background-color: var(--blueprint);
  color:#fff;
  border-bottom: none;
}
#agentMessagesModal .modal-title{
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.5rem;
}
#agentMessagesModal .btn-close{
  filter:invert(1) opacity(.8);
}
#agentMessagesModal .btn-close:hover{opacity:1}

/* conversation wrapper --------------------------------------- */
#agentMessagesModal #conversation{
  max-height:50vh;              /*  – enough room for the textarea */
  overflow-y:auto;
  padding-right: .25rem;        /* for scrollbar-gutter */
}

/* single message bubble -------------------------------------- */
.chat-message{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  margin-bottom:1.25rem;
}
.chat-message .message-icon{
  flex:0 0 32px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#E9EEFB;
  color:#4B2B9F;
  font-size:1.1rem;
}
.chat-message .message-bubble{
  background:#F8F9FF;
  border:1px solid #E9EEFB;
  border-radius:.5rem;
  padding:.75rem 1rem;
  flex:1 1 auto;
  font-size:.95rem;
  line-height:1.45;
}
.chat-message .chat-info{
  font-size:.75rem;
  color:#6c757d;
}

/* differentiate sides ---------------------------------------- */
.chat-message.agent   .message-bubble{ background:#fff;      border-color:#E9EEFB;}
.chat-message.seller  .message-bubble{ background:#FFF5E6;   border-color:#FFD8A8;}
.chat-message.system-message .message-bubble{
  background:#E9F7EF; border-color:#B1E2D0; color:#155724;
}
.chat-message.system-message .message-icon{
  background:#B1E2D0; color:#155724;
}

/* textarea & form controls ----------------------------------- */
.reply-form textarea{
  width:100%;
  min-height:120px;
  resize:vertical;
  border:1px solid #CED4DA;
  border-radius:.5rem;
  padding:.75rem 1rem;
  margin-bottom:1rem;
  font-size:.95rem;
}
.reply-form textarea:focus{
  outline:none;
  border-color:#4B2B9F;
  box-shadow:0 0 0 .25rem rgba(75,43,159,.15);
}

/* buttons inside modal --------------------------------------- */
#agentMessagesModal .reply-form .btn{
  min-width:130px;
}
#agentMessagesModal .reply-form .btn-secondary{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}
#agentMessagesModal .reply-form .btn-secondary:hover{
  background:#4B2B9F;
  border-color:#4B2B9F;
}
/* ── Message-modal header tweaks ────────────────────────────── */
#agentMessagesModal .modal-header   { position:relative; }

/* 1️⃣  Make the title pure-white */
#agentMessagesModal .modal-title    { color:#fff !important; }

/* 2️⃣  Show a crisp white “×” icon */
#agentMessagesModal .btn-close{
  width:1rem;          /* smaller, Bootstrap-like size            */
  height:1rem;
  opacity:.9;          /* visible against the gradient             */
  filter:none;         /* clear previous invert()                 */
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-size:1rem;
  background-repeat:no-repeat;
  background-position:center;
  border:0;
}
#agentMessagesModal .btn-close:hover{ opacity:1; }
/* ─────────── Chat avatars ─────────── */
.chat-message{
  display:flex;                /* keep icon + bubble on one line            */
  align-items:flex-start;      /* icon top-aligns with bubble               */
  gap:.75rem;                  /* space between icon and bubble             */
}

.chat-message .message-icon{
  flex:0 0 42px;               /* fixed column for the icon                 */
  width:42px;                  /* ensures the bubble never jumps left/right */
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* real user pictures */
.chat-message .profile-image{
  width:100%;
  height:100%;
  border-radius:50%;           /* perfect circle                             */
  object-fit:cover;            /* crop nicely, no distortion                 */
  border:2px solid #fff;       /* crisp edge on coloured bubbles             */
  box-shadow:0 0 0 1px rgba(0,0,0,.07); /* subtle outline                   */
}

/* system / default icons */
.chat-message .default-system-icon,
.chat-message .bi{             /* any inline bootstrap-icon                 */
  font-size:1.4rem;            /* ≈ 22 px inside the 42 px box               */
  color:var(--blueprint);      /* or whichever brand colour you prefer      */
}
/* ——— Agent-card action buttons ——— */
.agent-btn-fixed{
  width: 110px;        /*  ← pick the width you like */
  min-width: 110px;    /* keep it from shrinking     */
  flex-shrink: 0;      /* never let flexbox squash it*/
  white-space: nowrap; /* stop wrapping inside       */
}
/* 1️⃣ Action buttons – Invite & Instruct */
.invite-btn,
.instruct-btn{
  width: 110px;          /* pick any value you like, just keep both equal */
  min-width: 110px;
  flex-shrink: 0;        /* stop flexbox from squeezing them */
  white-space: nowrap;   /* keep the label on one line      */
}




/* ────────────────────────────────────────────────
   2.  Agent-selection pills ↔ match radio/checkbox
   ──────────────────────────────────────────────── */


.btn-success{
  background:var(--land-value);
  color:var(--neutral-80);
  border:1px solid var(--land-value);
}
.btn-success:hover{
  background:var(--land-value);
	border:1px solid var(--land-value);
	color:var(--neutral-80);
}

/* optional: make logos inside the pill sit nicely */
.agent-btn img{
  width:20px;height:20px;border-radius:50%;object-fit:cover;
  margin-right:.35rem;            /* gap between logo & text */
}
.agent-logo{
  width:40px;height:40px;border-radius:50%;object-fit:cover;
}




/* ─── DASHBOARD FILTER PILLS ───────────────────────────────────────── */

.filter-btn{                       /* base look */
  --c-bg:      transparent;        /* normal / inactive */
  --c-text:    var(--bs-primary);
  --c-border:  var(--bs-primary);

  display:flex;
  flex-direction:column;
  align-items:flex-start;          /* stack title + meta */
  gap:.15rem;

  min-width:11rem;                 /* keeps width consistent */
  padding:.65rem 1rem;
  border:1px solid var(--c-border);
  border-radius:.5rem;

  background:var(--c-bg);
  color:var(--c-text);
  text-align:left;                 /* numbers line-up nicely */
  line-height:1.2;
  font-weight:500;
}

.filter-btn .meta{                 /* little line underneath */
  font-size:.75rem;
  opacity:.75;
}

/* ACTIVE / SELECTED  (= “btn-primary” equivalent) */
.filter-btn.active,
.filter-btn:active,
.filter-btn:focus{
  --c-bg:    var(--bs-primary);
  --c-text:  #fff;
  --c-border:var(--bs-primary);

  color:#fff;
}
.filter-btn.active .meta,
.filter-btn:active .meta,
.filter-btn:focus .meta{
  color:#fff;
  opacity:.9;
}

/* SPECIAL COLOURS --------------------------------------------------- */
/*   All Listings = neutral grey instead of danger-red                */
.filter-btn-all{                   /* inactive */
  --c-text:   #495057;
  --c-border: #adb5bd;
}
.filter-btn-all.active{
  --c-bg:    #495057;              /* dark grey */
  --c-border:#495057;
}

/* Optional semantic tints for the others                             */
.filter-btn-info  { --c-text:var(--bs-info);    --c-border:var(--bs-info); }
.filter-btn-success{--c-text:var(--bs-success); --c-border:var(--bs-success);}
.filter-btn-dark  { --c-text:#212529;           --c-border:#212529;}

/* Remove underline on hover */
.filter-btn:hover{text-decoration:none;}

/* if a <button> has only an <i> or <svg> inside (no text), kill the extra margin */
.btn i:only-child,
.btn svg:only-child {
  margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────────
   Marketing-Channel pills should look & feel like choice buttons
──────────────────────────────────────────────────────────────── */
#marketingChannels button {
  /* un‐selected = choice-bg, choice-txt, no border */
  background: var(--choice-bg) !important;
  color:      var(--choice-txt) !important;
  border:     2px solid transparent !important;
  text-transform: none !important;
  padding:    .375rem .75rem !important;
  cursor:     pointer;
  border-radius: var(--border-radius) !important;
  transition: background var(--transition-fast),
              color      var(--transition-fast),
              border     var(--transition-fast);
  display:    inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.875rem;
}

/* hover/ focus */
#marketingChannels button:hover,
#marketingChannels button:focus {
  background: var(--choice-active-bg) !important; /* or a light tint */
  color:      var(--choice-active-txt) !important;
  border-color: var(--choice-active-bdr) !important;
}

/* when clicked (you already toggle `.active` in JS) */
#marketingChannels button.active {
  background: var(--choice-active-bg) !important;
  color:      var(--choice-active-txt) !important;
  border:     2px solid var(--choice-active-bdr) !important;
}

/* keep the little <i> and <small> inside looking nice */
#marketingChannels button i,
#marketingChannels button small {
  margin: 0 !important;
}
#marketingChannels button i:first-child {
  margin-right: .25rem !important;
}

/* Make “active” marketing buttons override outline-secondary immediately */
#marketingChannels button.btn-outline-secondary.active,
#marketingChannels button.btn-outline-secondary.active:hover,
#marketingChannels button.btn-outline-secondary.active:focus {
  background: var(--choice-active-bg) !important;
  color:      var(--choice-active-txt) !important;
  border:     2px solid var(--choice-active-bdr) !important;
  box-shadow: none !important;
}

/* Remove the focus ring so you don’t have to blur */
#marketingChannels button.btn-outline-secondary:focus {
  box-shadow: none !important;
}

/* force the last .col-auto in your filter-panel row down */
.filter-panel .row.align-items-end > .col-auto:last-child {
  align-self: flex-end;
}
  .badge-subtle {
    background-color: rgba(255,255,255,0.1);
    color: #E4DCD3;
    font-size: 0.9rem;
    padding: 0.25em 0.6em;
    border-radius: 0.25rem;
    cursor: pointer;
  }
  
/* ──────────────────────────────────────────────────────────────
   1) BRAND “WARNING” BUTTON
   • Uses your prime-yield token (#FA9119)
   • Solid background, white text, smooth hover
   ────────────────────────────────────────────────────────────── */
.btn-warning {
  /* fill with prime-yield, white text */
  background-color: var(--prime-yield) !important;
  border-color:     var(--prime-yield) !important;
  color:            var(--neutral-100) !important;
  /* same sizing / radius / transition as your other buttons */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  border-radius: var(--border-radius);
  font: 600 1rem/1.5 "IBM Plex Sans Condensed", sans-serif;
  text-transform: uppercase;
  transition: filter var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-warning:hover,
.btn-warning:focus {
  /* subtle darken on hover */
  filter: brightness(95%);
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1);
}

/* if you ever need an outline‐style warning */
.btn-outline-warning {
  background: transparent !important;
  border-color: var(--prime-yield) !important;
  color: var(--prime-yield) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: var(--prime-yield) !important;
  color: var(--neutral-100) !important;
}



.btn-outline-secondary {
  background: transparent !important;
  border-color: var(--blueprint) !important;
  color: var(--blueprint) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--blueprint) !important;
  color: var(--neutral-100) !important;
}

.register-interest{
  border-color: var(--clearview-50) !important;
  }

.unregister-interest{
  background-color: var(--clearview-50) !important;
  color: white !important;
  border-color: var(--clearview-50) !important;
}
.register-interest:hover,
.register-interest:focus {
  background-color: var(--clearview-50) !important;
  color: var(--neutral-90) !important;
  border-color: var(--clearview-50) !important;
}
.unregister-interest:hover,
.unregister-interest:focus {
  background-color: var(--neutral-90) !important;
  color: var(--clearview-50) !important;
  border-color: var(--clearview-50) !important;
}
.feedback-btn{
  color: var(--neutral-40) !important;
  border-color: var(--neutral-10) !important;
}
.feedback-btn:hover{
  background-color: var(--blueprint) !important;
  color: var(--neutral-90) !important;
  border-color: var(--blueprint) !important;
}
.feedback-btn.active {
  background-color: var(--clearview-50)!important;
  color: var(--neutral-90)  !important;
  border-color: var(--clearview-50) !important;
}

.feedback-btn.active.bi-star-fill {
  background-color: var(--neutral-100)!important;
  color: var(--clearview-50)  !important;
  border-color: var(--clearview-50) !important;
}
/* ──────────────────────────────────────────────────────────────
   2) VERTICALLY ALIGN THE “REMOVE” BUTTON
   • Make the last column self-align to the bottom of the row
   ────────────────────────────────────────────────────────────── */
.time-block > .col-md-2 {
  /* override Bootstrap col alignment */
  align-self: flex-end;
}

/* ensure the icon-only button has no extra padding */
.time-block .remove-block i:only-child {
  margin: 0 !important;
}
.add-block-btn {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .6rem;
    --bs-btn-font-size: .75rem;
    font-weight: 500;
    border: 0;
    background: transparent;
    color: var(--clearview);
    display: inline-flex;
    align-items: center;}
    
 /* Ensure the logo img scales to 20% of the page width */
.swoople-brand__logo {
  display: block;      /* removes inline-img whitespace */
  width: 20%;          /* 20% of its parent’s width */
  max-width: 100%;     /* never exceed its intrinsic size */
  height: auto;        /* maintain aspect ratio */
  margin: 0 auto;      /* center if you like */
}

.form-text {
    font-size: .75em;
    }
i {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.small, small {
    font-size: .75em;
}
.bg-secondary {
  background-color: rgba( var(--not-zoopla-rgb), 0.5 ) !important;
}
.bg-secondary-2 {
  background-color: rgba( var(--brick-red-rgb), 0.8 ) !important;
}
.bg-secondary-3 {
  background-color: rgba( var(--prime-yield-rgb), 0.8 ) !important;
}
.bg-secondary-4 {
  background-color: rgba( var(--brick-red-rgb), 0.8 ) !important;
}
.bg-secondary-5 {
  background-color: rgba( var(--not-zoopla-rgb), 0.6 ) !important;
}

    .info-box {
      background-color: var(--neutral-100);
      border-radius: 8px;
      max-width: 700px;
      margin: 0 auto;
    }

    .note {
      margin-top: 1.5rem;
    }
.badge {
    --bs-badge-font-size: .9em;
    }
    
    
    

.nav-link-sub {
  color: var(--blueprint) !important;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link-sub:hover {
  color: var(--blueprint);
  background-color: rgba(0, 123, 255, 0.1); /* light blueprint tint */
  text-decoration: none;
}

.nav-link-sub:focus,
.nav-link-sub:active {
  color: var(--blueprint);
  background-color: rgba(0, 123, 255, 0.15);
  outline: none;
  box-shadow: none;
}

.nav-link-sub.active {
  color: white !important;
  background-color: var(--blueprint) !important;
  font-weight: 600;
  border-color: var(--blueprint);
}
.bg-primary {
    background-color: var(--neutral-70) !important;
}

.text-muted {
  color: var(--neutral-40) !important;
}
/* -------------------------------------------------------------
   14.  Tip-Style Callout
   ------------------------------------------------------------- */
.tip-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--mint-condition);       /* soft green */
  border-left: 4px solid var(--land-value);      /* deeper green accent */
  color: var(--spec-finish);                     /* your standard body text */
  padding: 0.5rem 1rem;
  font-size: 0.875rem;                           /* slightly smaller text */
  border-radius: 0.25rem;
  margin: 0.5rem auto;                           /* centre under nav items */
}

.tip-box i {
  font-size: 1.2rem;      /* bump the icon a bit */
  color: var(--land-value);
}

.tip-box.small {
  padding: 0.9rem 1.8rem;
}
.tip-box strong {
  color: #0a2a43; /* Swoople navy for emphasis */
}

.tip-box button {
  white-space: nowrap; /* Keep text on one line */
}
/* Tips bar: horizontal, wraps if needed, scrolls on very small screens */
/* Horizontal chip rail */
.tips-bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem 0; overflow-x:auto; white-space:nowrap;
}

/* Tip chip with multi-line content */
.tip-chip{
  display:inline-flex; align-items:flex-start; gap:.5rem;
  padding:.5rem .75rem; border-radius:.75rem;
  font-size:.85rem; line-height:1.15;
  border:1px solid transparent; cursor:default; user-select:none;
  max-width: 360px; white-space:normal; /* allow wrapping inside */
}
.tip-chip .bi{ font-size:1rem; opacity:.9; margin-top:.05rem; }
.tip-content{ display:flex; flex-direction:column; gap:.25rem; }
.tip-title{ font-weight:700; }
.tip-desc{ color:#475569; }           /* slate-600 */
.tip-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.tip-action{ font-weight:600; text-decoration:none; }
.tip-action:hover{ text-decoration:underline; }

/* Colour variants */
:root{
  --tip-primary-bg:#EAF4FF; --tip-primary-text:#0B4DA2; --tip-primary-border:#D4E7FF;
  --tip-warn-bg:#FFF4E5;    --tip-warn-text:#8A4500;    --tip-warn-border:#FFE3C1;
  --tip-info-bg:#EEF2FF;    --tip-info-text:#3730A3;    --tip-info-border:#DFE3FF;
  --tip-success-bg:#ECFDF5; --tip-success-text:#065F46; --tip-success-border:#CCE9DF;
  --tip-neutral-bg:#F3F4F6; --tip-neutral-text:#374151; --tip-neutral-border:#E5E7EB;
  --tip-summary-bg:#191919; --tip-summary-text:#E4DCD3; --tip-summary-border:#2A2A2A;
}

/* Base tip */
.tip-chip{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.6rem .8rem; border-radius:.5rem; border:1px solid transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.tip-chip i{ font-size:1rem; margin-top:.1rem; }
.tip-title{ font-weight:600; line-height:1.2; }
.tip-desc{ font-size:.9rem; opacity:.95; }
.tip-actions{ margin-top:.25rem; display:flex; gap:.75rem; flex-wrap:wrap; }
.tip-action{ font-size:.85rem; text-decoration:none }
.tip-action:hover{ text-decoration:underline }


.tip--summary .tip-desc{ color:#BEB7AE; }
.tip--summary .tip-action{ color:#E4DCD3; }

/* Make the rail wrap on wide screens */
@media (min-width: 992px){
  .tips-bar{ white-space:normal; flex-wrap:wrap; }
}


.transparent {
  background-color: transparent !important;
  border: none !important;
}

/* Messages and Badges */
		  /* ===== Modal & Badge Styles ===== */
	  .modal-content {
	    border-radius: 0.75rem;
	    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
	  }
	
	  .badge {
	    padding: 0.35rem 0.75rem;
	    font-size: 0.9rem;
	    min-width: 5rem;
	    text-align: center;
	    border-radius: 1rem;
	    transition: transform 0.2s;
      margin-top:5px;
	  }
	  .badge:hover {
	    transform: scale(1.05);
	    cursor: pointer;
	  }
	  .badge-open {
	    background-color: #f8f9fa;
	    color: #212529;
	    border: 1px solid #dee2e6;
	  }
	  .badge-taken {
	    background-color: #28a745;
	    color: #fff;
	  }
	  .badge-past {
	    background-color: #6c757d;
	    color: #fff;
	    opacity: 0.6;
	    cursor: default;
	    transform: none;
	  }
/* Ensure each message-bubble can be positioned relative */
.message-bubble {
  position: relative;
}

/* When collapsed, hide overflow and show fade overlay */
.message-bubble.collapsed {
  overflow: hidden;
  cursor: pointer; /* indicate it’s clickable */
}

/* Fade-out gradient at the bottom of a collapsed bubble */
.message-bubble.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.2em; /* roughly the height of one line */
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
}

/* The chevron icon container inside the bubble */
.expand-icon {
  position: absolute;
  bottom: 4px;  /* slightly above the bottom edge */
  right: 4px;   /* slightly from the right edge */
  color: rgba(0, 0, 0, 0.6);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 2px;
  font-size: 0.9rem; /* adjust as needed */
  pointer-events: none; /* allow bubble click to “hit” underlying handler */
}

/* When expanded, change the cursor back and remove fade overlay */
.message-bubble.expanded {
  cursor: default;
}
.message-bubble.expanded::after {
  content: none;
}

.slot-badge { cursor: pointer; }
.slot-badge.badge-selected {
  background-color: #0d6efd !important;
  color: #fff !important;
  border: 1px solid #0a58ca;
}
/* -------------------------------------------------------------
   2. FORM COMPONENT STANDARDIZATION 
   ------------------------------------------------------------- */

.form-control,
.form-select,
.btn,
.btn-group label,
.feature-buttons label {
  min-height: 56px !important;
  padding: 0.75rem 1rem;
  border-radius: 12px;
}

.form-control,
.form-select {
 
  background: var(--neutral-100);
  color: var(--spec-finish);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}


.form-group,
.mb-3,
.mb-4 {
  margin-bottom: 32px !important;
}


.invalid-feedback {
  margin-top: 8px;
  color: #D32F2F;
}


.btn-group label,
.feature-buttons label {
  background: var(--neutral-100) !important;
  color: var(--blueprint) !important;
  text-transform: none !important;
  transition: all var(--transition-fast);
  margin:0.25rem;
}

.btn-group label:hover,
.feature-buttons label:hover {
  background: var(--neutral-100) !important;
  border-color: var(--blueprint) !important;
  color: var(--blueprint) !important;
}

.btn-check:checked + label {
  background: rgba(30, 80, 220, 0.1) !important; /* 10% opacity tint */
  border: 1px solid var(--blueprint) !important;
  color: var(--not-zoopla) !important;
  position: relative;
}

/* Add checkmark icon to selected state */
.btn-check:checked + label::after {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--blueprint);
}

/* -------------------------------------------------------------
   3. CHECKBOX STYLING (Issue 9)
   ------------------------------------------------------------- */

.form-check-input[type="checkbox"] {
  width: 24px;
  height: 24px;
  border: 1px solid var(--fresh-coat);
  border-radius: 4px;
  cursor: pointer;
}

.form-check-input[type="checkbox"]:focus {
  border: 2px solid var(--blueprint);
  box-shadow: none;
}

.form-check-input[type="checkbox"]:hover {
  border: 1px solid var(--blueprint);
}

.form-check-input[type="checkbox"]:checked {
  background-color: var(--blueprint);
  border-color: var(--blueprint);
}

.form-check-input[type="checkbox"]:checked::after {
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid var(--neutral-100);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* -------------------------------------------------------------
   4. COUNTRY SELECTOR FIX (Issue 8)
   ------------------------------------------------------------- */

/* Replace flag icon with proper dropdown styling */
#countryDropdown {
  background: var(--neutral-100);
  border: 1px solid var(--fresh-coat);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#countryDropdown img {
  width: 24px;
  height: 18px;
  border-radius: 2px;
}

/* Add dropdown arrow */
#countryDropdown::after {
  content: '';
  border: solid var(--blueprint);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  margin-left: auto;
}

/* -------------------------------------------------------------
   5. PHOTO UPLOAD IMPROVEMENTS (Issues 26, 27, 28)
   ------------------------------------------------------------- */

/* Consolidated photo guidelines - remove redundancy */
.photo-guidelines-popup {
  display: none !important; /* Remove info icon popup */
}

/* Enhanced upload zone */
.upload-zone {
  border: 2px dashed var(--fresh-coat);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--neutral-100);
  transition: all var(--transition-fast);
  cursor: pointer;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--blueprint);
  background: rgba(30, 80, 220, 0.05);
}

/* Photo management controls */
.photo-thumbnail {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.photo-thumbnail .set-cover-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.photo-thumbnail:hover .set-cover-btn {
  opacity: 1;
}

.add-more-photos-btn {
  background: var(--neutral-100);
  color: var(--blueprint);
  border: 1px solid var(--blueprint);
  height: 56px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
}

/* -------------------------------------------------------------
   6. MANDATORY FIELD INDICATORS (Issues 12, 23)
   ------------------------------------------------------------- */

.required-fields-note {
  background: rgba(30, 80, 220, 0.05);
  border-left: 4px solid var(--blueprint);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0 8px 8px 0;
  color: var(--spec-finish);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------
   7. PAGE TITLES (Issues 18, 19)
   ------------------------------------------------------------- */

.page-title {
  font-family: "Druk", Impact, "IBM Plex Sans Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--spec-finish);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

/* -------------------------------------------------------------
   8. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------- */

@media (max-width: 768px) {
  .form-control,
  .form-select,
  .btn,
  .btn-group label,
  .feature-buttons label {
    min-height: 48px !important;
    font-size: 0.9rem;
    margin:5px;
  }
  
  .progress-circle {
    width: 2rem;
    height: 2rem;
    font-size: 14px; 

  }
  
  .upload-zone {
    padding: 2rem 1rem;
  }
  
  /* Make track record fields full width on mobile */
  .w-md-100 {
    width: 100% !important;
  }
  
  /* Fix select dropdown positioning on mobile for essentials section */
  #keyDataContainer .form-select {
    position: relative;
    z-index: 1;
  }
  
  /* Ensure dropdown menus appear correctly on mobile */
  #keyDataContainer select.form-select:focus {
    z-index: 1051;
  }
  
  /* Fix for Bootstrap select dropdown positioning in modals on mobile */
  .modal-body select.form-select {
    position: relative;
  }
  
  .modal-body select.form-select:focus {
    z-index: 1051;
  }
  
  /* Specific fixes for essentials selects on mobile */
  #saleSpeed,
  #feeType,
  #tieInPeriod {
    position: relative;
    z-index: 1;
  }
  
  #saleSpeed:focus,
  #feeType:focus,
  #tieInPeriod:focus {
    z-index: 1051;
    position: relative;
  }
  
  /* Ensure parent containers don't clip dropdowns */
  #keyDataContainer {
    overflow: visible;
  }
  
  .modal-body {
    overflow-x: visible;
  }
  
  /* Hide info icons on mobile for shortlisted, ringfenced, and all agents sections */
  /* Tooltips don't work well on mobile devices */
  #agentsCardsContainer .bi-info-circle[data-bs-toggle="tooltip"],
  #engageMoreAgentsList .bi-info-circle[data-bs-toggle="tooltip"],
  #allAgentsList .bi-info-circle[data-bs-toggle="tooltip"],
  .agent-card-clean .bi-info-circle[data-bs-toggle="tooltip"],
  .engage-more-agent .bi-info-circle[data-bs-toggle="tooltip"],
  .ringfenced .bi-info-circle[data-bs-toggle="tooltip"],
  .metric-label-shortlist .bi-info-circle[data-bs-toggle="tooltip"],
  .metric-item-shortlist .bi-info-circle[data-bs-toggle="tooltip"] {
    display: none !important;
  }
  
  /* Make signContractModal footer buttons full width and stacked on mobile */
  #signContractModal .sticky-bottom {
    flex-direction: column !important;
    gap: 0.5rem;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #signContractModal .sticky-bottom > button,
  #signContractModal .sticky-bottom .ms-auto {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  #signContractModal .sticky-bottom .ms-auto {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem;
    width: 100% !important;
    align-items: center !important;
  }
  
  #signContractModal #sc-pdf-button-container,
  #signContractModal #sc-signing-button-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  #signContractModal #sc-pdf-button-container button,
  #signContractModal #sc-signing-button-container button {
    width: 100% !important;
  }
  
  #signContractModal #sc-status-indicator {
    width: 100% !important;
    text-align: center;
    margin: 0 !important;
  }
  
  /* Ensure agent cards have consistent layout on mobile - avatar above name */
  /* All agents section - stack avatar above name on mobile */
  .engage-more-agent .d-flex.align-items-start,
  .engage-more-agent .d-flex {
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .engage-more-agent .flex-grow-1 {
    width: 100% !important;
    text-align: center;
  }
  
  /* Shortlisted section - ensure avatar is above on mobile */
  #agentsCardsContainer .col-lg-1.col-md-3.col-12 {
    margin-bottom: 1rem;
  }
  
  #agentsCardsContainer .col-lg-8.col-md-6.col-12 {
    text-align: center;
  }
}

/* Desktop styles for agent cards - restore horizontal layout */
@media (min-width: 768px) {
  .engage-more-agent .d-flex.flex-column.flex-md-row {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  
  .engage-more-agent .flex-grow-1.w-100.w-md-auto {
    width: auto !important;
    text-align: left;
  }
  
  #agentsCardsContainer .col-lg-8.col-md-6.col-12 {
    text-align: left;
  }
}


  /* Tab Navigation */
  .dashboard-tabs {
    background: white;
    border-radius: 20px;
    padding: 0.5rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
  }
  
.save-listing-btn {
  z-index: 10;           /* > .carousel-control-* (which use 2) */
  background-color:var(--clearview-50);
  border:0;
  min-height:0 !important;
  margin:5px;
}




/* -------------------------------------------------------------
   8. MESSAGES
   ------------------------------------------------------------- */
/* Messaging App Stylesheet */

/* Messaging App Stylesheet */

/* Main Container */
.messaging-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 600px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
}

/* Timeline Toggle Control */
.timeline-toggle-container {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 10;
  padding: 8px 12px;
}

.timeline-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: white;
  font-weight: 500;
}

.timeline-toggle-label {
  user-select: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.timeline-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: #dee2e6;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;
}

.timeline-toggle-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.timeline-toggle-switch.active {
  background: #ffc107;
}

.timeline-toggle-switch.active::before {
  transform: translateX(16px);
}

.timeline-toggle:hover .timeline-toggle-label {
  color: #ffc107;
}

.timeline-toggle-switch:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

/* Conversation Wrapper */
.conversation-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 transparent;
}

.conversation-wrapper::-webkit-scrollbar {
  width: 6px;
}

.conversation-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.conversation-wrapper::-webkit-scrollbar-thumb {
  background: #dee2e6;
  border-radius: 3px;
}

.conversation-wrapper::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}

/* Date Separator */
.date-separator {
  display: flex;
  justify-content: center;
  margin: 24px 0 16px 0;
  position: relative;
}

.date-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #e9ecef 20%, #e9ecef 80%, transparent 100%);
}

.date-label {
  background: #ffffff;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #6c757d;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  position: relative;
  z-index: 1;
}

/* Message Rows */
.message-row {
  display: flex;
  flex-grow: 1;
  margin-bottom: 16px;
  align-items: flex-end;
  gap: 12px;
}

.agent-row {
  justify-content: flex-start;
}

.user-row {
  justify-content: flex-end;
}

/* Message Content */
.message-content {
  width: 100%;
  max-width: 70%;
  min-width: 120px;
}

.agent-content {
  order: 2;
}

.user-content {
  order: 1;
}

/* Message Header */
.message-header {
  display: flex;
  margin-bottom: 4px;
  font-size: 12px;
  color: #6c757d;
}

.agent-row .message-header {
  justify-content: flex-start;
}

.user-row .message-header {
  justify-content: flex-end;
}

.sender-name {
  font-weight: 600;
  margin-right: 8px;
}

.user-row .sender-name {
  margin-right: 0;
  margin-left: 8px;
  order: 2;
}

.message-time {
  font-weight: 400;
}

.user-row .message-time {
  order: 1;
}

/* Message Bubbles */
.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
}

.agent-bubble {
  background: #ffffff;
  color: #212529;
  border: 1px solid #e9ecef;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.user-bubble {
  background-color:var(--blueprint);
  color: #ffffff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

/* Avatar Styling */
.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.agent-row .message-avatar {
  order: 1;
}

.user-row .message-avatar {
  order: 2;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ffffff;
}

.agent-avatar {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}

.user-avatar {
  background: linear-gradient(135deg, #6f42c1 0%, #4e2a8e 100%);
}

/* Timeline Events */
.timeline-event {
  position: relative;
  margin: 20px 0;
  padding-left: 40px;
  transition: all 0.3s ease;
}

/* Hide timeline events when toggle is off */
.hide-timeline-events .timeline-event {
  display: none;
}

/* Smooth transition for timeline events */
.timeline-event.hiding {
  opacity: 0;
  transform: translateY(-10px);
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
}

.timeline-event.showing {
  animation: slideInTimeline 0.3s ease-out;
}

.timeline-connector {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background:var(--neutral-70);
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px var(--neutral-80);
}

.timeline-connector::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, transparent 0%, var(--neutral-80) 50%, transparent 100%);
}

.timeline-content {
  background: var(--neutral-90);
  border: 1px solid var(--neutral-70);
  border-radius: 12px;
  padding: 12px 16px;
  position: relative;
}

.timeline-content::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px var(--neutral-70);
}

.timeline-text {
  font-size: 13px;
  color: var(--neutral-40);
  line-height: 1.4;
}

.timeline-time {
  font-weight: 600;
  margin-right: 8px;
}

/* Empty Conversation State */
.empty-conversation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
}

.empty-conversation i {
  margin-bottom: 16px;
}

/* Conversation Footer */
.conversation-footer {
  border-top: 1px solid #e9ecef;
  background: #ffffff;
}

/* Message Input */
.message-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-input {
  width: 100%;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  resize: none;
  transition: all 0.2s ease;
  background: #ffffff;
}

.message-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.message-input::placeholder {
  color: #adb5bd;
}

/* Message Actions */
.message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.message-actions .btn {
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
}

.message-actions .btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
}

.message-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.message-actions .btn-outline-secondary {
  border: 1px solid #6c757d;
  color: #6c757d;
}

.message-actions .btn-outline-secondary:hover {
  background: #6c757d;
  color: #ffffff;
}

/* Messaging Disabled State */
.messaging-disabled-wrapper {
  text-align: center;
  padding: 20px;
}

.tip-box {
  background: #e3f2fd;
  border: 1px solid #2196f3;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #1565c0;
  margin:5px;
}
.tip-box .btn { white-space: nowrap; }

.tip-box i {
  font-size: 18px;
  flex-shrink: 0;
}
/* Tip list inside the tip box */
.tip-list{ margin:0; padding:0; list-style:none; }
.tip-item{ display:flex; align-items:center; gap:.5rem; margin:.25rem 0; }
.tip-item .label{ font-weight:600; color:#0a2a43; }
.tip-item .meta{ color:#64748b; } /* slate-500 */
.tip-item .btn{ padding:.2rem .5rem; font-size:.75rem; }

/* Responsive Design */
@media (max-width: 768px) {
  .messaging-container {
    max-height: 500px;
    border-radius: 0;
  }
  
  .timeline-toggle-container {
    top: 12px;
    right: 16px;
    padding: 6px 10px;
  }
  
  .timeline-toggle {
    font-size: 11px;
    gap: 6px;
  }
  
  .timeline-toggle-switch {
    width: 32px;
    height: 18px;
  }
  
  .timeline-toggle-switch::before {
    width: 14px;
    height: 14px;
  }
  
  .timeline-toggle-switch.active::before {
    transform: translateX(14px);
  }
  
  .conversation-wrapper {
    padding: 16px;
    padding-top: 50px; /* Add space for toggle */
  }
  
  .message-content {
    max-width: 85%;
  }
  
  .message-avatar {
    width: 32px;
    height: 32px;
  }
  
  .avatar-placeholder {
    font-size: 14px;
  }
  
  .message-bubble {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  .conversation-footer {
    padding: 16px;
  }
  
  .message-actions {
    flex-direction: column;
  }
  
  .message-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .message-row {
    gap: 8px;
  }
  
  .message-content {
    max-width: 90%;
  }
  
  .timeline-event {
    padding-left: 30px;
  }
  
  .timeline-connector {
    left: 10px;
    width: 8px;
    height: 8px;
  }
}

/* Animation for new messages */
.message-row {
  animation: slideInMessage 0.3s ease-out;
}

@keyframes slideInMessage {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Focus states for accessibility */
.message-input:focus,
.btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .agent-bubble {
    border: 2px solid #000000;
  }
  
  .user-bubble {
    background: #000000;
    border: 2px solid #ffffff;
  }
  
  .timeline-content {
    border: 2px solid #000000;
  }
}

/* CSS Updates for styling changes */

/* 1. Success notifications - change from orange to blue/white and center */
.toast-success, .alert-success {
  background-color: #e3f2fd !important;
  border-color: #1976d2 !important;
  color: #1565c0 !important;
}

/* Center all toast notifications */
.toast-container {
  position: fixed;
  top: 10%;
  left: 85%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* 👈 higher than modals, dropdowns, etc. */
  pointer-events: none; /* Optional: allows clicks to pass through */
}


/* Custom blue/white notification box */
.notification-popup {
  background: linear-gradient(135deg,var(--clearview), #42a5f5);
  color: white;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1060;
  min-width: 300px;
  text-align: center;
  padding: 20px;
}

/* Error/danger notification popup - override default styling */
.notification-popup.bg-danger,
.notification-popup.bg-error,
.notification-popup.error {
  background: #c62828 !important;
  color: #fff !important;
  border: 2px solid #8e0000 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  top: 32px !important;
  right: 32px !important;
  left: auto !important;
  transform: none !important;
  min-width: 320px !important;
  max-width: 400px !important;
  text-align: left !important;
  border-radius: 12px !important;
  padding: 16px 24px 12px 24px !important;
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  z-index: 9999 !important;
}

/* Tip styles for fixed navigation */
.step-tip {
  background: var(--clearview-50);
  border: 1px solid var(--clearview);
  border-radius: 8px;
  padding: 8px 16px;
  margin: 0 1rem;
  font-size: 0.875rem;
  color: var(--blueprint);
  display: flex;
  align-items: center;
  max-width: 450px;
  min-height: 56px !important;
  transition: all 0.3s ease;
}

.step-tip i {
  margin-right: 8px;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .step-tip {
    font-size: 0.75rem;
    padding: 6px 12px;
    margin: 0 0.5rem;
    max-width: 200px;
  }
}

/* Message Icon and Sidebar Styles */
#message-icon {
  transition: all var(--transition-fast);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;

}

#message-icon:hover {
  background-color: var(--blueprint-25);
  transform: scale(1.1);
}

#message-badge {
  font-size: 0.65rem !important;
  min-width: 20px;
  height: 20px;
  line-height: 1;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -1px;
}

.message-count-badge,
#wizardMessageBadge,
#shortlistMessageBadge {
  display: none;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  align-self: center;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-left: 8px;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

#message-sidebar .offcanvas-header {
  background-color: var(--blueprint);
  color: white;
}

#message-sidebar .offcanvas-title {
  color: white !important;
  font-family: "Druk", Impact, "IBM Plex Sans Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

#message-sidebar .card {
  transition: all var(--transition-fast);
  border: 1px solid var(--neutral-80);
}

#message-sidebar .card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

#message-sidebar .card.border-start {
  border-left-color: var(--blueprint) !important;
  border-left-width: 4px !important;
}

#message-sidebar .badge {
  font-size: 0.7rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  #message-icon {
    width: 36px;
    height: 36px;
  }
  
  #message-badge {
    font-size: 0.6rem !important;
    min-width: 18px;
    height: 18px;
    top: -1px;
  }
}

/* Message Modal Integration Styles */
#agentMessagesModal .modal-header {
  background-color: var(--blueprint);
  color: white;
}

#agentMessagesModal .modal-title {
  color: white !important;
  font-family: "Druk", Impact, "IBM Plex Sans Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

#agentMessagesModal .modal-title img {
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  border-radius: 4px;
  padding: 2px;
}

#agentMessagesModal .modal-title .d-flex {
  gap: 8px;
}

#agentMessagesModal .timeline-toggle-container {
  margin-left: auto;
}

#agentMessagesModal .timeline-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#agentMessagesModal .timeline-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

#agentMessagesModal .timeline-toggle-label {
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
}

#agentMessagesModal .timeline-toggle-switch {
  width: 24px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#agentMessagesModal .timeline-toggle-switch.active {
  background: var(--clearview);
}

#agentMessagesModal .timeline-toggle-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

#agentMessagesModal .timeline-toggle-switch.active::before {
  transform: translateX(12px);
}
/* Make body the scroller; footer stays fixed */
#agentMessagesModal .modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS Safari smooth scroll */
}

/* Optional: ensure the custom footer looks like a footer */
#agentMessagesModal .conversation-footer {
  padding: .5rem;
  border-top: 1px solid #dee2e6;
  background: #fff;
  /* Safe-area padding for notched iOS */
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + .5rem);
}

/* Keep the input layout tidy */
#agentMessagesModal .message-input-wrapper {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}

#agentMessagesModal .message-input {
  flex: 1 1 auto;
  resize: none;
}

#agentMessagesModal .message-actions {
  display: flex;
  gap: .5rem;
}
.modal-footer {border-top:0px;}

.btn-outline-danger {
  border-color: var(--bs-danger) !important;
  background-color: transparent !important;
  color: var(--bs-danger) !important;
}

/* Optional: ensure the custom footer looks like a footer */
#agentMessagesModal .conversation-footer {
  padding: .5rem;
  border-top: 1px solid #dee2e6;
  background: #fff;
  /* Safe-area padding for notched iOS */
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + .5rem);
}

/* Keep the input layout tidy */
#agentMessagesModal .message-input-wrapper {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}

#agentMessagesModal .message-input {
  flex: 1 1 auto;
  resize: none;
}

#agentMessagesModal .message-actions {
  display: flex;
  gap: .5rem;
}
.modal-footer {border-top:0px;}


    /* Navigation Tabs */
    .nav-tabs-container {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .modern-tabs {
        display: inline-flex;
        background: #f1f5f9;
        border-radius: 999px;
        padding: 0.25rem;
        gap: 0.25rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .modern-tabs .nav-link {
        border: none;
        border-radius: 999px;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        color: #64748b;
        background: transparent;
        text-decoration: none;
        transition: all 0.2s ease;
        min-width: 140px;
        text-align: center;
    }
    
    .modern-tabs .nav-link:hover {
        color: #475569;
        background: rgba(255, 255, 255, 0.5);
    }
    
    .modern-tabs .nav-link.active {
        color: #fff !important;
        background-color:var(--blueprint);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }

   #summaryOffcanvas .tab-content{height:110% !important;}

   /* Hybrid Navbar CSS - Desktop Dropdowns + Simple Mobile */

/* Navbar base styling */
.navbar {
  padding: 0.75rem 0;
}

.navbar-brand img {
  height: 40px;
}


/* Mobile navbar styling */
/* Fix mobile font consistency - replace the mobile navbar section in your CSS */

@media (max-width: 991.98px) {

  .navbar .navbar-nav {
    align-items: start;
}
  
  /* Navigation items styling - CONSISTENT FOR ALL ITEMS */
  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }

  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0.25rem 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-weight: 500;
    text-align: left;
    justify-content: flex-start;
    /* CONSISTENT FONT STYLING */
    font-size: 1rem;
    letter-spacing: 0.3px;
  }

  .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
  }

  .navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
    border-left: 3px solid rgba(255, 255, 255, 0.8);
    padding-left: 0.75rem;
  }

  /* Special styling for sign out link */
  .navbar-nav .nav-link.text-danger {
    color: #ff6b6b !important;
  }

  .navbar-nav .nav-link.text-danger:hover {
    background-color: rgba(255, 107, 107, 0.1);
    color: #ff5252 !important;
  }

  /* Left side menu items - REMOVE THE DIFFERENT FONT STYLING */
  .navbar-nav.me-auto {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  /* Remove this section that was causing different fonts:
  .navbar-nav.me-auto .nav-link {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
  }
  */

  /* Remove this section that was causing different fonts:
  .navbar-nav:not(.me-auto) .nav-link {
    font-size: 1rem;
  }
  */

  /* Rest of your mobile CSS stays the same... */
  .navbar-collapse {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1rem;
    padding-top: 1rem;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }

  .nav-link .position-absolute {
    top: 8px;
    right: 15px;
  }

  .nav-link i {
    width: 20px;
    text-align: left;
    margin-right: 0.75rem;
    font-size: 1rem;
  }

  .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
  }

  /* Sign in/Register buttons styling */
  .nav-item:has(.nav-link[href*="login"]) .nav-link,
  .nav-item:has(.nav-link[href*="register"]) .nav-link {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0.5rem 0;
    text-align: center;
    justify-content: center;
    font-weight: 600;
  }

  .nav-item:has(.nav-link[href*="register"]) .nav-link {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333 !important;
  }

  .nav-item:has(.nav-link[href*="register"]) .nav-link:hover {
    background-color: white;
    transform: none;
  }

  /* Scrollbar styling for webkit browsers */
  .navbar-collapse::-webkit-scrollbar {
    width: 4px;
  }

  .navbar-collapse::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
  }

  .navbar-collapse::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }

  .navbar-collapse::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  /* Ensure mobile-only links are properly styled */
  .nav-item.d-lg-none .nav-link {
    color: rgba(255, 255, 255, 0.9);
  }

  .nav-item.d-lg-none .nav-link:hover {
    color: white;
  }
}

/* Small mobile devices */
@media (max-width: 576px) {
  
  .navbar-brand img {
    height: 35px;
  }

  .navbar-nav .nav-link {
    font-size: 0.95rem;
    padding: 0.6rem 0.75rem;
  }

  .navbar-nav.me-auto .nav-link {
    font-size: 1rem;
  }

  .navbar-collapse {
    max-height: calc(100vh - 70px);
  }

  /* Auto-close navbar behavior on small screens */
  body.navbar-open {
    overflow: hidden;
  }
}

/* Accessibility improvements */
@media (max-width: 991.98px) {
  
  .nav-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
  }
}

/* Ensure proper z-index for dropdowns - lower than modals */
@media (min-width: 992px) {
  .dropdown-menu {
    z-index: 1030;
  }
}

/* Animation for mobile menu */
.navbar-collapse {
  transition: all 0.3s ease-in-out;
}

/* Make sure navbar stays fixed properly */
.navbar.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.dropdown-item{
      font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color:var(--neutral-10);
}
/* Hide rendered tooltip UI on touch devices */
@media (hover: none) and (pointer: coarse) {
  .tooltip,
  .bs-tooltip-auto,
  .bs-tooltip-top,
  .bs-tooltip-bottom,
  .bs-tooltip-start,
  .bs-tooltip-end {
    display: none !important;
  }
}
@media (max-width: 575.98px) {
  /* Keep checkbox + label on one line, let label wrap within the same row */
  .form-check {
    display: flex;
    align-items: flex-start;  /* top-align for multi-line labels */
    gap: .5rem;
    padding-left:0.5rem;
  }
  .form-check .form-check-input {
    float: none;              /* kill the default float */
    margin-left: 0;
    margin-top: .2rem;        /* slight visual align tweak */
    flex: 0 0 auto;
  }
  .form-check .form-check-label {
    margin-left: 0;
    flex: 1 1 auto;           /* allow wrapping within the same row */
    line-height: 1.35;
    
  }
}
@media (max-width: 575.98px) {

  h1 {
    font-size:1.5rem;
  }
  h4{
    font-size:.8rem;
  }
    h5 {
    font-size:.8rem;
  }
}
  /* Pricing CTA button */
  .pricing-cta {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid #93c5fd; background: #eff6ff; color: #1d4ed8;
    padding: .5rem .85rem; border-radius: .5rem; font-weight: 600; text-decoration: none;
  }
  .pricing-cta:hover, .pricing-cta:focus {
    background: #dbeafe; border-color: #60a5fa; color: #1e40af; text-decoration: none;
  }

/* Featured badge */
.featured-badge{
  position:absolute;
  top:.5rem;
  left:.5rem;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .6rem;
  font-size:.8rem;
  font-weight:700;
  color:#fff;
  background: linear-gradient(90deg,#f59e0b 0%, #ef4444 100%);
  border-radius:9999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.featured-badge .bi{font-size:.9rem;}

/* ensure image wrappers are positioned for the badge */
.listing-row .images{ position: relative; }
/* mobile card image wrapper */
.card-img-wrap{ position:relative; }

/* Step 1 kicker */
.swoop-kicker {
  margin: 1rem auto 0;
  text-align: center;
  max-width: 900px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #0b1220; /* darker for contrast */
  background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(13,110,253,.02));
  border: 1px solid rgba(13,110,253,.15);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 18px rgba(13,110,253,.08);
  animation: swoopFade .35s ease-out both;
}
.swoop-kicker .brand-pill {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 600;
  margin-right: .2rem;
}
.swoop-kicker .hi {
  font-weight: 600;
}
@keyframes swoopFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slightly larger on desktop */
@media (min-width: 992px) {
  .swoop-kicker { font-size: 1.15rem; padding: 16px 22px; }
}

.btn-sml-outline {
  padding: 5px 10px;
  background: var(--neutral-90);
  color: var(--blueprint);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
/* Bottom fixed progress - lower than modals */
.sj-bottom-wrap{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: #fff; border-top: 1px solid #e9ecef;
  padding: .5rem 0;
}
.sj-bottom-rail{
  height: 6px; border-radius: 999px; background: #eef2f6; overflow: hidden;
}
.sj-bottom-fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #0d6efd, #4dabf7);
  transition: width .35s ease;
}
.sj-bottom-labels{
  display: flex; justify-content: space-between; gap: .5rem;
  margin-top: .35rem; font-size: .8rem; color: #6c757d;
}
.sj-bottom-labels span.active{ color: #0d6efd; font-weight: 600; }

/* prevent content being hidden behind fixed bar */
.body-with-bottom-progress{ padding-bottom: 72px; }
@media (max-width: 576px){
  .body-with-bottom-progress{ padding-bottom: 88px; }
  .sj-bottom-labels{ font-size: .75rem; }
}

/* Make time input fields less tall on mobile devices */
@media (max-width: 768px) {
  .vm-start,
  .vm-end {
    min-height: 2rem !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   Modal Z-Index Fix - Ensure all modals appear above everything
   ============================================================ */

/* Bootstrap default z-index hierarchy:
   - Modal backdrop: 1040
   - Modal: 1055
   We ensure all modals follow this and appear above other UI elements */

/* Ensure all modals and their backdrops use proper z-index */
.modal {
  z-index: 1055 !important;
}

.modal.show {
  z-index: 1055 !important;
}

.modal-backdrop {
  z-index: 1040 !important;
}

body.modal-open .modal-backdrop {
  z-index: 1040 !important;
}

.modal-dialog {
  z-index: 1056 !important;
  position: relative;
}

.modal-content {
  position: relative;
  z-index: 1;
}

/* Ensure sticky elements inside modals have proper z-index */
.modal-header.sticky-top,
.modal-header.position-sticky {
  z-index: 1057 !important;
}

.modal-footer.sticky-bottom,
.modal-footer.position-sticky {
  z-index: 1057 !important;
}

/* Ensure modals are always on top of other UI elements */
body.modal-open .modal {
  z-index: 1055 !important;
}

/* Fix for comparison modal appearing behind other elements - stacking context issue */
/* Ensure modal is rendered at body level and breaks out of any stacking context */
.comparison-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1055 !important;
  /* Reset any transforms/opacity/filters that might create stacking context */
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: auto !important;
}

.comparison-modal.show {
  z-index: 1055 !important;
}

.comparison-modal .modal-dialog {
  z-index: 1056 !important;
  position: relative !important;
  transform: none !important;
  /* Ensure dialog doesn't create its own stacking context */
}

.comparison-modal .modal-content {
  z-index: 1 !important;
  position: relative !important;
  transform: none !important;
}

/* Ensure backdrop is below modal */
body.modal-open .comparison-modal + .modal-backdrop,
.comparison-modal + .modal-backdrop {
  z-index: 1040 !important;
}

/* Force modal to be appended to body (Bootstrap should do this, but ensure it) */
body > .comparison-modal {
  z-index: 1055 !important;
}

.border-radius-16 {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

/* Fixed full-width bottom bar */
.swoople-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #ffffff;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

/* Centre the label while buttons sit on the right */
.swoople-action-bar .action-bar-label {
    font-size: 0.9rem;
    color: #333;
}

/* Buttons area on the right */
.swoople-action-bar .action-bar-buttons .btn {
    border-radius: 6px;
    font-size: 0.85rem;      /* small buttons */
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
}

/* Optional: nicer primary / secondary look if needed */
.swoople-action-bar .btn-primary {
    font-weight: 600;
}

.swoople-action-bar .btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

/* Smooth show/hide if you later add scroll-based hiding */
.swoople-action-bar {
    transition: transform 0.25s ease;
}

@media (min-width: 992px) {
    .swoople-action-bar {
        padding-left: 2rem;
        padding-right: 2rem;
    }
   
}