/* =============================================
   Pricing Table Styles
   ============================================= */
.cost-matrix {
  background: #1583be;
  color:white;
}

.cost-matrix h2{
	  color:white;
}
/* Pricing section background (this selector was shared with a blade background rule) */
.field--name-field-blades .paragraph--type--blade.background-color-09847a,
.pricing {
  background-color: #13385e !important;
}

/* Covers both pricing tables:
   - BCBA page: <table id="pricing">
   - QBA page:  the table inside the .cost-matrix blade */

/* ---------- Mobile First ---------- */
:is(table#pricing, .cost-matrix table) {
  background: none !important;
}

/* Theme sets 1.2em (≈22px) here and the root font is 10px, so use px */
:is(#pricing, .cost-matrix table) tbody {
  font-size: 18px !important;
  line-height: 1.4;
}

.discount {
  padding-bottom: 40px;
}

:is(#pricing, .cost-matrix table),
:is(#pricing, .cost-matrix table) tbody {
  display: block;
  width: 100%;
}

:is(#pricing, .cost-matrix table) tr {
  display: block;
  width: 100%;
  margin-bottom: 0;
  height: auto;
  padding: 14px 0;
  /* !important beats the QBA page's inline ".cost-matrix tr { border: none !important }" */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

:is(#pricing, .cost-matrix table) tr:last-child {
  border-bottom: 0 !important;
}

:is(#pricing, .cost-matrix table) tr:first-child {
  /* Hide the header row on mobile */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

:is(#pricing, .cost-matrix table) td {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px !important;
  text-align: right;
  height: auto;
}

/* Mobile labels – every data row */
:is(#pricing, .cost-matrix table) td:nth-child(2)::before,
:is(#pricing, .cost-matrix table) td:nth-child(3)::before,
:is(#pricing, .cost-matrix table) td:nth-child(4)::before {
  /* Label floats left, price stays right – works even when the price
     contains extra markup like $<span>525 - $536.25</span> */
  float: left;
  margin-right: 12px;
  font-weight: bold;
  text-align: left;
}

:is(#pricing, .cost-matrix table) td:nth-child(2)::before { content: "Public"; }
:is(#pricing, .cost-matrix table) td:nth-child(3)::before { content: "UCSB Students"; }
:is(#pricing, .cost-matrix table) td:nth-child(4)::before { content: "International"; }

/* Category name (first cell in each row) */
:is(#pricing, .cost-matrix table) td:first-child {
  display: block;
  font-weight: bold;
  text-align: left;
  padding-bottom: 8px !important;
}

/* Footer row with links (BCBA discount link + Info button): no labels, no empty cells */
:is(#pricing, .cost-matrix table) tr:last-child:has(a) td::before {
  content: none !important;
}

:is(#pricing, .cost-matrix table) tr:last-child:has(a) td:first-child,
:is(#pricing, .cost-matrix table) tr:last-child:has(a) td:nth-child(2) {
  display: none;
}

:is(#pricing, .cost-matrix table) tr:last-child:has(a) td {
  display: block;
  text-align: left;
}

:is(table#pricing, .cost-matrix table) a {
  font-size: 16px;
  text-align: left;
}

:is(table#pricing, .cost-matrix table) a.int-info {
  display: inline-block;
  margin-top: 8px;
}

/* ---------- Tablet (768px and up) ---------- */
@media (min-width: 768px) {
  :is(#pricing, .cost-matrix table) {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  /* A real row group – NOT a nested table */
  :is(#pricing, .cost-matrix table) tbody {
    display: table-row-group;
    width: auto;
  }

  :is(#pricing, .cost-matrix table) tr {
    display: table-row;
    padding: 0;
    border-bottom: 0 !important;
  }

  :is(#pricing, .cost-matrix table) tr:first-child {
    position: static;
  }

  :is(#pricing, .cost-matrix table) td,
  :is(#pricing, .cost-matrix table) tr:last-child:has(a) td,
  :is(#pricing, .cost-matrix table) tr:last-child:has(a) td:first-child,
  :is(#pricing, .cost-matrix table) tr:last-child:has(a) td:nth-child(2) {
    display: table-cell;
    width: auto;              /* undo the mobile width: 100% */
    vertical-align: middle;
    text-align: center;
    padding: 14px 12px !important;
  }

  /* Category column wider; price columns share the rest evenly */
  :is(#pricing, .cost-matrix table) td:first-child {
    display: table-cell;      /* override the mobile display: block */
    padding: 14px 12px !important; /* override the mobile padding-bottom */
    width: 34%;
    text-align: left;
  }

  /* Divider lines between price rows */
  :is(#pricing, .cost-matrix table) tr:not(:first-child):not(:has(a)) td {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  :is(#pricing, .cost-matrix table) tr:first-child td {
    padding-bottom: 10px !important;
  }

  :is(#pricing, .cost-matrix table) tr:last-child:has(a) td {
    vertical-align: top;
    padding-top: 20px !important;
  }

  :is(table#pricing, .cost-matrix table) a {
    text-align: center;
  }

  /* Remove mobile labels */
  :is(#pricing, .cost-matrix table) td::before {
    content: none !important;
    float: none;
  }
}

/* ---------- Desktop (1200px and up) ---------- */
@media (min-width: 1200px) {
  /* Keep each price range on one line */
  :is(#pricing, .cost-matrix table) tr:not(:has(a)) td:not(:first-child) {
    white-space: nowrap;
  }
}