/* =====================================================================
   ADWstudio — care.css (v3 care-plans page)
   Loads AFTER style.css; reuses its tokens/components (.card, .btn,
   .check-list, .faq-*, .cta-strip). Page shell mirrors the configurator.
   01 Shell (minimal nav, beam, footer)   02 Hero & promo strip
   03 Billing toggle                      04 Plan cards
   05 Comparison table                    06 Fair rules
   07 Reduced motion
   ===================================================================== */

/* ============ 01 Shell ============ */
.care-body { min-height: 100vh; display: flex; flex-direction: column; }

.nav--minimal {
  position: static;                    /* overrides v1 fixed nav */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.care-main { flex: 1; position: relative; overflow: hidden; }
.care-beam {
  position: absolute;
  top: -12%; right: -18%;
  width: min(70vw, 780px);
  height: min(70vw, 780px);
  background: radial-gradient(circle at center, var(--glow), transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}

.care-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: 18px 0;
  text-align: center;
  font-size: var(--small);
  color: var(--ink-2);
}
.care-footer a { color: var(--ink-2); }
.care-footer a:hover { color: var(--blue); }

/* sprite icon strokes (same convention as the wizard pages) */
.care-body svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============ 02 Hero & promo strip ============ */
.care-hero {
  position: relative;
  text-align: center;
  padding: clamp(56px, 9vw, 104px) 0 clamp(32px, 5vw, 56px);
}
.care-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 auto;
}
.care-hero .lead {
  margin: 18px auto 0;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 1.1rem;
}

.care-promo {
  background: var(--blue-ghost);
  border-top: 1px solid rgba(26, 84, 244, 0.14);
  border-bottom: 1px solid rgba(26, 84, 244, 0.14);
  padding: 14px 0;
  text-align: center;
}
.care-promo p { font: 500 0.95rem var(--font-body); color: var(--blue-deep); }
.care-promo strong { font-weight: 600; }

/* ============ 03 Billing toggle ============ */
.bill-row { display: grid; justify-items: center; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }

.bill-toggle {
  position: relative;
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-card);
}
.bill-thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  border-radius: 999px;
  background: var(--blue-ghost);
  box-shadow: inset 0 0 0 1px var(--blue);
  transition: transform 0.24s var(--ease), width 0.24s var(--ease);
  pointer-events: none;
}
.bill-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font: 600 0.95rem var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
  min-height: 44px;
}
.bill-btn.is-active { color: var(--blue-deep); }
.bill-badge {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  font: 600 0.7rem var(--font-body);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* number swap animation */
@keyframes numSwap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.num-swap { animation: numSwap 0.18s var(--ease); display: inline-block; }

/* ============ 04 Plan cards ============ */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (min-width: 640px)  { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .plans-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .plans-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
}
.plan-card .icon-tile { width: 40px; height: 40px; border-radius: 10px; }
.plan-card .icon-tile svg { width: 20px; height: 20px; }
.plan-card .badge { top: 20px; right: 16px; }

.plan-card.featured { border-top: 2px solid var(--blue); }
@media (min-width: 900px) {
  .plan-card.featured { transform: scale(1.02); }
  .plan-card.featured:hover { transform: scale(1.02) translateY(-4px); }
}
.plan-card.featured .badge {
  top: -12px; right: auto; left: 50%;
  transform: translateX(-50%);
  position: absolute;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  white-space: nowrap;
}

.plan-name {
  font: 800 1.05rem var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.plan-price { display: grid; gap: 3px; justify-items: start; }
.plan-amount { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan-num {
  font: 800 clamp(1.9rem, 3vw, 2.4rem)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.plan-per { font: 500 0.9rem var(--font-body); color: var(--ink-2); }
.plan-sub { font-size: 0.8rem; color: var(--ink-2); min-height: 2.3em; }
.plan-save {
  background: var(--blue-ghost);
  color: var(--blue-deep);
  font: 600 0.75rem var(--font-body);
  padding: 3px 10px;
  border-radius: 999px;
  justify-self: start;
}

.plan-tagline {
  font-size: var(--small);
  color: var(--ink-2);
  min-height: 2.6em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.plan-card .check-list { flex: 1; }
.plan-card .check-list li.inherit { color: var(--ink-2); opacity: 0.85; }
.plan-card .check-list li.inherit .icon { color: var(--ink-2); }
.plan-card .btn { width: 100%; margin-top: 6px; }

/* ============ 05 Comparison table ============ */
.compare-shell { position: relative; }
.compare-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}
.compare-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 860px;
  font-size: var(--small);
}
.compare th, .compare td {
  padding: 12px 14px;
  text-align: center;
  vertical-align: middle;
  color: var(--ink);
}
.compare thead th {
  font: 700 0.9rem var(--font-display);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
  padding-top: 16px; padding-bottom: 14px;
}
.compare tbody tr + tr th, .compare tbody tr + tr td { border-top: 1px solid var(--line); }
.compare th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--ink-2);
  min-width: 170px;
}
/* sticky first column */
.compare th:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  box-shadow: 1px 0 0 var(--line);
}
/* featured (Růst) column tint — 5th column */
.compare th:nth-child(5), .compare td:nth-child(5) { background: var(--blue-ghost); }
.compare .cmp-check svg { width: 18px; height: 18px; color: var(--blue); display: inline-block; }
.compare .cmp-no { color: var(--ink-2); opacity: 0.6; }

/* edge fades signalling horizontal scroll (small screens) */
@media (max-width: 899px) {
  .compare-shell::before, .compare-shell::after {
    content: "";
    position: absolute;
    top: 1px; bottom: 1px;
    width: 28px;
    z-index: 2;
    pointer-events: none;
  }
  .compare-shell::before {
    left: 1px;
    border-radius: 16px 0 0 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  }
  .compare-shell::after {
    right: 1px;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  }
}

/* ============ 06 Fair rules ============ */
.rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 32px;
  max-width: 900px;
}
@media (min-width: 700px) { .rules-grid { grid-template-columns: 1fr 1fr; } }
.rules-grid li { display: flex; gap: 14px; align-items: flex-start; }
.rules-grid .icon-tile { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.rules-grid .icon-tile svg { width: 19px; height: 19px; }
.rules-grid p { color: var(--ink-2); font-size: 0.95rem; padding-top: 6px; }

/* ============ 07 Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .bill-thumb { transition: none; }
  .num-swap { animation: none; }
}

/* =====================================================================
   v6 ADDITIONS — credits: plan credit lines + credits calculator
   ===================================================================== */

/* plan card credit line + annual roll-over chip */
.plan-credits {
  font: 600 0.95rem var(--font-body);
  color: var(--blue-deep);
  margin-top: 2px;
}
.plan-approx { font-weight: 500; color: var(--ink-2); }
.plan-rollover {
  background: var(--blue-ghost);
  color: var(--blue-deep);
  font: 600 0.72rem var(--font-body);
  padding: 3px 10px;
  border-radius: 999px;
  justify-self: start;
}

/* calculator — hidden entirely without JS (interactive enhancement) */
#kalkulacka { display: none; }
html.js #kalkulacka { display: block; }

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
@media (min-width: 860px) { .calc-grid { grid-template-columns: 1.15fr 0.85fr; gap: 22px; } }

.calc-need, .calc-get {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3vw, 28px);
}
.calc-need h3, .calc-get h3 { font: 700 1.15rem var(--font-display); margin-bottom: 14px; }

.calc-items { display: grid; gap: 4px; }
.calc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.calc-item-label { font-size: 0.95rem; color: var(--ink); }
.calc-item-cost { color: var(--ink-2); font-size: var(--small); white-space: nowrap; }

.calc-stepper { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.calc-minus, .calc-plus {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: 600 1.1rem/1 var(--font-body);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.calc-minus:hover, .calc-plus:hover { border-color: var(--blue); color: var(--blue); }
.calc-count { min-width: 24px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.calc-express {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.calc-express input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
.calc-custom { margin-top: 10px; font-size: var(--small); color: var(--ink-2); }

.calc-total {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  justify-items: start;
}
.calc-total-big { font: 500 1.05rem var(--font-body); color: var(--ink); }
.calc-total-num {
  font: 800 1.4rem var(--font-display);
  color: var(--blue-deep);
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.calc-reco { font-size: 0.95rem; color: var(--ink-2); }
.calc-reco strong { color: var(--ink); }
.calc-cta { margin-top: 4px; }

.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.calc-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 8px 16px;
  font: 600 0.9rem var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
  min-height: 40px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.calc-chip:hover { border-color: var(--blue); color: var(--blue); }
.calc-chip.is-active { border-color: var(--blue); background: var(--blue-ghost); color: var(--blue-deep); }

.calc-break-head { font: 700 1.2rem var(--font-display); color: var(--ink); margin-bottom: 6px; }
.calc-break-list { color: var(--ink-2); font-size: 0.95rem; }

.calc-disclaimer { margin-top: 18px; font-size: var(--small); color: var(--ink-2); }

/* =====================================================================
   v7 ADDITIONS — "první měsíc zdarma" treatment on plan cards
   ===================================================================== */
.plan-num.is-free { text-decoration: line-through; color: var(--ink-2); }
.plan-freechip {
  display: inline-block;
  background: var(--blue-ghost);
  color: var(--blue);
  font: 600 0.72rem var(--font-body);
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.plan-then { font-size: 0.82rem; color: var(--ink-2); margin-top: -2px; }
.plan-annual-extra { font: 600 0.78rem var(--font-body); color: var(--blue-deep); }
.plan-fullyear { color: var(--ink-2); }   /* struck full 12-month price in annual sub */