/* DotMoose client-area skin for WHMCS Twenty-One.
 * Keep this as an overlay on the vendor template so WHMCS updates remain mergeable.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --dm-night: #0b1739;
  --dm-water: #102653;
  --dm-ridge: #274468;
  --dm-muted: #667085;
  --dm-text: #475467;
  --dm-white: #ffffff;
  --dm-blue: #2563eb;
  --dm-blue-dark: #1d4ed8;
  --dm-green: #0f9f72;
  --dm-surface: #f6f8fc;
  --dm-surface-blue: #eef4ff;
  --dm-line: rgba(11, 23, 57, .14);
  --dm-line-soft: rgba(11, 23, 57, .08);
  --dm-shadow-sm: 0 8px 24px rgba(16, 38, 83, .07);
  --dm-shadow-md: 0 22px 60px rgba(16, 38, 83, .11);
  --primary: var(--dm-blue);
  --primary-lifted: var(--dm-blue-dark);
  --primary-accented: #173ea8;
}

html { font-size: 15px; background: var(--dm-surface); }
body.primary-bg-color {
  color: var(--dm-night);
  background: radial-gradient(circle at 82% 2%, rgba(37,99,235,.08), transparent 28rem), var(--dm-white) !important;
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}
a { color: var(--dm-blue); }
a:hover { color: var(--dm-blue-dark); }
:focus-visible { outline: 3px solid rgba(37,99,235,.55) !important; outline-offset: 3px; }

.container { max-width: 1180px; }
.header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--dm-line-soft); box-shadow: none; }
.header .navbar { min-height: 76px; background: transparent !important; }
.header .navbar-brand {
  display: inline-flex; align-items: center; gap: .65rem; color: var(--dm-night) !important;
  font-size: 0; font-weight: 800; letter-spacing: -.05em;
}
.header .navbar-brand::before {
  content: ''; width: 38px; height: 38px; flex: 0 0 38px;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M29 27c-3-5-6-7-10-8h-5l-5-5V7m10 12-2-10m7 13-1-11m12 16c3-5 6-7 10-8h5l5-5V7M45 19l2-10m-7 13 1-11' fill='none' stroke='%230b1739' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23 26h18l4 7v16c0 4.4-3.6 8-8 8H27c-4.4 0-8-3.6-8-8V33l4-7Z' fill='%230b1739'/%3E%3Cpath d='M25 36h14M25 43h14M25 50h14' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='39' cy='36' r='1.7' fill='%232563eb'/%3E%3Ccircle cx='39' cy='43' r='1.7' fill='%232563eb'/%3E%3Ccircle cx='39' cy='50' r='1.7' fill='%232563eb'/%3E%3C/svg%3E");
}
.header .navbar-brand::after { content: 'DotMoose'; font-size: 1.2rem; color: var(--dm-night); }
.header .navbar-brand .logo-img { display: none; }

.header .main-navbar-wrapper { min-height: 48px; border-top: 1px solid var(--dm-line-soft); background: var(--dm-white) !important; }
.header .main-navbar-wrapper .nav-link,
.header .navbar .nav-link { color: var(--dm-text) !important; font-weight: 650; }
.header .main-navbar-wrapper .nav-link:hover,
.header .main-navbar-wrapper .active > .nav-link { color: var(--dm-blue) !important; }
.header .toolbar .btn { border-radius: .7rem; }
.header .search .form-control { border-color: var(--dm-line); border-radius: 0 .7rem .7rem 0; }

.master-breadcrumb { background: var(--dm-surface) !important; border-bottom: 1px solid var(--dm-line-soft); }
.master-breadcrumb .breadcrumb { padding-top: .8rem; padding-bottom: .8rem; background: transparent; font-size: .78rem; }

#main-body { padding-top: 2.5rem; padding-bottom: 4rem; min-height: 56vh; }
h1, h2, h3, h4, h5, h6 { color: var(--dm-night); font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; letter-spacing: -.035em; }
h1 { font-size: clamp(2rem, 4vw, 3.35rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); }

.card, .panel, .list-group, .domain-pricing, .client-home-panels .panel {
  border: 1px solid var(--dm-line) !important; border-radius: 1rem !important; box-shadow: var(--dm-shadow-sm); overflow: hidden;
}
.card-header, .panel-heading { color: var(--dm-night) !important; background: var(--dm-surface) !important; border-bottom: 1px solid var(--dm-line-soft) !important; font-weight: 750; }
.card-body, .panel-body { background: var(--dm-white); }

.btn { border-radius: .7rem; font-weight: 700; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn-success, .btn-info {
  color: white !important; background: var(--dm-blue) !important; border-color: var(--dm-blue) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover { background: var(--dm-blue-dark) !important; border-color: var(--dm-blue-dark) !important; box-shadow: var(--dm-shadow-sm); }
.btn-outline-primary { color: var(--dm-blue) !important; border-color: rgba(37,99,235,.42) !important; }
.btn-outline-primary:hover { color: white !important; background: var(--dm-blue) !important; }

.form-control, .custom-select, select.form-control { min-height: 44px; border: 1px solid var(--dm-line); border-radius: .65rem; color: var(--dm-night); }
.form-control:focus, .custom-select:focus { border-color: var(--dm-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

.home-domain-search { margin-top: -1rem; padding: clamp(2rem, 5vw, 4rem) 1.25rem !important; background: linear-gradient(135deg, var(--dm-night), var(--dm-water)) !important; }
.home-domain-search h2, .home-domain-search p { color: white !important; }
.home-domain-search textarea, .home-domain-search input { border: 0 !important; box-shadow: none !important; }
.home-domain-search .btn { min-height: 46px; }

.home.card-columns { column-gap: 1rem; }
.home.card-columns .card { margin-bottom: 1rem !important; }
.home.card-columns .card-title { color: var(--dm-night); }

.tiles .tile { border: 1px solid var(--dm-line); border-radius: 1rem; box-shadow: var(--dm-shadow-sm); }
.tiles .tile:hover { border-color: rgba(37,99,235,.42); box-shadow: var(--dm-shadow-md); }
.tiles .tile .icon { color: var(--dm-blue); }

.sidebar .card, .sidebar .panel { box-shadow: none; }
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover { color: white; background: var(--dm-blue); border-color: var(--dm-blue); }
.list-group-item-action:hover { background: var(--dm-surface-blue); }

.alert { border-radius: .8rem; border-width: 1px; }
.alert-info { color: #17366d; background: var(--dm-surface-blue); border-color: rgba(37,99,235,.24); }
.badge-info, .badge-primary { background: var(--dm-blue); }

footer.footer { color: #c5d2eb !important; background: linear-gradient(135deg, var(--dm-night), #132c60) !important; border-top: 0 !important; }
footer.footer a { color: white; }
footer.footer .copyright { color: #a9b9d5; }

@media (max-width: 991.98px) {
  .header .navbar { min-height: 68px; }
  #main-body { padding-top: 1.5rem; }
  .home-domain-search { padding: 2rem 1rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Accessibility corrections for upstream Twenty-One markup. */
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item.active { color: #475467 !important; }
.text-muted { color: #5b6576 !important; }