@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============ EasyCarbo design tokens ============ */
:root {
  --ec-primary: #2F9D66;
  --ec-primary-dark: #207249;
  --ec-primary-light: #E7F6EE;
  --ec-accent: #E69B3D;
  --ec-accent-dark: #C97F22;
  --ec-info: #2B7BC8;
  --ec-success: #2F9D66;
  --ec-warning: #F2B84B;
  --ec-error: #D9534F;
  --ec-bg: #F5F7F6;
  --ec-surface: #FFFFFF;
  --ec-brand-red: #E8392F;
  --ec-brand-blue: #2E6FC9;
  --ec-brand-blue-dark: #163E80;
  --ec-sidebar: #142219;
  --ec-sidebar-2: #1B3326;
  --ec-text: #1F2823;
  --ec-text-muted: #6B7670;
  --ec-border: rgba(20, 40, 30, 0.08);

  --ec-radius-sm: 8px;
  --ec-radius: 14px;
  --ec-radius-lg: 20px;
  --ec-shadow-sm: 0 1px 3px rgba(20, 40, 30, 0.06);
  --ec-shadow: 0 4px 16px rgba(20, 40, 30, 0.08);
  --ec-shadow-lg: 0 12px 32px rgba(20, 40, 30, 0.12);
  --ec-transition: all 0.18s ease;

  /* legacy aliases kept for compatibility */
  --easycarbo-primary: var(--ec-primary);
  --easycarbo-primary-dark: var(--ec-primary-dark);
  --easycarbo-accent: var(--ec-accent);
}

* { box-sizing: border-box; }

html, body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--ec-bg);
  color: var(--ec-text);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin-top: 0;
  color: var(--ec-text);
  letter-spacing: -0.01em;
}

h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 1.85rem; font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }

a { color: var(--ec-primary); }

/* ============ Layout shell ============ */
.page-premium {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main .content {
  padding: 1.75rem 2rem 3rem;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 640px) {
  main .content { padding: 1.25rem 1rem 2rem; }
}

/* ============ Cards ============ */
.card {
  background: var(--ec-surface);
  border-radius: var(--ec-radius);
  border: 1px solid var(--ec-border);
  box-shadow: var(--ec-shadow-sm);
  transition: var(--ec-transition);
}

.card:hover {
  box-shadow: var(--ec-shadow);
}

.dashboard-card {
  background: var(--ec-surface);
  border-radius: var(--ec-radius);
  border: 1px solid var(--ec-border);
  box-shadow: var(--ec-shadow-sm);
  padding: 1.25rem;
}

.dashboard-card .card-body { padding: 0; }
.dashboard-card h5 { color: var(--ec-text-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.dashboard-card h3 { color: var(--ec-primary-dark); font-weight: 800; }

/* ============ Buttons ============ */
.btn {
  border-radius: var(--ec-radius-sm);
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  transition: var(--ec-transition);
  border-width: 1.5px;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  color: #fff;
  background-color: var(--ec-primary);
  border-color: var(--ec-primary);
  box-shadow: 0 2px 8px rgba(47, 157, 102, 0.25);
}
.btn-primary:hover { background-color: var(--ec-primary-dark); border-color: var(--ec-primary-dark); }

.btn-success {
  background-color: var(--ec-primary);
  border-color: var(--ec-primary);
  color: #fff;
}
.btn-success:hover { background-color: var(--ec-primary-dark); border-color: var(--ec-primary-dark); }

.btn-outline-primary { color: var(--ec-primary-dark); border-color: var(--ec-primary); }
.btn-outline-primary:hover { background-color: var(--ec-primary); color: #fff; }

.btn-outline-success { color: var(--ec-accent-dark); border-color: var(--ec-primary); }
.btn-outline-success:hover { background-color: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }

.btn-link { font-weight: 500; }

.bg-success { background-color: var(--ec-primary) !important; }
.text-success { color: var(--ec-primary) !important; }
.progress-bar.bg-success { background-color: var(--ec-primary) !important; }
.bg-secondary { background-color: #eef1ef !important; color: #333 !important; }
.text-muted { color: var(--ec-text-muted) !important; }

/* focus ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 3px rgba(47, 157, 102, 0.18);
  border-color: var(--ec-primary);
}

/* ============ Forms ============ */
.form-select, .form-control {
  border-radius: var(--ec-radius-sm);
  border: 1.5px solid var(--ec-border);
  padding: 0.55rem 0.85rem;
}

label.form-label, label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ec-text-muted);
  margin-bottom: 0.3rem;
  display: inline-block;
}

/* ============ Toasts ============ */
.toast-container .toast { border-radius: var(--ec-radius-sm); box-shadow: var(--ec-shadow-lg); border: none; }
.toast-container .text-bg-success { background-color: var(--ec-primary-dark) !important; }
.toast-container .text-bg-primary { background-color: var(--ec-info) !important; }

/* ============ Top navbar (premium) ============ */
.topnav {
  background: #fff;
  border-bottom: 1px solid var(--ec-border);
  padding: 0.75rem 0;
}

.topnav .navbar-brand {
  color: var(--ec-brand-blue) !important;
  font-weight: 600 !important;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.topnav .navbar-brand strong { font-weight: 800; }

.topnav-collapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.topnav-links {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topnav-links .nav-link {
  color: var(--ec-text) !important;
  font-weight: 500;
  padding: 0.5rem 0.85rem !important;
  border-radius: var(--ec-radius-sm);
  text-decoration: none !important;
  transition: var(--ec-transition);
}

.topnav-links .nav-link:hover {
  background: rgba(46, 111, 201, 0.08);
  color: var(--ec-brand-blue) !important;
}

.topnav-links .nav-link.active {
  background: var(--ec-brand-blue);
  color: #fff !important;
}

.topnav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topnav-hello { font-size: 0.85rem; color: var(--ec-text-muted); }
.topnav-logout { color: var(--ec-brand-red) !important; padding: 0 !important; font-weight: 600; }
.topnav-logout:hover { text-decoration: underline; }

.topnav-toggle-btn {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 0.4rem;
}
.topnav-toggle-btn span { width: 22px; height: 2px; background: var(--ec-brand-blue); border-radius: 2px; }
.navbar-toggler { display: none; }

@media (max-width: 768px) {
  .topnav .container-fluid { flex-wrap: wrap; }
  .topnav-toggle-btn { display: flex; }
  .topnav-collapse {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 0.75rem;
  }
  .navbar-toggler:checked ~ .topnav-collapse,
  #topnav-toggle:checked ~ .topnav-collapse { display: flex; }
  .topnav-links { flex-direction: column; }
  .topnav-actions { margin-top: 0.75rem; flex-wrap: wrap; }
}

/* ============ Hero (Home) ============ */
.ec-hero {
  background: linear-gradient(135deg, var(--ec-primary-light) 0%, #fff 60%);
  border-radius: var(--ec-radius-lg);
  padding: 2.5rem;
}

@media (max-width: 768px) {
  .ec-hero { padding: 1.5rem; border-radius: var(--ec-radius); }
}

.hero-carousel .carousel-frame { background: #fff; border-radius: var(--ec-radius); border: 1px solid var(--ec-border); padding: 6px; box-shadow: var(--ec-shadow); }
.hero-carousel .carousel-controls .dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; }

.carousel-frame { height: 320px; position: relative; }
.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 1;
  transition: opacity 400ms ease-in-out;
  pointer-events: none;
  display: block;
}
.carousel-slide.active { opacity: 1; z-index: 2; pointer-events: auto; }
.hero-carousel .carousel-frame { overflow: hidden; }
.hero-carousel .carousel-controls .dot.btn-light { background: #fff; border: 1px solid #ddd; }
.hero-carousel .carousel-controls .dot.btn-primary { background: var(--ec-primary); border-color: var(--ec-primary); }
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Feature cards on Home */
.feature-card {
  height: 100%;
  border-radius: var(--ec-radius);
  border: 1px solid var(--ec-border);
  padding: 1.5rem;
  transition: var(--ec-transition);
}
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--ec-shadow); }
.feature-card .feature-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--ec-primary-light);
  color: var(--ec-primary-dark);
  font-size: 1.3rem;
  margin-bottom: 0.85rem;
}

/* ============ Progress bars ============ */
.progress { border-radius: 999px; background-color: #eef1ef; overflow: hidden; }
.progress-bar { border-radius: 999px; }
.bg-light { background-color: #eef1ef !important; border-radius: 999px; overflow: hidden; }

/* ============ Language selector ============ */
.language-select {
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--ec-radius-sm);
  padding: 0.35rem 0.6rem;
  border: 1.5px solid transparent;
  background-color: transparent;
  cursor: pointer;
}

.language-select.lang-light {
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  background-color: rgba(255,255,255,0.08);
}
.language-select.lang-light:hover { background-color: rgba(255,255,255,0.14); }
.language-select.lang-light option { color: #1c2733; }

.language-select.lang-dark {
  color: var(--ec-text);
  border-color: var(--ec-border);
  background-color: var(--ec-bg);
}
.language-select.lang-dark:hover { border-color: var(--ec-brand-blue); }
.language-select.lang-dark:focus {
  outline: none;
  border-color: var(--ec-brand-blue);
  box-shadow: 0 0 0 3px rgba(46, 111, 201, 0.12);
}

/* ============ Lists ============ */
.list-group-item {
  border-color: var(--ec-border);
  padding: 0.85rem 1rem;
}
.list-group-item strong { color: var(--ec-text); }
.list-group-item .badge { background: var(--ec-primary-light); color: var(--ec-primary-dark); font-weight: 600; }
.list-group-item-action:hover { background: var(--ec-primary-light); cursor: pointer; }

/* ============ Modals ============ */
.modal-content { border-radius: var(--ec-radius); border: none; box-shadow: var(--ec-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--ec-border); }

/* ============ Responsive tweaks ============ */
@media (max-width: 768px) { .dashboard-card { margin-bottom: 1rem; } }
@media (max-width: 576px) { .dashboard-cta .btn { padding: 0.9rem 1rem; font-size: 1rem; } }

/* ============ Public calculator / food detail (shared) ============ */
.calc-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(20, 40, 60, 0.08), 0 2px 8px rgba(20, 40, 60, 0.04);
  padding: 2.25rem 1.75rem;
  text-align: center;
}

.calc-tagline {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1c2733;
  margin-bottom: 1.75rem;
}

.calc-result {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eef1f4;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
}

.calc-result-value {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--ec-brand-red, #E8392F);
  letter-spacing: -0.02em;
}

.calc-result-suffix {
  font-size: 1rem;
  color: #6b7680;
  font-weight: 500;
}

.calc-premium-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border-radius: 18px;
  background: linear-gradient(120deg, var(--ec-brand-blue, #2E6FC9) 0%, var(--ec-brand-red, #E8392F) 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(46, 111, 201, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.calc-premium-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(46, 111, 201, 0.32);
  color: #fff;
}

.calc-premium-cta-icon { font-size: 1.3rem; line-height: 1; }

.calc-premium-cta-text {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.calc-premium-cta-arrow {
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform 0.18s ease;
}

.calc-premium-cta:hover .calc-premium-cta-arrow {
  transform: translateX(4px);
}

.calc-field {
  position: relative;
  text-align: left;
  margin-bottom: 1.25rem;
}

.calc-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7680;
  margin-bottom: 0.4rem;
}

.calc-input {
  width: 100%;
  border: 1px solid #e2e7ec;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-size: 1.05rem;
  background: #fafbfc;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.calc-input:focus {
  outline: none;
  border-color: var(--ec-brand-blue, #2E6FC9);
  box-shadow: 0 0 0 3px rgba(46, 111, 201, 0.12);
  background: #fff;
}

.calc-suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.3rem;
  background: #fff;
  border: 1px solid #e2e7ec;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(20, 40, 60, 0.12);
  list-style: none;
  padding: 0.35rem;
  max-height: 260px;
  overflow-y: auto;
}

.calc-suggestions li {
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
}

.calc-suggestions li:hover {
  background: #f0f5fb;
}

.calc-unit-input-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.calc-unit-input-row .calc-input {
  flex: 1;
}

.calc-unit-suffix {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b7680;
  white-space: nowrap;
}

.calc-mode-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: var(--ec-brand-blue, #2E6FC9);
  text-decoration: underline;
  cursor: pointer;
}

.calc-no-results {
  font-size: 0.85rem;
  color: #9aa3ab;
  margin-top: 0.4rem;
}

.calc-search-again {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef1f4;
}

.calc-related {
  max-width: 460px;
  text-align: left;
  padding: 1.5rem 1.75rem;
}

.calc-related-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1c2733;
  margin-bottom: 0.85rem;
}

.calc-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calc-related-list a {
  color: var(--ec-brand-blue, #2E6FC9);
  text-decoration: none;
  font-size: 0.9rem;
}

.calc-related-list a:hover {
  text-decoration: underline;
}