/* CloudyChef — site-wide utility classes for Razor views */

/* ── Layout ── */
.cc-page { min-height: 100vh; display: flex; flex-direction: column; }
.cc-main { flex: 1; }

/* ── Buttons ── */
.cc-btn {
  font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; font-size: 13px; text-decoration: none; transition: opacity 160ms;
}
.cc-btn:hover { opacity: 0.88; }
.cc-btn-primary   { background: var(--cc-clay); color: #fff; box-shadow: 0 6px 16px rgba(200,74,46,.32); }
.cc-btn-secondary { background: var(--cc-ink); color: #fff; }
.cc-btn-ghost     { background: transparent; color: var(--cc-clay-dark); border: 1.5px solid var(--cc-clay); }
.cc-btn-soft      { background: var(--cc-clay-tint); color: var(--cc-clay-dark); }
.cc-btn-tertiary  { background: #fff; color: var(--cc-ink); border: 1px solid var(--border-2); }
.cc-btn-lg { padding: 14px 26px; font-size: 14px; gap: 10px; }
.cc-btn-sm { padding: 7px 14px; font-size: 12px; gap: 6px; }
.cc-btn-full { width: 100%; }

/* ── Card ── */
.cc-card {
  background: #fff; border-radius: 16px; border: 1px solid var(--border-1);
  overflow: hidden; transition: box-shadow 200ms, transform 200ms;
}
.cc-card-hover:hover {
  box-shadow: 0 12px 28px rgba(26,24,21,.10);
  transform: translateY(-2px);
}

/* ── Score chip ── */
.cc-score-chip {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
}

/* ── Verified badge ── */
.cc-verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--cc-verified-tint); color: var(--cc-verified);
  font-size: 11px; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0.02em;
}

/* ── Trend badge ── */
.cc-trend-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
}

/* ── Score bar ── */
.cc-score-bar { display: flex; align-items: center; gap: 12px; }
.cc-score-bar-label { width: 72px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cc-fg-3, #6B6660); }
.cc-score-bar-track { flex: 1; height: 8px; background: var(--cc-paper-2, #F3EDE3); border-radius: 4px; overflow: hidden; }
.cc-score-bar-fill  { height: 100%; border-radius: 4px; }
.cc-score-bar-value { width: 36px; font-family: var(--font-display); font-weight: 800; font-size: 16px; text-align: right; }

/* ── Nav tabs ── */
.cc-tabs { display: flex; align-items: center; gap: 28px; }
.cc-tab {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--cc-fg-2, #4A463F); padding: 18px 0;
  border-bottom: 2px solid transparent; transition: color 160ms, border-color 160ms;
}
.cc-tab:hover { color: var(--cc-clay-dark); }
.cc-tab.active { color: var(--cc-clay-dark); border-bottom-color: var(--cc-clay); }

/* ── Form field ── */
.cc-field-wrap {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 10px; padding: 0 14px; height: 50px;
  border: 1.5px solid var(--border-1); transition: border-color 160ms;
}
.cc-field-wrap:focus-within { border-color: var(--cc-clay); }
.cc-field-wrap input, .cc-field-wrap select {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 15px; color: var(--cc-ink); height: 100%;
}

/* ── Chip / filter ── */
.cc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  border: 1px solid var(--border-1); background: #fff; color: var(--cc-ink);
  text-decoration: none; transition: all 120ms;
}
.cc-chip.active { border-color: var(--cc-clay); background: var(--cc-clay-tint); color: var(--cc-clay-dark); }
.cc-chip:hover  { border-color: var(--cc-clay); }

/* ── Avatar ── */
.cc-avatar {
  border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; flex-shrink: 0;
}

/* ── Section ── */
.cc-section { padding: 64px 0; }
.cc-section-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ── Utility bar ── */
.cc-utility-bar {
  background: var(--cc-ink); color: rgba(255,255,255,.65);
  padding: 8px 32px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600;
}

/* ── Main header ── */
.cc-header {
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-1);
  position: sticky; top: 0; z-index: 50;
}
.cc-header-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
  height: 72px; display: flex; align-items: center; gap: 24px;
}
.cc-nav-item {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  padding: 8px 0; border-bottom: 2px solid transparent; transition: all 160ms;
  color: var(--cc-ink-soft, #2D2924);
}
.cc-nav-item:hover, .cc-nav-item.active { color: var(--cc-clay-dark); border-bottom-color: var(--cc-clay); }

/* ── Footer ── */
.cc-footer { background: var(--cc-ink); color: #fff; padding: 64px 32px 32px; margin-top: 96px; }

/* ── Open/closed dot ── */
.cc-open-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ── Gallery grid ── */
.cc-photo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.cc-photo-btn  { background: none; border: none; padding: 0; cursor: pointer; border-radius: 12px; overflow: hidden; display: block; }

/* ── Price symbols ── */
.cc-price-active   { color: var(--cc-ink); font-size: 14px; }
.cc-price-inactive { color: #CFC8BC; font-size: 14px; }