/* am24 base.css — Phase E. Uses css/am24/tokens.css variables only. Owner: builder A. */

/* ---- base typography ---- */
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--am24-bg);
    color: var(--am24-text);
    font-family: var(--am24-font);
    font-size: var(--am24-fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body.home-page, body.home { background: var(--am24-bg); }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--am24-font);
    font-weight: var(--am24-fw-head);
    color: var(--am24-text);
    line-height: 1.25;
    letter-spacing: -.01em;
}
h1 { font-size: var(--am24-fs-h1); font-weight: var(--am24-fw-head); margin: 0 0 var(--am24-s2); }
h2 { font-size: var(--am24-fs-h2); }
h3 { font-size: var(--am24-fs-h3); }
::selection { background: var(--am24-accent); color: #fff; }
::-moz-selection { background: var(--am24-accent); color: #fff; }
input, select, textarea, button, option, .select2-container { font-family: var(--am24-font); }

/* ---- links ---- */
a:link, a:visited, .link { color: var(--am24-accent); }
a:hover, a:active, .link:hover { color: var(--am24-accent-hover); }
a.active { color: var(--am24-accent-hover); }
a.color-light { color: rgba(255, 255, 255, .9); }
a.color-light:hover { color: #fff; }
.red, .close { color: var(--am24-danger) !important; }
.red:hover, .close:hover { color: var(--am24-danger) !important; opacity: .85; }
.notice, .notice_message { color: var(--am24-danger); }
.date { color: var(--am24-muted); }

/* ---- inputs ---- */
input[type=text], input[type=search], input[type=password], input[type=number],
input[type=email], input[type=tel], input[type=url],
select, span.pills, .select2-selection--single, .select2-selection--multiple, .select2-dropdown {
    height: var(--am24-s6);
    border: 1px solid var(--am24-border);
    border-radius: var(--am24-radius-input);
    font-size: var(--am24-fs-base);
    color: var(--am24-text);
    background-color: var(--am24-surface);
}
textarea {
    border: 1px solid var(--am24-border);
    border-radius: var(--am24-radius-input);
    font-size: var(--am24-fs-base);
    color: var(--am24-text);
    background: var(--am24-surface);
    padding: 12px 14px;
}
input[type=text], input[type=search], input[type=password], input[type=number],
input[type=email], input[type=tel], input[type=url] { padding: 0 14px; }
select { background-position: right 16px center; padding-left: 14px; }
input:hover, select:hover, textarea:hover, .select2-selection--single:hover { border-color: var(--am24-muted); }
input:focus, textarea:focus {
    border-color: var(--am24-accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47, 107, 63, .18);
}
select:focus, .select2-selection--single:focus, .select2-container--open .select2-selection--single {
    background-color: var(--am24-surface);
    border-color: var(--am24-accent);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(47, 107, 63, .18);
}
input::placeholder, textarea::placeholder { color: #8A909B; opacity: 1; }
input[type=text].error, input[type=password].error, input[type=number].error, textarea.error,
select.error, select.error + .select2-container .select2-selection--single {
    background-color: #FEF3F2;
    border-color: var(--am24-danger);
    color: var(--am24-text);
}
textarea.error, div.field.error label, select.error + .select2-container .select2-selection--single { color: var(--am24-danger); }
div.field.error label { color: var(--am24-danger); }
select.disabled, select[disabled=disabled], input[disabled=disabled],
.select2-container--disabled .select2-selection--single {
    background-color: var(--am24-surface-2);
    color: var(--am24-muted);
}

/* ---- checkbox / radio (replace Nova's orange sprite) ---- */
input[type=checkbox]:not(.default) + label > span,
input[type=radio]:not(.default) + label > span {
    background: var(--am24-surface);
    border: 1.5px solid #B9BEC7;
    border-radius: 6px;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    box-sizing: border-box;
    transition: background .15s, border-color .15s;
}
input[type=radio]:not(.default) + label > span { border-radius: 50%; }
input[type=checkbox]:not(.default):hover + label > span,
input[type=radio]:not(.default):hover + label > span { border-color: var(--am24-accent); background-position: 0 0; }
input[type=checkbox]:not(.default):checked + label > span {
    background: var(--am24-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    border-color: var(--am24-accent);
}
input[type=radio]:not(.default):checked + label > span {
    background: radial-gradient(circle, var(--am24-accent) 0 4px, var(--am24-surface) 5px);
    border-color: var(--am24-accent);
}
input[type=radio].multiline + label, input[type=checkbox].multiline + label { color: var(--am24-accent); }
input[type=radio].multiline:checked + label, input[type=checkbox].multiline:checked + label { color: var(--am24-text); }
input[type=checkbox]:not(.default):focus-visible + label > span,
input[type=radio]:not(.default):focus-visible + label > span { box-shadow: 0 0 0 3px rgba(47, 107, 63, .3); }

/* ---- buttons: green pill ---- */
input[type=submit], input[type=button], .file-input span, a.button, .btn, button.button {
    background: var(--am24-accent);
    color: #fff !important;
    height: var(--am24-s6);
    min-height: var(--am24-tap);
    padding: 0 var(--am24-s3);
    border: 0;
    border-radius: var(--am24-radius-pill);
    font-family: var(--am24-font);
    font-size: var(--am24-fs-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: background .15s ease;
}
input[type=submit]:hover, input[type=button]:hover, a.button:not(.disabled):hover,
.file-input span:hover, .btn:hover, button.button:hover {
    background: var(--am24-accent-hover);
    color: #fff;
}
a.button { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
input[type=submit]:focus-visible, input[type=button]:focus-visible, a.button:focus-visible, .btn:focus-visible,
a:focus-visible, button:focus-visible {
    outline: 3px solid rgba(47, 107, 63, .35);
    outline-offset: 2px;
}
a.button.disabled, input[type=submit][disabled=disabled], input[type=button][disabled=disabled],
input[type=submit].disabled, input[type=button].disabled {
    background: #C9CDD3 !important;
    color: #fff !important;
}
input[type=submit].low, input[type=button].low, a.button.low {
    height: 32px; min-height: 32px; line-height: 30px; font-size: var(--am24-fs-xs); padding: 0 var(--am24-s2);
}
.button.warning:not(.disabled) { background: var(--am24-danger); }
.button.warning:not(.disabled):hover { background: #912018 !important; }
.h1-nav nav > a.post_ad { background: var(--am24-accent); }
.h1-nav nav > a.post_ad:hover { background: var(--am24-accent-hover); }
.menu .add-property span { background: var(--am24-accent); }
.menu .add-property span:after, .menu .add-property span:before { background: #fff; }

/* ---- tabs ---- */
ul.tabs { border-bottom: 1px solid var(--am24-border); }
ul.tabs:not(.tabs-hash) > li, ul.tabs.tabs-hash > li > a {
    color: var(--am24-accent);
    text-transform: none;
    font-weight: 600;
    font-size: var(--am24-fs-sm);
}
ul.tabs:not(.tabs-hash) > li:hover, ul.tabs.tabs-hash > li a:hover { color: var(--am24-accent-hover); }
ul.tabs:not(.tabs-hash) > li.active, ul.tabs > li.active > a {
    background: var(--am24-accent);
    color: #fff !important;
    font-weight: 600;
}
ul.tabs > li.more > span:last-child, ul.tabs > li.overflowed > ul { border-color: var(--am24-border); }
ul.tabs > li.more.opened { box-shadow: inset 0 1px 0 var(--am24-border), inset 1px 0 0 var(--am24-border), inset -1px 0 0 var(--am24-border); }

/* ---- Nova brand colours remapped (nova-color-selectors.txt) ---- */
.scrollbar::-webkit-scrollbar-thumb { background: rgba(47, 107, 63, .4); }
.scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(47, 107, 63, .8); }
.grid_navbar .buttons > div > div > span { border: 2px var(--am24-accent) solid; }
article.featured div.picture > span:after {
    box-shadow: 0 0 0 2px var(--am24-accent) !important;
    background-color: var(--am24-accent) !important;
}
article.featured div.picture > span { border-color: var(--am24-accent) !important; }
article.featured div.picture > div.label {
    background: var(--am24-accent);
    border-radius: var(--am24-radius-pill);
    height: 22px; line-height: 22px; padding: 0 10px;
    font-size: 11px;
}
article.featured .card-info { background: var(--am24-surface); }
div.banner-space { box-shadow: inset 0 0 0 1px var(--am24-border); color: var(--am24-muted); }
img.qtip { background-color: rgba(47, 107, 63, .7); }
img.qtip:hover { background-color: var(--am24-accent); }
.statuses .expired, .statuses .paid { color: var(--am24-accent); }
.statuses .expired:before { background: var(--am24-accent); }
.statuses .unpaid { color: var(--am24-danger); }
span.mobile-menu-header svg, .mobile-menu-header svg { fill: var(--am24-accent); }

/* ---- SVG icons Nova fills with brown/orange ---- */
svg.details-icon, svg[class*="icon"] { --am24-svg: var(--am24-accent); }
.footer-data .icons a svg { fill: var(--am24-on-forest); }

/* ---- one container: 1200px, side padding = gutter ---- */
.point1, .inside-container.point1, #header-banner.point1 {
    width: 100%;
    max-width: var(--am24-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--am24-gutter);
    padding-right: var(--am24-gutter);
    box-sizing: border-box;
}
body .am24-wrap { padding-left: var(--am24-gutter); padding-right: var(--am24-gutter); }
html, body { max-width: 100%; overflow-x: clip; }
body > div.main-wrapper { max-width: 100%; }

/* ---- breadcrumbs ---- */
#bread_crumbs { font-size: var(--am24-fs-xs); margin: 0; }
#bread_crumbs > ul.point1, #bread_crumbs ul.point1 { max-width: var(--am24-container); margin-left: auto; margin-right: auto; padding-left: var(--am24-gutter); padding-right: var(--am24-gutter); box-sizing: border-box; }
#bread_crumbs > ul { padding-top: 16px; padding-bottom: 8px; }
#bread_crumbs > ul > * { padding-top: 0; color: var(--am24-muted); }
#bread_crumbs > ul a { color: var(--am24-muted); }
#bread_crumbs > ul a:hover { color: var(--am24-accent); text-decoration: underline; }
#bread_crumbs > ul > ol { color: var(--am24-text); display: inline-block; list-style: none; }
#bread_crumbs > ul > *:not(:last-child):after {
    content: '\203A';
    padding: 0 8px;
    color: #9AA0AB;
    font-size: 14px;
}
#bread_crumbs > ul > ol { max-width: 50ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 991px) {
    #bread_crumbs > ul { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #bread_crumbs > ul::-webkit-scrollbar { display: none; }
    #bread_crumbs > ul > ol { max-width: 40vw; vertical-align: top; }
}

/* ---- header pills: shared alignment ---- */
.am24-header #user-navbar > .default > span, .am24-header #user-navbar > span.default > span {
    overflow: visible; max-width: none; line-height: 1; padding: 0; margin: 0; display: block; text-overflow: clip;
}

/* ---- mobile bottom tab bar (Nova mb-menu; its CSS loads after ours, so !important + body prefix) ---- */
@media (max-width: 767px) {
    body .mb-menu, body .mb-menu.mb-menu_no-captions {
        --footer-background-color: var(--am24-surface);
        --footer-text-color: var(--am24-muted);
        --button-color: var(--am24-accent);
        --body-background-color: var(--am24-border);
        background: var(--am24-surface) !important;
        border-top: 1px solid var(--am24-border) !important;
        box-shadow: none !important;
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
        box-sizing: border-box;
    }
    body .mb-menu:not(.mb-menu_visible) { bottom: calc(-56px - env(safe-area-inset-bottom, 0px)); }
    body .mb-menu .mb-menu__item { min-height: var(--am24-tap); }
    body .mb-menu .mb-menu__name { color: var(--am24-muted) !important; font-size: 11px; font-weight: 500; }
    body .mb-menu .mb-menu__icon { stroke: var(--am24-muted) !important; fill: none !important; }
    body .mb-menu .mb-menu__item:hover .mb-menu__name { color: var(--am24-accent-hover) !important; }
    body .mb-menu .mb-menu__item:hover .mb-menu__icon { stroke: var(--am24-accent-hover) !important; }
    body .mb-menu .mb-menu__item-active .mb-menu__name { color: var(--am24-accent) !important; }
    body .mb-menu .mb-menu__item-active .mb-menu__icon,
    body .mb-menu .mb-menu__item-active svg { stroke: var(--am24-accent) !important; }
    body .mb-menu .mb-menu__counter { background: var(--am24-danger) !important; box-shadow: 0 0 0 2px var(--am24-surface) !important; }
    body .mb-menu-crossbar { display: none !important; }
    body { padding-bottom: 0; }
}

/* ---- Nova brown/orange safety net (round 2) ---- */
.grid-icon-fill, .details-icon-fill, svg.grid-icon-fill *, svg.details-icon-fill * { fill: var(--am24-accent) !important; }
.header-usernav-icon-fill { fill: var(--am24-text); }
/* sprite chevrons / stars / other gallery.png glyphs: hue-rotate leaves greys and whites alone */
span.arrow, .grid_navbar .sorting span.arrow, div.fieldset > header > span.arrow,
#controller_area div.fieldset > header > span.arrow, .rating-star, span.stars, .stars > span {
    filter: hue-rotate(105deg) saturate(.75);
}
.sortable-placeholder:before, .sortable > *:before { background: var(--am24-accent); }
.upload-files > div span.item > .progress > .progress-bar { background: var(--am24-accent); }
.upload-zone > span mark { color: var(--am24-accent); }
.loading-spinner { background-color: var(--am24-accent); }
.menu .add-property { color: var(--am24-accent) !important; }
/* rating plugin stars (sprite backgrounds on li) */
ul.listing_rating_ul, ul.listing_rating_ul li, .listing_rating_ul li, [class*="rating"] li[title*="stars"] {
    filter: hue-rotate(105deg) saturate(.8);
}