/* =========================================================
 * ALMARA Affiliate — Account + Reset CSS v2.0.0
 * Replaces: almara-affiliate-account-append.css v1.0.0
 *
 * v2.0 change: Scoping switched from Elementor section IDs
 * (#alm-account-header, #alm-account-area) to body classes
 * added by the PHP body_class filter in loader v3.3.2:
 *
 *   body.almara-aff-account  /de/affiliate/konto/
 *   body.almara-aff-reset    /de/affiliate/passwort-zuruecksetzen/
 *
 * CSS loads on all /affiliate/* sub-routes via the loader.
 * body_class filter ensures rules only match on the right page.
 *
 * Includes: eyebrow fix for all existing sub-page sections.
 * ========================================================= */

/* =========================================================
 * FIX — Eyebrow colour: expand to ALL dark sub-page sections
 *        v1.0 only covered *-hero sections.
 * ========================================================= */
#alm-coast-badge .alm-aff-eyebrow,
#alm-coast-how .alm-aff-eyebrow,
#alm-coast-final-cta .alm-aff-eyebrow,
#alm-reef-badge .alm-aff-eyebrow,
#alm-reef-form .alm-aff-eyebrow,
#alm-reef-final-cta .alm-aff-eyebrow,
#alm-deep-badge .alm-aff-eyebrow,
#alm-deep-final-cta .alm-aff-eyebrow,
#alm-reg-embed .alm-aff-eyebrow,
#alm-reg-info .alm-aff-eyebrow { color: var(--aqua) !important; }

#alm-deep-exclusivity .alm-aff-eyebrow { color: var(--mid) !important; }
#alm-reg-trust .alm-aff-eyebrow { color: var(--mid) !important; }

/* =========================================================
 * AC-01. Body + page context — body-class scope
 * ========================================================= */
body.almara-aff-account,
body.almara-aff-reset {
  font-family: var(--fb) !important;
}

/* Account page: foam background (light, readable dashboard) */
body.almara-aff-account {
  background: var(--foam) !important;
}

/* =========================================================
 * AC-02. Page header (optional Elementor template)
 *         Works IF the template with #alm-account-header
 *         or #alm-reset-header was imported. No-op otherwise.
 * ========================================================= */
#alm-account-header,
#alm-reset-header {
  background-color: var(--dark) !important;
  padding-top: 5rem !important;
  padding-bottom: 3rem !important;
  position: relative !important;
  overflow: hidden !important;
}
#alm-account-header::before,
#alm-reset-header::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse at 120% 0%, rgba(43,168,200,.12) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
#alm-account-header::after,
#alm-reset-header::after {
  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-account-header .alm-aff-eyebrow,
#alm-reset-header .alm-aff-eyebrow { color: var(--aqua) !important; }
#alm-account-header .elementor-heading-title,
#alm-reset-header .elementor-heading-title {
  font-family: var(--fd) !important; font-size: clamp(2.2rem,4vw,3.6rem) !important;
  font-weight: 300 !important; line-height: 1.1 !important; color: #fff !important;
}
#alm-account-header .elementor-widget-text-editor p:not(.alm-aff-eyebrow),
#alm-reset-header .elementor-widget-text-editor p:not(.alm-aff-eyebrow) {
  font-size: 16px !important; color: rgba(255,255,255,.62) !important;
  line-height: 1.7 !important; margin: .5rem 0 0 !important;
}
#alm-account-area { background-color: var(--foam) !important; border-top: 1px solid var(--border) !important; }
#alm-reset-area { background-color: var(--foam) !important; border-top: 1px solid var(--border) !important; }

#alm-account-header > .elementor-container,
#alm-account-area > .elementor-container,
#alm-reset-header > .elementor-container,
#alm-reset-area > .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;
}

/* =========================================================
 * AC-03. SLICEWP ACCOUNT DASHBOARD
 *         Scoped to body.almara-aff-account — works whether
 *         or not the Elementor template wrapper exists.
 * ========================================================= */

/* Wrapper: constrain width, add spacing */
body.almara-aff-account .slicewp-affiliate-area {
  max-width: min(960px, 100%) !important;
  margin: 0 auto !important;
  padding: 2rem var(--pad-h, 40px) 4rem !important;
  box-sizing: border-box !important;
}

/* ── Navigation tabs ── */
body.almara-aff-account .slicewp-nav { margin: 0 0 2rem !important; }
body.almara-aff-account .slicewp-nav ul {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-wrap: wrap !important; gap: 2px !important;
  border-bottom: 2px solid var(--border) !important;
}
body.almara-aff-account .slicewp-nav ul li { margin: 0 !important; padding: 0 !important; }
body.almara-aff-account .slicewp-nav ul li a {
  display: block !important; padding: 10px 16px !important;
  font-family: var(--fb) !important; font-size: 12px !important;
  font-weight: 600 !important; letter-spacing: .05em !important;
  text-transform: uppercase !important; color: var(--muted) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important; margin-bottom: -2px !important;
  transition: color .15s, border-color .15s !important; white-space: nowrap !important;
}
body.almara-aff-account .slicewp-nav ul li a:hover { color: var(--ocean) !important; border-bottom-color: var(--aqua) !important; }
body.almara-aff-account .slicewp-nav ul li.slicewp-nav-item-active a,
body.almara-aff-account .slicewp-nav ul li.current a {
  color: var(--ocean) !important; border-bottom-color: var(--aqua) !important; font-weight: 700 !important;
}
/* Logout: subtle red on hover */
body.almara-aff-account .slicewp-nav ul li:last-child a { color: var(--muted) !important; font-weight: 500 !important; }
body.almara-aff-account .slicewp-nav ul li:last-child a:hover { color: #c0392b !important; border-bottom-color: #c0392b !important; }

/* ── Date range selector ── */
body.almara-aff-account .slicewp-date-range-filter,
body.almara-aff-account .slicewp-date-filter {
  margin-bottom: 1.25rem !important;
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: .75rem !important;
}
body.almara-aff-account select {
  border: 1px solid rgba(10,61,92,.2) !important; border-radius: 3px !important;
  padding: 7px 12px !important; font-family: var(--fb) !important;
  font-size: 13px !important; color: var(--text) !important; background: #fff !important;
}

/* ── Stat blocks ── */
body.almara-aff-account .slicewp-stats {
  display: flex !important; flex-wrap: wrap !important; gap: 16px !important; margin: 0 0 1.5rem !important;
}
body.almara-aff-account .slicewp-stat {
  flex: 1 1 180px !important;
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: 4px !important; padding: 1.25rem 1.5rem !important;
  box-shadow: 0 2px 12px rgba(6,32,51,.06) !important;
}
body.almara-aff-account .slicewp-stat-count {
  display: block !important; font-family: var(--fd) !important; font-size: 2.2rem !important;
  font-weight: 300 !important; color: var(--ocean) !important; line-height: 1 !important; margin-bottom: .3rem !important;
}
body.almara-aff-account .slicewp-stat-name {
  display: block !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--muted) !important; margin: 0 !important;
}

/* ── Chart container ── */
body.almara-aff-account .slicewp-chart {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: 4px !important; padding: 1.5rem !important; margin-bottom: 1.5rem !important;
  box-shadow: 0 2px 12px rgba(6,32,51,.06) !important; overflow: hidden !important;
}

/* ── Section headings (Gesamtzeitraum, Programmdetails) ── */
body.almara-aff-account .slicewp-affiliate-area h3,
body.almara-aff-account .slicewp-affiliate-area h2 {
  font-family: var(--fd) !important; font-size: 1.4rem !important;
  font-weight: 400 !important; color: var(--text) !important; margin: 2rem 0 1rem !important;
}

/* ── Programme details / All-time stat cards ── */
body.almara-aff-account .slicewp-program-details,
body.almara-aff-account .slicewp-commission-rates {
  display: flex !important; flex-wrap: wrap !important; gap: 16px !important; margin-bottom: 1.5rem !important;
}
body.almara-aff-account .slicewp-program-details > *,
body.almara-aff-account .slicewp-commission-rates > * {
  flex: 1 1 200px !important; background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: 4px !important; padding: 1rem 1.25rem !important;
  font-size: 13px !important; color: var(--muted) !important;
}

/* ── Data tables ── */
body.almara-aff-account .slicewp-table,
body.almara-aff-account .slicewp-affiliate-area table {
  width: 100% !important; border-collapse: collapse !important; font-size: 13px !important;
  margin: 0 0 1.5rem !important; background: #fff !important;
  border: 1px solid var(--border) !important; border-radius: 4px !important; overflow: hidden !important;
}
body.almara-aff-account .slicewp-table th,
body.almara-aff-account .slicewp-affiliate-area table th {
  padding: 10px 14px !important; font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: var(--muted) !important; background: var(--foam) !important;
  border-bottom: 1px solid var(--border) !important; text-align: left !important;
}
body.almara-aff-account .slicewp-table td,
body.almara-aff-account .slicewp-affiliate-area table td {
  padding: 10px 14px !important; color: var(--text) !important;
  border-bottom: 1px solid rgba(10,61,92,.06) !important; font-size: 13px !important;
}
body.almara-aff-account .slicewp-table tr:last-child td,
body.almara-aff-account .slicewp-affiliate-area table tr:last-child td { border-bottom: none !important; }
body.almara-aff-account .slicewp-table tr:hover td,
body.almara-aff-account .slicewp-affiliate-area table tr:hover td { background: var(--foam) !important; }
body.almara-aff-account .slicewp-table td code,
body.almara-aff-account .slicewp-affiliate-area table td code {
  font-family: 'SF Mono','Fira Code',monospace !important; font-size: 11px !important;
  background: var(--foam) !important; padding: 2px 6px !important;
  border-radius: 3px !important; word-break: break-all !important; color: var(--ocean) !important;
}

/* ── Affiliate link display ── */
body.almara-aff-account .slicewp-affiliate-link {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: 4px !important; padding: 1rem 1.25rem !important; margin-bottom: .75rem !important;
  display: flex !important; align-items: center !important; gap: .75rem !important; flex-wrap: wrap !important;
}
body.almara-aff-account .slicewp-affiliate-link input[type="text"] {
  flex: 1 1 300px !important; font-size: 12px !important;
  font-family: 'SF Mono','Fira Code',monospace !important; color: var(--ocean) !important;
  background: var(--foam) !important; border: 1px solid var(--border) !important;
  border-radius: 3px !important; padding: 8px 10px !important;
}

/* ── Settings form ── */
body.almara-aff-account .slicewp-form { max-width: 560px !important; }
body.almara-aff-account .slicewp-form .slicewp-field-container { margin-bottom: .75rem !important; }
body.almara-aff-account .slicewp-form label,
body.almara-aff-account .slicewp-form .slicewp-field-label {
  display: block !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--muted) !important; margin-bottom: 4px !important;
}
body.almara-aff-account .slicewp-form input,
body.almara-aff-account .slicewp-form select,
body.almara-aff-account .slicewp-form textarea {
  width: 100% !important; border: 1px solid rgba(10,61,92,.2) !important;
  border-radius: 3px !important; padding: 10px 13px !important;
  font-family: var(--fb) !important; font-size: 14px !important;
  color: var(--text) !important; background: #fff !important; box-sizing: border-box !important;
}
body.almara-aff-account .slicewp-form input:focus,
body.almara-aff-account .slicewp-form select:focus,
body.almara-aff-account .slicewp-form textarea:focus { border-color: var(--aqua) !important; outline: none !important; }

/* ── Buttons (account area) ── */
body.almara-aff-account .slicewp-button,
body.almara-aff-account .slicewp-button-primary,
body.almara-aff-account .slicewp-affiliate-area input[type="submit"],
body.almara-aff-account .slicewp-affiliate-area button[type="submit"] {
  background-color: var(--aqua) !important; color: var(--dark) !important;
  border: 1px solid var(--aqua) !important; border-radius: 3px !important;
  font-family: var(--fb) !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  padding: 11px 24px !important; cursor: pointer !important; display: inline-block !important;
  transition: background .15s, border-color .15s !important;
}

/* ── Notices ── */
body.almara-aff-account .slicewp-notice,
body.almara-aff-account .slicewp-message {
  padding: .75rem 1rem !important; border-radius: 3px !important; font-size: 13px !important; margin-bottom: 1rem !important;
}
body.almara-aff-account .slicewp-notice-success,
body.almara-aff-account .slicewp-message-success {
  background: rgba(43,168,200,.1) !important; border: 1px solid var(--aqua) !important; color: var(--ocean) !important;
}
body.almara-aff-account .slicewp-notice-error,
body.almara-aff-account .slicewp-message-error {
  background: rgba(200,80,60,.08) !important; border: 1px solid rgba(200,80,60,.4) !important; color: #a93226 !important;
}

/* ── Pagination ── */
body.almara-aff-account .slicewp-pagination {
  display: flex !important; gap: 4px !important; margin: 1rem 0 !important; flex-wrap: wrap !important;
}
body.almara-aff-account .slicewp-pagination a,
body.almara-aff-account .slicewp-pagination span {
  padding: 6px 12px !important; font-size: 12px !important;
  border: 1px solid var(--border) !important; border-radius: 3px !important;
  color: var(--text) !important; text-decoration: none !important; background: #fff !important;
}
body.almara-aff-account .slicewp-pagination .slicewp-page-current {
  background: var(--aqua) !important; color: var(--dark) !important;
  border-color: var(--aqua) !important; font-weight: 700 !important;
}

/* =========================================================
 * AC-04. SLICEWP RESET PASSWORD FORM
 *         Scoped to body.almara-aff-reset
 * ========================================================= */
body.almara-aff-reset .slicewp-affiliate-area {
  max-width: 480px !important; margin: 3rem auto !important;
  background: #fff !important; border: 1px solid var(--border) !important;
  border-radius: 6px !important; padding: 2.5rem !important;
  box-shadow: 0 8px 40px rgba(6,32,51,.1) !important;
}
body.almara-aff-reset .slicewp-form { max-width: 100% !important; }
body.almara-aff-reset .slicewp-form .slicewp-field-container { margin-bottom: .75rem !important; }
body.almara-aff-reset .slicewp-form label,
body.almara-aff-reset .slicewp-form .slicewp-field-label {
  display: block !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  color: var(--muted) !important; margin-bottom: 5px !important;
}
body.almara-aff-reset .slicewp-form input[type="email"],
body.almara-aff-reset .slicewp-form input[type="text"] {
  width: 100% !important; border: 1.5px solid rgba(10,61,92,.22) !important;
  border-radius: 3px !important; padding: 12px 14px !important;
  font-family: var(--fb) !important; font-size: 15px !important;
  color: var(--text) !important; background: var(--foam) !important; box-sizing: border-box !important;
}
body.almara-aff-reset .slicewp-form input:focus { border-color: var(--aqua) !important; outline: none !important; background: #fff !important; }
body.almara-aff-reset .slicewp-button,
body.almara-aff-reset .slicewp-button-primary,
body.almara-aff-reset .slicewp-affiliate-area input[type="submit"],
body.almara-aff-reset .slicewp-affiliate-area button[type="submit"] {
  width: 100% !important; background-color: var(--aqua) !important;
  color: var(--dark) !important; border: 1px solid var(--aqua) !important;
  border-radius: 3px !important; font-family: var(--fb) !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; padding: 13px 24px !important;
  cursor: pointer !important; margin-top: 1rem !important; display: block !important;
}
body.almara-aff-reset .slicewp-affiliate-area p,
body.almara-aff-reset .slicewp-affiliate-area .slicewp-description {
  font-size: 14px !important; color: var(--muted) !important; line-height: 1.65 !important; margin: 0 0 1.25rem !important;
}
body.almara-aff-reset .slicewp-affiliate-area a { color: var(--aqua) !important; font-size: 13px !important; }
body.almara-aff-reset .slicewp-notice,
body.almara-aff-reset .slicewp-message {
  padding: .75rem 1rem !important; border-radius: 3px !important; font-size: 13px !important; margin-top: 1rem !important;
}
body.almara-aff-reset .slicewp-notice-success,
body.almara-aff-reset .slicewp-message-success {
  background: rgba(43,168,200,.1) !important; border: 1px solid var(--aqua) !important; color: var(--ocean) !important;
}

/* Reef badge section — button */
#alm-reef-badge .elementor-button {
  background-color: var(--reef) !important;
  color: var(--dark) !important;
  border: 1px solid var(--reef) !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
}