/* Shared responsive treatment-package layout. Loaded by every package page. */
.package-mobile-filter-toggle,
.package-filter-scrim,
.pkg-mobile-filter-toggle,
.pkg-filter-scrim { display: none; }

@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .prospera-cardiology-care,
  .pkg-page-bg { overflow-x: clip; }

  .breadcrumb-bar,
  .pkg-breadcrumb { padding-left: 16px !important; padding-right: 16px !important; }

  .reviewer-strip { padding: 8px 16px 0 !important; justify-content: flex-start !important; }
  .reviewer-strip > span[style*="width:1px"] { display: none !important; }

  .package-mobile-filter-toggle,
  .pkg-mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    width: calc(100% - 48px);
    margin: 12px 24px 0;
    padding: 10px 16px;
    border: 1px solid #0a80a8;
    border-radius: 10px;
    background: #fff;
    color: #0a80a8;
    font: 700 15px/1.2 inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(13, 74, 107, .1);
  }

  .package-mobile-filter-toggle svg,
  .pkg-mobile-filter-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
  .package-mobile-filter-toggle:focus-visible,
  .pkg-mobile-filter-toggle:focus-visible { outline: 3px solid rgba(4, 163, 211, .35); outline-offset: 3px; }

  .layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
  }
  .layout .main { min-width: 0; width: 100%; }

  /* The original pages contain desktop grid declarations after this shared file.
     Important keeps cards at a readable width on phones without changing desktop. */
  .features,
  .proc-grid,
  .country-grid,
  .helper-grid,
  .proc-detail-grid,
  .rcm-grid,
  .rfb-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .features,
  .proc-grid,
  .country-grid,
  .helper-grid,
  .proc-detail-grid,
  .rcm-grid,
  .rfb-grid { gap: 16px !important; }

  .feature { border-right: 0 !important; border-bottom: 1px solid var(--border, #e2e9ec); padding-bottom: 14px; }
  .feature:last-child { border-bottom: 0; padding-bottom: 0; }
  .proc-card { padding: 20px !important; }
  .proc-card .thumb { max-width: 100%; height: auto !important; min-height: 83px; }
  .country-card { min-height: 0 !important; }
  .country-card .body { min-width: 0; }
  .country-img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; }
  .rcm-wrap .rcm-top { flex-wrap: wrap; }
  .rcm-wrap .rcm-photo { width: 84px; height: 84px; }
  .rfb-wrap .rfb-head { flex-wrap: wrap; }
  .rfb-wrap .rfb-badge { margin-left: 0; }

  .panel,
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Cost tables must fit on a phone instead of clipping the price column. */
  .panel table,
  .table-wrap table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed;
  }
  .panel table th,
  .panel table td,
  .table-wrap table th,
  .table-wrap table td {
    padding: 10px 8px !important;
    overflow-wrap: anywhere;
  }
  .panel table th:first-child,
  .panel table td:first-child,
  .table-wrap table th:first-child,
  .table-wrap table td:first-child { width: 42%; }
  .panel table th:last-child,
  .panel table td:last-child,
  .table-wrap table th:last-child,
  .table-wrap table td:last-child { width: 58%; }

  .layout .sidebar,
  .pkg-filters {
    position: fixed !important;
    z-index: 10001 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    display: block !important;
    width: min(88vw, 360px) !important;
    max-width: 360px !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 24px 20px max(24px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border-radius: 16px 0 0 16px !important;
    box-shadow: -12px 0 32px rgba(15, 42, 58, .2) !important;
    transform: translateX(105%);
    transition: transform .22s ease;
    visibility: hidden;
  }
  .layout .sidebar.is-open,
  .pkg-filters.is-open { transform: translateX(0); visibility: visible; }

  .package-filter-scrim,
  .pkg-filter-scrim {
    position: fixed;
    z-index: 10000;
    inset: 0;
    background: rgba(15, 42, 58, .52);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }
  .package-filter-scrim.is-open,
  .pkg-filter-scrim.is-open { display: block; opacity: 1; visibility: visible; }

  .hero,
  .insurance-banner,
  .cta-footer { grid-template-columns: 1fr !important; flex-direction: column !important; align-items: stretch !important; }
  .feature { min-width: 0; }
  .proc-card,
  .country-card,
  .rcm-card,
  .rfb-card { min-width: 0 !important; }
  .country-card { flex-direction: column !important; }
  .country-img { width: 100% !important; height: auto !important; }
  .topbar { padding: 12px 16px !important; }
  .topbar .contact { display: none !important; }
  .topbar .brand img { max-width: 180px; height: auto !important; }
  .cta-footer .left { align-items: flex-start; }

  .pkg-wrap { display: block !important; width: 100% !important; padding: 16px !important; }
  .pkg-content { width: 100%; min-width: 0; }
  .pkg-mobile-filter-toggle { margin-top: 12px; }

  body.package-filter-open { overflow: hidden; }
}

@media (max-width: 420px) {
  .layout { padding: 12px !important; }
  .hero, .panel-body, .glossary-panel { padding-left: 16px !important; padding-right: 16px !important; }
  .section-title { font-size: 19px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .layout .sidebar, .pkg-filters, .package-filter-scrim, .pkg-filter-scrim { transition: none !important; }
}