/*
 * ATM Design Sync Override
 * Maps HubSpot CMS (all-things-agriculture-project) design to match
 * AllThingsMarketplace frontend (React + Tailwind)
 *
 * Brand: Teal #0FA899 | Accent: Orange #FF9345
 * Fonts: Sora (display) + Manrope (body)
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap");

/* ================================================================
   1. COLOR VARIABLE OVERRIDES
   Map CMS earthy green/beige palette → ATM teal/orange palette
   ================================================================ */
:root {
  /* Green → Teal (Brand) */
  --color-green-50:  #E7FAF8;
  --color-green-100: #C8F3EF;
  --color-green-200: #99E6DC;
  --color-green-300: #65D5C7;
  --color-green-400: #34C2B3;
  --color-green-500: #0FA899;
  --color-green-600: #0B8478;
  --color-green-700: #08695F;
  --color-green-800: #07544D;
  --color-green-900: #083F3A;

  /* Beige → Light mint/glass backgrounds */
  --color-beige-50:  #f6faf8;
  --color-beige-100: #eef5f3;
  --color-beige-200: #e4efec;
  --color-beige-300: #d6e8e4;
  --color-beige-400: #c8e0db;
  --color-beige-500: #b8d6d0;
  --color-beige-600: #a9ccc5;
  --color-beige-700: #99c2ba;
  --color-beige-800: #89b8af;
  --color-beige-900: #79aea4;

  /* Success → ATM Success Green */
  --color-success-50:  #EAFBF3;
  --color-success-100: #D1F3E2;
  --color-success-200: #97E6B8;
  --color-success-300: #4DD68D;
  --color-success-400: #22B573;
  --color-success-500: #13975E;
  --color-success-600: #0E7A4B;
  --color-success-700: #0A5D39;
  --color-success-800: #074027;
  --color-success-900: #042315;

  /* Warning → ATM Accent Orange */
  --color-warning-50:  #FFF3E8;
  --color-warning-100: #FFE3C9;
  --color-warning-200: #FFD1A6;
  --color-warning-300: #FFB26B;
  --color-warning-400: #FF9345;
  --color-warning-500: #E8772C;
  --color-warning-600: #D06820;
  --color-warning-700: #B85A18;
  --color-warning-800: #9F4C10;
  --color-warning-900: #873E08;

  /* Gray → Cooler slate-tinted grays */
  --color-gray-50:  #f0f4f3;
  --color-gray-100: #dde3e1;
  --color-gray-200: #c4cccb;
  --color-gray-300: #a3aeac;
  --color-gray-400: #7f8c8a;
  --color-gray-500: #64716f;
  --color-gray-600: #4d5957;
  --color-gray-700: #3a4543;
  --color-gray-800: #283230;
  --color-gray-900: #1f2f2d;

  /* ATM Brand Colors (new, for direct use) */
  --atm-brand-500: #0FA899;
  --atm-brand-600: #0B8478;
  --atm-brand-700: #08695F;
  --atm-accent-500: #FF9345;
  --atm-accent-600: #E8772C;
  --atm-success-500: #22B573;
}

/* ================================================================
   2. GLOBAL / BODY STYLES
   ================================================================ */
html {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f6faf8;
  background-image:
    radial-gradient(circle at 8% 0%, rgba(15, 168, 153, 0.1), transparent 42%),
    radial-gradient(circle at 92% 6%, rgba(255, 147, 69, 0.12), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(15, 132, 120, 0.08), transparent 42%),
    linear-gradient(180deg, #f9fcfb 0%, #eef5f3 100%);
  color: #1f2f2d;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: "Sora", "Manrope", sans-serif !important;
}

/* ================================================================
   3. HEADER OVERRIDE
   Match ATM Header: glass frosted, sticky, teal accents
   ================================================================ */
[class*="_siteHeader"] {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(20, 39, 36, 0.08) !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  position: sticky;
  top: 0;
  z-index: 50;
}

[class*="_mainNav"] {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-top: 1px solid rgba(15, 168, 153, 0.12) !important;
}

[class*="_mainNav"] a {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-weight: 500 !important;
  color: #3a4543 !important;
  transition: all 0.2s ease !important;
  border-radius: 9999px;
  padding: 0.4rem 0.8rem !important;
}

[class*="_mainNav"] a:hover {
  color: #0B8478 !important;
  background: rgba(15, 168, 153, 0.1) !important;
}

[class*="_mainNav"] a:after {
  background-color: #0FA899 !important;
}

[class*="_menuToggle"]:hover,
[class*="_menuToggle"][class*="_active"] {
  background: #E7FAF8 !important;
  border-color: #65D5C7 !important;
}

[class*="_menuToggle"][class*="_active"] span {
  background: #08695F !important;
}

/* Mobile nav overlay */
@media (max-width: 768px) {
  [class*="_mainNav"] {
    background: rgba(246, 250, 248, 0.98) !important;
  }
  [class*="_mainNav"] a:hover {
    background: #E7FAF8 !important;
    color: #08695F !important;
    border-left: 4px solid #0FA899 !important;
  }
  [class*="_mainNav"] a:hover:after {
    color: #0FA899 !important;
  }
}

/* ================================================================
   4. BUTTON STYLES
   Match ATM: rounded-full, brand-600, accent-500
   ================================================================ */
button, .hs-button, [type="submit"],
a.cta_button, .hs-cta-node a {
  font-family: "Manrope", system-ui, sans-serif !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

/* Primary buttons → brand teal */
button[class*="primary"], .hs-button.primary,
[type="submit"]:not([class*="secondary"]) {
  background-color: #0B8478 !important;
  color: white !important;
  border: none !important;
}

button[class*="primary"]:hover, .hs-button.primary:hover,
[type="submit"]:not([class*="secondary"]):hover {
  background-color: #08695F !important;
  transform: translateY(-1px);
}

/* Sell/CTA buttons → accent orange */
a[href*="sell"], a[href*="register"],
button[class*="accent"], .hs-button.accent {
  background-color: #FF9345 !important;
  color: white !important;
}

a[href*="sell"]:hover, a[href*="register"]:hover,
button[class*="accent"]:hover {
  background-color: #E8772C !important;
}

/* ================================================================
   5. CARD STYLES
   Match ATM panel-3d and listing-card-3d
   ================================================================ */
.panel-3d,
[class*="card"], [class*="Card"],
[class*="panel"], [class*="Panel"] {
  position: relative;
  border: 1px solid rgba(12, 74, 68, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 251, 249, 0.92));
  box-shadow:
    0 22px 40px rgba(5, 44, 50, 0.16),
    0 8px 18px rgba(7, 57, 62, 0.1);
  border-radius: 1rem;
}

/* 3D light reflection on cards */
.panel-3d::before,
[class*="card"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 38%);
}

/* ================================================================
   6. ATM CUSTOM UTILITY CLASSES
   These classes are used in ATM but not in CMS - add them globally
   ================================================================ */

/* Glass morphism */
.glass {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(20, 39, 36, 0.08);
}

/* Text gradient */
.text-gradient {
  background: linear-gradient(120deg, #0b8478, #0fa899, #ff9345);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mesh background (hero sections) */
.mesh-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(15, 168, 153, 0.22), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(255, 147, 69, 0.2), transparent 38%),
    radial-gradient(circle at 50% 85%, rgba(15, 132, 120, 0.2), transparent 45%),
    linear-gradient(140deg, #0d3f3b 0%, #076359 45%, #0a8a7c 100%);
}

/* Surface card */
.surface-card {
  border: 1px solid rgba(15, 66, 59, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #f6faf9 100%);
  box-shadow: 0 12px 30px rgba(8, 63, 58, 0.08);
}

/* Neo depth shadow */
.neo-depth {
  box-shadow:
    0 18px 36px rgba(8, 63, 58, 0.16),
    0 3px 10px rgba(8, 63, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Listing card 3D effect */
.listing-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.listing-card-3d:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-1.2deg);
  box-shadow:
    0 18px 36px rgba(6, 41, 46, 0.18),
    0 10px 18px rgba(6, 41, 46, 0.1);
}

/* Nav pill */
.nav-pill {
  position: relative;
  border-radius: 9999px;
  padding: 0.4rem 0.8rem;
  transition: all 180ms ease;
}

.nav-pill:hover {
  background: rgba(15, 168, 153, 0.1);
}

.nav-pill-active {
  color: #0b6e64;
  background: linear-gradient(180deg, rgba(15, 168, 153, 0.16), rgba(15, 168, 153, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px rgba(15, 168, 153, 0.2);
}

/* Depth orb (animated floating circles) */
.depth-orb {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  animation: orbit-drift 13s ease-in-out infinite;
}

/* Float chip animation */
.float-chip {
  animation: subtle-bob 4.8s ease-in-out infinite;
}

/* ================================================================
   7. ANIMATIONS
   ================================================================ */
@keyframes fade-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes orbit-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -14px, 0) scale(1.06); }
}
@keyframes subtle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes sheen-pass {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  40% { opacity: 0.15; }
  100% { transform: translateX(230%) skewX(-18deg); opacity: 0; }
}

/* ================================================================
   8. LINK / ANCHOR STYLES
   ================================================================ */
a {
  color: #0B8478;
  transition: color 0.2s ease;
}

a:hover {
  color: #08695F;
}

/* ================================================================
   9. FORM INPUT STYLES
   Match ATM: rounded-lg, brand focus ring
   ================================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
textarea, select {
  font-family: "Manrope", system-ui, sans-serif !important;
  border-radius: 0.5rem !important;
  border: 1px solid #c4cccb !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #34C2B3 !important;
  box-shadow: 0 0 0 3px rgba(15, 168, 153, 0.15) !important;
  outline: none !important;
}

/* ================================================================
   10. FOOTER STYLE ADJUSTMENTS
   ================================================================ */
footer, [class*="footer"], [class*="Footer"] {
  font-family: "Manrope", system-ui, sans-serif !important;
}

footer a:hover, [class*="footer"] a:hover {
  color: #0FA899 !important;
}

/* ================================================================
   11. PRICE / SUCCESS COLOR
   ================================================================ */
[class*="price"], [class*="Price"] {
  color: #22B573 !important;
  font-weight: 700;
}

/* ================================================================
   12. BADGE STYLES (Featured, Category, etc.)
   ================================================================ */
[class*="badge"], [class*="Badge"], .badge {
  border-radius: 9999px;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
}

/* Featured badge → accent orange */
[class*="featured"], [class*="Featured"] {
  background-color: #FF9345 !important;
  color: white !important;
}

/* ================================================================
   13. LOADING SPINNER
   ================================================================ */
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ================================================================
   14. SCROLLBAR STYLING
   ================================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #eef5f3;
}
::-webkit-scrollbar-thumb {
  background: #99E6DC;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0FA899;
}