/* frontend/site/pricing.css, the pricing table of
 * docs/redesign/prototype/Pricing.dc.html, on the home page and on /pricing/.
 *
 * Every colour, curve and duration is a token on site.css's :root, so the
 * dark cappuccino theme follows with no second pass. The featured Сѐ вклучено
 * column is marked by structure alone, an inverted head and a faint tint with
 * hairline edges down the column, and never by the accent colour.
 *
 * BUILD.md rule 2 lets only transform, opacity, filter and clip-path animate,
 * which is why a hover fades an overlay rather than a background and a check
 * draws by clip-path rather than by its stroke.
 */

.site-pricing {
  padding-block: clamp(56px, 8vw, 110px) clamp(48px, 7vw, 100px);
}

/* Under a hero the table sits in a section of someone else's page, so it
   brings its own space above and below. */
.pricing-shell[data-source="home"] {
  padding-block: clamp(64px, 9vw, 120px);
}

/* On /pricing/ the table opens the page, under the fixed header. */
.site-pricing.is-page {
  padding-top: calc(var(--header-h) + clamp(32px, 5vw, 72px));
}

.pricing-shell {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-family: var(--font-body);
  color: var(--ink);
}

.pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
  flex-wrap: wrap;
}

.pricing-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 700px;
}

/* Two classes, so the heading outranks site.css's .site-pricing h2 rule,
   which centres the old cards' heading. */
.pricing-shell .pricing-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: start;
}

.pricing-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink2);
}

.pricing-col-cta:focus-visible,
.pricing-addon-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* The panel leaving and the panel arriving share one grid cell for the
   length of the crossfade, so they overlap instead of stacking. */
.pricing-panels {
  display: grid;
}

.pricing-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
  transition:
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
}

.pricing-panel[hidden] {
  display: none;
}

.pricing-panel.is-entering {
  opacity: 0;
  transform: translateY(6px);
}

.pricing-panel.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.pricing-sheet {
  border-radius: 20px;
  background: var(--surface);
  box-shadow:
    0 0 0 1px var(--line),
    0 30px 60px -40px color-mix(in srgb, var(--night) 35%, transparent);
  overflow: hidden;
}

.pricing-matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* The prototype's 1.5 to 1 to 1 to 1 grid, as a share of the table. */
.pricing-matrix-label {
  width: 33.333%;
}

.pricing-matrix th {
  font-weight: inherit;
  text-align: start;
}

.pricing-note {
  padding: 30px 24px;
  vertical-align: bottom;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* A name or a line that wraps in one language and not another would drop
   one price below its neighbours, so each head fills its cell and sets the
   price and the button at its foot. A table cell only passes its height to
   a child when the cell itself has a height, which the 1px gives, since a
   cell grows to its row whatever height it is set to. */
.pricing-matrix thead th {
  height: 1px;
  vertical-align: top;
}

.pricing-col {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 22px 24px;
}

.pricing-matrix thead th.is-featured,
.pricing-phone-card.is-featured {
  background: var(--ink);
  color: var(--bg);
}

.pricing-col-badge {
  min-height: 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.is-featured .pricing-col-badge {
  color: color-mix(in srgb, var(--bg) 72%, transparent);
}

/* Sized so the longest name, Дигитална покана, holds one line from about
   1200 pixels up, which keeps the three prices on one baseline. */
.pricing-col-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.75vw, 26px);
  line-height: 1.1;
}

.pricing-col-for {
  min-height: 40px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.8;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: lining-nums tabular-nums;
}

.pricing-price-figure,
.pricing-price.is-placeholder {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1;
}

.pricing-price-unit {
  font-size: 13px;
}

.pricing-price-euro {
  font-size: 13px;
  opacity: 0.7;
}

/* Two lines are kept in every column, so the featured one's line wrapping
   at a narrow width does not lift its price above the other two. */
.pricing-col-separately {
  min-height: calc(2 * 1.4em);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.75;
  font-variant-numeric: lining-nums tabular-nums;
}

.pricing-col-cta,
.pricing-addon-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: transform var(--dur-press) var(--ease-out);
}

.pricing-col-cta {
  min-height: 48px;
}

.is-featured .pricing-col-cta {
  background: var(--bg);
  color: var(--ink);
  box-shadow: none;
}

.pricing-col-cta:active,
.pricing-addon-cta:active {
  transform: scale(0.96);
}

.pricing-moment {
  background: var(--bg2);
  border-top: 1px solid var(--line);
}

.pricing-moment th {
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: 20px;
}

.pricing-feature {
  border-top: 1px solid var(--line);
}

.pricing-feature th {
  padding: 15px 20px 15px 24px;
}

.pricing-feature-label,
.pricing-feature-hint {
  display: block;
}

.pricing-feature-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.pricing-feature-hint {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

.pricing-feature td {
  padding: 15px 20px;
  text-align: center;
  vertical-align: middle;
}

.pricing-matrix tbody .is-featured {
  background: color-mix(in srgb, var(--ink) 2.5%, transparent);
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--ink) 12%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
}

.pricing-mark {
  display: inline-flex;
  vertical-align: middle;
}

.pricing-mark.is-no {
  width: 14px;
  height: 1.5px;
  background: var(--line);
}

/* The checks draw in once, the first time the table is seen, left to right
   across the columns and down through the moments. pricing.js adds
   will-draw only where motion is allowed, so without it, or without the
   script, every check is simply there. A panel hidden at that moment has no
   box to animate, so it shows its checks already drawn when it is chosen. */
.pricing-shell.will-draw .pricing-check {
  clip-path: inset(0 100% 0 0);
}

.pricing-shell.will-draw.is-drawn .pricing-check {
  clip-path: inset(0);
  transition: clip-path var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--pricing-col-delay, 0ms) + var(--pricing-moment-delay, 0ms));
}

.pricing-matrix [data-col="2"],
.pricing-phone-card:nth-child(2) {
  --pricing-col-delay: 100ms;
}

.pricing-matrix [data-col="3"],
.pricing-phone-card:nth-child(3) {
  --pricing-col-delay: 200ms;
}

.pricing-matrix tbody:nth-of-type(2) {
  --pricing-moment-delay: 100ms;
}

.pricing-matrix tbody:nth-of-type(3) {
  --pricing-moment-delay: 200ms;
}

/* A column lights as one piece under the pointer. The tint is an overlay in
   the cell's own text colour, so it darkens a light cell and lightens the
   inverted head of the featured column alike. */
@media (hover: hover) {
  .pricing-matrix [data-col] {
    position: relative;
  }

  .pricing-matrix [data-col]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-hover) var(--ease-out);
  }

  .pricing-matrix:has([data-col="1"]:hover) [data-col="1"]::after,
  .pricing-matrix:has([data-col="2"]:hover) [data-col="2"]::after,
  .pricing-matrix:has([data-col="3"]:hover) [data-col="3"]::after {
    opacity: 0.035;
  }
}

.pricing-phone {
  display: none;
}

/* Сѐ вклучено as an offer, a short receipt of what it replaces: each
   package at its own price, the sum, then the bundle. */
.pricing-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px 40px;
  align-items: start;
}

.pricing-offer-for {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
}

.pricing-offer-stack {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink2);
}

.pricing-offer-stack li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.pricing-offer-amount {
  flex: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.pricing-offer-stack .is-sum {
  color: var(--ink);
}

.pricing-offer-stack .is-total {
  color: var(--ink);
  font-weight: 600;
  border-top-color: var(--ink);
}

.pricing-guests {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
  padding: 24px 28px;
  border-radius: 16px;
  background: var(--bg2);
}

.pricing-premium,
.pricing-guests-result,
.pricing-guests-note {
  grid-column: 1 / -1;
  margin: 0;
}

.pricing-premium {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.35;
}

.pricing-guests-label {
  font-size: 14px;
  font-weight: 500;
}

.pricing-guests-input {
  justify-self: start;
  width: 7em;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.pricing-guests-input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.pricing-guests-result {
  font-size: 16px;
  color: var(--ink);
  transition: opacity var(--dur-hover) ease;
}
/* The last answer, while the box holds a count it does not accept. */
.pricing-guests-result.is-stale { opacity: .4; }

.pricing-guests-note {
  font-size: 13px;
  color: var(--ink2);
}

.pricing-contact {
  margin: 16px 0 0;
  color: var(--ink2);
}

.pricing-addons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-addons-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
}

.pricing-addons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pricing-addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: 26px 28px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line);
}

.pricing-addon-name {
  font-family: var(--font-display);
  font-size: 24px;
}

.pricing-addon .pricing-price {
  justify-content: flex-end;
}

.pricing-addon .pricing-price-figure,
.pricing-addon .pricing-price.is-placeholder {
  font-size: 30px;
}

.pricing-addon-what {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink2);
}

.pricing-addon-cta {
  min-height: 42px;
  padding: 0 18px;
}

.pricing-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink2);
}

.pricing-foot-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.pricing-foot-note b {
  font-weight: 600;
  color: var(--ink);
}

/* Below this width three priced columns no longer fit beside their labels,
   so the table gives way to one card per package, the featured one first. */
@media (max-width: 860px) {
  .pricing-shell,
  .pricing-panel {
    gap: 28px;
  }

  .pricing-head {
    align-items: stretch;
  }

  .pricing-sheet {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .pricing-matrix {
    display: none;
  }

  .pricing-phone {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pricing-phone-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 20px;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
  }

  .pricing-phone-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
  }

  .pricing-phone-rows li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    font-size: 14px;
    line-height: 1.4;
  }

  .pricing-phone-rows .pricing-mark {
    flex: none;
    width: 20px;
    justify-content: center;
  }

  .pricing-phone-rows .pricing-mark.is-no {
    width: 14px;
    margin-inline: 3px;
  }

  .is-featured .pricing-mark.is-no {
    background: color-mix(in srgb, var(--bg) 30%, transparent);
  }

  .pricing-col-for {
    min-height: 0;
  }

  .pricing-phone-card .pricing-col-badge:empty,
  .pricing-phone-card .pricing-col-separately:empty {
    display: none;
  }

  .pricing-addons-grid,
  .pricing-foot,
  .pricing-offer {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-guests {
    padding: 20px;
  }

  .pricing-addon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 20px;
  }

  .pricing-addon .pricing-price {
    justify-content: flex-start;
  }

  /* pricing.js moves the page's questions in under the cards at this width,
     where the panel already gives the gutter and the spacing. */
  .pricing-panel .site-faq {
    padding-block: 0;
  }

  .pricing-panel .site-faq .wrap {
    padding-inline: 0;
  }
}

/* On a phone no text is under 14 pixels and every control is at least 44
   pixels each way, the floor site.css sets for the whole site. */
@media (max-width: 699px) {
  .pricing-col-badge,
  .pricing-col-for,
  .pricing-price-unit,
  .pricing-price-euro,
  .pricing-col-separately,
  .pricing-guests-note,
  .pricing-addon-what,
  .pricing-foot {
    font-size: 14px;
  }

}

/* The add-on's button is pressed with a thumb on a tablet or on a phone
   showing the desktop layout too, so its floor follows the pointer. */
@media (max-width: 699px), (hover: none) and (pointer: coarse) {
  .pricing-addon-cta {
    min-height: 44px;
  }
}

/* Under reduced motion the switch between families is an immediate swap and
   presses stay put. pricing.js already skips the fade and the check drawing,
   so this only stills what CSS would still move. */
@media (prefers-reduced-motion: reduce) {
  .pricing-panel,
  .pricing-col-cta,
  .pricing-addon-cta {
    transition: none;
  }
}

.pricing-col .pricing-price {
  margin-top: auto;
}