/* Imports: Poppins/Playfair (En) + Cairo/Tajawal (Ar) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@300;400;500;700&display=swap');

:root {
    --primary-dark: #0f172a; 
    --accent-gold: linear-gradient(135deg, #969799, #F2F2F2, #969799);
    --accent-flat: #D71B72;
    --light-bg: #f8fafc;
    --text-body: #475569;
}

/* === ENGLISH (DEFAULT) === */
body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-body);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, .navbar-brand {
    font-family: 'Playfair Display', serif;
    color: var(--primary-dark);
}

/* === ARABIC (RTL OVERRIDES) === */
body.rtl {
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
    text-align: right;
}

body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl .navbar-brand {
    font-family: 'Cairo', sans-serif;
}

/* === NAVBAR === */
.navbar {
    transition: all 0.4s ease;
    padding: 1rem 0;
}
.navbar.scrolled {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 0.5rem 0;
}
.navbar-brand {
    font-weight: 700;
    font-size: 1.75rem;
}
.nav-link {
    color: var(--primary-dark);
    font-weight: 500;
    margin: 0 10px;
    position: relative;
    transition: color 0.3s;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0px;
    left: 0;
    background: var(--accent-gold);
    transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--accent-flat) !important; }

/* Language Switcher Styling */
.lang-item { list-style: none; display: inline-block; margin: 0 5px; }
.lang-item a {
    color: var(--primary-dark); text-decoration: none; font-weight: bold;
    border: 1px solid var(--accent-flat); padding: 5px 10px; border-radius: 4px;
    font-size: 0.8rem; transition: 0.3s;
}
.lang-item a:hover, .lang-item.current-lang a { background: var(--accent-flat); color: white; }

/* === GENERAL SECTIONS === */
section { padding: 100px 0; }
.section-header { margin-bottom: 60px; text-align: center; }
.section-title {
    font-size: 2.5rem; font-weight: 700; position: relative; display: inline-block; padding-bottom: 15px;
}
.section-title::before {
    content: ''; position: absolute; width: 80px; height: 4px; bottom: 0; left: 50%;
    transform: translateX(-50%); background: var(--accent-gold); border-radius: 2px;
}

/* === HERO === */
.hero-section {
    background: linear-gradient(rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.11)), url('https://rosemisk.com/wp-content/uploads/2026/01/Rosemisk-banner-4.jpg');
    background-size: cover; background-position: center; background-attachment: fixed;
    color: white; padding: 220px 0 300px; position: relative;
    /*height: 1280px;*/
}
.hero-subtitle {
    font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 600;
    margin-bottom: 25px; display: inline-block;
    background: var(--accent-gold); -webkit-background-clip: text;
}
.hero-title { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-bottom: 10px; color: #ffffffeb;}
.btn-gold {
    background: #D71B72; border: none; color: #fff;
    font-weight: 600; padding: 10px 35px; border-radius: 50px; transition: all 0.3s ease;
    position: relative; z-index: 1; overflow: hidden;
}
.btn-gold::after {
    content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
    background: #D71B72; transition: width 0.3s; z-index: -1;
}
.btn-gold:hover { color: #fff; }
.btn-gold:hover::after { width: 100%; }

/* === ABOUT === */
.about-img-wrapper { position: relative; z-index: 1; }
.about-img-wrapper::before {
    content: ''; position: absolute; top: -30px; left: -30px; width: 100%; height: 100%;
    border: 5px solid var(--accent-flat); z-index: -1; opacity: 0.3; transition: all 0.5s;
}
/* RTL adjustment for About Frame */
body.rtl .about-img-wrapper::before { left: auto; right: -30px; }
body.rtl .about-img-wrapper:hover::before { right: -20px; }

.about-img-wrapper:hover::before { top: -20px; left: -20px; opacity: 0.6; }
.about-img { border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

/* === SERVICES === */
.bg-light-pattern {
    background-color: var(--light-bg);
    background-image: radial-gradient(var(--primary-dark) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
}
.service-card {
    background: white; padding: 40px 30px; border-radius: 15px; text-align: center;
    transition: all 0.3s ease; height: 100%; border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--accent-flat); }
.service-icon-box {
    width: 80px; height: 80px; margin: 0 auto 25px; background: var(--accent-gold);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #D71B72; box-shadow: #D71B72;
}
.service-card h5 { font-size: 1.25rem; margin-bottom: 15px; }

/* === PRODUCTS === */
.product-category-card {
    position: relative; height: 300px; border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.4s ease; cursor: pointer;
}
.product-category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.59), rgba(15, 23, 42, 0.64));
    display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; transition: all 0.4s;
}
.product-category-card h4 {
    color: white; font-size: 1.5rem; margin-bottom: 10px; transform: translateY(20px); transition: all 0.4s;
}
.product-category-card p {
    color: rgba(255,255,255,0.8); opacity: 0; transform: translateY(20px); transition: all 0.4s 0.1s; font-size: 0.9rem;
}
.product-category-card:hover img { transform: scale(1.1); }
.product-category-card:hover .product-overlay {
background: #A95C7A4D;
}
.product-category-card:hover h4, .product-category-card:hover p { transform: translateY(0); opacity: 1; }

/* === CONTACT === */
.contact-section { background-color: #2F2F2F; color: white; overflow: hidden; }
.contact-section::before {
     content: ''; position: absolute; top:0; left:0; right:0; bottom:0;
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415-.83-.828 1.415-1.415zm4.586 4.586l.83.828-1.415 1.415-.83-.828 1.415-1.415zm-9.172 9.172l.83.828-1.415 1.415-.83-.828 1.415-1.415zm9.172 9.172l.83.828-1.415 1.415-.83-.828 1.415-1.415zm-9.172 9.172l.83.828-1.415 1.415-.83-.828 1.415-1.415zm9.172 9.172l.83.828-1.415 1.415-.83-.828 1.415-1.415zm-9.172 9.172l.83.828-1.415 1.415-.83-.828 1.415-1.415zm9.172 9.172l.83.828-1.415 1.415-.83-.828 1.415-1.415z' fill='%23D71B72' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
     opacity: 0.5;
}
.contact-title { color: white; }
.contact-title::before { background: var(--accent-flat); }
.contact-box h4 { color: var(--accent-flat); margin-bottom: 20px;}
.email-link { display: block; color: rgba(255,255,255,0.7); text-decoration: none; padding: 5px 0; transition: 0.3s; }
.email-link:hover { color: var(--accent-flat); padding-left: 5px; }
.email-label { color: white; font-weight: 500; display: block; margin-top: 10px;}
.map-placeholder {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(212, 175, 55, 0.3); height: 250px;
    border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent-flat);
}
.btn-whatsapp-glow {
    background: var(--accent-gold); border: none; color: #222; padding: 12px 30px; border-radius: 50px;
    box-shadow: var(--accent-gold); transition: 0.3s;
}
.btn-whatsapp-glow:hover { box-shadow: var(--accent-gold); transform: translateY(-3px); color: #222; }
.brand-pill {
    border: 1px solid #e2e8f0; padding: 12px 25px; border-radius: 50px; font-weight: 500; color: var(--primary-dark);
    background: white; transition: all 0.3s; box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}
.brand-pill:hover { background: var(--primary-dark); color: var(--accent-flat); border-color: var(--primary-dark); transform: translateY(-3px); }

/* --- Brand Logos Styling --- */
.brand-container {
    padding: 20px 0;
}

.brand-logo-box {
    width: 140px;          /* Fixed width for uniformity */
    height: 80px;          /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: white;     /* White background card */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Soft shadow */
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.brand-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;   /* Ensures logo fits inside without distortion */
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Hover Effects */
.brand-logo-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: var(--accent-flat); /* Your Pink Color */
}

.brand-logo-box:hover img {
    filter: grayscale(0%); /* Restore original colors on hover */
    opacity: 1;
}

.footer-txt1 {
    margin-left: 50px;
    margin-right: 50px;
}
.footer-txt2 {
    margin-right: 25px;
    margin-left: 25px;
}

footer { background: #2F2F2F; padding: 30px 0; text-align: center; color: rgba(255,255,255,0.5); font-size: 0.9rem; border-top: 1px solid; }

.hero-subtitle {
    display: block;
    margin-bottom: 20px;
}

/*.hero-title {*/
/*    margin-bottom: 40px;*/
/*}*/

.lead {
    min-height: 44px; /* or margin-top */
}

.hover-link {
    transition: color 0.3s ease;
}
.hover-link:hover {
    color: #ffffff !important; /* Turns bright white on hover */
    text-decoration: underline !important;
}
.social-links a:hover {
    color: var(--accent-flat) !important; /* Turns pink on hover */
    transform: translateY(-3px); /* Moves up slightly */
    display: inline-block;
}

/* =========================================
   MOBILE SPECIFIC DESIGN (Max Width 991px)
   ========================================= */
@media (max-width: 991px) {

    /* --- 1. NAVBAR: Solid Background (No Transparency) --- */
    .navbar {
        padding: 15px 0 !important;
    }
    
/*    .nav-link {*/
/*  color: #ffff;*/
/*}*/

.lang-item a {
    background: var(--accent-flat);
    color: white;
}

    .navbar-collapse {
        /*margin-top: -25px;*/
        padding: 10px;
        border-radius: 8px;
        background: #A95C7A24
    }
    
   

    /* --- 2. BANNER: Different Image for Mobile --- */
    .hero-section {
        /* PASTE YOUR MOBILE IMAGE URL BELOW */
        /*background-image: linear-gradient(rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.4)), url('https://rosemisk.com/wp-content/uploads/2026/01/banner-mobile.png') !important;*/
        
        background-size: cover !important;
        background-position: center top !important;
        background-attachment: scroll !important; /* Disables parallax on mobile to prevent zooming */
        
        /* Adjust Height/Padding for Mobile */
        padding: 0 0 0 !important;
        height: auto !important;
    }

    /* --- 3. LAYOUT: Stack Buttons Vertically --- */
    .hero-section .d-flex.justify-content-center.gap-3 {
        flex-direction: column;
        width: 50%;
        margin: 0 auto;
        bottom: 30px !important; /* Position from bottom */
    }

    .btn-lg {
        width: 100%; /* Make buttons full width on mobile */
        margin-bottom: 10px;
        font-size: 12px;
    padding: 8px 20px;
    }

    /* Resize Title for Mobile */
    .hero-title {
        font-size: 1.5rem !important;
        margin-top: 0;
        margin-bottom: 15px;
    }
    
    .navbar-toggler {
        background: #D71B72;
        border-color: #D71B72;
    }
    
    .navbar-toggler:focus {
    box-shadow: none;
}
    
}

/* --- Fix Mobile Content Spacing --- */
@media (max-width: 767px) {
    
 .container.text-center.banner-text-desktop {
    margin-top: 25%;
}
    
    .hero-subtitle {
    font-size: 1rem;
}
    .hero-section {
    height: 1280px;
    padding: 50px 0 50px !important;
}

    .navbar-brand {
        font-weight: 700;
        font-size: 1.75rem;
        margin-left: -50px;
        margin-right: -50px;
    }
    
    /* 1. Force Padding on All Containers */
    .container, .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 2. Prevent Horizontal Scrolling (Side-to-Side shaking) */
    body, html {
        overflow-x: hidden;
        width: 100%;
    }

    /* 3. Fix Row Margins causing overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 4. Ensure Columns don't touch edges */
    .col-12, .col-md-6, .col-lg-4 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /*.footer-txt1 {*/
    /*  margin-left: 114px;*/
    /*  margin-right: 114px;*/
    /*}*/
    .footer-first-section{
        text-align: center;
    }
}


/* =========================================
   WOOCOMMERCE CUSTOM STYLES
   ========================================= */

/* 1. Primary Buttons (Add to Cart, Checkout) */
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button,
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    background-color: #D71B72 !important; /* Rose Pink */
    color: #ffffff !important;
    border-radius: 50px !important; /* Rounded Pills */
    padding: 12px 30px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease;
}

.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover {
    background-color: #b0155c !important; /* Darker Pink */
    transform: translateY(-2px);
}

/* 2. Price Text Color */
.woocommerce ul.products li.product .price {
    color: #D71B72 !important;
    font-weight: bold;
    font-size: 1.1rem;
}

/* 3. "Sale" Badge */
.woocommerce span.onsale {
    background-color: #D71B72 !important;
    border-radius: 50%;
    min-height: 40px;
    min-width: 40px;
    line-height: 40px;
}

/* 4. Messages (Success/Error Alerts) */
.woocommerce-message, .woocommerce-info {
    border-top-color: #D71B72 !important;
}
.woocommerce-message::before, .woocommerce-info::before {
    color: #D71B72 !important;
}

/* 5. Product Title Links */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #333;
    font-family: inherit;
    padding-top: 10px;
}

.woocommerce img, .woocommerce-page img {
	height: revert-layer;
	max-width: 100%;
}

/* --- FIX WOOCOMMERCE LAYOUT --- */



/* 2. Force the Header to be visible on Shop pages */
/* This makes the navbar Dark Blue on Shop pages so you can see the white text */
.post-type-archive-product .navbar,
.tax-product_cat .navbar,
.single-product .navbar,
.woocommerce-page .navbar {
    /*background-color: #0f172a !important; /* Dark Blue 
    position: relative !important; /* Stops it from floating over content */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- IMPROVE SHOP CARD TYPOGRAPHY --- */

/* 1. Allow Full Product Title (No Cutting Off) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    white-space: normal !important; /* Allows text to wrap to next line */
    overflow: visible !important;   /* Shows all text */
    text-overflow: clip !important; /* Removes the "..." */
    height: auto !important;        /* Allows the box to grow tall */
    
    /* Optional: Style adjustments */
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
    color: #333;
}

/* 2. Center Align Text (Optional - looks better without buttons) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.loop-product-brand {
    text-align: center;
}