/*
 * ============================================================
 *  AutoPrime — Shared Frontend CSS
 *  autoprime-frontend.css
 *
 *  Used by: home.blade.php, cars.blade.php, sell.blade.php
 *
 *  Sections:
 *   1. CSS Custom Properties  (design tokens / brand colours)
 *   2. Base Reset & Typography
 *   3. Navbar
 *   4. Shared Button Styles
 *   5. Footer
 *   6. Toast / Flash Messages
 *   7. Utility Helpers
 * ============================================================
 */


/* ============================================================
   1. CSS CUSTOM PROPERTIES — Brand colour tokens
      Change only these to re-theme the entire frontend.
   ============================================================ */
:root {
  --ap-navy:        #1e2b4f;   /* primary dark navy — headings, buttons */
  --ap-navy-dark:   #13203a;   /* deeper navy — button hover, footer bg */
  --ap-navy-mid:    #182b4b;   /* mid navy — hero gradient middle */
  --ap-blue:        #1a56db;   /* accent electric blue — sell page / cta */
  --ap-blue-light:  #93c5fd;   /* light sky — hero text highlights */

  --ap-bg:          #f5f7fb;   /* page background (off-white) */
  --ap-white:       #ffffff;
  --ap-border:      #e8ecf4;   /* subtle input/card borders */
  --ap-muted:       #94a3b8;   /* placeholder / disabled text */
  --ap-text:        #2b3f5c;   /* body text */

  --ap-green-bg:    #dcfce7;   /* available status background */
  --ap-green-text:  #16a34a;   /* available status text */
  --ap-yellow-bg:   #fef9c3;   /* booked status background */
  --ap-yellow-text: #b45309;   /* booked status text */

  --ap-radius-sm:   8px;
  --ap-radius-md:   16px;
  --ap-radius-lg:   24px;
  --ap-radius-xl:   32px;
  --ap-radius-pill: 50px;

  --ap-shadow-card: 0 15px 30px -12px rgba(0, 0, 0, 0.10);
  --ap-shadow-nav:  0 8px 20px -10px rgba(0, 20, 30, 0.10);
  --ap-shadow-btn:  0 10px 20px -8px rgba(20, 40, 80, 0.30);
}


/* ============================================================
   2. BASE RESET & TYPOGRAPHY
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Plus Jakarta Sans', 'Outfit', sans-serif;
  background-color: var(--ap-bg);
  color: var(--ap-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Syne', 'Outfit', sans-serif;
  color: var(--ap-navy);
}

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

a {
  text-decoration: none;
}


/* ============================================================
   3. NAVBAR  — glassmorphism sticky bar
   ============================================================ */

/* Frosted-glass navbar used on home & cars pages */
.navbar-blur {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: var(--ap-shadow-nav);
}

/* Brand logo text */
.navbar-brand {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ap-navy) !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Nav link hover underline effect */
.navbar-blur .nav-link {
  color: var(--ap-navy);
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}

.navbar-blur .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--ap-navy);
  transition: width 0.25s;
}

.navbar-blur .nav-link:hover::after,
.navbar-blur .nav-link.active::after {
  width: 100%;
}

/* Dark navbar variant — used on sell page */
.nav-bar {
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-brand .ni {
  width: 32px;
  height: 32px;
  background: var(--ap-blue);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.nav-brand span {
  color: var(--ap-blue-light);
}

.nav-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.15s;
}

.nav-links a:hover {
  color: #fff;
}

.nav-links .nav-cta {
  background: var(--ap-blue);
  color: #fff;
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
}

.nav-links .nav-cta:hover {
  background: #1d4ed8;
}


/* ============================================================
   4. SHARED BUTTON STYLES
   ============================================================ */

/* Primary filled pill button — dark navy gradient */
.btn-modern {
  background: linear-gradient(145deg, var(--ap-navy), var(--ap-navy-dark));
  color: #fff;
  border: none;
  padding: 0.7rem 2rem;
  font-weight: 500;
  border-radius: var(--ap-radius-pill);
  transition: all 0.25s;
  box-shadow: var(--ap-shadow-btn);
  cursor: pointer;
}

.btn-modern:hover {
  background: linear-gradient(145deg, #23375f, #18294b);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 25px -10px var(--ap-navy-dark);
}

/* Outlined pill button */
.btn-outline-modern {
  border: 1.5px solid var(--ap-navy);
  color: var(--ap-navy);
  background: transparent;
  border-radius: var(--ap-radius-pill);
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-outline-modern:hover {
  background: var(--ap-navy);
  color: #fff;
}


/* ============================================================
   5. FOOTER
   ============================================================ */

footer {
  background: #f2f5fa;
  padding: 3rem 0;
}

/* Shared footer link styles */
footer a {
  color: var(--ap-text);
  font-weight: 400;
  transition: color 0.15s;
}

footer a:hover {
  color: var(--ap-navy);
  text-decoration: underline;
}

/* Social icon row */
.social a {
  display: inline-block;
  margin-right: 1rem;
}

.social i {
  font-size: 1.9rem;
  color: var(--ap-navy);
  transition: all 0.2s;
}

.social i:hover {
  color: #000c1f;
  transform: scale(1.1);
}

/* Dark sell-page footer */
.footer-dark {
  background: #0f172a;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 1.5rem;
  font-size: 0.82rem;
}

.footer-dark a {
  color: rgba(255, 255, 255, 0.4);
}

.footer-dark a.footer-accent {
  color: var(--ap-blue-light);
}


/* ============================================================
   6. TOAST / FLASH MESSAGES
   ============================================================ */

/* Success toast — fixed at top centre */
.ap-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--ap-navy);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: var(--ap-radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  pointer-events: none;
}

/* Success banner card — inline (sell page) */
.success-banner {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border: 1.5px solid #86efac;
  border-radius: var(--ap-radius-md);
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.success-icon {
  width: 48px;
  height: 48px;
  background: var(--ap-green-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  flex-shrink: 0;
}


/* ============================================================
   7. UTILITY HELPERS
   ============================================================ */

/* Shared status pill — used on car cards and popups */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.75rem;
  border-radius: var(--ap-radius-pill);
}

.status-available {
  background: var(--ap-green-bg);
  color: var(--ap-green-text);
}

.status-booked {
  background: var(--ap-yellow-bg);
  color: var(--ap-yellow-text);
}

/* Slot buttons — shared by home + cars booking forms */
.slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.8rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--ap-border);
  background: #fff;
  color: var(--ap-navy);
  transition: all 0.18s;
  min-width: 130px;
}

.slot-btn:hover:not(.taken):not(.selected) {
  border-color: var(--ap-navy);
  background: #f0f4ff;
}

.slot-btn.selected {
  background: var(--ap-navy);
  color: #fff;
  border-color: var(--ap-navy);
}

.slot-btn.taken {
  background: #f1f5f9;
  color: var(--ap-muted);
  border-color: var(--ap-border);
  cursor: not-allowed;
  text-decoration: line-through;
}

.slots-loading {
  color: var(--ap-muted);
  font-size: 0.83rem;
  font-style: italic;
}

/* Custom scrollbar — applied to popups/modals */
.ap-scrollbar::-webkit-scrollbar       { width: 6px; }
.ap-scrollbar::-webkit-scrollbar-track { background: transparent; }
.ap-scrollbar::-webkit-scrollbar-thumb { background: #7f8fa3; border-radius: 20px; }

/* Empty state card */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: #fff;
  border-radius: var(--ap-radius-xl);
  border: 2px dashed #e2e8f0;
}