/* ==========================
           Body Lock
        ========================== */

 body.latest_notice_no_scroll {
     overflow: hidden;
 }


 /* ==========================
           Overlay
        ========================== */

 .announcement-overlay {
     position: fixed;
     inset: 0;

     background: rgba(0, 0, 0, 0.65);

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

     padding: 20px;

     z-index: 9999;

     opacity: 0;
     visibility: hidden;

     transition: opacity 0.3s ease,
         visibility 0.3s ease;
 }

 .announcement-overlay.active {
     opacity: 1;
     visibility: visible;
 }


 /* ==========================
           Modal
        ========================== */

 .announcement-modal {
     width: 100%;
     max-width: 760px;

     background: #fff;

     border-radius: 8px;

     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);

     overflow: hidden;

     transform: translateY(20px) scale(0.97);

     transition: transform 0.3s ease;
 }

 .announcement-overlay.active .announcement-modal {
     transform: translateY(0) scale(1);
 }


 /* ==========================
           Header
        ========================== */

 .announcement-header {
     background: #126b4f;

     color: #fff;

     padding: 18px 25px;

     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .announcement-header h2 {
     margin: 0;

     font-size: 23px;
     font-weight: 600;

     display: flex;
     align-items: center;
     gap: 12px;
 }

 .announcement-header h2 i {
     font-size: 20px;
 }


 /* Close Button */

 .announcement-close {
     background: transparent;
     border: none;

     color: #fff;

     font-size: 24px;

     cursor: pointer;

     padding: 3px 5px;

     line-height: 1;

     transition: opacity 0.2s ease;
 }

 .announcement-close:hover {
     opacity: 0.75;
 }


 /* ==========================
           Announcement List
        ========================== */

 .announcement-list {
     max-height: min(520px, calc(100vh - 170px));

     overflow-y: auto;

     padding: 5px 25px;
 }


 /* Scrollbar */

 .announcement-list::-webkit-scrollbar {
     width: 6px;
 }

 .announcement-list::-webkit-scrollbar-track {
     background: #f5f5f5;
 }

 .announcement-list::-webkit-scrollbar-thumb {
     background: #b7cfc5;
     border-radius: 4px;
 }


 /* ==========================
           Individual Announcement
        ========================== */

 .announcement-item {
     display: flex;

     align-items: self-start;

     gap: 18px;

     padding: 22px 5px;

     border-bottom: 1px solid #e5e5e5;
 }

 .announcement-item:last-child {
     border-bottom: none;
 }


 /* ==========================
           Left Icon
        ========================== */

 .announcement-icon {
     width: 58px;
     height: 58px;

     min-width: 58px;

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

     background: #f0f7f3;

     border-radius: 6px;

     color: #126b4f;

     font-size: 22px;
 }


 /* ==========================
           Content
        ========================== */

 .announcement-left {
     flex: 1;
 }

 .announcement-left h3 {
     margin: 7px 0 6px;

     color: #222;

     font-size: 18px;

     font-weight: 600;

     line-height: 1.4;
 }

 .announcement-left p {
     margin: 0;
     color: var(--text-color-black);
     font-size: 1rem;
     line-height: 1.6;
     padding: 5px;
     font-weight: 500;
 }


 /* ==========================
           Badges
        ========================== */

 .announcement-badge {
     display: inline-block;

     padding: 4px 9px;

     border-radius: 3px;

     font-size: 10px;

     font-weight: 600;
 }

 .announcement-badge.new {
     background: #e8f4eb;
     color: #126b4f;
     border: 1px solid var(--accent-3);
     font-weight: 500;
 }

 .announcement-badge.important {
     background: #fff2df;

     color: #bd7200;
 }

 .announcement-badge.update {
     background: #e9f1f8;

     color: #28618b;
 }


 /* ==========================
           Date
        ========================== */

 .announcement-date {
     min-width: 115px;

     display: flex;
     display: none;
     align-items: center;

     justify-content: flex-end;

     gap: 7px;

     color: #777;

     font-size: 13px;

     white-space: nowrap;
 }

 .announcement-date i {
     color: #126b4f;
 }


 /* ==========================
           Details Button
        ========================== */

 .announcement-details {
     display: inline-flex;
     align-items: center;
     gap: 5px;

     color: var(--text-2);
     font-size: 13px;
     font-weight: 500;
     text-decoration: none;
     background: #126b4f;
     padding: 5px 10px;
     border-radius: 2px;
     float: right;
 }

 .announcement-details:hover {
     text-decoration: underline;
 }


 /* ==========================
           Footer
        ========================== */

 .announcement-footer {
     border-top: 1px solid #eee;

     padding: 18px;

     text-align: center;
 }

 .announcement-view-all {
     display: inline-flex;

     align-items: center;

     gap: 8px;

     padding: 10px 22px;

     border: 1px solid #126b4f;

     border-radius: 4px;

     color: #126b4f;

     text-decoration: none;

     font-size: 14px;

     transition: 0.2s;
 }

 .announcement-view-all:hover {
     background: #126b4f;

     color: #fff;
 }

 /* ==========================
   Notification Icon
========================== */

 #latest_notice_icon {
     position: relative;

     width: 50px;
     height: 50px;

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

     cursor: pointer;

     z-index: 998;
 }

 #latest_notice_icon i {
     color: var(--accent-1);
     font-size: 1.5rem;
 }

 .latest_notice_badge {
     position: absolute;

     top: 2px;
     right: 1px;

     background: #d60000;
     color: #fff;

     font-size: 9px;

     padding: 2px 5px;

     border-radius: 50%;
 }


 /* ==========================
   Overlay
========================== */

 .announcement-overlay {
     position: fixed;
     inset: 0;

     background: rgba(0, 0, 0, 0.65);

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

     padding: 20px;

     z-index: 9999;

     opacity: 0;
     visibility: hidden;

     transition:
         opacity 0.25s ease,
         visibility 0s linear 0.4s;
 }


 /* ==========================
   Modal
========================== */

 .announcement-modal {
     width: 100%;
     max-width: 760px;

     background: #fff;

     border-radius: 8px;

     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);

     overflow: hidden;

     /*
       IMPORTANT:
       Initial transform will be controlled
       by JavaScript.
    */

     transform-origin: center center;

     opacity: 0;

     transition:
         transform 0.4s cubic-bezier(.22, .61, .36, 1),
         opacity 0.3s ease;
 }


 /* ==========================
   Open State
========================== */

 .announcement-overlay.active {
     opacity: 1;
     visibility: visible;

     transition:
         opacity 0.25s ease,
         visibility 0s;
 }

 .announcement-overlay.active .announcement-modal {
     opacity: 1;

     transform:
         translate(-50%, -50%) scale(1);
 }

 .announcement-overlay {
     position: fixed;
     inset: 0;

     background: rgba(0, 0, 0, 0.65);

     z-index: 9999;

     opacity: 0;
     visibility: hidden;

     transition: opacity 0.25s ease;
 }


 .announcement-modal {
     position: fixed;

     top: 50%;
     left: 50%;

     width: min(760px, calc(100vw - 32px));

     max-height: calc(100vh - 40px);

     background: #fff;

     border-radius: 8px;

     overflow: hidden;

     box-shadow: 0 10px 40px rgba(0, 0, 0, .25);

     opacity: 0;

     transform-origin: center center;
 }

 #latest_notice_icon.is-open .latest_notice_badge {
     display: none;
 }

 /* ==========================
           Mobile
        ========================== */

 @media (max-width: 600px) {

     .announcement-overlay {
         padding: 12px;
     }

     .announcement-modal {
         max-width: 100%;
     }

     .announcement-header {
         padding: 15px 18px;
     }

     .announcement-header h2 {
         font-size: 19px;
     }

     .announcement-list {
         padding: 5px 18px;

         max-height: 75vh;
     }

     .announcement-item {
         align-items: flex-start;

         gap: 12px;

         padding: 18px 0;
     }

     .announcement-icon {
         width: 45px;
         height: 45px;

         min-width: 45px;

         font-size: 17px;
     }

     .announcement-left h3 {
         font-size: 16px;
     }

     .announcement-left p {
         font-size: 13px;
     }

     .announcement-date {
         display: none;
     }

 }