/* =========================================
   Alex's Appliance Repair — Global Styles
   Safe forms (compact by default)
   Join form is scoped to #joinForm only
   ========================================= */

/* --- Theme tokens --- */
:root{
  --bg:#0b1220;
  --text:#e8eef6;
  --muted:#9fb1c7;
  --line:#1e293b;
  --brand:#63b3ff;
  --accent:#9bd2ff;
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.5;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}

/* Background + mouse light */
body{
  background:
    radial-gradient(1200px 600px at 50% -200px, #142035 0%, #0b1220 60%);
}
#mouseLight{position:fixed; inset:0; pointer-events:none; z-index:0}

/* --- Header (auto-hide on mobile) --- */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(10,16,28,.72);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 0; position:relative; z-index:2;
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px; flex:1 1 auto}
.brand-text{min-width:0}
.logo{
  width:44px; height:44px; border-radius:10px; object-fit:cover;
  box-shadow:0 0 0 1px #1f2937, 0 0 12px rgba(99,179,255,.15);
}
.brand-text h1{margin:0; font-size:20px; letter-spacing:.3px}
.brand-text .sub{margin:0; color:var(--muted); font-size:13px}

/* auto-hide only on mobile */
@media (max-width:768px){
  .site-header{padding-top:max(8px,env(safe-area-inset-top)); transition:transform .25s ease,opacity .15s ease}
  .site-header.hide-on-scroll{transform:translateY(calc(-100% - env(safe-area-inset-top))); opacity:.98}
}

/* --- Buttons --- */
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-left:auto}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#152131; color:var(--text);
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--line);
  font-weight:700; letter-spacing:.2px;
  transition:all .2s ease; white-space:nowrap;
}
.btn:hover{box-shadow:0 0 0 1px var(--brand), 0 0 18px rgba(14,165,233,.25); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#1f6fe0,#1456b8); border-color:#1f56a6}
.btn.ghost{background:#16233a; border-color:rgba(147,197,253,.45)}
.btn.tiny{padding:7px 10px; border-radius:10px; font-size:14px}

/* Donate pill */
.donate-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:12px;
  background:#152131; border:1px solid var(--line);
  color:var(--text); font-size:14px; font-weight:700;
  text-decoration:none; white-space:nowrap;
  transition:background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.donate-link:hover{
  background:linear-gradient(180deg,#1f6fe0,#1456b8);
  box-shadow:0 0 0 1px var(--brand), 0 0 18px rgba(14,165,233,.25);
  transform:translateY(-1px);
}

/* --- Hero --- */
.hero{padding:40px 0 22px; border-bottom:1px solid var(--line); position:relative; z-index:1}
.hero-title{font-size:32px; margin:6px 0 4px}
.hero-lead{color:var(--muted); max-width:70ch; margin:0}

/* --- Badges --- */
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.badge{
  border:1px solid var(--line); background:#0b1424;
  padding:6px 10px; border-radius:999px; color:var(--muted); font-size:13px;
}

/* --- Sections & cards --- */
h3{margin:24px 0 10px; font-size:22px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.card{
  background:linear-gradient(180deg,rgba(20,30,48,.8),rgba(12,18,30,.9));
  border:1px solid var(--line); border-radius:14px; padding:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.25);
}
.card:hover{box-shadow:0 0 0 1px rgba(99,179,255,.5), 0 10px 40px rgba(21,108,191,.25)}
.card h4{margin:0 0 6px; font-size:18px; display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.card .price{color:#cfe6ff; font-weight:700; font-size:16px}

.note{color:var(--muted); font-size:13px}
.footnote{color:var(--muted); font-size:13px; margin-top:10px}

.req{color:#9bd2ff; font-weight:800}

/* --- Reviews --- */
.reviews .rev-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.rev{margin:0; background:linear-gradient(180deg,rgba(16,26,44,.8),rgba(12,18,30,.9)); border:1px solid var(--line); border-radius:14px; padding:14px;
  transition:transform .28s ease, box-shadow .28s ease;
}
.rev p{margin:0 0 8px}
.rev:hover{transform:scale(1.08); box-shadow:0 0 25px rgba(99,179,255,.35)}
.rev footer .stars{color:#cfd8e3; transition:color .25s ease, text-shadow .25s ease}
.rev:hover footer .stars{color:gold; text-shadow:0 0 6px rgba(255,215,0,.6)}

/* =========================================================
   FORMS (SAFE DEFAULT)
   - Main site forms stay compact
   - Join form has its own scoped layout below
   ========================================================= */

.form label{display:flex; flex-direction:column; gap:4px; font-size:14px}
.form input,.form textarea,.form select{
  background:#0c1526; color:var(--text);
  border:1px solid var(--line); border-radius:10px;
  padding:10px;
}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:0; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.25)
}

/* Compact rows by default */
.form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0;
  align-items:start;
}
.form .row.one{grid-template-columns:1fr}
.form .actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

@media (max-width:900px){
  .form .row{grid-template-columns:1fr}
}

/* Make file inputs not explode the layout */
.form input[type="file"]{
  padding:8px;
}
.form small{color:var(--muted); font-size:12px; margin-top:6px}

/* --- Footer --- */
.center{text-align:center}
.site-footer{border-top:1px solid var(--line); margin-top:28px; padding:18px 0; background:rgba(10,16,28,.6)}
.foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.tiny{color:var(--muted); font-size:13px}

/* --- Chips --- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0}
.chip{
  border:1px solid var(--line); background:#0b1424;
  color:var(--text); padding:6px 14px; border-radius:999px;
  font-size:14px; cursor:pointer; transition:all .2s ease;
}
.chip:hover{background:#152131; border-color:var(--brand)}
.chip.active{background:linear-gradient(180deg,#1f6fe0,#1456b8); border-color:#1f56a6; color:#fff}

/* --- Brand chips --- */
.brand-chips{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; padding:0; list-style:none}
.brand-chips li{
  border:1px solid var(--line);
  background:linear-gradient(145deg,#0b1424,#111c30);
  color:var(--text);
  padding:8px 18px; border-radius:999px; font-size:14px; line-height:1; white-space:nowrap;
  transition:all .3s ease;
}
.brand-chips li:hover{
  border-color:#1f56a6; color:#fff;
  box-shadow:0 0 8px rgba(99,179,255,.30); animation:pulseBrand 1.6s infinite;
}
@keyframes pulseBrand{0%,100%{box-shadow:0 0 8px rgba(99,179,255,.30)}50%{box-shadow:0 0 16px rgba(99,179,255,.45)}}

/* --- Google Reviews badge --- */
.hero-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.gr-badge{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:12px;
  background:#121a2a; border:1px solid var(--line);
  color:var(--text); font-weight:600; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gr-badge:hover{transform:translateY(-1px); border-color:#1f56a6; box-shadow:0 8px 22px rgba(21,108,191,.25)}
.gr-g{display:grid; place-items:center; width:20px; height:20px; border-radius:6px; font-weight:900;
  background:linear-gradient(135deg,#ea4335,#4285f4 60%); color:#fff}
.gr-text{white-space:nowrap; font-weight:700}
.gr-stars{color:gold; font-size:14px; letter-spacing:.5px}
.gr-pop{
  position:absolute; top:115%; right:0; width:160px; display:none;
  background:#fff; padding:6px; border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.gr-badge:hover .gr-pop{display:block}
.gr-qr{width:48px; height:48px; border-radius:8px; background:#fff; padding:4px;
  box-shadow:0 6px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset}
@media (max-width:740px){
  .hero-head{flex-direction:column; align-items:flex-start; gap:8px}
  .gr-pop{display:none !important}
}

/* --- Confetti canvas --- */
#confetti{
  position:fixed !important; top:0; left:0;
  width:100vw !important; height:100vh !important;
  pointer-events:none; z-index:9999;
}

/* --- Gallery main image --- */
#mainImg{
  width:100%;
  height:min(58vh,560px);
  object-fit:contain;
  background:#000;
  display:block; max-width:100%;
}

/* --- Gallery mobile tweaks --- */
@media (max-width:740px){
  #mainImg{height:calc(100vw * .56); max-height:64vh}
  #cap{font-size:13px; line-height:1.3; margin-top:6px}
  #thumbs{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:8px 0; margin:8px -8px 0; scroll-snap-type:x proximity}
  #thumbs::-webkit-scrollbar{display:none}
  #thumbs img{flex:0 0 auto; width:96px; height:72px; object-fit:cover; border-radius:10px; scroll-snap-align:center; border:1px solid var(--line)}
  #prevBtn,#nextBtn{width:44px; height:44px}
}

/* --- Floating Call FAB --- */
.call-fab{
  position:fixed; right:20px; bottom:20px; z-index:999;
  padding:12px 16px; border-radius:50px;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  font-size:16px; display:none;
}
@media (max-width:900px){ .call-fab{display:inline-flex; align-items:center; gap:6px} }

/* --- Responsive header layout --- */
@media (max-width:900px){
  .bar{flex-wrap:wrap; align-items:flex-start}
  .donate-link{margin-left:56px}
}
@media (max-width:740px){
  .bar{
    display:grid; grid-template-columns:1fr;
    grid-template-areas:"brand" "donate" "cta";
    gap:8px; align-items:start;
  }
  .brand{grid-area:brand; min-width:0}
  .donate-link{grid-area:donate; width:100%; margin:0; padding:10px 12px; font-size:13px; justify-content:flex-start; background:#121a2a; border-color:var(--line); box-shadow:none; transform:none}
  .cta{grid-area:cta; display:flex; flex-direction:column; gap:8px; margin-left:0}
  .cta .btn{width:100%; min-height:44px; padding:12px 14px; font-size:16px; line-height:1.2; align-items:center; justify-content:center; white-space:normal}
  .brand-text h1{font-size:20px}
  .brand-text .sub{font-size:12px}
}
/* =========================================================
   JOIN FORM (single source of truth)
   - one required dot (no double dots)
   - clean alignment (no left column drop)
   - optional label won't wrap ugly
   ========================================================= */

#joinForm .row{
  display:grid;
  gap:16px;
  margin:12px 0;
  align-items:start;
}
#joinForm .row.r3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
#joinForm .row.r2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
#joinForm .row.r1{ grid-template-columns:1fr; }

@media (max-width:900px){
  #joinForm .row.r3{ grid-template-columns:1fr; }
  #joinForm .row.r2{ grid-template-columns:1fr; }
}

#joinForm label{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  font-size:14px;
}

/* hide the old "*" marker (we use dot instead) */
#joinForm .req{ display:none !important; }

/* DOT appears only when label contains .req (required) */
#joinForm label:has(.req){
  padding-left:14px; /* space for dot */
}
#joinForm label:has(.req)::before{
  content:"";
  position:absolute;
  left:0;
  top:0.95em;             /* aligns with label text */
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 8px rgba(99,179,255,.35);
}

#joinForm input,
#joinForm textarea,
#joinForm select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

#joinForm textarea{
  resize:vertical;
  min-height:110px;
}

/* Make file inputs behave */
#joinForm input[type="file"]{ padding:8px; }

/* Optional proof label: prevent ugly wrap in desktop 2-col row.
   Scoped to just the heading text - white-space is inherited, so without
   resetting it back to normal on every other descendant (hints included),
   the hint text below would refuse to wrap and spill into the next column. */
#joinForm .row.r2 label:nth-child(2) > .fieldtitle{
  white-space:nowrap;
}
#joinForm .row.r2 label:nth-child(2) input,
#joinForm .row.r2 label:nth-child(2) small,
#joinForm .row.r2 label:nth-child(2) .hint{
  white-space:normal;
}

/* Errors only when user submits (you add .was-validated via JS or remove novalidate) */
#joinForm.was-validated input:invalid,
#joinForm.was-validated textarea:invalid,
#joinForm.was-validated select:invalid{
  border-color:#ff6a6a;
  box-shadow:0 0 0 3px rgba(255,106,106,.18);
}
/* Teaser buttons: ghost trick, brighter so they read as buttons on the dark bg */
.gallery-teaser .btn.ghost,
.blog-teaser .btn.ghost{
  background:#22385f;
  border:1px solid #63b3ff;
  color:#fff;
}