
:root{
    --bbu-book-blue:#0674ff;
    --bbu-book-text:#101828;
    --bbu-book-muted:#667085;
    --bbu-book-line:#dfe7f1;
}

.bbu-booking-card{
    width:min(100%,1050px);
    margin:0 auto;
    padding:22px;
    border:1px solid var(--bbu-book-line);
    border-radius:18px;
    background:#fff;
    color:var(--bbu-book-text);
    box-shadow:0 8px 28px rgba(16,24,40,.05);
}
.bbu-booking-card *{box-sizing:border-box;min-width:0}
.bbu-booking-card a,.bbu-booking-card strong,.bbu-booking-card span,.bbu-booking-card p,.bbu-booking-card small,.bbu-booking-card button{overflow-wrap:anywhere}
.bbu-booking-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.bbu-booking-head h2{margin:0;font-size:clamp(24px,4vw,34px)}
.bbu-booking-head p{margin:5px 0 0;color:var(--bbu-book-muted)}
.bbu-booking-head-link{display:inline-flex;min-height:42px;align-items:center;justify-content:center;padding:8px 12px;border:1px solid #d8e3ef;border-radius:10px;text-decoration:none;font-size:12px;font-weight:900}

.bbu-booking-step-title{display:flex;gap:10px;align-items:center;margin:18px 0 11px}
.bbu-booking-step-title>span{width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#0674ff;color:#fff;font-size:12px;font-weight:950}
.bbu-booking-step-title strong,.bbu-booking-step-title small{display:block}
.bbu-booking-step-title small{margin-top:2px;color:#667085;font-size:11px}

.bbu-booking-choice-list{display:grid;gap:8px}
.bbu-booking-choice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;min-height:66px;padding:10px 12px;border:1px solid #e1eaf5;border-radius:13px;background:#fbfdff;color:#101828;text-decoration:none}
.bbu-booking-choice>span>strong,.bbu-booking-choice>span>small{display:block}
.bbu-booking-choice>span>small{margin-top:3px;color:#667085;font-size:10px}
.bbu-booking-choice>b{color:#0674ff;font-size:20px}
.bbu-booking-choice .bbu-business-avatar,.bbu-booking-choice .bbu-employee-avatar{width:52px!important;height:52px!important}

.bbu-booking-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bbu-booking-services label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;min-height:68px;padding:11px;border:1px solid #e1eaf5;border-radius:13px;background:#fbfdff;cursor:pointer}
.bbu-booking-services label:has(input:checked){border-color:#8ebaff;background:#f1f7ff}
.bbu-booking-service-copy strong,.bbu-booking-service-copy small{display:block}
.bbu-booking-service-copy small{margin-top:3px;color:#667085;font-size:10px}
.bbu-booking-services label>b{font-size:12px;white-space:nowrap}

.bbu-booking-button{display:inline-flex;min-height:46px;max-width:100%;align-items:center;justify-content:center;margin-top:16px;padding:10px 15px;border:0;border-radius:11px;background:#0674ff;color:#fff!important;text-decoration:none;font:inherit;font-weight:900;line-height:1.2;white-space:normal;cursor:pointer}

.bbu-booking-summary-business{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid #e1eaf5;border-radius:13px;background:#fbfdff}
.bbu-booking-summary-business .bbu-business-avatar{width:48px!important;height:48px!important}
.bbu-booking-summary-business>span>strong,.bbu-booking-summary-business>span>small{display:block}
.bbu-booking-summary-business>span>small{margin-top:2px;color:#667085;font-size:10px}
.bbu-booking-summary-business>a{color:#0674ff;font-size:11px;font-weight:900;text-decoration:none}

.bbu-booking-bundle{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-top:8px;padding:10px 12px;border:1px solid #dce9fa;border-radius:12px;background:#f6faff}
.bbu-booking-bundle small,.bbu-booking-bundle strong{display:block}
.bbu-booking-bundle small{color:#667085;font-size:9px}
.bbu-booking-bundle strong{margin-top:3px;font-size:12px}
.bbu-booking-bundle>span{flex:0 0 auto;color:#0674ff;font-size:11px;font-weight:900}

.bbu-booking-selected-employee{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin:14px 0;padding:10px;border:1px solid #dce9fa;border-radius:13px;background:#f6faff}
.bbu-booking-selected-employee .bbu-employee-avatar{width:50px!important;height:50px!important}
.bbu-booking-selected-employee small,.bbu-booking-selected-employee strong{display:block}
.bbu-booking-selected-employee small{color:#667085;font-size:9px}
.bbu-booking-selected-employee>a{color:#0674ff;font-size:11px;font-weight:900;text-decoration:none}

.bbu-booking-date-form,.bbu-booking-company-date{display:grid;grid-template-columns:minmax(0,260px) auto;gap:8px;align-items:end;margin-bottom:14px}
.bbu-booking-date-form label,.bbu-booking-company-date label{display:grid;gap:5px}
.bbu-booking-date-form label>span,.bbu-booking-company-date label>span{color:#344054;font-size:11px;font-weight:850}
.bbu-booking-date-form input,.bbu-booking-company-date input{width:100%;min-height:46px;padding:9px 11px;border:1px solid #d7e2ef;border-radius:10px;background:#fff;font:inherit}
.bbu-booking-date-form button,.bbu-booking-company-date button{min-height:46px;padding:9px 13px;border:0;border-radius:10px;background:#101828;color:#fff;font:inherit;font-weight:900;cursor:pointer}

.bbu-booking-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0;padding:0;border:0}
.bbu-booking-slots legend{grid-column:1/-1;margin-bottom:4px;color:#344054;font-size:12px;font-weight:900}
.bbu-booking-slots label{position:relative;display:block}
.bbu-booking-slots input{position:absolute;opacity:0;pointer-events:none}
.bbu-booking-slots span{min-height:42px;display:flex;align-items:center;justify-content:center;padding:7px;border:1px solid #d8e3ef;border-radius:10px;background:#fff;font-size:12px;font-weight:900;cursor:pointer}
.bbu-booking-slots input:checked+span{border-color:#0674ff;background:#0674ff;color:#fff}

.bbu-booking-customer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.bbu-booking-customer-grid label{display:grid;gap:5px}
.bbu-booking-customer-grid label>span{color:#344054;font-size:11px;font-weight:850}
.bbu-booking-customer-grid input,.bbu-booking-customer-grid textarea{width:100%;min-height:46px;padding:9px 11px;border:1px solid #d7e2ef;border-radius:10px;background:#fff;font:inherit}
.bbu-booking-customer-grid .is-full{grid-column:1/-1}

.bbu-booking-final-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.bbu-booking-final-summary>span{min-width:120px;padding:10px 12px;border:1px solid #e1eaf5;border-radius:11px;background:#fbfdff}
.bbu-booking-final-summary small,.bbu-booking-final-summary strong{display:block}
.bbu-booking-final-summary small{color:#667085;font-size:9px}

.bbu-booking-notice{margin:14px 0;padding:12px 14px;border:1px solid #f4c7c3;border-radius:11px;background:#fff7f6;color:#b42318;font-size:13px}
.bbu-booking-notice.is-success{border-color:#b7e3c7;background:#f2fbf5;color:#08783e}
.bbu-booking-empty{padding:18px;border:1px dashed #cdd9e8;border-radius:13px;color:#667085;text-align:center}

.bbu-booking-list{display:grid;gap:8px}
.bbu-booking-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:13px;border:1px solid #e1eaf5;border-radius:13px;background:#fbfdff;color:#101828;text-decoration:none}
.bbu-booking-list-row strong,.bbu-booking-list-row span,.bbu-booking-list-row small{display:block}
.bbu-booking-list-row>div:first-child>span,.bbu-booking-list-row>div:first-child>small{margin-top:3px;color:#667085;font-size:10px}
.bbu-booking-list-date{text-align:right}
.bbu-booking-list-date>span{margin-top:2px;color:#667085;font-size:11px}
.bbu-booking-list-date>em,.bbu-booking-status-badge{display:inline-flex;margin-top:6px;padding:5px 8px;border-radius:999px;background:#edf5ff;color:#0674ff;font-size:9px;font-style:normal;font-weight:900}

.bbu-booking-company-list{display:grid;gap:8px}
.bbu-booking-company-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid #e1eaf5;border-radius:13px;background:#fbfdff}
.bbu-booking-company-time strong,.bbu-booking-company-time span{display:block}
.bbu-booking-company-time strong{font-size:17px}
.bbu-booking-company-time span{color:#667085;font-size:10px}
.bbu-booking-company-main strong,.bbu-booking-company-main span,.bbu-booking-company-main small{display:block}
.bbu-booking-company-main span{margin-top:3px;font-size:11px}
.bbu-booking-company-main small{margin-top:3px;color:#667085;font-size:9px}
.bbu-booking-company-status{text-align:right}
.bbu-booking-company-status em{display:block;padding:5px 8px;border-radius:999px;background:#edf5ff;color:#0674ff;font-size:9px;font-style:normal;font-weight:900}
.bbu-booking-company-status a{display:inline-block;margin-top:5px;color:#0674ff;font-size:10px;font-weight:900;text-decoration:none}
.bbu-booking-company-actions{grid-column:2/-1;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.bbu-booking-company-actions button{min-height:38px;padding:7px 10px;border:1px solid #cfe1ff;border-radius:9px;background:#edf5ff;color:#0674ff;font:inherit;font-size:10px;font-weight:900;cursor:pointer}
.bbu-booking-company-actions button.is-danger{border-color:#f0c7c7;background:#fff7f6;color:#b42318}

.bbu-booking-detail-business{display:flex;gap:12px;align-items:center;margin-bottom:15px;padding:11px;border:1px solid #e1eaf5;border-radius:13px;background:#fbfdff}
.bbu-booking-detail-business .bbu-business-avatar{width:64px!important;height:64px!important}
.bbu-booking-detail-business strong,.bbu-booking-detail-business span{display:block}
.bbu-booking-detail-business span{margin-top:3px;color:#667085;font-size:11px}

.bbu-booking-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bbu-booking-detail-grid>div{padding:11px;border:1px solid #e1eaf5;border-radius:11px;background:#fbfdff}
.bbu-booking-detail-grid small,.bbu-booking-detail-grid strong{display:block}
.bbu-booking-detail-grid small{color:#667085;font-size:9px}
.bbu-booking-detail-grid strong{margin-top:3px;font-size:12px}

.bbu-booking-detail-services,.bbu-booking-detail-contact{margin-top:20px}
.bbu-booking-detail-services h3,.bbu-booking-detail-contact h3{margin:0 0 8px;font-size:15px}
.bbu-booking-detail-services>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e8eef6}
.bbu-booking-detail-services>div strong,.bbu-booking-detail-services>div small{display:block}
.bbu-booking-detail-services>div small{margin-top:2px;color:#667085;font-size:9px}
.bbu-booking-detail-contact p{color:#667085;font-size:12px}
.bbu-booking-detail-contact>div{display:flex;gap:7px;flex-wrap:wrap}
.bbu-booking-detail-contact a{display:inline-flex;min-height:40px;align-items:center;justify-content:center;padding:7px 11px;border:1px solid #d8e3ef;border-radius:9px;text-decoration:none;font-size:11px;font-weight:900}
.bbu-booking-detail-contact a.is-whatsapp{border-color:#bde8cb;background:#eefbf2;color:#128c4a}

.bbu-booking-cancel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:22px;padding:12px;border:1px solid #f0d2d2;border-radius:12px;background:#fffafa}
.bbu-booking-cancel label{display:grid;gap:5px}
.bbu-booking-cancel label>span{color:#667085;font-size:10px;font-weight:850}
.bbu-booking-cancel input{min-height:42px;padding:8px 10px;border:1px solid #e3c9c9;border-radius:9px;font:inherit}
.bbu-booking-cancel button{min-height:42px;padding:8px 11px;border:0;border-radius:9px;background:#b42318;color:#fff;font:inherit;font-size:11px;font-weight:900}
.bbu-booking-cancel-reason{margin-top:14px;padding:11px;border-radius:11px;background:#fff7f6;color:#b42318}
.bbu-booking-cancel-reason strong,.bbu-booking-cancel-reason span{display:block}
.bbu-booking-cancel-reason span{margin-top:3px;font-size:11px}

@media(max-width:760px){
    .bbu-booking-card{width:100%;padding:16px}
    .bbu-booking-services{grid-template-columns:minmax(0,1fr)}
    .bbu-booking-slots{grid-template-columns:repeat(4,minmax(0,1fr))}
    .bbu-booking-customer-grid{grid-template-columns:minmax(0,1fr)}
    .bbu-booking-customer-grid .is-full{grid-column:auto}
    .bbu-booking-customer-grid input,.bbu-booking-customer-grid textarea,.bbu-booking-date-form input{font-size:16px}
    .bbu-booking-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:520px){
    .bbu-booking-head{flex-direction:column}
    .bbu-booking-head-link{width:100%}
    .bbu-booking-date-form,.bbu-booking-company-date{grid-template-columns:minmax(0,1fr)}
    .bbu-booking-date-form button,.bbu-booking-company-date button{width:100%}
    .bbu-booking-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
    .bbu-booking-list-row{grid-template-columns:minmax(0,1fr)}
    .bbu-booking-list-date{text-align:left}
    .bbu-booking-company-row{grid-template-columns:52px minmax(0,1fr)}
    .bbu-booking-company-status{grid-column:2;text-align:left}
    .bbu-booking-company-actions{grid-column:2;justify-content:stretch}
    .bbu-booking-company-actions form,.bbu-booking-company-actions button{width:100%}
    .bbu-booking-cancel{grid-template-columns:minmax(0,1fr)}
    .bbu-booking-cancel button,.bbu-booking-button{width:100%}
}

@media(max-width:360px){
    .bbu-booking-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bbu-booking-detail-grid{grid-template-columns:minmax(0,1fr)}
    .bbu-booking-bundle{flex-direction:column}
    .bbu-booking-bundle>span{flex:auto}
}
