/****************** GENERAL ******************/
body {
    color: #333;
}
h2, h3 {
    color: #ffa200;
}
h4, .h4 {
    color: #555;
}


a {
    color: #ffa200;
}
a:hover {
    color: #5191FA;
}



a p {
    color: #333;
}
#content {
    background: #f5f5f5;
}
/***************** BOOTSTRAP *****************/
.btn-primary {
    background: none;
    border-color: #5191FA;
    color: #5191FA;
}
.btn-default {
    background: none;
    border-color: #ccc;
    color: #555;
}
.text-primary {
    color: #ffa200;
}
.btn-primary:hover {
    background-color: #07074b;
    border-color: #07074b;
    color: #fff;
}
.label.label-default {
    background: #aaa;
}
blockquote {
    color: #555;
}
.input-group-addon {
    background: #fff;
}
.form-control,
.form-control:focus,
.btn.dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:focus {
    box-shadow: none;
    border-color: #ccc;
    outline: none!important;
}
/****************** HEADERS ******************/
#preHeader {
    background: #07074b;
    color: #fff;
}
#preHeader a {
    color: #fff;
}
#mainHeader {
    background: none;
}
body:not(#page-1) .fixed #mainHeader,
.fixed #mainHeader {
    background: #092049;
}
header:not(.fixed) #mainHeader {
    /*background: transparent;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), transparent);
    background: -o-linear-gradient(rgba(0, 0, 0, 0.5), transparent);
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.5), transparent);
    background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);*/
}
@media (max-width: 991px) {
    #mainHeader, #mainMenu .navbar-nav {
        background: #092049;
    }
}
ul.navbar-nav > li.primary > a.firstLevel {
    color: #fff;
}
ul.navbar-nav > li.primary > a.firstLevel.active,
ul.navbar-nav > li.primary > a.firstLevel:hover,
ul.navbar-nav > li.primary > a.firstLevel:focus {
/*
    border-bottom: 1px solid #fff;
*/
    color: #FF9600;
    background: none;
}
.navbar-default .navbar-toggle .icon-bar {
    background: #fff;
}
.navbar-default .navbar-toggle {
    border-color: #fff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: #07074b;
}
@media(max-width:991px) {
    ul.navbar-nav > li.primary > a.firstLevel.active,
    ul.navbar-nav > li.primary > a.firstLevel:hover,
    ul.navbar-nav > li.primary > a.firstLevel:focus {
        border-bottom: none;
    }
    #mainMenu .navbar-nav li {
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
}
.dropdown-btn {
    color: #fff;
    background: rgba(255,255,255,0.2);
}
@media(min-width:992px) {
	#mainMenu .navbar-nav ul li a {
		border-bottom: 1px solid #ddd;
	}
	#mainMenu .navbar-nav ul > li:last-child a {
		border-bottom: 0;
	}
}
.navbar-nav ul li a {
    color: #888;
}
.navbar-nav ul li a:hover, .navbar-nav ul li.hover > a {
    background: #5191FA;
    color: #fff;
}
ul.navbar-nav > li.primary .dropdown > a,
ul.navbar-nav > li.primary .dropdown {
    color: #fff;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background: none;
    border: none;
}
@media(min-width:992px) {
    .navbar-nav ul {
        background: #fff;
    }
}
#lang-btn {
    background: transparent;
    border: 0;
}
#lang-btn:hover,
#lang-btn:focus {
    color: #ccc;
}
.info-header svg {
    background: #fff;
    color: #5191FA;
}
.searchWrapper {
    color: #888;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.searchWrapper button:hover {
    background: #5191FA;
}
.page-header {
    background-color: rgba(54, 148, 237, 0.3);
    color: #fff;
    border: none;
}
.page-header a, .page-header h1, .page-header p.main-title {
    color: #fff;
}
.breadcrumb {
    background: transparent;
}
/*************** ROYAL SLIDER ****************/
#sliderContainer {
    border-bottom: 8px solid #ccc;
}
#full-width-slider, .infoBlock a, .royalSlider .infoBlock h1, .royalSlider .infoBlock h2 {
    color: #fff;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}
.photosBy {
    background: #fff;
    color: #000;
} 
.photosBy a {
    color: #000;
}
#sliderContainer .btn-primary {
    border-color: #fff;
    color: #fff;
}
#sliderContainer .btn-primary:hover {
    border-color: #5191FA;
}
/************** BOOKING SEARCH ***************/
.booking-search {
    color: #fff;
}
#search-home {
   // background: rgba(0, 0, 0, 0.4);
     background: #ffc200;
    
}
#search-page {
    background: #5191FA;
}
.booking-search .form-control:focus,
.booking-search .btn.dropdown-toggle,
.booking-search .bootstrap-select .dropdown-toggle:focus,
.booking-search .btn-group .dropdown-toggle {
    box-shadow: none;
    border-color: #fff;
    outline: none!important;
}
.booking-search .input-group-addon,
.booking-search .form-control,
.booking-search .input-wrapper {
    background: #fff;
    border-color: #fff;
    color: #333;
}
#search-home .input-group,
#search-home .input-group-addon,
#search-home .input-wrapper {
    background: #fff;
}
#search-home .input-group .form-control {
    background: none;
}
.booking-search .input-wrapper {
    border: none;
}
.booking-search .input-wrapper svg {
    color: #ccc;
    border: 0;
}
.booking-search .form-control::-webkit-input-placeholder {
    color: #333;
}
.booking-search .form-control::-moz-placeholder {
    color: #333;
}
.booking-search .form-control:-ms-input-placeholder {
    color: #333;
}
.booking-search .form-control:-moz-placeholder {
    color: #333;
}
.booking-search .btn-primary {
    font-weight: bold;
    border: 1px solid #fff;
    color: #fff;
}
.booking-search .btn-primary:hover {
    border: 1px solid #5191FA;
}
.booking-search .alert-danger .form-control:focus,
.booking-search .alert-danger .btn.dropdown-toggle:focus,
.booking-search .alert-danger .bootstrap-select .dropdown-toggle:focus,
.booking-search .alert-danger .btn-group.open .dropdown-toggle,
.booking-search .alert-danger .btn-group.open .dropdown-toggle,
.booking-search .alert-danger .input-wrapper {
    border-color: #B70000;
    color: #B70000;
}
.datepicker-wrapper .fa-long-arrow-right {
    border: none;
}
.booking-search .alert-danger {
    background: none;
    border: none;
}
.booking-search .alert-danger .datepicker-wrapper svg {
    border-color: #fff;
    color: #B70000;
}
.booking-search .alert-danger .field-notice {
    color: #B70000;
}
.booking-search .alert-danger .form-control::-webkit-input-placeholder {
    color: #B70000;
}
.booking-search .alert-danger .form-control::-moz-placeholder {
    color: #B70000;
}
.booking-search .alert-danger .form-control:-ms-input-placeholder {
    color: #B70000;
}
.booking-search .alert-danger .form-control:-moz-placeholder {
    color: #B70000;
}
.jquery-live-search {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.jquery-live-search a {
    color: #333;
}
/************** ADVANCED FILTERS *************/
.noUi-connect {
    background: #f0ad4e;
}
.nouislider-wrapper {
	color: #fff;
}
.noUi-tooltip {
	border: none;
	background: transparent;
	color: #fff;
}
input.slider-target {
	background: transparent;
	border: none;
	color: #fff;
}
/***************** HOMEPAGE ******************/
.iconBlocHome svg {
    color: #ffa200;
}
/************ ISOTOPE / PORTFOLIO ************/
.isotopeWrapper.loaded {
    background: none;
}
.isotopeContent {
    background: #fff;
    border: 0;
}
.more-action figcaption p {
    color: #fff;
}
.more-link:hover .more-action {
    background: rgba(54, 148, 237, 0.3);
}
.more-icon svg {
    color: #ffa200;
    background: #fff;
}
.more-content .more-descr {
    background: rgba(83, 129, 186, 0.8);
    color: #fff;
}
.more-link:hover .more-content .more-descr {
    background: none;
}
.lazy-more-btn {
    background: #aaa!important;
    color: #fff!important;
}
.lazy-more-btn:hover {
    background: #fff!important;
    color: #333!important;
}
/*************** MISCELLANEOUS ***************/
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #ffa200;
}
.hotBox {
    background: #ffa200;
    color: #fff;
}   
.hotBox h2,
.hotBox a {
    color: #fff;
}
#pages-list li a {
    border: 1px solid #ddd;
    background-color: #aaa;
    color: #fff;
}
#pages-list li a:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}
#content h1 {
    color: #ffa200;
}
aside .widget-title {
    color: #ffa200;
}
aside h3 {
    font-size: 16px;
    color: #555;
}
.more-content {
    background: rgba(50, 50, 50, 0.15);
    color: #fff;
}
.more-content h3 {
    color: #fff;
    background: rgba(0,0,0,0.15);
    border: 2px solid #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.more-btn {
    background: linear-gradient(to top, #F5F5F5 50%, transparent);
}
.boxed {
    background: #fff;
}
.text-center h1::after, h1.text-center::after, [style*="text-align: center"] h1::after, h1[style*="text-align: center"]::after, .text-center h2::after, h2.text-center::after, [style*="text-align: center"] h2::after, h2[style*="text-align: center"]::after, .text-center h3::after, h3.text-center::after, [style*="text-align: center"] h3::after, h3[style*="text-align: center"]::after {
    background: #ffa200;
}
.facility-icon {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    color: #777;
}
.facility-icon a {
    color: #777;
}
@media (min-width: 768px) {
    .booking-result > .sep {
        border-left: 1px solid #ddd;
    }
}
.form-0 > .booking-result {
	box-shadow: 0 0 8px rgba(81, 145, 250, 0.8);
}
.booking-result .boxed {
    background: #fff;
}
.booking-result .booking-summary {border-bottom
    background: #E9F0FA;
}
.booking-result .legend {
    background: #E8E8E8;
    color: #555;
}
.booking-result svg.fa-star {
    color: #FF9600;
}
.activity-result .hb-calendar {
    background: #f2f2f2;
}
.room-result .price span,
.activity-result .price:not(.text-primary) span {
    color: #90CC90;
}
#booking-breadcrumb .breadcrumb-item {
    background: #e8e8e8;
}
#booking-breadcrumb .breadcrumb-item.done {
    background: #B0D3F2;
    color: #fff;
}
#booking-breadcrumb .breadcrumb-item.active {
    background: #07074b;
    color: #fff;
}
.checkbox-icon {
    border: 2px solid #07074b;
}
.activity-result .checkbox-icon:before {
    color: #fff;
}
.activity-result.active .checkbox-icon:before {
    color: #07074b;
}
.session-date-caption {
    background-color: #a6e0bf;
}
.activity-result .hb-d-start,
.activity-result .hb-d-end {
    background: #EA8A8A!important;
}
.activity-result .hb-day.hb-d-free:hover,
.session-date-caption:hover {
    background: #4edb87!important;
    color: #fff;
}
.activity-result .hb-day.hb-d-free.active,
.session-date-caption.active {
    background: #FF9600!important;
    color: #fff;
}
/******************* FOOTER ******************/
#footerRights {
    background: #000;
}
footer {
    background: #333;
    color: #fff;
}
@media (max-width: 991px) {
    footer {
        background: #555;
    }
}
#mainFooter {
    background: #07074b;
}
footer a, footer h3, footer .widget-title {
    color: #fff;
}
footer p.lead {
    color: #5191FA;
}
#toTop {
    background: #fff;
    border: 1px solid #ddd;
}
#toTop:hover {
    background: #07074b;
    color: #fff;
}
footer .searchWrapper .form-control {
    color: #fff;
}
footer .searchWrapper .form-control::-webkit-input-placeholder {
    color: #ddd;
}
footer .searchWrapper .form-control:-moz-placeholder {
    color: #ddd;
}
footer .searchWrapper .form-control::-moz-placeholder {
    color: #ddd;
}
footer .searchWrapper .form-control:-ms-input-placeholder {
    color: #ddd;
}
/*********** LOG IN / SIGN UP FORMS **********/
a.fblogin {
    background: linear-gradient(#2953ad, #234ca2);
    color: #fff;
}
a.fblogin:hover {
    color: #fff;
}
/**************** PAYMENT FORM ***************/
button[name="payment_type"] .fa-paypal {
    color: #00447E;
}
button[name="payment_type"] .fa-credit-card {
    color: #3787DC;
}
button[name="payment_type"] .fa-envelope {
    color: #B9252B;
}
button[name="payment_type"] .fa-building {
    color: #FF9900;
}
/******************* LOADER ******************/
#loader-wrapper {
    background: #fff;
}
#loader {
    border-top-color: #888;
}
#loader:before {
    border-top-color: #07074b;
}
#loader:after {
    border-top-color: #ffa200;
}
/*************** WEATHER WIDGET **************/
.simple-weather i[class^="w-icon-"],
.simple-weather .temp {
    color: #333;
}









/* =============================================== */
/* ====== STYLES FOR EXTRA SERVICES SECTION ====== */
/* =============================================== */

/* The main container for the services list */
.extra-services-container {
    background-color: #f7f9fc; /* لفية رمادية زرقا  جدا */
    border: 1px solid #e3eaf3;
    padding: 15px 25px 25px 25px;
    border-radius: 8px;
}

/* The title "Extra Services" */
.extra-services-container > legend {
    color: #07074b; /* أزرق داكن ن ملفك */
    font-weight: bold;
    font-size: 22px;
    border-bottom: 2px solid #ffa200; /* خط سفلي أصفر/رت من ملك */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* The card for each individual service */
.service-card {
    background: #fff;
    border: 1px solid #ddd;
    border-left: 4px solid #5191FA; /* خط زر مميز عى ايسار */
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.service-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-left-color: #ffa200; /* غيي لون خ عند لمرو إلى لف */
}

/* Part with title and description */
.service-details {
    flex-grow: 1;
}

.service-title-label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    margin-bottom: 5px; /* مسفة بسي قبل و */
}

.service-title-label input[type="checkbox"] {
    margin-right: 12px;
    /* لتكبير جم الـ checkbox */
    width: 18px;
    height: 18px;
    accent-color: #07074b; /* غ لو ا checkbox دم يتم تدي */
}

.service-description,
.service-readmore {
    display: block;
    color: #777;
    padding-left: 30px; /* لماة النص ع العنوان */
    font-size: 13px;
    line-height: 1.4;
}
.service-readmore a {
    color: #5191FA;
    text-decoration: none;
}
.service-readmore a:hover {
    text-decoration: underline;
}

/* Part with quantity controls */
.service-quantity {
    padding: 0 15px;
}

.service-quantity .input-group {
    max-width: 120px;
}

/* Part with the price */
.service-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #07074b;
    min-width: 90px;
    text-align: right;

    display: flex;             /*  تفعيل Flexbox  */
    justify-content: flex-end; /*  اذا العنار  اليمين (النهاي) */
    align-items: center;       /*  حاذ العناصر مودي في الصف  */
    gap: 0.3em;

}

/* Responsive adjustments */
/* =============================================== */
/* ====== STYLES FOR MOBILE (RESPONSIVE) - V2 ====== */
/* =============================================== */

@media (max-width: 767px) {
    .service-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .service-details, .service-quantity, .service-price {
        width: 100%;
        text-align: left;
    }

    /* 
     *  <<<<<  بدة التعديل جذي لمشكلة قل الكية  >>>>>
     */
    .service-quantity {
        padding: 15px 0 !important; /* مساف اة فقط،  يوجد margin خارجي */
        margin: 0 !important;
    }

    /* لحاوية لئسي لأدوت لتك بالكمية */
    .service-quantity .input-group {
        display: flex !important; /* فرض عيل Flexbox */
        width: 100% !important;   /* يج أن تأخ العض كمل للحاوية */
        max-width: 220px !important; /* يمك زيادة لر اأقصى ياً */
        margin: 0 auto !important; /* تويطها */
    }

    /* زر النقصان (-) */
    .service-quantity .input-group .input-group-btn:first-child {
        width: 25%; /* د عرض ثاب كنسبة مو */
    }
    
    /* زر زيادة (+) */
    .service-quantity .input-group .input-group-btn:last-child {
        width: 25%; /* دي عرض ابت كنسبة ة */
    }
    
    /* كلا لزن يجب أ يحتويا ع لعنصر  المنتصف */
    .service-quantity .input-group .btn {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* حقل إدا الرق نه */
    .service-quantity .input-group .form-control.input-number {
        width: 50% !important; /* الء الأكب ن المساحة يهب لحل اإخل */
        flex-grow: 1;          /* السماح له بالتمدد ذ لزم الأ */
        height: auto !important; /* السماح ارته ليتناسب مع الأزار */
        text-align: center !important;
        /* إالة ي حدود قد تسب ش في اعرض */
        border-radius: 0;
    }
    /* <<<<<  نهاية التل الذري  >>>>> */
    
    .service-price {
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid #eee;
        font-size: 1.2em;
        text-align: right;
 	justify-content: flex-end !important; 
    }
}




/* Styling for Hotel Tags with Animation */
.tag-container {
    padding: 5px 0;
}
.tag-item {
    display: inline-block;
    /*background-color: #f0f0f0;*/
    background-color: #53ceff;
    color: #555;
    padding: 4px 12px;
    margin: 3px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #ddd;
    
    /*  <<<<<  بداي لإضفات الجديدة  >>>>> */
    position: relative; /*  ضروري لحك الصعد  */
    top: 0;             /*  البدء ن الموضع لأصلي  */
    transition: all 0.2s ease-in-out; /*   الأثير على كل صئص  */
    /*  <<<<<  نهاية الضافا الجديدة  >>>>> */
}

.tag-item:hover {
    background-color: #07074b;
    color: #fff;
    border-color: #07074b;
    
    /*  <<<<<  داي الإضافات لجيد  >>>>> */
    top: -2px; /*  تريك الوم للأعلى بمقدار 2 بكسل  */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*  إضافة ظ خفف ليعط إحساساً بالارتفع  */
    /*  <<<<<  نهاية الت الجديد  >>>>> */
}




/************************************************************/
/**********  إضافة إط لتميي صناق الفنادق  **********/
/************************************************************/

/*
 * نستهدف لكاس booking-result لإضف لإطار واظ
*/
.booking-result {
    border: 2px solid #ffc200; /*  اإط باللو امطلب وبسماكة 2 بسل  */
    border-radius: 8px;       /*  ع حواف لإار دائرية بشك ناعم  */
    padding: 15px;            /*  لضمان وود مساف بي المحتوى ولطر  */
    background-color: #fff;   /*  للتد من  الخلفة بضا دائماً  */
    box-shadow: 0 5px 15px rgba(0,0,0,0.07); /*  ضفة ظل خفي ليعطي عقاً للتصمم  */
    transition: all 0.2s ease-in-out; /*  لإضافة كة ناعمة عند الـ hover  */
}

/*
 *  إضف تثير يط عند ور الموس ق الصندوق
*/
.booking-result:hover {
    border-color: #e6ac00; /*  تغيير لن الإطار إل درجة غم قليلاً  */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /*  زيادة الظ ليعي حاسا بالارتفاع  */
    transform: translateY(-2px); /*  حريك الصندو ألى قليلاً  */
}



/************************************************************/
/**********  (الحل الهائي) إصلاح بطاقة الفندق   **********/
/************************************************************/

/* 
 *  الخطوة 1: نجعل البطاقة نفسها مرة لنتحكم بمحتواه
*/
.isotopeWrapper .isotope-item .isotopeInner {
    height: 100%; /*  للتأكد من أن البطاقة تأخذ الرتفاع الكامل  */
    display: flex;
    flex-direction: column; /*  لجعل الحتوى يترتب عموديً  */
}

/* 
 *  الخطة 2: نجعل حاوية الحتوى (النص والزر) مرنة أيضاً
*/
.isotopeWrapper .isotope-item .isotopeContent {
    flex-grow: 1; /*  هذا هو الأمر الأه: يجعل هذه الحاوي تتمدد وتملأ أي ماحة فارغة  */
    
    display: flex;
    flex-direction: column; /*  يجعل ما بداخلها (العنوان، الوسوم، منطقة العر) يترتب عمودياً  */
}

/* 
 *  الخطوة 3: هذا هو الحل السري لمشكلة الزر
 *  نحن نستهدف الصف الذي يحتوي على السر والزر
*/
.isotopeWrapper .isotope-item .isotopeContent .row {
    margin-top: auto; /*  هذا الأمر يدفع ذا الصف إلى أسفل لحاوية دائماً  */
}






/************************************************************/
/**********  (احل النهائي) توحيد تصميم كل البطاقا   **********/
/************************************************************/

/* 
 *  نستهدف كل أنواع الباقات في الموقع
*/

.booking-result:hover,
.isotopeItem:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: #ddd;
}

/* 
 *  نوحد تصميم منطقة السعر والزر ي كل البطاقات
*/
.booking-result .row > .col-xs-6:last-child,
.isotopeContent .row > .col-xs-6:last-child {
    text-align: right; /* نجعل لزر يلتصق باليمي */
}

/* 
 *  نوحد تميم كل الأزرار داخل البطاقات
*/
.booking-result a.btn,
.isotopeContent a.btn,
.isotopeContent .btn {
    background-color: #07074b !important;
    color: #ffffff !important;
    border: 1px solid #07074b !important;
    border-radius: 5px !important;
    padding: 8px 15px !important;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

/*  تأثير hover موح لكل الأزرار  */
.booking-result a.btn:hover,
.isotopeContent a.btn:hover,
.isotopeContent .btn:hover {
    background-color: #ffffff !important;
    color: #07074b !important;
}






/************************************************************/
/**********  (النسخة النهائية) تنسيق الفيديو المتجاوب   **********/
/************************************************************/

/* 
 *  1. الحاوية التي تحيط بالفيديو: نحدد لها نسبة العرض إلى الارتفاع
*/
.video-responsive-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* هذه هي نسبة 16:9 للشاشات العريضة */
    
    /* (إضافات تجميلية) */
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* 
 *  2. الايفريم نفسه: نجعله يملأ الحاوية بالكامل
*/
.video-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}