/**
 * Fil: ctm-public.css
 * Sökväg: public/css/ctm-public.css
 * Syfte: Styling för cookie-bannern och återkallningsikonen.
 */

/* 
 * Använd bibliotekets CSS-variabler för att styra färgerna på ett korrekt sätt.
 * Detta säkerställer att alla knappar av typen 'primary' (Acceptera alla) blir gröna.
 */
/* 
 * Använd bibliotekets CSS-variabler för att styra färgerna på ett korrekt sätt.
 */
#cc-main {
    /* Primär knapp (Acceptera alla) */
    --cc-btn-primary-bg: #9CDE9F;
    --cc-btn-primary-border-color: #9CDE9F;
    --cc-btn-primary-hover-bg: #8BCD8E;
    --cc-btn-primary-hover-border-color: #8BCD8E;
    --cc-btn-primary-color: #000000; /* Svart text för läsbarhet */

    /* Sekundär knapp (Endast nödvändiga / Spara val) */
    --cc-btn-secondary-bg: #eaeff2;
    --cc-btn-secondary-border-color: #eaeff2;
    --cc-btn-secondary-hover-bg: #d4dae0;
    --cc-btn-secondary-hover-border-color: #d4dae0;
    --cc-btn-secondary-color: #2c2f31;
}

/* Ta bort border på alla knappar och tvinga stil i modalen */
#cc-main .cm__btn,
#cc-main .pm__btn {
    border: none !important;
    box-shadow: none !important;
    color: #000000 !important; /* Alltid svart text för läsbarhet */
}

/* Tvinga ALLA knappar i Preferences Modal (modalen) att vara gråa */
#cc-main .pm__btn {
    background-color: var(--cc-btn-secondary-bg) !important;
}

#cc-main .pm__btn:hover {
    background-color: var(--cc-btn-secondary-hover-bg) !important;
}

/* Diskret återkallningsikon (Infälld längst ner till vänster) */
#ctm-recall-icon {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    background-color: #9CDE9F;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: none;
    padding: 0;
    outline: none;
    opacity: 0; /* Börja som dold */
    visibility: hidden;
    transform: translateY(20px);
}

/* Visas via JS när man scrollat ner */
#ctm-recall-icon.is-visible {
    opacity: 0.8;
    visibility: visible;
    transform: translateY(0);
}

#ctm-recall-icon.is-visible:hover {
    opacity: 1;
    transform: translateY(-2px);
    background-color: #8BCD8E;
}

#ctm-recall-icon svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

/* Mobilanpassning för återkallningsikonen */
@media screen and (max-width: 768px) {
    #ctm-recall-icon {
        bottom: 5px;
        left: 5px;
        width: 28px;
        height: 28px;
    }
    #ctm-recall-icon svg {
        width: 14px;
        height: 14px;
    }
}

/* Dölj ikonen när bannern är öppen */
body.cc--active #ctm-recall-icon {
    display: none;
}