/* =========================================================
   HOSTUVO PREMIUM CLIENT AREA
   Tide remains the engine. This file is only the brand skin.
   ========================================================= */

:root {
  --hu-navy: #071b33;
  --hu-navy-2: #0b2342;
  --hu-blue: #2768f5;
  --hu-blue-2: #5b50f6;
  --hu-orange: #ff8a42;

  --hu-bg: #f4f7fc;
  --hu-card: rgba(255,255,255,.97);
  --hu-border: #dbe5f2;
  --hu-text: #0a1d3d;
  --hu-muted: #687b96;

  --hu-radius: 18px;
  --hu-radius-sm: 12px;

  --hu-shadow:
    0 18px 50px rgba(7,27,51,.075),
    0 2px 8px rgba(7,27,51,.035);
}

/* ---------- TYPOGRAPHY ---------- */

html,
body {
  font-family:
    Inter,
    "SF Pro Display",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;

  color: var(--hu-text);
  font-size: 15px;
  letter-spacing: -.01em;
}

body {
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(39,104,245,.065),
      transparent 32rem
    ),
    radial-gradient(
      circle at 86% 2%,
      rgba(255,138,66,.045),
      transparent 28rem
    ),
    var(--hu-bg) !important;
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3 {
  color: var(--hu-text);
  font-weight: 750 !important;
  letter-spacing: -.035em;
}

/* ---------- PAGE WIDTH ---------- */

.page-wrapper > .container-xl,
.page-wrapper .container-xl,
.navbar .container-xl,
.footer .container-xl {
  max-width: 1220px !important;
}

/* ---------- TOP HEADER ---------- */

.page > header.navbar,
.navbar.navbar-light {
  background:
    linear-gradient(
      110deg,
      #06172e 0%,
      #09213e 57%,
      #0c2648 100%
    ) !important;

  border-color: rgba(255,255,255,.09) !important;
  box-shadow: none !important;
}

.page > header.navbar:first-of-type {
  min-height: 66px;
}

/* Full Hostuvo logo */

div.navbar-brand {
  overflow: visible !important;
}

.navbar-brand-image.responsive-logo,
#company-logo.responsive-logo {
  width: 174px !important;
  min-width: 174px !important;
  max-width: 174px !important;
  height: 41px !important;

  object-fit: contain !important;
  object-position: left center !important;
}

/* Nav */

.navbar .nav-link {
  color: rgba(232,241,255,.68) !important;
  font-weight: 620 !important;
  font-size: 14px;
  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.navbar .nav-link:hover {
  color: #fff !important;
  transform: translateY(-1px);
}

.navbar .nav-link.active,
.navbar .nav-item.active > .nav-link {
  color: #fff !important;
}

.navbar .dropdown-menu {
  border: 1px solid var(--hu-border);
  border-radius: 14px;
  box-shadow: var(--hu-shadow);
}

/* ---------- PAGE ---------- */

.page-wrapper {
  background: transparent !important;
}

.page-body {
  padding-top: 30px;
}

.page-header {
  margin-bottom: 20px;
}

.breadcrumb {
  font-size: 13px;
  color: var(--hu-muted);
}

/* ---------- CARDS ---------- */

.card {
  background: var(--hu-card) !important;
  border: 1px solid var(--hu-border) !important;
  border-radius: var(--hu-radius) !important;

  box-shadow: var(--hu-shadow) !important;

  overflow: hidden;
}

.card-header {
  padding: 19px 22px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(249,251,255,.96)
    ) !important;

  border-bottom: 1px solid #e8eef6 !important;
}

.card-body {
  padding: 22px !important;
}

/* Dashboard cards */

.row-cards > [class*="col"] > .card,
.row > [class*="col"] > .card {
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.row-cards > [class*="col"] > .card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 24px 60px rgba(7,27,51,.10),
    0 3px 10px rgba(7,27,51,.04) !important;
}

/* ---------- BUTTONS ---------- */

.btn {
  min-height: 42px;
  border-radius: 11px !important;
  font-weight: 680 !important;
  letter-spacing: -.01em;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
}

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

.btn-primary,
.btn-success,
.btn-info,
.btn-warning {
  color: #fff !important;

  border: 0 !important;

  background:
    linear-gradient(
      120deg,
      var(--hu-blue) 0%,
      var(--hu-blue-2) 100%
    ) !important;

  box-shadow:
    0 9px 22px rgba(39,104,245,.20) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover {
  opacity: .94;
}

/* ---------- INPUTS ---------- */

.form-control,
.form-select,
.input-group-text {
  min-height: 44px;

  background-color: #fff !important;
  border: 1px solid #cedbeb !important;
  border-radius: 11px !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(39,104,245,.62) !important;

  box-shadow:
    0 0 0 4px rgba(39,104,245,.10) !important;
}

/* ---------- TABLES ---------- */

.table {
  --tblr-table-border-color: #e5edf6;
}

.table thead th {
  padding-top: 13px !important;
  padding-bottom: 13px !important;

  background: #f7f9fc !important;

  color: #536985 !important;

  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.table tbody td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;

  vertical-align: middle !important;
}

.table tbody tr {
  transition: background .15s ease;
}

.table tbody tr:hover {
  background: #f8faff !important;
}

/* ---------- BADGES ---------- */

.badge {
  padding: .48em .72em;
  border-radius: 8px;
  font-weight: 680;
}

/* ---------- LOGIN ---------- */

.page-login {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(39,104,245,.13),
      transparent 32rem
    ),
    radial-gradient(
      circle at 82% 12%,
      rgba(255,138,66,.09),
      transparent 27rem
    ),
    linear-gradient(
      180deg,
      #f9fbff 0%,
      #f1f5fb 100%
    ) !important;
}

.page-login .container-tight {
  max-width: 455px !important;
}

.page-login #company-logo {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 54px !important;
}

.page-login .card {
  border-radius: 24px !important;

  box-shadow:
    0 30px 80px rgba(7,27,51,.12),
    0 6px 20px rgba(7,27,51,.05) !important;
}

.page-login .card-body {
  padding: 34px !important;
}

.page-login h2 {
  font-size: 25px;
}

/* ---------- ORDER PRODUCT CARDS ---------- */

.order-product .card,
.order-index .card {
  border-radius: 20px !important;
}

/* ---------- LINKS ---------- */

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-wrapper a:not(.btn):not(.nav-link) {
  color: #1d62df;
}

/* ---------- FOOTER ---------- */

.footer {
  padding-top: 22px !important;
  padding-bottom: 22px !important;

  background: transparent !important;

  color: #74849a !important;
  font-size: 12px;
}

.footer a {
  color: #6d7f98 !important;
}

/*
   Hide visible upstream branding.
   Tide/FOSSBilling remain unchanged underneath.
*/

.footer a[href*="fossbilling"],
.footer a[href*="FOSSBilling"] {
  display: none !important;
}

.footer p:has(a[href*="fossbilling"]),
.footer div:has(> a[href*="fossbilling"]),
.footer li:has(a[href*="fossbilling"]) {
  display: none !important;
}

/* ---------- SMALL PREMIUM DETAILS ---------- */

hr {
  border-color: #e6edf6;
  opacity: 1;
}

.avatar {
  border-radius: 10px;
}

.alert {
  border: 0;
  border-radius: 14px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 991px) {

  .navbar-brand-image.responsive-logo,
  #company-logo.responsive-logo {
    width: 145px !important;
    min-width: 145px !important;
    height: 36px !important;
  }

  .page-body {
    padding-top: 20px;
  }

  .card-header,
  .card-body {
    padding: 17px !important;
  }
}

@media (max-width: 575px) {

  html,
  body {
    font-size: 14px;
  }

  .page-login .container-tight {
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-login .card-body {
    padding: 24px !important;
  }

  .navbar-brand-image.responsive-logo,
  #company-logo.responsive-logo {
    width: 128px !important;
    min-width: 128px !important;
  }
}

/* =========================================================
   HOSTUVO — HEADER MATCHING MAIN WEBSITE
   ========================================================= */

body:not(.page-login) .page > header,
body:not(.page-login) .page > header.navbar,
body:not(.page-login) .navbar.navbar-light,
body:not(.page-login) .navbar-expand-md,
body:not(.page-login) #navbar-menu {
    background:
        linear-gradient(
            105deg,
            #071b33 0%,
            #09203b 58%,
            #0b2342 100%
        ) !important;

    border-color: rgba(255,255,255,.08) !important;
}

/* drugi pasek menu nie może być biały */
body:not(.page-login) #navbar-menu,
body:not(.page-login) #navbar-menu .navbar-nav,
body:not(.page-login) #navbar-menu .container-xl {
    background: transparent !important;
}

/* MENU */
body:not(.page-login) #navbar-menu .nav-link,
body:not(.page-login) #navbar-menu a {
    color: #d9e5f5 !important;
    font-weight: 650 !important;
    opacity: .82;
}

body:not(.page-login) #navbar-menu .nav-link:hover,
body:not(.page-login) #navbar-menu a:hover {
    color: #ffffff !important;
    opacity: 1;
}

/* AKTYWNA SEKCJA */
body:not(.page-login) #navbar-menu .nav-link.active,
body:not(.page-login) #navbar-menu .nav-item.active > .nav-link {
    color: #ffffff !important;
    opacity: 1;
}

/* niebieski akcent jak na hostuvo.com */
body:not(.page-login) #navbar-menu .nav-link.active::after,
body:not(.page-login) #navbar-menu .nav-item.active > .nav-link::after {
    background: #3b82f6 !important;
}

/* delikatna linia pomiędzy logo a menu */
body:not(.page-login) .page > header + header {
    border-top: 1px solid rgba(255,255,255,.07) !important;
}

/* logo */
body:not(.page-login) .navbar-brand-image.responsive-logo {
    filter: none !important;
}

/* ikony po prawej */
body:not(.page-login) header .nav-link svg,
body:not(.page-login) header .icon {
    color: #d9e5f5 !important;
    stroke: currentColor !important;
}

/* mobile */
@media (max-width: 767px) {
    body:not(.page-login) #navbar-menu {
        background: #071b33 !important;
        padding-bottom: 12px;
    }
}


/* HOSTUVO — LIGHT SECOND NAV, DARK TEXT */

body:not(.page-login) #navbar-menu,
body:not(.page-login) #navbar-menu .navbar-nav,
body:not(.page-login) #navbar-menu .container-xl {
    background: #ffffff !important;
}

body:not(.page-login) #navbar-menu .nav-link,
body:not(.page-login) #navbar-menu a {
    color: #0b1f3a !important;
    opacity: 1 !important;
    font-weight: 650 !important;
}

body:not(.page-login) #navbar-menu .nav-link:hover,
body:not(.page-login) #navbar-menu a:hover {
    color: #2768f5 !important;
}

body:not(.page-login) #navbar-menu .nav-link.active,
body:not(.page-login) #navbar-menu .nav-item.active > .nav-link {
    color: #071b33 !important;
}

body:not(.page-login) #navbar-menu svg,
body:not(.page-login) #navbar-menu .icon {
    color: #0b1f3a !important;
    stroke: currentColor !important;
}

body:not(.page-login) .page > header + header {
    border-top: 1px solid #e5ebf3 !important;
    border-bottom: 1px solid #e5ebf3 !important;
}