/* ============================================================
   MATIVERA — PHONE-PERFECT
   Completări peste mobile-universal.css pentru încadrare
   perfectă pe TOATE telefoanele:
     - iPhone SE (320px) → iPhone 16 Pro Max (430px)
     - Android mic (340px) → Pixel/Galaxy moderne (412px)
     - Foldable închis (280px) — Z Fold, Surface Duo
     - Landscape orientation
     - iPhone safe-area-inset (notch + home indicator)
   ============================================================ */

/* === Bază globală — chestiuni iOS / Android comune === */
html {
  /* Previne iOS să mărească textul la rotirea ecranului */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Previne pull-to-refresh în mod app-like */
  overscroll-behavior-y: contain;}

body {
  /* Smoother scroll pe iOS */
  -webkit-overflow-scrolling: touch;
  /* Elimină highlight gri când atingi link-uri */
  -webkit-tap-highlight-color: transparent;}

/* Tap highlight transparent peste tot */
a, button, input, [role="button"], .btn, .ripple {
  -webkit-tap-highlight-color: transparent;}

/* === SAFE AREA pentru iPhone X+ (notch + home indicator) === */
@supports (padding: env(safe-area-inset-top)) {
  .nav, header.nav {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);}
  .nav-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));}
  /* Footer / cookie banner respectă home indicator-ul de jos */
  footer, .cookie-banner {
    padding-bottom: max(20px, env(safe-area-inset-bottom));}
  /* Modale fixed-bottom respectă home indicator */
  .modal-overlay .modal,
  .video-modal-container,
  #nutritionVideoModal > div {
    padding-bottom: max(20px, env(safe-area-inset-bottom));}
}

/* === Container — gutter consistent + safe-area === */
.container, main.container, main.page {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(16px, env(safe-area-inset-left, 16px));
  padding-right: max(16px, env(safe-area-inset-right, 16px));}

/* === Previne overflow lateral indiferent de pagină === */
html, body {
  overflow-x: hidden;}
* {
  /* Imaginile/video-urile cu width fix nu mai depășesc viewport-ul */
  max-width: 100%;}

/* === Tabele cu scroll orizontal pe mobil === */
@media (max-width: 768px) {
  .table-wrapper, .data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;}
}

/* === FOLDABLE închis (≤320px width) === */
@media (max-width: 320px) {
  :root { --gutter: 8px;}

  .container, main.container, main.page {
    padding-left: 8px;
    padding-right: 8px;}

  /* Reduce și mai mult titlurile */
  h1 { font-size: clamp(1.2rem, 7vw, 1.5rem) !important;}
  h2 { font-size: clamp(1.05rem, 6vw, 1.3rem) !important;}
  h3 { font-size: 1rem !important;}

  /* Butoane mai compacte */
  .btn {
    font-size: 0.82rem !important;
    padding: 10px 12px !important;
    min-height: 40px;}

  /* Carduri cu padding minim */
  .card, .glass.card, .feature-card {
    padding: 12px 10px !important;
    border-radius: 12px !important;}

  /* Carduri grid 1 coloană forțat */
  .psychologists-grid-spectacular,
  .grid-psy,
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;}
}

/* === LANDSCAPE pe telefon (max-height mic + landscape) === */
@media (max-height: 500px) and (orientation: landscape) {
  /* Hero / sectiuni full-screen — limită height ca să nu acopere tot */
  .hero, .coach-hero-spectacular {
    min-height: auto !important;
    padding: 30px 16px !important;}
  /* Modale ocupă fereastra dar lasă navbar-ul vizibil */
  .modal-overlay .modal,
  .video-modal-container {
    max-height: 90vh !important;
    max-height: 90dvh !important;}
  /* Player video — folosește toată înălțimea disponibilă */
  .video-modal-player {
    max-height: 75vh;}
}

/* === iPHONE SE / iPhone 5 (320×568) — special === */
@media (max-width: 374px) {
  /* Coach-profil hero — micșorează avatar */
  .coach-avatar-frame {
    width: 130px !important;
    height: 130px !important;}
  .coach-name-spectacular {
    font-size: 1.6rem !important;}
  /* Specialități chips */
  .specialty-chip {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;}
  /* Quick stats — un rând per stat */
  .coach-quick-stats {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100%;}
  .quick-stat {
    width: 100%;
    justify-content: flex-start;}
}

/* === Player video modal (coach + nutrition) — fit perfect === */
@media (max-width: 600px) {
  .video-modal {
    padding: 0 !important;
    align-items: flex-end !important;}
  .video-modal-container {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;}
  .video-modal-player {
    border-radius: 14px 14px 0 0;}
  .video-modal-content {
    padding: 16px !important;}
  .video-modal-title {
    font-size: 1.05rem !important;}
  .video-modal-actions {
    gap: 6px;}
  .modal-action-btn {
    padding: 8px 12px !important;
    font-size: 0.78rem !important;
    flex: 1 1 auto;}

  /* Quality selector — mai mic ca să nu acopere tot */
  .video-quality-control {
    top: 8px !important;
    left: 8px !important;
    padding: 4px 8px !important;
    font-size: 0.72rem !important;}

  /* Nutrition modal */
  #nutritionVideoModal > div {
    max-width: 100% !important;}
}

/* === Coach-profil layout — sidebar peste content pe mobil === */
@media (max-width: 768px) {
  .coach-main-content {
    grid-template-columns: 1fr !important;
    padding: 20px 14px !important;
    gap: 18px !important;}
  .coach-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;}
  .sidebar-card {
    padding: 18px !important;
    border-radius: 18px !important;}
  .coach-hero-content {
    padding: 30px 16px !important;
    gap: 18px !important;}
  .videos-grid-large {
    grid-template-columns: 1fr !important;
    gap: 14px !important;}
  .video-card-enhanced {
    border-radius: 18px !important;}
  .video-info-large {
    padding: 16px !important;}
  .video-title-large {
    font-size: 1rem !important;}
}

/* === Profil utilizator / dashboard layout === */
@media (max-width: 768px) {
  .profile-grid,
  .dashboard-grid,
  .grid.two,
  .grid.three {
    grid-template-columns: 1fr !important;}
}

/* === Iframe-uri video (YouTube, etc.) — mereu 16:9 responsive === */
.video-player iframe,
.video-modal-player iframe,
iframe[src*="youtube"],
iframe[src*="vimeo"] {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  display: block;}

/* === Imagini avatar / profile — nu se deformează niciodată === */
.coach-avatar-main img,
.profile-avatar img,
.psy-avatar img,
.avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;}

/* === Cookie banner / toast-uri pe mobil — full-width fără gap === */
@media (max-width: 480px) {
  .cookie-banner {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    width: auto !important;
    max-width: none !important;}
}

/* === Form inputs — niciodată sub 16px (previne zoom iOS) === */
input, textarea, select, .input, .form-control, .form-input {
  font-size: max(16px, 1rem);}

/* === Stack-uire automată pentru rânduri de butoane multiple === */
@media (max-width: 480px) {
  .row.actions, .modal-footer, .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;}
  .row.actions > .btn,
  .modal-footer > .btn,
  .form-actions > .btn {
    width: 100% !important;}
}

/* === Badge-uri și pill-uri — wrap în loc de overflow === */
.specialties-list, .coach-specialties-hero, .video-modal-actions {
  flex-wrap: wrap;}

/* === Tap targets minim 44×44 pe TOATE telefoanele === */
@media (max-width: 768px) {
  a.btn, button, .btn, [role="button"] {
    min-height: 44px;}
  /* Excepție: butoane mici/icon-only */
  .btn.btn-sm, .btn-icon, .menu-toggle, .nav button.icon {
    min-height: 0;}
}

/* === Z-index sane pentru overlays peste navbar pe mobil === */
.video-modal, #nutritionVideoModal,
.modal-overlay {
  z-index: 10001 !important;}

/* === SCROLLBAR subtil pe touch (Webkit) === */
*::-webkit-scrollbar { width: 4px; height: 4px;}
*::-webkit-scrollbar-thumb {
  background: var(--mv-elev-4);
  border-radius: 4px;}
*::-webkit-scrollbar-track { background: transparent;}

/* ============================================================
   PERFORMANȚĂ MOBILĂ — dezactivez efecte costisitoare pe ecrane mici.
   Toate browserele beneficiază (Chrome, Firefox, Brave, Opera, Safari).
   Backdrop-filter și box-shadow blur sunt principalele cauze de lag.
   ============================================================ */

@media (max-width: 768px) {
  /* Dezactivez backdrop-filter peste tot — costă enorm pe GPU mobile */
  body .glass,
  body .nav,
  body .menu,
  body .modal-overlay,
  body .modal,
  body .modal-card,
  body .video-modal,
  body .video-modal-container,
  body .day-detail,
  body .day-detail-card,
  body .video-quality-control,
  body .navbar,
  body .back-nav,
  body .progress-header,
  body .back-button-float,
  body .sidebar-card,
  body .video-card-enhanced,
  body .modal-action-btn {}

  /* Box-shadow simplificat (blur mare = lag) */
  body .glass,
  body .card,
  body .video-card-enhanced,
  body .sidebar-card,
  body .modal {}

  /* Animații continue dezactivate */
  body .glow-orb,
  body .breathing-orb,
  body .floating-particle,
  body .particle,
  body .zen-particles,
  body .zen-circles,
  body .ambient-bg,
  body .coach-bg-animated,
  body .hero-pattern,
  body .waves-container,
  body .wave,
  body .psychologists-bg,
  body .progress-fill::after,
  body .name-shimmer,
  body .skill-progress::after {
    display: none !important;
    animation: none !important;}

  /* Reduc complexitatea filter-ului pe carduri */
  body * {}

  /* Background-attachment fixed e LAG pe iOS — îl dezactivez */
  body, html {
    background-attachment: scroll !important;}

  /* Tranziții mai rapide pe mobil */
  body * {
    transition-duration: 0.2s !important;}
}

/* === Reduce data mode (utilizator pe rețea lentă) === */
@media (prefers-reduced-data: reduce) {
  body .glow-orb, body .breathing-orb, body .particle,
  body .ambient-bg, body .zen-particles, body .floating-particles,
  body .coach-bg-animated, body video[autoplay] {
    display: none !important;}
}

/* === Containement — browserul nu mai re-calculează tot la scroll === */
@media (max-width: 768px) {
  body .card,
  body .video-card-enhanced,
  body .psychologist-card-refined,
  body .sidebar-card,
  body .info-card,
  body .stat-card,
  body .calendar-day,
  body .appointment-card,
  body .video-info-large {
    contain: layout style;}
}

/* === content-visibility — render lazy pentru elementele off-screen === */
@media (max-width: 768px) {
  body .videos-grid-large > *,
  body .psychologists-grid-spectacular > *,
  body .grid-psy > *,
  body .appointments-list > * {
    content-visibility: auto;
    contain-intrinsic-size: 0 280px;}
}

/* ============================================================
   LISTING SPECIALIȘTI — 1 coloană FULL pe mobil
   Override puternic pentru paginile care fortează 3 coloane
   (psihologi.php, nutritionisti.php, dezvoltare-personala.php)
   ============================================================ */
@media (max-width: 768px) {
  /* Forteaza 1 coloana — bate orice inline-style si :not() */
  body .psychologists-grid-spectacular,
  body .nutritionists-grid-spectacular,
  body .grid-psy,
  body .card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 !important;
    max-width: 600px !important;
    margin: 0 auto !important;}

  /* Card-ul re-primeste padding si border-radius normale */
  body .psychologist-card-refined,
  body .nutritionist-card-refined,
  body .psy-card,
  body .nutritionist-card {
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;}

  /* Cover (imaginea de sus) — inaltime decenta, nu micsorat la 50px */
  body .psychologist-cover-refined,
  body .nutritionist-cover-refined {
    height: 140px !important;}

  /* Avatar — 64px, nu 32px */
  body .psychologist-avatar-refined,
  body .nutritionist-avatar-refined {
    width: 64px !important;
    height: 64px !important;
    left: 16px !important;
    top: -32px !important;
    border-width: 3px !important;}

  /* Body card cu padding decent */
  body .psychologist-body-refined,
  body .psychologist-content-refined,
  body .nutritionist-body-refined {
    padding: 38px 16px 16px !important;}

  /* Numele — readable */
  body .psychologist-name-refined,
  body .nutritionist-name-refined {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;}

  body .psychologist-subtitle-refined,
  body .nutritionist-subtitle-refined {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;}

  /* Specialty tags — wrap natural */
  body .psychologist-specialties-refined,
  body .nutritionist-specialties-refined {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-bottom: 10px !important;}
  body .specialty-tag-refined,
  body .specialty-chip {
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;}

  /* Descriere - 2 randuri max */
  body .psychologist-description-refined,
  body .nutritionist-description-refined {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;}

  /* Footer card cu pret + buton — pe rand */
  body .psychologist-footer-refined,
  body .nutritionist-footer-refined {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;}
  body .psychologist-price-refined,
  body .nutritionist-price-refined {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    flex: 1 1 auto !important;}
  body .book-btn-refined {
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
    flex: 0 0 auto !important;}

  /* Badge certificat in loc vizibil */
  body .psychologist-badge-refined,
  body .nutritionist-badge-refined,
  body .certified-badge-refined {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    transform: none !important;}
}

/* === Foarte mic (≤380px) — pastreaza 1 col, padding mai compact === */
@media (max-width: 380px) {
  body .psychologist-cover-refined,
  body .nutritionist-cover-refined {
    height: 110px !important;}
  body .psychologist-body-refined,
  body .psychologist-content-refined,
  body .nutritionist-body-refined {
    padding: 32px 14px 14px !important;}
  body .psychologist-name-refined,
  body .nutritionist-name-refined {
    font-size: 0.98rem !important;}
  body .psychologist-footer-refined,
  body .nutritionist-footer-refined {
    flex-direction: column !important;
    align-items: stretch !important;}
  body .book-btn-refined {
    width: 100% !important;
    text-align: center !important;}
}

/* === Override regula 3-col din header.php inline === */
@media (max-width: 550px) {
  body .psychologists-grid-spectacular,
  body .grid-psy,
  body .card-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;}
}

/* ============================================================
   CALENDAR REZERVĂRI (profil.php + profil-nutritionist.php)
   Pe mobil: ascund punctele aglomerate, pastrez doar numarul
   zilei + un badge "X libere". La tap se deschide modalul
   cu sloturile detaliate.
   ============================================================ */
@media (max-width: 768px) {
  body .weekdays-header {
    gap: 4px !important;}
  body .weekday {
    padding: 6px 2px !important;
    font-size: 0.62rem !important;}

  body .calendar-grid {
    gap: 4px !important;}

  body .calendar-day {
    min-height: 56px !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer;}

  body .calendar-day .day-number {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;}

  /* Ascund punctele individuale - confuze pe mobil */
  body .calendar-day .day-slots {
    display: none !important;}

  /* Inlocuiesc cu un mic dot indicator daca exista sloturi libere.
     Marker simplu sub numarul zilei. */
  body .calendar-day:has(.slot-indicator.free)::after,
  body .calendar-day.has-free-slots::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mv-success);
    box-shadow: 0 0 8px rgba(16,185,129,0.6); color: var(--mv-text-inverse);}

  body .calendar-day.other-month {
    opacity: 0.25 !important;}

  body .calendar-day.today {
    border-width: 2px !important;}
}

/* === Foarte mic (≤380px) — calendar și mai compact === */
@media (max-width: 380px) {
  body .calendar-day {
    min-height: 48px !important;
    padding: 4px 2px !important;
    border-radius: 8px !important;}
  body .calendar-day .day-number {
    font-size: 0.85rem !important;}
  body .weekday {
    font-size: 0.55rem !important;
    padding: 4px 1px !important;}
}

/* ============================================================
   MODAL SLOTURI (.day-detail) — bottom-sheet pe mobil
   ============================================================ */
@media (max-width: 600px) {
  body .day-detail {
    padding: 0 !important;
    align-items: flex-end !important;}
  body .day-detail-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 24px 18px max(24px, env(safe-area-inset-bottom, 24px)) !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;}

  body .detail-header {
    margin-bottom: 18px !important;
    align-items: center !important;}

  body .detail-date {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;}

  body .close-btn {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;}

  /* Sloturi - 3 coloane pe iPhone, 2 pe foarte mic */
  body .time-slots-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 18px !important;}

  body .time-slot {
    padding: 12px 6px !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
    min-height: 44px !important;}
}

@media (max-width: 360px) {
  body .time-slots-grid {
    grid-template-columns: repeat(2, 1fr) !important;}
}

/* ============================================================
   PROFIL PSIHOLOG / NUTRITIONIST — hero + content + booking
   ============================================================ */
@media (max-width: 900px) {
  /* Hero psiholog */
  body .hero-card {
    padding: 24px 18px !important;}
  body .hero-content {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;}
  body .hero-image,
  body .profile-photo {
    width: 130px !important;
    height: 130px !important;
    margin: 0 auto !important;}
  body .hero-name {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;}
  body .hero-card .hero-title {
    font-size: 0.95rem !important;}
  body .stats-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;}
  body .stat-item {
    flex: 1 1 calc(33% - 10px) !important;
    min-width: 90px !important;}
}

@media (max-width: 600px) {
  body .content-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;}
  body .content-card {
    padding: 18px !important;
    border-radius: 18px !important;}
  body .content-card.full {
    grid-column: 1 / -1 !important;}

  /* Header calendar (titlu + butoane luna) */
  body .calendar-header {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;}
  body .calendar-title {
    text-align: center;
    font-size: 1.05rem !important;}
  body .calendar-nav {
    justify-content: center !important;
    gap: 8px;}

  /* Price / CTA */
  body .price-cta {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 20px !important;}

  /* Booking footer (preț + buton confirmă) */
  body .booking-footer {
    grid-template-columns: 1fr !important;
    gap: 10px !important;}
}

/* ============================================================
   PROFIL UTILIZATOR (profil-utilizator.php) — tabs + carduri
   ============================================================ */
@media (max-width: 768px) {
  body .profile-layout,
  body .user-profile-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;}

  body .profile-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    margin: 0 -14px 14px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    scrollbar-width: none;}
  body .profile-tabs::-webkit-scrollbar { display: none;}
  body .profile-tab,
  body .tab-btn {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;}
}

/* ============================================================
   PAGINA "PROGRAMĂRILE MELE" — calendar săptămânal
   ============================================================ */
@media (max-width: 768px) {
  body .week-grid,
  body .appointments-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;}
  body .appointment-card {
    padding: 14px !important;
    border-radius: 14px !important;}
}

/* ============================================================
   COACH PROFIL — secțiunea cu videoclipuri
   Fix: titluri rupte cu cratime, badge wrap, back-button overlap
   ============================================================ */

/* Elimina hyphenation pe headere si badge-uri scurte (peste tot) */
body h1, body h2, body h3, body h4, body h5, body h6,
body .section-title, body .section-title-large,
body .section-count, body .specialty-chip, body .specialty-tag-refined,
body .badge, body .pill, body .tag, body .chip,
body .video-duration-large, body .video-badge-new,
body .quick-stat-label, body .quick-stat-value,
body .coach-status, body .video-stat {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;}

/* Section header (titlu + badge) — stack vertical pe mobil */
@media (max-width: 600px) {
  body .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 18px !important;}
  body .section-title-large {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    gap: 10px !important;
    flex-wrap: wrap !important;}
  body .section-title-large i {
    font-size: 1.1rem !important;}
  body .section-count {
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    border-radius: 14px !important;}
}

/* Carduri video — info compact pe mobil */
@media (max-width: 600px) {
  body .video-info-large {
    padding: 14px !important;}
  body .video-title-large {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;}
  body .video-description-card {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 2 !important;}
  body .video-meta-large {
    padding-top: 10px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;}
  body .video-stats {
    gap: 10px !important;}
  body .video-stat,
  body .video-date-card {
    font-size: 0.78rem !important;
    white-space: nowrap !important;}
  /* Badge "NOU" și durată mai mici pe mobil */
  body .video-badge-new {
    top: 10px !important;
    left: 10px !important;
    padding: 5px 10px !important;
    font-size: 0.7rem !important;}
  body .video-duration-large {
    bottom: 10px !important;
    right: 10px !important;
    padding: 6px 12px !important;
    font-size: 0.82rem !important;}
}

/* Back button float — top-left mic, fără să acopere conținutul */
@media (max-width: 900px) {
  body .back-button-float {
    top: max(70px, calc(60px + env(safe-area-inset-top, 0))) !important;
    bottom: auto !important;
    left: 14px !important; transform: none !important;
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    gap: 6px !important;
    background: rgba(11, 18, 32, 0.85) !important;}
  body .back-button-float:hover { transform: !important;}
  body .back-button-float i {
    font-size: 0.85rem !important;}
}

/* Hero coach — quick-stats cu wrap natural */
@media (max-width: 600px) {
  body .quick-stat {
    padding: 10px 14px !important;
    gap: 10px !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;}
  body .quick-stat-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;}
  body .quick-stat-value {
    font-size: 1.1rem !important;
    line-height: 1.1 !important;}
  body .quick-stat-label {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;}
}