:root {
  --bg: #fafafa;
  --primary: #d4af37; /* Gold */
  --text: #333;
  --accent: #f7ede2; /* Light cream/peach */
  --secondary-accent: #c0d9df; /* Soft blue-green */
  --shadow-light: rgba(0, 0, 0, 0.08); /* Light shadow */
  --shadow-medium: rgba(0, 0, 0, 0.12); /* Medium shadow */
  --font-main: 'Montserrat', sans-serif;
  --font-secondary: 'Source Sans Pro', sans-serif;
}

/* --- GLOBAL STYLES --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-secondary);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
button, select, input { font-family: inherit; }
.container { max-width: 1000px; margin: auto; padding: 2rem; }
h1, h2 { font-family: var(--font-main); }
h1 {
  font-size: 3em;
  color: var(--primary);
  text-align: center;
  margin-bottom: 0.5em;
  line-height: 1.2;
}
h2 { font-size: 2.2em; color: var(--text); margin-bottom: 1em; text-align: center; }
p { margin-bottom: 1em; }
.section-description { text-align: center; margin-bottom: 2em; font-size: 1.1em; color: #555; }

/* --- PROGRESS INDICATOR --- */
.progress-indicator { display: flex; justify-content: center; margin-bottom: 2rem; gap: 0.5rem; }
.dot { width: 15px; height: 15px; background-color: var(--secondary-accent); border-radius: 50%; transition: background-color 0.3s ease; }
.dot.active { background-color: var(--primary); }

/* --- FORM CONTAINER & STEPS --- */
.form-container {
  background-color: #fff;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow-medium);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.form-step { display: none; opacity: 0; transition: opacity 0.5s ease-in-out; flex-grow: 1; }
.form-step.active { display: flex; flex-direction: column; opacity: 1; animation: fadeIn 0.5s forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- FORM ELEMENTS --- */
label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text); }
select, input[type="text"], input[type="email"], input[type="password"] {
  width: 100%; padding: 0.8rem; margin-bottom: 1.5rem; border: 1px solid #ddd; border-radius: 8px; font-size: 1em; color: var(--text); background-color: #fefefe;
}
select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}
fieldset { border: 1px solid #ddd; padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; background-color: var(--accent); }
legend { font-weight: 600; color: var(--text); padding: 0 0.5rem; }
.radio-group { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; }

.radio-group input[type="radio"] {
  margin-right: 0.5rem; appearance: none; width: 18px; height: 18px; border: 2px solid var(--primary); border-radius: 50%; position: relative; top: 4px; cursor: pointer; outline: none;
}
.radio-group input[type="radio"]:checked { background-color: var(--primary); border-color: var(--primary); }
.radio-group input[type="radio"]:checked::before {
  content: ''; display: block; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.radio-group label { display: inline-flex; align-items: center; margin-bottom: 0; cursor: pointer; font-weight: normal; }

/* --- BUTTONS --- */
.button-group { display: flex; justify-content: space-between; margin-top: 2rem; gap: 1rem; }
button {
  padding: 0.9rem 1.5rem; border: none; border-radius: 999px; cursor: pointer; font-size: 1.05em; font-weight: 700; transition: all 0.25s ease; flex-grow: 1; text-align: center;
}
button.primary { background-color: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(212, 175, 55, 0.35); }
button.primary:hover { background-color: #c09d2f; box-shadow: 0 10px 20px rgba(212, 175, 55, 0.45); transform: translateY(-2px); }
button.secondary { background-color: #e0e0e0; color: var(--text); border: 1px solid #ccc; }
button.secondary:hover { background-color: #d0d0d0; transform: translateY(-2px); }
button.small { padding: 0.5rem 1rem; font-weight: 600; }
.tiny-note { font-size: 0.8rem; color: #666; margin-top: 0.5rem; text-align: center; }

/* --- ERROR MESSAGE --- */
.error-message { color: #d9534f; text-align: center; margin-top: -1em; margin-bottom: 1em; font-weight: 600; }

/* --- GRIDS --- */
.drill-grid, .meal-grid, .blog-posts, .shop-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; margin-top: 2rem; justify-content: center; padding-bottom: 2rem;
}
.card, .drill-card, .meal-card, .blog-post-card, .product-card {
  background-color: #fff; border-radius: 14px; box-shadow: 0 6px 16px var(--shadow-light);
  padding: 1.3rem; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; justify-content: space-between;
}
.card:hover, .drill-card:hover, .meal-card:hover, .blog-post-card:hover, .product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px var(--shadow-medium); }
.drill-card h3, .meal-card h3, .blog-post-card h3, .product-card h3 { color: var(--primary); margin-bottom: 0.5rem; font-size: 1.35em; }
.drill-card p, .meal-card p, .blog-post-card p, .product-card p { font-size: 1em; color: #555; margin-bottom: 0.5em; }

/* --- PRICE TAG --- */
.price-tag { font-weight: 800; color: #2f8f46; font-size: 1.15em; margin: 0.25em 0 0.75em; }

/* --- MODAL --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); justify-content: center; align-items: center; padding: 20px; }
.modal-content {
  background-color: #fefefe; margin: auto; padding: 28px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: relative; max-width: 640px; width: 92%; max-height: 90vh; overflow-y: auto; animation: slideIn 0.3s ease-out; display: flex; flex-direction: column;
}
@keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.close-button { color: #aaa; position: absolute; top: 15px; right: 20px; font-size: 30px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; }
.close-button:hover, .close-button:focus { color: #333; }
.modal-content h3 { color: var(--primary); margin-bottom: 0.8em; font-size: 1.6em; text-align: center; }
.modal-content p { margin-bottom: 1em; color: #555; }
.modal-content h4 { color: var(--text); margin-top: 1.2em; margin-bottom: 0.6em; font-size: 1.15em; }
.modal-ingredients, .modal-instructions { list-style: none; padding-left: 0; margin-bottom: 1em; }
.modal-ingredients li, .modal-instructions li { margin-bottom: 0.5em; padding-left: 1.5em; position: relative; }
.modal-ingredients li::before, .modal-instructions li::before { content: '•'; color: var(--primary); position: absolute; left: 0; }
.modal-image { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 1.1em; box-shadow: 0 2px 10px var(--shadow-light); }
.guidance-box { background-color: var(--accent); padding: 1rem; border-radius: 8px; margin-top: 1rem; }

/* --- VIDEO EMBED --- */
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 1em; border-radius: 8px; box-shadow: 0 2px 10px var(--shadow-light); }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* --- CART DRAWER --- */
.cart-drawer {
  position: fixed; right: -420px; top: 0; height: 100vh; width: 360px; background: #fff; box-shadow: -10px 0 30px rgba(0,0,0,0.15); padding: 1rem;
  transition: right 0.3s ease; z-index: 1200; display: flex; flex-direction: column;
}
.cart-drawer.open { right: 0; }
.cart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cart-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee; }
.cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.cart-item-title { font-weight: 700; }
.qty-controls { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.qty-btn { border-radius: 8px; padding: 0.25rem 0.6rem; border: 1px solid #ccc; background: #f7f7f7; }
.cart-footer { margin-top: auto; }
.cart-total { font-weight: 800; font-size: 1.2rem; margin-bottom: 0.5rem; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .container { padding: 1rem; }
  .form-container { padding: 1.25rem; }
  h1 { font-size: 2.4em; }
  h2 { font-size: 1.8em; }
  .button-group { flex-direction: column; gap: 0.8rem; }
  button { width: 100%; }
  .cart-drawer { width: 90vw; }
}
@media (max-width: 480px) {
  .modal-content { width: 95%; padding: 1rem; }
  .close-button { font-size: 26px; }
}