/*
 * ESTEX shared price-table component
 *
 * This file is the single source of truth for the visual treatment of every
 * price table on the top, price and special pages. Page styles may control
 * only layout, column proportions and content typography. Calendar and
 * article tables are intentionally excluded.
 */

:root {
  --estex-price-table-radius: 12px;
  --estex-price-table-inset: 4px;
  --estex-price-table-cell-block: 12px;
  --estex-price-table-cell-inline: 14px;
  --estex-price-table-background: #fff;
  --estex-price-table-header-background: #e8e8e8;
}

/* Shared background-card layer. Page classes only provide dimensions and
   variables; the background, corner treatment and edge extension live here. */
.estex-table-surface {
  position: relative;
  background: var(--estex-table-surface-background, #fff);
  border-radius: var(--estex-table-surface-radius, 12px);
}

.estex-table-surface--edge::after {
  position: absolute;
  z-index: var(--estex-table-surface-bleed-z-index, auto);
  top: 0;
  bottom: 0;
  left: 100%;
  width: var(--estex-table-surface-bleed-width, 0px);
  background: var(--estex-table-surface-background, #fff);
  content: '';
  pointer-events: none;
}

/* Shared table component
   ----------------------
   Every price table uses the same three base classes in its HTML:
   .estex-table-frame > .estex-table-clip > .estex-table
   Page-specific classes are now reserved for layout, column widths and copy
   only. They no longer define a competing table outline. */

/* Remove the page-specific offset layers.  The single shared frame below is
   the only outline used by the top page, /price/ and /special/. */
.top-price-table__border {
  display: none !important;
  content: none !important;
}

.estex-table-frame {
  overflow: visible !important;
  border: 0 !important;
  border-radius: var(--estex-price-table-radius) !important;
  box-shadow: none !important;
}

/* Canonical ESTEX table edge. The right and bottom edges keep the original
   8px offset; the top and left edges sit 2px closer to the table. */
.estex-table-frame::before {
  position: absolute;
  z-index: 2;
  inset: -5px 8px 8px -5px;
  display: block !important;
  border: 1px solid #c8c8c8 !important;
  border-radius: var(--estex-price-table-radius) !important;
  content: '' !important;
  pointer-events: none;
}

.estex-table-clip {
  overflow: hidden !important;
  padding: var(--estex-price-table-inset) !important;
  border: 0 !important;
  border-radius: var(--estex-price-table-radius) !important;
  background: var(--estex-price-table-background) !important;
  box-shadow: none !important;
}

/* One plain table rule. Individual pages may still control column widths,
   copy alignment and text size, but not the visual table treatment. */
.estex-table {
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--estex-price-table-radius) !important;
  background: var(--estex-price-table-background) !important;
  box-shadow: none !important;
}

.estex-table > :is(thead, tbody) > tr > * {
  box-sizing: border-box;
  padding: var(--estex-price-table-cell-block) var(--estex-price-table-cell-inline) !important;
  border: 0 !important;
  border-right: 1px solid #c8c8c8 !important;
  border-bottom: 1px solid #c8c8c8 !important;
  border-radius: 0 !important;
  background: var(--estex-price-table-background) !important;
  vertical-align: middle;
}

/* Shared header treatment on every device and every page. */
.estex-table > thead > tr > th {
  background: var(--estex-price-table-header-background) !important;
  color: var(--top-ink, #2f2f2f) !important;
  font-weight: 700;
  text-align: center;
}

.estex-table > :is(thead, tbody) > tr > *:last-child {
  border-right: 0 !important;
}

.estex-table > tbody > tr:last-child > * {
  border-bottom: 0 !important;
}

/* Compact two-column service tables use one content treatment on /price/
   and /special/. Page CSS may change only the two column proportions. */
.estex-table--service > :is(thead, tbody) > tr > * {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}

.estex-table--service > thead > tr > th {
  font-weight: 700 !important;
  text-align: center !important;
}

.estex-table--service > tbody > tr > th {
  color: var(--top-ink, #2f2f2f) !important;
  text-align: left !important;
}

.estex-table--service > tbody > tr > td {
  color: var(--top-gold, #bca16a) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.estex-table--service > tbody > tr > td > strong {
  display: block !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.estex-table--service small {
  display: block !important;
  color: var(--top-muted, #777) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* Semantic cell classes used to bring their own left/right padding on the
   price page. Give every variant the component's padding instead. The two
   class selector deliberately matches the old page selectors' specificity,
   so this shared rule wins without relying on page-specific overrides. */
.estex-table :is(
  .top-price-table__menu,
  .top-price-table__menu--wide,
  .price-table__menu,
  .price-table__menu--wide,
  .price-table__menu--service
) {
  padding: var(--estex-price-table-cell-block) var(--estex-price-table-cell-inline) !important;
}

.estex-table > thead > tr:first-child > *:first-child {
  border-top-left-radius: calc(var(--estex-price-table-radius) - var(--estex-price-table-inset)) !important;
}

.estex-table > thead > tr:first-child > *:last-child {
  border-top-right-radius: calc(var(--estex-price-table-radius) - var(--estex-price-table-inset)) !important;
}

.estex-table > tbody > tr:last-child > *:first-child {
  border-bottom-left-radius: calc(var(--estex-price-table-radius) - var(--estex-price-table-inset)) !important;
}

.estex-table > tbody > tr:last-child > *:last-child {
  border-bottom-right-radius: calc(var(--estex-price-table-radius) - var(--estex-price-table-inset)) !important;
}

/* The compact viewport needs a tighter upper-left reveal around the table. */
@media (max-width: 767px) {
  .top-price-table-scroll.top-price-table-scroll {
    margin-top: -3px !important;
    padding-top: 6px !important;
  }

  .estex-table-frame::before {
    inset: -4px 8px 8px -4px;
  }

  .estex-table > thead > tr > th {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .estex-table--service > :is(thead, tbody) > tr > * {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .estex-table--service > tbody > tr > td > strong {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .estex-table--service small {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}