#final_step_wrapper {
    display: none;
}

.payment_kartice {
    height: 32px;
    margin-top: 24px;
}

.form-control {
    height: 40px;
    font-size: 18px;
}

.form_notice {
    border: 0;
    background-color: rgba(0,0,0,.3);
    padding: 10px 15px;
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-left: 30px;
    border-radius: 10px;
}

.trans_03_iino {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.hidden {
    display: none;
}

#main_article p {
    text-align: justify
}

.app-screenshot {
    max-height: 500px;
    object-fit: contain;
}

.store-button {
    min-width: 200px;
}

.download-section {
    background-color: #f8f9fa;
    padding: 20px
}

@media (min-width: 768px) {
    .flex-md-row {
        flex-direction: row !important;
    }
}

/* App store styling */
.app-store-links {
    text-align: center;
    padding: 10px 0;
}

.app-store-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.app-store-button {
    display: inline-block;
    transition: transform 0.2s ease;
}

    .app-store-button:hover {
        transform: scale(1.05);
    }

/*    .app-store-button img {
        border-radius: 8px;
    }*/

/* Responsive adjustments for mobile */
@media (max-width: 576px) {
    .app-store-buttons {
        flex-direction: column;
    }

    .app-store-button {
        margin-bottom: 10px;
    }
}

.payment_kartice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Space between cards */
    margin-top: 20px;
    margin-bottom: 10px;
}

.payment_card img {
    /*max-width: 85px;*/ /* Set a smaller width for the cards */
    height: auto;
    max-height: 40px;
    object-fit: contain; /* Ensure the image fits within the container */
    transition: transform 0.3s ease; /* Add a hover effect */
}

    .payment_card img:hover {
        transform: scale(1.1); /* Slight zoom effect on hover */
    }


/* Offices list. Card shell matches the site's own card language (.car-card,
   .kontakt_info_item_wrap): white, 7px radius, 1px #e5e5e5 — not the drop-shadowed
   grey gradient this page used to carry on its own. Brand purple and yellow do the
   accent work, and the icon rows reuse the existing icon_* SVGs. */
.offices_list_wrap {
    margin-top: 35px;
    margin-bottom: 35px;
}

.office_card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.office_card:hover,
.office_card:focus-within {
    border-color: #591f80;
    box-shadow: 0 8px 20px rgba(89, 31, 128, .12);
    transform: translateY(-3px);
}

/* Purple keyline that fills in on hover — the brand cue that the card is live. */
.office_card_main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 28px 30px 20px 30px;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: border-color .2s ease;
}

.office_card:hover .office_card_main {
    border-left-color: #ffba00;
}

.office_card_town {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 3px;
    background-color: #f3ecf8;
    color: #591f80;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.office_card_title {
    margin: 0 0 16px 0;
    color: #591f80;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

/* Icon rows follow .kontakt_info_item's pattern (left-anchored SVG + padding),
   at the smaller size a card needs. */
.office_card_row {
    position: relative;
    margin: 0 0 12px 0;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: left 2px;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

/* icon_gps is a 44x88 pin — sized explicitly so it keeps its 1:2 ratio instead of
   rendering 36px tall and spilling out of the row. */
.office_card_row_address {
    background-image: url(/images/icon_gps.svg);
    background-size: 9px 18px;
    background-position: left 1px;
}

/* WorkTime is authored HTML from Renteon and can run long; clamping keeps every
   card's block the same height so the grid rows stay aligned. */
.office_card_row_hours {
    background-image: url(/images/icon_radno_vrijeme.svg);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.office_card_row_hours p {
    margin: 0;
}

.office_card_more {
    margin-top: auto;
    padding-top: 14px;
    color: #591f80;
    font-size: 14px;
    font-weight: 700;
}

.office_card_more::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 7px;
    vertical-align: -1px;
    background: url(/images/icon_related_arrow_right.svg) no-repeat center / contain;
    transition: transform .2s ease;
}

.office_card:hover .office_card_more::after {
    transform: translateX(4px);
}

/* Contact links sit outside .office_card_main: tel:/mailto: are the page's other
   primary action, and nesting them inside the card-wide <a> would be invalid HTML. */
.office_card_contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 14px 30px;
    border-top: 1px solid #e5e5e5;
    background-color: #fafafa;
}

.office_card_contact_item {
    padding-left: 24px;
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: left center;
    color: #000;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.office_card_contact_item:hover {
    color: #591f80;
}

.office_card_contact_tel {
    background-image: url(/images/icon_telefoni.svg);
}

.office_card_contact_mail {
    background-image: url(/images/icon_email.svg);
}

/* Office detail. Same shell as .office_card so the list and the detail page read
   as one component family. */
.office_details_wrap {
    margin-top: 35px;
    margin-bottom: 35px;
}

.office_detail_card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    padding: 28px 30px;
}

.office_detail_heading {
    margin: 0 0 22px 0;
    color: #591f80;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

.office_card_town + .office_detail_heading {
    margin-top: 8px;
}

.office_detail_list {
    margin: 0;
}

/* Label above value, with the row's icon anchored left — the same icon vocabulary
   as the list cards, one size up. */
.office_detail_item {
    padding-left: 38px;
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: left 2px;
    min-height: 24px;
}

.office_detail_item:last-child {
    margin-bottom: 0;
}

.office_detail_item dt {
    color: #591f80;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.office_detail_item dd {
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}

.office_detail_item dd p {
    margin: 0;
}

.office_detail_item dd a {
    color: #000;
    overflow-wrap: anywhere;
}

.office_detail_item dd a:hover {
    color: #591f80;
}

.office_detail_item_address {
    background-image: url(/images/icon_gps.svg);
    background-size: 11px 22px;
}

.office_detail_item_hours {
    background-image: url(/images/icon_radno_vrijeme.svg);
}

.office_detail_item_tel {
    background-image: url(/images/icon_telefoni.svg);
}

.office_detail_item_mail {
    background-image: url(/images/icon_email.svg);
}

/* Instructions are free text from Renteon — set them off so they don't read as
   part of the contact block above. */
.office_detail_notes {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.office_detail_note {
    margin-bottom: 16px;
}

.office_detail_note:last-child {
    margin-bottom: 0;
}

.office_detail_note_title {
    display: block;
    color: #591f80;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.office_detail_note p {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.office_detail_cta {
    margin-top: auto;
    padding-top: 24px;
}

.office_detail_map_frame {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    aspect-ratio: 4 / 3;
}

.office_detail_map_frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.office_detail_directions {
    margin-top: auto;
    padding-top: 16px;
    color: #591f80;
    font-size: 14px;
    font-weight: 700;
}

.office_detail_directions::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 7px;
    vertical-align: -1px;
    background: url(/images/icon_related_arrow_right.svg) no-repeat center / contain;
    transition: transform .2s ease;
}

.office_detail_directions:hover::after {
    transform: translateX(4px);
}

.related_offices_wrap {
    padding: 40px 0;
    border-top: 1px solid #e5e5e5;
}

.related_offices_wrap .section_heading {
    margin-bottom: 30px;
    color: #591f80;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}



.nav-breadcrumb {
    /*background: #f3ecf8;*/
    background: #fafafa;
    /*border-bottom: 1px solid #ddd;*/
    margin-bottom: 15px;
}

.active-booking{
    background:#fafafa;
}

/* Fix for select dropdown visibility */
/* Specific styling for country dropdown */
.country-select {
    width: 100%;
    height: 40px;
    font-size: 18px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    color: #333;
    font-family: inherit;
    line-height: 1.5;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1em 1em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.3s ease;
}

    .country-select:focus {
        outline: none;
        border-color: #591f80;
        box-shadow: 0 0 0 2px rgba(89, 31, 128, 0.2);
    }

    .country-select:hover {
        border-color: #bbb;
    }

    .country-select option {
        padding: 8px 12px;
        background-color: white;
        color: #333;
    }

/* Homepage "Samo dobre vijesti" list. main.css lays .section-newslist out as
   image-beside-text but ships no rules for .img_res or .three_lines — so the
   image needs a width and the blurb a clamp. The hardcoded markup got away with
   it by pointing at pre-cropped thumbnails; post images come from blob storage
   at full size. (The /vijesti and /inspiracije templates no longer need these
   overrides: they use the dd-editorial component.) */
.section-newslist .news_item .img_wrap img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* "Inspiracije" swiper (homepage + /poslovnice). Inspiration images are uploaded
   at whatever ratio the source has, so without a fixed box every card's image —
   and the text pushed below it — settled at a different height across the row. */
.inspiracijeSwiper .news_item .img_wrap img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* .kategorija ships with a bottom margin only, so the chip sat flush against the
   image above it. */
.inspiracijeSwiper .news_item .kategorija {
    margin-top: 18px;
}

/* Slides stretch to the tallest card so the cards' bottoms line up too. */
.inspiracijeSwiper .swiper-slide {
    height: auto;
}

.inspiracijeSwiper .swiper-slide .card {
    height: 100%;
}

.section-newslist .news_item_li {
    margin-bottom: 25px;
}

.section-newslist .three_lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Vehicle cards link to /vozila/{id}. The card body used to be direct flex
   children of .car-card; wrapping it in an anchor inserts a block that would
   collapse that column, so the link has to be the flex container instead.
   Text colour is inherited so the card doesn't render as blue link text. */
.car-card .car-card-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.car-card .car-card-link:hover .info_button,
.car-card .car-card-link:focus .info_button {
    text-decoration: underline;
}

/* Homepage "Naša flota" swiper. .car-card was built for a Bootstrap column, so it
   carries 50px side padding and its <img> keeps the 415px width attribute — together
   wider than a third-of-a-row swiper slide, which spilled the card over its
   neighbours. Slides are flex so every card in a row ends up the same height. */
.flotaSwiper {
    padding-bottom: 32px;
}

.flotaSwiper .swiper-slide {
    display: flex;
    height: auto;
}

/* Borderless and tighter than the /vozila grid card - on the homepage this is a
   teaser strip, not a full card wall. */
.flotaSwiper .car-card {
    position: relative;
    padding: 0 15px;
    margin-bottom: 0;
    border: 0;
}

/* Price rides in the corner rather than as a row under the car, so the card ends
   at the image and the strip stays short. */
.flotaSwiper .flota_price_badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 6px 12px;
    border-radius: 7px;
    background-color: #591f80;
    color: #fff;
    line-height: 1.15;
}

.flotaSwiper .flota_price_label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}

.flotaSwiper .flota_price_amount {
    font-size: 18px;
    font-weight: 700;
}

.flotaSwiper .flota_price_amount sup {
    font-size: 11px;
}

/* Keeps the model name clear of the badge above it. */
.flotaSwiper .car-card-top {
    padding-right: 95px;
}

/* The 415x200 attributes give the browser a 2:1 box to reserve; capping the
   rendered height keeps the row short without cropping the car. */
.flotaSwiper .car-card img {
    max-width: 100%;
    max-height: 150px;
    height: auto;
    object-fit: contain;
    margin: 8px auto 0 auto;
}

/* Bullets sit in the padding reserved above, clear of the cards. */
.flotaSwiper .swiper-pagination {
    bottom: 0;
}

/* ==== Auth (login / register) ==== */
/* Same card shell as .office_card / .car-card, centred as a single focused column.
   The old forms leaned on .kontakt_info_item_wrap, a contact-block component that
   was never meant to hold inputs. */
.auth_wrap {
    margin-top: 35px;
    margin-bottom: 45px;
}

.auth_wrap .row {
    justify-content: center;
}

.auth_card {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    padding: 36px 40px;
}

.auth_card_title {
    margin: 0 0 6px 0;
    color: #591f80;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth_card_intro {
    margin: 0 0 26px 0;
    color: #555;
    font-size: 15px;
}

.auth_field {
    margin-bottom: 18px;
}

/* First/last name sit side by side above 576px, stack below. */
.auth_field_row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.auth_field_row .auth_field {
    flex: 1 1 200px;
}

.auth_field label {
    display: block;
    margin-bottom: 6px;
    color: #591f80;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* main.css sets .form-control to 18px/24px padding, which is oversized in a card
   this narrow — bring it back to a normal field and give it the brand focus ring. */
.auth_card .form-control {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth_card .form-control:focus {
    outline: none;
    border-color: #591f80;
    box-shadow: 0 0 0 3px rgba(89, 31, 128, .12);
}

.auth_card .form-control.input-validation-error {
    border-color: #d32f2f;
}

.auth_field_hint {
    display: block;
    margin-top: 5px;
    color: #888;
    font-size: 12px;
}

.auth_field_error {
    display: block;
    margin-top: 5px;
    color: #d32f2f;
    font-size: 13px;
}

.auth_field_error:empty {
    display: none;
}

.auth_field_inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.auth_check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 20px;
}

.auth_check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 2px 0 0 0;
    flex: 0 0 auto;
    accent-color: #591f80;
}

.auth_check label {
    margin: 0;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Validation summary / status banners. */
.auth_alert {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 7px;
    border: 1px solid;
    font-size: 14px;
}

.auth_alert ul {
    margin: 0;
    padding-left: 18px;
}

.auth_alert_error {
    border-color: #f0c2c2;
    background-color: #fdf3f3;
    color: #b02a2a;
}

.auth_alert_success {
    border-color: #bfe3c4;
    background-color: #f2faf3;
    color: #256b2e;
}

/* asp-validation-summary renders the div even with nothing to say; hide the empty
   shell so it doesn't leave a stray box above the form. */
.auth_alert_error.validation-summary-valid {
    display: none;
}

.auth_form_turnstile {
    margin-bottom: 20px;
}

.auth_card_footer {
    margin: 22px 0 0 0;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
    color: #555;
    font-size: 14px;
    text-align: center;
}

.auth_card_footer a {
    font-weight: 700;
}

@media only screen and (max-width: 575px) {
    .auth_card {
        padding: 28px 22px;
    }
}

/* "Kontaktirajte nas" renders from _Layout on every page, straight after the page
   body, with nothing marking where the page ends — so .section's 3.5rem of top
   padding plus whatever bottom margin the page carries just read as one big white
   gap. The rule gives it an edge, and the tint means that padding reads as a
   deliberate band (and as a step down to the purple footer) instead of dead space. */
.kontakt_naslovnica_wrap {
    border-top: 1px solid #e5e5e5;
    background-color: #fafafa;
}

@media only screen and (min-width: 992px) {
    .kontakt_naslovnica_wrap.section {
        padding-top: 2.5rem;
    }
}

/* ==== Profile ==== */
/* Same card family as .office_card / .auth_card. The page previously used bare
   Bootstrap .card markup, which no other public page uses. */
.profile_wrap {
    margin-top: 35px;
    margin-bottom: 45px;
}

.profile_card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    padding: 28px 30px;
}

.profile_card_title {
    margin: 0 0 22px 0;
    color: #591f80;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile_identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #e5e5e5;
}

.profile_avatar {
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
}

/* Initials stand in when the account has no uploaded image. */
.profile_avatar_initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3ecf8;
    color: #591f80;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .02em;
}

.profile_identity_name {
    margin: 0;
    color: #591f80;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
}

.profile_identity_meta {
    color: #888;
    font-size: 13px;
}

.profile_detail_list {
    margin: 0;
}

.profile_detail_item {
    margin-bottom: 16px;
}

.profile_detail_item dt {
    color: #591f80;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.profile_detail_item dd {
    margin: 0;
    color: #333;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.profile_card_cta {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile_empty {
    margin: 0 0 14px 0;
    color: #555;
    font-size: 15px;
}

/* Booking rows: content left, money right, collapsing to a stack on small screens. */
.booking_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.booking_item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #e5e5e5;
}

.booking_item:first-child {
    padding-top: 0;
    border-top: 0;
}

.booking_item:last-child {
    padding-bottom: 0;
}

.booking_item_head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.booking_item_number {
    color: #591f80;
    font-size: 16px;
    font-weight: 700;
}

.booking_item_category {
    display: block;
    color: #555;
    font-size: 14px;
}

.booking_item_dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 8px 0 0 0;
    color: #333;
    font-size: 13px;
}

.booking_item_dates_label {
    color: #888;
}

.booking_item_side {
    flex: 0 0 auto;
    text-align: right;
}

.booking_item_price {
    display: block;
    color: #5c2483;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

.booking_item_paid {
    display: block;
    margin-top: 2px;
    color: #256b2e;
    font-size: 12px;
    font-weight: 700;
}

.profile_badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.profile_badge_success {
    background-color: #e8f5ea;
    color: #256b2e;
}

.profile_badge_pending {
    background-color: #fff4d9;
    color: #8a6100;
}

.profile_badge_danger {
    background-color: #fdeaea;
    color: #b02a2a;
}

.profile_badge_muted {
    background-color: #f0f0f0;
    color: #666;
}

.profile_form_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile_form_actions .btn {
    min-width: 140px;
}

/* A disabled input still needs to look like content, not like a broken field. */
.auth_card .form-control:disabled {
    background-color: #fafafa;
    color: #777;
    cursor: not-allowed;
}

@media only screen and (max-width: 575px) {
    .profile_card {
        padding: 24px 22px;
    }

    .booking_item {
        flex-direction: column;
    }

    .booking_item_side {
        text-align: left;
    }
}

/* Profile edit: grouped sections. fieldset/legend need resetting — browser defaults
   give them a border, padding and an inline legend that break the card layout. */
.profile_fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 8px 0;
    min-width: 0;
}

.profile_fieldset + .profile_fieldset {
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

.profile_legend {
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 18px 0;
    color: #591f80;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Postal code never needs a full column next to city/country. */
.auth_field_row .auth_field_narrow {
    flex: 0 1 130px;
}

.profile_detail_empty {
    color: #999;
    font-style: italic;
}

/* Documents section --------------------------------------------------------- */

.profile_documents_toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.profile_document_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.profile_document_head .profile_card_title {
    margin: 0;
}

.profile_document_images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 16px 0;
}

.profile_document_thumb {
    display: block;
    width: 140px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    background-color: #fafafa;
}

.profile_document_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.profile_document_delete {
    margin: 0;
}

/* Checkbox rows in the document form sit inline, label to the right. */
.auth_field_check label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.auth_field_check input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Floating WhatsApp / Viber contact buttons */
.contact-fab {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-fab__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-fab__btn:hover,
.contact-fab__btn:focus {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    outline: none;
}

.contact-fab__btn img {
    display: block;
    width: 28px;
    height: 28px;
}

.contact-fab__btn--whatsapp {
    background-color: #25d366;
}

.contact-fab__btn--whatsapp:hover,
.contact-fab__btn--whatsapp:focus {
    background-color: #1ebe57;
}

.contact-fab__btn--viber {
    background-color: #7360f2;
}

.contact-fab__btn--viber:hover,
.contact-fab__btn--viber:focus {
    background-color: #5f4de0;
}

@media (max-width: 576px) {
    .contact-fab {
        right: 14px;
        bottom: 16px;
    }

    .contact-fab__btn {
        width: 50px;
        height: 50px;
    }

    .contact-fab__btn img {
        width: 24px;
        height: 24px;
    }
}

/* SEO location landing pages */
.home_location_card {
    background: #f6f4fa;
    border-bottom: 4px solid #fbd334;
    border-radius: 6px;
    color: #3e1458;
    display: block;
    min-height: 130px;
    padding: 24px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home_location_card:hover,
.home_location_card:focus {
    box-shadow: 0 12px 28px rgba(62, 20, 88, .14);
    transform: translateY(-3px);
}

.home_location_card span,
.home_location_card strong {
    display: block;
}

.home_location_card span {
    font-size: .85rem;
    margin-bottom: 8px;
}

.home_location_card strong {
    font-size: 1.05rem;
}

.seo_location_hero {
    /* The main navigation is fixed at 90px and sits over this purple band. */
    padding: 150px 0 32px;
}

.seo_location_hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.08;
    margin: 10px 0 18px;
}

.seo_location_hero p {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 780px;
}

.seo_location_eyebrow {
    color: #fbd334;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.seo_location_booking {
    padding: 0 0 48px;
}

.seo_location_intro p,
.seo_rental_terms p,
.seo_faq_item p {
    line-height: 1.75;
}

.seo_location_highlights {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
}

.seo_location_highlights > div {
    background: #f6f4fa;
    border-left: 4px solid #5b277d;
    border-radius: 5px;
    padding: 18px;
}

.seo_location_highlights strong,
.seo_location_highlights span {
    display: block;
}

.seo_location_highlights span {
    font-size: .95rem;
    margin-top: 6px;
}

.seo_location_office {
    height: auto;
}

.seo_location_office .office_detail_map_frame {
    margin-top: 22px;
}

.seo_terms_list {
    line-height: 1.7;
    padding-left: 22px;
}

.seo_terms_list li + li {
    margin-top: 9px;
}

.seo_faq_item {
    border-bottom: 1px solid #ded9e3;
    padding: 4px 0;
}

.seo_faq_item summary {
    color: #3e1458;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 17px 32px 17px 0;
}

.seo_faq_item p {
    margin: 0 0 18px;
}

@media (max-width: 767px) {
    .seo_location_hero {
        padding: 130px 0 24px;
    }

    .seo_location_highlights {
        grid-template-columns: 1fr;
    }
}