/**
 * Layered Wave Backgrounds
 * Smooth, subtle wave layers for cards, modals, and calendar
 *
 * Copyright (c) 2025 EHORS Technology. All Rights Reserved.
 */

/* Base layered background mixin */
.layered-wave-bg {
    position: relative;
    overflow: hidden;
}

.layered-wave-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(156, 136, 255, 0.08) 0%,
            rgba(199, 210, 254, 0.12) 25%,
            rgba(219, 234, 254, 0.15) 50%,
            rgba(191, 219, 254, 0.12) 75%,
            rgba(147, 197, 253, 0.08) 100%
        );
    pointer-events: none;
}

.layered-wave-bg::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    right: -10%;
    bottom: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at top,
            rgba(199, 210, 254, 0.2) 0%,
            rgba(219, 234, 254, 0.15) 20%,
            transparent 50%
        ),
        radial-gradient(ellipse at bottom right,
            rgba(191, 219, 254, 0.15) 0%,
            rgba(147, 197, 253, 0.1) 30%,
            transparent 60%
        );
    pointer-events: none;
    border-radius: 50%;
}

/* Room Cards */
.room-card-clean {
    position: relative;
}

.room-card-clean::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background:
        linear-gradient(135deg,
            rgba(167, 139, 250, 0.15) 0%,
            rgba(196, 181, 253, 0.20) 25%,
            rgba(221, 214, 254, 0.25) 50%,
            rgba(196, 181, 253, 0.20) 75%,
            rgba(167, 139, 250, 0.15) 100%
        );
    pointer-events: none;
    border-radius: inherit;
}

.room-card-clean::after {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 140%;
    height: 100%;
    z-index: 0;
    background:
        radial-gradient(ellipse at top left,
            rgba(199, 210, 254, 0.30) 0%,
            rgba(219, 234, 254, 0.20) 30%,
            transparent 60%
        );
    pointer-events: none;
    border-radius: 50%;
}

/* Ensure content is above background layers */
.room-card-clean > * {
    position: relative;
    z-index: 1;
}

/* Modal Dialogs */
.modal-content {
    position: relative;
    overflow: hidden;
}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background:
        linear-gradient(180deg,
            rgba(147, 197, 253, 0.15) 0%,
            rgba(191, 219, 254, 0.22) 30%,
            rgba(219, 234, 254, 0.28) 60%,
            rgba(199, 210, 254, 0.22) 85%,
            rgba(156, 136, 255, 0.15) 100%
        );
    pointer-events: none;
    border-radius: inherit;
}

.modal-content::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 60%;
    height: 120%;
    z-index: 0;
    background:
        radial-gradient(ellipse at top right,
            rgba(167, 139, 250, 0.25) 0%,
            rgba(196, 181, 253, 0.18) 35%,
            transparent 70%
        );
    pointer-events: none;
    border-radius: 50%;
}

/* Modal body and header need z-index */
.modal-header,
.modal-body,
.modal-footer {
    position: relative;
    z-index: 1;
}

/* Calendar Container */
.calendar-container,
#calendar-modal .modal-content {
    position: relative;
    overflow: hidden;
}

.calendar-container::before,
#calendar-modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background:
        linear-gradient(135deg,
            rgba(191, 219, 254, 0.15) 0%,
            rgba(219, 234, 254, 0.22) 25%,
            rgba(224, 242, 254, 0.28) 50%,
            rgba(219, 234, 254, 0.22) 75%,
            rgba(191, 219, 254, 0.15) 100%
        );
    pointer-events: none;
    border-radius: inherit;
}

.calendar-container::after,
#calendar-modal .modal-content::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 80%;
    z-index: 0;
    background:
        radial-gradient(ellipse at bottom left,
            rgba(147, 197, 253, 0.28) 0%,
            rgba(191, 219, 254, 0.20) 40%,
            transparent 70%
        );
    pointer-events: none;
    border-radius: 50%;
}

/* Calendar grid and elements need z-index */
.calendar-grid,
.calendar-header,
.calendar-weekdays,
.calendar-days {
    position: relative;
    z-index: 1;
}

/* Dark Theme Variants */
[data-theme="dark"] .room-card-clean::before {
    background:
        linear-gradient(135deg,
            rgba(99, 102, 241, 0.15) 0%,
            rgba(129, 140, 248, 0.20) 25%,
            rgba(165, 180, 252, 0.25) 50%,
            rgba(129, 140, 248, 0.20) 75%,
            rgba(99, 102, 241, 0.15) 100%
        );
}

[data-theme="dark"] .room-card-clean::after {
    background:
        radial-gradient(ellipse at top left,
            rgba(88, 166, 255, 0.25) 0%,
            rgba(139, 92, 246, 0.18) 30%,
            transparent 60%
        );
}

[data-theme="dark"] .modal-content::before {
    background:
        linear-gradient(180deg,
            rgba(99, 102, 241, 0.10) 0%,
            rgba(129, 140, 248, 0.12) 30%,
            rgba(165, 180, 252, 0.15) 60%,
            rgba(129, 140, 248, 0.12) 85%,
            rgba(99, 102, 241, 0.10) 100%
        );
}

[data-theme="dark"] .modal-content::after {
    background:
        radial-gradient(ellipse at top right,
            rgba(139, 92, 246, 0.15) 0%,
            rgba(124, 58, 237, 0.10) 35%,
            transparent 70%
        );
}

[data-theme="dark"] .calendar-container::before,
[data-theme="dark"] #calendar-modal .modal-content::before {
    background:
        linear-gradient(135deg,
            rgba(88, 166, 255, 0.08) 0%,
            rgba(96, 165, 250, 0.10) 25%,
            rgba(125, 211, 252, 0.12) 50%,
            rgba(96, 165, 250, 0.10) 75%,
            rgba(88, 166, 255, 0.08) 100%
        );
}

[data-theme="dark"] .calendar-container::after,
[data-theme="dark"] #calendar-modal .modal-content::after {
    background:
        radial-gradient(ellipse at bottom left,
            rgba(99, 102, 241, 0.12) 0%,
            rgba(129, 140, 248, 0.08) 40%,
            transparent 70%
        );
}

/* Availability Table Background */
.availability-table-container {
    position: relative;
    overflow: hidden;
}

.availability-table-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background:
        linear-gradient(180deg,
            rgba(219, 234, 254, 0.08) 0%,
            rgba(224, 242, 254, 0.12) 50%,
            rgba(219, 234, 254, 0.08) 100%
        );
    pointer-events: none;
}

.availability-table-container > * {
    position: relative;
    z-index: 1;
}

/* Photo Gallery Modal */
#photoGalleryModal .modal-content::before {
    background:
        linear-gradient(135deg,
            rgba(30, 41, 59, 0.4) 0%,
            rgba(51, 65, 85, 0.3) 50%,
            rgba(30, 41, 59, 0.4) 100%
        );
}

#photoGalleryModal .modal-content::after {
    background:
        radial-gradient(ellipse at center,
            rgba(88, 166, 255, 0.08) 0%,
            transparent 50%
        );
}

/* Room Details Modal */
#roomDetailsModal .modal-content {
    position: relative;
    overflow: hidden;
}

#roomDetailsModal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background:
        linear-gradient(180deg,
            rgba(167, 139, 250, 0.06) 0%,
            rgba(196, 181, 253, 0.10) 40%,
            rgba(221, 214, 254, 0.12) 70%,
            rgba(196, 181, 253, 0.08) 100%
        );
    pointer-events: none;
}

#roomDetailsModal .modal-content::after {
    content: '';
    position: absolute;
    bottom: -25%;
    right: -20%;
    width: 70%;
    height: 90%;
    z-index: 0;
    background:
        radial-gradient(ellipse at bottom right,
            rgba(147, 197, 253, 0.15) 0%,
            rgba(191, 219, 254, 0.10) 40%,
            transparent 70%
        );
    pointer-events: none;
    border-radius: 50%;
}

/* Cart Modal */
#cartModal .modal-content::before {
    background:
        linear-gradient(180deg,
            rgba(147, 197, 253, 0.06) 0%,
            rgba(191, 219, 254, 0.10) 35%,
            rgba(219, 234, 254, 0.12) 65%,
            rgba(191, 219, 254, 0.08) 100%
        );
}

#cartModal .modal-content::after {
    background:
        radial-gradient(ellipse at top center,
            rgba(199, 210, 254, 0.12) 0%,
            rgba(224, 242, 254, 0.08) 50%,
            transparent 80%
        );
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .room-card::after,
    .modal-content::after,
    .calendar-container::after {
        width: 100%;
        height: 60%;
    }
}

@media (max-width: 480px) {
    .room-card::before,
    .modal-content::before,
    .calendar-container::before {
        opacity: 0.8;
    }

    .room-card::after,
    .modal-content::after,
    .calendar-container::after {
        opacity: 0.7;
    }
}