/* ============================================================
   Launch Jacker OS — Frontend Styles
   ============================================================

   THEME CUSTOMISATION
   Override any of these custom properties in your theme's
   stylesheet to restyle the plugin without editing plugin files.

   Example (in your theme's style.css or child theme):

     :root {
       --ljos-primary:        #e8440c;   /* swap CTA blue for orange */
       --ljos-accent:         #ff9900;   /* swap gold for Amazon orange */
       --ljos-accent-dark:    #1a1a1a;
       --ljos-btn-urgent:     #cc0000;
       --ljos-bonus-claim:    #16a34a;
     }

   ============================================================ */

:root {
  /* ── Colour palette ──────────────────────────── */
  --ljos-primary:          #0a6fc2;   /* CTA primary, links                  */
  --ljos-secondary:        #1d2327;   /* CTA secondary, bonus badge bg       */
  --ljos-accent:           #f5c518;   /* Gold — bonus badge text, badge icon */
  --ljos-accent-dark:      #1a1a1a;   /* Dark paired with gold               */
  --ljos-btn-urgent:       #d63638;   /* Urgent CTA, bonus claim button      */
  --ljos-bonus-claim:      #27ae60;   /* Big green claim button              */
  --ljos-pros-bg:          #f0fdf4;
  --ljos-pros-border:      #86efac;
  --ljos-pros-text:        #15803d;
  --ljos-cons-bg:          #fff5f5;
  --ljos-cons-border:      #fca5a5;
  --ljos-cons-text:        #b91c1c;
  --ljos-retail-bg:        #fef3c7;
  --ljos-retail-text:      #92400e;
  --ljos-retail-border:    #fcd34d;

  /* ── Neutral / UI ────────────────────────────── */
  --ljos-border:           #dde1e7;
  --ljos-bg-light:         #f4f6f9;
  --ljos-bg-pre:           #f8f9fa;
  --ljos-bg-expired:       #f5f5f5;
  --ljos-text-primary:     #1a1a1a;
  --ljos-text-muted:       #888;
  --ljos-text-body:        #374151;
  --ljos-text-sub:         #555;
  --ljos-text-byline:      #999;
  --ljos-text-sep:         #bbb;
  --ljos-text-expired:     #666;
  --ljos-text-phase:       #50575e;
  --ljos-text-disclosure:  #aaa;
  --ljos-countdown-expired: #c0392b;
  --ljos-hr:               #e5e7eb;
  --ljos-disclosure-border:#f0f0f0;
  --ljos-star-empty:       #ddd;
  --ljos-star-filled:      #f5a623;

  /* ── Surface colours (card bg, footer, button text) ──────── */
  --ljos-bg-card:          #fff;    /* countdown inner, bonus card bg      */
  --ljos-bg-footer:        #f9f9f9; /* bonus footer strip bg               */
  --ljos-border-footer:    #eee;    /* bonus footer strip border           */
  --ljos-text-desc:        #444;    /* bonus description text              */
  --ljos-text-btn:         #fff;    /* button text (always white)          */
}

/* ── Wrapper ───────────────────────────────────────────────── */
.ljos-review {
	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: inherit;
}

/* ── Timer (top) ───────────────────────────────────────────── */
.ljos-review__timer-top {
	margin-bottom: 28px;
}
.ljos-review__timer-top .ljos-countdown {
	margin: 0;
}

/* ── Countdown ─────────────────────────────────────────────── */
.ljos-countdown {
	text-align: center;
	margin: 20px 0;
}

.ljos-countdown__inner {
	display: inline-block;
	border: 1px solid var(--ljos-border, #dde1e7);
	border-radius: 10px;
	padding: 16px 28px 12px;
	background: var(--ljos-bg-card, #fff);
	box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

.ljos-countdown__label {
	font-size: 0.72em;
	font-weight: 700;
	color: var(--ljos-text-muted, #888);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.ljos-countdown__display {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
}

.ljos-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 50px;
}

.ljos-countdown__num {
	font-size: 1.9em;
	font-weight: 700;
	color: var(--ljos-secondary, #1d2327);
	line-height: 1;
	background: var(--ljos-bg-light, #f4f6f9);
	border: 1px solid var(--ljos-border, #dde1e7);
	border-radius: 5px;
	padding: 6px 10px;
	min-width: 50px;
	text-align: center;
}

.ljos-countdown__label-unit {
	font-size: 9px;
	color: var(--ljos-text-byline, #999);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 4px;
}

.ljos-countdown__sep {
	font-size: 1.9em;
	font-weight: 700;
	color: var(--ljos-text-sep, #bbb);
	line-height: 1;
	padding: 6px 2px 0;
}

.ljos-countdown__expired {
	color: var(--ljos-countdown-expired, #c0392b);
	font-weight: 600;
	margin-top: 10px;
	font-size: 0.9em;
}

/* ── Header ────────────────────────────────────────────────── */
.ljos-review__header {
	text-align: center;
	margin-bottom: 28px;
}

.ljos-review__title {
	font-size: 2.1em;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	margin: 0 0 8px;
	color: var(--ljos-text-primary, #1a1a1a);
}

.ljos-review__byline {
	font-size: 0.72em;
	color: var(--ljos-text-byline, #999);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	margin: 0 0 18px;
}

.ljos-review__hr {
	border: none;
	border-top: 1px solid var(--ljos-hr, #e5e7eb);
	margin: 0 auto 18px;
	width: 60%;
}

.ljos-review__subtitle {
	font-size: 1.05em;
	font-style: italic;
	font-weight: 400;
	color: var(--ljos-text-sub, #555);
	margin: 0;
}

/* ── Phase states ───────────────────────────────────────────── */
.ljos-phase { margin-bottom: 32px; }

.ljos-phase--pre-launch {
	text-align: center;
	padding: 40px 20px;
	background: var(--ljos-bg-pre, #f8f9fa);
	border-radius: 8px;
}
.ljos-phase--expired {
	text-align: center;
	padding: 40px 20px;
	background: var(--ljos-bg-expired, #f5f5f5);
	border-radius: 8px;
}
.ljos-expired-msg  { font-size: 1.05em; color: var(--ljos-text-expired, #666); }
.ljos-phase__msg   { font-size: 1.05em; color: var(--ljos-text-phase, #50575e); }

/* ── CTA Button ─────────────────────────────────────────────── */
.ljos-cta {
	text-align: center;
	margin: 32px 0;
}

.ljos-cta__btn {
	display: inline-block;
	padding: 18px 52px;
	border-radius: 50px;
	font-size: 1.15em;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	letter-spacing: 0.5px;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 4px 14px rgba(0,0,0,.22);
	text-transform: uppercase;
}

.ljos-cta__btn:hover {
	opacity: .92;
	transform: translateY(-2px);
	box-shadow: 0 7px 20px rgba(0,0,0,.28);
}

.ljos-cta__btn--primary   { background: var(--ljos-primary, #0a6fc2);    color: var(--ljos-text-btn, #fff); }
.ljos-cta__btn--secondary { background: var(--ljos-secondary, #1d2327);  color: var(--ljos-text-btn, #fff); }
.ljos-cta__btn--urgent    { background: var(--ljos-btn-urgent, #d63638); color: var(--ljos-text-btn, #fff); }

/* ── Disclosure ─────────────────────────────────────────────── */
.ljos-disclosure {
	font-size: 10px;
	color: var(--ljos-text-disclosure, #aaa);
	font-style: italic;
	text-align: center;
	margin: 40px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ljos-disclosure-border, #f0f0f0);
	line-height: 1.5;
}

/* ── Bonus Stack ────────────────────────────────────────────── */
.ljos-bonuses {
	margin: 36px 0;
}

.ljos-bonuses__banner {
	background: var(--ljos-accent-dark, #1a1a1a);
	color: var(--ljos-accent, #f5c518);
	font-size: 1.1em;
	font-weight: 900;
	text-align: center;
	padding: 10px 20px;
	border-radius: 6px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.ljos-bonuses__banner-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--ljos-accent, #f5c518);
	color: var(--ljos-accent-dark, #1a1a1a);
	font-weight: 900;
	font-size: 1em;
	border-radius: 4px;
	margin-right: 6px;
	flex-shrink: 0;
}

.ljos-bonuses__intro {
	text-align: center;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--ljos-primary, #0a6fc2);
	margin: 0 0 24px;
}

.ljos-bonuses__list {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.ljos-bonus {
	border: 1px solid var(--ljos-border, #dde1e7);
	border-radius: 10px;
	overflow: hidden;
	background: var(--ljos-bg-card, #fff);
	box-shadow: 0 2px 10px rgba(0,0,0,.07);
	display: flex;
	flex-direction: column;
}

.ljos-bonus__badge {
	background: var(--ljos-accent-dark, #1a1a1a);
	color: var(--ljos-text-btn, #fff);
	font-size: 0.7em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 6px 16px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ljos-bonus__badge-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--ljos-accent, #f5c518);
	color: var(--ljos-accent-dark, #1a1a1a);
	font-size: 1.1em;
	font-weight: 900;
	border-radius: 50%;
	flex-shrink: 0;
}

.ljos-bonus__image--full {
	width: 100%;
	line-height: 0;
}

.ljos-bonus__image--full img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.ljos-bonus__body {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ljos-bonus__title {
	font-size: 1.2em;
	font-weight: 800;
	color: var(--ljos-accent, #f5c518);
	background: var(--ljos-accent-dark, #1a1a1a);
	display: block;
	padding: 4px 10px;
	border-radius: 3px;
	margin: 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.ljos-bonus__desc {
	font-size: 0.92em;
	color: var(--ljos-text-desc, #444);
	margin: 0;
	line-height: 1.6;
}
.ljos-bonus__desc p {
	margin: 0 0 0.75em;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
}
.ljos-bonus__desc p:last-child { margin-bottom: 0; }

.ljos-bonus__cta {
	display: inline-block;
	padding: 9px 18px;
	background: var(--ljos-btn-urgent, #d63638);
	color: var(--ljos-text-btn, #fff);
	font-size: 0.78em;
	font-weight: 800;
	text-decoration: none;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: opacity .15s;
	align-self: flex-start;
}
.ljos-bonus__cta:hover { opacity: .85; }

.ljos-bonus__footer {
	padding: 14px 24px;
	background: var(--ljos-bg-footer, #f9f9f9);
	border-top: 1px solid var(--ljos-border-footer, #eee);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ljos-bonus__claim-btn {
	display: inline-block;
	padding: 12px 32px;
	background: var(--ljos-bonus-claim, #27ae60);
	color: var(--ljos-text-btn, #fff);
	font-size: 0.85em;
	font-weight: 800;
	text-decoration: none;
	border-radius: 5px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	transition: opacity .15s, transform .15s;
}
.ljos-bonus__claim-btn:hover {
	opacity: .9;
	transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
	.ljos-review__title      { font-size: 1.6em; }
	.ljos-countdown__num     { font-size: 1.5em; min-width: 40px; }
	.ljos-countdown__inner   { padding: 12px 16px 10px; }
	.ljos-cta__btn           { padding: 16px 32px; font-size: 1em; width: 100%; box-sizing: border-box; }
	.ljos-review__hr         { width: 80%; }
}

/* ── Star Rating ──────────────────────────────────────────────── */
.ljos-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 4px;
}
.ljos-rating__stars {
	display: flex;
	gap: 2px;
}
.ljos-rating__star {
	font-size: 24px;
	color: var(--ljos-star-empty, #ddd);
	line-height: 1;
}
.ljos-rating__star--filled {
	color: var(--ljos-star-filled, #f5a623);
}
.ljos-rating__label {
	font-size: 18px;
	font-weight: 700;
	color: var(--ljos-text-primary, #1a1a1a);
}

/* ── Pros & Cons ─────────────────────────────────────────────── */
.ljos-pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 28px 0;
}
@media (max-width: 600px) {
	.ljos-pros-cons { grid-template-columns: 1fr; }
}
.ljos-pros-cons__col {
	border-radius: 10px;
	padding: 18px 20px;
}
.ljos-pros-cons__col--pros {
	background: var(--ljos-pros-bg, #f0fdf4);
	border: 1px solid var(--ljos-pros-border, #86efac);
}
.ljos-pros-cons__col--cons {
	background: var(--ljos-cons-bg, #fff5f5);
	border: 1px solid var(--ljos-cons-border, #fca5a5);
}
.ljos-pros-cons__heading {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
}
.ljos-pros-cons__heading--pros { color: var(--ljos-pros-text, #15803d); }
.ljos-pros-cons__heading--cons { color: var(--ljos-cons-text, #b91c1c); }
.ljos-pros-cons__icon { font-size: 16px; }
.ljos-pros-cons__list {
	margin: 0;
	padding: 0 0 0 18px;
}
.ljos-pros-cons__list li {
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ljos-text-body, #374151);
}

/* ── Review Body ─────────────────────────────────────────────── */
.ljos-review__body {
	margin: 24px 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ljos-text-body, #374151);
}
.ljos-review__body h2,
.ljos-review__body h3 { margin-top: 1.5em; }

/* ── Bonus Retail Value Badge ────────────────────────────────── */
.ljos-bonus__retail {
	display: inline-block;
	background: var(--ljos-retail-bg, #fef3c7);
	color: var(--ljos-retail-text, #92400e);
	border: 1px solid var(--ljos-retail-border, #fcd34d);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 12px;
	margin: 6px 0 8px;
	text-transform: uppercase;
	letter-spacing: .3px;
}

/* ── Funnel / OTO Table [ljos_funnel] ───────────────────────── */
.ljos-funnel {
	margin: 24px 0;
}
.ljos-funnel__row {
	padding: 16px 0;
	border-bottom: 1px solid var(--ljos-border, #e5e7eb);
}
.ljos-funnel__row:last-child { border-bottom: none; }
.ljos-funnel__row--fe .ljos-funnel__label {
	color: var(--ljos-accent, #1d4ed8);
}
.ljos-funnel__header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}
.ljos-funnel__label {
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--ljos-text-heading, #111827);
	white-space: nowrap;
}
.ljos-funnel__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ljos-text-heading, #111827);
	line-height: 1.3;
}
.ljos-funnel__pricing {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 6px;
	font-size: 15px;
}
.ljos-funnel__price {
	font-weight: 700;
	color: var(--ljos-text-heading, #111827);
}
.ljos-funnel__ds-sep {
	color: var(--ljos-text-muted, #6b7280);
}
.ljos-funnel__ds-price {
	color: var(--ljos-text-muted, #6b7280);
}
.ljos-funnel__comm {
	display: none;
}
.ljos-funnel__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ljos-text-body, #374151);
}