/*Write your custom style or CSS code here*/

/* ================= Foxeep 2026-10-18: unified typography, lists, addons ================= */
/* client-area lists (invoices, quotes, services, domains, tickets, emails...): 14px rows */
html body .table-list thead th{font-size:13px!important;letter-spacing:.01em}
html body .table-list tbody td,html body .table-list tbody td a,html body .table-list tbody td strong,html body .table-list tbody td span:not(.label):not(.badge):not(.status){font-size:14px!important;line-height:1.45!important}
html body .table-list tbody td{font-weight:500}
html body .table-list tbody td .label,html body .table-list tbody td .badge,html body .table-list tbody td .status{font-size:11.5px!important}
html body .dataTables_wrapper .dataTables_info,html body .dataTables_wrapper .dataTables_length,html body .dataTables_wrapper .dataTables_length select,html body .dataTables_wrapper .dataTables_filter input,html body .dataTables_wrapper .dataTables_paginate{font-size:14px!important}

/* one type scale for every WHMCS page */
html body.fx-body{font-size:15px}
html body .tt-page-header h1{font-size:32px!important;line-height:1.15!important}
html body .main-content p,html body .main-content li{font-size:15px}
html body .main-content .card-title,html body .main-content .card-header h3,html body .main-content h3.card-title{font-size:18px!important}
html body .main-content .form-control,html body .main-content label{font-size:14.5px}
html body .main-content .btn:not(.btn-lg){font-size:14px}

/* cart.php?gid=addons - tidy addon cards */
html body .cart-body .products .product header span{font-size:18px!important;line-height:1.3!important}
html body .cart-body .products .product .product-desc p{font-size:14.5px!important;line-height:1.6!important;margin-bottom:10px}
html body .cart-body .products .product .product-desc .form-group{display:block;width:100%;margin:6px 0 0}
html body .cart-body .products .product .product-desc select.form-control{width:100%!important;max-width:100%;font-size:14px!important;height:auto;padding:9px 12px}
html body .cart-body .products .product footer{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px;flex-wrap:wrap}
html body .cart-body .products .product .product-pricing{margin:0!important;text-align:start}
html body .cart-body .products .product .price{font-size:20px!important;line-height:1.2!important}
html body .cart-body .products .product footer .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px;padding:10px 18px!important;line-height:1.1!important;font-size:14px!important;white-space:nowrap;height:auto!important;margin:0!important}
html body .cart-body .products .row-eq-height > [class*="col-"]{margin-bottom:22px}
html body .cart-body .products .row-eq-height > [class*="col-"] > .product{height:100%}

/* phones */
@media (max-width:767px){
  html body.fx-body{font-size:14.5px}
  html body .tt-page-header h1{font-size:25px!important}
  html body .main-content .card-title,html body .main-content .card-header h3{font-size:16.5px!important}
  html body .table-list tbody td,html body .table-list tbody td a{font-size:13.5px!important}
  html body .cart-body .products .product header span{font-size:16.5px!important}
  html body .cart-body .products .product .price{font-size:18px!important}
  html body .cart-body .products .product footer .btn{width:100%}
}
/* RTL (Arabic): mirror the rounded header corners so the table closes on the outer edges */
html[dir="rtl"] body .table-list thead th:first-child{border-top-left-radius:0!important;border-top-right-radius:12px!important}
html[dir="rtl"] body .table-list thead th:last-child{border-top-right-radius:0!important;border-top-left-radius:12px!important}
html[dir="rtl"] body .table-list thead th:only-child{border-top-left-radius:12px!important;border-top-right-radius:12px!important}
/* ---------- Mega dropdowns (menus with more than 3 items) - same look as the foxeep.com "Hosting" menu ---------- */
html body .fx-wnav .has-drop > .dropdown.fx-mega{width:600px;max-width:92vw;padding:16px!important;border-radius:18px!important;list-style:none}
html body .fx-mega .fx-mega-label{margin:0 0 10px 4px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0E4EB5;line-height:1.2}
html body .fx-mega .fx-mega-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html body .fx-mega .fx-mega-grid > li{margin:0;padding:0;border:0;list-style:none}
html body .fx-mega a.fx-mega-item{display:flex!important;gap:12px;align-items:flex-start;padding:12px 14px!important;border-radius:14px;background:#F4F8FC;border:1px solid #E3EAF3;text-decoration:none!important;white-space:normal;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
html body .fx-mega a.fx-mega-item:hover,html body .fx-mega a.fx-mega-item:focus-visible{background:#fff;border-color:#C9D8EE;box-shadow:0 10px 22px -14px rgba(1,41,87,.35);transform:translateY(-1px)}
html body .fx-mega .fx-mega-ico{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#FFF1EC;color:#E2542F;font-size:15px}
html body .fx-mega .fx-mega-grid > li:nth-child(4n+2) .fx-mega-ico,html body .fx-mega .fx-mega-grid > li:nth-child(4n+3) .fx-mega-ico{background:#E6EEFB;color:#0E4EB5}
html body .fx-mega .fx-mega-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
html body .fx-mega .fx-mega-txt strong{font-size:14.5px;font-weight:700;color:#012957;line-height:1.3}
html body .fx-mega .fx-mega-txt small{font-size:12.5px;color:#5A6B82;line-height:1.4;font-weight:400}
@media (max-width:1100px){
  html body .fx-wnav .has-drop > .dropdown.fx-mega{width:auto;max-width:none;padding:8px 0!important;border-radius:0!important;box-shadow:none!important}
  html body .fx-mega .fx-mega-label{display:none}
  html body .fx-mega .fx-mega-grid{grid-template-columns:1fr;gap:6px}
  html body .fx-mega a.fx-mega-item{padding:10px 12px!important}
}
/* Mega dropdowns: compact - cards as wide as their text */
@media (min-width:1101px){
  html body .fx-wnav .has-drop > .dropdown.fx-mega{width:auto!important;max-width:min(560px,92vw);padding:12px!important;border-radius:16px!important}
  html body .fx-mega .fx-mega-grid{grid-template-columns:repeat(2,max-content);gap:8px}
  html body .fx-mega a.fx-mega-item{min-width:190px;max-width:250px;gap:10px;padding:9px 12px!important;border-radius:12px}
}
html body .fx-mega .fx-mega-label{font-size:10.5px;margin:0 0 8px 2px}
html body .fx-mega .fx-mega-ico{width:30px;height:30px;border-radius:8px;font-size:13px}
html body .fx-mega .fx-mega-txt strong{font-size:13.5px}
html body .fx-mega .fx-mega-txt small{font-size:12px}
/* Status labels in lists (Paid / Unpaid / Active / Pending ...): one uniform width, text centred */
html body .table-list tbody td .label,html body .table-list tbody td .badge,html body .table-list tbody td span.status{display:inline-flex!important;align-items:center;justify-content:center;min-width:86px;box-sizing:border-box;text-align:center;padding-left:10px!important;padding-right:10px!important}
/* Lists (invoices, tickets, services, domains...): rows 13px instead of 14px */
html body .table-list tbody td,html body .table-list tbody td a,html body .table-list tbody td strong,html body .table-list tbody td span:not(.label):not(.badge):not(.status){font-size:13px!important}
html body .dataTables_wrapper .dataTables_info,html body .dataTables_wrapper .dataTables_length,html body .dataTables_wrapper .dataTables_length select,html body .dataTables_wrapper .dataTables_filter input,html body .dataTables_wrapper .dataTables_paginate{font-size:13px!important}
@media (max-width:767px){html body .table-list tbody td,html body .table-list tbody td a{font-size:13px!important}}
/* Lists: a little room between the table edge and the first column (invoice / ticket / service numbers).
   padding-inline-start = left in LTR languages, right in Arabic */
html body .table-list tbody td:first-child,html body .table-list thead th:first-child{padding-inline-start:22px!important}html body .dataTables_wrapper table.table-list thead tr th:first-child,html body table.table-list.dataTable thead tr th:first-child{padding-inline-start:22px!important}