.tm-toolbar-default {
    background: #f7f1eb;
}
.tm-toolbar-default .uk-subnav>*>:first-child, .tm-toolbar-default .uk-subnav>.uk-active>a,.tm-toolbar-default .uk-subnav>*>a:hover{
	color: rgb(217 58 79);
}
.media-stats.uk-overlay-default{
	background: #100f0f14;
}    

.media-item-stats{
    color: rgb(255 255 255 / 70%);
}

.media-stats.uk-overlay {
    padding: 10px 20px 20px 20px;
}   

.js-lightbox-like, .js-lightbox-download{
		min-width: 120px
}

/*
.js-lightbox-like:hover{
    background-color: #d83841;
}*/

.js-lightbox-like:hover {
    background-color: #ffffff00;
}

.js-lightbox-like.liked, .uk-button-default.liked:disabled {
	 background-color:#d83841 !important;
}
.uk-button-default.liked:hover{
    background-color: #d83841 !important;
}

.lottie-icon-eye-container{
	max-width:100px;
}
.uk-offcanvas-bar {
        left: -450px;
        width: 100%;
        padding: 50px 30px;
}
.uk-offcanvas-close svg{
	width:20px;
}

.uk-offcanvas-close {
     top: 20px;
     right:20px;
}

@media (min-width: 640px) {
    .uk-offcanvas-close {
        top: 30px;
        right: 30px;
    }
    
    .uk-offcanvas-close svg{
	width:25px;
	}
}    

@media (min-width: 640px) {   
    .js-lightbox-like, .js-lightbox-download{
		min-width: 200px
	}
}



/*animations*/
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(0deg); }
}

@keyframes diamondFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(0deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}



.ed-custom-modal .uk-modal-title {
    font-size: 26px; 
}

/**
 * Bottom Slide-Up Modal for Upload Form
 * UIkit Modal with custom positioning and animation
 */

#guest-message-form .uk-input,
#guest-message-form .uk-textarea {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    transition: all 0.3s ease;
}


/* Modal Dialog - Fixed at bottom with safe area support */
.ed-custom-modal .uk-modal-dialog {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: calc(90vh - env(safe-area-inset-top)) !important;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000 !important;
    padding-top: env(safe-area-inset-top) !important;
}

/* Slide up animation */
@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply animation when modal opens */
.ed-custom-modal.uk-open .uk-modal-dialog {
    animation: slide-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slide down animation when closing */
@keyframes slide-down {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Apply when closing (optional, UIkit handles this) */
.ed-custom-modal.uk-modal:not(.uk-open) .uk-modal-dialog {
    animation: slide-down 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Modal body styling */
.ed-custom-modal .uk-modal-body {
    padding: 0 !important;
    overflow-y: auto !important;
    max-height: 90vh !important;
}

/* Sticky header at top with safe area */
.ed-custom-modal .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: white !important;
    padding: max(20px, calc(env(safe-area-inset-top) + 10px)) 20px 15px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* Scrollable content area */
.ed-custom-modal .modal-content {
    padding: 20px !important;
    overflow-y: auto !important;
}

/* Handle/grip at top of modal */
.modal-handle {
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 20px;
    cursor: grab;
}

/* Close button styling - Safari compatible with safe area */
.ed-custom-modal .uk-modal-close-default {
    position: absolute !important;
    top: max(15px, env(safe-area-inset-top)) !important;
    right: 15px !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    padding: 5px !important;
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Desktop - center modal instead of bottom */
@media (min-width: 960px) {
    .ed-custom-modal .uk-modal-dialog {
        position: relative !important;
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 700px !important;
        max-width: 90% !important;
        margin: 50px auto !important;
        border-radius: 10px;
        max-height: 85vh;
    }
    
    /* Hide handle on desktop */
    .modal-handle {
        display: none;
    }
}

/* Backdrop darker */
.ed-custom-modal.uk-modal {
    background: rgba(0, 0, 0, 0.6);
}

/* Smooth scrolling inside modal */
.ed-custom-modal .uk-modal-dialog {
    -webkit-overflow-scrolling: touch;
}
input.uk-input::placeholder, textarea.uk-textarea::placeholder,{
	color:#C5ABAB;
 	font-weight:300;
}

.emoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.emoji-btn {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 8px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.emoji-btn:hover {
    transform: scale(1.2);
    background: #f0f0f0;
}