/* DR Bangladesh modular stylesheet. */

/* Source module: single-hospital.php */
:where(body.single-hospital,body.single-chamber) .ch-wrap{max-width:860px;margin:20px auto;padding:0 12px}
:where(body.single-hospital,body.single-chamber) img{max-width:100% !important}
:where(body.single-hospital,body.single-chamber) .drb-dept-ad{max-width:860px !important;margin-left:auto !important;margin-right:auto !important;padding:0 12px;box-sizing:border-box}
:where(body.single-hospital,body.single-chamber) .drb-dept-ad img{border-radius:12px}
    :where(body.single-hospital,body.single-chamber) .ch-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin:18px 0}
    :where(body.single-hospital,body.single-chamber) .ch-head{display:flex;gap:14px;padding:14px}
    :where(body.single-hospital,body.single-chamber) .ch-photo img{width:120px;height:140px;border-radius:10px;object-fit:cover;border:1px solid #e5e7eb;background:#f3f4f6}
    :where(body.single-hospital,body.single-chamber) .ch-title{margin:0 0 6px;font-size:25px;color:#0f172a}
    :where(body.single-hospital,body.single-chamber) .ch-meta .hospital-rating-row{display:flex;align-items:center;margin:6px 0 8px}
    :where(body.single-hospital,body.single-chamber) .ch-meta .drb-hospital-profile-rating{display:inline-flex;width:auto;justify-content:flex-start;margin:0;white-space:nowrap}
    :where(body.single-hospital,body.single-chamber) .row{margin:4px 0;color:#374151}
    /* Plain inline flow, not flex: a long address wraps across lines on
     * mobile either way, but flex treats the map-link icon as its own
     * separate item that wraps onto a whole new line by itself the moment
     * it doesn't fit — normal text flow lets it sit right after the last
     * word (or, at worst, start of the next line attached to nothing but
     * still inline, not stranded alone). */
    :where(body.single-hospital,body.single-chamber) .location-map-link{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:4px;border-radius:50%;background:#eef6ff;color:#1672cf;text-decoration:none;vertical-align:middle}
    :where(body.single-hospital,body.single-chamber) .location-map-link:hover{background:#dbeafe;color:#075db5}
    :where(body.single-hospital,body.single-chamber) .location-map-link:focus-visible{outline:2px solid #1e40af;outline-offset:2px}
    :where(body.single-hospital,body.single-chamber) .location-map-link svg{width:15px;height:15px;fill:currentColor}
    :where(body.single-hospital,body.single-chamber) .links-row{display:flex;flex-wrap:wrap;align-items:center;gap:0;line-height:1.8}
    :where(body.single-hospital,body.single-chamber) .links-row a{color:#1d4ed8;text-decoration:underline;padding:0 6px}
    :where(body.single-hospital,body.single-chamber) .links-row a:first-child{padding-left:0}
    :where(body.single-hospital,body.single-chamber) .links-row a:last-child{padding-right:0}
    :where(body.single-hospital,body.single-chamber) .links-row .sep-pipe{display:inline-block;padding:0 8px;color:#1d4ed8}

    :where(body.single-hospital,body.single-chamber) .box{border:1px solid #dbeafe;background:#f8fbff;border-radius:12px;margin:18px 0}
    :where(body.single-hospital,body.single-chamber) .box-head{background:#e0efff;color:#0f172a;text-align:center;padding:10px;border-radius:12px 12px 0 0;font-weight:700}
    :where(body.single-hospital,body.single-chamber) .box-body{padding:12px}
    :where(body.single-hospital,body.single-chamber) .empty{padding:12px;border:1px dashed #cbd5e1;border-radius:10px;background:#fff}

    :where(body.single-hospital,body.single-chamber) .call-btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:5px 20px;margin:5px 0 0;border-radius:5px;
      background:#2a7fba;border:1px solid #2a6ea9;color:#fff;
      text-decoration:none;cursor:pointer;
      font:400 14px/24px "Roboto",sans-serif;text-align:center;
      transition:background-color .2s ease,border-color .2s ease;
    }
    :where(body.single-hospital,body.single-chamber) .call-btn:hover{
      background:#dc2626;border-color:#b91c1c;color:#fff;text-decoration:none;
    }
    :where(body.single-hospital,body.single-chamber) .call-btn:focus{outline:none}
    :where(body.single-hospital,body.single-chamber) .call-btn:focus-visible{outline:2px solid #1e40af;outline-offset:2px}

    :where(body.single-hospital,body.single-chamber) .drb-map{margin-top:12px}
    :where(body.single-hospital,body.single-chamber) .map-embed{position:relative;width:100%;height:auto}
    :where(body.single-hospital,body.single-chamber) .ratio-16x9{padding-top:56.25%;}
    :where(body.single-hospital,body.single-chamber) .map-embed iframe.drb-map-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
    @media (max-width: 480px){ :where(body.single-hospital,body.single-chamber) .ratio-16x9{padding-top:62%;} }

    /* Mobile layout */
    @media (max-width:640px){
      :where(body.single-hospital,body.single-chamber) .ch-head{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 12px;
      }
      :where(body.single-hospital,body.single-chamber) .ch-photo{ order:1; }
      :where(body.single-hospital,body.single-chamber) .ch-meta{ order:2; width:100%; }
      :where(body.single-hospital,body.single-chamber) .ch-title{ margin: 4px 0 6px; font-size: 18px; }
      :where(body.single-hospital,body.single-chamber) .ch-meta .hospital-rating-row{ justify-content:center; }
      :where(body.single-hospital,body.single-chamber) .ch-meta .drb-hospital-profile-rating{ justify-content:center; }
      :where(body.single-hospital,body.single-chamber) .row{ margin: 4px 0; }
      :where(body.single-hospital,body.single-chamber) .links-row{ justify-content: center; }
      :where(body.single-hospital,body.single-chamber) .call-btn{
        margin: 8px auto 0;
        display: inline-flex;
      }
      :where(body.single-hospital,body.single-chamber) .ch-card{ margin: 12px 0; }
    }
  

:where(body.single-hospital,body.single-chamber) .ch-photo-inner{display:flex;justify-content:center;align-items:center;}

/* Source module: inc/single-hospital/breadcrumb.php */
/* container match */
    :where(body.single-hospital,body.single-chamber) .drb-container{
      max-width: 860px;
      margin: 20px auto;
      padding: 0 15px;
    }
    /* visuals */
    :where(body.single-hospital,body.single-chamber) .drb-breadcrumb{
      font-size:14px;
      line-height:1.6;
      color:#475569;
    }
    :where(body.single-hospital,body.single-chamber) .drb-breadcrumb a{
      color:#1f5fa6;
      text-decoration:underline;
    }
    :where(body.single-hospital,body.single-chamber) .drb-breadcrumb .sep{
      margin:0 0px;
      color:#94a3b8;
    }
    :where(body.single-hospital,body.single-chamber) .drb-breadcrumb .current{
      color:#0f172a;
    }

/* Source module: inc/single-hospital/hospital-doctor-list.php */
/* Department filter — was entirely unstyled (bare label + select) */
/* Desktop: one centered row, label to the left of the dropdown.
 * Mobile: stacked (label on top, dropdown below), still centered. */
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list__filter{ margin:10px 0 16px; display:flex; align-items:center; justify-content:center; gap:10px; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list__filter label{ margin:0; font-weight:600; color:#0f172a; white-space:nowrap; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list__filter select{ padding:8px 12px; border:1px solid #dbeafe; border-radius:8px; background:#fff; font-size:14px; max-width:100%; }
@media (max-width:480px){
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list__filter{ flex-direction:column; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list__filter select{ width:auto; max-width:90%; }
}

/* ====== Layout basics ====== */
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .dept-block{ margin-bottom:18px; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .dept-title{
  margin:8px 0 10px; padding:8px 12px;
  font-size:18px; font-weight:600; text-align:center;
  background:#eaf3ff; border:1px solid #dbeafe; border-radius:10px; color:#0f172a;
}
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .related-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
:where(body.single-hospital,body.single-chamber) .dr-box-body{ padding:0; }

/* Card base (tablet default = row) */
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-card{
  background:#fff; border:1px solid #dbeafe; border-radius:14px;
  padding:16px; display:flex; align-items:flex-start; text-align:left;
  box-shadow:0 1px 0 rgba(17,24,39,.03);
}
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-thumb{
  width:110px; height:110px; flex:0 0 110px;
  object-fit:cover; border-radius:10px; background:#f5f7fb; border:1px solid #e5e7eb;
  box-shadow: inset 0 0 0 3px #fff; margin:0;
}
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-info{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-name{ margin:0 0 4px; line-height:1.25; font-size:18px; font-weight:700; color:#1e3a8a; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-verified-badge{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:5px; border-radius:50%; background:#1d76e8; color:#fff; font:700 13px/1 Arial,sans-serif; vertical-align:middle; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-line{ margin:2px 0; font-size:14px; line-height:1.45; color:#0f172a; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-line.small{ color:#475569; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-line.drb-desig span{ font-weight:600; color:#0f172a; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-spec{ margin-top:6px; font-size:14px; font-weight:700; color:#dc2626; }

/* Button */
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-actions{ width:220px; margin-left:auto; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .see-btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:5px 18px; border-radius:5px !important; text-decoration:none; cursor:pointer;
  background:#2a7fba; border:1px solid #2a6ea9; color:#fff; font:500 15px/24px "Roboto",sans-serif;
}
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .see-btn:hover{ background:#dc2626; border-color:#b91c1c; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .see-btn:active{ background:#b91c1c; border-color:#9f1717; }
:where(body.single-hospital,body.single-chamber) .hospital-doctor-list .see-btn, :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .see-btn:visited{ color:#fff; text-decoration:none !important; }

/* ===== Desktop (1024px and up): grid; button under text column ===== */
@media (min-width:1024px){
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .related-grid{ gap:20px; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-card{
    display:grid;
    grid-template-columns:110px 1fr;
    column-gap:16px;
    align-items:start;
  }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-thumb{ grid-column:1; grid-row:1 / span 3; width:100px; height:130px; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-info { grid-column:2; grid-row:1; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-extra{ grid-column:2; grid-row:2; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-actions{
    grid-column:2; grid-row:3;
    width:auto; margin:5px 0 0 0; align-self:start;
  }
}

/* ===== Mobile (480px and below): grid; details under photo; full-width button ===== */
@media (max-width:480px){
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-card{
    display:grid;
    grid-template-columns:82px 1fr;
    column-gap:12px; row-gap:0; padding:14px 12px;
  }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-thumb{ grid-column:1; grid-row:1 / span 3; width:75px; height:100px; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-info { grid-column:2; grid-row:1; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-extra{ grid-column:1 / -1; grid-row:2; margin-top:6px; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-actions{ grid-column:1 / -1; margin-top:10px; width:100%; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .see-btn{ display:block; width:100%; border-radius:12px; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-name{ font-size:16px; }
}

/* ===== 481-767px: row layout; button fills the right column ===== */
@media (min-width:481px) and (max-width:767px){
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-card{ gap:14px; padding:14px 16px; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .rel-actions{ width:100%; margin-left:0; }
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .see-btn{ width:100%; border-radius:12px; }
}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  :where(body.single-hospital,body.single-chamber) .hospital-doctor-list .see-btn{ transition:none; }
}

/* Source module: inc/single-hospital/hospital-info.php */
:where(body.single-hospital,body.single-chamber) .qtitle{font-weight:700;margin-bottom:8px;text-align:center}
        :where(body.single-hospital,body.single-chamber) .drb-service-alt{display:block;font-size:13px;margin-top:4px;color:#475569}
        /* two-column services */
        :where(body.single-hospital,body.single-chamber) .srv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
        @media (max-width:768px){:where(body.single-hospital,body.single-chamber) .srv-grid{grid-template-columns:1fr}}
        :where(body.single-hospital,body.single-chamber) .srv-grid ul{list-style:none;margin:0;padding:0}
        :where(body.single-hospital,body.single-chamber) .srv-grid li{
          margin:10px 0;position:relative;padding-left:26px;line-height:1.6;color:#111827;
          border-bottom:1px dashed #e5e7eb;padding-bottom:8px;word-break:break-word;
        }
        :where(body.single-hospital,body.single-chamber) .srv-grid ul:last-child li:last-child{border-bottom:0}
        /* Explicit, not just relying on the browser default: the loaded
         * Bengali webfont (Noto Serif Bengali) has no italic face, so
         * font-style:italic alone can render as plain upright text for
         * Bangla — the skew guarantees em still reads as visually distinct
         * either way. Underline/strikethrough/bold are re-asserted too, in
         * case anything upstream (a reset, an inherited style) touches them. */
        :where(body.single-hospital,body.single-chamber) .srv-grid li strong{font-weight:700}
        :where(body.single-hospital,body.single-chamber) .srv-grid li em{font-style:italic;display:inline-block;transform:skewX(-12deg)}
        :where(body.single-hospital,body.single-chamber) .srv-grid li u{text-decoration:underline}
        :where(body.single-hospital,body.single-chamber) .srv-grid li s{text-decoration:line-through}
        :where(body.single-hospital,body.single-chamber) .srv-grid li:before{
          content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border:2px solid #94a3b8;border-radius:3px;background:#fff;
        }
        :where(body.single-hospital,body.single-chamber) .srv-grid li:after{
          content:"";position:absolute;left:3px;top:7px;width:10px;height:10px;background:#64748b;
          clip-path:polygon(14% 44%,0 59%,41% 100%,100% 25%,85% 10%,41% 74%);
        }
        /* "**" service lines: bold, no checkmark bullet — and the text
         * starts flush where the checkmark used to sit, instead of leaving
         * its 26px gap empty. */
        :where(body.single-hospital,body.single-chamber) .srv-grid li.srv-no-check{
          padding-left:0;
        }
        :where(body.single-hospital,body.single-chamber) .srv-grid li.srv-no-check:before,
        :where(body.single-hospital,body.single-chamber) .srv-grid li.srv-no-check:after{
          content:none;
        }
        :where(body.single-hospital,body.single-chamber) .drb-map .ratio-16x9{position:relative;width:100%;padding-top:56.25%}
        :where(body.single-hospital,body.single-chamber) .drb-map .ratio-16x9 > iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
      

:where(body.single-hospital,body.single-chamber) .qitem--spaced{margin-bottom:18px;}

:where(body.single-hospital,body.single-chamber) .qtitle--spaced{margin-top:4px;}

:where(body.single-hospital,body.single-chamber) .drb-map--spaced{margin-top:20px;}

/* Weekly hours chart — same look as the doctor profile's week-chart */
:where(body.single-hospital,body.single-chamber) .week-chart{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;margin-top:8px;max-width:780px
}
:where(body.single-hospital,body.single-chamber) .week-chart .day{
  border:1px solid #e5e7eb;border-radius:10px;padding:6px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;line-height:1.3;
  flex:1 1 220px;max-width:280px
}
:where(body.single-hospital,body.single-chamber) .week-chart .day.open{background:#ecfdf5;border-color:#a7f3d0}
:where(body.single-hospital,body.single-chamber) .week-chart .day.closed{background:#fff1f2;border-color:#fecaca;color:#991b1b}
:where(body.single-hospital,body.single-chamber) .week-chart .day.open .d-time{color:#065f46;font-weight:600}
:where(body.single-hospital,body.single-chamber) .week-chart .day.closed .d-time{font-weight:600}
:where(body.single-hospital,body.single-chamber) .week-chart .d-label{font-weight:700}