/*
Theme Name: Minoxidil BD
Theme URI: https://bangla-hair-boost.lovable.app
Author: Minoxidil BD
Author URI: https://bangla-hair-boost.lovable.app
Description: বাংলাদেশের #১ হেয়ার রিগ্রোথ সলিউশন - Single Page Landing Theme
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minoxidil-bd
Tags: one-page, custom-logo, custom-menu, featured-images, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #1E7F5C;
  --primary-dark: #0D3F2D;
  --primary-light: #2a9e73;
  --cta: #FF7A00;
  --cta-dark: #d66500;
  --cta-light: #ffa347;
  --gold: #FF7A00;
  --gold-light: #FFB347;
  --medical-blue: #2F80ED;
  --bg: #F8F9FB;
  --bg-dark: #0D3F2D;
  --card: #FFFFFF;
  --foreground: #1a2a3a;
  --muted: #6b7b8d;
  --muted-bg: #f0f2f5;
  --border: #e2e5ea;
  --destructive: #e53e3e;
  --success: #38a169;
  --radius: 0.75rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Hind Siliguri', sans-serif;
  background: var(--bg);
  color: var(--foreground);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.container-sm { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.container-md { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* Section Styles */
.section-padding { padding: 64px 16px; }
.section-dark {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
}
.section-light { background: var(--bg); }
.section-muted { background: var(--muted-bg); }

.text-gold { color: var(--gold); }
.text-cta { color: var(--cta); }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }

.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-12 { margin-bottom: 48px; }

/* Grid */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .section-padding { padding: 80px 32px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Cards */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

/* Buttons */
.cta-button {
  display: inline-block;
  background: linear-gradient(135deg, var(--cta), var(--cta-dark));
  color: #fff;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: var(--radius);
  font-size: 1.125rem;
  border: none;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
}
.cta-button:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(255,122,0,0.3); }

.cta-button-large {
  display: inline-block;
  background: linear-gradient(135deg, var(--cta), var(--cta-dark));
  color: #fff;
  font-weight: 700;
  padding: 20px 48px;
  border-radius: var(--radius);
  font-size: 1.25rem;
  border: none;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
}
.cta-button-large:hover { transform: scale(1.05); box-shadow: 0 12px 32px rgba(255,122,0,0.35); }

/* Urgency Bar */
.urgency-bar {
  background: var(--primary);
  color: #fff;
  padding: 12px 16px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 50;
  font-size: 0.875rem;
}
.urgency-bar .timer { font-weight: 700; color: var(--cta); font-size: 1.125rem; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
}
.hero .bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.1;
}
.hero .hero-content { position: relative; z-index: 10; max-width: 640px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: 2rem; font-weight: 700; line-height: 1.3; margin-bottom: 24px; }
.hero h1 span { color: var(--cta); }

@media (min-width: 768px) {
  .hero h1 { font-size: 3rem; }
}

.check-list { list-style: none; text-align: left; display: inline-block; margin-bottom: 32px; }
.check-list li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 1rem; }
.check-list li svg { color: var(--cta); flex-shrink: 0; width: 20px; height: 20px; }

.trust-badges { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 24px; font-size: 0.875rem; opacity: 0.8; }
.trust-badges span { display: flex; align-items: center; gap: 8px; }

/* Problem Section */
.problem-card { text-align: center; }
.problem-card img { width: 144px; height: 144px; border-radius: 12px; object-fit: cover; margin: 0 auto 16px; }
.problem-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }

/* Solution */
.solution-flex { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.solution-images { display: flex; gap: 16px; flex-shrink: 0; }
.solution-images img { width: 160px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.feature-list { list-style: none; }
.feature-list li {
  display: flex; align-items: center; gap: 12px;
  background: rgba(30,127,92,0.2);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 8px;
  font-weight: 500;
}
.feature-list li svg { color: var(--primary); flex-shrink: 0; }

@media (min-width: 768px) {
  .solution-flex { flex-direction: row; }
  .solution-images img { width: 200px; }
}

/* Benefits */
.benefit-card { text-align: center; }
.benefit-card img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; margin: 0 auto 16px; }
.benefit-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 16px; }
.benefit-card ul { list-style: none; text-align: left; }
.benefit-card ul li { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); margin-bottom: 8px; }
.benefit-card ul li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* Video */
.video-wrapper {
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(30,127,92,0.2);
  margin-bottom: 24px;
}
.video-wrapper video { width: 100%; height: 100%; object-fit: cover; }

.video-vertical { aspect-ratio: 9/16; }

/* Testimonials */
.testimonial-card {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.stars { color: var(--gold); margin-bottom: 12px; }

/* Chat */
.chat-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--card); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.chat-header { background: var(--primary); padding: 12px 16px; color: #fff; font-weight: 600; font-size: 0.875rem; display: flex; align-items: center; gap: 12px; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; }
.chat-body { padding: 16px; min-height: 220px; }
.chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 0.875rem; margin-bottom: 12px; }
.chat-msg.customer { background: var(--muted-bg); border-bottom-left-radius: 0; }
.chat-msg.seller { background: var(--primary); color: #fff; border-bottom-right-radius: 0; margin-left: auto; }

/* Quiz */
.quiz-card { background: var(--card); border-radius: 16px; padding: 24px; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.quiz-progress { display: flex; gap: 8px; margin-bottom: 24px; }
.quiz-progress .bar { height: 8px; flex: 1; border-radius: 4px; background: var(--muted-bg); transition: background 0.3s; }
.quiz-progress .bar.active { background: var(--primary); }
.quiz-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; padding: 16px 20px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; transition: all 0.2s; margin-bottom: 12px;
  font-weight: 500;
}
.quiz-option:hover { border-color: var(--primary); background: rgba(30,127,92,0.05); }

/* Pricing */
.pricing-card {
  background: var(--card);
  border-radius: 16px;
  border: 2px solid var(--border);
  padding: 24px;
  text-align: center;
  transition: transform 0.3s;
  position: relative;
}
.pricing-card:hover { transform: scale(1.02); }
.pricing-card.popular { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,122,0,0.15); }
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-old { color: var(--muted); text-decoration: line-through; font-size: 1.125rem; }
.price-new { color: var(--gold); font-size: 2rem; font-weight: 700; }
.price-discount {
  display: inline-block;
  background: var(--destructive);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 999px;
  margin-top: 8px;
}

/* Order Form */
.order-form { background: var(--card); border-radius: 16px; padding: 24px; border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.875rem; }
.form-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,127,92,0.15); }
.form-input.error { border-color: var(--destructive); }
.error-text { color: var(--destructive); font-size: 0.75rem; margin-top: 4px; }

.variant-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer; transition: all 0.2s;
  margin-bottom: 8px;
}
.variant-option:hover, .variant-option.selected { border-color: var(--primary); background: rgba(30,127,92,0.05); }
.variant-option.selected { box-shadow: 0 0 0 1px var(--primary); }

.order-summary {
  background: var(--muted-bg);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}

/* Trust */
.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.trust-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.trust-icon svg { color: #fff; width: 28px; height: 28px; }

/* How to Use */
.step-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: rgba(30,127,92,0.2);
  border-radius: 12px;
  padding: 24px;
}
.step-number {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--cta), var(--gold-light));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.25rem;
  flex-shrink: 0;
}
.step-card h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: 4px; }

/* FAQ */
.faq-item {
  background: var(--card);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  cursor: pointer;
  margin-bottom: 12px;
}
.faq-question { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.faq-arrow { transition: transform 0.3s; font-size: 1.25rem; }
.faq-arrow.open { transform: rotate(180deg); }
.faq-answer { margin-top: 12px; color: var(--muted); line-height: 1.7; display: none; }
.faq-answer.show { display: block; }

/* Floating buttons */
.floating-buttons { position: fixed; bottom: 80px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 12px; }
.floating-btn {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: transform 0.2s;
  border: none; cursor: pointer;
}
.floating-btn:hover { transform: scale(1.1); }
.floating-btn.phone { background: hsl(210,80%,50%); }
.floating-btn.whatsapp { background: hsl(142,70%,45%); }
.floating-btn svg { color: #fff; width: 26px; height: 26px; }

/* Sticky bottom CTA - mobile */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.sticky-cta .cta-button { width: 100%; display: block; }

@media (min-width: 768px) {
  .sticky-cta { display: none; }
  .floating-buttons { bottom: 24px; }
}

/* Disclaimer */
.disclaimer { padding: 40px 16px; background: var(--card); border-top: 1px solid var(--border); text-align: center; }
.disclaimer p { color: var(--muted); font-size: 0.875rem; line-height: 1.7; }

/* Animations */
.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,0,0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(255,122,0,0.3); }
}
.animate-pulse-glow { animation: pulse-glow 2s infinite; }

/* Image slider */
.slider-container { position: relative; max-width: 560px; margin: 0 auto; }
.slider-image-wrap { position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; }
.slider-image-wrap img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s, transform 0.7s;
  transform: scale(1.05);
}
.slider-image-wrap img.active { opacity: 1; transform: scale(1); }
.slider-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4), transparent);
  padding: 48px 16px 16px;
}
.slider-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0; }
.slider-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; transition: all 0.3s; }
.slider-dot.active { width: 24px; border-radius: 5px; background: var(--primary); }
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.slider-arrow.prev { left: 8px; }
.slider-arrow.next { right: 8px; }

/* Duplicate alert */
.alert-box {
  background: rgba(229,62,62,0.1);
  border: 1px solid rgba(229,62,62,0.3);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}
.alert-box p { font-size: 0.875rem; }
.alert-box .alert-title { color: var(--destructive); font-weight: 700; margin-bottom: 4px; }
.alert-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.alert-actions a {
  padding: 8px 16px; border-radius: 8px; font-size: 0.75rem; font-weight: 600; color: #fff;
}
.alert-actions .call-btn { background: var(--primary); }
.alert-actions .wa-btn { background: hsl(142,70%,45%); }

/* Customizer support */
.wp-custom-logo .site-logo img { max-height: 60px; width: auto; }