/* File: assets/css/main.css */

/* -----------------------------
   Design tokens (SEO requirement: clean, fast)
------------------------------*/
:root{
  --bg: #F2EFF8;
  --surface: #FFFFFF;
  --header-footer: #1B2238;

  --primary: #FF7B07;
  --accent: #0163B4;

  --text: #1A1A1A;
  --text-2: #424040;
  --text-invert: #FFFFFF;

  --border: rgba(27,34,56,.12);
  --shadow: 0 8px 24px rgba(27,34,56,.08);

  --radius: 10px;
  --radius-sm: 8px;

  --container: 1100px;

  --focus: 0 0 0 4px rgba(1,99,180,.18);

  --transition: 180ms ease;

  /* used for star fill */
  --star: #FFC107;
  --star-muted: rgba(255,193,7,.25);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

img{ max-width:100%; height:auto; display:block; }

a{ color: inherit; text-decoration:none; }

.container{
  width: min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

/* -----------------------------
   Accessibility
------------------------------*/
:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

/* -----------------------------
   Header
------------------------------*/
.site-header{
  background: linear-gradient(90deg, #1B2238 0%, #0E5EA6 100%);
  color: var(--text-invert);
}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  min-height: 64px;
}

.site-header__brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

.site-header__logo{
  width: auto;
  height: 34px;
}

.site-header__toplink{
  font-weight: 600;
  opacity: .95;
}
.site-header__toplink:hover{ opacity: 1; text-decoration: underline; }

/* -----------------------------
   Buttons
------------------------------*/
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  height: 40px;
  padding: 0 16px;

  border-radius: 8px;
  border: 1px solid transparent;

  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;

  transition: transform var(--transition), filter var(--transition), background var(--transition), border-color var(--transition);
  cursor: pointer;
  user-select:none;
}

.btn--primary{
  background: var(--primary);
  color: var(--text-invert);
  box-shadow: 0 8px 16px rgba(255,123,7,.18);
}

.btn--primary:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.btn--primary:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* -----------------------------
   Hero
------------------------------*/
.hero{
  padding: 26px 0 8px;
}

.hero__title{
  margin: 0 0 8px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
}

.hero__intro{
  max-width: 920px;
  color: var(--text-2);
}
.hero__intro p{ margin:0; }



/* File: assets/css/main.css
   Replace your current ".casino-card ..." block with this v2,
   or paste below existing styles (it will override due to --v2 classes).
*/

/* --- Casino card v2 (matches screenshot) --- */
.casino-card--v2{
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(27,34,56,.18);
  border-radius: 0;            /* screenshot looks squared */
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.casino-card--v2 .casino-card__link{
  position:absolute;
  inset:0;
  z-index: 1;
}

/* top row */
.casino-card--v2 .casino-card__top{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: 180px 1fr auto;
  gap: 18px;
  align-items:start;
  padding: 12px 14px 10px;
}

/* rank badge (top-left) */
.casino-card--v2 .casino-card__rank{
  position:absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.casino-card--v2 .casino-card__rank span{
  width: 26px;
  height: 22px;
  border-radius: 0;
  background: var(--accent);
  color: var(--text-invert);
  font-weight: 400;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* logo */
.casino-card--v2 .casino-card__logo{
  grid-column: 1;
  background: #0E0E10;
  border-radius: 0;
  min-height: 92px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.casino-card--v2 .casino-card__logo img{
  width: 100%;
  height: 92px;
  object-fit: cover;
}
.casino-card--v2 .casino-card__logo-placeholder{
  padding: 14px;
  color: rgba(255,255,255,.85);
  font-weight: 800;
}

/* main (title + rating) */
.casino-card--v2 .casino-card__main{
  grid-column: 2;
  min-width: 0;
}
.casino-card--v2 .casino-card__title{
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
  margin-top: 2px;
}
.casino-card--v2 .casino-card__rating{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  color: var(--text);
}
.casino-card--v2 .stars{ font-size: 14px; letter-spacing: 1px; }
.casino-card--v2 .casino-card__rating-value{
  font-size: 13px;
  color: var(--text);
}

/* min deposit (top-right) */
.casino-card--v2 .casino-card__min{
  grid-column: 3;
  text-align:right;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  padding-top: 4px;
}
.casino-card--v2 .casino-card__min-label{
  color: var(--text);
  margin-right: 6px;
}
.casino-card--v2 .casino-card__min-value{
  color: var(--text);
  font-weight: 400;
}

/* bottom bar */
.casino-card--v2 .casino-card__bottom{
  position: relative;
  z-index: 2;
  background: rgba(27,34,56,.06); /* light grey bar like screenshot */
  border-top: 1px solid rgba(27,34,56,.10);
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.casino-card--v2 .casino-card__features{
  display:flex;
  align-items:center;
  gap: 22px;
  flex-wrap: wrap;
}

.casino-card--v2 .feature{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
.casino-card--v2 .feature__icon{
  width: 16px;
  height: 16px;
}

/* CTA button (right) */
.casino-card--v2 .casino-card__cta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex: 0 0 auto;
}
.casino-card--v2 .btn--card{
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .2px;
  border-radius: 3px;
  box-shadow: none;
  position: relative;
  z-index: 3; /* above full-card link */
}

/* Hover accent like screenshot border feel */
.casino-card--v2:hover{
  border-color: rgba(1,99,180,.35);
}

/* Responsive */
@media (max-width: 820px){
  .casino-card--v2 .casino-card__top{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .casino-card--v2 .casino-card__min{
    text-align:left;
  }
  .casino-card--v2 .casino-card__logo img{
    height: 120px;
  }
  .casino-card--v2 .casino-card__bottom{
    flex-direction: column;
    align-items:flex-start;
  }
  .casino-card--v2 .casino-card__cta{
    width: 100%;
    justify-content:flex-start;
  }
}


/* -----------------------------
   SEO content styles (H2/H3, lists, tables)
------------------------------*/
.seo{
  padding: 8px 0 22px;
}

.content{
  background: transparent;
}

.content--seo{
  max-width: 980px;
  color: var(--text);
}

.content--seo h2,
.content--seo h3{
  line-height: 1.2;
  margin: 26px 0 10px;
}

.content--seo h2{
  font-size: clamp(18px, 2.2vw, 24px);
}
.content--seo h3{
  font-size: clamp(16px, 2vw, 18px);
}

.content--seo p{
  margin: 0 0 12px;
  color: var(--text-2);
}

/* lists with custom icon */
.content--seo ul{
  margin: 10px 0 12px;
  padding: 0;
  list-style: none;
}

.content--seo ul li{
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
  color: var(--text-2);
}

.content--seo ul li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .3em;
  width: 14px;
  height: 14px;
  background: url("/wp-content/uploads/2025/12/list-icon.svg") no-repeat center/contain;
  opacity: .95;
}

/* tables */
.content--seo table{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}

.content--seo thead th{
  background: var(--accent);
  color: var(--text-invert);
  text-align:left;
  font-size: 13px;
  padding: 10px 12px;
}

.content--seo td{
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
}

/* callout / quote */
.content--seo blockquote{
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: rgba(1,99,180,.06);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}
.content--seo blockquote p{
  margin:0;
  color: var(--text);
  font-weight: 700;
}

/* -----------------------------
   FAQ
------------------------------*/
.faq{
  padding: 10px 0 20px;
}

.section-title{
  margin: 0 0 12px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
}

.faq-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.faq-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.faq-item__q{
  list-style: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  font-weight: 800;
  color: var(--text);
}

.faq-item__q::-webkit-details-marker{ display:none; }

.faq-item__plus{
  width: 22px;
  height: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  color: var(--text-2);
  flex: 0 0 auto;
  transition: transform var(--transition);
}

.faq-item[open] .faq-item__plus{ transform: rotate(45deg); }

.faq-item__a{
  padding: 0 14px 14px;
  color: var(--text-2);
}
.faq-item__a p{ margin: 10px 0 0; }

/* -----------------------------
   Author block
------------------------------*/
.author{
  padding: 10px 0 26px;
}

.author-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.author-card__avatar img{
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
}

.author-card__name{
  font-weight: 400;
  line-height: 1.2;
}

.author-card__role{
  font-size: 12px;
  color: var(--text-2);
  font-weight: 800;
  margin-top: 2px;
}

.author-card__text{
  margin-top: 8px;
  color: var(--text-2);
}
.author-card__text p{ margin: 0; }

/* -----------------------------
   Footer
------------------------------*/
.site-footer{
  margin-top: 26px;
  background: linear-gradient(90deg, #1B2238 0%, #0E5EA6 100%);
  color: var(--text-invert);
}

.site-footer__inner{
  padding: 18px 0 12px;
}

.site-footer__row--top{
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 14px;
  align-items:center;
}

.site-footer__logo{
  height: 34px;
  width: auto;
}

.site-footer__titlelink-a{
  font-weight: 800;
  opacity: .95;
}
.site-footer__titlelink-a:hover{
  opacity: 1;
  text-decoration: underline;
}

.site-footer__downloads{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap: wrap;
}

.download-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-invert);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.download-btn img {
    width: 150px;
}

.download-btn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.20);
}

.download-btn__text{
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  display: none;
}

.partners{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 22px;
  flex-wrap: wrap;
  opacity: .98;
}

.partners__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background var(--transition), transform var(--transition);
}

.partners__item:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

.site-footer__row--bottom{
  margin-top: 10px;
  display:flex;
  justify-content:center;
  opacity: .9;
  font-size: 13px;
}

/* -----------------------------
   404 page
------------------------------*/
.page404{
  padding: 38px 0;
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.page404__inner{
  background: rgba(242,239,248,.88);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:hidden;

  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items:center;
  min-height: 360px;
}

.page404__media{
  padding: 22px;
}

.page404__hero{
  width: 100%;
  height: auto;
}

.page404__content{
  padding: 22px;
}

.page404__title{
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.12;
}

.page404__text{
  color: var(--text-2);
  margin-bottom: 14px;
}

/* -----------------------------
   Responsive
------------------------------*/
@media (max-width: 980px){
  .casino-card{
    grid-template-columns: 46px 220px 1fr 170px;
  }
}

@media (max-width: 820px){
  .site-footer__row--top{
    grid-template-columns: 1fr;
    justify-items:center;
    text-align:center;
  }
  .site-footer__downloads{ justify-content:center; }

  .casino-card{
    grid-template-columns: 46px 1fr;
    grid-template-areas:
      "rank cta"
      "logo logo"
      "content content";
  }

  .casino-card__rank{ grid-area: rank; }
  .casino-card__logo{ grid-area: logo; }
  .casino-card__content{ grid-area: content; }
  .casino-card__cta{ grid-area: cta; align-items:flex-start; }

  .casino-card__meta{
    justify-content:flex-start;
  }

  .page404__inner{
    grid-template-columns: 1fr;
  }
  .page404__media{
    padding-bottom: 0;
  }
}

@media (max-width: 420px){
  .container{ width: calc(100% - 24px); }

  .casino-card{
    padding: 12px;
  }

  .casino-card__features{
    gap: 12px;
  }

  .download-btn__text{
    font-size: 11px;
  }
}

/* -----------------------------
   Print (clean)
------------------------------*/
@media print{
  .site-header, .site-footer, .casino-card__cta{ display:none !important; }
}

.author-card__avatar {
    min-width: 52px;
}


/* --- FIX: spacing between cards --- */
.casino-cards{
  display: flex;
  flex-direction: column;
  gap: 14px; /* отступ между карточками */
}

/* страховка, если где-то gap не работает/перебит */
.casino-card--v2{
  margin: 0;
}

/* --- FIX: stars overlay + correct colors (no duplication) --- */
.casino-card--v2 .stars{
  position: relative;
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  height: 1em;
}

.casino-card--v2 .stars__bg{
  color: #E6E6E6; /* фон звёзд (светло-серый) */
}

.casino-card--v2 .stars__fg{
  position: absolute;
  top: 0;
  left: 0;
  color: #F5B301;  /* заливка (золотой) */
  overflow: hidden;
  white-space: nowrap;
  height: 1em;
  pointer-events: none;
}

/* Важный момент: чтобы fg всегда ложился ровно поверх */
.casino-card--v2 .stars__bg,
.casino-card--v2 .stars__fg{
  display: block;
}


/* File: assets/css/main.css
   Add this block at the VERY END of the file to override old card styles.
*/

/* spacing between cards */
.casino-cards{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* CARD v3 */
.casino-card--v3{
  position: relative;
  background: #fff;
  border: 2px solid rgba(1,99,180,.35);
  border-radius: 14px;
  padding: 12px;

  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-areas:
    "logo info"
    "logo bar";
  gap: 12px 18px;

  overflow: hidden;
}

.casino-card--v3:hover{
  border-color: rgba(1,99,180,.55);
}

/* full-card link */
.casino-card--v3 .casino-card__link{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* make inner content above overlay link */
.casino-card--v3 .casino-card__logo,
.casino-card--v3 .casino-card__info,
.casino-card--v3 .casino-card__bar,
.casino-card--v3 .casino-card__rank{
  position: relative;
  z-index: 2;
}

/* rank */
.casino-card--v3 .casino-card__rank{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.casino-card--v3 .casino-card__rank span{
    width: 50px;
    height: 34px;
    border-radius: 0 0 5px 0;
    background: var(--accent);
    color: #fff;
    font-weight: 400;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* logo box (left) */
.casino-card--v3 .casino-card__logo{
  grid-area: logo;
  background: #0E0E10;
  border-radius: 12px;
  overflow: hidden;

  /* makes mobile logo taller automatically */
  aspect-ratio: 16 / 9;
  min-height: 140px;

  display: flex;
  align-items: center;
  justify-content: center;
}
.casino-card--v3 .casino-card__logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.casino-card--v3 .casino-card__logo-placeholder{
  padding: 14px;
  color: rgba(255,255,255,.88);
  font-weight: 400;
}

/* right top info */
.casino-card--v3 .casino-card__info{ grid-area: info; min-width: 0; }
.casino-card--v3 .casino-card__info-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.casino-card--v3 .casino-card__title{
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  margin-top: 2px;
}

/* stars FIX (no duplication) + correct color */
.casino-card--v3 .casino-card__rating{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  color: #1A1A1A;
}

.casino-card--v3 .stars{
  position: relative;
  display: inline-block;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1;
  height: 1em;
}
.casino-card--v3 .stars__bg,
.casino-card--v3 .stars__fg{
  display: block;
}
.casino-card--v3 .stars__bg{
  color: #E6E6E6; /* фон (серый) */
}
.casino-card--v3 .stars__fg{
  position: absolute;
  top: 0;
  left: 0;
  color: #FFB800; /* золото как на скрине */
  overflow: hidden;
  white-space: nowrap;
  height: 1em;
  pointer-events: none;
}

.casino-card--v3 .casino-card__rating-value{
  font-size: 18px;
}

/* min deposit (right aligned on desktop) */
.casino-card--v3 .casino-card__min{
  white-space: nowrap;
  font-size: 20px;
  font-weight: 400;
  color: #1A1A1A;
  padding-top: 2px;
}
.casino-card--v3 .casino-card__min-label{
  margin-right: 10px;
  color: #1A1A1A;
}
.casino-card--v3 .casino-card__min-value{
  color: #1A1A1A;
}

/* bottom bar (INSIDE CARD, only right column on desktop) */
.casino-card--v3 .casino-card__bar{
  grid-area: bar;

  background: rgba(27,34,56,.06);
  border-radius: 8px;
  padding: 14px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.casino-card--v3 .casino-card__features{
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}

.casino-card--v3 .feature{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 400;
  color: #1A1A1A;
}
.casino-card--v3 .feature__icon{
  width: 22px;
  height: 22px;
}

.casino-card--v3 .casino-card__cta{
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

/* CTA button must be clickable above full-card link */
.casino-card--v3 .btn--card{
  position: relative;
  z-index: 3;

  height: 44px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
}

/* MOBILE (match your screenshot) */
@media (max-width: 820px){
  .casino-card--v3{
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "info"
      "bar";
    gap: 12px;
  }

  .casino-card--v3 .casino-card__info-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .casino-card--v3 .casino-card__title{
    font-size: 20px;
  }

  .casino-card--v3 .casino-card__min{
    font-size: 16px;
  }

  .casino-card--v3 .casino-card__bar{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .casino-card--v3 .casino-card__features{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .casino-card--v3 .feature{
    font-size: 16px;
  }

  .casino-card--v3 .btn--card{
    width: 100%;
    justify-content: center;
    height: 48px;
    font-size: 14px;
  }
}

.partners__item img {
    height: 45px;
}