/* ==========================================================================
   Master Table Component Styles (master-pricing-table.php)
   Mapped 1:1 to pdop_punch_table reference implementation & styling
   ========================================================================== */

/* Section & Overflow Wrapper */
.pdop_punch_section.master-table-section {
  /* margin-bottom: 60px; */
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.master-table-section::-webkit-scrollbar {
  height: 6px;
}

.master-table-section::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

.section-divider{margin-block: 36px;}

.master-table-section::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

/* Main Table Container */
.pdop_punch_table.master-table {
  width: 100%;
  min-width: 680px;
  background-color: var(--color-white, #ffffff);
  box-sizing: border-box;
  font-family: inherit;
  overflow: hidden;
  padding-right: 40px;
}

.pdop_punch_table.master-table.master-table--single-col,
.pdop_punch_table.master-table.pdop_single_group {
  padding-right: 0;
}

/* Table Blocks Flex - Side-by-side multi-block layout */
.master-table-blocks-container,
.master-table-blocks-flex,
.master-table-row-blocks-flex {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100%;
}

.master-table-row-blocks-flex{
  position: relative;
  z-index: 9;
}

/* .master-table-row-blocks-flex::before */

.master-table-block-wrapper,
.master-table-block-header-col,
.master-table-block-row-col {
  min-width: 0;
  box-sizing: border-box;
}

.master-table-block-header-col{
  background: var(--color-cream-bg, #fff5e1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}

.master-table-block-header-col:last-child{
  /* padding-right: 40px; */
}

/* Top Super-Banner Row */
.pdop_punch_top_banner_row {
  display: grid;
  grid-template-columns: var(--table-label-size, 230px) 1fr;
  gap: 8px;
  margin-bottom: 0;
}

.pdop_punch_top_banner {
  background-color: var(--color-cream-bg, #fff5e1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 16px 20px;
  text-align: center;
  border-left: 1px solid #e8ecf4;
  padding-bottom: 150px;
  margin-bottom: -130px;
}

.pdop_punch_top_banner h3 {
  margin: 0;
  font-size: var(--h5-size, 20px);
  font-weight: var(--fw-bold, 700);
  color: var(--color-black, #000000);
}

/* Header Group Row Main */
.pdop_punch_group_row_main {
  display: grid;
  grid-template-columns: var(--table-label-size, 230px) 1fr;
  gap: 8px;
}

.master-table-row-label-spacer {
  width: var(--table-label-size, 230px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  box-sizing: border-box;
}

.master-table-row-header-title {
  font-size: var(--body-base, 16px);
  font-weight: var(--fw-bold, 700);
  color: var(--color-primary, #2b3c73);
  text-transform: uppercase;
}

.pdop_punch_group_row_inner {
  display: flex;
  flex-direction: column;
}

/* Level 1: Column Group Category Headers (Cream / Gray Background) */
.pdop_punch_group_row.master-table-categories-row {
  display: grid;
  grid-template-columns: repeat(var(--total-sub-cols, 1), minmax(0, 1fr));
  gap: 8px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: #E2E2E2;
  padding-bottom: 15px;
  margin-bottom: -15px;
}

.pdop_punch_group_row.master-table-categories-row.master-table-category-bg--gray,
.master-table-category-bg--gray {
  background-color: #E2E2E2;
}

.pdop_punch_group_row.master-table-categories-row.master-table-category-bg--lightorange,
.master-table-category-bg--lightorange {
  background-color: var(--color-cream-bg, #FFF5E1);
}

.pdop_punch_group_row.master-table-categories-row.no-data,
.master-table-category-bg--gray.no-data,
.master-table-category-bg--lightorange.no-data {
  display: none !important;
}

.pdop_punch_col_single.master-table-category-card {
  /* background-color: var(--color-cream-bg, #fff5e1); */
  padding: 16px 20px;
  text-align: center;
  /* border-left: 1px solid #e8ecf4; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pdop_punch_col_title {
  font-size: var(--h5-size, 18px);
  font-weight: var(--fw-semibold, 600);
  margin-bottom: 4px;
  line-height: 1;
  color: var(--color-black, #000000);
}

.pdop_punch_col_subtitle {
  font-size: var(--body-small, 14px);
  line-height: 1.4;
  font-weight: var(--fw-medium, 500);
  color: var(--color-black, #000000);
}

/* Level 2: Sub-Headers (Navy Blue Bar) */
.pdop_punch_sub_row.master-table-subheaders-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.pdop_punch_col_sub_main.master-table-subheaders-grid {
  display: grid;
  grid-template-columns: repeat(var(--total-sub-cols, 1), minmax(0, 1fr));
}

/* Master Table Style: One Overrides */
.master-table-style--one .pdop_punch_col_sub_main.master-table-subheaders-grid,
.master-table-style--one .pdop_punch_cell_inner.master-table-cell-group,
.table-style-one .pdop_punch_col_sub_main.master-table-subheaders-grid,
.table-style-one .pdop_punch_cell_inner.master-table-cell-group {
  grid-template-columns: 1fr 7fr !important;
}

.master-table-style--one .pdop_punch_col_sub.pdop_punch_col_sub_last,
.master-table-style--one .pdop_punch_cell.master-table-cell,
.table-style-one .pdop_punch_col_sub.pdop_punch_col_sub_last,
.table-style-one .pdop_punch_cell.master-table-cell {
  border-left: none !important;
  justify-content: initial;
}

.master-table-style--one .pdop_punch_cell.master-table-cell{
  justify-content: center;
}

.pdop_punch_col_sub.master-table-subheader-cell {
  padding: 8px 10px;
  font-size: var(--body-small, 14px);
  font-weight: 400;
  color: var(--color-white, #ffffff);
  background-color: var(--color-primary, #2b3c73);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdop_punch_col_sub.pdop_punch_col_sub_first {
  border-top-left-radius: 20px;
}

.pdop_punch_col_sub.pdop_punch_col_sub_last {
  border-top-right-radius: 20px;
  border-left: 1px solid #d6d6d6;
}

.pdop_punch_col_sub--empty {
  padding: 0;
  background-color: transparent;
}

/* Table Data Rows */
.pdop_punch_row.master-table-row {
  display: grid;
  grid-template-columns: var(--table-label-size, 230px) 1fr;
  align-items: center;
  gap: 8px;
}

.no-data{
  display: none;
}

.pdop_punch_row_label.master-table-row-label {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  font-weight: var(--fw-semibold, 600);
  font-size: var(--body-medium, 18px);
  background: var(--color-pill-bg, #e2f8ff);
  color: var(--color-pill-text, #2b3c73);
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.06);
  /* margin-block: 5px; */
  margin-right: -8px;
  position: relative;
}

.pdop_punch_row_label.master-table-row-label::before{
  content: "";
  position: absolute;
  width: 390%;
  left: 100%;
  height: 100%;
  background: inherit;
  box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.06);
  border-radius: 0 50px 50px 0;
  /* max-width: 100%; */
}

.master-table-row-categories-grid {
  display: grid;
  grid-template-columns: repeat(var(--total-cats, 1), minmax(0, 1fr));
  gap: 8px;
}

/* Cell Inner Container Groups */
.pdop_punch_cell_inner.master-table-cell-group {
  border-left: 1px solid #d6d6d6;
  border-right: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  background-color: var(--color-white, #ffffff);
  height: 100%;
}

.pdop_punch_cell_inner_first {
  border-top: 1px solid #d6d6d6;
}

.pdop_punch_cell_inner_last {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Individual Data Cells */
.pdop_punch_cell.master-table-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 10px;
  text-align: center;
  font-size: var(--body-large, 20px);
  border-left: 1px solid #d6d6d6;
  position: relative;
  min-height: 90px;
  /* background-color: var(--color-white, #ffffff); */
}

.pdop_punch_cell_two_col > .pdop_punch_cell:first-child,
.pdop_punch_cell.master-table-cell:first-child {
  border-left: 0;
}

.master-table-cell-price {
  font-size: var(--body-large, 20px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-black, #000000);
  line-height: 1.25;
}

.master-table-cell-details {
  font-size: var(--body-small, 14px);
  font-weight: var(--fw-regular, 400);
  color: var(--color-black, #000000);
  line-height: 1.5;
  text-align: left;
  margin-top: 4px;
}

/* Detailed Mode Specific Adjustments */
.master-table--detailed .pdop_punch_cell.master-table-cell {
  align-items: flex-start;
  text-align: left;
  padding: 20px 16px;
}

.master-table--detailed .master-table-cell-price {
  font-size: var(--body-medium, 18px);
  white-space: nowrap;
}

/* CTA Links & Buttons */
.master-table-cta-link {
  font-size: var(--body-base, 16px);
  font-weight: var(--fw-bold, 700);
  color: var(--color-accent-sky, #009ad0);
  text-decoration: underline;
  text-underline-position: from-font;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.master-table-cta-link:hover {
  text-decoration: underline;
}

.master-table-cta-link svg {
  transition: transform 0.2s ease;
}

.master-table-cta-link:hover svg {
  transform: translateX(3px);
}

/* No Data Helpers */
.no-data:empty:not(.master-table-row-label-spacer),
div.no-data:empty:not(.master-table-row-label-spacer) {
  display: none;
}

.master-table-row-label-spacer {
  display: block !important;
  width: var(--table-label-size, 230px) !important;
  min-width: var(--table-label-size, 230px) !important;
  flex-shrink: 0 !important;
}


/* ==========================================================================
   AI / DEVELOPER GUIDELINES: RESPONSIVE MEDIA QUERIES
   --------------------------------------------------------------------------
   - ALL media queries are consolidated at the bottom of this stylesheet.
   ========================================================================== */

/* Tablet Screens (<= 992px) */
@media screen and (max-width: 992px) {
  .master-table-blocks-container {
    flex-direction: column;
  }

  .pdop_punch_top_banner_row,
  .pdop_punch_group_row_main,
  .pdop_punch_row.master-table-row {
    grid-template-columns: 180px 1fr;
  }

  .master-table-row-label-spacer {
    width: 180px;
  }

  .pdop_punch_row_label.master-table-row-label {
    padding: 12px 14px;
    font-size: var(--body-base, 16px);
  }

  .pdop_punch_cell.master-table-cell {
    padding: 16px 8px;
  }
}

/* Mobile Screens (<= 768px) */
@media screen and (max-width: 768px) {
  .pdop_punch_top_banner_row,
  .pdop_punch_group_row_main,
  .pdop_punch_row.master-table-row {
    grid-template-columns: 140px 1fr;
  }

  .master-table-row-label-spacer {
    width: 140px;
  }

  .pdop_punch_table.master-table {
    min-width: 580px;
  }

  .pdop_punch_row_label.master-table-row-label {
    padding: 10px 12px;
    font-size: var(--body-small, 14px);
  }

  .pdop_punch_col_title {
    font-size: var(--body-medium, 16px);
  }

  .pdop_punch_col_sub.master-table-subheader-cell {
    padding: 8px 6px;
    font-size: 13px;
  }

  .master-table-cell-price {
    font-size: var(--body-medium, 16px);
  }

  .master-table-cta-link {
    font-size: var(--body-small, 14px);
  }
}

/* Small Mobile Screens (<= 480px) */
@media screen and (max-width: 480px) {
  .pdop_punch_top_banner_row,
  .pdop_punch_group_row_main,
  .pdop_punch_row.master-table-row {
    grid-template-columns: 120px 1fr;
  }

  .master-table-row-label-spacer {
    width: 120px;
  }

  .pdop_punch_row_label.master-table-row-label {
    font-size: 12px;
    padding: 8px 10px;
  }
}