/* ==========================================================
   LA LOKALFORENING – FÆLLES CSS
   ========================================================== */


/* ==========================================================
   1. FRONTEND ADMIN – "LAV OPSLAG"
   ========================================================== */

/*
 * Frontend Admin benytter ACF-felter.
 * Formularen har ikke nødvendigvis .acf-form som wrapper,
 * derfor styles de konkrete ACF-elementer direkte.
 */


/* ----------------------------------------------------------
   FELTER / SPACING
   ---------------------------------------------------------- */

.acf-field {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}


/* ----------------------------------------------------------
   LABELS
   ---------------------------------------------------------- */

.acf-field .acf-label {
    margin: 0 0 6px 0 !important;
}

.acf-field .acf-label label {
    margin: 0 !important;

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    color: #002b49 !important;
}


/* Obligatorisk markering */

.acf-field .acf-required {
    color: #d63638 !important;
}


/* ----------------------------------------------------------
   HJÆLPETEKSTER
   ---------------------------------------------------------- */

.acf-field .acf-label .description,
.acf-field .acf-instructions {
    margin: 4px 0 8px 0 !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    color: #66737d !important;
}


/* ----------------------------------------------------------
   INPUTFELTER
   ---------------------------------------------------------- */

.acf-field input[type="text"],
.acf-field input[type="email"],
.acf-field input[type="url"],
.acf-field input[type="tel"],
.acf-field input[type="number"],
.acf-field input[type="password"],
.acf-field textarea,
.acf-field select {
    width: 100% !important;

    background-color: #ffffff !important;
    color: #002b49 !important;

    border: 1px solid #d5d9dd !important;
    border-radius: 4px !important;

    padding: 12px 14px !important;

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   FOKUS
   ---------------------------------------------------------- */

.acf-field input[type="text"]:focus,
.acf-field input[type="email"]:focus,
.acf-field input[type="url"]:focus,
.acf-field input[type="tel"]:focus,
.acf-field input[type="number"]:focus,
.acf-field input[type="password"]:focus,
.acf-field textarea:focus,
.acf-field select:focus {
    background-color: #ffffff !important;

    border-color: #002b49 !important;

    outline: none !important;

    box-shadow: 0 0 0 1px #002b49 !important;
}


/* ----------------------------------------------------------
   TEXTAREA / UDDRAG
   ---------------------------------------------------------- */

.acf-field textarea {
    min-height: 120px !important;
    resize: vertical;
}


/* ==========================================================
   1A. TINYMCE / INDHOLDSEDITOR
   ========================================================== */


/* Ydre editor */

.acf-field .wp-editor-wrap {
    margin-top: 6px !important;
}


/* Editor-container */

.acf-field .wp-editor-container {
    background: #ffffff !important;

    border: 1px solid #d5d9dd !important;

    border-radius: 4px !important;

    overflow: hidden;

    box-shadow: none !important;
}


/* ----------------------------------------------------------
   TOOLBAR
   ---------------------------------------------------------- */

.acf-field .mce-toolbar-grp,
.acf-field .quicktags-toolbar {
    background: #f6f7f7 !important;

    border-bottom: 1px solid #d5d9dd !important;
}


/*
 * Nulstil den globale knap-styling på TinyMCE-knapper.
 */

.acf-field .mce-toolbar button,
.acf-field .mce-toolbar .mce-btn button,
.acf-field .mce-toolbar-grp button,
.acf-field .mce-btn,
.acf-field .mce-btn button {
    background: transparent !important;

    color: inherit !important;

    border: 0 !important;
    border-radius: 2px !important;

    padding: 2px 4px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* Hover på editor-knapper */

.acf-field .mce-toolbar button:hover,
.acf-field .mce-btn:hover,
.acf-field .mce-btn button:hover {
    background: #dcdcde !important;

    color: inherit !important;

    transform: none !important;
}


/* TinyMCE ikoner */

.acf-field .mce-ico {
    color: #50575e !important;
}


/* ----------------------------------------------------------
   VISUEL / TEKST FANER
   ---------------------------------------------------------- */

.acf-field .wp-switch-editor {
    background: #f0f0f1 !important;

    color: #50575e !important;

    border: 1px solid #c3c4c7 !important;

    border-radius: 3px 3px 0 0 !important;

    padding: 4px 8px !important;

    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;

    box-shadow: none !important;

    transform: none !important;
}


.acf-field .html-active .switch-html,
.acf-field .tmce-active .switch-tmce {
    background: #ffffff !important;

    color: #002b49 !important;

    border-bottom-color: #ffffff !important;

    font-weight: 600 !important;
}


/* ----------------------------------------------------------
   SKRIVEOMRÅDE
   ---------------------------------------------------------- */

.acf-field iframe[id*="_ifr"] {
    min-height: 300px !important;

    background: #ffffff !important;
}


/* ==========================================================
   1B. FEATURED IMAGE / BILLEDE
   ========================================================== */

.acf-field .acf-image-uploader {
    margin-top: 6px !important;
}


/* Preview */

.acf-field .acf-image-uploader .image-wrap {
    overflow: hidden;

    border-radius: 4px !important;
}


/* ----------------------------------------------------------
   TILFØJ BILLEDE-KNAP
   ---------------------------------------------------------- */

.acf-field .acf-image-uploader .acf-button,
.acf-field .acf-image-uploader a.button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 38px !important;

    padding: 8px 16px !important;

    background: #F0B440 !important;

    color: #002b49 !important;

    border: 0 !important;
    border-radius: 20px !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    text-decoration: none !important;

    box-shadow: none !important;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.acf-field .acf-image-uploader .acf-button:hover,
.acf-field .acf-image-uploader a.button:hover {
    opacity: 0.85;

    transform: translateY(-1px);
}


/* ==========================================================
   1C. UDGIV-KNAP
   ========================================================== */


/*
 * Frontend Admin kan placere submit-knappen udenfor selve
 * .acf-field, derfor dækker vi også ACF's submit-container.
 */

.acf-submit input[type="submit"],
.acf-submit button[type="submit"],
.fea-submit-button,
button.fea-submit-button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;

    padding: 10px 22px !important;

    background: #002b49 !important;

    color: #ffffff !important;

    border: 0 !important;
    border-radius: 22px !important;

    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    text-decoration: none !important;

    box-shadow: none !important;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.acf-submit input[type="submit"]:hover,
.acf-submit input[type="submit"]:focus,
.acf-submit button[type="submit"]:hover,
.acf-submit button[type="submit"]:focus,
.fea-submit-button:hover,
.fea-submit-button:focus {
    background: #F0B440 !important;

    color: #002b49 !important;

    transform: translateY(-1px);
}


/* ==========================================================
   1D. FRONTEND ADMIN – BESKEDER
   ========================================================== */

.acf-notice {
    margin: 0 0 20px 0 !important;

    padding: 12px 16px !important;

    border-radius: 4px !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* ==========================================================
   2. PERSONER – LOOP CARD
   ========================================================== */


/* Fjern understregning fra links i personkort */

.person-card a,
.person-card a:hover,
.person-card a:focus,
.person-card a:active {
    text-decoration: none !important;
}


/* ----------------------------------------------------------
   ROLLER / TITLER
   ---------------------------------------------------------- */

.person-roles {
    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    gap: 6px;
}


.person-card .person-role,
.person-role {
    display: inline-block;

    padding: 4px 10px;

    background: #f3f7f9;

    color: #002b49;

    border: 1px solid #d5e0e6;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;
}


/* ==========================================================
   3. PERSONER – SOCIALE MEDIER
   ========================================================== */

.person-socials {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-top: 8px;
}


/* ----------------------------------------------------------
   SOCIALT IKON / LINK
   ---------------------------------------------------------- */

.person-card .person-social,
.person-social {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 34px !important;

    height: 34px !important;

    padding: 0 !important;

    margin: 0 !important;

    color: #002b49 !important;

    text-decoration: none !important;

    line-height: 1 !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


/* ----------------------------------------------------------
   SVG-IKON
   ---------------------------------------------------------- */

.person-card .person-social svg,
.person-social svg {
    display: block !important;

    width: 24px !important;

    height: 24px !important;

    min-width: 24px !important;

    min-height: 24px !important;

    max-width: 24px !important;

    max-height: 24px !important;

    fill: currentColor !important;
}


/* ----------------------------------------------------------
   HOVER / FOCUS
   ---------------------------------------------------------- */

.person-card .person-social:hover,
.person-card .person-social:focus,
.person-social:hover,
.person-social:focus {
    color: #002b49 !important;

    text-decoration: none !important;

    opacity: 0.7;

    transform: translateY(-2px);
}


/* ----------------------------------------------------------
   KONTAKTLINKS
   ---------------------------------------------------------- */

.person-card .person-contact-link,
.person-card .person-contact-link:hover,
.person-card .person-contact-link:focus {
    color: inherit;

    text-decoration: none !important;
}


/* ----------------------------------------------------------
   PERSONKORT – PROFILKNAP
   ---------------------------------------------------------- */

.person-profile-button {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    width: fit-content;

    margin-top: 6px;

    padding: 8px 16px;

    background: #002b49;

    color: #ffffff !important;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    text-decoration: none !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.person-profile-button:hover,
.person-profile-button:focus {
    color: #ffffff !important;

    text-decoration: none !important;

    opacity: 0.85;

    transform: translateY(-1px);
}


/* Lille bevægelse på pilen */

.person-profile-button .person-profile-arrow {
    display: inline-block;

    transition: transform 0.2s ease;
}


.person-profile-button:hover .person-profile-arrow {
    transform: translateX(3px);
}


/* ==========================================================
   4. KLIKBARE LOOP CARDS
   Politikområder + nyheder
   ========================================================== */


/*
 * Klassen "clickable-card" sættes på den yderste container.
 */

a.clickable-card {
    cursor: pointer;

    text-decoration: none !important;
}


/* ----------------------------------------------------------
   FJERN LINK-UNDERSTREGNING
   ---------------------------------------------------------- */

a.clickable-card,
a.clickable-card:link,
a.clickable-card:visited,
a.clickable-card:hover,
a.clickable-card:focus,
a.clickable-card:active,
a.clickable-card *,
a.clickable-card:link *,
a.clickable-card:visited *,
a.clickable-card:hover *,
a.clickable-card:focus *,
a.clickable-card:active * {
    text-decoration: none !important;
}


/* ----------------------------------------------------------
   UNDGÅ BROWSERENS STANDARDFARVER
   ---------------------------------------------------------- */

a.clickable-card,
a.clickable-card:link,
a.clickable-card:visited,
a.clickable-card:hover,
a.clickable-card:focus,
a.clickable-card:active {
    color: inherit;
}


/* ==========================================================
   5. KONTAKTFORMULAR – WPFORMS
   ========================================================== */


/* Labels */

.contact-form .wpforms-field-label {
    color: #ffffff !important;
}


/* Obligatorisk markering */

.contact-form .wpforms-required-label {
    color: #d63638 !important;
}


/* ----------------------------------------------------------
   FELTER
   ---------------------------------------------------------- */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form input[type="tel"],
.contact-form textarea {
    background-color: #ffffff !important;

    border: 1px solid #d5d9dd !important;

    color: #002b49 !important;

    border-radius: 3px !important;
}


/* ----------------------------------------------------------
   FOKUS
   ---------------------------------------------------------- */

.contact-form input:focus,
.contact-form textarea:focus {
    background-color: #ffffff !important;

    border-color: #002b49 !important;

    outline: none !important;

    box-shadow: 0 0 0 1px #002b49 !important;
}


/* ----------------------------------------------------------
   SEND-KNAP
   ---------------------------------------------------------- */

.contact-form .wpforms-submit {
    background: #002b49 !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 4px !important;

    padding: 10px 18px !important;

    font-size: 14px !important;

    font-weight: 600 !important;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* Hover */

.contact-form .wpforms-submit:hover,
.contact-form .wpforms-submit:focus {
    background: #F0B440 !important;

    color: #ffffff !important;

    border: none !important;

    transform: none !important;
}

/* ==========================================================
   6. MINE OPSLAG
   ========================================================== */


/* ----------------------------------------------------------
   OVERORDNET CONTAINER
   ---------------------------------------------------------- */

.la-mine-opslag {
    width: 100%;
    font-family: Arial, sans-serif;
    color: #002b49;
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.la-mine-opslag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 30px;
}

.la-mine-opslag-heading h2 {
    margin: 0 0 8px 0;

    color: #002b49;

    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
}

.la-mine-opslag-heading p {
    margin: 0;

    color: #66737d;

    font-size: 15px;
    line-height: 1.5;
}


/* ----------------------------------------------------------
   OPRET NYT OPSLAG – LA KNAP
   ---------------------------------------------------------- */

.la-mine-opslag a.la-opret-opslag,
a.la-opret-opslag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;

    flex-shrink: 0;

    padding: 11px 20px !important;

    background: #002b49 !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 4px !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;

    text-decoration: none !important;

    box-shadow: none !important;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.la-mine-opslag a.la-opret-opslag:hover,
.la-mine-opslag a.la-opret-opslag:focus,
a.la-opret-opslag:hover,
a.la-opret-opslag:focus {
    background: #F0B440 !important;
    color: #002b49 !important;

    text-decoration: none !important;

    transform: translateY(-1px);
}


/* ----------------------------------------------------------
   TABEL WRAPPER
   ---------------------------------------------------------- */

.la-opslag-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #d5d9dd;
    border-radius: 4px;

    background: #ffffff;
}


/* ----------------------------------------------------------
   TABEL
   ---------------------------------------------------------- */

.la-opslag-table {
    width: 100%;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: collapse !important;

    background: #ffffff;

    font-family: Arial, sans-serif;
}


/* ----------------------------------------------------------
   TABEL HEADER
   ---------------------------------------------------------- */

.la-opslag-table thead {
    background: #f3f7f9;
}

.la-opslag-table th {
    padding: 14px 16px !important;

    color: #002b49 !important;

    border: 0 !important;
    border-bottom: 1px solid #d5d9dd !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4;

    text-align: left !important;
}


/* ----------------------------------------------------------
   TABEL RÆKKER
   ---------------------------------------------------------- */

.la-opslag-table td {
    padding: 16px !important;

    color: #002b49;

    border: 0 !important;
    border-bottom: 1px solid #e7eaed !important;

    font-size: 14px;
    line-height: 1.5;

    vertical-align: middle;
}

.la-opslag-table tbody tr:last-child td {
    border-bottom: 0 !important;
}


/* Diskret hover */

.la-opslag-table tbody tr {
    transition: background-color 0.15s ease;
}

.la-opslag-table tbody tr:hover {
    background-color: #fafbfc;
}


/* ----------------------------------------------------------
   OPSLAGSTITEL
   ---------------------------------------------------------- */

.la-opslag-title {
    width: 40%;

    font-weight: 600;
    color: #002b49 !important;
}


/* ----------------------------------------------------------
   DATO
   ---------------------------------------------------------- */

.la-opslag-date {
    width: 20%;

    color: #66737d !important;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   STATUS
   ---------------------------------------------------------- */

.la-opslag-status {
    width: 15%;
}

.la-status {
    display: inline-flex;
    align-items: center;

    padding: 4px 9px;

    border-radius: 4px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}


/* Udgivet */

.la-status-publish {
    background: #edf7f0;
    color: #276738;
}


/* Kladde */

.la-status-draft {
    background: #f3f4f5;
    color: #50575e;
}


/* Afventer */

.la-status-pending {
    background: #fff6df;
    color: #755600;
}


/* ----------------------------------------------------------
   HANDLINGER
   ---------------------------------------------------------- */

.la-opslag-actions {
    width: 25%;

    white-space: nowrap;
}

.la-opslag-actions a,
.la-opslag-actions span {
    font-size: 14px;
}


/* Se opslag */

.la-opslag-actions .la-action-view {
    color: #002b49 !important;

    font-weight: 600;

    text-decoration: none !important;
}

.la-opslag-actions .la-action-view:hover,
.la-opslag-actions .la-action-view:focus {
    color: #F0B440 !important;

    text-decoration: none !important;
}


/* ----------------------------------------------------------
   REDIGER
   ---------------------------------------------------------- */

.la-opslag-actions a.la-action-edit {
    color: #002b49 !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    cursor: pointer;
}

.la-opslag-actions a.la-action-edit:hover,
.la-opslag-actions a.la-action-edit:focus {
    color: #F0B440 !important;

    text-decoration: none !important;
}


/* ----------------------------------------------------------
   SLET
   Teknisk en button, visuelt et tekstlink
   ---------------------------------------------------------- */

.la-opslag-actions .la-delete-form {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

.la-opslag-actions button.la-action-delete {
    display: inline !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    color: #a82a2a !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    text-decoration: none !important;

    box-shadow: none !important;

    cursor: pointer;

    appearance: none !important;
    -webkit-appearance: none !important;

    transform: none !important;
}

.la-opslag-actions button.la-action-delete:hover,
.la-opslag-actions button.la-action-delete:focus,
.la-opslag-actions button.la-action-delete:active {
    background: transparent !important;
    background-color: transparent !important;

    color: #d63638 !important;

    border: 0 !important;

    text-decoration: none !important;

    box-shadow: none !important;
    outline: none !important;

    transform: none !important;
}


/* Separator */

.la-action-separator {
    margin: 0 6px;

    color: #a7adb2;
}


/* ----------------------------------------------------------
   INGEN OPSLAG
   ---------------------------------------------------------- */

.la-ingen-opslag {
    padding: 25px;

    background: #f7f8f9;

    border: 1px solid #d5d9dd;
    border-radius: 4px;
}

.la-ingen-opslag p {
    margin: 0;

    color: #66737d;
}

/* ==========================================================
   MINE OPSLAG – MOBIL
   ========================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------
       HEADER
       ------------------------------------------------------ */

    .la-mine-opslag-header {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;

        margin-bottom: 28px;
    }

    .la-mine-opslag-heading h2 {
        font-size: 28px;
    }

    .la-mine-opslag-heading p {
        font-size: 15px;
    }

    .la-mine-opslag a.la-opret-opslag {
        width: 100% !important;
        box-sizing: border-box;

        padding: 14px 20px !important;

        font-size: 15px !important;
    }


    /* ------------------------------------------------------
       FRA TABEL TIL KORT
       ------------------------------------------------------ */

    .la-opslag-table-wrapper {
        width: 100%;
        max-width: 100%;

        overflow: visible;

        border: 0;
        border-radius: 0;

        background: transparent;
    }

    .la-opslag-table {
        display: block;

        width: 100%;
        min-width: 0 !important;
        max-width: 100%;

        background: transparent;
    }


    /* Skjul desktop-tabelheader */

    .la-opslag-table thead {
        display: none;
    }

    .la-opslag-table tbody {
        display: flex;
        flex-direction: column;
        gap: 16px;

        width: 100%;
        min-width: 0;
        max-width: 100%;
    }


    /* ------------------------------------------------------
       HVERT OPSLAG BLIVER ET KORT
       ------------------------------------------------------ */

    .la-opslag-table tbody tr {
        display: grid;

        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title title"
            "date status"
            "actions actions";

        width: 100%;
        min-width: 0;
        max-width: 100%;

        box-sizing: border-box;

        padding: 20px;

        background: #ffffff;

        border: 1px solid #d5d9dd;
        border-radius: 6px;
    }

    .la-opslag-table tbody tr:hover {
        background: #ffffff;
    }


    /* ------------------------------------------------------
       ALLE CELLER
       ------------------------------------------------------ */

    .la-opslag-table td {
        display: block;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;

        padding: 0 !important;

        border: 0 !important;
    }


    /* ------------------------------------------------------
       TITEL
       ------------------------------------------------------ */

    .la-opslag-table .la-opslag-title {
        grid-area: title;

        margin-bottom: 16px;

        color: #002b49 !important;

        font-size: 17px;
        font-weight: 600;
        line-height: 1.4;
    }


    /* ------------------------------------------------------
       DATO
       ------------------------------------------------------ */

    .la-opslag-table .la-opslag-date {
        grid-area: date;

        align-self: center;

        color: #66737d !important;

        font-size: 14px;

        white-space: normal;
    }


    /* ------------------------------------------------------
       STATUS
       ------------------------------------------------------ */

    .la-opslag-table .la-opslag-status {
        grid-area: status;

        width: auto !important;
        min-width: 0 !important;

        align-self: center;
        justify-self: end;

        text-align: right;
    }


    /* ------------------------------------------------------
       HANDLINGER
       ------------------------------------------------------ */

    .la-opslag-table .la-opslag-actions {
        grid-area: actions;

        width: 100% !important;

        margin-top: 18px;
        padding-top: 14px !important;

        border-top: 1px solid #e7eaed !important;

        white-space: normal;
    }

    .la-opslag-actions a,
    .la-opslag-actions span,
    .la-opslag-actions button.la-action-delete {
        font-size: 14px !important;
    }


    /* ------------------------------------------------------
       TOM LISTE
       ------------------------------------------------------ */

    .la-ingen-opslag {
        padding: 20px;
    }
}

/* ==========================================================
   7. ARRANGEMENTER
   ========================================================== */


/* ----------------------------------------------------------
   DATO / STED-LINJE
   Sæt klassen "arr-meta" på Shortcode-widgetten i kortet
   ---------------------------------------------------------- */

.arr-meta {
    color: #66737d;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}


/* ----------------------------------------------------------
   TIDLIGERE ARRANGEMENTER
   Sæt klassen "la-tidligere" på Loop Grid'et
   ---------------------------------------------------------- */

.la-tidligere img {
    filter: grayscale(100%);
    opacity: 0.85;

    transition:
        filter 0.3s ease,
        opacity 0.3s ease;
}

.la-tidligere a.clickable-card:hover img {
    filter: none;
    opacity: 1;
}


/* ----------------------------------------------------------
   INGEN ARRANGEMENTER
   Elementors "Nothing found"-besked i Loop Grid
   ---------------------------------------------------------- */

.e-loop-nothing-found-message {
    padding: 25px;

    background: #f7f8f9;

    color: #66737d;

    border: 1px solid #d5d9dd;
    border-radius: 4px;

    font-family: Arial, sans-serif;
    font-size: 15px;
}

/* ----------------------------------------------------------
   INFOBOKS PÅ ARRANGEMENTSSIDEN
   Shortcode: [arr_info]
   ---------------------------------------------------------- */

.arr-info {
    display: flex;
    flex-direction: column;
    gap: 18px;

    padding: 24px;

    background: #f3f7f9;

    color: #002b49;

    border: 1px solid #d5e0e6;
    border-left: 4px solid #002b49;
    border-radius: 6px;

    font-family: Arial, sans-serif;
}

.arr-info-raekke {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.arr-info-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    background: #ffffff;

    color: #002b49;

    border-radius: 50%;
}

.arr-info-label {
    display: block;

    margin-bottom: 2px;

    color: #66737d;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.arr-info-vaerdi {
    display: block;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.arr-info-kort {
    display: inline-block;

    margin-top: 2px;

    color: #002b49 !important;

    font-size: 15px;

    text-decoration: underline !important;
}

.arr-info-kort:hover,
.arr-info-kort:focus {
    color: #F0B440 !important;
}

.arr-info-knap {
    padding-top: 4px;
}


/* ----------------------------------------------------------
   FACEBOOK-KNAP
   Shortcode: [arr_facebook] – vises kun hvis feltet er udfyldt
   ---------------------------------------------------------- */

.arr-fb-knap {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 10px 18px;

    background: #002b49;

    color: #ffffff !important;

    border-radius: 4px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.arr-fb-knap:hover,
.arr-fb-knap:focus {
    color: #ffffff !important;

    text-decoration: none !important;

    opacity: 0.85;

    transform: translateY(-1px);
}

.arr-fb-knap .arr-fb-pil {
    display: inline-block;

    transition: transform 0.2s ease;
}

.arr-fb-knap:hover .arr-fb-pil {
    transform: translateX(3px);
}

/* ----------------------------------------------------------
   KORT: DATO / STED MED IKONER
   Shortcode: [arr_kort_meta]
   ---------------------------------------------------------- */

.arr-kort-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;

    color: #66737d;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.arr-kort-meta-linje {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.arr-kort-meta-linje svg {
    flex-shrink: 0;

    margin-top: 2px;

    color: #002b49;
}


/* ----------------------------------------------------------
   KORT: DATOBADGE PÅ BILLEDET
   Shortcode: [arr_dato_badge]
   ---------------------------------------------------------- */

.arr-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 54px;

    padding: 8px 10px 7px;

    background: #ffffff;

    color: #002b49;

    border-radius: 6px;

    box-shadow: 0 2px 8px rgba(0, 43, 73, 0.18);

    font-family: Arial, sans-serif;
    line-height: 1;
    text-align: center;
}

.arr-badge-dag {
    font-size: 22px;
    font-weight: 700;
}

.arr-badge-maaned {
    margin-top: 4px;

    color: #F0B440;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Tidligere arrangementer: neutral badge */

.la-tidligere .arr-badge-maaned {
    color: #66737d;
}


/* ----------------------------------------------------------
   HJÆLPEKLASSE: SKUB ELEMENT TIL BUNDEN AF KORTET
   Sæt klassen "la-bund" på "Læs mere"
   ---------------------------------------------------------- */

.la-bund {
    margin-top: auto !important;
}


/* ----------------------------------------------------------
   INFOBOKS: TIDSPUNKT PÅ EGEN LINJE
   ---------------------------------------------------------- */

.arr-info-tid {
    display: block;

    margin-top: 2px;

    color: #002b49;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}


/* ----------------------------------------------------------
   INFOBOKS: AFHOLDT ARRANGEMENT
   ---------------------------------------------------------- */

.arr-info--afholdt {
    border-left-color: #66737d;
}

.arr-info-afholdt {
    align-self: flex-start;

    padding: 5px 10px;

    background: #e7eaed;

    color: #50575e;

    border-radius: 4px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* ----------------------------------------------------------
   INFOBOKS: KNAPPER
   ---------------------------------------------------------- */

.arr-info-knap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* ----------------------------------------------------------
   TILFØJ TIL KALENDER
   Shortcode: [arr_kalender] – vises også i [arr_info]
   ---------------------------------------------------------- */

.arr-kal-knap {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 16px;

    background: #ffffff;

    color: #002b49 !important;

    border: 1px solid #002b49;
    border-radius: 4px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.arr-kal-knap:hover,
.arr-kal-knap:focus {
    background: #002b49;

    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-1px);
}

.arr-kal-knap svg {
    flex-shrink: 0;
}