/* Переменные для управления темой */
:root {
    --prebook-primary: #FFC725;
    --prebook-bg-dark: #1f1f1f;
    --prebook-bg-light: #3d3d3d;
    --prebook-overlay-bg: rgba(31, 31, 31, 0.7);
    --prebook-transition-duration: 0.6s;
    --prebook-loader-size: 30px;
}

/* Анимации */
@keyframes rotation {
    0% { transform: rotate(45deg); }
    100% { transform: rotate(765deg); }
}

@keyframes loaderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Контейнер модального окна */
#__preBookMainFrameContainer {
    background-color: var(--prebook-bg-light);
}

/* Стили для лоадера */
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    border: 0 transparent !important;
    background-color: var(--prebook-bg-light);
    border-radius: 50%;
    animation: rotation 3s infinite linear;
}

.loader::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--prebook-loader-size);
    height: var(--prebook-loader-size);
    margin: calc(-1 * (var(--prebook-loader-size) / 2 + 2px)) 0 0 calc(-1 * (var(--prebook-loader-size) / 2 + 2px));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-left-color: var(--prebook-primary);
    border-radius: 50%;
    animation: rotation 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    box-sizing: content-box;
}

.loader_wrapper {
    position: absolute;
    inset: 0;
    background-color: var(--prebook-bg-dark);
    transition: opacity var(--prebook-transition-duration) cubic-bezier(0.22, 0, 0.22, 1);
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Оверлей */
.mainFrameOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--prebook-overlay-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--prebook-transition-duration) cubic-bezier(0.22, 0, 0.22, 1);
}

.mainFrameOverlay.show {
    opacity: 1;
    pointer-events: auto;
}

.mainFrameOverlay.show .mainFrameBox {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.mainFrameOverlay.loaded .loader_wrapper {
    opacity: 0;
    pointer-events: none;
}

/* Модальное окно */
.mainFrameBox {
    transition: all var(--prebook-transition-duration) cubic-bezier(0.22, 0, 0.22, 1);
    width: 80%;
    min-width: 320px;
    height: 80%;
    min-height: 360px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 10000;
    opacity: 0;
}

.mainFrameBox::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--prebook-bg-dark);
    z-index: -1;
    box-shadow: 0 0 50px -10px var(--prebook-bg-dark);
}

/* Кнопка закрытия */
.mainFrameClose {
    position: absolute;
    right: 49px;
    top: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23FFF' stroke-width='2' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l16 16M17 1L1 17'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
    transition: transform var(--prebook-transition-duration) cubic-bezier(0.22, 0, 0.22, 1);
    transform: scale(0.8);
    border: none;
    background-color: transparent;
}

.mainFrameClose:hover {
    transform: scale(1) rotate(90deg);
}

/* Контент iframe */
.mainFrame {
    width: 100%;
    height: 100%;
    border: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .mainFrameBox {
        width: 95%;
        min-width: auto;
        height: 90%;
        min-height: 300px;
    }

    .mainFrameClose {
        right: 15px;
        top: 10px;
        width: 28px;
        height: 28px;
        transform: scale(0.7);
    }
}

@media (max-width: 480px) {
    .mainFrameBox {
        width: 98%;
        height: 95%;
        min-height: 250px;
    }

    .mainFrameClose {
        right: 8px;
        top: 8px;
        width: 24px;
        height: 24px;
        transform: scale(0.6);
    }
}