/* === Wheelie Fresh Theme v12 (clean + consistent) === */
:root{
  --teal:#0d9488;
  --primary: var(--teal);
  --green:#18a05f;
  --ink:#0f172a;
  --muted:#475569;
  --bg1:#e6f5f3;
  --bg2:#fef3df;
  --bg3:#fff7d9;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow-soft: 0 4px 14px rgba(2,6,23,.06);
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;
  --pad: 18px;
  --max: 1040px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 40%, var(--bg3) 100%);
  color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height:1.65;
}

a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

.skip{
  position:absolute; left:-999px; top:8px;
  background:#fff; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
}
.skip:focus{left:8px; z-index:999}

/* Topbar */
.topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  background: rgba(13,148,136,.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color:#fff;
}

.brand{display:flex; align-items:center; gap:10px;}
.brand-link{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
.brand--solo{min-width:0;}
.logo{display:flex; align-items:center; justify-content:center}
.site-logo{height:48px; width:auto; display:block}
.brand-name{font-weight:900; letter-spacing:.02em; line-height:1}
.brand-area{opacity:.9; font-size:.92rem; line-height:1.1}

.nav{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end;
}
.nav a{
  color:#fff; text-decoration:none;
  padding:8px 10px; border-radius:999px;
  transition: background .15s ease, opacity .15s ease;
}
.nav a:hover{background: rgba(255,255,255,.16); text-decoration:none}
.nav a:focus{outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.25)}

@media (max-width: 760px){
  .site-logo{height:44px}
  .nav{gap:8px}
  .nav a{padding:7px 9px; font-size:.95rem}
}

/* Hero */
.hero{
  background: linear-gradient(180deg, #d9f3f0 0%, #fff9e8 100%);
  padding: 72px 16px 56px;
  text-align:center;
}
.hero h1{
  margin:0;
  color:var(--teal);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  letter-spacing:.02em;
}
.hero .subtitle{
  margin:.4rem auto 0;
  max-width: 56ch;
  color: #1f3b3a;
  font-size: 1.05rem;
}
.badges{
  list-style:none; padding:0; margin:14px 0 18px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.badges li{
  background: rgba(255,255,255,.95);
  border:1px solid rgba(13,148,136,.12);
  color:#0b5f58;
  padding:6px 10px;
  border-radius:999px;
  box-shadow: 0 2px 10px rgba(2,6,23,.05);
}
.cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* Layout */
.section{
  max-width: var(--max);
  margin: 1.25rem auto;
  padding: 2.4rem 1.25rem;

  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(2,6,23,.06);
  border-radius: var(--r-lg);
  box-shadow: none;
}

/* Section headings (centred, including underline) */
.section h2{
  text-align:center;
  margin: 0 auto 1.2rem;
  color: var(--teal);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  letter-spacing:.08em;
  text-transform: uppercase;
  position: relative;
}
.section h2::after{
  content:"";
  display:block;
  width:88px; height:3px;
  background: linear-gradient(90deg,var(--teal) 0%, #34d399 100%);
  margin: 10px auto 0;
  border-radius:999px;
}

.lead, .note{
  color: #1f2937;
  max-width: 78ch;
  margin-left:auto; margin-right:auto;
}
.tiny{color:#666; font-size:.92rem}
.muted{color:var(--muted)}

/* Cards & grids */
.cards{display:grid; gap:12px}
@media (min-width: 840px){ .cards{grid-template-columns: repeat(3, 1fr);} }
.card{
  background: var(--card);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r-md);
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(2,6,23,.05);
}
.cards.compact{grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content:center; justify-items:center}
.cards.compact .card{width:100%; max-width:320px}

/* Buttons */
.btn-primary, .wf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  border: 0;
  background: var(--teal);
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 10px 18px rgba(13,148,136,.18);
  transition: transform .08s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary:hover, .wf-btn:hover{filter: brightness(.95); text-decoration:none}
.btn-primary:active, .wf-btn:active{transform: translateY(1px)}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 17px;
  border-radius: 14px;
  border: 1px solid var(--teal);
  background: rgba(255,255,255,.95);
  color: var(--teal);
  font-weight: 900;
  text-decoration:none;
  transition: background .15s ease, transform .08s ease;
}
.btn-outline:hover{background:#fff; text-decoration:none}
.btn-outline:active{transform: translateY(1px)}

/* Hero CTA polish */
.btn-hero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  padding:.95rem 1.35rem;
  border-radius:999px;

  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;

  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-hero:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  filter: brightness(1.02);
}
.btn-hero:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.btn-hero:focus-visible{
  outline: 3px solid rgba(13,148,136,.35);
  outline-offset: 3px;
}
.btn-arrow{
  display:inline-grid;
  place-items:center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  line-height:1;
}

/* =========================
   Pricing dropdown (details/summary) – sleek "tab" feel
   ========================= */

details{
  border:1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
details + details{ margin-top: 14px; }

summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--ink);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(13,148,136,.06);
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"▾";
  color: var(--teal);
  font-size: 1.05rem;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .18s ease;
}
details[open] > summary::after{ transform: rotate(180deg) translateY(1px); }

details > *:not(summary){
  padding: 10px 16px 16px 16px;
}

/* Tighten pricing lists */
#pricing ul{ margin: 10px 0 0; padding-left: 18px; }
#pricing li{ margin: 8px 0; }
#pricing li.tiny{ margin-top: 10px; }

/* Make the pricing cards stay centered regardless of content */
#pricing .card{ margin-left:auto; margin-right:auto; }

/* Pricing note under dropdown cards */
.prepay-note{
  max-width: 900px;
  margin: 1.25rem auto 0;
  text-align: center;
  line-height: 1.5;
}

/* Subscription prepay inner cards */
.subprepay-container{
  display:flex;
  gap:24px;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  margin-top:10px;
}
.sub-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px 18px;
  flex: 1 1 260px;
  max-width: 320px;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
.sub-card h4{margin:0 0 8px 0; text-align:center}

/* Price emphasis (used both in pricing + sub-cards) */
.plan-price{
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--teal);
}
.sub-card .plan-price{
  position:absolute;
  right:18px;
  bottom:14px;
  font-size: 1.35rem;
  font-weight: 950;
}

@media (max-width: 700px){ .subprepay-container{flex-wrap:wrap;} }

/* =========================
   Booking dropdown header (no green bubble)
   ========================= */

.booking-dropdown{
  max-width: var(--max);
  margin: 0 auto;
}

.booking-summary{
  list-style:none;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;

  padding: 1.25rem 1rem;
  background: transparent;
  border: none;
  box-shadow: none;

  text-align:center;
}

.booking-summary::-webkit-details-marker{ display:none; }

.booking-title{
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  text-align:center;
}
.booking-subtitle{
  margin:0;
  font-size: .98rem;
  font-weight: 600;
  color: #1f2937;
  text-align:center;
}
.booking-summary::after{
  content:"▾";
  margin-top:.35rem;
  color: var(--teal);
  font-size: 1.05rem;
  transition: transform .18s ease;
}
.booking-dropdown[open] > .booking-summary::after{
  transform: rotate(180deg);
}

/* Centre intro lines under booking header */
.booking-dropdown .tiny{ text-align:center; }

/* =========================
   Forms (shared)
   ========================= */

.wf-form{display:grid; gap:16px; margin-top: 14px;}
.wf-field label{display:block; font-weight:700; font-size:14px}
.wf-row{display:grid; gap:12px; grid-template-columns: 1fr 1fr;}
.wf-row-3{display:grid; gap:12px; grid-template-columns: 2fr 1fr 1fr;}
@media (max-width:720px){ .wf-row, .wf-row-3{grid-template-columns: 1fr;} }

.wf-form input,
.wf-form select,
.wf-form textarea{
  width:100%;
  min-height:48px;
  padding: 12px 12px;
  border:1px solid var(--border);
  border-radius: 12px;
  background:#fff;
  font:inherit;
  outline:none;
  box-shadow: 0 1px 0 rgba(2,6,23,.02);
}
.wf-form textarea{min-height:110px; resize:vertical}
.wf-form input:focus,
.wf-form select:focus,
.wf-form textarea:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.16);
}
.wf-fieldset{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 12px;
}
.wf-fieldset > legend{
  padding: 0 6px;
  font-weight: 900;
}
.wf-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:700;
}
.wf-check input[type="checkbox"]{margin-top:3px}
.wf-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top: 2px;}

select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%230d9488' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:22px;
  padding-right:40px;
}

/* =========================
   Lease + Community alignment
   ========================= */

#lease .card{
  text-align:center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

#community .community-center{max-width: 900px; margin: 0 auto}
#community .card{max-width: 900px; margin: .75rem auto}
.community-center{text-align:center}

/* Feature list (readable, but centred block) */
.feature-list{
  list-style: none;
  padding: 0;
  margin: 1.25rem auto 0;
  max-width: 520px;
}
.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  text-align:left;
}
.feature-list li::before{
  content: "✓";
  color: var(--teal);
  font-weight: 900;
  margin-top: 1px;
}

/* =========================
   Booking form: 2-step flow (kept)
   ========================= */

.wf-stepper{
  display:flex;
  justify-content:center;
  gap:10px;
  margin: 6px 0 18px;
}
.wf-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(0,0,0,0.12);
}
.wf-dot.is-active{
  background: var(--primary);
}

.wf-step{display:none;}
.wf-step.is-active{display:block;}

.wf-step-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top: 18px;
}

@media (max-width: 640px){
  .wf-step-actions,
  .wf-actions{
    flex-direction:column;
    align-items:stretch;
  }
}

/* === Fix: hide Netlify honeypot field (keeps spam protection working) === */
.honeypot{display:none !important}

/* Footer */
.footer{
  margin-top: 22px;
  background: rgba(13,148,136,.96);
  color:#fff;
  text-align:center;
  padding: 22px 12px;
}
.footer a{color:#0dffe0}
.copy{margin:8px 0 0}
.contact-title{font-weight:900; margin:0}
.abn{opacity:.92}

/* Small-screen spacing */
@media (max-width: 640px){
  body{font-size:.97rem}
  .hero{padding: 44px 14px 34px}
  .section{padding: 1.6rem 1rem; margin: .9rem .5rem}
}

/* =========================
   Pricing list alignment fixes (v12.1)
   - One-Off bullets align with Subscription bullets
   - "More than 2 bins?" sits outside dropdown content
   - Discount line has no bullet (but keeps alignment)
   ========================= */

#pricing details ul{
  margin: 12px 0 0;
  padding-left: 1.25rem;
  list-style: disc;
  list-style-position: outside;
  text-align: left;
}

#pricing details ul li{
  margin: 8px 0;
}

/* Outside helper line under each pricing dropdown */
#pricing .pricing-outside{
  margin: 12px 0 0;
  padding-left: 1.25rem; /* lines up with bullets */
  text-align: left;
  color: var(--muted);
}

/* Subscription mini-cards */
.sub-card ul{
  margin: 10px 0 0;
  padding-left: 1.25rem;
  list-style: disc;
  list-style-position: outside;
  text-align: left;
}

.sub-card ul li{ margin: 8px 0; }

/* Remove bullet ONLY for the discount line (last item) */
.sub-card ul li.tiny:last-child{
  list-style: none;
  margin-left: -1.25rem; /* align text with other items */
  font-weight: 600;
  color: var(--teal);
}