html,
body {
  height: auto !important;
  overflow: auto !important;
}
body.show-sidebar {
  overflow: hidden;
}

body.show-sidebar #ast-mobile-popup-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden; /* Ensures only sidebar scrolls */
}

/* ✅ Hide desktop-only content */
.ast-hide-on-desktop {
  display: none;
}

/* Prevent horizontal scroll on mobile */
body, .cbt-tag-list {
  overflow-x: hidden;
}

@media (min-width: 1241px) and (max-width: 1399px) {
  .cbt-grid-wrapper {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .cbt-header-actions {
    position: static !important; /* Remove absolute */
    transform: none !important;
    justify-content: flex-end;
    margin-left: auto;
    gap: 6px !important;
  }

  .btn-create-account {
    font-size: 14px !important;
    padding: 7px 18px !important;
    line-height: 1.3 !important;
    border-radius: 20px !important;
  }

  .btn-login {
    font-size: 13px !important;
    padding: 6px 14px !important;
    line-height: 1.2 !important;
  }

  .custom-logo {
    max-height: 50px !important;
    max-width: 200px !important;
  }

  /* Smaller nav menu links */
  .main-header-menu > li > a {
    font-size: 15px !important;
    padding: 0 10px !important;
  }

  /* Tighten overall header height if needed */
  .ast-primary-header-bar {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
  }
  .site-header-primary-section-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    gap: 8px !important;
  }

  .cbt-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.2em;
  }
}

/* ✅ iPad Pro (1024px width) */
@media (min-width: 1024px) and (max-width: 1024px) {
  .ast-header-break-point .ast-primary-header-bar {
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 10px;
  }

  .cbt-header-actions {
    position: absolute !important;
    top: 36px !important;
    right: 2px !important;
    transform: none !important;
    margin: 0 !important;
    gap: 6px !important;
    align-items: flex-start !important;
    display: flex !important;
    padding-right: 15px
  }
  .main-navigation ul {
    list-style: none;
    margin: 0;
    margin-left: -20px !important;
    position: relative;
  }
.ast-logo-title-inline .site-logo-img {
    padding-right: 1em;
    margin-left: -15px;
}
.cbt-tags-heading {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  text-transform: uppercase;
  margin-top: 20px;
}
  .ast-site-identity {
    margin-top: 10px;
  }

  .site-header-primary-section-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    display: flex;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .btn-create-account {
    font-size: 13px !important;
    padding: 7px 18px !important;
    line-height: 1.3 !important;
    border-radius: 20px !important;
    margin-left: 0 !important;
  }

  .btn-login {
    font-size: 13px !important;
    padding: 6px 14px !important;
    line-height: 1.2 !important;
    margin-right: 10px;
    margin-left: 0 !important;
  }

  .custom-logo {
    max-height: 50px !important;
    max-width: 150px !important;
    margin-left: 7px;
  }

  /* Smaller nav menu links */
  .main-header-menu > li > a {
    font-size: 15px !important;
    padding: 0 10px !important;
  }

  /* Tighten overall header height if needed */
  .ast-primary-header-bar {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
    position: relative !important; /* make sure the container is relative */
  }
  .cbt-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.2em;
  }
 body.cbt-female-page h1.page-title { 
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 1.6em !important; 
    font-weight: 500 !important;
    line-height: 1.2;
    margin-top: 0 !important;
    margin-bottom: 0.6em !important;
 }
 .site-header-section {
    height: 100%;
    min-height: 0;
    align-items: center;
    margin-right: -30px !important 
 }
 body.page-template-page-tags .main-navigation ul {
    list-style: none;
    margin-left: -42px !important;
    position: relative;
 }
 ol, ul {
    margin: 0 0 0 0 !important;
 }
}

/* ✅ Grid adjustments */
.cbt-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body.show-sidebar .cbt-mobile-only {
  display: block !important;
}
  .cbt-mobile-only {
    display: none !important;
  }

/* ✅ Mobile & Tablet Styles (below 1024px) */
@media (max-width: 1023px) {
  .ast-header-break-point .main-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-color: #fff; /* or your header color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  body.admin-bar .ast-header-break-point .main-header-bar {
    top: 46px; /* Adjust if WP admin bar is visible */
  }

  .site-content,
  #content > .ast-container,
  .site-content > .ast-container {
    padding-top: var(--cbt-header-height, 80px) !important;
  }

  /* Sidebar push below the header */
  body.show-sidebar #cbt-mobile-sidebar {
    top: var(--cbt-header-height, 80px); /* Push it below header */
    height: calc(100vh - var(--cbt-header-height, 80px)); /* Adjust height */
  }
  /* ✅ Hide regular sidebar */
  #secondary {
    display: block; /* needed for animation */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    position: fixed;
    top: 60px;
    left: 0;
    width: 80%;
    max-width: 300px;
    background: #fff;
    height: 100%;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  }

  body.show-sidebar #secondary {
    transform: translateX(0);
  }

  /* ✅ Mobile sidebar (cloned version) */
  body.show-sidebar #cbt-mobile-sidebar {
    position: fixed;
    left: 0;
    width: 280px;
    top: var(--cbt-header-height, 60px); /* fallback */
    height: calc(var(--vh, 1vh) * 100 - var(--cbt-header-height, 60px));    
    background: #fff;
    z-index: 99999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* ✅ Mobile header */
  .cbt-mobile-header {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 10000;
    background: #fff;
    width: 100%;
    padding: 12px 16px;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  .cbt-hamburger {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .cbt-logo img {
    height: 36px;
  }

  .cbt-auth-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
  }

  .btn-signup {
    background-color: #f44336;
    color: #fff !important;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    font-weight: bold;
    font-size: 14px;
    height: 40px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .btn-signup:hover {
    background-color: #d7372b;
  }

  .btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    background-color: #fff;
    color: #000;
    border: 2px solid #ccc;
    transition: all 0.2s ease;
    text-decoration: none;
  }

  .btn-login:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
  }

  .cbt-mobile-intro {
    padding: 16px;
    text-align: center;
    background: #fafafa;
  }

  .cbt-mobile-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
  }

  .cbt-mobile-subtitle {
    font-size: 14px;
    color: #555;
  }

  /* ✅ Layout fixes */
  .cbt-mobile-sidebar {
    display: block;
  }

  .ast-hide-on-desktop {
    display: block;
  }

  .ast-container,
  .site-content,
  .ast-builder-grid-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #primary {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }
    body h1.page-title {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 1.6em !important;
    font-weight: 500 !important;
    line-height: 1.2;
    margin-top: 12px !important;
    margin-bottom: 0.6em !important;
 }
 .cbt-tags-heading {
    margin-top: 20px;
 }
}

@media (min-width: 922px) and (max-width: 1023px) {
  .ast-primary-header-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .site-primary-header-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .site-header-primary-section,
  .site-header-primary-section-left,
  .site-header-primary-section-right {
    align-items: center !important;
  }

.site-header-primary-section-right {
  display: flex;
  align-items: center !important;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 12px;
  min-width: fit-content;
}

  .cbt-header-actions {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    gap: 10px;
    z-index: 99;
  }

.ast-site-identity,
.ast-main-header-nav-wrap {
  display: flex;
  align-items: center !important;
}

  .custom-logo {
    max-height: 60px;
    width: auto;
    object-fit: contain;
  }

  .main-header-menu > li > a {
    display: flex;
    align-items: center;
    height: 36px !important;
    line-height: 1.2;
    padding: 6px 8px !important;
    font-size: 14px !important;
    font-weight: 600;
  }

.btn-create-account,
.btn-login {
  height: 36px;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1; /* 👈 Add this */
  display: flex;
  align-items: center;
  justify-content: center;
}

  .ast-main-header-nav-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Sidebar layout adjustments */
  body.ast-left-sidebar .site-content > .ast-container {
    display: flex !important;
    flex-direction: row !important;
  }

  .site-content,
  #content > .ast-container,
  .site-content > .ast-container {
    padding-top: 0 !important;
  }

  body.ast-left-sidebar #secondary {
    position: static !important;
    width: 260px !important;
    max-width: 260px !important;
    height: auto !important;
    background: #f8f8f8 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.ast-left-sidebar #primary {
    flex: 1 1 0%;
    padding-left: 1em;
  }

  .cbt-grid-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Hide regular sidebar on mobile */
@media (max-width: 921px) {
  body.ast-left-sidebar #content > .ast-container,
  body.ast-left-sidebar .site-content > .ast-container {
    padding-top: 120px !important; /* matches your header height */
  }

  /* ✅ Override only on performer pages */
  body.single-performer.ast-left-sidebar #content > .ast-container,
  body.single-performer.ast-left-sidebar .site-content > .ast-container {
    padding-top: 50px !important;
  }

  body.show-sidebar #cbt-mobile-sidebar {
    top: 100px !important; /* or use var(--cbt-header-height) */
    height: calc(100vh - 120px) !important;
  }
  
  html, body {
    height: auto !important;
    overflow: auto !important;
    touch-action: auto;
    position: static;
  }

  body.ast-left-sidebar.ast-separate-container .site-content > .ast-container,
  body.ast-left-sidebar.ast-separate-container .site-content > .ast-container > #primary {
    padding: 0 8px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  body.show-sidebar {
    /* ✅ DO NOT block body scroll */
    overflow: auto !important;
  }

  #ast-mobile-popup-content {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #cbt-mobile-sidebar {
    position: relative;
    width: 300px;
    max-width: 90vw;
    height: 100%;
    height: calc(100vh - 112px); /* or whatever fits your header */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;    background: #fff;
    padding: 20px 16px 40px;
    flex-shrink: 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 6px 6px 0;
    display: flex;
    flex-direction: column;
  }

  .site-content,
  .ast-container {
    display: flex;
    flex-direction: row;
    height: auto !important;
    min-height: 100vh;
  }

  body.ast-left-sidebar #primary {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    height: auto !important;
    overflow: visible !important;
  }

  body.ast-left-sidebar .site-content > .ast-container {
    flex-direction: column;
    align-items: flex-start;
  }

  body.ast-left-sidebar #secondary {
    display: none !important; /* Hide regular sidebar */
  }

  header#masthead.site-header {
    position: sticky;
    top: 0;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .cbt-grid-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  body.search.ast-left-sidebar .site-content > .ast-container > #primary {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.search .cbt-grid-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.search .site-main > h1,
  body.search .site-main > .cbt-subtitle {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 0.3em !important; 
  }

  body.search .site-main > .cbt-subtitle {
    padding-left: 60px !important;
    padding-right: 20px !important;
    margin-top: 0 !important;        
    margin-bottom: 1.5em !important; 
  }

  /* === Section spacing inside mobile sidebar === */
  #cbt-mobile-sidebar .filter-section,
  #cbt-mobile-sidebar .cbt-sidebar-section,
  #cbt-mobile-sidebar .widget {
    margin-bottom: 1.5em;
  }

  /* === Section Titles */
  #cbt-mobile-sidebar .filter-section h4,
  #cbt-mobile-sidebar h2.widget-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
  }

  /* === Filter Group Layout */
  #cbt-mobile-sidebar .filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.6em;
  }

  /* === Filter Buttons */
  #cbt-mobile-sidebar .filter-btn,
  #cbt-mobile-sidebar .cbt-filter-button {
    flex: 0 0 calc(50% - 0.5em);
    max-width: calc(50% - 0.5em);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background-color: #f5f5f5;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #cbt-mobile-sidebar .filter-btn:hover,
  #cbt-mobile-sidebar .cbt-filter-button:hover {
    background-color: #e5e5e5;
  }

  #cbt-mobile-sidebar .filter-btn.active,
  #cbt-mobile-sidebar .cbt-filter-button.active {
    background-color: #f60076;
    color: white;
  }

  /* === Flags inside Filter Buttons */
  #cbt-mobile-sidebar .filter-btn img,
  #cbt-mobile-sidebar .cbt-filter-button img {
    vertical-align: middle;
    margin-right: 6px;
    height: 14px;
  }

  /* === Fix flag + text alignment */
  #cbt-mobile-sidebar .filter-group .filter-btn img + span,
  #cbt-mobile-sidebar .cbt-filter-button img + span {
    display: inline-block;
  }

  /* === Search Box Fix */
  #cbt-mobile-sidebar .wp-block-search {
    display: block;
    margin-bottom: 1em;
  }

  #cbt-mobile-sidebar .wp-block-search__input {
    width: 100% !important;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
  }

  @supports (-webkit-touch-callout: none) {
    body.show-sidebar #cbt-mobile-sidebar {
      height: calc(var(--vh, 1vh) * 100 - 60px);
    }
  }
  body.page-template-page-tags.ast-left-sidebar #content > .ast-container > #primary {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
   .cbt-tags-browser {
    padding-top: 50px !important
  }
 body.cbt-countries-page h1.page-title {
  margin-top: -100px !important;
 }
}

@media (min-width: 768px) and (max-width: 900px) {
  body.ast-left-sidebar #content > .ast-container,
  body.ast-left-sidebar .site-content > .ast-container {
    padding-top: 120px !important; /* matches your header height */
  }
  body.show-sidebar #cbt-mobile-sidebar {
    top: 100px !important; /* or use var(--cbt-header-height) */
    height: calc(100vh - 120px) !important;
  }
  .cbt-grid-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  body.ast-left-sidebar.ast-separate-container .site-content > .ast-container,
  body.ast-left-sidebar.ast-separate-container .site-content > .ast-container > #primary {
    padding: 0 8px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
/* === Section spacing inside mobile sidebar === */
#cbt-mobile-sidebar .filter-section,
#cbt-mobile-sidebar .cbt-sidebar-section,
#cbt-mobile-sidebar .widget {
  margin-bottom: 1.5em;
}

/* === Section Titles */
#cbt-mobile-sidebar .filter-section h4,
#cbt-mobile-sidebar h2.widget-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

/* === Filter Group Layout */
#cbt-mobile-sidebar .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.6em;
}

/* === Filter Buttons */
#cbt-mobile-sidebar .filter-btn,
#cbt-mobile-sidebar .cbt-filter-button {
  flex: 0 0 calc(50% - 0.5em);
  max-width: calc(50% - 0.5em);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background-color: #f5f5f5;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover + Active States */
#cbt-mobile-sidebar .filter-btn:hover,
#cbt-mobile-sidebar .cbt-filter-button:hover {
  background-color: #e5e5e5;
}

#cbt-mobile-sidebar .filter-btn.active,
#cbt-mobile-sidebar .cbt-filter-button.active {
  background-color: #f60076;
  color: white;
}

/* === Flags inside Filter Buttons */
#cbt-mobile-sidebar .filter-btn img,
#cbt-mobile-sidebar .cbt-filter-button img {
  vertical-align: middle;
  margin-right: 6px;
  height: 14px;
}

/* === Fix flag + text alignment */
#cbt-mobile-sidebar .filter-group .filter-btn img + span,
#cbt-mobile-sidebar .cbt-filter-button img + span {
  display: inline-block;
}

/* === Search Box Fix */
#cbt-mobile-sidebar .wp-block-search {
  display: block;
  margin-bottom: 1em;
}

#cbt-mobile-sidebar .wp-block-search__input {
  width: 100% !important;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
 }
  .cbt-roulette-wrapper {
    margin-left: 0 !important;
    padding: 0 12px;
  }

  .cbt-roulette-wrapper iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    display: block;
  }

  .cbt-roulette-button-wrapper {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  /* Force no vertical gap below wrapper */
  .cbt-roulette-wrapper,
  .cbt-roulette-button-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Collapse vertical layout structure below iframe */
  #primary.content-area,
  main.site-main,
  .site-content,
  .ast-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Force flex layout to avoid inherited height pushing footer down */
  body.page-template-page-roulette #content > .ast-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Optional: ensure footer is not pushed away */
  footer,
  #colophon {
    margin-top: 0 !important;
    padding-top: 20px;
  }
 body.cbt-female-page h1.page-title { 
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 1.7em !important;
    font-weight: 500 !important;
    line-height: 1.2;
    margin-top: 0 !important;
 }
}

@media (max-width: 600px) {
  .cbt-grid-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  body.ast-left-sidebar.ast-separate-container .site-content > .ast-container,
  body.ast-left-sidebar.ast-separate-container .site-content > .ast-container > #primary {
    padding: 0 8px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #cbt-mobile-sidebar .filter-section,
  #cbt-mobile-sidebar .cbt-sidebar-section,
  #cbt-mobile-sidebar .widget {
    margin-bottom: 1.5em;
  }

  #cbt-mobile-sidebar .filter-section h4,
  #cbt-mobile-sidebar h2.widget-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
  }

  #cbt-mobile-sidebar .filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.6em;
  }

  #cbt-mobile-sidebar .filter-btn,
  #cbt-mobile-sidebar .cbt-filter-button {
    flex: 0 0 calc(50% - 0.5em);
    max-width: calc(50% - 0.5em);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background-color: #f5f5f5;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #cbt-mobile-sidebar .filter-btn:hover,
  #cbt-mobile-sidebar .cbt-filter-button:hover {
    background-color: #e5e5e5;
  }

  #cbt-mobile-sidebar .filter-btn.active,
  #cbt-mobile-sidebar .cbt-filter-button.active {
    background-color: #f60076;
    color: white;
  }

  #cbt-mobile-sidebar .filter-btn img,
  #cbt-mobile-sidebar .cbt-filter-button img {
    vertical-align: middle;
    margin-right: 6px;
    height: 14px;
  }

  #cbt-mobile-sidebar .filter-group .filter-btn img + span,
  #cbt-mobile-sidebar .cbt-filter-button img + span {
    display: inline-block;
  }

  #cbt-mobile-sidebar .wp-block-search {
    display: block;
    margin-bottom: 1em;
  }

  #cbt-mobile-sidebar .wp-block-search__input {
    width: 100% !important;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
  }
}

@media (max-width: 1280px) {
  .cbt-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 10px;
    list-style: none;
  }

  .cbt-tag-list li {
    margin: 0;
    padding: 0;
  }

  .cbt-tag-list li a {
    display: inline-block;
    padding: 6px 10px;
    background-color: #f3f3f3;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
  }

  .cbt-tag-list li a:hover {
    background-color: #e2e2e2;
  }
}

@media (min-width: 1241px) and (max-width: 1298px) {
  .cbt-header-actions {
    margin-left: auto !important;
    margin-right: 10px !important;
    padding-right: 0 !important;
    top: 0 !important;
    align-self: center !important;
    justify-self: end !important;
  }
  .main-navigation ul {
    margin-left: -40px !important;
  }
  .cbt-header-actions .btn-signup,
  .cbt-header-actions .btn-login {
    height: 40px;
    line-height: 1;
    padding: 0 16px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

  .ast-primary-header-bar {
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
  }
}


@media (max-width: 581px) and (min-width: 481px) {
ul.page-numbers li {
    display: none !important;
  }

  /* Always show Prev and Next */
  ul.page-numbers li:first-child,
  ul.page-numbers li:last-child {
    display: inline-block !important;
  }

  /* Show current page */
  ul.page-numbers li:has(> span.current) {
    display: inline-block !important;
  }

  /* Show one before current */
  ul.page-numbers li:has(> span.current) ~ li {
    display: inline-block !important;
  }

  /* Show one after current (reverse scan) */
  ul.page-numbers li:has(> span.current):nth-last-child(n+3) {
    display: inline-block !important;
  }

  /* Ensure compact spacing */
  ul.page-numbers a,
  ul.page-numbers span {
    font-size: 14px;
    padding: 0.4em 0.6em;
    min-width: 32px;
    text-align: center;
  }
  body.cbt-countries-page h1.page-title {
  margin-top: -120px !important;
  }
}

@media (max-width: 480px) {
  body.ast-left-sidebar #content > .ast-container,
  body.ast-left-sidebar .site-content > .ast-container {
    padding-top: 100px !important; /* matches your header height */
  }
  body.show-sidebar #cbt-mobile-sidebar {
    top: 80px !important; /* or use var(--cbt-header-height) */
    height: calc(100vh - 120px) !important;
  }

  .cbt-grid-wrapper {
    grid-template-columns: repeat(2, 1fr) !important; /* 👈 2 columns for phones */
  }

  body.ast-left-sidebar.ast-separate-container .site-content > .ast-container,
  body.ast-left-sidebar.ast-separate-container .site-content > .ast-container > #primary {
    padding: 0 8px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* === Widget spacing === */
  #cbt-mobile-sidebar .filter-section,
  #cbt-mobile-sidebar .cbt-sidebar-section,
  #cbt-mobile-sidebar .widget {
    margin-bottom: 1.5em;
  }

  /* === Widget Titles === */
  #cbt-mobile-sidebar .filter-section h4,
  #cbt-mobile-sidebar h2.widget-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
  }

  /* === Filter Button Grid === */
  #cbt-mobile-sidebar .filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.6em;
  }

  /* === Filter Buttons === */
  #cbt-mobile-sidebar .filter-btn,
  #cbt-mobile-sidebar .cbt-filter-button {
    flex: 0 0 calc(50% - 0.5em);
    max-width: calc(50% - 0.5em);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #333;
    background-color: #f5f5f5;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* === Hover + Active === */
  #cbt-mobile-sidebar .filter-btn:hover,
  #cbt-mobile-sidebar .cbt-filter-button:hover {
    background-color: #e5e5e5;
  }

  #cbt-mobile-sidebar .filter-btn.active,
  #cbt-mobile-sidebar .cbt-filter-button.active {
    background-color: #f60076;
    color: white;
  }

  /* === Flags inside buttons === */
  #cbt-mobile-sidebar .filter-btn img,
  #cbt-mobile-sidebar .cbt-filter-button img {
    vertical-align: middle;
    margin-right: 6px;
    height: 14px;
  }

  #cbt-mobile-sidebar .filter-group .filter-btn img + span,
  #cbt-mobile-sidebar .cbt-filter-button img + span {
    display: inline-block;
  }

  /* === Search box === */
  #cbt-mobile-sidebar .wp-block-search {
    display: block;
    margin-bottom: 1em;
  }

  #cbt-mobile-sidebar .wp-block-search__input {
    width: 100% !important;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
  }

  #cbt-mobile-sidebar .wp-block-search__button {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 8px;
  }

  body.home h1.page-title {
  font-size: 1.2rem !important;
  text-align: left;
  line-height: 1.15 !important;
  margin-top: 0 !important;
  margin-bottom: 0.2em !important;
}

  body.home h1.page-title .cbt-line-1,
  body.home h1.page-title .cbt-line-2 {
    display: block;
  }

  body.home h1.page-title .cbt-star {
    font-size: 1.6rem;
    vertical-align: middle;
    margin-right: 6px;
  }
  body.home.ast-left-sidebar #primary .site-main h1.page-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 50px !important;
  }

  body.home.ast-left-sidebar #primary .site-main h1.page-title + p.cbt-subtitle {
    margin-top: 4px !important;  /* Adjust as needed */
    line-height: 1.3 !important;
    font-size: 0.94rem !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    display: block !important;
  }

  /* Override the problematic wildcard margin */
  body.ast-left-sidebar #primary .site-main h1.page-title * {
    margin-top: 0 !important;
  }

  .cbt-tags-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
    margin-bottom: 30px;
  }

  .cbt-tags-group h3 {
    min-width: 30px;
    margin: 0;
    padding-top: 4px;
    font-size: 18px;
    color: #e71919;
  }

  .cbt-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
  }

  .cbt-tag-list li {
    white-space: nowrap;
  }
  .cbt-roulette-wrapper {
    padding: 0 12px !important;  /* ✅ center content */
    margin-left: 0 !important;
  }

  .cbt-iframe-wrapper {
    position: relative;
    width: 100%;
    padding-top: 95%; /* ✅ taller aspect ratio (4:3 or more) */
  }

  .cbt-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
  .cbt-roulette-button-wrapper {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  /* Force no vertical gap below wrapper */
  .cbt-roulette-wrapper,
  .cbt-roulette-button-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Collapse vertical layout structure below iframe */
  #primary.content-area,
  main.site-main,
  .site-content,
  .ast-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Force flex layout to avoid inherited height pushing footer down */
  body.page-template-page-roulette #content > .ast-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Optional: ensure footer is not pushed away */
  footer,
  #colophon {
    margin-top: 0 !important;
    padding-top: 20px;
  }

  h1.page-title:has(img.emoji) {
    font-size: 1.2rem !important;
    line-height: 1.0 !important;
  }

  .page-title {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap; /* ✅ allows breaking into new line */
    gap: 6px;
  }

body.page-template-page-tags h1.page-title:has(img.emoji) {
  font-size: 1.2rem !important;
  line-height: 1.0 !important;
  padding-top: 50px;
}

body.ast-left-sidebar.cbt-tags-page #primary .site-main h1.page-title + * {
  margin-top: -14px !important;
  padding-top: 0 !important;
}

 body.page-template-page-tags .cbt-subtitle { 
    font-size: 15px !important;
    margin-top: 5px !important;
    margin-bottom: 1.0em !important;
    color: #444 !important;
    text-align: left !important;
    padding-left: 1em !important;
   }

body.cbt-countries-page.ast-left-sidebar #primary .site-main h1.page-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -10px !important;
}

body.cbt-sex-roulette-page.ast-left-sidebar #primary .site-main h1.page-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 50px !important;
}
body.cbt-sex-roulette-page.ast-left-sidebar #primary .site-main h1.page-title + .cbt-roulette-wrapper {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

body.cbt-search-page.ast-left-sidebar #primary .site-main h1.page-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 50px !important;
}
body.ast-left-sidebar.cbt-search-page #primary .site-main h1.page-title + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.cbt-search-page .cbt-subtitle {
  font-size: 15px !important;
  margin-bottom: 1em !important;
  color: #444 !important;
  text-align: left !important;
  padding-left: 1em !important;
}
  #cbt-no-favs {
    display: none !important;
    width: 100%;
    margin-top: 20px !important; /* optional: remove extra margin from paragraph */
  }

  .page-title img.emoji {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  body.cbt-on-favs-page.ast-left-sidebar #primary .site-main h1.page-title + * {
    margin-top: 10px !important;
    padding-top: 5px !important;
  }
    body.ast-left-sidebar #content > .ast-container,
  body.ast-left-sidebar .site-content > .ast-container {
    padding-top: 55px !important;
  }
 .cbt-country-list h2:first-of-type {
  margin-top: 40px; /* or 16px for more spacing */
  }
  body.cbt-trans-page h1.page-title {
    display: flex !important;
    gap: 0.3rem !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding-top: 3rem
  }

  body.cbt-trans-page .cbt-subtitle {
    font-size: 15px !important;
    margin-top: 5px !important;
    margin-bottom: 1.0em !important;
    color: #444 !important;
    text-align: left !important;
    padding-left: 1em !important;
   }

 ul.page-numbers li {
    display: none !important;
  }

  /* Always show Prev and Next */
  ul.page-numbers li:first-child,
  ul.page-numbers li:last-child {
    display: inline-block !important;
  }

  /* Show current page */
  ul.page-numbers li:has(> span.current) {
    display: inline-block !important;
  }

  /* Show one before current */
  ul.page-numbers li:has(> span.current) ~ li {
    display: inline-block !important;
  }

  /* Show one after current (reverse scan) */
  ul.page-numbers li:has(> span.current):nth-last-child(n+3) {
    display: inline-block !important;
  }

  /* Ensure compact spacing */
  ul.page-numbers a,
  ul.page-numbers span {
    font-size: 14px;
    padding: 0.4em 0.6em;
    min-width: 32px;
    text-align: center;
  }
   .cbt-tags-browser {
    padding-top: 20px !important;
   }
  body.cbt-female-page h1.page-title .cbt-star {
    font-size: 1.23rem;
    vertical-align: middle;
    margin-right: 2px;
 }
  .btn-create-account,
  .btn-login {
    padding: 0 8px !important;
    font-size: 12px;
    height: 30px;
    margin-left: 0 !important;
    border-radius: 15px;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
  }
}

@media (max-width: 449px) {
  .btn-create-account,
  .btn-login {
    padding: 0 4px !important;
    height: 30px;
    margin-left: 0 !important;
    border-radius: 15px;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
  }
}

@media (max-width: 425px) {
  .btn-create-account,
  .btn-login {
    padding: 0 2px !important;
    font-size: 12px !important;
    height: 30px !important;
    margin-left: 0 !important;
    border-radius: 15px;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
  }
}

@media (max-width: 409px) {
  ul.page-numbers li {
    display: none !important;
  }

  /* Always show Prev and Next */
  ul.page-numbers li:first-child,
  ul.page-numbers li:last-child {
    display: inline-block !important;
  }

  /* Show current page */
  ul.page-numbers li:has(> span.current) {
    display: inline-block !important;
  }

  /* Show one before current */
  ul.page-numbers li:has(> span.current) ~ li {
    display: inline-block !important;
  }

  /* Show one after current (reverse scan) */
  ul.page-numbers li:has(> span.current):nth-last-child(n+3) {
    display: inline-block !important;
  }

  /* Ensure compact spacing */
  ul.page-numbers a,
  ul.page-numbers span {
    font-size: 14px;
    padding: 0.4em 0.6em;
    min-width: 32px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  body.show-sidebar #secondary {
    display: none !important;
  }
}
/* === Extra bottom space for "Try Another Show" button on specific mobile widths === */
@media (max-width: 540px) and (min-width: 500px) {
  .load-roulette-btn {
    margin-bottom: 30px !important;
  }
}
@media (max-width: 600px) and (min-width: 531px) {

  body.ast-left-sidebar #primary .site-main h1.page-title {
    font-size: 1.6rem !important;
  }
}

@media (max-width: 530px) and (min-width: 481px) {

  body.ast-left-sidebar #primary .site-main h1.page-title {
    font-size: 1.4rem !important;
  }
}

@media (max-width: 654px) and (min-width: 601px) {

  body.ast-left-sidebar #primary .site-main h1.page-title {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 411px) and (min-width: 376px) {

  body.home.ast-left-sidebar #primary .site-main h1.page-title {
    font-size: 1.05rem !important;
  }
  .cbt-star {
    height: 1em !important;
  }
 }

@media (max-width: 383px) {
  .btn-create-account,
  .btn-login {
    padding: 0 2px !important;
    font-size: 10px !important;
    height: 30px !important;
    margin-left: 0 !important;
    border-radius: 15px;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
  }
}

@media (max-width: 375px) and (min-width: 361px) {
  .load-roulette-btn {
    margin-bottom: 40px !important;
  }
  body.ast-left-sidebar #primary .site-main h1.page-title {
    font-size: 1.4rem !important;
  }
  .cbt-star img {
    height: 0.9em !important;
  }
  body.cbt-trans-page .cbt-subtitle {
    font-size: 15px !important;
    margin-top: 5px !important;
    margin-bottom: 1.0em !important;
    color: #444 !important;
    text-align: left !important;
    padding-left: 1em !important;
   }
  body.cbt-search-page #primary .site-main h1.page-title {
    font-size: 1.1rem !important;
    line-height: 1.0 !important;
  }
body.cbt-search-page .cbt-subtitle {
    font-size: 13px !important;
    margin-bottom: 1em !important;
    color: #444 !important;
    text-align: left !important;
    padding-left: 1em !important;
  }
  body.cbt-female-page.ast-left-sidebar #primary .site-main h1.page-title {
    font-size: 13px !important;
    margin-left: -10px !important;
  }

body.cbt-female-page.ast-left-sidebar #primary .site-main h1.page-title + p.cbt-subtitle {
    font-size: 0.80rem !important;
}

   body.cbt-female-page h1.page-title .cbt-star {
    font-size: 1.3em;
    vertical-align: middle;
    margin-right: 0;
}
  ul.page-numbers li {
    display: none !important;
  }

  /* Show Prev and Next */
  ul.page-numbers li:first-child,
  ul.page-numbers li:last-child {
    display: inline-block !important;
  }

  /* Show current page */
  ul.page-numbers li span.current {
    display: inline-block !important;
  }

  /* Show previous and next to current, if your PHP generates them like this: */
  ul.page-numbers li span.current + li,
  ul.page-numbers li span.current + li + li,
  ul.page-numbers li span.current ~ li:last-child {
    display: inline-block !important;
  }

  /* Show previous sibling manually by targeting based on class if possible */
  ul.page-numbers li.prev-of-current {
    display: inline-block !important;
  }

  /* Optional compact style */
  ul.page-numbers li a,
  ul.page-numbers li span {
    font-size: 14px;
    padding: 0.4em 0.6em;
    min-width: 32px;
    text-align: center;
  }

  ul.page-numbers {
    justify-content: center;
    flex-wrap: wrap;
  }
  ul.page-numbers a,
  ul.page-numbers span {
    display: inline-block;
    font-size: 14px;
    padding: 0.4em 0.6em;
    min-width: 32px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
    box-sizing: border-box;
  }

  ul.page-numbers span.current {
    background: #007baf;
    color: #fff;
  }
}

@media (max-width: 360px) {
  .load-roulette-btn {
    margin-bottom: 50px !important;
  }
  .page-title {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .page-title img.emoji {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  #cbt-no-favs {
    display: block !important;
    width: 100% !important;
    margin-top: 17px !important;
  }
  h1.page-title:has(img.emoji) {
    font-size: 15px !important;
    line-height: 1.0 !important;
  }
body.cbt-search-page .cbt-subtitle {
    font-size: 13px !important;
    margin-bottom: 1em !important;
    color: #444 !important;
    text-align: left !important;
    padding-left: 1em !important;
  }
 ul.page-numbers li {
    display: none !important;
  }

  /* Show Prev and Next */
  ul.page-numbers li:first-child,
  ul.page-numbers li:last-child {
    display: inline-block !important;
  }

  /* Show current page */
  ul.page-numbers li span.current {
    display: inline-block !important;
  }

  /* Show previous and next to current, if your PHP generates them like this: */
  ul.page-numbers li span.current + li,
  ul.page-numbers li span.current + li + li,
  ul.page-numbers li span.current ~ li:last-child {
    display: inline-block !important;
  }

  /* Show previous sibling manually by targeting based on class if possible */
  ul.page-numbers li.prev-of-current {
    display: inline-block !important;
  }

  /* Optional compact style */
  ul.page-numbers li a,
  ul.page-numbers li span {
    font-size: 14px;
    padding: 0.4em 0.6em;
    min-width: 32px;
    text-align: center;
  }

  ul.page-numbers {
    justify-content: center;
    flex-wrap: wrap;
  }
  ul.page-numbers a,
  ul.page-numbers span {
    display: inline-block;
    font-size: 14px;
    padding: 0.4em 0.6em;
    min-width: 32px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
    box-sizing: border-box;
  }

  ul.page-numbers span.current {
    background: #007baf;
    color: #fff;
  }
}

@media (max-width: 352px) {
  .btn-create-account,
  .btn-login {
    padding: 0 2px !important;
    font-size: 10px !important;
    height: 30px !important;
    margin-left: -10px !important;
    border-radius: 15px;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
  }
}