/* ==========================================================
   خانه ایرانیان — استایل سایت
   توکن‌های رنگ/فونت در :root تعریف شده‌اند؛ برای تغییر برند
   (رنگ، فونت) کافی است همین بخش را ویرایش کنید.
========================================================== */
:root{
  --navy:#1B2440; --navy-2:#2A3660; --ink:#23262B; --ink-soft:#5B5A54;
  --paper:#FAF7F0; --paper-alt:#F1EAD9; --card:#FFFFFF;
  --brass:#A9824C; --brass-light:#C7A76B; --stamp:#8C3B2E;
  --available:#3F7A5C; --busy:#B0A99C; --line:#E2D9C4;
  --warn-bg:#FBEFE8; --warn-line:#D9A889; --warn-ink:#7A3E1E;
  --shadow: 0 18px 40px -22px rgba(27,36,64,.35); --radius: 2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Vazirmatn','Tahoma',sans-serif; line-height:1.85; }
.lat{ font-family:'Newsreader', serif; }
h1,h2,h3{ font-weight:800; color:var(--navy); margin:0; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1140px; margin:0 auto; padding:0 28px; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:'Newsreader',serif; font-style:italic; font-size:14px; letter-spacing:.06em; color:var(--brass); margin-bottom:14px; }
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--brass); }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:var(--radius); font-weight:700; font-size:15px; cursor:pointer; border:1px solid transparent; transition:.18s ease; font-family:inherit; }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn-primary{ background:var(--navy); color:var(--paper); }
.btn-primary:hover{ background:var(--navy-2); box-shadow:var(--shadow); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--paper); }
.btn-gold{ background:var(--brass); color:var(--paper); }
.btn-gold:hover{ background:#95713F; }
.btn-danger{ background:transparent; color:var(--stamp); border-color:var(--stamp); }
.btn-danger:hover{ background:var(--stamp); color:#fff; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; pointer-events:none; }

.seal{ width:84px; height:84px; border-radius:50%; border:1.5px dashed var(--brass); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; animation:seal-in .9s ease both; }
.seal::before{ content:''; position:absolute; inset:9px; border-radius:50%; border:1px solid var(--brass-light); }
.seal svg{ width:26px; height:26px; }
.seal .mark{ position:absolute; bottom:12px; font-family:'Newsreader',serif; font-size:9px; letter-spacing:2px; color:var(--navy); }
.seal.big{ width:150px; height:150px; } .seal.big::before{ inset:16px; } .seal.big svg{ width:46px; height:46px; } .seal.big .mark{ bottom:22px; font-size:12px; }
@keyframes seal-in{ from{opacity:0; transform:scale(.7) rotate(-14deg);} to{opacity:1; transform:scale(1) rotate(0);} }

header{ position:sticky; top:0; z-index:50; background:rgba(250,247,240,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .seal{ width:44px; height:44px; animation:none; } .brand .seal::before{ inset:5px; } .brand .seal svg{ width:14px; height:14px; } .brand .seal .mark{ display:none; }
.brand-name{ font-weight:800; color:var(--navy); font-size:16px; }
.brand-sub{ font-size:11px; color:var(--ink-soft); font-family:'Newsreader',serif; font-style:italic; }
nav.links{ display:flex; gap:30px; align-items:center; }
nav.links a:hover{ color:var(--brass); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; }
.hamburger span{ width:22px; height:2px; background:var(--navy); display:block; }

.hero{ padding:88px 0 70px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.hero h1{ font-size:44px; line-height:1.35; margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--brass); }
.hero p.lead{ font-size:17px; color:var(--ink-soft); max-width:540px; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.badge{ font-size:12.5px; border:1px solid var(--line); background:var(--card); padding:8px 14px; border-radius:20px; color:var(--ink-soft); }
.hero-visual{ display:flex; align-items:center; justify-content:center; }
.hero-panel{ background:var(--navy); border-radius:6px; padding:46px 34px; display:flex; flex-direction:column; align-items:center; gap:18px; box-shadow:var(--shadow); width:100%; max-width:340px; }
.hero-panel .mark{ color:var(--paper) !important; }
.hero-panel p{ color:var(--paper-alt); text-align:center; font-size:13.5px; margin:0; }
.hero-panel .hp-title{ color:#fff; font-weight:700; font-size:15px; }
.hero-fade{ animation:rise .8s ease both; } .hero-fade.d1{ animation-delay:.12s; } .hero-fade.d2{ animation-delay:.24s; } .hero-fade.d3{ animation-delay:.36s; }
@keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

section{ padding:84px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:32px; margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:15.5px; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.alt-bg{ background:var(--paper-alt); }

.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.svc-card{ background:var(--card); border:1px solid var(--line); border-top:3px solid var(--brass); padding:30px 26px; transition:.2s ease; }
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.svc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.svc-code{ font-family:'Newsreader',serif; font-style:italic; font-size:13px; color:var(--brass); border:1px solid var(--brass-light); padding:3px 10px; border-radius:20px; }
.svc-card h3{ font-size:19px; margin-bottom:12px; }
.svc-card ul{ margin:0; padding-inline-start:18px; color:var(--ink-soft); font-size:14px; }
.svc-card li{ margin-bottom:7px; }
.svc-card.wide{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1.4fr; gap:30px; align-items:center; border-top:3px solid var(--stamp); }
.svc-card.wide .svc-code{ color:var(--stamp); border-color:var(--stamp); }

.why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px; }
.why-item{ display:flex; flex-direction:column; gap:10px; }
.why-item .num{ font-family:'Newsreader',serif; font-style:italic; color:var(--brass-light); font-size:26px; }
.why-item h4{ color:var(--navy); font-size:16px; margin:0; }
.why-item p{ color:var(--ink-soft); font-size:14px; margin:0; }

.cta-banner{ background:var(--navy); border-radius:6px; padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-banner h3{ color:#fff; font-size:24px; max-width:440px; }
.cta-banner p{ color:var(--paper-alt); font-size:14px; margin-top:8px; }

footer{ border-top:1px solid var(--line); padding:56px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
footer h5{ color:var(--navy); font-size:14px; margin:0 0 14px; }
footer p, footer a{ color:var(--ink-soft); font-size:13.5px; }
footer .foot-links{ display:flex; flex-direction:column; gap:9px; }
.foot-bottom{ border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--ink-soft); }
.staff-links{ display:flex; gap:16px; }
.staff-links a{ text-decoration:underline; text-underline-offset:3px; }

.screen{ display:none; }
.screen.active{ display:block; }

.sub-head{ background:var(--navy); padding:36px 0 42px; }
.sub-head .back{ color:var(--paper-alt); font-size:13px; display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; }
.sub-head h1{ color:#fff; font-size:28px; }
.sub-head p{ color:var(--paper-alt); font-size:13.5px; max-width:520px; margin-top:8px; }

.warn-banner{ display:flex; gap:12px; align-items:flex-start; background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); padding:16px 18px; font-size:13px; margin:26px 0; border-radius:2px; line-height:1.9; }
.warn-banner b{ display:block; margin-bottom:3px; }

.booking-wrap{ display:grid; grid-template-columns:1fr 320px; gap:40px; padding:36px 0 100px; align-items:start; }
.b-step{ margin-bottom:44px; }
.b-step-label{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.b-step-num{ width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-family:'Newsreader',serif; }
.b-step-label h4{ font-size:16px; color:var(--navy); margin:0; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ padding:9px 16px; border:1px solid var(--line); border-radius:20px; font-size:13px; background:#fff; cursor:pointer; transition:.15s ease; color:var(--ink-soft); }
.chip:hover{ border-color:var(--brass); }
.chip.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.lawyer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.lawyer-card{ background:#fff; border:1px solid var(--line); padding:20px; cursor:pointer; transition:.15s ease; display:flex; gap:14px; align-items:flex-start; }
.lawyer-card:hover{ border-color:var(--brass); }
.lawyer-card.selected{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy) inset; background:var(--paper-alt); }
.l-avatar{ width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.lawyer-card h5{ margin:0 0 4px; font-size:14.5px; color:var(--navy); }
.lawyer-card .spec{ font-size:12.5px; color:var(--brass); margin-bottom:4px; }
.lawyer-card .lang{ font-size:11.5px; color:var(--ink-soft); }
.mode-row{ display:flex; gap:14px; }
.mode-card{ flex:1; border:1px solid var(--line); background:#fff; padding:18px; cursor:pointer; text-align:center; transition:.15s ease; }
.mode-card:hover{ border-color:var(--brass); }
.mode-card.selected{ border-color:var(--navy); background:var(--paper-alt); }
.mode-card .mtitle{ font-weight:700; color:var(--navy); font-size:14px; margin-bottom:4px; }
.mode-card .msub{ font-size:12px; color:var(--ink-soft); }
.date-strip{ display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.date-pill{ min-width:74px; border:1px solid var(--line); background:#fff; padding:12px 8px; text-align:center; cursor:pointer; flex-shrink:0; transition:.15s ease; }
.date-pill:hover{ border-color:var(--brass); }
.date-pill.selected{ border-color:var(--navy); background:var(--navy); }
.date-pill.selected .dweek,.date-pill.selected .dnum,.date-pill.selected .dmon{ color:#fff; }
.date-pill .dweek{ font-size:11px; color:var(--ink-soft); display:block; margin-bottom:4px; }
.date-pill .dnum{ font-size:18px; font-weight:800; color:var(--navy); display:block; font-family:'Newsreader',serif; }
.date-pill .dmon{ font-size:10.5px; color:var(--ink-soft); display:block; margin-top:2px; }
.slot-legend{ display:flex; gap:18px; margin-bottom:14px; font-size:12.5px; color:var(--ink-soft); }
.slot-legend span{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.free{ background:var(--available); } .dot.busy{ background:var(--busy); }
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.slot{ border:1px solid var(--available); color:var(--available); background:#fff; padding:11px 6px; text-align:center; font-size:13px; cursor:pointer; font-family:'Newsreader',serif; transition:.15s ease; }
.slot:hover{ background:var(--available); color:#fff; }
.slot.selected{ background:var(--navy); border-color:var(--navy); color:#fff; }
.slot.busy{ border-color:var(--line); color:var(--busy); background:var(--paper-alt); cursor:not-allowed; text-decoration:line-through; }
.slot-loading{ color:var(--ink-soft); font-size:13px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1/-1; }
label{ font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:7px; }
input,textarea,select{ width:100%; border:1px solid var(--line); background:#fff; padding:12px 14px; font-family:'Vazirmatn',sans-serif; font-size:14px; color:var(--ink); border-radius:2px; }
input:focus,textarea:focus,select:focus{ outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass); }
textarea{ resize:vertical; min-height:90px; }
.summary{ background:var(--card); border:1px solid var(--line); border-top:3px solid var(--navy); padding:26px; position:sticky; top:90px; }
.summary h4{ font-size:15px; color:var(--navy); margin-bottom:18px; }
.sum-row{ display:flex; justify-content:space-between; font-size:13px; padding:10px 0; border-bottom:1px dashed var(--line); color:var(--ink-soft); }
.sum-row b{ color:var(--ink); font-weight:600; }
.summary .btn{ width:100%; justify-content:center; margin-top:20px; }
.form-error{ color:var(--stamp); font-size:12.5px; margin-top:10px; }
.confirm-screen{ text-align:center; padding:70px 0 100px; }
.confirm-screen .seal{ margin:0 auto 30px; }
.confirm-screen h2{ font-size:28px; margin-bottom:14px; }
.confirm-screen p{ color:var(--ink-soft); max-width:440px; margin:0 auto 30px; }
.confirm-card{ max-width:420px; margin:0 auto 34px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--available); padding:24px; text-align:right; }

.gate-wrap{ max-width:420px; margin:60px auto 120px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); padding:36px; }
.gate-wrap h3{ font-size:19px; margin-bottom:8px; }
.gate-wrap p.hint{ color:var(--ink-soft); font-size:13px; margin-bottom:22px; }
.gate-wrap .btn{ width:100%; justify-content:center; margin-top:14px; }
.gate-wrap label{ margin-top:12px; }
.gate-error{ color:var(--stamp); font-size:12.5px; margin-top:10px; display:none; }

.dash-wrap{ padding:36px 0 100px; }
.dash-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.dash-tabs{ display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap; }
.dash-tab{ padding:10px 18px; border:1px solid var(--line); background:#fff; font-size:13.5px; cursor:pointer; color:var(--ink-soft); }
.dash-tab.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.dash-panel{ display:none; }
.dash-panel.active{ display:block; }
.filter-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.filter-row select{ width:auto; min-width:160px; }

table.b-table{ width:100%; border-collapse:collapse; background:#fff; font-size:13px; }
table.b-table th{ text-align:right; background:var(--paper-alt); color:var(--navy); padding:12px 14px; font-size:12.5px; border-bottom:1px solid var(--line); }
table.b-table td{ padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top; }
table.b-table tr:hover td{ background:#FCFAF5; }
.status-badge{ font-size:11.5px; padding:4px 10px; border-radius:14px; display:inline-block; }
.status-pending{ background:#F1EAD9; color:var(--brass); }
.status-confirmed{ background:#E4EFE9; color:var(--available); }
.status-cancelled{ background:#F3E4E1; color:var(--stamp); }
.row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.empty-note{ color:var(--ink-soft); font-size:13.5px; padding:30px; text-align:center; border:1px dashed var(--line); background:#fff; }

.editor-card{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--brass); padding:26px; margin-bottom:24px; }
.editor-card h4{ font-size:15px; color:var(--navy); margin-bottom:18px; }
.lawyer-edit-row{ border:1px solid var(--line); padding:16px; margin-bottom:14px; }
.lawyer-edit-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.tag-check-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tag-check{ font-size:11.5px; border:1px solid var(--line); padding:4px 9px; border-radius:12px; cursor:pointer; user-select:none; color:var(--ink-soft); }
.tag-check.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.lawyer-row-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.lawyer-row-actions .status-active{ color:var(--available); font-size:12px; }
.lawyer-row-actions .status-inactive{ color:var(--busy); font-size:12px; }
.save-row{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; align-items:center; }
.save-msg{ font-size:12.5px; color:var(--available); margin-inline-end:auto; opacity:0; transition:opacity .3s ease; }
.save-msg.show{ opacity:1; }
.new-lawyer-form{ border:1px dashed var(--brass-light); padding:18px; margin-top:10px; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; } .booking-wrap{ grid-template-columns:1fr; } .summary{ position:static; }
  .foot-grid{ grid-template-columns:1fr 1fr; } .svc-card.wide{ grid-template-columns:1fr; }
  .lawyer-edit-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  nav.links{ display:none; } .hamburger{ display:flex; } .hero h1{ font-size:32px; }
  .form-grid{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; } .cta-banner{ flex-direction:column; align-items:flex-start; }
  table.b-table{ display:block; overflow-x:auto; white-space:nowrap; }
  .lawyer-edit-grid{ grid-template-columns:1fr; }
  /* منوی موبایل: دکمه همبرگری این کلاس را toggle می‌کند (در app.js) —
     پیش از این هیچ استایلی برایش تعریف نشده بود و عملاً کاری نمی‌کرد. */
  nav.links.mobile-open{
    display:flex; flex-direction:column; align-items:flex-start; gap:14px;
    position:absolute; top:100%; right:0; left:0; background:var(--paper);
    border-bottom:1px solid var(--line); padding:20px 28px; box-shadow:var(--shadow);
    z-index:60;
  }
}