/* Hebrew Cookie Consent Plugin - Frontend Styles */
/* All classes prefixed with "hcc-" to avoid conflicts */

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* ========================================= */
/* MAIN COOKIE CONSENT STYLES */
/* ========================================= */

/* Main Cookie Banner */
.hcc-cookie-banner {
    position: fixed !important;
    background: white !important;
    color: #1f2937 !important;
    padding: 24px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    z-index: 9999999999 !important;
    display: none !important;
    direction: rtl !important;
    width: 380px !important;
    max-width: calc(100vw - 40px) !important;
    border: 1px solid #e5e7eb !important;
    opacity: 0 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hcc-cookie-banner.hcc-show {
    display: block !important;
    opacity: 1 !important;
}

/* Banner Position Variations */
.hcc-cookie-banner.hcc-position-left {
    left: 20px !important;
    right: auto !important;
    transform: translateX(0) translateY(20px) !important;
}

.hcc-cookie-banner.hcc-position-left.hcc-show {
    transform: translateX(0) translateY(0) !important;
}

.hcc-cookie-banner.hcc-position-right {
    right: 20px !important;
    left: auto !important;
    transform: translateX(0) translateY(20px) !important;
}

.hcc-cookie-banner.hcc-position-right.hcc-show {
    transform: translateX(0) translateY(0) !important;
}

.hcc-cookie-banner.hcc-position-center {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(20px) !important;
}

.hcc-cookie-banner.hcc-position-center.hcc-show {
    transform: translateX(-50%) translateY(0) !important;
	z-index: 99999999999 !important;	
}

.hcc-cookie-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    gap: 8px !important;
    position: relative !important;
}

.hcc-close-btn {
    position: absolute !important;
    top: -8px !important;
    left: -8px !important;
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.hcc-close-btn:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
    transform: scale(1.1) !important;
}

.hcc-cookie-icon {
    font-size: 24px !important;
    filter: brightness(0.9) !important;
}

.hcc-cookie-banner h3 {
    margin: 0 !important;
    font-size: var(--hcc-h3-font-size, 17px) !important;
    font-weight: 600 !important;
    color: #111827 !important;
    text-align: center !important;
}

.hcc-cookie-banner p {
    margin: 0 0 24px 0 !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
    text-align: center !important;
    font-size: var(--hcc-p-font-size, 16px) !important;
}

.hcc-cookie-banner p a {
    color: #1f2937 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

.hcc-cookie-banner p a:hover {
    color: #111827 !important;
}

.hcc-cookie-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.hcc-cookie-btn {
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

.hcc-cookie-btn.hcc-accept {
    background: #1f2937 !important;
    color: white !important;
    order: 1 !important;
}

.hcc-cookie-btn.hcc-accept:hover {
    background: #111827 !important;
    transform: translateY(-1px) !important;
}

.hcc-cookie-btn.hcc-reject {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    order: 2 !important;
}

.hcc-cookie-btn.hcc-reject:hover {
    background: #e5e7eb !important;
}

.hcc-cookie-btn.hcc-preferences {
    background: #485872 !important;
    color: white !important;
    order: 3 !important;
}

.hcc-cookie-btn.hcc-preferences:hover {
    background: #425778 !important;
    transform: translateY(-1px) !important;
}

.hcc-cookie-btn.hcc-privacy {
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    order: 4 !important;
}

.hcc-cookie-btn.hcc-privacy:hover {
    color: #374151 !important;
    text-decoration: underline !important;
}

/* Button Color Customization */
.hcc-cookie-banner {
    --hcc-accept-bg: #1f2937 !important;
    --hcc-reject-bg: #f3f4f6 !important;
    --hcc-preferences-bg: #485872 !important;
    --hcc-accept-text-color: #ffffff !important;
    --hcc-reject-text-color: #ffffff !important;
    --hcc-preferences-text-color: #ffffff !important;
}

/* Custom button colors can be overridden via inline styles */
.hcc-cookie-btn.hcc-accept.hcc-custom-color {
    background: var(--hcc-accept-color, var(--hcc-accept-bg)) !important;
    color: var(--hcc-accept-text-color, #ffffff) !important;
}

.hcc-cookie-btn.hcc-reject.hcc-custom-color {
    background: var(--hcc-reject-color, var(--hcc-reject-bg));
    color: var(--hcc-reject-text-color, #ffffff);
    border: none ;
}

.hcc-cookie-btn.hcc-preferences.hcc-custom-color {
    background: var(--hcc-preferences-color, var(--hcc-preferences-bg)) !important;
    color: var(--hcc-preferences-text-color, #ffffff) !important;
}

/* Privacy Policy Modal */
.privacy-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 99999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.privacy-modal-overlay.hcc-show {
    display: flex !important;
	z-index: 999999999 !important;
}

.privacy-modal {
    background: white !important;
    max-width: 800px !important;
    width: 100% !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.privacy-modal-header {
    background: #f8f9fa !important;
    padding: 20px !important;
    border-bottom: 1px solid #e9ecef !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.privacy-modal-header h2 {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #333 !important;
    direction: rtl !important;
    text-align: right !important;
}

.header-buttons {
    display: flex !important;
    gap: 10px !important;
}

.close-btn {
    background: none !important;
    border: none !important;
    font-size: 32px !important;
    color: #666 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.close-btn:hover {
    background: #e9ecef !important;
    color: #333 !important;
    transform: scale(1.1) !important;
}

/* Print Button Styles */
.print-btn {
    background: none !important;
    border: none !important;
    color: #666 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.print-btn:hover {
    background: #e9ecef !important;
    color: #333 !important;
    transform: scale(1.1) !important;
}

.print-btn svg {
    width: 20px !important;
    height: 20px !important;
}

.privacy-modal-content {
    padding: 20px !important;
    max-height: calc(90vh - 100px) !important;
    overflow-y: auto !important;
    direction: rtl !important;
    text-align: right !important;
    line-height: 1.6 !important;
    color: #444 !important;
}

.privacy-modal-content h3 {
    font-size: var(--hcc-h3-font-size, 20px) !important;
    font-weight: bold !important;
    margin: 20px 0 10px 0 !important;
    color: #333 !important;
}

.privacy-modal-content p {
    margin-bottom: 15px !important;
    font-size: var(--hcc-p-font-size, 16px) !important;
}

.cookie-consent-logo {
    height: 40px !important;
    width: auto !important;
    margin-left: 10px !important;
}

/* Preferences Modal */
.hcc-preferences-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 99999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    backdrop-filter: blur(4px) !important;
}

.hcc-preferences-modal.hcc-show {
    display: flex !important;
	z-index: 999999999 !important;
}

.hcc-preferences-content {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    max-width: 500px !important;
    width: 100% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    direction: rtl !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
    text-align: right !important;
}

.hcc-preferences-content h3 {
    margin: 0 0 24px 0 !important;
    color: #111827 !important;
    font-size: var(--hcc-h3-font-size, 20px) !important;
    font-weight: 600 !important;
    text-align: center !important;
}

.hcc-preference-category {
    margin-bottom: 20px !important;
    padding: 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
}

.hcc-preference-category h4 {
    margin: 0 0 8px 0 !important;
    color: #111827 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: var(--hcc-h4-font-size, 15px) !important;
    font-weight: 600 !important;
}

.hcc-preference-category p {
    margin: 0 !important;
    color: #6b7280 !important;
    font-size: var(--hcc-text-font-size, 13px) !important;
    line-height: 1.4 !important;
}

.hcc-toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}

.hcc-toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.hcc-toggle-slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #d1d5db !important;
    border-radius: 24px !important;
    transition: .3s !important;
}

.hcc-toggle-slider:before {
    position: absolute !important;
    content: "" !important;
    height: 20px !important;
    width: 20px !important;
    left: 2px !important;
    bottom: 2px !important;
    background-color: white !important;
    border-radius: 50% !important;
    transition: .3s !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

input:checked + .hcc-toggle-slider {
    background-color: #7bb142 !important;
}

input:disabled + .hcc-toggle-slider {
    background-color: #9ca3af !important;
    cursor: not-allowed !important;
}

input:checked + .hcc-toggle-slider:before {
    transform: translateX(20px) !important;
}

.hcc-preferences-buttons {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.hcc-preferences-buttons .hcc-cookie-btn {
    flex: 1 !important;
}

/* Status Messages */
.hcc-status {
    margin: 20px 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-align: center !important;
	font-size: 15px !important;
}

.hcc-status.hcc-accepted {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
}

.hcc-status.hcc-rejected {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .hcc-cookie-banner, 
    .hcc-cookie-banner.hcc-position-left,
    .hcc-cookie-banner.hcc-position-right,
    .hcc-cookie-banner.hcc-position-center {
        width: calc(85vw - 32px) !important;
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        padding: 20px !important;
    }
    
    .hcc-cookie-banner.hcc-show,
    .hcc-cookie-banner.hcc-position-left.hcc-show,
    .hcc-cookie-banner.hcc-position-right.hcc-show,
    .hcc-cookie-banner.hcc-position-center.hcc-show {
        transform: none !important;
    }
    
    .hcc-preferences-content {
        padding: 24px !important;
        margin: 10px !important;
    }
    
    .privacy-modal {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }
    
    .privacy-modal-header {
        padding: 15px !important;
    }
    
    .privacy-modal-header h2 {
        font-size: 20px !important;
    }
    
    .privacy-modal-content {
        padding: 15px !important;
        max-height: calc(90vh - 80px) !important;
    }
}

@media (max-width: 480px) {
    .hcc-preferences-buttons {
        flex-direction: column !important;
    }
    
    .header-buttons {
        gap: 5px !important;
    }
    
    .close-btn,
    .print-btn {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Print Styles for Privacy Policy */
@media print {
    .privacy-modal-overlay {
        position: static !important;
        background: white !important;
        display: block !important;
        z-index: 1 !important;
    }
    
    .privacy-modal {
        box-shadow: none !important;
        max-width: none !important;
        width: 100% !important;
        max-height: none !important;
    }
    
    .privacy-modal-header {
        border-bottom: 2px solid #000 !important;
        background: white !important;
    }
    
    .header-buttons {
        display: none !important;
    }
    
    .privacy-modal-content {
        padding: 20px 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .cookie-consent-logo {
        filter: grayscale(100%) !important;
    }
}

/* Privacy Policy Static Button */
#cookie-manage-consent {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 999999999999 !important;
}

.privacy-btn {
    background: #1f2937 !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px !important;
    animation: mc_slideIn 1s forwards !important;
    transition: all 0.3s ease !important;
    direction: rtl !important;
	z-index: 99999 !important;
}

.privacy-btn:hover {
    background: #111827 !important;
    transform: translateY(-2px) !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 15px 30px, rgba(0, 0, 0, 0.30) 0px 8px 8px !important;
}

@keyframes mc_slideIn {
    0% {
        opacity: 0 !important;
        transform: translateY(50px) !important;
    }
    100% {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* Mobile responsive for privacy button */
@media (max-width: 640px) {
    #cookie-manage-consent {
        left: 10px !important;
        bottom: 10px !important;
    }
    
    .privacy-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* ========================================= */
/* TEMPLATE DESIGNS */
/* ========================================= */


/* Template 3 - Cookie Banner V3 Design (Webflow Style) */
.hcc-cookie-banner.hcc-template3 {
    background: white !important;
    color: var(--hcc-popup-text-color, #374151) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    padding: 32px 24px 24px 24px !important;
    max-width: 340px !important;
    width: 100% !important;
}

.hcc-cookie-banner.hcc-template3 .hcc-cookie-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    position: relative !important;
}

.hcc-cookie-banner.hcc-template3 .hcc-cookie-header img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #FED7AA 0%, #F97316 100%) !important;
    padding: 8px !important;
    margin: 0 !important;
}

.hcc-cookie-banner.hcc-template3 h3 {
    color: var(--hcc-popup-text-color, #111827) !important;
    font-size: var(--hcc-h3-font-size, 18px) !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

.hcc-cookie-banner.hcc-template3 p {
    color: var(--hcc-popup-text-color, #6B7280) !important;
    font-size: var(--hcc-p-font-size, 14px) !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
    font-weight: 400 !important;
}

.hcc-cookie-banner.hcc-template3 p a {
    color: #6366F1 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

.hcc-cookie-banner.hcc-template3 p a:hover {
    color: #4F46E5 !important;
}

.hcc-cookie-banner.hcc-template3 .hcc-cookie-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
}

.hcc-cookie-banner.hcc-template3 .hcc-cookie-btn.hcc-accept {
    background: var(--hcc-accept-color, #6366F1) !important;
    color: var(--hcc-accept-text-color, white);
    border: none !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
    width: 100% !important;
    max-width: 180px !important;
    transition: all 0.2s ease !important;
    order: 1 !important;
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3) !important;
}

.hcc-cookie-banner.hcc-template3 .hcc-cookie-btn.hcc-reject {
    background: var(--hcc-reject-color, #6366F1) !important;
    color: var(--hcc-reject-text-color, white);
    border: none !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
    width: 100% !important;
    max-width: 180px !important;
    transition: all 0.2s ease !important;
    order: 1 !important;
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3) !important;
}

.hcc-cookie-banner.hcc-template3 .hcc-cookie-btn.hcc-preferences  {
    background: var(--hcc-preferences-color, #6366F1) !important;
    color: var(--hcc-preferences-text-color, white);
    border: none !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
    width: 100% !important;
    max-width: 180px !important;
    transition: all 0.2s ease !important;
    order: 1 !important;
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3) !important;
}


.hcc-cookie-banner.hcc-template3 .hcc-cookie-btn.hcc-accept:hover {
    background: var(--hcc-accept-color, #4F46E5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 10px -1px rgba(99, 102, 241, 0.4) !important;
}


.hcc-cookie-banner.hcc-template3 .hcc-close-btn {
    background: transparent !important;
    color: #9CA3AF !important;
    border: none !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.hcc-cookie-banner.hcc-template3 .hcc-close-btn:hover {
    background: #F3F4F6 !important;
    color: #6B7280 !important;
    transform: scale(1.1) !important;
}

/* Template 4 - Full Width Cookie Banner */
.hcc-cookie-banner.hcc-template4 {
    background: #1f1f1f !important;
    color: white !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 15px !important;
    border: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    direction: ltr  !important;
    text-align: right !important;
    position: fixed !important;
    z-index: 10000 !important;
}

.hcc-cookie-banner.hcc-template4.hcc-show {
    transform: none !important;
}

.hcc-cookie-banner.hcc-template4 .hcc-cookie-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: auto !important;
    height: auto !important;
}

.hcc-cookie-banner.hcc-template4 .hcc-cookie-header img {
    display: none !important;
}

.hcc-cookie-banner.hcc-template4 h3 {
    display: none !important;
}

.hcc-cookie-banner.hcc-template4 p {
    color: white !important;
    font-size: var(--hcc-p-font-size, 14px) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1 !important;
    padding-right: 40px !important;
    text-align: right !important;
    direction: rtl !important;
}

.hcc-cookie-banner.hcc-template4 p a {
    color: #4ade80 !important;
    text-decoration: underline !important;
}

.hcc-cookie-banner.hcc-template4 p a:hover {
    color: #22c55e !important;
}

.hcc-cookie-banner.hcc-template4 .hcc-cookie-buttons {
    display: flex !important;
    gap: 15px !important;
    flex-direction: row-reverse !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    order: -1 !important;
}

.hcc-cookie-banner.hcc-template4 .hcc-cookie-btn.hcc-accept {
    background: var(--hcc-accept-color, white) !important;
    color: var(--hcc-accept-text-color, #1f1f1f) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    order: 1 !important;
}

.hcc-cookie-banner.hcc-template4 .hcc-cookie-btn.hcc-accept:hover {
    background: rgb(255 255 255) !important;
    transform: translateY(-1px) !important;
    color: black !important;
}


.hcc-cookie-banner.hcc-template4 .hcc-close-btn {
    background: transparent !important;
    color: white !important;
    border: none !important;
    font-size: 24px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hcc-cookie-banner.hcc-template4 .hcc-status.hcc-accepted {
	background: #ffffff00 !important;
    color: #ffffff !important;
    border: none !important;
}
	
.hcc-cookie-banner.hcc-template4 .hcc-close-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f3f4f6 !important;
}

/* Mobile responsive for template 4 */
@media (max-width: 768px) {
    .hcc-cookie-banner.hcc-template4 {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 20px 15px !important;
        text-align: center !important;
    }
    
    .hcc-cookie-banner.hcc-template4 p {
        padding-right: 0 !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        flex: none !important;
        order: 2 !important;
    }
    
    .hcc-cookie-banner.hcc-template4 .hcc-cookie-buttons {
        order: 1 !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .hcc-cookie-banner.hcc-template4 .hcc-cookie-btn.hcc-accept:hover {
        transform: translateY(-1px) !important;
    }
    
    .hcc-cookie-banner.hcc-template4 .hcc-cookie-header {
        top: 10px !important;
        right: 10px !important;
    }
}

/* Template 5 - GDPR Cookie Consent Banner Design */
.hcc-cookie-banner.hcc-template5 {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
    transform-style: preserve-3d !important;
    opacity: 1 !important;
    left: 32px !important;
    top: auto !important;
    right: auto !important;
    bottom: 32px !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex;
    width: 100% !important;
    max-width: 680px !important;
    padding: 20px 32px !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-pack: justify !important;
    -webkit-justify-content: space-between !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    -webkit-flex-wrap: wrap !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    border-radius: 20px !important;
    background-color: #fff !important;
    box-shadow: 0 6px 23px 0 rgba(20, 20, 43, 0.08) !important;
    color: #4a5568 !important;
    border: none !important;
}

/* Template 5 positioning - respects admin settings */
.hcc-cookie-banner.hcc-template5.hcc-position-left {
    left: 32px !important;
    right: auto !important;
}

.hcc-cookie-banner.hcc-template5.hcc-position-right {
    right: 32px !important;
    left: auto !important;
}

.hcc-cookie-banner.hcc-template5.hcc-position-center {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(20px) !important;
}

.hcc-cookie-banner.hcc-template5.hcc-position-center.hcc-show {
    transform: translateX(-50%) translateY(0) !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-header {
	display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    margin-right: 16px !important;
    align-content: stretch !important;
    justify-content: space-between !important;
    flex-direction: row !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-icon {
    font-size: 32px !important;
    color: #4d65ff !important;
    margin: 0 !important;
}

.hcc-cookie-banner.hcc-template5 h3 {
    display: none !important; /* Hide title for this template */
}

.hcc-cookie-banner.hcc-template5 p {
    color: var(--hcc-popup-text-color, #4a5568) !important;
    font-size: var(--hcc-p-font-size, 15px) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1 !important;
    text-align: right !important;
    margin-right: 24px !important;
	margin-bottom: 20px !important;
}

.hcc-cookie-banner.hcc-template5 p a {
    color: #4d65ff !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

.hcc-cookie-banner.hcc-template5 p a:hover {
    color: #3d52ff !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-buttons {
    display: flex !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-btn.hcc-accept {
    background: var(--hcc-accept-color, #4d65ff) !important;
    color: var(--hcc-accept-text-color, white) !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    order: 1 !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-btn.hcc-accept:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-btn.hcc-preferences {
    background: var(--hcc-preferences-color, #485872) !important;
    color: var(--hcc-preferences-text-color, white) !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
    white-space: nowrap !important;
    order: 3 !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-btn.hcc-preferences:hover {
    opacity: 0.9 !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-btn.hcc-reject {
    background: var(--hcc-reject-color, #f3f4f6);
    color: var(--hcc-reject-text-color, #374151);
    border: none !important;
    border-radius: 24px !important;
    padding: 10px 36px !important;
    font-weight: 500 !important;
    font-size: var(--hcc-button-font-size, 14px);
    white-space: nowrap !important;
    order: 2 !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-cookie-btn.hcc-reject:hover {
    opacity: 0.8 !important;
}



.hcc-cookie-banner.hcc-template5 .hcc-close-btn {
    background: transparent !important;
    color: #9ca3af !important;
    border: none !important;
    font-size: 22px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    order: 2 !important;
}

.hcc-cookie-banner.hcc-template5 .hcc-close-btn:hover {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    transform: scale(1.1) !important;
}

/* Mobile responsive for template 5 */
@media (max-width: 768px) {
    .hcc-cookie-banner.hcc-template5.hcc-position-left,
    .hcc-cookie-banner.hcc-template5.hcc-position-right,
    .hcc-cookie-banner.hcc-template5.hcc-position-center {
        left: 16px !important;
        right: 16px !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        transform: none !important;
    }
    
    .hcc-cookie-banner.hcc-template5 {
        padding: 16px 20px !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .hcc-cookie-banner.hcc-template5 .hcc-cookie-header {
        margin-right: 0 !important;
        align-self: flex-start !important;
    }
    
    .hcc-cookie-banner.hcc-template5 p {
        font-size: var(--hcc-p-font-size, 14px) !important;
        margin-right: 0 !important;
        text-align: center !important;
        flex: none !important;
    }
    
    .hcc-cookie-banner.hcc-template5 .hcc-cookie-buttons {
        justify-content: flex-start !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    .hcc-cookie-banner.hcc-template5 .hcc-close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        order: initial !important;
    }
}

/* Template 6 - Clean Modal with Blue Accent */
.hcc-cookie-banner.hcc-template6 {
    background: white !important;
    color: var(--hcc-popup-text-color, #333) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    padding: 28px !important;
}

.hcc-cookie-banner.hcc-template6 h3 {
    color: var(--hcc-popup-text-color, #333) !important;
    font-size: var(--hcc-h3-font-size, 18px) !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
    text-align: center !important;
}

.hcc-cookie-banner.hcc-template6 p {
    color: var(--hcc-popup-text-color, #666) !important;
    font-size: var(--hcc-p-font-size, 14px) !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.hcc-cookie-banner.hcc-template6 .hcc-cookie-btn.hcc-accept {
    background: var(--hcc-accept-color, linear-gradient(135deg, #667eea 0%, #764ba2 100%)) !important;
    color: var(--hcc-accept-text-color, white) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.hcc-cookie-banner.hcc-template6 .hcc-cookie-btn.hcc-accept:hover {
    opacity: 0.9 !important;
}

.hcc-cookie-banner.hcc-template6 .hcc-cookie-btn.hcc-accept::before {
    content: "✓" !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.hcc-cookie-banner.hcc-template6 .hcc-cookie-btn.hcc-reject {
    background: var(--hcc-reject-color, #f3f4f6) !important;
    color: var(--hcc-reject-text-color, #374151) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
}

.hcc-cookie-banner.hcc-template6 .hcc-cookie-btn.hcc-reject:hover {
    opacity: 0.8 !important;
}

.hcc-cookie-banner.hcc-template6 .hcc-cookie-btn.hcc-preferences {
    background: var(--hcc-preferences-color, #485872) !important;
    color: var(--hcc-preferences-text-color, white) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    font-size: var(--hcc-button-font-size, 14px) !important;
}

.hcc-cookie-banner.hcc-template6 .hcc-cookie-btn.hcc-preferences:hover {
    opacity: 0.9 !important;
}

.hcc-cookie-banner.hcc-template6 .hcc-close-btn {
    background: transparent !important;
    color: var(--hcc-popup-text-color, #333) !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 300 !important;
}

/* End of Frontend CSS */