/* Casino Quill UI (local, no CDN). * Modern luxury + conversion layout bundle. * Version: 1.3.1 */ :root{ /* Base */ --bm-bg:#050A12; --bm-bg2:#070F1D; --bm-surface:#0B1629; --bm-surface2:#0D1B33; --bm-border:rgba(255,255,255,.10); --bm-text:#ECF3FF; --bm-muted:#AAB9D2; --bm-muted2:#7F94B4; /* Accents */ --bm-accent:#24D18A; /* emerald */ --bm-accent2:#F7C75C; /* gold */ --bm-accent3:#8A5CF6; /* violet */ --bm-danger:#FF5A73; /* Effects */ --bm-shadow: 0 18px 70px rgba(0,0,0,.55); --bm-shadow-soft: 0 14px 40px rgba(0,0,0,.38); --bm-radius: 18px; --bm-radius-sm: 14px; --bm-ring: 0 0 0 3px rgba(36,209,138,.22); /* Layout */ --bm-container: 1180px; /* Typography weights (tuned to look cleaner) */ --bm-w-ui: 600; --bm-w-title: 650; --bm-w-display: 700; } *{box-sizing:border-box} html,body{height:100%} body.bm-body{ margin:0; color:var(--bm-text); background: var(--bm-bg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height:1.55; letter-spacing:.005em; position:relative; z-index:0; } /* Smooth, non-tiling background layers + subtle noise to prevent gradient banding */ body.bm-body::before{ content:''; position:fixed; inset:0; z-index:-2; background: radial-gradient(1200px 520px at 12% 10%, rgba(247,199,92,.12), transparent 55%), radial-gradient(900px 520px at 86% 14%, rgba(36,209,138,.14), transparent 55%), radial-gradient(700px 520px at 60% 100%, rgba(138,92,246,.11), transparent 60%), linear-gradient(180deg, var(--bm-bg), var(--bm-bg2)); background-repeat:no-repeat; } body.bm-body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; /* Seamless procedural noise (no tiling lines) */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='240'%20height='240'%20filter='url(%23n)'%20opacity='.35'/%3E%3C/svg%3E"); background-repeat:repeat; background-size:240px 240px; opacity: .045; mix-blend-mode: soft-light; } html[data-bm-theme="light"] body.bm-body::after{ opacity: .03; mix-blend-mode: multiply; } /* Optional theme: light. Toggle via [data-bm-theme="light"] on */ html[data-bm-theme="light"]{ --bm-bg:#F6F8FD; --bm-bg2:#EEF2FA; --bm-surface:#FFFFFF; --bm-surface2:#F7F9FF; --bm-border:rgba(10,20,40,.12); --bm-text:#0A1428; --bm-muted:#44536C; --bm-muted2:#607392; --bm-shadow: 0 20px 60px rgba(10,20,40,.10); --bm-shadow-soft: 0 14px 44px rgba(10,20,40,.10); } a{color:inherit;text-decoration:none} a:hover{opacity:.98} img{max-width:100%;height:auto} :focus-visible{outline:none; box-shadow: var(--bm-ring); border-radius: 10px} .bm-no-scroll{overflow:hidden} .bm-container{max-width:var(--bm-container); margin:0 auto; padding:0 18px} @media(min-width:768px){ .bm-container{padding:0 26px} } .bm-main{padding-bottom:78px} @media(min-width:768px){ .bm-main{padding-bottom:0} } .bm-section{padding:28px 0} @media(min-width:768px){ .bm-section{padding:36px 0} } .bm-section-header{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px} .bm-mt{margin-top:18px} .bm-spacer{height:16px} .bm-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap} .bm-h1{font-size:38px; line-height:1.06; letter-spacing:-.03em; margin:0; font-weight:var(--bm-w-display);} @media(min-width:768px){.bm-h1{font-size:54px}} .bm-h2{font-size:24px; margin:0; letter-spacing:-.02em; font-weight:var(--bm-w-title);} @media(min-width:768px){.bm-h2{font-size:30px}} .bm-h3{font-size:20px; margin:0; letter-spacing:-.01em; font-weight:var(--bm-w-title);} .bm-h4{font-size:16px; margin:0; font-weight:var(--bm-w-ui);} .bm-h5{font-size:14px; margin:0; font-weight:var(--bm-w-ui); color:var(--bm-text)} .bm-lead{font-size:16px; color:var(--bm-muted); margin:10px 0 0} @media(min-width:768px){.bm-lead{font-size:18px}} .bm-muted{color:var(--bm-muted)} .bm-xs{font-size:12px} .bm-link{color:rgba(36,209,138,.98); font-weight:var(--bm-w-ui);} .bm-body strong{font-weight:var(--bm-w-ui)} .bm-card{ position:relative; background: linear-gradient(180deg, rgba(13,27,51,.92), rgba(8,16,30,.92)); border:1px solid var(--bm-border); border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-soft); padding:16px; overflow:hidden; } @media(min-width:768px){.bm-card{padding:18px}} .bm-card::after{ /* subtle glow corner */ content:''; position:absolute; inset:-2px; background: radial-gradient(700px 140px at 10% 0%, rgba(247,199,92,.12), transparent 55%), radial-gradient(620px 220px at 100% 0%, rgba(36,209,138,.10), transparent 55%); pointer-events:none; } html[data-bm-theme="light"] .bm-card{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,249,255,.92)); } .bm-card-link{display:block; position:relative; z-index:1} .bm-card-head{display:flex; align-items:center; gap:12px; margin-bottom:10px} .bm-card-title{font-weight:var(--bm-w-title); letter-spacing:-.015em} .bm-card-body{display:grid; gap:8px; position:relative; z-index:1} .bm-card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; position:relative; z-index:1} .bm-grid{display:grid; gap:14px} @media(min-width:768px){.bm-grid{gap:18px}} .bm-grid-2{grid-template-columns:1fr} @media(min-width:768px){.bm-grid-2{grid-template-columns:1fr 1fr}} .bm-grid-3{grid-template-columns:1fr} @media(min-width:768px){.bm-grid-3{grid-template-columns:repeat(3,1fr)}} .bm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius: var(--bm-radius-sm); font-weight:var(--bm-w-ui); border:1px solid rgba(255,255,255,.12); cursor:pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, filter .12s ease; user-select:none; position:relative; } .bm-btn:active{transform: translateY(1px)} .bm-btn--full{width:100%} .bm-btn--primary{ background: linear-gradient(90deg, rgba(36,209,138,1), rgba(247,199,92,.98)); color:#06101B; border-color: rgba(36,209,138,.35); box-shadow: 0 14px 30px rgba(36,209,138,.18); } .bm-btn--primary:hover{filter:saturate(1.06) contrast(1.02)} .bm-btn--ghost{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: var(--bm-text); } html[data-bm-theme="light"] .bm-btn--ghost{ background: rgba(10,20,40,.04); border-color: rgba(10,20,40,.10); } .bm-btn--ghost:hover{background: rgba(255,255,255,.07)} html[data-bm-theme="light"] .bm-btn--ghost:hover{background: rgba(10,20,40,.06)} .bm-btn svg{width:16px;height:16px} .bm-icon-btn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius: var(--bm-radius-sm); border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--bm-text); cursor:pointer; } html[data-bm-theme="light"] .bm-icon-btn{ border-color: rgba(10,20,40,.12); background: rgba(10,20,40,.05); } .bm-shimmer{position:relative; overflow:hidden} .bm-shimmer::after{ content:''; position:absolute; top:-40%; left:-60%; width:60%; height:180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-20deg); animation: bmShimmer 1.9s infinite; } .bm-reduce-motion .bm-shimmer::after{display:none} @keyframes bmShimmer{ 0%{left:-60%} 60%{left:120%} 100%{left:120%} } .bm-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--bm-muted); font-size:12px; position:relative; z-index:1; } html[data-bm-theme="light"] .bm-badge{ background: rgba(10,20,40,.04); border-color: rgba(10,20,40,.12); } .bm-pill{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color: var(--bm-muted); font-weight:var(--bm-w-ui); } html[data-bm-theme="light"] .bm-pill{ background: rgba(10,20,40,.04); border-color: rgba(10,20,40,.12); } .bm-pill.is-active{ border-color: rgba(36,209,138,.45); color: var(--bm-text); box-shadow: 0 10px 30px rgba(36,209,138,.10); } .bm-input{ width:100%; padding:12px 14px; border-radius: var(--bm-radius-sm); border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--bm-text); transition: box-shadow .12s ease, border-color .12s ease; } html[data-bm-theme="light"] .bm-input{ border-color: rgba(10,20,40,.14); background: rgba(255,255,255,.80); color: var(--bm-text); } .bm-input::placeholder{color: rgba(168,182,204,.68)} html[data-bm-theme="light"] .bm-input::placeholder{color: rgba(68,83,108,.62)} .bm-input:focus{outline:none; box-shadow: var(--bm-ring); border-color: rgba(36,209,138,.45)} .bm-hide-mobile{display:none} .bm-show-mobile{display:block} @media(min-width:768px){ .bm-hide-mobile{display:block} .bm-show-mobile{display:none} } /* Header */ .bm-topbar{ background: rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); } html[data-bm-theme="light"] .bm-topbar{ background: rgba(10,20,40,.04); border-bottom:1px solid rgba(10,20,40,.10); } .bm-topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; gap:14px; } .bm-topbar-note{color:var(--bm-muted); font-size:12px} .bm-topbar-right{display:flex; align-items:center; gap:10px} .bm-header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(18px); background: rgba(5,10,18,.68); border-bottom:1px solid rgba(255,255,255,.08); } html[data-bm-theme="light"] .bm-header{background: rgba(246,248,253,.76)} body.admin-bar .bm-header{top:32px} @media(max-width:782px){body.admin-bar .bm-header{top:46px}} .bm-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; } .bm-brand{display:flex; align-items:center; gap:12px; min-width:210px} .bm-brand-mark svg{width:38px;height:38px; display:block} .bm-brand-text{display:flex; flex-direction:column; line-height:1.05} .bm-brand-name{font-weight:var(--bm-w-display); letter-spacing:-.02em} .bm-brand-tag{color:var(--bm-muted2); font-size:12px; margin-top:4px} .bm-nav{flex:1; display:flex; justify-content:center} .bm-menu{list-style:none; display:flex; align-items:center; gap:8px; padding:0; margin:0} .bm-menu > li > a{ display:inline-flex; align-items:center; padding:10px 12px; border-radius: 12px; color: var(--bm-muted); font-weight:var(--bm-w-ui); transition: background .12s ease, color .12s ease; letter-spacing:.01em;} .bm-menu > li > a:hover{background: rgba(255,255,255,.05); color: var(--bm-text)} html[data-bm-theme="light"] .bm-menu > li > a:hover{background: rgba(10,20,40,.05)} .bm-menu .current-menu-item > a{color: var(--bm-text)} .bm-menu--stack{flex-direction:column; align-items:stretch} .bm-menu--stack > li > a{width:100%} .bm-header-actions{display:flex; align-items:center; gap:10px} .bm-theme-toggle{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--bm-muted); cursor:pointer} html[data-bm-theme="light"] .bm-theme-toggle{border-color: rgba(10,20,40,.12); background: rgba(10,20,40,.04)} .bm-theme-toggle:hover{color: var(--bm-text)} .bm-theme-toggle .bm-dot{width:10px; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--bm-accent), var(--bm-accent2));} /* Drawer */ .bm-drawer{position:fixed; inset:0; z-index:70} .bm-drawer-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55)} .bm-drawer-panel{ position:absolute; right:0; top:0; height:100%; width:min(86vw, 360px); background: rgba(11,22,41,.96); border-left:1px solid rgba(255,255,255,.12); padding:14px; } html[data-bm-theme="light"] .bm-drawer-panel{background: rgba(255,255,255,.96); border-left:1px solid rgba(10,20,40,.12)} .bm-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:6px 0 10px} .bm-drawer-title{font-weight:var(--bm-w-title);} .bm-drawer-nav{display:grid; gap:10px; margin-top:6px} .bm-drawer-foot{margin-top:10px} /* Hero */ .bm-hero{padding:30px 0 10px} @media(min-width:768px){.bm-hero{padding:54px 0 18px}} .bm-hero-inner{ display:grid; gap:16px; grid-template-columns: 1fr; } @media(min-width:980px){.bm-hero-inner{grid-template-columns: 1.15fr .75fr; align-items:stretch}} .bm-hero-copy{padding:10px 0; position:relative} .bm-kicker{color: rgba(247,199,92,.98); font-weight:var(--bm-w-ui); margin:0 0 10px; letter-spacing:.02em; text-transform:uppercase; font-size:12px} .bm-hero-ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px} .bm-trust{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px} .bm-hero-art{ margin-top:16px; border-radius: var(--bm-radius); border:1px solid rgba(255,255,255,.10); background: linear-gradient(135deg, rgba(36,209,138,.10), rgba(138,92,246,.10)); box-shadow: var(--bm-shadow-soft); overflow:hidden; } .bm-hero-art img{display:block; width:100%; height:auto} @media(min-width:980px){ .bm-hero-art{margin-top:18px} } .bm-hero-panel{ padding:16px; border-radius: var(--bm-radius); border:1px solid rgba(255,255,255,.12); background: rgba(11,22,41,.60); box-shadow: var(--bm-shadow-soft); overflow:hidden; } html[data-bm-theme="light"] .bm-hero-panel{background: rgba(255,255,255,.78)} .bm-panel-title{font-weight:var(--bm-w-title); margin-bottom:10px} .bm-picks{display:grid; gap:10px; margin-bottom:12px} .bm-pick{ display:flex; align-items:center; gap:12px; padding:12px; border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); } html[data-bm-theme="light"] .bm-pick{background: rgba(10,20,40,.03); border-color: rgba(10,20,40,.10)} .bm-pick:hover{background: rgba(255,255,255,.07)} .bm-pick-main{flex:1} .bm-pick-name{font-weight:var(--bm-w-title);} .bm-pick-rating{min-width:112px; display:flex; justify-content:flex-end} .bm-pick-logo{width:54px} /* Logos */ .bm-logo{display:block; border-radius: 14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02)} html[data-bm-theme="light"] .bm-logo{border-color: rgba(10,20,40,.10); background: rgba(255,255,255,.85)} .bm-logo--table{width:92px} .bm-logo--card{width:90px} .bm-logo--pick{width:54px} .bm-logo--sticky{width:56px} .bm-logo-fallback{ width:64px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius: 14px; background: rgba(247,199,92,.12); border:1px solid rgba(247,199,92,.35); font-weight:var(--bm-w-display); } /* Stars */ .bm-stars{display:inline-flex; align-items:center; gap:4px} .bm-star{width:18px;height:18px; fill: rgba(247,199,92,.98)} .bm-star-empty{fill: rgba(255,255,255,.14)} html[data-bm-theme="light"] .bm-star-empty{fill: rgba(10,20,40,.18)} .bm-star-dim{fill: rgba(255,255,255,.12)} html[data-bm-theme="light"] .bm-star-dim{fill: rgba(10,20,40,.14)} .bm-stars-num{margin-left:8px; font-weight:var(--bm-w-ui); color:var(--bm-muted); font-size:12px} /* Key/value chips */ .bm-kv{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } html[data-bm-theme="light"] .bm-kv{background: rgba(10,20,40,.03); border-color: rgba(10,20,40,.10)} .bm-kv-label{color: var(--bm-muted); font-size:12px; font-weight:var(--bm-w-ui);} .bm-kv-value{font-weight:var(--bm-w-title);} /* Compare table */ .bm-compare{ position:relative; isolation:isolate; border-radius: var(--bm-radius); /* NOTE: do NOT set overflow on the sticky header's containing block. overflow creates a new scroll container which breaks position: sticky in some browsers. We clip rows via .bm-compare-body instead. */ overflow: visible; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); } html[data-bm-theme="light"] .bm-compare{background: rgba(255,255,255,.78); border-color: rgba(10,20,40,.10)} .bm-compare-body{ overflow:hidden; border-bottom-left-radius: var(--bm-radius); border-bottom-right-radius: var(--bm-radius); } .bm-compare-head, .bm-compare-row{ display:grid; grid-template-columns: 1.3fr .9fr 1.1fr .7fr .8fr; gap:12px; align-items:center; } .bm-compare-head{ position:sticky; top: var(--bm-sticky-top, 84px); z-index:20; padding:14px; background: rgba(5,10,18,.94); backdrop-filter: blur(12px); font-weight:var(--bm-w-ui); color: var(--bm-muted); border-bottom:1px solid rgba(255,255,255,.10); box-shadow: 0 10px 24px rgba(0,0,0,.22); border-top-left-radius: var(--bm-radius); border-top-right-radius: var(--bm-radius); } html[data-bm-theme="light"] .bm-compare-head{background: rgba(246,248,253,.98); border-bottom:1px solid rgba(10,20,40,.12); box-shadow: 0 10px 20px rgba(10,20,40,.10)} .bm-compare-row{ position:relative; z-index:1; padding:14px; border-bottom:1px solid rgba(255,255,255,.06); transition: background .12s ease; } .bm-compare-row:hover{background: rgba(255,255,255,.04)} html[data-bm-theme="light"] .bm-compare-row:hover{background: rgba(10,20,40,.03)} .bm-compare-cell{min-width:0} .bm-casino{display:flex; align-items:center; gap:12px; min-width:0} .bm-casino-name{font-weight:var(--bm-w-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .bm-casino-sub{color:var(--bm-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .bm-bonus-amt{font-weight:var(--bm-w-title);} .bm-disclaimer{color:var(--bm-muted2); font-size:12px} /* Mobile table cards */ .bm-mobile-card{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); border-radius: var(--bm-radius); padding:14px; } html[data-bm-theme="light"] .bm-mobile-card{background: rgba(10,20,40,.03); border-color: rgba(10,20,40,.10)} .bm-mobile-head{display:flex; align-items:center; justify-content:space-between; gap:12px} .bm-mobile-rating{display:flex; justify-content:flex-end} .bm-mobile-bonus{margin-top:10px} .bm-mobile-cta{margin-top:12px} /* Archive hero */ .bm-archive-hero{ padding:28px 0 10px; } @media(min-width:768px){.bm-archive-hero{padding:44px 0 14px}} .bm-archive-hero-inner{ display:grid; gap:14px; } @media(min-width:900px){ .bm-archive-hero-inner{ grid-template-columns: 1.15fr .85fr; align-items:end; } } .bm-archive-search{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px} .bm-archive-search .bm-input{flex:1 1 220px; width:auto} .bm-archive-search .bm-btn{flex:0 0 auto} .bm-sort{display:flex; gap:10px; flex-wrap:wrap} /* Review single */ .bm-single{padding-top:24px} .bm-review-hero{ display:grid; gap:16px; } .bm-review-stickybar{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 12px; border-radius: var(--bm-radius); border:1px solid rgba(255,255,255,.12); background: rgba(11,22,41,.62); backdrop-filter: blur(14px); position:sticky; top: var(--bm-sticky-top, 84px); z-index:10; } html[data-bm-theme="light"] .bm-review-stickybar{background: rgba(255,255,255,.82); border-color: rgba(10,20,40,.12)} .bm-sticky-left{display:flex; align-items:center; gap:12px; min-width:0} .bm-sticky-title{min-width:0} .bm-sticky-title .bm-h4{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .bm-sticky-right{display:flex; align-items:center; gap:10px} .bm-review-hero-main{ display:grid; gap:16px; grid-template-columns: 1fr; } .bm-review-hero-copy{padding:4px 0} .bm-review-stats{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:14px} @media(min-width:768px){.bm-review-stats{grid-template-columns: repeat(4,1fr)}} /* Review hero stat boxes: label centered above value */ .bm-review-stats .bm-kv{ flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px 12px; } .bm-review-stats .bm-kv-label{line-height:1.1} .bm-review-stats .bm-kv-value{ line-height:1.1; font-size: 16px; } @media(max-width:420px){.bm-review-stats .bm-kv-value{font-size:15px}} .bm-review-hero-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; position:relative} /* Action row lives below the hero stats on single reviews. Keep it aligned with the sidebar. */ .bm-review-actions .bm-review-hero-ctas{margin-top:0} /* Move the review layout up so the sidebar aligns with the action row */ .bm-review-layout{margin-top:14px} /* “On this page” dropdown (TOC) next to CTAs */ .bm-toc-dropdown{position:relative; display:inline-block} .bm-toc-dropdown summary{list-style:none} .bm-toc-dropdown summary::-webkit-details-marker{display:none} .bm-toc-trigger{position:relative; padding-right:34px} .bm-toc-trigger::after{content:'▾'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--bm-muted2); font-size:12px} .bm-toc-dropdown[open] .bm-toc-trigger::after{content:'▴'; color:var(--bm-text)} .bm-toc-popover{ position:absolute; left:0; top: calc(100% + 10px); z-index:40; width: min(360px, 92vw); max-height: min(56vh, 520px); overflow:auto; padding:12px; border-radius: var(--bm-radius); border:1px solid rgba(255,255,255,.12); background: rgba(11,22,41,.92); backdrop-filter: blur(14px); box-shadow: var(--bm-shadow-soft); scrollbar-width: none; -ms-overflow-style: none; } .bm-toc-popover::-webkit-scrollbar{width:0; height:0} html[data-bm-theme="light"] .bm-toc-popover{background: rgba(255,255,255,.95); border-color: rgba(10,20,40,.12)} @media(max-width:520px){.bm-toc-popover{left:auto; right:0}} /* Payment Methods dropdown (matches TOC dropdown styling) */ .bm-pay-dropdown{position:relative; display:inline-block} .bm-pay-dropdown summary{list-style:none} .bm-pay-dropdown summary::-webkit-details-marker{display:none} .bm-pay-trigger{position:relative; padding-right:34px} .bm-pay-trigger::after{content:'▾'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--bm-muted2); font-size:12px} .bm-pay-dropdown[open] .bm-pay-trigger::after{content:'▴'; color:var(--bm-text)} .bm-pay-popover{ position:absolute; left:0; top: calc(100% + 10px); z-index:40; width: min(420px, 92vw); max-height: min(56vh, 520px); overflow:auto; padding:12px; border-radius: var(--bm-radius); border:1px solid rgba(255,255,255,.12); background: rgba(11,22,41,.92); backdrop-filter: blur(14px); box-shadow: var(--bm-shadow-soft); scrollbar-width: none; -ms-overflow-style: none; } .bm-pay-popover::-webkit-scrollbar{width:0; height:0} html[data-bm-theme="light"] .bm-pay-popover{background: rgba(255,255,255,.95); border-color: rgba(10,20,40,.12)} @media(max-width:520px){.bm-pay-popover{left:auto; right:0}} .bm-pay-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px} .bm-pay-cell{display:block} /* Grid badges: allow long labels (e.g., "Rapid Transfer") without overflowing */ .bm-pay-icon.bm-pay-icon--grid{ width:100%; min-width:0; height:auto; min-height:34px; padding:8px 10px; border-radius:999px; white-space:normal; text-align:center; justify-content:center; line-height:1.1; } @media(max-width:420px){.bm-pay-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}} @media(max-width:320px){.bm-pay-grid{grid-template-columns: 1fr;}} .bm-toc--dropdown{margin-top:0} .bm-toc--dropdown a{background: rgba(255,255,255,.04)} html[data-bm-theme="light"] .bm-toc--dropdown a{background: rgba(10,20,40,.04)} .bm-review-aside{align-self:start} .bm-aside-card{padding:16px} .bm-aside-top{display:flex; align-items:center; justify-content:flex-start; gap:12px} .bm-aside-rating .bm-stars{display:inline-flex; align-items:center} .bm-aside-kvs{display:grid; gap:10px; margin-top:10px} /* Sidebar score breakdown (always visible) */ .bm-aside-breakdown{margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.10)} html[data-bm-theme="light"] .bm-aside-breakdown{border-top:1px solid rgba(10,20,40,.10)} .bm-aside-section-title{font-weight:var(--bm-w-ui); color:var(--bm-muted); font-size:13px; margin-bottom:8px; padding:0 2px} .bm-aside-breakdown .bm-scorebars{margin-top:10px; margin-bottom:0} /* Sidebar expandable sections */ .bm-aside-details{margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.10)} html[data-bm-theme="light"] .bm-aside-details{border-top:1px solid rgba(10,20,40,.10)} .bm-aside-summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:var(--bm-w-title); color:var(--bm-muted); font-size:13px; padding:10px 10px; border-radius: 14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } html[data-bm-theme="light"] .bm-aside-summary{background: rgba(10,20,40,.03); border-color: rgba(10,20,40,.10)} .bm-aside-summary::-webkit-details-marker{display:none} .bm-aside-details summary::after{content:'▾'; color:var(--bm-muted2); font-size:12px} .bm-aside-details[open] summary::after{content:'▴'; color:var(--bm-text)} .bm-aside-details .bm-scorebars{margin-top:12px; margin-bottom:0} .bm-tnc{color:var(--bm-muted2); font-size:12px; margin-top:10px} .bm-tnc--compact{max-width:72ch} .bm-tnc-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .bm-tnc-text-inline{display:inline; font-size:12px; color:var(--bm-muted2); line-height:1.45} .bm-tnc-link{color: rgba(36,209,138,.98); font-weight:var(--bm-w-ui);} .bm-tnc-details{margin-top:10px} .bm-tnc-details summary{ list-style:none; cursor:pointer; font-size:12px; font-weight:var(--bm-w-ui); color:var(--bm-muted2); display:inline-flex; align-items:center; gap:8px; } .bm-tnc-details summary::-webkit-details-marker{display:none} .bm-tnc-details summary:after{ content:'▾'; font-size:12px; color:var(--bm-muted2); } .bm-tnc-details[open] summary:after{content:'▴'; color:var(--bm-text)} .bm-tnc-text{margin-top:8px; font-size:12px; color:var(--bm-muted2); line-height:1.45} .bm-tnc-details .bm-tnc-link{display:inline-block; margin-top:8px; font-size:12px} /* T&Cs apply toggle: keep original alignment (do not force centering) */ /* Affiliate disclosure + offer audit trail */ .bm-aff-disclosure{color:var(--bm-muted2); font-size:12px; margin-top:8px; line-height:1.35} .bm-aff-disclosure .bm-aff-source{color: rgba(36,209,138,.98); font-weight:var(--bm-w-ui);} /* Affiliate disclosure redesign (method 3): compact banner + tooltip icon */ .bm-aff-tip{display:inline-block;} .bm-aff-tip__summary{list-style:none; cursor:pointer; user-select:none;} .bm-aff-tip__summary::-webkit-details-marker{display:none;} .bm-aff-tip--banner{margin:8px 0 14px;} .bm-aff-tip--banner .bm-aff-tip__summary{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--bm-muted2); padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px;} .bm-aff-tip--banner[open] .bm-aff-tip__summary{background:rgba(255,255,255,.06);} .bm-aff-tip--icon{margin-left:8px; vertical-align:middle;} .bm-aff-tip--icon .bm-aff-tip__summary{width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border-radius:999px; border:1px solid rgba(255,255,255,.22); color:var(--bm-muted2);} /* Banner can also use the tooltip behaviour without becoming a tiny 18x18 icon */ .bm-aff-tip--banner.bm-aff-tip--icon{margin:8px 0 14px; vertical-align:baseline;} .bm-aff-tip--banner.bm-aff-tip--icon .bm-aff-tip__summary{width:auto; height:auto; justify-content:flex-start; font-weight:600; padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px;} .bm-aff-tip--banner.bm-aff-tip--icon .bm-aff-tip__content{position:fixed; z-index:80;} .bm-aff-tip__content{margin-top:8px; max-width:320px; padding:10px 12px; border-radius:12px; background:rgba(20,22,28,.98); border:1px solid rgba(255,255,255,.12); color:var(--bm-muted2); font-size:12px; line-height:1.35; box-shadow:0 10px 30px rgba(0,0,0,.35);} .bm-aff-tip--icon .bm-aff-tip__content{position:fixed; z-index:80;} .bm-compare-cell.bm-cta{position:relative;} .bm-mobile-cta{position:relative;} .bm-aff-tip__link{color: rgba(36,209,138,.98); font-weight:var(--bm-w-ui);} /* Inline disclosure rows (used under CTAs and in the review sidebar) */ .bm-aff-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px} /* Light mode overrides for affiliate tooltip (portal renders at ) */ html[data-bm-theme="light"] .bm-aff-tip__content{ background: rgba(255,255,255,.98); border: 1px solid rgba(10,20,40,.14); color: var(--bm-text); box-shadow: 0 10px 30px rgba(10,20,40,.18); } html[data-bm-theme="light"] .bm-aff-tip--banner .bm-aff-tip__summary{ border-color: rgba(10,20,40,.16); } html[data-bm-theme="light"] .bm-aff-tip--icon .bm-aff-tip__summary{ border-color: rgba(10,20,40,.22); color: var(--bm-muted); } .bm-aff-row .bm-aff-tip--icon{margin-left:0} /* Table tools row (Disclosure + View all, etc.) */ .bm-table-tools{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 0 14px} .bm-table-tools .bm-aff-tip--banner{margin:0} /* Casino cell layout: logo above name (All casinos + Top casinos tables) */ .bm-compare-row .bm-casino-link{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; } .bm-compare-row .bm-casino-name, .bm-compare-row .bm-casino-sub{white-space:normal; overflow:visible; text-overflow:clip;} /* Key features should align like other fields (left) */ .bm-features{margin:0; padding-left:18px; text-align:left; width:100%;} .bm-compare-cell:nth-child(3){text-align:left;} /* Score bars (new) */ .bm-score-title{margin-top:26px} .bm-scorebars{display:grid; gap:10px; margin-top:14px; margin-bottom:14px} .bm-scorebar{display:grid; gap:6px} .bm-scorebar-top{display:flex; align-items:center; justify-content:space-between; gap:10px} .bm-scorebar-label{font-weight:var(--bm-w-ui); color:var(--bm-muted); font-size:12px} .bm-scorebar-value{font-weight:var(--bm-w-title); font-size:12px} .bm-scorebar-track{height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.08)} html[data-bm-theme="light"] .bm-scorebar-track{background: rgba(10,20,40,.08); border-color: rgba(10,20,40,.10)} .bm-scorebar-fill{height:100%; border-radius:999px; background: linear-gradient(90deg, var(--bm-accent), var(--bm-accent2))} .bm-aside-card .bm-btn--full{margin-top:12px} .bm-toc{margin-top:10px} .bm-toc ul{list-style:none; padding:0; margin:0; display:grid; gap:8px} .bm-toc a{ display:block; padding:9px 10px; border-radius: 14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: var(--bm-muted); font-size:13px; font-weight:var(--bm-w-ui); line-height:1.25; } html[data-bm-theme="light"] .bm-toc a{background: rgba(10,20,40,.03); border-color: rgba(10,20,40,.10)} .bm-toc a:hover{border-color: rgba(36,209,138,.35)} .bm-toc-fallback{margin-top:10px} .bm-toc-fallback a{margin-right:10px} /* Pros/cons lists */ .bm-checklist, .bm-xlist{margin:10px 0 0; padding:0 0 0 18px; color:var(--bm-muted)} .bm-checklist li, .bm-xlist li{margin:8px 0} .bm-checklist li::marker{color: var(--bm-accent)} .bm-xlist li::marker{color: var(--bm-danger)} .bm-review-layout{ display:grid; gap:16px; grid-template-areas: "sidebar" "content"; } @media(min-width:980px){ .bm-review-layout{ grid-template-columns: 1.2fr .8fr; grid-template-areas: "content sidebar"; align-items:start; } } .bm-review-content{grid-area:content; min-width:0} .bm-review-sidebar{grid-area:sidebar; align-self:start} @media(min-width:980px){ .bm-review-sidebar{ position:sticky; top: var(--bm-sticky-top, 84px); } /* Only enable internal scrolling when needed (toggled by JS). */ .bm-review-sidebar.bm-sidebar-scroll{ max-height: calc(100vh - var(--bm-sticky-top, 84px) - 16px); overflow:auto; padding-right:2px; /* Hide scrollbar visuals (still scrollable via wheel/trackpad) */ scrollbar-width: none; -ms-overflow-style: none; } .bm-review-sidebar.bm-sidebar-scroll::-webkit-scrollbar{width:0; height:0} } .bm-procon{margin-top:16px} .bm-review-cta-box{ margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .bm-terms-section{margin-top:18px} .bm-related{margin-top:24px} /* Mobile footer CTA */ .bm-mobile-footer{ position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 14px 14px; background: rgba(5,10,18,.74); backdrop-filter: blur(16px); border-top:1px solid rgba(255,255,255,.10); } html[data-bm-theme="light"] .bm-mobile-footer{background: rgba(246,248,253,.90); border-top:1px solid rgba(10,20,40,.10)} .bm-mobile-footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:var(--bm-container); margin:0 auto} .bm-mobile-footer-left{min-width:0} .bm-mobile-footer-bonus{font-weight:var(--bm-w-title); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55vw} /* Prose */ .bm-prose{ color: var(--bm-text); } .bm-prose > :first-child{margin-top:0 !important} .bm-prose p{color: var(--bm-muted); margin:0 0 14px} .bm-prose h2{font-size:20px; margin:22px 0 10px; letter-spacing:-.01em; font-weight:var(--bm-w-title)} .bm-prose h3{font-size:16px; margin:18px 0 10px; font-weight:var(--bm-w-title)} .bm-prose ul{color: var(--bm-muted); padding-left:18px} .bm-prose li{margin:8px 0} .bm-prose a{color: rgba(36,209,138,.98); font-weight:var(--bm-w-ui);} /* Post cards (enhanced) */ .bm-post-card .bm-card-body{gap:10px} .bm-post-card{height:100%} .bm-post-card .bm-card-link{display:flex; flex-direction:column; height:100%} .bm-post-card .bm-card-body{flex:1} .bm-post-card .bm-card-foot{margin-top:auto; padding-top:12px} .bm-post-thumb{ border-radius: 14px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } html[data-bm-theme="light"] .bm-post-thumb{border-color: rgba(10,20,40,.10); background: rgba(10,20,40,.03)} .bm-post-thumb img{display:block; width:100%; height:auto} .bm-post-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap} .bm-post-meta .bm-pill{padding:6px 10px; font-size:12px} /* Pagination */ .bm-pagination{margin-top:22px} .bm-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; border-radius: 14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); margin-right:8px; font-weight:var(--bm-w-ui); color: var(--bm-muted); } html[data-bm-theme="light"] .bm-pagination .page-numbers{border-color: rgba(10,20,40,.12); background: rgba(10,20,40,.04)} .bm-pagination .current{color: var(--bm-text); border-color: rgba(36,209,138,.45)} /* Center helper */ .bm-center{text-align:center; padding:28px} /* Empty state */ .bm-empty{padding:16px; border-radius: var(--bm-radius); border:1px dashed rgba(255,255,255,.20); color:var(--bm-muted)} /* FAQ (new) */ .bm-faq{display:grid; gap:10px} .bm-faq details{ border:1px solid rgba(255,255,255,.10); border-radius: var(--bm-radius); background: rgba(255,255,255,.03); padding:12px 14px; } html[data-bm-theme="light"] .bm-faq details{background: rgba(10,20,40,.03); border-color: rgba(10,20,40,.10)} .bm-faq summary{ list-style:none; cursor:pointer; font-weight:var(--bm-w-title); display:flex; align-items:center; justify-content:space-between; gap:10px; } .bm-faq summary::-webkit-details-marker{display:none} .bm-faq summary:after{ content:'+'; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius: 10px; border:1px solid rgba(255,255,255,.14); color: var(--bm-muted); } html[data-bm-theme="light"] .bm-faq summary:after{border-color: rgba(10,20,40,.14)} .bm-faq details[open] summary:after{content:'–'; color: var(--bm-text)} .bm-faq .bm-faq-a{color: var(--bm-muted); margin-top:10px} /* Footer */ .bm-footer{ margin-top:30px; padding:26px 0 26px; border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.10); } html[data-bm-theme="light"] .bm-footer{background: rgba(10,20,40,.03); border-top:1px solid rgba(10,20,40,.10)} .bm-footer-grid{ display:grid; gap:18px; grid-template-columns: 1fr; } @media(min-width:900px){.bm-footer-grid{grid-template-columns: 1.2fr .8fr 1fr; gap:22px}} .bm-footer-logo svg{width:44px;height:44px} .bm-footer-menu{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px; grid-template-columns:1fr} @media(min-width:900px){.bm-footer-menu{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px}} .bm-footer-menu a{color:var(--bm-muted); font-weight:var(--bm-w-ui);} .bm-footer-menu a:hover{color:var(--bm-text)} .bm-footer-bottom{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); margin-top:18px} html[data-bm-theme="light"] .bm-footer-bottom{border-top:1px solid rgba(10,20,40,.10)} /* Minor helpers */ .bm-cta{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap} /* Accessible hidden text */ .bm-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Review: action row + payment method icons */ .bm-review-actions-top{display:flex;align-items:flex-start;justify-content:flex-start;gap:12px;flex-wrap:wrap} .bm-review-actions-left{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%} .bm-review-payments{width:100%} .bm-payments-strip{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-left:0} .bm-pay-icon{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:32px;padding:0 12px;border-radius:14px;border:1px solid var(--bm-pay-border-dark,rgba(255,255,255,.14));background:var(--bm-pay-bg-dark,rgba(255,255,255,.04));font-size:12px;line-height:1;font-weight:var(--bm-w-ui);letter-spacing:.02em;color:var(--bm-pay-text-dark,rgba(255,255,255,.96));white-space:nowrap} .bm-pay-icon:hover{filter:brightness(1.08);border-color:var(--bm-pay-border-dark,rgba(255,255,255,.24))} html[data-bm-theme="light"] .bm-pay-icon{border-color:var(--bm-pay-border-light,rgba(10,20,40,.14));background:var(--bm-pay-bg-light,rgba(10,20,40,.04));color:var(--bm-pay-text-light,rgba(10,20,40,.90))} html[data-bm-theme="light"] .bm-pay-icon:hover{border-color:var(--bm-pay-border-light,rgba(10,20,40,.22));filter:brightness(1.02)} @media(max-width:640px){ .bm-pay-icon{height:30px;padding:0 10px;min-width:40px} } /* Review CTA: keep 18+ text inline right of info icon */ .bm-tnc-row .bm-aff-tip--icon{margin-left:0;} .bm-tnc-inline{display:flex; align-items:center; gap:10px; min-width:0;} .bm-tnc-inline .bm-aff-tip__summary{transform:translateY(-1px);} .bm-tnc-inline .bm-tnc-text-inline{min-width:0;} .bm-tnc-inline .bm-xs{min-width:0;}