/* ===========================================================
   WhatsApp Rules Modal
   Version: 1.0
   Author: ChatGPT
   =========================================================== */

.waRulesOverlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.65);
    z-index: 999999;
    box-sizing: border-box;
}

.waRulesOverlay.waRulesVisible {
    display: flex;
}

.waRulesDialog {
    width: 100%;
    max-width: 760px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    animation: waRulesFadeIn .25s ease;
}

@keyframes waRulesFadeIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.waRulesHeader {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 22px;

    border-bottom: 1px solid #e5e5e5;

}

.waRulesTitle {

    margin: 0;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.3;

}

.waRulesClose {

    width: 42px;

    height: 42px;

    border: none;

    background: transparent;

    cursor: pointer;

    font-size: 24px;

    transition: .2s;

}

.waRulesClose:hover {

    transform: scale(1.08);

}
.waRulesBody {

    display: flex;

    flex-direction: column;

    padding: 22px;

    overflow: hidden;

}

.waRulesDescription {

    margin: 0 0 20px 0;

    font-size: 15px;

    line-height: 1.8;

    color: #444444;

}

.waRulesLoading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 45px 20px;

}

.waRulesSpinner {

    width: 24px;

    height: 24px;

    border: 3px solid #dddddd;

    border-top-color: #25D366;

    border-radius: 50%;

    animation: waRulesSpinnerRotate .8s linear infinite;

}

@keyframes waRulesSpinnerRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

.waRulesError {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 35px;

    text-align: center;

    color: #b00020;

    font-weight: 600;

}

.waRulesScroll {

    display: none;

    height: 340px;

    overflow-y: auto;

    border: 1px solid #dddddd;

    border-radius: 8px;

    background: #fafafa;

    padding: 18px;

    box-sizing: border-box;

}

.waRulesScrollNotice {

    margin-top: 15px;

    text-align: center;

    font-size: 14px;

    color: #777777;

}
.waRulesAgreement {

    margin-top: 20px;

}

.waRulesAgreementLabel {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;

    user-select: none;

}

.waRulesCheckbox {

    margin-top: 3px;

    width: 18px;

    height: 18px;

    flex-shrink: 0;

}

.waRulesAgreementText {

    font-size: 15px;

    line-height: 1.7;

    color: #333333;

}

.waRulesFooter {

    display: flex;

    justify-content: flex-start;

    gap: 12px;

    padding: 20px 22px;

    border-top: 1px solid #e5e5e5;

    background: #ffffff;

}

.waRulesButton {

    min-width: 170px;

    height: 46px;

    border: none;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color .2s,
        color .2s,
        opacity .2s,
        transform .15s;

}

.waRulesButton:hover:not(:disabled) {

    transform: translateY(-1px);

}

.waRulesButton:active:not(:disabled) {

    transform: translateY(0);

}

.waRulesButton:disabled {

    opacity: .45;

    cursor: not-allowed;

}

.waRulesButtonCancel {

    background: #ececec;

    color: #333333;

}

.waRulesButtonCancel:hover:not(:disabled) {

    background: #dddddd;

}

.waRulesButtonContinue {

    background: #25D366;

    color: #ffffff;

}

.waRulesButtonContinue:hover:not(:disabled) {

    background: #1fb85a;

}
/* ===========================================
   Содержимое правил, загружаемое из /privacy
   =========================================== */

.waRulesScroll * {
    box-sizing: border-box;
    max-width: 100%;
}

.waRulesScroll h1,
.waRulesScroll h2,
.waRulesScroll h3,
.waRulesScroll h4,
.waRulesScroll h5,
.waRulesScroll h6 {

    margin: 0 0 16px 0;

    line-height: 1.4;

    color: #222222;

}

.waRulesScroll p {

    margin: 0 0 14px 0;

    line-height: 1.9;

    color: #444444;

}

.waRulesScroll ul,
.waRulesScroll ol {

    margin: 0 0 18px 0;

    padding-right: 22px;

    line-height: 1.9;

}

.waRulesScroll li {

    margin-bottom: 8px;

}

.waRulesScroll img {

    display: block;

    max-width: 100%;

    height: auto;

    margin: 12px auto;

    border-radius: 6px;

}

.waRulesScroll table {

    width: 100%;

    border-collapse: collapse;

    margin: 15px 0;

}

.waRulesScroll table td,
.waRulesScroll table th {

    border: 1px solid #dddddd;

    padding: 8px;

    text-align: right;

}

.waRulesScroll a {

    color: #0078d4;

    word-break: break-word;

}

.waRulesScroll iframe,
.waRulesScroll video {

    max-width: 100%;

}

.waRulesScroll::-webkit-scrollbar {

    width: 10px;

}

.waRulesScroll::-webkit-scrollbar-track {

    background: #f3f3f3;

}

.waRulesScroll::-webkit-scrollbar-thumb {

    background: #bcbcbc;

    border-radius: 20px;

}

.waRulesScroll::-webkit-scrollbar-thumb:hover {

    background: #999999;

}
/* ===========================================
   Адаптация для мобильных устройств
   =========================================== */

@media (max-width: 768px) {

    .waRulesOverlay {

        padding: 10px;

    }

    .waRulesDialog {

        width: 100%;

        max-width: 100%;

        max-height: 96vh;

        border-radius: 10px;

    }

    .waRulesHeader {

        padding: 16px;

    }

    .waRulesTitle {

        font-size: 18px;

    }

    .waRulesBody {

        padding: 16px;

    }

    .waRulesScroll {

        height: 250px;

        padding: 14px;

    }

    .waRulesFooter {

        flex-direction: column;

    }

    .waRulesButton {

        width: 100%;

        min-width: auto;

    }

}

/* ===========================================
   Анимация закрытия
   =========================================== */

.waRulesOverlay.waRulesClosing {

    animation: waRulesOverlayFadeOut .2s forwards;

}

.waRulesOverlay.waRulesClosing .waRulesDialog {

    animation: waRulesDialogFadeOut .2s forwards;

}

@keyframes waRulesOverlayFadeOut {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

@keyframes waRulesDialogFadeOut {

    from {

        opacity: 1;

        transform: translateY(0);

    }

    to {

        opacity: 0;

        transform: translateY(15px);

    }

}

/* ===========================================
   Выделение текста
   =========================================== */

.waRulesScroll ::selection {

    background: #25D366;

    color: #ffffff;

}

/* ===========================================
   Скрытые элементы
   =========================================== */

.waRulesHidden {

    display: none !important;

}