:root {
  
 
  --btn1-bg: #000;
  --btn1-text: #fff;
  --btn1-hover: #222;
   --card-bg: #1e1e1e;
  --input-bg: #2a2a2a;
  --icon-color: #000000;
  --chart-line: #777;
    --chart-grid: #444;
    --chart-label: #C3C0C0;
    --chart-legend:#C3C0C0;
    --chart-statlabel:#A8A8A8;
}


.fighter-dropdown {

background-color: var(--bg-body);
  color: var(--text-color);

}

#fighter-form {

background-color: var(--bg-body);
  color: var(--text-color);

}

[data-theme="dark"] {
  
  --btn1-bg: #fff;
  --btn1-text: #000;
  --btn1-hover: #e6e6e6;
   --card-bg: #1e1e1e;
  --input-bg: #2a2a2a;
  --icon-color: #C3C0C0;
 --chart-label:#C3C0C0;
 --chart-statlabel:#A8A8A8;
}



.locked-content {
  display: block !important;;
}














.subscribe-button {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: var(--btn1-bg, #f3ca34);
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
}


.flag-icon {
  width: 22px; /* Set the width */
  height: auto; /* Maintain aspect ratio */
}


.poster {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--bg-container);
  border-radius: 8px;
  padding: 20px;
 
}



.poster-header h1 {
  font-size: 1.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.poster-nav {
  display: flex;
  gap: 15px;
  font-size: 0.9rem;
}

.poster-nav a {
  text-decoration: none;
  color: var(--accent-color);
  transition: color 0.3s ease;
}

.poster-nav a:hover {
  color: #fff;
}

  .stats-bar {
    display: flex;
    flex-wrap: nowrap;      /* Prevent wrapping */
    gap: 10px;
    overflow-x: auto;       /* Allow horizontal scroll if needed */
    padding: 10px 0;
}








.stats-bar .item {
    flex: 0 0 auto;
    background:var(--box-bg);
    color:var(--bg-text);
    padding: 8px 12px;
    border-radius: 6px;
   border: 1px solid var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: row;   /* Default: inline */
    align-items: center;
    gap: 5px;
}


.stats-bar .label {
    font-weight: bold;
}

.stats-bar .value {
     color: var(--text-color);
}
  /* search icon*/
  









#searchIcon {
  background-color: var(--bg-body); /* Change to your desired color */
  color: var(--btn1-bg);           /* Change the text/icon color */
  border: none;           /* Removes the border, if any */
  padding: 5px;          /* Adds some padding for a nicer look */
  cursor: pointer; /* Ensures the cursor changes when hovering over the button */
  border-radius: 50%;
}













.fighter-portrait {
  position: relative;
  margin: 0 auto 50px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
 /* box-shadow: 0 0 20px rgba(243, 202, 52, 0.6);*/
  display: block;
  border: 2px solid var(--text-color);
}
.fighter-portrait:hover {
 
  transform: translateY(-1px);
     border: 2px solid var(--accent-color);
     box-shadow: 0 0 20px rgba(161, 160, 160, 0.6);
}
.main-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-box {
  background:var(--box-bg);
  border-radius: 4px;
  text-align: center;
  padding: 15px;
  border: 1px solid var(--border-color);
 
}

.stat-box h2 {
  font-size: 1.0rem;
  margin-bottom: 5px;
}

.stat-box p {
  font-size: 1rem;
  margin-bottom: 5px;
}

.lower-panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.panel {
  background:var(--box-bg);
  padding: 15px;
  border-radius: 4px;
 border: 1px solid var(--border-color);
}

.panel h3 {
  margin-bottom: 10px;
  font-size: 1rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--accent-color);
  padding-bottom: 5px;
}

.panel .panel-content {
  text-align: center;
}

.panel .panel-content .fighter-images a {
  display: inline-block;
  width: 48%;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #3a3a3a; /* fallback */
}

.panel .panel-content .fighter-images .thumb1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.card-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.x-follow-button, .ig-follow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: bold;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.2s ease;
  min-width: 200px;
  max-width: 280px;
}

.x-follow-button {
  background-color: #000;
  color: #fff;
}

.x-follow-button:hover {
  background-color: #111;
  transform: translateY(-1px);
}

.x-follow-button .x-icon {
  width: 18px;
  height: 18px;
  fill: white;
}

.ig-follow-button {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
  color: white;
}

.ig-follow-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.ig-follow-button i {
  font-size: 18px;
}




.professional-bouts {
flex: 1
max-width: 60%;
  background-color: var(--box-bg);
  padding: 1rem;
  margin: 2rem 0;
  border-radius: 6px;
 
  border: 1px solid var(--border-color);
}

.professional-bouts h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: var(--accent-color);
}

.fight-item {
    display: grid;
    grid-template-columns:  10% 30% 15% 25% 10% 10%;
    justify-content: space-between;
    align-items: center;
    background-color:var(--box-bg);
    padding: 12px 15px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
   
    color: #fff;
    font-size: 0.9rem;
    flex-wrap: wrap;   /* Allow wrapping if tight */
    text-align: center;
}


.fight-item > div {
    text-align: center;
}

.fight-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}



.bout-result {
  width: 30px;
  height: 30px;
  font-weight: bold;
  text-align: center;
  margin-right: 10px;
  border-radius: 50%;
  padding: 0.2rem 0;
  color: var(--accent-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:1.4rem;
  line-height: 30px;
  border: 1px solid var(--border-color);
}
.bout-result.win {
    background-color: #28a745;
    color: #fff;
}
.bout-result.W {
    background-color: #28a745;
    color: #fff;
}

.bout-result.L {
    background-color: #dc3545;
    color: #fff;
}
.bout-result.loss {
    background-color: #dc3545;
    color: #fff;
}
.bout-result.D {
  background-color: gray;
  color: #fff;
 
}
.bout-result.NC {
  background-color: gray;
  color: #fff;
   font-size:1.2rem;
  
}

.bout-result.draw {
    background-color: #dc3545;
    color: #fff;
}

.bout-result:contains("W") {
    background-color: #28a745;
}

.bout-result:contains("L") {
    background-color: #dc3545;
}
.bout-result:contains("D") {
    background-color: #dc3545;
}

.bout-result:contains("NC") {
    background-color: #dc3545;
}
.bout-opponent {
white-space: nowrap;
  overflow: hidden;

  max-width: 100%; /* or a set value like 100px */
  display: block;
  text-align: center;
  margin-right: 10px;
  font-weight: bold;
  color:var(--text-color);
}

.opponent-record {
  font-size: 0.85rem;
  color: var(--text-color);
}

.bout-round-info span,
.bout-finish,
.bout-weight,
.bout-date {
  color:var(--text-color);
  font-family: 'Arial', sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  flex: 1;
    text-align: center;
    white-space: nowrap;
    line-height: 1.4;
}

.bout-round-info span {
  display: inline;
  margin-right: 15px;
}






.date-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-box {
  margin-right: 15px;
}
.hidden {
 display: none !important; 
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, height 0.3s ease;
}
.toggle-bouts-btn {
    margin-top: 1rem;
    background: #facc15;
    color: #000;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
}


.app-image {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  object-fit: contain;
}

.footer-row {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--accent-color);
  padding-top: 10px;
}

@media (max-width: 768px) {
  

  .poster {
    padding: 15px;
  }

  .fighter-info-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .fighter-name {
    font-size: 1.8rem;
  }

  .stats-bar {
    display: flex;
    flex-wrap: nowrap;      /* Prevent wrapping */
    gap: 10px;
    overflow-x: auto;       /* Allow horizontal scroll if needed */
    padding: 10px 0;
}
.stats-bar .item {
    flex: 0 0 auto;         /* Keep each box at its content width */
    background:var(--box-bg);
    color:var(--bg-text);
    padding: 8px 12px;
    border-radius: 6px;
   border: 1px solid var(--border-color);
    white-space: nowrap;    /* Prevent text wrapping */
    
    
}
  .main-stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .lower-panels {
    grid-template-columns: 1fr;
  }

  .panel iframe {
    height: 200px;
  }

 

  .radar-charts > div {
    max-width: 100%;
    width: 100%;
  }
.radar-charts {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}

.radar-charts canvas {
    max-width: 300px;
    width: 100%;
    height: auto;
}

  .fighter-select {
    flex-direction: column;
    gap: 10px;
  }

  .fighter-select select {
    width: 100% !important;
  }

  .card-container {
    flex-direction: column;
    gap: 20px;
  }

  .fight-item {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 1rem;
  }

  .bout-result,
  .bout-opponent,
  .bout-round-info,
  .bout-finish,
  .bout-weight,
  .bout-date {
    width: 100% !important;
    text-align: center;
  }

  .date-container {
    flex-direction: column;
  }

  .app-image {
    margin-top: 10px;
  }

  button[type="submit"] {
    width: 100%;
  }
}
.fighter-images {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.thumb1:hover {
    transform: translateY(-3px);
    border: 3px grey;
}




.thumb1 {
  width:120px;               /* pick your desired thumbnail size */
  height: 120px;
  background-size: cover;     /* scale & crop to fill */
  background-position: center;
  border-radius: 8px;
  background-color: #333;     /* fallback color while loading */
 
  border: 3px solid transparent; 
}

.thumb1.winner {
  border-color: #4CAF50; /* Green border for winner */
}
.thumb1.loser {
  border-color: #E33935;
}




.fighter-images .thumb1 {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 48%;
  height: 120px;
  background-size: cover;
  background-position: center;
}

section {
  background-color: var(--bg-container);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
main {
  background-color: var(--bg-container);
}

.item {
  color: var(--text-color);
  }
  
  .label {
    font-weight: bold;
    margin-right: 5px;
    color: var(--text-color);
}

.value {
    color: var(--text-color);
}

  
  
  

.fighter-name {
  color: var(--text-color);
  }
  .division-title {
  color:var(--text-color);
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.fighter-meta h3 {
font-size: 1.2rem;

  font-weight: 400;
  color: var(--text-color);
  margin-bottom: 5px;
  text-transform: uppercase;
  }



/* method charts-------------------------------------------------------- */
.method-breakdown {
   flex: 0 0 35%;  /* Fixed width */
   
    padding: 20px;
    border-radius: 10px;
     background-color:var(--box-bg);
    border: 1px solid var(--border-color); 
}
.method-breakdown h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
    color: var(--accent-color);
}


.method-row {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.method-type {
    width: 60px;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--text-color);
    text-align: center;
}

.bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bar {
overflow: visible;
  max-width: 95%;
  position: relative;
  border-radius: 10px;
  margin-bottom: 6px;
  padding-right: 40px;

  height: 20px; /* <--- This is required */
}

  #statRankChart {
    max-height: 240px; /* or 280px, or adjust to fit your design */
    height: auto;

 }

.bar-badge {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: #288503;
  color: #fff;
  font-weight: bold;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.loss-badge {
  background: #b00020; /* Red shade for losses */
}

.bar.win {
    background: linear-gradient(to right, darkgreen, lightgreen);
}

.bar.loss {
    background: linear-gradient(to right, darkred, lightcoral);
}

.bar span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(-btn1-text);
  white-space: nowrap;
   left: calc(100% + 8px); /* places text to the right of the bar */
  z-index: 2;
 

}



.profile-layout {
    display: flex; 
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
}
/* Ensure both boxes don't exceed 100% */
.method-breakdown, .professional-bouts {
    box-sizing: border-box;
}

/* Professional Bouts */
.professional-bouts {
    flex: 0 0 60%;
}


@media (max-width: 768px) {
    .profile-layout {
        flex-direction: column;
    }
.thumb1 {
     /* fallback color while loading */
 
  border: 2px solid transparent; 
}
    .method-breakdown, .professional-bouts {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .professional-bouts {
        margin-top: 20px;
    }

      .fight-item {
       display: grid;
    grid-template-columns:8% 38% 20% 12% 22%;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 5px;
        padding: 5px;
    }

    /* Stack these vertically */
    .bout-round-info,
    .bout-finish,
    .bout-date {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        white-space: nowrap;
        font-size: 0.8rem;
    }
.finish-type {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        white-space: nowrap;
        font-size: 0.8rem;
    text-overflow: ellipsis;
    }
    .bout-finish {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        white-space: nowrap;
        font-size: 0.8rem;
    text-overflow: ellipsis;
    }
  

    .bout-weight {
        font-weight: bold;
        white-space: nowrap;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
    }
    
.bout-result {
    width:20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;        /* Makes it a circle */
    font-weight: bold;
    font-size:0.8rem;
    flex: 0 0 20px;            /* Prevents stretching */
    background-color: #444;    /* Default background */
    color: var(--accent-color);
}

.bout-result.W {
    background-color: #28a745;
    color: #fff;
}

.bout-result.L {
    background-color: #dc3545;
    color: #fff;
}

    .bout-weight {
        display: none;
    }
.bout-opponent {
    cursor: pointer;
    display: block;
    white-space: nowrap;
    overflow: hidden;
  
    max-width: 100%;
    transition: all 0.3s ease;
}

.bout-opponent.expanded {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    text-overflow: unset;
}



.search-form {
        flex-direction: column;
        align-items: center;
        color: var(--text-color);
        background-color: var(--bg-color);
         width: 80%;
        max-width: 200px;
    }
/* Ensure full width */
.select2-container {
  width: 100% !important;
}

/* Rendered text (selected item) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #000 !important;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #000 !important;
}

/* Dropdown option list */
.select2-container--default .select2-results__option {
  color: #000 !important;
}

/* Highlighted dropdown option */
.select2-container--default .select2-results__option--highlighted {
  background-color: #facc15 !important;
  color: #000 !important;
}

 



    .search-submit {
        width: 80%;
        max-width: 200px;
    }
     .stats-bar .item {
        flex-direction: column;  /* Label above value */
        gap: 2px;
    }
      .social-buttons {
    flex-direction: column;
    align-items: center;
  }

  .x-follow-button,
  .ig-follow-button {
    width: 100%;
    max-width: 100%;
  }
    
}