/* =========================
   FONT FACES (PROJECT FONTS)
   ========================= */
@font-face {
  font-family: Inter;
  src: url("assets/fonts/Inter-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: Inter;
  src: url("assets/fonts/Inter-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: Inter;
  src: url("assets/fonts/Inter-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: Montserrat;
  src: url("assets/fonts/Montserrat-Bold.ttf");
  font-weight: 700;
}

/* =========================
   DESIGN TOKENS
   ========================= */
:root {
  /* Colors */
  --color-bg-app: #f7f7f9;
  --color-bg-card: #ffffff;
  --color-text-primary: #111;
  --color-text-secondary: #666;
  --color-text-muted: #444;
  --color-border-light: #e6e6e6;
  --color-divider: #eee;

  --color-brand-primary: #6b3cff;
  --color-cta-primary: #4285f4;
  --color-rating-star: #f4b400;

  /* Typography */
  --font-primary: Inter, system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-accent: Montserrat, Inter, system-ui, sans-serif;

  --font-size-h1: 20px;
  --font-size-body: 14px;
  --font-size-input: 15px;
  --font-size-button: 16px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 32px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-card: 0 12px 30px rgba(0,0,0,0.08);

  /* Heights */
  --height-control: 52px;
}

/* =========================
   RESET / BASE
   ========================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-primary);
  background: var(--color-bg-app);
  color: var(--color-text-primary);
}

/* =========================
   SCREEN LAYOUT
   ========================= */
.screen {
  min-height: 100vh;
  padding: var(--space-md);
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow-y: auto;
}

/* =========================
   CARD
   ========================= */
.card {
  width: 100%;
  max-width: 360px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-card);
  max-height: none;
  display: flex;
  flex-direction: column;
}

/* =========================
   CARD CONTENT
   ========================= */
.card-content {
  text-align: center;
  padding-top: var(--space-xl);
}

/* Push CTA to bottom */
.card-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

/* =========================
   BRAND
   ========================= */
.brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.brand img {
  height: 20px;
  width: auto;
  opacity: 0.9;
}

/* =========================
   TYPOGRAPHY
   ========================= */
h1 {
  font-family: var(--font-accent);
  font-size: var(--font-size-h1);
  margin: 0;
}

.note {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
}

.rating {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--font-size-body);
}

.star {
  color: var(--color-rating-star);
}

.divider {
  height: 1px;
  background: var(--color-divider);
  margin: 18px 0;
}

/* =========================
   BUTTONS
   ========================= */
.primary {
  height: var(--height-control);
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-cta-primary);
  color: #ffffff;
  font-size: var(--font-size-button);
  font-weight: 600;
  font-family: var(--font-primary);
  cursor: pointer;
}

.secondary {
  background: none;
  border: none;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  cursor: pointer;
}

/* =========================
   FLOW SCREENS
   ========================= */
.flow {
  display: none;
  height: 100%;
}

.flow.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* =========================
   FORMS / INPUTS
   ========================= */
.form {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.input {
  height: var(--height-control);
  padding: 0 16px;
  font-size: var(--font-size-input);
  font-family: var(--font-primary);
  color: var(--color-text-primary);

  background: #fafafa;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);

  transition: border-color 0.2s ease,
              box-shadow 0.2s ease,
              background 0.2s ease;
}

.input::placeholder {
  color: #888;
}

.input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--color-cta-primary);
  box-shadow: 0 0 0 3px rgba(66,133,244,0.15);
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

/* =========================
   SEARCH RESULTS (SALES UI)
   ========================= */

.results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* REMOVE internal scrolling */
  max-height: none;
  overflow: visible;

  margin-top: 16px;
}

/* Individual result card */
.result-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  background: #fafafa;
  text-align: left;
}

.result-item:hover {
  background: #f0f4ff;
  border-color: var(--color-cta-primary);
}

.result-item.active {
  background: #e8f0fe;
  border-color: var(--color-cta-primary);
}

.result-name {
  font-weight: 600;
  font-size: 14px;
}

.result-meta {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.hidden { display: none; }

.summary-card {
  margin-top: 18px; /* stronger separation from H1 */
  padding: 16px 16px 18px;

  /* Very subtle brand tint */
  background: linear-gradient(
    180deg,
    rgba(107, 60, 255, 0.08),
    rgba(107, 60, 255, 0.02)
  );

  border-radius: var(--radius-lg);

  /* Softer accent strip */
  border-left: 3px solid var(--color-brand-primary);

  /* Extremely light perimeter definition */
  border: 1px solid rgba(0, 0, 0, 0.035);

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.05);

  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

/* Headings should not stick to cards */
.card-content h1 {
  margin-bottom: 14px;
}

.summary-card strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.summary-card .note {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 3px;
}