/* ============================================================
   استایل اصلی سایت «Corsi Di Pittura»
   ------------------------------------------------------------
   سبک: مینیمال و خلوت — فونت‌های کوچک‌تر و سبک‌تر، دکمه‌های
   کپسولی کوچک، منوی وسط‌چین، فضای سفید زیاد، بدون سایه‌های سنگین.
   رویکرد موبایل‌فرست: استایل پایه برای موبایل، سپس 640px و 960px.
   ============================================================ */

/* ---------- ۱) توکن‌های طراحی ---------- */
:root {
    /* پالت برند */
    --primary: #5B5BD6;
    --primary-dark: #4949C2;
    --primary-soft: #ECECFB;
    --secondary: #E5677D;
    --secondary-soft: #FCEAED;
    --success: #2E9E7A;
    --success-soft: #E3F4EE;
    --warning: #F2A541;
    --warning-soft: #FDF1E0;
    --text: #2D2B3A;
    --bg: #FBF8FF;

    /* رنگ‌های کمکی */
    --text-muted: #6E6A80;
    --text-faint: #9A96AC;
    --surface: #FFFFFF;
    --soft: #F1EDFA;          /* پس‌زمینه‌ی دکمه‌های نرم و بخش‌های رنگی */
    --soft-hover: #E7E1F6;
    --border: #ECE7F5;
    --border-strong: #DCD5EC;

    /* تایپوگرافی (اندازه‌ها کوچک و آرام) */
    --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: .75rem;      /* 12px */
    --fs-sm: .8125rem;    /* 13px */
    --fs-nav: .875rem;    /* 14px */
    --fs-body: .9375rem;  /* 15px */
    --fs-md: 1.0625rem;   /* 17px */

    --radius: 16px;
    --radius-sm: 10px;
    --header-h: 64px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- ۲) ریست و پایه ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
}

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.icon-xl { width: 56px; height: 56px; }

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--text);
    color: #fff;
    font-size: var(--fs-sm);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- ۳) دکمه‌ها: کپسولی، کوچک، بدون سایه ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--fs-nav);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn .icon { width: 1.05em; height: 1.05em; }
.btn:active { transform: scale(.97); }

/*
 * سیستم رنگ دکمه‌ها (فقط سه نوع، برای یکدستی):
 *   btn-primary  بنفش پر    ← اقدام اصلی هر بخش (Prenota un corso، Registrati، ارسال فرم)
 *   btn-tint     بنفش کم‌رنگ ← اقدام‌های تکراری در لیست (دکمه‌ی کارت دوره‌ها)
 *   btn-soft     خنثی       ← اقدام فرعی (Scopri i corsi، Accedi، Instagram)
 */
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }

.btn-tint { background: var(--primary-soft); color: var(--primary-dark); }
.btn-tint:hover { background: var(--primary); color: #fff; }

.btn-soft { background: var(--soft); color: var(--text); }
.btn-soft:hover { background: var(--soft-hover); color: var(--text); }

.btn-sm { padding: .5rem 1rem; font-size: var(--fs-sm); }
.btn-block { width: 100%; }

/* ---------- ۴) منوی بالا ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--header-h);
    border-bottom: 1px solid transparent;
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.scrolled {
    background: rgba(251, 248, 255, .86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--border);
}

.nav {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: color .2s var(--ease);
}
.brand:hover { color: var(--primary); }

/* سمت راست منو */
.nav-end { display: flex; align-items: center; gap: .25rem; }

.social-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-muted);
    transition: color .2s var(--ease), background-color .2s var(--ease);
}
.social-icon .icon { width: 19px; height: 19px; }
.social-icon:hover { color: var(--primary); background: var(--primary-soft); }
.social-wa:hover { color: var(--success); background: var(--success-soft); }

/* راهنمای کوچک زیر آیکون (فقط دسکتاپ) */
.social-icon[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    padding: .2rem .5rem;
    border-radius: 6px;
    background: var(--text);
    color: #fff;
    font-size: var(--fs-xs);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -3px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    pointer-events: none;
}
@media (hover: hover) {
    .social-icon[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
}

.nav-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: .25rem;
    border: 0;
    border-radius: 50%;
    background: var(--soft);
    cursor: pointer;
}
.nav-toggle .icon { width: 20px; height: 20px; }

/* منوی موبایل: پنل کشویی */
.nav-menu {
    position: absolute;
    top: calc(var(--header-h) - 4px);
    left: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    padding: .5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 40px -24px rgba(45, 43, 58, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-menu.open { opacity: 1; visibility: visible; transform: none; }
.nav-menu > li > a {
    display: block;
    padding: .7rem .85rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-body);
    font-weight: 500;
}
.nav-menu > li > a:hover,
.nav-menu > li > a.active { background: var(--soft); }

/* حساب کاربری */
.nav-account { display: flex; align-items: center; gap: .4rem; }
.nav-account-mobile {
    margin-top: .4rem;
    padding: .65rem .35rem .25rem;
    border-top: 1px solid var(--border);
}
.nav-account-mobile .btn { flex: 1; }
.nav-account-desktop { display: none; }

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .25rem .8rem .25rem .25rem;
    border-radius: 999px;
    background: var(--soft);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
    transition: background-color .2s;
}
.nav-user:hover { background: var(--soft-hover); color: var(--text); }
.nav-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
}
.nav-user-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-logout { margin: 0; }
.nav-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .7rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}
.nav-link-btn .icon { width: 17px; height: 17px; }
.nav-link-btn:hover { color: var(--secondary); background: var(--secondary-soft); }

/* ---------- ۵) Hero: وسط‌چین با بنر عریض ---------- */
.hero { padding: calc(var(--header-h) + 3.5rem) 0 4rem; }
.hero-text { max-width: 760px; margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
    font-size: var(--fs-nav);
    transition: color .2s var(--ease);
}
.eyebrow:hover { color: var(--text); }
.eyebrow-arrow { transition: transform .2s var(--ease); }
.eyebrow:hover .eyebrow-arrow { transform: translateX(3px); }
.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(229, 103, 125, .45); }
    70%  { box-shadow: 0 0 0 6px rgba(229, 103, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 103, 125, 0); }
}

.hero-title {
    font-size: clamp(2.6rem, 8vw, 4.75rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.035em;
}

/* افکت shimmer: یک نوار روشن که آرام روی تیتر رفت‌وبرگشت می‌کند */
.shimmer {
    background-image: linear-gradient(110deg, var(--text) 0%, var(--text) 40%, #A5A5F2 50%, var(--text) 60%, var(--text) 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 4.5s ease-in-out infinite alternate;
}
.shimmer-accent {
    background-image: linear-gradient(110deg, var(--primary) 0%, var(--primary) 40%, #F4AEBB 50%, var(--primary) 60%, var(--primary) 100%);
}
@keyframes shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}

.hero-subtitle {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
}
.hero-techniques {
    margin-top: 1.25rem;
    color: var(--text-faint);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* موبایل: هر بخش در یک خط؛ از تبلت به بالا کنار هم با جداکننده */
.tech-part { display: block; }
.tech-sep { display: none; margin-inline: .6rem; }
@media (min-width: 640px) {
    .tech-part { display: inline; }
    .tech-sep { display: inline; }
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2rem; }

/* عکس رویداد: با نسبت طبیعی خودش (افقی یا پوستر عمودی)، بدون برش */
.hero-media { margin-top: 3.5rem; display: flex; justify-content: center; }
.hero-frame {
    max-width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--soft);
}
.hero-frame img { width: auto; max-width: 100%; height: auto; max-height: 82vh; }

/* وقتی عکسی نیست، Hero فقط متن است و کمی فاصله‌ی پایین کمتر می‌گیرد */
.hero:not(:has(.hero-media)) { padding-bottom: 2rem; }

/* ظاهر شدن نرم عکس‌ها بعد از لود (فقط وقتی JS فعال است) */
.js .fade-img { opacity: 0; transform: scale(1.015); transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.js .fade-img.loaded { opacity: 1; transform: none; }

/* ---------- ۶) ساختار عمومی بخش‌ها ---------- */
.section { padding: 5rem 0; }
.section-tinted { background: #F5F1FC; }

.section-head { max-width: 620px; margin: 0 auto 3rem; text-align: center; }
.section-head h2,
.contact-info h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); letter-spacing: -.03em; }
.section-lead { margin-top: .9rem; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.65; }
.section-kicker { margin-bottom: .5rem; color: var(--text-muted); font-size: var(--fs-nav); }

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: var(--fs-body);
    text-align: center;
}

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- ۷) دوره‌ها ---------- */
.course-group + .course-group { margin-top: 4rem; }
.group-title { margin-bottom: 1.5rem; font-size: 1.5rem; letter-spacing: -.025em; }
.group-eyebrow { display: block; margin-bottom: .1rem; color: var(--text-muted); font-size: var(--fs-md); font-weight: 400; letter-spacing: 0; }

.course-grid { display: grid; gap: 1rem; }

.course-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.course-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

/* نور ملایمی که دنبال ماوس روی کارت حرکت می‌کند */
.js-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(91, 91, 214, .07), transparent 70%);
    opacity: 0;
    transition: opacity .3s var(--ease);
    pointer-events: none;
}
.js-spotlight:hover::before { opacity: 1; }

.course-badge { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; }
.course-title { margin-top: .3rem; font-size: 1.375rem; letter-spacing: -.025em; }
.course-desc { margin-top: .5rem; color: var(--text-muted); font-size: var(--fs-body); }

.course-features { display: grid; gap: .5rem; margin: 1.25rem 0 1.75rem; }
.course-features li {
    position: relative;
    padding-left: 1rem;
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: 1.5;
}
.course-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .5;
}

/* ساعت‌های کلاس روی کارت دوره */
.course-times {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: -.5rem 0 1.5rem;
    padding: .7rem .85rem;
    border-radius: var(--radius-sm);
    background: var(--soft);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.5;
}
.course-times .icon { width: 16px; height: 16px; margin-top: .15em; color: var(--primary); }
.course-time-line { display: block; }
.overview-times { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; }
.overview-times .icon { width: 15px; height: 15px; color: var(--primary); }

/* چیپ‌های نوبت (روز + ساعت) در فرم رزرو */
.slot-group[hidden] { display: none; }
.slot-chip > span { gap: .35rem; }
.slot-chip strong { font-weight: 700; }

.course-foot {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.course-price strong { display: block; font-size: 1.625rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.course-price small { display: block; margin-top: .25rem; color: var(--text-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.course-price.is-request strong { font-size: 1.125rem; }

/* ---------- رویدادهای پیش رو (زیر دکمه‌های Hero) ---------- */
.featured-wrap { margin-top: 3.5rem; scroll-margin-top: calc(var(--header-h) + 24px); }
.fe-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
    color: var(--secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.featured-list { display: grid; gap: 1rem; }
/* چند رویداد: کارت‌ها کنار هم و وسط‌چین */
.featured-list.is-multi { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 1200px; margin-inline: auto; }
.featured-event {
    position: relative;
    display: grid;
    overflow: hidden;
    max-width: 1040px;
    margin-inline: auto;
    border: 1px solid rgba(91, 91, 214, .22);
    border-radius: 24px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F3F0FF 100%);
    color: var(--text);
    text-align: left;
    transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.featured-event:hover {
    color: var(--text);
    border-color: rgba(91, 91, 214, .5);
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -36px rgba(91, 91, 214, .45);
}
/* عکس کامل و بدون برش (پوستر رویداد ممکن است متن داشته باشد) */
.fe-media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
    overflow: hidden;
    background: var(--soft);
}
/* پس‌زمینه‌ی محو از همان عکس، تا کنار پوسترهای عمودی خالی نماند */
.fe-blur {
    position: absolute;
    inset: -24px;
    background-position: center;
    background-size: cover;
    filter: blur(24px) saturate(1.1);
    opacity: .5;
}
.fe-media img { position: relative; width: 100%; height: 100%; max-height: 440px; object-fit: contain; transition: transform .6s var(--ease); }
.featured-event:hover .fe-media img.loaded { transform: scale(1.02); }

.fe-body { display: flex; flex-direction: column; padding: 1.75rem; }
.fe-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    align-self: flex-start;
    color: var(--secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.fe-date { margin-top: 1rem; color: var(--text-muted); font-size: var(--fs-nav); font-weight: 500; }
.fe-date::first-letter { text-transform: uppercase; }
.fe-title { margin-top: .35rem; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
.fe-summary { margin-top: .8rem; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.6; }
.fe-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: auto;
    padding-top: 1.5rem;
}
.fe-price { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.fe-price small { display: block; color: var(--text-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.fe-seats {
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--warning-soft);
    color: #8A5410;
    font-size: var(--fs-xs);
    font-weight: 700;
}
.fe-cta { margin-left: auto; }
.featured-event:hover .fe-cta { background: var(--primary-dark); }
.featured-event:hover .fe-cta .icon { transform: translateX(3px); }
.fe-cta .icon { transition: transform .2s var(--ease); }
.featured-event.no-image { max-width: 760px; }

/* حالت «stack» (چند رویداد): عکس بالا با ارتفاع ثابت، متن پایین */
.fe-stack { display: flex; flex-direction: column; max-width: none; margin: 0; }
.fe-stack .fe-media { height: 240px; min-height: 0; }
.fe-stack .fe-media img { max-height: 240px; }
.fe-stack .fe-body { flex: 1; padding: 1.5rem; }
.fe-stack .fe-title { font-size: 1.5rem; }
.fe-stack .fe-summary { font-size: var(--fs-body); }
.fe-stack .fe-price { font-size: 1.25rem; }
.fe-stack.no-image { max-width: none; }
.fe-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    background: linear-gradient(135deg, var(--primary-soft), #FBE9EE);
    color: var(--primary-dark);
}
.fe-date-block strong { font-size: 4.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.fe-date-block span { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- کارت رویدادها در صفحه‌ی اصلی ---------- */
.event-grid { display: grid; gap: 1rem; }
.event-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.event-card:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-2px); }
.event-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.event-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.event-card:hover .event-thumb img.loaded { transform: scale(1.03); }
.event-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.event-date { color: var(--secondary); font-size: var(--fs-sm); font-weight: 700; }
.event-date::first-letter { text-transform: uppercase; }
.event-title { margin-top: .35rem; font-size: 1.375rem; font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.event-summary { margin-top: .5rem; color: var(--text-muted); font-size: var(--fs-body); line-height: 1.55; }
.event-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; }
.event-price { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.event-card:hover .btn-tint { background: var(--primary); color: #fff; }

/* ---------- صفحه‌ی رویداد ---------- */
.event-page { padding: calc(var(--header-h) + 2.5rem) 0 5rem; }
.back-link-public { display: inline-block; margin-bottom: 1.5rem; color: var(--text-muted); font-size: var(--fs-nav); }
.back-link-public:hover { color: var(--text); }
.event-layout { display: grid; gap: 2rem; align-items: start; }
.event-date-lg { color: var(--secondary); font-size: var(--fs-nav); font-weight: 700; }
.event-date-lg::first-letter { text-transform: uppercase; }
.event-heading { margin-top: .5rem; font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -.035em; line-height: 1.08; }
.event-main .section-lead { margin-top: 1rem; }
.event-hero-img { width: 100%; height: auto; margin-top: 2rem; border-radius: var(--radius); }
.event-description { display: grid; gap: 1rem; margin-top: 2rem; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.75; }
.event-side { display: grid; gap: 1rem; }
.event-info { padding: .5rem 1.4rem; }
.event-info dd::first-letter { text-transform: uppercase; }
.muted-sm { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; }
.event-closed { padding: 1.4rem; color: var(--text-muted); font-size: var(--fs-body); text-align: center; }
.form-title { font-size: 1.25rem; letter-spacing: -.02em; }

/* ---------- درباره‌ی ما (Chi siamo) ---------- */
.about-layout { display: grid; gap: 2.5rem; }
.about-intro h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); letter-spacing: -.03em; max-width: 12ch; }
.about-photo { width: 100%; max-width: 360px; margin-top: 2rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* نقل‌قول: فقط تایپوگرافی (بدون کادر و رنگ هشدار) */
.about-quote { position: relative; margin: 2.5rem 0 0; padding-top: 1.75rem; max-width: 26rem; }
.quote-mark {
    position: absolute;
    top: -1.25rem;
    left: -.35rem;
    color: var(--primary);
    opacity: .18;
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
.about-quote blockquote { margin: 0; }
.about-quote blockquote p {
    color: var(--text);
    font-size: clamp(1.25rem, 2.6vw, 1.5rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -.02em;
}
.about-quote figcaption {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
    color: var(--text-muted);
    font-size: var(--fs-nav);
    font-weight: 500;
}
.quote-line { width: 28px; height: 1px; background: var(--secondary); }

.about-body { display: grid; gap: 1.1rem; max-width: 620px; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.75; }
.about-lead { color: var(--text); font-size: clamp(1.1875rem, 2.4vw, 1.375rem); line-height: 1.55; letter-spacing: -.01em; }
.about-lead strong { font-weight: 700; }
.about-note { color: var(--text); font-weight: 500; }

/* ---------- ۸) گالری متحرک (ستون‌های عکس که آرام بالا و پایین می‌روند، مثل mobbin.com) ---------- */
.marquee {
    --gap: .75rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    height: 520px;
    overflow: hidden;
    /* محو شدن نرم بالا و پایین */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.marquee-col { min-width: 0; }
.marquee-col:nth-child(4) { display: none; }   /* موبایل: ۳ ستون */
.marquee-track {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-bottom: var(--gap);
    animation: marquee-up var(--duration, 50s) linear infinite;
    will-change: transform;
}
.marquee-col[data-dir="down"] .marquee-track { animation-name: marquee-down; }

/* با رفتن ماوس روی گالری (یا فوکوس کیبورد) حرکت متوقف می‌شود */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* دو نسخه‌ی پشت سر هم + یک فاصله‌ی اضافه در پایین (padding) ⇐ نصف مسیر دقیقاً
   برابر یک نسخه است، پس جابه‌جایی ‎-50%‎ حلقه‌ای بدون پرش می‌سازد.
   (از calc+var داخل keyframes استفاده نشده چون کروم آن انیمیشن را اجرا نمی‌کند) */
@keyframes marquee-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@keyframes marquee-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

.gallery-item {
    position: relative;
    display: block;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: var(--soft);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.js .gallery-item img.loaded { transition: opacity .9s var(--ease), transform .6s var(--ease); }

/* قاب داخلی بسیار نازک با رنگ برند هنگام hover */
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0 rgba(91, 91, 214, 0);
    transition: box-shadow .3s var(--ease);
    pointer-events: none;
}
.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(45, 43, 58, 0) 55%, rgba(45, 43, 58, .55));
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.gallery-caption { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; transform: translateY(6px); transition: transform .35s var(--ease); }
.gallery-overlay .icon { width: 22px; height: 22px; transform: translateY(6px); transition: transform .35s var(--ease) .04s; }

.gallery-item:hover img.loaded,
.gallery-item:focus-visible img.loaded { transform: scale(1.035); }
.gallery-item:hover::after,
.gallery-item:focus-visible::after { box-shadow: inset 0 0 0 2px rgba(91, 91, 214, .65); }
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay { opacity: 1; }
.gallery-item:hover .gallery-caption,
.gallery-item:hover .gallery-overlay .icon { transform: none; }

.gallery-cta { margin-top: 2.5rem; text-align: center; }

/* لایت‌باکس */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
    background: rgba(24, 23, 31, .9);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }
.lightbox-figure { margin: 0; max-width: 1000px; text-align: center; }
.lightbox-figure img { max-height: 80vh; width: auto; margin-inline: auto; border-radius: var(--radius-sm); }
.lightbox-figure figcaption { margin-top: .9rem; color: #fff; font-size: var(--fs-nav); }
.lightbox-count { margin-left: .4rem; opacity: .55; }
.lightbox-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s;
}
.lightbox-btn[hidden] { display: none; }
.lightbox-btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox-btn .icon { width: 20px; height: 20px; }
.lightbox-close { top: 12px; right: 12px; }
.lightbox-prev  { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 12px; top: 50%; transform: translateY(-50%); }

/* ---------- ۹) رزرو ---------- */
.booking-layout { display: grid; gap: 1rem; align-items: start; }

.booking-summary {
    padding: 1.75rem;
    border-radius: var(--radius);
    background: var(--soft);
}
.summary-label { color: var(--text-muted); font-size: var(--fs-sm); }
.summary-title { margin-top: .3rem; font-size: 1.375rem; letter-spacing: -.025em; }
.summary-meta { margin-top: .3rem; color: var(--text-muted); font-size: var(--fs-nav); }
.summary-price { margin: 1.4rem 0; padding: 1.1rem 0; border-block: 1px solid var(--border-strong); }
.summary-price strong { display: block; font-size: 2.25rem; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.summary-price small { display: block; margin-top: .25rem; color: var(--text-faint); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.summary-price.bump strong { animation: bump .45s var(--ease); }
.summary-points { display: grid; gap: .45rem; color: var(--text-muted); font-size: var(--fs-nav); }
.summary-points li { display: flex; align-items: center; gap: .5rem; }
.summary-points .icon { width: 1em; height: 1em; color: var(--primary); }
@keyframes bump {
    0%   { transform: translateY(4px); opacity: .4; }
    100% { transform: none; opacity: 1; }
}

/* ---------- ۱۰) فرم‌ها ---------- */
.form { padding: 1.5rem; display: grid; gap: 1.1rem; }
.form-plain { display: grid; gap: 1.1rem; }

.field { display: grid; gap: .4rem; }
.field-row { display: grid; gap: 1.1rem; }
.field label,
.day-field legend { font-size: var(--fs-sm); font-weight: 500; transition: color .2s var(--ease); }
.field:focus-within > label { color: var(--primary); }
.optional { color: var(--text-faint); font-weight: 400; }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .72rem .9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 1rem;               /* 16px برای جلوگیری از زوم خودکار iOS */
    transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field textarea { resize: vertical; min-height: 104px; }
.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 16px;
    cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 91, 214, .12);
}

/* چیپ‌های انتخاب روز */
.day-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.day-field legend { padding: 0; margin-bottom: .5rem; }
.day-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.day-chip { position: relative; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip > span {
    display: inline-flex;
    padding: .45rem .9rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--fs-nav);
    font-weight: 500;
    user-select: none;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.day-rest { display: none; }
.day-chip:hover > span { border-color: var(--text-muted); }
.day-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.day-chip input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; animation: pop .3s var(--ease); }
.day-chips.shake { animation: shake .4s var(--ease); }
@keyframes pop {
    0% { transform: scale(.94); }
    60% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* فیلد تله‌ی ربات — پنهان */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* دکمه در حال ارسال */
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .icon { display: none; }
.btn.is-loading::after {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.alert {
    display: flex;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
}
.alert .icon { margin-top: .15em; }
.alert-success { background: var(--success-soft); color: #1E6E55; }
.alert-success .icon { color: var(--success); }
.alert-error { background: var(--warning-soft); color: #8A5410; }
.alert-error .icon { color: var(--warning); }

/* ---------- ۱۱) تماس ---------- */
.contact-layout { display: grid; gap: 2.5rem; align-items: start; }
.contact-info .section-lead { max-width: 420px; }

.contact-list { display: grid; gap: 1rem; margin-top: 2rem; }
.contact-list li { display: flex; align-items: center; gap: .75rem; font-size: var(--fs-body); }
.contact-icon { display: grid; place-items: center; color: var(--text-muted); }
.contact-icon .icon { width: 18px; height: 18px; }
.contact-list a { color: var(--text); line-height: 1.5; }
.contact-list a:hover { color: var(--primary); }
.contact-list strong { font-weight: 700; }

.copy-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: var(--soft);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .2s, background-color .2s, transform .2s var(--ease);
}
.copy-btn .icon { width: 15px; height: 15px; }
.copy-btn:hover { color: var(--text); background: var(--soft-hover); }
.copy-btn.done { color: var(--success); background: var(--success-soft); transform: scale(1.06); }

/* ---------- ۱۲) فوتر ---------- */
.site-footer { padding-top: 3.5rem; background: var(--text); color: rgba(255, 255, 255, .65); font-size: var(--fs-nav); }
.footer-inner { display: grid; gap: 2rem; padding-bottom: 2.5rem; }
.site-footer .brand { color: #fff; }
.site-footer .brand:hover { color: #C9C9F5; }
.footer-brand .footer-studio { margin-top: .2rem; color: rgba(255, 255, 255, .85); }
.footer-brand p:last-child { margin-top: .8rem; max-width: 300px; }

.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-links a { color: rgba(255, 255, 255, .65); }
.footer-links a:hover { color: #fff; }

.footer-social { display: flex; gap: .4rem; }
.site-footer .social-icon { width: 38px; height: 38px; background: rgba(255, 255, 255, .07); color: #fff; }
.site-footer .social-icon:hover { background: var(--primary); color: #fff; }
.site-footer .social-wa:hover { background: var(--success); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1.5rem;
    padding-block: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: var(--fs-sm);
}
.footer-bottom a { color: rgba(255, 255, 255, .65); }
.footer-bottom a:hover { color: #fff; }
.footer-bottom span { margin-inline: .4rem; opacity: .5; }

/* ============================================================
   صفحه‌های داخلی (Chi siamo ، Corsi ، Galleria ، Eventi ، Prenota ، Contatti ، Privacy)
   ============================================================ */
.page-head { padding: calc(var(--header-h) + 2.5rem) 0 .5rem; text-align: center; }
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
    margin-bottom: 1.5rem;
    color: var(--text-faint);
    font-size: var(--fs-sm);
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--primary); }
.event-page .breadcrumbs { justify-content: flex-start; }
.page-kicker { margin-bottom: .6rem; color: var(--secondary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.page-title { font-size: clamp(2.25rem, 6.5vw, 3.75rem); letter-spacing: -.035em; line-height: 1.06; }
.page-lead { max-width: 620px; margin: 1rem auto 0; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.65; }
.section.section-first { padding-top: 2.5rem; }   /* بعد از سربرگ صفحه، فاصله‌ی کمتر */

.text-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--primary); font-weight: 700; font-size: var(--fs-body); }
.text-link .icon { transition: transform .2s var(--ease); }
.text-link:hover .icon, a:hover > .text-link .icon { transform: translateX(3px); }
.center-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.5rem; }

/* خلاصه‌ی دوره‌ها در صفحه‌ی اصلی */
.overview-grid { display: grid; gap: 1rem; max-width: 980px; margin-inline: auto; }
.overview-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.overview-card:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-2px); }
.overview-title { font-size: 1.75rem; font-weight: 500; letter-spacing: -.03em; }
.overview-list { display: grid; gap: .55rem; margin: 1.25rem 0 1.5rem; }
.overview-row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px dashed var(--border-strong); color: var(--text-muted); font-size: var(--fs-body); }
.overview-row strong { color: var(--text); font-weight: 500; white-space: nowrap; }
.overview-card .text-link { margin-top: auto; }

.cta-band { padding-block: 5rem; }
.cta-inner { max-width: 640px; margin-inline: auto; text-align: center; }
.cta-inner h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); letter-spacing: -.03em; }

/* تب‌های دسته‌بندی دوره‌ها */
.pill-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 2.5rem; }
.pill-tabs a { padding: .45rem 1rem; border-radius: 999px; background: var(--soft); color: var(--text-muted); font-size: var(--fs-nav); font-weight: 500; transition: background-color .2s, color .2s; }
.pill-tabs a:hover { color: var(--text); }
.pill-tabs a.active { background: var(--primary); color: #fff; }
.group-title a { color: var(--text); }
.group-title a:hover { color: var(--primary); }

.info-strip { display: grid; gap: 1rem; margin-top: 3rem; padding: 1.5rem; border-radius: var(--radius); background: var(--soft); }
.info-strip div { display: flex; flex-direction: column; gap: .2rem; }
.info-strip strong { font-size: var(--fs-body); font-weight: 700; }
.info-strip span { color: var(--text-muted); font-size: var(--fs-sm); }

/* صفحه‌ی گالری: چیدمان ستونی با نسبت طبیعی عکس‌ها */
.masonry { columns: 2; column-gap: .75rem; }
.masonry-item { aspect-ratio: auto; margin-bottom: .75rem; break-inside: avoid; }
.masonry-item img { height: auto; }

.empty-block { max-width: 560px; margin-inline: auto; padding: 3rem 2rem; text-align: center; }
.empty-block .icon-xl { color: var(--primary); margin-bottom: .75rem; }
.empty-block h1, .empty-block h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.empty-block p { margin-top: .6rem; color: var(--text-muted); }
.big-404 { color: var(--primary); font-size: 5rem; font-weight: 700; line-height: 1; letter-spacing: -.05em; opacity: .25; }

/* صفحه‌ی Privacy */
.legal { display: grid; gap: 2rem; }
.legal-toc { align-self: start; padding: 1.25rem 1.4rem; font-size: var(--fs-sm); }
.legal-toc ol { display: grid; gap: .35rem; margin: .6rem 0 0 1.1rem; padding: 0; }
.legal-toc a { color: var(--text-muted); }
.legal-toc a:hover { color: var(--primary); }
.legal-body { max-width: 720px; color: var(--text-muted); font-size: var(--fs-body); line-height: 1.75; }
.legal-body h2 { margin: 2.25rem 0 .75rem; color: var(--text); font-size: 1.25rem; letter-spacing: -.02em; scroll-margin-top: calc(var(--header-h) + 16px); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p + p { margin-top: .8rem; }
.legal-body ul { display: grid; gap: .5rem; padding-left: 1.25rem; list-style: disc; }
.legal-body strong { color: var(--text); }
.legal-body code { padding: .1rem .35rem; border-radius: 6px; background: var(--soft); font-size: .9em; }

/* تیک رضایت Privacy زیر فرم‌ها */
.consent { display: flex; align-items: flex-start; gap: .6rem; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; cursor: pointer; }
.consent input { flex-shrink: 0; width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--primary); }
.consent a { font-weight: 700; }

.login-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    max-width: 760px;
    margin: 0 auto 1.5rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: var(--primary-soft);
    font-size: var(--fs-sm);
}
.login-hint .icon { color: var(--primary); }
.map-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.75rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.4;
    transition: border-color .2s;
}
.map-card:hover { border-color: var(--primary); color: var(--text); }
.map-card .icon { width: 22px; height: 22px; color: var(--secondary); }
.about-actions { justify-content: flex-start; margin-top: 1rem; }

/* حذف حساب در «Il mio account» */
.danger-zone { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.danger-zone summary { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.danger-zone summary:hover { color: var(--secondary); }
.danger-zone p { margin: .75rem 0; color: var(--text-muted); font-size: var(--fs-sm); }
.danger-zone .alert { margin-top: .75rem; }
.danger-form { display: flex; gap: .5rem; }
.danger-form input { flex: 1; min-width: 0; padding: .55rem .8rem; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 1rem; }
.btn-danger { background: var(--secondary); color: #fff; }
.btn-danger:hover { background: #CF4E65; color: #fff; }

/* ---------- ۱۳) صفحه‌های حساب کاربری ---------- */
.auth-section { padding: calc(var(--header-h) + 3rem) 0 5rem; min-height: 72vh; }
.auth-card { max-width: 420px; margin-inline: auto; padding: 1.75rem; }
.auth-head { margin-bottom: 1.5rem; text-align: center; }
.auth-head h1 { font-size: 1.75rem; letter-spacing: -.03em; }
.auth-head p { margin-top: .35rem; color: var(--text-muted); font-size: var(--fs-body); }
.auth-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: .9rem;
    border-radius: 14px;
    background: var(--soft);
    color: var(--primary);
}
.auth-icon .icon { width: 22px; height: 22px; }
.auth-card .alert { margin-bottom: 1.1rem; }
.auth-card .alert a { color: inherit; font-weight: 700; text-decoration: underline; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.forgot-link { font-size: var(--fs-sm); font-weight: 500; }
.auth-switch { margin-top: 1.4rem; text-align: center; color: var(--text-muted); font-size: var(--fs-nav); }
.auth-switch a { font-weight: 700; }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 3rem; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: .45rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .2s, background-color .2s;
}
.password-toggle .icon { width: 18px; height: 18px; }
/* چشم باز = نمایش رمز ، چشم خط‌خورده = مخفی کردن */
.password-toggle .icon-hide,
.password-toggle.on .icon-show { display: none; }
.password-toggle.on .icon-hide { display: block; }
.password-toggle:hover,
.password-toggle.on { color: var(--primary); background: var(--primary-soft); }

.strength { height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.strength span { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .35s var(--ease), background-color .35s var(--ease); }
.strength[data-level="1"] span { width: 33%; background: var(--secondary); }
.strength[data-level="2"] span { width: 66%; background: var(--warning); }
.strength[data-level="3"] span { width: 100%; background: var(--success); }

.dashboard { max-width: 880px; }
.dashboard-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 2rem; }
.dashboard-head h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); letter-spacing: -.03em; }
.dashboard-head .section-lead { margin-top: .35rem; font-size: var(--fs-body); }
.dashboard-head .section-kicker { margin-bottom: .2rem; font-size: var(--fs-sm); }
.dashboard-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
}
.dashboard-grid { display: grid; gap: 1rem; }
.dashboard-card { padding: 1.6rem; }
.dashboard-card h2 { margin-bottom: .9rem; font-size: 1.125rem; letter-spacing: -.02em; }
.data-list { margin: 0; display: grid; }
.data-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body); }
.data-list div:last-child { border-bottom: 0; }
.data-list dt { color: var(--text-muted); }
.data-list dd { margin: 0; font-weight: 500; text-align: right; word-break: break-word; }
.dashboard-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; background: var(--soft); border-color: transparent; }
.dashboard-cta h2 { margin: 0; }
.dashboard-cta p { color: var(--text-muted); font-size: var(--fs-body); }
.dashboard-cta .btn { width: 100%; }
.dashboard-cta .course-icon { display: none; }
.dashboard-col { display: grid; gap: 1rem; align-content: start; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.card-head h2 { margin: 0; }
.empty-note { color: var(--text-muted); font-size: var(--fs-body); line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* لیست ثبت‌نام‌های کاربر با وضعیت */
.enroll-list { display: grid; }
.enroll-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.enroll-item:first-child { border-top: 0; padding-top: 0; }
.enroll-kind { color: var(--text-faint); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.enroll-title { margin-top: .15rem; font-size: 1.0625rem; font-weight: 500; }
.enroll-title a { color: var(--text); }
.enroll-title a:hover { color: var(--primary); }
.enroll-meta { margin-top: .15rem; color: var(--text-muted); font-size: var(--fs-sm); }
.status-pill { flex-shrink: 0; padding: .25rem .65rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.status-wait { background: var(--warning-soft); color: #8A5410; }
.status-ok { background: var(--success-soft); color: #1E6E55; }
.status-off { background: var(--soft); color: var(--text-muted); }

/* گفت‌وگو با استودیو */
.chat-card { display: flex; flex-direction: column; }
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-height: 440px;
    min-height: 120px;
    overflow-y: auto;
    margin: 0 -.25rem 1rem;
    padding: .25rem;
}
.chat-msg { display: flex; flex-direction: column; max-width: 85%; }
.chat-msg.from-me { align-self: flex-end; align-items: flex-end; }
.chat-author { margin-bottom: .25rem; color: var(--text-faint); font-size: var(--fs-xs); white-space: nowrap; }
.chat-bubble {
    padding: .7rem .95rem;
    border-radius: 16px;
    font-size: var(--fs-body);
    line-height: 1.5;
    word-break: break-word;
}
.from-studio .chat-bubble { background: var(--soft); color: var(--text); border-top-left-radius: 4px; }
.from-me .chat-bubble { background: var(--primary); color: #fff; border-top-right-radius: 4px; }
.chat-msg.is-new .chat-bubble { box-shadow: 0 0 0 2px var(--secondary-soft); }
.chat-msg.is-new .chat-author::after { content: " · nuovo"; color: var(--secondary); font-weight: 700; }
.chat-card .alert { margin-bottom: .75rem; }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; }
.chat-form textarea {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: .7rem .9rem;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface);
    font-size: 1rem;
    resize: vertical;
}
.chat-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 91, 214, .12); }

/* نقطه‌ی اعلان پیام جدید روی آواتار منو */
.nav-avatar { position: relative; }
.nav-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: var(--secondary);
    animation: pulse 2.6s var(--ease) infinite;
}

/* ---------- ۱۴) بافت نویز روی کل سایت ---------- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.17 0 0 0 0 0.23 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* ---------- ۱۵) میکرواینتراکشن‌های عمومی ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform-origin: 0 50%;
    transform: scaleX(var(--progress, 0));
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 150;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: var(--text);
    color: #fff;
    font-size: var(--fs-nav);
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .2s, color .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.to-top .icon { width: 18px; height: 18px; }

/* ============================================================
   تبلت — از 640px به بالا
   ============================================================ */
@media (min-width: 640px) {
    .container { padding-inline: 24px; }

    .course-grid { grid-template-columns: repeat(2, 1fr); }
    /* رویدادها: کارت‌ها وسط‌چین، چه ۱ رویداد باشد چه چند تا */
    .event-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; }
    .overview-grid { grid-template-columns: 1fr 1fr; }
    .info-strip { grid-template-columns: repeat(3, 1fr); }
    .masonry { columns: 3; }
    .marquee { grid-template-columns: repeat(4, 1fr); height: 620px; }
    .marquee-col:nth-child(4) { display: block; }
    .field-row { grid-template-columns: 1fr 1fr; }
    .form { padding: 2rem; }
    .day-rest { display: inline; }

    .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   دسکتاپ — از 960px به بالا
   ============================================================ */
@media (min-width: 960px) {
    :root { --header-h: 68px; }
    .container { padding-inline: 40px; }

    /* منو: نام در چپ، لینک‌ها دقیقاً وسط، دکمه‌ها در راست */
    .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
    .nav-toggle,
    .nav-account-mobile { display: none; }
    .nav-menu {
        position: static;
        flex-direction: row;
        gap: 1.75rem;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .nav-menu > li > a {
        padding: .25rem 0;
        border-radius: 0;
        color: var(--text-muted);
        font-size: var(--fs-nav);
        transition: color .2s var(--ease);
    }
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active { background: none; color: var(--text); }
    .nav-end { justify-self: end; gap: .2rem; }
    .nav-account-desktop { display: flex; margin-left: .6rem; }
    .nav-link-btn span { display: none; }
    .nav-link-btn { padding: .5rem; }

    .hero { padding: calc(var(--header-h) + 5.5rem) 0 6rem; }
    .hero-media { margin-top: 4.5rem; }

    .section { padding: 7.5rem 0; }
    .section-head { margin-bottom: 4rem; }

    .course-grid { grid-template-columns: repeat(3, 1fr); }
    /* دسکتاپ: حدود ۴ کارت دیده می‌شود و لبه‌ی کارت بعدی نشان می‌دهد که می‌شود ادامه داد */
    .marquee { --gap: 1rem; height: 720px; }
    .masonry { columns: 4; column-gap: 1rem; }
    .masonry-item { margin-bottom: 1rem; }
    .legal { grid-template-columns: 240px 1fr; gap: 4rem; }
    .legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
    .page-head { padding-top: calc(var(--header-h) + 4rem); }
    .about-layout { grid-template-columns: 1fr 1.25fr; gap: 5rem; align-items: start; }
    .about-intro { position: sticky; top: calc(var(--header-h) + 32px); }

    .event-layout { grid-template-columns: 1fr 380px; gap: 4rem; }
    .event-side { position: sticky; top: calc(var(--header-h) + 24px); }

    .booking-layout { grid-template-columns: 320px 1fr; gap: 1.25rem; }
    .booking-summary { position: sticky; top: calc(var(--header-h) + 24px); }

    .contact-layout { grid-template-columns: .9fr 1.1fr; gap: 5rem; }

    .footer-inner { grid-template-columns: 1.5fr 1fr auto; align-items: start; }
    .footer-links { flex-direction: column; gap: .55rem; }

    .dashboard-grid { grid-template-columns: 1fr 1fr; align-items: start; }
    .chat-card { position: sticky; top: calc(var(--header-h) + 24px); }

    /* کارت برجسته‌ی رویداد: عکس چپ، متن راست */
    .fe-wide:not(.no-image) { grid-template-columns: 1fr 1fr; }
    .fe-wide .fe-media { min-height: 100%; }
    .fe-wide .fe-body { padding: 2.5rem; }
    .auth-card { padding: 2.25rem; }

    .to-top { right: 28px; bottom: 28px; }
    .lightbox-prev { left: 28px; }
    .lightbox-next { right: 28px; }
    .lightbox-close { top: 24px; right: 28px; }
}

/* ---------- احترام به تنظیم «کاهش حرکت» کاربر ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* گالری بدون حرکت خودکار؛ هر ستون با دست اسکرول می‌شود */
    .marquee-track { animation: none !important; }
    .marquee-col { overflow-y: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}