@charset "UTF-8";

/* === Global background fix for iOS Safari === */
html {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;

  /* fallback-färg om bilden inte laddas */
  background: #182138;

  /* iOS höjdhantering */
  height: -webkit-fill-available;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  color: #ddd;

  /* gör body transparent så bilden under syns */
  background: transparent;

  /* behövs för stacking med ::before */
  position: relative;

  /* iOS höjdhantering */
  min-height: -webkit-fill-available;
}

/* Bakgrundsbilden täcker alltid hela viewporten */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background: url("bground_blue.jpg") center center no-repeat;
  background-size: cover;
}
/* ====== Resten av din CSS (oförändrad) ====== */

a {
	color:#eeeeee;
}

.container {
  position: relative;
  width: 100%; /* Använd hela bredden av skärmen */
  max-width: 600px; /* Maximal storlek på dina bilder */
  min-width:300px;
  margin: -15px auto auto auto; /* Centrera containern */
  padding:0;
}

.kub_top{
	/*padding-top:10px;*/
	padding-top:0;
	font-family: 'DM Mono', monospace;
	font-weight:300;
	font-size:15px;
	text-align: center;
}

.kub_events{
	margin-top:-22%;
	padding:0;
	font-family: 'DM Mono', monospace;
	font-weight:300;
	font-size:14px;
	text-align:center;
}

.kub_events h2{
	font-size:22px;
	font-style: italic;
	color:#FFFCD3;
	padding:5px 10px;
	background-color: #252861;
	margin: 0% 10% 0% 10%;
	transform:rotate(-1deg);
	display: block;
	margin-left:10%;
	margin-right:10%;

}

.kub_events h3 {
	font-size:16px;
	font-style: italic;
	color:#FFFCD3;
	padding:3px 8px;
	background-color: #00969d;
	/*margin:4% 0 4% 0;*/
	transform:rotate(-1deg);
	display: inline-block;
	/*margin-left:10%;
	margin-right:10%;*/
}

.slappskylt  {
	display: block;
	background:rgba(255,255,255,0.95);
	font-size:20px;
	color:#000;
	padding:5px 3px;
	
	}

.textbit{
	
	text-align:left;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
	}


h3.pepspark {
	font-size:22px;
	/*background:#e58a77;*/
	background:rgba(255,255,255,0.95);
	box-shadow: -7px 7px rgba(0,0,0,0.4);
	color:#111111;
	max-width:80%;
	margin-top:-15px;
}

h3.pepsommar {
	font-size:20px;
	color:#eee;
	max-width:100%;
	background:#e97f4a;
	box-shadow: -7px 7px rgba(0,0,0,0.4);
	margin:20px 0 10px 0;
}

h3.vinylnyhet {
	font-size:20px;
	color:#eee;
	max-width:100%;
	background:#009999;
	box-shadow: -7px 7px rgba(0,0,0,0.4);
	margin:-20px 0 10px 0;
}

hr {
	border:none;
	height: 1px;
  background-color: rgba(255,255,255,0.4);
	max-width:80%;
}

.kub_events b{
	color:#FFFCD3;
}

.pepsback{
	/*background-color: #00969d;*/
	width:80%;
	margin-left:auto;
	margin-right:auto;
	/*margin-top:6%;*/
	margin-top:2%;
	padding:1px 0 2% 0;
}

.datum{
	display: block;
	width:100%;
	margin:0 0 5px 0;
	cursor: pointer;
}

.biljettlink{
	font-size: 8px;
	color:#222;
	padding:2px 4px;
	background:#D6CE3F;
	margin:3px 0 0 3px;
	display:inline-block;
	position: absolute;
}

.kub_bottom{
	margin-top:5%;
	padding:0;
	font-family: 'DM Mono', monospace;
	font-weight:300;
	font-size:15px;
	text-align:center;
}

.kub_bottom p{
	margin:0;
	padding:0;
	padding-bottom:5px;
}

.kub_bottom p.full{
	text-decoration-line: line-through;
}

.showlink a{
		
}

.noticketsleft{
	display:inline-block;
	position: absolute;
	
	font-size:10px;
	padding:1px 4px;
	
	/*color:#4133A9;	
	background:#DDDDDD;*/
	background:#D6CE3F;
	color:black;
	
	opacity: 0.9;
	
	margin-left:-55px;
	margin-top:1px;
	
	transform:rotate(-4deg);
}

.fewticketsleft{
	float:left;
	display:inline-block;
	position:absolute;
	font-size:10px;
	padding:1px 4px;
	
	color:#fddc55;	
	background:#cc6666;
	
	opacity: 0.9;
	
	margin-left:-60px;
	margin-top:1px;
	
	transform:rotate(-5deg);
}

.extrasign{
	float:left;
	display:inline-block;
	position:absolute;
	font-size:10px;
	padding:1px 4px;
	
	color:#111111;	
	background:#AFAB8B;
	
	opacity: 0.9;
	
	margin-left:-60px;
	margin-top:1px;
	
	transform:rotate(-2deg);
}

.guestsign{
	float:left;
	
	position:absolute;
	font-size:9px;
	padding:1px 4px;
	
	color:#fddc55;	
	background:#336600;
	
	opacity: 0.6;
	
	margin-left:50%;
	margin-top:-8px;
	
	transform:rotate(-2deg);
}

.plats{
	font-weight:500;
}

.bild-under {
  width: 80%; /* Skala bilden till containerns bredd */
  margin-left:auto;
  margin-right:auto;
  display: block; /* Ta bort eventuella marginaler */
  /*padding-top:6%;*/
  padding-top:0;
}

.bild-over {
  width: 70%; /* Skala bilden till samma bredd som den under */
  margin-left:15%;
  margin-right:15%;
  position: absolute; /* Positionera över den andra bilden */
  top: 8px; /* Placera högst upp i containern */
  left: 0; /* Placera längst till vänster i containern */
  z-index: 10; /* Se till att den ligger överst */
}

.extra-item-1 {
	
	font-family: 'DM Mono', monospace;
  width: auto; /* Skala bilden till samma bredd som den under */
	margin-left:15%;
	margin-right:15%;
	padding:5px;
  position: absolute; /* Positionera över den andra bilden */
  top: 110px; /* Placera högst upp i containern */
	border-radius:5px;
	transform:rotate(-20deg);
  left: 0; /* Placera längst till vänster i containern */
  z-index: 5; /* Se till att den ligger överst */
	/*background:#754572;*/
	cursor: pointer;
}

.item_text{
	width:85%;
	height:85%;
	padding:0;
	text-align:center;
	font-family: 'DM Mono', monospace;
	font-size: 14px;
	color:#333;
	z-index: 10;
	position:absolute;
	margin-top:-88px;
	transform:rotate(15deg);
	/*background:#C03538;*/
}

#burst-12 {
  background:#D6CE3F;;
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  z-index: 10;
}
#burst-12:before,
#burst-12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  background: #D6CE3F;;
}
#burst-12:before {
  transform: rotate(30deg);
}
#burst-12:after {
  transform: rotate(60deg);
}

form{
	margin-top:5px;
	font-size: 15px;
	
	text-align:center;
}

input[type=email],input[type=submit] {
	margin-top:2px;
	font-family: 'DM Mono', monospace;
	font-size: 15px;
	cursor: pointer;
}

button{
	margin-top:2px;
	font-family: 'DM Mono', monospace;
	font-size: 15px;
	
	cursor: pointer;
}

/* ===== POPUP STYLING ===== */
#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none; /* visas med JS */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#popup-box {
  background: #ffffff;
  color: #000;
  width: 85%;
  max-width: 400px;
	
  max-height: 80vh;
  overflow-y: auto;
	
  padding: 15px;
  border-radius: 4px;
  text-align: left;
  font-family: 'DM Mono', monospace;
  font-weight:300;
  font-size:14px;
  position: relative;
}

#popup-box h2{
  font-size:17px;
}

#popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

#popup-ok {
  margin-top: 15px;
  padding: 8px 16px;
  border: none;
  background: #252861;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

#popup-ok:hover {
  background: #3b3f8a;
}

.lapp{
 	/*background:rgba(255,255,255,0.90);*/
	background:#eeeeee;
	color:#333333;
	transform:rotate(-1deg);
	padding:5% 3% 5% 3%; 
	font-size: 13px;
	max-width:80%;
	text-align: left;
	margin-left:auto;
	margin-right:auto;
	margin-top:-20px;
	
	box-shadow: -7px 7px rgba(0,0,0,0.50);
}


.lapp table{
	width:100%;
	border:none;
	padding:0;
	margin:0;
}

.lapp td{
	vertical-align: top;
	padding:0;
	margin:0;
}

.lapp td:first-of-type{
	text-align:right;
	padding-right:10px;
}

.lapp b {
	color:#333333;	
}

a.menulink {
	text-decoration: none;
}


@media screen and (max-width: 700px) {
	.kub_top{
		font-size:14px;
	}
}

@media screen and (max-width: 550px) {
	.kub_top{
		font-size:13px;
	}
	
	h3.pepspark {
	max-width:100%;
}
}

@media screen and (max-width: 500px) {
	.kub_top{
		font-size:12px;
	}
	.kub_bottom{
		font-size:12px;
	}
	
	.biljettlink{
		font-size: 8px;
		color:#222;
		padding:1px 3px;
		background:#D6CE3F;
		margin:2px 0 0 3px;
		display:inline-block;
		position: absolute;
	}
	
	form, input[type=email],input[type=submit] {
		font-size: 13px;
	}
}

@media screen and (max-width: 460px) {
	.lapp{
		font-size:11px;
		max-width:100%;
		margin-top:-5px;
		transform:none;
	}
	
	
	.pepsback{
		width:90%;
	}
	
	.kub_top{
		padding-left:11%;
		font-size:11px;
	}
	
	.kub_events{
		font-size:11px;
	}
	
	form{
		margin-top:3px;
		font-size: 11px;
    }
	
	.kub_bottom{
		font-size:11px;
	}

	.bild-under {
		width: 100%; /* Skala bilden till containerns bredd */
	}

	.bild-over {
		width: 80%; /* Skala bilden till samma bredd som den under */
		margin-left:10%;
		margin-right:10%;
	}
	
	.kub_events h2{
		font-size:16px;
	}
	
	h3.pepspark{
	font-size:16px;
}
	
	.noticketsleft{
		font-size: 9px;
		margin-left: -50px;
		padding:1px 3px;
	}
}

@media screen and (max-width: 380px) {
	.kub_top{
		font-size:10px;
		padding-left:9%;
	}
	
	.bild-under {
		width: 100%; /* Skala bilden till containerns bredd */
	}

	.bild-over {
		width: 84%; /* Skala bilden till samma bredd som den under */
		margin-left:8%;
		margin-right:8%;
	}
	
	.extra-item-1 {
		position: absolute; /* Positionera över den andra bilden */
		top: 90px; /* Placera högst upp i containern */
		margin-left:10%;
		margin-right:10%;
  }

  .item_text{
    font-size: 13px;
    margin-top:-80px;
  }
	
	.noticketsleft{
		font-size: 8px;
		margin-left: -42px;
		padding:1px 3px;
	}

  #burst-12 {
    width: 90px;
    height: 90px;
  }
  #burst-12:before,
  #burst-12:after {
    height: 90px;
    width: 90px;
  }
} /* <-- STÄNGD media 380px, saknades tidigare */

@media screen and (max-width: 320px) {
	.kub_top{
		font-size:9px;
	}
}