/* Global Variables */
:root {
  --ens-brand-color: #F37120;
  --ens-text-color: #1c2a33;
  --ens-background-color: #FFF;
}

/* Typography */
.ensButtons button,
#ensBannerDescription p,
#ensNotifyBanner .ensToggleLabel {
  font-size: 14px; 
}
#ensBannerDescription p { 
  line-height: 1.5;
}
#ensStatusMessage,
#ensBannerDescription span {
  font-size: 13px; 
}
#ensStatusMessage {
  font-style: italic; 
}

/* Accessibility - Screen Reader Only */ 
.sr-only { position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; 
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Content */
#ensNotifyBanner {
  display: none;
}
#ensTitle,
#ensBannerDescription p {
  color: var(--ens-text-color);
}
#ensTitle { margin: 0; }

#ensBannerDescription p { margin: 0 0 0.5rem 0;}
#ensBannerDescription p:last-child {
  margin-bottom: 0;
}

/* Status text styling - Consolidated */
#ensStatusMessage,
#ensNotifyBanner #ensStatusMessage a,
#ensNotifyBanner #ensStatusMessage a:visited {
  color: var(--ens-brand-color);
}
#ensStatusMessage {
  margin-top: 0.25rem;
}

#ensNotifyBanner #ensStatusMessage a,
#ensNotifyBanner #ensStatusMessage a:visited {
    color: var(--ens-brand-color);
    text-decoration: underline;
    cursor: pointer;
}

/* Container for toggle and label */
#ensNotifyBanner #ensBannerDescription {
  margin: 0.75rem 0 1rem;
}
#ensNotifyBanner .ensToggleRow { display: grid;
  grid-template-columns: 1fr max-content; align-items: center;
  grid-gap: .75rem;
}

#ensNotifyBanner .ensToggleLabel { display: flex;
  align-items: center; gap: 0.75rem;
  color: var(--ens-text-color);
  cursor: pointer;
}

/* Toggle Switch Styling */
#ensNotifyBanner .card { position: relative;
  width: 2.75rem; height: 1.5rem;
}

#ensNotifyBanner .switch { position: absolute;
  top: 0;  display: block;
  width: 2.75rem; height: 1.5rem;
  background: #ccc; border-radius: 0.75rem;
  transition: 0.3s;
}

#ensNotifyBanner .toggle { position: absolute;
  top: 0.1875rem; left: 0.1875rem;
  width: 1.125rem; height: 1.125rem;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
  transition: 0.3s;
}

#ensNotifyBanner input[type="checkbox"]:checked ~ .switch {
  background: var(--ens-brand-color);
}

#ensNotifyBanner input[type="checkbox"]:checked ~ .toggle {
  left: 1.4375rem;
}

/* Button Styling */
#ensNotifyBanner .ensButtons { 
  display: flex; justify-content: flex-end;
  width: max-content;
}

#ensNotifyBanner .ensButtons button { width: 100%;
  background-color: #fff; color: var(--ens-text-color);
  border: 1px solid var(--ens-brand-color); border-radius: 0.25rem;
  cursor: pointer;
}

/* Responsive Design */
@media (max-width: 600px) {
  #ensNotifyBanner .ensToggleRow { display: grid;
    grid-template-columns: 1fr; 
  }
}

/* 
 * Inline Styles Override 
*/
section #ensNotifyBanner {
  padding: 1rem!important;
}
section #ensNotifyBanner .ensTitle {
  font-size: 1.2rem!important; 
  margin-bottom: 0!important;
}
section #ensNotifyBanner .ensButtons { 
  justify-self: center;
  margin: 0!important; padding: 0!important;
}
@media (max-width: 600px) {
  section #ensNotifyBanner {
    font-size: unset!important; 
    padding: unset!important; 
    line-height: unset; 
  }
}

#ensNotifyBanner input[type="checkbox"] {
  display: none;
}