/* EvalitSliding.css */
.evalit-card-container {
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

.evalit-card {
  background: #fff;
  border-radius: 12px;
  height: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 10px;
  width: 100%;
  max-width: 1000px;
  display: flex;              
  flex-direction: column;   
  justify-content: space-between; 
  position: relative;      
  overflow: hidden; 
}

.evalit-media-wrapper {
  width: 100%;
  max-width: 784px;       
  height: auto;          
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d3d3d3;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  cursor: pointer;         
}

.evalit-media-wrapper img,
.evalit-media-wrapper video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;           
  object-fit: contain;
  background-color: #ffffff;
  display: block;
  transition: all 0.35s ease; 
}

.evalit-media-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
}

.evalit-media-modal.fade-in {
  opacity: 1;
}

.evalit-media-modal.fade-out {
  opacity: 0;
}

.evalit-media-modal img,
.evalit-media-modal video {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.evalit-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.evalit-summary span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #444;
  background: #fcf4f8;
  padding: 6px 10px;
  border-radius: 6px;
}

.evalit-controls {
  flex: 0 0 auto; 
  background-color: #fff;
}

.evalit-controls button:hover {
  background-color: rgba(0, 0, 0, 0.08);
  transition: 0.2s ease;
}

.evalit-controls button:hover svg {
  opacity: 0.7;
}

.load-more-btn {
  background-color: transparent !important;
  border: 1px solid #51a6f5 !important;
  color: #51a6f5 !important;
  padding: 8px 8px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover → fill blue and turn text white */
.load-more-btn:hover {
  background-color: #51a6f5 !important;
  color: #fff !important;
  border-color: #51a6f5 !important;
}

.load-more-btn:hover svg {
  fill: #fff !important;
}

.evalit-content-scroll {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 10px;
}

.evalit-start-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.left-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.grade-badge {
  border: 2px solid rgb(200,50,50);
  color: rgb(200,50,50);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: center;
  background-color: transparent;
}

.add-schema-btn {
  background-color: #51a6f5;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.add-schema-btn:hover {
  background-color: #3b8edc;
}

.evalit-start-btn {
  margin-left: auto;
  background-color: #28a745;
  border: none;
  color: white;
  padding: 8px 18px;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
}

.evalit-start-btn:hover { background-color: #1e7e34; }
.evalit-start-btn:active { background-color: #145824; }

.evalit-nav-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.evalit-nav-row button {
  background-color: transparent !important;
  border: 1px solid rgb(81, 166, 245);     /* Blue border */
  color: #51a6f5;                /* Blue text */
  padding: 8px 8px;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.evalit-nav-row button svg {
  fill: #51a6f5 !important;
  color: #51a6f5 !important;
}

.evalit-nav-row button:hover:not(:disabled) {
  background-color: #51a6f5 !important;
  color: #fff !important;
  border-color: rgb(81, 166, 245) !important;
}
.evalit-nav-row button:hover:not(:disabled) svg {
  fill: #fff !important;
  color: #fff !important;
}
.evalit-nav-row button:disabled {
  border-color: #bfbfbf !important;
  color: #bfbfbf !important;
}
.evalit-nav-row button:disabled svg {
  fill: #bfbfbf !important;
  color: #bfbfbf !important;
}
.evalit-tracker {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.evalit-tracker-dot {
  width: 14px;           
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;  
  line-height: 12px;   
  font-weight: 400;       
  cursor: pointer;
  transition: all 0.3s ease;
}

.evalit-tracker-dot.unanswered { 
  background-color: #ccc; 
  color: #333; 
}

.evalit-tracker-dot.answered { 
  background-color: #4CAF50; 
  color: #000; 
}

.evalit-tracker-dot.answered.active {
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 16px !important;
  background-color: #4CAF50;
  border: none;   
  color: #000;               
}

/* Active for unanswered only */
.evalit-tracker-dot.unanswered.active {
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 16px !important;
  border: none;              
  background-color: #b8b6b6; 
  color: #000;                
  border-radius: 50%;        
}

.evalit-ellipsis {
  font-size: 1rem;
  font-weight: bold;
  color: #666;
  padding: 0 4px;
}

.evalit-details-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.evalit-detail-item {
  display: inline-block;
  background: #e9ecef;
  color: #666;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 14px;
}

/* Slide Animations */
.slide-in-right {
  animation: slideInRight 1.0s ease forwards;
}
.slide-out-left {
  animation: slideOutLeft 1.0s ease forwards;
}

.slide-in-left {
  animation: slideInLeft 1.0s ease forwards;
}
.slide-out-right {
  animation: slideOutRight 1.0s ease forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0%); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}