/* =====================================================================
   BroadbandSwitch.uk  |  deal-check.css  |  v1.0.0  |  28 September 2026
   Styles for the "Check availability" postcode dialog on /broadband-deals/
   and the matching note above the live results on /compare/.
   Paired with /assets/js/deal-check.js.  Brand: #E50571 / #B00457 / #191621.
   ===================================================================== */

/* ---------- page lock while the dialog is open ---------- */
html.bsw-dc-open { overflow: hidden; }

/* ---------- deals page: keep wide tables inside their own box ----------
   A 2026 "table hotfix" in the page's inline styles set .table-scroll to
   overflow-x: visible.  The network-specific social tariffs table inside it
   is 940px wide, so on phones it pushed the whole page to about 980px wide
   (sideways scrolling, and fixed elements such as this dialog sized to the
   wider page).  Letting that one box scroll sideways fixes the page width.
   Only .table-scroll is affected; the main deals tables use .deals-table-wrap. */
body .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- deals page: every "Check availability" button fully usable ----------
   Phones (card layout): the same inline hotfix gives the button cell
   width: 1% and white-space: nowrap, which squeezed the button to a 28px
   pink stub reading "Ch" (the rest of the white text was invisible and
   could not be tapped).  On phones the button now spans the card.
   Tablets and small laptops: the table is wider than its box, so the
   button column sat off to the right.  It now stays pinned to the right
   edge of the box while the rest of the table scrolls. */
@media (max-width: 760px) {
  html body #deals-table tbody td:last-child,
  html body .deals-table-social tbody td:last-child {
    display: block;
    width: auto;
    white-space: normal;
    text-align: center;
    padding: 0.55rem 0.2rem 0.2rem;
  }
  html body #deals-table tbody td:last-child::before,
  html body .deals-table-social tbody td:last-child::before { content: none; display: none; }
  html body #deals-table a.deal-cta,
  html body .deals-table-social a.deal-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    line-height: 1.2;
    border-radius: 8px;
    white-space: normal;
    text-align: center;
  }
}
/* Tablets and small laptops: tighten the table so all nine columns,
   including First year cost and the button, fit without sideways scrolling. */
@media (min-width: 761px) and (max-width: 1179px) {
  html body #deals-table th,
  html body #deals-table td { padding-left: 6px; padding-right: 6px; }
  html body #deals-table th { white-space: normal; }
  html body #deals-table td:nth-child(2) { min-width: 8.5rem; }
  html body #deals-table td:last-child { white-space: normal; width: 7rem; }
  html body #deals-table a.deal-cta {
    display: inline-block;
    white-space: normal;
    line-height: 1.2;
    padding: 7px 10px;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  html body #deals-table { font-size: 0.8rem; }
  html body #deals-table th,
  html body #deals-table td { padding-left: 4px; padding-right: 4px; }
  html body #deals-table th { font-size: 0.66rem; letter-spacing: 0.03em; }
  html body #deals-table td:nth-child(2) { min-width: 7.5rem; }
  html body #deals-table td:nth-child(7) { min-width: 4.9rem; }
  html body #deals-table td:last-child { width: 6.2rem; }
  html body #deals-table a.deal-cta { padding: 7px 8px; font-size: 0.78rem; }
}
/* If a future month's deal names make the table wider than its box, the
   button column stays pinned to the right edge while the rest scrolls. */
@media (min-width: 761px) {
  html body #deals-table thead th:last-child,
  html body #deals-table tbody td:last-child {
    position: sticky;
    right: 0;
    box-shadow: inset 1px 0 0 #E9E3EE;
  }
  html body #deals-table thead th:last-child { z-index: 3; }
  html body #deals-table tbody td:last-child { z-index: 1; background-color: #FFFFFF; }
  html body #deals-table tbody tr:nth-child(even) td:last-child { background-color: #FAFAFA; }
  html body #deals-table tbody tr:hover td:last-child { background-color: #FDF2F7; }
  html[data-bbsa-theme]:not([data-bbsa-theme="default"]) body #deals-table tbody td:last-child,
  html[data-bbsa-theme]:not([data-bbsa-theme="default"]) body #deals-table thead th:last-child {
    background-color: var(--bbsa-bg, #0E1116) !important;
  }
}

/* ---------- dialog shell ---------- */
.bsw-dc {
  --dc-brand: #E50571;
  --dc-brand-dark: #B00457;
  --dc-brand-soft: #FDEBF3;
  --dc-ink: #191621;
  --dc-ink-soft: #4A4458;
  --dc-line: #E9E3EE;
  --dc-paper: #FFFFFF;
  --dc-paper-warm: #FAF8FB;
  --dc-error: #B3261E;

  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 460px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--dc-ink);
  overflow: visible;
  font-family: inherit;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
.bsw-dc.is-in { opacity: 1; transform: none; }
.bsw-dc::backdrop { background: rgba(25, 22, 33, 0.58); }
.bsw-dc *, .bsw-dc *::before, .bsw-dc *::after { box-sizing: border-box; }

.bsw-dc__panel {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 24px 20px;
  background: var(--dc-paper);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(25, 22, 33, 0.28), 0 2px 6px rgba(25, 22, 33, 0.12);
}

/* ---------- close ---------- */
.bsw-dc__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dc-ink-soft);
  cursor: pointer;
}
.bsw-dc__x:hover { background: #F3EEF6; color: var(--dc-ink); }
.bsw-dc__x:focus-visible { outline: 3px solid var(--dc-ink); outline-offset: 2px; }

/* ---------- heading ---------- */
.bsw-dc__title:focus { outline: none; }
.bsw-dc__title {
  margin: 2px 44px 14px 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--dc-ink);
}

/* ---------- the deal they picked ---------- */
.bsw-dc__deal {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--dc-paper-warm);
  border: 1px solid var(--dc-line);
  border-left: 4px solid var(--dc-brand);
  border-radius: 12px;
}
.bsw-dc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
}
.bsw-dc__provider { font-size: 1.02rem; font-weight: 800; color: var(--dc-ink); }
.bsw-dc__tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bsw-dc__tag--altnet { background: #FDE3EF; color: #A1045A; }
.bsw-dc__tag--big { background: #E7E5EF; color: #3B3550; }
.bsw-dc__tag--mobile { background: #E0F2F1; color: #00584F; }
.bsw-dc__tag--other { background: #EFEDF3; color: #3B3550; }
.bsw-dc__tag[hidden], .bsw-dc__gift[hidden], .bsw-dc__err[hidden] { display: none; }

.bsw-dc__name { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--dc-ink); }
.bsw-dc__gift { margin: 4px 0 0; font-size: 0.84rem; font-weight: 700; color: #A1045A; }

.bsw-dc__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--dc-line);
}
.bsw-dc__facts div { min-width: 0; }
.bsw-dc__facts dt {
  margin: 0 0 2px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dc-ink-soft);
}
.bsw-dc__facts dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--dc-ink);
  font-variant-numeric: tabular-nums;
}
.bsw-dc__sub {
  display: block;
  margin-top: 1px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--dc-ink-soft);
}

/* ---------- why + form ---------- */
.bsw-dc__why {
  margin: 0 0 16px;
  font-size: 0.93rem;
  color: var(--dc-ink-soft);
}
.bsw-dc__form { margin: 0 0 16px; }
.bsw-dc__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--dc-ink);
}
.bsw-dc__row { display: flex; flex-wrap: wrap; gap: 10px; }
.bsw-dc__input {
  flex: 1 1 170px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 1.05rem; /* 16px or more stops iOS zooming in */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dc-ink);
  background: var(--dc-paper);
  border: 2px solid #CFC6D8;
  border-radius: 10px;
}
.bsw-dc__input::placeholder { color: #6F6880; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 1; }
.bsw-dc__input:focus { outline: none; border-color: var(--dc-brand); box-shadow: 0 0 0 3px rgba(229, 5, 113, 0.22); }
.bsw-dc__input[aria-invalid="true"] { border-color: var(--dc-error); }

.bsw-dc__go {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 20px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--dc-brand);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.bsw-dc__go:hover { background: var(--dc-brand-dark); color: #FFFFFF; }
.bsw-dc__go:focus-visible { outline: 3px solid var(--dc-ink); outline-offset: 2px; }
.bsw-dc__go:disabled { background: var(--dc-brand-dark); color: #FFFFFF; cursor: progress; }

.bsw-dc__err {
  margin: 8px 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--dc-error);
}

/* ---------- straight to the provider ---------- */
.bsw-dc__direct {
  margin: 0;
  padding: 12px 14px;
  background: var(--dc-paper-warm);
  border: 1px solid var(--dc-line);
  border-radius: 12px;
}
.bsw-dc__direct p { margin: 0; font-size: 0.88rem; color: var(--dc-ink-soft); }
.bsw-dc__direct-link {
  font-weight: 800;
  color: var(--dc-brand-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bsw-dc__direct-link:hover { color: var(--dc-ink); }
.bsw-dc__direct-link:focus-visible { outline: 3px solid var(--dc-ink); outline-offset: 2px; border-radius: 3px; }
.bsw-dc__direct .bsw-dc__small { margin-top: 6px; font-size: 0.76rem; color: var(--dc-ink-soft); }

/* ---------- phones: a bottom sheet ---------- */
@media (max-width: 600px) {
  .bsw-dc {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px 18px 0 0;
    transform: translateY(24px);
  }
  .bsw-dc.is-in { transform: none; }
  .bsw-dc__panel {
    border-radius: 18px 18px 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .bsw-dc__panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: -8px auto 12px;
    border-radius: 999px;
    background: #D9D2E0;
  }
  .bsw-dc__x { top: 10px; right: 8px; }
  .bsw-dc__title { font-size: 1.18rem; }
  .bsw-dc__go { flex: 1 1 100%; padding: 14px 20px; }
  .bsw-dc__facts { gap: 8px; }
  .bsw-dc__facts dd { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bsw-dc, .bsw-dc.is-in { transition: none; transform: none; }
}
html[data-bbsa-motion="1"] .bsw-dc { transition: none !important; transform: none !important; }

/* ---------- note above the live results on /compare/ ---------- */
.bsw-dcb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 12px 14px 16px;
  background: #FDEBF3;
  border: 1px solid #F6C6DC;
  border-left: 4px solid #E50571;
  border-radius: 12px;
  color: #191621;
  font-family: inherit;
  line-height: 1.45;
  text-align: left;
}
.bsw-dcb__icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: #B00457; }
.bsw-dcb__body { flex: 1 1 auto; min-width: 0; }
.bsw-dcb__title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: #191621; }
.bsw-dcb__title strong { font-weight: 800; white-space: nowrap; }
.bsw-dcb__text { margin: 0; font-size: 0.92rem; font-weight: 500; color: #3F394C; }
.bsw-dcb__x {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: -6px -2px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #3F394C;
  cursor: pointer;
}
.bsw-dcb__x:hover { background: rgba(229, 5, 113, 0.12); color: #191621; }
.bsw-dcb__x:focus-visible { outline: 3px solid #191621; outline-offset: 2px; }
@media (max-width: 600px) {
  .bsw-dcb { gap: 10px; padding: 12px 8px 12px 12px; }
  .bsw-dcb__title { font-size: 0.95rem; }
  .bsw-dcb__text { font-size: 0.87rem; }
}

/* ---------- accessibility widget themes (dark, high contrast, cream) ----------
   The site's accessibility tools recolour pages with their own variables.
   These rules colour every part of the dialog and the note from those
   variables directly, so they read correctly in every theme. */
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__panel {
  background-color: var(--bbsa-surf, #171C24) !important;
  border: 2px solid var(--bbsa-line, #39424F) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__deal,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__direct,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb {
  background-color: var(--bbsa-surf2, #212936) !important;
  border-color: var(--bbsa-line, #39424F) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__title,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__provider,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__name,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__facts dd,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__label,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__err,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__x,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__tag,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb__title,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb__title strong,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb__icon,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb__x {
  color: var(--bbsa-fg, #F5F7FA) !important;
  -webkit-text-fill-color: var(--bbsa-fg, #F5F7FA) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__facts dt,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__sub,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__gift,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__why,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__direct p,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__direct span,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb__text {
  color: var(--bbsa-fg2, #C6CDD8) !important;
  -webkit-text-fill-color: var(--bbsa-fg2, #C6CDD8) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__direct-link {
  color: var(--bbsa-link, #FF8AB8) !important;
  -webkit-text-fill-color: var(--bbsa-link, #FF8AB8) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__tag,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__x,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb__x,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb__icon {
  background: transparent !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__tag {
  border: 1px solid var(--bbsa-line, #39424F) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__input {
  background-color: var(--bbsa-surf2, #212936) !important;
  color: var(--bbsa-fg, #F5F7FA) !important;
  -webkit-text-fill-color: var(--bbsa-fg, #F5F7FA) !important;
  border: 2px solid var(--bbsa-line, #39424F) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__input::placeholder {
  color: var(--bbsa-fg2, #C6CDD8) !important;
  -webkit-text-fill-color: var(--bbsa-fg2, #C6CDD8) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__go {
  background-color: var(--bbsa-cta, #E50571) !important;
  color: var(--bbsa-cta-fg, #FFFFFF) !important;
  -webkit-text-fill-color: var(--bbsa-cta-fg, #FFFFFF) !important;
  border: 2px solid var(--bbsa-cta, #E50571) !important;
}
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__go:focus-visible,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__x:focus-visible,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dcb__x:focus-visible,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__direct-link:focus-visible,
html[data-bbsa-theme]:not([data-bbsa-theme="default"]) .bsw-dc__input:focus {
  outline: 3px solid var(--bbsa-ring, #FFD400) !important;
  outline-offset: 2px;
}