/* Zuri booking wizard */
.zb-steps{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.zb-step{display:flex;align-items:center;gap:9px;padding:11px 18px;background:#fff;border:1px solid var(--zuri-line);border-radius:30px;font-size:14px;font-weight:500;color:var(--zuri-gray);flex:1;justify-content:center;min-width:140px}
.zb-step span{width:26px;height:26px;border-radius:50%;background:#eef2f0;color:var(--zuri-gray);display:grid;place-items:center;font-size:13px;font-weight:600}
.zb-step.active{border-color:var(--zuri-green);color:var(--zuri-green-deep)}
.zb-step.active span{background:var(--zuri-green);color:#fff}
.zb-step.done span{background:var(--zuri-gold);color:var(--zuri-green-deep)}
.zb-card{background:#fff;border-radius:20px;box-shadow:var(--zuri-shadow);padding:34px}
.zb-pane{display:none;animation:zbfade .3s ease}
.zb-pane.active{display:block}
@keyframes zbfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.zb-title{font-family:"Rubik",sans-serif;font-size:24px;color:var(--zuri-green-deep);margin:0 0 22px}
.zb-label{display:block;font-size:13.5px;font-weight:500;color:var(--zuri-green-deep);margin-bottom:6px}
.zb-input{width:100%;padding:12px 15px;border:1.5px solid var(--zuri-line);border-radius:12px;font-size:15px;font-family:inherit;outline:none;transition:.15s;background:#fff}
.zb-input:focus{border-color:var(--zuri-green)}
.zb-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.zb-prev svg{transform:rotate(180deg)}

/* service grid */
.zb-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.zb-svc{position:relative;border:2px solid var(--zuri-line);border-radius:16px;overflow:hidden;cursor:pointer;transition:.18s;display:flex;flex-direction:column}
.zb-svc:hover{border-color:var(--zuri-green)}
.zb-svc.checked{border-color:var(--zuri-green);box-shadow:0 8px 24px rgba(10,113,88,.16)}
.zb-svc input{position:absolute;opacity:0}
.zb-svc-img{height:110px;background-size:cover;background-position:center;display:block}
.zb-svc-body{padding:14px}
.zb-svc-body b{display:block;color:var(--zuri-green-deep);font-size:16px}
.zb-svc-body small{display:block;color:var(--zuri-gray);font-size:12.5px;margin:5px 0 8px;line-height:1.5;height:36px;overflow:hidden}
.zb-svc-body em{font-style:normal;font-weight:700;color:var(--zuri-green)}
.zb-svc-body em span{font-weight:400;font-size:12px;color:var(--zuri-gray)}
.zb-tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--zuri-green);color:#fff;display:none;place-items:center}
.zb-svc.checked .zb-tick,.zb-method.checked .zb-tick{display:grid}

/* extras */
.zb-extras{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.zb-extra{display:flex;align-items:center;gap:10px;border:1.5px solid var(--zuri-line);border-radius:12px;padding:11px 14px;cursor:pointer;font-size:14px}
.zb-extra input{accent-color:var(--zuri-green);width:17px;height:17px}
.zb-extra em{font-style:normal;color:var(--zuri-green);font-weight:600}
.zb-extra:has(input:checked){border-color:var(--zuri-green);background:rgba(10,113,88,.05)}

/* payment */
.zb-methods{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.zb-method{position:relative;display:flex;align-items:center;gap:16px;border:2px solid var(--zuri-line);border-radius:14px;padding:18px 20px;cursor:pointer;transition:.16s}
.zb-method:hover{border-color:var(--zuri-green)}
.zb-method.checked{border-color:var(--zuri-green);background:rgba(10,113,88,.04)}
.zb-method input{position:absolute;opacity:0}
.zb-mic{width:48px;height:48px;border-radius:13px;background:rgba(10,113,88,.1);color:var(--zuri-green);display:grid;place-items:center;flex-shrink:0}
.zb-mbody b{display:block;color:var(--zuri-green-deep);font-size:16px}
.zb-mbody small{color:var(--zuri-gray);font-size:13px}

/* summary */
.zb-summary{background:#f7f9f8;border-radius:14px;padding:22px}
.zb-summary .row{display:flex;justify-content:space-between;padding:8px 0;color:var(--zuri-gray);margin:0}
.zb-summary .row b{color:var(--zuri-green-deep)}
.zb-summary .total{border-top:1px dashed var(--zuri-line);margin-top:6px;padding-top:14px;font-size:18px}
.zb-summary .total b{color:var(--zuri-green);font-size:22px}
@media(max-width:560px){.zb-card{padding:22px}}