/* ===========================================================================
   Weight Loss Agents - 2026 theme (wla2026)
   Design system + chrome + CMS content (prose) + lead form + footer.
   Brand: coral #F0584C / navy #0E2436. Fonts: Sora (display) + Inter (body).
   =========================================================================== */
:root{
  --coral:#F0584C; --coral-dk:#D8443A; --navy:#0E2436; --navy2:#163349; --steel:#4C8FD0;
  --ink:#10202E; --muted:#5C6B79; --line:#E6E9EE; --bg:#F4F6F9; --card:#fff; --cream:#F7F2EA;
  --maxw:1180px; --radius:14px; --radius-lg:20px; --shadow:0 24px 60px -28px rgba(14,36,54,.4);
}
*{box-sizing:border-box}
/* Legacy global all.css sets html{font-size:62.5%} (=10px), which shrinks every rem in
   this theme to 62.5%. The wla2026 CSS is authored for a standard 16px root. all.css loads
   before this sheet, so restoring 100% here wins the cascade. */
html{scroll-behavior:smooth;font-size:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.62;-webkit-font-smoothing:antialiased;min-width:320px}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-dk);text-decoration:none}
a:hover{text-decoration:underline}
#wrapper{overflow:hidden}

/* ---------- header / chrome ---------- */
#site-header{background:var(--navy);position:relative;z-index:40}
.hdr-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:76px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{height:42px;width:auto}
.brand-wm{display:inline-flex;flex-direction:column;line-height:1}
.brand-wm .l1{font-family:Sora,sans-serif;font-weight:800;font-size:1.02rem;color:#fff;letter-spacing:.01em}
.brand-wm .l2{display:flex;justify-content:space-between;width:100%;margin-top:4px}
.brand-wm .l2 b{font-family:Sora,sans-serif;font-weight:700;font-size:.6rem;color:var(--coral)}
.brand-r{font-family:Sora,sans-serif;font-weight:700;font-size:.62rem;color:#fff;align-self:center;line-height:1;margin-left:2px}
.hdr-nav{display:flex;gap:26px;margin-left:8px}
.hdr-nav a{color:#dce5ee;font-weight:600;font-size:.93rem;white-space:nowrap}
.hdr-nav a:hover{color:#fff;text-decoration:none}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.hdr-phone{color:#fff;font-weight:800;font-size:.9rem;white-space:nowrap}
.hdr-phone a{color:#fff}.hdr-phone a:hover{text-decoration:none}
.hdr-login{color:#cdd8e2;font-weight:600;font-size:.86rem;white-space:nowrap}
.hdr-login:hover{color:#fff;text-decoration:none}
.hdr-login.alt{color:#9fb0c0}
.hdr-cta{background:var(--coral);color:#fff;font-weight:700;font-size:.9rem;padding:9px 16px;border-radius:9px;white-space:nowrap}
.hdr-cta:hover{background:var(--coral-dk);color:#fff;text-decoration:none}
/* Language switcher: a clean globe + language-code pill (no flag - a flag implies country,
   not language). Overrides the legacy all.css .tzSelect/.selectBox box + the inline box-shadow
   that language_flags.js injects on hover (hence !important). #languages-block id specificity. */
#languages-block.hdr-lang{position:relative;display:flex;align-items:center;float:none !important}
#languages-block .tzSelect{width:auto !important;height:auto !important;position:relative;background:none !important;border:0 !important;display:flex;align-items:center;float:none !important}
/* legacy all.css sets .tzSelect .selectBox{position:absolute}, which drops the pill out of flow and
   pushes it into the lower half of the row. Force it back into normal flow so flex centering works. */
#languages-block .selectBox{position:static !important;width:auto !important;height:auto !important;min-height:0 !important;border:0 !important;background:rgba(255,255,255,.08) !important;box-shadow:none !important;cursor:pointer;display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;color:#dce5ee;font-weight:700;font-size:.84rem;line-height:1;transition:background .15s,color .15s}
#languages-block .selectBox:hover,#languages-block .selectBox.expanded{border:0 !important;background:rgba(255,255,255,.16) !important;box-shadow:none !important;color:#fff}
#languages-block .lang-globe{display:block;flex:0 0 auto}
#languages-block .lang-code{letter-spacing:.04em}
#languages-block .lang-caret{font-size:.6rem;opacity:.7;margin-left:-1px}
/* Flush with the trigger (no top margin): language_flags.js hides the menu the instant the cursor
   enters any gap between the pill and the menu (geometric mouseout check), so an 8px gap was an
   un-clickable dead zone. Keep it flush; the 6px inner padding gives visual separation. */
#languages-block .dropDown{position:absolute;top:100%;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;list-style:none;margin:0;min-width:140px;z-index:60;box-shadow:var(--shadow)}
#languages-block .dropDown li{display:block;padding:9px 14px;margin:0;cursor:pointer;color:var(--navy);font-weight:600;font-size:.9rem;border-radius:7px;white-space:nowrap;list-style:none}
#languages-block .dropDown li:hover{background:var(--bg);color:var(--coral)}
.hdr-burger{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}

/* ---------- main layout ---------- */
.site-main{background:var(--bg)}
.page-wrap{max-width:var(--maxw);margin:0 auto;padding:40px 24px 64px}
.page-wrap.has-sidebar{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.page-content{min-width:0}

/* ---------- CMS content (prose) - styles authored page bodies ---------- */
.page-content h1,.page-content h2,.page-content h3,.page-content h4{font-family:Sora,sans-serif;color:var(--navy);line-height:1.14;letter-spacing:-.02em;margin:1.4em 0 .5em}
.page-content h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;margin-top:.2em}
.page-content h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800}
.page-content h3{font-size:1.25rem;font-weight:700}
.page-content p{margin:0 0 1.1em;font-size:1.05rem;color:var(--ink)}
.page-content a{color:var(--coral-dk);font-weight:600}
.page-content ul,.page-content ol{margin:0 0 1.2em;padding-left:1.3em}
.page-content li{margin:.35em 0}
.page-content img{border-radius:var(--radius);margin:1em 0}
.page-content hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.page-content blockquote{font-family:Sora,sans-serif;font-size:1.3rem;color:var(--navy);border-left:3px solid var(--coral);padding-left:20px;margin:1.4em 0}
.page-content table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95rem}
.page-content th,.page-content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.page-content th{background:var(--cream);font-weight:700;color:var(--navy)}
/* buttons / CTAs authored in content */
.page-content .btn,.page-content a.button,.btn-ready,a.more{display:inline-flex;align-items:center;gap:.5em;background:var(--coral);color:#fff !important;font-weight:700;padding:.85em 1.5em;border-radius:10px;text-decoration:none;border:0;cursor:pointer;transition:.2s}
.page-content .btn:hover,.btn-ready:hover,a.more:hover{background:var(--coral-dk);text-decoration:none}

/* ---------- lead form (form.php) ---------- */
.wla-form,.comment-form{max-width:var(--maxw);margin:0 auto 56px;padding:34px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.wla-form h2,.comment-form h2{font-family:Sora,sans-serif;color:var(--navy);margin:0 0 4px}
.wla-form label{font-size:.85rem;font-weight:600;color:var(--navy);display:block;margin:12px 0 4px}
.wla-form input[type=text],.wla-form input[type=email],.wla-form input[type=tel],.comment-form input[type=text],.comment-form input[type=email]{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:1rem;font-family:inherit}
.wla-form input:focus{outline:0;border-color:var(--coral)}
.wla-form .btn-ready{margin-top:14px}

/* ---------- footer ---------- */
.info-block{background:var(--cream);border-top:1px solid var(--line);padding:40px 0}
.info-block .frame,.info-block .holder,.info-block .inner,.info-block .content{max-width:var(--maxw);margin:0 auto;padding:0 24px}
#footer{background:#0b1c2b;color:#93a6b6;padding:48px 0 30px;font-size:.92rem}
#footer .footer-holder,#footer .nav-holder{max-width:var(--maxw);margin:0 auto;padding:0 24px}
#footer .nav-holder{display:flex;flex-wrap:wrap;gap:36px}
#footer a{color:#cdd8e2}#footer a:hover{color:#fff}
.footer_column{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;min-width:160px}
.footer_column .ul_header{color:#fff;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.add-nav{list-style:none;padding:0;margin:0}
.add-nav.copyright{width:100%;border-top:1px solid #1c3849;margin-top:24px;padding-top:20px;color:#7d92a4}
.girl-img{display:none}

/* ---------- testimonial excerpt widget (lightSlider) - light restyle ---------- */
#excerpts-slider,.excerpts-wrap{max-width:var(--maxw);margin:0 auto;padding:30px 24px}
#excerpts-slider li{color:var(--ink)}

/* ---------- LegitScript seal ---------- */
.legitscript-seal img{height:64px;width:auto}

/* ---------- sidebar ---------- */
#stock,.sidebar{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .hdr-nav{display:none}
  .hdr-burger{display:block}
  .hdr-nav.open{display:flex;position:absolute;top:76px;left:0;right:0;background:var(--navy2);flex-direction:column;gap:0;padding:8px 24px 16px;z-index:60}
  .hdr-nav.open a{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .hdr-phone,.hdr-login.alt{display:none}
  .page-wrap.has-sidebar{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hdr-inner{gap:10px;padding:0 14px}
  .hdr-login{display:none}
  /* Tighten the right-side group so the hamburger isn't pushed off / clipped at the screen edge. */
  .hdr-actions{gap:9px}
  .hdr-cta{padding:8px 12px;font-size:.84rem}
  .hdr-burger{padding:4px 2px;font-size:1.45rem;flex:0 0 auto}
  .page-wrap{padding:28px 16px 48px}
}

/* ===== wla2026 curated footer ===== */
#site-footer{background:var(--navy);color:#cdd8e2;margin-top:0}
#site-footer .ft-wrap{max-width:1180px;margin:0 auto;padding:54px 24px;display:flex;gap:48px;flex-wrap:wrap}
#site-footer .ft-brand{flex:1 1 280px;min-width:240px}
#site-footer .ft-brandrow{display:flex;align-items:center;gap:20px}
#site-footer .ft-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
#site-footer .ft-logo .brand-mark{height:44px;width:auto}
#site-footer .ft-tag{color:#9fb2c1;font-size:.9rem;line-height:1.6;margin:16px 0 14px}
#site-footer .ft-phone{display:inline-block;color:#fff;font-weight:700;font-size:.92rem;margin-bottom:0}
#site-footer .ft-seal{display:block;line-height:0}
#site-footer .ft-seal img{height:50px;width:auto;display:block}
#site-footer .ft-cols{flex:2 1 560px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
#site-footer .ft-col h4{color:#fff;font-family:Sora,sans-serif;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px}
#site-footer .ft-col a{display:block;color:#aebeca;font-size:.92rem;padding:5px 0;text-decoration:none}
#site-footer .ft-col a:hover{color:#fff}
#site-footer .ft-legal{border-top:1px solid rgba(255,255,255,.1)}
#site-footer .ft-legal-inner{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
#site-footer .ft-copy{color:#7e909e;font-size:.82rem}
#site-footer .ft-legal-links{display:flex;gap:18px;flex-wrap:wrap}
#site-footer .ft-legal-links a{color:#9fb2c1;font-size:.82rem;text-decoration:none}
#site-footer .ft-legal-links a:hover{color:#fff;text-decoration:underline}
@media(max-width:860px){
  #site-footer .ft-cols{flex-basis:100%;grid-template-columns:repeat(2,1fr);gap:22px}
  #site-footer .ft-legal-inner{flex-direction:column;align-items:flex-start}
}

/* ===== price card (replaces legacy sidebar sticker on procedure pages) ===== */
.price-card{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--coral);border-radius:16px;padding:26px 24px;box-shadow:var(--shadow);text-align:center}
.price-card .pc-head{margin-bottom:18px}
.price-card .pc-eyebrow{display:block;font-family:Sora,sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.price-card .pc-amt{display:block;font-family:Sora,sans-serif;font-weight:800;font-size:3rem;line-height:1.05;color:var(--navy);margin-top:4px}
.price-card .pc-amt-text{font-size:1.35rem}
.price-card .pc-cta{display:flex;align-items:center;justify-content:center;gap:.4em;background:var(--coral);color:#fff;font-weight:700;font-size:1rem;padding:14px 18px;border-radius:10px;text-decoration:none;transition:.18s}
.price-card .pc-cta:hover{background:var(--coral-dk);transform:translateY(-2px);color:#fff;text-decoration:none}
.price-card .pc-fin{margin:12px 0 0;font-size:.9rem;color:var(--muted);font-weight:600}
.price-card .pc-note{margin:14px 0 0;font-size:.76rem;color:#90a0ad;line-height:1.5}
@media(max-width:860px){
  .page-wrap.has-sidebar{grid-template-columns:1fr}
  .price-card{position:static;max-width:420px;margin:8px auto 0}
}

/* ===== testimonials (engine markup: .testimonials-list > .testimonial) ===== */
.testimonials-heading{font-family:Sora,sans-serif;color:var(--navy);font-size:1.5rem;margin:0 0 16px}
.testimonial-search{margin:0 0 22px}
.input-search-testimonial{width:100%;max-width:440px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;font-size:1rem;color:var(--ink)}
.testimonials-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.testimonial{background:#fff;border:1px solid var(--line);border-top:3px solid var(--coral);border-radius:14px;padding:22px 24px;overflow:hidden}
.testimonial h3{font-family:Sora,sans-serif;font-size:1.02rem;line-height:1.32;margin:0 0 10px;color:var(--navy);font-weight:700}
/* The shared public_cms_themes/testimonials.php inline style sets .testimonial h3{margin-bottom:-7px;
   margin-left:12px} (loaded in <body>, so it beats the theme rule above). The negative bottom margin
   pulls the photo up so it touches the title. Override with id-level specificity (cards live in
   #content.testimonials-list) to give the title proper breathing room and align it with the body. */
#content.testimonials-list .testimonial h3{margin:0 0 14px;line-height:1.3}
.testimonial h3 a,.testimonial .green-text{color:var(--navy);text-decoration:none}
.testimonial h3 a:hover{color:var(--coral)}
.testimonial p{font-size:.95rem;line-height:1.6;color:var(--ink);margin:0}
.testimonial img{width:76px !important;height:76px !important;object-fit:cover;border-radius:10px;margin:2px 14px 4px 0 !important;padding:0 !important;border:0}
.testimonials-pagination,.search-pagination{margin:28px 0 0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;list-style:none;padding:0}
/* Border the actual buttons only: the page links (<a>) and the current-page span (.pg-current).
   NOT generic spans — prev/next/first/last are <span class="pg-next"><a>…</a></span> wrappers, and
   bordering the wrapper AND its inner <a> produced the double border. */
.testimonials-pagination a,.testimonials-pagination .pg-current,.search-pagination a,.search-pagination .pg-current{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--navy);text-decoration:none;font-weight:600;font-size:.9rem}
.testimonials-pagination a:hover,.testimonials-pagination .active,.search-pagination a:hover,.search-pagination .active{background:var(--coral);color:#fff;border-color:var(--coral)}
/* gallery/search pagination engine markup: span.pg-current (current page), span.pg-next>a / span.pg-prev>a (so don't double-border the wrapper), i (count text) */
.search-pagination .pg-current{background:var(--coral);color:#fff !important;border-color:var(--coral)}
.testimonials-pagination .pg-next,.testimonials-pagination .pg-prev,.testimonials-pagination .pg-first,.testimonials-pagination .pg-last,.search-pagination .pg-next,.search-pagination .pg-prev,.search-pagination .pg-first,.search-pagination .pg-last{display:inline-flex;border:0 !important;background:none !important;padding:0 !important;min-width:0 !important;height:auto !important}
.search-pagination a:hover{background:var(--coral);color:#fff !important;border-color:var(--coral)}
.search-pagination i{display:inline-flex;align-items:center;border:0;background:none;color:var(--muted);font-style:normal;font-weight:400;font-size:.85rem;min-width:0;height:auto;margin-left:8px}
@media(max-width:700px){.testimonials-list{grid-template-columns:1fr}}

/* ===== CMS prose readability (override legacy light-text classes like .propositions-list) ===== */
.page-content .propositions-list,.page-content .propositions-list *{color:var(--ink)}
.page-content .propositions-list a,.page-content a{color:var(--coral-dk)}
.page-content .propositions-list{font-size:1.05rem;line-height:1.7}
.page-content .btn{display:inline-block;background:var(--coral);color:#fff;font-weight:700;padding:13px 22px;border-radius:10px;text-decoration:none;margin-top:8px}
.page-content .btn:hover{background:var(--coral-dk);color:#fff}

/* ===== testimonials: override legacy engine styles (scoped to beat inline #pagination/.green-button) ===== */
.testimonials-wrap .testimonial-search{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 26px}
.testimonials-wrap .search-block{margin:0}
.testimonials-wrap .input-search-procedure-group,.testimonials-wrap .input-search-testimonial{padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;color:var(--ink);background:#fff;height:auto;min-width:200px}
.testimonials-wrap .green-button{background:var(--coral) !important;background-image:none !important;border:0 !important;color:#fff !important;font-weight:700 !important;font-size:.95rem !important;padding:12px 22px !important;border-radius:10px !important;cursor:pointer;height:auto !important;text-shadow:none !important;box-shadow:none !important}
.testimonials-wrap .green-button:hover{background:var(--coral-dk) !important}
.testimonials-wrap #pagination{font-size:1rem !important;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:30px 0 0;padding:0}
.testimonials-wrap #pagination a,.testimonials-wrap #pagination .pg-current,.testimonials-wrap #pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:9px;color:var(--navy) !important;text-decoration:none !important;font-weight:700;background:#fff}
.testimonials-wrap #pagination .pg-current{background:var(--coral) !important;color:#fff !important;border-color:var(--coral)}
.testimonials-wrap #pagination a:hover{background:var(--bg);color:var(--coral) !important}

/* ===== Single testimonial detail page (#content beats legacy light-text id rules by specificity) ===== */
.page-content #content{color:var(--ink);font-size:1.05rem;line-height:1.7}
.page-content #content li,.page-content #content p,.page-content #content strong,.page-content #content ul{color:var(--ink)}
.page-content #content a{color:var(--coral-dk);font-weight:600}
.page-content #content ul{margin:0 0 1.2em;padding-left:1.3em}
.page-content #content .testimonial-images{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.page-content #content .testimonial-images li{float:none !important;margin:0}
/* prev/next nav + back link. The shared wrapper (public_cms_themes/testimonials.php) sets an inline
   .testimonial-nav{font-size:1.1em} + a{font-weight:bold}, which rendered as oversized coral text that
   wrapped ("Previous / testimonial"). Override with higher specificity to a clean, tidy nav. */
.page-content .testimonial-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:32px 0 4px;font-size:1rem;border-top:1px solid var(--line);padding-top:18px}
.page-content .testimonial-nav a{font-size:.9rem;font-weight:700;color:var(--coral);white-space:nowrap;text-decoration:none}
.page-content .testimonial-nav a:hover{color:var(--coral-dk);text-decoration:underline}
.page-content .back{margin-top:16px}
.page-content .back a{font-size:.9rem;font-weight:600;color:var(--coral);text-decoration:none}
.page-content .back a:hover{text-decoration:underline}

/* ===== testimonials grid: the legacy engine outputs a <div style="clear:both"> spacer after EVERY card,
   plus pagination/disclaimer, as direct children of #content. In the CSS grid those become phantom items
   that scatter the real cards into alternating cells. Drop the spacers; span the rest full-width. ===== */
.testimonials-list > [style*="clear"]{display:none !important}
.testimonials-list > :not(.testimonial){grid-column:1 / -1}

/* ===== CMS prose lists: legacy all.css paints a green-check bg.gif on EVERY .page-content li
   (list-style:none; padding-left:28px). Wrong for legal/consent prose (e.g. green checks beside
   "Potential Risks of Telehealth"). Restore clean brand bullets. ===== */
.page-content ul{list-style:none;padding-left:0;margin:0 0 1.2em}
.page-content ul > li{background:none !important;list-style:none;padding-left:1.4em;position:relative}
.page-content ul > li::before{content:"\2022";color:var(--coral);font-weight:700;position:absolute;left:.25em;top:-.02em}
.page-content ol{list-style:decimal outside;padding-left:1.5em;margin:0 0 1.2em}
.page-content ol > li{background:none !important;padding-left:.2em}
/* image gallery on the single-testimonial page is a ul: no bullets, no indent */
.page-content .testimonial-images{padding-left:0}
.page-content .testimonial-images > li{padding-left:0}
.page-content .testimonial-images > li::before{content:none}
/* procedures tree (#groups-master-container) sets li{padding:0} inline, which collapsed the bullet onto the
   text; restore a left gutter so the coral bullet sits left of each label (id-scoped to beat the inline rule) */
.page-content #groups-master-container li{padding-left:1.25em;position:relative}

/* Hide the reCAPTCHA v3 badge (injected site-wide by public_cms for the legacy lead form, which
   the wla2026 theme doesn't use). visibility:hidden keeps it functional if any page does execute it;
   the required Google attribution lives in the footer legal line. */
.grecaptcha-badge{visibility:hidden!important}
