/* ===================== রেসিপি৩ডি — থ্রিডি ইউআই ডিজাইন ===================== */

:root{
  --bg: #0f0c29;
  --bg-2: #24243e;
  --accent: #ff7e5f;
  --accent-2: #feb47b;
  --accent-3: #7f5af0;
  --glass: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.18);
  --text: #f4f2ff;
  --text-dim: #c2bfd6;
  --radius: 20px;
  --shadow-deep: 0 25px 50px -12px rgba(0,0,0,0.6);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  min-height:100vh;
  font-family:'Hind Siliguri', sans-serif;
  color:var(--text);
  background: linear-gradient(135deg, var(--bg), var(--bg-2) 60%, #1a1440);
  overflow-x:hidden;
  position:relative;
}

/* ---------- floating background blobs ---------- */
.blob{
  position:fixed; border-radius:50%; filter: blur(90px); opacity:.45; z-index:0;
  animation: float 14s ease-in-out infinite;
}
.blob-1{ width:420px; height:420px; background:var(--accent-3); top:-120px; left:-100px; }
.blob-2{ width:360px; height:360px; background:var(--accent); bottom:-100px; right:-80px; animation-delay:-4s; }
.blob-3{ width:280px; height:280px; background:var(--accent-2); top:40%; left:60%; animation-delay:-8s; }

@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(30px,-40px,0) scale(1.1); }
}

/* ---------- navbar ---------- */
.navbar-3d{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(16px);
  background: rgba(15,12,41,0.55);
  border-bottom:1px solid var(--glass-border);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ font-size:1.4rem; font-weight:700; color:var(--text); text-decoration:none; display:flex; align-items:center; gap:8px; }
.brand-icon{ display:inline-block; animation: spin3d 6s linear infinite; }
.accent{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes spin3d{ from{ transform: rotateY(0);} to{ transform: rotateY(360deg);} }

.nav-links{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.nav-links a, .link-btn{ color:var(--text-dim); text-decoration:none; font-size:.95rem; background:none; border:none; cursor:pointer; font-family:inherit; }
.nav-links a:hover, .link-btn:hover{ color:var(--text); }
.inline-form{ display:inline; }

/* ---------- layout ---------- */
.page-wrap{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:32px 20px 60px; }

.messages{ margin-bottom:20px; }
.toast{
  background:var(--glass); border:1px solid var(--glass-border);
  padding:12px 18px; border-radius:12px; margin-bottom:10px;
  animation: slideIn .4s ease;
}
@keyframes slideIn{ from{ opacity:0; transform: translateY(-10px);} to{ opacity:1; transform:none;} }

/* ---------- 3D buttons ---------- */
.btn-3d{
  display:inline-block; padding:12px 26px; border:none; border-radius:14px;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#1a1030; font-weight:700; text-decoration:none; cursor:pointer;
  box-shadow: 0 8px 0 #b34f38, 0 15px 25px rgba(0,0,0,.4);
  transform: translateY(0); transition: transform .15s ease, box-shadow .15s ease;
}
.btn-3d:hover{ transform: translateY(-3px); box-shadow: 0 11px 0 #b34f38, 0 20px 30px rgba(0,0,0,.45); }
.btn-3d:active{ transform: translateY(4px); box-shadow: 0 3px 0 #b34f38; }
.btn-3d.small{ padding:8px 18px; font-size:.85rem; }
.btn-3d.ghost{ background:transparent; border:2px solid var(--glass-border); color:var(--text); box-shadow:none; }
.btn-3d.ghost:hover{ transform:none; border-color:var(--accent); }
.btn-3d.danger{ background: linear-gradient(135deg,#ff5f7e,#ff9f7e); box-shadow: 0 8px 0 #a83a4c, 0 15px 25px rgba(0,0,0,.4); }

/* ---------- hero ---------- */
.hero{ text-align:center; padding:50px 10px 30px; perspective:1200px; }
.hero h1{
  font-size: clamp(2rem, 5vw, 3.2rem); margin:0 0 12px;
  background: linear-gradient(90deg,#fff,var(--accent-2),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: floatTitle 5s ease-in-out infinite;
}
@keyframes floatTitle{ 0%,100%{ transform: translateY(0) rotateX(0);} 50%{ transform: translateY(-6px) rotateX(4deg);} }
.hero p{ color:var(--text-dim); max-width:560px; margin:0 auto 24px; }

.stats-row{ display:flex; justify-content:center; gap:40px; margin-top:30px; flex-wrap:wrap; }
.stat-pill{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
  padding:16px 26px; min-width:120px; text-align:center;
  transform-style:preserve-3d; transition: transform .3s ease;
}
.stat-pill:hover{ transform: rotateY(10deg) rotateX(6deg) translateY(-4px); }
.stat-num{ font-size:1.8rem; font-weight:700; color:var(--accent-2); }
.stat-label{ font-size:.8rem; color:var(--text-dim); }

/* ---------- filter bar ---------- */
.filter-bar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;
  margin:30px 0; padding:14px; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:16px;
}
.filter-bar input[type="text"], .filter-bar select{
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border); color:var(--text);
  padding:10px 14px; border-radius:10px; font-family:inherit;
}
/* ---------- filter bar ---------- */
.filter-bar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;
  margin:30px 0; padding:14px; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:16px;
}
.filter-bar input[type="text"], .filter-bar select{
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border); color:var(--text);
  padding:10px 14px; border-radius:10px; font-family:inherit;
}

/* ✅ ড্রপডাউন অপশনগুলো স্পষ্ট দেখানোর জন্য */
.filter-bar select option,
.form-group select option,
select option {
  background: #1a1440;      /* গাঢ় ব্যাকগ্রাউন্ড */
  color: #f4f2ff;           /* হালকা টেক্সট */
  padding: 8px 12px;
}

.filter-bar select option:checked,
.form-group select option:checked,
select option:checked {
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  color: #1a1030;
}

/* কিছু ব্রাউজারে ড্রপডাউন খোলা অবস্থায় ব্যাকগ্রাউন্ড সেট করতে হয় */
.filter-bar select:focus,
.form-group select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chip{
  padding:6px 14px; border-radius:20px; border:1px solid var(--glass-border);
  color:var(--text-dim); text-decoration:none; font-size:.85rem; transition:.2s;
}
.chip.active, .chip:hover{ background: linear-gradient(135deg,var(--accent),var(--accent-2)); color:#1a1030; border-color:transparent; }

/* ---------- 3D recipe cards (tilt on hover via JS) ---------- */
.grid-3d{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:26px;
  perspective:1400px; margin-top:20px;
}
.card-3d{
  position:relative; border-radius: var(--radius); overflow:hidden;
  background: var(--glass); border:1px solid var(--glass-border);
  box-shadow: var(--shadow-deep);
  transform-style: preserve-3d; transition: transform .12s ease-out, box-shadow .3s ease;
  text-decoration:none; color:var(--text); display:block;
}
.card-3d:hover{ box-shadow: 0 35px 60px -15px rgba(127,90,240,.5); }
.card-media{ height:170px; overflow:hidden; position:relative; }
.card-media img{ width:100%; height:100%; object-fit:cover; transform: translateZ(20px) scale(1.02); transition: transform .4s ease; }
.card-3d:hover .card-media img{ transform: translateZ(30px) scale(1.12); }
.card-media.placeholder{ display:flex; align-items:center; justify-content:center; font-size:3rem; background: linear-gradient(135deg,var(--accent-3),var(--accent)); }
.card-badge{
  position:absolute; top:10px; right:10px; background:rgba(15,12,41,.75);
  padding:4px 10px; border-radius:20px; font-size:.75rem; transform: translateZ(40px);
}
.card-body{ padding:18px; transform: translateZ(30px); }
.card-body h3{ margin:0 0 6px; font-size:1.1rem; }
.card-body p{ margin:0 0 12px; color:var(--text-dim); font-size:.88rem; line-height:1.5; }
.card-meta{ display:flex; gap:14px; font-size:.8rem; color:var(--text-dim); flex-wrap:wrap; }
.card-meta span{ display:flex; align-items:center; gap:4px; }

/* ---------- recipe detail ---------- */
.detail-hero{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:34px; align-items:center;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  padding:26px; box-shadow: var(--shadow-deep); margin-bottom:30px;
}
@media (max-width:800px){ .detail-hero{ grid-template-columns:1fr; } }
.detail-media{ border-radius:16px; overflow:hidden; height:280px; transform-style:preserve-3d; }
.detail-media img{ width:100%; height:100%; object-fit:cover; }
.detail-media.placeholder{ display:flex; align-items:center; justify-content:center; font-size:5rem; background: linear-gradient(135deg,var(--accent-3),var(--accent)); }
.detail-info h1{ margin-top:0; }
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.pill{ background:rgba(255,255,255,.08); border:1px solid var(--glass-border); border-radius:20px; padding:6px 14px; font-size:.85rem; }

.panel{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  padding:24px; margin-bottom:24px;
}
.panel h2{ margin-top:0; display:flex; align-items:center; gap:10px; }
.ingredient-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.ingredient-list li{ background:rgba(255,255,255,.05); padding:10px 14px; border-radius:10px; border-left:3px solid var(--accent); }
.step-list{ counter-reset: step; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.step-list li{
  counter-increment: step; position:relative; padding:14px 14px 14px 54px;
  background:rgba(255,255,255,.05); border-radius:12px;
}
.step-list li::before{
  content: counter(step); position:absolute; left:14px; top:50%; transform: translateY(-50%) translateZ(10px);
  width:28px; height:28px; border-radius:50%; background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#1a1030; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* ---------- profile page ---------- */
.profile-hero{
  position:relative; border-radius:var(--radius); padding:50px 30px; text-align:center;
  background: linear-gradient(135deg, rgba(127,90,240,.35), rgba(255,126,95,.28));
  border:1px solid var(--glass-border); overflow:hidden; margin-bottom:40px;
  perspective:1000px;
}
.avatar-wrap{
  width:140px; height:140px; margin:0 auto 16px; border-radius:50%;
  padding:6px; background: linear-gradient(135deg,var(--accent),var(--accent-3));
  animation: avatarFloat 4s ease-in-out infinite; transform-style:preserve-3d;
}
@keyframes avatarFloat{ 0%,100%{ transform: translateY(0) rotateY(0);} 50%{ transform: translateY(-10px) rotateY(8deg);} }
.avatar-wrap img, .avatar-fallback{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:flex;
  align-items:center; justify-content:center; font-size:3rem; background:var(--bg-2); border:4px solid var(--bg);
}
.profile-hero h1{ margin:6px 0 4px; }
.profile-hero .username{ color:var(--text-dim); margin-bottom:14px; }
.bio-text{ max-width:480px; margin:0 auto 20px; color:var(--text-dim); }

.stats-3d{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:10px; }
.stat-cube{
  width:130px; padding:20px 10px; border-radius:16px;
  background:rgba(255,255,255,.08); border:1px solid var(--glass-border);
  transform-style:preserve-3d; transition: transform .4s ease;
}
.stat-cube:hover{ transform: rotateX(12deg) rotateY(-12deg) translateY(-6px) scale(1.05); }
.stat-cube .num{ font-size:1.9rem; font-weight:700; color:var(--accent-2); display:block; }
.stat-cube .lbl{ font-size:.78rem; color:var(--text-dim); }

.feature-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin:30px 0 40px; perspective:1200px; }
.feature-card{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:22px;
  transform-style:preserve-3d; transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover{ transform: translateY(-8px) rotateX(6deg); box-shadow: 0 25px 40px -10px rgba(127,90,240,.4); }
.feature-icon{ font-size:2.2rem; display:block; margin-bottom:10px; animation: pulseIcon 3s ease-in-out infinite; }
@keyframes pulseIcon{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.15) rotate(-6deg);} }
.feature-card h3{ margin:0 0 6px; font-size:1.05rem; }
.feature-card p{ margin:0; color:var(--text-dim); font-size:.85rem; line-height:1.5; }

.section-title{ display:flex; align-items:center; gap:10px; margin:34px 0 16px; }
.section-title h2{ margin:0; }
.section-title .line{ flex:1; height:1px; background:var(--glass-border); }

/* ---------- forms ---------- */
.form-3d{
  max-width:640px; margin:0 auto; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:30px; box-shadow: var(--shadow-deep);
}
.form-3d h1{ margin-top:0; text-align:center; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; margin-bottom:6px; color:var(--text-dim); font-size:.9rem; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06); color:var(--text); font-family:inherit; font-size:.95rem;
}
.form-group textarea{ resize:vertical; }
.helptext{ font-size:.78rem; color:var(--text-dim); margin-top:4px; }
.errorlist{ color:#ff8fa3; list-style:none; padding:0; margin:4px 0 0; font-size:.82rem; }
.form-actions{ text-align:center; margin-top:24px; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty-state .big-icon{ font-size:3.5rem; display:block; margin-bottom:14px; }

/* ---------- footer ---------- */
.footer-3d{ text-align:center; padding:24px; color:var(--text-dim); font-size:.85rem; position:relative; z-index:1; }

a{ color:var(--accent-2); }