/* --- Safa Park Hostel: Master Production CSS --- */

:root {
    --gold: #D4AF37;
    --gold-hover: #B8860B;
    --black: #0a0a0a;
    --dark-grey: #121212;
    --white: #ffffff;
    --glass: rgba(10, 10, 10, 0.9);
}

/* --- Global Reset & Stability --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* CRITICAL: Stops the side-to-side scrolling */
    position: relative;
    font-family: 'Montserrat', sans-serif;
    color: var(--white);
    background-color: var(--black);
}

/* --- Bilingual & Typography --- */
[dir="rtl"] { font-family: 'Amiri', serif; }
[dir="rtl"] .carousel-caption { text-align: right; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

.cinzel { font-family: 'Cinzel', serif; }
.text-gold { color: var(--gold) !important; }
.py-huge { padding: 100px 0; }
.ls-3 { letter-spacing: 3px; }

/* --- Navigation & Mobile Toggle --- */
.main-nav { 
    padding: 12px 0; 
    background: var(--glass); 
    backdrop-filter: blur(15px); 
    border-bottom: 1px solid rgba(212, 175, 55, 0.3); 
    z-index: 2000; 
    width: 100%;
}

.nav-link { font-weight: 700; color: var(--white) !important; letter-spacing: 1px; transition: 0.3s; }
.nav-link:hover { color: var(--gold) !important; }

.navbar-toggler { 
    border: 1px solid var(--gold) !important; 
    padding: 8px; 
    border-radius: 0; 
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(212, 175, 55, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

/* --- Hero Cinematic Carousel --- */
@keyframes kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.hero-carousel, .carousel-inner, .carousel-item { height: 100vh; width: 100%; background: #000; overflow: hidden; }
.hero-img { height: 100vh; width: 100%; object-fit: cover; animation: kenburns 4s linear infinite alternate; }
.hero-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(to right, rgba(0,0,0,0.8) 10%, transparent 90%); 
    z-index: 1; 
}
.carousel-caption { z-index: 2; top: 0; bottom: 0; display: flex !important; align-items: center; text-align: left; }

/* --- Section Backgrounds --- */
.section-dark { background: var(--black); }
.section-gradient { background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%); }
.overflow-hidden { overflow: hidden; }

/* --- Cards & Components --- */
.room-box, .service-card-premium, .room-card-premium { 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(212, 175, 55, 0.2) !important; 
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

.room-box:hover, .service-card-premium:hover, .room-card-premium:hover { 
    transform: translateY(-10px); 
    border-color: var(--gold) !important; 
    background: rgba(212, 175, 55, 0.1); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* --- Image Overlap Stack --- */
.img-stack { position: relative; }
.sub-img { 
    position: absolute; bottom: -30px; left: -30px; width: 60%; 
    border: 5px solid var(--gold); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

/* --- Form Controls --- */
.contact-form .form-control, .booking-card .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: white;
    border-radius: 0;
    padding: 12px;
}

.contact-form .form-control:focus, .booking-card .form-control:focus {
    border-color: var(--gold);
    box-shadow: none;
    background: rgba(212, 175, 55, 0.1);
}

.error-msg { color: #ff4d4d; font-size: 0.75rem; margin-top: 5px; height: 15px; }
.is-invalid { border-color: #ff4d4d !important; }

/* --- Gallery & Lightbox --- */
.gallery-img-wrap { position: relative; overflow: hidden; background: #000; border: 1px solid rgba(212, 175, 55, 0.1); }
.gallery-img-wrap img { transition: transform 0.6s ease; width: 100%; height: 300px; object-fit: cover; }
.img-hover-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.4s; border: 2px solid var(--gold);
}
.gallery-item:hover .img-hover-overlay { opacity: 1; }
.gallery-item:hover img { transform: scale(1.1); }

/* --- Map & Price Tags --- */
.map-container iframe { filter: grayscale(100%) invert(90%) contrast(110%); transition: 0.6s ease; }
.map-container:hover iframe { filter: grayscale(0%) invert(0%); }
.room-price-tag { position: absolute; bottom: 0; right: 0; z-index: 10; font-size: 0.9rem; background: var(--gold); color: #000; font-weight: bold; padding: 5px 15px; }
[dir="rtl"] .room-price-tag { right: auto; left: 0; }

/* --- Buttons --- */
.btn-royal { background: var(--gold); color: white; border: none; padding: 12px 35px; font-weight: 700; transition: 0.3s; border-radius: 0; }
.btn-royal:hover { background: var(--gold-hover); transform: translateY(-3px); color: white; }

/* --- Footer --- */
.main-footer .footer-small-links a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s ease;
    display: inline-block;
    opacity: 0.7;
}
.main-footer .footer-small-links a:hover { color: var(--gold) !important; opacity: 1; transform: translateX(5px); }

/* --- MOBILE RESPONSIVE FIXES --- */
@media (max-width: 991px) {
    .hero-carousel, .carousel-item { height: 75vh; }
    .py-huge { padding: 60px 0; }
    
    /* STOPS HORIZONTAL OVERFLOW */
    .img-stack { 
        position: relative; 
        margin-top: 50px; 
        text-align: center; 
    }
    .img-stack img { 
        position: relative !important; 
        left: 0 !important; 
        bottom: 0 !important; 
        width: 100% !important; 
    }
    .img-stack .sub-img { 
        width: 70% !important; 
        margin: -50px auto 0 auto; 
        display: block; 
    }

    .navbar-collapse { 
        background: var(--black); 
        padding: 20px; 
        border-top: 1px solid var(--gold); 
    }
    .nav-link { padding: 12px 0 !important; border-bottom: 1px solid rgba(212, 175, 55, 0.1); }
    
    .display-4, .display-1 { font-size: 2.2rem !important; }
    
    /* Force stack for services */
    .service-full-card { flex-direction: column !important; }
}

@media (max-width: 768px) {
    .gallery-img-wrap img { height: 200px; }
}

/* --- Success Page Animation --- */
.success-icon i {
    animation: successPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
/* --- new google photos --- */

.gallery-item .gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .transition-img {
    transform: scale(1.1);
}

.btn-outline-gold {
    border: 1px solid #c5a47e; /* Using your gold variable */
    color: #c5a47e;
    letter-spacing: 2px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-outline-gold:hover {
    background: #c5a47e;
    color: #fff;
}

.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }



/* extra rooms*/
.extra-room-card {
    height: 250px;
}

.extra-room-card .card-caption-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.extra-room-card:hover .card-caption-overlay {
    opacity: 1;
    transform: translateY(0);
}

.extra-room-card:hover .transition-img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

.divider-gold {
    height: 2px;
    width: 0;
    background: #c5a47e; /* Your gold color */
    transition: width 0.4s ease 0.2s;
}

.extra-room-card:hover .divider-gold {
    width: 40px;
}