/* ==========================================================================
   rating.css - brand rating block, zahranicnionlinecasina.com
   Layout: neon bento grid.

   The file deliberately sits outside every bundle (assets/pi-index.css,
   inline CSS from includes/head-assets.php) and is linked with ?v=filemtime,
   so edits show up immediately.

   Theme colours: accent #3067FF, dark mode is body.dark (site default).
   ========================================================================== */

.zo-rating{
  --zo-acc:#3067FF;
  --zo-acc2:#7aa2ff;
  --zo-ink:#0B0C0C;
  --zo-txt:#3F444B;
  --zo-mut:#8b9099;
  --zo-line:rgba(11,12,12,.10);
  --zo-glass:#fff;
  --zo-well:#f4f6fb;
  --zo-glow:0 0 0 transparent;

  display:flex;
  flex-direction:column;
  gap:18px;
  margin:26px 0 34px;
  text-align:left;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--zo-txt);
  -webkit-text-size-adjust:100%;
          text-size-adjust:100%;
}

body.dark .zo-rating{
  --zo-ink:#fff;
  --zo-txt:#c7cbd2;
  --zo-mut:#79808c;
  --zo-line:rgba(122,162,255,.16);
  --zo-glass:rgba(16,20,34,.62);
  --zo-well:rgba(122,162,255,.05);
  --zo-glow:0 0 22px -6px rgba(48,103,255,.55);
}

/* ---------- theme typography reset ---------- */
.zo-rating p,.zo-rating ul,.zo-rating ol,.zo-rating li,
.zo-rating dl,.zo-rating dt,.zo-rating dd,
.zo-rating div,.zo-rating span,.zo-rating a,.zo-rating u,.zo-rating b,
.zo-rating em,.zo-rating i,.zo-rating strong,.zo-rating code,.zo-rating h2{
  font-size:inherit;line-height:inherit;margin:0;padding:0;color:inherit;
}
.zo-rating ul,.zo-rating ol{list-style:none}
.zo-rating a{text-decoration:none}
.zo-rating u{text-decoration:none}
.zo-rating *{box-sizing:border-box}

.zo-rating .zo-rating__title{
  font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--zo-ink);
}

/* ==========================================================================
   Card: bento grid, identity block is cut diagonally into the offer
   ========================================================================== */
.zo-rating .zo-card{
  position:relative;
  display:grid;
  grid-template-columns:212px minmax(0,1fr) 190px;
  grid-template-areas:
    "id offer cta"
    "id spec  cta"
    "id meta  cta";
  gap:1px;
  background:var(--zo-line);
  border:1px solid var(--zo-line);
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.zo-rating .zo-card > *{background:var(--zo-glass)}
.zo-rating .zo-card:hover{
  transform:translateY(-2px);
  border-color:rgba(48,103,255,.55);
  box-shadow:var(--zo-glow);
}

/* leader keeps a permanent, quiet glow */
.zo-rating .zo-card--top{
  border-color:rgba(48,103,255,.55);
  box-shadow:var(--zo-glow);
}
.zo-rating .zo-card--top::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(48,103,255,.16),transparent 38%);
}

/* ---------- identity cell ---------- */
.zo-rating .zo-id{
  grid-area:id;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;
  padding:22px 22px 20px;
  background:
    radial-gradient(120% 90% at 8% 0%,rgba(48,103,255,.16),transparent 62%),
    var(--zo-well);
}
/* diagonal neon edge between identity and content */
.zo-rating .zo-id::after{
  content:'';position:absolute;top:-10%;right:-26px;width:52px;height:120%;
  background:linear-gradient(to bottom,transparent,rgba(48,103,255,.55),transparent);
  transform:skewX(-11deg);opacity:.5;
}
.zo-rating .zo-rank{
  position:absolute;top:2px;right:16px;
  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:60px;font-weight:700;line-height:1;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(48,103,255,.42);
  pointer-events:none;user-select:none;
}
.zo-rating .zo-card--top .zo-rank{-webkit-text-stroke-color:rgba(48,103,255,.85)}

.zo-rating .zo-logo{position:relative;z-index:1;height:52px;display:flex;align-items:center}
.zo-rating .zo-logo a{display:flex;align-items:center;max-width:100%}
.zo-rating .zo-logo img{max-width:154px;max-height:52px;width:auto;height:auto;object-fit:contain;display:block}

.zo-rating .zo-name{
  position:relative;z-index:1;
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--zo-ink);
}
.zo-rating .zo-name em{
  font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:4px;padding:3px 7px;
}
.zo-rating .zo-name .zo-b1{background:var(--zo-acc);color:#fff}
.zo-rating .zo-name .zo-b2{border:1px solid var(--zo-line);color:var(--zo-mut)}

/* ---------- offer cell ---------- */
.zo-rating .zo-offerbox{grid-area:offer;padding:20px 24px 16px;min-width:0}
.zo-rating .zo-offer{
  font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--zo-ink);
}
.zo-rating .zo-offer strong,.zo-rating .zo-offer b{font-weight:700}
.zo-rating .zo-offer p{font-size:inherit;line-height:inherit}

.zo-rating .zo-special{margin-top:7px;font-size:12.5px;line-height:1.45;font-weight:600;color:var(--zo-acc2)}

.zo-rating .zo-promo{
  margin-top:10px;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11px;color:var(--zo-mut);
}
.zo-rating .zo-promo u{font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.zo-rating .zo-promo code{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;font-weight:700;color:var(--zo-ink);
  border:1px dashed rgba(48,103,255,.5);border-radius:5px;padding:3px 9px;
}

.zo-rating .zo-feat{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px 18px;font-size:12px}
.zo-rating .zo-feat li{display:inline-flex;align-items:center;gap:7px}
.zo-rating .zo-feat li::before{content:'';width:5px;height:5px;border-radius:50%;flex:0 0 5px;
  background:var(--zo-acc);box-shadow:0 0 6px rgba(48,103,255,.9)}

.zo-rating .zo-specialfeat{margin-top:8px;font-size:12px;line-height:1.5}

/* ---------- spec strip: three equal bays ---------- */
.zo-rating .zo-spec{
  grid-area:spec;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--zo-line);
}
.zo-rating .zo-kv{
  background:var(--zo-glass);
  padding:12px 16px;min-width:0;
}
.zo-rating .zo-kv dt{
  display:flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--zo-mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.zo-rating .zo-kv dt svg{width:13px;height:13px;flex:0 0 13px;color:var(--zo-acc);
  filter:drop-shadow(0 0 4px rgba(48,103,255,.55))}
.zo-rating .zo-kv dd{
  margin-top:4px;font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--zo-ink);
  overflow-wrap:anywhere;
}

/* ---------- score + payments ---------- */
.zo-rating .zo-meta{
  grid-area:meta;padding:14px 24px 16px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}

/* conic dial instead of the usual bar */
.zo-rating .zo-score{display:flex;align-items:center;gap:11px}
.zo-rating .zo-dial{
  --zo-p:0;
  position:relative;flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  background:conic-gradient(var(--zo-acc) calc(var(--zo-p) * 1%),rgba(122,162,255,.16) 0);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px -4px rgba(48,103,255,.75);
}
.zo-rating .zo-dial::before{
  content:'';position:absolute;inset:4px;border-radius:50%;background:var(--zo-glass);
}
body.dark .zo-rating .zo-dial::before{background:#0d1120}
.zo-rating .zo-dial b{
  position:relative;z-index:1;
  font-size:14px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--zo-ink);
  font-variant-numeric:tabular-nums;
}
.zo-rating .zo-scoretxt{display:flex;flex-direction:column;gap:2px}
.zo-rating .zo-scoretxt u{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--zo-mut)}
.zo-rating .zo-scoretxt i{font-style:normal;font-size:12px;color:var(--zo-txt)}

.zo-rating .zo-pay{display:flex;align-items:center;flex-wrap:wrap;gap:5px 14px;font-size:11.5px;min-width:0}
.zo-rating .zo-pay u{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--zo-mut)}
.zo-rating .zo-pay span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.zo-rating .zo-pay svg{width:13px;height:13px;flex:0 0 13px;color:var(--zo-acc2)}

/* ---------- action cell ---------- */
.zo-rating .zo-cta{
  grid-area:cta;padding:20px;
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:9px;
  background:
    linear-gradient(200deg,rgba(48,103,255,.12),transparent 70%),
    var(--zo-well);
}
.zo-rating .zo-btn{
  display:block;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--zo-acc),#1b46c9);
  font-size:14px;font-weight:600;letter-spacing:.02em;
  padding:13px 16px;border-radius:30px;
  box-shadow:0 0 18px -6px rgba(48,103,255,.95);
  transition:transform .22s ease,box-shadow .22s ease;
}
.zo-rating .zo-btn:hover{transform:translateY(-2px);box-shadow:0 0 26px -4px rgba(48,103,255,1);color:#fff}
.zo-rating .zo-rev{
  text-align:center;font-size:11.5px;color:var(--zo-acc2);
  text-decoration:underline;text-underline-offset:3px;
}
.zo-rating .zo-rg{text-align:center;font-size:9.5px;line-height:1.4;color:var(--zo-mut)}
.zo-rating .zo-rg p,.zo-rating .zo-rg span,.zo-rating .zo-rg div{font-size:9.5px;line-height:1.4;display:inline}

.zo-rating .zo-extra{
  grid-column:1/-1;padding:12px 24px 14px;font-size:12px;line-height:1.55;
}

.zo-rating .zo-after{font-size:14px;line-height:1.6}
.zo-rating .zo-after p{font-size:14px;line-height:1.6;margin-bottom:10px}

@media (prefers-reduced-motion:reduce){
  .zo-rating .zo-card,.zo-rating .zo-btn{transition:none}
  .zo-rating .zo-card:hover,.zo-rating .zo-btn:hover{transform:none}
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width:1024px){
  .zo-rating .zo-card{grid-template-columns:176px minmax(0,1fr) 160px}
  .zo-rating .zo-id{padding:18px 18px 16px}
  .zo-rating .zo-rank{font-size:50px}
  .zo-rating .zo-logo{height:44px}
  .zo-rating .zo-logo img{max-width:128px;max-height:44px}
  .zo-rating .zo-offerbox{padding:16px 18px 13px}
  .zo-rating .zo-offer{font-size:17px}
  .zo-rating .zo-meta{padding:12px 18px 14px;gap:14px}
  .zo-rating .zo-cta{padding:16px}
}

/* ==========================================================================
   Phone: the bento folds into one column
   ========================================================================== */
@media (max-width:720px){
  .zo-rating{gap:13px;margin:18px 0 26px}
  .zo-rating .zo-rating__title{font-size:21px}

  .zo-rating .zo-card{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"id" "offer" "spec" "meta" "cta";
    border-radius:16px;
  }

  .zo-rating .zo-id{
    flex-direction:row;align-items:center;gap:12px;padding:12px 16px;
  }
  .zo-rating .zo-id::after{
    top:auto;bottom:-24px;right:auto;left:-10%;width:120%;height:46px;
    transform:skewY(-2deg);opacity:.35;
    background:linear-gradient(to right,transparent,rgba(48,103,255,.5),transparent);
  }
  .zo-rating .zo-rank{top:auto;bottom:-6px;right:10px;font-size:40px}
  .zo-rating .zo-logo{height:34px;flex:0 0 auto}
  .zo-rating .zo-logo img{max-width:104px;max-height:34px}
  .zo-rating .zo-name{font-size:12px}

  .zo-rating .zo-offerbox{padding:12px 16px 10px}
  .zo-rating .zo-offer{font-size:15.5px;line-height:1.28}
  .zo-rating .zo-feat{margin-top:8px;gap:4px 14px;font-size:11.5px}

  .zo-rating .zo-kv{padding:9px 11px}
  .zo-rating .zo-kv dt{font-size:8.5px;letter-spacing:.06em;gap:5px}
  .zo-rating .zo-kv dt svg{width:11px;height:11px;flex:0 0 11px}
  .zo-rating .zo-kv dd{margin-top:3px;font-size:13px}

  .zo-rating .zo-meta{padding:9px 16px 10px;gap:10px}
  .zo-rating .zo-dial{flex:0 0 34px;width:34px;height:34px}
  .zo-rating .zo-dial::before{inset:3px}
  .zo-rating .zo-dial b{font-size:11.5px}
  .zo-rating .zo-score{gap:9px}
  /* score collapses to one line: the dial already says what it is */
  .zo-rating .zo-scoretxt{flex-direction:row;align-items:baseline;gap:6px}
  .zo-rating .zo-scoretxt u{display:none}
  .zo-rating .zo-scoretxt i{font-size:11px}
  .zo-rating .zo-pay{flex:1 1 100%;font-size:10.5px;gap:4px 12px}

  .zo-rating .zo-cta{padding:10px 16px 11px;gap:6px}
  .zo-rating .zo-btn{padding:10px 14px;font-size:13px}
  .zo-rating .zo-rg{font-size:9px}
  .zo-rating .zo-rg p,.zo-rating .zo-rg span,.zo-rating .zo-rg div{font-size:9px}
  .zo-rating .zo-extra{padding:9px 16px 11px;font-size:11.5px}

  /* ---------- first screen ----------
     House rule: first card fully visible at 375x812, second at least partly.
     Theme rules land later and with !important, hence the body prefix. */
  /* smaller header logo lifts the h1 on phones */
  body header .company-logo{padding:9px 0 !important}
  body header .company-logo img{max-height:26px !important;width:auto !important;height:auto !important}

  body .home3-banner-section{padding-top:66px !important}
  body .banner-content-bottom{margin-top:4px !important}
  body .zo-rating{margin-top:6px !important}
}

@media (max-width:400px){
  .zo-rating .zo-offer{font-size:15px}
  .zo-rating .zo-kv{padding:8px 9px}
  .zo-rating .zo-kv dd{font-size:12.5px}
}