/* templates/styles.css
   Attractive 3D / glass style for Satta Guessing app.
   Fixed: pseudo-elements won't block clicks and content/buttons are above layers.
*/

:root{
  --bg-1: #0f172a;
  --bg-2: #071128;
  --accent: #ff6b6b;
  --accent-2: #ffd166;
  --card-bg: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.03);
  --text: #e6eef8;
  --muted: rgba(230,238,248,0.6);
  --glass-border: rgba(255,255,255,0.06);
  --shadow: 0 10px 30px rgba(2,6,23,0.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body.app-bg{
  background: radial-gradient(1200px 400px at 10% 10%, rgba(255,107,107,0.08), transparent 10%),
              radial-gradient(800px 300px at 90% 90%, rgba(255,209,102,0.06), transparent 10%),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color:var(--text);
  font-family: 'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom: 60px;
}

/* Header */
.site-header { backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-bottom: 1px solid rgba(255,255,255,0.03); }
.brand { display:flex; align-items:center; gap:14px; }
.logo-3d {
  width:56px; height:56px; position:relative; perspective:900px;
}
.logo-front{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:56px; height:56px;
  background: linear-gradient(145deg, #ff6b6b, #ff8a8a);
  color:white; font-weight:800; border-radius:12px;
  box-shadow: 0 8px 20px rgba(255,107,107,0.18), inset 0 -6px 18px rgba(0,0,0,0.15);
  transform: rotateX(12deg) rotateY(-8deg) translateZ(8px);
  font-family: Inter, sans-serif;
}
.brand-text .h1{ font-size:1.1rem; font-weight:700; color:var(--text); }
.brand-text .hindi { font-size:0.82rem; color:var(--muted); }

/* Navigation */
nav a.nav-link { color:var(--muted); margin-left:16px; text-decoration:none; transition:color .18s; font-weight:600; }
nav a.nav-link:hover { color:var(--accent-2); }

/* Cards area */
.plans-row { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; align-items:stretch; margin-top:18px; }

/* 3D card */
.card-3d {
  width:320px;
  min-height:220px;
  padding:20px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .25s;
  position:relative;
  overflow:visible;
  z-index: 0; /* base stacking context for card content */
}

/* depth layers (subtle) */
.card-3d::before, .card-3d::after{
  content:"";
  position:absolute; inset:0; border-radius:16px;
  z-index:-1;
  pointer-events: none; /* <-- important: let clicks through */
}
.card-3d::before{
  transform: translateZ(-20px) scale(0.98);
  background: linear-gradient(120deg, rgba(255,107,107,0.04), rgba(255,209,102,0.03));
  filter: blur(18px); opacity:0.9;
}
.card-3d::after{
  transform: translateZ(-40px) scale(0.96);
  background: linear-gradient(90deg, rgba(0,0,0,0.15), rgba(255,255,255,0.02));
  filter: blur(28px); opacity:0.6;
  pointer-events: none;
}

/* hover lift */
.card-3d:hover{
  transform: translateY(-10px) rotateX(6deg) rotateY(4deg) scale(1.02);
  box-shadow: 0 28px 60px rgba(2,6,23,0.75);
}

/* Ensure card inner content sits above pseudo layers */
.card-3d > * {
  position: relative;
  z-index: 2;
}

/* card content */
.card-3d .plan-name { font-size:1.15rem; font-weight:800; letter-spacing:0.6px; }
.card-3d .price { font-size:1.5rem; margin-top:6px; font-weight:800; color:var(--accent-2); }
.card-3d .price small { color:var(--muted); font-weight:600; font-size:0.7rem; display:block; margin-top:6px; }

/* features list */
.card-3d ul { margin-top:12px; margin-bottom:16px; color:var(--muted); }
.card-3d li { margin-bottom:6px; }

/* buttons */
.btn-3d {
  display:inline-block; padding:10px 16px; border-radius:10px; font-weight:700;
  color:#051029; text-decoration:none; background: linear-gradient(90deg,var(--accent-2), #ffd88a);
  border: none; cursor:pointer; transition: transform .16s, box-shadow .16s;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2), inset 0 -3px 6px rgba(255,255,255,0.35);
  position: relative;
  z-index: 3; /* ensure clickable above everything */
  text-align:center;
}
.btn-3d.secondary {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color:var(--text); border:1px solid rgba(255,255,255,0.04);
  box-shadow: none;
}
.btn-3d:active { transform: translateY(2px); }

/* responsive */
@media (max-width:980px){
  .plans-row{ gap:16px; }
  .card-3d{ width: 100%; max-width:480px; }
  nav{ display:none; }
}