/* =============================== COMPETITIONS STYLES ================================= */

/* Hero Section */
.competitions-hero {
   background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
   position: relative;
   overflow: hidden;
}

.competitions-hero::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -10%;
   width: 600px;
   height: 600px;
   background: rgba(255, 255, 255, 0.03);
   border-radius: 50%;
}

.competition-badge-icon {
   width: 100px;
   height: 100px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 30px;
   backdrop-filter: blur(10px);
   animation: float 3s ease-in-out infinite;
}

.competition-badge-icon i {
   font-size: 50px;
   color: #ffc107;
}

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

/* Featured Competition Cards */
.featured-competition-card {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   transition: transform 0.3s ease;
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.featured-competition-card:hover {
   transform: translateY(-10px);
}

.competition-image {
   position: relative;
   height: 250px;
   overflow: hidden;
   flex-shrink: 0;
}

.competition-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.featured-competition-card:hover .competition-image img {
   transform: scale(1.1);
}

.competition-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100px;
   background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.competition-badge-featured {
   position: absolute;
   top: 20px;
   left: 20px;
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   color: white;
   padding: 8px 20px;
   border-radius: 50px;
   font-weight: 700;
   font-size: 12px;
   z-index: 10;
   animation: pulse 2s ease-in-out infinite;
   display: flex;
   align-items: center;
   gap: 5px;
}

.sponsor-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background: white;
   padding: 10px;
   border-radius: 10px;
   z-index: 10;
}

.sponsor-badge img {
   max-width: 80px;
   max-height: 40px;
}

.competition-content {
   padding: 25px;
   background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
   color: white;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}

.competition-category .badge {
   margin-right: 5px;
   margin-bottom: 5px;
   font-size: 11px;
   padding: 5px 12px;
}

.competition-title {
   font-size: 20px;
   font-weight: 700;
   margin: 15px 0;
   line-height: 1.3;
}

.competition-title a {
   color: white;
   text-decoration: none;
}

.competition-title a:hover {
   opacity: 0.8;
}

.competition-description {
   font-size: 14px;
   line-height: 1.6;
   margin-bottom: 20px;
   flex-grow: 1;
}

.competition-meta {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 20px;
}

.meta-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   background: rgba(255, 255, 255, 0.1);
   padding: 10px 15px;
   border-radius: 10px;
}

.meta-item i {
   font-size: 18px;
   color: #ffc107;
   flex-shrink: 0;
}

.meta-item span {
   flex-grow: 1;
   word-break: break-word;
}

/* Ending Soon Cards */
.competition-card {
   background: white;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   transition: all 0.3s ease;
}

.competition-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.competition-card.ending-soon {
   border: 2px solid #dc3545;
}

.countdown-badge {
   position: absolute;
   top: 15px;
   right: 15px;
   background: #dc3545;
   color: white;
   padding: 6px 15px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
   z-index: 10;
   animation: pulse 2s ease-in-out infinite;
}

.card-img-placeholder {
   height: 200px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   align-items: center;
   justify-content: center;
}

.card-img-placeholder i {
   font-size: 60px;
   color: white;
}

.competition-stats {
   display: flex;
   justify-content: space-between;
   margin-top: 15px;
   font-size: 13px;
   color: #666;
}

.competition-stats span {
   display: flex;
   align-items: center;
   gap: 5px;
}

/* Category Sections */
.category-section {
   background: white;
   border-radius: 15px;
   padding: 25px;
   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   height: 100%;
}

.category-header {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 2px solid #f0f0f0;
}

.category-header i {
   font-size: 32px;
   color: #667eea;
}

.category-header h4 {
   margin: 0;
   font-weight: 700;
}

.category-item {
   padding: 12px 0;
   border-bottom: 1px solid #f0f0f0;
}

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

.category-item a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #333;
   text-decoration: none;
   transition: color 0.3s ease;
}

.category-item a:hover {
   color: #667eea;
}

/* Winner Cards */
.winner-card {
   background: white;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   transition: all 0.3s ease;
   position: relative;
}

.winner-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.winner-badge {
   position: absolute;
   top: 15px;
   left: 15px;
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   color: white;
   padding: 6px 15px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 700;
   z-index: 10;
}

.winner-image {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

.winner-content {
   padding: 20px;
}

.winner-stats {
   display: flex;
   gap: 15px;
   margin-top: 15px;
   font-size: 13px;
}

.winner-stats span {
   display: flex;
   align-items: center;
   gap: 5px;
}

/* Tip Cards */
.tip-card {
   background: white;
   border-radius: 15px;
   padding: 30px 20px;
   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   transition: all 0.3s ease;
}

.tip-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.tip-icon {
   width: 70px;
   height: 70px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
}

.tip-icon i {
   font-size: 32px;
   color: white;
}

/* Competition Detail Page */
.competition-detail-hero {
   background-size: cover;
   background-position: center;
   position: relative;
   min-height: 500px;
}

.hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(44, 62, 80, 0.95), rgba(52, 73, 94, 0.95));
}

.competition-header-content {
   position: relative;
   z-index: 10;
}

.competition-badges .badge-lg {
   padding: 10px 20px;
   font-size: 14px;
   margin-right: 10px;
   margin-bottom: 10px;
}

.competition-meta-large {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 20px;
   margin-top: 30px;
}

.meta-item-large {
   background: rgba(255, 255, 255, 0.1);
   padding: 20px;
   border-radius: 15px;
   display: flex;
   align-items: center;
   gap: 15px;
   backdrop-filter: blur(10px);
}

.meta-item-large i {
   font-size: 32px;
   color: #ffc107;
}

.meta-item-large strong {
   display: block;
   font-size: 12px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.7);
}

.meta-item-large span {
   display: block;
   font-size: 20px;
   font-weight: 700;
   color: white;
}

/* Simple Modern Info Cards - Compact Version */
.competition-info-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 15px;
   margin-top: 30px;
}

.info-card {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 12px;
   padding: 15px;
   display: flex;
   align-items: center;
   gap: 12px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
}

.info-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.info-card-icon {
   width: 45px;
   height: 45px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.info-card-icon i {
   font-size: 22px;
   color: white;
}

.prize-icon {
   background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.entries-icon {
   background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
}

.time-icon {
   background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

.views-icon {
   background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
}

.info-card-body {
   flex-grow: 1;
   min-width: 0;
}

.info-card-body h5 {
   font-size: 16px;
   font-weight: 700;
   color: #2c3e50;
   margin: 0 0 3px 0;
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.info-card-body p {
   font-size: 11px;
   color: #7f8c8d;
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   font-weight: 600;
}

.prize-amount {
   display: inline-block;
   background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
   color: white !important;
   padding: 2px 8px;
   border-radius: 12px;
   font-size: 11px !important;
   font-weight: 700;
   margin-top: 3px;
   text-transform: none !important;
}

/* Responsive */
@media (max-width: 768px) {
   .competition-info-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
   }
   
   .info-card {
      padding: 12px;
      gap: 10px;
   }
   
   .info-card-icon {
      width: 40px;
      height: 40px;
   }
   
   .info-card-icon i {
      font-size: 20px;
   }
   
   .info-card-body h5 {
      font-size: 14px;
   }
   
   .info-card-body p {
      font-size: 10px;
   }
}

.sponsor-card {
   background: rgba(255, 255, 255, 0.1);
   padding: 30px;
   border-radius: 15px;
   text-align: center;
   backdrop-filter: blur(10px);
}

/* Prize Showcase */
.prize-showcase {
   text-align: center;
}

.prize-image {
   max-width: 100%;
   height: auto;
   border-radius: 15px;
}

.prize-amount {
   font-size: 48px;
   font-weight: 700;
   color: #28a745;
   margin: 20px 0;
}

.rules-list {
   list-style: none;
   padding: 0;
}

.rules-list li {
   padding: 12px 0;
   padding-left: 30px;
   position: relative;
   border-bottom: 1px solid #f0f0f0;
}

.rules-list li:before {
   content: '✓';
   position: absolute;
   left: 0;
   color: #28a745;
   font-weight: 700;
   font-size: 18px;
}

.criteria-item {
   background: #f8f9fa;
   padding: 15px;
   border-radius: 10px;
}

/* Status Badges */
.status-badge {
   padding: 15px 30px;
   border-radius: 50px;
   font-size: 18px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.status-active {
   background: #28a745;
   color: white;
}

.status-voting {
   background: #dc3545;
   color: white;
}

.status-judging {
   background: #ffc107;
   color: #333;
}

.status-completed {
   background: #6c757d;
   color: white;
}

/* Judge Items */
.judge-item {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 15px 0;
   border-bottom: 1px solid #f0f0f0;
}

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

.judge-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   object-fit: cover;
}

.judge-avatar-placeholder {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #e9ecef;
   display: flex;
   align-items: center;
   justify-content: center;
}

.judge-avatar-placeholder i {
   font-size: 24px;
   color: #6c757d;
}

/* Entry Cards */
.entry-card {
   background: white;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   transition: all 0.3s ease;
   position: relative;
}

.entry-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.entry-rank {
   position: absolute;
   top: 15px;
   left: 15px;
   background: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 8px 15px;
   border-radius: 20px;
   font-weight: 700;
   z-index: 10;
}

.rank-1 {
   color: #ffd700;
}

.rank-2 {
   color: #c0c0c0;
}

.rank-3 {
   color: #cd7f32;
}

.entry-image {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

.entry-content {
   padding: 20px;
}

.entry-story {
   font-size: 14px;
   color: #666;
   font-style: italic;
   margin: 10px 0;
}

.entry-stats {
   display: flex;
   gap: 15px;
   margin-top: 15px;
}

.stat-item {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 14px;
}

.entry-actions {
   display: flex;
   gap: 10px;
}

.reaction-badges {
   display: flex;
   gap: 10px;
   justify-content: center;
}

.reaction-btn {
   background: #f8f9fa;
   border: 2px solid #e9ecef;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   font-size: 20px;
   cursor: pointer;
   transition: all 0.3s ease;
}

.reaction-btn:hover {
   transform: scale(1.2);
   border-color: #667eea;
}

.reaction-btn.reacted {
   background: #667eea;
   border-color: #667eea;
}

.trending-badge {
   position: absolute;
   top: 15px;
   right: 15px;
   background: #dc3545;
   color: white;
   padding: 6px 15px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 700;
   z-index: 10;
   animation: pulse 2s ease-in-out infinite;
}

.judges-pick-badge {
   position: absolute;
   top: 15px;
   right: 15px;
   background: #ffc107;
   color: #333;
   padding: 6px 15px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 700;
   z-index: 10;
}

.judge-score-display {
   text-align: center;
   margin: 20px 0;
}

.score-circle {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}

.score-number {
   font-size: 28px;
   font-weight: 700;
   color: white;
}

.score-max {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.8);
}

/* Hall of Fame */
.hall-of-fame-hero {
   background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
   padding: 80px 0;
}

.trophy-icon-large {
   width: 120px;
   height: 120px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 30px;
   backdrop-filter: blur(10px);
}

.trophy-icon-large i {
   font-size: 60px;
   color: #ffc107;
}

.winner-card-large {
   background: white;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0,0,0,0.15);
   transition: all 0.3s ease;
}

.winner-card-large:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.winner-badge-large {
   position: absolute;
   top: 20px;
   left: 20px;
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   color: white;
   padding: 10px 20px;
   border-radius: 50px;
   font-weight: 700;
   z-index: 10;
   display: flex;
   align-items: center;
   gap: 8px;
}

.winner-image-wrapper {
   position: relative;
   height: 300px;
   overflow: hidden;
}

.winner-image-large {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.winner-card-large:hover .winner-image-large {
   transform: scale(1.1);
}

.image-overlay-winner {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100px;
   background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.winner-content-large {
   padding: 30px;
}

.winner-chef {
   display: flex;
   align-items: center;
   gap: 15px;
}

.chef-avatar-small {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   object-fit: cover;
}

.competition-info {
   background: #f8f9fa;
   padding: 12px 15px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.winner-stats-large {
   display: flex;
   gap: 15px;
   margin-top: 20px;
}

.stat-box {
   flex: 1;
   background: #f8f9fa;
   padding: 15px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.stat-box i {
   font-size: 24px;
}

.stat-box strong {
   display: block;
   font-size: 20px;
}

.stat-box small {
   display: block;
   font-size: 11px;
   color: #666;
}

.winner-story {
   background: #f8f9fa;
   padding: 15px;
   border-radius: 10px;
   font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
   .competition-meta-large {
      grid-template-columns: 1fr 1fr;
   }
   
   .competition-stats-grid {
      grid-template-columns: 1fr;
      gap: 15px;
   }
   
   .stat-card {
      padding: 20px;
   }
   
   .stat-icon {
      width: 50px;
      height: 50px;
   }
   
   .stat-icon i {
      font-size: 24px;
   }
   
   .stat-value {
      font-size: 24px;
   }
   
   .meta-item-large {
      flex-direction: column;
      text-align: center;
   }
   
   .entry-actions {
      flex-direction: column;
   }
   
   .winner-stats-large {
      flex-direction: column;
   }
}

@keyframes pulse {
   0%, 100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.05);
   }
}