/* Femet Cookie Consent Custom Styles */

/* Override default cookieconsent styles */
.cm__body {
    font-family: "Roboto", sans-serif !important;
    border-top: 5px solid goldenrod !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    font-size: 14px !important;
    padding: 10px !important;
    z-index: 9999 !important;
}

/* Banner specific styles */
.cm__banner {
    background-color: #000 !important;
    border-top: 3px solid goldenrod !important;
}

/* Message text styling */
.cm__message {
    color: white !important;
    margin-right: 20px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Compliance section (buttons container) */
.cm__compliance {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

/* Primary button (Accept/Allow) */
.cm__btn:not(.cm__btn--secondary):nth-of-type(1) {
    background-color: goldenrod !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: "Roboto", sans-serif !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* Equal width for both buttons */
.cm__btn + .cm__btn, .cm__btn:has(+ .cm__btn) {
    width: 50%!important;
    margin-top: 0!important;
}



.cm__btn-group:has(> .cm__btn + .cm__btn) {
    width: 100%!important;
    display: flex!important;
    justify-content: space-between!important;
    gap: 15px!important;
}

.cm__btn:not(.cm__btn--secondary):nth-of-type(1):hover {
    background-color: rgb(189, 143, 3) !important;
    color: white !important;
}

/* Secondary button (Deny/Decline) */
.cm__btn:not(.cm__btn--secondary):nth-of-type(2)  {
    background-color: transparent !important;
    color: rgb(115, 111, 111) !important;
    border: 1px solid rgb(115, 111, 111) !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: "Roboto", sans-serif !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.cm__btn:not(.cm__btn--secondary):nth-of-type(2):hover {
    background-color: rgb(115, 111, 111)!important;
    color: white!important;
}
/* Link styling (Privacy Policy, etc.) */
.cm__link {
    color: goldenrod !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.cm__link:hover {
    color: rgb(189, 143, 3) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cm__window {
        padding: 15px !important;
        font-size: 13px !important;
    }
    
    .cm__message {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
        font-size: 13px !important;
    }
    
    .cm__compliance {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }
    
    .cm__btn {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .cm__window {
        padding: 12px !important;
        font-size: 12px !important;
    }
    
    .cm__message {
        font-size: 12px !important;
    }
    
    .cm__btn {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

/* Custom positioning for sites with fixed sidebars */
@media (min-width: 1200px) {
    .cm__window {
        left: 20vw !important;
        right: 0 !important;
        width: 80vw !important;
    }
}

@media (min-width: 1750px) {
    .cm__window {
        left: 350px !important;
        right: 0 !important;
        width: calc(100vw - 350px) !important;
    }
}

/* Animation for entrance */
.cm__window.cm__banner {
    transform: translateY(100%) !important;
    animation: ccSlideUp 0.5s ease-out forwards !important;
}

@keyframes ccSlideUp {
    to {
        transform: translateY(0) !important;
    }
}

/* Close animation */
.cm__window.cm__invisible {
    animation: ccSlideDown 0.3s ease-in forwards !important;
}

@keyframes ccSlideDown {
    to {
        transform: translateY(100%) !important;
    }
}

/* Focus states for accessibility */
.cm__btn:focus {
    outline: 2px solid goldenrod !important;
    outline-offset: 2px !important;
}

.cm__link:focus {
    outline: 2px solid goldenrod !important;
    outline-offset: 2px !important;
}

/* Custom styles for different consent types */
.cm__type-info .cm__compliance {
    text-align: center !important;
}

.cm__type-opt-in .cm__btn.cm__allow,
.cm__type-opt-out .cm__btn.cm__allow {
    margin-left: auto !important;
}

/* Revoke button styling (if using revoke functionality) */
.cm__revoke {
    background-color: goldenrod !important;
    color: white !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    border: none !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9998 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.cm__revoke:hover {
    background-color: rgb(189, 143, 3) !important;
    transform: scale(1.1) !important;
}

/* Adjust revoke button position for sidebar layout */
@media (min-width: 1200px) {
    .cm__revoke {
        right: calc(20vw + 20px) !important;
    }
}

@media (min-width: 1750px) {
    .cm__revoke {
        right: calc(100vw - 350px + 20px) !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .cm__window {
        border-top-width: 5px !important;
    }
    
    .cm__btn.cm__allow,
    .cm__btn.cm__dismiss {
        border: 2px solid white !important;
    }
    
    .cm__btn.cm__deny {
        border-width: 2px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .cm__window,
    .cm__btn,
    .cm__link,
    .cm__revoke {
        transition: none !important;
        animation: none !important;
    }
    
    .cm__window.cm__banner {
        transform: none !important;
    }
}