/**
 * @file
 * Előfizetés-választó oldal (/regisztracio) — arculathelyes csomagkártyák.
 *
 * ARCULAT
 * -------
 * A színek a bizreview téma TÉNYLEGES értékei, nem találgatás:
 *   kék            #5b9dc6   (--main-color)
 *   sötét kék      #33607f
 *   zöld (CTA)     #7cc576   (.pszk-plan__button, .ajanlott-cimke)
 *   zöld hover     #64ae5d
 *   címszín        #25272c   (--main-heading-color)
 *   halvány szöveg #6b7280   (--main-font-color)
 *   keret          #e3e3e3
 *   sorelválasztó  #f0f3f6
 *   halvány kék    #edf2fc   (--main-color-soft)
 *   lekerekítés    8px       (a témában a leggyakoribb)
 *   árnyék         0 4px 18px rgba(20,40,80,.06)
 *
 * A betűt SEHOL nem írjuk felül (font-family: inherit), így a téma
 * Poppins/Inter párosa marad.
 *
 * A névtér (.pszk-) megakadályozza a téma stílusaival való ütközést.
 */

.pszk-plans{
  --pszk-kek:#5b9dc6;
  --pszk-kek-sotet:#33607f;
  --pszk-kek-halvany:#edf2fc;
  --pszk-kek-keret:#cfe0f0;
  --pszk-zold:#7cc576;
  --pszk-zold-sotet:#64ae5d;
  --pszk-cim:#25272c;
  --pszk-szoveg:#4a4a4a;
  --pszk-halvany:#6b7280;
  --pszk-keret:#e3e3e3;
  --pszk-vonal:#f0f3f6;
  --pszk-sor:#f7f7f7;

  max-width:1200px;
  margin:0 auto;
  padding:20px 15px 45px;
  font-family:inherit;
  color:var(--pszk-szoveg);
  line-height:1.6;
}
.pszk-plans *,
.pszk-plans *::before,
.pszk-plans *::after{box-sizing:border-box;}

/* A téma az li-re KÜLÖN tesz list-style-t, ami erősebb, mint az ul-ra írt
   list-style:none — ezért a felsorolásjel magán az li-n és a ::marker-en is
   le van kapcsolva. Enélkül fekete négyzetek jelennek meg a pipák mellett. */
.pszk-plans ul,
.pszk-plans ol,
.pszk-plans li{
  list-style:none !important;
  list-style-type:none !important;
  list-style-image:none !important;
}
.pszk-plans li::marker{content:"" !important;font-size:0 !important;}

/* ---------- bevezető ---------- */
.pszk-plans__intro{
  text-align:center;
  margin-bottom:1.9rem;
}
.pszk-plans__title{
  color:var(--pszk-kek-sotet);
  font-size:2.2rem;
  font-weight:700;
  line-height:1.2;
  margin:0 0 .4rem;
}
.pszk-plans__subtitle{
  color:var(--pszk-kek-sotet);
  font-size:1.35rem;
  font-weight:600;
  line-height:1.3;
  margin:0 0 .8rem;
}
.pszk-plans__lead{
  max-width:50rem;
  margin:0 auto;
  color:var(--pszk-halvany);
  font-size:1rem;
}
.pszk-plans__lead strong{color:var(--pszk-cim);}

/* ---------- rács ----------
   Első sor: a három kártya (azonos magasság -> a három gomb egy vonalban).
   Második sor: a külön rendelhető Plusz kiegészítők, a gombok ALATT. */
.pszk-plans__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}
.pszk-plans__ures{display:block;}

/* ---------- kártya ---------- */
.pszk-plan{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--pszk-keret);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(20,40,80,.06);
}
/* Az „ajánlott" jelölés ugyanaz, mint a keresőtalálatoknál:
   2px zöld keret (.listing-search-results-item.ajanlott-kartya). */
.pszk-plan--ajanlott{border:2px solid var(--pszk-zold);}

/* Szalagsáv: a kiemelt csomagnál zöld felirat, a többinél felirat nélkül, de
   AZONOS magasságban és a fejléc kékjével — így a kártyák teteje egy
   vonalban van. */
.pszk-plan__szalag{
  height:1.85rem;
  line-height:1.85rem;
  text-align:center;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:var(--pszk-kek);
}
.pszk-plan--ajanlott .pszk-plan__szalag{background:var(--pszk-zold);}

.pszk-plan__header{
  background:var(--pszk-kek);
  color:#fff;
  text-align:center;
  padding:.35rem 1rem .95rem;
  font-size:1.35rem;
  font-weight:600;
  line-height:1.3;
}

.pszk-plan__price{
  padding:.8rem 1rem;
  text-align:center;
  background:var(--pszk-sor);
  border-bottom:1px solid var(--pszk-vonal);
  color:var(--pszk-cim);
}
.pszk-plan__price b{font-size:1.45rem;font-weight:700;}
.pszk-plan__price span{color:var(--pszk-halvany);font-size:.92rem;font-weight:400;}

.pszk-plan__body{
  flex:1 1 auto;
  padding:1rem 1.1rem 1.15rem;
}
.pszk-plan__subtitle-row{
  margin:0 0 .7rem;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pszk-kek-sotet);
}

.pszk-plan__features{margin:0;padding:0;list-style:none;}
.pszk-plan__feature{
  position:relative;
  padding:.38rem 0 .38rem 1.55rem;
  border-bottom:1px solid var(--pszk-vonal);
  font-size:.95rem;
  text-align:left;
}
.pszk-plan__feature:last-child{border-bottom:0;}
.pszk-plan__feature::before{
  content:"";
  position:absolute;
  left:0;
  top:.72rem;
  width:.9rem;
  height:.9rem;
  background-repeat:no-repeat;
  background-position:center;
  background-size:.9rem .9rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4 4L19 7' fill='none' stroke='%237cc576' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pszk-plan__feature b{font-weight:700;color:var(--pszk-cim);}

.pszk-plan__feature.is-x{color:#9a9a9a;}
.pszk-plan__feature.is-x b{color:#9a9a9a;font-weight:400;}
.pszk-plan__feature.is-x::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23c2c8d0' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.pszk-plan__inherited{
  margin:.9rem 0 0;
  padding-top:.75rem;
  border-top:1px solid var(--pszk-vonal);
  font-size:.86rem;
  color:var(--pszk-halvany);
}

.pszk-plan__cta{
  padding:1rem 1.1rem 1.25rem;
  border-top:1px solid var(--pszk-vonal);
  background:#fcfdfe;
}
.pszk-plan__button{
  display:block;
  width:100%;
  padding:.72rem 1rem;
  border-radius:8px;
  background:var(--pszk-zold);
  color:#fff !important;
  font-weight:700;
  font-size:1rem;
  text-align:center;
  text-decoration:none !important;
  transition:background-color .15s ease-in-out;
}
.pszk-plan__button:hover,
.pszk-plan__button:focus{
  background:var(--pszk-zold-sotet);
  color:#fff !important;
  text-decoration:none !important;
}

/* ---------- Plusz kiegészítők (a gombok alatt) ---------- */
.pszk-plus{
  background:var(--pszk-kek-halvany);
  border:1px solid var(--pszk-kek-keret);
  border-radius:8px;
  padding:.95rem 1.05rem 1.05rem;
}
.pszk-plus__cimke{
  display:inline-block;
  margin-bottom:.5rem;
  padding:.18rem .7rem;
  border-radius:4px;
  background:var(--pszk-kek);
  color:#fff;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pszk-plus__nev{
  margin:0;
  font-size:1.1rem;
  font-weight:600;
  color:var(--pszk-kek-sotet);
}
.pszk-plus__ar{
  display:block;
  margin:.1rem 0 .5rem;
  font-size:1.15rem;
  font-weight:700;
  color:var(--pszk-cim);
}
.pszk-plus__note{
  margin:0 0 .6rem;
  font-size:.88rem;
  color:var(--pszk-halvany);
}
.pszk-plus__lista{margin:0;padding:0;list-style:none;}
.pszk-plus__lista li{
  position:relative;
  margin:.35rem 0;
  padding-left:1.55rem;
  font-size:.92rem;
}
.pszk-plus__lista li::before{
  content:"";
  position:absolute;
  left:0;
  top:.3rem;
  width:.9rem;
  height:.9rem;
  background-repeat:no-repeat;
  background-position:center;
  background-size:.9rem .9rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4 4L19 7' fill='none' stroke='%235b9dc6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- „Jó tudni" doboz ----------
   Pontosan ugyanaz, mint a Díjcsomagok oldalon (.pkdij__jegyzet): a két
   oldalnak egyeznie kell, és a Díjcsomagok az irányadó. */
.pszk-plans__note{
  max-width:52rem;
  margin:2.25rem auto 0;
  padding:1.25rem 1.4rem 1.35rem;
  background:#fff;
  border:1px solid var(--pszk-keret);
  border-radius:8px;
  box-shadow:0 4px 18px rgba(20,40,80,.06);
  font-size:.93rem;
}
.pszk-plans__note h3{
  margin:0 0 .9rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--pszk-vonal);
  font-size:1.15rem;
  font-weight:700;
  color:var(--pszk-cim);
}
.pszk-plans__note p{margin:.65rem 0;}
.pszk-plans__note strong{color:var(--pszk-kek-sotet);}
.pszk-plans__note em{font-style:italic;}

/* ---------- reszponzív ---------- */
@media (max-width:900px){
  .pszk-plans__grid{
    grid-template-columns:1fr;
    max-width:30rem;
    margin:0 auto;
  }
  .pszk-plans__ures{display:none;}
  .pszk-plan--alap{order:1;}
  .pszk-plan--megjelenes{order:2;}
  .pszk-plus--megjelenes{order:3;}
  .pszk-plan--premium{order:4;}
  .pszk-plus--premium{order:5;}

  .pszk-plans__title{font-size:1.7rem;}
  .pszk-plans__subtitle{font-size:1.15rem;}
}

/* ---------- PK-RENDELO-JELENTKEZES (2026-10-22): rendeloi csomag doboza ---------- */
.pszk-rendelo{
  display:flex;
  align-items:center;
  gap:1.5rem;
  max-width:52rem;
  margin:2.25rem auto 0;
  padding:1.2rem 1.4rem;
  background:var(--pszk-kek-halvany);
  border:1px solid var(--pszk-kek-keret);
  border-left:4px solid var(--pszk-kek);
  border-radius:8px;
}
.pszk-rendelo__szoveg{flex:1 1 auto;min-width:0;}
.pszk-rendelo__cimke{
  display:inline-block;
  margin-bottom:.45rem;
  padding:.18rem .7rem;
  border-radius:4px;
  background:var(--pszk-kek);
  color:#fff;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pszk-rendelo__cim{
  margin:0 0 .35rem;
  font-size:1.2rem;
  font-weight:600;
  line-height:1.3;
  color:var(--pszk-kek-sotet);
}
.pszk-rendelo__leiras{margin:0;font-size:.95rem;}
.pszk-rendelo__leiras b{color:var(--pszk-cim);}
.pszk-rendelo__cta{flex:0 0 auto;}
.pszk-rendelo .pszk-rendelo__gomb{width:auto;padding:.72rem 1.6rem;white-space:nowrap;}
@media (max-width:900px){
  .pszk-rendelo{flex-direction:column;align-items:stretch;max-width:30rem;}
  .pszk-rendelo .pszk-rendelo__gomb{width:100%;}
}