/* HelloBalkan — Mockup 1 presentation layer
   Warm terracotta CTAs, Adriatic teal secondary controls, sand ground.
   Loaded last (after design.css and refresh.css) so it can refine tokens. */

/* ---------------------------------------------------------------- Ground */

body,
.listivo-app,
.elementor-page-6067 {
    background-color: var(--np-sand);
}

body {
    color: var(--np-ink);
}

::selection {
    background: var(--np-terracotta);
    color: #fff;
}

/* Tinted shadow instead of grey: shadows borrow the ground's warmth. */
:root {
    --np-shadow: 0 18px 44px rgba(42, 36, 34, .10);
    --np-shadow-soft: 0 8px 22px rgba(42, 36, 34, .07);
}

/* --------------------------------------------------------------- Buttons */

.listivo-button--primary-1,
.listivo-button--primary-2,
.listivo-simple-button--background-primary-1,
.elementor-button,
.fluentform .ff-btn-submit,
.np-availability__cta {
    background: var(--np-terracotta) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px rgba(224, 90, 71, .24) !important;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.listivo-button--primary-1:hover,
.listivo-button--primary-2:hover,
.listivo-simple-button--background-primary-1:hover,
.elementor-button:hover,
.fluentform .ff-btn-submit:hover,
.np-availability__cta:hover {
    background: var(--np-terracotta-dark) !important;
    box-shadow: 0 12px 26px rgba(199, 70, 47, .30) !important;
    transform: translateY(-1px);
}

/* Secondary controls (filter, map, ghost buttons) use the Adriatic teal. */
.listivo-button--secondary,
.listivo-simple-button--background-secondary,
.listivo-menu-v2 .listivo-button--secondary,
.np-search__filter,
.np-search__map {
    background: var(--np-teal-soft) !important;
    border-color: transparent !important;
    color: var(--np-teal) !important;
}

.listivo-button--secondary:hover,
.listivo-simple-button--background-secondary:hover,
.np-search__filter:hover,
.np-search__map:hover {
    background: var(--np-teal) !important;
    color: #fff !important;
}

/* -------------------------------------------------- Hero: one floating bar */

.np-hero__accent {
    color: #F6CDBF;
}

.np-search {
    padding: 7px;
    border-radius: 22px;
    background: var(--np-surface);
    box-shadow:
        0 24px 54px rgba(28, 22, 20, .26),
        0 2px 6px rgba(28, 22, 20, .10);
    border: 1px solid rgba(255, 255, 255, .55);
}

/* Fields read as one surface: hairline dividers, no floating sub-boxes. */
.np-search__field {
    border-radius: 15px;
}

.np-search__field:not(:first-child) {
    border-left: 1px solid var(--np-line);
}

.np-search__field:hover,
.np-search__field.is-open {
    background: #FBF6F2;
}

.np-search__label {
    color: var(--np-muted);
}

.np-search__value,
.np-search__select,
.np-search__input {
    color: var(--np-ink);
}

.np-search__input::placeholder {
    color: #A2938A;
    font-weight: 500;
}

.np-search__submit {
    height: 56px;
    border-radius: 16px;
    background: var(--np-terracotta);
    box-shadow: 0 10px 22px rgba(224, 90, 71, .28);
}

.np-search__submit:hover {
    background: var(--np-terracotta-dark);
    box-shadow: 0 12px 26px rgba(199, 70, 47, .32);
}

/* Filter + map sit inside the same bar as quiet buttons. */
.np-search__filter,
.np-search__map {
    height: 56px;
    margin-left: 4px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    font-weight: 600;
}

.np-search__panel {
    border-color: var(--np-line);
    box-shadow: 0 24px 54px rgba(28, 22, 20, .18);
    color: var(--np-ink);
}

.np-dest__search {
    border-color: var(--np-line);
    background: #FCFAF7;
    color: var(--np-muted);
}

.np-dest__search input,
.np-dest__text strong,
.np-guests__copy strong,
.np-stepper span {
    color: var(--np-ink);
}

.np-dest__option:hover,
.np-dest__back:hover {
    background: #FBF6F2;
}

.np-dest__code {
    background: var(--np-terracotta-soft);
    color: var(--np-terracotta);
}

.np-dest__code--blue {
    background: var(--np-terracotta);
    color: #fff;
}

.np-dest__back {
    color: var(--np-terracotta);
}

.np-dest__town:hover {
    border-color: var(--np-teal);
    color: var(--np-teal);
    background: var(--np-teal-soft);
}

.np-stepper button:hover {
    border-color: var(--np-teal);
    color: var(--np-teal);
}

.np-guests__done {
    background: var(--np-terracotta);
}

.np-hero__chip:hover {
    color: var(--np-ink);
}

/* ---------------------------------------------------------------- Filters */

.listivo-tab-v2 {
    border: 1px solid var(--np-line);
    background: var(--np-surface);
    color: var(--np-muted);
    font-weight: 600;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.listivo-tab-v2:hover {
    border-color: var(--np-teal);
    color: var(--np-teal);
}

.listivo-tab-v2--active,
.listivo-tab-v2.listivo-tab-v2--active {
    background: var(--np-teal) !important;
    border-color: var(--np-teal) !important;
    color: #fff !important;
}

.listivo-listing-list-with-tabs__button {
    background: var(--np-teal-soft);
    color: var(--np-teal);
    border-radius: 10px;
}

.listivo-listing-list-with-tabs__button:hover {
    background: var(--np-teal);
    color: #fff;
}

/* ------------------------------------------------------------------ Cards */

.listivo-listing-card-v4 {
    background: var(--np-surface);
    border: 1px solid var(--np-line);
    border-radius: var(--np-radius) !important;
    box-shadow: var(--np-shadow-soft);
}

.listivo-listing-card-v4:hover {
    box-shadow: var(--np-shadow);
}

.listivo-listing-card-v4__name {
    color: var(--np-ink);
    letter-spacing: -.02em;
}

/* Location line: city + country, not the street address. */
.listivo-listing-card-v4__address {
    color: var(--np-muted);
}

.listivo-listing-card-v4__address-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--np-muted);
}

/* Spec row: "4 guests · 2 bedrooms" — separator is real text, not CSS. */
.hb-card-spec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--np-muted);
}

.hb-card-spec span {
    white-space: nowrap;
}

/* Price is information, not a call to action: ink, not accent. */
.listivo-listing-card-v4__value {
    color: var(--np-ink) !important;
    font-weight: 800;
}

.listivo-listing-card-v4__attributes {
    color: var(--np-muted);
}

.listivo-listing-card-v4__featured,
.listivo-listing-card-v4__label {
    background: var(--np-teal) !important;
    color: #fff !important;
}

.listivo-listing-card-v4__views,
.listivo-listing-card-v4__icon {
    color: var(--np-muted);
}

.listivo-listing-card-v4__icon--active {
    color: var(--np-terracotta);
}

/* Never render an empty photo frame. */
.listivo-listing-card-v4__gallery--image-count-0,
.listivo-listing-card-v4__gallery:empty {
    display: none !important;
}

.listivo-listing-card-v4__gallery img {
    background: var(--np-terracotta-soft);
}

/* --------------------------------------------------------------- Sections */

.listivo-heading-v2__small-text {
    color: var(--np-teal);
}

.listivo-heading-v2__text,
.listivo-search-results__title {
    color: var(--np-ink);
}

a {
    color: var(--np-terracotta);
}

a:hover {
    color: var(--np-terracotta-dark);
}

/* --------------------------------------------------------- Responsive bits */

@media (max-width: 1024px) {
    .np-search {
        border-radius: 20px;
    }

    .np-search__field {
        border-radius: 14px;
    }
}

@media (max-width: 640px) {
    .np-search {
        border-radius: 18px;
    }

    .np-search__submit,
    .np-search__filter,
    .np-search__map {
        border-radius: 14px;
    }
}


/* ------------------------------------------------------------- Import form */

.hb-import {
    max-width: 760px;
    margin: 0 auto;
    padding: 26px;
    border: 1px solid var(--np-line);
    border-radius: var(--np-radius);
    background: var(--np-surface);
    box-shadow: var(--np-shadow-soft);
}

.hb-import__label {
    display: block;
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--np-ink);
}

.hb-import__row {
    display: flex;
    gap: 10px;
}

.hb-import__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    padding: 0 18px;
    border: 1px solid var(--np-line);
    border-radius: 14px;
    background: #FCFAF7;
    color: var(--np-ink);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.hb-import__input:focus {
    outline: none;
    border-color: var(--np-teal);
    box-shadow: 0 0 0 3px rgba(13, 110, 110, .16);
}

.hb-import__submit {
    height: 56px;
    padding: 0 26px;
    white-space: nowrap;
}

.hb-import__hint {
    margin: 14px 0 0;
    color: var(--np-muted);
    font-size: 13px;
}

.hb-import__notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #FBF6F2;
    color: var(--np-ink);
    font-size: 14px;
}

.hb-import__notice--ok {
    background: var(--np-teal-soft);
    color: var(--np-teal-dark);
}

.hb-import__notice--error {
    background: var(--np-terracotta-soft);
    color: var(--np-terracotta-deep);
}

@media (max-width: 640px) {
    .hb-import {
        padding: 20px;
    }

    .hb-import__row {
        flex-direction: column;
    }

    .hb-import__submit {
        width: 100%;
    }
}