/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 14 2026 | 09:59:37 */
/* ==========================================================================
   DEL 1: MODALEN (POPUP-RUTAN)
   ========================================================================== */

/* Bakgrunden (mörk overlay) */
.collection-modal-overlay {
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

/* Själva boxen */
.collection-modal-box {
    background-color: #fff;
    padding: 0;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    font-family: 'Proxima Nova', sans-serif; 
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

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

/* Header */
.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
}
.modal-header h3 { margin: 0; font-size: 18px; color: #333; font-family: 'Montserrat', sans-serif; font-weight: 600; }
.close-modal { font-size: 24px; cursor: pointer; color: #999; line-height: 1; }
.close-modal:hover { color: #333; }

/* Body */
.modal-body { padding: 20px; }

/* Listan */
.existing-collections-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
}
.collection-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.2s;
}
.collection-item:hover { background-color: #f0f7f1; }
.collection-item:last-child { border-bottom: none; }
.collection-checkbox { margin-right: 12px; transform: scale(1.2); accent-color: #3D5F42; }
.collection-name { font-size: 15px; color: #444; }

/* Skapa ny */
.create-new-collection-area {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
#new-collection-name {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}
.btn-create-small {
    background-color: #3D5F42;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.btn-create-small:hover { background-color: #2c4630; }


/* ==========================================================================
   DEL 2: DESIGN AV SPARA-KNAPPEN (Detta var det som saknades!)
   ========================================================================== */

.btn-spara-samling {
    /* Grunddesign */
    background-color: #ffffff !important;
    color: #333 !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    
    /* Text och Font */
    font-family: 'Proxima Nova', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    
    /* Skugga och Layout */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    
    /* Återställ eventuella konstigheter */
    height: auto !important;
    line-height: normal !important;
    text-decoration: none !important;
}

.btn-spara-samling:hover {
    background-color: #f2f2f2 !important;
    transform: translateY(-1px);
}

.btn-spara-samling i {
    font-size: 16px !important;
    color: #3D5F42 !important; /* Grön ikon som standard */
}

/* --- SPARAD STATUS (Grön Knapp) --- */
.btn-spara-samling.saved {
    background-color: #3D5F42 !important; /* Grön bakgrund */
    color: #ffffff !important; /* Vit text */
}

.btn-spara-samling.saved i {
    color: #ffffff !important; /* Vit ikon */
}


/* ==========================================================================
   DEL 3: POSITIONERINGS-FIX (Spara + Hjärta på rad)
   ========================================================================== */

/* 1. Behållaren - Tvingar fram flexbox och högerställer allt */
.recept-heart-overlay {
    display: flex !important;
    flex-direction: row !important; /* Lägg på rad */
    align-items: center !important; /* Centrera vertikalt */
    justify-content: flex-end !important; /* Tryck allt mot högerkanten */
    gap: 12px !important; /* Avståndet mellan knapparna */
    
    /* Placering av hela paketet */
    position: absolute !important;
    right: 15px !important;
    top: 15px !important;
    z-index: 99 !important; 
    
    /* Säkerställ att behållaren inte är "ivägen" för klick runt omkring */
    pointer-events: none; 
    width: auto !important;
    height: auto !important;
    background: transparent !important;
}

/* 2. Nollställ ALLA element inuti behållaren så de hamnar rätt */
.recept-heart-overlay > *,
.recept-heart-overlay button,
.recept-heart-overlay a,
.recept-heart-overlay span,
.recept-heart-overlay .simplefavorite-button { 
    
    /* Döda absolut positionering från plugins */
    position: relative !important; 
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    
    /* Nollställ marginaler */
    margin: 0 !important;
    float: none !important;
    transform: none !important;
    
    /* Aktivera klick igen */
    pointer-events: auto !important;
    
    /* Z-index */
    z-index: 100 !important;
}


/* ==========================================================================
   MINA SAMLINGAR (GRID & KORT)
   Används av shortcoden [visa_mina_samlingar]
   ========================================================================== */

/* Grid-container */
.my-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Kortet */
.collection-card {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-decoration: none !important; /* Ta bort understrykning på länken */
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.collection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: #3D5F42;
}

.collection-card-inner {
    padding: 25px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Ikonen (Mapp) */
.collection-icon {
    font-size: 32px;
    color: #3D5F42;
    margin-bottom: 5px;
}

/* Titeln */
.collection-title {
    font-family: 'Montserrat', sans-serif; /* Eller din rubrik-font */
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.3;
}

/* Antal recept */
.collection-count {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 13px;
    color: #888;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 12px;
}

/* Meddelande om tomt */
.no-collections-msg {
    text-align: center;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px dashed #ccc;
}

/* ==========================================================================
   MOBILANPASSNING (Gör knappen rund som hjärtat i mobilen)
   ========================================================================== */

@media only screen and (max-width: 768px) {
    
    /* 1. Gör knappen rund och liten (Matchar hjärtats mått: 36px) */
    .btn-spara-samling {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important; /* Gör den cirkelformad */
        justify-content: center !important; /* Centrera ikonen */
        gap: 0 !important; /* Inget mellanrum behövs */
        
        /* Matcha skuggan från hjärtat för samma 3D-känsla */
        box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important; 
    }

    /* 2. Dölj texten "SPARA I SAMLING" / "SPARAD" */
    .btn-spara-samling .btn-text {
        display: none !important;
    }

    /* 3. Justera ikonen så den hamnar perfekt i mitten */
    .btn-spara-samling i {
        font-size: 16px !important; /* Samma storlek som desktop */
        margin: 0 !important;
    }
    
    /* 4. Justera avståndet mellan de två runda knapparna */
    .recept-heart-overlay {
        gap: 8px !important; /* Lite tajtare mellan bollarna i mobilen */
        right: 10px !important; /* Lite närmare kanten */
        top: 10px !important;
    }
}