/* =========================================================
   SURYA INSPIRASI FOOTER
   Navy Edition
   ========================================================= */

.sis-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    margin: 0;

    padding-top: 72px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(255, 255, 255, 0.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 93% 20%,
            rgba(240, 163, 49, 0.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #112f5c 0%,
            #0d294f 46%,
            #091f40 100%
        );
}


/* =========================================================
   DECORATION
   ========================================================= */

.sis-footer-decoration {
    position: absolute;

    pointer-events: none;

    z-index: -1;
}

.sis-footer-decoration-one {
    width: 330px;
    height: 330px;

    right: -135px;
    top: -130px;

    border:
        1px solid
        rgba(240, 163, 49, 0.12);

    border-radius: 50%;
}

.sis-footer-decoration-one::after {
    content: "";

    position: absolute;

    width: 115px;
    height: 115px;

    left: 30px;
    bottom: 22px;

    border:
        23px solid
        rgba(240, 163, 49, 0.13);

    border-radius: 50%;
}

.sis-footer-decoration-two {
    width: 280px;
    height: 280px;

    left: -170px;
    bottom: -175px;

    border-radius: 50%;

    background:
        rgba(182, 27, 88, 0.09);

    filter: blur(1px);
}


/* =========================================================
   MAIN
   ========================================================= */

.sis-footer-main {
    position: relative;

    z-index: 2;

    min-height: 310px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(370px, 0.85fr);

    align-items: start;

    gap:
        clamp(
            60px,
            8vw,
            120px
        );

    padding-bottom: 58px;
}


/* =========================================================
   LEFT / BRAND
   ========================================================= */

.sis-footer-brand {
    max-width: 540px;
}

.sis-footer-logo-link {
    display: inline-block;

    text-decoration: none;
}

.sis-footer-logo-box {
    width:
        min(
            370px,
            100%
        );

    min-height: 105px;

    display: flex;

    align-items: center;

    padding:
        19px
        25px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 24px;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    box-shadow:
        0 18px 46px
        rgba(0, 0, 0, 0.13);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.sis-footer-logo-image {
    display: block;

    width: 100%;
    max-height: 77px;

    object-fit: contain;
}

.sis-footer-logo-link:hover
.sis-footer-logo-box {
    transform:
        translateY(-3px);

    box-shadow:
        0 23px 52px
        rgba(0, 0, 0, 0.17);
}

.sis-footer-brand-copy {
    max-width: 450px;

    margin:
        25px
        0
        0 !important;

    color:
        rgba(
            255,
            255,
            255,
            0.61
        ) !important;

    font-size:
        13px !important;

    line-height:
        1.8 !important;
}


/* Chip */

.sis-footer-event-chip {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 22px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius:
        999px;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    background:
        rgba(
            255,
            255,
            255,
            0.045
        );

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}

.chip-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f2a126;

    box-shadow:
        0 0 0 4px
        rgba(242, 161, 38, 0.10);
}


/* =========================================================
   RIGHT / SOCIAL
   ========================================================= */

.sis-footer-social {
    padding-top: 7px;
}

.sis-footer-label {
    display: block;

    margin-bottom: 13px;

    color: #f4af3d;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.sis-footer-social h3 {
    margin: 0;

    color: #ffffff;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    font-size:
        clamp(
            25px,
            2.2vw,
            34px
        );

    font-weight: 800;

    line-height: 1.14;

    letter-spacing: -0.04em;
}

.sis-footer-social h3 span {
    display: block;

    margin-top: 6px;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0;
}

.sis-footer-social-copy {
    max-width: 440px;

    margin:
        18px
        0
        26px !important;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

    font-size:
        13px !important;

    line-height:
        1.75 !important;
}


/* =========================================================
   SOCIAL BUTTONS
   ========================================================= */

.sis-social-buttons {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}

.sis-social-button {
    position: relative;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #f7ad27,
            #f39400
        );

    box-shadow:
        0 10px 26px
        rgba(
            242,
            153,
            0,
            0.19
        );

    text-decoration: none;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.sis-social-button::after {
    content: "";

    position: absolute;

    inset: 1px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    border-radius: inherit;
}

.sis-social-button svg {
    position: relative;

    z-index: 2;

    width: 23px;
    height: 23px;

    fill: currentColor;
}

.sis-social-button:hover {
    transform:
        translateY(-4px)
        scale(1.035);

    background:
        linear-gradient(
            145deg,
            #c11959,
            #df316f
        );

    box-shadow:
        0 15px 30px
        rgba(
            182,
            27,
            88,
            0.24
        );
}


/* =========================================================
   DIVIDER
   ========================================================= */

.sis-footer-divider {
    position: relative;

    z-index: 2;

    width:
        min(
            1160px,
            calc(100% - 48px)
        );

    height: 1px;

    margin-inline: auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.12
            ) 20%,
            rgba(
                255,
                255,
                255,
                0.12
            ) 80%,
            transparent
        );
}


/* =========================================================
   BOTTOM
   ========================================================= */

.sis-footer-bottom {
    position: relative;

    z-index: 2;

    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}

.sis-footer-bottom p {
    margin: 0 !important;

    color:
        rgba(
            255,
            255,
            255,
            0.43
        ) !important;

    font-size:
        11px !important;

    font-weight: 500;
}

.sis-footer-bottom-links {
    display: flex;

    align-items: center;

    gap: 11px;

    color:
        rgba(
            255,
            255,
            255,
            0.43
        );

    font-size: 11px;
}

.bottom-separator {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.27
        );
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.sis-wa-float {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 300;

    width: 64px;
    height: 64px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #f7aa1d,
            #f29200
        );

    border:
        3px solid
        rgba(
            255,
            255,
            255,
            0.90
        );

    box-shadow:
        0 15px 38px
        rgba(
            242,
            153,
            0,
            0.31
        );

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.sis-wa-float::before {
    content: "";

    position: absolute;

    inset: -8px;

    z-index: -1;

    border:
        1px solid
        rgba(
            242,
            153,
            0,
            0.34
        );

    border-radius: inherit;

    animation:
        sisWaPulse
        2.8s
        ease-out
        infinite;
}

.sis-wa-float svg {
    width: 33px;
    height: 33px;

    fill: currentColor;
}

.sis-wa-float:hover {
    transform:
        translateY(-5px)
        scale(1.04);

    box-shadow:
        0 20px 45px
        rgba(
            242,
            153,
            0,
            0.37
        );
}


/* Tooltip */

.sis-wa-tooltip {
    position: absolute;

    right: 77px;
    top: 50%;

    padding:
        10px
        14px;

    white-space:
        nowrap;

    pointer-events:
        none;

    opacity: 0;

    transform:
        translate(
            7px,
            -50%
        );

    border-radius: 11px;

    color: #12305f;

    background: #ffffff;

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 10px 28px
        rgba(
            15,
            30,
            56,
            0.14
        );

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.sis-wa-float:hover
.sis-wa-tooltip {
    opacity: 1;

    transform:
        translate(
            0,
            -50%
        );
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes sisWaPulse {

    0% {
        opacity: 0.7;

        transform:
            scale(0.90);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.25);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .sis-footer {
        padding-top: 58px;
    }

    .sis-footer-main {
        min-height: auto;

        grid-template-columns:
            1fr;

        gap: 46px;

        padding-bottom: 48px;
    }

    .sis-footer-brand {
        max-width: 500px;
    }

    .sis-footer-social {
        max-width: 500px;

        padding-top: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .sis-footer {
        padding-top: 43px;
    }

    .sis-footer-main {
        gap: 38px;

        padding-bottom: 38px;
    }

    .sis-footer-logo-box {
        width: 265px;

        min-height: 82px;

        padding:
            15px
            19px;

        border-radius: 19px;
    }

    .sis-footer-logo-image {
        max-height: 58px;
    }

    .sis-footer-brand-copy {
        margin-top:
            19px !important;

        font-size:
            12px !important;

        line-height:
            1.7 !important;
    }

    .sis-footer-event-chip {
        margin-top: 17px;
    }

    .sis-footer-social h3 {
        font-size: 23px;
    }

    .sis-footer-social h3 span {
        font-size: 12px;
    }

    .sis-footer-social-copy {
        margin-bottom:
            21px !important;

        font-size:
            12px !important;
    }

    .sis-social-buttons {
        gap: 9px;
    }

    .sis-social-button {
        width: 44px;
        height: 44px;
    }

    .sis-social-button svg {
        width: 20px;
        height: 20px;
    }

    .sis-footer-divider {
        width:
            calc(100% - 28px);
    }

    .sis-footer-bottom {
        min-height: auto;

        flex-direction: column;

        align-items: flex-start;

        gap: 6px;

        padding:
            18px
            0
            23px;
    }

    .sis-footer-bottom-links {
        font-size: 10px;
    }

    .sis-wa-float {
        right: 16px;
        bottom: 16px;

        width: 57px;
        height: 57px;
    }

    .sis-wa-float svg {
        width: 29px;
        height: 29px;
    }

    .sis-wa-tooltip {
        display: none;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sis-wa-float::before {
        animation: none !important;
    }

}


/* =========================================================
   LOCATION -> FOOTER TRANSITION
   ========================================================= */

@media (max-width: 640px) {

    .school-location-section + .sis-footer {
        position: relative;
    }

    .school-location-section + .sis-footer::before {
        content: "";

        position: absolute;

        top: -1px;
        left: 0;
        right: 0;

        height: 1px;

        background:
            rgba(18,48,95,0.06);
    }

}


/* =========================================================
   V13 - GLOBAL LOGO CONTAINMENT HOTFIX
   Prevent SIS logo from escaping its wrapper
   ========================================================= */


/* ---------------------------------------------------------
   HEADER LOGO WRAPPER
   --------------------------------------------------------- */

.rsvp-luxury-page .topbar .brand-mark {
    position: relative !important;

    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    max-width: 54px !important;
    max-height: 54px !important;

    flex:
        0 0 54px !important;

    display: block !important;

    margin: 0 !important;
    padding: 6px !important;

    overflow: hidden !important;

    border-radius:
        16px !important;

    background:
        #ffffff !important;

    box-sizing:
        border-box !important;

    isolation: isolate !important;
}


/* ---------------------------------------------------------
   HEADER LOGO IMAGE
   Absolutely lock image inside wrapper
   --------------------------------------------------------- */

.rsvp-luxury-page
.topbar
.brand-mark
> img,

.rsvp-luxury-page
.topbar
.brand-logo {
    position: absolute !important;

    inset: 6px !important;

    display: block !important;

    width:
        calc(100% - 12px) !important;

    height:
        calc(100% - 12px) !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width:
        calc(100% - 12px) !important;

    max-height:
        calc(100% - 12px) !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    transform:
        none !important;

    border: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   HEADER BRAND LAYOUT
   --------------------------------------------------------- */

.rsvp-luxury-page
.topbar
.brand {
    position: relative !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        14px !important;

    min-width: 0 !important;

    text-decoration:
        none !important;
}

.rsvp-luxury-page
.topbar
.brand-copy {
    position: relative !important;

    z-index: 2 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    min-width: 0 !important;
}


/* =========================================================
   SUCCESS PAGE EXTRA GUARD
   ========================================================= */

body.rsvp-success-page
.topbar {
    position: sticky !important;

    top: 0 !important;

    z-index: 500 !important;
}

body.rsvp-success-page
.topbar-inner {
    position: relative !important;

    z-index: 2 !important;
}

body.rsvp-success-page
.success-v12 {
    position: relative !important;

    z-index: 1 !important;
}


/*
|--------------------------------------------------------------------------
| Never allow a header image to use its intrinsic/original dimensions
|--------------------------------------------------------------------------
*/

body.rsvp-success-page
.topbar img {
    max-width: 100% !important;

    max-height: 100% !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    .rsvp-luxury-page
    .topbar
    .brand-mark {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;

        max-width: 44px !important;
        max-height: 44px !important;

        flex-basis:
            44px !important;

        padding:
            5px !important;

        border-radius:
            13px !important;
    }


    .rsvp-luxury-page
    .topbar
    .brand-mark
    > img,

    .rsvp-luxury-page
    .topbar
    .brand-logo {
        inset:
            5px !important;

        width:
            calc(100% - 10px) !important;

        height:
            calc(100% - 10px) !important;

        max-width:
            calc(100% - 10px) !important;

        max-height:
            calc(100% - 10px) !important;
    }

}