:root {
    --tos-red: #E31D2B;
    --tos-black: #111111;
    --tos-gray: #1a1a1a;
    --white: #ffffff;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--white);
    color: var(--tos-black);
}

/* Particles layer fix */
#oil-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tos-black);
    z-index: -1; /* تجعل الحركة خلف المحتوى */
}

.navbar {
    background: var(--tos-black) !important; /* solid background for consistent appearance */
    border-bottom: 4px solid var(--tos-red);
    z-index: 1050; /* ensure navbar sits above page content */
}

.hero-section {
    min-height: 90vh;
    background: linear-gradient(rgba(17, 17, 17, 0.6), rgba(17, 17, 17, 0.6)), url('../assets/img/hero/Facility-layouts-1.jpg');
    background-size: cover;
    background-position: center;
}

/* ensure brand image consistent size */
.navbar .navbar-brand img { height: 65px; max-height: 65px; }

/* Footer consistency */
footer.bg-dark { background: var(--tos-black) !important; color: #fff; }

.text-tos-red { color: var(--tos-red) !important; }
.fw-extrabold { font-weight: 800; }

.btn-tos {
    background-color: var(--tos-red);
    color: white;
    border-radius: 0;
    font-weight: 600;
    border: 2px solid var(--tos-red);
    transition: 0.3s;
}

.btn-tos:hover {
    background-color: transparent;
    color: var(--tos-red);
    border-color: var(--tos-red);
}

.nav-link:hover { color: var(--tos-red) !important; }

/* Page specific hooks */
.page-manufacturing { /* example styling for manufacturing page */ }
.page-services { /* example styling for services page */ }
.page-shop { /* example styling for shop page */ }
.page-projects { /* example styling for projects page */ }

/* Oil drop animation (simple falling drops in background) */
.oil-drop { position: absolute; top: -50px; left: 50%; width: 18px; height: 24px; background: radial-gradient(circle at 30% 30%, rgba(227,29,43,0.95), rgba(0,0,0,0.6)); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0.9; transform-origin: center top; z-index: -2; }

@keyframes fallAndSpread {
  0% { transform: translateY(-30px) scale(0.6) rotate(0deg); opacity: 0.0; }
  10% { opacity: 0.9; }
  70% { transform: translateY(70vh) scale(1) rotate(15deg); opacity: 0.9; }
  100% { transform: translateY(100vh) scale(1.3) rotate(25deg); opacity: 0.0; }
}

.oil-drop.animate { animation: fallAndSpread 4s linear infinite; }

/* make sure the particles layer is behind everything */
#oil-particles, .oil-drop { pointer-events: none; }

/* Floating backdoor edit button */
.backdoor-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: var(--tos-red);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.backdoor-btn:hover { background: #c2181f; color: #fff; text-decoration: none; }

.backdoor-add {
    position: fixed;
    right: 80px;
    bottom: 20px;
    background: #0ea5a4;
    color: #fff;
    padding: 10px 12px;
    border-radius: 50%;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.backdoor-add:hover { background: #0b8381; }

/* small inline edit badge for items */
.backdoor-inline {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    z-index: 999;
    text-decoration: none;
}
.card { position: relative; }

/* Footer logo strip */
.footer-strip { width: 100%; height: 120px; object-fit: cover; display: block; margin: 0 auto; }
@media (max-width: 576px) {
    .footer-strip { height: 80px; }
}