@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap");

@font-face {
  font-family: "FC Mittraphap Clear";
  src:
    url("../css/font/FCMittraphapClear-Bold.woff2") format("woff2"),
    url("../css/font/FCMittraphapClear-Bold.woff") format("woff"),
    url("../css/font/FCMittraphapClear-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FC Mittraphap Clear";
  src:
    url("../css/font/FCMittraphapClear-Heavy.woff2") format("woff2"),
    url("../css/font/FCMittraphapClear-Heavy.woff") format("woff"),
    url("../css/font/FCMittraphapClear-Heavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FC Mittraphap Clear";
  src:
    url("../css/font/FCMittraphapClear-Light.woff2") format("woff2"),
    url("../css/font/FCMittraphapClear-Light.woff") format("woff"),
    url("../css/font/FCMittraphapClear-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FC Mittraphap Clear";
  src:
    url("../css/font/FCMittraphapClear-Medium.woff2") format("woff2"),
    url("../css/font/FCMittraphapClear-Medium.woff") format("woff"),
    url("../css/font/FCMittraphapClear-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FC Mittraphap Clear";
  src:
    url("../css/font/FCMittraphapClear-Regular.woff2") format("woff2"),
    url("../css/font/FCMittraphapClear-Regular.woff") format("woff"),
    url("../css/font/FCMittraphapClear-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "FC Mittraphap Clear", sans-serif !important;
  background-color: #f9f9f9;
  color: #00005a;
  font-weight: 300;
}

.btn-smooth {
  @apply transition-all duration-300 active:scale-95 cursor-pointer select-none;
}

.btn-primary-white {
  @apply bg-white text-[#000066] shadow-lg shadow-white/5 hover:bg-gray-100 hover:-translate-y-0.5 hover:shadow-white/20;
}

.btn-outline-blue {
  @apply border-2 border-blue-600 text-white hover:bg-blue-600 hover:shadow-lg hover:shadow-blue-600/30 hover:-translate-y-0.5;
}

.shadow-soft {
  box-shadow:
    0 5px 10px -5px rgba(0, 0, 0, 0.2),
    0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

.clickable {
  @apply cursor-pointer transition-opacity hover:opacity-80 active:opacity-100;
}

.game-menu-item {
  @apply flex-shrink-0 flex flex-col items-center justify-self-center-safe py-3 px-5 rounded-none 
          transition-all duration-300 cursor-pointer;
}

.game-menu-item:active {
  transform: scale(0.95);
}

.game-menu-default {
  @apply bg-transparent;
}
.game-menu-default:hover {
  @apply bg-white/10;
}
.game-menu-default:hover iconify-icon {
  @apply text-white scale-130;
}
.game-menu-default:hover span {
  @apply text-white;
}
.game-menu-default iconify-icon {
  @apply text-3xl text-white mb-1 transition-all;
}
.game-menu-default span {
  @apply text-xs md:text-sm text-blue-100/60 tracking-wide;
}

.game-menu-active {
  @apply shadow-lg shadow-red-500/20;
  background: linear-gradient(221deg, #0042ff 13.87%, #ff0036 88.41%);
}

.game-menu-active iconify-icon {
  @apply text-3xl text-white mb-1 scale-130;
}
.game-menu-active span {
  @apply text-xs md:text-sm font-bold text-white tracking-wide;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.game-card {
  @apply relative transition-all duration-500 cursor-pointer select-none;
}

.game-card-inner {
  @apply relative overflow-hidden rounded-[12px] w-full h-full z-10;
}

.game-card:hover {
  @apply -translate-y-4 scale-105 z-50;
  filter: drop-shadow(0 15px 15px rgba(2, 16, 93, 0.4));
}

.game-card .play-button {
  @apply absolute inset-0 flex items-center justify-center opacity-0 scale-50 transition-all duration-500 z-30 pointer-events-none;
}

.game-card:hover .play-button {
  @apply opacity-100 scale-100 pointer-events-auto;
}
.game-card-inner::after {
  content: "";
  @apply absolute inset-0 bg-blue-950/80 opacity-0 transition-opacity duration-500 z-20;
}

.game-card:hover .game-card-inner::after {
  @apply opacity-100;
}

.hot-badge {
  @apply absolute top-4 right-4 z-20 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg;
}

.btn-play-card {
  @apply bg-white text-[#00005A] px-8 py-2.5 rounded-full 
         font-black text-sm shadow-xl transition-all duration-300
         cursor-pointer select-none border-none outline-none;
}

.btn-play-card:hover {
  background-color: #00005a;
  @apply text-white -translate-y-0.5 shadow-blue-900/40;
}

.btn-play-card:active {
  @apply scale-95;
}

.drop-shadow-gold {
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6))
    drop-shadow(0 0 30px rgba(255, 165, 0, 0.3));
}

@keyframes float3D {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
    filter: drop-shadow(0 5px 15px rgba(255, 215, 0, 0.5));
  }
  50% {
    transform: translateY(-20px) rotate(8deg) scale(1.05);
    filter: drop-shadow(0 15px 35px rgba(255, 215, 0, 0.8));
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    filter: drop-shadow(0 5px 15px rgba(255, 215, 0, 0.5));
  }
}

.animate-float-3d {
  animation: float3D 5s ease-in-out infinite;
}

.jackpot-number-fix {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.jackpot-badge {
  @apply absolute bottom-3 left-3 right-3 z-20;

  @apply bg-black/90 text-blue-50 py-1.5 px-2 rounded-full border border-y-amber-300;

  @apply flex items-center justify-center gap-1 shadow-lg;
}
.jackpot-symbol {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(
    180deg,
    #fff 28.57%,
    #ffb941 53.09%,
    #ffe79e 78.57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.4s ease;
  @apply font-bold text-[12px] md:text-sm;
}
.card-jackpot-value {
  @apply font-bold text-[12px] md:text-sm tracking-wide;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(
    180deg,
    #fff 28.57%,
    #ffb941 53.09%,
    #ffe79e 78.57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.4s ease;
}

.game-card:hover .jackpot-badge {
  @apply bg-black/90 bottom-4 shadow-yellow-500/40;
  transform: scale(1.05);
}

.promo-card {
  @apply bg-white rounded-[14px] overflow-hidden shadow-lg transition-all duration-300 flex flex-col h-full border-2 border-gray-100 relative;
}

.promo-card:hover {
  @apply -translate-y-2 shadow-2xl border-blue-500;
}

.promo-image {
  @apply relative overflow-hidden aspect-[4/3];
}

.promo-image img {
  @apply w-full h-full object-cover transition-transform duration-500;
}

.promo-card:hover .promo-image img {
  @apply scale-110;
}

.promo-content {
  @apply p-5 flex flex-col justify-between flex-grow;
}

.btn-details {
  @apply mt-4 w-full bg-blue-600 text-white py-2 px-4 rounded-full 
         flex items-center justify-center gap-2 font-bold text-sm
         transition-all duration-300 hover:bg-[#00005A];
}

.btn-details iconify-icon {
  @apply transition-transform duration-300 relative z-10;
}

.btn-details:hover iconify-icon {
  @apply translate-x-1;
}

.promoSwiper ~ .swiper-pagination .swiper-pagination-bullet {
  @apply bg-blue-300 opacity-60 w-2 h-2 transition-all duration-300;
}

.promoSwiper ~ .swiper-pagination .swiper-pagination-bullet-active {
  @apply !bg-blue-600 !w-5 opacity-100 rounded-full;
}

.sport-provider-card {
  @apply relative overflow-hidden rounded-[14px] transition-all duration-300 cursor-pointer;
  aspect-ratio: 14/10;
}

.sport-provider-card img {
  @apply w-full h-full object-cover transition-transform duration-500;
}

.sport-provider-card:hover img {
  @apply scale-110;
}

.sport-provider-card::after {
  content: "";
  @apply absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80;
}

.sport-provider-name {
  @apply absolute bottom-3 left-0 right-0 text-center text-yellow-300 font-bold uppercase tracking-wider z-10;
  font-family: "Fjalla One", sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 1.5rem;
}

.match-card {
  @apply bg-white rounded-[14px] p-4 transition-all duration-300 h-full;
}

.match-league {
  @apply text-center text-[#00005A] md:text-xl mb-6;
}

.match-main {
  @apply flex items-center justify-between gap-2 mb-6;
}

.team-info {
  @apply flex flex-col items-center gap-2 w-1/3;
}

.team-name {
  @apply font-bold text-[#00005A] text-xl md:text-[24px] uppercase text-center line-clamp-1;
  font-family: "Fjalla One", sans-serif;
}

.match-time-box {
  @apply border-2 border-[#00005A] rounded-2xl px-4 py-2 text-center min-w-[100px];
}

.match-odds-container {
  @apply bg-blue-600 rounded-[10px] overflow-hidden flex items-stretch text-white text-sm md:text-base;
}

.odds-item {
  @apply flex-1 flex items-center justify-around py-2 px-1;
  font-family: "Fjalla One", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.odds-provider {
  @apply bg-yellow-300 text-[#00005A] px-3 flex items-center justify-center uppercase;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.odds-val {
  @apply text-white;
}

.odds-val.highlight {
  @apply text-yellow-300;
}

.provider-tab-slide {
  @apply flex items-center justify-center p-2 h-10 md:h-12 rounded-[8px] 
         bg-[#00005A] transition-all duration-300 cursor-pointer;
  min-width: 110px;
}

.provider-tab-slide.active,
.provider-tab-slide:hover {
  @apply grayscale-0 opacity-100 bg-blue-600;
}
.provider-tab-slide.active img {
  @apply grayscale-0 scale-110;
}

.provider-tab-slide img {
  @apply max-h-5 md:max-h-6 object-contain grayscale transition-all duration-300;
}
.provider-tab-slide:hover img {
  @apply scale-110 transition-all grayscale-0;
}

.provider-nav-btn {
  @apply w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center cursor-pointer
         hover:bg-blue-600 hover:text-white transition-all duration-300;
}

.search-container {
  @apply relative flex items-center w-full max-w-[280px] transition-all duration-300;
}

.search-input {
  @apply w-full bg-gray-200 border-2 border-transparent py-2 pl-10 pr-4 rounded-full 
         text-sm font-medium text-[#00005A] outline-none transition-all duration-300
         placeholder:text-gray-400 focus:bg-white focus:border-blue-600 focus:shadow-lg focus:shadow-blue-600/10;
}

.search-icon {
  @apply absolute left-3 text-xl text-gray-400 transition-colors duration-300;
}

.search-input:focus + .search-icon {
  @apply text-blue-600;
}

.section-header-flex {
  @apply flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4 px-4;
}