/* Auto-extracted from template: login.html */

:root {
      --bg-dark: #020617;
      --accent-emerald: #22c55e;
      --accent-sky: #38bdf8;
      --accent-amber: #fbbf24;
      --overlay: linear-gradient(135deg, rgba(15,23,42,.85), rgba(30,64,175,.75));
      --glow1: radial-gradient(circle at top left, rgba(56,189,248,.25), transparent 55%);
      --glow2: radial-gradient(circle at center right, rgba(34,197,94,.2), transparent 55%);
      --glow3: radial-gradient(circle at bottom left, rgba(251,191,36,.18), transparent 55%);
    }

    html, body { height: 100%; }

    body {
      margin: 0;
      background-color: #f3f4f6;
      color: #0f172a;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .landing { min-height: 100vh; display: flex; flex-direction: column; }
    @media (min-width: 992px) { .landing { min-height: 100vh; } }

    .left-hero {
      color: #f8fafc;
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      background-image: var(--overlay), url('../../img/hero-restaurant.jpg'), var(--glow1), var(--glow2), var(--glow3);
      background-size: cover, cover, auto, auto, auto;
      background-position: center;
      background-repeat: no-repeat;
      background-blend-mode: overlay, normal;
    }

    .brand-badge { font-weight: 700; font-size: .95rem; backdrop-filter: blur(3px); }
    .auth-card { max-width: 460px; }
    .divider { height:1px; background: rgba(0,0,0,.08); }

    .fade-up { opacity:0; transform:translateY(10px); animation:fadeUp .7s ease-out forwards; }
    .fade-in { opacity:0; animation:fadeIn .7s ease-out forwards; }

    .delay-1 { animation-delay:.08s; }
    .delay-2 { animation-delay:.16s; }
    .delay-3 { animation-delay:.24s; }
    .delay-4 { animation-delay:.32s; }

    @keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn { to { opacity:1; } }

    .brand-badge::after {
      content:""; position:absolute; inset:0; border-radius:inherit;
      background:linear-gradient(120deg, rgba(248,250,252,0) 40%, rgba(248,250,252,.9) 50%, rgba(248,250,252,0) 60%);
      transform:translateX(-120%);
      animation:shimmer 2.4s ease-out infinite;
      opacity:.25; pointer-events:none;
    }

    @keyframes shimmer {
      0%{transform:translateX(-120%);}
      60%{transform:translateX(120%);}
      100%{transform:translateX(120%);}
    }

    .stat-pill {
      background: rgba(15,23,42,.85);
      border-radius: 999px;
      padding: .6rem 1rem;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      border: 1px solid rgba(148,163,184,.5);
      box-shadow: 0 10px 25px rgba(15,23,42,.65);
    }

    .row.g-0.h-100 {
      min-height: 100vh;
    }

    aside.left-hero { height: 100%; }
    main { height: 100%; }

    .auth-card {
      max-height: none;
      overflow: visible;
    }

    /* 🔧 NEW: make the right card a bit more compact on desktop
       so it fits within the viewport without page scrolling */
    @media (min-width: 992px) {
      .auth-card {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
      }
      .auth-card .card-body {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
      }
    }

    @media (max-width: 991.98px) {
      .left-hero { min-height: 40vh; }
      .auth-card { max-width: 100%; }
    }

    .demo-banner { background:#eef5ff; }
    .brand-badge { position: relative; overflow: hidden; }