/**
 * Cookie Consent Banner Styles
 * AL Homes Theme
 * 
 * FULLY ISOLATED - All classes prefixed with "al-cookie-"
 * NO ELEMENTOR CONFLICTS - Independent CSS with !important
 * 
 * @version 1.2.0
 */

/* ============================================
   FONT IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@300;400;500;600&display=swap');

/* ============================================
   COOKIE BANNER - Main Container
   ============================================ */
#al-cookie-consent.al-cookie-banner {
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999999 !important;
    width: 100% !important;
    max-width: 1300px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    
    /* Animation Initial State */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    
    /* Reset any inherited styles */
    background: transparent !important;
    border: none !important;
    float: none !important;
    clear: both !important;
}

#al-cookie-consent.al-cookie-banner.al-cookie-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

#al-cookie-consent.al-cookie-banner.al-cookie-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(20px) !important;
}

#al-cookie-consent.al-cookie-banner.al-cookie-animate-in {
    animation: al-cookie-slide-up 0.4s ease-out forwards !important;
}

/* ============================================
   COOKIE CONTAINER - Glassmorphism Box
   ============================================ */
#al-cookie-consent .al-cookie-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    
    padding: 14px 28px !important;
    margin: 0 !important;
    
    /* Background - Dark glassmorphism zinc-800/50 */
    background: rgba(39, 39, 42, 0.5) !important;
    backdrop-filter: blur(2.5px) !important;
    -webkit-backdrop-filter: blur(2.5px) !important;
    
    /* Border & Radius */
    border-radius: 20px !important;
    border: 1px solid #27272a !important;
    outline: none !important;
    
    /* Shadow */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
    
    /* Reset */
    width: auto !important;
    max-width: none !important;
    float: none !important;
    position: relative !important;
}

/* ============================================
   COOKIE CONTENT - Left Side (Icon + Text)
   ============================================ */
#al-cookie-consent .al-cookie-content {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cookie Icon Box */
#al-cookie-consent .al-cookie-icon {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
    margin: 0 !important;
    
    /* Dark background - Dark-Text */
    background: #18181b !important;
    border-radius: 16px !important;
    border: 1px solid #27272a !important;
    outline: none !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    box-sizing: border-box !important;
}

#al-cookie-consent .al-cookie-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #ffffff !important;
    fill: none !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Text Container */
#al-cookie-consent .al-cookie-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Title - 18px medium */
#al-cookie-consent .al-cookie-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
}

/* Description - 16px light */
#al-cookie-consent .al-cookie-description {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
}

/* ============================================
   COOKIE ACTIONS - Right Side (Link + Buttons)
   ============================================ */
#al-cookie-consent .al-cookie-actions {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Privacy Policy Link */
#al-cookie-consent .al-cookie-privacy-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: capitalize !important;
    line-height: 1 !important;
    
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    
    transition: opacity 0.2s ease !important;
    cursor: pointer !important;
}

#al-cookie-consent .al-cookie-privacy-link:hover {
    opacity: 0.8 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

#al-cookie-consent .al-cookie-privacy-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

#al-cookie-consent .al-cookie-privacy-link svg {
    width: 10px !important;
    height: 10px !important;
    color: #ffffff !important;
    fill: none !important;
    stroke: currentColor !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* Buttons Container */
#al-cookie-consent .al-cookie-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   BUTTONS - Exact Figma Match
   ============================================ */

/* Button Base Reset */
#al-cookie-consent .al-cookie-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    
    padding: 10px 24px !important;
    margin: 0 !important;
    
    font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-transform: capitalize !important;
    text-decoration: none !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    
    border-radius: 50px !important;
    cursor: pointer !important;
    
    /* Reset all possible inherited styles */
    box-shadow: none !important;
    outline: none !important;
    float: none !important;
    position: relative !important;
    
    transition: all 0.2s ease !important;
}

/* ----------------------------------------
   REJECT BUTTON - Tertiary (White Outline)
   Default: transparent bg, white border, white text
   Hover: white bg, #2a2a2a text
   ---------------------------------------- */
#al-cookie-consent .al-cookie-btn.al-cookie-btn-reject {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #ffffff !important;
}

#al-cookie-consent .al-cookie-btn.al-cookie-btn-reject:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #2a2a2a !important;
    border-color: #ffffff !important;
    transform: none !important;
}

#al-cookie-consent .al-cookie-btn.al-cookie-btn-reject:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

#al-cookie-consent .al-cookie-btn.al-cookie-btn-reject:active {
    background: #f0f0f0 !important;
    color: #2a2a2a !important;
}

/* ----------------------------------------
   ACCEPT BUTTON - Secondary (White Filled)
   Default: white bg, dark text
   Hover: #5A4F42 bg (Primary), white text
   ---------------------------------------- */
#al-cookie-consent .al-cookie-btn.al-cookie-btn-accept {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #18181b !important;
    border: 0.5px solid #18181b !important;
    border-style: solid !important;
    border-width: 0.5px !important;
    border-color: #18181b !important;
}

#al-cookie-consent .al-cookie-btn.al-cookie-btn-accept:hover {
    background: #5A4F42 !important;
    background-color: #5A4F42 !important;
    color: #ffffff !important;
    border-color: #5A4F42 !important;
    transform: none !important;
}

#al-cookie-consent .al-cookie-btn.al-cookie-btn-accept:focus {
    outline: 0px solid #ffffff !important;
    outline-offset: 2px !important;
}

#al-cookie-consent .al-cookie-btn.al-cookie-btn-accept:active {
    background: #4a4035 !important;
    color: #ffffff !important;
}

/* Button Inner Span (if exists) */
#al-cookie-consent .al-cookie-btn span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    color: inherit !important;
}

/* ============================================
   RESPONSIVE - Tablet
   ============================================ */
@media screen and (max-width: 1024px) {
    #al-cookie-consent.al-cookie-banner {
        bottom: 20px !important;
        max-width: 95% !important;
        padding: 0 16px !important;
    }
    
    #al-cookie-consent .al-cookie-container {
        padding: 12px 24px !important;
        gap: 20px !important;
    }
    
    #al-cookie-consent .al-cookie-content {
        gap: 16px !important;
    }
    
    #al-cookie-consent .al-cookie-actions {
        gap: 16px !important;
    }
    
    #al-cookie-consent .al-cookie-btn {
        padding: 10px 20px !important;
    }
}

/* ============================================
   RESPONSIVE - Mobile (Stacked Layout)
   ============================================ */
@media screen and (max-width: 768px) {
    #al-cookie-consent.al-cookie-banner {
        bottom: 16px !important;
        padding: 0 16px !important;
        max-width: 100% !important;
    }
    
    #al-cookie-consent .al-cookie-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 20px 24px !important;
    }
    
    #al-cookie-consent .al-cookie-content {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    
    #al-cookie-consent .al-cookie-icon {
        margin-top: 2px !important;
    }
    
    #al-cookie-consent .al-cookie-title {
        font-size: 16px !important;
    }
    
    #al-cookie-consent .al-cookie-description {
        font-size: 14px !important;
    }
    
    #al-cookie-consent .al-cookie-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    
    #al-cookie-consent .al-cookie-privacy-link {
        align-self: flex-start !important;
        font-size: 14px !important;
    }
    
    #al-cookie-consent .al-cookie-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    
    #al-cookie-consent .al-cookie-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
        width: 100% !important;
    }
}

/* ============================================
   RESPONSIVE - Small Mobile
   ============================================ */
@media screen and (max-width: 480px) {
    #al-cookie-consent.al-cookie-banner {
        bottom: 12px !important;
        padding: 0 12px !important;
    }
    
    #al-cookie-consent .al-cookie-container {
        padding: 16px 20px !important;
        border-radius: 16px !important;
    }
    
    #al-cookie-consent .al-cookie-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 12px !important;
    }
    
    #al-cookie-consent .al-cookie-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    #al-cookie-consent .al-cookie-buttons {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    #al-cookie-consent.al-cookie-banner,
    #al-cookie-consent .al-cookie-btn,
    #al-cookie-consent .al-cookie-privacy-link {
        transition: none !important;
        animation: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    #al-cookie-consent .al-cookie-container {
        background: rgba(0, 0, 0, 0.95) !important;
        border: 2px solid #ffffff !important;
    }
    
    #al-cookie-consent .al-cookie-btn.al-cookie-btn-reject {
        border-width: 2px !important;
    }
}

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */
@keyframes al-cookie-slide-up {
    0% {
        opacity: 0 !important;
        transform: translateX(-50%) translateY(30px) !important;
    }
    100% {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ============================================
   PRINT - Hide Banner
   ============================================ */
@media print {
    #al-cookie-consent.al-cookie-banner {
        display: none !important;
    }
}