/* ====================================================== 
   OVP DASHBOARD – STIL GENERAL 
====================================================== */

/* ======================================================
   ANULARE STILURI TEMA/SITE - DASHBOARD STANDALONE
====================================================== */

/* Ascunde TOATE elementele temei când dashboard-ul este activ */
body.ovp-dashboard-active #header,
body.ovp-dashboard-active #footer,
body.ovp-dashboard-active header:not(.ovp-header),
body.ovp-dashboard-active footer:not(.ovp-public-footer),
body.ovp-dashboard-active .site-header,
body.ovp-dashboard-active .site-footer,
body.ovp-dashboard-active .main-header,
body.ovp-dashboard-active .main-footer,
body.ovp-dashboard-active #masthead,
body.ovp-dashboard-active #colophon,
body.ovp-dashboard-active .header-wrapper,
body.ovp-dashboard-active .footer-wrapper,
body.ovp-dashboard-active nav.main-navigation,
body.ovp-dashboard-active .nav-menu,
body.ovp-dashboard-active .primary-menu,
body.ovp-dashboard-active .secondary-menu,
body.ovp-dashboard-active .top-bar,
body.ovp-dashboard-active .bottom-bar,
body.ovp-dashboard-active .topbar,
body.ovp-dashboard-active .top-header,
body.ovp-dashboard-active .header-top,
body.ovp-dashboard-active .header-bar,
body.ovp-dashboard-active .announcement-bar,
body.ovp-dashboard-active .promo-bar,
body.ovp-dashboard-active .info-bar,
body.ovp-dashboard-active .notice-bar,
body.ovp-dashboard-active .cookie-bar,
body.ovp-dashboard-active .cookie-notice,
body.ovp-dashboard-active .gdpr-bar,
body.ovp-dashboard-active .sidebar,
body.ovp-dashboard-active #sidebar,
body.ovp-dashboard-active .widget-area,
body.ovp-dashboard-active aside:not(.ovp-sidebar),
body.ovp-dashboard-active .breadcrumbs,
body.ovp-dashboard-active .breadcrumb,
body.ovp-dashboard-active .page-title-wrapper,
body.ovp-dashboard-active .page-header,
body.ovp-dashboard-active .entry-header,
body.ovp-dashboard-active .entry-footer,
body.ovp-dashboard-active .entry-title,
body.ovp-dashboard-active .page-title,
body.ovp-dashboard-active h1.title,
body.ovp-dashboard-active .content-header,
body.ovp-dashboard-active .post-title,
body.ovp-dashboard-active .wp-block-post-title,
body.ovp-dashboard-active h1.wp-block-post-title,
body.ovp-dashboard-active .post-navigation,
body.ovp-dashboard-active .comments-area,
body.ovp-dashboard-active .related-posts,
body.ovp-dashboard-active #wpadminbar,
body.ovp-dashboard-active .admin-bar-placeholder,
body.ovp-dashboard-active .sticky-header,
body.ovp-dashboard-active .fixed-header,
body.ovp-dashboard-active .site-branding,
body.ovp-dashboard-active .menu-toggle,
body.ovp-dashboard-active .mobile-menu,
body.ovp-dashboard-active .mobile-header,
body.ovp-dashboard-active #site-navigation,
body.ovp-dashboard-active .navigation-top,
body.ovp-dashboard-active .navigation-main,
body.ovp-dashboard-active .ast-header,
body.ovp-dashboard-active .ast-footer,
body.ovp-dashboard-active .elementor-location-header,
body.ovp-dashboard-active .elementor-location-footer,
body.ovp-dashboard-active [data-elementor-type="header"],
body.ovp-dashboard-active [data-elementor-type="footer"],
body.ovp-dashboard-active [data-elementor-type="ehp-header"],
body.ovp-dashboard-active [data-elementor-type="ehp-footer"],
body.ovp-dashboard-active .ehp-header,
body.ovp-dashboard-active .ehp-footer,
body.ovp-dashboard-active .ehp-flex-footer,
body.ovp-dashboard-active .elementor-97,
body.ovp-dashboard-active .elementor-94,
body.ovp-dashboard-active .wp-block-template-part,
body.ovp-dashboard-active .has-global-header,
body.ovp-dashboard-active .global-header,
body.ovp-dashboard-active .site-title,
body.ovp-dashboard-active .site-description {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Forțează ascunderea admin bar-ului și a oricărei bare fixe */
body.ovp-dashboard-active #wpadminbar,
html.wp-toolbar body.ovp-dashboard-active #wpadminbar {
  display: none !important;
  height: 0 !important;
}

html.wp-toolbar {
  padding-top: 0 !important;
}

html.wp-toolbar body.ovp-dashboard-active {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.ovp-dashboard-active.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body.ovp-dashboard-active.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ascunde orice element fix în partea de sus */
body.ovp-dashboard-active *[style*="position: fixed"][style*="top"],
body.ovp-dashboard-active *[style*="position:fixed"][style*="top"] {
  display: none !important;
}

/* Resetează containerele temei */
body.ovp-dashboard-active,
body.ovp-dashboard-active html {
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.ovp-dashboard-active .site,
body.ovp-dashboard-active #page,
body.ovp-dashboard-active #content,
body.ovp-dashboard-active .site-content,
body.ovp-dashboard-active .content-area,
body.ovp-dashboard-active .entry-content,
body.ovp-dashboard-active main,
body.ovp-dashboard-active article,
body.ovp-dashboard-active .container,
body.ovp-dashboard-active .wrapper,
body.ovp-dashboard-active .inner,
body.ovp-dashboard-active .main-content,
body.ovp-dashboard-active .page-content,
body.ovp-dashboard-active .post-content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Elimină orice spacing sau margini de la body */
body.ovp-dashboard-active {
  background: #030712 !important;
  overflow-x: hidden;
}

/* Light Mode background */
body.ovp-dashboard-active.ovp-light-mode {
  background: #f9fafb !important;
}

/* Asigură că wrapper-ul nostru ocupă tot ecranul */
body.ovp-dashboard-active .ovp-wrap {
  position: relative;
  z-index: 9999;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Fix pentru admin bar WordPress dacă este vizibil */
body.ovp-dashboard-active.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.ovp-dashboard-active.admin-bar .ovp-wrap {
  min-height: 100vh;
}

/* ====================================================== */

:root {
  --ovp-bg: #030712;
  --ovp-bg-main: #020617;
  --ovp-card: #030712;
  --ovp-text: #ffffff;
  --ovp-muted: #9ca3af;
  --ovp-line: #1f2937;
  --ovp-accent: #CD0202;
  --ovp-accent-hover: #e73333;
  --ovp-radius: 16px;
}

body.page-template-default.page.page-id-447,
body.page-template-default.page.page-id-0,
body.page-template-default.page-slug-dashboard {
  background: #030712;
}

/* LAYOUT PRINCIPAL - FĂRĂ SIDEBAR */
.ovp-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: transparent;
  color: var(--ovp-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* FIX emoji înclinate */
.ovp-nav-icon {
  font-style: normal !important;
}

/* BRAND - ACUM ÎN HEADER */
.ovp-brand {
  display: flex;
  align-items: center;
  gap: 25px;
}

.ovp-brand-logo-link {
  display: inline-block;
  overflow: hidden;
}

.ovp-brand-logo {
  width: 75px;
  height: 75px;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  object-fit: contain;
  display: block;
  transform: scale(1.08);
}

.ovp-brand-title {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.03em;
  color: var(--ovp-text);
}

.ovp-brand-title-short {
  display: none;
}

.ovp-brand-text-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none !important;
}

/* MODIFICARE 68: text mic sub logo/titlu ("domnul profesor"), pe
   Dashboard (= pagina principală) - linia de dedesubt (border-bottom
   al .ovp-header) rămâne pe loc, pentru că înălțimea rândului e oricum
   dictată de logo (75px pe desktop), iar titlu + tagline puse cap la
   cap rămân sub acea înălțime. */
.ovp-brand-tagline {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  /* MODIFICARE 82: --ovp-text-muted nu era definită nicăieri în :root,
     deci fallback-ul static #aaa se aplica mereu, indiferent de temă -
     de aici diferența de culoare/luminozitate față de headerul public
     (raportată de testerul Andrea). --ovp-muted este variabila corectă,
     definită atât pentru dark mode cât și pentru light mode, folosită
     deja de .ovp-public-brand-tagline. */
  color: var(--ovp-muted);
  margin-top: 2px;
}

.ovp-brand-text-link:hover,
.ovp-brand-text-link:focus,
.ovp-brand-text-link:visited {
  text-decoration: none !important;
}

/* Header identic cu evenimente.juridice.ro - efectul de umbră 3D și culoarea
   textului rămân DOAR pe light mode; dimensiunile (logo 75px, titlu 30px,
   gap 25px) sunt acum comune ambelor teme, setate mai sus în regula de bază. */
body.ovp-light-mode .ovp-brand-logo-link {
  display: inline-block;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75) !important;
}

body.ovp-light-mode .ovp-brand-logo {
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0 !important;
  border: none !important;
  display: block !important;
}

body.ovp-light-mode .ovp-brand-title {
  color: #4682b4;
  transition: color .15s ease;
}

body.ovp-light-mode .ovp-brand-text-link:hover .ovp-brand-title,
body.ovp-light-mode .ovp-brand-text-link:focus .ovp-brand-title {
  color: #770000;
}

/* Aceeași formă (colțuri rotunjite) ca pe light mode, dar cu efect 3D pe bază
   de lumină (nu umbră neagră) — pe fundal închis, umbra deschisă la culoare
   scoate logo-ul în evidență în loc să se piardă în fundal.
   NOTĂ: dark mode e starea IMPLICITĂ (body nu primește nicio clasă specială,
   JS-ul doar adaugă/scoate .ovp-light-mode) — de-aia selectorul e
   body:not(.ovp-light-mode), nu body.ovp-dark-mode (care nu există niciunde
   pe body). */
body:not(.ovp-light-mode) .ovp-brand-logo-link {
  display: inline-block;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.45),
              0 0 10px rgba(255, 255, 255, 0.15) !important;
}

body:not(.ovp-light-mode) .ovp-brand-logo {
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0 !important;
  border: none !important;
  display: block !important;
}

/* ======================================================
   NAVBAR ORIZONTAL (FOSTUL SIDEBAR)
====================================================== */

.ovp-navbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ovp-line);
  flex-wrap: wrap;
}

/* BUTOANE NAVIGARE - IDENTICE CU BUTOANELE DIN HEADER */
.ovp-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: var(--ovp-card);
  color: var(--ovp-text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.ovp-nav-btn:hover {
  background: #111827;
  border-color: var(--ovp-accent);
  transform: translateY(-1px);
  color: var(--ovp-text);
}

.ovp-nav-btn.is-active {
  background: var(--ovp-accent);
  border-color: var(--ovp-accent);
  color: #ffffff;
}

.ovp-nav-btn.is-active:hover {
  background: var(--ovp-accent-hover);
  transform: translateY(-1px);
  color: #ffffff;
}

.ovp-nav-icon {
  font-size: 16px;
}

.ovp-nav-text {
  font-size: 14px;
}

/* Pastile informative din meniu (nr. total grile / nr. total utilizatori) -
   arată la fel ca butoanele de navigare, dar nu sunt clickabile. */
.ovp-nav-btn.ovp-nav-info,
.ovp-mobile-nav-btn.ovp-nav-info {
  cursor: default;
  opacity: 0.85;
}

.ovp-nav-btn.ovp-nav-info:hover {
  background: var(--ovp-card);
  border-color: var(--ovp-line);
  transform: none;
  color: var(--ovp-text);
}

.ovp-mobile-nav-btn.ovp-nav-info:hover {
  background: transparent;
  color: var(--ovp-text);
}

/* TITLU SECȚIUNE - ASCUNS */
.ovp-section-header {
margin-bottom: 16px;
    display: none;  /* Ascunde titlurile */
}

.ovp-section-header h1 {
margin: 0;
font-size: 24px;
    font-weight: 700;
    display: none;  /* Ascunde titlurile */
}

/* SUBTEXT - ASCUNS */
.ovp-subtext {
    font-size: 14px;
    color: var(--ovp-muted);
    margin-bottom: 14px;
    display: none;  /* Ascunde subtextul */
}

/* MAIN */
.ovp-main {
  flex: 1;
  padding: 24px 40px;
}

.ovp-main-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* HEADER MODERN CU BUTOANE */
.ovp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ovp-line);
  /* padding-top: NU se fixează static aici - vine din gap-ul automat al
     temei WordPress (inegal, variabil, necunoscut din CSS static) +
     eventual o corecție inline aplicată de JS (vezi ovpEqualizeHeaderSpacing
     în ovp-dashboard.js), care măsoară live spațiul real și îl egalează cu
     padding-bottom-ul de mai sus. */
}

.ovp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ovp-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Online Visitors Counter */
.ovp-header-online-users {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--ovp-card);
  border: 1px solid var(--ovp-line);
  border-radius: 10px;
  color: var(--ovp-text);
  flex-shrink: 0;
  align-self: stretch;
}

.ovp-header-online-users .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: var(--ovp-accent);
  flex-shrink: 0;
}

.ovp-header-online-users-count {
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--ovp-text);
  white-space: nowrap;
}

/* BUTOANE HEADER */
.ovp-header-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: var(--ovp-card);
  color: var(--ovp-text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.ovp-header-btn:hover {
  background: #111827;
  border-color: var(--ovp-accent);
  transform: translateY(-1px);
}

/* MODIFICARE 83: era 16px - mai mic decât iconița contorului de
   utilizatori online din aceeași linie de butoane
   (.ovp-header-online-users .dashicons, 18px, câteva rânduri mai sus),
   decât pragul ≤1024px de mai jos (deja 18px) și decât iconițele
   echivalente din headerul public (.ovp-public-btn-icon-only .dashicons
   / .ovp-public-theme-toggle .dashicons, tot 18px, la orice lățime) -
   de-aici diferența de mărime observată (notificări/temă/admin/login
   vizibil mai mici decât restul). Aliniat la 18px, ca toate iconițele
   din header (dashboard și public) să fie identice ca mărime pe
   desktop. */
.ovp-header-icon {
  font-size: 18px;
}

.ovp-header-text {
  white-space: nowrap;
}

/* NOTIFICĂRI */
.ovp-notifications {
  position: relative;
}

.ovp-notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--ovp-accent);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.ovp-notifications-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  background: var(--ovp-card);
  border: 1px solid var(--ovp-line);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  z-index: 1000;
  display: none;
  margin-top: 8px;
}

.ovp-notifications-dropdown.show {
  display: block;
}

.ovp-notifications-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ovp-line);
}

.ovp-notifications-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.ovp-notifications-list {
  max-height: 300px;
  overflow-y: auto;
}

.ovp-notification-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ovp-line);
  cursor: pointer;
  transition: background 0.2s ease;
}

.ovp-notification-item:hover {
  background: #111827;
}

.ovp-notification-item:last-child {
  border-bottom: none;
}

.ovp-notification-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--ovp-text);
}

.ovp-notification-message {
  font-size: 12px;
  color: var(--ovp-muted);
  line-height: 1.4;
}

.ovp-notification-empty {
  padding: 20px;
  text-align: center;
  color: var(--ovp-muted);
  font-size: 13px;
}

/* PROFIL UTILIZATOR */
.ovp-user-profile {
  position: relative;
}

.ovp-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

.ovp-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ovp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.ovp-user-name {
  font-size: 14px;
  font-weight: 500;
}

/* SECȚIUNI */
.ovp-section {
  display: none;
}

.ovp-section.is-visible {
  display: block;
}

.ovp-subtext {
  font-size: 14px;
  color: var(--ovp-muted);
  margin-bottom: 14px;
}

/* GRID */
.ovp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

/* CARDURI GENERALE */
.ovp-card {
  background: var(--ovp-card);
  border-radius: var(--ovp-radius);
  border: 1px solid var(--ovp-line);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ovp-text);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  cursor: pointer;
  transition: all .2s ease;
}

.ovp-card:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,.6);
  transform: translateY(-2px);
  border-color: var(--ovp-accent);
}

.ovp-card-ic {
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ovp-card-ic .dashicons {
  font-size: 28px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  color: var(--ovp-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ovp-card-t {
  font-weight: 600;
  margin-bottom: 3px;
  color: #ffffff;
}

/* Light mode pentru titluri carduri */
body.ovp-light-mode .ovp-card-t {
  color: #0f172a;
}

.ovp-card-d {
  font-size: 13px;
  color: var(--ovp-muted);
}

/* ROW */
.ovp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.ovp-card.pill {
  flex: 1;
}

.ovp-callout.gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  background: #1f2937;
  border: 1px solid #fbbf24;
  font-size: 13px;
}

.ovp-crown {
  font-size: 18px;
}

/* STATISTICI */
.ovp-grid.stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ovp-stat {
  background: #030712;
  border-radius: 14px;
  border: 1px solid var(--ovp-line);
  padding: 14px;
}

.ovp-stat-v {
  font-size: 22px;
  font-weight: 700;
}

.ovp-stat-l {
  font-size: 12px;
  color: var(--ovp-muted);
}

.ovp-chart-placeholder {
  margin-top: 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed var(--ovp-line);
  font-size: 13px;
  color: var(--ovp-muted);
}

/* BUTOANE */
.ovp-btn {
  background: var(--ovp-accent);
  border-radius: 999px;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ovp-btn:hover {
  background: var(--ovp-accent-hover);
  box-shadow: 0 10px 25px rgba(0,0,0,.5);
  transform: translateY(-1px);
}

/* SUPORT (vechi) */
.ovp-empty {
  border-radius: var(--ovp-radius);
  border: 1px dashed var(--ovp-line);
  padding: 18px;
  text-align: center;
  font-size: 14px;
}

.ovp-flag {
  font-size: 32px;
  margin-bottom: 8px;
}

.ovp-links {
  margin-top: 18px;
  font-size: 14px;
}

.ovp-links ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

.ovp-links li {
  margin-bottom: 4px;
}

.ovp-links a {
  color: #93c5fd;
}

/* NOTE — TOOLBAR (ASCUNS) */
.ovp-notes-toolbar {
  display: none !important;
}

/* NOTE — FORMULAR */
.ovp-note-form {
  background: #030712;
  border-radius: var(--ovp-radius);
  border: 1px solid var(--ovp-line);
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ovp-note-form input,
.ovp-note-form textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  box-sizing: border-box !important;
}

.ovp-note-form select {
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  box-sizing: border-box !important;
  width: auto;
  min-width: 230px;
}

.ovp-note-form .ovp-btn {
  display: inline-flex !important;
  width: auto !important;
  min-width: 230px;
  align-self: flex-start;
}

.ovp-note-form-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ovp-note-form-extra label {
  display:grid;
  align-items:center;
  gap:6px;
}

.ovp-note-form-extra input[type="checkbox"] {
  margin: 0;
  position: relative;
  top: 0;
  transform: translateY(1px);
}

.ovp-note-form-extra label span {
  white-space: nowrap;
}

/* NOTE — CATEGORII */
.ovp-notes-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.ovp-note-cat-card {
  border-radius: 12px;
  border: 1px solid var(--ovp-line);
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: #030712;
  font-size: 13px;
}

.ovp-note-cat-card.is-active {
  border-color: var(--ovp-accent);
  background: #111827;
}

/* NOTE — LISTĂ */
.ovp-notes-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-right: 6px;
}

.ovp-note {
  background: #030712;
  border-radius: 14px;
  border: 1px solid var(--ovp-line);
  padding: 16px;
  font-size: 13px;
  height: 210px;
  max-height: 210px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ovp-note-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.ovp-note-category-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #111827;
}

.ovp-note-badges {
  display: flex;
  gap: 4px;
}

.ovp-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--ovp-line);
}

.ovp-badge-important {
  border-color: #f97316;
  color: #f97316;
}

.ovp-badge-pinned {
  border-color: var(--ovp-accent);
  color: var(--ovp-accent);
}

.ovp-note-h {
  flex-shrink: 0;
  margin-bottom: 8px;
  font-size: 14px;
}

.ovp-note-b {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 10px;
  line-height: 1.5;
  color: var(--ovp-muted);
  padding-right: 6px;
  word-wrap: break-word;
}

.ovp-note-b::-webkit-scrollbar {
  width: 4px;
}

.ovp-note-b::-webkit-scrollbar-track {
  background: transparent;
}

.ovp-note-b::-webkit-scrollbar-thumb {
  background: var(--ovp-line);
  border-radius: 4px;
}

.ovp-note-b::-webkit-scrollbar-thumb:hover {
  background: var(--ovp-accent);
}

.ovp-note-actions {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ovp-line);
}

.ovp-note-actions button {
  border-radius: 999px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: var(--ovp-muted);
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.ovp-note-actions button:hover {
  border-color: var(--ovp-accent);
  color: var(--ovp-text);
}

.ovp-note-del {
  background: var(--ovp-accent) !important;
  color: #fff !important;
  border-color: var(--ovp-accent) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

.ovp-note-del:hover {
  background: #dc2626 !important;
}

.ovp-note-actions .ovp-note-edit,
.ovp-note-actions .ovp-note-del {
  margin: 0 !important;
  border-radius: 999px !important;
}

/* SETTINGS */
.ovp-settings-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ovp-settings-title {
  font-size: 20px;
  margin: 0 0 4px;
  color: #ffffff;
}

/* Light mode pentru titlul setări */
body.ovp-light-mode .ovp-settings-title {
  color: #0f172a;
}

.ovp-settings-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .ovp-settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .ovp-settings-grid {
    grid-template-columns: 1fr;
  }
}

.ovp-settings-card {
  flex-direction: column;
}

.ovp-settings-head {
  display: flex;
  gap: 12px;
  cursor: pointer;
}

.ovp-card-toggle {
  font-size: 18px;
  opacity: .8;
  transition: .2s;
}

.ovp-settings-card.is-open .ovp-card-toggle {
  transform: rotate(180deg);
  opacity: 1;
}

.ovp-settings-card-body {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ovp-line);
}

.ovp-settings-card.is-open .ovp-settings-card-body {
  display: block;
}

/* Card Ștergere cont - variantă danger */
.ovp-settings-card-danger {
  border-color: rgba(205, 2, 2, 0.35);
}

.ovp-card-ic-danger {
  color: #CD0202;
}

.ovp-delete-account-warning {
  color: var(--ovp-muted, #9ca3af);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.ovp-btn-danger {
  background: #CD0202;
  border-color: #CD0202;
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ovp-btn-danger:hover {
  background: #a50101;
  border-color: #a50101;
  transform: scale(1.02);
}

/* Comenzi / Retragere din contract */
.ovp-orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.ovp-subscription-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ovp-accent, #CD0202);
  border-radius: 10px;
  background: rgba(205, 2, 2, 0.06);
  margin-bottom: 14px;
}

.ovp-subscription-box-cancelled {
  border-color: var(--ovp-line, #1f2937);
  background: rgba(255, 255, 255, 0.02);
}

.ovp-subscription-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--ovp-muted, #9ca3af);
}

.ovp-subscription-info strong {
  color: var(--ovp-text, #fff);
  font-size: 14px;
}

.ovp-btn-cancel-sub-self {
  background: transparent;
  border: 1px solid #CD0202;
  color: #CD0202;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ovp-btn-cancel-sub-self:hover {
  background: #CD0202;
  color: #fff;
}

.ovp-subscription-note {
  font-size: 12px;
  color: var(--ovp-muted, #9ca3af);
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.ovp-order-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ovp-line, #1f2937);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.ovp-order-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--ovp-muted, #9ca3af);
}

.ovp-order-info strong {
  color: var(--ovp-text, #fff);
  font-size: 14px;
}

.ovp-order-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ovp-btn-withdraw {
  background: transparent;
  border: 1px solid #CD0202;
  color: #CD0202;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ovp-btn-withdraw:hover {
  background: #CD0202;
  color: #fff;
}

.ovp-btn-invoice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--ovp-line, #1f2937);
  color: var(--ovp-text, #fff);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ovp-btn-invoice:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--ovp-accent, #CD0202);
  color: var(--ovp-text, #fff);
}

.ovp-btn-invoice .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.ovp-withdrawal-status {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.ovp-withdrawal-status-pending {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

.ovp-withdrawal-status-approved_refunded {
  background: rgba(40, 167, 69, 0.15);
  color: #28a745;
}

.ovp-withdrawal-status-rejected {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

.ovp-withdrawal-expired {
  font-size: 12px;
  color: var(--ovp-muted, #9ca3af);
}

.ovp-withdrawal-note {
  font-size: 12px;
  color: var(--ovp-muted, #9ca3af);
  line-height: 1.5;
  margin: 0;
}

#ovp-withdrawal-status-msg {
  font-size: 13px;
  color: var(--ovp-muted, #9ca3af);
  margin-top: 8px;
}

.ovp-settings-form {
  display: flex;
  flex-direction: column;
}

.ovp-settings-form label {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--ovp-text, #fff);
  margin: 10px 0 6px;
}

.ovp-settings-form label:first-child {
  margin-top: 0;
}

.ovp-settings-form p {
  margin: 0 0 10px 0;
}

.ovp-settings-form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  padding: 8px 10px;
  color: #fff;
  margin-bottom: 10px;
}

.ovp-settings-form .ovp-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* ======================================= */
/*    NOUA SECȚIUNE – DATE FACTURARE       */
/* ======================================= */

#ovp-form-billing input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  padding: 8px 10px;
  color: #fff;
  margin-bottom: 12px;
  box-sizing: border-box;
}

/* ======================================================
   FILTRE ADMIN – TICHETE (DOAR PENTRU ADMIN)
   ====================================================== */

.ovp-support-admin-filters {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ovp-line);
}

.ovp-admin-filter-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ovp-admin-filter-btn {
  flex: 1;
  min-width: 120px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: var(--ovp-muted);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-weight: 600;
}

.ovp-admin-filter-btn:hover {
  background: #111827;
  border-color: var(--ovp-accent);
  color: #fff;
}

.ovp-admin-filter-btn.is-active {
  background: var(--ovp-accent);
  border-color: var(--ovp-accent);
  color: #fff;
}

/* NOU: Spațiere pentru căutare sub butoane */
.ovp-support-admin-filters .ovp-support-list-top {
  margin-top: 12px;
  margin-bottom: 0;
}

/* Limităm înălțimea listei la 6 tichete cu scroll */
.ovp-tickets-list.admin-filtered {
  max-height: 380px;
  overflow-y: auto;
}

/* Stiluri pentru Light Mode */
body.ovp-light-mode .ovp-admin-filter-btn {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-admin-filter-btn:hover {
  background: #f1f5f9;
  border-color: var(--ovp-accent);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-admin-filter-btn.is-active {
  background: var(--ovp-accent);
  border-color: var(--ovp-accent);
  color: #ffffff;
}

/* =====================================================
   CARD BLOCAT - PREMIUM LOCK
   ===================================================== */
.ovp-home-card-locked {
  position: relative;
  opacity: 0.85;
  cursor: default;
  pointer-events: none; /* blocheaza click-ul pe tot cardul */
  border: 1px solid rgba(205, 2, 2, 0.25) !important;
}

/* Badge Premium - colt dreapta sus */
.ovp-home-card-premium-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #f5c400 0%, #e6a800 60%, #c98f00 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 7px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(230, 168, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  z-index: 2;
  border: 1px solid rgba(255, 210, 0, 0.5);
}

.ovp-home-card-premium-badge .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: #CD0202;
  filter: drop-shadow(0 0 2px rgba(205, 2, 2, 0.8));
}

/* Nota informativa */
.ovp-home-card-premium-notice {
  margin-top: 12px;
  padding: 12px 14px;
  padding-right: 90px;
  background: rgba(205, 2, 2, 0.08);
  border: 1px solid rgba(205, 2, 2, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ovp-text-muted, #aaa);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.ovp-home-card-premium-notice::after {
  content: '\2605  Premium';
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #f5c400 0%, #e6a800 60%, #c98f00 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(230, 168, 0, 0.45);
  border: 1px solid rgba(255, 210, 0, 0.5);
}

.ovp-home-card-premium-notice .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: #CD0202;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 4px;
}

.ovp-home-card-premium-notice strong {
  color: #CD0202;
}

/* Link "Vezi planurile Premium" */
.ovp-home-card-premium-link {
  pointer-events: all; /* link-ul ramane clickabil chiar daca cardul e blocat */
  display: inline-block;
  margin-top: 4px;
  color: #CD0202;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ovp-home-card-premium-link:hover {
  color: #ff3333;
  opacity: 1;
}

/* Light mode adjustments */
body.ovp-light-mode .ovp-home-card-premium-notice {
  background: rgba(205, 2, 2, 0.05);
  color: #555;
}

/* ======================================================
   ASCUNDE TITLUL "DASHBOARD" - WP BLOCK POST TITLE
====================================================== */

/* Ascunde ORICE H1 care contine textul "Dashboard" */
body.ovp-dashboard-active h1 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* Excepții - Doar H1-urile NOASTRE sunt vizibile */
body.ovp-dashboard-active .ovp-section-header h1,
body.ovp-dashboard-active #ovp-section-title {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
}

body.ovp-dashboard-active .wp-block-post-title,
body.ovp-dashboard-active h1.wp-block-post-title,
body.ovp-dashboard-active .has-text-align-center.wp-block-post-title,
body.ovp-dashboard-active h1.has-text-align-center {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* ===== ANIMATIE SPINNER ===== */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.dashicons-spin {
  animation: spin 1s linear infinite;
}

/* ====================================================== 
   TOOLBAR NOTIȚE - Export și Print
====================================================== */

.ovp-notes-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #dee2e6;
}

.ovp-notes-toolbar-left {
    flex: 1;
}

.ovp-notes-toolbar-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ovp-notes-toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Butoane toolbar */
.ovp-notes-toolbar .ovp-btn-secondary,
.export-all-notes-pdf-btn,
.print-all-notes-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    border: 2px solid #CD0202;
    background: white;
    color: #CD0202;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ovp-notes-toolbar .ovp-btn-secondary:hover,
.export-all-notes-pdf-btn:hover,
.print-all-notes-btn:hover {
    background: #CD0202;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(205, 2, 2, 0.3);
}

.ovp-notes-toolbar .ovp-btn-secondary:active {
    transform: translateY(0);
}

.ovp-notes-toolbar .ovp-btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ====================================================== 
   BUTOANE PENTRU NOTIȚE INDIVIDUALE
====================================================== */

/* Container acțiuni notițe - îmbunătățit */
.ovp-note-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* BUTOANE NOI - Export PDF */
.ovp-note-export-pdf {
    background: white;
    color: #CD0202;
    border-color: #CD0202;
}

.ovp-note-export-pdf:hover {
    background: #CD0202;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(205, 2, 2, 0.3);
}

/* BUTOANE NOI - Print */
.ovp-note-print {
    background: white;
    color: #6c757d;
    border-color: #6c757d;
}

.ovp-note-print:hover {
    background: #6c757d;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* State disabled pentru butoane */
.ovp-note-actions button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ovp-note-actions button:active:not(:disabled) {
    transform: translateY(0);
}

/* ====================================================== 
   SPINNER PENTRU LOADING
====================================================== */

.spinner-border-sm {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* ====================================================== 
   RESPONSIVE - MOBILE & TABLET
====================================================== */

/* Tablet */
@media (max-width: 992px) {
    .ovp-notes-toolbar {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .ovp-notes-toolbar-left,
    .ovp-notes-toolbar-right {
        width: 100%;
        text-align: center;
    }
    
    .ovp-notes-toolbar-title {
        justify-content: center;
    }
    
    .ovp-notes-toolbar-right {
        flex-direction: row;
        justify-content: center;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .ovp-notes-toolbar {
        padding: 15px;
    }
    
    .ovp-notes-toolbar-title {
        font-size: 18px;
    }
    
    .ovp-notes-toolbar-right {
        flex-direction: column;
        gap: 8px;
    }
    
    .ovp-notes-toolbar .ovp-btn-secondary,
    .export-all-notes-pdf-btn,
    .print-all-notes-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
    
    /* Butoane notițe individuale - stack vertical pe mobile */
    .ovp-note-actions {
        flex-direction: column;
    }
    
    .ovp-note-actions button {
        width: 100%;
        justify-content: center;
        border-radius: 999px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Cardul avea o înălțime fixă (210px/180px) cu overflow ascuns -
       pe mobil, cu butoanele stivuite unul sub altul, conținutul devine
       mai înalt și era tăiat de container (exact motivul pentru care
       butonul "Șterge" părea fără colțuri rotunjite - de fapt colțul de
       jos era pur și simplu ascuns). Lăsăm cardul să crească după
       nevoie, în loc să taie conținutul.
    */
    .ovp-note {
        height: auto !important;
        max-height: none !important;
        min-height: 210px;
        overflow: visible !important;
    }
}

/* ====================================================== 
   DARK MODE SUPPORT
====================================================== */

body.ovp-dark-mode .ovp-notes-toolbar {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    border-color: #4a5568;
}

body.ovp-dark-mode .ovp-notes-toolbar-title {
    color: #e2e8f0;
}

body.ovp-dark-mode .ovp-note-export-pdf,
body.ovp-dark-mode .ovp-note-print,
body.ovp-dark-mode .export-all-notes-pdf-btn,
body.ovp-dark-mode .print-all-notes-btn {
    background: #2d3748;
    border-color: #4a5568;
}

body.ovp-dark-mode .ovp-note-export-pdf {
    color: #CD0202;
}

body.ovp-dark-mode .ovp-note-export-pdf:hover {
    background: #CD0202;
    color: white;
}

body.ovp-dark-mode .ovp-note-print,
body.ovp-dark-mode .print-all-notes-btn {
    color: #a0aec0;
}

body.ovp-dark-mode .ovp-note-print:hover,
body.ovp-dark-mode .print-all-notes-btn:hover {
    background: #4a5568;
    color: white;
}

/* ====================================================== 
   PRINT STYLES - Ascunde butoanele la printare
====================================================== */

@media print {
    .ovp-notes-toolbar,
    .ovp-note-actions {
        display: none !important;
    }
}

/* ===========================================
   CSS PENTRU SECȚIUNEA STATISTICI
   =========================================== */

/* ===== HEADER STATISTICI ===== */
.ovp-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 20px;
}

.ovp-stats-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--ovp-text);
  margin: 0;
}

.ovp-stats-subtitle {
  font-size: 14px;
  color: var(--ovp-muted);
  margin: 5px 0 0 0;
}

.ovp-stats-period-select {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: var(--ovp-card);
  color: var(--ovp-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ovp-stats-period-select:hover {
  border-color: var(--ovp-accent);
}

.ovp-stats-period-select:focus {
  outline: none;
  border-color: var(--ovp-accent);
  box-shadow: 0 0 0 3px rgba(205, 2, 2, 0.1);
}

/* ===== CARDURI PRINCIPALE ===== */
.ovp-stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.ovp-stat-card {
  background: var(--ovp-card);
  border: 1px solid var(--ovp-line);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ovp-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-color: var(--ovp-accent);
}

.ovp-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ovp-stat-icon .dashicons {
  font-size: 28px;
  width: 28px;
  height: 28px;
  color: #ffffff;
}

.ovp-stat-content {
  flex: 1;
}

.ovp-stat-label {
  font-size: 13px;
  color: var(--ovp-muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.ovp-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ovp-text);
  line-height: 1;
}

/* ===== GRID PRINCIPAL ===== */
.ovp-stats-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.ovp-stats-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

/* ===== PANOURI ===== */
.ovp-stats-panel {
  background: var(--ovp-card);
  border: 1px solid var(--ovp-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ovp-stats-panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--ovp-line);
}

.ovp-stats-panel-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ovp-text);
  margin: 0;
}

.ovp-stats-panel-subtitle {
  font-size: 13px;
  color: var(--ovp-muted);
  margin: 4px 0 0 0;
}

.ovp-stats-panel-body {
  padding: 24px;
}

.ovp-stats-scrollable {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.ovp-stats-scrollable::-webkit-scrollbar {
  width: 6px;
}

.ovp-stats-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.ovp-stats-scrollable::-webkit-scrollbar-thumb {
  background: var(--ovp-line);
  border-radius: 10px;
}

.ovp-stats-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--ovp-accent);
}

/* ===== ULTIMELE TESTE ===== */
.ovp-recent-tests-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ovp-test-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #030712;
  border: 1px solid var(--ovp-line);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.ovp-test-item:hover {
  background: #111827;
  border-color: var(--ovp-accent);
  transform: translateX(4px);
}

.ovp-test-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.ovp-test-icon-success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 2px solid rgba(34, 197, 94, 0.3);
}

.ovp-test-icon-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 2px solid rgba(245, 158, 11, 0.3);
}

.ovp-test-icon-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 2px solid rgba(239, 68, 68, 0.3);
}

.ovp-test-details {
  flex: 1;
}

.ovp-test-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--ovp-text);
  margin-bottom: 4px;
}

.ovp-test-meta {
  font-size: 12px;
  color: var(--ovp-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ovp-test-date {
  opacity: 0.7;
}

/* ===== STATISTICI PER CATEGORIE ===== */
.ovp-category-stats-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ovp-category-stat-item {
  padding: 16px;
  background: #030712;
  border: 1px solid var(--ovp-line);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.ovp-category-stat-item:hover {
  background: #111827;
  border-color: var(--ovp-accent);
}

.ovp-category-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ovp-text);
  margin-bottom: 12px;
}

.ovp-category-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ovp-progress-bar {
  flex: 1;
  height: 10px;
  background: #1f2937;
  border-radius: 10px;
  overflow: hidden;
}

.ovp-progress-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
}

.ovp-progress-success {
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.ovp-progress-warning {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

.ovp-progress-danger {
  background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}

.ovp-category-score {
  font-size: 16px;
  font-weight: 700;
  color: var(--ovp-text);
  min-width: 50px;
  text-align: right;
}

.ovp-category-meta {
  font-size: 12px;
  color: var(--ovp-muted);
}

/* ===== TESTE RECENTE - GRID CU CARDURI ===== */
.ovp-recent-tests-cards {
  margin-top: 24px;
}

.ovp-retry-tests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.ovp-retry-test-card {
  background: #030712;
  border: 1px solid var(--ovp-line);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.ovp-retry-test-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #CD0202 0%, #ef4444 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.ovp-retry-test-card:hover::before {
  transform: scaleX(1);
}

.ovp-retry-test-card:hover {
  background: #111827;
  border-color: #CD0202;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(205, 2, 2, 0.2);
}

.ovp-retry-test-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ovp-retry-test-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.ovp-retry-test-icon.success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 2px solid rgba(34, 197, 94, 0.3);
}

.ovp-retry-test-icon.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 2px solid rgba(245, 158, 11, 0.3);
}

.ovp-retry-test-icon.danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 2px solid rgba(239, 68, 68, 0.3);
}

.ovp-retry-test-info {
  flex: 1;
}

.ovp-retry-test-score {
  font-size: 24px;
  font-weight: 700;
  color: var(--ovp-text);
  margin-bottom: 2px;
}

.ovp-retry-test-label {
  font-size: 12px;
  color: var(--ovp-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ovp-retry-test-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ovp-line);
}

.ovp-retry-test-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ovp-muted);
}

.ovp-retry-test-stat .dashicons {
  font-size: 16px;
}

.ovp-retry-test-stat.correct {
  color: #22c55e;
}

.ovp-retry-test-stat.wrong {
  color: #ef4444;
}

.ovp-retry-test-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ovp-retry-test-date {
  font-size: 12px;
  color: var(--ovp-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.ovp-retry-test-btn {
  background: linear-gradient(135deg, #CD0202 0%, #ef4444 100%);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ovp-retry-test-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(205, 2, 2, 0.4);
}

.ovp-retry-test-btn .dashicons {
  font-size: 16px;
}

.ovp-retry-test-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ovp-line);
}

.ovp-retry-test-view-btn,
.ovp-retry-test-pdf-btn {
  flex: 1;
  background: transparent;
  color: var(--ovp-text);
  border: 1px solid var(--ovp-line);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.ovp-retry-test-view-btn:hover,
.ovp-retry-test-pdf-btn:hover {
  border-color: var(--ovp-accent);
  color: var(--ovp-accent);
}

.ovp-retry-test-view-btn:disabled,
.ovp-retry-test-pdf-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ovp-retry-test-view-btn .dashicons,
.ovp-retry-test-pdf-btn .dashicons {
  font-size: 15px;
  width: 15px;
  height: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .ovp-retry-tests-grid {
    grid-template-columns: 1fr;
  }

  .ovp-retry-test-actions {
    flex-direction: column;
  }
}

/* ===== CĂUTARE GRILE ÎN ISTORIC (STATISTICI, DOAR PREMIUM) ===== */
.ovp-grile-search-panel {
  margin-top: 24px;
}

.ovp-grile-search-box {
  display: flex;
  gap: 12px;
}

.ovp-grile-search-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: var(--ovp-text);
  font-size: 14px;
}

.ovp-grile-search-input:focus {
  outline: none;
  border-color: var(--ovp-accent);
}

.ovp-grile-search-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.ovp-grile-search-link {
  font-size: 12.5px;
  color: var(--ovp-accent);
  text-decoration: none;
  cursor: pointer;
}

.ovp-grile-search-link:hover {
  text-decoration: underline;
}

.ovp-grile-search-toolbar-sep {
  color: var(--ovp-muted);
  font-size: 12px;
}

.ovp-grile-search-toolbar-spacer {
  flex: 1;
}

.ovp-grile-search-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ovp-grile-search-item-check {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.ovp-grile-search-item-checkbox {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--ovp-accent);
}

#ovp-grile-search-delete-btn:disabled,
#ovp-grile-search-export-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ovp-grile-search-results {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ovp-grile-search-empty,
.ovp-grile-search-loading {
  color: var(--ovp-muted);
  font-size: 14px;
  margin: 0;
}

.ovp-grile-search-count {
  color: var(--ovp-muted);
  font-size: 13px;
  margin: 0;
}

.ovp-grile-search-item {
  background: #030712;
  border: 1px solid var(--ovp-line);
  border-radius: 14px;
  padding: 18px 20px;
}

.ovp-grile-search-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ovp-grile-search-date {
  font-size: 12px;
  color: var(--ovp-muted);
}

.ovp-grile-search-status {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.ovp-grile-search-status.is-correct {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.ovp-grile-search-status.is-wrong {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.ovp-grile-search-question {
  font-size: 15px;
  font-weight: 600;
  color: var(--ovp-text);
  margin-bottom: 12px;
  line-height: 1.5;
}

.ovp-grile-search-answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ovp-grile-search-answer {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  font-size: 13.5px;
  color: var(--ovp-text);
}

.ovp-grile-search-answer.is-correct {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
}

.ovp-grile-search-answer.was-selected.is-wrong-pick {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.ovp-grile-search-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: 6px;
  background: var(--ovp-line);
  color: var(--ovp-muted);
  vertical-align: middle;
}

.ovp-grile-search-tag.is-correct {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.ovp-grile-search-note {
  margin: 10px 0 0 0;
  font-size: 12px;
  color: var(--ovp-muted);
  font-style: italic;
}

.ovp-grile-search-explanation {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ovp-line);
  font-size: 13.5px;
  color: var(--ovp-muted);
  line-height: 1.6;
}

.ovp-grile-search-explanation strong {
  color: var(--ovp-text);
}

.ovp-grile-search-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 30px 20px;
}

.ovp-grile-search-lock .dashicons {
  font-size: 36px;
  width: 36px;
  height: 36px;
  color: #CD0202;
}

.ovp-grile-search-lock p {
  font-size: 15px;
  font-weight: 600;
  color: var(--ovp-text);
  max-width: 380px;
  margin: 0;
}

body.ovp-light-mode .ovp-grile-search-input,
body.ovp-light-mode .ovp-grile-search-item {
  background: #f9fafb;
}

@media (max-width: 600px) {
  .ovp-grile-search-box {
    flex-direction: column;
  }
}

/* ===== POP-UP VIZUALIZARE TEST (Teste Recente) ===== */
.ovp-test-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.ovp-test-view-box {
  background: var(--ovp-card);
  border: 1px solid var(--ovp-line);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: ovpPopupIn 0.2s ease;
  overflow: hidden;
}

.ovp-test-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--ovp-line);
  flex-shrink: 0;
}

.ovp-test-view-title {
  margin: 0 0 4px;
  color: var(--ovp-text);
  font-size: 19px;
  font-weight: 700;
}

.ovp-test-view-subtitle {
  margin: 0;
  color: var(--ovp-muted);
  font-size: 13px;
}

.ovp-test-view-close {
  background: transparent;
  border: none;
  color: var(--ovp-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}

.ovp-test-view-close:hover {
  color: var(--ovp-text);
}

.ovp-test-view-body {
  padding: 20px 26px;
  overflow-y: auto;
}

.ovp-test-view-empty {
  color: var(--ovp-muted);
  margin: 0;
}

.ovp-test-view-question-block {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ovp-line);
}

.ovp-test-view-question-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ovp-test-view-qnum {
  font-size: 12px;
  color: var(--ovp-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.ovp-test-view-qtext {
  font-size: 15px;
  font-weight: 600;
  color: var(--ovp-text);
  margin-bottom: 10px;
  line-height: 1.5;
}

.ovp-test-view-answer {
  padding: 9px 13px;
  margin: 6px 0;
  border-radius: 9px;
  border: 1px solid var(--ovp-line);
  font-size: 13.5px;
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-test-view-answer {
  background: #f9fafb;
}

@media (max-width: 600px) {
  .ovp-test-view-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .ovp-test-view-box {
    max-width: 100%;
    max-height: 92vh;
    width: 100%;
    border-radius: 16px 16px 0 0;
  }

  .ovp-test-view-header {
    padding: 16px 18px;
  }

  .ovp-test-view-title {
    font-size: 17px;
  }

  .ovp-test-view-subtitle {
    font-size: 12px;
  }

  .ovp-test-view-body {
    padding: 16px 18px;
  }

  .ovp-test-view-qtext {
    font-size: 14px;
  }

  .ovp-test-view-answer {
    font-size: 13px;
    padding: 8px 11px;
  }
}

/* ===== EMPTY STATE ===== */
.ovp-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--ovp-muted);
  font-size: 14px;
}

/* ===== LIGHT MODE PENTRU STATISTICI ===== */
body.ovp-light-mode .ovp-stat-card {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

body.ovp-light-mode .ovp-stats-panel {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

body.ovp-light-mode .ovp-test-item {
  background: #f9fafb;
}

body.ovp-light-mode .ovp-test-item:hover {
  background: #f1f5f9;
}

body.ovp-light-mode .ovp-retry-test-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

body.ovp-light-mode .ovp-retry-test-card:hover {
  background: #f9fafb;
  border-color: #CD0202;
}

body.ovp-light-mode .ovp-category-stat-item {
  background: #f9fafb;
}

body.ovp-light-mode .ovp-category-stat-item:hover {
  background: #f1f5f9;
}

body.ovp-light-mode .ovp-progress-bar {
  background: #e5e7eb;
}

body.ovp-light-mode .ovp-stats-period-select {
  background: #ffffff;
}

/* ===== RESPONSIVE PENTRU STATISTICI ===== */
@media (max-width: 1024px) {
  .ovp-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .ovp-stats-grid-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ovp-stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ovp-stats-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ovp-stat-card {
    padding: 16px;
  }
  
  .ovp-stat-icon {
    width: 48px;
    height: 48px;
  }
  
  .ovp-stat-value {
    font-size: 24px;
  }
  
  .ovp-stats-title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .ovp-stats-cards {
    grid-template-columns: 1fr;
  }
  
  .ovp-stats-panel-body {
    padding: 16px;
  }
}

/* ======================================================
   PROFIL DROPDOWN - NOU
====================================================== */

.ovp-user-profile {
  position: relative;
}

.ovp-profile-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #030712;
  border: 1px solid var(--ovp-line);
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.ovp-profile-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ovp-profile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--ovp-text);
  text-decoration: none !important;
  font-size: 14px;
  transition: background 0.2s;
}

.ovp-profile-link:hover,
.ovp-profile-link:focus,
.ovp-profile-link:visited {
  text-decoration: none !important;
}

.ovp-profile-link .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: var(--ovp-muted);
}

.ovp-profile-link:hover {
  background: rgba(255,255,255,.05);
}

.ovp-profile-link.ovp-logout {
  color: #ef4444;
}

.ovp-profile-separator {
  height: 1px;
  background: var(--ovp-line);
  margin: 4px 0;
}

body.ovp-light-mode .ovp-profile-dropdown {
  background: #ffffff;
  border-color: var(--ovp-line);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}

body.ovp-light-mode .ovp-profile-link:hover {
  background: #f1f5f9;
}

/* ======================================================
   NAVBAR - FĂRĂ UNDERLINE
====================================================== */

.ovp-nav-btn,
.ovp-mobile-nav-btn {
  text-decoration: none !important;
}

.ovp-nav-icon.dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.ovp-nav-btn:hover,
.ovp-nav-btn:focus,
.ovp-mobile-nav-btn:hover,
.ovp-mobile-nav-btn:focus {
  text-decoration: none !important;
}

/* ======================================================
   HOME PAGE - 4 CARDURI MARI
====================================================== */

.ovp-home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.ovp-home-card {
  display: flex;
  flex-direction: column;
  background: #030712;
  border: 1px solid var(--ovp-line);
  border-radius: var(--ovp-radius);
  padding: 28px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  min-height: 220px;
}

.ovp-home-card:hover {
  border-color: var(--ovp-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  text-decoration: none !important;
}

.ovp-home-card * {
  text-decoration: none !important;
}

.ovp-home-card-icon {
  margin-bottom: 20px;
}

.ovp-home-card-icon .dashicons {
  font-size: 56px;
  width: 56px;
  height: 56px;
  color: var(--ovp-accent);
}

.ovp-home-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ovp-home-card-title {
font-size: 28px;  /* Mărit de la 24px */
font-weight: 700;
color: var(--ovp-text);
margin-bottom: 12px;
}

.ovp-home-card-desc {
font-size: 16px;  /* Mărit de la 15px */
color: var(--ovp-muted);
line-height: 1.6;
flex: 1;
}

.ovp-home-card-stats {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ovp-line);
}

.ovp-home-card-stats span {
  font-size: 13px;
  color: var(--ovp-muted);
}

.ovp-home-card-stats strong {
  color: var(--ovp-accent);
  font-size: 15px;
}

body.ovp-light-mode .ovp-home-card {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-home-card:hover {
  background: #f8fafc;
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
}

@media (max-width: 768px) {
  .ovp-home-grid {
    grid-template-columns: 1fr;
  }
  
  .ovp-home-card {
    min-height: auto;
    padding: 20px;
  }
  
  .ovp-home-card-icon {
    font-size: 36px;
  }
}

/* ======================================================
   NOTIȚE - GRID 2 CARDURI
====================================================== */

.ovp-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.ovp-notes-card {
  flex-direction: column;
  min-height: 450px;
  padding: 24px;
  display: flex;
}

.ovp-notes-card > .ovp-card-ic {
  flex-shrink: 0;
  margin-bottom: 8px;
}

.ovp-notes-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ovp-notes-card-body > .ovp-card-t {
  flex-shrink: 0;
}

.ovp-notes-card-body > .ovp-card-d {
  flex-shrink: 0;
  margin-bottom: 8px;
}

.ovp-note-form-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  flex: 1;
  width: 100%;
}

.ovp-note-form-compact input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: var(--ovp-text);
  font-size: 15px;
  box-sizing: border-box;
}

.ovp-note-form-compact textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: var(--ovp-text);
  font-size: 15px;
  flex: 1;
  min-height: 180px;
  resize: none;
  box-sizing: border-box;
}

.ovp-note-form-compact select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: var(--ovp-text);
  font-size: 14px;
}

.ovp-note-form-compact .ovp-note-form-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ovp-note-form-compact .ovp-note-form-extra select {
  flex: 1;
  min-width: 140px;
}

.ovp-note-form-compact .ovp-note-form-extra label {
  font-size: 13px;
  color: var(--ovp-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ovp-note-form-compact .ovp-btn {
  margin-top: auto;
  padding: 14px 24px;
}

/* Foldere notițe - GRID 4 pe rând */
.ovp-notes-folders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  margin-top: 16px;
  flex: 1;
  width: 100%;
}

.ovp-folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: #030712;
  border: 1px solid var(--ovp-line);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.ovp-folder-item:hover {
  border-color: var(--ovp-accent);
  background: #111827;
}

.ovp-folder-item.is-active {
  border-color: var(--ovp-accent);
  background: rgba(239, 68, 68, 0.1);
}

.ovp-folder-icon {
  font-size: 18px;
}

.ovp-folder-icon.dashicons {
  font-size: 26px;
  width: 26px;
  height: 26px;
  color: var(--ovp-accent);
}

.ovp-folder-name {
  font-size: 12px;
  color: var(--ovp-text);
  line-height: 1.3;
}

body.ovp-light-mode .ovp-note-form-compact input,
body.ovp-light-mode .ovp-note-form-compact textarea,
body.ovp-light-mode .ovp-note-form-compact select {
  background: #f9fafb;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-folder-item {
  background: #f9fafb;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-folder-item:hover {
  background: #f1f5f9;
}

body.ovp-light-mode .ovp-folder-item.is-active {
  background: rgba(239, 68, 68, 0.1);
}

@media (max-width: 1200px) {
  .ovp-notes-folders {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .ovp-notes-grid {
    grid-template-columns: 1fr;
  }
  
  .ovp-notes-card {
    min-height: 400px;
  }
  
  .ovp-notes-folders {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  
  .ovp-notes-list {
    grid-template-columns: 1fr;
  }
  
  .ovp-note {
    height: auto !important;
    max-height: none !important;
    min-height: 180px;
    overflow: visible !important;
  }
}

@media (max-width: 600px) {
  .ovp-notes-folders {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .ovp-notes-folders {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}

/* ======================================================
   AVATAR UPLOAD
====================================================== */

.ovp-avatar-upload {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 12px;
}

.ovp-avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid var(--ovp-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ovp-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ovp-avatar-placeholder {
  font-size: 24px;
  font-weight: 700;
  color: var(--ovp-accent);
}

.ovp-avatar-info {
  flex: 1;
}

.ovp-avatar-info p {
  font-size: 12px;
  color: var(--ovp-muted);
  margin-bottom: 10px;
}

.ovp-avatar-status {
  font-size: 12px;
  margin-top: 8px;
}

.ovp-avatar-status.success {
  color: #22c55e;
}

.ovp-avatar-status.error {
  color: #ef4444;
}

.ovp-avatar-status.loading {
  color: var(--ovp-accent);
}

body.ovp-light-mode .ovp-avatar-preview {
  background: #f1f5f9;
  border-color: var(--ovp-line);
}

/* Avatar în header */
.ovp-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Responsive pentru butoanele de filtrare */
@media (max-width: 768px) {
  .ovp-admin-filter-buttons {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  
  .ovp-admin-filter-btn {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* ======================================================
   CARD DISABLED - PENTRU SESIUNE
====================================================== */

.ovp-grile-card.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(50%);
}

.ovp-grile-card.is-disabled .ovp-option-label {
  cursor: not-allowed;
  opacity: 0.6;
}

.ovp-grile-card.is-disabled input[type="radio"] {
  cursor: not-allowed;
}

body.ovp-light-mode .ovp-grile-card.is-disabled {
  opacity: 0.5;
  filter: grayscale(50%);
}

/* ======================================================
   SECȚIUNEA GRILE - CARDURI CU ÎNĂLȚIME CONSISTENTĂ
   ====================================================== */

/* Header secțiune Grile - ASCUNS */
.ovp-grile-header {
display: none;  /* Ascunde header-ul complet */
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--ovp-line);
}

.ovp-grile-title {
    font-size: 18px;
    font-weight: 600;
color: var(--ovp-text);
display: none;  /* Ascunde titlul */
}

/* ======================================================
   GRID LAYOUT PENTRU CARDURI GRILE - NOU
====================================================== */

.ovp-grile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* Wrapper outer pentru order pe mobile */
.ovp-grile-outer {
  display: flex;
  flex-direction: column;
}

/* Card 4 - Wide (lățimea tuturor 3 carduri de sus) */
.ovp-grile-card-wide {
  width: 100%;
  margin-bottom: 24px;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 16px;
}

.ovp-grile-card-wide .ovp-card-ic {
  flex-shrink: 0;
}

/* Grid sesiuni wide (Card 4 - anii anteriori) - 4 coloane pe desktop (nu 5,
   ca textul titlului sesiunii să încapă pe un singur rând) */
.ovp-sessions-wide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}

/* Grid sesiuni recente (Card 3, mic - o singură coloană, ține de coloana lui) */
.ovp-sessions-recent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

.ovp-session-wide-label {
  font-size: 13px !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}

.ovp-session-wide-label:has(input:checked) {
  background: rgba(205,2,2,0.08) !important;
  border-color: rgba(205,2,2,0.4) !important;
}

/* Arbore Materii (Card 4): pe PC/laptop, 4 coloane pe rând (ca înainte),
   în ordinea exactă de la domnul profesor (nu alfabetic - vezi
   ovp_get_ordered_question_matters()): Drept civil + celelalte 3 cu
   sub-materii pe primul rând, Organizarea și exercitarea profesiei de
   avocat + celelalte 4 pe-al doilea rând. Bifezi o Materie => i se
   deschid Sub-materiile direct dedesubt, în interiorul coloanei ei (fără
   să afecteze coloanele vecine); bifezi o Sub-materie => i se deschid
   Sub-sub-materiile direct dedesubt, la fel. Pe mobil rămâne o singură
   coloană (vezi media query mai jos). */
.ovp-materii-tree {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 4px;
  /* Plasă de siguranță: chiar dacă ceva dedesubt calculează greșit o
     lățime minimă, nu lăsăm conținutul să iasă vizual din card. */
  max-width: 100%;
  overflow-x: hidden;
}

.ovp-materie-tree-node {
  display: flex;
  flex-direction: column;
  /* IMPORTANT: elementele de grid/flex au implicit min-width:auto, adică
     nu se pot micșora sub lățimea minimă a conținutului lor (checkbox +
     săgeată + textul cel mai lung, cumulat pe 3 niveluri de indentare la
     Sub-sub-materii). La selecție multiplă pe toate nivelurile, asta
     forța coloana să crească peste 1fr și tot arborele ieșea din card.
     min-width:0 permite coloanei să respecte efectiv lățimea alocată. */
  min-width: 0;
}

.ovp-sub-materie-tree-node {
  min-width: 0;
}

.ovp-materie-tree-label,
.ovp-sub-materie-tree-label,
.ovp-sub-sub-materie-tree-label {
  font-size: 13px !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  /* Pe mobil, browserele fac "font boosting" (text-size-adjust automat)
     în blocurile de text mai "aglomerate" - caseta cu titlu lung
     ("Organizarea și exercitarea profesiei de avocat") ajungea să
     afișeze textul vizibil mai mare decât la celelalte casete, deci
     min-height calculată la 13px nu mai era suficientă și tot rămânea
     mai înaltă. Dezactivăm auto-scalarea ca toate casetele să
     folosească efectiv același font-size de 13px declarat. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Materie (nivelul 1): toate casetele de pe grilă (pe PC, cele 4 de pe
   același rând; pe mobil, TOATE, fiindcă e o singură coloană) trebuie
   să rămână la fel de mari, indiferent dacă titlul încape pe un rând
   sau pe 2 (ex. "Organizarea și exercitarea profesiei de avocat").
   min-height generoasă, clar peste ce ar avea nevoie chiar și 2 rânduri
   de text - !important ca să câștige garantat față de orice altă regulă
   care ar mai atinge accidental înălțimea acestor casete (anterior am
   încercat 56px, apoi 60px, cu 0 efect vizibil - fie calculul a fost
   tot timpul prea mic față de randarea reală pe mobil, fie ceva
   altceva câștigă specificitatea; 84px + !important elimină ambiguitatea:
   dacă e destul de mare, TOATE casetele (scurte sau lungi) ajung la
   exact aceeași înălțime, indiferent cum se randează efectiv textul). */
.ovp-materie-tree-label {
  min-height: 84px !important;
}

/* Materie / Sub-materie / Sub-sub-materie - același principiu peste tot:
   titlul (+ contorul de întrebări) trece pe 2 rânduri dacă e nevoie, nu
   se trunchiază cu "..." - trunchierea ascundea inclusiv contorul "(N)"
   la titluri lungi. La Sub-materii/Sub-sub-materii (care stau una sub
   alta în propria coloană, nu una lângă alta) o casetă poate fi mai
   înaltă decât alta, fără probleme. Line-height fixat în px (nu
   multiplicator relativ) - randare mai predictibilă pe mobil. */
.ovp-materie-tree-label .ovp-option-text,
.ovp-sub-materie-tree-label .ovp-option-text,
.ovp-sub-sub-materie-tree-label .ovp-option-text {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
  line-height: 18px;
}

.ovp-materie-tree-label:has(input:checked),
.ovp-sub-materie-tree-label:has(input:checked),
.ovp-sub-sub-materie-tree-label:has(input:checked) {
  background: rgba(205,2,2,0.08) !important;
  border-color: rgba(205,2,2,0.4) !important;
}

.ovp-tree-caret {
  margin-left: auto;
  color: var(--ovp-muted);
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ovp-materie-tree-node.is-open > .ovp-materie-tree-label .ovp-tree-caret,
.ovp-sub-materie-tree-node.is-open > .ovp-sub-materie-tree-label .ovp-tree-caret {
  transform: rotate(180deg);
}

.ovp-sub-materii-tree,
.ovp-sub-sub-materii-tree {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ovp-sub-materii-tree {
  padding-left: 22px;
  border-left: 1px dashed var(--ovp-line);
  margin-left: 10px;
}

.ovp-sub-sub-materii-tree {
  padding-left: 20px;
  border-left: 1px dashed var(--ovp-line);
  margin-left: 8px;
}

.ovp-materie-tree-node.is-open > .ovp-sub-materii-tree,
.ovp-sub-materie-tree-node.is-open > .ovp-sub-sub-materii-tree {
  display: flex;
}

/* MODIFICARE 62: fără nicio casetă/fundal - doar text simplu + buton
   mic "Premium", pe același rând cu textul, afișat în locul listei de
   Sub-Materii pentru utilizatori non-Premium/vizitatori. */
.ovp-sub-materii-locked-notice {
  display: none;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.ovp-materie-tree-node.is-open > .ovp-sub-materii-locked-notice {
  display: flex;
}

.ovp-sub-materii-locked-notice .ovp-option-text {
  font-size: 13px;
  color: var(--ovp-text-muted, #aaa);
}

.ovp-sub-materii-locked-notice .ovp-premium-badge-inline {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ovp-sub-materie-tree-node {
  display: flex;
  flex-direction: column;
}

/* Carduri Grile - toate vizibile */
.ovp-grile-card {
  flex-direction: column;
  display: flex;
  /* MODIFICARE 80: 320px rămăsese de pe vremea când Cardul 1 avea și
     bara "Generează Test" lată cât cardul, la final (eliminată la
     MODIFICARE 79, când butonul s-a mutat sus, lângă titlu) - de-atunci
     conținutul real al celor 3 carduri (titlu+descriere+2-3 opțiuni)
     nu mai avea nevoie de atâta înălțime, rămânea mult spațiu gol jos.
     Redus la cererea userului, păstrând totuși destul loc pentru orice
     card cu 2 opțiuni + puțin aer. */
  min-height: 220px;
  justify-content: flex-start;
}

/* Conținut card */
.ovp-grile-card > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Info box informativ in card */
.ovp-grile-info-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ovp-text-muted, #888);
  line-height: 1.5;
}

.ovp-grile-info-box .dashicons {
  font-size: 15px;
  width: 15px;
  height: 15px;
  color: var(--ovp-accent, #CD0202);
  flex-shrink: 0;
  margin-top: 1px;
}

.ovp-grile-info-box p {
  margin: 0;
}

body.ovp-light-mode .ovp-grile-info-box {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

/* Separator in card */
.ovp-option-separator {
  height: 1px;
  background: var(--ovp-line);
  margin: 16px 0;
}

/* Subtitle in card */
.ovp-option-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--ovp-text);
  margin-bottom: 10px;
}

/* Buton Generează Test */
.ovp-grile-generate {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.ovp-btn-generate {
  font-size: 16px;
  padding: 14px 40px;
  background: var(--ovp-accent);
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.ovp-btn-generate:hover {
  background: var(--ovp-accent-hover);
  transform: translateY(-2px);
}

.ovp-btn-reset {
  background: #374151;
  font-size: 13px;
  padding: 8px 14px;
}

.ovp-btn-reset:hover {
  background: #4b5563;
}

/* ======================================================
   MINI-HARTĂ ÎNTREBĂRI - NAVIGARe RAPIDĂ
====================================================== */

#ovp-question-map-container {
  /* Harta cu numerele întrebărilor stă acum DEASUPRA rândului cu
     "Întrebarea X din Y" (vezi $('.ovp-test-header').before(...) în JS).
     Cele DOUĂ linii care încadrează numerele sunt: border-bottom-ul barei
     de navigare (deasupra) și border-bottom-ul de mai jos (dedesubt).
     Fără padding-top aici (numerele pornesc imediat după cele 16px
     margin-bottom ale navbar-ului), iar padding-bottom e tot 16px -
     acelea două fiind singurele spații rămase, numerele ies EXACT la
     mijloc, între cele două linii. */
  margin-bottom: 16px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--ovp-line);
}

.ovp-question-map {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
}

.ovp-map-item {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--ovp-line);
  background: var(--ovp-card);
  color: var(--ovp-text);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ovp-map-item:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 10;
}

/* Stare: Nerăspunsă (Gri) */
.ovp-map-item.is-unanswered {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

.ovp-map-item.is-unanswered:hover {
  background: #4b5563;
  border-color: #6b7280;
}

/* Stare: Răspuns Corect (Verde) */
.ovp-map-item.is-correct {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
  color: #22c55e;
}

.ovp-map-item.is-correct:hover {
  background: rgba(34, 197, 94, 0.25);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Stare: Răspuns Greșit (Roșu) */
.ovp-map-item.is-wrong {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.ovp-map-item.is-wrong:hover {
  background: rgba(239, 68, 68, 0.25);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Stare: Întrebarea Curentă (Albastru) */
.ovp-map-item.is-current {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  animation: pulse 2s infinite;
}

.ovp-map-item.is-current:hover {
  background: #2563eb;
  border-color: #2563eb;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.6);
  }
}

/* Light Mode */
body.ovp-light-mode .ovp-map-item {
  background: #ffffff;
  border-color: #e5e7eb;
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-map-item.is-unanswered {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #6b7280;
}

body.ovp-light-mode .ovp-map-item.is-unanswered:hover {
  background: #e5e7eb;
}

body.ovp-light-mode .ovp-map-item.is-correct {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
  color: #16a34a;
}

body.ovp-light-mode .ovp-map-item.is-wrong {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #dc2626;
}

body.ovp-light-mode .ovp-map-item.is-current {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
  .ovp-map-item {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
  
  .ovp-question-map {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .ovp-map-item {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
  
  .ovp-question-map {
    gap: 4px;
  }
}

/* ======================================================
   TEST INTERFACE - AFISARE INTREBARI
====================================================== */

.ovp-test-container {
  /* 0, nu 30px: harta cu numerele întrebărilor (#ovp-question-map-container)
     e primul element din interior, iar singurul spațiu care trebuie să
     rămână deasupra numerelor e margin-bottom-ul barei de navigare (16px) -
     orice valoare aici s-ar aduna peste el și ar strica egalitatea sus/jos. */
  margin-top: 0;
}

.ovp-test-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: #030712;
  border-radius: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ovp-test-progress {
  flex: 1;
  min-width: 200px;
}

.ovp-test-progress-text {
  font-size: 14px;
  color: var(--ovp-text);
  margin-bottom: 8px;
}

.ovp-test-progress-bar {
  height: 8px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
}

.ovp-test-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ovp-accent), #ef4444);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.ovp-test-stats {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.ovp-test-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.ovp-stat-correct {
  color: #22c55e;
}

.ovp-stat-wrong {
  color: #ef4444;
}

.ovp-test-stat .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* Buton "Următoarea nerăspunsă" */
#ovp-skip-unanswered {
  background: #f59e0b !important;
  border: 1px solid #f59e0b !important;
  color: #ffffff !important;
  padding: 8px 14px;
  font-size: 13px;
  display: none; /* Ascuns inițial */
  margin-left: auto; /* Aliniere la dreapta */
}

#ovp-skip-unanswered:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  transform: translateY(-1px);
}

#ovp-skip-unanswered .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.ovp-btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

.ovp-btn-outline {
  background: transparent;
  border: 1px solid var(--ovp-line);
  color: var(--ovp-text);
}

.ovp-btn-outline:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--ovp-accent);
}

.ovp-btn-secondary {
  background: #3b82f6;
  color: white;
}

.ovp-btn-secondary:hover {
  background: #2563eb;
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

/* Question Card */
.ovp-test-question-card {
  background: var(--ovp-card);
  border: 1px solid var(--ovp-line);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .ovp-test-question-card {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

.ovp-test-question-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ovp-text);
  margin-bottom: 24px;
}

.ovp-test-answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ovp-answer-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: #030712;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.ovp-answer-option:hover {
  background: #1e293b;
  border-color: var(--ovp-line);
}

.ovp-answer-option.is-selected {
  background: rgba(205, 2, 2, 0.1);
  border-color: var(--ovp-accent);
}

.ovp-answer-option.is-correct {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
}

.ovp-answer-option.is-wrong {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.ovp-answer-option.is-disabled {
  pointer-events: none;
  opacity: 0.7;
}

.ovp-answer-radio,
.ovp-answer-checkbox {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ovp-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.ovp-answer-checkbox {
  border-radius: 6px;
}

.ovp-answer-option.is-selected .ovp-answer-radio,
.ovp-answer-option.is-selected .ovp-answer-checkbox {
  border-color: var(--ovp-accent);
  background: var(--ovp-accent);
}

.ovp-answer-option.is-correct .ovp-answer-radio,
.ovp-answer-option.is-correct .ovp-answer-checkbox {
  border-color: #22c55e;
  background: #22c55e;
}

.ovp-answer-option.is-wrong .ovp-answer-radio,
.ovp-answer-option.is-wrong .ovp-answer-checkbox {
  border-color: #ef4444;
  background: #ef4444;
}

.ovp-answer-radio::after,
.ovp-answer-checkbox::after {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.ovp-answer-checkbox::after {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ovp-answer-option.is-selected .ovp-answer-radio::after,
.ovp-answer-option.is-selected .ovp-answer-checkbox::after,
.ovp-answer-option.is-correct .ovp-answer-radio::after,
.ovp-answer-option.is-correct .ovp-answer-checkbox::after,
.ovp-answer-option.is-wrong .ovp-answer-radio::after,
.ovp-answer-option.is-wrong .ovp-answer-checkbox::after {
  opacity: 1;
}

.ovp-answer-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ovp-text);
}

/* Feedback & Explanation */
.ovp-test-feedback {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ovp-test-feedback.is-correct {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.ovp-test-feedback.is-wrong {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.ovp-test-feedback.is-saved {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.ovp-test-feedback .dashicons {
  font-size: 22px;
  width: 22px;
  height: 22px;
}


/* Zona "Ai raspuns / Raspuns corect" */
.ovp-raspuns-summary-wrap {
  margin-top: 12px;
}

.ovp-raspuns-summary-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}

body.ovp-light-mode .ovp-raspuns-summary-inner {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.ovp-raspuns-user {
  color: var(--ovp-muted);
}

.ovp-raspuns-user strong {
  color: var(--ovp-text);
}

.ovp-raspuns-sep {
  color: var(--ovp-muted);
  opacity: 0.5;
}

.ovp-raspuns-correct {
  color: var(--ovp-muted);
}

.ovp-raspuns-correct strong {
  color: #4ade80;
}

body.ovp-light-mode .ovp-raspuns-correct strong {
  color: #16a34a;
}

.ovp-test-explanation {
  margin-top: 16px;
  padding: 16px 20px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ovp-muted);
  white-space: pre-line;
}

.ovp-test-explanation strong {
  color: var(--ovp-text);
}

.ovp-test-original-attribution {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ovp-line);
  font-size: 12px;
  color: var(--ovp-muted);
  line-height: 1.6;
}

.ovp-test-original-attribution p {
  margin: 0;
}

.ovp-test-original-attribution a {
  color: var(--ovp-accent);
  text-decoration: none;
}

.ovp-test-original-attribution .ovp-reviewer-name {
  color: var(--ovp-accent);
}

.ovp-test-original-attribution a:hover {
  text-decoration: underline;
}

/* Test Actions */
.ovp-test-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ovp-test-actions .ovp-btn {
  min-width: 140px;
}

.ovp-btn-accent {
  background: #22c55e;
}

.ovp-btn-accent:hover {
  background: #16a34a;
}

/* Results */
.ovp-test-results {
  margin-top: 30px;
}

.ovp-results-card {
  background: var(--ovp-card);
  border: 1px solid var(--ovp-line);
  border-radius: 20px;
  padding: 50px 40px;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.ovp-results-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.ovp-results-icon.is-great {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.ovp-results-icon.is-good {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.ovp-results-icon.is-ok {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.ovp-results-icon.is-bad {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.ovp-results-score {
  font-size: 56px;
  font-weight: 700;
  color: var(--ovp-text);
  margin-bottom: 10px;
}

.ovp-results-message {
  font-size: 18px;
  color: var(--ovp-muted);
  margin-bottom: 30px;
}

.ovp-results-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
}

.ovp-results-stat {
  text-align: center;
}

.ovp-results-stat-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--ovp-text);
}

.ovp-results-stat-label {
  font-size: 13px;
  color: var(--ovp-muted);
}

.ovp-results-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ovp-results-actions-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.ovp-results-actions-row .ovp-btn {
  flex: 1;
  width: 100%;
}

/* Light Mode for Test */
body.ovp-light-mode .ovp-test-header {
  background: #f1f5f9;
}

body.ovp-light-mode .ovp-test-progress-bar {
  background: #e2e8f0;
}

body.ovp-light-mode .ovp-answer-option {
  background: #f8fafc;
}

body.ovp-light-mode .ovp-answer-option:hover {
  background: #f1f5f9;
}

/* Opțiuni - ocupă spațiu maxim */
.ovp-grile-options {
  margin: 16px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ovp-option-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ovp-option-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ovp-option-label:hover {
  background: #111827;
  border-color: var(--ovp-accent);
}

.ovp-option-text {
  font-size: 14px;
  color: var(--ovp-text);
  flex: 1;
}

.ovp-type-count {
  font-size: 12px;
  color: var(--ovp-text-muted, #888);
  font-weight: 400;
}

/* Radio buttons */
.ovp-radio {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ovp-line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease;
}

.ovp-radio:checked {
  border-color: var(--ovp-accent);
}

.ovp-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--ovp-accent);
  border-radius: 50%;
}

/* Disclaimer Premium pentru explicații */
.ovp-explanation-premium-notice {
  position: relative;
  padding: 14px 120px 14px 16px;
  background: rgba(205, 2, 2, 0.08);
  border: 1px solid rgba(205, 2, 2, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ovp-text-muted, #aaa);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Badge Premium */
.ovp-exp-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #f5c518, #e0a800);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ovp-exp-badge .dashicons {
  color: #CD0202 !important;
  font-size: 13px !important;
  width: 13px !important;
  height: 13px !important;
}

/* Linia cu textul */
.ovp-exp-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ovp-explanation-premium-notice .dashicons {
  color: #CD0202;
  font-size: 14px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
}

.ovp-explanation-premium-notice strong {
  color: #CD0202;
}

/* Link pe rândul următor */
.ovp-explanation-premium-notice .ovp-home-card-premium-link {
  color: #CD0202;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}

.ovp-explanation-premium-notice .ovp-home-card-premium-link:hover {
  color: #ff3333;
  opacity: 1;
}

/* Casetă upsell mai subtilă, sub explicația deja vizibilă (Grile Examene, useri gratuiți) */
.ovp-explanation-premium-upsell {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(205, 2, 2, 0.06);
  border: 1px solid rgba(205, 2, 2, 0.15);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ovp-text-muted, #aaa);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ovp-explanation-premium-upsell .ovp-exp-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ovp-explanation-premium-upsell .dashicons {
  color: #CD0202;
  font-size: 14px;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ovp-explanation-premium-upsell strong {
  color: #CD0202;
}

.ovp-explanation-premium-upsell .ovp-home-card-premium-link {
  color: #CD0202;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}

.ovp-explanation-premium-upsell .ovp-home-card-premium-link:hover {
  color: #ff3333;
  opacity: 1;
}

/* Responsive */
@media (max-width: 600px) {
  .ovp-exp-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* Radio forțat selectat vizual (pentru disabled+checked) */
.ovp-radio-forced-checked {
  border-color: var(--ovp-accent) !important;
}

.ovp-radio-forced-checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--ovp-accent) !important;
  border-radius: 50% !important;
}

/* Checkboxes */
.ovp-checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ovp-line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease;
}

.ovp-checkbox:checked {
  border-color: var(--ovp-accent);
  background: var(--ovp-accent);
}

.ovp-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Input custom pentru număr */
.ovp-option-custom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}

.ovp-option-custom .ovp-custom-input {
width: 100%;
max-width: 100%;  /* Nu depășește cardul */
margin-top: 8px;
    margin-left: 0;
    box-sizing: border-box;  /* Include padding și border în width */
}

.ovp-custom-input {
width: 120px;
max-width: 100%;  /* Nu depășește containerul */
border-radius: 8px;
border: 1px solid var(--ovp-line);
background: #111827;
color: var(--ovp-text);
    padding: 8px 12px;
    font-size: 13px;
    flex-shrink: 0;
    box-sizing: border-box;  /* Include padding și border în width */
}

.ovp-custom-input:focus {
  outline: none;
  border-color: var(--ovp-accent);
}

.ovp-custom-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Card informativ intern pentru grile */
.ovp-grile-info-box {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(205, 2, 2, 0.08) 0%, rgba(205, 2, 2, 0.03) 100%);
  border: 1px solid rgba(205, 2, 2, 0.2);
  border-radius: 12px;
  display: flex;
  gap: 14px;
}

.ovp-grile-info-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--ovp-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ovp-grile-info-icon .dashicons {
  color: #fff;
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.ovp-grile-info-content {
  flex: 1;
}

.ovp-grile-info-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ovp-text);
  margin-bottom: 10px;
}

.ovp-grile-info-content p {
  font-size: 13px;
  color: var(--ovp-muted);
  line-height: 1.5;
  margin: 0 0 8px 0;
}

.ovp-grile-info-content p strong {
  color: var(--ovp-text);
}

.ovp-grile-info-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(205, 2, 2, 0.1);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ovp-accent);
}

.ovp-grile-info-tip .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--ovp-accent);
}

/* Hint pentru tipul de selecție */
.ovp-option-hint {
  font-size: 11px;
  color: var(--ovp-muted);
  text-align: right;
  margin-top: 8px;
  font-style: italic;
  margin-bottom: 8px;
}

/* ======================================================
   SECȚIUNEA GRILE - BUTOANE ÎNAPOI/CONTINUA
   ====================================================== */

/* Container pentru cele două butoane */
.ovp-grile-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--ovp-line);
}

/* Stiluri pentru butonul Înapoi */
.ovp-btn-back {
  background: #374151 !important;
  border: 1px solid var(--ovp-line) !important;
  color: var(--ovp-text) !important;
}

.ovp-btn-back:hover {
  background: #4b5563 !important;
  border-color: var(--ovp-accent) !important;
}

/* Stiluri pentru butonul Continuă */
.ovp-btn-continue,
.ovp-btn-start {
  margin-left: auto !important; /* Forțează alinierea la dreapta */
}

/* Stiluri pentru butoane dezactivate */
.ovp-btn-continue:disabled,
.ovp-btn-start:disabled,
#ovp-finish-test:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Butoane în carduri Grile */
.ovp-btn-continue:disabled,
.ovp-btn-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ======================================================
   LIGHT MODE - SECȚIUNEA GRILE
   ====================================================== */

body.ovp-light-mode .ovp-grile-title {
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-btn-reset {
  background: #e5e7eb;
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-btn-reset:hover {
  background: #d1d5db;
}

body.ovp-light-mode .ovp-option-label {
  background: #f9fafb;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-option-label:hover {
  background: #f1f5f9;
  border-color: var(--ovp-accent);
}

body.ovp-light-mode .ovp-option-text {
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-radio {
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-radio:checked {
  border-color: var(--ovp-accent);
}

body.ovp-light-mode .ovp-checkbox {
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-checkbox:checked {
  border-color: var(--ovp-accent);
  background: var(--ovp-accent);
}

body.ovp-light-mode .ovp-custom-input {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-custom-input:focus {
  border-color: var(--ovp-accent);
}

/* Light Mode pentru cardul informativ grile */
body.ovp-light-mode .ovp-grile-info-box {
  background: linear-gradient(135deg, rgba(205, 2, 2, 0.06) 0%, rgba(205, 2, 2, 0.02) 100%);
  border-color: rgba(205, 2, 2, 0.15);
}

body.ovp-light-mode .ovp-grile-info-tip {
  background: rgba(205, 2, 2, 0.08);
}

/* Light Mode pentru butonul Înapoi */
body.ovp-light-mode .ovp-btn-back {
  background: #e5e7eb !important;
  border-color: var(--ovp-line) !important;
  color: var(--ovp-text) !important;
}

body.ovp-light-mode .ovp-btn-back:hover {
  background: #d1d5db !important;
  border-color: var(--ovp-accent) !important;
}

/* Light Mode pentru separator si subtitle */
body.ovp-light-mode .ovp-option-separator {
  background: var(--ovp-line);
}

body.ovp-light-mode .ovp-option-subtitle {
  color: var(--ovp-text);
}

/* ======================================================
   RESPONSIVE - SECȚIUNEA GRILE
   ====================================================== */

/* Tablet - 2 coloane */
@media (max-width: 1024px) {
  .ovp-grile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  /* La 2 coloane, Card 3 (al 3-lea element) ar rămâne singur pe rândul
     lui, cu un gol gol lângă el - îl întindem pe toată lățimea ca să nu
     lase spațiu neocupat. Fuziunea "L" e doar pentru desktop (vezi mai
     sus); aici rămân carduri normale, distincte. */
  .ovp-card-sesiuni-recente {
    grid-column: 1 / -1;
  }
  .ovp-sessions-wide-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .ovp-materii-tree {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile - 1 coloană */
@media (max-width: 768px) {
  .ovp-grile-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Pe mobile outer devine flex cu order */
  .ovp-grile-outer {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .ovp-grile-grid  { order: 1; }
  .ovp-grile-card-wide { order: 2; }

  /* Reordonare carduri din grid pe mobile folosind subgrid simulat */
  /* Card 3 (Materii) se mută după Sesiuni prin CSS order nu se poate direct în grid copil
     — soluția: scoatem cardul 3 din grid și îl punem în outer după card-wide */
  /* Implementat prin flex pe outer + display:contents pe grid */

  /* Card wide devine card normal pe mobile */
  .ovp-grile-card-wide {
    flex-direction: column !important;
    margin-bottom: 16px;
  }

  .ovp-sessions-wide-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  /* Pe mobil, arborele de Materii rămâne o singură coloană (așa cum e
     deja confirmat OK) - grid-ul de 4 coloane e doar pentru PC/laptop.
     IMPORTANT: `align-items: start` de la regula de bază (grid, pentru
     PC) rămânea moștenită aici, deși contextul devenise flex-column -
     într-un flex-column, align-items controlează axa orizontală
     (lățimea), deci "start" făcea fiecare casetă să se micșoreze la
     lățimea propriului text (Drept civil îngust, Organizarea și
     exercitarea profesiei de avocat lat) în loc să umple lățimea
     cardului, ca la Tip grile/Sesiuni. `align-items: stretch` repară
     asta - toate casetele devin la fel de late pe mobil. */
  .ovp-materii-tree {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .ovp-sub-materii-tree {
    padding-left: 14px;
    margin-left: 6px;
  }

  .ovp-sub-sub-materii-tree {
    padding-left: 12px;
    margin-left: 4px;
  }

  .ovp-grile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .ovp-grile-card {
    min-height: auto;
  }
  
  .ovp-option-label {
    padding: 12px 14px;
  }
  
  .ovp-custom-input {
    width: 100px;
    margin-left: 24px;
  }

  .ovp-btn-generate {
    width: 100%;
    padding: 14px 20px;
  }
}

@media (max-width: 480px) {
  .ovp-option-custom {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ovp-custom-input {
    margin-left: 0;
    width: 100%;
  }
}

/* ======================================================
   PREMIUM – Aliniere butoane pe aceeași linie (STRICT PREMIUM)
   ====================================================== */

#ovp-sec-premium .ovp-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#ovp-sec-premium .ovp-card .ovp-btn {
    margin-top: auto !important;
}

/* ======================================================
   TICHETE SUPORT – LAYOUT + CHAT (VARIANTA B)
   (STRICT în secțiunea Tichete / Ajutor)
   ====================================================== */

.ovp-support-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.ovp-support-left,
.ovp-support-right {
  background: #030712;
  border-radius: var(--ovp-radius);
  border: 1px solid var(--ovp-line);
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  min-height: 450px;
  display: flex;
  flex-direction: column;
}

.ovp-support-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.ovp-support-tab {
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: var(--ovp-muted);
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: center;
  transition: .2s;
}

.ovp-support-tab.is-active {
  background: var(--ovp-accent);
  border-color: var(--ovp-accent);
  color: #fff;
}

.ovp-support-panel {
  display: none;
}

.ovp-support-panel.is-active {
  display: block;
}

.ovp-support-list-top {
  margin-bottom: 10px;
}

#ovp-ticket-search {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  box-sizing: border-box;
}

.ovp-tickets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.ovp-ticket-card {
  border-radius: 12px;
  border: 1px solid var(--ovp-line);
  padding: 10px 12px;
  background: #030712;
  cursor: pointer;
  transition: .2s;
}

.ovp-ticket-card:hover {
  border-color: var(--ovp-accent);
  background: #050816;
}

.ovp-ticket-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.ovp-ticket-title {
  font-size: 14px;
  font-weight: 600;
}

.ovp-ticket-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ovp-muted);
  margin-bottom: 4px;
}

.ovp-ticket-cat {
  padding: 2px 6px;
  border-radius: 999px;
  background: #111827;
  font-size: 11px;
}

.ovp-ticket-date {
  font-size: 11px;
  opacity: 0.8;
}

.ovp-ticket-preview {
  font-size: 12px;
  color: var(--ovp-muted);
}

/* Status badge */
.ovp-ticket-status {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--ovp-line);
}

.ovp-ticket-status-open {
  border-color: #22c55e;
  color: #22c55e;
}

.ovp-ticket-status-in-progress {
  border-color: #fbbf24;
  color: #fbbf24;
}

.ovp-ticket-status-resolved {
  border-color: #60a5fa;
  color: #60a5fa;
}

.ovp-ticket-status-reopened {
  border-color: #f97316;
  color: #f97316;
}

.ovp-ticket-empty {
  font-size: 13px;
  color: var(--ovp-muted);
  border-radius: 12px;
  border: 1px dashed var(--ovp-line);
  padding: 10px 12px;
}

/* Formular tichet nou */
.ovp-ticket-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ovp-ticket-form label {
  font-size: 13px;
}

#ovp-open-ticket {
  align-self: flex-start;
  width: auto;
  padding: 10px 24px;
}

/* Stare "se trimite..." - feedback vizual clar + previne dublu-tap pe mobil */
.ovp-ticket-form button.is-loading,
.ovp-ticket-reply-form button.is-loading,
.ovp-ticket-form button:disabled,
.ovp-ticket-reply-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

#ovp-ticket-title,
#ovp-ticket-message {
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: #fff;
  padding: 8px 10px;
  /* 16px, nu 13px: sub 16px, iOS Safari face auto-zoom la focus pe input/
     textarea. Zoom-ul repetat la fiecare atingere a câmpului e motivul cel
     mai probabil pentru care userii de pe telefon puteau scrie doar
     litera cu litera (câmpul pare că "pierde" focusul după fiecare tastă). */
  font-size: 16px;
  box-sizing: border-box;
}

/* Select-ul de categorie tichet - stilizat separat de input-urile text, ca
   să putem controla săgeata nativă (altfel arată inconsistent/urât în
   funcție de browser/SO pe fundal închis) */
#ovp-ticket-category {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background-color: #030712;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #fff;
  padding: 8px 34px 8px 10px;
  font-size: 13px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .15s ease;
}

#ovp-ticket-category:hover {
  border-color: var(--ovp-accent, #CD0202);
}

#ovp-ticket-category:focus {
  outline: none;
  border-color: var(--ovp-accent, #CD0202);
  box-shadow: 0 0 0 3px rgba(205, 2, 2, .15);
}

#ovp-ticket-category option {
  background: #0b1220;
  color: #fff;
}

#ovp-ticket-message {
  resize: vertical;
}

/* CHAT TIChet – partea dreaptă */
.ovp-ticket-chat-empty {
  font-size: 13px;
  color: var(--ovp-muted);
  border-radius: 12px;
  border: 1px dashed var(--ovp-line);
  padding: 12px;
  text-align: center;
}

.ovp-ticket-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ovp-ticket-chat-header {
  border-radius: 12px;
  border: 1px solid var(--ovp-line);
  padding: 8px 10px;
  background: #030712;
}

.ovp-ticket-chat-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.ovp-ticket-chat-title {
  font-size: 14px;
  font-weight: 600;
}

.ovp-ticket-chat-sub {
  font-size: 12px;
  color: var(--ovp-muted);
  margin-top: 2px;
}

.ovp-ticket-header-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.ovp-ticket-status-btn {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--ovp-accent);
  background: transparent;
  color: var(--ovp-accent);
  cursor: pointer;
  transition: all 0.2s;
}

.ovp-ticket-status-btn:hover {
  background: var(--ovp-accent);
  color: #fff;
}

.ovp-ticket-status-btn.is-active {
  background: var(--ovp-accent);
  color: #fff;
}

.ovp-ticket-messages {
  border-radius: 12px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  padding: 10px;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ovp-ticket-msg {
  max-width: 85%;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
}

.ovp-ticket-msg-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
}

.ovp-ticket-msg-author {
  font-weight: 600;
}

.ovp-ticket-msg-time {
  opacity: 0.7;
}

.ovp-ticket-msg-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ovp-ticket-msg-edited {
  font-style: italic;
  opacity: 0.7;
}

.ovp-ticket-msg-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: inherit;
  opacity: 0.75;
  line-height: 1;
}

.ovp-ticket-msg-edit-btn:hover {
  opacity: 1;
}

.ovp-ticket-msg-edit-btn .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

.ovp-ticket-msg-edit-textarea {
  width: 100%;
  min-height: 70px;
  border-radius: 8px;
  border: 1px solid var(--ovp-line);
  background: var(--ovp-card, #030712);
  color: var(--ovp-text, #fff);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.ovp-ticket-msg-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ovp-ticket-msg-body {
  white-space: pre-wrap;
}

.ovp-ticket-msg.is-user {
  margin-left: auto;
  background: #111827;
}

.ovp-ticket-msg.is-admin {
  margin-right: auto;
  background: #030712;
  border: 1px solid var(--ovp-line);
}

.ovp-ticket-msg-system {
  font-size: 12px;
  color: var(--ovp-muted);
  text-align: center;
}

/* BUG real din spatele "nu pot scrie decât literă cu literă": formularul de
   tichet nou (.ovp-ticket-form) e stivuit pe verticală (flex-direction:
   column), dar acesta era rămas pe rândul implicit (row) cu 3 copii -
   textarea, zona de atașamente (care are un text lung de hint) și butonul
   de trimis. Pe ecrane înguste, cele două elemente cu conținut fix
   "furau" tot spațiul, iar textarea (flex:1, fără min-width) se
   comprima până la lățimea unui singur caracter -> textul (scris de
   utilizator sau placeholder-ul) se rupea literă cu literă pe verticală.
   Stivuirea pe coloană, ca la formularul de tichet nou, elimină complet
   problema, pe orice dimensiune de ecran. */
.ovp-ticket-reply-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.ovp-ticket-reply-form > button {
  align-self: flex-end;
  width: auto;
}

#ovp-ticket-reply-text {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: #fff;
  padding: 8px 10px;
  /* 16px pentru același motiv ca la #ovp-ticket-title/#ovp-ticket-message -
     evită auto-zoom-ul iOS Safari la focus. */
  font-size: 16px;
  resize: vertical;
  box-sizing: border-box;
}

/* ======================================================
   HAMBURGER MENU - MOBILE/TABLET
====================================================== */

/* Buton hamburger - ascuns pe desktop */
.ovp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid var(--ovp-line);
  border-radius: 10px;
  background: var(--ovp-card);
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 5px;
}

.ovp-hamburger:hover {
  background: #111827;
  border-color: var(--ovp-accent);
}

.ovp-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ovp-text);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.ovp-hamburger.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.ovp-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.ovp-hamburger.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Meniu mobile dropdown - ascuns pe desktop */
.ovp-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  background: var(--ovp-card);
  border: 1px solid var(--ovp-line);
  border-radius: var(--ovp-radius);
  margin-bottom: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.ovp-mobile-menu.is-open {
  max-height: 600px;
  opacity: 1;
  padding: 12px;
}

.ovp-mobile-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: transparent;
  color: var(--ovp-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.ovp-mobile-nav-btn:hover {
  background: #111827;
  color: var(--ovp-text);
}

.ovp-mobile-nav-btn.is-active {
  background: var(--ovp-accent);
  color: #ffffff;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  /* Arata hamburger pe tableta/mobile */
  .ovp-hamburger {
    display: flex;
  }

  /* Arata meniul mobile (initial inchis) */
  .ovp-mobile-menu {
    display: flex;
  }

  /* Ascunde navbar orizontal pe tableta/mobile */
  .ovp-navbar {
    display: none !important;
  }

  .ovp-main {
    padding: 16px 20px;
  }

  .ovp-header-text {
    display: none;
  }

  .ovp-brand-title-full {
    display: none;
  }

  .ovp-brand-title-short {
    display: inline;
  }

  /* Buton cont: pe mobil, textul (nume + Premium) rămâne vizibil, nu
     mai e ascuns - butonul se lățește cât are nevoie, cu text mai mic,
     ca să nu se suprapună cu celelalte butoane din header. */
  .ovp-user-name,
  .ovp-user-premium-badge {
    display: inline-flex !important;
  }

  .ovp-user-btn {
    width: auto !important;
    max-width: none !important;
    padding: 6px 12px 6px 6px !important;
  }

  /* MODIFICARE 87: varianta pentru vizitatori neautentificați
     (.ovp-user-btn-guest, doar iconița dashicons-admin-users, fără
     avatar/nume) NU trebuie să moștenească width:auto + padding-ul
     asimetric (6px stânga / 12px dreapta) de mai sus - acela e gândit
     strict pentru butonul de cont AL USERULUI LOGAT (avatar + nume,
     care chiar are nevoie să se lățească asimetric). Pe varianta doar-
     iconiță, acel padding asimetric împingea iconița vizibil spre
     stânga în interiorul butonului (exact reclamația userului).
     Revenim la același tratament pătrat, centrat, ca restul
     iconițelor din header (.ovp-header-btn, MODIFICARE 86) - 38px,
     fără padding, centrat pe ambele axe. */
  .ovp-user-btn-guest {
    width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .ovp-user-name {
    font-size: 12px !important;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ovp-user-premium-badge {
    font-size: 10px !important;
  }

  .ovp-header-actions {
    gap: 8px;
    /* MODIFICARE 78: iconițele/butoanele din dreapta nu se mai comprimă
       niciodată - vezi explicația detaliată de la .ovp-brand-logo-link
       mai jos, e exact același gen de bug. */
    flex-shrink: 0;
  }

  .ovp-header-online-users {
    padding: 0 8px;
    height: 36px;
  }

  .ovp-header-online-users-count {
    font-size: 13px;
  }

  /* MODIFICARE 78: .ovp-header-left (hamburger + brand) trebuie să poată
     lua tot spațiul rămas și să se micșoreze corect - fără asta,
     .ovp-brand (mai jos) nu are cum să știe cât spațiu are efectiv la
     dispoziție. */
  .ovp-header-left {
    min-width: 0;
    flex: 1 1 auto;
  }

  .ovp-hamburger {
    flex-shrink: 0;
  }

  /* Toate elementele la aceeasi inaltime (36px) */
  .ovp-brand-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* MODIFICARE 78: FĂRĂ asta, logo-ul se "strica" (apărea tăiat pe
     orizontală) în momentul în care tagline-ul a fost re-afișat mai jos
     - width/min-width!important pe .ovp-brand-logo fixează doar
     flex-basis-ul într-un flex container, NU e o lățime minimă garantată;
     când coloana de text (.ovp-brand-text-link, cu tagline pe 2 rânduri)
     avea nevoie de mai mult spațiu decât încăpea pe rând, flex-shrink
     comprima proporțional și link-ul logo-ului (care are overflow:hidden),
     tăind vizual imaginea din interior. flex-shrink:0 blochează complet
     micșorarea logo-ului - toată presiunea de spațiu cade exclusiv pe
     coloana de text (vezi .ovp-brand-text-link mai jos, care are
     min-width:0 și se trunchiează/înfășoară corect). Exact același bug -
     și fix - ca la header-ul paginilor publice (MODIFICARE 77). */
  .ovp-brand-logo-link {
    flex-shrink: 0;
  }

  .ovp-brand {
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .ovp-brand-text-link {
    min-width: 0;
    flex: 1 1 auto;
  }

  .ovp-brand-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    /* MODIFICARE 78: line-height:36px (fix, un singur rând) nu mai are
       sens acum că tagline-ul e din nou vizibil dedesubt - rândul nu mai
       e înalt de 36px, crește să încapă și tagline-ul. Trunchiem titlul
       cu elipsis dacă tot nu încape, în loc să-l lăsăm să împingă restul. */
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* MODIFICARE 78: userul vrea descrierea vizibilă și pe /dashboard, nu
     doar pe paginile publice (MODIFICARE 75-77) - identic tratată:
     comprimată, pe maximum 2 rânduri, fără să mai poată strica header-ul
     sau logo-ul, oricât de lungă ar fi. */
  .ovp-brand-tagline {
    display: block;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    max-height: 2.6em;
    margin-top: 2px;
    max-width: 100%;
  }

  /* MODIFICARE 86: 38px, nu 36px - identic cu .ovp-public-btn-icon-only
     de pe headerul public (assets/ovp-public-v7.css), care e 38px la
     orice lățime, fără nicio treaptă de compactare. */
  .ovp-header-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* MODIFICARE 86: adăugat width/height (lipseau) - fără ele, glifa
     dashicons rămâne pe cutia ei implicită (20px), nepătrată față de
     font-size (18px) - exact ca la .ovp-public-theme-toggle .dashicons/
     .ovp-public-btn-icon-only .dashicons de pe headerul public, care au
     mereu toate 3 (font-size + width + height) la 18px. */
  .ovp-header-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  .ovp-user-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    font-size: 11px;
  }

  .ovp-hamburger {
    width: 36px;
    height: 36px;
  }

  .ovp-hamburger span {
    width: 16px;
  }

  .ovp-notification-badge {
    top: -4px;
    right: -4px;
  }
  
  .ovp-support-layout {
    grid-template-columns: 1fr;
  }
  
  .ovp-support-left,
  .ovp-support-right {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .ovp-main {
    padding: 12px 16px;
  }

  .ovp-brand-title {
    font-size: 14px;
  }

  .ovp-brand-logo {
    width: 40px;
    height: 40px;
  }

  .ovp-header-btn {
    padding: 6px 8px;
  }

  /* MODIFICARE 86: era font-size:14px (fără width/height) - la acest
     prag (≤768px) iconițele din butoanele de header ajungeau vizibil
     mai mici decât cele din headerul public (18px, la orice lățime,
     fără nicio treaptă de compactare - vezi .ovp-public-btn-icon-only
     .dashicons din assets/ovp-public-v7.css). Măsurat live
     (getComputedStyle pe grile.juridice.ro, ~500px lățime): 14px aici
     vs 18px pe public, plus cutia glifei rămânea 18×20px (nepătrată,
     fără width/height explicit) - de-aici și impresia de iconițe "mici
     și descentrate" raportată. Aliniat la 18px + width/height 18px,
     identic cu public; butonul (.ovp-header-btn) rămâne oricum 38px
     pătrat de la pragul ≤1024px de mai sus (nimic nu-l suprascrie
     aici), deci iconița de 18px are loc din belșug, centrată de
     display:flex + justify-content:center de pe buton. */
  .ovp-header-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  .ovp-header-actions {
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .ovp-main {
    padding: 10px 12px;
  }

  .ovp-header {
    gap: 8px;
  }

  .ovp-header-left {
    gap: 8px;
  }

  .ovp-hamburger {
    width: 36px;
    height: 36px;
  }

  .ovp-hamburger span {
    width: 16px;
  }

  .ovp-brand-logo {
    width: 36px;
    height: 36px;
  }

  .ovp-brand-title {
    font-size: 13px;
  }

  /* MODIFICARE 78: pe telefoane foarte mici, tagline-ul rămâne pe 2
     rânduri (cerut explicit), doar cu font și mai mic decât la 1024px,
     ca să încapă sigur lângă logo-ul de 36px. */
  .ovp-brand-tagline {
    font-size: 9px;
    line-height: 1.25;
    max-height: 2.5em;
    margin-top: 1px;
  }

  .ovp-header-btn {
    padding: 6px;
  }

  .ovp-user-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
}

/* ==========================================================
   LIGHT MODE – OVERRIDE, DARK MODE NU ESTE ATINS
========================================================== */

body.ovp-light-mode {
  --ovp-bg: #f3f4f6;
  --ovp-bg-main: #f3f4f6;
  --ovp-card: #ffffff;
  --ovp-text: #0f172a;
  --ovp-muted: #6b7280;
  --ovp-line: #e5e7eb;
  --ovp-accent: #CD0202;
  --ovp-accent-hover: #e73333;
}

body.ovp-light-mode.page-template-default.page.page-id-447,
body.ovp-light-mode.page-template-default.page.page-id-0,
body.ovp-light-mode.page-template-default.page-slug-dashboard {
  background: #f9fafb;
}

body.ovp-light-mode .ovp-wrap {
  background: transparent;
  color: var(--ovp-text);
}

/* LIGHT MODE - NAVBAR ORIZONTAL */
body.ovp-light-mode .ovp-navbar {
  border-bottom-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-nav-btn {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-nav-btn:hover {
  background: #f1f5f9;
  border-color: var(--ovp-accent);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-nav-btn.is-active {
  background: var(--ovp-accent);
  border-color: var(--ovp-accent);
  color: #ffffff;
}

body.ovp-light-mode .ovp-nav-btn.is-active:hover {
  background: var(--ovp-accent-hover);
  color: #ffffff;
}

/* Pastilele informative (nr. grile / nr. utilizatori) nu sunt clickabile -
   fără border roșu la hover, nici pe light mode. Specificitate mai mare
   decât body.ovp-light-mode .ovp-nav-btn:hover de mai sus, ca să câștige. */
body.ovp-light-mode .ovp-nav-btn.ovp-nav-info:hover {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-card {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

body.ovp-light-mode .ovp-stat {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-chart-placeholder {
  border-color: var(--ovp-line);
  color: var(--ovp-muted);
}

body.ovp-light-mode .ovp-empty {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-note-form {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-note-form input,
body.ovp-light-mode .ovp-note-form textarea,
body.ovp-light-mode .ovp-note-form select {
  background: #f9fafb;
  color: #0f172a;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-note {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: #0f172a;
}

body.ovp-light-mode .ovp-note-category-badge {
  background: #f1f5f9;
}

body.ovp-light-mode .ovp-note-actions button {
  background: #f9fafb;
  color: var(--ovp-muted);
  border-color: var(--ovp-line);
}

body.ovp-light-mode #ovp-form-billing input {
  background: #f9fafb;
  color: #0f172a;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-settings-form input {
  background: #f9fafb;
  color: #0f172a;
  border-color: var(--ovp-line);
}

/* LIGHT MODE - HEADER BUTOANE */
body.ovp-light-mode .ovp-header-btn {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-header-btn:hover {
  background: #f1f5f9;
  border-color: var(--ovp-accent);
}

body.ovp-light-mode .ovp-notifications-dropdown {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-notification-item:hover {
  background: #f8fafc;
}

body.ovp-light-mode .ovp-user-avatar {
  background: var(--ovp-accent);
}

/* LIGHT MODE - HAMBURGER */
body.ovp-light-mode .ovp-hamburger {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-hamburger:hover {
  background: #f1f5f9;
  border-color: var(--ovp-accent);
}

body.ovp-light-mode .ovp-hamburger span {
  background: var(--ovp-text);
}

/* LIGHT MODE - MENIU MOBILE */
body.ovp-light-mode .ovp-mobile-menu {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-mobile-nav-btn {
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-mobile-nav-btn:hover {
  background: #f1f5f9;
}

body.ovp-light-mode .ovp-mobile-nav-btn.is-active {
  background: var(--ovp-accent);
  color: #ffffff;
}

/* ======================================================
   LIGHT MODE – Fix pentru cardurile de categorii din Notițe
   ====================================================== */

body.ovp-light-mode .ovp-note-cat-card {
    background: #ffffff !important;
    border-color: var(--ovp-line) !important;
    color: #0f172a !important;
}

body.ovp-light-mode .ovp-note-cat-card:hover {
    background: #CD0202 !important;
    color: #ffffff !important;
    border-color: #CD0202 !important;
}

body.ovp-light-mode .ovp-note-cat-card:hover .ovp-ic,
body.ovp-light-mode .ovp-note-cat-card:hover > * {
    color: #ffffff !important;
}

/* card activ */
body.ovp-light-mode .ovp-note-cat-card.is-active {
    background: #f1f5f9 !important;
    border-color: #CD0202 !important;
    color: #0f172a !important;
}

/* ======================================================
   LIGHT MODE - STILURI PENTRU SECȚIUNEA TICHETE
   ====================================================== */

body.ovp-light-mode .ovp-support-left,
body.ovp-light-mode .ovp-support-right {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-support-tab {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-support-tab.is-active {
  background: var(--ovp-accent);
  border-color: var(--ovp-accent);
  color: #ffffff;
}

body.ovp-light-mode #ovp-ticket-search {
  background: #f9fafb;
  color: var(--ovp-text);
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-ticket-card {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-ticket-card:hover {
  background: #f8fafc;
  border-color: var(--ovp-accent);
}

body.ovp-light-mode .ovp-ticket-cat {
  background: #f1f5f9;
}

body.ovp-light-mode .ovp-ticket-empty {
  border-color: var(--ovp-line);
  color: var(--ovp-muted);
}

body.ovp-light-mode #ovp-ticket-title,
body.ovp-light-mode #ovp-ticket-message,
body.ovp-light-mode #ovp-ticket-category {
  background: #f9fafb;
  color: var(--ovp-text);
  border-color: var(--ovp-line);
}

body.ovp-light-mode #ovp-ticket-category {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23334155' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

body.ovp-light-mode #ovp-ticket-category option {
  background: #ffffff;
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-ticket-chat-empty {
  border-color: var(--ovp-line);
  color: var(--ovp-muted);
}

body.ovp-light-mode .ovp-ticket-chat-header {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-ticket-messages {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode .ovp-ticket-msg.is-user {
  background: #f1f5f9;
}

body.ovp-light-mode .ovp-ticket-msg.is-admin {
  background: #ffffff;
  border-color: var(--ovp-line);
}

body.ovp-light-mode #ovp-ticket-reply-text {
  background: #f9fafb;
  color: var(--ovp-text);
  border-color: var(--ovp-line);
}

/* Butoane filtrare Admin în Light Mode */
body.ovp-light-mode .ovp-admin-filter-buttons {
  background: transparent;
}

body.ovp-light-mode .ovp-admin-filter-btn {
  background: #ffffff;
  border-color: var(--ovp-line);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-admin-filter-btn:hover {
  background: #f1f5f9;
  border-color: var(--ovp-accent);
  color: var(--ovp-text);
}

body.ovp-light-mode .ovp-admin-filter-btn.is-active {
  background: var(--ovp-accent);
  border-color: var(--ovp-accent);
  color: #ffffff;
}

/* ============================================
   GRILE ORIGINALE - PREMIUM LOCKED (Card 1)
   ============================================ */

.ovp-option-label-locked {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: none;
  border-color: rgba(205, 2, 2, 0.2) !important;
}

.ovp-option-premium-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #f5c400 0%, #e6a800 60%, #c98f00 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(230, 168, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  border: 1px solid rgba(255, 210, 0, 0.5);
  white-space: nowrap;
}

.ovp-option-premium-badge .dashicons {
  font-size: 12px;
  width: 12px;
  height: 12px;
  color: #CD0202;
  filter: drop-shadow(0 0 2px rgba(205, 2, 2, 0.8));
}

.ovp-grile-premium-notice {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(205, 2, 2, 0.07);
  border: 1px solid rgba(205, 2, 2, 0.18);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ovp-text-muted, #aaa);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ovp-grile-premium-notice .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: #CD0202;
  flex-shrink: 0;
  margin-top: 1px;
}

.ovp-grile-premium-notice strong {
  color: #CD0202;
}

.ovp-grile-premium-notice a {
  color: #CD0202;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-left: 4px;
}

.ovp-grile-premium-notice a:hover {
  text-decoration: underline;
}

/* Light mode */
body.ovp-light-mode .ovp-option-label-locked {
  opacity: 0.5;
}

body.ovp-light-mode .ovp-grile-premium-notice {
  background: rgba(205, 2, 2, 0.05);
  color: #555;
}

/* ======================================================
   PROFESII + SESIUNI EXPANDABILE - CARD A1
   ====================================================== */

.ovp-professions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ovp-profession-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.2s;
}

.ovp-profession-item.is-open {
  border-color: rgba(205,2,2,0.3);
}

.ovp-profession-label {
  justify-content: space-between !important;
  cursor: pointer;
  user-select: none;
  padding-right: 12px !important;
  transition: background 0.15s;
}

.ovp-profession-label:has(input:checked) {
  background: rgba(205,2,2,0.08) !important;
  border-color: rgba(205,2,2,0.4) !important;
}

.ovp-profession-arrow {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--ovp-text-muted, #aaa);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ovp-profession-item.is-open .ovp-profession-arrow {
  transform: rotate(180deg);
  color: var(--ovp-accent, #CD0202);
}

/* Sesiunile expandate */
.ovp-profession-sessions {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 10px;
}

.ovp-sessions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ovp-session-label {
  font-size: 13px !important;
  padding: 8px 10px !important;
  background: rgba(255,255,255,0.03);
}

.ovp-session-label:has(input:checked) {
  background: rgba(205,2,2,0.08) !important;
  border-color: rgba(205,2,2,0.4) !important;
}

.ovp-no-sessions-hint {
  font-size: 12px;
  color: var(--ovp-text-muted, #aaa);
  margin: 4px 0;
  padding: 4px 8px;
  font-style: italic;
}

/* Responsive */
@media (max-width: 600px) {
  .ovp-sessions-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   GUEST MODE - Secțiuni blocate (Notițe, Statistici, Suport, Setări)
   ============================================ */
.ovp-section.ovp-guest-locked {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}

.ovp-section.ovp-guest-locked > *:not(.ovp-guest-lock-overlay) {
  filter: blur(3px);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.ovp-guest-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 30px;
  background: rgba(3, 7, 18, 0.55);
}

.ovp-guest-lock-overlay .dashicons {
  font-size: 40px;
  width: 40px;
  height: 40px;
  color: #CD0202;
}

.ovp-guest-lock-overlay p {
  font-size: 16px;
  font-weight: 600;
  color: var(--ovp-text, #fff);
  max-width: 380px;
  margin: 0;
}

.ovp-guest-lock-overlay .ovp-btn {
  pointer-events: auto;
}

/* ======================================================
   MODAL VIZUALIZARE COMPLETĂ NOTIȚĂ
====================================================== */
.ovp-note {
  cursor: pointer;
}

.ovp-note.ovp-note-empty {
  cursor: default;
}

.ovp-note-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ovp-note-view-modal {
  position: relative;
  background: var(--ovp-card, #030712);
  border: 1px solid var(--ovp-line, #1f2937);
  border-radius: 16px;
  padding: 36px;
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.ovp-note-view-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ovp-muted, #9ca3af);
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.ovp-note-view-close:hover {
  background: rgba(205, 2, 2, 0.1);
  color: var(--ovp-accent, #CD0202);
}

.ovp-note-view-close .dashicons {
  font-size: 22px;
  width: 22px;
  height: 22px;
}

.ovp-note-view-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-right: 30px;
}

.ovp-note-view-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: var(--ovp-text, #ffffff);
  word-wrap: break-word;
}

.ovp-note-view-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ovp-muted, #9ca3af);
  word-wrap: break-word;
  white-space: normal;
}

/* Badge Premium deasupra numelui din header */
.ovp-user-name-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.ovp-user-premium-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #FFB800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}

.ovp-user-premium-badge .dashicons {
  font-size: 11px;
  width: 11px;
  height: 11px;
  color: #FFB800;
}

/* ======================================================
   POPUP SESIUNE UNICĂ (login pe alt dispozitiv)
====================================================== */
.ovp-session-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ovp-session-popup {
  background: var(--ovp-card, #030712);
  border: 1px solid var(--ovp-line, #1f2937);
  border-radius: 16px;
  padding: 36px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.ovp-session-popup-icon {
  font-size: 44px;
  width: 44px;
  height: 44px;
  color: #CD0202;
  margin-bottom: 12px;
}

.ovp-session-popup h3 {
  margin: 0 0 12px 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--ovp-text, #fff);
}

.ovp-session-popup p {
  margin: 0 0 24px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ovp-muted, #9ca3af);
}

.ovp-explanation-para {
  margin-top: 8px;
}

.ovp-folder-add-btn {
  cursor: pointer;
  border: 1px dashed var(--ovp-line);
  color: var(--ovp-muted);
}

.ovp-folder-add-btn:hover {
  border-color: var(--ovp-accent);
  color: var(--ovp-accent);
}

.ovp-folder-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  grid-column: 1 / -1;
  margin-top: 8px;
}

.ovp-folder-add-form input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  background: #030712;
  color: var(--ovp-text);
  font-size: 13px;
}

/* Banner "validează contul" - vezi includes/helpers/ovp-email-verification-helper.php */
.ovp-verify-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  color: #92400e;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  flex-wrap: wrap;
}

.ovp-verify-banner-icon {
  color: #92400e;
  flex-shrink: 0;
}

.ovp-verify-banner-text {
  flex: 1;
  min-width: 200px;
  font-weight: 500;
}

.ovp-verify-banner-btn {
  background: #92400e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s ease;
}

.ovp-verify-banner-btn:hover { opacity: .85; }
.ovp-verify-banner-btn:disabled { opacity: .6; cursor: default; }

.ovp-verify-success-notice,
.ovp-verify-error-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
}

.ovp-verify-success-notice {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.ovp-verify-error-notice {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

body.ovp-light-mode .ovp-verify-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

/* Pop-up "Validează-ți contul" - vezi #ovp-verify-gate-overlay */
#ovp-verify-gate-overlay #ovp-verify-gate-close {
  background: transparent;
  border: 1px solid var(--ovp-line);
  color: var(--ovp-text);
}

#ovp-verify-gate-overlay #ovp-verify-gate-close:hover {
  background: rgba(255,255,255,.06);
  box-shadow: none;
  transform: none;
}

/* Banner "test neterminat" din Statistici - vezi includes/helpers/ovp-saved-tests-helper.php */
.ovp-saved-test-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.4);
  color: var(--ovp-text);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  flex-wrap: wrap;
}

.ovp-saved-test-banner .dashicons {
  color: #3498db;
  flex-shrink: 0;
}

.ovp-saved-test-banner span:not(.dashicons) {
  flex: 1;
  min-width: 200px;
}

.ovp-saved-test-banner .ovp-btn-sm {
  background: #3498db;
  color: #fff;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.ovp-saved-test-banner .ovp-btn-sm:hover {
  background: #2980b9;
}

body.ovp-light-mode .ovp-saved-test-banner {
  background: #eff6ff;
}

/* Select de mutare tichet la alt departament - vezi
   includes/helpers/ovp-ticket-departments-helper.php */
.ovp-ticket-chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ovp-ticket-move-department {
  background: var(--ovp-card, #030712);
  color: var(--ovp-text, #fff);
  border: 1px solid var(--ovp-line, #1f2937);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* Atașamente (până la 3 imagini) pe tichete de suport - vezi
   includes/helpers/ovp-ticket-attachments-helper.php */
.ovp-ticket-attach-zone {
  margin-top: 8px;
}

.ovp-ticket-attach-previews {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ovp-ticket-attach-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ovp-line);
}

.ovp-ticket-attach-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ovp-ticket-attach-thumb .ovp-ticket-attach-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.65);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ovp-ticket-attach-thumb .ovp-ticket-attach-remove:hover {
  background: var(--ovp-accent);
}

.ovp-ticket-attach-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ovp-muted);
  background: none;
  border: 1px dashed var(--ovp-line);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.ovp-ticket-attach-add:hover {
  color: var(--ovp-accent);
  border-color: var(--ovp-accent);
}

.ovp-ticket-attach-add .dashicons {
  font-size: 15px;
  width: 15px;
  height: 15px;
}

.ovp-ticket-attach-hint {
  font-size: 11px;
  color: var(--ovp-muted);
  opacity: 0.8;
  margin-top: 4px;
}

.ovp-ticket-msg-attachments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ovp-ticket-msg-attachment img {
  max-width: 160px;
  max-height: 160px;
  border-radius: 10px;
  border: 1px solid var(--ovp-line);
  cursor: zoom-in;
  display: block;
  object-fit: cover;
}