/* Bookify — High-Clarity Button Text - Button Text Outline or Border Color is Black in the main Villa Detail Page */

/* Bookify — High-Clarity Button Text - End of Button Text Outline or Border Color is Black */


/* Location Working Hours */

.par-sm-med {
    font-weight: 500;
    direction: ltr!Important;
}

/* End Of Location Working Hours */


/*============================================================================*/

/* Main Primary Text Color */

.text-primary {
    color: #FFE8B6 !Important;
}

/* End of Main Primary Text Color */

/* Hide Period Globally On Deails Page */

.service-dg.without-gallery .service-dg__info__it__dcl[data-v-3d6b8ce1] {
    display: flex;
    width: 100%;
    display: none !Important;
}

/* End of Hide Period Globally On Details Page */

/* Hide Duration from Booking Details in Know More Button*/


.text-graphite {
    color: var(--color-graphite);
    visibility: hidden;
}

.service-dg__info__dcl[data-v-3d6b8ce1] {
    flex: 1;
    display: none !Important;
}

/* End of Hide Duration from Booking Details */


/* Heading Text Effect in the Hero Section */

/* =======================================================
   Bookify Villas — Hero Title Animation (Dark Background)
   Mood: Coastal luxury, moonlight on water, elegant movement
   Target: .hero__title h1
   ======================================================= */

.hero__title h1 {
  position: relative;
  display: inline-block;
  font-weight: 800;
  color: #ffffff; /* Keep your white title */

  /* Gentle floating motion */
  animation: villaFloat 4.5s ease-in-out infinite;

  /* Pearl glow & subtle aqua reflection on dark background */
  text-shadow:
    0 0 10px rgba(255,255,255,0.35), /* soft white glow */
    0 0 18px rgba(95,211,199,0.28),  /* sea aqua shimmer */
    0 2px 6px rgba(0,0,0,0.4);       /* depth against dark bg */
}

@keyframes villaFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}


/* End of Heading Text in the Hero Section */


/*  Hero Section Button Styling */

/* ===================================================================
   BOOKIFY VILLAS — LINEAR ANIMATED BORDER (UNIVERSAL SUPPORT PACK)
   Includes:
   1) Modern masked animation (Chrome 70+, Safari 12+, iOS, Firefox)
   2) Older Android/Samsung fallback animation
   3) Super-legacy static fallback (Android 4–5 WebView)
   Target: .ui-button.ui-button__type__primary
   =================================================================== */


/* ================================================================
   1 — MODERN DEVICES (Chrome, Safari iOS 12+, Edge, Firefox)
   Premium Masked Linear Flow Border
   ================================================================ */

.ui-button.ui-button__type__primary {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: none !important;
  z-index: 1;
}

.ui-button.ui-button__type__primary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px; /* Border thickness */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #F3C96A,
    #2F7F86,
    #399199,
    #F3C96A
  );
  background-size: 300% 100%;
  animation: bookifyBorderLinear 4s linear infinite;

  /* Mask to create TRUE animated border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;

  z-index: -1;
}

.ui-button.ui-button__type__primary::after {
  content: "";
  position: absolute;
  inset: 3px; /* Same as padding above */
  border-radius: inherit;
  background: #2F7F86; /* CTA fill color */
  z-index: -1;
}

@keyframes bookifyBorderLinear {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}



/* ================================================================
   2 — FALLBACK FOR OLDER ANDROID / OLD SAMSUNG WEBVIEW
   No masking support → Simulated animated border
   ================================================================ */

@supports not (-webkit-mask-composite: xor) {

  .ui-button.ui-button__type__primary {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
  }

  .ui-button.ui-button__type__primary::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: inherit;
    background: linear-gradient(
      90deg,
      #F3C96A,
      #2F7F86,
      #399199,
      #F3C96A
    );
    background-size: 300% 100%;
    animation: fallbackLinearFlow 4s linear infinite;
    z-index: -1;
  }

  @keyframes fallbackLinearFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
  }
}



/* ================================================================
   3 — SUPER-LEGACY FALLBACK (Android 4–5 WebView)
   No CSS animations → Static elegant gold border
   ================================================================ */

@media screen and (max-device-width: 480px) {

  .ui-button.ui-button__type__primary {
    border: 2px solid #F3C96A !important;
  }
}


/* ==========================================================
   End Of BOOKIFY VILLAS — LINEAR ANIMATED BORDER (UNIVERSAL SUPPORT PACK) Book Now or Book Villa Now
   Target: primary button only
   ========================================================== */


/* ===================================================== */

/* Hover micro-lift + glow */
.hero__cta button.ui-button:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.22),
    0 0 20px rgba(243,201,106,0.45);
}

@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* End of Hero Section Button Styling */

/* ===================================================================================*/

/* Style for Category Grid Items - Purpose: */
*/ Make category titles look like high-end villa filters (Airbnb Luxe vibe, Arabic local twist). */

/* ================================
   CATEGORY GRID TILES (cat-item)
   ================================ */

/* ================================
   CATEGORY GRID TILES (cat-item)
   ================================ */

.cat-box .cat-grid .cat-item {
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,220,150,0.35);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
  text-align: center;
  font-size: 15px;
  text-shadow: 0 0 8px rgba(255,214,130,0.45);
}

.cat-box .cat-grid .cat-item:hover,
.cat-box .cat-grid .cat-item:active {
  background: #2F7F86;
  border-color: #F3C96A;
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(243,201,106,0.45);
  color: #ffffff;
}

.cat-box .cat-grid .cat-item.active {
  background: #2F7F86;
  border-color: #F3C96A;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(243,201,106,0.6);
}

.cat-box .cat-title {
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(243,201,106,0.5);
}


/* ================================
   VILLA SERVICE CARDS (Bookify)
   ================================ */

.service-card-wrapper[variant="large-image"] {
  border-radius: 16px !important;
  background: rgba(47,127,134,0.18) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(4px);
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}

.service-card-wrapper[variant="large-image"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 32px rgba(243,201,106,0.35);
  border-color: rgba(243,201,106,0.75);
}


/* ================================
   CARD BUTTONS (Primary & Info)
   ================================ */

.service-card-wrapper .ui-button.ui-button__type__primary {
  background: #2F7F86 !important;
  color: #ebd6a9 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all .3s ease;
  box-shadow: 0 0 8px rgba(243,201,106,0.4);
}

.service-card-wrapper .ui-button.ui-button__type__primary:hover {
  background: #267278 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(243,201,106,0.5);
}

.service-card-wrapper .ui-button.ui-button__type__info {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(243,201,106,0.35) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all .3s ease;
}

.service-card-wrapper .ui-button.ui-button__type__info:hover {
  border-color: #F3C96A !important;
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(243,201,106,0.45);
}


/* ================================
   CARD TEXT & PRICE
   ================================ */

.service-card-grid__cnt h4 {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(243,201,106,0.4);
}

.service-card-dc__item__title,
.service-card-dc__item__value {
  color: #fce9c3 !important;
}

/* ✅ PRICE COLOR RESTORED (as you asked) */
.ui-price-tag__current {
  color: #ffe8b6 !important;
  font-weight: 800;
  text-shadow: none !important; /* remove gold glow to stay original clean */
}

.ui-tag__content[data-v-c490a858] {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* Extras label text */
.service-card-extras-tag span {
  color: #ffeebf !important;
}




/* End of Style for Category Grid Items - Purpose: */
*/ Make category tiles look like high-end villa filters (Airbnb Luxe vibe, Arabic local twist). */

/* =============================================================================== */

/*  Thank You for Booking Page Font Size + Vill Page Font Size  */

.h2, .h3, h2, h3 {
    font-weight: 600;
    font-size: 20px !Important;
}



/* End Of Thank You for Booking Page Font Size + Vill Page Font Size  */

/* Unify badge & price box size in service header */

/* ===============================================
   SERVICE CARD — TOP-CENTER BADGE + PRICE BAR
   =============================================== */

.service-card-grid__header__badges {
  position: absolute !important;
  top: 12px !important;
  left: 0 !important;
  right: 0 !important;

  display: flex !important;
  flex-direction: row !important; /* always horizontal */
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 0 16px !important;
  box-sizing: border-box !important;
  z-index: 0 !important;
}

/* Equal flexible width for both pills */
.service-card-grid__header__badge,
.service-card-grid__header__price {
  flex: 1 1 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Remove Trafft tag min-width */
.service-card-grid__header__badge .ui-tag {
  --f88ba6cc: auto !important;
}

/* Pill visuals */
.service-card-grid__header__badge .ui-tag,
.service-card-grid__header__price .ui-price-tag {
  width: 100% !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Text alignment */
.service-card-grid__header__badge .ui-tag__content,
.service-card-grid__header__price .ui-price-tag__current {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* Micro adjustment for price pill */
.service-card-grid__header__price[data-v-2c6468f8] {
  margin-top: -8px !important;
}

/* ===============================
   LTR default order (no swap)
   =============================== */
html[dir="ltr"] .service-card-grid__header__badges {
  direction: ltr !important;
}

/* ===============================
   RTL — swap pills horizontally
   =============================== */
html[dir="rtl"] .service-card-grid__header__badges {
  direction: rtl !important;  /* magic: reverses pill flow horizontally */
  flex-direction: row !important; /* keep horizontal layout */
}

/* Neutralize any order overrides */
html[dir="rtl"] .service-card-grid__header__badge,
html[dir="rtl"] .service-card-grid__header__price {
  order: 0 !important;
}

/* End Unify badge & price box size in service header */



/* LTR for Telephone Number for Default RTL Content */

a[href^="tel:"] {
  display: inline-block;
  direction: ltr !important;
  unicode-bidi: embed !important;
  text-align: left !important;
}

/* End Of LTR for Telephone Number for Default RTL Content */



/* Clean, Professional CSS for Your RTL Calendar Header
for Perfect Flipping 180deg and RTL for the Arrows: */



/* Bold Amount */
.h7.text-primary.flex-none {

color: var(--color-primary);
font-size: 13px;
font-weight: 700;
line-height: 20px;
display: block;
box-sizing: border-box;
border: 0px solid rgb(229, 231, 235);
font-family: Cairo, sans-serif !important;
flex: 0 0 auto !important;
}

.text-primary {
color: var(--color-primary);
font-family: "Noto Kufi Arabic", sans-serif !important;
font-size: 18px;
font-weight: 700;
line-height: 24px;
transition: font-family 0.3s;
box-sizing: border-box;
border: 0px solid rgb(229, 231, 235);
margin: 0px;
}


/* Result Number */

/* End */

/* Footer Link LTR Direction */

[dir=rtl] .footer__content__column.right-align[data-v-70fa117c]>* {
    text-align: left;
    direction: ltr;
}
/* End */




/* Hide Number of People in Booking Details */

.booking-details-body__item:has(.ui-icon-customers) {
  display: none !important;
}

/* End of Hide Number of People in Booking Details */


/* ✅ Villa Details Page - Luxury Villa Template (CSS) */

/* Villa Details Page Styling */

/* ===== Jericho Villas Luxe Theme ===== */

/* ============================================
   Villa Details Page - Luxury Villa Page Template
   GLOBAL CSS (applies to all languages)
   Style: Jericho Oasis Desert Luxury + Icon Cards
   ============================================ */



/* End of Villa Details Page Styling */


/*================================================================================= */



/* ============================================================
   ✅ BOOKIFY — FINAL CLEAN SEARCH SYSTEM (Desktop + Mobile)
   Replaces ALL previous search CSS.
   ============================================================ */

/* ============================================================
   ✅ BOOKIFY — UNIVERSAL STRUCTURE (Shared rules)
   ============================================================ */
.ui-search,
.ui-search__input,
.ui-search__mobile-button {
    border-radius: 14px !important;
    box-sizing: border-box !important;
}

/* Ensure wrapper is positionable */
.services__header__filter-button-mobile .ui-search {
    position: relative !important;
}

/* ============================================================
   ✅ DESKTOP (≥ 851px) — always full search bar
   ============================================================ */
@media (min-width: 851px) {
    /* Show full search bar */
    .services__header .ui-search {
        display: flex !important;
    }

    /* Apply glowing effect to search box */
    .services__header .ui-search__input {
        display: flex !important;
        box-shadow: 0 0 18px rgba(243,201,106,0.55) !important; /* Add glow */
        animation: borderGlow 4s infinite ease-in-out !important;  /* Glowing effect */
    }

    /* Hide mobile lens button on desktop */
    .ui-search__mobile-button {
        display: none !important;
    }
}

/* ============================================================
   ✅ MOBILE (≤ 850px) — lens + animated expand/collapse
   ============================================================ */
@media (max-width: 850px) {

    /* Hide desktop search */
    .services__header .ui-search {
        display: none !important;
    }

    /* Show mobile wrapper */
    .services__header__filter-button-mobile .ui-search {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        width: auto !important;
    }

    /* ✅ default lens */
    .services__header__filter-button-mobile .ui-search__mobile-button {
        display: flex !important;
        width: 42px !important;
        height: 42px !important;
        background: rgba(0,0,0,0.25) !important;
        border: 2px solid rgba(243,201,106,0.38) !important;
        backdrop-filter: blur(6px) !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
        opacity: 1 !important;
        transform: scale(1) !important;
        transition: opacity .25s ease, transform .25s ease;
        position: relative !important;
        z-index: 2 !important;
    }

    /* ✅ full search box base styling */
    .services__header__filter-button-mobile .ui-search__input {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 42px !important;
        border: 2px solid rgba(243,201,106,0.38) !important;
        background: rgba(0,0,0,0.20) !important;
        backdrop-filter: blur(6px) !important;
        align-items: center !important;
        padding: 0 12px !important;
        gap: 8px !important;
        animation: borderGlow 4s infinite ease-in-out !important;
        transition: opacity .28s ease, transform .28s ease;
        position: absolute !important;
        top: 0 !important;
        z-index: 1 !important;
        width: 180px !important; /* auto width */
    }

    /* ✅ LTR expansion (from lens → rightward) */
    html[dir="ltr"] .services__header__filter-button-mobile .ui-search__input {
        left: 0 !important;
        transform: translateX(12px) scale(0.95);
    }

    html[dir="ltr"] 
    .services__header__filter-button-mobile .ui-search.ui-search--active .ui-search__input {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) scale(1) !important;
    }

    /* ✅ RTL expansion (from lens → leftward) */
    html[dir="rtl"] .services__header__filter-button-mobile .ui-search__input {
        right: 0 !important;
        transform: translateX(-12px) scale(0.95);
    }

    html[dir="rtl"] 
    .services__header__filter-button-mobile .ui-search.ui-search--active .ui-search__input {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) scale(1) !important;
    }

    /* ✅ lens fades out when expanding */
    .services__header__filter-button-mobile 
    .ui-search.ui-search--active .ui-search__mobile-button {
        opacity: 0 !important;
        transform: scale(0.7) !important;
        pointer-events: none !important;
    }
}

/* ============================================================
   ✅ UNIVERSAL INPUT TYPOGRAPHY
   ============================================================ */
.ui-search__input input {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    height: 100% !important;
}
.ui-search__input input::placeholder {
    color: rgba(255,255,255,0.65) !important;
    line-height: 42px !important;
}

/* ============================================================
   ✅ ICON ANIMATIONS
   ============================================================ */
.ui-search__input .ui-icon-search,
.ui-search__mobile-button .ui-icon-search {
    color: #F3C96A !important;
    animation: lensPulse 2.6s infinite ease-in-out !important;
    opacity: 1 !important;
}

/* ============================================================
   ✅ KEYFRAMES
   ============================================================ */
@keyframes borderGlow {
  0%   { box-shadow: 0 0 0 rgba(243,201,106,0); }
  50%  { box-shadow: 0 0 18px rgba(243,201,106,0.55); }
  100% { box-shadow: 0 0 0 rgba(243,201,106,0); }
}

@keyframes lensPulse {
  0%   { transform: scale(1); opacity: .85; }
  50%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: .85; }
}

/* ============================================================
   ✅ BOOKIFY — ADD GLOW TO LENS IN NORMAL COLLAPSED STATE
   (Desktop & Mobile) — NO behavioral changes.
   ============================================================ */

/* Mobile collapsed lens — glow identical to search box */
@media (max-width: 850px) {
    .services__header__filter-button-mobile 
    .ui-search:not(.ui-search--active) .ui-search__mobile-button {
        box-shadow: 0 0 18px rgba(243,201,106,0.55) !important;
        animation: borderGlow 4s infinite ease-in-out !important;
    }
}

/* Desktop lens — only if lens exists (Trafft sometimes duplicates it) */
@media (min-width: 851px) {
    .services__header .ui-search__mobile-button {
        box-shadow: 0 0 18px rgba(243,201,106,0.55) !important;
        animation: borderGlow 4s infinite ease-in-out !important;
    }
}


/* Ensure the header logo image is circular */
.header__content__primary__left__logo img {
    border-radius: 50% !important; /* Makes the logo circular */
    width: 42px; /* Adjust width to your desired size */
    height: 42px; /* Adjust height to match width */
    object-fit: cover; /* Ensures the image is properly cropped to fit the circular shape */
}


/* Ensure the footer logo image is circular */
.footer-logo.large {
    border-radius: 50% !important; /* Makes the logo circular */
    width: 42px; /* Adjust width to your desired size */
    height: 42px; /* Adjust height to match width */
    object-fit: cover; /* Ensures the image is properly cropped to fit the circular shape */
}

/* End of Header and Bottom Logo Layout */





/* ==========================================
   Jericho.Villas — Full Smart Filter Engine
   Arabic/English/Spanish/French Support
   Full Grammar Matching + Synonyms Hidden
   Added Increment/Decrement buttons for sliders
========================================== */

/* ================================================
   Jericho.Villas — Filter UI (Dark Mode Edition)
   Version: JV-FILTER-DARK-2025
================================================ */

/* ✅ Bubble Button */
#jv-bubble {
  position: fixed;
  bottom: 16px;
  z-index: 99990;
  background: #0B75FF;
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  animation: jvFadeIn 0.5s forwards;
  transition: transform .25s ease;
}

#jv-bubble:hover {
  transform: scale(1.06);
}

@keyframes jvFadeIn {
  to { opacity: 1; }
}

/* ✅ Dark Filter Panel */
#jv-filter-panel {
  position: fixed;
  bottom: -550px;
  left: 0;
  width: 100%;
  background: #272A30;     /* 🟦 الخلفية الداكنة المطلوبة */
  border-radius: 20px 20px 0 0;
  padding: 22px;
  z-index: 99989;
  transition: bottom .35s ease, opacity .35s ease;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.5);
}

/* ✅ When opened */
#jv-filter-panel.open {
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
}

/* ✅ Header */
.jv-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  align-items: center;
}

.jv-header-title {
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
}

/* Pin + Close Buttons */
.jv-pin, .jv-close {
  cursor: pointer;
  background: #383C44;
  padding: 6px 10px;
  border-radius: 8px;
  color: #FFF;
  font-size: 14px;
  transition: background .25s;
}

.jv-pin:hover,
.jv-close:hover {
  background: #4A4F58;
}

/* ✅ Filter Rows */
.jv-row {
  margin-bottom: 20px;
}

.jv-label {
  font-size: 15px;
  margin-bottom: 6px;
  color: #FFFFFF; /* نص أبيض */
}

/* ✅ Inputs */
.jv-input {
  width: 100%;
  padding: 12px;
  border-radius: 7px;
  border: 1px solid #3A3E45;
  background: #353941;
  color: #FFF !important;
  margin-bottom: 8px;
  font-size: 15px;
  transition: border-color .25s, background .25s;
}

.jv-input::placeholder {
  color: #B7B7B7;
}

.jv-input:focus {
  border-color: #0B75FF;
  background: #3E434C;
  outline: none;
}

/* ✅ Sliders */
.jv-slider {
  width: 100%;
  margin-top: 5px;
  cursor: pointer;
  accent-color: #0B75FF;
}

/* ✅ Action Buttons */
.jv-action {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 25px;
}

.jv-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: opacity .25s, transform .25s;
}

.jv-btn:hover {
  opacity: 0.85;
  transform: scale(1.03);
}

/* ✅ Search Button */
.jv-search-btn {
  background: #0B75FF;
  color: white;
}

/* ✅ Clear Button */
.jv-clear-btn {
  background: #3B3F46;
  color: #FFF;
}

/* ✅ Make sure Trafft search bar works on mobile */
@media (max-width: 768px) {
  .ui-search__input {
    position: relative !important;
    z-index: 999999999 !important;
  }
}






/* ================================
   FIX: CENTER ACTION BUTTONS
   ================================ */
.jv-action {
    justify-content: center !important;
}

/* Buttons now perfectly centered under sliders */
.jv-btn {
    flex: 0 1 350px !important;
    width: 100% !important;
    max-width: 350px !important;
}



/* Guest Favorite in Villa or Service Details Page */

/* ============================================================
   EMPLOYEE TAG UI ENHANCEMENT — FULL CENTERING
   ------------------------------------------------------------
   This enhancement:
   - Widens the tag/pill
   - Centers the tag horizontally AND vertically inside its cell
   - Centers the text inside the badge
   - Works for all languages (no text targeting)
   - Overrides inline Bookify/Trafft styles safely
   - Easy to adjust width + padding
   ============================================================ */

.service_de__employees__cards__item {
    /* Enable vertical centering for all inner elements */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;   /* ⭐ Vertical centering */
    align-items: center !important;       /* ⭐ Horizontal centering */
}

/* The badge itself */
.service_de__employees__cards__item .ui-tag {
    display: inline-flex !important;      /* Makes the pill flexible */
    align-items: center !important;       /* Vertical centering of text */
    justify-content: center !important;   /* Horizontal centering of text */

    min-width: 135px !important;          /* ⭐ Adjust width */
    padding-inline: 10px !important;      /* ⭐ Adjust spacing */

    box-sizing: border-box !important;

    /* Ensure the entire badge is centered in the card */
    margin: 8px auto !important;          /* Centers horizontally + spacing */
}

/* Make inner text behave perfectly */
.service_de__employees__cards__item .ui-tag .ui-tag__content {
    white-space: nowrap !important;       /* Prevent wrapping */
    text-align: center !important;
    width: 100%;                          /* Keeps text aligned perfectly */
}


/* End Of Guest Favorite in Villa or Service Details Page */



/* ============================================================
   Jericho.Villas — Category Menu Background Sync
   Active background color reused on hover (no font changes)
   ============================================================ */

/* 1) Define the active background color ON THE PARENT */
.sfv__categories {
    --cat-active-bg: #2A9EA0;  /* ⬅️ Put your exact active BG color here */
}

/* 2) Make sure the active item uses that background */
.sfv__categories__item.is-active {
    background-color: var(--cat-active-bg) !important;
}

/* 3) Any NON-active item gets the SAME background on hover */
.sfv__categories__item:not(.is-active):hover {
    background-color: var(--cat-active-bg) !important;
    /* we do NOT touch color, font, etc. */
}

/* ============================================================
   End Of Jericho.Villas — Category Menu Background Sync
   Active background color reused on hover (no font changes)
   ============================================================ */




/* ============================================================================
   JERICHO.VILLAS — HEADER MENU UI/UX UPGRADE
   Active + Hover + Visited = Premium Background + Animated Line
   ============================================================================ */

/* 1) Set your theme colors here ONCE */
.header__content__primary__left__items {
    --menu-bg: rgba(42, 158, 160, 0.18);   /* Background hover/active */
    --menu-bg-active: rgba(42, 158, 160, 0.28); /* Stronger active BG */
    --menu-line: #2A9EA0;                 /* Underline color */
    --menu-font: #ffffff;                 /* Text color */
}


/* 2) Base styling for menu links */
.header__content__primary__left__items a {
    position: relative;
    padding: 10px 18px;
    border-radius: 12px;
    color: var(--menu-font) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease;
}


/* 3) Fancy animated underline (Airbnb-style) */
.header__content__primary__left__items a::after {
    content: "";
    position: absolute;
    bottom: -3px;
    right: 0;               /* RTL-aware */
    width: 0%;
    height: 3px;
    background: var(--menu-line);
    border-radius: 10px;
    transition: width 0.25s ease;
}


/* 4) Hover state — soft background + underline grows */
.header__content__primary__left__items a:hover {
    background-color: var(--menu-bg) !important;
}

.header__content__primary__left__items a:hover::after {
    width: 100%;
}


/* 5) Active state — stronger background + full underline */
.header__content__primary__left__items a.router-link-active,
.header__content__primary__left__items a.router-link-exact-active {
    background-color: var(--menu-bg-active) !important;
}

.header__content__primary__left__items a.router-link-active::after,
.header__content__primary__left__items a.router-link-exact-active::after {
    width: 100%;
}


/* 6) Visited links should look like normal menu links */
.header__content__primary__left__items a:visited {
    color: var(--menu-font) !important;
    text-decoration: none !important;
}

/* ============================================================================
   End Of JERICHO.VILLAS — HEADER MENU UI/UX UPGRADE
   Active + Hover + Visited = Premium Background + Animated Line
   ============================================================================ 





/* =========== Center Dot Between the Footer Menu Items ===================== */


.footer-custom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.footer-custom-links .link {
    display: flex;
    align-items: center;
}

/* النقطة الفاصلة */
.footer-custom-links .link:not(:last-child)::after {
    content: "•";
    margin: 0 12px;
    color: inherit;
    opacity: 0.7;
}

/* لـ RTL - العربية */
[dir="rtl"] .footer-custom-links .link:not(:last-child)::after,
html[dir="rtl"] .footer-custom-links .link:not(:last-child)::after {
    margin: 0 12px;
}

/* لـ LTR - الإنجليزية */
[dir="ltr"] .footer-custom-links .link:not(:last-child)::after,
html[dir="ltr"] .footer-custom-links .link:not(:last-child)::after {
    margin: 0 12px;
}

/* Remove the ::after dot and use a separate span */
.footer-custom-links .separator {
    content: "•";
    color: inherit;
    opacity: 0.7;
    font-size: 16px;
    margin: 0 5px;
}

 /* =========== End Of Center Dot Between the Footer Menu Items ===================== */




/* ===== GOLDEN FOOTER MENU STYLES - NO SIZE CHANGE ===== */
/* Start of golden footer menu styling - Maintains original size */
/* Applied to: .footer-custom-links .link */

.footer-custom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.footer-custom-links .link {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Maintain original padding/size - no changes */
    padding: 8px 16px !important;
    
    /* Golden border styling */
    border: 2px solid gold !important;
    
    /* Golden background with 50% transparency */
    background-color: rgba(255, 215, 0, 0.5) !important;
    
    /* Text styling for better contrast */
    color: #000000 !important;
    font-weight: 600;
    text-decoration: none;
    
    /* Visual enhancements */
    border-radius: 6px;
    /* No transition - instant state changes */
}

/* Separator dot styling between menu items */
.footer-custom-links .link:first-child::after {
    content: "•";
    margin: 0 8px;
    color: gold;
    font-size: 16px;
    font-weight: bold;
    opacity: 0.8;
}

/* Hover effects - instant visual changes without animation */


/* RTL specific adjustments for Arabic layout */
[dir="rtl"] .footer-custom-links .link {
    font-family: 'Arial', 'Segoe UI', sans-serif;
}

.footer-custom-links .link:hover {
   background-color: rgba(255, 215, 0, 0.8) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    filter: brightness(1.1);
}

/* ===== END OF GOLDEN FOOTER MENU STYLES ===== */




/* ================= Remove the Footer Dot Between Footer Menu Items =============== */

.footer-custom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; /* Fixed gap */
}

.footer-custom-links .link {
    display: flex;
    align-items: center;
    padding: 0;
}

/* Remove the ::after and use gap instead */
.footer-custom-links .link:not(:last-child)::after {
    display: none;
}


/* =============== End Of Remove the Footer Dot Between Footer Menu Items =============== */


/* Language Switcher in Mobile - Show Above Airbnb Sticky Bar */


.jv-airbnb-shell {
  z-index: 10 !important;   /* < lower than language switcher */
}

.jv-airbnb-bar {
  pointer-events: auto !important;
}

/* End Of Language Switcher in Mobile - Show Above Airbnb Stick Bar */




/* Arabic RTL Fix for the Price Header Arrow in Sticky Bottom Bar in the Booking Page*/

html[lang="ar"] .booking-details-mobile__header {
  flex-direction: row-reverse !important;
}

html[lang="ar"] .booking-details-mobile__header__collapse {
  margin-left: auto !important;
}


/* End Of Arabic RTL Fix for the Price Header Arrow in Sticky Bottom Bar in the Booking Page*/



/* Hide the Map Widget Button on the Location Page */

.bs-location-view-button {
    display: none !important;
}

/* End Of Hide the Map Widget Button on the Location Page */