@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap");/* Owner area: shared shell + Today / Services / Profile screens.
   Mobile first: everything is designed at 375px, then widened. */
/* Variables also on the modal backdrop: modals are used on the public booking page too. */
.ow-shell, .ow-modal-backdrop {
  --ow-green: #1f6b52;
  --ow-green-dark: #154d3b;
  --ow-green-soft: #e8f4ee;
  --ow-ink: #14261f;
  --ow-muted: #66786f;
  --ow-line: #e3ebe6;
  --ow-bg: #f4f7f5;
  --ow-danger: #b4332b;
  --ow-danger-soft: #fdeeec;
  --ow-wa: #1fae5b;
}
.ow-shell {
  min-height: 100vh;
  background: var(--ow-bg);
  color: var(--ow-ink);
  font-family: "Cairo", system-ui, sans-serif;
}
.ow-shell *, .ow-modal-backdrop * { box-sizing: border-box; }

/* ---------- navigation ---------- */
.ow-topbar {
  position: sticky; top: 0; z-index: 1400;
  display: flex; align-items: center; gap: 18px;
  height: 64px; padding: 0 max(20px, calc((100vw - 1100px) / 2));
  background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--ow-line);
  backdrop-filter: blur(12px);
}
.ow-brand { font-weight: 800; font-size: 19px; color: var(--ow-green-dark); text-decoration: none; white-space: nowrap; }
.ow-toptabs { display: flex; gap: 4px; flex: 1; }
.ow-toptab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 11px;
  color: var(--ow-muted); text-decoration: none; font-weight: 700; font-size: 15px;
}
.ow-toptab:hover { background: #f0f5f2; color: var(--ow-ink); }
.ow-toptab.active { background: var(--ow-green-soft); color: var(--ow-green); }
.ow-logout {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid #efd9d7;
  border-radius: 11px; background: #fff; color: var(--ow-danger); font: inherit; font-weight: 700; cursor: pointer;
}
.ow-bottomnav { display: none; }
.ow-main { padding-bottom: 40px; }

@media (max-width: 760px) {
  .ow-topbar { display: none; }
  .ow-bottomnav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1500;
    display: flex; height: calc(66px + env(safe-area-inset-bottom));
    padding: 6px 6px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.98); border-top: 1px solid var(--ow-line);
    box-shadow: 0 -6px 22px rgba(20, 50, 40, 0.07);
  }
  .ow-bottomtab {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border-radius: 12px; color: #7a8a81; text-decoration: none; font-size: 11.5px; font-weight: 700;
  }
  .ow-bottomtab.active { background: var(--ow-green-soft); color: var(--ow-green); }
  .ow-main { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* ---------- page scaffolding ---------- */
.ow-page { max-width: 760px; margin: 0 auto; padding: 22px 16px; }
.ow-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ow-page-head h1 { margin: 0; font-size: 24px; line-height: 1.35; }
.ow-page-head p { margin: 4px 0 0; color: var(--ow-muted); }
.ow-card { background: #fff; border: 1px solid var(--ow-line); border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.ow-card h2 { margin: 0 0 4px; font-size: 18px; }
.ow-card > p.ow-hint { margin: 0 0 14px; color: var(--ow-muted); font-size: 14px; }
.ow-hint { color: var(--ow-muted); font-size: 14px; }
.ow-empty { text-align: center; padding: 34px 18px; color: var(--ow-muted); }
.ow-empty strong { display: block; color: var(--ow-ink); font-size: 17px; margin-bottom: 6px; }
.ow-loading { padding: 50px 16px; text-align: center; color: var(--ow-muted); }

/* ---------- buttons & inputs ---------- */
.ow-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ow-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ow-btn-primary { background: var(--ow-green); color: #fff; }
.ow-btn-primary:hover:not(:disabled) { background: var(--ow-green-dark); }
.ow-btn-ghost { background: #fff; color: var(--ow-ink); border-color: var(--ow-line); }
.ow-btn-ghost:hover:not(:disabled) { background: #f4f8f6; }
.ow-btn-danger { background: var(--ow-danger); color: #fff; }
.ow-btn-soft-danger { background: var(--ow-danger-soft); color: var(--ow-danger); }
.ow-btn-wa { background: var(--ow-wa); color: #fff; }
.ow-btn-block { width: 100%; }
.ow-btn-sm { min-height: 38px; padding: 7px 12px; font-size: 14px; border-radius: 10px; }
.ow-icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #f0f4f2; color: inherit; cursor: pointer;
}
.ow-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ow-field { display: grid; gap: 6px; margin-bottom: 14px; }
.ow-field label { font-weight: 700; font-size: 14.5px; }
.ow-field small { color: var(--ow-muted); }
.ow-input, .ow-field input, .ow-field textarea, .ow-field select {
  width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #d6e1db; border-radius: 12px;
  background: #fff; color: var(--ow-ink); font: inherit; font-size: 16px; /* 16px stops iOS zoom */
}
.ow-field textarea { min-height: 90px; resize: vertical; }
.ow-input:focus, .ow-field input:focus, .ow-field textarea:focus, .ow-field select:focus {
  outline: 2px solid #9fd0b8; border-color: var(--ow-green);
}
.ow-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .ow-grid-2 { grid-template-columns: 1fr; } }

.ow-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ow-chips::-webkit-scrollbar { display: none; }
.ow-chip {
  flex: none; min-height: 40px; padding: 8px 15px; border: 1px solid var(--ow-line); border-radius: 999px;
  background: #fff; color: var(--ow-ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.ow-chip.active { background: var(--ow-green); border-color: var(--ow-green); color: #fff; }

/* ---------- messages ---------- */
.ow-alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.ow-alert-error { background: var(--ow-danger-soft); color: var(--ow-danger); }
.ow-alert-ok { background: var(--ow-green-soft); color: var(--ow-green-dark); }
.ow-toast {
  position: fixed; inset-inline: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 3000;
  max-width: 420px; margin: 0 auto; padding: 13px 16px; border-radius: 14px;
  background: #15281f; color: #fff; font-weight: 700; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
@media (min-width: 761px) { .ow-toast { bottom: 24px; } }

/* ---------- modal ---------- */
.ow-modal-backdrop {
  position: fixed; inset: 0; z-index: 2500; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(12, 28, 22, 0.5); font-family: "Cairo", system-ui, sans-serif;
}
.ow-modal {
  width: 100%; max-width: 520px; max-height: 92dvh; display: flex; flex-direction: column;
  background: #fff; color: #14261f; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.15);
}
@media (min-width: 600px) { .ow-modal-backdrop { align-items: center; } .ow-modal { border-radius: 22px; } }
.ow-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #e3ebe6; }
.ow-modal-head h2 { margin: 0; font-size: 18px; }
.ow-modal-body { padding: 18px; overflow-y: auto; }
.ow-modal-foot { display: flex; gap: 10px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #e3ebe6; }
.ow-modal-foot .ow-btn { flex: 1; }
.ow-modal-text { margin: 0; font-size: 16px; line-height: 1.7; }

/* ---------- Today ---------- */
.ow-day-title { font-size: 15px; color: var(--ow-muted); margin: 10px 0 14px; }
.ow-summary { display: flex; gap: 10px; margin-bottom: 14px; }
.ow-summary > div { flex: 1; background: #fff; border: 1px solid var(--ow-line); border-radius: 16px; padding: 12px 14px; }
.ow-summary strong { display: block; font-size: 22px; }
.ow-summary span { color: var(--ow-muted); font-size: 13px; }
.ow-appt { display: flex; gap: 14px; background: #fff; border: 1px solid var(--ow-line); border-radius: 18px; padding: 14px; margin-bottom: 10px; }
.ow-appt.past { opacity: 0.6; }
.ow-appt.next { border-color: var(--ow-green); box-shadow: 0 0 0 2px #cfe8da; }
.ow-appt-time { flex: none; width: 62px; text-align: center; }
.ow-appt-time strong { display: block; font-size: 20px; line-height: 1.2; }
.ow-appt-time span { color: var(--ow-muted); font-size: 12.5px; }
.ow-appt-body { flex: 1; min-width: 0; }
.ow-appt-body h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.ow-appt-body p { margin: 2px 0 10px; color: var(--ow-muted); font-size: 14px; }
.ow-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--ow-green-soft); color: var(--ow-green); font-size: 12px; font-weight: 800; margin-inline-start: 6px; vertical-align: middle; }

/* ---------- Services ---------- */
.ow-service { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--ow-line); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.ow-service.off { opacity: 0.6; }
.ow-thumb { flex: none; width: 58px; height: 58px; border-radius: 13px; object-fit: cover; background: var(--ow-green-soft); display: grid; place-items: center; color: var(--ow-green); }
.ow-service-info { flex: 1; min-width: 0; }
.ow-service-info strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.ow-service-info span { color: var(--ow-muted); font-size: 14px; }
.ow-switch { position: relative; flex: none; width: 50px; height: 30px; border: 0; border-radius: 999px; background: #cfd8d3; cursor: pointer; }
.ow-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s; }
.ow-switch.on { background: var(--ow-green); }
.ow-switch.on::after { inset-inline-start: 23px; }
.ow-durations { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Profile ---------- */
.ow-link-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #f3f7f5; direction: ltr; font-size: 14px; overflow: hidden; }
.ow-link-box span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-cover { position: relative; height: 150px; border-radius: 16px; background: linear-gradient(125deg, #163f35, #32725b) center / cover; overflow: hidden; }
.ow-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ow-cover-actions { position: absolute; bottom: 10px; inset-inline-end: 10px; display: flex; gap: 8px; }
.ow-logo-row { display: flex; align-items: center; gap: 14px; margin: -34px 16px 14px; position: relative; }
.ow-logo { width: 84px; height: 84px; border-radius: 50%; border: 4px solid #fff; background: #e8f4ee; object-fit: cover; display: grid; place-items: center; color: var(--ow-green); font-weight: 800; font-size: 26px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ow-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 560px) { .ow-gallery { grid-template-columns: repeat(4, 1fr); } }
.ow-gallery-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #eef3f0; }
.ow-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ow-gallery-item button { position: absolute; top: 6px; inset-inline-end: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ow-danger); display: grid; place-items: center; cursor: pointer; }
.ow-gallery-add { aspect-ratio: 1; border: 2px dashed #bcd3c6; border-radius: 12px; background: #f8fbf9; color: var(--ow-green); display: grid; place-items: center; align-content: center; gap: 4px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.ow-file-input { display: none; }
.ow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ow-stats div { background: #f5f9f7; border-radius: 12px; padding: 10px; text-align: center; }
.ow-stats strong { display: block; font-size: 20px; }
.ow-stats span { color: var(--ow-muted); font-size: 12.5px; }
.ow-block-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f5f8f6; margin-top: 8px; }
.ow-qr { display: grid; place-items: center; padding: 12px; background: #fff; }

/* ---------- first-run checklist ---------- */
.ow-setup { border-color: #b9dcc9; background: #f7fcf9; margin-top: 14px; }
.ow-setup ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.ow-setup li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; }
.ow-setup li::before { content: counter(step); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--ow-green); color: var(--ow-green); font-weight: 800; }
.ow-setup li.done::before { content: "✓"; background: var(--ow-green); color: #fff; }
.ow-setup li.done a { color: var(--ow-muted); text-decoration: line-through; }
.ow-setup a { color: var(--ow-green-dark); font-weight: 800; }
.ow-setup small { color: var(--ow-muted); }
.hz-page{--dark:#0f2d2a;--deep:#092521;--green:#10b981;--mint:#34d399;--gold:#f4b860;--cream:#f8faf7;color:var(--dark);font-family:inherit;overflow-x:hidden;background:#fff}.hz-page *{box-sizing:border-box}.hz-page a{text-decoration:none}.hz-page button{font:inherit;cursor:pointer}.hz-container{width:min(1180px,calc(100% - 44px));margin:auto}.hz-header{height:83px;background:#fff;position:sticky;top:0;z-index:60;border-bottom:1px solid #eaf0ec}.hz-header-inner,.hz-header-actions,.hz-nav,.hz-brand{display:flex;align-items:center}.hz-header-inner{height:100%;justify-content:space-between;gap:25px}.hz-brand{gap:11px;color:var(--dark);flex-shrink:0}.hz-brand img{width:49px;height:49px;object-fit:cover;object-position:center;border-radius:13px}.hz-brand span{display:flex;flex-direction:column;line-height:1.3}.hz-brand b{font-size:21px;letter-spacing:1.7px;font-weight:900}.hz-brand small{font-size:11px;color:#78918a}.hz-nav{gap:36px}.hz-nav>a{color:#48635b;font-size:14px;font-weight:700;transition:color .2s}.hz-nav>a:hover{color:#0b9c74}.hz-header-actions{gap:20px}.hz-login{font-size:14px;font-weight:800;color:var(--dark)}.hz-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:13px;min-height:49px;padding:12px 21px;font-size:14px;font-weight:800;border:1px solid transparent;transition:transform .2s,box-shadow .2s}.hz-btn:hover{transform:translateY(-2px)}.hz-btn-primary{background:var(--dark);color:#fff}.hz-btn-primary:hover{box-shadow:0 10px 24px #09252128}.hz-btn-gold{background:var(--gold);color:var(--dark)}.hz-btn-outline{border-color:#70948a;color:#fff}.hz-menu-btn,.hz-mobile-login{display:none}.hz-hero{background:radial-gradient(circle at 5% 85%,#17675a 0%,transparent 34%),linear-gradient(125deg,#082521,#0f3b35 62%,#0c302b);position:relative;overflow:hidden;color:white}.hz-hero:before{content:'';position:absolute;width:540px;height:540px;border:1px solid #ffffff0e;border-radius:50%;left:-160px;top:-150px;box-shadow:0 0 0 85px #ffffff04,0 0 0 170px #ffffff03}.hz-hero-grid{min-height:610px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;padding:70px 0 85px;position:relative}.hz-hero-copy{position:relative;z-index:1}.hz-eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #51d9b850;background:#ffffff0a;padding:9px 15px;border-radius:30px;color:#95f0d1;font-size:13px;font-weight:700}.hz-hero h1{font-size:clamp(40px,5vw,65px);line-height:1.28;letter-spacing:-1.8px;margin:24px 0}.hz-hero h1 em,.hz-section-heading h2 em,.hz-how h2 em,.hz-cta h2 em{font-style:normal;color:var(--mint)}.hz-hero-copy>p{font-size:17px;color:#c2d8d1;line-height:2;max-width:500px}.hz-hero-copy>p strong{color:#fff}.hz-hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin:32px 0 25px}.hz-hero-note{display:flex;align-items:center;gap:9px;color:#b2d2c8;font-size:12px}.hz-hero-note svg{color:var(--mint)}.hz-hero-note span{height:4px;width:4px;border-radius:50%;background:#88aea2;margin:0 4px}.hz-preview-wrap{position:relative;padding:15px 10px 0 32px}.hz-preview{background:#fff;color:var(--dark);border-radius:22px;box-shadow:0 28px 70px #00191390;padding:25px;max-width:475px;margin:auto;transform:rotate(-2deg);border:6px solid #ffffff22}.hz-preview-top,.hz-preview-heading,.hz-preview-brand,.hz-preview-list-title,.hz-preview-appointment{display:flex;align-items:center;justify-content:space-between}.hz-preview-top{padding-bottom:20px;border-bottom:1px solid #edf2ee}.hz-preview-brand{gap:8px;justify-content:flex-start}.hz-preview-brand img{width:35px;height:35px;object-fit:cover;border-radius:9px}.hz-preview-brand span{display:flex;flex-direction:column}.hz-preview-brand b{font-size:13px;letter-spacing:1px}.hz-preview-brand small,.hz-preview-heading small{color:#80928b;font-size:10px}.hz-preview-pill{background:#e4faf0;color:#16875d;font-size:10px;padding:7px 10px;border-radius:20px}.hz-preview-heading{margin:24px 0}.hz-preview-heading h3{margin:5px 0;font-size:21px}.hz-preview-date{display:flex;align-items:center;gap:6px;font-size:11px;color:#457364;background:#f0f7f3;padding:9px;border-radius:9px}.hz-preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hz-preview-stats>div{display:flex;flex-direction:column;gap:6px;background:#f0f8f4;border:1px solid #e0eee5;padding:17px;border-radius:13px}.hz-preview-stats>div+div{background:#fff9ef;border-color:#f7e7ca}.hz-preview-stats small,.hz-preview-stats span{font-size:10px;color:#6e8579}.hz-preview-stats strong{font-size:30px}.hz-preview-list-title{font-size:13px;font-weight:800;margin:23px 0 10px}.hz-preview-list-title span{color:#0b9d70;font-size:10px}.hz-preview-appointment{justify-content:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #edf2ee}.hz-preview-time{font-size:12px;font-weight:800;color:#668077;min-width:40px}.hz-preview-avatar{height:35px;width:35px;border-radius:10px;background:#e5f4ec;color:#25865f;display:grid;place-items:center;font-weight:800}.hz-preview-appointment-text{display:flex;flex-direction:column;gap:4px;flex:1}.hz-preview-appointment-text b{font-size:12px}.hz-preview-appointment-text small{font-size:10px;color:#80928b}.hz-preview-dot{height:7px;width:7px;background:#26b988;border-radius:50%}.hz-floating-note{position:absolute;left:-12px;bottom:25px;display:flex;align-items:center;gap:12px;padding:14px 19px;background:#fff;color:var(--dark);border-radius:14px;box-shadow:0 15px 40px #001c1650;transform:rotate(3deg)}.hz-floating-note svg{color:#0ea77d}.hz-floating-note span{display:flex;flex-direction:column;gap:4px}.hz-floating-note b{font-size:12px}.hz-floating-note small{font-size:10px;color:#7c938a}.hz-trust{background:#f4f9f5;border-bottom:1px solid #e9f1ea}.hz-trust-inner{min-height:93px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.hz-trust-inner>span{font-weight:900}.hz-trust-inner>div{display:flex;align-items:center;gap:9px;font-size:13px;color:#4c7264;font-weight:700}.hz-trust-inner svg{color:#0f9e73}.hz-section{padding:100px 0}.hz-section-heading{text-align:center;margin-bottom:48px}.hz-kicker{display:inline-block;color:#0a9e70;font-size:13px;font-weight:900;margin-bottom:14px}.hz-section-heading h2,.hz-how h2,.hz-cta h2{font-size:clamp(31px,4vw,47px);line-height:1.35;margin:0 0 16px;letter-spacing:-.7px}.hz-section-heading h2 em,.hz-how h2 em{color:#0da67c}.hz-section-heading p,.hz-how p{font-size:15px;line-height:1.9;color:#72877d}.hz-features{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}.hz-feature{padding:31px;border:1px solid #e6efea;border-radius:20px;background:#fff;transition:transform .2s,box-shadow .2s}.hz-feature:hover{transform:translateY(-4px);box-shadow:0 16px 35px #0c43310c}.hz-feature-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:#e9f9f1;color:#099a72;margin-bottom:25px}.hz-feature h3{font-size:18px;margin:0 0 10px}.hz-feature p{font-size:13px;line-height:1.95;color:#71877c;margin:0}.hz-how{background:#f4f9f6;padding:95px 0}.hz-how-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:90px}.hz-how-grid>div:first-child>p{max-width:360px}.hz-text-link{display:inline-flex;align-items:center;gap:8px;color:#0c966f;font-weight:900;margin-top:18px}.hz-steps{display:flex;flex-direction:column;gap:13px}.hz-step{display:flex;align-items:center;gap:22px;padding:23px 25px;background:#fff;border:1px solid #e5eee8;border-radius:17px}.hz-step>span{font-size:24px;color:#0aa678;font-weight:900;letter-spacing:1px}.hz-step>div{flex:1}.hz-step h3{margin:0 0 6px;font-size:17px}.hz-step p{margin:0;font-size:12px}.hz-step>svg{color:#a6bbb0}.hz-pricing{background:#fff}.hz-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}.hz-plan{position:relative;border:1px solid #e3ede7;border-radius:21px;padding:31px;display:flex;flex-direction:column;background:#fff}.hz-plan-featured{border:2px solid #10b981;box-shadow:0 17px 45px #067a4812}.hz-popular{position:absolute;top:-16px;left:25px;background:#0f9974;color:#fff;border-radius:30px;padding:7px 15px;font-size:11px;font-weight:800}.hz-plan-head{display:flex;flex-direction:column;gap:6px}.hz-plan-head>span{font-size:19px;font-weight:900}.hz-plan-head>small{font-size:12px;color:#8ba097}.hz-plan-price{display:flex;align-items:baseline;gap:5px;margin:27px 0 11px}.hz-plan-price>span{font-size:25px;font-weight:900}.hz-plan-price strong{font-size:49px;letter-spacing:-2px}.hz-plan-price small{font-size:12px;color:#8ba097;margin-right:5px}.hz-plan>p{color:#748b7f;font-size:12px;min-height:35px}.hz-plan-divider{height:1px;background:#e8f0ea;margin:15px 0 24px}.hz-plan-feature{display:flex;align-items:center;gap:10px;font-size:13px;color:#3d6553;margin-bottom:18px}.hz-plan-feature svg{color:#0ca777}.hz-plan>.hz-btn{width:100%;margin-top:auto}.hz-btn-plan{border:1px solid #b9d3c5;color:#0c674d;background:#f6fbf8}.hz-plan-foot{text-align:center;color:#91a29a;margin-top:14px;font-size:10px}.hz-pricing-note{text-align:center;color:#84968c;font-size:12px;margin:30px 0 0}.hz-cta{background:linear-gradient(120deg,#092621,#135345);padding:65px 0;color:#fff}.hz-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.hz-cta h2 em{color:#f4b860}.hz-cta p{color:#b6d3c8;margin-bottom:0}.hz-cta .hz-kicker{color:#8fe2c3}.hz-footer{background:#081f1b;color:#9fb8ae;padding:31px 0}.hz-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.hz-brand-light{color:#fff}.hz-footer-inner>span{font-size:11px}.hz-footer-inner>div:last-child{display:flex;gap:22px}.hz-footer-inner>div:last-child a{font-size:12px;color:#b5cbc1}@media(max-width:980px){.hz-nav{gap:18px}.hz-hero-grid{gap:22px}.hz-preview-wrap{padding:0}.hz-how-grid{gap:35px}.hz-plan{padding:23px}}@media(max-width:760px){.hz-container{width:min(100% - 34px,560px)}.hz-header{height:69px}.hz-brand img{height:42px;width:42px}.hz-brand b{font-size:17px}.hz-brand small{font-size:9px}.hz-header-actions{gap:11px}.hz-header-cta,.hz-login{display:none}.hz-menu-btn{display:grid;place-items:center;width:42px;height:42px;border:1px solid #e0eee6;border-radius:12px;background:#f4faf6;color:var(--dark)}.hz-nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;box-shadow:0 18px 28px #002d171c;padding:22px;flex-direction:column;align-items:stretch;gap:0}.hz-nav-open{display:flex}.hz-nav>a{padding:13px 0;border-bottom:1px solid #eef3ef}.hz-mobile-login{display:block!important;color:#0b956e!important}.hz-hero-grid{grid-template-columns:1fr;gap:35px;padding:60px 0 75px}.hz-hero h1{font-size:43px}.hz-hero-copy>p{font-size:15px}.hz-preview-wrap{width:min(100%,480px);margin:auto}.hz-preview{transform:none}.hz-floating-note{left:-3px;bottom:-23px;transform:none}.hz-trust-inner{padding:25px 0;justify-content:center}.hz-trust-inner>span{width:100%;text-align:center}.hz-section{padding:73px 0}.hz-features{grid-template-columns:repeat(2,1fr);gap:12px}.hz-feature{padding:23px}.hz-how{padding:75px 0}.hz-how-grid{grid-template-columns:1fr;gap:35px}.hz-plans{grid-template-columns:1fr;max-width:450px;margin:auto}.hz-plan{padding:30px}.hz-cta-inner{flex-direction:column;align-items:flex-start}.hz-footer-inner{flex-direction:column;text-align:center}}@media(max-width:460px){.hz-hero h1{font-size:38px}.hz-hero-actions .hz-btn{flex:1;padding:11px;font-size:12px}.hz-hero-note{font-size:10px}.hz-preview{padding:16px}.hz-features{grid-template-columns:1fr}.hz-feature{padding:24px}.hz-feature-icon{margin-bottom:14px}.hz-section-heading h2,.hz-how h2,.hz-cta h2{font-size:31px}.hz-footer-inner>div:last-child{gap:14px}}
.hz-subscribe{margin-bottom:0}.hz-subscribe p{max-width:520px;margin:0 auto 26px}
/* HAJZORA — Login page only. Place in src/styles/LoginPage.css */
.login-page { --login-dark:#0F2D2A; --login-green:#10B981; --login-mint:#34D399; --login-gold:#F4B860; min-height:100vh; display:grid; place-items:center; padding:32px 18px; position:relative; isolation:isolate; overflow:hidden; direction:rtl; background: radial-gradient(ellipse at 12% 85%,rgba(52,211,153,.20),transparent 38%),radial-gradient(ellipse at 90% 10%,rgba(244,184,96,.14),transparent 38%),linear-gradient(145deg,#f8faf7,#eaf5ef); font-family:Cairo,sans-serif; }
.login-page .login-background-decoration {position:absolute;width:370px;height:370px;border-radius:50%;filter:blur(95px);opacity:.32;pointer-events:none;z-index:-1}
.login-page .decoration-one {top:-200px;right:-100px;background:#10b981}
.login-page .decoration-two {bottom:-200px;left:-100px;background:#f4b860}
.login-page .login-card {width:100%;max-width:465px;padding:43px 42px 32px;background:rgba(255,255,255,.95);border:1px solid rgba(15,45,42,.09);border-radius:26px;box-shadow:0 28px 85px rgba(15,45,42,.10),0 3px 12px rgba(15,45,42,.03);position:relative;z-index:1}
.login-page .login-card::before {content:"";position:absolute;top:0;left:55px;right:55px;height:3px;background:linear-gradient(90deg,transparent,#f4b860,#10b981,transparent);border-radius:0 0 8px 8px}
.login-page .login-logo {width:66px;height:66px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border-radius:19px;background:linear-gradient(145deg,#0f2d2a,#17634f);color:#f4b860;box-shadow:0 10px 22px rgba(15,45,42,.18)}
.login-page .login-brand {text-align:center;color:#0f2d2a;font-weight:800;font-size:20px;letter-spacing:1px;margin-bottom:22px;direction:ltr}
.login-page .login-brand span {font-size:15px;color:#238263;letter-spacing:0;margin-left:5px}
.login-page .login-heading {text-align:center;margin-bottom:29px}
.login-page .login-heading h1 {font-size:27px;font-weight:800;color:#0f2d2a;margin-bottom:7px}
.login-page .login-heading p {font-size:14px;color:#6b8078}
.login-page .login-form {display:flex;flex-direction:column;gap:19px}
.login-page .form-group {display:flex;flex-direction:column;gap:8px}
.login-page .form-group label {font-size:13px;font-weight:700;color:#24453d}
.login-page .input-wrapper {height:53px;display:flex;align-items:center;gap:11px;padding:0 15px;background:#f8faf7;border:1px solid #dfe9e3;border-radius:13px;transition:background .2s,border-color .2s,box-shadow .2s}
.login-page .input-wrapper:focus-within {background:white;border-color:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.11)}
.login-page .input-wrapper svg {color:#729687;flex-shrink:0}
.login-page .input-wrapper input {width:100%;border:0;outline:0;background:transparent;color:#0f2d2a;font-size:14px;min-width:0}
.login-page .input-wrapper input::placeholder {color:#9caea5}
.login-page .primary-button {height:54px;border:0;border-radius:13px;background:linear-gradient(110deg,#0f604b,#0f2d2a);color:white;font-size:15px;font-weight:800;box-shadow:0 9px 20px rgba(15,95,74,.17);transition:transform .2s,box-shadow .2s,filter .2s;margin-top:5px}
.login-page .primary-button:hover:not(:disabled) {transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 24px rgba(15,95,74,.24)}
.login-page .primary-button:disabled {opacity:.65;cursor:not-allowed}
.login-page .error-message {padding:12px 14px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;font-size:13px}
.login-page .login-footer {margin-top:29px;text-align:center;color:#81968c;font-size:12px;border-top:1px solid #edf2ee;padding-top:22px}
@media(max-width:520px){.login-page{padding:16px}.login-page .login-card{padding:34px 23px 27px;border-radius:21px}.login-page .login-heading h1{font-size:24px}}
/* HAJZORA — Login page only. Place in src/styles/LoginPage.css */
.login-page { --login-dark:#0F2D2A; --login-green:#10B981; --login-mint:#34D399; --login-gold:#F4B860; min-height:100vh; display:grid; place-items:center; padding:32px 18px; position:relative; isolation:isolate; overflow:hidden; direction:rtl; background: radial-gradient(ellipse at 12% 85%,rgba(52,211,153,.20),transparent 38%),radial-gradient(ellipse at 90% 10%,rgba(244,184,96,.14),transparent 38%),linear-gradient(145deg,#f8faf7,#eaf5ef); font-family:Cairo,sans-serif; }
.login-page .login-background-decoration {position:absolute;width:370px;height:370px;border-radius:50%;filter:blur(95px);opacity:.32;pointer-events:none;z-index:-1}
.login-page .decoration-one {top:-200px;right:-100px;background:#10b981}
.login-page .decoration-two {bottom:-200px;left:-100px;background:#f4b860}
.login-page .login-card {width:100%;max-width:465px;padding:43px 42px 32px;background:rgba(255,255,255,.95);border:1px solid rgba(15,45,42,.09);border-radius:26px;box-shadow:0 28px 85px rgba(15,45,42,.10),0 3px 12px rgba(15,45,42,.03);position:relative;z-index:1}
.login-page .login-card::before {content:"";position:absolute;top:0;left:55px;right:55px;height:3px;background:linear-gradient(90deg,transparent,#f4b860,#10b981,transparent);border-radius:0 0 8px 8px}
.login-page .login-logo {width:66px;height:66px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border-radius:19px;background:linear-gradient(145deg,#0f2d2a,#17634f);color:#f4b860;box-shadow:0 10px 22px rgba(15,45,42,.18)}
.login-page .login-brand {text-align:center;color:#0f2d2a;font-weight:800;font-size:20px;letter-spacing:1px;margin-bottom:22px;direction:ltr}
.login-page .login-brand span {font-size:15px;color:#238263;letter-spacing:0;margin-left:5px}
.login-page .login-heading {text-align:center;margin-bottom:29px}
.login-page .login-heading h1 {font-size:27px;font-weight:800;color:#0f2d2a;margin-bottom:7px}
.login-page .login-heading p {font-size:14px;color:#6b8078}
.login-page .login-form {display:flex;flex-direction:column;gap:19px}
.login-page .form-group {display:flex;flex-direction:column;gap:8px}
.login-page .form-group label {font-size:13px;font-weight:700;color:#24453d}
.login-page .input-wrapper {height:53px;display:flex;align-items:center;gap:11px;padding:0 15px;background:#f8faf7;border:1px solid #dfe9e3;border-radius:13px;transition:background .2s,border-color .2s,box-shadow .2s}
.login-page .input-wrapper:focus-within {background:white;border-color:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.11)}
.login-page .input-wrapper svg {color:#729687;flex-shrink:0}
.login-page .input-wrapper input {width:100%;border:0;outline:0;background:transparent;color:#0f2d2a;font-size:14px;min-width:0}
.login-page .input-wrapper input::placeholder {color:#9caea5}
.login-page .primary-button {height:54px;border:0;border-radius:13px;background:linear-gradient(110deg,#0f604b,#0f2d2a);color:white;font-size:15px;font-weight:800;box-shadow:0 9px 20px rgba(15,95,74,.17);transition:transform .2s,box-shadow .2s,filter .2s;margin-top:5px}
.login-page .primary-button:hover:not(:disabled) {transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 24px rgba(15,95,74,.24)}
.login-page .primary-button:disabled {opacity:.65;cursor:not-allowed}
.login-page .error-message {padding:12px 14px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;font-size:13px}
.login-page .login-footer {margin-top:29px;text-align:center;color:#81968c;font-size:12px;border-top:1px solid #edf2ee;padding-top:22px}
@media(max-width:520px){.login-page{padding:16px}.login-page .login-card{padding:34px 23px 27px;border-radius:21px}.login-page .login-heading h1{font-size:24px}}
/* Registration page extends the existing HAJZORA login design. */
.register-page {overflow:auto; padding-top:42px; padding-bottom:42px;}
.register-page .login-card {max-width:550px;}
.register-page .form-group select {width:100%; height:53px; border:1px solid #dfe9e3; background:#f8faf7; border-radius:13px; padding:0 15px; font:inherit; color:#0f2d2a;}
.register-page .password-toggle {border:0; background:transparent; cursor:pointer; display:grid; place-items:center; color:#729687; padding:5px;}
.register-page .password-mismatch {color:#b91c1c; font-size:13px; margin:0;}
.register-page .login-footer a {color:#0f604b; font-weight:700;}

.login-page .registration-success {background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;border-radius:10px;padding:12px;margin-bottom:18px;font-size:13px;}
.billing-page{min-height:100vh;background:linear-gradient(140deg,#f7faf7,#e7f4ed);font-family:Cairo,sans-serif;color:#0f2d2a;padding:50px 18px}.billing-shell{max-width:560px;margin:auto;text-align:center}.billing-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:22px;font-weight:800;margin-bottom:24px}.billing-brand span{color:#168365;font-size:15px}.billing-shell>h1{font-size:32px;margin:0 0 10px}.billing-shell>p{color:#60786e}.billing-status{background:white;border:1px solid #dce9e0;border-radius:20px;padding:10px 24px;margin:28px 0;box-shadow:0 12px 38px #0f2d2a0d}.billing-status>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0}.billing-status>div+div{border-top:1px solid #edf3ef}.billing-status span{color:#61796e}.billing-active{color:#0f8a5f}.billing-inactive{color:#c2410c}.billing-contact,.billing-dashboard{display:flex;justify-content:center;align-items:center;gap:9px;margin:18px auto 0;background:#0f604b;color:white;border:0;border-radius:12px;padding:13px 18px;cursor:pointer;font-weight:700;font-family:inherit}.billing-contact{background:#25d366;color:#0b2e1f}.billing-message{padding:14px;background:#e4f4ec;border-radius:12px;margin-top:20px}@media(max-width:720px){.billing-shell>h1{font-size:25px}}

.billing-logout{display:block;margin:22px auto 0;background:none;border:0;color:#a43f3f;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.ad-topbar { display: flex !important; }
@media (max-width: 760px) { .ad-topbar { height: 56px; padding: 0 14px; } }
.ad-page { max-width: 860px; }
.ad-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.ad-stats button { border: 1px solid var(--ow-line); background: #fff; border-radius: 16px; padding: 12px; text-align: right; font: inherit; cursor: pointer; color: var(--ow-ink); }
.ad-stats strong { display: block; font-size: 26px; }
.ad-stats span { color: var(--ow-muted); font-size: 13px; }
.ad-stats .ad-warn strong { color: #b26a00; }
.ad-stats .ad-bad strong { color: var(--ow-danger); }
.ad-stats button.on { border-color: var(--ow-green); box-shadow: 0 0 0 2px #cfe8da; }
.ad-pending-alert { display: block; width: 100%; border: 0; text-align: right; font: inherit; cursor: pointer; }
.ad-search { position: relative; margin-bottom: 12px; }
.ad-search svg { position: absolute; top: 14px; inset-inline-start: 13px; color: var(--ow-muted); }
.ad-search input { padding-inline-start: 40px; }
.ad-biz { display: grid; gap: 10px; }
.ad-biz-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-biz-title h3 { margin: 0; font-size: 17px; }
.ad-biz p { margin: 2px 0 0; }
.ad-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.ad-st-active { background: #e3f4ea; color: #1b6a47; }
.ad-st-soon { background: #fff2dc; color: #9a5a00; }
.ad-st-expired { background: #fdeeec; color: #a8322b; }
.ad-st-off { background: #eceff1; color: #5b6770; }
.ad-st-pending { background: #e7efff; color: #2a55a8; }
.ad-modal-status { margin: 0 0 6px; }
.ad-section { padding: 14px 0; border-top: 1px solid #e3ebe6; }
.ad-section:first-of-type { border-top: 0; }
.ad-section h3 { margin: 0 0 2px; font-size: 16px; }
.ad-section .ow-hint { margin: 0 0 10px; }
.ad-danger h3 { color: var(--ow-danger); }
/* Public booking page. Mobile first; the business is the star, not HAJZORA. */
.bk {
  --bk-green: #1f6b52;
  --bk-green-dark: #154d3b;
  --bk-soft: #e8f4ee;
  --bk-ink: #14261f;
  --bk-muted: #66786f;
  --bk-line: #e3ebe6;
  --bk-danger: #b4332b;
  min-height: 100vh; background: #f4f7f5; color: var(--bk-ink);
  font-family: "Cairo", system-ui, sans-serif; padding-bottom: 110px;
}
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk button { font: inherit; cursor: pointer; }
.bk-loading { padding: 40px 16px; text-align: center; color: var(--bk-muted); }

/* header */
.bk-hero { background: #fff; border-bottom: 1px solid var(--bk-line); padding-bottom: 14px; }
.bk-cover { height: 180px; background: linear-gradient(125deg, #163f35, #32725b) center / cover no-repeat; }
@media (min-width: 700px) { .bk-cover { height: 260px; } }
.bk-identity { max-width: 720px; margin: -46px auto 0; padding: 0 16px; text-align: center; position: relative; }
.bk-logo { width: 92px; height: 92px; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background: var(--bk-soft); box-shadow: 0 6px 18px rgba(0,0,0,.12); display: block; margin: 0 auto; }
.bk-logo-text { display: grid; place-items: center; color: var(--bk-green); font-size: 30px; font-weight: 800; }
.bk-identity h1 { margin: 10px 0 2px; font-size: 25px; line-height: 1.35; }
.bk-desc { margin: 0 auto; max-width: 520px; color: var(--bk-muted); line-height: 1.7; }
.bk-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.bk-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 13px; border: 1px solid var(--bk-line); border-radius: 999px; background: #fff; color: var(--bk-ink); text-decoration: none; font-weight: 700; font-size: 14px; max-width: 100%; }
.bk-pill-wa { background: #1fae5b; border-color: #1fae5b; color: #fff; }
.bk-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 2px; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: 720px; margin: 0 auto; }
.bk-gallery::-webkit-scrollbar { display: none; }
.bk-gallery button { flex: none; width: 118px; height: 118px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; scroll-snap-align: start; background: #eef3f0; }
.bk-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* content */
.bk-wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.bk-card { background: #fff; border: 1px solid var(--bk-line); border-radius: 20px; padding: 18px; margin-bottom: 14px; }
.bk-center { text-align: center; }
.bk-muted { color: var(--bk-muted); }
.bk-small { font-size: 13.5px; }
.bk-alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 700; }
.bk-alert-error { background: #fdeeec; color: var(--bk-danger); }
.bk-alert-ok { background: var(--bk-soft); color: var(--bk-green-dark); }

.bk-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bk-step-head h2 { margin: 0; font-size: 20px; }
.bk-step-num { color: var(--bk-green); font-size: 13px; font-weight: 800; }
.bk-back { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f0f4f2; color: var(--bk-ink); }
.bk-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bk-summary span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--bk-soft); color: var(--bk-green-dark); font-size: 13.5px; font-weight: 700; }

.bk-list { display: grid; gap: 10px; }
.bk-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1.5px solid var(--bk-line); border-radius: 16px; background: #fff; color: var(--bk-ink); text-align: right; }
.bk-option:hover:not(:disabled) { border-color: var(--bk-green); background: #fafdfb; }
.bk-option img, .bk-option-icon, .bk-avatar { flex: none; width: 60px; height: 60px; border-radius: 14px; object-fit: cover; }
.bk-option-icon, .bk-avatar { display: grid; place-items: center; background: var(--bk-soft); color: var(--bk-green); }
.bk-avatar { border-radius: 50%; font-size: 22px; font-weight: 800; }
.bk-option-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bk-option-text strong { font-size: 16.5px; overflow-wrap: anywhere; }
.bk-option-text small { color: var(--bk-muted); font-size: 13.5px; }
.bk-price { flex: none; font-weight: 800; font-size: 16px; color: var(--bk-green-dark); }

.bk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 0 -18px; padding-inline: 18px; scrollbar-width: none; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day { flex: none; width: 74px; padding: 9px 4px; border: 1.5px solid var(--bk-line); border-radius: 14px; background: #fff; color: var(--bk-ink); display: grid; gap: 1px; text-align: center; }
.bk-day span { font-size: 12px; color: var(--bk-muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-day strong { font-size: 21px; line-height: 1.2; }
.bk-day small { font-size: 11.5px; color: var(--bk-muted); }
.bk-day:disabled { opacity: 0.35; cursor: not-allowed; background: #f6f8f7; }
.bk-day.active { border-color: var(--bk-green); background: var(--bk-green); color: #fff; }
.bk-day.active span, .bk-day.active small { color: #e1f1e8; }
.bk-sub { font-size: 15px; margin: 16px 0 10px; }
.bk-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 560px) { .bk-times { grid-template-columns: repeat(6, 1fr); } }
.bk-time { min-height: 46px; border: 1.5px solid var(--bk-line); border-radius: 12px; background: #fff; color: var(--bk-ink); font-weight: 800; font-size: 15.5px; }
.bk-time.active { background: var(--bk-green); border-color: var(--bk-green); color: #fff; }

.bk-field { display: grid; gap: 6px; margin-bottom: 14px; }
.bk-field label { font-weight: 800; }
.bk-field small { color: var(--bk-muted); }
.bk-field input, .bk-phone select { min-height: 50px; padding: 11px 13px; border: 1px solid #d6e1db; border-radius: 12px; font: inherit; font-size: 16px; background: #fff; color: var(--bk-ink); width: 100%; }
.bk-phone { display: flex; gap: 8px; }
.bk-phone select { width: 96px; flex: none; }
.bk-field input:focus, .bk-phone select:focus { outline: 2px solid #9fd0b8; border-color: var(--bk-green); }

.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 10px 18px; border: 1px solid transparent; border-radius: 14px; font-weight: 800; font-size: 16px; }
.bk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bk-btn-primary { background: var(--bk-green); color: #fff; }
.bk-btn-ghost { background: #fff; color: var(--bk-ink); border-color: var(--bk-line); }
.bk-btn-soft-danger { background: #fdeeec; color: var(--bk-danger); }
.bk-btn-block { width: 100%; }
.bk-stack { display: grid; gap: 10px; max-width: 340px; margin: 18px auto 0; }

.bk-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 1000; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--bk-line); box-shadow: 0 -6px 22px rgba(20,50,40,.08); }
.bk-bar .bk-btn { max-width: 688px; margin: 0 auto; display: flex; }

.bk-upcoming h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; color: var(--bk-green-dark); }
.bk-upcoming { border-color: #b9dcc9; background: #f7fcf9; }
.bk-upcoming-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--bk-line); }
.bk-upcoming-row:first-of-type { border-top: 0; }
.bk-upcoming-row div { display: grid; }
.bk-upcoming-row span { color: var(--bk-muted); font-size: 14px; }

.bk-done h2 { margin: 12px 0 6px; font-size: 24px; }
.bk-done-when { font-size: 19px; font-weight: 800; line-height: 1.6; margin: 6px 0; }
.bk-tick { width: 70px; height: 70px; margin: 4px auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--bk-soft); color: var(--bk-green); }
.bk-footer { text-align: center; color: #9aa9a1; font-size: 12.5px; padding: 10px 0 20px; }
.bk-time-group h4 { margin: 14px 0 8px; font-size: 14px; color: var(--bk-muted); }
.bk-center h1 { font-size: 22px; margin: 6px 0 8px; }

.sm-page {
  --sm-green: #10b981;
  --sm-dark: #0f2d2a;
  --sm-muted: #78877f;
  --sm-border: #e5ebe6;
  min-height: 100vh;
  background: #f8faf7;
  color: var(--sm-dark);
  font-family: inherit;
}

.sm-page * {
  box-sizing: border-box;
}

.sm-page button,
.sm-page input {
  font: inherit;
}

.sm-page button {
  cursor: pointer;
}

.sm-header {
  background: white;
  border-bottom: 1px solid var(--sm-border);
}

.sm-header-inner {
  max-width: 1150px;
  margin: auto;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sm-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--sm-dark);
  text-decoration: none;
  font-weight: 800;
}

.sm-brand-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--sm-green);
  color: white;
}

.sm-desktop-nav {
  display: flex;
  gap: 25px;
}

.sm-desktop-nav a {
  color: var(--sm-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.sm-desktop-nav a.active {
  color: var(--sm-green);
}

.sm-container {
  max-width: 1000px;
  margin: auto;
  padding: 32px 24px 85px;
}

.sm-heading,
.sm-panel-heading,
.sm-selected-header,
.sm-modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.sm-heading {
  margin-bottom: 25px;
}

.sm-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--sm-green);
  font-size: 12px;
  font-weight: 800;
}

.sm-heading h1 {
  margin: 0;
  font-size: 29px;
}

.sm-heading p,
.sm-panel-heading p {
  margin: 7px 0 0;
  color: var(--sm-muted);
  font-size: 13px;
  line-height: 1.7;
}

.sm-add-button,
.sm-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--sm-green);
  color: white;
  font-weight: 700;
  white-space: nowrap;
}

.sm-page button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sm-panel {
  margin-bottom: 19px;
  padding: 23px;
  border: 1px solid var(--sm-border);
  border-radius: 20px;
  background: white;
  box-shadow: 0 4px 20px rgba(20, 50, 35, 0.035);
}

.sm-panel-heading {
  margin-bottom: 21px;
}

.sm-panel-heading h2 {
  margin: 0;
  font-size: 20px;
}

.sm-count {
  padding: 7px 11px;
  border-radius: 20px;
  background: #eaf5ee;
  color: var(--sm-green);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sm-staff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sm-staff-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--sm-border);
  border-radius: 15px;
  background: #fff;
  color: var(--sm-dark);
  text-align: right;
}

.sm-staff-card.selected {
  border-color: var(--sm-green);
  background: #f1f8f3;
}

.sm-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 49px;
  height: 49px;
  border-radius: 15px;
  background: #e8f2eb;
  color: var(--sm-green);
  font-size: 22px;
  font-weight: 800;
}

.sm-avatar.large {
  width: 60px;
  height: 60px;
  font-size: 26px;
}

.sm-staff-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sm-staff-info strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.sm-staff-info small {
  color: var(--sm-muted);
  font-size: 11px;
  line-height: 1.6;
}

.sm-staff-card > svg {
  flex-shrink: 0;
  color: var(--sm-muted);
}

.sm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 140px;
  padding: 25px;
  border: 1px dashed #d7e4da;
  border-radius: 15px;
  color: var(--sm-muted);
  text-align: center;
}

.sm-empty strong {
  color: var(--sm-dark);
}

.sm-empty p {
  margin: 0;
  font-size: 13px;
}

.sm-selected-header {
  margin: 28px 0 20px;
  padding: 21px;
  border: 1px solid var(--sm-border);
  border-radius: 18px;
  background: white;
}

.sm-selected-person {
  display: flex;
  align-items: center;
  gap: 15px;
}

.sm-selected-person h2 {
  margin: 0 0 9px;
  font-size: 21px;
}

.sm-status {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.sm-status.enabled {
  background: #e6f5e9;
  color: #287746;
}

.sm-status.disabled {
  background: #fceeed;
  color: #b84b43;
}

.sm-bookable-button {
  padding: 11px 13px;
  border: 1px solid #cbe5d4;
  border-radius: 11px;
  background: #eff8f1;
  color: var(--sm-green);
  font-size: 12px !important;
  font-weight: 700;
}

.sm-bookable-button.danger {
  border-color: #f2d1ce;
  background: #fff3f1;
  color: #b84b43;
}

.sm-tabs {
  display: flex;
  gap: 9px;
  margin-bottom: 17px;
}

.sm-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 14px;
  border: 1px solid var(--sm-border);
  border-radius: 12px;
  background: white;
  color: var(--sm-muted);
  font-size: 13px;
  font-weight: 700;
}

.sm-tabs button.active {
  border-color: var(--sm-green);
  background: #eaf5ee;
  color: var(--sm-green);
}

.sm-service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-service-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--sm-border);
  border-radius: 13px;
  cursor: pointer;
}

.sm-service-icon,
.sm-period-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eaf5ee;
  color: var(--sm-green);
}

.sm-service-info,
.sm-period-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sm-service-info strong,
.sm-period-info strong {
  font-size: 14px;
}

.sm-service-info small,
.sm-period-info small,
.sm-period-info span {
  color: var(--sm-muted);
  font-size: 12px;
}

.sm-service-row input,
.sm-block-option input {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  accent-color: var(--sm-green);
}

.sm-selection-note {
  margin: 17px 0 0;
  color: var(--sm-muted);
  font-size: 12px;
  line-height: 1.8;
}

.sm-period-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 19px;
  border-radius: 15px;
  background: #f8faf7;
}

.sm-period-form > label,
.sm-time-grid label,
.sm-add-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.sm-period-form input,
.sm-add-form input {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dce5df;
  border-radius: 11px;
  outline-color: var(--sm-green);
  background: white;
  color: var(--sm-dark);
}

.sm-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sm-period-form .sm-block-option {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.sm-block-option input {
  width: 19px;
}

.sm-period-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 15px;
}

.sm-period-heading h3 {
  margin: 0;
  font-size: 17px;
}

.sm-period-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-period-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid var(--sm-border);
  border-radius: 13px;
}

.sm-delete-button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 39px;
  height: 39px;
  border: 0;
  border-radius: 10px;
  background: #fff0ef;
  color: #bc4942;
}

.sm-calendar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 17px;
  padding: 15px;
  border: 1px solid #cbe5d4;
  border-radius: 13px;
  background: #eff8f1;
  color: var(--sm-green);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.sm-alert {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border-radius: 12px;
  font-size: 13px;
}

.sm-error {
  background: #fff0ef;
  color: #ad3c35;
}

.sm-success {
  background: #eaf5ee;
  color: var(--sm-green);
}

.sm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(14, 32, 25, 0.48);
}

.sm-modal {
  width: 100%;
  max-width: 440px;
  max-height: 85dvh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 23px;
  background: white;
}

.sm-modal-heading {
  margin-bottom: 20px;
}

.sm-modal-heading h2 {
  margin: 0;
  font-size: 21px;
}

.sm-modal-heading button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f0f3f0;
  color: var(--sm-dark);
}

.sm-add-form {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.sm-add-form p {
  margin: 0;
  color: var(--sm-muted);
  font-size: 12px;
  line-height: 1.7;
}

.sm-menu > button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  background: transparent;
  color: var(--sm-dark);
  text-align: right;
}

.sm-bottom-nav {
  display: none;
}

@media (max-width: 700px) {
  .sm-header {
    display: none;
  }

  .sm-container {
    padding: 25px 14px
      calc(105px + env(safe-area-inset-bottom));
  }

  .sm-heading h1 {
    font-size: 25px;
  }

  .sm-heading p {
    max-width: 230px;
    font-size: 12px;
  }

  .sm-add-button {
    padding: 12px;
  }

  .sm-add-button span {
    display: none;
  }

  .sm-panel {
    padding: 16px;
    border-radius: 17px;
  }

  .sm-staff-grid {
    grid-template-columns: 1fr;
  }

  .sm-selected-header {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .sm-bookable-button {
    width: 100%;
  }

  .sm-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .sm-modal {
    max-width: none;
    max-height: 85dvh;
    padding: 23px 18px
      calc(25px + env(safe-area-inset-bottom));
    border-radius: 25px 25px 0 0;
  }

  .sm-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-around;

    height: calc(68px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);

    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--sm-border);
    box-shadow: 0 -5px 24px rgba(20, 50, 40, 0.07);
    backdrop-filter: blur(16px);
  }

  .sm-bottom-nav button {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 52px;
    padding: 6px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #75867b;
    font-size: 11px;
    font-weight: 600;
  }

  .sm-bottom-nav button.active {
    background: #eaf5ee;
    color: var(--sm-green);
  }
}

/* HAJZORA brand refinements */
.sm-page .sm-header {border-top:4px solid #f4b860;}
.sm-page .sm-brand-icon {background:linear-gradient(145deg,#0f2d2a,#10b981);box-shadow:0 5px 15px #0f2d2a22;}
.sm-page .sm-heading {padding:24px;border-radius:22px;background:linear-gradient(125deg,#0f2d2a,#155749);color:white;}
.sm-page .sm-heading .sm-eyebrow {color:#f4b860;}
.sm-page .sm-heading p {color:#d6e9df;}
.sm-page .sm-add-button,.sm-page .sm-primary-button {background:#10b981;color:#092f27;}
.sm-page .sm-add-button:hover,.sm-page .sm-primary-button:hover {background:#34d399;}
.sm-page button:focus-visible,.sm-page a:focus-visible,.sm-page input:focus-visible {outline:3px solid #f4b860;outline-offset:3px;}
@media(max-width:700px){.sm-page .sm-heading{padding:20px 17px;}}

/* Keep save/error messages visible even when the button that triggered them is far down the page. */
.sm-alert { position: sticky; top: 76px; z-index: 60; box-shadow: 0 8px 24px rgba(20, 50, 40, 0.12); }
@media (max-width: 700px) { .sm-alert { top: 10px; } }

/* Rename / delete staff */
.sm-staff-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-secondary-button { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border: 1px solid #dfe8e3; border-radius: 12px; background: #fff; color: #17352c; font: inherit; font-weight: 700; cursor: pointer; }
.sm-secondary-button:disabled { opacity: .55; cursor: not-allowed; }
.sm-danger-text { color: #b4332b; border-color: #f0d6d3; }
@media (max-width: 700px) { .sm-selected-header { flex-wrap: wrap; gap: 12px; } }

/* ==========================================
   STAFF CALENDAR
   Mobile-first design
========================================== */

.sc-page {
  --sc-green: #10b981;
  --sc-dark: #0f2d2a;
  --sc-muted: #78877f;
  --sc-border: #e5ebe6;
  --sc-background: #f8faf7;

  min-height: 100vh;
  background: var(--sc-background);
  color: var(--sc-dark);
  font-family: inherit;
}

.sc-page *,
.sc-page *::before,
.sc-page *::after {
  box-sizing: border-box;
}

.sc-page button,
.sc-page select,
.sc-page input {
  font: inherit;
}

.sc-page button {
  cursor: pointer;
}

.sc-header {
  background: white;
  border-bottom: 1px solid var(--sc-border);
}

.sc-header-inner {
  max-width: 1150px;
  margin: auto;
  padding: 18px 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sc-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  color: var(--sc-dark);
  font-weight: 800;
  text-decoration: none;
}

.sc-brand-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;
  background: var(--sc-green);
  color: white;
}

.sc-desktop-nav {
  display: flex;
  align-items: center;
  gap: 25px;
}

.sc-desktop-nav a {
  text-decoration: none;
  color: var(--sc-muted);
  font-size: 14px;
  font-weight: 600;
}

.sc-desktop-nav .sc-nav-active {
  color: var(--sc-green);
}

.sc-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.sc-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.sc-eyebrow {
  display: block;
  margin-bottom: 6px;

  color: var(--sc-green);
  font-size: 12px;
  font-weight: 800;
}

.sc-heading h1 {
  margin: 0;
  font-size: 29px;
  letter-spacing: -0.5px;
}

.sc-heading p {
  margin: 8px 0 0;
  color: var(--sc-muted);
  font-size: 14px;
}

.sc-refresh,
.sc-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;

  width: 43px;
  height: 43px;

  border: 1px solid var(--sc-border);
  border-radius: 13px;
  background: white;
  color: var(--sc-dark);
}

.sc-refresh:disabled {
  opacity: 0.5;
  cursor: wait;
}

.sc-date-card,
.sc-filter-card,
.sc-summary-card,
.sc-appointment-card {
  background: white;
  border: 1px solid var(--sc-border);
  box-shadow: 0 4px 20px rgba(20, 50, 35, 0.035);
}

.sc-date-card {
  border-radius: 21px;
  padding: 22px;
  margin-bottom: 15px;
}

.sc-date-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sc-current-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.sc-current-date span {
  color: var(--sc-green);
  font-size: 12px;
  font-weight: 700;
}

.sc-current-date strong {
  font-size: 19px;
}

.sc-date-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--sc-border);
}

.sc-date-input {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 9px 13px;
  border: 1px solid var(--sc-border);
  border-radius: 11px;
  color: var(--sc-green);
}

.sc-date-input input {
  max-width: 155px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sc-dark);
}

.sc-today-button {
  padding: 11px 14px;
  border: 0;
  border-radius: 11px;
  background: #eaf5ee;
  color: var(--sc-green);
  font-size: 13px;
  font-weight: 700;
}

.sc-filter-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 16px 20px;
  margin-bottom: 18px;
  border-radius: 17px;
}

.sc-filter-label {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;

  color: var(--sc-dark);
  font-size: 14px;
  font-weight: 700;
}

.sc-filter-label svg {
  color: var(--sc-green);
}

.sc-filter-card select {
  width: 100%;
  max-width: 240px;
  min-width: 0;
  padding: 11px 13px;

  border: 1px solid var(--sc-border);
  border-radius: 11px;
  outline-color: var(--sc-green);
  background: white;
  color: var(--sc-dark);
}

.sc-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 32px;
}

.sc-summary-card {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 20px;
  border-radius: 17px;
}

.sc-summary-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;

  width: 46px;
  height: 46px;
  border-radius: 14px;

  background: #eaf5ee;
  color: var(--sc-green);
}

.sc-summary-card > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.sc-summary-card > div > span {
  color: var(--sc-muted);
  font-size: 12px;
}

.sc-summary-card strong {
  font-size: 25px;
}

.sc-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
}

.sc-section-heading h2 {
  margin: 0;
  font-size: 22px;
}

.sc-count {
  padding: 7px 12px;
  border-radius: 20px;
  background: #eaf5ee;
  color: var(--sc-green);
  font-size: 12px;
  font-weight: 700;
}

.sc-appointment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sc-appointment-card {
  display: flex;
  align-items: center;
  gap: 18px;

  padding: 17px;
  border-radius: 18px;
}

.sc-time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;

  width: 91px;
  min-height: 92px;
  padding: 12px 7px;

  border-radius: 13px;
  background: #eef5f0;
  color: var(--sc-green);
}

.sc-time-box strong {
  font-size: 19px;
  direction: ltr;
}

.sc-time-box small {
  font-size: 12px;
  direction: ltr;
}

.sc-appointment-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}

.sc-appointment-info > strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}

.sc-appointment-info > span {
  color: var(--sc-muted);
  font-size: 13px;
}

.sc-appointment-info small {
  display: flex;
  align-items: center;
  gap: 5px;

  color: var(--sc-green);
  font-size: 12px;
}

.sc-card-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sc-call-button {
  display: grid;
  place-items: center;

  width: 39px;
  height: 39px;

  border: 1px solid #d9e8de;
  border-radius: 11px;
  background: #eff8f1;
  color: var(--sc-green);
  text-decoration: none;
}

.sc-details-button {
  padding: 11px 14px;
  border: 0;
  border-radius: 11px;
  background: var(--sc-green);
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.sc-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 230px;
  padding: 25px;
  border: 1px dashed #d7e4da;
  border-radius: 19px;

  background: white;
  color: var(--sc-muted);
  text-align: center;
}

.sc-message strong {
  color: var(--sc-dark);
}

.sc-message p {
  margin: 0;
  line-height: 1.7;
}

.sc-message button {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--sc-green);
  color: white;
  font-weight: 700;
}

.sc-empty svg {
  color: var(--sc-green);
}

.sc-error {
  border-color: #f1c5c5;
  color: #a63b3b;
}

.sc-loader {
  width: 28px;
  height: 28px;
  border: 3px solid #dceae0;
  border-top-color: var(--sc-green);
  border-radius: 50%;
  animation: sc-spin 0.8s linear infinite;
}

.sc-spinning {
  animation: sc-spin 0.8s linear infinite;
}

@keyframes sc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Bottom navigation */

.sc-bottom-nav {
  display: none;
}

/* Menus and details */

.sc-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 18px;
  background: rgba(14, 32, 25, 0.48);
}

.sc-sheet {
  width: 100%;
  max-width: 460px;
  max-height: 85dvh;
  overflow-y: auto;

  padding: 23px;
  border-radius: 23px;
  background: white;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.12);
}

.sc-sheet-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sc-border);
}

.sc-sheet-heading h2 {
  margin: 0;
  font-size: 20px;
}

.sc-sheet-heading button {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;
  background: #f0f3f0;
  color: var(--sc-dark);
}

.sc-sheet > button {
  display: flex;
  align-items: center;
  gap: 13px;

  width: 100%;
  padding: 15px 8px;

  border: 0;
  background: transparent;
  color: var(--sc-dark);
  text-align: right;
  font-weight: 600;
}

.sc-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;

  padding: 15px 0;
  border-bottom: 1px solid var(--sc-border);
}

.sc-detail-row span {
  color: var(--sc-muted);
  font-size: 13px;
}

.sc-detail-row strong {
  font-size: 14px;
  text-align: left;
}

.sc-detail-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-top: 23px;
  padding: 14px;
  border-radius: 12px;

  background: var(--sc-green);
  color: white;
  text-decoration: none;
  font-weight: 700;
}

/* Mobile */

@media (max-width: 700px) {
  .sc-header {
    display: none;
  }

  .sc-container {
    padding: 25px 14px
      calc(100px + env(safe-area-inset-bottom));
  }

  .sc-heading {
    margin-bottom: 22px;
  }

  .sc-heading h1 {
    font-size: 25px;
  }

  .sc-heading p {
    font-size: 12px;
  }

  .sc-date-card {
    padding: 17px 13px;
  }

  .sc-current-date strong {
    font-size: 15px;
  }

  .sc-arrow {
    width: 38px;
    height: 38px;
  }

  .sc-filter-card {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .sc-filter-card select {
    max-width: none;
  }

  .sc-summary {
    gap: 10px;
    margin-bottom: 28px;
  }

  .sc-summary-card {
    gap: 10px;
    padding: 14px 11px;
  }

  .sc-summary-icon {
    width: 36px;
    height: 36px;
  }

  .sc-summary-card > div > span {
    font-size: 11px;
  }

  .sc-summary-card strong {
    font-size: 23px;
  }

  .sc-appointment-card {
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px;
  }

  .sc-time-box {
    width: 72px;
    min-height: 80px;
  }

  .sc-time-box strong {
    font-size: 16px;
  }

  .sc-appointment-info > strong {
    font-size: 15px;
  }

  .sc-card-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: 9px;
    border-top: 1px solid var(--sc-border);
  }

  .sc-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    display: flex;
    justify-content: space-around;
    align-items: center;

    height: calc(68px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);

    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--sc-border);
    box-shadow: 0 -5px 24px rgba(20, 50, 40, 0.07);
    backdrop-filter: blur(16px);
  }

  .sc-bottom-nav button {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 0;
    min-height: 52px;
    padding: 6px;

    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #75867b;

    font-size: 11px;
    font-weight: 600;
  }

  .sc-bottom-nav button.active {
    background: #eaf5ee;
    color: var(--sc-green);
  }

  .sc-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .sc-sheet {
    max-width: none;
    max-height: 85dvh;

    padding: 22px 18px
      calc(25px + env(safe-area-inset-bottom));

    border-radius: 25px 25px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-spinning,
  .sc-loader {
    animation: none;
  }
}

/* HAJZORA brand refinements */
.sc-page .sc-header {border-top: 4px solid #f4b860;}
.sc-page .sc-brand-icon {background:linear-gradient(145deg,#0f2d2a,#10b981);box-shadow:0 5px 15px #0f2d2a22;}
.sc-page .sc-heading {padding:24px;border-radius:22px;background:linear-gradient(125deg,#0f2d2a,#155749);color:#fff;}
.sc-page .sc-heading h1,.sc-page .sc-heading .sc-eyebrow {color:#fff;}
.sc-page .sc-heading .sc-eyebrow {color:#f4b860;}
.sc-page .sc-heading p {color:#d6e9df;}
.sc-page .sc-heading .sc-refresh {background:#ffffff18;border-color:#ffffff40;color:white;}
.sc-page .sc-details-button,.sc-page .sc-detail-call,.sc-page .sc-message button {background:#0f7660;}
.sc-page button:focus-visible,.sc-page a:focus-visible,.sc-page select:focus-visible {outline:3px solid #f4b860;outline-offset:3px;}
@media(max-width:700px){.sc-page .sc-heading{padding:20px 17px;}}

/* Manual WhatsApp appointment reminder */
.whatsapp-reminder-button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 8px; background: #147d4a; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.whatsapp-reminder-button:hover { background: #0f653b; color: #fff; }
.hz-language-switcher{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(15,45,42,.12);background:rgba(255,255,255,.94);border-radius:14px;box-shadow:0 4px 16px rgba(15,45,42,.08);direction:ltr;white-space:nowrap}
.hz-language-button{appearance:none;border:0;background:transparent;color:#49625f;font:inherit;font-size:12px;font-weight:700;line-height:1;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.hz-language-button:hover{background:#eef6f2;color:#123c36}.hz-language-button:focus-visible{outline:2px solid #3c8f7b;outline-offset:2px}.hz-language-button.is-active{background:#123c36;color:#fff;box-shadow:0 3px 10px rgba(18,60,54,.2)}.hz-language-button:active{transform:translateY(1px)}
.hz-global-language{position:fixed;z-index:9999;top:12px;inset-inline-end:12px}.hz-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
[dir=ltr] .hz-page{direction:ltr}[dir=ltr] .hz-page .hz-hero-grid,[dir=ltr] .hz-page .hz-how-grid{direction:ltr}[dir=ltr] .hz-page .hz-hero-copy,[dir=ltr] .hz-page .hz-section-heading{text-align:left}[dir=ltr] .hz-page .hz-header-inner{direction:ltr}
@media(max-width:640px){.hz-language-switcher{gap:2px;padding:3px;border-radius:12px}.hz-language-button{font-size:11px;padding:7px 8px}.hz-global-language{top:8px;inset-inline-end:8px}}



/*
 * Global styles
 * Cleaned and organized for readability.
 *
 * Selectors, class names, declarations and rule order are preserved.
 * This keeps the existing design and CSS cascade intact.
 */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    font-family: "Cairo", sans-serif;
    direction: rtl;
    color: #111827;
    background: #f5f7fb;
}

body {
    min-width: 320px;
    min-height: 100vh;
}

button,
input {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.login-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at top right,
            rgba(99, 102, 241, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(16, 185, 129, 0.08),
            transparent 32%
        ),
        #f8fafc;

    position: relative;
    overflow: hidden;
}

.login-background-decoration {
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    filter: blur(80px);

    opacity: 0.3;
}

.decoration-one {
    top: -150px;
    right: -100px;

    background: #6366f1;
}

.decoration-two {
    bottom: -150px;
    left: -100px;

    background: #10b981;
}

.login-card {
    width: 100%;
    max-width: 440px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid #e5e7eb;

    border-radius: 24px;

    padding: 42px;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.09);

    position: relative;
    z-index: 2;
}

.login-logo {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    border-radius: 18px;

    background: #111827;
    color: white;
}

.login-heading {
    text-align: center;
    margin-bottom: 32px;
}

.login-heading h1 {
    font-size: 28px;
    font-weight: 800;

    color: #111827;

    margin-bottom: 7px;
}

.login-heading p {
    color: #6b7280;
    font-size: 14px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;

    color: #374151;
}

.input-wrapper {
    height: 52px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 0 15px;

    background: #f9fafb;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    transition: 0.2s;
}

.input-wrapper:focus-within {
    border-color: #6366f1;

    background: white;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.08);
}

.input-wrapper svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.input-wrapper input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #111827;

    font-size: 14px;
}

.input-wrapper input::placeholder {
    color: #9ca3af;
}

.primary-button {
    height: 52px;

    border: none;
    border-radius: 12px;

    background: #111827;
    color: white;

    font-size: 15px;
    font-weight: 700;

    transition:
        transform 0.15s,
        background 0.15s;
}

.primary-button:hover:not(:disabled) {
    background: #1f2937;
    transform: translateY(-1px);
}

.primary-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.error-message {
    padding: 12px 14px;

    background: #fef2f2;
    color: #b91c1c;

    border: 1px solid #fecaca;
    border-radius: 10px;

    font-size: 13px;
}

.login-footer {
    margin-top: 28px;

    text-align: center;

    color: #9ca3af;

    font-size: 12px;
}

.dashboard-placeholder {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: #f8fafc;
}

.placeholder-card {
    width: 100%;
    max-width: 600px;

    padding: 40px;

    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 20px;

    box-shadow:
        0 15px 50px rgba(15, 23, 42, 0.06);

    text-align: center;
}

.placeholder-card h1 {
    margin: 15px 0 10px;

    font-size: 28px;
}

.placeholder-card p {
    color: #6b7280;

    margin-bottom: 8px;
}

.badge {
    display: inline-block;

    padding: 6px 11px;

    background: #eef2ff;
    color: #4338ca;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    direction: ltr;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 20px;

    padding: 11px 18px;

    background: white;
    color: #dc2626;

    border: 1px solid #fecaca;
    border-radius: 10px;

    font-weight: 600;
}

.logout-button:hover {
    background: #fef2f2;
}

@media (max-width: 520px) {
    .login-page {
        padding: 16px;
    }

    .login-card {
        padding: 30px 22px;

        border-radius: 20px;
    }

    .login-heading h1 {
        font-size: 24px;
    }
}
/* =========================
   Admin Dashboard
========================= */

.admin-layout {
    min-height: 100vh;
    display: flex;
    background: #f5f7fb;
}

.admin-sidebar {
    width: 260px;
    min-height: 100vh;

    background: #111827;
    color: white;

    padding: 24px 18px;

    display: flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    z-index: 20;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 4px 8px 26px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo {
    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: white;
    color: #111827;

    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-brand div:last-child {
    display: flex;
    flex-direction: column;
}

.sidebar-brand strong {
    font-size: 15px;
}

.sidebar-brand span {
    color: #9ca3af;
    font-size: 11px;
}

.sidebar-nav {
    padding-top: 25px;
    flex: 1;
}

.sidebar-link {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 11px;

    border: none;
    border-radius: 11px;

    padding: 12px 14px;

    background: transparent;
    color: #9ca3af;

    font-size: 14px;
    font-weight: 600;

    text-align: right;
}

.sidebar-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;

    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;

    background: transparent;
    color: #fca5a5;

    font-weight: 600;
}

.sidebar-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.admin-main {
    width: calc(100% - 260px);

    margin-right: 260px;

    padding: 38px;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 30px;
}

.admin-header .eyebrow {
    color: #6366f1;
    font-size: 12px;
    font-weight: 800;

    margin-bottom: 5px;
}

.admin-header h1 {
    font-size: 30px;
    font-weight: 800;

    margin-bottom: 5px;

    color: #111827;
}

.admin-header > div > p:last-child {
    color: #6b7280;
    font-size: 14px;
}

.add-business-button {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 18px;

    border: none;
    border-radius: 11px;

    background: #111827;
    color: white;

    font-weight: 700;
}

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 26px;
}

.stat-card {
    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    padding: 22px;

    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #eef2ff;
    color: #4f46e5;
}

.active-stat {
    background: #ecfdf5;
    color: #059669;
}

.inactive-stat {
    background: #fef2f2;
    color: #dc2626;
}

.stat-card > div:last-child {
    display: flex;
    flex-direction: column;
}

.stat-card span {
    color: #6b7280;
    font-size: 12px;
}

.stat-card strong {
    color: #111827;
    font-size: 25px;
}

.business-section {
    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    overflow: hidden;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 24px;

    border-bottom: 1px solid #e5e7eb;
}

.section-heading h2 {
    font-size: 18px;
    margin-bottom: 3px;
}

.section-heading p {
    font-size: 12px;
    color: #6b7280;
}

.refresh-button {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 9px 13px;

    border: 1px solid #e5e7eb;
    border-radius: 9px;

    background: white;
    color: #374151;

    font-weight: 600;
}

.business-table-wrapper {
    overflow-x: auto;
}

.business-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 900px;
}

.business-table th {
    padding: 13px 20px;

    background: #f9fafb;

    color: #6b7280;

    font-size: 11px;
    font-weight: 700;

    text-align: right;
}

.business-table td {
    padding: 17px 20px;

    border-top: 1px solid #f1f5f9;

    font-size: 13px;
}

.business-name-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.business-avatar {
    width: 38px;
    height: 38px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #111827;
    color: white;

    font-weight: 800;
}

.business-name-cell > div:last-child,
.owner-cell {
    display: flex;
    flex-direction: column;
}

.business-name-cell span,
.owner-cell span {
    color: #9ca3af;
    font-size: 11px;
    direction: ltr;
}

.owner-cell strong {
    direction: ltr;
    font-size: 12px;
}

.status-badge {
    display: inline-flex;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.status-active {
    background: #ecfdf5;
    color: #047857;
}

.status-inactive {
    background: #fef2f2;
    color: #b91c1c;
}

.copy-link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    border: 1px solid #e5e7eb;
    border-radius: 8px;

    padding: 8px 10px;

    background: white;

    font-size: 11px;
    font-weight: 700;

    color: #374151;
}

.status-action {
    border: none;
    border-radius: 8px;

    padding: 8px 11px;

    font-size: 11px;
    font-weight: 800;
}

.deactivate-action {
    background: #fef2f2;
    color: #b91c1c;
}

.activate-action {
    background: #ecfdf5;
    color: #047857;
}

.table-state,
.empty-businesses {
    padding: 70px 20px;

    text-align: center;

    color: #6b7280;
}

.empty-businesses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.empty-businesses h3 {
    color: #111827;
    margin-top: 5px;
}

.dashboard-error {
    margin: 18px 24px 0;

    padding: 12px 14px;

    border: 1px solid #fecaca;
    border-radius: 10px;

    background: #fef2f2;
    color: #b91c1c;

    font-size: 13px;
}

/* =========================
   Modal
========================= */

.modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 100;

    background: rgba(15, 23, 42, 0.55);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.business-modal {
    width: 100%;
    max-width: 700px;

    max-height: 90vh;
    overflow-y: auto;

    background: white;

    border-radius: 20px;

    padding: 25px;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.25);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 25px;
}

.modal-header h2 {
    font-size: 21px;
    margin-bottom: 4px;
}

.modal-header p {
    font-size: 12px;
    color: #6b7280;
}

.close-modal-button {
    width: 36px;
    height: 36px;

    border: 1px solid #e5e7eb;
    border-radius: 9px;

    background: white;

    display: flex;
    align-items: center;
    justify-content: center;
}

.business-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 17px;
}

.business-form input,
.business-form select {
    width: 100%;
    height: 47px;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    padding: 0 13px;

    outline: none;

    background: #f9fafb;
}

.business-form input:focus,
.business-form select:focus {
    border-color: #6366f1;

    background: white;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.07);
}

.modal-divider {
    height: 1px;
    background: #e5e7eb;
}

.owner-form-title {
    font-size: 15px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding-top: 5px;
}

.secondary-button {
    height: 45px;

    padding: 0 20px;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: white;

    font-weight: 700;
}

.modal-submit {
    height: 45px;
    padding: 0 22px;
}

/* =========================
   Responsive
========================= */

@media (max-width: 900px) {
    .admin-sidebar {
        width: 80px;
        padding: 22px 12px;
    }

    .sidebar-brand {
        justify-content: center;
    }

    .sidebar-brand > div:last-child,
    .sidebar-link {
        font-size: 0;
    }

    .sidebar-link {
        justify-content: center;
    }

    .sidebar-link svg {
        width: 20px;
        height: 20px;
    }

    .sidebar-logout {
        font-size: 0;
    }

    .admin-main {
        margin-right: 80px;
        width: calc(100% - 80px);

        padding: 25px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .admin-sidebar {
        display: none;
    }

    .admin-main {
        width: 100%;
        margin-right: 0;

        padding: 18px;
    }

    .admin-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .add-business-button {
        width: 100%;
        justify-content: center;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .business-modal {
        padding: 20px;
    }
}
/* =========================
   Owner Dashboard
========================= */

.owner-layout {
    min-height: 100vh;
    display: flex;
    background: #f5f7fb;
}

.owner-sidebar {
    width: 260px;
    min-height: 100vh;

    background: #111827;
    color: white;

    padding: 24px 18px;

    display: flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    z-index: 20;
}

.owner-main {
    width: calc(100% - 260px);
    margin-right: 260px;

    padding: 38px;
}

.owner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 28px;
}

.owner-header .eyebrow {
    color: #6366f1;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
}

.owner-header h1 {
    font-size: 30px;
    margin-bottom: 4px;
}

.owner-header > div > p:last-child {
    color: #6b7280;
    font-size: 13px;
}

.copy-owner-link {
    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    background: white;
    color: #374151;

    padding: 11px 15px;

    font-weight: 700;
}

.owner-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 17px;

    margin-bottom: 20px;
}

.owner-summary-card {
    min-height: 105px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 20px;

    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.owner-summary-card > svg {
    width: 44px;
    height: 44px;

    padding: 11px;

    background: #eef2ff;
    color: #4f46e5;

    border-radius: 12px;
}

.owner-summary-card > div {
    display: flex;
    flex-direction: column;
}

.owner-summary-card span {
    font-size: 11px;
    color: #6b7280;
}

.owner-summary-card strong {
    font-size: 14px;
    color: #111827;
}

.owner-actions {
    display: flex;
    gap: 11px;

    margin-bottom: 20px;
}

.owner-primary-action,
.owner-secondary-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 11px 15px;

    border-radius: 10px;

    font-weight: 700;
}

.owner-primary-action {
    border: none;

    background: #111827;
    color: white;
}

.owner-primary-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.owner-secondary-action {
    border: 1px solid #e5e7eb;

    background: white;
    color: #374151;
}

.timeline-section {
    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    overflow: hidden;
}

.timeline-list {
    padding: 10px 20px 20px;
}

.timeline-row {
    min-height: 68px;

    display: grid;
    grid-template-columns:
        90px 1fr 80px 90px;

    align-items: center;
    gap: 15px;

    padding: 12px 14px;

    border-bottom: 1px solid #f1f5f9;
}

.timeline-row:last-child {
    border-bottom: none;
}

.timeline-time {
    font-weight: 800;
    direction: ltr;
}

.timeline-customer {
    display: flex;
    flex-direction: column;
}

.timeline-customer strong {
    font-size: 13px;
}

.timeline-customer span {
    font-size: 11px;
    color: #6b7280;
    direction: ltr;
    text-align: right;
}

.timeline-booked-label,
.timeline-available-label {
    width: max-content;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
}

.timeline-booked-label {
    background: #fef2f2;
    color: #b91c1c;
}

.timeline-available-label {
    background: #ecfdf5;
    color: #047857;
}

.timeline-available {
    color: #9ca3af;
    font-size: 13px;
}

.cancel-appointment-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 8px;

    border: 1px solid #fecaca;
    border-radius: 8px;

    background: white;
    color: #dc2626;

    font-size: 11px;
    font-weight: 700;
}

.owner-empty-state {
    min-height: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: #6b7280;
}

.owner-empty-state h3 {
    color: #111827;
    margin-top: 10px;
}

.owner-empty-state p {
    max-width: 350px;

    margin-top: 4px;

    font-size: 12px;
}

.small-modal {
    width: 100%;
    max-width: 500px;

    background: white;

    border-radius: 20px;

    padding: 25px;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.25);
}

.owner-error {
    margin: 0 0 20px;
}

@media (max-width: 900px) {
    .owner-sidebar {
        width: 80px;
        padding: 22px 12px;
    }

    .owner-main {
        margin-right: 80px;
        width: calc(100% - 80px);

        padding: 25px;
    }

    .owner-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .owner-sidebar {
        display: none;
    }

    .owner-main {
        width: 100%;
        margin-right: 0;

        padding: 18px;
    }

    .owner-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .copy-owner-link {
        width: 100%;
        justify-content: center;
    }

    .owner-actions {
        flex-direction: column;
    }

    .timeline-row {
        grid-template-columns:
            65px 1fr;

        gap: 8px;
    }

    .timeline-booked-label,
    .timeline-available-label {
        display: none;
    }

    .cancel-appointment-button {
        grid-column: 2;
        width: max-content;
    }
}
.cancel-working-day-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 11px 15px;

    border: 1px solid #fecaca;
    border-radius: 10px;

    background: #fff;
    color: #dc2626;

    font-weight: 700;
}

.cancel-working-day-button:hover {
    background: #fef2f2;
}
/* =========================
   Public Booking Page
========================= */

.public-booking-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top right,
            rgba(99, 102, 241, 0.08),
            transparent 28%
        ),
        #f8fafc;

    padding: 35px 18px 50px;
}

.booking-container {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;
}

.booking-business-header {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 22px;
}

.booking-business-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #111827;
    color: white;

    border-radius: 17px;
}

.booking-business-header h1 {
    font-size: 27px;
    margin-bottom: 6px;
}

.booking-business-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    color: #6b7280;

    font-size: 12px;
}

.booking-business-details span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.booking-date-card {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px 18px;

    margin-bottom: 17px;

    background: #eef2ff;
    color: #4338ca;

    border-radius: 14px;
}

.booking-date-card > div {
    display: flex;
    flex-direction: column;
}

.booking-date-card span {
    font-size: 11px;
}

.booking-date-card strong {
    font-size: 14px;
}

.public-card {
    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    padding: 23px;

    margin-bottom: 17px;

    box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.04);
}

.public-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.public-section-heading h2 {
    font-size: 18px;
    margin-bottom: 3px;
}

.public-section-heading p {
    font-size: 11px;
    color: #6b7280;
}

.public-section-heading > svg {
    color: #6366f1;
}

.slots-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 24px;
}

.slot-button {
    height: 46px;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: #f9fafb;
    color: #374151;

    font-weight: 800;

    direction: ltr;

    transition: 0.15s;
}

.slot-button:hover {
    border-color: #6366f1;
    background: #eef2ff;
}

.slot-button.selected {
    border-color: #111827;

    background: #111827;
    color: white;
}

.public-booking-form {
    padding-top: 20px;

    border-top: 1px solid #f1f5f9;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.public-input-wrapper {
    min-height: 48px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 13px;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: #f9fafb;
}

.public-input-wrapper:focus-within {
    border-color: #6366f1;

    background: white;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.07);
}

.public-input-wrapper svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.public-input-wrapper input {
    width: 100%;

    min-height: 46px;

    border: none;
    outline: none;

    background: transparent;

    font-family: inherit;
}

.selected-slot-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 11px 13px;

    border-radius: 10px;

    background: #f9fafb;

    font-size: 12px;
}

.selected-slot-summary strong {
    direction: ltr;
    font-size: 15px;
}

.public-book-button {
    min-height: 50px;

    border: none;
    border-radius: 11px;

    background: #111827;
    color: white;

    font-weight: 800;
}

.public-book-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.booking-success-message {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px;

    background: #ecfdf5;
    color: #047857;

    border: 1px solid #a7f3d0;
    border-radius: 10px;
}

.booking-success-message > div {
    display: flex;
    flex-direction: column;
}

.booking-success-message strong {
    font-size: 13px;
}

.booking-success-message span {
    font-size: 11px;
}

.no-slots-state {
    min-height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: #6b7280;
}

.no-slots-state h3 {
    margin-top: 10px;
    color: #111827;
}

.no-slots-state p {
    max-width: 350px;

    margin-top: 4px;

    font-size: 11px;
}

.find-booking-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.find-booking-button {
    min-width: 130px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: none;
    border-radius: 10px;

    background: #111827;
    color: white;

    padding: 0 17px;

    font-weight: 700;
}

.found-appointment-card {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;
    gap: 14px;

    margin-top: 18px;

    padding: 16px;

    border: 1px solid #dbeafe;
    border-radius: 13px;

    background: #eff6ff;
}

.found-appointment-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: white;
    color: #2563eb;
}

.found-appointment-info {
    display: flex;
    flex-direction: column;
}

.found-appointment-info > span {
    color: #6b7280;
    font-size: 10px;
}

.found-appointment-info > strong {
    font-size: 13px;
}

.found-time {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 4px;

    color: #1d4ed8;

    font-weight: 800;
    direction: ltr;
}

.public-cancel-button {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 9px 12px;

    border: 1px solid #fecaca;
    border-radius: 9px;

    background: white;
    color: #dc2626;

    font-size: 11px;
    font-weight: 700;
}

.find-error-message,
.find-success-message {
    margin-top: 14px;

    padding: 11px 13px;

    border-radius: 9px;

    font-size: 12px;
}

.find-error-message {
    background: #fef2f2;
    color: #b91c1c;

    border: 1px solid #fecaca;
}

.find-success-message {
    background: #ecfdf5;
    color: #047857;

    border: 1px solid #a7f3d0;
}

.public-booking-footer {
    padding-top: 8px;

    text-align: center;

    color: #9ca3af;

    font-size: 11px;
}

.booking-loading-page,
.booking-unavailable-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: #f8fafc;
}

.booking-unavailable-card {
    width: 100%;
    max-width: 430px;

    padding: 35px;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    background: white;

    text-align: center;
}

.booking-unavailable-card svg {
    color: #9ca3af;
}

.booking-unavailable-card h1 {
    margin: 12px 0 5px;

    font-size: 22px;
}

.booking-unavailable-card p {
    color: #6b7280;
    font-size: 12px;
}

@media (max-width: 600px) {
    .public-booking-page {
        padding: 23px 13px 40px;
    }

    .booking-business-header h1 {
        font-size: 23px;
    }

    .slots-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .find-booking-form {
        grid-template-columns: 1fr;
    }

    .find-booking-button {
        min-height: 47px;
    }

    .found-appointment-card {
        grid-template-columns:
            auto 1fr;
    }

    .public-cancel-button {
        grid-column: 1 / -1;

        justify-content: center;
    }

    .public-card {
        padding: 18px;
    }
}
.working-days-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 20px;
}

.working-day-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;

    padding: 15px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    text-align: right;
}

.working-day-card strong {
    font-size: 13px;
    color: #111827;
}

.working-day-card span {
    font-size: 12px;
    color: #6b7280;
    direction: ltr;
}

.selected-working-day {
    border-color: #6366f1;
    background: #eef2ff;
}

@media (max-width: 700px) {
    .working-days-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   Booking Dates
========================= */

.booking-dates-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.booking-date-button {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 12px;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    background: #f9fafb;
    color: #374151;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    transition: 0.15s;
}

.booking-date-button:hover {
    border-color: #6366f1;

    background: #eef2ff;
}

.selected-date-button {
    border-color: #111827;

    background: #111827;
    color: white;
}

.selected-date-button:hover {
    background: #111827;
}

.selected-booking-summary {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.selected-booking-summary > div {
    padding: 12px;

    display: flex;
    flex-direction: column;

    border-radius: 10px;

    background: #f9fafb;
}

.selected-booking-summary span {
    color: #6b7280;

    font-size: 10px;
}

.selected-booking-summary strong {
    color: #111827;

    font-size: 13px;
}

.future-appointments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 18px;
}

.future-appointment-card {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 14px;

    padding: 16px;

    border: 1px solid #dbeafe;
    border-radius: 13px;

    background: #eff6ff;
}

@media (max-width: 600px) {
    .booking-dates-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .future-appointment-card {
        grid-template-columns:
            auto 1fr;
    }

    .future-appointment-card
    .public-cancel-button {
        grid-column: 1 / -1;

        justify-content: center;
    }
}

@media (max-width: 400px) {
    .booking-dates-grid {
        grid-template-columns: 1fr;
    }
}
.dashboard-panel {
    margin-bottom: 20px;
    padding: 22px;

    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 18px;
}

.panel-header h2 {
    font-size: 18px;
}

.panel-header p {
    margin-top: 3px;

    color: #6b7280;
    font-size: 12px;
}

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.service-card {
    padding: 16px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #f9fafb;
}

.service-card h3 {
    margin-bottom: 4px;

    font-size: 15px;
}

.service-card p {
    color: #6b7280;
    font-size: 12px;
}

.service-actions {
    display: flex;
    gap: 10px;

    margin-top: 13px;
}

.service-actions button {
    border: none;
    background: transparent;

    font-weight: 700;
    font-size: 11px;
}

.danger-text-button {
    color: #dc2626;
}

.success-text-button {
    color: #059669;
}

.owner-date-picker {
    display: flex;
    align-items: center;

    gap: 12px;
}

.owner-date-picker input {
    min-height: 43px;

    border: 1px solid #e5e7eb;
    border-radius: 9px;

    padding: 0 10px;
}

.periods-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.period-row {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    border: 1px solid #e5e7eb;
    border-radius: 10px;

    background: #f9fafb;
}

.period-row strong {
    flex: 1;

    direction: ltr;
    text-align: right;
}

.period-row button {
    border: none;
    background: transparent;

    color: #dc2626;
}

.blocked-row {
    background: #fef2f2;
    border-color: #fecaca;
}

.blocked-row button {
    color: #059669;
    font-weight: 700;
}

.compact-empty {
    min-height: 80px;
}

.appointments-table-wrapper {
    overflow-x: auto;
}

.appointments-table {
    width: 100%;

    border-collapse: collapse;
}

.appointments-table th,
.appointments-table td {
    padding: 13px;

    border-bottom: 1px solid #f1f5f9;

    text-align: right;

    font-size: 12px;
}

.appointments-table th {
    color: #6b7280;

    background: #f9fafb;
}

.appointment-phone {
    margin-top: 3px;

    color: #6b7280;

    font-size: 10px;
}

@media (max-width: 800px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .owner-date-picker {
        flex-wrap: wrap;
    }
}
/* =========================================
   New Booking Flow
========================================= */

.booking-business-heading {
    min-width: 0;
}

.public-step-label {
    display: inline-block;

    margin-bottom: 4px;

    color: #6366f1;

    font-size: 10px;
    font-weight: 800;
}

.booking-progress {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 17px;
}

.booking-progress-item {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    background: rgba(
        255,
        255,
        255,
        0.75
    );

    color: #9ca3af;

    font-size: 11px;
    font-weight: 700;
}

.booking-progress-item span {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f3f4f6;

    font-size: 10px;
}

.booking-progress-item.active {
    border-color: #c7d2fe;

    background: #eef2ff;

    color: #4338ca;
}

.booking-progress-item.active span {
    background: #6366f1;
    color: white;
}

.booking-progress-item.done {
    border-color: #d1fae5;

    background: #ecfdf5;

    color: #047857;
}

.booking-progress-item.done span {
    background: #10b981;
    color: white;
}

/* =========================================
   Services
========================================= */

.public-services-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 11px;
}

.public-service-card {
    width: 100%;

    min-height: 125px;

    display: flex;
    flex-direction: column;

    padding: 16px;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #f9fafb;

    text-align: right;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.public-service-card:hover {
    transform:
        translateY(-2px);

    border-color: #c7d2fe;

    background: white;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, 0.06);
}

.selected-service-card {
    border-color: #6366f1;

    background: #eef2ff;

    box-shadow:
        0 0 0 3px
        rgba(99, 102, 241, 0.08);
}

.selected-service-card:hover {
    background: #eef2ff;
}

.public-service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.public-service-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: white;

    color: #6366f1;

    box-shadow:
        0 4px 15px
        rgba(15, 23, 42, 0.05);
}

.service-selected-check {
    color: #4f46e5;
}

.public-service-card > strong {
    margin-bottom: 10px;

    color: #111827;

    font-size: 14px;
}

.public-service-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: auto;

    color: #6b7280;

    font-size: 11px;
}

.public-service-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.public-service-price {
    color: #111827 !important;

    font-size: 13px !important;
    font-weight: 800;
}

/* =========================================
   Selected Service Summary
========================================= */

.selected-service-summary {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 8px;

    margin-bottom: 20px;

    padding: 12px;

    border: 1px solid #e0e7ff;
    border-radius: 12px;

    background: #f8faff;
}

.selected-service-summary > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.selected-service-summary span {
    color: #6b7280;

    font-size: 9px;
}

.selected-service-summary strong {
    color: #111827;

    font-size: 12px;
}

/* =========================================
   Final Booking Summary
========================================= */

.booking-confirmation-card {
    border-color: #dbeafe;
}

.final-booking-summary {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;

    padding: 12px;

    border-radius: 12px;

    background: #f8fafc;
}

.final-booking-summary > div {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.final-booking-summary span {
    color: #6b7280;

    font-size: 9px;
}

.final-booking-summary strong {
    overflow: hidden;

    color: #111827;

    font-size: 11px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================
   Big Success
========================================= */

.booking-success-panel {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 17px;

    padding: 20px;

    border: 1px solid #a7f3d0;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #f0fdf4
        );
}

.booking-success-big-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 14px;

    background: white;
    color: #059669;

    box-shadow:
        0 8px 25px
        rgba(5, 150, 105, 0.1);
}

.booking-success-panel span {
    color: #059669;

    font-size: 10px;
    font-weight: 800;
}

.booking-success-panel h2 {
    margin: 2px 0 4px;

    color: #065f46;

    font-size: 17px;
}

.booking-success-panel p {
    color: #047857;

    font-size: 11px;
}

/* =========================================
   Found appointment improvements
========================================= */

.improved-future-card {
    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #f8fafc
        );
}

.found-appointment-info p {
    margin-top: 2px;

    color: #6b7280;

    font-size: 10px;
}

.found-appointment-meta {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 6px;
}

.found-appointment-meta span {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: #1d4ed8;

    font-size: 11px;
    font-weight: 700;
}

.public-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    color: #4f46e5;
}

.public-booking-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;
}

/* =========================================
   Mobile
========================================= */

@media (max-width: 600px) {
    .booking-progress-item {
        flex-direction: column;

        min-height: 54px;

        gap: 4px;

        font-size: 9px;
    }

    .public-services-grid {
        grid-template-columns: 1fr;
    }

    .public-service-card {
        min-height: 105px;
    }

    .selected-service-summary {
        grid-template-columns: 1fr 1fr;
    }

    .selected-service-summary > div:first-child {
        grid-column: 1 / -1;
    }

    .final-booking-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .booking-success-panel {
        align-items: flex-start;
    }
}

@media (max-width: 380px) {
    .booking-progress {
        gap: 5px;
    }

    .booking-progress-item {
        padding: 6px 3px;
    }
}
.admin-row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.edit-business-button {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 0 10px;

    border: 1px solid #dbeafe;
    border-radius: 8px;

    background: #eff6ff;
    color: #1d4ed8;

    font-size: 11px;
    font-weight: 700;
}

.edit-business-button:hover {
    background: #dbeafe;
}

.form-hint {
    display: block;

    margin-top: 5px;

    color: #9ca3af;

    font-size: 9px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .admin-row-actions {
        flex-direction: column;
        align-items: stretch;
    }
}
/* =========================================================
   MAW3ED LANDING PAGE
========================================================= */

html {
    scroll-behavior: smooth;
}

.landing-page {
    min-height: 100vh;
    background: #ffffff;
    color: #0f172a;
}

.landing-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* NAVBAR */

.landing-nav {
    height: 78px;
    display: flex;
    align-items: center;

    position: sticky;
    top: 0;
    z-index: 50;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);

    border-bottom: 1px solid #eef2f7;
}

.landing-nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #0f172a;
    text-decoration: none;
}

.landing-brand > div:last-child {
    display: flex;
    flex-direction: column;
}

.landing-brand strong {
    font-size: 19px;
    font-weight: 800;
}

.landing-brand span {
    color: #94a3b8;
    font-size: 9px;
}

.landing-logo {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #4f46e5;
    color: white;
}

.landing-logo.small {
    width: 36px;
    height: 36px;
}

.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 31px;
}

.landing-nav-links a {
    color: #64748b;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;
}

.landing-nav-links a:hover {
    color: #4f46e5;
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.landing-login-button,
.landing-start-button {
    padding: 10px 17px;
    border-radius: 9px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
}

.landing-login-button {
    color: #334155;
}

.landing-start-button {
    background: #4f46e5;
    color: white;
}

/* HERO */

.landing-hero {
    position: relative;
    overflow: hidden;

    padding: 100px 0 110px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(99,102,241,.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(14,165,233,.08),
            transparent 30%
        ),
        #fbfdff;
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 70px;
}

.landing-badge {
    width: max-content;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 12px;
    margin-bottom: 21px;

    border-radius: 100px;

    background: #eef2ff;
    color: #4f46e5;

    font-size: 11px;
    font-weight: 800;
}

.landing-hero-content h1 {
    max-width: 550px;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.16;
    letter-spacing: -2px;

    font-weight: 800;
}

.landing-hero-content h1 span {
    color: #4f46e5;
}

.landing-hero-content > p {
    max-width: 560px;

    margin-top: 22px;

    color: #64748b;

    font-size: 17px;
    line-height: 2;
}

.landing-hero-actions {
    display: flex;
    gap: 11px;

    margin-top: 31px;
}

.landing-main-cta,
.landing-whatsapp-cta {
    min-height: 51px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 21px;

    border-radius: 11px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
}

.landing-main-cta {
    border: none;

    background: #4f46e5;
    color: white;

    text-decoration: none;

    box-shadow: 0 12px 30px rgba(79,70,229,.22);
}

.landing-whatsapp-cta {
    border: 1px solid #e2e8f0;

    background: white;
    color: #334155;
}

.landing-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 24px;

    color: #64748b;

    font-size: 11px;
    font-weight: 600;
}

.landing-hero-points span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.landing-hero-points svg {
    color: #10b981;
}

/* DASHBOARD PREVIEW */

.landing-preview {
    position: relative;
}

.landing-preview::before {
    content: "";

    position: absolute;
    inset: 10% 5% -8%;

    background: #4f46e5;
    opacity: .09;

    filter: blur(55px);
}

.preview-window {
    position: relative;

    overflow: hidden;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: white;

    box-shadow:
        0 35px 90px rgba(15,23,42,.13);

    transform: perspective(1200px) rotateY(-3deg);
}

.preview-topbar {
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 16px;

    border-bottom: 1px solid #eef2f7;

    color: #94a3b8;
    font-size: 9px;
}

.preview-dots {
    display: flex;
    gap: 5px;
}

.preview-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: #cbd5e1;
}

.preview-body {
    min-height: 390px;

    display: flex;
}

.preview-sidebar {
    width: 67px;

    padding: 18px 13px;

    background: #111827;
}

.preview-sidebar-logo {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 29px;

    border-radius: 10px;

    background: #4f46e5;
    color: white;

    font-weight: 800;
}

.preview-menu {
    width: 35px;
    height: 8px;

    margin-bottom: 17px;

    border-radius: 5px;

    background: #334155;
}

.preview-menu.active {
    background: #818cf8;
}

.preview-content {
    flex: 1;

    padding: 23px;

    background: #f8fafc;
}

.preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-heading > div:first-child {
    display: flex;
    flex-direction: column;
}

.preview-heading small {
    color: #94a3b8;
    font-size: 8px;
}

.preview-heading strong {
    font-size: 16px;
}

.preview-avatar {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e0e7ff;
    color: #4f46e5;

    font-size: 11px;
    font-weight: 800;
}

.preview-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;

    margin-top: 22px;
}

.preview-stats > div {
    padding: 13px;

    display: flex;
    flex-direction: column;

    border: 1px solid #eef2f7;
    border-radius: 11px;

    background: white;
}

.preview-stats svg {
    width: 17px;
    height: 17px;

    margin-bottom: 12px;

    color: #6366f1;
}

.preview-stats span {
    color: #94a3b8;
    font-size: 7px;
}

.preview-stats strong {
    margin-top: 3px;
    font-size: 17px;
}

.preview-appointments {
    margin-top: 15px;
    padding: 16px;

    border: 1px solid #eef2f7;
    border-radius: 12px;

    background: white;
}

.preview-appointments > strong {
    font-size: 10px;
}

.preview-appointment {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 10px;

    padding: 10px 0;

    border-bottom: 1px solid #f1f5f9;
}

.preview-appointment:last-child {
    border-bottom: 0;
}

.preview-time {
    direction: ltr;

    color: #475569;

    font-size: 9px;
    font-weight: 800;
}

.preview-appointment > div {
    display: flex;
    flex-direction: column;
}

.preview-appointment > div strong {
    font-size: 9px;
}

.preview-appointment small {
    color: #94a3b8;
    font-size: 7px;
}

.preview-status {
    padding: 4px 7px;

    border-radius: 100px;

    background: #ecfdf5;
    color: #059669;

    font-size: 7px;
    font-weight: 800;
}

/* COMMON SECTIONS */

.landing-section,
.landing-how-section,
.landing-pricing-section {
    padding: 100px 0;
}

.landing-section-heading {
    max-width: 570px;

    margin: 0 auto 52px;

    text-align: center;
}

.landing-section-heading > span {
    color: #4f46e5;

    font-size: 11px;
    font-weight: 800;
}

.landing-section-heading h2 {
    margin-top: 8px;

    color: #0f172a;

    font-size: 34px;
    font-weight: 800;
}

.landing-section-heading p {
    margin-top: 10px;

    color: #64748b;

    font-size: 13px;
    line-height: 1.9;
}

/* FEATURES */

.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 17px;
}

.landing-feature-card {
    padding: 26px;

    border: 1px solid #e9eef5;
    border-radius: 16px;

    background: white;

    transition: .2s;
}

.landing-feature-card:hover {
    transform: translateY(-4px);

    border-color: #c7d2fe;

    box-shadow:
        0 18px 45px rgba(15,23,42,.07);
}

.landing-feature-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 12px;

    background: #eef2ff;
    color: #4f46e5;
}

.landing-feature-icon svg {
    width: 21px;
}

.landing-feature-card h3 {
    font-size: 16px;
}

.landing-feature-card p {
    margin-top: 8px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.9;
}

/* STEPS */

.landing-how-section {
    background: #f8fafc;
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.landing-step {
    position: relative;

    padding: 25px;

    border: 1px solid #e2e8f0;
    border-radius: 15px;

    background: white;
}

.landing-step > span {
    color: #c7d2fe;

    font-size: 28px;
    font-weight: 800;
}

.landing-step h3 {
    margin-top: 20px;
    font-size: 15px;
}

.landing-step p {
    margin-top: 7px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.8;
}

/* VIDEO */

.landing-video-placeholder {
    min-height: 460px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    background:
        radial-gradient(
            circle at center,
            rgba(99,102,241,.09),
            transparent 40%
        ),
        #0f172a;

    color: white;

    box-shadow:
        0 25px 70px rgba(15,23,42,.14);
}

.video-play-button {
    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 50%;

    background: #4f46e5;

    font-size: 22px;
}

.landing-video-placeholder strong {
    font-size: 18px;
}

.landing-video-placeholder span {
    margin-top: 6px;

    color: #94a3b8;

    font-size: 11px;
}

/* PRICING */

.landing-pricing-section {
    background: #f8fafc;
}

.landing-pricing-card {
    position: relative;

    width: min(430px,100%);

    margin: auto;
    padding: 38px;

    border: 1px solid #c7d2fe;
    border-radius: 22px;

    background: white;

    box-shadow:
        0 20px 60px rgba(79,70,229,.09);
}

.pricing-popular {
    position: absolute;
    top: -13px;
    right: 50%;

    transform: translateX(50%);

    padding: 6px 13px;

    border-radius: 100px;

    background: #4f46e5;
    color: white;

    font-size: 9px;
    font-weight: 800;
}

.landing-pricing-card h3 {
    text-align: center;

    font-size: 18px;
}

.pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;

    margin-top: 17px;
}

.pricing-price strong {
    font-size: 45px;
    line-height: 1;
}

.pricing-price span {
    color: #64748b;
    font-size: 11px;
}

.pricing-description {
    margin-top: 13px;

    text-align: center;

    color: #64748b;

    font-size: 11px;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin: 28px 0;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #334155;

    font-size: 12px;
}

.pricing-feature > div {
    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ecfdf5;
    color: #059669;
}

.pricing-subscribe-button,
.pricing-cash-button {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 10px;

    font-family: inherit;
    font-weight: 800;
}

.pricing-subscribe-button {
    border: none;

    background: #4f46e5;
    color: white;
}

.pricing-cash-button {
    margin-top: 9px;

    border: 1px solid #e2e8f0;

    background: white;
    color: #334155;
}

/* FINAL CTA */

.landing-final-cta {
    padding: 90px 0;
}

.final-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 55px;

    border-radius: 23px;

    background: #111827;
    color: white;
}

.final-cta-box h2 {
    font-size: 29px;
}

.final-cta-box p {
    margin-top: 8px;

    color: #94a3b8;

    font-size: 12px;
}

.final-cta-button {
    min-width: 145px;
    min-height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 20px;

    border-radius: 10px;

    background: #4f46e5;
    color: white;

    text-decoration: none;

    font-size: 12px;
    font-weight: 800;
}

/* FOOTER */

.landing-footer {
    padding: 30px 0;

    border-top: 1px solid #eef2f7;
}

.landing-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-footer-content > span {
    color: #94a3b8;
    font-size: 10px;
}

/* RESPONSIVE */

@media (max-width: 950px) {
    .landing-nav-links {
        display: none;
    }

    .landing-hero-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero-content {
        text-align: center;
    }

    .landing-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .landing-hero-content h1,
    .landing-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .landing-hero-actions,
    .landing-hero-points {
        justify-content: center;
    }

    .landing-preview {
        width: min(650px,100%);
        margin: auto;
    }

    .landing-features-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .landing-steps {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 600px) {
    .landing-container {
        width: min(100% - 26px,1180px);
    }

    .landing-nav {
        height: 68px;
    }

    .landing-brand span {
        display: none;
    }

    .landing-login-button {
        display: none;
    }

    .landing-hero {
        padding: 70px 0;
    }

    .landing-hero-content h1 {
        font-size: 39px;
        letter-spacing: -1px;
    }

    .landing-hero-content > p {
        font-size: 14px;
    }

    .landing-hero-actions {
        flex-direction: column;
    }

    .landing-main-cta,
    .landing-whatsapp-cta {
        width: 100%;
    }

    .preview-window {
        transform: none;
    }

    .preview-sidebar {
        display: none;
    }

    .preview-content {
        padding: 14px;
    }

    .preview-stats {
        grid-template-columns: 1fr;
    }

    .preview-stats > div {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .preview-stats svg {
        margin-bottom: 0;
    }

    .preview-appointment {
        grid-template-columns: 42px 1fr;
    }

    .preview-status {
        display: none;
    }

    .landing-section,
    .landing-how-section,
    .landing-pricing-section {
        padding: 70px 0;
    }

    .landing-section-heading {
        margin-bottom: 35px;
    }

    .landing-section-heading h2 {
        font-size: 27px;
    }

    .landing-features-grid,
    .landing-steps {
        grid-template-columns: 1fr;
    }

    .landing-video-placeholder {
        min-height: 280px;
    }

    .landing-pricing-card {
        padding: 31px 23px;
    }

    .final-cta-box {
        padding: 35px 24px;

        flex-direction: column;

        text-align: center;
    }

    .final-cta-box h2 {
        font-size: 24px;
    }

    .final-cta-button {
        width: 100%;
    }

    .landing-footer-content {
        flex-direction: column;
        gap: 17px;
    }
}
/* =========================================================
   PRICING PLANS
========================================================= */

.pricing-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 22px;

    max-width: 1120px;
    margin: 0 auto;
}

.pricing-plan-card {
    width: 100%;
    margin: 0;

    display: flex;
    flex-direction: column;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.pricing-plan-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 70px rgba(15, 23, 42, .10);
}

.pricing-plan-header {
    min-height: 130px;
    text-align: center;
}

.pricing-plan-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 11px;
    margin-bottom: 15px;

    border-radius: 100px;

    background: #f1f5f9;
    color: #475569;

    font-size: 10px;
    font-weight: 800;
}

.pricing-plan-header h3 {
    font-size: 19px;
}

.pricing-plan-header p {
    max-width: 280px;

    margin: 9px auto 0;

    color: #64748b;

    font-size: 11px;
    line-height: 1.8;
}

.pricing-small-note {
    min-height: 32px;

    margin-top: 9px;

    color: #94a3b8;

    text-align: center;

    font-size: 10px;
    font-weight: 600;
}

.pricing-saving-badge {
    position: absolute;
    top: 15px;
    left: 15px;

    padding: 5px 9px;

    border-radius: 100px;

    background: #ecfdf5;
    color: #059669;

    font-size: 9px;
    font-weight: 800;
}

.pricing-featured-plan {
    border: 2px solid #6366f1;

    transform: translateY(-10px);

    box-shadow:
        0 25px 70px rgba(79, 70, 229, .13);
}

.pricing-featured-plan:hover {
    transform: translateY(-17px);
}

.pricing-featured-plan .pricing-plan-label {
    background: #eef2ff;
    color: #4f46e5;
}

.pricing-extra-saving {
    position: absolute;
    top: 17px;
    left: 16px;

    padding: 5px 9px;

    border-radius: 100px;

    background: #ecfdf5;
    color: #059669;

    font-size: 9px;
    font-weight: 800;
}

.pricing-yearly-note {
    color: #4f46e5;
}

.pricing-plan-card .pricing-features {
    flex: 1;
}

.pricing-bottom-message {
    max-width: 620px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 40px auto 0;

    color: #64748b;

    font-size: 11px;
}

.pricing-bottom-message svg {
    color: #16a34a;
}

.pricing-bottom-message button {
    padding: 0;

    border: none;

    background: transparent;
    color: #4f46e5;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.pricing-bottom-message button:hover {
    text-decoration: underline;
}

@media (max-width: 950px) {
    .pricing-plans-grid {
        grid-template-columns: 1fr;

        max-width: 470px;
    }

    .pricing-featured-plan {
        transform: none;
    }

    .pricing-featured-plan:hover {
        transform: translateY(-7px);
    }
}

@media (max-width: 600px) {
    .pricing-plan-header {
        min-height: auto;
    }

    .pricing-bottom-message {
        flex-wrap: wrap;

        text-align: center;
        line-height: 1.7;
    }
}
/* =========================================================
   BUSINESS PROFILE MODAL - FINAL FIX
========================================================= */

.business-profile-modal {
    position: relative;

    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);

    margin: auto;
    padding: 28px;

    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 24px;

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.22);

    direction: rtl;
}

/* HEADER */

.business-profile-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 26px;
    padding-bottom: 18px;

    border-bottom: 1px solid #eef2f7;
}

.business-profile-modal .modal-header h2 {
    margin: 4px 0 0;

    color: #0f172a;

    font-size: 23px;
    font-weight: 800;
}

.modal-eyebrow {
    display: block;

    color: #4f46e5;

    font-size: 11px;
    font-weight: 800;
}

/* CLOSE BUTTON */

.business-profile-modal .close-modal-button {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #e2e8f0;
    border-radius: 11px;

    background: #f8fafc;
    color: #64748b;

    cursor: pointer;

    transition: 0.2s ease;
}

.business-profile-modal .close-modal-button:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* FORM */

.business-form {
    display: flex;
    flex-direction: column;
    gap: 18px;

    width: 100%;
}

.business-form .form-group {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 8px;

    margin: 0;
}

.business-form .form-group label {
    display: block;

    margin: 0;

    color: #334155;

    font-size: 13px;
    font-weight: 700;
}

/* INPUTS */

.business-form input,
.business-form textarea {
    box-sizing: border-box;

    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;

    padding: 13px 14px;

    border: 1px solid #dbe3ef;
    border-radius: 12px;

    outline: none;

    background: #ffffff;
    color: #0f172a;

    font-family: inherit;
    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.business-form input {
    min-height: 48px;
}

.business-form textarea {
    min-height: 115px;

    resize: vertical;

    line-height: 1.7;
}

.business-form input:focus,
.business-form textarea:focus {
    border-color: #6366f1;

    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.10);
}

.business-form input::placeholder,
.business-form textarea::placeholder {
    color: #94a3b8;
}

/* TWO COLUMNS */

.business-form-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* IMAGE PREVIEW */

.business-profile-preview {
    position: relative;

    width: 100%;
    min-height: 200px;

    overflow: hidden;

    display: flex;
    align-items: flex-end;

    box-sizing: border-box;

    padding: 22px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #eef2ff,
            #f8fafc
        );
}

.business-cover-preview {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.business-profile-preview::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(15, 23, 42, 0.78),
            rgba(15, 23, 42, 0.05)
        );
}

.business-logo-preview {
    position: relative;
    z-index: 2;

    width: 70px;
    height: 70px;

    flex-shrink: 0;

    margin-left: 14px;

    object-fit: cover;

    border: 3px solid #ffffff;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, 0.18);
}

.business-profile-preview strong {
    position: relative;
    z-index: 2;

    color: #ffffff;

    font-size: 19px;
    font-weight: 800;
}

/* SAVE BUTTON */

.business-form .primary-button {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 5px;

    border: none;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #6366f1
        );

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(79, 70, 229, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.business-form .primary-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 30px rgba(79, 70, 229, 0.24);
}

.business-form .primary-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 700px) {
    .business-profile-modal {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);

        padding: 20px;

        border-radius: 20px;
    }

    .business-form-grid {
        grid-template-columns: 1fr;
    }

    .business-profile-modal .modal-header h2 {
        font-size: 20px;
    }

    .business-profile-preview {
        min-height: 170px;
    }
}

/* SMALL PHONES */

@media (max-width: 420px) {
    .business-profile-modal {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);

        padding: 16px;

        border-radius: 18px;
    }

    .business-form {
        gap: 15px;
    }

    .business-form input,
    .business-form textarea {
        font-size: 16px;
    }

    .business-profile-modal .modal-header {
        margin-bottom: 20px;
    }
}

/* PUBLIC BOOKING PAGE - add at END of global.css */
.public-booking-page{min-height:100vh;direction:rtl;background:radial-gradient(circle at top right,rgba(99,102,241,.10),transparent 32rem),linear-gradient(180deg,#f8faff 0%,#f8fafc 42%,#f1f5f9 100%);color:#0f172a}
.booking-container{width:min(100% - 28px,980px);margin:0 auto;padding:32px 0 48px}
.booking-business-header{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:18px;margin-bottom:18px;padding:28px;border:1px solid rgba(226,232,240,.9);border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 24px 60px rgba(15,23,42,.08)}
.booking-business-icon{width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;box-shadow:0 12px 28px rgba(79,70,229,.25)}
.booking-business-heading{min-width:0;flex:1}.booking-business-title-row{display:flex;align-items:center;gap:12px}
.booking-business-logo{width:54px;height:54px;flex:0 0 54px;object-fit:cover;border:1px solid #e2e8f0;border-radius:16px;background:#fff}
.booking-availability-badge{display:inline-flex;margin-bottom:5px;padding:5px 9px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:11px;font-weight:800}
.booking-business-heading h1{margin:0;color:#0f172a;font-size:clamp(25px,4vw,36px);line-height:1.15;font-weight:900}
.booking-business-description{max-width:680px;margin:12px 0 0;color:#64748b;font-size:14px;line-height:1.8}
.booking-business-details{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:13px}.booking-business-details span{display:inline-flex;align-items:center;gap:6px;color:#64748b;font-size:13px;font-weight:650}
.booking-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px;padding:7px;border:1px solid #e2e8f0;border-radius:17px;background:rgba(255,255,255,.82)}
.booking-progress-item{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:12px;color:#94a3b8;font-size:12px;font-weight:800}.booking-progress-item span{width:25px;height:25px;display:grid;place-items:center;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:11px}
.booking-progress-item.active{background:#eef2ff;color:#4338ca}.booking-progress-item.active span{background:#4f46e5;color:#fff}.booking-progress-item.done{color:#047857}.booking-progress-item.done span{background:#d1fae5;color:#047857}
.public-card{margin-bottom:16px;padding:24px;border:1px solid #e2e8f0;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 12px 38px rgba(15,23,42,.055)}
.public-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.public-section-heading>svg{color:#6366f1}.public-step-label{display:block;margin-bottom:4px;color:#6366f1;font-size:11px;font-weight:900}.public-section-heading h2{margin:0;font-size:20px;font-weight:900}.public-section-heading p{margin:5px 0 0;color:#64748b;font-size:13px;line-height:1.65}
.public-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.public-service-card{min-width:0;min-height:148px;display:flex;flex-direction:column;align-items:stretch;text-align:right;padding:17px;border:1px solid #e2e8f0;border-radius:17px;background:#fff;color:#0f172a;font-family:inherit;cursor:pointer;transition:.18s ease}.public-service-card:hover{transform:translateY(-2px);border-color:#c7d2fe;box-shadow:0 12px 28px rgba(15,23,42,.08)}.public-service-card.selected-service-card{border-color:#6366f1;background:linear-gradient(180deg,#f5f3ff,#eef2ff);box-shadow:0 0 0 3px rgba(99,102,241,.10)}
.public-service-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.public-service-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:#eef2ff;color:#4f46e5}.service-selected-check{color:#4f46e5}.public-service-card>strong{font-size:15px;font-weight:900}.public-service-description{display:-webkit-box;overflow:hidden;margin:7px 0 0;color:#64748b;font-size:12px;line-height:1.6;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.public-service-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px}.public-service-meta span{display:inline-flex;align-items:center;gap:5px;color:#64748b;font-size:12px;font-weight:750}.public-service-meta .public-service-price{color:#0f172a;font-size:14px;font-weight:900}
.booking-dates-grid,.slots-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.booking-date-button,.slot-button{min-height:52px;padding:10px 11px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc;color:#334155;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer}.booking-date-button{display:flex;align-items:center;justify-content:center;gap:7px}.booking-date-button:hover,.slot-button:hover{border-color:#a5b4fc;background:#eef2ff;color:#4338ca}.booking-date-button.selected-date-button,.slot-button.selected{border-color:#4f46e5;background:#4f46e5;color:#fff;box-shadow:0 8px 20px rgba(79,70,229,.20)}
.selected-service-summary,.final-booking-summary{display:grid;gap:10px;margin-bottom:18px}.selected-service-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.final-booking-summary{grid-template-columns:repeat(4,minmax(0,1fr));padding:13px;border:1px solid #e0e7ff;border-radius:15px;background:#f8faff}.selected-service-summary>div,.final-booking-summary>div{padding:12px;border-radius:12px;background:#f8fafc}.selected-service-summary span,.final-booking-summary span{display:block;margin-bottom:3px;color:#94a3b8;font-size:10px;font-weight:750}.selected-service-summary strong,.final-booking-summary strong{font-size:13px;font-weight:900}
.public-booking-form{display:grid;gap:16px}.public-booking-form .form-group{display:grid;gap:7px;margin:0}.public-booking-form label{color:#334155;font-size:12px;font-weight:800}.public-input-wrapper{position:relative;display:flex;align-items:center}.public-input-wrapper>svg{position:absolute;right:14px;z-index:1;color:#94a3b8;pointer-events:none}.public-input-wrapper input{box-sizing:border-box;width:100%;min-height:50px;padding:11px 43px 11px 13px;border:1px solid #dbe3ef;border-radius:13px;outline:0;background:#fff;color:#0f172a;font-family:inherit;font-size:14px}.public-input-wrapper input:focus{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.10)}
.public-book-button,.find-booking-button{min-height:50px;border:0;border-radius:13px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;font-family:inherit;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(79,70,229,.18)}.public-book-button:disabled,.find-booking-button:disabled{opacity:.62;cursor:not-allowed}
.booking-success-panel{display:flex;align-items:flex-start;gap:15px;margin-bottom:16px;padding:21px;border:1px solid #a7f3d0;border-radius:20px;background:#ecfdf5;color:#065f46}.booking-success-big-icon{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:14px;background:#d1fae5}.booking-success-panel h2{margin:3px 0 4px;font-size:18px}.booking-success-panel p{margin:0;font-size:13px;line-height:1.7}
.find-booking-card{margin-top:24px}.find-booking-form{display:grid;grid-template-columns:1fr auto;gap:10px}.find-booking-button{min-width:145px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 17px}
.future-appointments-list{display:grid;gap:10px;margin-top:17px}.future-appointment-card.improved-future-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:16px;border:1px solid #dbeafe;border-radius:16px;background:#f8fbff}.found-appointment-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#dbeafe;color:#2563eb}.found-appointment-info>span{color:#64748b;font-size:10px;font-weight:800}.found-appointment-info>strong{display:block;margin-top:2px;font-size:14px}.found-appointment-info p{margin:4px 0;color:#64748b;font-size:12px}.found-appointment-meta{display:flex;flex-wrap:wrap;gap:9px}.found-appointment-meta span{display:inline-flex;align-items:center;gap:4px;color:#475569;font-size:11px;font-weight:750}
.public-cancel-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid #fecaca;border-radius:11px;background:#fff;color:#dc2626;font-family:inherit;font-size:11px;font-weight:850;cursor:pointer}
.no-slots-state{display:grid;place-items:center;min-height:150px;padding:24px;text-align:center;color:#94a3b8}.no-slots-state h3{margin:9px 0 3px;color:#334155;font-size:15px}.no-slots-state p{margin:0;color:#94a3b8;font-size:12px}.error-message,.find-error-message,.find-success-message{padding:11px 13px;border-radius:11px;font-size:12px;font-weight:750}.error-message,.find-error-message{background:#fef2f2;color:#b91c1c}.find-success-message{margin-top:12px;background:#ecfdf5;color:#047857}
.public-booking-footer{display:flex;align-items:center;justify-content:center;gap:5px;padding:14px;color:#94a3b8;font-size:11px}
.booking-loading-page,.booking-unavailable-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:#f8fafc}.public-loading-card,.booking-unavailable-card{width:min(100%,430px);display:grid;place-items:center;gap:12px;padding:34px;border:1px solid #e2e8f0;border-radius:22px;background:#fff;text-align:center;color:#475569;box-shadow:0 18px 50px rgba(15,23,42,.08)}
@media(max-width:760px){.booking-container{width:min(100% - 20px,980px);padding-top:12px}.booking-business-header{padding:20px;border-radius:21px}.booking-business-icon{width:49px;height:49px;flex-basis:49px}.public-card{padding:19px;border-radius:19px}.public-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-dates-grid,.slots-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.final-booking-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.booking-container{width:calc(100% - 16px)}.booking-business-header{gap:12px;padding:17px}.booking-business-icon{width:44px;height:44px;flex-basis:44px}.booking-business-heading h1{font-size:23px}.booking-business-details{flex-direction:column;gap:7px}.booking-progress{gap:3px;padding:5px}.booking-progress-item{flex-direction:column;gap:4px;padding:7px 3px;font-size:10px}.public-card{padding:16px}.public-services-grid{grid-template-columns:1fr}.booking-dates-grid,.slots-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.selected-service-summary{grid-template-columns:1fr}.find-booking-form{grid-template-columns:1fr}.find-booking-button{width:100%}.future-appointment-card.improved-future-card{grid-template-columns:auto 1fr}.future-appointment-card.improved-future-card .public-cancel-button{grid-column:1/-1;width:100%}.public-input-wrapper input{font-size:16px}}
@media(max-width:360px){.booking-dates-grid,.slots-grid,.final-booking-summary{grid-template-columns:1fr}}

/* =========================================================
   SUBSCRIPTION / ACCOUNT LOCK SCREEN
   ========================================================= */

.subscription-page {
  min-height: 100vh;
  width: 100%;
  padding: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.1),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(124, 58, 237, 0.08),
      transparent 30%
    ),
    #f8fafc;

  color: #111827;
  box-sizing: border-box;
}

/* =========================================================
   MAIN SHELL
   ========================================================= */

.subscription-shell {
  width: min(1180px, 100%);
  min-height: 680px;

  overflow: hidden;

  border: 1px solid #e5e7eb;
  border-radius: 24px;

  background: #ffffff;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.08),
    0 4px 14px rgba(15, 23, 42, 0.04);
}

/* =========================================================
   TOP BAR
   ========================================================= */

.subscription-topbar {
  min-height: 82px;
  padding: 16px 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  border-bottom: 1px solid #eef2f7;

  background: rgba(255, 255, 255, 0.96);
}

.subscription-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
}

.subscription-brand .sidebar-logo {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: linear-gradient(
    135deg,
    #2563eb,
    #4f46e5
  );

  color: #ffffff;

  box-shadow:
    0 8px 18px rgba(37, 99, 235, 0.2);
}

.subscription-brand > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.subscription-brand strong {
  max-width: 350px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 16px;
  font-weight: 800;

  color: #111827;
}

.subscription-brand span {
  font-size: 12px;
  font-weight: 500;

  color: #94a3b8;
}

/* =========================================================
   CONTENT
   ========================================================= */

.subscription-content {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 64px 32px 48px;
}

/* =========================================================
   HEADING
   ========================================================= */

.subscription-heading {
  max-width: 680px;
  margin: 0 auto 42px;

  text-align: center;
}

.subscription-badge {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 16px;
  padding: 7px 14px;

  border: 1px solid #fde68a;
  border-radius: 999px;

  background: #fffbeb;

  color: #b45309;

  font-size: 12px;
  font-weight: 800;
}

.subscription-heading h1 {
  margin: 0;

  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.04em;

  color: #0f172a;
}

.subscription-heading > p {
  max-width: 600px;

  margin: 16px auto 0;

  color: #64748b;

  font-size: 15px;
  line-height: 1.9;
}

.subscription-expired-date {
  width: fit-content;

  margin: 20px auto 0;
  padding: 10px 16px;

  border: 1px solid #fee2e2;
  border-radius: 10px;

  background: #fff7f7;

  color: #991b1b;

  font-size: 13px;
}

.subscription-expired-date strong {
  font-weight: 800;
}

/* =========================================================
   PLANS
   ========================================================= */

.subscription-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.subscription-plan-card {
  position: relative;

  min-width: 0;
  min-height: 290px;

  padding: 28px 24px 24px;

  display: flex;
  flex-direction: column;

  border: 1px solid #e2e8f0;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.035);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.subscription-plan-card:hover {
  transform: translateY(-4px);

  border-color: #cbd5e1;

  box-shadow:
    0 18px 35px rgba(15, 23, 42, 0.09);
}

.subscription-plan-card.recommended {
  border: 2px solid #2563eb;

  background:
    linear-gradient(
      180deg,
      rgba(239, 246, 255, 0.75),
      #ffffff 45%
    );

  box-shadow:
    0 16px 34px rgba(37, 99, 235, 0.12);
}

.recommended-label {
  position: absolute;
  top: -13px;
  right: 50%;

  transform: translateX(50%);

  padding: 6px 14px;

  border-radius: 999px;

  background: #2563eb;

  color: #ffffff;

  font-size: 11px;
  font-weight: 800;

  white-space: nowrap;

  box-shadow:
    0 6px 16px rgba(37, 99, 235, 0.25);
}

.plan-name {
  display: block;

  margin-bottom: 18px;

  color: #475569;

  font-size: 14px;
  font-weight: 800;
}

.plan-price {
  min-height: 54px;

  display: flex;
  align-items: flex-end;
  gap: 7px;

  margin-bottom: 20px;
}

.plan-price strong {
  color: #0f172a;

  font-size: 36px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.plan-price span {
  padding-bottom: 4px;

  color: #94a3b8;

  font-size: 12px;
  font-weight: 600;
}

.subscription-plan-card > p {
  flex: 1;

  margin: 0 0 22px;

  color: #64748b;

  font-size: 13px;
  line-height: 1.85;
}

.plan-saving,
.plan-saving-placeholder {
  min-height: 38px;

  padding: 9px 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  font-size: 12px;
  font-weight: 800;
}

.plan-saving {
  border: 1px solid #bbf7d0;

  background: #f0fdf4;

  color: #15803d;
}

.plan-saving-placeholder {
  border: 1px solid #e2e8f0;

  background: #f8fafc;

  color: #64748b;
}

/* =========================================================
   CONTACT BOX
   ========================================================= */

.subscription-contact-box {
  margin-top: 28px;
  padding: 22px 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  border: 1px solid #dbeafe;
  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #eff6ff,
      #f8fafc
    );
}

.subscription-contact-box > div {
  min-width: 0;
}

.subscription-contact-box strong {
  display: block;

  margin-bottom: 6px;

  color: #0f172a;

  font-size: 15px;
  font-weight: 800;
}

.subscription-contact-box p {
  margin: 0;

  color: #64748b;

  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   CONTACT BUTTON
   ========================================================= */

.subscription-contact-button {
  min-height: 44px;
  padding: 0 22px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: none;
  border-radius: 10px;

  background: #2563eb;

  color: #ffffff !important;

  font-family: inherit;
  font-size: 13px;
  font-weight: 800;

  text-decoration: none;
  cursor: pointer;

  box-shadow:
    0 7px 18px rgba(37, 99, 235, 0.2);

  transition:
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.subscription-contact-button:hover {
  background: #1d4ed8;

  transform: translateY(-1px);

  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.26);
}

.subscription-contact-button:active {
  transform: translateY(0);
}

/* =========================================================
   LOGOUT
   ========================================================= */

.subscription-logout-button {
  min-height: 42px;
  padding: 0 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border: 1px solid #e2e8f0;
  border-radius: 10px;

  background: #ffffff;

  color: #475569;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.subscription-logout-button:hover {
  border-color: #fecaca;

  background: #fff7f7;

  color: #dc2626;
}

.topbar-logout {
  flex-shrink: 0;
}

/* =========================================================
   DISABLED BUSINESS CARD
   ========================================================= */

.subscription-card {
  width: min(520px, 100%);

  padding: 48px 36px;

  display: flex;
  flex-direction: column;
  align-items: center;

  border: 1px solid #e5e7eb;
  border-radius: 22px;

  background: #ffffff;

  text-align: center;

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.09);
}

.subscription-icon {
  width: 68px;
  height: 68px;

  margin-bottom: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 20px;

  background: #fef2f2;

  color: #dc2626;

  font-size: 30px;
  font-weight: 900;
}

.subscription-card h1 {
  margin: 0;

  color: #0f172a;

  font-size: 28px;
  line-height: 1.25;
  font-weight: 900;
}

.subscription-card > p {
  max-width: 390px;

  margin: 14px auto 0;

  color: #64748b;

  font-size: 14px;
  line-height: 1.9;
}

.subscription-business-name {
  width: 100%;

  margin: 24px 0;
  padding: 14px 18px;

  border: 1px solid #e2e8f0;
  border-radius: 11px;

  background: #f8fafc;

  color: #334155;

  font-size: 14px;
  font-weight: 800;

  box-sizing: border-box;
}

.subscription-card .subscription-contact-button {
  width: 100%;
  margin-bottom: 10px;
}

.subscription-card .subscription-logout-button {
  width: 100%;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .subscription-page {
    padding: 16px;
  }

  .subscription-shell {
    border-radius: 20px;
  }

  .subscription-content {
    padding: 50px 22px 38px;
  }

  .subscription-plans {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .subscription-plan-card {
    min-height: auto;
  }

  .subscription-plan-card.recommended {
    margin-top: 8px;
  }

  .subscription-plan-card > p {
    flex: initial;
  }

  .subscription-contact-box {
    align-items: stretch;
    flex-direction: column;
  }

  .subscription-contact-button {
    width: 100%;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .subscription-page {
    min-height: 100dvh;
    padding: 0;

    align-items: stretch;

    background: #ffffff;
  }

  .subscription-shell {
    min-height: 100dvh;

    border: none;
    border-radius: 0;

    box-shadow: none;
  }

  .subscription-topbar {
    min-height: 70px;
    padding: 12px 16px;

    gap: 10px;
  }

  .subscription-brand {
    gap: 9px;
  }

  .subscription-brand .sidebar-logo {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    border-radius: 11px;
  }

  .subscription-brand strong {
    max-width: 155px;

    font-size: 13px;
  }

  .subscription-brand span {
    font-size: 10px;
  }

  .topbar-logout {
    min-height: 38px;
    padding: 0 11px;

    font-size: 0;
  }

  .topbar-logout svg {
    width: 18px;
    height: 18px;
  }

  .subscription-content {
    padding: 38px 16px 28px;
  }

  .subscription-heading {
    margin-bottom: 32px;
  }

  .subscription-badge {
    margin-bottom: 13px;
  }

  .subscription-heading h1 {
    font-size: 29px;
  }

  .subscription-heading > p {
    margin-top: 13px;

    font-size: 13px;
    line-height: 1.8;
  }

  .subscription-expired-date {
    width: 100%;

    margin-top: 16px;

    box-sizing: border-box;
  }

  .subscription-plans {
    grid-template-columns: 1fr;
  }

  .subscription-plan-card {
    padding: 24px 20px 20px;

    border-radius: 15px;
  }

  .subscription-plan-card.recommended {
    margin-top: 10px;
  }

  .plan-name {
    margin-bottom: 14px;
  }

  .plan-price {
    min-height: auto;
    margin-bottom: 16px;
  }

  .plan-price strong {
    font-size: 32px;
  }

  .subscription-contact-box {
    margin-top: 22px;
    padding: 18px;

    border-radius: 14px;
  }

  .subscription-card {
    min-height: 100dvh;
    width: 100%;

    padding: 50px 20px;

    justify-content: center;

    border: none;
    border-radius: 0;

    box-shadow: none;

    box-sizing: border-box;
  }

  .subscription-card h1 {
    font-size: 25px;
  }

  .subscription-icon {
    width: 60px;
    height: 60px;

    border-radius: 17px;

    font-size: 26px;
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {
  .subscription-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .subscription-topbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .subscription-brand strong {
    max-width: 125px;
  }

  .subscription-heading h1 {
    font-size: 26px;
  }

  .subscription-plan-card {
    padding-left: 17px;
    padding-right: 17px;
  }

  .plan-price strong {
    font-size: 29px;
  }
}
/* =========================================================
   APPOINTMENTS MANAGEMENT V2
   Search • Filters • Status • Actions
   ========================================================= */

.appointments-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 12px;
  flex-wrap: wrap;
}


/* =========================
   SEARCH
   ========================= */

.appointments-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 280px;
  max-width: 520px;
}

.appointments-search > svg {
  position: absolute;
  right: 15px;
  pointer-events: none;
  opacity: 0.5;
}

.appointments-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 44px 10px 42px;

  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;

  background: #ffffff;

  font-family: inherit;
  font-size: 14px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.appointments-search input:focus {
  border-color: rgba(15, 23, 42, 0.35);

  box-shadow:
    0 0 0 3px rgba(15, 23, 42, 0.06);
}

.appointments-search input::placeholder {
  color: #94a3b8;
}

.appointments-search-clear {
  position: absolute;
  left: 10px;

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #64748b;

  cursor: pointer;
}

.appointments-search-clear:hover {
  background: #f1f5f9;
  color: #0f172a;
}


/* =========================
   FILTER BUTTONS
   ========================= */

.appointments-filters {
  display: flex;
  align-items: center;
  gap: 7px;

  padding: 5px;

  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;

  background: #f8fafc;
}

.appointment-filter-button {
  min-height: 34px;

  padding: 7px 13px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #64748b;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.appointment-filter-button:hover {
  color: #0f172a;
}

.appointment-filter-button.active {
  background: #ffffff;
  color: #0f172a;

  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 1px 2px rgba(15, 23, 42, 0.05);
}


/* =========================
   RESULTS SUMMARY
   ========================= */

.appointments-results-summary {
  min-height: 34px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 10px;

  font-size: 13px;
  color: #64748b;
}

.appointments-results-summary span {
  font-weight: 600;
}

.appointments-results-summary button {
  padding: 5px 9px;

  border: 0;
  border-radius: 7px;

  background: transparent;
  color: #475569;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.appointments-results-summary button:hover {
  background: #f1f5f9;
  color: #0f172a;
}


/* =========================
   STATUS BADGES
   ========================= */

.appointment-time-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 80px;

  padding: 6px 10px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;

  white-space: nowrap;
}

.appointment-time-status.upcoming {
  background: #ecfdf5;
  color: #047857;

  border: 1px solid #a7f3d0;
}

.appointment-time-status.past {
  background: #f1f5f9;
  color: #64748b;

  border: 1px solid #e2e8f0;
}


/* =========================
   APPOINTMENT ACTIONS
   ========================= */

.appointment-actions {
  display: flex;
  align-items: center;
  gap: 7px;

  white-space: nowrap;
}

.call-appointment-button {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 7px 10px;

  border: 1px solid #bbf7d0;
  border-radius: 9px;

  background: #f0fdf4;
  color: #15803d;

  font-family: inherit;
  font-size: 12px;
  font-weight: 800;

  text-decoration: none;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.call-appointment-button:hover {
  background: #dcfce7;
  border-color: #86efac;

  transform: translateY(-1px);
}


/* Keep the existing cancel button,
   but make it align with the call button */

.appointment-actions .cancel-appointment-button {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 7px 10px;

  border-radius: 9px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 800;

  white-space: nowrap;
}


/* =========================
   TABLE IMPROVEMENTS
   ========================= */

.appointments-table-wrapper {
  overflow-x: auto;

  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;

  background: #ffffff;
}

.appointments-table {
  width: 100%;
  min-width: 850px;

  border-collapse: collapse;
}

.appointments-table thead {
  background: #f8fafc;
}

.appointments-table th {
  padding: 13px 15px;

  text-align: right;

  font-size: 12px;
  font-weight: 800;
  color: #64748b;

  border-bottom: 1px solid #e2e8f0;
}

.appointments-table td {
  padding: 14px 15px;

  vertical-align: middle;

  font-size: 14px;

  border-bottom: 1px solid #f1f5f9;
}

.appointments-table tbody tr:last-child td {
  border-bottom: 0;
}

.appointments-table tbody tr {
  transition: background 0.15s ease;
}

.appointments-table tbody tr:hover {
  background: #fafafa;
}

.appointment-phone {
  margin-top: 4px;

  font-size: 12px;
  color: #64748b;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {

  .appointments-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .appointments-search {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .appointments-filters {
    width: 100%;

    overflow-x: auto;
  }

  .appointment-filter-button {
    flex: 1;
  }

}


@media (max-width: 600px) {

  .appointments-results-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .appointments-filters {
    justify-content: stretch;
  }

  .appointment-filter-button {
    padding-left: 10px;
    padding-right: 10px;

    font-size: 12px;
  }

  .appointments-search input {
    font-size: 13px;
  }

}
/* =========================================================
   INTERNATIONAL PHONE INPUT
   Public Booking Page
   ========================================================= */

.international-phone-field {
  width: 100%;
  direction: ltr;
}

/* Main container */
.booking-phone-container {
  width: 100% !important;
  position: relative;
  font-family: inherit !important;
}

/* Phone input */
.booking-phone-container .booking-phone-input {
  width: 100% !important;
  height: 50px !important;

  padding: 0 58px 0 16px !important;

  border: 1px solid #dbe2ea !important;
  border-radius: 12px !important;

  background: #ffffff !important;
  color: #0f172a !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;

  outline: none !important;
  box-shadow: none !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* Placeholder */
.booking-phone-container .booking-phone-input::placeholder {
  color: #94a3b8 !important;
}

/* Focus */
.booking-phone-container .booking-phone-input:focus {
  border-color: #6366f1 !important;

  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.10) !important;
}


/* =========================================================
   COUNTRY BUTTON
   ========================================================= */

.booking-phone-container .booking-phone-country-button {
  width: 50px !important;

  border: 0 !important;
  border-right: 1px solid #e2e8f0 !important;

  border-radius: 12px 0 0 12px !important;

  background: transparent !important;

  transition: background 0.15s ease !important;
}

.booking-phone-container .booking-phone-country-button:hover,
.booking-phone-container .booking-phone-country-button.open {
  background: #f8fafc !important;
}

/* Selected flag area */
.booking-phone-container
.booking-phone-country-button
.selected-flag {
  width: 100% !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px 0 0 12px !important;

  background: transparent !important;
}

.booking-phone-container
.booking-phone-country-button
.selected-flag:hover,
.booking-phone-container
.booking-phone-country-button
.selected-flag:focus {
  background: #f8fafc !important;
}

/* Arrow */
.booking-phone-container
.booking-phone-country-button
.selected-flag
.arrow {
  margin-left: 5px !important;
}


/* =========================================================
   COUNTRY DROPDOWN
   ========================================================= */

.booking-phone-container .booking-phone-dropdown {
  width: 320px !important;
  max-height: 330px !important;

  margin-top: 8px !important;
  padding: 8px !important;

  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;

  background: #ffffff !important;

  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.14),
    0 4px 12px rgba(15, 23, 42, 0.06) !important;

  overflow-x: hidden !important;

  z-index: 9999 !important;
}


/* =========================================================
   SEARCH INSIDE DROPDOWN
   ========================================================= */

.booking-phone-container
.booking-phone-dropdown
.search {
  position: sticky !important;
  top: 0 !important;

  margin: 0 0 7px 0 !important;
  padding: 5px !important;

  background: #ffffff !important;

  z-index: 2 !important;
}

.booking-phone-container .booking-phone-search {
  width: 100% !important;
  height: 40px !important;

  margin: 0 !important;
  padding: 0 12px !important;

  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;

  background: #f8fafc !important;

  color: #0f172a !important;

  font-family: inherit !important;
  font-size: 13px !important;

  outline: none !important;
}

.booking-phone-container .booking-phone-search:focus {
  border-color: #6366f1 !important;

  background: #ffffff !important;

  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.08) !important;
}


/* =========================================================
   COUNTRY ROWS
   ========================================================= */

.booking-phone-container
.booking-phone-dropdown
.country {
  min-height: 42px !important;

  padding: 8px 10px !important;

  display: flex !important;
  align-items: center !important;

  border-radius: 8px !important;

  font-family: inherit !important;

  transition: background 0.12s ease !important;
}

.booking-phone-container
.booking-phone-dropdown
.country:hover {
  background: #f1f5f9 !important;
}

.booking-phone-container
.booking-phone-dropdown
.country.highlight {
  background: #eef2ff !important;
}

.booking-phone-container
.booking-phone-dropdown
.country-name {
  color: #334155 !important;

  font-size: 13px !important;
  font-weight: 500 !important;
}

.booking-phone-container
.booking-phone-dropdown
.dial-code {
  color: #94a3b8 !important;

  font-size: 12px !important;
}


/* =========================================================
   FIND APPOINTMENT PHONE FIELD
   ========================================================= */

.find-phone-field {
  width: 100%;
}

.find-phone-field .booking-phone-container {
  width: 100% !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .booking-phone-container .booking-phone-input {
    height: 48px !important;
    font-size: 14px !important;
  }

  .booking-phone-container .booking-phone-dropdown {
    width: min(310px, calc(100vw - 40px)) !important;
    max-height: 300px !important;
  }

}

/* =========================================
   OWNER DASHBOARD — RESPONSIVE REDESIGN
   ========================================= */

.owner-layout {
  --owner-green: #236b55;
  --owner-dark: #193c32;
  --owner-border: #e4eae6;

  background: #f7f9f7;
  min-height: 100vh;
}

.owner-main {
  max-width: none;
  box-sizing: border-box;
}

.owner-header {
  background: #ffffff;
  border: 1px solid var(--owner-border);
  border-radius: 22px;
  padding: 25px;
}

.owner-header h1 {
  color: var(--owner-dark);
}

.owner-stats-grid {
  gap: 14px;
}

.owner-stat-card {
  background: #ffffff;
  border: 1px solid var(--owner-border);
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(25, 60, 50, 0.035);
}

.owner-mobile-nav,
.owner-mobile-menu-overlay {
  display: none;
}

/* Tablet and mobile */
@media (max-width: 900px) {
  .owner-sidebar {
    display: none !important;
  }

  .owner-main {
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 18px 110px !important;
    min-width: 0;
  }

  .owner-layout {
    display: block;
  }

  .owner-header {
    padding: 22px;
  }

  .owner-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    height: calc(68px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);

    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #e5eae6;
    box-shadow: 0 -5px 25px rgba(20, 50, 40, 0.06);

    backdrop-filter: blur(16px);
    z-index: 1000;
  }

  .owner-mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 65px;
    min-height: 52px;

    padding: 6px;
    border: none;
    border-radius: 13px;
    background: transparent;
    color: #7b8880;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }

  .owner-mobile-nav-item.active {
    background: #edf6f0;
    color: #236b55;
  }

  .owner-mobile-nav-item:active {
    transform: scale(0.97);
  }

  .owner-mobile-menu-overlay {
    display: flex;
    align-items: flex-end;

    position: fixed;
    inset: 0;

    background: rgba(14, 32, 25, 0.45);
    z-index: 1100;
  }

  .owner-mobile-menu {
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;

    padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
    box-sizing: border-box;

    background: #ffffff;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -15px 45px rgba(0, 0, 0, 0.1);
  }

  .owner-mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 17px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e8ede9;
  }

  .owner-mobile-menu-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .owner-mobile-menu-header strong {
    font-size: 19px;
    color: #193c32;
  }

  .owner-mobile-menu-header span {
    font-size: 13px;
    color: #819087;
  }

  .owner-mobile-menu > button:not(.owner-mobile-menu-close) {
    display: flex;
    align-items: center;
    gap: 15px;

    width: 100%;
    min-height: 55px;
    padding: 13px 12px;

    background: transparent;
    border: none;
    border-radius: 13px;

    color: #244337;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
  }

  .owner-mobile-menu > button:active {
    background: #edf6f0;
  }

  .owner-mobile-menu-close {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;
    background: #f0f3f0;
    color: #244337;
    cursor: pointer;
  }

  .owner-mobile-menu .owner-mobile-menu-logout {
    color: #c0392b !important;
    border-top: 1px solid #e8ede9 !important;
    border-radius: 0 !important;
    margin-top: 12px;
  }
}

/* Small phones */
@media (max-width: 600px) {
  .owner-main {
    padding: 14px 12px 100px !important;
  }

  .owner-header {
    border: none;
    background: transparent;
    padding: 12px 4px;
    margin-bottom: 14px;
  }

  .owner-header h1 {
    font-size: 24px;
    line-height: 1.35;
  }

  .owner-header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
  }
  .owner-header-actions > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    white-space: normal;
    text-align: center;
  }
  .owner-header-actions > button:first-child {
    grid-column: 1 / -1;
  }

  .owner-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .owner-stat-card {
    padding: 17px 14px;
    min-width: 0;
  }

  .owner-stat-card strong {
    font-size: 25px;
  }

  .owner-overview-section,
  .owner-next-appointment-card {
    min-width: 0;
  }

  .owner-mobile-nav-item {
    min-width: 0;
    flex: 1;
  }
}

/* ---------- دورك brand mark ---------- */
.dorak-brand-icon { width: 40px; height: 40px; border-radius: 11px; vertical-align: middle; margin-inline-end: 6px; }
.ow-brand { display: inline-flex; align-items: center; gap: 8px; }
.ow-brand img { width: 34px; height: 34px; border-radius: 9px; }
.bk-footer-brand { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.bk-footer-brand img { width: 22px; height: 22px; border-radius: 6px; }