/* ==========================================================================
   CookiesJSR Overrides
   Matches Lifetime Montessori brand colors with a quieter grey-led palette.
   ========================================================================== */

#cookiesjsr {
  --default-margin: 1rem;
  --banner-logo-offset: 80px;

  --banner-bg-color: #69797f;
  --banner-font-color: #fff;
  --link-list-font-color: #fff;
  --link-list-separator-color: rgba(255, 255, 255, 0.5);

  --btn-font-color: #fff;
  --btn-border-color: #69797f;
  --btn-bg-color: #69797f;
  --btn-prime-font-color: #fff;
  --btn-prime-border-color: #109bd2;
  --btn-prime-bg-color: #109bd2;
  --btn-inv-font-color: #3a5a6a;
  --btn-inv-border-color: #dce9ec;
  --btn-inv-bg-color: #fff;
  --btn-prime-inv-font-color: #fff;
  --btn-prime-inv-border-color: #109bd2;
  --btn-prime-inv-bg-color: #109bd2;

  --layer-header-bg-color: #f7fbf3;
  --layer-header-font-color: #3a5a6a;
  --layer-body-bg-color: #fff;
  --layer-tab-bg-color: #fff;
  --layer-tab-font-color: #3a5a6a;
  --layer-tab-active-bg-color: #eaf1f1;
  --layer-tab-active-font-color: #3a5a6a;
  --layer-bg-dark: #fff;
  --layer-font-light: #3a5a6a;
  --layer-font-dark: #3a5a6a;
  --layer-border-color: #dce9ec;
  --layer-footer-bg-color: #f7fbf3;
  --layer-footer-font-color: #3a5a6a;

  --switch-border-color: #c8d7db;
  --switch-handle-color: #fff;
  --switch-bg-off: #dce9ec;
  --switch-bg-on: #86b830;
  --switch-always-on-font-color: #86b830;
  --switch-always-on-bg-color: #f7fbf3;
}

#cookiesjsr,
#cookiesjsr .cookiesjsr--app {
  font-family: "Work Sans", sans-serif;
  color: #3a5a6a;
}

#cookiesjsr .cookiesjsr-banner {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 -10px 30px rgba(20, 45, 60, 0.18);
}

#cookiesjsr .cookiesjsr-banner--info {
  line-height: 1.65;
}

#cookiesjsr .cookiesjsr-banner--text {
  max-width: 68ch;
  font-size: 0.95rem;
}

#cookiesjsr .cookiesjsr-banner--links {
  font-size: 0.82rem;
}

#cookiesjsr .cookiesjsr-btn {
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none;
}

#cookiesjsr .cookiesjsr-btn:hover {
  transform: translateY(-1px);
}

#cookiesjsr .cookiesjsr-banner .cookiesjsr-btn.denyAll {
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
}

#cookiesjsr .cookiesjsr-banner .cookiesjsr-btn.allowAll,
#cookiesjsr .cookiesjsr-layer .cookiesjsr-btn.save {
  border-color: #109bd2;
  background: #109bd2;
  color: #fff;
}

#cookiesjsr .cookiesjsr-banner .cookiesjsr-btn.invert,
#cookiesjsr .cookiesjsr-layer .cookiesjsr-btn.invert {
  border-color: #dce9ec;
  background: #fff;
  color: #3a5a6a;
}

#cookiesjsr .cookiesjsr-layer {
  border: 1px solid #dce9ec;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(20, 45, 60, 0.2);
}

#cookiesjsr .cookiesjsr-layer--overlay {
  background: rgba(58, 90, 106, 0.44);
}

#cookiesjsr .cookiesjsr-layer--header,
#cookiesjsr .cookiesjsr-layer--footer {
  box-shadow: none;
}

#cookiesjsr .cookiesjsr-layer--title {
  color: #109bd2;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#cookiesjsr .cookiesjsr-service-group--tab {
  font-size: 0.95rem;
}

#cookiesjsr .cookiesjsr-service-group.active .cookiesjsr-service-group--tab {
  box-shadow: inset 4px 0 0 #109bd2;
}

#cookiesjsr .cookiesjsr-service-group.active .cookiesjsr-service-group--content {
  box-shadow: inset 1px 0 0 #dce9ec;
}

#cookiesjsr .cookiesjsr-service {
  border-top: 1px solid #eaf1f1;
}

#cookiesjsr .cookiesjsr-service:hover {
  background: #f7fbf3;
}

#cookiesjsr .cookiesjsr-service--description h3 {
  color: #3a5a6a;
  font-size: 1rem;
  font-weight: 600;
}

#cookiesjsr .cookiesjsr-service--links a {
  color: #109bd2;
}

#cookiesjsr .cookiesjsr-service--links a:hover {
  color: #0c7aa8;
}

#cookiesjsr .cookiesjsr-service--always-on {
  font-weight: 600;
}

#cookiesjsr .cookiesjsr-switch {
  box-shadow: inset 0 0 0 1px rgba(58, 90, 106, 0.08);
}

#cookiesjsr .cookiesjsr-switch:after {
  box-shadow: 0 1px 2px rgba(20, 45, 60, 0.18);
}

@media (max-width: 768px) {
  #cookiesjsr .cookiesjsr-banner {
    padding: 0.9rem;
  }

  #cookiesjsr .cookiesjsr-banner--info {
    padding: 0;
  }

  #cookiesjsr .cookiesjsr-banner--text {
    font-size: 0.9rem;
  }

  #cookiesjsr .cookiesjsr-layer {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-height: none;
    top: 10px;
    left: 10px;
    transform: none;
  }
}

@media (max-width: 576px) {
  #cookiesjsr .cookiesjsr-banner--action {
    gap: 0.5rem;
  }

  #cookiesjsr .cookiesjsr-btn {
    width: 100%;
    margin: 0;
    min-height: 44px;
  }

  #cookiesjsr .cookiesjsr-layer {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    border-radius: 0;
    border: 0;
  }

  #cookiesjsr .cookiesjsr-layer--header,
  #cookiesjsr .cookiesjsr-layer--footer {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}