/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

.sofbac-clean-home {
  max-width: 1000px;
  margin: auto;
  padding: 30px;
}

.sofbac-clean-home h1 {
  color: #d4af37;
  text-align: center;
  margin: 30px 0;
}

.sofbac-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sofbac-box {
  background: #0b0f16;
  border: 1px solid #d4af37;
  padding: 30px;
  border-radius: 12px;
  text-decoration: none;
  color: white;
  transition: 0.2s;
}

.sofbac-box:hover {
  background: #111;
  transform: translateY(-3px);
}

.sofbac-links {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.sofbac-links a {
  border: 1px solid #d4af37;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}


/* SOFBAC CLEAN CLIENT AREA */
.sofbac-clean-home {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 18px 70px;
}

.sofbac-clean-home h1 {
  color: #d4af37 !important;
  text-align: center;
  margin: 32px 0 24px;
  font-size: 30px;
}

.sofbac-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}

.sofbac-box {
  display: block;
  background: linear-gradient(180deg,#0b0f16 0%,#07090d 100%) !important;
  border: 1px solid rgba(212,175,55,.38) !important;
  padding: 34px;
  border-radius: 18px;
  text-decoration: none !important;
  color: #f4f1ea !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.32);
}

.sofbac-box h2 {
  color: #fff !important;
  margin: 0 0 10px;
}

.sofbac-box p {
  color: #d8dbe2 !important;
  margin: 0 0 18px;
}

.sofbac-box span {
  display: inline-block;
  background: linear-gradient(135deg,#d4af37,#b99627);
  color: #0b0b0c !important;
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 800;
}

.sofbac-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

.sofbac-links a {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,#0b0f16 0%,#07090d 100%) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
  border-radius: 16px;
  color: #f4f1ea !important;
  text-decoration: none !important;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.sofbac-box:hover,
.sofbac-links a:hover {
  border-color: #f1c94a !important;
  transform: translateY(-3px);
  transition: .22s ease;
}

@media(max-width:900px) {
  .sofbac-grid,
  .sofbac-links {
    grid-template-columns: 1fr;
  }
}

/* SOFBAC FINAL WHITE BOX OVERRIDE - ACTIVE THEME */
.home-shortcuts a,
.home-shortcuts .tile,
.home-shortcuts .col-md-4,
.home-shortcuts .col-sm-6,
.client-home-panels .panel,
.client-home-panels .card,
.tiles .tile,
.tile,
.card,
.panel,
a[href*="announcements"],
a[href*="serverstatus"],
a[href*="knowledgebase"],
a[href*="download"],
a[href*="submitticket"],
a[href*="clientarea"],
a[href*="supporttickets"],
a[href*="invoices"] {
  background: linear-gradient(180deg,#0b0f16 0%,#07090d 100%) !important;
  background-color: #0b0f16 !important;
  background-image: linear-gradient(180deg,#0b0f16 0%,#07090d 100%) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
  border-radius: 16px !important;
  color: #f4f1ea !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
}

.home-shortcuts a *,
.home-shortcuts .tile *,
.client-home-panels *,
.tiles .tile *,
.tile *,
.card *,
.panel *,
a[href*="announcements"] *,
a[href*="serverstatus"] *,
a[href*="knowledgebase"] *,
a[href*="download"] *,
a[href*="submitticket"] *,
a[href*="clientarea"] *,
a[href*="supporttickets"] *,
a[href*="invoices"] * {
  color: #f4f1ea !important;
}

.home-shortcuts i,
.home-shortcuts svg,
.tiles i,
.tiles svg,
.tile i,
.tile svg,
.card i,
.card svg,
.panel i,
.panel svg {
  color: #d4af37 !important;
  fill: #d4af37 !important;
  opacity: 1 !important;
}

/* WHMCS homepage tile direct override */
div[class*="shortcut"],
div[class*="shortcut"] a,
div[class*="tile"],
div[class*="tile"] a {
  background: #0b0f16 !important;
  color: #f4f1ea !important;
  border-color: rgba(212,175,55,.35) !important;
}

/* Remove white inline backgrounds */
[style*="background-color: rgb(255"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:white"],
[style*="background: white"] {
  background: #0b0f16 !important;
  color: #f4f1ea !important;
}

/* =========================
   SAFEBILD CHECKOUT ONLY
   ========================= */

body.safebild {
    background: #071018 !important;
}

body.safebild .navbar,
body.safebild .main-navbar-wrapper,
body.safebild #Primary_Navbar,
body.safebild #Secondary_Navbar,
body.safebild .sidebar,
body.safebild .main-sidebar,
body.safebild #Primary_Sidebar,
body.safebild #Secondary_Sidebar,
body.safebild .breadcrumb,
body.safebild .sofbac-service-grid,
body.safebild .sofbac-whmcs-home {
    display: none !important;
}

body.safebild:before {
    content: "SafeBild.de";
    display: block;
    text-align: center;
    padding: 28px 10px 6px;
    font-size: 34px;
    font-weight: 900;
    color: #ffffff;
}

body.safebild:after {
    content: "Deine Fotos bleiben. Sicheres Handy-Backup für Fotos und Videos.";
    display: block;
    text-align: center;
    margin-bottom: 24px;
    color: #40d7ff;
    font-size: 16px;
    font-weight: 700;
}

body.safebild .container,
body.safebild .container-fluid,
body.safebild .main-content,
body.safebild section#main-body {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.safebild .card,
body.safebild .panel,
body.safebild .view-cart-items,
body.safebild .view-cart-tabs,
body.safebild .summary-container {
    border-radius: 20px !important;
}

body.safebild .btn-primary,
body.safebild button.btn-primary,
body.safebild input[type="submit"].btn-primary {
    background: #0b7cff !important;
    border-color: #0b7cff !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
}