/* =============================================================
   Perfect Day Shop-Konnektor — Frontend-Stylesheet (v1.0.2)
   v1.0.2 — neue Komponenten `.pfd-account-card *` für den
   WooCommerce-Konto-Bereich (`wc_account_hooks.php`), im selben
   Brand-Card-Stil wie der Email-CTA aus v1.7.2.
   Sortierung der Branchen serverseitig in PHP via
   `pfdc_sort_members_by_branche()` — kein CSS dafür nötig.
   ----------------------------------------------------------------
   Perfect Day Shop-Konnektor — Frontend-Stylesheet (v1.0.1)
   Kongruent zum Haupt-Plugin (perfectday-style_v3_1_x.css).

   v1.0.1 — Spezifitäts-Boost gegen Theme-Übergriffe.
   Strategie:
     1) **Doppel-Klassen-Trick**: `.pfd-members-shell.pfd-members-shell`
        matched dieselbe Klasse zweimal → Spezifität (0,2,0) statt
        (0,1,0), ohne dass das HTML doppelte Klassen braucht.
     2) **Gezielte `!important`** an den Properties, die Themes
        besonders gerne übersteuern (`<a>`-Underline + Color, `<h2>/<h3>`-
        Margins/Borders, `<ul>/<li>`-List-Style, `<img>`-Größe,
        Card-Background/Padding/Radius).
     3) Reset-Block für Theme-CSS auf `<a>`/`<ul>`/`<li>`/`<img>` innerhalb
        der Member-Cards.

   Light by default. Dark via html[data-pfd-theme="dark"] ODER
   System-Präferenz `prefers-color-scheme: dark`.
   ============================================================= */

.pfd-members-shell.pfd-members-shell {
  --pfd-brand-500: #FF6B47;
  --pfd-brand-600: #EF5530;
  --pfd-brand-100: #FFF4F0;
  --pfd-accent-500: #2DD4BF;
  --pfd-accent-100: #CCFBF1;

  --pfd-bg:           #FBFAF7;
  --pfd-surface:      #FFFFFF;
  --pfd-surface-alt:  #F6F4EF;
  --pfd-border:       #E8E4DD;
  --pfd-border-strong:#CFC9BE;

  --pfd-text:        #1F2937;
  --pfd-text-muted:  #6B7280;
  --pfd-text-soft:   #9CA3AF;

  --pfd-font: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --pfd-fs-xs: 13px;
  --pfd-fs-sm: 14px;
  --pfd-fs-base: 15px;
  --pfd-fs-md: 15px;
  --pfd-fs-lg: 17px;
  --pfd-fs-xl: 20px;
  --pfd-fs-2xl: 24px;

  --pfd-radius-sm: 8px;
  --pfd-radius:    12px;
  --pfd-radius-lg: 18px;
  --pfd-radius-pill: 999px;

  --pfd-shadow-sm: 0 1px 2px rgba(31,41,55,.04);
  --pfd-shadow:    0 1px 3px rgba(31,41,55,.06), 0 6px 18px rgba(31,41,55,.05);
  --pfd-shadow-lg: 0 6px 18px rgba(31,41,55,.10), 0 18px 40px rgba(31,41,55,.06);

  font-family: var(--pfd-font) !important;
  font-size: var(--pfd-fs-base) !important;
  line-height: 1.5 !important;
  color: var(--pfd-text);
  display: block !important;
  box-sizing: border-box !important;
}

html[data-pfd-theme="dark"] .pfd-members-shell.pfd-members-shell,
@media (prefers-color-scheme: dark) {
  html:not([data-pfd-theme="light"]) .pfd-members-shell.pfd-members-shell {
    --pfd-bg:           #0F1115;
    --pfd-surface:      #1A1D23;
    --pfd-surface-alt:  #232730;
    --pfd-border:       #2E333D;
    --pfd-border-strong:#3D4452;
    --pfd-text:         #F3F4F6;
    --pfd-text-muted:   #9CA3AF;
    --pfd-text-soft:    #6B7280;
    --pfd-brand-500: #FF8264;
    --pfd-brand-100: #3A1F18;
    --pfd-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --pfd-shadow:    0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
    --pfd-shadow-lg: 0 6px 18px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.4);
  }
}

/* ==== Reset-Block: alles Theme-Geerbte in den Mitglieder-Bereichen löschen ==== */
.pfd-members-shell.pfd-members-shell *,
.pfd-members-shell.pfd-members-shell *::before,
.pfd-members-shell.pfd-members-shell *::after {
  box-sizing: border-box !important;
}

.pfd-members-shell.pfd-members-shell ul,
.pfd-members-shell.pfd-members-shell ol,
.pfd-members-shell.pfd-members-shell li {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* ----- Section (Branche-Group) -------------------------------- */
.pfd-members-shell.pfd-members-shell .pfd-members-section {
  margin: 0 0 48px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.pfd-members-shell.pfd-members-shell .pfd-members-section:last-child {
  margin-bottom: 0 !important;
}

.pfd-members-shell.pfd-members-shell .pfd-members-section-title {
  display: inline-block !important;
  margin: 0 0 22px !important;
  padding: 0 0 10px !important;
  font-family: var(--pfd-font) !important;
  font-size: var(--pfd-fs-2xl) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  color: var(--pfd-text) !important;
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 3px solid var(--pfd-brand-500) !important;
  text-transform: none !important;
  text-shadow: none !important;
}

/* ----- Grid Container ----------------------------------------- */
.pfd-members-shell.pfd-members-shell .pfd-members-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

@media (max-width: 600px) {
  .pfd-members-shell.pfd-members-shell .pfd-members-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 14px !important;
  }
}

/* ----- Member-Card (gleich für list / grid / slider) ---------- */
.pfd-members-shell.pfd-members-shell .pfd-member-card,
.pfd-members-shell.pfd-members-shell a.pfd-member-card,
.pfd-members-shell.pfd-members-shell a.pfd-member-card:link,
.pfd-members-shell.pfd-members-shell a.pfd-member-card:visited {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 18px !important;
  margin: 0 !important;
  background: var(--pfd-surface) !important;
  border: 1px solid var(--pfd-border) !important;
  border-radius: var(--pfd-radius) !important;
  box-shadow: var(--pfd-shadow-sm) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  color: var(--pfd-text) !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease !important;
  font-family: var(--pfd-font) !important;
  font-size: var(--pfd-fs-base) !important;
  line-height: 1.5 !important;
}

.pfd-members-shell.pfd-members-shell a.pfd-member-card:hover,
.pfd-members-shell.pfd-members-shell a.pfd-member-card:focus,
.pfd-members-shell.pfd-members-shell a.pfd-member-card:active,
.pfd-members-shell.pfd-members-shell .pfd-member-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--pfd-brand-500) !important;
  box-shadow: var(--pfd-shadow) !important;
  color: var(--pfd-text) !important;
  text-decoration: none !important;
  background: var(--pfd-surface) !important;
}

.pfd-members-shell.pfd-members-shell a.pfd-member-card:focus-visible {
  outline: 3px solid var(--pfd-brand-500) !important;
  outline-offset: 2px !important;
}

/* Logo-Container — kein eigener Border mehr (sonst Rahmen-im-Rahmen
   zusammen mit der Card-Border). Border-Radius bleibt für sauberen
   Abschluss bei farbigem Logo-Hintergrund-Fill. */
.pfd-members-shell.pfd-members-shell .pfd-member-card-logo {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 110px !important;
  margin: 0 !important;
  padding: 8px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--pfd-radius-sm) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.pfd-members-shell.pfd-members-shell .pfd-member-card-logo img,
.pfd-members-shell.pfd-members-shell .pfd-member-card-logo svg {
  max-width: 80% !important;
  max-height: 90% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Avatar-Fallback */
.pfd-members-shell.pfd-members-shell .pfd-member-card-logo-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--pfd-brand-500) 0%, var(--pfd-accent-500) 100%) !important;
  color: #fff !important;
  font-family: var(--pfd-font) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Body */
.pfd-members-shell.pfd-members-shell .pfd-member-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.pfd-members-shell.pfd-members-shell .pfd-member-card-name {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--pfd-font) !important;
  font-size: var(--pfd-fs-md) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.005em !important;
  color: var(--pfd-text) !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: color .15s ease !important;
}

.pfd-members-shell.pfd-members-shell a.pfd-member-card:hover .pfd-member-card-name,
.pfd-members-shell.pfd-members-shell .pfd-member-card:hover .pfd-member-card-name {
  color: var(--pfd-brand-500) !important;
}

.pfd-members-shell.pfd-members-shell .pfd-member-card-address {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--pfd-font) !important;
  font-size: var(--pfd-fs-xs) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--pfd-text-muted) !important;
  text-transform: none !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

/* ----- Slider (members-slider Shortcode) ---------------------- */
.pfd-members-shell.pfd-members-shell .pfd-members-slider-section {
  margin: 0 0 36px !important;
  padding: 0 !important;
  background: transparent !important;
}

.pfd-members-shell.pfd-members-shell .splide__slide {
  display: flex !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.pfd-members-shell.pfd-members-shell .splide__slide .pfd-member-card {
  width: 100% !important;
}

.pfd-members-shell.pfd-members-shell .splide__pagination {
  margin: 12px 0 0 !important;
}
.pfd-members-shell.pfd-members-shell .splide__pagination__page {
  background: var(--pfd-border) !important;
  opacity: 1 !important;
  transition: background .15s ease, transform .15s ease !important;
}
.pfd-members-shell.pfd-members-shell .splide__pagination__page.is-active {
  background: var(--pfd-brand-500) !important;
  transform: scale(1.2) !important;
}
.pfd-members-shell.pfd-members-shell .splide__arrow {
  background: var(--pfd-surface) !important;
  border: 1px solid var(--pfd-border) !important;
  opacity: 1 !important;
}
.pfd-members-shell.pfd-members-shell .splide__arrow:hover {
  background: var(--pfd-brand-500) !important;
  border-color: var(--pfd-brand-500) !important;
}
.pfd-members-shell.pfd-members-shell .splide__arrow:hover svg {
  fill: #fff !important;
}
.pfd-members-shell.pfd-members-shell .splide__arrow svg {
  fill: var(--pfd-text) !important;
}

/* ----- Friendly-Error-Banner (Catch-Block) ------------------- */
.pfd-members-shell.pfd-members-shell .pfd-alert {
  padding: 22px 26px !important;
  border-radius: var(--pfd-radius) !important;
  text-align: center !important;
  background: var(--pfd-surface-alt) !important;
  border: 1px solid var(--pfd-border) !important;
  color: var(--pfd-text) !important;
}
.pfd-members-shell.pfd-members-shell .pfd-alert h2 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: var(--pfd-fs-xl) !important;
  font-weight: 700 !important;
  color: var(--pfd-text) !important;
}
.pfd-members-shell.pfd-members-shell .pfd-alert p {
  margin: 0 0 6px !important;
  color: var(--pfd-text-muted) !important;
  font-size: var(--pfd-fs-sm) !important;
}
.pfd-members-shell.pfd-members-shell .pfd-alert-danger {
  background: #FEE2E2 !important;
  border-color: #FCA5A5 !important;
  color: #991B1B !important;
}
.pfd-members-shell.pfd-members-shell .pfd-alert-danger h2,
.pfd-members-shell.pfd-members-shell .pfd-alert-danger p {
  color: #991B1B !important;
}

/* =============================================================
   v1.0.2 — Konto-Bereich (WooCommerce-Bestelldetails-Ansicht)
   Kongruent zum Email-CTA-Stil aus v1.7.2: cremeweiße Card,
   Brand-Pill-Button + Ghost-Button, Hint-Text. Nutzt denselben
   `.pfd-members-shell.pfd-members-shell`-Spezifitäts-Anker, damit
   die Theme-CSS auf der Bestelldetails-Seite genauso wegblockt
   wird wie bei den Mitglieder-Shortcodes.
   ============================================================= */

.pfd-members-shell.pfd-members-shell .pfd-account-card {
  margin: 28px 0 36px !important;
  padding: 32px 28px !important;
  background: #FBFAF7 !important;
  border: 1px solid var(--pfd-border) !important;
  border-radius: var(--pfd-radius) !important;
  box-shadow: var(--pfd-shadow-sm) !important;
  text-align: center !important;
}
html[data-pfd-theme="dark"] .pfd-members-shell.pfd-members-shell .pfd-account-card {
  background: var(--pfd-surface) !important;
}

.pfd-members-shell.pfd-members-shell .pfd-account-card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--pfd-font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  color: var(--pfd-text) !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.pfd-members-shell.pfd-members-shell .pfd-account-card-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

.pfd-members-shell.pfd-members-shell .pfd-account-card-lead {
  margin: 0 auto 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--pfd-font) !important;
  font-size: var(--pfd-fs-base) !important;
  line-height: 1.5 !important;
  color: var(--pfd-text-muted) !important;
  max-width: 540px !important;
  text-align: center !important;
}

.pfd-members-shell.pfd-members-shell .pfd-account-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: center !important;
  margin: 0 0 18px !important;
}

@media (max-width: 600px) {
  .pfd-members-shell.pfd-members-shell .pfd-account-card-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

.pfd-members-shell.pfd-members-shell .pfd-account-btn,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn:link,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn:visited {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 220px !important;
  padding: 16px 32px !important;
  margin: 0 !important;
  font-family: var(--pfd-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease !important;
  box-shadow: var(--pfd-shadow-sm) !important;
}

.pfd-members-shell.pfd-members-shell a.pfd-account-btn:hover,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn:focus {
  transform: translateY(-1px) !important;
  box-shadow: var(--pfd-shadow) !important;
  text-decoration: none !important;
}

/* Primary — Brand-Gradient-Button */
.pfd-members-shell.pfd-members-shell .pfd-account-btn-primary,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn-primary,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn-primary:link,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn-primary:visited {
  background-color: var(--pfd-brand-500) !important;
  background-image: linear-gradient(180deg, var(--pfd-brand-500) 0%, var(--pfd-brand-600) 100%) !important;
  color: #ffffff !important;
}
.pfd-members-shell.pfd-members-shell a.pfd-account-btn-primary:hover {
  filter: brightness(1.05) !important;
  color: #ffffff !important;
}

/* Ghost — sekundäre Aktion mit dezentem Hintergrund */
.pfd-members-shell.pfd-members-shell .pfd-account-btn-ghost,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn-ghost,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn-ghost:link,
.pfd-members-shell.pfd-members-shell a.pfd-account-btn-ghost:visited {
  background: var(--pfd-surface) !important;
  color: var(--pfd-text) !important;
  border: 1px solid var(--pfd-border) !important;
}
.pfd-members-shell.pfd-members-shell a.pfd-account-btn-ghost:hover {
  background: var(--pfd-brand-100) !important;
  border-color: var(--pfd-brand-500) !important;
  color: var(--pfd-brand-500) !important;
}

.pfd-members-shell.pfd-members-shell .pfd-account-btn-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

.pfd-members-shell.pfd-members-shell .pfd-account-btn-sub {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: .85 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.pfd-members-shell.pfd-members-shell .pfd-account-card-hint {
  margin: 18px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  max-width: 540px !important;
  font-family: var(--pfd-font) !important;
  font-size: var(--pfd-fs-xs) !important;
  line-height: 1.5 !important;
  color: var(--pfd-text-muted) !important;
  text-align: center !important;
}