/* Pricing page — mobile / tablet layout (site chrome + fluid grids) */

/*
  Important: do NOT set overflow-x:hidden on both html and body.
  That forces overflow-y:auto on both and creates nested scrollports,
  so mobile can keep scrolling into empty white space past the footer.
*/
html {
  overflow-x: clip;
  overflow-y: scroll;
  max-width: 100%;
}

body {
  overflow: visible;
  max-width: 100%;
}

#top,
#top > section,
.pricing-inner {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.pricing-cards,
.pricing-detail-grid,
.pricing-incluso-grid {
  width: 100%;
  min-width: 0;
}

/* Closed mobile drawer must not expand scroll width */
#drawer.translate-x-full {
  pointer-events: none;
}

.pricing-compare-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 901px) {
  .pricing-compare-scroll {
    overflow-x: auto;
  }
}

/* Table custom elements: keep table layout even before DS upgrade */
#confronto .pricing-compare-table,
#confronto sc-raw-table.pricing-compare-table {
  display: table;
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}
#confronto .pricing-compare-table thead,
#confronto sc-raw-thead { display: table-header-group; }
#confronto .pricing-compare-table tbody,
#confronto sc-raw-tbody { display: table-row-group; }
#confronto .pricing-compare-table tr,
#confronto sc-raw-tr { display: table-row; }
#confronto .pricing-compare-table th,
#confronto .pricing-compare-table td,
#confronto sc-raw-th,
#confronto sc-raw-td { display: table-cell; }
#confronto .pricing-compare-table caption,
#confronto sc-raw-caption { display: table-caption; }

/* Mobile: stack comparison as question cards (no horizontal scroll) */
@media (max-width: 900px) {
  #confronto .pricing-compare-scroll {
    overflow: visible !important;
    overflow-x: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: 18px;
  }

  #confronto .pricing-compare-table,
  #confronto sc-raw-table.pricing-compare-table,
  #confronto .pricing-compare-table tbody,
  #confronto .pricing-compare-table tr,
  #confronto .pricing-compare-table th,
  #confronto .pricing-compare-table td,
  #confronto sc-raw-tbody,
  #confronto sc-raw-tr,
  #confronto sc-raw-th,
  #confronto sc-raw-td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Screen-reader-only header: must NOT get width:100% or it overflows the page */
  #confronto .pricing-compare-table thead,
  #confronto sc-raw-thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    max-width: 1px !important;
    max-height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
    left: 0 !important;
    top: 0 !important;
  }

  #confronto .pricing-compare-table thead tr,
  #confronto .pricing-compare-table thead th,
  #confronto .pricing-compare-table thead td,
  #confronto sc-raw-thead sc-raw-tr,
  #confronto sc-raw-thead sc-raw-th,
  #confronto sc-raw-thead sc-raw-td {
    display: none !important;
    width: auto !important;
    max-width: none !important;
  }

  #confronto .pricing-compare-table tbody tr,
  #confronto sc-raw-tbody > sc-raw-tr {
    background: var(--white, #fff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
  }

  #confronto .pricing-compare-table tbody th[scope="row"],
  #confronto sc-raw-tbody sc-raw-th[scope="row"] {
    background: var(--grey-light, #f5f5f3) !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;
    font-size: 16px !important;
    line-height: 1.35;
  }

  #confronto .pricing-compare-table tbody td,
  #confronto sc-raw-tbody sc-raw-td {
    padding: 14px 18px 16px !important;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;
    color: var(--text-secondary, #555) !important;
    background: var(--white, #fff) !important;
    line-height: 1.5 !important;
  }

  #confronto .pricing-compare-table tbody td:last-child,
  #confronto sc-raw-tbody sc-raw-td:last-child {
    border-bottom: none !important;
  }

  #confronto .pricing-compare-table tbody td::before,
  #confronto sc-raw-tbody sc-raw-td::before {
    content: attr(data-label);
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary, #888);
    margin-bottom: 6px;
  }

  #confronto .pricing-compare-table tbody td.cmp-hive,
  #confronto sc-raw-tbody sc-raw-td.cmp-hive {
    background: var(--black, #1a1a1a) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  }

  #confronto .pricing-compare-table tbody td.cmp-hive::before,
  #confronto sc-raw-tbody sc-raw-td.cmp-hive::before {
    color: #62bdae;
  }
}

/* Icons grid: 2 columns from tablet down through mobile */
@media (max-width: 960px) {
  .pricing-incluso-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 0;
    row-gap: 0;
  }

  .pricing-incluso-grid > li {
    padding: 28px 16px 28px 0 !important;
    border-right: none !important;
  }

  .pricing-incluso-grid > li:nth-child(odd) {
    padding-right: 16px !important;
    border-right: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;
  }

  .pricing-incluso-grid > li:nth-child(even) {
    padding-left: 16px !important;
    padding-right: 0 !important;
  }

  .pricing-incluso-grid > li > span {
    max-width: none !important;
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  .pricing-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #modalita .pricing-inner {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
    gap: 22px !important;
  }

  #dettaglio .pricing-inner {
    padding-bottom: 56px !important;
  }

  #incluso .pricing-inner,
  #confronto .pricing-inner,
  #faq .pricing-inner {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  #chiusura .pricing-inner {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .pricing-toggle {
    display: flex !important;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
  }

  .pricing-toggle > button {
    flex: 1 1 0;
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 16px !important;
  }

  .pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .pricing-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  #faq button {
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 16px !important;
  }

  #faq .pricing-inner p {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .pricing-incluso-grid > li {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    gap: 14px !important;
  }
}

@media (max-width: 520px) {
  .pricing-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .pricing-incluso-grid > li:nth-child(odd) {
    padding-right: 12px !important;
  }

  .pricing-incluso-grid > li:nth-child(even) {
    padding-left: 12px !important;
  }

  .pricing-incluso-grid > li > span {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .pricing-toggle > button {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 16px !important;
  }

  #contact-title {
    font-size: 22px !important;
  }
}