/* ══════════════════════════════════════════════════











   EFFEFOTO — cssVideo.css  (light/white only theme)











   ══════════════════════════════════════════════════ */























:root {











  --bg:            #f5f2ec;











  --bg2:           #ede9e1;











  --bg3:           #e2ddd4;











  --gold:          #9a7040;











  --gold-light:    #b08040;











  --white:         #1a1a16;











  --gray:          #6a6a62;











  --gray2:         #9a9a90;











  --border:        rgba(154,112,64,0.22);











  --font-display:  'Cormorant Garamond', serif;











  --font-body:     'Montserrat', sans-serif;











  --shadow:        0 2px 16px rgba(0,0,0,0.10);











  --input-bg:      #ffffff;











  --card-bg:       #ffffff;











  --overlay-dark:  rgba(0,0,0,0.55);











}























*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }











html { scroll-behavior: smooth; }























body {











  background: var(--bg);











  color: var(--white);











  font-family: var(--font-body);











  font-weight: 300;











  overflow-x: hidden;











}























.container { max-width: 1400px; margin: 0 auto; padding: 0 2.5rem; }























/* ── NAV ── */











nav {











  position: fixed;











  top: 0; left: 0; right: 0;











  z-index: 100;











  display: flex;











  align-items: center;











  justify-content: space-between;











  padding: 1.5rem 3rem;











  background: rgba(255,255,255,0.97);











  border-bottom: 1px solid var(--border);











  backdrop-filter: blur(8px);











  transition: background 0.4s;











  box-shadow: var(--shadow);











}











nav.scrolled {











  background: rgba(255,255,255,0.99);











  box-shadow: 0 2px 20px rgba(0,0,0,0.08);











}























#prova { display: flex; align-items: center; }











.nav-links1 { display: flex; align-items: center; gap: 10px; list-style: none; padding: 0; margin: 0; }











#riga { display: flex; align-items: center; width: auto; }











#logo-img { width: 40px; height: auto; display: block; margin: 0; padding: 0; }























.nav-logo {











  font-family: var(--font-display);











  font-size: 1.6rem;











  font-weight: 300;











  letter-spacing: 0.12em;











  color: var(--gold);











  text-decoration: none;











  margin: 0; padding: 0; line-height: 1;











}











.nav-logo span { font-style: italic; }























.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }











.nav-links a {











  text-decoration: none;











  color: var(--white);











  font-size: 0.8rem;











  letter-spacing: 0.22em;











  text-transform: uppercase;











  font-weight: 500;











  opacity: 0.7;











  transition: opacity 0.3s, color 0.3s;











}











.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--gold); }























.nav-admin-btn {











  background: transparent;











  border: 1px solid var(--border);











  color: var(--gold);











  padding: 0.45rem 1.1rem;











  font-size: 0.65rem;











  letter-spacing: 0.2em;











  text-transform: uppercase;











  cursor: pointer;











  transition: all 0.3s;











  font-family: var(--font-body);











}











.nav-admin-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }























/* ── VIDEO HEADER ── */











#video-header {











  padding: 10rem 0 5rem;











  text-align: center;











  background: var(--bg);











  border-bottom: 1px solid var(--border);











}











.video-header-content { max-width: 700px; margin: 0 auto; }























.section-label {











  font-size: 0.65rem;











  letter-spacing: 0.35em;











  text-transform: uppercase;











  color: var(--gold);











  margin-bottom: 1rem;











}























.video-page-title {











  font-family: var(--font-display);











  font-size: clamp(2.8rem, 6vw, 5rem);











  font-weight: 300;











  line-height: 1.1;











  color: var(--white);











  margin-bottom: 1rem;











}











.video-page-title em { font-style: italic; color: var(--gold); }























.video-page-sub {











  font-size: 0.75rem;











  letter-spacing: 0.25em;











  text-transform: uppercase;











  color: var(--gray);











}























/* ── ADMIN PANEL ── */











#admin-panel {











  background: var(--bg2);











  border-bottom: 1px solid var(--border);











}











.admin-bar {











  max-width: 1400px;











  margin: 0 auto;











  padding: 0.9rem 2.5rem;











  display: flex;











  align-items: center;











  gap: 1rem;











}











.admin-label {











  font-size: 0.7rem;











  letter-spacing: 0.2em;











  text-transform: uppercase;











  color: var(--gray);











  flex: 1;











}











.admin-logout-btn {











  background: transparent;











  border: 1px solid var(--border);











  color: var(--gray);











  padding: 0.4rem 1rem;











  font-size: 0.62rem;











  letter-spacing: 0.18em;











  text-transform: uppercase;











  cursor: pointer;











  font-family: var(--font-body);











  transition: all 0.3s;











}











.admin-logout-btn:hover { border-color: #e05555; color: #e05555; }























/* ── ADMIN BAR ACTIONS ── */











.admin-bar-actions {











  display: flex;











  align-items: center;











  gap: 0.7rem;











  flex-wrap: wrap;











}











.btn-admin-secondary {











  background: transparent;











  border: 1px solid var(--border);











  color: var(--gray);











  padding: 0.85rem 1.5rem;











  font-family: var(--font-body);











  font-size: 0.65rem;











  letter-spacing: 0.2em;











  text-transform: uppercase;











  cursor: pointer;











  transition: all 0.3s;











}











.btn-admin-secondary:hover { border-color: var(--gold); color: var(--gold); }























/* ── MODAL VARIANTS ── */











.modal-box-sm { max-width: 480px; }











.cat-list-label {











  font-size: 0.65rem;











  letter-spacing: 0.18em;











  text-transform: uppercase;











  color: var(--gray2);











  margin-bottom: 0.6rem;











  padding-bottom: 0.4rem;











  border-bottom: 1px solid var(--border);











}























/* ── CATEGORY MANAGER LIST ── */











.cat-manager-list {











  display: flex;











  flex-direction: column;











  gap: 0.5rem;











  max-height: 300px;











  overflow-y: auto;











  margin-bottom: 0.5rem;











}











.cat-manager-row {











  display: flex;











  align-items: center;











  gap: 0.8rem;











  padding: 0.7rem 0.9rem;











  background: var(--bg);











  border: 1px solid var(--border);











  border-radius: 2px;











}











.cat-manager-name {











  flex: 1;











  font-size: 0.8rem;











  font-weight: 500;











  color: var(--white);











}











.cat-manager-count {











  font-size: 0.65rem;











  color: var(--gray2);











  letter-spacing: 0.08em;











  min-width: 50px;











  text-align: right;











}











.cat-manager-btns { display: flex; gap: 0.4rem; }











.cat-btn-rename {











  background: transparent;











  border: 1px solid var(--border);











  color: var(--gray);











  padding: 0.35rem 0.8rem;











  font-size: 0.6rem;











  letter-spacing: 0.15em;











  text-transform: uppercase;











  cursor: pointer;











  font-family: var(--font-body);











  transition: all 0.3s;











}











.cat-btn-rename:hover { border-color: var(--gold); color: var(--gold); }











.cat-btn-delete {











  background: transparent;











  border: 1px solid rgba(200,50,50,0.3);











  color: #c83232;











  padding: 0.35rem 0.8rem;











  font-size: 0.6rem;











  letter-spacing: 0.15em;











  text-transform: uppercase;











  cursor: pointer;











  font-family: var(--font-body);











  transition: all 0.3s;











}











.cat-btn-delete:hover { background: #c83232; color: #fff; border-color: #c83232; }











.cat-empty-msg {











  font-size: 0.75rem;











  color: var(--gray2);











  text-align: center;











  padding: 1.5rem 0;











  font-style: italic;











}























/* ── CATEGORY FILTER ── */











#video-filter-section {











  padding: 2rem 0;











  background: var(--bg);











  border-bottom: 1px solid var(--border);











  position: sticky;











  top: 72px;











  z-index: 50;











  backdrop-filter: blur(8px);











}











.cat-filter {











  display: flex;











  gap: 0.5rem;











  flex-wrap: wrap;











  align-items: center;











}











.cat-btn {











  background: transparent;











  border: 1px solid var(--border);











  color: var(--gray);











  padding: 0.4rem 1.2rem;











  font-size: 0.62rem;











  letter-spacing: 0.2em;











  text-transform: uppercase;











  cursor: pointer;











  font-family: var(--font-body);











  transition: all 0.25s;











  border-radius: 0;











}











.cat-btn:hover { color: var(--gold); border-color: var(--gold); }











.cat-btn.active { background: var(--gold); color: #fff; border-color: var(--gold); }























/* ── VIDEO GRID ── */











#video-gallery { padding: 4rem 0 6rem; }























.video-grid {











  display: grid;











  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));











  gap: 2rem;











}























@media(max-width: 768px) {











  .video-grid { grid-template-columns: 1fr; gap: 1.5rem; }











}























/* ── VIDEO CARD ── */











.video-card {











  background: var(--card-bg);











  border: 1px solid var(--border);











  overflow: hidden;











  cursor: pointer;











  transition: transform 0.3s, box-shadow 0.3s;











  position: relative;











  box-shadow: var(--shadow);











}











.video-card:hover {











  transform: translateY(-4px);











  box-shadow: 0 12px 40px rgba(0,0,0,0.12);











}























.video-thumb {











  position: relative;











  aspect-ratio: 16/9;











  overflow: hidden;











  background: var(--bg3);











}











.video-thumb img,











.video-thumb .thumb-gradient {











  position: absolute;











  inset: 0;











  width: 100%;











  height: 100%;











  object-fit: cover;











}











.thumb-gradient {











  background: linear-gradient(135deg, #2a1a08, #4a2e0d, #6b4218);











  display: flex;











  align-items: center;











  justify-content: center;











}











.thumb-source-badge {











  position: absolute;











  top: 0.6rem;











  left: 0.6rem;











  background: rgba(154,112,64,0.9);











  color: #fff;











  font-size: 0.55rem;











  letter-spacing: 0.18em;











  text-transform: uppercase;











  padding: 0.25rem 0.6rem;











  font-family: var(--font-body);











}























/* Play button overlay */











.play-overlay {











  position: absolute;











  inset: 0;











  display: flex;











  align-items: center;











  justify-content: center;











  background: var(--overlay-dark);











  opacity: 0;











  transition: opacity 0.3s;











}











.video-card:hover .play-overlay { opacity: 1; }























.play-btn {











  width: 60px;











  height: 60px;











  border-radius: 50%;











  border: 2px solid rgba(255,255,255,0.9);











  display: flex;











  align-items: center;











  justify-content: center;











  background: rgba(154,112,64,0.8);











  transition: transform 0.2s, background 0.2s;











}











.play-btn svg { width: 22px; height: 22px; fill: #fff; margin-left: 4px; }











.video-card:hover .play-btn { transform: scale(1.08); background: var(--gold); }























/* Admin card overlay */











.admin-card-overlay {











  position: absolute;











  top: 0.6rem;











  right: 0.6rem;











  display: flex;











  gap: 0.4rem;











  opacity: 0;











  transition: opacity 0.2s;











  z-index: 10;











}











.video-card:hover .admin-card-overlay { opacity: 1; }











.card-edit-btn, .card-del-btn {











  border: none;











  padding: 0.3rem 0.6rem;











  font-size: 0.6rem;











  letter-spacing: 0.1em;











  text-transform: uppercase;











  cursor: pointer;











  font-family: var(--font-body);











  transition: all 0.2s;











}











.card-edit-btn { background: rgba(154,112,64,0.9); color: #fff; }











.card-del-btn { background: rgba(200,50,50,0.9); color: #fff; }











.card-edit-btn:hover { background: var(--gold); }











.card-del-btn:hover { background: #c83232; }























/* Card info */











.video-card-info {











  padding: 1.2rem 1.4rem 1.4rem;











}











.video-cat-label {











  font-size: 0.58rem;











  letter-spacing: 0.25em;











  text-transform: uppercase;











  color: var(--gold);











  margin-bottom: 0.4rem;











}











.video-card-title {











  font-family: var(--font-display);











  font-size: 1.2rem;











  font-weight: 400;











  color: var(--white);











  margin-bottom: 0.4rem;











  line-height: 1.3;











}











.video-card-desc {











  font-size: 0.75rem;











  color: var(--gray);











  line-height: 1.6;











  display: -webkit-box;











  -webkit-line-clamp: 2;











  -webkit-box-orient: vertical;











  overflow: hidden;











}











.video-card-meta {











  margin-top: 0.8rem;











  font-size: 0.6rem;











  letter-spacing: 0.12em;











  color: var(--gray2);











  text-transform: uppercase;











}























/* Loading & empty */











.video-loading {











  grid-column: 1/-1;











  display: flex;











  flex-direction: column;











  align-items: center;











  justify-content: center;











  padding: 5rem 0;











  gap: 1.5rem;











  color: var(--gray);











}











.loading-spinner {











  width: 40px;











  height: 40px;











  border: 2px solid var(--border);











  border-top-color: var(--gold);











  border-radius: 50%;











  animation: spin 0.9s linear infinite;











}











@keyframes spin { to { transform: rotate(360deg); } }























.video-empty {











  text-align: center;











  padding: 5rem 0;











  color: var(--gray);











}











.video-empty p { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; }











.video-empty span { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray2); }























/* ── LIGHTBOX ── */











.lightbox {











  display: none;











  position: fixed;











  inset: 0;











  z-index: 2000;











  background: rgba(245,242,236,0.97);











  backdrop-filter: blur(12px);











  align-items: center;











  justify-content: center;











}











.lightbox.open { display: flex; }























.lightbox-close {











  position: absolute;











  top: 1.5rem; right: 2rem;











  background: transparent;











  border: 1px solid var(--border);











  color: var(--white);











  width: 44px; height: 44px;











  font-size: 1.1rem;











  cursor: pointer;











  transition: all 0.2s;











  display: flex; align-items: center; justify-content: center;











}











.lightbox-close:hover { background: var(--gold); border-color: var(--gold); color: #fff; }























.lightbox-prev, .lightbox-next {











  position: absolute;











  top: 50%;











  transform: translateY(-50%);











  background: rgba(255,255,255,0.8);











  border: 1px solid var(--border);











  color: var(--white);











  width: 44px; height: 80px;











  font-size: 1.8rem;











  cursor: pointer;











  transition: all 0.2s;











  display: flex; align-items: center; justify-content: center;











}











.lightbox-prev { left: 1rem; }











.lightbox-next { right: 1rem; }











.lightbox-prev:hover, .lightbox-next:hover { background: var(--gold); color: #fff; border-color: var(--gold); }























.lightbox-inner {











  display: grid;











  grid-template-columns: 1fr 320px;











  gap: 0;











  width: 92vw;











  max-width: 1200px;











  max-height: 88vh;











  background: #fff;











  border: 1px solid var(--border);











  box-shadow: 0 20px 80px rgba(0,0,0,0.15);











  overflow: hidden;











}











@media(max-width:900px) {











  .lightbox-inner { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; }











}























.lightbox-media {











  background: #111;











  display: flex;











  align-items: center;











  justify-content: center;











  min-height: 300px;











  max-height: 88vh;











}











.lightbox-media video {











  width: 100%;











  height: 100%;











  max-height: 88vh;











  object-fit: contain;











}











.lightbox-media iframe {











  width: 100%;











  height: 100%;











  min-height: 400px;











  border: none;











}























.lightbox-info {











  padding: 2.5rem;











  background: #fff;











  display: flex;











  flex-direction: column;











  justify-content: center;











  border-left: 1px solid var(--border);











  overflow-y: auto;











}











.lightbox-info h2 {











  font-family: var(--font-display);











  font-size: 1.8rem;











  font-weight: 300;











  color: var(--white);











  margin-bottom: 1rem;











}











.lightbox-info p {











  font-size: 0.82rem;











  color: var(--gray);











  line-height: 1.7;











  margin-bottom: 1.5rem;











}











.lb-meta { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; }











.lb-cat-badge {











  display: inline-block;











  border: 1px solid var(--gold);











  color: var(--gold);











  font-size: 0.58rem;











  letter-spacing: 0.2em;











  text-transform: uppercase;











  padding: 0.25rem 0.7rem;











  width: fit-content;











}











#lb-date { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--gray2); text-transform: uppercase; }























.lb-admin-row {











  display: flex;











  gap: 0.8rem;











  margin-top: 1.5rem;











}























/* ── ADD/EDIT MODAL ── */











.modal {











  display: none;











  position: fixed;











  inset: 0;











  z-index: 3000;











  background: rgba(245,242,236,0.97);











  backdrop-filter: blur(12px);











  align-items: center;











  justify-content: center;











  overflow-y: auto;











  padding: 2rem;











}











.modal.open { display: flex; }























.modal-box {











  background: #fff;











  border: 1px solid var(--border);











  padding: 3rem;











  width: 100%;











  max-width: 560px;











  box-shadow: 0 20px 80px rgba(0,0,0,0.12);











  max-height: 90vh;











  overflow-y: auto;











}











.modal-box h2 {











  font-family: var(--font-display);











  font-size: 1.8rem;











  font-weight: 300;











  margin-bottom: 2rem;











  color: var(--white);











}











.modal-box h2 em { font-style: italic; color: var(--gold); }























.modal-form { display: flex; flex-direction: column; gap: 1.2rem; }























.form-group { display: flex; flex-direction: column; gap: 0.4rem; }











.form-group label {











  font-size: 0.6rem;











  letter-spacing: 0.22em;











  text-transform: uppercase;











  color: var(--gold);











}











.form-group input, .form-group textarea, .form-group select {











  background: var(--input-bg);











  border: 1px solid var(--border);











  color: var(--white);











  padding: 0.8rem 1rem;











  font-family: var(--font-body);











  font-size: 0.82rem;











  outline: none;











  transition: border-color 0.3s;











}











.form-group textarea { min-height: 90px; resize: vertical; }











.form-group input:focus, .form-group textarea:focus, .form-group select:focus {











  border-color: var(--gold);











}











.form-group select { cursor: pointer; appearance: none; }























/* Radio group */











.radio-group { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.3rem; }











.radio-label {











  display: flex;











  align-items: center;











  gap: 0.4rem;











  font-size: 0.75rem;











  cursor: pointer;











  color: var(--white);











}











.radio-label input[type="radio"] { accent-color: var(--gold); }























/* File drop zone */











.file-drop {











  border: 1.5px dashed var(--border);











  padding: 2rem 1.5rem;











  display: flex;











  flex-direction: column;











  align-items: center;











  justify-content: center;











  gap: 0.6rem;











  cursor: pointer;











  transition: border-color 0.25s, background 0.25s;











  text-align: center;











  background: var(--bg);











}











.file-drop:hover, .file-drop.drag-over { border-color: var(--gold); background: rgba(154,112,64,0.04); }











.file-drop-icon { font-size: 1.8rem; color: var(--gold); }











.file-drop p { font-size: 0.72rem; color: var(--gray); letter-spacing: 0.05em; }











.file-drop.file-drop-sm { padding: 1rem; }











.file-drop.has-file { border-color: var(--gold); background: rgba(154,112,64,0.06); }











.file-drop.has-file p { color: var(--gold); font-weight: 500; }























/* Progress */











.upload-progress { display: flex; flex-direction: column; gap: 0.5rem; }











.progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }











.progress-fill { height: 100%; background: var(--gold); width: 0%; transition: width 0.3s; }











.upload-progress p { font-size: 0.7rem; color: var(--gray); letter-spacing: 0.1em; }























.modal-actions { display: flex; gap: 1rem; margin-top: 0.5rem; }























/* Shared buttons */











.btn-gold {











  background: transparent;











  border: 1px solid var(--gold);











  color: var(--gold);











  padding: 0.85rem 2rem;











  font-family: var(--font-body);











  font-size: 0.65rem;











  letter-spacing: 0.25em;











  text-transform: uppercase;











  cursor: pointer;











  transition: all 0.3s;











}











.btn-gold:hover { background: var(--gold); color: #fff; }























.btn-cancel {











  background: transparent;











  border: 1px solid var(--border);











  color: var(--gray);











  padding: 0.85rem 1.5rem;











  font-size: 0.65rem;











  letter-spacing: 0.2em;











  text-transform: uppercase;











  cursor: pointer;











  font-family: var(--font-body);











  transition: all 0.3s;











}











.btn-cancel:hover { border-color: var(--gray); color: var(--white); }























.btn-delete {











  background: transparent;











  border: 1px solid rgba(200,50,50,0.4);











  color: #c83232;











  padding: 0.85rem 1.5rem;











  font-size: 0.65rem;











  letter-spacing: 0.2em;











  text-transform: uppercase;











  cursor: pointer;











  font-family: var(--font-body);











  transition: all 0.3s;











}











.btn-delete:hover { background: #c83232; color: #fff; border-color: #c83232; }























/* ── ADMIN LOGIN ── */











#admin-login {











  display: none;











  position: fixed;











  inset: 0;











  z-index: 2000;











  background: rgba(245,242,236,0.97);











  backdrop-filter: blur(12px);











  align-items: center;











  justify-content: center;











}











#admin-login.open { display: flex; }























.login-box {











  background: #fff;











  border: 1px solid var(--border);











  padding: 3rem;











  width: 100%;











  max-width: 400px;











  box-shadow: var(--shadow);











}











.login-box h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 300; margin-bottom: 0.4rem; }











.login-box p {











  font-size: 0.72rem;











  letter-spacing: 0.12em;











  color: var(--gray);











  margin-bottom: 2rem;











  text-transform: uppercase;











}











.login-error { font-size: 0.72rem; color: #e05555; margin-bottom: 1rem; display: none; }











.contact-form { display: flex; flex-direction: column; gap: 1rem; }























/* ── TOAST ── */











.toast {











  position: fixed;











  bottom: 2rem; right: 2rem;











  background: #fff;











  border: 1px solid var(--gold);











  color: var(--gold);











  padding: 0.8rem 1.5rem;











  font-size: 0.72rem;











  letter-spacing: 0.15em;











  z-index: 9999;











  opacity: 0;











  transition: opacity 0.4s;











  pointer-events: none;











  box-shadow: var(--shadow);











}











.toast.show { opacity: 1; }























/* ── FOOTER ── */











footer {











  padding: 3rem;











  border-top: 1px solid var(--border);











  display: flex;











  align-items: center;











  justify-content: center;











  background: var(--bg2);











}











.footer-copy {











  text-align: center;











  font-size: 0.7rem;











  letter-spacing: 0.12em;











  color: var(--gray2);











  line-height: 1.8;











}























/* ── RESPONSIVE ── */











@media(max-width: 768px) {











  nav { padding: 1rem 1.5rem; }











  .nav-links { gap: 1.2rem; }











  .nav-links a { font-size: 0.7rem; }











  .container { padding: 0 1.5rem; }











  .lightbox-inner { grid-template-columns: 1fr; }











  .lightbox-info { border-left: none; border-top: 1px solid var(--border); }











  .modal-box { padding: 2rem 1.5rem; }











  .admin-bar { flex-wrap: wrap; }











}