/* COM Evergreen Elements — see com-evergreen-elements.php for the shortcodes.
   Everything here reads custom properties; a site sets its own values in its
   theme stylesheet (e.g. `:root { --eg-accent: #4ea3ff; }`). The defaults are
   neutral and derived from the text colour, so the elements are legible on a
   light or a dark ground before any site values exist. */

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  --eg-surface:   color-mix(in srgb, currentColor 5%, transparent);
  --eg-surface-2: color-mix(in srgb, currentColor 9%, transparent);
  --eg-line:      color-mix(in srgb, currentColor 16%, transparent);
  --eg-ink:       inherit;          /* names, questions, bonus headline */
  --eg-muted:     color-mix(in srgb, currentColor 65%, transparent);
  --eg-accent:    #1d6fe0;          /* links, rank, markers */
  --eg-cta-bg:    #1d6fe0;
  --eg-cta-ink:   #fff;
  --eg-good:      #15803d;
  --eg-warn:      #b45309;
  --eg-star:      #f5a623;
  --eg-radius:    10px;
  --eg-cta-radius: 999px;
  --eg-display:   inherit;          /* headline face */
}

.eg { box-sizing: border-box; }
.eg *, .eg *::before, .eg *::after { box-sizing: inherit; }

/* ---- Offer: row layout ------------------------------------------------------ */
.eg-offers { margin: 1.25rem 0 1.75rem; }
.eg-offer {
  background: var(--eg-surface);
  border: 1px solid var(--eg-line);
  border-radius: var(--eg-radius);
  margin: 0 0 12px;
}
.eg-offer .eg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  padding: 18px 22px;
}
.eg-offer .eg-row > .eg-brand { flex: 1 1 210px; }
.eg-offer .eg-row > .eg-bonus { flex: 2 1 240px; }
.eg-offer .eg-row > .eg-fact  { flex: none; }
.eg-offer .eg-row > .eg-actions { flex: none; margin-left: auto; }
.eg-offer .eg-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.eg-offer .eg-logo { display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 48px; flex: none; }
/* Explicit size: an SVG logo with no intrinsic width collapses to 0 under max-width alone. */
.eg-offer .eg-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.eg-offer .eg-name { font-family: var(--eg-display); font-weight: 700; color: var(--eg-ink); line-height: 1.25; }
.eg-offer .eg-name small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--eg-muted); }
.eg-offer .eg-rank {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--eg-accent); color: #fff; font-weight: 700; font-size: 0.9rem;
}
.eg-offer .eg-bonus { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.eg-offer .eg-bonus strong { font-family: var(--eg-display); font-size: 1.08rem; line-height: 1.3; color: var(--eg-ink); }
.eg-offer .eg-conds { font-size: 0.86rem; color: var(--eg-muted); line-height: 1.45; }
.eg-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.6;
  background: var(--eg-surface-2); color: var(--eg-muted); white-space: nowrap;
}
.eg-pill.is-good { background: color-mix(in srgb, var(--eg-good) 16%, transparent); color: var(--eg-good); }
.eg-offer .eg-fact { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.eg-label { font-size: 0.74rem; color: var(--eg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.eg-value { font-weight: 600; color: var(--eg-ink); }
.eg-num { font-family: var(--eg-display); font-weight: 700; font-size: 1.15rem; color: var(--eg-ink); }
.eg-num small { font-size: 0.7em; font-weight: 400; color: var(--eg-muted); }
.eg-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.eg-offer .eg-row > .eg-specs { flex: 1 1 100%; margin-top: 0; }

.eg-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 170px; padding: 13px 24px;
  border-radius: var(--eg-cta-radius);
  background: var(--eg-cta-bg);
  font-family: var(--eg-display); font-weight: 600; font-size: 0.98rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
:root .eg-cta, :root .eg-cta:hover, :root .eg-cta:visited { color: var(--eg-cta-ink); text-decoration: none; }
.eg-cta:hover { filter: brightness(1.08); }
:root .eg-review { font-size: 0.86rem; color: var(--eg-accent); }

.eg-more { border-top: 1px solid var(--eg-line); }
.eg-more > summary {
  cursor: pointer; list-style: none; padding: 9px 22px;
  font-size: 0.86rem; font-weight: 600; color: var(--eg-accent);
}
.eg-more > summary::-webkit-details-marker { display: none; }
.eg-more > summary::after { content: " +"; }
.eg-more[open] > summary::after { content: " −"; }
.eg-offer .eg-body { padding: 4px 22px 18px; font-size: 0.95rem; }
.eg-offer .eg-body > :first-child { margin-top: 0; }
.eg-offer .eg-body > :last-child { margin-bottom: 0; }
.eg-offer .eg-body h4 { margin: 14px 0 4px; font-size: 0.95rem; }

/* ---- Offer: card layout (detail cards, token cards, slots) ----------------- */
.eg-offer.is-card { padding: 20px 22px; }
.eg-offer.is-card .eg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.eg-offer.is-card .eg-head .eg-bonus { flex: 1 1 220px; }
.eg-offer.is-card .eg-body { padding: 0; margin-top: 12px; }
.eg-offer.is-card .eg-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; margin-top: 14px; }

.eg-specs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px 16px; margin: 14px 0 0; padding: 12px 14px;
  background: var(--eg-surface-2); border-radius: calc(var(--eg-radius) - 4px);
}
.eg-specs > div { min-width: 0; }
.eg-specs dt { font-size: 0.74rem; color: var(--eg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.eg-specs dd { margin: 0; font-weight: 600; color: var(--eg-ink); }

/* ---- Stars ------------------------------------------------------------------ */
.eg-stars {
  position: relative; display: inline-block; font-size: 0.95rem; line-height: 1; letter-spacing: 2px;
  color: var(--eg-line);
}
.eg-stars::before { content: "★★★★★"; }
.eg-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--eg-star); }
.eg-stars-fill::before { content: "★★★★★"; }
.eg-rating { display: inline-flex; align-items: center; gap: 8px; }

/* ---- FAQ -------------------------------------------------------------------- */
.eg-faq { margin: 1rem 0 2rem; }
.eg-q { border-bottom: 1px solid var(--eg-line); }
.eg-q:first-child { border-top: 1px solid var(--eg-line); }
.eg-q > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 16px 40px 16px 0;
  font-family: var(--eg-display); font-weight: 600; color: var(--eg-ink); line-height: 1.4;
}
.eg-q > summary::-webkit-details-marker { display: none; }
.eg-q > summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--eg-accent);
}
.eg-q[open] > summary::after { content: "−"; }
.eg-a { padding: 0 0 16px; }
.eg-a > :first-child { margin-top: 0; }
.eg-a > :last-child { margin-bottom: 0; }

/* ---- Button ----------------------------------------------------------------- */
.eg-button-wrap { margin: 1.25rem 0; }

/* ---- Core-block patterns ---------------------------------------------------- */
ol.eg-steps { list-style: none; counter-reset: eg-step; padding: 0; margin: 1.25rem 0 1.75rem; }
ol.eg-steps > li {
  counter-increment: eg-step; position: relative;
  padding: 2px 0 14px 48px; min-height: 34px;
}
ol.eg-steps > li::before {
  content: counter(eg-step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--eg-accent); color: #fff; font-weight: 700; font-size: 0.9rem;
}

/* The marker is drawn by ::before, so the native bullet has to go. `list-style: none`
   on the ul alone loses to theme rules like `.entry-content ul { list-style: disc }`
   (The7 on kryptoportal.pl, 2026-09-23: every pro and con showed a dot AND a tick),
   so name the li too and win the cascade outright. */
ul.eg-checks, ul.eg-checks > li,
ul.eg-crosses, ul.eg-crosses > li { list-style: none !important; }

ul.eg-checks { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
ul.eg-checks > li { position: relative; padding: 0 0 8px 30px; }
ul.eg-checks > li::before {
  content: ""; position: absolute; left: 4px; top: 0.35em;
  width: 7px; height: 12px; border: solid var(--eg-good); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* The counterpart of eg-checks, for a "Cons" list. Without it a cons list rendered
   with green ticks, which reads as five more positives (forexcrunch, 2026-09-23). */
ul.eg-crosses { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
ul.eg-crosses > li { position: relative; padding: 0 0 8px 30px; }
ul.eg-crosses > li::before {
  content: ""; position: absolute; left: 4px; top: 0.72em;
  width: 12px; height: 0; border-top: 2.5px solid var(--eg-warn);
}

.eg-box {
  background: var(--eg-surface);
  border: 1px solid var(--eg-line);
  border-left: 4px solid var(--eg-accent);
  border-radius: var(--eg-radius);
  padding: 16px 20px;
  margin: 1.25rem 0;
}
.eg-box.is-note  { border-left-color: var(--eg-accent); }
.eg-box.is-warn  { border-left-color: var(--eg-warn); }
.eg-box.is-check { border-left-color: var(--eg-good); }
.eg-box > :first-child { margin-top: 0; }
.eg-box > :last-child { margin-bottom: 0; }

/* A row of short boxes (promo cards, "why us" panels): .eg-grid > .eg-box */
.eg-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin: 1.25rem 0 1.75rem;
}
.eg-grid > .eg-box { margin: 0; border-left-width: 1px; }
.eg-grid > .eg-box h3, .eg-grid > .eg-box h4 { font-size: 1.02rem; margin: 0 0 6px; }

/* Latest posts block used where a page builder had a "latest posts" widget */
.wp-block-latest-posts.eg-latest { margin: 1.25rem 0 2rem; padding: 0; }
.wp-block-latest-posts.eg-latest li { background: var(--eg-surface); border: 1px solid var(--eg-line); border-radius: var(--eg-radius); padding: 0 0 14px; overflow: hidden; }
.wp-block-latest-posts.eg-latest .wp-block-latest-posts__featured-image { margin: 0 0 12px; }
.wp-block-latest-posts.eg-latest .wp-block-latest-posts__featured-image img { width: 100%; height: 170px; object-fit: cover; }
.wp-block-latest-posts.eg-latest .wp-block-latest-posts__post-title { display: block; padding: 0 16px; font-family: var(--eg-display); font-weight: 600; line-height: 1.35; }
.wp-block-latest-posts.eg-latest .wp-block-latest-posts__post-date { display: block; padding: 6px 16px 0; font-size: 0.8rem; color: var(--eg-muted); }

/* Content images and galleries from migrated pages */
.wp-block-image img { height: auto; max-width: 100%; }
.wp-block-image.eg-icon img { width: 72px; }
/* an illustration that sat beside a text column in the old layout */
.wp-block-image.eg-side-img { text-align: center; margin: 1rem 0 1.5rem; }
.wp-block-image.eg-side-img img { max-width: 320px; max-height: 260px; width: auto; }
.wp-block-image.eg-logo-img img { max-width: 200px; max-height: 120px; width: auto; }
.eg-box .wp-block-image.eg-icon { margin: 0 0 8px; }
.wp-block-gallery.eg-shots { margin: 1.25rem 0 1.75rem; }
.wp-block-gallery.eg-shots img { border-radius: calc(var(--eg-radius) - 4px); }

.eg-table { margin: 1.25rem 0 1.75rem; overflow-x: auto; }
.eg-table table { width: 100%; border-collapse: collapse; }
.eg-table th, .eg-table td { padding: 11px 14px; border-bottom: 1px solid var(--eg-line); text-align: left; vertical-align: top; }
.eg-table thead th, .eg-table tr:first-child th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--eg-muted);
  background: var(--eg-surface-2);
}
.eg-table code, .eg-box code, .eg-offer code {
  padding: 1px 7px; border-radius: 5px; background: var(--eg-surface-2);
  font-size: 0.88em; color: var(--eg-ink);
}

/* ---- Narrow ----------------------------------------------------------------- */
@media (max-width: 860px) {
  .eg-offer .eg-row { padding: 16px; gap: 12px 18px; }
  .eg-offer .eg-row > .eg-brand, .eg-offer .eg-row > .eg-bonus { flex: 1 1 100%; }
  .eg-offer .eg-row > .eg-actions { flex: 1 1 100%; margin-left: 0; }
  .eg-offer .eg-row > .eg-actions .eg-cta { width: 100%; }
  .eg-offer .eg-row > .eg-fact { align-items: flex-start; text-align: left; }
  .eg-more > summary, .eg-offer .eg-body { padding-left: 16px; padding-right: 16px; }
  .eg-offer.is-card { padding: 16px; }
  .eg-offer.is-card .eg-actions .eg-cta { width: 100%; }
}