/*
  v1.9.11 — Footer restore (white card) + Remove tile caption background + Pill-only info + Animated hamburger
  تغییرات نسبت به v1.9.10:
  - فوتر سفید بازگردانی شد (بدون تغییر محتوایی)
  - tile-caption: حذف هرگونه پس‌زمینه/گرادیان (ساده)
  - چیپ‌ها: وضعیت، نام دوره، شهر، تاریخ (pill)
  - منوی همبرگری: انیمیشن اسلاید/فید با ترنزیشن نرم
*/

:root{
  --bg-start:#0A046B;
  --bg-end:#00DBD3;
  --card-radius:16px;
  --card-shadow:0 12px 28px rgba(0,0,0,.18);
  --border-color:#e6e6e6;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#0A046B;
  --success:#16a34a;
  --error:#dc2626;
  --field-bg:#f9fafb;
  --focus-ring:rgba(10,4,107,.12);
  --field-height:44px;
  --ig:#E1306C;
  --tile-width:200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Vazirmatn",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Tahoma","IRANSans",sans-serif;
  color:var(--text);
  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
  background-attachment: fixed; background-repeat: no-repeat; background-size: cover;
}
body.preloading{overflow:hidden}

/* SR only */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Preloader */
.preloader{position:fixed; inset:0; z-index:10000; display:grid; place-items:center; color:#fff; transition:opacity .4s ease; background:linear-gradient(135deg,var(--bg-start),var(--bg-end))}
.preloader.fade-out{opacity:0; pointer-events:none}
.preloader-box{ text-align:center; padding:18px 22px; border-radius:16px; background:rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.18); backdrop-filter:blur(4px)}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}
.loading-text{margin-top:10px;font-weight:800;letter-spacing:.2px;font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* Layout */
.page-wrapper{min-height:100vh; display:grid; place-items:center; padding:24px; position:relative}

/* Header — Desktop + Mobile (Hamburger with animation) */
.site-header{
  position: sticky; top: 12px; z-index: 50;
  width:min(1100px,100%);
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; padding:8px 12px; gap:10px;
  border-radius:16px; backdrop-filter:blur(10px);
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  flex-wrap:wrap;
}
.brand{display:inline-flex; align-items:center; gap:12px; min-width:0}
.logo{width:58px;height:58px;display:block}
.brand-title{margin:0;font-size:24px;font-weight:900;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.28)}
.main-nav{display:flex; gap:8px; align-items:center}
.main-nav .nav-link{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:12px;
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px;
  border:1px solid transparent; transition:all .2s ease; white-space:nowrap;
}
.main-nav .nav-link:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45) }
.main-nav .is-active{ background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.6); box-shadow: inset 0 2px 10px rgba(0,0,0,.12) }

/* Hamburger button */
.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.4);
  background:rgba(20,20,40,.45); color:#fff; cursor:pointer; font-size:20px; font-weight:900;
  transition:transform .2s ease;
}
.menu-toggle:active{ transform:scale(.96) }

/* Mobile menu with slide/fade animation */
@media (max-width: 768px){
  .site-header{ background:rgba(20,20,40,.50); border-color:rgba(255,255,255,.28)}
  .logo{width:54px;height:54px}
  .brand-title{font-size:20px}
  .menu-toggle{display:inline-flex}
  .main-nav{
    position:absolute; left:12px; right:12px; top:100%;
    display:block; padding:10px;
    background:rgba(20,20,40,.88); border:1px solid rgba(255,255,255,.2);
    border-radius:14px; margin-top:8px; box-shadow:0 18px 46px rgba(0,0,0,.35);
    transform-origin:top center;
    transform: translateY(-8px) scaleY(.9);
    opacity:0; pointer-events:none;
    transition: transform .25s ease, opacity .25s ease;
  }
  .main-nav.open{
    transform: translateY(0) scaleY(1);
    opacity:1; pointer-events:auto;
  }
  .main-nav .nav-link{ width:100%; justify-content:center; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18) }
  .main-nav .nav-link:hover{ background:rgba(255,255,255,.12) }
}

/* Tiles */
.tiles{width:min(1100px,100%)}
.section-title{margin:0 0 10px; font-size:18px; font-weight:900; color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.28)}
.tile-grid{
  display:grid; grid-template-columns:repeat(3, var(--tile-width)); gap:16px;
  justify-content:center; align-items:start;
}
.course-tile{ text-decoration:none; color:inherit; display:flex; justify-content:center }
.course-tile[data-status="ended"]{cursor:not-allowed;}
.tile-figure{
  margin:0; position:relative; overflow:hidden;
  border-radius:18px; border:1px solid rgba(255,255,255,.32);
  box-shadow:0 14px 34px rgba(0,0,0,.18); background:#fff;
  aspect-ratio:9/16; width:var(--tile-width);
}
.tile-figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease }
.course-tile:hover .tile-figure img{ transform:scale(1.05)}

/* Caption — SIMPLE (no background) */
.tile-caption{
  position:absolute; inset-inline:0; bottom:10px; padding:0 10px;
  background: none; /* ⛔️ هیچ رنگ/گرادیانی وجود ندارد */
  color:#111; display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}

/* Pills */
.pill{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  border:1px solid #e5e7eb; background:#fff; color:#111; font-size:11.5px; font-weight:900;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}
.pill.status-open{ background:#10b981; color:#fff; border-color:#059669 }
.pill.status-closed{ background:#ef4444; color:#fff; border-color:#dc2626 }
.pill.location{ background:#eef2ff; border-color:#dbeafe; color:#1e293b }
.pill.date{ background:#fef3c7; border-color:#fde68a; color:#78350f }
.pill.course{ background:#ffffff; border-color:#e5e7eb; color:#111 }

/* (قبلی) badge بالا حذف شده چون وضعیت الان به صورت pill در کپشن است */

/* Cards (Course Pages) */
.card-grid{width:min(1100px,100%); display:grid; grid-template-columns:1fr 1fr; gap:24px}
.card{background:#fff;border-radius:var(--card-radius);box-shadow:var(--card-shadow);overflow:hidden;border:1px solid var(--border-color);transition:transform .12s ease}
.card:hover{transform:translateY(-2px)}
.course-card{display:grid; grid-template-rows:auto 1fr}
.course-image-wrap{width:100%; background:#f3f4f6; display:grid; place-items:center}
.course-image{width:100%; height:auto; max-height:340px; object-fit:contain; display:block}
.course-content{padding:20px 20px 24px}
.course-title{margin:0 0 10px; font-size:20px; font-weight:800; color:var(--primary)}
.course-meta{margin:0 0 12px; padding:0; list-style:none}
.course-meta li{margin:6px 0; font-size:14px; color:var(--text)}
.course-desc{margin:0 0 8px; font-size:14px; color:var(--muted); line-height:1.9}

/* Center wrappers */
.narrow-center{ width:min(900px,100%); margin:0 auto; }
.narrow-center .card-grid{ grid-template-columns:1fr; }

/* Gallery + Lightbox (بدون تغییر منطقی) */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px}
.gallery img{width:100%; height:160px; object-fit:cover; border-radius:10px; border:1px solid #eee; cursor:pointer}
@media (max-width: 900px){ .gallery{grid-template-columns:1fr 1fr} .gallery img{height:140px} }
.lightbox{
  position:fixed; inset:0; z-index:10002; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
}
.lightbox.show{ display:flex }
.lightbox-inner{
  background:#111; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:10px; max-width:94vw; max-height:94vh; box-shadow:0 18px 46px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; gap:10px; position:relative;
}
.lightbox-img{ max-width:92vw; max-height:76vh; display:block; margin:0 auto; border-radius:8px }
.lightbox-counter{
  position:absolute; top:10px; inset-inline-end:12px; color:#fff; font-weight:800; background:rgba(0,0,0,.45); padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
}
.lightbox-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; font-weight:800; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06); color:#fff; text-decoration:none; cursor:pointer;
}
.btn:hover{ background:rgba(255,255,255,.12) }

/* Form */
.form-card{padding:20px 20px 24px}
#form-title{margin:0 0 6px; font-size:18px; font-weight:800; color:var(--primary)}
.form-hint{margin:0 0 16px; font-size:13px; color:var(--muted)}
.form-field{margin-bottom:10px}
input[type="text"], input[type="tel"], input[type="email"], select, textarea{
  width:100%; border:1px solid var(--border-color); background:var(--field-bg);
  border-radius:12px; padding:10px 12px; font-size:14px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  font-feature-settings:"tnum" 1;
}
input[type="text"], input[type="tel"], input[type="email"], select{ height:var(--field-height); line-height:calc(var(--field-height) - 2px)}
textarea{resize:vertical; min-height:calc(var(--field-height) * 2.05)}
#nationalId{height:var(--field-height); line-height:calc(var(--field-height) - 2px)}
input::placeholder, textarea::placeholder, select:invalid{color:#9ca3af}
input:focus, select:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--focus-ring); background:#fff}
small.error{display:block; color:var(--error); font-size:12px; min-height:14px; margin-top:4px}
.form-actions{margin-top:12px}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:46px; border-radius:14px; background:var(--primary);
  color:#fff; font-weight:800; letter-spacing:.2px; border:none; cursor:pointer;
  transition:transform .05s ease, opacity .2s ease, box-shadow .2s ease
}
.btn-primary[disabled]{opacity:.7; cursor:wait}
.btn-primary:active{transform:translateY(1px)}

/* Toast */
.toast-overlay{
  position:fixed; inset:0; z-index:10001; display:grid; place-items:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .25s ease
}
.toast-overlay.show{opacity:1; pointer-events:auto}
.toast-box{
  min-width:min(560px,92vw); max-width:min(90vw,640px);
  padding:18px 20px; border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 46px rgba(0,0,0,.35); border:2px solid transparent;
  text-align:center; font-size:15px; font-weight:800; color:#111; position:relative;
}
.toast-box.success{ border-color:var(--success); }
.toast-box.error{ border-color:var(--error); }
.toast-close{
  position:absolute; top:6px; inset-inline-end:8px; width:32px; height:32px; border-radius:8px;
  border:1px solid rgba(0,0,0,.1); background:#fff; color:#111; cursor:pointer; font-weight:900;
}
.toast-close:hover{ background:#f2f2f2 }

/* Footer (white card) — بدون تغییر محتوایی */
.site-footer{width:min(1100px,100%); background:#fff; border:1px solid var(--border-color); border-radius:16px; box-shadow:var(--card-shadow); padding:18px 20px; margin-top:20px}
.about-title{margin:0 0 8px; font-size:16px; color:var(--primary); font-weight:800}
.about-text{margin:0 0 12px; color:#6b7280; font-size:14px; line-height:1.95}
.copyright{font-size:12.5px; color:#4b5563; border-top:1px dashed #e5e7eb; padding-top:10px}

/* Responsive tiles */
@media (max-width: 900px){
  .card-grid{grid-template-columns:1fr}
  .course-image{max-height:260px}
  .tile-grid{grid-template-columns:repeat(2, var(--tile-width)); justify-content:center; }
  :root{ --tile-width: 160px }
}
@media (max-width: 560px){
  .tile-grid{
    grid-template-columns:1fr; justify-items:center; justify-content:center; align-content:start;
  }
  .course-tile{justify-content:center}
  .tile-figure{ margin-inline:auto }
  :root{ --tile-width: 260px }
}