/* =========================================
   Better Bins — styles.css (green recycling)
   ========================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Leafy greens */
  --leaf-1:#0bab64;      /* deep leaf */
  --leaf-2:#3bb78f;      /* minty leaf */
  --leaf-3:#76d39e;      /* accent */

  --green-700:#1b5e20;
  --green-600:#2e7d32;
  --green-500:#4caf50;
  --green-400:#81c784;
  --green-300:#a5d6a7;
  --green-200:#c8e6c9;
  --green-50:#f0fdf4;

  --teal-50:#e0f7fa;

  --gray-900:#2b2b2b;
  --gray-800:#424242;
  --gray-700:#4f4f4f;
  --gray-600:#666;
  --gray-500:#7f8c8d;
  --gray-400:#bdbdbd;
  --gray-300:#ddd;
  --gray-200:#e0e0e0;

  --shadow-1:0 0 10px rgba(0,0,0,.05);
  --shadow-2:0 4px 12px rgba(0,0,0,.1);
  --shadow-3:0 6px 16px rgba(0,0,0,.06);
  --shadow-4:0 8px 18px rgba(0,0,0,.08);
}

/* ---------- Reset & base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ max-width:100%; overflow-x:hidden; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

body{
  font-family: Arial, Helvetica, sans-serif;
  line-height:1.6;
  color:#2b2b2b;

  /* Soft eco gradient background */
  background:
    radial-gradient(1200px 800px at 10% -10%, #ffffffcc 0%, #ffffff00 60%),
    linear-gradient(135deg, #ecfdf5 0%, #d1fae5 26%, #e0f7fa 100%);
  background-attachment: fixed;
  min-height:100vh;
}

/* Utility containers */
.container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

/* =========================================
   Header / Hero / Navbar
   ========================================= */
header.hero{
  background:
    linear-gradient(135deg, var(--leaf-1), var(--leaf-2));
  color:#fff;
  padding:2rem 1rem;
  text-align:center;
  box-shadow: var(--shadow-2);
  border-bottom:1px solid rgba(255,255,255,.18);
  position: relative;
  z-index: 1;
}

/* gentle highlight sheen */
header.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 300px at 50% -20%, rgba(255,255,255,.22), transparent 60%);
  pointer-events:none;
}

.logo-title{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff;
}
.logo{ height:35px; width:auto; object-fit:contain; }

.navbar{
  display:flex; justify-content:space-between; align-items:center;
  max-width:1200px; margin:0 auto;
  position: relative; z-index: 2;
  gap:1rem;
}

.nav-links{
  list-style:none; display:flex; gap:1.25rem; align-items:center;
  margin:0; padding:0;
}
.nav-links li{ position:relative; }

.navbar a{
  color:#fff; text-decoration:none; font-weight:bold;
  letter-spacing:.2px;
}

/* Toggle looks like a link */
.dropdown-toggle{
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  padding: .55rem .6rem;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none; appearance: none;
  box-shadow: none !important;
  border-radius: 10px;
  transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
.dropdown-toggle:hover,
.dropdown.open .dropdown-toggle,
.dropdown-toggle:focus-visible{
  background: rgba(255,255,255,.16);
  outline: 2px solid #e6fffa;
  outline-offset: 3px;
}

/* Dropdown panel */
.dropdown-menu{
  position:absolute; top:100%; left:0;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  padding:.5rem 0;
  min-width:220px;
  overflow:hidden;
  z-index: 9999;
  display:none;
}

/* Open states: hover and JS (.open) */
.dropdown:hover .dropdown-menu{ display:block; }
.dropdown.open .dropdown-menu{ display:block; }

/* Dropdown items */
.dropdown-menu li a{
  display:block; padding:.65rem 1rem;
  color:#2b2b2b;
  background: transparent;
  text-decoration:none; border-radius:0;
  transition: background .12s linear, color .12s linear, padding-left .12s linear;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible{
  background: linear-gradient(135deg, var(--leaf-2), var(--leaf-3));
  color:#fff;
  padding-left:1.15rem;
}

/* Intro in hero */
.intro h2{
  margin-top:1rem;
  font-size:clamp(1.6rem, 2.5vw + 1rem, 2.4rem);
  letter-spacing:.3px;
}

/* Primary CTA */
.btn-primary{
  display:inline-block; background:#fff; color:var(--green-700);
  padding:.75rem 1.5rem; border-radius:10px; margin-top:1rem;
  font-weight:700; text-decoration:none;
  box-shadow:0 6px 18px rgba(76,175,80,.22);
  transition: box-shadow .15s ease, transform .15s ease, color .15s ease;
}
.btn-primary:hover{ box-shadow:0 10px 24px rgba(59,183,143,.28); transform: translateY(-1px); color:#0f5132; }

/* =========================================
   Content Blocks
   ========================================= */
.info-section,
.bin-description,
.dolly-section{
  padding:2rem 1rem;
  max-width:1000px;
  margin:2rem auto;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:14px;
  box-shadow: var(--shadow-1);
}

.info-content,
.bin-content,
.dolly-content{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2rem;
}

.info-image,
.bin-image,
.dolly-image{
  flex:1 1 350px; max-width:420px; border-radius:14px; object-fit:cover; box-shadow:0 0 8px rgba(0,0,0,.08);
}

.info-text,
.bin-text,
.dolly-text{
  flex:1 1 360px; text-align:left;
  font-size:1.08rem; line-height:1.8; color:#2b2b2b;
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf9 100%);
  padding:1.5rem; border-radius:14px; border:1px solid #d8f0df; box-shadow:0 0 6px rgba(0,0,0,.04);
}
.info-text p, .bin-text p, .dolly-text p{ margin-bottom:1rem; }

.section{ padding:2rem 1rem; max-width:1000px; margin:0 auto; }
.section h2{ font-size:1.85rem; margin-bottom:1rem; color:var(--green-700); }

/* Pricing */
.pricing-table{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.price{
  flex:1 1 200px; background:#e8f5e9; padding:1rem; border:1px solid var(--green-400);
  border-radius:12px; text-align:center;
}

/* =========================================
   Product Sections
   ========================================= */
.product-features,
.product-feature-reverse,
.product-section{
  display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:center;
  padding:3rem 1rem; max-width:1100px; margin:0 auto;
}
.product-section{ max-width:1200px; border-bottom:1px solid var(--gray-200); }
.product-section.reverse{ flex-direction:row-reverse; }

.product-images,
.product-image-group{
  flex:1 1 320px; display:flex; flex-direction:column; gap:1rem; align-items:center;
}
.product-image,
.product-showcase-img{
  width:100%; max-width:360px; border-radius:14px; object-fit:cover; box-shadow:0 0 8px rgba(0,0,0,.08);
}

.product-text,
.product-feature-reverse .product-text,
.product-text-block{
  flex:2 1 600px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf9 100%);
  padding:2rem; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.04);
  border:1px solid #d8f0df;
}
.product-feature-reverse .product-text{ background:linear-gradient(180deg, #ffffff 0%, #eefaf1 100%); }
.product-text-block{ flex:1 1 520px; padding:1.25rem; }

.product-text h2,
.product-text-block h2{ color:var(--green-700); font-size:2rem; margin-bottom:1rem; letter-spacing:.2px; }
.product-text h3,
.product-text-block h3{ margin-top:2rem; color:#2e7d32; font-size:1.5rem; }
.product-text p,
.product-text-block p{ margin-top:.75rem; line-height:1.75; }

.product-text-box{
  background: linear-gradient(to bottom right, #f4fff9, #e9f7ee);
  padding:2rem; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.04);
  border:2px solid #d8f0df;
}

/* =========================================
   How It Works / Steps
   ========================================= */
.how-it-works{ text-align:center; }
.how-it-works h2{ font-size:2rem; color:var(--green-700); letter-spacing:.2px; }
.how-subtitle{ margin-top:.5rem; color:var(--gray-700); font-size:1.05rem; }

.steps{
  display:grid; grid-template-columns:repeat(4, minmax(200px, 1fr));
  gap:1.25rem; margin-top:1.25rem;
}
@media (max-width:1024px){ .steps{ grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width:560px){ .steps{ grid-template-columns: 1fr; } }

.step{
  position:relative;
  background: linear-gradient(180deg, #fff 0%, #f7fcf9 100%);
  border:1px solid #d9ead7; border-radius:14px;
  padding:1.25rem 1rem 1.5rem;
  box-shadow: var(--shadow-3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.step:hover{ transform: translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.08); border-color:#a5d6a7; }

.step-badge{
  position:absolute; top:-12px; left:-12px; width:38px; height:38px; border-radius:50%;
  background: linear-gradient(135deg, var(--leaf-2), var(--leaf-3));
  color:#fff; display:grid; place-items:center; font-weight:700;
  box-shadow:0 6px 14px rgba(59,183,143,.28);
  border:2px solid #e8f5e9;
}

.step-img{
  width:100%; max-width:220px; height:auto; border-radius:12px;
  margin:.25rem auto .75rem; display:block;
  box-shadow:0 3px 10px rgba(0,0,0,.06); object-fit:cover;
}

.step h3{ font-size:1.15rem; color:var(--green-700); margin:.25rem 0 .35rem; }
.step p{ font-size:.98rem; line-height:1.65; color:var(--gray-800); padding:0 .25rem; }

/* =========================================
   Booking Calendar
   ========================================= */
.calendar-wrapper{
  background:#fff; border-radius:14px; padding:1.5rem 2rem;
  box-shadow: var(--shadow-2); max-width:600px; margin:2rem auto; overflow:hidden;
}
.calendar-header{
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(90deg, var(--green-50), #ecfdf5);
  padding:1rem; font-size:1.2rem; font-weight:700; color:var(--green-700);
  border:1px solid #d8f0df; border-radius:10px;
}
.calendar-header button{
  background:none; border:none; font-size:1.5rem; color:var(--green-700);
  cursor:pointer; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, color .2s ease;
}
.calendar-header button:hover{ color:#0f5132; transform: scale(1.05); }
#calendarMonthYear{ flex-grow:1; text-align:center; pointer-events:none; }

.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:0; font-size:1rem; }
.calendar-grid .header,
.calendar-grid .available,
.calendar-grid .past,
.calendar-grid .empty{
  padding:1rem; text-align:center; border:1px solid #fff; font-size:1rem; box-sizing:border-box;
}
.calendar-grid .header{ background:#f1f8e9; font-weight:bold; text-transform:uppercase; color:var(--green-700); border-bottom:1px solid var(--gray-200); }
.calendar-grid .empty{ visibility:hidden; }
.calendar-grid .available{
  background:#e3f2fd; color:#0277bd; font-weight:700; cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.calendar-grid .available:hover{ background:#bbdefb; transform: translateY(-1px); }
.calendar-grid .past{ background:#f5f5f5; color:#aaa; opacity:.6; cursor:not-allowed; }
.calendar-grid .selected{ background:#c8e6c9; color:#1b5e20; border:2px solid #43a047; font-weight:800; }

/* =========================================
   Forms & Notices
   ========================================= */
form{
  display:flex; flex-direction:column; gap:1rem;
  background:#fff; padding:1.5rem; border-radius:12px; border:1px solid #dfeee6;
  box-shadow: var(--shadow-1);
}
form input, form select, form button, form textarea{
  padding:.8rem; font-size:1rem; border:1px solid #cbd5ce; border-radius:10px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
form input:focus, form select:focus, form textarea:focus{
  border-color:#9ae6b4;
  box-shadow: 0 0 0 3px rgba(58, 183, 143, .22);
}
form button{
  background:linear-gradient(135deg, var(--leaf-2), var(--leaf-1)); color:#fff; border:none; cursor:pointer; font-weight:700;
  border-radius:12px;
}
form button:hover{ filter: brightness(1.02); box-shadow:0 8px 18px rgba(59,183,143,.22); }

.notice{
  border:1px solid transparent; border-radius:10px; padding:.7rem .8rem; margin-top:.5rem; font-size:.95rem;
}
.notice.error{ background:#fff5f5; border-color:#f5c2c7; color:#7a1c1f; }
.notice.success{ background:#f3fff7; border-color:#b7ebc6; color:#1f5b2d; }
.field-hint{ display:block; margin-top:.25rem; color:var(--gray-600); font-size:.9rem; }

/* =========================================
   Tables (cart/admin) — make scrollable on mobile
   ========================================= */
table{ width:100%; border-collapse:collapse; }
th, td{ padding:.65rem .55rem; border-bottom:1px solid #eee; vertical-align:middle; }
th{ background:#f1f8e9; color:var(--green-700); text-align:left; position:sticky; top:0; z-index:1; }

@media (max-width:700px){
  table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  thead, tbody, tfoot{ display:table; width:100%; }
}

/* =========================================
   Footer (professional)
   ========================================= */
.site-footer{
  background:#1f1f1f;
  color:#f2f2f2;
  margin-top:2rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer a{ color: var(--green-400); text-decoration: none; }
.site-footer a:hover{ color:#b2dfdb; text-decoration: underline; }

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1rem;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:2rem;
}
@media (max-width: 900px){ .footer-inner{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-inner{ grid-template-columns: 1fr; } }

.footer-col h4{
  font-size:1rem;
  letter-spacing:.2px;
  color:#eaeaea;
  margin-bottom:.75rem;
}
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin:.45rem 0; color:#ddd; }

.footer-brand .brand-name{ font-weight:700; font-size:1.1rem; }
.footer-brand .brand-tag{ margin-top:.5rem; color:#cfcfcf; }

/* Meta strip */
.footer-meta{
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: .9rem 1rem;
  max-width:1200px; margin:0 auto;
}
.footer-meta p{ margin:0; color:#d9d9d9; font-size:.95rem; }
.footer-legal{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.footer-legal a{ color:#e0f7fa; }
.footer-legal a:hover{ color:#ffffff; }

/* =========================================
   Admin Floating Button
   ========================================= */
.admin-fab{
  position: fixed;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(135deg, var(--leaf-1), var(--leaf-2)); color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.16);
  z-index: 10000; opacity:.95;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.admin-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.18);
  opacity:1;
}
.admin-fab:focus-visible{
  outline:3px solid #c7f9e3;
  outline-offset:3px;
}
@media (max-width:480px){
  .admin-fab{ right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); width:40px; height:40px; }
}

/* === Mobile: nav, layout, tables, tap targets === */

/* Hamburger button */
.hamburger{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2);
  cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.hamburger:focus-visible{ outline:3px solid #c7f9e3; outline-offset:3px; }
.hamburger svg{ width:22px; height:22px; }

@media (max-width:960px){
  /* Disable parallax on mobile for performance */
  body{ background-attachment: scroll; }

  .navbar{ flex-wrap:wrap; gap:.5rem; }
  .logo-title{ order:1; width:calc(100% - 52px); justify-content:flex-start; }
  .hamburger{ order:2; display:flex; }

  /* Collapsible nav links */
  .nav-links{
    order:3; width:100%;
    display:none; /* collapsed by default */
    flex-direction:column; align-items:stretch; gap:.35rem;
    background:rgba(255,255,255,.08);
    padding:.6rem; border-radius:12px;
  }
  /* When body gets .nav-open, show menu */
  body.nav-open .nav-links{ display:flex; }

  .nav-links a, .dropdown-toggle{
    background:rgba(255,255,255,.12);
    padding:.75rem .9rem; border-radius:10px;
  }

  /* Dropdown panels become inline blocks */
  .dropdown-menu{
    position:static; display:none; width:100%;
    margin-top:.35rem; border-radius:10px; box-shadow:none;
    border:1px solid rgba(0,0,0,.06);
  }
  .dropdown.open .dropdown-menu{ display:block; }
  .dropdown:hover .dropdown-menu{ display:none; } /* avoid hover on touch */
}

/* Forms & buttons: comfy tap targets */
form input, form select, form textarea, form button,
button, .btn, .checkout-btn{
  min-height:44px;
}
@media (max-width:560px){
  .btn, .checkout-btn, .return-btn{ width:100%; }
}

/* Generic responsive grids */
@media (max-width:720px){
  .grid{ display:grid; grid-template-columns:1fr !important; gap:1rem; }
}

/* Images always shrink to fit */
img, .product-image, .product-showcase-img, .info-image, .bin-image, .dolly-image{
  max-width:100%; height:auto;
}

/* ===== Tables → card view on phones =====
   Add class="stackable-table" to tables you want to convert (cart & admin). */
@media (max-width:700px){
  .stackable-table{ border:0; }
  .stackable-table thead{ display:none; }
  .stackable-table, .stackable-table tbody, .stackable-table tr, .stackable-table td{
    display:block; width:100%;
  }
  .stackable-table tr{
    background:#fff; border:1px solid #e6efe6; border-radius:12px;
    box-shadow: var(--shadow-1);
    padding:.6rem .6rem .2rem; margin-bottom:.8rem;
  }
  .stackable-table td{
    border:0; padding:.45rem .25rem; position:relative;
    display:flex; gap:.5rem; align-items:flex-start;
  }
  .stackable-table td::before{
    content: attr(data-th) ": ";
    flex:0 0 44%;
    color:#2e7d32; font-weight:700; padding-right:.5rem;
    text-wrap:balance;
  }
  .stackable-table td.right{ justify-content:space-between; }
}

/* Keep admin FAB usable on tiny screens / safe areas */
@media (max-width:480px){
  .admin-fab{
    right:max(12px, env(safe-area-inset-right));
    bottom:max(12px, env(safe-area-inset-bottom));
    width:40px; height:40px;
  }
}