/* Nuvine homepage theme override — loaded after the vendor Bootstrap/theme
   stack in layouts/app.blade.php. Overrides real vendor class selectors
   (verified against the actual loaded files, bootstrap-dark.css and
   style-dark.css) rather than the --bs-* variables, which the vendor
   component rules do not consume. */

:root {
  --body: #17181c;
  --paper: #1e1f24;
  --paper-2: #26272d;
  --border: #2e2f36;
  --text: #cfd0d4;
  --text-dim: #83858f;
  --text-bright: #ffffff;
  --blue: #3b6fea;
  --blue-dim: #3b6fea22;
  --blue-border: #3b6fea55;
  --blue-bright: #6d94f0;
  --green: #34c47a;
  --green-dim: #34c47a1f;
  --red: #f2554a;
  --amber: #e2a13a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Base ---------- */
body {
  background-color: var(--body) !important;
  color: var(--text) !important;
}
a {
  color: var(--blue-bright);
}
a:hover {
  color: var(--blue-bright);
}

/* ---------- Nav ---------- */
#topnav.scroll {
  background-color: var(--paper) !important;
  box-shadow: 0 1px 0 var(--border) !important;
}
#topnav .navigation-menu > li > a {
  color: var(--text) !important;
}
#topnav .navigation-menu > li:hover > a,
#topnav .navigation-menu > li.active > a,
#topnav .navigation-menu > li > a:hover,
#topnav .navigation-menu > li > a:active {
  color: var(--blue-bright) !important;
}
#topnav .navigation-menu > li .submenu {
  background-color: var(--paper) !important;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}
#topnav .navigation-menu > li .submenu li a {
  color: var(--text) !important;
}
#topnav .navigation-menu > li .submenu li a:hover {
  color: var(--blue-bright) !important;
}
#topnav .has-submenu .submenu .submenu-arrow {
  border-color: var(--text-dim);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}
.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--blue-bright);
  border-color: var(--blue-bright);
  color: #ffffff;
}
.btn-soft-success {
  background-color: var(--green-dim) !important;
  border: 1px solid var(--green-dim) !important;
  color: var(--green) !important;
}
.btn-soft-success:hover,
.btn-soft-success:focus,
.btn-soft-success:active,
.btn-soft-success.active,
.btn-soft-success.focus {
  background-color: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
}

/* ---------- Soft backgrounds / badges ---------- */
.bg-soft-primary {
  background-color: var(--blue-dim) !important;
  border: 1px solid var(--blue-border) !important;
  color: var(--blue-bright) !important;
}
.bg-soft-warning {
  background-color: #e2a13a1f !important;
  border: 1px solid #e2a13a4d !important;
  color: var(--amber) !important;
}
.bg-soft-success {
  background-color: var(--green-dim) !important;
  border: 1px solid var(--green-dim) !important;
  color: var(--green) !important;
}

/* ---------- Hero decorative circles ---------- */
.background-effect .circles li {
  background: var(--blue-dim);
}

/* ---------- Hero text colors on token system ---------- */
.bg-home .text-white {
  color: var(--text-bright) !important;
}
.bg-home .text-muted {
  color: var(--text-dim) !important;
}

/* ---------- Cards (features + pricing both use the base .card) ---------- */
.card {
  background-color: var(--paper) !important;
  border-color: var(--border) !important;
}
.card.features .icon-color,
.icon-color {
  color: var(--blue-bright);
}
.pricing .price {
  color: var(--text-bright);
}

/* ---------- Countdown ---------- */
.counter-box {
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 8px;
}
.counter-box h2 {
  color: var(--text-bright);
}
.counter-box span {
  color: var(--text-dim);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--body) !important;
  color: var(--text-dim) !important;
  border-top: 1px solid var(--border);
}
.footer .footer-head {
  color: var(--text-bright) !important;
}
.footer .text-foot {
  color: var(--text-dim) !important;
}
.footer .text-foot:hover {
  color: var(--text-bright) !important;
}
.footer .footer-bar {
  border-top: 1px solid var(--border) !important;
}

/* ---------- Back to top ---------- */
.back-to-top {
  background: var(--blue) !important;
  color: #ffffff !important;
}
.back-to-top:hover {
  background: var(--blue-bright) !important;
}

/* ---------- Product CTA banner component ---------- */
.product-cta-banner {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.product-cta-banner h2 {
  color: var(--text-bright);
  font-size: 26px;
  margin-bottom: 8px;
}
.product-cta-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.btn-outline-primary {
  color: var(--blue-bright);
  border-color: var(--blue-border);
}
.btn-outline-primary:hover {
  color: #ffffff;
  background-color: var(--blue);
  border-color: var(--blue);
}

/* ---------- FAQ accordion (payments page) ---------- */
.accordion-item {
  background-color: var(--paper) !important;
  border-color: var(--border) !important;
}
.accordion-button {
  color: var(--text) !important;
  background-color: var(--paper) !important;
}
.accordion-button:not(.collapsed) {
  color: var(--blue-bright) !important;
  background-color: var(--paper-2) !important;
  box-shadow: inset 0 -1px 0 var(--border) !important;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236d94f0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-body {
  color: var(--text-dim);
}

/* ---------- Hero/section spacing fix (bg-half-170 content pages) ---------- */
/* The vendor's .bg-half-170 (170px top+bottom padding) and .section (100px
   top padding) stack into a 270px dead gap on these 6 simple text-only
   heroes — that padding was designed for a hero with a background image
   filling the space, which none of these have. Tightened without touching
   .section's general padding elsewhere on the page. */
.bg-half-170 {
  padding: 100px 0 60px;
}
.bg-half-170 + .section {
  padding-top: 60px;
}

/* ---------- Nav submenu keyboard accessibility ---------- */
/* The vendor theme (style.css) only opens a submenu on :hover, so a
   keyboard-only user tabbing to "Produkte"/"Über uns" can never reach the
   links inside -- Enter on the toggle just follows its href="#" to
   nowhere. Mirrors the vendor's own :hover visibility rule (same
   min-width breakpoint, same properties) for :focus-within, so tabbing
   into a submenu link opens and keeps open the menu it belongs to. */
@media (min-width: 768px) {
  #topnav .navigation-menu > li.has-submenu:focus-within > .submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
  }
}

/* ---------- Mobile menu toggle ---------- */
/* .navbar-toggle is now a real <button> (was a <div onclick>, unreachable
   by keyboard/screen readers -- see nav.blade.php) so it can be focused and
   activated with Enter/Space. The vendor rule already zeroes border/padding
   but not the browser's default button background, which would otherwise
   show as a grey box around the hamburger icon. */
#topnav .navbar-toggle {
  background: transparent;
}

/* ---------- Keyboard focus visibility ---------- */
/* The vendor theme (style-dark.css) suppresses the default focus outline
   in several places (outline: none !important) without providing a
   replacement, leaving keyboard users with no visible focus anywhere on
   the public site. !important needed to reliably win against those. */
:focus-visible {
  outline: 2px solid var(--blue-bright) !important;
  outline-offset: 2px !important;
}