@layer components {

.pricing-page { padding: 16px 0; background: transparent; --card-w:315px; --gap:8px; --cols:4; }

/* Billing switch */
.billing-toggle { display: flex; justify-content: center; margin-bottom: 24px; }
.billing-switch {
  position: relative; width: 268px; height: 50px;
  background: var(--color-white); border-radius: 50px; padding: 4px; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.billing-switch__slider {
  position: absolute; top: 4px; left: 4px;
  width: 123px; height: 42px; background: var(--color-aqua-500); border-radius: 50px;
  transition: transform .25s ease;
}
.billing-switch__option { z-index: 1; height: 100%; border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: 15px; line-height: 24px; color: var(--color-navy); padding: 0; margin: 0; }
.billing-switch #opt-yearly { color: var(--color-navy); }
.billing-switch #opt-monthly { color: #9AA3A8; }
.billing-switch.is-yearly  .billing-switch__slider { transform: translateX(0); }
.billing-switch.is-monthly .billing-switch__slider { transform: translateX(137px); }
.billing-switch.is-monthly #opt-yearly  { color: #9AA3A8; }
.billing-switch.is-monthly #opt-monthly { color: var(--color-navy); }

.pricing-vat-row{max-width:1300px; width:100%; margin:0 auto 8px;}
.pricing-vat-inner{
  width:calc(var(--cols) * var(--card-w) + (var(--cols) - 1) * var(--gap));
  margin:0 auto;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:28px;
  color:var(--color-ink);
  text-align:left;
}

/* Grid – 4 sloupce do 1300px, equal-height položky */
.pricing-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: stretch; max-width: 1300px; margin: 0 auto; }
.enterprise-col { width: 315px; position: relative; display: flex; flex-direction: column; align-items: center; }
.enterprise-deco { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 210px; height: 124px; pointer-events: none; user-select: none; }

/* Karty */
.pricing-card { width: 315px; background: var(--color-white); border-radius: 20px; border: 1px solid var(--color-aqua-500); position: relative; display: flex; flex-direction: column; }
.pricing-card[data-variant="business"],
.pricing-card[data-variant="start"],
.pricing-card[data-variant="enterprise"] { border: none; }

/* Badge jen u Basic */
.pricing-badge { width: 135px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--color-aqua-500); color: var(--color-ink); font-size: 12px; line-height: 24px; font-weight: 700; border-radius: 0 0 10px 10px; position: absolute; top: 0; left: 20px; }

/* Ikony vpravo nahoře v kartě */
.pricing-illustration { position: absolute; top: 20px; right: 40px; }
.pricing-illustration img { width: 44px; height: 38px; }

/* Obsah – sjednocené okraje 25/25 */
.pricing-content { margin-left: 25px; margin-right: 25px; margin-bottom: 0; padding-top: 58px; padding-bottom: 40px; display: flex; flex-direction: column; flex: 1; }
.pricing-title { color: var(--color-ink); font-size: 30px; line-height: 40px; font-weight: 700; margin: 0; }
.pricing-subtitle { color: var(--color-ink); font-size: 12px; line-height: 24px; font-weight: 700; margin: 0 0 24px 0; text-transform: uppercase; }

/* Cena */
.pricing-price { margin-bottom: 20px; }
.pricing-price-value { color: var(--color-ink); font-size: 30px; line-height: 40px; font-weight: 700; display: block; }

/* Roční promo */
.price-chip { display: none; width: 127px; height: 20px; border: 1px solid var(--color-aqua-500); background: #DAF5F7; color: var(--color-aqua-500); border-radius: 100px; font-weight: 700; font-size: 10px; line-height: 20px; text-align: center; margin-bottom: 10px; }
.price-old { display: none; color: var(--color-navy); font-weight: 500; font-size: 15px; line-height: 24px; text-decoration: line-through; margin-bottom: 6px; }
.pricing-page[data-billing="yearly"] .price-chip, .pricing-page[data-billing="yearly"] .price-old { display: inline-block; }
.pricing-page[data-billing="yearly"] .price-old { display: block; }

/* Počítadlo */
.quantity-controls { display: flex; align-items: center; gap: 6px; margin-bottom: 24px; width: fit-content; }
.quantity-controls--placeholder { min-height: 25px; }
.qty-btn { width: 25px; height: 25px; border-radius: 50%; background: var(--color-aqua-500); color: var(--color-ink); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s; font-weight: 700; font-size: 12px; }
.qty-btn:disabled { background: var(--color-aqua-panel); cursor: not-allowed; }
.qty-btn:not(:disabled):hover { background: #00A8B0; }
.qty-input { color: var(--color-ink); font-size: 18px; line-height: 24px; font-weight: 700; border: none; background: transparent; text-align: center; outline: none; padding: 0; min-width: 28px; }
.qty-label { color: var(--color-ink); font-size: 18px; line-height: 24px; font-weight: 700; }

/* Seznamy */
.section-title { color: var(--color-ink); font-size: 18px; line-height: 24px; font-weight: 700; margin: 0 0 24px 0; }
.section-subtitle { color: var(--color-ink); font-size: 15px; line-height: 24px; font-weight: 700; margin: 0 0 8px 0; }
.feature-list { margin: 24px 0 24px 0; padding-left: 0; }
.feature-list--tight { margin: 8px 0 0 0; }
.feature-item { color: var(--color-ink); font-size: 15px; line-height: 24px; font-weight: 500; margin-bottom: 8px; list-style: none; }

/* CTA spacing */
.cta-wrap { margin-top: auto; padding-top: 24px; }
.cta-button { width: 100%; height: 50px; background: #FFC201; color: var(--color-ink); border: none; border-radius: 100px; font-size: 16px; line-height: 24px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; transition: background-color .2s; text-decoration: none; }
.cta-button:hover { background: var(--color-brand-400); }
.cta-icon { width: 21px; height: 21px; }

/* Outline CTA pro Start/Business/Enterprise */
.pricing-card[data-variant="business"] .cta-button,
.pricing-card[data-variant="start"] .cta-button,
.pricing-card[data-variant="enterprise"] .cta-button { background: var(--color-white); color: var(--color-ink); border: 1px solid var(--color-ink); }
.pricing-card[data-variant="business"] .cta-button,
.pricing-card[data-variant="start"] .cta-button,
.pricing-card[data-variant="enterprise"] .cta-button { transition: background-color .2s, border-color .2s, box-shadow .2s, transform .15s ease; }
.pricing-card[data-variant="business"] .cta-button:hover,
.pricing-card[data-variant="start"] .cta-button:hover,
.pricing-card[data-variant="enterprise"] .cta-button:hover { background: var(--color-aqua-panel); border-color: var(--color-aqua-500); box-shadow: 0 6px 14px rgba(0, 35, 53, 0.12); transform: translateY(-1px); }
.pricing-card[data-variant="business"] .cta-button:active,
.pricing-card[data-variant="start"] .cta-button:active,
.pricing-card[data-variant="enterprise"] .cta-button:active { background: #DAF5F7; box-shadow: 0 3px 8px rgba(0, 35, 53, 0.12); transform: translateY(0); }
.pricing-card[data-variant="business"] .cta-button:focus-visible,
.pricing-card[data-variant="start"] .cta-button:focus-visible,
.pricing-card[data-variant="enterprise"] .cta-button:focus-visible { outline: 2px solid var(--color-aqua-500); outline-offset: 2px; }

@media (max-width: 1299px) { .enterprise-deco { display: none !important; } .pricing-page{--cols:3;} }
@media (max-width: 969px) { .pricing-page{--cols:2;} }

/* --- mobil ≤767px: full-width karty + gap 16px --- */
@media (max-width: 767px) {
  .pricing-page{--cols:1; --gap:16px;}
  .pricing-vat-row{max-width:100%;}
  .pricing-vat-inner{width:100%;}
  .pricing-grid { gap: 16px; max-width: 100%; justify-content: stretch; }
  .pricing-card, .enterprise-col { width: 100%; }
}

}