/* =============================================================================
   Knappar
   =============================================================================

   Den primära knappen var en 230 tecken lång Tailwind-sträng som upprepades vid
   varje anrop — !rounded-xl !bg-action px-8 py-3 font-bold !text-white shadow-md
   ... och så vidare, med små avvikelser mellan kopiorna. Nu en klass.

   ---------------------------------------------------------------------------
   VARFÖR FILEN LADDAS EFTER MUDBLAZOR

   Reglerna låg först i partner-tokens.css, som länkas FÖRE MudBlazors CSS. Det
   fungerade för allt utom ett: MudBlazor färgar en avstängd knapp grå med
   `.mud-button-root.mud-disabled`, som väger tyngre än `.pp-btn-primary` och
   dessutom kom senare i källordningen. Texten på den avstängda knappen blev grå
   på lila och gick knappt att läsa.

   Den här filen länkas efter Mud, tillsammans med partner-forms.css, och vinner
   därför på källordning. Samma skäl, samma plats i kedjan.

   ---------------------------------------------------------------------------
   OM !important

   MudButton sätter fyllning, rundning och textfärg med hög specificitet. Det här
   är en överstyrning av ett komponentbibliotek, inte vanlig kaskad. De försvinner
   den dag Mud lyfts ur knapplagret, och då är det den här filen som raderas.
   ============================================================================= */

/* Toningen är huvudsajtens handlingstoning, 135 grader, och den finns av ett
   praktiskt skäl utöver släktskapet: #6b21a8 är också ett av dukens fem
   gradientstopp, så en platt knapp i den färgen står periodvis mot nästan sig
   själv. En toning har alltid en kant som skiljer sig från underlaget. */
.pp-btn-primary {
    background: linear-gradient(135deg, rgb(var(--pp-brand-800)) 0%, rgb(var(--pp-brand-900)) 100%) !important;
    color: rgb(var(--pp-action-contrast)) !important;
    border-radius: var(--pp-radius) !important;
    padding: 0.75rem 2rem !important;
    font-weight: 800 !important;
    box-shadow: var(--pp-shadow) !important;
    transition: transform 300ms var(--pp-ease-lift), box-shadow 300ms var(--pp-ease-lift), filter 300ms var(--pp-ease-lift) !important;
}

    /* Lyft två pixlar och ljusare toning — huvudsajtens knappbeteende. Inte en
       färgväxling: en knapp som byter färg vid hover läser som två knappar. */
    .pp-btn-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        filter: brightness(1.12);
        box-shadow: var(--pp-shadow-lift) !important;
    }

    .pp-btn-primary:active:not(:disabled) {
        transform: scale(0.98);
    }

    /* Avstängd, men fortfarande läsbar. Texten hålls vit med flit: en avstängd
       knapp ska gå att läsa, annars kan man inte se vad det är man inte får göra
       ännu. Dämpningen sköts av opaciteten och avfärgningen. */
    .pp-btn-primary:disabled,
    .pp-btn-primary.mud-disabled {
        color: rgb(var(--pp-action-contrast)) !important;
        opacity: 0.5;
        filter: grayscale(0.4);
        box-shadow: none !important;
        transform: none;
    }

/* -----------------------------------------------------------------------------
   Språkväljaren — en segmenterad kontroll

   Reglerna låg i ett <style>-block inuti Header.razor, men Footer.razor renderar
   samma kontroll. Den fungerade bara därför att sidhuvudet råkar finnas på varje
   sida: hade footern någon gång visats utan header hade språkväljaren där nere
   ritats som tre nakna knappar.

   Färgerna var dessutom hårdkodade hexvärden — #1f2937, #374151, #9ca3af,
   #6b21a8 — mitt i en portal där allt annat läser tokens.
   -------------------------------------------------------------------------- */

.lang-selector-bg {
    display: flex;
    width: 100%;
    padding: 4px;
    background-color: rgb(var(--pp-chrome-raised));
    border: 1px solid rgb(var(--pp-chrome-line));
    border-radius: var(--pp-radius);
}

.lang-option-btn {
    flex: 1;
    padding: 10px 4px;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    color: var(--pp-fg-faint);
    background: none;
    border: none;
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    transition: all 200ms var(--pp-ease-field);
}

    .lang-option-btn:hover:not(.is-active) {
        color: rgb(var(--pp-accent));
    }

    .lang-option-btn.is-active {
        background-color: rgb(var(--pp-action));
        color: rgb(var(--pp-action-contrast));
        box-shadow: var(--pp-shadow);
    }

/* Sekundär åtgärd: tillbaka, ändra, hoppa över. Ingen yta alls — den ska kunna
   stå bredvid den primära utan att se ut som ett andra förslag. Gult vid hover,
   som allt annat som svarar på att man pekar på det. */
.pp-btn-quiet {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: var(--pp-radius);
    padding: 0.5rem 0.75rem;
    font-weight: 800;
    color: var(--pp-fg-muted);
    transition: color 200ms var(--pp-ease-field);
}

    .pp-btn-quiet:hover {
        color: rgb(var(--pp-accent));
    }

/* -----------------------------------------------------------------------------
   Facebook-brandad knapp

   Bär Facebooks officiella blå färg (#1877F2) med mjuk övertoning och lyft vid
   hover, vilket gör den tydligt och snabbt igenkännbar som en social kanal.
   -------------------------------------------------------------------------- */
.pp-btn-facebook {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: linear-gradient(135deg, #1877F2 0%, #0d65d9 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--pp-radius);
    padding: 0.625rem 0.875rem;
    font-weight: 800;
    font-size: 0.75rem;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.35);
    transition: transform 300ms var(--pp-ease-lift), box-shadow 300ms var(--pp-ease-lift), filter 300ms var(--pp-ease-lift);
    text-decoration: none !important;
}

    .pp-btn-facebook:hover {
        transform: translateY(-2px);
        filter: brightness(1.12);
        box-shadow: 0 4px 14px rgba(24, 119, 242, 0.5);
        color: #ffffff !important;
    }

    .pp-btn-facebook:active {
        transform: scale(0.98);
    }