/* ===============================
   Global Theme Styling — K18 Pink
   =============================== */

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

body {
  font-family: 'Cairo', sans-serif !important;
  background: linear-gradient(180deg, #fff7fb, #ffffff) !important;
  margin: 0;
  padding: 0;
  direction: rtl;
}

/* Colors */
:root {
  --pink: #ff4d9e;
  --dark: #222;
  --muted: #6b6b6b;
  --card: #ffffff;
  --accent: #ffeaf6;
}

/* ===============================
   Header
   =============================== */

header, .header, .page-header {
  background: #ffffff !important;
  padding: 20px !important;
  border-bottom: 2px solid #ffe2f1 !important;
}

header h1, .store-name {
  color: var(--dark) !important;
  font-weight: 700 !important;
}

/* ===============================
   Hero Section
   =============================== */

.hero, .banner, .top-section {
  background: linear-gradient(180deg, #fff0f8, white) !important;
  padding: 30px 20px !important;
  border-radius: 20px !important;
  margin: 15px auto !important;
  box-shadow: 0 8px 18px rgba(255, 77, 158, 0.12);
}

.hero-title, h2 {
  color: var(--dark) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.hero-sub {
  color: var(--muted) !important;
  margin-top: 8px !important;
  font-size: 16px !important;
}

/* ===============================
   Cards (Product / Info / Offer)
   =============================== */

.card, .product-card, .info-box {
  background: var(--card) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important;
  border: none !important;
}

.product-card img {
  border-radius: 14px !important;
}

/* ===============================
   Price Styling
   =============================== */

.price-now {
  color: var(--pink) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
}

.price-old {
  color: var(--muted) !important;
  text-decoration: line-through !important;
}

/* Offer Badge */
.badge, .offer-badge {
  background: var(--accent) !important;
  color: var(--pink) !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 30px !important;
  font-size: 13px !important;
}

/* ===============================
   Buttons
   =============================== */

button, .btn, .action-button {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  cursor: pointer !important;
  border: none !important;
}

.btn-primary, .main-btn, button.checkout, .buy-now {
  background: var(--pink) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(255, 77, 158, 0.22) !important;
}

.btn-outline, .secondary-btn {
  background: transparent !important;
  border: 2px solid var(--pink) !important;
  color: var(--pink) !important;
}

/* ===============================
   Lists (Features / Benefits)
   =============================== */

ul, ol {
  padding: 0 !important;
  list-style: none !important;
}

ul li, ol li {
  margin-bottom: 10px !important;
  padding-inline-start: 20px !important;
  position: relative !important;
  color: var(--dark) !important;
}

ul li::before {
  content: \"•\" !important;
  color: var(--pink) !important;
  font-weight: 700 !important;
  position: absolute !important;
  right: 0 !important;
}

/* ===============================
   Testimonials
   =============================== */

.testimonial, .review-box {
  background: white !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

.testimonial strong {
  color: var(--dark) !important;
}

/* ===============================
   Form Styling
   =============================== */

input, textarea, select {
  width: 100% !important;
  padding: 12px !important;
  border-radius: 10px !important;
  border: 1px solid #ffd7ec !important;
  font-size: 15px !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 6px rgba(255, 77, 158, 0.25) !important;
  outline: none !important;
}

/* ===============================
   Footer
   =============================== */

footer {
  text-align: center !important;
  padding: 25px !important;
  background: #fff0f8 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  margin-top: 30px !important;
}