@import url('/booking-calendar.css');
.booking-app{max-width:850px;margin:0 auto;padding:clamp(24px,5vw,54px);background:#1b2924;border:1px solid #4a5a4d;border-radius:6px;min-height:420px}
.bk-heading{margin:14px 0 28px}.bk-heading h2{font-size:clamp(32px,5vw,48px);line-height:1.1;margin:8px 0}.bk-heading p:last-child{color:#c7d0ca}.bk-back{border:0;background:none;color:#cfbc84;padding:0;cursor:pointer;font:inherit}.bk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bk-card,.bk-dates button,.bk-slots button{font:inherit;text-align:left;color:#fff;background:#17221e;border:1px solid #546055;border-radius:4px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.bk-card{display:flex;flex-direction:column;gap:8px;padding:22px;min-height:108px}.bk-card strong{font-size:20px}.bk-card span{font-size:13px;color:#c9d0cb}.bk-card:hover,.bk-card.selected,.bk-dates button:hover,.bk-dates button.selected,.bk-slots button:hover{border-color:#ddc684;background:#2a392e;transform:translateY(-2px)}.bk-dates{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px}.bk-dates button{min-width:95px;padding:12px;text-align:center}.bk-slots{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.bk-slots button{padding:12px 16px;min-width:72px;text-align:center}.bk-summary{display:grid;gap:8px;background:#17221e;border-left:3px solid #d7bd7b;padding:20px;margin-bottom:24px}.bk-summary span{color:#c9d0cb}.bk-form{display:grid;gap:17px}.bk-form label{display:grid;gap:7px;font-weight:600}.bk-form input,.bk-form textarea{width:100%;box-sizing:border-box;padding:13px 14px;background:#111b17;border:1px solid #667067;border-radius:3px;color:#fff;font:inherit}.bk-form input:focus,.bk-form textarea:focus{outline:2px solid #d7bd7b;outline-offset:2px}.bk-consent,.bk-empty{color:#c9d0cb;font-size:14px}.bk-error{padding:12px 16px;background:#5b2926;color:#fff;border-radius:3px}.bk-form .button{justify-self:start}.bk-form .button:disabled{opacity:.6;cursor:wait}@media(max-width:600px){.booking-app{padding:20px}.bk-grid{grid-template-columns:1fr}.bk-card{min-height:85px}}
.bk-card[data-pick="nearest"]:disabled{opacity:.7;cursor:wait}
@media(hover:none){.bk-card:not(.selected):hover,.bk-dates button:not(.selected):hover,.bk-slots button:hover{border-color:#546055;background:#17221e;transform:none}}
.bk-phone-field{display:flex;align-items:center;background:#111b17;border:1px solid #667067;border-radius:3px}.bk-form .bk-phone-field input{border:0;min-width:0;padding-left:14px;background:transparent}.bk-form .bk-phone-field input:focus{outline:0}.bk-phone-field:focus-within{outline:2px solid #d7bd7b;outline-offset:2px}
.bk-form label.has-error>input,.bk-form label.has-error .bk-phone-field{border-color:#d0bd80}
.bk-field-error{display:flex;align-items:center;gap:10px;margin-top:2px;padding:10px 12px;border:1px solid #d0bd8052;border-left:2px solid #d0bd80;border-radius:3px;background:#d0bd8014;color:#ebddba;font-size:13px;font-weight:400;line-height:1.45}
.bk-field-error::before{content:'!';flex:none;width:18px;height:18px;display:grid;place-items:center;border:1px solid #d0bd80;border-radius:50%;color:#d0bd80;font-size:11px;font-weight:600;line-height:1}
.bk-field-error[hidden]{display:none}


.bk-service-card{position:relative;padding-right:58px}
.bk-service-card i{position:absolute;right:20px;top:50%;display:grid;place-items:center;width:28px;height:28px;transform:translateY(-50%);border:1px solid var(--line);border-radius:50%;font-style:normal;font-size:18px;color:var(--gold)}
.bk-service-card.selected{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.bk-service-card.selected i{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.bk-selection{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.bk-selection p{margin:0;font-size:16px}
.bk-selection .button:disabled{opacity:.45;cursor:default;transform:none}
@media(max-width:600px){.bk-selection{align-items:stretch;flex-direction:column;gap:16px}.bk-selection .button{width:100%;font-size:16px}}
@media(min-width:601px) and (max-width:1200px) and (orientation:portrait){
  .booking-app{padding:32px}.bk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-service-card strong{font-size:19px}.bk-service-card span{font-size:15px}.bk-selection{flex-wrap:wrap}
}
.bk-service-card i{line-height:1}
.bk-service-card i svg{display:block;width:18px;height:18px;stroke-width:2;pointer-events:none}
