/* =========================================================
   PROF BOOKING — Customer page
   Brand: gold #f2c41c · dark #221e10 · light bg #f8f8f5
   ========================================================= */

/* ---- Break out of Woodmart layout grid & full-bleed hero ---- */
body.prof-book-active.wrapper-1200{max-width:none !important}
body.prof-book-active .wd-content-layout,
body.prof-book-active .content-layout-wrapper{
	display:block !important;
	grid-template-columns:none !important;
	max-width:none !important;
	width:100% !important;
	padding-left:0 !important;
	padding-right:0 !important;
	margin-left:0 !important;
	margin-right:0 !important;
	gap:0 !important;
}
body.prof-book-active .wd-content-layout > .sidebar-container,
body.prof-book-active .sidebar-container,
body.prof-book-active aside.sidebar,
body.prof-book-active .widget-area,
body.prof-book-active .page-title,
body.prof-book-active .wd-sidebar-opener,
body.prof-book-active .wd-burger-icon,
body.prof-book-active .wd-action-btn.wd-sidebar-opener{display:none !important}
body.prof-book-active .wd-page-content,
body.prof-book-active .main-page-wrapper{
	padding:0 !important;
	margin:0 !important;
	max-width:none !important;
	width:100% !important;
}
body.prof-book-active main.prof-book-page{
	width:100% !important;
	max-width:none !important;
	display:block !important;
	margin:0 !important;
	padding:0 !important;
}

.prof-book-page{
	--pb-gold:#f2c41c;
	--pb-gold-dark:#e6b800;
	--pb-dark:#221e10;
	--pb-bg:#f8f8f5;
	--pb-card:#ffffff;
	--pb-border:#e6e3d8;
	--pb-muted:#6b6754;
	--pb-success:#1da851;
	--pb-danger:#dc2626;
	--pb-radius:14px;
	background:var(--pb-bg);
	color:var(--pb-dark);
	font-family:"Cairo","Tajawal","IBM Plex Sans Arabic",Tahoma,sans-serif;
	min-height:70vh;
	font-variant-numeric:lining-nums tabular-nums;
}
/* Force Latin digits even in Arabic fonts that auto-localize */
.prof-book-page,
.prof-book-page *{
	font-feature-settings:"lnum" 1, "tnum" 1;
}
.prof-book-page *,.prof-book-page *:before,.prof-book-page *:after{box-sizing:border-box}
.pb-container{max-width:980px;margin:0 auto;padding:0 1rem}

/* ---------- HERO ---------- */
.pb-hero{
	background:linear-gradient(135deg,#221e10 0%,#3a3320 100%);
	color:#fff;padding:3rem 0 4rem;
	border-bottom:4px solid var(--pb-gold);
}
.pb-hero h1{font-size:2rem;margin:0 0 .5rem;font-weight:800;color:#fff}
.pb-hero p{margin:0;font-size:1rem;color:#d5d0bd;line-height:1.7}

/* ---------- SHELL ---------- */
.pb-shell{margin-top:-2.5rem;position:relative;padding-bottom:4rem}

/* ---------- STEPS ---------- */
.pb-steps{
	display:flex;list-style:none;padding:0;margin:0 0 1.25rem;gap:.5rem;
	background:var(--pb-card);border-radius:var(--pb-radius);
	box-shadow:0 4px 18px rgba(34,30,16,.08);
	padding:.75rem;overflow-x:auto;
}
.pb-steps li{
	flex:1;min-width:120px;display:flex;align-items:center;gap:.5rem;
	padding:.6rem .75rem;border-radius:10px;font-weight:600;font-size:.92rem;
	color:var(--pb-muted);white-space:nowrap;transition:background .2s;
}
.pb-steps li span{
	display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;border-radius:50%;background:#f0ecdb;
	color:var(--pb-muted);font-size:.85rem;font-weight:700;
}
.pb-steps li.is-active{background:#fffaeb;color:var(--pb-dark)}
.pb-steps li.is-active span{background:var(--pb-gold);color:var(--pb-dark)}
.pb-steps li.is-done{color:var(--pb-dark)}
.pb-steps li.is-done span{background:var(--pb-success);color:#fff}
.pb-steps li.is-done span::before{content:"✓";font-size:.9rem}
.pb-steps li.is-done span > *:not(:first-child){display:none}

/* ---------- PANES ---------- */
.pb-pane{display:none;background:var(--pb-card);border-radius:var(--pb-radius);
	padding:1.5rem;box-shadow:0 4px 18px rgba(34,30,16,.06)}
.pb-pane.is-active{display:block;animation:pbFade .25s ease}
@keyframes pbFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pb-pane-title{margin:0 0 .25rem;font-size:1.25rem;font-weight:800}
.pb-pane-sub{margin:0 0 1.25rem;color:var(--pb-muted);font-size:.95rem}

.pb-loading{padding:2rem;text-align:center;color:var(--pb-muted)}

/* ---------- BUTTONS ---------- */
.pb-btn{
	border:0;cursor:pointer;font:inherit;font-weight:700;
	padding:.85rem 1.4rem;border-radius:10px;font-size:1rem;
	display:inline-flex;align-items:center;gap:.4rem;transition:transform .1s, background .2s, box-shadow .2s;
}
.pb-btn:active{transform:translateY(1px)}
.pb-btn-primary{background:var(--pb-gold);color:var(--pb-dark);box-shadow:0 4px 12px rgba(242,196,28,.35)}
.pb-btn-primary:hover{background:var(--pb-gold-dark)}
.pb-btn-primary:disabled{background:#e8e5d6;color:#a39e85;cursor:not-allowed;box-shadow:none}
.pb-btn-ghost{background:transparent;color:var(--pb-muted);border:1px solid var(--pb-border)}
.pb-btn-ghost:hover{background:#faf8ef;color:var(--pb-dark)}
.pb-btn-confirm{background:var(--pb-success);color:#fff;box-shadow:0 4px 12px rgba(29,168,81,.3)}
.pb-btn-confirm:hover{background:#168a44}

/* ---------- ACTIONS BAR ---------- */
.pb-actions{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap}
.pb-summary-mini{color:var(--pb-muted);font-size:.92rem}

/* ---------- SERVICES GRID ---------- */
.pb-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.pb-service{
	background:#fff;border:2px solid var(--pb-border);border-radius:12px;
	padding:.85rem;cursor:pointer;display:flex;gap:.75rem;align-items:center;
	transition:all .15s;position:relative;text-align:right;
}
.pb-service:hover{border-color:var(--pb-gold)}
.pb-service.is-selected{border-color:var(--pb-gold);background:#fffaeb}
.pb-service.is-selected::after{
	content:"✓";position:absolute;top:.4rem;left:.4rem;
	background:var(--pb-gold);color:var(--pb-dark);border-radius:50%;
	width:24px;height:24px;display:flex;align-items:center;justify-content:center;
	font-weight:900;font-size:.9rem;
}
.pb-service-img{width:56px;height:56px;border-radius:8px;background:#f0ecdb;flex-shrink:0;object-fit:cover}
.pb-service-body{flex:1;min-width:0}
.pb-service-name{font-weight:700;font-size:.95rem;margin:0 0 .15rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pb-service-meta{display:flex;gap:.5rem;font-size:.82rem;color:var(--pb-muted)}
.pb-service-price{color:var(--pb-dark);font-weight:700}
.pb-service-duration::before{content:"⏱ "}

/* ---------- BRANCHES GRID ---------- */
.pb-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.85rem}
.pb-branch{
	background:#fff;border:2px solid var(--pb-border);border-radius:12px;
	padding:1.1rem;cursor:pointer;text-align:right;
	transition:all .15s;display:flex;flex-direction:column;gap:.4rem;position:relative;
}
.pb-branch:hover{border-color:var(--pb-gold)}
.pb-branch.is-selected{border-color:var(--pb-gold);background:#fffaeb}
.pb-branch.is-selected::after{
	content:"✓";position:absolute;top:.55rem;left:.55rem;
	background:var(--pb-gold);color:var(--pb-dark);border-radius:50%;
	width:26px;height:26px;display:flex;align-items:center;justify-content:center;
	font-weight:900;
}
.pb-branch-name{font-weight:800;font-size:1.05rem;margin:0}
.pb-branch-address{font-size:.88rem;color:var(--pb-muted);margin:0}
.pb-branch-phone{font-size:.9rem;color:var(--pb-dark);display:flex;gap:.35rem;align-items:center}
.pb-branch-phone::before{content:"📞"}
.pb-branch-map{
	display:inline-flex;align-items:center;gap:.3rem;
	margin-top:.65rem;padding:.5rem .85rem;
	background:#fff;border:1px solid var(--pb-border);border-radius:8px;
	text-decoration:none;color:var(--pb-dark);font-weight:600;font-size:.88rem;
	transition:.15s;align-self:flex-start;
}
.pb-branch-map:hover{background:#fffaeb;border-color:var(--pb-gold);color:var(--pb-dark)}
.pb-branch-map:active{transform:translateY(1px)}

/* ---------- CALENDAR ---------- */
.pb-cal-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;gap:.5rem}
.pb-cal-nav{
	background:#fff;border:1px solid var(--pb-border);border-radius:10px;
	width:40px;height:40px;cursor:pointer;font-size:1.1rem;font-weight:700;
	display:flex;align-items:center;justify-content:center;color:var(--pb-dark);
}
.pb-cal-nav:hover{background:#fffaeb;border-color:var(--pb-gold)}
.pb-cal-nav:disabled{opacity:.4;cursor:not-allowed}
.pb-cal-range{font-weight:700;font-size:.95rem}

.pb-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-bottom:1.25rem}
.pb-day{
	background:#fff;border:1.5px solid var(--pb-border);border-radius:10px;
	padding:.5rem;text-align:center;cursor:pointer;transition:.15s;
}
.pb-day:hover:not(.is-disabled){border-color:var(--pb-gold)}
.pb-day.is-selected{border-color:var(--pb-gold);background:var(--pb-gold);color:var(--pb-dark)}
.pb-day.is-disabled{opacity:.35;cursor:not-allowed;background:#f5f3eb}
.pb-day-dow{font-size:.7rem;color:var(--pb-muted);text-transform:uppercase;letter-spacing:.05em}
.pb-day.is-selected .pb-day-dow{color:var(--pb-dark)}
.pb-day-num{font-size:1.2rem;font-weight:800;line-height:1.1;margin-top:.15rem}
.pb-day-meta{font-size:.65rem;color:var(--pb-muted);margin-top:.15rem}
.pb-day.is-selected .pb-day-meta{color:var(--pb-dark)}

.pb-slots-wrap{background:#faf8ef;border-radius:10px;padding:1rem;min-height:80px}
.pb-slots-title{font-weight:600;margin-bottom:.6rem;color:var(--pb-muted);font-size:.92rem}
.pb-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:.5rem}
.pb-slot{
	background:#fff;border:1.5px solid var(--pb-border);border-radius:8px;
	padding:.55rem;cursor:pointer;text-align:center;font-weight:600;font-size:.95rem;
	transition:.15s;font-family:inherit;
}
.pb-slot:hover{border-color:var(--pb-gold)}
.pb-slot.is-selected{background:var(--pb-gold);border-color:var(--pb-gold);color:var(--pb-dark)}
.pb-slots-empty{padding:1rem 0;color:var(--pb-muted);text-align:center;font-size:.92rem}

/* ---------- SUMMARY ---------- */
.pb-summary{
	background:#fffaeb;border:1px solid #f3e3a5;border-radius:12px;
	padding:1rem 1.1rem;margin-bottom:1.25rem;
}
.pb-summary-row{display:flex;justify-content:space-between;gap:.5rem;padding:.4rem 0;font-size:.95rem;border-bottom:1px dashed #e9d28e}
.pb-summary-row:last-child{border-bottom:0}
.pb-summary-label{color:var(--pb-muted);font-weight:600}
.pb-summary-value{font-weight:700;text-align:end}

/* ---------- FORM ---------- */
.pb-form{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.pb-field{display:flex;flex-direction:column;gap:.35rem}
.pb-field-wide{grid-column:1 / -1}
.pb-field > span{font-weight:700;font-size:.92rem}
.pb-field input,.pb-field textarea{
	font:inherit;background:#fff;border:1.5px solid var(--pb-border);
	border-radius:10px;padding:.7rem .85rem;width:100%;
	font-size:1rem;direction:rtl;font-family:inherit;
}
.pb-field input:focus,.pb-field textarea:focus{
	outline:0;border-color:var(--pb-gold);box-shadow:0 0 0 3px rgba(242,196,28,.18)
}
.pb-hint{color:var(--pb-muted);font-size:.78rem;margin-top:.15rem}

.pb-error{
	background:#fef2f2;border:1px solid #fecaca;color:#991b1b;
	padding:.7rem .9rem;border-radius:10px;margin-top:1rem;font-weight:600;
}

/* ---------- SUCCESS ---------- */
.pb-success{text-align:center;padding:1rem 0}
.pb-success-icon{
	width:84px;height:84px;border-radius:50%;background:var(--pb-success);color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900;
	margin:0 auto 1rem;box-shadow:0 8px 24px rgba(29,168,81,.3);
}
.pb-success h2{font-size:1.5rem;margin:0 0 .5rem}
.pb-success-code{
	display:inline-block;background:#fffaeb;border:2px dashed var(--pb-gold);
	color:var(--pb-dark);font-family:"Courier New",monospace;font-weight:800;
	font-size:1.25rem;padding:.5rem 1rem;border-radius:8px;margin:1rem 0;letter-spacing:.1em;
}
.pb-success-details{margin:1rem 0;color:var(--pb-muted);font-size:.95rem;line-height:1.8}
.pb-success-details strong{color:var(--pb-dark)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:640px){
	.pb-hero{padding:2rem 0 3rem}
	.pb-hero h1{font-size:1.5rem}
	.pb-pane{padding:1.1rem}
	.pb-steps li{font-size:.78rem;min-width:90px;padding:.5rem .55rem}
	.pb-services{grid-template-columns:1fr}
	.pb-form{grid-template-columns:1fr}
	.pb-days{grid-template-columns:repeat(7,1fr);gap:.25rem}
	.pb-day{padding:.4rem .15rem}
	.pb-day-num{font-size:1rem}
	.pb-day-dow{font-size:.62rem}
	.pb-btn{padding:.75rem 1.1rem;font-size:.95rem}
}