.create-rumble-acco-container {
  margin-top: 0;
}

.rum-start-end-date-container .form-label,
.route-title .form-label {
  color: #272735;
  /* font-size: 24px; */
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  margin: 0;
}

.create-accordion-item {
  margin: 10px 0;
  border: 1px solid #f5484d !important;
  border-radius: 4px;
  box-shadow: 0px 0px 3px 0px #00000047 !important;
}

.create-accordion-title {
  background-color: #fff !important;
  border-radius: 4px !important;
}

.create-accordion-title p {
  color: #f5484d !important;
  font-size: 22px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  margin-left: 10px;
}

.create-accordion-title .MuiAccordionSummary-expandIconWrapper {
  color: #f5484d !important;
}

.create-accordion-title .MuiAccordionSummary-expandIconWrapper svg {
  width: 20px;
  height: 20px;
}

.create-accordion-content:not(.new) {
  border: 0 !important;
  padding: 16px 16px 25px 50px !important;
}
.create-accordion-content.new {
  padding: 0px !important;
}
.rumble-main-info-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.rumble-main-info-left-col {
  width: 49%;
}

.rumble-main-info-right-col {
  width: 49%;
}

.map-img {
  width: 100%;
}

.set-rum-title {
  color: #272735;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  margin: 0;
  margin-top: 40px;
}

.rum-create-search-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.create-rum-input-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #6b6b94;
  border-radius: 4px;
  height: 43px;
}

.button-container {
  width: 29%;
}

.search-icon {
  width: 10%;
  display: flex;
  justify-content: center;
}

.create-search-input {
  width: 84%;
}

.search-cancel-btn {
  width: 7%;
  display: flex;
  justify-content: end;
}

.create-search-input input {
  width: 100%;
  /* height: 43px; */
  border: 0;
}

.create-search-input input:focus-visible {
  outline: 0;
}

.search-rum-btn {
  color: #f3f3f3;
  font-size: 30px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #f5484d;
  text-decoration: none;
  padding: 4px 40px;
  border-radius: 4px;
}

.search-rum-btn {
  color: #f3f3f3;
  font-size: 30px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #f5484d;
  text-decoration: none;
  padding: 4px 35px;
  border-radius: 4px;
  border: none;
}

.create-rumble-acco-container .Mui-checked + .MuiSwitch-track,
.add-bouldersdata-container .Mui-checked + .MuiSwitch-track {
  background-color: #b9ff66 !important;
  opacity: 1 !important;
}

.create-rumble-acco-container .MuiSwitch-thumb,
.add-bouldersdata-container .MuiSwitch-thumb {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  background-color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #cacad8;
}

.create-rumble-acco-container .MuiSwitch-thumb.Mui-checked {
  color: white;
}

.sponsor-rum-btn {
  color: #f3f3f3;
  font-size: 30px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #f5484d;
  text-decoration: none;
  padding: 4px 40px;
  border-radius: 4px;
}

.lat-log-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.lat-col,
.log-col {
  width: 49%;
}

.lat-col input,
.log-col input {
  width: 100%;
  height: 45px;
  border: 1px solid #6b6b94;
  border-radius: 4px;
}

.lat-col input:focus-visible,
.log-col input:focus-visible {
  outline: 0;
}

.set-rum-loc-container {
  margin-top: 20px;
}

.set-rum-loc-container button {
  color: #f3f3f3;
  font-size: 30px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  text-decoration: none;
  background-color: #f5484d;
  width: 100%;
  display: block;
  text-align: center;
  padding: 4px;
  border-radius: 4px;
  border: none;
}

.select-rum-container {
  width: 100%;
}

.select-rum-container .MuiFormControl-root {
  width: 100%;
}

.select-rum-container .MuiSelect-select {
  color: #191a23;
  /* font-size: 24px; */
  font-family: "Revive80";
}

.rum-name-visi-container {
  width: 100%;
  display: flex;
  margin-top: 25px;
  justify-content: space-between;
}

.rum-name-col {
  width: 49%;
}

.rum-visi-col {
  width: 49%;
}

.rum-name-visi-container .form-label {
  color: #272735;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  margin: 0;
}

.rum-name-visi-container .form-control {
  height: 45px;
}

.rum-name-visi-container .form-control:focus {
  box-shadow: none;
  border-color: #d9d9d9;
}

.rum-name-visi-container .form-select {
  height: 45px;
}

.rum-name-visi-container .form-select:focus {
  box-shadow: none;
  border-color: #d9d9d9;
}

.rum-start-end-date-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.rum-start-col {
  width: 49%;
}

.rum-end-col {
  width: 49%;
}

.participant-limit-container {
  width: 100%;
  margin-top: 45px;
}

.participant-limit-col {
  width: 49%;
}

.participant-limit-col .form-label {
  color: #272735;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  margin: 0;
}

.participant-limit-col .form-control {
  height: 45px;
}

.participant-limit-col .form-control:focus {
  box-shadow: none;
  border-color: #d9d9d9;
}

.logo-maker-switch-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  padding: 10px 20px;
  border-radius: 4px;
  margin-top: 65px;
}

.logo-maker-switch-col {
  width: 90%;
}

.logo-maker-icon-col {
  width: 10%;
  display: flex;
  justify-content: end;
}

.logo-maker-icon-col img {
  cursor: pointer;
}

.make-logo-container {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-end;
  background-color: #f3f3f3;
  /* padding: 32px; */
  padding: 20px 111px 20px 156px;
}

.select-img-col {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.show-img-col {
  width: 45%;
}

.select-img-col button {
  color: #191a23;
  font-size: 19px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
}

.file-input-container {
  position: relative;
}

.file-input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.file-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #b9ff66;
  color: #191a23;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  font-size: 19px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
}

.select-img-col button {
  color: #191a23;
  font-size: 19px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #b9ff66;
  border: 0;
  padding: 10px 25px;
  border-radius: 4px;
  display: flex;
  margin-top: 25px;
}

.select-img-col button img {
  width: 25px;
  margin-left: 15px;
}

.show-img-col img {
  width: 50%;
}

/* second main accordion */
.score-switch-main-container {
  width: 100%;
  margin: 5px 0;
}

.score-switch-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  padding: 10px 20px;
  border-radius: 4px;
}

.score-switch-col {
  width: 90%;
}

.score-icon-col {
  width: 10%;
  display: flex;
  justify-content: end;
}

.score-icon-col img {
  cursor: pointer;
}

/* timer */
.timer-switch-main-container {
  width: 100%;
  margin: 5px 0;
}

.timer-switch-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  padding: 10px 20px;
  border-radius: 4px;
}

.timer-switch-col {
  width: 90%;
}

.timer-icon-col {
  width: 10%;
  display: flex;
  justify-content: end;
}

.timer-icon-col img {
  cursor: pointer;
}

/* prize */
.prize-switch-main-container {
  width: 100%;
  margin: 5px 0;
}

.prize-switch-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  padding: 10px 20px;
  border-radius: 4px;
}

.prize-switch-col {
  width: 90%;
}

.prize-icon-col {
  width: 10%;
  display: flex;
  justify-content: end;
}

.prize-icon-col img {
  cursor: pointer;
}

/* score-hide-container */
.score-hide-container {
  padding: 25px 110px;
}

.score-hide-container .MuiAccordionSummary-content,
.create-accordion-content .MuiAccordionSummary-content {
  display: flex;

  justify-content: space-between;
}

.under-acc-item {
  margin: 7px 0;
  border: 1px solid #c9c9c9 !important;
  border-radius: 4px;
}

.score-hide-container .MuiButtonBase-root {
  background-color: #ffffff;
  border-radius: 4px;
}

.score-hide-container .MuiSvgIcon-root {
  width: 20px;
  height: 20px;
}

.under-acc-title {
  color: #161c2d;
  font-size: 20px !important;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: bold;
  margin-left: 15px !important;
}

.score-hide-container .MuiAccordionDetails-root,
.create-accordion-content .MuiAccordionDetails-root {
  border: 0;
  padding: 25px 25px 25px 60px;
}

.under-acc-content {
  color: #161c2d;
  font-size: 17px !important;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: normal;
  /* width: 80%; */
}

.select-formate-btn {
  color: #f3f3f3;
  font-size: 13px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #f5484d;
  border: 0;
  border-radius: 4px;
}

.select-formate-btn.active {
  background-color: rgba(185, 255, 102, 1);
  color: rgba(25, 26, 35, 1);
}

/* timer-hide-container */
.timer-hide-container {
  display: flex;
  justify-content: space-between;
}

.diff_league_modal .timer-hide-container {
  /* padding removed */
}

.delay-timer-col {
  width: 48%;
}

.time-availb-col {
  width: 48%;
}

.delay-timer-col p,
.time-availb-col p {
  color: #272735;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  margin: 0;
  margin-bottom: 8px;
}

.delay-timer-col .form-label,
.duration-row .form-label {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  font-size: 1rem;
}

.delay-timer-col input,
.time-availb-col input {
  width: 100%;
  height: 48px;
  padding: 10px;
  border: 1px solid #6b6b94;
  border-radius: 4px;
}

.delay-timer-col input:focus-visible,
.time-availb-col input:focus-visible {
  outline: 0;
}

/* prize-hide-container */
.prize-hide-container {
  padding: 50px 110px;
  display: flex;
}

.prize-img-col {
  width: 35%;
  padding-right: 50px;
}

.prize-detail-col {
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.prize-img-col img {
  width: 100%;
  border-radius: 4px;
}

.prize-detail-col textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  border: 1px solid #6b6b94;
  border-radius: 4px;
}

.prize-detail-col textarea:focus-visible {
  outline: 0;
}

.prize-detail-col input[type="text"] {
  width: 100%;
  height: 48px;
  padding: 10px;
  border: 1px solid #6b6b94;
  border-radius: 4px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  font-size: 16px;
}

.prize-detail-col input[type="text"]:focus-visible {
  outline: 0;
}

.prize-btn-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.prize-btn-container button {
  color: #191a23;
  font-size: 19px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #b9ff66;
  border: 0;
  padding: 10px 25px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.prize-btn-container button img {
  width: 25px;
  margin-left: 15px;
}

/* last accordion */
/* realtime */
/* COMMENTED OUT - Refactored to .option-switch-row
.realtime-leaderboard-container {
  width: 100%;
  margin: 0;
}
*/

/* COMMENTED OUT - Refactored to .option-switch-wrapper
.realtime-switch-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  padding: 10px 20px;
  border-radius: 4px;
}
*/

.realtime-content-expanded {
  background-color: #f8f9fa;
  padding: 15px 20px;
  border: 1px solid #e7e9ed;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* COMMENTED OUT - Refactored to .option-switch-content
.realtime-switch-col {
  width: 90%;
}
*/

/* COMMENTED OUT - Refactored to .option-switch-actions
.realtime-icon-col {
  width: 10%;
  display: flex;
  justify-content: end;
}

.realtime-icon-col img {
  cursor: pointer;
}
*/

/* gender */
/* COMMENTED OUT - Refactored to .option-switch-row
.gender-leaderboard-container {
  width: 100%;
  margin: 0;
}
*/

/* COMMENTED OUT - Refactored to .option-switch-wrapper
.gender-switch-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  padding: 10px 20px;
  border-radius: 4px;
}
*/

/* COMMENTED OUT - Refactored to .option-switch-content
.gender-switch-col {
  width: 90%;
}
*/

/* COMMENTED OUT - Refactored to .option-switch-actions
.gender-icon-col {
  width: 10%;
  display: flex;
  justify-content: end;
}

.gender-icon-col img {
  cursor: pointer;
}
*/

/* age */
/* COMMENTED OUT - Refactored to .option-switch-row
.age-leaderboard-container {
  width: 100%;
  margin: 0;
}
*/

/* COMMENTED OUT - Refactored to .option-switch-wrapper
.age-switch-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  padding: 10px 20px;
  border-radius: 4px;
}
*/

/* COMMENTED OUT - Refactored to .option-switch-content
.age-switch-col {
  width: 90%;
}
*/

/* COMMENTED OUT - Refactored to .option-switch-actions
.age-icon-col {
  width: 10%;
  display: flex;
  justify-content: end;
}

.age-icon-col img {
  cursor: pointer;
}
*/

/* age-hide-container */
.age-hide-container {
  padding: 50px 110px;
  /* display: flex; */
}

.age-first-row,
.age-second-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.age-second-row {
  margin-top: 20px;
}

.activeu10-container {
  width: 32%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
}

.activeu10-switch-col {
  width: 90%;
}

.activeu10-icon-col {
  width: 10%;
  display: flex;
  justify-content: end;
}

.activeu10-icon-col img {
  cursor: pointer;
}

.flash-rumble-ruls-container {
  margin-top: 120px;
  padding-bottom: 120px;
}

.flash-rumble-ruls-main-heading {
  /* color: black;
  font-size: 32px;
  font-family: "Revive80";
  margin: 0; */
  margin: 0;
  color: #f5484d !important;
  font-size: 22px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
}

.rumble-ruls-box {
  /* background-image: url("../../assets/media/backgroundR.png"); */
  background-color: #f3f3f3;
  padding: 40px;
  border-radius: 4px;
  margin-top: 50px;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  background-position: center;
  background-size: contain;
}

.rumble-ruls-box .accordion-button {
  flex-direction: row-reverse;
  justify-content: flex-end;
  width: auto;
  padding-left: 2px;
}

.rumble-ruls-box .accordion-button::after {
  height: 1rem;

  background-size: 1rem;
  margin-right: 7px;
  transform: rotate(270deg);
}

.rumble-ruls-box .accordion-button:not(.collapsed)::after {
  transform: rotate(0deg);
}

.rumble-save-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 115px;
}

.rumble-save-btn {
  color: white;
  font-size: 31px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  padding: 20px 35px;
  background-color: #f5484d;
  border: 0;
  border-radius: 4px;
}

.rumble-ruls-title {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #191a23;
  margin: 0;
}

.rumble-ruls-org {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #191a23;
  margin: 0;
  font-style: italic;
}

.rumble-ruls-sub-he {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #191a23;
  margin: 0;
  margin-top: 20px;
}

.rumble-detail-acc-container .accordion {
  background-color: transparent;
}

.rumble-detail-acc-container .accordion-item {
  background-color: transparent;
}

.rumble-detail-acc-container .accordion-button {
  background-color: transparent;
}

.parti-input {
  position: absolute;
  right: 75px;
  top: 93px;
  width: 70px;
  padding: 10px;
  height: 42px !important;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* COMMENTED OUT - Uses old class names (refactored to .option-switch-actions)
/* When parti-input is inside realtime-icon-col (rightElement in OptionSwitch) */
/* .realtime-icon-col .parti-input {
  position: static;
  right: auto;
  top: auto;
  margin-right: 8px;
  width: 70px;
  height: 42px !important;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  align-items: center;
} */

/* Adjust realtime-icon-col width when it contains parti-input */
/* .realtime-icon-col:has(.parti-input) {
  width: auto;
  min-width: fit-content;
} */

.currency-select {
  width: 70px;
}

.setRegiFee-hide-container {
  display: flex;
  gap: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  align-items: flex-start;
}

.setRegiFee-left-col {
  width: 65%;
  flex-shrink: 0;
}

.setRegiFee-right-col {
  width: 35%;
  flex-grow: 1;
}

.setRegiFee-right-col p {
  color: #f8f9fa;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.paypal-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.satispay-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  margin-top: 5px;
  padding: 13px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.legue-first-acc-main-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.legue-first-acc-left-col {
  width: 48%;
}

.legue-first-acc-right-col {
  width: 48%;
}

.same-formate-container {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e7e9ed;
  background-color: #fff;
  padding: 14px 20px;
  border-radius: 4px;
}

.legue-first-acc-left-col .form-label {
  margin-top: 33px;
  color: #272735;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
}

.legue-first-acc-left-col .form-control {
  width: 50%;
}

.legue-first-acc-left-col p {
  color: #272735;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
}

.legue-first-acc-right-col p {
  color: #272735;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
}

.climbing-heading {
  color: black;
  font-size: 24px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  margin: 0;
}

.climbing-content {
  color: #161c2d;
  font-size: 18px;
  margin: 0;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  margin-top: 35px;
}

.league-boulders-data-container {
  width: 90%;
  margin: 0 auto;
  margin-top: 40px;
}

.league-boulders-data-filter-container {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
}

.league-boulders-filter-icon {
  margin-right: 10px;
}

.league-boulders-data-box {
  width: 100%;
  margin-top: 10px;
  padding: 0 20px;
  box-shadow: 0px 0px 6px 1px #0000001c;
  border-radius: 4px;
}

.league-boulders-data-box-row {
  display: flex;
  align-items: center;
  padding: 10px 0px;
}

.league-boulder-img {
  width: 10%;
}

.league-boulder-title {
  width: 25%;
}

.league-boulder-points {
  width: 10%;
}

.league-boulder-att-limit {
  width: 20%;
}

.league-boulder-complate {
  width: 15%;
}

.league-boulder-icons-container {
  width: 20%;
  display: flex;
  justify-content: end;
}

.league-boulder-img img {
  border-radius: 50px;
  width: 60%;
}

.league-boulder-title a {
  text-decoration: none;
}

.league-boulder-title h3 {
  color: #333333;
  font-size: 20px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  margin: 0;
}

.league-boulder-points p {
  color: #333333;
  font-size: 14px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  margin: 0;
}

.league-boulder-att-limit p {
  color: #333333;
  font-size: 14px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  margin: 0;
}

.league-boulder-complate p {
  color: #333333;
  font-size: 14px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  margin: 0;
}

.league-boulders-data-box-setting-icon {
  cursor: pointer;
}

.league-boulders-data-box-close-icon {
  margin-left: 10px;
}

.add-stage-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40px 0px;
}

.add-stage-btn {
  color: #f3f3f3;
  font-size: 30px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  margin: 0;
  text-decoration: none;
  background-color: #f5484d;
  padding: 0px 20px;
  border-radius: 4px;
  border: 0;
}

/* legue model */
.modal-header {
  border-bottom: 0;
}

.modal-header .modal-title {
  color: #f5484d;
  font-size: 30px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
}

.league-save-btn-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.league-save-btn-container button {
  color: #f3f3f3;
  font-size: 30px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #f5484d;
  border: 0;
  padding: 0px 15px;
  border-radius: 4px;
}

.league-save-btn-container-dfleague {
  text-align: center;
}

.league-save-btn-container-dfleague button {
  color: #f3f3f3;
  font-size: 30px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #f5484d;
  border: 0;
  padding: 0px 15px;
  border-radius: 4px;
}

.league-save-btn-container button img {
  margin-left: 10px;
}

.legue-not-checked-warning-container {
  /* width: 46%; */
  display: flex;
  align-items: center;
  background: rgba(33, 37, 41, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  /* position: absolute; */
  top: 75px;
  right: 12px;
}

.legue-not-checked-icon-col {
  width: auto;
  margin-right: 8px;
}

.legue-not-checked-icon-col img {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.legue-not-checked-content-col {
  width: auto;
  flex: 1;
}

.legue-not-checked-close-col {
  width: auto;
  text-align: end;
  margin-left: 8px;
}

.legue-not-checked-close-col img {
  cursor: pointer;
}

.legue-not-checked-warning {
  color: #f8f9fa !important;
  font-size: 13px !important;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: normal;
  margin: 0;
  font-weight: 500;
}
.step-rumble-wrn-text {
  color: #f8f9fa !important;
  font-size: 11px !important;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: normal;
  margin: 0;
  opacity: 0.8;
}

.legue-not-checked-text {
  color: #adb5bd !important;
  font-size: 11px !important;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 300;
  margin: 0;
}

.createrumble-map-sec {
  border-radius: 4px;
  /* height: 560px; */
  height: 325px;
}

span.MuiTypography-root.MuiTypography-body1.MuiFormControlLabel-label,
.route-setting-div .form-label {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  font-weight: 500;
}

.tooltip-p {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  width: 0.5em;
  opacity: 0.5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

.rum-name-col.full-width {
  width: 100%;
}

.timer-hide-container.timer-diff-format .mrr {
  margin-right: 15px;
}

.search-rum-btn.edit-delete-btn {
  width: 95px;
  margin: 5px auto !important;
}

.fee_info p {
  font-family: 'DINLight', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 100;
  font-size: 12px;
  color: #f8f9fa;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.fee_charges p {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #f8f9fa;
}

.fee_charges p span {
  color: #b9ff66;
  font-weight: 500;
}

.fee_charges span {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
}

.fee_charges {
  background-color: #fff;
  border-radius: 4px;
  padding: 15px 0px 10px 0px;
}


/* Sticky Menu Bar - Toggle Bar Style */
/* NOTE: position, top and margin are handled by the StickyMenuBar component logic */
.sticky-menu-bar {
  /* position: sticky; -- Removed to avoid conflict with component logic */
  /* top: 0; -- Removed to avoid conflict with component logic */
  /* margin: 20px 0; -- Removed to avoid conflict with component logic */
  z-index: 100;
  display: flex;
  justify-content: center;
}

.sticky-menu-bar #mainToggleContainer {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 48px;
  display: flex;
  align-items: center;
  padding: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 9999px;
  width: fit-content;
  margin: 0 auto;
}

.sticky-menu-bar #normalToggleView {
  height: 40px;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.sticky-menu-bar .toggle-view-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sticky-menu-bar .toggle-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 40px;
  min-width: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 20px;
  overflow: hidden;
}

.sticky-menu-bar .toggle-button:hover:not(.active) {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}

/* Active state for Basics button */
.sticky-menu-bar .toggle-button.active[data-mode="basics"] {
  background: linear-gradient(to right, #ff4757, #dc2626) !important;
  color: white;
  width: auto;
  padding: 8px 16px;
  gap: 8px;
  font-size: 14px;
}

/* Active state for Details button */
.sticky-menu-bar .toggle-button.active[data-mode="details"] {
  background: linear-gradient(to right, #9747ff, #7c3aed) !important;
  color: white;
  width: auto;
  padding: 8px 16px;
  gap: 8px;
  font-size: 14px;
}

/* Completed state */
.sticky-menu-bar .toggle-button.completed {
  background: rgba(164, 255, 0, 0.1);
  color: #a4ff00;
  border: 1px solid rgba(164, 255, 0, 0.3);
}

.sticky-menu-bar .toggle-button.completed:hover {
  background: rgba(164, 255, 0, 0.15);
}

/* Button text */
.sticky-menu-bar .toggle-button .button-text {
  display: none;
}

.sticky-menu-bar .toggle-button.active .button-text {
  display: inline;
}

/* Icons */
.sticky-menu-bar .toggle-button .step-icon,
.sticky-menu-bar .toggle-button .step-check {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.sticky-menu-bar .toggle-button.active .step-icon {
  transform: scale(1.1);
}

.sticky-menu-bar .step-check {
  font-size: 18px;
  font-weight: bold;
  color: #a4ff00;
}

/* Desktop specific */
@media (min-width: 768px) {
  .sticky-menu-bar #mainToggleContainer {
    min-width: fit-content;
  }

  .sticky-menu-bar .toggle-button:not(.active) .button-text {
    display: inline !important;
    opacity: 0.8;
  }

  .sticky-menu-bar .toggle-button.active .button-text {
    opacity: 1;
  }

  .sticky-menu-bar .toggle-button {
    width: auto;
    padding: 8px 16px;
  }

  .sticky-menu-bar .toggle-view-buttons {
    gap: 12px;
  }
}

/* Mobile specific */
@media (max-width: 767px) {
  .sticky-menu-bar {
    padding: 0 16px;
  }

  .sticky-menu-bar #mainToggleContainer {
    width: 100%;
    margin: 0;
  }

  .sticky-menu-bar #normalToggleView {
    justify-content: space-between;
    gap: 8px;
  }

  .sticky-menu-bar .toggle-view-buttons {
    flex: 1;
    justify-content: space-around;
    gap: 8px;
  }

  .sticky-menu-bar .toggle-button {
    flex: 1;
    min-width: 40px;
  }

  .sticky-menu-bar .toggle-button .button-text.hidden {
    display: none !important;
  }

  .sticky-menu-bar .toggle-button.active .button-text.hidden {
    display: none !important;
  }

  .sticky-menu-bar .toggle-button.active .button-text:not(.hidden) {
    display: inline;
  }
}

/* Edit mode button (Save and Go Rumble!) */
button.edit-mode-btn {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  border-radius: 4px;
  border: none;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 16px;
  color: white !important;
  height: 100%;
  transition: all 0.2s ease;
  cursor: pointer;
}

button.edit-mode-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff3742 0%, #ff2837 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 71, 87, 0.3);
}

button.edit-mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* Cancel button */
button.cancel-btn {
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  border: none;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 16px;
  color: #f8f9fa;
  height: 100%;
  transition: all 0.2s ease;
  cursor: pointer;
}

button.cancel-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

button.cancel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}


.rumble-map-suggestion.dropdown-menu a {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.select-participant-dp.add-ranking {
  background-color: #fff;
  height: 48px;
  padding: 10px;
  border: 1px solid #6b6b94;
  border-radius: 4px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dark-mode-active .select-participant-dp.add-ranking {
  background-color: rgb(255,255,255,0.05);
}

.adddata-participants-data-box-row {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.rules-section-acc h2.accordion-header,
.s-logic {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
}
.fregular {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.rumble-ruls-box ul p,
.ong-rule-ul-li p {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
}
.rules-section-acc .accordion-item {
  border-bottom: 0;
}

.rules-section-acc .accordion-button:not(.collapsed) {
  box-shadow: none !important;
}
span.rule-text-bold {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  text-transform: capitalize !important;
}

.dark-mode-active .accordion-button:not(.collapsed)::after {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpath d=%27M2 5L8 11L14 5%27/%3e%3c/svg%3e");
}
button.advance-option-btn {
  color: #f3f3f3;
  font-size: 20px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  background-color: #f5484d;
  text-decoration: none;
  /* padding: 4px 35px; */
  border-radius: 4px;
  border: none;
  width: 100%;
}
button.advance-option-btn.add-boulder-setting-page{
  width: 90%;
}

/* ========================================
   ADVANCED OPTIONS CONTAINER STYLING
   ======================================== */

/* Advanced Options Wrapper */
.advanced-options-wrapper {
  margin-top: 20px;
  transition: all 0.3s ease;
  position: relative;
}

/* Add unified shadow and gradient when expanded */
.advanced-options-wrapper.expanded {
  /* Apply the gradient to entire wrapper */
  background: linear-gradient(-90deg, 
    rgb(120 50 50 / 20%) 0%, 
    rgb(40 20 20 / 90%) 50%, 
    rgb(40 20 20 / 50%) 100%
  );
  
  /* Keep the unified appearance */
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-radius: 4px;
  
  /* Add the red border to the entire wrapper */
  border: 1px solid rgba(255, 71, 87, 0.3);
}

/* Advanced Options Toggle Button */
.advance-option-toggle {
  width: 100%;
  padding: 16px 24px;
  /* Gradient trasparente come mobile */
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.2) 0%, 
    rgba(255, 0, 0, 0.1) 100%
  );
  color: #f3f3f3;
  font-size: 20px;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  font-weight: 200;
  /* Bordo rosso sottile */
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  /* Backdrop blur per effetto premium */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Position chevron icon absolutely */
.advance-option-toggle i {
  position: absolute;
  right: 24px;
}

.advance-option-toggle:hover {
  /* Gradient più intenso al hover */
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.3) 0%, 
    rgba(255, 0, 0, 0.2) 100%
  );
  border-color: rgba(255, 0, 0, 0.4);
}

.advance-option-toggle:active {
  /* Gradient ancora più intenso al click */
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.35) 0%, 
    rgba(255, 0, 0, 0.25) 100%
  );
  border-color: rgba(255, 0, 0, 0.5);
}

.advance-option-toggle .toggle-text {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1;
  justify-content: center;
}

/* When expanded, adjust button styling */
.advanced-options-wrapper.expanded .advance-option-toggle {
  border-radius: 4px 4px 0 0;
  /* Transparent background when expanded */
  background: transparent !important;
  
  /* No border when expanded */
  border: none !important;
  
  /* Remove glassmorphism effect when expanded */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  overflow: hidden;
  
  /* Remove shadow */
  box-shadow: none;
  
  /* Ensure no margin gaps */
  margin-bottom: 0;
}

/* Remove overlay - no longer needed */
.advanced-options-wrapper.expanded .advance-option-toggle::before {
  display: none;
}

/* Ensure text stays above overlay */
.advanced-options-wrapper.expanded .advance-option-toggle > * {
  position: relative;
  z-index: 1;
}

.advanced-options-wrapper.expanded .advance-option-toggle:hover {
  /* Transparent background on hover when expanded */
  background: transparent !important;
}

/* Advanced Options Container - Transparent */
.advanced-options-container {
  /* No background fill - transparent */
  background: transparent !important;
  
  /* Remove border since wrapper has it */
  border: none !important;
  
  /* Keep minimal padding */
  padding: 8px;
  border-radius: 0 0 4px 4px;
  margin-top: 0;
  position: relative;
  
  /* Remove shadow - wrapper has it */
  box-shadow: none !important;
  
  /* Keep animation */
  animation: slideDown 0.3s ease-out;
  overflow: hidden;
  
  /* Remove any backdrop filters */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Remove gradient overlay - no longer needed */
.advanced-options-container::before {
  display: none;
}

/* Remove gradient border effect - wrapper handles borders now */
.advanced-options-container::after {
  display: none;
}

/* Animation for smooth expansion */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure panels inside have proper styling with no offset */
.advanced-options-container .panel-container {
  background: transparent !important; /* Keep transparent to show gradient */
  box-shadow: none !important;
  position: relative;
  z-index: 2;
  margin: 0; /* No margin - panels flush with container */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.advanced-options-container .panel-content {
  /* Darker background to match advanced options theme */
  background: rgb(30, 33, 37) !important;
  border: none !important; /* Remove all borders */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.advanced-options-container .panel-header {
  /* Darker background to match advanced options theme */
  background: rgb(30, 33, 37);
  border: none; /* Remove all borders */
}

.advanced-options-container .panel-header:hover {
  background: rgb(30, 33, 37); /* Keep same dark background on hover */
}

/* Force remove borders from all accordion elements */
.advanced-options-container .panel,
.advanced-options-container .panel-header,
.advanced-options-container .panel-content,
.advanced-options-container .accordion-item,
.advanced-options-container .accordion-button,
.advanced-options-container .accordion-body {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Remove the old advance-option-btn styling in LeagueEdit since we're replacing it */
.league-edit-panels ~ .advance-option-btn {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .advance-option-toggle {
    padding: 12px 16px;
    font-size: 18px;
  }
  
  .advanced-options-container {
    padding: 8px;
  }
}

/* ========================================
   DARKER COLORS FOR ADVANCED OPTIONS ACCORDION ELEMENTS
   ======================================== */

/* Override default accordion/panel colors when inside advanced options */
.advanced-options-container .MuiAccordion-root,
.advanced-options-container .MuiAccordionSummary-root,
.advanced-options-container .MuiAccordionDetails-root,
.advanced-options-container .accordion-item,
.advanced-options-container .accordion-button,
.advanced-options-container .accordion-collapse,
.advanced-options-container .accordion-body,
.advanced-options-container .create-accordion-item,
.advanced-options-container .create-accordion-title,
.advanced-options-container .create-accordion-content,
.advanced-options-container .adddata-create-accordion-item,
.advanced-options-container .adddata-create-accordion-title,
.advanced-options-container [class*="accordion"] {
  background-color: rgb(30, 33, 37) !important;
  background: rgb(30, 33, 37) !important;
}

/* Ensure panel backgrounds are also darker */
.advanced-options-container .panel,
.advanced-options-container .panel-header,
.advanced-options-container .panel-content,
.advanced-options-container .panel-body,
.advanced-options-container [class*="panel"]:not(.panel-container) {
  background-color: rgb(30, 33, 37) !important;
  background: rgb(30, 33, 37) !important;
}

/* For any MUI Paper components inside */
.advanced-options-container .MuiPaper-root {
  background-color: rgb(33,37,41) !important;
}

/* Override any elements that might have the old color */
.advanced-options-container *[style*="rgb(33,37,41)"],
.advanced-options-container *[style*="#212529"] {
  background-color: rgb(33,37,41) !important;
}

/* Remove hover effects - keep original background */
.advanced-options-container .panel-header:hover,
.advanced-options-container .accordion-button:hover,
.advanced-options-container .MuiAccordionSummary-root:hover {
  background-color: rgb(30, 33, 37) !important;
  background: rgb(30, 33, 37) !important;
}

/* Make accordion arrow containers transparent */
.advanced-options-container .accordion-button::after,
.advanced-options-container .accordion-button::before,
.advanced-options-container .MuiAccordionSummary-expandIcon,
.advanced-options-container .MuiAccordionSummary-expandIconWrapper,
.advanced-options-container .accordion-expand-icon,
.advanced-options-container [class*="expand-icon"],
.advanced-options-container [class*="chevron"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Target MUI expand icon wrappers more specifically */
.advanced-options-container .MuiAccordionSummary-expandIconWrapper,
.advanced-options-container [class*="MuiAccordionSummary-expandIconWrapper"],
.advanced-options-container [class*="expandIconWrapper"],
.advanced-options-container .MuiAccordionSummary-root .MuiAccordionSummary-expandIconWrapper,
.advanced-options-container .MuiAccordionSummary-root [class*="expandIconWrapper"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Also target the SVG icons inside */
.advanced-options-container .MuiAccordionSummary-expandIconWrapper svg,
.advanced-options-container [class*="expandIconWrapper"] svg {
  background-color: transparent !important;
  background: transparent !important;
}

button.stage-add-pls {
  width: unset !important;
}

/* COMMENTED OUT - Uses old class name (refactored to .option-switch-row)
/* Fix: Prevent participant limit input from getting dark background */
/* .dark-mode-active .realtime-leaderboard-container .parti-input {
  background: rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
} */

/* Dark mode style for expanded content */
.dark-mode-active .realtime-content-expanded {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: transparent;
}
.category-suggestion-list {
  /* Dark background with glassmorphism */
  background-color: rgba(23, 25, 28, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
}
.selected-list {
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
}
.selected-list button {
  font-size: 16px;
}

body:not(.dark-mode-active) .selected-list button,
body:not(.dark-mode-active) .category-suggestion-list button {
  color: rgba(0, 0, 0, 0.87);
  border-color: rgba(0, 0, 0, 0.87);
}
body:not(.dark-mode-active) .category-suggestion-list {
  color: rgba(0, 0, 0, 0.87);
  /* Keep glassmorphism background in light mode too */
  background-color: rgba(23, 25, 28, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.87) !important;
}

.add-btn-style {
  border-radius: 4px;
  border: none;
  padding: 3px 20px 3px 20px;
  font-size: 19px;
  background-color: #f5484d;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  color: #f3f3f3;
  margin: 0 auto;
  display: block;
}
.legal-wrn-text {
  text-align: center;
  color: #f3f3f3;
  opacity: 70%;
  font-family: 'DINLight', 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 100;
  font-size: 16px;
}
.add-edit-new-btn {
  background-color: #f5484d !important;
  color: #fff !important;
  padding: 5px 10px !important;
  font-size: 19px;
  border-radius: 4px !important;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  border: 0px;
  cursor: pointer;
}

.cancel-new-btn {
  background-color: rgb(33, 37, 41) !important;
  color: #fff !important;
  padding: 5px 10px !important;
  font-size: 19px;
  border-radius: 4px !important;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  border: 0px;
  text-transform: uppercase;
}

.select-img-preview {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  /* Remove padding from buttons on mobile */
  .next-step-btn.p-1.p-md-2,
  .cancel-btn.p-1.p-md-2,
  .edit-mode-btn.p-1.p-md-2,
  .save-and-exit-btn.p-1.p-md-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  
  /* Mobile layout - stepper-row rimosso, progress-steps integrati */
  
  button.next-step-btn,
  button.save-and-exit-btn,
  button.edit-mode-btn,
  button.cancel-btn {
    font-size: 10px;
    padding: 6px 8px;
    height: 100%;
    min-height: auto;
  }

  .rum-name-col.two-col {
    width: 69%;
  }

  .rum-name-col.full-width {
    width: 100%;
  }

  .rum-name-col.duration {
    width: 100%;
  }

  .rum-name-visi-container .participant-limit-col {
    width: 30%;
  }

  .timer-hide-container.timer-diff-format .mrr {
    margin-right: 0px;
  }

  .add-sponsor-dev .prize-img-col.d-flex {
    display: block !important;
  }

  /* -prize-*/
  .prize-hide-container {
    padding: 20px;
    display: block;
    text-align: center;
  }

  .prize-img-col {
    width: 100%;
    margin-bottom: 16px;
  }

  .prize-detail-col {
    width: 100%;
    display: block;
    margin-top: 16px;
  }

  .prize-img-col img {
    width: 50%;
    border-radius: 4px;
  }

  .prize-detail-col textarea {
    width: 100%;
    height: 200px;
    padding: 10px;
    border: 1px solid #6b6b94;
    border-radius: 4px;
    margin: 0 auto;
  }

  .prize-btn-container {
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }

  .prize-btn-container button {
    color: #191a23;
    font-size: 19px;
    font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
    background-color: #b9ff66;
    border: 0;
    padding: 10px 25px;
    border-radius: 4px;
    margin: 0 auto;
  }

  /* -prize-*/

  /* -Marker logo- */
  .make-logo-container {
    display: block;
    text-align: center;
    padding: 16px;
  }

  .show-img-col img {
    width: 50%;
  }

  .show-img-col {
    width: 100%;
    margin-bottom: 16px;
  }

  .select-img-col {
    width: 100%;
    display: block;
  }

  .file-input-container {
    margin: 0 auto;
  }

  .select-img-col button {
    width: 100%;
    /* margin: 0 auto; */
    padding: 10px 0;
    display: block;
  }

  .file-label {
    display: inline-block;
    margin: 0 auto;
  }

  /* -Marker logo- */

  .add-sponsor-dev {
    display: block !important;
    text-align: center !important;
  }

  .createrumble-map-sec {
    height: 340px;
  }

  .create-rumble-acco-container {
    margin-top: 100px; /* Increased for fixed header on mobile */
    padding: 0 10px;
  }

  .create-accordion-content:not(.new) {
    border: 0 !important;
    padding: 10px !important;
  }

  .rumble-main-info-container {
    width: 100%;
    /* display: block; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .rumble-main-info-left-col {
    width: 100%;
    order: 2;
  }

  .rumble-main-info-right-col {
    width: 100%;
    margin-top: 15px;
    order: 1;
  }

  .rum-create-search-container {
    display: block;
  }

  .create-rum-input-container {
    width: 100%;
  }

  .button-container {
    width: 100%;
    margin-top: 10px;
  }

  .search-rum-btn {
    font-size: 24px;
  }

  .set-rum-loc-container a {
    font-size: 24px;
  }

  .select-rum-container .MuiSelect-select {
    font-size: 16px;
  }

  .rum-name-visi-container .form-label {
    font-size: 16px;
  }

  .rum-start-end-date-container .form-label {
    font-size: 16px;
  }

  .participant-limit-container {
    width: 100%;
    margin-top: 15px;
  }

  .participant-limit-col .form-label {
    font-size: 18px;
  }

  .logo-maker-switch-container {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .file-label {
    font-size: 16px;
  }

  .select-img-col button {
    font-size: 16px;
    padding: 10px 22px;
  }

  .score-hide-container {
    padding: 10px;
  }

  .under-acc-title {
    font-size: 14px !important;
  }

  .select-formate-btn {
    font-size: 10px;
    padding: 5px;
  }

  .score-hide-container .MuiAccordionDetails-root,
  .create-accordion-content .MuiAccordionDetails-root {
    padding: 10px 10px 10px 55px;
  }

  .under-acc-content {
    font-size: 14px !important;
  }

  .timer-hide-container {
    display: block;
  }

  .delay-timer-col {
    width: 100%;
  }

  .time-availb-col {
    width: 100%;
    margin-top: 10px;
  }

  .delay-timer-col p,
  .time-availb-col p {
    font-size: 18px;
  }

  .prize-hide-container {
    padding: 10px;
  }

  .prize-img-col {
    padding-right: 10px;
  }

  .prize-btn-container {
    display: block;
  }

  .prize-btn-container button {
    margin-top: 10px;
    font-size: 16px;
    width: 160px;
    display: flex;
    justify-content: center;
  }

  .age-hide-container {
    padding: 10px;
  }

  .age-first-row,
  .age-second-row {
    display: block;
  }

  .activeu10-container {
    width: 100%;
  }

  .flash-rumble-ruls-container {
    margin-top: 50px;
    /* margin-bottom: 50px; */
    padding: 0 10px 50px;
  }

  .flash-rumble-ruls-main-heading {
    font-size: 22px;
  }

  .rumble-ruls-box {
    padding: 15px;
    margin-top: 20px;
    background-size: cover;
  }

  .rumble-save-btn-container {
    margin-top: 50px;
  }

  .rumble-save-btn {
    font-size: 15px;
    padding: 15px 15px;
  }

  .parti-input {
    right: 65px;
    top: 88px;
    width: 70px;
    height: 42px !important;
  }

  /* COMMENTED OUT - Uses old class name (refactored to .option-switch-actions)
  /* Mobile styles for parti-input inside realtime-icon-col */
  /* .realtime-icon-col .parti-input {
    width: 60px;
    height: 38px !important;
    padding: 6px 10px;
    font-size: 14px;
    margin-right: 4px;
  } */

  .setRegiFee-hide-container {
    flex-direction: column;
    gap: 20px;
    padding: 20px 15px;
  }

  .setRegiFee-left-col {
    width: 100%;
    order: 2; /* Appears second on mobile */
  }

  .setRegiFee-right-col {
    width: 100%;
    margin-top: 0;
    order: 1; /* Appears first on mobile */
  }

  .setRegiFee-right-col p {
    font-size: 18px;
  }
  
  /* Fix mobile width and gap for amount/currency inputs */
  .entry-fee-currency-row {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important; /* Remove Bootstrap negative margins */
    margin-right: 0 !important;
    margin-bottom: 1rem !important; /* Add spacing before fee_charges */
  }
  
  .entry-fee-currency-row .col-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 1 1 0 !important; /* Equal width columns accounting for gap */
    max-width: none !important; /* Override Bootstrap max-width */
  }
  
  /* Remove margin from form groups on mobile */
  .entry-fee-currency-row .mb-3 {
    margin-bottom: 0 !important;
  }
  
  /* Keep fee_charges font size same as desktop on mobile */
  .fee_charges p {
    font-size: 12px !important; /* Same as desktop */
  }
  
  /* Override margin-top on mobile for proper alignment */
  .setRegiFee-right-col .fee_charges {
    margin-top: 0 !important;
  }
  
  /* Payment logo mobile adjustments */
  .payment-logo-wrapper {
    margin-top: 1rem;
  }
  
  .payment-logo {
    padding: 0.75rem;
  }
  
  .payment-logo p {
    font-size: 12px !important;
  }

  .currency-select {
    width: 100px;
  }

  .sponsor-row {
    display: block !important;
  }

  .button-container {
    text-align: center;
  }

  .sponsor-rum-btn {
    font-size: 22px;
    border-radius: 4px;
  }

  .legue-first-acc-main-container {
    display: block;
  }

  .legue-first-acc-left-col {
    width: 100%;
  }

  .legue-first-acc-right-col {
    width: 100%;
    margin-top: 10px;
  }

  .legue-first-acc-left-col p {
    font-size: 16px;
  }

  .same-formate-container {
    padding: 6px 15px;
  }

  .legue-first-acc-right-col p {
    font-size: 16px;
  }

  .legue-first-acc-left-col .form-label {
    font-size: 18px;
  }

  .legue-first-acc-left-col .form-control {
    width: 100%;
  }

  .legue-not-checked-warning-container {
    width: 95%;
    top: 200px;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding: 10px;
  }

  .legue-not-checked-warning {
    font-size: 16px !important;
  }

  .legue-not-checked-text {
    font-size: 14px !important;
  }

  .climbing-heading {
    font-size: 18px;
  }

  .climbing-content {
    font-size: 16px;
    margin-top: 10px;
  }

  .league-boulders-data-container {
    width: 100%;
  }

  .add-stage-button-container {
    margin: 30px 0px;
  }

  .add-stage-btn {
    font-size: 24px;
    border-radius: 4px;
  }

  .league-boulder-img {
    width: 15%;
  }

  .league-boulder-title h3 {
    font-size: 14px;
  }

  .league-boulder-points p {
    font-size: 10px;
  }

  .league-boulder-att-limit p {
    font-size: 10px;
  }

  .league-boulder-complate p {
    font-size: 10px;
  }

  .league-boulders-data-box-setting-icon {
    cursor: pointer;
    width: 30%;
    height: 30%;
  }

  .league-boulders-data-box-close-icon {
    cursor: pointer;
    margin-left: 10px;
    width: 30%;
    height: 30%;
  }
}

/* Event Cover Image - Inline Compact Layout */
.event-cover-image-section {
  margin: 1rem 0;
}

.cover-image-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.cover-image-header h6 {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
}

.optional-badge {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.upload-btn-inline {
  background: #f5484d;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s;
  border: none;
}

.upload-btn-inline:hover {
  background: #d63638;
  color: white;
}

.cover-image-preview {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.preview-img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

.preview-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
}

.change-btn, .remove-btn {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s;
}

.change-btn:hover, .remove-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  color: white;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .cover-image-header {
    flex-wrap: wrap;
  }
  
  .upload-btn-inline {
    flex: 1;
    justify-content: center;
    margin-top: 8px;
    width: 100%;
  }
  
  .optional-badge {
    margin-left: auto;
  }
  
  .preview-img {
    max-height: 150px;
  }
}

/* Container per nome + cover image */
.name-cover-container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

/* Campo nome occupa tutto lo spazio disponibile */
.name-cover-container .form-control {
  flex: 1;
  margin-bottom: 0;
  min-height: 48px; /* Ensure league name field has proper height */
}

/* Mobile: reduced margin-bottom */
@media (max-width: 767px) {
  .name-cover-container {
    margin-bottom: 0.5rem;
  }
}

/* Event cover section compatta */
.event-cover-image-section.compact {
  margin: 0;
  min-width: 280px;
}

.event-cover-image-section.compact .cover-image-header {
  margin-bottom: 0;
}

/* Preview in cima */
.cover-image-preview-top {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.05);
}

.cover-image-preview-top .preview-img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

/* Mobile adjustments for new layout */
@media (max-width: 767px) {
  /* Mobile: stack verticale per nome + cover */
  .name-cover-container {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .event-cover-image-section.compact {
    width: 100%;
    min-width: unset;
  }
  
  .event-cover-image-section.compact .cover-image-header {
    justify-content: space-between;
    margin-bottom: 0;
  }
  
  .cover-image-preview-top .preview-img {
    max-height: 200px;
  }
}

/* Container principale senza bordi - Barretta unica */
.cover-image-bar {
  display: flex;
  align-items: stretch; /* Per far sì che i figli riempiano l'altezza */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden; /* Per mantenere il border-radius sui figli */
  min-height: 48px; /* Altezza minima per consistenza */
  transition: background 0.2s;
}

/* Hover effect removed - only button has hover now */

/* Contenuto principale */
.bar-content {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.5rem;
}

.bar-label {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 500;
}

/* "optional" con font piccolo, non apice */
.optional-text {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 200; /* ultralight */
  text-transform: uppercase;
  margin-left: 0.25rem;
  vertical-align: baseline; /* align to bottom baseline */
}

/* Pulsante upload che riempie l'altezza */
.bar-upload-btn {
  background: #f5484d;
  color: white;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.2s;
  border: none;
  margin: 0;
  min-height: 48px; /* Garantisce altezza piena */
  align-self: stretch; /* Si estende per riempire il contenitore */
}

.bar-upload-btn:hover {
  background: #d63638;
  color: white;
}

/* Status quando file è caricato */
.bar-status {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background: rgba(185, 255, 102, 0.1); /* New Rumble green with opacity */
  border-left: 1px solid rgba(185, 255, 102, 0.2);
}

.file-selected {
  color: rgba(185, 255, 102, 1); /* New Rumble green */
  font-size: 0.875rem;
}

.bar-info {
  margin-left: auto;
  margin-right: 0.5rem;
}

/* Scrollbar personalizzata per textarea dettagli */
.event_desc_section textarea {
  overflow-y: auto;
}

.event_desc_section textarea::-webkit-scrollbar {
  width: 8px;
}

.event_desc_section textarea::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.event_desc_section textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.event_desc_section textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Uniformare altezza campo nome con cover image section */
.form-group .form-control[placeholder*="Name"],
.form-group input[type="text"][name="name"],
.form-group input[type="text"][name="rumble_name"] {
  min-height: 48px;
  height: 48px;
}

/* Aumentare altezza textarea dettagli su desktop */
@media (min-width: 768px) {
  .event_desc_section textarea {
    min-height: 150px; /* Altezza maggiore su desktop */
  }
}

/* Firefox */
.event_desc_section textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.1);
}

/* Mobile responsive per barretta unica */
@media (max-width: 767px) {
  .cover-image-bar {
    flex-wrap: wrap;
    min-height: auto;
    width: 100% !important; /* Force full width on mobile */
  }
  
  .bar-content {
    width: 100%;
    padding: 0.75rem 1rem;
  }
  
  .bar-upload-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem;
  }
  
  .bar-status {
    width: 100%;
    justify-content: center;
    padding: 0.75rem;
  }
}

/* React Quill dark theme styling */
.event_desc_section .quill {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
}

.event_desc_section .ql-toolbar {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 6px 6px 0 0;
}

.event_desc_section .ql-toolbar button {
  color: rgba(255, 255, 255, 0.7);
}

.event_desc_section .ql-toolbar button:hover {
  color: #b9ff66;
}

.event_desc_section .ql-toolbar button.ql-active {
  color: #f5484d;
}

.event_desc_section .ql-toolbar .ql-stroke {
  stroke: rgba(255, 255, 255, 0.7);
}

.event_desc_section .ql-toolbar .ql-fill {
  fill: rgba(255, 255, 255, 0.7);
}

.event_desc_section .ql-toolbar button:hover .ql-stroke {
  stroke: #b9ff66;
}

.event_desc_section .ql-toolbar button:hover .ql-fill {
  fill: #b9ff66;
}

.event_desc_section .ql-toolbar button.ql-active .ql-stroke {
  stroke: #f5484d;
}

.event_desc_section .ql-toolbar button.ql-active .ql-fill {
  fill: #f5484d;
}

.event_desc_section .ql-container {
  border: none;
  border-radius: 0 0 6px 6px;
  font-family: inherit;
}

.event_desc_section .ql-editor {
  color: #ffffff;
  min-height: 120px;
  padding: 12px 15px;
}

.event_desc_section .ql-editor.ql-blank::before {
  color: rgba(255, 255, 255, 0.5);
  font-style: normal;
}

.event_desc_section .ql-editor a {
  color: #f5484d;
}

/* Quill size picker dropdown */
.event_desc_section .ql-picker-label {
  color: rgba(255, 255, 255, 0.7);
}

.event_desc_section .ql-picker-options {
  background: rgb(25, 28, 31);
  border-radius: 4px;
}

.event_desc_section .ql-picker-item {
  color: rgba(255, 255, 255, 0.7);
}

.event_desc_section .ql-picker-item:hover {
  color: #b9ff66;
  background: rgba(185, 255, 102, 0.1);
}

/* Form field background fix - maintain original color when filled */
.name-cover-container .form-control,
.form-control[name="rumble_name"],
input[type="text"].form-control {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff;
}

.name-cover-container .form-control:focus,
.form-control[name="rumble_name"]:focus,
input[type="text"].form-control:focus {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Ensure filled state maintains same background */
.name-cover-container .form-control:not(:placeholder-shown),
.form-control[name="rumble_name"]:not(:placeholder-shown),
input[type="text"].form-control:not(:placeholder-shown) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff;
}

/* Quill Snow theme overrides */
/* Remove borders from Quill Snow theme elements */
.event_desc_section .ql-toolbar.ql-snow {
  border: none !important;
}

.event_desc_section .ql-container.ql-snow {
  border: none !important;
}

/* Dark background for Quill Snow picker options */
.event_desc_section .ql-snow .ql-picker-options {
  background: rgb(25, 28, 31) !important;
}

/* Rumble green hover for all Quill toolbar elements */
.event_desc_section .ql-snow .ql-toolbar button:hover,
.event_desc_section .ql-snow.ql-toolbar button:hover {
  color: #b9ff66 !important;
}

.event_desc_section .ql-snow .ql-toolbar button:hover .ql-stroke,
.event_desc_section .ql-snow.ql-toolbar button:hover .ql-stroke {
  stroke: #b9ff66 !important;
}

.event_desc_section .ql-snow .ql-toolbar button:hover .ql-fill,
.event_desc_section .ql-snow.ql-toolbar button:hover .ql-fill {
  fill: #b9ff66 !important;
}

/* Hover for picker labels */
.event_desc_section .ql-snow .ql-picker-label:hover,
.event_desc_section .ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: #b9ff66 !important;
}

.event_desc_section .ql-snow .ql-picker-label:hover .ql-fill {
  fill: #b9ff66 !important;
}

/* Hover for picker items */
.event_desc_section .ql-snow .ql-picker-item:hover {
  color: #b9ff66 !important;
}

/* ========================================
   EXPANDABLE EVENT DESCRIPTION EDITOR STYLES
   ======================================== */

/* Event Description Editor Wrapper */
.event_desc_section {
  position: relative;
}

.description-editor-wrapper {
  position: relative;
  transition: all 0.3s ease;
}

/* Default collapsed state */
.description-editor-wrapper:not(.editing):not(.expanded) .quill {
  max-height: 240px;
  overflow: hidden;
  position: relative;
}

/* Add gradient overlay when collapsed */
.description-editor-wrapper:not(.editing):not(.expanded) .quill::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px; /* Increased from 50px to better cover text */
  background: linear-gradient(-90deg, 
    rgb(120 50 50 / 20%) 0%, 
    rgb(40 20 20 / 90%) 50%, 
    rgb(40 20 20 / 50%) 100%
  );
  pointer-events: none;
}

/* Editing or expanded state */
.description-editor-wrapper.editing .quill,
.description-editor-wrapper.expanded .quill {
  max-height: none;
  min-height: 150px;
}

/* Show more button - gradient only style */
.show-more-btn {
  display: block;
  width: 100%;
  padding: 12px 8px;
  margin-top: -40px; /* Overlap with gradient fade */
  background: transparent;
  border: none;
  color: #f3f3f3;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 5;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.show-more-btn:hover {
  color: #ff4757;
  transform: translateY(-2px);
}


/* Dark mode adjustments */
.dark-mode-active .description-editor-wrapper:not(.editing):not(.expanded) .quill::after {
  background: linear-gradient(to bottom, transparent, rgb(23 25 28 / 90%) 70%, rgb(23 25 28));
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .description-editor-wrapper:not(.editing):not(.expanded) .quill {
    max-height: 30vh; /* 30% of viewport height when collapsed */
    min-height: 25vh; /* Minimum 25% to ensure visibility */
  }
  
  .description-editor-wrapper.editing .quill,
  .description-editor-wrapper.expanded .quill {
    min-height: 40vh; /* 40% of viewport when editing */
    max-height: 60vh; /* Max 60% to not cover too much screen */
    overflow-y: auto; /* Allow scrolling if needed */
  }
  
  /* Better distribution using flexbox for mobile */
  .event_desc_section .ql-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 6px 8px !important;
    justify-content: space-between !important; /* Distribute evenly */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  
  .event_desc_section .ql-toolbar .ql-formats {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    margin: 0 !important; /* Let justify-content handle spacing */
    align-items: center;
    gap: 4px !important;
  }
  
  /* Add spacing between format groups */
  .event_desc_section .ql-toolbar .ql-formats:not(:last-child) {
    margin-right: 8px !important;
  }
  
  /* Compact button sizes for mobile */
  .event_desc_section .ql-toolbar button {
    width: 28px !important;
    height: 28px !important;
    padding: 3px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
  }
  
  /* Fix specifically for italic button visibility */
  .event_desc_section .ql-toolbar button.ql-italic {
    display: inline-block !important;
    visibility: visible !important;
  }
  
  /* Base styles for all pickers */
  .event_desc_section .ql-toolbar .ql-picker {
    height: 28px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Align picker stays compact */
  .event_desc_section .ql-toolbar .ql-picker.ql-align {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
  }
  
  /* Size picker needs more width for content */
  .event_desc_section .ql-toolbar .ql-picker.ql-size {
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;
  }
  
  /* Adjust align picker label */
  .event_desc_section .ql-toolbar .ql-picker.ql-align .ql-picker-label {
    width: 28px !important;
    padding: 3px !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Adjust size picker label */
  .event_desc_section .ql-toolbar .ql-picker.ql-size .ql-picker-label {
    width: 55px !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Hide picker arrow on mobile to save space */
  .event_desc_section .ql-toolbar .ql-picker-label::after {
    display: none !important;
  }
  
  /* Ensure SVG icons are visible */
  .event_desc_section .ql-toolbar .ql-stroke {
    stroke: rgba(255, 255, 255, 0.7) !important;
  }
  
  .event_desc_section .ql-toolbar .ql-fill {
    fill: rgba(255, 255, 255, 0.7) !important;
  }
}

/* ========================================
   LEAGUE EDIT SPECIFIC MOBILE FIXES
   ======================================== */

@media (max-width: 767px) {
  /* Remove margin-top from wrapper container on mobile */
  .league-edit-page .w-1320.mt-2 {
    margin-top: 0 !important;
  }
}

/* ========================================
   MODERN PRIZES SECTION STYLES
   ======================================== */

/* Container principale con glassmorphism */
.prizes-section-container {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.5rem;
}

/* Switch wrapper - restored original styling */
.prize-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  border: 1px solid #e7e9ed;
  padding: 10px 20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}

.prize-switch-wrapper .MuiFormControl-root {
  margin: 0;
}

/* Dark mode switch wrapper */
.dark-mode-active .prize-switch-wrapper {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.01);
}

.info-icon-wrapper {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
}

/* Lista premi moderna */
.prize-list-modern {
  /* margin-top removed */
}

.prize-item-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
  min-height: 80px;
  overflow: visible;
}


.prize-item-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px 0 0 6px; /* Round left corners only */
  flex-shrink: 0;
}

/* Override prize-item-thumb for sponsors to be 130x130px */
.sponsor-list-modern .prize-item-thumb {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 6px 0 0 6px; /* Round left corners only */
}

/* Adjust container min-height for larger sponsor images */

/* Mobile responsive - keep 80x80 on mobile */
@media (max-width: 768px) {
  .sponsor-list-modern .prize-item-thumb {
    width: 80px;
    height: 80px;
  }
}

/* Sponsor images now use standard 100x100 size from LeagueEdit.css 
   Old override rules removed to maintain consistency */

.prize-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* Prize info line - same line display */
.prize-info-line {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* No image layout adjustment */
.prize-item-details.no-image {
  /* padding: 0 1rem; */ /* Rimosso come richiesto */
}

.prize-rank {
  font-weight: 600;
  color: #ff4757;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 24px;
}

.prize-desc {
  font-size: 14px;
  opacity: 0.8;
  color: #f3f3f3;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* prize-item-actions styles moved to RumbleData.css for centralization */

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: #f3f3f3;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: none;
  border: none;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* Add button wrapper */
.add-prize-button-wrapper {
  text-align: center;
  margin: 1rem;
}

.legal-warning-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  margin-bottom: 1rem;
  line-height: 1.4;
}


/* Error message */
.error-message {
  color: #ff4757;
  font-size: 13px;
  margin-top: 0.5rem;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
}

/* ========================================
   INLINE EDITABLE PRIZE STYLES
   ======================================== */

/* Premio editabile - stesso stile ma con campi input */
.prize-item-editable {
  background: rgba(255, 255, 255, 0.03);
  animation: fadeIn 0.3s ease-out;
  overflow: visible;
  padding: 0;
  gap: 1rem;
  display: flex;
  align-items: center;
}

/* Wrapper for thumb when editing */
.prize-item-thumb-wrapper {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Image inside wrapper */
.prize-item-thumb-wrapper .prize-item-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px 0 0 6px; /* Round left corners only */
}

/* Prize thumb with controls container */
.prize-thumb-with-controls {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Overlay for buttons - positioned to the right */
.prize-thumb-overlay {
  position: absolute;
  top: 0;
  right: -48px;
  height: 100%;
  display: flex;
  align-items: stretch;
}

/* Vertical button container */
.prize-thumb-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

/* Uniform styling for change and delete buttons */
.prize-thumb-controls .change-btn,
.prize-thumb-controls .delete-btn {
  width: 48px;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: none;
}

/* First button (change) with top rounded corners */
.prize-thumb-controls .change-btn {
  border-radius: 0 6px 0 0;
}

/* Second button (delete) with bottom rounded corners */
.prize-thumb-controls .delete-btn {
  border-radius: 0 0 6px 0;
}

/* Enhanced hover effects */
.prize-thumb-controls .change-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.prize-thumb-controls .delete-btn:hover {
  background: rgba(244, 67, 54, 0.3);
  transform: scale(1.05);
}

/* Image overlay controls */
.prize-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.prize-item-thumb-wrapper:hover .prize-image-overlay {
  opacity: 1;
  pointer-events: auto;
}

.prize-image-overlay-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.prize-image-overlay-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

/* Placeholder upload con stesso size della thumb */
.prize-upload-placeholder {
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px 0 0 6px; /* Round left corners only */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.02);
}

/* Select e input inline con stile standard form */
.prize-rank-select,
.prize-desc-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 4px;
  color: #f3f3f3;
  font-family: inherit;
  height: 48px;
  padding: 12px 8px;
  width: 100%;
  transition: all 0.2s;
}


.prize-rank-select {
  font-weight: 600;
  color: #ffffff;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

.prize-desc-input {
  font-size: 14px;
  color: #ffffff;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: normal;
}

/* Focus states */
.prize-rank-select:focus,
.prize-desc-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  color: #ffffff !important;
}

/* Ensure all states maintain dark background */
.prize-rank-select,
.prize-desc-input,
.sponsor-list-modern .prize-desc-input {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Override any bootstrap or browser defaults */
.prize-list-modern input[type="text"],
.sponsor-list-modern input[type="text"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Filled state - maintain same background */
.prize-rank-select:not(:placeholder-shown),
.prize-desc-input:not(:placeholder-shown) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Ensure desc input keeps original background when filled */
.prize-desc-input:not(:placeholder-shown) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Prevent white background on autofill */
.prize-rank-select:-webkit-autofill,
.prize-desc-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px rgba(33, 37, 41, 1) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Also apply to sponsor inputs using prize-desc-input class */
.sponsor-list-modern .prize-desc-input:not(:placeholder-shown) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.sponsor-list-modern .prize-desc-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px rgba(33, 37, 41, 1) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Hover states */
.prize-rank-select:hover,
.prize-desc-input:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Style select dropdown */
.prize-rank-select option {
  background: #212529;
  color: #f3f3f3;
}

/* Placeholder styles */
.prize-desc-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Editable details container */
.prize-item-details.editable {
  padding-left: calc(0rem + 48px); /* Extra space for 48px buttons + gap */
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  align-items: start;
}

/* When there's no image controls, use normal padding */
@supports selector(:has(*)) {
  .prize-item-editable:not(:has(.prize-thumb-with-controls)) .prize-item-details.editable {
    padding-left: 0;
  }
}

/* Column layout for ranking and description */
.prize-editable-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Save/Cancel buttons with appropriate colors */
.btn-save {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(185, 255, 102, 0.1);
  border: 1px solid rgba(185, 255, 102, 0.3);
  border-radius: 6px;
  color: #B9FF66;
  box-shadow: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-save:hover {
  background: rgba(185, 255, 102, 0.2);
  transform: scale(1.05);
}

.btn-cancel {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 6px;
  color: #f44336;
  box-shadow: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel:hover {
  background: rgba(244, 67, 54, 0.2);
  transform: scale(1.05);
}

/* Animation for new prize row */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .prizes-section-container {
    padding: 1rem;
  }
  
  .prize-item-modern {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  
  .prize-item-details {
    flex: 1 1 calc(100% - 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Mobile specific for inline edit */
  .prize-desc-input {
    font-size: 12px;
  }
  
  .prize-rank-select {
    font-size: 13px;
  }
  
  /* Mobile: stack columns vertically */
  .prize-item-details.editable {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  /* Adjust padding for mobile */
}

/* Modern Sponsor Design - Using Prize Classes */
.sponsor-list-container {
  /* margin-top removed */
  border-radius: 8px;
  transition: all 0.3s ease;
}

.sponsor-list-modern {
  /* margin-top removed */
}

.sponsor-info-line {
  display: flex;
  align-items: baseline;
  gap: 1.5rem; /* Increased from 0.75rem */
  flex-wrap: wrap;
}

.sponsor-name {
  font-weight: 600;
  color: #fff;
  font-family: 'DIN', 'DIN Round', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: bold;
  font-size: 16px;
}

.sponsor-website {
  font-size: 16px; /* Increased from 14px */
  color: #f8f9fa; /* Off-white to match panels-override.css */
  text-decoration: none !important; /* Remove underline */
  opacity: 0.9;
  transition: all 0.2s;
}

.sponsor-website:hover {
  opacity: 1;
  text-decoration: none !important; /* Remove underline on hover */
  color: #fff; /* Brighter white on hover */
}

.sponsor-social {
  /* font-size removed - inherits from parent div (13px) */
  color: #f8f9fa; /* Off-white to match panels-override.css */
  text-decoration: none !important; /* Remove underline */
  opacity: 0.8;
  transition: all 0.2s;
}

.sponsor-social:hover {
  opacity: 1;
  text-decoration: none !important; /* Remove underline on hover */
  color: #fff; /* Brighter white on hover */
}

/* Sponsor link with same properties as sponsor-social */
.sponsor-link {
  /* font-size removed - inherits from parent div (13px) */
  color: #f8f9fa;
  text-decoration: none !important;
  opacity: 0.8;
  transition: all 0.2s;
}

.sponsor-link:hover {
  opacity: 1;
  text-decoration: none !important;
  color: #fff;
}

/* Sponsor specific editable state - uses prize-item-editable-details */
.prize-item-editable-details {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* When sponsor has an image, adjust padding like prizes */
.sponsor-list-modern .prize-item-editable:has(.prize-thumb-with-controls) .prize-item-editable-details {
  padding-left: calc(0rem + 48px);
}

/* Ensure sponsor fields resize properly when image is present */
.sponsor-list-modern .prize-item-editable:has(.prize-thumb-with-controls) .sponsor-edit-fields {
  width: 100%;
}

.sponsor-list-modern .prize-item-editable:has(.prize-thumb-with-controls) .sponsor-fields-row {
  display: flex;
  gap: 0.5rem;
}

.sponsor-list-modern .prize-item-editable:has(.prize-thumb-with-controls) .sponsor-fields-row input {
  flex: 1;
  min-width: 0;
}

.sponsor-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sponsor-fields-row {
  display: flex;
  gap: 0.5rem;
}

.sponsor-fields-row input {
  flex: 1;
}

.sponsor-name-input,
.sponsor-website-input,
.sponsor-social-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s;
  width: 100%;
  height: 48px;
}

.sponsor-name-input:focus,
.sponsor-website-input:focus,
.sponsor-social-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05) !important; /* Changed from rgba(0,0,0,0.5) */
}

.sponsor-name-input::placeholder,
.sponsor-website-input::placeholder,
.sponsor-social-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Add filled state styling to maintain original background */
.sponsor-name-input:not(:placeholder-shown),
.sponsor-website-input:not(:placeholder-shown),
.sponsor-social-input:not(:placeholder-shown) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
}

/* Prevent white background on autofill for sponsor inputs */
.sponsor-name-input:-webkit-autofill,
.sponsor-website-input:-webkit-autofill,
.sponsor-social-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px rgba(33, 37, 41, 1) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Responsive for sponsors */
@media (max-width: 768px) {
  .sponsor-edit-fields {
    gap: 0.75rem;
  }
  
  .sponsor-info-line {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  /* Stack sponsor fields on mobile */
  .sponsor-fields-row {
    flex-direction: column;
  }
}

/* Fix page background color on mobile to match panels */
@media (max-width: 768px) {
  /* Set background for body and html on LeagueEdit page */
  body:has(.league-edit-page),
  html:has(.league-edit-page) {
    background-color: rgb(33, 37, 41) !important;
  }
  
  /* Also set background for UserLayout wrapper */
  .league-edit-page {
    background-color: rgb(33, 37, 41);
    min-height: 100vh;
  }
  
  /* Ensure main container also has the same background */
  .league-edit-page .w-1320 {
    background-color: rgb(33, 37, 41);
  }
}

/* Mobile-specific layout for prize and sponsor items with text fields in column next to image */
@media (max-width: 767px) {
  /* Prize items - arrange text fields in column next to image */
  .prize-item-editable {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    min-height: 100px;
    overflow: hidden;
  }
  
  .prize-item-editable .prize-item-thumb-wrapper {
    flex-shrink: 0;
  }
  
  /* Prize details - single column layout on mobile */
  .prize-item-editable .prize-item-details.editable {
    flex: 1;
    display: flex;
    flex-direction: column !important;
    gap: 0.5rem;
    grid-template-columns: none !important;
  }
  
  .prize-item-editable .ranking-column,
  .prize-item-editable .description-column {
    width: 100%;
  }
  
  /* Prize inputs - align to 100px total with 0.5rem gap */
  .prize-item-editable .prize-rank-select,
  .prize-item-editable .prize-desc-input {
    height: 46px; /* (100px - 8px gap) / 2 = 46px each */
    padding: 8.25px 8px !important; /* Same vertical padding as sponsors */
    box-sizing: border-box;
  }
  
  /* prize-item-actions mobile styles moved to RumbleData.css */
  
  /* Ensure prize-item-actions fit within container */
  .prize-item-editable .prize-item-actions {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
  }
  
  .prize-item-editable .prize-item-actions .btn-icon {
    flex: 1;
    max-height: 48px;
  }
  
  /* Remove padding-right from prize details when no image controls */
  .prize-item-editable:not(:has(.prize-thumb-with-controls)) .prize-item-details.editable {
    padding-right: 0;
  }
  
  /* Sponsor items - ensure text fields are in column next to image */
  .sponsor-list-modern .prize-item-editable {
    display: flex;
    gap: 0.5rem;
    align-items: stretch; /* Cambiato da flex-start a stretch */
    min-height: 100px; /* Garantisce altezza minima */
  }
  
  .sponsor-list-modern .prize-item-editable .prize-item-thumb-wrapper {
    flex-shrink: 0;
  }
  
  .sponsor-list-modern .prize-item-editable .prize-item-details.editable {
    flex: 1;
    display: flex;
    flex-direction: column !important;
    gap: 0.25rem !important; /* Reduced gap between sponsor fields */
  }
  
  /* Adjust sponsor field heights to total 100px (image height) */
  /* 3 inputs with 2 gaps of 0.25rem (4px each) = 8px total for gaps */
  /* (100px - 8px) / 3 = 30.67px per input field */
  .sponsor-list-modern .prize-item-editable input {
    height: 33.5px; /* Adjusted for new padding to fit within 100px total */
    padding: 8.25px 8px !important; /* Vertical padding as specified */
    box-sizing: border-box;
    font-size: 12px; /* Ridotto per adattarsi meglio */
  }
  
  /* Override any inline styles for mobile */
  .sponsor-list-modern .prize-item-details.editable[style*="flex-direction"] {
    flex-direction: column !important;
  }
  
  /* sponsor prize-item-actions mobile styles moved to RumbleData.css */
  
  .sponsor-list-modern .prize-item-editable .btn-icon {
    height: 44px; /* (100px - 4px gap) / 2 = 48px -> reduced to 44px */
    width: 40px; /* Larghezza ridotta per mobile */
  }
  
  /* Maintain layout for created sponsors (non-editable state) */
  .sponsor-list-modern .prize-item-modern {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  .sponsor-list-modern .prize-item-modern .prize-item-details {
    flex: 1;
    /* padding: 0; */ /* Rimosso per allineamento richiesto */
    margin-top: auto;
    margin-bottom: auto;
  }
  
  /* Prize items in view mode - no padding */
  .prize-list-modern .prize-item-modern .prize-item-details {
    /* padding: 0; */ /* Rimosso per allineamento richiesto */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
  }
  
  /* View mode prize-item-actions styles moved to RumbleData.css */
  
  /* Ensure prize-item-actions fit within container in view mode */
  .prize-item-modern .prize-item-actions {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
  }
  
  .prize-item-modern .prize-item-actions .btn-icon {
    flex: 1;
    max-height: 48px;
  }
  
  /* Maintain button height at 46px for all buttons */
  .prize-item-modern .btn-icon,
  .prize-item-editable .btn-icon {
    height: 46px;
    width: 46px; /* Keep square */
  }
  
  /* Sponsor edit mode buttons - maintain narrow width */
  .sponsor-list-modern .prize-item-editable .btn-icon {
    height: 46px;
    width: 40px; /* Narrower for sponsors */
  }
  
  /* Fix scroll issue for sponsor/prize panels on mobile */
  .league-edit-panels-mobile .sponsor-list-container,
  .league-edit-panels-mobile .prize-list-container {
    max-height: calc(100vh - 250px); /* Leave space for header, navigation and buttons */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
  }
  
  /* Ensure list-modern containers are scrollable */
  .league-edit-panels-mobile .sponsor-list-modern,
  .league-edit-panels-mobile .prize-list-modern {
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: 20px; /* Space for last element */
    -webkit-overflow-scrolling: touch;
  }
}

/* ========================================
   UTILITY CLASSES FOR INLINE STYLE EXTRACTION
   Phase 2.4 Optimization - LeagueEdit.js
   ======================================== */

/* Image Utilities */
.img-thumb-100 {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.img-thumb-130 {
  width: 130px;
  height: 130px;
  object-fit: cover;
}

/* Cursor Utilities */
.cursor-help {
  cursor: help;
}

/* Flex Utilities */
.flex-1-min-0 {
  flex: 1;
  min-width: 0;
}

.flex-row-mobile-col {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .flex-row-mobile-col {
    flex-direction: column;
  }
}

/* Desktop: ensure prize fields use full width */
@media (min-width: 768px) {
  .prize-item-details.editable {
    grid-template-columns: minmax(120px, 200px) 1fr !important; /* Ranking field max 200px, description field takes rest */
    gap: 0.75rem;
    width: 100%;
  }

  .ranking-column,
  .description-column {
    width: 100%;
  }

  .ranking-column {
    max-width: 200px; /* Ensure ranking column doesn't grow too much */
  }

  .ranking-column .prize-rank-select,
  .description-column .prize-desc-input {
    width: 100%;
    box-sizing: border-box;
  }
  

  /* Ensure the container takes full available width */
  .prize-list-modern .prize-item-editable {
    width: 100%;
  }

  .prize-list-modern .prize-item-details.editable {
    flex: 1;
    min-width: 0; /* Allow shrinking below content size */
  }
}

/* Override any max-width constraints */
.prize-rank-select,
.prize-desc-input {
  max-width: none !important;
  width: 100% !important;
}

/* Text Utilities */
.text-optional-tag {
  font-size: 0.5rem;
  font-weight: 200;
  margin-left: 4px;
  text-transform: uppercase;
}

.text-error-primary {
  color: #ff4757;
  font-weight: 600;
  font-size: 14px;
}

.text-sponsor-name {
  color: #f8f9fa;
  font-size: 13px;
}

.text-upload-label {
  font-size: 10px;
  color: #ffffff;
  opacity: 0.8;
}

/* Layout Utilities */
.full-width-center {
  width: 100%;
  text-align: center;
  padding: 12px;
  border: none;
}

.mt-1-full-width {
  margin-top: 1rem;
  width: 100%;
}

/* Icon Utilities */
.icon-opacity-3 {
  opacity: 0.3;
}

.icon-opacity-1 {
  opacity: 1;
  color: #ffffff;
}

/* Z-index Utilities */
.z-10 {
  z-index: 10;
}

/* Display Utilities */
.d-none {
  display: none;
}

/* Upload Placeholder Utilities */
.upload-placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Min Height Utilities */
.min-h-100 {
  min-height: 100px;
}

.min-h-auto {
  min-height: auto;
}

/* Text Specific Utilities */
.text-upload-label-disabled {
  font-size: 10px;
  color: #ffffff;
  opacity: 0.3;
}

.text-sponsor-title {
  color: #f8f9fa;
  font-weight: 800;
  font-size: 16px;
}

.text-small-desc {
  font-size: 13px;
}

.text-rulesheet-label {
  font-size: 11px;
}

/* Registration Fee Form Styles */
.setRegiFee-right-col .form-label {
  color: #f8f9fa;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.setRegiFee-right-col .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8f9fa;
}

.setRegiFee-right-col .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #f5484d;
  color: #f8f9fa;
  box-shadow: 0 0 0 0.2rem rgba(245, 72, 77, 0.25);
}

.setRegiFee-right-col .form-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8f9fa;
}

.setRegiFee-right-col .form-select:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #f5484d;
  color: #f8f9fa;
}

/* Payment Logo Styles */
.desktop-payment-logo-wrapper {
  padding: 15px 0 0 0;
  margin-top: 10px;
}

.desktop-payment-logo {
  width: 100%;
  text-align: center;
}

.desktop-payment-logo p {
  font-size: 13px;
  color: #f8f9fa;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.desktop-payment-logo img {
  vertical-align: middle;
  display: inline-block;
  opacity: 1;
  visibility: visible;
}

/* Override conflicting styles from RegistrationOptions.css */
.setRegiFee-hide-container .payment-logo p {
  color: #f8f9fa !important;
  font-size: 13px !important;
}

/* Inline verified icon styling */
.payment-logo p img {
  margin-top: -2px; /* Slight adjustment for perfect alignment */
}

/* Ensure payment logos are visible */
.setRegiFee-hide-container .payment-logo-wrapper {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Payment logo styling for all screen sizes */
.payment-logo-wrapper {
  margin-top: 1.5rem;
}

.payment-logo {
  padding: 1rem;
  border-radius: 8px;
}

.payment-logo p {
  color: #f8f9fa !important;
  font-size: 13px !important;
  margin-bottom: 0.5rem !important;
}

.payment-logo img {
  vertical-align: middle;
  display: inline-block;
}

/* Mobile payment text styling */
.timer-hide-container .d-block.d-md-none p {
  color: #f8f9fa;
  font-size: 13px;
}

/* Pre-registration Date Picker Styles */
.pre-registration-date-picker-wrapper {
  padding: 0; /* Default: no padding on mobile */
}

.pre-registration-date-picker-wrapper .ant-range-picker-rumble {
  width: 100%;
}

/* Desktop: padding only on top */
@media (min-width: 768px) {
  .pre-registration-date-picker-wrapper {
    padding: 20px 0px 0px 0px;
  }
}