/*==================================================
TEAM REGISTRATION
Version : 1.0
==================================================*/

*{
    box-sizing:border-box;
}

/*=========================
CONTAINER
=========================*/

.tr-container{

    max-width:900px;

    margin:10px auto;

    padding:20px;

    background:#cd1313;

    border-radius:12px;
}


/*=========================
HEADER
=========================*/

.tr-header{

    margin-bottom:10px;

}

.tr-logo-wrap{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

}

.tr-logo{

    width:50px;

    height:50px;

    object-fit:contain;

}

img.tr-logo {
    width: 130px;
}

.tr-title{

    flex:1;

    text-align:center;

}

.tr-title h1{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#111;

}

.tr-title h2{

    margin:8px 0;

    font-size:24px;

    font-weight:600;

    color:#f7fd0d;

}

.tr-title p{

    margin-top:15px;

    color:#666;

    line-height:1.8;

}


/*=========================
FORM TITLE
=========================*/

.tr-form-title{

    text-align:center;

    margin:0 0 30px;

    font-size:28px;

    font-weight:700;
	
	color: wheat;

}


/*=========================
SECTION
=========================*/

.tr-section{

    border:1px solid #e8e8e8;

    border-radius:10px;

    padding:25px;

    margin-bottom:25px;

    background:#fff;

}

.tr-section h3{

    margin:0 0 20px;

    font-size:20px;

    color:#0f13ad;

}

/*=========================
FIELD
=========================*/

.tr-field{

    margin-bottom:20px;

}

.tr-field:last-child{

    margin-bottom:0;

}

.tr-field label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#222;

}

.tr-field span{

    color:red;

}

.tr-field input,

.tr-field textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid #13bfcf;

    border-radius:8px;

    font-size:15px;

    transition:.3s;

}

.tr-field textarea{

    min-height:120px;

    resize:vertical;

}

.tr-field input:focus,

.tr-field textarea:focus{

    outline:none;

    border-color:#0d6efd;

    box-shadow:0 0 0 4px rgba(13,110,253,.15);

}

/*=========================
CHECKBOX
=========================*/

.tr-checkbox{

    display:flex;

    gap:12px;

    align-items:flex-start;

    line-height:1.7;

    cursor:pointer;

}

.tr-checkbox input{

    margin-top:5px;

}

/*=========================
BUTTON
=========================*/

.tr-submit-wrap{

    margin-top:35px;

}

.tr-submit-wrap{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}

.tr-submit-player{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.tr-submit:hover{

    background:#0b5ed7;

}

.tr-player-continue {
    padding: 20px;
    margin-bottom: 40px;
    border: 1px solid #939f9f;
}

.tr-container input[type=text]{
    padding:10px;
}

.tr-container button[type=submit]{
    padding:10px;
}  

/*=========================
SUCCESS
=========================*/

.tr-success{

    background:#e9f9ef;

    border:1px solid #8dd9a8;

    color:#166534;

    padding:18px;

    border-radius:8px;

    margin-bottom:30px;

}

/*=========================================
OFFICIAL 2 KOLOM
=========================================*/

.tr-official{
    display:flex;
    align-items:flex-start;
    gap:30px;
}

.tr-official-left{
    flex:1;
}

.tr-official-right{
    width:220px;
    flex-shrink:0;
    text-align:center;
}

.tr-photo-preview{
    width:160px;
    height:240px;
    margin:0 auto 15px;
    border:2px dashed #d5d5d5;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fafafa;
}

.tr-photo-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.tr-official-right input[type=file]{
    width:100%;
}

.tr-official-right small{
    display:block;
    margin-top:8px;
    color:#666;
    line-height:1.5;
}

.tr-upload-button{

    display:inline-block;

    padding:10px 18px;

    background:#2271b1;

    color:#fff;

    border-radius:4px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

}

.tr-upload-button:hover{

    background:#135e96;

}

label.tr-upload-button {
    border: 1px solid blue;
    padding: 4px;
    border-radius: 4px;
}

/*==================================================
ADMIN DETAIL TEAM
==================================================*/

.tr-admin-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:25px;

    margin-bottom:30px;

}

.tr-admin-card{

    background:#fff;

    border:1px solid #dcdcde;

    border-radius:8px;

    overflow:hidden;

    box-shadow:0 2px 6px rgba(0,0,0,.05);

}

.tr-admin-card-title{

    background:#0b5ed7;

    color:#fff;

    padding:14px 18px;

    font-size:18px;

    font-weight:700;

    text-transform:uppercase;

}

.tr-admin-card-body{

    display:flex;

    gap:18px;

    padding:18px;

}

.tr-admin-photo{

    width:140px;

    flex-shrink:0;

}

.tr-admin-photo img{

    width:140px;

    height:190px;

    object-fit:cover;

    border:1px solid #d1d1d1;

    border-radius:4px;

    display:block;

}

.tr-admin-photo-empty{

    width:140px;

    height:190px;

    border:2px dashed #bdbdbd;

    border-radius:4px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#777;

    font-size:13px;

    background:#fafafa;

}

.tr-admin-info{

    flex:1;

}

.tr-admin-info table{

    width:100%;

    border-collapse:collapse;

}

.tr-admin-info table tr{

    border-bottom:1px solid #f0f0f0;

}

.tr-admin-info table tr:last-child{

    border-bottom:none;

}

.tr-admin-info th{

    width:150px;

    text-align:left;

    padding:8px 0;

    font-weight:600;

    vertical-align:top;

}

.tr-admin-info td{

    padding:8px 0;

}

.tr-player-action{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-bottom:15px;
    border-bottom:1px solid #e5e5e5;
    padding-bottom:10px;
}

@media(max-width:900px){

.tr-admin-grid{

    grid-template-columns:1fr;

}

.tr-admin-card-body{

    flex-direction:column;

}

.tr-admin-photo{

    margin:auto;

}

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:768px){

.tr-container{

    margin:15px;

    padding:20px;

}

.tr-logo-wrap{

    flex-direction:column;

}

.tr-logo{

    width:70px;

    height:70px;

}

.tr-title h1{

    font-size:26px;

}

.tr-title h2{

    font-size:20px;

}

.tr-form-title{

    font-size:22px;

}

.tr-section{

    padding:20px;

}
	
	.tr-logo-wrap {
    flex-direction: row;
    display: flex;
}
	
	 .tr-official{
        flex-direction:column;
    }

    .tr-official-right{
        width:100%;
    }

    .tr-photo-preview{
        margin:20px auto;
    }

}

.widefat th {
    padding: 2px 1px;
}

.official-grid {
    background: black;
    padding: 10px;
}