/* ==========================================================================
   Q-Switch Laser Treatment — Eulooks Care Clinic
   Page-specific stylesheet. All classes are prefixed "eq-" to avoid
   collisions with the existing site's global CSS. No !important used.
   ========================================================================== */

:root{
  /* Color tokens */
  --eq-teal-900:#0E4A40;
  --eq-teal-700:#146356;
  --eq-teal-500:#1D8371;
  --eq-teal-100:#E7F3EF;
  --eq-clay-500:#D97B5C;
  --eq-clay-600:#C8654A;
  --eq-ink:#1E2723;
  --eq-ink-soft:#4A554F;
  --eq-bg:#FBFAF6;
  --eq-beige:#F3EEE4;
  --eq-white:#FFFFFF;
  --eq-border:#E4DFD3;

  /* Type tokens */
  --eq-font-display:'Fraunces', Georgia, serif;
  --eq-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radius / shadow */
  --eq-radius-lg:20px;
  --eq-radius-md:14px;
  --eq-radius-sm:10px;
  --eq-shadow-soft:0 10px 30px -12px rgba(14, 74, 64, 0.18);

  /* width */
  --wrap:1180px;
}

a { text-decoration:none; color:inherit; }

/* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:5px 0px;max-width:var(--wrap);margin:0 auto;}
  .nav__logo img{height:60px;width:auto;}
  .nav__links{display:flex;gap:28px;font-size:16px;font-weight:500;}
  .nav__links a:hover{color:var(--teal);}
  .nav__actions{display:flex;align-items:center;gap:12px;}
  .nav__phone{font-size:14px;font-weight:600;color:var(--teal);display:flex;align-items:center;gap:6px;}
  .nav__actions .btn{padding:11px 22px;font-size:13.5px;}
  @media (max-width:900px){
    .nav__links{display:none;}
    .nav__logo img {height: 45px;}
    .top-tagline p {font-size: 12px;letter-spacing: 2px;}
  }
  @media (max-width:600px){
    .nav__phone span{display:none;}
  }

.eq-page{
  background:var(--eq-bg),url(assets/img/q-switch-laser-banner-bg.png) center/cover no-repeat;
  color:var(--eq-ink);
  font-family:var(--eq-font-body);
  overflow-x:hidden;
}

.eq-page h1, .eq-page h2, .eq-page h3{
  font-family:var(--eq-font-display);
  color:var(--eq-teal-900);
  font-weight:600;
  letter-spacing:-0.01em;
}

.eq-page p{
  color:var(--eq-ink-soft);
  line-height:1.7;
}

.eq-kicker{
  display:inline-block;
  font-family:var(--eq-font-body);
  font-size:0.9rem;
  font-weight:600;
  color:var(--eq-teal-700);
  margin-bottom:0.75rem;
}

/* ---------- Section rhythm ---------- */
.eq-section{
  padding:5rem 0;
}
.eq-section--tint{
  background:var(--eq-teal-100);
}
.eq-section__title{
  font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  margin-bottom:1rem;
}
.eq-section__lead{
  font-size:1.05rem;
}
.eq-disclaimer{
  font-size:0.9rem;
  color:var(--eq-ink-soft);
  border-left:3px solid var(--eq-clay-500);
  padding-left:1rem;
}

/* ---------- Buttons ---------- */
.eq-btn{
  font-size: 15px;
  border-radius:999px;
  font-weight:600;
  padding:0.75rem 1.6rem;
  border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.eq-btn:hover{ transform:translateY(-1px); }
.eq-btn--primary{
  background:var(--eq-teal-700);
  border-color:var(--eq-teal-700);
  color:var(--eq-white);
}
.eq-btn--primary:hover{
  background:var(--eq-teal-900);
  border-color:var(--eq-teal-900);
  color:var(--eq-white);
  box-shadow:var(--eq-shadow-soft);
}
.eq-btn--outline{
  background:transparent;
  border-color:var(--eq-teal-700);
  color:var(--eq-teal-700);
}
.eq-btn--outline:hover{
  background:var(--eq-teal-700);
  color:var(--eq-white);
}
.eq-btn--light{
  background:var(--eq-white);
  border-color:var(--eq-white);
  color:var(--eq-teal-900);
}
.eq-btn--light:hover{
  background:var(--eq-beige);
  color:var(--eq-teal-900);
}
.eq-btn--whatsapp{
  background:#25D366;
  border-color:#25D366;
  color:var(--eq-white);
}
.eq-btn--whatsapp:hover{
  background:#1DA851;
  border-color:#1DA851;
  color:var(--eq-white);
}
.eq-btn__spinner{ margin-left:.5rem; }

/* ---------- Hero ---------- */
.eq-hero{
  padding: 2rem 0;
  background-size: cover !important;
}
.eq-hero__title{
  font-size:clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height:1.12;
  margin-bottom:1.1rem;
}
.eq-hero__lead{
  font-size:1.1rem;
  max-width:520px;
  margin-bottom:1.75rem;
}

/* ---------- Lead form card ---------- */
.eq-form-card{
  background:var(--eq-white);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-lg);
  box-shadow:var(--eq-shadow-soft);
  padding:2rem;
}
.eq-form-card--compact{
  padding:1.75rem;
}
.eq-form-card__title{
  font-size:1.4rem;
  margin-bottom:0.25rem;
}
.eq-form-card__sub{
  font-size:0.92rem;
  margin-bottom:1.25rem;
}
.eq-form-card .form-control,
.eq-form-card .form-select{
  border-radius:var(--eq-radius-sm);
  border-color:var(--eq-border);
  padding:0.4rem 0.5rem;
}
.eq-form-card .form-control:focus,
.eq-form-card .form-select:focus{
  border-color:var(--eq-teal-500);
  box-shadow:0 0 0 0.2rem rgba(29,131,113,0.15);
}
.eq-form-card__trust{
  font-size:0.85rem;
  color:var(--eq-ink-soft);
  text-align:center;
  margin-top:1rem;
}

/* ---------- Image placeholder system ----------
   Any <img> using eqImgFallback(this) on error will hide itself and
   reveal a labelled placeholder so the layout still looks complete
   before real photography is added. Swap the src attributes in the
   PHP file with real image paths whenever they're ready. */
.eq-img-frame{
  position:relative;
  width:100%;
  border-radius:var(--eq-radius-lg);
  overflow:hidden;
  background:var(--eq-beige);
  box-shadow:var(--eq-shadow-soft);
}
.eq-img-frame--sm{ box-shadow:none; border-radius:var(--eq-radius-md); }
.eq-img-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.eq-img-frame.eq-img-frame--empty img{ display:none; }
.eq-img-frame.eq-img-frame--empty::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, var(--eq-beige) 25%, transparent 25%) -20px 0/40px 40px,
    linear-gradient(225deg, var(--eq-beige) 25%, transparent 25%) -20px 0/40px 40px,
    var(--eq-teal-100);
}
.eq-img-frame.eq-img-frame--empty::after{
  content:attr(data-placeholder-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  font-family:var(--eq-font-body);
  font-size:0.85rem;
  font-weight:600;
  color:var(--eq-teal-700);
}

/* Aspect ratio helpers */
.eq-ar-1-1{ aspect-ratio:1/1; }
.eq-ar-4-5{ aspect-ratio:4/5; }
.eq-ar-4-3{ aspect-ratio:4/3; }
.eq-ar-16-9{ aspect-ratio:16/9; }
.eq-ar-21-9{ aspect-ratio:21/9; }

/* ---------- Mini cards (About section) ---------- */
.eq-mini-card{
  background:var(--eq-white);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  padding:1.25rem;
  height:100%;
}
.eq-mini-card__icon{
  font-size:1.4rem;
  color:var(--eq-teal-700);
  margin-bottom:0.5rem;
  display:block;
}
.eq-mini-card__title{
  font-size:1rem;
  margin-bottom:0.35rem;
  color:var(--eq-teal-900);
}
.eq-mini-card__text{
  font-size:0.9rem;
  margin-bottom:0;
}

/* ---------- Benefit cards ---------- */
.eq-benefit-card{
  background:var(--eq-white);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  padding:1.75rem 1.5rem;
  height:100%;
  transition:box-shadow .2s ease, transform .2s ease;
}
.eq-benefit-card:hover{
  box-shadow:var(--eq-shadow-soft);
  transform:translateY(-3px);
}
.eq-benefit-card__icon{
  font-size:1.6rem;
  color:var(--eq-clay-500);
  margin-bottom:0.75rem;
  display:block;
}
.eq-benefit-card__title{
  font-size:1.05rem;
  margin-bottom:0.4rem;
}
.eq-benefit-card__text{
  font-size:0.9rem;
  margin-bottom:0;
}

/* ---------- Condition pills ---------- */
.eq-condition-card{
  background:var(--eq-white);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  padding:1.5rem 1rem;
  text-align:center;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
}
.eq-condition-card i{
  font-size:1.5rem;
  color:var(--eq-teal-700);
}
.eq-condition-card span{
  font-weight:600;
  font-size:0.95rem;
  color:var(--eq-teal-900);
}

/* ---------- Steps ---------- */
.eq-steps{ margin-top:1.5rem; }
.eq-step{
  display:flex;
  gap:1.1rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--eq-border);
}
.eq-step:last-child{ border-bottom:none; }
.eq-step__num{
  flex:0 0 auto;
  width:2.5rem;
  height:2.5rem;
  border-radius:50%;
  background:var(--eq-teal-700);
  color:var(--eq-white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--eq-font-display);
  font-weight:600;
}
.eq-step__title{
  font-size:1.05rem;
  margin-bottom:0.25rem;
}
.eq-step__text{ margin-bottom:0; font-size:0.92rem; }

/* ---------- Timeline (tattoo removal process) ---------- */
.eq-timeline{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
  position:relative;
  margin-top:1rem;
}
.eq-timeline__item{
  background:var(--eq-white);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md);
  padding:1.5rem 1.25rem;
  position:relative;
}
.eq-timeline__num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background:var(--eq-clay-500);
  color:var(--eq-white);
  font-family:var(--eq-font-display);
  font-weight:600;
  margin-bottom:0.9rem;
}
.eq-timeline__title{
  font-size:1.02rem;
  margin-bottom:0.4rem;
}
.eq-timeline__text{
  font-size:0.9rem;
  margin-bottom:0;
}
@media (max-width: 991.98px){
  .eq-timeline{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .eq-timeline{ grid-template-columns:1fr; }
}

/* ---------- Treatment area cards ---------- */
.eq-area-card{ text-align:center; }
.eq-area-card__label{
  display:block;
  margin-top:0.75rem;
  font-weight:600;
  color:var(--eq-teal-900);
}

/* ---------- Checklist ---------- */
.eq-checklist{
  list-style:none;
  padding:0;
  margin-top:1.25rem;
  display:grid;
  grid-template-columns:1fr;
  gap:0.75rem;
}
.eq-checklist li{
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  font-weight:500;
  color:var(--eq-ink);
}
.eq-checklist i{
  color:var(--eq-teal-700);
  margin-top:0.2rem;
}

/* ---------- Callout ---------- */
.eq-callout{
  display:flex;
  align-items:center;
  gap:0.75rem;
  background:var(--eq-white);
  border:1px solid var(--eq-border);
  border-left:4px solid var(--eq-teal-700);
  border-radius:var(--eq-radius-md);
  padding:1.1rem 1.4rem;
  margin-top:1.5rem;
  text-align:left;
}
.eq-callout i{
  font-size:1.4rem;
  color:var(--eq-teal-700);
  flex:0 0 auto;
}

/* ---------- Side effects ---------- */
.eq-effect-pill{
  background:var(--eq-white);
  border:1px solid var(--eq-border);
  border-radius:999px;
  padding:0.6rem 1rem;
  font-size:0.9rem;
  color:var(--eq-ink);
}

/* ---------- Care cards ---------- */
.eq-care-card{
  background:var(--eq-white);
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-lg);
  padding:1.75rem;
  height:100%;
}
.eq-care-card__title{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-size:1.15rem;
  margin-bottom:1rem;
}
.eq-care-card ul{
  padding-left:1.1rem;
  margin-bottom:0;
}
.eq-care-card li{
  color:var(--eq-ink-soft);
  margin-bottom:0.5rem;
}

/* ---------- Numbered list (experience) ---------- */
.eq-numbered-list{
  padding-left:1.2rem;
  margin-top:1.25rem;
}
.eq-numbered-list li{
  color:var(--eq-ink-soft);
  margin-bottom:0.6rem;
}
.eq-numbered-list strong{ color:var(--eq-ink); }

/* ---------- FAQ ---------- */
.eq-accordion .accordion-item{
  border:1px solid var(--eq-border);
  border-radius:var(--eq-radius-md) !important;
  margin-bottom:0.75rem;
  overflow:hidden;
}
.eq-accordion .accordion-button{
  font-weight:600;
  color:var(--eq-teal-900);
  background:var(--eq-white);
}
.eq-accordion .accordion-button:not(.collapsed){
  background:var(--eq-teal-100);
  color:var(--eq-teal-900);
  box-shadow:none;
}
.eq-accordion .accordion-button:focus{
  box-shadow:0 0 0 0.2rem rgba(29,131,113,0.15);
}

/* ---------- CTA banner ---------- */
.eq-cta-banner{
  position:relative;
  padding:5rem 0;
  overflow:hidden;
}
.eq-cta-banner__bg{
  position:absolute;
  inset:0;
  border-radius:0;
  aspect-ratio:auto;
  box-shadow:none;
}
.eq-cta-banner__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(14,74,64,0.92) 0%, rgba(14,74,64,0.85) 100%);
}
.eq-cta-banner__content{
  position:relative;
  z-index:2;
}
.eq-cta-banner__title{
  color:var(--eq-white);
  font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  margin-bottom:0.9rem;
}
.eq-cta-banner__text{
  color:rgba(255,255,255,0.88);
  max-width:600px;
  margin:0 auto 1.5rem;
}

/* ---------- Contact ---------- */
.eq-contact__address, .eq-contact__phone{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-size:1.02rem;
  color:var(--eq-ink);
}
.eq-contact__phone a{
  color:var(--eq-teal-700);
  text-decoration:none;
  font-weight:600;
}
.eq-contact__address i, .eq-contact__phone i{ color:var(--eq-teal-700); }
.eq-map-frame{
  width:100%;
  height:100%;
  min-height:350px;
  border-radius:var(--eq-radius-lg);
  overflow:hidden;
  box-shadow:var(--eq-shadow-soft);
}

 /* ---------- Footer ---------- */
  footer{background:#123430;color:rgba(246,241,233,0.65);padding:28px 24px;text-align:center;font-size:13px;}

/* ---------- Mobile sticky CTA bar ---------- */
.eq-mobile-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1030;
  display:flex;
  background:var(--eq-white);
  border-top:1px solid var(--eq-border);
  box-shadow:0 -6px 24px rgba(14,74,64,0.12);
  padding:0.4rem;
  gap:0.4rem;
}
.eq-mobile-bar__item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0.15rem;
  padding:0.55rem 0.25rem;
  border-radius:var(--eq-radius-sm);
  color:var(--eq-teal-900);
  text-decoration:none;
  font-size:0.72rem;
  font-weight:600;
  min-height:52px;
}
.eq-mobile-bar__item i{ font-size:1.15rem; }
.eq-mobile-bar__item--primary{
  background:var(--eq-teal-700);
  color:var(--eq-white);
}
/* Reserve space so the fixed bar never covers content on mobile */
@media (max-width: 991.98px){
  .eq-page{ padding-bottom:74px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce){
  .eq-btn, .eq-benefit-card{ transition:none; }
}