/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 09 2026 | 01:02:45 */
/* ========================================================================
FILNAMN: [CSS] – Konto: Byt Plan-knappar
BESKRIVNING: 
Design för "Smarta knappar" som används via shortcode när medlemmar 
ska byta eller uppgradera sin prenumerationsplan.

Hanterar två tillstånd:
1. .sp-select: Valbar plan (Vit knapp, grön text, klickbar).
2. .sp-current: Nuvarande plan (Utgråad, ej klickbar).
========================================================================
*/

/* --- 1. GEMENSAM GRUNDSTIL --- */
.sp-plan-btn {
    display: block; /* Gör att den fyller raden (minus marginaler) */
    
    /* Layout & Luft */
    /* Vi sätter 0px uppe/nere, och 50px höger/vänster för att centrera snyggt */
    margin: 0 50px; 
    
    /* Inneravstånd (textens luft inuti knappen) */
    padding: 15px 30px;
    
    /* Typsnitt & Text */
    font-family: "Poppins", "proxima_nova_regular", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    
    /* Form & Beteende */
    border-radius: 4px;
    transition: all .3s;
    box-sizing: border-box;
    cursor: pointer;
}

/* --- 2. DEN AKTIVA KNAPPEN (VÄLJ DENNA) --- */
/* Vit bakgrund, Grön text */
.sp-plan-btn.sp-select {
    background-color: #FFFFFF;
    color: #3D5F42;
    fill: #3D5F42;
    border: 1px solid #FFFFFF; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Liten, knappt synlig skugga för lyft */
}

/* Hover-effekt för aktiva knappen */
.sp-plan-btn.sp-select:hover {
    background-color: #f9f9f9; /* Mycket subtil ändring vid hover */
    color: #2e4a32; /* Lite mörkare grön text */
}

/* --- 3. DEN INAKTIVA KNAPPEN (NUVARANDE PLAN) --- */
/* Grå bakgrund, inaktiverad */
.sp-plan-btn.sp-current {
    background-color: #E5E5E5;
    color: #888888;
    border: 1px solid #DCDCDC;
    cursor: default;
    pointer-events: none;
    opacity: 0.8;
}

/* --- 4. MOBILANPASSNING --- */
@media screen and (max-width: 768px) {
    /* Minska sidomarginalerna på små skärmar så knappen inte blir för smal */
    .sp-plan-btn {
        margin: 0 20px; 
    }
}