/********************************************
 * Minimal SLDS Tooltip CSS
 ********************************************/

/* 
  Triggers a tooltip on hover by hiding the .slds-tooltip by default 
  and showing it on hover of the parent .slds-dropdown-trigger_hover.
*/

.slds-dropdown-trigger {
  position: relative;
}

.slds-dropdown-trigger_hover .slds-tooltip {
  display: none;
}

.slds-dropdown-trigger_hover:hover .slds-tooltip {
  display: block;
}

/* Basic tooltip container styling */
.slds-tooltip {
  position: absolute;
  z-index: 1000;
  background-color: #16325c; /* SLDS brand blue */
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
  min-width: 200px; /* Added minimum width */
  max-width: 20rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

/* Tooltip content spacing */
.slds-tooltip__content p {
  margin: 0;
}

/********************************************
 * The "nubbin" (pointer/arrow) styling
 * bottom-left variant
 ********************************************/
.slds-nubbin_bottom-left::before,
.slds-nubbin_bottom-left::after {
  content: "";
  position: absolute;
  border: solid transparent;
  pointer-events: none;
}

.slds-nubbin_bottom-left::before {
  bottom: -16px;
  left: 1rem; 
  border-width: 8px;
  border-color: rgba(22, 50, 92, 0); /* transparent */
  border-bottom-color: #16325c;      /* matches tooltip background */
}

.slds-nubbin_bottom-left::after {
  bottom: -14px;
  left: 1rem;
  border-width: 6px;
  border-color: rgba(255, 255, 255, 0); /* transparent */
  border-bottom-color: #16325c;         /* matches tooltip background */
}

/********************************************
 * Assistive Text (for screen readers)
 * If you're using .slds-assistive-text
 ********************************************/
.slds-assistive-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  border: 0 !important;
}
    
    /* Loading overlay styling */
    #loadingOverlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.8);
      z-index: 100000 !important;
      text-align: center;
      padding-top: 200px;
      font-size: 20px;
      color: #004f81;
  }
  
  /* Spinner styling within the overlay */
  #loadingOverlay .spinner {
      width: 50px;
      height: 50px;
      margin: 0 auto 20px auto;
      border: 6px solid #f3f3f3;
      border-top: 6px solid #004f81;
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

    /* Unsubscribe Toggle Styling - SLDS Styling Override */

    /* Default SLDS toggle stays gray when OFF (unchanged) */
    .subscription[data-unsubscribe="true"] .slds-checkbox_faux {
        background-color: var(--sds-c-checkbox-toggle-color-background, #b0adab) !important;
        border-color: var(--sds-c-checkbox-toggle-color-border, #b0adab) !important;
    }

    /* Only make the toggle red when it is checked */
    .subscription[data-unsubscribe="true"] [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux {
        background-color: #ba141a !important; /* Red ON */
        border-color: #ba141a !important;
    }

    /* Keep toggle circle white when toggled ON */
    .subscription[data-unsubscribe="true"] [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before {
        background-color: white !important;
    }


    /* "Inactive" text remains gray when OFF */
    .subscription[data-unsubscribe="true"] .slds-checkbox_off {
        color: #3e3e3c !important;
    }

    /* Smooth transition for color changes */
    .subscription[data-unsubscribe="true"] .slds-checkbox_faux,
    .subscription[data-unsubscribe="true"] [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux {
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }
    
    /* Checkbox Styling */

    input[type="checkbox"] {
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        margin: 6px;
        padding: 0;
        border: 2px solid #8b8c89;
        appearance: none;
        background-color: #ffffff;
        outline: none;
        transition: outline 0.1s;
        vertical-align: bottom;
    }


    input[type="checkbox"]:checked {
        background-size: cover;
        padding: 2px;
    }

    input[type="checkbox"]:not(:disabled):checked {
        border-color: #274c77;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23274c77" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
    }

    input[type="checkbox"]:disabled {
        background-color: #d9d9d9;
    }

    input[type="checkbox"]:disabled:checked {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %238b8c89" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
    }


    input[type="checkbox"]:focus-visible {
        outline: 6px solid #a3cef1;
        transform: scale(1.05);
    }


    
    /* Global Unsubscribe Tray styling */

    .tray-container{ margin-top: 50px;}
    #globalUnsubscribeTray { width: 100%; background-color: #f1f1f1;  border: 2px solid #004f81; border-radius: 10px; padding: 20px;}
    #globalUnsubHeader {
        cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
    }
    #globalUnsubHeader span { font-weight: normal; }
    #globalUnsubContent { display: none; border-top: none; padding: 10px; }
    
    #statusMessage {
        position: fixed; /* ← key change */
            top: 5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            width: 100%;
            max-width: 500px;
            min-width: 250px;
            padding: 1rem;
            text-align: center;
            pointer-events: none;
            }
   
    @media (max-width: 480px) {
        #statusMessage {
            position: fixed; /* ← key change */
            top: 4rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            width: 100%;
            max-width: 90%;
            min-width: 250px;
            padding: 1rem;
            text-align: center;
            pointer-events: none;
            }
    }