/* ============================================================
   Slim overrides on top of the authentic template CSS
   (single-casino.css, casino-summary-widget.css, pros_and_cons.css,
   how_to_section.css, list_block.css now provide the real layout)
   ============================================================ */

/* kill any horizontal scrollbar from the full-bleed hero.
   overflow-x:clip (NOT hidden) so it does NOT create a scroll container
   on the root -> position:sticky on the desktop widget keeps working. */
html,body{overflow-x:clip;max-width:100%}

/* 1. Full-bleed the navy hero across the viewport (template sets the gradient;
      our page column is max-width 1150, so stretch the wrapper edge-to-edge).
      max() keeps a 16px gutter on mobile so the content never touches the edge. */
.casino-review-page .casino-hero-wrapper{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:max(16px, calc(50vw - 50%));padding-right:max(16px, calc(50vw - 50%));
  box-sizing:border-box;}
/* mobile side gutters for the rest of the page content */
@media(max-width:992px){
  .casino-review-page .casino-content_wrapper{padding-left:16px;padding-right:16px;box-sizing:border-box}
}

/* breadcrumb: template draws its own split-arrow separators; just align nicely (no duplicate ›) */
.casino-review-page .casino-hero-wrapper .breadcrumb{display:flex;flex-wrap:wrap;align-items:center}

/* 2. Section nav: active state for the in-page scroll switcher */
.secnav-link{cursor:pointer}
.secnav-link.is-active{color:#0b1f33;border-bottom:3px solid #f5b301}

/* 3. Footer icons (our custom SVGs) */
footer img[src*="ic-telegram"]{width:20px;height:20px;vertical-align:middle;display:inline-block}
footer img[src*="ic-18plus"]{width:38px;height:38px}
footer img[src*="ic-gambleaware"]{height:16px;width:auto}
footer img[src*="ic-gpwa"]{height:24px;width:auto}
footer img[src*="ic-dmca"]{height:24px;width:auto}

/* 4. Provider / payment logos without a supplied file -> show the name as text */
.prov-text{color:#334155;text-decoration:none;font-weight:600;font-size:12.5px;text-align:center;line-height:1.3}
.provider-link .prov-text{color:#334155 !important;text-decoration:none !important}

/* 5. Instagram icon added to the author strip + bio (not in template) */
.article-info .insta-icon{display:inline-flex;align-items:center}
.article-info .insta-icon img{width:20px;height:20px;display:inline-block;vertical-align:middle}

/* 6. Our generated author avatar sizing safety (bio card) */
.author-card__inner img[alt="Daniel Mercer"]{object-fit:cover}

/* 7. Logo: contain + background, slightly smaller so it never side-crops (hero + widget) */
.casino-hero-section .casino-logo .image-overlay img,
.casino-hero-section .casino-logo img,
.casino_summary-wrapper .casino-info img{
  object-fit:contain !important;background:#101d2d;padding:10px;box-sizing:border-box;border-radius:10px}

/* 8. Hero rating badge visible (just the rating; hide the compare button) */
.casino-hero-section .review-compare{display:flex !important;align-items:center;gap:14px;
  justify-content:flex-start !important;margin:8px 0 0 !important;width:auto}
@media(max-width:768px){.casino-hero-section .review-compare{justify-content:center !important}}
.casino-hero-section .review-compare .compare-btn,
.casino-hero-section .review-compare .compareBtn,
.casino-hero-section .review-compare .compare-casinos{display:none !important}

/* 9. Widget: verified check + flag beside rating, Play button */
.casino_summary-wrapper .casino-rating-wrapper{display:flex;align-items:center;justify-content:center;gap:8px}
.casino_summary-wrapper .goelocate{display:inline-flex;align-items:center;gap:7px}
.casino_summary-wrapper .goelocate .wg-verified{width:18px;height:18px}
.casino_summary-wrapper .goelocate .wg-flag{width:22px;height:16px;border-radius:2px;object-fit:cover}
.casino_summary-wrapper .play-btn{margin-top:6px}
.casino_summary-wrapper .play-btn a{display:block;background:#f5b301;color:#15202b;font-weight:700;text-align:center;
  border-radius:8px;padding:12px 24px;text-decoration:none;font-size:16px}
.casino_summary-wrapper .play-btn a:hover{background:#e0a400}

/* 10. Section nav arrows: left hidden until scrolled right; right hides at the end */
.secondary-navigation__button{align-items:center;justify-content:center}
.secondary-navigation__button--left{display:none !important}
.secondary-navigation.show-left .secondary-navigation__button--left{display:flex !important}
.secondary-navigation__button--right{display:flex !important}
.secondary-navigation.at-end .secondary-navigation__button--right{display:none !important}

/* 11. Spacing before the author bio card (ONLY the outer wrapper -
   never [class*="author-card"], which hit every inner element and
   pushed the name down with a huge gap) */
.author-box{margin-top:40px}

/* 12. Submit buttons centered on mobile */
@media(max-width:600px){
  .casino-content form .form-group,.casino-content .review-form,.casino-content .wpcf7,
  .casino-content form{text-align:center}
  .casino-content form button[type="submit"],.casino-content input.btn-success,
  .casino-content form input[type="submit"],.casino-content form input[type="button"]{
    display:inline-block;float:none !important;margin-left:auto;margin-right:auto}
  .casino-content .text-right,.casino-content [style*="text-align: right"]{text-align:center !important}
}

/* 13. Comparison rating star colour (emoji already gold; keep cells tidy) */

/* 14. Mobile footer accordion */
@media(max-width:768px){
  footer .column .footer-links-title{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:space-between}
  footer .column .footer-links-title::after{content:"\25BE";font-size:12px;transition:transform .2s;opacity:.8}
  footer .column.open .footer-links-title::after{transform:rotate(180deg)}
  footer .column .menu{display:none}
  footer .column.open .menu{display:block}
}

/* === FIX BATCH (user review round) === */
/* DESKTOP: the Lizaro widget travels with the scroll (sticky, template's intent);
   the mobile clone (.lz-mobile-widget) stays in normal flow (static). */
/* top:132px clears the sticky header+secondary nav (0-124px) so the widget's
   top (logo) is never hidden behind the nav while scrolling */
.casino_summary-widget:not(.lz-mobile-widget){position:sticky !important;top:132px !important}
.lz-mobile-widget{position:static !important;top:auto !important}

/* rating badge gold star: use a crisp unicode glyph (no bitmap edge to clip,
   centers perfectly with the number via line-height + align-items) */
.casino-hero-section .review-stars::before{
  content:"\2605" !important;color:#f5b301 !important;background:none !important;
  width:auto !important;height:auto !important;font-size:16px !important;line-height:1 !important;
  margin:0 !important;padding:0 !important;display:inline-block !important;vertical-align:middle !important}

/* LinkedIn glyph in the author strip */
.article-info .linkedin-icon{display:inline-flex;align-items:center}
.article-info .linkedin-icon img,.article-info .soc-ic{width:20px;height:20px;display:inline-block;vertical-align:middle}

/* Providers: Show More reveals the hidden 3rd row; Show Less hides it again */
.all_providers.show-all .single-provider.hidden-element{display:flex !important}

/* header language switcher: show the current UK flag (geo sign), hide other langs */
.lang-container .lang_dropdown{display:flex;align-items:center}
.lang-container .lang_dropdown-content{display:flex !important;align-items:center;position:static;min-width:0;box-shadow:none;background:transparent;padding:0}
.lang-container .lang_dropdown-content a:not(.current_language){display:none !important}
.lang-container .lang_dropdown-content a.current_language{display:inline-flex !important;align-items:center}
.lang-container .lang_dropdown-content .current_language img{width:26px;height:18px;border-radius:2px;object-fit:cover;display:block}

/* === FIX BATCH 2 === */
/* header geo flag: remove the dropdown border/box, center it in the header */
.lang-container{display:flex;align-items:center}
.lang-container .lang_dropdown{position:relative;display:inline-flex;align-items:center}
.lang-container .lang_dropdown-content{border:0 !important;overflow:visible !important;height:auto !important;
  position:static !important;transform:none !important;inset:auto !important}
.lang-container .lang_dropdown-content .current_language{padding:0 !important;border:0 !important}

/* mobile: hide the "Discard" text/link above the submit buttons */
@media(max-width:600px){
  .discard-button,#discard-complaint,#discard-review,
  .button-field .discard-button,.button-field a[href="#"]{display:none !important}
}

/* author bio: avatar on the left; name beside it (level with the icon),
   social icons directly under the name with a small gap. No internal top gap. */
.author-card__inner{display:block}
.author-card__info{display:flex !important;flex-direction:row !important;align-items:center !important;
  gap:18px !important;margin:0 !important}
.author-card__avatar-link{flex:0 0 auto;margin:0 !important}
.author-card__meta{display:flex !important;flex-direction:column !important;align-items:flex-start !important;
  gap:8px !important;margin:0 !important}
.author-card__name{margin:0 !important}
.author-card__contacts{display:flex;align-items:center;gap:8px;margin:0 !important}
.author-card__contacts a{display:inline-flex;align-items:center;justify-content:center}
.author-card__bio{margin-top:18px !important}

/* mobile summary widget (clone shown above "Lizaro Casino Information"; desktop uses the aside) */
.lz-mobile-widget{display:none}
@media(max-width:992px){
  /* fill the content width (capped at 460), always dead-centre, no empty side gap.
     max-width needs !important: a template ≤767 rule sets it to 100% otherwise. */
  .lz-mobile-widget{display:block !important;max-width:460px !important;width:100% !important;
    margin-left:auto !important;margin-right:auto !important;margin-top:4px;margin-bottom:26px;float:none !important;
    left:auto !important;right:auto !important;position:static !important}
  aside.casino-review_sidebar{display:none !important}
}

/* === MOBILE compact casino card: name top row; logo left + bonus; right col = rating / Play / lang+check === */
@media(max-width:992px){
  .lz-mobile-widget{margin-top:-20px !important;margin-bottom:18px !important}
  .lz-mobile-widget .casino_summary-wrapper{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "name name name"
      "logo bonus rate"
      "logo bonus play"
      "logo bonus badge";
    align-items:center;
    column-gap:12px;row-gap:4px;
    width:100% !important;max-width:100% !important;
    padding:8px 14px 12px !important;box-sizing:border-box;
  }
  .lz-mobile-widget .casino-info{display:contents !important}
  .lz-mobile-widget .casino-rating-wrapper{display:contents !important}
  .lz-mobile-widget .casino-info--title{grid-area:name;font-size:16px;font-weight:700;margin:0 0 -5px !important;
    text-align:left;line-height:1.15;white-space:nowrap}
  .lz-mobile-widget .casino-info img{grid-area:logo;width:72px !important;height:auto !important;margin:0 !important;
    border-radius:10px;align-self:center;justify-self:center}
  .lz-mobile-widget .casino-bonus{grid-area:bonus;margin:0 !important;align-self:center}
  .lz-mobile-widget .casino-bonus p{font-size:13px;line-height:1.25;margin:0 !important;text-align:left}
  .lz-mobile-widget .casino-bonus p:first-child{font-weight:700}
  .lz-mobile-widget .casino-rating{grid-area:rate;margin:0 !important;justify-self:center;align-self:center}
  .lz-mobile-widget .casino-rating .rating-value{font-size:13px;font-weight:700;margin:0 !important}
  .lz-mobile-widget .play-btn{grid-area:play;margin:0 !important;justify-self:stretch;align-self:center}
  .lz-mobile-widget .play-btn a{display:block;padding:10px 18px !important;border-radius:8px;font-size:14px;
    white-space:nowrap;text-align:center}
  .lz-mobile-widget .goelocate{grid-area:badge;margin:0 !important;justify-self:center;align-self:center;
    display:inline-flex;align-items:center;gap:7px}
  .lz-mobile-widget .wagering-bonus,
  .lz-mobile-widget .user-info-terms{display:none !important}
  .lz-mobile-widget .casino_summary-wrapper .absolute-deco{display:none !important}
}
@media(max-width:420px){
  .lz-mobile-widget .casino-info img{width:64px !important}
  .lz-mobile-widget .casino-info--title{font-size:15px}
  .lz-mobile-widget .play-btn a{padding:9px 14px !important;font-size:13px}
  .lz-mobile-widget .casino_summary-wrapper{column-gap:9px;padding:11px 11px !important}
}

/* hero author social icons: same size + spacing between them */
.casino-hero-section .article-info .author-name-link{margin-right:4px}
.casino-hero-section .article-info img.avatar{margin:0 6px}
.casino-hero-section .article-info .linkedin-icon,
.casino-hero-section .article-info .mail-icon{display:inline-flex !important;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:12px;vertical-align:middle}
.casino-hero-section .article-info .linkedin-icon::before{content:"" !important;display:block;width:18px;height:18px;
  background:url(../wp-content/themes/casinobee/assets/img/linkedin-icon-new-white.svg) no-repeat center/contain}
.casino-hero-section .article-info .mail-icon img{width:18px !important;height:18px !important;display:block}

/* === FIX BATCH 3 === */
/* header geo flag: align to the icon row (override min-height that made it too tall) */
.header .main-header .lang-container{align-self:center;height:auto}
.lang-container .lang_dropdown-content .current_language img{
  height:18px !important;min-height:0 !important;max-height:18px !important;width:auto !important;vertical-align:middle;border-radius:2px}

/* author bio contacts: small bordered boxes, even size, aligned (like the template) */
.author-card__contacts{display:flex;align-items:center;gap:8px;margin-top:2px}
.author-card__contacts a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid #e5e7eb;border-radius:6px;background:#fff;box-sizing:border-box}
.author-card__contacts a img{width:16px;height:16px;display:block;margin:0}

/* flag: force vertical centering within the dropdown wrapper */
.lang-container .lang_dropdown{display:flex !important;align-items:center !important;height:100%}
.lang-container .lang_dropdown-content{margin:0 !important;align-self:center !important;top:auto !important;bottom:auto !important;height:auto !important}
.lang-container .lang_dropdown-content .current_language{margin:0 !important;align-self:center !important}

/* rating badge: size to content so the star sits inline and isn't clipped,
   gap between star and number, baseline centred */
.casino-hero-section .review-stars{max-width:none !important;width:auto !important;
  padding:5px 14px !important;overflow:visible !important;white-space:nowrap !important;
  display:inline-flex !important;align-items:center !important;gap:7px !important;line-height:1 !important}