/* ==========================================
   Property Details Page Specific Styles
   ========================================== */

.main-content {
    background-color: #f8f9fa; /* A very light gray for the page background */
    padding-bottom: 4rem;
}

/* --- Section 1: Header & Title --- */
.property-header .breadcrumb-item a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}
.property-header .breadcrumb-item a:hover {
    color: var(--primary-hover);
}
.property-header .breadcrumb-item.active {
    color: var(--text-gray);
}

.property-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-dark);
}

.action-buttons a {
    transition: var(--transition);
    font-size: 0.9rem;
}
.action-buttons a:hover {
    color: var(--primary-color) !important;
}

/* --- Section 2: Image Gallery --- */

.property-gallery {
    position: relative;
    cursor: pointer;
    margin-bottom: 2rem;
}

.gallery-grid {
    display: grid;
    /* ۴ ستون مساوی */
    grid-template-columns: repeat(4, 1fr);
    /* ۲ ردیف با ارتفاع ثابت (ارتفاع کل حدود ۴۰۰ تا ۴۵۰ پیکسل) */
    grid-template-rows: 220px 220px;
    gap: 8px; /* فاصله بین عکس‌ها */
    border-radius: 20px; /* گردی گوشه‌های کل گالری */
    overflow: hidden;
}

.gallery-grid a {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* پر کردن کادر بدون دفرمه شدن */
    transition: transform 0.4s ease, filter 0.3s ease;
}

/* افکت هاور برای همه تصاویر */
.gallery-grid a:hover img {
    transform: scale(1.05);
    filter: brightness(0.9);
}

/* --- تنظیم چیدمان تصاویر (Desktop) --- */

/* تصویر اول (اصلی): سمت راست، تمام ارتفاع را می‌گیرد (۲ ستون عرض، ۲ ردیف ارتفاع) */
.gallery-grid a:nth-child(1) {
    grid-column: 1 / 3; /* در حالت RTL از خط ۱ شروع و تا ۳ ادامه دارد */
    grid-row: 1 / 3;
}

/* تصاویر ۲ تا ۵: خودکار در خانه‌های خالی سمت چپ پر می‌شوند */
/* نیازی به استایل خاصی ندارند، گرید آن‌ها را مرتب می‌کند */

/* دکمه "مشاهده همه" روی آخرین تصویر */
.view-all-btn {
    position: absolute;
    bottom: 20px;
    left: 20px; /* سمت چپ تصویر */
    background-color: var(--white);
    color: var(--text-dark);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
    transition: transform 0.2s ease;
    pointer-events: none; /* کلیک روی دکمه، کلیک روی لینک والد را فعال می‌کند */
}

.gallery-grid a:hover .view-all-btn {
    transform: scale(1.05);
}

/* --- Responsive (Mobile & Tablet) --- */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-rows: 180px 180px; /* ارتفاع کمتر در تبلت */
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        display: block; /* غیرفعال کردن گرید در موبایل */
        height: auto;
        border-radius: 15px;
    }

    /* در موبایل فقط تصویر اول نمایش داده شود */
    .gallery-grid a {
        display: none;
    }
    .gallery-grid a:first-child {
        display: block;
        height: 300px; /* ارتفاع تصویر اصلی در موبایل */
    }

    /* مخفی کردن دکمه دسکتاپ در موبایل */
    .view-all-btn {
        display: none;
    }
}

/* --- Section 3: Main Content Column --- */
.property-details {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 15px;
    border: 1px solid #e9ecef;
}

.host-avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e9ecef;
}

.features-list span {
    color: var(--text-gray);
}
.section-sub-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Amenities Grid */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.2rem;
}

.amenity-item {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.amenity-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    width: 30px;
    margin-left: 12px;
}

/* --- Section 4: Booking Panel --- */
.booking-panel-wrapper {
    position: sticky;
    top: 100px; /* بر اساس ارتفاع هدر تنظیم شود */
}
.booking-panel {
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 2rem;
    background-color: var(--white);
}

.booking-panel .price-amount {
    font-size: 1.8rem;
    font-weight: 700;
}
.booking-panel .price-unit {
    font-size: 1rem;
    color: var(--text-gray);
}
.booking-panel .form-label {
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.booking-panel .form-control, .booking-panel .form-select {
    height: 50px;
    border-radius: 8px;
}
.booking-panel .form-control:focus, .booking-panel .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(39, 104, 106, 0.15);
}

.price-calculation span {
    font-size: 0.95rem;
}

/* --- Section 5: Similar Properties --- */
.similar-properties-section .section-title {
    color: var(--text-dark);
}

/* ==========================================
   Responsive Design for Details Page
   ========================================== */

/* For Tablets */
@media (max-width: 992px) {
    /* Stack content and booking panel */
    .property-details {
        margin-bottom: 2rem;
        padding: 2rem;
    }
    .booking-panel-wrapper {
        position: static;
        top: auto;
    }

    .property-main-title {
        font-size: 2rem;
    }

    .gallery-grid {
        grid-template-rows: 300px 140px; /* تنظیم مجدد ارتفاع گالری برای تبلت */
    }
}

/* For Mobile Devices */
@media (max-width: 768px) {
    /* در موبایل فقط تصویر اصلی نمایش داده می‌شود */
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 280px; /* یک ردیف برای تصویر اصلی */
        height: auto;
    }
    /* تصاویر کوچک با استفاده از کلاس d-md-block در HTML پنهان می‌شوند */

    .property-main-title {
        font-size: 1.7rem;
    }

    .action-buttons {
        width: 100%;
        margin-top: 1rem;
        text-align: right;
    }
    .property-details {
        padding: 1.5rem;
    }
    .booking-panel {
        padding: 1.5rem;
    }
    .amenities-grid {
        grid-template-columns: 1fr; /* امکانات زیر هم قرار می‌گیرند */
    }


    /* داخل @media (max-width: 768px) اضافه شود */

    .amenities-grid {
        /* Adjust minmax for a guaranteed 2-column layout on mobile */
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }

    .modal-amenities-grid {
        /* Ensure modal also has a good layout on mobile */
        grid-template-columns: 1fr; /* Stack items neatly in modal on mobile */
    }

}

/* For Small Mobile Devices */
@media (max-width: 576px) {
    .gallery-grid {
        grid-template-rows: 250px; /* کمی کوچکتر کردن تصویر اصلی */
        border-radius: 15px;
    }

    .host-info {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .features-list {
        font-size: 0.9rem;
    }

    /* مخفی کردن نقطه‌ها بین ویژگی‌ها در موبایل */
    .features-list span.mx-1 {
        display: none;
    }

    .features-list span {
        display: block;
        margin-bottom: 0.25rem;
    }
}


/* --- Section 3.1: Revamped Host Info --- */
.host-info-revamped {
    /* This class replaces the old .host-info */
}

.host-main-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.host-property-title h3 {
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--text-dark);
}

.host-name-mobile {
    font-size: 0.95rem;
    color: var(--text-gray);
}

.host-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e9ecef;
}

.property-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-dark);
    background-color: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 10px;
}

.feature-item i {
    font-size: 1.2rem;
    color: var(--primary-color);
    width: 25px;
    text-align: center;
}



.host-property-title h3 {
    font-size: 1.4rem; /* کمی کوچکتر کردن فونت عنوان در موبایل */
}

.property-features-grid {
    /* اینجا جادو اتفاق می‌افتد: به جای لیست عمودی، یک گرید 2x2 خواهیم داشت */
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.feature-item {
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
}






/* --- Section 3.2: Expandable Description Text --- */
.expandable-text-wrapper {
    /* Initial collapsed height, adjust as needed (e.g., to show 4-5 lines) */
    max-height: 110px;
    overflow: hidden;
    position: relative;
    /* Smooth transition for max-height change */
    transition: max-height 0.5s ease-in-out;
}

/* Adds a subtle fade-out effect at the bottom of the collapsed text */
.expandable-text-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
    transition: opacity 0.3s ease;
    pointer-events: none; /* Allows clicking text 'through' the gradient */
}

/* Styles for the expanded state */
.expandable-text-wrapper.expanded {
    /* A large value that the content will not exceed */
    max-height: 1000px;
}

/* Hide the fade-out effect when expanded */
.expandable-text-wrapper.expanded::after {
    opacity: 0;
}

.expandable-text-wrapper p {
    margin-bottom: 0;
}


/* --- Section 3.3: Enhanced Amenities Section & Modal --- */

/* Overriding default grid to ensure it's responsive on all screen sizes */
.amenities-grid {
    display: grid;
    /* This will create 2 columns on mobile and more on larger screens */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
}

/* We now use divs, so let's ensure proper styling */
.amenity-item {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    gap: 12px;
}

.amenity-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    width: 25px;
    text-align: center;
}

/* Style for unavailable items */
.amenity-item.unavailable {
    color: var(--text-gray);
    text-decoration: line-through;
    opacity: 0.7;
}

.amenity-item.unavailable i {
    color: var(--text-gray);
}


/* --- Modal Specific Styles --- */
.modal-content {
    border-radius: 15px;
    border: none;
}
.modal-header {
    border-bottom: 1px solid #e9ecef;
}
.modal-title {
    font-weight: 600;
}
.modal-body {
    padding: 1rem 2rem 2rem;
}

.modal-amenities-category {
    margin-bottom: 2rem;
}
.modal-amenities-category:last-child {
    margin-bottom: 0;
}

.modal-amenities-category h6 {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
}

.modal-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem 1.5rem;
}


/* --- Section 3.3: Expandable Amenities Section --- */
.expandable-amenities-wrapper {
    /* Adjust height to show desired number of rows initially. ~120px usually shows 2 rows */
    max-height: 120px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease-in-out;
}

/* Fade-out effect at the bottom, same as the description section */
.expandable-amenities-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Expanded state managed by JS */
.expandable-amenities-wrapper.expanded {
    max-height: 1000px; /* A large value to accommodate all items */
}

/* Hide the fade-out effect when expanded */
.expandable-amenities-wrapper.expanded::after {
    opacity: 0;
}

/* The grid styling itself remains responsive */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
}

.amenity-item {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    gap: 12px;
}

.amenity-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    width: 25px;
    text-align: center;
}

.amenity-item.unavailable {
    color: var(--text-gray);
    text-decoration: line-through;
    opacity: 0.7;
}

.amenity-item.unavailable i {
    color: var(--text-gray);
}

/* ===================================================
   Section 3.4: Revamped Rules & Regulations Section
   =================================================== */

.rules-revamped-section {
    /* Main container for the new design */
}

/* --- 1. Timeline Section (Check-in/out) --- */
.rules-timeline {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: #f8f9fa; /* Light background for emphasis */
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.timeline-item {
    flex: 1; /* Each item takes equal space */
    display: flex;
    align-items: center;
    gap: 1rem;
}

.timeline-item i {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.timeline-item-text .title {
    font-size: 0.9rem;
    color: var(--text-gray);
    display: block;
}

.timeline-item-text .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    display: block;
}

/* --- 2. House Rules Checklist Section --- */
.rules-checklist {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.rules-checklist li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid #e9ecef;
}

.rules-checklist li:last-child {
    border-bottom: none;
}

.checklist-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    color: var(--text-dark);
}

.checklist-label i {
    font-size: 1.2rem;
    width: 25px;
    text-align: center;
    color: #555;
}

.checklist-status .status-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.checklist-status.allowed {
    color: #28a745; /* Green */
    font-weight: 500;
}

.checklist-status.not-allowed {
    color: #dc3545; /* Red */
    font-weight: 500;
}


/* --- 3. Policies Accordion Section --- */
.rules-policies-accordion {
    margin-top: 2rem;
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
}

.policy-item {
    border-bottom: 1px solid #e9ecef;
}
.policy-item:last-child {
    border-bottom: none;
}

.policy-header {
    width: 100%;
    background: none;
    border: none;
    text-align: right;
    padding: 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
}

.policy-header:hover {
    color: var(--primary-color);
}

.policy-header::after {
    content: '\f078'; /* FontAwesome chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.policy-header.active::after {
    transform: rotate(180deg);
}

.policy-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease;
    padding: 0 0.5rem;
}

.policy-body p {
    color: #555;
    line-height: 1.8;
    font-size: 0.95rem;
    white-space: pre-wrap; /* Preserves line breaks from DB */
    padding-bottom: 1.5rem;
}

/* --- Responsive adjustments --- */
@media (max-width: 576px) {
    .rules-timeline {
        flex-direction: column;
        gap: 1rem;
    }
}