/* =========================================================================
   Webrakéta Árak — a három adatvezérelt blokk stílusa.

   SZABÁLY: NINCS beégetett px-es betűméret és NINCS beégetett szín.
   Minden a téma tokenjeiből jön (--wr-font-*, --coral, --ink, --paper, ...),
   mert Ernő kikötése az volt, hogy a globális tipográfiát használjuk. Ha
   később a márka betűmérete vagy színe változik, ez a fájl magától követi.
   ========================================================================= */

/* ------------------- SZEKCIÓ-KERET ÉS FEJLÉC -------------------------- */
/* A fejléc a Lovable-forrásban a szekció RÉSZE (a kereten belül van), ezért
   a bővítmény adja, nem a téma HTML-je. A tipográfiát a téma meglévő
   .eyebrow és .display-lg osztályai hozzák: nem másoljuk le, hogy egy
   későbbi téma-változást automatikusan kövessen. */

/* KONTÉNER. Mérve 2026-09-07, 390px-en: a saját h2-im x=0 w=390 voltak, vagyis
   a képernyő szélétől szélig értek, míg Pixel szekciói x=20 w=350. A
   shortcode-jaim közvetlenül a `main`-be renderelnek, ahol NINCS oldalsó
   padding, tehát a keretet magamnak kell hoznom, a téma tokenjeivel. Ez volt
   a mobil-nézet valódi hibája, nem a betűméretek. */
.wr-pr-sec {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: 5rem;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px)  { .wr-pr-sec { padding-inline: var(--container-pad-tablet); } }
@media (min-width: 1024px) { .wr-pr-sec { padding-block: 6rem; padding-inline: var(--container-pad-desktop); } }
/* A modulok közvetlenül a csomagok UTÁN jönnek: ott a dupla szekció-padding
   túl nagy hézagot adna, ezért a felső felét levesszük. */
.wr-pr-sec--mods { padding-block: 0 2rem; }
@media (min-width: 1024px) { .wr-pr-sec--mods { padding-block: 0 2rem; } }
/* 2026-09-18, Ernő (Wrike Optimalizálás 7.): az áfa-kártya kikerült, a bérleti kártya FÖLÖTT és ALATT ugyanakkora
   (2rem) legyen a távolság: a modul-szekció alsó paddingje 2rem, a záró blokk margin-top 0, a rács gap 2rem. */
/* A záró blokk is ugyanazt a keretet kapja: shortcode-ként ő is a `main`-be esik. */
.wr-pr-cta {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}
@media (min-width: 768px)  { .wr-pr-cta { padding-inline: var(--container-pad-tablet); } }
@media (min-width: 1024px) { .wr-pr-cta { padding-inline: var(--container-pad-desktop); } }

.wr-pr-head { max-width: 48rem; }
.wr-pr-head__title { margin: 1rem 0 0; color: var(--ink); }
.wr-pr-hl { color: var(--coral); }
.wr-pr-head__lead {
  margin: 1.25rem 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body);
  line-height: 1.7;
  color: var(--muted-foreground);
}
.wr-pr-head__lead a { color: var(--coral); text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------- 1. CSOMAGOK ------------------------------ */

.wr-pr-tiers {
  display: grid;
  gap: 1.5rem;
  margin-top: 3.5rem;
}
/* 2026-09-22, Ernő: „Egyszeri díj | Havi díj" váltó (Lovable /arak: inline-grid, pill, 1px line keret, secondary háttér,
   4px belső tér; aktív bal = ink, aktív jobb = coral, fehér felirat; 14px/500, 8px 28px). Ha a váltó látszik, a kártyák
   rácsa kisebb felső térközt kap, mert a váltó már elválaszt. */
.wr-pr-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--secondary, #f4f6f8);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.wr-pr-switch__btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 20px;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
@media (min-width: 640px) { .wr-pr-switch__btn { padding: 8px 28px; } }
.wr-pr-switch__btn.is-on { color: var(--paper, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.wr-pr-switch__btn[data-mode="once"].is-on { background: var(--ink); }
.wr-pr-switch__btn[data-mode="rent"].is-on { background: var(--coral); }
.wr-pr-switch__btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.wr-pr-sec--tiers.has-rent .wr-pr-tiers { margin-top: 2rem; }
.wr-pr-tier__pricing[hidden] { display: none; }
@media (min-width: 900px) {
  .wr-pr-tiers { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.wr-pr-tier {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 2rem;
}

/* A kiemelt csomag sötét. Egyetlen módosító osztály fordítja meg az egész
   kártya színvilágát, hogy ne kelljen minden elemre külön szabály. */
.wr-pr-tier.is-accent {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
@media (min-width: 900px) {
  .wr-pr-tier.is-accent { transform: translateY(-0.75rem); }
}

.wr-pr-tier__code {
  font-family: var(--wr-font-mono, var(--wr-font-sans));
  font-size: var(--wr-font-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
}
.wr-pr-tier__name {
  margin: .5rem 0 0;
  font-family: var(--wr-font-display);
  font-size: 1.875rem;   /* forrás: text-3xl, FIX méret, nem skálázódik */
  line-height: 1.15;
  color: inherit;
}
.wr-pr-tier__desc {
  margin: .65rem 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body-sm);
  line-height: 1.6;
  color: var(--muted-foreground);
}
.wr-pr-tier.is-accent .wr-pr-tier__desc,
.wr-pr-tier.is-accent .wr-pr-tier__sub,
.wr-pr-tier.is-accent .wr-pr-tier__feats li { color: color-mix(in oklab, var(--paper) 78%, transparent); }

.wr-pr-tier__price {
  margin: 1.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5rem;
  font-family: var(--wr-font-display);
  font-size: 1.6rem;      /* forrás: text-[1.6rem] mobilon */
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
@media (min-width: 640px) { .wr-pr-tier__price { font-size: 2.25rem; } }
/* Az „+ ÁFA" a forrásban külön, kisebb és halvány: az ÁR a főszereplő, az
   áfa-jelölés csak pontosítás. Egyben szedve az egész blokk hangosabb a
   kelleténél, ezt mutatta a mobil képernyőkép. */
.wr-pr-tier__vat {
  font-size: var(--wr-font-xs);
  font-weight: 400;
  white-space: nowrap;
  color: var(--muted-foreground);
}
@media (min-width: 640px) { .wr-pr-tier__vat { font-size: var(--wr-font-sm); } }
.wr-pr-tier.is-accent .wr-pr-tier__vat { color: color-mix(in oklab, var(--paper) 55%, transparent); }
.wr-pr-tier__sub {
  margin: .25rem 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-sm);
  color: var(--muted-foreground);
}

.wr-pr-tier__feats {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .65rem;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body-sm);
  line-height: 1.5;
  color: var(--muted-foreground);
}
/* A pipa CSS-ből jön, nem a tartalomból: így Ernő sima szöveget ír be a
   mezőbe, és nem kell ikonnal bajlódnia. */
.wr-pr-tier__feats li {
  position: relative;
  padding-left: 1.6rem;
}
.wr-pr-tier__feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: .95em;
  height: .95em;
  background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.wr-pr-tier__btn {
  margin-top: auto;
  padding-top: 1.75rem;
}
.wr-pr-tier__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--coral);
  padding: .85rem 1.5rem;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-button);
  font-weight: var(--wr-fw-button, 600);
  color: var(--paper);
  text-decoration: none;
  transition: filter .2s ease;
}
.wr-pr-tier__btn:hover { filter: brightness(1.08); }

/* --------------------------- 2. MODULOK ------------------------------- */

/* A forrásban KÜLÖNÁLLÓ, keretes kártyák vannak átlátszó hézaggal. Először
   1px-es rácsvonal-trükköt használtam (közös szürke háttér + 1px gap), ami
   egy szürke sávot adott a szekciónak. A Lovable-ön a szekció-háttér
   ÁTLÁTSZÓ. Pixel teljes oldalas mérése fogta meg. */
.wr-pr-mods {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  background: transparent;
}
@media (min-width: 700px)  { .wr-pr-mods { grid-template-columns: repeat(2, 1fr); } }

.wr-pr-mod {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background: var(--paper);
  padding: 1.75rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.wr-pr-mod:hover { border-color: color-mix(in oklab, var(--ink) 30%, transparent); }
/* Alsó coral csík hoverre, ahogy a forrásban. */
.wr-pr-mod::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.wr-pr-mod:hover::after { transform: scaleX(1); }
.wr-pr-mod__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.wr-pr-mod__name {
  margin: 0;
  font-family: var(--wr-font-display);
  font-size: var(--wr-font-card-title);
  color: var(--ink);
}
.wr-pr-mod__price {
  font-family: var(--wr-font-mono, ui-monospace, monospace);
  font-size: var(--wr-font-sm);
  font-weight: 500;
  color: var(--coral);
  white-space: nowrap;
}
.wr-pr-mod__desc {
  margin: .5rem 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body-sm);
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* ----------------------- 3. ZÁRÓ BLOKK (CTA) -------------------------- */

.wr-pr-cta { display: grid; gap: 2rem; margin-top: 0; }
/* A wpautop a sorokra írt rövidkódok közé <br>-t tesz (20-28px), ami elrontja az egyenlő távolságot: elrejtjük. */
.wr-pr-sec--mods + br, .wr-pr-cta + br, .wr-pr-sec--packs + br { display: none; }

.wr-pr-info {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border: 1px solid color-mix(in oklab, var(--coral) 20%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--coral) 5%, transparent);
  padding: 1.75rem;
}
/* A részletfizetés-kártya semleges keretes, felül coral csíkkal (forrás). */
.wr-pr-info--pay {
  position: relative;
  overflow: hidden;
  border-color: var(--line);
  background: var(--paper);
}
.wr-pr-info--pay::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(to right, var(--coral), color-mix(in oklab, var(--coral) 55%, var(--paper)), var(--coral));
}
.wr-pr-info__body { flex-grow: 1; }

/* Az ikonok CSS-maszkkal készülnek, NEM <img>-ként. Így felveszik a
   szövegszínt, tehát sötét és világos háttéren is helyesek maradnak, és egy
   későbbi márka-színváltást maguktól követnek. */
.wr-pr-info__ic {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;   /* a forrásban KÖR, nem lekerekített négyzet */
  background: var(--coral);
  position: relative;
}
.wr-pr-info__ic::after {
  content: "";
  position: absolute;
  inset: 28%;
  background: var(--paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5 5 19M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm11 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5 5 19M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm11 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wr-pr-info--pay .wr-pr-info__ic { background: color-mix(in oklab, var(--coral) 12%, transparent); }
.wr-pr-info--pay .wr-pr-info__ic::after { background: var(--coral); }
.wr-pr-info__ic--wallet::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1H5a2 2 0 0 0-2 2V7Zm0 3a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7Zm13 4h2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1H5a2 2 0 0 0-2 2V7Zm0 3a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7Zm13 4h2' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wr-pr-info__badge {
  display: inline-block;
  margin-bottom: .6rem;
  border-radius: var(--radius-pill);
  background: var(--coral);
  padding: .25rem .75rem;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper);
}
.wr-pr-info__title {
  margin: 0;
  font-family: var(--wr-font-display);
  font-size: 1.125rem;   /* forrás: text-lg */
  line-height: 1.3;
  color: var(--ink);
}
@media (min-width: 768px) { .wr-pr-info__title { font-size: 1.25rem; } }
.wr-pr-info__text {
  margin: .5rem 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body-sm);
  line-height: 1.65;
  color: var(--muted-foreground);
}
.wr-pr-info__box {
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--secondary);
  padding: .75rem 1.25rem;
  text-align: center;
}
.wr-pr-info__boxlab {
  display: block;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted-foreground);
}
.wr-pr-info__boxval {
  display: block;
  font-family: var(--wr-font-display);
  font-size: var(--wr-font-title-sm);
  color: var(--ink);
}
@media (max-width: 700px) {
  .wr-pr-info { flex-direction: column; align-items: center; text-align: center; }
  .wr-pr-info__box { align-self: stretch; }
}

.wr-pr-calc {
  border-radius: var(--radius-3xl);
  background: var(--ink);
  color: var(--paper);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
@media (min-width: 900px) { .wr-pr-calc { padding: 3rem; } }
.wr-pr-calc__in { max-width: 40rem; margin-inline: auto; }
.wr-pr-calc__eyebrow {
  font-family: var(--wr-font-mono, var(--wr-font-sans));
  font-size: var(--wr-font-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral);
}
.wr-pr-calc__title {
  margin: .75rem 0 0;
  font-family: var(--wr-font-display);
  font-size: 1.5rem;     /* forrás: text-2xl */
  line-height: 1.2;
  color: var(--paper);
}
@media (min-width: 768px) { .wr-pr-calc__title { font-size: 1.875rem; } }
.wr-pr-calc__lead {
  margin: .75rem 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-body);
  line-height: 1.65;
  color: color-mix(in oklab, var(--paper) 78%, transparent);
}
.wr-pr-cue {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin: 1.75rem auto 0;
  pointer-events: none;
}
.wr-pr-calc__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--coral);
  padding: .95rem 1.75rem;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-button);
  font-weight: var(--wr-fw-button, 600);
  color: var(--paper);
  text-decoration: none;
  transition: filter .2s ease;
}
.wr-pr-calc__btn:hover { filter: brightness(1.08); }
/* Koppinto ikon a valodi CTA-gomb sarkanal (a regi rajzolt kez helyett). */
.wr-pr-calc__btnwrap { position: relative; display: inline-block; }
.wr-pr-calc__tap {
  position: absolute;
  left: calc(100% - 1.5rem);   /* a gomb jobb sarkat kisse atfedve, a felirat kozepen marad */
  bottom: -0.55rem;
  width: 2.15rem;
  height: 2.15rem;
  color: var(--paper);          /* vilagos kez a sotetkek dobozban */
  pointer-events: none;
  transform-origin: 22% 22%;    /* a koppintas-pont (ujjhegy, bal-felso) korul */
  animation: wr-tap 2.6s ease-in-out infinite;
}
.wr-pr-calc__tap svg { display: block; width: 100%; height: 100%; }
.wr-pr-calc__tap svg path { fill: currentColor; }
@keyframes wr-tap {
  0%, 55%, 100% { transform: translate(0, 0) scale(1); }
  66%           { transform: translate(-2px, -2px) scale(.86); }
  78%           { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .wr-pr-calc__tap { animation: none; } }
.wr-pr-calc__note {
  margin: 1rem 0 0;
  font-family: var(--wr-font-sans);
  font-size: var(--wr-font-xs);
  color: color-mix(in oklab, var(--paper) 60%, transparent);
}