:root {
    --insta-av-size: 45px;
    --insta-gap: 12px;
    --insta-radius: 20px;
}

.night .mem-insta,
.night .mem-insta-reel {
    filter: brightness(0.8) contrast(1.1);
}

.mem-insta-username::before,
.mem-insta-reel-username::before {
    content: '@';
    margin-right: 1px;
}

.mem-insta-reel {
    background-size: cover !important;
    background-position: center !important;
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 2 / 3;
    max-width: 400px;
    border-radius: var(--insta-radius);
    box-sizing: border-box;
    outline: 1px solid #00000010;
    border: 10px solid white;
    color: white;
    align-content: end;
    display: grid;
    position: relative;
    overflow: hidden;
}

.mem-insta-reel-content {
    display: grid;
    grid-template-areas:
        "av username actions"
        "desc desc desc";
    align-items: center;
    grid-template-columns: var(--insta-av-size) 1fr auto;
    background: #00000020;
    width: 100%;
    padding: 10px 14px 12px;
    box-sizing: border-box;
    border-radius: 0 0 calc(var(--insta-radius) / 2) calc(var(--insta-radius) / 2);
    gap: 8px 10px;
    position: relative;
    z-index: 2;
}

.mem-insta-reel-av {
    grid-area: av;
    border: 2px solid #00000020;
}

.mem-insta-reel-av,
.mem-insta-reel-av img {
    width: var(--insta-av-size);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.mem-insta-reel-av img {
    display: block;
}

.mem-insta-reel-username {
    grid-area: username;
    text-transform: lowercase;
    font-weight: bold;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mem-insta-reel-desc {
    grid-area: desc;
    margin-top: 2px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mem-insta-reel-actions {
    grid-area: actions;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    position: relative;
    z-index: 3;
}

.mem-insta {
    display: grid;
    grid-template-areas:
        "av username"
        "av location"
        "photo photo"
        "actions actions"
        "desc desc";
    margin: 0 auto;
    width: 100%;
    max-width: 445px;
    background-color: white;
    border-radius: var(--insta-radius);
    padding: 20px;
    box-sizing: border-box;
    gap: var(--insta-gap);
    grid-template-columns: var(--insta-av-size) 1fr;
    border: 1px solid #00000010;
    align-items: center;
    position: relative;
}

.mem-insta-av {
    grid-area: av;
    border: 2px solid #00000020;
}

.mem-insta-av,
.mem-insta-av img {
    width: var(--insta-av-size);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.mem-insta-av img {
    display: block;
}

.mem-insta-username {
    grid-area: username;
    margin-bottom: calc(var(--insta-gap) * -1);
    text-align: left;
    text-transform: lowercase;
    font-weight: bold;
}

.mem-insta-username::before {
    color: #adb3bc;
}

.mem-insta-location {
    grid-area: location;
    margin-top: calc(var(--insta-gap) * -1);
    color: #767676;
    text-transform: lowercase;
    text-align: left;
}

.mem-insta-photo {
    grid-area: photo;
}

.mem-insta-photo img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: var(--insta-radius);
    box-shadow: 0 0 5px 0 #48464442;
    border: 1px solid #00000010;
    display: block;
}

.mem-insta-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 24px;
    margin: -5px 0 -8px 8px !important;
    padding: 0 4px;
    position: relative;
    z-index: 3;
}

.mem-insta-desc {
    grid-area: desc;
    color: #40474e;
    line-height: 1.4;
    padding: 0 10px;
    position: relative;
}

.mi-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mi-action {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #444;
    font: 13px/1 Helvetica, Arial, sans-serif;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.mi-action:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, .18);
    transform: translateY(-1px);
}

.mi-action-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.mi-like .mi-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}

.mi-like-count {
    min-width: 1ch;
    color: #666;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mi-like.is-liked {
    border-color: rgba(220, 90, 110, .45);
    background: rgba(255, 236, 240, .95);
    color: #c4475d;
    cursor: default;
}

.mi-like.is-liked .mi-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4475d' stroke='%23c4475d' stroke-width='1.5'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}

.mi-like.is-liked .mi-like-count {
    color: #c4475d;
}

.mi-like-count:empty::before {
    content: "0";
    opacity: .55;
}

.mi-comment-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    flex: 0 0 auto;
    cursor: pointer;
}

.mi-comment-wrap.is-disabled {
    opacity: .45;
    pointer-events: none;
    cursor: default;
}

.mi-comment-face {
    position: absolute;
    inset: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
}

.mi-comment-face .mi-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>");
}

.mi-comment-wrap .post-vote,
.mi-comment-wrap .post-vote.mi-vote-moved {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    z-index: 2;
    display: block !important;
}

.mi-comment-wrap .post-vote p {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mi-comment-wrap .post-vote a,
.mi-comment-wrap .post-vote a.positive {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
    color: transparent !important;
    text-decoration: none !important;
}

.mem-insta-reel .mi-action,
.mem-insta-reel .mi-comment-face {
    background: rgba(0, 0, 0, .28);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    box-shadow: none;
}

.mem-insta-reel .mi-action:hover,
.mem-insta-reel .mi-comment-face {
    background: rgba(0, 0, 0, .4);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.mem-insta-reel .mi-like-count {
    color: #fff;
}

.mem-insta-reel .mi-like .mi-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}

.mem-insta-reel .mi-comment-face .mi-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>");
}

.mem-insta-reel .mi-like.is-liked {
    background: rgba(196, 71, 93, .9);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.mem-insta-reel .mi-like.is-liked .mi-like-count {
    color: #fff;
}

.mem-insta-reel .mi-like.is-liked .mi-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.5'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}

.post:has(.mem-insta) .post-rating,
.post:has(.mem-insta-reel) .post-rating,
.post.meminsta-post .post-rating {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.post:has(.mem-insta) .post-box > .post-vote:not(.mi-vote-moved),
.post:has(.mem-insta-reel) .post-box > .post-vote:not(.mi-vote-moved),
.post.meminsta-post .post-box > .post-vote:not(.mi-vote-moved) {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.wrapper {
    display: grid;
    grid-template-areas:
        "template template"
        "insta reels";
    gap: 10px;
    justify-items: center;
}

.meminst_template {
    grid-area: template;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding: 15px 10px;
    box-sizing: border-box;
    background: #ffffff20;
    border-radius: 15px;
}

.meminsta_wrp {
    grid-area: insta;
}

.memreels_wrp {
    grid-area: reels;
}

.meminsta_label {
    margin: 5px;
    font-weight: bold;
}

.meminsta_wrp .meminsta_label,
.memreels_wrp .meminsta_label {
    display: block;
}

.meminsta_input,
.meminsta_textarea {
    width: 100%;
    max-width: 100% !important;
}

.meminst_template .meminsta_input {
    margin: 0 15px 0 0;
    width: 200px;
}

.meminsta_textarea {
    resize: vertical;
}

#meminst_warning,
#meminsta_template_warning_photo,
#meminsta_template_warning_reel {
    display: none;
    margin: 5px 0 0;
    font-weight: bold;
    color: darkred;
    text-align: center;
}

@media (max-width: 540px) {
    .wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
            "template"
            "insta"
            "reels";
        padding: 0 15px;
        box-sizing: border-box;
    }

    .wrapper .meminsta_input {
        width: 100%;
    }

    .meminst_template .meminsta_label {
        display: block;
        width: 100%;
    }

    .meminst_template .meminsta_input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mem-insta {
        padding: 14px;
        gap: 10px;
    }

    .mi-action,
    .mi-comment-wrap,
    .mi-comment-face {
        min-width: 32px;
        width: 32px;
        height: 26px;
    }

    .mi-action {
        padding: 0 8px;
        font-size: 12px;
    }

    .mem-insta-reel-content {
        padding: 10px 10px 12px;
        grid-template-columns: var(--insta-av-size) 1fr auto;
    }
}