/* Savour Pro: prijspagina, homepage-blok, abonnement in Instellingen en de melding bij importeren. */

/* ---- Prijzen ---- */
.pro-current {
  margin: 0 0 var(--sv-space-5);
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-gold);
  border-radius: var(--sv-radius);
  color: var(--sv-text);
}
.pro-current span {
  color: var(--sv-text-2);
}
.pro-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sv-space-4);
  margin: var(--sv-space-2) 0 var(--sv-space-4);
}
.pro-price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  padding: var(--sv-space-5);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-surface);
}
.pro-price.is-featured {
  border-color: var(--sv-gold);
}
.pro-price h3 {
  margin: 0;
  font-family: var(--sv-font-display);
  font-size: var(--sv-fs-lg);
}
.pro-price .muted {
  margin: 0;
  flex: 1;
}
.pro-price .btn {
  width: 100%;
  margin-top: var(--sv-space-2);
}
.pro-amount strong {
  font-family: var(--sv-font-display);
  font-size: 34px;
  font-weight: 500;
  color: var(--sv-text);
}
.pro-amount span {
  margin-left: var(--sv-space-2);
  color: var(--sv-text-2);
}
.pro-badge {
  position: absolute;
  top: calc(var(--sv-space-3) * -1);
  right: var(--sv-space-4);
  padding: 2px var(--sv-space-3);
  border-radius: 999px;
  background: var(--sv-gold);
  color: #1d1b17;
  font-size: var(--sv-fs-xs);
  font-weight: 600;
}
.pro-pay {
  font-size: var(--sv-fs-sm);
}
.pro-compare {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sv-space-3) 0 var(--sv-space-5);
  font-size: var(--sv-fs-md);
}
.pro-compare th,
.pro-compare td {
  padding: var(--sv-space-3) var(--sv-space-2);
  border-bottom: 1px solid var(--sv-line);
  text-align: left;
}
.pro-compare th:not(:first-child),
.pro-compare td:not(:first-child) {
  width: 64px;
  text-align: center;
}
.pro-compare td:last-child {
  color: var(--sv-gold);
  font-weight: 600;
}
.pro-compare th {
  color: var(--sv-text-2);
  font-weight: 600;
}

/* ---- Homepage ---- */
.landing-pro {
  text-align: center;
}
.landing-pro p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.landing-pro-price {
  margin: var(--sv-space-4) 0;
  color: var(--sv-text-2);
}
.landing-pro-price strong {
  font-family: var(--sv-font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--sv-gold);
}

/* ---- Instellingen ---- */
.plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-4);
}
.plan-row b {
  font-family: var(--sv-font-display);
  font-size: var(--sv-fs-lg);
}
.plan-row small {
  display: block;
  margin-top: var(--sv-space-1);
  color: var(--sv-text-2);
}
.plan-row .btn {
  flex: 0 0 auto;
}

/* ---- Kleine Pro-melding in Alle recepten ---- */
.recipe-pro-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-1) var(--sv-space-3);
  margin: 0 0 var(--sv-space-3);
  padding: var(--sv-space-2) var(--sv-space-3);
  border: 1px solid color-mix(in srgb, var(--sv-gold) 45%, transparent);
  border-radius: var(--sv-radius);
  background: color-mix(in srgb, var(--sv-gold) 7%, transparent);
  font-size: var(--sv-fs-sm);
}
.recipe-pro-hint b {
  color: var(--sv-gold);
  white-space: nowrap;
}
.recipe-pro-hint b::before {
  content: '✦ ';
}
.recipe-pro-hint span {
  flex: 1 1 260px;
  color: var(--sv-text-2);
}
.recipe-pro-hint small {
  color: var(--sv-text-3, var(--sv-text-2));
  white-space: nowrap;
}
.recipe-pro-hint .btn {
  flex: 0 0 auto;
}
.recipe-pro-hint-close {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--sv-text-2);
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.recipe-pro-hint-close:hover {
  color: var(--sv-text);
}
/* Smal scherm: titel en × bovenaan, tekst eronder, dan teller en knop. */
@media (max-width: 900px) {
  .recipe-pro-hint b {
    flex: 1 1 auto;
  }
  .recipe-pro-hint-close {
    order: 1;
  }
  .recipe-pro-hint span {
    order: 2;
    flex-basis: 100%;
  }
  .recipe-pro-hint small {
    order: 3;
    flex: 1 1 auto;
  }
  .recipe-pro-hint .btn {
    order: 4;
  }
}

/* ---- Importscherm ---- */
.import-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2) var(--sv-space-4);
  margin: var(--sv-space-3) 0 var(--sv-space-4);
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-radius);
  background: var(--sv-surface);
}
.import-plan b {
  flex: 0 0 100%;
}
.import-plan span {
  flex: 1 1 320px;
  color: var(--sv-text-2);
  font-size: var(--sv-fs-sm);
}
.import-plan.is-pro {
  border-color: var(--sv-gold);
}
.pro-tag {
  display: inline-block;
  margin-left: var(--sv-space-1);
  padding: 0 var(--sv-space-2);
  border: 1px solid var(--sv-gold);
  border-radius: 999px;
  color: var(--sv-gold);
  font-size: var(--sv-fs-xs);
  font-weight: 600;
  vertical-align: middle;
}
.import-option.is-locked {
  opacity: 0.75;
}

@media (max-width: 760px) {
  .pro-prices {
    grid-template-columns: 1fr;
    gap: var(--sv-space-5);
  }
  .plan-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .pro-compare {
    font-size: var(--sv-fs-sm);
  }
}

/* ---- Beheerscherm: zoeken, accountlabels ---- */
.admin-filter {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.admin-filter input,
.admin-filter select {
  flex: 1 1 220px;
  padding: 9px 12px;
  border: 1px solid #2c3837;
  border-radius: 10px;
  background: #0b1213;
  color: #eee8dc;
}
.admin-filter select {
  flex: 0 1 180px;
}
.admin-table td small {
  display: block;
  color: #8b958f;
  margin-top: 3px;
}
.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #2c3837;
  font-size: 11px;
  white-space: nowrap;
  color: #c9c3b6;
}
.admin-badge.pro,
.admin-badge.team {
  border-color: #e8ca8d;
  color: #e8ca8d;
}
.admin-badge.gift {
  border-color: #8fb996;
  color: #8fb996;
}
.admin-badge.trial {
  border-color: #6f8fb0;
  color: #9ab6d4;
}
.admin-badge.warn {
  border-color: #b07a5c;
  color: #d9a586;
}

/* ---- Teams: plannen op de Pro-pagina en teambeheer in Instellingen ---- */
.pro-trial-note {
  margin: 0 0 var(--sv-space-4);
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-gold);
  border-radius: var(--sv-radius);
  background: color-mix(in srgb, var(--sv-gold) 10%, transparent);
}
.pro-team-prices {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pro-team .pro-year-link {
  margin-top: var(--sv-space-2);
}
.team-manager {
  margin-top: var(--sv-space-4);
  padding-top: var(--sv-space-4);
  border-top: 1px solid var(--sv-line);
}
.team-manager h4 {
  margin: 0 0 var(--sv-space-1);
}
.team-add {
  display: flex;
  gap: 8px;
  margin-top: var(--sv-space-3);
}
.team-add input {
  flex: 1;
  min-width: 0;
}

/* Beheerscherm: groei (nieuwe accounts per week) */
.admin-growth-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  color: #8b958f;
  font-size: 13px;
}
.admin-growth-total b {
  font-family: var(--sv-font-display);
  font-size: 28px;
  color: #eee8dc;
}
.admin-growth-bars {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  height: 160px;
}
.admin-growth-bar {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  height: 100%;
  gap: 4px;
  font-size: 11px;
  color: #8b958f;
}
.admin-growth-bar .bar {
  align-self: end;
  width: 70%;
  min-height: 2px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #e8ca8d, #9d8959);
}
.admin-growth-bar .count {
  color: #eee8dc;
}

/* Bedrijfsgegevens onderaan contact, privacy en voorwaarden: klein en rustig. */
.company-line {
  margin-top: var(--sv-space-6, 32px) !important;
  padding-top: var(--sv-space-3);
  border-top: 1px solid var(--sv-line);
  font-size: 12px !important;
  color: color-mix(in srgb, var(--sv-text) 50%, transparent) !important;
}

/* ---- Beheer: acties per account (Pro geven, verwijderen) ---- */
.admin-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}
.admin-ghost.admin-danger {
  color: #e59a8c;
  border-color: #5a3a34;
}
.admin-ghost.admin-danger:hover {
  color: #ffb3a5;
  border-color: #b85c4c;
}

/* ---- Admin: tabbladen (Overzicht, Bezoekers, Accounts, Fouten, Advertenties) ---- */
.admin-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 -4px 22px;
  padding: 10px 4px;
  background: linear-gradient(#030506 75%, rgba(3, 5, 6, 0));
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar {
  display: none;
}
.admin-tabs button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #283333;
  background: #091011;
  color: #b9c0ba;
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: var(--sv-fs-sm);
  cursor: pointer;
}
.admin-tabs button:hover {
  border-color: #806f4b;
  color: #e1c37a;
}
.admin-tabs button.is-on {
  background: #e8ca8d;
  border-color: #e8ca8d;
  color: #111;
  font-weight: 600;
}
.admin-tab-badge {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #b85c4c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.admin-tab {
  display: none;
}
.admin-tab.is-on {
  display: block;
}
.admin-panel-note {
  color: #8f9994;
  font-size: var(--sv-fs-sm);
  margin: -4px 0 14px;
}
.admin-error-msg {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: #e7c9c2;
  word-break: break-word;
}
.admin-error-msg small {
  display: block;
  color: #8f9994;
  margin-top: 3px;
}
/* Fouten: het volledige apparaat (user-agent) klein onder het apparaat, om bots te herkennen. */
.admin-error-agent {
  display: block;
  margin-top: 6px;
  max-width: 260px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  word-break: break-word;
}
/* Admin → Referral */
.admin-subhead {
  margin: 28px 0 10px;
  font-size: 18px;
}
.admin-referral-mail {
  display: block;
  color: #8f9994;
  font-size: 12px;
  margin-top: 2px;
}
.admin-referral-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(238, 232, 220, 0.2);
  color: #c9cfcb;
}
.admin-referral-status.is-on {
  border-color: #e8ca8d;
  color: #e8ca8d;
}
.admin-referral-status.is-wait {
  border-color: rgba(232, 202, 141, 0.4);
  color: #d8c38e;
}