/* ================================================
   Hostynet.fr Custom Theme for WHMCS Twenty-One
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --hn-primary: #1a8fc4;
  --hn-primary-light: #2ba3d8;
  --hn-primary-dark: #147aab;
  --hn-accent: #4ec6e0;
  --hn-bg: #f0f6fc;
  --hn-bg-alt: #e8f1fa;
  --hn-text: #0a1628;
  --hn-text-muted: #4a6080;
  --hn-footer-bg: #071827;
  --hn-success: #10b981;
  --hn-warning: #f59e0b;
  --hn-danger: #dc3545;
  --hn-radius: 16px;
  --hn-radius-sm: 10px;
  --hn-radius-lg: 24px;
  --hn-shadow: 0 8px 28px rgba(26,143,196,0.10);
  --hn-shadow-sm: 0 2px 12px rgba(26,143,196,0.06);
  --hn-transition: 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* GLOBAL */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; background: var(--hn-bg) !important; color: var(--hn-text) !important; }
a { color: var(--hn-primary); transition: color var(--hn-transition); }
a:hover { color: var(--hn-primary-dark); text-decoration: none; }
.primary-bg-color { background: var(--hn-bg) !important; }

/* HEADER */
#header, .header { background: rgba(255,255,255,0.65) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(26,143,196,0.08); box-shadow: var(--hn-shadow-sm); }
.header .topbar { background: #102a44 !important; border-bottom: none; }
.header .topbar .btn, .header .topbar a, .header .topbar .active-client .input-group-text { color: #93b4ce !important; }
.header .topbar .btn:hover, .header .topbar a:hover { color: var(--hn-accent) !important; }
.header-menu .nav-link, .header .navbar-nav .nav-link { color: var(--hn-text) !important; font-weight: 500; border-radius: var(--hn-radius-sm); padding: 8px 16px !important; transition: all var(--hn-transition); }
.header-menu .nav-link:hover, .header .navbar-nav .nav-link:hover, .header-menu .nav-link.active { color: var(--hn-primary) !important; background: rgba(26,143,196,0.08); }

/* SIDEBAR */
.sidebar { background: #fff; border-radius: var(--hn-radius); box-shadow: var(--hn-shadow); border: 1px solid rgba(26,143,196,0.06); overflow: hidden; }
.sidebar .list-group-item { border: none; color: var(--hn-text); padding: 12px 20px; font-weight: 500; transition: all var(--hn-transition); }
.sidebar .list-group-item:hover { background: rgba(26,143,196,0.06); color: var(--hn-primary); }
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover { background: var(--hn-footer-bg) !important; color: #e8f1fa !important; border: none; }

/* CARDS */
.card, .panel, .panel-default { background: #fff !important; border: 1px solid rgba(26,143,196,0.06) !important; border-radius: var(--hn-radius) !important; box-shadow: var(--hn-shadow-sm); transition: box-shadow var(--hn-transition), transform var(--hn-transition); overflow: hidden; }
.card:hover, .panel:hover { box-shadow: var(--hn-shadow); transform: translateY(-2px); }
.card-header, .panel-heading { background: #102a44 !important; color: #e8f1fa !important; border-bottom: none !important; padding: 16px 24px !important; font-weight: 600; }
.card-header .card-title, .panel-heading .panel-title, .panel-heading a, .card-header a { color: #e8f1fa !important; }
.card-header .btn, .panel-heading .btn { color: var(--hn-accent) !important; border-color: rgba(78,198,224,0.3) !important; background: transparent !important; }
.card-header .btn:hover, .panel-heading .btn:hover { background: rgba(78,198,224,0.15) !important; }
/* Override all card accent colors */
.card-accent-blue .card-header,
.card-accent-red .card-header,
.card-accent-green .card-header,
.card-accent-gold .card-header,
.card-accent-orange .card-header,
.card-accent-purple .card-header,
[class*="card-accent-"] .card-header { background: #071827 !important; }
.card-accent-blue, .card-accent-red, .card-accent-green, .card-accent-gold, .card-accent-orange, .card-accent-purple, .card-accent-asbestos, [class*="card-accent-"] { border-top: none !important; border-left: none !important; }
.card-accent-asbestos .card-header { background: #102a44 !important; color: #e8f1fa !important; }

/* Top bar notification */
.topbar, .top-bar, .header .topbar { background: #102a44 !important; }

/* Sidebar headers */
.sidebar .card-header, .sidebar .panel-heading, .sidebar .list-group-item.active { background: #102a44 !important; color: #e8f1fa !important; }

/* FORCE ALL HEADERS TO FOOTER COLOR */
.client-home-cards .card-header,
.client-home-cards .card-accent-blue .card-header,
.client-home-cards .card-accent-red .card-header,
.client-home-cards .card-accent-green .card-header,
.client-home-cards .card-accent-gold .card-header,
body .card-header,
body .client-home-cards .card-header { background-color: #071827 !important; background: #102a44 !important; color: #e8f1fa !important; }
.client-home-cards .card-header a,
.client-home-cards .card-header .btn,
.client-home-cards .card-header h3,
.client-home-cards .card-header .card-title,
.client-home-cards .card-title,
body .card-header a,
body .card-header .btn,
body .card-header h3,
body .card-header .card-title { color: #e8f1fa !important; }
.client-home-cards .card-header .btn { border-color: rgba(78,198,224,0.3) !important; }
.client-home-cards .card-header .btn:hover { background: rgba(78,198,224,0.15) !important; color: #e8f1fa !important; }
.card-body, .panel-body { padding: 24px !important; }

/* BUTTONS */
.btn-primary, .btn-default-v2 { background: linear-gradient(135deg, var(--hn-primary), var(--hn-primary-light)) !important; border: none !important; color: #fff !important; border-radius: var(--hn-radius-sm) !important; padding: 10px 24px !important; font-weight: 600; font-family: 'Inter', sans-serif; box-shadow: 0 4px 14px rgba(26,143,196,0.25); transition: all var(--hn-transition); }
.btn-primary:hover, .btn-default-v2:hover { background: linear-gradient(135deg, var(--hn-primary-dark), var(--hn-primary)) !important; box-shadow: 0 6px 20px rgba(26,143,196,0.35); transform: translateY(-1px); color: #fff !important; }
.btn-success { background: linear-gradient(135deg, var(--hn-success), #14d495) !important; border: none !important; border-radius: var(--hn-radius-sm) !important; font-weight: 600; box-shadow: 0 4px 14px rgba(16,185,129,0.25); }
.btn-danger { background: linear-gradient(135deg, var(--hn-danger), #e74c5e) !important; border: none !important; border-radius: var(--hn-radius-sm) !important; font-weight: 600; }
.btn-default, .btn-secondary, .btn-outline-primary { background: transparent !important; border: 2px solid var(--hn-primary) !important; color: var(--hn-primary) !important; border-radius: var(--hn-radius-sm) !important; font-weight: 600; transition: all var(--hn-transition); }
.btn-default:hover, .btn-secondary:hover, .btn-outline-primary:hover { background: var(--hn-primary) !important; color: #fff !important; }

/* TABLES */
.table thead th { background: var(--hn-bg-alt) !important; color: var(--hn-text) !important; border-bottom: 2px solid rgba(26,143,196,0.1) !important; font-weight: 600; padding: 14px 16px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.table tbody td { padding: 14px 16px; border-color: rgba(26,143,196,0.06) !important; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(26,143,196,0.02); }
.table tbody tr:hover { background: rgba(26,143,196,0.05) !important; }

/* FORMS */
.form-control, select, textarea { border: 2px solid rgba(26,143,196,0.12) !important; border-radius: var(--hn-radius-sm) !important; padding: 10px 16px !important; font-family: 'Inter', sans-serif; transition: all var(--hn-transition); background: #fff; }
/* FIX PROMO CODE */
.prepend-icon { position: relative; }
.prepend-icon .field-icon { display: none !important; }
#inputPromotionCode { border: 2px solid rgba(26,143,196,0.12) !important; border-radius: var(--hn-radius-sm) !important; padding: 12px 16px !important; }
.promo .btn-block { border-radius: var(--hn-radius-sm) !important; margin-top: 8px; }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--hn-primary) !important; box-shadow: 0 0 0 3px rgba(26,143,196,0.15) !important; outline: none; }

/* BADGES */
.badge, .label { border-radius: 20px !important; padding: 5px 14px !important; font-weight: 600; font-size: 0.8rem; }
.badge-success, .label-success { background: var(--hn-success) !important; }
.badge-primary, .label-primary { background: var(--hn-primary) !important; }
.badge-warning, .label-warning { background: var(--hn-warning) !important; color: #fff !important; }
.badge-danger, .label-danger { background: var(--hn-danger) !important; }

/* ALERTS */
.alert { border: none !important; border-radius: var(--hn-radius) !important; padding: 16px 24px; font-weight: 500; }
.alert-info { background: rgba(26,143,196,0.1) !important; color: var(--hn-primary-dark) !important; border-left: 4px solid var(--hn-primary) !important; }
.alert-success { background: rgba(16,185,129,0.1) !important; color: #0a7c55 !important; border-left: 4px solid var(--hn-success) !important; }
.alert-warning { background: rgba(245,158,11,0.1) !important; color: #92600a !important; border-left: 4px solid var(--hn-warning) !important; }
.alert-danger { background: rgba(220,53,69,0.1) !important; color: #a71d2a !important; border-left: 4px solid var(--hn-danger) !important; }

/* LOGIN */
.login-container, .logincontainer { background: #fff; border-radius: var(--hn-radius-lg) !important; box-shadow: var(--hn-shadow); border: 1px solid rgba(26,143,196,0.06); padding: 40px !important; }
.login-container .btn-primary { width: 100%; padding: 14px !important; font-size: 1rem; }

/* FOOTER HOSTYNET */
.hn-footer { background: var(--hn-footer-bg) !important; color: #93b4ce !important; padding: 4.5rem 0 2rem !important; border-top: 1px solid rgba(26,143,196,0.1); position: relative; overflow: hidden; }
.hn-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent, rgba(26,143,196,0.4), rgba(78,198,224,0.3), transparent); }
.hn-footer-desc { color: #93b4ce; font-size: 0.88rem; line-height: 1.7; margin-bottom: 1.5rem; max-width: 300px; }
.hn-footer-heading { color: #e8f1fa !important; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; position: relative; padding-bottom: 0.75rem; }
.hn-footer-heading::after { content: ""; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: linear-gradient(90deg, var(--hn-primary), var(--hn-accent)); border-radius: 999px; }
.hn-footer-link { color: #93b4ce !important; text-decoration: none !important; font-size: 0.88rem; transition: color 0.15s, padding-left 0.15s; display: block; padding: 0.3rem 0; }
.hn-footer-link:hover { color: var(--hn-accent) !important; padding-left: 4px; }
.hn-footer-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--hn-radius-sm); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); font-size: 1.1rem; color: #93b4ce !important; transition: all 0.15s; text-decoration: none !important; }
.hn-footer-icon:hover { background: rgba(26,143,196,0.15); border-color: rgba(26,143,196,0.25); color: var(--hn-accent) !important; transform: translateY(-2px); }
.hn-footer-divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); margin: 3rem 0 1.5rem; }
.hn-footer-bottom { text-align: center; font-size: 0.8rem; color: #93b4ce; opacity: 0.8; display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hn-footer-sep { opacity: 0.3; }
.hn-footer-lang-btn { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.06) !important; color: #93b4ce !important; border-radius: var(--hn-radius-sm) !important; padding: 6px 14px !important; font-size: 0.85rem; transition: all 0.15s; }
.hn-footer-lang-btn:hover { background: rgba(26,143,196,0.15) !important; border-color: rgba(26,143,196,0.25) !important; color: var(--hn-accent) !important; }

/* BREADCRUMBS */
.breadcrumb { background: transparent !important; padding: 0; }
.breadcrumb-item a { color: var(--hn-primary); }

/* PAGINATION */
.pagination .page-item .page-link { border-radius: var(--hn-radius-sm) !important; border: none; margin: 0 3px; color: var(--hn-text); font-weight: 500; transition: all var(--hn-transition); }
.pagination .page-item.active .page-link { background: var(--hn-primary) !important; color: #fff; box-shadow: 0 4px 12px rgba(26,143,196,0.3); }
.pagination .page-item .page-link:hover { background: rgba(26,143,196,0.1); color: var(--hn-primary); }

/* MODALS */
.modal-content { border: none !important; border-radius: var(--hn-radius-lg) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; background: #fff !important; }
.modal-header { background: var(--hn-footer-bg); color: #e8f1fa; border-bottom: none; padding: 20px 24px; }
.modal-header .modal-title { color: #fff; }
.modal-header .close { color: #fff; opacity: 0.8; }
.modal-body { padding: 30px 24px !important; text-align: center; }
.modal-dialog { display: flex !important; align-items: center !important; min-height: calc(100vh - 60px) !important; margin: 30px auto !important; max-width: 500px !important; position: relative !important; z-index: 1200 !important; }
.modal.show .modal-dialog { transform: none !important; }
.modal { z-index: 1150 !important; }
.modal-backdrop { z-index: 1140 !important; }
.modal.show { display: flex !important; align-items: center !important; justify-content: center !important; }
.modal-body h2, .modal-body h3, .modal-body h4 { color: var(--hn-text); font-weight: 700; margin-bottom: 15px; }
.modal-footer { border-top: 1px solid rgba(26,143,196,0.08); padding: 16px 24px; }
.modal-backdrop { background: rgba(10,22,40,0.5) !important; }
.modal-body .btn { min-width: 100px; margin: 0 5px; }
.modal-body .btn-default, .modal-body .btn-secondary { background: var(--hn-bg) !important; border: 2px solid rgba(26,143,196,0.15) !important; color: var(--hn-text) !important; }
.modal-body .btn-primary, .modal-body .btn-danger { color: #fff !important; }

/* DROPDOWNS */
.dropdown-menu { border: none !important; border-radius: var(--hn-radius) !important; box-shadow: var(--hn-shadow) !important; padding: 8px; }
.dropdown-item { border-radius: var(--hn-radius-sm); padding: 10px 16px; font-weight: 500; transition: all var(--hn-transition); }
.dropdown-item:hover { background: rgba(26,143,196,0.08); color: var(--hn-primary); }

/* HOME SHORTCUTS */
.home-shortcuts .shortcut-btn { border-radius: var(--hn-radius) !important; border: 1px solid rgba(26,143,196,0.08); transition: all var(--hn-transition); background: #fff; }
.home-shortcuts .shortcut-btn:hover { box-shadow: var(--hn-shadow); transform: translateY(-3px); border-color: var(--hn-primary); }
.home-shortcuts .shortcut-btn i { color: var(--hn-primary); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--hn-bg); }
::-webkit-scrollbar-thumb { background: rgba(26,143,196,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(26,143,196,0.4); }

/* FIX LAYOUT OVERLAP */
.sidebar { position: relative; z-index: 1; }
.main-content, .col-md-9, .col-lg-9 { position: relative; z-index: 0; overflow: visible; }
.card, .panel, .panel-default { overflow: visible !important; }
.card:hover, .panel:hover { transform: none; }

/* FIX HEADER Z-INDEX - above everything */
#header, .header { position: relative; z-index: 1100 !important; }
.header-menu { position: relative; z-index: 1100; }
.header .navbar-nav { position: relative; z-index: 1100; }
.header .navbar-nav .nav-item { position: relative; }

/* FIX DROPDOWN MENUS */
.dropdown-menu { z-index: 1200 !important; position: absolute; }
.header .dropdown-menu { z-index: 1200 !important; }
.header .navbar-nav .dropdown-menu { margin-top: 0; }
.navbar-nav .dropdown-menu.show { display: block !important; }

/* FIX BREADCRUMB under header */
.breadcrumb-wrapper, .page-title, .main-body { position: relative; z-index: 1; }

/* SEARCH BAR - style hostynet */
.header-search .input-group,
.header .input-group[role="search"],
.header form .input-group { border: 2px solid rgba(26,143,196,0.12); border-radius: 50px !important; overflow: hidden; background: #fff; box-shadow: var(--hn-shadow-sm); transition: all var(--hn-transition); }
.header-search .input-group:focus-within,
.header .input-group:focus-within { border-color: var(--hn-primary); box-shadow: 0 0 0 3px rgba(26,143,196,0.1); }
.header-search .form-control,
.header .input-group .form-control { border: none !important; box-shadow: none !important; padding: 10px 20px !important; background: transparent; font-size: 0.9rem; }
.header-search .input-group-prepend .btn,
.header-search .input-group-append .btn,
.header .input-group .btn[type="submit"] { border: none !important; background: transparent !important; color: var(--hn-primary) !important; padding: 10px 16px !important; box-shadow: none !important; }
.header-search .input-group-prepend .btn:hover,
.header .input-group .btn[type="submit"]:hover { color: var(--hn-primary-dark) !important; background: rgba(26,143,196,0.06) !important; }

/* CART BUTTON - pill style */
.header a[href*="cart.php"] { position: relative; display: inline-flex; align-items: center; gap: 6px; background: rgba(26,143,196,0.08) !important; color: var(--hn-primary) !important; border-radius: 50px; padding: 10px 18px !important; font-weight: 600; transition: all var(--hn-transition); border: 2px solid rgba(26,143,196,0.12); }
.header a[href*="cart.php"]:hover { background: var(--hn-primary) !important; color: #fff !important; }
.header a[href*="cart.php"]:hover .badge { background: #fff !important; color: var(--hn-primary) !important; }
.header a[href*="cart.php"] .badge, .header .navbar .badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px !important; font-size: 0.7rem; line-height: 22px; border-radius: 50% !important; background: var(--hn-accent) !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; font-weight: 700; }

/* FIX SIDEBAR BUTTONS & DROPDOWNS */
.sidebar .btn, .sidebar .btn-primary, .sidebar .btn-default-v2 { padding: 6px 14px !important; font-size: 0.85rem; }
.sidebar .dropdown-toggle { padding: 8px 14px !important; font-size: 0.85rem !important; }
.sidebar .dropdown-menu { max-width: 100% !important; min-width: auto !important; font-size: 0.85rem; }
.sidebar .dropdown-item { padding: 6px 14px !important; font-size: 0.85rem !important; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .card, .panel { border-radius: var(--hn-radius-sm) !important; }
  .card-body, .panel-body { padding: 16px !important; }
  .login-container { padding: 24px !important; border-radius: var(--hn-radius) !important; }
  .sidebar { margin-bottom: 20px; }
}