/* =========================================
   1. BASE STYLES (Mobile & Default)
   These rules apply to ALL screens (Phones, Tablets)
   unless overridden by the sections below.
   ========================================= */

div.ensNotifyBanner {
  /* Logic: Ensures the banner is hidden by default so Ensighten can control its appearance */
  display: none;

  /* Positioning: Locks the banner to the bottom of the viewport so it follows the user */
  position: fixed !important;
  right: 0 !important;
  bottom: 2rem !important;
  left: 0 !important;
  margin: 0 auto !important;
  
  /* Layering: Ensures the banner sits on top of all other website elements */
  z-index: 2147483647 !important;

  /* Sizing: Uses 90% of the screen width on mobile devices */
  width: 90% !important; 
  padding: 15px !important;

  /* Theme: Sets the background to your specific BU color */
  background-color: #66BFC7 !important;
  border-radius: 3px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; /* Adds a drop shadow for depth */
  
  /* Text Styles: Sets main text color and maintains visibility when triggered */
  opacity: 1; /* Removed !important to allow Ensighten to hide/fade the banner */
  color: #123257 !important;
  font-variation-settings: "wght" 500, "wdth" 90;
  line-height: 1 !important;
}

/* Links (Privacy Policy) */
div.ensNotifyBanner a {
  color: var(--brand-color-highlight, #E8F557) !important;
  text-decoration: underline !important;
  font-weight: bold !important;
}

/* Text Description Area */
div#ensBannerDescription {
  overflow-y: scroll;
  line-height: 1.4;
  height: 90px;
  margin-bottom: 15px; /* Adds space between the text and the buttons */
}

/* Button Wrapper */
.ensNotifyBanner .ensButtons {
  width: 100% !important;
  clear: both !important;
  margin-top: 10px !important;
  text-align: right !important; /* Aligns the buttons to the right side */
}

/* BUTTON STYLING (Targets all button variations) */
.ensNotifyBanner .ensButtons button,
.ensNotifyBanner .ensButtons .button,
.ensNotifyBanner .ensButtons .button.blue,
.ensNotifyBanner .ensButtons .button.raised {
  background: var(--brand-color-highlight, #E8F557) !important;
  color: var(--brand-color-dark, #123257) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px 24px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  font-variation-settings: "wght" 400, "wdth" 100;
  letter-spacing: 0.02em;
  display: inline-block !important;
  margin-left: 10px !important;
}

/* Button Hover Interaction */
.ensNotifyBanner .ensButtons button:hover,
.ensNotifyBanner .ensButtons .button:hover {
  opacity: 0.8 !important;
  color: var(--brand-color-dark, #123257) !important;
}


/* =========================================
   2. TABLET ADJUSTMENTS (Screens wider than 768px)
   ========================================= */
@media only screen and (min-width: 768px) {
  div.ensNotifyBanner {
    width: 70% !important;
    padding: 24px !important;
  }

  div#ensBannerDescription {
    height: auto !important; 
    overflow-y: visible !important;
  }
}


/* =========================================
   3. DESKTOP ADJUSTMENTS (Screens wider than 1024px)
   ========================================= */
@media only screen and (min-width: 1024px) {
  div.ensNotifyBanner {
    width: 60% !important;
  }

  div#ensBannerDescription {
    overflow-y: visible !important;
    height: auto !important;
    margin-bottom: 0px !important;
  }
}