:root{
  --bg: var(--mv-bg);
  --glass: rgba(255,255,255,0.08);
  --border: var(--mv-border);
  --text: var(--mv-text-soft);
  --muted: var(--mv-text-2);
  --primary: var(--mv-accent);
  --accent: var(--mv-accent-soft);}
*{box-sizing: border-box;}
body{margin: 0; background: radial-gradient(1200px 800px at 10% 10%, var(--mv-surface-solid), var(--mv-bg)); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;}
.container{max-width: 1100px; margin: 0 auto; padding: 16px;}
.glass{background: var(--glass); border: 1px solid var(--border); border-radius: 20px;}
.nav{position: sticky; top: 0; z-index: 10; margin-bottom: 0;}
.nav-inner{display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.brand{font-weight: 700; color: var(--mv-text);}
.menu a{color: var(--text); text-decoration: none; margin-right: 10px; padding: 8px 12px; border-radius: 12px;}
.menu a:hover{background: var(--mv-elev-3);}
.page{display: grid; gap: 16px; padding-top: 8px;}

.hero{display: flex; align-items: center; justify-content: center; min-height: 260px; text-align: center;}
.hero h1{margin: 0 0 8px 0;}
.hero .btn{margin-top: 12px;}

.grid{display: grid; gap: 16px;}
.grid.two{grid-template-columns: repeat(2, minmax(0,1fr));}
.grid.three{grid-template-columns: repeat(3, minmax(0,1fr));}
@media(max-width:900px){ .grid.two,.grid.three{grid-template-columns: 1fr;} }

.card{padding: 16px;}
.row{display: flex; gap: 10px; align-items: center;}
.row.end{justify-content: flex-end;}
.bullets{margin: 0; padding-left: 18px;}
.bullets li{margin: 4px 0;}

.btn{position: relative; border: 1px solid var(--border); background: var(--mv-elev-3); color: var(--mv-text); padding: 10px 14px; border-radius: 14px; cursor: pointer; overflow: hidden; transition: transform 0.1s ease;}
.btn:hover{}
.btn.primary{ background: var(--mv-accent); color: var(--mv-text-inverse);}
.btn.xl{font-size: 18px; padding: 14px 18px;}
.ripple-circle{position: absolute; transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; background: var(--mv-elev-4); animation: ripple 0.6s ease-out forwards;}
@keyframes ripple{ from{width: 0;height: 0;opacity: 0.6;} to{width: 380px;height: 380px;opacity: 0;} }

.psych-card{display: flex; gap: 12px; padding: 12px; text-decoration: none; color: inherit; border-radius: 16px;}
.psych-card .avatar{width: 52px;height: 52px;border-radius: 12px;background: var(--mv-elev-4);}
.meta .title{font-weight: 600;}
.sub{color: var(--muted);}
.price{ color: var(--mv-text);}

.input, textarea, select{background: var(--mv-elev-3); border: 1px solid var(--border); color: var(--mv-text); border-radius: 12px; padding: 8px 10px;}
textarea{min-height: 90px;}
/* Fix dropdown options in DARK theme */
select option{
  background: var(--mv-bg);
  color: var(--mv-text-soft);}
select optgroup{
  background: var(--mv-bg);
  color: var(--mv-text-soft);}

.comments{list-style: none; padding: 0; margin-top: 12px;}
.comments li{padding: 8px; border-bottom: 1px dashed var(--border);}

.map iframe{width: 100%; height: 300px; border: 0; border-radius: 12px;}

/* Calendar 3D card */
.calendar-3d{perspective: 1000px;}
.calendar-card{transform: rotateX(10deg); transform-style: preserve-3d; background: var(--mv-elev-3); border-radius: 16px; border: 1px solid var(--border); padding: 10px;}
.cal-head{display: flex; gap: 8px; margin-bottom: 8px;}
.cal-grid{display: grid; grid-template-columns: repeat(7,1fr); gap: 6px;}
.cal-day{aspect-ratio: 1/1; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--mv-text-soft); background: var(--mv-elev-1); cursor: pointer;}
.cal-day.muted{opacity: 0.4;}
.cal-day.selected{outline: 2px solid var(--primary); background: rgba(110,193,255,0.15);}
.cal-day.today{border-color: var(--accent);}
.slot-grid{display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px;}
.slot{padding: 8px; border: 1px solid var(--border); border-radius: 10px; text-align: center; background: var(--mv-elev-2); cursor: pointer;}
.slot.busy{background: rgba(255,80,80,0.15); color: var(--mv-text); cursor: not-allowed;}
.slot.active{outline: 2px solid #6effc1; background: rgba(110,255,193,0.12);}
.sel{margin-top: 6px; color: var(--muted);}


/* ==== Overrides v4: stacked 3D fields on all psychologist profiles ==== */
#profile .form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: var(--mv-elev-1);
  padding: 16px;
  border-radius: 18px;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.25);}
#profile .form label {
  display: block !important;
  margin: 4px 0 2px;
  color: var(--muted);
  font-size: 14px;}
#profile .form .input,
#profile .form textarea,
#profile .form select {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  padding: 12px 14px !important;
  background: var(--mv-elev-1) !important;
  border: 1px solid var(--mv-border) !important;
  border-radius: 14px !important;
  color: var(--mv-text-soft) !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.1), 0 4px 10px rgba(0,0,0,0.3) !important;
  transition: all 0.2s ease-in-out !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color-scheme: dark;}
#profile .form .input:focus,
#profile .form textarea:focus,
#profile .form select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: var(--mv-elev-3) !important;
  box-shadow: 0 0 8px var(--accent) !important;}
#profile .form select option {
  background: var(--mv-bg) !important;
  color: var(--mv-text-soft) !important;
  border: none !important;}
#profile .form ::placeholder { color: var(--mv-text-2);}
#profile .form textarea {
  min-height: 110px !important;
  resize: vertical;}


/* ==== v5 3D glass buttons and cards ==== */
/* Cards */
.card, .psych-card, .video-box, .calendar-card, .glass { background: var(--mv-elev-2);
  border: 1px solid var(--mv-border);
  border-radius: 20px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;}
.card:hover, .psych-card:hover, .video-box:hover {
  border-color: rgba(139, 211, 255, 0.6);}

/* ===========================================================================
   TEXT CLAR în timpul efectelor de hover/transform (anti-„ceață")
   Cauza: la animarea unui transform, elementul e promovat pe un strat GPU și
   textul comută de la subpixel-AA la grayscale-AA (pare cețos), apoi revine la
   final. Soluția: ținem aceste elemente PERMANENT pe un strat stabil
   (will-change/backface) -> AA consistent, fără saltul de cețire. Lista e doar
   containerele de top care fac hover-transform (nu copiii) -> strate limitate.
   =========================================================================== */
.card, .psych-card, .psy-card, .video-box, .glass, .btn,
.coach-card, .nut-card, .info-card, .stat-card, .svc-card, .src-card, .gx-card,
.sp-card, .analysis-card, .appointment-card, .sd-apt-card, .sd-past-card,
.pu-stat-card, .ms-coll-card, .ms-pl-card, .ms-breath-card, .test-set-card,
.answer-option-card, .admin-plan-card, .add-set-card,
.coach-card-book, .nut-card-book, .psy-card-book {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;}

/* Buttons */
.btn {
  position: relative;
  border: 1px solid var(--mv-border-strong); background: var(--mv-elev-4);
  color: var(--mv-text-soft);
  transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.2s ease;}
.btn:hover {
  border-color: rgba(139,211,255,0.6);}
.btn:active {}

/* Primary button as glossy glass */
.btn.primary {
  color: var(--mv-text-inverse); background: rgba(139,211,255,0.9);
  border-color: rgba(139,211,255,0.8);}
.btn.primary:hover { background: rgba(160,220,255,0.95);}

/* Psychologist list card polish */
.psych-card {
  align-items: center;
  padding: 14px;}
.psych-card .avatar {}
.psych-card .title { font-weight: 700;}
.psych-card .sub { opacity: 0.9;}

/* Subtle glow on focusable elements */
.input:focus, textarea:focus, select:focus, .btn:focus {}

/* Nav bar polish */
.nav.glass { background: var(--mv-elev-2);
  border: 1px solid var(--mv-border);
  border-radius: 20px;}


  --bg:#eaf4ff;
  --glass: rgba(255,255,255,0.7);
  --border: var(--mv-border);
  --text:#09243a;
  --muted:#4a6a85;
  --primary:#3aa0ff;
  --accent:#60b8ff;
}
  background: radial-gradient(1200px 800px at 10% 10%, #ffffff, #ddebfb);
  color: var(--text);
}
  color:#001a2e;
}
  filter:none;
}
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 26px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
}
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #09243a !important;
  color-scheme: light;
}
  background: #ffffff !important;
  color: #09243a !important;
}


/* ===== Ocean Light Theme v7 ===== */
  --bg:#e8f4ff;
  --glass: rgba(255,255,255,0.85);
  --border: var(--mv-border);
  --text:#06263d;
  --muted:#3e6a8a;
  --primary:#2f9bff;
  --accent:#6bc6ff;
}
  background: radial-gradient(1000px 700px at 20% 10%, #ffffff, #cfe8ff) !important;
  background-color:#e8f4ff !important;
  color: var(--text) !important;
}
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(230,244,255,0.9)) !important;
  border: 1px solid rgba(0,48,80,0.12) !important;
  box-shadow: 0 12px 24px rgba(0,60,120,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  color: var(--text) !important;
}
  color: #08304a !important;
  border-color: rgba(0,48,80,0.18) !important;
  background: radial-gradient(circle at 30% -10%, rgba(255,255,255,0.9), rgba(240,250,255,0.8)) !important;
  box-shadow: 0 8px 18px rgba(0,60,120,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
  background: linear-gradient(180deg, rgba(125,205,255,0.95), rgba(90,185,255,0.95)) !important;
  border-color: rgba(80,170,250,0.9) !important;
  color:#06263d !important;
}
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(0,48,80,0.15) !important;
  color: #06263d !important;
  color-scheme: light;
}
  background: #ffffff !important;
  color: #06263d !important;
}
  background: rgba(0,60,120,0.08) !important;
}


/* ===== v8 global theme transitions and color unification ===== */
html, body, .card, .psych-card, .video-box, .calendar-card, .glass, .btn,
.input, textarea, select, .nav.glass {
  transition: background 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;}

.card, .psych-card, .video-box, .calendar-card { color: var(--text);}
.menu a { color: var(--text);}

/* Ensure hero text adapts */
.hero h1, .hero p { color: var(--text);}

/* Fix select white flash in all browsers */
select, input, textarea { color-scheme: dark;}


/* v9 minor UI for theme toggle */
#theme-toggle { min-width: 40px; text-align: center; font-weight: 700;}


/* v10 navbar theme select sizing */
.nav .menu #theme-select { height: 36px; padding: 6px 10px;}


/* ===== v11: Ocean Light palette, strong overrides ===== */
  --bg:#e8f4ff;
  --glass: rgba(255,255,255,0.9);
  --border: var(--mv-border);
  --text:#06263d;
  --muted:#3e6a8a;
  --primary:#2f9bff;
  --accent:#6bc6ff;
}
  background: radial-gradient(1000px 700px at 20% 10%, #ffffff, #cfe8ff) !important;
  color: var(--text) !important;
}
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(230,244,255,0.95)) !important;
  border: 1px solid rgba(0,48,80,0.12) !important;
  box-shadow: 0 12px 24px rgba(0,60,120,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  color: var(--text) !important;
}
  color:#08304a !important;
  border-color: rgba(0,48,80,0.18) !important;
  background: radial-gradient(circle at 30% -10%, rgba(255,255,255,1), rgba(240,250,255,0.9)) !important;
  box-shadow: 0 8px 18px rgba(0,60,120,0.15), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
  background: linear-gradient(180deg, rgba(125,205,255,0.98), rgba(90,185,255,0.98)) !important;
  border-color: rgba(80,170,250,0.95) !important;
  color:#06263d !important;
}
  background: rgba(255,255,255,1) !important;
  border: 1px solid rgba(0,48,80,0.15) !important;
  color: #06263d !important;
  color-scheme: light;
}


/* ===== v12 Light theme readability ===== */
  --text:#042235;            /* text mai închis */
  --muted:#345c77;          /* text secundar mai vizibil */
}

  color: var(--text) !important;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

  color: var(--text) !important;
  font-weight: 800;
}


/* Meniu și linkuri */
  color: var(--text) !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Inputuri și placeholder vizibile */
  color:#0b2d46 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,80,140,0.08) !important;
}

/* Calendar numere și borduri mai clare */
  color:#143a58 !important;
  border-color: rgba(0,60,120,0.2) !important;
  background: rgba(255,255,255,0.85) !important;
}

/* Sloturi de timp, text clar și contrast bun */
  color:#0e324f !important;
  border-color: rgba(0,60,120,0.22) !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 6px 16px rgba(0,60,120,0.08) !important;
}
  background: rgba(255,120,120,0.18) !important;
  color:#7a1e1e !important;
}
  outline:2px solid #2f9bff !important;
  background: rgba(110,193,255,0.18) !important;
}

/* Carduri, text și margini lizibile */
  color: var(--text) !important;
  border-color: rgba(0,48,80,0.16) !important;
}

/* Butoane, text mai închis pentru contrast */
  color:#06263d !important;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

/* Prețuri și etichete */

/* Video detail page */
.video-player{ position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.25);}
.title-link{ color: var(--text); text-decoration: none; font-weight: 700;}
.title-link:hover{ text-decoration: underline;}

.video-box .meta .local-badge{ display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 10px; font-size: 12px; background: rgba(110,255,193,0.18); border: 1px solid rgba(110,255,193,0.5); color: #b8ffd9;}

/* Glass video controls */
.vp { position: relative;}
.vp-controls{
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 16px; margin-top: 10px;
  background: var(--glass); border: 1px solid var(--border);}
.vp-controls .vp-seek{ flex: 1;}
.vp-controls .vp-time{ min-width: 120px; text-align: center; color: var(--text);}
.vp-controls input[type="range"]{ accent-color: var(--accent);}
.vp-controls .vp-quality{ width: auto; min-width: 90px; padding: 6px 10px; cursor: pointer;}


/* v17: Logo styling */
.brand .logo { width: 28px; height: 28px; border-radius: 50%; margin-right: 8px;}
footer .logo.small { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin: -2px 6px 0 6px;}


/* v18: Logo sizes and hover */
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text);}
.brand .logo { width: 28px; height: 28px; border-radius: 50%;}
.brand:hover .logo { transition: transform 0.15s ease;}
footer .logo.small { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin: -2px 6px 0 6px;}


/* v19: Navbar compact + logo mic */
.nav.glass { padding: 6px 10px !important;}
.nav .container.nav-inner { gap: 10px !important;}
.brand .logo { width: 48px !important; height: 48px !important;} /* logo marit */
.brand span { font-size: 16px !important; line-height: 1 !important;}
.menu a { padding: 6px 8px !important; font-size: 14px !important;}
.menu .btn, #theme-select { height: 32px !important; padding: 6px 10px !important;}
.nav.glass { border-radius: 0 !important;}
.card.glass, .video-box.glass, .calendar-card.glass { border-radius: 14px !important;}

@media (max-width: 768px){
  .brand .logo { width: 32px !important; height: 32px !important;}
  .brand span { font-size: 15px !important;}
  .menu a { font-size: 13px !important;}
  .menu .btn, #theme-select { height: 30px !important; padding: 5px 8px !important;}
}


/* v20: Panel button alignment */
.nav .menu .btn { display: inline-flex; align-items: center;}


/* v21: Admin header logout button alignment */
header.nav .menu .btn { display: inline-flex; align-items: center; height: 32px; padding: 6px 10px;}


/* v23: admin link styling on video list */
.title-link + a.sub { text-decoration: none; opacity: 0.9;}
.title-link + a.sub:hover { text-decoration: underline;}


/* Align video cards to the same visual system as .psych-card */
.video-box{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  min-height: 76px; /* 52 avatar + 2*12 padding */
;}
.video-box::before{
  content: '';
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--mv-elev-4);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);
  flex: 0 0 52px;}
.video-box .meta{ display: flex; flex-direction: column;}


/* Thumbnails for video list, aligned to psych cards */
.video-box{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  min-height: 76px;}
.video-box::before{ content: none;}
.video-box .avatar{
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--mv-elev-4);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);
  flex: 0 0 52px;}
.video-box .meta{ display: flex; flex-direction: column;}


/* Uniform tile sizing across lists */
.grid.three .psych-card,
.grid.three .video-box{
  min-height: 96px; /* same visual height */
;}

.video-box .title-link{ font-weight: 700;} /* match psych title weight */
.video-box .sub{ color: var(--muted);}     /* match subtitle tone */


/* Shared tile system */
.tile{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  min-height: 96px;}
.tile .avatar{
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--mv-elev-4);
  background-size: cover;
  background-position: center;
  flex: 0 0 52px;}
.tile .meta{ display: flex; flex-direction: column;}


/* Force identical tile sizing and visible avatars on video list */
.video-box.tile{ display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; border-radius: 16px !important; min-height: 96px !important;}
.video-box.tile::before{ content: none !important;}
.video-box.tile .avatar{ display: block !important; width: 52px !important; height: 52px !important; flex: 0 0 52px !important; border-radius: 12px !important; background-size: cover !important; background-position: center !important;}
.video-box.tile .meta{ display: flex !important; flex-direction: column !important; flex: 1 1 auto !important;}


/* Guaranteed equal layout for video tiles, with placeholder if no .avatar */
.video-box.tile{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  min-height: 96px !important;}
.video-box.tile::before{
  content: '' !important;
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 12px !important;
  background: var(--mv-elev-4) !important;}
.video-box.tile .avatar{
  width: 52px !important; height: 52px !important; flex: 0 0 52px !important;
  border-radius: 12px !important; background-size: cover !important; background-position: center !important;}
.video-box.tile .meta{ display: flex !important; flex-direction: column !important;}


/* Ensure video list cards reuse exact psych-card sizing */
#video-grid .psych-card{ min-height: 96px;}


/* Responsive grids */
@media (max-width: 640px){
  .grid.three{ grid-template-columns: 1fr;}
  .container{ padding: 12px;}
}
@media (min-width: 641px) and (max-width: 1024px){
  .grid.three{ grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 1025px){
  .grid.three{ grid-template-columns: repeat(3, minmax(0,1fr));}
}

/* Make admin tables scrollable on small screens */
.card table{ display: table; width: 100%; border-collapse: collapse;}
@media (max-width: 640px){
  .card{ overflow: auto;}
  table th, table td{ padding: 8px; white-space: nowrap;}
}

/* Ensure tiles adapt gracefully */
.tile{ min-height: 96px;}
.tile .title{ font-weight: 700;}
.tile .sub{ color: var(--muted);}
.tile .avatar{ width: 52px; height: 52px; border-radius: 12px; background-size: cover; background-position: center;}


/* Compact clear buttons near search fields */
#psych-clear, #video-clear{ padding: 8px 10px;}
@media (max-width: 640px){
  #psych-clear, #video-clear{ padding: 6px 8px; font-size: 0.9rem;}
}

/* Custom dark dropdown (selectx) */
.selectx{ position: relative; min-width: 220px; display: inline-block;}
.selectx .sel-btn{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: var(--mv-elev-3); border: 1px solid var(--border); color: var(--text);}
.selectx .list{
  position: absolute; z-index: 999; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 260px; overflow: auto; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  display: none;}
.selectx.open .list{ display: block;}
.selectx .item{ padding: 10px 12px; cursor: pointer; color: var(--text);}
.selectx .item:hover, .selectx .item.active{ background: var(--mv-elev-3);}
.selectx .chev{ margin-left: 10px; opacity: 0.8;}
@media (max-width:640px){ .selectx{ min-width: 160px;} }

/* Flip dropdown upwards when near bottom */
.selectx.drop-up .list{ top: auto; bottom: calc(100% + 6px);}


/* Fixed footer + reserved space */
:root{ --footer-h: 56px;}
body.has-fixed-footer{ padding-bottom: var(--footer-h);}
footer{ position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); z-index: 50;}


/* Frosted glass dropdown */
.selectx .sel-btn{ background: var(--mv-elev-3);
  border: 1px solid var(--mv-border);}
.selectx .list{
  background: linear-gradient(180deg, rgba(20,22,30,0.70), rgba(20,22,30,0.55));
  border: 1px solid var(--mv-border);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  overflow: auto;
  animation: popIn 0.12s ease-out;}
.selectx .item{ color: var(--text);}
.selectx .item:hover, .selectx .item.active{
  background: var(--mv-elev-3);}

/* Smooth open */
@keyframes popIn { from{ transform: translateY(-2px); opacity: 0.6;} to{ transform: translateY(0); opacity: 1;} }

/* Scrollbar styling inside dropdown list */
.selectx .list::-webkit-scrollbar{ width: 10px;}
.selectx .list::-webkit-scrollbar-track{
  background: var(--mv-elev-2);
  border-radius: 10px;}
.selectx .list::-webkit-scrollbar-thumb{
  background: var(--mv-elev-4);
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);}
.selectx .list:hover::-webkit-scrollbar-thumb{
  background: var(--mv-elev-4);}
/* Firefox */
.selectx .list{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) rgba(255,255,255,0.08);}


/* Enhanced frosted look for items + scrollbar */
.selectx .list{ padding: 6px;}
.selectx .item{
  position: relative;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 10px;
  transition: background 0.12s ease, transform 0.06s ease;}
.selectx .item:hover{
  background: var(--mv-elev-4);}
.selectx .item:active{
  background: var(--mv-elev-4);}
.selectx .item.active{
  background: linear-gradient(180deg, var(--mv-elev-4), var(--mv-elev-4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(255,255,255,0.10);}

/* WebKit scrollbar (Chrome, Edge) */
.selectx .list::-webkit-scrollbar{ width: 12px;}
.selectx .list::-webkit-scrollbar-button{ height: 0; width: 0; display: none;}
.selectx .list::-webkit-scrollbar-track{
  background: var(--mv-elev-2);
  border-radius: 12px;
  margin: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);}
.selectx .list::-webkit-scrollbar-thumb{
  border-radius: 12px;
  background: linear-gradient(180deg, var(--mv-elev-4), var(--mv-elev-4));
  border: 2px solid rgba(0,0,0,0.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20), 0 2px 6px rgba(0,0,0,0.25);}
.selectx .list:hover::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--mv-elev-4), var(--mv-elev-4));}

/* Firefox */
.selectx .list{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.45) rgba(255,255,255,0.10);}

/* Drop-up shadow parity */
.selectx.drop-up .list{
  box-shadow: 0 -18px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);}


/* Glass dropdown v2: stronger highlight and glossy scrollbar */
.selectx .list{ padding: 6px; background-clip: padding-box;}
.selectx .item{
  display: flex; align-items: center;
  width: 100%;
  padding: 12px 14px;
  margin: 3px 0;
  border-radius: 12px;}
.selectx .item:hover{
  background: var(--mv-elev-4);}
.selectx .item.active{
  background: linear-gradient(180deg, var(--mv-elev-4), var(--mv-elev-4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px rgba(255,255,255,0.10);}

/* Thicker glossy scrollbar */
.selectx .list::-webkit-scrollbar{ width: 14px;}
.selectx .list::-webkit-scrollbar-track{
  background: var(--mv-elev-3);
  border-radius: 12px;
  margin: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);}
.selectx .list::-webkit-scrollbar-thumb{
  border-radius: 12px;
  background: linear-gradient(180deg, var(--mv-elev-4), var(--mv-elev-4));
  border: 3px solid rgba(0,0,0,0.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 2px 10px rgba(0,0,0,0.35);}
.selectx .list:hover::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--mv-elev-4), var(--mv-elev-4));}
/* Firefox */
.selectx .list{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.70) rgba(255,255,255,0.16);}


/* ===== Custom glass dropdown pack ===== */
.selectx{ display: inline-block; min-width: 220px; position: relative;}
.selectx .sel-btn{
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 12px; border-radius: 12px; background: var(--mv-elev-3);
  border: 1px solid var(--mv-border);
  color: var(--text);}
.selectx .chev{ margin-left: 10px; opacity: 0.8;}
.selectx .list{
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 260px; overflow: auto; border-radius: 12px; padding: 6px;
  background: linear-gradient(180deg, rgba(20,22,30,0.78), rgba(20,22,30,0.62));
  border: 1px solid var(--mv-border);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);}
.selectx.drop-up .list{ top: auto; bottom: calc(100% + 6px); box-shadow: 0 -18px 40px rgba(0,0,0,0.45);}
.selectx .item{ padding: 10px 12px; color: var(--text); border-radius: 10px; margin: 2px 0; cursor: pointer;}
.selectx .item:hover, .selectx .item.active{ background: var(--mv-elev-4);}
/* Hide native select when skinned */
select.js-selectx{ position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important;}
/* Scrollbar styling inside dropdown */
.selectx .list::-webkit-scrollbar{ width: 12px;}
.selectx .list::-webkit-scrollbar-track{
  background: var(--mv-elev-3);
  border-radius: 12px; margin: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);}
.selectx .list::-webkit-scrollbar-thumb{
  border-radius: 12px;
  background: linear-gradient(180deg, var(--mv-elev-4), var(--mv-elev-4));
  border: 3px solid rgba(0,0,0,0.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 2px 10px rgba(0,0,0,0.35);}
.selectx .list{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.70) rgba(255,255,255,0.16);}
/* ===================================== */

/* === GLOBAL: zero margins & padding on page === */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;}
/* Keep layout boxes clean without affecting navbar styles */
main, .page, .content, .wrapper {
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;}


/* === Uniform left/right gutters + footer alignment === */
:root{ --gutter: clamp(12px, 2.2vw, 24px);}

/* keep page edges clean */
html, body { margin: 0; padding: 0; overflow-x: hidden;}

/* apply same padding left/right for main content sections */
main, main.container, .page, .content, .wrapper,
.section, .card-grid, .about-services,
#despre-noi, #servicii, .comments, .comments-section {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;}

/* carousel respects the same gutters on both sides */
.psyc-hero { padding-left: var(--gutter); padding-right: var(--gutter);}
.psyc-wrap  { overflow: hidden;}
.psyc-track { padding-left: 0; padding-right: 0; margin: 0 auto; overflow: hidden;}

/* footer aligned with content */
footer, .site-footer, #footer {
  width: 100%;
  margin: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;}

/* optional: stabilize layout when vertical scrollbar appears */
html { scrollbar-gutter: stable;}


/* === Fix: carousel not cut & footer overlap === */
:root{
  --footer-h: 72px;           /* expected footer height */
  --section-gap: 28px;}

/* Carousel: allow vertical overflow for shadows, keep horizontal hidden */
.psyc-track{
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-bottom: 20px !important;   /* space for shadows / CTA */
;}

/* Extra spacing below carousel so următoarea secțiune nu pare lipită */
.psyc-hero{ margin-bottom: var(--section-gap) !important;}

/* Ensure sections after carousel have some bottom space too */
.section, .card-grid, .about-services, #despre-noi, #servicii, .comments, .comments-section{
  margin-bottom: var(--section-gap);}

/* Footer should not overlap content */
footer, .site-footer, #footer{
  position: static !important;     /* if era fixed, devenim static */
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  z-index: 1;}

/* If some pages keep a fixed footer elsewhere, add body bottom padding as safety */
body.has-fixed-footer{ padding-bottom: var(--footer-h);}
/* Layout pe două coloane în cardul din dreapta */
.right-wrap{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;}

/* panoul cu CV rămâne vizibil când derulezi */
.cv-panel{
  position: sticky;
  top: 90px;
  align-self: start;}

/* poliş pentru CV */
.cv-panel .cv-section h3{ margin: 6px 0;}
.cv-panel .cv-item{ border-radius: 12px;}

/* pe ecrane înguste, totul pe o singură coloană */
@media (max-width: 1100px){
  .right-wrap{ grid-template-columns: 1fr;}
  .cv-panel{ position: static;}
}
/* Bio cu scroll in-panel */
#profile { display: flex; flex-direction: column;}

#profile h3 { margin: 12px 0 8px;}

#profile .scroll-box{
  max-height: 360px;      /* înălțime vizibilă pe desktop */
  overflow-y: auto;       /* scroll doar pe bio */
  padding: 12px;
  border-radius: 14px;
  background: var(--mv-elev-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);}

/* margini mai mici când fereastra e mică */
@media (max-width: 1024px){
  #profile .scroll-box{ max-height: 300px;}
}
@media (max-width: 640px){
  #profile .scroll-box{ max-height: 220px;}
}

/* scrollbar fin pentru bio, aliniat cu tema */
#profile .scroll-box::-webkit-scrollbar{ width: 10px;}
#profile .scroll-box::-webkit-scrollbar-track{
  background: var(--mv-elev-2);
  border-radius: 10px;}
#profile .scroll-box::-webkit-scrollbar-thumb{
  background: var(--mv-elev-4);
  border-radius: 10px;}
#profile .scroll-box{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent;}
/* === Thumbs listă psihologi: zoom în interiorul pătratului === */
.psych-card{ position: relative;}

.psych-card .avatar{
  width: 52px; height: 52px; border-radius: 12px;
  background-size: cover;          /* umple pătratul */
  background-position: center;     /* centrează */
  background-repeat: no-repeat;
  transition: background-size 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease;
  /* păstrează dimensiunea fixă, nu mai mărim elementul */
  /* scoatem orice transform din versiunea anterioară */
;}

.psych-card:hover .avatar{
  background-size: 125%;           /* zoom doar în imagine, nu în container */
  box-shadow: 0 8px 22px rgba(0,0,0,0.35) inset;
  outline: 2px solid rgba(139,211,255,0.45);
  outline-offset: 0;}

/* === Header profil: aspect 16:9, zoom fin pe hover, cover + centrare === */
.avatar.big{
  width: 100%;
  aspect-ratio: 16/9;               /* păstrează raportul, se ajustează automat */
  height: auto;                     /* renunță la înălțime fixă */
  background-size: cover;           /* umple corect */
  background-position: center;      /* centru imagine */
  background-repeat: no-repeat;
  border-radius: 16px;
  overflow: hidden;
  transition: background-size 0.25s ease, box-shadow 0.2s ease;}
.avatar.big:hover{
  background-size: 110%;            /* “autosize” la hover */
  box-shadow: 0 14px 36px rgba(0,0,0,0.35);}

/* opțional: efect ușor de “glow” pe container când face zoom */
.psych-card:hover{
  border-color: rgba(139,211,255,0.6);}
.auth-modal{ position: fixed; inset: 0; display: none; z-index: 9999;}
.auth-modal.open{ display: block;}

.auth-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);}

.auth-box{
  position: relative;
  width: min(560px, calc(100vw - 24px));
  margin: 8vh auto 0 auto;
  padding: 22px;
  border-radius: 22px;}

.auth-x{
  position: absolute; top: 10px; right: 12px;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--mv-elev-2);
  color: var(--text);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;}

.auth-title{ margin: 0 0 14px 0; color: var(--accent); font-weight: 800;}

.auth-form{ display: flex; flex-direction: column; gap: 8px;}
.auth-label{ color: var(--text); font-weight: 600;}

.auth-row{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px;}

.auth-check{ display: flex; align-items: center; gap: 10px; color: var(--text);}
.auth-link{ color: var(--accent); text-decoration: underline;}

.auth-submit{ margin-top: 14px; width: 100%; justify-content: center;}

.auth-bottom{
  margin-top: 12px;
  display: flex; gap: 8px; justify-content: center;
  color: var(--text);}

.auth-error{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.10); color: var(--mv-text);}
/* =========================
   AUTH MODAL (login/register)
   ========================= */

#auth-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* se schimbă din JS */
;}

#auth-modal .modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);}

#auth-modal .modal-card{
  position: relative;
  width: min(560px, calc(100vw - 28px));
  margin: 18px auto;
  padding: 16px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-radius: 22px;
  border: 1px solid var(--mv-border);
  background: var(--mv-elev-2);}


/* header */
#auth-modal .auth-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;}

#auth-modal #auth-title{
  margin: 0;
  font-size: 34px;   /* titlu mai mare */
  font-weight: 900;}

/* buton X */
#auth-modal .auth-close{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mv-border);
  background: var(--mv-elev-2);
  color: var(--text);
  cursor: pointer;}

/* mesaje */
#auth-modal #auth-msg{
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--mv-border);
  background: var(--mv-elev-1);
  color: var(--text);}

/* form layout */
#auth-modal .auth-form{
  margin-top: 16px;}

#auth-modal .auth-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;}

#auth-modal .auth-grid .full{
  grid-column: 1 / -1;}

#auth-modal label{
  display: block;
  margin: 0 0 6px;
  color: var(--text);
  font-weight: 700;}

#auth-modal .input{
  width: 100%;}

/* buton mare */
#auth-modal .auth-submit{
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 800;}

/* linkuri: fără albastru */
#auth-modal a,
#auth-modal a:visited{
  color: var(--text);
  text-decoration: none;}

#auth-modal a:hover{
  opacity: 1;
  text-decoration: underline;}

#auth-modal .auth-foot{
  margin-top: 14px;
  text-align: center;
  color: var(--muted);}

#auth-modal .auth-foot a{
  font-weight: 800;}

/* responsive */
@media (max-width: 700px){
  #auth-modal .modal-card{
    width: calc(100vw - 24px);
    margin: 18px auto;
    padding: 18px;
    border-radius: 22px;}
 #auth-modal #auth-title{
  font-size: 28px;}

  #auth-modal .auth-grid{
    grid-template-columns: 1fr;}
}