/*
Theme Name: Kadence Child
Template: kadence
Version: 1.0
*/

/* =========================================================
   MegaRoll UI — style.css (FULL / v7.4 FIRE)
   - Bonus: left-aligned, FULL TEXT on ONE line
   - tighter vertical spacing between Bonus / UTP / Rating / Stars
   - TOP #1: true fire-looking outer ring (SMOOTH animation, perfectly sized)
   ========================================================= */

:root{
  --mr-text: rgba(255,255,255,.92);
  --mr-dim: rgba(255,255,255,.70);

  --mr-shadow: 0 18px 46px rgba(0,0,0,.45);
  --mr-shadow-hover: 0 34px 88px rgba(0,0,0,.72);

  --mr-chip-bg: rgba(0,0,0,.30);
  --mr-chip-line: rgba(255,255,255,.16);

  --mr-bonus-bg: rgba(255, 200, 60, .12);
  --mr-bonus-line: rgba(255, 200, 60, .34);

  --mr-btn-bg: #f4cf67;
  --mr-btn-text: #141414;

  --mr-card-outline: rgba(255,255,255,.10);
  --mr-card-outline-hover: rgba(244,207,103,.55);

  --mr-btn-border: rgba(0,0,0,.18);
  --mr-btn-border-hover: rgba(0,0,0,.34);

  --mr-accent: #f4cf67;
  --mr-top10: #55d6ff;

  /* TOP3 outlines */
  --mr-top1: rgba(244,207,103,.90);
  --mr-top2: rgba(120,210,255,.90);
  --mr-top3: rgba(190,150,255,.90);
}

/* ==========================
   HEADER
   ========================== */
.casino-title{
  font-weight: 950 !important;
  text-align: center !important;

  margin: -6px 0 0 0 !important;
  padding: 0 !important;

  margin-bottom: 18px !important;

  color: rgba(255,255,255,.98) !important;
  text-shadow: 0 4px 28px rgba(0,0,0,.70) !important;
  letter-spacing: .2px;
}

.casino-title .mr-headline{
  display:block;
  font-size: clamp(28px, 2.35vw, 40px) !important;
  line-height: 1.06 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.casino-title .mr-top10{
  color: var(--mr-top10) !important;
  font-weight: 950 !important;
  text-shadow: 0 6px 26px rgba(85,214,255,.18), 0 4px 22px rgba(0,0,0,.65) !important;
  margin-right: 6px;
}

.casino-title .mr-accent{
  color: var(--mr-accent) !important;
  text-shadow: 0 6px 26px rgba(244,207,103,.16), 0 4px 22px rgba(0,0,0,.65) !important;
}

.casino-title .subhead{
  display:block;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  font-size: clamp(15px, 1.35vw, 19px) !important;
  font-weight: 750 !important;
  color: rgba(255,255,255,.86) !important;
  letter-spacing: .15px;
}

/* ==========================
   TRUST BAR
   ========================== */
.trust-bar{
  width: 100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;

  gap: 14px !important;
  margin: 14px 0 14px 0 !important;
  padding: 0 12px !important;
}

.trust-chip{
  display:inline-flex;
  align-items:center;
  gap:12px;

  background: var(--mr-chip-bg);
  border: 1px solid var(--mr-chip-line);

  padding: 12px 18px !important;
  border-radius: 999px;

  font-size: 15.5px !important;
  font-weight: 800 !important;

  line-height: 1 !important;
  color: var(--mr-text) !important;

  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}

/* ==========================
   CARD
   ========================== */
.casino-card{
  position: relative !important;
  width: 100% !important;
  border-radius: 28px !important;
  overflow: visible !important; 
  border: 0 !important;

  box-shadow:
    var(--mr-shadow),
    inset 0 0 0 1px var(--mr-card-outline) !important;

  outline: none !important;
  cursor: default !important;

  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  will-change: transform, box-shadow;
  contain: paint;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.casino-card,
.casino-card *{
  color: var(--mr-text);
  box-sizing: border-box;
}

.casino-card:hover{
  cursor: default !important;
  transform: translate3d(0,-8px,0);
  box-shadow:
    var(--mr-shadow-hover),
    inset 0 0 0 2px var(--mr-card-outline-hover) !important;
}

/* glow layer (never catches clicks) */
.casino-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 28px;
  pointer-events:none !important;
  opacity: 0;
  transition: opacity .18s ease;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 0 rgba(244,207,103,0);
  z-index: 1;
}
.casino-card:hover::after{
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 4px rgba(244,207,103,.10);
}

.casino-card::before,
.casino-card::after{
  pointer-events:none !important;
}

/* remove link-feel if something wraps card */
.casino-card a:not(.elementor-button):not(.elementor-button-link){
  cursor: default !important;
  text-decoration: none !important;
}

/* ==========================
   TOP 3 outlines (base)
   ========================== */
.casino-card.mr-top-1{
  box-shadow:
    var(--mr-shadow),
    inset 0 0 0 3px rgba(244,207,103,.45) !important;
}

/* ✅ ИСПРАВЛЕНО: более яркая обводка при hover для TOP 1 */
.casino-card.mr-top-1:hover{
  box-shadow:
    var(--mr-shadow-hover),
    inset 0 0 0 3px rgba(244,207,103,1) !important;
}

.casino-card.mr-top-2{
  box-shadow:
    var(--mr-shadow),
    inset 0 0 0 3px rgba(120,210,255,.55) !important;
}
.casino-card.mr-top-2:hover{
  box-shadow:
    var(--mr-shadow-hover),
    inset 0 0 0 3px var(--mr-top2) !important;
}

.casino-card.mr-top-3{
  box-shadow:
    var(--mr-shadow),
    inset 0 0 0 3px rgba(190,150,255,.55) !important;
}
.casino-card.mr-top-3:hover{
  box-shadow:
    var(--mr-shadow-hover),
    inset 0 0 0 3px var(--mr-top3) !important;
}

/* ==========================
   TOP badge
   ========================== */
.mr-badge{
  position:absolute;
  top: 16px;
  left: 16px;
  z-index: 60;

  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;

  font-size: 12.5px;
  font-weight: 900;
  line-height: 1;

  color: #121212 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.32);
}

.mr-badge .mr-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  line-height: 1;
}

.mr-badge.badge-1{ background: rgba(244,207,103,.92); }
.mr-badge.badge-2{ background: rgba(120,210,255,.92); }
.mr-badge.badge-3{ background: rgba(190,150,255,.92); }

/* ==========================
   BONUS (left aligned, FULL TEXT on ONE line)
   ========================== */
.casino-bonus::before{ content:none !important; display:none !important; }

.casino-card .casino-bonus{
  display:flex !important;
  align-items:center !important;

  justify-content:flex-start !important;
  text-align:left !important;

  gap: 8px !important;

  min-height: 36px !important;
  padding: 8px 14px !important;

  border-radius: 12px;

  background: var(--mr-bonus-bg);
  border: 1px solid var(--mr-bonus-line);

  box-shadow: 0 12px 26px rgba(0,0,0,.22);

  font-weight: 950 !important;
  line-height: 1 !important;

  margin: 0 0 3px 0 !important;

  white-space: nowrap !important;
  overflow: visible !important;
  width: max-content !important;
  max-width: 100% !important;
}

.casino-card .casino-bonus .mr-bonus-ico{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size: 14px !important;
  line-height: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;
}

.casino-card .casino-bonus .bonus-text{
  display:block !important;

  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255,255,255,.95) !important;
  font-weight: 950 !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  
  font-size: clamp(11px, 1.2vw, 14px) !important;
  letter-spacing: -0.2px !important;

  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.casino-card .casino-bonus .bonus-text *,
.casino-card .casino-bonus p,
.casino-card .casino-bonus span,
.casino-card .casino-bonus div{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: inherit !important;
}

/* ==========================
   UTP (tighter)
   ========================== */
.utp-row{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 2px !important;
  align-items:center;
}

.utp-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.12);

  padding: 8px 12px;
  border-radius: 999px;

  font-size: 13.5px;
  font-weight: 750;
  line-height: 1;

  min-height: 30px;

  white-space: nowrap !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  color: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.20);
}

/* ==========================
   RATING TEXT (tighter)
   ========================== */
.rating-text{
  margin-top: 2px !important;
  margin-bottom: 0px !important;
  font-size: 12.8px !important;
  font-weight: 750 !important;

  color: rgba(255,255,255,.78) !important;

  display:block;
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.casino-card .elementor-widget-star-rating,
.casino-card .elementor-star-rating,
.casino-card .e-star-rating,
.casino-card .star-rating{
  margin-top: 0px !important;
}

/* ==========================
   BUTTON
   ========================== */
.casino-card .elementor-button,
.casino-card a.elementor-button,
.casino-card a.elementor-button-link{
  background: var(--mr-btn-bg) !important;

  color: var(--mr-btn-text) !important;
  -webkit-text-fill-color: var(--mr-btn-text) !important;

  border: 2px solid var(--mr-btn-border) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    filter .16s ease;

  cursor: pointer !important;

  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform;
}

.casino-card .elementor-button .elementor-button-text,
.casino-card a.elementor-button .elementor-button-text,
.casino-card a.elementor-button-link .elementor-button-text{
  color: var(--mr-btn-text) !important;
  -webkit-text-fill-color: var(--mr-btn-text) !important;
  font-weight: 900 !important;
}

.casino-card .elementor-button:hover,
.casino-card a.elementor-button:hover,
.casino-card a.elementor-button-link:hover{
  transform: translate3d(0,-3px,0);

  border-color: rgba(255,255,255,.95) !important;

  box-shadow:
    0 22px 56px rgba(0,0,0,.40),
    0 0 0 4px rgba(255,255,255,.12),
    0 0 0 8px rgba(244,207,103,.16) !important;

  filter: brightness(1.02);
}

/* keep cursor stable */
.casino-card *:hover{ cursor: inherit; }

/* ==========================
   Hide original bonus source
   ========================== */
.mr-hide-source{ display:none !important; }

/* =========================================================
   TOP #1: REAL FIRE OUTER RING (looks like fire)
   ========================================================= */

@keyframes mr-fire-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 120% 50%; }
  100% { background-position: 0% 50%; }
}

/* ✅ ИСПРАВЛЕНО: убран translate3d — только opacity, позиция не гуляет */
@keyframes mr-embers {
  0%   { opacity: .55; }
  50%  { opacity: .85; }
  100% { opacity: .55; }
}

/* OUTER FIRE GLOW LAYER */
.casino-card.mr-top-1::before{
  content:"";
  position:absolute;

  /* ✅ Статичное положение: точно совпадает с границами карточки */
  inset: 0;

  /* ✅ Тот же радиус, что и у карточки */
  border-radius: 28px;
  pointer-events:none !important;

  /* thick ring */
  border: 4px solid transparent;

  /* gradient fire ring */
  background-image:
    radial-gradient(circle at 18% 40%, rgba(255,220,140,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 22%, rgba(255,160,60,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 65%, rgba(255,90,20,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 78%, rgba(255,200,90,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 38%, rgba(255,130,40,.55) 0 1px, transparent 2px),
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    linear-gradient(90deg,
      rgba(255, 40, 0, .95),
      rgba(255, 140, 0, .95),
      rgba(255, 230, 120, .95),
      rgba(255, 70, 0, .95),
      rgba(255, 180, 0, .95),
      rgba(255, 40, 0, .95)
    );
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-size:
    220px 220px,
    260px 260px,
    240px 240px,
    280px 280px,
    260px 260px,
    100% 100%,
    340% 340%;

  /* ✅ Только opacity пульсирует — позиция остаётся неподвижной */
  animation:
    mr-embers 4s ease-in-out infinite,
    mr-fire-flow 6s linear infinite;

  filter: blur(0.2px);
  box-shadow:
    0 0 14px rgba(255,120,0,.25),
    0 0 30px rgba(255,60,0,.20),
    0 0 70px rgba(255,120,0,.12);

  z-index: 0;
}

.casino-card.mr-top-1{
  position: relative !important;
}

.casino-card.mr-top-1 .mr-badge{
  z-index: 60;
}

/* ✅ ИСПРАВЛЕНО: более яркое свечение огня при hover */
.casino-card.mr-top-1:hover::before{
  box-shadow:
    0 0 22px rgba(255,140,0,.55),
    0 0 50px rgba(255,60,0,.40),
    0 0 100px rgba(255,140,0,.28);
}

/* ==========================
   BOTTOM ARTICLE SPACING
   ========================== */
.entry-content h2,
.entry-content h3{
  margin-top: 36px !important;
  margin-bottom: 14px !important;
}

.entry-content p{
  margin-bottom: 16px !important;
}

.entry-content ul,
.entry-content ol{
  margin: 12px 0 18px !important;
}

.entry-content > * + h2,
.entry-content > * + h3{
  margin-top: 44px !important;
}