/* ============================================================
   AllCric — MATCH CENTER + PREDICTIONS (SHORTCODE) LIGHT THEME
   ------------------------------------------------------------
   Ye file `[match]` aur `[predictions_post]` shortcodes ke
   dwara generate hone wale HTML (functions.php se) ko style
   karti hai.

   FIXED VERSION (important):
   Pehle wali file me ek "grid/flex fallback" tha jo tab active
   hota tha jab Owl Carousel abhi `owl-loaded` class nahi laga
   paata (:not(.owl-loaded)). Owl Carousel JS library hi
   enqueue nahi ho rahi thi (functions.php me missing thi), isliye
   ye fallback HAMESHA active rehta tha — isi wajah se poora
   match/prediction data ek lambi list/grid me neeche stack ho
   raha tha aur scroll bahut zyada karna padta tha, arrows bhi
   kabhi nahi bante the.

   Ab jab Owl Carousel properly enqueue ho rahi hai (functions.php
   me naya code + custom-script.js), Owl khud hi responsive
   items count (3 desktop / 2 tablet / 1 mobile) aur horizontal
   sliding handle karta hai — isliye wo fallback CSS yaha se
   HATA di gayi hai. Sirf arrows (.owl-nav) ki styling add ki
   gayi hai kyunki wo pehle bilkul unstyled/invisible thi.
   ============================================================ */

:root{
  --ac-bg:#faf9f5;
  --ac-panel:#ffffff;
  --ac-line:#e6e4da;
  --ac-green:#3f9c22;
  --ac-green-light:#eef7e9;
  --ac-text:#14150f;
  --ac-dim:#5f665a;
  --ac-faint:#8c9285;
  --ac-r:10px;
  --ac-amber:#facc15;
  --ac-amber-text:#7a5b00;
  --ac-red:#ef4444;
}

/* -----------------------------------------------------------
   SECTION WRAPPER (both shortcodes use .match-center)
----------------------------------------------------------- */
.match-center{
  padding:70px 0 !important;
  background:var(--ac-bg) !important;
}

.match-center .container{
  max-width:1140px !important;
  margin:0 auto !important;
  padding:0 20px !important;
}

.match-inner{
  text-align:center !important;
  margin-bottom:40px !important;
}

.match-inner h2,
.match-inner h5{
  font-family:'Space Grotesk', sans-serif !important;
  font-size:32px !important;
  font-weight:700 !important;
  color:var(--ac-text) !important;
  line-height:1.25 !important;
}

.match-inner p{
  font-family:'Inter', sans-serif !important;
  font-size:15.5px !important;
  color:var(--ac-dim) !important;
  max-width:560px !important;
  margin:12px auto 0 !important;
}

/* ============================================================
   ARROW NAVIGATION (.owl-nav) — ab ye kaam karegi kyunki Owl
   library properly enqueue ho rahi hai. ".match-slider" ko
   position:relative diya taaki arrows cards ke upar float ho
   sakein (left/right edge pe, half-overlapping look).
   ============================================================ */
.match-slider{
  position:relative !important;
}

.match-slider .owl-nav{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  pointer-events:none !important;  /* sirf buttons pe click chale, beech ke area pe nahi */
  margin:0 !important;
  padding:0 4px !important;
}

.match-slider .owl-nav button.owl-prev,
.match-slider .owl-nav button.owl-next{
  pointer-events:auto !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:var(--ac-panel) !important;
  border:1px solid var(--ac-line) !important;
  color:var(--ac-text) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 4px 14px rgba(20,21,15,.14) !important;
  font-size:14px !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease !important;
  z-index:5 !important;
}

.match-slider .owl-nav button.owl-prev{ margin-left:-6px !important; }
.match-slider .owl-nav button.owl-next{ margin-right:-6px !important; }

.match-slider .owl-nav button.owl-prev:hover,
.match-slider .owl-nav button.owl-next:hover{
  background:var(--ac-green) !important;
  border-color:var(--ac-green) !important;
  color:#fff !important;
}

/* Owl khud hi ek boundary pe pahunchne ke baad (agar loop:false ho)
   button ko "disabled" class deta hai */
.match-slider .owl-nav button.disabled{
  opacity:.35 !important;
  cursor:default !important;
  pointer-events:none !important;
}

/* Chhoti screen pe arrows hata do — swipe se hi kaam chal jata hai,
   arrows cards ko cover karke chhote screen pe ganda dikhte hain.
   Agar mobile pe bhi arrows chahiye ho to ye poora block delete kar dena. */
@media(max-width:640px){
  .match-slider .owl-nav{
    display:none !important;
  }
}

/* Dots agar future me on karo to */
.match-slider .owl-dots{
  text-align:center !important;
  margin-top:18px !important;
}
.match-slider .owl-dots .owl-dot span{
  background:var(--ac-line) !important;
  width:8px !important;
  height:8px !important;
  margin:0 4px !important;
  border-radius:50% !important;
  display:block !important;
}
.match-slider .owl-dots .owl-dot.active span{
  background:var(--ac-green) !important;
}

/* Owl apne stage ke around thoda overflow clip karta hai — arrows
   dikhne ke liye edges pe zyada clip nahi hona chahiye */
.match-slider .owl-stage-outer{
  overflow:hidden !important;
}

/* ============================================================
   1) "EXPLORE EVERY MATCH ON TIME" — [match] shortcode markup
      (.ac-match-row cards, real API data)
   ============================================================ */
.ac-match-row{
 /* display:grid !important;
  grid-template-columns:1fr auto auto !important;
  gap:18px !important;*/
  align-items:center !important;
  padding:20px 24px !important;
  background:var(--ac-panel) !important;
  border:1px solid var(--ac-line) !important;
  border-radius:var(--ac-r) !important;
  height:100% !important;display: flow-root;min-height: 180px;
}

.ac-match-row .ac-league{
  font-size:11.5px !important;
  color:var(--ac-faint) !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  margin-bottom:8px !important;
  font-weight:600 !important;
	text-align: center;
}
.ac-match-teams{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--ac-text) !important;
  /*flex-wrap:wrap !important;*/
}
.ac-match-teams img{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
  background:#fff !important;
  border-radius:50% !important;
  padding:3px !important;
  border:1px solid var(--ac-line) !important;
}
.ac-match-teams .ac-sep{
  color:var(--ac-faint) !important;
  font-size:12px !important;
  font-weight:400 !important;
}
.ac-match-time{
  font-size:13px !important;
  color:var(--ac-dim) !important;
  white-space:nowrap !important;width: 60%;
    float: left;
    padding: 13px 0;
}
.ac-badge{
  font-size:11px !important;
  font-weight:600 !important;
  padding:5px 13px !important;
  border-radius:999px !important;
  border:1px solid var(--ac-line) !important;
  color:var(--ac-dim) !important;
  white-space:nowrap !important;
}
.ac-badge.ac-live{
  background:var(--ac-red) !important;
  border-color:var(--ac-red) !important;
  color:#fff !important;
}
.ac-badge.ac-upcoming{
  background:#fff8dd !important;
  border-color:#f4dd8a !important;
  color:var(--ac-amber-text) !important;width: 40%;
    float: left;
    text-align: center;
    display: inline-block;
    margin: 5px 0;
}

/* ============================================================
   2) "CRICKET MATCH PREDICTIONS" — [predictions_post] markup
      (.item.ac-pred-card cards, real API data)
   ============================================================ */
.ac-pred-card{
  background:var(--ac-panel) !important;
  border:1px solid var(--ac-line) !important;
  border-radius:var(--ac-r) !important;
  padding:24px !important;
  box-shadow:0 1px 2px rgba(20,21,15,.03) !important;
  height:100% !important;
  overflow:visible !important;   /* legacy .item{overflow:hidden} clip na kare */
}
.ac-pred-card .ac-league{
  font-size:11.5px !important;
  color:var(--ac-faint) !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  margin-bottom:16px !important;
  font-weight:600 !important;
}
.ac-pred-card .ac-vs-teams{
  display:flex !important;
  justify-content:space-between !important;
  margin-bottom:18px !important;
}
.ac-pred-card .ac-t{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  width:44% !important;
  text-align:center !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  color:var(--ac-text) !important;
}
.ac-pred-card .ac-t img{
  width:36px !important;
  height:36px !important;
  object-fit:contain !important;
  background:#fff !important;
  border-radius:50% !important;
  padding:3px !important;
  border:1px solid var(--ac-line) !important;
}
.ac-stack-avatars{
  display:flex !important;
  margin-bottom:18px !important;
}
.ac-stack-avatars img{
  width:26px !important;
  height:26px !important;
  border-radius:50% !important;
  border:2px solid var(--ac-panel) !important;
  margin-left:-8px !important;
  object-fit:cover !important;
}
.ac-stack-avatars img:first-child{
  margin-left:0 !important;
}
.ac-lock-btn,
.ac-pred-card .ac-lock-btn{
  width:100% !important;
  background:transparent !important;
  border:1px solid var(--ac-green) !important;
  color:var(--ac-green) !important;
  padding:11px !important;
  border-radius:8px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  font-family:'Inter', sans-serif !important;
}
.ac-lock-btn:hover{
  background:var(--ac-green) !important;
  color:#fff !important;
}

/* -----------------------------------------------------------
   Legacy ".item" class bhi same div pe hai (class="item ac-pred-card")
   isliye inhe conflict na hone dene ke liye halka rakha hai —
   inn values ko upar wali .ac-pred-card se match rakha gaya hai.
----------------------------------------------------------- */
#prediction-slider .item{
  transition:box-shadow .2s ease !important;
}
#prediction-slider .item:hover{
  box-shadow:0 6px 18px rgba(20,21,15,.08) !important;
}

/* -----------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------- */
@media(max-width:640px){
  .ac-match-row{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  .ac-match-time{ text-align:left !important; }
  .match-inner h2,
  .match-inner h5{ font-size:24px !important; }
}


/* ============================================================
   MODAL / POPUP STYLING
   ============================================================ */
.modal{
  z-index:9999 !important;
}
.modal-backdrop{
  z-index:9998 !important;
}
.modal-dialog{
  max-width:520px !important;
}
.modal-content{
  border-radius:14px !important;
  border:none !important;
  overflow:hidden !important;
  box-shadow:0 20px 50px rgba(0,0,0,.25) !important;
}
.modal-header{
  border-bottom:none !important;
  padding:16px 20px 0 !important;
  justify-content:flex-end !important;
}
.modal-header .modal-title{
  font-family:'Space Grotesk', sans-serif !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--ac-text) !important;
  margin-right:auto !important;
}
.modal-body{
  padding:10px 24px 28px !important;
}

/* --- Get The App modal --- */
/* ================= Get The App popup (#exampleModal) ================= */

.pre-first-modal .modal-dialog{
	max-width:900px;
	width:calc(100% - 32px);
	margin-left:auto;
	margin-right:auto;
}

.pre-first-modal .modal-content{
	border:0;
	border-radius:22px;
	overflow:hidden;
	max-height:92vh;
	box-shadow:0 24px 60px rgba(12,15,20,.25);
	font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}

.pre-first-modal .modal-header{
	border:0;
	padding:0;
	position:absolute;
	top:14px;
	left:14px;
	right:auto;
	z-index:5;
}
.pre-first-modal .btn-close{
	width:32px;
	height:32px;
	padding:0;
	opacity:1;
	border-radius:50%;
	background-color:rgba(255,255,255,.92);
	box-shadow:0 2px 10px rgba(0,0,0,.18);
}

.pre-first-modal .modal-body{
	padding:0;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:stretch;
	max-height:92vh;
	overflow-y:auto;
}

/* left white panel */
.pre-first-modal .modal-left-img{
	background:#fff;
	padding:56px 30px 32px;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:0;
}
.pre-first-modal .modal-left-img img{
	max-width:100%;
	max-height:300px;
	width:auto;
	height:auto;
	display:block;
	margin:0 auto;
	object-fit:contain;
}

/* right green panel */
.pre-first-modal .modal-right-content{
	background:#7ED957;
	padding:40px 30px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
	gap:8px;
	min-width:0;
}
.pre-first-modal .modal-right-content h2{
	font-size:clamp(24px,2.4vw,32px);
	font-weight:800;
	line-height:1.12;
	color:#0C0F14;
	margin:0 0 6px;
	overflow-wrap:normal;
	word-break:normal;
}
.pre-first-modal .modal-right-content p{
	font-size:16px;
	font-weight:600;
	color:#0C0F14;
	margin:0;
}

.pre-first-modal .download-btn{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	margin-top:22px;
}
.pre-first-modal .download-btn a{
	display:block;
	line-height:0;
	width:180px;
	max-width:100%;
}
.pre-first-modal .download-btn img{
	width:100%;
	height:auto;
	max-width:100%;
	display:block;
	object-fit:contain;
}

/* mobile */
@media (max-width:820px){
	.pre-first-modal .modal-body{ grid-template-columns:1fr; }
	.pre-first-modal .modal-left-img{ padding:52px 20px 20px; }
	.pre-first-modal .modal-left-img img{ max-height:200px; }
	.pre-first-modal .modal-right-content{ padding:28px 20px 32px; }
	.pre-first-modal .modal-right-content h2{ font-size:24px; }
	.pre-first-modal .download-btn a{ width:160px; }
}

/* ================= Tipster modal (Unlock Tip popup) ================= */


.tipster-modal .modal-dialog{
	max-width:980px;
	width:calc(100% - 32px);
	margin-left:auto;
	margin-right:auto;
}

.tipster-modal .modal-content{
	border:0;
	border-radius:22px;
	overflow:hidden;
	max-height:92vh;
	box-shadow:0 24px 60px rgba(12,15,20,.25);
	font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}

.tipster-modal .modal-header{
	border:0;
	padding:0;
	position:absolute;
	top:14px;
	left:14px;
	right:auto;
	z-index:5;
}
.tipster-modal .btn-close{
	width:32px;
	height:32px;
	padding:0;
	opacity:1;
	border-radius:50%;
	background-color:rgba(255,255,255,.92);
	box-shadow:0 2px 10px rgba(0,0,0,.18);
}

.tipster-modal .modal-body{
	padding:0;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
	align-items:stretch;
	max-height:92vh;
	overflow-y:auto;
}

/* ---------- left white panel ---------- */
/* ---------- left white panel ---------- */
.tipster-modal .tipster-bottom{
	background:#fff;
	padding:56px 32px 32px;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	gap:18px;
	min-width:0;
}
.tipster-modal .tipster-bottom h2{
	font-size:clamp(24px,2.4vw,32px);
	font-weight:800;
	line-height:1.12;
	color:#0C0F14;
	margin:0;
	overflow-wrap:normal;
	word-break:normal;
	hyphens:none;
}
.tipster-modal .modal-left-img{
	flex:1;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:0;
}
.tipster-modal .modal-left-img img{
	max-width:100%;
	max-height:240px;
	width:auto;
	height:auto;
	display:block;
	margin:0 auto;
	object-fit:contain;
}
.tipster-modal .download-btn{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
}
.tipster-modal .download-btn a{
	display:block;
	line-height:0;
	width:180px;
	max-width:100%;
}
.tipster-modal .download-btn img{
	width:100%;
	height:auto;
	max-width:100%;
	display:block;
	object-fit:contain;
}
/* ---------- right green panel ---------- */
.tipster-modal .modal-right-content{
	background:#7ED957;
	padding:36px 26px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
	min-width:0;
}
.tipster-modal .modal-right-content p:first-of-type{
	font-size:clamp(17px,1.7vw,22px);
	font-weight:800;
	color:#0C0F14;
	margin:0 0 10px;
	line-height:1.25;
}
.tipster-modal .modal-right-content p:nth-of-type(2){
	font-size:clamp(15px,1.3vw,18px);
	font-weight:700;
	color:#0C0F14;
	margin:0 0 20px;
}

/* ---------- tipster table ---------- */
.tipster-modal .tipster-table{
	border-radius:10px;
	overflow:hidden;
	max-width:100%;
}
.tipster-modal .tipster-table table{
	margin:0;
	width:100%;
	table-layout:fixed;
	border-collapse:separate;
	border-spacing:0;
	--bs-table-bg:transparent;
	--bs-table-hover-bg:#EAF9DA;
}
.tipster-modal .tipster-table thead th{
	background:#2B2B2B;
	color:#fff;
	border:0;
	font-size:13px;
	font-weight:700;
	text-align:left;
	padding:11px 12px;
	white-space:nowrap;
}
.tipster-modal .tipster-table tbody td{
	background:#fff;
	border:0;
	border-bottom:1px solid rgba(0,0,0,.07);
	padding:7px 12px;
	vertical-align:middle;
	text-align:left;
	font-size:14px;
	font-weight:600;
	color:#0C0F14;
}
.tipster-modal .tipster-table tbody tr:nth-child(even) td{
	background:#F4FDEC;
}
.tipster-modal .tipster-table tbody tr:last-child td{
	border-bottom:0;
}

/* column widths — Name ko max room */
.tipster-modal .tipster-table th:first-child,
.tipster-modal .tipster-table td:first-child{
	width:58px;
	padding-left:12px;
	padding-right:8px;
}
.tipster-modal .tipster-table th:nth-child(2),
.tipster-modal .tipster-table td:nth-child(2){
	width:auto;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.tipster-modal .tipster-table th:nth-child(3),
.tipster-modal .tipster-table td:nth-child(3){
	width:62px;
	text-align:right;
	padding-right:12px;
	white-space:nowrap;
}

.tipster-modal .tipster-table td img{
	width:38px;
	height:38px;
	min-width:38px;
	max-width:38px;
	object-fit:cover;
	border-radius:6px;
	display:block;
}

/* ---------- mobile ---------- */
@media (max-width:820px){
	.tipster-modal .modal-body{ grid-template-columns:1fr; }
	.tipster-modal .tipster-bottom{ padding:52px 20px 22px; gap:16px; }
	.tipster-modal .tipster-bottom h2{ font-size:24px; }
	.tipster-modal .modal-left-img img{ max-height:180px; }
	.tipster-modal .download-btn img{ height:36px; }
	.tipster-modal .modal-right-content{ padding:26px 18px 30px; }
	.tipster-modal .tipster-table td img{ width:34px; height:34px; min-width:34px; max-width:34px; }
	.tipster-modal .tipster-table th:first-child,
	.tipster-modal .tipster-table td:first-child{ width:52px; }
}



/* ================================================================
   1) OWL NAV ARROWS
   ================================================================ */
.match-center .owl-carousel{
	position:relative;
}
.match-center .owl-nav{
	margin:0;
}
.match-center .owl-nav button.owl-prev,
.match-center .owl-nav button.owl-next{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:44px;
	height:44px;
	margin:0;
	padding:0;
	border-radius:50%;
	background:#fff !important;
	border:1px solid #E7EAEF !important;
	box-shadow:0 4px 14px rgba(12,15,20,.12);
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .2s ease, border-color .2s ease;
	z-index:3;
}
.match-center .owl-nav button.owl-prev{ left:-20px; }
.match-center .owl-nav button.owl-next{ right:-20px; }

.match-center .owl-nav button.owl-prev:hover,
.match-center .owl-nav button.owl-next:hover{
	background:#8CFF5C !important;
	border-color:#8CFF5C !important;
}
.match-center .owl-nav button.disabled{
	opacity:.3;
	pointer-events:none;
}

/* arrow glyph — CSS se banaya hai, font ki zarurat nahi */
.match-center .owl-nav button .ac-arrow{ display:none; }
.match-center .owl-nav button::before{
	content:'';
	display:block;
	width:10px;
	height:10px;
	border-top:2px solid #0C0F14;
	border-right:2px solid #0C0F14;
}
.match-center .owl-nav button.owl-prev::before{
	transform:rotate(-135deg);
	margin-left:4px;
}
.match-center .owl-nav button.owl-next::before{
	transform:rotate(45deg);
	margin-right:4px;
}

@media (max-width:991px){
	.match-center .owl-nav button.owl-prev{ left:-6px; }
	.match-center .owl-nav button.owl-next{ right:-6px; }
	.match-center .owl-nav button.owl-prev,
	.match-center .owl-nav button.owl-next{ width:38px; height:38px; }
}


/* ================================================================
   2) PREDICTION CARD — white theme + green button
   ================================================================ */
.prediction-slider .item{
	background:#fff !important;
	border:1px solid #E7EAEF !important;
	border-radius:16px !important;
	box-shadow:0 2px 10px rgba(12,15,20,.05) !important;
	overflow:hidden;
	height:100%;
}
.prediction-slider .item:hover{
	transform:translateY(-4px);
	border-color:#8CFF5C !important;
	box-shadow:0 12px 28px rgba(12,15,20,.10) !important;
}

.prediction-slider .item .item-top{
	background:#fff !important;
	color:#0C0F14 !important;
	padding:22px 20px 18px !important;
	border-bottom:1px solid #F0F2F5;
}
.prediction-slider .item .item-top h5{
	color:#6B7280 !important;
	font-size:12px !important;
	font-weight:600 !important;
	letter-spacing:.08em;
	text-transform:uppercase;
	text-align:center;
	margin:0 0 14px !important;
}

.prediction-slider .item .live-match{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:18px !important;
}
.prediction-slider .item .live-match p{
	color:#6B7280 !important;
	font-size:13px;
	font-weight:500;
	margin:0;
}
.prediction-slider .item .live-match .upcoming{
	background:rgba(140,255,92,.25) !important;
	color:#3F7A0B !important;
	font-size:11px !important;
	font-weight:700;
	letter-spacing:.05em;
	text-transform:uppercase;
	padding:5px 13px !important;
	border-radius:999px !important;
	white-space:nowrap;
}
.prediction-slider .item .live-match .live{
	background:#FFE9E9 !important;
	color:#D12B2B !important;
	font-size:11px !important;
	font-weight:700;
	letter-spacing:.05em;
	text-transform:uppercase;
	padding:5px 13px !important;
	border-radius:999px !important;
	white-space:nowrap;
}

.prediction-slider .item .match-between{
	display:grid !important;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:10px;
}
.prediction-slider .item .match-between > div{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	text-align:center;
	flex:none !important;
}
.prediction-slider .item .match-between img{
	width:56px !important;
	height:56px !important;
	min-width:56px;
	max-width:56px;
	object-fit:contain !important;
	background:#fff !important;
	border:1px solid #E7EAEF;
	border-radius:50% !important;
	padding:6px !important;
	margin:0 !important;
}
.prediction-slider .item .match-between strong{
	display:block;
	color:#0C0F14 !important;
	font-size:13px !important;
	font-weight:600;
	line-height:1.3;
}
.prediction-slider .item .match-between > div:nth-child(2) span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px !important;
	height:40px !important;
	margin:0 !important;
	border-radius:50% !important;
	background:#F5F7FA !important;
	color:#6B7280 !important;
	font-size:12px;
	font-weight:700;
}

.prediction-slider .item .item-bottom{
	padding:16px 20px 20px !important;
}
.prediction-slider .item .item-bottom .btn,
.prediction-slider .item .item-bottom .btn-primary{
	width:100%;
	background:#8CFF5C !important;
	border:0 !important;
	color:#0C0F14 !important;
	font-family:'Space Grotesk','Inter',sans-serif;
	font-size:14px !important;
	font-weight:700 !important;
	padding:13px 20px !important;
	border-radius:999px !important;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	box-shadow:none !important;
	transition:background .2s ease;
}
.prediction-slider .item .item-bottom .btn:hover,
.prediction-slider .item .item-bottom .btn-primary:hover,
.prediction-slider .item .item-bottom .btn:focus,
.prediction-slider .item .item-bottom .btn-primary:focus{
	background:#0C0F14 !important;
	color:#fff !important;
}
.prediction-slider .item .item-bottom .btn i{
	font-size:13px;
}

@media (max-width:576px){
	.prediction-slider .item .match-between img{
		width:46px !important; height:46px !important;
		min-width:46px; max-width:46px;
	}
	.prediction-slider .item .match-between > div:nth-child(2) span{
		width:34px !important; height:34px !important;
	}
}