/* Custom Cookie Consent Styling - Matching staging site design */

:root {
    /* Core colors */
    --cc-bg: #fff;
    --cc-primary-color: #2c2f31;
    --cc-secondary-color: #5e6266;

    /* Modal */
    --cc-modal-border-radius: .5rem;
    --cc-modal-shadow: 0 .625em 1.875em rgba(0, 0, 0, 0.3);

    /* Buttons */
    --cc-btn-border-radius: .5rem;
    --cc-btn-primary-bg: #30363c;
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
    --cc-btn-primary-hover-bg: #000;
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-secondary-bg: #eaeff2;
    --cc-btn-secondary-color: var(--cc-primary-color);
    --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg);
    --cc-btn-secondary-hover-bg: #d4dae0;
    --cc-btn-secondary-hover-color: #000;

    /* Links */
    --cc-link-color: var(--cc-btn-primary-bg);

    /* Toggles */
    --cc-toggle-on-bg: var(--cc-btn-primary-bg);
    --cc-toggle-off-bg: #667481;
    --cc-toggle-readonly-bg: #d5dee2;

    /* Misc */
    --cc-separator-border-color: #f0f4f7;
    --cc-cookie-category-block-bg: #f0f4f7;
    --cc-overlay-bg: rgba(0, 0, 0, .65);
    --cc-footer-bg: var(--cc-btn-secondary-bg);
    --cc-footer-color: var(--cc-secondary-color);
    --cc-footer-border-color: #e4eaed;
}

/* Hide native library buttons */
#c-bns,
#c-p-bn,
#c-s-bn {
    display: none !important;
}

/* Consent modal box - shadow and positioning */
#cm {
    text-align: center !important;
    box-shadow: var(--cc-modal-shadow) !important;
    border-radius: var(--cc-modal-border-radius) !important;
    background: var(--cc-bg) !important;
    padding: 0;
    overflow: hidden !important;
}

@media screen and (max-width: 688px) {
    #cm,#cm.cloud,#cm.left,#cm.right {
        padding: 0!important;
    }
}

/* Inner container - relative for close button */
#c-inr {
    position: relative !important;
    padding: 16px 1.3rem !important;
}

/* Title centered */
#c-ttl {
    margin-bottom: 1.1em !important;
}

#cm #c-ttl,
.cc_div #c-ttl,
#c-ttl {
    text-align: left !important;
    font-size: 1em !important;
    font-weight: 600 !important;

}

/* Description text centered */
#cm #c-txt,
.cc_div #c-txt,
#c-txt {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--cc-secondary-color) !important;
}



/* Close button (X) - high specificity to override Salient theme button styles */
#cm #c-inr button.cc-close-btn,
.cc-close-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: var(--cc-btn-primary-bg) !important;
    color: var(--cc-btn-primary-color) !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom-left-radius: var(--cc-btn-border-radius) !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.cc-description {
    margin-bottom: 30px !important;
}

.cc-close-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: var(--cc-btn-primary-color) !important;
    stroke-width: 2.5 !important;
}

.cc-close-btn:hover {
    background: var(--cc-btn-primary-hover-bg) !important;
    color: var(--cc-btn-primary-hover-color) !important;
}

/* Custom button group */
.cc-custom-btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 16px !important;
}

/* Shared button styles - high specificity to override Salient theme */
#cm #c-inr button.cc-custom-btn,
.cc-custom-btn {
    border: 1px solid transparent !important;
    border-radius: var(--cc-modal-border-radius) !important;
    cursor: pointer !important;
    font-size: .82em !important;
    font-weight: 600 !important;
    min-height: 42px !important;
    padding: .5em 1em !important;
    width: 100% !important;
    text-align: center !important;
    transition: opacity 0.2s ease !important;
    text-decoration: none !important;
}

.cc-custom-btn:hover {
    opacity: 0.85 !important;
}

/* Primary buttons (Accept All, Accept Necessary Only) */
#cm #c-inr button.cc-custom-btn--primary,
.cc-custom-btn--primary {
    background: var(--cc-btn-primary-bg) !important;
    border-color: var(--cc-btn-primary-border-color) !important;
    color: var(--cc-btn-primary-color) !important;
}

#cm #c-inr button.cc-custom-btn--primary:hover,
.cc-custom-btn--primary:hover {
    background: var(--cc-btn-primary-hover-bg) !important;
    color: var(--cc-btn-primary-hover-color) !important;
    opacity: 1 !important;
}

/* Secondary button (Manage Preferences) */
#cm #c-inr button.cc-custom-btn--secondary,
.cc-custom-btn--secondary {
    background: var(--cc-btn-secondary-bg) !important;
    color: var(--cc-btn-secondary-color) !important;
    border-color: var(--cc-btn-secondary-border-color) !important;
}

#cm #c-inr button.cc-custom-btn--secondary:hover,
.cc-custom-btn--secondary:hover {
    background: var(--cc-btn-secondary-hover-bg) !important;
    color: var(--cc-btn-secondary-hover-color) !important;
    opacity: 1 !important;
}

/* Settings modal */
.cc-settings-modal {
    background-color: var(--cc-btn-secondary-bg) !important;
}

.cc_div .cc-settings-modal .cc-block {
    margin-bottom: 20px !important;
}

/* Links styling */
.cc_div .cc-modal .cc-link {
    color: var(--cc-link-color) !important;
    text-decoration: underline !important;
}

.cc_div .cc-modal .cc-link:hover {
    color: var(--cc-btn-primary-hover-bg) !important;
}