/* 
 * TRL Design System - Song Selection Component 
 * Styling for the round song selection page for judges and video submissions
 */

.song-select {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, var(--trl-primary), var(--trl-secondary));
  overflow-y: scroll;
}

.song-select .trl-app-menu {
  width: 100%;
  max-width: none;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0;
}

.song-select__header {
  padding: 20px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  width: 100%;
}

.song-select__title {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 5px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.song-select__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.song-select__content {
  width: 100%;
  padding: 24px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--trl-primary), var(--trl-secondary));
  border-radius: 0 0 15px 15px;
}

/* Judge information */
.song-select__judge-info {
  margin-bottom: 24px;
  text-align: center;
}

.song-select__judge-badge {
  display: inline-flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.song-select__judge-icon {
  font-size: 18px;
  margin-right: 8px;
  color: var(--trl-accent);
}

.song-select__judge-text {
  font-weight: 500;
  color: var(--trl-white);
  display: flex;
  align-items: center;
}

.song-select__judge-you {
  background-color: var(--trl-accent);
  color: var(--trl-black);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

/* Song selection card */
.song-select__card {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

.song-select__card-header {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.song-select__card-icon {
  font-size: 20px;
  margin-right: 12px;
}

.song-select__card-title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  color: var(--trl-white);
}

.song-select__card-content {
  padding: 20px;
}

.song-select__instruction {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
  text-align: center;
}

/* Form styling */
.song-select__form {
  margin-bottom: 16px;
}

.song-select__form-group {
  margin-bottom: 16px;
}

.song-select__label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-transform: uppercase;
}

.song-select__input {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 16px;
  color: var(--trl-white);
  transition: all 0.3s;
}

.song-select__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.song-select__input:focus {
  outline: none;
  border-color: var(--trl-white);
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 164, 228, 0.5);
}

.song-select__form-helper {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  font-style: italic;
}

.song-select__action {
  text-align: center;
}

.song-select__button {
  background-color: var(--trl-accent);
  color: var(--trl-black);
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}

.song-select__button:hover {
  background-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.3);
}

.song-select__button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

/* Tips section */
.song-select__tips {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.song-select__tips-header {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.song-select__tips-icon {
  font-size: 20px;
  margin-right: 12px;
  color: var(--trl-accent);
}

.song-select__tips-title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  color: var(--trl-white);
}

.song-select__tips-content {
  padding: 16px;
}

.song-select__tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.song-select__tips-item {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.song-select__tips-item:last-child {
  margin-bottom: 0;
}

.song-select__tips-bullet {
  color: var(--trl-accent);
  font-size: 18px;
  line-height: 1;
  margin-right: 8px;
}

.song-select__tips-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.4;
}

/* Waiting card (for non-judges) */
.song-select__waiting-card {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.song-select__waiting-animation {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}

.song-select__waiting-pulse {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  animation: waitingPulse 2s infinite ease-out;
}

@keyframes waitingPulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.song-select__waiting-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--trl-white);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.song-select__waiting-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.song-select__waiting-icon {
  font-size: 48px;
  animation: floatIcon 3s infinite ease-in-out;
}

@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/*
 * Video Submission Styles
 *
 * The following sections implement the TRL design system for the video submission flow:
 * - Container structures for the submission pages
 * - Card components for submission forms and search results
 * - Form styling for search inputs and buttons
 * - Video result items with thumbnails and metadata
 * - Modal dialogs for video preview and confirmation
 * - Status messages for success, error, and locked states
 * - Animations for user interaction feedback
 */

/* Submission container */
.submission-container {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, var(--trl-primary), var(--trl-secondary));
  border-radius: 15px;
  overflow-y: scroll;
}

.submission-container__header {
  padding: 20px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  width: 100%;
}

.submission-container__title {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 5px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.submission-container__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.submission-container__content {
  width: 100%;
  padding: 24px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--trl-primary), var(--trl-secondary));
  border-radius: 0 0 15px 15px;
}

/* Submission form card */
.submission-card {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.submission-card__header {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.submission-card__icon {
  font-size: 20px;
  margin-right: 12px;
  color: var(--trl-accent);
}

.submission-card__title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  color: var(--trl-white);
}

.submission-card__content {
  padding: 20px;
}

/* Search form */
.submission-search {
  margin-bottom: 20px;
}

.submission-search__label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-transform: uppercase;
}

.submission-search__input {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 16px;
  color: var(--trl-white);
  transition: all 0.3s;
  margin-bottom: 10px;
}

.submission-search__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.submission-search__input:focus {
  outline: none;
  border-color: var(--trl-white);
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 164, 228, 0.5);
}

.submission-search__button {
  width: 100%;
  background-color: var(--trl-accent);
  color: var(--trl-black);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.submission-search__button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.submission-search__button:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

.submission-search__button:hover {
  background-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.3);
}

.submission-search__button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  20% {
    transform: scale(25, 25);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

/* Search results */
.submission-results {
  margin-top: 20px;
  overflow-y: auto; /* Enable vertical scrolling */
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2); /* For Firefox */
}

/*
@media (max-width: 480px) {
  .submission-results {
    max-height: 100vmin;
  }
}
@media (min-height: 800px) {
  .submission-results {
    max-height: 100vmin;
  }
}
@media (min-height: 1000px) {
  .submission-results {
    max-height: 100vmin;
  }
}
*/

/* Custom scrollbar styling for webkit browsers */
.submission-results::-webkit-scrollbar {
  width: 8px;
}

.submission-results::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.submission-results::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.submission-results__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px; /* Prevent content from touching scrollbar */
}

.submission-result-item {
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.submission-result-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.submission-result-item__thumbnail {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  overflow: hidden;
  background-color: #000;
}

.submission-result-item__thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.submission-result-item__play-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.submission-result-item:hover .submission-result-item__play-overlay {
  opacity: 1;
}

.submission-result-item__play-icon {
  color: #fff;
  height: 64px;
  width: 64px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.submission-result-item__details {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.submission-result-item__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--trl-white);
  margin-bottom: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.submission-result-item__channel {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

.submission-result-item__select {
  margin-top: auto;
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--trl-white);
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.submission-result-item__select:hover {
  background-color: var(--trl-accent);
  color: var(--trl-black);
}

/* Modal styles */
.submission-modal {
  background: linear-gradient(135deg, var(--trl-primary), var(--trl-secondary));
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 700px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.submission-modal__header {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.submission-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--trl-white);
  margin: 0;
}

.submission-modal__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: all 0.2s;
}

.submission-modal__close:hover {
  color: var(--trl-white);
}

.submission-modal__body {
  padding: 20px;
}

.submission-modal__video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.submission-modal__video-info {
  margin-bottom: 16px;
}

.submission-modal__video-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--trl-white);
  margin-bottom: 4px;
}

.submission-modal__video-channel {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.submission-modal__actions {
  text-align: center;
  margin-top: 24px;
}

.submission-modal__submit {
  background-color: var(--trl-accent);
  color: var(--trl-black);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  animation: pulseAttention 1.5s ease-in-out 1s;
}

@keyframes pulseAttention {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
  }
}

.submission-modal__submit:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.submission-modal__submit:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

.submission-modal__submit:hover {
  background-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.3);
}

.submission-modal__submit:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

/* Status messages */
.submission-status {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
  animation: statusAppear 0.5s ease-out forwards;
}

@keyframes statusAppear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.submission-status__header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.submission-status__icon {
  font-size: 22px;
  margin-right: 12px;
}

.submission-status__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--trl-white);
}

.submission-status__content {
  padding: 16px;
  text-align: center;
}

.submission-status__message {
  font-size: 16px;
  color: var(--trl-white);
  margin-bottom: 12px;
}

.submission-status__details {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}

/* Status variants */
.submission-status--success .submission-status__header {
  background-color: rgba(0, 200, 100, 0.2);
}

.submission-status--success .submission-status__icon {
  color: rgba(0, 255, 100, 0.9);
}

.submission-status--error .submission-status__header {
  background-color: rgba(255, 50, 50, 0.2);
}

.submission-status--error .submission-status__icon {
  color: rgba(255, 100, 100, 0.9);
}

.submission-status--warning .submission-status__header {
  background-color: rgba(255, 200, 0, 0.2);
}

.submission-status--warning .submission-status__icon {
  color: var(--trl-accent);
}

.submission-status--info .submission-status__header {
  background-color: rgba(0, 164, 228, 0.2);
}

.submission-status--info .submission-status__icon {
  color: rgba(0, 164, 228, 0.9);
}

.submission-status__error-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  text-align: left;
  background-color: rgba(255, 50, 50, 0.1);
  border-radius: 6px;
  padding: 10px 16px;
}

.submission-status__error-item {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-start;
}

.submission-status__error-item:last-child {
  border-bottom: none;
}

.submission-status__error-bullet {
  color: rgba(255, 100, 100, 0.9);
  margin-right: 8px;
}

.submission-status__button {
  background-color: var(--trl-accent);
  color: var(--trl-black);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

.submission-status__button:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}

.submission-status__button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Locked video notification */
.submission-locked {
  animation: lockPulse 1.5s ease-in-out infinite alternate;
}

@keyframes lockPulse {
  0% {
    box-shadow: 0 0 10px rgba(255, 200, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 200, 0, 0.6);
  }
}

.submission-locked__highlight {
  color: var(--trl-accent);
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .song-select__title,
  .submission-container__title {
    font-size: 24px;
  }

  .song-select__content,
  .submission-container__content {
    padding: 16px;
  }

  .song-select__card-content,
  .submission-card__content {
    padding: 16px;
  }

  .song-select__waiting-title {
    font-size: 20px;
  }

  .submission-result-item {
    flex-direction: column;
  }

  .submission-result-item__thumbnail {
    width: 100%;
    height: 140px;
  }

  .submission-modal__body {
    padding: 12px;
  }
}

/* 
 * Modal System Animations
 * Standardized animations for the TRL modal system
 */

.modal-wrapper {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide the modal when the hidden class is applied */
.modal-wrapper.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-animation-fadeIn {
  animation: modalFadeIn 0.3s ease-out forwards;
}

.modal-animation-scaleIn {
  animation: modalScaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}