/* Black Friday ad specific styles */
.blackfriday-ad {
  margin: 20px 0 32px 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg,#0b0b0b 0%, #0f1113 60%);
  color: #fff;
  box-shadow: 0 30px 80px rgba(2,2,2,0.7), 0 8px 30px rgba(79,70,229,0.06) inset;
  border: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
.blackfriday-ad::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 75%, transparent 75%, transparent);
  background-size: 28px 28px;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.blackfriday-ad::after {
  content: "";
  position: absolute;
  right: -40%;
  top: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at center, rgba(255,99,71,0.12), transparent 40%);
  filter: blur(28px);
  pointer-events: none;
}
.blackfriday-ad .bf-inner {
  display: flex;
  gap: 24px;
  padding: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.blackfriday-ad .bf-left {
  min-width: 220px;
  flex: 0 0 320px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.bf-badge {
  display: inline-block;
  background: linear-gradient(90deg,#ff3b30,#ff8a00);
  color: white;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 13px;
  margin-bottom: 6px;
  box-shadow: 0 8px 30px rgba(255,90,60,0.18);
}
.bf-title { 
  margin: 0 0 6px 0; 
  font-size: 24px; 
  line-height: 1.02; 
  color: #fff; 
  font-weight: 900; 
  letter-spacing: -0.6px; 
}
.bf-sub { 
  margin: 0 0 6px 0; 
  color: rgba(255,255,255,0.85); 
  font-size: 15px; 
}

.bf-hero { 
  display:flex; 
  align-items:center; 
  gap:12px; 
  margin-top:6px; 
}
.bf-percent { 
  background: linear-gradient(90deg,#ffb347,#ff3b30); 
  color:#0b0711; 
  font-weight:900; 
  padding:14px 18px; 
  border-radius:12px; 
  font-size:20px; 
  box-shadow: 0 12px 40px rgba(255,90,60,0.18); 
}
.bf-gift { 
  width:64px; 
  height:64px; 
  border-radius:12px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); 
  border: 1px solid rgba(255,255,255,0.04); 
  font-size:30px; 
}
.bf-cta { 
  margin-top: 12px; 
  padding: 12px 18px; 
  background: linear-gradient(90deg,#ffd166,#ff8a00); 
  color:#100b06; 
  font-weight:800; 
  border-radius: 10px; 
  border: none; 
  cursor:pointer; 
  box-shadow: 0 12px 40px rgba(255,140,60,0.18); 
  transition: transform .18s ease, box-shadow .18s ease; 
}
.bf-cta:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 18px 50px rgba(255,140,60,0.26); 
}

.blackfriday-ad .bf-questions {
  flex: 1 1 560px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}
.blackfriday-ad .bf-q {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 16px;
  color: rgba(255,255,255,0.98);
  line-height: 1.32;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 26px rgba(2,6,23,0.36);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

/* small answer text under each question */
.blackfriday-ad .bf-answer {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  line-height: 1.4;
  opacity: 0.95;
}

/* color variations for tiles */
.blackfriday-ad .bf-q:nth-child(1) { 
  background: linear-gradient(180deg, rgba(255,59,48,0.12), rgba(255,59,48,0.06)); 
  border-color: rgba(255,59,48,0.18); 
}
.blackfriday-ad .bf-q:nth-child(2) { 
  background: linear-gradient(180deg, rgba(255,165,0,0.10), rgba(255,165,0,0.05)); 
  border-color: rgba(255,165,0,0.16); 
}
.blackfriday-ad .bf-q:nth-child(3) { 
  background: linear-gradient(180deg, rgba(255,195,0,0.10), rgba(255,195,0,0.04)); 
  border-color: rgba(255,195,0,0.14); 
}
.blackfriday-ad .bf-q:nth-child(4) { 
  background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(79,70,229,0.04)); 
  border-color: rgba(79,70,229,0.16); 
}
.blackfriday-ad .bf-q:nth-child(5) { 
  background: linear-gradient(180deg, rgba(34,197,94,0.10), rgba(34,197,94,0.04)); 
  border-color: rgba(34,197,94,0.14); 
}
.blackfriday-ad .bf-q:nth-child(6) { 
  background: linear-gradient(180deg, rgba(14,165,233,0.10), rgba(14,165,233,0.04)); 
  border-color: rgba(14,165,233,0.14); 
}
.blackfriday-ad .bf-q:nth-child(7) { 
  background: linear-gradient(180deg, rgba(236,72,153,0.10), rgba(236,72,153,0.04)); 
  border-color: rgba(236,72,153,0.14); 
}
.blackfriday-ad .bf-q:nth-child(8) { 
  background: linear-gradient(180deg, rgba(249,115,22,0.10), rgba(249,115,22,0.04)); 
  border-color: rgba(249,115,22,0.14); 
}
.blackfriday-ad .bf-q:nth-child(9) { 
  background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(99,102,241,0.03)); 
  border-color: rgba(99,102,241,0.12); 
}
.blackfriday-ad .bf-q:nth-child(10) { 
  background: linear-gradient(180deg, rgba(16,185,129,0.08), rgba(16,185,129,0.03)); 
  border-color: rgba(16,185,129,0.12); 
}
.blackfriday-ad .bf-q:nth-child(11) { 
  background: linear-gradient(180deg, rgba(249,115,22,0.08), rgba(249,115,22,0.03)); 
  border-color: rgba(249,115,22,0.12); 
}
.blackfriday-ad .bf-q:nth-child(12) { 
  background: linear-gradient(180deg, rgba(14,165,233,0.08), rgba(14,165,233,0.03)); 
  border-color: rgba(14,165,233,0.12); 
}
.blackfriday-ad .bf-q:nth-child(13) { 
  background: linear-gradient(180deg, rgba(236,72,153,0.08), rgba(236,72,153,0.03)); 
  border-color: rgba(236,72,153,0.12); 
}
.blackfriday-ad .bf-q:nth-child(14) { 
  background: linear-gradient(180deg, rgba(79,70,229,0.08), rgba(79,70,229,0.03)); 
  border-color: rgba(79,70,229,0.12); 
}

.blackfriday-ad .bf-q:hover { 
  transform: translateY(-6px); 
  box-shadow: 0 20px 50px rgba(2,6,23,0.5); 
}

@media (max-width: 720px) {
  .blackfriday-ad .bf-inner { 
    padding: 14px; 
    gap:12px; 
  }
  .bf-title { 
    font-size: 20px; 
  }
  .blackfriday-ad .bf-questions { 
    grid-template-columns: 1fr; 
    gap: 8px; 
  }
  .bf-badge { 
    font-size: 12px; 
    padding: 6px 10px; 
  }
  .bf-hero { 
    gap:10px; 
  }
  .bf-percent { 
    padding:10px 12px; 
    font-size:16px; 
  }
  .bf-gift { 
    width:52px; 
    height:52px; 
    font-size:24px; 
  }
  .bf-cta { 
    width:100%; 
    text-align:center; 
  }
  .blackfriday-ad .bf-q { 
    font-size: 17px; 
    padding: 12px 14px; 
    border-radius: 10px; 
  }
}