/* =========================
   public/css/complaints.css

   Miyzon customer complaints page
   - Uses existing homepage background
   - Simple action-focused layout
========================= */

.mz-complaints-main {
    min-width: 0;

    overflow-x: clip;

    background: transparent;
}


.mz-complaints-main
.mz-section,
.mz-complaints-main
.mz-hero {
    background: transparent;
}


.mz-complaints-section {
    padding:
        66px
        0;
}


/* =========================================================
   CONTACT CHANNELS
========================================================= */

.mz-complaint-channels {
    display: grid;

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

    gap: 16px;

    margin-top: 30px;
}


.mz-complaint-channel {
    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        26px
        24px;

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

    border-radius: 18px;

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

    color: inherit;

    text-decoration: none;

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


.mz-complaint-channel:hover {
    transform:
        translateY(-2px);

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

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


.mz-complaint-channel__type {
    color:
        #70dfff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.mz-complaint-channel h3 {
    margin:
        10px
        0
        9px;

    color: #fff;

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

    font-size: 19px;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


.mz-complaint-channel p {
    flex: 1;

    margin: 0;

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

    font-size: 13px;

    line-height: 1.65;
}


.mz-complaint-channel__action {
    margin-top: 20px;

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

    font-size: 12px;

    font-weight: 750;
}


/* =========================================================
   PANELS
========================================================= */

.mz-complaints-grid {
    display: grid;

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

    gap: 18px;
}


.mz-complaints-panel {
    min-width: 0;

    padding:
        28px;

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

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(55,214,255,.025),
            rgba(132,86,255,.018)
        );
}


.mz-complaints-panel h2,
.mz-complaints-callout h2,
.mz-complaints-tio h2 {
    margin:
        6px
        0
        10px;

    color: #fff;

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

    font-size:
        clamp(
            22px,
            3vw,
            30px
        );

    line-height: 1.25;
}


.mz-complaints-panel p,
.mz-complaints-callout p:not(.mz-eyebrow),
.mz-complaints-tio p:not(.mz-eyebrow) {
    margin: 0;

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

    font-size: 13.5px;

    line-height: 1.7;
}


.mz-complaints-panel ul {
    margin:
        20px
        0
        0;

    padding-left: 20px;
}


.mz-complaints-panel li {
    margin-bottom: 9px;

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

    font-size: 13px;

    line-height: 1.6;
}


.mz-complaints-panel li::marker {
    color:
        #70dfff;
}


.mz-complaints-text-link {
    display: inline-flex;

    margin-top: 20px;

    color:
        #70dfff;

    font-size: 12.5px;

    font-weight: 750;

    text-decoration: none;
}


.mz-complaints-text-link:hover {
    color: #fff;
}


/* =========================================================
   CALLOUT
========================================================= */

.mz-complaints-callout,
.mz-complaints-tio {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding:
        30px
        32px;

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

    border-radius: 20px;

    background:
        radial-gradient(
            520px
            220px
            at
            0%
            50%,
            rgba(255,94,168,.055),
            transparent
            68%
        ),
        rgba(255,255,255,.02);
}


.mz-complaints-callout > div,
.mz-complaints-tio > div:first-child {
    max-width: 760px;
}


.mz-complaints-tio {
    background:
        radial-gradient(
            520px
            220px
            at
            0%
            50%,
            rgba(55,214,255,.05),
            transparent
            68%
        ),
        rgba(255,255,255,.02);
}


.mz-complaints-tio__details {
    flex: 0 0 auto;

    display: grid;

    gap: 5px;

    text-align: right;
}


.mz-complaints-tio__details span {
    color: #fff;

    font-size: 16px;

    font-weight: 800;
}


.mz-complaints-tio__details a {
    color:
        #70dfff;

    font-size: 12px;

    font-weight: 750;

    text-decoration: none;
}


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

@media (max-width: 900px) {

    .mz-complaint-channels {
        grid-template-columns:
            minmax(0,1fr);
    }


    .mz-complaints-callout,
    .mz-complaints-tio {
        align-items: flex-start;

        flex-direction: column;
    }


    .mz-complaints-tio__details {
        text-align: left;
    }

}


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

@media (max-width: 680px) {

    .mz-complaints-section {
        padding:
            48px
            0;
    }


    .mz-complaints-grid {
        grid-template-columns:
            minmax(0,1fr);
    }


    .mz-complaint-channel,
    .mz-complaints-panel {
        padding:
            22px
            19px;
    }


    .mz-complaints-callout,
    .mz-complaints-tio {
        padding:
            24px
            20px;
    }


    .mz-complaints-callout
    .mz-btn {
        width: 100%;

        text-align: center;
    }

}