/* ==========================================================================
   SkyWings site header (new design, Oct 2026)
   Loaded by Deira.Master on every page. All rules are scoped to the header,
   the agent bar and the login modal so they do not affect other markup.
   On Home.aspx, newhome.css switches the header to position: fixed.
   ========================================================================== */

.sky-header {
  background: rgb(255 255 255 / 92%);
  border-bottom: 1px solid #edf2f6;
  box-shadow: 0 6px 18px rgba(15, 41, 52, 0.06);
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(4px);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
}

.sky-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 63px;
  gap: 28px;
  width: auto;
  max-width: 1380px;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

.sky-header .container:before,
.sky-header .container:after {
  display: none;
}

.sky-header a,
.sky-header a:hover,
.sky-header a:focus {
  text-decoration: none;
}

.sky-header .menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(14, 90, 124, 0.12);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
}

.sky-header .menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #123548;
  transition: all 0.3s ease;
}

.sky-header.nav-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sky-header.nav-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.sky-header.nav-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.sky-header .brand {
  display: inline-flex;
  align-items: center;
}

.sky-header .brand img {
  width: 90px;
  height: auto;
  display: block;
}

/* Agency logo / agency name for logged-in agents */
.sky-header .brand .brand-agency-logo {
  width: auto;
  max-width: 160px;
  max-height: 52px;
}

.sky-header .brand .brand-agency-name {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f1a22;
  font-family: 'Poppins', sans-serif;
}

.sky-header .main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1;
}

.sky-header .main-nav a {
  color: #0d587a;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: 0.2s ease;
}

.sky-header .main-nav a i {
  color: inherit;
  font-size: 15px;
}

.sky-header .main-nav a.active,
.sky-header .main-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ff7a00;
}

.sky-header .login-btn {
  background: linear-gradient(90deg, #ff7a00, #ff9300);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  padding: 12px 22px;
  box-shadow: 0 12px 22px rgba(255, 122, 0, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sky-header .login-btn:hover,
.sky-header .login-btn:focus {
  background: linear-gradient(90deg, #f36d00, #f79b18);
  color: #fff;
}

.sky-header .header-auth-area {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Credit balance shown next to the user menu */
.sky-header .sky-credit {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  font-size: 11px;
  font-weight: 700;
  color: #56748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sky-header .sky-credit strong {
  font-size: 15px;
  color: #0f1a22;
  text-transform: none;
  letter-spacing: 0;
}

.sky-header .header-user-menu {
  position: relative;
  display: inline-block;
}

.sky-header .user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(14, 90, 124, 0.08);
  border-radius: 12px;
  padding: 9px 14px 9px 10px;
  color: #123548;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(3, 23, 33, 0.08);
}

.sky-header .user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e9eef2;
  color: #0f1a22;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.sky-header .user-name {
  font-size: 14px;
  color: #0f1a22;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sky-header .user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid rgba(14, 90, 124, 0.08);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 26, 34, 0.12);
  margin: 0;
  padding: 8px 0;
  display: none;
  z-index: 1100;
}

.sky-header .header-user-menu.is-open .user-dropdown {
  display: block;
}

.sky-header .user-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sky-header .user-dropdown li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #1b2d3d;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sky-header .user-dropdown li a i {
  width: 16px;
  text-align: center;
  color: #0d587a;
}

.sky-header .user-dropdown li a:hover {
  background: #f5f8fa;
  color: #0f1a22;
}

.sky-header .user-dropdown li.logout-item {
  border-top: 1px solid #edf2f6;
  margin-top: 4px;
  padding-top: 4px;
}

.sky-header .user-dropdown li.logout-item a,
.sky-header .user-dropdown li.logout-item a i {
  color: #d9534f;
}

.sky-header .user-dropdown li.credit-item p {
  margin: 0;
  padding: 4px 14px;
  font-size: 12px;
  color: #56748b;
}

.sky-header .user-dropdown-foot {
  border-top: 1px solid #edf2f6;
  margin-top: 4px;
  padding: 10px 14px 4px;
  font-size: 12px;
  color: #56748b;
}

.sky-header .user-dropdown-foot .agencyName {
  display: block;
  font-weight: 700;
  color: #0f1a22;
  margin-bottom: 4px;
}

.sky-header .user-dropdown-foot div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

/* Agent information bar (logged-in agents only) */
.sky-agent-bar {
  background: linear-gradient(90deg, #0d587a, #0d7ca8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.sky-agent-bar .sky-agent-bar-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 6px 18px;
}

.sky-agent-bar .alert-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffd2a6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sky-agent-bar .alert-label a {
  color: #fff;
}

.sky-agent-bar .alert-marquee {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

/* Duration is set from the text length by the header script in Deira.Master */
.sky-agent-bar .alert-marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: sky-marquee var(--sky-marquee-duration, 60s) linear infinite;
}

.sky-agent-bar .alert-marquee:hover span {
  animation-play-state: paused;
}

@keyframes sky-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.sky-agent-bar .agent-meta {
  flex-shrink: 0;
  display: inline-flex;
  gap: 16px;
}

/* Login modal */
.custom-auth-modal .modal-dialog {
  width: 460px;
  max-width: calc(100% - 24px);
  margin: 30px auto;
}

.custom-auth-modal .modal-content {
  border: 1px solid rgba(14, 90, 124, 0.08);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(12, 30, 42, 0.14);
}

.custom-auth-modal .modal-header {
  border-bottom: none;
  padding: 24px 24px 8px;
  background: #fff;
}

.custom-auth-modal .modal-title {
  margin: 0;
  color: #0f1a22;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-auth-modal .auth-title-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #edf0f2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4d5b66;
  font-size: 18px;
  flex-shrink: 0;
}

.custom-auth-modal .close {
  margin-top: -6px;
  color: #6a7b88;
  opacity: 1;
  font-size: 30px;
  line-height: 1;
}

.custom-auth-modal .modal-body {
  padding: 8px 24px 12px;
}

.custom-auth-modal .form-group {
  margin-bottom: 18px;
}

.custom-auth-modal label {
  font-size: 13px;
  font-weight: 700;
  color: #1b2d3d;
  margin-bottom: 8px;
}

.custom-auth-modal .form-control {
  height: 40px;
  border: 1px solid #dfeaf1;
  border-radius: 10px;
  box-shadow: none;
  color: #1b2d3d;
  font-size: 14px;
  padding: 10px 14px;
}

.custom-auth-modal .form-control:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
}

.custom-auth-modal .forgot-link {
  color: #0e5a7c;
  font-size: 13px;
  font-weight: 600;
}

.custom-auth-modal .modal-footer {
  border-top: none;
  padding: 0 24px 24px;
  margin-top: 0;
}

.custom-auth-modal .modal-footer .btn {
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #ff7a00, #ff9300);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 12px 22px rgba(255, 122, 0, 0.18);
  margin: 0;
}

.custom-auth-modal .modal-footer .btn:hover,
.custom-auth-modal .modal-footer .btn:focus {
  background: linear-gradient(90deg, #f36d00, #f79b18);
  color: #fff;
}

@media (max-width: 991px) {
  .sky-header .menu-toggle {
    display: inline-flex;
  }

  .sky-header .container {
    flex-wrap: wrap;
    min-height: 63px;
    gap: 12px;
    position: relative;
  }

  .sky-header .brand {
    flex: 1;
  }

  .sky-header .main-nav {
    display: none;
    position: absolute;
    left: 18px;
    right: 18px;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(14, 90, 124, 0.08);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 16px 30px rgba(15, 26, 34, 0.12);
    z-index: 1100;
  }

  .sky-header.nav-open .main-nav {
    display: flex;
  }

  .sky-header .main-nav a {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
  }

  .sky-header .header-auth-area {
    margin-left: auto;
  }

  .sky-header .sky-credit {
    display: none;
  }
}

@media (max-width: 767px) {
  .sky-header .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sky-header .brand img {
    width: 102px;
  }

  .sky-header .login-btn {
    padding: 10px 16px;
  }

  .sky-header .user-trigger {
    padding: 8px 10px 8px 8px;
  }

  .sky-header .user-name {
    display: none;
  }
}