/* =============================================================================
   PAGINA DE PREȚURI  (se încarcă doar pe /pricing/)
   =============================================================================

   CUM E ORGANIZAT FIȘIERUL
   Fiecare secțiune de mai jos corespunde unei bucăți vizibile din pagină, în
   ordinea în care apar pe ecran. Caută titlul cu majuscule ca să sari direct.

     1. HERO
     2. CONTAINERE
     3. COMUTATORUL ANUAL / LIFETIME
     4. CARDURILE DE PREȚ
     5. AFIȘARE ANUAL vs LIFETIME
     6. CARDUL AGENCY
     7. BUTONUL DE CUMPĂRARE
     8. TABELUL COMPARATIV
     9. POPOVER-UL CU VIDEO
    10. FAQ
    11. RESPONSIVE

   REGULI RESPECTATE ÎN TOT FIȘIERUL
   - Culorile vin EXCLUSIV din variabilele declarate de tema Ollie
     (`--wp--preset--color--*`). Nu inventăm variabile proprii și nu scriem
     coduri hexa. Dacă ai nevoie de o culoare nouă, adaug-o în tema Ollie, nu aici.
   - Nu declarăm `font-family`. Fontul vine din temă, peste tot.
   - Colțurile rotunjite și umbrele folosesc tot scara temei
     (`--wp--preset--border-radius--*`, `--wp--preset--shadow--*`).

   VARIABILELE FOLOSITE AICI, PE ÎNȚELESUL TUTUROR
     --wp--preset--color--primary        negru-ul de text și de buton  (#1A1A1A)
     --wp--preset--color--base           alb                           (#fff)
     --wp--preset--color--secondary      gri pentru text secundar      (#545473)
     --wp--preset--color--border-light   gri foarte deschis, pentru linii (#E3E3F0)
     --wp--preset--color--tertiary       fundal deschis pentru panouri (#f8f7fc)
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. HERO
   Eyebrow-ul stă lipit de titlul pe care îl etichetează, iar linia de „trust"
   de dedesubt rămâne un bloc echilibrat, fără un cuvânt răzleț pe ultimul rând.
   -------------------------------------------------------------------------- */

.mod-hero .mod-eyebrow {
	margin-bottom: 0;
}

.mod-hero h1 {
	margin-top: 14px;
	margin-bottom: 0;
}

.mod-hero .mod-trust {
	width: max-content;
	max-width: min(92vw, 64rem);
	margin: 18px auto 0;
	text-wrap: balance;
}


/* -----------------------------------------------------------------------------
   2. CONTAINERE
   Cele patru secțiuni mari ale paginii au aceeași lățime și același padding
   lateral, ca să se alinieze una sub alta.
   -------------------------------------------------------------------------- */

#modula-pricing,
#modula-agency,
#modula-compare {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

#modula-testimonial {
	max-width: 1280px;
	margin: 10px auto 44px;
	padding: 0 24px;
	box-sizing: border-box;
}

/* `box-sizing` moștenit peste tot în interior: altfel padding-ul s-ar aduna
   peste lățimea declarată și coloanele ar depăși containerul. */
#modula-pricing *,
#modula-compare *,
#modula-agency .mod-agency-card * {
	box-sizing: border-box;
}


/* -----------------------------------------------------------------------------
   3. COMUTATORUL ANUAL / LIFETIME
   Două butoane într-o pilulă. JS-ul (pricing.js) pune clasa `.mod-active` pe
   butonul apăsat și `.is-lifetime` pe `#modula-pricing`.
   -------------------------------------------------------------------------- */

#modula-pricing .mod-toggle-wrap {
	display: flex;
	justify-content: center;
	margin: 0 0 2.75rem;
}

#modula-pricing .mod-toggle {
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--tertiary);
}

#modula-pricing .mod-toggle button {
	padding: .6rem 1.5rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--full);
	background: transparent;
	color: var(--wp--preset--color--secondary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: .15s;
}

#modula-pricing .mod-toggle button.mod-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}


/* -----------------------------------------------------------------------------
   4. CARDURILE DE PREȚ
   ATENȚIE: prețul și butonul NU sunt scrise de mână în pagină. Vin din
   shortcode-ul [wpchill_pricing] (plugin-ul wpchill-utils), care produce
   markup cu clasele lui: `wpchill_price__original`, `wpchill_price__normal`,
   `wpchill_price__difference` și butonul EDD `.edd-submit`. Regulile de mai jos
   îmbracă acel markup ca să arate a card de preț.

   Butonul de cumpărare NU e stilizat aici: arată la fel ca cel din cardul
   Agency, deci are o secțiune proprie, a 7-a.
   -------------------------------------------------------------------------- */

#modula-pricing .wp-block-columns {
	align-items: stretch;
	gap: 0;
	margin: 0;
}

#modula-pricing .mod-price {
	margin: 0 0 1.5rem;
}

#modula-pricing .mod-price .wpchill_price_wrap {
	padding: 0;
	text-align: left;
}

/* Prețul vechi, tăiat. Apare doar când produsul chiar are reducere. */
#modula-pricing .mod-price .wpchill_price__original {
	display: block;
	margin: 0 0 .15rem;
	color: var(--wp--preset--color--secondary);
	font-size: .85rem;
	text-decoration: line-through;
	text-decoration-thickness: auto;
	text-decoration-color: currentColor;
}

/* Prețul mare. */
#modula-pricing .mod-price .wpchill_price__normal {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--primary);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	text-align: left;
}

#modula-pricing .mod-price .wpchill_price__normal span {
	font-size: inherit;
}

/* Simbolul de monedă, ridicat lângă cifre. */
#modula-pricing .mod-price .wpchill_price__normal sup {
	top: auto;
	margin-right: 2px;
	font-size: 1.15rem;
	font-weight: 600;
	vertical-align: super;
}

/* Cât economisești. Apare tot doar la produsele cu reducere. */
#modula-pricing .mod-price .wpchill_price__difference {
	display: block;
	margin: .4rem 0 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font-size: .85rem;
	font-weight: 600;
}

#modula-pricing .mod-price .edd_download_purchase_form {
	margin: 0;
}

#modula-pricing .mod-footnote {
	margin-top: 2rem;
	color: var(--wp--preset--color--secondary);
	font-size: .85rem;
}


/* -----------------------------------------------------------------------------
   5. AFIȘARE ANUAL vs LIFETIME
   Ambele variante sunt în pagină tot timpul; aici doar ascundem una dintre ele.
   Clasa `.is-lifetime` e pusă pe `#modula-pricing` de pricing.js la click.
   -------------------------------------------------------------------------- */

/* Implicit se ascunde tot ce ține de lifetime. */
#modula-pricing .mod-lifetime,
#modula-pricing .mod-only-lifetime {
	display: none;
}

/* Cu `.is-lifetime` pusă, se ascunde tot ce ține de varianta anuală. */
#modula-pricing.is-lifetime .mod-annual,
#modula-pricing.is-lifetime .mod-only-annual {
	display: none;
}

/* Și reapare perechea lifetime. Cele două nu se pot grupa: prima e un bloc
   obișnuit, a doua e un `<li>` și are nevoie de `list-item` ca să-și păstreze
   bulina — cu `block` ar rămâne fără ea. */
#modula-pricing.is-lifetime .mod-lifetime {
	display: block;
}

#modula-pricing.is-lifetime .mod-only-lifetime {
	display: list-item;
}


/* -----------------------------------------------------------------------------
   6. CARDUL AGENCY
   Un singur card, cu preț care se schimbă din dropdown-ul de număr de site-uri.
   -------------------------------------------------------------------------- */

#modula-agency h2 {
	color: var(--wp--preset--color--primary);
}

#modula-agency .mod-agency-card {
	max-width: 24rem;
	margin: 0 auto;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--base);
	text-align: center;
}

#modula-agency .mod-amt {
	color: var(--wp--preset--color--primary);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
}

#modula-agency .mod-amt sup {
	top: -1rem;
	margin-right: 2px;
	font-size: 1rem;
	font-weight: 600;
}

/* Sufixul „/ yr", mai mic și mai șters decât cifrele. */
#modula-agency .mod-amt .per {
	color: var(--wp--preset--color--secondary);
	font-size: 1rem;
	font-weight: 600;
}

#modula-agency .mod-ag-field {
	margin: 1.25rem 0 .25rem;
	text-align: left;
}

#modula-agency .mod-ag-field label {
	display: block;
	margin: 0 0 .35rem;
	color: var(--wp--preset--color--secondary);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* Săgeata dropdown-ului e o imagine SVG inline. Culoarea ei e scrisă direct în
   imagine (`stroke='%231A1A1A'`), pentru că un data URI nu poate citi variabile
   CSS. E aceeași valoare cu `--wp--preset--color--primary`; dacă schimbi tema,
   schimb-o și aici. */
#modula-agency select {
	width: 100%;
	padding: .7rem 2.6rem .7rem .8rem;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8rem center/14px;
	color: var(--wp--preset--color--primary);
	font-size: 1rem;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

#modula-agency select:hover {
	border-color: var(--wp--preset--color--secondary);
}

#modula-agency select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	/* Inelul de focus e chiar culoarea de text a temei, diluată cu `color-mix`.
	   Așa rămâne corect și dacă cineva schimbă paleta din Ollie. */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}

#modula-agency .mod-agency-note {
	margin: 1.1rem 0 0;
	color: var(--wp--preset--color--secondary);
	font-size: .82rem;
}


/* -----------------------------------------------------------------------------
   7. BUTONUL DE CUMPĂRARE
   Același buton negru apare în două locuri: în cardurile de preț (unde e
   butonul EDD, cu clasa `.edd-submit`) și în cardul Agency (unde e un link
   scris de mână, cu clasa `.mod-buy`). Arată identic, deci e o singură regulă.

   DE CE îl stilizăm deloc: staging-ul face dequeue la CSS-ul EDD, deci fără
   regulile astea butonul ar rămâne butonul default al browserului.

   DE CE `:not(.edd-no-js)`: EDD tipărește și un buton de rezervă pentru cazul
   fără JavaScript, ascuns din alt stylesheet. Fără excludere, regula asta (care
   are specificitate de ID, deci câștigă) l-ar face vizibil și ar apărea două
   butoane unul sub altul.
   -------------------------------------------------------------------------- */

#modula-pricing .mod-price .edd-submit:not(.edd-no-js),
#modula-agency .mod-buy {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 1.1rem 0 0;
	padding: .85rem 1rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: .15s;
}

/* La hover butonul se golește: fundalul devine alb, textul negru. */
#modula-pricing .mod-price .edd-submit:not(.edd-no-js):hover,
#modula-agency .mod-buy:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}


/* -----------------------------------------------------------------------------
   8. TABELUL COMPARATIV

   DE ȘTIUT: prima coloană (numele funcționalității) e formată din `<td>`, nu din
   `<th>`. A existat aici o regulă `#modula-compare tbody th` care o alinia la
   stânga; ea nu s-a aplicat niciodată, pentru că nu există niciun `th` în
   `tbody`. Am scos-o, deci coloana rămâne centrată — exact cum arată și acum.
   Dacă o vrei aliniată la stânga, regula corectă e
   `#modula-compare tbody td:first-child { text-align: left; }`.
   -------------------------------------------------------------------------- */

#modula-compare table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}

#modula-compare th,
#modula-compare td {
	padding: .75rem 1.1rem;
	border-top: 1px solid var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--secondary);
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
}

/* Capul de tabel rămâne lipit sus la scroll, ca să știi mereu ce plan citești. */
#modula-compare thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 1.05rem 1.1rem;
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 700;
}

#modula-compare thead th:first-child {
	width: 34%;
	text-align: left;
}

#modula-compare tfoot td {
	padding: 1rem 1.1rem;
	border-top: 1px solid var(--wp--preset--color--border-light);
	background: var(--wp--preset--color--base);
}


/* -----------------------------------------------------------------------------
   9. POPOVER-UL CU VIDEO
   Butonul „i" din tabel deschide un mic panou cu un clip demonstrativ.
   Panoul (`#mod-vpop`) e creat din JavaScript, nu există în pagină.
   -------------------------------------------------------------------------- */

.mod-vinfo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: .5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--border-dark);
	cursor: pointer;
	vertical-align: -2px;
	transition: color .15s;
}

.mod-vinfo:hover,
.mod-vinfo:focus {
	color: var(--wp--preset--color--primary);
	outline: none;
}

#mod-vpop {
	position: fixed;
	z-index: 99999;
	display: none;
	border: 1px solid var(--wp--preset--color--border-light);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--large-light);
}

#mod-vpop .mod-vpop-head {
	padding: .6rem .85rem;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

#mod-vpop video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--wp--preset--color--black);
}


/* -----------------------------------------------------------------------------
   10. FAQ
   Doar lățimea containerului. Întrebările sunt un bloc core „Accordion", care
   își aduce singur stilurile — nu-l îmbrăcăm noi.
   ISTORIC: aici au existat reguli pentru `<details>` și `<summary>`, de pe vremea
   când FAQ-ul era scris de mână. Nu mai există așa ceva în pagină, deci au fost
   scoase. Dacă cineva revine la `<details>`, trebuie rescrise.
   -------------------------------------------------------------------------- */

.mod-faq {
	max-width: 820px;
	margin: 1rem auto 0;
}


/* -----------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Sub 860px tabelul nu mai încape: îl lăsăm să se deruleze pe orizontală, iar
   capul lipicios se dezactivează (n-are sens într-un container care se mișcă). */
@media (max-width: 860px) {

	#modula-compare {
		padding: 0 16px;
	}

	#modula-compare table {
		min-width: 640px;
	}

	#modula-compare thead th {
		position: static;
	}
}

/* Sub 820px cardurile de preț trec una sub alta. */
@media (max-width: 820px) {

	#modula-pricing .wp-block-columns {
		flex-wrap: wrap;
		row-gap: 1.25rem;
	}
}