/* ===========================
   Foodprev – UI theme (clean)
   =========================== */

/* ---- CSS Variables ---- */
:root{
  --container:1200px;
  --radius:16px;
  --radius-lg:20px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --shadow-soft:0 4px 14px rgba(0,0,0,.05);

  --color-primary:#1E7D4F;
  --color-accent:#F0A500;
  --color-dark:#0F172A;
  --color-bg:#F8FAFB;
  --color-muted:#E5E7EB;

  --text:#111827;
  --text-muted:#6B7280;
}

/* ---- Base & Typography ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:#fff;
}
h1,h2,h3{color:var(--color-dark);line-height:1.15;margin:0 0 .5rem}
h1{font-size:42px}
h2{font-size:28px}
h3{font-size:18px}
p{margin:.5rem 0 1rem}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:12px}

/* ---- Layout ---- */
.container{max-width:var(--container);margin:0 auto;padding:0 16px}

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:#fff;border-bottom:1px solid #eee;
  backdrop-filter:saturate(140%) blur(6px);
}
.header-inner{display:flex;align-items:center;gap:16px;min-height:72px}
.logo a{font-weight:800;font-size:20px;color:var(--color-dark);text-decoration:none}
.primary-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.primary-nav a{color:#334155;font-weight:600}
.primary-nav a:hover{color:var(--color-primary)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border:1px solid #ddd;border-radius:12px;
  text-decoration:none;color:#111;background:#fff;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.btn:focus-visible{outline:3px solid color-mix(in srgb, var(--color-primary) 40%, transparent);outline-offset:2px}
.btn.primary{
  background:var(--color-primary);border-color:var(--color-primary);color:#fff;
  box-shadow:0 6px 16px rgba(30,125,79,.18);
}
.btn.primary:hover{box-shadow:0 10px 26px rgba(30,125,79,.22)}
.btn.small{padding:8px 12px;font-size:14px;border-radius:10px}

/* ---- Hero ---- */
.hero{
  padding:56px 0;
  background:linear-gradient(180deg, #F0FFF7 0%, #FFFFFF 100%);
  border-bottom:1px solid #eee;
}
.hero h1{font-size:44px;margin:0 0 8px}
.subtitle{color:#475569;margin:0 0 22px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.hero .hero-art img{width:100%;height:auto;display:block}

/* ---- Search bar ---- */
.search-bar{
  display:flex;gap:10px;flex-wrap:wrap;
  background:#fff;border:1px solid #e5e7eb;padding:10px;
  border-radius:14px;box-shadow:var(--shadow-soft)
}
.search-bar input,
.search-bar select{
  padding:12px;border:1px solid #e5e7eb;border-radius:10px;
  min-width:180px;flex:1;font-size:14px;background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-bar input:focus,
.search-bar select:focus{
  border-color:color-mix(in srgb, var(--color-primary) 60%, #e5e7eb);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
  outline:0;
}
.search-bar button{border-radius:10px}

/* ---- Featured grid & cards ---- */
.featured{padding:36px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{
  border:1px solid #eee;border-radius:var(--radius-lg);padding:12px;background:#fff;
  box-shadow:var(--shadow-soft);transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e4e4e7}
.card h3{margin:10px 0 6px}
.card .meta{display:flex;gap:10px;flex-wrap:wrap;color:#556;font-size:13px;margin-bottom:8px}
.ph-img{background:linear-gradient(135deg,#f3f4f6,#e5e7eb);height:160px;border-radius:12px}

/* ---- Badges / Chips ---- */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;font-size:12px;
  border:1px solid var(--color-muted);color:#334155;background:#fff
}
.badge.accent{background:var(--color-accent);border-color:var(--color-accent);color:#111}
.badge.soft{background:#F3F4F6;border-color:#E5E7EB;color:#374151}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#EEF6F1;color:#14532d;border:1px solid #d1fae5;
  border-radius:999px;padding:6px 10px;font-size:12px
}

/* ---- Sections ---- */
.how-it-works{padding:32px 0;background:#fcfcfd;border-top:1px solid #eee;border-bottom:1px solid #eee}
.steps ol{padding-left:20px}
.cta{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}

/* ---- Partners ---- */
.partners{padding:24px 0;border-top:1px solid #eee}
.logo-row{display:flex;gap:28px;flex-wrap:wrap;align-items:center;opacity:.9}
.logo-row img{height:36px;filter:grayscale(1);transition:.2s}
.logo-row img:hover{filter:none;opacity:1}

/* ---- Archive & Filters ---- */
.archive-header{padding:24px 0;border-bottom:1px solid #eee}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.archive-grid{padding:26px 0}
.empty{text-align:center;color:#64748b;margin:32px 0}
.empty img{opacity:.75;margin-bottom:8px}

/* ---- Single Offer ---- */
.single-offer{padding:24px 0}
.single-offer .offer{display:grid;grid-template-columns:1fr 1.1fr;gap:24px}
.ph-img.large{height:300px}
.offer-info h1{margin-top:0}
.contact-box{
  margin-top:16px;border:1px dashed #cbd5e1;border-radius:12px;
  padding:12px;background:#f8fafc
}

/* ---- Footer ---- */
.site-footer{padding:28px 0;border-top:1px solid #eee;background:#fff;color:#64748b}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---- Responsive ---- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .single-offer .offer{grid-template-columns:1fr}
  h1{font-size:36px}
  .search-bar input,.search-bar select{min-width:140px}
}