/* ===============================
   CropSmart — minimal clean CSS
   =============================== */

/* Theme tokens */
:root{
  --text:#0f2e1f;
  --muted:#3b5c48;
  --brand:#166534;
  --accent:#22c55e;   /* brand green */
  --radius:22px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:28px 18px 40px;                 /* horizontal padding = 18px */
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);

  /* light leafy background */
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.35)),
    url("gw_background.jpg") center/cover no-repeat fixed;

  /* Center content by default (index page) */
  display:grid;
  place-items:center;
}

/* When a page has static text sections (like how-to/pp), start from top */
body.page-static{
  padding-top:80px;
  align-items:start;
}

/* Top nav */
.top-nav{
  position:fixed; inset:0 auto auto 0; right:0; top:0;
  z-index:10;
  display:flex; justify-content:center; gap:24px;
  padding:12px 20px;
  background:transparent;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.top-nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600; font-size:15px;
}
.top-nav a:hover{ color:var(--brand) }

/* Card (main container) */
/* 👉 FIX: use width:100% of body’s content box, so body padding never causes a tiny right shift */
.card{
  max-width:980px;
  width:100%;
  margin:36px auto 0;                     /* center in all layouts */
  padding:28px 28px 34px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
}

/* ---------- Index page UI ---------- */

.header{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:10px}
.logo{height:80px; width:auto; object-fit:contain}
.title{margin:6px 0 0; font-size:clamp(26px,3.2vw,34px); font-weight:800; letter-spacing:.2px; text-align:center}
.subtitle{margin:2px 0 18px; color:#6a8b77; text-align:center}

/* Controls */
.controls{display:grid; grid-template-columns:1fr; gap:18px}

/* Hidden file input (real) */
#file{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap; clip-path:inset(50%)}

/* Dropzone */
.dropzone{
  display:grid; place-items:center; text-align:center;
  width:100%; height:240px;
  border:2px dashed #b7cbbf;
  border-radius:16px; background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dropzone:hover{ transform:translateY(-1px); border-color:#99b3a4; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04), 0 6px 16px rgba(2,6,23,.08) }

/* Upload icon (SVG as bg so no extra files) */
.dz-icon{
  width:48px; height:48px; margin:8px auto 12px; color:#6b7280;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10'/%3E%3Cpath d='M8 7l4-4 4 4'/%3E%3Cpath d='M4 21h16a2 2 0 0 0 2-2v-3'/%3E%3Cpath d='M2 16v3a2 2 0 0 0 2 2'/%3E%3C/svg%3E");
}
.dz-title{font-weight:700; color:#0f2e1f; margin-top:2px}
.dz-hint{color:#8b9bb0; font-size:14px}
.dropzone.dragover{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,197,94,.25); background:#f0fff4 }

.file-name{ margin-top:6px; font-size:14px; color:#374151; text-align:center; word-break:break-all }

/* Marketplaces */
.modes{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  padding:16px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:center;
}
.modes strong{ grid-column:1 / -1; margin:0 2px 2px; font-weight:800; color:var(--text) }

.pill{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  width:100%; padding:12px 18px; border-radius:999px;
  border:1.5px solid #a3c46a; background:#fff; color:#0f2e1f; font-weight:800; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.pill input[type="radio"]{ position:absolute; inset:0; opacity:0; pointer-events:none }
.pill:has(input:checked){
  background:linear-gradient(180deg,#4ade80,var(--accent)); border-color:var(--accent); color:#fff;
  box-shadow:0 6px 16px rgba(34,197,94,.20);
}

@media (max-width:560px){ .modes{ grid-template-columns:1fr } }

/* Buttons */
.button-row{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px }
#download{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:220px; padding:14px 18px; border-radius:12px;
  border:1px solid rgba(16,94,52,.18);
  background:linear-gradient(180deg,#4ade80,var(--accent));
  color:#fff; font-weight:800; text-decoration:none;
  box-shadow:0 4px 10px rgba(2,6,23,.12);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  cursor: pointer;
}
#download:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(2,6,23,.18); filter:saturate(1.05) }
#summary-btn{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:220px; padding:14px 18px; border-radius:12px;
  border:1px solid rgba(16,94,52,.18);
  background:linear-gradient(180deg,#4ade80,var(--accent));
  color:#fff; font-weight:800; text-decoration:none;
  box-shadow:0 4px 10px rgba(2,6,23,.12);
  font-family: inherit;
  font-size: inherit;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  cursor: pointer;
}

.status{ min-height:22px; margin-top:6px; font-size:14px; color:#5d7a69; text-align:center }

/* Responsive tweaks */
@media (max-width:560px){
  .logo{height:64px}
  .title{font-size:24px}
  .dropzone{height:210px}
  .button-row{flex-direction:column}
  #download,#summary-btn{min-width:100%}
}

/* ---------- Static content pages ---------- */
.static-content{ line-height:1.7; color:var(--muted) }
.static-content h1{ font-size:clamp(24px,3vw,30px); color:var(--text); margin-bottom:12px }
.static-content h2{ font-size:clamp(18px,2.5vw,22px); color:var(--text); margin:28px 0 8px; border-bottom:1px solid rgba(0,0,0,0.08); padding-bottom:6px }
.static-content ul{ padding-left:20px }

/* ---------- How To Use (3 steps inside .card) ---------- */
.card .howto{ padding:10px 0 6px; text-align:center }
.card .howto-hero h1{ margin:0 0 6px; font-size:clamp(26px,3.2vw,34px); font-weight:800; letter-spacing:.2px }
.card .howto-hero p{ margin:0 0 28px; color:#6b7280 }

.card .howto-grid{
  list-style:none; margin:0 auto; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px;
}
@media (max-width:820px){ .card .howto-grid{ grid-template-columns:1fr; gap:28px } }

.card .howto-step{ display:grid; justify-items:center; gap:12px }
.card .howto-icon{
  display:grid; place-items:center; width:92px; height:92px; border-radius:999px;
  background:#f0fdf4; color:var(--accent); border:2px solid var(--accent);
  box-shadow:0 6px 16px rgba(2,6,23,.10);
}
.card .howto-icon svg{ stroke:currentColor }
.card .howto-step h3{ margin:0; max-width:340px; font-size:16px; font-weight:700; color:#374151; line-height:1.35 }

.card .howto-step .howto-pluslink{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--accent); text-decoration:none; border-bottom:2px dashed currentColor; padding-bottom:2px;
}
.card .howto-step .howto-pluslink::before{
  content:"+"; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:999px;
  border:2px solid currentColor; font-size:12px; line-height:1; transform:translateY(-1px);
}

/* Hover delight */
.card .howto-step:hover .howto-icon{
  box-shadow:0 10px 22px rgba(34,197,94,.18);
  transform:translateY(-1px);
}

/* --- Marketplace button alignment fix --- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid #b6d4a9;
  background: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px; /* unify visual height */
}

.pill-icon img,
.pill-icon svg {
  display: block;
  height: 18px;
  width: auto;
  vertical-align: middle;
}

.pill-text {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* normalize icon sizing & baseline */
.pill-icon img,
.pill-icon svg {
  display: block;           /* remove inline gap */
  height: 20px;             /* match your HTML height */
  width: auto;
  vertical-align: middle;
}

/* nudge if needed for optical centering */
.pill .pill-icon { display: inline-flex; align-items: center; }
/* Ensure all pills use consistent icon spacing */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;                /* uniform space between icon and text */
  padding: 8px 24px;
  border-radius: 9999px;
  border: 1px solid #c7eac7;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.pill-icon img {
  height: 20px;
  width: auto;
  display: block;
}

/* Optional: fine-tune vertical alignment */
.pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Active (selected) state */
.pill input[type="radio"]:checked + .pill-icon + .pill-text,
.pill input[type="radio"]:checked + span {
  color: white;
}

/* --- Marketplace Button Alignment Fix v2 --- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* consistent visual spacing */
  width: 100%;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid #b6d4a9;
  background: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; /* fixed icon box width to visually balance */
  height: 22px;
}

.pill-icon img {
  height: 18px;
  width: auto;
  display: block;
  object-fit: contain;
}

.pill-text {
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Selected state */
.pill:has(input:checked) {
  background: linear-gradient(180deg,#4ade80,var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(34,197,94,.20);
}

@media (min-width:561px) and (max-width:1367px){
  .dropzone { height:125px; }
}