/* ==========================================================================
   Pricing switcher + plan cards — Consent-cluster shared component.
   Linked (after site.css + inner.css) by /consent/ and reused by
   /consent_mode_v2. Period toggle behaviour lives in /js/pricing-toggle.js;
   this file is presentation only. Tokens come from site.css.
   ========================================================================== */

:root { --teal: #14A08C; }   /* plan-card accent (Starter / Pro / Pro+) */

/* --------------------------------------------------- period switcher (T395) */
.price-switch {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #D7DEE8;
  border-radius: 40px;
  padding: 4px;
}
.price-switch__opt {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  padding: 11px 30px;
  border-radius: 40px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.price-switch__opt.is-active {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* --------------------------------------------------------- plan-card grid */
/* On the live page every plan card is a fixed-size Tilda artboard element
   (224x671 with a 178px coloured header), so the five headers share a bottom
   edge and the five cards share a bottom edge. The rebuild sized both from
   content (`align-items: start` + auto-height header), so headers and card
   bottoms stepped up and down with the amount of text — and differently again
   per language and per billing period. `subgrid` reproduces the live result
   without hard-coding heights: head / body / foot become three shared grid
   rows, so they line up whatever the copy length. */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid #E1E7F0;
  border-radius: 16px;
  overflow: hidden;
}

@supports (grid-template-rows: subgrid) {
  @media screen and (min-width: 1101px) {
    .pricing-cards { grid-template-rows: auto 1fr auto; }
    .pcard { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  }
}
.pcard--teal { border-color: var(--teal); }

/* card header */
.pcard__head {
  padding: 26px 22px 24px;
  text-align: center;
  border-bottom: 1px solid #EEF1F6;
}
.pcard--teal .pcard__head {
  background: var(--teal);
  border-bottom: 0;
  color: #fff;
}
.pcard__name { font-size: 24px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.pcard--teal .pcard__name { color: #fff; }

.pcard__price {
  /* center the two-line Site/month label against the tall amount digit */
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 0 10px;
}
.pcard__amount { font-size: 46px; font-weight: 700; line-height: 1; color: var(--navy); }
.pcard--teal .pcard__amount { color: #fff; }
.pcard__per { font-size: 15px; line-height: 1.1; font-weight: 400; text-align: left; }
.pcard--teal .pcard__per { color: #fff; }
.pcard__per { color: var(--body); }

/* Free "Up to 1 site" atom */
.pcard__sites { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 10px; }
.pcard__sites .num { font-size: 44px; font-weight: 600; line-height: 1; color: var(--navy); }
.pcard__sites .lbl, .pcard__sites .pre { font-size: 16px; color: var(--body); }

.pcard__cap { font-size: 15px; line-height: 1.4; color: var(--body); margin: 0; }
.pcard--teal .pcard__cap { color: rgba(255,255,255,.92); }

/* card body */
.pcard__body { padding: 22px 22px 8px; flex: 1 1 auto; }
.pcard__plus { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 14px; }
.pcard__list { list-style: none; margin: 0; padding: 0; }
.pcard__list li {
  position: relative; padding-left: 16px; margin-bottom: 9px;
  font-size: 15px; line-height: 1.4; color: var(--body);
}
.pcard__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--navy);
}

/* card footer */
.pcard__foot { padding: 12px 22px 26px; text-align: center; }
.pcard__foot .pill-btn {
  min-width: 150px;
  /* long labels ("Obtener un presupuesto") must wrap inside the card: the
     global .pill-btn `white-space: nowrap` made the button's min-content
     wider than the 5-up desktop card, which blew the subgrid column open and
     clipped the Enterprise card body at its right edge (ES/IT/PT) */
  max-width: 100%;
  white-space: normal;
  padding-left: 16px;
  padding-right: 16px;
}
/* `Compare plans` always sits on its own line under the button. Both are
   inline-level (.pill-btn is inline-flex), so they only wrapped because the
   5-up desktop card is too narrow to hold them side by side; on the 1- and
   2-column layouts the card is wide enough and they lined up next to each
   other instead (T-mobile bug). `display: block` makes the stack explicit at
   every width; `width: max-content` + auto margins keep the link centred and
   its hover/underline box text-width, so desktop metrics are unchanged. */
.pcard__compare {
  display: block; width: max-content; margin: 16px auto 0;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; text-decoration: none; color: var(--navy);
}
.pcard__compare:hover { color: var(--red); }

/* period visibility (default = annual) */
.price-monthly { display: none; }
.pricing.show-monthly .price-annual { display: none; }
.pricing.show-monthly .price-monthly { display: inline; }

/* --------------------------------------------------------------- responsive */
@media screen and (max-width: 1100px) {
  .pricing-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media screen and (max-width: 560px) {
  .pricing-cards { grid-template-columns: 1fr; gap: 20px; max-width: 420px; margin: 0 auto; }
  .price-switch__opt { font-size: 16px; padding: 10px 20px; }
  /* one card per row: the live page stretches the pill across the card's
     content box (260px inside a 300px card) instead of leaving it at its
     desktop min-width */
  .pcard__foot .pill-btn { display: flex; }
}
/* Narrow phones: the switch is `white-space: nowrap` by design and the EN
   labels ("Annually (Save 20%)" / "Monthly") fit, but the IT ones ("Annuale
   (Risparmia il 20%)" / "Mensile") measured 363px against the 324px content
   box at a 360px viewport, so /consent/ and /consent_mode_v2/ scrolled
   sideways. One more type/padding step brings it to ~305px; `flex-wrap` is a
   safety net so an even longer future translation stacks instead of
   overflowing. */
@media screen and (max-width: 420px) {
  .price-switch { max-width: 100%; flex-wrap: wrap; justify-content: center; }
  .price-switch__opt { font-size: 14px; padding: 10px 14px; }
}