/*
 Theme Name:   Football
 Theme URI:    https://www.kadencewp.com/kadence-theme/
 Description:  Kadence Child Theme
 Author:       DesignToHtml
 Author URI:   http://designtohtml.net
 Template:     kadence
 Version:      0.1.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  kadence-child-theme
*/

/* ==== Add your own styles below this line ====
 * -------------------------------------------- */
 :root {
   --color-primary:   #e0ab3e;   /* rgb(224, 171, 62) yellow */
   --color-secondary: #8b254a;   /* rgb(139, 37, 74)  red */
   --color-dark:      #141414;
   --color-light:     #ffffff;
 }
body{
	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../../uploads/2026/03/football-bg.jpg)!important;
	background-repeat: no-repeat!important;
	background-attachment: fixed!important;
} 
 .page-block{
	background: rgba(255,255,255,0.7);
    padding: 10px 20px;
	border-radius: 10px;
 }
/* dashboard profile picture styles */
  .um-128.um .um-profile-body.main.main-default{
     width: 300px!important;
 }
 .um-profile.um-viewing .um-col-1 .um-field-label{
    display: none;
 }
 .um-128 div.um-photo a{
    border-width: 0px;
    box-shadow: none;
    padding: 0;
 }
 .student-profile div.um-photo{
    position: relative;
    margin: 0;
 }
.um-field-footballer_image .um-photo{
   border-radius: 10px;
}
 
 .um-photo img{
   display: block;
   width: 100%;
   position: relative;
   z-index: 0;
   filter:
     drop-shadow(-4px 8px 12px rgba(0,0,0,0.55))
     drop-shadow(0 16px 28px rgba(0,0,0,0.35));
 }
 
 
 .um-viewing .student-profile div.um-field{
    padding: 0;
 }
 .um-profile.um-viewing.um-role-student,
 .um-viewing .student-profile{
    margin-bottom: 0!important;
 }
 .um-viewing .student-profile .um-col-1{
    position: relative;
	width: 300px;
	height: 366px;
	/* overflow: hidden; */
	background: rgba(255,255,255,0.5);
	/* Координатите са умножени × 1.5 спрямо предишните (300×244 → 450×366) */
	clip-path: path("M 145,360 Q 219,297 279,293 Q 283,290 282,290 Q 286,279 288,141 Q 289,119 289,108 Q 289,69 289,47 Q 291,39 288,38 Q 259,38 250,11 Q 205,0 145,0 Q 85,0 40,11 Q 31,38 3,38 Q 0,39 1,47 Q 1,69 1,108 Q 1,119 3,141 Q 4,279 9,290 Q 7,290 12,293 Q 72,297 145,360 Z"); 
	/* clip-path: path("M 150,240 Q 199,198 239,195 Q 242,193 241,193 Q 244,186 245,94 Q 246,79 246,72 Q 246,46 246,31 Q 247,26 245,25 Q 226,25 220,7 Q 190,0 150,0 Q 110,0 80,7 Q 74,25 55,25 Q 53,26 54,31 Q 54,46 54,72 Q 54,79 55,94 Q 56,186 59,193 Q 58,193 61,195 Q 101,198 150,240 Z"); */
 }
 
 .um-viewing .student-profile .um-field-nickname{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 150px;
    background: var(--color-primary);
   /* background: linear-gradient(0deg, rgba(224, 171, 62, 1) 0%, rgba(236, 195, 96, 0.79) 45%, rgba(247, 221, 151, 0) 100%); /* жълто с преливка*/
   /* background: linear-gradient(0deg, rgba(139, 37, 74, 1) 0%, rgba(162, 81, 110, 0.79) 45%, rgba(185, 125, 147, 0) 100%); червено */
    border-radius: 10px;
	 &:after{
		content: '';
		position:absolute;
		bottom: 10px;
		left: 50%;
		width: 50px;
		height: 50px;
		background-image: url('../../uploads/2026/04/FA-Sofia-Logo.webp');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transform: translate(-59%, -50%);
	 }
 }
 
 .um-viewing .student-profile .um-field-nickname .um-field-value{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
 }
 .um-viewing.um-role-student .um-profile-body{
    padding-top: 0;
    padding-bottom: 0;
 }
 
 /* learndash profile */
 #ld-profile .ld-profile-card,
 #ld-profile .ld-profile-summary{
    margin-top: 0;
 }
 /***Hide Profile Avatar Picture***/
 #ld-profile .ld-profile-avatar {
    display: none;
 }
 #ld-profile .ld-profile-heading{
    display: none;
 }
 .user-card .gamipress-rank{
	 /*width: 300px!important;*/
	 margin: 0 auto;
	 padding: 0 10px;
 }
 .gamipress-rank{
    display: flex;
 }
 /*.gamipress-rank.gamipress-layout-top .gamipress-rank-description, */
 .gamipress-rank-description
 {
    display: flex;
    width: auto!important;
    gap: 10px;
 }
 
  .gamipress-rank.gamipress-layout-left .gamipress-rank-image{
     width: 50px;
  } 
  
 /* footballer profile badge achievment - add class football-badge in block */
 .football-badge,
 .gamipress-inline-achievement-link{
    display: flex;
    width: auto!important;
    gap: 10px;	
    text-decoration: none;
    color: #000;
 }
 
 .info-block {
    /* border: 2px solid #8B254A; */
    background: rgba(255,255,255,0.7);
    padding: 10px 20px;
 }

	.info-block.wp-block-kadence-column{
		border-radius: 10px;
		padding: 0!important;	
	}
	
	.info-block .kt-inside-inner-col{
		padding: 0!important;	
	}
 
 .block-title {
    background: var(--color-primary);
    color: var(--color-light);
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	margin-bottom: 0!important;
 }
 
 /* team list */
 .user-list-item{
	display: flex; 
	align-items: center; 
	gap: 10px; 
	padding: 5px; 
	border-bottom: 1px solid #eee;
	overflow: hidden;
	max-height: 60px;
 }
.team-list-img{
	align-self: baseline;
}
 /* team list END */
  
 #gamipress-achievements-container[class*="gamipress-columns"] > .gamipress-achievement, 

 .gamipress-user-points[class*="gamipress-columns"] > .gamipress-points, 
 .gamipress-points-types[class*="gamipress-columns"] > .gamipress-points-type, 
 .gamipress-ranks-container[class*="gamipress-columns"] .gamipress-rank{
    padding: 5px 15px;
    display: flex;
    gap: 10px;
 }
  .medals .gamipress-inline-achievements{
	  padding: 5px 15px 5px 0;
  }
  .medals a{
	  font-size: 15px;
  }
 
 .learndash-main-block .learndash-wrapper .ld-profile-summary .ld-profile-stats{
    display: none;
 }
 
.ld-profile-card a.ld-profile-edit-link,
.um a.um-button,
.um input[type="submit"].um-button{
	background: var(--color-primary)!important;
	border-radius: 10px;
	padding: 5px 10px;
	color: #000!important;
}
.um .um-button.um-alt{
	background: var(--color-secondary)!important;
	color: #fff!important;
}
 
 
 /* coach page */
 .coach-award-table, 
 .gp-leaderboard{
    background: var(--color-light);
 }
 .coach-award-table, .coach-award-table th, .coach-award-table td,
 .gp-leaderboard, .gp-leaderboard th, .gp-leaderboard td{
    border: 1px solid var(--color-primary);
    border-collapse: collapse;
 }
 .coach-award-table th{
    font-size: 14px;
    padding: 10px;
    background: var(--color-primary);
    color: var(--color-secondary);
 }
 @media (min-width: 768px) {
    .coach-award-table th{
       font-size: 16px;
    }
 }
 .coach-award-table td {
    text-align: center;
    padding: 10px;
 }
 .coach-award-wrap{
    overflow-x:auto;
    padding-bottom: 20px;
    margin-bottom: 20px;
 }
 .btn-main{
    background: var(--color-primary);
    color: var(--color-secondary);
    &:hover{
       background: var(--color-secondary);
       color: var(--color-primary);
    }
 }
 

 .accordion-student {
	margin-bottom: 10px;
	border-radius: 4px;
	overflow: hidden;
}

.accordion-student summary {
	background: var(--color-primary);
	color: white;
	padding: 12px;
	cursor: pointer;
	font-weight: 600;
	user-select: none;
	padding-left: 30px;
}

.accordion-student summary:hover {
	background: var(--color-secondary);
}

.accordion-student summary::marker {
	color: white;
}

.accordion-course {
	margin: 10px 0;
	border-radius: 4px;
	overflow: hidden;
}

.accordion-course summary {
	background: #f5f5f5;
	color: #000;
	padding: 10px;
	cursor: pointer;
	font-weight: 600;
	user-select: none;
	padding-left: 25px;
}

.accordion-course summary:hover {
	background: #5a6268;
	color: #fff;
}

.accordion-course summary::marker {
	color: #000;
}

.progress-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	margin-top: 10px;
}

.progress-table thead th {
	background: #f5f5f5;
	color: #333;
	padding: 12px;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid #ddd;
}

.progress-table tbody tr:nth-child(even) {
	background: #f9f9f9;
}

.progress-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
}

.lesson-name {
	min-width: 400px;
}

.lesson-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 12px;
}

.lesson-status.completed {
	background: #d4edda;
	color: #155724;
}

.lesson-status.incomplete {
	background: #f8d7da;
	color: #721c24;
}
 
 
 
 
 /* leaderboard */
.table-wrapper{
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}
.tabs-wrapper {
	width: 100%;
}
.tabs-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--color-secondary);
}
.tab-button {
	padding: 12px 20px;
	background-color: var(--color-primary);
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
	color: var(--color-secondary);
}
.tab-button:hover {
	background-color: var(--color-secondary);
}
.tab-button.active {
	background-color: var(--color-secondary);
	border-bottom-color: var(--color-secondary);
	color: var(--color-primary);
}
.groups-tabs-content {
	display: none;
}
.groups-tabs-content.active {
	display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.gp-leaderboard {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}
.gp-leaderboard thead th {
	background-color: #f5f5f5;
	padding: 12px;
	text-align: left;
	border-bottom: 2px solid #ddd;
	font-weight: 600;
}
.gp-leaderboard tbody td {
	padding: 12px;
	border-bottom: 1px solid #eee;
}
.gp-leaderboard tbody tr:hover {
	background-color: #f9f9f9;
}
.gp-lb-rank {
	font-size: 20px;
	display: inline-block;
	min-width: 30px;
	text-align: center;
}
.gp-lb-avatar {
	/*border-radius: 50%;*/
	margin-right: 10px;
}
.gp-lb-level {
	display: flex;
	align-items: center;
	gap: 8px;
}
.gp-lb-level-icon {
	border-radius: 4px;
}
.gp-lb-pts {
	font-weight: 600;
	color: #007cba;
}
.group-title{
	max-width: 600px;
}
 

/* ---- Skills progress bars ---- */
@keyframes skill-grow {
  from { width: 0; }
  to   { width: var(--skill-pct); }
}
@keyframes skill-pct-move {
  from { left: 0; }
  to   { left: var(--skill-pct); }
}
.skill-label {
  letter-spacing: 1px;
  margin-top: 40px;
  margin-bottom: 5px;
}

.skills-bars {
  padding: 10px 20px;
}

/* Обвивка на track + badge – overflow visible за да се вижда badge-ът */
.skill-track-wrap {
  position: relative;
  margin: 18px 0; /* място за badge-а да не се припокрива с ред отдолу */
}

/* Целият track е в градиент – fill го разкрива отляво надясно */
.progress-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(
    to right,
    var(--color-primary)   0%,
    var(--color-primary)  50%,
    var(--color-secondary) 100%
  );
}

/* Fill е прозрачен – само движи сивата "завеса" наляво */
.skill-fill {
  position: relative;
  height: 10px;
  width: 0;
  animation: skill-grow 2s cubic-bezier(0.25, 1, 0.5, 1) both;
}

/* Сива завеса – закрива неразкритата част и се движи с fill-а */
.skill-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 500px;
  height: 10px;
  background: #5a5a5a;
  z-index: 1;
}

/* Badge – позициониран спрямо .skill-track-wrap, извън overflow:hidden */
.skill-pct {
  position: absolute;
  left: var(--skill-pct);
  top: 50%;
  animation: skill-pct-move 2s cubic-bezier(0.25, 1, 0.5, 1) both;
  transform: translate(-50%, -50%);
  z-index: 10;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.5);
}

.gp-leaderboard{
	max-width: 600px;
	td{
		padding: 10px;
		font-size: 14px;
	}
	th{
		font-size: 13px;
	}
}

.user-points-total{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border-radius: 10px;
}


/* login */
.footballer-login{
	padding: 20px;
	position: relative;
	width: 310px;
	height: 466px;
	margin: 0 auto;
	background: rgba(255,255,255,0.5);
	/* Координатите са умножени × 1.5 спрямо предишните (300×244 → 450×366) */
	
	/* clip-path: path("M 145,460 Q 219,380 279,375 Q 283,371 282,371 Q 286,357 288,180 Q 289,152 289,138 Q 289,88 289,60 Q 291,50 288,49 Q 259,49 250,14 Q 205,0 145,0 Q 85,0 40,14 Q 31,49 3,49 Q 0,50 1,60 Q 1,88 1,138 Q 1,152 3,180 Q 4,357 9,371 Q 7,371 12,375 Q 72,380 145,460 Z");  */
	clip-path: path("M 155,460 Q 229,380 289,375 Q 293,371 292,371 Q 296,357 298,180 Q 299,152 299,138 Q 299,88 299,60 Q 301,50 298,49 Q 269,49 260,14 Q 215,0 155,0 Q 95,0 50,14 Q 41,49 13,49 Q 10,50 11,60 Q 11,88 11,138 Q 11,152 13,180 Q 14,357 19,371 Q 17,371 22,375 Q 82,380 155,460 Z"); 
}

.footballer-login .um-form{
	width: 268px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footballer-login .um-button,
.footballer-login a.um-button{
	padding: 10px 20px !important;
}

.footballer-login .um input[type=submit].um-button{
	background-color: var(--color-primary);
}
.footballer-login .um input[type=submit].um-button:hover{
	background-color: var(--color-secondary);
}