/* WabsPro - finition du tunnel de réservation (calendrier, créneaux, options, confirmation) */

/* progression */
.progress__dot{position:relative; overflow:hidden;}
.progress__dot.done{background:linear-gradient(90deg,var(--gold-deep),var(--gold));}
.progress__dot.active{background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-soft),var(--gold),var(--gold-deep)); background-size:300% 100%; animation:bkShimmer 2.4s linear infinite;}
@keyframes bkShimmer{from{background-position:100% 0}to{background-position:-200% 0}}

/* options */
.opt{position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s, background .25s;}
.opt::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-18deg); pointer-events:none; opacity:0;}
.opt:hover::after{animation:bkShine .9s var(--ease);}
@keyframes bkShine{0%{left:-60%; opacity:1}100%{left:130%; opacity:0}}
.opt:hover{box-shadow:0 14px 30px -14px rgba(28,25,23,.28);}
.opt.selected{background:linear-gradient(135deg,rgba(255,255,255,1),var(--gold-soft)); box-shadow:0 0 0 1.5px var(--gold-deep) inset, 0 16px 34px -18px var(--gold-deep);}
.opt .bk-check{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--gold-deep); color:#fff; transform:scale(0); transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.opt .bk-check svg{width:14px; height:14px;}
.opt.selected .bk-check{transform:scale(1);}
.opt.selected .opt__chev{display:none;}

/* calendrier */
.cal{background:linear-gradient(180deg,#fff,var(--cream)); border:1px solid var(--line); border-radius:22px; padding:20px 20px 16px; box-shadow:0 1px 0 #fff inset, 0 20px 40px -28px rgba(28,25,23,.35);}
.bk-calbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-2px 0 14px; flex-wrap:wrap;}
.bk-next{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 14px 8px 10px; font:600 13px/1 'Inter',sans-serif; color:var(--ink); cursor:pointer; transition:all .3s var(--ease);}
.bk-next:hover{border-color:var(--gold); transform:translateY(-1px); box-shadow:0 8px 18px -10px var(--gold-deep);}
.bk-next i{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-deep); font-style:normal;}
.bk-next i svg{width:12px; height:12px;}
.bk-next b{color:var(--gold-deep); font-weight:700;}
.cal__head{margin-bottom:12px !important;}
.cal__month{font-size:21px !important; letter-spacing:-.01em;}
.bk-arrows{display:flex; gap:6px;}
.bk-arrows span{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--stone); background:#fff;}
.bk-arrows span.off{opacity:.35;}
.bk-arrows svg{width:14px; height:14px;}
.cal__grid{gap:7px !important;}
.cal__dow{font-size:10.5px !important; letter-spacing:.12em; padding-bottom:6px !important;}
.cal__day{position:relative; aspect-ratio:1/1.04 !important; border-radius:14px !important; background:#fff !important; border:1px solid var(--line) !important; font-size:15px !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, border-color .25s !important;}
.cal__day.empty{visibility:hidden;}
.cal__day:hover:not(:disabled){transform:translateY(-3px); border-color:var(--gold) !important; box-shadow:0 12px 22px -12px var(--gold-deep); background:#fff !important;}
.cal__day:disabled{background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(0,0,0,.035) 5px 6px) !important; border-color:transparent !important; color:#C9C0B4 !important;}
.cal__day .bk-dots{display:flex; gap:3px; height:5px;}
.cal__day .bk-dots i{width:5px; height:5px; border-radius:50%; background:#5BAE7D;}
.cal__day.bk-few .bk-dots i{background:#E39B3B;}
.cal__day.today::before{content:"Auj."; position:absolute; top:4px; font-size:8.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep);}
.cal__day.today{box-shadow:none !important; border-color:var(--gold) !important;}
.cal__day.selected{background:linear-gradient(145deg,var(--gold),var(--gold-deep)) !important; color:#fff !important; border-color:transparent !important; transform:translateY(-3px) scale(1.06); box-shadow:0 16px 28px -10px var(--gold-deep) !important; z-index:1;}
.cal__day.selected .bk-dots i{background:#fff !important;}
.cal__day.selected.today::before{color:#fff;}
.cal__day.selected::after{content:""; position:absolute; inset:-5px; border-radius:18px; border:2px solid var(--gold); opacity:0; animation:bkRing 1.6s var(--ease) infinite;}
@keyframes bkRing{0%{opacity:.8; transform:scale(.9)}100%{opacity:0; transform:scale(1.18)}}
.bk-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); font-size:12px; color:var(--stone);}
.bk-legend span{display:inline-flex; align-items:center; gap:6px;}
.bk-legend i{width:7px; height:7px; border-radius:50%; display:inline-block;}
.bk-legend .hatch{width:14px; height:10px; border-radius:3px; background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(0,0,0,.18) 3px 4px);}

/* créneaux */
.slots-period{display:flex !important; align-items:center; gap:9px; font-size:12px !important; color:var(--ink) !important; letter-spacing:.12em !important; margin:22px 0 12px !important;}
.slots-period:first-child{margin-top:4px !important;}
.slots-period svg{width:18px; height:18px; color:var(--gold-deep);}
.slots-period::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent);}
.slots-period small{font-weight:500; letter-spacing:0; text-transform:none; color:var(--stone-light); font-size:12px;}
.slots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)) !important; gap:10px !important;}
.slot{position:relative; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:14px !important; padding:15px 0 !important; font-size:15.5px !important; font-variant-numeric:tabular-nums;
  background:#fff !important; box-shadow:0 1px 0 rgba(28,25,23,.04); transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, border-color .25s, color .25s !important;}
.slot::before{content:""; width:7px; height:7px; border-radius:50%; background:#5BAE7D; flex:none;}
.slot:hover:not(:disabled){transform:translateY(-3px); box-shadow:0 12px 22px -12px var(--gold-deep);}
.slot:disabled{background:repeating-linear-gradient(135deg,var(--cream) 0 6px,var(--cream-deep) 6px 7px) !important; color:#BDB3A6 !important; text-decoration:line-through; border-color:transparent !important;}
.slot:disabled::before{background:#CFC6BA;}
.slot.selected{background:linear-gradient(145deg,var(--gold),var(--gold-deep)) !important; color:#fff !important; border-color:transparent !important; transform:translateY(-3px) scale(1.04); box-shadow:0 16px 28px -10px var(--gold-deep);}
.slot.selected::before{content:"✓"; width:auto; height:auto; background:none; font-size:13px; font-weight:800;}
.slot .bk-tag{position:absolute; top:-9px; right:8px; font-size:9.5px; font-weight:700; letter-spacing:.04em; padding:3px 7px; border-radius:99px; background:var(--ink); color:#fff; white-space:nowrap;}
.slot .bk-tag.last{background:#E07A3B;}
.slot.selected .bk-tag{background:#fff; color:var(--gold-deep);}

/* récap qui s'allume */
.recap__row.bk-flash{animation:bkFlash 1.1s var(--ease);}
@keyframes bkFlash{0%{background:rgba(255,255,255,0)}25%{background:rgba(255,255,255,.1)}100%{background:rgba(255,255,255,0)}}
.recap__row.bk-flash .recap__ic{animation:bkPop .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes bkPop{0%{transform:scale(.6)}100%{transform:scale(1)}}

/* bouton principal */
.btn--gold{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--gold),var(--gold-deep)) !important;}
.btn--gold:not(:disabled)::after{content:""; position:absolute; top:0; bottom:0; left:-50%; width:35%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); animation:bkSweep 3.2s ease-in-out infinite;}
@keyframes bkSweep{0%,60%{left:-50%}100%{left:130%}}

/* confirmation */
.confirm__badge{position:relative; background:linear-gradient(145deg,#5BAE7D,var(--green)) !important; color:#fff !important; box-shadow:0 18px 40px -14px var(--green);}
.confirm__badge::before,.confirm__badge::after{content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid #5BAE7D; opacity:0; animation:bkRing 2s var(--ease) infinite;}
.confirm__badge::after{animation-delay:.7s;}
.bk-ics{display:inline-flex; align-items:center; gap:9px; margin:4px 0 18px; padding:12px 20px; border-radius:999px; border:1.5px solid var(--ink); background:var(--ink); color:#fff; font:600 14px/1 'Inter',sans-serif; cursor:pointer; text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s;}
.bk-ics:hover{transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(0,0,0,.5);}
.bk-ics svg{width:16px; height:16px;}
.bk-confetti{position:fixed; inset:0; pointer-events:none; z-index:60;}

@media (max-width:560px){
  .cal{padding:14px 10px 12px;}
  .cal__grid{gap:4px !important;}
  .cal__day{border-radius:11px !important; font-size:14px !important; gap:3px;}
  .cal__day.today::before{display:none;}
  .cal__day .bk-dots i{width:4px; height:4px;}
  .slots{grid-template-columns:repeat(3,1fr) !important;}
}
@media (prefers-reduced-motion:reduce){
  .progress__dot.active,.cal__day.selected::after,.confirm__badge::before,.confirm__badge::after,.btn--gold::after{animation:none !important;}
}