/* Online booking (/boeken) and the personal appointment page. The card follows the 21st.dev
   scheduling card, in house colours: paper surface, porcelain controls, brown accents.
   --spring-* easings are set by booking.js; the fallbacks below are used without it. */
.booking-page{padding-block:clamp(40px,6vw,96px) clamp(64px,8vw,120px)}
.booking-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);grid-template-rows:auto 1fr;column-gap:clamp(48px,7vw,120px);align-items:start}
.booking-intro{grid-column:1;grid-row:1;padding-top:clamp(8px,2vw,32px)}
.booking-intro .eyebrow{color:var(--muted);margin-bottom:24px}
.booking-intro h1{font-size:clamp(44px,5.4vw,82px);line-height:1.04;letter-spacing:-.05em}
.booking-lead{margin-top:26px;max-width:420px;font-size:15px;line-height:1.8;color:var(--muted)}
.booking-aside{grid-column:1;grid-row:2;max-width:440px;margin-top:44px}
.booking-facts{margin:0;border-top:1px solid #8d7c7045}
.booking-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-block:16px;border-bottom:1px solid #8d7c7030;font-size:13px}
.booking-facts dt{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.booking-facts dd{margin:0;text-align:right}
.booking-help{margin-top:22px;font-size:12px;color:var(--muted)}
.booking-help a,.bk-terms a,.bk-success-links a,.bk-empty-state a,.bk-noscript a{color:var(--ink);text-decoration:underline;text-decoration-color:#8d7c7080;text-underline-offset:4px}
.booking-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;padding-block:26px 32px;border-top:1px solid #8d7c7030;font-size:11px;color:var(--muted)}
.booking-footer nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.booking-footer a{display:inline-flex;align-items:center;min-height:36px}

.bk-card{--bk-pad:28px;grid-column:2;grid-row:1/span 2;position:relative;background:var(--paper);border:1px solid #8d7c7030;border-radius:28px;box-shadow:0 1px 2px #4b40390d,0 30px 70px -36px #4b403966;overflow:hidden;overflow:clip}
.bk-icon{width:18px;height:18px;flex:none}
.bk-card :focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.bk-stage{position:relative;transition:height .5s var(--ease)}
.bk-main{transform-origin:50% 0;transition:transform var(--spring-panel-duration,.6s) var(--spring-panel,var(--ease)),opacity .35s ease}
.bk-label{margin-bottom:12px;font-size:10px;font-weight:500;letter-spacing:.16em;line-height:1.6;text-transform:uppercase;color:var(--muted)}

/* Profile header: studio, maker and the price of the chosen treatment. */
.bk-profile{display:flex;align-items:flex-start;gap:18px;padding:var(--bk-pad) var(--bk-pad) 24px}
.bk-avatar{flex:none;display:block;width:64px;height:64px;border-radius:18px;overflow:hidden;background:var(--stone)}
.bk-avatar img{transition:transform var(--spring-hover-duration,.35s) var(--spring-hover,var(--ease))}
.bk-profile-text{flex:1;min-width:0;padding-top:3px}
.bk-profile h2{font-size:22px;font-weight:400;line-height:1.2;letter-spacing:-.025em}
.bk-meta{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:9px;font-size:12px;line-height:1.5;color:var(--muted)}
.bk-price{flex:none;text-align:right;min-width:72px}
.bk-price-label{font-size:10px;font-weight:500;letter-spacing:.16em;line-height:1.6;text-transform:uppercase;color:var(--muted)}
.bk-price-value{display:inline-block;margin-top:3px;font-size:31px;font-weight:300;line-height:1.1;letter-spacing:-.035em;color:var(--brown);font-variant-numeric:tabular-nums;transform-origin:100% 50%}

/* Treatment selector: a button that unfolds an inline listbox. */
.bk-section{padding:0 var(--bk-pad) 24px}
.bk-select{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 18px 12px 20px;background:var(--porcelain);border:1px solid #8d7c7033;border-radius:18px;text-align:left;transition:border-color .2s,transform var(--spring-hover-duration,.35s) var(--spring-hover,var(--ease))}
.bk-select-text{display:flex;flex-direction:column;min-width:0}
.bk-select-name{font-size:15px;line-height:1.35}
.bk-select:not(.has-value) .bk-select-name{color:var(--muted)}
.bk-select-meta{margin-top:1px;font-size:12px;color:var(--muted)}
.bk-select-meta:empty{display:none}
.bk-select .bk-icon{color:var(--muted);transition:transform .35s var(--ease)}
.bk-select[aria-expanded=true] .bk-icon{transform:rotate(180deg)}
.bk-select:active{transform:scale(.99)}
.bk-options{overflow:hidden}
.bk-options-inner{margin-top:10px;padding:6px;border:1px solid #8d7c7030;border-radius:18px;background:var(--paper)}
.bk-options-inner:focus-visible{outline-offset:2px}
.bk-group+.bk-group{margin-top:6px;padding-top:6px;border-top:1px solid #8d7c7022}
.bk-group-label{padding:10px 14px 4px;font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bk-option{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 12px 10px 14px;border-radius:12px;cursor:pointer;transition:background .15s}
.bk-option.is-active{background:var(--porcelain)}
.bk-option[aria-selected=true]{background:var(--stone)}
.bk-option-text{flex:1;min-width:0;display:flex;flex-direction:column}
.bk-option-name{font-size:14px;line-height:1.35}
.bk-option-tag{display:inline-block;margin-left:6px;padding:2px 8px;border:1px solid #8d7c7055;border-radius:100px;font-size:9px;line-height:1.5;color:var(--brown);vertical-align:1px}
.bk-option-detail{margin-top:2px;font-size:11px;line-height:1.5;color:var(--muted)}
.bk-option-price{font-size:15px;font-variant-numeric:tabular-nums;color:var(--brown)}
.bk-option-check{display:grid;place-items:center;width:18px;color:var(--brown);opacity:0;transition:opacity .2s}
.bk-option-check .bk-icon{width:16px;height:16px}
.bk-option[aria-selected=true] .bk-option-check{opacity:1}
.bk-divider{margin:0 var(--bk-pad);border-top:1px solid #8d7c7030}

/* Week navigation and the day list with time slots. */
.bk-week{padding:24px var(--bk-pad) 6px}
.bk-week-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bk-week-label{font-size:16px;font-weight:500;line-height:1.3;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bk-round{display:grid;place-items:center;width:44px;height:44px;border:1px solid #8d7c7045;border-radius:50%;background:transparent;color:var(--ink);transition:background .2s,opacity .2s,transform var(--spring-hover-duration,.35s) var(--spring-hover,var(--ease))}
.bk-round:disabled{opacity:.3}
.bk-round:not(:disabled):active{transform:scale(.95)}
.bk-days{display:flex;flex-direction:column;gap:22px;padding:18px var(--bk-pad) 28px;transition:opacity .2s}
.bk-days[aria-busy=true]>.bk-day:not(.bk-day-skeleton){opacity:.45}
.bk-day-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.bk-day.is-empty .bk-day-head{margin-bottom:0}
.bk-day-head h4{margin:0;font-size:14px;font-weight:500;line-height:1.4}
.bk-day-sub{margin-left:8px;font-weight:400;color:var(--muted)}
.bk-day.is-empty .bk-day-title{color:var(--muted)}
.bk-day-none{font-size:12px;color:var(--muted)}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.bk-slot{min-height:44px;padding:0 10px;border:1px solid #8d7c7038;border-radius:100px;background:var(--porcelain);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);transition:background .2s,border-color .2s,color .2s,transform var(--spring-hover-duration,.35s) var(--spring-hover,var(--ease))}
.bk-slot:active{transform:scale(.98)}
.bk-slot[aria-pressed=true]{background:var(--brown);border-color:var(--brown);color:var(--paper)}
.bk-placeholder{padding:24px 22px;border:1px dashed #8d7c7050;border-radius:18px;font-size:13px;line-height:1.7;color:var(--muted);text-align:center}
.bk-week-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 22px;border-radius:18px;background:var(--porcelain);text-align:center;font-size:14px;line-height:1.7}
.bk-week-empty-note{font-size:12px;color:var(--muted)}
.bk-pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid #4b403966;border-radius:100px;background:transparent;font-size:12px;font-weight:500;color:var(--brown);transition:background .2s,color .2s}
.bk-notice{padding:14px 18px;border:1px solid #4b403926;border-radius:14px;background:#4b40390d;font-size:13px;line-height:1.6;color:var(--brown)}
.bk-day-skeleton{display:flex;flex-direction:column;gap:12px}
.bk-skeleton{display:block;height:44px;border-radius:100px;background:linear-gradient(90deg,var(--porcelain) 30%,var(--stone) 50%,var(--porcelain) 70%) 0 0/300% 100%;animation:bk-shimmer 1.4s linear infinite}
.bk-skeleton-title{width:140px;height:16px}
.bk-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;padding:18px var(--bk-pad) 22px;border-top:1px solid #8d7c7030;font-size:11px;line-height:1.5;color:var(--muted)}
.bk-footer span{display:inline-flex;align-items:center;gap:8px}
.bk-footer .bk-icon{width:15px;height:15px}
.bk-empty-state p{padding:22px;border-radius:18px;background:var(--porcelain);font-size:14px;line-height:1.7}

/* Details panel: slides up over the card while the schedule recedes behind it. */
.bk-panel{position:absolute;top:0;left:0;width:100%;min-height:100%;background:var(--paper);transform:translateY(100%);opacity:0;transition:transform var(--spring-panel-duration,.6s) var(--spring-panel,var(--ease)),opacity .35s ease}
.bk-stage.is-panel-open .bk-panel{transform:none;opacity:1}
.bk-stage.is-panel-open .bk-main{transform:translateY(-20px) scale(.95);opacity:.3}
.bk-panel-inner{padding:20px var(--bk-pad) 30px}
.bk-panel-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:20px}
.bk-panel-head h3{font-size:18px;font-weight:400;letter-spacing:-.02em;outline:none}
.bk-back{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px 0 0;background:none;font-size:13px;color:var(--muted);transition:color .2s,transform var(--spring-hover-duration,.35s) var(--spring-hover,var(--ease))}
.bk-back .bk-icon{width:16px;height:16px}
.bk-back:active{transform:scale(.95)}
.bk-summary{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:#eee8e299}
.bk-avatar-small{width:48px;height:48px;border-radius:14px}
.bk-summary-name{font-size:15px;font-weight:500;line-height:1.4}
.bk-summary-service{font-size:13px;line-height:1.5;color:var(--muted)}
.bk-moment{margin-top:22px;text-align:center}
.bk-moment-box{padding:18px 16px;border:1px solid #4b40392b;border-radius:18px;background:#4b40390d}
.bk-moment-date{font-size:16px;font-weight:500;line-height:1.4}
.bk-moment-time{margin-top:2px;font-size:28px;font-weight:300;line-height:1.25;letter-spacing:-.03em;color:var(--brown);font-variant-numeric:tabular-nums}
.bk-rows{margin:16px 0 0}
.bk-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:12px;border-bottom:1px solid #8d7c7026;font-size:14px;line-height:1.5}
.bk-rows dt{color:var(--muted)}
.bk-rows dd{margin:0;text-align:right;font-weight:500}
.bk-form{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.bk-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bk-field label{display:block;margin-bottom:8px;font-size:10px;font-weight:500;letter-spacing:.16em;line-height:1.6;text-transform:uppercase;color:var(--muted)}
.bk-field label span{font-weight:400;letter-spacing:.04em;text-transform:none}
.bk-field input,.bk-field textarea{display:block;width:100%;min-height:52px;padding:13px 16px;border:1px solid #8d7c7045;border-radius:14px;background:var(--porcelain);font:inherit;font-size:16px;line-height:1.4;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.bk-field textarea{min-height:92px;resize:vertical}
.bk-field input::placeholder,.bk-field textarea::placeholder{color:#8d7c70b3}
.bk-field input:focus,.bk-field textarea:focus{outline:none;border-color:var(--brown);background:var(--paper);box-shadow:0 0 0 4px #4b40391a}
.bk-field [aria-invalid=true]{border-color:#9a4334}
.bk-field-error{margin-top:6px;font-size:12px;line-height:1.5;color:#9a4334}
.bk-form-error{padding:12px 16px;border:1px solid #9a433433;border-radius:14px;background:#9a43340d;font-size:13px;line-height:1.6;color:#9a4334}
.bk-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-terms{font-size:12px;line-height:1.6;color:var(--muted)}
.bk-confirm{position:relative;overflow:hidden;width:100%;min-height:58px;padding:14px 24px;border-radius:100px;background:var(--brown);color:var(--paper);font-size:13px;font-weight:500;letter-spacing:.01em;transition:background .22s,transform var(--spring-hover-duration,.35s) var(--spring-hover,var(--ease))}
.bk-confirm::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#f7f3ef38,transparent);transform:translateX(-100%);transition:transform .7s ease-out}
.bk-confirm-label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px}
.bk-confirm .bk-icon{width:16px;height:16px}
.bk-confirm:active{transform:scale(.98)}
.bk-confirm[aria-busy=true]{cursor:progress;opacity:.8}

/* Confirmation after booking. */
.bk-success{padding-top:14px;text-align:center}
.bk-success-mark{display:inline-block;width:64px;height:64px;color:var(--brown)}
.bk-success-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bk-success-mark circle{stroke-dasharray:151;stroke-dashoffset:151;animation:bk-draw 1s var(--ease) .15s forwards}
.bk-success-mark path{stroke-dasharray:36;stroke-dashoffset:36;animation:bk-draw .55s var(--ease) .7s forwards}
.bk-success .eyebrow{margin-top:22px;color:var(--muted)}
.bk-success h3{margin-top:12px;font-size:clamp(30px,4vw,40px);font-weight:300;line-height:1.1;letter-spacing:-.04em;outline:none}
.bk-success-text{max-width:420px;margin:14px auto 0;font-size:14px;line-height:1.7;color:var(--muted)}
.bk-success .bk-rows{margin-top:24px;text-align:left}
.bk-calendar{display:grid;gap:10px;margin-top:26px}
.bk-cal-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 20px;border:1px solid #4b403966;border-radius:100px;font-size:13px;font-weight:500;color:var(--brown);transition:background .2s,color .2s,border-color .2s,transform var(--spring-hover-duration,.35s) var(--spring-hover,var(--ease))}
.bk-cal-button:first-child{background:var(--brown);border-color:var(--brown);color:var(--paper)}
.bk-cal-button .bk-icon{width:17px;height:17px}
.bk-cal-button:active{transform:scale(.98)}
.bk-success-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 12px;margin-top:24px;font-size:12px;color:var(--muted)}
.bk-success-links a{display:inline-flex;align-items:center;min-height:36px}
.bk-noscript{padding:0 var(--bk-pad) var(--bk-pad);font-size:13px;color:var(--muted)}

/* The client's own appointment page (/boeken/afspraak/<token>). */
.manage-layout{max-width:560px}
.manage-studio{font-size:22px;font-weight:400;line-height:1.2;letter-spacing:-.025em}
.manage-body{padding:4px var(--bk-pad) var(--bk-pad)}
.manage-body>.eyebrow{color:var(--muted)}
.manage-title{margin-top:12px;font-size:clamp(28px,4vw,36px);font-weight:300;line-height:1.12;letter-spacing:-.04em}
.manage-text{margin-top:12px;font-size:14px;line-height:1.7;color:var(--muted)}
.manage-text a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.manage-moment{margin-top:26px;text-align:center}
.manage-moment .bk-rows{text-align:left}
.manage-moment.is-cancelled .bk-moment-box{background:transparent;border-style:dashed}
.manage-moment.is-cancelled .bk-moment-date,.manage-moment.is-cancelled .bk-moment-time{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.manage-actions{display:grid;margin-top:26px}
.manage-mark{display:block;width:56px;height:56px;margin-bottom:18px}
.manage-cancel{margin-top:12px}
.manage-cancel summary{display:flex;align-items:center;justify-content:center;min-height:52px;list-style:none;font-size:13px;color:var(--muted);cursor:pointer;border-radius:100px}
.manage-cancel summary::-webkit-details-marker{display:none}
.manage-cancel summary span{text-decoration:underline;text-decoration-color:#8d7c7080;text-underline-offset:4px}
.manage-cancel-close,.manage-cancel[open] .manage-cancel-open{display:none}
.manage-cancel[open] .manage-cancel-close{display:inline}
.manage-cancel-body{padding:22px;border:1px solid #8d7c7033;border-radius:18px;background:var(--porcelain);font-size:13px;line-height:1.7;color:var(--muted);animation:copy-enter .5s var(--ease) both}
.manage-cancel-title{margin-bottom:6px;font-size:17px;font-weight:500;color:var(--ink)}
.manage-warning{margin-top:12px;padding:12px 14px;border-radius:12px;background:#9a43340d;color:#9a4334}
.manage-cancel form{margin-top:18px}
.manage-help{margin-top:22px;text-align:center;font-size:12px;color:var(--muted)}
.manage-help a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(hover:hover){.manage-cancel summary:hover{color:var(--ink)}}

@keyframes bk-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes bk-draw{to{stroke-dashoffset:0}}

@media(hover:hover){
    .bk-profile:hover .bk-avatar img{transform:scale(1.05)}
    .bk-select:hover{border-color:#8d7c7080;transform:scale(1.01)}
    .bk-option:hover{background:var(--porcelain)}
    .bk-option[aria-selected=true]:hover{background:var(--stone)}
    .bk-round:not(:disabled):hover{background:var(--porcelain);transform:scale(1.05)}
    .bk-slot:hover{background:var(--stone);border-color:#8d7c7070;transform:translateY(-2px) scale(1.05)}
    .bk-slot[aria-pressed=true]:hover{background:var(--ink);border-color:var(--ink)}
    .bk-back:hover{color:var(--ink);transform:translateX(-2px)}
    .bk-confirm:hover{background:var(--ink);transform:translateY(-1px) scale(1.02)}
    .bk-confirm:hover::after{transform:translateX(100%)}
    .bk-pill:hover{background:var(--brown);color:var(--paper)}
    .bk-cal-button:hover{background:var(--brown);border-color:var(--brown);color:var(--paper);transform:scale(1.02)}
    .bk-cal-button:first-child:hover{background:var(--ink);border-color:var(--ink)}
    .booking-footer a:hover{text-decoration:underline;text-underline-offset:4px}
}

@media(max-width:1023px){
    .booking-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none;max-width:640px}
    .booking-intro,.bk-card,.booking-aside{grid-column:1;grid-row:auto}
    .booking-intro{padding-top:0;margin-bottom:36px}
    .booking-intro h1{font-size:clamp(40px,8vw,64px)}
    .booking-aside{max-width:none}
}
@media(max-width:767px){
    .booking-page{padding-block:32px 72px}
    .booking-intro{margin-bottom:28px}
    .booking-intro .eyebrow{font-size:9px;margin-bottom:18px}
    .booking-intro h1{font-size:clamp(36px,10.4vw,52px);line-height:1.08}
    .booking-lead{margin-top:18px;font-size:13px;line-height:1.75}
    .booking-aside{margin-top:36px}
    .booking-footer{flex-direction:column;align-items:flex-start;font-size:10px}
    .bk-card{--bk-pad:20px;border-radius:24px}
    .bk-profile{gap:14px;padding-bottom:20px}
    .bk-avatar{width:54px;height:54px;border-radius:15px}
    .bk-profile h2{font-size:19px}
    .bk-meta{margin-top:6px;font-size:11px;gap:0 6px}
    .bk-price{min-width:0}
    .bk-price-label{font-size:9px}
    .bk-price-value{font-size:26px}
    .bk-section{padding-bottom:20px}
    .bk-select{min-height:60px;padding-inline:16px 14px;border-radius:16px}
    .bk-option{padding-inline:10px}
    .bk-week{padding-top:20px}
    .bk-days{gap:20px;padding-top:16px}
    .bk-slots{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
    .bk-slot{padding:0 4px}
    .bk-meta-optional{display:none}
    .bk-footer{flex-direction:column;gap:8px}
    .bk-field-row{grid-template-columns:1fr;gap:16px}
    .bk-moment-time{font-size:26px}
}
@media(max-width:359px){
    .bk-meta span:nth-child(n+2){display:none}
    .bk-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
    .bk-success-mark circle,.bk-success-mark path{stroke-dashoffset:0}
}