/* =========================
   public/css/components/nbn-plan-content.css
   Supporting content for the NBN plans page

   - Why Miyzon benefit cards
   - NBN / Wi-Fi education
   - FAQ accordion
   - Help CTA
   - Mobile-contained with no horizontal page scrolling
========================= */


/* =========================================================
   SHARED CONTENT HEADING
========================================================= */

.mz-nbn-content-head {
    width: 100%;
    max-width: 760px;

    margin:
        0
        auto
        34px;

    text-align: center;
}


.mz-nbn-content-head--left {
    margin-left: 0;

    text-align: left;
}


.mz-nbn-content-head .mz-eyebrow {
    margin-bottom: 10px;
}


.mz-nbn-content-head .mz-h2 {
    margin-bottom: 12px;
}


/* =========================================================
   WHY MIYZON
========================================================= */

.mz-nbn-benefits {
    padding:
        74px
        0;

    background: transparent;
}


.mz-nbn-benefit-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 16px;

    width: 100%;
}


.mz-nbn-benefit-card {
    box-sizing: border-box;

    min-width: 0;

    padding:
        22px
        20px;

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

    border-radius: 21px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.022)
        );

    box-shadow:
        0
        16px
        46px
        rgba(0,0,0,.15);
}


.mz-nbn-benefit-card__icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 18px;

    border:
        1px solid
        rgba(55,214,255,.15);

    border-radius: 15px;

    color: #70dfff;

    background:
        linear-gradient(
            135deg,
            rgba(55,214,255,.08),
            rgba(132,86,255,.07)
        );
}


.mz-nbn-benefit-card h3 {
    margin:
        0
        0
        8px;

    color: #fff;

    font-family:
        Manrope,
        Inter,
        sans-serif;

    font-size: 17px;

    font-weight: 800;
}


.mz-nbn-benefit-card p {
    margin: 0;

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

    font-size: 11.5px;

    line-height: 1.55;
}


/* =========================================================
   NBN / WI-FI EXPLAINERS
========================================================= */

.mz-nbn-explainers {
    padding:
        64px
        0
        74px;

    background: transparent;
}


.mz-nbn-explainer-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 18px;

    width: 100%;
}


.mz-nbn-explainer-card {
    box-sizing: border-box;

    position: relative;

    min-width: 0;

    padding:
        25px
        23px
        24px;

    overflow: hidden;

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

    border-radius: 23px;

    background:
        radial-gradient(
            360px
            180px
            at
            0%
            0%,
            rgba(55,214,255,.07),
            transparent
            65%
        ),
        rgba(255,255,255,.028);
}


.mz-nbn-explainer-card__number {
    display: inline-flex;

    margin-bottom: 24px;

    color:
        rgba(112,223,255,.76);

    font-family:
        Poppins,
        Inter,
        sans-serif;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .12em;
}


.mz-nbn-explainer-card h3 {
    margin:
        0
        0
        9px;

    color: #fff;

    font-family:
        Manrope,
        Inter,
        sans-serif;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.2;
}


.mz-nbn-explainer-card p {
    margin: 0;

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

    font-size: 12px;

    line-height: 1.58;
}


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

.mz-nbn-faq {
    padding:
        72px
        0
        78px;

    background: transparent;
}


.mz-nbn-faq-tools {
    box-sizing: border-box;

    width: 100%;
    max-width: 920px;

    margin:
        0
        auto
        24px;
}


/* =========================================================
   FAQ SEARCH
========================================================= */

.mz-nbn-faq-search {
    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;
    min-height: 54px;

    padding:
        0
        16px;

    margin-bottom: 14px;

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

    border-radius: 16px;

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

    transition:
        border-color .18s ease,
        background .18s ease;
}


.mz-nbn-faq-search:focus-within {
    border-color:
        rgba(55,214,255,.34);

    background:
        rgba(55,214,255,.045);
}


.mz-nbn-faq-search__icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex:
        0 0
        20px;

    color:
        rgba(112,223,255,.76);
}


.mz-nbn-faq-search input {
    box-sizing: border-box;

    width: 100%;
    min-width: 0;

    height: 52px;

    padding: 0;

    border: 0;

    outline: 0;

    color: #fff;

    background: transparent;

    font-family:
        Inter,
        sans-serif;

    font-size: 14px;
}


.mz-nbn-faq-search input::placeholder {
    color:
        rgba(255,255,255,.38);
}


/* =========================================================
   FAQ TOPIC FILTERS
========================================================= */

.mz-nbn-faq-filters {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    width: 100%;
}


.mz-nbn-faq-filter {
    min-height: 36px;

    padding:
        8px
        13px;

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

    border-radius: 999px;

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

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

    font-family:
        Inter,
        sans-serif;

    font-size: 10.5px;

    font-weight: 800;

    cursor: pointer;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.mz-nbn-faq-filter:hover {
    transform:
        translateY(-1px);

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

    border-color:
        rgba(55,214,255,.22);
}


.mz-nbn-faq-filter.is-active,
.mz-nbn-faq-filter[aria-pressed="true"] {
    color: #fff;

    border-color:
        rgba(55,214,255,.38);

    background:
        linear-gradient(
            135deg,
            rgba(55,214,255,.12),
            rgba(132,86,255,.10)
        );
}


.mz-nbn-faq-filter:focus-visible {
    outline:
        2px solid
        rgba(55,214,255,.72);

    outline-offset: 3px;
}


.mz-nbn-faq-meta {
    min-height: 18px;

    margin-top: 11px;

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

    font-size: 10px;

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   FAQ LIST
========================================================= */

.mz-nbn-faq-list {
    width: 100%;
    max-width: 920px;

    margin:
        0
        auto;

    border-top:
        1px solid
        rgba(255,255,255,.09);
}


.mz-nbn-faq-item {
    box-sizing: border-box;

    width: 100%;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}


.mz-nbn-faq-item[hidden] {
    display: none !important;
}


.mz-nbn-faq-item summary {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 22px;

    width: 100%;

    padding:
        19px
        2px;

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

    font-family:
        Manrope,
        Inter,
        sans-serif;

    cursor: pointer;

    list-style: none;
}


.mz-nbn-faq-item summary::-webkit-details-marker {
    display: none;
}


.mz-nbn-faq-item summary:focus-visible {
    outline:
        2px solid
        rgba(55,214,255,.72);

    outline-offset: 5px;

    border-radius: 4px;
}


.mz-nbn-faq-item__question {
    display: block;

    min-width: 0;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.4;
}


.mz-nbn-faq-item__topic {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(112,223,255,.64);

    font-family:
        Poppins,
        Inter,
        sans-serif;

    font-size: 8.5px;

    font-weight: 800;

    letter-spacing: .10em;

    line-height: 1.2;

    text-transform: uppercase;
}


.mz-nbn-faq-item__plus {
    position: relative;

    display: inline-block;

    width: 28px;
    height: 28px;

    flex:
        0 0
        28px;

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

    border-radius: 999px;

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

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.mz-nbn-faq-item__plus::before,
.mz-nbn-faq-item__plus::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 10px;
    height: 1.5px;

    border-radius: 999px;

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

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


.mz-nbn-faq-item__plus::after {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            90deg
        );

    transition:
        transform .18s ease;
}


.mz-nbn-faq-item[open]
.mz-nbn-faq-item__plus {
    border-color:
        rgba(55,214,255,.26);

    background:
        rgba(55,214,255,.07);
}


.mz-nbn-faq-item[open]
.mz-nbn-faq-item__plus::after {
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            0deg
        );
}


.mz-nbn-faq-item__answer {
    padding:
        0
        54px
        20px
        2px;
}


.mz-nbn-faq-item__answer p {
    max-width: 780px;

    margin: 0;

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

    font-size: 12px;

    line-height: 1.65;
}


/* =========================================================
   FAQ EMPTY STATE
========================================================= */

.mz-nbn-faq-empty {
    box-sizing: border-box;

    width: 100%;
    max-width: 920px;

    margin:
        16px
        auto
        0;

    padding:
        24px
        20px;

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

    border-radius: 18px;

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

    text-align: center;
}


.mz-nbn-faq-empty[hidden] {
    display: none !important;
}


.mz-nbn-faq-empty strong {
    display: block;

    margin-bottom: 5px;

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

    font-size: 13px;
}


.mz-nbn-faq-empty span {
    color:
        rgba(255,255,255,.46);

    font-size: 11px;
}


/* =========================================================
   HELP CTA
========================================================= */

.mz-nbn-help {
    padding:
        44px
        0
        82px;

    background: transparent;
}


.mz-nbn-help__panel {
    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 36px;

    width: 100%;

    padding:
        34px
        36px;

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

    border-radius: 26px;

    background:
        radial-gradient(
            520px
            240px
            at
            0%
            0%,
            rgba(55,214,255,.10),
            transparent
            65%
        ),
        radial-gradient(
            420px
            220px
            at
            100%
            100%,
            rgba(132,86,255,.09),
            transparent
            65%
        ),
        rgba(255,255,255,.025);

    box-shadow:
        0
        22px
        64px
        rgba(0,0,0,.18);
}


.mz-nbn-help__copy {
    max-width: 680px;
}


.mz-nbn-help__copy .mz-eyebrow {
    margin-bottom: 9px;
}


.mz-nbn-help__copy .mz-h2 {
    margin-bottom: 10px;
}


.mz-nbn-help__actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 11px;

    flex: 0 0 auto;

    flex-wrap: wrap;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 980px) {

    .mz-nbn-benefit-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .mz-nbn-help__panel {
        align-items: flex-start;

        flex-direction: column;
    }


    .mz-nbn-help__actions {
        justify-content: flex-start;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {

    .mz-nbn-benefits,
    .mz-nbn-explainers,
    .mz-nbn-faq,
    .mz-nbn-help {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    .mz-nbn-benefits
    .mz-container,
    .mz-nbn-explainers
    .mz-container,
    .mz-nbn-faq
    .mz-container,
    .mz-nbn-help
    .mz-container {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding-left: 17px;
        padding-right: 17px;
    }


    .mz-nbn-content-head,
    .mz-nbn-benefit-grid,
    .mz-nbn-benefit-card,
    .mz-nbn-explainer-grid,
    .mz-nbn-explainer-card,
    .mz-nbn-faq-list,
    .mz-nbn-faq-item,
    .mz-nbn-help__panel,
    .mz-nbn-help__copy,
    .mz-nbn-help__actions {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    .mz-nbn-benefits {
        padding:
            54px
            0;
    }


    .mz-nbn-explainers {
        padding:
            50px
            0
            56px;
    }


    .mz-nbn-faq {
        padding:
            54px
            0
            60px;
    }


    .mz-nbn-help {
        padding:
            34px
            0
            62px;
    }


    .mz-nbn-content-head,
    .mz-nbn-content-head--left {
        margin-bottom: 25px;

        text-align: left;
    }


    .mz-nbn-benefit-grid,
    .mz-nbn-explainer-grid {
        grid-template-columns:
            minmax(0,1fr);

        gap: 12px;
    }


    .mz-nbn-benefit-card {
        padding:
            19px
            17px;

        border-radius: 18px;
    }


    .mz-nbn-benefit-card__icon {
        width: 44px;
        height: 44px;

        margin-bottom: 15px;

        border-radius: 14px;
    }


    .mz-nbn-explainer-card {
        padding:
            21px
            18px;

        border-radius: 19px;
    }


    .mz-nbn-explainer-card__number {
        margin-bottom: 18px;
    }


    .mz-nbn-faq-item summary {
        gap: 15px;

        padding:
            18px
            0;

        font-size: 14px;
    }


    .mz-nbn-faq-item__answer {
        padding:
            0
            40px
            18px
            0;
    }


    .mz-nbn-faq-tools,
    .mz-nbn-faq-search,
    .mz-nbn-faq-filters,
    .mz-nbn-faq-meta,
    .mz-nbn-faq-empty {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    .mz-nbn-faq-search {
        min-height: 52px;

        padding:
            0
            14px;

        border-radius: 15px;
    }


    .mz-nbn-faq-search input {
        height: 50px;

        font-size: 16px;
    }


    .mz-nbn-faq-filters {
        justify-content: flex-start;

        gap: 7px;
    }


    .mz-nbn-faq-filter {
        min-height: 34px;

        padding:
            7px
            11px;

        font-size: 10px;
    }


    .mz-nbn-faq-meta {
        text-align: left;
    }


    .mz-nbn-faq-item summary {
        gap: 14px;

        padding:
            17px
            0;
    }


    .mz-nbn-faq-item__question {
        font-size: 13.5px;
    }


    .mz-nbn-faq-item__topic {
        margin-bottom: 4px;

        font-size: 8px;
    }


    .mz-nbn-faq-item__plus {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }


    .mz-nbn-faq-item__answer {
        padding:
            0
            40px
            18px
            0;
    }


    .mz-nbn-faq-item__answer p {
        font-size: 11.5px;
    }


    .mz-nbn-help__panel {
        gap: 24px;

        padding:
            25px
            20px;

        border-radius: 21px;
    }


    .mz-nbn-help__actions {
        align-items: stretch;

        flex-direction: column;
    }


    .mz-nbn-help__actions .mz-btn {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;

        justify-content: center;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

    .mz-nbn-benefits {
        padding:
            48px
            0;
    }


    .mz-nbn-explainers {
        padding:
            46px
            0
            50px;
    }


    .mz-nbn-faq {
        padding:
            48px
            0
            54px;
    }


    .mz-nbn-help {
        padding:
            30px
            0
            54px;
    }

}


/* =========================================================
   RESPONSIVE — VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .mz-nbn-benefits
    .mz-container,
    .mz-nbn-explainers
    .mz-container,
    .mz-nbn-faq
    .mz-container,
    .mz-nbn-help
    .mz-container {
        padding-left: 14px;
        padding-right: 14px;
    }


    .mz-nbn-benefit-card,
    .mz-nbn-explainer-card {
        padding:
            18px
            15px;
    }


    .mz-nbn-help__panel {
        padding:
            22px
            17px;
    }

}