/* =========================================================
   SITE CONTROL
========================================================= */

#siteMaintenanceOverlay[hidden] {
  display: none !important;
}


#siteMaintenanceOverlay {
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    radial-gradient(
      circle at top left,
      rgba(15, 157, 88, 0.10),
      transparent 38%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(22, 119, 255, 0.08),
      transparent 34%
    ),
    #f7faf8;

  overflow-y: auto;
}


.site-maintenance-card {
  width: min(
    100%,
    520px
  );

  padding: 34px;

  background: #ffffff;

  border:
    1px solid
    #e4ebe7;

  border-radius: 26px;

  box-shadow:
    0 24px 80px
    rgba(
      16,
      24,
      40,
      0.12
    );

  text-align: center;
}


.site-maintenance-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-bottom: 28px;
}


.site-maintenance-brand strong {
  color: #101c17;

  font-size: 20px;
  font-weight: 800;

  letter-spacing: -0.3px;
}


.site-maintenance-logo {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #2015b7,
      #071f89
    );

  color: #ffffff;

  font-size: 18px;
  font-weight: 900;
}


.site-maintenance-icon {
  width: 74px;
  height: 74px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin:
    0 auto
    20px;

  border-radius: 22px;

  background: #eefaf4;

  font-size: 34px;
}


.site-maintenance-label {
  display: block;

  margin-bottom: 10px;

  color: #08567a;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 1.4px;
}


.site-maintenance-card h1 {
  margin:
    0 0
    12px;

  color: #13221b;

  font-size: 30px;
  font-weight: 850;

  letter-spacing: -0.8px;
}


.site-maintenance-card > p {
  max-width: 410px;

  margin:
    0 auto
    26px;

  color: #68756f;

  font-size: 14px;

  line-height: 1.7;
}


.site-maintenance-status {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 22px;

  padding: 15px 17px;

  border:
    1px solid
    #dfe9e3;

  border-radius: 16px;

  background: #f9fbfa;

  text-align: left;
}


.site-maintenance-status-dot {
  width: 12px;
  height: 12px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #f5a524;

  box-shadow:
    0 0 0 5px
    rgba(
      245,
      165,
      36,
      0.12
    );

  animation:
    maintenancePulse
    1.5s
    infinite;
}


.site-maintenance-status div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.site-maintenance-status strong {
  color: #26332d;

  font-size: 13px;
  font-weight: 800;
}


.site-maintenance-status span {
  color: #78837e;

  font-size: 11px;
}


.site-maintenance-retry {
  width: 100%;

  min-height: 50px;

  border: 0;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #126fad,
      #07368c
    );

  color: #ffffff;

  cursor: pointer;

  font-size: 13px;
  font-weight: 800;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}


.site-maintenance-retry:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 10px 24px
    rgba(
      8,
      140,
      77,
      0.20
    );
}


.site-maintenance-card > small {
  display: block;

  margin-top: 18px;

  color: #9aa39f;

  font-size: 10px;
}


@keyframes maintenancePulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }

}


html.site-maintenance-active,
body.site-maintenance-active {
  overflow: hidden !important;
}


@media (
  max-width: 600px
) {

  #siteMaintenanceOverlay {
    padding: 16px;
  }


  .site-maintenance-card {
    padding:
      28px 20px;

    border-radius: 22px;
  }


  .site-maintenance-card h1 {
    font-size: 25px;
  }

}


/* =========================================================
   ANNOUNCEMENT
========================================================= */

#siteAnnouncement[hidden] {
  display: none !important;
}


#siteAnnouncement {
  position: fixed;

  top: 16px;
  left: 50%;

  transform: translateX(-50%);

  z-index: 99990;

  width:
    min(
      calc(100% - 32px),
      720px
    );

  pointer-events: none;
}


.site-announcement-inner {
  display: flex;
  align-items: center;

  gap: 13px;

  padding:
    13px 14px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  border:
    1px solid
    #dce9e2;

  border-radius: 16px;

  box-shadow:
    0 16px 40px
    rgba(
      20,
      36,
      28,
      0.14
    );

  backdrop-filter:
    blur(14px);

  pointer-events: auto;

  animation:
    siteAnnouncementEnter
    0.3s ease;
}


.site-announcement-icon {
  width: 40px;
  height: 40px;

  flex:
    0 0
    40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    #edf9f3;

  font-size: 18px;
}


.site-announcement-content {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 3px;

  text-align: left;
}


.site-announcement-content strong {
  color:
    #17251e;

  font-size:
    13px;

  font-weight:
    850;
}


.site-announcement-content span {
  color:
    #68766f;

  font-size:
    11px;

  line-height:
    1.5;
}


.site-announcement-close {
  width: 34px;
  height: 34px;

  flex:
    0 0
    34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    #e1e8e4;

  border-radius:
    10px;

  background:
    #f8faf9;

  color:
    #77817c;

  cursor:
    pointer;

  font-size:
    19px;

  line-height:
    1;

  transition:
    0.15s ease;
}


.site-announcement-close:hover {
  background:
    #eef4f1;

  color:
    #17251e;
}


@keyframes siteAnnouncementEnter {

  from {
    opacity: 0;

    transform:
      translateY(
        -12px
      );
  }


  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }

}


@media (
  max-width: 600px
) {

  #siteAnnouncement {
    top: 10px;

    width:
      calc(
        100% - 20px
      );
  }


  .site-announcement-inner {
    padding:
      11px 12px;

    border-radius:
      14px;
  }


  .site-announcement-icon {
    width: 36px;
    height: 36px;

    flex-basis:
      36px;
  }


  .site-announcement-content strong {
    font-size:
      12px;
  }


  .site-announcement-content span {
    font-size:
      10px;
  }

}