/* Theme Stylesheet */

body {
    padding: 0;
    background-color: #fff;
    color: #000;
    font: 14px/1.4em arial;
    -webkit-text-size-adjust: none;
    margin: 0;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

#mainWrapper {
    max-width: 980px;
    margin: 0 auto 12px;
    text-align: left;
    background-color: #fff;
    padding: 0;
    box-sizing: border-box;
}

#header {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 8px;
    margin-right: 8px;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #3563a8;
    font-weight: bold;
}

h1 {
    height: 34px;
    margin: 0 0 0.5em;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
}

#header h1 a {
    display: inline-block;
    height: 34px;
    line-height: 34px;
    text-decoration: none;
}

#header h1 a .logo-img {
    height: 34px;
    width: auto;
    max-width: 300px;
    display: block;
    vertical-align: middle;
}

#postAnAd {
    float: right;
    padding-bottom: 1em;
    font-size: 18px;
}

#postAnAd a {
    color: #3563a8;
    text-decoration: none;
}

#postAnAd a:hover {
    text-decoration: underline;
}

#footer {
    clear: both;
    margin-top: 1em;
    padding-top: 1em;
}

#footer div {
    padding-bottom: 1em;
    border-bottom: 2px solid #3563a8;
    color: #3563a8;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
}

#navLinkList {
    margin: 1em 0 0;
    padding: 0;
    font-size: 13px;
    text-align: center;
    list-style-type: none;
}

#navLinkList li {
    margin: 0;
    padding: 0 0.5em;
    display: inline;
    border-right: 1px solid #000;
}

#navLinkList li:last-child {
    border-right: none;
}

#navLinkList a {
    color: #3563a8;
    text-decoration: none;
    font-weight: normal;
}

#navLinkList a:hover {
    text-decoration: underline;
}

.newIcon {
    color: #c00;
}

sup {
    line-height: 1;
    vertical-align: baseline;
}

a {
    color: #b59a28;
    text-decoration: none;
}

a:hover {
    color: #b59a28;
    text-decoration: none;
}

h2 {
    margin: 0;
    font-size: 24px;
}

h3 {
    margin: 0;
    font-size: 16px;
}

h3 a {
    color: #000;
    text-decoration: none;
}

h3 a:hover {
    color: #666;
}

ul {
    margin: 0 0 0 1em;
    padding: 0;
    color: #000;
    list-style-type: square;
}

li {
    margin: 0 0 0 1em;
    padding: 0;
    color: #000;
    list-style-type: square;
}

.geoUnit {
    overflow: hidden;
    margin-bottom: 0.75em;
    max-width: 150px;
}

b {
    font-weight: bold;
}

.h1link {
    float: none !important;
    color: #000 !important;
    cursor: default;
}

/* Clearfix for #geoListings */
#geoListings:before,
#geoListings:after {
    content: "";
    display: table;
}

#geoListings:after {
    clear: both;
}

#geoListings {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* Column layout - 50% width each */
.column {
    width: 50%;
    float: left;
    box-sizing: border-box;
    zoom: 1;
    overflow: hidden;
}

/* Single country layout - full width */
#geoListings.single-country:before,
#geoListings.single-country:after {
    display: none; /* Disable clearfix for single country */
}

#geoListings.single-country {
    display: block;
    width: 100%;
    clear: both;
}

#geoListings.single-country .column.single-column {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0;
}

/* GeoBlock styling */
.geoBlock {
    padding: 2px 7px;
}

.geoBlock .geoUnit {
    min-width: 100%;
}

.geoBlock h2 {
    max-width: none;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: #405E8F;
    padding: 4px;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.geoBlock .inner.showing {
    display: block;
}

.geoBlock .inner {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    overflow: hidden;
}

.geoBlock ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.geoBlock ul li {
    margin: 0 0 0 0.5em;
    padding: 0;
    list-style-type: none;
}

.geoBlock ul li a {
    color: #b59a28;
    text-decoration: underline;
}

.geoBlock ul li a:hover {
    color: #b59a28;
    text-decoration: underline;
}

/* Responsive breakpoints */
@media (max-width: 860px) {
    .geoBlock .inner {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
    }
    
    /* Single country on smaller screens */
    #geoListings.single-country .column.single-column {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .column {
        width: 100%;
        margin-left: 0;
    }

    #geoListings .united-states {
        position: static;
        margin-left: 0;
    }

    .geoBlock .inner {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
}

@media (max-width: 480px) {
    .column {
        width: 100%;
    }

    #geoListings .united-states {
        position: static;
        margin-left: 0;
    }

    .geoBlock .inner {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        display: none;
        padding: 8px 4px;
    }

    .geoBlock h2 {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    #geoListings {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #EAE9FE;
    }
}

@media (max-width: 310px) {
    .column {
        width: 100%;
    }

    .geoBlock .inner {
        -webkit-column-count: auto; /* Chrome, Safari, Opera */
        -moz-column-count: auto; /* Firefox */
        column-count: auto;
        padding: 8px 4px;
        display: none;
    }

    #geoListings .united-states {
        position: static;
        margin-left: 0;
    }

    .geoBlock h2 {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    #geoListings {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #EAE9FE;
    }
}

/* IE compatibility */
.ie9 .geoBlock .inner ul li,
.ie8 .geoBlock .inner ul li,
.ie7 .geoBlock .inner ul li {
    padding-left: 1%;
    width: 30%;
    float: left;
    box-sizing: border-box;
}

.ie9 .column,
.ie8 .column,
.ie7 .column {
    width: 49.5%;
}

.ie9 #geoListings {
    min-width: 400px;
}

.ie8 #geoListings,
.ie7 #geoListings {
    min-width: 800px;
}

.clearfix {
    clear: both;
}

/* ============================================
   CITY PAGE LAYOUT
   ============================================ */

/* Page Background */
#pageBackground {
    position: relative;
    clear: both;
    margin: 0 auto;
    padding: 0;
    background: #e3e9f2;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Main Cell Wrapper */
#mainCellWrapper {
    display: block;
    margin-bottom: 10px;
    -moz-border-radius: 0 18px 18px 0;
    -webkit-border-radius: 0 18px 18px 0;
    border-radius: 0 18px 18px 0;
    box-sizing: border-box;
}

/* Main Cell Background - Multi-column layout */
.mainCellBackground {
    background-color: #fff;
    border-bottom-right-radius: 18px;
    padding-top: 10px;
    -moz-column-count: 4;
    -moz-column-gap: 0;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    column-count: 4;
    column-gap: 0;
}

/* Index Section Column Block */
.indexSectionColumnBlock {
    display: inline-block;
    vertical-align: top;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    width: 100%;
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 8px;
}

.indexSectionColumnBlock ul {
    display: inline-block;
    width: 100%;
    vertical-align: baseline;
    height: 100%;
    margin-bottom: 1em;
}

/* Index Section Buttons (Section Headers) */
.indexSectionButtons {
    width: 100%;
    padding: 4px 2px 4px 10px;
    background-color: #506fa3;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-sizing: border-box;
}

.indexSectionButtons a.head,
.indexSectionButtons span.head {
    display: block;
    width: 100%;
    color: #fff;
    font: bold 15px arial;
    text-decoration: none;
    text-transform: lowercase;
    box-sizing: border-box;
}

.indexSectionButtons span.noLinkHead {
    color: #9cf;
    font: bold 13px arial;
    text-decoration: none;
}

/* Index Section List (Category Links) */
.indexSectionList, .indexForumList {
    font: 14px/22px arial;
}

.indexSectionList a, .indexForumList a {
    color: #000;
    text-decoration: default;
    text-transform: lowercase;
}

.indexSectionList a:hover, .indexForumList a:hover {
    text-decoration: default;
}

/* Header Styles for City Pages */
#tlHeader {
    width: 100%;
    height: 44px;
    margin: 0 0 0 0 !important;
    background-color: #afbed8;
    overflow: visible;
}

#tlHeader:after {
    content: '';
    clear: both;
    display: block;
}

#tlHeader form {
    margin: 0;
}

#tlHeader .tlBlock {
    display: block;
    height: auto;
    float: left;
    padding: 8px 8px;
}

#tlHeader #logo {
    margin-left: 0;
    padding: 4px 8px;
    height: auto;
    box-sizing: border-box;
    display: block;
    float: left;
}

#tlHeader #logo a {
    display: block;
    width: 170px;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: #000;
    text-decoration: none;
    font: normal 9pt arial;
    line-height: 36px;
}

#tlHeader #logo a .logo-img {
    height: 36px;
    width: auto;
    max-width: 170px;
    display: block;
    object-fit: contain;
}

#tlHeader .tlBlock .button {
    padding-left: 8px;
    padding-right: 8px;
    height: 27px;
    font-size: 12px;
    background: #506fa3;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px outset #ccc;
}

#tlHeader .tlBlock .button:hover {
    border: 1px solid #ddd;
    opacity: .9;
}

#tlHeader .tlBlock select {
    padding: 3px 5px;
    padding-right: 20px;
    height: 27px;
}

#tlHeader .button {
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Logo styling */

/* Search in Header */
#tlHeader #searchInline #formSearch input.button,
#tlHeader #searchInline #formSearch input[type="text"],
#tlHeader #searchInline #formSearch select {
    display: block;
    float: left;
    margin: 0 0 0 5px;
    line-height: 16px;
    height: 27px;
    box-sizing: border-box;
}

#tlHeader #searchInline #formSearch input[type="text"] {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px 3px;
}

#tlHeader #searchInline #formSearch select {
    display: inline-block;
    width: 120px;
    font-size: 12px;
    color: #000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 8px;
    padding-right: 20px;
}

/* Community (City Name) */
#tlHeader #community {
    display: block;
    float: right;
    line-height: 27px;
}

#tlHeader #community a {
    text-decoration: none;
    color: black;
}

#tlHeader #community h1,
#tlHeader #community p {
    display: inline;
    font-size: 14px;
    margin: 0;
    line-height: inherit;
}

#tlHeader #community .comm {
    font-weight: bold;
    padding-right: 4px;
    color: #506fa3;
    overflow: visible;
    white-space: normal;
}

#tlHeader #community .city {
    font-weight: bold;
    padding-right: 4px;
    color: #000;
    overflow: visible;
    white-space: normal;
}

/* Responsive Styles for City Page */
@media screen and (max-width: 636px) {
    .mainCellBackground {
        -moz-column-count: 3;
        -moz-column-gap: 0;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        column-count: 3;
        column-gap: 0;
    }
}

@media screen and (max-width: 550px) {
    .mainCellBackground {
        -moz-column-count: 2;
        -moz-column-gap: 0;
        -webkit-column-count: 2;
        -webkit-column-gap: 0;
        column-count: 2;
        column-gap: 0;
    }
}

@media screen and (max-width: 319px) {
    .mainCellBackground {
        -moz-column-count: 1;
        -moz-column-gap: 0;
        -webkit-column-count: 1;
        -webkit-column-gap: 0;
        column-count: 1;
        column-gap: 0;
        height: auto;
    }
}

/* Tablet and smaller desktop - responsive header */
@media(max-width: 600px) {
    /* fix for ridiculous firefox top margin bug. */
    #tlHeader:before {
        content: "";
        display: none;
    }
    
    #tlHeader {
        height: auto;
        min-height: 46px;
        margin-bottom: 5px;
        overflow: visible;
    }
    
    /* center logo */
    #tlHeader #logo a {
        margin: 0 auto;
    }
    
    #tlHeader #logo {
        height: 40px;
        float: none;
        background-position: center;
        margin: auto;
    }
    
    #tlHeader #searchInline {
        display: none;
    }
    
    #tlHeader #postAdButton {
        display: none;
    }
    
    /* center community below logo - with background color #e3e9f2 */
    /* Community breaks out of header flow and appears below with full-width background */
    #tlHeader #community {
        display: block;
        float: none;
        clear: both;
        padding-top: 8.5px;
        padding-bottom: 8.5px;
        text-align: center;
        margin: 0;
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 40px;
        padding-right: 40px;
        line-height: 18px;
        background-color: #e3e9f2;
        width: calc(100% + 16px);
        max-width: 100%;
        position: relative;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* Search dropdown should appear below community section on tablet */
    /* On tablet, searchDropdown appears below community with same background */
    #searchDropdown {
        position: relative;
        top: auto;
        left: 0;
        right: 0;
        margin-top: 0;
        margin-left: -8px;
        margin-right: -8px;
        width: calc(100% + 16px);
        max-width: 100%;
        background-color: #e3e9f2;
        overflow-x: hidden;
        box-sizing: border-box;
        box-shadow: none;
        display: none;
        padding: 10px;
        box-sizing: border-box;
    }
    
    /* Show search dropdown when search trigger is active */
    .search-trigger.active ~ #searchDropdown {
        display: block;
    }
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */

/*  Nav - Button
--------------------------------------------*/
.nav-trigger {
    display: inline-block;
    /* critical positioning styles */
    z-index: 2;
    float: left;
    /* non-critical apperance styles */
    margin: 8.5px 12px 8.5px 8px;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-image: url("/themes/backpage/assets/images/menu-icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

/* larger on tablet+mobile */
@media(max-width: 600px) {
    .nav-trigger {
        top: 18px;
        width: 28px;
        height: 28px;
    }
}

/* Search Trigger Button */
.search-trigger {
    display: block;
    position: absolute;
    top: 8.5px;
    z-index: 10002;
    height: 28px;
    width: 28px;
    cursor: pointer;
    background-image: url('/themes/backpage/assets/images/search-central.png');
    background-size: contain;
    text-indent: -9999px;
    right: 14px;
}

/* hide search-button on dekstop */
@media(min-width: 601px) {
    .search-trigger {
        display: none;
    }
}

/* $sidebar
     _    _     _
  __(_)__| |___| |__  __ _ _ _
 (_-< / _` / -_) '_ \/ _` | '_|
 /__/_\__,_\___|_.__/\__,_|_|
--------------------------------------------------------------------------------
*/

/* theme */
.sidebar a {
    color:#000;
}

/*  Structure
--------------------------------------------*/

.sidebar-nav {
    display: none;
}

/* Height is set in JS */

.sidebar-nav.active {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}
.sidebar {
    min-width: 120px;
    width: 14em;
    display: block;
    left: 0;
    top: 0;
    min-height: 100%;
    position: absolute;
    z-index: 2001!important;
    /* animating */
    -webkit-transform: translate3d(-17em, 0, 0);
    -moz-transform: translate3d(-17em, 0, 0);
    transform: translate3d(-17em, 0, 0);
    -webkit-transition: -webkit-transform 300ms ease;
    -webkit-transition-duration: 300ms;
    -moz-transition: -moz-transform 300ms ease;
    transition: transform 300ms ease;
    /* positioning */
    /* visual */
    box-shadow: 5px 0 5px rgba(0, 0, 0, .15);
    background-color: #fff;
}

.sidebar-nav.open .sidebar {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -moz-transform: none;
}

/* height set in js */

.sidebar-nav .dimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1002;
    display: none;
    /* visual */
    background-color: #333;
    -moz-opacity: .5;
    -khtml-opacity: .5;
    -webkit-opacity: .5;
    opacity: .5;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
}
.sidebar-nav.open .dimmer {
    display: block;
}

/*  Inner
--------------------------------------------*/
.sidebar .inner {
    padding: 0;
}

.sidebar .inner ul {
    padding: 0;
    margin: 0;
}

.sidebar .inner ul li {
    list-style-type: none !important;
    padding: 0;
    margin: 0;
}

.sidebar .inner ul {
    margin: 0;
    padding: 0;
    width: 100%;
}

.sidebar .inner ul li.nav-item {
    width: 100%;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-top-width: 0px;
    background-color: #f3f4f5;
    box-sizing: border-box;
    position: relative;
}

.sidebar .inner ul li.nav-item a {
    width: 100%;
    padding: .5em;
    display: block;
    box-sizing: border-box;
}

.sidebar .inner h3 {
    padding: 0 .5em;
    margin-top: 10px !important;
    margin-bottom: .25em;
}

.sidebar .inner .top a {
    font-weight: normal;
}

.sidebar .inner .newIcon {
    display: block;
}

.sidebar .inner ul.list li.nav-item a {
    padding: .25em;
}

.sidebar .inner ul.list li.nav-item a:after {
    top: .25em;
}

.sidebar .inner ul.list li.nav-item a:after {
    content: ">";
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    opacity: .5;
}

.sidebar .inner ul li.nav-item:hover {
    background-color: #DFE2E6;
}

.sidebar .inner ul li a {
    text-decoration: none;
    position: relative;
}

.sidebar .inner ul li:first-child {
    border-top-width: 1px;
}

.sidebar .inner .button {
    width: 100%;
    padding: .5em;
    font-size: 16px;
    margin: .5em 0 !important;
    color: #fff;
    background-color: #506fa3;
    border: 1px outset #ccc;
    font-weight: bold;
    cursor: pointer;
}

.sidebar .inner .button:hover {
    border: 1px inset #ccc;
}
.sidebar .inner form {
    margin: .5em;
    margin-bottom: .75em;
}
.sidebar .inner .top li {
    text-align: center;
}

/* Search Dropdown */
#searchDropdown {
    display: none;
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10001;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.search-trigger.active ~ #searchDropdown {
    display: block;
}

/* ============================================
   FOOTER (Subdomain Pages)
   ============================================ */

#tlFooter {
    width: 100%;
    clear: both;
    background: #e3e9f2;
    padding: 1em 0;
    margin: 0;
}

#tlFooter div {
    padding: 1em;
}

.footerText {
    color: #000;
    font: 9pt arial;
}

.footerText a {
    color: #506fa3;
    font-weight: normal;
}

.footerDisclaimer {
    font: 8pt arial;
    color: #000;
}

/* $disclaimer
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
  PAGE : DISCLAIMER
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

.disclaimerAgreement {
    font: 11pt arial;
}

.disclaimerAgreement h3 {
    margin: 1em 0 0.15em 0;
}

.disclaimerAgreement a {
    color: #00f;
}

.disclaimer-scroll-box {
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

p.termsOfUseLink a {
    color: #000;
    text-decoration: none;
}

@media screen and (max-height: 720px) {
    .disclaimer-scroll-box {
        height: 120px;
        overflow-y: scroll;
        border: 1px solid;
        padding: 5px;
    }
}

#searchDropdown #formSearch {
    padding-top: 10px;
    width: auto;
    margin-left: 10%;
    margin-right: 10%;
}

#searchDropdown #formSearch input,
#searchDropdown #formSearch select {
    width: 100%;
    font-size: 20px;
    margin-bottom: 5px;
    height: 32px;
}

#searchDropdown #formSearch #searchButton.button {
    width: 50%;
    margin-left: 50%;
}

/* ============================================
   CATEGORY PAGE STYLES (Results Page)
   ============================================ */

/* Breadcrumb */
.cookieCrumb {
    margin: 0.5em 0 0 1em;
}

#cookieCrumb h1, #Results h1 {
    margin: 0;
    font-size: 9pt;
    font-weight: normal;
    display: inline;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

#cookieCrumb, .cookieCrumbTrail {
    clear: left;
    padding: 0.5em 0 0 10px;
    color: #000;
    font: normal 9pt arial;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

/* Remove left padding when breadcrumb is inside mainBody to align with other elements */
.mainBody #cookieCrumb, .mainBody .cookieCrumbTrail {
    padding-left: 0;
}

/* Dashboard Layout - Sidebar part of main content area */
.dashboard-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.dashboard-main-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.dashboard-content-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-left: 10px;
}

.dashboard-content-area #pageBackground {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* Dashboard Sidebar - Desktop: Always Visible, Part of Layout */
@media (min-width: 601px) {
    /* Main content area - flexbox layout */
    .dashboard-main-content {
        display: flex;
        flex: 1 1 auto;
        align-items: stretch;
        min-height: 0;
    }
    
    /* Sidebar - part of content flow, not fixed to viewport */
    .dashboard-wrapper .sidebar-nav {
        display: flex !important;
        position: relative;
        width: 195px;
        flex-shrink: 0;
        background: transparent;
        z-index: 1;
        align-self: stretch;
        min-height: 100%;
    }
    
    .dashboard-wrapper .sidebar-nav .sidebar {
        position: relative;
        left: 0;
        top: 0;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        -moz-transform: translate3d(0, 0, 0) !important;
        width: 195px;
        height: 100%;
        min-height: 100%;
        box-shadow: none;
        border-right: 1px solid #ccc;
        background-color: #f3f4f5;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .dashboard-wrapper .sidebar-nav .sidebar .inner {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 100%;
        height: 100%;
        box-sizing: border-box;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    /* Spacer to push logout to bottom */
    .dashboard-wrapper .dashboard-nav-spacer {
        flex: 1;
        min-height: 0;
    }
    
    /* Section spacing on desktop */
    .dashboard-wrapper .sidebar .inner h3:not(:first-child) {
        margin-top: 16px;
    }
    
    /* Hide dimmer on desktop */
    .dashboard-wrapper .sidebar-nav .dimmer {
        display: none !important;
    }
    
    /* Content area takes remaining space */
    .dashboard-content-area {
        flex: 1;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
        position: relative;
        padding-left: 10px;
    }
    
    .dashboard-content-area #pageBackground {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
}

/* Mobile: Sidebar Hidden by Default, Toggleable */
@media (max-width: 600px) {
    .dashboard-main-content {
        display: block;
        position: relative;
    }
    
    /* Base sidebar width for mobile - 15% reduction */
    .sidebar {
        width: 166px;
    }
    
    /* Sidebar - hidden by default, overlay when active */
    .dashboard-wrapper .sidebar-nav {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 166px;
        z-index: 10000;
        background: transparent;
    }
    
    .dashboard-wrapper .sidebar-nav.active {
        display: block;
    }
    
    .dashboard-wrapper .sidebar-nav .sidebar {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 166px;
        transform: translate3d(-14em, 0, 0);
        -webkit-transform: translate3d(-14em, 0, 0);
        -moz-transform: translate3d(-14em, 0, 0);
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
        border-right: 1px solid #ccc;
    }
    
    .dashboard-wrapper .sidebar-nav.open .sidebar {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
    }
    
    /* Show dimmer when sidebar is open */
    .dashboard-wrapper .sidebar-nav.open .dimmer {
        display: block;
    }
    
    /* Content area full width on mobile */
    .dashboard-content-area {
        width: 100%;
    }
}

#cookieCrumb a, .cookieCrumbTrail a {
    text-decoration: underline;
    color: #000;
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
}

/* Page Background */
#pageBackground {
    position: relative;
    clear: both;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.mainBody {
    position: relative;
    zoom: 1;
    padding: 0 10px 10px;
    background-color: #fff;
    color: #000;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Super Region and Region Nav Menus */
#regionNavMenu, #superRegionNavMenu {
    margin: 1em 0;
    font-size: 9pt;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
}

#regionNavMenu a, #superRegionNavMenu a {
    text-decoration: underline;
    color: #00f;
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
}

#regionNavMenu a:hover, #superRegionNavMenu a:hover {
    color: #000;
    text-decoration: none;
}

#regionNavMenu .active, #superRegionNavMenu .active {
    font-weight: bold;
    color: #000;
}

#regionNavMenu .inactive, #superRegionNavMenu .inactive {
    color: #00f;
    text-decoration: underline;
}

#regionNavMenu .inactive:hover, #superRegionNavMenu .inactive:hover {
    text-decoration: underline;
}

/* Search Form on Category Page */
.mainBody #formSearch {
    margin-top: 10px;
}

.mainBody #formSearch input[type="text"], 
.mainBody #formSearch select {
    width: 150px;
    font-size: 12px;
    margin: 0 5px 5px 0;
    display: inline-block;
    padding: 5px 8px;
    height: 27px;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    vertical-align: middle;
    box-sizing: border-box;
    background-color: #fff;
    color: #000;
    font-family: arial, sans-serif;
}

.mainBody #formSearch select {
    padding-right: 8px;
    cursor: pointer;
}

.mainBody #formSearch .formSubmitWrap {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.mainBody #formSearch .formSubmitWrap .button {
    padding: 5px 12px;
    height: 27px;
    font-size: 12px;
    background: #506fa3;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #506fa3;
    box-sizing: border-box;
    font-family: arial, sans-serif;
}

.mainBody #formSearch .formSubmitWrap .button:hover {
    background: #3d5a8a;
    border-color: #3d5a8a;
    opacity: .9;
}

.mainBody #formSearch .formSubmitWrap .clear-filter-wrap {
    margin-left: 8px;
    vertical-align: middle;
}

.mainBody #formSearch .formSubmitWrap .clear-filter-link {
    font-size: 13px;
    color: #666;
    text-decoration: none;
}

.mainBody #formSearch .formSubmitWrap .clear-filter-link:hover {
    text-decoration: underline;
    color: #333;
}

/* View Mode Selector */
.metaFieldLabel {
    clear: both;
    padding: 1.15em 0;
}

.viewModeSelector {
    text-align: left;
    font-size: 9pt;
    margin: 1em 0 0 0;
    padding: 0;
    margin-bottom: 0 !important;
}

.viewModeSelector a {
    color: #00f;
    text-decoration: none;
}

.viewModeSelector a:hover {
    text-decoration: none;
    color: #000;
}

.viewModeSelector .selectedHighlight a {
    font-weight: bold;
    color: #00f;
}

/* Date Headers */
.date {
    margin-top: 2em;
    padding: 3px;
    padding-left: 6px;
    color: #000;
    font: 11pt arial;
    text-align: left;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0.25, rgb(238, 238, 238)), color-stop(0.75, rgb(255, 255, 255)));
    background-image: -moz-linear-gradient(left center, rgb(238, 238, 238) 25%, rgb(255, 255, 255) 75%);
}

.date.firstElem {
    margin-top: 10px !important;
}

/* Listing Items */
.cat {
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 6px;
    background-color: #fff;
    text-align: left;
    padding: 4px;
}

.cat a:link {
    color: #00f;
    text-decoration: underline;
}

.cat a:hover {
    text-decoration: underline;
}

.cat a:visited {
    color: #909;
    text-decoration: underline;
}

/* Premium listings - bold text */
.cat.premium-listing a,
.cat a.premium-link {
    font-weight: bold;
}

/* Premium star icon */
.premium-star {
    color: #ffd700;
    font-size: 1.1em;
    margin-right: 4px;
    display: inline-block;
}

.cat img {
    padding: 0;
    background-color: #fff;
}

/* Region Label */
.resultsRegionLabel {
    font: 9pt arial;
    color: #000;
}

/* Side Sponsor Table */
#sideSponsorTable {
    clear: right;
    float: right;
    margin: -10px 0 10px 10px;
    padding: 10px 10px 10px 10px;
    background: #fff;
    border: 1px solid #fff;
    width: 220px; /* Fixed width: 200px content + 20px padding */
    box-sizing: border-box;
}

/* Side Sponsor Table Inner Container */
#sideSponsorTable .sideSponsorTableInner {
    width: 200px;
    box-sizing: border-box;
}

/* Hide sidebar in gallery view to prevent first row spacing issue */
.gallery-view #sideSponsorTable {
    display: none;
}

/* Sponsor Box Styles - Matching backpage exactly */
.AdminData, .sponsorBox, .sponsorBoxPlusImages {
    position: relative;
    margin-bottom: 10px;
    padding: 0;
    background-color: #fafad2;
    color: #000;
    border: 1px solid #e9e93a;
    font: 9pt arial;
    text-align: left;
}

.AdminData a:link, .sponsorBox a:link, .sponsorBoxPlusImages a:link {
    color: #00f;
    font: 11pt arial;
    text-decoration: none;
}

.sponsorBox a:hover, .sponsorBoxPlusImages a:hover {
    text-decoration: underline !important;
}

.AdminData a:visited, .sponsorBox a:visited, .sponsorBoxPlusImages a:visited {
    color: #909;
    font: 11pt arial;
}

.sponsorBoxContent {
    position: relative;
    margin: 5px;
    max-width: 600px;
    display: inline-block;
}

#sideSponsorTable .sponsorBoxImages {
    display: block;
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
    padding: 5px;
}

#sideSponsorTable .sponsorBoxImages::after {
    content: "";
    display: table;
    clear: both;
}

.sponsorBoxImages img {
    border: 1px solid #00f;
    width: 55px;
    height: 45px;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    margin: 0;
    vertical-align: top;
}

.sponsorBoxImages a {
    padding: 0;
    margin-right: 3px;
    margin-top: 0;
    margin-bottom: 0;
    float: left;
    box-sizing: border-box;
    vertical-align: top;
}

/* Premium listing card image links - percentage widths based on count */
.sponsorBoxImages a.sponsorImageLink {
    padding: 0;
    margin-right: 3px;
    margin-top: 0;
    margin-bottom: 0;
    float: left;
    vertical-align: top;
}

/* Remove margin from last image in each row */
.sponsorBoxImages a:last-child,
.sponsorBoxImages a.sponsorImageLink:last-child {
    margin-right: 0;
}

.sponsorBoxImages a.sponsorImageLink img {
    width: 55px;
    height: 45px;
}

/* Dynamic width classes for sidebar images - removed fixed widths, use natural image width */
.sponsorBoxImages a.sponsorImageLink.width-22,
.sponsorBoxImages a.sponsorImageLink.width-21,
.sponsorBoxImages a.sponsorImageLink.width-18 {
    width: auto;
    max-width: none;
}

/* More pics link styling */
.sponsorBoxImages a.morePicsLink {
    text-align: center;
    vertical-align: bottom;
    height: 45px;
    color: #00f;
    text-decoration: underline;
    font-size: 7pt;
    line-height: 45px;
}

/* Top Sponsor Wrapper (for gallery view premium ads) */
#topSponsorWrapper {
    position: relative;
    z-index: 0;
    padding: 0;
    background: #e3e9f2;
    clear: both;
    margin-bottom: 1em;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}

#topSponsorWrapper .sponsorBox, #topSponsorWrapper .sponsorBoxPlusImages {
    margin-bottom: 0;
    border: none;
    background: none;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Gallery view: Float images to right on desktop (matching backpage) */
#topSponsorWrapper .sponsorBoxImages {
    float: right !important;
    margin: 1px 0;
    height: 1%;
    display: block;
    clear: none;
    text-align: right;
}

/* Gallery view: Clean thumb display with uniform spacing */
#topSponsorWrapper .sponsorBoxImagesGallery {
    display: block;
    overflow: hidden;
    clear: both;
    text-align: right;
}

#topSponsorWrapper .sponsorBoxImagesGallery::after {
    content: "";
    display: table;
    clear: both;
}

/* Desktop: Float right with uniform spacing - every thumb gets same spacing */
#topSponsorWrapper .sponsorBoxImagesGallery .sponsorImageGallery {
    float: right;
    margin-left: 8px;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}

#topSponsorWrapper .sponsorBoxImagesGallery .sponsorImageGallery:last-child {
    margin-left: 0;
}

#topSponsorWrapper .sponsorBoxImagesGallery .sponsorImageGallery img {
    border: 1px solid #00f;
    height: 45px;
    width: auto;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: top;
}


/* Separator lines between premium ads */
#topSponsorWrapper > div[style*="height:1px"] {
    height: 1px;
    margin: 3px 0 0;
    border-top: 1px solid #ccc;
    line-height: 1px;
}

/* Sponsor label */
.sponsors {
    color: #bbb;
    font: 13pt arial;
    display: block;
    clear: both;
}

/* Pagination */
.pagination {
    text-align: center;
    margin: 3em 0 1em 0 !important;
    clear: both;
}

.pagination span, .pagination a {
    padding: 0.2em 0.6em;
    background: #fff;
    border: 1px solid #00c;
    text-decoration: none;
    box-shadow: 2px 2px 5px #ccc;
    line-height: 20px;
    margin: 0 2px;
    display: inline-block;
}

.pagination span.currentPage {
    border: 1px solid #666;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #666;
}

.pagination a {
    color: #00f;
}

.pagination span:hover, .pagination a:hover {
    border: 1px solid #ccc;
    color: #ccc;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Same line as pagination: pagination stays centered, RSS on the right */
.pagination-rss-line {
    position: relative;
    min-height: 2em;
}

.pagination-rss-line .rss-feed-row {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    text-align: right;
}

.rss-feed-btn {
    display: inline-block;
    padding: 0.08em 0.4em;
    background-color: #f26522;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    border: none;
    border-radius: 2px;
    white-space: nowrap;
}

.rss-feed-btn:hover {
    background-color: #e55a18;
    color: #fff !important;
    text-decoration: none;
}

/* Responsive - Category Page */
@media only screen and (max-width: 750px) {
    .cat {
        padding-bottom: 8px;
        border-bottom: none !important;
    }
    
    .cat a {
        text-decoration: underline !important;
    }
    
    /* Move sidebar premium ads to top on mobile (list view) */
    #sideSponsorTable {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 0 1em 0 !important;
        padding: 0 !important;
    }
    
    #sideSponsorTable .sideSponsorTableInner {
        width: 100% !important;
    }
    
    /* Consistent spacing for mobile images */
    .sponsorBoxImages a.sponsorImageLink,
    .sponsorBoxImages a {
        padding: 0 !important;
        margin-right: 10px !important;
    }
    
    .sponsorBoxImages a:last-child,
    .sponsorBoxImages a.sponsorImageLink:last-child {
        margin-right: 0 !important;
    }
    
    /* Gallery view: Float left on mobile with uniform spacing */
    #topSponsorWrapper .sponsorBoxImagesGallery {
        text-align: left !important;
    }
    
    #topSponsorWrapper .sponsorBoxImagesGallery .sponsorImageGallery {
        float: left !important;
        margin-right: 8px !important;
        margin-left: 0 !important;
    }
    
    #topSponsorWrapper .sponsorBoxImagesGallery .sponsorImageGallery:last-child {
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 500px) {
    /* Keep pagination buttons inline on mobile (not full width) */
    div.pagination .pagination.number, 
    div.pagination span.currentPage,
    div.pagination a {
        display: inline-block !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    /* Ensure premium ads show on mobile */
    #sideSponsorTable {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 0 1em 0 !important;
        padding: 0 !important;
    }
    
    /* Consistent spacing for mobile images */
    .sponsorBoxImages a.sponsorImageLink,
    .sponsorBoxImages a {
        padding: 0 !important;
        margin-right: 10px !important;
    }
    
    .sponsorBoxImages a:last-child,
    .sponsorBoxImages a.sponsorImageLink:last-child {
        margin-right: 0 !important;
    }
    
    /* Gallery view: Float left on mobile with uniform spacing */
    #topSponsorWrapper .sponsorBoxImagesGallery {
        text-align: left !important;
    }
    
    #topSponsorWrapper .sponsorBoxImagesGallery .sponsorImageGallery {
        float: left !important;
        margin-right: 8px !important;
        margin-left: 0 !important;
    }
    
    #topSponsorWrapper .sponsorBoxImagesGallery .sponsorImageGallery:last-child {
        margin-right: 0 !important;
    }
}

/* Listing Detail Page Styles - Exact Backpage Match */
#postingTitle {
    position: relative;
}

#postingTitle #reportAdButton {
    float: right;
    clear: right;
    font-size: 14px;
    font-weight: normal;
}

#postingTitle .h1link {
    display: block;
}

#postingTitle .h1link h1 {
    display: inline-block;
    line-height: 1.2;
    font-size: 18pt;
    margin: 0;
    padding: 0;
    font-weight: bold;
}

#postingTitle h1 {
    display: inline-block;
    line-height: 1.2;
    font-size: 18pt;
    margin: 0;
    padding: 0;
}

div.posting h1 {
    position: static;
    margin-bottom: 0;
}

div.posting h1 a {
    float: none;
}

.adInfo {
    color: #666;
    font: 10pt arial;
}

.posting, .adPost {
    padding: 0;
}

.postingBody a, .adBody a {
    color: #00f;
}

.postingBody * {
    max-width: 100% !important;
}
.postingBody table {
    table-layout: fixed;
}
.postingBody table[width="100%"] {
    width: 100%;
}
.postingBody table table {
    width: 100%;
}
.postingBody img[height] {
    height: auto !important;
}
.postingBody li {
    margin: 0;
    padding: 0;
    list-style-type: disc;
}

.helperLinks {
    margin: 2em 0;
    color: #000;
    font: 10pt arial;
}
.helperLinks span {
    background-color: transparent;
}
.helperLinks a {
    color: #00f;
}

.replyDisplay {
    font: 12pt arial;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.replyDisplay a {
    color: #00f;
}
a.replyDisplay {
    color: #00f;
}

a#emailThisAd, #replyButton, #reportAdButton {
    border: 1px solid #7eb9d0;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    font-size: 12px!important;
    line-height: 1!important;
    font-family: arial, helvetica, sans-serif;
    padding: 4px 8px!important;
    text-decoration: none;
    display: inline-block;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #FFFFFF;
    background-color: #a5b8da;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
    background-image: -webkit-linear-gradient(top, #a5b8da, #7089b3);
    background-image: -moz-linear-gradient(top, #a5b8da, #7089b3);
    background-image: -ms-linear-gradient(top, #a5b8da, #7089b3);
    background-image: -o-linear-gradient(top, #a5b8da, #7089b3);
    background-image: linear-gradient(to bottom, #a5b8da, #7089b3);
    filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#a5b8da, endColorstr=#7089b3);
}
a#emailThisAd:hover, #replyButton:hover, #reportAdButton:hover {
    border: 1px solid #5ca6c4;
    background-color: #819bcb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#819bcb), to(#536f9d));
    background-image: -webkit-linear-gradient(top, #819bcb, #536f9d);
    background-image: -moz-linear-gradient(top, #819bcb, #536f9d);
    background-image: -ms-linear-gradient(top, #819bcb, #536f9d);
    background-image: -o-linear-gradient(top, #819bcb, #536f9d);
    background-image: linear-gradient(to bottom, #819bcb, #536f9d);
    filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#819bcb, endColorstr=#536f9d);
}

p.replyDisplay a {
    color: #fff;
    text-decoration: none;
}

/* Base styles for image gallery */
#viewAdPhotoLayout {
    float: right;
    margin: 0 0 1em 1em;
    padding: 0;
    clear: right;
    list-style: none;
}

#viewAdPhotoLayout li {
    list-style-type: none !important;
    margin: 0 0 0.75em 0;
    padding: 0.5em;
    background: #eee;
    text-align: center;
    overflow: hidden;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    break-inside: avoid;
}

#viewAdPhotoLayout img {
    margin: 0;
    display: block;
}

#viewAdPhotoLayout li a {
    color: #000;
}

/* Desktop: 5-8 images = 2 columns */
#viewAdPhotoLayout.fivePlus {
    width: 465px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    display: block;
}

/* Desktop: 9+ images = 3 columns */
#viewAdPhotoLayout.ninePlus {
    width: 708px;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    display: block;
}

/* Set width on li only when NOT using columns (default single column layout) */
#viewAdPhotoLayout:not(.fivePlus):not(.ninePlus) li {
    width: 200px;
}

/* When using columns, li width should be auto to allow column layout to work */
#viewAdPhotoLayout.fivePlus li,
#viewAdPhotoLayout.ninePlus li {
    width: auto;
}

/* ============================================
   LISTING PAGE - BOTTOM MARGIN
   ============================================ */
/* Add bottom margin after content on listing details page */
#pageBackground .mainBody:has(#postingTitle) {
    margin-bottom: 20px;
}

/* Add space above location line on listing details page */
.listingLocation {
    margin-top: 1em;
}

/* ============================================
   LISTING PAGE - RESPONSIVE CONTENT AREA
   ============================================ */

/* Tablet and smaller - Main body padding */
@media screen and (max-width: 750px) {
    input[type=file] {
        font-size: 12px !important;
    }
    a.enlargeLink {
        display: none;
    }
    div.posting {
        clear: both;
    }
    .imgNumber {
        display: none;
    }
    .mainBody {
        padding: 0 5px 5px;
    }
    #cookieCrumb, .cookieCrumbTrail {
        padding: 0.5em 8px 0 8px !important;
    }
    a.rssLink {
        display: none;
    }
    
    /* Image gallery - 2 columns on tablet */
    #viewAdPhotoLayout {
        float: none !important;
        -moz-column-count: 2 !important;
        -webkit-column-count: 2 !important;
        column-count: 2 !important;
        width: calc(100% - 10px) !important;
        margin: 0px auto !important;
    }
    
    #viewAdPhotoLayout li {
        display: inline-block;
        width: calc(100% - 20px) !important;
        padding: 8px !important;
        margin-bottom: 0.75em !important;
    }
    
    /* Video container - full width on tablet (matches original 760px breakpoint) */
    #ViewAd .adVideoContainer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    #ViewAd .adVideoContainer #videoPlayer {
        width: 100%;
    }
    #ViewAd .adVideoContainer #videoPlayer video {
        width: 100%;
        min-width: 0;
    }
}

/* Mobile - Image gallery single column */
@media screen and (max-width: 520px) {
    #viewAdPhotoLayout {
        float: none !important;
        -moz-column-count: 1 !important;
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    #viewAdPhotoLayout li {
        width: 100% !important;
        padding: 8px !important;
        margin-bottom: 0.75em !important;
        display: inline-block;
    }
}

/* Very small mobile - disable image links */
@media screen and (max-width: 500px) {
    #viewAdPhotoLayout li a {
        pointer-events: none;
    }
    a.enlargeLink {
        display: none;
    }
}

/* Listing page specific styles */
#postingTitle {
    position: relative;
}

#postingTitle #reportAdButton {
    float: right;
    clear: right;
}

#postingTitle .h1link {
    display: block;
}

#postingTitle .h1link h1 {
    display: inline-block;
    line-height: 1.2;
    font-size: 18pt;
    margin: 0;
    padding: 0;
}

.adVideoContainer {
    float: right;
    margin-left: 1em;
    min-width: 466px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 520px) {
    .adVideoContainer {
        min-width: 300px;
    }
}


.listingLocation {
    padding-left: 2em;
    margin-top: 1em;
}

.listingPhone {
    padding-left: 2em;
    margin-top: 1em;
}

.listingPostId {
    padding-left: 2em;
}

.helperLinksBold {
    font-weight: bold;
}

.clearBoth {
    clear: both;
}

.metaInfoDisplay {
    margin: 0;
    padding: 0;
}

/* ============================================
   GALLERY VIEW STYLES (from backpagestyle.css)
   ============================================ */

/* Contain floated gallery cards so pagination sits below and doesn't overlap */
.gallery-results {
    overflow: auto;
}

/* Gallery listing card container - matches backpage exactly */
.cat.gallery {
    display: block;
    float: left;
    width: 152px;
    min-height: 200px;
    position: relative;
    padding: 0;
    margin: 16px;
    overflow: hidden;
}

.galleryImage {
    display: block;
}

/* Gallery header (title) - override global a rule */
a.galleryHeader,
.cat.gallery a.galleryHeader {
    display: block;
    font-size: 1em;
    margin-top: 4px;
    line-height: 14pt;
    height: 40px;
    overflow: hidden;
    clear: both;
    padding-top: 5px;
    text-decoration: underline !important;
    color: #00f !important;
    width: 150px;
    max-width: 150px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

a.galleryHeader:hover,
.cat.gallery a.galleryHeader:hover {
    text-decoration: underline !important;
}

a.galleryHeader:visited,
.cat.gallery a.galleryHeader:visited {
    color: #909 !important;
    text-decoration: underline !important;
}

/* Gallery posted date */
.cat.gallery .galleryPosted {
    display: block;
    margin: 0.5em 0;
    color: #999;
    font-size: 0.72em;
    width: 150px;
    max-width: 150px;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    white-space: normal;
    height: 16px;
    line-height: 16px;
}

/* Responsive gallery styles - Keep desktop layout on mobile */
@media only screen and (max-device-width: 480px) {
    /* Add left and right margin to content before gallery */
    #cookieCrumb, .cookieCrumbTrail {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    #superRegionNavMenu,
    #regionNavMenu {
        margin-left: 8px;
        margin-right: 8px;
        font-size: 11pt !important;
    }
    
    .mainBody #formSearch {
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .mainBody h2 {
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .viewModeSelector {
        margin-left: 8px;
        margin-right: 8px;
        font-size: 11pt !important;
    }
    
    .cat.gallery {
        width: calc(50% - 12px);
        
        height: auto;
        margin: 6px;
        display: block;
        float: left;
        clear: none;
        overflow: hidden;
    }
    
    /* Expand title and date to fill card width */
    a.galleryHeader,
    .cat.gallery a.galleryHeader {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .cat.gallery .galleryPosted {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .galleryOverlay {
        top: -25px;
        left: -25px;
        height: 200px;
        width: 200px;
        display: none;
    }
    .galleryOverlay a {
        height: 200px;
        width: 200px;
        display: block;
    }
    .galleryImgCont {
        height: auto;
        width: 100%;
        padding-bottom: 100%; /* Creates square aspect ratio */
        position: relative;
        display: block;
        float: none;
        border: 1px solid #999;
        max-height: none;
        overflow: hidden;
    }
    .galleryImgCont a {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: block;
        float: none;
        overflow: hidden;
    }
    .galleryImgCont a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    a.galleryHeader,
    .cat.gallery a.galleryHeader {
        float: none;
        font-size: 1em !important;
        line-height: 14pt !important;
        height: 44px !important; /* Fixed height for 2 lines - prevents layout shifts */
        min-height: 44px !important;
        text-decoration: underline !important;
        width: 150px !important;
        max-width: 150px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
    }
    .cat.gallery .galleryPosted {
        float: none;
        margin-top: 0.5em;
        width: 150px !important;
        max-width: 150px !important;
    }
}

/* Mobile gallery - full width 2 columns */
@media screen and (max-width: 600px) {
    /* Add left and right margin to content before gallery */
    #cookieCrumb, .cookieCrumbTrail {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    #superRegionNavMenu,
    #regionNavMenu {
        margin-left: 8px;
        margin-right: 8px;
        font-size: 11pt !important;
    }
    
    .mainBody #formSearch {
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .mainBody h2 {
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .viewModeSelector {
        margin-left: 8px;
        margin-right: 8px;
        font-size: 11pt !important;
    }
    
    .gallery-view .cat.gallery,
    .cat.gallery {
        width: calc(50% - 12px);
        margin: 6px;
    }
}

/* Landscape/Tablet - 4 columns */
@media screen and (min-width: 700px) and (max-width: 1024px) {
    .gallery-view .cat.gallery,
    .cat.gallery {
        width: calc(25% - 12px);
        margin: 6px;
    }

    /* Make image container fill card width */
    .gallery-view .galleryImgCont,
    .galleryImgCont {
        width: 100%;
        height: 0;
        padding-bottom: 100%; /* Creates square aspect ratio */
        position: relative;
    }
    
    .gallery-view .galleryImgCont a,
    .galleryImgCont a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .gallery-view .galleryImgCont img,
    .gallery-view .galleryImgCont a img,
    .galleryImgCont img,
    .galleryImgCont a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Expand title and date to fill card width */
    .gallery-view a.galleryHeader,
    .gallery-view .cat.gallery a.galleryHeader,
    a.galleryHeader,
    .cat.gallery a.galleryHeader {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1em !important;
        line-height: 14pt !important;
        height: 44px !important; /* Fixed height for 2 lines - prevents layout shifts */
        min-height: 44px !important;
    }
    
    .gallery-view .cat.gallery .galleryPosted,
    .cat.gallery .galleryPosted {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 750px) {
    .galleryHeader {
        margin-top: 10px;
    }
    .galleryPosted {
        margin-bottom: 15px;
    }
}

/* Gallery image container - exactly 150x150px (matches backpage) */
.galleryImgCont {
    height: 150px;
    width: 150px;
    position: relative;
    border: 1px solid #999;
    background-color: #FFF;
}

.galleryImgCont a {
    position: absolute;
    height: 150px;
    width: 150px;
    overflow: hidden;
    left: 0px;
    top: 0px;
    text-decoration: none;
}

.galleryImgCont img,
.galleryImgCont a img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    display: block;
    border: 0;
}

/* Gallery overlay (shows on hover) - matches backpage exactly */
.galleryOverlay {
    display: none;
    pointer-events: none;
    position: absolute;
    top: -25px;
    left: -25px;
    width: 200px;
    height: 200px;
    z-index: 2;
    border: 1px solid #999;
    background-color: #FFF;
    box-shadow: 0 0 7px #666;
    overflow: hidden;
}

.galleryOverlay.active {
    display: block;
    pointer-events: auto;
}

.galleryOverlay a {
    position: absolute;
    height: 200px;
    width: 200px;
    overflow: hidden;
    left: 0px;
    top: 0px;
    text-decoration: none;
}

.galleryOverlay img {
    position: absolute;
    display: block;
    border: 0;
}

.galleryOverlay img:first-child {
    display: block;
}

/* Gallery dots navigation */
.galleryDots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.galleryDots span {
    margin: 2px;
    color: #999;
    text-decoration: none;
    font-size: 14pt;
}

.galleryDots span.active {
    color: #333;
}

/* ============================================
   LOGIN PAGE STYLES
   ============================================ */

/* Central View (Login Page Container) */
body.CentralView {
    margin: 12px;
    background-color: #fff;
    color: #000;
    font-family: arial, helvetica, sans-serif;
    font-size: 10pt;
}

body.CentralView a {
    color: #000;
}

body.CentralView td {
    font-size: 10pt;
}

body.CentralView h1 {
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
}

body.CentralView h1 a {
    display: block;
    width: 265px;
    height: 40px;
    margin: .67em auto 0 auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}

/* Logo image inside h1 a */
body.CentralView h1 a img {
    display: block;
    width: 265px;
    height: 40px;
    object-fit: contain;
}

body.CentralView h1 span {
    display: none;
}

body.CentralView h2 {
    text-align: center;
    font-size: 1.8em;
}

/* Central Index Module (Main Login Container) */
body.CentralView #centralIndexModule {
    max-width: 525px;
    margin: 0 auto;
}

/* Form Wrapper */
body.CentralView .mFormWrap {
    max-width: 380px;
    margin: 10px auto;
    padding: 0 10px;
}

.mFormWrap.mLoginForm #loginForm {
    background-color: #eef;
    margin: 0 auto;
    text-align: left;
    padding: 18px 6px;
    border-radius: 10px;
}

.mFormWrap.mLoginForm #loginForm form {
    padding: 0;
    border-radius: 0;
    margin: 0;
}

body.CentralView .mFormWrap h2 {
    text-align: left;
    margin: 0 0 5px;
    padding: 0;
    font-size: 1.8em;
}

/* Form Labels */
.mFormWrap #loginForm label {
    font-size: 1.1em;
    display: block;
    margin: 0 15px;
    font-weight: 700;
    text-align: left !important;
}

.mFormWrap #loginForm label.labelRight {
    margin: 0;
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
}

/* Form Inputs */
.mFormWrap #loginForm input[type=email], 
.mFormWrap #loginForm input[type=text], 
.mFormWrap #loginForm input[type=password] {
    border-radius: 8px;
    padding: 6px 3px;
    border: 1px solid #ccc;
    margin: 2px 15px 1em;
    min-width: 90%;
    box-sizing: border-box;
    font-size: 16px;
    font-family: arial, sans-serif;
}

.mFormWrap #loginForm input#centralPassword {
    margin-bottom: 5px;
}

body.CentralView .mFormWrap input[type=submit] {
    cursor: pointer;
}

/* Submit Button */
#loginForm input.signIn {
    color: #fff;
    background-color: #5173a1;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 4px 15px;
    outline: 0 none;
    font-weight: 400;
    border-radius: 8px;
    margin: 0 15px;
    font-size: 16px;
    font-family: arial, sans-serif;
    cursor: pointer;
}

#loginForm input.signIn:hover {
    background-color: #3d5a8a;
    opacity: 0.9;
}

/* Forgot Password Link */
#loginForm p.forgotPW {
    margin: 0 15px 1em;
    text-align: left;
    font-size: 12px;
}

#loginForm p.forgotPW a {
    color: #00f;
    text-decoration: none;
}

#loginForm p.forgotPW a:hover {
    text-decoration: underline;
}

/* Remember Me Checkbox */
#loginForm form div.centralRemember {
    text-align: left;
    margin: 5px 15px 15px;
}

#loginForm form div.centralRemember input[type=checkbox] {
    width: auto;
    margin: 0;
    min-width: auto;
    vertical-align: middle;
}

#loginForm form div.centralRemember label.labelRight {
    margin-left: 5px;
    vertical-align: middle;
}

/* Login Form Bottom Section */
div#loginFormBtm {
    border-top: 1px solid #9eb7ff;
    padding: 1.5em 0 0;
    margin: 1.5em 15px 0;
}

div#loginFormBtm label {
    margin: 0 !important;
    font-size: 1em;
    font-weight: normal;
    display: block;
}

.mFormWrap #loginForm p.createAccount {
    margin: 0.5em 0 0;
    font-size: 18px;
}

.mFormWrap #loginForm p.createAccount a {
    color: #fff;
    background-color: #5173a1;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 15px;
    outline: 0 none;
    font-weight: 400;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    font-family: arial, sans-serif;
}

.mFormWrap #loginForm p.createAccount a:hover {
    background-color: #3d5a8a;
    opacity: 0.9;
}

/* Error Display */
body.CentralView #errorDisplay {
    margin: 5px auto;
    color: #c00;
    text-align: center;
    font-size: 14px;
}

body.CentralView #errorDisplay h3 {
    margin: 1em 12px 0;
    text-align: center;
}

body.CentralView #errorDisplay p.error {
    margin: 5px 5px 0;
    padding: 8px;
    background-color: #ffe6e6;
    border: 1px solid #c00;
    border-radius: 4px;
}

body.CentralView #errorDisplay .error a {
    font-weight: 700;
    color: #000;
}

body.CentralView #errorDisplay .error a:hover {
    opacity: .8;
}

/* Footer Links (for login page) */
body.CentralView #footer, 
body.CentralView #textNavFooter {
    clear: both;
    margin: 24px auto;
    font-weight: bold;
    text-align: center;
    padding: 0 10px;
}

body.CentralView #footer a, 
body.CentralView #textNavFooter a {
    color: #000;
    text-decoration: none;
    font-weight: normal;
}

body.CentralView #textNavFooter a, 
body.CentralView #textNavFooter p {
    display: inline-block;
    font-size: 12px !important;
}

body.CentralView #textNavFooter a {
    margin: 0;
    padding: 0 5px 0 0;
}

body.CentralView #textNavFooter a.first {
    padding-left: 0;
}

body.CentralView #textNavFooter a.last {
    border: 0 none;
    padding-right: 0;
}

body.CentralView #textNavFooter p {
    margin: 0.5em 0 0;
}

/* Signup/Create Account Form Styles */
body.CentralView .mFormWrap #loginForm .terms {
    margin: 5px 15px 15px;
    text-align: left;
    font-size: 12px;
}

body.CentralView .mFormWrap #loginForm .terms input[type=checkbox] {
    width: auto;
    margin: 0;
    min-width: auto;
    vertical-align: text-top;
    margin-right: 0.3em;
}

body.CentralView .mFormWrap #loginForm .terms label {
    display: inline;
    margin: 0;
    font-weight: normal;
    font-size: 12px;
    vertical-align: text-top;
}

body.CentralView .mFormWrap #loginForm .terms a {
    color: #00f;
    text-decoration: none;
}

body.CentralView .mFormWrap #loginForm .terms a:hover {
    text-decoration: underline;
}

/* Password/Email Match Indicators */
#passwordStrengthTest, #passwordMatchTest, #emailMatchTest {
    float: right;
    height: 1em;
    margin-top: 3px;
    font-weight: bold;
    font-size: smaller;
    margin-left: 5px;
}

#passwordStrengthTest.short {
    color: Red;
}

#passwordStrengthTest.weak {
    color: Tomato;
}

#passwordStrengthTest.good {
    color: SteelBlue;
}

#passwordStrengthTest.strong {
    color: ForestGreen;
}

#passwordMatchTest.noMatch {
    color: Red;
}

#passwordMatchTest.match {
    color: ForestGreen;
}

#emailMatchTest.noMatch {
    color: Red;
}

#emailMatchTest.match {
    color: ForestGreen;
}

/* Dashboard/Account Pages */
#pageBackground .mainBody h2 {
    margin-top: 20px;
    margin-bottom: 1em;
}

/* Responsive Styles for Login/Signup Pages */
@media only screen and (max-width: 380px) {
    body.CentralView #textNavFooter a.secLast {
        border: 0 none;
        padding: 0;
    }
    
    .mFormWrap #loginForm input[type=email], 
    .mFormWrap #loginForm input[type=text], 
    .mFormWrap #loginForm input[type=password] {
        min-width: 85%;
    }
}

/* Backpage Form Styles - Edit Profile and Post Ad */
.editAdTitles {
    font-weight: bold;
    font-size: 14px;
    color: #000;
}

.editAdText {
    font-size: 13px;
    color: #000;
    font-style: italic;
}

.editAdText i {
    font-style: italic;
}

/* Form Inputs */
.mainBody input[type="text"],
.mainBody input[type="email"],
.mainBody input[type="tel"],
.mainBody input[type="password"] {
    border: 1px solid #ccc;
    padding: 4px;
    font-size: 14px;
    font-family: arial, sans-serif;
    margin: 2px 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Dashboard form inputs - desktop size */
@media (min-width: 601px) {
    .dashboard-content-area .mainBody input[type="text"],
    .dashboard-content-area .mainBody input[type="email"],
    .dashboard-content-area .mainBody input[type="tel"],
    .dashboard-content-area .mainBody input[type="password"],
    .dashboard-content-area .mainBody select {
        width: 600px;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.mainBody input[type="text"]:focus,
.mainBody input[type="email"]:focus,
.mainBody input[type="tel"]:focus,
.mainBody input[type="password"]:focus {
    border: 1px solid #3563a8;
    outline: none;
}

.mainBody input.req {
    border: 1px solid #ccc;
}

.mainBody input.req:focus {
    border: 1px solid #3563a8;
}

.mainBody select {
    border: 1px solid #ccc;
    padding: 4px;
    font-size: 14px;
    font-family: arial, sans-serif;
    margin: 2px 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Dashboard form inputs - mobile responsive (dashboard pages only) */
@media (max-width: 600px) {
    .dashboard-content-area .mainBody {
        padding-right: 25px;
    }
    
    .dashboard-content-area .mainBody input,
    .dashboard-content-area .mainBody select {
        width: 100%;
        box-sizing: border-box;
    }
}

.mainBody select:focus {
    border: 1px solid #3563a8;
    outline: none;
}

/* ============================================
   POST AD FORM - RESPONSIVE STYLES
   ============================================ */

/* Base inputs - mobile first (full width) */
#create-listing-form input[type="text"],
#create-listing-form input[type="number"],
#create-listing-form textarea,
#create-listing-form select,
#edit-listing-form input[type="text"],
#edit-listing-form input[type="number"],
#edit-listing-form textarea,
#edit-listing-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: arial, sans-serif;
}

#create-listing-form textarea,
#edit-listing-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Form table - ensure it doesn't overflow */
#create-listing-form table,
#edit-listing-form table {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    table-layout: fixed;
}

#create-listing-form table[width="100%"],
#edit-listing-form table[width="100%"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#create-listing-form table td,
#edit-listing-form table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Category table - mobile: vertical stack */
.category-select-table {
    margin-top: 8px;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
}

.category-select-table tr {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category-select-table td {
    width: 100%;
    padding: 0;
    margin-bottom: 2px;
    line-height: 1;
    vertical-align: top;
    height: auto;
    font-size: 11px;
}

.category-select {
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
}

/* Location table - mobile: vertical stack */
.location-select-table {
    margin-top: 8px;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
}

.location-select-table tr {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-select-table td {
    width: 100%;
    padding: 0;
    margin-bottom: 2px;
    line-height: 1;
    vertical-align: top;
    height: auto;
    font-size: 11px;
}

.location-select {
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
}

/* Address label */
.address-label {
    font-size: 11px;
    margin-top: 8px;
    display: block;
}

/* Photo elements */
#listing-photo-dropzone,
#listing-photo-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================
   DESKTOP (768px+)
   ============================================ */
@media (min-width: 768px) {
    /* Text inputs - optimum width */
    #create-listing-form input[type="text"],
    #create-listing-form textarea,
    #edit-listing-form input[type="text"],
    #edit-listing-form textarea {
        max-width: 600px;
    }
    
    /* Number inputs - smaller width */
    #create-listing-form input[type="number"],
    #edit-listing-form input[type="number"] {
        max-width: 200px;
    }
    
    /* Category table - horizontal layout */
    .category-select-table tr {
        flex-direction: row;
        gap: 8px;
    }
    
    .category-select-table td {
        width: auto;
        flex: 0 0 auto;
        margin-bottom: 2px;
        line-height: 1;
        vertical-align: top;
        height: auto;
    }
    
    .category-select {
        width: 250px;
        max-width: 250px;
    }
    
    /* Location table - horizontal layout */
    .location-select-table tr {
        flex-direction: row;
        gap: 6px;
    }
    
    .location-select-table td {
        width: auto;
        flex: 0 0 auto;
        margin-bottom: 2px;
        line-height: 1;
        vertical-align: top;
        height: auto;
    }
    
    .location-select {
        width: 200px;
        max-width: 200px;
    }
    
    /* Condition select */
    #create-listing-form #item_condition,
    #edit-listing-form #item_condition {
        max-width: 200px;
    }
    
    /* Price and age */
    .price-input,
    .age-input {
        max-width: 200px;
    }
    
    /* Address */
    .address-input {
        max-width: 600px;
    }
}

/* ============================================
   MOBILE ONLY (max-width: 767px)
   Add small right padding to prevent inputs going behind viewport
   ============================================ */
@media (max-width: 767px) {
    #create-listing-form,
    #edit-listing-form {
        padding-right: 15px;
        box-sizing: border-box;
    }
    
    #create-listing-form table,
    #edit-listing-form table {
        width: 100%;
        max-width: 100%;
    }
}

/* Form Buttons */
.buttonControls {
    background-color: #5173a1;
    color: #fff;
    border: 0;
    padding: 8px 16px;
    font-size: 13px;
    font-family: arial, sans-serif;
    font-weight: normal;
    cursor: pointer;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease;
    letter-spacing: 0.3px;
}

.buttonControls:hover {
    background-color: #3d5a8a;
}

.buttonControls:disabled {
    background-color: #999;
    cursor: not-allowed;
    opacity: 0.6;
}

.buttonControls.buttonGreen {
    background-color: #28a745;
}

.buttonControls.buttonGreen:hover {
    background-color: #218838;
}

.buttonIconEdit,
.buttonIconDelete {
    display: inline-block;
    padding: 6px 12px;
    height: auto;
    line-height: 13px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-weight: normal;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-size: 13px;
    letter-spacing: 0.3px;
}

.buttonIconEdit {
    background-color: #3563a8;
}

.buttonIconEdit:hover {
    background-color: #3d5a8a;
}

.buttonIconDelete {
    background-color: #dc3545;
}

.buttonIconDelete:hover {
    background-color: #c82333;
}

.buttonControls.buttonSecondary {
    background-color: #6c757d;
}

.buttonControls.buttonSecondary:hover {
    background-color: #5a6268;
}

.buttonControls + .buttonControls {
    margin-left: 10px;
}

/* Manage Ads Table - Remove italic from all columns except location */
.manage-ads-table .editAdText {
    font-style: normal;
}

/* Keep location info italic (city, region, country) */
.manage-ads-table .editAdText[style*="font-style: italic"] {
    font-style: italic !important;
}



/* Edit Ad Form Styles */
.required-asterisk {
    color: red;
}

.message-container {
    display: none;
    margin: 1em 0;
    padding: 0.5em;
    border: 1px solid #ccc;
    background-color: #f3f4f5;
}

.message-container.message-error {
    border-color: #d00;
    background-color: #ffe0e0;
    color: #d00;
}

.message-container.message-success {
    border-color: #0a0;
    background-color: #e0ffe0;
    color: #0a0;
}

.category-select-table {
    margin-top: 8px;
}

.category-label {
    font-size: 11px;
}

.category-select {
    width: 250px;
}

.description-textarea {
    width: 100%;
    padding: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: arial, sans-serif;
    box-sizing: border-box;
}

.price-input,
.age-input {
    width: 200px;
}

.location-select-table {
    margin-top: 8px;
}

.location-label {
    font-size: 11px;
}

.location-select {
    width: 200px;
}

.address-label {
    font-size: 11px;
    margin-top: 8px;
    display: block;
}

.address-input {
    width: 100%;
    max-width: 600px;
}

.photo-dropzone {
    border: 2px dashed #ccc;
    padding: 30px;
    text-align: center;
    margin-top: 10px;
    background-color: #f9f9f9;
    cursor: pointer;
    position: relative;
}

.photo-dropzone.photo-dropzone-active {
    border-color: #3563a8;
    background-color: #f0f4ff;
}

.photo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.photo-dropzone-content {
    pointer-events: none;
}

.photo-dropzone-icon {
    font-size: 24px;
    color: #666;
    margin-bottom: 10px;
}

.photo-dropzone-text {
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
}

.photo-dropzone-hint {
    color: #666;
    font-size: 12px;
}

.photo-empty {
    margin-top: 10px;
    color: #666;
    font-size: 12px;
}

.photo-empty-hidden {
    display: none;
}

.photo-grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.photo-card {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.photo-card-image-container {
    position: relative;
    padding-top: 75%;
    background: #f0f0f0;
    overflow: hidden;
}

.photo-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-card-info {
    padding: 5px;
    font-size: 11px;
    color: #666;
    border-top: 1px solid #eee;
}

.photo-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-card-actions {
    text-align: center;
    margin-top: 5px;
}

.photo-card-move {
    text-align: center;
    margin-top: 3px;
}

.photo-card-btn {
    padding: 2px 8px;
    margin: 0 2px;
    font-size: 10px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.photo-card-btn-delete {
    color: #d00;
}

.photo-card-move-btn {
    padding: 2px 6px;
    margin: 0 1px;
    font-size: 10px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.photo-card-move-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.submit-loading {
    display: none;
    margin-left: 10px;
    color: #666;
}

.clear-both {
    clear: both;
}

/* Listing Detail Page Styles */
.metaInfoDisplay-age {
    margin-top: 20px;
}

.favorite-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: underline;
    font-weight: bold;
}

.favorite-icon {
    color: red;
    font-size: 16px;
    margin-right: 5px;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 5px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title {
    margin: 0;
    color: #333;
}

.modal-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-close:hover {
    color: #000;
}

.modal-field {
    margin-bottom: 15px;
}

.modal-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-input,
.modal-select,
.modal-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit;
}

.modal-input-readonly {
    background-color: #f5f5f5;
}

.modal-textarea {
    resize: vertical;
}

.modal-actions {
    text-align: right;
}

.modal-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
}

.modal-btn-cancel {
    margin-right: 10px;
    background-color: #ccc;
    color: #333;
}

.modal-btn-submit {
    background-color: #dc3545;
    color: white;
}

.modal-btn-primary {
    background-color: #3563a8;
    color: white;
}

.modal-confirmation {
    text-align: center;
    padding: 40px 20px;
}

.modal-confirmation-icon {
    font-size: 48px;
    color: #28a745;
    margin-bottom: 20px;
}

.modal-confirmation h3 {
    color: #333;
    margin-bottom: 15px;
}

.modal-confirmation p {
    color: #666;
    margin-bottom: 30px;
}

.modal-confirmation-btn {
    padding: 10px 30px;
    background-color: #3563a8;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
}

/* Reset Password Page Styles */
.logo-image {
    display: block;
    width: 265px;
    height: 40px;
    margin: 0 auto;
}

.password-hint {
    font-size: 11px;
    color: #666;
    margin: 5px 15px 0;
}

.label-spacing {
    margin-top: 15px;
}

.login-form-bottom {
    margin-top: 15px;
}

.text-center {
    text-align: center;
}

/* Help Page Styles */
.help-intro {
    font-style: normal;
    color: #666;
    margin-bottom: 20px;
    display: block;
}

.help-nav-table {
    margin-bottom: 25px;
    background-color: #f8f9fa;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    padding: 15px;
}

.help-nav-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.help-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.help-nav-link {
    color: #3563a8;
    text-decoration: none;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #3563a8;
    border-radius: 3px;
    font-size: 12px;
    font-style: normal;
}

.help-section {
    margin-bottom: 30px;
}

.help-section-header {
    background: linear-gradient(135deg, #3563a8 0%, #5173a1 100%);
    padding: 12px 15px;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

.help-section-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
}

.help-table {
    border-collapse: collapse;
    border-color: #e1e8ed;
    border-top: none;
}

.help-table-header {
    padding: 12px;
    border: 1px solid #e1e8ed;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
}

.help-table-header-separator {
    padding: 12px;
    border: 1px solid #e1e8ed;
    background-color: #f8f9fa;
    border-top: 2px solid #e1e8ed;
}

.help-table-question {
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    color: #2d3748;
}

.help-table-content {
    padding: 15px;
    border: 1px solid #e1e8ed;
    background-color: #fff;
}

.help-table-content-bottom {
    padding: 15px;
    border: 1px solid #e1e8ed;
    background-color: #fff;
    border-bottom: 1px solid #e1e8ed;
}

.help-text {
    font-style: normal;
    line-height: 1.6;
    color: #4a5568;
}

/* Help Page Additional Styles */
.help-status-pending {
    color: #2d3748;
}

.help-status-active {
    color: #28a745;
}

.help-status-expired {
    color: #dc3545;
}

.help-status-suspended {
    color: #fd7e14;
}

.help-status-draft {
    color: #6c757d;
}

.help-support-box {
    margin-bottom: 30px;
    background-color: #e7f3ff;
    border: 1px solid #3563a8;
    border-radius: 4px;
    padding: 20px;
}

.help-support-title {
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    color: #3563a8;
    margin-bottom: 10px;
    display: block;
}

.help-support-text {
    font-style: normal;
    line-height: 1.6;
    color: #4a5568;
    margin-bottom: 15px;
    display: block;
}

.help-support-link {
    display: inline-block;
    text-decoration: none;
}

/* Contact Page Styles */
.contact-intro {
    font-style: normal;
    color: #666;
    margin-bottom: 20px;
    display: block;
}

.contact-info-box {
    margin-bottom: 25px;
    background-color: #f8f9fa;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    padding: 20px;
}

.contact-info-title {
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    color: #2d3748;
    margin-bottom: 15px;
    display: block;
}

.contact-info-row {
    padding: 8px 0;
    vertical-align: top;
}

.contact-info-label {
    width: 120px;
}

.contact-info-text {
    font-style: normal;
    color: #4a5568;
}

.contact-info-text-bold {
    font-style: normal;
    font-weight: 600;
    color: #4a5568;
}

.contact-link {
    color: #3563a8;
    text-decoration: none;
}

.contact-form-section {
    margin-bottom: 30px;
}

/* Checkout Page Styles */
.checkout-table {
    border-collapse: collapse;
    border-color: #ccc;
    margin-bottom: 20px;
}

.checkout-table-cell {
    padding: 8px;
    border: 1px solid #ccc;
}

.checkout-table-header {
    padding: 8px;
    border: 1px solid #ccc;
    background-color: #f3f4f5;
}

.checkout-listing-title {
    font-weight: bold;
}

.checkout-listing-id {
    font-size: 12px;
    color: #666;
}

.upgrades-section {
    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}

.upgrades-header {
    background: linear-gradient(135deg, #3563a8 0%, #5173a1 100%);
    padding: 12px 15px;
    border-bottom: 1px solid #e1e8ed;
}

.upgrades-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.upgrades-header-icon {
    font-size: 16px;
}

.upgrades-header-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.upgrades-header-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    font-weight: 400;
}

.upgrades-content {
    padding: 12px;
}

.upgrades-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.upgrades-table {
    border-collapse: collapse;
    background-color: #fff;
    min-width: 600px;
}

.upgrades-table th {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 2px solid #f0f3f6;
    white-space: nowrap;
}

.upgrades-table-header-text {
    color: #2d3748;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.strategy-row {
    background-color: #fff;
    border-bottom: 1px solid #f7fafc;
    transition: background-color 0.2s ease;
}

.strategy-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #3563a8;
}

.strategy-cell {
    padding: 10px 8px;
    vertical-align: top;
    white-space: nowrap;
}

.strategy-name {
    font-weight: 600;
    color: #1a202c;
    font-size: 14px;
    display: block;
    margin-bottom: 4px;
}

.strategy-description {
    font-size: 12px;
    color: #718096;
    line-height: 1.5;
}

.strategy-price {
    color: #3563a8;
    font-weight: 600;
    font-size: 14px;
}

.duration-select {
    padding: 6px 10px;
    width: 100px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background-color: #f7fafc;
    color: #4a5568;
    cursor: not-allowed;
    transition: all 0.2s ease;
}

.duration-select:enabled {
    cursor: pointer;
    background-color: #fff;
}

.strategy-total {
    color: #3563a8;
    font-weight: 600;
    font-size: 14px;
}

/* Checkout Page Additional Styles */
.strategy-row-cell {
    padding: 10px 8px;
    vertical-align: top;
    white-space: nowrap;
}

.strategy-row-cell-wide {
    padding: 10px 8px;
    vertical-align: top;
    min-width: 150px;
}

.strategy-row-cell-middle {
    padding: 10px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.upgrades-table th {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 2px solid #f0f3f6;
    white-space: nowrap;
}

.upgrades-table th:first-child {
    width: 30px;
}

.payment-methods-section {
    margin-top: 30px;
    margin-bottom: 20px;
}

.payment-methods-header {
    background: linear-gradient(135deg, #3563a8 0%, #5173a1 100%);
    padding: 12px 15px;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

.payment-methods-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
}

.payment-methods-table {
    border-collapse: collapse;
    border-color: #e1e8ed;
    border-top: none;
    width: 100%;
}

.payment-method-row {
    padding: 15px;
    border: 1px solid #e1e8ed;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.payment-method-row:hover {
    background-color: #f8f9fa;
}

.payment-method-row-selected {
    background-color: #e7f3ff;
    border-color: #3563a8;
}

.payment-method-name {
    font-weight: 600;
    color: #2d3748;
    font-size: 15px;
}

.payment-method-description {
    font-size: 12px;
    color: #718096;
    margin-top: 4px;
}

.wallet-balance-display {
    background-color: #f0f4ff;
    border: 1px solid #3563a8;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}

.wallet-balance-text {
    color: #3563a8;
    font-weight: 600;
    font-size: 14px;
}

.wallet-balance-amount {
    color: #3563a8;
    font-weight: 700;
    font-size: 16px;
}

.total-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #e1e8ed;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 16px;
}

.total-label {
    font-weight: 600;
    color: #2d3748;
}

.total-amount {
    font-weight: 700;
    color: #3563a8;
    font-size: 20px;
}

/* Contact Form Styles */
.contact-form-section {
    margin-bottom: 30px;
}

.contact-form-header {
    background: linear-gradient(135deg, #3563a8 0%, #5173a1 100%);
    padding: 12px 15px;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

.contact-form-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
}

.contact-form-table {
    border-collapse: collapse;
    border-color: #e1e8ed;
    border-top: none;
}

.contact-form-cell {
    padding: 20px;
    border: 1px solid #e1e8ed;
    background-color: #fff;
}

.contact-form {
    max-width: 600px;
}

.contact-form-label {
    display: block;
    margin-bottom: 5px;
}

.contact-form-label-text {
    font-style: normal;
    font-weight: 600;
    color: #2d3748;
}

.contact-form-input,
.contact-form-select,
.contact-form-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
}

.contact-form-textarea {
    resize: vertical;
}

.contact-form-submit {
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.contact-links-section {
    margin-bottom: 30px;
}

.contact-links-content {
    padding: 15px;
    border: 1px solid #e1e8ed;
    background-color: #fff;
}

.contact-links-text {
    font-style: normal;
    line-height: 1.8;
    color: #4a5568;
}

.contact-links-link {
    color: #3563a8;
    text-decoration: none;
    font-weight: 600;
}

.contact-links-strong {
    color: #2d3748;
}

/* Checkout Table Header Styles */
.upgrades-table th {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 2px solid #f0f3f6;
    white-space: nowrap;
}

.upgrades-table th:first-child {
    width: 30px;
}

.upgrades-table-header-text {
    color: #2d3748;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-total {
    font-weight: 700;
    color: #2d3748;
    font-size: 14px;
}

/* Checkout Strategy Row Hover */
.strategy-row:hover {
    background-color: #f7fafc !important;
}

.duration-select:not(:disabled) {
    background-color: #ffffff !important;
    border-color: #cbd5e0 !important;
    cursor: pointer !important;
    color: #2d3748 !important;
}

.duration-select:not(:disabled):focus {
    outline: none;
    border-color: #3563a8 !important;
    box-shadow: 0 0 0 3px rgba(53, 99, 168, 0.1) !important;
}

.duration-select:not(:disabled):hover {
    border-color: #3563a8 !important;
    box-shadow: 0 0 0 3px rgba(53, 99, 168, 0.1) !important;
}

/* Checkout Payment Methods */
.payment-gateway-warning {
    background-color: #fff3cd;
    padding: 20px;
    border: 1px solid #ffc107;
    margin-bottom: 20px;
}

.payment-gateway-warning-text {
    color: #856404;
}

.payment-gateway-cell {
    padding: 12px;
    border: 1px solid #ccc;
}

.payment-gateway-radio-cell {
    padding: 12px;
    border: 1px solid #ccc;
    width: 30px;
}

.payment-gateway-radio {
    cursor: pointer;
}

.payment-gateway-name {
    font-weight: bold;
    font-style: normal;
}

.payment-gateway-description {
    font-size: 12px;
    color: #666;
    font-style: normal;
}

.checkout-button-back {
    cursor: pointer;
    background-color: #6c757d;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
}

.checkout-button-submit {
    cursor: pointer;
    background-color: #5173a1;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.checkout-total-amount {
    font-weight: bold;
    color: #3563a8;
    font-size: 18px;
}

.checkout-bonus-amount {
    color: #28a745;
    font-weight: bold;
}

.checkout-credits-total {
    font-weight: bold;
    color: #3563a8;
    font-size: 16px;
}

.checkout-duration-hint {
    font-size: 11px;
    color: #666;
}

/* Billing Page Styles */
.billing-total-amount {
    font-size: 24px;
    font-weight: bold;
    color: #3563a8;
}

.billing-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 20px;
}

.billing-table {
    border-collapse: collapse;
    border-color: #ccc;
    min-width: 700px;
}

.billing-table-header-row {
    background-color: #f3f4f5;
}

.billing-table-header {
    padding: 8px;
    border: 1px solid #ccc;
}

.billing-table-header-toggle {
    width: 30px;
}

.billing-table-header-delete {
    width: 40px;
}

.billing-table-cell {
    padding: 8px;
    border: 1px solid #ccc;
}

.billing-table-cell-center {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: center;
}

.billing-table-cell-right {
    padding: 8px;
    border: 1px solid #ccc;
    text-align: right;
}

.billing-order-row {
    cursor: pointer;
    background-color: #f8f9fa;
}

.billing-order-row:hover {
    background-color: #e9ecef;
}

.billing-toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #3563a8;
    padding: 0;
}

.billing-order-id {
    font-weight: bold;
}

.billing-order-items {
    font-size: 11px;
    color: #666;
}

.billing-delete-button {
    background: none;
    border: none;
    cursor: pointer;
    color: #dc3545;
    font-size: 16px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.billing-delete-button:hover {
    color: #c82333;
}

.billing-payment-row {
    background-color: #fff;
}

.billing-payment-row-hidden {
    display: none;
}

/* Post Ad Page Styles */
.post-ad-message-container {
    display: none;
    margin: 1em 0;
    padding: 0.5em;
    border: 1px solid #ccc;
    background-color: #f3f4f5;
}

.post-ad-photo-message {
    display: none;
    margin: 1em 0;
    padding: 0.5em;
    border: 1px solid #ccc;
}

.post-ad-required-asterisk {
    color: red;
}

.post-ad-category-table {
    margin-top: 8px;
}

.post-ad-category-label {
    font-size: 11px;
}

.post-ad-category-select {
    width: 250px;
}

.post-ad-description-textarea {
    width: 100%;
    padding: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: arial, sans-serif;
    box-sizing: border-box;
}

.post-ad-price-input {
    width: 200px;
}

.post-ad-age-input {
    width: 200px;
}

.post-ad-location-table {
    margin-top: 8px;
}

/* Billing Status Colors */
.billing-status-completed {
    color: #28a745;
    font-weight: bold;
}

.billing-status-pending {
    color: #ffc107;
    font-weight: bold;
}

.billing-status-failed {
    color: #dc3545;
    font-weight: bold;
}

.billing-status-refunded {
    color: #6c757d;
    font-weight: bold;
}

.billing-status-default {
    color: #6c757d;
}

.billing-order-details {
    display: none;
    background-color: #fafafa;
}

.billing-order-details-cell {
    padding: 0;
    border: 1px solid #ccc;
}

.billing-order-details-content {
    padding: 10px 15px 15px 40px;
}

.billing-payment-item {
    padding: 8px 0;
    border-left: 2px solid #ddd;
    padding-left: 12px;
    margin-bottom: 8px;
}

.billing-payment-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.billing-payment-item-content {
    flex: 1;
}

.billing-payment-item-name {
    font-weight: 600;
}

.billing-payment-item-meta {
    font-size: 11px;
    color: #666;
    margin-left: 8px;
}

.billing-payment-item-amount {
    font-weight: bold;
    color: #3563a8;
}

.billing-standalone-row {
    background-color: #fff;
}

/* Post Ad Photo Upload Styles */
.post-ad-address-label {
    font-size: 11px;
    margin-top: 8px;
    display: block;
}

.post-ad-address-input {
    width: 100%;
    max-width: 600px;
}

.post-ad-photo-dropzone {
    border: 2px dashed #ccc;
    padding: 30px;
    text-align: center;
    margin-top: 10px;
    background-color: #f9f9f9;
    cursor: pointer;
    position: relative;
}

.post-ad-photo-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.post-ad-photo-dropzone-content {
    pointer-events: none;
}

.post-ad-photo-dropzone-icon {
    font-size: 24px;
    color: #666;
    margin-bottom: 10px;
}

.post-ad-photo-dropzone-text {
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
}

.post-ad-photo-dropzone-hint {
    color: #666;
    font-size: 12px;
}

.post-ad-photo-empty {
    margin-top: 10px;
    color: #666;
    font-size: 12px;
}

/* Manage Ads Page Styles */
.manage-ads-header-table {
    margin-bottom: 15px;
}

.manage-ads-post-button {
    display: inline-block;
    padding: 8px 15px;
    background-color: #5173a1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.manage-ads-filters-table {
    margin-bottom: 15px;
    background-color: #f3f4f5;
    padding: 10px;
    border: 1px solid #ccc;
}

.manage-ads-filters-content {
    margin-top: 8px;
}

.manage-ads-filter-link {
    display: inline-block;
    padding: 5px 12px;
    margin-right: 5px;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
}

.manage-ads-filter-link-active {
    background-color: #5173a1;
    color: #fff;
}

.manage-ads-filter-link-inactive {
    background-color: #e0e0e0;
    color: #333;
}

.manage-ads-empty-table {
    background-color: #f3f4f5;
    padding: 40px;
    text-align: center;
    border: 1px solid #ccc;
}

.manage-ads-empty-title {
    font-size: 18px;
}

.manage-ads-empty-text {
    margin-top: 10px;
    display: block;
}

.manage-ads-empty-button {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 15px;
    background-color: #5173a1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.manage-ads-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 20px;
}

.manage-ads-table {
    border-collapse: collapse;
    border-color: #ccc;
    min-width: 800px;
}

.manage-ads-table-header-row {
    background-color: #f3f4f5;
}

.manage-ads-table-header {
    padding: 8px;
    border: 1px solid #ccc;
}

.manage-ads-table-cell {
    padding: 8px;
    border: 1px solid #ccc;
}

.manage-ads-listing-link {
    color: #3563a8;
    text-decoration: none;
}

.manage-ads-listing-title {
    font-weight: bold;
}

/* Favorites Page Styles */
.favorites-header-table {
    margin-bottom: 15px;
}

.favorites-empty-table {
    background-color: #f3f4f5;
    padding: 40px;
    text-align: center;
    border: 1px solid #ccc;
}

.favorites-empty-title {
    font-size: 18px;
}

.favorites-empty-text {
    margin-top: 10px;
    display: block;
}

.favorites-listing-row {
    display: flex;
    align-items: flex-start;
}

.favorites-listing-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 10px;
    border: 1px solid #ccc;
    flex-shrink: 0;
}

.favorites-listing-content {
    flex: 1;
    min-width: 0;
}

.favorites-listing-link {
    color: #3563a8;
    text-decoration: none;
    display: block;
}

.favorites-listing-title {
    font-weight: bold;
}

.favorites-listing-description {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    display: block;
}

/* Payment Success Page Styles */
.payment-success-alert {
    background-color: #d4edda;
    padding: 20px;
    border: 1px solid #28a745;
    margin-bottom: 20px;
}

.payment-success-alert-text {
    color: #155724;
    font-weight: bold;
    font-size: 16px;
}

.payment-success-table {
    border-collapse: collapse;
    border-color: #ccc;
    margin-bottom: 20px;
}

.payment-success-table-header {
    padding: 8px;
    border: 1px solid #ccc;
    background-color: #f3f4f5;
}

.payment-success-table-cell {
    padding: 8px;
    border: 1px solid #ccc;
}

.payment-success-order-id {
    font-weight: bold;
}

.payment-success-amount {
    font-weight: bold;
    color: #3563a8;
    font-size: 16px;
}

.payment-success-status {
    color: #28a745;
    font-weight: bold;
}

.payment-success-wallet-notice {
    background-color: #e7f3ff;
    padding: 15px;
    border: 1px solid #3563a8;
    margin-bottom: 20px;
}

.payment-success-wallet-text {
    color: #3563a8;
    font-weight: bold;
}

/* Wallet Page Styles */
.wallet-balance-amount {
    font-size: 24px;
    font-weight: bold;
    color: #3563a8;
}

.wallet-empty-table {
    background-color: #f3f4f5;
    padding: 40px;
    text-align: center;
    border: 1px solid #ccc;
}

.wallet-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 20px;
}

.wallet-packages-table {
    border-collapse: collapse;
    border-color: #ccc;
    margin-bottom: 20px;
    min-width: 600px;
}

.wallet-packages-header-row {
    background-color: #f3f4f5;
}

.wallet-packages-header {
    padding: 8px;
    border: 1px solid #ccc;
}

.wallet-packages-cell {
    padding: 8px;
    border: 1px solid #ccc;
}

.wallet-package-name {
    font-weight: bold;
}

.wallet-package-amount {
    font-weight: bold;
}

.wallet-package-bonus {
    color: #28a745;
    font-weight: bold;
}

.wallet-package-total {
    color: #3563a8;
    font-weight: bold;
}

/* Manage Ads Filter Links - Dynamic */
.manage-ads-filter-link {
    display: inline-block;
    padding: 5px 12px;
    margin-right: 5px;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
}

.manage-ads-location-info {
    font-style: italic;
    color: #666;
    font-size: 12px;
}

.manage-ads-featured-badge {
    font-size: 11px;
    color: #ffa500;
}

.manage-ads-actions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.manage-ads-pagination-table {
    margin-top: 15px;
    padding: 10px;
    border-top: 1px solid #ccc;
}

.manage-ads-pagination-link {
    display: inline-block;
    padding: 5px 12px;
    margin-left: 5px;
    background-color: #e0e0e0;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
}

/* Favorites Page Additional Styles */
.favorites-unfavorite-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
}

.favorites-pagination {
    margin-top: 20px;
    text-align: center;
}

.favorites-pagination-link {
    display: inline-block;
    padding: 8px 15px;
    margin-right: 5px;
    background-color: #5173a1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.favorites-pagination-link-left {
    margin-right: 5px;
}

.favorites-pagination-link-right {
    margin-left: 5px;
}

.favorites-pagination-text {
    margin: 0 10px;
}

/* Manage Ads Status Colors */
.manage-ads-status-active {
    color: #28a745;
    font-weight: bold;
}

.manage-ads-status-pending {
    color: #ffc107;
    font-weight: bold;
}

.manage-ads-status-draft {
    color: #6c757d;
    font-weight: bold;
}

.manage-ads-status-expired {
    color: #dc3545;
    font-weight: bold;
}

.manage-ads-status-suspended {
    color: #fd7e14;
    font-weight: bold;
}

.manage-ads-status-default {
    color: #6c757d;
}

/* Wallet Page Additional Styles */
.wallet-package-bonus {
    color: #28a745;
    font-weight: bold;
}

.wallet-package-total {
    font-weight: bold;
    color: #3563a8;
    font-size: 16px;
}

.wallet-package-button {
    cursor: pointer;
    background-color: #5173a1;
    color: #fff;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
}

/* Verify Email & Success Pages */
.verify-logo-image {
    display: block;
    width: 265px;
    height: 40px;
    margin: 0 auto;
}

.verify-error-display {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 15px;
    border-radius: 4px;
    margin: 5px 15px;
    text-align: center;
}

.verify-error-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.verify-error-title {
    color: #0c5460;
    margin: 10px 0;
}

.verify-error-text {
    margin: 10px 0;
}

.verify-success-display {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 4px;
    margin: 5px 15px;
    text-align: center;
}

.verify-success-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.verify-success-title {
    color: #155724;
    margin: 10px 0;
}

.verify-success-text {
    margin: 10px 0;
}

/* Category Page Styles */
.category-region-nav {
    margin-top: 1em;
}

.category-view-selector {
    clear: both;
}

.category-sponsor-wrapper {
    clear: both;
    margin-top: 0;
}

.category-divider {
    height: 1px;
    margin: 3px 0 0;
    border-top: 1px solid #ccc;
    line-height: 1px;
}

/* Post Ad Photo Grid Styles */
.post-ad-photo-grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.post-ad-submit-button {
    cursor: pointer;
}

.post-ad-submit-loading {
    display: none;
    margin-left: 10px;
    color: #666;
}

/* Post Ad Photo Card Styles (for JavaScript template) */
.post-ad-photo-card {
    position: relative;
    padding-top: 75%;
    background: #f0f0f0;
    overflow: hidden;
}

.post-ad-photo-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-ad-photo-card-info {
    padding: 5px;
    font-size: 11px;
    color: #666;
    border-top: 1px solid #eee;
}

.post-ad-photo-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-ad-photo-card-actions {
    text-align: center;
    margin-top: 5px;
}

.post-ad-photo-card-button {
    padding: 2px 8px;
    margin: 0 2px;
    font-size: 10px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.post-ad-photo-card-button-delete {
    color: #d00;
}

.post-ad-photo-card-move {
    text-align: center;
    margin-top: 3px;
}

.post-ad-photo-card-move-button {
    padding: 2px 6px;
    margin: 0 1px;
    font-size: 10px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.contact-form-submit-cell {
    padding: 15px 0 0 0;
}

.verify-link {
    text-decoration: none;
    color: #3563a8;
    font-weight: 600;
}

.verify-spacing {
    margin: 15px 0;
}

.verify-help-text {
    font-size: 14px;
    color: #666;
}

.verify-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #5173a1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

/* Verify Email Additional Styles */
.verify-help-box {
    margin-top: 20px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.verify-help-title {
    color: #0c5460;
    margin: 10px 0;
    font-size: 14px;
}

.verify-help-list {
    text-align: left;
    color: #0c5460;
    font-size: 12px;
    margin: 10px 0;
    padding-left: 20px;
}

.verify-actions {
    margin-top: 20px;
    text-align: center;
}

.verify-button-primary {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3563a8;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

.verify-button-secondary {
    display: block;
    text-align: center;
    padding: 10px;
    background-color: #f8f9fa;
    color: #3563a8;
    text-decoration: none;
    border: 1px solid #3563a8;
    border-radius: 4px;
    font-weight: bold;
}

.verify-button-account {
    display: block;
    text-align: center;
    padding: 10px;
    background-color: #3563a8;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

.verify-actions-flex {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-disabled {
    background-color: #e0e0e0;
    color: #666;
}

.form-actions-cell {
    padding-left: 20px;
}

.listing-card-thumb {
    width: 100px;
    height: 100px;
}

.listing-card-thumb-large {
    width: 150px;
    height: 150px;
}

/* Checkout Duration Select States */
.duration-select-enabled {
    background-color: #ffffff !important;
    border-color: #cbd5e0 !important;
    cursor: pointer !important;
    color: #2d3748 !important;
}

.duration-select-disabled {
    background-color: #f7fafc !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    color: #a0aec0 !important;
}

/* Billing Status Colors */
.billing-status-completed {
    color: #28a745;
    font-weight: bold;
}

.billing-status-pending {
    color: #ffc107;
    font-weight: bold;
}

.billing-status-failed {
    color: #dc3545;
    font-weight: bold;
}

.billing-status-refunded {
    color: #6c757d;
    font-weight: bold;
}

.billing-status-default {
    color: #6c757d;
}

/* Gallery Component Styles */
.gallery-overlay-hidden {
    display: none;
}

.gallery-image-positioned {
    display: none;
}

/* Gallery Component - Dynamic positioning handled via inline styles (required for PHP-generated positions) */
/* These styles are intentionally left inline as they require dynamic PHP values */
.gallery-empty-placeholder {
    width: 150px;
    height: 150px;
    background: #fff;
    border: 0;
    display: block;
    line-height: 150px;
    text-align: center;
    color: #999;
}