/* ==========================================================
   Azmoudeh Education Center (AAC) — main.css
   Tokens, base, layout, shared components, public pages.
   Direction-aware: uses logical properties (inline-start/end)
   so the same rules serve both RTL (Dari) and LTR (English).
   ========================================================== */

@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url("../fonts/Poppins-Regular.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url("../fonts/Poppins-Medium.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url("../fonts/Poppins-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url("../fonts/Poppins-Bold.ttf") format("truetype")}
/* Bundled fallback that guarantees Persian glyphs everywhere.
   For a nicer look install/bundle Vazirmatn (see docs/README.md). */
@font-face{font-family:"AAC Fallback";font-weight:400;font-display:swap;src:url("../fonts/DejaVuSans.ttf") format("truetype")}
@font-face{font-family:"AAC Fallback";font-weight:600 700;font-display:swap;src:url("../fonts/DejaVuSans-Bold.ttf") format("truetype")}

:root{
  --color-primary:#16A9D8;
  --color-primary-dark:#087EA4;
  --color-navy:#20374B;
  --color-cream:#F7F1E7;
  --color-background:#FFFCF7;
  --color-soft-blue:#E7F4FA;
  --color-accent-yellow:#E7E900;
  --color-teal:#63AFA6;
  --color-text:#273746;
  --color-muted:#5F6B75;       /* darkened from the suggested #74808A for AA contrast */
  --color-border:#E5E0D8;
  --color-success:#2B7A5E;
  --color-success-bg:#E3F2EC;
  --color-warning:#A8661A;
  --color-warning-bg:#FBEFDC;
  --color-danger:#B24141;
  --color-danger-bg:#F9E4E4;
  --color-white:#fff;

  --radius-sm:8px; --radius:12px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(32,55,75,.06);
  --shadow:0 4px 18px rgba(32,55,75,.07);
  --shadow-lg:0 12px 36px rgba(32,55,75,.12);
  --container:1180px;
  --header-h:72px;
  --font-latin:"Poppins","Segoe UI",system-ui,sans-serif;
  --font-fa:"Poppins","Vazirmatn","Vazir","Segoe UI",Tahoma,"Noto Sans Arabic","Geeza Pro","AAC Fallback",sans-serif;
  --font:var(--font-latin);
}
html[lang="fa"]{--font:var(--font-fa)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.7;color:var(--color-text);background:var(--color-background);overflow-x:hidden}
html[lang="fa"] body{line-height:1.9}
img,svg{max-width:100%}
a{color:var(--color-primary-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--color-navy);line-height:1.35;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(1.9rem,4.2vw,3rem)}
h2{font-size:clamp(1.45rem,3vw,2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--color-primary-dark);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:8px;top:-60px;background:var(--color-navy);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);z-index:300}
.skip-link:focus{top:8px}
.container{width:min(100% - 32px,var(--container));margin-inline:auto}
.icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}
[dir="rtl"] .flip-rtl{transform:scaleX(-1)}
[hidden]{display:none!important}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:.55em 1.3em;border-radius:var(--radius);border:2px solid transparent;font:600 .95rem/1.4 var(--font);cursor:pointer;text-decoration:none!important;transition:background .15s,color .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary-dark);color:#fff}
.btn-primary:hover{background:var(--color-navy)}
.btn-outline{background:transparent;color:var(--color-navy);border-color:var(--color-navy)}
.btn-outline:hover{background:var(--color-navy);color:#fff}
.btn-yellow{background:var(--color-accent-yellow);color:var(--color-navy)}
.btn-yellow:hover{background:#d3d500}
.btn-ghost{background:transparent;color:var(--color-primary-dark)}
.btn-ghost:hover{background:var(--color-soft-blue)}
.btn-danger{background:var(--color-danger);color:#fff}
.btn-danger:hover{background:#8f3030}
.btn-sm{min-height:36px;padding:.3em .9em;font-size:.85rem;border-radius:var(--radius-sm)}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ---------- Forms ---------- */
.field{margin-bottom:1rem}
.field label,.label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem;color:var(--color-navy)}
.input,.select,.textarea{width:100%;min-height:44px;padding:.55em .85em;font:inherit;color:var(--color-text);background:#fff;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s}
.textarea{min-height:110px;resize:vertical}
.input:hover,.select:hover,.textarea:hover{border-color:#c9c2b6}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--color-primary-dark);box-shadow:0 0 0 3px rgba(22,169,216,.25)}
.input:disabled,.select:disabled{background:#f2efe9;color:var(--color-muted)}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--color-danger);background:#fffafa}
.field-error{display:none;margin-top:.3rem;font-size:.85rem;color:var(--color-danger);font-weight:500}
.field.has-error .field-error{display:flex;gap:.35em;align-items:flex-start}
.field-hint{font-size:.82rem;color:var(--color-muted);margin-top:.25rem}
.pw-wrap{position:relative}
.pw-wrap .input{padding-inline-end:48px}
.pw-toggle{position:absolute;inset-inline-end:4px;top:4px;width:36px;height:36px;border:0;background:transparent;color:var(--color-muted);border-radius:var(--radius-sm);cursor:pointer;display:grid;place-items:center}
.pw-toggle:hover{background:var(--color-soft-blue);color:var(--color-navy)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.alert{display:flex;gap:.6em;align-items:flex-start;padding:.8em 1em;border-radius:var(--radius-sm);font-size:.93rem;border:1px solid transparent}
.alert-error{background:var(--color-danger-bg);color:#7d2b2b;border-color:#efc2c2}
.alert-success{background:var(--color-success-bg);color:#1d5a44;border-color:#bfe0d1}
.alert-info{background:var(--color-soft-blue);color:var(--color-navy);border-color:#bfe1ef}
.alert-warn{background:var(--color-warning-bg);color:#7a4a10;border-color:#efd5ab}

/* ---------- Badges (status never relies on colour alone: icon/text always included) ---------- */
.badge{display:inline-flex;align-items:center;gap:.35em;padding:.15em .7em;border-radius:99px;font-size:.78rem;font-weight:600;background:var(--color-soft-blue);color:var(--color-navy);white-space:nowrap}
.badge .icon{width:1em;height:1em}
.badge-success{background:var(--color-success-bg);color:var(--color-success)}
.badge-warn{background:var(--color-warning-bg);color:var(--color-warning)}
.badge-danger{background:var(--color-danger-bg);color:var(--color-danger)}
.badge-muted{background:#eee9e0;color:#555f68}
.badge-demo{background:var(--color-accent-yellow);color:var(--color-navy)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,252,247,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--color-navy);text-decoration:none!important;min-width:0}
.brand-logo{width:52px;height:52px;border-radius:10px;background:#fff;border:1px solid var(--color-border);padding:2px;flex:none;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-text strong{font-size:1.02rem}
.brand-text span{font-size:.74rem;color:var(--color-muted)}
.main-nav{margin-inline-start:auto}
.main-nav ul{display:flex;gap:.25rem;align-items:center}
.main-nav a{display:block;padding:.45em .85em;border-radius:var(--radius-sm);color:var(--color-text);font-weight:500;font-size:.95rem}
.main-nav a:hover{background:var(--color-soft-blue);text-decoration:none}
.main-nav a[aria-current="page"]{color:var(--color-primary-dark);background:var(--color-soft-blue);font-weight:600}
.header-actions{display:flex;gap:.5rem;align-items:center}
.lang-switch{display:inline-flex;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.lang-switch button{border:0;background:transparent;font:600 .82rem var(--font);padding:.45em .8em;min-height:38px;cursor:pointer;color:var(--color-text)}
.lang-switch button[aria-pressed="true"]{background:var(--color-navy);color:#fff}
.lang-switch button:not([aria-pressed="true"]):hover{background:var(--color-soft-blue)}
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid var(--color-border);background:#fff;border-radius:var(--radius-sm);cursor:pointer;color:var(--color-navy);place-items:center}

/* ---------- Hero (diamond lattice echoes the logo's geometric field) ---------- */
.hero{position:relative;overflow:hidden;background:var(--color-cream)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center;padding-block:56px 64px}
.hero h1{margin-bottom:.4em}
.hero .lead{font-size:1.12rem;color:var(--color-muted);max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.hero-art{position:relative;display:grid;place-items:center;min-height:340px}
.diamond-field{position:absolute;inset:0;margin:auto;width:min(100%,440px);aspect-ratio:1;background:var(--color-primary);transform:rotate(45deg) scale(.72);border-radius:28px;overflow:hidden}
.diamond-field::before{content:"";position:absolute;inset:-20%;background:
  linear-gradient(45deg,transparent 48%,rgba(255,255,255,.22) 49%,rgba(255,255,255,.22) 51%,transparent 52%) 0 0/48px 48px,
  linear-gradient(-45deg,transparent 48%,rgba(255,255,255,.22) 49%,rgba(255,255,255,.22) 51%,transparent 52%) 0 0/48px 48px}
.hero-logo{position:relative;width:min(70%,300px);aspect-ratio:1;background:#fff;border-radius:18px;padding:10px;box-shadow:var(--shadow-lg);object-fit:contain}
.hero-art .check-chip{position:absolute;inset-inline-start:2%;bottom:8%;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:.6em .9em;display:flex;gap:.5em;align-items:center;font-size:.85rem;font-weight:600;color:var(--color-navy)}
.hero-band{height:14px;background:
  linear-gradient(45deg,var(--color-primary) 25%,transparent 25%) 0 0/28px 14px,
  linear-gradient(-45deg,var(--color-primary) 25%,transparent 25%) 0 0/28px 14px,var(--color-accent-yellow)}

/* ---------- Sections ---------- */
.section{padding-block:64px}
.section-alt{background:var(--color-cream)}
.section-blue{background:var(--color-navy);color:#e9f1f6}
.section-blue h2,.section-blue h3{color:#fff}
.section-head{max-width:62ch;margin-bottom:2rem}
.section-head p{color:var(--color-muted)}
.section-blue .section-head p{color:#c4d4df}
.page-hero{background:var(--color-cream);padding-block:44px 36px;border-bottom:1px solid var(--color-border)}
.page-hero p{color:var(--color-muted);max-width:64ch;margin:0}
.breadcrumb{display:flex;gap:.4rem;font-size:.85rem;color:var(--color-muted);margin-bottom:.8rem;flex-wrap:wrap}
.breadcrumb a{color:var(--color-muted)}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:.4em}
.card-link{display:flex;flex-direction:column;color:inherit;text-decoration:none!important;transition:box-shadow .2s,border-color .2s}
.card-link:hover{box-shadow:var(--shadow);border-color:var(--color-primary)}
.cat-card{display:flex;gap:1rem;align-items:flex-start}
.cat-icon{width:48px;height:48px;border-radius:12px;background:var(--color-soft-blue);color:var(--color-primary-dark);display:grid;place-items:center;flex:none}
.cat-icon .icon{width:26px;height:26px}
.cat-card p{margin:0;color:var(--color-muted);font-size:.92rem}
.cat-card .count{font-size:.8rem;color:var(--color-primary-dark);font-weight:600;margin-top:.5rem;display:block}

.kankor-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;background:#fff;border:2px solid var(--color-primary);border-radius:var(--radius-lg);padding:2rem;position:relative}
.kankor-feature::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:10px;background:var(--color-accent-yellow);border-start-start-radius:18px;border-end-start-radius:18px}
.check-list li{display:flex;gap:.6em;align-items:flex-start;margin-bottom:.55em}
.check-list .icon{color:var(--color-success);margin-top:.3em}

.course-card{display:flex;flex-direction:column;height:100%}
.course-card .top{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start;margin-bottom:.8rem;flex-wrap:wrap}
.course-card h3{font-size:1.1rem}
.course-card .sub{font-size:.85rem;color:var(--color-muted);margin:-.3em 0 .6em;direction:ltr;text-align:start}
html[dir="ltr"] .course-card .sub{direction:ltr}
.course-card p.desc{color:var(--color-muted);font-size:.92rem;flex:1}
.meta-list{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.83rem;color:var(--color-muted);margin:.4rem 0 1rem}
.meta-list span{display:inline-flex;gap:.35em;align-items:center}
.cap-bar{height:6px;background:#eee9e0;border-radius:6px;overflow:hidden}
.cap-bar i{display:block;height:100%;background:var(--color-teal)}

.stat{text-align:center;padding:1.4rem 1rem}
.stat b{display:block;font-size:2rem;color:var(--color-navy);line-height:1.2}
.section-blue .stat b{color:var(--color-accent-yellow)}
.stat span{font-size:.92rem;color:var(--color-muted)}
.section-blue .stat span{color:#c4d4df}
.stat-card{border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);background:rgba(255,255,255,.06)}

.notice{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--color-border)}
.notice:last-child{border:0}
.notice-date{flex:none;min-width:84px;font-size:.82rem;color:var(--color-muted);font-weight:600}
.notice h3{font-size:1rem;margin-bottom:.15em}
.notice p{margin:0;font-size:.92rem;color:var(--color-muted)}

/* ---------- Filters ---------- */
.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:.75rem;align-items:end;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem;margin-block:-28px 1.5rem;position:relative;box-shadow:var(--shadow)}
.filters .field{margin:0}
.results-info{color:var(--color-muted);font-size:.9rem;margin-bottom:1rem}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--color-muted);border:2px dashed var(--color-border);border-radius:var(--radius-lg);background:#fff}
.empty-state .icon{width:40px;height:40px;color:var(--color-primary)}
.empty-state h3{margin-top:.5rem}

/* ---------- Course details ---------- */
.detail-layout{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start}
.detail-layout aside{position:sticky;top:calc(var(--header-h) + 16px)}
.info-list li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--color-border);font-size:.92rem}
.info-list li:last-child{border:0}
.info-list li span:first-child{color:var(--color-muted)}
.info-list li span:last-child{font-weight:600;text-align:end}
.detail-block{margin-bottom:2rem}
.topic-list{counter-reset:t}
.topic-list li{counter-increment:t;display:flex;gap:.8rem;padding:.65rem 0;border-bottom:1px dashed var(--color-border)}
.topic-list li::before{content:counter(t);flex:none;width:28px;height:28px;border-radius:50%;background:var(--color-soft-blue);color:var(--color-primary-dark);font-weight:700;font-size:.82rem;display:grid;place-items:center}
.week-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.week-slot{background:var(--color-soft-blue);border-radius:var(--radius);padding:.75rem 1rem;font-size:.9rem}
.week-slot b{display:block;color:var(--color-navy)}
.tag-row{display:flex;flex-wrap:wrap;gap:.4rem}

/* ---------- Contact / login ---------- */
.contact-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem}
.contact-list li{display:flex;gap:.8rem;margin-bottom:1rem;align-items:flex-start}
.contact-list .cat-icon{width:40px;height:40px}
.editable-note{font-size:.82rem;color:var(--color-warning);background:var(--color-warning-bg);border-radius:var(--radius-sm);padding:.5em .8em;margin-top:1rem}
.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--color-background)}
.login-side{background:var(--color-primary);position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2.5rem;text-align:center}
.login-side::before{content:"";position:absolute;inset:0;background:
  linear-gradient(45deg,transparent 48%,rgba(255,255,255,.2) 49%,rgba(255,255,255,.2) 51%,transparent 52%) 0 0/56px 56px,
  linear-gradient(-45deg,transparent 48%,rgba(255,255,255,.2) 49%,rgba(255,255,255,.2) 51%,transparent 52%) 0 0/56px 56px}
.login-side>*{position:relative}
.login-side img{width:min(60%,240px);border-radius:18px;background:#fff;padding:8px;box-shadow:var(--shadow-lg);margin-bottom:1.5rem}
.login-side h2{color:#fff}
.login-side p{max-width:36ch;color:#06364a;font-weight:500}
.login-main{display:flex;flex-direction:column;padding:1.5rem 2rem;justify-content:center}
.login-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:1rem}
.login-box{width:min(100%,430px);margin-inline:auto}
.demo-accounts{margin-top:1.5rem;border:1px dashed var(--color-primary-dark);border-radius:var(--radius);padding:1rem;background:var(--color-soft-blue)}
.demo-accounts h3{font-size:.95rem;margin-bottom:.6rem}
.demo-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.4rem 0;font-size:.88rem;flex-wrap:wrap}
.demo-row code{direction:ltr;unicode-bidi:isolate;background:#fff;padding:.1em .5em;border-radius:6px;font-size:.82rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-navy);color:#c4d4df;padding-top:48px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem;padding-bottom:32px}
.site-footer h3{color:#fff;font-size:1rem}
.site-footer a{color:#c4d4df}
.site-footer li{margin-bottom:.4rem;font-size:.92rem}
.footer-brand{display:flex;gap:.75rem;align-items:center;margin-bottom:.8rem}
.footer-brand img{width:56px;height:56px;border-radius:10px;background:#fff;padding:2px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-block:16px;font-size:.82rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- Toasts / modal ---------- */
.toast-region{position:fixed;inset-inline-end:16px;bottom:16px;z-index:500;display:flex;flex-direction:column;gap:.5rem;max-width:min(92vw,380px)}
.toast{display:flex;gap:.6em;align-items:flex-start;background:#fff;border:1px solid var(--color-border);border-inline-start:5px solid var(--color-primary);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:.75em 1em;font-size:.92rem;animation:toast-in .2s ease-out}
.toast-success{border-inline-start-color:var(--color-success)}
.toast-error{border-inline-start-color:var(--color-danger)}
.toast-warn{border-inline-start-color:var(--color-warning)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal-backdrop{position:fixed;inset:0;background:rgba(32,55,75,.55);z-index:400;display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal{background:#fff;border-radius:var(--radius-lg);width:min(100%,560px);max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:toast-in .18s ease-out}
.modal.modal-lg{width:min(100%,820px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem;border-bottom:1px solid var(--color-border);position:sticky;top:0;background:#fff;z-index:1}
.modal-head h2{font-size:1.2rem;margin:0}
.modal-body{padding:1.2rem 1.4rem}
.modal-foot{display:flex;gap:.6rem;justify-content:flex-end;padding:1rem 1.4rem;border-top:1px solid var(--color-border);flex-wrap:wrap}
.icon-btn{width:40px;height:40px;border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer;color:var(--color-muted);display:grid;place-items:center}
.icon-btn:hover{background:var(--color-soft-blue);color:var(--color-navy)}
.demo-banner{background:var(--color-accent-yellow);color:var(--color-navy);font-size:.82rem;font-weight:600;text-align:center;padding:.35em 1em}