/* Details Page Styles - All classes prefixed with 'details-' to prevent conflicts */

/* Layout Containers */
.details-Frame12 {
    align-self: stretch;
    padding-top: 24px;
    padding-left: 156px;
    padding-right: 156px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: inline-flex;
    direction: rtl; /* Default to RTL for Arabic */
}

[dir="ltr"] .details-Frame12 {
    direction: ltr;
}

.details-Breadcrumb {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    display: inline-flex;
    direction: ltr; /* Default to LTR for English content */
}

/* LTR (English) - ensure left alignment */
[dir="ltr"] .details-Breadcrumb,
.details-Breadcrumb[style*="direction: ltr"],
.details-Breadcrumb[style*="direction:ltr"] {
    direction: ltr !important;
    justify-content: flex-start !important;
}

/* RTL (Arabic) - align to right */
[dir="rtl"] .details-Breadcrumb,
.details-Breadcrumb[style*="direction: rtl"],
.details-Breadcrumb[style*="direction:rtl"] {
    direction: rtl !important;
    justify-content: flex-start !important;
}

.details-Content {
    align-self: stretch;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    display: inline-flex;
}

.details-Left {
    width: 360px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: inline-flex;
}

.details-Right {
    flex: 1 1 0;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: inline-flex;
}

/* Typography */
.details-text-darkest {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right !important;
    direction: rtl;
    color: var(--Colors-Gray-Darkest, #111111);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 700;
    word-wrap: break-word;
    width: auto;
    display: block;
}

.details-text-darkest-24 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-Darkest, #111111);
    font-size: 24px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 700;
    word-wrap: break-word;
}

.details-text-darkest-20 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-Darkest, #111111);
    font-size: 20px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-default {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right !important;
    direction: rtl;
    color: var(--Colors-Gray-Default, #999999);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
    width: auto;
    display: block;
}

/* Breadcrumb-specific overrides - must come after base classes */
.details-Breadcrumb .details-text-default,
.details-Breadcrumb .details-text-darkest {
    text-align: left !important;
    direction: ltr !important;
    flex-shrink: 0;
    white-space: nowrap;
    unicode-bidi: normal !important;
}

/* LTR (English) - ensure left alignment in breadcrumb */
[dir="ltr"] .details-Breadcrumb .details-text-default,
[dir="ltr"] .details-Breadcrumb .details-text-darkest,
.details-Breadcrumb[style*="direction: ltr"] .details-text-default,
.details-Breadcrumb[style*="direction: ltr"] .details-text-darkest {
    text-align: left !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
}

/* RTL (Arabic) - align to right in breadcrumb */
[dir="rtl"] .details-Breadcrumb .details-text-default,
[dir="rtl"] .details-Breadcrumb .details-text-darkest,
.details-Breadcrumb[style*="direction: rtl"] .details-text-default,
.details-Breadcrumb[style*="direction: rtl"] .details-text-darkest {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
}

.details-text-dark {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: var(--Colors-Gray-Dark, #666666);
    font-size: 13px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-dark-16 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-Dark, #666666);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-dark-18 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-Dark, #666666);
    font-size: 18px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-dark-20 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-Dark, #666666);
    font-size: 20px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-white {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-White, white);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 700;
    word-wrap: break-word;
}

.details-text-white-12 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-White, white);
    font-size: 12px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-black-24 {
    align-self: stretch;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: black;
    font-size: 24px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 700;
    word-wrap: break-word;
}

.details-text-primary {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Primary-500, #6A5D8B);
    font-size: 12px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-primary-14 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Primary-500, #6A5D8B);
    font-size: 14px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-primary-16 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Primary-500, #6A5D8B);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-primary-20 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Primary-500, #6A5D8B);
    font-size: 20px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-text-primary-700 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Primary-500, #6A5D8B);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 700;
    word-wrap: break-word;
}

/* Images */
.details-Photo {
    align-self: stretch;
    height: 197.50px;
    border-radius: 16px;
    width: 100%;
    object-fit: cover;
}

.details-Photo-large {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    height: 419px;
    min-height: 419px;
    border-radius: 24px;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
}

/* VR Section */
.details-Vr {
    width: 360px;
    height: 197.50px;
    padding-left: 136px;
    padding-right: 136px;
    padding-top: 67px;
    padding-bottom: 67px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.48) 100%);
    border-radius: 16px;
    background-image: url(https://placehold.co/360x198);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.details-Vr-inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

/* SVG Wrappers */
[data-svg-wrapper] {
    position: relative;
}

/* Broker Section */
.details-Broker {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Frame15 {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: flex;
}

.details-Profile {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.details-Profile-card {
    align-self: stretch;
    padding: 16px;
    background: var(--Colors-Gray-Lightest, #F4F4F4);
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.details-Text {
    flex: 1 1 0;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Text-stretch {
    align-self: stretch;
}

/* Badges */
.details-Badge {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.details-Badge-absolute {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    left: 63.50px;
    top: -6.50px;
    position: absolute;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.details-Badge-success {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    left: 103.50px;
    top: 20px;
    position: absolute;
    background: var(--Additional-Success, #49A078);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.details-Badge-large {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex;
}

.details-Badge-large-absolute {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    right: 16px;
    top: 16px;
    position: absolute;
    background: rgba(0, 0, 0, 0.48);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: inline-flex;
}

.details-Badge-large-padding {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 14.50px;
    padding-bottom: 14.50px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.details-Badge-partner {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.details-Badge-primary-100 {
    align-self: stretch;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.details-Badge-primary-100-alt {
    align-self: stretch;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--Primary-100, #E1DFE8);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

/* Contact Section */
.details-Contact {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Whatsapp {
    flex: 1 1 0;
    padding-top: 12px;
    padding-bottom: 12px;
    background: #F4F9F7;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.details-Mail, .details-Call {
    flex: 1 1 0;
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    display: flex;
}

/* Payment Options */
.details-PaymentOptions {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Options {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Field {
    flex: 1 1 0;
    padding: 16px;
    background: var(--Primary-50, #F3F2F6);
    overflow: hidden;
    border-radius: 12px;
    outline: 1px var(--Primary-100, #E1DFE8) solid;
    outline-offset: -1px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.details-Field-white {
    flex: 1 1 0;
    padding: 16px;
    background: var(--Colors-Gray-White, white);
    overflow: hidden;
    border-radius: 12px;
    outline: 1px var(--Colors-Gray-Lighter, #E6E6E6) solid;
    outline-offset: -1px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.details-Field-stretch {
    align-self: stretch;
    padding: 16px;
    background: var(--Colors-Gray-White, white);
    overflow: hidden;
    border-radius: 12px;
    outline: 1px var(--Colors-Gray-Lighter, #E6E6E6) solid;
    outline-offset: -1px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.details-Placeholder {
    flex: 1 1 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: var(--Primary-500, #6A5D8B);
    font-size: 14px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-Placeholder-darkest {
    flex: 1 1 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: var(--Colors-Gray-Darkest, #111111);
    font-size: 14px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-Placeholder-default {
    flex: 1 1 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: var(--Colors-Gray-Default, #999999);
    font-size: 14px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-Password {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: flex;
}

.details-Label {
    align-self: stretch;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: var(--Colors-Gray-Dark, #666666);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

/* Share Section */
.details-Share {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Amount {
    flex: 1 1 0;
    padding: 16px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: inline-flex;
}

.details-Pie {
    width: 121px;
    height: 121px;
    position: relative;
}

.details-Ellipse3 {
    width: 121px;
    height: 121px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 9999px;
}

.details-Ellipse4 {
    width: 121px;
    height: 121px;
    left: 0px;
    top: 0px;
    position: absolute;
    background: var(--Primary-500, #6A5D8B);
    border-radius: 9999px;
}

.details-pie-text-40 {
    left: 37.50px;
    top: 38px;
    position: absolute;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Primary-500, #6A5D8B);
    font-size: 32px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 700;
    word-wrap: break-word;
}

.details-pie-text-complete {
    left: 40px;
    top: 72px;
    position: absolute;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Primary-500, #6A5D8B);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

/* Partners List */
.details-PartnersList {
    align-self: stretch;
    height: 287px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Partner {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: inline-flex;
}

.details-Info {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: inline-flex;
}

.details-Name {
    align-self: stretch;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    display: inline-flex;
}

.details-Badges {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.details-Rectangle13 {
    width: 68px;
    height: 68px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 16px;
}

/* Button */
.details-Button {
    align-self: stretch;
    height: 64px;
    padding-left: 16px;
    padding-right: 16px;
    background: var(--Primary-500, #6A5D8B);
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    display: inline-flex !important;
}

.details-Button-fixed {
    width: 696px;
    height: 64px;
    padding-left: 16px;
    padding-right: 16px;
    background: var(--Primary-500, #6A5D8B);
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

/* Info Section */
.details-Info-section {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Title {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Amenities {
    align-self: stretch;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.details-Badge-amenity {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 9.50px;
    padding-bottom: 9.50px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.details-Badge-amenity-alt {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.details-Location {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.details-Location-text {
    flex: 1 1 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-Darkest, #111111);
    font-size: 20px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

/* Services Section */
.details-Services {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Details {
    align-self: stretch;
    overflow: hidden;
    border-radius: 16px;
    outline: 1px var(--Colors-Gray-Lighter, #E6E6E6) solid;
    outline-offset: -1px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.details-Row {
    align-self: stretch;
    padding: 24px;
    background: var(--Colors-Gray-White, white);
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Row-alt {
    align-self: stretch;
    padding: 24px;
    background: var(--Colors-Gray-Lightest, #F4F4F4);
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Row-value {
    flex: 1 1 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    color: var(--Colors-Gray-Darkest, #111111);
    font-size: 20px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

.details-Row-label {
    flex: 1 1 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    color: var(--Colors-Gray-Dark, #666666);
    font-size: 20px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

/* Price Analysis */
.details-PriceAnalysis {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Frame2147227151,
.Frame2147227151,
.price-slider-wrapper {
    align-self: stretch;
    min-height: 60px;
    position: relative;
    padding-bottom: 10px;
}

.details-Rectangle14 {
    width: 744px;
    height: 4px;
    left: 0px;
    top: 6px;
    position: absolute;
    background: var(--Primary-100, #E1DFE8);
    border-radius: 2px;
}

.details-Rectangle15 {
    width: 404px;
    height: 4px;
    left: 168px;
    top: 6px;
    position: absolute;
    background: var(--Primary-500, #6A5D8B);
    border-radius: 2px;
}

.details-Ellipse6 {
    left: 362px;
    top: 0px;
    position: absolute;
}

.details-price-label-left {
    width: 63px;
    height: 11px;
    left: 136px;
    top: 24px;
    position: absolute;
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.details-price-label-center {
    width: 63px;
    height: 11px;
    left: 338px;
    top: 24px;
    position: absolute;
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.details-price-label-right {
    width: 63px;
    height: 11px;
    left: 540px;
    top: 24px;
    position: absolute;
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

/* Frame 14 */
.details-Frame14 {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Service {
    flex: 1 1 0;
    padding: 16px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.details-Service-text {
    align-self: stretch;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: center;
    color: var(--Primary-500, #6A5D8B);
    font-size: 16px;
    font-family: IBM Plex Sans Arabic;
    font-weight: 500;
    word-wrap: break-word;
}

/* Map */
.details-Map {
    align-self: stretch;
    height: 270px;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

.details-Map-image {
    width: 744px;
    height: 558px;
    left: 0px;
    top: 0px;
    position: absolute;
    border-radius: 24px;
}

.details-Pin {
    width: 48px;
    height: 58px;
    left: 396px;
    top: 121px;
    position: absolute;
}

.details-Union {
    left: 0px;
    top: 0px;
    position: absolute;
}

.details-Home05 {
    left: 12px;
    top: 12px;
    position: absolute;
}

/* Calculator */
.details-Calculator {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Form {
    align-self: stretch;
    padding: 24px;
    background: var(--Colors-Gray-White, white);
    box-shadow: 0px 0px 32px 8px rgba(102, 102, 102, 0.08);
    border-radius: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Switchers {
    align-self: stretch;
    padding: 8px;
    background: var(--Colors-Gray-White, white);
    border-radius: 16px;
    outline: 1px var(--Colors-Gray-Lighter, #E6E6E6) solid;
    outline-offset: -1px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.details-switcher-item {
    flex: 1 1 0;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 16px;
    padding-bottom: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.details-switcher-item-active {
    flex: 1 1 0;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.details-switcher-item-outline {
    flex: 1 1 0;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: var(--Colors-Gray-White, white);
    border-radius: 12px;
    outline: 1px var(--Colors-Gray-Lighter, #E6E6E6) solid;
    outline-offset: -1px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.details-Question {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-TextField {
    align-self: stretch;
    height: 76px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: flex;
}

.details-TextField-75 {
    align-self: stretch;
    height: 75px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: flex;
}

.details-Loan {
    align-self: stretch;
    padding: 24px;
    background: var(--Primary-50, #F3F2F6);
    border-radius: 16px;
    outline: 1px var(--Primary-500, #6A5D8B) solid;
    outline-offset: -1px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
}

.details-Frame17, .details-Frame16 {
    flex: 1 1 0;
    padding: 16px;
    background: var(--Primary-100, #E1DFE8);
    border-radius: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: inline-flex;
}

/* Rectangle 16 */
.details-Rectangle16 {
    width: 297px;
    height: 40px;
    left: 447px;
    top: 0px;
    position: absolute;
    opacity: 0.24;
    background: var(--Primary-500, #6A5D8B);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Price Display */
.details-price-display {
    align-self: stretch;
    height: 22px;
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.details-price-display-share {
    align-self: stretch;
    height: 22px;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

/* Additional utility classes */
.details-stretch {
    align-self: stretch;
}

.details-flex-center {
    justify-content: center;
    align-items: center;
    display: flex;
}

.details-inline-flex {
    display: inline-flex;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   Only affects screens smaller than 1024px
   Desktop layout remains unchanged
   ============================================ */

@media screen and (max-width: 1023px) {
    /* Main Container - Reduce padding on mobile */
    .details-Frame12 {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 16px;
        gap: 16px;
    }

    /* Content Layout - Stack left and right sections vertically on mobile */
    .details-Content {
        flex-direction: column;
        gap: 24px;
    }

    /* Left Section - Full width on mobile */
    .details-Left {
        width: 100%;
        order: 2; /* Show after right content on mobile */
    }

    /* Right Section - Full width on mobile */
    .details-Right {
        width: 100%;
        order: 1; /* Show first on mobile */
    }

    /* Breadcrumb - Adjust for mobile */
    .details-Breadcrumb {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Typography - Reduce font sizes on mobile */
    .details-text-darkest-24 {
        font-size: 20px;
    }

    .details-text-darkest-20 {
        font-size: 18px;
    }

    .details-text-dark-20 {
        font-size: 18px;
    }

    .details-text-dark-18 {
        font-size: 16px;
    }

    .details-text-primary-20 {
        font-size: 18px;
    }

    /* Large Photo - Adjust height on mobile */
    .details-Photo-large {
        height: 250px;
        min-height: 250px;
        border-radius: 16px;
    }

    /* VR Section - Full width on mobile */
    .details-Vr {
        width: 100%;
        height: 180px;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Title Section - Keep title on its own row, badges in a row below, left-aligned */
    .details-Title {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }

    .details-Title > div:first-child {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    /* Keep badges in a row on mobile, left-aligned */
    .details-Title .details-Badge {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    /* RTL support - align to right for Arabic */
    [dir="rtl"] .details-Title {
        justify-content: flex-end !important;
    }

    /* Amenities - Wrap on mobile */
    .details-Amenities {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Badge adjustments for mobile */
    .details-Badge {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .details-Badge-large {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Success Partners Text - Reduce font size on mobile */
    div[data-layer="SuccessPartnersText"] {
        font-size: 13px !important;
    }

    /* Location - Right align on mobile - use multiple selectors for maximum specificity */
    .details-Location,
    .Location,
    div[data-layer="Location"],
    .details-Info .Location,
    .details-Info div[data-layer="Location"] {
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        align-self: stretch !important;
        width: 100% !important;
        display: inline-flex !important;
    }

    /* Override inline styles - target with class and data attribute */
    .Location[style*="justify-content"],
    div[data-layer="Location"][style*="justify-content"],
    div.Location[style],
    div[data-layer="Location"][style] {
        justify-content: flex-end !important;
    }

    /* RTL support - for Arabic, align to left (which is right in RTL) */
    [dir="rtl"] .details-Location,
    [dir="rtl"] .Location,
    [dir="rtl"] div[data-layer="Location"],
    [dir="rtl"] .details-Info .Location,
    [dir="rtl"] .details-Info div[data-layer="Location"] {
        justify-content: flex-start !important;
    }

    [dir="rtl"] .Location[style*="justify-content"],
    [dir="rtl"] div[data-layer="Location"][style*="justify-content"] {
        justify-content: flex-start !important;
    }

    /* Make sure the inner text div doesn't expand and aligns properly */
    .Location > div:last-child,
    div[data-layer="Location"] > div:last-child {
        flex: 0 1 auto !important;
        text-align: right !important;
    }

    [dir="rtl"] .Location > div:last-child,
    [dir="rtl"] div[data-layer="Location"] > div:last-child {
        text-align: left !important;
    }

    .details-Location-text {
        font-size: 18px;
    }

    /* Price Display - Adjust font size */
    .details-price-display span {
        font-size: 24px !important;
    }

    /* Broker Section - Adjustments */
    .details-Broker {
        gap: 16px;
    }

    .details-Frame15 {
        gap: 12px;
    }

    .details-Profile {
        align-items: flex-start;
        gap: 12px;
    }

    .details-Profile-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
    }

    /* Contact buttons - Stack or wrap on mobile */
    .details-Contact {
        flex-wrap: wrap;
        gap: 8px;
    }

    .details-Mail,
    .details-Call,
    .details-Whatsapp {
        min-width: calc(50% - 4px);
        flex: 0 0 calc(50% - 4px);
    }

    /* Payment Options - Stack on mobile */
    .details-PaymentOptions {
        gap: 16px;
    }

    .details-Options {
        flex-direction: column;
        gap: 12px;
    }

    .details-Field,
    .details-Field-white {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Share Section - Stack on mobile */
    .details-Share {
        flex-direction: column;
        gap: 16px;
    }

    .details-Amount {
        width: 100%;
    }

    .details-Pie {
        width: 100px;
        height: 100px;
    }

    .details-pie-text-40 {
        font-size: 28px;
        left: 50%;
        transform: translateX(-50%);
        top: 35px;
    }

    .details-pie-text-complete {
        left: 50%;
        transform: translateX(-50%);
        top: 65px;
        font-size: 14px;
    }

    /* Partners List - Adjustments */
    .details-PartnersList {
        height: auto;
        min-height: 200px;
    }

    .details-Partner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .details-Info {
        width: 100%;
    }

    .details-Name {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .details-Badges {
        flex-wrap: wrap;
    }

    /* Button - Full width on mobile */
    .details-Button,
    .details-Button-fixed {
        width: 100%;
    }

    /* Info Section - Adjustments */
    .details-Info-section {
        gap: 16px;
    }

    /* Services Section - Adjustments */
    .details-Services {
        gap: 16px;
    }

    /* Details Rows - Keep in single line on mobile */
    .details-Row,
    .details-Row-alt,
    .Row {
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px !important;
        gap: 16px !important;
        display: inline-flex !important;
    }

    .details-Row-label,
    .details-Row-value {
        flex: 0 1 auto !important;
        font-size: 16px;
        white-space: nowrap !important;
    }

    /* Value (first child in row-reverse) - left-aligned */
    /* Override inline styles with maximum specificity */
    .Row > div:first-child,
    .details-Row > div:first-child,
    .details-Row-alt > div:first-child,
    .Row > div:first-child[style],
    .details-Row > div:first-child[style],
    .details-Row-alt > div:first-child[style],
    .Row > div:first-child[style*="text-align"],
    .details-Row > div:first-child[style*="text-align"],
    .details-Row-alt > div:first-child[style*="text-align"] {
        text-align: left !important;
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Label/Key (second child in row-reverse) - right-aligned */
    .Row > div:last-child,
    .details-Row > div:last-child,
    .details-Row-alt > div:last-child,
    .Row > div:last-child[style],
    .details-Row > div:last-child[style],
    .details-Row-alt > div:last-child[style] {
        text-align: right !important;
        flex: 0 1 auto !important;
    }

    /* RTL adjustments - in RTL, values should be left-aligned (text-align: left) */
    [dir="rtl"] .Row > div:first-child,
    [dir="rtl"] .details-Row > div:first-child,
    [dir="rtl"] .details-Row-alt > div:first-child,
    [dir="rtl"] .Row > div:first-child[style],
    [dir="rtl"] .details-Row > div:first-child[style],
    [dir="rtl"] .details-Row-alt > div:first-child[style],
    [dir="rtl"] .Row > div:first-child[style*="text-align"],
    [dir="rtl"] .details-Row > div:first-child[style*="text-align"],
    [dir="rtl"] .details-Row-alt > div:first-child[style*="text-align"] {
        text-align: left !important;
    }

    [dir="rtl"] .Row > div:last-child,
    [dir="rtl"] .details-Row > div:last-child,
    [dir="rtl"] .details-Row-alt > div:last-child,
    [dir="rtl"] .Row > div:last-child[style],
    [dir="rtl"] .details-Row > div:last-child[style],
    [dir="rtl"] .details-Row-alt > div:last-child[style] {
        text-align: right !important;
    }

    /* Price Analysis - Adjustments */
    .details-PriceAnalysis,
    .PriceAnalysis {
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .details-Frame2147227151,
    .Frame2147227151,
    .price-slider-wrapper {
        height: auto !important;
        min-height: 60px !important;
        padding-bottom: 10px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* Slider track - full width */
    .details-Rectangle14,
    .Rectangle14 {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
    }

    /* Slider bar - already using percentage, scales automatically */
    .details-Rectangle15,
    .Rectangle15 {
        height: 4px !important;
    }

    /* Scale down dot on mobile */
    .details-Ellipse6,
    .Ellipse6 {
        transform: scale(0.6) translateX(-50%) !important;
        transform-origin: center center !important;
    }

    /* Price labels - responsive sizing and positioning */
    .details-price-label-left,
    .details-price-label-center,
    .details-price-label-right,
    .price-label,
    div[data-layer="MinPrice"],
    div[data-layer="MaxPrice"],
    div[data-layer="CurrentPrice"] {
        font-size: 13px !important;
        white-space: nowrap !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        top: 24px !important;
        position: absolute !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }

    .price-label span,
    div[data-layer="MinPrice"] span,
    div[data-layer="MaxPrice"] span,
    div[data-layer="CurrentPrice"] span {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
    }

    /* Max price - left side */
    .price-label-max,
    div[data-layer="MaxPrice"] {
        /* Use percentage from HTML, don't override */
        right: auto !important;
        text-align: left !important;
        transform: translateX(0) !important;
    }

    /* Min price - right side */
    .price-label-min,
    div[data-layer="MinPrice"] {
        /* Use percentage from HTML, but ensure it doesn't overflow */
        right: auto !important;
        text-align: right !important;
        transform: translateX(0) !important;
    }
    
    /* On mobile, always use right positioning for min price to prevent overflow */
    @media screen and (max-width: 1023px) {
        .price-slider-wrapper div[data-layer="MinPrice"],
        .Frame2147227151 div[data-layer="MinPrice"],
        .details-Frame2147227151 div[data-layer="MinPrice"],
        .price-slider-wrapper .price-label-min,
        .Frame2147227151 .price-label-min,
        .details-Frame2147227151 .price-label-min {
            /* Force right positioning on mobile to prevent overflow */
            left: auto !important;
            right: 8px !important;
            transform: translateX(0) !important;
        }
    }
    
    /* On mobile screens, ensure min price doesn't overflow */
    @media screen and (max-width: 768px) {
        /* Force min price to use right positioning instead of left percentage */
        .price-slider-wrapper .price-label-min,
        .price-slider-wrapper div[data-layer="MinPrice"],
        .Frame2147227151 .price-label-min,
        .Frame2147227151 div[data-layer="MinPrice"],
        .details-Frame2147227151 .price-label-min,
        .details-Frame2147227151 div[data-layer="MinPrice"] {
            /* Override inline left positioning to use right instead for better control */
            left: auto !important;
            right: 8px !important;
            transform: translateX(0) !important;
        }
        
        /* Ensure max price also has padding and doesn't overflow */
        .price-slider-wrapper .price-label-max,
        .price-slider-wrapper div[data-layer="MaxPrice"],
        .Frame2147227151 .price-label-max,
        .Frame2147227151 div[data-layer="MaxPrice"],
        .details-Frame2147227151 .price-label-max,
        .details-Frame2147227151 div[data-layer="MaxPrice"] {
            left: 8px !important;
        }
        
        /* Reduce label width on smaller screens to prevent overflow */
        .price-slider-wrapper .price-label,
        .price-slider-wrapper div[data-layer="MinPrice"],
        .price-slider-wrapper div[data-layer="MaxPrice"],
        .price-slider-wrapper div[data-layer="CurrentPrice"],
        .Frame2147227151 .price-label,
        .Frame2147227151 div[data-layer="MinPrice"],
        .Frame2147227151 div[data-layer="MaxPrice"],
        .Frame2147227151 div[data-layer="CurrentPrice"],
        .details-Frame2147227151 .price-label,
        .details-Frame2147227151 div[data-layer="MinPrice"],
        .details-Frame2147227151 div[data-layer="MaxPrice"],
        .details-Frame2147227151 div[data-layer="CurrentPrice"] {
            width: 85px !important;
            min-width: 85px !important;
            max-width: 85px !important;
        }
    }

    /* Current price - centered at dot */
    .price-label-current,
    div[data-layer="CurrentPrice"] {
        text-align: center !important;
        transform: translateX(-50%) !important;
    }
    
    /* Ensure current price doesn't overlap - constrain its left position */
    .price-label-current[style*="left: 0%"],
    div[data-layer="CurrentPrice"][style*="left: 0%"] {
        left: 130px !important;
    }
    
    .price-slider-wrapper {
        /* Ensure container is wide enough for all labels */
        min-width: 360px !important;
    }

    /* Frame 14 - Stack services on mobile */
    .details-Frame14 {
        flex-direction: column;
        gap: 12px;
    }

    .details-Service {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Map - Adjust height on mobile */
    .details-Map {
        height: 200px;
    }

    .map-container {
        min-height: 200px;
    }

    /* Calculator - Adjustments */
    .details-Calculator {
        gap: 16px;
    }

    .details-Form {
        padding: 16px;
        gap: 16px;
    }

    .details-Switchers {
        flex-direction: column;
        gap: 8px;
    }

    .details-switcher-item,
    .details-switcher-item-active,
    .details-switcher-item-outline {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .details-Question {
        gap: 16px;
    }

    .details-TextField,
    .details-TextField-75 {
        height: auto;
        min-height: 75px;
    }

    .details-Label {
        font-size: 14px;
    }

    .details-Loan {
        padding: 16px;
        gap: 16px;
    }

    .details-Frame17,
    .details-Frame16 {
        width: 100%;
        flex: 1 1 100%;
        padding: 12px;
    }

    .details-Frame17 span,
    .details-Frame16 span {
        font-size: 24px !important;
    }

    /* Share Value Section - Adjustments */
    .details-Password {
        gap: 8px;
    }

    .details-Field-stretch {
        padding: 12px;
    }
}

/* Extra small mobile devices (phones in portrait) */
@media screen and (max-width: 480px) {
    .details-Frame12 {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 12px;
        gap: 12px;
    }

    /* Title badges - keep in row but allow smaller padding if needed */
    .details-Title .details-Badge {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: 14px !important;
    }

    .details-Title .details-Badge div {
        font-size: 14px !important;
    }

    /* Further reduce font sizes on very small screens */
    .details-text-darkest-24 {
        font-size: 18px;
    }

    .details-text-darkest-20 {
        font-size: 16px;
    }

    .details-text-dark-20 {
        font-size: 16px;
    }

    .details-Photo-large {
        height: 200px;
        min-height: 200px;
    }

    .details-Vr {
        height: 150px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .details-price-display span {
        font-size: 20px !important;
    }

    .details-Contact {
        flex-direction: column;
    }

    .details-Mail,
    .details-Call,
    .details-Whatsapp {
        width: 100%;
        flex: 1 1 100%;
    }

    .details-Pie {
        width: 80px;
        height: 80px;
    }

    .details-pie-text-40 {
        font-size: 24px;
        top: 28px;
    }

    .details-pie-text-complete {
        font-size: 12px;
        top: 52px;
    }

    .details-Frame17 span,
    .details-Frame16 span {
        font-size: 20px !important;
    }

    .details-Row,
    .details-Row-alt {
        padding: 12px;
    }

    .details-Row-label,
    .details-Row-value {
        font-size: 14px;
    }

    .details-Badge-partner {
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* Tablet adjustments (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .details-Frame12 {
        padding-left: 32px;
        padding-right: 32px;
    }

    .details-Content {
        flex-direction: row;
        gap: 24px;
    }

    .details-Left {
        width: 300px;
        flex-shrink: 0;
        order: 1;
    }

    .details-Right {
        flex: 1;
        order: 2;
    }

    .details-Photo-large {
        height: 350px;
        min-height: 350px;
    }
}

/* Additional responsive fixes for inline styles and special cases */
@media screen and (max-width: 1023px) {
    /* Title section - ensure badges stay in a row, left-aligned */
    .details-Title {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .details-Title > div:first-child {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* RTL support - align to right for Arabic */
    [dir="rtl"] .details-Title {
        justify-content: flex-end !important;
    }

    /* Location section - right align - use very specific selectors */
    .details-Info .Location,
    .details-Info div[data-layer="Location"],
    .Location,
    .details-Location,
    div[data-layer="Location"] {
        justify-content: flex-end !important;
        align-items: center !important;
        align-self: stretch !important;
    }

    /* RTL support for location */
    [dir="rtl"] .details-Info .Location,
    [dir="rtl"] .details-Info div[data-layer="Location"],
    [dir="rtl"] .Location,
    [dir="rtl"] .details-Location,
    [dir="rtl"] div[data-layer="Location"] {
        justify-content: flex-start !important;
    }

    /* Prevent inner div from expanding */
    .Location > div:last-child,
    div[data-layer="Location"] > div:last-child {
        flex: 0 1 auto !important;
        max-width: 100%;
    }

    /* Override fixed widths in inline styles */
    .details-Button-fixed {
        width: 100% !important;
        max-width: 100%;
    }

    /* Price analysis slider - make responsive */
    .Frame2147227151 {
        width: 100% !important;
        max-width: 100%;
    }

    .Rectangle14,
    .Rectangle15 {
        width: 100% !important;
        max-width: 100%;
    }

    /* Badge absolute positioning adjustments */
    .details-Badge-absolute {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin-top: 8px;
    }

    .details-Badge-success {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin-top: 8px;
    }

    /* Profile card responsive adjustments */
    .Profile-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .Profile-card .QRCode {
        width: 60px !important;
        height: 60px !important;
        align-self: center;
    }

    /* Contact section - ensure proper wrapping */
    .Contact {
        flex-wrap: wrap !important;
    }

    /* Services frame - ensure proper wrapping */
    .Frame14 {
        flex-wrap: wrap !important;
    }

    .Service {
        min-width: calc(50% - 8px) !important;
        flex: 1 1 calc(50% - 8px) !important;
    }

    /* Details rows - keep in single line */
    .Row,
    .details-Row,
    .details-Row-alt {
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: space-between !important;
        display: inline-flex !important;
    }

    /* Value (first child) - left-aligned - override inline styles */
    .Row > div:first-child,
    .details-Row > div:first-child,
    .details-Row-alt > div:first-child,
    .Row > div:first-child[style],
    .details-Row > div:first-child[style],
    .details-Row-alt > div:first-child[style] {
        text-align: left !important;
    }

    /* Key/Label (last child) - right-aligned - override inline styles */
    .Row > div:last-child,
    .details-Row > div:last-child,
    .details-Row-alt > div:last-child,
    .Row > div:last-child[style],
    .details-Row > div:last-child[style],
    .details-Row-alt > div:last-child[style] {
        text-align: right !important;
    }

    /* RTL support - maintain visual alignment */
    [dir="rtl"] .Row > div:first-child,
    [dir="rtl"] .details-Row > div:first-child,
    [dir="rtl"] .details-Row-alt > div:first-child,
    [dir="rtl"] .Row > div:first-child[style],
    [dir="rtl"] .details-Row > div:first-child[style],
    [dir="rtl"] .details-Row-alt > div:first-child[style] {
        text-align: left !important;
    }

    [dir="rtl"] .Row > div:last-child,
    [dir="rtl"] .details-Row > div:last-child,
    [dir="rtl"] .details-Row-alt > div:last-child,
    [dir="rtl"] .Row > div:last-child[style],
    [dir="rtl"] .details-Row > div:last-child[style],
    [dir="rtl"] .details-Row-alt > div:last-child[style] {
        text-align: right !important;
    }

    /* Ensure values and labels stay on same line */
    .Row > div,
    .details-Row > div,
    .details-Row-alt > div {
        flex: 0 1 auto !important;
        white-space: nowrap !important;
    }

    /* Calculator form adjustments */
    .Form {
        padding: 16px !important;
    }

    .Switchers {
        flex-direction: column !important;
    }

    .nationality-btn,
    .property-own-btn {
        width: 100% !important;
    }

    /* Options section - stack on mobile */
    .Options {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Text field adjustments */
    .TextField {
        height: auto !important;
        min-height: 75px;
    }

    /* Loan details - stack on mobile */
    .Loan .Details {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .Frame17,
    .Frame16 {
        width: 100% !important;
    }

    /* Share section - ensure proper stacking */
    .Share {
        flex-direction: column !important;
    }

    /* Partners list - ensure proper layout */
    .PartnersList {
        height: auto !important;
    }

    /* Map container */
    .map-container {
        min-height: 200px !important;
    }

    /* Location section - force right alignment with maximum specificity */
    div[data-layer="Location"].Location,
    .details-Info > div[data-layer="Location"],
    .details-Info .Location {
        justify-content: flex-end !important;
    }

    [dir="rtl"] div[data-layer="Location"].Location,
    [dir="rtl"] .details-Info > div[data-layer="Location"],
    [dir="rtl"] .details-Info .Location {
        justify-content: flex-start !important;
    }
}

@media screen and (max-width: 480px) {
    /* Further adjustments for very small screens */
    .Service {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .details-Contact {
        flex-direction: column !important;
    }

    .details-Mail,
    .details-Call,
    .details-Whatsapp {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .Profile-card .QRCode {
        width: 50px !important;
        height: 50px !important;
    }

    /* Ensure text doesn't overflow on small screens */
    .details-text-darkest,
    .details-text-default,
    .details-text-dark,
    .details-text-primary {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Breadcrumb text adjustments */
    .details-Breadcrumb .details-text-default,
    .details-Breadcrumb .details-text-darkest {
        font-size: 14px;
    }
}

/* Landscape orientation adjustments for mobile */
@media screen and (max-width: 1023px) and (orientation: landscape) {
    .details-Photo-large {
        height: 200px;
        min-height: 200px;
    }

    .details-Vr {
        height: 120px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* Desktop styles - maintain 744px max-width for larger screens */
@media screen and (min-width: 1024px) {
    .details-Frame2147227151,
    .Frame2147227151,
    .price-slider-wrapper {
        max-width: 744px !important;
    }

    .details-Ellipse6,
    .Ellipse6 {
        transform: scale(1) translateX(-50%) !important;
    }

    .price-label span,
    div[data-layer="MinPrice"] span,
    div[data-layer="MaxPrice"] span,
    div[data-layer="CurrentPrice"] span {
        font-size: 16px !important;
    }

    .price-label,
    div[data-layer="MinPrice"],
    div[data-layer="MaxPrice"],
    div[data-layer="CurrentPrice"] {
        font-size: 16px !important;
        max-width: none !important;
    }
}