/* ═══════════════════════════════════════════════════════════════════
   iMeetify — Enhanced Global Stylesheet
   font-family: "Open Sans", sans-serif (all views)
   Drop-in replacement — preserves all existing class names & Blade logic
═══════════════════════════════════════════════════════════════════ */

/* ── Google Font import ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --im-primary:        #2563EB;
  --im-primary-dark:   #1D4ED8;
  --im-primary-light:  #EFF6FF;
  --im-accent:         #F59E0B;
  --im-accent-dark:    #D97706;
  --im-success:        #10B981;
  --im-danger:         #EF4444;

  /* Surfaces */
  --im-page-bg:        #F0F4F8;
  --im-card-bg:        #FFFFFF;
  --im-surface-2:      #F8FAFC;

  /* Text */
  --im-text:           #0F172A;
  --im-text-body:      #334155;
  --im-muted:          #64748B;
  --im-muted-light:    #94A3B8;

  /* Borders */
  --im-border:         #E2E8F0;
  --im-border-focus:   #93C5FD;

  /* Radius */
  --im-radius:         14px;
  --im-radius-sm:      8px;
  --im-radius-xs:      6px;
  --im-radius-pill:    999px;

  /* Shadows */
  --im-shadow-xs:      0 1px 4px rgba(15,23,42,.06);
  --im-shadow:         0 2px 16px rgba(15,23,42,.08);
  --im-shadow-md:      0 6px 30px rgba(15,23,42,.11);
  --im-shadow-lg:      0 12px 48px rgba(15,23,42,.15);

  /* Font */
  --im-font:           'Open Sans', sans-serif;

  /* Transitions */
  --im-ease:           .2s ease;
  --im-ease-long:      .35s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════════
   2. BASE RESET
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--im-font) !important;
  background: var(--im-page-bg) !important;
  color: var(--im-text-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { text-decoration: none; transition: color var(--im-ease); }
a:hover { color: var(--im-primary) !important; }
img { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════
   3. PAGE LOADER  (all views)
══════════════════════════════════════════════════════════════════ */
#page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .4s ease;
}
#page-loader.loaded { opacity: 0; pointer-events: none; }

.logo-loader {
  position: relative;
  width: 64px;
  height: 64px;
}
.logo-loader .center-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--im-primary);
}
.logo-loader .dot {
  position: absolute;
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.logo-loader .dot.green { background: var(--im-success); width: 6px; height: 6px; }
.logo-loader .dot.blue  { background: var(--im-primary); width: 5px; height: 5px; }
/* position the inner dots */
.d1{top:4px;left:50%;transform:translateX(-50%);animation-delay:0s}
.d2{top:50%;right:4px;transform:translateY(-50%);animation-delay:.18s}
.d3{bottom:4px;left:50%;transform:translateX(-50%);animation-delay:.36s}
.d4{top:50%;left:4px;transform:translateY(-50%);animation-delay:.54s}
.o1{top:0;left:50%;transform:translateX(-50%);animation-delay:.07s}
.o2{top:8px;right:8px;animation-delay:.14s}
.o3{top:50%;right:0;transform:translateY(-50%);animation-delay:.21s}
.o4{bottom:8px;right:8px;animation-delay:.28s}
.o5{bottom:0;left:50%;transform:translateX(-50%);animation-delay:.35s}
.o6{bottom:8px;left:8px;animation-delay:.42s}

@keyframes dotPulse {
  0%,80%,100%{opacity:.25;transform:scale(.8)}
  40%{opacity:1;transform:scale(1.3)}
}

/* ══════════════════════════════════════════════════════════════════
   4. PAGE SHELL — new-page-theme-sec  (profile + booking grid page)
══════════════════════════════════════════════════════════════════ */
.new-page-theme-sec { min-height: 100vh; }
.new-page-theme-sec .container { padding-top: 1.5rem; padding-bottom: 4rem; }

/* ─ Cards (top-level) ─────────────────────────────────── */
.new-page-theme-sec .card,
.bg-white.shadow {
  border: none !important;
  border-radius: var(--im-radius) !important;
  box-shadow: var(--im-shadow) !important;
  overflow: hidden;
  background: var(--im-card-bg) !important;
  animation: imFadeUp .5s ease both;
}

/* ── Banner ──────────────────────────────────────────── */
.h-200px {
  width: 100%;
  height: 220px !important;
  overflow: hidden;
  position: relative;
}
.h-200px img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.h-200px.im-banner-empty {
  background: linear-gradient(125deg,#0d1b6e 0%,#1a3fbd 50%,#4f78f1 100%) !important;
}
.h-200px.im-banner-empty::after {
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 70% 50%,rgba(99,179,237,.3) 0%,transparent 55%),
    radial-gradient(ellipse at 15% 70%,rgba(139,92,246,.18) 0%,transparent 50%),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.03'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Profile Header ──────────────────────────────────── */
.profile-header {
  position: relative;
  padding: 0 1.75rem 1.25rem !important;
}
.profile-image {
  margin-top: -52px !important;
  margin-bottom: .6rem;
  display: inline-block;
  flex-shrink: 0;
}
.profile-image img {
  width: 104px !important; height: 104px !important;
  border-radius: 50% !important;
  border: 4px solid #fff !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.22) !important;
  object-fit: cover !important;
  transition: transform var(--im-ease);
}
.profile-image img:hover { transform: scale(1.04); }

.profile-name {
  font-family: var(--im-font) !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  color: var(--im-text) !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .25rem !important;
}

.profile-description {
  font-size: .9rem !important;
  color: var(--im-text-body) !important;
  line-height: 1.65 !important;
}
.profile-description p { margin-bottom: .45rem !important; }

/* ── Phone badge ─────────────────────────────────────── */
.fixed-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: var(--im-primary);
  color: #fff !important;
  border-radius: 50%;
  font-size: .72rem;
  transition: background var(--im-ease), transform var(--im-ease);
}
.fixed-tel:hover { background: var(--im-primary-dark); transform: translateY(-2px); color:#fff!important; }

/* ── Social icons ────────────────────────────────────── */
.top-section { display: flex; justify-content: flex-end; align-items: center; }
.social-icons { display: flex; align-items: center; gap: .28rem; flex-wrap: wrap; }
.social-icons a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid var(--im-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: #475569 !important;
  font-size: .9rem;
  transition: background var(--im-ease), color var(--im-ease), transform var(--im-ease), box-shadow var(--im-ease);
}
.social-icons a:hover {
  background: var(--im-text) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(15,23,42,.18);
}

/* ── Manage button ───────────────────────────────────── */
.btn-manage {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  background: var(--im-text);
  color: #fff !important;
  border: none;
  border-radius: var(--im-radius-pill);
  font-family: var(--im-font);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--im-ease), transform var(--im-ease);
}
.btn-manage:hover { background: #1e293b; transform: translateY(-1px); color:#fff!important; }

/* ── Google reviews ─────────────────────────────────── */
.google-reviews {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius-pill);
  padding: .5rem .9rem;
  background: #fff;
  font-weight: 500;
  white-space: nowrap;
  transition: box-shadow var(--im-ease), border-color var(--im-ease);
  color: var(--im-muted);
}
.google-reviews:hover { box-shadow: var(--im-shadow-xs); border-color: #cbd5e1; color:var(--im-muted)!important; }
.google-reviews .g-stars { color: #f59e0b; }
.google-reviews .g-score { color: var(--im-text); font-weight: 700; }
.review { display: flex; align-items: center; justify-content: flex-end; }

/* ── Booking section card heading ────────────────────── */
.new-page-theme-sec .card.my-4 h2 {
  font-family: var(--im-font) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--im-text) !important;
  letter-spacing: -.01em !important;
}

/* ── Footer confirmation strip ───────────────────────── */
.footer-info {
  padding: .5rem 1.5rem 1.75rem !important;
  text-align: center;
  font-size: .84rem !important;
  color: var(--im-muted) !important;
  font-weight: 500 !important;
  animation: imFadeUp .6s .8s ease both;
}
.footer-info i { color: var(--im-success) !important; margin-right: 6px; }
.footer-info .badge {
  background: #f1f5f9 !important;
  color: var(--im-muted) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  padding: .45rem 1rem !important;
  border-radius: var(--im-radius-pill) !important;
  border: 1px solid var(--im-border) !important;
}

/* ── Powered-by footer ───────────────────────────────── */
.footer-sec, .footer-logo {
  font-size: .78rem !important;
  color: var(--im-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════
   5. BOOKING CARDS  (callzero output / calendar cards grid)
══════════════════════════════════════════════════════════════════ */
.booking-card {
  background: var(--im-card-bg);
  border-radius: var(--im-radius) !important;
  border: 1.5px solid var(--im-border) !important;
  box-shadow: var(--im-shadow-xs);
  padding: 1.35rem 1.35rem 1.1rem;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--im-ease-long), box-shadow var(--im-ease-long), border-color var(--im-ease-long);
  animation: imCardFadeUp .5s ease both;
}
.booking-card::before {
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background: linear-gradient(90deg,var(--im-accent) 0%,var(--im-primary) 100%);
}
.booking-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--im-shadow-md) !important;
  border-color: transparent !important;
}

/* Badge row */
.booking-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; margin-bottom:.9rem; }
.booking-badges { display:flex; gap:.3rem; flex-wrap:wrap; flex:1; }
.badge-item {
  display:inline-flex; align-items:center; gap:.28rem;
  padding:.22rem .65rem;
  background:#f8fafc;
  border-radius:var(--im-radius-pill);
  font-size:.7rem; font-weight:600;
  color:var(--im-muted);
  border:1px solid var(--im-border);
  text-transform:uppercase; letter-spacing:.025em;
  white-space:nowrap; line-height:1.5;
  transition: background var(--im-ease), color var(--im-ease);
}
.badge-item i { font-size:.76rem; }
.badge-item.in-person { color:#065f46; background:#ecfdf5; border-color:#d1fae5; }
.badge-item.duration  { color:var(--im-muted); }
.badge-item.text-primary { color:#0d9488!important; background:#f0fdfa!important; border-color:#99f6e4!important; }

/* Consultant name */
.consultant-name {
  font-family:var(--im-font)!important;
  font-size:1.15rem!important;
  font-weight:700!important;
  color:var(--im-text)!important;
  margin-bottom:.45rem!important;
  letter-spacing:-.01em!important;
  line-height:1.3!important;
}

/* Description clamp */
.consultant-description,
.calendar-description {
  font-size:.82rem;
  line-height:1.55;
  color:var(--im-muted)!important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.55em * 3);
}
.calendar-description.expanded { max-height:none; -webkit-line-clamp:unset; }

/* Book Now CTA */
.btn-book-now {
  width:100%;
  padding:.75rem 1.25rem;
  background:var(--im-accent);
  border:none;
  border-radius:var(--im-radius-sm)!important;
  font-family:var(--im-font);
  font-size:.88rem;
  font-weight:700;
  color:#fff!important;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin-top:auto;
  position:relative;overflow:hidden;
  text-decoration:none;
  letter-spacing:.01em;
  transition: background var(--im-ease), transform var(--im-ease), box-shadow var(--im-ease);
}
.btn-book-now:hover {
  background:var(--im-accent-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(245,158,11,.35);
  color:#fff!important;
}
.btn-book-now:active { transform:translateY(0); }
.btn-book-now::after {
  content:'';
  position:absolute;inset:0;
  background:rgba(255,255,255,0);
  transition:background .15s;
}
.btn-book-now:hover::after { background:rgba(255,255,255,.06); }

/* Pricing section */
.pricing-section {
  display:flex;align-items:baseline;justify-content:center;gap:.3rem;
  padding-top:.9rem;border-top:1px solid var(--im-border);margin-top:.7rem;
}
.price-amount   { font-size:1.7rem;font-weight:700;color:#0d9488;letter-spacing:-.03em; }
.price-currency { font-size:1rem;font-weight:600;color:#0d9488; }
.price-icon     { font-size:1rem;color:#0d9488;margin-right:2px; }

/* Column stagger */
@keyframes imCardFadeUp {
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.col-md-4:nth-child(1) .booking-card{animation-delay:.05s}
.col-md-4:nth-child(2) .booking-card{animation-delay:.12s}
.col-md-4:nth-child(3) .booking-card{animation-delay:.19s}
.col-md-4:nth-child(4) .booking-card{animation-delay:.26s}
.col-md-4:nth-child(5) .booking-card{animation-delay:.33s}
.col-md-4:nth-child(6) .booking-card{animation-delay:.40s}

/* ══════════════════════════════════════════════════════════════════
   6. LEFT PANEL  (cal-lft-sec / user-left-sec)
══════════════════════════════════════════════════════════════════ */
.cal-lft-sec { padding: 1.5rem 1rem 1.5rem 1.25rem; }
.cal-lft-sec p { font-size:.875rem!important; color:var(--im-text-body); }
.desc-txt { font-size:.82rem!important; color:var(--im-muted); line-height:1.6; }

/* Member heading */
.member-heading,.cal-lft-sec h5 {
  font-size:1rem!important;
  font-weight:700!important;
  color:var(--im-text)!important;
  letter-spacing:-.01em;
}
.cal-lft-sec h3,.cal-lft-sec h6 {
  font-family:var(--im-font)!important;
  font-weight:600!important;
  color:var(--im-text)!important;
}

/* Meta rows (clock, person, etc.) */
.cal-lft-sec .d-flex.align-items-center {
  gap:.5rem;
  font-size:.875rem;
  color:var(--im-text-body);
}
.cal-lft-sec i.text-primary { color:var(--im-primary)!important; }

/* Back icon */
.back-icon a {
  display:inline-flex;align-items:center;gap:.35rem;
  color:var(--im-muted)!important;
  font-size:.82rem;font-weight:600;
  transition:color var(--im-ease), transform var(--im-ease);
}
.back-icon a:hover { color:var(--im-primary)!important; transform:translateX(-2px); }
.back-icon .bi { font-size:1.4rem; }

/* Scroll panel */
.scroll {
  max-height:29rem!important;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(100,116,139,.2) transparent;
}
.scroll::-webkit-scrollbar { width:4px; }
.scroll::-webkit-scrollbar-thumb { background:rgba(100,116,139,.2); border-radius:4px; }
.scroll::-webkit-scrollbar-track { background:transparent; }

/* ══════════════════════════════════════════════════════════════════
   7. CALENDAR / DATE-TIME PICKER  (callbackk view)
══════════════════════════════════════════════════════════════════ */
.cal-sec p.fw-semibold,
.cal-sec p.text-primary {
  font-size:.85rem!important;
  font-weight:600!important;
  color:var(--im-primary)!important;
  letter-spacing:.01em;
}

/* Datepicker overrides */
.datepicker { font-family:var(--im-font)!important; }
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background: var(--im-primary)!important;
  border-color: var(--im-primary)!important;
  border-radius: 50%!important;
  font-weight:700!important;
}
.datepicker table tr td:hover,
.datepicker table tr td.day:hover {
  background: var(--im-primary-light)!important;
  border-radius: 50%!important;
  color: var(--im-primary)!important;
}
.datepicker table tr td.true {
  color: var(--im-primary)!important;
  font-weight:600!important;
  background: #dbeafe!important;
  border-radius:50%!important;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
  font-weight:600!important;
  color:var(--im-text)!important;
  border-radius:var(--im-radius-xs)!important;
  transition:background var(--im-ease);
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover { background:var(--im-primary-light)!important; }
.datepicker .dow { font-size:.72rem!important; font-weight:700!important; color:var(--im-muted)!important; text-transform:uppercase; letter-spacing:.05em; }
.datepicker table tr td { border-radius:50%!important; }

/* Timezone select */
.select-sec .select2-container .select2-selection--single {
  height:40px!important;
  border:1.5px solid var(--im-border)!important;
  border-radius:var(--im-radius-sm)!important;
  display:flex!important;align-items:center!important;
  font-family:var(--im-font)!important;
  font-size:.875rem!important;
  transition:border-color var(--im-ease), box-shadow var(--im-ease);
}
.select-sec .select2-container--open .select2-selection--single,
.select-sec .select2-container .select2-selection--single:focus {
  border-color:var(--im-primary)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.1)!important;
}

/* Timezone note */
#co,.tz-note,.timesec {
  font-size:.75rem!important;
  color:var(--im-muted)!important;
  margin-top:.3rem;
}
#co { color:var(--im-danger)!important; font-style:italic!important; }

/* Globe placeholder */
.slot-sec img.img-fluid { opacity:.65; }
.slot-sec h6,.slot-sec h4 {
  font-size:.9rem!important;
  color:var(--im-muted)!important;
  font-weight:500!important;
}

/* ── Progress bar (loading) ─────────────────────────── */
.progress-bar { height:4px!important; border-radius:0!important; overflow:visible!important; background:transparent!important; }
.bar { background:rgba(37,99,235,.08)!important; }
.progress { background:linear-gradient(90deg,var(--im-primary),#60a5fa)!important; border-radius:0 2px 2px 0!important; }

/* ── No-slots placeholder ───────────────────────────── */
.no-timeslot-sec p { font-size:.9rem!important; color:var(--im-muted)!important; font-weight:500!important; }
.alert[id="Nolet"] {
  border-radius:var(--im-radius-pill)!important;
  background:#fff!important;
  box-shadow:var(--im-shadow-md)!important;
  border:1px solid var(--im-border)!important;
  font-size:.82rem!important;
  font-weight:500!important;
  color:var(--im-muted)!important;
  padding:.6rem 1.2rem!important;
}

/* ══════════════════════════════════════════════════════════════════
   8. TIME SLOTS
══════════════════════════════════════════════════════════════════ */
.scrollbar-slot { overflow-y:auto; max-height:24rem; padding-right:4px; }
.scrollbar-slot::-webkit-scrollbar { width:4px; }
.scrollbar-slot::-webkit-scrollbar-thumb { background:rgba(100,116,139,.2); border-radius:4px; }

/* Section labels: Morning / Noon / Evening */
#Morning, #Noon, #Evening, .slot-sec p[id] {
  font-size:.72rem!important;
  font-weight:700!important;
  color:var(--im-muted)!important;
  text-transform:uppercase!important;
  letter-spacing:.07em!important;
  padding:.4rem 0 .3rem!important;
  margin-bottom:.4rem!important;
  display:block;
}

/* Date label */
.slot-sec h5, .col-md-12 h5:not(.member-heading) {
  font-size:.9rem!important;
  font-weight:600!important;
  color:var(--im-text)!important;
  margin-bottom:.6rem!important;
}

/* Time slot list */
ul.time-slot {
  list-style:none;
  padding:0; margin:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.time-slot-item {
  border:1.5px solid var(--im-border);
  border-radius:var(--im-radius-sm);
  padding:.55rem .4rem;
  text-align:center;
  font-size:.78rem;
  font-weight:500;
  cursor:pointer;
  color:var(--im-text-body);
  background:var(--im-card-bg);
  transition: border-color var(--im-ease), color var(--im-ease), background var(--im-ease), transform var(--im-ease), box-shadow var(--im-ease);
  user-select:none;
  -webkit-user-select:none;
}
.time-slot-item:hover:not(.disabled-sec) {
  border-color:var(--im-primary);
  color:var(--im-primary);
  background:var(--im-primary-light);
  transform:translateY(-1px);
}
.time-slot-item.picked, .time-slot-item.active {
  background:var(--im-primary)!important;
  color:#fff!important;
  border-color:var(--im-primary)!important;
  font-weight:700!important;
  box-shadow:0 4px 12px rgba(37,99,235,.3)!important;
}
.time-slot-item.disabled-sec {
  opacity:.35!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
  background:#f8fafc!important;
  color:var(--im-muted-light)!important;
  border-color:var(--im-border)!important;
}

/* Book appointment button */
.book-appt {
  width:100%;
  padding:.8rem 1.25rem;
  background:var(--im-primary);
  color:#fff!important;
  border:none;
  border-radius:var(--im-radius-sm);
  font-family:var(--im-font);
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  letter-spacing:.01em;
  transition: background var(--im-ease), transform var(--im-ease), box-shadow var(--im-ease);
}
.book-appt:hover {
  background:var(--im-primary-dark);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(37,99,235,.32);
}
.book-appt:disabled, .book-appt[disabled] {
  background:#cbd5e1!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
  color:#94a3b8!important;
}

/* Preference list items */
#list-prefrences .list-group-item {
  font-size:.8rem!important;
  color:var(--im-text-body)!important;
  padding:.35rem .5rem!important;
  background:var(--im-primary-light)!important;
  border-radius:var(--im-radius-xs)!important;
  margin-bottom:.25rem;
  border:none!important;
}

/* ══════════════════════════════════════════════════════════════════
   9. CONTACT / USER PROFILE FORM  (userprofile view)
══════════════════════════════════════════════════════════════════ */
.user-pro-sec h3 {
  font-family:var(--im-font)!important;
  font-size:1.15rem!important;
  font-weight:700!important;
  color:var(--im-primary)!important;
  margin-bottom:.75rem!important;
}

/* Date/time chip */
.top-txt {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  background:var(--im-primary-light);
  border:1px solid #bfdbfe;
  border-radius:var(--im-radius-pill);
  padding:.45rem 1rem;
  font-size:.82rem;
  font-weight:500;
  color:var(--im-primary);
  margin-bottom:1.25rem;
}
.top-txt i { color:var(--im-primary); font-size:.9rem; }

/* Form labels */
.user-form-sec .form-label {
  font-size:.82rem!important;
  font-weight:600!important;
  color:var(--im-text)!important;
  margin-bottom:.35rem!important;
}

/* Form controls */
.user-form-sec .form-control,
.user-form-sec textarea.form-control,
.user-form-sec select.form-control {
  border:1.5px solid var(--im-border)!important;
  border-radius:var(--im-radius-sm)!important;
  padding:.65rem .9rem!important;
  font-family:var(--im-font)!important;
  font-size:.875rem!important;
  color:var(--im-text)!important;
  background:#fff!important;
  transition:border-color var(--im-ease), box-shadow var(--im-ease)!important;
  box-shadow:none!important;
}
.user-form-sec .form-control:focus,
.user-form-sec textarea.form-control:focus {
  border-color:var(--im-primary)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.1)!important;
  outline:none!important;
}

/* Add guest button */
.btn-guest {
  background:none!important;
  border:1.5px dashed var(--im-border)!important;
  border-radius:var(--im-radius-sm)!important;
  color:var(--im-primary)!important;
  font-size:.82rem!important;
  font-weight:600!important;
  padding:.4rem .8rem!important;
  transition:border-color var(--im-ease), background var(--im-ease)!important;
  display:inline-flex!important;align-items:center!important;gap:.35rem!important;
}
.btn-guest:hover {
  border-color:var(--im-primary)!important;
  background:var(--im-primary-light)!important;
}

/* Tags input area */
.bootstrap-tagsinput {
  border:1.5px solid var(--im-border)!important;
  border-radius:var(--im-radius-sm)!important;
  padding:.5rem .75rem!important;
  min-height:42px!important;
  width:100%!important;
  background:#fff!important;
  box-shadow:none!important;
  transition:border-color var(--im-ease)!important;
}
.bootstrap-tagsinput:focus-within { border-color:var(--im-primary)!important; }
.bootstrap-tagsinput .tag {
  background:var(--im-primary)!important;
  border-radius:var(--im-radius-pill)!important;
  font-size:.75rem!important;
  padding:.2rem .6rem!important;
  color:#fff!important;
}
.notify-gust-txt { font-size:.75rem!important; color:var(--im-muted)!important; margin-top:.3rem; }

/* Confirm button */
.btn-primary#btn_submit, button#btn_submit.btn-primary {
  background:var(--im-text)!important;
  border:none!important;
  border-radius:var(--im-radius-sm)!important;
  padding:.7rem 1.75rem!important;
  font-family:var(--im-font)!important;
  font-size:.875rem!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  color:#fff!important;
  transition:background var(--im-ease), transform var(--im-ease), box-shadow var(--im-ease)!important;
}
.btn-primary#btn_submit:hover, button#btn_submit.btn-primary:hover {
  background:#1e293b!important;
  transform:translateY(-2px)!important;
  box-shadow:0 6px 18px rgba(15,23,42,.2)!important;
}
.btn-primary#btn_submit:disabled {
  background:#cbd5e1!important;
  cursor:not-allowed!important;
  transform:none!important;
}

/* Captcha */
.captcha-sec label { font-size:.82rem!important; color:var(--im-text-body)!important; }
#question { font-weight:700!important; color:var(--im-primary)!important; font-size:.9rem!important; }
#ans { text-align:center; font-weight:700!important; }

/* Checkboxes / Radios */
.form-check-input { border-color:var(--im-border)!important; width:1rem!important; height:1rem!important; }
.form-check-input:checked { background-color:var(--im-primary)!important; border-color:var(--im-primary)!important; }
.form-check-input:focus { box-shadow:0 0 0 3px rgba(37,99,235,.12)!important; }
.form-check-label { font-size:.875rem!important; color:var(--im-text-body)!important; }

/* Payment amount display */
#PAY_details h6, #with_percentage h6, #with_fix h6 {
  font-size:.84rem!important;
  font-weight:500!important;
  color:var(--im-text-body)!important;
  margin-bottom:.4rem!important;
}
#PAY_details h6:last-of-type,#with_percentage h6:last-of-type,#with_fix h6:last-of-type { color:var(--im-primary)!important; font-weight:700!important; }

/* Error text */
.error-txt {
  font-size:.75rem!important;
  color:var(--im-danger)!important;
  font-weight:500!important;
  margin-top:.25rem!important;
  display:block;
}

/* ══════════════════════════════════════════════════════════════════
   10. CONFIRMATION / APPOINTMENT PAGE
══════════════════════════════════════════════════════════════════ */
.user-confirm-sec { padding:2.5rem 1.5rem; }
.user-confirm-sec h3 {
  font-family:var(--im-font)!important;
  font-size:1.4rem!important;
  font-weight:700!important;
  color:var(--im-text)!important;
}
.user-confirm-sec h5 {
  font-size:.9rem!important;
  font-weight:400!important;
  color:var(--im-text-body)!important;
  line-height:1.65!important;
}
.user-confirm-sec p.form-control {
  border:1.5px solid var(--im-border)!important;
  border-radius:var(--im-radius-sm)!important;
  font-size:.82rem!important;
  padding:.65rem .9rem!important;
  background:var(--im-primary-light)!important;
  color:var(--im-text)!important;
  font-weight:500!important;
}

/* "Book another" link */
.text-decoration-underline.text-primary h4,
a.text-primary h4 {
  font-size:.9rem!important;
  font-weight:700!important;
  color:var(--im-primary)!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
  transition:color var(--im-ease);
}
.text-decoration-underline.text-primary h4:hover { color:var(--im-primary-dark)!important; }

/* Calendly link container */
.calendly-link-container {
  border:2px dashed var(--im-border);
  border-radius:var(--im-radius-pill);
  padding:.45rem .9rem;
  background:#fff;
  transition:border-color var(--im-ease), box-shadow var(--im-ease);
  cursor:pointer;
}
.calendly-link-container:hover {
  border-color:var(--im-primary);
  box-shadow:0 4px 14px rgba(37,99,235,.12);
}
.calendly-link { display:flex;align-items:center;gap:.5rem;color:var(--im-text);font-size:.82rem;font-weight:500; }
.link-icon,.cursor-pointer { color:var(--im-primary); }
.calendly-link input.border-0 {
  border:none!important;outline:none!important;
  font-family:var(--im-font)!important;
  font-size:.82rem!important;
  color:var(--im-text)!important;
  background:transparent!important;
  min-width:22ch;
}

/* Calendar add buttons */
.calendar-buttons { display:flex;gap:12px;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap; }
.calendar-btn {
  display:flex;align-items:center;gap:.5rem;
  padding:.65rem 1.1rem;
  border:1.5px dashed var(--im-border);
  border-radius:var(--im-radius-sm);
  background:#fff;
  color:var(--im-text-body);
  font-size:.82rem;font-weight:500;
  min-width:140px;justify-content:center;
  transition:border-color var(--im-ease),color var(--im-ease),box-shadow var(--im-ease),transform var(--im-ease);
  text-decoration:none;
}
.calendar-btn:hover {
  border-color:var(--im-primary);color:var(--im-primary)!important;
  box-shadow:0 4px 14px rgba(37,99,235,.1);transform:translateY(-2px);
}

/* Sign-up OAuth buttons */
.btn.btn-outline-dark.rounded-pill {
  border-width:1.5px!important;
  border-radius:var(--im-radius-pill)!important;
  font-size:.84rem!important;
  font-weight:600!important;
  padding:.55rem 1.25rem!important;
  color:var(--im-text)!important;
  transition:border-color var(--im-ease),box-shadow var(--im-ease),transform var(--im-ease)!important;
}
.btn.btn-outline-dark.rounded-pill:hover {
  border-color:var(--im-primary)!important;
  color:var(--im-primary)!important;
  box-shadow:0 4px 14px rgba(37,99,235,.12)!important;
  transform:translateY(-1px)!important;
}

/* Confirmation section card (grey bg box) */
.confirmation-section {
  background:var(--im-surface-2);
  border-radius:var(--im-radius);
  padding:1.5rem;
  margin-top:1rem;
}
.confirmation-section h5 { font-size:.9rem!important;font-weight:700!important;color:var(--im-text)!important; }

/* ══════════════════════════════════════════════════════════════════
   11. HYBRID / MEETING MODE SELECTOR
══════════════════════════════════════════════════════════════════ */
.hybrid-sec h3 {
  font-family:var(--im-font)!important;
  font-size:1.1rem!important;
  font-weight:700!important;
  color:var(--im-text)!important;
  line-height:1.5!important;
}
.hybrid-sec h3 b { color:var(--im-primary)!important; }

.event-type-box {
  border:1.5px solid var(--im-border)!important;
  border-radius:var(--im-radius)!important;
  padding:1.5rem 1rem!important;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--im-ease-long),background var(--im-ease-long),transform var(--im-ease-long),box-shadow var(--im-ease-long)!important;
  height:100%;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
}
.event-type-box:hover,
.event-type-box.active {
  border-color:var(--im-primary)!important;
  background:var(--im-primary-light)!important;
  transform:translateY(-4px)!important;
  box-shadow:var(--im-shadow-md)!important;
}
.event-type-box .icon-container {
  width:68px;height:68px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--im-shadow-xs);
  margin-bottom:1rem;
  transition:transform var(--im-ease),box-shadow var(--im-ease);
}
.event-type-box:hover .icon-container { transform:scale(1.08);box-shadow:var(--im-shadow); }
.event-type-box h3#main-title {
  font-size:.95rem!important;
  font-weight:700!important;
  color:var(--im-text)!important;
  margin:0!important;
}
.event-type-box .bi-person-fill.text-primary  { color:var(--im-primary)!important; font-size:1.6rem!important; }
.event-type-box .bi-camera-video-fill.text-success { color:var(--im-success)!important; font-size:1.6rem!important; }
.event-type-box .bi-telephone-fill.text-info { color:#0ea5e9!important; font-size:1.6rem!important; }

/* Selection confirmation pill */
#selectconf .d-inline-flex {
  border-radius:var(--im-radius-pill)!important;
  padding:.5rem 1.1rem!important;
  font-size:.82rem!important;
  font-weight:600!important;
  animation:imFadeUp .3s ease;
}

/* ══════════════════════════════════════════════════════════════════
   12. CALENDAR-OFF / CLOSED FORM
══════════════════════════════════════════════════════════════════ */
.user-pro-sec .text-primary {
  font-size:1rem!important;
  font-weight:700!important;
  line-height:1.55!important;
}
.user-form-sec label.form-label { font-size:.82rem!important; font-weight:600!important; color:var(--im-text)!important; }
.user-form-sec .form-control,
.user-form-sec textarea { border-radius:var(--im-radius-sm)!important; }

/* ══════════════════════════════════════════════════════════════════
   13. MODALS
══════════════════════════════════════════════════════════════════ */
.modal-content {
  border:none!important;
  border-radius:var(--im-radius)!important;
  box-shadow:var(--im-shadow-lg)!important;
  overflow:hidden;
}
.modal-header {
  background:var(--im-surface-2);
  border-bottom:1px solid var(--im-border)!important;
  padding:.9rem 1.25rem!important;
}
.modal-title { font-size:.95rem!important;font-weight:700!important;color:var(--im-text)!important; }
.modal-body { padding:1.5rem!important; }
.modal-footer { border-top:1px solid var(--im-border)!important; padding:.9rem 1.25rem!important; background:var(--im-surface-2); }

.modal-body .fa-spinner { color:var(--im-primary)!important; font-size:2.5rem!important; }
.modal-body h6 { font-size:.875rem!important; color:var(--im-text-body)!important; font-weight:500!important; }

.btn-primary.btn-sm {
  background:var(--im-primary)!important;
  border-color:var(--im-primary)!important;
  border-radius:var(--im-radius-sm)!important;
  font-size:.8rem!important;
  font-weight:600!important;
  padding:.45rem 1.1rem!important;
  transition:background var(--im-ease),transform var(--im-ease)!important;
}
.btn-primary.btn-sm:hover { background:var(--im-primary-dark)!important;border-color:var(--im-primary-dark)!important;transform:translateY(-1px)!important; }
.btn-dark.btn-sm { border-radius:var(--im-radius-sm)!important;font-size:.8rem!important;font-weight:600!important; }
.btn-close { opacity:.6!important;transition:opacity var(--im-ease)!important; }
.btn-close:hover { opacity:1!important; }

/* Alert toasts */
.alert-notification-bx {
  position:fixed!important;
  bottom:1.5rem!important;right:1.5rem!important;
  border-radius:var(--im-radius-sm)!important;
  padding:.75rem 1.25rem!important;
  box-shadow:var(--im-shadow-md)!important;
  z-index:10000;
  animation:imFadeUp .3s ease;
}
.alert-notification-bx.bg-primary { background:var(--im-primary)!important; }
.alert-notification-bx.bg-danger  { background:var(--im-danger)!important; }
.alert-notification-bx p { font-size:.82rem!important;font-weight:600!important;color:#fff!important;margin:0!important; }

/* ══════════════════════════════════════════════════════════════════
   14. LANGUAGE / FOOTER NAV BAR
══════════════════════════════════════════════════════════════════ */
.navbar-vertical-footer {
  border-top:1px solid var(--im-border)!important;
  padding:.6rem 1rem!important;
  background:#fff;
}
.navbar-vertical-footer-list { gap:.35rem; }
.btn-ghost-secondary, .btn-icon {
  border-radius:50%!important;
  width:38px!important;height:38px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1.5px solid var(--im-border)!important;
  background:#fff!important;
  color:var(--im-muted)!important;
  transition:background var(--im-ease),color var(--im-ease),border-color var(--im-ease)!important;
}
.btn-ghost-secondary:hover,.btn-icon:hover {
  background:var(--im-primary)!important;
  color:#fff!important;
  border-color:var(--im-primary)!important;
}
.dropdown-menu.navbar-dropdown-menu-borderless {
  border:1px solid var(--im-border)!important;
  border-radius:var(--im-radius-sm)!important;
  box-shadow:var(--im-shadow-md)!important;
  padding:.35rem!important;
}
.dropdown-item {
  border-radius:var(--im-radius-xs)!important;
  font-size:.82rem!important;
  padding:.45rem .75rem!important;
  transition:background var(--im-ease)!important;
}
.dropdown-item:hover { background:var(--im-primary-light)!important; color:var(--im-primary)!important; }
.dropdown-header { font-size:.7rem!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--im-muted)!important;padding:.4rem .75rem .25rem!important; }

/* ══════════════════════════════════════════════════════════════════
   15. hgt-540 LAYOUT  (classic 3-col booking panel)
══════════════════════════════════════════════════════════════════ */
.hgt-540 { min-height:480px; }
.bg-white.shadow.position-relative {
  border-radius:var(--im-radius)!important;
  box-shadow:var(--im-shadow)!important;
  overflow:hidden;
  animation:imFadeUp .45s ease both;
}
/* Coloured top accent on the booking panel */
.bg-white.shadow.position-relative::before {
  content:'';
  display:block;
  height:3px;
  background:linear-gradient(90deg,var(--im-accent) 0%,var(--im-primary) 100%);
}

/* ══════════════════════════════════════════════════════════════════
   16. THANKS / END FORM
══════════════════════════════════════════════════════════════════ */
.user-proo-sec h3,.user-pro-sec h3 {
  font-size:1.1rem!important;
  font-weight:700!important;
  line-height:1.55!important;
}

/* ══════════════════════════════════════════════════════════════════
   17. PRE-MEETING QUESTIONS FORM
══════════════════════════════════════════════════════════════════ */
.hybrid-sec h3.text-primary { font-size:1rem!important;font-weight:700!important; }
.hybrid-sec h6 { font-size:.875rem!important;color:var(--im-muted)!important; }
.card.mx-4.mb-5.mt-3 {
  border:1.5px solid var(--im-border)!important;
  border-radius:var(--im-radius)!important;
  box-shadow:var(--im-shadow-xs)!important;
}
.card.mx-4.mb-5.mt-3 .card-body { padding:1.5rem!important; }

#dynamic-form .form-group { margin-bottom:1rem; }
#dynamic-form .form-label { font-size:.82rem!important;font-weight:600!important;color:var(--im-text)!important; }
#dynamic-form .form-control { border-radius:var(--im-radius-sm)!important;border:1.5px solid var(--im-border)!important;font-size:.875rem!important; }
#dynamic-form .form-control:focus { border-color:var(--im-primary)!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important; }

.btn.btn-primary.px-4 {
  background:var(--im-primary)!important;
  border-color:var(--im-primary)!important;
  border-radius:var(--im-radius-sm)!important;
  font-weight:700!important;
  transition:background var(--im-ease),transform var(--im-ease)!important;
}
.btn.btn-primary.px-4:hover { background:var(--im-primary-dark)!important;border-color:var(--im-primary-dark)!important;transform:translateY(-1px)!important; }

/* ══════════════════════════════════════════════════════════════════
   18. GLOBAL ANIMATIONS
══════════════════════════════════════════════════════════════════ */
@keyframes imFadeUp {
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes imPulse {
  0%,100%{opacity:1}50%{opacity:.5}
}
.disabled-sec {
  pointer-events:none!important;
  opacity:.45!important;
  user-select:none!important;
}

/* ══════════════════════════════════════════════════════════════════
   19. BOOTSTRAP OVERRIDES (global)
══════════════════════════════════════════════════════════════════ */
.btn { font-family:var(--im-font)!important; }
.form-control, .form-select, .form-check-input {
  font-family:var(--im-font)!important;
}
.badge.bg-soft-secondary {
  background:var(--im-surface-2)!important;
  color:var(--im-muted)!important;
  border:1px solid var(--im-border)!important;
  border-radius:var(--im-radius-pill)!important;
  font-size:.8rem!important;
  font-weight:500!important;
  padding:.45rem 1rem!important;
}
/* Override bootstrap primary */
.text-primary { color:var(--im-primary)!important; }
.border-primary { border-color:var(--im-primary)!important; }
.bg-primary { background-color:var(--im-primary)!important; }

/* Select2 global */
.select2-container .select2-selection--single {
  font-family:var(--im-font)!important;
  font-size:.875rem!important;
  border-color:var(--im-border)!important;
  border-radius:var(--im-radius-sm)!important;
}

/* ══════════════════════════════════════════════════════════════════
   20. RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════════════ */

/* ── ≥1400px ──── */
@media(min-width:1400px){
  .h-200px{height:250px!important;}
  .profile-name{font-size:1.9rem!important;}
  .booking-card{padding:1.5rem 1.5rem 1.25rem;}
}

/* ── <1200px ──── */
@media(max-width:1199.98px){
  ul.time-slot{grid-template-columns:repeat(2,1fr);}
}

/* ── <992px ───── */
@media(max-width:991.98px){
  .h-200px{height:170px!important;}
  .profile-header{padding:0 1.25rem 1rem!important;}
  .profile-image{margin-top:-44px!important;}
  .profile-image img{width:88px!important;height:88px!important;}
  .profile-name{font-size:1.45rem!important;}
  .hgt-540{min-height:auto;}
  .col-md-4.border-end{border-right:none!important;border-bottom:1px solid var(--im-border);}
  .booking-card{padding:1.1rem;}
  .cal-sec{padding-bottom:1rem;}
  .consultant-name{font-size:1.05rem!important;}
  .hybrid-sec{padding:1.5rem!important;}
}

/* ── <768px ───── */
@media(max-width:767.98px){
  .h-200px{height:145px!important;}
  .profile-image img{width:78px!important;height:78px!important;}
  .profile-name{font-size:1.25rem!important;}
  .profile-header{padding:0 1rem 1rem!important;}
  .top-section{justify-content:flex-start;margin-top:.5rem;}
  .social-icons{gap:.2rem;}
  .social-icons a{width:30px;height:30px;font-size:.8rem;}
  .review{justify-content:flex-start;margin-left:0!important;float:none!important;}
  .col-md-4{flex:0 0 50%;max-width:50%;}
  ul.time-slot{grid-template-columns:repeat(2,1fr);}
  .user-confirm-sec{padding:1.5rem 1rem;}
  .navbar-vertical-footer{width:auto!important;}
  .hybrid-sec{padding:1.25rem!important;}
  .event-type-box{padding:1rem .75rem!important;}
  .top-txt{font-size:.78rem;padding:.35rem .75rem;}
}

/* ── <576px ───── */
@media(max-width:575.98px){
  .h-200px{height:115px!important;}
  .profile-image img{width:70px!important;height:70px!important;}
  .profile-image{margin-top:-36px!important;}
  .profile-name{font-size:1.1rem!important;}
  .top-section{flex-direction:column;align-items:flex-start;gap:.4rem;}
  .social-icons{gap:.15rem;}
  .social-icons a{width:28px;height:28px;font-size:.74rem;}
  .profile-info .row{flex-direction:column;}
  .profile-info .col-md-6:last-child{margin-top:.6rem;}
  .review{text-align:left!important;float:none!important;margin-left:0!important;}
  .col-md-4{flex:0 0 100%;max-width:100%;}
  .booking-card{padding:.9rem;}
  .consultant-name{font-size:.95rem!important;}
  .btn-book-now{font-size:.82rem;padding:.65rem 1rem;}
  .price-amount{font-size:1.35rem;}
  ul.time-slot{grid-template-columns:repeat(2,1fr);gap:6px;}
  .time-slot-item{font-size:.72rem;padding:.45rem .3rem;}
  .book-appt{font-size:.84rem;padding:.7rem 1rem;}
  .hybrid-sec{padding:1rem!important;}
  .event-type-box .icon-container{width:54px;height:54px;}
  .event-type-box h3#main-title{font-size:.85rem!important;}
  .user-pro-sec h3{font-size:.95rem!important;}
  .top-txt{font-size:.74rem;}
  .confirmation-section{padding:1rem;}
  .calendar-buttons{gap:8px;}
  .calendar-btn{min-width:120px;font-size:.76rem;padding:.55rem .8rem;}
  .btn.btn-outline-dark.rounded-pill{font-size:.78rem!important;padding:.5rem 1rem!important;}
  .modal-content{border-radius:var(--im-radius-sm)!important;}
}

/* ── <360px ───── */
@media(max-width:359.98px){
  .h-200px{height:90px!important;}
  .profile-name{font-size:.95rem!important;}
  .social-icons{display:none;}
  ul.time-slot{grid-template-columns:1fr 1fr;}
  .time-slot-item{font-size:.68rem;}
}

/* ══════════════════════════════════════════════════════════════════
   21. PRINT UTILITIES (minimal)
══════════════════════════════════════════════════════════════════ */
@media print{
  .navbar-vertical-footer,#page-loader,.alert-notification-bx{display:none!important;}
  body{background:#fff!important;}
  .bg-white.shadow,.new-page-theme-sec .card{box-shadow:none!important;border:1px solid #e2e8f0!important;}
}