/* --------------------------------------------------
  The Car Seat Studio – Global Styles (mobile-first)
  Author: Zephyr Studios LLC
-------------------------------------------------- */

:root {
  --brand:        #1a3b59;
  --brand-dark:   #12293f;
  --accent:       #e2a400;   /* warm gold */
  --accent-dark:  #c48800;
  --bg:           #f4fbff;
  --card:         #ffffff;
  --border:       #b5d9eb;
  --text:         #1a3b59;
  --text-light:   #496783;
  --radius: 0.5rem;
  --shadow: 0 2px 4px rgba(0,0,0,0.06);
  font-size: 16px;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;border-radius:var(--radius);}a{color:var(--accent-dark);text-decoration:none;}a:hover{text-decoration:underline;}

/* Layout */
.container{width:min(90%,48rem);margin-inline:auto;}
.flex{display:flex;align-items:center;}
.space-between{justify-content:space-between;}
.align-center{align-items:center;}
.gap-2{gap:0.5rem;}
.grid-2{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.grid-3{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media(min-width:48rem){.grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} }

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);box-shadow:var(--shadow);padding:0.75rem 0;}
.logo{font-weight:600;font-size:1.125rem;}
.main-nav ul{list-style:none;margin:0;padding:0;}
.main-nav li a{padding:0.5rem 0.75rem;display:block;}

/* Buttons */
.btn{display:inline-block;padding:0.625rem 1.25rem;border-radius:var(--radius);font-weight:600;text-align:center;transition:background 0.2s ease;border:2px solid transparent;}
.btn.primary{background:var(--accent);color:#000;}
.btn.primary:hover{background:var(--accent-dark);} 
.btn.secondary{background:transparent;color:var(--accent-dark);border-color:var(--accent-dark);} 
.btn.secondary:hover{background:var(--accent);color:#000;}
.btn.block{width:100%;}
.btn.lg{padding:0.75rem 1.5rem;font-size:1.125rem;}

/* Hero */
.hero{padding:4rem 0 3rem;text-align:center;}
.hero.small{padding:3rem 0 2rem;}
.hero .container > *{margin-bottom:1rem;}

/* How it works */
.step h3{margin-top:0.5rem;font-size:1.125rem;}

/* Pricing */
.pricing .card{border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;box-shadow:var(--shadow);} 
.price{font-size:2rem;font-weight:700;margin:0.5rem 0;}

/* Add-ons */
.addons-list{list-style:none;margin:0;padding:0;}
.addons-list li{padding:0.25rem 0;border-bottom:1px dashed var(--border);} 
.note{font-size:0.875rem;color:var(--text-light);margin-top:0.5rem;}

/* Highlight section */
.highlight{background:#fef9c3; /* amber-100 */}
.subscription .price.lg{font-size:2.25rem;}

/* Testimonials */
.testimonials blockquote{margin:1.5rem 0;border-left:4px solid var(--accent);padding-left:1rem;font-style:italic;}

/* Forms */
form{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;}
input,select,textarea{width:100%;padding:0.6rem;border:1px solid var(--border);border-radius:var(--radius);font-size:1rem;}
input:focus,textarea:focus{outline:none;border-color:var(--accent-dark);} 
.radio-group{display:flex;flex-direction:column;gap:0.5rem;}
.checkbox{display:flex;align-items:center;gap:0.5rem;}
.form-section{margin-bottom:2rem;}
.small{font-size:0.875rem;color:var(--text-light);} 

/* Checkout specific */
.cal-wrapper{min-height:300px;border:1px solid var(--border);border-radius:var(--radius);padding:0.5rem;background:#fafafa;display:flex;align-items:center;justify-content:center;}

/* Confirmation */
.summary-card{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin:2rem auto;max-width:22rem;text-align:left;}
.lead{font-size:1.125rem;color:var(--text-light);} 

/* Values cards */
.values .value{text-align:center;padding:1.5rem;}
.values .highlight{background:#fff;} 

/* Footer */
.site-footer{margin-top:3rem;padding:1.5rem 0;background:#f9fafb;color:var(--text-light);font-size:0.875rem;}

/* Utils */
.text-center{text-align:center;}
.block{display:block;}

@media(min-width:48rem){
  :root{font-size:17px;}
  .container{width:min(88%,60rem);} 
  .hero{padding:5rem 0 4rem;}
  .hero .container{max-width:40rem;} 
}
body { background: var(--bg); color: var(--text); }

/* header */
.site-header { background: var(--card); }
.logo { color: var(--brand); }

/* nav links */
.main-nav a { color: var(--brand); }
.main-nav a:hover { color: var(--brand-dark); }

/* primary button */
.btn.primary {
  background: var(--accent);
  color: #fff;
}
.btn.primary:hover { background: var(--accent-dark); }

/* secondary button */
.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.btn.secondary:hover {
  background: var(--accent);
  color: #fff;
}

/* cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
}

/* 1️⃣  Center the blue “Book X Seats” buttons */
.card .btn.block{
  max-width:200px;          /* keeps them slim */
  margin:1rem auto 0;       /* auto-left/right → center */
}

/* 2️⃣  Reset the bullet list so no weird gaps */
.features{
  list-style:none;
  padding:0;
  margin:1rem 0;
}

/* 3️⃣  Give each line a custom dot & even spacing */
.features li{
  position:relative;
  padding-left:1.1rem;
  margin:0.3rem 0;
}
.features li::before{
  content:"●";              /* small dot */
  position:absolute;
  left:0;
  top:0.45rem;
  font-size:0.55rem;
  color:var(--accent);      /* matches button color */
}

/* Center logo icon + text horizontally & vertically */
.logo{
  display:flex;
  align-items:center;      /* vertical centering */
  gap:0.45rem;             /* space between icon & words */
  font-weight:600;         /* keep bold branding */
  color:var(--brand);
  text-decoration:none;
}

/* Make sure the icon never stretches */
.logo img{
  height:32px;             /* or 40px, but fix all pages */
  width:auto;
}

/* ---------- TERMS CHECKBOX ROW (single source of truth) ---------- */
.checkbox.agree{
       /* span both columns        */
  display:block !important;                 /* flex row                 */
  align-items:center;           /* vertical alignment       */
  justify-content:flex-start !important;   /* ⬅︎ keep text next to box */
  gap: 1rem;                   /* box–text spacing         */            /* ⬅︎ shrink row to content */
  margin:.35rem 0;              /* small vertical gap       */
}

.checkbox.agree input{ margin:0 0.5em; }      /* kill default indent */
.checkbox.agree span{
  white-space:nowrap;  line-height:1.35; font-size:.95rem;
}

/* ---------- brand-styled form controls ---------- */

/* Base reset */
input[type="radio"],
input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  padding:0;
  margin:0;
  width:1.1rem;
  height:1.1rem;
  border:2px solid var(--brand);
  border-radius:50%;
  display:inline-block;
  position:relative;
  cursor:pointer;
}

/* Checked state */
input[type="radio"]:checked,
input[type="checkbox"]:checked{
  border-color:var(--accent);
  background:var(--accent);
}
input[type="radio"]:checked::after{
  content:"";
  position:absolute; inset:0.25rem;
  background:#fff; border-radius:50%;
}
input[type="checkbox"]{
  border-radius:0.25rem;          /* square for checkbox */
}
input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; inset:0.15rem;
  border:2px solid #fff;          /* little white tick */
  border-top:none; border-left:none;
  transform:rotate(45deg);
}

/* Align radio text nicely */
.radio-group label,
.checkbox.agree{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1rem;
  line-height:1.35;
}

/* Slimmer text inputs / selects */
input[type="text"],
input[type="email"],
select{
  padding:0.5rem 0.6rem;          /* was 0.6 rem vertical */
  font-size:1rem;
}

/* keep text/email/select fields a comfortable width */
.checkout-container input[type="text"],
.checkout-container input[type="email"],
.checkout-container select{
  max-width:22rem;   /* ≈ 352 px */
  width:100%;
}
/* --------------------------------------------------
   Force one-row layout in the two sections that
   looked jammed:  Add-Ons  &  Your Details
-------------------------------------------------- */
.form-section[data-title="Add-Ons"],
.form-section[data-title="Contact"]{
  display:flex;             /* stop the inherited grid   */
  flex-direction:column;    /* stack children vertically */
  gap:1rem;                 /* even vertical spacing     */
}

/* make every label inside those sections full-width */
.form-section[data-title="Add-Ons"] label,
.form-section[data-title="Contact"] label{
  display:block;            /* puts <select>/<input> on next line */
}

/* ---------- Mobile header: keep logo & nav from colliding ---------- */
@media (max-width: 475px) {
  /* let the header row wrap when it gets tight */
  .site-header .container { 
    flex-wrap: wrap;
  }

  /* force the logo onto its own line */
  .logo {
    flex: 0 0 100%;          /* full-width row */
    margin-bottom: 0.5rem;   /* little gap before nav */
  }

  /* tighten the nav a bit (optional) */
  .main-nav ul { gap: 0.25rem; }
}/* ---------- Mobile header v2: break sooner & centre nav ---------- */
@media (max-width: 640px) {          /* ⬅︎  change point you like  */
  .site-header .container{
    flex-wrap: wrap;                /* allow wrapping             */
    row-gap: .5rem;                 /* vertical space between rows*/
  }

  /* Logo gets the first row */
  .logo{
    flex: 0 0 100%;                 /* full-width                 */
    margin-bottom: .25rem;
  }

  /* Nav sits on its own line, centred */
  .main-nav{
    flex: 0 0 100%;                 /* full-width                 */
  }
  .main-nav ul{
    justify-content: center;        /* spread items nicely        */
    gap: .75rem;                    /* a touch more breathing room*/
  }
}

/* --- Founder photo: keep it classy on every screen --- */
.founder-photo{
  display:flex;                 /* centers in its column / row  */
  justify-content:center;
}

.founder-photo img{
  width:clamp(220px,40vw,320px); /* ≥220 px, ≤320 px, fluid in-between */
  height:auto;
}

/* ----- Mobile footer: stack + center ----- */
@media (max-width: 480px) {
  .site-footer .container{
    flex-direction: column;     /* put items on new lines   */
    text-align:   center;       /* center their text        */
    gap: .25rem;                /* tiny breathing room      */
  }
}

/* Founder section – desktop tweak only */
@media (min-width:48rem){            /* 48 rem ≈ 768 px */
  .founder{
    align-items:center;             /* centre items in the row layout   */
    margin-bottom:3rem;             /* gap before the yellow highlight  */
  }
}
/* === Global background images ===================== */
body {         /* keep your blue fallback */
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("images/tcss-background.webp") center / cover no-repeat;
  opacity: .25;          /* adjust to taste */
  pointer-events: none;  /* never intercept clicks */
  z-index: -1;           /* sit behind all content */
}

@media (max-width: 640px) {
  body::before {
    background-image: url("images/tcss-background-mobile.webp");
  }
}

/* === Section transparency so the leaf background shows === */
.card,
.site-footer,
.site-header,
.values .highlight,
.summary-card,
.cal-wrapper {
  background-color: rgba(255,255,255,0.92); /* ~8 % see‑through */
}

/* Keep the yellow highlight tint but add transparency */
.highlight {
  background-color: rgba(254,249,195,0.90);
}