/* wizard */

.daftar-team{
	border:1px solid #aaa;
	box-shadow:0 0 10px 0 #aaa;
	border-radius:10px;
	overflow:hidden;
}

ul.wizard{
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	min-height:400px;
	padding:40px;
		
	li.wizard-page{
		display:none;
		flex-wrap:wrap;
		width:100%;
		padding:20px;
		list-style:none;
		
		&[data-page-number="1"]{
			display:inline-flex;
		}
		
		.title{
			width:100%;
		}
		ul{
			width:100%;
		}
		
		img.preview{
			height:48px;
			margin:0;
		}
	}
	
	li.wizard-page#summary{
		.wrapper{
			width:100%;
			border:1px solid #aaa;
			border-radius:10px;
			margin-top:30px;
			
			.pasukan{
				display:inline-flex;
				flex-wrap:wrap;
				width:100%;
				column-gap:20px;
				margin:0;
				padding:20px;
				align-items:center;
				border-bottom:1px solid #aaa;
				
				img.team-logo{
					width:64px;
					border-radius:50%;
					height:64px;
				}
				 
				.title{
					width:calc(100% - 120px);
					font-size:36px;
					text-transform:uppercase;
				}
				
				ul.team{
					display:inline-flex;
					flex-wrap:wrap;
					list-style:none;
					margin:0;
					padding:0;
					width:100%;
					
					li.detail{
						display:inline-flex;
						list-style:none;
						flex-wrap:wrap;
						width:25%;
						
						.key{
							font-size:16px;
							width:100%;
						}
						.value{
							font-size:18px;
							font-weight:600;
							width:100%;
							
							&#daerah{
								text-transform:uppercase;
							}
						}
					}
				}
			}
			
			.pemain,
			.pegawai{
				padding:20px;
				
				ul.players,
				ul.officers{
					display:inline-flex;
					flex-wrap:wrap;
					margin:0;
					padding:0;
					gap:10px;
					list-style:none;
					
					li.player,
					li.officer{
						list-style:none;
						padding:10px;
						border:1px solid #ccc;
						border-radius:10px;
						display:inline-flex;
						flex-wrap:nowrap;
						gap:10px;
						width:calc(100% / 4 - 10px);
						box-shadow:0 0 10px 0 #ccc;
						
						.photo{
							width:60px;
							height:60px;
							border-radius:50%;
							border:1px solid #ccc;
							display:inline-flex;
							overflow:hidden;
							position:relative;
							justify-content:center;
							background-size:cover;
							background-repeat:no-repeat;
							background-position:center center;
							
							img{	
								width:100%;
								height:auto;
								display:inline-flex;
								min-width:60px;
							}
						}
						
						.details{
							display:inline-flex;
							flex-wrap:wrap;
							align-content:flex-start;
							
							h4{ margin:0; line-height:1.2em; font-weight:600; width:100%;font-size:14px;margin-bottom:5px;}
							h5{ margin:0; line-height:1.2em; font-weight:500; width: 100%; font-size:12px;}
							
							.value#daerah{
								text-transform:uppercase;
							}
						}
						
					}
				}
				
			}
		}
		
	}
}

.wizard-navigation{
	
	padding:20px 40px;
	border-top:1px solid #ccc;
	background:#f7f7f7;

	.navigation{
		display:inline-flex;
		flex-wrap:nowrap;
		width:100%;
		justify-content:space-between;

		.prev{
			visibility:hidden;
		}
	}
}
/* form components styling */
.btn{
	padding:12px 21px;
	border:0;
	background: #191919;
	color:#fff;
	cursor:pointer;
	transition:ease 0.3s;
	font-family:inherit;
	font-weight:600;
	font-size:16px;
	
	&.btn-primary{
		background:#191919;
		color:#fff;
	}
	
	&:hover{
		background:#e7c157;
		color:#191919;
	}
}

/* fields */
ul.fields{
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	margin:0 -20px;
	padding:0;
	list-style:none;
	
	&#list{
		flex-wrap:nowrap;
		border:1px solid #ccc;
		border-radius:10px;
		background:#f7f7f7;
		padding:20px;
		margin:0 auto;
		
		.field#operation{
			margin-top:30px;
		}
	}
	.field{
		list-style:none;
		padding:10px;
		span.error{
			display:none;
			font-size:12px;
			line-height:1.3em;
			color:#f00;
			margin-top:5px;
		}
		input{
			min-height:42px;
			#fileuploadbutton{
				height:40px;
			}
		}
		input[type="file"]::file-selector-button {
		  background-color: #191919;
		  color: white;
		  border: none;
		  padding: 10px 20px;
		  border-radius: 5px;
		  cursor: pointer;
		  transition: background 0.3s;
		  height: 42px;
		}

		/* Hover effect */
		input[type="file"]::file-selector-button:hover {
		  background-color: #e7c157;
		}
		
		input[name="posisi"]{
			text-transform:uppercase;
		}
		
		
	}
	
	#imagePreview{
			margin-top:36px;
		}
}

.table{
	
	&#pemain,
	&#pegawai{
		
		th#no{
			width:30px;
			text-align:center;
		}
		
		th#no_kp{
			width:230px
		}
		th#jawatan{
			width:180px;
		}
		th#gambar{
			width:80px;
			text-align:center;
		}
		th#posisi,
		th#no_jersi{
			width:130px;
			text-align:center;
		}
		th#action{
			width:30px;
			text-align:center;
		}
		
		td{
			vertical-align:middle;
			
			&#posisi,
			&#no-jersi{
				text-align:center;
			}
			&#action,
			&#gambar{
				text-align:center;
				line-height:1;
				font-size:22px;
				color:#f00;
				
				i{
					cursor:pointer;
				}
			}
		
		}
		
	}
}

/* payment */
.payment{
	&.failed,
	&.success{
		.wrapper{
			width:700px;
			margin:0 auto;
			border:1px solid #ccc;
			padding:40px;
			border-radius:10px;
			box-shadow:0 0 10px 0 #ccc;
			text-align:center;
			
			.badge{
				margin:30px auto;
				width:400px;
				
				img{
					width:98px;
				}
			}
			
			.resit{
				text-align:left;
				padding:20px;
				border:1px solid #aaa;
				box-shadow:0 0 10px 0 #aaa;
				border-radius:10px;
				background:#f7f7f7;
				
				ul.transaction{
					margin:0;
					
					li{
						list-style:none;
					}
				}
				
			}
		}
		
	}
}

.wp-list-table{
	
	th#logo{
		width:32px;
	}
	
	span.status{
		background: #18181820;
    	padding: 5px 18px;
    	border-radius: 20px;
    	font-weight: 500;
		display:inline-block;
		text-align:center;
		width:90px;
		
		&.approved{
			background:#00ff0020;
		}
		&.reject{
			background:#ff000020;
		}
	}
	span.order-paid{
		padding:5px 10px;
		border-radius:20px;
		
	}
}

.daftar-team-admin{
	padding:20px;
	.pasukan{
		display:inline-flex;
		flex-wrap:wrap;
		width:100%;
		justify-content:space-between;
		border-bottom:1px solid #ccc;
		
		img{
			width:80px;
			height:80px;
		}
		
		
		.team{
			display:inline-flex;
			flex-wrap:wrap;
			width:calc(100% - 100px);
			
			h3{
				font-size:40px;
				width:100%;
				margin:0;
				margin-top:-25px;
				margin-bottom:10px;
			}
			
			li{
				width:50%;
				margin-bottom:10px;
				
				.key{
					margin-bottom:0;
				}
				.value{
					font-size:14px;
					font-weight:600;
					margin:0;
					
					&#daerah{
						text-transform:uppercase;
					}
				}
				
				&#no_telefon,
				&#daerah{
					width:50%;
				}
			}
		}
		
	} /* pasukan */
	
	.pemain,
	.pegawai{
		ul.players,
		ul.officers{
			display:inline-flex;
			flex-wrap:wrap;
			margin:0;
			padding:0;
			gap:10px;
			list-style:none;

			li.player,
			li.officer{
				list-style:none;
				padding:10px;
				border:1px solid #ccc;
				border-radius:10px;
				display:inline-flex;
				flex-wrap:nowrap;
				gap:10px;
				width:calc(100% / 3 - 30px);
				box-shadow:0 0 10px 0 #ccc;

				.photo{
					width:60px;
					height:60px;
					border-radius:50%;
					border:1px solid #ccc;
					display:inline-flex;
					overflow:hidden;
					position:relative;
					justify-content:center;
					background-size:cover;
					background-repeat:no-repeat;
					background-position:center center;

					img{	
						width:100%;
						height:auto;
						display:inline-flex;
						min-width:60px;
					}
				}

				.details{
					display:inline-flex;
					flex-wrap:wrap;
					align-content:flex-start;
					width: calc(100% - 70px);

					h4{ margin:0; line-height:1.2em; font-weight:600; width:100%;font-size:14px;margin-bottom:5px;}
					h5{ margin:0; line-height:1.2em; font-weight:500; width: 100%; font-size:12px;}

					.value#daerah{
						text-transform:uppercase;
					}
				}

			}
		}
	} /* pegawai */
}

@media only screen and (max-width:768px){
	
	ul.wizard{
		padding:10px;
		
		.wizard-page{
			padding:10px!important;
			margin:0;
			
			.responsive-table{
				width: 100%;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				margin-top:20px;

				table.table{
					min-width:768px;
					
					th#no_kp{
						width:170px;
					}
				}
				
				
			}
			
			ul.team{
				li.detail{
					width:100%!important;
				}
			}
			
			ul.officers,
			ul.players{
				
				li{
					width:100%!important;
				}
			}
			
			ul.fields{
				margin:0;
				padding:10px!important;
				
				&#list{
					flex-wrap:wrap;
				}
				li{
					width:100%!important;
					
					img.preview{
						margin:0 auto;
						width:60px;
					}
					
					&#operation{
						button{
							width:100%;
						}
					}
					
					
				}
			}
		}
	}
	
	.payment.success{
		.wrapper{
			width:100%!important;
			padding:30px 10px;
			
			.badge{
				width:100%;
			}
		}
	}
	
	/* admin */
	.daftar-team-admin{
		padding:20px 0;
		
		.team li.detail{
			width:100%!important;
		}
		li.player,
		li.officer{
			flex-wrap:wrap;
			width:100%!important;
			gap:0;

	}
}