/* =========================================================
   SUNRISE HOSPITAL — style-additions.css
   Add @import or <link> AFTER style.css
   Fixes all blade v2 class-name aliases + mobile/footer gaps
   ========================================================= */

/* ─── TOP HEADER (blade uses .th-inner / .th-left / .th-right / .th-social) ─── */
.top-header .th-inner  { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.th-left               { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.th-left a             { color:rgba(255,255,255,.8); display:flex; align-items:center; gap:6px; }
.th-left a:hover       { color:#fff; }
.th-left i             { color:var(--accent2); font-size:.85rem; }
.th-right              { display:flex; align-items:center; gap:14px; }
.th-social             { display:flex; gap:6px; }
.th-social a           { width:27px;height:27px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:rgba(255,255,255,.8); }
.th-social a:hover     { background:var(--secondary);color:#fff; }

/* ─── MAIN HEADER (blade uses .mh-inner / .hdr-phone / .hdr-phone-icon) ─── */
.mh-inner              { display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px; }
.hdr-phone             { display:flex;align-items:center;gap:9px; }
.hdr-phone-icon        { width:40px;height:40px;background:var(--light2);border-radius:50%;display:flex;align-items:center;justify-content:center; }
.hdr-phone-icon i      { color:var(--primary);font-size:.95rem; }

/* ─── MOBILE HEADER (blade uses .mob-hdr-inner / .mob-menu-btn / .mob-enq-btn / .mob-logo) ─── */
.mob-hdr-inner         { display:flex;align-items:center;justify-content:space-between;height:62px;gap:10px; }
.mob-menu-btn          { width:42px;height:42px;background:var(--light);border-radius:10px;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;cursor:pointer; }
.mob-menu-btn span     { width:20px;height:2px;background:var(--primary);border-radius:2px;display:block;transition:var(--transition); }
.mob-enq-btn           { display:flex;align-items:center;gap:7px;background:var(--accent);color:#fff;padding:9px 18px;border-radius:50px;font-size:.8rem;font-weight:700;border:none;flex-shrink:0;white-space:nowrap;box-shadow:0 4px 14px rgba(232,40,43,.3);cursor:pointer; }
.mob-logo              { margin:0 auto 0 12px; }

/* ─── MOBILE SIDEBAR (blade uses .sb-backdrop / .sb-head / .sb-close / .sb-nav / .sb-book-btn / .sb-contact / .sb-divider) ─── */
.sb-backdrop           { position:fixed;inset:0;background:rgba(2,15,40,.6);z-index:1100;opacity:0;visibility:hidden;transition:var(--transition);backdrop-filter:blur(3px); }
.sb-backdrop.active    { opacity:1;visibility:visible; }
.sb-head               { background:var(--primary);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.1); }
.sb-close              { width:34px;height:34px;background:rgba(255,255,255,.12);border:none;border-radius:50%;color:rgba(255,255,255,.9);font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.sb-close:hover        { background:rgba(255,255,255,.22);color:#fff; }
.sb-nav                { padding:12px 0;flex:1; }
.sb-nav a, .sb-nav button { display:flex;align-items:center;gap:13px;width:100%;padding:13px 24px;color:rgba(255,255,255,.78);font-size:.9rem;font-weight:500;background:none;border:none;text-align:left;border-left:3px solid transparent;transition:var(--transition);font-family:var(--font-b);cursor:pointer; }
.sb-nav a:hover, .sb-nav button:hover { color:#fff;background:rgba(255,255,255,.07);border-left-color:var(--accent2); }
.sb-nav a.active, .sb-nav button.active { color:#fff;background:rgba(255,255,255,.1);border-left-color:var(--accent2); }
.sb-nav i              { width:20px;text-align:center;color:var(--accent2);font-size:.9rem; }
.sb-book-btn           { margin:10px 20px 6px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;border:none;border-radius:50px;padding:13px 20px;font-size:.88rem;font-weight:700;width:calc(100% - 40px);box-shadow:0 4px 16px rgba(232,40,43,.35);cursor:pointer; }
.sb-contact            { padding:18px 22px;border-top:1px solid rgba(255,255,255,.1);margin-top:8px; }
.sb-contact p          { font-size:.72rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:12px; }
.sb-contact a          { display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.8);font-size:.85rem;margin-bottom:8px; }
.sb-contact a:hover    { color:#fff; }
.sb-contact i          { color:var(--accent2);width:16px; }
.sb-divider            { height:1px;background:rgba(255,255,255,.08);margin:10px 0; }

/* ─── FOOTER QUICK SIDEBAR (blade uses .fqs-backdrop / .fqs-head / .fqs-close-btn / .fqs-sec / .fqs-footer) ─── */
.fqs-backdrop               { position:fixed;inset:0;background:rgba(2,15,40,.6);z-index:1100;opacity:0;visibility:hidden;transition:var(--transition);backdrop-filter:blur(3px); }
.fqs-backdrop.active        { opacity:1;visibility:visible; }
.fqs-head                   { background:linear-gradient(135deg,var(--primary),var(--secondary));padding:22px 20px;display:flex;align-items:center;justify-content:space-between; }
.fqs-head h3                { font-family:var(--font-h);font-size:1.3rem;color:#fff;display:flex;align-items:center;gap:10px; }
.fqs-close-btn              { background:rgba(255,255,255,.2);border:none;width:34px;height:34px;border-radius:50%;color:#fff;font-size:.95rem;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.fqs-close-btn:hover        { background:rgba(255,255,255,.3); }
.fqs-sec                    { padding:16px 20px;border-bottom:1px solid var(--border); }
.fqs-sec h4                 { font-size:.72rem;text-transform:uppercase;letter-spacing:2px;color:var(--secondary);font-weight:800;margin-bottom:10px; }
.fqs-sec a                  { display:flex;align-items:center;gap:11px;padding:9px 0;color:var(--text);font-size:.88rem;transition:var(--transition); }
.fqs-sec a:hover            { color:var(--primary);padding-left:4px; }
.fqs-sec i                  { color:var(--secondary);width:18px;font-size:.88rem; }
.fqs-footer                 { padding:20px; }
.fqs-footer .btn            { width:100%;margin-bottom:10px; }
.fqs-emergency              { text-align:center;padding:14px;background:var(--light);border-radius:var(--radius); }
.fqs-emergency p            { font-size:.78rem;color:var(--grey);margin-bottom:6px; }
.fqs-emergency a            { font-size:1.1rem;font-weight:800;color:var(--accent);display:flex;align-items:center;justify-content:center;gap:8px; }

/* ─── APPOINTMENT MODAL (blade uses .appt-backdrop / .appt-close / .appt-modal-head / .appt-modal-icon / .form-row-2 / .form-grp / .f-ctrl / .req / .appt-secure) ─── */
.appt-backdrop              { position:fixed;inset:0;background:rgba(2,15,40,.65);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px); }
.appt-backdrop.open         { display:flex; }
.appt-modal                 { background:#fff;border-radius:22px;padding:40px;max-width:520px;width:100%;position:relative;animation:modalIn .3s ease;max-height:90vh;overflow-y:auto; }
.appt-close                 { position:absolute;top:16px;right:16px;width:34px;height:34px;background:var(--light);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--grey);font-size:.95rem;cursor:pointer; }
.appt-close:hover           { background:var(--border);color:var(--dark); }
.appt-modal-head            { display:flex;align-items:center;gap:12px;margin-bottom:22px; }
.appt-modal-head h3         { font-family:var(--font-h);font-size:1.5rem;color:var(--primary); }
.appt-modal-head p          { font-size:.82rem;color:var(--grey); }
.appt-modal-icon            { width:48px;height:48px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.appt-modal-icon i          { color:#fff;font-size:1.3rem; }
.form-row-2                 { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.form-grp                   { margin-bottom:14px; }
.form-grp label             { display:block;font-size:.8rem;font-weight:700;color:var(--dark);margin-bottom:6px; }
.req                        { color:var(--accent); }
.f-ctrl                     { width:100%;padding:12px 15px;border:2px solid var(--border);border-radius:var(--radius);font-size:.88rem;color:var(--dark);background:var(--light);transition:var(--transition);outline:none;font-family:var(--font-b); }
.f-ctrl:focus               { border-color:var(--primary);background:#fff; }
.f-ctrl::placeholder        { color:var(--grey-light); }
textarea.f-ctrl             { resize:vertical;min-height:100px; }
.appt-secure                { text-align:center;font-size:.74rem;color:var(--grey);margin-top:12px; }
.alert-success              { background:#d4edda;color:#155724;border:1px solid #c3e6cb;padding:14px;border-radius:8px;margin-bottom:18px;font-size:.86rem; }

/* ─── HERO (blade uses .hero-sec / .hero-bg / .hero-stats) ─── */
.hero-sec                   { background:linear-gradient(118deg,var(--primary-dark) 0%,#0A3D7C 50%,#0B6BA8 100%);min-height:88vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:80px 0; }
.hero-bg                    { position:absolute;inset:0;background-image:radial-gradient(circle at 20% 80%,rgba(26,143,209,.15) 0%,transparent 40%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.04) 0%,transparent 40%); }
.hero-stats                 { display:flex;gap:36px;margin-top:52px;padding-top:32px;border-top:1px solid rgba(255,255,255,.15);flex-wrap:wrap; }

/* ─── QUICK ACTION BAR (blade uses .qa-bar) ─── */
.qa-bar                     { background:var(--secondary); }

/* ─── SECTION HEADER (blade uses .sec-head) ─── */
.sec-head                   { text-align:center;margin-bottom:50px; }
.sec-head .section-sub      { margin:14px auto 0; }

/* ─── FIND DOCTOR STRIP (blade uses .fd-strip) ─── */
.fd-strip                   { background:var(--primary);padding:50px 0; }

/* ─── PACKAGES SECTION (blade uses .pkg-sec) ─── */
.pkg-sec                    { background:linear-gradient(135deg,var(--primary-dark),#0A3D7C); }

/* ─── TESTIMONIALS (blade uses .testi-grid — matches CSS) — already defined ─── */

/* ─── DOCTOR FILTER BAR ─── */
.dept-filter-bar            { background:var(--light);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:40px;display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.filter-label               { font-weight:700;color:var(--primary);font-size:.88rem;flex-shrink:0; }
.dept-filter-btn            { padding:8px 20px;border-radius:50px;font-size:.82rem;font-weight:600;border:2px solid var(--border);background:#fff;cursor:pointer;transition:all .2s;color:var(--dark);font-family:var(--font-b);white-space:nowrap; }
.dept-filter-btn:hover      { background:var(--primary);color:#fff;border-color:var(--primary); }
.dept-filter-btn.active     { background:var(--primary);color:#fff;border-color:var(--primary); }

/* ─── FOOTER (blade uses .f-col / .f-brand / .f-social / .f-links / .f-contact / .f-bottom / .f-link-btn) ─── */
.f-col                      { }
.f-brand p                  { font-size:.86rem;line-height:1.75;margin:16px 0 22px;color:rgba(255,255,255,.7); }
.f-social                   { display:flex;gap:8px; }
.f-social a                 { width:36px;height:36px;background:rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;transition:var(--transition);color:rgba(255,255,255,.7); }
.f-social a:hover           { background:var(--secondary);color:#fff; }
.f-col h4                   { font-family:var(--font-h);font-size:1.1rem;color:#fff;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid rgba(255,255,255,.08); }
.f-links li                 { margin-bottom:9px; }
.f-links a, .f-links button,
.f-link-btn                 { font-size:.85rem;color:rgba(255,255,255,.65);display:inline-flex;align-items:center;gap:7px;background:none;border:none;font-family:var(--font-b);transition:var(--transition);cursor:pointer; }
.f-links a:hover,
.f-links button:hover,
.f-link-btn:hover           { color:var(--accent2);padding-left:4px; }
.f-links i                  { font-size:.65rem;color:var(--secondary); }
.f-contact li               { display:flex;gap:13px;margin-bottom:14px;font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.7); }
.f-contact i                { color:var(--accent2);margin-top:3px;flex-shrink:0;width:14px; }
.f-contact a                { color:rgba(255,255,255,.7); }
.f-contact a:hover          { color:var(--accent2); }
.f-bottom                   { border-top:1px solid rgba(255,255,255,.08);padding:20px 0; }
.f-bottom .container        { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; }
.f-bottom span,
.f-bottom a                 { font-size:.8rem;color:rgba(255,255,255,.4); }
.f-bottom a:hover           { color:var(--accent2); }

/* ─── BLOG SINGLE (used .blog-single-layout already in CSS) ─── */
.blog-single-layout         { display:grid;grid-template-columns:1fr 340px;gap:50px; }

/* ─── CONTACT PAGE (blade uses .contact-form-block h3 already) ─── */
.contact-form-block .form-group  { margin-bottom:16px; }
.contact-form-block .form-control{ width:100%;padding:12px 15px;border:2px solid var(--border);border-radius:var(--radius);font-size:.88rem;color:var(--dark);background:var(--light);transition:var(--transition);outline:none;font-family:var(--font-b); }
.contact-form-block .form-control:focus { border-color:var(--primary);background:#fff; }
.contact-form-block label   { display:block;font-size:.8rem;font-weight:700;color:var(--dark);margin-bottom:6px; }

/* ─── APPT INLINE FORM (blade reuses .form-grid-2 / .form-group / .form-control) ─── */
.appt-inline-form .form-grid-2   { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.appt-inline-form .form-group    { margin-bottom:14px; }
.appt-inline-form .form-control  { width:100%;padding:12px 15px;border:2px solid var(--border);border-radius:var(--radius);font-size:.88rem;color:var(--dark);background:var(--light);transition:var(--transition);outline:none;font-family:var(--font-b); }
.appt-inline-form .form-control:focus { border-color:var(--primary);background:#fff; }

/* ─── PAGE HERO breadcrumb fix ─── */
.page-hero-band .container  { position:relative;z-index:1; }

/* ─── MOBILE RESPONSIVE FIXES ─── */
@media (max-width: 768px) {
  /* Mobile header must show */
  .mobile-header             { display:block !important; }
  .main-header               { display:none !important; }
  .top-header                { display:none !important; }

  /* Quick action bar 2 cols on mobile */
  .qa-bar .qa-grid           { grid-template-columns:repeat(2,1fr); }
  .qa-bar .qa-item           { border-right:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15); }

  /* Hero adjustments */
  .hero-sec                  { min-height:auto;padding:56px 0; }
  .hero-stats                { gap:20px; }

  /* Form rows stack */
  .form-row-2                { grid-template-columns:1fr; }

  /* Footer bottom stack */
  .f-bottom .container       { flex-direction:column;text-align:center; }

  /* Blog list card stack */
  .blog-list-item            { grid-template-columns:1fr; }
  .bli-thumb                 { height:160px; }

  /* Testimonials single col */
  .testi-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) {
  /* Desktop: hide mobile header */
  .mobile-header             { display:none !important; }
}