/* =========================================================
   AgroEx — /agroex/css/site.css
   Unified UX/UI (glass like borza) + existing agx-* + pyo-*
   Clean, mobile-first, NO syntax errors
   Background image (optional): /agroex/images/bg.jpg.png
   ========================================================= */

/* ---------- CSS variables ---------- */
:root{
  --bg: #07140f;
  --mask: rgba(0,0,0,.30);

  --txt: #0f1410;
  --muted: #445045;

  --brand: #1a6f37;
  --brand-2: #155e2f;

  --card: rgba(255,255,255,.94);
  --border: rgba(22, 60, 35, .18);

  --shadow: 0 14px 34px rgba(0,0,0,.14);
  --shadow2: 0 4px 12px rgba(0,0,0,.10);

  --r: 16px;
  --r2: 12px;

  --gap: 12px;
  --max: 1100px;

  --focus: 0 0 0 3px rgba(26,111,55,.20);

  /* glass system (borza-like) */
  --glass-bg: rgba(255,255,255,.76);
  --glass-border: rgba(227,235,230,.85);
  --glass-shadow: 0 14px 40px rgba(15,40,25,.18);
  --glass-blur: blur(8px);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- typography ---------- */
body{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--txt);
}

/* ---------- page background ---------- */
body{
  background:
    linear-gradient(0deg, var(--mask), var(--mask)),
    url("/agroex/images/bg.jpg.png") center/cover fixed no-repeat,
    radial-gradient(900px 520px at 20% 10%, rgba(26,111,55,.22), transparent 60%),
    radial-gradient(900px 520px at 80% 40%, rgba(26,111,55,.14), transparent 55%),
    var(--bg);
}

/* =========================================================
   GLOBAL borza-like layout helpers (use in all pages)
   ========================================================= */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 12px;
}
@media (min-width: 720px){
  .wrap{ padding: 0 16px; }
}

.board{
  margin: 18px auto 22px;
  background: var(--glass-bg);
  border-radius: 22px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: 16px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
@media (min-width: 720px){
  .board{ padding: 18px; }
}

.hero{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  padding: 6px 2px 10px;
  margin-bottom: 12px;
}
.hero h1{
  margin:0;
  font-size: 1.75rem;
  line-height: 1.08;
  font-weight: 900;
  color: #1c7c3a;
  letter-spacing: -.3px;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.hero .sub{
  margin:8px 0 0;
  color:#4f645a;
  font-weight:650;
  line-height:1.35;
  max-width: 900px;
}
.hero-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#eff8f1;
  border:1px solid #cfe8d5;
  font-weight: 900;
  font-size: .85rem;
  color:#1c7c3a;
}

/* Unified form shell */
.form{
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(229,243,233,.85);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items:end;
}
@media (min-width: 980px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

.field label{
  display:block;
  font-size:.78rem;
  font-weight: 900;
  color:#4b6a58;
  margin: 0 0 6px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #cfe8d5;
  background:#fff;
  outline:none;
  font-weight: 800;
  color:#234a33;
  font-size: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.field textarea{ min-height: 100px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  box-shadow: var(--focus);
  border-color: rgba(26,111,55,.35);
}

.hint{
  margin-top: 6px;
  color:#607566;
  font-weight:750;
  font-size: .88rem;
}

/* Buttons (borza-like) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 11px 16px;
  border-radius: 14px;
  background:#2e7d32;
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  border: 2px solid #2e7d32;
  min-height: 44px;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.btn:hover{ text-decoration:none; filter: brightness(1.02); }
.btn:active{ transform: translateY(1px); }
.btn.secondary{
  background:#e9f7ec;
  color:#1c7c3a;
  border-color:#cfe8d5;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Alerts */
.alert{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 850;
  border: 1px solid transparent;
}
.alert.bad{ background:#fde2e1; border-color:#f2c2c0; color:#7a1b1b; }
.alert.ok{ background: rgba(26,111,55,.08); border-color: rgba(26,111,55,.22); color:#0f2b1b; }

/* =========================================================
   borza-like header/nav (optional: use in pages)
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(238,249,242,.92) 0%, rgba(255,255,255,.92) 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(33,145,59,.10);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.header-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand img{ height: 44px; width:auto; display:block; }
.brand span{
  font-size: 22px;
  font-weight: 900;
  color:#1c7c3a;
  letter-spacing: -.4px;
}

.menu-toggle{
  margin-left:auto;
  background:none;
  border:0;
  cursor:pointer;
  font-size: 28px;
  color:#2a8a3a;
  padding: 6px 10px;
  border-radius: 12px;
}
.menu-toggle:hover{ background: rgba(242,251,244,.72); }

.nav{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 0 0 12px;
}
.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-left:auto;
}

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding: .58rem .9rem;
  border-radius: 14px;
  border: 1px solid transparent;
  color:#2a8a3a;
  font-weight: 900;
  white-space: nowrap;
}
.nav a:hover{
  background: rgba(242,251,244,.72);
  border-color: #dcefd9;
  color: var(--brand-2);
}
.nav a.primary{
  background:#2e7d32;
  color:#fff;
  border-color:#2e7d32;
  box-shadow: 0 6px 16px rgba(46,125,50,.18);
}
.nav a.active{
  background:#e9f7ec;
  border-color:#cfe8d5;
  color:#1c7c3a;
}

.lang-switch{
  display:flex;
  gap:8px;
  align-items:center;
}
.lang-switch a{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #cde5d1;
  font-weight: 900;
  font-size: 13px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lang-switch a.active{
  background:#2e7d32;
  color:#fff;
  border-color:#2e7d32;
}

/* Mobile nav behavior */
@media (max-width: 768px){
  .nav{ display:none; padding-bottom:12px; }
  .nav.open{ display:block; }
  .nav-links{ display:grid; grid-template-columns:1fr; gap:10px; margin:10px 0 0; }
  .nav a{ width:100%; white-space:normal; }
  .lang-switch{ margin-top:10px; justify-content:flex-start; }
}

/* =========================================================
   EXISTING: Top bar (kept)
   ========================================================= */
.agx-top{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.74);
  border-bottom: 1px solid var(--border);
}

.agx-top-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.agx-tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
  color: #0f2b1b;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
}

.agx-tab:hover{
  text-decoration:none;
  background: #fff;
}

.agx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  color: #fff;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  box-shadow: var(--shadow2);
  font-weight: 900;
  cursor:pointer;
}

.agx-btn:hover{
  text-decoration:none;
  filter: brightness(1.02);
}

/* =========================================================
   Layout / card (kept)
   ========================================================= */
.agx-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 12px 40px;
}

.agx-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--r) + 6px);
  box-shadow: var(--shadow);
  padding: 16px;
}

@media (min-width: 720px){
  .agx-card{ padding: 18px; }
}

.agx-title{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: .2px;
}

.agx-hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.agx-alert{
  border-radius: var(--r2);
  padding: 10px 12px;
  border: 1px solid var(--border);
  margin: 10px 0;
  font-weight: 700;
}

.agx-alert.ok{
  background: rgba(26,111,55,.08);
  border-color: rgba(26,111,55,.22);
  color: #0f2b1b;
}

.agx-alert.bad{
  background: rgba(200, 40, 40, .08);
  border-color: rgba(200, 40, 40, .22);
  color: #5a0d0d;
}

/* =========================================================
   Form controls (kept)
   ========================================================= */
.agx-form{ margin-top: 12px; }
.agx-field{ margin-bottom: 12px; }

.agx-field label{
  display:block;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
  color: #0f2b1b;
}

.agx-field input[type="text"],
.agx-field input[type="number"],
.agx-field select,
.agx-field textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 11px 12px;
  outline: none;
  background: rgba(255,255,255,.96);
  color: var(--txt);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.agx-field textarea{
  min-height: 120px;
  resize: vertical;
}

.agx-field input:focus,
.agx-field select:focus,
.agx-field textarea:focus{
  box-shadow: var(--focus);
  border-color: rgba(26,111,55,.35);
}

.agx-inline{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #163b27;
}

.agx-inline input{ width: 18px; height: 18px; }

.agx-pick{
  cursor: pointer;
  font-weight: 900;
}

/* =========================================================
   Grid helpers (kept)
   ========================================================= */
.agx-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 820px){
  .agx-grid{ grid-template-columns: 1fr 1fr; }
}

.agx-price .agx-price-row{
  display:grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  align-items: center;
}

/* =========================================================
   Map (kept)
   ========================================================= */
.agx-mapcard{
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: calc(var(--r) + 4px);
  background: rgba(255,255,255,.92);
  overflow: hidden;
}

.agx-maphead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(247,251,249,.9);
  font-weight: 900;
}

.agx-mini{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
  cursor: pointer;
}

.agx-mini:hover{ background: rgba(247,251,249,1); }

.agx-map{ height: 320px; }

@media (max-width: 480px){
  .agx-map{ height: 260px; }
}

/* =========================================================
   Extras / accordions (kept)
   ========================================================= */
.agx-extras{ margin-top: 14px; }

.agx-ex-title{
  font-weight: 1000;
  color: #163b27;
  margin: 10px 0 8px;
  font-size: 18px;
}

.agx-acc{
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin: 10px 0;
  overflow: hidden;
  background: #fff;
}

.agx-acc summary{
  padding: 12px 12px;
  font-weight: 1000;
  cursor: pointer;
  background: rgba(247,251,249,.95);
}

.agx-acc-body{
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px){
  .agx-acc-body{ grid-template-columns: 1fr; }
}

.agx-check{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  color: #163b27;
}

.agx-check input{ width: 18px; height: 18px; }

/* =========================================================
   Photos box (kept)
   ========================================================= */
.agx-photos{
  margin-top: 14px;
  border: 2px dashed rgba(26,111,55,.25);
  border-radius: var(--r);
  padding: 14px;
  background: rgba(248,255,249,.92);
}

/* =========================================================
   Actions (kept)
   ========================================================= */
.agx-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  align-items: center;
}

/* =========================================================
   Bottom sheet picker (kept)
   ========================================================= */
.agx-sheet[hidden]{ display:none; }

.agx-sheet{
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.agx-sheet-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
}

.agx-sheet-panel{
  position:absolute;
  left:0; right:0; bottom:0;
  background: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -20px 60px rgba(0,0,0,.25);
  max-height: 75vh;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

.agx-sheet-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
}

.agx-sheet-title{
  font-weight: 1000;
  color: #163b27;
}

.agx-sheet-body{
  padding: 8px 0;
  overflow: auto;
}

.agx-sheet-item{
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  padding: 14px 14px;
  font-weight: 900;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.agx-sheet-item:hover{
  background: rgba(247,251,249,1);
}

/* =========================================================
   Footer (kept)
   ========================================================= */
.footer{
  margin-top: 40px;
  padding: 16px;
  color: rgba(255,255,255,.88);
  background: rgba(14,35,21,.80);
  text-align:center;
  border-top: 1px solid rgba(32,79,48,.55);
}

/* Small utilities */
.center{ text-align:center; }
.mt8{ margin-top:8px !important; }
.mt12{ margin-top:12px !important; }
.mt16{ margin-top:16px !important; }
.mb8{ margin-bottom:8px !important; }
.mb12{ margin-bottom:12px !important; }

/* ============================
   PYO (Pick-Your-Own) page: pick.php (kept)
   ============================ */
.pyo-page .pyo-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}
.pyo-page .pyo-header-tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:14px 0;
}
.pyo-page .pyo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
  margin:20px 0;
}
.pyo-page .pyo-card{
  background:#fff;
  border:1px solid #e9eef5;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 24px rgba(11,18,32,0.05);
  transition:.15s;
}
.pyo-page .pyo-card:hover{
  box-shadow:0 12px 34px rgba(11,18,32,0.08);
  border-color:#d9e2ef;
}
.pyo-page .pyo-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:10px;
}
.pyo-page .pyo-title{
  font-weight:800;
  font-size:1.05rem;
  color:#0b1220;
  margin:0 0 6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.pyo-page .pyo-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:#e8f3ff;
  color:#075985;
}
.pyo-page .pyo-meta{
  font-size:13px;
  color:#555;
  margin-bottom:6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pyo-page .pyo-pill{
  background:#f3f6fb;
  color:#334155;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
}
.pyo-page .pyo-price{
  font-size:18px;
  font-weight:900;
  margin-top:8px;
  color:#0b1220;
}
.pyo-page .pyo-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.pyo-page .pyo-minibtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#0ea5e9;
  color:#fff;
  border:0;
  cursor:pointer;
  border-radius:10px;
  padding:8px 12px;
  font-weight:700;
  text-decoration:none;
}
.pyo-page .pyo-minibtn.pyo-ghost{
  background:#eef6ff;
  color:#075985;
}
.pyo-page .pyo-empty{
  background:#fff;
  border:1px dashed #ccc;
  padding:20px;
  text-align:center;
  border-radius:12px;
}
.pyo-page .pyo-error{
  background:#fde2e1;
  color:#7a1b1b;
  padding:10px;
  border-radius:10px;
}

/* Floating CTA buttons (bottom-right) */
.pyo-page .pyo-ctas{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:50;
}
.pyo-page .pyo-ctas a{ text-decoration:none; }

/* buttons (global legacy) */
.btn-agx{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  background:#16a34a;
  color:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  background:#f1f5f9;
  color:#0f172a;
  border:1px solid #e2e8f0;
}
/* =========================
   Glass style – Nearby farms (Index-like)
   ========================= */

.nearby-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:14px;
}

.nearby-board{
  background: rgba(255,255,255,.76);
  border:1px solid rgba(227,235,230,.9);
  border-radius:22px;
  box-shadow:
    0 14px 40px rgba(15,40,25,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  padding:14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* header strip */
.nearby-top{
  background: linear-gradient(
    135deg,
    rgba(223,244,227,.65),
    rgba(247,255,244,.55)
  );
  border:1px solid rgba(229,243,233,.9);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 10px 24px rgba(11,18,32,.08);
  margin-bottom:12px;
}

/* panels */
.nearby-panel{
  background: rgba(255,255,255,.70);
  border:1px solid rgba(229,241,232,.9);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(11,18,32,.08);
  backdrop-filter: blur(10px);
}

/* map */
#nearby-map{
  width:100%;
  height:520px;
  background:rgba(220,239,217,.9);
}

/* list */
.nearby-list{
  padding:12px;
  max-height:520px;
  overflow:auto;
}

.nearby-item{
  background: linear-gradient(
    120deg,
    rgba(231,246,223,.65) 65%,
    rgba(255,251,234,.6) 100%
  );
  border:1px solid rgba(230,242,234,.9);
  border-radius:18px;
  padding:12px 14px;
  margin-bottom:12px;
  box-shadow:0 10px 22px rgba(11,18,32,.08);
}

.nearby-item b{
  color:#1c7c3a;
  font-weight:1000;
}

.nearby-item small{
  color:#2a4730;
  font-weight:850;
  line-height:1.35;
}

/* buttons */
.nearby-btn{
  background: linear-gradient(135deg,#1b5e20,#2e7d32);
  border:2px solid #2e7d32;
  color:#fff;
  font-weight:1000;
  box-shadow:0 10px 22px rgba(46,125,50,.25);
}

.nearby-btn.ghost{
  background: rgba(255,255,255,.72);
  color:#2e7d32;
  border-color:rgba(46,125,50,.25);
  box-shadow:none;
}

/* mobile */
@media (max-width:980px){
  #nearby-map{ height:420px; }
}
/* Fix: зеленият цвят на <a> да не убива текста в бутона */
a.btn, a.btn:visited { color: #fff; }
a.btn:hover, a.btn:active { color: #fff; }

a.mode-switch, a.mode-switch:visited { color: #fff !important; }
a.mode-switch:hover, a.mode-switch:active { color: #fff !important; }
.btn.secondary {
    color: #fff !important;
}