/*==================================================
        LEGALS SHOWCASE STYLE
==================================================*/

.legals-showcase {
    width: 100%;
    padding: 90px 0;
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at top left, #004aad33, transparent 40%),
        radial-gradient(circle at bottom right, #7a00ff22, transparent 35%),
        linear-gradient(180deg, #05070d, #0a1020);

    box-sizing: border-box;
}


/*==================================================
        GLOBAL BOX SIZING
==================================================*/

.legals-showcase *,
.legals-showcase *::before,
.legals-showcase *::after {
    box-sizing: border-box;
}


/*==================================================
        ALL LEGALS HEADINGS
        FORCE WHITE
==================================================*/

.legals-showcase h1,
.legals-showcase h2,
.legals-showcase h3,
.legals-showcase h4,
.legals-showcase h5,
.legals-showcase h6 {
    color: #ffffff !important;
}


/*==================================================
        MAIN HEADING CONTAINER
==================================================*/

.legals-heading-container {
    width: 90%;
    max-width: 1600px;

    margin: 0 auto 60px;

    padding: 30px 25px;

    text-align: center;

    background: rgba(255,255,255,.05);

    border-radius: 20px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255,255,255,.08);

    box-shadow:
        0 0 25px rgba(0,216,239,.25),
        inset 0 1px 0 rgba(255,255,255,.08);
}


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

.legals-heading-title {
    margin: 0 0 15px;

    font-size: 25px;

    font-weight: 900;

    color: #ffffff !important;

    text-transform: uppercase;

    letter-spacing: 2px;

    line-height: 1.25;

    text-shadow:
        0 0 10px #00d8ef,
        0 0 20px #00d8ef,
        0 0 40px #7a00ff;

    animation: legalsGlowPulse 3s infinite alternate;
}


/*==================================================
        HEADING SUBTITLE
==================================================*/

.legals-heading-subtitle {
    margin: 0;

    font-size: 18px;

    font-weight: 600;

    background:
        linear-gradient(
            90deg,
            #00d8ef,
            #7a00ff,
            #ff0080
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    background-size: 200% auto;

    animation: legalsShineFlow 6s linear infinite;

    letter-spacing: 1px;
}


/*==================================================
        OUTER LEGALS GRID
==================================================*/

.legals-grid {
    width: 90%;
    max-width: 1600px;

    margin: 0 auto;

    display: grid;

    /*
       Keep the two main panels side-by-side
       on desktop.
    */
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 35px;

    position: relative;

    z-index: 2;

    align-items: start;
}


/*==================================================
        MAIN GLASS PANEL
==================================================*/

.legals-panel {
    position: relative;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    text-align: center;

    padding: 35px 28px;

    border-radius: 30px;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 18px 45px rgba(0,0,0,.35);

    transition: .45s ease;

    margin-bottom: 40px;
}


/*==================================================
        PANEL GLOW
==================================================*/

.legals-panel::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,216,239,.28),
            transparent 70%
        );

    transition: .6s;

    pointer-events: none;
}


/*==================================================
        PANEL HOVER
==================================================*/

.legals-panel:hover {
    transform: translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.45),
        0 0 40px rgba(0,216,239,.18);
}

.legals-panel:hover::before {
    transform: scale(1.4);
}


/*==================================================
        PANEL TITLE
==================================================*/

.legals-panel-title {
    position: relative;

    z-index: 2;

    margin: 0 0 15px;

    font-size: 24px;

    font-weight: 800;

    color: #ffffff !important;

    line-height: 1.25;
}


/*==================================================
        PANEL TITLE LINKS
==================================================*/

.legals-panel-title a {
    color: #ffffff !important;

    text-decoration: none;

    transition: .3s ease;
}

.legals-panel-title a:hover {
    color: #00d8ef !important;

    text-shadow:
        0 0 10px #00d8ef,
        0 0 20px #00d8ef;
}


/*==================================================
        PANEL DESCRIPTION
==================================================*/

.legals-panel-description {
    position: relative;

    z-index: 2;

    margin: 0 0 25px;

    font-size: 15px;

    color: rgba(255,255,255,.80);

    line-height: 1.6;
}


/*==================================================
        IMPORTANT:
        INNER CONTENT CONTAINER
==================================================*/

.legals-content {
    width: 100%;

    max-width: 100%;

    margin: 0 auto;

    position: relative;

    z-index: 2;
}


/*==================================================
        TERMS CONTENT

        The three Terms cards should NOT appear
        as three narrow columns.

        Each card gets its own full row.
==================================================*/

.legals-content .terms-grid {
    width: 100% !important;

    max-width: 100% !important;

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 24px !important;

    margin: 25px 0 0 !important;

    padding: 0 !important;
}


/*==================================================
        TERMS CARDS
==================================================*/

.legals-content .terms-card {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 30px 28px;

    border-radius: 24px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 35px rgba(0,0,0,.25);

    text-align: center;

    overflow: hidden;

    transition: .4s ease;
}


/*==================================================
        TERMS CARD HOVER
==================================================*/

.legals-content .terms-card:hover {
    transform: translateY(-6px);

    background: rgba(255,255,255,.09);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 25px rgba(0,216,239,.12);
}


/*==================================================
        TERMS CARD HEADINGS
==================================================*/

.legals-content .terms-card h3 {
    margin: 0 0 15px;

    font-size: 22px;

    font-weight: 800;

    color: #ffffff !important;

    line-height: 1.3;
}


/*==================================================
        TERMS CARD TEXT
==================================================*/

.legals-content .terms-card p {
    margin: 0;

    color: rgba(255,255,255,.80);

    font-size: 15px;

    line-height: 1.7;
}


/*==================================================
        FAQ CONTENT

        If faqs_content.html contains a grid,
        force its cards into ONE COLUMN.
==================================================*/

.legals-content .faqs-grid,
.legals-content .faq-grid,
.legals-content .faqs-container,
.legals-content .faq-container {
    width: 100% !important;

    max-width: 100% !important;

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 24px !important;

    margin-left: auto !important;

    margin-right: auto !important;
}


/*==================================================
        FAQ CARDS

        This catches common FAQ card class names
        without affecting the outer Legals panel.
==================================================*/

.legals-content .faqs-card,
.legals-content .faq-card {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 30px 28px;

    border-radius: 24px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 35px rgba(0,0,0,.25);

    text-align: center;

    overflow: hidden;

    transition: .4s ease;
}


/*==================================================
        FAQ CARD HOVER
==================================================*/

.legals-content .faqs-card:hover,
.legals-content .faq-card:hover {
    transform: translateY(-6px);

    background: rgba(255,255,255,.09);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 25px rgba(0,216,239,.12);
}


/*==================================================
        FAQ HEADINGS
==================================================*/

.legals-content .faqs-card h2,
.legals-content .faqs-card h3,
.legals-content .faq-card h2,
.legals-content .faq-card h3 {
    color: #ffffff !important;

    line-height: 1.3;
}


/*==================================================
        FAQ TEXT
==================================================*/

.legals-content .faqs-card p,
.legals-content .faq-card p {
    color: rgba(255,255,255,.80);

    line-height: 1.7;

    font-size: 15px;
}


/*==================================================
        INNER FAQ ITEMS

        Keep individual questions readable.
==================================================*/

.legals-content .faqs-item,
.legals-content .faq-item {
    width: 100%;

    margin-bottom: 20px;

    padding: 22px;

    border-radius: 18px;

    background: rgba(0,0,0,.18);

    border: 1px solid rgba(255,255,255,.08);

    text-align: center;
}

.legals-content .faqs-item:last-child,
.legals-content .faq-item:last-child {
    margin-bottom: 0;
}


/*==================================================
        FAQ ITEM HEADINGS
==================================================*/

.legals-content .faqs-item h3,
.legals-content .faq-item h3 {
    margin: 0 0 10px;

    color: #ffffff !important;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.4;
}


/*==================================================
        FAQ ITEM TEXT
==================================================*/

.legals-content .faqs-item p,
.legals-content .faq-item p {
    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: 14px;

    line-height: 1.6;
}


/*==================================================
        READ MORE BUTTON
==================================================*/

.legals-read-more-btn {
    position: relative;

    z-index: 3;

    display: inline-block;

    margin-top: 25px;

    padding: 11px 22px;

    border-radius: 20px;

    background: #00d8ef;

    color: #05070d !important;

    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;
}


/*==================================================
        BUTTON HOVER
==================================================*/

.legals-read-more-btn:hover {
    background: #009bb8;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0,216,239,.25);
}


/*==================================================
        LISTS INSIDE LEGALS CONTENT
==================================================*/

.legals-content ul {
    width: 100%;

    margin: 15px 0;

    padding-left: 20px;

    color: rgba(255,255,255,.80);

    line-height: 1.7;
}

.legals-content li {
    margin-bottom: 8px;
}


/*==================================================
        LINKS INSIDE CONTENT
==================================================*/

.legals-content a {
    color: #00d8ef;

    text-decoration: none;

    transition: .3s ease;
}

.legals-content a:hover {
    color: #ffffff;

    text-shadow: 0 0 10px #00d8ef;
}


/*==================================================
        ANIMATIONS
==================================================*/

@keyframes legalsGlowPulse {

    from {
        text-shadow:
            0 0 10px #00d8ef,
            0 0 20px #00d8ef;
    }

    to {
        text-shadow:
            0 0 20px #7a00ff,
            0 0 40px #ff0080;
    }
}


@keyframes legalsShineFlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


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

@media (max-width: 991px) {

    .legals-showcase {
        padding: 70px 0;
    }


    /* Main Terms / FAQ panels become one column */
    .legals-grid {
        width: 92%;

        grid-template-columns: 1fr;

        gap: 30px;
    }


    .legals-panel {
        width: 100%;

        padding: 32px 25px;

        margin-bottom: 20px;
    }


    .legals-heading-container {
        width: 92%;

        margin-bottom: 45px;
    }


    .legals-panel-title {
        font-size: 23px;
    }


    .legals-panel-description {
        font-size: 15px;
    }


    /* Make inner cards full width */
    .legals-content .terms-grid,
    .legals-content .faqs-grid,
    .legals-content .faq-grid,
    .legals-content .faqs-container,
    .legals-content .faq-container {
        grid-template-columns: 1fr !important;

        width: 100% !important;
    }


    .legals-content .terms-card,
    .legals-content .faqs-card,
    .legals-content .faq-card {
        width: 100% !important;
    }
}


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

@media (max-width: 600px) {

    .legals-showcase {
        width: 100%;

        padding: 60px 0;
    }


    /* Main heading */
    .legals-heading-container {
        width: 95%;

        margin-bottom: 35px;

        padding: 25px 18px;

        border-radius: 18px;
    }


    .legals-heading-title {
        font-size: 21px;

        letter-spacing: 1.5px;

        text-shadow:
            0 0 15px #00d8ef,
            0 0 30px #7a00ff,
            0 0 45px #ff0080;
    }


    .legals-heading-subtitle {
        font-size: 16px;

        line-height: 1.5;
    }


    /* Main panels */
    .legals-grid {
        width: 95%;

        grid-template-columns: 1fr;

        gap: 24px;
    }


    .legals-panel {
        width: 100%;

        padding: 25px 18px;

        border-radius: 24px;

        margin-bottom: 0;
    }


    .legals-panel-title {
        font-size: 21px;
    }


    .legals-panel-description {
        font-size: 14px;

        line-height: 1.6;
    }


    /*==================================================
        MOBILE INNER CONTENT
    ==================================================*/

    .legals-content {
        width: 100% !important;

        max-width: 100% !important;
    }


    .legals-content .terms-grid,
    .legals-content .faqs-grid,
    .legals-content .faq-grid,
    .legals-content .faqs-container,
    .legals-content .faq-container {
        width: 100% !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;
    }


    .legals-content .terms-card,
    .legals-content .faqs-card,
    .legals-content .faq-card {
        width: 100% !important;

        padding: 24px 18px;

        border-radius: 20px;
    }


    .legals-content .terms-card h3,
    .legals-content .faqs-card h3,
    .legals-content .faq-card h3 {
        font-size: 20px;

        color: #ffffff !important;
    }


    .legals-content .terms-card p,
    .legals-content .faqs-card p,
    .legals-content .faq-card p {
        font-size: 14px;

        line-height: 1.6;
    }


    .legals-content .faqs-item,
    .legals-content .faq-item {
        padding: 18px 15px;

        margin-bottom: 15px;
    }


    .legals-content .faqs-item h3,
    .legals-content .faq-item h3 {
        font-size: 18px;
    }


    .legals-content .faqs-item p,
    .legals-content .faq-item p {
        font-size: 14px;
    }


    .legals-read-more-btn {
        margin-top: 20px;

        padding: 10px 20px;

        font-size: 14px;
    }
}


/*==================================================
        EXTRA SMALL DEVICES
==================================================*/

@media (max-width: 380px) {

    .legals-heading-container {
        width: 94%;

        padding: 22px 15px;
    }


    .legals-heading-title {
        font-size: 20px;
    }


    .legals-heading-subtitle {
        font-size: 15px;
    }


    .legals-grid {
        width: 94%;
    }


    .legals-panel {
        padding: 22px 15px;
    }


    .legals-panel-title {
        font-size: 20px;
    }


    .legals-content .terms-card,
    .legals-content .faqs-card,
    .legals-content .faq-card {
        padding: 21px 15px;
    }
}