/* Land One — by Amir Masoud Akbari */
:root {
  --lp-bg: #ffffff;
  --lp-text: #1a1a1a;
  --lp-accent: #d4a373;
  --lp-accent-dark: #b5835a;
  --lp-muted: #f5f5f5;
  --lp-radius: 12px;
  --lp-max-w: 720px;
  --lp-success: #27ae60;
  --lp-danger: #e74c3c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Browsers never inherit font-family into form controls by default (their
   own UA stylesheet sets one explicitly), so every <button>/<input>/
   <select>/<textarea> on the page — not just inside the checkout modal —
   would otherwise render in the browser's system font (often Arial-like)
   instead of the page's own font, even though everything else here does
   inherit it correctly. */
button, input, select, textarea { font-family: inherit; }
body.landing-platform,
.landing-platform {
  /* Overridden per-site from Settings (رنگ دکمه/فونت) via an inline
     <style> block landing-default.php prints after this stylesheet —
     every theme below sets its OWN --lp-accent/--lp-accent-dark, so that
     override must match or exceed a theme selector's specificity
     (see the comment there) to actually win instead of being silently
     shadowed by whichever theme is active. */
  font-family: var(--lp-font, "Vazirmatn", "Tahoma", system-ui, sans-serif);
  background: var(--lp-bg);
  color: var(--lp-text);
  line-height: 1.8;
  direction: rtl;
  max-width: 100%;
  overflow-x: hidden;
}
.container { max-width: var(--lp-max-w); margin: 0 auto; padding: 0 1.5rem; }
img { max-width: 100%; height: auto; }

/* Logo */
.lp-logo { text-align: center; padding: 1.5rem 0; }
.lp-logo img { max-height: 60px; width: auto; }
.lp-logo.small img { max-height: 40px; }
.lp-logo.large img { max-height: 80px; }

/* Hero */
.lp-hero { background: linear-gradient(135deg, #faf8f5 0%, #fff 100%); padding: 4rem 0 3rem; text-align: center; }
.lp-hero h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; }
.lp-hero .sub { font-size: 1.1rem; color: #555; max-width: 600px; margin: 0 auto; }
.lp-countdown { margin-top: 1.5rem; font-size: 1.4rem; font-weight: 700; color: var(--lp-accent-dark); font-variant-numeric: tabular-nums; }
/* Countdown numbers read left-to-right (day, the largest unit, on the far
   left) even though the rest of the page is RTL — this is the one place on
   the page where LTR is the readable order, so only this container (not its
   Persian labels' internal text, which stays however the browser shapes
   Persian script regardless of container direction) gets direction: ltr. */
.lp-countdown-cards { display: flex; direction: ltr; justify-content: center; align-items: stretch; gap: .6rem; flex-wrap: wrap; }
.lp-countdown-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 4.4rem; padding: .6rem .4rem .5rem;
  background: var(--lp-accent); color: var(--lp-accent-text, #fff);
  border-radius: var(--lp-radius); line-height: 1.2;
}
.lp-countdown-value { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-countdown-label { font-size: .8rem; font-weight: 500; opacity: .9; margin-top: .15rem; }
/* A value swap every second is a strong motion cue for anyone sensitive to
   it; only animate when the visitor hasn't asked the OS to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  .lp-countdown-value { transition: transform .15s ease, opacity .15s ease; }
}
.lp-countdown-ended-text { margin-top: 1.5rem; font-size: 1.4rem; font-weight: 700; color: var(--lp-danger); }
.lp-countdown-sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
@media (max-width: 480px) {
  .lp-countdown-card { min-width: 3.6rem; padding: .5rem .3rem .4rem; }
  .lp-countdown-value { font-size: 1.3rem; }
  .lp-countdown-label { font-size: .7rem; }
}

/* Banner */
/* object-fit: contain (not cover) so the full banner is always visible —
   cover forces a crop whenever the image's aspect ratio doesn't exactly
   match this box's, which on wide desktop containers often cut off a
   meaningful chunk of a banner designed for a narrower/taller crop. */
.lp-hero picture { display: block; }
.lp-banner { width: 100%; max-height: 500px; object-fit: contain; border-radius: var(--lp-radius); margin-bottom: 2rem; display: block; margin-inline: auto; }
/* When a mobile-specific banner is set, only one of the two <img> tags is
   ever shown per viewport — swapped at the same breakpoint the rest of the
   layout uses, so the two never both render or both hide at once. */
.lp-banner-mobile { display: none; }

/* Gallery */
.lp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; padding: 2rem 0; }
.lp-gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--lp-radius); }

/* Product */
.lp-product { padding: 3rem 0; }
.product-box { display: flex; gap: 1.5rem; align-items: center; background: var(--lp-muted); border-radius: var(--lp-radius); padding: 1.5rem; }
.product-box img { width: 180px; height: 180px; object-fit: cover; border-radius: var(--lp-radius); flex-shrink: 0; }
.product-box .info { flex: 1; }
.product-box h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.price-row { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; flex-wrap: wrap; }
.price-row .old { text-decoration: line-through; color: #999; font-size: 1rem; }
.price-row .new { font-size: 1.6rem; font-weight: 800; color: var(--lp-accent-dark); }
.price-row .badge { background: var(--lp-danger); color: #fff; font-size: .75rem; padding: .25rem .6rem; border-radius: 6px; }

/* Installment */
.lp-installment { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; padding: .75rem 1rem; background: #e8f5e9; border-radius: var(--lp-radius); }
.lp-installment img { height: 30px; width: auto; }
.lp-installment span { font-size: .9rem; color: #2e7d32; }

/* Benefits */
.lp-benefits { padding: 3rem 0; }
.lp-benefits h2 { text-align: center; margin-bottom: 1.5rem; font-size: 1.5rem; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.benefit-item { background: var(--lp-muted); border-radius: var(--lp-radius); padding: 1.25rem; text-align: center; }
.benefit-item .icon { font-size: 2rem; color: var(--lp-accent-dark); margin-bottom: .5rem; }
.benefit-item h3 { font-size: 1rem; margin-bottom: .25rem; }
.benefit-item p { font-size: .85rem; color: #666; }

/* Guarantees */
.lp-guarantees { padding: 2rem 0; }
.guarantees-list { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.guarantee-item { display: flex; align-items: center; gap: .5rem; background: #fff3e0; padding: .5rem 1rem; border-radius: 20px; font-size: .85rem; }
.guarantee-item .dashicons { color: var(--lp-accent-dark); }

/* Shipping */
.lp-shipping { padding: 2rem 0; background: var(--lp-muted); }
.shipping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.shipping-item { text-align: center; padding: 1rem; }
.shipping-item .icon { font-size: 1.5rem; color: var(--lp-accent-dark); }

/* CTA */
.lp-cta-btn, .lp-submit {
  display: inline-block; border: none; background: var(--lp-accent); color: var(--lp-accent-text, #fff); padding: .9rem 2.2rem;
  font-size: 1.05rem; font-weight: 700; border-radius: var(--lp-radius); cursor: pointer; transition: transform .15s, background .15s;
}
.lp-cta-btn.lp-ended, .lp-submit.lp-ended {
  background: #9ca3af; cursor: not-allowed; transform: none !important;
}
.lp-countdown.lp-countdown-ended { color: var(--lp-danger); }
.lp-cta-btn:hover, .lp-submit:hover { background: var(--lp-accent-dark); transform: translateY(-2px); }

/* FAQ */
.lp-faq { padding: 3rem 0; }
.lp-faq h2 { text-align: center; margin-bottom: 1.5rem; font-size: 1.5rem; }
.faq-item { background: var(--lp-muted); border-radius: var(--lp-radius); margin-bottom: .75rem; padding: 1rem 1.25rem; }
.faq-item summary { font-weight: 700; cursor: pointer; list-style: none; }
.faq-item p { margin-top: .75rem; color: #444; }

/* Modal */
/* position/inset/margin are set explicitly (not left to the browser's
   default <dialog> centering) so a host theme's own generic `dialog {}`
   rule — common for slide-out cart/search drawers — can't hijack this
   modal's placement; a class selector always wins over a bare element
   selector, but only for properties we actually declare here. */
.lp-modal {
  position: fixed; inset: 0; margin: auto;
  border: none; border-radius: var(--lp-radius); padding: 2rem;
  max-width: 420px; width: 90%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.lp-modal::backdrop { background: rgba(0,0,0,.45); }
.modal-form h3 { margin-bottom: 1rem; }
.modal-form input, .modal-form textarea { width: 100%; padding: .75rem; margin-bottom: .75rem; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; }
.modal-form textarea { resize: vertical; }
.lp-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; }
.lp-address-heading { margin: .25rem 0 .5rem; font-weight: 700; font-size: .95rem; }
.lp-address input[type="text"]#lp-postcode { direction: ltr; text-align: right; }
/* De-emphasized on purpose: a plain underlined text link, not a bordered
   button, so it never visually competes with the primary CTA above it —
   and a real top margin so it doesn't sit crammed right under it. */
.modal-form .lp-close {
  display: block; background: transparent; color: #888; border: none;
  padding: .4rem; margin: 1rem auto 0; cursor: pointer;
  font-size: .85rem; text-decoration: underline; text-underline-offset: 3px;
}
.modal-form .lp-close:hover { color: #444; }
.lp-msg { margin-top: .75rem; font-size: .9rem; min-height: 1.5rem; }

/* Bale Support */
#lp-bale-support {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: none; align-items: center; gap: .5rem;
  background: var(--lp-bale-bg, #1a1a1a); color: var(--lp-bale-text, #fff); padding: .75rem 1rem;
  border-radius: 50px; text-decoration: none; font-size: .9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .2s, background .2s;
}
#lp-bale-support:hover, #lp-bale-support:focus-visible { background: var(--lp-bale-dark, #000); transform: scale(1.05); }
#lp-bale-support:focus-visible { outline: 2px solid var(--lp-bale-text, #fff); outline-offset: 2px; }
#lp-bale-support img { width: 24px; height: 24px; }
#lp-bale-support .lp-bale-icon { flex-shrink: 0; display: block; }

/* Shortcode */
.landing-platform-shortcode { max-width: var(--lp-max-w); margin: 0 auto; }

/* Status badges */
.lp-status { display: inline-block; padding: .25rem .5rem; border-radius: 4px; font-size: .8rem; }
.lp-status.active { background: #d4edda; color: #155724; }
.lp-status.inactive { background: #f8d7da; color: #721c24; }

/* Mobile */
@media (max-width: 640px) {
  .container { padding: 0 1rem; }
  .product-box { flex-direction: column; text-align: center; }
  .product-box img { width: 100%; height: auto; }
  .lp-hero { padding: 2.5rem 0 2rem; }
  /* Swap to the mobile-specific banner (when one is set) below this
     breakpoint; .lp-banner-mobile itself defaults to hidden above it. */
  .lp-banner-desktop { display: none; }
  .lp-banner-mobile { display: block; }
  .lp-hero h1 { font-size: 1.6rem; }
  .lp-countdown { font-size: 1.1rem; }
  .benefits-grid { grid-template-columns: 1fr; }
  .shipping-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .lp-product-card { padding: .7rem .8rem; gap: .6rem; }
  .lp-product-card img { width: 44px; height: 44px; }
  .lp-product-name { font-size: .85rem; }
  .lp-total-row { flex-wrap: wrap; gap: .4rem; font-size: 1rem; }
  .lp-modal { width: 94%; padding: 1.25rem; max-height: 90vh; }
  .lp-cta-btn, .lp-submit { width: 100%; text-align: center; }
  /* Sit above the sticky price bar as a round icon button. --lp-sticky-h
     is the bar's real measured height (landing.js) — a bar that wraps to
     two lines, has a long translated label, or sits above a notched
     phone's safe-area inset is often taller than the 76px this used to
     just assume, which is exactly what let the button overlap the bar's
     text. 76px is only the fallback for the (rare) case JS hasn't run yet. */
  #lp-bale-support { bottom: calc(var(--lp-sticky-h, 76px) + 12px + env(safe-area-inset-bottom)); right: 12px; padding: .7rem; border-radius: 50%; }
  #lp-bale-support .lp-bale-label { display: none; }
}

@media (max-width: 380px) {
  .lp-hero h1 { font-size: 1.35rem; }
  .modal-form input, .modal-form textarea { font-size: .95rem; padding: .65rem; }
}

/* Product-focused layout (set via the "Layout: focused" admin option) */
.lp-product-focused .lp-hero { background: linear-gradient(135deg, #faf8f5, #fff); padding: 3.5rem 0; text-align: center; }
.lp-product-focused .lp-products-list { max-width: 480px; margin: 0 auto; }

/* Multi-product cards */
.lp-products-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.lp-product-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: var(--lp-muted);
  border: 2px solid transparent; border-radius: var(--lp-radius); padding: .9rem 1rem;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.lp-product-card:has(.lp-product-check:checked) { border-color: var(--lp-accent); background: #fff8f0; }
.lp-product-check { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--lp-accent); }
.lp-product-check:disabled { display: none; }
.lp-product-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
/* The name keeps at least ~9rem; when name + price don't fit side by side the
 * price wraps onto its own line instead of squeezing the name to one word per
 * line and spilling past the card on narrow phones. */
.lp-product-name { flex: 1 1 9rem; min-width: 0; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.lp-product-price { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .1rem .5rem; font-size: .9rem; font-weight: 700; color: var(--lp-accent-dark); text-align: left; }
.lp-product-price > * { white-space: nowrap; }
.lp-product-price s { color: #999; font-weight: 400; }

.lp-discount-badge {
  display: inline-block; background: var(--lp-danger); color: #fff; font-weight: 700;
  font-size: .85rem; padding: .35rem .8rem; border-radius: 20px; margin-bottom: 1rem;
}

.lp-total-row {
  display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem;
  padding: .9rem 1rem; background: var(--lp-muted); border-radius: var(--lp-radius); margin-bottom: 1rem;
}
.lp-total-amount { font-size: 1.3rem; font-weight: 800; color: var(--lp-accent-dark); }
.lp-shipping-fee-row { font-size: .95rem; padding: .55rem 1rem; margin-bottom: .5rem; background: transparent; border: 1px dashed var(--lp-muted); }
.lp-savings-line { text-align: center; font-size: .88rem; color: var(--lp-success, #1b8a5a); margin: -.3rem 0 1rem; }

/* Previously unstyled plain text — easy to miss even once shown, on top
   of the scroll-target bug fixed in landing.js (it used to scroll to the
   product list, which could leave this message itself off-screen). */
.lp-selection-required-msg {
  color: var(--lp-danger); background: var(--lp-danger-tint, #fdecea); font-weight: 700;
  text-align: center; padding: .6rem 1rem; border-radius: var(--lp-radius-sm, 8px); margin-bottom: 1rem;
}
.lp-savings-amount { font-weight: 700; }

/* Sticky mobile checkout bar */
.lp-sticky-bar { display: none; }
@media (max-width: 640px) {
  body.landing-platform { padding-bottom: calc(var(--lp-sticky-h, 76px) + env(safe-area-inset-bottom)); }
  .lp-sticky-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
    background: #fff; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0,0,0,.1);
    transition: transform .25s ease, visibility .25s;
  }
  /* Slid away while the main CTA itself is on screen, so the visitor never
   * sees two identical "sign up" buttons at once. */
  .lp-sticky-bar.lp-sticky-hidden { transform: translateY(110%); visibility: hidden; box-shadow: none; }
  #lp-bale-support { transition: bottom .25s ease; }
  .lp-sticky-off #lp-bale-support { bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* flex:1 + min-width:0 lets this shrink inside the bar's row instead of
     pushing the CTA button out; without it, a long translated label
     (e.g. "جمع با ۷۰٪ تخفیف:") just grew the bar to 2-3 lines, since a
     flex column has no size limit of its own to overflow against. */
  .lp-sticky-total { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: .75rem; color: #666; }
  .lp-sticky-total span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* The amount is the one thing in this bar a buyer must always be able to
     read, so unlike the label above it, it's never ellipsis-clipped — a
     long CTA label or a long sticky-total label text can both still eat
     into this row's shared width (see their own rules), but the amount
     itself keeps shrinking its OWN font-size (via clamp, not cutting
     characters) before it would ever need truncating. */
  .lp-sticky-total .lp-total-amount { display: block; font-size: clamp(.8rem, 4.2vw, 1.05rem); color: var(--lp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* The CTA text is admin-editable and can be long ("همین حالا با تخفیف
     ثبت‌نام کنید…") — keeping it on one fixed-width line (the old
     white-space:nowrap) is what actually squeezed the amount next to it
     down to a sliver on a narrow phone. Letting it wrap to two short lines
     instead keeps the button itself readable AND leaves the amount enough
     room to stay uncut. */
  .lp-sticky-bar .lp-cta-btn { flex: 0 1 auto; max-width: 46%; padding: .7rem 1rem; font-size: .9rem; white-space: normal; text-align: center; line-height: 1.25; }

  /* Third-party floating widgets (live-chat bubbles, WhatsApp buttons…)
   * this plugin doesn't control the markup of. They default to
   * bottom:16-24px, which lands right on top of the sticky bar's total
   * text. body.lp-sticky-bar-visible (toggled in landing.js, set exactly
   * while the bar is actually on screen) pushes the most common ones up
   * by the bar's real height; !important is deliberate here since these
   * widgets reassert their own inline "bottom" style repeatedly and a
   * normal-weight rule would lose that fight. A site using a widget not
   * listed here can add its selector via Settings' "CSS دلخواه" field,
   * following the same pattern.
   */
  body.lp-sticky-bar-visible #tawkchat-container,
  body.lp-sticky-bar-visible .tawk-min-container,
  body.lp-sticky-bar-visible #crisp-client,
  body.lp-sticky-bar-visible .intercom-lightweight-app,
  body.lp-sticky-bar-visible #intercom-container,
  body.lp-sticky-bar-visible #tidio-chat-iframe,
  body.lp-sticky-bar-visible #chat-widget-container,
  body.lp-sticky-bar-visible .zEWidget-launcher,
  body.lp-sticky-bar-visible #launcher,
  body.lp-sticky-bar-visible #drift-widget,
  body.lp-sticky-bar-visible #drift-frame-controller,
  body.lp-sticky-bar-visible #fc_frame,
  body.lp-sticky-bar-visible .fc-widget-launcher-frame {
    bottom: calc(var(--lp-sticky-h, 76px) + env(safe-area-inset-bottom)) !important;
  }
}

/* Order bump */
.lp-bump-offer {
  display: flex; align-items: flex-start; gap: .6rem; text-align: right;
  background: #fff3e0; border: 1px dashed var(--lp-accent); border-radius: var(--lp-radius);
  padding: .75rem; margin-bottom: .75rem; cursor: pointer; font-size: .85rem;
}
.lp-bump-offer input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--lp-accent); }
.lp-bump-offer strong { color: var(--lp-accent-dark); }

/* OTP step */
.lp-step-otp .lp-otp-hint { font-size: .9rem; color: #555; margin-bottom: .75rem; }
#lp-otp-code { text-align: center; letter-spacing: .3rem; font-size: 1.2rem; font-weight: 700; }
.lp-resend-otp {
  width: 100%; background: transparent; border: none; color: var(--lp-accent-dark);
  font-size: .85rem; padding: .5rem; cursor: pointer;
}
.lp-resend-otp:disabled { color: #aaa; cursor: default; }

/* ===== Visual themes (same markup, different skin) ===== */

/* Minimal — monochrome, flat, generous whitespace */
.lp-theme-minimal {
  --lp-accent: #1a1a1a;
  --lp-accent-dark: #000;
  --lp-radius: 4px;
  --lp-muted: #fafafa;
}
.lp-theme-minimal .lp-hero { background: #fff; border-bottom: 1px solid #eee; padding: 5rem 0 3.5rem; }
.lp-theme-minimal .lp-hero h1 { font-weight: 700; }
.lp-theme-minimal .product-box,
.lp-theme-minimal .lp-product-card,
.lp-theme-minimal .lp-total-row,
.lp-theme-minimal .benefit-item { background: #fff; border: 1px solid #eee; }
.lp-theme-minimal .lp-product-card:has(.lp-product-check:checked) { background: #fff; border-color: #1a1a1a; }
.lp-theme-minimal .lp-cta-btn, .lp-theme-minimal .lp-submit { border-radius: 2px; letter-spacing: .02em; }
.lp-theme-minimal .lp-discount-badge { background: #1a1a1a; border-radius: 2px; }

/* Bold — high contrast, urgency-driven */
.lp-theme-bold {
  --lp-accent: #e63946;
  --lp-accent-dark: #b3202c;
  --lp-danger: #ff4d4d;
}
.lp-theme-bold .lp-hero { background: linear-gradient(135deg, #1a1a1a, #2b2b2b); color: #fff; padding: 4.5rem 0; }
.lp-theme-bold .lp-hero .sub { color: #ddd; }
.lp-theme-bold .lp-hero h1 { font-size: 2.5rem; font-weight: 900; }
.lp-theme-bold .lp-countdown { color: #ff6b6b; font-size: 1.6rem; }
.lp-theme-bold .lp-discount-badge { animation: lp-pulse 1.4s ease-in-out infinite; font-size: 1rem; }
.lp-theme-bold .lp-cta-btn, .lp-theme-bold .lp-submit { font-size: 1.15rem; padding: 1.1rem 2.6rem; }
@keyframes lp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Playful — rounded, colorful, family/kids brands. No black/near-black anywhere. */
.lp-theme-playful {
  --lp-bg: #ffffff;
  --lp-text: #232c42;
  --lp-accent: #5e89ff;
  --lp-accent-dark: #4a6fe0;
  --lp-muted: #f6f8fc;
  --lp-radius: 20px;
  --lp-danger: #ec6fa6;
  --lp-playful-teal: #04bda1;
  --lp-playful-teal-tint: #dff6f2;
  --lp-playful-pink-tint: #ffe3ef;
  --lp-playful-peach: #ffb27a;
  --lp-playful-peach-tint: #ffe7d3;
  --lp-playful-mint-tint: #dff6ef;
}
.lp-theme-playful .lp-hero {
  background: #fff; position: relative; overflow: hidden; padding: 4rem 0 3rem;
}
.lp-theme-playful .lp-hero::before,
.lp-theme-playful .lp-hero::after {
  content: ""; position: absolute; z-index: 0; border-radius: 62% 38% 55% 45% / 45% 55% 40% 60%;
}
.lp-theme-playful .lp-hero::before { width: 220px; height: 220px; background: var(--lp-playful-mint-tint); top: -60px; inset-inline-end: -60px; }
.lp-theme-playful .lp-hero::after { width: 160px; height: 160px; background: var(--lp-playful-peach-tint); bottom: -50px; inset-inline-start: -40px; }
.lp-theme-playful .lp-hero .container { position: relative; z-index: 1; }
.lp-theme-playful .lp-hero h1 { color: var(--lp-accent-dark); font-weight: 800; }
.lp-theme-playful .lp-countdown { color: var(--lp-text); background: var(--lp-muted); display: inline-block; padding: .5rem 1rem; border-radius: 999px; }

.lp-theme-playful .lp-banner { border-radius: 24px; }

.lp-theme-playful .product-box,
.lp-theme-playful .lp-product-card {
  border-radius: 18px; background: var(--lp-bg); border: 1.5px solid #e8ecf5;
  box-shadow: 0 12px 24px -18px rgba(35,44,66,.3);
}
.lp-theme-playful .lp-product-card:has(.lp-product-check:checked) {
  border-color: var(--lp-accent); background: #f4f7ff;
  box-shadow: 0 10px 20px -14px rgba(94,137,255,.4);
}
.lp-theme-playful .product-box img,
.lp-theme-playful .lp-product-card img { border-radius: 14px; }

.lp-theme-playful .lp-total-row { background: var(--lp-muted); border: 1.5px solid #e8ecf5; }
.lp-theme-playful .lp-discount-badge { background: var(--lp-playful-pink-tint); color: var(--lp-danger); font-weight: 700; }

.lp-theme-playful .lp-cta-btn,
.lp-theme-playful .lp-submit {
  border-radius: 999px; font-weight: 800; display: inline-flex; align-items: center; gap: .5rem;
  box-shadow: 0 14px 26px -12px rgba(94,137,255,.55);
}
.lp-theme-playful .lp-cta-btn::after { content: "\2190"; font-weight: 700; }
.lp-theme-playful .lp-cta-btn:hover,
.lp-theme-playful .lp-submit:hover { transform: translateY(-2px) scale(1.01); }

.lp-theme-playful .benefit-item,
.lp-theme-playful .shipping-item {
  background: var(--lp-muted); border-radius: 16px; text-align: center;
}
.lp-theme-playful .benefit-item .icon,
.lp-theme-playful .shipping-item .icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--lp-playful-mint-tint);
  display: flex; align-items: center; justify-content: center; margin: 0 auto .6rem; color: var(--lp-playful-teal);
}
.lp-theme-playful .benefits-grid .benefit-item:nth-child(2n) .icon { background: var(--lp-playful-peach-tint); color: var(--lp-playful-peach); }
.lp-theme-playful .benefits-grid .benefit-item:nth-child(3n) .icon { background: #e7ecff; color: var(--lp-accent); }

.lp-theme-playful .guarantee-item { background: var(--lp-playful-teal-tint); color: var(--lp-text); border-radius: 999px; }
.lp-theme-playful .guarantee-item .dashicons { color: var(--lp-playful-teal); }

.lp-theme-playful .lp-faq .faq-item { border-radius: 16px; border: 1.5px solid #e8ecf5; background: #fff; }

.lp-theme-playful .lp-bump-offer { background: var(--lp-playful-pink-tint); border: none; border-radius: 16px; }
.lp-theme-playful .lp-bump-offer strong { color: var(--lp-danger); }

.lp-theme-playful #lp-otp-code,
.lp-theme-playful .modal-form input, .lp-theme-playful .modal-form textarea { border-radius: 14px; }

.lp-theme-playful .lp-sticky-bar { box-shadow: 0 -8px 24px -12px rgba(35,44,66,.25); }

/* Corporate — clean, single confident color, card-based, for courses/B2B/professional sellers */
.lp-theme-corporate {
  --lp-bg: #ffffff;
  --lp-text: #1a1a1a;
  --lp-accent: #0f9c86;
  --lp-accent-dark: #0b7a69;
  --lp-muted: #f6f8f7;
  --lp-radius: 14px;
  --lp-danger: #e23744;
}
.lp-theme-corporate .lp-hero { background: #fff; padding: 3.5rem 0 2rem; }
.lp-theme-corporate .lp-hero h1 { font-weight: 800; }
.lp-theme-corporate .product-box,
.lp-theme-corporate .lp-product-card {
  border-radius: 14px; box-shadow: 0 10px 24px -16px rgba(15,28,25,.35); border-color: transparent;
}
.lp-theme-corporate .lp-product-card:has(.lp-product-check:checked) { border: 1.5px solid var(--lp-accent); }
.lp-theme-corporate .lp-cta-btn,
.lp-theme-corporate .lp-submit { border-radius: 14px; font-weight: 800; }
.lp-theme-corporate .lp-discount-badge { background: var(--lp-danger); }
.lp-theme-corporate .lp-benefits {
  position: relative; background: var(--lp-muted); padding-top: 4rem; margin-top: 2.5rem;
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
}
.lp-theme-corporate .benefit-item {
  background: #fff; text-align: right; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.25rem;
  box-shadow: 0 8px 20px -16px rgba(15,28,25,.4);
}
.lp-theme-corporate .benefit-item .icon {
  width: 40px; height: 40px; border-radius: 10px; background: #eaf7f4; color: var(--lp-accent);
  display: flex; align-items: center; justify-content: center; margin: 0; flex-shrink: 0; font-size: 1.2rem;
}
.lp-theme-corporate .lp-faq .faq-item { border-radius: 12px; border: 1px solid #e6eae8; background: #fff; }

/* ===== Brand wordmark (above the logo) =====
 * Built only from the theme variables, so each skin (classic, playful,
 * corporate…) tints it in its own accent and it reads as part of the page.
 * No letter-spacing: it breaks the joins between Persian letters. */
.lp-brand { padding: 1.4rem 1rem 0; }
.lp-brand__inner {
  max-width: var(--lp-max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
}
.lp-brand__name {
  position: relative; display: inline-block;
  padding: .55rem 1.35rem;
  font-size: clamp(.98rem, 3.4vw, 1.3rem); font-weight: 800; line-height: 1.6;
  color: var(--lp-accent-dark); white-space: nowrap;
  background: var(--lp-muted);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--lp-accent) 9%, var(--lp-bg)),
    color-mix(in srgb, var(--lp-accent) 18%, var(--lp-bg)));
  border: 1px solid color-mix(in srgb, var(--lp-accent) 35%, transparent);
  border-radius: 999px;
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--lp-accent-dark) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.7);
}
.lp-brand__line {
  position: relative; flex: 1 1 0; max-width: 110px; height: 1.5px;
  background: linear-gradient(to left, var(--lp-accent), transparent);
}
.lp-brand__line:first-child { background: linear-gradient(to right, var(--lp-accent), transparent); }
/* A small diamond where each line meets the name. */
.lp-brand__line::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  background: var(--lp-accent); transform: translateY(-50%) rotate(45deg);
}
.lp-brand__line:first-child::after { left: -3px; }
.lp-brand__line:last-child::after { right: -3px; }
.lp-brand + .lp-logo { padding-top: 1rem; }
@media (max-width: 420px) {
  .lp-brand { padding-top: 1rem; }
  .lp-brand__inner { gap: .5rem; }
  .lp-brand__name { padding: .45rem .9rem; white-space: normal; text-align: center; }
  .lp-brand__line { max-width: 34px; }
}
.lp-theme-minimal .lp-brand__name { background: var(--lp-bg); box-shadow: none; }

/* ===== Visitor coupon box (checkout modal) ===== */
.lp-coupon { margin: .25rem 0 .75rem; }
.lp-coupon-row { display: flex; gap: .5rem; align-items: stretch; }
.modal-form .lp-coupon-row input {
  flex: 1; margin-bottom: 0; background: #fff;
  border-style: dashed; border-color: color-mix(in srgb, var(--lp-accent) 45%, #ddd);
}
.lp-coupon-apply {
  flex-shrink: 0; padding: 0 1.1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--lp-accent); background: transparent; color: var(--lp-accent-dark);
  font: inherit; font-weight: 700;
}
.lp-coupon-apply:disabled { opacity: .6; cursor: wait; }
.lp-coupon-msg { font-size: .85rem; margin-top: .35rem; min-height: 0; }
.lp-coupon-msg.is-ok { color: var(--lp-success); }
.lp-coupon-msg.is-error { color: var(--lp-danger); }
.lp-coupon-discount-row { color: var(--lp-success); font-size: .95rem; padding: .55rem 1rem; margin-bottom: .5rem; background: transparent; border: 1px dashed color-mix(in srgb, var(--lp-success) 45%, transparent); }
.lp-theme-playful .lp-coupon-apply { border-radius: 14px; }

/* ===== Public demo mode (حالت نمایشی عمومی) ===== */
.lp-demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .75rem;
  padding: .7rem 1rem; text-align: center; font-size: .86rem; line-height: 1.7;
  color: #e9ecf5; background: linear-gradient(90deg, #121826 0%, #1d2540 50%, #121826 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lp-demo-bar__badge {
  flex-shrink: 0; padding: .1rem .75rem; border-radius: 999px; font-weight: 700; font-size: .8rem;
  color: #f6d58b; background: rgba(246,213,139,.1); border: 1px solid rgba(246,213,139,.45);
}
.lp-demo-bar__text { opacity: .92; }
.lp-demo-success { text-align: center; padding: 1.25rem .5rem .5rem; }
.lp-demo-success__icon {
  width: 3.25rem; height: 3.25rem; margin: 0 auto .85rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800;
  color: #fff; background: var(--lp-success, #16a34a);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--lp-success, #16a34a) 35%, transparent);
}
.lp-demo-success__title { font-weight: 800; font-size: 1.1rem; margin-bottom: .5rem; }
.lp-demo-success__text { margin: 0 auto; max-width: 26rem; font-size: .92rem; line-height: 1.9; opacity: .85; }

/* ===== Inline SVG icons (benefits / guarantees / shipping) ===== */
.lp-icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.benefit-item .icon, .shipping-item .icon { line-height: 1; }
.benefit-item .icon .lp-icon { width: 2.1rem; height: 2.1rem; }
.shipping-item .icon .lp-icon { width: 1.75rem; height: 1.75rem; }
.guarantee-item .lp-icon { width: 1.15rem; height: 1.15rem; color: var(--lp-accent-dark); }
.lp-theme-playful .guarantee-item .lp-icon { color: var(--lp-playful-teal); }

/* ===== Support phone under the checkout form ===== */
.lp-support-line { margin: .75rem 0 0; text-align: center; font-size: .85rem; opacity: .8; }
.lp-support-line a { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px dashed currentColor; unicode-bidi: isolate; }