/* ===========================
   ROOT VARIABLES
   =========================== */
:root {
    /* Modal content */
    --modal-padding: clamp(8px, 1.5vw, 12px);

    /* Typography */
    --modal-h1-size: clamp(40px, 8vw, 64px);
    --modal-h2-size: clamp(32px, 6vw, 48px);
    --modal-h3-size: clamp(24px, 4vw, 30px);
    --modal-message-size: clamp(20px, 4vw, 32px);
    --modal-details-size: clamp(20px, 4vw, 30px);

    /* Rewards */
    --modal-reward-size: clamp(60px, 12vw, 75px);
    --modal-reward-gap: clamp(15px, 3vw, 25px);
    --modal-reward-font: clamp(16px, 3vw, 18px);
}

.modal-content {
    background-image: url('/public/images/wwf/wwf_background_2.jpg');
    background-position: center;
    background-size: cover;
    border-radius: 0;
    border: 0;
    padding: var(--modal-padding);
    box-sizing: border-box;
}

.modal-header {
    border: 0;
    padding: 0;
}

.modal-footer {
    border: 0;
}

.modal-header .close {
    background-image: url('/public/images/wwf/wwf_close.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: initial;
    margin: 0;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    width: clamp(30px, 5vw, 40px);
    height: clamp(30px, 5vw, 40px);
    min-width: clamp(30px, 5vw, 40px);
    min-height: clamp(30px, 5vw, 40px);
}

h2 {
    font-size: 64px;
    line-height: 64px;
    padding-bottom: 20px;
}

h1 {
    font-size: var(--modal-h1-size);
    line-height: normal;
}

h2 {
    font-size: var(--modal-h2-size);
    line-height: normal;
}

h3 {
    font-size: var(--modal-h3-size);
    line-height: normal;
}

p.message {
    font-size: var(--modal-details-size);
    line-height: clamp(26px, 4.5vw, 34px);
}

p.details {
    font-size: var(--modal-details-size);
    line-height: clamp(26px, 4.5vw, 34px);
}

.modalSingleWithBadgeAndPoint_Message {
    font-size: var(--modal-message-size);
    line-height: normal;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.studentReward {
    display: flex;
    justify-content: center;
    gap: var(--modal-reward-gap);
    flex-wrap: wrap;
}

.modalSingleWithBadgeAndPoint_TextContainer {
    text-align: center;
    box-sizing: border-box;
    padding: clamp(10px, 2vw, 20px);
}

.modalSingleWithBadgeAndPoint_Badges {
    background: url('/public/images/wwf/wwf_menu_badge.png') no-repeat center center/cover;
    padding-top: 0px;
    margin-right: 0;
    margin-bottom: clamp(15px, 3vw, 25px);
    width: var(--modal-reward-size);
    height: var(--modal-reward-size);
    min-width: var(--modal-reward-size);
    min-height: var(--modal-reward-size);
    text-align: center;
    color: black;
    font-family: 'WWF_Font'!Important;
    font-size: var(--modal-reward-font)!important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    align-content: center;
    box-sizing: border-box;
}

.modalSingleWithBadgeAndPoint_Points {
    background: url('/public/images/wwf/wwf_menu_pontok.png') no-repeat center center/cover;
    padding-top: 0px;
    margin-bottom: clamp(15px, 3vw, 25px);
    width: var(--modal-reward-size);
    height: var(--modal-reward-size);
    min-width: var(--modal-reward-size);
    min-height: var(--modal-reward-size);
    text-align: center;
    color: black;
    padding-right: 10px;
    font-family: 'WWF_Font'!Important;
    font-size: var(--modal-reward-font)!important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    align-content: center;
    box-sizing: border-box;
}

.modalDividedImage {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

a {
    text-decoration: underline !important;
}

.modalSingleWithTwoButtons_ButtonContainer {
    display: flex;
    gap: clamp(10px, 2vw, 15px);
    justify-content: center;
    margin-top: clamp(15px, 3vw, 20px);
    flex-wrap: wrap;
}

/* ===========================
   TABLET PORTRAIT & LANDSCAPE (768px - 1024px)
   =========================== */
@media (max-width: 1024px) {
    :root {
        --modal-h1-size: clamp(36px, 7vw, 56px);
        --modal-h2-size: clamp(28px, 5.5vw, 44px);
        --modal-h3-size: clamp(22px, 3.8vw, 28px);
        --modal-message-size: clamp(18px, 3.5vw, 28px);
        --modal-details-size: clamp(18px, 3.5vw, 28px);
    }
}

/* ===========================
   MOBILE LANDSCAPE (481px - 767px)
   =========================== */
@media (max-width: 767px) and (orientation: landscape) {
    :root {
        --modal-h1-size: clamp(32px, 6vw, 48px);
        --modal-h2-size: clamp(26px, 5vw, 38px);
        --modal-h3-size: clamp(20px, 3.5vw, 26px);
        --modal-message-size: clamp(16px, 3vw, 24px);
        --modal-details-size: clamp(16px, 3vw, 24px);
        --modal-reward-size: clamp(55px, 11vw, 70px);
        --modal-reward-gap: clamp(12px, 2.5vw, 20px);
    }

    .modal-dialog {
        max-width: 90%;
        margin: clamp(10px, 2vw, 20px) auto;
    }

    .modalSingleWithBadgeAndPoint_TextContainer {
        padding: clamp(8px, 1.5vw, 15px);
    }
}

/* ===========================
   MOBILE PORTRAIT (max 767px)
   =========================== */
@media (max-width: 767px) and (orientation: portrait) {
    :root {
        --modal-h1-size: clamp(34px, 8vw, 52px);
        --modal-h2-size: clamp(28px, 6vw, 42px);
        --modal-h3-size: clamp(22px, 4.5vw, 28px);
        --modal-message-size: clamp(18px, 4vw, 26px);
        --modal-details-size: clamp(18px, 4vw, 26px);
        --modal-reward-size: clamp(60px, 15vw, 75px);
        --modal-reward-gap: clamp(15px, 4vw, 25px);
    }

    .modal-dialog {
        max-width: 95%;
        margin: clamp(10px, 2vw, 20px) auto;
    }

    .modalSingleWithBadgeAndPoint_TextContainer {
        padding: clamp(10px, 2vw, 15px);
    }

    .modalSingleWithTwoButtons_ButtonContainer .button {
        width: 100%;
        margin: 5px 0;
    }
}

/* ===========================
   SMALL MOBILE (max 480px)
   =========================== */
@media (max-width: 480px) {
    :root {
        --modal-h1-size: clamp(30px, 7vw, 46px);
        --modal-h2-size: clamp(26px, 5.5vw, 38px);
        --modal-h3-size: clamp(20px, 4vw, 26px);
        --modal-message-size: clamp(16px, 3.5vw, 24px);
        --modal-details-size: clamp(16px, 3.5vw, 24px);
        --modal-reward-size: clamp(55px, 14vw, 70px);
    }

    .modal-dialog {
        max-width: 98%;
        margin: 8px auto;
    }

    .modalSingleWithBadgeAndPoint_TextContainer {
        padding: 8px;
    }
}

/* ===========================
   VERY SMALL MOBILE (max 375px)
   =========================== */
@media (max-width: 375px) {
    :root {
        --modal-h1-size: clamp(28px, 6.5vw, 42px);
        --modal-h2-size: clamp(24px, 5vw, 36px);
        --modal-h3-size: clamp(18px, 3.5vw, 24px);
        --modal-message-size: clamp(15px, 3.2vw, 22px);
        --modal-details-size: clamp(15px, 3.2vw, 22px);
        --modal-reward-size: clamp(50px, 13vw, 65px);
        --modal-reward-gap: 12px;
    }

    .modal-dialog {
        max-width: 100%;
        margin: 5px auto;
    }

    .modalSingleWithBadgeAndPoint_TextContainer {
        padding: 6px;
    }
}