/* ============================================================
   country_modal.css           Version 2025-06-05  rev D
   – Glasmorph-Look, vollflächiger Hintergrund-Blur
   – Cross-Browser-Hardening (Safari, iOS, Edge, Chrome, Firefox)
   – Optimiert für iPad & Smartphones
   – Alle Schriftfarben #fff (Weiss) – erzwungen via -webkit-text-fill-color
   – Passt 1-zu-1 zu country_select_modal.js rev E
   ============================================================ */

/* 1 | Google-Font (falls nicht global) ---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* 2 | Design-Variablen + Cross-Browser Defaults ------------------ */
:root{
  /* visuelle Parameter */
  --blur-bg      : 22px;                       /* Backdrop-Blur        */
  --blur-dialog  : 20px;                       /* Dialog-Blur          */
  --glass-color  : rgba(255,255,255,.14);      /* Glas-Füllung         */
  --radius       : 18px;                       /* Dialog-Corner        */
  --speed        : .3s;                        /* Transition-Speed     */
  --accent       : #34d058;                    /* Bestätigungs-Grün    */

  /* Browser-Hints */
  color-scheme   : light;                      /* verhinder Dark-Mode  */
  accent-color   : var(--accent);              /* Safari-iOS Buttons   */
}

/* 3 | Scroll-Lock wenn Modal offen ------------------------------- */
body.modal-open{overflow:hidden;}

/* 4 | Bootstrap-Backdrop ----------------------------------------- */
.modal-backdrop.show{
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(var(--blur-bg));
  -webkit-backdrop-filter:blur(var(--blur-bg));
  opacity:1 !important;
}

/* 5 | Dialog-Container ------------------------------------------- */
#countryModal .modal-dialog{
  max-width:480px;
  margin:2.5rem auto;
  transition:transform var(--speed) ease;
}
#countryModal.show .modal-dialog{transform:translateY(0);}
#countryModal.fade .modal-dialog{transform:translateY(30px);} /* Slide-In */

/* 6 | Glasmorph-Pane --------------------------------------------- */
#countryModal .modal-content.glass-modal{
  background:var(--glass-color);
  backdrop-filter:blur(var(--blur-dialog)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur-dialog)) saturate(160%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius);
  box-shadow:0 12px 48px rgba(0,0,0,.4);

  /* Schrift zwingend weiss für WebKit / iOS */
  color:#fff;
  -webkit-text-fill-color:#fff;               /* Safari-Fix :contentReference[oaicite:0]{index=0}  */

  font-family:'Open Sans',sans-serif;
  overflow:hidden;
}

/* 7 | Kopfzeile --------------------------------------------------- */
#countryModal .modal-header{
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:0;
  padding:1.25rem 1.75rem;
}
#countryModal .modal-title{
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.02em;
  color:inherit;
}
#countryModal .btn-close-white{
  filter:invert(1);
  opacity:.65;
  transition:opacity var(--speed) ease;
}
#countryModal .btn-close-white:hover{opacity:1;}

/* 8 | Body-Grid --------------------------------------------------- */
#countryModal .modal-body{
  padding:1.75rem 1.5rem 2rem;
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  color:inherit;
}

/* 9 | Länder-Buttons --------------------------------------------- */
.country-choice-btn{
  /* Reset system-styles (WebKit) */
  -webkit-appearance:none;                    /* iOS-Safari-Fix :contentReference[oaicite:1]{index=1} */
  appearance:none;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.8rem .7rem;
  width:100%;height:100%;

  font-size:.95rem;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  color: #000000;
  -webkit-text-fill-color: #343131;               /* sichert Weiss auch im Button  */

  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  backdrop-filter:blur(calc(var(--blur-dialog)/2));
  -webkit-backdrop-filter:blur(calc(var(--blur-dialog)/2));
  cursor:pointer;

  transition:
    transform   var(--speed) cubic-bezier(.4,0,.2,1),
    background  var(--speed) ease,
    box-shadow  var(--speed) ease;
}

.country-choice-btn:hover,
.country-choice-btn:focus{
  background:rgba(255,255,255,.28);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  transform:translateY(-4px) scale(1.05);
}

.country-choice-btn:active{transform:translateY(0) scale(.97);}

.country-choice-btn.selected{
  background:var(--accent);
  border-color:rgba(0,0,0,.07);
  box-shadow:0 0 0 3px rgba(52,208,88,.35);
  color: #748fd9;
  -webkit-text-fill-color:#000;
}

/* 10 | Flaggen-Emoji-Größe --------------------------------------- */
.country-choice-btn .flag{
  font-size:1.6rem;
  line-height:1;
}

/* 11 | Responsive Tweaks ----------------------------------------- */
@media (max-width:640px){
  #countryModal .modal-dialog{margin:0 1rem;}
  #countryModal .modal-body{
    grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:.75rem;
  }
}
@media (max-width:480px){
  #countryModal .modal-content.glass-modal{border-radius:0;}
}