.waip-gallery-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.waip-gallery-item {
    padding: 8px;
    box-sizing: border-box;
}

/* Columns */
.waip-columns-1 .waip-gallery-item { width: 100%; }
.waip-columns-2 .waip-gallery-item { width: calc(50% - 16px); }
.waip-columns-3 .waip-gallery-item { width: calc(33.333% - 16px); }
.waip-columns-4 .waip-gallery-item { width: calc(25% - 16px); }
.waip-columns-5 .waip-gallery-item { width: calc(20% - 16px); }

.waip-gallery-thumb-wrap {
    position: relative;
    overflow: hidden;
}

.waip-gallery-thumb-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Overlay container */
.waip-gallery-meta-overlay {
    position: absolute;
    padding: 4px 8px;
    line-height: 1.3;
    border-radius: 3px;
    /* background comes from inline style now */
}

/* Positions */
.waip-meta-top-left {
    top: 8px;
    left: 8px;
}

.waip-meta-top-right {
    top: 8px;
    right: 8px;
}

.waip-meta-bottom-left {
    bottom: 8px;
    left: 8px;
}

.waip-meta-bottom-right {
    bottom: 8px;
    right: 8px;
}

.waip-meta-author,
.waip-meta-license {
    display: block;
}

.waip-gallery-meta {
    margin-top: 4px;
}

.waip-gallery-title {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    align-content: center;  
}

/* Pagination */
.waip-gallery-pagination {
    margin-top: 16px;
    text-align: center;
}

.waip-gallery-pagination .waip-page-link {
    display: inline-block;
    margin: 0 4px;
    padding: 4px 8px;
    text-decoration: none;
    border: 1px solid #ddd;
}

.waip-gallery-pagination .waip-page-link-current {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}
/* WAIP blocks – front-end layout */
.wp-block-waip-image,
.wp-block-waip-gallery {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Gør billederne responsive */
.wp-block-waip-image img,
.wp-block-waip-gallery img {
    display: block;
    max-width: 100%;
    height: auto;
}
.wp-block-waip-image .waip-image-caption,
.wp-block-waip-gallery .waip-gallery-caption {  
    text-align: center;
    font-size: 90%;
    color: #666;
    margin-top: 6px;
}   
.wp-block-waip-gallery .waip-gallery-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}   
.wp-block-waip-gallery .waip-gallery-images img {
    border: 1px solid #ddd;
    padding: 4px;
    background: #fff;
    max-width: calc(33% - 10px);
    box-sizing: border-box;
}   
@media (max-width: 600px) {
    .wp-block-waip-gallery .waip-gallery-images img {
        max-width: calc(50% - 10px);
    }
}   
@media (max-width: 400px) {
    .wp-block-waip-gallery .waip-gallery-images img {
        max-width: 100%;
    }
}   
/* WAIP lightbox / modal */
.waip-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.waip-lightbox[aria-hidden="false"] {
    display: flex;
}

.waip-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.waip-lightbox__content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}


.waip-lightbox__image {
    display: block;
    height: 80vh;         /* Fast højde */
    width: auto;          /* Bevar proportioner */
    max-width: 100%;      
    object-fit: contain;  /* Sørger for korrekt skalering */
    margin: 0 auto;
}

.waip-lightbox__caption {
    margin-top: 8px;
    font-size: 1.2rem;
    color: #000;
    text-align: center;
}

.waip-lightbox__close {
    position: absolute;
    top: 4px;
    right: 6px;
    border: none;
    background: transparent;
    color: #000;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* Lås scroll når lightbox er åben */
body.waip-lightbox-open {
    overflow: hidden;
}
.waip-lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waip-lightbox__arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.waip-lightbox__arrow--prev {
    left: 8px;
}

.waip-lightbox__arrow--next {
    right: 8px;
}
/* --------- LIGHTBOX AUTHOR OVERLAY --------- */

.waip-lightbox__meta {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0,0,0,0.25);
    padding: 3px 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    z-index: 30;
    display: flex;
    gap: 6px;
    align-items: center;
}

.waip-lightbox__meta-author,
.waip-lightbox__meta-license {
    white-space: nowrap;
}

/* Wrapper omkring billede + meta i lightbox */
.waip-lightbox__image-wrap {
    position: relative;        /* NU er meta relativ til billedet */
    display: inline-block;
    max-width: 90vw;
    max-height: 80vh;
}

/* Selve billedet i lightbox */
.waip-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    margin: 0 auto;
}


/* Front-end gallery editing */
.waip-front-toolbar {
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
}

.waip-front-toolbar__edit,
.waip-front-toolbar__add {
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #007cba;
    background: #f0f6fc;
    color: #007cba;
    border-radius: 3px;
}

.waip-front-toolbar__edit:hover,
.waip-front-toolbar__add:hover {
    background: #e2efff;
}

.waip-gallery-item {
    position: relative;
}

.waip-gallery-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 2px;
    cursor: pointer;
    display: none; /* toggles via JS in edit mode */
}

.waip-gallery-edit-mode .waip-gallery-item {
    outline: 1px dashed #007cba;
    cursor: move;
}
/* Soft-UI front toolbar with icons */
.waip-front-toolbar {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.waip-front-toolbar__edit,
.waip-front-toolbar__add {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    background: #f8f9fb;
    border: 1px solid #d0d7e2;
    color: #2c3e50;
    box-shadow:
        2px 2px 5px rgba(0,0,0,0.08),
        -2px -2px 5px rgba(255,255,255,0.8);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* ikon + tekst */
}

.waip-front-toolbar__edit:hover,
.waip-front-toolbar__add:hover {
    background: #ffffff;
    border-color: #b7c4d6;
    box-shadow:
        3px 3px 7px rgba(0,0,0,0.12),
        -3px -3px 7px rgba(255,255,255,1);
}

.waip-front-toolbar__edit:active,
.waip-front-toolbar__add:active {
    box-shadow:
        inset 2px 2px 4px rgba(0,0,0,0.15),
        inset -2px -2px 4px rgba(255,255,255,1);
}

/* Remove-knap (lille, diskret, glide ind) */
.waip-gallery-item {
    position: relative;
}

.waip-gallery-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    border: none;
    background: rgba(220, 53, 69, 0.92);
    color: white;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: 0.18s ease;
    font-weight: 600;
    line-height: 1.2;
    display: none; /* toggles in JS */
}

.waip-gallery-item:hover .waip-gallery-remove {
    opacity: 1;
    transform: translateY(0);
}

/* Edit-mode highlight */
.waip-gallery-edit-mode .waip-gallery-item {
    outline: 2px dashed #007cba;
    border-radius: 8px;
    padding: 2px;
    cursor: grab;
}

/* Edit-mode badge */
.waip-gallery-edit-badge {
    font-size: 12px;
    color: #0b4f7a;
    background: #e5f3ff;
    border: 1px solid #b3d9ff;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: 0.18s ease;
}

.waip-gallery-edit-badge.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.waip-remove-popover {
    display: none; /* JS toggler den */
    font-size: 12px;
    color: #0b4f7a;
    background: #e5f3ff;
    border: 1px solid #b3d9ff;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.waip-remove-popover__actions {
    display: flex;
    gap: 4px;
}

.waip-remove-popover__yes,
.waip-remove-popover__no {
    border-radius: 4px;
    border: 1px solid #d0d7e2;
    background: #f8f9fb;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    color: #2c3e50;
}

.waip-remove-popover__btn.is-active {
    border-color: #007cba;
    background: #e2efff;
    color: #007cba;
}
.waip-image-wrapper {
    position: relative;
    display: inline-block;
}

.waip-image-wrapper img {
    display: block;
}

.waip-image-wrapper {
    position: relative;
    display: inline-block;
}

.waip-image-wrapper img {
    display: block;
}

.waip-author-overlay {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    border-radius: 3px;
    pointer-events: none;
}
/* Wrap skal have fast højde (aspect-ratio) */
.waip-gallery-list .waip-gallery-thumb-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Når galleriet er sat til "cover" skal wrap have ratio,
   så img kan fylde hele boksen */
.waip-thumb-fit-cover .waip-gallery-thumb-wrap {
    aspect-ratio: 4 / 3; /* juster hvis du vil anden højde */
}

/* Billedet skal fylde wrap'en helt i cover-mode */
.waip-thumb-fit-cover .waip-gallery-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* eller top center for "top" */
    display: block;
}

/* Strict-mode beholder "ingen beskæring" */
.waip-thumb-fit-strict .waip-gallery-thumb-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Vertical align – virker sammen med cover */
.waip-thumb-align-center .waip-gallery-thumb-wrap img {
    object-position: center center;
}
.waip-thumb-align-top .waip-gallery-thumb-wrap img {
    object-position: top center;
}
/* ------------------------------------
   WAIP gallery – HARD COVER MODE
   ------------------------------------ */

/* Selve thumbnail-rammen */
.waip-gallery-list.waip-thumb-fit-cover .waip-gallery-thumb-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 3; /* ændr ratio hvis du vil */
}

/* Sørg for at link + wrapper fylder hele boksen */
.waip-gallery-list.waip-thumb-fit-cover .waip-gallery-thumb-wrap > a,
.waip-gallery-list.waip-thumb-fit-cover .waip-gallery-thumb-wrap > a > .waip-image-wrapper {
    display: block;
    width: 100%;
    height: 100%;
}

/* BILLEDET SKAL FYLDE HELE WRAP – ALDRIG AUTO */
.waip-gallery-list.waip-thumb-fit-cover .waip-gallery-thumb-wrap img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
}

/* Justering for "top" hvis galleriet står til align=top */
.waip-gallery-list.waip-thumb-align-top .waip-gallery-thumb-wrap img {
    object-position: top center !important;
}
/* Sørg for at overlay ligger korrekt (gælder både desktop og mobil) */
.waip-image-wrapper {
    position: relative;
    display: block;
}

.waip-author-overlay {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 3px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------- WAIP – 2 thumbs per row on mobile --------- */
@media (max-width: 768px) {

    .waip-gallery-list {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0px;
        margin-right: 0px;
    }

    .waip-gallery-list .waip-gallery-item {
        box-sizing: border-box;
        /* Tving 2 pr. række uanset andre regler */
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding: 0 8px 16px;
    }
    .waip-thumb-fit-cover {
        margin-left: 1em;
    }
    }


/* Mobil-tilpasning af overlay + titel */
@media (max-width: 768px) {

    .waip-author-overlay {
        font-size: 10px;
        padding: 3px 6px;
        max-width: 85%;
        white-space: normal;      /* må gerne gå på to linjer på mobil */
    }

    .waip-gallery-title {
        font-size: 12px;
        text-align: center;
        margin-top: 4px;
    }
    
}
/* 2 kolonner + billede helt ud til ramme på mobil */
@media (max-width: 768px) {

    .waip-gallery-list {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0px;
        margin-right: 0px;
    }

    .waip-gallery-list .waip-gallery-item {
        box-sizing: border-box;
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding: 0;                 /* ingen indre luft – billedet helt ud */
        margin: 0 0px 0px;         /* afstand mellem kortene i stedet */
    }

    /* sørg for at thumb fylder hele kortets bredde */
    .waip-gallery-list .waip-gallery-thumb-wrap {
        width: 100%;
    }
    .h-section-grid-container {
        padding: 10px;
    }
}

.waip-gallery-title-input {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-size: 0.9em;
    padding: 2px 4px;
    box-sizing: border-box;
}

.waip-media-author {
    margin: 0.5em 0;
    font-family: Roboto;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(106, 102, 122);
}

.waip-media-author label {
    font-family: Roboto;
    font-weight: 400;
    font-size: 16px !important;
    line-height: 1.6;
    color: rgb(106, 102, 122);
}

.waip-media-author__select {
    max-width: 220px;
    margin-left: 0.5em;
    padding: 6px 8px;
}

/* Edit author button */
.waip-gallery-edit-author {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #0b4f7a;
    background: #e5f3ff;
    border: 1px solid #b3d9ff;
    cursor: pointer;
    display: none;
}

.waip-gallery-item.waip-gallery-edit-mode .waip-gallery-edit-author {
    display: inline-block;
}

.waip-hidden {
    display: none !important;
}

/* Author editor panel under caption */
.waip-author-editor {
    margin: 6px 0px 10px;
    padding: 6px 8px;
    color: #0b4f7a;
    background: #e5f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 6px;
    font-size: 12px;
}

.waip-author-editor__controls {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.waip-author-editor__select {
    flex: 1;
}

.waip-author-editor__save,
.waip-author-editor__cancel {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #0b4f7a;
    background: #e5f3ff;
    border: 1px solid #b3d9ff;
    cursor: pointer;
}

/*
 |------------------------------------------------------------
 | WAIP Contribution – front-end layout for contributor flow
 |------------------------------------------------------------
 */

/* Main wrapper */
.waip-contribution {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: inherit;
}

.waip-contribution-title {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.waip-contribution-intro {
    text-align: center;
    font-size: 16px;
    margin-bottom: 25px;
    color: #444;
}

/* Steps */
.waip-contribution-step {
    margin-bottom: 20px;
}

/* Forms and fields */
.waip-contribution-form {
    margin: 0 auto;
    max-width: 480px;
}

.waip-contribution-field-row {
    display: flex;
    gap: 15px;
}

.waip-contribution-field-wrap {
    margin-bottom: 15px;
    width: 100%;
}

.waip-contribution-field-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.waip-contribution-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.2s;
}

.waip-contribution-input:focus {
    border-color: #0096e8;
    outline: none;
}

.waip-contribution-actions {
    text-align: center;
    margin-top: 20px;
}

/* Status bar (signed in as X + logout) */
.waip-contribution-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: #444;
}

.waip-contribution-signed-in-label strong {
    font-weight: 600;
}

/* Messages */
.waip-contribution-message {
    margin-top: 15px;
    font-size: 15px;
    color: #444;
    text-align: center;
}

/* Dropzone */
.waip-contribution-dropzone {
    border: 2px dashed #0073aa;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    transition: border-color 0.25s, background-color 0.25s;
    background: #fff;
}

.waip-contribution-dropzone:hover {
    background: #f0f7ff;
}

.waip-contribution-dropzone.is-dragover {
    background: #e5f3ff;
    border-color: #0096e8;
}

.waip-contribution-dropzone-title {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
}

.waip-contribution-dropzone-sub {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.waip-contribution-dropzone-hint {
    font-size: 13px;
    color: #777;
}

/* Two-column layout for upload + queue */
.waip-contribution-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 35px;
    margin-top: 40px;
}

.waip-contribution-queue-column {
    border-left: 1px solid #ddd;
    padding-left: 25px;
}

.waip-contribution-subtitle {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 15px;
}

/* Upload queue items */
.waip-contribution-queue {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.waip-contribution-queue-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 8px;
    background: #f7f9fb;
    border: 1px solid #dde4ec;
}

.waip-contribution-queue-thumb {
    width: 90px;
    height: 90px;
    flex: 0 0 auto;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waip-contribution-queue-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.waip-contribution-queue-placeholder {
    font-size: 12px;
    color: #fff;
    padding: 4px;
    text-align: center;
}

.waip-contribution-queue-body {
    flex: 1;
}

/* Progress bar */
.waip-contribution-progress-wrap {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #e0e6ef;
    overflow: hidden;
    margin-bottom: 8px;
}

.waip-contribution-progress-bar {
    width: 0;
    height: 100%;
    background: #0096e8;
    transition: width 0.4s ease;
}

.waip-contribution-progress-bar.is-uploading {
    width: 60%;
}

.waip-contribution-progress-bar.is-complete {
    width: 100%;
    background: #32a852;
}

.waip-contribution-progress-bar.is-error {
    width: 100%;
    background: #d63638;
}

/* Meta editing for queue + existing */
.waip-contribution-meta-edit,
.waip-contribution-existing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    font-size: 13px;
}

.waip-contribution-meta-label,
.waip-contribution-existing-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 150px;
}

.waip-contribution-meta-label span,
.waip-contribution-existing-label span {
    font-size: 12px;
    color: #555;
}

.waip-contribution-meta-input,
.waip-contribution-existing-input {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 13px;
}

.waip-contribution-meta-status {
    font-size: 12px;
    color: #555;
    min-width: 40px;
}

/* Existing images grid (full width under upload area) */
.waip-contribution-existing-wrapper {
    margin-top: 40px;
}

.waip-contribution-existing-gallery {
    position: relative;
    min-height: 40px;
}

.waip-contribution-existing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

@media (max-width: 900px) {
    .waip-contribution-layout {
        grid-template-columns: 1fr;
    }
    .waip-contribution-queue-column {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #ddd;
        padding-top: 20px;
    }
    .waip-contribution-existing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .waip-contribution-existing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.waip-contribution-existing-item {
    border-radius: 8px;
    overflow: hidden;
    background: #f7f9fb;
    border: 1px solid #dde4ec;
    display: flex;
    flex-direction: column;
}

.waip-contribution-existing-thumb {
    width: 100%;
    padding-top: 70%;
    position: relative;
    overflow: hidden;
    background: #000;
}

.waip-contribution-existing-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.waip-contribution-existing-meta {
    padding: 8px 8px 10px;
}

/* Gallery loading + empty states */
.waip-contribution-gallery-loading::after {
    content: 'Loading images…';
    display: block;
    padding: 20px;
    font-size: 15px;
    text-align: center;
    color: #666;
}

.waip-contribution-gallery-empty {
    text-align: center;
    font-size: 15px;
    color: #777;
    padding: 25px 0;
}

/* Buttons */
.waip-btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.2;
    border: none;
    transition: background 0.2s, opacity 0.2s;
}

.waip-btn-primary {
    background: #0096e8;
    color: #fff;
}

.waip-btn-primary:hover {
    background: #007bc3;
}

.waip-btn-link {
    background: none;
    color: #0073aa;
    text-decoration: underline;
    padding: 6px 10px;
}

.waip-btn-small {
    padding: 6px 10px;
    font-size: 13px;
}

.waip-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Status icon colours for saved/error */
.waip-contribution-meta-status.is-ok {
    color: #32a852;
    font-weight: 600;
    font-size: 16px;
}

.waip-contribution-meta-status.is-error {
    color: #d63638;
    font-weight: 600;
    font-size: 16px;
}

/* With only input + status we keep layout nice */
.waip-contribution-meta-edit,
.waip-contribution-existing-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.waip-contribution-meta-input,
.waip-contribution-existing-input {
    flex: 1 1 auto;
}
/* Top status bar: name left, logout far right */
.waip-contribution-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Teksten "Signed in as ..." holdes til venstre */
.waip-contribution-signed-in-label {
    margin-right: auto;
}

/* Log out-knappen helt ud til højre i containeren */
.waip-contribution-status .waip-btn-link {
    margin-left: auto;
    background: none;
    color: #0073aa;
    text-decoration: underline;
    padding: 6px 10px;
}
/* 6-digit OTP input */
.waip-contribution-code-input {
    max-width: 260px;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.3em;
}

/* Timer under teksten */
.waip-contribution-code-timer {
    margin: 8px 0 16px;
    font-size: 14px;
    color: #666;
}

.waip-contribution-otp-timer {
    font-weight: 600;
    margin-left: 4px;
}

/* ── Post-thumbnail / featured image: contain within its box ────────────────
   Colibri (and other page builders) render the post thumbnail inside a
   fixed-height wrapper. With object-fit: cover the image is cropped to fill
   the box. With contain it is scaled down so the full image is always visible,
   and the page background shows on the letterbox sides.
   The rule targets wp-post-image inside colibri-post-thumbnail-shortcode but
   falls back gracefully to any .wp-post-image that appears in a fixed-height
   container.
   ─────────────────────────────────────────────────────────────────────────── */
.colibri-post-thumbnail-shortcode img.wp-post-image,
.colibri-post-thumbnail-shortcode img.attachment-post-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}