/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */
@import "../base/sn-custom.css";
 
:root {
  --color-mp-inset-highlight: #f07a00;
}

/*--- Anpassung Nav Icons mobile Ansicht ---*/
ul#shop-nav .info-dropdown > a:nth-child(1) {
	color:#ea7207;
}

/*--- Artikelliste ---*/
.snippets-filter-show-all .btn {
	border-color: #ea7207;
}

div.linktree_link.latest_post {
	/*background-color:#ea7207;*/
	font-weight:bold;
}

div.mp-box-important {
	background-color:#ea7207;
	color:white;
	font-weight: bold;
}

.mp-box-highlight{
  border-top:3px solid #f07a00;
}
.mp-box-highlight li::marker{
  color:#f07a00;
}

/*--- Account / Konto ---*/
.mpTeamDiscount.mpV::after {
	content: "(10%) \270c";
}
.mpTeamDiscount.mpW::after {
	content: "(20%) \270c";
}

/*--- Startseite ---*/
a.mpStartBTN {
	margin-right: auto;
	border-width: 2px;
	border-style: solid;
	font-weight: bold;
	font-size: 150%;
	padding: 0.6rem 0.6rem;
	color: #fff;
	text-decoration:none;
}

div.mpStart-Skates {
	background-color: #666666;
	/*background-image: linear-gradient(to bottom, white 0%, #666666 7%, #666666 93%, white 100%);*/
	color: #eee;
	padding-top: 30px;
	padding-bottom: 30px;
}
div.mpStart-Skates h1, div.mpStart-Skates h2 , div.mpStart-Skates a {
	color: #eee;
	text-decoration:none;
}

div.mpStart-Termin {
	background-color: #05637F;
}

/* Produktliste */
div#result-options button#js-filters {
	background-color: #ea7207;
	color: white;
}
div#result-options button#js-filters > span.text-primary{
	color: #525252 !important;
}

/* Such Button*/
#search button.btn-secondary {
	background-color: #ea7207;
	border-color: #666;
}

#search button.btn-secondary:hover {
  background-color: #ccc;
  border-color: #ea7207;
  color: #ea7207;
}

.mp_zahlungsarten details div.content {
  border-color: #ea7207;
}


.alert .fa-info-circle{
	color: #ea7207;
}

.fa-search {
 color: white;
 }
.fa-sup {
 color: white;
 }
.btn-primary {
 color: white;
 }
         /* --- HAUPT-CONTAINER --- */
        .mp-banner {
            position: relative;
            width: 100%;
            /*max-width: 1000px;*/
            height: 70px;
            background-color: #373737;;
			
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24'%3E%3Cstyle%3E.t%7Bfont:italic 7.5px Arial; fill:rgba(255,255,255,0.07);%7D%3C/style%3E%3Ctext x='0' y='7' class='t'%3Eder-rollenshop.live der-rollenshop.live%3C/text%3E%3Ctext x='-20' y='15' class='t'%3Eder-rollenshop.live der-rollenshop.live%3C/text%3E%3Ctext x='-40' y='23' class='t'%3Eder-rollenshop.live der-rollenshop.live%3C/text%3E%3C/svg%3E");
            background-repeat: repeat;
            
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px; /* Kleiner, moderner Radius */
			overflow: hidden;   /* WICHTIG: Schneidet den orangen Balken an den Ecken ab */
			border: 1px solid rgba(255,255,255,0.1);
        }

	 /* --- ORANGE AKZENT OPTIMIERT --- */
	.mp-banner::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: clamp(30px, 15%, 300px);
		z-index: 2;

		/* MEHRSCHICHTIGER HINTERGRUND */
		background: 
			/* 1. Ein scharfer, heller Lichtstrahl (45 Grad Winkel für mehr Dynamik) */
			linear-gradient(
				45deg, 
				transparent 25%, 
				rgba(255, 255, 255, 0.6) 50%, 
				transparent 75%
			),
			/* 2. Das Streifenmuster (etwas dunkler für mehr Kontrast) */
			repeating-linear-gradient(
				-45deg,
				rgba(0, 0, 0, 0.15) 0px,
				rgba(0, 0, 0, 0.15) 2px,
				transparent 2px,
				transparent 10px
			),
			/* 3. Der Haupt-Gradient */
			linear-gradient(135deg, #ff8c00 0%, #e66b00 100%);
		
		/* Der Lichtstrahl bekommt eine eigene Größe, damit er durchlaufen kann */
		background-size: 250% 100%, auto, auto; 
		
		/* Overlay macht das Weiß viel brillanter als soft-light */
		background-blend-mode: overlay, normal, normal;
		
		clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
	}

        /* --- LOGO --- */
        .mp-banner::after {
            content: "";
            position: absolute;
            right: -25px;
            top: 50%;
            transform: translateY(-50%);
            width: 120px;
            height: 120px;
            background-image: url("/bilder/_own/rs-logo-45deg.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: brightness(0.2); 
            z-index: 1;
            pointer-events: none;
        }

        /* --- TEXT --- */
        .mp-banner-text {
            position: relative;
            z-index: 3;
            color: #ffffff;
            font-size: clamp(16px, 2.5vw, 32px);
            font-weight: 900;
            text-transform: uppercase;
            text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
        }
		

        /* --- TEXT --- */
        .mp-banner-text a {
            color: white;
        }
        .mp-banner-text a:before {
            content: "> ";
        }
        .mp-banner-text a:after {
            content: " <";
        }