:root {

    /* ✨✨ [تم التعديل هنا] ✨✨ */

    --primary-color: #0062cc; /* درجة أزرق أغمق لتباين أفضل */

    --primary-hover: #0050a6; /* درجة أغمق للـ hover لتتناسب مع اللون الجديد */

    --secondary-color: #6c757d;

    --success-color: #198754;

    --light-bg: #f8f9fa;

    --dark-bg: #212529;

    --text-dark: #343a40;

    --text-light: #f8f9fa;

    --border-color: #dee2e6;

    --font-family: 'Cairo', sans-serif;

    --box-shadow: 0 10px 30px rgba(0, 0, 0, .07);

    --border-radius: 12px;

    --star-color: #ffc107

}



body {

    font-family: var(--font-family);

    background-color: #fff;

    color: var(--text-dark);

    line-height: 1.7;

    direction: rtl;

    text-align: right

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: 700

}



a {

    text-decoration: none

}



.section-padding {

    padding: 80px 0

}



.section-title {

    margin-bottom: 4rem;

    font-weight: 900;

    color: var(--text-dark)

}



.section-title span {

    color: var(--primary-color)

}



.navbar {

    transition: all .4s ease-out;

    padding: 20px 0

}



.navbar.scrolled {

    background-color: rgba(255, 255, 255, .85);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    padding: 10px 0;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .05)

}



.navbar-brand {

    font-weight: 700;

    font-size: 1.5rem

}



.navbar-nav .nav-link {

    font-weight: 500;

    color: var(--text-dark);

    margin: 0 10px;

    transition: color .2s

}



.navbar-nav .nav-link.active,

.navbar-nav .nav-link:hover {

    color: var(--primary-color)

}



.navbar .btn-primary {

    border-radius: 50px;

    padding: 10px 25px;

    font-weight: 700;

    box-shadow: 0 4px 15px rgba(0, 123, 255, .2);

    transition: all .3s

}



.navbar .btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 123, 255, .3)

}



.hero-section {

    position: relative;

    height: 70vh;

    min-height: 600px;

    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url(https://images.unsplash.com/photo-1507525428034-b723a9ce6890?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80) no-repeat center center/cover;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff

}



.hero-content h1 {

    font-size: 3.5rem;

    font-weight: 900;

    text-shadow: 0 2px 4px rgba(0, 0, 0, .5)

}



.hero-content p {

    font-size: 1.25rem;

    max-width: 600px;

    margin: 1rem auto 2.5rem;

    text-shadow: 0 1px 3px rgba(0, 0, 0, .5)

}



.search-filter-container {

    background: #fff;

    border-radius: 50px;

    padding: 10px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, .15);

    max-width: 800px;

    margin: 0 auto

}



.search-filter-form {

    display: flex;

    align-items: center;

    width: 100%

}



.search-filter-form .form-group {

    flex: 1;

    position: relative;

    padding: 0 20px

}



.search-filter-form .form-group:not(:last-child) {

    border-right: 1px solid var(--border-color);

    border-left: none

}



.search-filter-form .form-control,

.search-filter-form .form-select {

    border: none;

    background: transparent;

    height: 50px;

    padding: 0;

    box-shadow: none!important;

    width: 100%

}



.search-filter-form .btn-search {

    background-color: var(--primary-color);

    color: #fff;

    border-radius: 50px;

    height: 50px;

    width: 50px;

    font-size: 1.2rem;

    border: none;

    flex-shrink: 0;

    transition: all .2s

}



.search-filter-form .btn-search:hover {

    background-color: var(--primary-hover)

}



.destination-card {

    position: relative;

    border-radius: var(--border-radius);

    overflow: hidden;

    height: 350px;

    box-shadow: var(--box-shadow)

}



.destination-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .4s ease

}



.destination-card:hover img {

    transform: scale(1.1)

}



.destination-card .overlay {

    position: absolute;

    top: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);

    display: flex;

    align-items: flex-end;

    padding: 1.5rem

}



.destination-card .destination-name {

    color: #fff;

    font-weight: 700;

    font-size: 1.5rem;

    transform: translateY(10px);

    opacity: 0;

    transition: all .4s ease

}



.destination-card:hover .destination-name {

    transform: translateY(0);

    opacity: 1

}



.listing-card-v2 {

    background-color: #fff;

    border-radius: var(--border-radius);

    box-shadow: var(--box-shadow);

    overflow: hidden;

    transition: all .3s ease;

    display: flex;

    flex-direction: column;

    height: 100%

}



.listing-card-v2:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .1)

}


.listing-card-v2 .img-container {
    position: relative;
    /* النسبة = (الارتفاع / العرض) * 100 = (225 / 400) * 100 = 56.25% */
    padding-top: 56.25%; 
    background-color: #eee; /* لون خلفية مؤقت يظهر قبل تحميل الصورة */
    height: 0; /* ضروري لعمل padding-top trick */
    overflow: hidden;
}

.listing-card-v2 .img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* يضمن ملء المساحة دون تشويه */
}



.listing-card-v2 .category-badge {

    position: absolute;

    top: 15px;

    right: 15px;

    background-color: rgba(0, 0, 0, .6);

    backdrop-filter: blur(5px);

    color: #fff;

    padding: 5px 12px;

    border-radius: 50px;

    font-size: .8rem

}



.listing-card-v2 .price-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    background: var(--primary-color);

    color: #fff;

    padding: 8px 15px;

    border-radius: 50px;

    font-size: 1rem;

    font-weight: 700

}



.listing-card-v2 .price-badge small {

    font-size: .75rem;

    font-weight: 400

}



.listing-card-v2 .card-content {

    padding: 1.5rem;

    display: flex;

    flex-direction: column;

    flex-grow: 1

}



.listing-card-v2 .location-info {

    color: var(--secondary-color);

    font-size: .9rem;

    margin-bottom: .5rem

}



.listing-card-v2 .card-title {

    font-weight: 700;

    font-size: 1.25rem;

    margin-bottom: .5rem

}



.listing-card-v2 .card-title a {

    color: var(--text-dark)

}



.listing-card-v2 .card-title a:hover {

    color: var(--primary-color)

}



.listing-card-v2 .rating-and-company {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: .9rem;

    color: var(--secondary-color);

    margin-bottom: 1rem

}



.listing-card-v2 .star-rating {

    color: #ffc107

}



.listing-card-v2 .card-footer-actions {

    margin-top: auto;

    padding-top: 1rem;

    border-top: 1px solid var(--border-color)

}



.listing-card-v2 .btn-group .btn {

    border-radius: 0

}



.listing-card-v2 .btn-group .btn:first-child {

    border-top-right-radius: .25rem;

    border-bottom-right-radius: .25rem

}



.listing-card-v2 .btn-group .btn:last-child {

    border-top-left-radius: .25rem;

    border-bottom-left-radius: .25rem

}



.star-rating {

    color: #ffa500

}



.page-header-overlap {

    position: relative;

    height: 40vh;

    min-height: 350px;

    background-size: cover;

    background-position: center;

    border-radius: 0 0 var(--border-radius) var(--border-radius);

    margin-bottom: -100px;

    display: flex;

    align-items: flex-end;

    padding: 2rem

}



.page-header-overlap::after {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);

    border-radius: 0 0 var(--border-radius) var(--border-radius)

}



.main-content-card {

    position: relative;

    z-index: 2;

    background-color: #fff;

    border-radius: var(--border-radius);

    box-shadow: var(--box-shadow);

    padding: 2rem

}



.gallery-container .main-image img {

    width: 100%;

    height: auto;

    max-height: 500px;

    object-fit: cover;

    border-radius: var(--border-radius);

    margin-bottom: 1rem

}



.gallery-container .thumbnail-images {

    display: flex;

    gap: 10px;

    flex-wrap: wrap

}



.gallery-container .thumbnail-images img {

    width: 100px;

    height: 75px;

    object-fit: cover;

    border-radius: 8px;

    cursor: pointer;

    border: 3px solid transparent;

    transition: border-color .2s

}



.gallery-container .thumbnail-images img.active,

.gallery-container .thumbnail-images img:hover {

    border-color: var(--primary-color)

}



.listing-tabs .nav-link {

    font-weight: 700;

    color: var(--secondary-color)

}



.listing-tabs .nav-link.active {

    color: var(--primary-color);

    border-color: var(--primary-color)!important;

    border-bottom: 2px solid var(--primary-color)!important;

    background-color: transparent

}



.listing-tabs .tab-content {

    padding-top: 1.5rem;

    line-height: 1.8

}



.company-info-card {

    display: flex;

    align-items: center;

    gap: 2rem

}



.company-info-card .logo-container {

    flex-shrink: 0

}



.company-info-card .logo {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    object-fit: cover;

    border: 5px solid #fff;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .1)

}



.company-info-card .company-details h1 {

    margin-bottom: .5rem

}



.company-info-card .contact-info span {

    margin-right: 1.5rem;

    color: var(--secondary-color)

}



.company-info-card .contact-info i {

    color: var(--primary-color);

    margin-left: 8px

}



.footer {

    background-color: #2b3a5e;

    color: rgba(255, 255, 255, .7);

    padding: 60px 0 20px

}



.footer h5 {

    color: #fff;

    font-weight: 700;

    margin-bottom: 1.5rem

}



.footer a,

.footer p {

    color: rgba(255, 255, 255, .7);

    transition: color .2s

}



.footer a:hover {

    color: #fff

}



.footer ul {

    list-style: none;

    padding: 0

}



.footer ul li {

    margin-bottom: 10px

}



.footer-bottom {

    border-top: 1px solid #343a40;

    padding-top: 20px;

    margin-top: 40px

}



.footer .social-icons a {

    font-size: 1.2rem;

    margin: 0 10px

}



.newsletter-form .form-control {

    background-color: #343a40;

    border-color: #495057;

    color: #fff

}



.newsletter-form .btn {

    background-color: var(--primary-color);

    border-color: var(--primary-color)

}



.ad-banner-section {

    padding: 40px 0;

    background-color: var(--light-bg)

}



.ad-banner-section img {

    width: 100%;

    border-radius: var(--border-radius);

    box-shadow: var(--box-shadow);

    transition: transform .3s ease

}



.ad-banner-section a:hover img {

    transform: translateY(-5px)

}



.search-page-header {

    background-color: var(--dark-bg);

    color: #fff;

    padding: 2rem 0;

    margin-bottom: 2.5rem

}



.search-page-header .search-filter-form {

    max-width: none;

    background: none;

    box-shadow: none;

    padding: 0

}



.search-page-header .form-control,

.search-page-header .form-select {

    background-color: rgba(255, 255, 255, .1);

    border-color: rgba(255, 255, 255, .2);

    color: #fff;

    height: 45px

}



.search-page-header .form-select option {

    color: #000

}



.search-page-header .btn-search {

    height: 45px;

    width: auto;

    padding: 0 2rem

}



.filter-sidebar .card {

    border: none;

    box-shadow: var(--box-shadow);

    border-radius: var(--border-radius);

    margin-bottom: 1.5rem

}



.filter-sidebar .card-header {

    background-color: transparent;

    border-bottom: 1px solid var(--border-color);

    font-weight: 700

}



.price-range-slider .range-values {

    display: flex;

    justify-content: space-between;

    font-weight: 500

}



.card-column {

    display: flex;

    flex-direction: column

}



.card-stretch {

    display: flex;

    align-items: stretch

}



.card-stretch>.listing-card-v2 {

    width: 100%

}



.listings-section .row,

.related-listings-section .row {

    justify-content: center

}