/* main.css */

/* ========== ALL @IMPORTS MUST BE FIRST ========== */
@import 'components/button.css';
@import 'components/banners.css';
@import 'components/card.css';
@import 'components/mentors.css';
@import 'components/form.css';
@import 'components/table.css';
@import 'components/modal.css';
@import 'components/alert.css';
@import 'components/pagination.css';
@import 'components/breadcrumb.css';
@import 'components/header.css';
@import 'components/footer.css';
@import 'components/hero.css';
@import 'components/courses.css';
@import 'components/blog.css';
@import 'components/sidebar.css';
@import 'components/dashboard.css';

/* ========== ROOT VARIABLES ========== */
:root{
  /* Primary Colors - فقط نارنجی */
  --primary:#FF6100;
  --primary-dark:#E05500;
  --primary-light:#FFF2E8;

  /* Text Colors - سه سطح کنتراست */
  --text:#111;
  --text-muted:#555;
  --text-light:#FFFFFF;

  /* Border & Background */
  --border:#E0E0E0;
  --border-light:#EEE;
  --bg:#FFF;
  --bg-gray:#F7F7F7;

  /* Status Colors */
  --success:#2E7D32;
  --error:#DC2626;

  /* Shadows - خیلی ملایم */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);

  /* Border Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;

  /* Typography */
  --font-fa:'Vazirmatn','IRANSans',Tahoma,sans-serif;
  --font-en:'Inter','Segoe UI',system-ui,sans-serif;

  /* Spacing */
  --container:1380px;
  --spacing-xs:4px;
  --spacing-sm:8px;
  --spacing-md:16px;
  --spacing-lg:24px;
  --spacing-xl:32px;
  --spacing-2xl:48px;
  --spacing-3xl:64px;
}

/* ========== FONTS ========== */
@font-face{
  font-family:'Vazirmatn';
  src:url('/static/fonts/Vazirmatn-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:'Vazirmatn';
  src:url('/static/fonts/Vazirmatn-Bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}

/* ========== RESET & BASE ========== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:var(--font-fa);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
}

button{
  font-family:'Vazirmatn';
}

a{
  text-decoration:none;
}

/* ========== CONTAINER ========== */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--spacing-lg);
}

/* ========== LINKS ========== */
a{
  text-decoration:none;
  color:var(--text-muted);
  transition:color 0.2s ease;
}

a:hover{
  color:var(--primary);
}

/* ========== TYPOGRAPHY ========== */
h1,h2,h3,h4,h5,h6{
  font-weight:700;
  line-height:1.3;
  color:var(--text);
  margin-bottom:var(--spacing-md);
}

h1{font-size:32px;}
h2{font-size:28px;}
h3{font-size:24px;}
h4{font-size:20px;}
h5{font-size:18px;}
h6{font-size:16px;}

p{
  margin-bottom:var(--spacing-md);
  color:var(--text-muted);
}

/* ========== UTILITY CLASSES ========== */

/* Text */
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.text-primary{color:var(--primary);}
.text-dark{color:var(--text);}
.text-muted{color:var(--text-muted);}
.text-light{color:var(--text-light);}
.text-success{color:var(--success);}
.text-error{color:var(--error);}

/* Margin */
.m-0{margin:0;}
.mt-1{margin-top:var(--spacing-xs);}
.mt-2{margin-top:var(--spacing-sm);}
.mt-3{margin-top:var(--spacing-md);}
.mt-4{margin-top:var(--spacing-lg);}
.mt-5{margin-top:var(--spacing-xl);}
.mt-6{margin-top:var(--spacing-2xl);}

.mb-1{margin-bottom:var(--spacing-xs);}
.mb-2{margin-bottom:var(--spacing-sm);}
.mb-3{margin-bottom:var(--spacing-md);}
.mb-4{margin-bottom:var(--spacing-lg);}
.mb-5{margin-bottom:var(--spacing-xl);}
.mb-6{margin-bottom:var(--spacing-2xl);}

/* Padding */
.p-0{padding:0;}
.p-1{padding:var(--spacing-xs);}
.p-2{padding:var(--spacing-sm);}
.p-3{padding:var(--spacing-md);}
.p-4{padding:var(--spacing-lg);}
.p-5{padding:var(--spacing-xl);}
.p-6{padding:var(--spacing-2xl);}

/* Flex */
.d-flex{display:flex;}
.d-inline-flex{display:inline-flex;}
.flex-row{flex-direction:row;}
.flex-column{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.flex-nowrap{flex-wrap:nowrap;}
.flex-1{flex:1;}

.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.justify-around{justify-content:space-around;}

.align-start{align-items:flex-start;}
.align-end{align-items:flex-end;}
.align-center{align-items:center;}
.align-stretch{align-items:stretch;}

.gap-1{gap:var(--spacing-xs);}
.gap-2{gap:var(--spacing-sm);}
.gap-3{gap:var(--spacing-md);}
.gap-4{gap:var(--spacing-lg);}
.gap-5{gap:var(--spacing-xl);}

/* Grid */
.d-grid{display:grid;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--spacing-lg);
}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* Width */
.w-100{width:100%;}
.w-75{width:75%;}
.w-50{width:50%;}
.w-25{width:25%;}
.w-auto{width:auto;}

/* Border Radius */
.rounded-sm{border-radius:var(--radius-sm);}
.rounded-md{border-radius:var(--radius-md);}
.rounded-lg{border-radius:var(--radius-lg);}
.rounded-circle{border-radius:50%;}

/* Background */
.bg-white{background:var(--bg);}
.bg-gray{background:var(--bg-gray);}
.bg-primary{background:var(--primary);}
.bg-primary-light{background:var(--primary-light);}
.bg-transparent{background:transparent;}

/* Other */
.cursor-pointer{cursor:pointer;}
.overflow-hidden{overflow:hidden;}
.position-relative{position:relative;}
.position-absolute{position:absolute;}

/* Sections */
.section{
  padding:var(--spacing-xl) 0;
  border-bottom:1px solid var(--border-light);
}

.section:last-child{
  border-bottom:none;
}

.section-title{
  font-size:24px;
  font-weight:700;
  color:var(--text);
  margin-bottom:var(--spacing-xl);
  position:relative;
  display:inline-block;
}

.section-title:after{
  content:'';
  position:absolute;
  bottom:-8px;
  right:0;
  width:60px;
  height:3px;
  background:var(--primary);
  border-radius:var(--radius-sm);
}

.divider{
  height:1px;
  background:var(--border-light);
  margin:var(--spacing-2xl) 0;
}

.badge{
  display:inline-block;
  padding:4px 8px;
  background:var(--bg-gray);
  border-radius:var(--radius-sm);
  font-size:12px;
  color:var(--text-muted);
}

.demo-color-box{
  display:inline-block;
  width:60px;
  height:60px;
  border-radius:var(--radius-sm);
  margin-bottom:var(--spacing-sm);
}

.color-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:var(--spacing-md);
  margin-top:var(--spacing-md);
}

.color-item{
  text-align:center;
}

.ltr{
  direction:ltr;
  text-align:left;
}

.ltr .section-title:after{
  right:auto;
  left:0;
}

::-webkit-scrollbar{
  width:4px;
  height:4px;
}

::-webkit-scrollbar-track{
  background:var(--border-light);
  border-radius:var(--radius-sm);
}

::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover{
  background:var(--text-muted);
}

::selection{
  background:var(--primary-light);
  color:var(--primary);
}

/* ========== RESPONSIVE ========== */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
  .container{
    padding:0 var(--spacing-md);
  }

  h1{font-size:28px;}
  h2{font-size:24px;}
  h3{font-size:20px;}

  .grid-2,.grid-3,.grid-4{
    grid-template-columns:1fr;
  }

  .section{
    padding:var(--spacing-2xl) 0;
  }

  .section-title{
    font-size:24px;
  }
}

@media (max-width:768px){
  .hide-mobile{display:none !important;}
}

@media (min-width:769px) and (max-width:1024px){
  .hide-tablet{display:none !important;}
}

@media (min-width:1025px){
  .hide-desktop{display:none !important;}
}

.banners-slider .banner-item,
.banners-slider .banner-content,
.banners-slider .banner-title,
.banners-slider .banner-subtitle,
.banners-slider .banner-buttons {
    direction:rtl;
}