.dropzone-previews.dropzone{
    min-height: 0px!important;
    border: none!important;
}

.dropzone .dz-preview.dz-image-preview {
    background: transparent!important;
}

.dropzone .dz-preview:hover .dz-image img {
     -webkit-filter: blur(2px)!important;
    filter: blur(2px)!important;
}

.dropzone .dz-preview .dz-filename{
    display: none!important;
}

.dropzone .dz-preview {
    min-height: unset;
}

/* Post comments */
.post-comments-wrapper .rounded-circle, .new-post-comment-area .rounded-circle{
    height:50px;
    width:50px
}

.post-comment .separator{
    right: 1rem;
}

.comment-textarea{
    height:45px!important;
    min-height:45px!important;
    border-radius: 20px!important;
    padding-top: 10px!important;
    overflow: hidden!important;
}

.hl-textarea-wrap {
    position: relative;
    width: 100%;
}

.hl-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none; /* don't block typing or dropzone */
    border-radius: .25rem; /* match bootstrap input */
}

.hl-highlights {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: transparent;              /* only show highlight backgrounds */
    padding: .375rem .75rem;         /* bootstrap textarea padding */
    min-height: calc(1.5em * 3 + .75rem); /* approximate rows=3 */
}

/* Make the textarea background transparent so backdrop shows */
.hl-textarea {
    position: relative;
    background-color: transparent !important;
}

.comment-content p{
    margin-bottom: 0!important;
}

/* Swiper nav buttons CSS overrides; Default ones have contrast issues */

/* IG desktop-ish: dark faint circle + semi-transparent white arrow */
.post-media-swiper{
    position: relative;
}

.post-media-swiper-native-height{
    height: auto;
}

.post-media-swiper-native-height .swiper-wrapper{
    align-items: center;
}

.post-media-swiper-native-height .swiper-slide,
.post-media-swiper-native-height .swiper-slide > a{
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-media-swiper-native-height .swiper-slide > a{
    width: 100%;
}

.post-media-swiper-native-height .post-media-gallery-image,
.post-media-swiper-native-height .video-preview{
    display: block;
    width: 100%;
    height: auto;
}

.post-media-swiper-native-height.is-gallery-height-ready,
.post-media-swiper-native-height.is-gallery-height-ready .swiper-slide,
.post-media-swiper-native-height.is-gallery-height-ready .swiper-slide > a{
    height: var(--post-gallery-native-height) !important;
}

.post-media-swiper-native-height.is-gallery-height-ready .post-media-gallery-image,
.post-media-swiper-native-height.is-gallery-height-ready .video-preview{
    height: var(--post-gallery-native-height);
    width: 100%;
}

.post-media-swiper-fixed-height .post-media-gallery-image{
    display: block;
    width: 100%;
    height: 100%;
}

.post-media-swiper-fixed-height .swiper-wrapper,
.post-media-swiper-fixed-height .swiper-slide,
.post-media-swiper-fixed-height .swiper-slide > a{
    height: 100%;
}

.post-media-swiper-fixed-height .swiper-slide > a{
    display: block;
    width: 100%;
}

.post-media-gallery-video-wrapper{
    position: relative;
}

.post-media-swiper .swiper-button-prev,
.post-media-swiper .swiper-button-next{
    width: 26px;
    height: 26px;
    border-radius: 999px;

    /* faint dark bg (not white), high transparency */
    background: rgba(0,0,0,.22) !important;

    border: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;

    top: 50%;
    transform: translateY(-50%);

    background-image: none !important;
}

/* arrow glyph: white + high transparency */
.post-media-swiper .swiper-button-prev:after,
.post-media-swiper .swiper-button-next:after{
    font-size: 13px !important;
    font-weight: 900;

    color: rgba(255,255,255,.82) !important; /* “transparent arrow” */
    text-shadow: none !important;
    opacity: 1 !important;
}

/* placement */
.post-media-swiper .swiper-button-prev{ left: 10px !important; }
.post-media-swiper .swiper-button-next{ right: 10px !important; }

/* disabled */
.post-media-swiper .swiper-button-disabled{
    opacity: .25 !important;
    pointer-events: none;
}

/* hover: slightly stronger (optional, IG-ish) */
.post-media-swiper .swiper-button-prev:hover,
.post-media-swiper .swiper-button-next:hover{
    background: rgba(0,0,0,.30) !important;
}
.post-media-swiper .swiper-button-prev:hover:after,
.post-media-swiper .swiper-button-next:hover:after{
    color: rgba(255,255,255,.92) !important;
}

/* White / slightly transparent Swiper pagination bullets */
 .swiper-pagination{
    bottom: 10px !important;
    z-index: 5;
}

 .swiper-pagination-bullet{
    width: 6px;
    height: 6px;
    margin: 0 3px !important;

    opacity: 1 !important; /* stop Swiper lowering it */
    background: rgba(255,255,255,.55) !important; /* white translucent */

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

 .swiper-pagination-bullet-active{
    background: rgba(255,255,255,.95) !important; /* active = more solid */
}

/* If dynamicBullets is on, prevent scale weirdness + keep same look */
 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
    transform: none !important;
}


/* Single-post page close (×) button — returns to the feed in place */
.fx-post-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, .25);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.fx-post-close-btn:hover {
    background: rgba(209, 0, 84, .10);
    border-color: #d10054;
    color: #d10054;
}

/* Locked VIDEO with a real thumbnail but no server-side blurred variant: use the
   thumbnail as a blurred background. IMPORTANT: the image blurred preview does NOT
   set its own height — the .locked-media box is sized by its inner Unlock/Follow
   overlay (and the height-locked-posts template in the feed). So this class must
   add ONLY the blur — no height, no scale, no max-height — otherwise the box grows
   to fill and the blurred 150x150 thumb runs full-screen on the single-post page. */
.locked-media.fx-locked-thumb-blur {
    background-size: cover !important;
    background-position: center !important;
    -webkit-filter: none !important;
    filter: none !important;
}

/* ------------------------------------------------------------------------
   Feed reel cards: in-feed play/pause + mute controls.

   The card autoplays through FxPlayer's feed observer (same one the post
   videos use), so these two controls only need to reflect and toggle state.
   Everywhere else on the card still opens the full reels player.

   Lives in post.css, not reels.css: reels.css is registered only when the
   reels FEED WIDGET setting is on, but reel cards render from posts-wrapper
   regardless -- with the CSS in reels.css, turning that setting off would
   show the play AND pause icons at once.
   ------------------------------------------------------------------------ */
.fx-reel-ctl {
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    z-index: 3;
    transition: opacity .15s ease, background-color .15s ease;
}

.fx-reel-ctl:hover {
    background: rgba(0, 0, 0, .75) !important;
}

/* Only one of each icon pair is ever visible. Default (paused) shows play. */
.fx-reel-icon-pause,
.post-media.fx-reel-playing .fx-reel-icon-play {
    display: none;
}

.post-media.fx-reel-playing .fx-reel-icon-pause {
    display: block;
}

/* While playing, the big badge fades out so it does not sit over the video --
   it comes back on hover and on pause. */
.post-media.fx-reel-playing .fx-reel-playpause {
    opacity: 0;
}

.post-media:hover .fx-reel-playpause,
.post-media .fx-reel-playpause:focus-visible {
    opacity: 1;
}

/* Muted is the non-default state, so the crossed speaker shows only then. */
.fx-reel-icon-muted,
.post-media.fx-reel-muted .fx-reel-icon-unmuted {
    display: none;
}

.post-media.fx-reel-muted .fx-reel-icon-muted {
    display: block;
}

.fx-reel-ctl:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Mute button: no pill, just the icon with a soft drop-shadow -- the same
   treatment .fx-quickmute uses on a video post, so the two read alike.

   The shadow is what keeps a white glyph legible over a bright video frame;
   without it the icon disappears against pale footage. The play/pause badge
   in the centre KEEPS its circle: it is a large primary affordance on a
   paused card, where the disc is what makes it read as a button at all. */
.fx-reel-ctl.fx-reel-mute {
    background: none !important;
}

.fx-reel-ctl.fx-reel-mute:hover {
    background: none !important;
}

.fx-reel-ctl.fx-reel-mute svg {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}