body {
    user-select: none; /* Prevent text selection */
}

/* Loading Spinner */
.loading-spinner-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
	backdrop-filter: blur(2px); /* adds subtle blur to background */
    transition: all 0.3s ease; /* smooth appearance/disappearance */
}

.loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid transparent;
    border-top: 0.25rem solid #7A0A0A; 
    border-radius: 50%;
    animation: spin 1s linear infinite, colorChange 1s linear infinite;
	box-shadow: 0 0 10px rgba(0,0,0,0.1); /* subtle depth */
}

.loading-text {
	font-size: 16px;
    margin-top: 0.625rem;
    font-weight: bold;
    color: #0073aa;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* subtle text depth */
}

/* Status Messages */
.status-messages {
    margin: 0.9375rem 0;
    padding: 0.625rem 0.9375rem;
    border-radius: 0.25rem;
}

.success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

/* Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes colorChange {
    0%, 100% { border-top-color: #7A0A0A; }
    33% { border-top-color: #2E8FDE; }
    66% { border-top-color: #048A16; }
}

/* Media Grid*/
/* Base grid layout */
.grid-layout.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
}

.grid-layout .gallery-media-item {
    width: calc((100% / 6) - 1.25rem); /* More columns */
    min-width: 8rem; /* Smaller minimum width */
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    transition: filter 0.3s ease;
}

.justified-layout.gallery-grid {
    display: block;
    width: 100%;
    padding: 1.25rem;
}

.grid-layout .gallery-media-preview {
    width: 100%;
    aspect-ratio: 1 / 1; /* Square thumbnails */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

.justified-layout .gallery-media-item {
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Prevents overflow */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); /* Apply drop shadow */
}

.justified-layout .gallery-media-preview {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

/*.gallery-grid:hover > :not(:hover) {
	filter: blur(5px);
	opacity:0.5;
}*/ /*blur out other items on hover*/

.gallery-media-preview img,
.gallery-media-thumbnail,
.gallery-media-image {
    width: 100%;
    height: 100%;
	max-width: 100%
    object-fit: cover;
    border-radius: 10px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    transition: filter 0.3s ease;
}

/* Optional hover effect */
.gallery-media-item:hover {
    transform: scale(1.05);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
}

.media-preview-clickable {
    cursor: pointer;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    transition: filter 0.3s ease;

}

.media-preview-clickable:hover {
    transform: scale(1.20);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
}

.reemi-modal-close-preview {
	display: none;
    position: absolute; /* Position it absolutely within the modal */
    top: 10px; /* Adjust the top position */
    right: 10px; /* Move it to the right */
    font-size: 24px; /* Increase font size */
    color: #aaa; /* Change color if needed */
    padding: 5px 10px; /* Add padding for a larger clickable area */
    border: none; /* Remove border */
    background: transparent; /* Make background transparent */
    cursor: pointer; /* Change cursor to pointer */
    transition: color 0.3s ease; /* Add transition for hover effect */
}

.reemi-modal-close-preview:hover {
    color: #000; /* Change color on hover */
}

.reemi-pre-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 1.0));
    transition: filter 0.3s ease;
}

/*-----------------------*/
/*00000000000000000000000*/

.modal {
	display: flex;
    /*flex-direction: column;*/
    /*align-items: center;*/
    justify-content: center;
    background-color: white;
    border-radius: 15px;
    padding: 15px;
    width: auto;
    max-width: 90vw;
    /*max-height: 90vh;*/
    overflow: hidden;
	z-index: 10000;
}

.reemi-pre-modal-content {
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: center;
    background-color: black;
    padding: 5px;
    max-width: 100%;
    /*max-height: 100%;*/
    width: auto;
    /*height: 95%;*/
    position: relative;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
}

.reemi-pre-modal-content .media-wrap img,
.reemi-pre-modal-content .media-wrap video {
    max-width: 100%;
    max-height: calc(70vh - 100px);
    width: auto;
    height: auto;
    display: flex;
	/*width: fit-content;*/
    margin: 0 auto;
    /*clip-path: inset(0 round 15px);*/
	border-radius: 15px;
    z-index: 100001;
	/*overflow: visible;*/
}

.modal-content-wrapper {
    /*display: inline-block;*/
    flex-direction: column;
    align-items: center;
	/*height: 100%;
    width: fit-content;
	margin: 0;*/
	border-radius: 15px;
}

/* 6. Media Display and Black Areas */
.media-display {
    width: auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
	border-radius: 15px;
}

.media-wrap {
	width: auto;
    max-width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
	border-radius: 15px;
}

.modal-content {
    max-width: 100%;
    max-height: 80vh; /* Limit height to viewport */
    object-fit: contain; /* Maintain aspect ratio */
    width: auto;
    height: auto;
	border-radius: 15px;
}

/*.black-area {
    background-color: black;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
}*/

.top-black-area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-bottom: -5px;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    /*padding: 15px;*/
    position: relative;
	max-width: 100%;
    width: 100%;
}

.bottom-black-area {
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*gap: 10px;*/
    height: auto;
    margin-top: 5px;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    /*padding: 15px;*/
    color: white;
    font-size: 12px;
    text-align: center;
    position: relative;
	z-index:10002;
	/*word-wrap: break-word;
    overflow-wrap: break-word;*/
    hyphens: auto;            
    max-width: 100%;
    width: fit-content;
}

.media-title {
    color: white;
    background-color: transparent;
    padding: 1px;
    text-align: center;
    font-size: 14px;
	margin-top: 5px;
    margin-bottom: 5px;
}

.media-description {
    display: none;
	max-width: 100%;
    width: fit-content;
    color: white;
    text-align: center;
    padding: 0px;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 1px;
	/*width: 50%; /* Set a width */
    margin: 0 auto;
}

.top-black-area:empty,
.bottom-black-area:empty {
    display: none;
}

/* 7. Button Containers and Interactions */
.button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.clickthrough-button {
    background-color: green;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
    display: inline-block;
}

.clickthrough-button:hover {
    transform: scale(1.20);
}

.share-button {
    background-color: blue;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
    display: inline-block;
}

.share-button:hover {
    transform: scale(1.20);
}

#click-to-play-overlay {
    position: absolute; /* Position it absolutely within the modal */
    top: 0;
    left: 0;
    width: 100%; /* Cover the entire media area */
    height: 100%; /* Cover the entire media area */
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: flex; /* Center the play button */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 100000000; /* Ensure it sits above the media but below the modal content */
}

.play-button {
	animation: zoom 1s 2; /* Add animation */
}

.play-button:hover {
	transform: scale(1.20);
}	

#unmute-button {
	display: none;
    position: absolute;
    top: 10px;
    right: 5px;
    padding: 1px 1px;
    background-color: transparent;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    z-index: 100005;
    animation: zoom 1s 2;
}

#unmute-button:hover {
    background-color: transparent;
    color: green;
}

.media-wrap:has(#close-media-button:not([style*="display: none"])) #unmute-button {
    top: 45px;
    right: 5px;
}

#close-media-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100005;
    transition: background 0.3s ease;
	padding: 0;
	line-height: 1;
}

#close-media-button:hover {
    background: rgba(0,0,0,0.7);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 1.0));
    transition: filter 0.3s ease;
    transform: scale(1.2);
}

.share-modal {
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
	z-index: 1000000;
}

.share-modal-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 200px;
    max-width: 90%;
    overflow: auto;
}

.share-modal-close {
    cursor: pointer;
    font-size: 24px;
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
}

.share-modal-close:hover {
    color: #000;
}

.share-modal h2 {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)); /* Existing shadow effect */
    transition: filter 0.3s ease; /* Existing transition effect */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Font stack */
    color: #1d2327; /* Text color */
    font-size: 1.3em; /* Font size */
    margin: 1em 0; /* Margin */
}

.share-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: transform 0.2s;
    text-decoration: none;
}

.share-icon svg {
    /*width: 40px; /* Adjust size as needed */
    /*height: 40px; /* Adjust size as needed */
    fill: currentColor; /* Inherit color from parent */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    transition: filter 0.3s ease;
}

.share-icon:hover svg {
    transform: scale(1.20);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
}

#share-facebook svg {
    fill: #1B75BC; /* Your company blue */
}

#share-twitter svg {
    fill: #055919; /* Your company green */
}

#copy-link svg {
    fill: #630404; /* Your company red */
}

#preview-modal-image:not([style*="display: none"]) + #unmute-button,
#preview-modal-video[style*="display: none"] + #unmute-button {
    display: none !important;
}

/*#reemi-media-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0,0,0,0.9);
}*/

/*.reemi-pre-modal {  //potential use for full screen mode later
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 1.0));
    transition: filter 0.3s ease;
}*/

@media screen and (max-width: 768px), screen and (max-height: 600px) {
    .modal {
        max-width: 80vw;     /* Slightly more responsive width */
        max-height: 85vh;    /* Adjust max height */
        padding: 10px;       /* Reduce padding */
		overflow: visible;
    }

    .reemi-pre-modal-content {
        /*max-width: 95%;     /* Ensure content fits */
        /*overflow: visible; /*Prevent any internal overflow */
    }

    .modal-content-wrapper {
        max-width: 100%;     /* Full width of wrapper */
        overflow: visible; /* Prevent internal overflow */
    }

    .media-display {
        max-width: 100%;     /* Full width of display area */
        overflow: visible;    /* Prevent internal overflow */
		
    }

    .media-wrap {
        max-width: 100%;     /* Full width of media wrap */
        overflow: visible;    /* Prevent internal overflow */
		
    }

    .reemi-pre-modal-content .media-wrap img,
    .reemi-pre-modal-content .media-wrap video {
        max-width: 100%;     /* Ensure media fits */
        max-height: 60vh;    /* Reduced height for smaller/shorter screens */
        object-fit: contain; /* Maintain aspect ratio */
		
    }
	
	#click-to-play-overlay {
        font-size: 20px; /* For tablets and larger mobile devices */
    }
	
	.unmute-button {
		top: 10px;
		right: 5px;
		padding: 5px 7px;
		border-radius: 5px;
		font-size: 14px;
	}

	.close-media-button {
		top: 10px;
		right: 10px;
		border-radius: 50%;
		width: 20px;
		height: 20px;
	}

	.media-wrap:has(#close-media-button:not([style*="display: none"])) #unmute-button {
		top: 45px;
		right: 5px;
	}

	.clickthrough-button,
	.share-button {
		padding: 5px 10px;
	}	

}

@media screen and (max-width: 320px), screen and (max-height: 480px) {
    .modal {
        max-width: 80vw;     /* Even more responsive on very small screens */
        /*max-height: 80vh;    /* Further height reduction */
        padding: 5px;        /* Minimal padding */
		overflow: visible;
    }

    .reemi-pre-modal-content .media-wrap img,
    .reemi-pre-modal-content .media-wrap video {
        max-height: 90vh;    /* Further height reduction */
		
    }
	
	#click-to-play-overlay {
        font-size: 16px; /* For small mobile devices */
    }

    .bottom-black-area,
    .top-black-area {
        padding: 8px;        /* Tighter padding */
        font-size: 10px;     /* Smaller font */
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;            
		max-width: 100%;
		width: 100%;
    }
	
	.top-black-area {
		align-items: center;
		margin-bottom: -11px;
	}

	.bottom-black-area {
		padding: 0px;
		margin-top: 2px;
	}

	.unmute-button {
		top: 8px;
		right: 3px;
		padding: 3px 5px;
		border-radius: 3px;
		font-size: 12px;
	}

	.close-media-button {
		top: 8px;
		right: 8px;
		border-radius: 50%;
		width: 15px;
		height: 15px;
		font-size: 12px;
	}
	
	.button-container {
		flex-direction: column;
		gap: 1px;
	}

	.media-wrap:has(#close-media-button:not([style*="display: none"])) #unmute-button {
		top: 45px;
		right: 3px;
	}

	.clickthrough-button,
	.share-button {
		padding: 3px 6px;
	}
	
	.loading-spinner {
		width: 1.5rem;
		height: 1.5rem;
	}

	.loading-text {
		font-size: 12px;
	}
}

@media screen and (max-width: 250px), (max-height: 200px) {
    .modal {
        width: 80vw;
    }

    .reemi-pre-modal-content {
        width:80vw;
    }

    .modal-content-wrapper {
        width: 80vw;
    }
	
	.media-display {
		max-height: 30vh;
	}

    .reemi-pre-modal-content .media-wrap img,
    .reemi-pre-modal-content .media-wrap video {
        max-height: 30vh;
    }

    .media-description,
    .media-title {
        font-size: 5px;
    }

    .clickthrough-button,
    .share-button {
        margin-top: 0px;
		font-size: 6px;
    }
}

@media screen and (max-width: 150px), screen and (max-height: 200px) {
	#click-to-play-overlay {
        font-size: 6px; /* For small mobile devices */
    }
}

/*@media screen and (max-width: 150px), screen and (max-height: 200px) {
    .modal {
        /*max-width: 100%;*/
        /*max-height: 100%;
        /*padding: 2px;*/
    /*}/*

    .reemi-pre-modal-content .media-wrap img,
    .reemi-pre-modal-content .media-wrap video {
        max-height: 100%; 
    }

    .media-title,
    .media-description {
        font-size: 6px; 
    }
}*/

@media screen and (max-height: 500px) {
    .modal {
		width: fit-content;
		display: inline-flex;
		justify-content: centre;
        max-width: 75vw;     /* More aggressive width reduction */
        /*max-height: 100%;    /* Further height reduction */
        padding: 5px;        /* Minimal padding */
		overflow: visible;
    }
	
	.reemi-pre-modal-content {
		width: fit-content;
		display: inline-flex;
		justify-content: centre;
        max-width: 95%;      /* Proportional content width */
        max-height: 90%;     /* Height reduction */
        overflow: visible;    /* Prevent internal overflow */
    }

    .modal-content-wrapper {
		width: fit-content;
		/*display: inline-flex;*/
		justify-content: centre;
        max-width: 100%;     /* Full width maintenance */
        /*max-height: 90%;     /* Height reduction */
        overflow: visible;    /* Prevent internal overflow */
    }

    .reemi-pre-modal-content .media-wrap img,
    .reemi-pre-modal-content .media-wrap video {
        max-height: 40vh;    /* Even more reduced height */
		
    }
	
	#click-to-play-overlay {
        font-size: 10px; /* For smaller mobile devices */
    }
	
	.media-description,
	.media-title {
        font-size: 10px;   /* Even smaller font */
        line-height: 1;   /* Extremely compact */
        padding: 1px 0;   /* Minimal padding */
        margin: 0;        /* Remove margins */
		max-width: 100%;
    }

    .bottom-black-area,
    .top-black-area {
        /*padding: 10px;        /* Minimal padding */
        /*font-size: 8px;      /* Smallest font */
		max-width: 100%;
		width: 100%;
    }
	
	.top-black-area {
		margin-bottom: 1px;
	}
	
	#unmute-button {
		top: 5px;
		right: 3px;
		padding: 1px 3px;
		border-radius: 3px;
		font-size: 10px;
	}

	#close-media-button {
		top: 5px;
		right: 5px;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		font-size: 10px;
	}

	.media-wrap:has(#close-media-button:not([style*="display: none"])) #unmute-button {
		top: 20px;
		right: 3px;
	}

	.button-container {
		flex-direction: row;
		gap: 5px;
	}

	.clickthrough-button,
	.share-button {
		padding: 2px 5px;
	}
}

@media screen and (max-height: 400px) {
    .modal {
		width: fit-content;
		display: inline-flex;
		justify-content: center;
        max-width: 75vw;     /* More aggressive width reduction */
        max-height: 85vh;    /* Further height reduction */
        padding: 5px;        /* Minimal padding */
		overflow: visible;
    }
	
	.reemi-pre-modal-content {
		width: fit-content;
		display: inline-flex;
		justify-content: center;
        max-width: 95%;      /* Proportional content width */
        max-height: 90%;     /* Height reduction */
        overflow: visible;    /* Prevent internal overflow */
		padding: 3px;
    }

    .modal-content-wrapper {
		width: fit-content;
		/*display: inline-flex;*/
		justify-content: center;
        max-width: 100%;     /* Full width maintenance */
        /*max-height: 90%;     /* Height reduction */
        overflow: visible;    /* Prevent internal overflow */
    }

    .reemi-pre-modal-content .media-wrap img,
    .reemi-pre-modal-content .media-wrap video {
        max-height: calc(30vh - 10px);    /* Even more reduced height */
		
    }
	
	#click-to-play-overlay {
        font-size: 10px; /* For smaller mobile devices */
    }
	
	.media-description,
	.media-title {
        font-size: 8px;   /* Even smaller font */
        line-height: 1;   /* Extremely compact */
        padding: 1px 0;   /* Minimal padding */
        margin: 0;        /* Remove margins */
		max-width: 100%;
    }

    .bottom-black-area,
    .top-black-area {
        /*padding: 10px;        /* Minimal padding */
        /*font-size: 8px;      /* Smallest font */
		max-width: 100%;
		width: 100%;
    }
	
	.top-black-area {
		padding: 2px;
		margin-top: 6px;
		margin-bottom: 1px;
	}
	
	#unmute-button {
		top: 5px;
		right: 3px;
		padding: 1px 3px;
		border-radius: 3px;
		font-size: 10px;
	}

	#close-media-button {
		top: 5px;
		right: 5px;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		font-size: 10px;
	}

	.media-wrap:has(#close-media-button:not([style*="display: none"])) #unmute-button {
		top: 20px;
		right: 3px;
	}

	.button-container {
		display: block;
		flex-direction: row;
		gap: 5px;
	}

	.clickthrough-button,
	.share-button {
		padding: 2px 5px;
		font-size: 10px;
	}
}

@media screen and (max-height: 300px) {
    .modal {
		width: 60vw;
		display: flex;
		justify-content: center;
        max-width: 290px;     /* More aggressive width reduction */
        max-height: 95vh;    /* Further height reduction */
        padding: 5px;        /* Minimal padding */
		/*overflow: visible;*/
		/*box-sizing: border-box;*/
    }
	
	.reemi-pre-modal-content {
		width: 60vw;
		display: flex;
		justify-content: center;
		align-items: center;
        max-width: 290px;      /* Proportional content width */
		/*height: 80%;
        max-height: 80%;     /* Height reduction */
        overflow: visible;    /* Prevent internal overflow */
    }

    .modal-content-wrapper {
		width: 60vw;
		/*display: flex;
		justify-content: center;*/
        max-width: 290px;     /* Full width maintenance */
        /*max-height: 80%;     /* Height reduction */
        overflow: visible;    /* Prevent internal overflow */
    }

    .reemi-pre-modal-content .media-wrap img,
    .reemi-pre-modal-content .media-wrap video {
        max-height: 40vh;    /* Even more reduced height */
		
    }
	
	.media-display {
		max-width: 280px;
	}
	
	#click-to-play-overlay {
        font-size: 8px; /* For very small screens */
    }
	
	.media-description,
	.media-title {
        font-size: 8px;   /* Even smaller font */
        /*line-height: 1;   /* Extremely compact */
        /*padding: 1px 0;   /* Minimal padding */
        margin: 0 auto;        /* Remove margins */
		max-width: 280px;
		width: 60vw;
    }

    .bottom-black-area,
    .top-black-area {
        padding: 0px;        /* Minimal padding */
        font-size: 6px;      /* Smallest font */
		max-width: 280px;
		width: 60vw !important;
		gap: 1px;
    }

	.unmute-button {
		top: 3px;
		right: 2px;
		padding: 1px 3px;
		border-radius: 2px;
		font-size: 8px;
	}

	.close-media-button {
		top: 1px;
		right: 2px;
		border-radius: 50%;
		width: 10px;
		height: 10px;
		font-size: 8px;
	}
	
	.button-container {
		display: flex;
		flex-direction: row;
		gap: 5px;
	}

	.media-wrap:has(#close-media-button:not([style*="display: none"])) #unmute-button {
		top: 15px;
	right: 1px;
	}

	.clickthrough-button,
	.share-button {
		padding: 1px 4px;
	}
}

@media screen and (max-height: 200px) {
    .modal {
        width: auto;
        /*display: inline-flex;*/
        justify-content: center;
        max-width: 60vw;     /* More aggressive width reduction */
        max-height: 100%;    /* Maintain full height */
        padding: 2px;        /* Minimal padding */
        box-sizing: border-box;
    }

    .reemi-pre-modal-content {
        width: fit-content;
        display: inline-flex;
        justify-content: center;
        max-width: 80%;      /* Proportional content width */
        height: 80%;         /* Maintain height */
        max-height: 80%;     /* Height reduction */
        overflow: visible;    /* Prevent internal overflow */
    }

    .modal-content-wrapper {
        width: fit-content;
        display: inline-flex;
        justify-content: center;
        max-width: 100%;     /* Full width maintenance */
        max-height: 80%;     /* Height reduction */
        overflow: hidden;    /* Prevent internal overflow */
		
    }

    .reemi-pre-modal-content .media-wrap img,
    .reemi-pre-modal-content .media-wrap video {
        max-height: 20vh;    /* Further reduced height for small screens */
		object-fit: contain;
		
    }
	
	#click-to-play-overlay {
        font-size: 4px; /* For extremely small displays */
    }

    .media-description,
    .media-title {
        font-size: 6px;      /* Smaller font for very small screens */
        line-height: 1;      /* Compact line height */
        margin: 0;           /* Remove margins */
        max-width: 100%;
        width: 100%;
    }

    .bottom-black-area,
    .top-black-area {
        max-width: 100%;
        width: 100%;
        font-size: 6px;      /* Smallest font */
        padding: 0;          /* Remove padding */
    }
	
	.top-black-area {
		margin-bottom: 1px;
	}

	.bottom-black-area {
		margin-top: 1px;
	}

    #unmute-button {
        top: 1px;
        right: 1px;
        padding: 0px 0px;
        border-radius: 0px;
        font-size: 6px;      /* Smaller button font */
    }

    #close-media-button {
        top: 1px;
        right: 1px;
        border-radius: 50%;
        width: 8px;          /* Small button size */
        height: 8px;
		font-size: 6px;
    }

    .media-wrap:has(#close-media-button:not([style*="display: none"])) #unmute-button {
        top: 7px;
        right: 1px;
    }

    .clickthrough-button,
    .share-button {
        padding: 1px 2px;    /* Minimal padding for buttons */
        font-size: 6px;      /* Smallest button font */
    }
}

/*@media screen and (max-width: 250px), (max-height: 200px) {
	
	.modal {
		max-height: fit-content;
	}
	
	.reemi-rpre-modal-content {
		max-height: 95vh;
	}
	
	.button-container {
		display: block;
		flex-direction: column;
	}
}*/