/* ======================================================
   XIT MMA — PREMIUM POPUP SYSTEM
====================================================== */


/* ======================================================
   POPUP CONTAINER
====================================================== */

.mma-popup {
    position:
        fixed;

    top:
        25px;

    left:
        50%;

    z-index:
        999999;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    width:
        min(
            calc(100% - 40px),
            480px
        );

    padding:
        18px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(20, 20, 20, 0.98),
            rgba(8, 8, 8, 0.98)
        );

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

    border-left:
        4px solid
        var(--mma-red, #e10613);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.65),

        0 0 30px
        rgba(225, 6, 19, 0.12);

    opacity:
        0;

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

    pointer-events:
        none;

    transition:
        opacity 0.35s ease,
        transform 0.35s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


/* ======================================================
   SHOW POPUP
====================================================== */

.mma-popup-show {
    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );

    pointer-events:
        auto;
}


/* ======================================================
   POPUP ICON
====================================================== */

.mma-popup-icon {
    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid
        var(--mma-red, #e10613);

    border-radius:
        50%;

    color:
        var(--mma-white, #ffffff);

    background:
        rgba(225, 6, 19, 0.12);

    font-size:
        1.1rem;

    font-weight:
        1000;

    box-shadow:
        0 0 20px
        rgba(225, 6, 19, 0.18);
}


/* ======================================================
   POPUP MESSAGE
====================================================== */

.mma-popup-message {
    flex:
        1;

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

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1.5;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ======================================================
   SUCCESS
====================================================== */

.mma-popup-success {
    border-left-color:
        #e10613;
}


.mma-popup-success
.mma-popup-icon {
    color:
        #ffffff;

    border-color:
        #e10613;

    background:
        rgba(225, 6, 19, 0.15);
}


/* ======================================================
   ERROR
====================================================== */

.mma-popup-error {
    border-left-color:
        #ff3b30;
}


.mma-popup-error
.mma-popup-icon {
    color:
        #ff3b30;

    border-color:
        #ff3b30;

    background:
        rgba(255, 59, 48, 0.10);
}


/* ======================================================
   WARNING
====================================================== */

.mma-popup-warning {
    border-left-color:
        #ffb020;
}


.mma-popup-warning
.mma-popup-icon {
    color:
        #ffb020;

    border-color:
        #ffb020;

    background:
        rgba(255, 176, 32, 0.10);
}


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

@media (
    max-width: 650px
) {

    .mma-popup {
        top:
            15px;

        width:
            calc(100% - 30px);

        padding:
            15px 16px;

        gap:
            12px;
    }


    .mma-popup-icon {
        width:
            34px;

        height:
            34px;

        font-size:
            0.95rem;
    }


    .mma-popup-message {
        font-size:
            0.62rem;

        letter-spacing:
            0.06em;
    }

}
.xit-mma-red{color:#e50914!important;font-weight:800;}

.mma-xitmusic-logo{display:block;width:82px;height:34px;object-fit:contain;object-position:left center}

/* XITMMA atmospheric background */
body{
  background:
    radial-gradient(ellipse at 15% 10%, rgba(229,9,20,.24) 0%, transparent 30%),
    radial-gradient(ellipse at 85% 15%, rgba(180,0,35,.20) 0%, transparent 28%),
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.035) 0%, transparent 38%),
    radial-gradient(ellipse at 20% 90%, rgba(229,9,20,.12) 0%, transparent 32%),
    linear-gradient(125deg,#030303 0%,#0b0b0d 38%,#15090d 68%,#040404 100%);
  background-attachment: fixed;
  background-size: 140% 140%;
}
.mma-magazine-info{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(229,9,20,.28);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(229,9,20,.08),rgba(255,255,255,.025));
}
.mma-magazine-info strong{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#e50914}
.mma-magazine-info span{display:block;margin-top:4px;color:#ddd;font-size:.88rem}

/* card magazine spacing */
.mma-magazine-info{box-sizing:border-box;width:100%;margin-top:12px}

/* product-driven magazine card */
.mma-magazine-info{margin:12px 0 2px;padding:10px 12px;border:1px solid rgba(229,9,20,.3);border-radius:9px;background:rgba(229,9,20,.06)}
.mma-magazine-info strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e50914}
.mma-magazine-info span{display:block;margin-top:4px;font-size:13px;color:#eee}

/* FIX: product-saved magazine edition */
.mma-magazine-info{
  display:block!important;
  width:100%;
  margin-top:10px;
  padding:9px 11px;
  box-sizing:border-box;
  border:1px solid rgba(229,9,20,.35);
  border-radius:8px;
  background:rgba(229,9,20,.07);
}
.mma-magazine-info strong{display:block!important;color:#e50914;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mma-magazine-info span{display:block!important;color:#fff;font-size:12px;margin-top:3px}