:root {
  --primary: #f75f34;
  --secondary: #5a4d3d;
  --bg: #fbf6f0;
  --card-bg: #fff;
  --rounded: 16px;
  --shadow: 0 4px 18px rgba(60,0,0,0.09);
}
body {
  background: var(--bg);
  margin: 0;
  font-family: 'Segoe UI', 'Montserrat', sans-serif;
  color: var(--secondary);
}
.navbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 6vw; background: var(--card-bg); box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 10;
}
.logo { font-size: 2rem; font-weight: bold; color: var(--primary);}
.nav-links { display:flex; gap:2vw; list-style:none; }
.nav-links li a { text-decoration:none; color:var(--secondary); font-weight:500; transition:color .2s;}
.nav-links li a:hover { color:var(--primary);}
.auth-buttons { display:flex; gap:1vw;}
.signup-btn, .login-btn {
  padding:8px 22px; border-radius:20px; border:none;
  background:var(--primary); color:#fff; font-weight:600; margin-left:8px; cursor:pointer;
  box-shadow:0 2px 6px #fff4; transition:transform .12s;
}
.login-btn { background: var(--secondary);}
.signup-btn:hover, .login-btn:hover { transform:translateY(-2px) scale(1.04);}

.container {
  max-width: 560px; margin: 2rem auto; background: var(--card-bg);
  border-radius: var(--rounded); box-shadow: var(--shadow);
  padding: 2.4rem 2rem 2rem 2rem;
}
.meal-details {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; margin-bottom: 1.8rem;
}
.meal-img {
  width: 260px; height: 160px; object-fit: cover; border-radius: var(--rounded); box-shadow:0 2px 10px #ffd98028; margin-bottom: 1.1rem;
}
.meal-title { font-size:2rem; font-weight:800; margin-bottom:.3rem; color: var(--primary);}
.meal-desc { margin-bottom: 1rem; color: #63513c;}
.plan-meta { color: #97783b; margin-bottom: .6rem;font-weight:500;}
.price-row span {
  background: #f3e2c6; border-radius: 8px; color: var(--secondary);
  font-weight: bold; font-size: 1.1rem; padding: 7px 16px; margin: 0 8px;
  box-shadow:0 1px 6px #fff7;
}
.plan-choice, .address-confirm, .payment-method, .confirm-message {
  margin: 1.5rem auto; max-width: 420px; background: #fffefb;
  box-shadow: 0 4px 16px #f75e342a; border-radius: 14px;
  padding: 1.4rem 1rem 1.4rem 1rem;
  transition: box-shadow .17s;
}
.plan-options { display: flex; gap: 1.9rem; justify-content: center; margin: 1rem 0;}
.plan-options label {
  display: flex; align-items:center; gap:7px; background: #fbe2da;
  border-radius: 10px; padding: 11px 30px;
  cursor:pointer; font-weight:600; color: var(--secondary); font-size:1.04rem; box-shadow:0 1px 3px #f75f3421;
}
input[type="radio"] { accent-color: var(--primary);}
.cta-btn {
  display: block; width: 100%; margin: 1.2rem auto 0 auto;
  padding: 13px 0; background: var(--primary); color: #fff; border: none;
  border-radius: 24px; font-size: 1.09rem; font-weight: bold; cursor:pointer;
  box-shadow: 0 5px 18px #fb844444;
  transition: background .18s, transform .12s;
}
.cta-btn:disabled { background: #f7b18e; cursor:not-allowed;}
.cta-btn:hover:not(:disabled) { background: var(--secondary);}
.mini-btn {
  background: #ffe3c0; color: var(--primary);
  border: none; border-radius: 8px; padding:4px 14px; margin-left:12px;
  font-size:.93rem; font-weight:600; cursor:pointer;
}
.payments { display: flex; flex-direction: column; gap: 1.3rem; margin-bottom: 1rem;}
.payments label {
  display: flex; align-items:center; gap:9px; background:#e2dae7;
  border-radius: 10px; padding: 11px 17px; cursor:pointer; font-size:1.01rem;
}
.confirm-message { text-align: center;}

@media (max-width:640px){
  .container { padding: 1rem 0.2rem;}
  .meal-img { width: 95vw; max-width: 99%; }
}