/* ==========================================================================
   GREATING FORTUNE LOGISTICS — COMMON STYLESHEET
   Loaded on every page. Contains only what is truly shared site-wide:
   reset, design tokens, base typography, layout helpers, navbar, footer,
   digital clock, floating action buttons and shared animations.

   Anything specific to one group of pages (the VIP/credit list pages,
   the login/manage pages, the homepage, the content pages) lives in its
   own stylesheet — see list.css, auth.css, home.css and content.css —
   and is loaded in addition to this file, never instead of it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & design tokens
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Brand colors — used across every public-facing page */
  --primary: #003087;       /* GF navy blue */
  --secondary: #E30613;     /* GF red */
  --hover: #B20410;
  --success: #28A745;
  --success-dark: #1E7E34;
  --white: #FFFFFF;
  --dark: #1A2526;

  /* Semantic status colors — used for nav pills, alerts, and buttons
     site-wide. Previously these were hardcoded inline (or in three
     slightly different shades across different files); now there is
     exactly one value for each meaning. */
  --warning: #FFC107;       /* "Login" pill */
  --warning-dark: #D9A406;
  --danger: #DC3545;        /* delete / logout / destructive actions */
  --danger-dark: #B02A37;

  /* Admin-area accent — deliberately distinct from the public-site navy/
     red palette, to visually signal "you're in a management screen."
     Used only by auth.css, and only by the 4 admin/login pages. */
  --admin-accent: #2575FC;
  --admin-accent-2: #6A11CB;

  /* One-off section accents that are intentionally different from the
     main brand colors (e.g. the Repair & Washing page uses orange to
     stand apart). Named here instead of scattered as raw hex so it's
     clear they're deliberate, not drift. */
  --repair-accent: #FD7E14;

  /* Table accents (used by list.css) */
  --table-overdue: #FF9999;
  --table-overdue-hover: #E30613;
  --table-accent: #f0f0f0;
  --search-border: #007BFF;

  /* Effects */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.3);
  --accent-gold: #ffd700;
  --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
  --shadow-section: 0 4px 20px rgba(0, 128, 128, 0.1);
  --shadow-glow: 0 0 15px rgba(0, 123, 255, 0.2);
  --text-gradient: linear-gradient(90deg, #003087, #00c6ff);
  --card-overlay: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
  --overlay-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);

  /* Motion & sizing */
  --transition-default: 0.3s ease;
  --hover-lift: translateY(-10px);
  --hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  --spacing-unit: 1rem;
  --font-size-base: 16px;

  /* Fixed navbar height, kept in one place so any page that needs to
     offset content below the navbar (e.g. list.css's sticky table) can
     reference it instead of guessing a pixel value. */
  --navbar-height: 62px;

  /* Section background tints used by content.css (about/benefits/success/
     jobs/repair/charges sections on the "others" pages). These variables
     were referenced throughout the old styles.css but never actually
     defined anywhere, so those sections were silently rendering with no
     background tint at all. Filling them in restores the intended look:
     each content section gets a soft tint that matches its accent color. */
  --benefit-bg: linear-gradient(180deg, #eef4ff 0%, #ffffff 100%);
  --success-bg: linear-gradient(180deg, #eefaf0 0%, #ffffff 100%);
  --job-bg: linear-gradient(180deg, #f3eefc 0%, #ffffff 100%);
  --repair-bg: linear-gradient(180deg, #fff3e9 0%, #ffffff 100%);
  --charge-bg: linear-gradient(180deg, #f4f6fa 0%, #ffffff 100%);
  --bank-card-bg: rgba(255, 255, 255, 0.85);
  --border-accent: rgba(0, 48, 135, 0.15);
  --highlight-gradient: linear-gradient(90deg, #003087, #28a745);
  --highlight-purple: #6a11cb;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--white);
  color: var(--dark);
  line-height: 1.6;
  font-size: var(--font-size-base);
  overflow-x: hidden;
  /* The navbar is `position: fixed` (via Bootstrap's `fixed-top`), which
     takes it out of normal document flow — nothing below it automatically
     knows to leave room for it. Without this, every page's content starts
     at y=0 underneath the navbar, and anything using `position: sticky`
     with `top: var(--navbar-height)` (see list.css's `.sticky-container`)
     ends up "stuck" further down than the space actually reserved for it,
     visually overlapping the content right after it. This single rule
     fixes both problems at once, site-wide. */
  padding-top: var(--navbar-height);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-default);
}

img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(10px, 2vw, 15px);
}

/* --------------------------------------------------------------------------
   3. Navbar
   -------------------------------------------------------------------------- */
.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: clamp(3px, 1vw, 5px) 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
}

.navbar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px;
}

.navbar-brand img {
  max-height: clamp(25px, 5vw, 35px);
  transition: transform 0.3s;
}

.navbar-brand:hover img {
  transform: scale(1.1);
}

.navbar-toggler {
  order: 2;
  border: none;
  background: transparent;
}

.navbar-toggler:hover {
  background-color: var(--primary);
  transition: 0.3s ease-in-out;
}

.navbar-toggler:hover .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

.navbar-collapse {
  order: 3;
}

.navbar-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.navbar-nav .nav-item + .nav-item {
  margin-left: 4px;
}

.navbar-nav .nav-link,
.modern-nav-link {
  color: var(--dark);
  font-weight: 500;
  padding: clamp(5px, 1vw, 8px) clamp(6px, 1vw, 9px);
  transition: color var(--transition-default), background-color var(--transition-default), border-radius var(--transition-default);
  font-size: clamp(0.85rem, 2vw, 0.9rem);
  border-radius: 5px;
  position: relative;
}

.navbar-nav .nav-link:hover,
.dropdown-item:hover {
  background: var(--primary);
  color: var(--white);
}

.modern-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: width 0.3s;
}

.modern-nav-link:hover::after {
  width: 100%;
}

.dropdown-menu {
  background: var(--white);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 170px;
  z-index: 999;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-item {
  font-size: 0.95rem;
  text-align: left;
  padding: 8px 16px;
}

/* Digital clock in the navbar */
.clock-container {
  flex-grow: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modern-clock {
  background: var(--glass-bg);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  padding: 5px;
  border: 1px solid var(--glass-border);
}

#digital-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.75rem, 1.8vw, 0.95rem);
  font-weight: 700;
  padding: clamp(3px, 1vw, 8px);
  color: var(--primary);
}

.glassmorphism {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
  .clock-container {
    order: 1;
    margin: 0 auto;
    padding: 5px 0;
  }

  .navbar-nav {
    margin-left: 0;
  }

  .navbar-nav .nav-item + .nav-item {
    margin-left: 0;
  }

  .navbar-nav .nav-link,
  .modern-nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    font-size: 0.9rem;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   4. Footer
   -------------------------------------------------------------------------- */
.gradient-bg,
.back-to-top,
.top-to-back {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.modern-footer {
  position: relative;
  color: var(--white);
  padding: clamp(0.8rem, 2vw, 1.1rem) 0;
  margin-top: 16px;
  /* A calm, solid deep-navy footer reads as more professional than a
     full navy-to-red gradient across the whole section — the brand red
     now lives only in the thin accent strip below and in link hovers. */
  background: linear-gradient(180deg, var(--primary) 0%, #001c4d 100%);
}

.modern-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--secondary), var(--primary), var(--secondary));
}

.footer-clean {
  text-align: center;
  background: transparent;
  padding: 0 0 clamp(0.5rem, 1.5vw, 0.8rem);
}

.footer-clean .row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.footer-clean .col-sm-4.col-md-3.item {
  flex: 1;
  min-width: 0;
  margin: 0 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 10px;
}

.footer-clean .col-sm-4.col-md-3.item:last-child {
  border-right: none;
}

.footer-clean h3 {
  margin: clamp(4px, 1vw, 8px) 0 clamp(4px, 1vw, 6px);
  font-weight: 700;
  font-size: clamp(11px, 2.4vw, 14px);
  color: var(--white);
}

.footer-clean ul {
  padding: 0;
  list-style: none;
  line-height: 1.35;
  font-size: clamp(10px, 1.8vw, 12px);
  margin-bottom: 0;
}

.footer-clean ul a {
  color: var(--white);
  display: inline-block;
  opacity: 0.8;
  position: relative;
}

.footer-clean ul a:hover {
  opacity: 1;
  color: var(--white);
}

.footer-clean ul a::after {
  content: '';
  width: 0;
  height: 2px;
  display: block;
  background: var(--white);
  transition: 0.3s;
}

.footer-clean ul a:hover::after {
  width: 100%;
}

.footer-clean .social {
  margin-top: 6px;
}

.footer-clean .item.social > a {
  font-size: clamp(14px, 2.2vw, 17px);
  width: clamp(24px, 3.6vw, 29px);
  height: clamp(24px, 3.6vw, 29px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--white);
  color: var(--white);
  margin: clamp(4px, 1vw, 8px) clamp(4px, 1vw, 8px) 0;
  opacity: 0.75;
  transition: transform 0.6s, opacity 0.3s;
}

.footer-clean .item.social > a:hover {
  opacity: 1;
  transform: rotate(360deg);
}

.footer-clean2 {
  background: rgba(0, 0, 0, 0.2);
  color: var(--white);
  text-align: center;
  padding: clamp(6px, 1vw, 8px) 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer-clean2 p {
  margin: 0 auto;
  max-width: 90%;
  font-size: clamp(11px, 1.1vw, 13px);
  font-style: italic;
  line-height: 1.35;
}

.footer-clean2 a {
  color: var(--accent-gold);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .footer-clean .row {
    flex-wrap: wrap;
  }


  .footer-clean .col-sm-4.col-md-3.item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .footer-clean .col-sm-4.col-md-3.item:last-child {
    border-bottom: none;
  }
}

/* --------------------------------------------------------------------------
   4b. Google AdSense sidebar slots
   -------------------------------------------------------------------------- */
/* Google marks an ad unit that failed to fill with data-ad-status="unfilled"
   but doesn't resize it, which otherwise leaves a blank box on the page.
   js/common.js also hides the whole wrapper div once this fires. */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   5. Floating action buttons (back to top / bottom, WhatsApp)
   -------------------------------------------------------------------------- */
.sticky-buttons {
  display: flex;
  position: fixed;
  bottom: clamp(15px, 3vw, 20px);
  right: clamp(15px, 3vw, 20px);
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  z-index: 1002;
}

.back-to-top,
.top-to-back,
.whatsapp-btn {
  width: clamp(35px, 5vw, 40px);
  height: clamp(35px, 5vw, 40px);
  border: none;
  border-radius: 50%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0.75;
  transition: opacity 0.3s, transform 0.3s, background 0.3s, color 0.3s, border 0.3s;
  animation: slideUp 0.5s ease-out 0.2s backwards;
}

.back-to-top:hover,
.top-to-back:hover {
  opacity: 1;
  transform: scale(1.1) rotate(15deg);
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  border: 1px solid var(--white);
}

.whatsapp-btn {
  background: #25d366;
}

.whatsapp-btn:hover {
  background: var(--white);
  color: #1ebe52;
  border: 1px solid #1ebe52;
  opacity: 1;
  transform: scale(1.1) rotate(15deg);
}

@media (max-width: 480px) {
  .back-to-top,
  .top-to-back,
  .whatsapp-btn {
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
  }
}

/* --------------------------------------------------------------------------
   6. Shared animations
   -------------------------------------------------------------------------- */
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translate(var(--slide-x, 0), var(--slide-y, 0)) scale(var(--scale-start, 1));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes slideUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes wave {
  0%, 100% { transform: scale(1.15) translateY(-3px) rotate(0deg); }
  50% { transform: scale(1.15) translateY(-3px) rotate(-6deg); }
}

/* --------------------------------------------------------------------------
   Scroll-triggered reveal (any page can opt in by adding this class)
   --------------------------------------------------------------------------
   Elements start faded/shifted, then settle into place once they scroll
   into view. Driven by a small IntersectionObserver in common.js — this
   file only defines the two visual states.
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal-on-scroll.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible keyboard focus, kept subtle but real */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--search-border);
  outline-offset: 2px;
}