/* ============================================================
   COMPONENTE — clase deținute de CSS
   cursurimedicale.ro
   ------------------------------------------------------------
   REGULA DE PROPRIETATE (citește o dată, economisești ore)

   Fiecare clasă are UN SINGUR proprietar. Dacă o clasă e
   definită și în Elementor, și aici, nu vei ști niciodată care
   câștigă și de ce.

   Deținute de ELEMENTOR (Class Manager) — NU apar în acest fișier:
     u-wrap · u-sec · u-band · u-card · u-lift
     u-btn · u-btn--line · u-btn--sm · u-eyebrow · u-head

   Deținute de CSS (acest fișier):
     u-tick · u-skip          → apar în interiorul widget-urilor HTML
     cmm-tldr · cmm-cmp · cmm-faq → markup semantic (dl, table, details)

   Motivul separării: clasele Elementor sunt ajustabile vizual, dar
   NU se aplică sigur în widget-urile HTML (elementor/elementor#36018).
   Componentele care trăiesc în widget-uri HTML rămân deci în CSS.
   ============================================================ */

/* ============================================================
   1. Utilitare care apar în widget-uri HTML
   ============================================================ */

/* Bifa pătrată — folosită în listele din blocurile HTML */
.cmm-scope .u-tick {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 2px;
	border-radius: 6px;
	background: var(--teal-tint);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cmm-scope .u-tick svg { width: 11px; height: 11px; }

/* Link de sărire la conținut — cerință de accesibilitate */
.u-skip {
	position: absolute;
	left: -9999px;
	z-index: 200;
	padding: 13px 20px;
	background: #fff;
	color: var(--ink);
	font-weight: 600;
	border-radius: 0 0 10px 0;
}
.u-skip:focus { left: 0; }

/* Focus vizibil pe tot site-ul */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   2. „Cursul pe scurt" — bloc de extragere pentru motoarele
      de răspuns. Necesită <dl>/<dt>/<dd>.
   ============================================================ */
.cmm-scope .cmm-tldr {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
	padding: 34px 36px;
}
.cmm-scope .cmm-tldr__h {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}
.cmm-scope .cmm-tldr__h svg { width: 22px; height: 22px; flex: none; }
.cmm-scope .cmm-tldr__h h2 {
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}
.cmm-scope .cmm-tldr dl {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 40px;
	margin: 0;
}
.cmm-scope .cmm-tldr dt {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 4px;
}
.cmm-scope .cmm-tldr dd { font-size: 14.5px; color: var(--body); margin: 0; }
.cmm-scope .cmm-tldr dd b { color: var(--ink); font-weight: 600; }

/* ============================================================
   3. Tabelul comparativ de pachete
   ============================================================ */
.cmm-scope .cmm-cmp {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
	box-shadow: var(--sh-xs);
	-webkit-overflow-scrolling: touch;
}
.cmm-scope .cmm-cmp table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
	min-width: 640px;
}
.cmm-scope .cmm-cmp caption {
	text-align: left;
	padding: 20px 24px 4px;
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
}
.cmm-scope .cmm-cmp th,
.cmm-scope .cmm-cmp td {
	padding: 13px 20px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.cmm-scope .cmm-cmp thead th {
	background: var(--band);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink);
}
.cmm-scope .cmm-cmp tbody th { font-weight: 500; color: var(--body); }
.cmm-scope .cmm-cmp td { text-align: center; color: var(--body); }
.cmm-scope .cmm-cmp .is-hi { background: #FFFBF4; }
.cmm-scope .cmm-cmp tr:last-child th,
.cmm-scope .cmm-cmp tr:last-child td { border-bottom: none; }

/* ============================================================
   4. FAQ pe <details> nativ — fără JavaScript
   ============================================================ */
.cmm-scope .cmm-faq { max-width: 880px; margin-inline: auto; }
.cmm-scope .cmm-faq details {
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	margin-bottom: 11px;
	background: #fff;
	box-shadow: var(--sh-xs);
}
.cmm-scope .cmm-faq summary {
	list-style: none;
	cursor: pointer;
	min-height: var(--tap);
	padding: 19px 23px;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
}
.cmm-scope .cmm-faq summary::-webkit-details-marker { display: none; }
.cmm-scope .cmm-faq summary::after {
	content: "+";
	font-family: var(--serif);
	font-size: 23px;
	line-height: 1;
	color: var(--orange);
	flex: none;
	transition: transform .2s ease;
}
.cmm-scope .cmm-faq details[open] summary::after { transform: rotate(45deg); }
.cmm-scope .cmm-faq .cmm-faq__a { padding: 0 23px 21px; font-size: 15px; color: var(--body); }
.cmm-scope .cmm-faq .cmm-faq__a b { color: var(--ink); }
.cmm-scope .cmm-faq .cmm-faq__a p + p { margin-top: 10px; }
.cmm-scope .cmm-faq .cmm-faq__a ul {
	margin: 10px 0 0 4px;
	padding-left: 18px;
	list-style: disc;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cmm-scope .cmm-faq .cmm-faq__a a {
	color: var(--blue-d);
	font-weight: 600;
	text-decoration: underline;
}

/* ============================================================
   5. Responsive
   ============================================================ */
@media (max-width: 1024px) {
	.cmm-scope .cmm-tldr dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.cmm-scope .cmm-tldr { padding: 26px 22px; }
	.cmm-scope .cmm-tldr dl { grid-template-columns: 1fr; }
}

/* ============================================================
   6. AJUTOARE PENTRU TEXT ÎMBOGĂȚIT
   ------------------------------------------------------------
   Elementele atomice Heading și Paragraph din Elementor V4 fac
   ESCAPE la HTML: dacă scrii <b>medical</b>, pe pagină apare
   literal „<b>medical</b>". Este comportamentul lor normal.

   Pentru cele câteva locuri unde ai nevoie de accent în
   interiorul unui text, folosești widget-ul HTML (sau widget-ul
   clasic Text Editor) și clasele de mai jos.

   Stilurile de bază pentru h1–h3 și p vin deja din scope.css,
   deci aici sunt doar accentele.
   ============================================================ */

/* Accent portocaliu — „360°" din titlul principal */
.cmm-scope .cmm-hl {
	color: var(--orange-hi);
	font-weight: 600;
}

/* Accent teal — pentru evidențieri secundare */
.cmm-scope .cmm-hl-teal {
	color: var(--teal-d);
	font-weight: 600;
}

/* Badge inline — „Nou 2026" lângă un titlu */
.cmm-scope .cmm-badge {
	display: inline-block;
	margin-left: 7px;
	padding: 3px 9px;
	border-radius: var(--r-pill);
	background: var(--orange-tint);
	color: var(--orange-d);
	font-family: var(--sans);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Text în două mărimi — „1.785" + „lei" */
.cmm-scope .cmm-unit {
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

/* ============================================================
   7. ICONIȚE
   ------------------------------------------------------------
   Un SVG inline fără atribute width/height nu are dimensiune
   intrinsecă. Într-un container flex se colapsează la zero și
   pare că a dispărut.

   Clasele de mai jos rezolvă asta o dată pentru toate: cutia dă
   dimensiunea, SVG-ul o umple. Culoarea se moștenește prin
   `currentColor`, deci o poți schimba din Elementor, de pe
   containerul părinte (Typography → Color).
   ============================================================ */

/* Cutia colorată */
.cmm-scope .cmm-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 11px;
}
.cmm-scope .cmm-ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Mărimi */
.cmm-scope .cmm-ico--sm { width: 32px; height: 32px; padding: 8px; border-radius: 9px; }
.cmm-scope .cmm-ico--md { width: 40px; height: 40px; padding: 10px; }
.cmm-scope .cmm-ico--lg { width: 44px; height: 44px; padding: 11px; border-radius: 12px; }
.cmm-scope .cmm-ico--xl { width: 52px; height: 52px; padding: 14px; border-radius: 14px; }

/* Fundaluri */
.cmm-scope .cmm-ico--blue  { background: var(--blue-tint); color: var(--blue); }
.cmm-scope .cmm-ico--teal  { background: var(--teal-tint); color: var(--teal); }
.cmm-scope .cmm-ico--amber { background: var(--orange-tint); color: var(--orange-d); }
.cmm-scope .cmm-ico--mix {
	background: linear-gradient(135deg, var(--blue-tint), var(--teal-tint));
	color: var(--blue-d);
}

/* Iconiță liberă, fără cutie — pentru bife și marcaje inline */
.cmm-scope .cmm-i {
	display: inline-flex;
	flex: none;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
.cmm-scope .cmm-i svg { display: block; width: 100%; height: 100%; }
.cmm-scope .cmm-i--14 { width: 14px; height: 14px; }
.cmm-scope .cmm-i--18 { width: 18px; height: 18px; }
.cmm-scope .cmm-i--22 { width: 22px; height: 22px; }
.cmm-scope .cmm-i--30 { width: 30px; height: 30px; }

/* Culori pentru iconițele libere */
.cmm-scope .cmm-i--teal  { color: var(--teal); }
.cmm-scope .cmm-i--blue  { color: var(--blue); }
.cmm-scope .cmm-i--cyan  { color: var(--cyan); }
.cmm-scope .cmm-i--amber { color: var(--orange); }