:root{
  --balaji-red: #f12436;
  --balaji-green: #156239;
  --balaji-accent: #0ea5a4;
  --balaji-dark:   #0b1720;
  --balaji-soft:   #f6f7f9;
  --bh-bg: rgba(255,255,255,0.98);
  --bh-max-width: 1200px;
  --bh-gap: 1rem;
  --bs-accordion-active-bg: #0ea5a4;
  --swiper-theme-color: #0ea5a4;
  --font-family-poppins: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial;
  /* Theme accents for button variants */
  --bh-primary: #0ea5a4;       /* teal accent */
  --bh-primary-2: #0a8c8b;     /* slightly darker teal for gradient */
  --bh-secondary: var(--balaji-red);   /* brand red */
  --bh-secondary-2: #c81e30;   /* darker red for gradient */
}

*,*::before,*::after{box-sizing:border-box; padding:0;margin:0}
body{font-family:var(--font-family-poppins);color:var(--balaji-dark);background:linear-gradient(180deg,#fff 0,#f8fafc 100%);}
.bh-appt-container{max-width:var(--bh-max-width);margin:3rem auto;padding:1.5rem}
.bh-appt-container h2{font-size:1.8rem;color:var(--balaji-red);margin:0 0 .25rem}
.bh-sub{color:#334155;margin-bottom:1rem}

.bh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.bh-card{background:linear-gradient(180deg,var(--bh-bg),#fff);border-radius:14px;padding:1rem;display:flex;align-items:flex-start;gap:1rem;box-shadow:0 8px 24px rgba(11,23,32,0.08);transform:translateY(0);transition:transform .3s ease, box-shadow .3s ease}
.bh-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,23,32,0.14)}
.bh-card-media img{width:96px;height:96px;object-fit:cover;border-radius:10px}
.bh-card-body{flex:1}
.bh-card h3{margin:0;font-size:1.05rem;color:var(--balaji-dark)}
.bh-title{font-size:.9rem;color:var(--balaji-green);margin:.25rem 0}
.bh-bio{color:#475569;margin:6px 0 12px;font-size:.9rem}
.bh-btn{background:transparent;border:2px solid var(--balaji-accent);padding:.55rem .8rem;border-radius:8px;color:var(--balaji-accent);cursor:pointer;transition:all .18s}
.bh-btn:hover{background:var(--balaji-accent);color:#fff;transform:translateY(-2px)}
.bh-book-btn{font-weight:700}

/* overlay + spinner */
.bh-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,17,20,0.5);z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s ease}
.bh-overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}
.bh-spinner-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem;background:rgba(255,255,255,0.95);padding:24px;border-radius:12px}
.bh-spinner{width:56px;height:56px;border-radius:50%;border:6px solid #f3f4f6;border-top-color:var(--balaji-accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bh-overlay-text{font-weight:600;color:var(--balaji-dark)}

/* Appointment page */
.bh-appt-page{max-width:1200px;margin:2.5rem auto;padding:1rem}
.bh-bg-card{display:flex;gap:1.25rem;background:var(--bh-bg);border-radius:12px;padding:1rem;box-shadow:0 8px 24px rgba(11,23,32,0.06)}
.bh-left{flex:2;padding:1rem}
/* .bh-right{width:360px} */

.bh-calendar-wrap{background:linear-gradient(180deg,#fff,#f8f9fb);padding:1rem;border-radius:10px;border:1px solid rgba(15,23,42,0.06)}
.bh-cal-header{display:flex;align-items:center;justify-content:space-between}
.bh-cal-header h3{margin:0;font-size:1.05rem}
.bh-cal-controls button{background:transparent;border:0;font-size:1.4rem;color:var(--balaji-accent);padding:.25rem;cursor:pointer}
.bh-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.bh-calendar .day{background:#fff;padding:8px;border-radius:8px;text-align:center;border:1px solid rgba(9,10,10,0.02);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.bh-calendar .day:hover{transform:translateY(-6px);box-shadow:0 8px 30px rgba(9,12,20,0.06)}
.bh-calendar .day.disabled{opacity:.28;cursor:not-allowed;transform:none}
.bh-calendar .day.today{outline:2px solid var(--balaji-accent)}
.bh-calendar .day.selected{background:linear-gradient(90deg,var(--balaji-accent),var(--balaji-green));color:#fff}

.bh-slots-wrap{margin-top:1rem}
.bh-slots-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.bh-selected-date{color:#475569;font-weight:600}

.bh-vertical-tabs{display:flex;background:transparent}
.bh-tabs{display:flex;flex-direction:column;gap:6px;padding-right:10px}
.bh-tab{background:#fff;border-radius:8px;padding:.6rem .9rem;border:1px solid rgba(11,23,32,0.06);cursor:pointer;color:var(--balaji-dark)}
.bh-tab.active{background:linear-gradient(180deg,#0ea5a4,#0ea5a4);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(14,165,164,0.12)}
.bh-tabs-content{flex:1;background:#fff;padding:12px;border-radius:8px;border:1px solid rgba(11,23,32,0.06)}
.bh-slot-group[aria-hidden="true"]{display:none}
.bh-slot-group{display:flex;flex-wrap:wrap;gap:8px}
.bh-slot{padding:8px 10px;border-radius:8px;background:#f1f5f9;border:1px solid rgba(11,23,32,0.04);cursor:pointer;min-width:88px;text-align:center}
.bh-slot.available{background:#fff;border:1px solid rgba(14,165,164,0.12)}
.bh-slot.taken{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.bh-slot.selected{background:linear-gradient(90deg,var(--balaji-accent),var(--balaji-green));color:#fff;border-color:transparent;box-shadow:0 10px 30px rgba(14,165,164,0.12)}

.bh-booking-panel{background:#fff;padding:1rem;border-radius:10px;border:1px solid rgba(11,23,32,0.04)}
.bh-booking-panel .bh-doc{font-weight:700; color:#f12436 !important; margin-bottom:.5rem}
.bh-field{display:flex;flex-direction:column;margin-bottom:.7rem}
.bh-field label{font-size:.85rem;color:#475569;margin-bottom:.3rem}
.bh-field input{padding:.6rem;border-radius:8px;border:1px solid rgba(11,23,32,0.06)}
.bh-phone-group{display:flex;align-items:center}
.bh-phone-group .bh-prefix{padding:.6rem .7rem;border:1px solid rgba(11,23,32,0.06);border-right:0;border-radius:8px 0 0 8px;background:#f8fafc;color:#0b1720;font-weight:600}
.bh-phone-group input[name="phone"]{border-radius:0 8px 8px 0;border-left:0}
.bh-actions{text-align:center;margin-top:.5rem}
.bh-primary{background:var(--balaji-accent);color:#fff;border:0;padding:.6rem .85rem;border-radius:8px;font-weight:700}
.bh-outline{border:1px solid rgba(11,23,32,0.06);background:#fff;padding:.5rem .8rem;border-radius:8px}
.bh-note{margin-top:.9rem;color:#475569;font-size:.85rem}

.bh-success{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(14,21,26,0.4);z-index:9999;opacity:0;pointer-events:none;transition:opacity .12s ease}
.bh-success[aria-hidden="false"]{opacity:1;pointer-events:auto}
.bh-success-card{background:linear-gradient(180deg,#fff,#f7fffb);padding:2rem;border-radius:12px;text-align:center;box-shadow:0 20px 50px rgba(11,23,32,0.14)}
.bh-confetti{height:8px;background:linear-gradient(90deg,#f12436,#0ea5a4,#156239);border-radius:8px;margin-bottom:1rem}

/* small screens */
/* @media (max-width:980px){
    .bh-bg-card{flex-direction:column}
    .bh-right{width:100%;}
} */

/* Dashboard styles */
.bh-dashboard{max-width:1100px;margin:1rem auto;padding:.65rem 0.9rem;background:linear-gradient(180deg,#fff,#fbfeff);border-radius:10px;box-shadow:0 8px 30px rgba(11,23,32,0.06)}
.bh-dashboard h2{color:var(--balaji-red);margin:0 0 .75rem}
.bh-dashboard .bh-filter-row{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;align-items:end}
.bh-dashboard .bh-filter-row.secondary{align-items:center}
.bh-dashboard .bh-filter-item{display:flex;flex-direction:column;min-width:160px}
.bh-dashboard .bh-filter-item label{font-size:.85rem;color:#374151;margin-bottom:6px}
.bh-dashboard .bh-filter-item input[type="search"],
.bh-dashboard .bh-filter-item input[type="date"],
.bh-dashboard .bh-filter-item select{padding:.45rem .6rem;border-radius:8px;border:1px solid rgba(11,23,32,0.08);background:#fff;box-shadow:0 2px 8px rgba(2,6,23,0.03)}
.bh-dashboard .bh-filter-item input[type="search"]::placeholder{color:#94a3b8}
.bh-dashboard .bh-filter-item input[type="search"]:focus,
.bh-dashboard .bh-filter-item input[type="date"]:focus,
.bh-dashboard .bh-filter-item select:focus{outline:none;border-color:var(--balaji-accent);box-shadow:0 6px 18px rgba(14,165,164,0.08)}
.bh-dashboard .bh-filter-item .bh-controls{display:flex; gap:8px; align-items:center;}
.bh-dashboard .bh-filter-item.actions .bh-controls{justify-content:flex-end;}
.bh-dashboard .bh-filter-item.quick-range .bh-range-controls{display:flex;gap:6px}
.bh-btn.small{padding:.35rem .5rem;font-size:.82rem;border-radius:8px}
.thin-select{padding:.4rem .55rem;border-radius:8px;border:1px solid rgba(11,23,32,0.06);background:#fff}
.bh-dashboard .bh-filter-item.actions{display:flex;align-items:flex-end;grid-column: span 2;justify-content:flex-start}
.bh-dashboard .bh-filter-item.actions .small{margin-right:8px}

/* grid layout column spans for common items */
.bh-dashboard .bh-filter-item.search{grid-column: span 4}
.bh-dashboard .bh-filter-item.doctor{grid-column: span 2}
.bh-dashboard .bh-filter-item.datefrom{grid-column: span 2}
.bh-dashboard .bh-filter-item.dateto{grid-column: span 2}
.bh-dashboard .bh-filter-item.quick-range{grid-column: span 1}
.bh-dashboard .bh-filter-row.secondary .bh-filter-item.quick-range{grid-column: span 8}
.bh-dashboard .bh-filter-row.secondary .bh-filter-item.actions-secondary{grid-column: span 4; display:flex; align-items:center; justify-content:flex-end !important;}
.bh-dashboard .bh-filter-row.secondary .bh-filter-item.actions-secondary .bh-controls{display:flex;justify-content:flex-end !important;}

.bh-dashboard .bh-controls{display:flex;gap:.5rem;align-items:center;}
.bh-stats-row{display:flex;gap:1rem;margin:1rem 0}
.bh-stat{padding:.6rem .8rem;border-radius:8px;background:#fff;border:1px solid rgba(11,23,32,0.04);flex:1;text-align:center}
.bh-stat-value{font-weight:800;font-size:1.25rem;color:var(--balaji-accent)}
.bh-table-wrap{border-radius:8px; border:1px solid rgba(11,23,32,0.04); background:#fff;padding-bottom:1rem;margin-bottom:1.6rem; box-shadow:0 8px 24px rgba(11,23,32,0.06)}
.bh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bh-dashboard-controls{background:linear-gradient(180deg,#fff,#f9fbfd);border:1px solid rgba(11,23,32,0.06);border-radius:10px;box-shadow:0 8px 24px rgba(11,23,32,0.06);padding:12px}
.bh-table{width:100%;border-collapse:collapse}
.bh-table thead th{background:linear-gradient(90deg,#fbfdff,#f8fafc);text-align:left;padding:.8rem;border-bottom:1px solid rgba(11,23,32,0.06);color:#233240;font-weight:700}

/* Make S.No column narrower for clarity */
.bh-table thead th:first-child{width:68px;text-align:center}
.bh-table td:first-child{width:68px;text-align:center;vertical-align:middle}
.bh-table td{padding:.55rem .65rem;border-bottom:1px solid rgba(11,23,32,0.04)}
.bh-loading{text-align:center;color:#64748b;padding:1rem}
.bh-pagination{display:flex; gap:.8rem; align-items:center; justify-content:center; margin:1rem 0 0; padding-top:0; clear:both; position:static; width:100%; box-sizing:border-box}
.bh-dashboard .bh-table-wrap + .bh-pagination{margin-top:16px}
.bh-dashboard .pagination{float:none !important; display:flex; justify-content:center; align-items:center}
.bh-dashboard .page-item{float:none !important}
.bh-dashboard .page-link{position:static}
.bh-pagination nav{width:100%; display:flex; justify-content:center}
.bh-pagination .pagination{display:flex; justify-content:center; align-items:center}
.bh-pagination .page-item{display:flex}
.bh-pagination #bh-page-info{flex:0 0 auto; min-width:140px}
.bh-pagination{flex-wrap:nowrap}
.bh-pagination .bh-btn{min-width:86px}
.bh-pagination #bh-page-info{font-weight:700;color:#475569;min-width:160px;text-align:center;flex:0 0 220px}

/* Make pagination stick to center below table and never overlap on small screens */
@media (max-width:560px){
  .bh-pagination{flex-direction:row;justify-content:center;padding:8px 12px;gap:8px}
  .bh-pagination #bh-page-info{flex:1;order:2;text-align:center}
  .bh-pagination #bh-prev-page{order:1}
  .bh-pagination #bh-next-page{order:3}
  .bh-pagination .bh-btn{min-width:64px;padding:.45rem .6rem}
}
  .bh-dashboard .bh-filter-row.secondary .bh-filter-item.quick-range{grid-column: span 6}
  .bh-dashboard .bh-filter-row.secondary .bh-filter-item.actions-secondary{grid-column: span 6; justify-content:flex-end}

/* Visually disable prev/next when not available */
.bh-pagination .disabled{opacity:.46;cursor:not-allowed;pointer-events:none}
.bh-pagination .bh-btn{padding:.5rem .9rem}
.bh-pagination #bh-page-info{font-weight:700;color:#475569}

.bh-table tr:hover td{background:linear-gradient(90deg,rgba(14,165,164,0.03),rgba(14,165,164,0.02));}
.bh-table td{transition:background .12s ease}

/* Doctor-wise row tinting */
.bh-table tr.bh-doc-1 td{background:rgba(14,165,164,0.06)}
.bh-table tr.bh-doc-2 td{background:rgba(241,36,54,0.06)}
.bh-table tr.bh-doc-1:hover td{background:rgba(14,165,164,0.12)}
.bh-table tr.bh-doc-2:hover td{background:rgba(241,36,54,0.12)}

/* quick range active style */
.bh-range-controls [data-range].active{background:var(--balaji-accent)!important;border-color:var(--balaji-accent)!important;color:#fff !important}

/* Pagination .page-item disabled visual for bootstrap */
.bh-pagination .page-item.disabled .page-link{opacity:.55;cursor:not-allowed}

/* small UX improvement - wrap header on small screens */
@media (max-width:980px){
  .bh-dashboard .bh-filter-row{grid-template-columns:repeat(6,1fr)}
  .bh-dashboard .bh-filter-item.search{grid-column: span 6}
  .bh-dashboard .bh-filter-item.doctor{grid-column: span 3}
  .bh-dashboard .bh-filter-item.datefrom{grid-column: span 3}
  .bh-dashboard .bh-filter-item.dateto{grid-column: span 3}
  .bh-dashboard .bh-filter-item.quick-range{grid-column: span 3}
  .bh-dashboard .bh-filter-item.actions{grid-column: span 6; justify-content:flex-start}
}

@media (max-width:820px){
  .bh-dashboard .bh-filter-item{min-width:140px;flex:1}
  .bh-stats-row{flex-direction:column}
  /* Keep table structure. Enable horizontal scroll and prevent wrapping for clarity. */
  .bh-table{min-width:900px}
  .bh-table th, .bh-table td{white-space:nowrap}
  /* Optional scroll hint */
  .bh-table-wrap::after{
    content:"Swipe to view more →";
    display:block;
    text-align:right;
    font-size:.75rem;
    color:#64748b;
    padding:4px 2px 0;
  }
}

/* Beautiful pagination & buttons (scoped to dashboard) */
.bh-dashboard .bh-pagination nav{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid rgba(11,23,32,0.08);
  border-radius:999px;
  padding:6px 10px;
  box-shadow:0 8px 24px rgba(11,23,32,0.06);
  max-width:fit-content;
}
.bh-dashboard .bh-pagination ul.pagination{
  gap:8px;
  margin:0;
  padding:0 4px;
}
.bh-dashboard .bh-pagination .page-item{display:flex}
.bh-dashboard .bh-pagination .page-link{
  border:none;
  background:linear-gradient(180deg,var(--bh-secondary),var(--bh-secondary-2));
  color:#fff;
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(241,36,54,0.28);
  transition:transform .08s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
  line-height:1.1;
}
.bh-dashboard .bh-pagination .page-link:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(241,36,54,0.34);
  filter:saturate(1.06);
}
.bh-dashboard .bh-pagination .page-link:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(241,36,54,0.26);
}
.bh-dashboard .bh-pagination .page-item.disabled .page-link{
  background:#fee2e2;
  color:#64748b;
  box-shadow:none;
  cursor:not-allowed;
}
.bh-dashboard .bh-pagination #bh-page-info.page-link{
  background:#f8fafc;
  color:#0f172a;
  border:1px solid #e2e8f0;
  box-shadow:none;
  min-width:160px;
}
.bh-dashboard .bh-pagination #bh-prev-page.page-link::before{content:"\2190";margin-right:6px}
.bh-dashboard .bh-pagination #bh-next-page.page-link::after{content:"\2192";margin-left:6px}

/* Dashboard button polish */
.bh-dashboard .bh-btn{
  background:linear-gradient(180deg,var(--bh-primary),var(--bh-primary-2));
  color:#fff;
  border:0;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(14,165,164,0.22);
  font-weight:700;
}
.bh-dashboard .bh-btn:hover{
  filter:saturate(1.06);
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(14,165,164,0.28);
}
.bh-dashboard .bh-btn:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(14,165,164,0.22);
}
.bh-dashboard .bh-btn.small{padding:.45rem .7rem;border-radius:10px}
.bh-dashboard #bh-filter-run{padding:.8rem 3.5rem .8rem 3.5rem}
.bh-dashboard .bh-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}

/* Button variants: primary & secondary */
.bh-dashboard .bh-btn.primary,
.bh-dashboard #bh-filter-run,
.bh-dashboard #bh-export-csv{
  background:linear-gradient(180deg,var(--bh-primary),var(--bh-primary-2));
  box-shadow:0 6px 18px rgba(14,165,164,0.22);
}
.bh-dashboard .bh-btn.primary:hover,
.bh-dashboard #bh-filter-run:hover,
.bh-dashboard #bh-export-csv:hover{
  box-shadow:0 10px 26px rgba(14,165,164,0.28);
}
.bh-dashboard .bh-btn.secondary,
.bh-dashboard #bh-filter-reset{
  background:linear-gradient(180deg,var(--bh-secondary),var(--bh-secondary-2));
  box-shadow:0 6px 18px rgba(241,36,54,0.22);
}
.bh-dashboard .bh-btn.secondary:hover,
.bh-dashboard #bh-filter-reset:hover{
  box-shadow:0 10px 26px rgba(241,36,54,0.28);
}

/* Pagination: assign variant colors to prev/next */
.bh-dashboard .bh-pagination #bh-prev-page.page-link{
  background:linear-gradient(180deg,var(--bh-secondary),var(--bh-secondary-2));
  box-shadow:0 6px 18px rgba(241,36,54,0.28);
}
.bh-dashboard .bh-pagination #bh-prev-page.page-link:hover{
  box-shadow:0 10px 26px rgba(241,36,54,0.34);
}
.bh-dashboard .bh-pagination #bh-next-page.page-link{
  background:linear-gradient(180deg,var(--bh-primary),var(--bh-primary-2));
  box-shadow:0 6px 18px rgba(14,165,164,0.28);
}
.bh-dashboard .bh-pagination #bh-next-page.page-link:hover{
  box-shadow:0 10px 26px rgba(14,165,164,0.34);
}