/**
 * Main styling for the Zaraz Consent Modal
 * Using CSS variables for Bricks compatibility
 */

 :root {
    /* Base colors - using automatic CSS variables */
    --zcm-primary-color: var(--primary, #4A90E2);
    --zcm-secondary-color: var(--secondary, #54595F);
    --zcm-background-color: var(--background, #FFFFFF);
    --zcm-text-color: var(--text, #333333);
    --zcm-accent-color: var(--accent, #61CE70);
    --zcm-border-radius: var(--border-radius, 5px);
    --zcm-box-shadow: var(--box-shadow, 0 5px 15px rgba(0, 0, 0, 0.1));
    --zcm-transition: var(--transition, all 0.3s ease);
    --zcm-font-family: var(--font-family, sans-serif);
    --zcm-font-size: var(--font-size-small, 14px);
    --zcm-line-height: var(--line-height, 1.6);
  }
  
  .zaraz-consent-manager-modal {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 400px;
    width: calc(100% - 40px);
    background-color: var(--zcm-background-color);
    color: var(--zcm-text-color);
    border-radius: var(--zcm-border-radius);
    box-shadow: var(--zcm-box-shadow);
    font-family: 'Poppins', var(--zcm-font-family);
    font-size: var(--zcm-font-size);
    line-height: var(--zcm-line-height);
    z-index: 999999;
    transform: translateY(calc(100% + 30px));
    opacity: 0;
    transition: var(--zcm-transition);
    overflow: hidden;
  }
  
  .zaraz-consent-manager-modal.visible {
    transform: translateY(0);
    opacity: 1;
  }
  
  .zaraz-consent-manager-modal-content {
    padding: 20px;
  }
  
  .zaraz-consent-manager-modal-header {
    margin-bottom: 15px;
  }
  
  .zaraz-consent-manager-modal-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 10px 0;
  }
  
  .zaraz-consent-manager-modal-description {
    margin-bottom: 20px;
  }
  
  .zaraz-consent-manager-modal-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .zaraz-consent-manager-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    border: none;
    font-family: 'Poppins', var(--zcm-font-family);
    font-size: var(--text-s);
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 25.728px;
    padding: var(--padding-xs, 11.88px) var(--padding-s, 19.8px);
    column-gap: 10px;
    row-gap: 10px;
    max-width: 100%;
    overflow-wrap: break-word;
    transition-property: background, color, border, translate;
    transition-duration: 0.3s, 0.3s, 0.3s, 0.3s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
  }
  
  .zaraz-consent-manager-button-accept {
    background-color: rgb(255, 0, 51);
    color: rgb(245, 245, 245);
    border-radius: 100px;
    flex: 1;
  }
  
  .zaraz-consent-manager-button-accept:hover {
    filter: brightness(1.1);
  }
  
  .zaraz-consent-manager-button-decline {
    background-color: transparent;
    color: var(--zcm-text-color);
    border-radius: 100px;
    border: 1px solid var(--zcm-secondary-color);
  }
  
  .zaraz-consent-manager-button-decline:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .zaraz-consent-manager-button-customize {
    background-color: transparent;
    color: var(--zcm-primary-color);
    text-decoration: underline;
    padding: 11.88px 0;
    width: 100%;
    border-radius: 0;
  }
  
  .zaraz-consent-manager-button-customize:hover {
    opacity: 0.9;
  }
  
  /* Detailed consent section */
  .zaraz-consent-manager-detailed {
    display: none;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 15px;
  }
  
  .zaraz-consent-manager-detailed.visible {
    display: block;
  }
  
  .zaraz-consent-manager-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .zaraz-consent-manager-option-label {
    display: flex;
    align-items: center;
    gap: 12px; /* Add gap between switch and text */
  }
  
  .zaraz-consent-manager-checkbox {
    cursor: pointer;
  }
  
  .zaraz-consent-manager-option-name {
    font-weight: 500;
  }
  
  .zaraz-consent-manager-option-description {
    font-size: 0.9em;
    opacity: 0.8;
    margin-top: 3px;
    padding-left: 52px; /* Match the width of switch (40px) + gap (12px) */
    margin-bottom: 15px; /* Add space between option groups */
  }
  
  /* Toggle switch */
  .zaraz-consent-manager-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
  }
  
  .zaraz-consent-manager-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .zaraz-consent-manager-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 22px;
  }
  
  .zaraz-consent-manager-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .zaraz-consent-manager-slider {
    background-color: var(--zcm-accent-color);
  }
  
  input:focus + .zaraz-consent-manager-slider {
    box-shadow: 0 0 1px var(--zcm-accent-color);
  }
  
  input:checked + .zaraz-consent-manager-slider:before {
    transform: translateX(18px);
  }
  
  /* Necessary for Bricks builder compatibility */
  .zaraz-consent-manager-modal * {
    box-sizing: border-box;
  }
  
  /* Responsive adjustments */
  @media (max-width: 480px) {
    .zaraz-consent-manager-modal {
      bottom: 10px;
      left: 10px;
      width: calc(100% - 20px);
    }
    
    .zaraz-consent-manager-modal-content {
      padding: 15px;
    }
    
    .zaraz-consent-manager-modal-buttons {
      flex-direction: column;
    }
    
    .zaraz-consent-manager-button {
      width: 100%;
    }
  }