/* --- Base Variables & Reset --- */
:root {
  --bg-color: #24292e;
  --text-color: #ffffff;
  --accent-color: #0366d6;
  --dropdown-bg: #1a1e22;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* RTL UPDATE: Set direction to RTL and added a Persian font stack */
body { 
  direction: rtl; 
  font-family: 'Vazirmatn', 'IRANSans', Tahoma, Arial, sans-serif; 
}

/* --- Navbar Container --- */
.vod-nav { background: var(--bg-color); color: var(--text-color); position: relative; z-index: 2000; }
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; height: 60px; padding: 0 20px; }
.logo { color: var(--text-color); text-decoration: none; font-size: 1.5rem; font-weight: bold; }

/* --- Mobile Toggle Button --- */
.menu-toggle { background: transparent; border: 1px solid #555; color: #fff; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 16px; }

/* --- Mobile Menu Layout (Default) --- */
/* RTL UPDATE: Changed left: 0 to right: 0 */
.menu-items { display: none; position: absolute; top: 60px; right: 0; width: 100%; background: var(--bg-color); flex-direction: column; list-style: none; padding: 0; }
.menu-items.open { display: flex; }

/* Links & Buttons styling */
/* RTL UPDATE: Changed text-align: left to text-align: right */
.menu-items a, .dropdown-toggle { display: block; width: 100%; text-align: right; padding: 15px 20px; color: var(--text-color); text-decoration: none; background: transparent; border: none; font-size: 16px; cursor: pointer; border-bottom: 1px solid #333; font-family: inherit; }
.dropdown-toggle { display: flex; justify-content: space-between; align-items: center; }
.arrow { font-size: 10px; opacity: 0.7; }

/* Submenus (Hidden by default on mobile) */
.submenu { display: none; background: var(--dropdown-bg); list-style: none; padding: 0; }
.dropdown.open .submenu { display: block; }
/* RTL UPDATE: Flipped padding to indent from the right (12px top, 20px left, 12px bottom, 40px right) */
.submenu a { padding: 12px 20px 12px 40px; border-bottom: 1px solid #222; font-size: 14px; }

/* Mega Menu Mobile */
.mega-content { display: none; flex-direction: column; padding: 0; }
.dropdown.open .mega-content { display: flex; }
.col { padding: 15px 20px; border-bottom: 1px solid #333; }
.col h4 { color: #888; text-transform: uppercase; font-size: 12px; margin-bottom: 10px; letter-spacing: 1px; }
.col a { padding: 8px 0; border: none; }


/* --- Category Icons (Hidden on Mobile by Default) --- */
.category-icon {
  display: none; 
}
/* ========================================= */
/* --- Desktop Breakpoint (Min 900px) --- */
/* ========================================= */
@media (min-width: 900px) {
  .menu-toggle { display: none; }
  
  .menu-items { display: flex; position: static; width: auto; flex-direction: row; background: transparent; align-items: center; height: 100%; }
  .menu-items > li { height: 60px; display: flex; align-items: center; }
  
  .menu-items > li:not(.mega) { position: relative; }
  .dropdown.mega { position: static; }

  .menu-items a, .dropdown-toggle { padding: 10px 15px; border: none; border-radius: 4px; }
  .menu-items a:hover, .dropdown-toggle:hover { background: #444c56; }
  
  /* Desktop Normal Dropdown */
  .submenu { 
    display: block; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    
    position: absolute; top: 60px; 
    /* RTL UPDATE: Anchored to the right side of the parent link instead of the left */
    right: 0; left: auto; 
    width: 220px; background: #fff; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: 6px; padding: 10px 0; 
  }
  
  /* Desktop Mega Menu */
  .mega-content { 
    display: flex;
    position: absolute; 
    top: 60px; 
    
  
    /* RTL UPDATE: Centering math reversed. Anchor 50% from the right, then translate positive 50% on X-axis */
    right: 70%;
    left: auto;
    width: 650px; 
    transform: translateX(50%) translateY(15px); 
    
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 8px;
    flex-direction: row; justify-content: space-between; padding: 30px; gap: 40px; 
  }
  
  .mega-content .col { border: none; padding: 0; flex: 1; }
  .mega-content .col h4 { color: #555; }
  /* Reveal and style the category icons on desktop */
  .mega-content .col .category-icon {
    display: block;
    width: 60px;
    height: 60px; /* Adjust height to your liking */
    object-fit: cover; /* Ensures images don't stretch weirdly */
    border-radius: 6px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Optional: adds a subtle shadow */
  }
  .mega-content .col a { color: #333; padding: 8px 0; }
  .mega-content .col a:hover { background: transparent; color: var(--accent-color); }
  
  .submenu a { color: #333; padding: 10px 20px; }
  .submenu a:hover { background: #f3f4f6; color: var(--accent-color); }
  
  /* The Hover Triggers */
  .dropdown:hover .submenu:not(.mega-content) { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
  }
  
  .dropdown:hover .mega-content { 
    opacity: 1; 
    visibility: visible; 
    /* RTL UPDATE: Maintain the positive 50% X-axis translation while hovering */
    transform: translateX(50%) translateY(0); 
  }
}