/* ==========================================================================
   1. تنظیمات عمومی هدر
   ========================================================================== */
body {
   padding: 0 !important;
}

.site-header {
   background: #8c43ab;
   color: #fff;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.09);
}

.header-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 22px 30px;
   flex-wrap: wrap;
   gap: 15px;
}

.header-logo-title {
   display: flex;
   align-items: center;
   gap: 15px;
}

.site-logo img {
   height: 56px;
   border-radius: 50%;
   background: #fff;
   padding: 3px;
   box-shadow: 0 2px 6px #48804760;
}

.site-title {
   font-size: 1.6em;
   font-weight: bold;
   font-family: "iransans", tahoma, Arial, sans-serif;
   color: #fff;
}

/* ==========================================================================
   2. فرم جستجو
   ========================================================================== */

.patient-search-form {
   display: flex;
   background: #fff;
   border-radius: 30px;
   padding: 3px;
   box-shadow: 0 1px 8px #b9deb5a0;
   min-width: 260px;
   max-width: 420px;
   flex: 1;
}

.patient-search-form input {
   border: none;
   outline: none;
   padding: 8px 15px;
   border-radius: 0 30px 30px 0;
   font-size: 14px;
   width: 100%;
   background: transparent;
}

.patient-search-form button {
   background: #8c43ab;
   color: #fff;
   border: none;
   border-radius: 30px 0 0 30px;
   padding: 8px 18px;
   cursor: pointer;
   transition: .2s;
}

.patient-search-form button:hover {
   background: #8c43cd;
}

/* ==========================================================================
   3. دکمه‌ها و تاریخ
   ========================================================================== */

.header-actions {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0 10px;
}

.data {
   color: #fff;
   font-size: 15px;
   white-space: nowrap;
   text-align: center;
}

.custom-exit-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 20px;
   background: #ff4757;
   color: #fff;
   border-radius: 25px;
   text-decoration: none;
   font-weight: 600;
   font-size: 14px;
   transition: .3s;
}

.custom-exit-btn:hover {
   background: #ff2e43;
   transform: translateY(-2px);
   box-shadow: 0 4px 6px rgba(255, 71, 87, .3);
}

/* ==========================================================================
   4. منوی ناوبری
   ========================================================================== */

.internal-navbar-wrap {
   width: 100%;
   background: #1e3a5f;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.nav-main {
   display: flex;
   justify-content: center;
   list-style: none;
   margin: 0;
   padding: 0;
}

.nav-main li {
   position: relative;
}

.nav-main a {
   display: block;
   padding: 12px 18px;
   color: #fff;
   text-decoration: none;
   font-size: 14px;
   transition: .3s;
}

.nav-main a:hover,
.active>a {
   background: #0f2744;
}

/* dropdown */

.dropdown-menu {
   position: absolute;
   top: 100%;
   right: 0;
   background: #fff;
   min-width: 220px;
   border-radius: 8px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: .25s;
   z-index: 999;
}

.dropdown-menu li {
   background: #1e3a5f;
}

.dropdown-menu a {
   color: #fff;
   padding: 12px 15px;
   border-bottom: 1px solid #eee;
}

.dropdown-menu a:hover {
   background: #fff;
   color: #1e3a5f;
}

.nav-dropdown:hover .dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

/* ==========================================================================
   5. دکمه منوی موبایل
   ========================================================================== */

.mobile-menu-btn {
   display: none;
   background: transparent;
   border: none;
   color: #fff;
   cursor: pointer;
}

/* ==========================================================================
   6. ریسپانسیو تبلت
   ========================================================================== */

@media (max-width:992px) {

   .header-row {
      flex-direction: column;
      text-align: center;
   }

   .header-logo-title {
      flex-direction: column;
   }

   .site-title {
      font-size: 1.4em;
   }

   .patient-search-form {
      width: 100%;
      max-width: 350px;
   }

   .header-actions {
      width: 100%;
      justify-content: space-between;
      padding: 0 10px
   }

}

/* ==========================================================================
   7. ریسپانسیو موبایل
   ========================================================================== */

@media (max-width:768px) {

   .mobile-menu-btn {
      display: block;
   }

   .internal-navbar-wrap {
      display: none;
      width: 100%;
   }

   .internal-navbar-wrap.show-mobile {
      display: block;
   }

   .nav-main {
      flex-direction: column;
      width: 100%;
   }

   .nav-main li {
      width: 100%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
   }

   .nav-main a {
      padding: 14px;
      font-size: 14px;
   }

   /* dropdown در موبایل */

   .dropdown-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      display: none;
      box-shadow: none;
      border-radius: 0;
   }

   .nav-dropdown:hover .dropdown-menu {
      display: block;
   }

}

/* ==========================================================================
   8. موبایل کوچک
   ========================================================================== */

@media (max-width:480px) {

   .site-title {
      font-size: 1.2em;
      line-height: 1.7;
   }

   .patient-search-form input {
      font-size: 13px;
   }

   .patient-search-form button {
      padding: 7px 14px;
   }

   .custom-exit-btn {
      font-size: 12px;
      padding: 6px 12px;
   }

   .data {
      font-size: 13px;
      text-align: center;
   }

}

/* ==========================================================================
   9. موبایل خیلی کوچک
   ========================================================================== */

@media (max-width:360px) {

   .site-title {
      font-size: 1.1em;
   }

   .nav-main a {
      font-size: 13px;
      padding: 12px;
   }

}