/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/
.user_thumb {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  position: relative;
  height: 40px;
  width: 40px;
  z-index: 0;
  border: 1px solid #616161;
  padding: .2rem;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

video {
  position: initial;
}

.hero_in.shop_detail {
  height:400px !important;
}

.wishlist-icon {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 1;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 9px 10px;
  display: inline-block;
  color: #fff;
  line-height: 1;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}

.featured-tag-grid {
  position: absolute;
  right: 15px;
  top: 165px;
  z-index: 1;
  color: #fff;
  background-color: #ffc108;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
  display: inline-block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 600;
}
.home_readio_btn{
  display: flex;
}

.featured-tag-grid:hover{
  color: #fff !important;
}

.featured-tag-list {
  margin-top: 128px;
  text-transform: uppercase;
}
.featured-tag-border{
  border: 1px solid #ffc108;
}
@media (max-width: 990px) {
  .featured-tag-list{
    margin-top: 108px;
    background-color: #ffc108!important;
    text-transform: uppercase;
  }
  
}

@media (min-width: 991px) {
  .featured-tag-list{
    margin-top: 134px;
    background-color: #ffc108!important;
    text-transform: uppercase;
  }
  
}

.featured-body{
  background-color: #feffed;
}

.featured-footer{
  background-color: #fffad5;
}

.wishlist-icon:hover {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
}
.wishlist-icon:focus {
  color: #fff;
}

.main-menu ul ul:before {
  left: 61%;
}

@media only screen and (min-width: 992px){
  .main-menu ul li:hover > ul {
    margin-left: -90px;
  }
}

.stiky-map .map-full{
  height: calc(100vh - 128px);
}
.stiky-map{
  position: sticky;
  top:118px;
}

.stiky-map-list .map-full{
  height: calc(100vh - 60px);
}

.stiky-map-list{
  position: sticky;
  top:60px;
}

@media only screen and (max-width: 991px){
  .stiky-map .map-full{
    height: 40vh;
  }
}

.map-layout {
  border:15px solid #fff;
  background-color:#fff;
}

.single-listing-map {
  height: 500px;
}

.social-links ul li a i {
  color: #555;
  opacity: 0.6;
}

.social-links ul li {
  display: inline-block;
  margin-right: 5px;
  font-size: 20px;
  font-size: 1.25rem;
}

.category-title {
  border-radius: 5px; background-color: rgb(63,66,119); padding: 20px; text-align: center; color: #fff; font-size: 20px; font-weight: bold;
}
.sub-category-link {
}
.sub-category-link:hover {
}
.sub-category-link .sub-category {
  border-radius: 2px; padding: 10px; margin: 4px 0px; text-align: left; color: #676767; background-color: #fff; width: 100%; transition: all .4s ease-in-out;
}
.sub-category-link .sub-category .sub-category-number{
  /* background-color: #e4e4e4; padding: 1px 5px; border-radius: 2px; margin-right: 10px; color: #fff; */
  background-color: #fff;
  color: #676767;
  font-size: 14px;
  font-size: .875rem;
  line-height: 1;
  padding: 6px;
  display: inline-block;
  margin-right: 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}
.sub-category-link .sub-category .sub-category-title{
  margin-right: 5px;
}
.sub-category-link .sub-category .sub-category-arrow{
  float: right;
}

.sub-category-link .sub-category:hover{
  background-color: #e74e84;
  /* -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05); */
  color: #fff;
}

/* Popover styles */

.leaflet-popup-content {
  margin-top: 0px;;
}

.leaflet-popup-content-wrapper {
  width: 280px;
}
.leaflet-popup-content p{
  margin: 4px 0;
}

.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    text-align: center;
    top: 15px;
    right: 15px;
    color: #fff;
    border-radius: 100%;
    z-index: 20;
    box-shadow: 0px 0px 0px 3px rgba(255,255,255,0.4);
    cursor: pointer;
    background-color: #ffffff;
    color: #333;
}

.leaflet-popup-content {
    margin: 0;
    width: 100% !important;
}
.leaflet-popup-content img{
    height: 160px;
    transition: all .4s ease-in-out;
}
.leaflet-popup-content img:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 7px;
    overflow: hidden;
}
.leaflet-popup-content p i {
    position: absolute;
    left: 0;
    top: 3px;
}

.leaflet-popup-content p {
    padding-left: 22px;
    position: relative;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    box-shadow: 0 1px 4px rgba(0,0,0 ,0.3);
}
.strip .img {
    background-size: cover;
    background-position: center center;
}

.strip figure:hover .img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.focus-a-listing{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #3544f9;
    border-color: #727cf5;
    border-radius: 50%;
}
.pagination-rounded .page-link {
    border-radius: 30px!important;
    margin: 0 3px;
    border: none;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #313a46;
    background-color: #fff;
    border: 1px solid #dee2e6;;
}

/* Customizing Radio Button */
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #004dda;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.hidden {
  display: none;
}

.box_detail .price > span {
  font-size: 20px;
  font-weight: 600;
}

@media (min-width: 1px) and (max-width: 990px) {
  #categorySideMap{
    height: 400px;
  }
  
}
@media (min-width: 1px) and (max-width: 990px) {
  #map{
    height: 400px;
  }
  
}
@media (min-width: 991px) {
  .custom-mt-7{
    margin-top: 58px;
  }
  
}

.social-button{
  width: 210px !important;
  float: left !important;
  margin-right: 5px;
  text-align: left !important;
}
/*
.map-direction-image{
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-animation: zoomin .2s ease-in infinite;
  animation: zoomin .2s ease-in infinite;
  transition: all .2s ease-in-out;
  overflow: hidden;
}

.map-direction-image:hover{
  transform: scale(1.05);

  position: relative;
  background-size: cover !important;
  background-position: top !important;
  height: 150px !important;
  background-repeat: no-repeat;
}*/


/*Time picker custom css on beauty listing type appointment form*/
.gj-timepicker-bootstrap [role=right-icon] button .gj-icon, .gj-timepicker-bootstrap [role=right-icon] button .material-icons {
    position: absolute;
    font-size: 21px;
    top: 0px;
    left: 6px;
}
.input-group-append .btn-outline-secondary:hover {
  background-color: #fff;
  border-left: 1px solid #dee2e6;
}
.input-group-append .btn-outline-secondary {
  border: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6
}
.input-group-append {
  border-left: 1px solid grey;
}
.claimed_icon{
  font-size: 30px;
  color: #32a067;
  cursor: pointer;
}
.claimed_icon_sm{
  font-size: 20px;
  color: #32a067;
  cursor: pointer;
}
.tooltip div{
  /*background-color: #66BB6A;*/
  /*font-size: 18px;*/
  font-weight:500;
}
.blog_text img {
  width: 100% !important;
}
.text-10{
  font-size: 10px;
}
.text-11{
  font-size: 11px;
}
.text-12{
  font-size: 12px;
}
.text-13{
  font-size: 13px;
}
.text-14{
  font-size: 14px;
}
.text-15{
  font-size: 15px;
}



/* ===== Header language switcher (5 languages) ===== */
#top_menu li.lang-switch { position: relative; }
.lang-switch > a { cursor: pointer; }
.lang-switch > a .fa-globe { margin-right: 4px; }
.lang-switch-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0,0,0,.18);
    min-width: 140px;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
}
.lang-switch:hover .lang-switch-menu { display: block; }
.lang-switch-menu li { display: block; margin: 0; float: none; }
.lang-switch-menu li a {
    display: block;
    padding: 7px 16px;
    color: #444 !important;
    font-size: 13px;
    text-shadow: none;
    text-align: left;
}
.lang-switch-menu li a:hover { background: #f5f5f5; }
.lang-switch-menu li a.active { font-weight: 600; color: #0054a6 !important; }
html[dir="rtl"] .lang-switch-menu li a { text-align: right; }

.lang-switch.open .lang-switch-menu { display: block; }

/* ===== Mobile UX: comfortable touch targets for the language switcher ===== */
@media (max-width: 991px) {
    .lang-switch > a {
        padding: 14px 10px;
        margin: -14px -10px;
    }
    .lang-switch-menu li a {
        padding: 12px 18px;
        font-size: 15px;
    }
}
/* ===== Top bar (contact + socials + language) ===== */
#topbar {
    position: relative;
    z-index: 99999998;
    background: #0d1b2e;
    color: #fff;
    font-size: 13px;
}
#topbar .topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
#topbar a { color: #fff; }
#topbar .topbar-contact { display: flex; align-items: center; gap: 22px; white-space: nowrap; overflow: hidden; }
#topbar .topbar-contact i { color: #ffc107; margin: 0 6px; }
#topbar .topbar-right { display: flex; align-items: center; gap: 16px; }
#topbar .topbar-right > a { opacity: .85; }
#topbar .topbar-right > a:hover { opacity: 1; }

.topbar-lang { position: relative; }
.topbar-lang > a { display: inline-block; padding: 4px 2px; }
.topbar-lang > a .fa-globe { margin: 0 5px; color: #ffc107; }
.topbar-lang > a .fa-angle-down { margin: 0 4px; }
.topbar-lang-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
    min-width: 140px;
    padding: 6px 0;
    margin: 4px 0 0;
    list-style: none;
    z-index: 99999999;
}
.topbar-lang.open .topbar-lang-menu { display: block; }
.topbar-lang-menu li { display: block; }
.topbar-lang-menu li a { display: block; padding: 8px 16px; color: #333 !important; font-size: 13px; }
.topbar-lang-menu li a:hover { background: #f5f5f5; }
.topbar-lang-menu li a.active { font-weight: 600; color: #0054a6 !important; }
html[dir="rtl"] .topbar-lang-menu { right: auto; left: 0; }
html[dir="rtl"] .topbar-lang-menu li a { text-align: right; }

/* push the transparent fixed header below the topbar; sticky returns to top */
header.header { top: 42px; }
header.header.sticky { top: 0; }

/* The bar holds phone, email, address, socials, currency and language. Drop the
   long items as space runs out so the phone - the one people tap - always fits. */
@media (max-width: 1199px) {
    #topbar .topbar-address { display: none; }
}
@media (max-width: 991px) {
    #topbar .topbar-email { display: none; }
}

/* ===== Language + currency inside the header (mobile) =====
   The topbar could not fit six items at 375px: it grew to 98px tall while the
   header stayed pinned at top:42px, so the header sat ON TOP of the currency and
   language controls and they could not be tapped at all. Below 992px the topbar
   is dropped entirely and the two switchers move into the header bar. */
.hdr-switch { display: none; }

@media (max-width: 991px) {
    #topbar { display: none; }
    header.header,
    header.header.sticky,
    header.header_in,
    header.header_in.is_sticky { top: 0; }

    /* Lay the header out with flexbox instead of the theme's mix of absolute
       positioning and float:right. Those two disagree under RTL - the hamburger
       mirrors but the floated Sign in does not, so both ended up on the same
       side and collided with the logo. Flex order mirrors correctly on its own.

       Two header templates exist: the homepage header (.header, controls are
       direct children) and the inner-page header (.header_in, which nests them
       in .container > .row > .col-*). The inner one grew to 126px / 3 rows and
       buried the page title, so it gets the same single-row flex treatment - on
       its .row, since that is where its children live. */
    header.header,
    header.header_in .row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        flex-wrap: nowrap;
    }
    header.header_in { padding: 0; }
    header.header_in .container { padding: 0; max-width: 100%; }
    /* Bootstrap's .row carries margin: 0 -15px, which made the header row 405px
       wide inside a 375px viewport and pushed the hamburger off the edge */
    header.header_in .row { margin-inline: 0; }
    header.header_in .col-12,
    header.header_in .col-lg-3,
    header.header_in .col-lg-9 {
        /* dissolve the Bootstrap columns so the flex row can lay the items out */
        display: contents;
    }
    header.header > #menu,
    header.header_in #menu { order: 9; }

    .btn_mobile  { order: 1; position: static; margin: 0; }
    #logo        { order: 2; position: static; flex: 1 1 auto; min-width: 0; margin: 0; }
    .hdr-switch  { order: 3; position: static; flex: 0 0 auto; }
    #top_menu    { order: 4; position: static; float: none; margin: 0; flex: 0 0 auto; }

    .hdr-switch {
        display: flex;
        align-items: center;
        gap: 2px;
        z-index: 5;
    }
    .hdr-switch .topbar-lang > a {
        display: flex;
        align-items: center;
        gap: 3px;
        min-height: 40px;         /* a real tap target */
        padding: 0 7px;
        color: #444;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }
    .hdr-switch .topbar-lang > a .fa-globe,
    .hdr-switch .topbar-lang > a .fa-coins { margin: 0; color: #28c0d2; font-size: 14px; }
    .hdr-switch .topbar-lang > a .fa-angle-down { font-size: 11px; opacity: .55; }
    .hdr-switch .topbar-lang-menu { inset-inline-end: 0; inset-inline-start: auto; }

    /* the header is transparent over the hero until it sticks */
    header.header:not(.sticky) .hdr-switch .topbar-lang > a { color: #fff; }
    header.header:not(.sticky) .hdr-switch .topbar-lang > a .fa-globe,
    header.header:not(.sticky) .hdr-switch .topbar-lang > a .fa-coins { color: #fff; }

    /* The theme centres the logo across the full width (position:absolute,
       left:0, width:100%), which puts it straight under the switcher. Give it a
       lane between the hamburger and the controls instead of the whole bar. */
    #logo { width: auto; text-align: start; }
    #logo a { display: inline-block; }
    #logo img { max-width: 100%; height: 26px; margin: 0; }

    /* the hamburger was a 30x19 hit area; thumbs need ~44 */
    .btn_mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
    #top_menu li { margin: 0; }

    /* the theme absolutely-positions top_menu on the inner header at mobile,
       which re-creates the overlap flex just solved - pin it back into the row */
    header.header_in ul#top_menu {
        position: static;
        right: auto;
        float: none;
    }

    /* The inner header is position:fixed, so content must be pushed clear of it.
       A sibling selector cannot be used: the mmenu plugin reparents the DOM and
       leaves <header> as the LAST child, so `header + main` never matches. :has()
       on the body is the reliable hook, and it must not touch the homepage, whose
       hero is designed to sit under a transparent header. */
    body:has(header.header_in) main { padding-top: 62px; }
}

@media (max-width: 400px) {
    /* narrow phones: icons only, the chevron is the first thing to go */
    .hdr-switch { inset-inline-end: 52px; }
    .hdr-switch .topbar-lang > a { padding: 0 5px; }
    .hdr-switch .topbar-lang > a .fa-angle-down { display: none; }
}
/* ===== Tabbed hero search (per-vertical fields + Hurghada areas) ===== */
.hero-search-tabs { max-width: 960px; margin: 28px auto 0; text-align: initial; }
.hst-tabs {
    display: flex;
    gap: 4px;
    background: #fff;
    border-radius: 10px 10px 0 0;
    padding: 8px 8px 0;
    margin: 0;
    list-style: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.hst-tabs li {
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hst-tabs li i { color: #0054a6; }
.hst-tabs li.active { background: #0054a6; color: #fff; }
.hst-tabs li.active i { color: #ffc107; }
.hst-panel { display: none; background: #fff; border-radius: 0 0 10px 10px; padding: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.hst-panel.active { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hst-panel .form-control,
.hst-panel select {
    height: 48px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 0 14px;
    flex: 1 1 180px;
    min-width: 150px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
}
.hst-panel input[type="submit"] {
    background: #0054a6;
    color: #fff;
    border: 0;
    border-radius: 8px;
    height: 48px;
    padding: 0 28px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
}
.hst-panel input[type="submit"]:hover { background: #003d7a; }
.hst-open-now { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; flex: 0 0 auto; margin: 0; }

@media (max-width: 767px) {
    .hero-search-tabs { margin-top: 18px; }
    .hst-panel.active { flex-direction: column; align-items: stretch; }
    .hst-panel .form-control, .hst-panel select, .hst-panel input[type="submit"] { width: 100%; flex: none; }
}
/* ===== Browse top categories: photo cards ===== */
.top-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.tc-card {
    position: relative;
    display: block;
    height: 210px;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.tc-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.tc-card-plain { background: linear-gradient(135deg, #0054a6, #0d1b2e); }
.tc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,17,33,.85) 0%, rgba(6,17,33,.25) 55%, rgba(6,17,33,.05) 100%);
}
.tc-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 18px;
    color: #fff;
    text-align: center;
}
.tc-body i { font-size: 26px; color: #ffc107; display: block; margin-bottom: 6px; }
.tc-body h3 { color: #fff; font-size: 18px; margin: 0 0 2px; }
.tc-body em { font-style: normal; font-size: 13px; opacity: .85; }

@media (max-width: 991px) { .top-categories { grid-template-columns: repeat(2, 1fr); } .tc-card { height: 180px; } }
@media (max-width: 575px) { .top-categories { grid-template-columns: 1fr 1fr; gap: 12px; } .tc-card { height: 150px; } .tc-body h3 { font-size: 15px; } }
/* ===== Tour details & booking ===== */
.tour-facts { margin-top: 10px; }
.tour-fact {
    background: #f7f9fb;
    border: 1px solid #eef1f4;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    margin-bottom: 14px;
}
.tour-fact i { font-size: 20px; color: #0054a6; display: block; margin-bottom: 6px; }
.tour-fact small { display: block; color: #888; font-size: 12px; }
.tour-fact strong { font-size: 14px; color: #222; }
.tour-list { list-style: none; margin: 0 0 15px; padding: 0; }
.tour-list li { padding: 4px 0; font-size: 14px; color: #444; }
.tour-list li .fa-check { color: #28a745; margin: 0 6px; }
.tour-list li .fa-times { color: #dc3545; margin: 0 6px; }
.tour-pickup-note { background: #eef7ff; border-radius: 8px; padding: 10px 14px; color: #0054a6; font-size: 14px; }
.tour-price-head { margin-bottom: 15px; }
.tour-price-head .tour-price { font-size: 26px; font-weight: 700; color: #0054a6; }
.tour-price-head small { color: #888; }
.tour-total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f9fb;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 15px;
}
.tour-total-line strong { color: #0054a6; font-size: 18px; }
#tour_booking_form label { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 4px; }
#tour_booking_form .form-control { border-radius: 6px; }
#tour_booking_form button.btn_1 { border: 0; cursor: pointer; width: 100%; }
/* ===== Tour booking widget v2 ===== */
.tour-widget { padding: 20px; }
.tw-section { border-bottom: 1px solid #f0f0f0; padding: 14px 0; }
.tw-section h6 { font-size: 14px; font-weight: 700; color: #222; margin-bottom: 10px; }
.tw-section h6 span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #0054a6; color: #fff; font-size: 12px; margin: 0 6px 0 0;
}
.tw-days-hint { font-size: 13px; color: #0054a6; background: #eef7ff; border-radius: 6px; padding: 7px 10px; margin-bottom: 8px; }
.tw-day-warning { font-size: 13px; color: #b02a37; background: #fdecee; border-radius: 6px; padding: 7px 10px; margin-top: 8px; }
.tw-times-label { display: block; font-size: 13px; font-weight: 600; color: #555; margin: 10px 0 6px; }
.tw-time-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-pill input { display: none; }
.tw-pill span {
    display: inline-block; padding: 7px 16px; border: 1px solid #dfe3e8;
    border-radius: 20px; font-size: 13px; color: #444; cursor: pointer;
    transition: all .15s ease;
}
.tw-pill input:checked + span { background: #0054a6; border-color: #0054a6; color: #fff; }
.tw-guest-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.tw-guest-row strong { display: block; font-size: 14px; color: #222; }
.tw-guest-row small { color: #888; font-size: 12px; }
.tw-stepper { display: flex; align-items: center; gap: 6px; }
.tw-stepper button {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dfe3e8;
    background: #fff; color: #0054a6; font-size: 17px; line-height: 1; cursor: pointer;
}
.tw-stepper button:hover { background: #0054a6; color: #fff; border-color: #0054a6; }
.tw-stepper input { width: 42px; text-align: center; border: 0; font-weight: 700; font-size: 15px; background: transparent; }
.tw-breakdown { background: #f7f9fb; border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.tw-line { display: flex; justify-content: space-between; font-size: 13px; color: #555; padding: 3px 0; }
.tw-line em { font-style: normal; font-weight: 600; }
.tw-line-total { border-top: 1px dashed #d9dee3; margin-top: 6px; padding-top: 8px; font-size: 15px; color: #222; }
.tw-line-total em { color: #0054a6; font-size: 17px; font-weight: 700; }
.tour-widget button.btn_1 { border: 0; cursor: pointer; width: 100%; }
.tour-widget button.btn_1:disabled { background: #9db6cc; cursor: not-allowed; }
.tw-success { text-align: center; padding: 10px 0; }
.tw-success-icon {
    width: 58px; height: 58px; border-radius: 50%; background: #28a745; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 12px;
}
.tw-success h4 { font-size: 16px; margin-bottom: 14px; }
.tw-summary { list-style: none; margin: 0 0 12px; padding: 0; text-align: initial; }
.tw-summary li { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 2px; border-bottom: 1px solid #f2f2f2; }
.tw-summary li span { color: #777; }
.tw-summary-total strong { color: #0054a6; font-size: 15px; }
.tw-success-note { background: #eafaf0; color: #1d7a3d; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.tour-schedule-line {
    display: flex; flex-wrap: wrap; gap: 18px; background: #f7f9fb;
    border-radius: 10px; padding: 12px 16px; margin-top: 6px; font-size: 14px; color: #444;
}
.tour-schedule-line i { color: #0054a6; margin: 0 5px; }
.tour-schedule-line em { font-style: normal; font-weight: 600; background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 2px 10px; margin: 0 3px; }
/* ===== Tour schedule table (from / to) ===== */
.tour-schedule-box { background: #f7f9fb; border-radius: 10px; padding: 16px 18px; margin-top: 6px; }
.tour-schedule-box h5 { font-size: 15px; margin-bottom: 6px; }
.tour-schedule-box h5 i { color: #0054a6; margin: 0 5px; }
.tour-schedule-days { font-size: 13px; color: #0054a6; margin-bottom: 10px; }
.tour-schedule-table { width: 100%; max-width: 360px; background: #fff; border-radius: 8px; overflow: hidden; border-collapse: collapse; }
.tour-schedule-table th { background: #0054a6; color: #fff; font-size: 13px; padding: 8px 14px; text-align: center; }
.tour-schedule-table td { font-size: 14px; font-weight: 600; color: #333; padding: 8px 14px; text-align: center; border-bottom: 1px solid #f0f2f5; }
.tour-next-day { color: #b06a00; font-weight: 400; font-size: 11px; }
.tw-pill sup { font-size: 9px; margin: 0 2px; }
/* ===== Tour price on cards ===== */
.tour-card-price { font-size: 14px; color: #444; margin: 6px 0 2px; }
.tour-card-price strong { color: #0054a6; font-size: 16px; }
.grid_item .tc-mini-price {
    display: inline-block;
    background: #ffc107;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    padding: 3px 10px;
    margin-top: 6px;
}
/* ===== Availability badge variants (type-aware) ===== */
.loc_neutral {
    background: #f0f2f5;
    color: #555;
    border: 1px solid #dfe3e8;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 12px;
    display: inline-block;
}
/* ===== Spa service menu (duration-based pricing) ===== */
.spa-menu-note { color: #0054a6; background: #eef7ff; border-radius: 8px; padding: 8px 14px; font-size: 13px; display: inline-block; }
.spa-menu-note i { margin: 0 5px; }
.spa-group { margin-top: 22px; }
.spa-group-title {
    font-size: 15px; font-weight: 700; color: #0054a6;
    border-bottom: 2px solid #eef1f4; padding-bottom: 8px; margin-bottom: 14px;
}
.spa-service { padding: 12px 0; border-bottom: 1px dashed #eef1f4; }
.spa-service:last-child { border-bottom: 0; }
.spa-service-head h6 { font-size: 15px; font-weight: 600; color: #222; margin: 0 0 4px; }
.spa-tag {
    background: #fff3cd; color: #8a6d00; font-size: 11px; font-weight: 600;
    border-radius: 10px; padding: 2px 9px; margin: 0 6px; white-space: nowrap;
}
.spa-service-desc { font-size: 13px; color: #666; margin: 0 0 8px; }
.spa-options { display: flex; flex-wrap: wrap; gap: 8px; }
.spa-option {
    display: flex; align-items: center; gap: 10px;
    background: #f7f9fb; border: 1px solid #e8ecf0; border-radius: 8px; padding: 6px 12px;
}
.spa-duration { font-size: 13px; color: #555; }
.spa-duration i { color: #0054a6; margin: 0 4px; }
.spa-price { font-size: 15px; font-weight: 700; color: #0054a6; }
#spa_booking_form .tw-pill span { font-size: 12px; padding: 7px 12px; }
/* ===== Spa service page ===== */
.svc-hero { position: relative; min-height: 380px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.svc-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,17,33,.9) 0%, rgba(6,17,33,.45) 55%, rgba(6,17,33,.2) 100%); }
.svc-hero-inner { position: relative; padding: 40px 15px 34px; color: #fff; }
.svc-hero-inner h1 { color: #fff; font-size: 34px; margin: 8px 0 14px; }
.svc-breadcrumb { font-size: 13px; opacity: .9; }
.svc-breadcrumb a { color: #fff; }
.svc-breadcrumb span { margin: 0 7px; opacity: .6; }
.svc-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-hero-chip { background: rgba(255,255,255,.16); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.28); border-radius: 22px; padding: 7px 16px; font-size: 14px; }
.svc-hero-chip i { margin: 0 5px; color: #ffc107; }
.svc-body h3 { font-size: 21px; margin-bottom: 12px; }
.svc-body h4 { font-size: 17px; margin: 26px 0 12px; }
.svc-lead { font-size: 16px; color: #333; font-weight: 500; }
.svc-body p { line-height: 1.8; color: #555; }
.svc-benefits { list-style: none; padding: 0; margin: 0; }
.svc-benefits li { padding: 7px 0; color: #444; font-size: 15px; }
.svc-benefits li i { color: #28a745; margin: 0 8px; }
.svc-price-table { width: 100%; max-width: 460px; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.svc-price-table th { background: #0054a6; color: #fff; font-size: 13px; padding: 10px 16px; text-align: center; }
.svc-price-table td { padding: 11px 16px; text-align: center; border-bottom: 1px solid #f1f3f5; font-size: 15px; color: #333; }
.svc-price-cell { font-weight: 700; color: #0054a6; }
.svc-provider { display: flex; align-items: center; gap: 14px; background: #f7f9fb; border-radius: 12px; padding: 14px 16px; margin-top: 28px; }
.svc-provider img { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; }
.svc-provider small { color: #888; font-size: 12px; display: block; }
.svc-provider a { font-size: 16px; font-weight: 600; }
.svc-provider p { margin: 4px 0 0; font-size: 13px; color: #666; }
.svc-related-title { margin: 34px 0 14px; font-size: 18px; }
.svc-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc-related-card { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); background: #fff; transition: transform .2s ease; }
.svc-related-card:hover { transform: translateY(-3px); }
.svc-related-img { display: block; height: 110px; background-size: cover; background-position: center; }
.svc-related-body { display: block; padding: 11px 13px; }
.svc-related-body strong { display: block; font-size: 14px; color: #222; margin-bottom: 3px; }
.svc-related-body em { font-style: normal; font-size: 13px; color: #0054a6; font-weight: 600; }
.svc-sticky { position: sticky; top: 90px; }

/* service rows on the spa listing page */
.spa-service-with-image { display: flex; gap: 14px; align-items: flex-start; }
.spa-service-thumb { flex: 0 0 120px; height: 90px; border-radius: 10px; background-size: cover; background-position: center; display: block; }
.spa-service-main { flex: 1; min-width: 0; }
.spa-service-head h6 a { color: #222; }
.spa-service-head h6 a:hover { color: #0054a6; }
.spa-details-link { align-self: center; font-size: 13px; font-weight: 600; color: #0054a6; white-space: nowrap; }
.spa-details-link i { margin: 0 4px; }
html[dir="rtl"] .spa-details-link i { transform: scaleX(-1); }

@media (max-width: 991px) { .svc-sticky { position: static; } .svc-related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
    .svc-hero { min-height: 260px; }
    .svc-hero-inner h1 { font-size: 24px; }
    .svc-related { grid-template-columns: 1fr; }
    .spa-service-with-image { flex-direction: column; }
    .spa-service-thumb { width: 100%; flex: none; height: 150px; }
}
/* ===== Converted price (visitor currency at official rate) ===== */
.price-converted {
    display: inline-block;
    font-size: .8em;
    font-weight: 500;
    color: #6b7785;
    margin: 0 6px;
    white-space: nowrap;
}
.tour-price .price-converted, .svc-hero-chip .price-converted { color: inherit; opacity: .75; }
.tw-line-total .price-converted { font-size: .62em; }
.rate-note {
    font-size: 12px;
    color: #8a94a0;
    margin-top: 10px;
    display: block;
}
.rate-note i { margin: 0 4px; }
#topbar_currency > a .fa-coins { margin: 0 5px; color: #ffc107; }
/* ===== Property project page ===== */
.pj-hero { min-height: 420px; }
.pj-tagline { color: rgba(255,255,255,.9); font-size: 16px; margin: -6px 0 14px; }
.pj-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.pj-fact { background: #f7f9fb; border: 1px solid #eef1f4; border-radius: 10px; padding: 14px 12px; text-align: center; }
.pj-fact i { font-size: 19px; color: #0054a6; display: block; margin-bottom: 6px; }
.pj-fact small { display: block; color: #8a94a0; font-size: 11px; margin-bottom: 3px; }
.pj-fact strong { font-size: 13px; color: #222; line-height: 1.35; display: block; }
.pj-amenities { column-count: 2; }
.pj-table-wrap { overflow-x: auto; }
.pj-units-table { max-width: 100%; width: 100%; }
.pj-units-table td { text-align: initial; }
.pj-units-table th { text-align: initial; padding-inline: 16px; }
.pj-unit-name small { display: block; color: #8a94a0; font-size: 12px; font-weight: 400; }
.pj-est { color: #b06a00; font-weight: 700; cursor: help; }
.pj-on-request { color: #8a94a0; font-weight: 400; }

.pj-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 8px; }
.pj-plan { display: flex; align-items: center; gap: 14px; background: #f7f9fb; border: 1px solid #eef1f4; border-radius: 12px; padding: 14px 16px; }
.pj-plan-dp {
    flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
    background: #0054a6; color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700;
}
.pj-plan-body strong { display: block; font-size: 14px; color: #222; }
.pj-plan-body span { display: block; font-size: 13px; color: #555; }
.pj-plan-body em { display: block; font-style: normal; font-size: 12px; color: #0054a6; margin-top: 3px; }

.pj-calc { background: #fff; border: 1px solid #e6eaee; border-radius: 14px; padding: 18px; box-shadow: 0 3px 14px rgba(0,0,0,.06); }
.pj-calc-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.pj-calc-field label { display: block; font-size: 12px; font-weight: 600; color: #6b7785; margin-bottom: 6px; }
.pj-calc-field select, .pj-calc-field input[type=range] { width: 100%; }
.pj-calc-field select { height: 42px; border: 1px solid #dfe3e8; border-radius: 8px; padding: 0 10px; background: #fafbfc; font-size: 14px; }
.pj-calc-field input[type=range] { accent-color: #0054a6; margin-top: 12px; }
.pj-calc-results { background: #f7f9fb; border-radius: 10px; padding: 6px 16px; }
.pj-calc-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #e8ecf0; font-size: 14px; color: #555; }
.pj-calc-row:last-child { border-bottom: 0; }
.pj-calc-row strong { color: #222; font-size: 15px; }
.pj-calc-row em { font-style: normal; color: #8a94a0; font-size: 12px; margin: 0 4px; }
.pj-calc-dp strong { color: #b06a00; }
.pj-calc-monthly { background: #eef7ff; margin: 0 -16px; padding-inline: 16px; }
.pj-calc-monthly strong { color: #0054a6; font-size: 19px; }

@media (max-width: 991px) {
    .pj-facts { grid-template-columns: repeat(2, 1fr); }
    .pj-plans { grid-template-columns: 1fr; }
    .pj-calc-controls { grid-template-columns: 1fr; }
    .pj-amenities { column-count: 1; }
}
.pj-listing-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    background: linear-gradient(135deg, #eef7ff, #f7f9fb);
    border: 1px solid #dbe8f5; border-radius: 14px; padding: 20px 22px;
}
.pj-listing-cta h4 { margin: 0 0 4px; font-size: 17px; }
.pj-listing-cta p { margin: 0; color: #5a6673; font-size: 14px; }
/* ===== Real-estate browse (property cards, no map) ===== */
.prop-head { background: linear-gradient(135deg, #0d1b2e, #14304f); color: #fff; padding: 46px 0 38px; }
.prop-head h1 { color: #fff; font-size: 30px; margin-bottom: 8px; }
.prop-head p { color: rgba(255,255,255,.82); margin: 0; font-size: 15px; }

.prop-filters {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    background: #fff; border: 1px solid #e6eaee; border-radius: 14px;
    padding: 18px; box-shadow: 0 3px 14px rgba(0,0,0,.06); margin-top: -34px; position: relative; z-index: 2;
}
.prop-filter label { display: block; font-size: 12px; font-weight: 600; color: #6b7785; margin-bottom: 6px; }
.prop-filter select, .prop-filter input {
    width: 100%; height: 42px; border: 1px solid #dfe3e8; border-radius: 8px;
    padding: 0 12px; background: #fafbfc; font-size: 14px; color: #333;
}
.prop-filter-actions { display: flex; align-items: flex-end; gap: 12px; }
.prop-filter-actions .btn_1 { height: 42px; padding: 0 26px; display: flex; align-items: center; border: 0; cursor: pointer; }
.prop-reset { font-size: 13px; color: #6b7785; white-space: nowrap; }

.prop-count { margin: 24px 0 14px; color: #5a6673; font-size: 15px; }
.prop-count strong { color: #0054a6; font-size: 18px; }

.prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prop-grid-compact { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.prop-card {
    display: block; background: #fff; border: 1px solid #e9edf1; border-radius: 14px;
    overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.prop-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.13); }
.prop-card-media {
    display: block; height: 170px; background-size: cover; background-position: center;
    position: relative;
}
.prop-badge {
    position: absolute; top: 12px; inset-inline-start: 12px;
    background: rgba(0,84,166,.92); color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 20px; padding: 4px 12px;
}
.prop-badge-delivery { inset-inline-start: auto; inset-inline-end: 12px; background: rgba(6,17,33,.82); font-weight: 500; }
.prop-badge-delivery i { margin-inline-end: 4px; }
.prop-card-body { display: block; padding: 14px 16px 16px; }
.prop-project { display: block; font-size: 12px; color: #0054a6; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.prop-card-body h3 { font-size: 16px; color: #1a1a1a; margin: 4px 0 10px; }
.prop-specs { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #6b7785; margin-bottom: 12px; }
.prop-specs i { color: #9aa5b1; margin-inline-end: 4px; }
.prop-price { display: block; font-size: 20px; font-weight: 700; color: #0054a6; }
.prop-price small { font-size: 12px; font-weight: 500; color: #8a94a0; margin-inline-end: 4px; }
.prop-price em { font-style: normal; color: #b06a00; }
.prop-price-request { font-size: 15px; color: #8a94a0; font-weight: 500; }
.prop-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e9edf1; }
.prop-term small { display: block; font-size: 11px; color: #8a94a0; margin-bottom: 2px; }
.prop-term strong { font-size: 14px; color: #333; }

.prop-empty { text-align: center; padding: 50px 20px; color: #8a94a0; }
.prop-empty i { font-size: 34px; margin-bottom: 12px; display: block; }

@media (max-width: 991px) {
    .prop-filters { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
    .prop-grid, .prop-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .prop-filters { grid-template-columns: 1fr; }
    .prop-grid, .prop-grid-compact { grid-template-columns: 1fr; }
}

/* ============================================================
   WHATSAPP BOOKING
   Every booking on the site opens WhatsApp with the message
   already written - no forms, no page reloads.
   ============================================================ */
.wa-widget { display: block; }

.wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    padding: 15px 18px;
    border-radius: 10px;
    background: #25D366;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, .35);
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.wa-btn:hover, .wa-btn:focus {
    background: #1eb95a;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
}
.wa-btn:active { transform: translateY(0); }
.wa-btn i { font-size: 22px; line-height: 1; }

.wa-btn-disabled,
.wa-btn-disabled:hover,
.wa-btn-disabled:focus {
    background: #c7cdd3;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.wa-note {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #7b8794;
    text-align: center;
}
.wa-note i { color: #25D366; margin-inline-end: 4px; }

.wa-missing {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #ffe1b3;
    border-radius: 10px;
    background: #fff8ec;
    color: #8a5a00;
    font-size: 13px;
    line-height: 1.6;
}
.wa-missing i { margin-inline-end: 6px; }

/* the secondary link that sits under a WhatsApp button (e.g. "view the project") */
.wa-alt-link {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #0054a6;
    text-align: center;
    text-decoration: none;
}
.wa-alt-link:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .wa-btn { padding: 16px; font-size: 17px; }
}
/* The theme hides every <select> inside .booking (its old form swapped them for
   a custom dropdown plugin). Our WhatsApp widgets use real selects, so bring
   them back and style them like the other fields in the widget. */
.wa-widget select.form-control {
    display: block !important;
    height: auto;
    padding: 11px 14px;
    border: 1px solid #d2d8dd;
    border-radius: 8px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    appearance: auto;
    -webkit-appearance: menulist;
}
.wa-widget select.form-control:focus { border-color: #0054a6; box-shadow: none; outline: none; }
/* ============================================================
   SOCIAL LINKS
   Inline SVG rather than an icon font: the bundled Font Awesome
   is 5.3.1, which predates the TikTok glyph.

   The footer sits on WHITE, the topbar on dark navy - so the two
   need opposite treatments. Getting this wrong makes the footer
   icons invisible.
   ============================================================ */
.social-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.social-row li { margin: 0; }

/* footer: dark glyph on a light chip */
.social-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f1f4f7;
    color: #4a5560;
    border: 1px solid #e4e9ee;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.social-row a:hover,
.social-row a:focus {
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
}
.social-row a svg { display: block; }

.social-row a.social-facebook:hover  { background: #1877F2; }
.social-row a.social-instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-row a.social-tiktok:hover    { background: #010101; }
.social-row a.social-youtube:hover   { background: #FF0000; }
.social-row a.social-twitter:hover   { background: #000; }
.social-row a.social-linkedin:hover  { background: #0A66C2; }

.social-links h5 { margin-bottom: 14px; }

/* topbar: light glyph straight on the dark bar, no chip */
.topbar-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    opacity: .75;
    transition: opacity .15s ease, color .15s ease;
}
.topbar-social:hover,
.topbar-social:focus { opacity: 1; color: #28c0d2; }
.topbar-social svg { display: block; }

@media (max-width: 767px) {
    .social-row { gap: 12px; }
    .social-row a { width: 46px; height: 46px; }
}
/* ============================================================
   DATE PICKER  (see date-picker.js / date_field.php)
   Replaces <input type="date">, which Chrome renders in the
   browser's UI locale - Arabic-Indic digits, mirrored, and not
   overridable. This one is always English and opens on tap.
   ============================================================ */
.dp { position: relative; }

.dp-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid #d2d8dd;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 15px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dp-trigger:hover { border-color: #b9c2ca; }
.dp.open .dp-trigger,
.dp-trigger:focus-visible {
    border-color: #0054a6;
    box-shadow: 0 0 0 3px rgba(0, 84, 166, .12);
    outline: none;
}
.dp-icon  { color: #0054a6; font-size: 16px; }
.dp-label { flex: 1 1 auto; direction: ltr; text-align: start; }
.dp-caret { color: #9aa5b1; font-size: 12px; transition: transform .18s ease; }
.dp.open .dp-caret { transform: rotate(180deg); }
.dp-empty .dp-label { color: #8a94a0; font-weight: 500; }

.dp-pop {
    display: none;
    position: absolute;
    z-index: 60;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    width: 290px;
    max-width: 100%;
    padding: 12px;
    border: 1px solid #e4e9ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    direction: ltr;            /* the calendar itself is always LTR English */
}
.dp.open .dp-pop { display: block; }

.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.dp-head strong { font-size: 15px; color: #1a1a1a; }
.dp-nav {
    width: 32px; height: 32px;
    border: 1px solid #e4e9ee;
    border-radius: 8px;
    background: #fff;
    color: #444;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.dp-nav:hover { background: #f1f4f7; }

.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #9aa5b1;
    padding-bottom: 4px;
}
.dp-pad { visibility: hidden; }
.dp-day {
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.dp-day:hover:not(:disabled) { background: #eaf1f9; }
.dp-today:not(.dp-sel) { box-shadow: inset 0 0 0 1px #0054a6; }
.dp-sel { background: #0054a6; color: #fff; }
.dp-off { color: #cbd2d9; cursor: not-allowed; text-decoration: line-through; }

@media (max-width: 767px) {
    .dp-trigger { min-height: 54px; font-size: 16px; }
    .dp-pop { width: 100%; }
    .dp-day { font-size: 14px; }
}

/* ===== Guest count ===== */
.gf { margin-top: 14px; }
.gf-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #555;
}
.gf-label i { color: #0054a6; font-size: 13px; }
.gf-select {
    display: block !important;    /* the theme hides selects inside .booking */
    height: auto;
    padding: 12px 14px;
    border: 1px solid #d2d8dd;
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    appearance: auto;
    -webkit-appearance: menulist;
}
.gf-select:focus { border-color: #0054a6; box-shadow: none; outline: none; }
@media (max-width: 767px) { .gf-select { font-size: 16px; } }

/* ===== Sign in with Google ===== */
.google-signin { margin-top: 18px; }
.google-signin-divider {
    position: relative;
    text-align: center;
    margin-bottom: 14px;
    color: #9aa5b1;
    font-size: 13px;
}
.google-signin-divider::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: #e4e9ee;
}
.google-signin-divider span { position: relative; background: #fff; padding: 0 12px; }

.google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
    color: #3c4043 !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.google-signin-btn:hover {
    background: #f7f8f8;
    border-color: #d2d5d9;
    box-shadow: 0 1px 3px rgba(60,64,67,.15);
}
.google-signin-btn svg { flex: 0 0 auto; }