/* =====================================================================
   پوسته‌ی بصری ماکان (makan-theme.css)
   ---------------------------------------------------------------------
   فقط ظاهر را تغییر می‌دهد (رنگ، فونت، سایه، گوشه، افکت حرکت).
   به چیدمان و محتوای صفحه‌ها دست نمی‌زند؛ برای برگرداندن کافی است
   خطِ <link> این فایل از صفحه حذف شود.
   صفحه‌ها: سایت اصلی، سامانه‌ی باشگاه، پنل مدیر/مربی/ورزشکار، فروشگاه.
   ===================================================================== */

/* فونت وزیرمتن از داخل خود پروژه (بدون وابستگی به اینترنت/گوگل)
   مجوز: SIL Open Font License — static/fonts/vazirmatn/OFL.txt */
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/vazirmatn/Vazirmatn-Variable.woff2") format("woff2-variations"),
         url("../fonts/vazirmatn/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --mk-navy: #0f1d3a;
    --mk-navy-2: #1b2f5c;
    --mk-orange: #ff7a00;
    --mk-orange-2: #ffa24a;
    --mk-ink: #172033;
    --mk-muted: #667085;
    --mk-line: #e8ebf2;
    --mk-soft: #fff4e8;
    --mk-radius: 16px;
    --mk-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .05);
    --mk-shadow-md: 0 4px 10px rgba(16, 24, 40, .06), 0 14px 32px rgba(16, 24, 40, .08);
    --mk-shadow-orange: 0 8px 22px rgba(255, 122, 0, .28);
    --mk-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------------------
   پایه‌ی مشترک
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body, button, input, select, textarea {
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif !important;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-image:
        radial-gradient(1200px 500px at 100% -10%, rgba(255, 122, 0, .07), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(27, 47, 92, .07), transparent 60%);
    background-attachment: fixed;
}

::selection { background: rgba(255, 122, 0, .22); }

a, button, .btn, [class*="button"], [class*="card"], [class*="link"] {
    transition: transform .25s var(--mk-ease), box-shadow .25s var(--mk-ease),
                background-color .2s ease, color .2s ease, border-color .2s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--mk-orange) !important;
    box-shadow: 0 0 0 4px rgba(255, 122, 0, .14) !important;
}

/* اسکرول‌بار ظریف */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aeb7c7; background-clip: content-box; }

/* =====================================================================
   سایت اصلی (site_home)
   ===================================================================== */
.top-header {
    background: linear-gradient(120deg, var(--mk-navy) 0%, var(--mk-navy-2) 100%) !important;
    box-shadow: 0 6px 24px rgba(15, 29, 58, .25);
}
.brand-mark {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
    box-shadow: var(--mk-shadow-orange);
}
.header-button-orange, .search-button {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
    box-shadow: var(--mk-shadow-orange);
    border-color: transparent !important;
}
.header-button:hover, .search-button:hover { transform: translateY(-2px); }

/* منوی اصلی روی زمینه‌ی تیره است؛ رنگ زمینه‌ی آن دست نمی‌خورد */
.nav-link { border-radius: 10px; position: relative; }
.nav-link:hover, .nav-link.active {
    color: var(--mk-orange-2) !important;
    background: rgba(255, 255, 255, .08) !important;
}

.news-card, .side-card, .service-card, .club-card, .vertical-ad-card {
    border-radius: var(--mk-radius) !important;
    border: 1px solid var(--mk-line) !important;
    box-shadow: var(--mk-shadow-sm) !important;
    overflow: hidden;
}
.news-card:hover, .service-card:hover, .club-card:hover, .vertical-ad-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mk-shadow-md) !important;
    border-color: #ffd2a8 !important;
}
.news-card img { transition: transform .5s var(--mk-ease); }
.news-card:hover img { transform: scale(1.04); }

.side-card-title, .service-title, .club-name { color: var(--mk-ink); }
.service-icon {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mk-soft), #ffffff) !important;
    box-shadow: inset 0 0 0 1px #ffe2c4;
}
.service-button {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--mk-shadow-orange);
}
.service-button:hover { transform: translateY(-2px); }
.club-rank {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
    color: #fff !important;
}
.ticker-label, .ad-ticker-label {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
}
.footer {
    background: linear-gradient(160deg, var(--mk-navy) 0%, #0b1530 100%) !important;
}
.footer-link:hover { color: var(--mk-orange-2) !important; }

/* =====================================================================
   صفحه‌ی سامانه‌ی مدیریت یکپارچه (home)
   ===================================================================== */
.hero-card {
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 29, 58, .16) !important;
}

/* چیدمان این صفحه قبلاً دقیقاً به اندازه‌ی ارتفاع صفحه قفل بود (100vh و overflow:hidden)؛
   وقتی محتوا بیشتر از ارتفاع صفحه می‌شد (دکمه‌ی پنجم، موبایل، لپ‌تاپ کوتاه)،
   بخش‌ها فشرده می‌شدند و روی هم می‌افتادند. حالا اگر جا باشد کل صفحه را پر می‌کند
   و اگر نباشد، صفحه به‌طور عادی اسکرول می‌شود. */
.page:has(> .hero .hero-card) {
    height: auto !important;
    min-height: 100vh;
    overflow-x: clip !important;   /* بدون اسکرول افقی در موبایل */
    overflow-y: visible !important;
}
.page:has(> .hero .hero-card) > .hero { height: auto !important; min-height: 100vh; }
.hero-card:has(> .hero-content) {
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 24px);
    overflow: visible !important;
}
.hero-content { height: auto !important; min-height: 100%; }
.hero-content > * { flex-shrink: 0 !important; }
.action-button { border-radius: 14px !important; }
.action-primary {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
    box-shadow: var(--mk-shadow-orange) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.action-secondary { box-shadow: var(--mk-shadow-sm); }
.action-button:hover { transform: translateY(-3px) !important; box-shadow: var(--mk-shadow-md) !important; }
.feature-card, .stat-card, .top-club-item {
    border-radius: var(--mk-radius) !important;
    box-shadow: var(--mk-shadow-sm);
}
.feature-card:hover, .top-club-item:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow-md); }

/* =====================================================================
   پنل مدیر باشگاه (manager_dashboard)
   ===================================================================== */
.sidebar {
    background: linear-gradient(180deg, var(--mk-navy) 0%, var(--mk-navy-2) 100%) !important;
    box-shadow: -6px 0 30px rgba(15, 29, 58, .18);
}
.sidebar .menu-link { border-radius: 12px; }
.sidebar .menu-link:hover {
    background: rgba(255, 255, 255, .10) !important;
    transform: translateX(-3px);
}
.sidebar .menu-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(255, 255, 255, .08);
}
.topbar { box-shadow: var(--mk-shadow-sm); }
.club-banner {
    background: linear-gradient(120deg, var(--mk-navy) 0%, var(--mk-navy-2) 55%, #2d4a85 100%) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(15, 29, 58, .22) !important;
    color: #fff;
}
.stat-card, .dashboard .section {
    border-radius: var(--mk-radius) !important;
    border: 1px solid var(--mk-line) !important;
    box-shadow: var(--mk-shadow-sm) !important;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-md) !important; }
.stat-icon {
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--mk-soft), #fff) !important;
    box-shadow: inset 0 0 0 1px #ffe2c4;
}
.stat-number { color: var(--mk-navy) !important; }
.logout-button { border-radius: 12px !important; }
.mobile-header { background: linear-gradient(120deg, var(--mk-navy), var(--mk-navy-2)) !important; }

/* =====================================================================
   پنل مربی و ورزشکار (coach_dashboard / athlete_dashboard)
   ===================================================================== */
.topbar-inner { position: relative; }
body > .topbar {
    background: linear-gradient(120deg, var(--mk-navy) 0%, var(--mk-navy-2) 100%) !important;
    box-shadow: 0 6px 24px rgba(15, 29, 58, .22) !important;
    border: 0 !important;
}
body > .topbar .brand-text strong, body > .topbar .brand strong { color: #fff !important; }
body > .topbar .brand-text span, body > .topbar .brand span { color: #c6cfe0 !important; }
.brand-icon {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
    box-shadow: var(--mk-shadow-orange);
    color: #fff;
}
body > .topbar .logout {
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
}
body > .topbar .logout:hover { background: rgba(255, 255, 255, .18) !important; }

.welcome {
    border-radius: 22px !important;
    border: 1px solid #ffe2c4 !important;
    background:
        radial-gradient(500px 220px at 0% 0%, rgba(255, 122, 0, .10), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #fffaf5 100%) !important;
    box-shadow: var(--mk-shadow-md) !important;
}
.welcome .avatar {
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #ffd2a8, var(--mk-shadow-sm) !important;
}
.section-title { color: var(--mk-ink) !important; position: relative; padding-right: 14px; }
.section-title::before {
    content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 70%; border-radius: 4px;
    background: linear-gradient(180deg, var(--mk-orange), var(--mk-orange-2));
}
.club-card, .feature, .insurance {
    border-radius: var(--mk-radius) !important;
    border: 1px solid var(--mk-line) !important;
    box-shadow: var(--mk-shadow-sm) !important;
}
.feature:hover, .club-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mk-shadow-md) !important;
    border-color: #ffd2a8 !important;
}
.feature .feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mk-soft), #fff);
    box-shadow: inset 0 0 0 1px #ffe2c4;
    min-width: 48px; min-height: 48px;
}
.feature:hover .feature-icon { transform: scale(1.06) rotate(-3deg); }
.feature-title { color: var(--mk-ink) !important; }
.sports .sport {
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--mk-soft), #fff) !important;
    border: 1px solid #ffd9b3 !important;
    color: #c25e00 !important;
}

/* =====================================================================
   فروشگاه (store)
   ===================================================================== */
.store-header {
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    box-shadow: var(--mk-shadow-sm) !important;
    border-bottom: 1px solid var(--mk-line) !important;
}
.store-brand-icon {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
    box-shadow: var(--mk-shadow-orange);
}
.cart-button {
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--mk-navy), var(--mk-navy-2)) !important;
    color: #fff !important;
}
.cart-count { background: var(--mk-orange) !important; color: #fff !important; }
.store-hero {
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(15, 29, 58, .18) !important;
}
.category-pill { border-radius: 999px !important; }
.category-pill:hover { border-color: var(--mk-orange) !important; color: var(--mk-orange) !important; }
.product-card {
    border-radius: 18px !important;
    border: 1px solid var(--mk-line) !important;
    box-shadow: var(--mk-shadow-sm) !important;
    overflow: hidden;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mk-shadow-md) !important;
    border-color: #ffd2a8 !important;
}
.product-image-box img { transition: transform .5s var(--mk-ease); }
.product-card:hover .product-image-box img { transform: scale(1.05); }
.current-price { color: var(--mk-navy) !important; }
.badge-discount { background: linear-gradient(135deg, #ef4444, #f97316) !important; color: #fff !important; }
.add-cart-button {
    background: linear-gradient(135deg, var(--mk-orange), var(--mk-orange-2)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: var(--mk-shadow-orange);
}
.add-cart-button:hover { transform: translateY(-2px); }

/* =====================================================================
   موبایل و تبلت
   ===================================================================== */
/* هیچ صفحه‌ای نباید در گوشی اسکرول افقی بگیرد (clip برخلاف hidden سربرگ‌های sticky را خراب نمی‌کند) */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }

@media (max-width: 900px) {
    /* ستون‌بندی‌هایی که مستقیماً در خود صفحه (style="...") نوشته شده‌اند و
       media query معمولی به آن‌ها نمی‌رسد؛ مثل بخش اصلی صفحه‌ی خانه با ستون ثابت ۳۰۰ پیکسلی */
    section.hero > .container[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
    /* در گوشی، هر ستون‌بندی درون‌خطی تک‌ستونه می‌شود */
    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    /* جدول‌های عریض داخل کادر خودشان اسکرول می‌شوند، نه کل صفحه */
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* دکمه‌ها و فیلدها برای لمس با انگشت */
    input, select, textarea { font-size: 16px !important; }  /* جلوگیری از زوم خودکار آیفون */
}

@media (max-width: 900px) {
    /* منوی اصلی سایت در یک خط ۱۰۰۰+ پیکسلی می‌ماند و کل صفحه را در گوشی
       عریض‌تر از صفحه‌نمایش می‌کرد؛ حالا در چند خط می‌شکند */
    .main-nav .nav-inner {
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 4px !important;
        padding-top: 6px; padding-bottom: 6px;
    }
    .main-nav .nav-link { padding: 6px 10px !important; font-size: 13px !important; }
}

/* =====================================================================
   کاهش حرکت برای کاربرانی که در سیستم‌عامل خواسته‌اند
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}


/* mobile-ads-v1: صفحه‌ی اول سایت در موبایل — تبلیغات حذف نشود و یک‌سوم ارتفاع صفحه را بگیرد */
@media (max-width: 950px){
  section.section[style*="margin-top: -140px"]{margin-top:0!important}
  .content-layout .home-ad-column{
    order:-1;
    flex-direction:row!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px;
    height:33vh;min-height:190px;max-height:320px;
    margin:14px 0!important;
    padding-bottom:4px;
  }
  .content-layout .home-ad-column > *{
    flex:0 0 100%;scroll-snap-align:center;height:100%;max-height:none;box-sizing:border-box;
  }
  .home-ad-column .vertical-ad-card{display:flex;flex-direction:column}
  .home-ad-column .vertical-ad-card img{flex:1 1 auto;min-height:0;width:100%;object-fit:cover}
  .home-ad-column .vertical-ad-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center}
}


/* mobile-ads-v2: تبلیغات صفحه‌ی اول در موبایل — بین بخش‌های صفحه، مستطیل افقی */
.mx-ad-slot{margin:14px 16px}
.mx-ad-slot > .mx-ad-item{display:flex;flex-direction:column;width:100%;box-sizing:border-box;margin:0 0 12px}
.mx-ad-slot > .mx-ad-item:last-child{margin-bottom:0}
.mx-ad-slot .vertical-ad-card,.mx-ad-slot .bottom-ad-real{overflow:hidden;border-radius:14px}
.mx-ad-slot .vertical-ad-card img,.mx-ad-slot .bottom-ad-img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;display:block}
.mx-ad-slot .mx-ad-hero img{aspect-ratio:auto;height:33vh;min-height:150px}
.mx-ad-slot .vertical-ad-placeholder,.mx-ad-slot .bottom-ad-box:not(.bottom-ad-real){min-height:104px;justify-content:center;align-items:center;text-align:center}
.mx-ad-slot .mx-ad-hero.vertical-ad-placeholder,.mx-ad-slot .mx-ad-hero.bottom-ad-box:not(.bottom-ad-real){min-height:20vh}
.bottom-ad-grid.home-bottom-ads{margin-top:14px}
.bottom-ad-real .bottom-ad-img{border-radius:12px 12px 0 0}


/* mobile-usability-v1: بیش‌از‌ ۹۰٪ کاربران با گوشی هستند */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,select,summary,label,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,122,0,.18)}
@media (max-width:700px){
  html,body{max-width:100%;overflow-x:clip}
  /* iOS هنگام فوکوس روی فیلدهای کوچکتر از ۱۶px صفحه را زوم می‌کند */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select{min-height:44px}
  /* هدف لمس مناسب برای دکمه‌ها */
  button,[role=button],input[type=submit],input[type=button],.btn,.chip,.tab{min-height:40px}
  /* تصویرها و جدول‌ها از عرض صفحه بیرون نزنند */
  img,video,iframe,svg{max-width:100%}
  table{max-width:100%}
  .table-wrap,.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* پیام‌ها و فرم‌ها در عرض کامل */
  .messages li{font-size:14px;line-height:1.9}
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference){a:active,button:active{transform:scale(.98)}}

/* ورودی فایل: خوانا و متناسب با عرض موبایل (فرم‌های کالا) */
input[type=file]{max-width:100%;padding:10px!important;height:auto!important;font-family:inherit;font-size:13px;background:#fff;border:1px dashed #cbd5e1!important;border-radius:12px!important}
input[type=file]::file-selector-button{margin-inline-end:10px;padding:8px 14px;border:0;border-radius:10px;background:#0f1d3a;color:#fff;font-family:inherit;font-weight:700;cursor:pointer}