/* =========================================================
   MERMO RESELLING
   BLACK / DARK BLUE / FALLING ORBS
   ========================================================= */


/* =========================================================
   1. MAIN BACKGROUND
   ========================================================= */

html,
body {
    background: #000000 !important;
    color: #ffffff !important;
}

body {
    position: relative;
    overflow-x: hidden;
}


/* =========================================================
   2. REMOVE GREY BACKGROUNDS
   ========================================================= */

main,
section,
footer,
header {
    background-color: #000000 !important;
}

main,
section {
    background-image: none !important;
}


/* =========================================================
   3. FALLING DARK BLUE ORBS
   ========================================================= */

body::before {
    content: "";
    position: fixed;
    inset: 0;

    z-index: 9999;
    pointer-events: none;

    background-image:

        /* layer 1 */
        radial-gradient(
            circle,
            rgba(8, 55, 115, 0.72) 0 2.5px,
            transparent 4px
        ),

        /* layer 2 */
        radial-gradient(
            circle,
            rgba(5, 45, 95, 0.65) 0 3px,
            transparent 4.5px
        ),

        /* layer 3 */
        radial-gradient(
            circle,
            rgba(10, 65, 130, 0.60) 0 2px,
            transparent 3.5px
        ),

        /* layer 4 */
        radial-gradient(
            circle,
            rgba(4, 38, 82, 0.70) 0 3px,
            transparent 4.5px
        ),

        /* layer 5 */
        radial-gradient(
            circle,
            rgba(7, 50, 105, 0.58) 0 2px,
            transparent 3.5px
        ),

        /* layer 6 */
        radial-gradient(
            circle,
            rgba(5, 42, 90, 0.62) 0 2.5px,
            transparent 4px
        );

    background-size:
        150px 190px,
        210px 260px,
        280px 230px,
        180px 300px,
        320px 280px,
        240px 340px;

    background-position:
        20px 0,
        80px -100px,
        150px -180px,
        40px -250px,
        220px -80px,
        -50px -160px;

    animation: fallingOrbs 17s linear infinite;

    filter:
        blur(0.25px)
        drop-shadow(
            0 0 5px rgba(4, 45, 95, 0.45)
        );

    opacity: 0.8;
}


/* =========================================================
   4. SECOND ORB LAYER
   ========================================================= */

body::after {
    content: "";
    position: fixed;
    inset: 0;

    z-index: 9998;
    pointer-events: none;

    background-image:

        radial-gradient(
            circle,
            rgba(8, 55, 115, 0.55) 0 3px,
            transparent 4.5px
        ),

        radial-gradient(
            circle,
            rgba(5, 45, 95, 0.50) 0 2px,
            transparent 3.5px
        ),

        radial-gradient(
            circle,
            rgba(10, 60, 120, 0.45) 0 3px,
            transparent 4.5px
        ),

        radial-gradient(
            circle,
            rgba(4, 38, 82, 0.55) 0 2.5px,
            transparent 4px
        );

    background-size:
        260px 320px,
        190px 240px,
        350px 300px,
        230px 370px;

    background-position:
        100px -300px,
        -80px -150px,
        250px -400px,
        50px -500px;

    animation: fallingOrbsSlow 25s linear infinite;

    filter:
        blur(0.5px)
        drop-shadow(
            0 0 6px rgba(4, 45, 95, 0.4)
        );

    opacity: 0.65;
}


/* =========================================================
   5. ORB ANIMATIONS
   ========================================================= */

@keyframes fallingOrbs {

    0% {
        background-position:
            20px -300px,
            80px -400px,
            150px -500px,
            40px -600px,
            220px -350px,
            -50px -450px;
    }

    100% {
        background-position:
            20px 100vh,
            80px calc(100vh + 100px),
            150px calc(100vh + 200px),
            40px calc(100vh + 150px),
            220px calc(100vh + 250px),
            -50px calc(100vh + 180px);
    }
}


@keyframes fallingOrbsSlow {

    0% {
        background-position:
            100px -600px,
            -80px -500px,
            250px -700px,
            50px -800px;
    }

    100% {
        background-position:
            100px calc(100vh + 100px),
            -80px calc(100vh + 150px),
            250px calc(100vh + 200px),
            50px calc(100vh + 250px);
    }
}


/* =========================================================
   6. CONTENT ABOVE THE ORBS
   ========================================================= */

header,
main,
section,
footer,
nav {
    position: relative;
    z-index: 1;
}


/* =========================================================
   7. DARK BLUE GLOW - BUTTONS
   ========================================================= */

button,
.btn {
    border-color: #063a78 !important;

    box-shadow:
        0 0 6px rgba(6, 58, 120, 0.35),
        0 0 14px rgba(6, 58, 120, 0.15) !important;
}


/* =========================================================
   8. INPUTS
   ========================================================= */

input,
textarea,
select {
    background: #030303 !important;

    border-color: #063a78 !important;

    box-shadow:
        0 0 6px rgba(6, 58, 120, 0.30),
        inset 0 0 8px rgba(6, 58, 120, 0.08) !important;
}


/* =========================================================
   9. LINKS
   ========================================================= */

a {
    text-shadow:
        0 0 5px rgba(6, 58, 120, 0.30);
}


/* =========================================================
   10. DARK BLUE GLOW ON COMMON CARDS
   ========================================================= */

.card {
    border-color: rgba(6, 58, 120, 0.75) !important;

    box-shadow:
        0 0 8px rgba(6, 58, 120, 0.35),
        0 0 18px rgba(6, 58, 120, 0.15) !important;
}


/* =========================================================
   11. CARD HOVER
   ========================================================= */

.card:hover {
    border-color: rgba(7, 65, 135, 0.9) !important;

    box-shadow:
        0 0 10px rgba(6, 58, 120, 0.50),
        0 0 24px rgba(6, 58, 120, 0.22) !important;
}


/* =========================================================
   12. SEARCH BOX
   ========================================================= */

input:focus,
textarea:focus,
select:focus {
    outline: none !important;

    border-color: #064589 !important;

    box-shadow:
        0 0 8px rgba(6, 58, 120, 0.45),
        0 0 18px rgba(6, 58, 120, 0.18) !important;
}


/* =========================================================
   13. DIVIDERS
   ========================================================= */

hr {
    border-color: rgba(6, 58, 120, 0.45) !important;

    box-shadow:
        0 0 5px rgba(6, 58, 120, 0.25);
}


/* =========================================================
   14. DARK BLUE TEXT ACCENTS
   ========================================================= */

.text-blue-500,
.text-blue-600,
.text-primary {
    color: #4c78a8 !important;
}


/* =========================================================
   15. SELECTION
   ========================================================= */

::selection {
    background: rgba(6, 58, 120, 0.65);
    color: #ffffff;
}


/* =========================================================
   16. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #000000;
}

::-webkit-scrollbar-thumb {
    background: #062b58;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #073d78;
}


/* =========================================================
   17. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body::before {
        opacity: 0.65;
    }

    body::after {
        opacity: 0.50;
    }

    button,
    .btn {
        box-shadow:
            0 0 6px rgba(6, 58, 120, 0.30) !important;
    }
}

/* Mermo Reselling – dunkelblauer Shine-Effekt */
.hero-title,
.hero-section h1 {
    color: #ffffff !important;
    position: relative;
    display: inline-block;
    font-weight: 800;
    overflow: hidden;
}

/* Dunkelblauer Lichtstreifen */
.hero-title::after,
.hero-section h1::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 35%;
    height: 100%;

    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(0, 70, 150, 0.05) 25%,
        rgba(0, 90, 190, 0.45) 50%,
        rgba(0, 70, 150, 0.05) 75%,
        transparent 100%
    );

    transform: skewX(-20deg);
    animation: mermo-title-shine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mermo-title-shine {
    0% {
        left: -80%;
    }

    45% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}


/* =========================================================
   MERMO RESELLING – CHECKOUT DESIGN
   Schwarz / Transparent / #008cff
   ========================================================= */

/* Checkout Grundfläche */
body,
html {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Linke Bestellübersicht – knalliges Blau entfernen */
[class*="checkout"] [class*="bg-primary"],
[class*="checkout"] [class*="bg-blue"],
.checkout [style*="background"],
.checkout-page [style*="background"] {
    background: #000000 !important;
}

/* Linke und rechte Checkout-Bereiche */
.checkout,
.checkout-page,
.checkout-container,
.checkout-layout,
.checkout-main,
.checkout-sidebar {
    background: #000000 !important;
    color: #ffffff !important;
}

/* Transparente/gläserne Boxen */
.checkout .card,
.checkout .form,
.checkout form,
.checkout-page .card,
.checkout-page .form,
.checkout-page form {
    background: rgba(5, 5, 8, 0.72) !important;
    border: 1px solid rgba(0, 140, 255, 0.45) !important;
    border-radius: 14px !important;

    box-shadow:
        0 0 18px rgba(0, 115, 255, 0.08),
        inset 0 0 20px rgba(0, 115, 255, 0.025) !important;
}

/* Inputs */
.checkout input,
.checkout textarea,
.checkout select,
.checkout-page input,
.checkout-page textarea,
.checkout-page select {
    background: rgba(5, 5, 8, 0.8) !important;
    color: #ffffff !important;

    border: 1px solid rgba(0, 140, 255, 0.45) !important;
    border-radius: 10px !important;

    box-shadow:
        0 0 10px rgba(0, 140, 255, 0.08) !important;
}

.checkout input:focus,
.checkout textarea:focus,
.checkout select:focus,
.checkout-page input:focus,
.checkout-page textarea:focus,
.checkout-page select:focus {
    border-color: #008cff !important;

    box-shadow:
        0 0 10px rgba(0, 140, 255, 0.25) !important;
}

/* Zahlungsoptionen */
.checkout [class*="payment"],
.checkout-page [class*="payment"] {
    background: rgba(5, 5, 8, 0.72) !important;
    color: #ffffff !important;
    border-color: rgba(0, 140, 255, 0.35) !important;
}

/* Weiße Zahlungsboxen entfernen */
.checkout [style*="background-color: white"],
.checkout [style*="background-color:#fff"],
.checkout [style*="background:#fff"],
.checkout-page [style*="background-color: white"],
.checkout-page [style*="background-color:#fff"],
.checkout-page [style*="background:#fff"] {
    background: rgba(5, 5, 8, 0.72) !important;
}

/* PayPal Auswahl */
.checkout [class*="paypal"],
.checkout-page [class*="paypal"] {
    background: rgba(5, 5, 8, 0.8) !important;
    color: #ffffff !important;
}

/* Checkout Buttons */
.checkout button,
.checkout .btn,
.checkout-page button,
.checkout-page .btn {
    background: #008cff !important;
    color: #ffffff !important;

    border: 1px solid #008cff !important;
    border-radius: 10px !important;

    box-shadow:
        0 0 8px rgba(0, 140, 255, 0.25),
        0 0 20px rgba(0, 140, 255, 0.08) !important;
}

.checkout button:hover,
.checkout .btn:hover,
.checkout-page button:hover,
.checkout-page .btn:hover {
    background: #0078e6 !important;
    border-color: #008cff !important;

    box-shadow:
        0 0 12px rgba(0, 140, 255, 0.4),
        0 0 25px rgba(0, 140, 255, 0.12) !important;
}

/* Überschriften / Texte */
.checkout h1,
.checkout h2,
.checkout h3,
.checkout h4,
.checkout p,
.checkout span,
.checkout label,
.checkout-page h1,
.checkout-page h2,
.checkout-page h3,
.checkout-page h4,
.checkout-page p,
.checkout-page span,
.checkout-page label {
    color: #ffffff !important;
}

/* Gedämpfte Texte */
.checkout .text-muted,
.checkout-page .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Trennlinien */
.checkout hr,
.checkout-page hr {
    border-color: rgba(0, 140, 255, 0.25) !important;
}

/* Akzentfarbe */
.checkout .text-primary,
.checkout .text-accent-500,
.checkout-page .text-primary,
.checkout-page .text-accent-500 {
    color: #008cff !important;
}

/* Checkout Navigation / Schritte */
.checkout [class*="step"],
.checkout-page [class*="step"] {
    color: rgba(255, 255, 255, 0.55) !important;
}

.checkout [class*="step"].active,
.checkout-page [class*="step"].active {
    color: #ffffff !important;
}

/* Checkboxen / Radio */
.checkout input[type="checkbox"],
.checkout input[type="radio"],
.checkout-page input[type="checkbox"],
.checkout-page input[type="radio"] {
    accent-color: #008cff !important;
}

/* Linke Bestellübersicht */
.checkout .order-summary,
.checkout .cart-summary,
.checkout-page .order-summary,
.checkout-page .cart-summary {
    background: rgba(5, 5, 8, 0.65) !important;
    color: #ffffff !important;
}

/* Mobile */
@media (max-width: 768px) {
    .checkout,
    .checkout-page,
    .checkout-container {
        background: #000000 !important;
    }

    .checkout .card,
    .checkout .form,
    .checkout form,
    .checkout-page .card,
    .checkout-page .form,
    .checkout-page form {
        background: rgba(5, 5, 8, 0.78) !important;
    }
}