/* Root Variables */
:root {
  --font-family: "__messinaSans_da5535", "__messinaSans_Fallback_da5535", Arial,
    sans-serif;

  /* Font Sizes */
  --font-size-body-small: 12px;
  --font-size-body: 14px;
  --font-size-title: 20px;
  --font-size-buttons: 14px;
  --button-padding: 8px 10px;
  --component-border-radius: 4px;
  --button-border-radius: 6px;

  /* Colors from Figma */
  --color-white: #ffffff;
  --color-gray-20: #e5e9f0;
  --color-gray-border: #d1d8e5;
  --color-text-secondary: #4f596e;
  --color-text-action: #041330;
  --color-text-disabled: #7a8499;
  --color-surface: #f7f9fc;
  --primary-color: #265cff;
}

/* General Styles */
#didomi-host {
  font-family: var(--font-family);
  display: block;
  width: 0;
  height: 0;
  font-size: var(--font-size-body);
  line-height: 1.3;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.28px;

  a:not(.didomi-no-link-style) {
    text-decoration: underline;
    color: var(--color-text-secondary) !important;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;

    &:hover {
      opacity: 0.7 !important;
    }
  }

  p {
    font-size: var(--font-size-body);
    line-height: 1.3;
    margin: 0;
    color: var(--color-text-secondary);
    letter-spacing: -0.28px;
  }

  .didomi-components-button {
    cursor: pointer;
    display: inline-block;
    height: auto;
    padding: var(--button-padding);
    font-size: var(--font-size-buttons);
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
    border-radius: var(--button-border-radius);
    transition: all 0.2s ease-in-out;
    border: none;
    text-decoration: none;

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    &:hover:not(:disabled) {
      opacity: 0.9;
    }

    span {
      background: transparent;
    }
  }

  /* Consent Notice Styles - Matching Figma Design Exactly */
  /* Using correct Didomi selectors: .didomi-notice-banner for banner notices */
  .didomi-notice-banner {
    background-color: var(--color-white) !important;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-gray-20) !important;
    border-radius: var(--component-border-radius) !important;
    font-size: var(--font-size-body);
    line-height: 1.3;
    box-sizing: border-box;
    letter-spacing: -0.28px;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    width: 100%;

    /* Override inline border colors */
    &[style*="border-color"] {
      border-color: var(--color-gray-20) !important;
    }

    .didomi-border {
      border: none !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;

      /* Override inline border colors */
      &[style*="border-color"] {
        border-color: transparent !important;
      }
    }

    /* Main content wrapper - matches Figma structure */
    > div,
    .didomi-regular-notice {
      display: flex !important;
      flex-direction: column !important;
      gap: 20px !important;
      padding: 20px 0 !important;
      width: 100%;
      box-sizing: border-box;
    }

    .didomi-notice-text {
      padding: 0 20px !important;
      font-size: 14px !important;
      line-height: 1.3 !important;
      color: var(--color-text-secondary) !important;
      letter-spacing: -0.28px !important;
      margin: 0 !important;

      p {
        font-size: 14px !important;
        line-height: 1.3 !important;
        color: var(--color-text-secondary) !important;
        margin: 0 0 7px 0 !important;
        letter-spacing: -0.28px !important;
      }

      p:last-child {
        margin-bottom: 0 !important;
      }

      ul {
        list-style: disc !important;
        margin: 0 0 7px 0 !important;
        padding-left: 21px !important;

        li {
          margin-bottom: 0 !important;
          line-height: 1.3 !important;
          color: var(--color-text-secondary) !important;
          letter-spacing: -0.28px !important;

          &:last-child {
            margin-bottom: 0 !important;
          }
        }
      }

      a {
        color: var(--color-text-secondary) !important;
        text-decoration: underline !important;
        text-decoration-skip-ink: none !important;
        text-underline-position: from-font !important;
      }

      /* View our partners link - inside text section */
      .didomi-notice-view-partners-link {
        display: inline-block !important;
        margin-top: 12px !important;
        font-size: var(--font-size-body-small) !important;
        color: var(--color-text-secondary) !important;
        text-decoration: underline !important;
        text-decoration-skip-ink: none !important;
        text-underline-position: from-font !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;

        &:hover {
          opacity: 0.7;
        }

        span {
          font-size: var(--font-size-body-small) !important;
          color: var(--color-text-secondary) !important;
        }
      }

      /* Data processing container */
    .didomi-notice-data-processing-container {
        margin-top: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid var(--color-gray-border) !important;

        p {
          margin: 0 !important;
          font-size: var(--font-size-body-small) !important;
          line-height: 1.2 !important;
          color: var(--color-text-secondary) !important;
          letter-spacing: -0.32px !important;
        }

      .didomi-notice-data-processing-title {
          font-weight: 600 !important;
          display: block !important;
          margin-bottom: 8px !important;
          font-size: var(--font-size-body-small) !important;
          color: var(--color-text-action) !important;
      }

      .didomi-notice-data-processing-list {
          font-size: var(--font-size-body-small) !important;
          line-height: 1.2 !important;
          color: var(--color-text-secondary) !important;
          letter-spacing: -0.32px !important;

        span {
            font-size: var(--font-size-body-small) !important;
            color: var(--color-text-secondary) !important;
          }
        }
      }
    }

    .didomi-buttons {
      margin-top: 0 !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 4px !important;
      align-items: center !important;
      padding: 0 20px !important;
      justify-content: flex-start !important;
      width: 100%;
      box-sizing: border-box;

      .didomi-button,
      .didomi-components-button {
        font-weight: 600 !important;
        font-size: 14px !important;
        padding: 8px 10px !important;
        border-radius: var(--button-border-radius) !important;
        transition: all 0.2s ease-in-out !important;
        margin: 0 !important;
        white-space: nowrap !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        text-decoration: none !important;
        letter-spacing: -0.48px !important;
        line-height: 24px !important;
        min-width: auto !important;
        box-sizing: border-box !important;
        /* Override inline styles - force border and border-radius */
        background-color: var(--color-white) !important;
        color: var(--color-text-action) !important;
        border: 0.5px solid var(--color-gray-border) !important;
        border-width: 0.5px !important;
        border-style: solid !important;
        border-color: var(--color-gray-border) !important;
        border-radius: 6px !important;

        /* Override any inline border styles */
        &[style*="border"] {
          border: 0.5px solid var(--color-gray-border) !important;
          border-width: 0.5px !important;
          border-style: solid !important;
          border-color: var(--color-gray-border) !important;
        }

        &:hover {
          background-color: var(--color-surface) !important;
        }
      }

      /* Reject button - white background with gray border */
      .didomi-button-standard,
      .didomi-disagree-button,
      button.didomi-button-standard,
      #didomi-notice-disagree-button {
        background-color: var(--color-white) !important;
        color: var(--color-text-action) !important;
        border: 0.5px solid var(--color-gray-border) !important;
        border-width: 0.5px !important;
        border-style: solid !important;
        border-color: var(--color-gray-border) !important;
        border-radius: 6px !important;

        &:hover {
          background-color: var(--color-surface) !important;
        }

        /* Override inline styles */
        &[style*="background-color"] {
          background-color: var(--color-white) !important;
        }

        &[style*="border-color"],
        &[style*="border:"] {
          border-color: var(--color-gray-border) !important;
          border-width: 0.5px !important;
          border-style: solid !important;
        }

        &[style*="border-radius"] {
          border-radius: 6px !important;
        }

        &[style*="color"] {
          color: var(--color-text-action) !important;
        }
      }
      
      /* Accept All button - white background with gray border (matching Figma design) */
      .didomi-button-highlight,
      .didomi-dismiss-button,
      button.didomi-button-highlight,
      #didomi-notice-agree-button {
        background-color: var(--color-white) !important;
        color: var(--color-text-action) !important;
        border: 0.5px solid var(--color-gray-border) !important;
        border-width: 0.5px !important;
        border-style: solid !important;
        border-color: var(--color-gray-border) !important;
        border-radius: 6px !important;

        &:hover {
          background-color: var(--color-surface) !important;
        }

        /* Override inline styles */
        &[style*="background-color"] {
          background-color: var(--color-white) !important;
        }

        &[style*="border-color"],
        &[style*="border:"] {
          border-color: var(--color-gray-border) !important;
          border-width: 0.5px !important;
          border-style: solid !important;
        }

        &[style*="border-radius"] {
          border-radius: 6px !important;
        }

        &[style*="color"] {
          color: var(--color-text-action) !important;
        }
      }

      /* More Options link - styling (positioning handled by JS config) */
      a.didomi-button,
      .didomi-button-link,
      a[href*="preferences"],
      #didomi-notice-learn-more-button {
        height: auto !important;
        padding: 0 !important;
        font-weight: 400 !important;
        font-size: 13px !important;
        color: var(--color-text-disabled) !important;
        text-decoration: underline !important;
        background: transparent !important;
        border: none !important;
        letter-spacing: -0.26px !important;
        line-height: 20px !important;
        text-decoration-skip-ink: none !important;
        text-underline-position: from-font !important;
        margin-left: auto !important;

        &:hover {
          opacity: 0.7;
        }
      }
    }

    /* Footer section with privacy policy - matches Figma gray background */
    .didomi-notice-footer {
      background-color: var(--color-surface) !important;
      border-top: 1px solid var(--color-gray-border) !important;
      border-bottom: none !important;
      border-left: none !important;
      border-right: none !important;
      padding: 12px 20px !important;
      margin-top: 0 !important;
      font-size: 12px !important;
      line-height: 1.2 !important;
      color: var(--color-text-secondary) !important;
      letter-spacing: -0.32px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100%;
      box-sizing: border-box;

      p {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        color: var(--color-text-secondary) !important;
        letter-spacing: -0.32px !important;
      }

      a {
        color: var(--color-text-secondary) !important;
        text-decoration: underline !important;
        text-decoration-skip-ink: none !important;
        text-underline-position: from-font !important;
      }
    }

    /* Position Adjustments for Banner - Full Width Bottom/Top */
    &.bottom,
    &.top {
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
    z-index: 9999;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 !important;

      /* Inner wrapper maintains centered content with max-width */
      > div,
      .didomi-regular-notice {
        max-width: 480px !important;
        margin: 0 auto !important;
      }
    }

    &.bottom {
      bottom: 0 !important;
      border-top: 1px solid var(--color-gray-20) !important;
      border-bottom: none !important;
      border-left: none !important;
      border-right: none !important;
      box-shadow: 0px -4px 16px rgba(0, 0, 0, 0.08);
    }

    &.top {
      top: 0 !important;
      border-bottom: 1px solid var(--color-gray-20) !important;
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;
      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
    }
  }

  /* Also target #didomi-notice for compatibility */
  #didomi-notice.bottom,
  #didomi-notice.top {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999;
    width: 100% !important;
  }
  
  /* Banner notices should be 480px centered, not full-width */
  #didomi-notice.didomi-notice-banner.bottom,
  #didomi-notice.didomi-notice-banner.top {
    max-width: 480px !important;
    width: 480px !important;
    border-radius: var(--component-border-radius) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  #didomi-notice.bottom {
    bottom: 0 !important;
    border-top: 1px solid var(--color-gray-20) !important;
    border-bottom: none !important;
  }
  
  #didomi-notice.didomi-notice-banner.bottom {
    border-top: 1px solid var(--color-gray-20) !important;
    border-bottom: none !important;
  }

  #didomi-notice.top {
    top: 0 !important;
    border-bottom: 1px solid var(--color-gray-20) !important;
    border-top: none !important;
  }
  
  #didomi-notice.didomi-notice-banner.top {
    border-bottom: 1px solid var(--color-gray-20) !important;
    border-top: none !important;
  }

  /* Middle Popup Notice */
  #didomi-popup {
    .didomi-popup__dialog {
      background-color: var(--color-white);
      color: var(--color-text-secondary);
      border-radius: var(--component-border-radius);
      padding: 0;
      max-width: 568px;
      margin: auto;
      border: 1px solid var(--color-gray-20);

      .didomi-popup-notice {
        padding: 32px !important;
        line-height: 1.3 !important;

        .didomi-popup-notice-logo {
          margin-bottom: 24px;
        }

        .didomi-popup-notice-text-container {
          border-block: 1px solid var(--color-gray-border);
          padding-block: 20px;
          font-size: var(--font-size-body);
          line-height: 1.3;
        }

        .didomi-popup-notice-buttons {
          margin-top: 24px;
          display: flex;
          gap: 4px;
          flex-wrap: wrap;

          .didomi-components-button {
            border: 0.5px solid var(--color-gray-border) !important;
            font-weight: 600;
            padding: 8px 10px;
            height: 32px;
            background-color: var(--color-white);
            color: var(--color-text-action);
          }
        }

        .didomi-notice-view-partners-link {
          font-size: var(--font-size-body-small);
          text-align: left;
          margin-top: 16px;
        }
      }
    }
  }

  /* Mobile Adjustments */
  .didomi-mobile {
    .didomi-notice-banner {
      padding: 20px 0 !important;
      max-width: 100% !important;

      .didomi-notice-text {
        padding: 0 16px !important;

        p {
          font-size: var(--font-size-body);
        line-height: 1.3;
        }
      }

      .didomi-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0 16px !important;
        gap: 8px;

        .didomi-button {
          width: 100%;
          margin: 0;
        }
        }
      }

      #didomi-popup .didomi-popup-notice p {
        text-align: left !important;
      }
    }

    #didomi-popup {
      .didomi-popup-notice {
        padding: 24px 20px !important;

      .didomi-popup-notice-text p {
          font-size: var(--font-size-body);
        line-height: 1.3;
      }

      .didomi-popup-notice-buttons {
        flex-direction: column;
          gap: 8px;

          .didomi-components-button {
          width: 100%;
            border: 0.5px solid var(--color-gray-border) !important;
            font-weight: 600;
          }
        }
      }
    }
  }

  /* Additional Styles */
  .didomi-exterior-border {
    border-color: var(--color-gray-20);
  }

  .didomi-popup-container {
    border-color: var(--color-gray-20);

    .didomi-popup-notice-logo-container {
      text-align: center;
      max-width: 60px;
      margin: 0 auto;
    }

    .didomi-popup-notice-text {
      text-align: left;
    }
  }

  .didomi-popup-notice {
    &.didomi-popup-notice-with-data-processing {
      padding: 32px !important;
      line-height: 1.3 !important;
  }

  .didomi-popup-notice-optin-type {
    .didomi-popup-notice-text-container {
        border-block: 1px solid var(--color-gray-border);
        padding-block: 20px;
        font-size: var(--font-size-body);
        line-height: 1.3;
      }
    }

    .didomi-popup-notice-buttons {
      .didomi-components-button {
        border: 0.5px solid var(--color-gray-border) !important;
        font-weight: 600;
      }
    }
  }

  /* Consent Modal Styles */
  .didomi-consent-popup__backdrop {
    background: rgba(4, 19, 48, 0.6);
    backdrop-filter: blur(6px);
  }

  .didomi-consent-popup__dialog {
    background-color: var(--color-white);
    color: var(--color-text-secondary);
    border-radius: var(--component-border-radius);
    padding: 0;
    max-width: 568px;
    margin: auto;
    border: 1px solid var(--color-gray-20);

    .didomi-consent-popup-header.didomi-popup-header {
      padding: 20px 20px 0 20px !important; /* Match Figma padding */

      .didomi-consent-popup-title {
        margin: 0;
        padding: 0 0 10px 0 !important; /* Match Figma - 10px gap */
        text-align: left;
        font-size: 16px !important; /* Match Figma */
        color: var(--color-text-action);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.32px !important; /* Match Figma */
      }

      .didomi-consent-popup-header-close {
        position: absolute;
        top: 20px !important; /* Match Figma padding */
        right: 20px !important; /* Match Figma padding */
        background-color: var(--color-white) !important; /* Match Figma */
        color: var(--color-text-action) !important;
        font-size: 14px !important; /* Match Figma icon size */
        padding: 8px 10px !important; /* Match Figma */
        cursor: pointer;
        width: 32px !important; /* Match Figma */
        height: 32px !important; /* Match Figma */
        border: 0.5px solid var(--color-gray-border) !important; /* Match Figma */
        border-radius: 6px !important; /* Match Figma */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        &:hover {
          background-color: var(--color-surface) !important;
          opacity: 1 !important;
        }
      }
    }

    .didomi-consent-popup-body {
      margin: 0;
      padding: 0;

      p {
        margin: 0 0 12px;
        color: var(--color-text-secondary);
        font-size: var(--font-size-body);
        line-height: 1.3;
      }

      p.didomi-consent-popup-body__explanation {
        font-size: 14px !important; /* Match Figma */
        color: var(--color-text-secondary) !important; /* #4f596e */
        line-height: 1.3 !important;
        letter-spacing: -0.28px !important; /* Match Figma */
        padding: 0 20px !important; /* Match Figma */
      }

      .didomi-components-accordion {
        position: relative;

        /* Force accordions to be expanded */
        .didomi-components-accordion-content {
          display: block !important;
          max-height: none !important;
        }

        .label-click {
          padding: 12px 0 !important; /* Match Figma - 12px vertical */
          cursor: pointer;
          font-size: 14px !important; /* Match Figma */
          color: var(--color-text-secondary) !important; /* Match Figma - #4f596e */
          font-weight: 600 !important; /* Match Figma - SemiBold */
          line-height: 1.3;
          letter-spacing: -0.28px !important; /* Match Figma */
          border-top: 1px solid var(--color-gray-border) !important; /* Match Figma */

          display: flex;
          flex: 1 auto;
          width: 100%;
          flex-direction: row;
          gap: 16px !important; /* Match Figma - 16px gap between label and buttons */
          align-items: center !important;
          padding-left: 0 !important; /* Remove left padding */
          padding-right: 0 !important; /* Remove right padding */

          /* Hide the expand/collapse icon */
          .didomi-components-accordion-icon,
          button::before,
          button::after {
            display: none !important;
          }

          /* Remove the "+" icon */
          button {
            &::before {
              content: none !important;
            }
          }

          span:last-of-type {
            display: flex;
            justify-items: flex-end;
          }
        }

        .didomi-components-accordion-label-container {
          padding: 0;
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          gap: 16px !important;
          width: 100% !important;
        }

        .didomi-consent-popup-category__description,
        .didomi-consent-popup-data-processing__description {
          font-size: var(--font-size-body-small);
          color: var(--color-text-secondary);
          line-height: 1.3;
          padding: 0 0 14px 10px;
        }
      }

      .didomi-consent-popup-data-processing {
        display: flex;
        flex-direction: row !important;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        border-top: 1px solid var(--color-gray-border) !important; /* Match Figma */
        border-bottom: none !important; /* Remove dashed border */

        & + .didomi-consent-popup-data-processing {
          border-top: 1px solid var(--color-gray-border) !important; /* Match Figma */
        }

        &.didomi-consent-popup-data-processing {
          border-top: 1px solid var(--color-gray-border) !important; /* Match Figma */
        }
      }

      .didomi-consent-popup-body__title,
      .didomi-consent-popup-data-processing__purpose,
      .didomi-mobile .didomi-consent-popup-body__title,
      .didomi-mobile .didomi-consent-popup-data-processing__purpose {
        margin-bottom: 0;
        font-weight: 600;
      }

      .didomi-consent-popup-category__description,
      .didomi-consent-popup-data-processing__description {
        padding: 20px 12px 20px;
      }

      .didomi-consent-popup-data-processing__description.didomi-consent-popup-data-processing__description_tcf_v2.didomi-content.active {
        padding: 0 32px 0;
        font-size: var(--font-size-body-small);
      }

      p.didomi-consent-popup-data-processing__essential_purpose_explanation.didomi-content {
        padding: 0 32px 20px;
      }

      .didomi-popup-body .didomi-popup-body-section {
        margin: 24px 0 0;
        margin-bottom: 0;
      }

      .didomi-consent-popup-view-vendors-list {
        margin-top: 20px;
      }

      .didomi-mobile {
        .didomi-consent-popup-preferences-purposes {
          .didomi-consent-popup-categories {
            border-top: 1px solid var(--color-gray-border);
          }

          .didomi-components-accordion {
            .didomi-components-accordion-label-container {
              padding: 0;
            }
          }

          .didomi-consent-popup-data-processing {
            .label-button-section {
              padding: 10px 0 0;
              justify-content: right;
              width: auto;
            }
          }

          .label-button-section {
            width: auto;
          }

          .didomi-components-button {
            font-size: var(--font-size-body-small);
          }

          .didomi-consent-popup-data-processing {
            flex-direction: row;
          }

          .didomi-consent-popup-category__description {
            margin-bottom: 0;
          }

          .didomi-components-accordion-label-container {
            flex-direction: row;
          }

          .didomi-consent-popup-footer .didomi-consent-popup-actions {
            padding: 0;

            button {
              margin-left: 10px;
            }
          }

          .didomi-consent-popup-view-vendors-list {
            margin: 16px 0;
          }
        }

        .didomi-popup-notice-text p {
          font-size: var(--font-size-body);
          line-height: 1.3;
        }

        #didomi-popup .didomi-popup-notice p {
          text-align: left !important;
        }

        #didomi-consent-popup
          .didomi-consent-popup-preferences
          .didomi-consent-popup-vendor {
          flex-direction: row;
        }

        #didomi-consent-popup
          .didomi-consent-popup-preferences
          .didomi-consent-popup-vendor
          .didomi-consent-popup-vendor__buttons,
        #didomi-consent-popup
          .didomi-consent-popup-preferences
          .didomi-consent-popup-purpose__buttons {
          margin-left: 8px;
          margin-top: 0;
        }
      }
    }

    .didomi-consent-popup-footer.didomi-popup-footer {
      padding: 20px !important; /* Match Figma */
      justify-content: flex-end;
      display: flex;
      flex-direction: column !important; /* Match Figma - column layout */
      border-top: 1px solid var(--color-gray-border);
      gap: 24px !important; /* Match Figma - 24px gap */
      flex-wrap: wrap;
      background-color: var(--color-surface) !important; /* Match Figma - gray background */

      /* Footer text - Match Figma */
      p {
        font-size: 12px !important; /* Match Figma */
        color: var(--color-text-secondary) !important; /* #4f596e */
        line-height: 1.2 !important; /* Match Figma */
        margin: 0 !important;
        width: 100% !important;
        
        a {
          text-decoration: underline !important;
          text-decoration-skip-ink: none !important;
          text-underline-position: from-font !important;
          color: var(--color-text-secondary) !important;
        }
      }

      .didomi-buttons {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        align-self: flex-end !important; /* Match Figma - align right */

        .didomi-button {
          font-size: 14px !important; /* Match Figma */
          font-weight: 600;
          margin: 0;
          transition: all 0.2s ease-in-out;
          padding: 8px 10px;
          border-radius: 6px !important;
          height: 32px !important; /* Match Figma */
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background-color: var(--color-white);
          color: var(--color-text-action);
          border: 0.5px solid var(--color-gray-border) !important;
          letter-spacing: -0.48px !important; /* Match Figma */

          &.standard-button {
            &:hover {
              background-color: var(--color-surface);
            }
          }

          &.highlight-button {
            &:hover {
              background-color: var(--color-surface);
            }
          }
        }
      }

      a[href="https://www.didomi.io/"] {
        display: none;
      }
    }
  }

  /* Popup View Padding - Match Figma */
  .didomi-popup-view.didomi-consent-popup-preferences-purposes {
    padding: 0 20px 20px 20px !important; /* Match Figma - 20px padding */
    
    /* Force all accordions to be expanded */
    .didomi-components-accordion {
      .didomi-components-accordion-content {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
      }
      
      /* Remove expand/collapse icons */
      .didomi-components-accordion-icon {
        display: none !important;
      }
      
      /* Hide the "+" button icon */
      button::before {
        content: none !important;
        display: none !important;
      }
      
      /* Make label text show without the "+" */
      .label-click {
        button {
          &::before {
            display: none !important;
            content: none !important;
          }
        }
      }
    }
  }

  /* Vendors Popup View Padding */
  .didomi-popup-view.didomi-consent-popup-preferences-vendors {
    padding: 18px 32px;
  }

  /* Toggles and Radio Buttons - Match Figma Design */
  .didomi-consent-popup {
    /* Hide trigger icons globally */
    .trigger-icon {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .didomi-components-radio {
      display: flex !important;
      gap: 4px !important;

      .didomi-components-radio__option {
        font-size: 13px !important; /* Changed from var(--font-size-body-small) */
        padding: 8px 7px !important; /* Changed from 8px 16px */
        border-radius: 6px !important;
        width: auto !important;
        min-width: auto !important; /* Changed from 100px */
        margin: 0 !important;
        font-weight: 600 !important;
        line-height: 24px !important; /* Changed from 1.3 */
        cursor: pointer !important;
        transition: all 0.2s ease-in-out !important;
        height: 28px !important; /* Match Figma */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        letter-spacing: -0.48px !important; /* Match Figma */
        position: relative !important;


        &.didomi-components-radio__option--unselected {
          background-color: var(--color-white) !important;
          color: var(--color-text-action) !important; /* #041330 */
          border: 0.5px solid var(--color-gray-border) !important; /* #d1d8e5 */
          box-shadow: none !important; /* Removed shadow */

          &:hover {
            background-color: var(--color-surface) !important;
          }
        }

        &.didomi-components-radio__option--selected {
          background-color: #041330 !important; /* Changed from var(--primary-color) */
          color: var(--color-white) !important;
          border: 0.5px solid #232c40 !important; /* Changed from var(--primary-color) */
          box-shadow: none !important; /* Removed shadow */

          &:hover {
            background-color: #032ca5 !important;
          }
        }
      }
    }

    .didomi-consent-popup-body__explanation {
      font-size: var(--font-size-body);
      color: var(--color-text-secondary);
      line-height: 1.3;
      padding: 0 32px;
    }

    .didomi-consent-popup-body__section {
      margin: 0;
      padding: 0;
    }

    .didomi-consent-popup-body__title {
      font-size: var(--font-size-body);
      color: var(--color-text-action);
      font-weight: 600;
      padding: 20px 32px;
      line-height: 1.3;
    }

    .didomi-button span {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .didomi-consent-popup-view-vendors-list {
      margin-top: 20px;
    }
  }

  /* Additional Styles */
  #didomi-popup-preferences-title {
    padding: 0;
    font-size: 18px;
    font-weight: 600;
  }

  .label-click.didomi-consent-popup-data-processing__purpose {
    padding: 20px 32px;
  }

  /* Screen XSmall Styles */
  .didomi-screen-xsmall {
    .didomi-components-button {
      padding: 8px 10px;
    }
  }

  /* Button Hover Effect */
  .didomi-button:hover:not(:disabled) {
    opacity: 0.9;
  }

  /* Privacy Policy Link */
  .didomi-consent-popup-footer a,
  #didomi-notice a {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
  }

  /* Additional Adjustments */
  .didomi-consent-popup-data-processing {
    border-bottom: 1px dashed var(--color-gray-border);
  }

  .didomi-consent-popup-preferences-purposes
    .didomi-consent-popup-data-processing__essential_purpose {
    flex: 0;
    margin: 12px 0 0 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .didomi-popup-body .didomi-popup-body-section {
    margin: 24px 0 0;
    margin-bottom: 0;
    border-top: 1px solid var(--color-gray-border);
    padding-top: 14px;
  }

  p.didomi-consent-popup-data-processing__essential_purpose_explanation.didomi-content {
    padding: 0 32px 20px;
  }

  .didomi-consent-popup-category__description,
  .didomi-consent-popup-data-processing__description {
    padding: 20px 12px 20px;
  }

  /* Adjust Modal Width on Larger Screens */
  @media screen and (min-width: 768px) {
    .didomi-consent-popup__dialog {
      max-width: 568px;
    }

    #didomi-notice {
      .didomi-regular-notice {
        max-width: 480px;
      }
    }
  }

  /* Vendors Popup Styles */
  .didomi-popup-view.didomi-consent-popup-preferences-vendors {
    padding: 32px !important;
  }

  .didomi-consent-popup-preferences-vendors {
    /* Header Styles */
    .didomi-consent-popup-header {
      padding: 0 0 20px 0 !important;
      border-bottom: none !important;
      margin-bottom: 0 !important;

      .didomi-consent-popup-title {
        font-size: var(--font-size-title) !important;
        font-weight: 600 !important;
        color: var(--color-text-action) !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        margin: 0 !important;

        a {
          color: var(--color-text-action) !important;
          text-decoration: none !important;
          margin-right: 8px;

          &:hover {
            opacity: 0.7;
          }
        }

        span[role="heading"] {
          font-size: var(--font-size-title) !important;
          font-weight: 600 !important;
          color: var(--color-text-action) !important;
        }
      }

      .didomi-consent-popup-header-close {
        color: var(--color-text-action) !important;
        font-size: 32px !important;
        padding: 16px !important;
        background-color: transparent !important;

        &:hover {
          opacity: 0.7;
          background-color: transparent !important;
        }
      }
    }

    /* Body Explanation */
    .didomi-consent-popup-body__explanation {
      font-size: var(--font-size-body) !important;
      color: var(--color-text-secondary) !important;
      line-height: 1.3 !important;
      padding: 0 !important;
      margin: 0 0 20px 0 !important;
      letter-spacing: -0.28px !important;
    }

    /* All Partners Section */
    .didomi-consent-popup-container-click-all {
      background: var(--color-surface) !important;
      padding: 16px 20px !important;
      margin-bottom: 16px !important;
      border-radius: var(--component-border-radius) !important;
      border: 1px solid var(--color-gray-border) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 16px !important;

      .didomi-consent-popup-vendor__name {
        font-size: var(--font-size-body) !important;
        font-weight: 600 !important;
        color: var(--color-text-action) !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 !important;
      }

      .didomi-consent-popup-vendor__buttons {
        margin: 0 !important;
        flex-shrink: 0 !important;
      }
    }

    /* Vendors List Container */
    .didomi-consent-popup-body_vendors-list {
      border: 1px solid var(--color-gray-border) !important;
      border-radius: var(--component-border-radius) !important;
      padding: 0 !important;
      max-height: 400px !important;
      overflow-y: auto !important;
      background-color: var(--color-white) !important;

      .didomi-first-letter-vendors-list {
        font-weight: 600 !important;
        font-size: var(--font-size-body-small) !important;
        color: var(--primary-color) !important;
        padding: 12px 20px !important;
        background-color: var(--color-surface) !important;
        border-bottom: 1px solid var(--color-gray-border) !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.32px !important;
        text-transform: uppercase !important;
      }
    }

    /* Individual Vendor Items */
    .didomi-consent-popup-vendor {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 12px 20px !important;
      border-bottom: 1px solid var(--color-gray-border) !important;
      transition: background-color 0.2s ease-in-out;
      gap: 16px !important;

      &:last-child {
        border-bottom: none !important;
      }

      &:hover {
        background-color: var(--color-surface) !important;
      }

      .didomi-components-accordion {
        flex: 1;
        margin-right: 16px;

        .didomi-components-accordion-label-container {
          padding: 0 !important;
        }

        .label-click.didomi-consent-popup-vendor__name {
          font-size: var(--font-size-body) !important;
          font-weight: 400 !important;
          color: var(--color-text-action) !important;
          line-height: 1.3 !important;
          padding: 0 !important;
          margin: 0 !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
          flex: 1 !important;

          .trigger-icon {
            font-size: 16px !important;
            color: var(--color-text-secondary) !important;
            font-weight: 300 !important;
            flex-shrink: 0 !important;
            width: 16px !important;
            text-align: center !important;
          }

          span:not(.trigger-icon) {
            font-size: var(--font-size-body) !important;
            font-weight: 400 !important;
            color: var(--color-text-action) !important;
      }
    }
  }

  .didomi-consent-popup-vendor__description {
        padding: 0 !important;
        font-size: var(--font-size-body-small) !important;
        color: var(--color-text-secondary) !important;
        line-height: 1.3 !important;
        border-top: 1px solid var(--color-gray-border) !important;
        margin-top: 12px !important;
        background-color: var(--color-surface) !important;

    .didomi-content {
          padding: 16px 20px !important;

          &.active {
            display: block !important;
          }

          /* Vendor Details Sections */
          .didomi-vendors-details-purposes-consent {
            margin-bottom: 16px !important;

            &:last-child {
              margin-bottom: 0 !important;
            }

            .didomi-components-accordion {
              .didomi-components-accordion-label-container {
                padding: 0 !important;
              }

              .label-click {
                padding: 12px 0 !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 12px !important;

                .trigger-icon {
                  font-size: 16px !important;
                  color: var(--color-text-secondary) !important;
                  font-weight: 300 !important;
                  flex-shrink: 0 !important;
                }

                .didomi-vendors-details-title {
                  font-size: var(--font-size-body-small) !important;
                  font-weight: 600 !important;
                  color: var(--color-text-action) !important;
                  line-height: 1.3 !important;
                  margin: 0 !important;
                  flex: 1 !important;
                }

                .didomi-consent-popup-vendor__right_aligned_buttons {
                  margin-left: auto !important;
                  flex-shrink: 0 !important;

                  .didomi-consent-popup-vendor__buttons {
                    margin: 0 !important;

                    .didomi-components-radio {
                      gap: 4px !important;

                      .didomi-components-radio__option {
                        font-size: var(--font-size-body-small) !important;
                        padding: 6px 12px !important;
                        min-width: 80px !important;
                        height: auto !important;
                        font-weight: 600 !important;
                        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05) !important;

                        &.didomi-components-radio__option--unselected {
                          box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05) !important;

                          &:hover {
                            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08) !important;
                          }
                        }

                        &.didomi-components-radio__option--selected {
                          box-shadow: 0px 1px 2px rgba(38, 92, 255, 0.2) !important;

                          &:hover {
                            box-shadow: 0px 2px 4px rgba(38, 92, 255, 0.3) !important;
                          }
                        }
                      }
                    }
                  }
                }
              }

              /* Nested content */
              .didomi-content {
                padding: 0 0 12px 0 !important;
                margin-top: 8px !important;

                &.active {
                  display: block !important;
                }

                ul {
                  margin: 0 !important;
                  padding-left: 20px !important;
                  list-style: disc !important;

                  li {
                    font-size: var(--font-size-body-small) !important;
                    line-height: 1.3 !important;
                    color: var(--color-text-secondary) !important;
                    margin-bottom: 4px !important;
                    letter-spacing: -0.32px !important;

                    &:last-child {
                      margin-bottom: 0 !important;
                    }
                  }
                }
              }
            }
          }

          /* Storage Duration Section */
          .didomi-vendor-storage-duration {
            margin-top: 16px !important;
            padding-top: 16px !important;
            border-top: 1px solid var(--color-gray-border) !important;

            .didomi-components-accordion {
              .didomi-components-accordion-label-container {
                padding: 0 !important;
              }

              .label-click {
                padding: 12px 0 !important;
                cursor: pointer !important;
                display: flex !important;
                align-items: center !important;
                gap: 8px !important;

                .trigger-icon {
                  font-size: 16px !important;
                  color: var(--color-text-secondary) !important;
                  font-weight: 300 !important;
                  flex-shrink: 0 !important;
                }

                .didomi-vendor-storage-duration__title {
                  font-size: var(--font-size-body-small) !important;
                  font-weight: 600 !important;
                  color: var(--color-text-action) !important;
                  line-height: 1.3 !important;
                  margin: 0 !important;
                }
              }

              .didomi-content {
                padding: 0 !important;
                margin-top: 8px !important;

                &.active {
                  display: block !important;
                }

                .didomi-vendor-storage-duration__content {
                  font-size: var(--font-size-body-small) !important;
                  line-height: 1.3 !important;
                  color: var(--color-text-secondary) !important;
                  margin: 0 !important;
                  letter-spacing: -0.32px !important;
                }
              }
            }
          }

          /* General lists */
          ul {
            margin: 0 !important;
            padding-left: 20px !important;
            list-style: disc !important;

            li {
              font-size: var(--font-size-body-small) !important;
              line-height: 1.3 !important;
              color: var(--color-text-secondary) !important;
              margin-bottom: 4px !important;
              letter-spacing: -0.32px !important;

              &:last-child {
                margin-bottom: 0 !important;
              }
            }
          }
        }
      }

      .didomi-consent-popup-vendor__buttons {
        margin-left: auto !important;
        flex-shrink: 0;
      }
    }

    /* Skip Link */
    .didomi-components-skip-link {
      display: none !important;
    }

    /* View User Information Accordion */
    .didomi-user-information-trigger {
      padding: 12px 0 !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      font-size: var(--font-size-body-small) !important;
      font-weight: 400 !important;
      color: var(--color-text-secondary) !important;
      line-height: 1.3 !important;
      border-top: 1px solid var(--color-gray-border) !important;
      margin-top: 16px !important;

      .trigger-icon {
        font-size: 16px !important;
        color: var(--color-text-secondary) !important;
        font-weight: 300 !important;
        flex-shrink: 0 !important;
      }

      span:not(.trigger-icon) {
        font-size: var(--font-size-body-small) !important;
        color: var(--color-text-secondary) !important;
      }
    }

    .didomi-user-information-container {
      padding: 12px 0 !important;
      font-size: var(--font-size-body-small) !important;
      line-height: 1.3 !important;
      color: var(--color-text-secondary) !important;
      letter-spacing: -0.32px !important;

      span {
        display: block !important;
        margin-bottom: 8px !important;
        font-size: var(--font-size-body-small) !important;
        line-height: 1.3 !important;
        color: var(--color-text-secondary) !important;

        &:last-child {
          margin-bottom: 0 !important;
        }

        b {
          font-weight: 600 !important;
          color: var(--color-text-action) !important;
        }
      }
    }

    /* Footer */
    .didomi-consent-popup-footer {
      padding: 20px 0 0 !important;
      border-top: 1px solid var(--color-gray-border) !important;
      margin-top: 24px !important;

      .didomi-consent-popup-actions {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 4px !important;

        .didomi-button {
          font-size: var(--font-size-buttons) !important;
          font-weight: 600 !important;
          padding: 8px 10px !important;
          height: 32px !important;
          border-radius: var(--button-border-radius) !important;
          border: 0.5px solid var(--color-gray-border) !important;
          background-color: var(--color-white) !important;
          color: var(--color-text-action) !important;
          transition: all 0.2s ease-in-out;

          &.highlight-button {
            background-color: var(--primary-color) !important;
            color: var(--color-white) !important;
            border-color: var(--primary-color) !important;

            &:hover {
              background-color: #032ca5 !important;
            }
          }

          &:hover:not(.highlight-button) {
            background-color: var(--color-surface) !important;
          }
        }
      }

      a[href="https://www.didomi.io/"] {
        display: none !important;
      }
    }
  }

  /* General Accordion Styles for Vendor Details */
  .didomi-components-accordion {
    .didomi-components-accordion-label-container {
      padding: 0 !important;
    }

    .label-click {
      padding: 12px 0 !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      font-size: var(--font-size-body-small) !important;
      font-weight: 400 !important;
      color: var(--color-text-action) !important;
      line-height: 1.3 !important;
      transition: color 0.2s ease-in-out !important;

      &:hover {
        color: var(--primary-color) !important;
      }

      .trigger-icon {
        font-size: 16px !important;
        color: var(--color-text-secondary) !important;
        font-weight: 300 !important;
        flex-shrink: 0 !important;
        transition: transform 0.2s ease-in-out !important;
        line-height: 1 !important;
      }

      &[aria-expanded="true"] .trigger-icon {
        transform: rotate(180deg) !important;
      }
    }

    .didomi-content {
      overflow: hidden !important;
      transition: max-height 0.3s ease-in-out !important;

      &.active {
        display: block !important;
    }
  }
}