/* ==================================================================
   Bootstrap Lite – CasinoBee (Utility-first subset, v1.1)
   Includes: Containers, Grid, Gutters, Responsive Columns, Spacing,
             Flex, Display, Images, Typography, Utilities,
             Minimal Components (btn, card, navbar, accordion, modal),
             Blog helpers (ratio, prose, table, sticky, clamp),
             CasinoBee overrides (.container, hero gradient, slide button).
   Notes:
   - Breakpoints: sm=576px, md=768px, lg=992px, xl=1200px, xxl=1400px
   - This is a lightweight approximation; not a full Bootstrap replacement.
   - Load this AFTER your theme base CSS if you want it to take precedence.
   ================================================================== */

/* ---------- Root variables ---------- */
:root{
  --bs-blue:#0d6efd;
  --bs-indigo:#6610f2;
  --bs-purple:#6f42c1;
  --bs-pink:#d63384;
  --bs-red:#dc3545;
  --bs-orange:#fd7e14;
  --bs-yellow:#ffc107;
  --bs-green:#198754;
  --bs-teal:#20c997;
  --bs-cyan:#0dcaf0;
  --bs-white:#fff;
  --bs-gray:#6c757d;
  --bs-gray-dark:#343a40;
  --bs-dark:#111827;  /* adjusted to match hero base */
  --bs-light:#f8f9fa;
  --bs-border:#dee2e6;
  --bs-shadow:0 .5rem 1rem rgba(0,0,0,.15);
  --bs-radius:.375rem;
  --bs-spacing-0:0;
  --bs-spacing-1:.25rem;
  --bs-spacing-2:.5rem;
  --bs-spacing-3:1rem;
  --bs-spacing-4:1.5rem;
  --bs-spacing-5:3rem;

  /* CasinoBee brand helpers */
  --cb-yellow:#fbbf24;
  --cb-dark:#1f2937;
  --cb-hero-base:#111827;
  --cb-hero-accent:#0C4A6E;
}

/* ==================================================================
   Containers & Grid
   ================================================================== */
.container,
.container-fluid{
  width:100%;
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto;
}
/* default container widths (will be overridden later for CasinoBee needs) */
.container{ max-width:1320px; }
@media (max-width:1399.98px){ .container{ max-width:1140px; } }
@media (max-width:1199.98px){ .container{ max-width:960px; } }
@media (max-width:991.98px){ .container{ max-width:720px; } }
@media (max-width:767.98px){ .container{ max-width:540px; } }
@media (max-width:575.98px){ .container{ max-width:100%; } }

.row{
  --bs-gutter-x:1.5rem;
  --bs-gutter-y:0;
  display:flex;
  flex-wrap:wrap;
  margin-right:calc(var(--bs-gutter-x) * -0.5);
  margin-left:calc(var(--bs-gutter-x) * -0.5);
  margin-top:calc(var(--bs-gutter-y) * -1);
}
.row > *{
  flex-shrink:0;
  width:100%;
  max-width:100%;
  padding-right:calc(var(--bs-gutter-x) * 0.5);
  padding-left:calc(var(--bs-gutter-x) * 0.5);
  margin-top:var(--bs-gutter-y);
}
.col{ flex:1 0 0%; }

/* Common width presets */
.col-12{ flex:0 0 auto; width:100%; }
.col-6{ flex:0 0 auto; width:50%; }
@media (min-width:576px){ .col-sm-6{ flex:0 0 auto; width:50%; } }
@media (min-width:768px){
  .col-md-6{ flex:0 0 auto; width:50%; }
  .col-md-4{ flex:0 0 auto; width:33.333333%; }
}
@media (min-width:992px){
  .col-lg-3{ flex:0 0 auto; width:25%; }
  .col-lg-4{ flex:0 0 auto; width:33.333333%; }
  .col-lg-6{ flex:0 0 auto; width:50%; }
  .col-lg-8{ flex:0 0 auto; width:66.666667%; }
  .col-lg-9{ flex:0 0 auto; width:75%; }
  .col-lg-12{ flex:0 0 auto; width:100%; }
}

/* Order helpers */
.order-1{ order:1 !important; } .order-2{ order:2 !important; }
@media (min-width:992px){
  .order-lg-1{ order:1 !important; } .order-lg-2{ order:2 !important; }
}

/* Gutters */
.g-0{ --bs-gutter-x:0; --bs-gutter-y:0; }
.g-1{ --bs-gutter-x:var(--bs-spacing-1); --bs-gutter-y:var(--bs-spacing-1); }
.g-2{ --bs-gutter-x:var(--bs-spacing-2); --bs-gutter-y:var(--bs-spacing-2); }
.g-3{ --bs-gutter-x:var(--bs-spacing-3); --bs-gutter-y:var(--bs-spacing-3); }
.g-4{ --bs-gutter-x:var(--bs-spacing-4); --bs-gutter-y:var(--bs-spacing-4); }
.g-5{ --bs-gutter-x:var(--bs-spacing-5); --bs-gutter-y:var(--bs-spacing-5); }
.gx-0{ --bs-gutter-x:0; } .gx-1{ --bs-gutter-x:var(--bs-spacing-1); } .gx-2{ --bs-gutter-x:var(--bs-spacing-2); } .gx-3{ --bs-gutter-x:var(--bs-spacing-3); } .gx-4{ --bs-gutter-x:var(--bs-spacing-4); } .gx-5{ --bs-gutter-x:var(--bs-spacing-5); }
.gy-0{ --bs-gutter-y:0; } .gy-1{ --bs-gutter-y:var(--bs-spacing-1); } .gy-2{ --bs-gutter-y:var(--bs-spacing-2); } .gy-3{ --bs-gutter-y:var(--bs-spacing-3); } .gy-4{ --bs-gutter-y:var(--bs-spacing-4); } .gy-5{ --bs-gutter-y:var(--bs-spacing-5); }

/* ==================================================================
   Spacing (m-*, p-*)
   ================================================================== */
/* margins */
.m-0{ margin:0 !important; }
.m-1{ margin:var(--bs-spacing-1) !important; }
.m-2{ margin:var(--bs-spacing-2) !important; }
.m-3{ margin:var(--bs-spacing-3) !important; }
.m-4{ margin:var(--bs-spacing-4) !important; }
.m-5{ margin:var(--bs-spacing-5) !important; }
.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:var(--bs-spacing-1) !important; }
.mt-2{ margin-top:var(--bs-spacing-2) !important; }
.mt-3{ margin-top:var(--bs-spacing-3) !important; }
.mt-4{ margin-top:var(--bs-spacing-4) !important; }
.mt-5{ margin-top:var(--bs-spacing-5) !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:var(--bs-spacing-1) !important; }
.mb-2{ margin-bottom:var(--bs-spacing-2) !important; }
.mb-3{ margin-bottom:var(--bs-spacing-3) !important; }
.mb-4{ margin-bottom:var(--bs-spacing-4) !important; }
.mb-5{ margin-bottom:var(--bs-spacing-5) !important; }
.ms-auto{ margin-left:auto !important; }
.me-auto{ margin-right:auto !important; }
.ms-0{ margin-left:0 !important; }
.me-0{ margin-right:0 !important; }
.mx-auto{ margin-left:auto !important; margin-right:auto !important; }
.mx-0{ margin-left:0 !important; margin-right:0 !important; }
.my-0{ margin-top:0 !important; margin-bottom:0 !important; }
.my-1{ margin-top:var(--bs-spacing-1) !important; margin-bottom:var(--bs-spacing-1) !important; }
.my-2{ margin-top:var(--bs-spacing-2) !important; margin-bottom:var(--bs-spacing-2) !important; }
.my-3{ margin-top:var(--bs-spacing-3) !important; margin-bottom:var(--bs-spacing-3) !important; }
.my-4{ margin-top:var(--bs-spacing-4) !important; margin-bottom:var(--bs-spacing-4) !important; }
.my-5{ margin-top:var(--bs-spacing-5) !important; margin-bottom:var(--bs-spacing-5) !important; }

/* paddings */
.p-0{ padding:0 !important; }
.p-1{ padding:var(--bs-spacing-1) !important; }
.p-2{ padding:var(--bs-spacing-2) !important; }
.p-3{ padding:var(--bs-spacing-3) !important; }
.p-4{ padding:var(--bs-spacing-4) !important; }
.p-5{ padding:var(--bs-spacing-5) !important; }
.pt-0{ padding-top:0 !important; }
.pt-1{ padding-top:var(--bs-spacing-1) !important; }
.pt-2{ padding-top:var(--bs-spacing-2) !important; }
.pt-3{ padding-top:var(--bs-spacing-3) !important; }
.pt-4{ padding-top:var(--bs-spacing-4) !important; }
.pt-5{ padding-top:var(--bs-spacing-5) !important; }
.pb-0{ padding-bottom:0 !important; }
.pb-1{ padding-bottom:var(--bs-spacing-1) !important; }
.pb-2{ padding-bottom:var(--bs-spacing-2) !important; }
.pb-3{ padding-bottom:var(--bs-spacing-3) !important; }
.pb-4{ padding-bottom:var(--bs-spacing-4) !important; }
.pb-5{ padding-bottom:var(--bs-spacing-5) !important; }
.ps-0{ padding-left:0 !important; }
.ps-1{ padding-left:var(--bs-spacing-1) !important; }
.ps-2{ padding-left:var(--bs-spacing-2) !important; }
.ps-3{ padding-left:var(--bs-spacing-3) !important; }
.ps-4{ padding-left:var(--bs-spacing-4) !important; }
.ps-5{ padding-left:var(--bs-spacing-5) !important; }
.pe-0{ padding-right:0 !important; }
.pe-1{ padding-right:var(--bs-spacing-1) !important; }
.pe-2{ padding-right:var(--bs-spacing-2) !important; }
.pe-3{ padding-right:var(--bs-spacing-3) !important; }
.pe-4{ padding-right:var(--bs-spacing-4) !important; }
.pe-5{ padding-right:var(--bs-spacing-5) !important; }
.px-0{ padding-left:0 !important; padding-right:0 !important; }
.px-1{ padding-left:var(--bs-spacing-1) !important; padding-right:var(--bs-spacing-1) !important; }
.px-2{ padding-left:var(--bs-spacing-2) !important; padding-right:var(--bs-spacing-2) !important; }
.px-3{ padding-left:var(--bs-spacing-3) !important; padding-right:var(--bs-spacing-3) !important; }
.px-4{ padding-left:var(--bs-spacing-4) !important; padding-right:var(--bs-spacing-4) !important; }
.px-5{ padding-left:var(--bs-spacing-5) !important; padding-right:var(--bs-spacing-5) !important; }
.py-0{ padding-top:0 !important; padding-bottom:0 !important; }
.py-1{ padding-top:var(--bs-spacing-1) !important; padding-bottom:var(--bs-spacing-1) !important; }
.py-2{ padding-top:var(--bs-spacing-2) !important; padding-bottom:var(--bs-spacing-2) !important; }
.py-3{ padding-top:var(--bs-spacing-3) !important; padding-bottom:var(--bs-spacing-3) !important; }
.py-4{ padding-top:var(--bs-spacing-4) !important; padding-bottom:var(--bs-spacing-4) !important; }
.py-5{ padding-top:var(--bs-spacing-5) !important; padding-bottom:var(--bs-spacing-5) !important; }

/* ==================================================================
   Flex & Display
   ================================================================== */
.d-flex{ display:flex !important; }
.d-inline-flex{ display:inline-flex !important; }
.flex-row{ flex-direction:row !important; }
.flex-column{ flex-direction:column !important; }
.flex-wrap{ flex-wrap:wrap !important; }
.justify-content-start{ justify-content:flex-start !important; }
.justify-content-center{ justify-content:center !important; }
.justify-content-end{ justify-content:flex-end !important; }
.justify-content-between{ justify-content:space-between !important; }
.justify-content-around{ justify-content:space-around !important; }
.align-items-start{ align-items:flex-start !important; }
.align-items-center{ align-items:center !important; }
.align-items-end{ align-items:flex-end !important; }
.gap-1{ gap:var(--bs-spacing-1) !important; }
.gap-2{ gap:var(--bs-spacing-2) !important; }
.gap-3{ gap:var(--bs-spacing-3) !important; }

/* Display helpers */
.d-none{ display:none !important; }
.d-block{ display:block !important; }
.d-inline{ display:inline !important; }
.d-inline-block{ display:inline-block !important; }

/* Responsive display helpers */
@media (min-width:576px){
  .d-sm-none{ display:none !important; }
  .d-sm-block{ display:block !important; }
}
@media (min-width:768px){
  .d-md-none{ display:none !important; }
  .d-md-block{ display:block !important; }
  .d-md-inline-flex{ display:inline-flex !important; }
}
@media (min-width:992px){
  .d-lg-flex{ display:flex !important; }
  .d-lg-block{ display:block !important; }
}
@media (min-width:1200px){
  .d-xl-block{ display:block !important; }
}

/* ==================================================================
   Media & Images
   ================================================================== */
.img-fluid{ max-width:100%; height:auto; }
.rounded{ border-radius:var(--bs-radius) !important; }
.rounded-circle{ border-radius:50% !important; }
.rounded-0{ border-radius:0 !important; }

/* Ratio helpers */
.ratio{ position:relative; width:100%; }
.ratio > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:.5rem; }
.ratio-16x9{ padding-top:56.25%; }
.ratio-4x3{ padding-top:75%; }
.ratio-1x1{ padding-top:100%; }

/* ==================================================================
   Typography
   ================================================================== */
.fw-bold{ font-weight:700 !important; }
.fw-semibold{ font-weight:600 !important; }
.fw-normal{ font-weight:400 !important; }
.fw-light{ font-weight:300 !important; }
.text-start{ text-align:left !important; }
.text-center{ text-align:center !important; }
.text-end{ text-align:right !important; }
.text-uppercase{ text-transform:uppercase !important; }
.text-lowercase{ text-transform:lowercase !important; }
.text-capitalize{ text-transform:capitalize !important; }
.lh-sm{ line-height:1.25 !important; }
.lh-base{ line-height:1.5 !important; }
.lh-lg{ line-height:2 !important; }
.fs-1{ font-size:2.5rem !important; }
.fs-2{ font-size:2rem !important; }
.fs-3{ font-size:1.75rem !important; }
.fs-4{ font-size:1.5rem !important; }
.fs-5{ font-size:1.25rem !important; }
.fs-6{ font-size:1rem !important; }
.text-muted{ color:var(--bs-gray) !important; }

/* Prose (article content) */
.prose{ max-width:68ch; }
.prose h1,.prose h2,.prose h3,.prose h4{ line-height:1.25; margin:1.25em 0 .5em; }
.prose p{ margin:.9em 0; }
.prose img,.prose figure{ display:block; max-width:100%; height:auto; margin:1rem 0; border-radius:.5rem; }
.prose blockquote{ margin:1rem 0; padding-left:1rem; border-left:4px solid rgba(108,117,125,.35); color:#6c757d; }
.prose pre{ background:#0f172a; color:#e2e8f0; padding:1rem; border-radius:.5rem; overflow:auto; }
.prose code{ background:rgba(15,23,42,.06); padding:.1rem .35rem; border-radius:.25rem; }
.prose ul,.prose ol{ padding-left:1.25rem; margin:.75rem 0; }
.prose li{ margin:.25rem 0; }

/* ==================================================================
   Utilities
   ================================================================== */
.position-relative{ position:relative !important; }
.position-absolute{ position:absolute !important; }
.top-0{ top:0 !important; }
.bottom-0{ bottom:0 !important; }
.start-0{ left:0 !important; }
.end-0{ right:0 !important; }
.overflow-hidden{ overflow:hidden !important; }
.overflow-auto{ overflow:auto !important; }
.shadow{ box-shadow:var(--bs-shadow) !important; }
.shadow-sm{ box-shadow:0 .125rem .25rem rgba(0,0,0,.075) !important; }
.shadow-lg{ box-shadow:0 1rem 3rem rgba(0,0,0,.175) !important; }
.border{ border:1px solid var(--bs-border) !important; }
.border-0{ border:0 !important; }
.border-top{ border-top:1px solid var(--bs-border) !important; }
.border-bottom{ border-bottom:1px solid var(--bs-border) !important; }
.bg-light{ background-color:var(--bs-light) !important; }
.bg-dark{ background-color:var(--bs-dark) !important; color:var(--bs-white); }
.bg-transparent{ background-color:transparent !important; }
.text-primary{ color:var(--bs-blue) !important; }
.text-success{ color:var(--bs-green) !important; }
.text-danger{ color:var(--bs-red) !important; }
.text-warning{ color:var(--bs-yellow) !important; }
.text-info{ color:var(--bs-cyan) !important; }
.w-100{ width:100% !important; }
.h-100{ height:100% !important; }
.min-vh-100{ min-height:100vh !important; }

/* Sticky helpers (e.g., sidebar) */
.sticky-top{ position:sticky; top:0; z-index:1020; }
@media (min-width:992px){ .sticky-lg-top{ position:sticky; top:1.5rem; z-index:1020; } }

/* Line clamp for card texts */
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Tables (responsive wrapper + basic table) */
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ padding:.75rem; border-bottom:1px solid #dee2e6; text-align:left; }
.table thead th{ font-weight:700; background:#f8f9fa; }

/* ==================================================================
   Minimal Components
   ================================================================== */

/* Buttons */
.btn{
  display:inline-block;
  font-weight:600;
  line-height:1.5;
  color:#fff;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
  cursor:pointer;
  background-color:var(--bs-blue);
  padding:.5rem 1rem;
  font-size:1rem;
  border-radius:var(--bs-radius);
  transition:filter .15s ease;
}
.btn:hover{ filter:brightness(.95); }
.btn:disabled{ opacity:.65; pointer-events:none; }

.btn-secondary{
  background-color:var(--bs-gray-dark);
  border-color:var(--bs-gray-dark);
  color:#fff;
}
.btn-outline-primary{
  background-color:transparent;
  color:var(--bs-blue);
  border:1px solid var(--bs-blue);
}
.btn-outline-primary:hover{
  background-color:var(--bs-blue);
  color:#fff;
}

/* Cards */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  background-color:#fff;
  background-clip:border-box;
  border:1px solid var(--bs-border);
  border-radius:var(--bs-radius);
}
.card-header{
  padding:.75rem 1rem;
  margin-bottom:0;
  background-color:#f5f6f7;
  border-bottom:1px solid var(--bs-border);
  border-top-left-radius:calc(var(--bs-radius) - 1px);
  border-top-right-radius:calc(var(--bs-radius) - 1px);
}
.card-body{ padding:1rem; }
.card-footer{
  padding:.75rem 1rem;
  background-color:#f5f6f7;
  border-top:1px solid var(--bs-border);
  border-bottom-left-radius:calc(var(--bs-radius) - 1px);
  border-bottom-right-radius:calc(var(--bs-radius) - 1px);
}

/* Navbar (minimal) */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 1rem;
}
.navbar-light{ background-color:#fff; color:#000; }
.navbar-dark{ background-color:var(--bs-dark); color:#fff; }
.navbar .navbar-brand{ font-weight:700; text-decoration:none; color:inherit; }
.navbar-expand-lg{ flex-wrap:wrap; }
@media (min-width:992px){ .navbar-expand-lg{ flex-wrap:nowrap; } }

/* Accordion (minimal) */
.accordion{ border:1px solid var(--bs-border); border-radius:var(--bs-radius); overflow:hidden; }
.accordion-item + .accordion-item{ border-top:1px solid var(--bs-border); }
.accordion-header{ margin:0; }
.accordion-button{
  display:flex;
  align-items:center;
  width:100%;
  padding:1rem;
  background-color:#f8f9fa;
  border:0;
  text-align:left;
  cursor:pointer;
  font-weight:600;
}
.accordion-body{ padding:1rem; background:#fff; }

/* Modal (very light) */
.modal{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  z-index:1050;
}
.modal.show{ display:flex; }
.modal-dialog{ max-width:600px; width:100%; margin:1rem; }
.modal-content{
  background:#fff;
  border:1px solid var(--bs-border);
  border-radius:var(--bs-radius);
  box-shadow:var(--bs-shadow);
  overflow:hidden;
}
.modal-header, .modal-footer{ padding:1rem; border-bottom:1px solid var(--bs-border); }
.modal-header{ font-weight:700; }
.modal-body{ padding:1rem; }
.modal-footer{ border-top:1px solid var(--bs-border); border-bottom:0; display:flex; gap:.5rem; justify-content:flex-end; }

/* ==================================================================
   CasinoBee Add-ons & Overrides
   ================================================================== */

/* Hero gradient (background and overlay) */
.bg-hero {
  background:
    linear-gradient(106.29deg, var(--cb-hero-base) 39%, var(--cb-hero-accent) 108.37%),
    linear-gradient(179.48deg, var(--cb-hero-accent) -66.46%, rgba(17, 24, 39, 0) 58.39%);
  background-repeat:no-repeat;
  background-size:cover;
  color:#fff;
}
.bg-hero-overlay{ position:relative; color:#fff; }
.bg-hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(106.29deg, var(--cb-hero-base) 39%, var(--cb-hero-accent) 108.37%),
    linear-gradient(179.48deg, var(--cb-hero-accent) -66.46%, rgba(17, 24, 39, 0) 58.39%);
  background-repeat:no-repeat;
  background-size:cover;
  z-index:0;
}
.bg-hero-overlay > *{ position:relative; z-index:1; }
.hero-min{ min-height:60vh; }

/* Slide gradient for .btn-primary (opt-in) */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  border-radius:.5rem;
  border:0;
  background-image:linear-gradient(to left, var(--cb-yellow) 50%, var(--cb-dark) 50%);
  background-size:200% 100%;
  background-position:right bottom;   /* start: yellow */
  color:var(--cb-dark);
  text-decoration:none;
  transition:background-position .2s ease, color .2s ease, transform .05s ease;
}
.btn-primary:hover,
.btn-primary:focus{
  background-position:left bottom;    /* slide to dark */
  color: var(--cb-yellow);
}
.btn-primary.btn-slide:active{ transform:translateY(1px); }
@media (prefers-reduced-motion: reduce){
  .btn-primary.btn-slide{ transition:none; }
}

/* CasinoBee .container override:
   - max-width: 1150px; centered
   - padding-left/right: 1rem up to 1024px viewport width
*/
.container{
  max-width:1150px;
  margin:0 auto;
  width:100%;
  padding-left:0;
  padding-right:0;
}
@media (max-width:1024px){
  .container{
    padding-left:1rem;
    padding-right:1rem;
  }
}