/* ==========================================================
   Anivia Videos — styles.css
   Modern Overlay Card Layout (scoped) + Watch fix
   ========================================================== */

:root {
  --anivia-blue: #69A9FF;
  --anivia-mint: #8EE3C0;
  --anivia-lavender: #C6B7FF;
  --anivia-bg: #EAF4FF;
  --anivia-text: #1F2937;
  --anivia-muted: #6B7280;
  --anivia-border: #D1D5DB;
  --anivia-danger: #DC2626;
  --anivia-success: #16A34A;
}

/* ---------- Base ---------- */
html, body {
  margin: 0;
  padding: 0;
  font-family: "Inter","Segoe UI",Roboto,sans-serif;
  background: var(--anivia-bg);
  color: var(--anivia-text);
  min-height: 100vh;
}
a { color: var(--anivia-blue); text-decoration: none; transition: .2s; }
a:hover { color: var(--anivia-mint); }

/* ---------- Header ---------- */
.header {
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-bottom:3px solid var(--anivia-mint);
  padding:10px 20px;box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.header .logo{display:flex;align-items:center;gap:10px;}
.header .logo img{height:42px;}
.header .logo span{font-weight:600;font-size:1.2em;}
.header nav a{margin-left:10px;}

/* ---------- Buttons ---------- */
.btn{
  background:var(--anivia-blue);color:#fff;
  padding:8px 14px;border:none;border-radius:8px;
  cursor:pointer;font-size:14px;transition:background .2s;
}
.btn:hover{background:var(--anivia-mint);color:#000;}
.btn-del{background:var(--anivia-danger);}
.btn-del:hover{background:#b91c1c;}

/* ---------- Layout ---------- */
.container{max-width:1100px;margin:0 auto;padding:20px;}
h1{font-size:1.6em;margin-bottom:15px;text-align:center;}

/* ---------- Grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:28px;
  justify-items:center;
  margin-bottom: 12px;
}

/* ==========================================================
   Scoped Overlay Card (keine globalen Kollisionen)
   ========================================================== */
.grid .card.card-redesigned{
  width:100%;
  max-width:360px;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  transition:transform .3s, box-shadow .3s;
}
.grid .card.card-redesigned:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 22px rgba(0,0,0,0.1);
}

/* Link als Block  ganze Karte klickbar */
.grid .card.card-redesigned .card-link {
  display:block; color:inherit; text-decoration:none;
}

/* Thumbnail-Bereich */
.grid .card.card-redesigned .card-thumb{
  position:relative; width:100%; height:240px; overflow:hidden;
  border-bottom:1px solid var(--anivia-border);
}
.grid .card.card-redesigned .card-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s, filter .3s;
}
.grid .card.card-redesigned:hover .card-thumb img{
  transform:scale(1.04); filter:brightness(1.05);
}
.grid .card.card-redesigned .card-thumb-placeholder{
  background:var(--anivia-lavender);
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:500;
}

/* Overlay – Klicks gehen durch zum <a> */
.grid .card.card-redesigned .card-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  background:linear-gradient(transparent, rgba(0,0,0,0.7));
  color:#fff;
  pointer-events:none;
}
.grid .card.card-redesigned .card-overlay-text{
  display:flex; flex-direction:column;
}
.grid .card.card-redesigned .card-title{
  font-weight:600; font-size:1.1em;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.grid .card.card-redesigned .card-meta{
  font-size:0.9em; opacity:0.9;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}

/* ---------- Upload Card ---------- */
.upload-card{
  width:100%;max-width:640px;margin:40px auto;
  background:#fff;
  border:1px solid var(--anivia-border);
  border-top:4px solid var(--anivia-mint);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  padding:24px 28px;
}
.upload-form input[type="text"],
.upload-form input[type="file"]{
  width:100%;padding:10px 12px;
  border:1px solid var(--anivia-border);
  border-radius:8px;background:#fff;font-size:14px;
}
.upload-form .btn{width:100%;margin-top:14px;padding:10px 14px;font-weight:600;}

/* ---------- Alerts & Footer ---------- */
.alert{padding:10px;border-radius:6px;margin-bottom:10px;}
.alert.error{background:var(--anivia-danger);color:#fff;}
.alert.success{background:var(--anivia-success);color:#fff;}
footer{text-align:center;padding:25px;color:var(--anivia-muted);font-size:0.9em;}

/* ==========================================================
   Watch Page Fix (zentriert, card look)
   ========================================================== */
.watch-page .player{
  display:flex; flex-direction:column; align-items:center;
  max-width:1000px; margin:40px auto;
  background:#fff; padding:20px;
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
.watch-page .player video{
  width:100%; max-height:70vh; border-radius:10px; background:#000; margin-bottom:15px;
}
.watch-page .info, .watch-page .share{
  text-align:center; width:100%;
}
.watch-page .info h1{
  margin:10px 0 6px; font-size:1.4em; color:var(--anivia-text);
}
.watch-page .meta{ color:var(--anivia-muted); font-size:0.9em; }
.watch-page .share{
  display:flex; justify-content:center; gap:8px; margin-top:10px;
}
.watch-page .share input{
  flex:1; max-width:400px; padding:8px 10px;
  border:1px solid var(--anivia-border); border-radius:6px;
}
.watch-page .share button{
  background:var(--anivia-blue); color:#fff; border:none;
  padding:8px 12px; border-radius:6px; cursor:pointer; transition:.2s;
}
.watch-page .share button:hover{ background:var(--anivia-mint); color:#000; }
.card-admin {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.card-admin .btn-del {
  background: var(--anivia-danger);
  color: #fff;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background .2s;
}
.card-admin .btn-del:hover {
  background: #b91c1c;
}
/* ---------- Admin Delete Button (in Card integriert) ---------- */
.card-admin {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none; /* verhindert Konflikte */
}

.card-admin form,
.card-admin button {
  pointer-events: all;
}

.card-admin .btn-del {
  background: var(--anivia-danger);
  color: #fff;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background .2s, transform .15s;
}

.card-admin .btn-del:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}