/* =========================================================================
   gv-account.css — RTCL MyAccount redesign voor Klussendirect particulieren
   Versie 1.0.0

   Transformeert het standaard RTCL account-layout naar een TKM-geïnspireerd
   design: 2-kolom grid op desktop (260px sidebar + content-card), sticky
   sidebar met gebruikerskaart en sectioned nav, mobile drawer slide-in.

   Kleurschema: Klussendirect blauw (#17A45C) i.p.v. TKM oranje.
   Fonts/icons: inline SVG masks (geen FA-dependency voor structuur).

   Vereisten:
     - PHP-hook in gv-engine.php injecteert:
         (a) .gv-acct-identity (gebruikerskaart, vóór nav-UL)
         (b) .gv-acct-trigger  (mobiele menu-knop, vóór content)
         (c) #gv-acct-drawer + #gv-acct-backdrop (mobiele drawer)
   =========================================================================*/


/* ── 0. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  --gva-primary:       #17A45C;
  --gva-primary-soft:  rgba(23,164,92,.08);
  --gva-primary-mid:   rgba(23,164,92,.18);
  --gva-primary-hover: #0E7A43;
  --gva-paper:         #f4f6fb;
  --gva-paper-bright:  #ffffff;
  --gva-line:          #e4e9f2;
  --gva-ink:           #1e293b;
  --gva-muted:         #64748b;
  --gva-danger:        #ef4444;
  --gva-ok:            #16a34a;
  --gva-radius-lg:     16px;
  --gva-radius-md:     10px;
  --gva-radius-sm:     6px;
  --gva-radius-full:   999px;
  --gva-shadow:        0 2px 8px rgba(23,164,92,.07);
  --gva-shadow-md:     0 4px 20px rgba(23,164,92,.13);
  --gva-font:          -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}


/* ── 1. OUTER WRAP — grid layout ──────────────────────────────────────────── */
.rtcl-MyAccount-wrap {
  display:               grid !important;
  grid-template-columns: 1fr !important;
  gap:                   20px !important;
  width:                 100% !important;
  max-width:             none !important;
  padding:               20px 16px 40px !important;
  box-sizing:            border-box !important;
  background:            var(--gva-paper) !important;
  /* Reset RTCL flex/float */
  align-items:           start !important;
  flex-wrap:             nowrap !important;
}
/* clearfix ghosts */
.rtcl-MyAccount-wrap::before,
.rtcl-MyAccount-wrap::after { display: none !important; }

/* Desktop: 2-column */
@media (min-width: 900px) {
  .rtcl-MyAccount-wrap {
    grid-template-columns: 260px 1fr !important;
    gap:                   24px !important;
    padding:               32px 24px 48px !important;
  }
}

/* Reset RTCL bootstrap-style column helpers — scoped to account wrap only */
.rtcl-MyAccount-wrap.rtcl-row              { margin: 0 !important; }
.rtcl-MyAccount-wrap .rtcl-col-md-3,
.rtcl-MyAccount-wrap .rtcl-col-md-9       { float: none !important; width: auto !important; padding: 0 !important; }


/* ── 2. SIDEBAR ───────────────────────────────────────────────────────────── */
.rtcl-MyAccount-navigation {
  /* Override RTCL's JS-set left: -225px */
  left:          auto !important;
  /* position:static i.p.v. sticky — een sticky grid-item kreeg een ~28px
     verticale offset (grid+sticky-quirk in Chrome), waardoor dit nav-kaartje
     lager stond dan de content ernaast. Static lijnt 'm netjes bovenaan uit. */
  position:      static !important;
  top:           auto !important;
  /* Card styling */
  background:    var(--gva-paper-bright) !important;
  border:        1px solid var(--gva-line) !important;
  border-radius: var(--gva-radius-lg) !important;
  padding:       16px !important;
  box-shadow:    var(--gva-shadow) !important;
  /* Reset RTCL transition/z-index */
  transition:    none !important;
  z-index:       auto !important;
  max-width:     none !important;
  overflow:      visible !important;
}
@media (max-width: 899px) {
  .rtcl-MyAccount-navigation {
    position: static !important;
    display:  none !important;   /* hidden on mobile; drawer takes over */
  }
}

/* Hide RTCL logo block (replaced by identity card) */
.rtcl-myaccount-logo { display: none !important; }

/* Explicit grid placement only for desktop — mobile auto-places correctly */
@media (min-width: 900px) {
  .rtcl-MyAccount-navigation { grid-column: 1 !important; grid-row: 1 !important; }
  .rtcl-MyAccount-content    { grid-column: 2 !important; grid-row: 1 !important; }
}


/* ── 3. IDENTITY CARD (injected by gv-engine.php) ────────────────────────── */
.gv-acct-identity {
  display:        flex;
  align-items:    center;
  gap:            12px;
  padding-bottom: 16px;
  border-bottom:  1px solid var(--gva-line);
  margin-bottom:  12px;
}
.gv-acct-avatar {
  width:         48px;
  height:        48px;
  border-radius: var(--gva-radius-full);
  overflow:      hidden;
  flex-shrink:   0;
  background:    var(--gva-paper);
  border:        2px solid var(--gva-line);
}
.gv-acct-avatar img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}
.gv-acct-identity-text {
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  gap:             2px;
}
.gv-acct-identity-label {
  font-size:      0.74rem;
  color:          var(--gva-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family:    var(--gva-font);
}
.gv-acct-identity-name {
  font-size:       1.15rem;
  font-weight:     800;
  color:           var(--gva-ink);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  font-family:     var(--gva-font);
}


/* ── 4. NAV LIST ──────────────────────────────────────────────────────────── */
.rtcl-MyAccount-navigation-list {
  list-style:     none !important;
  padding:        0 !important;
  margin:         0 !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            2px !important;
}

.rtcl-MyAccount-navigation-item {
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
}
.rtcl-MyAccount-navigation-item::before { content: none !important; }

/* Nav links */
.rtcl-MyAccount-navigation-item > a,
.rtcl-MyAccount-navigation-item > a:visited {
  display:         flex !important;
  align-items:     center !important;
  gap:             10px !important;
  padding:         10px 12px !important;
  border-radius:   var(--gva-radius-md) !important;
  color:           var(--gva-ink) !important;
  text-decoration: none !important;
  font-size:       0.875rem !important;
  font-weight:     500 !important;
  font-family:     var(--gva-font) !important;
  line-height:     1.4 !important;
  transition:      background 140ms ease, color 140ms ease !important;
  position:        relative !important;
  background:      transparent !important;
  border:          none !important;
  cursor:          pointer !important;
}

.rtcl-MyAccount-navigation-item > a:hover,
.rtcl-MyAccount-navigation-item > a:focus-visible {
  background:      var(--gva-paper) !important;
  color:           var(--gva-ink) !important;
  text-decoration: none !important;
}

/* Active state */
.rtcl-MyAccount-navigation-item.is-active > a,
.rtcl-MyAccount-navigation-item > a.is-active,
.rtcl-MyAccount-navigation-item.current-menu-item > a {
  background: var(--gva-primary-soft) !important;
  color:      var(--gva-primary) !important;
}

/* Logout item: muted */
.rtcl-MyAccount-navigation-link--logout > a,
.rtcl-MyAccount-navigation-link--logout > a:visited {
  color: var(--gva-muted) !important;
}
.rtcl-MyAccount-navigation-link--logout > a:hover {
  color:      var(--gva-danger) !important;
  background: rgba(239,68,68,.06) !important;
}

/* Badge inside nav link (RTCL unread count) */
.rtcl-MyAccount-navigation-item .rtcl-unread-badge {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  min-width:       18px !important;
  height:          18px !important;
  padding:         0 5px !important;
  font-size:       0.7rem !important;
  font-weight:     700 !important;
  background:      var(--gva-primary) !important;
  color:           #fff !important;
  border-radius:   var(--gva-radius-full) !important;
  margin-left:     auto !important;
}


/* ── 5. NAV ICONS (SVG mask per nav-item type) ────────────────────────────── */
/* Base: all items get an icon slot */
.rtcl-MyAccount-navigation-item > a::before {
  content:                    '' !important;
  display:                    inline-block !important;
  flex-shrink:                0 !important;
  width:                      18px !important;
  height:                     18px !important;
  background-color:           currentColor !important;
  -webkit-mask-repeat:        no-repeat !important;
  mask-repeat:                no-repeat !important;
  -webkit-mask-size:          contain !important;
  mask-size:                  contain !important;
  -webkit-mask-position:      center !important;
  mask-position:              center !important;
}

/* Dashboard / Home */
.rtcl-MyAccount-navigation-link--dashboard > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5'/%3E%3Cpath d='M5 10v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5'/%3E%3Cpath d='M5 10v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") !important;
}

/* Listings / Advertenties */
.rtcl-MyAccount-navigation-link--listings > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
}

/* Klusmatcher */
.rtcl-MyAccount-navigation-link--klusmatcher > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
}

/* Chat / Berichten */
.rtcl-MyAccount-navigation-link--chat > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

/* Edit account / Accountgegevens */
.rtcl-MyAccount-navigation-link--edit-account > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Profile settings / Profiel instellingen */
.rtcl-MyAccount-navigation-link--profile-settings > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") !important;
}

/* Add listing / Advertentie plaatsen */
.rtcl-MyAccount-navigation-link--add-listing > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E") !important;
}

/* Favourites */
.rtcl-MyAccount-navigation-link--favourites > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
}

/* Logout */
.rtcl-MyAccount-navigation-link--logout > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") !important;
  mask-image:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") !important;
}


/* ── 6. CONTENT AREA ─────────────────────────────────────────────────────── */
.rtcl-MyAccount-content {
  /* Override RTCL's JS-set width */
  width:         auto !important;
  max-width:     none !important;
  /* Card styling */
  background:    var(--gva-paper-bright) !important;
  border:        1px solid var(--gva-line) !important;
  border-radius: var(--gva-radius-lg) !important;
  padding:       24px !important;
  box-shadow:    var(--gva-shadow) !important;
  box-sizing:    border-box !important;
  min-width:     0 !important;
  position:      relative !important;
}
@media (min-width: 900px) {
  .rtcl-MyAccount-content {
    padding: 32px !important;
  }
}

/* Basic content typography reset */
.rtcl-MyAccount-content h2 {
  font-size:      1.15rem !important;
  font-weight:    600 !important;
  color:          var(--gva-ink) !important;
  margin:         0 0 16px !important;
  padding-bottom: 14px !important;
  border-bottom:  1px solid var(--gva-line) !important;
  font-family:    var(--gva-font) !important;
}
@media (min-width: 900px) {
  .rtcl-MyAccount-content h2 { font-size: 1.3rem !important; }
}

.rtcl-MyAccount-content .rtcl-alert,
.rtcl-MyAccount-content .notice {
  border-radius: var(--gva-radius-md) !important;
  border:        1px solid var(--gva-line) !important;
  padding:       12px 16px !important;
  font-size:     0.875rem !important;
}

/* Inputs / form controls get brand focus ring */
.rtcl-MyAccount-content input[type="text"],
.rtcl-MyAccount-content input[type="email"],
.rtcl-MyAccount-content input[type="password"],
.rtcl-MyAccount-content input[type="url"],
.rtcl-MyAccount-content input[type="tel"],
.rtcl-MyAccount-content textarea,
.rtcl-MyAccount-content select {
  border:        1px solid var(--gva-line) !important;
  border-radius: var(--gva-radius-md) !important;
  padding:       10px 14px !important;
  font-family:   var(--gva-font) !important;
  font-size:     0.9rem !important;
  color:         var(--gva-ink) !important;
  background:    var(--gva-paper-bright) !important;
  transition:    border-color 140ms ease, box-shadow 140ms ease !important;
}
.rtcl-MyAccount-content input:focus,
.rtcl-MyAccount-content textarea:focus,
.rtcl-MyAccount-content select:focus {
  outline:    none !important;
  border-color: var(--gva-primary) !important;
  box-shadow: 0 0 0 3px var(--gva-primary-soft) !important;
}

/* Primary submit buttons */
.rtcl-MyAccount-content .rtcl-btn,
.rtcl-MyAccount-content button[type="submit"],
.rtcl-MyAccount-content input[type="submit"] {
  background:    var(--gva-primary) !important;
  border:        none !important;
  border-radius: var(--gva-radius-md) !important;
  color:         #fff !important;
  font-family:   var(--gva-font) !important;
  font-weight:   600 !important;
  padding:       11px 22px !important;
  cursor:        pointer !important;
  transition:    background 140ms ease, transform 120ms ease !important;
}
.rtcl-MyAccount-content .rtcl-btn:hover,
.rtcl-MyAccount-content button[type="submit"]:hover,
.rtcl-MyAccount-content input[type="submit"]:hover {
  background: var(--gva-primary-hover) !important;
  transform:  translateY(-1px) !important;
}


/* ── 7. HIDE RTCL DEFAULT MOBILE ELEMENTS ────────────────────────────────── */
/* RTCL's own open-menu button: replace with our .gv-acct-trigger */
.rtcl-MyAccount-open-menu { display: none !important; }

/* RTCL bottom mobile navbar */
.rtcl-MyAccount-mobile-navbar { display: none !important; }

/* RTCL overlay */
.rtcl-MyAccount-overlay { display: none !important; }


/* ── 8. MOBILE MENU TRIGGER (injected by gv-engine.php) ─────────────────── */
.gv-acct-trigger {
  display:       none;   /* shown only on mobile via media query */
  appearance:    none;
  align-items:   center;
  gap:           8px;
  padding:       8px 16px;
  background:    var(--gva-paper-bright);
  border:        1px solid var(--gva-line);
  border-radius: var(--gva-radius-full);
  color:         var(--gva-ink);
  font-family:   var(--gva-font);
  font-weight:   600;
  font-size:     0.875rem;
  cursor:        pointer;
  box-shadow:    0 2px 6px rgba(23,164,92,.08);
  transition:    background 160ms ease, border-color 160ms ease;
  margin-bottom: 20px;
}
.gv-acct-trigger:hover {
  background:    var(--gva-primary-soft);
  border-color:  var(--gva-primary);
  color:         var(--gva-primary);
}
.gv-acct-trigger:active { transform: scale(0.98); }

@media (max-width: 899px) {
  .gv-acct-trigger { display: inline-flex; }
}


/* ── 9. MOBILE DRAWER ────────────────────────────────────────────────────── */
/* Backdrop */
.gv-acct-backdrop {
  position:         fixed;
  inset:            0;
  background:       rgba(15,25,50,.45);
  z-index:          9998;
  opacity:          0;
  pointer-events:   none;
  transition:       opacity 260ms ease;
  backdrop-filter:  blur(2px);
}
.gv-acct-backdrop.is-visible {
  opacity:        1;
  pointer-events: auto;
}

/* Drawer panel */
.gv-acct-drawer {
  position:         fixed;
  top:              0;
  left:             0;
  bottom:           0;
  width:            min(320px, 90vw);
  background:       var(--gva-paper-bright);
  z-index:          9999;
  display:          flex;
  flex-direction:   column;
  transform:        translateX(-100%);
  transition:       transform 280ms cubic-bezier(.4,0,.2,1);
  overflow:         hidden;
  box-shadow:       var(--gva-shadow-md);
}
.gv-acct-drawer.is-open {
  transform: translateX(0);
}

/* Drawer header */
.gv-acct-drawer-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 20px;
  border-bottom:   1px solid var(--gva-line);
  flex-shrink:     0;
}
.gv-acct-drawer-title {
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--gva-ink);
  font-family: var(--gva-font);
}
.gv-acct-drawer-close {
  width:         34px;
  height:        34px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        none;
  background:    transparent;
  color:         var(--gva-muted);
  border-radius: var(--gva-radius-full);
  cursor:        pointer;
  transition:    background 140ms ease, color 140ms ease;
}
.gv-acct-drawer-close:hover {
  background: var(--gva-paper);
  color:      var(--gva-ink);
}

/* Drawer scroll area */
.gv-acct-drawer-scroll {
  flex:              1;
  overflow-y:        auto;
  -webkit-overflow-scrolling: touch;
  padding:           16px 0 32px;
}

/* Drawer profile card */
.gv-acct-drawer-profile {
  display:         flex;
  align-items:     center;
  gap:             14px;
  padding:         14px 20px 18px;
  text-decoration: none;
  color:           inherit;
  border-bottom:   1px solid var(--gva-line);
  margin-bottom:   8px;
}
.gv-acct-drawer-avatar {
  width:         52px;
  height:        52px;
  border-radius: var(--gva-radius-full);
  overflow:      hidden;
  flex-shrink:   0;
  background:    var(--gva-paper);
  border:        2px solid var(--gva-line);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--gva-muted);
}
.gv-acct-drawer-avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.gv-acct-drawer-profile-text {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}
.gv-acct-drawer-profile-text small {
  font-size:      0.68rem;
  color:          var(--gva-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gv-acct-drawer-profile-text strong {
  font-size:     0.9rem;
  color:         var(--gva-ink);
  font-weight:   700;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.gv-acct-drawer-profile-text span {
  font-size: 0.78rem;
  color:     var(--gva-primary);
}

/* (Dode "Drawer quick-action"-CSS verwijderd: .gv-acct-drawer-qa* werd nergens
   meer gebruikt — vervangen door de hardcoded drawer-nav. 0 referenties.) */

/* Drawer section labels */
.gv-acct-drawer-section {
  padding:    8px 0 4px;
}
.gv-acct-drawer-label {
  display:        block;
  font-size:      0.68rem;
  font-weight:    600;
  color:          var(--gva-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding:        4px 20px 8px;
  font-family:    var(--gva-font);
}

/* Drawer nav items */
.gv-acct-drawer-item {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         12px 20px;
  text-decoration: none;
  color:           var(--gva-ink);
  font-family:     var(--gva-font);
  font-size:       0.9rem;
  font-weight:     500;
  transition:      background 140ms ease;
}
.gv-acct-drawer-item:hover {
  background:      var(--gva-paper);
  text-decoration: none;
  color:           var(--gva-ink);
}
.gv-acct-drawer-item.is-active {
  background: var(--gva-primary-soft);
  color:      var(--gva-primary);
}

/* Drawer item icon */
.gv-acct-drawer-icon {
  width:           36px;
  height:          36px;
  border-radius:   var(--gva-radius-sm);
  background:      var(--gva-paper);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  color:           var(--gva-muted);
}
.gv-acct-drawer-item.is-active .gv-acct-drawer-icon,
.gv-acct-drawer-item:hover     .gv-acct-drawer-icon {
  background: var(--gva-primary-soft);
  color:      var(--gva-primary);
}

/* Drawer item body */
.gv-acct-drawer-item-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            1px;
  min-width:      0;
}
.gv-acct-drawer-item-label {
  font-size:   0.9rem;
  font-weight: 600;
  color:       inherit;
}
.gv-acct-drawer-item-sub {
  font-size: 0.75rem;
  color:     var(--gva-muted);
}
.gv-acct-drawer-item.is-active .gv-acct-drawer-item-sub {
  color: var(--gva-primary);
  opacity: 0.75;
}

/* Drawer item badge */
.gv-acct-drawer-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       20px;
  height:          20px;
  padding:         0 6px;
  font-size:       0.72rem;
  font-weight:     700;
  background:      var(--gva-primary);
  color:           #fff;
  border-radius:   var(--gva-radius-full);
}

/* Drawer chevron */
.gv-acct-drawer-chev {
  color:       var(--gva-muted);
  flex-shrink: 0;
  opacity:     0.5;
}
.gv-acct-drawer-item:hover .gv-acct-drawer-chev,
.gv-acct-drawer-item.is-active .gv-acct-drawer-chev { opacity: 1; color: var(--gva-primary); }

/* Drawer logout */
.gv-acct-drawer-section--logout {
  margin-top:    8px;
  padding-top:   8px;
  border-top:    1px solid var(--gva-line);
}
.gv-acct-drawer-logout {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         12px 20px;
  color:           var(--gva-muted);
  text-decoration: none;
  font-size:       0.875rem;
  font-weight:     500;
  font-family:     var(--gva-font);
  transition:      background 140ms ease, color 140ms ease;
}
.gv-acct-drawer-logout:hover {
  color:      var(--gva-danger);
  background: rgba(239,68,68,.05);
}


/* ── 10. RESPONSIVE FINE-TUNING ──────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Content card: no round corners, full bleed on small screens */
  .rtcl-MyAccount-content {
    border-radius: var(--gva-radius-md) !important;
    padding:       20px !important;
  }
  /* Wrap: tighter padding */
  .rtcl-MyAccount-wrap {
    padding: 16px 12px 40px !important;
  }
}
@media (max-width: 480px) {
  .rtcl-MyAccount-content {
    padding:       16px !important;
  }
  .rtcl-MyAccount-wrap {
    padding: 12px 0 40px !important;
    gap:     12px !important;
  }
  .rtcl-MyAccount-content {
    border-radius: 0 !important;
    border-left:   none !important;
    border-right:  none !important;
  }
}