/* =========================================================================
   Előfizetés oldal (/elofizetes/alap | plus | premium, 2026-11-04) – a cégpraxis /elofizetes felépítése a Kreditbérlet
   világos megoldásával: világos szekció; balra a választott csomag a főoldali árkártya mintájára (sötét
   .h5-pricing-box-wrapper, benne az átlátszó .h5-pricing-box-basic), rajta a print / online választó (#csomagtipus,
   nice-select); jobbra fehér űrlapkártya (.contact-form). Az alapjuk a lexpraxis.css-ben (.elofiz-pricing, .elofiz-contact-form,
   .elofiz-form); itt a kiegészítések. A nézet tölti be (@section Styles).
   ========================================================================= */

/* --- A választott csomag kártyája (sötét keret) --- */
.elofiz-oldal .elofiz-kartya .package-name {
  margin-bottom: 20px;
}
/* A nice-select.css float: left-je miatt a mellette következő árdoboz (flex) a float mellé szorulna, és összenyomódna. */
.elofiz-oldal .elofiz-kartya .nice-select.elofiz-valtozat {
  float: none;
  font-size: 1.1rem;
  border-radius: 8px;
  margin-bottom: 4px;
}
.elofiz-oldal .elofiz-valtozat-egy {
  color: #7fd493;
  font-weight: 600;
  margin: 0;
}
/* Nettó ár + bruttó ár egymás alá (a téma .package-price-e egysoros, 64 px-es flex) */
.elofiz-oldal .elofiz-kartya .package-price {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 26px 0 22px;
  font-size: 1rem;
  line-height: 1.15;
  color: var(--tj-color-common-white);
}
.elofiz-oldal .elofiz-kartya .package-price .price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.elofiz-oldal .elofiz-kartya .package-price .price-number {
  font-size: 2.4rem;
}
.elofiz-oldal .elofiz-kartya .package-price .price-vat {
  font-size: 1rem;
  font-weight: 500;
  opacity: .75;
}
.elofiz-oldal .elofiz-kartya .package-price .price-brutto {
  font-size: 0.95rem;
  font-weight: 400;
  opacity: .7;
}
.elofiz-oldal .elofiz-kartya .package-desc {
  margin-bottom: 30px;
}
/* A nagyobb csomag a kisebbek tételeit is felsorolja: a második és a harmadik csoport címe kap térközt. */
.elofiz-oldal .elofiz-kartya .list-items ul + .h5-pricing-list-title {
  margin-top: 28px;
}
.elofiz-oldal .elofiz-megjegyzes {
  margin-top: 24px;
  font-size: 0.95rem;
}
.elofiz-oldal .elofiz-megjegyzes p {
  margin-bottom: 10px;
}
/* Az ár fölötti felirat (pl. a próbaelőfizetésnél: „A próbaidőszak után:”) */
.elofiz-oldal .elofiz-kartya .elofiz-ar-felirat {
  color: var(--tj-color-text-body-2);
  font-size: 0.95rem;
  margin: 22px 0 -14px;
}
/* A csomagváltás bevezetője az űrlapkártyán */
.elofiz-oldal .elofiz-valtas-bevezeto {
  margin: -10px 0 18px;
}

/* --- Az oldalfejléc alcíme (próbaelőfizetés) --- */
.tj-page-header .elofiz-alcim {
  max-width: 680px;
  margin: 12px auto 0;
  color: rgba(255, 255, 255, 0.88);
}

/* --- Az űrlapkártya --- */
@media (max-width: 575px) {
  .elofiz-oldal .elofiz-contact-form {
    padding: 30px 18px;
  }
}
/* Balra zárt (a korábbi sorkizárás a hosszú szavak – „jelszóemlékeztető” – miatt nagy szóközöket hagyott). */
.elofiz-oldal .elofiz-szoveg {
  text-align: left;
  margin-bottom: 0;
}
.elofiz-oldal .elofiz-form a,
.elofiz-oldal .elofiz-nincs a,
.elofiz-oldal .elofiz-megjegyzes a {
  color: var(--tj-color-theme-primary);
}
/* a „jelszóemlékeztető” linkek Bootstrap .text-primary-k (!important kék) */
.elofiz-oldal .elofiz-form a.text-primary {
  color: var(--tj-color-theme-primary) !important;
}
.elofiz-oldal .elofiz-form hr {
  margin: 14px 0 4px;
}
.elofiz-oldal .elofiz-form .form-control:focus,
.elofiz-oldal .elofiz-form .form-select:focus {
  box-shadow: 0 0 0 3px rgba(75, 129, 77, 0.15);
}
/* A widget a select osztályait is megkapja: a .form-select Bootstrap-nyila a nice-select saját nyila mellett dupla nyíl lenne. */
.elofiz-oldal .elofiz-form .nice-select.form-select {
  background-image: none;
}
/* A „Közterület jellege” lista hosszú (75 elem, mint a Kreditbérletben): a lenyíló görgethető, nem lóg le az oldalról
   (a téma saját mintája: .tj-checkout-billing-wrapper .nice-select .list). */
.elofiz-oldal .elofiz-form .nice-select .list {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
}
/* A JS által még le nem oldott (disabled) mezők szürkén – előbb a megrendelő típusát (vállalkozásnál az adószámot), majd a
   fiókot kell megadni. A lexpraxis.css fehér háttere felülírná a Bootstrap tiltott-stílusát, ezért külön. A nice-select widget
   a natív select tiltását .disabled osztállyal tükrözi (az elofizetes.js figyelője frissíti). */
.elofiz-oldal .elofiz-form .form-control:disabled,
.elofiz-oldal .elofiz-form .form-select:disabled,
.elofiz-oldal .elofiz-form .nice-select.disabled {
  background-color: var(--tj-color-grey-1);
  color: var(--tj-color-text-body-3);
  cursor: not-allowed;
  opacity: 1;
}
.elofiz-oldal .elofiz-form .form-control:disabled::placeholder {
  color: var(--tj-color-grey-2);
}
.elofiz-oldal .elofiz-form .nice-select.disabled::after {
  border-color: var(--tj-color-grey-2);
}
/* A Bootstrap érvényességi ikonja ne takarja a mező szövegét (a lexpraxis.css belső margója felülírná az ikon helyét). */
.elofiz-oldal .elofiz-form .form-control.is-valid,
.elofiz-oldal .elofiz-form .form-control.is-invalid,
.elofiz-oldal .elofiz-form.was-validated .form-control:valid,
.elofiz-oldal .elofiz-form.was-validated .form-control:invalid {
  padding-right: calc(1.5em + .75rem);
}
/* A nice-select a rejtett natív select mellett ül: az érvényességi keretet a widget kapja. */
.elofiz-oldal .elofiz-form select.is-invalid + .nice-select,
.elofiz-oldal .elofiz-form.was-validated select:invalid + .nice-select {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.elofiz-oldal .elofiz-form select.is-valid + .nice-select,
.elofiz-oldal .elofiz-form.was-validated select:valid + .nice-select {
  border-color: var(--bs-form-valid-border-color, #198754);
}
.elofiz-oldal .elofiz-hiba {
  color: var(--bs-form-invalid-color, #dc3545);
  font-size: 0.95rem;
}
.elofiz-oldal .elofiz-form .form-text {
  font-size: 0.875rem;
  margin-top: 6px;
}
/* Rádió és jelölőnégyzet az agrár zöldjével (a Bootstrap alapja kék) */
.elofiz-oldal .elofiz-form .form-check-input:checked {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}
.elofiz-oldal .elofiz-form .form-check-input:focus {
  border-color: var(--tj-color-theme-primary);
  box-shadow: 0 0 0 0.25rem rgba(75, 129, 77, 0.25);
}
.elofiz-oldal .elofiz-form .form-check {
  margin-bottom: 8px;
}
/* A Bootstrap az érvényes rádió / jelölőnégyzet feliratát zöldre színezi: így a benne lévő (zöld) linkek nem válnának el tőle.
   Az érvényes felirat a szövegszínen marad (a hibás piros marad), a linkek aláhúzva. */
.elofiz-oldal .elofiz-form .form-check-input.is-valid ~ .form-check-label,
.elofiz-oldal .elofiz-form.was-validated .form-check-input:valid ~ .form-check-label {
  color: var(--tj-color-text-body);
}
.elofiz-oldal .elofiz-form .form-check-label a {
  text-decoration: underline;
}
.elofiz-oldal #fizmodblock legend {
  float: none;
  margin-bottom: 12px;
}
.elofiz-oldal .elofiz-barion {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 6px 0 18px;
}
.elofiz-oldal .elofiz-form .tj-primary-btn {
  margin-top: 14px;
}
/* Beküldés közben (dupla beküldés elleni védelem): a gombok tiltva, halványítva */
.elofiz-oldal .elofiz-form .tj-primary-btn:disabled,
.elofiz-oldal .elofiz-form.elofiz-kuldes .tj-primary-btn {
  opacity: .6;
  cursor: progress;
}

/* --- Nem rendelhető csomag (egyik változatnak sincs ára) --- */
.elofiz-oldal .elofiz-nincs {
  padding: 26px 28px;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 12px;
  background: var(--tj-color-grey-1);
}
.elofiz-oldal .elofiz-nincs h4 {
  font-size: 1.15rem;
}
.elofiz-oldal .elofiz-nincs p {
  margin-bottom: 0;
}