/* booking-popup.css — nakładka rezerwacji (popup wyboru lekarza → iGabinet).
   Cały popup zescope'owany pod #bookingOverlay + własne tokeny (izolacja od global.css:
   .doc, --ink, --teal, --bg mają w theme INNE wartości). Baseline nietknięty. */

#bookingOverlay{
  --bg:#FAF7F9; --surface:#FFFFFF; --sunk:#F5EFF3;
  --ink:#241E22; --ink-soft:#6B6169; --ink-faint:#9A9098; --line:#EBE3E8;
  --magenta:#DF3BA3; --magenta-soft:#FDF0F8; --magenta-line:#F5C9E5;
  --teal:#0CB8B6; --teal-soft:#EAF9F8; --teal-line:#B6E9E8;
  --warn:#B8860B; --warn-soft:#FBF3E0;
  --shadow-s:0 1px 2px rgba(36,30,34,.05);
  --shadow-m:0 2px 6px rgba(36,30,34,.06),0 10px 32px rgba(36,30,34,.08);
  --shadow-l:0 8px 24px rgba(36,30,34,.1),0 24px 70px rgba(36,30,34,.16);
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --ui:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
}

  /* ══ POPUP ══ */
  #bookingOverlay{position:fixed;inset:0;background:rgba(20,15,19,.55);
      backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
      display:none;align-items:center;justify-content:center;padding:20px;z-index:1000}
  #bookingOverlay.on{display:flex}
  #bookingOverlay .modal{background:var(--surface);border-radius:20px;width:100%;max-width:760px;
         height:min(90vh,820px);display:flex;flex-direction:column;overflow:hidden;
         box-shadow:var(--shadow-l);animation:bk-pop .22s ease-out}
  @keyframes bk-pop{from{opacity:0;transform:translateY(10px) scale(.985)}}
  @media(prefers-reduced-motion:reduce){#bookingOverlay .modal{animation:none}}
  @media(max-width:560px){#bookingOverlay{padding:0}
    #bookingOverlay .modal{height:100dvh;max-height:none;max-width:none;border-radius:0}}

  #bookingOverlay .m-head{padding:16px 20px;border-bottom:1px solid var(--line);
          display:flex;align-items:center;gap:12px;flex:none}
  #bookingOverlay .m-back{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
          background:var(--bg);color:var(--ink-soft);cursor:pointer;flex:none;
          display:none;place-items:center;font-size:15px}
  #bookingOverlay .m-back.on{display:grid}
  #bookingOverlay .m-back:hover, #bookingOverlay .m-x:hover{border-color:var(--ink-faint)}
  #bookingOverlay .m-ttl{flex:1;min-width:0}
  #bookingOverlay .m-ttl #bkTitle{font-family:var(--serif);font-weight:400;font-size:19px;margin:0;color:var(--ink);
            line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #bookingOverlay .m-ttl p{font-size:12.5px;color:var(--ink-faint);margin:1px 0 0;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #bookingOverlay .m-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
       background:var(--bg);color:var(--ink-soft);cursor:pointer;flex:none;
       display:grid;place-items:center;font-size:17px;line-height:1}

  #bookingOverlay .m-body{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}
  #bookingOverlay .scr{display:none;flex:1;min-height:0} #bookingOverlay .scr.on{display:flex;flex-direction:column}
  #bookingOverlay .scroll{overflow-y:auto;padding:20px 22px 24px;flex:1;-webkit-overflow-scrolling:touch}
  @media(max-width:520px){#bookingOverlay .m-head{padding-left:15px;padding-right:15px}
                          #bookingOverlay .scroll{padding-left:15px;padding-right:15px}}

  /* ── LISTA LEKARZY ── */
  #bookingOverlay .search{width:100%;padding:11px 15px;border:1px solid var(--line);border-radius:11px;
          background:var(--bg);font:inherit;font-size:15px;color:var(--ink);margin-bottom:16px}
  #bookingOverlay .search:focus{outline:none;border-color:var(--magenta-line);
                box-shadow:0 0 0 3px color-mix(in srgb,var(--magenta) 12%,transparent)}
  #bookingOverlay .search::placeholder{color:var(--ink-faint)}

  #bookingOverlay .glabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
          color:var(--magenta);margin:0 0 12px;display:flex;align-items:center;gap:10px}
  #bookingOverlay .glabel::before{content:"";width:16px;height:2px;border-radius:2px;
                  background:var(--magenta);flex:none}
  #bookingOverlay .glabel::after{content:"";flex:1;height:1px;
                 background:linear-gradient(90deg,var(--line),transparent)}
  #bookingOverlay .glabel .cnt{font-size:10.5px;color:var(--ink-faint);letter-spacing:.04em;font-weight:600}
  #bookingOverlay .grp{margin-bottom:26px} #bookingOverlay .grp:last-child{margin-bottom:0}

  #bookingOverlay .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:10px}
  @media(max-width:560px){#bookingOverlay .list{grid-template-columns:1fr 1fr;gap:9px}}
  @media(max-width:380px){#bookingOverlay .list{grid-template-columns:1fr}}

  #bookingOverlay .doc{display:flex;flex-direction:column;padding:0;width:100%;text-align:left;
       border:1px solid var(--line);background:var(--surface);border-radius:15px;
       cursor:pointer;font:inherit;color:var(--ink);overflow:hidden;position:relative;
       box-shadow:var(--shadow-s);
       transition:border-color .16s,box-shadow .18s,transform .16s}
  #bookingOverlay .doc:hover{border-color:var(--magenta-line);box-shadow:var(--shadow-m);transform:translateY(-2px)}
  #bookingOverlay .doc:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
  @media(prefers-reduced-motion:reduce){#bookingOverlay .doc{transition:none}#bookingOverlay .doc:hover{transform:none}}

  #bookingOverlay .doc .ph{width:100%;aspect-ratio:1/0.92;background:var(--sunk);position:relative;
           overflow:hidden;flex:none}
  #bookingOverlay .doc .ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%;
               display:block;transition:transform .4s ease}
  #bookingOverlay .doc:hover .ph img{transform:scale(1.045)}
  @media(prefers-reduced-motion:reduce){#bookingOverlay .doc .ph img{transition:none}
                                        #bookingOverlay .doc:hover .ph img{transform:none}}
  #bookingOverlay .doc .ph .ini{position:absolute;inset:0;display:grid;place-items:center;
                font-family:var(--mono);font-size:27px;font-weight:700;
                color:var(--magenta);background:var(--magenta-soft);letter-spacing:.02em}

  #bookingOverlay .doc .meta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
  #bookingOverlay .doc .nm{font-size:13.4px;font-weight:600;line-height:1.28;letter-spacing:-.005em;
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
           overflow:hidden;min-height:2.56em}
  #bookingOverlay .doc .sp{font-size:11.5px;color:var(--ink-faint);line-height:1.35}

  /* ── IFRAME ── */
  #bookingOverlay .fwrap{flex:1;position:relative;min-height:0;background:var(--bg)}
  #bookingOverlay #bookingFrame{width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .3s}
  #bookingOverlay #bookingFrame.ready{opacity:1}
  #bookingOverlay .loading{position:absolute;inset:0;display:grid;place-items:center;gap:12px;
           align-content:center;color:var(--ink-faint);font-size:14px;
           background:var(--bg);pointer-events:none;transition:opacity .3s}
  #bookingOverlay .loading.hide{opacity:0}
  #bookingOverlay .spin{width:27px;height:27px;border:2.5px solid var(--line);
        border-top-color:var(--magenta);border-radius:50%;animation:bk-rot .8s linear infinite}
  #bookingOverlay .fwrap.c3 .spin{border-top-color:var(--teal)}
  @keyframes bk-rot{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){#bookingOverlay .spin{animation-duration:2.5s}}

  #bookingOverlay svg.ic{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:1.9;
         stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.16em}
  #bookingOverlay .m-head{background:linear-gradient(180deg,#fff,#FCF9FB)}
  #bookingOverlay .doc{animation:bk-docIn .38s ease-out both}
  @keyframes bk-docIn{from{opacity:0;transform:translateY(9px)}}
  #bookingOverlay .list .doc:nth-child(1){animation-delay:.02s}#bookingOverlay .list .doc:nth-child(2){animation-delay:.05s}
  #bookingOverlay .list .doc:nth-child(3){animation-delay:.08s}#bookingOverlay .list .doc:nth-child(4){animation-delay:.11s}
  #bookingOverlay .list .doc:nth-child(5){animation-delay:.14s}#bookingOverlay .list .doc:nth-child(6){animation-delay:.17s}
  #bookingOverlay .list .doc:nth-child(n+7){animation-delay:.2s}

  @media(prefers-reduced-motion:reduce){
    #bookingOverlay .doc{animation:none}
  }

  /* ════════ POPUP REFINE (impeccable, 2026-08-21) ════════ */
  #bookingOverlay .m-head{box-shadow:0 1px 0 rgba(36,30,34,.03)}
  #bookingOverlay .m-ttl #bkTitle{letter-spacing:-.01em}
  #bookingOverlay .m-back, #bookingOverlay .m-x{transition:border-color .15s,background .15s,color .15s}
  #bookingOverlay .m-back:hover, #bookingOverlay .m-x:hover{background:var(--magenta-soft);border-color:var(--magenta-line);color:var(--magenta)}

  #bookingOverlay .search-wrap{position:relative;margin-bottom:18px}
  #bookingOverlay .search-wrap .s-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);
    width:17px;height:17px;color:var(--ink-faint);pointer-events:none;
    stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #bookingOverlay .search{margin-bottom:0;padding:0 16px 0 42px;height:48px;border-radius:13px;
    background:var(--surface);box-shadow:var(--shadow-s)}
  #bookingOverlay .search:focus{border-color:var(--magenta);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--magenta) 14%,transparent)}

  #bookingOverlay .glabel{color:var(--ink-soft);letter-spacing:.11em}
  #bookingOverlay .glabel .cnt{background:var(--magenta-soft);color:var(--magenta);border:1px solid var(--magenta-line);
    padding:1px 8px;border-radius:20px;font-weight:700;letter-spacing:.02em}

  #bookingOverlay .list{gap:12px}
  #bookingOverlay .doc{border-radius:16px}
  #bookingOverlay .doc:hover{border-color:var(--magenta-line);
    box-shadow:0 7px 20px rgba(223,59,163,.13),0 2px 6px rgba(36,30,34,.05)}
  #bookingOverlay .doc .ph{aspect-ratio:1/0.98}
  #bookingOverlay .doc .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;pointer-events:none;
    background:linear-gradient(transparent,rgba(20,15,19,.16));opacity:0;transition:opacity .25s}
  #bookingOverlay .doc:hover .ph::after{opacity:1}
  #bookingOverlay .doc .meta{padding:11px 13px 13px;gap:5px}
  #bookingOverlay .doc .nm{font-size:13.6px;letter-spacing:-.01em}
  #bookingOverlay .doc .sp{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal)}
  #bookingOverlay .doc .ini{background:radial-gradient(circle at 50% 36%,var(--magenta-soft),#fff)}
  @media(prefers-reduced-motion:reduce){#bookingOverlay .doc .ph::after{transition:none}}

  #bookingOverlay .loading div{font-size:13.5px;color:var(--ink-soft)}