/* ==========================================================================
   ATHENA HOME V5.4.0
   Popup geometry + bottom-section + ecosystem corrections
   ========================================================================== */


/* ==========================================================================
   POPUP CORE
   ========================================================================== */

#athena5CardPopup{
  --popup-accent:#2878d4;
  --popup-soft:#edf5ff;
  --popup-arrow-x:42px;

  width:310px !important;

  max-width:
    calc(100vw - 28px) !important;

  max-height:
    calc(100vh - 24px) !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  border:
    2px solid
    var(--popup-accent) !important;

  border-radius:
    12px !important;

  background:#fff !important;

  box-shadow:
    0 16px 38px
    rgba(5,31,60,.20) !important;

  z-index:999999 !important;
}


/* ==========================================================================
   EXACT COLOR FAMILIES
   ========================================================================== */

#athena5CardPopup.theme-blue{
  --popup-accent:#2878d4;
  --popup-soft:#eaf4ff;
}

#athena5CardPopup.theme-purple{
  --popup-accent:#765fd3;
  --popup-soft:#f3efff;
}

#athena5CardPopup.theme-green{
  --popup-accent:#3c9867;
  --popup-soft:#e9f8f0;
}

#athena5CardPopup.theme-cyan{
  --popup-accent:#269aae;
  --popup-soft:#e7f8fa;
}

#athena5CardPopup.theme-orange{
  --popup-accent:#d88634;
  --popup-soft:#fff1e3;
}

#athena5CardPopup.theme-rose{
  --popup-accent:#c96180;
  --popup-soft:#fff0f4;
}


/* ==========================================================================
   POPUP HEADER — COMPACT
   ========================================================================== */

#athena5CardPopup
.athena5-popup-head{
  flex:0 0 auto !important;

  gap:9px !important;

  padding:
    10px 12px 9px !important;

  border-bottom:
    1px solid
    var(--popup-accent) !important;

  background:
    linear-gradient(
      90deg,
      var(--popup-soft) 0%,
      #ffffff 88%
    ) !important;
}

#athena5CardPopup
.athena5-popup-icon{
  width:32px !important;
  height:32px !important;

  flex:
    0 0 32px !important;

  border:
    1px solid
    var(--popup-accent) !important;

  border-radius:
    8px !important;

  background:
    var(--popup-soft) !important;

  color:
    var(--popup-accent) !important;

  font-size:
    15px !important;
}

#athena5CardPopup
.athena5-popup-heading strong{
  font-size:
    13.5px !important;

  line-height:
    1.2 !important;
}

#athena5CardPopup
.athena5-popup-heading span{
  margin-top:
    1px !important;

  font-size:
    10px !important;

  line-height:
    1.2 !important;
}


/* ==========================================================================
   POPUP BODY — SCROLLS, NOT WHOLE WINDOW
   ========================================================================== */

#athena5CardPopup
.athena5-popup-body{
  min-height:0 !important;

  flex:
    1 1 auto !important;

  overflow-y:auto !important;

  overscroll-behavior:
    contain !important;

  padding:
    10px 12px 11px !important;
}

#athena5CardPopup
.athena5-popup-summary{
  margin:
    0 0 8px !important;

  font-size:
    10.8px !important;

  line-height:
    1.42 !important;
}

#athena5CardPopup
.athena5-popup-section{
  margin-top:
    8px !important;
}

#athena5CardPopup
.athena5-popup-label{
  margin-bottom:
    4px !important;

  color:
    var(--popup-accent) !important;

  font-size:
    9.5px !important;
}

#athena5CardPopup
.athena5-popup-list li{
  margin:
    3px 0 !important;

  padding-left:
    12px !important;

  font-size:
    10px !important;

  line-height:
    1.35 !important;
}

#athena5CardPopup
.athena5-popup-list li::before{
  background:
    var(--popup-accent) !important;
}


/* scrollbar */

#athena5CardPopup
.athena5-popup-body::-webkit-scrollbar{
  width:5px;
}

#athena5CardPopup
.athena5-popup-body::-webkit-scrollbar-thumb{
  border-radius:99px;

  background:
    var(--popup-accent);
}


/* ==========================================================================
   POPUP FOOTER
   ========================================================================== */

#athena5CardPopup
.athena5-popup-footer{
  min-height:36px;

  flex:
    0 0 auto !important;

  padding:
    7px 12px 8px !important;

  border-top:
    1px solid
    #e3ebf2 !important;

  background:#fff !important;
}

#athena5CardPopup
.athena5-popup-footer span{
  font-size:
    9px !important;
}

#athena5CardPopup
.athena5-popup-open{
  color:
    var(--popup-accent) !important;

  font-size:
    10px !important;
}


/* ==========================================================================
   POINTER — ALIGNED TO ACTUAL CARD
   ========================================================================== */

#athena5CardPopup::before{
  content:"";

  position:absolute;

  top:-7px;

  left:
    var(--popup-arrow-x) !important;

  width:12px;
  height:12px;

  border-left:
    2px solid
    var(--popup-accent) !important;

  border-top:
    2px solid
    var(--popup-accent) !important;

  background:
    var(--popup-soft) !important;

  transform:
    rotate(45deg);

  z-index:2;
}

#athena5CardPopup.is-above::before{
  top:auto !important;

  bottom:-7px !important;

  border-left:
    0 !important;

  border-top:
    0 !important;

  border-right:
    2px solid
    var(--popup-accent) !important;

  border-bottom:
    2px solid
    var(--popup-accent) !important;

  transform:
    rotate(45deg);
}


/* ==========================================================================
   ECOSYSTEM — 4 × 2 AT NORMAL DESKTOP WIDTH
   ========================================================================== */

.athena5-ecosystem-grid{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;

  gap:
    9px !important;
}

.athena5-ecosystem-card{
  min-height:
    108px !important;

  padding:
    10px 12px !important;
}

.athena5-ecosystem-card strong{
  font-size:
    13px !important;
}

.athena5-ecosystem-card p{
  font-size:
    10.5px !important;

  line-height:
    1.34 !important;
}


/* ==========================================================================
   BOTTOM INFORMATION BAND
   ========================================================================== */

.athena5-bottom{
  min-height:
    116px !important;

  margin-top:
    10px !important;

  border-top:
    1px solid
    #dce6ef !important;

  border-bottom:
    1px solid
    #dce6ef !important;
}

.athena5-bottom-block{
  padding:
    16px 22px 15px !important;

  border-right:
    1px solid
    #d7e2ed !important;
}

.athena5-bottom-block:last-child{
  border-right:
    0 !important;
}

.athena5-bottom-title{
  margin-bottom:
    9px !important;

  font-size:
    13.5px !important;
}

.athena5-impact-list{
  gap:
    6px 18px !important;
}

.athena5-impact-item{
  font-size:
    10.5px !important;
}

.athena5-journey{
  margin-top:
    17px !important;
}

.athena5-trust-row{
  gap:
    9px 17px !important;
}


/* ==========================================================================
   FOOTER BREATHING ROOM
   ========================================================================== */

.athena5-footer{
  min-height:
    46px !important;

  padding-top:
    10px !important;

  padding-bottom:
    10px !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(min-width:1900px){

  .athena5-ecosystem-grid{
    grid-template-columns:
      repeat(
        8,
        minmax(0,1fr)
      ) !important;
  }

}

@media(max-width:1100px){

  .athena5-ecosystem-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }

}

@media(max-width:700px){

  .athena5-ecosystem-grid{
    grid-template-columns:
      1fr !important;
  }

  .athena5-bottom{
    grid-template-columns:
      1fr !important;
  }

  .athena5-bottom-block{
    border-right:
      0 !important;

    border-bottom:
      1px solid
      #d7e2ed !important;
  }

  #athena5CardPopup{
    position:fixed !important;

    left:12px !important;
    right:12px !important;

    top:auto !important;
    bottom:12px !important;

    width:auto !important;

    max-height:
      min(
        70vh,
        calc(100vh - 24px)
      ) !important;
  }

  #athena5CardPopup::before{
    display:none !important;
  }

}