/* ---- Revised CSS for .cookie-notice ---- */

/* Main banner container - Full-width, docked, specific background/text color */
.reddot .cookie-notice, /* Increased specificity */
.cookie-notice {
  /* Fallback */
  background-color: rgba(
    123,
    123,
    129,
    0.5
  ) !important; /* MODIFIED: 50% Transparent background */
  color: #ffffff !important; /* Default text color for banner (remains opaque) */
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 2147483645 !important;
  padding: 15px 20px !important; /* Inner padding for overall banner */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
  box-sizing: border-box !important;
  font-family: Arial, Helvetica, sans-serif !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important; /* Remove any borders */
}

/* Basic resets for buttons and links within the notice */
.reddot .cookie-notice button,
.reddot .cookie-notice a,
.cookie-notice button,
.cookie-notice a {
  font-family: inherit;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  line-height: normal;
  box-sizing: border-box;
}

.reddot .cookie-notice:focus,
.cookie-notice:focus {
  outline: 2px solid #000000 !important;
  outline-offset: -2px !important;
}

/* Content body: flex layout for text and buttons */
.reddot .cookie-notice .cn-body,
.cookie-notice .cn-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  margin-left: 0 !important;
}

/* Text container (<p>) */
.reddot .cookie-notice .cn-body > p,
.cookie-notice .cn-body > p {
  flex: 1 1 60%;
  margin: 0;
  padding-right: 25px;
  box-sizing: border-box;
  color: #ffffff !important;
  font-size: 0.88em !important;
  line-height: 1.5 !important;
}

/* Ensure nested spans and strong tags are styled correctly */
.reddot .cookie-notice .cn-body p span,
.reddot .cookie-notice .cn-body p span span,
.reddot .cookie-notice .cn-body p strong,
.cookie-notice .cn-body p span,
.cookie-notice .cn-body p span span,
.cookie-notice .cn-body p strong {
  color: #ffffff !important;
  font-size: inherit !important;
  background-color: transparent !important; /* Important to keep text background transparent */
  font-weight: bold;
}
.reddot .cookie-notice .cn-body p span span, /* For non-strong spans */
.cookie-notice .cn-body p span span {
  font-weight: normal;
}

/* Links within the main text (if any) */
.reddot .cookie-notice .cn-body p a,
.cookie-notice .cn-body p a {
  color: #60e2ff !important;
  text-decoration: underline !important;
  font-weight: bold !important;
  background-color: transparent !important; /* Ensure link background is also transparent */
}
.reddot .cookie-notice .cn-body p a:hover,
.cookie-notice .cn-body p a:hover {
  text-decoration: none !important;
}
.reddot .cookie-notice .cn-body p a:focus,
.cookie-notice .cn-body p a:focus {
  outline: 2px solid #000000 !important;
  outline-offset: 1px !important;
}

/* Button container (.cn-ok) */
.reddot .cookie-notice .cn-body .cn-ok,
.cookie-notice .cn-body .cn-ok {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* "Let me choose" button */
.reddot .cookie-notice .cn-ok .cm-link.cn-learn-more,
.cookie-notice .cn-ok .cm-link.cn-learn-more {
  background-color: #ffffff !important; /* Button background remains opaque */
  color: #247cb3 !important;
  border: 1px solid #247cb3 !important;
  padding: 10px 18px !important;
  text-decoration: none !important;
  border-radius: 3px !important;
  margin-right: 10px !important;
  font-size: 0.813em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-block !important;
  order: 1;
}

/* Container for the actual buttons ("I decline", "That's ok") */
.reddot .cookie-notice .cn-ok .cn-buttons,
.cookie-notice .cn-ok .cn-buttons {
  display: flex;
  align-items: center;
  order: 2;
}

/* Hide "I decline" */
.reddot .cookie-notice .cn-ok .cn-buttons .cn-decline,
.cookie-notice .cn-ok .cn-buttons .cn-decline {
  display: none !important;
}

/* "That's ok" button */
.reddot .cookie-notice .cn-ok .cn-buttons .cm-btn-success,
.cookie-notice .cn-ok .cn-buttons .cm-btn-success {
  background-color: #247cb3 !important; /* Button background remains opaque */
  color: #ffffff !important;
  border: 1px solid #247cb3 !important;
  padding: 10px 18px !important;
  border-radius: 3px !important;
  font-size: 0.813em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Hover and Focus for buttons */
.reddot .cookie-notice .cn-ok .cm-link.cn-learn-more:hover,
.reddot .cookie-notice .cn-ok .cn-buttons .cm-btn-success:hover,
.cookie-notice .cn-ok .cm-link.cn-learn-more:hover,
.cookie-notice .cn-ok .cn-buttons .cm-btn-success:hover {
  opacity: 0.85 !important;
}

.reddot .cookie-notice .cn-ok .cm-link.cn-learn-more:focus,
.reddot .cookie-notice .cn-ok .cn-buttons .cm-btn-success:focus,
.cookie-notice .cn-ok .cm-link.cn-learn-more:focus,
.cookie-notice .cn-ok .cn-buttons .cm-btn-success:focus {
  outline: 2px solid #000000 !important;
  outline-offset: 1px !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .reddot .cookie-notice .cn-body,
  .cookie-notice .cn-body {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .reddot .cookie-notice .cn-body > p,
  .cookie-notice .cn-body > p {
    flex-basis: auto !important;
    width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 15px !important;
    text-align: left !important;
  }
  .reddot .cookie-notice .cn-body .cn-ok,
  .cookie-notice .cn-body .cn-ok {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .reddot .cookie-notice .cn-ok .cm-link.cn-learn-more,
  .cookie-notice .cn-ok .cm-link.cn-learn-more {
    margin-right: 0 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  .reddot .cookie-notice .cn-ok .cn-buttons,
  .cookie-notice .cn-ok .cn-buttons {
    justify-content: stretch !important;
    width: 100% !important;
  }
  .reddot .cookie-notice .cn-ok .cn-buttons .cm-btn-success,
  .cookie-notice .cn-ok .cn-buttons .cm-btn-success {
    flex-grow: 1 !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .reddot .cookie-notice,
  .cookie-notice {
    padding: 15px 15px !important;
  }
  .reddot .cookie-notice .cn-body > p,
  .cookie-notice .cn-body > p {
    font-size: 0.8em !important;
  }
  .reddot .cookie-notice .cn-ok .cm-link.cn-learn-more,
  .reddot .cookie-notice .cn-ok .cn-buttons .cm-btn-success,
  .cookie-notice .cn-ok .cm-link.cn-learn-more,
  .cookie-notice .cn-ok .cn-buttons .cm-btn-success {
    padding: 10px 15px !important;
    font-size: 0.78em !important;
  }
}
/* ---- End of Revised CSS ---- */

/* ---- CSS for "Let Me Choose" Details Modal (.cm-modal) ---- */

/* Ensure font inheritance for the entire component */
.reddot .cookie-modal, /* Catch-all for elements if .reddot is a parent */
.reddot .cookie-modal .cm-modal.cm-reddot,
.cm-modal.cm-reddot {
  font-family: inherit !important;
}

/* Main Modal Container (.cm-modal.cm-reddot) */
.reddot .cookie-modal .cm-modal.cm-reddot, /* Increased specificity */
.cm-modal.cm-reddot {
  /* MODIFIED: Positioning to dock on the left */
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100vh !important; /* Full viewport height */
  width: 480px !important; /* Target width (like onetrust-pc-sdk) */
  max-width: 480px !important; /* Ensure it doesn't exceed this */
  transform: none !important; /* Override previous transform: translateY(-50%) */
  margin: 0 !important;

  background-color: #ffffff !important; /* MODIFIED: White background */
  color: #333333 !important; /* MODIFIED: Default dark text color */
  border-radius: 0 !important; /* No rounded corners for a side panel */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important; /* Shadow on the right */
  overflow-x: hidden !important;
  overflow-y: auto !important; /* Allow vertical scrolling for content */
  z-index: 1001 !important; /* Ensure it's above the overlay if any */
  font-family: inherit !important;
}

/* Optional: Background overlay for the modal */
.reddot .cookie-modal .cm-bg {
  background: rgba(0, 0, 0, 0.3) !important; /* Slightly less dark overlay */
  z-index: 1000 !important;
}

/* Modal Header (.cm-header) */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-header,
.cm-modal.cm-reddot .cm-header {
  background-color: #ffffff !important; /* Ensure header matches modal bg */
  padding: 20px 25px !important;
  border-bottom: 1px solid #e9e9e9 !important; /* Light border like target */
  color: #333333 !important; /* Dark text for header elements */
}

.reddot .cookie-modal .cm-modal.cm-reddot .cm-header h1.title,
.cm-modal.cm-reddot .cm-header h1.title {
  font-size: 1.25em !important; /* Target: #ot-pc-title font-size:1.125em */
  color: #333333 !important;
  margin: 0 0 10px 0 !important;
  padding-right: 30px; /* Space for close button */
  font-weight: 600 !important;
  font-family: inherit !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-header h1.title span span,
.cm-modal.cm-reddot .cm-header h1.title span span {
  color: inherit !important;
  font-family: inherit !important;
}

.reddot .cookie-modal .cm-modal.cm-reddot .cm-header p,
.cm-modal.cm-reddot .cm-header p {
  font-size: 0.875em !important; /* Target: #ot-pc-desc font-size:.813em */
  color: #555555 !important; /* Slightly lighter dark for description */
  margin: 0 !important;
  line-height: 1.5 !important;
  font-family: inherit !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-header p span span,
.cm-modal.cm-reddot .cm-header p span span {
  color: inherit !important;
  font-family: inherit !important;
}

/* Close button in header */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-header .hide,
.cm-modal.cm-reddot .cm-header .hide {
  top: 15px !important;
  right: 15px !important;
  background: transparent !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-header .hide svg,
.cm-modal.cm-reddot .cm-header .hide svg {
  stroke: #565656 !important; /* Dark stroke for 'X' */
  width: 12px !important;
  height: 12px !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-header .hide svg line,
.cm-modal.cm-reddot .cm-header .hide svg line {
  stroke-width: 2px !important; /* Make X slightly thicker */
}

/* Modal Body (.cm-body) */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body,
.cm-modal.cm-reddot .cm-body {
  padding: 20px 25px !important; /* Consistent padding */
  background-color: #ffffff !important;
  font-family: inherit !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body ul,
.cm-modal.cm-reddot .cm-body ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: inherit !important;
}

/* Styling for each purpose/category item (.cm-purpose) */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body li.cm-purpose,
.cm-modal.cm-reddot .cm-body li.cm-purpose {
  border: 1px solid #d8d8d8 !important; /* Border like target accordion items */
  border-radius: 3px !important;
  margin-bottom: 15px !important;
  padding: 0 !important; /* Padding will be on inner elements */
  background-color: #ffffff !important;
  font-family: inherit !important;
  color: #333333 !important;
}
/* Last item no bottom margin */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body li.cm-purpose:last-child,
.cm-modal.cm-reddot .cm-body li.cm-purpose:last-child {
  margin-bottom: 0 !important;
}

/* Label area within each purpose (contains title, required text, switch) */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-label,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 15px !important;
  cursor: pointer !important;
  position: relative !important; /* For absolute positioning of input */
  font-family: inherit !important;
  color: #333333 !important;
}

/* Hide the actual checkbox input, the label and switch handle interaction */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-input,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  left: -9999px !important; /* Move off-screen */
}

/* Title of the purpose */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-label
  .cm-list-title,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-label .cm-list-title {
  font-weight: 600 !important;
  font-size: 0.95em !important; /* Target: .ot-cat-header font-size:.88em */
  color: #2e3644 !important; /* Dark grey like target */
  margin-right: auto; /* Push switch to the right */
  padding-right: 10px; /* Space before (always required) or switch */
  font-family: inherit !important;
}

/* "(always required)" text */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-label
  .cm-required,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-label .cm-required {
  font-size: 0.8em !important;
  color: #3860be !important; /* Blue color like target's "Always Active" */
  font-weight: 600 !important;
  margin-left: 5px !important; /* Space after title */
  padding-right: 15px; /* Space before switch if switch is also visible */
  white-space: nowrap;
  font-family: inherit !important;
}

/* Hide switch for "always required" items */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  input.cm-list-input.required
  + .cm-list-label
  .cm-switch,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  input.cm-list-input.required
  + .cm-list-label
  .cm-switch {
  display: none !important;
}
/* Ensure "(always required)" shows clearly if switch is hidden */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  input.cm-list-input.required
  + .cm-list-label
  .cm-required,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  input.cm-list-input.required
  + .cm-list-label
  .cm-required {
  margin-left: auto; /* Push to the right if switch is hidden */
  padding-right: 0;
}

/* Description text for each purpose */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-description,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-description {
  font-size: 0.85em !important; /* Target: .ot-acc-grpdesc font-size:.813em */
  color: #555555 !important;
  padding: 0 15px 15px 15px !important; /* Padding below label, inside border */
  line-height: 1.5 !important;
  border-top: 1px solid #e9e9e9 !important; /* Separator if description is present */
  margin-top: -1px; /* Overlap with label's bottom padding visually if label no border */
  font-family: inherit !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-description
  p,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-description p {
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-description
  p:last-child,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-description p:last-child {
  margin-bottom: 0 !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-description
  span
  span,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-list-description span span {
  color: inherit !important;
  font-family: inherit !important;
}

/* Services expander (.cm-services .cm-caret) */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-caret,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-services .cm-caret {
  padding: 10px 15px !important;
  font-size: 0.85em !important;
  border-top: 1px solid #e9e9e9 !important;
  background-color: #f8f8f8 !important; /* Slightly different background for this section */
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-caret
  a,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-services .cm-caret a {
  color: #007bff !important; /* Blue link color */
  text-decoration: none !important;
  font-weight: 500 !important;
  font-family: inherit !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body li.cm-purpose .cm-services .cm-caret a span, /* Arrow */
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-services .cm-caret a span {
  margin-right: 5px !important;
  display: inline-block;
  transition: transform 0.2s ease;
  font-family: inherit !important; /* Should ideally be an SVG icon */
}
/* Rotate arrow when .cm-content is expanded (requires JS to add a class like .expanded-caret) */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-caret.expanded-caret
  a
  span,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-caret.expanded-caret
  a
  span {
  transform: rotate(180deg);
}

/* Services list content (.cm-services .cm-content) */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content,
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-services .cm-content {
  background-color: #f8f8f8 !important;
  padding: 0px 15px 15px 15px !important; /* Padding below caret line */
  /* display: none; JS will toggle this */
  font-family: inherit !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body li.cm-purpose .cm-services .cm-content.expanded, /* If JS adds .expanded class */
.cm-modal.cm-reddot .cm-body li.cm-purpose .cm-services .cm-content.expanded {
  display: block !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service {
  padding: 10px 0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  font-family: inherit !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service:last-child,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service:last-child {
  border-bottom: none !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service
  .cm-list-label,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service
  .cm-list-label {
  padding: 0 !important; /* Override outer label padding */
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service
  .cm-list-description
  p,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service
  .cm-list-description
  p {
  font-size: 0.8em !important;
  padding-top: 5px !important;
  border-top: none !important;
  margin-top: 0 !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service
  .purposes,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-services
  .cm-content
  li.cm-service
  .purposes {
  color: #777 !important;
  font-style: italic;
  font-size: 0.75em !important;
}

/* Toggle Switch Styling (.cm-switch > .slider) - to match OneTrust style */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-body .cm-list-label .cm-switch,
.cm-modal.cm-reddot .cm-body .cm-list-label .cm-switch {
  position: relative !important; /* Was absolute */
  display: inline-block !important;
  width: 45px !important; /* Target: .ot-switch width:45px */
  height: 25px !important; /* Target: .ot-switch height:25px */
  margin-left: 10px !important; /* Space from title/required text */
  vertical-align: middle;
  flex-shrink: 0; /* Prevent switch from shrinking */
}

.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  .cm-list-label
  .cm-switch
  .slider,
.cm-modal.cm-reddot .cm-body .cm-list-label .cm-switch .slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #f2f1f1 !important; /* Target: .ot-switch-nob background-color:#f2f1f1 (unchecked) */
  border: 1px solid #ddd !important; /* Target: border:1px solid #ddd */
  transition: 0.2s ease-in !important;
  border-radius: 20px !important; /* Target: border-radius:20px */
  box-shadow: none !important; /* Remove existing shadow */
  width: auto !important; /* Slider itself should fill the .cm-switch */
  height: auto !important;
}

.reddot .cookie-modal .cm-modal.cm-reddot .cm-body .cm-list-label .cm-switch .slider::before, /* The nob */
.cm-modal.cm-reddot .cm-body .cm-list-label .cm-switch .slider::before {
  position: absolute !important;
  content: "" !important;
  height: 21px !important; /* Target: .ot-switch-nob:before height:21px */
  width: 21px !important; /* Target: .ot-switch-nob:before width:21px */
  left: 1px !important; /* Adjusted for border */
  bottom: 1px !important; /* Adjusted for border */
  background-color: #7d7d7d !important; /* Target: .ot-switch-nob:before background-color:#7d7d7d (unchecked nob) */
  transition: 0.2s ease-in !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* Checked state for the switch */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-input:checked
  + .cm-list-label
  .cm-switch
  .slider,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-input:checked
  + .cm-list-label
  .cm-switch
  .slider {
  background-color: #d5e9ff !important; /* Target: input:checked+.ot-switch .ot-switch-nob (slider bg) */
  border-color: #3860be !important;
  opacity: 1 !important;
}

.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-input:checked
  + .cm-list-label
  .cm-switch
  .slider::before,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-input:checked
  + .cm-list-label
  .cm-switch
  .slider::before {
  background-color: #3860be !important; /* Target: input:checked+.ot-switch .ot-switch-nob:before (nob color) */
  transform: translateX(
    19px
  ) !important; /* Target: translateX(21px), adjust for 45px width vs 21px nob */
  /* (45px width - 2*border(1px) - nob_width(21px) - initial_left(1px) = 45 - 2 - 21 - 1 = 21px. Let's try 19px for visual fit) */
}

/* Half-checked state (visual only, actual state is still 'checked' for the input) */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .cm-switch
  .slider,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .cm-switch
  .slider {
  background-color: #d5e9ff !important; /* Same checked bg */
  border-color: #3860be !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .cm-switch
  .slider::before,
.cm-modal.cm-reddot
  .cm-body
  li.cm-purpose
  .cm-list-input.half-checked:checked
  + .cm-list-label
  .cm-switch
  .slider::before {
  background-color: #3860be !important; /* Nob color */
  transform: translateX(9px) !important; /* Mid-way point for half-checked */
  /* This creates a line-like appearance if nob is rectangular or make it a dash */
  width: 10px !important; /* Make it look like a dash for half-checked */
  left: 5px !important;
  border-radius: 2px !important; /* Make it more dash-like */
}

/* "Enable or disable all services" item */
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-body
  li.cm-purpose.cm-toggle-all
  .cm-list-label,
.cm-modal.cm-reddot .cm-body li.cm-purpose.cm-toggle-all .cm-list-label {
  background-color: #f8f8f8 !important; /* Slightly different background */
  border-top: 1px solid #d8d8d8 !important; /* Separator from list */
}

/* Modal Footer (.cm-footer) */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer,
.cm-modal.cm-reddot .cm-footer {
  padding: 20px 25px !important;
  border-top: 1px solid #d8d8d8 !important; /* Target: .ot-pc-footer border-top */
  background-color: #f8f8f8 !important; /* Slightly different footer background */
  font-family: inherit !important;
}

.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-footer-buttons,
.cm-modal.cm-reddot .cm-footer .cm-footer-buttons {
  display: flex !important;
  justify-content: flex-start !important; /* Align buttons to the left of the footer */
  flex-wrap: wrap; /* Allow buttons to wrap */
  gap: 10px; /* Space between buttons */
  font-family: inherit !important;
}

/* Styling for footer buttons */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-btn,
.cm-modal.cm-reddot .cm-footer .cm-btn {
  padding: 10px 20px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  font-family: inherit !important;
  margin: 0 !important; /* remove original margins */
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out,
    border-color 0.15s ease-in-out !important;
}

/* "I decline" button (secondary/ghost) */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-btn.cn-decline,
.cm-modal.cm-reddot .cm-footer .cm-btn.cn-decline {
  background-color: transparent !important;
  color: #dc3545 !important; /* Red text for decline */
  border-color: #dc3545 !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-btn.cn-decline:hover,
.cm-modal.cm-reddot .cm-footer .cm-btn.cn-decline:hover {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}

/* "Accept selected" button (primary) */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-btn.cm-btn-info.cm-btn-accept, /* Targets "Accept selected" */
.cm-modal.cm-reddot .cm-footer .cm-btn.cm-btn-info.cm-btn-accept {
  background-color: #007bff !important; /* Blue for primary action */
  color: #ffffff !important;
  border-color: #007bff !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-footer
  .cm-btn.cm-btn-info.cm-btn-accept:hover,
.cm-modal.cm-reddot .cm-footer .cm-btn.cm-btn-info.cm-btn-accept:hover {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
}

/* "Accept all" button (secondary, but could also be primary if preferred) */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-btn.cm-btn-accept-all,
.cm-modal.cm-reddot .cm-footer .cm-btn.cm-btn-accept-all {
  background-color: #28a745 !important; /* Green for accept all */
  color: #ffffff !important;
  border-color: #28a745 !important;
}
.reddot
  .cookie-modal
  .cm-modal.cm-reddot
  .cm-footer
  .cm-btn.cm-btn-accept-all:hover,
.cm-modal.cm-reddot .cm-footer .cm-btn.cm-btn-accept-all:hover {
  background-color: #1e7e34 !important;
  border-color: #1e7e34 !important;
}

/* Powered by link */
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-powered-by,
.cm-modal.cm-reddot .cm-footer .cm-powered-by {
  font-size: 0.75em !important;
  color: #6c757d !important; /* Grey text */
  text-align: right !important; /* Align to the right if space allows, or new line */
  margin-top: 15px !important;
  width: 100%; /* Take full width to allow text-align right */
  font-family: inherit !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-powered-by a,
.cm-modal.cm-reddot .cm-footer .cm-powered-by a {
  color: #007bff !important; /* Link color */
  text-decoration: none !important;
  font-family: inherit !important;
}
.reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-powered-by a:hover,
.cm-modal.cm-reddot .cm-footer .cm-powered-by a:hover {
  text-decoration: underline !important;
}

/* Responsive adjustments for the modal content */
@media (max-width: 520px) {
  /* Breakpoint when modal width might be constrained by viewport */
  .reddot .cookie-modal .cm-modal.cm-reddot,
  .cm-modal.cm-reddot {
    width: 100vw !important; /* Full viewport width on small screens */
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .reddot .cookie-modal .cm-modal.cm-reddot .cm-header,
  .cm-modal.cm-reddot .cm-header,
  .reddot .cookie-modal .cm-modal.cm-reddot .cm-body,
  .cm-modal.cm-reddot .cm-body,
  .reddot .cookie-modal .cm-modal.cm-reddot .cm-footer,
  .cm-modal.cm-reddot .cm-footer {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .reddot .cookie-modal .cm-modal.cm-reddot .cm-footer,
  .cm-modal.cm-reddot .cm-footer {
    /* ... (previous padding, border-top, background styles) ... */
    padding: 20px 25px !important;
    border-top: 1px solid #d8d8d8 !important;
    background-color: #f8f8f8 !important; /* Footer background to cover scrolled content */
    font-family: inherit !important;

    position: sticky !important; /* ADDED for sticky footer */
    bottom: 0 !important; /* ADDED: Stick to the bottom */
    z-index: 100 !important; /* ADDED: Ensure it's above scrolling body content */
  }

  .reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-footer-buttons,
  .cm-modal.cm-reddot .cm-footer .cm-footer-buttons {
    flex-direction: column; /* Stack footer buttons */
    align-items: stretch; /* Make buttons full width */
  }
  .reddot
    .cookie-modal
    .cm-modal.cm-reddot
    .cm-footer
    .cm-footer-buttons
    .cm-btn,
  .cm-modal.cm-reddot .cm-footer .cm-footer-buttons .cm-btn {
    width: 100%;
    margin-bottom: 10px; /* Space between stacked buttons */
    text-align: center;
  }
  .reddot
    .cookie-modal
    .cm-modal.cm-reddot
    .cm-footer
    .cm-footer-buttons
    .cm-btn:last-child,
  .cm-modal.cm-reddot .cm-footer .cm-footer-buttons .cm-btn:last-child {
    margin-bottom: 0;
  }

  .reddot .cookie-modal .cm-modal.cm-reddot .cm-footer .cm-powered-by,
  .cm-modal.cm-reddot .cm-footer .cm-powered-by {
    text-align: center !important; /* Center powered-by on small screens */
  }
}

/* ---- End of CSS for Details Modal ---- */