/* Base reset and variables */
:root {
  /* Light restaurant palette: clean white + warm accents */
  --bg-start: #f8fafc;   /* slate-50 */
  --bg-end: #ffffff;
  --card: rgba(255, 255, 255, 0.92);
  --border: rgba(0, 0, 0, 0.08);
  --text: #1f2937;      /* slate-800 */
  --muted: #6b7280;     /* slate-500 */
  --primary: #f59e0b;   /* amber */
  --primary-2: #f43f5e; /* rose */
  --accent: #a78bfa;    /* soft violet */
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  /* Clean, light base with very subtle warmth */
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(245, 158, 11, 0.08), transparent),
    radial-gradient(1000px 500px at 90% 10%, rgba(244, 63, 94, 0.06), transparent),
    linear-gradient(180deg, var(--bg-start), var(--bg-end));
}

.bg-gradient {
  position: fixed; inset: 0; pointer-events: none;
  /* Light animated gradient wash */
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(245, 158, 11, 0.06), rgba(167, 139, 250, 0.05), rgba(244, 63, 94, 0.06), rgba(245, 158, 11, 0.06));
  animation: gradientDrift 18s ease-in-out infinite alternate;
}
.bg-gradient::after {
  content: "";
  position: absolute; inset: 0;
  /* Soft grain for modern texture on white */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
  opacity: 0.3;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px clamp(16px, 6vw, 40px);
  backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  border-bottom: 1px solid var(--border);
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo { font-size: 20px; filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.25)); animation: pulseGlow 4s ease-in-out infinite; }
.title { font-weight: 800; letter-spacing: 0.2px; }

.actions { display: flex; gap: 10px; }
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
  background:
    linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95)) padding-box,
    linear-gradient(90deg, rgba(245, 158, 11, 0.75), rgba(244, 63, 94, 0.75)) border-box;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transition: transform 200ms ease, box-shadow 250ms ease, background 250ms ease, filter 250ms ease;
  will-change: transform, box-shadow;
  overflow: hidden;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
.button:active { transform: translateY(0); filter: brightness(1.03); }
.button.primary {
  background:
    linear-gradient(rgba(255,255,255,0.97), rgba(255,255,255,0.97)) padding-box,
    linear-gradient(90deg, rgba(245, 158, 11, 0.95), rgba(244, 63, 94, 0.95)) border-box;
}
.button.ghost {
  background:
    linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)) padding-box,
    linear-gradient(90deg, rgba(167,139,250,0.45), rgba(245,158,11,0.45)) border-box;
}
.button::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 900ms ease;
}
.button:hover::before { transform: translateX(120%); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245,158,11,0.4); }

/* Main container */
.container {
  padding: clamp(16px, 6vw, 40px);
  max-width: 1100px;
  margin: 0 auto;
}

.viewer-card {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: floatUp 600ms ease-out both;
}
.viewer-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, rgba(245,158,11,0.35), rgba(167,139,250,0.25));
}

.viewer-header { padding: 18px 18px 0; }
.viewer-header h1 { margin: 0; font-size: clamp(18px, 4vw, 26px); }
.subtitle { margin: 4px 0 14px; color: var(--muted); font-size: 14px; }

.viewer { position: relative; border-top: 1px solid var(--border); }
iframe#pdfFrame {
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  background: #f3f4f6; /* light slate for loading state */
}

/* Loader overlay */
.loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.86));
  color: var(--text);
  z-index: 5;
  opacity: 1;
  transition: opacity 300ms ease;
}
.loader.hidden { opacity: 0; pointer-events: none; }
.spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: var(--primary);
  animation: spin 900ms linear infinite;
}
.loader p { margin: 0; font-size: 14px; color: var(--muted); }

.fallback { padding: 14px; text-align: center; color: var(--muted); }
.fallback a { color: var(--primary); }

/* Footer */
.site-footer {
  margin: 24px auto;
  padding: 10px 20px;
  text-align: center;
  color: var(--muted);
}

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floatUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gradientDrift {
  0%   { transform: scale(1) translateY(0); filter: hue-rotate(0deg) saturate(110%); }
  50%  { transform: scale(1.04) translateY(-2%); filter: hue-rotate(8deg) saturate(120%); }
  100% { transform: scale(1.02) translateY(1%); filter: hue-rotate(-6deg) saturate(115%); }
}
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.18)); }
  50%      { filter: drop-shadow(0 3px 8px rgba(244, 63, 94, 0.22)); }
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .site-header { padding: 12px 14px; }
  .actions { gap: 8px; }
  .button { padding: 9px 12px; font-size: 14px; }
  iframe#pdfFrame { height: min(72vh, 800px); }
}