/**
 * Cloud Win / Rackon — WHMCS Croster client layer
 * Mesma pegada do customerPanel-cloudwin (grid, glass, cyan→violet)
 */

@import url("https://fonts.googleapis.com/css2?family=Jura:wght@500;600;700&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

body.rackon-client {
  --rk-cyan: #00e5ff;
  --rk-teal: #2dd4bf;
  --rk-violet: #a78bfa;
  --rk-purple: #7c4dff;
  --rk-orange: #fb923c;
  --rk-gold: #fbbf24;
  --rk-ok: #34d399;
  --rk-warn: #fb923c;
  --rk-danger: #f87171;
  --rk-bg: #060a12;
  --rk-surface: rgba(10, 16, 28, 0.88);
  --rk-glass: rgba(12, 20, 36, 0.78);
  --rk-border: rgba(0, 229, 255, 0.14);
  --rk-grid: rgba(0, 229, 255, 0.055);
  --rk-text: #e8f4ff;
  --rk-muted: #7d8fa8;
  --rk-ink: #e8f4ff;
  --rk-radius: 14px;
  --rk-font-display: "Jura", ui-sans-serif, sans-serif;
  --rk-font-body: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --rk-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --rk-grad: linear-gradient(135deg, var(--rk-cyan), var(--rk-violet) 55%, var(--rk-purple));
  --rk-grad-warm: linear-gradient(135deg, var(--rk-gold), var(--rk-orange) 45%, var(--rk-violet));
  --rk-grad-soft: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(167, 139, 250, 0.1));
  --rk-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --rk-glow: 0 0 0 1px rgba(0, 229, 255, 0.08), 0 14px 40px rgba(0, 0, 0, 0.35);

  --primary-color: var(--rk-cyan);
  --secondary-color: var(--rk-violet);
  --accent-color: var(--rk-orange);
  --text-color: var(--rk-text);
  --bg-color: var(--rk-bg);
  --cw-ocean: #0a1628;
  --cw-sky: var(--rk-cyan);
  --cw-mint: var(--rk-teal);
  --cw-ink: var(--rk-text);
  --cw-muted: var(--rk-muted);
  --cw-line: var(--rk-border);
  --cw-glow: var(--rk-glow);
  --cw-shadow: var(--rk-shadow);

  color-scheme: dark;
  font-family: var(--rk-font-body);
  color: var(--rk-text);
  background-color: var(--rk-bg);
  -webkit-font-smoothing: antialiased;
}

/* Grid background */
body.rackon-client::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--rk-bg);
  background-image:
    linear-gradient(var(--rk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rk-grid) 1px, transparent 1px),
    radial-gradient(ellipse 70% 45% at 88% 8%, rgba(0, 229, 255, 0.09), transparent 55%),
    radial-gradient(ellipse 55% 40% at 8% 92%, rgba(124, 77, 255, 0.07), transparent 50%);
  background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
}

body.rackon-client .body-container,
body.rackon-client #main-body,
body.rackon-client .sec,
body.rackon-client .main-content,
body.rackon-client .container {
  position: relative;
  z-index: 1;
}

/* ——— Nav / header ——— */
body.rackon-client .cros-navbar,
body.rackon-client .navbar,
body.rackon-client .navbar-main,
body.rackon-client #main-navbar .navbar {
  background: rgba(8, 14, 26, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rk-border) !important;
  box-shadow: var(--rk-glow) !important;
}

body.rackon-client .navbar-nav > li > a,
body.rackon-client .nav > li > a,
body.rackon-client .cros-navbar .nav-link {
  color: var(--rk-muted) !important;
  font-weight: 600;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}

body.rackon-client .navbar-nav > li > a:hover,
body.rackon-client .nav > li > a:hover,
body.rackon-client .cros-navbar .nav-link:hover {
  color: var(--rk-cyan) !important;
  background: rgba(0, 229, 255, 0.08) !important;
}

body.rackon-client .navbar-nav > .active > a,
body.rackon-client .nav > .active > a,
body.rackon-client .navbar-nav > .active > a:hover {
  color: #060a12 !important;
  background: var(--rk-grad) !important;
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.25) !important;
}

body.rackon-client .dropdown-menu {
  background: rgba(10, 16, 28, 0.96) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
  box-shadow: var(--rk-shadow) !important;
  padding: 0.35rem !important;
}

body.rackon-client .dropdown-menu > li > a {
  color: var(--rk-text) !important;
  border-radius: 10px;
}

body.rackon-client .dropdown-menu > li > a:hover {
  background: rgba(0, 229, 255, 0.1) !important;
  color: var(--rk-cyan) !important;
}

body.rackon-client .navbar-side {
  background: var(--rk-glass) !important;
  border-color: var(--rk-border) !important;
}

/* ——— Buttons ——— */
body.rackon-client .btn-primary,
body.rackon-client .btn.btn-primary,
body.rackon-client input[type="submit"].btn-primary {
  background: var(--rk-grad) !important;
  border: none !important;
  color: #060a12 !important;
  font-weight: 700;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(0, 229, 255, 0.22);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

body.rackon-client .btn-primary:hover,
body.rackon-client .btn.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #060a12 !important;
}

body.rackon-client .btn-default,
body.rackon-client .btn-secondary,
body.rackon-client .btn-outline-light {
  background: rgba(12, 20, 36, 0.6) !important;
  border: 1px solid var(--rk-border) !important;
  color: var(--rk-text) !important;
  border-radius: 999px !important;
  font-weight: 600;
}

body.rackon-client .btn-default:hover,
body.rackon-client .btn-secondary:hover {
  border-color: rgba(0, 229, 255, 0.35) !important;
  color: var(--rk-cyan) !important;
  background: rgba(0, 229, 255, 0.08) !important;
}

body.rackon-client .btn-success { background: var(--rk-ok) !important; border: none !important; color: #060a12 !important; }
body.rackon-client .btn-danger { background: var(--rk-danger) !important; border: none !important; }
body.rackon-client .btn-warning { background: var(--rk-grad-warm) !important; border: none !important; color: #060a12 !important; }

/* ——— Panels / cards ——— */
body.rackon-client .panel,
body.rackon-client .card,
body.rackon-client .well,
body.rackon-client .cap-home-card,
body.rackon-client .tile {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
  box-shadow: var(--rk-glow) !important;
  color: var(--rk-text);
}

body.rackon-client .panel-heading,
body.rackon-client .card-header,
body.rackon-client .cap-home-card__header,
body.rackon-client .panel-footer,
body.rackon-client .card-footer,
body.rackon-client .cap-home-card__footer {
  background: rgba(0, 229, 255, 0.04) !important;
  border-color: var(--rk-border) !important;
  color: var(--rk-text) !important;
}

body.rackon-client .panel-title,
body.rackon-client .card-title,
body.rackon-client h1, body.rackon-client h2, body.rackon-client h3,
body.rackon-client h4, body.rackon-client h5 {
  font-family: var(--rk-font-display);
  letter-spacing: 0.02em;
  color: var(--rk-text);
}

body.rackon-client .panel-body,
body.rackon-client .card-body {
  background: transparent !important;
}

/* ——— Sidebar / list group ——— */
body.rackon-client .list-group-item {
  background: transparent !important;
  border-color: var(--rk-border) !important;
  color: var(--rk-muted) !important;
}

body.rackon-client .list-group-item:hover {
  background: rgba(0, 229, 255, 0.06) !important;
  color: var(--rk-cyan) !important;
}

body.rackon-client a.list-group-item.active,
body.rackon-client .list-group-item.active {
  background: var(--rk-grad-soft) !important;
  border-color: var(--rk-border) !important;
  color: var(--rk-cyan) !important;
}

body.rackon-client .sidebar .list-group-item i {
  color: var(--rk-violet);
}

/* ——— Forms ——— */
body.rackon-client .form-control,
body.rackon-client input[type="text"],
body.rackon-client input[type="email"],
body.rackon-client input[type="password"],
body.rackon-client input[type="number"],
body.rackon-client select.form-control,
body.rackon-client textarea.form-control {
  background: rgba(6, 10, 18, 0.65) !important;
  border: 1px solid var(--rk-border) !important;
  color: var(--rk-text) !important;
  border-radius: 10px !important;
}

body.rackon-client .form-control:focus {
  border-color: rgba(0, 229, 255, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12) !important;
}

body.rackon-client label,
body.rackon-client .control-label {
  color: var(--rk-muted);
  font-weight: 500;
}

/* ——— Tables ——— */
body.rackon-client .table {
  color: var(--rk-text);
}

body.rackon-client .table > thead > tr > th,
body.rackon-client .table > tbody > tr > th {
  border-color: var(--rk-border) !important;
  color: var(--rk-muted);
  font-family: var(--rk-font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.rackon-client .table > tbody > tr > td {
  border-color: var(--rk-border) !important;
}

body.rackon-client .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(0, 229, 255, 0.03) !important;
}

body.rackon-client .table-hover > tbody > tr:hover {
  background: rgba(0, 229, 255, 0.08) !important;
}

/* ——— Alerts ——— */
body.rackon-client .alert {
  border-radius: var(--rk-radius);
  border-width: 1px;
}

body.rackon-client .alert-info {
  background: rgba(0, 229, 255, 0.1) !important;
  border-color: rgba(0, 229, 255, 0.25) !important;
  color: var(--rk-cyan) !important;
}

body.rackon-client .alert-success {
  background: rgba(52, 211, 153, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  color: var(--rk-ok) !important;
}

body.rackon-client .alert-warning {
  background: rgba(251, 146, 60, 0.12) !important;
  border-color: rgba(251, 146, 60, 0.3) !important;
  color: var(--rk-warn) !important;
}

body.rackon-client .alert-danger {
  background: rgba(248, 113, 113, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
  color: var(--rk-danger) !important;
}

/* ——— Badges / labels ——— */
body.rackon-client .label,
body.rackon-client .badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.72rem;
}

body.rackon-client .label-success, body.rackon-client .badge-success { background: var(--rk-ok) !important; color: #060a12 !important; }
body.rackon-client .label-danger, body.rackon-client .badge-danger { background: var(--rk-danger) !important; }
body.rackon-client .label-warning, body.rackon-client .badge-warning { background: var(--rk-orange) !important; color: #060a12 !important; }
body.rackon-client .label-info, body.rackon-client .badge-info { background: var(--rk-cyan) !important; color: #060a12 !important; }

/* ——— Breadcrumb / page header ——— */
body.rackon-client .breadcrumb {
  background: transparent !important;
}

body.rackon-client .breadcrumb > li + li:before {
  color: var(--rk-muted);
}

body.rackon-client .breadcrumb > .active {
  color: var(--rk-cyan);
}

body.rackon-client .header-lined h1 {
  font-family: var(--rk-font-display);
  background: var(--rk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ——— Footer ——— */
body.rackon-client .sec.footer,
body.rackon-client .block-footer,
body.rackon-client .sfooter {
  background: rgba(6, 10, 18, 0.95) !important;
  border-top: 1px solid var(--rk-border) !important;
  color: var(--rk-muted) !important;
}

body.rackon-client .footer-copyright {
  color: var(--rk-muted) !important;
}

body.rackon-client .back-to-top {
  border: 1px solid var(--rk-border) !important;
  background: var(--rk-glass) !important;
  border-radius: 999px !important;
}

/* ——— Login ——— */
body.rackon-client.login {
  background-color: var(--rk-bg) !important;
}

body.rackon-client.login .logincontainer,
body.rackon-client.login .login-form,
body.rackon-client.login .card {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
  box-shadow: var(--rk-shadow) !important;
}

/* ——— Dashboard cap-home overrides ——— */
body.rackon-client .cap-home-hero {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
  box-shadow: var(--rk-glow) !important;
  overflow: hidden;
}

body.rackon-client .cap-home-hero__deco {
  background: var(--rk-grad-soft) !important;
  opacity: 0.5;
}

body.rackon-client .cap-home-hero__title {
  font-family: var(--rk-font-display) !important;
  background: var(--rk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

body.rackon-client .cap-home-hero__kicker,
body.rackon-client .cap-home-hero__desc {
  color: var(--rk-muted) !important;
}

body.rackon-client .cap-home-hero__icon {
  background: var(--rk-grad-soft) !important;
  border: 1px solid var(--rk-border) !important;
  color: var(--rk-cyan) !important;
}

body.rackon-client .tile.cap-home-tile,
body.rackon-client .cap-home-shortcut,
body.rackon-client .cap-home-tool {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  color: var(--rk-text) !important;
  box-shadow: var(--rk-glow) !important;
}

body.rackon-client .tile.cap-home-tile:hover,
body.rackon-client .cap-home-shortcut:hover,
body.rackon-client .cap-home-tool:hover {
  border-color: rgba(0, 229, 255, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 229, 255, 0.12) !important;
  transform: translateY(-3px);
  color: var(--rk-cyan) !important;
}

body.rackon-client .tile .icon i,
body.rackon-client .cap-home-shortcut i,
body.rackon-client .cap-home-tool i {
  color: var(--rk-cyan) !important;
}

body.rackon-client .tile .stat {
  font-family: var(--rk-font-display);
  color: var(--rk-text) !important;
}

body.rackon-client .cap-home-btn-primary {
  background: var(--rk-grad) !important;
  color: #060a12 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(0, 229, 255, 0.22) !important;
}

body.rackon-client .cap-home-section__title,
body.rackon-client .cap-home-card__title,
body.rackon-client .cap-home-panels .panel-title {
  color: var(--rk-text) !important;
}

body.rackon-client .cap-home-section__title i,
body.rackon-client .cap-home-card__title i {
  color: var(--rk-violet) !important;
}

body.rackon-client .cap-home-card--gradient {
  background: var(--rk-glass) !important;
}

/* Shared hero blocks (details, products, invoices, etc.) */
body.rackon-client .cap-ad-hero,
body.rackon-client .cap-prod-hero,
body.rackon-client .cap-inv-hero {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
  box-shadow: var(--rk-glow) !important;
}

body.rackon-client .cap-ad-hero__title,
body.rackon-client .cap-prod-hero__title,
body.rackon-client .cap-inv-hero__title {
  font-family: var(--rk-font-display) !important;
  background: var(--rk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

body.rackon-client .cap-ad-hero__kicker,
body.rackon-client .cap-prod-hero__kicker,
body.rackon-client .cap-ad-hero__desc,
body.rackon-client .cap-prod-hero__desc {
  color: var(--rk-muted) !important;
}

body.rackon-client .cap-login-page .logincontainer,
body.rackon-client .cap-login-page #registration {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
  box-shadow: var(--rk-shadow) !important;
}

/* Products / services list */
body.rackon-client .cap-products--modern .cap-prod-card,
body.rackon-client .product-status,
body.rackon-client .div-service-item {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
}

/* ——— Modals ——— */
body.rackon-client .modal-content {
  background: rgba(10, 16, 28, 0.96) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
  color: var(--rk-text);
  box-shadow: var(--rk-shadow);
}

body.rackon-client .modal-header {
  border-color: var(--rk-border) !important;
}

body.rackon-client .modal-footer {
  border-color: var(--rk-border) !important;
}

body.rackon-client .close {
  color: var(--rk-muted);
  text-shadow: none;
}

/* ——— Pagination ——— */
body.rackon-client .pagination > li > a,
body.rackon-client .pagination > li > span {
  background: var(--rk-glass) !important;
  border-color: var(--rk-border) !important;
  color: var(--rk-muted) !important;
}

body.rackon-client .pagination > .active > a {
  background: var(--rk-grad) !important;
  border-color: transparent !important;
  color: #060a12 !important;
}

/* ——— Preloader ——— */
body.rackon-client #overlay {
  background: var(--rk-bg) !important;
}

body.rackon-client .spanner div {
  background: var(--rk-grad) !important;
}

/* ——— Rackon reveal animation ——— */
body.rackon-client .rk-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

body.rackon-client .rk-reveal.rk-in {
  opacity: 1;
  transform: none;
}

/* ——— Order form (#order-standard_cart) ——— */
body.rackon-client #order-standard_cart,
body.rackon-client .order-form {
  color: var(--rk-text);
}

body.rackon-client #order-standard_cart .cart-sidebar .panel,
body.rackon-client #order-standard_cart .view-cart-items .item,
body.rackon-client #order-standard_cart .products .product,
body.rackon-client #order-standard_cart .product-info,
body.rackon-client #order-standard_cart fieldset {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
  box-shadow: var(--rk-glow) !important;
}

body.rackon-client #order-standard_cart .product header {
  background: rgba(0, 229, 255, 0.06) !important;
  border-color: var(--rk-border) !important;
}

body.rackon-client #order-standard_cart .product footer {
  background: transparent !important;
  border-color: var(--rk-border) !important;
}

body.rackon-client #order-standard_cart .btn-checkout,
body.rackon-client #order-standard_cart .btn-success {
  background: var(--rk-grad-warm) !important;
  border: none !important;
  color: #060a12 !important;
  font-weight: 700;
  border-radius: 999px !important;
}

body.rackon-client #order-standard_cart .order-summary {
  background: var(--rk-glass) !important;
  border: 1px solid var(--rk-border) !important;
  border-radius: var(--rk-radius) !important;
}

body.rackon-client #order-standard_cart .order-summary h2 {
  font-family: var(--rk-font-display);
  color: var(--rk-cyan);
}

/* Select2 */
body.rackon-client .select2-container--default .select2-selection--single {
  background: rgba(6, 10, 18, 0.65) !important;
  border-color: var(--rk-border) !important;
  color: var(--rk-text) !important;
}

body.rackon-client .select2-dropdown {
  background: rgba(10, 16, 28, 0.98) !important;
  border-color: var(--rk-border) !important;
}

body.rackon-client .select2-results__option--highlighted {
  background: rgba(0, 229, 255, 0.15) !important;
  color: var(--rk-cyan) !important;
}

/* DataTables */
body.rackon-client .dataTables_wrapper .dataTables_filter input {
  background: rgba(6, 10, 18, 0.65) !important;
  border: 1px solid var(--rk-border) !important;
  color: var(--rk-text) !important;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  body.rackon-client .rk-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.rackon-client .btn-primary:hover,
  body.rackon-client .tile.cap-home-tile:hover {
    transform: none;
  }
}