/*
    THE CORNER LADDER, AT :root SO IT EXISTS EVERYWHERE.

    These three were written inside `.login-popup` and `.login-popup-overlay`
    (further down this file), and a handful of rules OUTSIDE those two elements
    referenced them anyway. A custom property that does not exist in scope does
    not fall back to something sensible - the whole declaration becomes invalid
    at computed-value time and the property takes its INITIAL value, which for
    border-radius is 0. So those controls rendered square, in one place and not
    the other, with nothing in the stylesheet looking wrong.

    The controls it actually cost: the sign-in-link email box, its send button,
    the social buttons and the panel's footer link - all of which match inside
    `.login-modal-content` (the footer's #login_modal_source, cloned into the
    modal) as well as inside `.login-popup`. Same markup, same rules, two
    different sets of corners depending on which container it was in.

    Here rather than in light.css/dark.css: a corner is not a colour, and one
    definition that both themes read cannot drift into two.

    The values are the ones the login popup already used, unchanged - this
    makes the reference resolve, it does not restyle anything that worked.
*/
:root {
    --noiz-radius:    10px;
    --noiz-radius-lg: 16px;
    --noiz-radius-sm: 4px;
}
.scrollbar {
  overflow-y: auto;
  overflow-x: hidden; }
  .scrollbar_horizontal {
    overflow-y: hidden;
    overflow-x: auto; }
    .scrollbar_horizontal:not(.scrollbar_no-padding) {
      padding-right: 0;
      padding-bottom: 10px; }
  .scrollbar::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0.1);
    width: 2px;
    height: 2px;
    border-radius: 2px; }
  .scrollbar::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(127, 54, 193, 0.4); }
  .scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(127, 54, 193, 0.8); }

.table-cell {
  display: flex; }
  .table-cell.wide-field {
    flex-direction: column; }
  .table-cell:not(.small) > * {
    line-height: 26px; }
  .table-cell > .name {
    color: var(--info-field-color);
    font-size: 1em;
    word-wrap: break-word; }
    .table-cell > .name:after {
      content: ':'; }
    .table-cell > .name > div {
      display: inline; }
  .table-cell:not(.wide-field) > .name {
    min-width: 35%;
    flex-basis: 35%; }
    @media screen and (min-width: 768px) {
      .table-cell:not(.wide-field) > .name {
        min-width: 160px;
        flex-basis: 160px; } }
    @media screen and (min-width: 992px) and (max-width: 1199px) {
      .table-cell:not(.wide-field) > .name {
        min-width: 120px;
        flex-basis: 120px; } }
  .table-cell.small {
    line-height: 22px; }
    @media screen and (min-width: 768px) {
      .table-cell.small:not(.wide-field) > .name {
        min-width: 110px;
        flex-basis: 110px; } }
    @media screen and (min-width: 992px) and (max-width: 1199px) {
      .table-cell.small:not(.wide-field) > .name {
        min-width: 85px;
        flex-basis: 85px; } }
  .table-cell > .value {
    font-size: 1em;
    word-wrap: break-word;
    overflow: hidden; }
  .table-cell .checkboxes > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .table-cell .checkboxes > *:not(.active) {
      color: #9e9e9e;
      text-decoration: line-through; }
    .table-cell .checkboxes > * svg {
      width: 17px;
      height: 12px; }
    .table-cell .checkboxes > *:not(.active) svg {
      visibility: hidden; }
    .table-cell .checkboxes > *.active svg {
      fill: red; }

.listing-fields > div:not(.no-group) div.body > div > .table-cell.textarea:only-child > .name {
  display: none; }

.font-size-xs {
    font-size: 0.813em;
}
.font-weight-semibold {
    font-weight: 400;
}
.icon-opacity .icon-opacity__icon {
    transition: filter 0.3s ease;
}
.icon-opacity:hover .icon-opacity__icon {
    filter: brightness(1.2);
}
.shrink-fix {
    min-width: 0;
}
.show {
    display: block !important;
}

/*** COMMON STYLES ***/
body,
html {
    height: 100%;
}
body {
    --duration: 0.5s;
    --timing: ease;

    transition: background var(--duration) var(--timing);
    margin: 0px auto;
    background: var(--body-background-color);
    font-size: 16px;
    color: var(--body-font-color);
    font-family: "Onest", sans-serif;
    font-weight: 300;
}

input,
select,
option,
p,
form,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
td,
img,
table {
    margin: 0;
    padding: 0;
    border: 0;
}
::selection {
    background: #707070;
    color: white;
}
::-moz-selection {
    background: #707070;
    color: white;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

ul li {
    list-style: none;
}

body.static-page section#controller_area ul li,
section.side_block.html-block ul li,
section.content_block.html-block ul li {
    list-style: inherit;
}
body.static-page section#controller_area ul, 
body.static-page section#controller_area ol,
section.side_block.html-block ul, 
section.side_block.html-block ol,
section.content_block.html-block ul, 
section.content_block.html-block ol {
    padding: 10px 0 10px 40px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table.fixed {
    table-layout: fixed;
}
img {
    vertical-align: middle;
}
label {
    user-select: none;
}
b,
strong {
    font-weight: 600;
}

.grid-icon-fill,
.details-icon-fill {
    fill: var(--listing-card-icon-color) !important;
}
.header-usernav-icon-fill,
.header-contacts svg {
    fill: var(--header-icon-fill) !important;
}

.hide {
    display: none;
}
.hidden {
    visibility: hidden;
}
.invisble {
    opacity: 0;
}
.clear {
    clear: both;
}
.fleft {
    float: left;
}
.fright {
    float: right;
}
.ralign {
    text-align: right !important;
}
.lalign {
    text-align: left !important;
}
.align-center {
    text-align: center;
}
.relative {
    position: relative;
}
.nowrap {
    white-space: nowrap;
}

/* links */
a:link,
a:visited,
.link {
    color: var(--link-color);
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
}
a:hover,
a:active,
a.active,
.link:hover {
    color: var(--link-color-hover);
}
a.color-gray {
    color: #111;
}
a.color-gray:hover {
    color: #666;
}
/* links end */

/* fonts */
.link-large {
    font-size: 1.143em !important;
    font-weight: 400 !important;
}
.tabs ~ .text-notice {
    background: var(--content-background-color);
    padding: 30px;
    transition: background var(--duration) var(--timing);
}
.close,
.red {
    color: #e44848 !important;
}
.close:hover,
.red:hover {
    color: #ff5d5d !important;
}
.red.margin {
    padding-left: 10px !important;
    cursor: pointer;
}
.date {
    font-size: 0.857em;
    color: var(--info-field-color);
}
.notice,
.notice_message {
    color: #c95265;
    font-size: 0.929em;
}
.notice_message {
    padding-top: 5px;
}
/* fonts end */

/* h1 */
h1 {
    font-size: 2.15em;
    font-weight: normal;
    padding: 0;
    font-weight: 600;
    margin-bottom: 30px;
    overflow: hidden; /* to allow two items inline */
}
h1.text-center {
    margin: 0 0 28px 0;
}

.h1-nav h1 {
    overflow: hidden;
    margin-top: 0;
}
.h1-nav nav {
    float: right;
    vertical-align: top;
}
.h1-nav nav > a.icon {
    display: none !important;
}
/* h1 end */

/* global style items */
.hlight {
    background: var(--content-background-color);
}
.hborder {
    border-color: var(--highlight-border-color);
}
/* global style items end */

/* inputs */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select,
span.pills,
.select2-selection--single,
.select2-selection--multiple,
.select2-dropdown {
    height: 40px;
    border: none;
    background-color: var(--form-background-color);
    border: 2px solid transparent;
    color: var(--body-font-color);
    font-size: 0.9375em;
    font-family: "Onest", sans-serif;
    padding: 0 10px 0;
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
}
input[type="text"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover,
.select2-selection--single:hover,
.select2-selection--multiple:hover {
    border-color: var(--form-field-line-color-hover);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
span.pills:focus,
.select2-selection--single:focus,
.select2-selection--multiple:focus,
.select2-dropdown:focus {
    border-color: var(--form-field-line-color-focus);
}
.auth input[type="text"],
.auth input[type="password"] {
    background: var(--form-background-color);
}
select:focus,
.select2-container:not(.select2-container--disabled) .select2-selection--single:focus,
.select2-container--open .select2-selection--single {
    border-color: var(--form-field-line-color-focus);
}
textarea {
    line-height: normal;
    height: auto;
    padding: 8px 10px 8px;
    width: 100%;
}
select,
.select2-selection--single {
    position: relative;
    background: var(--dropdown-arrow) right center no-repeat var(--form-background-color);
    background-size: 18px 5px;
    padding-right: 28px;
    transition: background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
}
select:focus {
    background-color: var(--form-background-color);
}
select.disabled,
select[disabled="disabled"],
input[disabled="disabled"],
.select2-container--disabled .select2-selection--single {
    cursor: not-allowed;
    color: #8a8a8a;
    background-color: var(--form-disabled-background-color);
    border: 0;
    background-image: none;
    box-shadow: inset 0 0 0 2px var(--form-disabled-border-color);
}
.select2-dropdown {
    background: var(--top-navigation-background-color);
    border-color: var(--form-field-line-color-focus);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"] {
    -moz-appearance: textfield;
    margin: 0;
}
option {
    padding: 2px 0;
}
input[type="submit"],
input[type="button"],
.file-input span,
a.button,
.btn {
    background-color: var(--button-color);
    height: 40px;
    padding: 0 20px 0;
    color: var(--button-text-color);
    font-size: 0.9375em;
    font-family: "Onest", sans-serif;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 8px;
    -webkit-font-smoothing: antialiased;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
input[type="submit"]:hover,
input[type="button"]:hover,
.file-input span:hover,
a.button:not(.default):not(.disabled):hover,
.btn:hover {
    background-color: var(--button-hover-color);
}
input[type="submit"]:active,
input[type="button"]:active,
a.button:not(.disabled):active,
.file-input span:active,
.btn:active {
    background-color: var(--button-color);
    box-shadow: 0px 8px 16px -4px var(--button-hover-color);
}

input[type="button"].cancel:hover,
button.cancel:hover {
    box-shadow: 0px 8px 16px -4px rgba(171, 171, 171, 0.65);
    border: none !important;
}
input[type="button"].cancel:active,
button.cancel:active {
    box-shadow: inset 0 0 0 2px #ababab, inset 0 0 0 3px var(--content-background-color);
}

a.button.disabled,
input[type="submit"][disabled="disabled"],
input[type="button"][disabled="disabled"],
input[type="submit"].disabled,
input[type="button"].disabled {
    cursor: not-allowed;
    background-color: #b1b1b1 !important;
    color: #e6e6e6;
    box-shadow: none;
}
input[type="submit"].low,
input[type="button"].low,
a.button.low {
    height: 28px;
    line-height: 28px;
    font-size: 0.75em;
    padding: 0 10px 0px;
    white-space: nowrap;
}
.side_block .file-input span:hover,
.side_block .btn:hover {
    background-color: transparent;
    border: 2px solid var(--button-hover-color);
    box-shadow: 0 4px 10px rgba(17, 17, 17, 0.13);
}
.side_block .file-input span:active,
a.button:active,
.side_block .btn:active {
    border: 2px solid var(--button-color);
    box-shadow: inset 0 0 0 1px var(--content-background-color), inset 0 0 0 2px var(--button-color);
}

a.button.low {
    height: 32px;
}
.button.warning:not(.disabled) {
    background-color: #c51c1c;
    border: none;
    color: #fff;
}
.button.warning:not(.disabled):hover {
    background-color: #d62c2c !important;
    box-shadow: 0px 8px 16px -4px rgba(214, 44, 44, 0.65);
    border: none !important;
}

.button.warning:not(.disabled):active {
    box-shadow: inset 0 0 0 2px #c51c1c, inset 0 0 0 3px var(--content-background-color);
}

.noiz-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s ease;
    vertical-align: middle;
    margin: 0;
}
.noiz-checkbox:hover {
    border-color: #999;
}
.noiz-checkbox:checked {
    background: #222;
    border-color: #222;
}
.noiz-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.noiz-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Checkbox label wrapper */
.noiz-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #333;
    line-height: 1.4;
}
.noiz-checkbox-label input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s ease;
    margin: 0;
}
.noiz-checkbox-label input[type="checkbox"]:hover {
    border-color: #999;
}
.noiz-checkbox-label input[type="checkbox"]:checked {
    background: #222;
    border-color: #222;
}
.noiz-checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:not(.default),
input[type="radio"]:not(.default) {
    opacity: 0;
    position: absolute;
    width: 22px;
    height: 22px;
}
input[type="checkbox"]:not(.default) + label,
input[type="radio"]:not(.default) + label {
    max-width: 100%;
    padding-top: 2px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    font-size: 0.938em;
    display: inline-block;
}
input[type="checkbox"]:not(.default) + label > span,
input[type="radio"]:not(.default) + label > span {
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: inline-block;
    background: #fff;
    vertical-align: top;
    margin: -2px 5px 0 0;
    border: 2px solid #ccc;
    position: relative;
    border-radius: 4px;
    transition: all 0.15s ease;
}
input[type="checkbox"]:not(.default):hover + label > span,
input[type="radio"]:not(.default):hover + label > span {
    border-color: #999;
}
input[type="checkbox"]:not(.default):active + label > span,
input[type="radio"]:not(.default):active + label > span {
    border-color: #666;
}
input[type="radio"]:not(.default) + label > span {
    border-radius: 50%;
}
input[type="checkbox"]:not(.default) + label > span:after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="radio"]:not(.default) + label > span:before {
    content: "";
    display: none;
    vertical-align: top;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin: 3px;
}
input[type="checkbox"]:not(.default):checked + label > span,
input[type="radio"]:not(.default):checked + label > span {
    background-color: #222;
    border-color: #222;
}
input[type="checkbox"]:not(.default):checked:hover + label > span,
input[type="radio"]:not(.default):checked:hover + label > span {
    background-color: #333;
    border-color: #333;
}
input[type="radio"]:not(.default):checked + label > span:before {
    display: inline-block;
}
input[type="checkbox"]:not(.default):checked + label > span:after {
    display: block;
}

input[type="radio"].multiline + label,
input[type="checkbox"].multiline + label {
    height: auto;
    text-align: left;
    color: var(--link-color);
    font-size: 0.929em;
}
input[type="radio"].multiline:checked + label,
input[type="checkbox"].multiline:checked + label {
    color: var(--body-font-color);
}
input[type="checkbox"].multiline:not(.default) + label > span,
input[type="radio"].multiline:not(.default) + label > span {
    display: block;
    margin: 0 auto 5px;
}
input[type="radio"][disabled="disabled"] + label > span {
    opacity: 0.5;
}
input[type="radio"][disabled="disabled"] + label {
    color: #888888;
}

input[type="checkbox"].inline + label {
    display: inline;
}
input[type="checkbox"].inline + label > span {
    margin: 0;
}

input.search,
input.search:hover {
    background-image: url("../img/gallery.png");
    background-position: 12px -430px;
    width: 0;
}

/* Switcher */
label.switcher input[type="checkbox"] {
    display: none;
}
label.switcher > input[type="checkbox"] + span:not(.status) {
    margin-top: -1px;
    display: inline-block;
    width: 34px;
    height: 18px;
    background: #969696;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.4s, opacity 0.4s;
    opacity: 0.7;
}
label.switcher > input[type="checkbox"] + span:not(.status):after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: var(--form-background-color);
    transition: transform 0.4s;
    z-index: 2;
}
label.switcher > input[type="checkbox"] + span:not(.status):before {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: url(../img/gallery.png) -8px -699px no-repeat;
    transition: transform 0.4s;
    z-index: 3;
}
label.switcher:hover > input[type="checkbox"] + span:not(.status) {
    opacity: 1;
}
label.switcher > input[type="checkbox"]:checked + span:not(.status) {
    background: #52b600;
    transition: background-color 0.4s;
}
label.switcher > input[type="checkbox"]:checked + span:not(.status):after {
    transform: translateX(-16px);
}
label.switcher > input[type="checkbox"]:checked + span:not(.status):before {
    transform: translateX(-16px);
    background-position: 0 -699px;
}
label.switcher > input[type="checkbox"] ~ .status {
    margin-left: 10px;
}
label.switcher > input[type="checkbox"] ~ .status:before {
    content: attr(data-enabled);
}
label.switcher > input[type="checkbox"]:checked ~ .status:before {
    content: attr(data-disabled);
}

::-webkit-input-placeholder {
    color: var(--placeholder-color);
    font-weight: 300;
}
:-moz-placeholder {
    color: var(--placeholder-color);
    font-weight: 300;
}
::-moz-placeholder {
    color: var(--placeholder-color);
    font-weight: 300;
}
:-ms-input-placeholder {
    color: var(--placeholder-color);
    font-weight: 300;
}
*:focus {
    outline: none;
}

input[type="text"].error,
input[type="password"].error,
textarea.error {
    background: var(--form-error-background-color);
    color: var(--form-error-text-color);
}
div.field.error label {
    color: var(--form-error-text-color);
}
select.error,
select.error + .select2-container .select2-selection--single {
    background-color: var(--form-error-background-color);
    color: var(--form-error-text-color);
}
.image-field-preview {
    margin-bottom: 10px;
}
.image-field-preview > div.relative {
    width: 100%;
}
.file-input {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}
.file-input input.file {
    position: absolute;
    right: 0;
    height: 40px;
    opacity: 0;
}
.file-input input.file-name {
    width: 200px;
    position: relative;
}
.file-input span {
    display: inline-block;
    vertical-align: top;
    line-height: 40px;
    margin-left: 3px;
}
.file-input + em {
    margin: 0 10px;
}

span.pills {
    white-space: nowrap;
    display: flex;
    padding: 0;
    justify-content: space-between;
    border: 0;
    overflow: hidden;
}
span.pills > label > span {
    display: none !important;
}
span.pills > label {
    padding: 0 15px !important;
    height: 40px !important;
    line-height: 40px;
    display: inline-block !important;
    text-align: center;
    transition: border-color var(--duration) var(--timing);
}
span.pills > label:last-child {
    border: 0;
}
span.pills input[type="radio"]:checked + label {
    background: var(--form-checked-background-color);
    color: white;
    text-decoration: none;
    cursor: default;
    transition: background var(--duration) var(--timing);
}
span.pills > label:not(.active) {
    cursor: pointer;
    color: var(--body-font-color);
}
span.pills > label:not(.active):hover {
    text-decoration: none;
}
/* inputs end */
/*** COMMON STYLES END ***/

/*** PAGE HEADER ***/
div#logo img {
    vertical-align: initial;
    width: auto;
    height: 58px;
    object-fit: contain;
    filter: var(--logo-filter);
}

body.home-page header.page-header {
    background: var(--header-background-color);
    transition: background var(--duration) var(--timing);
}
header.page-header div.top-header {
    position: relative;
    height: 44px;
    z-index: 150;
    box-shadow: inset 0 -1px 0 var(--top-navigation-menu-border-color);
    transition: background var(--duration) var(--timing);
}
header.page-header > div.point1 {
    max-width: 100%;
}
header.page-header div.top-navigation {
    display: flex;
    margin: 0 auto;
}

body.home-page header.page-header.main-menu-hidden div.top-navigation {
    min-height: 112px;
    padding-top: 0;
    align-items: center;
}
header.page-header div.top-navigation > div > span.circle:first-of-type {
    margin-left: -12px;
}
header.page-header div.top-navigation .circle_opened > .content {
    background: var(--top-navigation-background-color);
    box-shadow: var(--menu-shadow);
}
/*
    Sized by what is in it, not by the one banner it used to hold.

    This was width:728px;height:90px - a hard leaderboard box - and the
    template wraps it in overflow-hidden. The moment a 300x250 went in it on
    a phone, 160 of its 250 pixels were cut off: the ad served, the ad was
    billed for, and the reader saw a 90px sliver of it.

    Worse than ugly. Viewability is measured by IntersectionObserver, and an
    ancestor clipping the element reduces the intersection rectangle - so the
    ratio topped out near 36% and could never cross the 50% needed to count a
    viewable impression. Those served ads were incapable of ever being seen,
    by arithmetic.

    max-width keeps the leaderboard from exceeding its own size on desktop;
    auto height lets a taller creative be whatever it is. Measured on the
    live mobile page: visible height 90px -> 250px, no sideways scroll.
*/
div#header-banner {
    width: auto;
    height: auto;
    max-width: 728px;
}
div#header-banner div.bmb10 {
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}
div#header-banner img {
    width: 100%;
}
div#header-banner div.banner {
    width: 100%;
}
div#header-banner tr.banner-here {
    border: 0;
}
div#header-banner tr.banner-here > td {
    box-shadow: inset 0 0 0 1px #aed0c4;
    color: #92bfaf;
    background: #d5f1e7;
}

div.banner-space {
    box-shadow: inset 0 0 0 1px var(--form-field-line-color);
    color: var(--form-field-line-color);
    font-size: 1.125em;
}
div.banner-in-grid + div.banner-in-grid {
    display: none;
}
div.banner-in-grid > div.banner-space {
    height: 90px !important;
    margin-bottom: 30px;
    max-width: 780px;
}
#listings.list div.banner-space,
#listings.list div.banner-in-grid > .content_block {
    margin-bottom: 8px;
}

/* top navigation */
.circle {
    position: relative;
    user-select: none;
    display: flex;
    height: 44px;
    z-index: 103;
}
.circle > .default {
    line-height: 36px;
    font-size: 0.750em;
    text-transform: capitalize;
    cursor: pointer;
    display: flex;
    padding: 0 10px;
    align-items: center;
    color: var(--top-navigation-selector-color);
}
.circle:not(#theme-switcher) > .default:after {
    content: "";
    width: 10px;
    height: 6px;
    margin-left: 10px;
    background: url("../img/dropdown-arrow.svg") 0 -4px no-repeat;
    background-size: 18px 13px;
    opacity: 1;
    filter: var(--top-navigation-arrow-filter);
}
.circle:not(.circle_opened):hover > .default:after {
    opacity: 0.7;
}
.circle_opened > .default:after {
    transform: scaleY(-1);
}
.circle_opened > .content {
    display: flex;
    padding: 10px 15px;
    min-width: 100%;
    position: absolute;
    z-index: 20;
    right: 0;
    top: 100%;
    margin-top: 4px;
    border-radius: 8px;
    background: var(--top-navigation-background-color);
}
.circle_content-padding > .content {
    padding: 15px;
}
.circle ul > li {
    height: 28px;
    line-height: 28px;
    white-space: nowrap;
    font-size: 0.875em;
}
#theme-switcher > .default > svg {
    width: 16px;
    height: 16px;
}

.user-navbar .circle > .default {
    text-transform: none;
}
#user-navbar.notify > .default:before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff5959;
    border-radius: 50%;
    right: 4px;
    top: 4px;
}
.user-navbar .circle > .default:after {
    display: none;
}
.user-navbar .circle > .default > svg {
    width: 24px;
    height: 24px;
    opacity: 1;
}
.user-navbar .circle:not(.circle_opened) > .default:hover > svg {
    opacity: 0.7;
}
.user-navbar .circle.logged-in > .default > span {
    display: inline-block;
    margin-left: 10px;
    white-space: nowrap;
}
.user-navbar .circle.logged-in.circle_opened > .default > span {
    color: white;
}
.user-navbar .circle_opened > .content {
    left: auto;
    right: 0;
}
#user-navbar.notify:not(.circle_opened) > span.default:before {
    animation: blinker 2s infinite ease-in-out;
}

@-webkit-keyframes blinker {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0.2;
    }
}
@keyframes blinker {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0.2;
    }
}

.user-navbar-container {
    padding: 10px 0;
    min-width: 240px;
    font-size: 0.875em;
}
.user-navbar-container input[name="username"],
.user-navbar-container input[name="password"] {
    filter: brightness(0.95);
}
.user-navbar-container input[name="username"] {
    padding-left: 15px;
}
.user-navbar-container input[name="username"]:focus {
    background-position: 10px -958px;
}
.user-navbar-container input[name="password"] {
    padding-left: 15px;
}
.user-navbar-container input[name="password"]:focus {
    background-position: 10px -1501px;
}
#user-navbar span.content.a-menu {
    padding: 0;
    min-width: 300px;
    flex-direction: column;
    margin-top: 4px;
    border-radius: 16px;
    overflow: hidden;
}

/* User Dropdown Menu - Header */
.udm-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid transparent;
}
.udm-profile-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 0;
    border-radius: 10px;
    transition: opacity 0.15s;
}
.udm-profile-link:hover {
    opacity: 0.85;
}
.udm-avatar .avatar-initials,
.udm-avatar .avatar-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 1.1rem;
}
.udm-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.udm-user-name {
    font-weight: 600;
    font-size: 0.938rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.udm-view-profile {
    font-size: 0.8125rem;
    font-weight: 400;
    transition: color 0.15s;
}

/* User Dropdown Menu - Credits Bar */
.udm-credits-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin: 10px 14px;
    border-radius: 12px;
}
.udm-credits-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.udm-credits-info svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.udm-credits-amount {
    font-weight: 700;
    font-size: 0.938rem;
    letter-spacing: -0.01em;
}
.udm-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.udm-buy-btn svg {
    width: 14px;
    height: 14px;
}

/* User Dropdown Menu - Menu Items */
#user-navbar span.content.a-menu .account-menu-content.udm-menu {
    padding: 6px 10px;
}
#user-navbar span.content.a-menu .udm-menu > li {
    height: auto;
    line-height: normal;
}
#user-navbar ul > li > a {
    white-space: nowrap;
}
.udm-menu.account-menu-content {
    list-style: none;
    margin: 0;
}
.udm-menu-item {
    margin: 1px 0;
}
.udm-menu-item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1;
    position: relative;
}
.udm-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.udm-menu-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    transition: stroke 0.15s;
}
.udm-menu-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.udm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 0.688rem;
    font-weight: 700;
    line-height: 1;
}

/* Divider and Logout */
.udm-menu-divider {
    height: 0;
    border: none;
    border-top: 1px solid transparent;
    margin: 4px 10px;
    list-style: none;
}
.udm-menu-logout {
    margin: 1px 0;
}
.udm-menu-logout a.logout {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1;
    transition: background 0.15s;
    text-decoration: none;
}

#user-navbar a.counter,
.account-menu-content a.counter {
    color: #fb6a5c;
    padding: 0;
    display: inline-block;
    line-height: initial;
}

.menu a {
    color: var(--body-font-color);
    font-size: 0.9375em;
    line-height: 26px;
    opacity: 1;
}
.menu .menu-content a:not(.btn):hover {
    opacity: 0.7;
}
.mobile-menu .menu-content a.active {
    color: var(--form-field-line-color);
}
/* top navigation end */

/* smart search */
/*@media screen and (max-width: 767px) {
    .smart-search__form {
        margin-top: 7px;
    }
}*/
.smart-search_opened .smart-search__form {
    position: relative;
    z-index: 111;
}
.smart-search_opened .smart-search__input {
    padding-right: 40px
}
.smart-search__close {
    display: flex;
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 112;
    top: 0;
    right: 0;
    cursor: pointer;
    opacity: 0.7;
}
.smart-search__close:hover {
    opacity: 1;
}
.smart-search__close svg {
    width: 8px;
    height: 8px;
}
.smart-search:not(.smart-search_opened) .smart-search__results-wrapper,
.smart-search:not(.smart-search_opened) .smart-search__close {
    display: none;
}
.smart-search__results-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    background: var(--smart-search-cont-bg-color);
    border-radius: 12px;
    box-shadow: 0px 47px 80px rgba(17, 17, 17, 0.2), 0px 9.60239px 28.7201px rgba(17, 17, 17, 0.1), 0px 4.5859px 17.3649px rgba(17, 17, 17, 0.1);
    padding: 12px;
    margin: -12px;
    z-index: 110;
}
.smart-search__results-cont {
    margin-top: 52px;
}
.smart-search__results-item {
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--body-font-color) !important;
    overflow: hidden;
    height: 40px;
}
.smart-search__results-item:hover,
.smart-search__results-item.smart-search__results-item_active {
    background: var(--smart-search-item-bg-color-hover);
}
.smart-search__results-item-icon_keyword {
    height: 22px;
    width: 22px;
    margin-right: 12px;
    stroke: var(--smart-search-icon-stroke);
    stroke-width: 2px;
}
.smart-search__results-item-icon_category {
    width: 23px;
    height: 20px;
    margin-right: 10px;
    fill: var(--smart-search-icon-stroke);
}
.smart-search__results-item-text {
    flex-wrap: wrap;
    justify-content: normal;
    height: 40px;
    align-content: end;
}
.smart-search__results-item-text > span {
    font-size: 0.9375em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-content: center;
    height: 40px;
    line-height: 39px;
}
.smart-search__results-item-text > span:not(:last-of-type):after {
    content: '→';
    color: var(--smart-search-icon-stroke);
    padding: 0 8px;
    font-size: 0.9375em;
}
.smart-search__results-item_keyword + .smart-search__results-item_category {
    margin-top: 20px;
}
.smart-search__results-item_keyword + .smart-search__results-item_category:before {
    content: '';
    height: 1px;
    left: 26px;
    right: 26px;
    position: absolute;
    margin-top: -59px;
    background: var(--smart-search-item-bg-color-hover);
}

/* Search context items */
.smart-search__results-item_context {
    background: white;
    margin: 4px 8px;
    border-radius: 8px;
}
.smart-search__results-item_context:first-child {
    margin-top: 8px;
}
.smart-search__results-item_context:hover,
.smart-search__results-item_context.smart-search__results-item_active {
    background: var(--smart-search-item-bg-color-hover);
}
.smart-search__results-item_context .smart-search__results-item-text > span {
    font-weight: 400;
}
.smart-search__results-item_context .smart-search__results-item-text > span b {
    font-weight: 600;
}
.smart-search__divider {
    height: 1px;
    background: var(--smart-search-item-bg-color-hover);
    margin: 8px 14px;
}
/* smart search end */

/* category hamburger menu */
.category-menu__button {
    line-height: 40px;
    padding: 0 14px;
    -webkit-tap-highlight-color: transparent;
}
.category-menu__button-icon {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 26px;
    height: 26px;
    position: relative;
}
.category-menu__button-icon span {
    top: 12px;
}
.category-menu__button-icon span,
.category-menu__button-icon span::before,
.category-menu__button-icon span::after {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    width: 16px;
    height: 2px;
    background: var(--button-text-color);
    border-radius: 1px;
}
.category-menu__button-icon span::before {
    top: -5px;
    transition-property: top, transform;
}
.category-menu__button-icon span::after {
    bottom: -5px;
    transition-property: bottom, transform;
}
.category-menu__button-icon span::before,
.category-menu__button-icon span::after {
    transition-duration: 0.2s, 0.2s;
    transition-delay: 0.2s, 0s;
    transition-timing-function: ease;
}
.category-menu__button_opened .category-menu__button-icon span {
    background: none;
}
.category-menu__button_opened .category-menu__button-icon span::before {
    top: 0;
    transform: rotate(45deg);
}
.category-menu__button_opened .category-menu__button-icon span::after {
    bottom: 0;
    transform: rotate(-45deg);
}
.category-menu__button_opened .category-menu__button-icon span::before,
.category-menu__button_opened .category-menu__button-icon span::after {
    transition-delay: 0s, 0.2s;
}
/* category hamburger menu end */

/* category menu */
.category-menu__container {
    display: none;
    background: var(--content-background-color);
    box-shadow: 0 0 0 30px var(--content-background-color);
    border-radius: 12px;
    position: absolute;
    z-index: 110;
}
.category-menu__container.category-menu__container_opened {
    display: flex;
}
.category-menu__category-item {
    padding: 8px 12px;
    font-size: 0.9375em;
    border-radius: 8px;
    cursor: pointer;
}
.category-menu__category-item:hover {
    background: var(--category-menu-item-bg-color) !important;
}
.category-menu__category-item.category-menu__category-item_active {
    background: var(--category-menu-item-bg-color);
}
.category-menu__categories:hover .category-menu__category-item_active {
    background: none;
}
.category-menu__category-icon {
    width: 24px;
    height: 24px;
}
.category-menu__category-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--header-icon-fill)
}
.category-menu__category-arrow {
    width: 7px;
    height: 12px;
    fill: var(--icon-favorite-fill);
}
.category-menu__subcategories {
    padding: 0 16px 0 28px;
    max-height: calc(100vh - 300px);
    min-height: 300px;
}
.category-menu__subcategories-cont {
    column-count: 1;
    column-gap: 30px;
}
@media screen and (min-width: 768px) {
    .category-menu__categories {
        max-width: 226px;
        flex-basis: 226px;
        box-shadow: inset -1px 0 0 var(--category-menu-item-bg-color);
        padding-right: 12px;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .category-menu__subcategories-cont {
        column-count: 2;
    }
}
@media screen and (min-width: 992px) {
    .category-menu__subcategories-cont {
        column-count: 3;
    }
}
@media screen and (min-width: 1200px) {
    .category-menu__categories {
        max-width: 276px;
        flex-basis: 276px;
    }
    .circle .default svg + span {
        display: none !important;
    }
}
@media screen and (min-width: 1440px) {
    .category-menu__subcategories-cont {
        column-count: 4;
    }
    .circle .default svg + span {
        display: initial !important;
    }
}
.category-menu__subcategory-cont {
    break-inside: avoid;
    padding-bottom: 30px;
}
.category-menu__subcategory-parent-count,
.categories-box__parent-counter {
    color: white;
    background: var(--button-color);
    border-radius: 10px;
    font-size: 0.75em;
    padding: 2px 4px;
    line-height: 20px;
    vertical-align: bottom;
    white-space: nowrap;
}
.category-menu__subcategory-parent a {
    color: var(--body-font-color);
    font-size: 1.25em;
    font-weight: 400;
}
a.category-menu__subcategory-item {
    font-size: 0.9375em;
    color: var(--cat-link-color);
}
a.category-menu__subcategory-item:hover {
    color: var(--cat-link-color-hover);
}
.category-menu__container a.view-more-button {
    background: var(--category-menu-view-more-button-bg-color) !important;
}
@media screen and (max-width: 767px) {
    body.category-menu__body-overflow {
        overflow: hidden;
    }
    .category-menu__container {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: var(--top-navigation-background-color);
        z-index: 200;
        overflow: hidden;
    }
    .category-menu__categories {
        width: 100%;
        padding: 15px 10px;
    }
    .category-menu__header {
        min-height: 48px;
        box-shadow: inset 0 -1px 0 var(--category-menu-item-bg-color);
    }
    .category-menu__header-button {
        width: 48px;
        height: 100%;
        align-content: center;
    }
    .category-menu__back {
        visibility: hidden;
    }
    .category-menu__back svg {
        transform: scaleX(-1);
    }
    .category-menu__close svg {
        width: 12px;
        height: 12px;
        fill: var(--icon-favorite-fill);
    }
    .category-menu__subcategories {
        flex-shrink: 0 !important;
        padding: 0 !important;
        width: 100%;
        max-height: none;
    }
    .category-menu__subcategories-cont {
        padding: 15px;
    }
    .category-menu__body {
        transition: transform 0.3s ease;
        min-height: 0;
    }
    .category-menu__container_active .category-menu__body {
        transform: translateX(-100%);
    }
    .category-menu__container_active .category-menu__back {
        visibility: visible;
    }
}
/* category menu end */

/* category carouse */
:root {
    .categories-carousel {
        --f-carousel-slide-width: auto;
    }
    .categories-carousel.is-horizontal .f-button {
        --f-button-next-pos: -20px;
        --f-button-prev-pos: -20px;
        --f-button-width: 36px;
        --f-button-height: 36px;
        background: white;
        border-radius: 50%;
        opacity: 0.7;
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
    }
    .categories-carousel.is-horizontal .f-button:hover {
        opacity: 0.9;
    }
    .categories-carousel.is-horizontal .f-button path {
        d: path('m3 12 5-5M3 12h17M3 12l5 5');
        stroke: #7f36c1;
    }
    .categories-carousel.is-horizontal .f-button.is-next svg {
        transform: scaleX(-1);
    }
}
.categories-carousel__item {
    font-size: 0.938rem;
}
a.categories-carousel__item-link {
    width: 116px;
    color: var(--cat-link-color);
}
a.categories-carousel__item-link:hover {
    color: var(--cat-link-color-hover);
}
.categories-carousel__item-icon img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}
.categories-carousel__item-icon-bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
}
.categories-carousel__item-icon-bg:before {
    content: '';
    display: block;
    width: 88px;
    height: 88px;
    background: #4759D6;
    border-radius: 50%;
    margin: 0 auto;
}
.categories-carousel__item a:hover .categories-carousel__item-icon-bg:before {
    width: 100px;
    height: 100px;
    transition: all var(--duration) var(--timing);
}
@media screen and (max-width: 767px) {
    a.categories-carousel__item-link {
        width: 96px;
    }
    .categories-carousel__item {
        font-size: 0.875rem;
    }
    .categories-carousel__item-icon img,
    .categories-carousel__item a:hover .categories-carousel__item-icon-bg:before {
        width: 80px;
        height: 80px;
    }
    .categories-carousel__item-icon-bg:before {
        width: 68px;
        height: 68px;
    }
    .categories-carousel .f-carousel__nav {
        display: none;
    }
}
.categories-carousel__track > *:nth-child(2n) span:before {
    background: #D6476B;
}
.categories-carousel__track > *:nth-child(3n) span:before {
    background: #D6C447;
}
.categories-carousel__track > *:nth-child(4n) span:before {
    background: #47D6B2;
}
.categories-carousel__track > *:nth-child(5n) span:before {
    background: #D647D6;
}
.categories-carousel__track > *:nth-child(6n) span:before {
    background: #6A47D6;
}
.categories-carousel__track > *:nth-child(7n) span:before {
    background: #B2D647;
}
.categories-carousel__track > *:nth-child(8n) span:before {
    background: #47C4D6;
}
.categories-carousel__track > *:nth-child(9n) span:before {
    background: #D68E47;
}
/* category carouse end */

/* category box fix */
#main_container.hide-cat-icons .categories-box__subcategory .category-icon,
#main_container.hide-cat-icons .categories-box__parent .align-middle,
#main_container.hide-cat-icons .categories-box__parent .category-icon {
    display: none !important;
}
a.categories-box__subcategory-link {
    font-size: 0.938rem;
    color: var(--cat-link-color);
}
a.categories-box__subcategory-link:hover {
    color: var(--cat-link-color-hover);
}
.category-menu__subcategory-parent-count,
.categories-box__parent-counter {
    background: var(--noiz-light-orange);
    padding: 1px 4px;
}
.categories-box .banners-box {
    margin-bottom: 20px;
}
/* category box fix end */

/* view more link */
a.view-more-button {
    background: var(--content-background-color);
    padding: 0 12px;
    height: 40px;
    line-height: 38px;
    display: inline-block;
    color: var(--button-text-color);
    border-radius: 8px;
    font-size: 0.9375em;
    color: var(--body-font-color);
}
a.view-more-button:hover {
    filter: brightness(0.9);
}
a.view-more-button svg {
    stroke: var(--body-font-color);
    display: inline-block;
    width: 17px;
    height: 10px;
    margin-left: 10px;
}
/* view more link end */

/* home slider */
.carousel .carousel-item {
    height: 364px;
}
.carousel .carousel-item img {
    object-fit: cover;
    border-radius: 12px;
}
.carousel .carousel-indicators {
    bottom: 16px;
}
.carousel .carousel-indicators li {
    background: transparent;
    position: relative;
    text-indent: 0;
}
.carousel .carousel-indicators li:after {
    content: '';
    background: white;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 3px;
}
.carousel .carousel-caption {
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1070px;
    margin: 0 auto;
    left: 30px;
    right: 30px;
}
.carousel .carousel-slide-heading {
    font-size: 2.25em;
    line-height: 40px;
    letter-spacing: 1.2px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.2);
}
.carousel .carousel-slide-description {
    font-size: 1.25em;
    font-weight: 300;
    line-height: 28px;
    margin: 28px auto 0 auto;
    max-width: 600px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2);
}
.carousel .carousel-control-next-icon {
    transform: scaleX(-1);
}
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
}
.carousel .carousel-control-prev-icon:before,
.carousel .carousel-control-next-icon:before {
    content: '';
    display: block;
    width: 17px;
    height: 12px;
    background-image: url("../img/gallery-arrow.svg");
}
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
    opacity: 0.7;
    width: auto;
    margin: 0 -20px;
}
.carousel .carousel-indicators {
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    background: white;
    padding: 4px 2px;
    border-radius: 6px;
}
.carousel .carousel-indicators li {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #9f9f9f;
    border: 0;
    margin: 0 2px;
    transition: background,width var(--duration) var(--timing);
}
.carousel .carousel-indicators li:after {
    content: none;
}
.carousel .carousel-indicators li.active {
    width: 24px;
    background: var(--button-color);
}
/* home slider end*/

/* popup */
.popup > div {
    padding: 0 !important;
    background: none !important;
}
.popup > div > div {
    border-radius: 8px !important;
}
.popup > div > div div.caption {
    color: var(--body-font-color) !important;
}

.popover > div {
    color: var(--body-font-color);
}
/* popup end */
/*** PAGE HEADER END ***/

/*** PAGE CONTENT ***/
body > div.main-wrapper {
    overflow: hidden;
    min-height: 100%;
    position: relative;
    margin: 0 auto;
    width: 100%;
}
div#wrapper {
    min-height: 100%;
    margin: 0 auto;
}
section#controller_area:empty {
    padding-bottom: 0 !important;
}
section#main_container {
    position: relative;
}
section#main_container > div.inside-container {
    margin: 0 auto;
    position: relative;
}
section#main_container aside.left {
    margin-bottom: 22px;
}

body.bc-exists section#main_container > div.inside-container {
    padding-top: 0 !important;
}
section#content {
    vertical-align: top;
}

.no-sidebar section.content_block {
    padding-top: 36px;
    padding-bottom: 28px;
    margin-bottom: 20px;
}
.no-sidebar section.content_block:last-child {
    margin-bottom: 0;
}
.content_block .fieldset,
.side_block .fieldset {
    background: none;
}

aside.two-middle section.content_block {
    padding-top: 48px;
    padding-bottom: 30px;
}

body.home-page.no-sidebar aside.top > section:first-child:before {
    content: "";
    background-color: var(--listings-box-background-color);
    width: calc(100% + 96px);
    height: 100%;
    position: absolute;
    top: 0;
    left: -48px;
    z-index: -1;
    border-radius: 40px;
}
.no-sidebar section.content_block.listings_box ul.featured + div {
    margin-top: 6px;
} 

/* bread crumbs */
#bread_crumbs {
    font-size: 0.813em;
}
#bread_crumbs > ul {
    margin: 0 auto;
    padding: 24px 0 10px;
}
#bread_crumbs > ul li {
    margin-bottom: 10px;
}
#bread_crumbs > ul > * {
    display: inline-block;
}
#bread_crumbs > ul a {
    color: #888888;
}
#bread_crumbs > ul > *:not(:last-child):after {
    content: attr(accesskey);
    padding: 0 8px;
    color: #b5b5b5;
    font-size: 12px;
}
/* bread crumbs end */

/* content/side blocks */
section.content_block {
    position: relative;
    margin-bottom: 30px;
}
section.side_block {
    margin-bottom: 8px;
}
section.side_block:not(.no-style) {
    background: var(--content-background-color);
    padding: 20px;
    margin-bottom: 8px;
    border-radius: 12px;
    transition: background var(--duration) var(--timing);
}
body.home-page section.content_block > h3 {
    font-size: 2.15em;
    font-weight: 600;
    vertical-align: top;
}
body.home-page.no-sidebar section.content_block > h3 {
    text-align: left;
}
body.home-page aside.two-middle section.content_block > h3 {
    text-align: left;
}
section.content_block > div,
section.side_block > div {
    position: relative;
}
section.content_block > div h3,
section.side_block > div h3 {
    font-size: 1.357em;
    margin-top: -5px;
    margin-bottom: 25px;
}
section.content_block:not(.no-header) > div,
section.side_block:not(.no-header) > div {
    margin: 15px 0 0 0;
}
body.home-page section.content_block:not(.no-header) > div {
    margin: 28px 0 0 0;
}
section.content_block:not(.no-style) > div {
    padding: 0 0 28px 0;
}

section.contact-seller-bottom {
    margin-top: 30px;
    padding-bottom: 0 !important;
}
section.contact-seller-bottom > div {
    background: #f5f5f5 !important;
}
/* content/sidebar block end */

/* sidebar search block */
.search-item .field {
    font-size: 0.813rem;
}
section.side_block_search div.search-item {
    padding-bottom: 15px;
}
section.side_block_search div.field {
    padding: 0 0 4px 0;
    min-height: 8px;
}
.search-button {
    padding-top: 15px;
}
.search-button > a:not(.button) {
    margin-left: 10px;
    white-space: nowrap;
    font-size: 0.875em;
}
/* single */
.search-item.single-field > select,
.search-item.single-field > input[type="text"],
.search-item.single-field .two-inline input[type="text"] {
    width: 100%;
}
/* two */
.search-item.two-fields > select,
.search-item.two-fields > input[type="text"] {
    width: 48%;
    margin-right: 4%;
}
.search-item.two-fields > select:last-child,
.search-item.two-fields > input[type="text"]:last-child {
    margin-right: 0;
}
.search-item.two-fields > .custom-input,
.search-item.couple-field > .custom-input {
    width: 50%;
    display: inline-block;
}
/* three */
.search-item.three-field > select,
.search-item.three-field > span {
    width: 24%;
    margin-right: 4%;
}
.search-item.three-field > input {
    width: 34%;
    margin-right: 4%;
}
.search-item.three-field > span,
.search-form-cell.three-field > div > div > span {
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    padding-top: 9px;
    vertical-align: top;
}
.three-field > select.multicat {
    width: 31%;
    margin-right: 3.5%;
}
.search-item.three-field > *:last-child {
    margin-right: 0;
}

/* checkbox */
.search-item.checkbox-field {
    margin-bottom: -10px;
}
.search-item.checkbox-field > .custom-input {
    display: inline-block;
    width: 50%;
}
.search-item.checkbox-field > .custom-input {
    padding: 0 0 10px 0;
}
.search-item.checkbox-field > .custom-input > label {
    padding-right: 5px;
}
.search-item.checkbox-field div.field,
.search-item.couple-field div.field {
    padding-bottom: 8px;
}

.search-item span.divider {
    padding: 0 10px;
}
/* sidebar search block end */

/* search form elements */
.search-form-cell {
    display: inline-block;
    vertical-align: top;
}
.search-form-cell > div {
    margin: 10px 15px 0;
}
.search-form-cell > div > span {
    color: var(--header-search-form-title-color);
    font-size: 0.929em;
    display: inline-block;
    vertical-align: top;
    padding-bottom: 6px;
    height: 24px;
    white-space: nowrap;
}
.search-form-cell.vertical-middle > div > div {
    padding-top: 8px;
}

.search-form-cell.numeric-field > div > span {
    text-overflow: ellipsis;
    overflow: hidden;
}

.search-form-cell > div > div input[type="text"],
.search-form-cell > div > div input[type="number"],
.search-form-cell > div > div select,
.search-form-cell > div > div span.pills {
    width: 100%;
}
.search-form-cell .two-inline input.wauto {
    width: 100% !important;
}
.search-form-cell.submit > div input[type="submit"] {
    width: 100%;
}
.home-page .search-form-cell.submit > div input[type="submit"],
.home-page .search-form-cell.submit > div input[type="button"] {
    font-size: 0.938rem;
    height: 40px;
}
/* search form elements end */
/*** PAGE CONTENT END ***/

/*** PAGE FOOTER ***/
.page-footer {
    background: var(--footer-background-color);
    color: var(--footer-text-color);
}
.page-footer > div {
    padding: 36px 0;
    min-height: 162px;
    margin: 0 auto;
    position: relative;
}
.page-footer .footer-menu ul li a {
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.938rem;
    font-weight: 400;
    padding: 3px 0;
    display: inline-block;
    color: var(--footer-link-color);
}
.page-footer .footer-menu ul li a:hover {
    color: var(--footer-link-hover-color);
}
.page-footer .footer-menu ul li.active a {
    color: var(--footer-link-active-color);
}
.page-footer .footer-menu-title {
    margin-bottom: 15px;
    color: var(--footer-title-color);
    font-size: 0.938rem;
    font-weight: 500;
    letter-spacing: 1px;
}
.newsletter .subscribe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.newsletter .subscribe div:first-of-type {
    display: none !important;
}
.newsletter .subscribe div:last-of-type {
    flex: 1;
}
.newsletter input[type="text"] {
    width: 100%;
    max-width: 100%;
}
.newsletter #newsletter_email {
    border: 0;
}
.newsletter__text {
    margin-bottom: 20px;
    font-size: 0.813em;
}
.footer-data {
    font-size: 0.75rem;
}
.footer-data a {
    color: var(--footer-text-color) !important;
    text-decoration: underline;
}
.footer-data .icons a svg {
    width: 24px;
    height: 24px;
    fill: var(--footer-icon-color);
    transition: fill ease 0.2s;
}
.footer-data .icons a:hover svg {
    fill: var(--footer-link-hover-color);
}
/*** PAGE FOOTER END ***/

/*** PAGINATION ***/
ul.pagination {
    margin: 30px 0;
    height: 38px;
    text-align: right;
}
ul.pagination > li {
    display: inline-block;
    height: 38px;
    vertical-align: top;
    font-size: 0.929em;
}
ul.pagination > li.transit {
    padding: 0 20px;
    color: var(--info-field-color);
}
ul.pagination > li.transit input {
    min-width: 44px;
    width: auto;
    margin: 0 5px;
    text-align: center;
}
ul.pagination > li.navigator a {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 28px;
    line-height: 33px;
    background: transparent;
    border: 2px solid var(--button-color);
    color: var(--link-color);
    font-weight: 300;
    align-items: baseline;
}
ul.pagination > li.navigator a:hover {
    background: transparent;
    border: 2px solid var(--button-hover-color);
}
ul.pagination > li.navigator a:active {
    border: 2px solid var(--button-color);
    box-shadow: inset 0 0 0 1px var(--content-background-color), inset 0 0 0 2px var(--button-color);
}
/*** PAGINATION END ***/

/*** MISCELLANEOUS ***/
.two-inline {
    display: flex;
}
.two-inline > *:first-child {
    flex: 0 0 auto;
}
.two-inline > *:last-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.mass-actions {
    padding: 15px 0 0 0;
}
.qtip-content {
    font-weight: 300 !important;
}

div.textarea_counter_default,
div.textarea_counter_warning {
    font-size: 0.857em;
    text-align: right;
    display: inline-block;
}
div.textarea_counter_warning {
    color: #a81818;
}

/* enlarge media */
span.media-enlarge {
    width: 46px;
    height: 46px;
    position: absolute;
    right: 0;
    top: 0;
}
span.media-enlarge:after {
    content: "";
    width: 18px;
    height: 18px;
    background: url("../img/gallery.png") 0 -389px no-repeat;
    position: absolute;
    left: 14px;
    top: 14px;

    opacity: 0.7;
}
span.media-enlarge:hover:after {
    opacity: 1;
}
/* enlarge media end */

/* keyword search in box */
.submit-cell .kws-block {
    padding-bottom: 10px;
}
.kws-block input[type=text] {
    width: 100%;
}
.kws-block > div:last-of-type {
    margin-top: 5px;
}
.kws-block .options ul {
    padding: 10px 0 5px;
}
.kws-block .options ul > li {
    padding: 0 0 7px 0;
}
.kws-block .options ul > li:last-child {
    padding: 0;
}
.kws-block a {
    margin-top: 10px;
    display: inline-block;
}
#area_keyword form.kws-block .two-inline {
    width: 70%;
}
/* keyword search in box end */

/* close bars */
div.close-black {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
div.close-black:before,
div.close-black:after {
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 7px;
    margin: auto;
    height: 15px;
    height: 15px;
    width: 2px;
    background: #000;
    opacity: 1;
}
div.close-black:before {
    transform: rotate(45deg);
}
div.close-black:after {
    transform: rotate(-45deg);
}
div.close-black:hover:before {
    opacity: 0.7;
}

.close-red {
    width: 12px;
    height: 12px;
    display: inline-block;
    cursor: pointer;
    background: url("../img/gallery.png") -3px -11px no-repeat;
    opacity: 0.5;
}
.close-red:hover {
    opacity: 0.8;
}

img.remove {
    cursor: pointer;
    width: 10px;
    height: 12px;
    margin: 0 0 0 8px;
    background: url("../img/gallery.png") 0 -1460px no-repeat;
    opacity: 0.7;
}
img.remove:hover {
    opacity: 1;
}
/* close bars end */

#save_search {
    margin: 20px 0 0;
    display: inline-block;
}

.h1-nav nav > a:not(.button) {
    display: inline-block;
    height: 38px;
    margin-left: 5px;
    opacity: 0.7;
}
.h1-nav nav > a:not(.button):not(.post_ad) {
    margin-top: 13px;
}
.h1-nav nav > a:hover {
    opacity: 1;
}
.h1-nav nav > a.post_ad {
    width: 38px;
    background: #177eec;
    border-radius: 20px;
    position: relative;
    opacity: 1;
}
.h1-nav nav > a.post_ad:before,
.h1-nav nav > a.post_ad:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    top: 18px;
    left: 9px;
    background: white;
}
.h1-nav nav > a.post_ad:after {
    width: 2px;
    height: 20px;
    top: 9px;
    left: 18px;
}
.h1-nav nav > a.post_ad:hover {
    box-shadow: 0px 8px 16px -4px rgb(23 126 236 / 65%);
}

/* credit card styles */
img.cvc {
    width: 45px;
    height: 26px;
    background: url("../img/cc.png") 0 0 no-repeat;
    margin: 0 0 0 5px;
}
img#card_icon {
    width: 38px;
    height: 24px;
    background: url("../img/cc.png") 0 150px no-repeat;
    margin: 0 0 4px 6px;
}
img#card_icon.visa,
img#card_icon.visa_electron {
    background-position: 0 -122px;
}
img#card_icon.mastercard {
    background-position: 0 -98px;
}
img#card_icon.discover {
    background-position: 0 -50px;
}
img#card_icon.maestro {
    background-position: 0 -74px;
}
img#card_icon.amex {
    background-position: 0 -26px;
}
/* credit card styles end */

.geo-autocomplete {
    background: var(--body-background-color) !important;
    border-color: var(--plans-border-color) !important;
}

/* search on map */
body.search-on-map-page #map_listings,
body.search-on-map-page #search_area {
    background: var(--body-background-color);
    box-shadow: inset 0 -1px 0 var(--category-menu-item-bg-color),  inset 0 1px 0 var(--category-menu-item-bg-color);
}
body.search-on-map-page .point1 {
    margin-top: 0 !important;
}
body.search-on-map-page header.page-header.fixed-menu {
    height: 44px !important;
}
body.search-on-map-page header.page-header.fixed-menu div#logo {
    margin-left: 0 !important;
}
body.search-on-map-page header.page-header div.top-header {
    margin-bottom: 8px !important;
}
body.search-on-map-page header.page-header div.top-navigation {
    height: auto !important;
    min-height: 60px;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 0;
}
body.search-on-map-page section#main_container {
    top: 108px !important;
}
body.search-on-map-page .header-contacts {
    display: none !important;
}
body.search-on-map-page .header-nav {
    min-height: 62px !important;
}
body.search-on-map-page .search-map-container #map_listings > div section {
    background: var(--body-background-color);
}
body.search-on-map-page .search-map-container #listings_cont section#listings ul.card-info,
.map-listing__info {
    background: var(--body-background-color);
}
body.search-on-map-page .favorite > .icon,
.map-listing .favorite > .icon {
    background-image: url('../img/heart.svg');
    width: 14px;
    height: 12px;
    display: block;
    filter: var(--icon-filter-background);
}
body.search-on-map-page .favorite.remove > .icon,
.map-listing .favorite.remove > .icon {
    filter: var(--icon-filter-img-background);
}

body.search-on-map-page .footer-data a {
    margin-left: 5px;
}
.search-map-container #listings_cont > header {
    border-bottom: 1px var(--body-background-color) solid !important;
}

body.search-on-map-page .leaflet-autocomplete {
    background-color: var(--body-background-color);
}
div.picture mark.group {
    border-radius: 12px;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    body.search-on-map-page div#logo {
        padding: 0 !important;
        height: auto !important;
    }
}
@media screen and (min-width: 768px) {
    body.search-on-map-page .header-nav {
        box-shadow: none !important;
    }
    body.search-on-map-page .header-nav div.row > div:not(:first-child) {
        display: none !important;
    }
    body.search-on-map-page header.page-header.fixed-menu div.top-navigation,
    body.search-on-map-page header.page-header.fixed-menu div.top-header {
        padding-left: 15px;
        padding-right: 15px;
    }
    #map_listings footer {
        background: var(--footer-background-color) !important;
    }
    #map_listings .footer-data {
        color: var(--footer-text-color);
    }
    #map_listings .search-block-content form div.search-form-cell {
        width: 50%;
    }
    form[name="map-search-form"] {
        margin: 0 -15px;
    }
    .search-map-container #search_area ul.tabs {
        margin-top: 15px !important;
    }
    body.search-on-map-page header.page-header.fixed-menu .circle > .default {
        padding: 0 15px !important;
    }
}
@media screen and (max-width: 767px) {
    .search-map-container.search #map_listings {
        background: transparent;
    }
    body.search-on-map-page section#main_container {
        top: 104px !important;
    }
    body.search-on-map-page .search-map-container #search_area,
    .search-map-container #listings_cont > header {
        background: var(--top-navigation-background-color) !important;
    }
    body.search-on-map-page header.page-header.fixed-menu {
        height: 44px !important;
        z-index: 500 !important;
    }
    body.search-on-map-page .search-map-container #search_area {
        background: var(--content-background-color);
    }
    body.search-on-map-page .header-nav div.row > div:nth-child(2) {
        display: none !important;
    }
    body.search-on-map-page .header-nav {
        box-shadow: inset 0 -1px 0 #e6e6e6;
        padding-bottom: 8px !important;
    }
    body.search-on-map-page .search-form-cell > div {
        margin-left: 0;
        margin-right: 0;
    }
    body.search-on-map-page .search-map-container div.mobile-navigation {
        z-index: 300;
    }
    body.search-on-map-page .search-map-container #map_listings {
        max-width: none;
        z-index: 298;
    }
    body.search-on-map-page .search-map-container div.mobile-navigation {
        background-color: var(--content-background-color) !important;
    }
    .search-map-container div.mobile-navigation > div:nth-child(2n),
    .search-map-container div.mobile-navigation {
        border-color: var(--plans-border-color) !important;
    }
    .search-map-container div.mobile-navigation > div:after {
        filter: var(--icon-filter);
    }

    body.search-on-map-page .cart-icon-container > .default {
        padding-right: 15px;
    }

    body.search-on-map-page ul.tabs > li.more.opened {
        background: none;
        box-shadow: none;
    }
    body.search-on-map-page ul.tabs > li.overflowed {
        top: 44px;
        z-index: 100;
    }

    body.search-on-map-page .search-map-container div.mobile-navigation > div.map:after {
        background-position: 0 -65px;
        margin-top: 11px;
        width: 20px;
        height: 22px;
    }
    body.search-on-map-page .search-map-container div.mobile-navigation > div.map.active:after {
        background-position: right -65px !important;
        margin-top: 11px;
        width: 20px;
        height: 22px;
    }
    body.search-on-map-page .search-map-container #map_listings > div section {
        margin: 0 -15px;
        display: flex;
        flex-wrap: wrap;
    }
    body.search-on-map-page .search-map-container #map_listings > div section.list > article {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 15px !important;
        margin: 0;
    }
    body.search-on-map-page section#listings.list ul.card-info > li.title div.favorite {
        top: 0;
        right: 0;
        bottom: auto;
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min--moz-device-pixel-ratio: 1.5),
        only screen and (min-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 144dpi) {
        body.search-on-map-page .search-map-container div.mobile-navigation > div.map:after {
            background-position: 0 -449px;
            margin-top: 13px;
            width: 14px;
            height: 18px;
        }
        body.search-on-map-page .search-map-container div.mobile-navigation > div.map.active:after {
            background-position: -14px -449px !important;
            margin-top: 13px;
            width: 14px;
            height: 18px;
        }
    }
}
/* search on map end */

/* categories box */
.categories-box__item_empty .categories-box__parent-counter {
    background: transparent;
}
.categories-box__parent-counter {
    line-height: normal;
}
/* categories box end */
/*** MISCELLANEOUS END ***/

/*** TABS ***/
ul.tabs {
    position: relative;
    margin-bottom: 10px;
    white-space: nowrap;
}
ul.tabs > li {
    display: inline-block;
    user-select: none;
    height: 40px;
    white-space: nowrap;
    margin-right: 24px;
}
ul.tabs > li:last-child {
    margin-right: 0;
}
ul.tabs > li > a {
    display: flex;
    align-items: center;
    height: 40px;
    cursor: pointer;
    position: relative;
    color: var(--body-font-color);
}
ul.tabs > li a:hover {
    color: var(--body-font-color);
}
ul.tabs > li.active > a {
    cursor: default;
    pointer-events: none;
    font-weight: 400;
    color: var(--body-font-color);
    box-shadow: 0 2px 0 var(--button-color) inset;
}
ul.tabs > li.more {
    padding: 0;
    margin: 0 !important;
    width: 40px;
    height: 48px;
    text-align: center;
    position: absolute;
    right: 0;
    z-index: 15;
}
ul.tabs > li.more.opened {
    background: var(--content-background-color);
    box-shadow: inset 0 1px 0 0px var(--top-navigation-selector-box-shadow-color),
        inset 1px 0 0 0px var(--top-navigation-selector-box-shadow-color),
        inset -1px 0 0 0px var(--top-navigation-selector-box-shadow-color);
    z-index: 42;
}
ul.tabs > li.more > span {
    width: 4px;
    height: 4px;
    background: var(--link-color);
    display: inline-block;
    margin: 20px 2px 0 0;
    border-radius: 2px;
    vertical-align: top;
}
ul.tabs > li.more > span:last-child {
    margin-right: 0;
}
ul.tabs > li.overflowed {
    position: absolute;
    right: 0;
    padding: 0;
    display: none;
    z-index: 41;
    margin-top: -1px;
}
ul.tabs > li.overflowed.opened {
    display: block;
}
ul.tabs > li.overflowed > ul {
    background: var(--content-background-color);
    border-radius: 8px;
    overflow: hidden;
    padding: 6px 0;
    box-shadow: 0 4px 10px rgba(17, 17, 17, 0.18);
}
ul.tabs > li.overflowed > ul > li  > a{
    padding: 0 16px;
    white-space: nowrap;
    display: block;
    line-height: 40px;
    height: 40px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--body-font-color);
    background-color: var(--content-background-color);
}
ul.tabs > li.overflowed > ul > li.active a {
    color: var(--link-hover);
    box-shadow: inset -3px 0px 0px var(--button-color);
}
ul.tabs.search_tabs > li:not(:last-child) {
    margin-right: 10px;
}

.my-profile-page ul.tabs, .search-page ul.tabs{
    margin-bottom: 0;
}

.tab_area .text-notice {
    padding-top: 10px;
}
body.home-page .header-tabs {
    margin: 0 auto;
    z-index: 10;
}
body.home-page .header-tabs .tabs {
    display: flex;
    justify-content: center;
    height: auto;
    border: none;
    margin-bottom: 0;
}
@media screen and (min-width: 992px) {
    body.home-page .header-tabs .tabs li a {
        font-size: 1.125rem;
    }
}
body.home-page .header-tabs .tabs li a .tab-icon {
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
}
body.home-page .header-tabs .tabs li a .tab-icon svg > * {
    stroke-width: 1.1px;
    stroke: var(--body-font-color);
}
body.home-page .header-tabs .tabs li.active a .tab-icon svg > * {
    stroke: var(--body-font-color) !important;
}
body.home-page .header-tabs .tabs li.active a .tab-icon {
    filter: var(--header-tabs-icon-active-filter);
}
body.home-page .header-tabs .tabs li.more {
    position: relative;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--content-background-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.home-page .header-tabs .tabs > li.more.opened {
    box-shadow: none;
}
body.home-page .header-tabs .tabs > li.more > span {
    background: var(--body-font-color);
}
body.home-page .header-tabs .tabs li.more span {
    margin: 0 2px 0 0;
}
body.home-page .header-tabs .tabs li.overflowed {
    margin-top: 53px;
}
body.home-page .header-tabs .tabs li.overflowed li {
    padding: 0;
}
body.home-page .header-tabs .tabs li.overflowed li a {
    justify-content: flex-start;
    padding-left: 20px;
    display: flex;
    align-items: center;
}
body.home-page .header-tabs .tabs li.overflowed li a .tab-icon {
    height: 32px;
}
/*** TABS END ***/

/*** ALPHABETIC SEARCH ***/
div.alphabetic-saerch {
    margin: 0 auto;
}
div.alphabetic-saerch > div {
    margin: 2px 0 0 2px;
}
div.alphabetic-saerch > div > a {
    width: 41px;
    height: 41px;
    border: 1px var(--content-box-table-cell-border-color) solid;
    display: inline-block;
    text-align: center;
    margin: -1px 0 0 -1px;
    line-height: 38px;
}
div.alphabetic-saerch > div > a.wide {
    width: 81px;
}
div.alphabetic-saerch > div > a:hover,
div.alphabetic-saerch > div > a.active {
    background: var(--content-box-table-cell-border-color);
    color: var(--content-box-table-cell-active-text-color);
}
/*** ALPHABETIC SEARCH END ***/

/*** SUBMIT FORM ELEMENTS ***/
div.submit-cell {
    padding-bottom: 10px;
}
div.submit-cell:not(.hide):not(.disabled) {
    display: flex;
}
div.submit-cell.selected-category {
    padding: 30px;
    border-radius: 12px;
    background: var(--content-background-color);
    transition: background var(--duration) var(--timing);
}
div.submit-cell.selected-category ~ div.submit-cell {
    padding: 30px;
    border-radius: 12px;
    margin-top: 20px;
    background: var(--content-background-color);
    transition: background var(--duration) var(--timing);
}

form > div.submit-cell:last-of-type {
    padding-bottom: 0;
}
div.submit-cell > div.name {
    max-width: 170px;
    flex: 1 0 170px;
    padding: 10px 10px 10px 0;
    font-size: 0.875em;
    display: flex;
}
div.submit-cell > div.field {
    min-height: 38px;
    flex: 1;
    min-width: 0;
}
div.submit-cell.buttons > div.field {
    overflow: inherit;
}
div.submit-cell > div.field #security_img {
    margin-right: 5px;
}
div.submit-cell > div.field #security_img + #security_code {
    margin-right: 5px !important;
}
div.submit-cell > div.field.checkbox-field,
div.submit-cell > div.field.inline-fields {
    padding-top: 8px;
    min-height: 28px;
}
div.submit-cell.custom-padding {
    padding: 5px 0 10px 0;
}
div.submit-cell.custom-padding > div {
    min-height: 25px;
}
div.submit-cell ul.tabs {
    border: none;
    margin-bottom: 0;
    max-width: 100%;
    overflow: hidden;
}
div.submit-cell ul.tabs.tabs-ready {
    overflow: unset;
}
div.submit-cell ul.tabs {
    border: none;
    margin-bottom: 0;
}
div.submit-cell.buttons {
    padding: 10px 0 0 0;
}
div.submit-cell .upload-files nav {
    filter: var(--icon-filter);
}

#modal_block div.submit-cell div.name {
    width: 120px;
}
#modal_block div.submit-cell div.field input[type="text"],
#modal_block div.submit-cell div.field input[type="password"] {
    width: 100%;
}

/* single */
.field.single-field > select {
    width: 250px;
}
.field.single-field > input[type="text"] {
    width: 400px;
    min-width: 80px;
}
.field.single-field > textarea {
    max-width: 600px;
    display: block;
}
/* inline */
.field.inline-fields > span.custom-input {
    display: inline-block;
    padding: 0 30px 0 0;
}
/* checkbox */
.field.checkbox-field .custom-input {
    padding-bottom: 10px;
}
span.phone-field > select {
    width: 80px;
}
.search-form-cell.three-field > div > div,
.search-form-cell.two-fields > div > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.field.two-fields input.date {
    width: 140px !important;
}

.field span.divider,
.search-form-cell span.divider {
    padding: 0 10px;
}

.form-buttons {
    display: block;
}
.form-buttons:not(.no-top-padding) {
    padding-top: 20px !important;
}
.form-buttons.no-top-padding > #btn-checkout {
    margin-top: 20px !important;
}
.form-buttons:not(.no-top-padding) .name {
    float: none;
    padding: 0;
}
.form-buttons a:not(.button) {
    padding: 0 30px 0 0;
}

.wauto {
    width: auto !important;
    max-width: 100%;
}
.w120 {
    width: 120px !important;
}
.w210 {
    width: 210px !important;
}

/* qtip */
img.qtip {
    width: 18px;
    height: 18px;
    background: url("../img/gallery.png") 0 -467px no-repeat var(--button-color);
    margin: 0 0 0 10px;
    border-radius: 2px;
}
img.qtip:hover {
    background-color: var(--button-hover-color);
}
div.qtip_cont {
    display: none;
}
div.qtip-defaults {
    max-width: 300px;
}
/* qtip end */

/* multilingual tabs */
div.ml_tabs_content {
    padding-bottom: 10px;
}
div.ml_tabs_content input[type="text"] {
    width: 100%;
    max-width: 600px;
}
/* multilingual tabs end */
/*** SUBMIT FORM ELEMENTS END ***/

/*** MESSAGES ***/
img.account-picture {
    width: 200px;
    height: 100px;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("../img/no-account.png");
    object-fit: contain;
}
table.contacts-list {
    table-layout: auto !important;
}
table.contacts-list td.info {
    vertical-align: top;
}
table.contacts-list td.info .name {
    color: var(--body-font-color);
}
table.contacts-list td.info .name > span:not(.new) {
    font-size: 0.929em;
    color: var(--body-font-color);
}
table.contacts-list td.info .date {
    color: #949494;
    font-size: 0.929em;
    padding: 0 0 10px 0;
}
table.contacts-list div.picture {
    position: relative;
    display: inline-block;
}
table.contacts-list div.picture span {
    width: 10px;
    height: 10px;
    background: #60d400;
    position: absolute;
    border-radius: 7px;
    top: -5px;
    right: -5px;
}
table.contacts-list div.name span.new {
    width: 10px;
    height: 10px;
    background: #60d400;
    border-radius: 7px;
    border: 2px white solid;
    display: none;
}
table.contacts-list tr.header td.user {
    width: 5%;
}

div#messages_cont {
    max-height: 600px;
    margin-bottom: 20px;
}
ul#messages_area {
    margin-left: 13px;
}
ul#messages_area > li {
    border: 2px var(--table-list-border-color) solid;
    padding: 15px 24px 15px 20px;
    margin: 0 40px 20px 0;
    position: relative;
    border-radius: 8px 8px 8px 0;
}
ul#messages_area > li > div {
    padding: 0 0 10px 0;
}
ul#messages_area > li:last-child {
    margin-bottom: 0;
}
ul#messages_area > li.me {
    border-color: var(--table-list-me-border-color);
    margin: 0 13px 20px 20px;
    border-radius: 8px 8px 0 8px;
}
ul#messages_area > li.removed {
    opacity: 0.5;
}
ul#messages_area > li div.date {
    margin-top: 5px;
}
ul#messages_area > li:before,
ul#messages_area > li:after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    left: -15px;
    bottom: -2px;
    border-style: solid;
    border-width: 0 0 14px 14px;
    border-color: transparent transparent var(--table-list-border-color) transparent;
}
ul#messages_area > li:after {
    left: -10px;
    bottom: 0;
    border-width: 0 0 10px 10px;
    border-color: transparent transparent var(--table-list-border-color) transparent;
}
ul#messages_area > li.me:after {
    display: none;
}
ul#messages_area > li.me:before {
    left: auto;
    right: -15px;
    border-width: 0 14px 14px 0;
    border-color: transparent transparent var(--table-list-me-border-color) transparent;
}
ul#messages_area > li > span {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 8px;
    right: 8px;
    background: url("../img/gallery.png") right -469px no-repeat;
    cursor: pointer;
    display: none;
    opacity: 0.5;
    filter: var(--icon-filter);
}
ul#messages_area > li > span:hover {
    opacity: 0.9;
}
ul#messages_area > li:hover > span {
    display: block;
}

/* Message area styling with avatars and colors */
ul#messages_area li {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 12px;
    background: transparent;
}

/* Remove corner triangles/arrows */
ul#messages_area > li:before,
ul#messages_area > li:after,
ul#messages_area > li.me:before,
ul#messages_area > li.me:after {
    display: none !important;
}

/* Received messages - left aligned with light background */
ul#messages_area li {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    flex-direction: row;
}

/* Sent messages - right aligned with accent background */
ul#messages_area li.me {
    background: #f0f7ff;
    border: 1px solid #d0e4ff;
    flex-direction: row-reverse;
}

.message-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 50px;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-avatar img,
.message-avatar .avatar-initials {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-sender-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sender-name {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--font-dim-color);
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.message-text {
    font-size: 0.9375em;
    line-height: 1.5;
    color: var(--main-color);
    margin-bottom: 6px;
    word-wrap: break-word;
}

.message-listing-ref {
    font-size: 0.875em;
    padding: 8px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    margin-bottom: 8px;
}

.message-listing-ref a {
    color: var(--active-color);
    font-weight: 500;
}

ul#messages_area li .date {
    font-size: 0.813em;
    color: var(--font-dim-color);
    margin-top: 4px;
}

ul#messages_area li.removed {
    opacity: 0.5;
}

/* Messaging user info box */
.messaging-user-info {
    background: var(--main-bg-color);
    border: 1px solid var(--border-main-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.user-info-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-main-color);
}

.user-avatar {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar a {
    display: block;
    width: 100%;
    height: 100%;
}

.user-main-info {
    flex-grow: 1;
    min-width: 0;
}

.user-name-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.user-name {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--main-color);
    text-decoration: none;
}

.user-name:hover {
    color: var(--active-color);
}

.user-badge {
    display: inline-block;
    font-size: 0.75em;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 500;
}

.admin-badge {
    background: #f0f0f0;
    color: #666;
}

.visitor-badge {
    background: #e3f2fd;
    color: #1976d2;
}

.user-membership {
    font-size: 0.875em;
    color: var(--font-dim-color);
    margin-bottom: 6px;
}

.user-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rating-stars {
    display: flex;
    gap: 2px;
    color: #ffa500;
}

.rating-stars svg {
    flex-shrink: 0;
}

.rating-value {
    font-size: 0.875em;
    color: var(--font-dim-color);
}

.user-actions {
    flex-shrink: 0;
    margin-left: auto;
}

.user-actions .button {
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 0.875em;
}

.user-contact-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.contact-detail-item {
    font-size: 0.875em;
}

.detail-label {
    font-weight: 500;
    color: var(--font-dim-color);
    display: inline-block;
    margin-right: 4px;
}

.detail-value {
    color: var(--main-color);
}

.detail-value a {
    color: var(--active-color);
    text-decoration: none;
}

.detail-value a:hover {
    text-decoration: underline;
}

div#messages_cont {
    max-height: 100% !important;
}

div.send-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 16px 0;
    margin: 0 15px;
}

div.send-controls textarea {
    width: 100%;
    max-width: 100%;
    resize: vertical;
    min-height: 80px;
}

div.send-controls > div {
    width: 100%;
}

div.send-controls #send_message {
    width: auto;
    padding: 12px 24px;
    font-size: 1em;
    font-weight: 500;
}

textarea#message_text {
    margin-bottom: 10px;
}

/* Modern messages list design */
.messages-list-modern {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.dark .messages-list-modern {
    background: #1a1a1a;
    border-color: #333333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.message-list-item {
    background: #ffffff;
    border-bottom: 1px solid #e8e8e8;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.dark .message-list-item {
    background: #1a1a1a;
    border-bottom-color: #2a2a2a;
}

.message-list-item:nth-child(even) {
    background: #f8f9fa;
}

body.dark .message-list-item:nth-child(even) {
    background: #1f1f1f;
}

.message-list-item:last-child {
    border-bottom: none;
}

.message-list-item:hover {
    background: #f0f7ff;
    box-shadow: inset 3px 0 0 var(--active-color);
}

body.dark .message-list-item:hover {
    background: #252830;
}

.message-list-item.unread {
    background: var(--noiz-blue-wash, #e3f2fd);
    border-left: 3px solid var(--noiz-blue, #2196f3);
}

body.dark .message-list-item.unread {
    background: rgba(15, 130, 188, .14);
}

.message-list-item.unread:nth-child(even) {
    background: color-mix(in srgb, var(--noiz-blue) 12%, #fff);
}

body.dark .message-list-item.unread:nth-child(even) {
    background: rgba(15, 130, 188, .20);
}

.message-list-item.unread:hover {
    background: color-mix(in srgb, var(--noiz-blue) 18%, #fff);
    box-shadow: inset 3px 0 0 var(--noiz-blue, #2196f3);
}

body.dark .message-list-item.unread:hover {
    background: rgba(15, 130, 188, .27);
}

.message-item-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
}

.message-item-avatar {
    position: relative;
    flex-shrink: 0;
}

.message-item-avatar .avatar-initials,
.message-item-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #f44336;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 600;
    border: 2px solid var(--main-bg-color);
}

.message-item-content {
    flex: 1;
    min-width: 0;
}

.message-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.message-item-name {
    font-weight: 600;
    font-size: 1em;
    color: var(--main-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.message-list-item.unread .message-item-name {
    font-weight: 700;
}

.user-type-badge {
    font-size: 0.813em;
    font-weight: 400;
    color: var(--font-dim-color);
}

.message-item-date {
    font-size: 0.813em;
    color: var(--font-dim-color);
    white-space: nowrap;
}

.message-item-preview {
    font-size: 0.875em;
    color: var(--font-dim-color);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.message-list-item.unread .message-item-preview {
    color: var(--main-color);
}

.message-item-arrow {
    flex-shrink: 0;
    color: var(--font-dim-color);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.message-list-item:hover .message-item-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Avatar with initials - Global styling */
.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #667eea;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Generate unique colors based on name */
.avatar-initials[data-name*="A"],
.avatar-initials[data-name*="α"] { background: #e91e63; }
.avatar-initials[data-name*="B"],
.avatar-initials[data-name*="β"] { background: #2196f3; }
.avatar-initials[data-name*="C"],
.avatar-initials[data-name*="γ"] { background: #4caf50; }
.avatar-initials[data-name*="D"],
.avatar-initials[data-name*="δ"] { background: #ff9800; }
.avatar-initials[data-name*="E"],
.avatar-initials[data-name*="ε"] { background: #9c27b0; }
.avatar-initials[data-name*="F"],
.avatar-initials[data-name*="ζ"] { background: #00bcd4; }
.avatar-initials[data-name*="G"],
.avatar-initials[data-name*="η"] { background: #f44336; }
.avatar-initials[data-name*="H"],
.avatar-initials[data-name*="θ"] { background: #f26624; }
.avatar-initials[data-name*="I"],
.avatar-initials[data-name*="ι"] { background: #3f51b5; }
.avatar-initials[data-name*="J"],
.avatar-initials[data-name*="κ"] { background: #009688; }
.avatar-initials[data-name*="K"],
.avatar-initials[data-name*="λ"] { background: #e91e63; }
.avatar-initials[data-name*="L"],
.avatar-initials[data-name*="μ"] { background: #2196f3; }
.avatar-initials[data-name*="M"],
.avatar-initials[data-name*="ν"] { background: #4caf50; }
.avatar-initials[data-name*="N"],
.avatar-initials[data-name*="ξ"] { background: #ff9800; }
.avatar-initials[data-name*="O"],
.avatar-initials[data-name*="ο"] { background: #9c27b0; }
.avatar-initials[data-name*="P"],
.avatar-initials[data-name*="π"] { background: #00bcd4; }
.avatar-initials[data-name*="Q"],
.avatar-initials[data-name*="ρ"] { background: #f44336; }
.avatar-initials[data-name*="R"],
.avatar-initials[data-name*="σ"] { background: #f26624; }
.avatar-initials[data-name*="S"],
.avatar-initials[data-name*="τ"] { background: #3f51b5; }
.avatar-initials[data-name*="T"],
.avatar-initials[data-name*="υ"] { background: #009688; }
.avatar-initials[data-name*="U"],
.avatar-initials[data-name*="φ"] { background: #667eea; }
.avatar-initials[data-name*="V"],
.avatar-initials[data-name*="χ"] { background: #e91e63; }
.avatar-initials[data-name*="W"],
.avatar-initials[data-name*="ψ"] { background: #2196f3; }
.avatar-initials[data-name*="X"],
.avatar-initials[data-name*="ω"] { background: #4caf50; }
.avatar-initials[data-name*="Y"] { background: #ff9800; }
.avatar-initials[data-name*="Z"] { background: #9c27b0; }

/* Avatar sizes */
.avatar-small { 
    width: 32px; 
    height: 32px; 
    font-size: 0.75em; 
}

.avatar-medium { 
    width: 50px; 
    height: 50px; 
    font-size: 1em; 
}

.avatar-large { 
    width: 80px; 
    height: 80px; 
    font-size: 1.5em; 
}

/* Default avatar styling when used in message avatar context */
.message-avatar .avatar-initials {
    width: 40px;
    height: 40px;
    font-size: 0.875em;
}

/* User navbar avatar */
.user-navbar .avatar-initials {
    width: 36px;
    height: 36px;
    font-size: 0.813em;
}

/* Messaging user info avatar */
.messaging-user-info .avatar-initials {
    width: 70px;
    height: 70px;
    font-size: 1.5em;
}

/* Contact list avatars */
.contacts-list .picture .avatar-initials {
    width: 110px;
    height: 100px;
    font-size: 2em;
    border-radius: 8px;
}

/* Seller/Account images */
.seller-info .picture .avatar-initials,
.seller-short .picture .avatar-initials {
    width: 100%;
    height: 100%;
    font-size: 2.5em;
    border-radius: 8px;
}

/* Dealer boxes */
.dealer .picture .avatar-initials,
.main-container .picture .avatar-initials {
    width: 100%;
    height: 100%;
    font-size: 2.5em;
    border-radius: 8px;
}

/* Featured account items */
.featured_account_item .picture .avatar-initials {
    width: 100%;
    height: 100%;
    font-size: 3em;
    border-radius: 8px;
}

/* Ensure avatar images fit properly */
.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Account picture class from contact lists */
.account-picture.avatar-initials {
    width: 110px;
    height: 100px;
    font-size: 2em;
}

/* Print page avatars */
.print .picture .avatar-initials {
    width: 110px;
    height: 100px;
    font-size: 2em;
    border-radius: 8px;
}
/*** MESSAGES ***/

/*** FEATURED LISTINGS BOX ***/
ul.featured > li {
    margin-bottom: 58px;
}
section.side_block ul.featured > li:hover {
    box-shadow: none;
}
ul.featured:not(.row) {
    margin-left: -14px;
    margin-right: -14px;
}

ul.featured > li > .picture {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: var(--featured-no-sidebar-background-color);
}
ul.featured > li img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px 16px 12px 12px;
    object-fit: cover;
    background: url("../img/no-picture.svg") center center no-repeat var(--listing-thumbnail-background-color);
}

ul.featured > li > ul {
    position: relative;
    padding: 16px 0 0;
    display: flex;
    flex-direction: column;
}
ul.featured .icons {
    display: flex;
    align-self: center;
    align-items: center;
    margin-top: 10px;
    margin-right: auto;
}
ul.featured .icons .icon {
    display: block;
}
ul.featured .icons > span,
section#listings ul.nav-column > li {
    background: var(--listing-card-icon-color);
    border-radius: 50%;
    padding: 6px;
    cursor: pointer;
}
ul.featured .icons > span:hover,
section#listings ul.nav-column > li:hover {
    filter: brightness(1.1);
}
ul.featured .icons > span.active,
section#listings ul.nav-column > li.active {
    background: var(--listing-card-active-icon-color);
}
ul.featured .icons > span.active .icon,
section#listings ul.nav-column > li.active .icon {
    background: var(--content-background-color);
    fill: var(--listing-card-active-icon-color) !important;
}
ul.featured .icons .icon,
section#listings ul.nav-column .icon {
    width: 12px;
    height: 12px;
    fill: var(--content-background-color) !important;
}
ul.featured .icons > *:not(:last-child) {
    margin-right: 10px;
}

.favorite {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}
.favorite:hover {
    transform: scale(1.05);
}
.picture .favorite:before,
.picture .favorite:after {
    display: none;
}
.favorite svg {
    width: 18px;
    height: 16px;
    display: block;
    fill: var(--icon-favorite-fill);
    stroke: none;
}
ul.featured > li .favorite.remove svg,
article.item .favorite.remove svg {
    fill: var(--icon-favorite-fill-active);
    stroke: none;
}

ul.featured.list > li {
    position: relative;
}
ul.featured.list > li:before {
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    background: #707070;
    border-radius: 4px;
    top: 8px;
}
ul.featured.list > li {
    display: block !important;
}
ul.featured.list > li > ul > li {
    padding: 0 0 5px 15px;
    position: relative;
    white-space: normal;
}
article.item:not(.no-image) ul.card-info > li.title,
ul.featured.with-pictures ul.card-info > li.title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 45px;
}
ul.featured.with-pictures ul.card-info > li.title a {
    color: var(--featured-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    font-size: 1.125em;
}

article.item:not(.no-image) ul.card-info > li.fields:empty {
    display: none;
}
ul.card-info > li.services > span {
    display: inline-block;
    margin-right: 20px;
    color: var(--body-font-color);
    font-size: 0.929em;
    position: relative;
    padding-left: 25px;
    font-size: 0.813em;
}
ul.card-info > li.services > span:last-child {
    margin-right: 0;
}
ul.card-info > li.services > span:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 13px;
    left: 0;
    top: 1px;
    background: url("../img/gallery.png") right -299px no-repeat;
}
ul.card-info > li.services > span.bathrooms:before {
    top: 0;
    height: 15px;
    background-position: right -283px;
}
ul.card-info > li.services > span.square_feet:before {
    top: 2px;
    height: 15px;
    background-position: right -194px;
}
ul.card-info > li.fields > div > span:not(:last-of-type) {
    margin-right: 5px;
}
ul.card-info > li.fields > div > span:not(:last-of-type):after {
    content: ",";
}
ul.card-info > li.fields {
    color: var(--info-field-color);
    font-size: 0.875em;
}
ul.card-info > li.price_tag > div > span,
ul.card-info .price-tag > span,
ul.card-info > li.system .type {
    font-weight: 500;
    font-size: 1.25em;
}
ul.card-info > li.price_tag {
    flex-wrap: wrap-reverse;
    margin-top: auto;
}
ul.card-info > li.price_tag > *:last-child {
    min-width: unset;
    overflow: visible;
    line-height: 28px;
    margin-top: 15px;
}
ul.card-info > li.price_tag > div > span {
    white-space: nowrap;
}
ul.card-info li.useful {
    font-size: 0.75em;
    gap: 8px;
}
ul.card-info li.useful svg {
    width: 16px;
    height: 16px;
    fill: var(--icon-favorite-fill);
}
/*** FEATURED LISTINGS BOX END ***/

/*** FEATURED ACCOUNTS BOX ***/
ul.featured.accounts > li {
    flex-wrap: nowrap;
    display: flex;
}
ul.featured.accounts > li img {
    object-fit: cover;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: static;
}
ul.featured.accounts > li > ul {
    flex: 1;
    min-width: 0;
    background: var(--featured-accounts-background-color);
    border-radius: 0 12px 12px 0;
    padding: 20px 20px 20px 0;
}
ul.featured.accounts > li.no-picture img {
    background-size: 50%;
}
ul.featured.accounts > li > .picture {
    padding-bottom: 0;
    width: auto;
    border-radius: 12px 0 0 12px;
    padding: 20px;
    background: var(--featured-accounts-background-color);
}
ul.featured.with-pictures.accounts ul.card-info > li.title a {
    font-size: 1.25rem;
    font-weight: 500;
}
ul.featured.with-pictures.accounts ul.card-info > li.fields {
    font-size: 0.938rem;
}

@media screen and (min-width: 1200px) {
    ul.featured.accounts > li {
        flex: 0 0 33.33333% !important;
        max-width: 33.33333% !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    ul.featured.accounts > li {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
@media screen and (max-width: 767px) {
    ul.featured.accounts > li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
/*** FEATURED ACCOUNTS BOX END ***/

/*** GRID NAVIGATION BAR ***/
.grid_navbar {
    height: 40px;
    margin-top: -20px;
    margin-bottom: 20px;
    font-size: 0.875em;
}
.grid_navbar .switcher {
    float: right;
    line-height: normal;
    height: 40px;
}
.grid_navbar .switcher > div {
    display: inline-block;
    height: 40px;
    line-height: 40px;
}
.grid_navbar .hook {
    vertical-align: top;
}
.grid_navbar .buttons > div {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
}
.grid_navbar .buttons > div > div {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 9px;
    right: 9px;
    line-height: 0;
    user-select: none;
}
.grid_navbar .buttons > div > div > span {
    display: inline-block;
    border: 2px var(--body-font-color) solid;
    border-radius: 2px;
    vertical-align: top;
}
.tabs + .tab_area .grid_navbar {
    margin-top: -8px;
}
#controller_area .content-padding > .tab_area form.kws-block {
    margin-bottom: 34px;
}

/* list view */
.grid_navbar div.list > div > span {
    width: 22px;
    height: 6px;
    margin: 0 0 2px 0;
}
.grid_navbar div.list > div > span:nth-child(2n + 1) {
    display: none;
}

/* grid view */
.grid_navbar div.grid > div > span {
    width: 10px;
    height: 10px;
}
.grid_navbar div.grid > div > span:nth-child(2n) {
    margin: 0 0 2px 2px;
}
.grid_navbar div.active div > span {
    border-color: var(--button-color);
}
.grid_navbar .buttons div:not(.active):hover div > span {
    border-color: var(--button-color);
}

/* map view */
.grid_navbar div.map > div {
    width: 20px;
}
.grid_navbar div.map > div > span {
    width: 20px;
    border: 0;
    height: 22px;
    filter: var(--icon-filter);
    background: url("../img/gallery.png") 0 -65px no-repeat;
}
.grid_navbar div.map:hover span,
.grid_navbar div.map.active span {
    filter: var(--icon-filter-img-background);
}

/* sorting */
.grid_navbar .sorting {
    display: inline-block;
    position: absolute;
    line-height: 40px;
}
.grid_navbar .sorting > div.current.disabled {
    cursor: default;
}
.grid_navbar .sorting > div.current.disabled span.link {
    color: inherit;
}
.grid_navbar .current {
    height: 40px;
    padding: 0 20px 0 0;
    cursor: pointer;
    color: var(--info-field-color);
    user-select: none;
}
.grid_navbar .current.active {
    z-index: 11;
    position: relative;
    border-bottom: 0;
}
.grid_navbar .current .link {
    color: var(--body-font-color);
    font-size: 0.875em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.grid_navbar .sorting span.arrow {
    width: 10px;
    height: 6px;
    display: inline-block;
    margin: 0 0 2px 2px;
    background: url("../img/dropdown-arrow.svg") 0 -4px no-repeat;
    background-size: 22px 14px;
}

.grid_navbar .sorting .active span.arrow {
    transform: scaleY(-1);
}
.grid_navbar ul.fields {
    z-index: 10;
    background: var(--content-background-color);
    position: absolute;
    top: 38px;
    left: 0;
    display: none;
    padding: 3px 0 5px;
    min-width: 100%;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--top-navigation-selector-box-shadow-color), 0 6px 12px -4px var(--top-navigation-selector-box-shadow-color);
}
.grid_navbar ul.fields > li {
    padding: 0 18px;
    white-space: nowrap;
}
.grid_navbar ul.fields > li a.active {
    color: var(--body-font-color);
}
/*** GRID NAVIGATION BAR END ***/

/*** LISTINGS GRID ***/
.listing-picture-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.listing-picture-slider__navbar {
    padding: 5px 7px;
    z-index: 0;
}
.listing-picture-slider__navbar > span {
    padding: 3px 1px;
}
.listing-picture-slider__navbar > span:after {
    content: "";
    display: block;
    box-shadow: inset 0 -3px 0 rgba(180, 180, 180, 0.7);
    height: 100%;
    position: relative;
    opacity: 0;
    transition: opacity var(--duration) var(--timing);
}
.listing-picture-slider__navbar > span:hover:after {
    box-shadow: inset 0 -3px 0 var(--button-color);
}
.listing-picture-slider__navbar > span img,
.listing-picture-slider__navbar > span span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}

.listing-picture-slider__navbar > span > span {
    background: rgba(0, 0, 0, 0.2);
    display: none;
    z-index: -1;
    color: white;
    border-radius: 12px;
}
.listing-picture-slider__navbar > span svg {
    width: 50px;
    fill: white;
    margin-bottom: 10px;
}
@media screen and (max-width: 991px) {
    .listing-picture-slider__navbar > span:after {
        display: none !important;
    }
    .listing-picture-slider .slider-arrow,
    .listing-picture-slider .slider-dots {
        display: flex !important;
    }
}

/* Slider navigation - arrows */
.listing-picture-slider .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.listing-picture-slider:hover .slider-arrow,
.listing-picture-slider.slider-active .slider-arrow {
    opacity: 1;
}
.listing-picture-slider .slider-arrow:hover {
    background: rgba(255, 255, 255, 1);
}
.listing-picture-slider .slider-arrow.prev {
    left: 8px;
}
.listing-picture-slider .slider-arrow.next {
    right: 8px;
}
.listing-picture-slider .slider-arrow svg {
    width: 16px;
    height: 16px;
    fill: #333;
}

/* Slider navigation - dots */
.listing-picture-slider .slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.2s ease;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 10px;
    border-radius: 12px;
}
.listing-picture-slider .slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    border: none;
    padding: 0;
}
.listing-picture-slider .slider-dot:hover {
    background: rgba(255, 255, 255, 0.9);
}
.listing-picture-slider .slider-dot.active {
    background: #fff;
    transform: scale(1.2);
}
.listing-picture-slider.has-navigation .listing-picture-slider__navbar > span:after {
    display: none;
}
@media screen and (max-width: 991px) {
    .listing-picture-slider .slider-arrow {
        display: none !important;
    }
    .listing-picture-slider .slider-dots {
        opacity: 1;
        padding: 4px 8px;
    }
    .listing-picture-slider .slider-dot {
        width: 6px;
        height: 6px;
    }
}

/* grid view */
section#listings > article {
    position: relative;
}
section#listings .link-large {
    font-size: 1.0625em !important;
    color: var(--body-font-color);
    text-transform: unset;
}
section#listings div.picture {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}
section#listings div.picture img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px 16px 12px 12px;
    object-fit: cover;
    background: url("../img/no-picture.svg") center center no-repeat var(--listing-thumbnail-background-color);
}
.listing-fit-contain div.picture img {
    object-fit: cover !important;
}
#accounts div.picture > img {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

section#listings ul.nav-column > li .link {
    display: none;
}
section#listings ul.card-info > li:not(:last-of-type) {
    margin-bottom: 8px;
}

/* featured - minimalistic badge */
article.featured div.picture > span {
    border-color: transparent;
}
article.featured div.picture a > div.label,
article.featured div.picture > div.label {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 0.6875em;
    font-weight: 500;
    color: #666;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 4px;
    -webkit-font-smoothing: antialiased;
}
article.featured div.picture a > div.label::before,
article.featured div.picture > div.label::before {
    content: "★";
    color: #FFD700;
    font-size: 1.1em;
}
/* featured end */

/* list view */
section#listings:not(.list):not(.grid) {
    display: none;
}
section.list > article {
    margin: 0 0 8px 0;
    flex: 0 0 100%;
    max-width: 100%;
}

section#listings.list div.picture {
    width: 190px;
    height: 190px;
    padding-bottom: 0;
    flex-shrink: 0;
    border: 0;
}
section#listings.list ul.card-info {
    overflow: hidden;
}
section#listings ul.card-info > li.fields {
    gap: 8px;
}
section#listings ul.card-info span.favorite {
    display: inline-block;
    vertical-align: middle;
}
section#listings ul.nav-column > li {
    display: inline-flex;
    margin-right: 8px;
    position: relative;
}
section#listings ul.nav-column > li:last-child {
    margin-right: 0;
}
section#listings.list ul.nav-column.stick-top {
    padding: 0;
}

/* List view action buttons */
section#listings.list article.item {
    display: flex;
    align-items: stretch;
}
/* Hide featured badge on image in both grid and list view */
section#listings article.item.featured div.picture .label {
    display: none !important;
}
/* Featured badge above title - hidden by default in grid, shown in list */
.featured-badge {
    display: none;
}
section#listings article.item .featured-badge {
    display: block !important;
    margin-bottom: 8px;
}
.featured-badge span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    font-size: 0.7em;
    font-weight: 500;
    color: #666;
}
.featured-badge span::before {
    content: '★';
    color: #FFD700;
}
/* NEW badge for listings posted in last 3 days */
.new-badge {
    display: none;
}
section#listings article.item .new-badge {
    display: block !important;
    margin-bottom: 8px;
}
.new-badge span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #28a745;
    border-radius: 5px;
    font-size: 0.7em;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dual dates display - Grid/List view toggle */
.card-info_posted-date.grid-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.card-info_posted-date.list-dates {
    display: none;
}
.card-info_posted-date .date-item {
    display: inline-flex;
    align-items: center;
    cursor: default;
}
.card-info_posted-date .date-created {
    opacity: 0.7;
}
.card-info_posted-date .date-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    fill: var(--icon-favorite-fill);
    stroke: var(--icon-favorite-fill);
    color: var(--icon-favorite-fill);
    flex-shrink: 0;
    pointer-events: all;
}

/* Custom Tooltip Styles */
.custom-tooltip {
    position: absolute;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
.custom-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
.custom-tooltip-content {
    background: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.custom-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    left: 50%;
    transform: translateX(-50%);
}
.custom-tooltip.above .custom-tooltip-arrow {
    bottom: -12px;
    border-top-color: #333;
}
.custom-tooltip.below .custom-tooltip-arrow {
    top: -12px;
    border-bottom-color: #333;
}

/* List view: show text labels, hide grid tooltips */
section#listings.list .card-info_posted-date.grid-dates {
    display: none !important;
}
section#listings.list .card-info_posted-date.list-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
section#listings.list .card-info_posted-date .date-item {
    white-space: nowrap;
}

section#listings.list .main-column {
    display: flex;
    flex: 0 0 66%;
    max-width: 66%;
    min-width: 0;
    align-items: stretch;
}
section#listings.list div.picture {
    flex: 0 0 20%;
    width: 20%;
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 1 / 1;
}
section#listings.list ul.card-info {
    flex: 1;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}
section#listings.list ul.card-info li.title .link-large {
    font-size: 1.25em !important;
    font-weight: 600;
}
section#listings.list li.system {
    display: none !important;
}
/* List view: Price column */
section#listings.list .list-view-price {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 17%;
    max-width: 17%;
    padding: 15px 20px;
    flex-shrink: 0;
}
section#listings.list .list-view-price .price-value {
    font-size: 1.5em;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}
/* List view: Actions column */
section#listings.list .list-view-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    flex: 0 0 17%;
    max-width: 17%;
    padding: 15px 10px;
    margin: 0;
    flex-shrink: 0;
}
section#listings.list .list-view-actions::before {
    display: none;
}
section#listings.list .list-view-actions .btn-contact,
section#listings.list .list-view-actions .btn-watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    /* Override .favorite absolute positioning */
    position: static;
    height: auto;
    background: #fff;
    box-shadow: none;
}
section#listings.list .list-view-actions .btn-contact {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #1a1a1a;
}
section#listings.list .list-view-actions .btn-contact:hover {
    background: #333;
}
section#listings.list .list-view-actions .btn-watch {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #d1d5db;
}
section#listings.list .list-view-actions .btn-watch:hover {
    background: #f5f5f5;
}
section#listings.list .list-view-actions .btn-watch svg {
    width: 14px;
    height: 12px;
    fill: var(--icon-favorite-fill);
    stroke: none !important;
}
section#listings.list .list-view-actions .btn-watch.remove svg {
    fill: var(--icon-favorite-fill-active);
    stroke: none;
}

/* List view responsive - tablet */
@media screen and (max-width: 991px) {
    section#listings.list div.picture {
        width: 140px;
        height: 140px;
    }
    section#listings.list ul.card-info {
        padding: 0 15px;
    }
    section#listings.list .list-view-price {
        min-width: 100px;
        padding: 10px;
    }
    section#listings.list .list-view-price .price-value {
        font-size: 1.2em;
    }
    section#listings.list .list-view-actions {
        min-width: 140px;
        padding: 10px 0 10px 15px;
    }
    section#listings.list .list-view-actions .btn-contact,
    section#listings.list .list-view-actions .btn-watch {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* List view responsive - mobile */
@media screen and (max-width: 575px) {
    section#listings.list article.item {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    section#listings.list .main-column {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    section#listings.list div.picture {
        flex: 0 0 40% !important;
        width: 40% !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-right: 20px;
        aspect-ratio: 1 / 1;
    }
    section#listings.list ul.card-info {
        flex: 1;
        padding: 5px 0 5px 0;
        min-width: 0;
    }
    /* Hide price column and actions on mobile */
    section#listings.list .list-view-price,
    section#listings.list .list-view-actions {
        display: none !important;
    }
    /* Featured badge above title on mobile */
    section#listings.list ul.card-info li.title {
        order: 2;
    }
    section#listings.list ul.card-info li.fields {
        order: 3;
    }
    section#listings.list ul.card-info li.useful {
        order: 4;
    }
    section#listings.list ul.card-info li.system {
        order: 5;
    }
    section#listings.list ul.card-info li.title .link-large {
        font-size: 1.1em !important;
        font-weight: 600;
    }
    /* Show price in card-info on mobile */
    section#listings.list li.system {
        display: flex !important;
        margin-top: auto;
    }
    section#listings.list li.system .price-tag {
        font-size: 1.1em;
        font-weight: 700;
    }
}
/* List view action buttons end */

/* list view end */

/* grid view */
section.grid > article {
    padding-bottom: 38px;
}
section#listings .fields {
    color: var(--info-field-color);
    font-size: 0.813em;
}
section#listings.grid ul.card-info {
    margin-top: 16px;
}
section#listings.grid ul.card-info > ol {
    display: none;
}
section#listings.grid > article:not(.no-image) ul.card-info > li.title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
section#listings.grid ul.card-info > li:not(:first-of-type):not(:last-of-type) {
    margin-bottom: 5px;
}
section#listings.grid ul.card-info > li.system {
    padding-top: 10px;
    gap: 10px;
    justify-content: space-between;
}
section#listings.grid > article {
    display: flex;
    flex-direction: column;
}
section#listings.grid > article ul.nav-column {
    justify-content: flex-start;
}
section#listings.grid ul.nav-column > li span.icon {
    top: 0;
}
section#listings.grid ul.nav-column > li > a > span.link,
section#listings.grid ul.nav-column > li > span.link {
    display: none;
}
/* grid view end */

/* no image grid view */
section#listings.list.no-image {
    margin: 0;
    padding: 0;
}
section#listings.list.no-image > article {
    display: block;
    padding: 15px;
    background: var(--featured-accounts-background-color);
    border-radius: 12px;
}
section#listings.list.no-image a.link-large {
    font-size: 1.125em !important;
}
section#listings.list.no-image ul.card-info > li.title {
    padding-bottom: 0;
}
/* no image grid view end */

/* map view */
#listings_map,
#accounts_map {
    height: 65vh;
    border-radius: 12px;
}
/* map view end */

.category-description {
    padding: 0;
    margin: 0 0 20px;
}
.category-description ~ .grid_navbar {
    margin-top: 0;
}
/*** LISTINGS GRID END ***/

/*** LISTING DETAILS ***/
div.listing-details {
    position: relative;
}
div.listing-details h1 {
    margin: 0 0 18px 0;
}

/* top navigation */
.listing-header > .col-md-2 {
    padding: 0 15px;
    position: relative;
}
.listing-header div.icons {
    height: 42px;
    display: block;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    user-select: none;
}
.listing-header div.icons a.button {
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    text-align: left;
}
.listing-header div.icons > *:not(.button) {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin: 0 0 0 4px;
    position: static;
    padding: 0;
    background: transparent;

    opacity: 1;
}
.listing-header div.icons > *:not(.button):hover {
    opacity: 0.7;
}
.listing-header div.icons > a.button {
    margin: 7px 0;
}
.listing-header div.icons > * > span {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: top;
}
/* top navigation end */

div.listing-details div.price-tag > span {
    font-size: 1.714em;
    font-weight: 400;
    color: var(--body-font-color);
}
#area_listing div.listing-fields > div.row {
    background: var(--content-background-color);
    padding: 30px 15px;
    transition: background var(--duration) var(--timing);
}
#area_listing div.listing-fields > div {
    border-radius: 12px;
    margin: 0 0 20px 0;
    overflow: hidden;
}
#area_listing div.listing-fields div.fieldset > header {
    padding: 14px 15px 0;
}
/* main info section end */

/* icons */
.listing-header a.print > span {
    background-image: var(--listing-print-icon);
    background-repeat: no-repeat;
}
.listing-header span.favorite > span {
    background-image: var(--listing-favorite-icon);
    background-repeat: no-repeat;
}
.listing-header .favorite.remove span.icon {
    background-image: var(--listing-favorite-icon-active);
    background-repeat: no-repeat;
}
.listing-header span.compare-icon .icon {
    background-image: var(--listing-compare-icon);
    background-repeat: no-repeat;
    fill: transparent !important;
}
.listing-header span.compare-icon.active .icon {
    background-image: var(--listing-compare-icon-active);
    background-repeat: no-repeat;
}
.listing-header span.favorite {
    order: 1;
}
.listing-header a.print {
    order: 2;
}
/* icons end */

/* content section */
div.listing-details .content-section {
    margin-top: 30px;
}
div.listing-details .content-section div.details {
    overflow: hidden;
}
div.listing-details div.tab_area div.no-group + div:not(.no-group) {
    margin-top: 25px;
}
/* content section end */

/* seller info section */
.seller-short div.picture {
    margin: 0 20px 10px 0;
}
.seller-short div.picture img {
    border-radius: 8px;
}
.seller-short ul.seller-info {
    overflow: hidden;
}
.seller-short div.button-exists ul.seller-info {
    padding-bottom: 45px;
}
.seller-short ul.seller-info > li.name a {
    font-weight: 400;
}
.seller-short ul.seller-info .type {
    font-weight: 400;
    color: #8e8e8e;
    font-size: 0.75em;
    padding-top: 3px;
}
.seller-short ul.seller-info > li.about {
    font-size: 0.929em;
    padding: 10px 0 0;
}
.seller-short:not(.no-pucture) a.low {
    position: absolute;
    bottom: 0;
}
.seller-short div.form {
    margin-top: 25px;
}
.seller-short form div.field {
    position: relative;
}
.seller-short form div.field > input[type="text"]:not([name="security_code"]) {
    padding-left: 37px;
}
.seller-short form div.field > input + span {
    position: absolute;
    left: 11px;
    top: 12px;
    width: 18px;
    height: 18px;
    background: url("../img/gallery.png") right -141px no-repeat;

    opacity: 0.7;
    transition: opacity var(--duration) var(--timing);
}
.seller-short form div.field > input[name="contact_email"] + span {
    background-position: right -159px;
    height: 16px;
    top: 13px;
}
.seller-short form div.field > input[name="contact_phone"] + span {
    background-position: right -175px;
}
.seller-short form div.field > input:focus + span {
    opacity: 1;
}
.seller-short .file-input {
    display: block;
}
.seller-short .file-input div {
    overflow: hidden;
    width: auto;
}
.seller-short .file-input input.file-name {
    width: 100%;
}
.seller-short .file-input span {
    float: right;
}

.seller-short div.info-table:not(.no-top-gap),
.seller-short div.owner-details {
    margin-top: 25px;
}

/* masked fields */
h3.cd-caption {
    margin: 0 !important;
    padding-bottom: 10px;
}
h3.cd-caption + div.info-table:not(.no-top-gap) {
    margin-top: 0 !important;
}
.masked > h3 {
    font-size: 1.286em;
    margin-top: 0;
    margin-bottom: 10px;
}
.masked {
    position: relative;
    min-height: 90px;
}
.masked > *:not(.login-mask):not(h3) {
    filter: blur(2px);
}
.masked div.login-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--listing-mask-background-color);
    text-align: center;
    box-shadow: 0 0 6px 6px var(--listing-mask-background-color);
    display: flex;
}
.masked div.login-mask > div {
    width: 100%;
    align-self: center;
}
.restricted-content > span {
    display: inline-block;
    margin-top: 10px;
}
.restricted-content > span > span {
    padding: 0 10px;
}


.login-mask {
    background: var(--noiz-dark-grey);
    padding: 10px;
    border-radius: 11px;
    text-align: center;
    border: 1px dashed var(--noiz-light-grey);
    color: #ffffff;
}

.login-mask a[title="Sign up"] { color: #ffffff; text-decoration: underline; }
.login-mask a { color: #ffffff; }

.login-mask .restricted-content a.login { color: #ffffff; }
/* seller info section */

/* map capture */
.map-capture {
    cursor: pointer;
    position: relative;
}
.map-capture > img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: #f8f8f8;
}

.map-listing,
.leaflet-custom-popup_group-style .leaflet-popup-content header {
    color: var(--body-font-color);
}
.map-listing__picture.no-picture img {
    background-image: url("../img/no-picture.svg") !important;
    background-size: 50%;
    background-color: var(--listing-thumbnail-background-color);
}
.map-listing .favorite {
    left: 0;
    right: auto;
    background: none;
}
.leaflet-custom-popup_group-style .map-listing .favorite {
    position: static;
}
.leaflet-custom-popup_group-style .leaflet-popup-content header,
.leaflet-custom-popup_group-style .map-listing:not(:last-child) {
    background-color: var(--listing-thumbnail-background-color);
    border-color: var(--plans-border-color) !important;
}
/* map capture end */
/*** LISTING DETAILS END ***/

/*** ACCOUNTS GRID ***/
section#accounts > article div.picture {
    margin-right: 15px;
    margin-bottom: 5px;
    float: left;
    width: 100%;
    max-width: 100%;
    position: relative;
    background-color: var(--listing-thumbnail-background-color);
    text-align: center;
}
section#accounts > article div.no-picture div.picture > a,
section#accounts > article div.picture > a > img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}
section#accounts > article div.no-picture div.picture {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    background-image: url("../img/no-account.png");
}
section#accounts div.statistics {
    overflow: hidden;
    position: relative;
    height: 105px;
}
section#accounts div.statistics > ul > li.name {
    padding-bottom: 5px;
    word-break: break-word;
}
section#accounts div.statistics div.counter span:first-child {
    display: block;
    font-size: 1.286em;
    font-weight: 600;
}
section#accounts div.statistics div.counter span:last-child {
    font-size: 0.929em;
}
section#accounts ul.info > li {
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
}
section#accounts ul.info > li.fields {
    font-size: 0.929em;
    line-height: 18px;
}
section#accounts ul.info > li.fields > span:not(:last-child):after {
    content: ",";
}
section#accounts ul.info > li.tel a {
    font-weight: 400;
}

section#accounts .landscape {
    position: relative;
    max-width: 100%;
}
section#accounts .landscape div.picture {
    margin-right: 0;
    margin-left: 0;
    float: none;
}
section#accounts .landscape div.statistics {
    height: auto;
    position: static;
}
section#accounts .landscape div.statistics > ul > li.name {
    padding-top: 5px;
}
section#accounts .landscape div.statistics > div.counter {
    top: 0;
    position: absolute;
    background: rgba(27, 31, 38, 0.8);
    height: 22px;
    line-height: 20px;
    padding: 0 5px;
    color: white;
    pointer-events: none;
}
section#accounts .landscape div.statistics > div.counter span:first-child {
    display: inline;
    font-size: 0.929em;
    font-weight: 400;
}
/*** ACCOUNTS GRID END ***/

/*** ACCOUNT DETAILS PAGE ***/
section.seller-short li.counter {
    padding: 15px 0 0 0;
}
section.seller-short li.counter span:first-child {
    font-size: 1.286em;
    font-weight: 500;
}
section.seller-short li.counter span:last-child {
    font-size: 0.929em;
}
.account-location .map-capture {
    border: 1px #f8f8f8 solid;
    margin: 15px -18px -18px;
}
/*** ACCOUNT DETAILS PAGE END ***/

/*** ACCOUNT AREA ***/
.fb-connect {
    display: inline-block;
    width: 100%;
    line-height: 36px;
    height: 40px;
    padding: 3px 10px 0;
    color: white !important;
    font-size: 0.813em;
    background-color: #295ab4;
    position: relative;
    vertical-align: top;
    border-radius: 4px;
    text-transform: uppercase;
    padding-left: 40px;
    margin-top: 1rem;
}
.fb-connect:hover {
    background-color: #184597;
    transition: background-color var(--duration) var(--timing);
}
.button .fb-connect {
    width: auto;
    margin-top: 0;
    font-size: 0.813em !important;
}

.welcome {
    padding: 0 0 10px;
    font-size: 1.071em;
}
ul.account-menu-content {
    display: inline-block;
}

/* Sidebar Account Menu */
.sidebar-account-menu {
    padding: 4px 0;
}
.sidebar-menu-item {
    margin: 1px 0;
}
.sidebar-menu-item a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1;
    position: relative;
}
.sidebar-menu-item .udm-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.sidebar-menu-item .udm-menu-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
    fill: none;
    transition: stroke 0.15s, fill 0.15s;
}
.sidebar-menu-item .udm-menu-icon svg[fill="currentColor"] {
    fill: #9ca3af;
    stroke: none;
}
.sidebar-menu-item a:hover .udm-menu-icon svg[fill="currentColor"] {
    fill: #6b7280;
}
.sidebar-menu-item a.active .udm-menu-icon svg[fill="currentColor"] {
    fill: #d64d0d;
}
.sidebar-menu-item a:hover {
    background: #f5f5f5;
    color: #111827;
}
.sidebar-menu-item a:hover .udm-menu-icon svg {
    stroke: #6b7280;
}
.sidebar-menu-item a.active {
    background: #fff7ed;
    color: #d64d0d;
    font-weight: 500;
}
.sidebar-menu-item a.active .udm-menu-icon svg {
    stroke: #d64d0d;
}
.sidebar-menu-logout {
    margin: 1px 0;
}
.sidebar-menu-logout a.logout {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #dc2626 !important;
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1;
    transition: background 0.15s;
    text-decoration: none;
}
.sidebar-menu-logout a.logout .udm-menu-icon svg {
    stroke: #dc2626;
}
.sidebar-menu-logout a.logout:hover {
    background: #fef2f2;
}

div.attention:not(:empty) {
    padding: 0 0 15px;
}
div.attention span.red {
    padding: 0;
}
.login-page-form {
    max-width: 550px;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
/*** ACCOUNT AREA END ***/

/*** TABLES ***/
/* submit table */
table.submit {
    table-layout: fixed;
}
table.submit td {
    height: 38px;
    padding: 0 0 10px;
}
table.submit td.name {
    width: 170px;
    padding-right: 10px;
}
table.submit td .name {
    padding: 5px 0 5px;
}
table.submit td.field input[type="text"],
table.submit textarea {
    width: 100%;
}
table.submit td.button {
    padding: 10px 0 0 0;
}
table.submit a.close {
    padding-left: 20px;
}
/* submit table end */

/* table view table */
table.table {
    table-layout: fixed;
}
table.table td {
    min-height: 30px;
    padding: 5px 0;
    vertical-align: top;
}
table.table td.name {
    width: 215px;
    color: #888888;
    padding-right: 10px;
}
table.table td.value {
    color: var(--body-font-color);
    word-wrap: break-word;
}
/* table view table end */

/* list table */
table.list {
    width: 100%;
    border-radius: 12px;
    table-layout: fixed;
    background: var(--content-background-color);
    transition: background var(--duration) var(--timing);
}
table.list span.text {
    color: #515151;
    font-size: 0.857em;
}
table.list > tbody > tr.header {
    border-bottom: 1px var(--table-list-border-color) solid;
    transition: border-color var(--duration) var(--timing);
}
table.list > tbody > tr.header > td {
    font-size: 0.929em;
    padding: 0 0 0 30px;
    height: 40px;
}
table.list > tbody > tr.header > td:first-child {
    padding-left: 10px;
    width: 33px;
}
table.list tr.header td.divider {
    padding: 0;
    width: 5px;
    border: 0;
}
table.list > tbody > tr.body {
    border-top: 1px var(--table-list-border-color) solid;
    transition: border-color var(--duration) var(--timing);
}
table.list > tbody > tr.body > td {
    padding: 20px 0 20px 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
table.list > tbody > tr.body > td.info > a {
    white-space: normal;
}
table.list > tbody > tr.body > td:first-child {
    padding-left: 11px;
}
table.list > tbody td.no_padding {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
table.list tr.body td.divider {
    border: 0;
}
table.list td.price div {
    width: 50px;
    background: red;
    color: #000000;
    font-size: 16px;
    line-height: 17px;
    padding: 5px 5px;
    margin-right: 10px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    overflow: hidden;
}
table.list span.name {
    text-transform: uppercase;
}
/* list table end */

div.list-table {
    display: table;
    width: 100%;
}
#controller_area > div.list-table,
#controller_area > .content-padding > div.list-table {
    background: var(--content-background-color);
    padding: 30px;
    transition: background var(--duration) var(--timing);
    border-radius: 12px;
}

div.list-table > div {
    display: table-row;
    position: relative;
    margin: 0;
}
div.list-table > div:not(.header):hover {
    background: rgba(0, 0, 0, 0.05);
}
div.list-table > div:before,
div.list-table > div:after {
    content: none;
}
div.list-table > div.header {
    height: 28px;
}
div.list-table > div > div {
    display: table-cell;
    padding-right: 15px;
}
div.list-table > div > div:last-child {
    padding-right: 0;
}
div.list-table > div.header > div {
    vertical-align: top;
    font-size: 0.929em;
    color: var(--info-field-color);
    border-bottom: 1px var(--plans-border-color) solid;
    font-weight: 400;
    white-space: nowrap;
}
section.content_block > div .list-table > div.header > div {
    border-bottom: 1px var(--tabs-side-block-border-color) solid;
}
div.list-table > div > div.center {
    padding-right: 0 !important;
}
div.list-table > div.row > div {
    vertical-align: top;
    padding-top: 11px;
    padding-bottom: 11px;
    color: var(--body-font-color);
}
div.list-table > div.row > div > div.inline {
    display: inline;
}
div.list-table > div.row > div.text {
    padding-top: 22px;
}
div.list-table > div.row > div > table.table {
    margin-top: -5px;
}
div.list-table > div.row > div > table.table td.name {
    width: 150px;
}
div.list-table .text {
    color: var(--info-field-color);
    font-size: 0.857em;
}
div.list-table span.title {
    display: none;
}

.mass-actions {
    padding: 15px 0 0 14px;
}
.mass-actions > a:not(:last-child):after {
    content: "|";
    padding: 0 10px;
    color: #5c5c5c;
    font-size: 0.929em;
}

.statuses .paid,
.statuses .unpaid,
.statuses .active,
.statuses .approval,
.statuses .incomplete,
.statuses .pending,
.statuses .expired {
    color: #63b53b;
    font-size: 0.929em;
}
.statuses .approval {
    color: #666666;
}
.statuses .incomplete {
    color: #FACB05;
}
.statuses .pending {
    color: #e88d22;
}
.statuses .expired {
    color: #fb0000;
}
.statuses .paid {
    color: #63b53b;
}
.statuses .unpaid {
    color: #fb0000;
}

.statuses .active:before,
.statuses .approval:before,
.statuses .incomplete:before,
.statuses .pending:before,
.statuses .expired:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #63b53b;
    margin-right: 8px;
}
.statuses .approval:before {
    background: #666666;
}
.statuses .incomplete:before {
    background: #FACB05;
}
.statuses .pending:before {
    background: #e88d22;
}
.statuses .expired:before {
    background: #fb0000;
}
/*** TABLES END ***/

/*** FIELDSET ***/
div.fieldset {
    background: var(--fieldset-header-background-color);
    transition: background var(--duration) var(--timing);
    margin-bottom: 15px;
    border-radius: 12px;
}
div.fieldset > header {
    padding: 10px 15px;
    display: block;
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.8px;
}
div.submit-cell div.fieldset {
    margin: 20px -30px 0;
}
.side_block div.fieldset > header {
    background: none;
    padding: 7px 0;
    font-size: 1.1rem;
}
div.fieldset > header > span.arrow {
    display: none;
}
div.fieldset > div.body > div {
    padding: 15px 0;
}

#controller_area div.fieldset > header > span.arrow {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 4px;
    cursor: pointer;
    position: relative;
    background: url("../img/gallery.png") -29px -342px no-repeat;
    filter: var(--top-navigation-arrow-filter);
}
#controller_area div.fieldset > header > span.arrow.up {
    transform: scaleY(-1);
}
#controller_area div.fieldset > div.body > div,
.dynamic-content div.listing-form .form-media,
.dynamic-content div.listing-form .form-auth {
    padding: 30px 30px 20px 30px;
}
.dynamic-content div.listing-form .form-media {
    border-radius: 12px;
}
#controller_area #area_membership div.fieldset > div.body > div {
    padding: 30px 0 20px 0;
}

#controller_area #listing_form > .submit-cell {
    padding: 20px 30px 30px 30px;
    background: var(--content-background-color);
    transition: background var(--duration) var(--timing);
}

#controller_area .content-padding > .tab_area:not(#area_keyword),
#controller_area .content-padding > .tab_area form.kws-block,
#controller_area .content-padding > .step_area,
#controller_area .content-padding > .submit-cell,
#controller_area .content-padding > .advanced-search-form > .submit-cell,
#controller_area .content-padding > .account-menu-content,
.contact-us-page .content-padding > form,
#controller_area .plans-container,
.add-banner-page .plans {
    background: var(--content-background-color);
    padding: 30px;
    border-radius: 12px;
    transition: background var(--duration) var(--timing);
}
.bumpup-page-page #controller_area .plans-container {
    padding: 0;
}
#controller_area .content-padding > .submit-cell div.ml_tabs_content {
    padding-bottom: 0;
}
#controller_area #area_profile div.fieldset {
    margin-left: -30px;
    margin-right: -30px;
}
#controller_area .content-padding > .submit-cell ~ .submit-cell {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
#controller_area .content-padding > .submit-cell + .fieldset {
    margin-top: 30px;
}

.advanced-search-form > div.fieldset {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.advanced-search-form > div.fieldset > header {
    padding-top: 24px;
}
.advanced-search-form > .submit-cell {
    margin-bottom: 24px;
}
.advanced-search-form > .submit-cell:last-child {
    margin-bottom: 0;
}

.my-profile-page ul.tabs {
    margin-bottom: 0;
}

.row > div.fieldset.divider {
    padding-left: 15px;
    padding-right: 15px;
    flex: 1 1 100%;
}
div.fieldset.divider {
    margin: 0 0 10px;
    padding: 0;
}
div.fieldset.divider > header {
    margin: 0;
    border-radius: 8px;
}
.listing-details div.fieldset.divider > header {
    margin: 0 0 20px 0;
    padding-left: 24px;
    padding-right: 24px;
}

.edit-listing-page div.fieldset,
.add-listing-page div.fieldset {
    border-radius: 12px;
    margin-bottom: 20px;
}
/*** FIELDSET END ***/

/*** STEPS ***/
ul.steps {
    box-shadow: inset 0 0 0 2px var(--steps-background-color);
    height: 40px;
    margin: 0 0 25px 0;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
}
ul.steps > li {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: relative;
    flex: 1;
}
ul.steps > li a {
    cursor: default;
    padding: 0 0 0 15px;
}
ul.steps > li.past a {
    cursor: pointer;
    color: white;
    text-decoration: underline;
}
ul.steps > li.past,
ul.steps > li.current {
    background: var(--steps-background-color);
}
ul.steps > li:not(.past) a {
    color: var(--body-font-color);
}
ul.steps > li.current a {
    color: var(--button-text-color);
}
ul.steps > li:not(:last-child):not(.past):after,
ul.steps > li:not(:last-child):not(.past):before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
ul.steps > li:not(:last-child):not(.past):after {
    border-color: transparent;
    border-left-color: var(--body-background-color);
    border-width: 20px 0 20px 10px;
    margin-top: -20px;
}
ul.steps > li:not(:last-child):not(.past):before {
    border-color: transparent;
    border-left-color: var(--steps-background-color);
    border-width: 24px 0 24px 13px;
    margin-top: -24px;
}
ul.steps > li.current:after {
    display: none;
}
/*** STEPS END ***/

/*** PAYMENT GATEWAYS ***/
ul#payment_gateways {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
ul#payment_gateways li.gateway-item {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}
ul#payment_gateways li p {
    padding: 0;
    margin: 0;
}
ul#payment_gateways li input[name="gateway"] {
    display: none !important;
}

/* Gateway Box Layout */
ul#payment_gateways li .gateway-box {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    gap: 16px;
}
ul#payment_gateways li .gateway-select {
    flex-shrink: 0;
}
ul#payment_gateways li .radio-circle {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
ul#payment_gateways li.active .radio-circle {
    border-color: #6366f1;
    background: #6366f1;
}
ul#payment_gateways li.active .radio-circle::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}
ul#payment_gateways li .gateway-logo {
    flex-shrink: 0;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
ul#payment_gateways li .gateway-info-text {
    flex: 1;
    min-width: 0;
}
ul#payment_gateways li .gateway-title {
    font-weight: 600;
    font-size: 15px;
    color: #1f2937;
    margin-bottom: 2px;
}
ul#payment_gateways li .gateway-desc {
    font-size: 13px;
    color: #6b7280;
}
ul#payment_gateways li .card-icons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
ul#payment_gateways li .card-icon {
    height: 26px;
    width: auto;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
ul#payment_gateways li .gateway-logo .paypal-logo {
    height: 24px;
    width: auto;
}
ul#payment_gateways li .gateway-logo .stripe-logo {
    height: 28px;
    width: auto;
}

/* Hide original image elements */
ul#payment_gateways li > img {
    display: none !important;
}

/* Enhanced Checkout Page */
.checkout-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}
.checkout-page .fieldset {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    border: 1px solid #e8e8e8;
}
.checkout-page .fieldset header {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    padding: 18px 24px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
    border-bottom: 1px solid #eee;
}
.checkout-page .fieldset .body {
    padding: 24px;
    background: #fff;
}
.checkout-page .table-cell {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.checkout-page .table-cell:last-child {
    border-bottom: none;
}
.checkout-page .table-cell .name {
    flex: 0 0 120px;
    color: #666;
    font-size: 14px;
}
.checkout-page .table-cell .value {
    flex: 1;
    font-weight: 600;
    color: #222;
    font-size: 16px;
}
.checkout-page .order-total .value {
    font-size: 24px;
    color: #2563eb;
}

/* Credits Payment Option */
#payment_gateways .my_paygc_credits {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    margin: 0;
    gap: 16px;
}
#payment_gateways .my_paygc_credits .gateway-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
#payment_gateways .my_paygc_credits.active .gateway-radio {
    border-color: #f59e0b;
    background: #f59e0b;
}
#payment_gateways .my_paygc_credits.active .gateway-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}
#payment_gateways .my_paygc_credits .gateway-content {
    flex: 1;
}
#payment_gateways .my_paygc_credits .gateway-title {
    font-weight: 600;
    font-size: 15px;
    color: #1f2937;
}
#payment_gateways .my_paygc_credits .gateway-desc {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}
#payment_gateways .my_paygc_credits label,
#payment_gateways .my_paygc_credits .padding,
#payment_gateways .my_paygc_credits .credits-icon {
    display: none;
}
#payment_gateways .my_paygc_credits .gateway-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
#payment_gateways .my_paygc_credits .credits-info-box {
    text-align: right;
    font-size: 13px;
    color: #6b7280;
}
#payment_gateways .my_paygc_credits .credits-info-box .available {
    color: #16a34a;
    font-weight: 700;
    font-size: 16px;
}
#payment_gateways .my_paygc_credits .required_amount_sufficient {
    color: #16a34a;
    font-weight: 600;
}
#payment_gateways .my_paygc_credits .required_amount_not_sufficient {
    color: #dc2626;
    font-weight: 600;
}
#payment_gateways .my_paygc_credits .buy-credits-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}
#payment_gateways .my_paygc_credits .buy-credits-link:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
#payment_gateways #paygc_not_sufficient {
    width: 100%;
    padding: 8px 12px;
    background: #fef2f2;
    border-radius: 6px;
    color: #dc2626;
    font-size: 12px;
    margin-top: 0;
    text-align: center;
    order: 10;
}

/* Gateway info messages - hidden by default */
.gateway-info {
    margin-top: 16px;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: none;
}
.gateway-info p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.gateway-info svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.gateway-info .secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    color: #22c55e;
    margin-top: 10px;
    border: 1px solid #e2e8f0;
}
.gateway-info .secure-badge svg {
    width: 14px;
    height: 14px;
}
.gateway-info.paypal-info {
    background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%);
    border-color: #bfdbfe;
}
.gateway-info.paypal-info svg {
    color: #003087;
}
.gateway-info.credits-info {
    background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
    border-color: #fde68a;
}
.gateway-info.credits-info svg {
    color: #d97706;
}
.gateway-info.credits-info p {
    color: #92400e;
}

/* Form buttons */
#btn-checkout,
.form-buttons input[type="submit"] {
    background: #000;
    color: #fff;
    border: none;
    padding: 9px 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
}
.form-buttons.no-top-padding {
    display: flex;
    justify-content: center;
}
#btn-checkout:hover,
.form-buttons input[type="submit"]:hover {
    background: #333;
}

/* Stripe checkout info */
#checkout-form-container {
    margin-top: 16px;
}
.stripe-checkout-info {
    padding: 16px 20px;
    background: linear-gradient(135deg, #f5f3ff 0%, #fff 100%);
    border-radius: 12px;
    border: 1px solid #ddd6fe;
}
.stripe-checkout-info p {
    margin: 0;
    color: #5b21b6;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.stripe-checkout-info svg {
    width: 22px;
    height: 22px;
    color: #6366f1;
    flex-shrink: 0;
}
.stripe-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    color: #22c55e;
    margin-top: 10px;
    border: 1px solid #e2e8f0;
}
.stripe-secure-badge svg {
    width: 14px;
    height: 14px;
    color: #22c55e;
}

@media (max-width: 600px) {
    ul#payment_gateways li .gateway-box {
        flex-wrap: wrap;
        padding: 14px 16px;
    }
    ul#payment_gateways li .gateway-logo {
        order: 2;
        width: auto;
    }
    ul#payment_gateways li .gateway-info-text {
        order: 3;
        width: 100%;
        margin-top: 8px;
        padding-left: 38px;
    }
    ul#payment_gateways li .card-icons {
        order: 4;
        width: 100%;
        margin-top: 8px;
        padding-left: 38px;
    }
    #payment_gateways .my_paygc_credits {
        flex-wrap: wrap;
        padding: 14px 16px;
    }
    #payment_gateways .my_paygc_credits .gateway-icons {
        width: 100%;
        margin-top: 10px;
        padding-left: 38px;
    }
    .gateway-info {
        padding: 14px 16px;
    }
}
/* PAYMENT GATEWAYS END ***/

/*** REGISTRATION ***/
/* password strange control */
div.password_strength {
    padding: 0 0 0 10px;
}
div.password_strength div.scale {
    background: #dfdfdf;
    width: 71px;
    height: 7px;
    position: relative;
}
div.password_strength div.scale div.color {
    height: 7px;
    width: 0;
}
div.password_strength div.scale div.red {
    background: #ed2f0b;
}
div.password_strength div.scale div.green {
    background: #23a50c;
}
div.password_strength div.scale div.yellow {
    background: #ebcc00;
}
div.password_strength div.scale div.shine {
    width: 0;
    height: 7px;
    position: absolute;
    top: 0;
    left: 0;
}
div.area_profile,
div.area_done {
    background: var(--content-background-color);
    padding: 30px;
    transition: background var(--duration) var(--timing);
}

div.area_profile div.notice {
    padding: 7px 0 10px;
}
div.area_profile div.options {
    padding-top: 10px;
}
div.area_profile div.field img.qtip {
    margin-top: 2px;
}
/* password strange control end */

span.fail_field,
span.success_field {
    display: none;
}
/*** REGISTRATION END ***/

/*** MODAL WINDOW ***/
#modal_mask {
    background: var(--popup-mask-background-color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1005;
}
.modal_block {
    position: absolute;
    left: 50%;
    margin-left: -176px;
    width: 340px;
    height: 230px;
    background: var(--content-background-color);
}
.modal_block.fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
}
.modal_block.fullscreen .gmnoprint {
    margin-right: 60px !important;
}
.modal_block div.inner div.close {
    position: absolute;
    top: 5px;
    right: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
.modal_block div.inner div.close > div {
    width: 14px;
    height: 14px;
    margin: 11px;
    background: url("../img/gallery.png") right -469px no-repeat;
    opacity: 0.7;
    filter: var(--icon-filter);
}
.modal_block div.inner div.close:hover > div {
    opacity: 1;
}
.modal_block div.inner div.modal_content {
    padding: 25px 50px 25px 30px;
    position: relative;
}
.modal_block.fullscreen div.inner,
.modal_block.fullscreen div.inner > .modal_content {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.modal_block.fill-edge div.inner div.modal_content {
    padding: 0;
}
#map_fullscreen {
    width: 100%;
    height: 100%;
}
#map_fullscreen + .close {
    filter: none;
    background: white;
}
.modal_block div.inner div.caption,
.modal_block div.inner div.caption_padding {
    color: var(--body-font-color);
    font-size: 1.143em;
    padding: 0 0 20px;
    font-weight: bold;
    margin-top: -7px;
}
.modal_block div.prompt {
    padding: 20px 0 0 0;
}
.modal_block div.prompt input {
    margin: 0 15px 0 0;
}
.modal_block div.submit-cell div.name {
    width: 80px !important;
    padding-right: 10px;
}
/*** MODAL WINDOW END ***/


/*** MY LISTINGS ***/
.my-listings > article div.picture {
    margin: 0 !important;
}
.my-listings > article {
    margin: 0 0 15px 0 !important;
    padding: 15px;
    min-height: 95px;
    transition: background var(--duration) var(--timing);
    border-radius: 12px;
}
.my-listings > article:last-child {
    margin-bottom: 0;
}
.my-listings > article .title a {
    color: var(--body-font-color);
}
.my-listings > article > div.nav > div {
    display: inline-block;
    vertical-align: top;
    margin-right: 30px;
}
.my-listings > article > div:last-child {
    margin-right: 0;
}
.my-listings div.title {
    font-size: 1.143em !important;
    font-weight: 500 !important;
    padding-bottom: 15px;
}
.my-listings div.navigation ul > li {
    padding: 0 0 12px 0;
}
.my-listings div.navigation ul > li:last-child {
    padding: 0;
}
.my-listings div.navigation ul > li select {
    width: 100%;
}
.my-listings div.navigation ul > li a {
    position: relative;
    display: inline-block;
    padding: 0 0 0 25px;
}
.my-listings div.navigation ul li.nav-icon > a:before {
    content: "";
    background-image: url("../img/gallery.png");
    background-repeat: no-repeat;
    background-position: right -535px;
    width: 16px;
    height: 16px;
    left: 0;
    top: 2px;
    position: absolute;
    opacity: 0.5;
    filter: var(--icon-filter);
}
.my-listings div.navigation ul li.nav-icon > a.add-video:before {
    background-position: right -513px;
}
.my-listings div.navigation ul li.nav-icon > a.edit:before {
    background-position: 0 -488px;
}
.my-listings div.navigation ul li.nav-icon > a.unsubscription:before {
    background-position: right -621px;
}
.my-listings div.navigation ul li.nav-icon > a.delete:before {
    background-position: right -489px;
}
.my-listings div.navigation ul li.nav-icon > a:hover:before {
    opacity: 0.8;
}
.my-listings div.stat ul > li {
    padding: 0 0 8px 0;
    color: var(--body-font-color);
}
.my-listings div.stat ul > li.switcher-controll {
    padding-bottom: 12px;
}
.my-listings div.stat ul > li span.name {
    color: var(--info-field-color);
}
.my-listings div.stat ul > li span.name:after {
    content: ":";
}
.delete.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../img/gallery.png") right -489px no-repeat;
    cursor: pointer;
}
section#listings ul.nav-column > li .delete.icon {
    filter: var(--icon-filter);
}

.icon.delete,
.icon.cancel,
.icon.manage,
.icon.crop,
.icon.rotate {
    filter: var(--icon-filter);
}

/* New My Listing Card Design */
.my-listing-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.my-listing-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.my-listing-card:last-child {
    margin-bottom: 0;
}
.my-listing-card.featured {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
}

/* Top row */
.my-listing-card__top {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Image */
.my-listing-card__image {
    position: relative;
    flex: 0 0 180px;
    width: 180px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--listing-thumbnail-background-color);
}
.my-listing-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.my-listing-card__image .no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #ccc;
}
.my-listing-card__image .no-image-placeholder svg {
    width: 48px;
    height: 48px;
}
.my-listing-card__image .photo-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}
.my-listing-card__image .photo-count svg {
    width: 14px;
    height: 14px;
}

/* Content */
.my-listing-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}
.my-listing-card__title {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    margin-bottom: 10px;
    line-height: 1.3;
}
.my-listing-card__title:hover {
    color: var(--noiz-dark-orange);
}
.my-listing-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.my-listing-card .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
}
.my-listing-card .badge--featured {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
}
.my-listing-card .badge--featured svg {
    fill: #fff;
}
.my-listing-card .badge--highlighted {
    background: linear-gradient(135deg, #fde68a 0%, #eab308 100%);
    color: #713f12;
}
.my-listing-card .badge--highlighted svg {
    fill: #713f12;
}
.my-listing-card .badge--status {
    background: #e5e7eb;
    color: #374151;
}
.my-listing-card .badge--status a {
    color: inherit;
    text-decoration: none;
}
.my-listing-card .badge--active {
    background: #d1fae5;
    color: #065f46;
}
.my-listing-card .badge--pending {
    background: #fef3c7;
    color: #92400e;
}
.my-listing-card .badge--approval {
    background: #dbeafe;
    color: #1e40af;
}
.my-listing-card .badge--expired {
    background: #fee2e2;
    color: #991b1b;
}
.my-listing-card .badge--incomplete {
    background: #f3f4f6;
    color: #6b7280;
}
.my-listing-card .badge--invisible {
    background: #f3f4f6;
    color: #6b7280;
}
.my-listing-card .badge--sub-invisible {
    background: #fef3c7;
    color: #92400e;
}
.my-listing-card .badge--sub-invisible svg {
    width: 12px;
    height: 12px;
    margin-right: 2px;
}
.my-listing-card .badge--sold {
    background: #fee2e2;
    color: #991b1b;
}
.my-listing-card .badge--sold svg {
    width: 12px;
    height: 12px;
    margin-right: 2px;
}

/* Meta */
.my-listing-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.my-listing-card__meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--info-field-color);
}
.my-listing-card__meta .meta-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}
.my-listing-card__meta .meta-label {
    color: var(--info-field-color);
}
.my-listing-card__meta .meta-label::after {
    content: ":";
}
.my-listing-card__meta .meta-value {
    color: var(--body-font-color);
    font-weight: 500;
}
.my-listing-card__meta .meta-item--featured svg {
    fill: #f59e0b;
    color: #f59e0b;
    opacity: 1;
}
.my-listing-card__meta .meta-item--favorites svg {
    fill: #ef4444;
    color: #ef4444;
    opacity: 1;
}

/* Dropdown Menu */
.my-listing-card__menu {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    z-index: 10;
}
.my-listing-card__menu.open {
    z-index: 100;
}
.my-listing-card__menu .menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
}
.my-listing-card__menu .menu-trigger:hover {
    background: #f3f4f6;
    color: #374151;
}
.my-listing-card__menu .menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 180px;
    padding: 8px 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.15s ease;
    pointer-events: none;
}
.my-listing-card__menu.open .menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
    pointer-events: auto;
}
.my-listing-card__menu .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}
.my-listing-card__menu .menu-item:hover {
    background: #f3f4f6;
}
.my-listing-card__menu .menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.my-listing-card__menu .menu-item--danger {
    color: #dc2626;
}
.my-listing-card__menu .menu-item--danger:hover {
    background: #fef2f2;
}
.my-listing-card__menu .menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

/* Inline Actions */
.my-listing-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}
.my-listing-card__actions:empty {
    display: none;
}
.my-listing-card .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    white-space: nowrap;
}
.my-listing-card .action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
/* Bump Up button - vibrant green */
.my-listing-card .action-btn--bumpup {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
}
.my-listing-card .action-btn--bumpup:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
/* Highlight button - light yellow */
.my-listing-card .action-btn--highlight {
    background: #fff9e6;
    color: #1a1a1a;
    border: 1px solid #fcd34d;
}
.my-listing-card .action-btn--highlight:hover {
    background: #fef3c7;
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(252, 211, 77, 0.3);
}
.my-listing-card .action-btn--highlight svg {
    stroke: #1a1a1a;
}
/* Upgrade button - blue */
.my-listing-card .action-btn--upgrade {
    background: #dbeafe;
    color: #1e40af;
}
.my-listing-card .action-btn--upgrade:hover {
    background: #bfdbfe;
    color: #1e40af;
}
/* Featured button - golden gradient */
.my-listing-card .action-btn--featured {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
}
.my-listing-card .action-btn--featured:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.my-listing-card .action-btn--secondary {
    background: #f3f4f6;
    color: #374151;
}
.my-listing-card .action-btn--secondary:hover {
    background: #e5e7eb;
}
.my-listing-card .action-btn--danger {
    background: #fff;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.my-listing-card .action-btn--danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
}
.my-listing-card .action-switcher {
    display: flex;
    align-items: center;
    padding: 0 12px;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .my-listing-card {
        padding: 16px;
    }
    .my-listing-card__top {
        gap: 16px;
    }
    .my-listing-card__image {
        flex: 0 0 120px;
        width: 120px;
        height: 120px;
    }
    .my-listing-card__title {
        font-size: 1.125rem;
    }
    .my-listing-card__actions {
        gap: 6px;
    }
    .my-listing-card .action-btn {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
    .my-listing-card__meta {
        gap: 8px 16px;
    }
    .my-listing-card__meta .meta-item {
        font-size: 0.8125rem;
    }
}
@media screen and (max-width: 480px) {
    .my-listing-card__top {
        flex-wrap: wrap;
    }
    .my-listing-card__image {
        flex: 0 0 100%;
        width: 100%;
        height: 200px;
    }
    .my-listing-card__content {
        flex: 0 0 100%;
    }
    .my-listing-card__menu {
        position: absolute;
        top: 16px;
        right: 16px;
    }
    .my-listing-card__menu .menu-trigger {
        background: rgba(255, 255, 255, 0.9);
    }
    .my-listing-card {
        position: relative;
    }
    .my-listing-card__title {
        font-size: 1rem;
    }
    .my-listing-card__badges {
        gap: 6px;
    }
    .my-listing-card .badge {
        padding: 3px 8px;
        font-size: 0.6875rem;
    }
    .my-listing-card .action-btn {
        flex: 1 1 calc(50% - 4px);
        padding: 10px;
    }
    .my-listing-card .action-btn span {
        display: none;
    }
}

/*** MY LISTINGS END ***/

/*** MY BANNERS ***/
body.my-banners-page .my-listings > article > div {
    display: inline-block;
    vertical-align: top;
    width: 190px;
    margin-right: 30px;
}
body.my-banners-page .my-listings div.title {
    padding-top: 5px;
}
/*** MY BANNERS END ***/

/*** PLUGINS CUSTOM ***/
li#listing_rating_dom {
    padding: 7px 0 12px !important;
}

#loan_reset_form {
    content: "";
    display: inline-block;
    width: 18px;
    height: 16px;
    background: url("../img/gallery.png") 0 -621px no-repeat;
    margin-left: 20px;
    cursor: pointer;

    opacity: 0.7;
}
#loan_reset_form:hover {
    opacity: 1;
}

.add-banner-page ul.plans > li > div.frame {
    background-color: transparent !important;
    border-color: var(--plans-border-color) !important;
}

ul.plans > li > div.frame {
    border: 1px var(--plans-border-color) solid;
}
ul.plans > li > div.frame > span.price,
ul.plans > li > div.frame > span.name,
ul.plans > li > div.frame > span.type,
ul.plans > li > div.frame > span.count {
    color: var(--body-font-color) !important;
}
div.plans-container:not(.mCustomScrollbar) {
    border-bottom: none !important;
}

div.banner {
    display: inherit !important;
}

#recaptcha_response_field {
    height: 20px;
}
body > iframe[src="about:blank"] {
    display: none;
}

#rv_listings {
    margin-bottom: 30px !important;
    font-size: 0.813rem;
}
body:not(.home-page) #rv_listings {
    margin-bottom: 0 !important;
}

body.view-details-page #content + .col-md-12.col-sm-12 {
    order: 3;
}

.compare-ad-list {
    background: var(--content-background-color) !important;
}
.compare-ad-list ul > li > a img {
    background-color: var(--listing-thumbnail-background-color) !important;
}

.fields-column .item,
.fields-content .in.hover .item,
.fields-content .same {
    color: #111111 !important;
}

.close.small {
    filter: var(--icon-filter);
}

.statistics-box .statistics-box__count {
    color: var(--body-font-color) !important;
}

.field-bound-box-text-pic {
    margin-bottom: 0 !important;
}

div.auth div.caption {
    color: var(--body-font-color) !important;
}
body div.auth {
    border-radius: 0 !important;
    background: var(--content-background-color);
}
div.listing-form div.auth {
    background: none !important;
    padding: 0 !important;
}

.ui-widget-header {
    background: var(--fieldset-header-background-color) !important;
    color: var(--body-font-color) !important;
    border: none !important;
}
.ui-widget-content {
    background: var(--content-background-color) !important;
    color: var(--body-font-color) !important;
}
.ui-widget.ui-widget-content {
    border: none !important;
    box-shadow: inset 0 0 0 1px var(--top-navigation-selector-box-shadow-color), 0 6px 12px -4px rgba(21, 126, 210, 0.4);
    z-index: 10 !important;
}

.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
    filter: var(--icon-filter);
}
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev:hover {
    background: transparent !important;
    border-color: var(--form-field-line-color-hover) !important;
}

#events-calendar .item:not(.has-event) > a {
    color: var(--body-font-color) !important;
}

div.other_filters_tmp div {
    box-shadow: inset 0 0 0 1px var(--top-navigation-selector-box-shadow-color), 0 6px 12px -4px rgba(21, 126, 210, 0.4) !important;
}

table.import tr:not(.no_hover):hover td {
    background: var(--fieldset-header-background-color) !important;
}
table.import tr.disabled td, table.import tr td.disabled {
    background: none !important;
}

.eil-field.scroll:hover > div {
    background: var(--fieldset-header-background-color) !important;
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1) !important;
}

.delete-item-from-cart {
    filter: var(--icon-filter);
}

.testimonials-form div.fieldset > div.body > div,
.form_add_comment div.fieldset > div.body > div {
    padding: 15px 20px !important;
}
.testimonials-form div.fieldset > div.body .submit-cell {
    padding: 0 0 10px 0 !important;
}

.side_block.testimonials,
.side_block.comment {
    padding-top: 12px;
}

.grid-nav-comment svg {
    opacity: .45 !important;
    fill: var(--info-field-color);
}

.register-form-affiliate .name.accept_checkbox label {
    display: inline-block;
}

.ct-label {
    color: var(--info-field-color) !important;
}

.rssfeed ul > li > a > img {
    filter: var(--icon-filter);
}
ul.lb-box-grid > li div.picture.no-picture img {
    background-size: 50% !important;
}

#rv_listings div.item img {
    background-color: var(--listing-thumbnail-background-color) !important;
}
/*** PLUGINS CUSTOM END ***/

/*** RESPONSIVE ***/
.point1 {
    width: 100%;
}

/*** ALL DESKTOP VIEWS ***/
@media screen and (min-width: 992px) {
    section#controller_area {
        padding-bottom: 30px;
    }

    body:not(.no-sidebar) aside:not(.two-middle).top section:not(.side_block).content_block {
        padding-top: 0;
    }

    .side_block input[type="text"],
    .side_block input[type="password"],
    .side_block input[type="number"],
    .side_block textarea,
    .side_block select,
    .side_block span.pills,
    #search_area select,
    #search_area input[type="text"] {
        background-color: var(--form-background-color);
        transition: background-color var(--duration) var(--timing);
    }
    .side_block select[disabled="disabled"],
    .side_block select[disabled],
    #search_area select[disabled],
    .side_block select.disabled {
        background-color: var(--form-disabled-background-color);
    }

    .side_block .search-button input[type="submit"] {
        width: 100%;
    }
    .side_block .search-button > a {
        margin: 10px 0 0;
        display: inline-block;
    }

    /* sidebar block */
    section.side_block > h3 {
        font-size: 0.75em;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }
    section.side_block > div {
        padding: 0 !important;
    }
    section.side_block:not(.no-style).seller-short {
        background-color: var(--content-background-color);
        transition: background var(--duration) var(--timing);
    }
    /* sidebar block end */

    body.no-sidebar .advanced-search-form {
        width: 60%;
    }

    section.side_block ul.featured {
        margin: 0;
    }
    section.side_block ul.featured:last-child {
        margin-bottom: 0;
    }
    section.side_block ul.featured .icons {
        margin-right: auto;
        margin-top: 6px;
    }
    section.side_block ul.featured > li {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin: 0 0 10px 0;
    }
    section.side_block ul.featured > li > ul > li {
        margin-bottom: 0;
    }
    ul.featured.with-pictures ul.card-info > li.title a {
        /* font-size: 0.875em; */
        font-size: 1.2em;
        
    }
    section.side_block ul.card-info > li.price_tag {
        padding-top: 0;
    }
    section.side_block ul.card-info > li.price_tag > div {
        margin-top: 6px;
    }
    section.side_block ul.card-info > li.price_tag > div > span {
        font-size: 1.125em;
    }
    section.side_block ul.featured > li:last-child {
        margin-bottom: 0;
    }

    section.side_block_search div.name:empty {
        min-height: 0;
        padding: 0;
    }

    div.submit-cell > div.field.checkbox-field,
    div.submit-cell > div.field.inline-fields {
        max-width: 600px;
    }

    .seller-short div.landscape ul.seller-info {
        padding: 0;
    }
    .seller-short div.landscape ul.seller-info > li.name {
        margin-top: 0;
    }
    .seller-short div.landscape ul.seller-info > li {
        padding-bottom: 5px;
    }
    .seller-short div.landscape ul.seller-info a.low {
        position: static;
        margin-top: 10px;
    }

    section.side_block table.table td.name {
        width: 45%;
    }

    .side_block_search .search-block-content {
        padding: 0;
    }
    .header-tabs .search-block-content {
        padding: 6px 0 8px 0;
    }
    .search-block-content form div.search-form-cell {
        width: 25%;
    }
}
/*** LARGE DESKTOP VIEW ***/
@media screen and (min-width: 1200px) {
    .point1 {
        max-width: 1110px;
    }

    div.table-mode .search-form-cell {
        display: table-cell;
    }
    #search_area div.table-mode {
        display: table;
        width: 100%;
    }
    #search_area div.table-mode > form {
        display: table-row;
    }

    div.table-mode .search-form-cell.numeric-field,
    div.table-mode .search-form-cell.single-field {
        width: 10%;
    }
    div.table-mode .search-form-cell.checkbox-field {
        width: 15%;
    }
    div.table-mode .search-form-cell.submit {
        width: 8%;
    }

    section.side_block ul.featured > li {
        flex-direction: row !important;
    }
    section.side_block ul.featured > li div.picture {
        float: left;
        width: 90px;
        min-width: 90px;
        height: 75px;
        margin-right: 10px;
        border-radius: 12px;
        padding-bottom: 0;
    }
    section.side_block ul.featured div.picture img {
        background-size: 50% auto;
    }
    section.side_block ul.featured > li > ul {
        padding: 0 !important;
        overflow: hidden;
        width: auto !important;
        background: none;
        border: 0;
    }

    .seller-short ul.seller-info {
        min-width: 170px;
    }
}
/*** SUPER LARGE DESKTOP VIEW ***/
@media screen and (min-width: 1440px) {
    .point1 {
        /* max-width: 1380px;*/
        max-width: 93vw;
    }

    body.no-sidebar aside.two-middle .featured > li {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    body.no-sidebar aside:not(.two-middle) section:not(.side_block) .featured > li {
        flex: 0 0 20%;
        max-width: 20%;
    }

    body:not(.no-sidebar) aside:not(.two-middle) section:not(.side_block) .featured > li {
        flex: 0 0 25%;
        max-width: 25%;
    }

    body:not(.no-sidebar) section.grid > article {
        flex: 0 0 25%;
        max-width: 25%;
    }

    body.no-sidebar section.grid > article {
        flex: 0 0 20%;
        max-width: 20%;
    }

    body.no-sidebar.search-on-map-page section.grid > article {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .page-footer .mobile-apps {
        display: flex;
        flex-direction: column;
    }
}
/*** MIDDLE DESKTOP VIEW ***/
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .point1 {
        max-width: 92vw;
    }

    body.home-page:not(.no-sidebar) section#content {
        float: left;
    }

    .seller-short ul.seller-info {
        min-width: 110px;
    }

    ul.featured .icons {
        width: 100%;
        margin-top: 20px;
    }

    section.side_block ul.featured .icons {
        margin-top: 5px;
    }

    section#listings.list div.picture {
        width: 176px;
        height: 176px;
    }
    section#listings ul.card-info > li {
        margin-bottom: 4px;
    }
    section#listings.grid ul.card-info {
        padding: 15px;
    }

    aside.top section.content_block {
        padding-top: 0;
        padding-bottom: 48px;
    }
    aside.bottom section.content_block {
        padding-top: 40px;
    }

    .no-sidebar aside.middle {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    aside.middle {
        padding-top: 10px;
    }

    aside.two-middle section.content_block {
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .grid_navbar {
        margin-bottom: 15px;
    }

    .page-footer > div {
        padding: 40px 0 48px 0;
    }
}
/*** ALL TABLET/DESKTOP VIEWS ***/
@media screen and (min-width: 768px) {
    .user-navbar-right .circle:not(:last-child):after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 16px;
        background: var(--top-navigation-menu-border-color);
        margin: 14px 5px 0;
    }

    .main-menu {
        justify-content: space-between;
    }
    .main-menu .menu .menu-content {
        display: flex;
        align-items: center;
        overflow: hidden;
        height: 44px;
    }
    .main-menu .menu .menu-content a {
        white-space: nowrap;
        align-items: center;
        display: inline-flex;
        height: 44px;
        padding: 14px 0;
        font-size: 0.813rem;
    }
    .main-menu .menu .menu-content > a:not(:first-child) {
        margin-left: 16px;
    }
    .menu a.active {
        box-shadow: 0 2px 0 var(--button-color) inset;
    }

    .add-property {
        border: 0 !important;
        background: linear-gradient(90deg, var(--noiz-dark-orange) 0%, var(--noiz-light-orange) 100%);
        color: white !important;
        padding: 0 15px 0 13px !important;
    }
    .add-property:hover {
        background: var(--noiz-light-orange) !important;
    }
    .add-property:before {
        content: '+';
        font-size: 22px;
        font-weight: 500;
        margin-right: 10px;
        margin-top: -3px;
    }

    section#listings.list ul.card-info > li.fields {
        flex-direction: column;
    }
    section#listings.list li.system {
        position: absolute;
        width: 190px;
        right: 15px;
        flex-direction: column-reverse;
        gap: 10px;
        align-content: flex-end;
    }
}

/*** ALL TABLET/MOBILE VIEWS ***/
@media screen and (max-width: 991px) {
    .home-page .main-wrapper .header-tabs__tabs-exists {
        margin-top: 28px !important;
    }
    .search-block-content {
        padding: 14px 0 0 0;
    }
    .search-block-content.no-tabs {
        background: var(--content-background-color);
    }
    body.home-page section.content_block > h3 {
        font-size: 1.25em;
        font-weight: 600;
    }
    section.content_block:not(.no-header) > div,
    section.side_block:not(.no-header) > div {
        margin-top: 20px;
        width: 100%;
		display: block !important;
    }

    ul.featured .icons {
        width: 100%;
        margin-top: 20px;
    }

    aside.bottom section.content_block {
        padding-top: 32px;
    }

    aside.two-middle section.content_block {
        padding-top: 32px;
        padding-bottom: 0;
    }

    .no-sidebar aside.middle {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    aside.middle {
        padding-top: 10px;
    }

    .bumpup-page-page section.side_block {
        margin-top: 20px;
    }

    section.side_block.similarListings {
        margin-top: 15px;
        padding: 30px;
    }

    section.side_block > h3 {
        display: inline-block;
    }

    section#listings.grid ul.card-info > li.system {
        padding-top: 8px;
    }

    .home-page section#main_container aside.left {
        margin-bottom: 0;
    }

    .home-page section#main_container aside.left section.side_block {
        margin-top: 20px;
    }

    section#main_container aside.left.second-copy {
        margin-top: 20px;
    }

    body.view-details-page.get-details-box section#main_container section.seller-short {
        display: none;
    }

    section.side_block_search > h3 {
        color: var(--body-font-color);
    }

    div.search-footer div.align-button {
        text-align: right;
    }

    ul#messages_area > li > span {
        display: block;
    }

    .search-block-content form div.search-form-cell {
        width: 50%;
    }

    .grid_navbar {
        margin-bottom: 15px;
    }

    ul.plans {
        white-space: normal !important;
        display: block !important;
    }
    ul.plans > li {
        max-width: none !important;
    }
    ul.plans > li > div.frame {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
    ul.plans > li > div.frame div.selector {
        padding-top: 20px !important;
    }
    ul.plans > li > div.frame div.selector,
    ul.plans > li > div.frame span.description {
        position: static !important;
    }

    .page-footer > div {
        padding: 40px 0 48px 0;
    }
    .page-footer .mobile-apps a {
        margin-top: 0;
    }
}
/*** FIXED TABLET VIEW ***/
@media screen and (width: 768px) {
    .main-menu nav.menu ul.menu {
        right: 0;
    }
}
/*** TABLET VIEW ***/
@media screen and (min-width: 768px) and (max-width: 991px) {
    .point1 {
        max-width: 720px;
    }
    .header-nav {
        min-height: 100px;
    }
    section.content_block {
        margin-bottom: 20px;
    }
    aside.middle section.content_block:last-child {
        margin-bottom: 0;
    }

    section.side_block div.subscribe input {
        width: 100% !important;
    }

    /* owner details box */
    div.row > div.form {
        margin-top: 0 !important;
    }
    /* owner details box end */

    aside.bottom {
        margin-top: 20px;
    }

    section.seller-short > div > div.picture img {
        height: 92px;
    }

    section.side_block_search div.search-item {
        width: 100%;
        display: inline-block;
        vertical-align: top;
    }
    section.side_block_search div.search-item:nth-of-type(2n) {
        margin-right: 0;
    }
    .search-item.checkbox-field > .custom-input {
        width: 50%;
    }
    .field.search-item.checkbox-field > .custom-input {
        width: 33.33%;
    }
    .search-item.couple-field > .custom-input {
        width: 33.33%;
    }

    section#listings.grid ul.info {
        padding-top: 8px;
    }
    section#listings.list ul.info {
        max-width: 320px;
    }
    .link-large {
        font-size: 1.286em;
    }

    section.account-location table.info {
        float: left;
        width: 235px;
        display: inline-block;
    }
    section.account-location div.location-info {
        float: left;
        max-width: 300px;
    }
    section.account-location div.map-capture {
        width: 55%;
        margin: -18px -18px -18px 0;
        float: right;
    }

    body.no-sidebar .advanced-search-form {
        width: 80%;
    }
}
/*** MOBILE VIEW ***/
@media screen and (max-width: 767px) {
    body > svg.hide {
        display: none !important;
    }

    body.home-page section#main_container > div.inside-container {
        padding-left: 0;
        padding-right: 0;
    }

    div.top-header > div.point1 {
        min-width: auto;
    }

    h1 {
        font-size: 1.714em;
        margin-bottom: 20px;
        padding: 0 15px;
    }
    .h1-nav nav > a.post_ad {
        margin-right: 10px;
        width: 34px;
    }

    .h1-nav nav > a:not(.button) {
        height: 34px;
    }
    .h1-nav nav > a.post_ad:before,
    .h1-nav nav > a.post_ad:after {
        content: "";
        position: absolute;
        width: 16px;
        top: 16px;
        left: 9px;
    }
    .h1-nav nav > a.post_ad:after {
        width: 2px;
        height: 16px;
        top: 9px;
        left: 16px;
    }

    .text-notice {
        padding-left: 15px;
        padding-right: 15px;
    }

    .point1 {
        max-width: 540px;
        min-width: 320px;
    }

    div#header-banner {
        padding: 0 15px;
    }

    .circle .default svg + span {
        display: none !important;
    }

    div#logo img {
        width: auto;
        height: 52px;
    }

    .main-menu {
        align-items: center;
    }

    .user-navbar .circle {
        margin: 0;
    }
    .user-navbar .circle .default > span {
        width: 0;
        text-indent: -1000px;
    }
    .user-navbar .circle .default:before {
        margin: 0 !important;
    }

    header.page-header .mobile-menu a.button.add-property {
        align-items: center;
        justify-content: center;
        font-size: 0.75em;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        margin: 15px 15px 0 15px;
        color: #ffffff;
    }

    .menu {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
    .menu a:last-child {
        margin-right: auto;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 300;
        top: 0;
        left: 0;
        max-width: 375px;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        background: var(--content-background-color);
        box-shadow: 0 0 0 5000px  rgba(17, 17, 17, 0.4);
        transition: background var(--duration) var(--timing);
    }
    .mobile-menu .mobile-menu-header {
        display: flex !important;
        width: 100%;
        min-height: 64px;
        padding: 0 15px;
        border-bottom: 1px solid var(--top-navigation-menu-border-color);
    }
    .mobile-menu .welcome {
        padding: 10px 15px;
    }
    .mobile-menu .mobile-menu-header > .mobile-menu-header-title {
        font-size: 28px;
        font-weight: 300;
    }
    .mobile-menu .menu-content {
        background: var(--top-navigation-background-color);
        width: 100%;
    }
    .mobile-menu .menu-content a {
        display: block;
        padding: 4px 15px;
    }
    .mobile-menu .menu-content .account-menu-content a {
        padding-top: 0;
        padding-bottom: 0;
    }
    .mobile-menu .udm-header {
        padding: 12px 15px;
        border-bottom: 1px solid var(--border-color);
    }
    .mobile-menu .udm-credits-bar {
        padding: 10px 15px;
        border-bottom: 1px solid var(--border-color);
    }
    .mobile-menu .account-menu-content.udm-menu {
        padding: 4px 8px;
    }
    .mobile-menu .udm-menu-divider {
        margin: 4px 0;
    }
    .mobile-menu a:hover {
        opacity: 1;
    }
    .mobile-menu a.active {
        color: var(--body-font-color);
    }
    .mobile-menu a.active:after {
        display: none;
    }
    .mobile-menu ul.account-menu-content {
        display: block;
    }

    .mobile-menu ul.account-menu-content > li {
        padding: 0;
    }
    .mobile-menu ul.account-menu-content > li a {
        font-size: 0.875em;
        display: flex;
        align-items: center;
    }
    .mobile-menu ul.account-menu-content > li a:not(.logout) {
        color: var(--link-color);
    }
    .mobile-menu .lang-selector a {
        font-weight: 400;
        padding: 0;
    }
    .mobile-menu .user-navbar-container {
        display: block;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .mobile-menu .user-navbar-container a {
        color: var(--link-color);
        margin-top: 12px;
        font-weight: 400;
        text-transform: capitalize;
        padding: 0;
        height: auto !important;
    }
    .mobile-menu .account-menu-content a {
        font-weight: 400;
        text-transform: capitalize;
    }

    span.mobile-menu-header svg.mobile-close-icon {
        width: 44px;
        height: 44px;
        fill: var(--body-font-color);
        padding: 16px;
        margin-right: -16px;
        margin-left: auto;
    }
    span.mobile-menu-header > span:last-child:hover:before {
        opacity: 1;
    }

    .main-menu span.menu-button {
        height: 34px;
        cursor: pointer;
        font-size: 0.813em;
        font-weight: 600;
        color: var(--body-font-color);
        margin-left: -8px;
    }
    .main-menu span.menu-button > svg {
        width: 20px;
        height: 14px;
        filter: var(--icon-filter);
        transition: background var(--duration) var(--timing);
        fill: var(--header-icon-fill);
    }
    .main-menu span.menu-button:hover > span {
        background: #040e03;
    }
    .main-menu nav.menu ul.menu {
        display: none;

        background: #2b2b2b;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 105;
        min-width: 230px;
        max-width: 305px;
        bottom: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 58px 22px 55px;
    }
    .main-menu nav.menu ul.menu li.more {
        margin-bottom: 30px;
    }
    .main-menu nav.menu ul.menu > li > a {
        padding: 8px 0;
        display: inline-block;
    }
    .main-menu nav.menu ul.menu > li > a:hover {
        color: #67cc85;
    }
    .main-menu nav.menu ul.menu > li.active > a {
        color: white;
    }

    .carousel .carousel-caption {
        left: 80px;
        right: 80px;
    }
    .carousel .carousel-item {
        height: 220px;
    }
    .carousel .carousel-item img {
        border-radius: 0;
    }
    .carousel .carousel-slide-heading {
        font-size: 24px;
        line-height: 28px;
    }
    .carousel .carousel-slide-description {
        display: none;
    }
    .carousel a.button {
        margin-top: 12px;
    }
    .carousel .carousel-indicators {
        bottom: 12px;
    }

    .home-page .header-tabs.point1 {
        max-width: none;
    }
    .home-page .header-tabs .horizontal-search {
        max-width: 540px;
        margin: 0 auto;
    }

    ul.featured .icons {
        width: auto;
        margin-top: 10px;
    }
    ul.featured > li > ul {
        padding-top: 8px;
    }
    ul.featured.with-pictures ul.card-info > li.title a {
        font-size: 1rem;
    }

    ul.tabs.search_tabs {
        width: 100%;
    }
    ul.tabs.search_tabs.tabs_count_2 > li {
        width: 50%;
        padding-right: 10px;
    }
    ul.tabs.search_tabs.tabs_count_3 > li {
        width: 33.333%;
        padding-right: 10px;
    }
    ul.tabs.search_tabs.tabs_count_4 > li {
        width: 25%;
        padding-right: 10px;
    }
    ul.tabs.search_tabs.tabs_count_2 > li a,
    ul.tabs.search_tabs.tabs_count_3 > li a,
    ul.tabs.search_tabs.tabs_count_4 > li a {
        width: 100%;
    }
    ul.tabs.search_tabs > li > a {
        padding: 0 10px;
        font-size: 1em;
    }

    .my-profile-page ul.tabs, .search-page ul.tabs {
        margin: 0 15px;
    }

    .search-block-content form div.search-form-cell {
        width: 100%;
    }
    .search-form-cell {
        width: 100%;
    }
    .search-form-cell > div > div,
    .search-form-cell > div span.pills {
        width: 100% !important;
    }
    .search-form-cell.numeric-field {
        width: 50%;
    }
    .search-form-cell.submit > div {
        margin-top: 15px;
    }
    .search-form-cell.submit > div > span {
        display: none;
    }
    div.subscribe input[type="text"] {
        max-width: none !important;
    }

    .main-menu nav.menu ul.menu {
        padding: 58px 14px 55px 22px;
    }

    section.content_block,
    section.side_block {
        margin-left: 15px;
        margin-right: 15px;
    }

    .grid_navbar {
        margin: -15px 15px 10px;
    }

    .booking-availability {
        max-width: none !important;
    }

    .category-description,
    #controller_area > .tabs {
        padding: 0 15px;
    }

    /* home content block */
    section.home-content {
        margin: 0 0 20px 0;
    }
    aside.bottom {
        margin-top: 20px;
    }
    /* home content block end */

    #bread_crumbs > ul {
        padding-left: 15px;
        padding-right: 15px;
    }

    .grid_navbar.listings-area .buttons > div.grid {
        display: none;
    }

    /* listing list view */
    section#listings ul.nav-column > li .icon {
        top: 0;
    }
    section#listings ul.nav-column > li > a > span.link,
    section#listings ul.nav-column > li > span.link {
        display: none;
    }

    section#listings .item:hover .main-column {
        box-shadow: none;
    }
    section.list {
        margin: 0 -5px;
        padding: 0 15px;
    }

    .my-all-ads-page section.list > article {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    section.list:not(.my-listings) > article {
        flex: 0 0 50%;
        max-width: calc(50% - 10px);
        margin: 5px;
        padding: 0 0 20px 0;
    }
    section#listings.list div.picture {
        width: 100%;
        height: auto;
        padding-bottom: 100%;
    }
    section#listings .link-large {
        font-size: 1em !important;
    }
    section#listings.list ul.card-info {
        padding: 8px 0 0 0;
        width: 100%;
    }
    section#listings.list ul.card-info .system {
        gap: 10px;
    }
    section#listings ul.card-info span.favorite {
        display: inline-block;
        vertical-align: middle;
    }
    section#listings.list ul.card-info span.favorite {
        float: right;
        margin-top: 5px;
    }
    section#listings.list ul.card-info > li:last-child {
        padding-bottom: 0;
        justify-content: space-between;
        align-items: center;
    }
    section#listings.list ul.card-info > ol {
        display: none;
    }
    /* listing list view end */

    .listing-header h1 {
        margin: 0 15px;
    }
    .listing-header div.icons {
        justify-content: center;
        margin: 8px 0;
    }
    div.listing-details.loc-exists .content-section {
        margin-top: 30px;
        padding: 0 15px;
    }
    
    #area_keyword form.kws-block .two-inline {
        width: 100%;
    }

    div.listing-details h1 {
        margin-bottom: 15px;
        padding: 0;
    }
    div.listing-details .top-navigation {
        padding: 0 10px;
    }
    .seller-short.landscape div.picture {
        float: none;
    }

    div.submit-cell {
        flex-direction: column;
    }
    div.submit-cell > div.name {
        padding: 0;
        min-height: 26px;
        line-height: 26px;
        flex-basis: auto;
    }
    div.submit-cell > div.name:empty {
        display: none;
    }
    #modal_block div.submit-cell div.name {
        width: 120px;
    }

    div.submit-cell.buttons div.name {
        min-height: inherit;
        height: 0;
    }
    .field.single-field > select {
        width: 100%;
    }
    .field.single-field > input[type="text"] {
        width: 100%;
    }
    .form-buttons.form a {
        width: auto;
    }
    section#accounts.grid {
        display: flex;
        justify-content: center;
    }
    section#accounts > article > div,
    section#accounts > article > ul {
        width: auto !important;
    }
    section#accounts .landscape div.statistics {
        width: 260px;
    }
    section#accounts ul.info {
        width: 290px;
    }

    section.seller-short > div > div.picture {
        margin: 0 20px 0 0;
        float: left;
    }
    section.seller-short > div > div.picture img {
        max-width: 150px;
        height: auto;
    }
    section.seller-short ul.seller-info > li:first-child {
        margin-top: 0;
    }
    section.seller-short ul.seller-info {
        overflow: hidden;
    }

    section.seller-short div.picture + div div.name,
    section.account-location div.name {
        width: 120px !important;
    }
    section.seller-short div.picture > div:first-child {
        margin-top: 10px;
    }
    section.seller-short div.counter {
        display: block;
    }
    .account-location .map-capture {
        margin: 15px -10px 0;
    }

    ul.steps.mobile {
        margin-left: 15px;
        margin-right: 15px;
    }
    ul.steps.mobile > li {
        display: none;
    }
    ul.steps.mobile > li.prev,
    ul.steps.mobile > li.current,
    ul.steps.mobile > li.current + li,
    ul.steps.mobile > li.current + li + li {
        display: inline-block;
        width: 33.33333% !important;
    }
    ul.steps.mobile > li.prev + li + li + li {
        display: none !important;
    }

    .form-buttons {
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    table.contacts-list tr > td:nth-child(2n) {
        display: none;
    }
    table.contacts-list div.name span.new {
        display: inline-block;
    }

    .content-padding {
        padding-left: 15px;
        padding-right: 15px;
    }
    .content-padding .content-padding,
    .content-padding .text-notice,
    div.listing-details .content-section .content-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* tables content */
    div.list-table {
        display: block;
    }
    div.list-table > div.header {
        display: none;
    }
    div.list-table > div.row {
        display: block;
        border-bottom: 2px #f8f8f8 solid;
        position: relative;
        padding: 13px 25px;
        margin: 0;
    }
    div.list-table > div:nth-child(2) {
        padding-top: 0;
    }
    div.list-table > div:last-child {
        padding-bottom: 0;
        border: 0;
    }
    div.list-table > div.row > div {
        display: block;
        border: 0;
        padding: 5px 0 5px 95px !important;
        overflow: hidden;
        position: relative;
    }
    div.list-table > div.row > div:not(.no-flex):before {
        content: attr(data-caption) ":";
        width: 85px;
        display: inline-block;
        white-space: normal;
        word-wrap: break-word;
        font-size: 0.929em;
        color: #949494;
        position: absolute;
        left: 0;
        top: 5px;

        /* it is the best solution for now */
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    div.list-table > div.row > div.iteration {
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -10px;
        padding: 0 !important;
    }
    div.list-table > div.row > div.action {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -12px;
    }
    div.list-table > div.row > div > div.inline {
        display: inline-block;
    }
    div.list-table > div.row > div.content {
        padding-top: 2px !important;
    }
    /* tables content end */

    /* my listings */
    section#listings.my-listings .item div.info {
        width: 100%;
        padding: 0 0 10px 0;
        margin: 0;
    }
    section#listings.my-listings .item div.picture > span {
        width: 34px;
        height: 24px;
        bottom: 20px;
        right: 20px;
        line-height: 22px;
        font-size: 1.071em;
    }
    section#listings.my-listings .item div.info .title {
        position: absolute;
        top: 10px;
        background: white;
        height: 38px;
        line-height: 36px;
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
        max-width: 100%;
        white-space: nowrap;
    }
    section#listings.my-listings .item .title {
        padding: 0 10px;
        margin-bottom: 15px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    section#listings.my-listings .item.featured div.info .title {
        background: #fb6a5c;
        color: #010101;
    }
    section#listings.my-listings div.picture > div.label {
        display: none;
    }
    section#listings.my-listings .item div.navigation {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    section#listings.my-listings .item div.navigation > ul {
        padding: 10px 10px 0;
    }
    section#listings.my-listings .item div.navigation > ul > li {
        display: inline-block;
        vertical-align: top;
        padding-bottom: 0;
    }
    section#listings.my-listings .item div.navigation > ul > li.single-inline {
        display: block;
        margin-bottom: 5px;
    }
    section#listings.my-listings .item div.navigation > ul > li select {
        max-width: 200px;
        width: 100%;
    }
    section#listings.my-listings .item div.navigation > ul > li.nav-icon {
        padding: 8px 0 0 12px;
    }
    section#listings.my-listings .item div.navigation > ul > li a {
        padding: 5px 10px;
    }
    section#listings.my-listings .item div.navigation > ul > li a > span {
        display: none;
    }

    section#listings.my-listings .item div.stat {
        display: block;
        width: 100%;
        position: relative;
    }
    section#listings.my-listings .item div.stat > ul {
        padding: 0 10px;
    }
    section#listings.my-listings .item div.stat .two-inline > *:first-child {
        float: none;
    }
    section#listings.my-listings .item div.stat ul > li {
        width: 48%;
        display: inline-block;
        vertical-align: top;
        margin-right: 4%;
    }
    section#listings.my-listings .item div.stat ul > li:nth-child(2n) {
        margin-right: 0;
    }

    .listing-picture-slider__navbar {
        padding: 0;
    }
    .listing-picture-slider__navbar > span {
        padding: 0;
    }
    /* my listings end */

    #controller_area div.fieldset.divider > header {
        margin: 0 -5px;
    }

    div.plans-container {
        margin: 0px 15px;
        width: auto !important;
    }

    .steps.mobile ~ form > div.plans-container {
        margin: 0;
    }
    
    .edit-listing-page .selected-plan,
    .add-listing-page .selected-plan {
        padding-top: 0 !important;
    }
    .edit-listing-page div.fieldset#fs_shipping_details,
    .add-listing-page div.fieldset#fs_shipping_details {
        margin: 0 -15px;
    }
    
    div.fieldset.light > header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .advanced-search-form div.fieldset.light > header {
        padding-left: 15px !important;
    }

    .bumpup-page-page div.fieldset.light > header {
        padding: 7px 30px !important;
    }

    ul.pagination {
        padding-left: 20px;
        padding-right: 20px;
    }

    ul.account-menu-content > li {
        padding: 2px 0 10px;
    }
    ul.account-menu-content > li a {
        font-size: 1.143em;
    }

    .modal_block div.inner div.close {
        right: 20px;
    }

    section.side_block table.table td.name {
        width: 45%;
    }
}
@media screen and (max-width: 575px) {
    .login-page-form {
        max-width: 100%;
        padding: 15px;
    }
    .dynamic-content div.listing-form .form-media,
    section.content_block.highlighted:not(.no-style) > div,
    div.submit-cell.selected-category,
    div.submit-cell.selected-category ~ div.submit-cell,
    div.list-table.transactions,
    .payment-history,
    div.area_profile,
    div.area_done,
    #controller_area #listing_form > .submit-cell,
    #controller_area div.fieldset > div.body > div,
    #controller_area .content-padding > .tab_area:not(#area_keyword),
    #controller_area .content-padding > .tab_area form.kws-block,
    #controller_area .content-padding > .step_area,
    #controller_area .content-padding > .submit-cell,
    #controller_area .content-padding > .advanced-search-form > .submit-cell,
    #controller_area .content-padding > .account-menu-content,
    .contact-us-page .content-padding > form,
    #controller_area .plans-container {
        padding: 15px;
    }
    #controller_area #area_profile div.fieldset {
        margin-left: -15px;
        margin-right: -15px;
    }

    .my-all-ads-page section.list {
        margin: 0;
    }
    .tabs ~ .text-notice {
        padding: 15px;
    }

    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
        display: none !important;
    }

    section.side_block .search-block-content.no-tabs {
        padding: 0;
    }

    .carousel .carousel-caption {
        left: 15px;
        right: 15px;
    }
    .carousel .carousel-slide-heading {
        font-size: 20px;
        line-height: 24px;
    }
    .carousel a.button {
        margin-top: 14px;
    }

    .home-page .header-tabs .tabs {
        scroll-snap-type: x mandatory;
        margin-left: 15px;
        margin-right: 15px;
    }
    .home-page .header-tabs .tabs li {
        min-width: auto;
        scroll-snap-align: start;
    }
    ul.tabs > li > a {
        font-size: 0.875rem;
    }
    .search-block-content {
        padding: 10px 0 0 0;
    }

    ul.featured {
        margin-left: -5px;
        margin-right: -5px;
    }
    ul.featured > li {
        padding-left: 5px;
        padding-right: 5px;
    }

    body.home-page aside.top section.content_block.listings_box,
    body.home-page aside.middle section.content_block.listings_box {
        padding-left: 0;
        padding-right: 0;
    }

    section#listings.list .item:hover .main-column {
        box-shadow: none;
    }

    section.side_block.similarListings {
        padding: 15px;
    }

    .seller-short .button-exists ~ div {
        margin-top: 30px;
    }

    .compare-ad-tab svg.compare-close {
        fill: var(--body-font-color) !important;
    }

    .page-footer > div {
        padding: 20px 0 28px;
    }
}

@media screen and (max-width: 440px) {
    .carousel .carousel-slide-heading {
        font-size: 18px;
        line-height: 22px;
    }

    .circle_mobile-full-width {
        position: static !important;
    }
    .circle_mobile-full-width .content {
        top: 64px;
    }

    ul.card-info > li.price_tag > div > span,
    ul.card-info .price-tag > span,
    ul.card-info > li.system .type {
        font-size: 1.125em;
    }
}
@media screen and (max-width: 383px) {
    section.seller-short > div > div.picture {
        margin: 0 0 15px 0;
        float: none;
    }
    section.seller-short > div > div.picture img {
        max-width: 150px;
        height: auto;
    }
    section.seller-short ul.seller-info {
        overflow: auto;
    }
    section#listings.my-listings .item > div.navigation > ul > li select {
        width: 130px;
    }
    .field.inline-fields > span.custom-input {
        padding: 0 20px 0 0;
    }
}
/*** RESPONCIVE END ***/

/*** PIXEL RATIO 1.5 ***/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 144dpi) {
    span.mobile-menu-header > span:last-child:before {
        background: url("../img/@2x/gallery2.png") right -50px no-repeat;
        background-size: 40px auto;
    }

    ul.card-info > li.services > span:before {
        background: url("../img/@2x/gallery2.png") right -148px no-repeat;
        background-size: 40px auto;
    }
    ul.card-info > li.services > span.bathrooms:before {
        background-position: right -132px;
    }
    ul.card-info > li.services > span.square_feet:before {
        background-position: right -162px;
    }

    label.switcher > input[type="checkbox"] + span:not(.status):before {
        background-image: url("../img/@2x/gallery2.png");
        background-position: -8px -972px;
        background-repeat: no-repeat;
        background-size: 40px auto;
    }
    label.switcher > input[type="checkbox"]:checked + span:not(.status):before {
        background-image: url("../img/@2x/gallery2.png");
        background-position: 0 -972px;
        background-repeat: no-repeat;
        background-size: 40px auto;
    }

    ul.menu-mobile:before {
        background: url("../img/@2x/gallery2.png") right -409px no-repeat;
        background-size: 40px auto;
    }
    .grid_navbar div.map > div > span {
        background: url("../img/@2x/gallery2.png") 0 -546px no-repeat;
        background-size: 40px auto;
    }
    .grid_navbar div.map:hover span,
    .grid_navbar div.map.active span {
        background: url("../img/@2x/gallery2.png") right -546px no-repeat;
        background-size: 40px auto;
    }

    span.media-enlarge:after {
        background: url("../img/@2x/gallery2.png") left -345px no-repeat;
        background-size: 40px auto;
    }

    #loan_reset_form {
        background: url("../img/@2x/gallery2.png") right -426px no-repeat;
        background-size: 40px auto;
    }

    .seller-short form div.field > input + span {
        background: url("../img/@2x/gallery2.png") right -373px no-repeat;
        background-size: 40px auto;
    }
    .seller-short form div.field > input[name="contact_email"] + span {
        background-position: right -391px;
    }
    .seller-short form div.field > input[name="contact_phone"] + span {
        background-position: right -407px;
    }

    .modal_block div.inner div.close > div {
        background: url("../img/@2x/gallery2.png") right -326px no-repeat;
        background-size: 40px auto;
    }

    section#accounts > article div.no-picture div.picture img,
    div.no-picture img.account-picture {
        background-image: url("../img/@2x/no-account.png");
        background-size: contain;
    }

    section.side_block > span.expander {
        background: url("../img/@2x/gallery2.png") right -502px no-repeat;
        background-size: 40px auto;
    }
    section.side_block > span.expander.active {
        background-position: 0 -502px;
    }

    input.search:hover {
        height: 37px;
        background: url("../img/gallery.png") 12px -431px no-repeat #fec04f;
    }

    div.close-black > div {
        background: url("../img/@2x/gallery2.png") right -675px no-repeat;
        background-size: 40px auto;
    }
    .close-red {
        background: url("../img/@2x/gallery2.png") -25px -53px no-repeat;
        background-size: 40px auto;
    }
    div.close-black:hover > div,
    .close-red:hover {
        opacity: 0.8;
    }
    img.remove {
        background: url("../img/@2x/gallery2.png") 0 -857px no-repeat;
        background-size: 40px auto;
    }

    ul#messages_area > li > span {
        background: url("../img/@2x/gallery2.png") right -326px no-repeat;
        background-size: 40px auto;
    }

    img.qtip {
        background-image: url("../img/@2x/gallery2.png");
        background-position: 6px -325px;
        background-size: 40px auto;
    }

    #controller_area div.fieldset > header > span.arrow {
        background: url("../img/@2x/gallery2.png") -20px -77px no-repeat;
        background-size: 40px auto;
    }
    .my-listings div.navigation ul li.nav-icon > a:before {
        background: url("../img/@2x/gallery2.png") 0 -775px no-repeat;
        background-size: 40px auto;
    }
    .my-listings div.navigation ul li.nav-icon > a.add-video:before {
        background-position: 0 -821px;
    }
    .my-listings div.navigation ul li.nav-icon > a.edit:before {
        background-position: 0 -755px;
    }
    .my-listings div.navigation ul li.nav-icon > a.unsubscription:before {
        background-position: left -933px;
    }
    .my-listings div.navigation ul li.nav-icon > a.delete:before,
    .delete.icon {
        background: url("../img/@2x/gallery2.png") right -755px no-repeat;
        background-size: 40px auto;
    }
    span.media-enlarge > span {
        background: url("../img/@2x/gallery2.png") right -604px no-repeat;
        background-size: 40px auto;
    }

    div.map-capture > img {
        background-size: auto 100%;
    }
    div.controls a#advanced_search:after {
        background: url("../img/@2x/gallery2.png") right -449px no-repeat;
        background-size: 40px auto;
    }

    #search_area #advanced_search:after {
        background: url("../img/@2x/gallery2.png") -34px -449px no-repeat;
        background-size: 40px auto;
    }
}
/*** PIXEL RETIO 1.5 END ***/

.fieldset a:link, .fieldset a:visited, .fieldset .link { color: var(--body-font-color); }

#theme-switcher .icon path {
  fill: var(--noiz-dark-orange) !important;
}


article.highlight a.link-large, article.highlight ul.ad-info > li.title > a { background: none !important; box-shadow: none !important; }
.text-notice a:link {
    color: var(--noiz-dark-orange);
}

.banners { padding: 0px; }

#banner_14, #banner_12, #banner_13, #banner_11, #banner_8, #banner_25, #banner_21, #banner_21, #banner_20, #banner_3, #banner_5 {
  width: auto !important;
  height: auto !important; 
}

.fieldset .cf-apply a { color: var(--noiz-light-orange); border-bottom: 1px dotted;  }

/* Mobile responsive styles for messaging and avatars */
@media (max-width: 767px) {
    /* Mobile sticky behavior for user info */
    .messaging-user-info {
        position: sticky;
        top: 0;
        z-index: 100;
        margin-bottom: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 16px;
    }
    
    .user-info-header {
        gap: 12px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    
    .user-avatar {
        width: 50px;
        height: 50px;
    }
    
    .user-name {
        font-size: 1.125em;
    }
    
    .user-actions .button {
        font-size: 0.813em;
        padding: 8px 14px;
    }
    
    .user-contact-details {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Mobile message adjustments */
    ul#messages_area li {
        gap: 8px;
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .message-avatar {
        width: 35px;
        height: 35px;
    }
    
    .message-avatar .avatar-initials {
        width: 35px;
        height: 35px;
        font-size: 0.875em;
    }
    
    .sender-name {
        font-size: 0.688em;
        max-width: 45px;
    }
    
    .message-text {
        font-size: 0.875em;
    }

    /* Full width send button on mobile */
    div.send-controls #send_message {
        width: 100%;
    }

    /* Avatar sizing for mobile */
    .messaging-user-info .avatar-initials {
        width: 50px;
        height: 50px;
        font-size: 1.125em;
    }

    /* Messages list mobile adjustments */
    .message-item-link {
        gap: 12px;
        padding: 12px;
    }

    .message-item-avatar .avatar-initials,
    .message-item-avatar img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

    .unread-badge {
        width: 20px;
        height: 20px;
        font-size: 0.688em;
    }

    .message-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .message-item-name {
        font-size: 0.938em;
    }

    .message-item-preview {
        font-size: 0.813em;
    }

    .message-item-arrow {
        display: none;
    }
}

/* Desktop - not sticky */
@media (min-width: 768px) {
    .messaging-user-info {
        position: relative;
    }
}

.home-page .middle .banners { padding-top: 15px !important; padding-bottom: 15px !important; }


 .banners { padding: 0px; }
 
 #banner_14, #banner_12, #banner_13, #banner_11, #banner_8, #banner_25, #banner_26, #banner_21, #banner_21, #banner_20, #banner_3, #banner_5, #banner_6, #banner_32, #banner_10, #banner_34, #banner_38, #banner_24, #banner_33, #banner_39, #banner_40, #banner_41, #banner_42, #banner_27,  #banner_39, #banner_15, #banner_19, #banner_44, #banner_45, #banner_46, #banner_47, #banner_48 {
   width: auto !important;
   height: auto !important; 
 }
 
 .banners-box {
   width: auto !important;
   height: auto !important;  
 }
 
 #banner_3 { padding-bottom: 35px; }

.fieldset .cf-apply a { color: var(--noiz-light-orange); border-bottom: 1px dotted;  }
.home-page .middle .banners { padding-top: 15px !important; padding-bottom: 15px !important; }
.listings_box a.m-auto  { font-size: 1.25rem; color: var(--noiz-black); border-bottom: 1px dotted var(--noiz-light-orange); }
 .no-header.banners { padding: 0 !important; }

/* Login Popup */
.login-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-popup-overlay.hide {
    display: none;
}

/* Login Modal Content - same styling as popup */
.login-modal-content {
    padding: 20px;
}
.login-modal-content .login-popup-title {
    margin-bottom: 20px;
}

.login-popup,
.login-modal-content {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    padding: 30px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
/* Desktop: header/body wrappers invisible */
.login-popup-header {
    display: contents;
}
.login-popup-body {
    display: contents;
}
.login-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 4px;
}
.login-popup-close svg {
    width: 24px;
    height: 24px;
    fill: #666;
}
.login-popup-close:hover svg {
    fill: #333;
}
.login-popup-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 25px;
    text-align: center;
    color: #111;
}
.login-popup-alert {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.875rem;
}
.login-popup-field {
    margin-bottom: 16px;
}
.login-popup-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: #333;
    font-size: 0.9375rem;
}
.login-popup-field input[type="text"],
.login-popup-field input[type="password"],
.login-popup-field input[type="email"] {
    width: 100%;
    padding: 13px 15px;
    background: #fff;
    border: 1.5px solid #e3e6ea;
    border-radius: 10px;
    font-size: 0.9375rem;
    color: #1a1a1a;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.login-popup-field input::placeholder {
    color: #9aa3ab;
    opacity: 1;
}
.login-popup-field input:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}
.login-popup-password-wrap {
    position: relative;
}
.login-popup-password-wrap input {
    padding-right: 45px;
}
.login-popup-toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}
.login-popup-toggle-password svg {
    width: 22px;
    height: 22px;
    fill: #999;
}
.login-popup-toggle-password:hover svg,
.login-popup-toggle-password.visible svg {
    fill: #333;
}
.login-popup-submit {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.login-popup-submit:hover {
    background: #333;
}
.login-popup-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.login-popup-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-size: 0.875rem;
}
.login-popup-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #374151;
    font-weight: 400;
}
.login-popup-remember input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s ease;
    margin: 0;
}
.login-popup-remember input[type="checkbox"]:hover {
    border-color: #999;
}
.login-popup-remember input[type="checkbox"]:checked {
    background: #222;
    border-color: #222;
}
.login-popup-remember input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.login-popup-remember span {
    line-height: 1;
}
.login-popup-forgot {
    color: #666;
    text-decoration: none;
}
.login-popup-forgot span {
    color: #2563eb;
}
.login-popup-forgot:hover span {
    text-decoration: underline;
}
.login-popup-divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: #999;
    font-size: 0.875rem;
}
.login-popup-divider:before,
.login-popup-divider:after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}
.login-popup-divider span {
    padding: 0 15px;
}
.login-popup-social-container {
    width: 100%;
}
.login-popup-social-container .ha-icons-container {
    display: contents !important;
}
.login-popup-social-container .ha-or {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 16px 0;
    color: #6b7280;
    font-size: 0.875rem;
}
.login-popup-social-container .ha-or::before,
.login-popup-social-container .ha-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}
.login-popup-social-container .ha-or span {
    padding: 0 15px;
}
.login-popup-social-container .ha-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-popup-social-container .ha-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.login-popup-social-container .ha-social-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.login-popup-social-container .ha-social-btn-icon {
    width: 20px;
    height: 20px;
}
.login-popup-social-container .ha-btn-facebook {
    background-color: #1877F2;
    color: #fff;
}
.login-popup-social-container .ha-btn-google {
    background-color: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}
.login-popup-social-container .ha-btn-twitter {
    background-color: #000;
    color: #fff;
}
.login-popup-social-container .ha-btn-apple {
    background-color: #000;
    color: #fff;
}
.login-popup-social-container .ha-btn-apple .ha-social-btn-icon {
    fill: #fff;
}
.login-popup-social-container .ha-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.login-popup-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-popup-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}
.login-popup-social-btn:hover {
    opacity: 0.9;
}
.login-popup-social-btn svg {
    width: 20px;
    height: 20px;
}
.login-popup-facebook {
    background: #3b5998;
    color: #fff;
}
.login-popup-facebook svg {
    fill: #fff;
}
.login-popup-google {
    background: #e5e5e5;
    color: #333;
}
.login-popup-google svg {
    fill: #333;
}
.login-popup-signup {
    margin-top: 20px;
    text-align: center;
}
.login-popup-signup a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    text-decoration: none;
    font-size: 0.9375rem;
}
.login-popup-signup a:hover {
    text-decoration: underline;
}
.login-popup-signup svg {
    width: 20px;
    height: 20px;
    fill: #2563eb;
}
@media (max-width: 480px) {
    .login-popup-overlay {
        padding: 0;
        align-items: stretch;
    }
    .login-popup {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        animation: loginSlideUp 0.3s ease;
    }
    @keyframes loginSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    .login-popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
        flex-shrink: 0;
    }
    .login-popup-close {
        position: static;
        background: #f3f4f6;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    .login-popup-title {
        padding: 0;
        margin: 0;
        text-align: left;
        font-size: 1.25rem;
    }
    .login-popup-body {
        display: block;
        flex: 1;
        overflow-y: auto;
        padding: 20px;
        -webkit-overflow-scrolling: touch;
    }
    .login-popup-form {
        padding: 0;
    }
    .login-popup-options {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    .login-popup-social-container {
        padding: 0;
        margin-top: 10px;
    }
    .login-popup-signup {
        padding: 20px 0 0;
        margin-top: 20px;
        border-top: 1px solid #e5e7eb;
    }
    .login-popup-alert {
        margin: 0 0 10px;
    }
}

/* Styled Login Form */
.login-form-styled {
    padding: 0;
}
.login-form-styled .form-group {
    margin-bottom: 16px;
}
.login-form-styled .form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.login-form-styled .form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
}
.login-form-styled .form-control:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.login-form-styled .form-control::placeholder {
    color: #9ca3af;
}
.login-form-styled .password-input-wrapper {
    position: relative;
}
.login-form-styled .password-input-wrapper .form-control {
    padding-right: 44px;
}
.login-form-styled .password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6b7280;
    transition: color 0.15s ease;
}
.login-form-styled .password-toggle:hover {
    color: #374151;
}
.login-form-styled .btn-signin {
    width: 100%;
    padding: 12px 24px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.login-form-styled .btn-signin:hover {
    background: #333;
}
.login-form-styled .btn-signin:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}
.login-form-styled .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}
.login-form-styled .remember-me-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}
.login-form-styled .remember-me-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.login-form-styled .forgot-password-link {
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
}
.login-form-styled .forgot-password-link strong {
    color: #2563eb;
}
.login-form-styled .forgot-password-link:hover strong {
    text-decoration: underline;
}

/* Login Modal Social Buttons */
.login-modal-social {
    width: 100%;
    margin-top: 20px;
}
.login-modal-social .ha-icons-container {
    display: contents !important;
}
.login-modal-social .ha-icons-container.in-navigation {
    display: contents !important;
}
.login-modal-social .ha-or {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 16px 0;
}
.login-modal-social .ha-or::before,
.login-modal-social .ha-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.login-modal-social .ha-or span {
    padding: 0 12px;
    color: #6b7280;
    font-size: 0.875rem;
}
.login-modal-social .ha-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.login-modal-social .ha-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.login-modal-social .ha-social-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.login-modal-social .ha-social-btn-icon {
    width: 20px;
    height: 20px;
}
.login-modal-social .ha-btn-facebook {
    background-color: #1877F2;
    color: #fff;
}
.login-modal-social .ha-btn-google {
    background-color: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}
.login-modal-social .ha-btn-twitter {
    background-color: #000;
    color: #fff;
}
.login-modal-social .ha-btn-apple {
    background-color: #000;
    color: #fff;
}
.login-modal-social .ha-btn-apple .ha-social-btn-icon {
    fill: #fff;
}
.login-modal-social .ha-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Signup Email Link */
.signup-link-container {
    text-align: center;
    margin-top: 16px;
}
.signup-email-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #2563eb;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}
.signup-email-link:hover {
    text-decoration: underline;
}
.signup-email-link svg {
    stroke: #2563eb;
}

/* Social Login Buttons Style */
.ha-buttons-style .ha-or {
    padding: 20px 0;
}
.ha-buttons-style .ha-or:before,
.ha-buttons-style .ha-or:after {
    background: #e5e7eb;
    height: 1px;
}
.ha-buttons-style .ha-or > span {
    color: #6b7280;
    font-size: 0.875rem;
}
.ha-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ha-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
.ha-social-btn:hover {
    filter: brightness(0.95);
    text-decoration: none;
}
.ha-social-btn.ha-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.ha-social-btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Facebook Button */
.ha-btn-facebook {
    background: #4267B2;
    color: #fff;
}
.ha-btn-facebook .ha-social-btn-icon {
    fill: #fff;
}

/* Google Button */
.ha-btn-google {
    background: #e5e5e5;
    color: #333;
}
.ha-btn-google .ha-social-btn-icon {
    fill: #333;
}

/* Apple Button */
.ha-btn-apple {
    background: #000;
    color: #fff;
}
.ha-btn-apple .ha-social-btn-icon {
    fill: #fff;
}

/* Twitter Button */
.ha-btn-twitter {
    background: #1DA1F2;
    color: #fff;
}
.ha-btn-twitter .ha-social-btn-icon {
    fill: #fff;
}

/* LinkedIn Button */
.ha-btn-linkedin {
    background: #0A66C2;
    color: #fff;
}
.ha-btn-linkedin .ha-social-btn-icon {
    fill: #fff;
}

/* Contact Seller Popup */
.contact-popup-listing {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 20px;
}
.contact-popup-listing-photo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}
.contact-popup-listing-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-popup-listing-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.contact-popup-listing-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-popup-listing-seller {
    font-size: 0.8125rem;
    color: #666;
}
.contact-popup-listing-price {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
    margin-top: 4px;
}

/* Coupon Block Styles */
.coupon-block {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin: 20px 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.coupon-block:hover {
    border-color: #d1d5db;
}
.coupon-block.expanded {
    border-color: #9ca3af;
}
.coupon-block.has-coupon {
    border-color: #10b981;
}

.coupon-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}
.coupon-header:hover {
    background: transparent;
}
.coupon-block.has-coupon .coupon-header {
    cursor: default;
}
.coupon-block.has-coupon .coupon-header:hover {
    background: transparent;
}

.coupon-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.coupon-block.has-coupon .coupon-header-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.coupon-header-icon svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.coupon-header-text {
    flex: 1;
    margin-left: 14px;
}
.coupon-title {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
}
.coupon-subtitle {
    display: block;
    font-size: 0.8125rem;
    margin-top: 2px;
}

.coupon-header-arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.coupon-header-arrow svg {
    width: 18px;
    height: 18px;
}
.coupon-block.expanded .coupon-header-arrow {
    transform: rotate(180deg);
}
.coupon-block.has-coupon .coupon-header-arrow {
    display: none;
}

.coupon-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.coupon-block.expanded .coupon-body,
.coupon-block.has-coupon .coupon-body {
    max-height: 300px;
}

.coupon-input-wrap {
    padding: 0 20px 20px;
}
.coupon-input-group {
    display: flex;
    gap: 10px;
}
.coupon-input-group input {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.coupon-input-group input:focus {
    outline: none;
}
.coupon-input-group input.error {
    border-color: #ef4444;
    animation: shake 0.4s ease;
}
.coupon-input-group input::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.coupon-apply-btn {
    height: 44px;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    position: relative;
}
.coupon-apply-btn:hover {
    transform: translateY(-1px);
}
.coupon-apply-btn:active {
    transform: translateY(0);
}
.coupon-apply-btn .btn-loading {
    display: none;
}
.coupon-apply-btn.loading .btn-text {
    visibility: hidden;
}
.coupon-apply-btn.loading .btn-loading {
    display: block;
    position: absolute;
}
.coupon-apply-btn .btn-loading svg {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Applied Coupon Styles */
.coupon-applied {
    padding: 0 20px 20px;
}
.coupon-applied-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.coupon-applied-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #10b981;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.coupon-applied-badge svg {
    width: 16px;
    height: 16px;
}
.coupon-remove-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.coupon-remove-btn:hover {
    background: #ef4444;
}
.coupon-remove-btn svg {
    width: 16px;
    height: 16px;
    transition: color 0.2s ease;
}
.coupon-remove-btn:hover svg {
    color: #fff;
}

.coupon-applied-code {
    border: 1px dashed transparent;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.coupon-applied-code .code-label {
    font-size: 0.8125rem;
}
.coupon-applied-code .code-value {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
}

.coupon-applied-breakdown {
    border-radius: 10px;
    padding: 4px 0;
}
.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
}
.breakdown-row:not(:last-child) {
    border-bottom: 1px solid transparent;
}
.breakdown-label {
    font-size: 0.875rem;
}
.breakdown-value {
    font-size: 0.9375rem;
    font-weight: 500;
}
.breakdown-value.original {
    text-decoration: line-through;
}
.breakdown-row.discount .breakdown-value {
    font-weight: 600;
}
.breakdown-row.total {
    border-radius: 0 0 10px 10px;
}
.breakdown-row.total .breakdown-label {
    font-weight: 600;
}
.breakdown-row.total .breakdown-value {
    font-size: 1.125rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    .coupon-header {
        padding: 14px 16px;
    }
    .coupon-header-icon {
        width: 36px;
        height: 36px;
    }
    .coupon-header-icon svg {
        width: 18px;
        height: 18px;
    }
    .coupon-input-wrap,
    .coupon-applied {
        padding: 0 16px 16px;
    }
    .coupon-input-group {
        flex-direction: column;
    }
    .coupon-apply-btn {
        width: 100%;
    }
}

/* Order Details Card Styles */
.order-details-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.order-details-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border-bottom: 1px solid #e5e7eb;
}

.order-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7f36c1 0%, #9333ea 100%);
}
.order-header-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.order-header-text {
    margin-left: 16px;
    flex: 1;
}
.order-header-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}
.order-id {
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    color: #6b7280;
}

.order-details-body {
    padding: 24px;
}

/* Service Badge */
.service-badge-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.service-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 600;
    background: linear-gradient(135deg, #7f36c1 0%, #9333ea 100%);
    color: #fff;
}
.service-badge svg {
    width: 16px;
    height: 16px;
}
.service-badge.bump_up,
.service-badge.bumpup {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.service-badge.highlight {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}
.service-badge.featured {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.service-badge.credits {
    background: linear-gradient(135deg, #f26624 0%, #d64d0d 100%);
}

.auto-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #dbeafe;
    color: #1d4ed8;
}

/* Listing Preview */
.order-listing-preview {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    gap: 16px;
    background: #f9fafb;
}

.listing-thumb {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}
.listing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.listing-thumb .no-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}
.listing-thumb .no-thumb svg {
    width: 32px;
    height: 32px;
    color: #9ca3af;
}

.listing-info {
    flex: 1;
    min-width: 0;
}
.listing-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: #6b7280;
}
.listing-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1f2937;
}
.listing-category {
    font-size: 0.8125rem;
    color: #6b7280;
}

/* Plan Details */
.order-plan-details {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    background: #f9fafb;
}

.plan-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.plan-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
}
.plan-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
}

.plan-description {
    font-size: 0.875rem;
    margin: 0 0 16px;
    line-height: 1.5;
    color: #6b7280;
}

.plan-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.plan-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.8125rem;
    background: #fff;
    color: #374151;
}
.plan-feature svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #22c55e;
}
.plan-feature strong {
    font-weight: 600;
    color: #1f2937;
}

/* Multiple Plans (from promote_listing_page) */
.order-selected-plans {
    margin-bottom: 20px;
}

.selected-plans-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.order-plan-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    background: #f9fafb;
}
.order-plan-item:last-child {
    margin-bottom: 0;
}

.plan-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
}
.plan-type-badge svg {
    width: 14px;
    height: 14px;
}
.plan-type-badge.bump_up {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.plan-type-badge.highlight {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}
.plan-type-badge.featured {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.plan-type-badge .auto-tag {
    background: rgba(255,255,255,0.25);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.625rem;
    margin-left: 4px;
}

.plan-item-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
}

.plan-item-name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1f2937;
}

.plan-item-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.plan-item-features .feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    background: #f3f4f6;
    color: #374151;
}
.plan-item-features .feature-tag svg {
    width: 12px;
    height: 12px;
    color: #22c55e;
}

/* Plan Item Remove Button */
.order-plan-item {
    position: relative;
}

.plan-item-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.plan-item-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
    background: #fff;
    color: #dc2626;
}
.plan-item-remove svg {
    width: 14px;
    height: 14px;
}

.plan-item-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.plan-item-price-row .plan-item-features {
    margin-bottom: 0;
}

/* Confirm Remove Modal */
.confirm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}
.confirm-modal-overlay.active {
    display: flex;
}
.confirm-modal {
    border-radius: 16px;
    padding: 32px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    animation: confirmModalIn 0.2s ease-out;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
@keyframes confirmModalIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.confirm-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef2f2;
}
.confirm-modal-icon svg {
    width: 28px;
    height: 28px;
    color: #dc2626;
}
.confirm-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1f2937;
}
.confirm-modal-text {
    font-size: 0.875rem;
    margin: 0 0 24px;
    line-height: 1.5;
    color: #6b7280;
}
.confirm-modal-actions {
    display: flex;
    gap: 10px;
}
.confirm-modal-btn {
    flex: 1;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.confirm-modal-btn.remove {
    background: #dc2626;
    color: #fff;
}
.confirm-modal-btn.remove:hover {
    background: #b91c1c;
}
.confirm-modal-btn.cancel {
    background: #f3f4f6;
    color: #374151;
}
.confirm-modal-btn.cancel:hover {
    background: #e5e7eb;
}
.confirm-modal-btn.remove svg {
    width: 16px;
    height: 16px;
}
.plan-item-remove svg {
    width: 14px;
    height: 14px;
}

/* Price Summary */
.order-price-summary {
    border-radius: 12px;
    padding: 4px;
    margin-top: 20px;
    background: #f9fafb;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
}
.price-row.subtotal {
    font-size: 0.9375rem;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
}
.price-row.total {
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    background: #fff;
    color: #1f2937;
}
.price-row.total .total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2563eb;
}

/* Paid Footer */
.order-details-footer.paid {
    border-top: 1px solid #e5e7eb;
    padding: 20px 24px;
    background: #f9fafb;
}

.paid-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #10b981;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.paid-badge svg {
    width: 18px;
    height: 18px;
}

.txn-info {
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    margin-bottom: 6px;
}
.txn-info:last-child {
    margin-bottom: 0;
}
.txn-value {
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    color: #1f2937;
}

@media (max-width: 640px) {
    .order-details-header {
        padding: 16px 20px;
    }
    .order-header-icon {
        width: 40px;
        height: 40px;
    }
    .order-header-icon svg {
        width: 20px;
        height: 20px;
    }
    .order-header-text h3 {
        font-size: 1rem;
    }
    .order-details-body {
        padding: 20px;
    }
    .order-listing-preview {
        flex-direction: column;
        text-align: center;
    }
    .listing-thumb {
        width: 100px;
        height: 100px;
    }
    .listing-title {
        white-space: normal;
    }
    .plan-features-list {
        flex-direction: column;
    }
    .plan-feature {
        justify-content: center;
    }
}

/* Payment History */
.payment-history {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ph-card {
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.ph-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ph-card--unpaid {
    border-left: 3px solid #ef4444;
}

.ph-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}
.ph-card-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ph-card-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--info-field-color, #9ca3af);
}
.ph-card-date svg { opacity: 0.6; }

.ph-card-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}
.ph-card-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ph-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ph-card-thumb--empty,
.ph-card-thumb--icon {
    color: var(--info-field-color, #9ca3af);
}
.ph-card-thumb--icon {
    color: #10b981;
}
.ph-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ph-card-listing-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--body-font-color, #111827);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.ph-card-listing-title:hover {
    color: var(--link-color-hover, #3b82f6);
}
.ph-card-listing-title--na {
    color: #ef4444;
    font-style: italic;
    font-weight: 400;
}
.ph-card-subtitle {
    font-size: 0.8rem;
    color: var(--info-field-color, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ph-card-amount {
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--body-font-color, #111827);
    white-space: nowrap;
    padding-left: 8px;
}
.ph-card-amount--paid {
    color: #059669;
}

/* Badges */
.ph-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.ph-badge--promotion {
    background: linear-gradient(135deg, #c084fc, #a855f7);
    color: #fff;
}
.ph-badge--bumpup {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
}
.ph-badge--featured {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
}
.ph-badge--highlight {
    background: linear-gradient(135deg, #fde68a, #eab308);
    color: #713f12;
}
.ph-badge--listing {
    background: #e5e7eb;
    color: #374151;
}
.ph-badge--credits {
    background: linear-gradient(135deg, #6ee7b7, #10b981);
    color: #fff;
}
.ph-badge--default {
    background: #e5e7eb;
    color: #374151;
}
.ph-badge--status-paid {
    background: #d1fae5;
    color: #065f46;
}
.ph-badge--status-unpaid {
    background: #fee2e2;
    color: #991b1b;
}

/* Items breakdown */
.ph-items-section {
    padding: 0 16px 14px;
}
.ph-items-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f9fafb;
    border-radius: 8px;
    padding: 4px 0;
    overflow: hidden;
}
.ph-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 0.82rem;
    color: var(--body-font-color, #374151);
}
.ph-item-row:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.ph-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #9ca3af;
}
.ph-item-dot--featured { background: #f59e0b; }
.ph-item-dot--highlight { background: #eab308; }
.ph-item-dot--bumpup,
.ph-item-dot--bump_up,
.ph-item-dot--auto_bumpup,
.ph-item-dot--auto_bump_up { background: #3b82f6; }
.ph-item-dot--credits { background: #10b981; }
.ph-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ph-item-days {
    font-size: 0.7rem;
    color: var(--info-field-color, #9ca3af);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 6px;
    border-radius: 4px;
}
.ph-item-price {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--body-font-color, #374151);
    white-space: nowrap;
    margin-left: auto;
}

/* Totals */
.ph-items-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed var(--border-color, #e5e7eb);
}
.ph-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--info-field-color, #6b7280);
}
.ph-totals-row--discount {
    color: #059669;
}
.ph-totals-row--discount svg {
    vertical-align: -1px;
    margin-right: 2px;
}
.ph-totals-row--discount em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.72rem;
}
.ph-totals-row--total {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--body-font-color, #111827);
    padding-top: 4px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin-top: 4px;
}

/* Footer meta */
.ph-card-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 16px;
    border-top: 1px solid var(--border-color, #f3f4f6);
    background: #fafafa;
    flex-wrap: wrap;
}
.ph-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--info-field-color, #6b7280);
}
.ph-meta-item svg {
    flex-shrink: 0;
    opacity: 0.5;
}
.ph-meta-txn span {
    font-family: monospace;
    font-size: 0.7rem;
}
.ph-meta-coupon {
    color: #059669;
}
.ph-meta-coupon svg {
    opacity: 1;
    color: #059669;
}

@media screen and (max-width: 640px) {
    .ph-card-body {
        flex-wrap: wrap;
        gap: 10px;
    }
    .ph-card-thumb {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }
    .ph-card-info {
        flex: 1 1 calc(100% - 60px);
    }
    .ph-card-amount {
        width: 100%;
        padding-left: 0;
        text-align: right;
        font-size: 1rem;
        border-top: 1px dashed var(--border-color, #e5e7eb);
        padding-top: 8px;
    }
    .ph-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .ph-card-footer {
        gap: 10px;
    }
    .ph-card-listing-title {
        white-space: normal;
    }
}

/* Scam notice */
section.scam_notice {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-left: 4px solid #d97706;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 30px;
}
section.scam_notice > h3 {
    color: #92400e;
    font-size: 1.1em;
    font-weight: 700;
    margin: 0 0 10px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
section.scam_notice > h3::before {
    content: "\26A0";
    font-size: 1.3em;
}
section.scam_notice > div {
    margin: 0;
}
section.scam_notice > div p {
    color: #78350f;
    font-size: 0.935em;
    line-height: 1.6;
    margin: 0 0 8px;
}
section.scam_notice > div p:empty {
    display: none;
}
[data-theme="dark"] section.scam_notice {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    border-left-color: #f59e0b;
}
[data-theme="dark"] section.scam_notice > h3 {
    color: #fbbf24;
}
[data-theme="dark"] section.scam_notice > div p {
    color: #fde68a;
}

/* Sign-in link panel, inside the login modal */
.noiz-ll-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.noiz-ll-panel[hidden] { display: none; }
.noiz-ll-msg {
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 6px;
}
.noiz-ll-msg[hidden] { display: none; }
.noiz-ll-msg.is-ok {
    background: #eef6ee;
    color: #2f6b4f;
    border: 1px solid #cfe3d5;
}
.noiz-ll-msg.is-error {
    background: #fdeceb;
    color: #b0332a;
    border: 1px solid #f2ccc9;
}


/* ===========================================================================
   Login modal — the "Modernist" design supplied 2026-08-26.

   Ported from Claude Designs/Noiz Login Modal (standalone).html. Its own tokens
   are reproduced here, SCOPED to the modal, so the rest of the site keeps its
   look: the design is a standalone mock and its accent, surface and zero-radius
   geometry would fight the page behind it if let loose globally.

   Set in Onest, not the design's Archivo, at Alex's direction. The page behind
   the modal is already Onest, and a second display face for one dialog reads as
   a mistake rather than a choice - besides costing another webfont request.

   The character of the thing is the geometry, not the typeface: nothing is
   rounded, sections are divided by 2px rules rather than whitespace, and the
   accent does exactly one job.
   =========================================================================== */

.login-modal-content,
.login-popup {
    /*
        The theme's own properties, not literals: light.css and dark.css
        both define these and both flip them, so the dialog follows the
        cookie without needing to know which theme is on. There is no
        dark class to hang a second rule off - the switch swaps the two
        <link> elements - so anything hard-coded here stays light for
        ever. White in light mode is still white; that was the ask.

            --content-background-color   #ffffff / #161616
            --body-background-color      #ffffff / #111111
            --body-font-color            #111111 / #DADADA
            --highlight-border-color     #d4d4d4 / #4D4D4D
            --cat-link-color             #777777 / #989898
    */
    --noiz-surface:  var(--content-background-color, #ffffff);
    --noiz-bg:       #fafafa;
    --noiz-bg:       color-mix(in srgb, var(--body-font-color, #111111) 3%, var(--content-background-color, #ffffff));
    --noiz-text:     var(--body-font-color, #111111);
    /* the accent is a brand colour and does not flip */
    --noiz-accent:     var(--noiz-dark-orange, #f26624);
    --noiz-accent-600: #f26624;
    --noiz-accent-700: #d64d0d;
    --noiz-divider:  var(--highlight-border-color, #d4d4d4);
    --noiz-muted:    var(--cat-link-color, #777777);
    --noiz-radius:     10px;
    --noiz-radius-lg:  16px;
    --noiz-radius-sm:  4px;

    background: var(--noiz-surface);
    border-radius: var(--noiz-radius-lg);
    color: var(--noiz-text);
}

/* --- masthead --------------------------------------------------------- */

.login-modal-content .login-popup-title,
.login-popup .login-popup-title {
    font-family: "Onest", sans-serif;
    font-size: 21px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--noiz-text);
    margin: 0;
}

/* The form and everything under it are separated by rules, not gaps. */
.login-modal-content .login-popup-form,
.login-popup .login-popup-form {
    border-top: 2px solid var(--noiz-divider);
    padding-top: 14px;
    margin-top: 12px;
}

/* --- fields ----------------------------------------------------------- */

.login-modal-content .login-popup-field label,
.login-popup .login-popup-field label,
.noiz-ll-panel .login-popup-field label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--noiz-muted);
}

.login-modal-content .login-popup-field input[type="text"],
.login-modal-content .login-popup-field input[type="password"],
.login-modal-content .login-popup-field input[type="email"],
.login-popup .login-popup-field input[type="text"],
.login-popup .login-popup-field input[type="password"],
.login-popup .login-popup-field input[type="email"],
.noiz-ll-panel .login-popup-field input[type="email"] {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--noiz-text);
    caret-color: var(--noiz-accent);
    background: var(--noiz-bg);
    border: 1px solid var(--noiz-divider);
    border-radius: var(--noiz-radius);
    box-shadow: none;
    transition: border-color 0.15s ease;
}

.login-modal-content .login-popup-field input:hover,
.login-popup .login-popup-field input:hover,
.noiz-ll-panel .login-popup-field input:hover {
    border-color: rgba(32, 30, 29, 0.45);
}

.login-modal-content .login-popup-field input:focus,
.login-popup .login-popup-field input:focus,
.noiz-ll-panel .login-popup-field input:focus {
    outline: none;
    border-color: var(--noiz-accent);
    box-shadow: none;
}

/* --- buttons ---------------------------------------------------------- */

.login-modal-content .login-popup-submit,
.login-popup .login-popup-submit,
.noiz-ll-panel .login-popup-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    font-family: "Onest", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--noiz-accent);
    border: 1px solid transparent;
    border-radius: var(--noiz-radius);
    cursor: pointer;
    transition: background 0.15s ease;
}
.login-modal-content .login-popup-submit:hover,
.login-popup .login-popup-submit:hover,
.noiz-ll-panel .login-popup-submit:hover { background: var(--noiz-accent-600); }
.login-modal-content .login-popup-submit:active,
.login-popup .login-popup-submit:active { background: var(--noiz-accent-700); }
.login-modal-content .login-popup-submit:disabled,
.login-popup .login-popup-submit:disabled { opacity: 0.45; background: var(--noiz-accent); cursor: not-allowed; }

/* --- social: full-width secondary buttons, as the design has them ------ */

.login-popup-social-container,
.login-modal-social {
    margin-top: 4px;
}

.login-popup-social-container .ha-social-buttons,
.login-modal-social .ha-social-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.login-popup-social-container .ha-social-btn,
.login-modal-social .ha-social-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: auto;
    padding: 10px 14px;
    font-family: "Onest", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    color: var(--noiz-text);
    background: transparent;
    border: 1px solid var(--noiz-divider);
    border-radius: var(--noiz-radius);
    transform: none;
    transition: background 0.15s ease;
}
.login-popup-social-container .ha-social-btn:hover,
.login-modal-social .ha-social-btn:hover {
    background: color-mix(in srgb, var(--noiz-text) 8%, transparent);
    opacity: 1;
    transform: none;
}

/* the label is visible again - the design carries it */
.login-popup-social-container .ha-social-btn span,
.login-modal-social .ha-social-btn span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.login-popup-social-container .ha-social-btn-icon,
.login-modal-social .ha-social-btn-icon {
    width: 16px;
    height: 16px;
    flex: none;
    fill: currentColor;
}

/* One rule for every provider: the design gives them all the same secondary
   treatment rather than each brand's own colour, so a row of them reads as a
   list of choices instead of a row of logos competing with the primary action. */
.login-popup-social-container .ha-btn-facebook,
.login-popup-social-container .ha-btn-google,
.login-popup-social-container .ha-btn-twitter,
.login-popup-social-container .ha-btn-apple,
.login-modal-social .ha-btn-facebook,
.login-modal-social .ha-btn-google,
.login-modal-social .ha-btn-twitter,
.login-modal-social .ha-btn-apple {
    background: transparent;
    color: var(--noiz-text);
    border: 1px solid var(--noiz-divider);
}
.login-popup-social-container .ha-btn-apple .ha-social-btn-icon,
.login-modal-social .ha-btn-apple .ha-social-btn-icon {
    background: #000;
    border-radius: 3px;
    padding: 2px;
    box-sizing: border-box;
}

/* the "ή" divider the plugin renders above the buttons */
.login-popup-social-container .ha-or,
.login-modal-social .ha-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
}
.login-popup-social-container .ha-or span,
.login-modal-social .ha-or span {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--noiz-muted);
}
.login-popup-social-container .ha-or::after,
.login-modal-social .ha-or::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--noiz-divider);
}

/* --- the sign-in-link line, as a secondary button --------------------- */

.noiz-ll-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--noiz-divider);
    text-align: left;
}
.noiz-ll-foot a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    font-family: "Onest", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--noiz-text);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--noiz-divider);
    border-radius: var(--noiz-radius);
    transition: background 0.15s ease;
}
.noiz-ll-foot a:hover {
    background: color-mix(in srgb, var(--noiz-text) 8%, transparent);
    text-decoration: none;
    color: var(--noiz-text);
}

/* --- odds and ends ---------------------------------------------------- */

.login-modal-content .login-popup-options,
.login-popup .login-popup-options { margin-top: 12px; font-size: 14px; }

.login-modal-content .login-popup-forgot a,
.login-popup .login-popup-forgot a { color: var(--noiz-accent); text-underline-offset: 3px; }

.login-modal-content .login-popup-alert,
.login-popup .login-popup-alert {
    border-radius: var(--noiz-radius);
    background: #fff2ef;
    border: 1px solid var(--noiz-accent);
    color: #4d170e;
}

.noiz-ll-panel .noiz-ll-msg { border-radius: var(--noiz-radius); }

.login-modal-content .login-popup-signup,
.login-popup .login-popup-signup {
    border-top: 2px solid var(--noiz-divider);
    padding-top: 12px;
    margin-top: 12px;
}

/* the popup keeps its close button on the right of the eyebrow+title stack */
.login-popup .login-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.login-popup .login-popup-heading { min-width: 0; }
.login-popup .login-popup-close {
    flex: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--noiz-divider);
    border-radius: var(--noiz-radius);
    cursor: pointer;
    transition: background 0.15s ease;
}
.login-popup .login-popup-close:hover { background: color-mix(in srgb, var(--noiz-text) 8%, transparent); }
.login-popup .login-popup-close svg { width: 15px; height: 15px; fill: var(--noiz-text); }

/* --- corrections after looking at the rendered dialog ------------------- */

/* The tokens were scoped to .login-popup / .login-modal-content, so anything
   the overlay holds outside the dialog resolved every var() to nothing - and
   an invalid var in a shorthand unsets the whole property, which is why the
   sign-in-link button lost its border entirely rather than just its colour.
   Declaring them on the overlay as well makes the rules independent of where
   in the dialog a block happens to sit. */
.login-popup-overlay {
    /*
        The theme's own properties, not literals: light.css and dark.css
        both define these and both flip them, so the dialog follows the
        cookie without needing to know which theme is on. There is no
        dark class to hang a second rule off - the switch swaps the two
        <link> elements - so anything hard-coded here stays light for
        ever. White in light mode is still white; that was the ask.

            --content-background-color   #ffffff / #161616
            --body-background-color      #ffffff / #111111
            --body-font-color            #111111 / #DADADA
            --highlight-border-color     #d4d4d4 / #4D4D4D
            --cat-link-color             #777777 / #989898
    */
    --noiz-surface:  var(--content-background-color, #ffffff);
    --noiz-bg:       #fafafa;
    --noiz-bg:       color-mix(in srgb, var(--body-font-color, #111111) 3%, var(--content-background-color, #ffffff));
    --noiz-text:     var(--body-font-color, #111111);
    /* the accent is a brand colour and does not flip */
    --noiz-accent:     var(--noiz-dark-orange, #f26624);
    --noiz-accent-600: #f26624;
    --noiz-accent-700: #d64d0d;
    --noiz-divider:  var(--highlight-border-color, #d4d4d4);
    --noiz-muted:    var(--cat-link-color, #777777);
    --noiz-radius:     10px;
    --noiz-radius-lg:  16px;
    --noiz-radius-sm:  4px;
}

/* "ή" wants a rule on both sides, not just the right */
.login-popup-social-container .ha-or,
.login-modal-social .ha-or { justify-content: center; }
.login-popup-social-container .ha-or::before,
.login-modal-social .ha-or::before {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--noiz-divider);
}

/* the sign-up line was still the browser's link blue */
.login-modal-content .login-popup-signup a,
.login-popup .login-popup-signup a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    font-family: "Onest", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--noiz-text);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--noiz-divider);
    border-radius: var(--noiz-radius);
    transition: background 0.15s ease;
}
.login-modal-content .login-popup-signup a:hover,
.login-popup .login-popup-signup a:hover {
    background: color-mix(in srgb, var(--noiz-text) 8%, transparent);
    color: var(--noiz-text);
    text-decoration: none;
}
.login-modal-content .login-popup-signup svg,
.login-popup .login-popup-signup svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: currentColor;
}

/* the "stay signed in" box was a black rounded square from the old palette */
.login-modal-content .login-popup-remember input[type="checkbox"],
.login-popup .login-popup-remember input[type="checkbox"] {
    width: 17px;
    height: 17px;
    border-radius: var(--noiz-radius-sm);
    border: 1px solid var(--noiz-divider);
    background: var(--noiz-bg);
}
.login-modal-content .login-popup-remember input[type="checkbox"]:checked,
.login-popup .login-popup-remember input[type="checkbox"]:checked {
    background: var(--noiz-accent);
    border-color: var(--noiz-accent);
}
.login-modal-content .login-popup-remember span,
.login-popup .login-popup-remember span { font-size: 13px; color: var(--noiz-muted); }

/* forgot-password sits opposite it on the same line */
.login-modal-content .login-popup-options,
.login-popup .login-popup-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
}
.login-modal-content .login-popup-forgot,
.login-popup .login-popup-forgot { font-size: 13px; color: var(--noiz-muted); }

/* These are <a>, not <button>, so they missed the site's border-box default and
   each overflowed its column by exactly its own padding plus border (30px). */
.login-popup-social-container .ha-social-btn,
.login-modal-social .ha-social-btn,
.login-modal-content .login-popup-signup a,
.login-popup .login-popup-signup a,
.noiz-ll-foot a {
    box-sizing: border-box;
}

.noiz-ll-foot a svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: currentColor;
}

/* The site sets a global input height:40px and the inputs are content-box, so
   the design's 36px min-height was being added to 40px of height plus padding
   and border - 58px of field. Take the height off and measure border-box.

   44px rather than the design's 36: the mock is a desktop frame, and this is
   the login for a site whose traffic is mostly phones, where 36px is under the
   comfortable tap target. The proportion is unchanged. */
.login-modal-content .login-popup-field input[type="text"],
.login-modal-content .login-popup-field input[type="password"],
.login-modal-content .login-popup-field input[type="email"],
.login-popup .login-popup-field input[type="text"],
.login-popup .login-popup-field input[type="password"],
.login-popup .login-popup-field input[type="email"],
.noiz-ll-panel .login-popup-field input[type="email"],
.noiz-ll-panel input.noiz-ll-email {
    box-sizing: border-box;
    height: auto;
    min-height: 44px;
}

/* the panel replaces the form, so it takes the form's rule under the title */
.noiz-ll-panel {
    border-top: 2px solid var(--noiz-divider);
    padding-top: 14px;
    margin-top: 12px;
}
.noiz-ll-panel .noiz-ll-back { color: var(--noiz-accent); font-size: 13px; }

/* --- the alternatives block, reordered --------------------------------
   The email link is the first thing offered after the password form, ahead
   of the social buttons. It lives inside the social container so that the
   "ή" the plugin renders still introduces the whole group rather than
   landing between the email link and the providers - the order is set here
   rather than in the markup because the "ή" and the buttons arrive together
   from {rlHook} and cannot be separated in the template. */
.login-popup-social-container,
.login-modal-social {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.login-popup-social-container .ha-or,
.login-modal-social .ha-or { order: 1; margin-bottom: 0; }
.login-popup-social-container .noiz-ll-foot,
.login-modal-social .noiz-ll-foot { order: 2; }
.login-popup-social-container .ha-social-buttons,
.login-modal-social .ha-social-buttons { order: 3; }

/* it no longer opens a section of its own, so it drops the rule above it */
.login-popup-social-container .noiz-ll-foot,
.login-modal-social .noiz-ll-foot {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* --- sign-up, last and inverted ---------------------------------------
   Everything above it is a way back into an existing account; this is the
   one control for people who have none, so it reads as the opposite of the
   secondary buttons rather than one more of them. */
.login-modal-content .login-popup-signup a,
.login-popup .login-popup-signup a {
    background: var(--noiz-text);
    border-color: var(--noiz-text);
    color: var(--noiz-surface);
}
.login-modal-content .login-popup-signup a:hover,
.login-popup .login-popup-signup a:hover {
    background: color-mix(in srgb, var(--noiz-text) 82%, var(--noiz-surface));
    border-color: color-mix(in srgb, var(--noiz-text) 82%, var(--noiz-surface));
    color: var(--noiz-surface);
}

/* The plugin wraps the "ή" and the buttons together in .ha-icons-container,
   so ordering this container's own children only ever saw two items - that
   wrapper and our link - and the link could not get between them. The three
   .ha-icons-container rules further up now say display:contents instead of
   display:block, which puts the "ή", our link and the buttons on one axis
   and lets the order values below decide the sequence. */