/* =====================================================================
   Google Ads landing page styles (gads/, gads-laser/)
   Used by resources/views/layout/landing.blade.php and its child views.
   Brand: dark background, peach (#DF7D6F) accent.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --peach: #DF7D6F;
  --peach-soft: rgba(223, 125, 111, 0.18);
  --peach-shadow: rgba(223, 125, 111, 0.45);
  --bg: #000;
  --surface: #1a0e0d;
  --surface-2: #150e0e;
  --line: rgba(223, 125, 111, 0.2);
  --text: #fff;
  --text-dim: #ccc;
  --text-faint: #999;
  --radius: 12px;
}

/* ---------- Generic helpers used by the layout ---------- */
.peach-color { color: var(--peach); }

.btn-pages {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--peach);
  color: var(--text);
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.btn-pages:hover { background: var(--text); color: var(--bg); transform: translateY(-1px); }

.lp-section-title {
  color: var(--text);
  font-size: 2.1em;
  font-weight: 700;
  margin: 0 0 0.4em;
}
.lp-section-sub {
  color: var(--text-dim);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
  font-size: 1em;
}

/* ---------- Utility bar (top of every page) ---------- */
.lp-utility-bar {
  background: #0a0a0a;
  color: var(--text);
  font-size: 0.88em;
  padding: 8px 0;
  border-bottom: 1px solid #1d1d1d;
}
.lp-utility-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
}
.lp-utility-rating svg { color: var(--peach); }
.lp-utility-rating strong { color: var(--text); }
.lp-utility-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--peach) !important;
  font-weight: 600;
  text-decoration: none;
}
.lp-utility-call:hover { color: var(--text) !important; }

/* ---------- Float buttons (WhatsApp + phone) ---------- */
.whatsapp-float-btn,
.phone-float-btn {
  position: fixed;
  width: 50px;
  height: 50px;
  left: 15px;
  border-radius: 50px;
  text-align: center;
  font-size: 24px;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
  color: #fff !important;
}
.whatsapp-float-btn { bottom: 80px; background-color: #25d366; }
.phone-float-btn    { bottom: 140px; background-color: var(--peach); }
.whatsapp-float-btn svg,
.phone-float-btn svg,
.whatsapp-float-btn i,
.phone-float-btn i { color: #fff !important; }

/* ---------- Mobile bottom-bar nav (Email / Appointment / Call) ---------- */
.mobile-sticy-bottom-menu {
  width: 100%;
  position: fixed;
  z-index: 99;
  bottom: 0;
  text-align: center;
  background-color: var(--peach);
  border-top: 1px solid #000;
}
.mobile-sticy-bottom-menu a {
  font-size: 14px;
  color: #fff !important;
  text-decoration: none;
}
.mobile-sticy-bottom-menu a svg,
.mobile-sticy-bottom-menu a i { font-size: 18px; color: #fff !important; }

.small-alert {
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 5px;
  z-index: 9999;
}

/* ---------- HERO ---------- */
.lp-hero {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 24px 0 64px;
  overflow: hidden;
  z-index: 1;
}
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}
.lp-hero-header {
  margin-bottom: 28px;
}
.lp-hero-header .logo { width: 150px; height: auto; }
.lp-hero-row {
  min-height: 0; /* let content drive height instead of 100vh */
}

.lp-hero-headline {
  font-size: 2.6em;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.lp-hero-sub {
  font-size: 1.05em;
  color: #f3f3f3;
  margin-bottom: 1rem;
}
.lp-hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  color: var(--text);
}
.lp-hero-bullets li {
  padding: 5px 0 5px 28px;
  position: relative;
  font-size: 0.98em;
}
.lp-hero-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--text);
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
}
.lp-hero-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--peach);
  color: var(--text) !important;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.05em;
  box-shadow: 0 4px 14px var(--peach-shadow);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lp-hero-call:hover {
  background: var(--text);
  color: var(--peach) !important;
  transform: translateY(-1px);
}
.lp-hero-call i,
.lp-hero-call svg { font-size: 1.05em; }

/* ---------- Form (in hero) ---------- */
.form-box {
  background-color: var(--peach);
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.form-box .form-control {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
}
.form-box .btn-form {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: 600;
  width: 100%;
  border: 0;
  transition: background 0.15s ease;
}
.form-box .btn-form:hover { background-color: #1a1a1a !important; }

.lp-form-title {
  color: var(--text);
  font-size: 1.45em;
  font-weight: 700;
  margin-bottom: 4px;
}
.lp-form-sub {
  color: var(--text);
  font-size: 0.92em;
  margin-bottom: 16px;
  opacity: 0.95;
}
.lp-form-trust {
  margin-top: 12px;
  font-size: 0.8em;
  color: var(--text);
  opacity: 0.9;
  text-align: center;
}

/* ---------- Trust strip (4 stats) ---------- */
.lp-trust-strip {
  background: #0e0e0e;
  padding: 22px 0;
  border-top: 1px solid #1d1d1d;
  border-bottom: 1px solid #1d1d1d;
}
.lp-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 88px;              /* row-gap × column-gap */
  max-width: 1100px;
  margin: 0 auto;
}
.lp-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 0.92em;
  /* item is content-width — no trailing dead space */
}
.lp-trust-item svg { color: var(--peach); font-size: 1.4em; flex-shrink: 0; }
.lp-trust-item span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.lp-trust-item strong {
  color: var(--peach);
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.15;
}

/* ---------- How it works (3 steps) ---------- */
.lp-how {
  background: #0a0a0a;
  padding: 64px 0;
}
.lp-how .lp-section-title { text-align: center; }
.lp-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.lp-how-step {
  background: var(--surface);
  border: 1px solid var(--peach-soft);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  position: relative;
  color: var(--text);
}
.lp-how-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--text);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95em;
}
.lp-how-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--peach-soft);
  color: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
  margin: 8px auto 16px;
}
.lp-how-step h3 {
  color: var(--text);
  font-size: 1.15em;
  font-weight: 600;
  margin: 0 0 10px;
}
.lp-how-step p {
  color: var(--text-dim);
  font-size: 0.95em;
  margin: 0;
  line-height: 1.55;
}

/* ---------- Why choose us (4 cards) ---------- */
.lp-why {
  background: #0e0e0e;
  padding: 64px 0;
}
.lp-why .lp-section-title { text-align: center; }
.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.lp-why-card {
  background: linear-gradient(160deg, #1a0e0d 0%, #0f0807 100%);
  border: 1px solid var(--peach-soft);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.lp-why-card:hover {
  border-color: rgba(223, 125, 111, 0.45);
  transform: translateY(-2px);
}
.lp-why-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--peach-soft);
  color: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  flex-shrink: 0;
}
.lp-why-card h3 {
  color: var(--text);
  font-size: 1.1em;
  font-weight: 600;
  margin: 0 0 6px;
}
.lp-why-card p {
  color: var(--text-dim);
  font-size: 0.93em;
  margin: 0;
  line-height: 1.55;
}

/* ---------- About Dr. Sharma ---------- */
.lp-about {
  background: #050505;
  padding: 64px 0;
}
.lp-about-img {
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  width: 100%;
  height: auto;
  object-fit: cover;
}
.lp-about-eyebrow {
  color: var(--peach);
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.lp-about-name {
  font-size: 2em;
  font-weight: 700;
  margin: 0 0 6px;
}
.lp-about-titles {
  color: var(--text-dim);
  font-size: 1em;
  margin: 0 0 18px;
}
.lp-about p {
  color: var(--text-dim);
  font-size: 0.97em;
  line-height: 1.65;
  margin: 0 0 12px;
}
.lp-about-credentials {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.lp-about-credentials li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: var(--text);
  font-size: 0.95em;
}
.lp-about-credentials li svg {
  color: var(--peach);
  flex-shrink: 0;
  font-size: 1.1em;
}

/* ---------- Service tile overlays (used by specialised + laser sections) ---------- */
.specialized-service { background: #0a0a0a; padding: 64px 0; }
.specialized-service .lp-section-title { text-align: center; }
.img-container-1 {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--peach-soft);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.img-container-1:hover {
  transform: translateY(-2px);
  border-color: rgba(223, 125, 111, 0.5);
}
.img-container-1 img {
  width: 100%;
  height: auto;
  display: block;
}
.img-container-1 [class^="overlay"] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}
.img-container-1 [class^="overlay"] h4 {
  color: var(--text);
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: 0.04em;
  margin: 0;
}

/* ---------- Real Results: 2-up grid ---------- */
.real-result { background: #0e0e0e; padding: 64px 0; }
.real-result .lp-section-title { text-align: center; }
.real-result-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
/* The global .comparison rule in style.css forces width:100% + padding-bottom:100%
   (1:1 square). Override to a contained 4:3 frame so the slider isn't huge. */
.real-result-pair .comparison {
  padding-bottom: 0 !important;
  aspect-ratio: 4 / 3;
  height: auto;
}
.real-result-pair .comparison figure {
  height: 100% !important;
  background-position: center;
}

/* ---------- Patient Testimonials grid ---------- */
.patient-testimonials { background: #050505; padding: 64px 0; }
.patient-testimonials .lp-section-title { text-align: center; }
/* Horizontal scroll instead of 2-row wrap. Each card snaps to start, the
   4th peeks in from the right edge to signal scrollability. Native scrollbar
   is styled subtle so it doesn't fight the dark background. */
.lp-testimonials-grid {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--peach) #1a1a1a;
}
.lp-testimonials-grid::-webkit-scrollbar { height: 8px; }
.lp-testimonials-grid::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 4px; }
.lp-testimonials-grid::-webkit-scrollbar-thumb { background: var(--peach); border-radius: 4px; }
.lp-testimonials-grid .testimonials-box {
  flex: 0 0 360px;
  scroll-snap-align: start;
}
.testimonials-box {
  background: var(--surface);
  border: 1px solid var(--peach-soft);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--text);
}
.testimonials-box p {
  color: var(--text-dim);
  font-size: 0.95em;
  line-height: 1.55;
  margin: 0 0 14px;
}
.g-icon-review { width: 88px; height: auto; }
.testimonials-text h5 {
  color: var(--text);
  font-size: 1em;
  font-weight: 600;
  margin: 0 0 4px;
}
.testimonials-text p {
  color: var(--text-faint);
  font-size: 0.78em;
  margin: 0;
}

/* ---------- FAQ ---------- */
.lp-faq { background: #0a0a0a; padding: 64px 0; }
.lp-faq .lp-section-title { text-align: center; }
.lp-faq-item {
  background: var(--surface);
  border: 1px solid var(--peach-soft);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.lp-faq-q {
  width: 100%;
  background: none;
  border: 0;
  color: var(--text);
  text-align: left;
  font-weight: 600;
  font-size: 1em;
  padding: 16px 50px 16px 18px;
  position: relative;
  cursor: pointer;
}
.lp-faq-q::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--peach);
  font-size: 1.6em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.lp-faq-item.open .lp-faq-q::after { content: "−"; }
.lp-faq-a {
  display: none;
  padding: 0 18px 18px;
  color: var(--text-dim);
  font-size: 0.95em;
  line-height: 1.6;
}
.lp-faq-item.open .lp-faq-a { display: block; }

/* ---------- Final CTA ---------- */
.lp-final-cta {
  background: linear-gradient(135deg, #1a0a08 0%, #0a0505 100%);
  padding: 64px 0;
  border-top: 1px solid var(--peach-soft);
  border-bottom: 1px solid var(--peach-soft);
}
.lp-final-headline {
  color: var(--peach);
  font-size: 2em;
  font-weight: 700;
  margin: 0 0 8px;
}
.lp-final-sub {
  color: var(--text-dim);
  font-size: 1em;
  margin: 0;
}
.lp-final-call { background: var(--bg) !important; color: var(--text) !important; }
.lp-final-call:hover { background: var(--peach) !important; color: var(--text) !important; }

/* ---------- Clinic info / NAP ---------- */
.lp-nap { background: #050505; padding: 56px 0; }
.lp-nap-card {
  background: var(--surface);
  border: 1px solid var(--peach-soft);
  border-radius: var(--radius);
  padding: 32px 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.lp-nap-block {
  text-align: center;
  color: var(--text);
}
.lp-nap-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--peach-soft);
  color: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  margin: 0 auto 14px;
}
.lp-nap-block h3 {
  color: var(--text);
  font-size: 1.05em;
  font-weight: 600;
  margin: 0 0 8px;
}
.lp-nap-block p {
  color: var(--text-dim);
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0 0 8px;
}
.lp-nap-block a {
  color: var(--peach);
  text-decoration: none;
  font-weight: 500;
}
.lp-nap-block a:hover { color: var(--text); }
.lp-nap-closed {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--text-faint);
}

/* ---------- Footer ---------- */
.lp-footer {
  background: var(--bg);
  color: var(--text-faint);
  padding: 24px 0;
  font-size: 0.88em;
  border-top: 1px solid #1a1a1a;
}
.lp-footer a {
  color: var(--peach);
  text-decoration: none;
}
.lp-footer a:hover { color: var(--text); }
.lp-footer .social-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}
.lp-footer .social-icons li a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 0.15s ease;
}
.lp-footer .social-icons li a:hover { background: var(--peach); color: var(--text); }

/* ---------- Honeypot (visually hidden, keeps the field in the DOM) ---------- */
.sticky-bar-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .lp-hero-headline { font-size: 2.1em; }
  .lp-how-grid { grid-template-columns: 1fr; max-width: 540px; }
  .lp-why-grid { grid-template-columns: 1fr; max-width: 540px; }
  .lp-testimonials-grid .testimonials-box { flex: 0 0 320px; }
  .lp-final-headline { font-size: 1.5em; }
}

@media (max-width: 767px) {
  .lp-utility-bar { font-size: 0.78em; padding: 6px 0; }
  .lp-utility-rating { gap: 6px; }
  .lp-hero { padding: 16px 0 40px; }
  .lp-hero-header { margin-bottom: 18px; }
  .lp-hero-header .logo { width: 120px; }
  .lp-hero-headline { font-size: 1.7em; }
  .lp-hero-sub { font-size: 0.95em; }
  .lp-hero-call { width: 100%; justify-content: center; }
  .form-box { padding: 20px; }
  .lp-trust-strip { padding: 14px 0; }
  .lp-trust-row { gap: 14px 40px; }
  .lp-trust-item { font-size: 0.82em; gap: 8px; }
  .lp-trust-item strong { font-size: 1em; }
  .lp-trust-item svg { font-size: 1.1em; }
  .lp-section-title { font-size: 1.55em; }
  .lp-section-sub { font-size: 0.93em; margin-bottom: 1.5rem; }
  .lp-how, .lp-why, .lp-about, .real-result, .patient-testimonials, .lp-faq, .lp-final-cta, .lp-nap { padding: 44px 0; }
  .real-result-pair { grid-template-columns: 1fr; gap: 16px; max-width: 560px; }
  .lp-testimonials-grid .testimonials-box { flex: 0 0 85%; }
  .lp-nap-card { padding: 24px 18px; }
  .lp-footer .row { text-align: center; }
  .lp-footer .social-icons { justify-content: center; }
  /* Account for the fixed mobile bottom-bar nav */
  body { padding-bottom: 64px; }
}

@media (max-width: 575px) {
  .lp-hero-headline { font-size: 1.5em; }
  .lp-utility-rating { font-size: 0.76em; }
}