/* =========================================================================
   T|F Agency – our CSS on top of Houzez 4.4.3
   Loaded after the theme's style.css and the Theme Options inline CSS
   (see inc/register-scripts.php), so it wins ties with both and with the
   Elementor kit CSS. Theme Options → Custom Code → CSS Code should stay empty.
   ========================================================================= */


/* =========================================================================
   Part 1: carried over from the old site's Theme Options Custom CSS
   (kept in its original order; the .label rules moved to the tags section
   further down, and rules matching nothing on either site were removed)
   ========================================================================= */

/* ----- Header, slider ----- */

section.top-banner-wrap.slider-revolution-wrap {
    height: auto;
}

.top-bar-wrap {
    border-bottom: 5px solid #f8df8d;
}

/* ----- Property page ----- */

.property-navigation a {
    font-family: Raleway;
    text-transform: uppercase;
}

.block-content-wrap .detail-wrap li strong {
    white-space: normal;
}

/* ----- Form fields and search fields: Raleway, navy text, light navy border ----- */

.property-form input[type=text],
.property-form input[type=email],
.property-form textarea,
#sidebar input[type=text],
#sidebar input[type=email],
#sidebar textarea,
.advanced-search-v3 a.btn,
.advanced-search-v3 input[type=text],
.advanced-search-v3 button[type=button],
.advanced-search-v3 button[role=combobox],
#advanced-search-filters input[type=text],
#advanced-search-filters input[type=search],
#advanced-search-filters button[type=button],
.bs-searchbox input[type=search] {
    font-family: Raleway;
    font-weight: 400;
    color: #002D72BD !important;
    background-color: #ffffff;
    border-color: #002D724D !important;
    border-width: 1px 1px 1px 1px;
}

.property-form input::placeholder,
#sidebar input::placeholder,
.advanced-search-v3 input::placeholder,
#advanced-search-filters input::placeholder {
    font-family: Raleway;
    font-weight: 400;
    color: #002D72BD;
    opacity: 1; /* Firefox */
}

/* ----- Form and agent buttons: navy with gold text, gold on hover ----- */

.agent-profile-buttons .btn.btn-secondary,
.property-form button[type=button],
#sidebar button[type=button] {
    font-family: Raleway;
    background-color: #002D72;
    color: #F8DF8D;
    text-transform: uppercase;
}

#sidebar a.btn {
    font-family: Raleway;
    text-transform: uppercase;
}

.agent-profile-buttons button[type=button]:hover,
.agent-profile-buttons a.btn:hover,
.property-form button[type=button]:hover,
#sidebar button[type=button]:hover,
#sidebar a.btn:hover {
    background-color: #F8DF8D;
    color: #002D72;
}

/* ----- Property page: overview, showings, price, details ----- */

.property-overview-wrap .list-2-cols.list-unstyled li {
    color: #002D72;
    font-family: Raleway;
    border: 0px;
    white-space: normal;
}

.showing {
    border-bottom: 0px !important;
}

.showing-left {
    color: #002D72;
    font-weight: 300;
}

.showing-right {
    color: #002D72;
    text-align: right;
}

.content-wrap.property-wrap.property-detail-v2 .item-price {
    font-family: Raleway;
    font-weight: 600;
    line-height: 36px;
}

.block-content-wrap .detail-wrap li span {
    max-width: 500px;
}

/* ----- Mobile menu ----- */

.nav-mobile .main-nav .nav-item .dropdown-menu .nav-item > a {
    padding: 15px 15px 15px 25px;
}

.nav-mobile .header-mobile-center {
    display: none;
}

@media screen and (max-width: 767.98px) {
    .nav-mobile .header-mobile-center {
        height: 55px;
        background: #002d72;
        display: block;
    }

    .nav-mobile .logo-mobile {
        margin: 0px;
        padding-top: 9px;
    }

    .nav-mobile .logo-mobile a img {
        display: block;
        margin: auto;
    }
}

/* ----- Cookie Notice plugin ----- */

#cookie-notice .cn-button {
    background-color: #f8df8d;
    color: #002d72 !important;
}

/* ----- Superscript (®) ----- */

sup {
    position: relative;
    font-size: 40%;
    line-height: 0;
    vertical-align: baseline;
    top: -1.2em;
}

/* ----- Details list: info lines under custom fields 0135, 009 and 008 ----- */
/* (4.4.3 puts the row padding and line on the inner .list-lined-item) */

li.customfield0135 .list-lined-item,
ul:has(.customfield0095) li.customfield009 .list-lined-item,
ul:has(.customfield0085) li.customfield008 .list-lined-item {
    border-bottom-width: 0px !important;
    padding-bottom: 5px !important;
}

li.customfield0135info .list-lined-item,
li.customfield0095 .list-lined-item,
li.customfield0085 .list-lined-item {
    padding-top: 0px !important;
}

li.customfield0135info span {
    display: block;
    text-align: left !important;
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 20px !important;
}

.customfield0095 strong,
.customfield0085 strong {
    display: none;
}

li.customfield0095 span,
li.customfield0085 span {
    text-align: left !important;
    max-width: 100% !important;
    line-height: 20px !important;
}

/* ----- Agent box on the property page ----- */

ul.agent-information {
    padding-top: 10px;
    padding-left: 5px !important;
}

/* 18px between brokers and down to the form, as on the old site (2.8 let the
   name/phone spill out under this box, so it needed 90px; 4.4.3 doesn't) */
.property-form-wrap .agent-details {
    margin-bottom: 15px !important;
}

li.additionalfeature {
    display: block !important;
}


/* =========================================================================
   Part 2: added for Houzez 4.4.3 (restores the old site's look)
   ========================================================================= */

/* ----- Listing cards ----- */

/* Name/address spacing (4.4.3 adds Bootstrap mb-2 utilities) */
.item-listing-wrap .item-title {
    margin-bottom: 3px !important;
    line-height: 1.2;
}
.item-listing-wrap .item-address {
    margin-bottom: 15px !important;
    font-weight: 300;
}

/* Price, "Utgångspris" and monthly fee */
.item-listing-wrap .item-price-wrap .item-price,
.item-listing-wrap .item-price-wrap .item-price .price {
    font-size: 18px;
    font-weight: 600;
}
.item-listing-wrap .item-price-wrap .price-prefix {
    font-size: 18px;
    font-weight: 300;
}
.item-listing-wrap .item-price-wrap .item-sub-price,
.item-listing-wrap .item-price-wrap .item-sub-price * {
    font-size: 12px;
    font-weight: 600;
}


/* ----- Search results page ----- */

/* Same space above the footer as the listing pages: 4.4.3 adds mb-4 to
   listing pages like Våra hem, but not to the search results */
.page-template-template-search .listing-wrap {
    margin-bottom: 1.5rem;
}


/* "Sortera efter: Standard" in normal case and the body font. The sort
   dropdown is a <button>, so the Elementor kit made it uppercase Raleway. */
.sort-by .bootstrap-select > .dropdown-toggle {
    font-family: inherit;
    text-transform: none;
}

/* Phones: "Sortera efter" on the left, as on the old site. 4.4.3 stacks the
   tabs and sorting in a column but keeps align-items-center. */
@media (max-width: 767.98px) {
    .listing-tools-wrap > .d-flex {
        align-items: flex-start !important;
    }
}


/* ----- Agent page (realtors/agent/single-agent-v1.php) ----- */

/* Name and contact box on the video, and its mobile version: centred, name
   in normal case and "Mobil 070-…" on one line, like the old site.
   4.4.3's contact partials print dt/dd rows spread to both sides. */
.agent-profile-wrap .agent-company-logo,
.agent-profile-wrap .mobileshow {
    text-align: center;
}
.agent-profile-wrap .agent-company-logo h1,
.agent-profile-wrap .mobileshow h1 {
    text-transform: none;
}
.agent-profile-wrap .agent-company-logo .agent-profile-top-wrap,
.agent-profile-wrap .mobileshow .agent-profile-top-wrap {
    margin-bottom: 20px;
}
.agent-profile-wrap .agent-company-logo .agent-list-position,
.agent-profile-wrap .mobileshow .agent-list-position {
    margin-bottom: 16px !important;
}
.agent-profile-wrap .agent-company-logo .list-lined-item,
.agent-profile-wrap .mobileshow .list-lined-item {
    display: block !important;
    padding: 0 !important;
}
.agent-profile-wrap .agent-company-logo .list-lined-item dt,
.agent-profile-wrap .agent-company-logo .list-lined-item dd,
.agent-profile-wrap .mobileshow .list-lined-item dt,
.agent-profile-wrap .mobileshow .list-lined-item dd {
    display: inline;
}
.agent-profile-wrap .agent-company-logo .list-lined-item strong,
.agent-profile-wrap .mobileshow .list-lined-item strong {
    font-weight: 600;
}

/* "Skicka e-post" / "Ring" buttons */
.agent-profile-wrap .agent-profile-buttons .btn {
    font-weight: 500;
    padding: 0 15px;
}
/* 10px right and below each button, like the old site: side by side on
   desktop, stacked with a gap on phones */
.agent-profile-wrap .agent-profile-buttons .btn {
    margin: 0 10px 10px 0;
}


/* Profile photo without a hero video or image: fills the box's width, at most
   780px high (as tall as the 780px photo was), cropped from the bottom so the
   face shows. Square up to 780px wide, so phones look the same as before. */
.agent-profile-wrap .agent-image .tf-agent-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 780px;
    object-fit: cover;
    object-position: 50% 0;
}


/* Space between the agent's listings and the footer */
.agent-detail-page-v1 {
    margin-bottom: 1.5rem;
}


/* ----- Property page: section headers ----- */

/* Old spacing: 40px under the section title, 25px after the line (on phones
   4.4.3 already drops the padding and the line, like the old site) */
.block-wrap > .block-title-wrap {
    margin-bottom: 25px;
}
@media (min-width: 768px) {
    .block-wrap > .block-title-wrap {
        padding-bottom: 40px;
    }
}


/* ----- Property page: Detaljer and Övriga detaljer ----- */

/* Rows with 10px padding and "Label:" in weight 600, like the old site.
   Detaljer has the faint row lines, Övriga detaljer the grey ones. */
.property-detail-wrap .list-lined-item {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.property-detail-wrap .detail-wrap .list-lined-item {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}
.property-detail-wrap .list-lined-item > strong {
    font-weight: 600;
}
.property-detail-wrap .list-lined-item > strong::after {
    content: ":";
}

/* Phones: taller rows, as on the old site */
@media (max-width: 767.98px) {
    .property-detail-wrap .list-lined-item {
        line-height: 36px;
    }
}

/* Övriga detaljer: "Label: value" as running text that wraps under the
   label ("Renoveringar" keeps its value on its own line, see details.php) */
.property-detail-wrap li.additionalfeature .list-lined-item {
    display: block !important;
}
.property-detail-wrap li.additionalfeature .list-lined-item > strong,
.property-detail-wrap li.additionalfeature .list-lined-item > span {
    display: inline;
}


/* ----- Footer on phones ----- */

/* Copyright row: the same side padding as the footer above it, and room
   under the last line */
@media (max-width: 767.98px) {
    .footer-bottom-wrap {
        padding: 24px 30px 40px;
    }
}
/* Property pages: keep the end of the footer clear of the fixed contact bar
   (71px, shown below 992px) */
@media (max-width: 991.98px) {
    body.single-property .footer-wrap {
        padding-bottom: 71px;
    }
}


/* ----- Mobile menu (off-canvas) ----- */

/* Like the old site: a 256px panel that is gold all the way down, with a
   55px navy strip across the full width holding the logo. 4.4.3 made the
   panel full-width white and put the navy logo box inside a white frame. */
#hz-offcanvas-mobile-menu.offcanvas-start {
    --bs-offcanvas-width: 256px;
    width: 256px;
    background-color: #F8DF8D;
}
#hz-offcanvas-mobile-menu .offcanvas-header {
    position: relative;
    padding: 0;
    height: 55px;
    background-color: #002D72;
}
/* White × in the corner, so the logo stays centred */
#hz-offcanvas-mobile-menu .offcanvas-header .btn-close {
    position: absolute;
    top: 50%;
    right: 12px;
    margin: 0;
    transform: translateY(-50%);
    opacity: 0.8;
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* ----- Property page: image grid, close buttons, contact popup ----- */

/* Image grid ("Bilder"): keep the 2px edge inside the page. The g-1 gutter's
   negative row margins made the page scroll sideways on phones. */
.property-gallery-grid-wrap.g-1 {
    margin-left: 0;
    margin-right: 0;
}

/* Close (×) buttons in popups and the gallery: no background. The Elementor
   kit gives every <button> a navy background (gold on hover), which boxed
   the × and, with the white-× filter in the gallery, hid it completely. */
button.btn-close,
button.btn-close:hover,
button.btn-close:focus {
    background-color: transparent;
}

/* Image gallery (lightbox): no header bar; the close × is a small navy
   square over the top-right corner of the image, like the ‹ › arrows */
#property-lightbox .modal-header {
    position: absolute;
    top: 35px;
    right: 27px;
    z-index: 5;
    padding: 0;
    border: 0;
    background-color: transparent;
}
#property-lightbox .modal-header > :not(.btn-close) {
    display: none !important;
}
/* Phones and tablets show the images as a scrolling list: keep the × in the
   screen corner */
@media (max-width: 991.98px) {
    #property-lightbox .modal-header {
        position: fixed;
        top: 15px;
        right: 15px;
    }
}
#property-lightbox .modal-header .btn-close,
#property-lightbox .modal-header .btn-close:hover,
#property-lightbox .modal-header .btn-close:focus {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    opacity: 1;
    filter: none;
    box-shadow: none;
    background: #002D72 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff' fill-opacity='.75'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 14px auto no-repeat;
}

/* Contact popup on phones: compact brokers (small photo with name and phone
   beside it) so two brokers and the form fit without endless scrolling */
#mobile-property-form .agent-details {
    margin-bottom: 15px !important;
}
#mobile-property-form .agent-details > .align-items-center {
    display: flex;
    gap: 15px;
}
#mobile-property-form .agent-details .agent-image {
    flex: 0 0 90px;
}
#mobile-property-form .agent-details .agent-image img {
    width: 90px;
    height: 90px;
    object-fit: cover;
}


/* ----- Property page: floor plans (Planritningar) ----- */

/* Floor plan names in navy 16px like the old site. 4.4.3's .accordion-title
   is white 24px bold (meant for dark accordions), so the names were
   invisible on the white background. */
.floor-plan-wrap .accordion-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #002D72;
}
.floor-plan-wrap .accordion-header {
    padding: 10px !important;
}
.floor-plan-wrap .accordion-body {
    padding-top: 13px !important;
}


/* ----- Property page: USP, Visningar and Budgivning lists ----- */

/* Houzez 2.8 styled .list-1-cols / .list-2-cols (columns, label left and
   value right, 10px rows). 4.4.3 no longer does, but our partials usp.php,
   showings.php and bids.php still use these classes. */
.block-content-wrap .list-1-cols li,
.block-content-wrap .list-2-cols li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dce0e0;
    padding: 10px 0;
    break-inside: avoid;
}
.list-1-cols li span {
    white-space: normal;
    overflow: unset;
    text-overflow: unset;
    max-width: 100%;
}
.list-2-cols {
    columns: 2;
}
@media (max-width: 767.98px) {
    .list-2-cols {
        columns: 1;
    }
    /* Visningar: the date on one line, the booking link under it, and
       space before the next showing */
    .block-content-wrap .list-1-cols li.showing {
        display: block;
        line-height: 24px;
        padding: 12px 0;
    }
    .showing-left,
    .showing-right {
        display: block;
        text-align: left;
    }
    .showing-right {
        margin-top: 4px;
    }
    .block-content-wrap .list-1-cols li,
    .block-content-wrap .list-2-cols li {
        line-height: 36px;
    }
}


/* ----- Property page header ----- */

/* Phones: price, "Utgångspris" and monthly fee in the title block under
   the picture */
.mobile-property-title .item-price,
.mobile-property-title .item-price .price {
    font-size: 18px;
    font-weight: 600;
}
.mobile-property-title .price-prefix {
    font-size: 18px;
    font-weight: 300;
}
.mobile-property-title .item-sub-price,
.mobile-property-title .item-sub-price * {
    font-size: 13px;
    font-weight: 300;
}

/* Title on the picture: white and normal case like the old site (the
   Elementor kit's h1 style made it navy and uppercase) */
.property-header-wrap .page-title h1 {
    color: inherit;
    text-transform: none;
}

/* Price, "Utgångspris" and monthly fee */
.property-header-wrap .property-price-wrap .item-price,
.property-header-wrap .property-price-wrap .item-price .price {
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
}
.property-header-wrap .property-price-wrap .price-prefix {
    font-size: 30px;
    font-weight: 300;
}
.property-header-wrap .property-price-wrap .item-sub-price,
.property-header-wrap .property-price-wrap .item-sub-price * {
    font-weight: 300;
}


/* ----- Status and label tags (Till salu, Budgivning pågår, ...) ----- */

/* Gold text on navy, navy on gold on hover, like the old site. 4.4.3 styles
   card tags from Styling → Listings → Media label (white on translucent black)
   and sets term colours with !important, so the hover needs !important too.
   A term with its own colour (Properties → Status/Labels) keeps that colour. */
.label {
    font-family: Raleway;
    font-weight: 500;
    text-transform: uppercase;
    padding: 3px 5px;
    border-radius: 2px;
    background-color: #002D72;
    color: #F8DF8D;
}
.label:hover {
    background-color: #F8DF8D;
    color: #002D72;
}
.grid-view .item-listing-wrap .label:not(.label-featured),
.list-view .item-listing-wrap .item-header .label:not(.label-featured) {
    color: #F8DF8D;
    background-color: #002D72;
}
.label.label-status:hover,
.label[class*="label-color-"]:hover,
.grid-view .item-listing-wrap .label:not(.label-featured):hover,
.list-view .item-listing-wrap .item-header .label:not(.label-featured):hover {
    color: #002D72;
    background-color: #F8DF8D !important;
}


/* ----- Search bar and advanced filters ----- */

/* Gold with navy text on hover and while a dropdown or the filters are open,
   like the old site (the white background in Part 1 would otherwise win over
   the Elementor kit's button hover colours) */
.advanced-search-v3 .btn-light-grey-outlined:hover,
.advanced-search-v3 button[type="button"]:hover,
.advanced-search-v3 .btn[aria-expanded="true"],
.advanced-search-v3 button[type="button"][aria-expanded="true"],
#advanced-search-filters button[type="button"]:hover,
#advanced-search-filters button[type="button"][aria-expanded="true"] {
    background-color: var(--e-global-color-accent, #F8DF8D);
    color: var(--e-global-color-primary, #002D72);
}

/* Keep the 1px border on hover and focus. The Elementor kit's
   "button:hover, button:focus" sets border-style: none, so the buttons
   shrank by 2px and the row jumped. */
.advanced-search-v3 button:hover,
.advanced-search-v3 button:focus,
#advanced-search-filters button:hover,
#advanced-search-filters button:focus,
.overlay-search-advanced-module button:hover,
.overlay-search-advanced-module button:focus {
    border-style: solid;
}

/* "Rum" dropdown: no up/down arrow, value centred and shown as "1 rum" */
.advanced-search-v3 .bootstrap-select > .dropdown-toggle::after {
    display: none;
}
.advanced-search-v3 .bootstrap-select > .dropdown-toggle .filter-option {
    text-align: center;
}
.advanced-search-v3 .bootstrap-select > .dropdown-toggle:not(.bs-placeholder) .filter-option-inner-inner::after {
    content: " rum";
}