/*
Theme Name: VitalPlus
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 1.0.1698393319
Updated: 2023-10-27 09:55:19

*/

body.single-product div.product div.images img {
    width: 100%!important;
    object-fit: contain;
    max-height: 375px!important;
}

/**
 * COOKIEYES VITALPLUS - VÉGSŐ VERZIÓ
 * Minden javítással, tiszta kód
 * Telepítés: WordPress Admin → Megjelenés → Testreszabás → További CSS
 * Dátum: 2026-03-16
 */

/* ============================================
   1. BANNER - Fehér háttér, narancs border
   ============================================ */
.cky-consent-container {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 2px solid #F27718 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(242, 119, 24, 0.2) !important;
    padding: 28px 24px 24px !important;
    max-width: 440px !important;
}

.cky-consent-bar {
    background: transparent !important;
    border: none !important;
}


/* ============================================
   2. X GOMB - Narancs, jól látható
   ============================================ */
.cky-banner-btn-close {
    position: absolute !important;
    top: 34px !important;
    right: 30px !important;
    color: #F27718 !important;
    background: rgba(242, 119, 24, 0.1) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.cky-banner-btn-close:hover {
    background: rgba(242, 119, 24, 0.2) !important;
    border-color: #F27718 !important;
    transform: scale(1.1) !important;
}


/* ============================================
   3. SZÖVEGEK
   ============================================ */
.cky-title {
    color: #333333 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    margin-right: 40px !important;
}

.cky-notice-des,
.cky-notice-group p {
    color: #555555 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.cky-notice-des a {
    color: #F27718 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}


/* ============================================
   4. GOMBOK
   ============================================ */
.cky-notice-btn-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

/* PRIMARY - Narancs */
.cky-btn-accept,
.cky-btn-accept-all {
    background: linear-gradient(135deg, #F27718 0%, #FF8C00 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 15px 28px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: 0 5px 18px rgba(242, 119, 24, 0.35) !important;
    transition: all 0.3s ease !important;
}

.cky-btn-accept:hover {
    transform: translateY(-2px) !important;
}

/* REJECT - Fehér + Narancs border */
.cky-btn-reject {
    background: #FFFFFF !important;
    color: #F27718 !important;
    border: 2px solid #F27718 !important;
    border-radius: 10px !important;
    padding: 13px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 100% !important;
    cursor: pointer !important;
}

/* CUSTOMIZE - Fehér + Zöld border */
.cky-btn-customize {
    background: #FFFFFF !important;
    color: #6B8E23 !important;
    border: 2px solid #6B8E23 !important;
    border-radius: 10px !important;
    padding: 13px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 100% !important;
    cursor: pointer !important;
}


/* ============================================
   5. POWERED BY COOKIEYES
   ============================================ */
.cky-powered-by,
.cky-powered-by-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 11px !important;
    color: #888888 !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid #E0E0E0 !important;
    text-align: center !important;
}

.cky-powered-by a {
    color: #F27718 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.cky-powered-by a:hover {
    text-decoration: underline !important;
}

.cky-powered-by img {
    display: inline-block !important;
    opacity: 1 !important;
    height: 14px !important;
}


/* ============================================
   6. MODAL - Fehér, narancs header
   ============================================ */
.cky-modal {
    background: rgba(0, 0, 0, 0.75) !important;
}

.cky-modal-dialog {
    background: #FFFFFF !important;
    border: 3px solid #F27718 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    max-width: 600px !important;
}

.cky-modal-header {
    background: linear-gradient(135deg, #F27718 0%, #FF8C00 100%) !important;
    color: #FFFFFF !important;
    padding: 20px 24px !important;
    border-radius: 13px 13px 0 0 !important;
}

.cky-modal-title {
    color: #FFFFFF !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

.cky-modal .cky-banner-btn-close {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.cky-modal-body {
    background: #FFFFFF !important;
    padding: 24px !important;
}


/* ============================================
   7. ACCORDION
   ============================================ */
.cky-accordion-item {
    background: #FFFFFF !important;
    border: 2px solid #E5E5E5 !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
}

.cky-accordion-header {
    background: #FAFAFA !important;
    padding: 16px 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.cky-accordion-header:hover {
    background: #FFF5EB !important;
}

.cky-accordion-header h4 {
    color: #333333 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    flex: 1 !important;
}

.cky-accordion-header .cky-switch-input {
    margin-left: auto !important;
}

.cky-accordion-body {
    background: #FFFFFF !important;
    padding: 20px !important;
    color: #666666 !important;
}


/* ============================================
   8. TOGGLE SWITCHES - Zöld
   ============================================ */
.cky-switch-input {
    width: 54px !important;
    height: 28px !important;
}

.cky-switch {
    background-color: #CCCCCC !important;
    border-radius: 28px !important;
    transition: all 0.4s ease !important;
}

.cky-switch::before {
    background-color: #FFFFFF !important;
    height: 22px !important;
    width: 22px !important;
    border-radius: 50% !important;
    transition: all 0.4s ease !important;
}

input[type="checkbox"]:checked + .cky-switch {
    background-color: #6B8E23 !important;
}

input[type="checkbox"]:checked + .cky-switch::before {
    transform: translateX(26px) !important;
}


/* ============================================
   9. MODAL FOOTER
   ============================================ */
.cky-modal-footer {
    background: #F9F9F9 !important;
    padding: 20px 24px !important;
    border-top: 2px solid #E5E5E5 !important;
}

.cky-btn-preferences,
.cky-btn-save {
    background: linear-gradient(135deg, #F27718 0%, #FF8C00 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}


/* ============================================
   10. REVISIT BUTTON - 🍪 Bal alsó sarok
   ============================================ */
.cky-btn-revisit-wrapper {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 999999 !important;
    background: linear-gradient(135deg, #F27718 0%, #FF8C00 100%) !important;
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    box-shadow: 0 6px 20px rgba(242, 119, 24, 0.4) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cky-btn-revisit-wrapper:hover {
    transform: translateY(-4px) scale(1.05) !important;
}

.cky-btn-revisit {
    color: #FFFFFF !important;
    font-size: 24px !important;
}




/* ============================================
   11. MOBIL OPTIMALIZÁLÁS
   ============================================ */
@media (max-width: 768px) {
    .cky-consent-container {
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 24px 20px 20px !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }
    
    .cky-title {
        font-size: 18px !important;
    }
    
    .cky-banner-btn-close {
        width: 36px !important;
        height: 36px !important;
    }
    
    .cky-btn-accept,
    .cky-btn-reject,
    .cky-btn-customize {
        padding: 14px 20px !important;
    }
    
    .cky-modal-dialog {
        max-width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    .cky-btn-revisit-wrapper {
        width: 52px !important;
        height: 52px !important;
        bottom: 16px !important;
        left: 16px !important;
    }
}


/* ============================================
   12. DARK MODE LETILTÁSA
   ============================================ */
@media (prefers-color-scheme: dark) {
    .cky-consent-container,
    .cky-modal-dialog,
    .cky-modal-body,
    .cky-accordion-item,
    .cky-accordion-header,
    .cky-accordion-body {
        background: #FFFFFF !important;
        color: #333333 !important;
    }
    
    .cky-modal-header {
        background: linear-gradient(135deg, #F27718 0%, #FF8C00 100%) !important;
    }
    
    .cky-title {
        color: #333333 !important;
    }
    
    .cky-modal-title {
        color: #FFFFFF !important;
    }
}


/* ============================================
   13. ANIMÁCIÓK
   ============================================ */
.cky-consent-container {
    animation: slideUp 0.5s ease-out !important;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* ============================================
   VÉGE - Minden javítva!
   ============================================ */