:root{
  --bg:#fff6f0;
  --card:#fff;
  --muted:#6b6b6b;
  --accent:#ff6b6b;
  --accent-2:#ffda77;
  --accent-3:#6bdcff;
  --glass: rgba(0,0,0,0.04);
  --max-width:1100px;
  --radius:14px;
  font-family: 'Comfortaa', 'Arial', sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg,#fffaf8 0%, #fff6f0 100%);
  color:#1b2430;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-size:16px;
  padding-top:70px; /* Compensate for sticky header */
}

/* layout */
.container{ max-width:var(--max-width); margin:0 auto; padding:1rem; }
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,250,248,0.95); backdrop-filter:blur(8px); padding:.5rem 0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo-wrap{ display:flex; align-items:center; gap:.6rem; }
.logo{ font-weight:700; font-size:1.2rem; color:var(--accent); text-decoration:none; }
.logo-img{ width:44px; height:44px; }

.menu{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
.menu a{ color:var(--muted); text-decoration:none; padding:.4rem .6rem; border-radius:8px; }
.menu a:hover{ background:var(--glass); color:#000; }

.menu-btn{ display:none; background:none; border:none; font-size:1.3rem; }

.hero{ display:flex; gap:1rem; padding:1.2rem; border-radius:var(--radius); align-items:center; justify-content:space-between; }
.hero.card{ box-shadow: 0 8px 28px rgba(99,84,56,0.08); background: linear-gradient(180deg,#fff,#fff6f0); border: 1px solid rgba(0,0,0,0.04); padding:1.2rem; }
.hero-left{ max-width:56%; }
.hero h1{ margin:0 0 .5rem; color:#ff6b6b; font-size:2rem; letter-spacing:0.5px; }
.lead{ color:var(--muted); margin:0 0 1rem; }

.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:10px; border:none; cursor:pointer; font-weight:700; text-decoration:none; }
.btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#2b1212; box-shadow: 0 8px 18px rgba(255,107,107,0.18); }
.btn.ghost{ background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--muted); }

.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.2rem 0; }
.card{ background:var(--card); border-radius:12px; padding:1rem; border:1px solid rgba(0,0,0,0.03); box-shadow: 0 6px 18px rgba(33,33,33,0.04); }

.grid-cards .card{ text-align:center; padding:1.1rem; transition: transform .24s cubic-bezier(.2,.9,.3,1), box-shadow .24s; }
.grid-cards .card:hover{ transform: translateY(-8px); box-shadow: 0 18px 30px rgba(33,33,33,0.08); }

.controls{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.8rem; }
.controls label{ font-size:0.9rem; color:var(--muted); }
.controls input, .controls select{ padding:.55rem .6rem; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:transparent; }

.bingo-output{ margin-top:1rem; display:grid; gap:.7rem; }
.bingo-output .card{ padding:.8rem; }

.footer-inner{ display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 0; color:var(--muted); font-size:0.9rem; }

/* Google CMP Banner (GDPR/RGPD Compliant) */
.google-cmp-banner{ 
  position:fixed; 
  bottom:0; 
  left:0; 
  right:0; 
  background:#fff; 
  border-top: 3px solid var(--accent); 
  padding:1.5rem; 
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15); 
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.google-cmp-banner .cmp-content{ 
  max-width:1100px;
  margin:0 auto;
  width:100%;
}

.google-cmp-banner .cmp-title{ 
  font-size:1.2rem; 
  font-weight:700; 
  margin:0 0 0.5rem; 
  color:#1b2430;
}

.google-cmp-banner .cmp-text{ 
  font-size:0.95rem; 
  color:var(--muted); 
  line-height:1.6;
  margin:0 0 1rem;
}

.google-cmp-banner .cmp-actions{ 
  display:flex; 
  gap:0.75rem; 
  flex-wrap:wrap;
}

.google-cmp-banner .cmp-btn{
  padding:0.75rem 1.5rem;
  border-radius:8px;
  border:none;
  font-weight:600;
  cursor:pointer;
  font-size:0.95rem;
  transition:all 0.2s;
}

.google-cmp-banner .cmp-btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#2b1212;
  box-shadow: 0 4px 12px rgba(255,107,107,0.25);
}

.google-cmp-banner .cmp-btn-secondary{
  background:#fff;
  color:var(--muted);
  border:2px solid #ddd;
}

.google-cmp-banner .cmp-btn:hover{
  transform:translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Consent Modal */
.consent-modal{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.7);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.consent-modal-content{
  background:#fff;
  border-radius:16px;
  padding:2rem;
  max-width:600px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.consent-modal-close{
  position:absolute;
  top:1rem;
  right:1rem;
  background:none;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
  color:var(--muted);
  width:2rem;
  height:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.consent-modal-close:hover{
  background:var(--glass);
}

.consent-modal h2{
  margin:0 0 1rem;
  color:#1b2430;
  font-size:1.5rem;
}

.consent-modal p{
  color:var(--muted);
  line-height:1.6;
  margin:0 0 1.5rem;
}

.consent-option{
  background:var(--glass);
  border-radius:12px;
  padding:1rem;
  margin-bottom:1rem;
}

.consent-option h3{
  margin:0 0 0.5rem;
  font-size:1.1rem;
  color:#1b2430;
}

.consent-option p{
  margin:0;
  font-size:0.9rem;
  color:var(--muted);
}

.consent-modal-actions{
  display:flex;
  gap:0.75rem;
  margin-top:1.5rem;
  flex-wrap:wrap;
}

.consent-modal-actions .cmp-btn{
  flex:1;
  min-width:140px;
}

/* Legacy cookie consent (deprecated - keep for compatibility) */
.cookie-consent{ position:fixed; right:1rem; bottom:1rem; background:linear-gradient(180deg,#fff,#fff6f0); border-radius:12px; padding:.8rem; box-shadow: 0 10px 30px rgba(0,0,0,0.12); display:flex; gap:.6rem; align-items:center; max-width:420px; display:none; }
.cookie-consent .cookie-text{ font-size:0.9rem; color:var(--muted); }
.cookie-consent .cookie-actions{ display:flex; gap:.4rem; }

.offline-banner{ position:fixed; left:50%; transform:translateX(-50%); top:0; background:#ffda77; color:#2b1212; padding:.6rem 1rem; border-bottom-left-radius:8px; border-bottom-right-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }

/* How it works section */
.how-it-works{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:2rem; margin-top:1.5rem; }
.step{ text-align:center; }
.step-number{ display:inline-block; width:3rem; height:3rem; line-height:3rem; background:var(--accent); color:#fff; border-radius:50%; font-size:1.5rem; font-weight:700; margin-bottom:1rem; }
.step h3{ margin:.5rem 0; color:var(--accent-2); }
.step p{ color:var(--muted); font-size:0.95rem; line-height:1.6; }

/* Ad spaces */
.ad-space{ margin:1.5rem 0; }
.ad-placeholder{ min-height:1px; }

/* Top 9 Grid (3x3) */
.top-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; margin-top:1.5rem; }
@media (min-width: 900px){
  .top-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Categories Grid (landing page) */
.categories-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:1.5rem; margin-top:1.5rem; }
@media (min-width: 900px){
  .categories-grid{ grid-template-columns: repeat(3, 1fr); }
}

.category-card{ 
  --theme-color: var(--accent);
  display:block; 
  text-align:center; 
  padding:2rem 1.5rem; 
  background:var(--glass); 
  border-radius:16px; 
  border:2px solid transparent; 
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
}

.category-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--theme-color);
  transform:scaleX(0);
  transition:transform .3s;
}

.category-card:hover{
  transform:translateY(-6px);
  border-color:var(--theme-color);
  box-shadow: 0 16px 32px rgba(0,0,0,0.15);
}

.category-card:hover::before{
  transform:scaleX(1);
}

.category-icon{
  font-size:3rem;
  display:block;
  margin-bottom:1rem;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.category-card h3{
  margin:.5rem 0;
  color:var(--theme-color);
  font-size:1.3rem;
}

.category-card p{
  color:var(--muted);
  font-size:0.9rem;
  margin:.5rem 0 1rem;
}

.category-badge{
  display:inline-block;
  padding:.3rem .8rem;
  background:var(--theme-color);
  color:#fff;
  border-radius:20px;
  font-size:0.8rem;
  font-weight:600;
}

/* Downloadable cards section */
.downloadable-category{ margin-bottom:2rem; }
.category-header{ margin-bottom:1rem; }
.category-header h3{ margin:0 0 .3rem; color:var(--accent); font-size:1.4rem; }
.category-desc{ color:var(--muted); font-size:0.95rem; margin:.3rem 0; }
.subcategory-title{ margin:1.5rem 0 .5rem; color:var(--accent-2); font-size:1.1rem; }
.files-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-top:1rem; }
.download-card{ text-align:center; padding:1rem; transition: transform .2s, box-shadow .2s; }
.download-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 24px rgba(33,33,33,0.1); }
.download-card h4{ margin:0 0 .4rem; font-size:1rem; }
.card-info{ color:var(--muted); font-size:0.85rem; margin:.4rem 0 .8rem; }
.card-actions{ display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.card-actions .btn{ font-size:0.9rem; padding:.5rem .8rem; }
.spotify-btn{ background:#1DB954 !important; color:#fff !important; border:none !important; }
.spotify-btn:hover{ background:#1ed760 !important; }

/* Spotify Modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-overlay[hidden]{ display:none !important; }
.modal-content{ background:var(--card); border-radius:var(--radius); max-width:600px; width:90%; max-height:90vh; overflow-y:auto; padding:2rem; position:relative; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: modalSlideIn 0.3s ease-out; }
@keyframes modalSlideIn{ from{ opacity:0; transform:translateY(-30px); } to{ opacity:1; transform:translateY(0); } }
.modal-close{ position:absolute; top:1rem; right:1rem; background:transparent; border:none; font-size:2rem; line-height:1; cursor:pointer; color:var(--muted); padding:.25rem .5rem; border-radius:8px; z-index:10; transition: all 0.2s; }
.modal-close:hover{ background:var(--glass); color:#000; transform: scale(1.1); }
.modal-title{ margin:0 0 .5rem; color:var(--accent); font-size:1.5rem; }
.modal-desc{ color:var(--muted); margin:0 0 1.5rem; }
.modal-ad{ background:var(--glass); border-radius:8px; padding:1rem; margin-bottom:1.5rem; min-height:250px; display:flex; align-items:center; justify-content:center; border:2px dashed rgba(0,0,0,0.1); }
.ad-placeholder{ text-align:center; }
.modal-playlists{ display:flex; flex-direction:column; gap:.8rem; }
.playlist-item{ display:flex; align-items:center; gap:.8rem; padding:1rem; background:var(--glass); border-radius:10px; text-decoration:none; color:inherit; transition: transform .2s, box-shadow .2s; }
.playlist-item:hover{ transform:translateX(6px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); background:linear-gradient(90deg, rgba(29,185,84,0.1), transparent); }
.playlist-icon{ font-size:1.5rem; flex-shrink:0; }
.playlist-content{ display:flex; flex-direction:column; gap:.2rem; }
.playlist-content strong{ color:#000; }
.playlist-content small{ color:var(--muted); font-size:0.85rem; }

/* FAQ styles */
.faq-item{ margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid rgba(0,0,0,0.06); }
.faq-item:last-child{ border-bottom:none; }
.faq-item h2{ color:var(--accent); font-size:1.2rem; margin:0 0 .8rem; }
.faq-item p, .faq-item ol{ margin:.5rem 0; }
.faq-item ol{ padding-left:1.5rem; }
.faq-item ol li{ margin:.3rem 0; }

/* Legal pages */
.card h1{ color:var(--accent); margin-bottom:1.5rem; }
.card h2{ color:var(--accent-2); margin-top:2rem; margin-bottom:1rem; font-size:1.3rem; }
.card h3{ margin-top:1.5rem; margin-bottom:.8rem; }
.card ul{ padding-left:1.5rem; margin:1rem 0; }
.card ul li{ margin:.5rem 0; line-height:1.6; }
.card p{ margin:1rem 0; line-height:1.7; }
.card a{ color:var(--accent); text-decoration:underline; }
.card a:hover{ color:var(--accent-2); }
.card hr{ margin:2rem 0; border:none; border-top:1px solid rgba(0,0,0,0.1); }

/* Language selector */
.lang-selector-item{ display:flex; align-items:center; }
.lang-select{ 
  padding:0.4rem 0.6rem; 
  border:2px solid var(--glass); 
  border-radius:8px; 
  background:var(--bg); 
  color:var(--text); 
  font-family:inherit; 
  font-size:0.9rem; 
  cursor:pointer; 
  transition:all 0.2s ease;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.5rem center;
  background-size:12px;
  padding-right:2rem;
}
.lang-select:hover{ 
  border-color:var(--accent); 
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.lang-select:focus{ 
  outline:none; 
  border-color:var(--accent); 
  box-shadow:0 0 0 3px rgba(255,218,119,0.3);
}

/* small screens */
@media (max-width:900px){
  .hero-left{ max-width:100%; }
  .hero{ flex-direction:column; align-items:flex-start; }
  .menu-btn{ display:inline-flex; }
  .menu{ display:none; position:absolute; right:1rem; top:64px; flex-direction:column; background:#fff; padding:.5rem; border-radius:10px; border:1px solid rgba(0,0,0,0.06); }
  .menu.show{ display:flex; }
  .lang-selector-item{ width:100%; justify-content:stretch; }
  .lang-select{ width:100%; }
  
  /* CMP responsive */
  .google-cmp-banner{ padding:1rem; }
  .google-cmp-banner .cmp-title{ font-size:1.05rem; }
  .google-cmp-banner .cmp-text{ font-size:0.85rem; }
  .google-cmp-banner .cmp-actions{ flex-direction:column; }
  .google-cmp-banner .cmp-btn{ width:100%; text-align:center; }
  
  .consent-modal-content{ padding:1.5rem; }
  .consent-modal-actions{ flex-direction:column; }
  .consent-modal-actions .cmp-btn{ width:100%; }
}

/* Christmas Promotional Popup */
.christmas-popup-overlay{ 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,0.75); 
  z-index:10001; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  backdrop-filter:blur(6px);
  animation: fadeIn 0.3s ease-out;
}

.christmas-popup-overlay[hidden]{ 
  display:none !important; 
}

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.christmas-popup-content{ 
  background:linear-gradient(135deg, #fff 0%, #fff6f0 100%);
  border-radius:20px; 
  max-width:520px; 
  width:90%; 
  padding:2.5rem 2rem; 
  position:relative; 
  box-shadow:0 20px 60px rgba(196,30,58,0.3); 
  animation:popupSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align:center;
  border:3px solid #c41e3a;
  overflow:hidden;
}

@keyframes popupSlideIn{
  from{ 
    opacity:0; 
    transform:translateY(-40px) scale(0.9); 
  }
  to{ 
    opacity:1; 
    transform:translateY(0) scale(1); 
  }
}

.christmas-popup-close{ 
  position:absolute; 
  top:1rem; 
  right:1rem; 
  background:rgba(255,255,255,0.9); 
  border:2px solid #c41e3a; 
  font-size:1.8rem; 
  line-height:1; 
  cursor:pointer; 
  color:#c41e3a; 
  width:40px;
  height:40px;
  border-radius:50%; 
  z-index:10; 
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.christmas-popup-close:hover{ 
  background:#c41e3a; 
  color:#fff; 
  transform:rotate(90deg) scale(1.1);
}

.christmas-popup-icon{
  font-size:4.5rem;
  margin-bottom:1rem;
  animation:bounce 1s ease-in-out infinite;
}

@keyframes bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.christmas-popup-title{ 
  margin:0 0 1rem; 
  color:#c41e3a; 
  font-size:1.8rem; 
  font-weight:700;
  text-shadow:2px 2px 4px rgba(196,30,58,0.1);
}

.christmas-popup-text{ 
  color:#333; 
  font-size:1.05rem; 
  line-height:1.6;
  margin:0 0 1.5rem;
}

.christmas-popup-features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
  margin:1.5rem 0;
  padding:1.5rem;
  background:linear-gradient(135deg, rgba(196,30,58,0.08) 0%, rgba(196,30,58,0.03) 100%);
  border-radius:12px;
  border:2px dashed rgba(196,30,58,0.2);
}

.christmas-popup-features .feature{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  align-items:center;
}

.christmas-popup-features .feature-icon{
  font-size:2rem;
  display:block;
}

.christmas-popup-features .feature-text{
  font-size:0.85rem;
  color:#666;
  font-weight:600;
  text-align:center;
  line-height:1.3;
}

.christmas-popup-actions{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  margin-top:1.5rem;
}

.christmas-btn-primary{
  background:#c41e3a !important;
  color:#fff !important;
  padding:1rem 1.5rem !important;
  font-size:1.1rem !important;
  font-weight:700 !important;
  border-radius:12px !important;
  border:none !important;
  cursor:pointer;
  transition:all 0.3s;
  text-decoration:none;
  display:block;
  box-shadow:0 8px 20px rgba(196,30,58,0.3);
}

.christmas-btn-primary:hover{
  background:#8b1628 !important;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(196,30,58,0.4);
}

.christmas-btn-ghost{
  background:transparent !important;
  color:#666 !important;
  border:2px solid #ddd !important;
  padding:0.75rem 1.5rem !important;
  font-size:0.95rem !important;
  font-weight:600 !important;
  border-radius:10px !important;
  cursor:pointer;
  transition:all 0.2s;
}

.christmas-btn-ghost:hover{
  background:#f5f5f5 !important;
  border-color:#c41e3a !important;
  color:#c41e3a !important;
}

/* Snowflakes Animation */
.snowflakes{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:20px;
}

.snowflake{
  position:absolute;
  top:-10%;
  color:#c41e3a;
  font-size:1.5rem;
  opacity:0.6;
  animation:snowfall linear infinite;
}

.snowflake:nth-child(1){ left:10%; animation-duration:8s; animation-delay:0s; }
.snowflake:nth-child(2){ left:30%; animation-duration:10s; animation-delay:1s; font-size:1.2rem; }
.snowflake:nth-child(3){ left:50%; animation-duration:12s; animation-delay:2s; font-size:1.8rem; }
.snowflake:nth-child(4){ left:70%; animation-duration:9s; animation-delay:0.5s; font-size:1.3rem; }
.snowflake:nth-child(5){ left:85%; animation-duration:11s; animation-delay:1.5s; font-size:1.6rem; }
.snowflake:nth-child(6){ left:95%; animation-duration:13s; animation-delay:2.5s; }

@keyframes snowfall{
  0%{ 
    transform:translateY(0) rotate(0deg); 
    opacity:0.8;
  }
  50%{
    opacity:0.6;
  }
  100%{ 
    transform:translateY(110vh) rotate(360deg); 
    opacity:0;
  }
}

/* Responsive adjustments for Christmas popup */
@media (max-width:900px){
  .christmas-popup-content{
    padding:2rem 1.5rem;
    max-width:95%;
  }
  
  .christmas-popup-icon{
    font-size:3.5rem;
  }
  
  .christmas-popup-title{
    font-size:1.5rem;
  }
  
  .christmas-popup-text{
    font-size:0.95rem;
  }
  
  .christmas-popup-features{
    grid-template-columns:1fr;
    gap:0.75rem;
    padding:1rem;
  }
  
  .christmas-popup-features .feature{
    flex-direction:row;
    gap:0.75rem;
    justify-content:center;
  }
  
  .christmas-popup-features .feature-icon{
    font-size:1.5rem;
  }
  
  .christmas-btn-primary{
    font-size:1rem !important;
    padding:0.9rem 1.2rem !important;
  }
}