/* Virtual consultation page (/virtual-consultation/). Builds on booking.css: the
   hero, card, side boxes and form controls are shared; this adds the day-by-day
   availability list, the confirmation dialog and the page after booking. */

/* --- the two steps --- */
.vc-steps__bar{display:flex;gap:8px;margin:0;padding:16px clamp(24px,3.6vw,44px);border-bottom:1px solid var(--bk-line);list-style:none;}
.vc-steps__bar li{display:flex;align-items:center;gap:8px;color:var(--bk-muted);font-size:13.5px;font-weight:600;}
.vc-steps__bar li + li::before{content:"";width:18px;height:1px;background:var(--bk-line);}
.vc-steps__bar span{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bk-line);color:#FFFFFF;font-size:12px;}
.vc-steps__bar .is-on{color:var(--bk-navy);}
.vc-steps__bar .is-on span{background:var(--bk-orange);}

/* --- a day and its times --- */
.vc-day{padding:18px 0;border-bottom:1px solid var(--bk-line);}
.vc-day:first-of-type{padding-top:6px;}
.vc-day:last-of-type{border-bottom:0;}
.vc-day__name{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:16px;font-weight:700;}
.vc-day__name span{color:var(--bk-muted);font-size:14px;font-weight:500;}
.vc-day__none{margin:0;padding:12px 14px;border-radius:12px;background:var(--bk-tint);color:var(--bk-muted);font-size:14px;}
.vc-day__times{display:flex;flex-wrap:wrap;gap:10px;}
.vc-slot{position:relative;display:flex;align-items:center;justify-content:center;min-width:96px;min-height:46px;padding:0 14px;border:1.5px solid var(--bk-line);border-radius:999px;background:#FFFFFF;font-size:15px;font-weight:700;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.vc-slot input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.vc-slot:hover{border-color:var(--bk-orange);}
.vc-slot:has(input:checked){border-color:var(--bk-orange);background:var(--bk-orange);color:#FFFFFF;}
.vc-slot:has(input:focus-visible){outline:3px solid rgba(244,116,33,.35);outline-offset:2px;}
.vc-slot.is-gone{opacity:.4;text-decoration:line-through;pointer-events:none;}
.vc-more{min-height:46px;padding:0 16px;border:1.5px dashed var(--bk-line);border-radius:999px;background:transparent;color:var(--bk-navy);font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.vc-more:hover{border-color:var(--bk-orange);color:#DA6210;}
.vc-continue{position:sticky;bottom:16px;margin-top:22px;box-shadow:0 12px 30px rgba(11,42,85,.18);}

/* --- the time carried into step 2 --- */
.vc-picked{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:14px 16px;border:1.5px solid var(--bk-orange);border-radius:14px;background:#FDEEE3;}
.vc-picked__ico{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#FFFFFF;}
.vc-picked__ico svg{width:20px;height:20px;fill:none;stroke:var(--bk-orange);stroke-width:2;stroke-linecap:round;}
.vc-picked b{display:block;font-size:16px;}
.vc-picked span{display:block;font-size:13.5px;color:var(--bk-muted);}
.vc-picked__change{margin-left:auto;padding:0;border:0;background:none;color:#DA6210;font:inherit;font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer;}

/* --- the dropdowns, so they match the text fields beside them --- */
.vc .ig-bk__field select,
.sm .ig-bk__field select{
  width:100%;height:52px;padding:0 44px 0 14px;border:1.5px solid #D5DDE8;border-radius:10px;background:#FFFFFF;
  font:inherit;font-size:16px;color:#0B2A55;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.vc .ig-bk__field select:hover,
.sm .ig-bk__field select:hover{border-color:#C3CEDD;}
.vc .ig-bk__field select:focus,
.sm .ig-bk__field select:focus{outline:none;border-color:#F47421;box-shadow:0 0 0 3px rgba(244,116,33,.2);}

/* --- how it works, in the sidebar --- */
.vc-how{display:grid;gap:16px;margin:0;padding:0;list-style:none;counter-reset:vc;}
.vc-how li{display:grid;gap:2px;padding-left:38px;position:relative;counter-increment:vc;}
.vc-how li::before{content:counter(vc);position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--bk-navy);color:#FFFFFF;font-size:13px;font-weight:700;}
.vc-how b{font-size:15px;}
.vc-how span{font-size:14px;line-height:1.55;color:var(--bk-muted);}

/* --- the confirmation dialog --- */
.vc-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,26,57,.55);}
.vc-modal[hidden],.vc-slot[hidden]{display:none;}
.vc-modal__box{position:relative;width:100%;max-width:440px;padding:28px;border-radius:20px;background:#FFFFFF;box-shadow:0 40px 90px rgba(5,26,57,.35);font-family:"Poppins",system-ui,sans-serif;color:#0B2A55;}
.vc-modal__close{position:absolute;top:12px;right:14px;padding:4px 8px;border:0;background:none;color:#5B6B82;font-size:26px;line-height:1;cursor:pointer;}
.vc-modal__day{margin:0 0 18px;font-size:19px;font-weight:800;}
.vc-modal__rows{display:grid;gap:14px;margin:0 0 22px;padding:18px;border-radius:14px;background:#F4F7FB;list-style:none;}
.vc-modal__rows li{display:flex;align-items:flex-start;gap:12px;}
.vc-modal__rows li > span{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#FFFFFF;}
.vc-modal__rows svg{width:18px;height:18px;fill:none;stroke:#F47421;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.vc-modal__rows b{display:block;font-size:15.5px;}
.vc-modal__rows span span,.vc-modal__rows div span{display:block;font-size:13.5px;color:#5B6B82;}
.vc-modal__book{display:flex;align-items:center;justify-content:center;width:100%;height:54px;border:0;border-radius:14px;background:#F47421;color:#FFFFFF;font:inherit;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 14px 30px rgba(244,116,33,.3);}
.vc-modal__book:hover{background:#DA6210;}

/* --- when the calendar is not set up --- */
.vc-ask__list{margin:20px 0 24px;}
.vc-ask__btn{display:flex;align-items:center;justify-content:center;text-decoration:none;}
.vc-ask .ig-bk__note a{color:var(--bk-navy);font-weight:600;}

/* --- the page after booking --- */
.vc-done{padding-top:clamp(48px,7vw,104px);text-align:center;}
.vc-done .bk-wrap{max-width:660px;}
.vc-done__tick{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:22px;border-radius:50%;background:#E6F4EC;}
.vc-done__tick svg{width:30px;height:30px;fill:none;stroke:#1E7B4A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.vc-done h1{margin:0 0 10px;font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.02em;}
.vc-done__when{margin:0 0 20px;font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--bk-orange);}
.vc-done__when span{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bk-muted);}
.vc-done p{margin:0 auto 18px;max-width:520px;font-size:15.5px;line-height:1.7;color:var(--bk-muted);}
.vc-done b{color:var(--bk-navy);}
.vc-done__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:8px;}
.vc-done__join,.vc-done__ics{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;border-radius:14px;font-weight:700;text-decoration:none;}
.vc-done__join{background:var(--bk-orange);color:#FFFFFF;box-shadow:0 14px 30px rgba(244,116,33,.3);}
.vc-done__join:hover{background:#DA6210;color:#FFFFFF;}
.vc-done__ics{border:1.5px solid var(--bk-line);background:#FFFFFF;color:var(--bk-navy);}
.vc-done__ics:hover{border-color:var(--bk-navy);color:var(--bk-navy);}
.vc-done__note,.vc-done__help{margin-top:18px;font-size:14px;}
.vc-done__help a{color:var(--bk-navy);font-weight:700;}

@media (max-width:640px){
  .vc-slot{min-width:calc(33.333% - 7px);padding:0 6px;}
  .vc-more{width:100%;}
  .vc-continue{bottom:10px;}
  .vc-steps__bar{padding:14px 18px;}
}