/* =========================================================
 * ALMARA Affiliate Partner Network — CSS v5.0.0
 * Source: affiliate_code_2.txt (confirmed DOM)
 *
 * Coast color: sandy #C4A87A (not aqua — badge-oriented)
 * Reef:  #90C8E0 (silver-blue)
 * Deep Blue: #C8A96E (gold)
 *
 * Key DOM facts confirmed:
 * — Hero: e-con[72263eb5]=image, e-con[5c9e5afe]=text (both inside col-100)
 * — Pills: ALL <span class="ppill"> in HTML widget ✓
 * — Depth bar: 5 × col-20 (coast, →, reef, →, deep)
 * — Why: col-50 left=image, col-50 right=e-con with h4/p text-editors
 * — Tiers: col-33 × 3, each with e-con.e-parent inside
 * — Steps: col-25 × 4, text-editor with <h4><p>
 * — FAQ: col-17 × 6
 * — Dashboard: col-50 × 2
 * — Text-editor: content DIRECTLY in widget div, no .elementor-widget-container
 * ========================================================= */

/* =========================================================
 * 00. Variables
 * ========================================================= */
:root {
  --dark:    #062033;
  --ocean:   #0A3D5C;
  --mid:     #1A6B8A;
  --aqua:    #2BA8C8;
  --foam:    #E8F4F8;
  --sand:    #F5EFE0;
  --gold:    #C8A96E;
  --gold-lt: #E8D4A8;
  --white:   #FAFAF8;
  --text:    #1A2B35;
  --muted:   #5A7A8A;
  --border:  rgba(10,61,92,.12);
  --coast:   #C4A87A; /* sandy — badge-oriented */
  --reef:    #90C8E0; /* silver-blue */
  --deep:    #C8A96E; /* gold */
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --max-w: 1160px;
  --pad-h: clamp(24px, 6vw, 88px);
}

/* =========================================================
 * 01. Body + page foundation
 * ========================================================= */
body:has(#alm-affiliate-hero) {
  background: var(--dark) !important;
  font-family: var(--fb) !important;
}
body:has(#alm-affiliate-hero) .site-main { overflow-x: hidden !important; }

/* =========================================================
 * 02. Section backgrounds
 * ========================================================= */
#alm-affiliate-hero,
#alm-affiliate-tiers,
#alm-affiliate-journey,
#alm-affiliate-depth-bar,
#alm-affiliate-compare,
#alm-affiliate-final-cta  { background-color: var(--dark) !important; }
#alm-affiliate-quote       { background-color: var(--ocean) !important; }
#alm-affiliate-partner-bar { background-color: var(--foam) !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; }
#alm-affiliate-why,
#alm-affiliate-how,
#alm-affiliate-faq         { background-color: var(--white) !important; }
#alm-affiliate-stats       { background-color: var(--sand) !important; }
#alm-affiliate-dashboard   { background-color: var(--foam) !important; border-top: 1px solid var(--border) !important; }

/* =========================================================
 * 03. Consistent content width + horizontal padding
 *     Applied to all top-level containers within affiliate sections
 * ========================================================= */
#alm-affiliate-hero > .elementor-container,
#alm-affiliate-partner-bar > .elementor-container,
#alm-affiliate-why > .elementor-container,
#alm-affiliate-journey > .elementor-container,
#alm-affiliate-depth-bar > .elementor-container,
#alm-affiliate-tiers > .elementor-container,
#alm-affiliate-compare > .elementor-container,
#alm-affiliate-how > .elementor-container,
#alm-affiliate-stats > .elementor-container,
#alm-affiliate-dashboard > .elementor-container,
#alm-affiliate-quote > .elementor-container,
#alm-affiliate-faq > .elementor-container,
#alm-affiliate-final-cta > .elementor-container {
  max-width: var(--max-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad-h) !important;
  padding-right: var(--pad-h) !important;
}
/* Inner sections: same horizontal padding, full width */
#alm-affiliate-tiers .elementor-section > .elementor-container,
#alm-affiliate-why .elementor-section > .elementor-container,
#alm-affiliate-how .elementor-section > .elementor-container,
#alm-affiliate-stats .elementor-section > .elementor-container,
#alm-affiliate-faq .elementor-section > .elementor-container,
#alm-affiliate-final-cta .elementor-section > .elementor-container,
#alm-affiliate-depth-bar .elementor-section > .elementor-container,
#alm-affiliate-dashboard .elementor-section > .elementor-container {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
 * 04. Text colour on dark sections
 * ========================================================= */
#alm-affiliate-hero .elementor-widget-text-editor *,
#alm-affiliate-tiers .elementor-widget-text-editor *,
#alm-affiliate-journey .elementor-widget-text-editor *,
#alm-affiliate-depth-bar .elementor-widget-text-editor *,
#alm-affiliate-compare .elementor-widget-text-editor *,
#alm-affiliate-final-cta .elementor-widget-text-editor *,
#alm-affiliate-quote .elementor-widget-text-editor * { color: rgba(255,255,255,.78) !important; }

/* =========================================================
 * 05. Headings
 * ========================================================= */
#alm-affiliate-hero .elementor-heading-title {
  font-family: var(--fd) !important; font-size: clamp(3rem,6vw,5.2rem) !important;
  font-weight: 300 !important; line-height: 1.08 !important; color: #fff !important;
  letter-spacing: .01em !important;
}
#alm-affiliate-hero .elementor-heading-title em { color: var(--gold-lt) !important; font-style: italic !important; }

/* Dark section H2 */
#alm-affiliate-journey .elementor-heading-title,
#alm-affiliate-compare .elementor-heading-title,
#alm-affiliate-final-cta .elementor-heading-title,
#alm-affiliate-quote .elementor-heading-title {
  font-family: var(--fd) !important; font-size: clamp(2rem,3.5vw,2.9rem) !important;
  font-weight: 400 !important; line-height: 1.1 !important; color: #fff !important;
}
/* Light section H2 */
#alm-affiliate-why .elementor-heading-title,
#alm-affiliate-how .elementor-heading-title,
#alm-affiliate-faq .elementor-heading-title,
#alm-affiliate-stats .elementor-heading-title,
#alm-affiliate-dashboard .elementor-heading-title {
  font-family: var(--fd) !important; font-size: clamp(2rem,3.5vw,2.9rem) !important;
  font-weight: 400 !important; line-height: 1.1 !important; color: var(--text) !important;
}
/* Tier H3 — nth-child by column */
#alm-affiliate-tiers .elementor-col-33:nth-child(1) .elementor-heading-title { color: var(--coast) !important; font-family: var(--fd) !important; font-size: 1.75rem !important; font-weight: 400 !important; text-align: center !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(2) .elementor-heading-title { color: var(--reef) !important;  font-family: var(--fd) !important; font-size: 1.75rem !important; font-weight: 400 !important; text-align: center !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(3) .elementor-heading-title { color: var(--deep) !important;  font-family: var(--fd) !important; font-size: 1.75rem !important; font-weight: 400 !important; text-align: center !important; }

/* =========================================================
 * 06. Eyebrow (class injected in HTML)
 * ========================================================= */
.alm-aff-eyebrow, p.alm-aff-eyebrow {
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  margin-bottom: .75rem !important; display: block !important;
}
/* Dark */
#alm-affiliate-hero .alm-aff-eyebrow,
#alm-affiliate-journey .alm-aff-eyebrow,
#alm-affiliate-compare .alm-aff-eyebrow,
#alm-affiliate-tiers .alm-aff-eyebrow,
#alm-affiliate-final-cta .alm-aff-eyebrow { color: var(--aqua) !important; }
/* Light */
#alm-affiliate-why .alm-aff-eyebrow,
#alm-affiliate-how .alm-aff-eyebrow,
#alm-affiliate-stats .alm-aff-eyebrow,
#alm-affiliate-faq .alm-aff-eyebrow,
#alm-affiliate-dashboard .alm-aff-eyebrow { color: var(--mid) !important; }
/* Line before hero eyebrow */
#alm-affiliate-hero .alm-aff-eyebrow::before {
  content: '' !important; display: inline-block !important;
  width: 32px !important; height: 1px !important;
  background: var(--aqua) !important;
  margin-right: 12px !important; vertical-align: middle !important;
}

/* =========================================================
 * 07. Buttons
 * ========================================================= */
/* Primary — aqua */
#alm-affiliate-hero .elementor-button,
#alm-affiliate-dashboard .elementor-col-50:first-child .elementor-button {
  background-color: var(--aqua) !important; color: var(--dark) !important;
  border: 1px solid var(--aqua) !important; border-radius: 3px !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important; padding: 13px 30px !important;
}
/* Tier CTAs */
#alm-affiliate-tiers .elementor-col-33:nth-child(1) .elementor-button { background-color: var(--coast) !important; color: var(--dark) !important; border: 1px solid var(--coast) !important; border-radius: 3px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 11px 20px !important; width: 100% !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(2) .elementor-button { background-color: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 3px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 11px 20px !important; width: 100% !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(3) .elementor-button { background-color: var(--deep) !important; color: var(--dark) !important; border: 1px solid var(--deep) !important; border-radius: 3px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 11px 20px !important; width: 100% !important; }
/* Final CTA */
#alm-affiliate-final-cta .elementor-col-50:nth-child(1) .elementor-button { background-color: var(--aqua) !important; color: var(--dark) !important; border: 1px solid var(--aqua) !important; border-radius: 3px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 13px 30px !important; }
#alm-affiliate-final-cta .elementor-col-50:nth-child(2) .elementor-button { background-color: transparent !important; color: rgba(255,255,255,.82) !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 3px !important; font-size: 13px !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 13px 30px !important; }

/* =========================================================
 * 08. HERO (Section 01)
 * ========================================================= */
#alm-affiliate-hero {
  min-height: 88vh !important; overflow: hidden !important;
  position: relative !important;
}
/* Hero image e-con: absolute, full bleed
   Uses :has(.elementor-widget-image) — works in both DE and EN
   regardless of Elementor's internal element IDs */
#alm-affiliate-hero .e-con.e-parent:has(.elementor-widget-image) {
  position: absolute !important; inset: 0 !important;
  z-index: 0 !important; pointer-events: none !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important;
}
#alm-affiliate-hero .e-con.e-parent:has(.elementor-widget-image) .e-con-inner { height: 100% !important; padding: 0 !important; }
#alm-affiliate-hero .e-con.e-parent:has(.elementor-widget-image) img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center 30% !important;
  opacity: .5 !important; display: block !important;
}
/* Gradient overlay */
#alm-affiliate-hero .e-con.e-parent:has(.elementor-widget-image)::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(to top, rgba(6,32,51,.94) 0%, rgba(6,32,51,.42) 55%, rgba(6,32,51,.18) 100%) !important;
  z-index: 1 !important;
}
/* Hero text e-con: in flow, z-index above image */
#alm-affiliate-hero .e-con.e-parent:not(:has(.elementor-widget-image)) {
  position: relative !important; z-index: 2 !important;
  padding-bottom: 6rem !important; padding-top: 2rem !important;
  max-width: 760px !important;
}
/* Hero column: flex align end */
#alm-affiliate-hero .elementor-col-100 { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; min-height: 88vh !important; }
/* Hero lead */
#alm-affiliate-hero .elementor-widget-text-editor p:not(.alm-aff-eyebrow) {
  font-size: 17px !important; color: rgba(255,255,255,.72) !important;
  max-width: 520px !important; line-height: 1.8 !important; margin-bottom: 2rem !important;
}

/* =========================================================
 * 09. PARTNER BAR — pills (Section 02)
 * ========================================================= */
#alm-affiliate-partner-bar { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
/* Label */
#alm-affiliate-partner-bar .elementor-widget-text-editor p:not(.ppill) {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .15em !important;
  text-transform: uppercase !important; color: var(--muted) !important;
  text-align: center !important; margin-bottom: 1.2rem !important;
}
/* Pills e-con wrapper → flex-wrap centred */
#alm-affiliate-partner-bar .e-con-inner {
  display: flex !important; flex-wrap: wrap !important;
  justify-content: center !important; gap: .75rem !important; align-items: center !important;
}
/* ppill spans */
.ppill {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: 100px !important; padding: 7px 18px !important;
  font-size: 13px !important; color: var(--ocean) !important;
  white-space: nowrap !important; display: inline-block !important;
}

/* =========================================================
 * 10. WHY ALMARA (Section 03) — icons via CSS
 * ========================================================= */
#alm-affiliate-why .elementor-col-50:first-child .elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  box-shadow: 0 12px 40px rgba(6,32,51,.14) !important;
  image-rendering: -webkit-optimize-contrast !important;
}
#alm-affiliate-why .elementor-col-50:first-child .elementor-widget-image {
  overflow: hidden !important;
  border-radius: 10px !important;
}
/* Benefit items: h4 headline */
#alm-affiliate-why .elementor-col-50:last-child .elementor-widget-text-editor h4 {
  font-weight: 600 !important; font-size: 15px !important;
  color: var(--text) !important; margin: 0 0 4px !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
}
/* Icon circle before each h4 */
#alm-affiliate-why .elementor-col-50:last-child .elementor-widget-text-editor h4::before {
  content: '' !important; width: 34px !important; height: 34px !important;
  min-width: 34px !important; border-radius: 50% !important;
  background: var(--foam) !important;
  border: 1px solid rgba(26,107,138,.2) !important;
  display: inline-block !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6B8A' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") !important;
  background-size: 18px !important; background-repeat: no-repeat !important; background-position: center !important;
}
/* Different icon per benefit via nth-of-type */
#alm-affiliate-why .elementor-col-50:last-child .e-con-inner > .elementor-widget:nth-child(2) h4::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6B8A' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E") !important;
}
#alm-affiliate-why .elementor-col-50:last-child .e-con-inner > .elementor-widget:nth-child(3) h4::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6B8A' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E") !important;
}
#alm-affiliate-why .elementor-col-50:last-child .e-con-inner > .elementor-widget:nth-child(4) h4::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6B8A' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") !important;
}
#alm-affiliate-why .elementor-col-50:last-child .elementor-widget-text-editor p {
  font-size: 14px !important; color: var(--muted) !important; line-height: 1.65 !important; margin: 0 0 1.5rem !important;
}
#alm-affiliate-why .elementor-col-50:last-child .elementor-widget-text-editor:last-of-type p { margin: 0 !important; }

/* =========================================================
 * 11. JOURNEY (Section 04) + DEPTH BAR (04b)
 * ========================================================= */
#alm-affiliate-journey { padding-bottom: 3rem !important; }
#alm-affiliate-journey .elementor-widget-text-editor,
#alm-affiliate-journey .elementor-heading-title,
#alm-affiliate-journey .elementor-widget-container { text-align: center !important; }
.alm-aff-journey-tagline, #alm-affiliate-journey .elementor-widget-text-editor:last-of-type p {
  font-family: var(--fd) !important; font-style: italic !important;
  font-size: 1.2rem !important; color: var(--gold-lt) !important; opacity: .85 !important;
}

/* Depth bar */
#alm-affiliate-depth-bar { padding-top: 0 !important; padding-bottom: 4rem !important; }
/* 5 col-20 → inner section centred */
#alm-affiliate-depth-bar .elementor-section > .elementor-container {
  justify-content: center !important; text-align: center !important;
  max-width: 900px !important; margin: 0 auto !important;
}
#alm-affiliate-depth-bar .elementor-col-20 { text-align: center !important; }
/* Arrow columns */
#alm-affiliate-depth-bar .elementor-col-20:nth-child(2) .elementor-widget-text-editor,
#alm-affiliate-depth-bar .elementor-col-20:nth-child(4) .elementor-widget-text-editor {
  font-size: 18px !important; color: rgba(255,255,255,.2) !important; text-align: center !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}

/* Depth label + name custom classes */
.alm-aff-depth-label {
  font-size: 10px !important; letter-spacing: .15em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,.4) !important; display: block !important; margin-bottom: 6px !important;
}
.alm-aff-depth-name {
  font-family: var(--fd) !important; font-size: 1.4rem !important;
  font-weight: 400 !important; display: block !important;
}
/* Sandy Coast depth name */
#alm-affiliate-depth-bar .elementor-col-20:nth-child(1) .alm-aff-depth-name,
#alm-affiliate-depth-bar .elementor-col-20:nth-child(1) p.alm-aff-depth-name { color: var(--coast) !important; }
#alm-affiliate-depth-bar .elementor-col-20:nth-child(3) .alm-aff-depth-name,
#alm-affiliate-depth-bar .elementor-col-20:nth-child(3) p.alm-aff-depth-name { color: var(--reef) !important; }
#alm-affiliate-depth-bar .elementor-col-20:nth-child(5) .alm-aff-depth-name,
#alm-affiliate-depth-bar .elementor-col-20:nth-child(5) p.alm-aff-depth-name { color: var(--deep) !important; }

/* =========================================================
 * 12. TIER CARDS (Section 05)
 * ========================================================= */
#alm-affiliate-tiers { padding-top: 1rem !important; padding-bottom: 6rem !important; }
/* Inner 3-col section full width, stretch columns */
#alm-affiliate-tiers .elementor-section > .elementor-container { align-items: stretch !important; }
/* Card container */
#alm-affiliate-tiers .elementor-col-33 .e-con.e-parent {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 3px !important; overflow: hidden !important;
  transition: transform .25s, border-color .25s !important;
  height: 100% !important; display: flex !important; flex-direction: column !important;
}
#alm-affiliate-tiers .elementor-col-33 .e-con.e-parent:hover { transform: translateY(-5px) !important; border-color: rgba(255,255,255,.22) !important; }
/* Top border per tier */
#alm-affiliate-tiers .elementor-col-33:nth-child(1) .e-con.e-parent { border-top: 2px solid var(--coast) !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(2) .e-con.e-parent { border-top: 2px solid var(--reef) !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(3) .e-con.e-parent { border-top: 2px solid var(--deep) !important; }

/* Badge image */
#alm-affiliate-tiers .elementor-widget-image { display: flex !important; justify-content: center !important; padding-top: 1.75rem !important; }
#alm-affiliate-tiers .elementor-widget-image img { width: 120px !important; height: 120px !important; object-fit: contain !important; filter: drop-shadow(0 4px 20px rgba(0,0,0,.5)) !important; }

/* Tagline (first text-editor in card: function + audience) */
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-text-editor:first-of-type strong {
  display: block !important; font-size: 12px !important; font-weight: 600 !important;
  color: rgba(255,255,255,.62) !important; text-align: center !important; margin-bottom: 4px !important;
}
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-text-editor:first-of-type p {
  font-size: 11px !important; color: rgba(255,255,255,.42) !important;
  text-align: center !important; letter-spacing: .04em !important; margin: 0 !important;
}

/* Rate box — inner e-con.e-child */
#alm-affiliate-tiers .e-con.e-child .e-con-inner {
  text-align: center !important; padding: .9rem 1.5rem !important;
  background: rgba(255,255,255,.05) !important; border-radius: 2px !important;
  margin: 0 1rem !important;
}
/* Rate number and label custom classes */
.alm-aff-rate-num {
  font-family: var(--fd) !important; font-size: 2.1rem !important;
  font-weight: 400 !important; line-height: 1 !important;
  display: block !important; text-align: center !important;
}
.alm-aff-rate-label {
  font-size: 10px !important; text-transform: uppercase !important;
  letter-spacing: .1em !important; margin-top: 4px !important;
  display: block !important; text-align: center !important;
  color: rgba(255,255,255,.4) !important;
}
/* Rate colours per column */
#alm-affiliate-tiers .elementor-col-33:nth-child(1) .alm-aff-rate-num { color: var(--coast) !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(2) .alm-aff-rate-num { color: var(--reef) !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(3) .alm-aff-rate-num { color: var(--deep) !important; }

/* Feature list */
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-text-editor:last-of-type ul { list-style: none !important; padding: 0 1.5rem !important; margin: 0 !important; }
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-text-editor:last-of-type li {
  font-size: 13px !important; color: rgba(255,255,255,.62) !important;
  padding: 8px 0 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important;
  display: flex !important; align-items: center !important; gap: 9px !important;
}
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-text-editor:last-of-type li:last-child { border: none !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(1) .e-con.e-parent .elementor-widget-text-editor:last-of-type li::before { content:'' !important; width:5px !important; height:5px !important; border-radius:50% !important; flex-shrink:0 !important; background:var(--coast) !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(2) .e-con.e-parent .elementor-widget-text-editor:last-of-type li::before { content:'' !important; width:5px !important; height:5px !important; border-radius:50% !important; flex-shrink:0 !important; background:var(--reef) !important; }
#alm-affiliate-tiers .elementor-col-33:nth-child(3) .e-con.e-parent .elementor-widget-text-editor:last-of-type li::before { content:'' !important; width:5px !important; height:5px !important; border-radius:50% !important; flex-shrink:0 !important; background:var(--deep) !important; }

/* Upgrade note — centred, under the tier grid */
.upgrade-note, p.upgrade-note {
  text-align: center !important; font-size: 13px !important;
  color: rgba(255,255,255,.4) !important; letter-spacing: .03em !important;
  margin-top: 2rem !important;
}
.upgrade-note span { color: var(--aqua) !important; }

/* =========================================================
 * 13. COMPARE TABLE (Section 06)
 * ========================================================= */
#alm-affiliate-compare { overflow-x: auto !important; }
.ctable { width: 100% !important; border-collapse: collapse !important; margin-top: 3rem !important; font-size: 14px !important; }
.ctable th { padding: 13px 18px !important; font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 600 !important; text-align: left !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.45) !important; background: rgba(6,32,51,.6) !important; }
.ctable th.coast, .ctable .th-coast { color: var(--coast) !important; }
.ctable th.reef,  .ctable .th-reef  { color: var(--reef) !important; }
.ctable th.deep,  .ctable .th-deep  { color: var(--deep) !important; }
.ctable td { padding: 12px 18px !important; color: rgba(255,255,255,.65) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; vertical-align: top !important; }
.ctable td:first-child,
#alm-affiliate-compare-table table td:first-child {
  color: rgba(255,255,255,.42) !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}
/* Tier columns centred — dual selector: .ctable class AND #id scope */
.ctable th.coast, .ctable .th-coast, .ctable td:nth-child(2),
#alm-affiliate-compare-table table th.th-coast,
#alm-affiliate-compare-table table th:nth-child(2),
#alm-affiliate-compare-table table td:nth-child(2) {
  text-align: center !important;
}
.ctable th.reef, .ctable .th-reef, .ctable td:nth-child(3),
#alm-affiliate-compare-table table th.th-reef,
#alm-affiliate-compare-table table th:nth-child(3),
#alm-affiliate-compare-table table td:nth-child(3) {
  text-align: center !important;
}
.ctable th.deep, .ctable .th-deep, .ctable td:nth-child(4),
#alm-affiliate-compare-table table th.th-deep,
#alm-affiliate-compare-table table th:nth-child(4),
#alm-affiliate-compare-table table td:nth-child(4) {
  text-align: center !important;
}
.ctable tr:last-child td { border-bottom: none !important; }
.check { color: var(--aqua) !important; font-size: 15px !important; }
.gold-check { color: var(--deep) !important; font-size: 15px !important; }
.dash { color: rgba(255,255,255,.2) !important; }

/* =========================================================
 * 14. HOW IT WORKS (Section 07) — steps with numbers + icons
 * ========================================================= */
#alm-affiliate-how .elementor-section > .elementor-container {
  counter-reset: aff-steps !important;
}
#alm-affiliate-how .elementor-col-25 {
  counter-increment: aff-steps !important;
  text-align: center !important;
  padding-top: 3rem !important; /* space for the counter number */
  position: relative !important;
}
/* Step number */
#alm-affiliate-how .elementor-col-25::before {
  content: '0' counter(aff-steps) !important;
  position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important;
  font-family: var(--fd) !important; font-size: 2.8rem !important;
  font-weight: 300 !important; line-height: 1 !important;
  color: var(--aqua) !important; opacity: .3 !important;
}
/* Icon circle */
#alm-affiliate-how .elementor-col-25 .elementor-widget-wrap::before {
  content: '' !important; display: block !important;
  width: 54px !important; height: 54px !important;
  background-color: var(--foam) !important; border-radius: 50% !important;
  margin: 0 auto .75rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D5C' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M16 21v-2a4 4 0 00-8 0v2'/%3E%3C/svg%3E") !important;
  background-size: 26px !important; background-repeat: no-repeat !important; background-position: center !important;
}
#alm-affiliate-how .elementor-col-25:nth-child(2) .elementor-widget-wrap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D5C' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E") !important;
}
#alm-affiliate-how .elementor-col-25:nth-child(3) .elementor-widget-wrap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D5C' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E") !important;
}
#alm-affiliate-how .elementor-col-25:nth-child(4) .elementor-widget-wrap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D5C' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") !important;
}
#alm-affiliate-how .elementor-col-25 h4 { font-family: var(--fd) !important; font-size: 1.1rem !important; font-weight: 600 !important; color: var(--text) !important; margin: 0 0 .5rem !important; }
#alm-affiliate-how .elementor-col-25 p { font-size: 13px !important; color: var(--muted) !important; line-height: 1.65 !important; }

/* =========================================================
 * 15. STATS (Section 08) — 4-column
 * ========================================================= */
#alm-affiliate-stats .elementor-col-25 { text-align: center !important; }
.alm-aff-stat-num {
  font-family: var(--fd) !important; font-size: 3rem !important; font-weight: 300 !important;
  line-height: 1 !important; color: var(--ocean) !important; display: block !important; margin-bottom: .4rem !important;
}
#alm-affiliate-stats .elementor-col-25 p { font-size: 13px !important; color: var(--muted) !important; margin: 0 !important; }

/* =========================================================
 * 16. DASHBOARD (Section 09) — 2-column
 * ========================================================= */
#alm-affiliate-dashboard .elementor-col-50:first-child .elementor-heading-title {
  font-family: var(--fd) !important; font-size: clamp(1.8rem,2.8vw,2.5rem) !important;
  font-weight: 400 !important; color: var(--text) !important;
}
#alm-affiliate-dashboard .elementor-col-50:first-child .elementor-widget-text-editor p:not(.alm-aff-eyebrow) {
  font-size: 15px !important; color: var(--muted) !important; line-height: 1.75 !important; margin-bottom: 2rem !important;
}
/* Mockup */
#alm-affiliate-dashboard .elementor-col-50:last-child .e-con.e-parent {
  background: var(--dark) !important; border-radius: 4px !important;
  overflow: hidden !important; box-shadow: 0 20px 60px rgba(6,32,51,.18) !important;
}
/* Topbar */
#alm-affiliate-dashboard .elementor-col-50:last-child > .elementor-widget-wrap > .e-con.e-parent > .e-con-inner > .e-con.e-child:first-child {
  background: rgba(255,255,255,.06) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; padding: 10px 16px !important;
}
.alm-aff-dash-lbl { font-size: 9px !important; color: rgba(255,255,255,.35) !important; text-transform: uppercase !important; letter-spacing: .12em !important; display: block !important; }
.alm-aff-dash-val { font-family: var(--fd) !important; font-size: 1.5rem !important; color: var(--aqua) !important; font-weight: 300 !important; display: block !important; }
.alm-aff-dash-val--gold { color: var(--deep) !important; }
.alm-aff-dash-sub { font-size: 10px !important; color: rgba(255,255,255,.28) !important; margin-top: 2px !important; display: block !important; }
/* Stat tiles */
#alm-affiliate-dashboard .elementor-col-50:last-child .e-con.e-parent .elementor-widget-text-editor {
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 3px !important; padding: 12px 14px !important; margin: 4px !important;
}
#alm-affiliate-dashboard .elementor-col-50:last-child .e-con.e-parent .elementor-widget-text-editor * {
  color: rgba(255,255,255,.75) !important;
}

/* =========================================================
 * 17. QUOTE (Section 10)
 * ========================================================= */
#alm-affiliate-quote { text-align: center !important; }
#alm-affiliate-quote .elementor-widget-text-editor { text-align: center !important; }
.alm-aff-quote-mark, #alm-affiliate-quote .elementor-widget-text-editor:nth-of-type(1) p {
  font-family: var(--fd) !important; font-size: 5rem !important;
  line-height: .5 !important; color: var(--aqua) !important; opacity: .35 !important; margin-bottom: 1rem !important;
}
#alm-affiliate-quote .elementor-widget-text-editor:nth-of-type(2) p {
  font-family: var(--fd) !important; font-size: clamp(1.4rem,2.5vw,2rem) !important;
  font-weight: 300 !important; font-style: italic !important; color: #fff !important; line-height: 1.5 !important;
}
#alm-affiliate-quote .elementor-widget-text-editor:nth-of-type(3) p {
  font-size: 13px !important; color: rgba(255,255,255,.5) !important; letter-spacing: .08em !important;
}

/* =========================================================
 * 18. FAQ (Section 11) — 6 × col-17
 * ========================================================= */
#alm-affiliate-faq .elementor-col-17 .elementor-widget-text-editor h4 {
  font-weight: 600 !important; font-size: 15px !important; color: var(--text) !important; margin: 0 0 .6rem !important;
}
#alm-affiliate-faq .elementor-col-17 .elementor-widget-text-editor p {
  font-size: 14px !important; color: var(--muted) !important; line-height: 1.7 !important; margin: 0 !important;
}

/* =========================================================
 * 19. FINAL CTA (Section 12) — centred
 * ========================================================= */
#alm-affiliate-final-cta { position: relative !important; text-align: center !important; }
#alm-affiliate-final-cta::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
  background: linear-gradient(to right, var(--coast), var(--reef), var(--deep)) !important;
}
#alm-affiliate-final-cta .elementor-widget-text-editor,
#alm-affiliate-final-cta .elementor-heading-title,
#alm-affiliate-final-cta .elementor-widget-container { text-align: center !important; }
#alm-affiliate-final-cta .elementor-widget-text-editor p:not(.alm-aff-eyebrow) { color: rgba(255,255,255,.6) !important; }
/* Buttons centred */
#alm-affiliate-final-cta .elementor-section > .elementor-container { justify-content: center !important; align-items: center !important; }

/* =========================================================
 * 20. Responsive
 * Rules are in almara-affiliate-mobile.css (separate file).
 * Loader injects it as inline CSS at PHP_INT_MAX — after Elementor post-CSS.
 * ========================================================= */

/* =========================================================
 * PATCH v5.1.0 — Targeted fixes from affiliate_code_3.txt
 * Changes: 04b alignment · 05 card centering · 06 table
 *          colours · 11 accordion styling
 * ========================================================= */

/* =========================================================
 * P1. Section 04b — Depth Bar alignment
 *     Must align horizontally with Tier Grid (Section 05)
 * ========================================================= */

/* Match depth bar inner width to tier grid width */
#alm-affiliate-depth-bar .elementor-section > .elementor-container {
  max-width: calc(var(--max-w) - calc(var(--pad-h) * 2)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto !important;
  justify-content: space-between !important;
  align-items: center !important;
}
/* Each depth node: same width as one tier column (≈33%) */
#alm-affiliate-depth-bar .elementor-col-20 {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Arrow columns — smaller, centred */
#alm-affiliate-depth-bar .elementor-col-20:nth-child(2),
#alm-affiliate-depth-bar .elementor-col-20:nth-child(4) {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 32px !important;
  color: rgba(255,255,255,.2) !important;
  font-size: 20px !important;
}

/* =========================================================
 * P2. Section 05 — Tier Cards: full centring
 * ========================================================= */

/* All widgets inside each card: centred text */
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-text-editor,
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-heading,
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-button,
#alm-affiliate-tiers .e-con.e-parent .elementor-widget-image {
  text-align: center !important;
  width: 100% !important;
}

/* Badge wrap (first .e-con.e-child in card):
   It IS an e-flex container — set justify-content: center directly */
#alm-affiliate-tiers .e-con.e-parent .e-con.e-child {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}
#alm-affiliate-tiers .e-con.e-parent .e-con.e-child > .e-con-inner {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* Badge wrap: full chain text-align:center + inline-block img */
#alm-affiliate-tiers .elementor-widget-image,
#alm-affiliate-tiers .elementor-widget-image .elementor-widget-container {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
}
#alm-affiliate-tiers .elementor-widget-image .elementor-image {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}
#alm-affiliate-tiers .elementor-widget-image figure {
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
  width: 100% !important;
}
/* img: inline-block responds to parent text-align:center */
#alm-affiliate-tiers .elementor-widget-image img {
  width: 120px !important;
  height: 120px !important;
  object-fit: contain !important;
  display: inline-block !important;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.5)) !important;
}

/* Rate box (second .e-con.e-child — contains .alm-aff-rate-num):
   Visual box via padding on .e-con-inner */
#alm-affiliate-tiers .e-con.e-parent .e-con.e-child > .e-con-inner:has(.alm-aff-rate-num) {
  background: rgba(255,255,255,.05) !important;
  border-radius: 2px !important;
  padding: .9rem 1rem !important;
  margin: 0 1.5rem !important;
  width: calc(100% - 3rem) !important;
  box-sizing: border-box !important;
}

/* Card inner: text-align:center cascades (confirmed working in DevTools).
   Do NOT fight display:block with flex — Elementor post-CSS wins that battle. */
#alm-affiliate-tiers .e-con.e-parent > .e-con-inner {
  text-align: center !important;
  padding-bottom: 1.5rem !important;
  width: 100% !important;
}

/* Heading (tier name): centred */
#alm-affiliate-tiers .elementor-heading-title {
  text-align: center !important;
  width: 100% !important;
}

/* Tagline text-editor: centred */
#alm-affiliate-tiers .e-con.e-parent > .e-con-inner > .elementor-widget-text-editor:first-of-type {
  text-align: center !important;
  padding: 0 1.5rem !important;
  width: 100% !important;
}
#alm-affiliate-tiers .e-con.e-parent > .e-con-inner > .elementor-widget-text-editor:first-of-type p,
#alm-affiliate-tiers .e-con.e-parent > .e-con-inner > .elementor-widget-text-editor:first-of-type strong {
  text-align: center !important;
}



/* Feature list per eigener CSS-Klasse linksbuendig ausrichten */
#alm-affiliate-tiers .elementor-widget-text-editor.feature-list,
#alm-affiliate-tiers .elementor-widget-text-editor.feature-list *,
#alm-affiliate-tiers .elementor-widget-text-editor.feature-list p {
  text-align: left !important;
  width: 100% !important;
}

/* Button: full width in card */
#alm-affiliate-tiers .elementor-widget-button {
  width: 100% !important;
  padding: 0 1.5rem !important;
  box-sizing: border-box !important;
}
#alm-affiliate-tiers .elementor-widget-button .elementor-button {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

/* Equal top/bottom card padding */
#alm-affiliate-tiers .elementor-col-33 .e-con.e-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
 * P3. Section 06 — Compare Table: tier column colours
 * ========================================================= */

/* Header row first cell: empty, subtle */
#alm-affiliate-compare-table table thead tr th:first-child {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Tier column headers: tier colour */
#alm-affiliate-compare-table table thead tr .th-coast,
.ctable thead .th-coast { color: var(--coast) !important; font-weight: 700 !important; }
#alm-affiliate-compare-table table thead tr .th-reef,
.ctable thead .th-reef  { color: var(--reef) !important;  font-weight: 700 !important; }
#alm-affiliate-compare-table table thead tr .th-deep,
.ctable thead .th-deep  { color: var(--deep) !important;  font-weight: 700 !important; }

/* First column (feature names): light/readable neutral */
#alm-affiliate-compare-table table tbody tr td:first-child,
.ctable tbody td:first-child {
  color: rgba(255,255,255,.7) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
}

/* Coast column (td:nth-child(2)): sandy text */
#alm-affiliate-compare-table table tbody tr td:nth-child(2),
.ctable tbody td:nth-child(2) { color: rgba(196,168,122,.85) !important; }
/* Reef column: reef-blue text */
#alm-affiliate-compare-table table tbody tr td:nth-child(3),
.ctable tbody td:nth-child(3) { color: rgba(144,200,224,.85) !important; }
/* Deep Blue column: gold text */
#alm-affiliate-compare-table table tbody tr td:nth-child(4),
.ctable tbody td:nth-child(4) { color: rgba(200,169,110,.85) !important; }

/* Checkmarks inherit tier colour */
#alm-affiliate-compare-table table tbody tr td:nth-child(2) .check { color: var(--coast) !important; }
#alm-affiliate-compare-table table tbody tr td:nth-child(3) .check { color: var(--reef) !important; }
#alm-affiliate-compare-table table tbody tr td:nth-child(4) .gold-check,
#alm-affiliate-compare-table table tbody tr td:nth-child(4) .check { color: var(--deep) !important; }

/* Row hover: subtle highlight */
#alm-affiliate-compare-table table tbody tr:hover td {
  background: rgba(255,255,255,.03) !important;
}

/* =========================================================
 * P4. Section 11 — Accordion (Elementor e-n-accordion)
 * ========================================================= */

/* Container */
#alm-affiliate-faq .e-n-accordion {
  width: 100% !important;
  margin-top: 2rem !important;
  border-top: 1px solid var(--border) !important;
}

/* Each accordion item */
#alm-affiliate-faq .e-n-accordion-item {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  list-style: none !important;
}
#alm-affiliate-faq .e-n-accordion-item[open] {
  background: rgba(10,61,92,.04) !important;
}

/* Summary / title row */
#alm-affiliate-faq .e-n-accordion-item-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.2rem 0 !important;
  cursor: pointer !important;
  list-style: none !important;
  gap: 1rem !important;
  transition: opacity .15s !important;
}
#alm-affiliate-faq .e-n-accordion-item-title:hover { opacity: .8 !important; }
/* Remove default <details> marker */
#alm-affiliate-faq .e-n-accordion-item-title::-webkit-details-marker { display: none !important; }

/* Question text */
#alm-affiliate-faq .e-n-accordion-item-title-text {
  font-family: var(--fb) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}

/* +/- icon */
#alm-affiliate-faq .e-n-accordion-item-title-icon {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mid) !important;
  transition: transform .2s !important;
}
#alm-affiliate-faq .e-n-accordion-item-title-icon svg {
  width: 14px !important;
  height: 14px !important;
  fill: var(--mid) !important;
}
/* Open state: icon becomes minus (handled by .e-opened/.e-closed) */
#alm-affiliate-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  fill: var(--aqua) !important;
}
#alm-affiliate-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text {
  color: var(--ocean) !important;
}

/* Show/hide open/closed icons */
#alm-affiliate-faq .e-n-accordion-item .e-opened { display: none !important; }
#alm-affiliate-faq .e-n-accordion-item .e-closed  { display: inline-flex !important; }
#alm-affiliate-faq .e-n-accordion-item[open] .e-opened { display: inline-flex !important; }
#alm-affiliate-faq .e-n-accordion-item[open] .e-closed  { display: none !important; }

/* Content area */
#alm-affiliate-faq .e-n-accordion-item > .e-con.e-child {
  padding: 0 0 1.25rem 0 !important;
  margin: 0 !important;
}
#alm-affiliate-faq .e-n-accordion-item .elementor-widget-text-editor p {
  font-size: 14px !important;
  color: var(--muted) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  padding-right: 2rem !important;
}