/* ════════════════════════════════════════
       DESIGN TOKENS
    ════════════════════════════════════════ */
    :root {
      --white:    #FFFFFF;
      --snow:     #F8FAFC;
      --snow2:    #EEF4F8;
      --snow3:    #E4EEF5;
      --steel:    #5A8AA7;
      --steel-lt: #7AAEC8;
      --royal:    #2843A7;
      --royal-lt: #3A58C4;
      --ink:      #0E1A2B;
      --slate:    #3D5166;
      --muted:    #7A96AA;
      --muted2:   #B0C4D0;
      --border:   rgba(90,138,167,.15);
      --border2:  rgba(90,138,167,.09);
      --sh:       0 2px 16px rgba(40,67,167,.07), 0 1px 3px rgba(14,26,43,.04);
      --sh-md:    0 8px 32px rgba(40,67,167,.10), 0 2px 8px rgba(14,26,43,.06);
      --sh-lg:    0 20px 60px rgba(40,67,167,.14), 0 4px 16px rgba(14,26,43,.08);
      --ff-d:     'Libre Baskerville', Georgia, serif;
      --ff-b:     'Plus Jakarta Sans', sans-serif;
      --ease:     cubic-bezier(.25,.46,.45,.94);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--snow);
      color: var(--ink);
      font-family: var(--ff-b);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    h1, h2, h3, h4, h5, h6 { font-family: var(--ff-d); }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--snow); }
    ::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 2px; }

    /* ── Nav overrides ── */
    .nav-desktop {
      position: static !important;
      margin-top: 0 !important;
    }
    .nav-desktop-links ul li a {
      color: var(--ink) !important;
      font-family: var(--ff-b) !important;
    }

    .nav-tablet {
      position: static !important;
      margin-top: 0 !important;
    }

    .nav-tablet-links ul li a {
      color: var(--ink) !important;
      font-family: var(--ff-b) !important;
    }

    .nav-mobile {
      position: static !important;
      margin-top: 0 !important;
    }

    /* ── Bootstrap container cap ── */
    .container, .container-lg, .container-md, .container-sm {
      max-width: 1300px !important;
    }

    /* ── Back link (inside image card) ── */
    .back-link {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 5px;
      font-family: var(--ff-b);
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 14px;
      transition: color .2s;
    }
    .back-link:hover { color: var(--royal); text-decoration: none; }

    /* ── Page layout ── */
    .main {
      width: 90%;
      max-width: 1300px;
      margin: 32px auto 0;
      display: flex;
      flex-direction: row;
      gap: 28px;
      align-items: flex-start;
      padding: 0;
    }

    /* ── Left panel — image + name ── */
    .containers {
      flex: 1;
      min-width: 0;
      background: var(--white);
      border: 1px solid var(--border2);
      border-radius: 14px;
      padding: 24px;
      box-shadow: var(--sh);
      position: relative;
      overflow: hidden;
      transition: box-shadow .35s var(--ease);
    }
    .containers:hover { box-shadow: var(--sh-md); }
    .containers::before { display: none; }

    /* Service name + price header */
    .sideheader {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 14px;
    }
    .sideheader h1 {
      font-family: var(--ff-d);
      font-size: clamp(16px, 2.2vw, 26px);
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.02em;
      line-height: 1.2;
      word-break: break-word;
      flex: 1;
      min-width: 0;
    }
    .sideheader .price {
      font-family: var(--ff-d);
      font-size: 18px;
      font-weight: 700;
      color: var(--royal);
      flex-shrink: 0;
    }

    /* ── Image section ── */
    .image-section { position: relative; margin-top: 0; }
    .main-image-wrapper {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
    }
    #main-image {
      width: 100%;
      height: 420px;
      object-fit: contain;
      display: block;
      border-radius: 10px;
      background: var(--snow);
    }
    .arrows {
      position: absolute;
      top: 50%;
      left: 0; right: 0;
      display: none;
      justify-content: space-between;
      padding: 0 12px;
      transform: translateY(-50%);
    }
    .arrow-left, .arrow-right {
      background: rgba(14,26,43,.58);
      color: #fff;
      font-size: 16px;
      padding: 10px 14px;
      cursor: pointer;
      border-radius: 50%;
      backdrop-filter: blur(4px);
      transition: background .2s;
    }
    .arrow-left:hover, .arrow-right:hover { background: rgba(14,26,43,.85); }
    .image-section:hover .arrows { display: flex; }
    .thumbnail-row {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
      justify-content: center;
    }
    .thumbnail-row img {
      width: 80px;
      height: 60px;
      object-fit: cover;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color .2s, transform .2s;
    }
    .thumbnail-row img:hover {
      border-color: var(--royal);
      transform: scale(1.05);
    }

    /* ── Right panel — contact/details card ── */
    .sidebar {
      flex: 0 0 360px;
      width: 360px;
      background: var(--white);
      border: 1px solid var(--border2);
      border-radius: 14px;
      box-shadow: var(--sh-md);
      overflow: hidden;
      position: sticky;
      top: 16px;
      transition: box-shadow .35s var(--ease);
    }
    .sidebar:hover { box-shadow: var(--sh-lg); }
    .sidebar::before {
      content: '';
      display: block;
      height: 3px;
      background: linear-gradient(90deg, var(--royal), var(--steel));
    }

    /* CTA button links */
    .sidebar a.sd-link {
      display: block;
      padding: 0 20px;
      text-decoration: none;
    }
    .sidebar a.sd-link:first-of-type { padding-top: 20px; }
    .sidebar a.sd-link:last-of-type  { padding-bottom: 18px; }

    /* Primary button */
    .btn-cta-primary {
      width: 100%;
      padding: 13px 16px;
      background: var(--royal);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: var(--ff-b);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      box-shadow: 0 4px 18px rgba(40,67,167,.32);
      transition: background .25s, transform .2s, box-shadow .25s;
      margin-bottom: 8px;
      letter-spacing: .01em;
    }
    .btn-cta-primary:hover {
      background: var(--royal-lt);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(40,67,167,.42);
    }

    /* Secondary button */
    .btn-cta-secondary {
      width: 100%;
      padding: 11px 16px;
      background: var(--snow2);
      color: var(--royal);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-family: var(--ff-b);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      letter-spacing: .06em;
      text-transform: uppercase;
      transition: background .2s, border-color .2s, color .2s;
      margin-bottom: 8px;
    }
    .btn-cta-secondary:hover {
      background: var(--royal);
      color: #fff;
      border-color: var(--royal);
    }

    /* Share strip */
    .sd-divider { height: 1px; background: var(--border2); margin: 4px 20px 12px; }
    .sd-share { padding: 0 20px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .sd-share-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); margin-right: 2px; }
    .share-btn {
      width: 30px; height: 30px; border-radius: 7px;
      border: 1px solid var(--border2); background: var(--white);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: var(--muted); cursor: pointer; text-decoration: none;
      text-transform: none; font-weight: 400;
      transition: background .2s, color .2s, border-color .2s;
    }
    .share-btn:hover, a.share-btn:hover { background: var(--royal); color: #fff !important; border-color: var(--royal); text-decoration: none; }
    .share-btn.copied, a.share-btn.copied { background: #16a34a; color: #fff !important; border-color: #16a34a; }

    /* Details table */
    .sidebar .details-table {
      width: 100%;
      border-collapse: collapse;
    }
    .sidebar .details-table tr {
      border-bottom: 1px solid var(--border2);
    }
    .sidebar .details-table tr:last-child { border-bottom: none; }
    .sidebar .details-table th,
    .sidebar .details-table td {
      padding: 13px 20px;
      text-align: left;
      border-bottom: none;
      font-family: var(--ff-b);
    }
    .sidebar .details-table th {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--slate);
      width: 42%;
    }
    .sidebar .details-table td {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      word-break: break-word;
    }

    /* School type pill */
    .school-badge {
      background: rgba(40,67,167,.08);
      color: var(--royal);
      border: 1px solid rgba(40,67,167,.15);
      border-radius: 100px;
      padding: 3px 14px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      display: inline-block;
    }


    /* ── Popup ── */
    .popup-container {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(14,26,43,.5);
      backdrop-filter: blur(4px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    .popup-content {
      background: var(--white);
      padding: 28px;
      width: 70%;
      max-width: 800px;
      border-radius: 14px;
      position: relative;
      box-shadow: var(--sh-lg);
    }
    .close-btn {
      position: absolute;
      top: 14px; right: 18px;
      font-size: 20px;
      cursor: pointer;
      color: var(--muted);
      transition: color .2s;
    }
    .close-btn:hover { color: var(--ink); }

    /* ── Chat window ── */
    #chatWindow {
      border-radius: 14px !important;
      border: 1px solid var(--border) !important;
      box-shadow: var(--sh-lg) !important;
    }

    /* ── Misc ── */
    #document-list { display: none; }

    /* ── Description card ── */
    .desc-wrapper {
      width: 90%;
      max-width: 1300px;
      margin: 28px auto 56px;
    }
    .right-section {
      background: var(--white);
      border: 1px solid var(--border2);
      border-radius: 14px;
      padding: 28px 32px;
      box-shadow: var(--sh);
      position: relative;
      overflow: hidden;
      transition: box-shadow .35s var(--ease);
    }
    .right-section:hover { box-shadow: var(--sh-md); }
    .right-section::before { display: none; }
    .right-section h2 {
      font-family: var(--ff-d);
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -.01em;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border2);
    }
    .right-section p {
      font-size: 14px;
      color: var(--slate);
      line-height: 1.85;
      font-family: var(--ff-b);
    }

    /* ── Responsive ── */

    /* Large tablet (900–1100px): still side-by-side, tighten up */
    @media (max-width: 1100px) {
      .main { width: 95%; gap: 20px; }
      .desc-wrapper { width: 95%; margin-top: 20px; }
      #main-image { height: 360px; }
    }

    /* Small tablet (768–900px): shrink sidebar */
    @media (max-width: 900px) {
      .sidebar { flex: 0 0 280px; width: 280px; }
      #main-image { height: 320px; }
    }

    /* Mobile (≤768px): stack vertically, image first */
    @media (max-width: 768px) {
      .main {
        flex-direction: column;
        width: 95%;
        margin: 20px auto 0;
      }
      .containers, .sidebar {
        flex: none;
        width: 100%;
        position: static;
      }
      #main-image { height: 260px; }
      .sideheader { margin-bottom: 10px; }
      .right-section { padding: 18px 20px; }
      .right-section h2 { font-size: 15px; }
      .desc-wrapper { width: 95%; margin: 20px auto 40px; }
    }

    /* Small mobile (≤480px): tighten padding */
    @media (max-width: 480px) {
      .containers { padding: 14px; }
      .sidebar a.sd-link { padding: 0 14px; }
      .sidebar a.sd-link:first-of-type { padding-top: 14px; }
      .sidebar a.sd-link:last-of-type  { padding-bottom: 12px; }
      .sidebar .details-table th,
      .sidebar .details-table td { padding: 10px 14px; }
      .btn-cta-primary { padding: 11px 14px; font-size: 13px; }
      .btn-cta-secondary { padding: 10px 14px; }
      .sd-divider { margin: 4px 14px 12px; }
      .sd-share { padding: 0 14px 14px; }
      #main-image { height: 220px; }
    }

/* ──────────────────────────────────────────────────────────────────────
   React rebuild integration overrides (not in the legacy file). Same fix as
   page_details.css: the shared <SiteHeader> is an absolute, transparent,
   white, UPPERCASE overlay tuned for a dark hero. The services detail page has
   no hero, so the nav must sit in normal flow with dark links to stay legible
   on the light page background. Scoped here (services_details.css only loads on
   the service detail route). */
.site-header {
  position: relative !important;
  background: transparent;
  color: var(--ink, #0e1a2b);
}
.site-header nav,
.site-header nav a {
  color: var(--ink, #0e1a2b);
}
/* Active nav link matches legacy: dark ink + faint white 3px underline,
   not a royal-blue highlight. */
.site-header nav a.active {
  color: var(--ink, #0e1a2b);
  text-decoration-color: #ffffff;
  text-decoration-thickness: 3px;
}

/* React rebuild parity: the legacy corporate theme (style-shop.css/style.css,
   not vendored) uppercases the sidebar details-table VALUES — confirmed via
   getComputedStyle on the live old pages (sidebar td = uppercase, desc-wrapper
   specs-table td = none). Replicate just that one rule. */
.sidebar .details-table td {
  text-transform: uppercase;
}

/* Standard Login/Register button: the rounded outline-pill used app-wide on the
   listing pages' dark hero, adapted for the light detail background (dark ink
   text + subtle ink outline) so the same pill stays visible. */
.site-header-cta {
  background: rgba(40, 67, 167, 0.06) !important;
  border: 1px solid rgba(14, 26, 43, 0.22) !important;
  color: var(--ink, #0e1a2b) !important;
}
.site-header-cta:hover {
  background: rgba(40, 67, 167, 0.12) !important;
}
/* Legacy left-aligns the desc-wrapper specs-table labels (corporate theme th
   default); page_details.css doesn't, so th falls back to center. */
.specs-table th {
  text-align: left;
}