/* =========================================================
   SafeBild WHMCS Checkout Theme
   Light premium layout for checkout.safebild.de
   ========================================================= */

:root {
  --sb-blue: #0b6fba;
  --sb-blue-dark: #064a7c;
  --sb-green: #18a058;
  --sb-cyan: #00aeea;
  --sb-bg: #f4f9fc;
  --sb-card: #ffffff;
  --sb-text: #102033;
  --sb-muted: #617085;
  --sb-border: #d8e8f0;
  --sb-shadow: 0 18px 50px rgba(12, 77, 120, .14);
}

/* GLOBAL */
html,
body {
  background: linear-gradient(180deg, #eef8fd 0%, #ffffff 42%, #f4f9fc 100%) !important;
  color: var(--sb-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

a {
  color: var(--sb-blue);
}

a:hover {
  color: var(--sb-blue-dark);
}

/* HEADER */
body > header,
header,
.header,
header.header {
  background: #ffffff !important;
  color: var(--sb-text) !important;
  border-bottom: 1px solid var(--sb-border) !important;
  box-shadow: 0 8px 28px rgba(10, 90, 140, .08) !important;
}

header a,
.header a,
header.header a {
  color: var(--sb-text) !important;
}

header a:hover,
.header a:hover,
header.header a:hover {
  color: var(--sb-blue) !important;
}

/* CUSTOM SAFEBILD TOP AREA COPIED FROM SOFBAC */
.sofbac-header,
.sofbac-top,
.sofbac-navbar,
.sofbac-nav,
.sofbac-brand,
.safe-header,
.safe-top {
  background: #ffffff !important;
  color: var(--sb-text) !important;
  border-color: var(--sb-border) !important;
}

/* remove SOFBAC dark/gold look */
[style*="background:#000"],
[style*="background: #000"],
[style*="background-color:#000"],
[style*="background-color: #000"] {
  background: #ffffff !important;
}

/* MAIN WRAPPERS */
section#main-body,
#main-body,
.main-content,
.primary-content,
.container,
.container-fluid {
  background: transparent !important;
  color: var(--sb-text) !important;
}

section#main-body {
  padding-top: 34px !important;
}

/* CENTER CHECKOUT CONTENT */
#main-body .container,
section#main-body .container {
  max-width: 1120px !important;
}

/* CARDS / PANELS */
.card,
.panel,
.list-group,
.sidebar .card,
.cart-sidebar,
.product,
.products .product,
.view-cart-items,
.view-cart-tabs,
.order-summary,
.summary-container,
.promo-container {
  background: var(--sb-card) !important;
  color: var(--sb-text) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--sb-shadow) !important;
}

.card-header,
.panel-heading,
.card-title,
.sidebar .card-header,
.promo-container .header {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9fd 100%) !important;
  color: var(--sb-text) !important;
  border-bottom: 1px solid var(--sb-border) !important;
  border-radius: 18px 18px 0 0 !important;
  font-weight: 700 !important;
}

/* SIDEBAR */
.sidebar,
.sidebar-primary,
.sidebar-secondary {
  background: transparent !important;
}

.sidebar .list-group-item,
.list-group-item {
  background: #ffffff !important;
  color: var(--sb-text) !important;
  border-color: var(--sb-border) !important;
}

.sidebar .list-group-item.active,
.list-group-item.active {
  background: linear-gradient(135deg, var(--sb-blue), var(--sb-cyan)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* CART ITEMS */
.view-cart-items,
.view-cart-tabs {
  padding: 18px !important;
}

.view-cart-items .item,
.view-cart-items .item-title,
.view-cart-items .item-price,
.view-cart-items span,
.view-cart-items div,
.cart-body,
.cart-body div,
.cart-body span {
  color: var(--sb-text) !important;
}

/* TABLES */
table,
.table,
.table-list {
  background: #ffffff !important;
  color: var(--sb-text) !important;
}

.table td,
.table th,
table td,
table th {
  color: var(--sb-text) !important;
  border-color: var(--sb-border) !important;
}

/* FORMS */
input,
select,
textarea,
.form-control,
.custom-select {
  background: #ffffff !important;
  color: var(--sb-text) !important;
  border: 1px solid #bfd8e7 !important;
  border-radius: 12px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--sb-blue) !important;
  box-shadow: 0 0 0 4px rgba(0, 174, 234, .15) !important;
}

/* BUTTONS */
.btn,
button,
input[type="submit"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.btn-primary,
.btn-success,
.btn-warning,
.btn-info,
.btn.checkout,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, var(--sb-green), var(--sb-cyan)) !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 174, 234, .26) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  filter: brightness(.95);
  color: #ffffff !important;
}

.btn-secondary,
.btn-default {
  background: #eef8fd !important;
  color: var(--sb-blue-dark) !important;
  border: 1px solid var(--sb-border) !important;
}

/* PRICE / TOTAL */
.price,
.total,
.amount,
.cart-total,
.order-total,
.text-right,
.float-right {
  color: var(--sb-blue-dark) !important;
}

/* BADGES */
.badge,
.label {
  border-radius: 999px !important;
}

/* NAV / LANGUAGE / CLOUD LINKS - hide for SafeBild */
a[href*="language="],
a[href*="cloud.sofbac"],
a[href*="cloud.safebild"],
a[href*="setlanguage="] {
  display: none !important;
}

/* Hide WHMCS category block if needed */
.sidebar [menuitemname="Categories"],
.sidebar [menuitemname="Kategorien"],
.sidebar .card-sidebar[menuitemname="Categories"],
.sidebar .card-sidebar[menuitemname="Kategorien"] {
  display: none !important;
}

/* FOOTER */
footer,
.footer,
footer.footer {
  background: #ffffff !important;
  color: var(--sb-muted) !important;
  border-top: 1px solid var(--sb-border) !important;
}

footer a,
.footer a {
  color: var(--sb-blue) !important;
}

/* SAFEBILD MESSAGE */
.sofbac-footer-note,
.safebild-footer-note {
  color: var(--sb-blue) !important;
  font-weight: 700 !important;
}

/* MOBILE */
@media (max-width: 768px) {
  section#main-body {
    padding: 18px 10px !important;
  }

  .card,
  .panel,
  .list-group,
  .view-cart-items,
  .order-summary {
    border-radius: 14px !important;
  }

  .btn {
    width: 100%;
    margin-bottom: 8px;
  }
}