/* =============================================================
   LEAD Web Studio - responsive layer for tprmap.com
   Loaded after the theme stylesheets so it can correct them.

   Why this file exists: the admin layout hardcoded
   style="margin-left:220px" inline on <main> and <footer>, which no
   stylesheet could override. Those inline styles were removed from the
   blades; the desktop offset is restored here and dropped below lg so
   the sidebar can go off-canvas on phones and tablets.
   ============================================================= */

/* ---------- ADMIN: desktop keeps the sidebar offset ---------- */
@media (min-width: 992px) {
    /* the theme ships 200px here while the sidebar is actually 220px wide,
       so this needs !important to beat html:not([dir="rtl"]) .sidebar-lg-show... */
    html body.app .app-body .main,
    html body.app .app-footer {
        margin-left: 220px !important;
    }
}

/* ---------- ADMIN: tablet and phone ---------- */
@media (max-width: 991.98px) {

    .app-body .main,
    .app-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Sidebar slides in instead of stealing 220px of a 375px screen.
       The header burger already toggles .sidebar-show on <body>. */
    .app-body .sidebar {
        position: fixed;
        top: 55px;
        bottom: 0;
        left: 0;
        width: 220px;
        z-index: 1035;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    body.sidebar-show .app-body .sidebar {
        transform: translateX(0);
    }

    /* dim the page while the menu is open, and let a tap close it */
    body.sidebar-show .app-body .main::before {
        content: '';
        position: fixed;
        top: 55px;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1030;
    }

    .app-body .aside-menu {
        transform: translateX(100%);
    }

    /* Wide data tables scroll inside their card instead of crushing the page */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper > .row > [class^="col-"],
    .dataTables_wrapper > .row > [class*=" col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dataTables_filter,
    .dataTables_length {
        text-align: left;
        float: none;
    }

    .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }

    .app-body .card-body {
        padding: .75rem;
    }

    .app-body .breadcrumb {
        flex-wrap: wrap;
    }

    /* forms in the admin stack instead of sitting in half-width columns */
    .app-body form .col-md-3,
    .app-body form .col-md-4,
    .app-body form .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ---------- FRONTEND: header ---------- */
@media (max-width: 991.98px) {
    /* The top bar wrapped onto a third row (logo / currency / language) and grew to
       122px while the nav below it starts at 104px, so they overlapped by 18px.
       Taking the language switcher out of the flow keeps the bar at ~98px. */
    nav.first-nav .container {
        position: relative;
    }

    nav .switcher-popup {
        position: absolute !important;
        right: 104px;
        top: 12px;
        margin: 0 !important;
    }

    /* flag only - the word does not fit next to Post Ad */
    nav .switcher-popup span {
        display: none !important;
    }

    /* the "Tropical World" badge is absolutely positioned and ran past the edge */
    .globe.row {
        max-width: calc(100vw - 24px);
    }
}

/* ---------- FRONTEND: stray 12px of horizontal scroll ---------- */
@media (max-width: 991.98px) {
    /* pe-0 removes the right padding of the container while the row inside keeps
       its -12px gutter, so every page using this pattern scrolled 12px sideways */
    .container.pe-0 > .row,
    .container-fluid.pe-0 > .row {
        margin-right: 0 !important;
    }

    /* p-0 does the same on both sides */
    .container.p-0 > .row,
    .container-fluid.p-0 > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* the "Tropical World" badge is absolute and stuck out past the right edge */
    .globe.row {
        max-width: 90px !important;
    }

    .globe.row p {
        font-size: 11px;
        line-height: 1.15;
    }
}

/* ---------- FRONTEND: listing grids ---------- */
@media (max-width: 767.98px) {
    /* these rows are col-3 at every breakpoint, so a 221px button sat in a 96px column */
    #residential-properties .row > [class^="col-"],
    #residential-properties .row > [class*=" col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #residential-properties .row.justify-content-center {
        justify-content: flex-start !important;
    }

    #residential-properties h5 {
        margin-left: 0 !important;
        max-width: 100%;
    }

    #residential-properties .float-start,
    #residential-properties .float-end {
        float: none !important;
    }

    /* the container carries pe-0, so the row negative gutter leaked 12px past the edge */
    #residential-properties .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .globe.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .btn {
        white-space: normal;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}


/* ---------- FRONTEND: top bar on desktop (>= lg) ----------
   Three defects measured on a 1418px viewport, all of them in the theme
   stylesheet and none of them caused by the responsive layer:

   1. styles.css sets .logo { position:fixed; top:.2rem; height:3.5rem }
      inside a bar that is 54px tall, so the white logo plate ended at
      y=59 - five pixels BELOW the blue bar, sitting on the white row.
      .logo-landing is worse: 4rem, ending at y=80.
   2. the language flag and the word "English" touched - the image right
      edge and the span left edge were the same pixel (1053).
   3. the currency <select> auto-sizes to its widest option
      ("MYR - Malaysian Ringgit", 193px) and centres its text, so the word
      "Currency" floated with ~90px of empty blue between it and the arrow
      and did not read as one control.                                    */
@media (min-width: 992px) {

    nav.first-nav .logo {
        height: 2.5rem;
        top: 0.45rem;
    }

    nav.first-nav .logo-landing,
    nav.landing-nav .logo-landing {
        height: 2.5rem;
        top: 0.45rem;
    }

    nav.first-nav .switcher-popup img,
    nav .switcher-popup img {
        margin-right: 7px;
    }

    /* the inline style on the element is border:none, hence !important */
    nav.first-nav .currency-picker {
        /* the element also carries Bootstrap .text-center, which is !important */
        text-align: left !important;
        text-align-last: left;
        padding: 1px 6px;
        border: 1px solid rgba(255, 255, 255, .55) !important;
        border-radius: 4px;
    }
}


/* ---------- FRONTEND: the property page on a phone ----------
   individual property page: two columns that are col-8 / col-4 at EVERY
   breakpoint. On a 368px viewport the whole listing lived in 245px while
   the agent card took 123px - measured: #tprCalc rendered 219px wide, and
   the photos, description and calculator were all squeezed with it.        */
@media (max-width: 767.98px) {

    #content > .container > .row > .col-8,
    #content > .container > .row > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* the agent column carries an inline padding-left: 20px */
    #content > .container > .row > .col-4 {
        padding-left: 12px !important;
        margin-top: 1.5rem;
    }
}


/* ---------- FRONTEND: the two header bars have to touch ----------
   styles.css pins the white bar with a hardcoded .second-nav { top: 3.5rem }
   (6.5rem below 767px) while the blue bar's height actually moves with the
   viewport. Measured on /country/LK, bar height vs where the white bar was put:

       1418px   54px  vs  56   ->   2px of page background showing through
       1178px   49px  vs  56   ->   7px
        977px   66px  vs  56   ->  10px OVERLAP
        878px   56px  vs  56   ->   0
        778px   56px  vs  56   ->   0
        678px  108px  vs 104   ->   4px OVERLAP
        538px   98px  vs 104   ->   6px
        377px   98px  vs 104   ->   6px

   No fixed offset can follow a bar whose height changes, so the wrapper section
   is the fixed element now and the two bars simply stack inside it. Neither bar
   was ever in the document flow, so nothing below the header moves.
   They keep their old painting order (3 over 2): the "Tropical World" link is
   pushed out of the blue bar by top: 3.5rem and has to stay above the white one. */
#index-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

#index-navbar .first-nav {
    position: relative !important;
    top: auto !important;
    z-index: 3;
}

#index-navbar .second-nav {
    position: relative !important;
    top: auto !important;
    z-index: 2;
}

/* The flag is a 24px box (a square PNG with transparent bands above and below
   the flag) while the word sits in a 16px line box at the top of a 24px block,
   so "English" rode 4px above the centre of the flag. */
nav .switcher-popup {
    align-items: center;
}

nav .switcher-popup span {
    line-height: 1;
}

/* The language switcher is a flex item next to .navbar-collapse, which has
   flex-grow: 1 and eats the free space. The switcher could therefore be
   shrunk, and the flag with it - measured at 977px it collapsed to 7x7px. */
nav .switcher-popup,
nav .switcher-popup img {
    flex: 0 0 auto;
}

/* ---------- FRONTEND: the top bar between 992px and 1199px ----------
   Measured on /country/LK at 977px: the menu did not fit on one line, so
   "Map Search" and "Post Ad" each broke over two lines and the blue bar grew
   from 54px to 66px. The currency <select> alone took 266px of the 936px row.
   Tightening the link padding and the select's type brings the row back to one
   line (bar 54px) without hiding or clipping anything. */
@media (min-width: 992px) and (max-width: 1199.98px) {

    #index-navbar .first-nav .navbar-nav .nav-link {
        padding-left: .25rem;
        padding-right: .25rem;
        font-size: .95rem;
        white-space: nowrap;
    }

    #index-navbar .first-nav .post-ad-btn {
        white-space: nowrap;
    }

    #index-navbar .first-nav .currency-picker {
        font-size: .8rem;
    }
}

/* The logo is position: fixed, so it does not take part in the row; the space
   reserved for it is .logo-flag, and Bootstrap's .row pulls the next item 12px
   back with a negative margin. Above 1200px the menu is right-aligned and far
   away, but at 977px the first link started at x=137 while the logo ended at
   x=147 - "Map Search" ran under the logo plate. Clearance measured after this
   rule: 977px +11, 1077px +22, 1178px +144, 1278px +10, 1418px +190. */
@media (min-width: 992px) and (max-width: 1199.98px) {

    #index-navbar .first-nav .logo-flag {
        margin-left: 0 !important;
        margin-right: 10px !important;
    }
}

/* ---------- FRONTEND: property page tab strip ----------
   The strip was built for four tabs, each .w-25. Statistics (HIDDEN 2026-09-24)
   and Neighbourhood (HIDDEN 2026-09-28) are commented out in
   individual-property.blade.php, so the two tabs left share the row.
   Adjust this rule when a tab comes back. */
#myTab > .nav-item.w-25 {
    width: 50% !important;
}

/* ---------- FRONTEND: menu button on the dark top bar (2026-09-28) ----------
   The bar is navbar-light, whose hamburger icon is dark grey - fine on the old
   light-blue bar, nearly invisible on the brand navy. White lines, white rim. */
nav.first-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6);
}

nav.first-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* ---------- FRONTEND: tropical hero video (country page, 2026-09-27) ----------
   The video (includes/hero-video.blade.php) fills .banner exactly; the country's own banner
   image stays as the background underneath. #index-search is absolute with z-index 1, so the
   search bar keeps sitting on top of the video. */
#index-banner .banner {
    position: relative;
    overflow: hidden;
}

#index-banner .tpr-hero-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 72%;   /* villas, beach and the turquoise water on desktop; phones see the whole frame */
    pointer-events: none;
}

/* ---------- BRAND BLUE (on request 2026-09-27) ----------
   The client's brand colour is the dark blue of the footer, #1B1B3A. Every light blue in use
   was measured on the country, landing, property and results pages and is replaced here:
   #4195E1 (top bar, currency select, price badges, bookmark, Watch Listing/Directions/Print),
   #00C1FB (Residential tab), #0DCAF0 and #79CEEC (prices, dates), #259FBC (Filters buttons),
   #0099FE (Buyer's Market table head). All of them sit on white or light grey, except the
   backgrounds, which carry white text. Most are inline styles in the blades, hence !important. */
:root {
    --tpr-brand: #1B1B3A;
}

nav.first-nav,
.currency-picker,
#pills-residential-tab,
p.d-inline-block.text-light[style*="4195" i],
th[style*="0099FE" i] {
    background-color: var(--tpr-brand) !important;
}

html body .text-info,
.property-price,
.small-num,
[style*="79CEEC" i],
.fa-bookmark[style*="4195" i],
a.btn[style*="4195" i],
button.btn[style*="4195" i],
.filter-btn {
    color: var(--tpr-brand) !important;
}


/* ---------- FRONTEND: hero search sits straight on the video (on request 2026-09-27) ----------
   The country page's #index-search had an inline half-white band, rgba(255,255,255,.5), and its
   text fields and selects an inline 55% white, #ffffff8c. Over the video the band read as a film
   laid on top of the search and the tabs. The band is gone and the fields are solid white, so the
   search reads as sitting on the video. Both were inline styles, hence !important. */
#index-search {
    background: transparent !important;
}

/* custom.css makes #pills-tabContent .input-group input[type="text"] translucent with !important,
   so the selector here has to outrank it. */
#index-search #pills-tabContent .input-group input[type="text"],
#index-search #pills-tabContent .input-group .form-select {
    background-color: #fff !important;
}


/* ---------- FRONTEND: logo with the pin (on request 2026-09-27) ----------
   tropical-logo-pin.png is variant 5a from his Claude Design project "Лого з піном замість O",
   rendered from the design file itself (Dosis 800/700, white plate, 910x398). It is 2.3:1 where
   the old logo was 3.2:1, so at the old sizes it came out narrow: 91x40 in the desktop top bar,
   with "PROPERTY REALTOR" barely readable, and 306x134 in the footer, where the theme lets the
   image fill the column. The header size is set just below; the footer size after it. */
/* Header logo: one size in every state, centred in the dark bar.
   The header shows tropical-logo-header.png: logo 5a with the pin at 96px instead of 115px, so it
   no longer towers over the letters and the plate is 2.5:1 (the old header logo was 3.2:1). It is
   shown at the old logo's size - 46px tall, about 114px wide, letters about 16px as before - which
   is what he asked for on 2026-09-28 ("the new logo, placed the way the old one was"). The footer
   keeps the full 5a. The dark bar is 50-62px tall depending on page and width, and the theme gives
   .logo-landing (the landing page, and any page for a visitor who has not picked a country yet)
   height:4rem; top:1rem with no tablet override - at 577-991px that hung 18-24px below the bar.
   From 768px the bar is one row, so the logo is centred in it; below that it sits at the top of
   the first of two rows. */
@media (min-width: 577px) {
    nav.first-nav .logo,
    nav.first-nav .logo-landing {
        height: 2.875rem !important;
        top: 0.125rem !important;
    }
}

@media (min-width: 768px) {
    /* absolute inside the fixed bar: top 50% is half of the bar, whatever its height */
    nav.first-nav .logo,
    nav.first-nav .logo-landing {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%);
    }
}

@media (max-width: 576px) {
    /* styles.css forces 2rem here with !important */
    nav.first-nav .logo,
    nav.first-nav .logo-landing {
        height: 2.5rem !important;
        top: 0.6rem !important;
    }
}

/* both footers; the landing footer also sets height:4rem inline, hence !important */
#footer img.img-fluid.mb-4 {
    height: 5rem !important;
    width: auto;
    max-width: 100%;
    border-radius: 0.35rem;
}


/* ---------- FRONTEND: phone header (2026-09-29, his screenshots) ----------
   On a phone the country pages had two stacked bars, each with its own hamburger; the second menu opened
   under the search box, the currency <select> took a whole row, and "Tropical World" (absolute offsets)
   broke into an arrow, a globe and two lines of text. Now, below 768px only:
   - blue bar: row 1 logo / flag / Post Ad (unchanged), row 2 "Tropical World" + the ONE hamburger;
     the currency picker, the country, "Contact Us" and "Change country" live in that menu (.tpr-m-only)
   - white bar: no hamburger - Residential / Commercial and the bell / saved searches / favourites in one row */
.tpr-m-world,
.tpr-m-only {
    display: none;
}

@media (max-width: 767.98px) {
    #index-navbar .globe,
    #index-navbar .mobile-currency-bar {
        display: none !important;
    }

    #index-navbar .currency-with-toggler-wrapper {
        justify-content: space-between;
        margin-top: 10px;
    }

    #index-navbar .tpr-m-world {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    #index-navbar .tpr-m-world img {
        height: 1.15rem;
        width: auto;
    }

    #index-navbar .tpr-m-only {
        display: list-item;
        list-style: none;
    }

    #index-navbar .tpr-m-flag {
        height: 14px;
        width: auto;
        margin-right: 6px;
        vertical-align: -1px;
    }

    #index-navbar .tpr-m-currency form {
        display: flex;
        align-items: center;
        padding: 8px 0;
    }

    #index-navbar .tpr-m-currency select {
        background: #fff;
        color: #1B1B3A;
        border: 0;
        border-radius: 4px;
        padding: 4px 8px;
        text-align: left;
        max-width: 60%;
    }

    /* the open menu: its own background, scrolls inside itself if it is taller than the screen */
    #index-navbar #navbarNav1.show,
    #index-navbar #navbarNav1.collapsing {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    /* white bar: one row, no second menu */
    #index-navbar .second-nav .navbar-toggler {
        display: none !important;
    }

    #index-navbar .second-nav > nav {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #index-navbar .second-nav #navbarNav2 {
        display: flex !important;
        flex-basis: 100%;
        height: auto !important;
    }

    #index-navbar .second-nav #navbarNav2 > ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        margin: 0;
        padding-left: 0;
    }

    /* the country picker and Contact Us moved into the blue menu */
    #index-navbar .second-nav #navbarNav2 > ul > li.contact {
        display: none !important;
    }

    #index-navbar .second-nav .nav2 {
        padding: 0 10px 0 0;
    }

    #index-navbar .second-nav .nav2 .nav-link {
        font-size: 0.9rem;
        padding: 6px 0;
        white-space: nowrap;
    }

    #index-navbar .second-nav .icons-bar {
        width: auto;
        margin: 0 0 0 auto;
        gap: 14px;
        justify-content: flex-end;
    }

    #index-navbar .second-nav .icon-wrapper i {
        font-size: 1.3rem !important;
    }

    /* the language list is a 980px-wide box: on a phone it ran off the screen */
    .gt_white_content {
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        margin: -187.5px 0 0 0 !important;
    }

    .gt_white_content .gt_languages {
        column-count: 2 !important;
    }
}

@media (max-width: 767.98px) {
    /* another rule paints .currency-picker navy on navy: the menu's picker has to be readable */
    #index-navbar #tpr-m-currency-select {
        background-color: #fff !important;
        color: #1B1B3A !important;
        border: 0 !important;
    }

    /* the page-wide `img { display: block }` put the flag above the country name */
    #index-navbar img.tpr-m-flag,
    #index-navbar .tpr-m-world img {
        display: inline-block !important;
    }

    /* the favourites heart is drawn 34px (header rule) and lifted 7px inline: same size and line as the others */
    #index-navbar .second-nav .icons-bar i.bi-heart-fill {
        top: 0 !important;
    }

    #index-navbar .second-nav .icons-bar .bi-heart-fill::before {
        font-size: 1.45rem !important;
        margin-top: 0 !important;
        vertical-align: middle;
    }
}


/* ---------- FRONTEND: results card heart (2026-09-29) ----------
   The card's name/price block is a .row with justify-content-between: col-9 on the left, the heart
   button on the right. The button has no col class, so Bootstrap's `.row > * { width: 100% }` gave it
   a line of its own and the heart floated in the middle of the card, at every width. */
.highlightProperty .heart-fix-a > .row {
    flex-wrap: nowrap;
}

/* !important: below 768px "listing grids" above forces every col in #residential-properties to 100% */
.highlightProperty .heart-fix-a > .row > .col-9 {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto;
    min-width: 0;
}

.highlightProperty .heart-fix-a > .row > button {
    flex: 0 0 auto;
    width: auto;
    align-self: flex-start;
    padding: 0 4px;
}


/* ---------- FRONTEND: phone pass over every page (2026-09-29, his request) ----------
   Screen-by-screen sweep of 13 pages at 390px; each rule below names what was measured. */
@media (max-width: 767.98px) {

    /* "Feedback" was a red tab rotated on the right edge at 290px from the top: it lay over the right
       12-25px of whatever scrolled under it (the listing's Favourite heart, card hearts). On a phone it
       is a round button in the bottom-right corner; the modal it opens is unchanged. */
    button.feedback {
        top: auto;
        bottom: 16px;
        right: 12px;
        transform: none;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }

    button.feedback i {
        font-size: 20px;
        padding-right: 0 !important;
    }

    /* ----- results page (/search_result_filter/...) ----- */
    /* the keyword box was 19px tall with no border next to 40px controls */
    #residential-property-search input.search-anything {
        height: 42px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
    }

    #residential-property-search .row.top-search-filter-bar-second-row {
        margin-left: 15px;
        margin-right: 15px;
    }

    #residential-property-search button.popover__trigger {
        min-height: 38px;
        border: 1px solid #dcdfe6;
    }

    /* "All properties in Sri Lanka" rendered 16px, and the Save this Search pill put its heart on a
       line above the words */
    #residential-properties h3.fw-bolder {
        font-size: 1.3rem;
        margin-bottom: 12px;
    }

    #residential-properties .max-btn {
        width: 100%;
        margin-left: 0;
        display: flex;
        justify-content: center;
    }

    #residential-properties .max-btn form {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    #residential-properties .max-btn .tab-full-btn {
        width: auto !important;
        padding: 8px 24px !important;
    }

    #residential-properties .max-btn .tab-full-btn > .row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        margin: 0;
    }

    #residential-properties .max-btn .tab-full-btn > .row > div {
        width: auto;
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    /* ----- property page (/individual-property/{id}) ----- */
    /* 25 photos = 25 pagination dots in two rows over the bottom of the photo */
    #content .mySwiper2 .swiper-pagination {
        position: static;
        margin-top: 10px;
        line-height: 0;
    }

    #content .mySwiper2 .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 3px !important;
    }

    /* the market bar sat in the right half of the row next to an empty col-6 */
    #content .features .row.mt-3 > .col-6:empty {
        display: none;
    }

    #content .features .row.mt-3 > .col-6:empty + .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* the collapsed description is clipped at 11rem, which on a phone cut the "Description:" label in
       half; taller, and faded out instead of cut */
    .features #collapseExample.collapse:not(.show),
    .features #collapseExample.collapsing {
        height: 16rem;
    }

    .features #collapseExample.collapse:not(.show) {
        -webkit-mask-image: linear-gradient(#000 75%, transparent);
        mask-image: linear-gradient(#000 75%, transparent);
    }

    /* 220px of grey between the agent card and "Similar Properties": two <br>, a row holding only an
       <hr class="mt-5">, and the section's inline margin-top: 6rem */
    #content .tab-half > br,
    #content .tab-half > .row.justify-content-center:not(.bg-white) {
        display: none;
    }

    #similar-properties > .container {
        margin-top: 2.5rem !important;
    }

    /* similar cards are a fixed 400px (inline); stacked one per row they ended in 70px of blank card */
    #similar-properties .tab-height-p-card {
        height: auto !important;
    }

    /* ----- agent page (/individual-agent/{id}) ----- */
    /* Call fitted icon + word on one line, Email and Share wrapped: three buttons of two heights */
    .i-agent-contact-btns-area .row > .col-4 {
        display: flex;
    }

    .i-agent-contact-btns-area .row > .col-4 > a {
        flex: 1 1 auto;
        display: flex;
    }

    .i-agent-contact-btns-area .individual-about-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
    }

    .i-agent-contact-btns-area .individual-about-buttons img {
        margin: 0 !important;
    }

    /* ----- contact pages (/contact, /country/{code}/contact) ----- */
    /* the icons live in a .col-1, 8px wide at 390px: the phone icon image shrank to 8px */
    #contact-us > .container {
        margin-top: 2.5rem !important;
    }

    #contact-us .tab-contact-side-left .row > .col-1 {
        flex: 0 0 44px;
        max-width: 44px;
    }

    #contact-us .tab-contact-side-left .row > .col-11 {
        flex: 1 1 0;
        max-width: none;
        width: auto;
    }

    #contact-us .tab-contact-side-left .row > .col-1 img {
        width: 26px;
        max-width: none;
        height: auto;
    }

    /* ----- About, Tips, Privacy, Cookie, Terms ----- */
    /* justified text in a 360px column leaves wide gaps between words; and the text started 130px
       below the header */
    .about-container {
        margin-top: 110px !important;
    }

    .about-container [style*="justify" i],
    .about-container [style*="justify" i] p {
        text-align: left !important;
    }

    /* ----- landing page (/) ----- */
    /* "Tropical Regions" was a fixed 500px box (two 390px blurred layers + the list absolutely placed)
       holding a 7-line list; below 577px the map's box was 900px tall inside an 1100px section, and
       between 577px and 767px the section was 620px, which hid the map completely */
    #map-section.map-banner {
        height: auto !important;
        padding-bottom: 32px;
    }

    #map-section .regions-div {
        height: auto !important;
        margin-bottom: 16px;
    }

    #map-section .regions-div .map-ban,
    #map-section .regions-div .map-ban1 {
        display: none;
    }

    #map-section .regions-div .countries {
        position: static !important;
        height: auto;
        overflow: visible;
        padding: 14px 18px 6px;
        background: rgba(0, 0, 0, .45);
    }

    #map-section .map-div {
        height: 455px !important;
        overflow: hidden;
    }

    /* ----- signed-in pages (account menu + page) ----- */
    /* 31 account pages are .user-settings > .row > .col-4 (the menu) + .col-8 (the page). Nine of them
       carry .full-size-width and stack on a phone; the rest (Properties, Create Property, Agent, the
       Country Management pages...) kept the split: the page got 250px, the document grew to 415-445px,
       and the dashboard counters broke one letter per line. All of them stack now. */
    .container.user-settings > .row > .col-4,
    .container.user-settings > .row > .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .container.user-settings > .row > .col-8 {
        margin-top: 1.5rem;
    }

    /* the page title row sits in a .col-12.p-0, so its -12px row margins ran 12px past the screen */
    .container.user-settings .col-12.p-0 > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* menu: "Country Management" + flag is .w-100 plus .ms-3, 16px wider than the menu */
    .container.user-settings .row.w-100.ms-3 {
        width: calc(100% - 1rem) !important;
    }

    /* agent's Properties list: photo and text were 150px each, and View / Edit / delete / Sell were
       squeezed into 150px, the last one past the screen edge */
    #nav-properties > .row.border > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #nav-properties > .row.border > [class*="col-"] + [class*="col-"] {
        margin-top: 12px;
    }

    #nav-properties .row.border .col-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #nav-properties .row.border .col-10 > .row > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        padding-left: 0;
        padding-right: 6px;
    }

    /* Country Management dashboard: three 110px counter cards, their titles broke one syllable per
       line ("Appro / ved / Proper / ties") */
    #nav-communication > .row > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    /* Home Page Feature: two 170px cards side by side, "Add Property" ran 15px past the screen */
    .container.user-settings form[action$="home-page-feature/update"] > .row > .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    /* Advertisement Management: .table-responsive was put on the <table> itself, where it cannot
       scroll; the table pushed the page to 492px */
    .container.user-settings table.table-responsive {
        display: block;
        overflow-x: auto;
    }

    /* "Add New" / "Maximum 6 ..." sat in a 61px .col-2 (122px .col-4) after an empty column */
    .container.user-settings .row > .col-10 + .col-2,
    .container.user-settings .row > .col-8 + .col-4.text-end {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: right;
    }

    /* ----- register page ----- */
    /* the form is two desktop columns stacked: a 48px empty band closed the first box */
    .register-container .col-6.pe-0.full-size-width > div {
        padding-bottom: 8px !important;
    }
}