/* === WazBot Red Theme - Responsive with Better Readability === */

body {
  margin:0;
  padding:0;
  font-family: Arial, sans-serif;
  background:#111;
  color:#333;
  line-height:1.7; /* ✅ Lebih lega di desktop */
}

/* Wrapper */
.wrapper {
  width:90%;
  max-width:760px;
  margin:0 auto;
  background:#fff;
  padding:20px;
  box-sizing:border-box;
}

/* Header */
header {
  background:#990000;
  color:#fff;
  text-align:center;
  padding:25px 10px;
}
header h1 {
  margin:0;
  font-size:32px;
  text-transform:uppercase;
}
header p {
  margin-top:8px;
  font-size:16px;
}

/* Navigation */
nav {
  background:#333;
  text-align:center;
  padding:10px 0;
}
nav a {
  color:#fff;
  text-decoration:none;
  margin:0 12px;
  font-weight:bold;
  font-size:14px;
}
nav a:hover {
  color:#ffd700;
}

/* Hero & Johnson box */
.hero,
.johnson-box {
  border:3px solid #990000;
  padding:25px;
  margin:25px 0;
  background:#fff8f8;
  border-radius:8px;
}
.hero h1,
.johnson-box h2 {
  text-align:center;
  color:#990000;
  margin-top:0;
}
.hero p {
  text-align:center;
  line-height:1.8;
  margin-bottom:15px;
}
.hero-img {
  max-width:100%;
  height:auto;
  margin:20px auto;
  display:block;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* Buttons */
.order-btn {
  display:block;
  background:#e60000;
  color:#fff;
  text-align:center;
  padding:15px;
  font-size:20px;
  font-weight:bold;
  margin:25px auto;
  text-decoration:none;
  width:80%;
  max-width:400px;
  border-radius:6px;
  box-shadow:0 4px #900;
  transition:all 0.2s ease;
}
.order-btn:hover {
  background:#c40000;
  transform:translateY(-2px);
}
/* === Tombol Khusus di Section Order === */
/* === Tombol di Form Order (Match Promo Style) === */
#order .order-btn {
  display:block;
  background:#e60000;
  color:#fff;
  text-align:center;
  padding:18px;
  font-size:20px;
  font-weight:bold;
  margin:25px auto 0;
  text-decoration:none;
  width:100%;
  max-width:480px;
  border:none;
  border-radius:6px;
  box-shadow:0 5px 0 #900; /* bayangan bawah merah tua */
  transition:all 0.2s ease;
  cursor:pointer;
}

#order .order-btn:hover {
  background:#c40000;
  transform:translateY(-2px);
  box-shadow:0 7px 0 #800; /* sedikit lebih tinggi saat hover */
}

#order .order-btn:active {
  transform:translateY(3px);
  box-shadow:0 2px 0 #900;
}

/* Boxes */
.box {
  border:2px solid #ccc;
  padding:25px;
  margin:25px 0;
  background:#fdfdfd;
  border-radius:8px;
}
.box h2 {
  color:#990000;
  text-align:center;
  margin-top:0;
  margin-bottom:20px;
}

/* === Pricing Table === */
.pricing-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:20px;
  margin-top:20px;
}
.price-card {
  border:2px solid #ccc;
  border-radius:8px;
  background:#fff;
  padding:20px;
  text-align:center;
  transition:all 0.25s ease;
}
.price-card:hover {
  border-color:#990000;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  transform:translateY(-3px);
}
.price-card h3 {
  color:#990000;
  margin-bottom:10px;
}
.price {
  font-size:24px;
  font-weight:bold;
  color:#e60000;
  margin-bottom:10px;
}
.price-card ul {
  list-style:none;
  padding:0;
  margin:10px 0;
}
.price-card ul li {
  margin:5px 0;
  font-size:14px;
}
.price-card .order-btn.small {
  width:90%;
  padding:10px;
  font-size:16px;
  margin-top:10px;
}
.price-card.highlight {
  background:#fff4f4;
  border-color:#e60000;
}
.price-card .badge {
  background:#e60000;
  color:#fff;
  padding:3px 10px;
  border-radius:12px;
  font-size:12px;
  margin-bottom:5px;
  display:inline-block;
}
.price-card.premium {
  background:#111;
  color:#fff;
  border-color:#e60000;
}
.price-card.premium h3 { color:#ffd700; }
.price-card.premium .price { color:#ffd700; }
.price-card.premium .premium-text {
  color:#ffd700;
  font-style:italic;
  margin-top:5px;
}
/* === Checklist Style === */
.checklist {
  list-style:none;
  padding:0;
  margin:12px 0;
  text-align:left;
}
.checklist li {
  margin:6px 0;
  padding-left:28px;
  position:relative;
  font-size:14.5px;
  line-height:1.6;
}
.checklist li::before {
  content:"✔";
  color:#e60000;
  position:absolute;
  left:5px;
  font-weight:bold;
}

/* Tombol CTA kecil dengan animasi lembut */
.order-btn.small {
  width:90%;
  padding:10px;
  font-size:16px;
  margin-top:10px;
  transition:all 0.25s ease;
}
.order-btn.small:hover {
  transform:translateY(-3px);
  background:#c40000;
  box-shadow:0 6px 10px rgba(0,0,0,0.2);
}


/* Paragraphs & Lists */
p {
  margin-bottom:15px;
}
ul {
  margin-left:25px;
  line-height:1.7;
}
ul li {
  margin-bottom:6px;
}

/* Blockquotes */
blockquote {
  border-left:4px solid #990000;
  padding-left:10px;
  font-style:italic;
  color:#444;
  margin:20px 0;
}
.highlight {
  color:#c40000;
  font-weight:bold;
}

/* Testimonials */
.testimonial {
  border-left:5px solid #990000;
  margin:18px 0;
  padding:12px 18px;
  background:#f8f8f8;
  font-style:italic;
  line-height:1.6;
}

/* FAQ */
.faq-item {
  margin-bottom:10px;
}
.faq-question {
  background:#990000;
  color:#fff;
  border:none;
  padding:12px;
  width:100%;
  text-align:left;
  cursor:pointer;
  font-weight:bold;
  font-size:15px;
  border-radius:5px;
}
.faq-answer {
  display:none;
  padding:12px 15px;
  background:#fff8f8;
  border-left:3px solid #990000;
  border-radius:0 0 5px 5px;
}
.faq-item.active .faq-answer {
  display:block;
}

/* Scarcity */
.scarcity-box {
  text-align:center;
  border:2px dashed #990000;
  background:#fff8f8;
  padding:12px;
  margin:18px 0;
  font-weight:bold;
  color:#990000;
  border-radius:8px;
}

/* === Top Features Section === */
.feature-highlight {
  margin:30px 0;
  padding:20px;
  border:2px solid #eee;
  border-radius:8px;
  background:#fff;
  transition:all 0.25s ease;
}
.feature-highlight:hover {
  border-color:#990000;
  box-shadow:0 3px 10px rgba(0,0,0,0.08);
}
.feature-highlight h3 {
  color:#990000;
  margin-bottom:10px;
  text-align:left;
}
.feature-highlight p {
  line-height:1.7;
  text-align:left;
}
.feature-highlight img.feature-img {
  max-width:100%;
  margin:15px auto;
  display:block;
  border-radius:8px;
  box-shadow:0 3px 12px rgba(0,0,0,0.15);
}
.feature-highlight ul {
  margin:10px 0 15px 20px;
  padding:0;
}
.feature-highlight ul li {
  margin:6px 0;
  position:relative;
  padding-left:22px;
}
.feature-highlight ul li::before {
  content:"✔";
  color:#e60000;
  position:absolute;
  left:0;
  font-weight:bold;
}


/* Footer */
footer {
  text-align:center;
  font-size:13px;
  padding:15px;
  background:#222;
  color:#aaa;
  margin-top:30px;
  border-radius:8px;
}

/* === Responsive Section === */
@media (max-width:768px) {
  header h1 {
    font-size:26px;
  }
  header p {
    font-size:14px;
  }
  .wrapper {
    width:95%;
    padding:15px;
  }
  nav a {
    display:inline-block;
    margin:6px;
    font-size:13px;
  }
  .order-btn {
    width:90%;
    font-size:18px;
    padding:14px;
  }
  .box {
    padding:18px;
  }
  ul {
    margin-left:15px;
  }
}

@media (max-width:500px) {
  nav {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
  }
  nav a {
    display:block;
    background:#990000;
    padding:8px 10px;
    border-radius:4px;
    font-size:13px;
  }
  nav a:hover {
    background:#c40000;
    color:#fff;
  }
  .hero h1 {
    font-size:20px;
  }
  .hero p {
    font-size:14px;
  }
  .order-btn {
    width:95%;
    font-size:16px;
    padding:12px;
  }
  .testimonial {
    font-size:14px;
  }
  footer {
    font-size:12px;
  }
}

/* === Scroll Animation (Fade-In) === */
.fade-in {
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
  opacity:1;
  transform:translateY(0);
}
/* === Order Form Styling - Fix Width & Design === */
.order-form {
  max-width:480px;
  margin:0 auto;
  text-align:center;
}

.order-form .form-group {
  margin-bottom:15px;
}

.order-form input,
.order-form select {
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  font-size:15px;
  border:2px solid #ccc;
  border-radius:6px;
  outline:none;
  transition:all 0.2s ease;
  appearance:none;
  background-color:#fff;
}

.order-form input:focus,
.order-form select:focus {
  border-color:#e60000;
  box-shadow:0 0 6px rgba(230,0,0,0.3);
}

/* Hilangkan panah bawaan browser, dan kasih panah custom di kanan */
.order-form select {
  background-image:linear-gradient(45deg, transparent 50%, #e60000 50%), 
                   linear-gradient(135deg, #e60000 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 4px),
                      calc(100% - 15px) calc(50% - 4px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  cursor:pointer;
}

.order-form select:focus {
  background-image:linear-gradient(45deg, transparent 50%, #990000 50%), 
                   linear-gradient(135deg, #990000 50%, transparent 50%);
}

/* Supaya tombol sejajar bagus */
.order-form .order-btn {
  width:100%;
  max-width:480px;
  margin-top:10px;
}