/* =========================================================
   آرایش‌یار — سامانه نوبت‌دهی آنلاین آرایشگاه‌ها
   Design tokens
   ========================================================= */
:root{
  --ivory:#FBF8F3;
  --ivory-2:#F3EEE3;
  --ink:#1B2420;
  --ink-soft:#4B5751;
  --brand:#1F5C4D;
  --brand-dark:#123B31;
  --brand-light:#E7F0EC;
  --gold:#C7973F;
  --gold-light:#F6E9CE;
  --rose:#BD5468;
  --line:#E3DCCB;
  --white:#FFFFFF;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-soft:0 10px 30px -12px rgba(27,36,32,.18);
  --shadow-lift:0 18px 45px -16px rgba(18,59,49,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Vazirmatn', 'Tahoma', sans-serif;
  font-weight:400;
  line-height:1.8;
  direction:rtl;
  overflow-x:hidden; /* اگر عنصری به‌اشتباه بیرون‌زده باشد، کل صفحه را کج/عریض نکند */
}
h1,h2,h3,h4,h5{
  font-family:'Vazirmatn', sans-serif;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 .5em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
p{margin:0 0 1em;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 20px;}
.container-narrow{width:100%; max-width:760px; margin:0 auto; padding:0 20px;}

::selection{background:var(--gold-light); color:var(--brand-dark);}

/* ---------- Utility ---------- */
/* همه ایموجی‌ها/استیکرهای سایت سیاه‌وسفید نمایش داده می‌شوند */
.emo{filter:grayscale(1);}
.text-muted{color:var(--ink-soft);}
.text-brand{color:var(--brand);}
.text-gold{color:var(--gold);}
.section{padding:64px 0;}
.section-sm{padding:36px 0;}
.divider{height:1px; background:var(--line); border:0; margin:0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:700; font-size:.95rem;
  padding:12px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  line-height:1.4;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--brand); color:var(--white); box-shadow:var(--shadow-lift);}
.btn-primary:hover{background:var(--brand-dark); color:var(--white);}
.btn-gold{background:var(--gold); color:var(--brand-dark);}
.btn-gold:hover{background:#B7863A; color:var(--white);}
.btn-outline{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--white);}
.btn-outline-light{background:transparent; border-color:rgba(255,255,255,.55); color:var(--white);}
.btn-outline-light:hover{background:rgba(255,255,255,.15);}
.btn-ghost{background:transparent; color:var(--brand); padding:10px 14px;}
.btn-ghost:hover{background:var(--brand-light);}
.btn-danger{background:#fff; border-color:var(--rose); color:var(--rose);}
.btn-danger:hover{background:var(--rose); color:#fff;}
.btn-sm{padding:8px 18px; font-size:.85rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,243,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar .container{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--brand-dark); text-decoration:none;}
.brand .brand-logo{width:auto; height:36px; display:block; flex-shrink:0;}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text b{font-weight:900; font-size:1.22rem;}
.brand-text small{display:none;}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{
  padding:10px 16px; border-radius:999px; font-weight:600; font-size:.94rem; color:var(--ink-soft);
  line-height:1.3; transition:background .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links a.active{background:var(--brand-light); color:var(--brand-dark);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px;}
.user-chip{
  display:flex; align-items:center; gap:8px; padding:6px 8px 6px 16px; border-radius:999px;
  background:var(--white); border:1px solid var(--line); font-size:.88rem; font-weight:600;
}
.user-chip .avatar{
  width:30px; height:30px; border-radius:50%; background:var(--brand); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:inherit;}

/* اطلاعات کاربری بالای منوی همبرگری موبایل — فقط در موبایل نمایش داده می‌شود */
.nav-links-user{display:none;}
.nav-links-dashboard-mobile{display:none;}
.nav-links-desktop-link{display:inline-block;}

/* دکمه‌ی دایره‌ای فقط-آیکون برای حالت موبایل (آواتار کاربر یا ورود) */
.show-mobile-nav{display:none;}
.nav-icon-btn{
  width:40px; height:40px; border-radius:50%; background:var(--brand); color:var(--white);
  align-items:center; justify-content:center; font-size:.85rem; font-weight:800;
  flex-shrink:0; text-decoration:none; border:0; cursor:pointer;
}

@media (max-width: 900px){
  .navbar .container{
    display:grid; grid-template-columns:44px 1fr; align-items:center; height:72px; gap:8px; padding:0 16px;
  }
  .nav-toggle{display:block; grid-column:1; justify-self:start; padding:8px 4px;}
  /* موبایل: لوگو سمت چپ هدر و نام در سمت راستِ همان لوگو (row-reverse در RTL) */
  .brand{grid-column:2; justify-self:end; flex-direction:row-reverse; gap:8px;}
  .brand .brand-logo{height:34px;}
  /* در موبایل نام انگلیسی (NobiR) کنار لوگو نمایش داده می‌شود، نه نام فارسی */
  .brand-text b{display:none;}
  .brand-text small{
    display:block; font-size:1.05rem; font-weight:800; letter-spacing:.02em; color:var(--brand-dark); direction:ltr; position:relative; top:4px;
  }
  .nav-actions{display:none;}
  .hide-mobile-nav{display:none !important;}
  .show-mobile-nav{display:flex;}

  .nav-links{
    position:fixed; top:72px; right:0; left:0; height:calc(100vh - 72px); background:var(--ivory); flex-direction:column;
    align-items:stretch; padding:18px; gap:4px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; overflow-y:auto;
  }
  .nav-links.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-links a{padding:13px 16px; font-size:1rem; line-height:1.3;}

  .nav-links-user{
    display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .nav-links-user .avatar{
    width:46px; height:46px; border-radius:50%; background:var(--brand); color:var(--white);
    display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:800; flex-shrink:0;
    overflow:hidden;
  }
  .nav-links-user-info{display:flex; flex-direction:column; gap:3px; min-width:0;}
  .nav-links-user-info b{font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink);}
  .nav-links-user-info span{font-size:.8rem; color:var(--ink-soft); direction:ltr; text-align:right; unicode-bidi:plaintext;}

  /* در موبایل، آیتم‌های داشبورد به‌جای یک لینک ساده، به‌طور کامل داخل منوی همبرگر نمایش داده می‌شوند */
  .nav-links-dashboard-mobile{display:contents;}
  .nav-links-desktop-link{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(199,151,63,.20), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(31,92,77,.16), transparent 55%),
    var(--ivory-2);
  padding:88px 0 130px;
}
.hero-grid{display:grid; grid-template-columns:1fr; gap:0; text-align:center; justify-items:center;}
.hero h1{font-size:clamp(2.1rem, 4vw, 3.3rem); line-height:1.25;}
.hero h1 em{font-style:normal; color:var(--brand);}
.hero-lead{font-size:1.08rem; color:var(--ink-soft); max-width:560px; margin-left:auto; margin-right:auto;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; justify-content:center;}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap; margin-top:42px; justify-content:center; text-align:center;}
.hero-stat b{display:block; font-size:1.6rem; font-weight:900; color:var(--brand-dark);}
.hero-stat span{font-size:.84rem; color:var(--ink-soft);}

/* floating search card overlapping hero bottom */
.search-card{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
  padding:26px; margin-top:-78px; position:relative; z-index:5; border:1px solid var(--line);
}
.search-grid{display:grid; grid-template-columns:1fr 1fr auto auto; gap:14px; align-items:end;}
.search-field label{display:block; font-size:.8rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
@media (max-width:900px){
  /* در موبایل، نوار جستجوی صفحه اصلی حذف می‌شود چون آیکون جستجو در هدر و تب پایین وجود دارد */
  .home-search-card{display:none;}
  .hero{padding:56px 0;}

  .hero-stats{gap:14px 28px;}
  .hero-stat{min-width:90px;}
}
@media (max-width: 820px){ .search-grid{grid-template-columns:1fr;} }

/* ---------- Forms ---------- */
.form-control, .form-select{
  width:100%; padding:12px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:var(--white); font-family:inherit; font-size:1rem; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-light);
}
textarea.form-control{resize:vertical;}
label{font-weight:700; font-size:.9rem; display:block; margin-bottom:6px; color:var(--ink);}
.field{margin-bottom:18px;}
.field .req{color:var(--rose); font-weight:800;}
.field .help{font-size:.8rem; color:var(--ink-soft); margin-top:5px;}
.field .errorlist{list-style:none; margin:6px 0 0; padding:0; color:var(--rose); font-size:.82rem; font-weight:600;}
.role-buttons{display:flex; flex-direction:column; gap:14px;}
.role-btn{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--white); color:var(--ink); text-decoration:none;
  border:1.5px solid var(--brand); border-radius:16px; padding:18px 48px;
  box-shadow:var(--shadow-soft);
  transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.role-btn-text{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0;}
.role-btn b{font-size:1.08rem; font-weight:800; color:inherit;}
.role-btn small{font-size:.84rem; line-height:1.6; color:var(--ink-soft); transition:color .18s ease;}
.role-btn-arrow{
  position:absolute; top:50%; left:20px; transform:translateY(-50%);
  font-size:1.3rem; font-weight:700; color:var(--brand); transition:color .18s ease, left .18s ease;
}
.role-btn:hover, .role-btn:focus-visible{
  background:var(--brand); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-lift); outline:none;
}
.role-btn:hover small, .role-btn:focus-visible small{color:rgba(255,255,255,.85);}
.role-btn:hover .role-btn-arrow, .role-btn:focus-visible .role-btn-arrow{color:var(--white); left:16px;}
.role-btn:active{transform:translateY(0);}
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px; box-shadow:var(--shadow-soft);
}

/* ---------- Deposit box ---------- */
.deposit-box{
  background:var(--gold-light); border:1.5px solid var(--gold); border-radius:var(--radius-md);
  padding:16px 18px; margin-bottom:22px;
}
.deposit-box.deposit-required{background:var(--brand-light); border-color:var(--brand);}

/* ---------- Toggle switch ---------- */
.toggle-row{display:flex; align-items:flex-start; gap:14px; margin-bottom:14px;}
.toggle-row:last-child{margin-bottom:0;}
.toggle-switch{position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; margin-top:2px;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{
  position:absolute; cursor:pointer; inset:0; background:var(--line); border-radius:999px; transition:.2s;
}
.toggle-slider::before{
  content:''; position:absolute; height:20px; width:20px; right:3px; top:3px; background:var(--white);
  border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .toggle-slider{background:var(--brand);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(-18px);}

/* OTP input */
.otp-input{letter-spacing:.6em; font-size:1.5rem; text-align:center; font-weight:800;}

/* Radio role cards */
.role-options{display:grid; gap:14px;}
.role-options label{
  display:flex; align-items:flex-start; gap:12px; border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; cursor:pointer; font-weight:600; transition:border-color .15s ease, background .15s ease;
}
.role-options input{margin-top:5px;}
.role-options label:has(input:checked){border-color:var(--brand); background:var(--brand-light);}

/* ---------- Cards: Barber ---------- */
.grid{display:grid; gap:26px;}
.grid-3{grid-template-columns:repeat(3, 1fr);}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr;}}

/* سرتیتر بخش‌های صفحه اصلی (عنوان + «مشاهده همه») */
.section-head{margin-bottom:28px; flex-wrap:wrap; gap:14px;}
@media (max-width:900px){
  .flex.section-head{flex-wrap:nowrap; gap:10px; margin-bottom:6px;}
  .section-head h2{font-size:1.15rem; margin:0;}
  .section-head .btn{padding:8px 14px; font-size:.82rem; white-space:nowrap; flex-shrink:0;}
}

/* کارت‌های افقی‌اسکرول (صفحه اصلی) — فقط در موبایل/تبلت */
@media (max-width:900px){
  .h-scroll{
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
    margin:0 -20px; padding:10px 20px 26px; scroll-padding-inline:20px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .h-scroll::-webkit-scrollbar{display:none;}
  .h-scroll > .barber-card{flex:0 0 76%; max-width:300px; scroll-snap-align:start;}
  /* بخش «رزرو نوبت در ۳ گام» در موبایل نمایش داده نمی‌شود */
  .steps-section{display:none;}
}

.barber-card{
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column;
}
.barber-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift);}
.barber-card .photo{aspect-ratio:5/4; overflow:hidden; background:var(--brand-light); position:relative;}
.barber-card .photo img{width:100%; height:100%; object-fit:cover;}
.barber-card .photo .placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--brand); font-size:2.4rem; font-weight:900; background:linear-gradient(135deg, var(--brand-light), var(--gold-light));
}
.barber-card .rating-pill{
  position:absolute; top:12px; left:12px; background:rgba(27,36,32,.82); color:var(--white);
  padding:5px 11px; border-radius:999px; font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:4px;
}
.barber-card .body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.barber-card h3{font-size:1.08rem; margin:0;}
.barber-card .meta{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink-soft);}
.barber-card .tags{display:flex; gap:6px; flex-wrap:wrap;}
.tag{background:var(--ivory-2); border:1px solid var(--line); font-size:.76rem; padding:4px 10px; border-radius:999px; color:var(--ink-soft); line-height:1.4;}

.stars{color:var(--gold); letter-spacing:2px; font-size:.95rem;}
.stars .off{color:var(--line);}

/* ---------- انتخاب امتیاز (فرم ثبت نظر) ---------- */
/* ترتیب DOM از ۵ به ۱ است و row-reverse در RTL باعث می‌شود ستاره‌ی ۱ سمت راست و ۵ سمت چپ باشد؛
   انتخاب هر ستاره، همان و ستاره‌های سمت راستش (مقدارهای کمتر) را پر می‌کند. */
.star-rating-wrap{text-align:center; padding:8px 0 2px;}
.star-rating{display:inline-flex; flex-direction:row-reverse; gap:6px; direction:rtl;}
.star-rating input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}
.star-rating label{
  cursor:pointer; line-height:0; color:#E3DCCB; padding:4px; border-radius:12px;
  transition:color .15s ease, transform .15s ease; -webkit-tap-highlight-color:transparent;
}
.star-rating label svg{width:46px; height:46px; fill:currentColor; display:block; filter:drop-shadow(0 1px 0 rgba(0,0,0,.04));}
.star-rating input:checked ~ label{color:var(--gold);}
.star-rating input:checked + label{transform:scale(1.08);}
.star-rating:hover label{color:#E3DCCB; transform:none;}
.star-rating:hover label:hover,
.star-rating:hover label:hover ~ label{color:var(--gold);}
.star-rating label:active{transform:scale(.92);}
.star-rating input:focus-visible + label{outline:2px solid var(--brand); outline-offset:2px;}
.star-rating-caption{
  min-height:1.6em; margin-top:8px; font-weight:800; font-size:1rem; color:var(--brand);
  transition:opacity .15s ease;
}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (max-width:480px){
  .star-rating{gap:2px;}
  .star-rating label svg{width:42px; height:42px;}
}
@media (prefers-reduced-motion: reduce){.star-rating label{transition:none;}}

/* ---------- Steps (real process) ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:step;}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}
.step{position:relative; padding:28px 24px 24px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);}
.step .num{
  width:42px; height:42px; border-radius:12px; background:var(--brand); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:900; margin-bottom:16px;
}

/* ---------- Dashboard shell ---------- */
.dash-shell{display:grid; grid-template-columns:260px 1fr; gap:0; min-height:calc(100vh - 76px);}
@media (max-width:900px){
  .dash-shell{grid-template-columns:1fr;}
  .dash-side{display:none;} /* در موبایل، این منو به داخل منوی همبرگری بالای صفحه منتقل شده است */
}.dash-side{background:var(--brand-dark); color:rgba(255,255,255,.86); padding:28px 18px;}
.dash-side .who{padding:0 8px 20px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:18px;}
.dash-side .who b{color:#fff; display:block; font-size:1.02rem;}
.dash-side .who span{font-size:.78rem; opacity:.75;}
.dash-nav a{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:11px; font-weight:600; font-size:.92rem;
  line-height:1.3; color:rgba(255,255,255,.78); margin-bottom:4px; transition:background .15s ease, color .15s ease;
}
.dash-nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.dash-nav a.active{background:var(--gold); color:var(--brand-dark);}
.dash-main{padding:34px 30px 60px; background:var(--ivory); min-width:0;}
.dash-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.dash-head .flex{flex-wrap:wrap;}
.dash-head h1{font-size:1.55rem; margin-bottom:4px;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:30px;}
@media (max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .dash-main{padding:24px 14px 90px;}
  .panel{padding:16px;}
  table.data-table th, table.data-table td{padding:10px 8px; font-size:.86rem;}
}
.stat-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px;}
.stat-card b{display:block; font-size:1.7rem; font-weight:900; color:var(--brand-dark);}
.stat-card span{font-size:.82rem; color:var(--ink-soft); font-weight:600;}

.panel{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; margin-bottom:24px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.panel-head h2{font-size:1.1rem; margin:0;}

/* جدول‌ها روی موبایل: اسکرول افقی فقط داخل خود جدول، نه کل صفحه */
.table-scroll{
  width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -1px;
  position:relative;
  background:
    linear-gradient(to left, var(--white) 40%, rgba(255,255,255,0)),
    linear-gradient(to right, var(--white) 40%, rgba(255,255,255,0)) left,
    linear-gradient(to left, rgba(27,36,32,.22), rgba(27,36,32,0) 14px),
    linear-gradient(to right, rgba(27,36,32,.22), rgba(27,36,32,0) 14px) left;
  background-repeat:no-repeat;
  background-size:32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
}
table.data-table{width:100%; min-width:560px; border-collapse:collapse; font-size:.92rem;}
table.data-table th{text-align:right; color:var(--ink-soft); font-size:.78rem; font-weight:700; padding:10px 12px; border-bottom:1.5px solid var(--line);}
table.data-table td{padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.data-table tr:last-child td{border-bottom:0;}

.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:999px; font-size:.76rem; font-weight:700; line-height:1.4;}
.badge-confirmed{background:var(--brand-light); color:var(--brand-dark);}
.badge-completed{background:var(--gold-light); color:#7A5A1E;}
.badge-cancelled{background:#F6E3E6; color:var(--rose);}
.badge-pending{background:#F1EFE6; color:var(--ink-soft);}

.empty-state{text-align:center; padding:50px 20px; color:var(--ink-soft);}
.empty-state .icon{font-size:2.4rem; margin-bottom:10px; filter:grayscale(1); opacity:.75;}

/* ---------- Ticket-style appointment card (signature element) ---------- */
.ticket{
  display:grid; grid-template-columns:1fr auto; background:var(--white); border-radius:16px;
  box-shadow:var(--shadow-soft); position:relative; overflow:hidden; border:1px solid var(--line);
  margin-bottom:18px;
}
.ticket-main{padding:20px 22px;}
.ticket-side{
  width:150px; background:rgb(var(--hero-rgb,18,59,49)); color:var(--white); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:18px; position:relative; text-align:center; overflow:hidden;
}
/* عکس کاور آرایشگر (در صورت وجود) پشت باکس تاریخ نمایش داده می‌شود؛ یک لایه‌ی
   رنگی هم‌رنگ تم روی آن می‌نشیند تا عدد/متن سفید روی هر عکسی خوانا بماند —
   دقیقاً همان الگوی هدر پروفایل آرایشگر (.detail-hero.has-cover) */
.ticket-cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0;}
.ticket-side.has-cover::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(var(--hero-rgb,18,59,49),.55) 0%, rgba(var(--hero-rgb,18,59,49),.88) 100%);
}
.ticket-side b, .ticket-side span{position:relative; z-index:2;}
.ticket-side b{font-size:1.5rem; font-weight:900; line-height:1;}
.ticket-side span{font-size:.75rem; opacity:.85; margin-top:4px;}
.ticket::before, .ticket::after{
  content:''; position:absolute; width:22px; height:22px; background:var(--ivory); border-radius:50%;
  top:50%; transform:translateY(-50%); z-index:2;
}
.ticket::before{right:150px; margin-right:-11px;}
.ticket::after{right:150px; margin-right:-11px; display:none;}
.ticket .perforation{
  position:absolute; top:0; bottom:0; right:150px; width:0; border-right:2px dashed rgba(255,255,255,.55);
}
.ticket-title{font-weight:800; font-size:1.05rem; margin-bottom:4px;}
.ticket-row{display:flex; flex-wrap:wrap; gap:14px; font-size:.86rem; color:var(--ink-soft); margin-top:8px;}
.ticket-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}

/* ---------- Barber detail ---------- */
/* تم رنگی هدر: هر تم دو مقدار RGB دارد — رنگ پایه و رنگ درخشش (glow).
   تم پیش‌فرض (forest) دقیقاً همان ظاهر قبلی است. برای افزودن تم جدید، یک بلوک
   .theme-xxx اضافه کنید و همان نام را در COVER_THEME_CHOICES (barbers/models.py) بگذارید. */
.detail-hero,
.cover-preview{
  --hero-rgb:18,59,49;
  --hero-glow-rgb:199,151,63;
}
.theme-forest{--hero-rgb:18,59,49;   --hero-glow-rgb:199,151,63;}
.theme-gold{--hero-rgb:94,69,22;     --hero-glow-rgb:246,213,140;}
.theme-rose{--hero-rgb:110,38,54;    --hero-glow-rgb:240,170,185;}
.theme-ocean{--hero-rgb:16,60,92;    --hero-glow-rgb:120,190,220;}
.theme-plum{--hero-rgb:68,36,92;     --hero-glow-rgb:190,150,230;}
.theme-midnight{--hero-rgb:20,24,30; --hero-glow-rgb:130,150,180;}

.detail-hero{
  background:rgb(var(--hero-rgb)); color:#fff; padding:52px 0 90px; position:relative; overflow:hidden;
}
.detail-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(700px 380px at 85% 0%, rgba(var(--hero-glow-rgb),.28), transparent 60%);
}
/* تصویر کاور: کل هدر را می‌پوشاند و یک لایه‌ی رنگی تم روی آن می‌نشیند تا متن سفید خوانا بماند */
.detail-cover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.detail-hero.has-cover::before{
  z-index:1;
  background:
    radial-gradient(700px 380px at 85% 0%, rgba(var(--hero-glow-rgb),.22), transparent 60%),
    linear-gradient(180deg, rgba(var(--hero-rgb),.55) 0%, rgba(var(--hero-rgb),.86) 100%);
}
.detail-hero.has-cover .inner{z-index:2;}
.detail-hero.has-cover h1,
.detail-hero.has-cover .detail-meta{text-shadow:0 1px 8px rgba(0,0,0,.35);}
.detail-hero .inner{position:relative; display:flex; gap:26px; align-items:center; flex-wrap:wrap;}
.detail-avatar{
  width:120px; height:120px; border-radius:24px; overflow:hidden; border:3px solid rgba(255,255,255,.25);
  background:var(--brand); flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; font-weight:900;
}
.detail-avatar img{width:100%; height:100%; object-fit:cover;}
.detail-hero h1{color:#fff; margin-bottom:6px;}
.detail-meta{display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; color:rgba(255,255,255,.82); font-size:.92rem;}
.detail-meta > span + span::before{content:'·'; margin-inline-end:14px; opacity:.7;}

/* ---------- ویرایش ظاهر هدر در داشبورد آرایشگر ---------- */
.cover-preview{
  position:relative; overflow:hidden; border-radius:var(--radius-md); margin-bottom:16px;
  background:rgb(var(--hero-rgb)); color:#fff; padding:26px 20px 30px; min-height:132px;
  display:flex; align-items:center; gap:16px;
}
.cover-preview::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(420px 220px at 85% 0%, rgba(var(--hero-glow-rgb),.28), transparent 60%);
}
.cover-preview.has-cover::before{
  background:
    radial-gradient(420px 220px at 85% 0%, rgba(var(--hero-glow-rgb),.22), transparent 60%),
    linear-gradient(180deg, rgba(var(--hero-rgb),.55) 0%, rgba(var(--hero-rgb),.86) 100%);
}
.cover-preview .detail-cover{display:none;}
.cover-preview.has-cover .detail-cover{display:block;}
.cover-preview-avatar,
.cover-preview-text{position:relative; z-index:2;}
.cover-preview-avatar{
  width:64px; height:64px; border-radius:16px; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.5rem;
}
.cover-preview-avatar img{width:100%; height:100%; object-fit:cover;}
.cover-preview-text b{display:block; font-size:1.05rem;}
.cover-preview-text span{font-size:.8rem; opacity:.85;}

.theme-picker{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.theme-picker label{margin:0; cursor:pointer; position:relative;}
.theme-picker input{position:absolute; opacity:0; pointer-events:none;}
.theme-swatch{
  display:flex; align-items:center; gap:8px; padding:7px 13px 7px 11px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white); font-size:.84rem; font-weight:700; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.theme-swatch i{
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, rgb(var(--hero-rgb)) 55%, rgb(var(--hero-glow-rgb)) 55%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.theme-picker input:checked + .theme-swatch{border-color:var(--ink); box-shadow:0 0 0 2px var(--ink) inset;}
.theme-picker input:focus-visible + .theme-swatch{outline:2px solid var(--gold); outline-offset:2px;}
.cover-remove-row{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.86rem;}
.cover-remove-row label{margin:0; font-weight:600;}

.detail-body{margin-top:-56px; position:relative; z-index:3; display:grid; grid-template-columns:2fr 1fr; gap:26px;}
@media (max-width:940px){.detail-body{grid-template-columns:1fr;}}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.gallery img{aspect-ratio:1/1; object-fit:cover; border-radius:12px;}

/* نمونه‌کارها در پروفایل عمومی آرایشگر: کارت‌های تمام‌عرض با اسکرول افقی (اسنپ) */
.portfolio-grid{
  display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px 2px 6px;
}
.portfolio-grid::-webkit-scrollbar{display:none;}
.portfolio-card{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  margin:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-soft); display:flex; flex-direction:column;
}
.portfolio-card img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block;}
.portfolio-card figcaption{
  padding:12px 14px 14px; font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.6;
  border-top:1px solid var(--line);
}
@media (max-width:640px){.portfolio-card img{aspect-ratio:4/3;}}
.portfolio-dots{display:flex; justify-content:center; gap:7px; margin-top:12px;}
.portfolio-dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--line); cursor:pointer;
  transition:background .15s ease, width .15s ease;
}
.portfolio-dots button.active{background:var(--brand); width:22px; border-radius:999px;}

/* =========================================================
   انتخاب خدمت ← روز ← ساعت (پروفایل آرایشگر + مدیریت زمان‌ها در داشبورد)
   سه سطح با ظاهر کاملاً متفاوت تا کاربر هرگز آن‌ها را با هم اشتباه نگیرد:
     ۱) خدمت  : کارت سفید با حاشیه‌ی نازک؛ انتخاب‌شده = زمینه‌ی سبز روشن + حاشیه‌ی سبز + تیک
     ۲) روز   : کاشی تقویمی (روزهفته / عدد / ماه)؛ انتخاب‌شده = زغالی تیره با روزهفته‌ی طلایی
     ۳) ساعت  : دکمه‌ی خنثی و کشیده؛ هاور/لمس = سبز
   ========================================================= */

/* ---------- ۲) روز ---------- */
.day-tabs{
  display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scroll-padding-inline:2px; padding:2px 2px 12px; margin-bottom:16px;
  border-bottom:1px solid var(--line); scrollbar-width:thin;
}
.day-tab{
  flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:0;
  min-width:62px; padding:8px 8px 9px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--ivory);
  color:var(--ink); font-family:inherit; line-height:1.45; white-space:nowrap; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.day-tab-weekday{font-size:.68rem; font-weight:700; color:var(--ink-soft); transition:color .15s ease;}
.day-tab-date{font-size:1.2rem; font-weight:800; line-height:1.3;}
.day-tab-month{font-size:.68rem; font-weight:600; color:var(--ink-soft); transition:color .15s ease;}
.day-tab:hover{border-color:var(--ink-soft); background:var(--white);}
.day-tab.active{
  background:var(--brand); border-color:var(--brand); color:var(--white);
  box-shadow:0 6px 14px -6px rgba(18,59,49,.55);
}
.day-tab.active .day-tab-weekday{color:var(--white);}
.day-tab.active .day-tab-month{color:var(--white);}
@media (max-width:480px){
  .day-tab{min-width:58px; padding:7px 6px 8px;}
  .day-tab-date{font-size:1.1rem;}
}

/* ---------- ۱) نوع خدمت (به همراه دکمه‌ی بعدی/قبلی) ---------- */
.service-tabs-row{display:flex; flex-wrap:nowrap; align-items:center; gap:6px; margin-bottom:14px; width:100%;}
.service-tabs{
  display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scroll-padding-inline:7px; scrollbar-width:thin; flex:1; min-width:0; padding:9px 7px 10px; /* جا برای نشان تیک که کمی بیرون از کارت می‌زند */
}
.service-tab{
  position:relative; flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:124px; padding:11px 18px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--white); color:var(--ink);
  font-family:inherit; white-space:nowrap; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.service-tab-name{font-size:.92rem; font-weight:800;}
.service-tab-meta{font-size:.72rem; font-weight:600; color:var(--ink-soft);}
.service-tab:hover{border-color:var(--brand); box-shadow:0 3px 10px -4px rgba(27,36,32,.18);}
.service-tab.active{
  background:var(--brand-light); border-color:var(--brand); color:var(--brand-dark);
  box-shadow:0 0 0 3px rgba(31,92,77,.12);
}
.service-tab.active .service-tab-meta{color:var(--brand);}
/* نشان تیک روی کارت انتخاب‌شده */
.service-tab::after{
  content:''; position:absolute; top:-7px; inset-inline-start:-7px; width:20px; height:20px; border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow:0 0 0 2px var(--white);
  opacity:0; transform:scale(.4); transition:opacity .15s ease, transform .18s cubic-bezier(.3,1.6,.5,1);
}
.service-tab.active::after{opacity:1; transform:scale(1);}

.tab-nav-btn{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line);
  background:var(--white); color:var(--ink); padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.tab-nav-btn svg{width:16px; height:16px; display:block;}
.tab-nav-btn:hover:not(:disabled){border-color:var(--brand); background:var(--brand-light); color:var(--brand-dark);}
.tab-nav-btn:disabled{opacity:.35; cursor:not-allowed;}
@media (max-width:480px){
  .tab-nav-btn{display:none;} /* روی موبایل اسکرول لمسی جای دکمه‌های فلش را می‌گیرد؛ فضای بیشتری برای کارت‌ها می‌ماند */
  .service-tab{min-width:108px; padding:10px 14px;}
}
.service-panel{display:none;}
.service-panel.active{display:block;}

/* ---------- ۳) ساعت ---------- */
.slot-day-panel{display:none;}
.slot-day-panel.active{display:block;}
.slot-day-panel h4{font-size:.88rem; color:var(--ink-soft); margin-bottom:12px; font-weight:700;}
.slot-service-group{margin-bottom:14px;}
.slot-service-group:last-child{margin-bottom:0;}
.slot-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:10px;}
.slot-pill{
  display:block; text-align:center; border:1.5px solid var(--line); background:var(--white); padding:10px 8px; border-radius:11px;
  font-family:inherit; font-size:.9rem; font-weight:700;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.slot-pill:hover{border-color:var(--brand); background:var(--brand-light); color:var(--brand-dark);}
.slot-pill:active{background:var(--brand); border-color:var(--brand); color:var(--white); transform:scale(.97);}

/* حلقه‌ی فوکوس واضح برای ناوبری با کیبورد */
.service-tab:focus-visible, .day-tab:focus-visible, .slot-pill:focus-visible, .tab-nav-btn:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .service-tab, .service-tab::after, .day-tab, .slot-pill, .tab-nav-btn{transition:none;}
}

.review-item{padding:16px 0; border-bottom:1px solid var(--line);}

/* ---------- Notifications inbox ---------- */
.notification-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; margin-bottom:14px;
}
.notification-unread{border-color:var(--brand); background:var(--brand-light);}

/* ---------- Unread badges (پیام‌ها) ---------- */
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:999px; background:var(--rose); color:var(--white);
  font-size:.68rem; font-weight:800; line-height:1; margin-inline-start:6px;
}
.nav-toggle{position:relative;}
.nav-toggle .nav-toggle-badge{
  position:absolute; top:2px; left:2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--rose); color:var(--white); font-size:.62rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--ivory);
}
.review-item:last-child{border-bottom:0;}
.review-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.review-author{font-weight:700; font-size:.92rem;}
.review-date{font-size:.78rem; color:var(--ink-soft);}

/* ---------- Alerts ---------- */
.messages{position:fixed; top:90px; left:20px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:360px;}
.alert{
  padding:14px 18px; border-radius:12px; font-size:.88rem; font-weight:600; box-shadow:var(--shadow-soft);
  border:1px solid var(--line); background:var(--white); display:flex; align-items:center; gap:10px;
  animation:slide-in .25s ease;
}
@keyframes slide-in{from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:translateX(0);}}
.alert-success{border-color:var(--brand); color:var(--brand-dark); background:var(--brand-light);}
.alert-error{border-color:var(--rose); color:#8f3143; background:#FBEBEE;}
.alert-info{border-color:var(--gold); color:#7A5A1E; background:var(--gold-light);}
.alert-warning{border-color:var(--gold); color:#7A5A1E; background:var(--gold-light);}
@media (max-width:600px){ .messages{left:12px; right:12px; max-width:none;} }

/* ---------- Mobile bottom navigation ---------- */
.mobile-bottom-nav{
  display:none; position:fixed; bottom:0; right:0; left:0; z-index:60;
  background:var(--white); border-top:1px solid var(--line);
  padding:9px 6px calc(9px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px -4px rgba(27,36,32,.12);
}
.mobile-bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px; font-size:.76rem; font-weight:700; color:var(--ink-soft); border-radius:12px;
  line-height:1.3; min-width:0;
}
.mobile-bottom-nav a svg{width:27px; height:27px; flex-shrink:0;}
.mobile-bottom-nav a span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.mobile-bottom-nav a.active{color:var(--brand);}

/* نوار پایین چسبان اختصاصی صفحه (مثل دکمه رزرو در پروفایل آرایشگر) — همان جایگاه نوار پایین را می‌گیرد */
.mobile-sticky-cta{
  display:none; position:fixed; bottom:0; right:0; left:0; z-index:60;
  background:var(--white); border-top:1px solid var(--line);
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px -4px rgba(27,36,32,.12);
  align-items:center; justify-content:space-between; gap:14px;
}
.mobile-sticky-cta .cta-info{min-width:0;}
.mobile-sticky-cta .cta-info b{display:block; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mobile-sticky-cta .cta-info span{font-size:.76rem; color:var(--ink-soft);}
.mobile-sticky-cta .btn{flex-shrink:0;}

@media (max-width:900px){
  .mobile-bottom-nav{display:flex;}
  .mobile-sticky-cta{display:flex;}
  body{padding-bottom:100px;}
}

/* ---------- Footer ---------- */
.footer{background:var(--brand-dark); color:rgba(255,255,255,.7); padding:52px 0 26px; margin-top:70px;}
.footer .brand{color:#fff;}
.footer .footer-brand{display:inline-flex;}
/* نماد سفید لوگو (بدون نام) روی فوتر تیره */
.footer .footer-logo{width:auto; height:72px; display:block; opacity:.7;} /* هم‌رنگ متن فوتر: rgba(255,255,255,.7) */
.footer-grid > div:first-child{text-align:center;}
.footer .brand{display:flex; justify-content:center; margin-left:auto; margin-right:auto;}
.footer-grid p{margin-left:auto; margin-right:auto;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12);}
@media (max-width:760px){
  /* فوتر در موبایل: همه‌چیز وسط‌چین */
  .footer-grid{grid-template-columns:1fr; text-align:center;}
  .footer .brand{display:flex; justify-content:center; margin-left:auto; margin-right:auto;}
  .footer-grid p{margin-left:auto; margin-right:auto;}
  .footer-bottom{flex-direction:column; align-items:center; text-align:center; justify-content:center;}
}
.footer h5{color:#fff; font-size:.9rem; margin-bottom:14px;}
.footer a{display:block; padding:5px 0; font-size:.88rem; color:rgba(255,255,255,.68);}
.footer a:hover{color:var(--gold);}
.footer-bottom{padding-top:22px; font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- Jalali date picker ---------- */
.jdp-wrap{position:relative;}
.jdp-input{cursor:pointer; background:var(--white);}
.jdp-popup{
  display:none; position:absolute; z-index:60; top:calc(100% + 8px); right:0; width:280px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift); padding:14px;
}
.jdp-popup.open{display:block;}
.jdp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.jdp-title{font-weight:800; font-size:.94rem;}
.jdp-nav{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--ivory);
  cursor:pointer; font-size:1rem; color:var(--brand-dark); font-weight:700;
}
.jdp-nav:hover{background:var(--brand-light);}
.jdp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center;}
.jdp-weekdays span{font-size:.72rem; color:var(--ink-soft); font-weight:700; padding-bottom:4px;}
.jdp-day{
  border:0; background:transparent; padding:7px 0; border-radius:8px; font-size:.85rem;
  cursor:pointer; font-family:inherit; color:var(--ink);
}
.jdp-day:hover{background:var(--brand-light); color:var(--brand-dark);}
.jdp-today{border:1.5px solid var(--gold); font-weight:800;}
.jdp-foot{margin-top:10px; text-align:center; border-top:1px solid var(--line); padding-top:10px;}
.jdp-today-btn{
  background:none; border:0; color:var(--brand); font-weight:700; font-size:.82rem; cursor:pointer; font-family:inherit;
}
.jdp-today-btn:hover{text-decoration:underline;}

/* ---------- 24-hour time picker ---------- */
.t24-popup{width:150px; padding:0; max-height:260px; overflow:hidden;}
.t24-list{max-height:260px; overflow-y:auto; padding:8px;}
.t24-item{
  display:block; width:100%; text-align:center; border:0; background:transparent; padding:8px 0;
  border-radius:8px; font-family:inherit; font-size:.9rem; cursor:pointer; direction:ltr; color:var(--ink);
}
.t24-item:hover{background:var(--brand-light); color:var(--brand-dark);}
.t24-active{background:var(--gold-light);}
.time24-input.is-invalid{border-color:var(--rose);}

/* ---------- Install banner (PWA) ---------- */
.install-banner{
  position:fixed; bottom:16px; left:16px; right:16px; z-index:150; max-width:440px; margin:0 auto;
  background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lift);
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  animation:slide-up .3s ease;
}
.install-banner[hidden]{display:none;}
@keyframes slide-up{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.install-banner-icon{font-size:1.6rem; flex-shrink:0;}
.install-banner-text{flex:1; display:flex; flex-direction:column; gap:1px;}
.install-banner-text b{font-size:.9rem;}
.install-banner-text span{font-size:.78rem; color:var(--ink-soft);}
.install-dismiss{
  background:none; border:0; color:var(--ink-soft); font-size:1rem; cursor:pointer; padding:4px; flex-shrink:0;
}
.install-dismiss:hover{color:var(--ink);}

/* ---------- راهنمای نصب PWA در سافاری (آیفون/آیپد و مک) ----------
   هر دو راهنما (iOS و دسکتاپ مک) از همین کلاس‌ها استفاده می‌کنند؛ فقط محتوای
   متنی‌شان در قالب فرق دارد. سافاری برخلاف کروم/اندروید eventِ
   beforeinstallprompt را پشتیبانی نمی‌کند، پس نصب باید دستی و با راهنما انجام شود. */
.ios-guide-overlay{
  position:fixed; inset:0; background:rgba(15,23,20,.55); z-index:200;
  display:flex; align-items:flex-end; justify-content:center; padding:0; backdrop-filter:blur(2px);
}
.ios-guide-overlay[hidden]{display:none;}
.ios-guide-card{
  background:var(--white); width:100%; max-width:440px; border-radius:20px 20px 0 0;
  padding:26px 22px 22px; position:relative; box-shadow:0 -10px 40px rgba(0,0,0,.25);
  max-height:88vh; overflow-y:auto;
}
@media (min-width:640px){
  .ios-guide-overlay{align-items:center; padding:20px;}
  .ios-guide-card{border-radius:20px; max-width:420px;}
}
.ios-guide-card h3{margin:0 0 6px; font-size:1.15rem; padding-left:26px;}
.ios-guide-close{position:absolute; top:14px; left:14px;}
.ios-guide-steps{display:flex; flex-direction:column; gap:16px; margin:20px 0;}
.ios-guide-step{display:flex; gap:12px; align-items:flex-start;}
.ios-guide-num{
  width:28px; height:28px; border-radius:50%; background:var(--brand-light); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex-shrink:0;
}
.ios-guide-step b{display:block; font-size:.92rem; margin-bottom:2px;}
.ios-guide-step p{font-size:.84rem; color:var(--ink-soft); margin:0; line-height:1.6;}
.ios-guide-step kbd{
  display:inline-block; background:var(--ivory); border:1px solid var(--line); border-radius:5px;
  padding:1px 6px; font-size:.78rem; font-family:inherit; direction:ltr; unicode-bidi:isolate;
}

/* ---------- Misc pages ---------- */
.page-header{padding:48px 0 34px; border-bottom:1px solid var(--line); background:var(--ivory-2);}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:32px;}
.pagination a, .pagination span{
  min-width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px;
  border:1px solid var(--line); font-weight:700; font-size:.85rem; background:var(--white);
}
.pagination .current{background:var(--brand); color:#fff; border-color:var(--brand);}

.avatar-lg{width:56px; height:56px; border-radius:50%; overflow:hidden; background:var(--brand-light); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--brand);}
.avatar-lg img{width:100%; height:100%; object-fit:cover;}

.flex{display:flex; flex-wrap:wrap;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-8{gap:8px;}
.gap-12{gap:12px;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}

/* ===== بخش‌های قفل‌شده تا فعال‌سازی درگاه مالی ===== */
.panel-locked{opacity:.6; position:relative;}
.panel-locked .locked-area{pointer-events:none; filter:grayscale(1);}
.tag-locked{background:#F1EFE6; color:var(--ink-soft); border-color:var(--line);}
.dash-nav a.nav-disabled{opacity:.45; cursor:not-allowed;}
.dash-nav a.nav-disabled:hover{background:transparent; color:inherit;}
.nav-links-dashboard-mobile a.nav-disabled{opacity:.45;}
.locked-note{font-size:.82rem; color:var(--ink-soft);}

/* ===== انتخاب نوع ارسال پیام در پنل مدیر ===== */
.mode-choices{display:flex; flex-direction:column; gap:8px;}
.mode-choice{display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; cursor:pointer; margin:0;}
.mode-choice input{width:16px; height:16px; accent-color:var(--brand-dark); cursor:pointer;}

/* ---------- آموزش داشبورد آرایشگر ---------- */
.guide-hero{
  background:linear-gradient(135deg, var(--brand-dark), var(--brand) 78%);
  color:#fff; border-radius:var(--radius-lg); padding:34px 30px; margin-bottom:28px;
  box-shadow:var(--shadow-lift); position:relative; overflow:hidden;
}
.guide-hero::after{
  content:'✂️'; position:absolute; font-size:9rem; opacity:.10; left:-18px; bottom:-30px;
  transform:rotate(-18deg);
}
.guide-hero h1{color:#fff; font-size:1.6rem; margin-bottom:8px; position:relative;}
.guide-hero p{color:rgba(255,255,255,.86); max-width:640px; margin-bottom:0; position:relative; line-height:1.9;}
.guide-hero .badge{background:rgba(255,255,255,.16); color:#fff; margin-top:14px;}

.guide-toc{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px;}
.guide-toc a{
  background:var(--white); border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  font-size:.82rem; font-weight:700; color:var(--brand-dark); transition:background .15s ease, border-color .15s ease;
}
.guide-toc a:hover{background:var(--brand-light); border-color:var(--brand);}

.guide-section{margin-bottom:22px; scroll-margin-top:90px;}
.guide-section .panel-head h2{display:flex; align-items:center; gap:10px; font-size:1.08rem;}
.guide-section .panel-head .emo{
  width:38px; height:38px; border-radius:11px; background:var(--brand-light); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none;
}
.guide-section p{color:var(--ink-soft); line-height:1.95;}
.guide-section ol, .guide-section ul{margin:0 0 14px; padding-inline-start:22px; color:var(--ink-soft); line-height:2;}
.guide-section ol li, .guide-section ul li{margin-bottom:4px;}
.guide-section .btn-sm{margin-top:6px;}

.guide-example{
  background:var(--ivory-2); border:1px dashed var(--line); border-radius:var(--radius-md);
  padding:14px 16px; font-size:.86rem; color:var(--ink-soft); margin:12px 0;
}
.guide-example b{color:var(--brand-dark);}

.callout{
  display:flex; gap:12px; align-items:flex-start; border-radius:var(--radius-md);
  padding:16px 18px; margin:14px 0; border:1.5px solid;
}
.callout .emo{font-size:1.15rem; flex:none;}
.callout p{margin:0; color:inherit; line-height:1.85;}
.callout-tip{background:var(--brand-light); border-color:var(--brand); color:var(--brand-dark);}
.callout-gold{background:var(--gold-light); border-color:var(--gold); color:#7A5A1E;}
.callout-warn{background:#F6E3E6; border-color:var(--rose); color:#7A2E3C;}

.check-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0;}
@media (max-width:700px){.check-grid{grid-template-columns:1fr;}}
.check-item{
  display:flex; gap:10px; align-items:flex-start; background:var(--ivory-2); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:.88rem; font-weight:600; color:var(--ink);
}
.check-item .tick{
  width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:900;
}

.faq{display:flex; flex-direction:column; gap:10px;}
.faq details{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:4px 18px; transition:border-color .15s ease;
}
.faq details[open]{border-color:var(--brand);}
.faq summary{
  cursor:pointer; list-style:none; padding:14px 0; font-weight:700; font-size:.94rem;
  display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--brand-dark);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+'; font-size:1.3rem; font-weight:400; color:var(--brand); transition:transform .18s ease; flex:none;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .faq-answer{padding:0 0 16px; color:var(--ink-soft); font-size:.9rem; line-height:1.9;}

/* ---------- آپلودر عکس پروفایل ---------- */
.avatar-uploader{
  display:flex; align-items:center; gap:20px; padding:18px;
  background:var(--ivory); border:1.5px dashed var(--line); border-radius:var(--radius-md);
  transition:border-color .18s ease, background .18s ease;
}
.avatar-uploader.is-dragover{border-color:var(--brand); background:var(--brand-light);}
.avatar-uploader.has-error{border-color:var(--rose);}
.avatar-uploader-preview{
  position:relative; flex-shrink:0; width:96px; height:96px; margin:0; cursor:pointer;
  border-radius:50%; background:var(--brand-light); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px var(--white), 0 0 0 5px var(--line);
}
.avatar-uploader-img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.avatar-uploader-img[hidden], .avatar-uploader-empty[hidden]{display:none;}
.avatar-uploader-cam{
  position:absolute; bottom:-2px; inset-inline-end:-2px; width:32px; height:32px; border-radius:50%;
  background:var(--brand); color:var(--white); border:3px solid var(--white);
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, transform .15s ease;
}
.avatar-uploader-preview:hover .avatar-uploader-cam{background:var(--brand-dark); transform:scale(1.08);}
.avatar-uploader-body{min-width:0; flex:1;}
.avatar-uploader-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px;}
.avatar-uploader-input, .avatar-uploader-remove{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; opacity:0;
}
.avatar-uploader-input:focus-visible + .avatar-uploader-pick{outline:2px solid var(--brand); outline-offset:2px;}
.avatar-uploader-pick{cursor:pointer; margin:0;}
.avatar-uploader-clear{color:var(--rose);}
.avatar-uploader-clear:hover{background:#FBEBEE; color:#8f3143;}
.avatar-uploader-clear[hidden]{display:none;}
.avatar-uploader-status{margin:6px 0 2px; font-size:.82rem; font-weight:700; color:var(--brand); min-height:1.2em; overflow-wrap:anywhere;}
.avatar-uploader-status.is-error{color:var(--rose);}
.avatar-uploader .help{margin-top:2px;}
.avatar-uploader .errorlist{margin-top:6px;}
@media (max-width:480px){
  .avatar-uploader{flex-direction:column; text-align:center; gap:14px;}
  .avatar-uploader-actions{justify-content:center;}
}


/* ---------- جدول فشرده (مخصوص موبایل) ---------- */
table.data-table.compact{min-width:0;}
table.data-table .nowrap{white-space:nowrap;}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}
.status-stack{display:flex; flex-direction:column; align-items:stretch; gap:6px;}
.status-stack .badge{justify-content:center; text-align:center;}
.cust-cell{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}

/* تاریخ عمودی: روز / ماه / سال زیر هم */
.date-cell{text-align:center;}
.date-stack{display:inline-flex; flex-direction:column; align-items:center; line-height:1.25;}
.date-stack b{font-size:1.05rem; font-weight:800; color:var(--ink);}
.date-stack span{font-size:.72rem; font-weight:600; color:var(--ink-soft);}
.date-stack .date-year{font-size:.66rem; font-weight:500; opacity:.8;}

/* علامت وجود یادداشت کنار نام مشتری */
.note-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; padding:0; border-radius:50%;
  background:var(--gold-light); color:#7A5A1E; border:1px solid var(--gold); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.note-btn:hover, .note-btn:focus-visible{background:var(--gold); color:var(--white);}

@media (max-width:900px){
  table.data-table.compact th, table.data-table.compact td{padding:8px 4px; font-size:.8rem;}
  table.data-table.compact th{font-size:.72rem;}
  table.data-table.compact .badge{padding:3px 7px; font-size:.7rem;}
  table.data-table.compact .btn-sm{padding:6px 8px; font-size:.72rem; white-space:nowrap;}
  table.data-table.compact .row-actions{flex-direction:column; gap:5px;}
}

/* پنجره‌ی یادداشت و اطلاعات مشتری */
dialog.cust-dialog{
  border:0; padding:0; border-radius:var(--radius-lg); background:var(--white); color:var(--ink);
  width:min(92vw, 400px); max-height:88vh; overflow:auto; box-shadow:var(--shadow-lift);
}
dialog.cust-dialog::backdrop{background:rgba(27,36,32,.5);}
.cd-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line);}
.cd-head h3{margin:0; font-size:1.05rem;}
.cd-close{border:0; background:transparent; font-size:1.1rem; line-height:1; color:var(--ink-soft); cursor:pointer; padding:6px;}
.cd-body{padding:16px 18px;}
.cd-note-label{font-size:.76rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.cd-note{background:var(--gold-light); border-radius:var(--radius-sm); padding:12px 14px; margin:0 0 16px; line-height:1.9; white-space:pre-wrap; word-break:break-word;}
.cd-info{margin:0;}
.cd-info > div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line);}
.cd-info > div:last-child{border-bottom:0;}
.cd-info dt{font-size:.8rem; color:var(--ink-soft); font-weight:700;}
.cd-info dd{margin:0; font-weight:700; font-size:.9rem; text-align:left;}
.cd-foot{padding:0 18px 18px; text-align:center;}