/* ===== LocalMart premium green theme (loads after style.css and page styles) ===== */

/* Buttons: green, glossy, raised. Every button uses this look. */
html body button,
html body .btn,
html body .save-btn,
html body .buy-btn,
html body .ref-btn,
html body .abtn,
html body .ln-btn,
html body .pack-card,
html body .ptab,
html body .pwa-btn,
html body .pop-btn,
html body .wd-hist-btn,
html body .ref-primary,
html body .inv-btns button,
html body .site-pop-actions .ref-btn {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 40%, #15803d 78%, #14532d 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 10px 22px rgba(21, 128, 61, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-weight: 800 !important;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
html body button:hover,
html body .btn:hover,
html body .save-btn:hover,
html body .buy-btn:hover,
html body .ref-btn:hover,
html body .abtn:hover,
html body .ln-btn:hover,
html body .pack-card:hover,
html body .ptab:hover,
html body .pwa-btn:hover,
html body .pop-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 16px 30px rgba(21, 128, 61, 0.45) !important;
}
html body button:active,
html body .save-btn:active,
html body .buy-btn:active,
html body .ref-btn:active,
html body .btn:active,
html body .ln-btn:active,
html body .pack-card:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28) !important;
}

/* Disabled: plain grey, no shine */
html body button:disabled,
html body .buy-btn.soon,
html body .buy-btn:disabled,
html body .pack-soon {
  background: linear-gradient(135deg, #e2e8f0, #94a3b8) !important;
  color: #334155 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
}

/* Small icon-only buttons stay small and round */
html body button.eye,
html body .eye-abs,
html body .hamburger,
html body .round {
  background: linear-gradient(135deg, #4ade80, #15803d) !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

/* Cards and panels: green border with a soft shine, like the reference */
html body .glass,
html body .prod,
html body .inc-tile,
html body .acct-grid > div,
html body .pricebox,
html body .bank-card,
html body .ref-card,
html body .wd-card,
html body .wd-window,
html body .receive-box > div,
html body .wd-breakdown > div,
html body .smodal-box,
html body .site-pop-box,
html body .pop-card,
html body .qk-card,
html body .plan-stats > div,
html body .pf-item,
html body .menu-item,
html body .pr-card,
html body .pr-stats,
html body .inv-levels,
html body .inv-stats > div,
html body .chg,
html body .mem-c,
html body .plan-c,
html body .ln-card,
html body .acard,
html body .atabs,
html body .bnav,
html body .support-btn,
html body .site-pop-facts > div,
html body .inc-top,
html body .ref-link,
html body .ref-code {
  border: 1px solid rgba(34, 197, 94, 0.32) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(21, 128, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

/* Inputs: green edge with an inner shine */
html body input,
html body textarea,
html body .field,
html body .ln-field,
html body .bs-pass input {
  border: 1px solid rgba(34, 197, 94, 0.45) !important;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html body input:focus,
html body textarea:focus,
html body .field:focus-within,
html body .ln-field:focus-within {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Icon covers: green premium squares with white icons */
html body .pf-ic,
html body .pr-ic,
html body .mem-ic,
html body .mem-c .av,
html body .av,
html body .bs-ic,
html body .lvl-badge,
html body .ln-ic,
html body .field .ico,
html body .plan-c-img,
html body .plan-img {
  background: linear-gradient(135deg, #4ade80 0%, #16a34a 60%, #14532d 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 18px rgba(21, 128, 61, 0.3) !important;
}
html body .plan-c-img img,
html body .plan-img img { background: transparent; }
html body .pf-ic svg,
html body .pr-ic svg,
html body .mem-ic svg,
html body .mem-c .av svg,
html body .av svg,
html body .bs-ic svg,
html body .lvl-badge svg,
html body .ln-ic svg,
html body .field .ico svg,
html body .plan-img svg,
html body .plan-c-img svg,
html body .qk-ic svg {
  stroke: #ffffff !important;
}

/* Quick link tiles: rounded green squares, like the reference */
html body .qk-ic {
  width: 66px !important;
  height: 66px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #86efac 0%, #22c55e 45%, #15803d 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 20px rgba(21, 128, 61, 0.35) !important;
}
html body .qk-card a:hover .qk-ic { transform: translateY(-3px); }

/* Active tabs and pills in green */
html body .atabs a.on::after,
html body .ln-tabs a.on::after { background: linear-gradient(90deg, #4ade80, #15803d) !important; }
html body .ln-tabs a.on,
html body .atabs a.on { color: #14532d !important; }
html body .pill.st-live,
html body .chip-on,
html body .wd-status.paid,
html body .wd-done { color: #14532d !important; }

/* Icons inside the bottom bar */
html body .bnav button.on,
html body .bnav a.on {
  background: linear-gradient(135deg, #4ade80, #15803d) !important;
  color: #ffffff !important;
}


/* Small tiles and list rows: smaller corners so text is never cut */
html body .acct-grid > div,
html body .receive-box > div,
html body .wd-breakdown > div,
html body .plan-stats > div,
html body .inv-stats > div,
html body .site-pop-facts > div,
html body .pr-stats,
html body .pricebox,
html body .wd-window,
html body .ref-link,
html body .ref-code {
  border-radius: 16px !important;
}

/* VIP level rows: plain rounded rows, text clear of the edge */
html body .pr-lvl-row {
  border: 1px solid rgba(34, 197, 94, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  background: #f8fafc !important;
  padding: 12px 14px !important;
  margin: 0 0 8px !important;
}
html body .pr-lvl-row:last-child { margin-bottom: 0 !important; }
html body .pr-lvl-row b { color: #14532d !important; }
html body .pr-lvl-row small { color: #64748b !important; }
html body .chip-on { background: #dcfce7 !important; }
html body .chip-off { background: #e2e8f0 !important; color: #475569 !important; }


/* VIP levels: no row borders. Only a soft green shine line between rows, inside the card border. */
html body .pr-card .pr-lvl {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
html body .pr-card .pr-lvl-row {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0) 0%, rgba(34, 197, 94, 0.55) 50%, rgba(34, 197, 94, 0) 100%) no-repeat bottom / 100% 1px !important;
  padding: 14px 2px !important;
  margin: 0 !important;
}
html body .pr-card .pr-lvl-row:last-child {
  background: none !important;
}
html body .pr-card .chip-off {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  color: #15803d !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}


/* ===== Login and sign-up fields: one clean pill per field ===== */
html body .ln-field {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 58px !important;
  padding: 0 6px 0 6px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}
html body .ln-field input,
html body .ln-field input:focus {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 16px !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
}
html body .ln-field input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
html body .ln-field .ln-ic,
html body .ln-field .ln-cc {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 14px !important;
}
html body .ln-field .ln-cc {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .ln-field .eye {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
html body .ln-field .eye svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #64748b !important;
  opacity: 1 !important;
}
html body .ln-field:focus-within {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15) !important;
}