/* Apollo Sugar Clinic — Hospital theme, Elementor widget styles
   ----------------------------------------------------------------
   IMPORTANT — if the live page doesn't match the design mockup:
   Each widget renders a full-bleed <section> that manages its own
   32px side padding via the internal .wrap element. If you drop
   these widgets inside an Elementor Section/Container that itself
   has default padding or a constrained "Boxed" width, you'll get
   doubled padding and a narrower layout than intended. For each
   Section/Container holding these widgets, set:
     Layout → Content Width: Full Width (Stretched Section wanted: off)
     Advanced → Padding: 0 (all sides)
     Advanced → Margin: 0 (all sides)
   That lets this stylesheet's own spacing be the single source of
   truth, matching the HTML mockup exactly.
   ---------------------------------------------------------------- */

  :root{
    /* logo colors */
    --teal-900:#0b5e63;
    --teal-800:#0d6e73;
    --teal-700:#0f7f86;
    --teal-600:#149aa1;
    --teal-tint:#eaf6f6;
    --gold:#f2a93c;
    --gold-dark:#d6901f;
    --red:#e63946;
    --red-tint:#fdecee;
    --ink:#16292b;
    --ink-muted:#5b7274;
    --paper:#f7fafa;
    --white:#ffffff;
    --border:#e2edec;
    --shadow:0 18px 40px -22px rgba(11,94,99,.28);
  }
  /* Scoped to .apollo-clinic-widget (present on every widget's root element)
     so these rules only ever touch our own markup — never the theme's other
     content and never the Elementor editor's own panel/chrome. */
  .apollo-clinic-widget, .apollo-clinic-widget *{ box-sizing:border-box; }
  .apollo-clinic-widget{
    font-family:'Inter', Arial, sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    margin:0;
  }
  .apollo-clinic-widget h1, .apollo-clinic-widget h2, .apollo-clinic-widget h3, .apollo-clinic-widget h4{
    font-family:'Poppins', Arial, sans-serif; letter-spacing:-0.01em; margin:0;
  }
  .apollo-clinic-widget p, .apollo-clinic-widget div, .apollo-clinic-widget span{ margin:0; padding:0; }
  .apollo-clinic-widget a{ text-decoration:none; color:inherit; }
  .apollo-clinic-widget img{ display:block; max-width:100%; }
  .apollo-clinic-widget .wrap{ max-width:1220px; margin:0 auto; padding:0 32px; }
  .apollo-clinic-widget :focus-visible{ outline:2px solid var(--gold-dark); outline-offset:3px; }

  /* ============ HEADER ============ */
  .topbar{ background:var(--teal-900); color:#e3f4f3; font-size:13px; }
  .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:9px 32px; flex-wrap:wrap; gap:8px; }
  .topbar-left{ display:flex; gap:22px; flex-wrap:wrap; }
  .topbar-left span{ opacity:.92; }
  .topbar-social{ display:flex; gap:9px; }
  .topbar-social a{ width:25px; height:25px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:11.5px; }

  .navbar{ background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
  .navbar .wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 32px; gap:24px; }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo-badge{ width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,var(--teal-600),var(--teal-900)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family:'Poppins'; font-size:16px; }
  .logo-text{ line-height:1.15; }
  .logo-text .brand{ font-family:'Poppins'; font-weight:700; font-size:19px; color:var(--teal-800); }
  .logo-text .sub{ font-size:10px; letter-spacing:.08em; font-weight:700; background:var(--red); color:#fff; padding:2px 7px; border-radius:3px; display:inline-block; margin-top:3px; }
  nav.mainnav{ display:flex; gap:28px; font-size:14.5px; font-weight:500; color:var(--ink); }
  nav.mainnav a{ opacity:.85; }
  nav.mainnav a:hover{ opacity:1; color:var(--teal-700); }
  .btn-book{ background:var(--gold); color:#fff; padding:12px 26px; border-radius:999px; font-weight:700; font-size:14px; white-space:nowrap; box-shadow:0 8px 18px -6px rgba(242,169,60,.55); }
  .btn-book:hover{ background:var(--gold-dark); }

  /* ============ HERO ============ */
  .hero{ padding:60px 0 0; }
  .hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; padding-bottom:56px; }
  .badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
  .trust-badge{ display:inline-flex; align-items:center; gap:7px; background:var(--teal-tint); color:var(--teal-800); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; }
  .trust-badge.gold{ background:#fdf1de; color:var(--gold-dark); }
  .hero h1{ font-size:39px; line-height:1.22; font-weight:700; color:var(--ink); margin-bottom:16px; }
  .hero h1 span{ color:var(--teal-700); }
  .hero p.lead{ font-size:15.5px; color:var(--ink-muted); line-height:1.7; max-width:520px; margin-bottom:22px; }
  .hero-address{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-muted); max-width:480px; line-height:1.6; margin-bottom:28px; }
  .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn-gold{ background:var(--gold); color:#fff; padding:14px 28px; border-radius:10px; font-weight:700; font-size:14.5px; box-shadow:0 12px 24px -10px rgba(242,169,60,.55); }
  .btn-gold:hover{ background:var(--gold-dark); }
  .btn-outline{ border:1.5px solid var(--teal-700); color:var(--teal-800); padding:13px 26px; border-radius:10px; font-weight:600; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; }
  .btn-outline:hover{ background:var(--teal-700); color:#fff; }

  .hero-photo-wrap{ position:relative; }
  .hero-photo{ border-radius:18px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:4/3.4; position:relative; }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; }
  .hero-ribbon{ position:absolute; top:18px; left:-10px; background:var(--red); color:#fff; font-size:11.5px; font-weight:700; padding:8px 16px 8px 20px; border-radius:0 6px 6px 0; letter-spacing:.03em; box-shadow:0 8px 18px -8px rgba(230,57,70,.55); }
  .hero-rating-card{
    position:absolute; bottom:-24px; left:24px; background:#fff; border-radius:14px; padding:14px 18px;
    box-shadow:var(--shadow); display:flex; gap:12px; align-items:center; border:1px solid var(--border);
  }
  .hero-rating-card .stars{ color:var(--gold); font-size:15px; letter-spacing:1px; }
  .hero-rating-card .num{ font-family:'Poppins'; font-weight:700; font-size:17px; color:var(--teal-800); }
  .hero-rating-card .lbl{ font-size:11px; color:var(--ink-muted); }

  /* ============ TRUST STRIP ============ */
  .trust-strip-section{ padding:52px 0 8px; }
  .trust-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .trust-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 20px; display:flex; gap:14px; align-items:center; }
  .trust-icon{ width:46px; height:46px; border-radius:12px; background:var(--teal-tint); color:var(--teal-700); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
  .trust-card:nth-child(2) .trust-icon{ background:#fdf1de; color:var(--gold-dark); }
  .trust-card:nth-child(3) .trust-icon{ background:var(--red-tint); color:var(--red); }
  .trust-card .n{ font-family:'Poppins'; font-weight:700; font-size:21px; color:var(--ink); }
  .trust-card .l{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; }

  /* ============ INFO + MAP ============ */
  .info-section{ padding:88px 0; }
  .section-tag{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-700); margin-bottom:10px; }
  .section-head{ margin-bottom:36px; }
  .section-head h2{ font-size:29px; font-weight:700; }
  .section-head p{ color:var(--ink-muted); font-size:14.5px; max-width:520px; margin-top:8px; }

  .info-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:26px; }
  .card{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:30px; }
  .info-card h3{ font-size:20px; font-weight:700; margin-bottom:10px; }
  .info-card .addr{ color:var(--ink-muted); font-size:14.5px; line-height:1.65; margin-bottom:22px; }
  .info-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:14.5px; }
  .icon-chip{ width:36px; height:36px; border-radius:10px; background:var(--teal-tint); color:var(--teal-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
  .info-row a{ font-weight:600; color:var(--teal-800); }
  .info-card-cta{ display:flex; gap:12px; margin-top:24px; }
  .btn-teal{ background:var(--teal-700); color:#fff; padding:12px 20px; border-radius:10px; font-weight:700; font-size:13.5px; }
  .btn-teal:hover{ background:var(--teal-900); }
  .btn-outline-sm{ border:1px solid var(--border); color:var(--ink); padding:12px 20px; border-radius:10px; font-weight:600; font-size:13.5px; }

  .map-card{ padding:0; overflow:hidden; position:relative; min-height:340px; }
  .map-embed-wrap{ position:absolute; inset:0; }
  .map-embed-wrap iframe{ display:block; width:100%; height:100%; border:0; }
  .map-fake{
    position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, #eef6f4 0 1px, #f8fbfa 1px 46px), repeating-linear-gradient(90deg, #eef6f4 0 1px, #f8fbfa 1px 46px);
  }
  .map-pin{ position:absolute; top:44%; left:52%; transform:translate(-50%,-100%); text-align:center; }
  .map-pin .pin{ width:40px; height:40px; border-radius:50% 50% 50% 0; background:var(--teal-700); transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -6px rgba(11,94,99,.5); }
  .map-pin .pin span{ transform:rotate(45deg); color:#fff; font-size:16px; }
  .map-overlay-card{ position:absolute; left:20px; bottom:20px; background:#fff; border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); max-width:250px; border:1px solid var(--border); }
  .map-overlay-card .t{ font-weight:700; font-size:13.5px; margin-bottom:4px; }
  .map-overlay-card .r{ font-size:12.5px; color:var(--ink-muted); }
  .map-btn{ position:absolute; top:16px; right:16px; background:#fff; padding:9px 14px; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--teal-800); box-shadow:var(--shadow); border:1px solid var(--border); cursor:pointer; z-index:2; }

  /* ============ DOCTORS ============ */
  .doctors-section{ padding:20px 0 100px; }
  .doctor-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px; }
  .doc-card{
    flex:0 1 264px; max-width:264px; display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--border); border-radius:18px; overflow:hidden;
    box-shadow:0 1px 3px rgba(11,41,43,.05);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .doc-card:hover{ transform:translateY(-6px); box-shadow:0 26px 44px -22px rgba(11,94,99,.35); }
  .doc-photo-wrap{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--teal-tint); }
  .doc-photo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
  .doc-card:hover .doc-photo-wrap img{ transform:scale(1.07); }
  .doc-ribbon{
    position:absolute; top:12px; left:12px; background:rgba(255,255,255,.95); color:var(--teal-800);
    font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:5px 11px; border-radius:999px;
  }
  .doc-rating{
    position:absolute; bottom:12px; right:12px; background:rgba(11,41,43,.72); backdrop-filter:blur(3px);
    color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px;
    display:flex; align-items:center; gap:4px;
  }
  .doc-rating .star{ color:var(--gold); }
  .doc-body{ padding:20px 20px 20px; display:flex; flex-direction:column; flex:1; }
  .doc-name{ font-family:'Poppins'; font-size:16px; font-weight:600; margin-bottom:4px; }
  .doc-spec{ font-size:12.5px; color:var(--ink-muted); line-height:1.5; margin-bottom:16px; flex:1; }
  .doc-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--border); padding-top:14px; margin-top:auto; }
  .doc-link{ font-size:12.5px; font-weight:700; color:var(--teal-700); }
  .doc-btn{ background:var(--teal-700); color:#fff; font-size:12px; font-weight:700; padding:9px 16px; border-radius:999px; }
  .doc-btn:hover{ background:var(--gold-dark); }
  @media (max-width:560px){ .doc-card{ flex-basis:100%; max-width:340px; } }

  /* ============ FOOTER ============ */
  .footer{ background:var(--teal-900); color:#dcece9; padding:56px 0 0; }
  .footer .wrap{ display:grid; grid-template-columns:1.2fr 1fr 1.2fr; gap:40px; }
  .footer h4{ color:#fff; font-family:'Poppins'; font-size:15px; margin-bottom:16px; }
  .footer .flogo{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .footer .flogo .logo-badge{ background:linear-gradient(135deg,var(--gold),var(--gold-dark)); }
  .footer .flogo .brand{ color:#fff; }
  .footer p.desc{ font-size:13.5px; color:rgba(220,236,233,.75); line-height:1.7; max-width:300px; margin-bottom:18px; }
  .footer-social{ display:flex; gap:10px; }
  .footer-social a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:13px; }
  .footer ul{ list-style:none; display:flex; flex-direction:column; gap:11px; font-size:13.5px; }
  .footer ul a{ color:rgba(220,236,233,.85); display:flex; align-items:center; gap:8px; }
  .footer ul a:hover{ color:var(--gold); }
  .footer-contact{ font-size:13.5px; display:flex; flex-direction:column; gap:14px; color:rgba(220,236,233,.85); }
  .footer-contact .row{ display:flex; gap:10px; align-items:flex-start; }
  .footer-bottom{ margin-top:44px; border-top:1px solid rgba(255,255,255,.12); padding:18px 32px; text-align:center; font-size:12.5px; color:rgba(220,236,233,.65); }

  @media (max-width:980px){
    .hero .wrap{ grid-template-columns:1fr; }
    .hero-photo-wrap{ order:-1; }
    .trust-strip{ grid-template-columns:repeat(2,1fr); }
    .info-grid{ grid-template-columns:1fr; }
    .doctor-grid{ grid-template-columns:repeat(2,1fr); }
    .footer .wrap{ grid-template-columns:1fr; }
  }