/* services.css — styles for services page */

/* Design tokens */
:root{
  --accent:#0f766e;
  --accent-2:#14b8a6;
  --muted:#6b7280;
  --maxw:1200px;
  --card-shadow: 0 14px 40px rgba(2,6,23,0.06);
  --glass: rgba(255,255,255,0.92);
  --ease: cubic-bezier(.2,.9,.3,1);
}

/* base */
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial; margin:0; color:#072022;  background-color: #f0faf9;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.section{padding:48px 0; position:relative}

/* HERO */
.services-hero{background:linear-gradient(180deg,#f0fdfa 0%, #ffffff 60%); padding:56px 0;}
.hero-inner{display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center;}
.hero-pre{color:var(--accent); font-weight:700; margin:0 0 6px}
.services-hero h1{font-size:2.6rem; margin:0 0 10px;}
.hero-sub{color:var(--muted); max-width:640px}
.hero-media img{width:100%; height:420px; object-fit:cover; border-radius:14px; box-shadow:0 22px 50px rgba(2,6,23,0.08)}

/* buttons */
.btn{padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none; cursor:pointer; border: none}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 10px 28px rgba(15,119,110,0.08)}
.btn.ghost{background:transparent; border:1px solid rgba(11,18,32,0.06); color:#072022}

/* sticky nav (width slightly reduced so it doesn't cover content) */
.services-nav{
  position:fixed;
  right:20px;
  top:130px;
  width:150px;                 /* ↓ was 180px */
  background:rgba(255,255,255,0.95);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(2,6,23,0.06);
  padding:8px;                 /* a bit tighter padding */
  z-index:1200;
}
.services-nav nav ul{list-style:none; margin:0; padding:0}
.services-nav nav li{margin:6px 0}
.services-nav .nav-link{display:block; text-decoration:none; color:#0b2f2a; padding:8px 10px; border-radius:8px; font-weight:700; font-size:0.94rem}
.services-nav .nav-link.active{background:linear-gradient(90deg, rgba(15,119,110,0.08), rgba(20,184,166,0.05)); box-shadow: inset 0 -2px 0 rgba(15,119,110,0.035)}

/* block section layout */
.block-section .section-grid{display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start}
.block-section.alt{background:linear-gradient(180deg,rgba(15,119,110,0.02),transparent 60%); padding-top:64px; padding-bottom:64px;}

/* section left/right */
.section-left h2{margin:0 0 8px}
.section-left .muted{color:var(--muted); margin-bottom:12px}
.section-desc{color:#334155; margin-bottom:18px}
.feature-list{list-style:none; padding:0; margin:12px 0 18px; display:grid; gap:8px}
.feature-list li{padding-left:18px; position:relative}
.feature-list li::before{content:'•'; position:absolute; left:0; top:0; color:var(--accent)}

/* cards */
.service-card{background:var(--glass); border-radius:12px; overflow:hidden; box-shadow:var(--card-shadow); transition:transform .22s var(--ease)}
.service-card img{width:100%; height:180px; object-fit:cover; display:block}
.service-card .card-body{padding:14px}
.service-card.large img{height:260px}
.service-card:hover{transform:translateY(-8px)}

/* mini cards */
.service-grid-inline{display:flex; gap:12px; margin-top:12px}
.mini-card{background:#fff; border-radius:10px; padding:12px; box-shadow:0 8px 20px rgba(2,6,23,0.04); text-align:center; flex:1}
.mini-icon{font-size:20px; margin-bottom:8px}

/* badges */
.badges{display:flex; gap:8px; margin-top:12px}
.badge{background:linear-gradient(90deg, rgba(15,119,110,0.06), rgba(20,184,166,0.04)); padding:8px 10px; border-radius:8px; font-weight:700; color:var(--accent); font-size:0.9rem}

/* accordion */
.service-accordion { margin-top:12px; display:grid; gap:8px; }
.acc-toggle{background:#fff; border-radius:10px; padding:12px 14px; text-align:left; font-weight:700; border:1px solid rgba(11,18,32,0.06); cursor:pointer}
.acc-toggle[aria-expanded="true"]{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff}
.acc-panel{padding:12px 14px; border-radius:8px; background:#fbfffe; border:1px solid rgba(11,18,32,0.03)}

/* badges & stats */
.warranty-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px}
.stat-card{background:#fff; padding:18px; border-radius:12px; box-shadow:0 8px 24px rgba(2,6,23,0.04); text-align:center}
.stat-number{font-size:1.6rem; color:var(--accent); font-weight:800}

/* FAQ */
.faq-grid{display:grid; gap:10px; margin-top:18px}
details{background:#fff; padding:12px 14px; border-radius:10px; box-shadow:0 8px 20px rgba(2,6,23,0.04); border:1px solid rgba(11,18,32,0.04)}
details summary{cursor:pointer; font-weight:700}
.faq-body{color:var(--muted); margin-top:8px}

/* CTA section */
.cta-wrap{display:flex; align-items:center; justify-content:space-between; gap:20px}
.cta-wrap .cta-left h3{margin:0}
.cta-wrap .cta-right{display:flex; gap:12px}

/* modal */
.modal{position:fixed; inset:0; background:rgba(2,6,23,0.45); display:none; align-items:center; justify-content:center; z-index:2000}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:#fff; width:100%; max-width:620px; padding:20px; border-radius:12px; box-shadow:0 28px 60px rgba(2,6,23,0.2); position:relative}
.modal-close{position:absolute; right:14px; top:10px; background:transparent; border:none; font-size:18px; cursor:pointer}
.modal-panel input, .modal-panel textarea{width:100%; padding:10px 12px; margin:8px 0; border-radius:8px; border:1px solid rgba(11,18,32,0.06)}
.modal-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:8px}

/* reveal animation helpers */
.reveal{opacity:1; transform:none; transition:transform .45s var(--ease), opacity .45s var(--ease)}
.reveal.pre-hidden{opacity:0; transform:translateY(18px)}
.reveal.in-view{opacity:1; transform:none}

/* responsive */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .block-section .section-grid{grid-template-columns:1fr; }
  .services-nav{display:none}
  .warranty-grid{grid-template-columns:repeat(1,1fr)}
  .wrap{padding:0 14px}
  .hero-media img{height:300px}
}

/* ---------- Sticky social logos ---------- */
.sticky-social{
  position:fixed;
  right:24px;
  bottom:120px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1400;
}

.sticky-social .sticky-icon{
  width:48px;
  height:48px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  text-decoration:none;
  box-shadow:0 12px 26px rgba(0,0,0,0.35);
  border:2px solid #ffffff;
  transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* platform colours */
.sticky-social .sticky-wa{background:#25D366;}
.sticky-social .sticky-ig{background:#E1306C;}
.sticky-social .sticky-fb{ background:#1877F2; }  /* Facebook */

.sticky-social .sticky-icon:hover{
  transform:translateY(-3px) scale(1.03);
  opacity:0.96;
  box-shadow:0 16px 30px rgba(0,0,0,0.4);
}

@media (max-width:640px){
  .sticky-social{
    right:16px;
    bottom:90px;
  }
}
/* FIX: Make modal close (X) clearly visible */
.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;              /* light grey circle */
  color: #0f766e;                   /* accent color */
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11,18,32,0.1);
  cursor: pointer;
  z-index: 10;
}

.modal-close:hover {
  background: #0f766e;
  color: #ffffff;
}
/* ============================= */
/* FIX: Modal close button hidden */
/* ============================= */

/* ensure modal content never hides under header */


/* keep modal panel fully visible */
.modal-panel {
  margin: 0 auto;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* pin the close button safely inside */
.modal-close {
  top: 12px;
  right: 12px;
  position: sticky;               /* KEY FIX */
  align-self: flex-end;
  z-index: 20;
}
/* ============================= */
/* MODAL ALIGNMENT FIX (FINAL)   */
/* ============================= */

/* Ensure modal panel behaves like a container */
.modal-panel {
  position: relative;
  padding-top: 24px;
}

/* Close (X) button — top right INSIDE modal */
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;

  width: 36px;
  height: 36px;
  border-radius: 50%;

  background: #f1f5f9;
  color: #0f766e;
  font-size: 18px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(11,18,32,0.1);
  cursor: pointer;
  z-index: 20;
}

.modal-close:hover {
  background: #0f766e;
  color: #ffffff;
}

/* Push heading down so it never collides with X */
.modal-panel h3 {
  margin-top: 8px;
  padding-right: 56px; /* space for X button */
}

/* FIX action buttons alignment */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* Normalize cancel button */
.modal-actions .btn.ghost {
  padding: 10px 16px;
  height: 42px;
}
.modal-actions .btn.ghost {
  display: none !important;
}

.modal.open {
  display: flex;
}


.modal.open {
  display: flex;
}

.modal-box {
  background: #fff;
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  padding: 24px;

  /* 🔥 FIX */
  max-height: 90vh;        /* allow tall content */
  overflow-y: auto;        /* enable scrolling */
}
/* =========================
   MODAL – FINAL FIXED
========================= */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal.open {
  display: flex;
}

.modal-box {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  padding: 24px;
  position: relative;

  max-height: 90vh;
  overflow-y: auto;
}

.modal-box h3 {
  margin-top: 0;
  padding-right: 56px;
}

.modal-desc {
  color: #6b7280;
  margin-bottom: 16px;
}

.modal-box input,
.modal-box textarea {
  width: 100%;
  padding: 10px 12px;
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid rgba(11,18,32,0.15);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0f766e;
  border: 1px solid rgba(11,18,32,0.1);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.modal-close:hover {
  background: #0f766e;
  color: #ffffff;
}