/* ==========================================================
   THE REGION DYNAMIC ELEMENTS
   ELEMENTS GRADIENT — FINAL CSS
   7 HEADER VARIANTS + SVG OVERLAYS

   HEADER:
       Row ID: tr-header-gradient
       SVG: assets/header-shape-01.svg

   GENERIC ELEMENTS:
       Extra class: tr-elements-gradient
       SVG: assets/elements-shape-01.svg

   IMPORTANT:
       - Header ima TAČNO 7 varijanti:
         trde-eg-0 ... trde-eg-6
       - SVG slika se NE menja između header varijanti.
       - Menja se samo raspored istih boja.
       - Header nema dodatno zatamnjivanje.
       - Generic elementi više ne koriste velike radial krugove;
         koriste elements-shape-01.svg.
       - Generic elementi zadržavaju blagi 4% dark overlay.
   ========================================================== */


/* ==========================================================
   HEADER — COMMON SETTINGS
   ========================================================== */

html body #tr-header-gradient > .td-element-style {
    background-size:
        100% 100%,
        100% 100%
        !important;

    background-position:
        center,
        center
        !important;

    background-repeat:
        no-repeat,
        no-repeat
        !important;
}


/* ==========================================================
   HEADER FALLBACK — VARIANT 1
   Ako JS klasa još nije dodata.
   RED → MAGENTA → PURPLE → BLUE
   ========================================================== */

html body #tr-header-gradient > .td-element-style {
    background-image:
        url("./header-shape-01.svg"),

        linear-gradient(
            90deg,

            #d70f2b 0%,
            #cc123d 13%,
            #b81757 27%,
            #9a1d73 41%,
            #7c288c 55%,
            #60379e 69%,
            #414aa8 83%,
            #17449f 92%,
            #0b3f99 100%
        )
        !important;
}


/* ==========================================================
   VARIANT 1 — trde-eg-0
   RED → MAGENTA → PURPLE → BLUE
   ========================================================== */

html body #tr-header-gradient.trde-eg-0 > .td-element-style {
    background-image:
        url("./header-shape-01.svg"),

        linear-gradient(
            90deg,

            #d70f2b 0%,
            #cc123d 13%,
            #b81757 27%,
            #9a1d73 41%,
            #7c288c 55%,
            #60379e 69%,
            #414aa8 83%,
            #17449f 92%,
            #0b3f99 100%
        )
        !important;
}


/* ==========================================================
   VARIANT 2 — trde-eg-1
   BLUE → PURPLE → MAGENTA → RED
   ========================================================== */

html body #tr-header-gradient.trde-eg-1 > .td-element-style {
    background-image:
        url("./header-shape-01.svg"),

        linear-gradient(
            90deg,

            #0b3f99 0%,
            #17449f 12%,
            #414aa8 25%,

            #60379e 39%,
            #7c288c 52%,
            #9a1d73 64%,

            #b81757 77%,
            #cc123d 89%,
            #d70f2b 100%
        )
        !important;
}


/* ==========================================================
   VARIANT 3 — trde-eg-2
   PURPLE → BLUE → LONG MIX → RED
   ========================================================== */

html body #tr-header-gradient.trde-eg-2 > .td-element-style {
    background-image:
        url("./header-shape-01.svg"),

        linear-gradient(
            90deg,

            /* PURPLE */
            #7c288c 0%,
            #6e3096 14%,
            #60379e 28%,
            #7a2c92 40%,

            /* BLUE */
            #414aa8 47%,
            #17449f 56%,
            #0b3f99 63%,

            /* LONG BLUE → RED MIX */
            #2746a4 68%,
            #3b439f 72%,
            #51409b 76%,
            #683b94 80%,
            #80358a 84%,
            #982f7c 88%,
            #ad286b 91%,
            #bd2058 94%,

            /* RED */
            #cc123d 97%,
            #d70f2b 100%
        )
        !important;
}


/* ==========================================================
   VARIANT 4 — trde-eg-3
   RED/MAGENTA → PURPLE → BLUE → MAGENTA RETURN
   ========================================================== */

html body #tr-header-gradient.trde-eg-3 > .td-element-style {
    background-image:
        url("./header-shape-01.svg"),

        linear-gradient(
            90deg,

            /* RED / MAGENTA START */
            #d70f2b 0%,
            #cc123d 10%,
            #b81757 20%,

            /* PURPLE */
            #9a1d73 30%,
            #7c288c 40%,
            #60379e 50%,

            /* BLUE */
            #51409b 58%,
            #414aa8 66%,
            #17449f 76%,
            #0b3f99 84%,

            /* SLIGHT MAGENTA RETURN */
            #3c419f 89%,
            #66398f 93%,
            #8e2f78 97%,
            #b81757 100%
        )
        !important;
}


/* ==========================================================
   VARIANT 5 — trde-eg-4
   PURPLE → RED → BLUE → MAGENTA → BLUE
   ========================================================== */

html body #tr-header-gradient.trde-eg-4 > .td-element-style {
    background-image:
        url("./header-shape-01.svg"),

        linear-gradient(
            90deg,

            /* PURPLE START */
            #60379e 0%,
            #7c288c 10%,
            #9a1d73 18%,

            /* RED */
            #b81757 26%,
            #cc123d 34%,
            #d70f2b 40%,

            /* RED → BLUE */
            #b52262 46%,
            #8d327f 51%,
            #633b96 56%,
            #414aa8 61%,
            #17449f 67%,
            #0b3f99 72%,

            /* MAGENTA RETURN */
            #3345a3 77%,
            #57409d 81%,
            #7c358f 85%,
            #9a2a79 89%,
            #b81757 93%,

            /* BLUE END */
            #7c358f 96%,
            #414aa8 98%,
            #17449f 100%
        )
        !important;
}


/* ==========================================================
   VARIANT 6 — trde-eg-5
   BLUE → PURPLE → RED
   CLEANER / FEWER MIXES
   ========================================================== */

html body #tr-header-gradient.trde-eg-5 > .td-element-style {
    background-image:
        url("./header-shape-01.svg"),

        linear-gradient(
            90deg,

            /* BLUE */
            #0b3f99 0%,
            #17449f 18%,
            #414aa8 34%,

            /* PURPLE */
            #60379e 48%,
            #7c288c 62%,
            #9a1d73 72%,

            /* RED */
            #b81757 82%,
            #cc123d 92%,
            #d70f2b 100%
        )
        !important;
}


/* ==========================================================
   VARIANT 7 — trde-eg-6
   RED → BLUE → PURPLE
   CLEANER / FEWER MIXES
   ========================================================== */

html body #tr-header-gradient.trde-eg-6 > .td-element-style {
    background-image:
        url("./header-shape-01.svg"),

        linear-gradient(
            90deg,

            /* RED */
            #d70f2b 0%,
            #cc123d 15%,
            #b81757 29%,

            /* BLUE */
            #414aa8 43%,
            #17449f 57%,
            #0b3f99 68%,

            /* PURPLE */
            #60379e 79%,
            #6e3096 90%,
            #7c288c 100%
        )
        !important;
}


/* ==========================================================
   GENERIC ELEMENTS
   SVG VERSION — NO LARGE RADIAL CIRCLES

   Background layers:
       1. 4% dark overlay
       2. elements-shape-01.svg
       3. base brand gradient
   ========================================================== */

.tr-elements-gradient {
    --trde-elements-gradient:
        url("./elements-shape-01.svg"),

        linear-gradient(
            90deg,
            #d70f2b 0%,
            #cc123d 13%,
            #b81757 27%,
            #9a1d73 41%,
            #7c288c 55%,
            #60379e 69%,
            #414aa8 83%,
            #17449f 92%,
            #0b3f99 100%
        );
}


/* ==========================================================
   GENERIC — DIRECT BACKGROUND
   ========================================================== */

html body .tr-elements-gradient {
    background:
        linear-gradient(
            rgba(0,0,0,.04),
            rgba(0,0,0,.04)
        ),
        var(--trde-elements-gradient)
        !important;

    background-size:
        100% 100%,
        100% 100%,
        100% 100%
        !important;

    background-position:
        center,
        center,
        center
        !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat
        !important;
}


/* ==========================================================
   GENERIC — TAGDIV NATIVE BACKGROUND LAYER
   ========================================================== */

html body .tr-elements-gradient > .td-element-style {
    background:
        linear-gradient(
            rgba(0,0,0,.04),
            rgba(0,0,0,.04)
        ),
        var(--trde-elements-gradient)
        !important;

    background-size:
        100% 100%,
        100% 100%,
        100% 100%
        !important;

    background-position:
        center,
        center,
        center
        !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat
        !important;
}


/* ==========================================================
   CROSS-FADE SUPPORT
   Za finalni elements-gradient.js
   ========================================================== */

.trde-eg-fade-host {
    position: relative !important;
}

.trde-eg-fade-isolate {
    isolation: isolate;
}

.trde-eg-fade-layer {
    position: absolute;
    inset: 0;

    opacity: 1;

    pointer-events: none;

    border-radius: inherit;

    transition-property: opacity;
    transition-timing-function: ease-in-out;

    will-change: opacity;
}

.trde-eg-fade-layer-native {
    z-index: 1;
}

.trde-eg-fade-layer-direct {
    z-index: -1;
}

.trde-eg-fade-layer.trde-eg-fade-out {
    opacity: 0;
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .trde-eg-fade-layer {
        transition-duration: 0ms !important;
    }
}