/* ==========================================================
   ENERZEX — Contact & Enquiry page styles
   Red / Black / White brand theme, matches site-wide look
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ez-red:#E31E24;
  --ez-red-dark:#A9141A;
  --ez-red-glow:rgba(227,30,36,0.35);
  --ez-black:#0B0B0D;
  --ez-charcoal:#17181C;
  --ez-ink:#111214;
  --ez-grey:#6B6E76;
  --ez-grey-light:#9A9DA6;
  --ez-line:#E8E8EA;
  --ez-green:#22C55E;
  --ez-amber:#FFB300;
  --ez-radius:16px;
}

.page-hero *, .contact-page-wrap *{ box-sizing:border-box; }

/* ---------- reveal-on-scroll (driven by page's own observer script) ----------
   Only hidden-by-default once we know JS is running (html.has-js), so content
   never gets stuck invisible if JS fails to load. */
.has-js .contact-page-wrap .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.has-js .contact-page-wrap .reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- PAGE HERO ---------- */
.page-hero{
  position:relative; background:var(--ez-black); color:#fff; overflow:hidden;
  padding:64px 24px 52px; text-align:center; border-radius:0 0 28px 28px;
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 380px at 50% -10%, rgba(227,30,36,0.28), transparent 65%);
}
.page-hero::after{
  content:""; position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:42px 42px; mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 85%);
}
.page-hero h1{
  position:relative; z-index:1; font-family:'Sora',sans-serif; font-weight:800;
  font-size:clamp(2rem,4.5vw,3rem); margin:0 0 14px; letter-spacing:-0.02em;
  animation:ezFadeUp .6s ease both;
}
.page-hero p{
  position:relative; z-index:1; color:#B7B9C0; font-family:'Inter',sans-serif; font-size:16px;
  max-width:560px; margin:0 auto; line-height:1.6; animation:ezFadeUp .6s ease .1s both;
}
@keyframes ezFadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

/* ---------- SECTION / WRAP ---------- */
.section{ position:relative; background:#fff; overflow:hidden; }
.contact-page-wrap{
  max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:1;
  font-family:'Inter',sans-serif; color:var(--ez-ink);
}
.contact-page-wrap h2, .contact-page-wrap h4{ font-family:'Sora',sans-serif; letter-spacing:-0.01em; margin:0; }

/* ambient drifting glow, subtle, keeps the white page alive */
.section::before{
  content:""; position:absolute; width:440px; height:440px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(227,30,36,0.05), transparent 70%);
  top:-160px; right:-160px; animation:ezDrift 17s ease-in-out infinite; pointer-events:none;
}
@keyframes ezDrift{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-24px,30px);} }

/* ---------- TOP GRID ---------- */
.contact-top-grid{ display:grid; grid-template-columns:340px 1fr; gap:28px; align-items:start; }
@media(max-width:960px){ .contact-top-grid{ grid-template-columns:1fr; } }

/* ---------- SIDEBAR ---------- */
.contact-sidebar{ display:flex; flex-direction:column; gap:16px; }

.contact-sidebar-header{
  position:relative; overflow:hidden; background:linear-gradient(150deg, var(--ez-black), var(--ez-charcoal));
  color:#fff; border-radius:20px; padding:28px;
}
.contact-sidebar-header::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(260px 200px at 15% 0%, rgba(227,30,36,0.32), transparent 65%);
}
.contact-sidebar-header h2{ position:relative; font-size:21px; margin-bottom:10px; }
.contact-sidebar-header p{ position:relative; font-size:14px; color:#C7C9CF; margin:0; }
.response-badge{
  position:relative; display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:12.5px; font-weight:600;
  background:rgba(34,197,94,0.15); border:1px solid rgba(34,197,94,0.35); color:#6EE7A0; padding:6px 12px; border-radius:999px;
}
.response-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ez-green); animation:ezPulseDot 1.6s ease-in-out infinite; }
@keyframes ezPulseDot{ 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.5);} 50%{box-shadow:0 0 0 5px rgba(34,197,94,0);} }

.contact-info-card{
  display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--ez-line); border-radius:16px;
  padding:16px 18px; transition:transform .3s, box-shadow .3s;
}
.contact-info-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,0.06); }
.ci-icon{
  flex:none; width:38px; height:38px; border-radius:10px; background:#FFF1F1; color:var(--ez-red);
  display:flex; align-items:center; justify-content:center; font-size:18px; animation:ezBreathe 3.2s ease-in-out infinite;
}
@keyframes ezBreathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
.ci-body h4{ font-size:14px; margin-bottom:3px; color:var(--ez-ink); }
.ci-body p, .ci-body a{ font-size:13.5px; color:var(--ez-grey); text-decoration:none; }
.ci-body a:hover{ color:var(--ez-red-dark); }

.hours-card{ background:#fff; border:1px solid var(--ez-line); border-radius:16px; padding:18px 20px; }
.hours-card h4{ font-size:14px; margin-bottom:12px; color:var(--ez-ink); }
.hours-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--ez-grey); padding:7px 0; border-bottom:1px solid #F2F2F3; transition:background .2s; }
.hours-row:last-child{ border-bottom:none; }
.hours-row.today{
  color:var(--ez-ink); font-weight:700; background:#FFF7F2; margin:0 -8px; padding:7px 8px;
  border-radius:8px; border-bottom-color:transparent; animation:ezTodayPulse 3s ease-in-out infinite;
}
@keyframes ezTodayPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(227,30,36,0);} 50%{box-shadow:0 0 0 4px rgba(227,30,36,0.06);} }
.hours-row em{ font-size:11px; color:#2ECC71; font-style:normal; margin-left:6px; }

.map-placeholder{
  position:relative; background:linear-gradient(150deg, var(--ez-black), var(--ez-charcoal)); border-radius:16px;
  padding:36px 20px; text-align:center; overflow:hidden; color:#fff;
}
.map-placeholder::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.map-pin-wrap{ position:relative; }
.pin-ring{
  position:absolute; left:50%; top:70%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:rgba(227,30,36,0.35); animation:ezPinRing 2s ease-out infinite;
}
.pin{ font-size:28px; position:relative; z-index:2; animation:ezPinBounce 2.4s ease-in-out infinite; }
@keyframes ezPinBounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes ezPinRing{ 0%{transform:scale(.4); opacity:.9;} 100%{transform:scale(2.6); opacity:0;} }
.map-placeholder p{ position:relative; z-index:2; font-size:13.5px; color:#C7C9CF; margin-top:10px; }

/* ---------- ENQUIRY FORM ---------- */
.enquiry-form-card{ background:#fff; border:1px solid var(--ez-line); border-radius:22px; padding:34px; box-shadow:0 20px 50px rgba(0,0,0,0.05); }
@media(max-width:640px){ .enquiry-form-card{ padding:22px; } }

.form-head{ display:flex; gap:14px; align-items:center; margin-bottom:22px; }
.form-head-icon{ flex:none; width:46px; height:46px; border-radius:12px; background:var(--ez-black); color:var(--ez-red); display:flex; align-items:center; justify-content:center; font-size:20px; }
.form-head h2{ font-size:21px; margin-bottom:4px; }
.form-head p{ font-size:13.5px; color:var(--ez-grey); margin:0; }

.form-banner{ display:none; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:12px 16px; border-radius:12px; margin-bottom:18px; }
.form-banner.show{ display:flex; animation:ezFadeSlide .35s ease; }
@keyframes ezFadeSlide{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
.form-banner.success{ background:#EFFBF3; color:#178A4C; border:1px solid #B9EBCB; }
.form-banner.error-banner{ background:#FFF4F4; color:var(--ez-red-dark); border:1px solid #FFD3D4; }

.frow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){ .frow{ grid-template-columns:1fr; } }
.fgroup{ margin-bottom:18px; }
.fgroup label{ display:block; font-size:13.5px; font-weight:600; color:var(--ez-ink); margin-bottom:7px; font-family:'Inter',sans-serif; }
.fgroup label span{ color:var(--ez-red); }
.fgroup input[type=text], .fgroup input[type=email], .fgroup input[type=tel], .fgroup select, .fgroup textarea{
  width:100%; border:1px solid var(--ez-line); background:#FAFAFA; border-radius:10px; padding:11px 13px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ez-ink); transition:border-color .2s, background .2s, box-shadow .2s;
}
.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus{
  outline:none; border-color:var(--ez-red); background:#fff; box-shadow:0 0 0 3px rgba(227,30,36,0.1);
}
.fgroup input.error, .fgroup textarea.error{ border-color:var(--ez-red); background:#FFF7F7; }
.fgroup textarea{ resize:vertical; min-height:110px; }
.field-error{ display:none; font-size:12px; color:var(--ez-red-dark); margin-top:5px; }
.field-error.show{ display:block; animation:ezFadeSlide .25s ease; }

.chips-label{ display:block; font-size:13.5px; font-weight:600; color:var(--ez-ink); margin-bottom:9px; }
.subject-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.subject-chip{
  background:#F5F5F6; border:1px solid var(--ez-line); color:var(--ez-ink); font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s;
  font-family:'Inter',sans-serif;
}
.subject-chip:hover{ transform:translateY(-2px); border-color:var(--ez-red); }
.subject-chip.selected{ background:var(--ez-red); border-color:var(--ez-red); color:#fff; }

.rating-wrap{ display:flex; gap:6px; }
.star-btn{ background:none; border:none; font-size:26px; color:#DADBDE; cursor:pointer; transition:transform .15s, color .15s; padding:0; }
.star-btn:hover{ transform:scale(1.15); }
.star-btn.lit{ color:var(--ez-amber); }

.newsletter-toggle{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin:6px 0 24px;
  padding:14px 16px; background:#FAFAFA; border:1px solid var(--ez-line); border-radius:12px;
}
.newsletter-toggle input{
  appearance:none; -webkit-appearance:none; width:38px; height:22px; border-radius:999px; background:#DADBDE;
  position:relative; flex:none; margin-top:2px; cursor:pointer; transition:background .25s;
}
.newsletter-toggle input::before{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff;
  transition:transform .25s; box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.newsletter-toggle input:checked{ background:var(--ez-red); }
.newsletter-toggle input:checked::before{ transform:translateX(16px); }
.newsletter-toggle p{ font-size:13px; color:var(--ez-grey); margin:0; }
.newsletter-toggle p strong{ color:var(--ez-ink); }

.btn-enquiry-submit{
  width:100%; background:var(--ez-red); color:#fff; border:none; border-radius:12px; padding:16px; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s;
  font-family:'Sora',sans-serif;
}
.btn-enquiry-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 28px var(--ez-red-glow); background:var(--ez-red-dark); }
.btn-enquiry-submit:disabled{ opacity:.85; cursor:not-allowed; transform:none; }
.btn-spinner{
  display:none; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,0.4);
  border-top-color:#fff; animation:ezSpin .7s linear infinite;
}
.btn-enquiry-submit.loading .btn-spinner{ display:inline-block; }
.btn-enquiry-submit.loading .btn-label{ opacity:.6; }
@keyframes ezSpin{ to{ transform:rotate(360deg); } }

/* ---------- FAQ ---------- */
.faq-section{ margin-top:36px; }
.faq-section h2{ font-size:22px; margin-bottom:20px; }
.accordion .acc-item{ border:1px solid var(--ez-line); border-radius:14px; margin-bottom:10px; background:#fff; overflow:hidden; transition:border-color .2s; }
.accordion .acc-item.open{ border-color:rgba(227,30,36,0.3); }
.acc-header{
  width:100%; text-align:left; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 18px; font-family:'Sora',sans-serif; font-size:15px; font-weight:700; color:var(--ez-ink); transition:color .2s;
}
.acc-header:hover{ color:var(--ez-red-dark); }
.acc-icon{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--ez-ink); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:15px; transition:transform .3s, background .3s;
}
.acc-item.open .acc-icon{ background:var(--ez-red); transform:rotate(45deg); }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.acc-item.open .acc-body{ grid-template-rows:1fr; }
.acc-body > p{ overflow:hidden; margin:0; padding:0 18px 18px; font-size:14px; color:var(--ez-grey); line-height:1.6; }

@media (prefers-reduced-motion: reduce){
  .page-hero *, .contact-page-wrap *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}