/* ═══════════════════════════════════════════════════════════════════════
 * PASKAMER PRAAT . Modal Close Button Contrast Fix (v1.0)
 * ═══════════════════════════════════════════════════════════════════════
 *
 * WCAG AA/AAA compliant contrast voor alle sluitknoppen (×) in modals.
 * Volledig additief . geen legacy CSS wordt aangeraakt.
 *
 * Doel: minimum 4.5:1 contrast ratio (WCAG AA) op X-glyph, met visible
 * focus-ring én hover-state die duidelijk zichtbaar is voor alle
 * gebruikers, ook bij scherm-reflecties en lage-visuele-scherpte.
 *
 * Selectors bestrijken:
 *   - .dy-tryon-close       (Virtual Try-On)
 *   - .dy-prem-close        (Premium modal)
 *   - .dy-wr-close          (Wardrobe Recommend)
 *   - .dy-wr-banner-close   (Wardrobe Banner)
 *   - .dy-push-close        (Push Notifications)
 *   - .dy-score-close       (Outfit Score detail)
 *   - .dy-modal-sluiten     (Legacy Doubleyou modals)
 *   - .close (in modals)    (Weekly stylist, generic)
 *   - .pp-modal-close       (New PP modals)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── DONKERE MODALS (donker fond, licht × nodig) ─────────────────────── */
#dy-premium-modal .dy-prem-close,
.pp-aig-ov .pp-aig-x,
#dy-push-modal .dy-push-close {
  /* Minimum 4.5:1: licht ivoor op donker fond */
  color: #fdf5e3 !important;
  opacity: 1 !important;
  background: rgba(240, 179, 64, 0.16) !important;
  border: 1px solid rgba(240, 179, 64, 0.45) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

#dy-premium-modal .dy-prem-close:hover,
#dy-premium-modal .dy-prem-close:focus-visible,
.pp-aig-ov .pp-aig-x:hover,
.pp-aig-ov .pp-aig-x:focus-visible,
#dy-push-modal .dy-push-close:hover,
#dy-push-modal .dy-push-close:focus-visible {
  background: rgba(240, 179, 64, 0.32) !important;
  color: #ffffff !important;
  transform: scale(1.06) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(240, 179, 64, 0.35) !important;
}

/* ─── LICHTE MODALS (licht fond, donker × nodig) ──────────────────────── */
#dy-tryon-modal .dy-tryon-close,
#dy-wardrobe-rec-modal .dy-wr-close,
#dy-weekly-modal .close,
#dy-wr-banner .dy-wr-banner-close,
.dy-score-detail .dy-score-close,
.dy-modal-sluiten,
.pp-modal-close {
  color: #1e1a0f !important;                       /* zeer donker ivory-zwart */
  opacity: 1 !important;
  background: rgba(30, 26, 15, 0.06) !important;   /* subtiele halo */
  border: 1px solid rgba(30, 26, 15, 0.14) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

#dy-tryon-modal .dy-tryon-close:hover,
#dy-tryon-modal .dy-tryon-close:focus-visible,
#dy-wardrobe-rec-modal .dy-wr-close:hover,
#dy-wardrobe-rec-modal .dy-wr-close:focus-visible,
#dy-weekly-modal .close:hover,
#dy-weekly-modal .close:focus-visible,
#dy-wr-banner .dy-wr-banner-close:hover,
#dy-wr-banner .dy-wr-banner-close:focus-visible,
.dy-score-detail .dy-score-close:hover,
.dy-score-detail .dy-score-close:focus-visible,
.dy-modal-sluiten:hover,
.dy-modal-sluiten:focus-visible,
.pp-modal-close:hover,
.pp-modal-close:focus-visible {
  background: rgba(30, 26, 15, 0.14) !important;
  color: #000000 !important;
  transform: scale(1.06) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(198, 125, 6, 0.32) !important;
}

/* ─── Dark-mode override: als het OS/thema donker is, herstel we terug ─ */
@media (prefers-color-scheme: dark) {
  /* Alleen X-buttons in modals die zich als dark-mode voorbereiden */
  #dy-premium-modal.dy-dark .dy-prem-close,
  #dy-wardrobe-rec-modal.dy-dark .dy-wr-close {
    color: #fdf5e3 !important;
    background: rgba(240, 179, 64, 0.16) !important;
    border-color: rgba(240, 179, 64, 0.45) !important;
  }
}

/* Touch-friendly bij mobiel */
@media (max-width: 480px) {
  #dy-tryon-modal .dy-tryon-close,
  #dy-premium-modal .dy-prem-close,
  #dy-wardrobe-rec-modal .dy-wr-close,
  #dy-weekly-modal .close,
  #dy-push-modal .dy-push-close,
  .pp-aig-ov .pp-aig-x,
  .pp-modal-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * v60.1.253 . Premium modal boven ALLES
 *
 * Legacy modals in pwa-v463 gebruiken z-index 99999 waardoor de premium
 * modal (10050) eronder verdween. We bumpen naar één stap onder onze
 * guard-modal (2147483647) zodat premium ALTIJD op de top ligt, ongeacht
 * welke modal open staat wanneer de gebruiker op "Meer over Premium" klikt.
 * ═══════════════════════════════════════════════════════════════════════ */
#dy-premium-modal,
#dy-prem-manage-overlay {
  z-index: 2147483646 !important;
}
#dy-premium-modal .dy-prem-backdrop {
  /* Volledige backdrop-blur zodat achtergelaten modals visueel niet doorwerken */
  background: radial-gradient(circle at 30% 20%, rgba(198,125,6,.28), rgba(11,9,5,.92)) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dy-prem-return-toast {
  z-index: 2147483645 !important;
}
/* Wanneer premium modal open is: dim en disable interactie op alle andere
 * open modals (defensief, zodat er nooit twee actieve modals ontstaan). */
body:has(#dy-premium-modal) .pp-aig-ov,
body:has(#dy-premium-modal) .pp-aig-banner {
  display: none !important;
}

/* =======================================================================
 * v60.1.260. WCAG AA contrast fix voor Galerij foto source knoppen
 *
 * Outfit Vergelijker en Kleuranalyse tonen drie keuzeknoppen: Galerij
 * (goud, primair), Camera (donker) en Verhaal (donker). Op de goud
 * primair knop had de sub tekst rgba(255,255,255,0.85) opacity wat op de
 * lichte oranje gradient onvoldoende leesbaar was (contrast ratio < 3:1).
 *
 * Fix: donkerdere gradient, volle opacity, subtiele text shadow voor
 * gegarandeerd contrast, ongeacht welk deel van de gradient onder de
 * tekst zit. Alleen additief, legacy CSS blijft intact.
 * ======================================================================= */

/* Outfit Vergelijker: primair goud knop (Galerij) */
.dy-kvs-knop--primair {
  background: linear-gradient(135deg, #b06205 0%, #8a4d04 100%) !important;
  color: #fff !important;
}
.dy-kvs-knop--primair .dy-kvs-knop-label {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 700 !important;
}
.dy-kvs-knop--primair .dy-kvs-knop-sub {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
.dy-kvs-knop--primair .dy-kvs-knop-icoon {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}
.dy-kvs-knop--primair .dy-kvs-pijl {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Kleuranalyse: goud upload kaart (Galerij) */
.dy-kai-up-kaart--goud {
  background: linear-gradient(135deg, #b06205 0%, #8a4d04 100%) !important;
}
.dy-kai-up-kaart--goud .dy-kai-up-kaart-label {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 700 !important;
}
.dy-kai-up-kaart--goud .dy-kai-up-kaart-desc {
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
.dy-kai-up-kaart--goud .dy-kai-up-kaart-icoon {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}
.dy-kai-up-kaart--goud .dy-kai-up-kaart-pijl {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Focus visible state voor keyboard navigatie: gouden ring rond de knop */
.dy-kvs-knop--primair:focus-visible,
.dy-kai-up-kaart--goud:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(240, 179, 64, 0.55),
              0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* Camera + Verhaal knoppen: label en sub tekst iets sterker voor consistentie */
.dy-kvs-knop--sec .dy-kvs-knop-label,
.dy-kvs-knop--ter .dy-kvs-knop-label,
.dy-kai-up-kaart--donker .dy-kai-up-kaart-label {
  color: #fdf5e3 !important;
  font-weight: 600 !important;
}
.dy-kvs-knop--sec .dy-kvs-knop-sub,
.dy-kvs-knop--ter .dy-kvs-knop-sub,
.dy-kai-up-kaart--donker .dy-kai-up-kaart-desc {
  color: rgba(253, 245, 227, 0.86) !important;
}


/* =======================================================================
 * v60.1.261. Universele modal en popup contrast boost (WCAG AA)
 *
 * Rootcause: meerdere legacy JS files hebben hardcoded inline CSS met
 * kleur #7a6a3f (donker olijf) voor subtitles, loading en error state
 * tekst. Op donker fond geeft dit slechts 2.5:1 contrast, ruim onder
 * WCAG AA minimum 4.5:1. Voorbeelden: weekly-stylist, virtual-tryon.
 *
 * Fix: 100% additief, overriding de inline hardcoded regels met betere
 * kleuren die WCAG AA garanderen op alle donkere modal fondsen.
 * Legacy JS blijft ongewijzigd.
 * ======================================================================= */

/* Weekly Stylist modal (Deze week voor jou) */
#dy-weekly-modal .s {
  color: rgba(240, 179, 64, 0.92) !important;
  font-weight: 600 !important;
}
#dy-weekly-modal .loading,
#dy-weekly-modal .error {
  color: rgba(253, 245, 227, 0.86) !important;
}
#dy-weekly-modal .pick .reason {
  color: rgba(253, 245, 227, 0.78) !important;
  font-style: italic;
}
#dy-weekly-modal header .t {
  color: rgba(253, 245, 227, 0.98) !important;
}

/* Virtual Try-On modal loading en meta */
#dy-tryon-modal .dy-tryon-loading {
  color: rgba(253, 245, 227, 0.86) !important;
}
#dy-tryon-modal .dy-tryon-hint,
#dy-tryon-modal .dy-tryon-meta,
#dy-tryon-modal .dy-tryon-caption {
  color: rgba(253, 245, 227, 0.80) !important;
}

/* Wardrobe Recommend modal loading */
#dy-wardrobe-rec-modal .dy-wr-loading-text,
#dy-wardrobe-rec-modal .dy-wr-hint {
  color: rgba(253, 245, 227, 0.86) !important;
}

/* Universele modal fallback: empty/loading/error state tekst */
[id^="dy-"][id$="-modal"] .loading,
[id^="dy-"][id$="-modal"] .error,
[id^="dy-"][id$="-modal"] .empty,
[id^="dy-"][id$="-modal"] .hint,
[id^="dy-"][id$="-modal"] .placeholder,
[id^="dy-"][id$="-modal"] .no-results,
.pp-modal .loading,
.pp-modal .error,
.pp-modal .empty {
  color: rgba(253, 245, 227, 0.86) !important;
}

/* Sub-text patronen die op donker fond te licht bruin waren */
.dy-modal-sub,
[class*="modal"] .dy-sub,
[class*="modal"] .dy-meta,
[class*="modal"] .dy-hint,
[class*="modal"] .dy-caption,
[class*="modal"] [class$="-sub"],
[class*="modal"] [class$="-meta"],
[class*="modal"] [class$="-hint"] {
  color: rgba(253, 245, 227, 0.80) !important;
}

/* Body tekst binnen modals: garandeer minimum leesbaarheid */
[id^="dy-"][id$="-modal"] p,
[id^="dy-"][id$="-modal"] li,
[id^="dy-"][id$="-modal"] span:not([class*="badge"]):not([class*="pill"]):not([class*="chip"]) {
  color: inherit;
}

/* Placeholders in form inputs binnen modals */
[id^="dy-"][id$="-modal"] input::placeholder,
[id^="dy-"][id$="-modal"] textarea::placeholder,
.pp-modal input::placeholder,
.pp-modal textarea::placeholder {
  color: rgba(253, 245, 227, 0.55) !important;
  opacity: 1;
}

/* Focus visible op alle interactieve elementen binnen modals */
[id^="dy-"][id$="-modal"] button:focus-visible,
[id^="dy-"][id$="-modal"] a:focus-visible,
[id^="dy-"][id$="-modal"] input:focus-visible,
[id^="dy-"][id$="-modal"] select:focus-visible,
[id^="dy-"][id$="-modal"] textarea:focus-visible,
.pp-modal button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(240, 179, 64, 0.55) !important;
}