/* ==========================================================================
   Base & reset
   ========================================================================== */
   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   :root {
       --color-bg: #fff;
       --color-text: #1a1a1a;
       --color-text-muted: #6b7280;
       --color-text-muted-light: #777;
       --color-border: #e5e7eb;
       --color-border-input: #ddd;
       --color-primary: #14535B;
       --color-primary-hover: #14535B;
       --color-accent: #E73A33;
       --color-accent-hover: #d32f28;
       --color-heart: #dc2626;
       --color-shadow: rgba(0, 0, 0, 0.06);
       --radius: 8px;
       --radius-lg: 12px;
       --radius-input: 6px;
       --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       --pagination-color: #14535B;
        --pagination-bg: #ffffff;
        --pagination-border: #e5e7eb;
        --pagination-text: #374151;
   }

/* Dark theme */
.theme-stay {
    --primary-color: #14535B;
    --color-primary: #14535B;
    /* --secondary-color: #222222;
    --text-color: #ffffff; */
}

/* Light theme */
.theme-life {
    --primary-color: #98b290;
    --color-primary: #98b290;
    /* --secondary-color: #f5f5f5;
    --text-color: #000000; */
}
   
   html {
       font-size: 16px;
       -webkit-text-size-adjust: 100%;
   }
   
   body {
       margin: 0;
       font-family: var(--font-sans);
       color: var(--color-text);
       background: var(--color-bg);
       line-height: 1.5;
   }
   
   img {
       max-width: 100%;
       height: auto;
       display: block;
   }
   
   button {
       font-family: inherit;
       cursor: pointer;
   }
   
   a {
       color: inherit;
       text-decoration: none;
   }
   
   ul {
       margin: 0;
       padding: 0;
       list-style: none;
   }
   
   /* ==========================================================================
      Page wrapper & account layout (mobile-first)
      ========================================================================== */
   .page-wrapper {
       min-height: 100vh;
       padding: 0.75rem 1rem;
   }
   
   .account-page {
       max-width: 1280px;
       margin-inline: auto;
   }
   
   /* ==========================================================================
      Account header & title
      ========================================================================== */
   .account-header {
       margin-block-end: 0;
   }
   
   .account-title {
       margin: 0 0 1rem;
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--color-text);
   }
   
   /* ==========================================================================
      Tabs – centered, strong active state
      ========================================================================== */
   .account-tabs {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 0 0.5rem;
       border-block-end: 1px solid var(--color-border);
       padding-block-end: 0;
   }
   
   .account-tab {
       padding: 0.625rem 0.75rem;
       font-size: 0.875rem;
       font-weight: 500;
       color: var(--color-text-muted-light);
       background: none;
       border: none;
       border-block-end: 4px solid transparent;
       margin-block-end: -1px;
       transition: color 0.2s, border-color 0.2s, font-weight 0.2s;
   }
   
   .account-tab:hover {
       color: var(--color-text);
   }
   
   .account-tab.is-active {
       color: var(--color-primary);
       font-weight: 600;
       border-block-end-color: var(--color-primary);
   }
   
   /* ==========================================================================
      Panels
      ========================================================================== */
   .account-panel {
       display: none;
       padding-block-start: 1.25rem;
   }
   
   .account-panel.is-active {
       display: block;
   }
   
   /* ==========================================================================
      Personal information – form layout to match design
      ========================================================================== */
   .personal-info {
       padding-block-start: 1.5rem;
   }
   
   .personal-info-form {
       display: flex;
       flex-direction: column;
       gap: 1.75rem;
       max-width: 28rem;
   }
   
   .personal-info-section {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   .personal-info-heading {
       margin: 0 0 0.25rem;
       font-size: 1rem;
       font-weight: 600;
       color: var(--color-text);
   }
   
   .form-group {
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
   }
   
   .form-label {
       font-size: 0.875rem;
       font-weight: 400;
       color: var(--color-text);
   }
   
   .form-input {
       padding: 0.5rem 0.75rem;
       font-size: 1rem;
       border: 1px solid var(--color-border-input);
       border-radius: var(--radius-input);
       color: var(--color-text);
       background: var(--color-bg);
   }
   
   .form-input:focus {
       outline: none;
       border-color: var(--color-primary);
       box-shadow: 0 0 0 2px rgba(75, 40, 131, 0.15);
   }
   
   .form-input-error {
       border-color: var(--color-accent);
   }
   .form-input-error:focus {
       box-shadow: 0 0 0 2px rgba(231, 58, 51, 0.2);
   }
   
   .form-input-readonly {
       background: #f5f5f5;
       color: var(--color-text-muted-light);
   }
   
   .personal-info-actions {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 1rem;
       margin-block-start: 0.25rem;
   }
   
   .btn-save {
       padding: 0.625rem 2rem;
       font-size: 0.9375rem;
       font-weight: 500;
       color: #fff;
       background: var(--color-accent);
       border: none;
       border-radius: var(--radius-input);
       cursor: pointer;
       transition: background 0.2s;
   }
   
   .btn-save:hover {
       background: var(--color-accent-hover);
   }
   
   .link-logout {
       font-size: 0.9375rem;
       font-weight: 500;
       color: var(--color-primary);
       text-decoration: none;
       transition: color 0.2s;
   }
   
   .link-logout:hover {
       color: var(--color-primary-hover);
   }
   
   /* Buttons */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.625rem 1.25rem;
       font-size: 0.9375rem;
       font-weight: 500;
       border-radius: var(--radius);
       border: none;
       cursor: pointer;
       transition: background 0.2s, color 0.2s, border-color 0.2s;
   }
   
   .btn-primary {
       color: #fff;
       background: var(--color-primary);
       align-self: flex-start;
   }
   
   .btn-primary:hover {
       background: var(--color-primary-hover);
   }
   
   /* Save button (red) uses .btn-save; primary (purple) uses .btn-primary */
   
   .btn-outline {
       color: var(--color-text);
       background: transparent;
       border: 1px solid var(--color-border);
   }
   
   .btn-outline:hover {
       border-color: var(--color-text-muted);
       background: #f9fafb;
   }
   
   .btn-delete-all {
       color: var(--color-text);
   }
   
   .btn-delete-all:hover {
       color: var(--color-heart);
   }
   
   /* ==========================================================================
      Saved properties – property card (smaller image, actions on right)
      ========================================================================== */
   .saved-properties {
       display: flex;
       flex-direction: column;
       gap: 1.25rem;
   }
   
   .property-cards-list {
       display: flex;
       flex-direction: column;
       gap: 1.25rem;
   }
   
   .property-card {
       display: grid;
       grid-template-columns: 1fr;
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       box-shadow: 0 2px 8px var(--color-shadow);
       overflow: hidden;
   }
   
   .property-card-image-wrap {
       position: relative;
       display: flex;
       flex-direction: column;
       background: #f3f4f6;
       flex-shrink: 0;
   }
   
   .property-card-image {
       width: 100%;
       aspect-ratio: 4/3;
       object-fit: cover;
       max-height: 180px;
   }
   
   .property-badge {
       position: absolute;
       inset-block-start: 0.75rem;
       inset-inline-start: 0.75rem;
       padding: 0.25rem 0.5rem;
       font-size: 0.75rem;
       font-weight: 600;
       color: #fff;
       background: rgba(124, 58, 237, 0.9);
       border-radius: 4px;
   }
   
   .property-image-meta {
       position: absolute;
       inset-block-end: 0.5rem;
       inset-inline-start: 0.75rem;
       display: flex;
       align-items: center;
       gap: 0.25rem;
       color: #fff;
       font-size: 0.8125rem;
       text-shadow: 0 1px 2px rgba(0,0,0,0.5);
   }
   
   .property-photo-count {
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
   }
   
   .property-watermark {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1rem;
       font-weight: 600;
       color: rgba(255, 255, 255, 0.15);
       pointer-events: none;
   }
   
   .property-listed-time {
       margin: 0;
       padding: 0.5rem 0.75rem 0;
       font-size: 0.8125rem;
       color: var(--color-text-muted);
   }
   
   @media (min-width: 480px) {
       .property-card-image {
           max-height: 200px;
       }
   }
   
   @media (min-width: 768px) {
       .property-listed-time {
           padding: 0.5rem 1rem 0;
       }
   }
   
   .property-card-body {
       padding: 1rem;
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
   }
   
   .property-card-main {
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
   }
   
   .property-category {
       margin: 0;
       font-size: 0.875rem;
       color: var(--color-text-muted);
   }
   
   .property-agency {
       margin-inline-start: 0.25rem;
   }
   
   .property-price {
       margin: 0;
       font-size: 1.375rem;
       font-weight: 700;
       color: var(--color-text);
   }
   
   .property-title {
       margin: 0;
       font-size: 1rem;
       font-weight: 600;
       color: var(--color-text);
       line-height: 1.4;
   }
   
   .property-location {
       margin: 0;
       font-size: 0.875rem;
       color: var(--color-text-muted);
       display: flex;
       align-items: flex-start;
       gap: 0.375rem;
   }
   
   .icon-pin {
       flex-shrink: 0;
       margin-block-start: 0.125rem;
   }
   
   .property-features {
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
       margin: 0.25rem 0 0;
   }
   
   .property-features li {
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
       font-size: 0.875rem;
       color: var(--color-text-muted);
   }
   
   .property-features .icon {
       flex-shrink: 0;
   }
   
   .property-card-actions {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: flex-end;
       gap: 0.5rem;
       margin-block-start: 0.5rem;
       padding-block-start: 0.75rem;
       border-block-start: 1px solid var(--color-border);
   }
   
   .btn-action {
       padding: 0.5rem 0.875rem;
       font-size: 0.875rem;
       font-weight: 500;
       color: #fff;
       background: var(--color-primary);
       border: none;
       border-radius: var(--radius);
       display: inline-flex;
       align-items: center;
       gap: 0.375rem;
   }
   
   .btn-action:hover {
       background: var(--color-primary-hover);
   }
   
   .btn-icon {
       padding: 0.5rem;
       background: transparent;
       border: none;
       border-radius: var(--radius);
       color: var(--color-text-muted);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: color 0.2s, background 0.2s;
   }
   
   .btn-icon:hover {
       background: #f3f4f6;
       color: var(--color-text);
   }
   
   .btn-icon-saved {
       color: var(--color-heart);
   }
   
   .btn-icon-more {
       margin-inline-start: 0.25rem;
   }
   
   .dropdown-wrap {
       position: relative;
       display: inline-block;
   }
   
   .dropdown-menu {
       position: absolute;
       inset-block-start: 100%;
       inset-inline-end: 0;
       margin: 0.25rem 0 0;
       min-width: 10rem;
       padding: 0.25rem;
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--radius);
       box-shadow: 0 4px 12px var(--color-shadow);
       z-index: 10;
   }
   
   .dropdown-menu[hidden] {
       display: none;
   }
   
   .dropdown-item {
       display: block;
       width: 100%;
       padding: 0.5rem 0.75rem;
       font-size: 0.875rem;
       text-align: start;
       color: var(--color-text);
       background: none;
       border: none;
       border-radius: 4px;
   }
   
   .dropdown-item:hover {
       background: #f3f4f6;
   }
   
   /* Section actions & pagination */
   .section-actions {
       margin-block-start: 0.5rem;
   }
   
   .pagination {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.25rem;
       margin-block-start: 1.5rem;
   }
   
   .pagination-btn {
       min-width: 2.25rem;
       height: 2.25rem;
       padding: 0 0.5rem;
       font-size: 0.9375rem;
       color: var(--color-text-muted);
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--radius);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: background 0.2s, color 0.2s, border-color 0.2s;
   }
   
   .pagination-btn:hover:not(:disabled) {
       border-color: var(--color-primary);
       color: var(--color-primary);
   }
   
   .pagination-btn:disabled {
       opacity: 0.5;
       cursor: not-allowed;
   }
   
   .pagination-btn.is-current {
       background: var(--color-primary);
       border-color: var(--color-primary);
       color: #fff;
   }
   
   /* ==========================================================================
      Saved bookings
      ========================================================================== */
   .saved-bookings,
   .search-alerts,
   .contacted-properties {
       padding-block: 1rem;
   }
   
   .booking-cards-list {
       display: grid;
       gap: 1rem;
   }
   
   .booking-card {
       display: grid;
       grid-template-columns: 1fr;
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       box-shadow: 0 2px 8px var(--color-shadow);
       overflow: hidden;
   }
   
   .booking-card-image-wrap {
       position: relative;
       aspect-ratio: 16/10;
       background: #f3f4f6;
   }
   
   .booking-card-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .booking-status {
       position: absolute;
       inset-block-start: 0.75rem;
       inset-inline-end: 0.75rem;
       padding: 0.25rem 0.5rem;
       font-size: 0.75rem;
       font-weight: 600;
       color: #fff;
       background: var(--color-primary);
       border-radius: 4px;
   }
   
   .booking-card-body {
       padding: 1rem 1.25rem;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .booking-title {
       margin: 0;
       font-size: 1rem;
       font-weight: 600;
       color: var(--color-text);
   }
   
   .booking-location,
   .booking-dates,
   .booking-price {
       margin: 0;
       font-size: 0.875rem;
       color: var(--color-text-muted);
   }
   
   .booking-card-body .btn-primary {
       margin-block-start: 0.5rem;
   }
   
   .empty-state {
       margin: 0;
       padding: 2rem;
       text-align: center;
       color: var(--color-text-muted);
       font-size: 0.9375rem;
   }
   
   /* ==========================================================================
      Booking page – card (reusable)
      ========================================================================== */
   .card {
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       box-shadow: 0 2px 8px var(--color-shadow);
   }
   
   /* ==========================================================================
      Booking page – layout & sections
      ========================================================================== */
   .booking-page {
       max-width: 1280px;
       margin-inline: auto;
   }
   
   .booking-banner {
       padding: 0.75rem 1rem;
       margin-block-end: 1rem;
       background: var(--color-primary);
       color: #fff;
       border-radius: var(--radius);
   }
   
   .booking-banner-text {
       margin: 0;
       font-size: 0.875rem;
       text-align: center;
   }
   
   .booking-banner a {
       color: #fff;
       text-decoration: underline;
       font-weight: 500;
   }
   
   .booking-banner a:hover {
       opacity: 0.9;
   }
   
   .booking-layout {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
   }
   
   .booking-form-section {
       order: 2;
   }
   
   .booking-summary-section {
       order: 1;
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   .booking-form-heading {
       margin: 0 0 1rem;
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--color-text);
   }
   
   .booking-form.card {
       padding: 1.25rem;
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }
   
   .booking-form .form-row {
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
   }
   
   .booking-form .form-row-full {
       width: 100%;
   }
   
   .booking-form .form-row-half .form-group {
       flex: 1 1 100%;
       min-width: 0;
   }
   
   .booking-form .form-group {
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
       flex: 1 1 100%;
       min-width: 0;
   }
   
   .form-textarea {
       resize: vertical;
       min-height: 4rem;
   }
   
   .booking-terms {
       margin: 0;
       font-size: 0.8125rem;
       color: var(--color-text-muted);
   }
   
   .booking-terms a {
       color: var(--color-primary);
       text-decoration: underline;
   }
   
   .booking-terms a:hover {
       color: var(--color-primary-hover);
   }
   
   .booking-form-actions {
       margin-block-start: 0.25rem;
       text-align: end;
   }
   
   .btn-booking-next {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       font-size: 1rem;
   }
   
   .btn-booking-next .icon-arrow {
       margin-inline-start: 0.25rem;
   }
   
   [dir="rtl"] .btn-booking-next .icon-arrow {
       transform: scaleX(-1);
   }
   
   .booking-info-cards {
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
       margin-block-start: 1rem;
   }
   
   .booking-info-card {
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
       padding: 0.75rem 1rem;
       border-radius: var(--radius);
       font-size: 0.875rem;
       margin: 0;
   }
   
   .booking-info-card-high-demand {
       background: #ecfdf5;
       color: #065f46;
   }
   
   .booking-info-card-supply {
       background: #f3f4f6;
       color: var(--color-text-muted);
   }
   
   .booking-info-icon {
       color: #eab308;
       flex-shrink: 0;
   }
   
   .booking-summary-card.card,
   .booking-price-card.card,
   .booking-payment-card.card,
   .booking-promo-card.card {
       padding: 1.25rem;
   }
   
   .booking-summary-heading,
   .booking-price-heading,
   .booking-payment-heading,
   .booking-promo-heading {
       margin: 0 0 1rem;
       font-size: 1rem;
       font-weight: 700;
       color: var(--color-text);
   }
   
   .booking-summary-unit {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .booking-summary-image-wrap {
       border-radius: var(--radius);
       overflow: hidden;
       background: #f3f4f6;
       aspect-ratio: 16/10;
       margin-block-end: 0.5rem;
   }
   
   .booking-summary-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   
   .booking-summary-title {
       margin: 0;
       font-size: 1rem;
       font-weight: 700;
       color: var(--color-text);
       line-height: 1.35;
   }
   
   .booking-summary-location {
       margin: 0;
       font-size: 0.875rem;
       color: var(--color-text-muted);
   }
   
   .booking-summary-rating {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 0.375rem 0.5rem;
   }
   
   .booking-rating-stars {
       color: #eab308;
       font-size: 0.875rem;
   }
   
   .booking-rating-badge {
       padding: 0.125rem 0.5rem;
       font-size: 0.8125rem;
       font-weight: 600;
       background: rgba(75, 40, 131, 0.12);
       color: var(--color-primary);
       border-radius: 999px;
   }
   
   .booking-reviews-link {
       font-size: 0.875rem;
       color: var(--color-primary);
   }
   
   .booking-reviews-link:hover {
       text-decoration: underline;
   }
   
   .booking-summary-dates {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       padding-block: 0.75rem 0;
       border-block-start: 1px solid var(--color-border);
   }
   
   .booking-date-row {
       display: flex;
       flex-direction: column;
       gap: 0.125rem;
   }
   
   .booking-date-label {
       font-size: 0.75rem;
       color: var(--color-text-muted);
   }
   
   .booking-date-value {
       font-size: 0.9375rem;
       font-weight: 700;
       color: var(--color-text);
   }
   
   .booking-date-time {
       font-size: 0.8125rem;
       color: var(--color-text-muted);
   }
   
   .booking-nights {
       margin: 0.5rem 0 0;
       font-size: 0.875rem;
       color: var(--color-text);
   }
   
   .booking-link-change {
       display: inline-block;
       margin-block-start: 0.25rem;
       font-size: 0.875rem;
       color: var(--color-primary);
   }
   
   .booking-link-change:hover {
       text-decoration: underline;
   }
   
   .booking-guests {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: baseline;
       gap: 0.25rem;
       margin-block-start: 0.75rem;
       padding-block-start: 0.75rem;
       border-block-start: 1px solid var(--color-border);
   }
   
   .booking-guests-selection,
   .booking-guests-count {
       margin: 0;
       font-size: 0.875rem;
       color: var(--color-text);
   }
   
   .booking-price-rows {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }
   
   .booking-price-row {
       display: flex;
       justify-content: space-between;
       font-size: 0.875rem;
       color: var(--color-text);
   }
   
   .booking-price-total {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-block-start: 1rem;
       padding-block-start: 1rem;
       border-block-start: 1px solid var(--color-border);
       background: rgba(75, 40, 131, 0.06);
       margin-inline: -1.25rem -1.25rem 0;
       padding-inline: 1.25rem;
       padding-block-end: 1rem;
       border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   }
   
   .booking-price-total-value {
       font-weight: 700;
       font-size: 1.125rem;
   }
   
   .booking-payment-row {
       display: flex;
       justify-content: space-between;
       font-size: 0.875rem;
       color: var(--color-text);
   }
   
   .booking-promo-form {
       display: flex;
       gap: 0.5rem;
       margin-block-start: 0.5rem;
   }
   
   .booking-promo-form .form-input {
       flex: 1;
       min-width: 0;
   }
   
   .btn-promo-apply {
       flex-shrink: 0;
   }
   
   /* ==========================================================================
      Featured Units (homepage section 4)
      ========================================================================== */
   .featured-units {
       padding-block: 2rem 2.5rem;
       padding-inline: 0;
   }
   
   .featured-units-inner {
       max-width: 1280px;
       margin-inline: auto;
       padding-inline: 1rem;
   }
   
   .featured-units-header {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       margin-block-end: 1.25rem;
   }
   
   .featured-units-title {
       margin: 0;
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--color-text);
   }
   
   .featured-units-subtitle {
       margin: 0;
       font-size: 0.875rem;
       color: var(--color-text-muted);
   }
   
   /* Slider nav (prev/next) in header – replaces More button */
   .featured-units-nav {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       margin-inline-start: auto;
       align-self: flex-start;
   }
   
   .featured-units-panel {
       display: none;
   }
   
   .featured-units-panel.is-active {
       display: block;
   }
   
   .featured-units-slider-wrap {
       position: relative;
   }
   
   .featured-units-arrow {
       flex-shrink: 0;
       width: 2.5rem;
       height: 2.5rem;
       padding: 0;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--radius);
       color: var(--color-text-muted);
       cursor: pointer;
       transition: background 0.2s, color 0.2s, border-color 0.2s;
   }
   
   .featured-units-arrow:hover:not(:disabled) {
       border-color: var(--color-primary);
       color: var(--color-primary);
       background: rgba(75, 40, 131, 0.06);
   }
   
   .featured-units-arrow:disabled {
       opacity: 0.4;
       cursor: not-allowed;
   }
   
   .featured-units-arrow:focus-visible {
       outline: none;
       box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
   }
   
   .featured-units-arrow .icon-arrow-prev,
   .featured-units-arrow .icon-arrow-next {
       width: 0.75rem;
       height: 0.75rem;
       border-inline-end: 2px solid currentColor;
       border-block-end: 2px solid currentColor;
   }
   
   .featured-units-arrow .icon-arrow-prev {
       transform: rotate(135deg);
       margin-inline-end: 2px;
   }
   
   .featured-units-arrow .icon-arrow-next {
       transform: rotate(-45deg);
       margin-inline-start: 2px;
   }
   
   .featured-units-track-wrap {
       min-width: 0;
       overflow: hidden;
   }
   
   .featured-units-track {
       display: flex;
       gap: 1rem;
       overflow-x: auto;
       overflow-y: hidden;
       scroll-behavior: smooth;
       scrollbar-width: none;
       -webkit-overflow-scrolling: touch;
       padding-block: 0.25rem;
       margin-inline: -0.25rem;
   }
   
   .featured-units-track::-webkit-scrollbar {
       display: none;
   }
   
   .featured-unit-card {
       flex: 0 0 85%;
       min-width: 0;
       background: var(--color-bg);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       box-shadow: 0 2px 8px var(--color-shadow);
       overflow: hidden;
       display: flex;
       flex-direction: column;
       margin-bottom: 20px;
   }
   
   .featured-unit-card-image-wrap {
       position: relative;
       aspect-ratio: 480/360;
       background: #f3f4f6;
   }
   
   .featured-unit-card-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   }
   
   .featured-unit-price {
       position: absolute;
       inset-block-end: 0.75rem;
       inset-inline-start: 0.75rem;
       padding: 0.25rem 0.5rem;
       font-size: 1rem;
       font-weight: 700;
       color: var(--color-text);
       background: rgba(255, 255, 255, 0.95);
       border-radius: var(--radius);
       line-height: 1.3;
   }
   
   .featured-unit-price-period {
       font-weight: 400;
       font-size: 0.8125rem;
       color: var(--color-text-muted);
   }
   
   .featured-unit-rating {
       position: absolute;
       inset-block-start: 0.75rem;
       inset-inline-start: 0.75rem;
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
       padding: 0.25rem 0.5rem;
       font-size: 0.8125rem;
       font-weight: 600;
       color: #fff;
       background: var(--color-primary);
       border-radius: var(--radius);
   }
   
   .featured-unit-rating .icon-star {
       width: 0.875rem;
       height: 0.875rem;
       fill: currentColor;
   }
   
   .featured-unit-wishlist {
       position: absolute;
       inset-block-start: 0.75rem;
       inset-inline-end: 0.75rem;
       width: 2.25rem;
       height: 2.25rem;
       padding: 0;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.9);
       border: none;
       border-radius: 50%;
       color: var(--color-text-muted);
       cursor: pointer;
       transition: color 0.2s, background 0.2s;
   }
   
   .featured-unit-wishlist:hover,
   .featured-unit-wishlist.is-active {
       color: var(--color-heart);
   }
   
   .featured-unit-wishlist .icon-heart {
       width: 1.125rem;
       height: 1.125rem;
       stroke: currentColor;
       fill: none;
       stroke-width: 2;
   }
   
   .featured-unit-wishlist.is-active .icon-heart {
       fill: currentColor;
   }
   
   .featured-unit-badge {
       position: absolute;
       inset-block-start: 0.75rem;
       inset-inline-start: 0.75rem;
       padding: 0.25rem 0.5rem;
       font-size: 0.6875rem;
       font-weight: 700;
       letter-spacing: 0.02em;
       border-radius: 4px;
       z-index: 1;
   }
   
   .featured-unit-badge-rated {
       background: #facc15;
       color: #1a1a1a;
   }
   
   .featured-unit-badge-seller {
       background: var(--color-primary);
       color: #fff;
   }
   
   .featured-unit-card-body {
       padding: 1rem;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       flex: 1;
   }
   
   .featured-unit-location {
       margin: 0;
       font-size: 0.8125rem;
       color: var(--color-text-muted);
   }
   
   .featured-unit-title {
       margin: 0;
       font-size: 1rem;
       font-weight: 700;
       line-height: 1.35;
   }
   
   .featured-unit-title a {
       color: var(--color-text);
   }
   
   .featured-unit-title a:hover {
       color: var(--color-primary);
   }
   
   .featured-unit-features {
       display: flex;
       flex-wrap: wrap;
       gap: 0.5rem 1rem;
       margin: 0;
   }
   
   .featured-unit-features li {
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
       font-size: 0.8125rem;
       color: var(--color-text-muted);
   }
   
   .featured-unit-features .icon {
       flex-shrink: 0;
       color: var(--color-text-muted);
   }
   
   .featured-unit-meta {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 0.375rem 0.5rem;
       margin-block-start: 0.25rem;
   }
   
   .featured-unit-rating-badge {
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
       padding: 0.25rem 0.5rem;
       font-size: 0.75rem;
       font-weight: 600;
       color: #fff;
       background: var(--color-primary);
       border-radius: var(--radius);
   }
   
   .featured-unit-rating-badge .icon-star {
       width: 0.75rem;
       height: 0.75rem;
   }
   
   .featured-unit-reviews {
       font-size: 0.8125rem;
       color: var(--color-text-muted);
   }
   
   .featured-unit-price-body {
       margin: 0.5rem 0 0;
       font-size: 1rem;
       font-weight: 700;
       color: var(--color-text);
   }
   
   .featured-unit-price-body .featured-unit-price-period {
       font-weight: 400;
       font-size: 0.875rem;
   }
   
   .featured-unit-btn {
       margin-block-start: 0.5rem;
       width: 100%;
       text-align: center;
   }
   
   .featured-units-dots {
       display: flex;
       justify-content: center;
       gap: 0.375rem;
       margin-block-start: 1rem;
   }
   
   .featured-units-dot {
       width: 0.5rem;
       height: 0.5rem;
       padding: 0;
       border: none;
       border-radius: 50%;
       background: var(--color-border);
       cursor: pointer;
       transition: background 0.2s;
   }
   
   .featured-units-dot.is-active {
       background: var(--color-primary);
   }
   
   /* Featured Units – icon shapes (star, heart, bed, bath, area) */
   .icon-star {
       display: inline-block;
       width: 1em;
       height: 1em;
       background: currentColor;
       clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
   }
   
   .icon-heart {
       display: inline-block;
       width: 1em;
       height: 1em;
       background: currentColor;
       clip-path: path("M8 2.5C4.5 2.5 2 5 2 8c0 4.5 6 8.5 6 8.5s6-4 6-8.5c0-3-2.5-5.5-6-5.5z");
   }
   
   .icon-bed,
   .icon-bath,
   .icon-area {
       display: inline-block;
       width: 1em;
       height: 1em;
       background: currentColor;
       opacity: 0.8;
   }
   
   .icon-bed {
       mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 12v7h4v-5h10v5h4v-7'/%3E%3Cpath d='M3 14h18'/%3E%3Crect x='7' y='8' width='10' height='4'/%3E%3C/svg%3E") no-repeat center;
       mask-size: contain;
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 12v7h4v-5h10v5h4v-7'/%3E%3Cpath d='M3 14h18'/%3E%3Crect x='7' y='8' width='10' height='4'/%3E%3C/svg%3E") no-repeat center;
       -webkit-mask-size: contain;
   }
   
   .icon-bath {
       mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 6a2 2 0 012-2h2a2 2 0 012 2v4h-2V8h-2v2H9V6zm-4 8v4h14v-4H5z'/%3E%3C/svg%3E") no-repeat center;
       mask-size: contain;
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 6a2 2 0 012-2h2a2 2 0 012 2v4h-2V8h-2v2H9V6zm-4 8v4h14v-4H5z'/%3E%3C/svg%3E") no-repeat center;
       -webkit-mask-size: contain;
   }
   
   .icon-area {
       mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3v18h18V3H3zm16 16H5V5h14v14z'/%3E%3C/svg%3E") no-repeat center;
       mask-size: contain;
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3v18h18V3H3zm16 16H5V5h14v14z'/%3E%3C/svg%3E") no-repeat center;
       -webkit-mask-size: contain;
   }
   
   /* ==========================================================================
      Icons
      ========================================================================== */
   .icon {
       flex-shrink: 0;
       vertical-align: middle;
   }
   
   /* ==========================================================================
      Responsive – 320px (Featured Units)
      ========================================================================== */
   @media (min-width: 320px) {
       .featured-unit-card {
           flex: 0 0 80%;
       }
   
       .featured-units-header {
           flex-direction: row;
           flex-wrap: wrap;
           align-items: flex-start;
           justify-content: space-between;
           gap: 0.5rem;
       }
   
       .featured-units-heading-block {
           min-width: 0;
       }
   
       .featured-units-nav {
           flex-shrink: 0;
       }
   }
   
   /* ==========================================================================
      Responsive – 480px
      ========================================================================== */
   @media (min-width: 480px) {
       .page-wrapper {
           padding: 1rem 1.25rem;
       }
   
       .featured-units-inner {
           padding-inline: 1.25rem;
       }
   
       .featured-units-header {
           gap: 0.75rem;
       }
   
       .featured-units-title {
           font-size: 1.75rem;
       }
   
       .featured-unit-card {
           flex: 0 0 70%;
       }
   
       .account-title {
           font-size: 1.75rem;
       }
   
       .account-tab {
           padding: 0.75rem 1rem;
           font-size: 0.9375rem;
       }
   
       .personal-info-form {
           gap: 2rem;
       }
   
       .property-card-actions {
           flex-wrap: nowrap;
       }
   
       .booking-form .form-row-half .form-group {
           flex: 1 1 calc(50% - 0.5rem);
       }
   }
   
   /* ==========================================================================
      Responsive – 768px
      ========================================================================== */
   @media (min-width: 768px) {
       .page-wrapper {
           padding: 1.5rem 2rem;
       }
   
       .account-header {
           margin-block-end: 0;
       }
   
       .account-title {
           font-size: 2rem;
       }
   
       .account-tabs {
           gap: 0 1rem;
       }
   
       .account-tab {
           padding: 0.875rem 1.25rem;
           font-size: 1rem;
       }
   
       .account-panel {
           padding-block-start: 1.5rem;
       }
   
       .personal-info {
           padding-block-start: 1.75rem;
       }
   
       .property-card {
           grid-template-columns: minmax(0, 220px) 1fr;
       }
   
       .property-card-image-wrap {
           aspect-ratio: auto;
           min-height: 0;
       }
   
       .property-card-image {
           width: 100%;
           height: 100%;
           min-height: 160px;
           max-height: 200px;
           aspect-ratio: 4/3;
           object-fit: cover;
       }
   
       .property-listed-time {
           padding-inline: 0.75rem;
           margin-block-start: 0.5rem;
       }
   
       .property-card-body {
           padding: 1rem 1.25rem;
           flex-direction: row;
           flex-wrap: wrap;
           align-items: flex-start;
           justify-content: space-between;
       }
   
       .property-card-main {
           flex: 1 1 60%;
           min-width: 200px;
       }
   
       .property-card-actions {
           flex: 0 0 auto;
           margin-block-start: 0;
           padding-block-start: 0;
           border-block-start: none;
           justify-content: flex-end;
       }
   
       .section-actions {
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           gap: 1rem;
       }
   
       .pagination {
           margin-block-start: 0;
           justify-content: flex-end;
       }
   
       .booking-layout {
           flex-direction: row;
           align-items: flex-start;
           gap: 2rem;
       }
   
       .booking-form-section {
           order: 1;
           flex: 1 1 58%;
           min-width: 0;
       }
   
       .booking-summary-section {
           order: 2;
           flex: 0 0 340px;
           position: sticky;
           inset-block-start: 1rem;
       }
   
       .featured-units {
           padding-block: 2.5rem 3rem;
       }
   
       .featured-units-inner {
           padding-inline: 2rem;
       }
   
       .featured-units-header {
           flex-direction: row;
           flex-wrap: wrap;
           align-items: flex-start;
           justify-content: space-between;
           margin-block-end: 1.5rem;
       }
   
       .featured-units-nav {
           margin-block-start: 0.125rem;
       }
   
       .featured-units-subtitle {
           width: 100%;
       }
   
       .featured-unit-card {
           flex: 0 0 calc(50% - 0.5rem);
           min-width: 280px;
       }
   }
   
   /* ==========================================================================
      Responsive – 1024px
      ========================================================================== */
   @media (min-width: 1024px) {
       .page-wrapper {
           padding: 2rem 2.5rem;
       }
   
       .account-tabs {
           flex-wrap: nowrap;
       }
   
       .property-card {
           grid-template-columns: minmax(0, 260px) 1fr;
       }
   
       .property-card-image {
           max-height: 220px;
       }
   
       .property-card-body {
           padding: 1.25rem 1.5rem;
       }
   
       .property-price {
           font-size: 1.375rem;
       }
   
       .property-title {
           font-size: 1.0625rem;
       }
   
       .booking-summary-section {
           flex: 0 0 380px;
       }
   
       .featured-units-inner {
           padding-inline: 2.5rem;
       }
   
       .featured-unit-card {
           flex: 0 0 calc(33.333% - 0.667rem);
           min-width: 260px;
       }
   }
   
   /* ==========================================================================
      Responsive – 1280px
      ========================================================================== */
   @media (min-width: 1280px) {
       .page-wrapper {
           padding: 2.5rem 3rem;
       }
   
       .account-page {
           padding-inline: 0;
       }
   
       .booking-form-section {
           flex: 1 1 60%;
       }
   
       .booking-summary-section {
           flex: 0 0 400px;
       }
   
       .account-title {
           font-size: 2.25rem;
       }
   
       .property-card {
           grid-template-columns: minmax(0, 280px) 1fr;
       }
   
       .property-card-image {
           max-height: 240px;
       }
   
       .featured-units {
           padding-block: 3rem 3.5rem;
       }
   
       .featured-units-inner {
           padding-inline: 3rem;
       }
   
       .featured-units-title {
           font-size: 2rem;
       }
   
       .featured-unit-card {
           flex: 0 0 calc(25% - 0.75rem);
           min-width: 240px;
       }
   }
   
   /* ==========================================================================
      RTL support – logical properties keep layout correct
      ========================================================================== */
   [dir="rtl"] .account-tab {
       border-block-end: 4px solid transparent;
   }
   
   [dir="rtl"] .property-badge,
   [dir="rtl"] .property-image-meta {
       inset-inline-start: 0.75rem;
       inset-inline-end: auto;
   }
   
   [dir="rtl"] .dropdown-menu {
       inset-inline-end: 0;
       inset-inline-start: auto;
   }
   
   [dir="rtl"] .dropdown-item {
       text-align: end;
   }
   
   [dir="rtl"] .btn-icon-more {
       margin-inline-start: 0;
       margin-inline-end: 0.25rem;
   }
   
   [dir="rtl"] .section-actions {
       text-align: end;
   }
   
   [dir="rtl"] .pagination {
       justify-content: center;
   }
   
   @media (min-width: 768px) {
       [dir="rtl"] .pagination {
           justify-content: flex-end;
       }
   }
   
   /* property-card-actions use justify-content: flex-end so they stay at end (right in LTR, left in RTL) */
   
   [dir="rtl"] .booking-form-actions {
       text-align: start;
   }
   
   /* Featured Units RTL */
   [dir="rtl"] .featured-units-arrow .icon-arrow-prev {
       transform: rotate(-45deg);
       margin-inline-start: 2px;
       margin-inline-end: 0;
   }
   
   [dir="rtl"] .featured-units-arrow .icon-arrow-next {
       transform: rotate(135deg);
       margin-inline-end: 2px;
       margin-inline-start: 0;
   }
   
   [dir="rtl"] .featured-units-nav {
       margin-inline-start: 0;
       margin-inline-end: auto;
   }
   
   /* ==========================================================================
   Home – booking/search card
   ========================================================================== */
.home-booking {
    padding-block: 1rem 2rem;
}

.home-booking-inner {
    max-width: 420px;
    margin-inline: auto;
}

.home-booking-card {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.home-booking-header {
    margin-block-end: 0.25rem;
}

.home-booking-price {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.home-booking-price-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.home-booking-price-currency {
    margin-inline-start: 0.125rem;
    font-size: 1rem;
}

.home-booking-price-period {
    margin-inline-start: 0.25rem;
    color: var(--color-text-muted);
}

.home-booking-fields {
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-input);
    overflow: hidden;
}

.home-booking-row {
    display: flex;
}

.home-booking-row + .home-booking-row {
    border-block-start: 1px solid var(--color-border-input);
}

.home-booking-row-dates {
    flex-wrap: nowrap;
}

.home-booking-field {
    flex: 1 1 0;
    padding: 0.625rem 0.75rem;
}

.home-booking-field-checkin {
    border-inline-end: 1px solid var(--color-border-input);
}

.home-booking-field-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: 0.125rem;
}

.home-booking-field-value {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text);
}

.home-booking-input-date {
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.home-booking-input-date:focus-visible {
    outline: none;
}

.home-booking-row-guests {
    align-items: stretch;
}

.home-booking-field-guests {
    position: relative;
}

.home-guests-toggle {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--color-text);
}

.home-guests-label {
    white-space: nowrap;
}

.home-guests-icon {
    width: 0.75rem;
    height: 0.75rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.home-guests-toggle[aria-expanded="true"] .home-guests-icon {
    transform: rotate(225deg);
}

.home-guests-panel {
    position: absolute;
    top: 0;
    /* inset-inline-start: 0;
    inset-block-start: 100%;
    margin-block-start: 0.375rem; */
    min-width: 220px;
    padding: 0.75rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px var(--color-shadow);
    z-index: 20;
}

.home-guests-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.home-guests-row-label {
    font-size: 0.875rem;
    color: var(--color-text);
}

.home-guests-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.home-guests-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-input);
    background: #fff;
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-guests-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.home-guests-count {
    min-width: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

.home-booking-note {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
}

.home-booking-note-date {
    font-weight: 600;
    color: var(--color-text);
}

.home-booking-btn-reserve {
    margin-block-start: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    border-radius: 999px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary));
    cursor: pointer;
}

.home-booking-btn-reserve:hover {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary));
}

.home-booking-footnote {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* Home booking – responsive tweaks */
@media (min-width: 480px) {
    .home-booking-inner {
        max-width: 460px;
    }

    .home-booking-card {
        padding: 1.5rem 1.5rem 1.75rem;
    }
}

@media (min-width: 768px) {
    .home-booking {
        padding-block: 2rem 2.5rem;
    }

    .home-booking-inner {
        margin-inline-start: 0;
    }
}

@media (min-width: 1024px) {
    .home-booking-inner {
        max-width: 480px;
    }
}

@media (min-width: 1280px) {
    .home-booking-inner {
        max-width: 500px;
    }
}

/* Home booking – RTL adjustments */
[dir="rtl"] .home-booking-field-checkin {
    border-inline-end: none;
    border-inline-start: 1px solid var(--color-border-input);
}

[dir="rtl"] .home-guests-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

[dir="rtl"] .home-guests-icon {
    transform: rotate(-135deg);
}

[dir="rtl"] .home-guests-toggle[aria-expanded="true"] .home-guests-icon {
    transform: rotate(45deg);
}