@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Cairo:wght@300;400;600;700&display=swap');

:root {
    /* Branding Colors (Brochure Match) */
    --primary: #0a2647;
    /* Deep Navy Blue */
    --secondary: #1a1a1a;
    /* Dark Gray */
    --accent: #d4a017;
    /* Rich Gold */
    --accent-light: #f3e5ab;
    /* Champagne Gold */


    /* UI Colors */
    --bg-body: #f4f7f6;
    /* Soft Premium Off-White/Silver */
    --bg-light: #eaeff2;
    /* Slightly darker section bg */
    --bg-white: #ffffff;
    /* Pure White for Cards */

    --bg-dark: #1a2d40;
    /* Deep Navy for specific accents if needed */

    --text-main: #2c3e50;
    /* Dark Blue-Gray text (Softer than black) */
    --text-light: #7f8c8d;
    /* Elegant Muted Gray */
    --text-on-dark: #ffffff;

    --border: rgba(0, 0, 0, 0.08);
    /* Elegant subtle border */
    --glass: rgba(255, 255, 255, 0.85);

    /* Layout */
    --container-width: 1200px;
    /* Slightly tighter */
    --header-height: 70px;
    /* Compact Header */
    --radius: 4px;
    /* Sharp corners for Brochure Box layout */

    /* Typography */
    --font-heading: 'Outfit', 'Cairo', sans-serif;
    --font-body: 'Cairo', 'Outfit', sans-serif;

    --shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.08);
    /* Crisper shadow */
    --text-shadow: none;
    /* Clean text for brochure style */
}

/* ============================
   FLOATING ACTIONS (Side Buttons)
   ============================ */
.floating-actions {
    position: fixed;
    right: 20px;
    /* Right side */
    bottom: 30px;
    /* top: 50%; remove centering */
    /* transform: translateY(-50%); remove centering */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.float-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    position: relative;
    border: 2px solid white;
    /* Elegant white ring */
}

/* Tooltip on hover */
.float-btn::before {
    content: attr(title);
    position: absolute;
    right: 60px;
    /* Left of button in RTL? No, right is edge. So pop to left */
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    right: auto;
    left: 60px;
    /* For LTR/RTL mix, let's assume left of button */
}

.float-btn:hover {
    transform: scale(1.1);
}

.float-btn:hover::before {
    opacity: 1;
    left: 55px;
}

.float-whatsapp {
    background: var(--accent);
}

.float-phone {
    background: var(--primary);
}

.float-mail {
    background: var(--accent);
}

/* ============================
   RESET & BASICS
   ============================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

body {
    font-family: var(--font-body);
    background: var(--bg-body);
    color: var(--text-main);
    line-height: 1.7;
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    /* Landing Page Smooth Scroll */
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    color: var(--primary);
    /* Default to Navy for content */
    font-weight: 700;
    line-height: 1.3;
}

h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary);
    /* Keep smaller headings Navy for readability */
    font-weight: 700;
    line-height: 1.3;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================
   HEADER (Brochure Style - Solid & Sharp)
   ============================ */
header {
    background: transparent;
    /* Transparent initially */
    backdrop-filter: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    z-index: 1000;
    box-shadow: none;
    border-bottom: none;
    transition: 0.4s ease;
}

header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid var(--accent);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo img {
    height: 60px;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
}

.main-menu {
    display: flex;
    gap: 5px;
    /* Tighter for tab look */
}

.main-menu a {
    font-size: 0.95rem;
    text-transform: uppercase;
    padding: 10px 15px;
    color: var(--primary);
    font-weight: 700;
    position: relative;
    border: 1px solid transparent;
    transition: 0.3s;
}

/* Boxed Menu Items (Tabs) */
.main-menu a:hover {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--accent);
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    color: var(--primary);
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: none;
    padding: 0;
}

.btn-nav:hover {
    background: var(--bg-body);
    color: var(--accent);
    transform: none;
    box-shadow: none;
}

/* Specific styling for Login/Register if needed to keep them as buttons? 
   No, user asked to make "the three buttons" icons. 
   If not logged in, they are text "Login" / "Register". 
   Let's keep Login/Register as text buttons if they are text, or maybe icons if user meant all?
   User said "The three buttons... Login ... Admin ... Profile".
   Let's target specifically the ones that are icons or apply a class in PHP if possible?
   Since I cannot change PHP easily without losing context, I will style .btn-nav generally as icons, 
   BUT standard login/register are <a> with text. 
   Text will overflow 40px width.
   
   Let's make .btn-nav auto width if it has text?
   Actually, the user said "make them icons".
   I will assume the logged-in state primarily.
   
   For the Login/Register buttons which have text, I should validly keep them as buttons OR change them to icons in PHP.
   User said: "the three buttons... Login ... Admin ... Profile". 
   This implies logged-in state (Admin, Profile, Logout). 
   Wait, if logged in there are 3: Admin, Profile, Logout.
   If logged out: Login, Register.
   
   I will style them to be transparent.
*/

.btn-nav.primary {
    background: transparent;
    color: var(--primary);
    border: none;
    box-shadow: none;
}

.btn-nav.primary:hover {
    color: var(--accent);
    background: var(--bg-light);
}


/* ============================
   HERO SECTION (Cinematic Video Style)
   ============================ */
.hero-wrapper {
    position: relative;
    height: 100vh;
    width: 100%;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1.5s ease-in-out;
    /* Smoother Crossfade */
}

.hero-bg.active {
    opacity: 1;
    animation: zoomEffect 8s linear infinite alternate;
    /* The 'Video' Look */
}

@keyframes zoomEffect {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }

    /* Slow camera zoom */
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Cinematic Gradient: Darker at bottom for text readability */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
}

.hero-content {
    text-align: right;
    /* Editorial Style: Align Right (RTL standard) */
    color: white;
    max-width: 1000px;
    padding: 0 40px;
    z-index: 2;
    margin-top: 60px;
    position: relative;
}

/* HERO TITLE - EDITORIAL STYLE (Refined Size) */
.hero-title {
    font-size: 3.2rem;
    /* Reduced from 4.5rem */
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    color: white;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;

    /* Decoration: Gold Impact Line */
    border-right: 5px solid var(--accent);
    /* Thinner line */
    padding-right: 25px;

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    /* Deep Shadow for Readability */

    /* Animation */
    animation: fadeInUp 1s ease-out forwards;
}

.hero-subtitle {
    font-size: 1.1rem;
    /* Reduced from 1.6rem */
    opacity: 0.95;
    margin-bottom: 30px;
    max-width: 650px;
    margin-right: 30px;
    /* Align with text */
    color: #f0f0f0;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1.2s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search Bar in Hero - Floating Glass (Transparent & Compact) */
.hero-search-box {
    background: rgba(255, 255, 255, 0.15);
    /* Transparent Glass */
    backdrop-filter: blur(5px);
    padding: 5px;
    /* Compact padding */
    border-radius: 4px;
    display: flex;
    gap: 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Subtle border */
    max-width: 450px;
    /* Smaller width */
    margin: 0;
    /* Let flex handle alignment */

    animation: fadeInUp 1.4s ease-out forwards;
}

/* Standard Form Input */
.search-field,
.form-control {
    width: 100%;
    border: 1px solid var(--border);
    background: white;
    padding: 12px 15px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-main);
    border-radius: var(--radius);
    outline: none;
    transition: 0.3s;
}

.search-field:focus,
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
}

/* Hero Specific Input */
.hero-search-box .search-field {
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    /* Subtle divider */
    border-radius: 0;
    background: transparent;
    padding: 10px 20px;
    color: white;
    /* White text for transparent background */
}

.hero-search-box .search-field::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.hero-search-box .search-field:first-child {
    border-left: none;
}


.btn-search {
    background: var(--accent);
    /* Gold Button */
    color: white;
    padding: 10px 30px;
    /* Smaller button */
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: none;
    margin-right: 5px;
}

.btn-search:hover {
    background: white;
    color: var(--primary);
    transform: translateY(-2px);
}

/* Secondary Action Button (Browse Projects) */
.btn-hero-browse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    background: var(--accent);
    /* Gold */
    backdrop-filter: blur(5px);
    color: white;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--accent);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: 0.3s;
    height: 100%;
    animation: fadeInUp 1.6s ease-out forwards;
}

.btn-hero-browse:hover {
    background: var(--primary);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* ============================
   SECTIONS (Compacted)
   ============================ */
.section-padding {
    padding: 50px 0;
}

/* Reduced from 60px */

.bg-light {
    background: var(--bg-light);
    /* Off-white section */
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

/* SECTION HEADERS - BROCHURE RIBBON STYLE */
.section-header h2 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    color: white;
    /* White text on Gold */
    background: var(--accent);
    /* Gold Background */
    padding: 10px 40px;
    display: inline-block;
    position: relative;
    clip-path: none;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(212, 160, 23, 0.3);
}

.section-header h2::after {
    display: none;
    /* Remove the old underline */
}

.section-header p {
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    border-top: 2px solid var(--accent-light);
    /* Top border for description */
    padding-top: 15px;
    display: inline-block;
}

/* ============================
   PROJECT CARDS (Elegant)
   ============================ */
/* ============================
   PROJECT CARDS (Brochure Style - Compact)
   ============================ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    /* Compact */
    gap: 30px;
    /* Tighter */
}

.project-card {
    background: white;
    transition: 0.3s ease;
    border: 1px solid #dae1e7;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    box-shadow: none;
}

.project-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

.project-img-wrapper {
    position: relative;
    height: 250px;
    /* Shorter Image */
    overflow: hidden;
    border-bottom: 2px solid var(--accent);
}

.project-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s ease;
}

.project-card:hover .project-img-wrapper img {
    transform: scale(1.05);
}

.project-status {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary);
    color: white;
    padding: 4px 12px;
    /* Smaller */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.project-details {
    padding: 20px;
    /* Compact padding */
    border: 1px solid transparent;
}

.project-price {
    color: var(--primary);
    font-size: 1.4rem;
    /* Smaller Price */
    font-weight: 800;
    margin-bottom: 5px;
    display: block;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.project-title {
    font-size: 1.2rem;
    /* Smaller Title */
    height: 3rem;
    overflow: hidden;
    line-height: 1.4;
    color: var(--primary);
    margin-bottom: 8px;
}

.project-location {
    color: var(--text-light);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 15px;
}

.project-features {
    display: flex;
    gap: 10px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    flex-wrap: wrap;
}

.project-features span {
    display: flex;
    align-items: center;
    gap: 5px;
    background: white;
    padding: 4px 8px;
    /* Compact features */
    border: 1px solid var(--border);
    border-radius: 2px;
}

/* ============================
   FOOTER (Brochure Landing Style - Compact)
   ============================ */
footer {
    background: white;
    color: var(--primary);
    padding: 40px 0 20px;
    /* Compact Padding */
    border-top: 5px solid var(--accent);
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0a2647;
    /* Deep Navy Blue */
}

/* Contact Header Navy Background */
.footer-col h3.contact-header {
    background: #0a2647 !important;
    /* Deep Navy Blue */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
    /* Compact Grid */
    margin-bottom: 30px;
}

/* Boxed Footer Headings */
.footer-col h4,
.footer-col h3,
.footer-col h3.text-white {
    color: white !important;
    background: var(--accent);
    padding: 8px 15px;
    /* Compact Box */
    margin-bottom: 20px;
    font-size: 1rem;
    display: inline-block;
    font-weight: 800;
    border-radius: 0;
    border: none;
    box-shadow: 4px 4px 0 rgba(10, 38, 71, 0.1);
}


/* ============================
   PAGE HEADER (Luxury Style)
   ============================ */
.page-header {
    height: 400px;
    /* Tall header */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 0;
}

.page-header::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(10, 38, 71, 0.7), rgba(10, 38, 71, 0.4));
}

.page-header-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 800px;
}

.page-header h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================
   GLASS FILTERS BAR
   ============================ */

/* ============================
   GLASS FILTERS BAR (Compact & Elegant)
   ============================ */
.glass-filter-bar {
    background: white;
    padding: 15px 25px;
    /* Compact padding */
    border-radius: 50px;
    /* Capsule shape */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Lighter shadow */
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin: 0 auto 40px;
    /* Center and add bottom space */
    position: relative;
    z-index: 10;
    display: flex;
    gap: 10px;
    /* Tighter gap */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 950px;
    /* Constrain width */
}

.glass-filter-bar .form-control {
    border: 1px solid #f0f0f0;
    background: #fdfdfd;
    height: 40px;
    /* Smaller height */
    padding: 0 15px;
    font-size: 0.9rem;
    transition: 0.3s;
    border-radius: 20px;
    /* Rounded inputs */
}

.glass-filter-bar .form-control:focus {
    border-color: var(--accent);
    background: white;
    box-shadow: none;
}

.glass-filter-bar .btn-primary {
    height: 40px;
    /* Match input height */
    background: var(--primary);
    border: none;
    padding: 0 25px;
    font-weight: 600;
    border-radius: 20px;
    /* Rounded button */
    line-height: 40px;
    font-size: 0.9rem;
}

.glass-filter-bar .btn-primary:hover {
    background: var(--accent);
    transform: translateY(-1px);
}



.footer-col a:hover {
    color: var(--accent);
    padding-right: 5px;
    border-color: var(--accent);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-links a {
    width: 45px;
    height: 45px;
    border: 1px solid var(--border);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    /* Square Icons */
    color: var(--primary);
    margin: 0;
    padding: 0;
    transition: 0.3s;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
}

.social-links a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 4px 4px 0 var(--accent);
}

.footer-bottom {
    border-top: 1px solid #eee;
    padding-top: 30px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-light);
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
        padding: 15px;
    }

    .hero-search-box {
        flex-direction: column;
        border-radius: 0;
        /* Sharp on mobile too? */
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .main-menu {
        display: none;
    }

    /* Mobile Menu would need JS */
}

/* ============================
   UTILITIES (Legacy Support)
   ============================ */
.d-flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-white {
    color: white !important;
}

.text-gold {
    color: var(--accent) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: 0.3s;
}

.btn-gold {
    background: var(--accent);
    color: black;
}

.btn-gold:hover {
    background: white;
    color: black;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--accent);
    color: black;
}

/* Status Badges */
.status-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.status-badge.sale {
    background: #28a745;
}

.status-badge.rent {
    background: #17a2b8;
}

.status-badge.sold {
    background: #dc3545;
}

.status-badge.reserved {
    background: #ffc107;
    color: black;
}

/* ============================
   ADMIN PANEL STYLES (White)
   ============================ */
.admin-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
    min-height: 80vh;
}

.admin-sidebar {
    background: white;
    /* White Sidebar */
    color: var(--primary);
    padding: 30px;
    border-radius: var(--radius);
    height: fit-content;
    border: 1px solid var(--border);
    /* Add border for definition */
    box-shadow: var(--shadow);
}

.admin-sidebar h3 {
    margin-bottom: 25px;
    font-size: 1.2rem;
    color: var(--primary);
    padding-bottom: 15px;
    border-bottom: 1px solid #dae1e7;
    text-shadow: none;
    /* Clean for admin */
}

.admin-nav {
    list-style: none;
    padding: 0;
}

.admin-nav li {
    margin-bottom: 10px;
}

.admin-nav a {
    display: block;
    color: var(--text-light);
    /* Gray links */
    text-decoration: none;
    padding: 12px 15px;
    border-radius: var(--radius);
    transition: 0.3s;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid transparent;
    /* Prevent jump */
}


.admin-nav a:hover,
.admin-nav a.active {
    background: var(--bg-body);
    /* Light Gray hover */
    color: var(--primary);
    /* Navy Active */
    font-weight: 700;
    border-color: var(--border);
}

.admin-nav a i {
    width: 25px;
    color: var(--accent);
    /* Gold Icons */
}

.admin-main {
    flex: 1;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s;
    border: 1px solid var(--border);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(212, 160, 23, 0.2);
}

.stat-info h3 {
    font-size: 2.2rem;
    margin: 0;
    color: var(--primary);
    font-family: 'Outfit', sans-serif;
    letter-spacing: -1px;
}

.stat-info p {
    margin: 5px 0 0;
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 500;
}

.stat-icon {
    font-size: 3rem;
    color: var(--accent);
    opacity: 1;
    text-shadow: 0 5px 15px rgba(212, 160, 23, 0.2);
}

/* Data Tables */
.table-container {
    background: white;
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-top: 30px;
    overflow-x: auto;
    border: 1px solid var(--border);
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 600px;
}

.data-table th,
.data-table td {
    padding: 20px;
    text-align: right;
    border-bottom: 1px solid #edf2f7;
}

.data-table th {
    background: #f8fafc;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: #fafbfc;
}

.action-btn {
    display: inline-flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
    margin-left: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

.action-btn:hover {
    transform: scale(1.1);
}

.action-btn.edit {
    background: #3498db;
}

.action-btn.delete {
    background: #e74c3c;
}

.action-btn.view {
    background: #2ecc71;
}

@media (max-width: 900px) {
    .admin-container {
        grid-template-columns: 1fr;
    }
}

/* ============================
   FEATURES GRID (Values) - Single Row
   ============================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Force 4 columns in one row */
    gap: 30px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 per row on tablets */
    }
}

@media (max-width: 576px) {
    .features-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }
}

.feature-card {
    height: 100%;
    /* Equal height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================
   LUXURY GRADIENT HEADER
   ============================ */
.luxury-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, #1a4b8c 100%);
    position: relative;
    overflow: hidden;
}

.luxury-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 20%, rgba(212, 160, 23, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* ============================
   ADMIN DASHBOARD IMPROVEMENTS
   ============================ */
.table-container {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f7;
    transition: 0.3s;
}

.table-container:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    /* Lift effect */
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th {
    background: #f8f9fa;
    color: var(--primary);
    font-weight: 700;
    padding: 15px;
    border-bottom: 2px solid #eef2f7;
    text-align: right;
}

.data-table td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    color: #555;
}

.data-table tr:hover td {
    background: #fafbfc;
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* Stat Card Enhancements */
.stat-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(10, 38, 71, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
}

/* Mobile Only Actions Helper */
.mobile-nav-actions {
    display: none;
}

/* ============================
   ADMIN DASHBOARD LAYOUT (DESKTOP DEFAULT)
   ============================ */
.admin-container {
    display: flex !important;
    min-height: 100vh;
    flex-direction: row;
    /* Desktop default */
}

.admin-sidebar {
    width: 280px;
    background: white;
    border-left: 1px solid #eee;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 20px 0;
    display: block;
    /* Visible on desktop */
}

.admin-main {
    flex-grow: 1;
    background: #f4f7f6;
    padding: 30px;
    width: auto;
    overflow-x: hidden;
}

/* Hide toggle on desktop */
.admin-menu-toggle {
    display: none !important;
}

.sidebar-overlay {
    display: none !important;
}