/* ==========================================================================
   LSP — Lagoon Service Page model
   Reusable, mobile-first stylesheet for all treatment pages.
   Prefix: .lsp-  •  Brand: gold #c9a96e
   ========================================================================== */

.lsp-page {
  --lsp-gold: #c9a96e;
  --lsp-gold-dark: #8c734a;
  --lsp-text: #333;
  --lsp-muted: #666;
  --lsp-alt-bg: #faf8f4;
  --lsp-border: #ececec;
  --lsp-white: #fff;
  --lsp-radius: 10px;
  --lsp-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  --lsp-maxw: 1140px;

  color: var(--lsp-text);
  font-family: inherit;
  line-height: 1.6;
  overflow-x: hidden;          /* no horizontal scroll on mobile */
  -webkit-text-size-adjust: 100%;
}

.lsp-page *,
.lsp-page *::before,
.lsp-page *::after { box-sizing: border-box; }

.lsp-page img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
.lsp-page h1,
.lsp-page h2,
.lsp-page h3 { color: var(--lsp-gold); margin: 0 0 .6em; }

.lsp-page h2 {
  text-align: center;
  font-size: 22px;
  line-height: 1.3;
}

.lsp-page h3 { font-size: 18px; }

.lsp-page p { margin: 0 0 1em; }

/* --------------------------------------------------------------------------
   Sections (mobile = edge to edge, full viewport width)
   -------------------------------------------------------------------------- */
.lsp-section {
  padding: 32px 16px;
}

.lsp-section--alt { background: var(--lsp-alt-bg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.lsp-hero {
  padding: 36px 16px;
  text-align: center;
}

.lsp-hero__title {
  font-size: 26px;
  line-height: 1.25;
}

.lsp-hero__lead {
  color: var(--lsp-muted);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   CTA / Buttons
   -------------------------------------------------------------------------- */
.lsp-cta { text-align: center; margin-top: 1.2em; }

.lsp-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
  padding: 14px 28px;
  border: 0;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}

.lsp-btn--primary {
  background: var(--lsp-gold);
  color: var(--lsp-white);
}

.lsp-btn--primary:hover,
.lsp-btn--primary:focus { background: var(--lsp-gold-dark); color: var(--lsp-white); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.lsp-card {
  background: var(--lsp-white);
  border: 1px solid var(--lsp-border);
  box-shadow: var(--lsp-shadow);
  border-radius: 0;            /* mobile: square, edge to edge */
  padding: 16px;               /* inner padding keeps copy off the glass */
  margin: 0 0 16px;
}

.lsp-card__img,
.lsp-card figure { margin: 0 0 12px; }

/* --------------------------------------------------------------------------
   Generic responsive grid (used by offers, tech, image rows, testimonials)
   -------------------------------------------------------------------------- */
.lsp-grid,
.lsp-tech-grid {
  display: grid;
  grid-template-columns: 1fr;  /* mobile: single column */
  gap: 16px;
}

/* --------------------------------------------------------------------------
   Offers
   -------------------------------------------------------------------------- */
.lsp-offer { text-align: center; display: flex; flex-direction: column; }

.lsp-offer__img { margin: 0 0 12px; }
.lsp-offer__img img { width: 100%; }

.lsp-offer__title { margin-bottom: .3em; }
.lsp-offer__desc { color: var(--lsp-muted); }

.lsp-offer__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--lsp-gold-dark);
  margin: .4em 0;
}

.lsp-offer__buy { margin-top: auto; }

.lsp-offer__badge {
  display: inline-block;
  background: var(--lsp-gold);
  color: var(--lsp-white);
  padding: 3px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 auto 6px;
}

.lsp-offer--popular { border-color: var(--lsp-gold); }

/* --------------------------------------------------------------------------
   Checkmark list
   -------------------------------------------------------------------------- */
.lsp-list {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.lsp-list li {
  position: relative;
  padding: 0 0 .5em 28px;
}

.lsp-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--lsp-gold);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   FAQ accordion (<details class="lsp-q">)
   -------------------------------------------------------------------------- */
.lsp-faq .lsp-card { padding: 0 16px; }

.lsp-q {
  border-bottom: 1px solid var(--lsp-border);
  padding: 14px 0;
}

.lsp-q:last-child { border-bottom: 0; }

.lsp-q > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lsp-q > summary::-webkit-details-marker { display: none; }

.lsp-q > summary h3 {
  margin: 0;
  font-size: 16px;
  color: var(--lsp-gold-dark);
  font-weight: 700;
}

.lsp-q > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  color: var(--lsp-gold);
  font-weight: 700;
}

.lsp-q[open] > summary::after { content: "−"; }

.lsp-q > p {
  color: var(--lsp-muted);
  margin: 12px 0 4px;
}

/* --------------------------------------------------------------------------
   Tables (scroll inside a wrapper, never overflow the page)
   -------------------------------------------------------------------------- */
.lsp-page .lsp-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lsp-page table { border-collapse: collapse; width: 100%; }

/* ==========================================================================
   DESKTOP  (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {

  .lsp-page h2 { font-size: 28px; }
  .lsp-page h3 { font-size: 20px; }

  .lsp-hero__title { font-size: 38px; }

  /* centered container with normal padding */
  .lsp-hero,
  .lsp-section {
    max-width: var(--lsp-maxw);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  .lsp-section { padding-top: 56px; padding-bottom: 56px; }

  /* alt bands stay full-bleed; re-center their inner content */
  .lsp-section--alt {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .lsp-section--alt > * {
    max-width: var(--lsp-maxw);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* cards regain radius + side margins on desktop */
  .lsp-card {
    border-radius: var(--lsp-radius);
    padding: 28px;
  }

  .lsp-faq .lsp-card { padding: 8px 28px; }

  /* multi-column grids */
  .lsp-grid,
  .lsp-tech-grid,
  .lsp-offers .lsp-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
  }

  .lsp-card { margin-bottom: 0; }
  .lsp-section > .lsp-card,
  .lsp-section--alt > .lsp-card { margin-bottom: 24px; }
}

/* ============================================================
   SPLIT text | media pe 2 coloane (replica format Divi productie)
   Reguli: spatiu negativ, aliniere, alternare; stivuit pe mobil.
============================================================ */
.lsp-split{ display:flex; gap:48px; align-items:center; margin:0 auto 8px; }
.lsp-split__text{ flex:1 1 0; min-width:0; }
.lsp-split__text > *:first-child{ margin-top:0; }
.lsp-split__media{ flex:1 1 0; min-width:0; }
.lsp-split__media figure{ margin:0; }
.lsp-split__media img{ width:100%; height:auto; display:block; border-radius:12px; }
.lsp-split--rev{ flex-direction:row-reverse; }
@media (max-width:768px){
  .lsp-split, .lsp-split--rev{ flex-direction:column; gap:22px; align-items:stretch; }
}


/* ============================================================
 * Pagina "Abonamente & Pachete cu Plata in Rate" (clase .abn-*)
 * Se incarca prin lsp.css (declansat de .lsp-page in continut).
 * ============================================================ */
.abn-hero{ margin:0 0 6px; }
.abn-hero__pic{ display:block; }
.abn-hero__pic img{ width:100%; height:auto; display:block; border-radius:16px; }
.abn-intro-badge{ display:inline-block; background:#faf7f1; color:var(--lagoon-gold-dark,#8c734a); border:1px solid #e7dcc6; border-radius:999px; padding:6px 16px; font-size:13px; font-weight:600; letter-spacing:.3px; margin:14px 0; font-family:'Montserrat',Arial,sans-serif; text-transform:uppercase; }

.abn-steps__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-top:26px; }
.abn-step{ background:#fff; border:1px solid #ececec; border-radius:16px; padding:24px 22px; }
.abn-step__n{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--lagoon-gold,#c9a96e); color:#fff; font-weight:700; margin-bottom:14px; font-family:'Montserrat',Arial,sans-serif; font-size:16px; }
.abn-step h3{ font-size:17px; margin:0 0 8px; line-height:1.25; }
.abn-step p{ font-size:14.5px; line-height:1.6; color:#5b5b5b; margin:0; }
.abn-note{ margin-top:22px; font-size:14px; color:#6b6b6b; line-height:1.6; }
.abn-note a{ color:var(--lagoon-gold-dark,#8c734a); text-decoration:underline; }

.abn-rate{ display:inline-block; background:#faf7f1; color:var(--lagoon-gold-dark,#8c734a); border:1px solid #e7dcc6; border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:600; font-family:'Montserrat',Arial,sans-serif; }
.lsp-offer__desc .abn-amt{ color:var(--lagoon-gold-dark,#8c734a); font-weight:700; }