/* Tema Mantine (mantine.dev) a site-ului, fără React: culorile, razele, umbrele, fontul și forma componentelor.
   Se aplică pe <body class="mt">: prima pagină (/) și profilurile studiourilor (/studio/…). Celelalte pagini nu o folosesc.
   Culoarea principală e albastrul Mantine („blue”, 10 nuanțe: --m-p0 … --m-p9); pentru altă culoare se schimbă doar aceste 10 valori. */
.mt {
  /* paleta principală (Mantine blue: 10 nuanțe, nuanța 6 e cea folosită pe fundal alb) */
  --m-p0: #e7f5ff; --m-p1: #d0ebff; --m-p2: #a5d8ff; --m-p3: #74c0fc; --m-p4: #4dabf7;
  --m-p5: #339af0; --m-p6: #228be6; --m-p7: #1c7ed6; --m-p8: #1971c2; --m-p9: #1864ab;
  --m-p-light: rgba(34, 139, 230, .1); --m-p-light-hover: rgba(34, 139, 230, .12);
  /* gri Mantine */
  --m-g0: #f8f9fa; --m-g1: #f1f3f5; --m-g2: #e9ecef; --m-g3: #dee2e6; --m-g4: #ced4da;
  --m-g5: #adb5bd; --m-g6: #868e96; --m-g7: #495057; --m-g8: #343a40; --m-g9: #212529;
  --m-negru: #000; --m-alb: #fff; --m-dimmed: var(--m-g6);
  /* raze, umbre, font (valorile implicite Mantine; raza implicită aleasă: md) */
  --m-r-sm: 4px; --m-r-md: 8px; --m-r-lg: 16px; --m-r-xl: 32px;
  --m-shadow-xs: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .1);
  --m-shadow-sm: 0 1px 3px rgba(0, 0, 0, .05), rgba(0, 0, 0, .05) 0 10px 15px -5px, rgba(0, 0, 0, .04) 0 7px 7px -5px;
  --m-shadow-md: 0 1px 3px rgba(0, 0, 0, .05), rgba(0, 0, 0, .05) 0 20px 25px -5px, rgba(0, 0, 0, .04) 0 10px 10px -5px;
  --m-shadow-lg: 0 1px 3px rgba(0, 0, 0, .05), rgba(0, 0, 0, .05) 0 28px 23px -7px, rgba(0, 0, 0, .04) 0 12px 12px -7px;
  --m-shadow-xl: 0 1px 3px rgba(0, 0, 0, .05), rgba(0, 0, 0, .05) 0 36px 28px -7px, rgba(0, 0, 0, .04) 0 17px 17px -7px;
  --m-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* variabilele din comun.css, traduse în Mantine (cardul, detaliile, „Compară” le folosesc) */
  --hartie: var(--m-alb); --suprafata: var(--m-alb); --ink: var(--m-negru); --slab: var(--m-dimmed); --foarte-slab: var(--m-g5);
  --linie: var(--m-g3); --lut: var(--m-p6); --lut-adanc: var(--m-p7); --lut-slab: var(--m-p-light);
  --salvie: #0ca678; --salvie-slab: #e6fcf5; --ceata: #e7f5ff; --ceata-text: #1971c2; --chihlimbar: #fff9db; --chihlimbar-text: #e67700;
  --umbra: var(--m-shadow-xs); --umbra-mare: var(--m-shadow-xl); --raza: var(--m-r-md);
  --serif: var(--m-font); --sans: var(--m-font); --curba: ease;
  --lat: 1200px;
  background: var(--m-alb); color: var(--m-negru); font-family: var(--m-font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; scroll-padding-top: 12px; }
.mt :focus-visible { outline: 2px solid var(--m-p6); outline-offset: 2px; border-radius: var(--m-r-sm); }
.mt .banda-proto { background: var(--m-g9); font-size: 12px; }


/* Button: filled (.principal), default, light (.usor) */
.m-buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: var(--m-r-md);
  border: 1px solid var(--m-g4); background: var(--m-alb); color: var(--m-negru); font: 600 15px/1 var(--m-font); text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background .15s ease, transform .1s ease;
}
.m-buton:hover { background: var(--m-g0); }
.m-buton:active { transform: translateY(1px); }
.m-buton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-buton.principal { background: var(--m-p6); border-color: transparent; color: var(--m-alb); }
.m-buton.principal:hover { background: var(--m-p7); }
.m-buton.usor { background: var(--m-p-light); border-color: transparent; color: var(--m-p7); }
.m-buton.usor:hover { background: var(--m-p-light-hover); }
.m-buton.mare { height: 50px; padding: 0 26px; font-size: 16px; }
.m-buton.mic { height: 30px; padding: 0 12px; font-size: 12px; }
/* Badge: light (implicit), outline (.contur), dot (.punct) */
.m-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--m-r-xl); white-space: nowrap;
  background: var(--m-p-light); color: var(--m-p7); font: 700 11px/1 var(--m-font); letter-spacing: .25px; text-transform: uppercase;
}
.m-badge.gri { background: var(--m-g1); color: var(--m-g7); }
.m-badge.verde { background: #e6fcf5; color: #0ca678; }
.m-badge.violet { background: #f3f0ff; color: #7048e8; }
.m-badge.contur { background: var(--m-alb); border: 1px solid var(--m-g3); color: var(--m-g7); }
.m-badge.mare { height: 26px; padding: 0 12px; font-size: 12px; }

/* ---------- Chip (pastilele de filtre): varianta outline, cu bifă când e ales */
.mt .pastila {
  display: inline-flex; align-items: center; gap: 0; min-height: 32px; height: 32px; padding: 0 16px; border-radius: var(--m-r-xl);
  border: 1px solid var(--m-g4); background: var(--m-alb); color: var(--m-negru); font: 400 14px/1 var(--m-font);
  transition: background .1s ease, border-color .1s ease, color .1s ease, padding .1s ease;
}
.mt .pastila:hover { background: var(--m-g0); border-color: var(--m-g4); }
.mt .pastila:active { transform: translateY(1px); }
.mt .pastila[aria-pressed="true"] { background: var(--m-p-light); border-color: var(--m-p6); color: var(--m-p7); padding-left: 10px; }
.mt .pastila[aria-pressed="true"]::before {
  content: ""; width: 12px; height: 12px; margin-right: 8px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a1 1 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z'/%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 10 7'%3E%3Cpath d='M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a1 1 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mt .pastila.mica { height: 28px; min-height: 28px; font-size: 13px; padding: 0 12px; }
.mt .pastila.accent { background: var(--m-p6); border-color: var(--m-p6); color: var(--m-alb); }


/* ---------- componentele comune (comun.js), în Mantine, doar pe această pagină */
/* Card withBorder */
.mt .card-pz { border: 1px solid var(--m-g3); box-shadow: none; border-radius: var(--m-r-md); padding: 16px; transition: box-shadow .15s ease; }
.mt .card-pz:hover { box-shadow: var(--m-shadow-sm); }
.mt .card-pz.activ { outline: 0; border-color: var(--m-p6); }
.mt .card-pz .cap { padding-left: 0; }   /* fără numărul de ordine din variantele A și B */
.mt .card-pz h3 { font: 600 17px/1.3 var(--m-font); letter-spacing: 0; }
.mt .card-pz .meta { font-size: 13px; }
.mt .card-pz .motiv { border-radius: var(--m-r-md); background: var(--m-g0); color: var(--m-negru); font-size: 14px; padding: 10px 12px; }
.mt .card-pz .motiv::before { color: #0ca678; }
.mt .card-pz .pret { font-size: 14px; color: var(--m-dimmed); }
.mt .card-pz .pret b { font: 700 18px var(--m-font); color: var(--m-negru); }
.mt .inima { width: 32px; height: 32px; border-radius: var(--m-r-md); top: 12px; right: 12px; }
.mt .inima:hover { background: var(--m-g0); }
.mt .inima svg { width: 20px; height: 20px; }
.mt .buton-compara { height: 30px; min-height: 30px; padding: 0 12px; border-radius: var(--m-r-md); border: 1px solid var(--m-g4); font: 600 12px/1 var(--m-font); background: var(--m-alb); }
.mt .buton-compara:hover { background: var(--m-g0); }
.mt .buton-compara[aria-pressed="true"] { background: var(--m-p6); border-color: var(--m-p6); color: var(--m-alb); }
/* Badge light */
.mt .eticheta-pz { display: inline-flex; align-items: center; white-space: nowrap; height: 20px; padding: 0 8px; border-radius: var(--m-r-xl); font: 700 11px/1 var(--m-font); letter-spacing: .25px; text-transform: uppercase; background: var(--m-g1); color: var(--m-g7); }
.mt .eticheta-pz.proba { background: var(--m-p-light); color: var(--m-p7); }
.mt .eticheta-pz.dedicat { background: #f3f0ff; color: #7048e8; }
.mt .eticheta-pz.privat { background: #e7f5ff; color: #1c7ed6; }
.mt .eticheta-pz.om { background: #e6fcf5; color: #0ca678; }
/* Alert light, albastru */
.mt .caseta-medic { background: #e7f5ff; color: var(--m-negru); border-radius: var(--m-r-md); padding: 12px 16px; font-size: 14px; gap: 12px; }
.mt .caseta-medic .icon { width: 20px; height: 20px; background: none; color: #228be6; font-size: 18px; }
.mt .caseta-medic strong { font: 700 14px var(--m-font); color: #1c7ed6; margin-bottom: 4px; }
/* Modal pe calculator, Drawer de jos pe telefon */
.mt .fundal-sheet { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.mt .sheet { border-radius: var(--m-r-md) var(--m-r-md) 0 0; box-shadow: var(--m-shadow-xl); padding: 4px 20px calc(20px + env(safe-area-inset-bottom)); }
.mt .sheet:focus, .mt .sheet:focus-visible { outline: none; }   /* fereastra primește focus la deschidere, ca în Mantine fără chenar */
.mt .sheet .maner { background: var(--m-g3); }
.mt .sheet .sheet-cap { padding: 12px 0; border-bottom: 1px solid var(--m-g2); margin-bottom: 4px; }
.mt .sheet h2 { font: 600 18px/1.3 var(--m-font); }
.mt .sheet .sub { font-size: 14px; }
.mt .inchide { width: 28px; height: 28px; border-radius: var(--m-r-md); background: transparent; color: var(--m-g7); font-size: 20px; }
.mt .inchide:hover { background: var(--m-g0); }
@media (min-width: 900px) { .mt .sheet { border-radius: var(--m-r-md); } }
.mt .detalii-pz h4 { font: 700 12px/1.3 var(--m-font); color: var(--m-dimmed); letter-spacing: .5px; }
.mt .detalii-pz .conditii { border-radius: var(--m-r-md); color: var(--m-negru); }
.mt .detalii-pz .conditii h4 { color: #e67700; }
.mt .pret-mare b { font: 700 22px var(--m-font); }
.mt .tabel-oferte th { color: var(--m-negru); font-weight: 700; }
.mt .tabel-oferte th, .mt .tabel-oferte td { border-bottom-color: var(--m-g3); }
.mt details.toate-preturile summary { color: var(--m-p6); font-weight: 500; }
/* Affix cu butoane: Salvate + Compară */
.mt .bara-jos { background: var(--m-alb); color: var(--m-negru); border: 1px solid var(--m-g3); border-radius: var(--m-r-md); box-shadow: var(--m-shadow-lg); padding: 6px; }
.mt .bara-jos button { border-radius: var(--m-r-sm); height: 36px; padding: 0 16px; font: 500 14px var(--m-font); }
.mt .bara-jos button:hover { background: var(--m-g0); }
.mt .bara-jos button.principal { background: var(--m-p6); color: var(--m-alb); font-weight: 600; }
.mt .bara-jos button.principal:hover { background: var(--m-p7); }
.mt .compara-col { background: var(--m-g0); border: 1px solid var(--m-g2); border-radius: var(--m-r-md); }
.mt .compara-col h3 { font: 600 16px/1.3 var(--m-font); }
.mt .compara-sageata { width: 32px; height: 32px; border-radius: var(--m-r-md); border-color: var(--m-g4); }
.mt .alternative-pz { border: 1px solid var(--m-g3); box-shadow: none; border-radius: var(--m-r-md); }
.mt .alternative-pz h3 { font: 600 17px var(--m-font); }
.mt .alternative-pz button { border-radius: var(--m-r-md); border-color: var(--m-g4); background: var(--m-alb); font: 400 14px var(--m-font); }
.mt .alternative-pz button:hover { border-color: var(--m-p6); background: var(--m-g0); }
.mt .intern-excluse { background: var(--m-g0); border: 1px solid var(--m-g2); border-radius: var(--m-r-md); }