/* Standalone container for the /reviews/ archive page (templates/archive-
   ncl-casino.php) - the [casino_cards] grid itself (.nclc-wrap below) is
   tuned to sit flush against a theme section above/below it when embedded
   mid-page elsewhere, but here it's the ONLY content on the page, so it
   needs its own top/bottom breathing room instead of relying on a
   following section to provide it. */
.nclr-archive-wrap{max-width:1280px;margin:0 auto;padding:40px 20px 60px;}
.nclr-archive-wrap .nclc-wrap{margin-top:0;}

/* Small breadcrumb reused on the /reviews/ hub and every /reviews/{x}/
   page - not scoped inside .nclc-wrap so it can sit above the framed
   section, hence the hardcoded dim-grey colour instead of a CSS variable
   (those are only defined within .nclc-wrap/.nclr-wrap further down). */
.nclc-breadcrumb{font-size:12px;color:#606060;margin:0 0 16px;display:flex;gap:6px;flex-wrap:wrap;}
.nclc-breadcrumb a{color:#606060;text-decoration:none;}
.nclc-breadcrumb a:hover{text-decoration:underline;}

/* ---------- /reviews/ hub: one tile per country/list ---------- */
.nclr-hub-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:16px;}
.nclr-hub-tile{
  display:flex;flex-direction:column;gap:4px;
  background:#fff;
  border:1px solid var(--nclc-border);
  border-radius:12px;
  padding:18px 20px;
  text-decoration:none !important;
  transition:box-shadow .15s ease, transform .15s ease;
}
.nclr-hub-tile:hover{box-shadow:0 6px 16px rgba(0,0,0,0.08);transform:translateY(-2px);}
.nclr-hub-tile-name{font-size:16px;font-weight:700;color:var(--nclc-text);}
.nclr-hub-tile-count{font-size:12.5px;color:var(--nclc-text-dim);}

.nclc-wrap{
  --nclc-primary: #007438;
  --nclc-text: #17241f;
  --nclc-text-dim: #606060;
  --nclc-border: #e1e6df;
  --nclc-gold: #c99a00;
  --nclc-chip: #eaeaea;
  --nclc-chip-light: #fafafa;
  font-family:"Segoe UI",Inter,Arial,sans-serif;
  color:var(--nclc-text);
  max-width:1280px;
  /* No bottom margin here on purpose: the theme already adds its own
     space below this section (between it and the next boxed section,
     e.g. the Table of Content box) - adding our own margin-bottom on
     top of that stacked two gaps together, making the space below this
     frame noticeably bigger than the space the theme leaves between its
     OWN boxed sections further down. Leaving it at 0 lets the theme's
     own spacing do the work, so every boxed section on the page ends up
     evenly spaced from the one after it. */
  margin:30px auto 0;
  padding:20px;
  box-sizing:border-box;
  /* Matches the site's own article content box (".content-text" - the
     light grey frame that the "Are Online Casinos..." heading and body
     text sit inside further down the page), so the casino section and
     its own heading sit inside the exact same style of frame instead of
     looking like a separate widget. */
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}
.nclc-wrap *{box-sizing:border-box;}

/* The page's own "Top New Casinos in Australia 2026" heading sits in a
   different container (.new_casion_listing_container, added by the page
   builder) than the article's body text (.content-text), which has its
   own 20px padding the listing container doesn't share - that 21px gap
   is what made this heading sit further left than every other heading
   on the page. Nudging it here (rather than editing the theme/page
   builder directly) keeps the fix inside this plugin, so it survives if
   the page is ever rebuilt. If this heading's markup changes on the page
   later, re-check this selector still matches. */
.new_casion_listing_container > .text_content_heading{
  margin-left:21px;
}
/* Safety net: WordPress (or another plugin on the site) sometimes wraps
   a lone link - specifically the "Play Now" button - in its own <p>
   tag, which carries a large default top/bottom margin (usually
   around 1em on each side) that has nothing to do with our own CSS and
   pushes everything below it further down. This neutralises any such
   stray <p> wherever it appears inside a card, regardless of why it
   got added, so it can never affect the card's spacing again. */
.nclc-wrap p{margin:0 !important;padding:0 !important;}

/* Plain heading style instead of a colour-block header, matching the
   rest of the article's own H2s (same size/weight/colour/font as e.g.
   "Are Online Casinos in Australia Legal?" further down the page) so the
   casino section's title looks like a normal part of the article rather
   than a separate coloured widget. */
.nclc-header{
  background:none;
  border-radius:0;
  padding:0;
  color:inherit;
  margin-bottom:22px;
}
.nclc-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--nclc-primary);font-weight:700;margin-bottom:6px;}
.nclc-header h2{margin:0 0 6px;font-size:24px;font-weight:700;color:rgba(30,30,30,0.8);font-family:"Noto Sans",sans-serif;}
.nclc-header p{margin:0;color:var(--nclc-text-dim);font-size:14px;}

/* Exactly 4 equal-width columns that always span edge-to-edge between the
   page's own left/right margins (fr units divide 100% of the available
   width, so there's never leftover space or a lone card dropping to its
   own row the way the old auto-fit/minmax approach could produce once a
   4th card was added). Fewer, wider columns kick in on smaller screens via
   the media queries below, always still filling the full width evenly. */
.nclc-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
}
@media (max-width:1100px){ .nclc-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} }
@media (max-width:820px){ .nclc-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:560px){ .nclc-grid{grid-template-columns:1fr;max-width:340px;margin:0 auto;} }

.nclc-tile{
  position:relative;
  height:100%;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  font-size:17px;
  font-weight:300;
  color:var(--nclc-text);
}
/* Forced with .nclc-wrap prefix + !important: some theme/page-builder
   CSS resets "div{display:block}" inside the section the shortcode is
   pasted into, which silently breaks the flex layout below (the tile
   stops filling remaining grid-row height in a controlled way, which
   left a big empty gap at the bottom of shorter cards instead of the
   footer sitting flush at the bottom). Locking display:flex here is
   what keeps every card the same, tight height with no dead space. */
.nclc-wrap .nclc-tile{
  display:flex !important;
  flex-direction:column !important;
}
.nclc-tile.nclc-rank-1{outline:3px solid var(--nclc-primary);outline-offset:-3px;}
.nclc-tile.nclc-rank-2{outline:2px solid var(--nclc-primary);outline-offset:-2px;}
.nclc-tile.nclc-rank-3{outline:2px solid rgba(0,116,56,0.4);outline-offset:-2px;}

.nclc-topleft{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;z-index:3;}
.nclc-topleft .nclc-position{position:static;top:auto;left:auto;}
.nclc-new{
  background:#00a550;color:#fff;
  border:2px solid #fff;border-radius:100px;
  padding:3px 10px;
  font-size:12px;font-weight:800;letter-spacing:.06em;line-height:1.2;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.nclc-verified{
  margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:11.5px;font-weight:600;line-height:14px;
  color:#007438;
}
.nclc-position{
  position:absolute;
  top:10px;left:10px;
  width:26px;height:26px;
  border-radius:100px;
  background:rgba(255,255,255,0.8);
  color:#606060;
  font-weight:600;
  font-size:15px;
  display:flex;align-items:center;justify-content:center;
  z-index:3;
}
.nclc-grade{
  position:absolute;
  top:10px;right:10px;
  background:rgba(255,255,255,0.8);
  color:#606060;
  border-radius:100px;
  padding:2px 7px;
  display:flex;align-items:center;gap:4px;
  font-size:15px;font-weight:600;
  z-index:3;
}
.nclc-star{color:var(--nclc-gold);font-size:13px;}
.nclc-info{opacity:.55;font-size:10px;}

/* The .nclc-wrap prefix + !important here are deliberate: WordPress
   themes very often ship a global "img{height:auto}" (or similar,
   scoped to .entry-content img) rule for responsive images, which
   otherwise wins over a plain ".nclc-logo{height:120px}" for logos
   with certain aspect ratios - the box then shrinks to fit that one
   image, and everything below it (tag bubble, bonus, button, footer)
   shifts up out of line with the other cards in the row. Locking the
   box height here, regardless of the logo file's own proportions,
   is what keeps every card's content starting at the same line. */
.nclc-wrap .nclc-logo{
  display:block !important;
  width:100% !important;
  height:110px !important;
  max-height:110px !important;
  min-height:110px !important;
  object-fit:contain !important;
  /* Top padding (36px) clears the rank number (top-left) and star
     rating (top-right) badges, which sit at top:10px with roughly 26px
     of their own height. Bottom padding (20px) is deliberately generous
     - bigger than earlier attempts - to guarantee real breathing room
     down to the tag bubble below, on top of the extra buffer built into
     the tag bubble/row and .nclc-content settings further down. */
  padding:36px 24% 20px;
  box-sizing:border-box;
}
.nclc-logo-fallback{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:20px;text-align:center;
}

/* z-index:2 + position:relative here are required so this row (and the
   bubble inside it) always paints ABOVE .nclc-content, which overlaps
   upward on purpose - without this, the bubble can end up hidden behind
   the white box instead of sticking up in front of it. */
.nclc-tag-row{ text-align:center; margin-top:22px; position:relative; z-index:2; }
.nclc-tag-bubble{
  position:relative;
  top:-30px;
  display:inline-block;
  background:#fff;
  border-radius:13px 13px 0 0;
  padding:4px 12px;
  font-size:14px;
  font-weight:600;
  margin:0 auto;
}

.nclc-content{
  position:relative;
  background:#fff;
  border-radius:13px;
  margin:-30px 10px 10px;
  padding:20px 10px 10px;
  text-align:center;
}
.nclc-wrap .nclc-content{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}

/* Bonus block: only takes as much space as it actually has content for.
   No reserved/minimum heights here on purpose - that's what caused the
   big empty gaps when a field was left blank. Alignment across cards is
   instead handled by .nclc-bottom (see below), which always sticks to
   the bottom of the card regardless of how tall the bonus block is. */
.nclc-bonus-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:20px;}
.nclc-bonus-col{display:flex;flex-direction:column;}
/* When BOTH bonus columns are present, each is capped at exactly half
   the row's width (and allowed to grow/shrink evenly via flex) so one
   bonus (and its own wagering line) always stays on its own side and
   never crowds into or borrows space from the other - each one is
   still centred within its own half via the inherited text-align. When
   only one bonus is filled in, this class isn't added and the single
   column just keeps its natural, unconstrained width as before. */
.nclc-bonus-col-half{flex:1 1 0;max-width:50%;}
/* Label ("BONUS", "EXTRA BONUS"...) is always a fixed dark colour rather
   than the card's own accent colour (set inline, per-casino, only on
   .nclc-bonus-main below) - keeping the label neutral makes the coloured
   bonus value underneath it stand out more instead of the two competing
   for attention in the same colour. */
.nclc-bonus-type{font-size:12.5px;font-weight:700;text-transform:uppercase;line-height:1.3;color:var(--nclc-text);}
.nclc-bonus-main{font-size:17px;font-weight:800;line-height:1.2;white-space:nowrap;}
.nclc-bonus-sub{font-size:12px;font-weight:600;line-height:15px;color:var(--nclc-text-dim);}
/* Each bonus column gets its own wagering line directly underneath it
   (instead of one line shared between both bonuses) - this is the ONE
   exception to "no reserved height" above: it sits directly above
   .nclc-bottom, so a casino with no wagering text for that bonus made
   the row disappear, shifting .nclc-bottom (and the trust chip, button,
   payment tags with it) upward compared to cards that do have one.
   Reserving one line's height here - and always rendering this row in
   the PHP even when empty - keeps the starting point identical on
   every card regardless of content. */
.nclc-bonus-wager{font-size:12px;color:var(--nclc-text-dim);margin-top:10px;min-height:15px;line-height:15px;text-align:center;}

/* Everything from here down (trust chip, button, payment icons, fine
   print, review footer) is one tightly-packed group that always sits
   flush at the bottom of the card as a whole (margin-top:auto) - so it
   lines up across every card in a row, no matter how much or little
   bonus/wagering text is above it. Fixed (non-auto) margins are used
   INSIDE this group itself, so the spacing between its own pieces
   (fine print, review footer) always stays put too. */
.nclc-bottom{
  margin-top:auto;
}
/* Same theme-collision defence as .nclc-tile/.nclc-content above. */
.nclc-wrap .nclc-bottom{
  display:flex !important;
  flex-direction:column !important;
}

.nclc-chip-bar{
  background:var(--nclc-chip);
  border-radius:10px;
  margin-top:9px;
  padding:4px;
}
.nclc-trust-line{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--nclc-text);
  background:var(--nclc-chip-light);
  border-radius:7px;
  padding:6px 8px;
}
.nclc-trust-line svg{width:15px;height:15px;flex-shrink:0;color:var(--nclc-primary);}

.nclc-btn-play{
  display:block;
  width:100%;
  color:#fff !important;
  background:var(--nclc-primary);
  border:none;border-radius:10px;
  padding:9px 14px 8px;
  font-weight:600 !important;font-size:16px !important;
  line-height:18px;
  text-align:center;text-decoration:none !important;
  margin-top:9px;
  box-shadow:0 2px 4px rgba(0,0,0,0.14), 0 5px 14px rgba(0,116,56,0.32);
  transition:filter .15s ease;
}
/* Whole-card hover (lift + shadow) was removed - this is the only hover
   effect left on a card now: the button itself gets visibly brighter,
   using filter:brightness so it keeps working correctly even if the
   button colour is ever changed later, without needing a second
   hand-picked "lighter" colour to keep in sync. */
.nclc-btn-play:hover{ filter:brightness(1.12); }
.nclc-btn-play:hover, .nclc-btn-play:visited, .nclc-btn-play:active{ color:#fff !important; text-decoration:none !important; }
.nclc-review-link, .nclc-review-link:hover, .nclc-review-link:visited{ color:var(--nclc-text-dim) !important; text-decoration:none !important; }

/* Capped to exactly 2 rows' worth of height (2 x ~22px tag height + 1 x
   5px row gap = 49px) with overflow hidden - so however many payment tags
   actually fit across 2 rows show, and anything that would start a 3rd
   row is simply clipped rather than ever becoming visible. This is what
   lets ncl_field's PHP side hand over more tags than will always fit
   (see the "up to 6" slice in the shortcode) without risking a 3-row
   card on casinos with longer method names like "Bank Transfer". */
.nclc-pay-tags{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:9px;
  max-height:49px;
  overflow:hidden;
}
.nclc-pay-tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--nclc-chip-light);
  border:1px solid var(--nclc-border);
  border-radius:6px;
  padding:3px 8px;
  font-size:10.5px;
  font-weight:600;
  color:var(--nclc-text-dim);
  line-height:1.3;
  white-space:nowrap;
}
.nclc-dot{width:6px;height:6px;border-radius:50%;background:var(--nclc-primary);flex-shrink:0;}

/* Reserved space for two lines of fine print (min-height), so a short
   T&C text and a long one that wraps to two lines take up the SAME
   amount of room here. Without this, a shorter text made the whole
   bottom block shorter, and since that block is anchored flush to the
   bottom of the card, a shorter block meant more gap above it and the
   Play Now button sitting lower than on cards with longer fine print.
   Any leftover space in short-text cards is absorbed here, between the
   fine print and the grey review footer below it - not next to the
   button. */
.nclc-fine{
  margin-top:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  font-size:10px;
  line-height:12px;
  color:var(--nclc-text-dim);
  text-align:center;
}

/* A plain fixed margin-top (not "auto" bleeding to the edges) so this
   box always has real white space above it (below the fine print) and
   below it (down to the card's coloured border) - it now floats as its
   own rounded box inside the white area, the same way the "Instant via
   ..." chip above does, instead of stretching edge-to-edge. */
.nclc-review-footer{
  background:var(--nclc-chip);
  margin-top:10px;
  border-radius:10px;
  padding:7px 12px;
}
.nclc-review-name{font-size:14px;font-weight:600;display:block;line-height:1.3;}
.nclc-review-link{font-size:12px;color:var(--nclc-text-dim);text-decoration:none;display:block;line-height:1.3;}

/* ---------- Mobile/tablet only: let cards fill more of the screen ----------
   Desktop (>820px) is untouched - it already uses the 2/3/4-column grid
   above with its own spacing and looks right as-is. On phone and portrait
   iPad, the single/double-column card was capped at 340px and centred,
   leaving visible empty margin on both sides on a typical ~390-430px wide
   phone screen. This widens the usable area by trimming the outer wrap's
   side padding and lifting the single-column cap, so the card itself grows
   to fill the extra width rather than just sitting in more white space. */
@media (max-width:820px){
  .nclr-archive-wrap{padding-left:10px;padding-right:10px;}
  .nclc-wrap{padding-left:10px;padding-right:10px;}
}
@media (max-width:560px){
  .nclc-grid{max-width:none;}
}