/* Klaro — Executive Fitness brand theming
   Loaded AFTER assets/klaro/klaro.css so overrides win the cascade. */

.klaro {
  --ef-navy-deep: #11385F;
  --ef-ocean-blue: #12486B;
  --ef-teal: #15869C;
  --ef-cyan: #26ABB9;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Notice — centered card pinned to the bottom, NOT full-width */
.klaro .cookie-notice {
  background: #11385F !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.45) !important;

  /* Pin to bottom-center, fixed width, not full-width */
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: 640px !important;
  padding: 20px 22px !important;
  z-index: 9999;
}
.klaro .cookie-notice p,
.klaro .cookie-notice strong { color: #fff !important; }
.klaro .cookie-notice a { color: #3FB4C1 !important; text-decoration: underline; }

/* Preferences modal */
.klaro .cookie-modal .cm-bg { background: rgba(11, 26, 43, 0.55) !important; }
.klaro .cookie-modal .cm-modal {
  background: #fff !important;
  color: #11385F !important;
  border-radius: 10px !important;
  box-shadow: 0 40px 80px -30px rgba(11, 26, 43, 0.45) !important;
}
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2,
.klaro .cookie-modal .cm-header .title {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  color: #11385F !important;
}
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal li {
  color: #11385F !important;
}
.klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal .cm-service {
  border-bottom: 1px solid rgba(17, 56, 95, 0.1) !important;
}
.klaro .cookie-modal .cm-purpose .cm-purpose-title,
.klaro .cookie-modal .cm-service .cm-service-title {
  color: #11385F !important;
  font-weight: 600 !important;
}

/* Buttons — pill style, EF cyan accept */
.klaro .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn {
  border-radius: 999px !important;
  font-family: "Outfit", "DM Sans", system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  padding: 10px 22px !important;
  border: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}
.klaro .cm-btn:hover { transform: translateY(-1px); }

.klaro .cm-btn-success,
.klaro .cm-btn-accept,
.klaro .cm-btn-accept-all,
.klaro .cookie-notice .cm-btn-success,
.klaro .cookie-modal .cm-btn-success {
  background: #147E93 !important;
  color: #fff !important;
}
.klaro .cm-btn-success:hover,
.klaro .cm-btn-accept:hover,
.klaro .cm-btn-accept-all:hover {
  background: #0F6474 !important;
}

.klaro .cm-btn-info,
.klaro .cm-btn-success-var,
.klaro .cookie-modal .cm-btn-info {
  background: rgba(17, 56, 95, 0.08) !important;
  color: #11385F !important;
}
.klaro .cm-btn-info:hover,
.klaro .cm-btn-success-var:hover {
  background: rgba(17, 56, 95, 0.14) !important;
}

.klaro .cm-btn-decline,
.klaro .cookie-notice .cm-btn-decline,
.klaro .cookie-modal .cm-btn-decline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
}
.klaro .cookie-modal .cm-btn-decline {
  border-color: rgba(17, 56, 95, 0.3) !important;
  color: #11385F !important;
}
.klaro .cm-btn-decline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.klaro .cookie-modal .cm-btn-decline:hover {
  background: rgba(17, 56, 95, 0.06) !important;
}

/* Toggle switches — cyan when on */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: #147E93 !important;
}
.klaro .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 0 0 3px rgba(38, 171, 185, 0.25) !important;
}

/* Links inside modal */
.klaro .cookie-modal a,
.klaro .cm-link,
.klaro .cm-modal a {
  color: #147E93 !important;
}
.klaro .cookie-modal a:hover { color: #0F6474 !important; }

/* Powered-by line — subtle */
.klaro .cm-powered-by {
  font-size: 11px !important;
  opacity: 0.55 !important;
}

/* Contrast (2026-08-02): Klaro's default notice decline button is #777777,
   which gives white text 4.47:1 — just under AA. Darkened to #5A5A5A (6.90:1). */
.klaro .cookie-notice .cm-btn-danger,
.klaro .cookie-notice .cn-decline,
.klaro .cm-btn-danger {
  background: #5A5A5A !important;
  color: #fff !important;
}