/* ==========================================================
   SWINGERSDATE – HEM

   Bootstrap Grid styr sidans huvudsakliga layout.

   Vänstersida:
   col-lg-3

   Huvudflöde:
   col-lg-9

   Egen CSS används för tema och specialkomponenter.
   ========================================================== */

:root {
    --sd-primary: #701c4a;
    --sd-primary-hover: #8b2560;
    --sd-accent: #b44a84;

    --sd-home-bg: #0f1014;
    --sd-home-surface: #17191f;
    --sd-home-surface-2: #1e2129;

    --sd-home-border: rgba(255, 255, 255, .08);
    --sd-home-muted: #9ea3ad;

    --sd-home-radius: 12px;
    --sd-home-shadow: 0 8px 24px rgba(0, 0, 0, .16);

    --sd-spotlight-border: #b44a84;
    --sd-spotlight-border-hover: #d467a6;
}

/* ==========================================================
   SIDANS PLACERING
   ========================================================== */

.sd-home-menu-container {
    margin-top: .25rem;
    margin-bottom: .75rem;
}

.sd-home-page {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* ==========================================================
   GEMENSAMMA KORT
   ========================================================== */

.sd-home-card {
    overflow: hidden;

    border-color: var(--sd-home-border);
    border-radius: var(--sd-home-radius);

    box-shadow: var(--sd-home-shadow);
}

.sd-home-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 48px;
    padding: 10px 14px;

    border-bottom-color: var(--sd-home-border);
}

/* ==========================================================
   RUBRIKER
   ========================================================== */

.sd-card-title {
    display: flex;
    align-items: center;
    gap: 9px;

    min-width: 0;
    margin: 0;

    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.sd-card-title span {
    min-width: 0;
}

.text-sd {
    color: var(--sd-accent) !important;
}

.sd-card-header-link {
    flex: 0 0 auto;

    color: var(--bs-secondary-color);

    font-size: .78rem;
    text-decoration: none;

    transition: color .18s ease;
}

.sd-card-header-link:hover,
.sd-card-header-link:focus {
    color: var(--sd-accent);
}

/* ==========================================================
   SWINGERSDATE-KNAPP
   ========================================================== */

.btn-sd {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sd-primary);
    --bs-btn-border-color: var(--sd-primary);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sd-primary-hover);
    --bs-btn-hover-border-color: var(--sd-primary-hover);

    --bs-btn-focus-shadow-rgb: 112, 28, 74;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sd-primary-hover);
    --bs-btn-active-border-color: var(--sd-primary-hover);

    --bs-btn-disabled-color: rgba(255, 255, 255, .65);
    --bs-btn-disabled-bg: var(--sd-primary);
    --bs-btn-disabled-border-color: var(--sd-primary);
}

/* ==========================================================
   HJÄLPIKON
   ========================================================== */

.card-header > .sd-help {
    flex: 0 0 22px;

    margin-right: 0;
    margin-left: auto !important;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

/*
.sd-home-sidebar-sticky {
    top: 10px;
}
*/

.sd-home-sidebar-sticky {
    position: sticky;
    top: 10px;

    max-height: calc(100vh - 20px);

    overflow-y: auto;
    overflow-x: hidden;

    /* Firefox */
    scrollbar-width: none;

    /* IE / äldre Edge */
    -ms-overflow-style: none;
}

/* Chrome, Edge, Safari */
.sd-home-sidebar-sticky::-webkit-scrollbar {
    display: none;
}

/* ==========================================================
   GEMENSAM AVATAR
   ========================================================== */

.sd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 2px solid rgba(255, 255, 255, .14);
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3b3f49,
            #23262e
        );

    color: var(--bs-secondary-color);
}

.sd-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ========= Main Knapp ========== */
.sd-btn-main {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;
}

.sd-btn-main span {
    font: inherit;
    line-height: inherit;
}

.sd-btn-main i {
    font-size: 1.24rem;
    line-height: 1;
}


/* ====== ONLINE-LISTA  ================= */

.sd-online-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sd-online-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;

    color: var(--bs-body-color);
    text-decoration: none;
}

.sd-online-item:hover {
    color: var(--bs-body-color);
}

.sd-online-avatar {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;
}

.sd-online-meta {
    flex: 1 1 auto;

    display: block;

    min-width: 0;
}

.sd-online-meta strong,
.sd-online-meta small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-online-meta strong {
    font-size: .88rem;
}

.sd-online-meta small {
    margin-top: 1px;

    color: var(--bs-secondary-color);

    font-size: .76rem;
}

.sd-status-dot {
    flex: 0 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    border: 2px solid #fff;
    border-radius: 50%;

    background: #2fc86f;

    line-height: 1;

    box-sizing: border-box;

    box-shadow:
        0 0 0 2px rgba(0, 0, 0, .12);
}


/* Online nu */
.sd-status-dot.green {
    background: #2fc86f;
}


/* Aktiv nyligen */
.sd-status-dot.yellow {
    background: #ffc107;
}


/* Ett tag sedan */
.sd-status-dot.gray {
    background: #6c757d;
}


/* Verifieringsbock */
.sd-status-dot i {
    display: block;

    margin: 0;
    padding: 0;

    color: #fff;

    font-size: 7px;
    line-height: 1;
}

/* ==========================================================
   SPOTLIGHT – RUBRIKENS HÖGERSIDA
   ========================================================== */

.sd-spotlight-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 0 0 auto;
}

.sd-spotlight-header-actions .sd-help {
    margin: 0 !important;
}

/* ==========================================================
   SPOTLIGHT – MODAL ÖVER MENY
   ========================================================== */

.sd-spotlight-upload-modal {
    z-index: 200000 !important;
}

.modal-backdrop {
    z-index: 199999 !important;
}

.sd-spotlight-upload-modal .modal-dialog {
    position: relative;
    z-index: 200001;
}

/* ==========================================================
   SPOTLIGHT – UPPLADDNINGSMODAL
   ========================================================== */

.sd-spotlight-upload-modal .modal-content {
    overflow: hidden;

    border: 1px solid var(--sd-home-border);
    border-radius: var(--sd-home-radius);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .45);
}

.sd-spotlight-upload-modal .modal-header {
    min-height: 66px;

    border-bottom-color: var(--sd-home-border);
}

.sd-spotlight-upload-modal .modal-body {
    padding: 18px;
}

.sd-spotlight-modal-heading {
    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 0;
}

.sd-spotlight-modal-icon {
    flex: 0 0 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(217, 138, 184, .22);
    border-radius: 50%;

    background: rgba(112, 28, 74, .2);

    box-shadow:
        0 0 15px rgba(112, 28, 74, .2);
}

.sd-spotlight-modal-heading > div {
    min-width: 0;
}

.sd-spotlight-modal-heading small {
    display: block;

    margin-top: 2px;

    font-size: .75rem;
}

/* ==========================================================
   SPOTLIGHT – FÖRHANDSVISNING
   ========================================================== */

.sd-spotlight-upload-preview {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px;

    border: 1px solid var(--sd-home-border);
    border-radius: 12px;

    background: rgba(255, 255, 255, .025);
}

.sd-spotlight-preview-circle {
    flex: 0 0 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    overflow: hidden;

    border: 3px solid var(--sd-spotlight-border);
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3b3f49,
            #23262e
        );

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, .035);
}

.sd-spotlight-preview-circle img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sd-spotlight-preview-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1.35rem;
}

.sd-spotlight-preview-text {
    min-width: 0;
}

.sd-spotlight-preview-text strong,
.sd-spotlight-preview-text small {
    display: block;
}

.sd-spotlight-preview-text strong {
    margin-bottom: 3px;

    font-size: .9rem;
}

.sd-spotlight-preview-text small {
    line-height: 1.4;
}

/* ==========================================================
   SPOTLIGHT – INFORMATIONSRUTA
   ========================================================== */

.sd-spotlight-upload-info {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 10px 12px;

    border: 1px solid rgba(217, 138, 184, .16);
    border-radius: 10px;

    background: rgba(112, 28, 74, .11);
    color: var(--bs-secondary-color);

    font-size: .78rem;
    line-height: 1.45;
}

.sd-spotlight-upload-info i {
    flex: 0 0 auto;

    margin-top: 2px;

    color: var(--sd-accent);
}

/* ==========================================================
   SKAPA INLÄGG
   ========================================================== */

.sd-create-card-body {
    padding: 12px 14px;
}

.sd-create-row {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.sd-create-avatar {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    padding: 0;
}

.sd-create-input {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 42px;

    padding: 9px 15px;

    overflow: hidden;

    border: 1px solid var(--sd-home-border);
    border-radius: 999px;

    background: rgba(255, 255, 255, .035);
    color: var(--bs-secondary-color);

    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease;
}

.sd-create-input:hover,
.sd-create-input:focus-visible {
    border-color: rgba(216, 138, 183, .45);

    background: rgba(112, 28, 74, .11);
    color: var(--bs-body-color);

    outline: 0;
}

.sd-create-plus {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    padding: 0;

    border-radius: 50%;
}

/* ==========================================================
   SORTERING
   Samma typografi som Gilla / Kommentera / Skicka
   ========================================================== */

.sd-feed-tools-body {
    padding: 12px 14px;
}

.sd-feed-sort-button,
.sd-feed-filter-button {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    font-size: 1.08rem !important;
    font-weight: 500 !important;
    line-height: 1.2;

    transition: all .18s ease;
}

.sd-feed-sort-button span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.sd-feed-sort-button i,
.sd-feed-filter-button i {
    font-size: 1.24rem !important;
    line-height: 1;
}

.sd-feed-filter-button {
    width: 38px;
    padding-right: 0;
    padding-left: 0;
}

/* Bootstrap-klassen me-1 behövs inte när gap används */
.sd-feed-sort-button i.me-1 {
    margin-right: 0 !important;
}

/* ========================================================== */


/* =============   HEM V2 – FLÖDE OCH POSTKORT  ============= */

.sd-hem-feed,
.sd-hem-new-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;

    width: 100%;
}

.sd-hem-new-posts:empty {
    display: none;
}

.sd-post-card {
    overflow: hidden;

    border-radius: 16px;
}

/* Posthuvud */
.sd-post-header {
    min-height: 82px;
    padding: 14px 18px;
}

.sd-post-head {
    flex: 1 1 auto;

    display: flex;
    align-items: center;
    gap: 16px;

    min-width: 0;
}

.sd-post-avatar {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
}

.sd-post-user {
    flex: 1 1 auto;

    min-width: 0;
    padding-top: 1px;
    transform: translateY(-10px);
}


.sd-post-user-name-row,
.sd-post-meta {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sd-post-user-name-row {
    flex-wrap: wrap;
    gap: 7px;
}

.sd-post-user-link {
    min-width: 0;
}

.sd-post-user-link strong,
.sd-post-user-name-row strong {
    display: block;

    overflow: hidden;

    font-size: .9rem;
    font-weight: 500;
    line-height: 1.22;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-post-meta {
    flex-wrap: wrap;
    gap: 6px;

    margin-top: -5px;

    color: var(--bs-secondary-color);

    font-size: .9rem;
    line-height: 1.35;
}

.sd-post-city {
    color: var(--bs-body-color);
    font-weight: 400;
    font-size: .76rem;
    
}

.sd-post-meta-dot {
    color: rgba(255, 255, 255, .35);
}

.sd-post-visibility {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sd-post-visibility i {
    font-size: .82rem;
}

.sd-post-own-label {
    flex: 0 0 auto;

    padding: 1px 6px;

    border-radius: 999px;

    background: rgba(112, 28, 74, .18);
    color: var(--sd-accent);

    font-size: .62rem;
    font-weight: 700;
}

.sd-post-pending-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sd-post-pending-label .spinner-border {
    width: 10px;
    height: 10px;

    border-width: 1px;
}

.sd-post-card.is-pending {
    opacity: .78;
}


/* Profilmärken */
.sd-post-profile-badge {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
}

.sd-post-profile-badge-verified {
    color: #5aa7ff;
    font-size: .92rem;
}

.sd-post-profile-badge-vip {
    color: #f3c75f;
    font-size: .88rem;
}

.sd-post-profile-badge-online {
    width: 12px;
    height: 12px;
}



/* ==========================================================
   LITEN ONLINE PRICK
   ========================================================== */
.sd-post-online-dot {
    display: block;

    width: 9px;
    height: 9px;

    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;

    background: #2fc86f;

    box-shadow:
        0 0 0 2px rgba(47, 200, 111, .16);
}

.sd-post-online-dot.green {
    background: #2fc86f;

    box-shadow:
        0 0 0 2px rgba(47, 200, 111, .16);
}

.sd-post-online-dot.yellow {
    background: #ffc107;

    box-shadow:
        0 0 0 2px rgba(255, 193, 7, .16);
}

.sd-post-online-dot.gray {
    background: #6c757d;

    box-shadow:
        0 0 0 2px rgba(108, 117, 125, .16);
}

/* ==========================================================
   POST – TREPUNKTSMENY
   ========================================================== */

.sd-post-menu-dropdown {
    flex: 0 0 auto;

    margin-left: auto;
}

.sd-post-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--bs-secondary-color);

    font-size: 1rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.sd-post-menu-trigger:hover,
.sd-post-menu-trigger:focus-visible,
.sd-post-menu-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, .06);
    color: var(--bs-body-color);

    outline: 0;
}

.sd-post-menu-trigger i {
    pointer-events: none;
}

/* ==========================================================
   POST – AVATARRING EFTER PROFILTYP
   Samma färger som Spotlight
   ========================================================== */

.sd-post-avatar-ring {
    position: relative;

    border: 3px solid rgba(255, 255, 255, .7);
}

.sd-post-avatar-ring.gender-man,
.sd-post-avatar-ring.paras-man,
.sd-create-avatar-ring.gender-man,
.sd-create-avatar-ring.paras-man {
    border-color: #007bff;

    box-shadow:
        0 0 8px rgba(0, 123, 255, .48);
}

.sd-post-avatar-ring.gender-kvinna,
.sd-post-avatar-ring.paras-kvinna,
.sd-create-avatar-ring.gender-kvinna,
.sd-create-avatar-ring.paras-kvinna {
    border-color: #e83e8c;

    box-shadow:
        0 0 8px rgba(232, 62, 140, .48);
}

.sd-post-avatar-ring.paras-hemligt,
.sd-create-avatar-ring.paras-hemligt {
    border-color: rgba(255, 255, 255, .9);

    box-shadow:
        0 0 8px rgba(255, 255, 255, .24);
}

.sd-post-avatar-ring.paras-bada,
.sd-create-avatar-ring.paras-bada {
    animation:
        sdPostAvatarCoupleRing
        4.6s
        ease-in-out
        infinite;
}

@keyframes sdPostAvatarCoupleRing {
    0%,
    100% {
        border-color: #e83e8c;

        box-shadow:
            0 0 8px rgba(232, 62, 140, .48);
    }

    50% {
        border-color: #007bff;

        box-shadow:
            0 0 8px rgba(0, 123, 255, .48);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sd-post-avatar-ring.paras-bada {
        animation: none;

        border-color: #b44a84;
    }

}

/* Inläggsinnehåll */
.sd-post-body {
    padding: 22px 18px 24px;
}

.sd-post-text {
    overflow-wrap: anywhere;

    font-size:0.8rem;
    font-weight_: 400;
    line-height: 1.62;
}

/* ==========================================================
   POST – STATISTIK
   ========================================================== */

.sd-post-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    min-height: 52px;
    padding: 12px 18px;

    border-top: 1px solid var(--sd-home-border);

    color: var(--bs-secondary-color);

    font-size: .92rem;
}

.sd-post-stat-button {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 4px;

    min-width: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: var(--bs-secondary-color);

    font: inherit;
    line-height: 1.2;

    white-space: nowrap;
}

.sd-post-stat-button i,
.sd-post-stat-button span {
    flex: 0 0 auto;
}

.sd-post-stat-button i {
    font-size: .95rem;
    line-height: 1;
}

.sd-post-stat-button span {
    white-space: nowrap;
}

.sd-post-stat-button:not(:disabled) {
    cursor: pointer;
}

.sd-post-stat-button:not(:disabled):hover {
    color: var(--bs-body-color);
}

/* Åtgärder Knappar under card i flöde*/
.sd-post-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;

    padding: 10px 14px 14px;

    border-top: 1px solid var(--sd-home-border);
}

.sd-post-action-button,
.sd-post-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 0;
    min-height: 60px;

    border: 0;

    color: var(--bs-secondary-color);

    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1;

    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.sd-post-action-button i,
.sd-post-actions .btn i {
    font-size: 1.42rem;
    line-height: 1;
}

.sd-post-actions .btn:hover,
.sd-post-actions .btn:focus-visible {
    background: rgba(255,255,255,.06);
    color: var(--bs-body-color);

    transform: translateY(-1px);
}

.sd-post-action-button.is-active {
    color: #d4a017 !important;
}

/* ==========================================================
   HEM – REAKTIONSVÄLJARE
   ========================================================== */

.sd-reaction-wrapper {
    position: relative;

    min-width: 0;
}

.sd-reaction-wrapper > .sd-post-action-button {
    width: 100%;
}

.sd-reaction-picker {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);

    z-index: 1000;

    visibility: hidden;

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(6px)
        scale(.97);

    pointer-events: none;

    transition:
        opacity .16s ease,
        transform .18s ease,
        visibility 0s linear .18s;
}

.sd-reaction-picker::after {
    content: "";

    position: absolute;
    top: 100%;
    left: 50%;

    width: 12px;
    height: 12px;

    background: #252830;

    border-right: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);

    transform:
        translate(-50%, -6px)
        rotate(45deg);
}

.sd-reaction-wrapper.is-open .sd-reaction-picker {
    visibility: visible;

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);

    pointer-events: auto;

    transition-delay: 0s;
}

.sd-reaction-picker-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: nowrap;
    gap: 5px;

    padding: 10px 12px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(45,48,57,.98),
            rgba(34,37,44,.98)
        );

    box-shadow:
        0 16px 38px rgba(0,0,0,.46),
        0 0 0 1px rgba(112,28,74,.10);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    white-space: nowrap;
}

.sd-reaction-option {
    flex: 0 0 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    min-width: 54px;
    min-height: 54px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        transform .14s ease,
        background-color .14s ease;
}

.sd-reaction-option:hover,
.sd-reaction-option:focus-visible {
    background: rgba(255, 255, 255, .07);

    outline: 0;

    transform:
        translateY(-3px)
        scale(1.08);
}

.sd-reaction-option.is-selected {
    background: rgba(112, 28, 74, .34);

    box-shadow:
        0 0 0 2px rgba(180, 74, 132, .28);
}

.sd-reaction-option-emoji {
    display: block;

    font-size: 2.4rem;
    line-height: 1;
}

/* Mobil */

@media (max-width: 575.98px) {

    .sd-reaction-picker {
        left: 0;
        right: auto;

        transform:
            translateX(0)
            translateY(6px)
            scale(.97);

        max-width: calc(100vw - 30px);
    }

    .sd-reaction-wrapper.is-open .sd-reaction-picker {
        transform:
            translateX(0)
            translateY(0)
            scale(1);
    }

    .sd-reaction-picker::after {
        left: 28px;
        transform:
            translateY(-6px)
            rotate(45deg);
    }
}
   
/* ==========================================================
   POST – REAKTIONSSAMMANFATTNING
   Visar exempelvis: 👍 5  ❤️ 2  😂 1
   ========================================================== */

.sd-post-reaction-summary {
    min-width: 0;
}

/* ==========================================================
   POST – REAKTIONSSAMMANFATTNING
   Små överlappande reaktionsikoner med antal
   ========================================================== */

.sd-post-reaction-summary {
    min-width: 0;
}

.sd-post-reaction-summary-items {
    display: inline-flex;
    align-items: center;

    min-width: 0;
}

.sd-post-reaction-summary-item {
    position: relative;

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    margin-left: -7px;

    white-space: nowrap;
}

.sd-post-reaction-summary-item:first-child {
    margin-left: 0;
}

.sd-post-reaction-summary-emoji {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;

    background: var(--sd-home-surface-2);

    font-size: 1.18rem;
    line-height: 1;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, .28);

    transition:
        transform .16s ease,
        z-index 0s;
}

.sd-post-reaction-summary-item:hover {
    z-index: 10;
}

.sd-post-reaction-summary-item:hover
.sd-post-reaction-summary-emoji {
    transform:
        translateY(-2px)
        scale(1.08);
}

.sd-post-reaction-summary-count {
    margin-left: 5px;

    color: var(--bs-secondary-color);

    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
}

.sd-post-reaction-summary-item:not(:last-child)
.sd-post-reaction-summary-count {
    margin-right: 8px;
}

.sd-post-reaction-summary-empty {
    color: var(--bs-secondary-color);

    font-size: .88rem;
}

.sd-post-reaction-summary:not(:disabled):hover
.sd-post-reaction-summary-count {
    color: var(--bs-body-color);
}

@media (max-width: 575.98px) {

    .sd-post-reaction-summary-item {
        margin-left: -6px;
    }

    .sd-post-reaction-summary-emoji {
        width: 26px;
        height: 26px;

        font-size: 1.08rem;
    }

    .sd-post-reaction-summary-count {
        margin-left: 4px;

        font-size: .82rem;
    }

    .sd-post-reaction-summary-item:not(:last-child)
    .sd-post-reaction-summary-count {
        margin-right: 6px;
    }

}

.sd-post-reaction-summary-empty {
    color: var(--bs-secondary-color);

    font-size: .88rem;
}

.sd-post-reaction-summary:not(:disabled):hover
.sd-post-reaction-summary-count {
    color: var(--bs-body-color);
}

/* Mobil */

@media (max-width: 575.98px) {

    .sd-post-reaction-summary-items {
        gap: 8px;
    }

    .sd-post-reaction-summary-item {
        gap: 3px;
    }

    .sd-post-reaction-summary-emoji {
        font-size: 1.08rem;
    }

    .sd-post-reaction-summary-count {
        font-size: .82rem;
    }

}


  /* ========================= NYA MEDLEMMAR ================================= */

.sd-member-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    overflow-x: auto;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sd-member-row::-webkit-scrollbar {
    display: none;
}

.sd-member {
    flex: 0 0 104px;

    min-width: 0;

    color: var(--bs-body-color);
    text-align: center;
    text-decoration: none;
}

.sd-member:hover {
    color: var(--bs-body-color);
}

.sd-member-avatar {
    display: flex;

    width: 66px;
    height: 66px;

    margin: 0 auto 7px;
}

.sd-member strong,
.sd-member small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-member strong {
    font-size: .8rem;
}

.sd-member small {
    margin-top: 2px;

    color: var(--bs-secondary-color);

    font-size: .72rem;
}

/* ========== EVENT =========================== */

.sd-event-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sd-event-date {
    flex: 0 0 54px;

    width: 54px;
    padding: 8px 4px;

    border: 1px solid rgba(217, 138, 184, .18);
    border-radius: 10px;

    background: rgba(112, 28, 74, .25);

    text-align: center;
}

.sd-event-date small,
.sd-event-date strong {
    display: block;
}

.sd-event-date small {
    color: #d6a1bf;

    font-size: .68rem;
    font-weight: 700;
}

.sd-event-date strong {
    margin-top: 1px;

    font-size: 1.1rem;
}

.sd-event-content {
    min-width: 0;
}

/* ==========================================================
   PULSEN
   ========================================================== */

.sd-pulse-box {
    height: 100%;
    padding: 12px;

    border: 1px solid var(--sd-home-border);
    border-radius: 10px;

    background: rgba(255, 255, 255, .025);
}

.sd-pulse-box strong,
.sd-pulse-box small {
    display: block;
}

.sd-pulse-box strong {
    margin-bottom: 2px;

    font-size: 1.1rem;
}

.sd-pulse-box small {
    color: var(--bs-secondary-color);

    font-size: .76rem;
}

/* ============= SURFPLATTA ================================== */

@media (max-width: 991.98px) {

    .sd-home-page {
        margin-top: .5rem;
    }

}

/* ========================================================== */


/* ===========   MOBIL   =================================== */

@media (max-width: 767.98px) {

    .sd-home-menu-container {
        margin-top: 5px;
        margin-bottom: .5rem;

        padding-right: 6px;
        padding-left: 6px;
    }

    .sd-home-page {
        padding-right: 6px;
        padding-left: 6px;
    }

    .sd-home-card {
        border-radius: 10px;
    }

    .sd-home-card > .card-header {
        min-height: 46px;
        padding: 9px 12px;
    }

    .sd-card-title {
        gap: 8px;
        font-size: 1.15rem;
    }

    .sd-spotlight-strip {
        gap: 10px;
        padding: 10px 8px;
    }

    .sd-spotlight-item {
        flex: 0 0 82px;
        min-width: 82px;
    }

    .sd-spotlight-avatar-wrap {
        width: 60px;
        height: 60px;
    }

    .sd-create-card-body {
        padding: 10px;
    }

    .sd-create-row {
        gap: 8px;
    }

    .sd-create-avatar,
    .sd-create-plus {
        flex-basis: 40px;

        width: 40px;
        height: 40px;
    }

    .sd-create-input {
        min-height: 40px;
        padding-right: 13px;
        padding-left: 13px;

        font-size: .86rem;
    }

    .sd-feed-tools-body {
        padding: 9px 10px;
    }

    .sd-feed-sort-button,
    .sd-feed-filter-button {
        min-height: 38px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        font-size: 1rem;
        font-weight: 400;
    }

    .sd-feed-sort-button i,
    .sd-feed-filter-button i {
        font-size: 1.12rem;
    }

    .sd-feed-filter-button {
        width: 38px;
    }

    .sd-hem-feed,
    .sd-hem-new-posts {
        gap: 12px;
    }

    .sd-post-header {
        min-height: 74px;
        padding: 12px 14px;
    }

    .sd-post-head {
        gap: 12px;
    }

    .sd-post-avatar {
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
    }

    .sd-post-user-name-row {
        gap: 6px;
    }

    .sd-post-user-link strong,
    .sd-post-user-name-row strong {
        font-size: .9rem;
    }

    .sd-post-profile-badge-verified {
        font-size: .86rem;
    }

    .sd-post-profile-badge-vip {
        font-size: .82rem;
    }

    .sd-post-meta {
        gap: 5px;
        margin-top: -5px;

        font-size: .76em;
    }

    .sd-post-body {
        padding: 18px 14px 20px;
    }

    .sd-post-text {
        font-size: 0.8rem;
        line-height: 1.58;
    }

    .sd-post-stats {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;

        min-height: 48px;
        padding: 11px 14px;

        font-size: .84rem;
    }

    .sd-post-stat-button {
        flex: 0 0 auto;
        gap: 3px;

        white-space: nowrap;
    }

    .sd-post-stat-button i {
        font-size: .9rem;
    }

    .sd-post-stat-button span {
        white-space: nowrap;
    }

    .sd-post-action-button,
    .sd-post-actions .btn {
        min-height: 50px;

        font-size: 1rem;
        font-weight: 400;
    }

    .sd-post-action-button i,
    .sd-post-actions .btn i {
        font-size: 1.62rem;
        font-weight: 200;
    }

}


   
  /* ======================= UPPLADDNINGSMODAL – MOBIL =================================== */

@media (max-width: 575.98px) {

    .sd-spotlight-upload-modal .modal-dialog {
        margin-right: 8px;
        margin-left: 8px;
    }

    .sd-spotlight-upload-modal .modal-header {
        padding: 12px;
    }

    .sd-spotlight-upload-modal .modal-body {
        padding: 14px 12px;
    }

    .sd-spotlight-modal-icon {
        flex-basis: 36px;

        width: 36px;
        height: 36px;
    }

    .sd-spotlight-modal-heading .modal-title {
        font-size: 1rem !important;
    }

    .sd-spotlight-upload-preview {
        gap: 10px;
        padding: 10px;
    }

    .sd-spotlight-preview-circle {
        flex-basis: 62px;

        width: 62px;
        height: 62px;
    }

}

/* ========================================================== */


/* ==========================================================
   SMÅ MOBILER
   ========================================================== */

@media (max-width: 420px) {

    .sd-home-menu-container,
    .sd-home-page {
        padding-right: 4px;
        padding-left: 4px;
    }

    .sd-spotlight-header-actions {
        gap: 7px;
    }

    .sd-spotlight-header-actions .sd-card-header-link {
        font-size: .72rem;
    }

    .sd-spotlight-empty {
        padding-right: 8px;
        padding-left: 8px;
    }

    .sd-feed-sort-button span {
        display: none;
    }

    .sd-feed-sort-button i {
        margin-right: 0 !important;
    }

    /* Dölj bara knapptexten på små mobiler – inte reaktionsemojin */
    .sd-post-actions .btn > span:not([data-reaction-trigger-icon]) {
        display: none;
    }

    /* Vald reaktion ska alltid synas */
    .sd-reaction-trigger [data-reaction-trigger-icon] {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        font-size: 1.62rem;
        line-height: 1;
    }

    .sd-post-actions .btn {
        font-size: .95rem;
    }


}


/*   SPOTLIGHT – KÖNSIKON
   ========================================================== */

.sd-spotlight-gender {
    position: relative;
    top: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 2px;

    font-size: .82rem;
    vertical-align: middle;
}

.sd-spotlight-gender i {
    display: block;
    line-height: 1;
}

/* ==========================================================
   SKAPA INLÄGG – MODAL ÖVER MENY OCH BACKDROP
   ========================================================== */

.sd-create-post-modal {
    z-index: 200000 !important;
}

.sd-create-post-modal .modal-dialog {
    position: relative;
    z-index: 200001;
}

.sd-create-post-modal .modal-content {
    position: relative;
    z-index: 1;

    overflow: hidden;

    border: 1px solid var(--sd-home-border);
    border-radius: var(--sd-home-radius);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .45);
}

/* ==========================================================
   NYTT INLÄGG – MJUK ENTRÉ
   ========================================================== */

.sd-post-enter {
    animation:
        sdPostEnter
        .62s
        cubic-bezier(.22, .61, .36, 1)
        both;
}

@keyframes sdPostEnter {
    from {
        opacity: 0;

        transform:
            translateY(-10px)
            scale(.992);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sd-post-enter {
        animation: none;
    }

}


/* ==========================================================
   POSTMEDIA
   ========================================================== */

.sd-post-media {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 360px;
    margin: 18px -18px -24px;

    background: #0a0b0e;
    color: #747a86;

    font-size: .9rem;
    font-weight: 700;
    text-align: center;
}

.sd-post-media-wrap {
    margin: 18px -18px -24px;

    overflow: hidden;

   /* background: #0a0b0e;*/
}

.sd-post-media-button {
    position: relative;

    display: block;

    width: 100%;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: #0a0b0e;
    color: #fff;
}

.sd-post-media-button img,
.sd-post-media-button video,
.sd-post-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}





.sd-post-media-grid {
    display: grid;
    gap: 3px;

    min-height: 260px;
    max-height: 600px;
}

.sd-post-media-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sd-post-media-grid-3,
.sd-post-media-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sd-post-media-grid-3 .sd-post-media-button:first-child {
    grid-row: 1 / span 2;
}

.sd-post-video-icon,
.sd-post-media-more {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.sd-post-video-icon {
    font-size: 1.4rem;

    text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

.sd-post-media-more {
    background: rgba(0, 0, 0, .52);

    font-size: 1.6rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {

    .sd-post-media,
    .sd-post-media-wrap {
        margin: 16px -14px -20px;
    }

    .sd-post-media {
        min-height: 280px;
    }

}

@media (max-width: 575.98px) {

    .sd-post-media-grid {
        min-height: 220px;
        max-height: 480px;
    }

}

@media (max-width: 420px) {

    .sd-post-media {
        min-height: 240px;
    }

}


/* ==========================================================
   POST – MJUK UTGÅNG
   ========================================================== */

.sd-post-leave {
    pointer-events: none;

    animation:
        sdPostLeave
        .38s
        cubic-bezier(.4, 0, .2, 1)
        forwards;
}

@keyframes sdPostLeave {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(.992);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sd-post-leave {
        animation: none;
    }

}

/* ==========================================================
   FEED – INFINITE SCROLL
   ========================================================== */

.sd-feed-sentinel {
    min-height: 40px;
}

.sd-feed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px;

    color: var(--bs-secondary-color);

    font-size: .8rem;
}

/* ==========================================================
   HEM – KOMMENTAR
   ========================================================== */

.sd-post-comments-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 18px 16px 20px;

    border-top: 1px solid var(--sd-home-border);
}

.sd-post-comment {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: 100%;
}

.sd-post-comment-avatar {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    overflow: hidden;

    border: 2px solid rgba(255, 255, 255, .12);
    border-radius: 50%;

    background: rgba(255, 255, 255, .06);
}

.sd-post-comment-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sd-post-comment-main {
    flex: 1 1 auto;

    min-width: 0;
}

.sd-post-comment-bubble {
    position: relative;

    display: block;

    width: 100%;
    max-width: 100%;
    padding: 13px 14px 12px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;

    background: rgba(255, 255, 255, .045);
    color: var(--bs-body-color);

    box-shadow: none;
}

.sd-post-comment-header {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-width: 0;
    margin-bottom: 6px;

    font-size: .98rem;
}

.sd-post-comment-header > a {
    min-width: 0;
}

.sd-post-comment-header strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-post-comment-time-top {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-left: auto;

    color: var(--bs-secondary-color);

    font-size: .78rem;
    font-weight: 400;
    line-height: 1.2;

    white-space: nowrap;
}

.sd-post-comment-time-top i {
    font-size: .9rem;
    line-height: 1;
}

.sd-post-comment-text {
    margin-top: 5px;

    color: var(--bs-body-color);

    font-size: .98rem;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.sd-post-comment-meta {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    margin-top: 18px;

    color: var(--bs-secondary-color);

    font-size: .88rem;
}

.sd-post-comment-meta-button,
.sd-post-comment-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 40px;
    min-height: 40px;
    padding: 7px 9px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: inherit;

    font: inherit;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;
}

.sd-post-comment-meta-button {
    cursor: pointer;

    transition:
        background-color .18s ease,
        color .18s ease;
}

.sd-post-comment-meta-button:hover,
.sd-post-comment-meta-button:focus-visible {
    background: rgba(255, 255, 255, .055);
    color: var(--bs-body-color);

    outline: 0;
}

.sd-post-comment-meta-button i,
.sd-post-comment-time i {
    font-size: 1.14rem;
    line-height: 1;
}

.sd-post-comment-delete-button {
    margin-left: auto;
}

.sd-post-comment-delete-button:hover,
.sd-post-comment-delete-button:focus-visible {
    color: #dc3545;
}

.sd-post-comment-like-count {
    color: var(--bs-secondary-color);

    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
}

.sd-post-comment-meta-button.is-active,
.sd-post-comment-meta-button.is-active i,
.sd-post-comment-meta-button.is-active .sd-post-comment-like-count {
    color: #d4a017 !important;
}

.sd-post-comment-composer {
    padding: 12px 14px;

    border-top: 1px solid var(--sd-home-border);
}

@media (max-width: 575.98px) {

    .sd-post-comments-preview {
        gap: 12px;

        padding: 14px 10px 16px;
    }

    .sd-post-comment {
        gap: 9px;
    }

    .sd-post-comment-avatar {
        flex-basis: 40px;

        width: 40px;
        height: 40px;
    }

    .sd-post-comment-bubble {
        padding: 12px;
    }

    .sd-post-comment-header {
        gap: 7px;

        font-size: .93rem;
    }

    .sd-post-comment-time-top {
        gap: 4px;

        font-size: .7rem;
    }

    .sd-post-comment-time-top i {
        font-size: .8rem;
    }

    .sd-post-comment-text {
        font-size: .94rem;
    }

    .sd-post-comment-meta {
        gap: 6px;

        margin-top: 16px;
    }

    .sd-post-comment-meta-button,
    .sd-post-comment-time {
        min-width: 42px;
        min-height: 42px;
        padding: 8px;
    }

    .sd-post-comment-meta-button i,
    .sd-post-comment-time i {
        font-size: 1.12rem;
    }

    .sd-post-comment-time {
        min-width: 0;
    }


    

}

/* ==========================================================
   KOMMENTAR – MJUK ENTRÉ
   ========================================================== */

.sd-comment-enter {
    animation:
        sdCommentEnter
        .42s
        cubic-bezier(.22, .61, .36, 1)
        both;
}

@keyframes sdCommentEnter {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sd-comment-enter {
        animation: none;
    }

}

/* ==========================================================
   HEM – KOMMENTAR BORTTAGNING
   ========================================================== */

.sd-comment-leave {
    pointer-events: none;
    overflow: hidden;

    animation:
        sdCommentLeave .34s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes sdCommentLeave {

    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 200px;
        margin-top: 0;
        margin-bottom: 8px;
    }

    40% {
        opacity: .55;
        transform: translateY(-3px) scale(.985);
    }

    100% {
        opacity: 0;
        transform: translateY(-8px) scale(.96);
        max-height: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

}

@media (prefers-reduced-motion: reduce) {

    .sd-comment-leave {
        animation: none;
    }

}


/* ==========================================================
   SWINGERSDATE – SPOTLIGHT
   Desktop: 2 hela kort + en bit av tredje
   Mobil:   1 helt kort + en bit av nästa
   Alltid EN rad
   ========================================================== */


/* ==========================================================
   BODY
   ========================================================== */

.sd-spotlight-toast-card-body {
    padding: 12px;
    overflow: hidden;
}


/* ==========================================================
   YTTRE LAYOUT
   ========================================================== */

.sd-spotlight-toast-layout {
    display: flex;
    align-items: stretch;

    width: 100%;
    min-width: 0;

    overflow: hidden;
}


/* ==========================================================
   STAGE – DESKTOP

   44 + 44 + 44 %
   = två hela kort och en bit av kort nummer tre.

   VIKTIGT:
   grid-template-rows: 1fr gör att inget kort kan
   hamna på en andra rad.
   ========================================================== */

.sd-spotlight-toast-stage {
    position: relative;

    flex: 1 1 auto;

    display: grid;

    grid-template-columns:
        44%
        44%
        44%;

    grid-template-rows: 1fr;

    grid-auto-flow: column;

    gap: 10px;

    width: 100%;
    min-width: 0;

    min-height: 106px;

    overflow: hidden;
}


/* ==========================================================
   SLOT
   ========================================================== */

.sd-spotlight-toast-slot {
    position: relative;

    grid-row: 1;

    width: 100%;
    min-width: 0;

    min-height: 106px;

    overflow: hidden;

    border-radius: 11px;

    contain: layout paint;
}


/* Kort nummer 3 är preview på desktop */

.sd-spotlight-toast-slot[data-sd-spotlight-slot="2"] {
    opacity: .86;
}


/* ==========================================================
   TOAST ITEM – GRUNDLÄGE
   ========================================================== */

.sd-spotlight-toast-item {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    transform:
        translate3d(22px, 0, 0)
        scale(.985);

    pointer-events: none;

    backface-visibility: hidden;

    will-change:
        transform,
        opacity;
}


/* ==========================================================
   SWIPE + BOUNCE IN

   Kortet:
   1. kommer från höger
   2. passerar mycket lite över 100 %
   3. landar exakt på 100 %
   ========================================================== */

.sd-spotlight-toast-item.is-visible {
    opacity: 1;

    pointer-events: auto;

    animation:
        sdSpotlightSwipeBounceIn
        .58s
        cubic-bezier(.22, .61, .36, 1)
        both;
}


@keyframes sdSpotlightSwipeBounceIn {

    0% {
        opacity: 0;

        transform:
            translate3d(22px, 0, 0)
            scale(.985);
    }

    68% {
        opacity: 1;

        transform:
            translate3d(-2px, 0, 0)
            scale(1.012);
    }

    84% {
        transform:
            translate3d(1px, 0, 0)
            scale(.997);
    }

    100% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

}


/* ==========================================================
   SWIPE UT ÅT VÄNSTER
   ========================================================== */

.sd-spotlight-toast-item.is-leaving {
    opacity: 0;

    pointer-events: none;

    animation:
        sdSpotlightSwipeOut
        .46s
        cubic-bezier(.4, 0, .2, 1)
        both;
}


@keyframes sdSpotlightSwipeOut {

    0% {
        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate3d(-22px, 0, 0)
            scale(.992);
    }

}


/* ==========================================================
   SJÄLVA KORTET
   ========================================================== */

.sd-spotlight-inline-toast {
    position: relative;

    display: flex;
    align-items: center;

    gap: 14px;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 106px;

    padding:
        15px
        16px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(39, 42, 49, .98),
            rgba(28, 30, 36, .98)
        );

    color: #fff;

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, .22);

    text-decoration: none;

    backface-visibility: hidden;

    transform: translateZ(0);

    transition:
        background .16s ease,
        border-color .16s ease;
}


/* ==========================================================
   HOVER
   ========================================================== */

.sd-spotlight-inline-toast:hover,
.sd-spotlight-inline-toast:focus-visible {
    color: #fff;
    text-decoration: none;

    outline: 0;

    border-color:
        rgba(255, 255, 255, .18);

    background:
        linear-gradient(
            135deg,
            rgba(44, 47, 55, .98),
            rgba(32, 34, 40, .98)
        );
}


/* ==========================================================
   INNEHÅLL
   ========================================================== */

.sd-spotlight-inline-toast-content {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;
}


/* ==========================================================
   RUBRIK
   ========================================================== */

.sd-spotlight-inline-toast-title {
    display: flex;
    align-items: center;

    gap: 5px;

    width: 100%;
    min-width: 0;

    margin-bottom: 4px;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}


.sd-spotlight-inline-toast-title-main {
    display: flex;
    align-items: center;

    gap: 5px;

    min-width: 0;

    overflow: hidden;
}


.sd-spotlight-inline-toast-title-text {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   KÖNSIKON
   ========================================================== */

.sd-spotlight-inline-toast-gender {
    position: relative;

    top: -1px;

    flex: 0 0 auto;

    font-size: .80rem;
}


/* ==========================================================
   TID
   ========================================================== */

.sd-spotlight-inline-toast-time {
    flex: 0 0 auto;

    margin-left: auto;

    color:
        rgba(255, 255, 255, .48);

    font-size: .64rem;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;
}


/* ==========================================================
   MEDDELANDE
   ========================================================== */

.sd-spotlight-inline-toast-message {
    display: -webkit-box;

    overflow: hidden;

    color:
        rgba(255, 255, 255, .80);

    font-size: .88rem;
    line-height: 1.38;

    overflow-wrap: anywhere;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* ==========================================================
   PROGRESS
   ========================================================== */

.sd-spotlight-toast-progress {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 2px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .035);

    pointer-events: none;
}


.sd-spotlight-toast-progress-bar {
    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            rgba(212, 160, 23, .90),
            rgba(112, 28, 74, .94)
        );

    transform: scaleY(0);

    transform-origin:
        top center;

    will-change:
        transform;
}


.sd-spotlight-inline-toast.is-visible
.sd-spotlight-toast-progress-bar {
    animation:
        sdSpotlightToastProgressVertical
        var(--sd-toast-duration, 12s)
        linear
        forwards;
}


@keyframes sdSpotlightToastProgressVertical {

    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }

}


/* ==========================================================
   AVATAR
   ========================================================== */

.sd-spotlight-toast-avatar-wrap {
    position: relative;

    flex:
        0 0
        58px;

    display: block;

    width: 58px;
    height: 58px;
}


.sd-spotlight-toast-avatar {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 50%;

    background: #292c33;
}


.sd-spotlight-toast-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   RING
   ========================================================== */

.sd-spotlight-toast-ring {
    position: absolute;

    inset: -2px;

    z-index: 3;

    display: block;

    border:
        3px solid
        rgba(255, 255, 255, .70);

    border-radius: 50%;

    pointer-events: none;
}


.sd-spotlight-toast-ring.gender-man,
.sd-spotlight-toast-ring.paras-man {
    border-color: #007bff;

    box-shadow:
        0 0 7px
        rgba(0, 123, 255, .45);
}


.sd-spotlight-toast-ring.gender-kvinna,
.sd-spotlight-toast-ring.paras-kvinna {
    border-color: #e83e8c;

    box-shadow:
        0 0 7px
        rgba(232, 62, 140, .45);
}


.sd-spotlight-toast-ring.paras-hemligt {
    border-color:
        rgba(255, 255, 255, .9);

    box-shadow:
        0 0 7px
        rgba(255, 255, 255, .22);
}


.sd-spotlight-toast-ring.paras-bada {
    animation:
        sdSpotlightToastCoupleRing
        4.6s
        ease-in-out
        infinite;
}


@keyframes sdSpotlightToastCoupleRing {

    0%,
    100% {
        border-color: #e83e8c;

        box-shadow:
            0 0 7px
            rgba(232, 62, 140, .45);
    }

    50% {
        border-color: #007bff;

        box-shadow:
            0 0 7px
            rgba(0, 123, 255, .45);
    }

}


/* ==========================================================
   STATUS
   ========================================================== */

.sd-spotlight-toast-status {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 8;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    border:
        2px solid
        #fff;

    border-radius: 50%;
}


.sd-spotlight-toast-status.is-online {
    background: #28a745;

    box-shadow:
        0 0 5px
        rgba(40, 167, 69, .75);
}


.sd-spotlight-toast-status.is-recent {
    background: #ffc107;

    box-shadow:
        0 0 5px
        rgba(255, 193, 7, .75);
}


.sd-spotlight-toast-status i {
    position: relative;

    top: 1px;

    color: #fff;

    font-size: 6px;
    line-height: 1;
}


/* ==========================================================
   PLUS
   ========================================================== */

.sd-spotlight-toast-plus {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 7;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border:
        2px solid
        rgba(255, 255, 255, .65);

    border-radius: 50%;

    background:
        var(--sd-primary);

    color: #fff;

    font-size: 12px;

    transform:
        translate(-50%, -50%);
}


/* ==========================================================
   LÄGG TILL
   ========================================================== */

.sd-spotlight-toast-add {
    flex: 0 0 190px;

    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
    min-height: 106px;

    padding: 14px;

    border:
        1px solid
        var(--sd-home-border);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .025);

    color:
        var(--bs-body-color);

    text-align: left;

    transition:
        background-color .16s ease,
        border-color .16s ease;
}


.sd-spotlight-toast-add:hover,
.sd-spotlight-toast-add:focus-visible {
    border-color:
        rgba(255, 255, 255, .17);

    background:
        rgba(255, 255, 255, .04);

    outline: 0;
}


.sd-spotlight-toast-add-text {
    min-width: 0;
}


.sd-spotlight-toast-add-text strong,
.sd-spotlight-toast-add-text small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.sd-spotlight-toast-add-text strong {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}


.sd-spotlight-toast-add-text small {
    margin-top: 3px;

    color:
        var(--bs-secondary-color);

    font-size: .82rem;
    line-height: 1.35;
}


/* ==========================================================
   TOMSTATUS
   ========================================================== */

.sd-spotlight-toast-empty {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 106px;

    border:
        1px dashed
        rgba(255, 255, 255, .10);

    border-radius: 11px;

    color:
        var(--bs-secondary-color);
}


.sd-spotlight-toast-empty > i {
    color:
        var(--sd-accent);
}


.sd-spotlight-toast-empty strong,
.sd-spotlight-toast-empty small {
    display: block;
}


.sd-spotlight-toast-empty strong {
    color:
        var(--bs-body-color);

    font-size: .90rem;
}


.sd-spotlight-toast-empty small {
    margin-top: 2px;

    font-size: .76rem;
}


/* ==========================================================
   MOBIL

   PHP använder två aktiva slots:
   slot 0 = hela kortet
   slot 1 = nästa som sticker fram

   slot 2 döljs.
   ========================================================== */

@media (max-width: 767.98px) {

    .sd-spotlight-toast-card-body {
        padding:
            8px
            6px;
    }


    .sd-spotlight-toast-stage {
        display: grid;

        grid-template-columns:
            86%
            86%;

        grid-template-rows: 1fr;

        grid-auto-flow: column;

        gap: 8px;

        width: 100%;

        min-width: 0;
        min-height: 96px;

        overflow: hidden;
    }


    .sd-spotlight-toast-slot {
        grid-row: 1;

        min-height: 96px;
    }


    .sd-spotlight-toast-slot[data-sd-spotlight-slot="0"],
    .sd-spotlight-toast-slot[data-sd-spotlight-slot="1"] {
        display: block;
    }


    .sd-spotlight-toast-slot[data-sd-spotlight-slot="1"] {
        opacity: .86;
    }


    .sd-spotlight-toast-slot[data-sd-spotlight-slot="2"] {
        display: none;
    }


    /* Mobil – lite mindre swipe/bounce */

    .sd-spotlight-toast-item {
        height: 96px;

        transform:
            translate3d(14px, 0, 0)
            scale(.990);
    }


    .sd-spotlight-toast-item.is-visible {
        animation:
            sdSpotlightSwipeBounceInMobile
            .52s
            cubic-bezier(.22, .61, .36, 1)
            both;
    }


    @keyframes sdSpotlightSwipeBounceInMobile {

        0% {
            opacity: 0;

            transform:
                translate3d(14px, 0, 0)
                scale(.990);
        }

        68% {
            opacity: 1;

            transform:
                translate3d(-1px, 0, 0)
                scale(1.008);
        }

        84% {
            transform:
                translate3d(1px, 0, 0)
                scale(.998);
        }

        100% {
            opacity: 1;

            transform:
                translate3d(0, 0, 0)
                scale(1);
        }

    }


    .sd-spotlight-toast-item.is-leaving {
        animation:
            sdSpotlightSwipeOutMobile
            .40s
            cubic-bezier(.4, 0, .2, 1)
            both;
    }


    @keyframes sdSpotlightSwipeOutMobile {

        from {
            opacity: 1;

            transform:
                translate3d(0, 0, 0)
                scale(1);
        }

        to {
            opacity: 0;

            transform:
                translate3d(-14px, 0, 0)
                scale(.994);
        }

    }


    .sd-spotlight-inline-toast {
        min-height: 96px;

        padding:
            12px
            13px;

        gap: 12px;
    }


    .sd-spotlight-toast-avatar-wrap {
        flex:
            0 0
            56px;

        width: 56px;
        height: 56px;
    }


    .sd-spotlight-inline-toast-title {
        margin-bottom: 4px;

        font-size: .96rem;
    }


    .sd-spotlight-inline-toast-time {
        font-size: .61rem;
    }


    .sd-spotlight-inline-toast-message {
        font-size: .85rem;
        line-height: 1.34;
    }


    .sd-spotlight-toast-add {
        flex: 0 0 70px;

        width: 70px;
        min-width: 70px;

        min-height: 96px;

        padding:
            8px
            5px;

        justify-content: center;
    }


    .sd-spotlight-toast-add-text {
        display: none;
    }

}


/* ==========================================================
   EXTRA SMAL MOBIL
   ========================================================== */

@media (max-width: 420px) {

    .sd-spotlight-toast-card-body {
        padding:
            7px
            5px;
    }


    .sd-spotlight-toast-stage {
        grid-template-columns:
            88%
            88%;

        gap: 7px;
    }


    .sd-spotlight-inline-toast {
        padding:
            11px
            12px;

        gap: 10px;
    }


    .sd-spotlight-toast-avatar-wrap {
        flex:
            0 0
            53px;

        width: 53px;
        height: 53px;
    }


    .sd-spotlight-inline-toast-title {
        font-size: .92rem;
    }


    .sd-spotlight-inline-toast-time {
        font-size: .58rem;
    }


    .sd-spotlight-inline-toast-message {
        font-size: .82rem;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sd-spotlight-toast-item,
    .sd-spotlight-toast-item.is-visible,
    .sd-spotlight-toast-item.is-leaving {
        animation: none !important;

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }


    .sd-spotlight-toast-progress-bar {
        animation: none !important;

        transform:
            scaleY(1) !important;
    }


    .sd-spotlight-toast-ring.paras-bada {
        animation: none !important;

        border-color:
            #b44a84;
    }

}

/* ==========================================================
   POST – AVATAR MED STATUSPRICK
   ========================================================== */

.sd-post-avatar-status-wrap {
    position: relative;

    flex: 0 0 60px;

    display: inline-block;

    width: 60px;
    height: 60px;
}

.sd-post-avatar-status-wrap .sd-post-avatar {
    display: flex;

    width: 100%;
    height: 100%;
}

.sd-post-avatar-status-wrap .sd-spotlight-toast-status {
    right: -1px;
    bottom: -1px;
}

@media (max-width: 767.98px) {

    .sd-post-avatar-status-wrap {
        flex-basis: 54px;

        width: 54px;
        height: 54px;
    }

}

/* ==========================================================
   GEMENSAM VIP-IKON
   Kan återanvändas i post, profil, kommentarer och Spotlight.
   ========================================================== */

.sd-vip-icon {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--sd-vip-icon-size, 24px);
    height: var(--sd-vip-icon-size, 24px);

    line-height: 1;
    vertical-align: middle;

    user-select: none;
}

.sd-vip-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, .42));

    transform-origin: 50% 75%;

    animation:
        sdVipIconSway
        4.8s
        ease-in-out
        infinite;
}

/* Storlekar */

.sd-vip-icon--xs {
    --sd-vip-icon-size: 18px;
}

.sd-vip-icon--sm {
    --sd-vip-icon-size: 22px;
}

.sd-vip-icon--md {
    --sd-vip-icon-size: 28px;
}

.sd-vip-icon--lg {
    --sd-vip-icon-size: 38px;
}

.sd-vip-icon--xl {
    --sd-vip-icon-size: 48px;
}

/* Diskret svajning */

@keyframes sdVipIconSway {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2.5deg);
    }

    50% {
        transform:
            translateY(-2px)
            rotate(2.5deg);
    }

}

/* Stoppa rörelsen när användaren önskar mindre animation */

@media (prefers-reduced-motion: reduce) {

    .sd-vip-icon img {
        animation: none;
    }

}

/* ==========================================================
   REAKTIONER – MODAL
   ========================================================== */

.sd-reaction-users-modal .modal-dialog{
    max-width:520px;
}

.sd-reaction-users-modal .modal-content{
    overflow:hidden;

    border:1px solid var(--sd-home-border);
    border-radius:18px;

    background:var(--sd-home-surface);

    box-shadow:
        0 24px 70px rgba(0,0,0,.45);
}

/* ==========================================================
   HEADER
   ========================================================== */

.sd-reaction-users-heading{
    display:flex;
    align-items:center;
    gap:14px;
}

.sd-reaction-users-heading-icon{

    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:50%;

    background:rgba(112,28,74,.18);

    color:var(--sd-accent);

    font-size:1.15rem;
}

.sd-reaction-users-heading h2{
    margin:0;
}

.sd-reaction-users-heading small{
    display:block;
    margin-top:2px;
}

/* ==========================================================
   FILTERKNAPPAR
   ========================================================== */

.sd-reaction-users-tabs{

    display:flex;
    align-items:center;
    gap:8px;

    overflow-x:auto;

    padding:14px;

    border-top:1px solid var(--sd-home-border);
    border-bottom:1px solid var(--sd-home-border);

    scrollbar-width:none;
}

.sd-reaction-users-tabs::-webkit-scrollbar{
    display:none;
}

.sd-reaction-users-tab{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;

    background:rgba(255,255,255,.03);

    color:var(--bs-body-color);

    cursor:pointer;

    transition:.18s;
}

.sd-reaction-users-tab:hover{

    background:rgba(112,28,74,.12);

    border-color:rgba(180,74,132,.45);
}

.sd-reaction-users-tab.is-active{

    background:rgba(112,28,74,.22);

    border-color:var(--sd-accent);
}

.sd-reaction-users-tab-count{

    opacity:.75;
    font-size:.85rem;
}

/* ==========================================================
   LISTA
   ========================================================== */

.sd-reaction-users-list{

    display:flex;
    flex-direction:column;
}

/* ==========================================================
   RAD
   ========================================================== */

.sd-reaction-user{

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 18px;

    border-bottom:1px solid rgba(255,255,255,.05);

    text-decoration:none;
    color:inherit;

    transition:.18s;
}

.sd-reaction-user:hover{

    background:rgba(255,255,255,.035);

    color:inherit;
}

.sd-reaction-user:last-child{

    border-bottom:0;
}

/* ==========================================================
   AVATAR
   ========================================================== */

.sd-reaction-user-avatar{

    position:relative;

    flex:0 0 58px;

    width:58px;
    height:58px;
}

.sd-reaction-user-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;
}

/* ==========================================================
   INFO
   ========================================================== */

.sd-reaction-user-info{

    flex:1 1 auto;
    min-width:0;
}

.sd-reaction-user-name{

    display:flex;
    align-items:center;
    gap:6px;

    margin-bottom:4px;

    font-size:1rem;
    font-weight:600;
}

.sd-reaction-user-meta{

    color:var(--bs-secondary-color);

    font-size:.83rem;
}

/* ==========================================================
   REAKTION
   ========================================================== */

.sd-reaction-user-reaction{

    flex:0 0 auto;

    font-size:1.7rem;

    transition:transform .18s;
}

.sd-reaction-user:hover
.sd-reaction-user-reaction{

    transform:scale(1.15);
}

/* ==========================================================
   TOM
   ========================================================== */

.sd-reaction-users-empty{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:45px 20px;

    text-align:center;
}

.sd-reaction-users-empty i{

    font-size:2rem;

    color:var(--sd-accent);
}

/* ==========================================================
   MOBIL
   ========================================================== */

@media(max-width:575px){

.sd-reaction-user{

    gap:10px;
    padding:12px;
}

.sd-reaction-user-avatar{

    width:52px;
    height:52px;

    flex:0 0 52px;
}

.sd-reaction-user-reaction{

    font-size:1.45rem;
}

}

/* ==========================================================
   REAKTIONSMODAL – ÖVER BACKDROP OCH MENY
   ========================================================== */

.sd-reaction-users-modal {
    z-index: 200000 !important;
}

.sd-reaction-users-modal .modal-dialog {
    position: relative;
    z-index: 200001;
}

.sd-reaction-users-modal .modal-content {
    position: relative;
    z-index: 1;
}

/* =========================================================
   Könsikon efter profilnamn
========================================================= */

.sd-post-gender{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-left:4px;
    margin-right:2px;

    font-size:1em;      /* Samma storlek som namnet */
    line-height:1;

    color:inherit;      /* Samma färg som profilnamnet */
    opacity:.9;

    vertical-align:middle;
}

.sd-post-gender i{
    color:inherit;
}

/* =========================================================
   Reaktionsmodal - ikon i rubrik
========================================================= */

.sd-reaction-users-heading-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:50%;

    background:var(--bs-secondary-bg);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);

    flex-shrink:0;
}

.sd-reaction-users-heading-icon i{
    color:#fff;
    font-size:1.2rem;
    line-height:1;
}

/* ==========================================================
   KOMMENTARSVAR
   ========================================================== */

.sd-post-comment-reply-composer {
    margin-top: 10px;
    margin-left: 54px;
}

.sd-post-comment-replies {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 10px;
    margin-left: 54px;
}

.sd-post-comment-replies:empty {
    display: none;
}

.sd-post-comment.is-reply {
    width: 100%;
}

.sd-post-comment.is-reply .sd-post-comment-avatar {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;
}

.sd-post-comment.is-reply .sd-post-comment-bubble {
    padding: 11px 12px;
}

.sd-post-comment.is-reply .sd-post-comment-text {
    font-size: .94rem;
}

.sd-post-comment.is-reply .sd-post-comment-header {
    font-size: .92rem;
}

/* ==========================================================
   KOMMENTARSVAR – INDRA G
   ========================================================== */

.sd-post-comment-replies {
    margin-top: 10px;
    margin-left: 42px;
}

.sd-post-comment-reply-composer {
    margin-top: 10px;
    margin-left: 42px;
}

/* Mobil */
@media (max-width: 575.98px) {

    .sd-post-comment-replies,
    .sd-post-comment-reply-composer {
        margin-left: 8px;
    }

    .sd-post-comment.is-reply {
        gap: 8px;
    }

    .sd-post-comment.is-reply .sd-post-comment-avatar {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

}

/* Könsikon i kommentarer och svar */

.sd-post-comment-gender {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: inherit;

    font-size: inherit;
    line-height: 1;
}

.sd-post-comment-gender i {
    display: block;

    color: inherit;

    font-size: inherit;
    line-height: 1;
}

/* ==========================================================
   KOMMENTAR – AVATAR MED STATUSPRICK
   ========================================================== */

.sd-post-comment-avatar-status-wrap {
    position: relative;

    flex: 0 0 44px;

    display: inline-block;

    width: 44px;
    height: 44px;
}

.sd-post-comment-avatar-status-wrap
.sd-post-comment-avatar {
    display: flex;

    width: 100%;
    height: 100%;
}

.sd-post-comment-avatar-status-wrap
.sd-spotlight-toast-status {
    right: -1px;
    bottom: -1px;
}

@media (max-width: 575.98px) {

    .sd-post-comment-avatar-status-wrap {
        flex-basis: 40px;

        width: 40px;
        height: 40px;
    }

    .sd-post-comment.is-reply
    .sd-post-comment-avatar-status-wrap {
        flex-basis: 32px;

        width: 32px;
        height: 32px;
    }

}

/* ==========================================================
   KOMMENTARSVAR – MINDRE ONLINEPRICK
   ========================================================== */

.sd-post-comment.is-reply
.sd-spotlight-toast-status {
    width: 14px;
    height: 14px;

    right: -2px;
    bottom: -2px;

    border-width: 2px;
}

.sd-post-comment.is-reply
.sd-spotlight-toast-status i {
    top: 0;

    font-size: 6px;
    line-height: 1;
}

/* =========================================================
   💕 Ömsesidigt gillande
   ========================================================= */

.sd-mutual-hearts {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 3px;
    margin-right: 3px;

    vertical-align: middle;
    visibility: visible !important;
    opacity: 1 !important;
}

.sd-mutual-hearts .fa-heart {
    display: inline-block !important;
    position: static;

    font-size_: 14px;
    line-height: 1;

    visibility: visible !important;
    opacity: 1 !important;
}

.sd-mutual-hearts .fa-heart:first-child {
    transform: rotate(-10deg);
}

.sd-mutual-hearts .fa-heart:last-child {
    transform: rotate(10deg);
}

/* =========================================================
   SKAPA INLÄGG – MODAL Z-INDEX
   ========================================================= */

#createPostModal {
    z-index: 20000 !important;
}

#createPostModal .modal-dialog {
    position: relative;
    z-index: 20001 !important;
}

#createPostModal .modal-content {
    position: relative;
    z-index: 20002 !important;
}

.modal-backdrop {
    z-index: 19990 !important;
}

/* =========================================================
   SKAPA INLÄGG – MEDIA UPLOAD
   ========================================================= */

.sd-post-drop-area {
    border: 1px dashed var(--bs-border-color);
    border-radius: .75rem;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

.sd-post-drop-area:hover,
.sd-post-drop-area.is-dragover {
    border-color: var(--bs-primary);

    background:
        rgba(
            var(--bs-primary-rgb),
            .06
        );
}

.sd-post-drop-area.is-dragover {
    transform: scale(.995);
}


/* =========================================================
   PREVIEW GRID
   ========================================================= */

.sd-post-media-preview {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;
}

/* =========================================================
   BILDPREVIEW I SKAPA INLÄGG
   ========================================================= */

.sd-post-preview-item {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: .65rem;

    background: var(--bs-tertiary-bg);
}

.sd-post-preview-media {
    width: 100%;
    height: auto;
}

.sd-post-preview-media img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.sd-post-preview-media video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sd-post-preview-media {
    width: 100%;
    height: 100%;
}

.sd-post-preview-media img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.sd-post-preview-media video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sd-post-preview-remove {
    position: absolute;
    z-index: 2;

    top: 6px;
    right: 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    padding: 0;

    border-radius: 50%;
}


/* =========================================================
   VIDEO I PREVIEW – ENSAM, INGEN GRID
   ========================================================= */

.sd-post-preview-item-video {
    grid-column: 1 / -1;

    width: 100%;

    aspect-ratio: auto;
}

.sd-post-preview-item-video .sd-post-preview-media {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: auto;
}

.sd-post-preview-item-video video {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 420px;

    margin: 0 auto;

    object-fit: contain;
}


/* =========================================================
   PREVIEW – MOBIL
   ========================================================= */

@media (max-width: 575.98px) {

    .sd-post-media-preview {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}




/* =========================================================
   HEM – MEDIA GEMENSAMT
   ========================================================= */

.sd-post-media-wrap {
    overflow: hidden;
}


/* =========================================================
   2 BILDER
   50 / 50
   ========================================================= */

.sd-post-media-two {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 3px;

    width: 100%;

    align-items: start;

    overflow: hidden;

    background: #0a0b0e;
}

.sd-post-media-two-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #0a0b0e;
}

.sd-post-media-two-item img,
.sd-post-media-two-item video {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;
    object-position: center;

    background: #0a0b0e;
}


/* =========================================================
   3–5 BILDER

   Bild 1 = stor huvudbild
   Bild 2–3 = högerkolumn
   Bild 4–5 = underrad
   ========================================================= */

.sd-post-media-featured {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 3px;

    overflow: hidden;

    background: #0a0b0e;

    overflow-anchor: none;
}


/* =========================================================
   ÖVRE DEL

   Huvudbilden bestämmer höjden.
   Högerkolumnen fyller exakt samma höjd.
   ========================================================= */

.sd-post-media-featured-top {
    position: relative;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    background: #0a0b0e;

    overflow-anchor: none;
}


/* =========================================================
   HUVUDBILD

   Samma proportioner i desktop och mobil.
   ========================================================= */

.sd-post-media-featured-main {
    display: block;

    width: calc(72% - 1.5px);

    min-width: 0;

    overflow: hidden;

    background: #0a0b0e;
}

.sd-post-media-featured-main img,
.sd-post-media-featured-main video {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;
    object-position: center;

    background: #0a0b0e;
}


/* =========================================================
   HÖGERKOLUMN

   Två små bilder.
   Kolumnen är exakt lika hög som huvudbilden.
   ========================================================= */

.sd-post-media-featured-right {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    display: grid;

    grid-template-rows:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 3px;

    width: 28%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #0a0b0e;
}

.sd-post-media-featured-right-item {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #0a0b0e;
}


/* =========================================================
   UNDERRAD

   4 bilder = en bild under
   5 bilder = två bilder under
   ========================================================= */

.sd-post-media-featured-bottom {
    display: grid;

    gap: 3px;

    width: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #0a0b0e;
}


/* 4 bilder totalt */

.sd-post-media-featured-bottom-1 {
    grid-template-columns:
        minmax(0, 1fr);

    aspect-ratio: 16 / 4.5;
}


/* 5 bilder totalt */

.sd-post-media-featured-bottom-2 {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    aspect-ratio: 16 / 4.5;
}


/* =========================================================
   ALLA SMÅBILDER

   VIKTIGT:
   Småbilder ska ALLTID fylla hela sin ruta.
   Ingen contain används här.
   ========================================================= */

.sd-post-media-featured-thumb {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    padding: 0;
    margin: 0;

    overflow: hidden;

    border: 0;

    background: #0a0b0e;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}


/*
 * ALLA thumbnails använder cover.
 *
 * Även om Javascript tidigare har lagt på
 * sd-fit-contain eller sd-fit-cover ska bilden
 * fortfarande fylla hela rutan.
 */

.sd-post-media-featured-thumb img,
.sd-post-media-featured-thumb video,
.sd-post-media-featured-thumb img.sd-fit-contain,
.sd-post-media-featured-thumb img.sd-fit-cover {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: cover !important;
    object-position: center;

    background: #0a0b0e;

    filter:
        grayscale(1)
        blur(.8px)
        brightness(.82);

    transform: none;

    transition:
        filter .2s ease,
        transform .2s ease;
}


/* =========================================================
   HOVER – ENDAST DATOR / MUS
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .sd-post-media-featured-thumb:hover img,
    .sd-post-media-featured-thumb:hover video {
        filter:
            grayscale(.5)
            blur(.2px)
            brightness(.96);

        transform: scale(1.03);
    }

}


/* =========================================================
   MOBIL

   Vi ändrar INTE längre huvudbilden till 73/27.
   Mobil använder samma 72/28 som desktop.
   ========================================================= */

@media (max-width: 767.98px) {

    .sd-post-media-featured-main {
        width: calc(72% - 1.5px);
    }

    .sd-post-media-featured-right {
        width: 28%;
    }


    .sd-post-media-featured-bottom-1,
    .sd-post-media-featured-bottom-2 {
        aspect-ratio: 16 / 5.3;
    }

}


/* =========================================================
   EXTRA SMAL MOBIL

   Behåll också 72/28 här.
   ========================================================= */

@media (max-width: 420px) {

    .sd-post-media-featured-main {
        width: calc(72% - 1.5px);
    }

    .sd-post-media-featured-right {
        width: 28%;
    }


    .sd-post-media-featured-bottom-1,
    .sd-post-media-featured-bottom-2 {
        aspect-ratio: 16 / 5.8;
    }

}


/* =========================================================
   MOBIL / TOUCH – FEEDBACK PÅ SMÅBILDER
   ========================================================= */

.sd-post-media-featured-thumb:active img,
.sd-post-media-featured-thumb:active video {
    filter:
        grayscale(.25)
        blur(0)
        brightness(1);

    transform: scale(.985);
}


/* =========================================================
   TANGENTBORD / FOKUS
   ========================================================= */

.sd-post-media-featured-thumb:focus {
    outline: none;
}

.sd-post-media-featured-thumb:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -3px;
}

.sd-post-media-featured-thumb:focus-visible img,
.sd-post-media-featured-thumb:focus-visible video {
    filter:
        grayscale(.15)
        blur(0)
        brightness(1);

    transform: scale(1.01);
}

/* =========================================================
   SWEETALERT2 – SWINGERSDATE
   Fungerar i både ljust och mörkt tema
   ========================================================= */

.sd-swal-popup {
    background: #212529 !important;

    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: .65rem !important;

    color: #f8f9fa !important;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .55),
        0 0 24px rgba(112, 28, 74, .18);
}


/* Rubrik */

.sd-swal-title {
    color: #f8f9fa !important;

    font-size: 1.2rem !important;
    font-weight: 700 !important;
}


/* Beskrivning */

.sd-swal-text {
    color: #dee2e6 !important;

    font-size: .95rem !important;
}


/* =========================================================
   KNAPPAR
   Samma formspråk som Swingersdates vanliga knappar
   ========================================================= */

.sd-swal-confirm,
.sd-swal-cancel {
    min-width: 110px;

    padding: .6rem 1.15rem !important;

    border-radius: .375rem !important;

    font-weight: 600 !important;

    box-shadow: none !important;
}


/* Radera */

.sd-swal-confirm {
    background: #701c4a !important;
    border: 1px solid #701c4a !important;
    color: #fff !important;
}


/* Avbryt */

.sd-swal-cancel {
    background: #495057 !important;
    border: 1px solid #495057 !important;
    color: #fff !important;
}


/* Hover */

.sd-swal-confirm:hover {
    background: #5f183f !important;
    border-color: #5f183f !important;
}

.sd-swal-cancel:hover {
    background: #5c636a !important;
    border-color: #5c636a !important;
}


/* Tangentbordsfokus */

.sd-swal-confirm:focus-visible,
.sd-swal-cancel:focus-visible {
    outline: 0 !important;

    box-shadow:
        0 0 0 .2rem rgba(112, 28, 74, .28) !important;
}

/* =========================================================
   EDIT POST MODAL – Z-INDEX
   ========================================================= */

#editPostModal {
    z-index: 20000 !important;
}

.modal-backdrop.show {
    z-index: 19990 !important;
}

/* =========================================================
   EDIT POST – BEFINTLIGA BILDER
   ========================================================= */

.sd-edit-post-media-preview {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.sd-edit-post-media-item {
    min-width: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: .5rem;

    background: #0a0b0e;
}

.sd-edit-post-media-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

@media (max-width: 575.98px) {

    .sd-edit-post-media-preview {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   EDIT POST – TA BORT BILD
   ========================================================= */

.sd-edit-post-media-item {
    position: relative;
}

.sd-edit-post-media-remove {
    position: absolute;
    z-index: 2;

    top: 6px;
    right: 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    padding: 0;

    border: 0;
    border-radius: .375rem;

    background: rgba(33, 37, 41, .88);
    color: #fff;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.sd-edit-post-media-remove:hover {
    background: #701c4a;
    transform: scale(1.05);
}

.sd-edit-post-media-remove:active {
    transform: scale(.96);
}

/* =========================================================
   EDIT POST – MARKERAD FÖR BORTTAGNING
   ========================================================= */

.sd-edit-post-media-item {
    transition:
        opacity .2s ease,
        filter .2s ease,
        transform .2s ease;
}

.sd-edit-post-media-item.is-marked-for-removal {
    opacity: .45;
    filter: grayscale(1);
    transform: scale(.97);
}

.sd-edit-post-media-item.is-marked-for-removal::after {
    content: 'Tas bort';

    position: absolute;
    inset: auto 6px 6px 6px;

    padding: 4px 6px;

    border-radius: .375rem;

    background: rgba(0, 0, 0, .72);
    color: #fff;

    font-size: .75rem;
    font-weight: 600;

    text-align: center;
}

/* =========================================================
   ENSAM BILD – DISKRET RAM
   ========================================================= */



/* =========================================================
   SORTERING – STICKY PÅ MOBIL
   ========================================================= */

@media (max-width: 767.98px) {

    .sd-feed-tools-card {
        position: sticky;
        top: 2px;
        z-index: 1050;

        overflow: visible;

        background: var(--bs-body-bg);
    }

}

/* =========================================================
   PROFILBILD I LÄGG TIL POST -VAD TÄNKER DU PÅ
   ========================================================= */
.sd-create-avatar {
    padding: 0;
    overflow: hidden;
}

.sd-create-avatar-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 50%;
}


/* ==========================================================
   SKAPA INLÄGG - MODAL - AVATAR + TEXTAREA
   ========================================================== */

.sd-create-modal-text-wrap {
    position: relative;
    width: 100%;
}

.sd-create-modal-avatar {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 2;

    width: 44px;
    height: 44px;

    overflow: hidden;

    border: 3px solid rgba(255, 255, 255, .7);
    border-radius: 50%;

    background: var(--bs-body-bg);
}

.sd-create-modal-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sd-create-modal-textarea {
    width: 100%;

    min-height: 150px;

    padding-top: 18px;
    padding-right: 18px;
    padding-bottom: 18px;
    padding-left: 74px;

    resize: vertical;
}


/* ==========================================================
   AVATARRINGAR
   ========================================================== */

.sd-create-modal-avatar-ring.gender-man,
.sd-create-modal-avatar-ring.paras-man {
    border-color: #007bff;

    box-shadow: 0 0 8px rgba(0, 123, 255, .48);
}

.sd-create-modal-avatar-ring.gender-kvinna,
.sd-create-modal-avatar-ring.paras-kvinna {
    border-color: #e83e8c;

    box-shadow: 0 0 8px rgba(232, 62, 140, .48);
}

.sd-create-modal-avatar-ring.paras-hemligt {
    border-color: rgba(255, 255, 255, .9);

    box-shadow: 0 0 8px rgba(255, 255, 255, .24);
}

.sd-create-modal-avatar-ring.paras-bada {
    animation: sdCreateModalAvatarCoupleRing 4.6s infinite ease-in-out;
}

@keyframes sdCreateModalAvatarCoupleRing {

    0%,
    100% {
        border-color: #e83e8c;

        box-shadow: 0 0 8px rgba(232, 62, 140, .48);
    }

    50% {
        border-color: #007bff;

        box-shadow: 0 0 8px rgba(0, 123, 255, .48);
    }
}


/* =========================================================
   ENSAM BILD / VIDEO I INLÄGG
   Full bredd – naturlig höjd – ingen beskärning
   ========================================================= */

.sd-post-media-single {
    display: block;

    width: 100%;
    min-height: 0;

    overflow: hidden;

    background: transparent;
}

.sd-post-media-single img,
.sd-post-media-single .sd-post-video {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: none;

    margin: 0;

    object-fit: initial;
    object-position: center;

    background: transparent;
}

/* =========================================================
   STOR FEATURED VIDEO – PLAYKNAPP
   ========================================================= */

.sd-post-featured-video-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #0a0b0e;
}

.sd-post-featured-video-wrap video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #0a0b0e;
}

.sd-post-featured-video-play {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    padding: 0;

    border: 2px solid rgba(255, 255, 255, .88);
    border-radius: 50%;

    background: rgba(0, 0, 0, .58);
    color: #fff;

    font-size: 22px;

    cursor: pointer;

    transform: translate(-50%, -50%);

    transition:
        transform .18s ease,
        background-color .18s ease,
        opacity .18s ease;
}

.sd-post-featured-video-play:hover,
.sd-post-featured-video-play:focus-visible {
    background: rgba(0, 0, 0, .76);

    transform:
        translate(-50%, -50%)
        scale(1.06);

    outline: none;
}

.sd-post-featured-video-play i {
    position: relative;

    left: 2px;
}

.sd-post-featured-video-wrap.is-playing
.sd-post-featured-video-play {
    opacity: 0;

    pointer-events: none;
}

@media (max-width: 767.98px) {

    .sd-post-featured-video-play {
        width: 52px;
        height: 52px;

        font-size: 19px;
    }

}

/* =========================================================
   TVÅ VIDEOS I GRID
   ========================================================= */

.sd-post-media-two-item .sd-post-two-video-wrap {
    position: relative;

    display: block;

    width: 100%;
    height: auto;

    overflow: hidden;

    background: #0a0b0e;
}

.sd-post-media-two-item .sd-post-two-video-wrap video {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;

    background: #0a0b0e;
}


/* Lite mindre playknapp när två videos ligger bredvid varandra */

.sd-post-media-two-item .sd-post-featured-video-play {
    width: 52px;
    height: 52px;

    font-size: 19px;
}


@media (max-width: 767.98px) {

    .sd-post-media-two-item .sd-post-featured-video-play {
        width: 46px;
        height: 46px;

        font-size: 17px;
    }

}

/* =========================================================
   EN ENSAM VIDEO
   ========================================================= */

.sd-post-media-single .sd-post-single-video-wrap {
    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    background: #0a0b0e;
}

.sd-post-media-single .sd-post-single-video-wrap video {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;

    background: #0a0b0e;
}


/* Stor playknapp för ensam video */

.sd-post-media-single .sd-post-featured-video-play {
    width: 62px;
    height: 62px;

    font-size: 23px;
}


@media (max-width: 767.98px) {

    .sd-post-media-single .sd-post-featured-video-play {
        width: 54px;
        height: 54px;

        font-size: 20px;
    }

}

/* =========================================================
   SPOTLIGHT – RUBRIKIKON
   ========================================================= */

.sd-spotlight-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sd-spotlight-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #b12d73,
        #701c4a
    );

    box-shadow:
        0 0 12px rgba(177, 45, 115, .45);

    flex-shrink: 0;
}

.sd-spotlight-title-icon i {
    color: #ffffff;
    font-size: 14px;
}

/* =========================================================
   INLOGGADE NU – KNAPP
   ========================================================= */

.sd-online-button {
    display: inline-flex;

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

    gap: 6px;
}


.sd-online-button .sd-post-online-dot {
    display: inline-block;

    flex: 0 0 9px;

    width: 9px;
    height: 9px;

    margin-left: 3px;

    border: 2px solid var(--bs-body-bg);
    border-radius: 50%;

    background: #2fc86f;

    box-shadow:
        0 0 0 2px rgba(47, 200, 111, .16);
}

/* ==========================================================
   MUTUAL LIKES – HEM
   ========================================================== */

.sd-mutual-list {
    display: flex;
    flex-direction: column;

    gap: 18px;

    padding-top: 4px;
    padding-bottom: 4px;
}


/* ==========================================================
   RAD
   ========================================================== */

.sd-mutual-item {
    display: flex;
    align-items: center;

    gap: 16px;

    min-height: 72px;
    min-width: 0;

    color: var(--bs-body-color);
    text-decoration: none;

    transition:
        transform .18s ease,
        background-color .18s ease;
}

.sd-mutual-item:hover {
    transform: translateX(2px);
}

/* ==========================================================
   AVATAR WRAPPER
   Viktigt: pricken ligger utanför själva avataren
   ========================================================== */

.sd-mutual-avatar-wrap {
    position: relative;

    flex: 0 0 60px;

    width: 60px;
    height: 60px;

    overflow: visible;
}


/* ==========================================================
   AVATAR
   ========================================================== */

.sd-mutual-avatar {
    flex: 0 0 60px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    overflow: hidden;

    border-width: 3px !important;
    border-style: solid !important;
    border-radius: 50%;

    box-sizing: border-box;
}


/* Bilden fyller hela cirkeln */

.sd-mutual-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
   AVATARRINGAR
   ========================================================== */

.sd-mutual-avatar.border-man {
    border-color: #5688ff !important;
}

.sd-mutual-avatar.border-kvinna {
    border-color: #d45b9e !important;
}

.sd-mutual-avatar.border-bada {
    border-color: #8d63a9 !important;
}

.sd-mutual-avatar.border-hemligt {
    border-color: #adb5bd !important;
}


/* ==========================================================
   STATUSPRICK PÅ AVATAR
   ========================================================== */

.sd-mutual-avatar-dot {
    position: absolute;

    right: -2px;
    bottom: -2px;

    z-index: 10;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    padding: 0;

    border: 2px solid #fff;
    border-radius: 50%;

    box-sizing: border-box;

    line-height: 1;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, .35);
}


/* Online nu */

.sd-mutual-avatar-dot.green {
    background: #2fc86f;
}


/* Aktiv nyligen */

.sd-mutual-avatar-dot.yellow {
    background: #ffc107;
}


/* Ett tag sedan */

.sd-mutual-avatar-dot.gray {
    background: #6c757d;
}


/* Verifieringsbock */

.sd-mutual-avatar-dot i {
    display: block;

    margin: 0;
    padding: 0;

    color: #fff;

    font-size: 7px;
    line-height: 1;
}


/* ==========================================================
   NAMN + ORT
   ========================================================== */

.sd-mutual-meta {
    flex: 1 1 auto;

    display: block;

    min-width: 0;
}

.sd-mutual-meta strong,
.sd-mutual-meta small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-mutual-meta strong {
    font-size: .9rem;
}

.sd-mutual-meta small {
    margin-top: 2px;

    color: var(--bs-secondary-color);

    font-size: .76rem;
}


/* ==========================================================
   STATUSPRICK LÄNGST TILL HÖGER
   ========================================================== */

.sd-status-dot.green {
    background: #2fc86f;
}

.sd-status-dot.yellow {
    background: #ffc107;
}

.sd-status-dot.gray {
    background: #6c757d;
}


/* ==========================================================
   MOBIL
   Samma avatarstorlek men lite tunnare ring
   ========================================================== */

@media (max-width: 575.98px) {

    .sd-mutual-avatar {
        border-width: 3px !important;
    }

}

/* ==========================================================
  KÖNSIKON IKON PÅ HEM (Gillade varandra) 
   ========================================================== */

.sd-mutual-name {
    display: flex !important;
    align-items: center;
    gap: 4px;

    font-size: .9rem;
    line-height: 1.2;
}

.sd-mutual-gender {
    flex: 0 0 auto;

    font-size: .8rem;

    color: inherit;
}

/* ==========================================================
   NY MEDLEM
   ========================================================== */

.loggedin-new-member {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: auto;

    font-size: .82rem;
    line-height: 1;
}

.loggedin-new-member i {
    color: var(--sd-accent) !important;
}

/* ==========================================================
   GILLADE VARANDRA – SKILJELINJE MELLAN PROFILER
   ========================================================== */

.sd-mutual-item {
    padding-bottom: 14px;

    border-bottom: 1px solid var(--sd-home-border);
}

.sd-mutual-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

/* ==========================================================
   PROFILFÖRDELNING – HEM
   ========================================================== */

.sd-gender-distribution-body {
    padding: 0;
}


/* ==========================================================
   INTROTEXT
   ========================================================== */

.sd-gender-intro {
    padding: 12px 14px;

    border-bottom:
        1px solid
        var(--sd-home-border);

    color: var(--bs-secondary-color);

    font-size: .78rem;
    line-height: 1.4;
}


/* ==========================================================
   LISTA
   ========================================================== */

.sd-gender-list {
    display: flex;
    flex-direction: column;
}


/* ==========================================================
   VARJE KATEGORI
   ========================================================== */

.sd-gender-item {
    position: relative;

    padding: 14px;
}


/* Linje mellan kategorier */

.sd-gender-item:not(:last-child) {
    border-bottom:
        1px solid
        var(--sd-home-border);
}


/* ==========================================================
   PROFILRAD
   Samma princip som Gillade varandra:
   rund ikon till vänster, innehåll till höger
   ========================================================== */

.sd-gender-profile-row {
    display: flex;
    align-items: center;

    gap: 12px;

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


/* ==========================================================
   RUND KÖNSIKON
   ========================================================== */

.sd-gender-icon {
    flex: 0 0 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    box-sizing: border-box;

    border: 2px solid #fff;
    border-radius: 50%;

    color: #fff;

    font-size: 1.6rem;
    line-height: 1;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .28);
}


/* Själva könsikonen */

.sd-gender-icon i {
    display: block;

    margin: 0;
    padding: 0;

    font-size: inherit;
    line-height: 1;
}


/* ==========================================================
   PAR – CIRKEL
   Samma rosa/blå färgväxling som par-avatarens ring
   ========================================================== */

.sd-gender-icon-couple {
    background: #e83e8c;

    animation:
        sdGenderCoupleCircle
        4.6s
        ease-in-out
        infinite;
}


/* ==========================================================
   MÄN
   ========================================================== */

.sd-gender-icon-male {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #60a5fa
        );
}


/* ==========================================================
   KVINNOR
   ========================================================== */

.sd-gender-icon-female {
    background:
        linear-gradient(
            135deg,
            #db2777,
            #f472b6
        );
}


/* ==========================================================
   TEXT + PROGRESS
   Hela denna del ligger till höger om cirkeln
   ========================================================== */

.sd-gender-profile-meta {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}


/* ==========================================================
   KÖN + PROCENT
   ========================================================== */

.sd-gender-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    min-width: 0;

    margin-bottom: 7px;
}


/* ==========================================================
   KÖNSTEXT
   Samma storlekskänsla som profilnamn i Gillade varandra
   ========================================================== */

.sd-gender-label {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    color: var(--bs-body-color);

    font-size: .9rem;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   PROCENT
   ========================================================== */

.sd-gender-percent {
    flex: 0 0 auto;

    color: var(--bs-body-color);

    font-size: .82rem;
    line-height: 1;
}


/* ==========================================================
   PROGRESSBAKGRUND
   Ligger endast under textdelen
   ========================================================== */

.sd-gender-track {
    position: relative;

    display: block;

    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .10);
}


/* Ljust tema */

[data-bs-theme="light"] .sd-gender-track {
    background:
        rgba(0, 0, 0, .09);
}


/* ==========================================================
   PROGRESSBAR
   ========================================================== */

.sd-gender-bar {
    display: block;

    height: 100%;

    border-radius: inherit;

    transform-origin: left center;

    animation:
        sdGenderBarIn
        .7s
        ease
        both;
}


/* ==========================================================
   PAR – PROGRESS
   Samma färgväxling som par-avatarens ring
   ========================================================== */

.sd-gender-bar-couple {
    background: #e83e8c;

    animation:
        sdGenderBarIn .7s ease both,
        sdGenderCoupleColor 4.6s ease-in-out infinite;
}


/* ==========================================================
   MÄN – PROGRESS
   ========================================================== */

.sd-gender-bar-male {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );
}


/* ==========================================================
   KVINNOR – PROGRESS
   ========================================================== */

.sd-gender-bar-female {
    background:
        linear-gradient(
            90deg,
            #db2777,
            #f472b6
        );
}


/* ==========================================================
   TOMT LÄGE
   ========================================================== */

.sd-gender-empty {
    padding: 18px 14px;

    color: var(--bs-secondary-color);

    font-size: .78rem;
    line-height: 1.4;

    text-align: center;
}


/* ==========================================================
   ANIMATION – PROGRESS IN
   ========================================================== */

@keyframes sdGenderBarIn {

    from {
        opacity: .35;

        transform:
            scaleX(0);
    }

    to {
        opacity: 1;

        transform:
            scaleX(1);
    }

}


/* ==========================================================
   ANIMATION – PAR PROGRESS
   Rosa → blå → rosa
   ========================================================== */

@keyframes sdGenderCoupleColor {

    0%,
    100% {
        background: #e83e8c;

        box-shadow:
            0 0 8px rgba(232, 62, 140, .48);
    }

    50% {
        background: #007bff;

        box-shadow:
            0 0 8px rgba(0, 123, 255, .48);
    }

}


/* ==========================================================
   ANIMATION – PAR CIRKEL
   Samma rytm och färger som progressbaren
   ========================================================== */

@keyframes sdGenderCoupleCircle {

    0%,
    100% {
        background: #e83e8c;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, .28),
            0 0 8px rgba(232, 62, 140, .48);
    }

    50% {
        background: #007bff;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, .28),
            0 0 8px rgba(0, 123, 255, .48);
    }

}


/* ==========================================================
   REDUCERAD RÖRELSE
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sd-gender-bar {
        animation: none;
    }

    .sd-gender-bar-couple {
        background: #b44a84;

        box-shadow: none;
    }

    .sd-gender-icon-couple {
        animation: none;

        background: #b44a84;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, .28);
    }

}

/* =========================================================
   VILKA FINNS HÄR – RUBRIKIKON
   ========================================================= */

.sd-gender-header-icon {
    font-weight: 600;

    line-height: 1;
}


/* ==========================================================
   PROFILFÖRDELNING – FLIKAR
   ========================================================== */

.sd-gender-tabs {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    padding:
        10px
        12px;

    border-bottom:
        1px solid
        var(--sd-home-border);

    background:
        rgba(255, 255, 255, .025);
}


/* ==========================================================
   FLIKKNAPP
   ========================================================== */

.sd-gender-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    min-width: 0;
    min-height: 34px;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .045);

    color:
        var(--bs-secondary-color);

    font: inherit;

    font-size: .78rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


/* Ikon */

.sd-gender-tab i {
    flex: 0 0 auto;

    font-size: .78rem;
    line-height: 1;
}


/* Text */

.sd-gender-tab span {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   HOVER
   ========================================================== */

.sd-gender-tab:hover {
    color:
        var(--bs-body-color);

    border-color:
        rgba(255, 255, 255, .22);

    background:
        rgba(255, 255, 255, .075);

    transform:
        translateY(-1px);
}


/* ==========================================================
   AKTIV FLIK
   ========================================================== */

.sd-gender-tab.is-active {
    color: #fff;

    border-color:
        rgba(255, 255, 255, .22);

    background:
        var(--sd-accent);

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, .18);
}


/* ==========================================================
   FLIK-PANELER
   ========================================================== */

.sd-gender-tab-panel {
    display: none;

    width: 100%;
}


/* Aktiv panel */

.sd-gender-tab-panel.is-active {
    display: block;
}


/* Viktigt eftersom hidden-attributet används i PHP/JS */

.sd-gender-tab-panel[hidden] {
    display: none !important;
}


/* ==========================================================
   LJUST TEMA
   ========================================================== */

[data-bs-theme="light"] .sd-gender-tabs {
    background:
        rgba(0, 0, 0, .018);
}


[data-bs-theme="light"] .sd-gender-tab {
    border-color:
        rgba(0, 0, 0, .10);

    background:
        rgba(0, 0, 0, .035);
}


[data-bs-theme="light"] .sd-gender-tab:hover {
    border-color:
        rgba(0, 0, 0, .18);

    background:
        rgba(0, 0, 0, .06);
}


[data-bs-theme="light"] .sd-gender-tab.is-active {
    color: #fff;

    border-color:
        var(--sd-accent);

    background:
        var(--sd-accent);
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 575.98px) {

    .sd-gender-tabs {
        gap: 6px;

        padding:
            9px
            10px;
    }


    .sd-gender-tab {
        min-height: 33px;

        padding:
            7px
            8px;

        font-size: .76rem;
    }


    .sd-gender-tab i {
        font-size: .76rem;
    }

}


/* ==========================================================
   REDUCERAD RÖRELSE
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sd-gender-tab {
        transition: none;
    }

}

/* ==========================================================
   HEM – LJUST TEMA
   Matchar känslan i mörkt tema:
   tydliga kort, diskret kant och mjuk skugga
   ========================================================== */

[data-bs-theme="light"] {

    --sd-home-bg: #f5f5f6;

    --sd-home-surface: #ffffff;
    --sd-home-surface-2: #f5f5f6;

    --sd-home-border: rgba(0, 0, 0, .12);

    --sd-home-muted: #6c757d;

    --sd-home-shadow:
        0 1px 2px rgba(0, 0, 0, .05),
        0 6px 16px rgba(0, 0, 0, .07);
}


/* ==========================================================
   ALLA VANLIGA HEM-KORT
   ========================================================== */

[data-bs-theme="light"] .sd-home-card {
    background:#fff;

    border:
        1px solid
        var(--sd-home-border);

    box-shadow:
        var(--sd-home-shadow);
}


/* Header på kort */

[data-bs-theme="light"] .sd-home-card > .card-header {
    background:#f7f7f8;

    border-bottom:
        1px solid
        rgba(0, 0, 0, .08);

    color:#292d32;
}


/* Card body */

[data-bs-theme="light"] .sd-home-card > .card-body {
    background:#fff;
}


/* ==========================================================
   HOVER – SAMMA DJUPKÄNSLA SOM MÖRKT
   ========================================================== */

@media (hover:hover) {

    [data-bs-theme="light"] .sd-home-card:hover {
        border-color:
            rgba(0, 0, 0, .16);

        box-shadow:
            0 2px 4px rgba(0, 0, 0, .06),
            0 9px 22px rgba(0, 0, 0, .09);
    }

}


/* ==========================================================
   RUBRIKER
   ========================================================== */

[data-bs-theme="light"] .sd-card-title {
    color:#292d32;
}

[data-bs-theme="light"] .sd-card-header-link {
    color:#6c757d;
}


/* ==========================================================
   SPOTLIGHT – YTTRE KORT
   ========================================================== */

[data-bs-theme="light"] .sd-spotlight-card {
    background:#fff;

    border-color:
        rgba(0, 0, 0, .12);

    box-shadow:
        0 1px 2px rgba(0, 0, 0, .05),
        0 6px 16px rgba(0, 0, 0, .07);
}


[data-bs-theme="light"] .sd-spotlight-card > .card-header {
    background:#f7f7f8;

    color:#292d32;

    border-bottom-color:
        rgba(0, 0, 0, .08);
}


[data-bs-theme="light"] .sd-spotlight-toast-card-body {
    background:#fff;
}


/* ==========================================================
   SPOTLIGHT – DE RULLANDE PROFILKORTEN

   I mörkt tema är de mörka.
   I ljust tema får de en riktig ljus motsvarighet.
   ========================================================== */

[data-bs-theme="light"] .sd-spotlight-inline-toast {
    border:
        1px solid
        rgba(0, 0, 0, .13);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f2f3f5 100%
        );

    color:#292d32;

    box-shadow:
        0 2px 4px rgba(0, 0, 0, .07),
        0 7px 16px rgba(0, 0, 0, .08);
}


[data-bs-theme="light"] .sd-spotlight-inline-toast:hover,
[data-bs-theme="light"] .sd-spotlight-inline-toast:focus-visible {
    color:#292d32;

    border-color:
        rgba(112, 28, 74, .30);

    box-shadow:
        0 3px 6px rgba(0, 0, 0, .08),
        0 10px 22px rgba(0, 0, 0, .10),
        0 0 0 1px rgba(112, 28, 74, .07);
}


/* Profilnamn */

[data-bs-theme="light"]
.sd-spotlight-inline-toast-title {
    color:#292d32;
}


[data-bs-theme="light"]
.sd-spotlight-inline-toast-title-text {
    color:#292d32;
}


/* Tiden */

[data-bs-theme="light"]
.sd-spotlight-inline-toast-time {
    color:rgba(33, 37, 41, .55);
}


/* Meddelandet */

[data-bs-theme="light"]
.sd-spotlight-inline-toast-message {
    color:rgba(33, 37, 41, .78);
}


/* Könsikon */

[data-bs-theme="light"]
.sd-spotlight-inline-toast-gender {
    color:#701c4a;
}


/* ==========================================================
   SPOTLIGHT – FADE VID VÄNSTER/HÖGER KANT

   Viktigt eftersom nuvarande ticker använder card-bg.
   ========================================================== */

[data-bs-theme="light"]
.sd-spotlight-ticker::before {
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            transparent 100%
        );
}


[data-bs-theme="light"]
.sd-spotlight-ticker::after {
    background:
        linear-gradient(
            270deg,
            #ffffff 0%,
            transparent 100%
        );
}


/* ==========================================================
   SKAPA INLÄGG
   ========================================================== */

[data-bs-theme="light"] .sd-create-card-body {
    background:#fff;
}


[data-bs-theme="light"] .sd-create-input {
    background:#fff;

    color:#656b72;

    border-color:
        rgba(0, 0, 0, .14);
}


[data-bs-theme="light"] .sd-create-input:hover {
    background:#f7f7f8;

    border-color:
        rgba(0, 0, 0, .20);
}


/* ==========================================================
   FLÖDESVAL / INLOGGADE NU
   ========================================================== */

[data-bs-theme="light"] .sd-feed-tools-card {
    background:#fff;
}


[data-bs-theme="light"] .sd-feed-tools-body {
    background:#fff;
}


[data-bs-theme="light"]
.sd-feed-sort-button.btn-outline-secondary {
    background:#fff;

    border-color:
        rgba(73, 80, 87, .55);

    color:#6c757d;
}


[data-bs-theme="light"]
.sd-feed-sort-button.btn-outline-secondary:hover {
    background:#f2f3f5;

    border-color:
        rgba(73, 80, 87, .70);

    color:#343a40;
}


/* ==========================================================
   FLÖDESINLÄGG
   ========================================================== */

[data-bs-theme="light"] .sd-post-card {
    background:#fff;

    border-color:
        rgba(0, 0, 0, .12);

    box-shadow:
        0 1px 2px rgba(0, 0, 0, .05),
        0 6px 16px rgba(0, 0, 0, .07);
}


/* ==========================================================
   SIDOKORT – MATCH / FÖRDELNING M.M.
   ========================================================== */

[data-bs-theme="light"]
.sd-home-sidebar-sticky .card {
    border-color:
        rgba(0, 0, 0, .12);

    box-shadow:
        0 1px 2px rgba(0, 0, 0, .05),
        0 6px 16px rgba(0, 0, 0, .07);
}


/* ==========================================================
   MOBIL

   Lite mindre skugga eftersom korten ligger tätare.
   ========================================================== */

@media (max-width:767.98px) {

    [data-bs-theme="light"] .sd-home-card,
    [data-bs-theme="light"] .sd-post-card {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, .05),
            0 4px 12px rgba(0, 0, 0, .06);
    }


    [data-bs-theme="light"]
    .sd-spotlight-inline-toast {
        box-shadow:
            0 1px 3px rgba(0, 0, 0, .06),
            0 5px 12px rgba(0, 0, 0, .07);
    }

}



/* =========================================================
   🌸 AKTIVT INLÄGG – ANIMERAD VÄNSTERKANT
   ========================================================= */

.sd-post-card {
    position: relative;
    overflow: visible;

    /* Standardfärg */
    --sd-post-line: linear-gradient(
        180deg,
        rgba(216, 108, 170, .90) 0%,
        rgba(184, 92, 180, .90) 25%,
        rgba(220, 120, 180, .92) 50%,
        rgba(176, 34, 73, .95) 75%,
        rgba(112, 28, 74, .98) 100%
    );
}


/* =========================================================
   MAN
   ========================================================= */

.sd-post-border-man {
    --sd-post-line: linear-gradient(
        180deg,
        rgba(126, 167, 255, .92) 0%,
        rgba(92, 118, 235, .92) 40%,
        rgba(58, 87, 199, .95) 100%
    );
}


/* =========================================================
   KVINNA
   ========================================================= */

.sd-post-border-kvinna {
    --sd-post-line: linear-gradient(
        180deg,
        rgba(216, 108, 170, .90) 0%,
        rgba(184, 92, 180, .90) 25%,
        rgba(220, 120, 180, .92) 50%,
        rgba(176, 34, 73, .95) 75%,
        rgba(112, 28, 74, .98) 100%
    );
}


/* =========================================================
   PAR
   ========================================================= */

.sd-post-border-par {
    --sd-post-line: #e83e8c;
}


/* =========================================================
   HEMLIGT
   ========================================================= */

.sd-post-border-hemligt {
    --sd-post-line: linear-gradient(
        180deg,
        rgba(170, 170, 170, .90) 0%,
        rgba(120, 120, 120, .95) 100%
    );
}


/* =========================================================
   GRUNDLÄGE
   ========================================================= */

.sd-post-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    z-index: 100;

    pointer-events: none;

    background: var(--sd-post-line);

    border-radius: 0 999px 999px 0;

    opacity: 0;

    transform: scaleY(0);
    -webkit-transform: scaleY(0);

    will-change: transform, opacity, background;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* =========================================================
   SCROLL NED
   ========================================================= */

.sd-post-card.sd-post-focus-down::before {
    transform-origin: top center;
    -webkit-transform-origin: top center;

    animation:
        sdHemPostLineDown 1.25s cubic-bezier(.22,.61,.36,1) forwards;

    -webkit-animation:
        sdHemPostLineDown 1.25s cubic-bezier(.22,.61,.36,1) forwards;
}


/* =========================================================
   SCROLL UPP
   ========================================================= */

.sd-post-card.sd-post-focus-up::before {
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;

    animation:
        sdHemPostLineUp 1.25s cubic-bezier(.22,.61,.36,1) forwards;

    -webkit-animation:
        sdHemPostLineUp 1.25s cubic-bezier(.22,.61,.36,1) forwards;
}


/* =========================================================
   PAR + SCROLL NED
   ========================================================= */

.sd-post-card.sd-post-border-par.sd-post-focus-down::before {
    animation:
        sdHemPostLineDown 1.25s cubic-bezier(.22,.61,.36,1) forwards,
        sdParColorShift 4.6s ease-in-out infinite;

    -webkit-animation:
        sdHemPostLineDown 1.25s cubic-bezier(.22,.61,.36,1) forwards,
        sdParColorShift 4.6s ease-in-out infinite;
}


/* =========================================================
   PAR + SCROLL UPP
   ========================================================= */

.sd-post-card.sd-post-border-par.sd-post-focus-up::before {
    animation:
        sdHemPostLineUp 1.25s cubic-bezier(.22,.61,.36,1) forwards,
        sdParColorShift 4.6s ease-in-out infinite;

    -webkit-animation:
        sdHemPostLineUp 1.25s cubic-bezier(.22,.61,.36,1) forwards,
        sdParColorShift 4.6s ease-in-out infinite;
}


/* =========================================================
   FÄRGVÄXLING FÖR PAR
   ========================================================= */

@keyframes sdParColorShift {

    0%,
    100% {
        background: #e83e8c;
    }

    50% {
        background: #007bff;
    }
}


@-webkit-keyframes sdParColorShift {

    0%,
    100% {
        background: #e83e8c;
    }

    50% {
        background: #007bff;
    }
}


/* =========================================================
   ANIMERING NEDÅT
   ========================================================= */

@keyframes sdHemPostLineDown {

    0% {
        opacity: 0;
        transform: scaleY(0);
    }

    8% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}


/* =========================================================
   ANIMERING UPPÅT
   ========================================================= */

@keyframes sdHemPostLineUp {

    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: bottom center;
    }

    8% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: bottom center;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sd-post-card.sd-post-focus-down::before,
    .sd-post-card.sd-post-focus-up::before {

        animation: none !important;
        -webkit-animation: none !important;

        opacity: 1;

        transform: scaleY(1);
        -webkit-transform: scaleY(1);
    }
}




/* =========================================================
   HEM – BRED HELSIDA PÅ DESKTOP
   ========================================================= */

.sd-home-page,
.sd-home-menu-container {
    width: 100% !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* =========================================================
BRED HELSIDA KANT I KANT PÅ MOBIL
   ========================================================= */
@media (max-width: 767.98px) {
    .sd-private-ad-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}