/*
 * WooCommerce My Account - Apple inspired styling
 * Onderdeel van de Online Content Wizard-plugin. Geladen op de "Mijn account"-pagina.
 */

:root {
  --account-bg: #fafafa;
  --account-panel: rgba(255, 255, 255, 0.82);
  --account-panel-solid: #ffffff;
  --account-text: #1d1d1f;
  --account-muted: #6e6e73;
  --account-border: rgba(0, 0, 0, 0.1);
  --account-border-soft: rgba(0, 0, 0, 0.06);
  --account-blue: #0071e3;
  --account-blue-hover: #0077ed;
  --account-red: #d70015;
  --account-shadow: 0 18px 55px rgba(0, 0, 0, 0.08);
  --account-radius-lg: 28px;
  --account-radius-md: 18px;
  --account-radius-sm: 12px;
}

.woocommerce-account .entry-content,
.woocommerce-account main .woocommerce,
.woocommerce-account .woocommerce {
  color: var(--account-text);
}

/* Pagina-achtergrond. */
body.woocommerce-account { background: var(--account-bg); }

.woocommerce-account .woocommerce {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 42px);
  border-radius: var(--account-radius-lg);
  background: var(--account-bg);
}

.woocommerce-account .woocommerce::before {
  content: "Mijn account";
  display: block;
  margin: 0 0 28px;
  color: var(--account-text);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 29%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Eén zachte schadup per kaart: drop-shadow volgt de twee witte vormen,
     zonder lijnen tússen de items te tekenen. */
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.07));
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border: 0;
  padding-inline: 28px;
  background: #fff;
  list-style: none;
  box-shadow: none;
}

/* Onderkant van de tweede kaart = het laatste menu-item (robuust bij extra tabs). */
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  padding-bottom: 22px;
  border-radius: 0 0 var(--account-radius-lg) var(--account-radius-lg);
}

/* Geen grijze scheidingslijntjes (WooCommerce zet standaard een border-bottom op li's). */
.woocommerce-account .woocommerce-MyAccount-navigation ul li,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  border: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li::marker {
  content: "";
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads,
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address {
  display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard,
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders,
.woocommerce-account .woocommerce-MyAccount-navigation-link--subscriptions,
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account,
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
  padding-inline: 28px;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard {
  padding-top: 22px;
  border-radius: var(--account-radius-lg) var(--account-radius-lg) 0 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
  padding-bottom: 22px;
  border-radius: 0 0 var(--account-radius-lg) var(--account-radius-lg);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--content-genereren,
.woocommerce-account .woocommerce-MyAccount-navigation-link--historie,
.woocommerce-account .woocommerce-MyAccount-navigation-link--profiel,
.woocommerce-account .woocommerce-MyAccount-navigation-link--verbindingen {
  padding-inline: 28px;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--content-genereren {
  margin-top: 24px;
  padding-top: 22px;
  border-radius: var(--account-radius-lg) var(--account-radius-lg) 0 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 58px;
  padding: 12px 14px;
  border: 0;
  box-shadow: none;
  border-radius: var(--account-radius-md);
  color: var(--account-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: rgba(0, 0, 0, 0.045);
  color: var(--account-text);
  transform: translateY(-1px);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
  background: var(--account-text);
  color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
  width: calc(71% - 28px);
  margin-left: 28px;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--account-border-soft);
  border-radius: var(--account-radius-lg);
  background: var(--account-panel-solid);
  box-shadow: var(--account-shadow);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
  color: var(--account-muted);
  font-size: 17px;
  line-height: 1.6;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend {
  margin: 0 0 18px;
  color: var(--account-text);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}

.woocommerce-account .woocommerce-MyAccount-content a {
  color: var(--account-blue);
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: var(--account-blue-hover);
  text-decoration: underline;
}

.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
  margin-bottom: 22px;
  padding: 16px 18px;
  border: 1px solid var(--account-border-soft);
  border-radius: var(--account-radius-md);
  background: #fff;
  color: var(--account-text);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
}

.woocommerce-account .woocommerce-error {
  border-color: rgba(215, 0, 21, 0.2);
  color: var(--account-red);
}

.woocommerce-account table.shop_table {
  overflow: hidden;
  border: 1px solid var(--account-border-soft);
  border-radius: var(--account-radius-md);
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
  padding: 16px;
  border-color: var(--account-border-soft);
  color: var(--account-text);
  font-size: 14px;
  line-height: 1.45;
}

.woocommerce-account table.shop_table th {
  background: #f9f9fb;
  color: var(--account-muted);
  font-weight: 700;
}

.woocommerce-account address {
  padding: 18px;
  border: 1px solid var(--account-border-soft);
  border-radius: var(--account-radius-md);
  background: #fbfbfd;
  color: var(--account-muted);
  font-style: normal;
  line-height: 1.65;
}

.woocommerce-account form .form-row {
  margin-bottom: 18px;
}

.woocommerce-account form label {
  margin-bottom: 7px;
  color: var(--account-text);
  font-size: 13px;
  font-weight: 700;
}

.woocommerce-account input.input-text,
.woocommerce-account textarea,
.woocommerce-account select,
.woocommerce-account .select2-container .select2-selection {
  min-height: 46px;
  border: 1px solid var(--account-border);
  border-radius: var(--account-radius-sm);
  background: #fff;
  color: var(--account-text);
  font-size: 15px;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.woocommerce-account input.input-text,
.woocommerce-account textarea,
.woocommerce-account select {
  padding: 10px 13px;
}

.woocommerce-account textarea {
  min-height: 118px;
}

.woocommerce-account input.input-text:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus,
.woocommerce-account .select2-container--focus .select2-selection {
  border-color: var(--account-blue);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16);
}

.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account a.button {
  min-height: 42px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--account-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.woocommerce-account .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account a.button:hover {
  background: var(--account-blue-hover);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}

.woocommerce-account .woocommerce-Address {
  padding: 22px;
  border: 1px solid var(--account-border-soft);
  border-radius: var(--account-radius-lg);
  background: #fff;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.05);
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.woocommerce-account .woocommerce-Address-title h3 {
  margin: 0;
  font-size: 20px;
}

.woocommerce-account .woocommerce-Address-title .edit {
  flex: 0 0 auto;
  color: var(--account-blue);
  font-size: 14px;
  font-weight: 700;
}

.woocommerce-account fieldset {
  margin: 28px 0 0;
  padding: 22px;
  border: 1px solid var(--account-border-soft);
  border-radius: var(--account-radius-lg);
  background: #fbfbfd;
}

/* ============================================================
 * OCW-componenten uitlijnen met de Apple-account-stijl
 * (de plugin-UI staat binnen het content-paneel)
 * ============================================================ */

/* Vul het paneel; geen eigen max-width/centrering meer. */
.woocommerce-account .ocwiz-app,
.woocommerce-account .ocwiz-wizard {
  max-width: none;
  margin: 0;
  width: 100%;
  font: inherit;
  color: var(--account-text);
}

/* Wizard-stappen = één nette Apple-kaart (geen dubbele of teal rand). */
.woocommerce-account .ocwiz-wizard .ocwiz-step {
  margin: 0 0 22px;
  padding: 22px;
  border: 1px solid var(--account-border-soft);
  border-left: 1px solid var(--account-border-soft);
  border-radius: var(--account-radius-lg);
  background: #fbfbfd;
}
.woocommerce-account .ocwiz-wizard legend,
.woocommerce-account .ocwiz-wizard details.ocwiz-section > summary {
  padding: 0;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: var(--account-text);
}
.woocommerce-account .ocwiz-wizard details.ocwiz-section > summary::after { color: var(--account-muted); }

/* Labels + velden in de hele OCW-UI. */
.woocommerce-account .ocwiz-wizard label,
.woocommerce-account .ocwiz-app label {
  color: var(--account-text);
  font-weight: 600;
}
.woocommerce-account .ocwiz-wizard input[type=text],
.woocommerce-account .ocwiz-wizard input[type=url],
.woocommerce-account .ocwiz-wizard textarea,
.woocommerce-account .ocwiz-wizard select,
.woocommerce-account .ocwiz-app input[type=text],
.woocommerce-account .ocwiz-app input[type=url],
.woocommerce-account .ocwiz-app input[type=password],
.woocommerce-account .ocwiz-app textarea,
.woocommerce-account .ocwiz-app select {
  border: 1px solid var(--account-border);
  border-radius: var(--account-radius-sm);
  background: #fff;
  color: var(--account-text);
}
.woocommerce-account .ocwiz-wizard input:focus,
.woocommerce-account .ocwiz-wizard textarea:focus,
.woocommerce-account .ocwiz-wizard select:focus,
.woocommerce-account .ocwiz-app input:focus,
.woocommerce-account .ocwiz-app textarea:focus,
.woocommerce-account .ocwiz-app select:focus {
  border-color: var(--account-blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16);
}

/* Knoppen → Apple-pill. */
.woocommerce-account .ocwiz-btn,
.woocommerce-account .ocwiz-submit {
  border-radius: 999px;
  border: 1px solid var(--account-border);
  background: #fff;
  color: var(--account-text);
  font-weight: 700;
}
.woocommerce-account .ocwiz-btn--primary,
.woocommerce-account .ocwiz-submit {
  border-color: var(--account-blue);
  background: var(--account-blue);
  color: #fff;
}
.woocommerce-account .ocwiz-btn--primary:hover,
.woocommerce-account .ocwiz-submit:hover { background: var(--account-blue-hover); }
.woocommerce-account .ocwiz-btn--ghost { border-color: transparent; background: transparent; color: var(--account-blue); }

/* Knop-links binnen het content-paneel mogen de blauwe link-kleur/underline NIET erven
   (anders blauwe tekst op een blauwe knop = onzichtbaar). */
.woocommerce-account .woocommerce-MyAccount-content a.ocwiz-btn,
.woocommerce-account .woocommerce-MyAccount-content a.ocwiz-btn:hover {
  color: var(--account-text);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content a.ocwiz-btn--primary,
.woocommerce-account .woocommerce-MyAccount-content a.ocwiz-btn--primary:hover {
  color: #fff;
}

/* Schone knop-links: geen thema-decoratie (pseudo-elementen) en als pill renderen. */
.woocommerce-account .ocwiz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  overflow: visible;
  box-shadow: none;
  vertical-align: middle;
}
.woocommerce-account .ocwiz-btn::before,
.woocommerce-account .ocwiz-btn::after {
  content: none !important;
  display: none !important;
}
.woocommerce-account .ocwiz-iconbtn { border-radius: var(--account-radius-sm); }

/* Panelen en kaarten: vlak, Apple-radius, geen teal-accent. */
.woocommerce-account .ocwiz-panel,
.woocommerce-account .ocwiz-ch,
.woocommerce-account .ocwiz-actionbar,
.woocommerce-account .ocwiz-aud,
.woocommerce-account .ocwiz-storage-row {
  border: 1px solid var(--account-border-soft);
  border-left-color: var(--account-border-soft);
  border-radius: var(--account-radius-md);
  box-shadow: none;
}
.woocommerce-account .ocwiz-panel h3,
.woocommerce-account .ocwiz-ch__head h3 { color: var(--account-text); }
.woocommerce-account .ocwiz-app__bar { border-radius: var(--account-radius-md); box-shadow: none; }
.woocommerce-account .ocwiz-app__logo { background: var(--account-text); }

/* Per-doelgroep groep op de Genereren-tab. */
.woocommerce-account .ocwiz-audience-group { margin: 0 0 26px; }
.woocommerce-account .ocwiz-aud-grouptitle {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--account-text);
}

/* Genereren-tab: groepstitels dicht op hun opties (geen grote gaten). */
.woocommerce-account .ocwiz-app .ocwiz-muted { margin: 16px 0 6px; }
.woocommerce-account .ocwiz-app .ocwiz-idea-label { margin: 0 0 6px; }
.woocommerce-account .ocwiz-app .ocwiz-idea-row { margin-top: 6px; }
.woocommerce-account .ocwiz-app .ocwiz-chanpick { margin: 0 0 6px; row-gap: 8px; }
.woocommerce-account .ocwiz-app .ocwiz-chanpick .ocwiz-check { margin: 0; }
.woocommerce-account .ocwiz-app .ocwiz-panel > label:first-child { margin-top: 0; }

/* Uitdiepen-paneel: Apple-blauw accent i.p.v. teal. */
.woocommerce-account .ocwiz-expand > summary { color: var(--account-blue); }
.woocommerce-account .ocwiz-summarize-status { color: var(--account-muted); }
.woocommerce-account .ocwiz-upgrade { border-left-color: var(--account-blue); }
.woocommerce-account .ocwiz-upgrade h3 { color: var(--account-text); }
.woocommerce-account .ocwiz-onboard { border-left-color: var(--account-blue); }
.woocommerce-account .ocwiz-step-mark { color: var(--account-blue); }

@media (max-width: 900px) {
  .woocommerce-account .woocommerce {
    padding: 16px;
    border-radius: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    margin-left: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 16px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    grid-template-columns: 1fr;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 22px 18px;
  }
}

@media (max-width: 560px) {
  .woocommerce-account .woocommerce::before {
    margin-bottom: 18px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    grid-template-columns: 1fr;
  }

  .woocommerce-account table.shop_table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .woocommerce-account .button,
  .woocommerce-account button.button,
  .woocommerce-account input.button,
  .woocommerce-account a.button {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   Online Content Wizard als losse shortcode-app ([online_content_wizard])
   Titel + linker-navigatie (kaart) + content-kaart. Los van Mijn account.
   ============================================================ */
.ocwiz-shell { max-width: 1180px; margin-inline: auto; padding: clamp(8px, 2vw, 24px); }
.ocwiz-shell__title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--account-text); margin: 0 0 1.2rem; }
.ocwiz-shell__grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); align-items: start; }
.ocwiz-shell__nav { display: flex; flex-direction: column; gap: 4px; background: var(--account-panel-solid); border-radius: var(--account-radius-md); padding: 10px; box-shadow: var(--account-shadow); position: sticky; top: 24px; }
.ocwiz-shell__logo { display: block; padding: 6px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.ocwiz-shell__logo img { display: block; width: 100%; max-width: 150px; height: auto; margin: 0 auto; }
.ocwiz-shell__link { display: block; text-align: left; padding: 12px 14px; border-radius: var(--account-radius-sm); color: var(--account-text); text-decoration: none; font-weight: 600; line-height: 1.2; transition: background .15s ease, color .15s ease; }
.ocwiz-shell__link:hover { background: rgba(0,0,0,0.05); color: var(--account-text); }
.ocwiz-shell__link.is-active { background: #ecf6f5; color: #134747; }
.ocwiz-shell__content { background: var(--account-panel-solid); border-radius: var(--account-radius-lg); padding: clamp(18px, 2.5vw, 36px); box-shadow: var(--account-shadow); min-width: 0; }
.ocwiz-shell__content > .ocwiz-app, .ocwiz-shell__content > .ocwiz-wizard { margin: 0; }

/* Begeleide onboarding-balk (Profiel → Verbindingen → Genereren). */
.ocwiz-onboard { background: var(--account-panel-solid); border-radius: var(--account-radius-md); box-shadow: var(--account-shadow); padding: 14px 18px; margin-bottom: clamp(14px, 2vw, 24px); }
.ocwiz-onboard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ocwiz-onboard__title { font-size: 1rem; color: var(--account-text); }
.ocwiz-onboard__count { color: #6b7280; font-size: .85rem; }
.ocwiz-onboard__hide { margin-left: auto; border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 6px; border-radius: 6px; }
.ocwiz-onboard__hide:hover { background: rgba(0,0,0,.06); color: var(--account-text); }
.ocwiz-onboard__steps { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0 0 12px; padding: 0; }
.ocwiz-onboard__step { display: flex; align-items: center; gap: 8px; color: #9ca3af; font-weight: 600; line-height: 1.2; }
.ocwiz-onboard__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #e5e7eb; color: #6b7280; font-size: .8rem; flex: 0 0 auto; }
.ocwiz-onboard__step.is-active { color: var(--account-text); }
.ocwiz-onboard__step.is-active .ocwiz-onboard__num { background: #1b3a8f; color: #fff; }
.ocwiz-onboard__step.is-done { color: var(--account-text); }
.ocwiz-onboard__step.is-done .ocwiz-onboard__num { background: #14a098; color: #fff; }
.ocwiz-onboard__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ocwiz-onboard__hint { color: #4b5563; }
.ocwiz-onboard__cta .ocwiz-btn { margin-left: auto; white-space: nowrap; }
@media (max-width: 600px) { .ocwiz-onboard__cta .ocwiz-btn { margin-left: 0; width: 100%; text-align: center; } }
@media (max-width: 860px) { .ocwiz-shell__grid { grid-template-columns: 1fr; } .ocwiz-shell__nav { position: static; flex-flow: row wrap; } .ocwiz-shell__link { flex: 1 1 auto; } .ocwiz-shell__logo { flex: 1 1 100%; border-bottom: none; padding-bottom: 6px; } .ocwiz-shell__logo img { max-width: 130px; } }

/* ============================================================
   App-shell: account-avatar (foto uploaden) + dropdown + footer
   ============================================================ */
.ocwiz-shell__bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 14px; }
.ocwiz-accountmenu { position: relative; }
.ocwiz-accountmenu .ocwiz-avatar {
  position: relative;
  width: 52px !important; height: 52px !important; min-width: 52px; flex: 0 0 auto;
  border: 0; padding: 0; border-radius: 50%; box-sizing: border-box;
  cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #1f6f6f; color: #fff; font-weight: 800; font-size: 1.25rem; line-height: 1;
  box-shadow: var(--account-shadow); transition: transform .12s ease, box-shadow .12s ease;
}
.ocwiz-accountmenu .ocwiz-avatar:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(31,111,111,.28); }
/* Bewust vaste maat + cover, met !important zodat thema-regels (img{height:auto;max-width:100%})
   de foto niet uit het rondje laten groeien — elke verhouding wordt netjes bijgesneden. */
.ocwiz-accountmenu .ocwiz-avatar img {
  position: absolute; inset: 0; z-index: 1;
  width: 100% !important; height: 100% !important; max-width: none !important; min-width: 0;
  object-fit: cover !important; border-radius: 50%; display: block; margin: 0; padding: 0;
}
/* De initiaal staat als achtergrondlaag onder de foto; valt terug als de foto niet laadt (onerror verwijdert de <img>). */
.ocwiz-accountmenu .ocwiz-avatar__initial { position: relative; z-index: 0; }
.ocwiz-accountmenu .ocwiz-avatar.is-loading { opacity: .55; cursor: progress; }
.ocwiz-accountmenu__pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 210px;
  background: var(--account-panel-solid); border: 1px solid var(--account-border-soft);
  border-radius: 16px; box-shadow: var(--account-shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
/* display:flex overschreef het hidden-attribuut, waardoor het accountmenu niet sloot. */
.ocwiz-accountmenu__pop[hidden] { display: none; }
.ocwiz-accountmenu__item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--account-text); text-decoration: none; padding: 11px 13px; border-radius: 10px;
}
.ocwiz-accountmenu__item:hover { background: rgba(0,0,0,.05); color: var(--account-text); }

.ocwiz-shell__foot { text-align: center; margin-top: 22px; }
.ocwiz-shell__back { color: var(--account-muted); text-decoration: none; font-weight: 600; }
.ocwiz-shell__back:hover { color: #1f6f6f; text-decoration: underline; }

/* Info-"i": cirkel naast een kop of label die op hover/focus een tooltip
   (title/aria-label) toont. Ongescopet zodat hij ook op de app-pagina werkt. */
.ocwiz-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; margin-left: .35em;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: .72em; font-style: italic; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: middle; opacity: .7;
}
.ocwiz-info:hover, .ocwiz-info:focus { opacity: 1; }