/**
 * AltPorn.net Integration Styles for MechBunny
 * Override the default MechBunny theme to match AltPorn.net main site
 *
 * Color Reference:
 * - Header/Primary: #990000 (maroon red)
 * - Secondary: #122A4E (dark navy blue)
 * - Links: #d04526 (burnt orange)
 * - Background: #0b1a30 (dark blue)
 * - Text: #222222 (dark gray on light), #fff (on dark)
 */

/* ============================================
   FONTS - Match AltPorn.net
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

body {
    font-family: 'Open Sans', sans-serif !important;
    background-color: #0b1a30 !important;
    background-image: url('https://altporn.net/wp-content/uploads/2025/07/bg-newgb1.png') !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* ============================================
   HEADER - Hide default MechBunny header elements
   We're using custom altporn-* elements instead
   ============================================ */
header.header,
.header,
header.header.p-0 {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    position: relative !important;  /* Prevent sticky/fixed */
    top: auto !important;
}

/* Prevent header from being sticky/fixed on scroll */
.header.header-scrolled,
header.header.header-scrolled {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
}

/* Hide the default MechBunny nav container */
.header .top-nav,
.header .container-fluid.top-nav,
header.header .top-nav,
.header .container-fluid.custom-90 {
    display: none !important;
}

/* Hide old bar images */
.top-bar-img,
.bottom-bar-img {
    display: none !important;
}

/* Remove the purple gradient bars */
.top-bar-img {
    display: none !important;
}

.bottom-bar-img {
    display: none !important;
}

/* Navigation bar styling - inherits background from above */
.header .top-nav {
    padding: 10px 0;
}

/* Logo area */
.header .logo {
    padding: 10px 1rem 10px 0;
}

.header .logo img {
    max-height: 60px;
    width: auto;
    height: auto;
}

/* Main navigation links */
.navbar a {
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    height: 50px;
    padding: 0 1rem;
    letter-spacing: 0.5px;
}

.navbar a:hover,
.navbar .active {
    background: #7a0000 !important;
    color: #fff !important;
}

.navbar li:hover > a {
    background: #7a0000 !important;
}

/* ============================================
   BUTTONS - Match AltPorn.net
   ============================================ */
.login, .sign-up, .main-btn {
    border-color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
    font-size: 13px;
    border-radius: 4px;
    height: 32px;
    padding: 0.4rem 1rem;
}

.login:hover {
    background: #7a0000 !important;
    border-color: #fff !important;
}

.join, .sign-up.join {
    background: #d04526 !important;
    border-color: #d04526 !important;
}

.join:hover {
    background: #c03d20 !important;
    border-color: #c03d20 !important;
}

/* ============================================
   SEARCH BAR
   ============================================ */
.input-group {
    border-color: #fff !important;
    background: rgba(255,255,255,0.1);
}

.input-group > .form-control {
    background: transparent !important;
    color: #fff !important;
}

.input-group .btn {
    color: #fff !important;
}

/* ============================================
   CONTENT WRAPPER - White background like main site
   ============================================ */
section.top-section,
.top-section {
    background: #fff !important;
    background-color: #fff !important;
    padding: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Main content area white */
.top-section .content,
.content {
    background: #fff !important;
    background-color: #fff !important;
}

/* Filter bar contained within content width */
.top-section .aside,
.aside {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.top-section .list-container,
.list-container {
    background: #122A4E !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    margin: 0 !important;
}

/* Inner filter box */
.list-container .inner-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#mobile-categories {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Model cards on white background need adjusted text */
.models .models-name {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;
}

/* Page headers on white background */
.top-section .text-header,
.header-row .text-header {
    color: #990000 !important;
}

.top-section .text-subhader,
.header-row .text-subhader {
    color: #666 !important;
}

/* ============================================
   SIDEBAR / CATEGORIES
   ============================================ */
.list-container {
    background: #122A4E !important;
}

.list-container .list-header {
    color: #fff;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700;
    border-bottom: 2px solid #990000;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.list-container .category-list li a {
    color: #ccc !important;
    font-family: 'Open Sans', sans-serif !important;
}

.list-container .category-list li a:hover,
.list-container .category-list li a.active {
    color: #d04526 !important;
}

.list-container .category-list li a:before {
    color: #990000 !important;
}

.list-container .category-list li a.active:before {
    color: #d04526 !important;
}

/* Mobile categories toggle */
.show-categories {
    background: #122A4E !important;
}

/* ============================================
   CONTENT AREA
   ============================================ */
.content {
    background: transparent;
}

/* Page headers - On white background they need dark colors */
.header-row .text-header {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 800;
    text-transform: uppercase;
    color: #990000 !important;
}

.header-row .text-subhader {
    color: #666 !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Performer page header row is on white background */
section.top-section .header-row .text-header {
    color: #990000 !important;
}

/* Sort dropdown */
.form-select,
.rows-select .form-control {
    background: #122A4E !important;
    border: 1px solid #990000 !important;
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* ============================================
   MODEL/PERFORMER CARDS
   ============================================ */

/* Ensure video-link is the positioning parent */
.img-col.-cam .video-link {
    position: relative !important;
    display: block !important;
    border: 2px solid transparent !important;
    transition: border-color 0.2s ease !important;
}

.img-col.-cam .video-link:hover,
.img-col.-cam .video-link:focus {
    border-color: #990000 !important;
}

/* Image container */
.gallery .thumbnail-card .image {
    display: block !important;
}

/* Info bar - must overlay on image, not push it */
.img-col.-cam .item-info {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    background-color: rgba(18,3,35,0.8) !important;
}

/* HIDE ETHNICITY - both in cam boxes and filter bar */
.img-col.-cam .item-sub-info,
.item-sub-info {
    display: none !important;
}

/* Filters restored to pill style - no dropdown CSS needed */

/* Model name labels */
.models .models-name {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700;
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.models .models-nick {
    color: #d04526 !important;
}

/* Live indicator */
.top-icon {
    background: #990000 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700;
}

.top-icon .online-dot {
    background: #00ff00 !important;
    border-color: #00ff00 !important;
}

/* Favorite heart */
.add-to-fav {
    color: #990000 !important;
}

/* Site/Brand logo - hide by default, show on hover */
.img-col.-cam .item-sites {
    opacity: 0 !important;
    background: transparent !important;
    transition: opacity 0.2s ease !important;
}

.img-col.-cam .thumbnail-card:hover .item-sites,
.img-col.-cam a:hover .item-sites {
    opacity: 1 !important;
}

/* Fix black line - ensure no background on empty/loading images */
.img-col.-cam .item-sites img {
    background: transparent !important;
    border: none !important;
}

/* ============================================
   TABS (Sites, Tags, etc.)
   ============================================ */
.nav-pills .nav-link {
    background: #122A4E !important;
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: #990000 !important;
    color: #fff !important;
}

.nav-pills .nav-link:hover {
    background: #7a0000 !important;
}

.tab-content {
    border-color: #122A4E !important;
    background: #0d2035 !important;
}

/* ============================================
   PERFORMER PAGE TEXT VISIBILITY FIXES
   Tab content has dark blue background (#0d2035)
   ============================================ */

/* Tab labels (Name:, Location:, etc.) - make visible on dark background */
.tab-text-header {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Tab values - orange for visibility */
.tab-text-subheader {
    color: #d04526 !important;
}

/* Room description/subject text */
section.tabs .description,
.tabs .description,
.tabs > .description {
    color: #ccc !important;
    background: #122A4E !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
}

/* Tab pane content area */
.tab-pane {
    color: #ccc !important;
}

/* Thumbnail card on performer page */
.tab-pane .thumbnail-card {
    background: transparent !important;
}

.tab-pane .thumbnail-card .image {
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Column containers in tab content */
.col-tab-left,
.col-tab-right {
    color: #fff !important;
}

/* About section rows */
.tab-pane .my-2 {
    color: #fff !important;
}

/* Share tab content */
#pills-share,
#sharePane {
    color: #fff !important;
}

/* Comments tab content */
#pills-comments {
    color: #fff !important;
}

.t-comments {
    color: #fff !important;
}

.t-comments .comment-box {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid #122A4E !important;
    color: #ccc !important;
}

.t-comments .comment-author {
    color: #d04526 !important;
}

.t-comments .comment-date {
    color: #888 !important;
}

/* Overall tabs section */
section.tabs {
    background: #0b1a30 !important;
    color: #fff !important;
    padding: 20px !important;
    margin-top: 20px !important;
    border-radius: 4px !important;
}

/* ============================================
   PERFORMER PAGE - STAGE AREA
   ============================================ */
.stage {
    background: #0b1a30 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Offline message */
.stage center {
    color: #ccc !important;
    padding: 40px !important;
}

/* Join chatroom overlay button */
.join-chatroom {
    background: #990000 !important;
    color: #fff !important;
    border-color: #990000 !important;
}

.join-chatroom span {
    color: #fff !important;
}

/* View My Webcam button */
.join-btn {
    background: #990000 !important;
    border-color: #990000 !important;
    color: #fff !important;
}

.join-btn:hover {
    background: #7a0000 !important;
    border-color: #7a0000 !important;
    color: #fff !important;
}

/* Add Favorite button */
.main-btn.add-fav {
    background: #122A4E !important;
    border: 1px solid #990000 !important;
    color: #fff !important;
}

.main-btn.add-fav:hover {
    background: #990000 !important;
}

/* Float/PiP cam button (if any) */
[class*="float"],
[class*="pip"],
[class*="popout"],
.btn-float,
.float-btn,
.pip-button,
.popout-button {
    background: #990000 !important;
    color: #fff !important;
    border-color: #990000 !important;
}

/* Stage area iframe controls */
.stage button,
.stage .btn {
    background: #990000 !important;
    color: #fff !important;
    border-color: #990000 !important;
}

/* ============================================
   CARDS & FORMS
   ============================================ */
.card {
    border-color: #122A4E !important;
}

.card .card-title {
    background: #122A4E !important;
    border-color: #990000 !important;
    font-family: 'Open Sans', sans-serif !important;
}

.card .card-body {
    background: #0d2035 !important;
    border-color: #122A4E !important;
}

.card .card-body .fr__link {
    color: #d04526 !important;
}

/* Form inputs */
.form-input > .form-control {
    background: #122A4E !important;
    border: 1px solid #990000 !important;
    color: #fff !important;
}

.form-control:focus {
    border-color: #d04526 !important;
}

/* Join buttons */
.join-btn {
    background: #990000 !important;
    border-color: #990000 !important;
    font-family: 'Open Sans', sans-serif !important;
}

.join-btn:hover {
    background: #7a0000 !important;
}

.join-chatroom {
    background: #990000 !important;
    border-color: #990000 !important;
}

/* ============================================
   FOOTER (Inside page wrapper)
   ============================================ */
footer.footer,
.footer {
    background: #122A4E !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    left: 0 !important;
}

.footer .container-fluid,
.footer > .container-fluid {
    background: #122A4E !important;
    margin: 0 !important;
    padding: 15px !important;
    max-width: 100% !important;
}

.footer .footer-top,
footer .footer-top {
    background: #0b1a30 !important;
    border-top: 3px solid #990000;
    margin: 0 !important;
    width: 100% !important;
}

.footer .footer-bottom,
footer .footer-bottom {
    background: #122A4E;
    margin: 0 !important;
    width: 100% !important;
}

.footer .footer-list li a {
    font-family: 'Open Sans', sans-serif !important;
}

.footer .footer-list li a.custom-dot:before {
    color: #990000 !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: #d04526;
}

a:hover {
    color: #c03d20;
}

/* Keep white links in nav/buttons */
.navbar a,
.login,
.sign-up,
.footer a {
    color: #fff;
}

/* ============================================
   NOTIFICATIONS/ALERTS
   ============================================ */
.notification.info,
.alert-info {
    background: #122A4E !important;
    border-color: #990000 !important;
}

.notification.success {
    background: #1a5c1a !important;
    border-color: #2d8a2d !important;
}

.notification.error {
    background: #990000 !important;
    border-color: #7a0000 !important;
}

/* ============================================
   LOAD MORE BUTTON
   ============================================ */
#loadMore {
    background: #990000 !important;
    border: 2px solid #990000 !important;
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600;
    padding: 10px 30px !important;
}

#loadMore:hover {
    background: #7a0000 !important;
    border-color: #7a0000 !important;
}

/* ============================================
   RATING THUMBS
   ============================================ */
.thumb-up.active rect,
.thumb-up.active path,
.thumb-down.active rect,
.thumb-down.active path {
    stroke: #d04526 !important;
}

/* ============================================
   MOBILE MENU
   ============================================ */
.navbar-mobile {
    background: rgba(11, 26, 48, 0.95) !important;
}

.navbar-mobile ul {
    background: #122A4E !important;
}

.mobile-nav-toggle {
    color: #fff !important;
}

/* ============================================
   ALTPORN HEADER LAYOUT - Match main site
   Width: 1150px to match main site
   ============================================ */

/* Top site bar (ticker style) */
.altporn-site-bar {
    background-color: #990000;
    background-image: url('https://altporn.net/wp-content/uploads/2015/03/header.gif');
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
}

.altporn-site-bar .site-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 15px;
}

.altporn-site-bar .site-links {
    display: flex;
    gap: 20px;
}

.altporn-site-bar .site-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.altporn-site-bar .site-links a:hover {
    text-decoration: underline;
}

.altporn-site-bar .site-links .current {
    color: #ffcccc;
}

.altporn-site-bar .site-bar-search {
    display: flex;
}

.altporn-site-bar .site-bar-search input {
    background: #fff;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    width: 150px;
}

.altporn-site-bar .site-bar-search button {
    background: #fff;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
}

/* Logo bar (logo only) */
.altporn-logo-bar {
    background-color: #8d3333;
    background-image: url('https://altporn.net/wp-content/uploads/2015/03/header.gif');
}

.altporn-logo-bar .logo-bar-inner {
    padding: 15px;
    text-align: left;
}

.altporn-logo-bar .logo img {
    height: 50px;
    width: auto;
}

/* Nav bar */
.altporn-nav-bar {
    background-color: #7a2222;
}

.altporn-nav-bar .nav-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    flex-wrap: nowrap;
}

.altporn-nav-bar .navbar {
    flex: 1;
}

.altporn-nav-bar .navbar ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.altporn-nav-bar .navbar ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 12px 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.altporn-nav-bar .navbar ul li a:hover,
.altporn-nav-bar .navbar ul li a.active {
    background: #990000;
}

.altporn-nav-bar .nav-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.altporn-nav-bar .nav-buttons a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    padding: 6px 12px;
    border: 1px solid #fff;
    border-radius: 3px;
    white-space: nowrap;
}

.altporn-nav-bar .nav-buttons a.join {
    background: #d04526;
    border-color: #d04526;
}

.altporn-nav-bar .mobile-nav-toggle {
    display: none;
    color: #fff;
    font-size: 24px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 992px) {
    .altporn-site-bar .site-bar-inner {
        flex-direction: column;
        gap: 8px;
    }

    .altporn-site-bar .site-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .altporn-nav-bar .nav-bar-inner {
        flex-wrap: wrap;
    }

    .altporn-nav-bar .navbar ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .altporn-site-bar .site-links {
        flex-direction: column;
        align-items: center;
    }

    .altporn-nav-bar .mobile-nav-toggle {
        display: block;
    }

    .altporn-nav-bar .navbar {
        display: none;
    }

    .altporn-nav-bar .navbar.active {
        display: block;
        width: 100%;
    }

    .altporn-nav-bar .navbar ul {
        flex-direction: column;
    }
}

/* ============================================
   LAYOUT - HORIZONTAL FILTER BAR
   Move sidebar filters to horizontal bar at top
   ============================================ */

/* Convert sidebar to horizontal bar */
.aside {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 20px !important;
    display: block !important;
    flex: none !important;
}

/* The sidebar container wrapper */
.aside > .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.list-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 15px 20px !important;
    background: #122A4E !important;
    border-radius: 6px !important;
    left: 0 !important;
    top: auto !important;
}

/* Hide the mobile toggle button on desktop */
.show-categories {
    display: none !important;
}

/* Inner box contains all filter groups */
.list-container .inner-box {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Each filter group (aside-sort-list) */
.aside-sort-list {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Filter headers as inline labels */
.list-container .list-header {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #d04526 !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
    cursor: default !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Hide the collapse arrows */
.list-container .list-header i,
.list-container .list-header .bi-caret-down-fill {
    display: none !important;
}

/* Always show category lists (override collapse) */
.list-container .category-list {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.list-container .category-list li {
    margin: 0 !important;
    display: inline-flex !important;
}

/* Filter items as pill buttons */
.list-container .category-list li a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    color: #ccc !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.list-container .category-list li a:before {
    display: none !important; /* Hide bullet points */
}

.list-container .category-list li a:hover {
    background: #990000 !important;
    color: #fff !important;
}

.list-container .category-list li a.active {
    background: #990000 !important;
    color: #fff !important;
}

/* Close X on active filters */
.list-container .category-list li a .bi-x {
    margin-left: 5px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 12px !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Stack layout vertically - sidebar then content */
.top-section .container-fluid.d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Make content full width */
.content {
    margin-left: 0 !important;
    width: 100% !important;
    flex: 1 !important;
}

/* Container max-width to match main site */
.top-section .container-fluid {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    width: 100% !important;
}

/* Adjust gallery grid - 5 columns with less spacing */
.img-col {
    width: 20% !important; /* 5 columns */
    padding: 3px !important; /* Less spacing between boxes */
}

.gallery,
.row.gallery {
    margin: 0 -3px !important; /* Compensate for padding */
}

@media (max-width: 1100px) {
    .img-col {
        width: 25% !important; /* 4 columns */
    }

    .aside-sort-list {
        flex-basis: 45% !important;
    }
}

@media (max-width: 900px) {
    .img-col {
        width: 33.333% !important; /* 3 columns */
    }
}

@media (max-width: 600px) {
    .img-col {
        width: 50% !important; /* 2 columns */
    }

    /* Show mobile filter toggle on small screens */
    .show-categories {
        display: flex !important;
        background: #990000 !important;
        color: #fff !important;
        padding: 10px 20px !important;
        border-radius: 4px !important;
        margin-bottom: 15px !important;
    }

    .aside {
        height: 48px !important;
        overflow: hidden !important;
    }

    /* Revert to slide-out on mobile */
    .list-container {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        z-index: 1000 !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        border-radius: 0 !important;
    }

    .list-container .inner-box {
        flex-direction: column !important;
    }

    .aside-sort-list {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    .list-container.list-container-mobile {
        left: 0 !important;
    }
}

@media (max-width: 400px) {
    .img-col {
        width: 100% !important; /* 1 column */
    }
}

/* ============================================
   PAGE WRAPPER - Contains everything at 1150px
   ============================================ */
.altporn-page-wrapper {
    max-width: 1150px;
    margin: 0 auto;
    background: #fff;
}

/* Header inside wrapper - remove any default padding */
.altporn-page-wrapper header.header,
.altporn-page-wrapper .header {
    padding: 0 !important;
    margin: 0 !important;
}

.altporn-content-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Container inside top-section */
.top-section > .container-fluid,
.top-section .container-fluid.d-flex {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ============================================
   CUSTOM-90 WIDTH ADJUSTMENT
   ============================================ */
.custom-90,
.custom-100 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}