/* v967 — Price Lists matrix 2/3-width containment fix
   Scope: price-lists.html only via body.price-list-table-width-2thirds-v967
   Request: the large fee matrix must no longer run underneath the right sidebar;
   visually shrink the matrix to about two thirds of the previous desktop width.

   Root cause found after v965:
   - v965 widened the left content lane to make the 5-column table readable.
   - older price-table rules still keep the matrix behaving like a wide feature table;
     when the sticky sidebar overlays during scroll/zoom, the table appears to continue
     under the sidebar.
   - the actual fix is not to widen the page again, but to make this specific matrix a
     compact, self-contained lookup table with its own max-width and smaller column rhythm.
*/

@media (min-width:981px){
  html body.price-list-table-width-2thirds-v967{
    --price-table-target-v967: 66.666%;
    --price-table-max-v967: 760px;
    --price-table-border-v967: #c8d7e6;
  }

  /* Keep the page grid/sidebar from v965, but stop the table block from filling the whole left lane. */
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-wrap-v787DN{
    width:var(--price-table-target-v967) !important;
    max-width:var(--price-table-max-v967) !important;
    min-width:0 !important;
    margin:16px 0 0 0 !important;
    overflow:hidden !important;
    border:2px solid var(--price-table-border-v967) !important;
    box-shadow:0 6px 18px rgba(16,54,96,.05), inset -2px 0 0 var(--price-table-border-v967) !important;
    box-sizing:border-box !important;
    clear:both !important;
    position:relative !important;
    z-index:1 !important;
  }

  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-compact-v787EP{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    box-sizing:border-box !important;
  }

  /* Narrower proportions so the first label column no longer forces the matrix wide. */
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN thead th:first-child,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN tbody th.fees-matrix-processing-v787EP{
    width:31% !important;
    min-width:0 !important;
    white-space:normal !important;
  }

  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN thead th:nth-child(n+2),
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN tbody td{
    width:17.25% !important;
    min-width:0 !important;
  }

  /* More compact typography, because the matrix is intentionally 2/3-width. */
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN th,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN td{
    padding:9px 8px !important;
    line-height:1.18 !important;
    border-right:2px solid var(--price-table-border-v967) !important;
    border-bottom:2px solid var(--price-table-border-v967) !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN thead th{
    padding:11px 7px !important;
    font-size:14px !important;
    line-height:1.15 !important;
    letter-spacing:-.01em !important;
  }

  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN tbody th,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN tbody th.fees-matrix-processing-v787EP{
    font-size:13.5px !important;
    line-height:1.18 !important;
    padding-left:12px !important;
    padding-right:8px !important;
  }

  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN tbody td,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN .fees-matrix-cell-v787EP{
    font-size:16px !important;
    line-height:1.08 !important;
  }

  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN .fees-matrix-total-v787DN{
    font-size:18px !important;
    line-height:1.02 !important;
    white-space:nowrap !important;
  }

  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN .fees-matrix-quote-v787DN{
    font-size:12.5px !important;
    line-height:1.15 !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }

  /* Permanent right edge: older CSS removes last-child borders. Re-apply after width change. */
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN tr > *:last-child,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN th:last-child,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-v787DN td:last-child{
    border-right:2px solid var(--price-table-border-v967) !important;
  }

  /* The blue note should align to the reduced table width, not the full content lane. */
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .nationality-fee-note-v598U,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-consolidated-intro-v787DN{
    width:var(--price-table-target-v967) !important;
    max-width:var(--price-table-max-v967) !important;
    box-sizing:border-box !important;
  }
}

/* Narrow laptop: keep the 2/3 intent, but protect readability with a slightly larger cap and internal scroll only if needed. */
@media (min-width:981px) and (max-width:1240px){
  html body.price-list-table-width-2thirds-v967{
    --price-table-target-v967: 68%;
    --price-table-max-v967: 720px;
  }

  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-wrap-v787DN{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* Tablet/mobile remains a normal scrollable full-width table; the 2/3 desktop shrink would be too small on phones. */
@media (max-width:980px){
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-matrix-wrap-v787DN,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .nationality-fee-note-v598U,
  html body.price-list-table-width-2thirds-v967 #visa-service-fees .fees-consolidated-intro-v787DN{
    width:100% !important;
    max-width:100% !important;
  }
}