/* ==========================================================================
   VVH — Thème premium pour WHMCS (basé sur Twenty-One + standard_cart)
   À coller dans : Addons > Theme Editor > [thème VVH] > custom.css
   Couleurs : bleu nuit #0B1F3A · bleu #2F7BFF · orange #FF8A1F
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --vvh-navy: #0B1F3A;
  --vvh-navy-2: #132D52;
  --vvh-blue: #2F7BFF;
  --vvh-blue-d: #1A5FD6;
  --vvh-orange: #FF8A1F;
  --vvh-ink: #0B1F3A;
  --vvh-ink-2: #4A5A72;
  --vvh-line: #E1E7F0;
  --vvh-bg: #F5F7FB;
  --vvh-ok: #0E7A48;
  --vvh-ok-bg: #E3F6EC;
  --vvh-ko: #B4232C;
  --vvh-radius: 14px;
}

/* ---------- Base ---------- */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: var(--vvh-ink);
  background: var(--vvh-bg) !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .card-title, .primary-content h1 {
  font-family: "Plus Jakarta Sans", Inter, sans-serif !important;
  color: var(--vvh-ink);
  letter-spacing: -0.02em;
}
a { color: var(--vvh-blue); }
a:hover { color: var(--vvh-blue-d); }
.text-muted, small.text-muted { color: var(--vvh-ink-2) !important; }

/* ---------- En-tête ---------- */
#header, header.header {
  background: var(--vvh-navy) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#header .topbar, .topbar { background: var(--vvh-navy-2) !important; border: 0 !important; }
#header .navbar, #header .main-navbar-wrapper, .main-navbar-wrapper {
  background: var(--vvh-navy) !important;
  border: 0 !important;
}
#header a, #header .nav-link, #header .navbar-brand, #header .btn-link,
.main-navbar-wrapper .nav-link, .topbar a, .topbar .btn {
  color: #D6DEEA !important;
}
#header a:hover, .main-navbar-wrapper .nav-link:hover,
.main-navbar-wrapper .nav-item.active > .nav-link { color: #FFFFFF !important; }
#header .navbar-brand { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: #FFFFFF !important; }
#header .form-control, #header .input-group .form-control {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
}
#header .form-control::placeholder { color: #9FB0C9; }
.dropdown-menu {
  border: 1px solid var(--vvh-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(11,31,58,0.14);
  padding: 6px;
}
.dropdown-item { border-radius: 8px; padding: 9px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: #EAF2FF; color: var(--vvh-ink); }

/* Fil d'Ariane */
.master-breadcrumb, .breadcrumb { background: transparent !important; border: 0 !important; }
.master-breadcrumb { padding-top: 8px; }
.breadcrumb-item, .breadcrumb-item a { font-size: 13px; color: var(--vvh-ink-2) !important; }

/* ---------- Boutons ---------- */
.btn { border-radius: 12px !important; font-weight: 600; min-height: 44px; padding-left: 18px; padding-right: 18px; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn-sm { min-height: 36px; border-radius: 10px !important; }
.btn-primary, .btn-info {
  background: var(--vvh-blue) !important;
  border-color: var(--vvh-blue) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover, .btn-info:hover, .btn-primary:focus {
  background: var(--vvh-blue-d) !important;
  border-color: var(--vvh-blue-d) !important;
}
.btn-success, .btn-checkout, #btnCompleteOrder, .btn-order-now {
  background: var(--vvh-orange) !important;
  border-color: var(--vvh-orange) !important;
  color: #1A0F00 !important;
  font-weight: 700 !important;
}
.btn-success:hover, .btn-checkout:hover, #btnCompleteOrder:hover { background: #F07A0C !important; border-color: #F07A0C !important; }
.btn-default, .btn-secondary, .btn-outline-primary {
  background: #FFFFFF !important;
  border: 1.5px solid var(--vvh-navy) !important;
  color: var(--vvh-navy) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-outline-primary:hover { background: #F1F4F9 !important; }
.btn:focus-visible, .form-control:focus { box-shadow: 0 0 0 3px rgba(47,123,255,0.25) !important; outline: 0; }

/* ---------- Formulaires ---------- */
.form-control, .custom-select, select.form-control {
  border: 1.5px solid #D5DDE8 !important;
  border-radius: 12px !important;
  min-height: 46px;
  font-size: 15px;
  color: var(--vvh-ink);
  background-color: #FFFFFF;
}
.form-control:focus { border-color: var(--vvh-blue) !important; }
label, .control-label { font-weight: 600; font-size: 13px; color: #3B4B63; }
.input-group-text, .field-icon { background: #F1F4F9; border-color: #D5DDE8; color: var(--vvh-ink-2); }
.prepend-icon .field-icon { border-radius: 12px 0 0 12px; }

/* ---------- Cartes & panneaux ---------- */
.card, .panel, .tile, .client-home-panels .card {
  border: 1px solid var(--vvh-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  background: #FFFFFF;
  overflow: hidden;
}
.card-header, .panel-heading {
  background: #FFFFFF !important;
  border-bottom: 1px solid #EEF1F6 !important;
  padding: 16px 20px !important;
  font-weight: 700;
}
.card-body { padding: 20px !important; }
.card-footer { background: #FAFBFD !important; border-top: 1px solid #EEF1F6 !important; }
.list-group-item { border-color: #EEF1F6 !important; }
.list-group-item.active, .list-group-item-action.active {
  background: #EAF2FF !important; color: var(--vvh-ink) !important; border-color: #EEF1F6 !important; font-weight: 600;
}

/* Tuiles d'accueil de l'espace client (chiffres) */
.tiles .tile { padding: 20px; transition: border-color .15s; }
.tiles .tile:hover { border-color: var(--vvh-blue) !important; }
.tiles .tile .stat { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: var(--vvh-ink); }
.tiles .tile .title { color: var(--vvh-ink-2); font-weight: 600; text-transform: none; }
.tiles .tile .highlight { display: none; }

/* Barre latérale */
.sidebar .card .list-group-item { padding: 12px 16px; }
.sidebar .card-title { font-size: 15px; }

/* Tableaux */
.table { color: var(--vvh-ink); }
.table thead th { border-top: 0 !important; border-bottom: 1px solid var(--vvh-line) !important; color: var(--vvh-ink-2); font-weight: 600; font-size: 13px; }
.table td { border-color: #EEF1F6 !important; vertical-align: middle; }
.dataTables_wrapper .table-container { border-radius: 18px; border: 1px solid var(--vvh-line); background: #FFFFFF; overflow: hidden; }

/* Statuts */
.label, .badge, .status { border-radius: 999px !important; padding: 4px 10px !important; font-weight: 700; font-size: 11px; letter-spacing: .04em; }
.label-success, .badge-success, .status-active, .status-paid { background: var(--vvh-ok-bg) !important; color: var(--vvh-ok) !important; }
.label-danger, .badge-danger, .status-unpaid, .status-overdue { background: #FCE8EA !important; color: var(--vvh-ko) !important; }
.label-warning, .badge-warning, .status-pending { background: #FFF1E2 !important; color: #8A4A00 !important; }

/* Alertes */
.alert { border-radius: 14px !important; border: 0 !important; }
.alert-info { background: #EAF2FF !important; color: #123D80 !important; }
.alert-success { background: var(--vvh-ok-bg) !important; color: var(--vvh-ok) !important; }
.alert-danger { background: #FCE8EA !important; color: var(--vvh-ko) !important; }
.alert-warning { background: #FFF1E2 !important; color: #7A4100 !important; }

/* ---------- Connexion ---------- */
.login-form, .logincontainer, .login-container {
  background: #FFFFFF;
  border: 1px solid var(--vvh-line);
  border-radius: 20px;
  padding: 32px !important;
  max-width: 460px;
  margin: 40px auto !important;
  box-shadow: 0 24px 60px rgba(11,31,58,0.10);
}
.login-form h6, .logincontainer h1, .login-container h1 { font-size: 26px !important; }

/* ---------- Panier (standard_cart) ---------- */
#order-standard_cart .header-lined h1,
#order-standard_cart .font-size-36 { font-family: "Plus Jakarta Sans", sans-serif !important; font-weight: 800; letter-spacing: -0.02em; }
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .cart-sidebar .card { border-radius: 16px !important; }
#order-standard_cart .cart-sidebar .panel-heading,
#order-standard_cart .cart-sidebar .card-header { background: #FFFFFF !important; }

/* Recherche de domaine */
#order-standard_cart .domain-checker-container {
  background: var(--vvh-navy) !important;
  border-radius: 20px !important;
  padding: 40px 28px !important;
  margin-bottom: 28px;
}
#order-standard_cart .domain-checker-bg { background: none !important; }
#order-standard_cart .domain-checker-container p,
#order-standard_cart .domain-checker-container label { color: #D6DEEA !important; }
#order-standard_cart .domain-checker-container .input-group-box,
#order-standard_cart .domain-checker-container .input-group {
  background: #FFFFFF; border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
#order-standard_cart .domain-checker-container .form-control,
#order-standard_cart .domain-checker-container textarea {
  border: 0 !important; font-size: 18px; min-height: 52px; box-shadow: none !important;
}
#order-standard_cart .domain-checker-container .btn { min-height: 52px; }
#order-standard_cart .domain-checker-result-headline { font-family: "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; }
#order-standard_cart .domain-checker-available { color: var(--vvh-ok) !important; }
#order-standard_cart .domain-checker-unavailable { color: var(--vvh-ko) !important; }
#order-standard_cart .domain-price .price { font-weight: 700; color: var(--vvh-ink); }
#order-standard_cart .spotlight-tlds .spotlight-tld,
#order-standard_cart .suggested-domains .panel,
#order-standard_cart .suggested-domains .card { border-radius: 14px !important; border: 1px solid var(--vvh-line) !important; }
#order-standard_cart .domain-pricing table { background: #FFFFFF; border-radius: 14px; overflow: hidden; }

/* Lignes du panier */
#order-standard_cart .view-cart-items-header {
  background: var(--vvh-navy) !important; color: #FFFFFF !important;
  border-radius: 14px 14px 0 0; font-weight: 600;
}
#order-standard_cart .view-cart-items {
  background: #FFFFFF; border: 1px solid var(--vvh-line); border-top: 0; border-radius: 0 0 14px 14px;
}
#order-standard_cart .view-cart-items .item { border-color: #EEF1F6 !important; padding: 18px 16px; }
#order-standard_cart .item-title { font-weight: 700; }
#order-standard_cart .item-domain { color: var(--vvh-ink-2); }

/* Récapitulatif */
#order-standard_cart .order-summary {
  background: #FFFFFF !important;
  border: 1px solid var(--vvh-line) !important;
  border-radius: 18px !important;
  overflow: hidden;
}
#order-standard_cart .order-summary h2 {
  background: var(--vvh-navy) !important; color: #FFFFFF !important;
  font-size: 17px !important; padding: 16px 20px !important; margin: 0 !important;
}
#order-standard_cart .summary-container { background: #FFFFFF !important; padding: 18px 20px !important; }
#order-standard_cart .total-due-today .amt {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 30px; color: var(--vvh-ink);
}
#order-standard_cart .btn-checkout { width: 100%; min-height: 54px; font-size: 16px; }
#order-standard_cart .btn-continue-shopping { color: var(--vvh-ink-2); }

/* ---------- Page de paiement ---------- */
#order-standard_cart .sub-heading { border-bottom: 1px solid var(--vvh-line); margin: 32px 0 18px; }
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color {
  background: var(--vvh-bg) !important; color: var(--vvh-ink) !important;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 17px; padding-right: 12px;
}
#order-standard_cart .already-registered {
  background: #EAF2FF; border: 0; border-radius: 14px; padding: 14px 18px;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline,
#order-standard_cart #paymentGatewaysContainer label {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 1.5px solid #D5DDE8; border-radius: 12px;
  padding: 12px 16px; margin: 4px 6px 4px 0; font-size: 15px; color: var(--vvh-ink);
}
#order-standard_cart .cc-input-container, #order-standard_cart #stripeElements,
#order-standard_cart .stripe-cards-inputs {
  background: #FFFFFF; border: 1.5px solid var(--vvh-blue); border-radius: 14px; padding: 16px;
}
#order-standard_cart .total-due-today { background: transparent !important; }
#order-standard_cart #btnCompleteOrder { min-height: 56px; font-size: 17px; padding: 0 32px; }

/* ---------- Pied de page ---------- */
#footer, footer.footer {
  background: var(--vvh-navy) !important;
  color: #B7C4D8 !important;
  border: 0 !important;
}
#footer a, footer.footer a { color: #D6DEEA !important; }
#footer a:hover, footer.footer a:hover { color: #FFFFFF !important; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .login-form, .logincontainer, .login-container { padding: 22px !important; margin: 20px 12px !important; }
  #order-standard_cart .domain-checker-container { padding: 28px 16px !important; }
  #order-standard_cart .total-due-today .amt { font-size: 26px; }
}