/* Easy-Unlocker custom overrides — external to dodge Smarty/OPcache staleness — 2026-07-22 */
/* ---- page title band ---- */
.eu-pagehead{background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border-bottom:1px solid #1f2b3a!important;position:relative;overflow:hidden;
  padding:26px 0 22px!important;margin-bottom:22px!important}
.eu-pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(620px 190px at 10% -50%,rgba(250,201,14,.10),transparent 62%),
  radial-gradient(720px 210px at 88% -60%,rgba(25,200,245,.10),transparent 62%)}
.eu-pagehead>.container{position:relative;z-index:1}
.eu-pagehead .page-title{color:#e8eef6!important;font-size:26px!important;font-weight:700;
  letter-spacing:-.01em;display:flex;align-items:center;gap:13px}
.eu-pagehead .page-title::before{content:"";width:4px;height:28px;border-radius:3px;flex:none;
  background:linear-gradient(180deg,#fac90e,#19c8f5)}
.eu-pagehead .breadcrumb{background:transparent!important;border:0!important;padding:0!important;
  margin:12px 0 0 17px!important;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#41505f;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.eu-pagehead .breadcrumb a{color:#93a4b8!important;text-decoration:none}
.eu-pagehead .breadcrumb a:hover{color:#fac90e!important}
.eu-pagehead .breadcrumb i{color:#19c8f5}
.eu-stats{position:relative;z-index:1;display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0 17px}
.eu-stats span{display:inline-flex;align-items:center;gap:7px;background:#111823;
  border:1px solid #2b3a4d;border-radius:999px;padding:6px 13px;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#93a4b8}
.eu-stats span b{color:#fac90e;font-weight:700}
.eu-stats span.hot b{color:#19c8f5}

/* ---- reseller notice ---- */
.eu-notice{display:flex!important;align-items:center;gap:11px;background:rgba(25,200,245,.06);
  border:1px solid rgba(25,200,245,.22);border-left:3px solid #19c8f5;border-radius:12px;
  padding:13px 16px;margin:0 0 16px;color:#c3d0de!important;font-size:14px!important}
.eu-notice::before{content:"i";flex:none;width:20px;height:20px;border-radius:50%;
  background:#19c8f5;color:#04121a;font-weight:800;font-size:12px;font-family:ui-monospace,Consolas,monospace;
  display:grid;place-items:center}
.eu-notice a{color:#fac90e!important;font-weight:700;text-decoration:none}
.eu-notice a:hover{text-decoration:underline}

/* ---- filter toolbar ---- */
.eu-toolbar{background:linear-gradient(180deg,#0d131c,#0a0e14);border:1px solid #1f2b3a;
  border-radius:14px;padding:14px;margin:0 0 20px!important}
.eu-toolbar .form-group{margin-bottom:0}
.eu-toolbar .form-control{background:#111823!important;border:1px solid #2b3a4d!important;
  color:#e8eef6!important;border-radius:11px!important;height:46px;font-size:14px;
  box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
.eu-toolbar .form-control::placeholder{color:#5b6c80}
.eu-toolbar .form-control:focus{border-color:#19c8f5!important;
  box-shadow:0 0 0 3px rgba(25,200,245,.16)!important}
.eu-toolbar #searchservicebox{padding:10px 14px 10px 42px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6c80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center;background-size:16px}
.eu-toolbar select.form-control{-webkit-appearance:none;appearance:none;cursor:pointer;
  padding:10px 40px 10px 14px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.eu-toolbar select.form-control option{background:#0d131c;color:#e8eef6}
/* hot-only switch */
.eu-toolbar .custom-checkbox{display:inline-flex;align-items:center;gap:10px;
  background:#111823;border:1px solid #2b3a4d;border-radius:11px;padding:11px 15px;
  min-height:46px;cursor:pointer;transition:border-color .15s,background .15s}
.eu-toolbar .custom-checkbox:hover{border-color:#fac90e}
.eu-toolbar .custom-control-label{color:#c3d0de;font-size:13.5px;cursor:pointer;margin:0}
.eu-toolbar .custom-control{padding:0}
.eu-toolbar .custom-checkbox{position:relative}
.eu-toolbar .custom-control-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  margin:0;cursor:pointer;z-index:2}
.eu-toolbar .custom-control-label{position:relative;padding-left:52px;display:flex;align-items:center;gap:8px}
.eu-toolbar .custom-control-label::before{display:block!important;content:"";position:absolute;
  left:0;top:50%;transform:translateY(-50%);width:40px;height:22px;border-radius:999px;
  background:#1b2534;border:1px solid #2b3a4d;transition:background .18s,border-color .18s}
.eu-toolbar .custom-control-label::after{display:block!important;content:"";position:absolute;
  left:4px;top:50%;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;
  background:#5b6c80;transition:left .18s,background .18s;box-shadow:none}
.eu-toolbar .custom-control-input:checked~.custom-control-label::before{
  background:rgba(250,201,14,.20);border-color:#fac90e}
.eu-toolbar .custom-control-input:checked~.custom-control-label::after{left:22px;background:#fac90e}
.eu-toolbar .custom-control-input:checked~.custom-control-label{color:#fac90e}
.eu-toolbar .custom-checkbox:has(.custom-control-input:checked){border-color:#fac90e;
  background:rgba(250,201,14,.06)}
.eu-toolbar .custom-control-label .eu-flame{width:15px;height:15px;flex:none;color:#ff7a3d}
@media (max-width:991px){
  .eu-toolbar .col-lg-4{margin-bottom:10px}
  .eu-toolbar .col-lg-4:last-child{margin-bottom:0}
  .eu-pagehead .page-title{font-size:21px!important}
}
/* each group renders only when it gets close to the viewport */
.services .group.card{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:14px!important;overflow:hidden;
  content-visibility:auto;contain-intrinsic-size:auto 440px}
.services .group.card:hover{border-color:#2b3a4d!important}

/* group title was black on a dark page */
.services .group.card thead th{
  background:#111823!important;border:0!important;
  border-bottom:1px solid #1f2b3a!important;padding:13px 16px!important;vertical-align:middle}
.services .group.card thead h5{
  margin:0;color:#fac90e!important;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-family:ui-monospace,"SF Mono",Consolas,monospace}
.services .group.card thead th span,
.services .group.card thead th:not(:first-child){
  color:#93a4b8!important;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-family:ui-monospace,Consolas,monospace}

/* rows */
.services table.table tbody tr{
  background:transparent!important;border-bottom:1px solid rgba(31,43,58,.55);
  transition:background .14s ease,box-shadow .14s ease}
.services table.table tbody tr:nth-child(even){background:rgba(255,255,255,.018)!important}
.services table.table tbody tr:hover{
  background:rgba(25,200,245,.07)!important;box-shadow:inset 3px 0 0 0 #fac90e}
.services table.table tbody td{
  color:#c3d0de!important;border-top:0!important;vertical-align:middle;
  padding:11px 14px!important;font-size:14px}
.services table.table tbody tr:hover td{color:#fff!important}
.services table.table tbody tr:hover .searchme{color:#fac90e!important}
.services table.table tbody td:last-child{
  color:#fac90e!important;font-weight:700;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,Consolas,monospace;white-space:nowrap}
.services table.table tbody td i{color:#19c8f5}
.services table.table tbody img{max-width:34px;height:auto;border-radius:6px}

/* "hot" rows came from bootstrap as pink cells - unreadable on a dark page */
.services table.table tbody tr.table-danger>td,
.services table.table tbody tr.hottest>td{
  background:rgba(250,201,14,.07)!important;color:#f2e6bd!important;border-color:rgba(250,201,14,.16)!important}
.services table.table tbody tr.hottest{box-shadow:inset 3px 0 0 0 rgba(250,201,14,.5)}
.services table.table tbody tr.hottest .searchme{color:#f7dd8b!important}
.services table.table tbody tr.hottest:hover>td{background:rgba(25,200,245,.10)!important;color:#fff!important}
.services table.table tbody tr.hottest:hover{box-shadow:inset 3px 0 0 0 #fac90e}
.services table.table tbody tr.hottest>td:last-child{color:#fac90e!important}

/* page frame */
.services .page-container,.table-responsive.services{background:transparent!important}
.services h1,.services h2,.services h3,.services h4{color:#e8eef6!important}

/* scroll-to-top button (was styled by the tailwind cdn runtime) */
#scrollTopBtn{position:fixed;bottom:20px;left:20px;z-index:50;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:linear-gradient(135deg,#19c8f5,#0090c0);color:#04121a;cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.95);
  transition:opacity .3s ease,transform .2s ease,background .2s ease}
#scrollTopBtn:hover{transform:translateY(-3px);background:linear-gradient(135deg,#fac90e,#e0a800)}
#scrollTopBtn svg{width:22px;height:22px}
#scrollTopBtn.opacity-0{opacity:0}
#scrollTopBtn.pointer-events-none{pointer-events:none}
/* palette taken from the homepage block (Easy.tpl) */
.eun-ic{width:16px;height:16px;flex:none;vertical-align:-2px}
header .header-top{background:#0a0e14!important;border-bottom:1px solid #151f2b}
header .header-top .nav-link{color:#5b6c80!important;font-size:12.5px;letter-spacing:.02em}
header .header-top .nav-link:hover{color:#fac90e!important}
header .header-middle{background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border-bottom:1px solid #1f2b3a}

/* --- menu items as quiet pills with icons --- */
header .header-middle .nav-item>.nav-link:not(.d-lg-none):not(.d-none){
  display:inline-flex!important;align-items:center;gap:8px;
  color:#c3d0de!important;font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:9px 14px!important;border-radius:10px;border:1px solid transparent;
  transition:color .16s,background .16s,border-color .16s,transform .16s}
header .header-middle .nav-item>.nav-link:hover{
  color:#fff!important;background:#111823;border-color:#2b3a4d;transform:translateY(-1px)}
header .header-middle .nav-item>.nav-link .eun-ic{
  width:16px;height:16px;flex:none;color:#19c8f5;transition:color .16s,transform .16s}
header .header-middle .nav-item>.nav-link:hover .eun-ic{color:#fac90e;transform:scale(1.08)}
header .header-middle .nav-item>.nav-link .fa-chevron-down,
header .header-middle .nav-item>.nav-link .fal{font-size:11px;opacity:.7}

/* current page */
header .header-middle .nav-item>.nav-link.eun-on{
  color:#fac90e!important;background:rgba(250,201,14,.10);border-color:rgba(250,201,14,.34)}
header .header-middle .nav-item>.nav-link.eun-on .eun-ic{color:#fac90e}

/* login / primary button */
header .header-middle .nav-link.btn,header .header-middle a.btn.bg-secondary{
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;color:#0a0e14!important;
  border:0!important;border-radius:11px!important;font-weight:800;letter-spacing:.02em;
  padding:10px 18px!important;box-shadow:0 4px 12px -8px rgba(250,201,14,.45);
  transition:transform .16s,box-shadow .16s,filter .16s}
header .header-middle .nav-link.btn:hover,header .header-middle a.btn.bg-secondary:hover{
  transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 6px 16px -10px rgba(250,201,14,.55);color:#0a0e14!important}
header .header-middle .nav-link.btn .eun-ic,header .header-middle a.btn.bg-secondary .eun-ic{color:#0a0e14}

/* dropdowns under the menu */
header .header-middle .dropdown-menu{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:14px!important;padding:10px!important;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95)}
header .header-middle .dropdown-menu .dropdown-item{
  color:#c3d0de!important;border-radius:9px;padding:9px 12px!important;font-size:13.5px}
header .header-middle .dropdown-menu .dropdown-item:hover{
  background:#111823!important;color:#fac90e!important}

/* mobile menu panel */
.modal-menu .modal-content,.modal-menu .modal-body{background:#0a0e14!important;color:#e8eef6}
.modal-menu .nav-link{color:#c3d0de!important;display:flex;align-items:center;gap:10px;
  padding:12px 14px!important;border-radius:10px}
.modal-menu .nav-link:hover{background:#111823;color:#fac90e!important}
.modal-menu .nav-link .eun-ic{width:16px;height:16px;color:#19c8f5;flex:none}
.modal-menu .modal-body,.modal-menu .modal-content{overflow-x:hidden}
.modal-menu .nav-link,.modal-menu .dropdown-item{white-space:normal;word-break:break-word;line-height:1.4}
.modal-menu .dropdown-item{color:#c3d0de!important;padding:11px 14px!important;border-radius:9px}
.modal-menu .dropdown-item:hover{background:#111823!important;color:#fac90e!important}
/* ---------- modal shell ---------- */
body .modal-content,.modal .modal-content{background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:16px!important;color:#e8eef6!important;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.95);overflow:hidden}
.modal-header{background:#111823!important;border-bottom:1px solid #1f2b3a!important;padding:16px 22px!important}
.modal-header .modal-title,.modal-content .page-title{
  color:#e8eef6!important;font-size:18px!important;font-weight:700;letter-spacing:-.01em;margin:0}
.modal-header .close,.modal-header button.close span{color:#5b6c80!important;opacity:1!important;
  text-shadow:none!important;font-weight:400;transition:color .15s}
.modal-header .close:hover,.modal-header .close:hover span{color:#fac90e!important}
.modal-body{padding:22px!important}
.modal-content .card,.modal-content .login-panel{background:transparent!important;border:0!important;box-shadow:none!important}

/* ---------- fields (login modal, register wizard, any auth form) ---------- */
.modal-content .form-control,
.page-login .form-control,
.card-registration .form-control,
.card-simple-form .form-control{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:11px!important;height:46px;font-size:14px;padding:10px 14px!important;
  box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
.modal-content .form-control::placeholder,
.card-registration .form-control::placeholder,
.card-simple-form .form-control::placeholder{color:#5b6c80!important}
.modal-content .form-control:focus,
.page-login .form-control:focus,
.card-registration .form-control:focus,
.card-simple-form .form-control:focus{
  border-color:#19c8f5!important;box-shadow:0 0 0 3px rgba(25,200,245,.16)!important}
.modal-content select.form-control,.card-registration select.form-control,
.card-simple-form select.form-control{-webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:38px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.modal-content select.form-control option,.card-registration select.form-control option{background:#0d131c;color:#e8eef6}

/* chrome autofill paints fields light blue - keep them dark */
.modal-content input:-webkit-autofill,
.modal-content input:-webkit-autofill:hover,
.modal-content input:-webkit-autofill:focus,
.card-registration input:-webkit-autofill,
.card-simple-form input:-webkit-autofill,
.eus-wrap input:-webkit-autofill,
.eu-toolbar input:-webkit-autofill{
  -webkit-text-fill-color:#e8eef6!important;caret-color:#e8eef6;
  -webkit-box-shadow:0 0 0 1000px #111823 inset!important;
  box-shadow:0 0 0 1000px #111823 inset!important;
  transition:background-color 9999s ease-out 0s}

/* leading icon box of the login fields */
.modal-content .input-group-text,.page-login .input-group-text{
  background:#111823!important;border:1px solid #2b3a4d!important;border-right:0!important;
  color:#19c8f5!important;border-radius:11px 0 0 11px!important;min-width:48px;justify-content:center}
.modal-content .input-group .form-control{border-radius:0 11px 11px 0!important;border-left:0!important}
.modal-content .input-group:focus-within .input-group-text{border-color:#19c8f5!important;color:#fac90e!important}

/* labels */
.card-registration label,.card-simple-form label,.modal-content label{
  color:#93a4b8!important;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.card-registration .custom-control-label,.modal-content .custom-control-label{
  font-family:"Segoe UI",system-ui,Arial,sans-serif;font-size:13.5px;letter-spacing:0;
  text-transform:none;color:#c3d0de!important;margin:0}

/* ---------- switches ---------- */
.modal-content .custom-checkbox,.card-registration .custom-checkbox,.card-simple-form .custom-checkbox{
  position:relative;padding:0;display:inline-flex;align-items:center}
.modal-content .custom-control-input,.card-registration .custom-control-input,
.card-simple-form .custom-control-input{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;z-index:2}
.modal-content .custom-control-label,.card-registration .custom-control-label,
.card-simple-form .custom-control-label{position:relative;padding-left:52px;display:flex;
  align-items:center;min-height:24px;cursor:pointer}
.modal-content .custom-control-label::before,.card-registration .custom-control-label::before,
.card-simple-form .custom-control-label::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:40px;height:22px;
  border-radius:999px;background:#1b2534;border:1px solid #2b3a4d;box-shadow:none!important;
  transition:background .18s,border-color .18s}
.modal-content .custom-control-label::after,.card-registration .custom-control-label::after,
.card-simple-form .custom-control-label::after{
  content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  border-radius:50%;background:#5b6c80;transition:left .18s,background .18s}
.modal-content .custom-control-input:checked~.custom-control-label::before,
.card-registration .custom-control-input:checked~.custom-control-label::before,
.card-simple-form .custom-control-input:checked~.custom-control-label::before{
  background:rgba(250,201,14,.20);border-color:#fac90e}
.modal-content .custom-control-input:checked~.custom-control-label::after,
.card-registration .custom-control-input:checked~.custom-control-label::after,
.card-simple-form .custom-control-input:checked~.custom-control-label::after{left:22px;background:#fac90e}

/* ---------- buttons ---------- */
.modal-content .btn-primary,.modal-content .loginbuttons,
.card-registration .btn-primary,.card-simple-form .btn-primary,
.card-registration .btn.forward,.card-simple-form .btn.forward{
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;border:0!important;
  color:#0a0e14!important;font-weight:800;letter-spacing:.02em;border-radius:11px!important;
  min-height:48px;box-shadow:0 10px 26px -12px rgba(250,201,14,.9);
  transition:transform .16s,box-shadow .16s,filter .16s}
.modal-content .btn-primary:hover,.modal-content .loginbuttons:hover,
.card-registration .btn-primary:hover,.card-simple-form .btn-primary:hover{
  transform:translateY(-2px);filter:brightness(1.06);color:#0a0e14!important;
  box-shadow:0 16px 34px -14px rgba(250,201,14,.95)}
.card-registration .btn.backward,.card-simple-form .btn.backward,
.modal-content .btn-secondary{background:#111823!important;border:1px solid #2b3a4d!important;
  color:#c3d0de!important;border-radius:11px!important;min-height:48px;font-weight:600}
.card-registration .btn.backward:hover,.modal-content .btn-secondary:hover{
  border-color:#fac90e!important;color:#fac90e!important}

/* forgot password */
.modal-content .cursor-pointer[data-whatever="Forgot Password"],
.page-login .cursor-pointer{color:#93a4b8!important;font-size:13px!important;transition:color .15s}
.modal-content .cursor-pointer[data-whatever="Forgot Password"]:hover,
.page-login .cursor-pointer:hover{color:#fac90e!important}

/* ---------- registration wizard ---------- */
body .card.card-registration,body .card.card-simple-form{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a!important;
  border-radius:18px!important;box-shadow:0 34px 80px -34px rgba(0,0,0,.9)}
.card-registration .wizard-title,.card-simple-form .wizard-title{
  color:#e8eef6!important;font-size:20px!important;font-weight:700;letter-spacing:-.01em;text-transform:none}
.steps .nav-wizard{border:0!important;justify-content:center;gap:9px;margin:16px 0 26px}
.steps .nav-wizard .nav-item{flex:1 1 0!important;width:auto!important;min-width:0;max-width:120px}
.steps .nav-wizard .nav-link{display:block;width:100%!important;max-width:110px;margin:0 auto;height:5px;padding:0!important;border:0!important;
  border-radius:999px;background:#1f2b3a!important;transition:background .2s}
.steps .nav-wizard .nav-item.checked .nav-link,
.steps .nav-wizard .nav-link.active{background:linear-gradient(90deg,#fac90e,#19c8f5)!important}
.card-registration .text-muted,.card-simple-form .text-muted{color:#5b6c80!important}
.card-registration a,.card-simple-form a{color:#19c8f5}
.card-registration a:hover,.card-simple-form a:hover{color:#fac90e}
.card-registration .fa-eye,.card-registration .fa-eye-slash,
.modal-content .fa-eye,.modal-content .fa-eye-slash{color:#5b6c80}
.card-registration .fa-eye:hover,.modal-content .fa-eye:hover{color:#19c8f5}

/* alerts inside auth screens */
.modal-content .alert,.card-registration .alert{border-radius:11px;border:1px solid #2b3a4d;
  background:#111823;color:#c3d0de}
/* ---------- announcements modal ---------- */
#announcement .modal-dialog{animation:eu-pop .40s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes eu-pop{from{opacity:0;transform:translateY(20px) scale(.975)}to{opacity:1;transform:none}}
#announcement .modal-header{background:linear-gradient(90deg,#111823,#0d131c)!important;position:relative}
#announcement .modal-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,#fac90e,#19c8f5,transparent)}
#announcement .modal-title{display:flex;align-items:center;gap:10px;color:#e8eef6!important}
#announcement .modal-title .fa-bullhorn{color:#fac90e;animation:eu-ring 3.2s ease-in-out infinite;transform-origin:60% 60%}
@keyframes eu-ring{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-13deg)}94%{transform:rotate(11deg)}}
#announcement .modal-body{max-height:min(72vh,620px);overflow:auto}
#announcement .modal-body thead{display:none}
#announcement .modal-body table{border-collapse:separate!important;border-spacing:0 10px!important;
  width:100%;background:transparent!important}
#announcement .modal-body tr.announce{background:#111823!important;transition:transform .16s,box-shadow .16s;
  animation:eu-rise .5s both}
#announcement .modal-body tr.announce td{border:0!important;padding:15px 18px!important;
  vertical-align:middle;color:#c3d0de!important;font-size:14px;line-height:1.6}
#announcement .modal-body tr.announce td:first-child{
  white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;border-left:0!important;border-radius:0!important;
  font-family:ui-monospace,Consolas,monospace;font-size:11.5px;letter-spacing:.08em;color:#5b6c80!important}
#announcement .modal-body tr.announce td:last-child{border-radius:0 12px 12px 0}
/* rows become flex cards so the hover zoom actually applies */
#announcement .modal-body table,#announcement .modal-body tbody{display:block;width:100%}
#announcement .modal-body tr.announce{display:grid!important;
  grid-template-columns:130px minmax(0,1fr) 0;align-items:center;column-gap:6px;width:100%;
  border-radius:12px;margin:0 0 10px;border-left:3px solid #fac90e;transform-origin:center;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
#announcement .modal-body tr.announce td{display:block;border:0!important;border-radius:0!important}
#announcement .modal-body tr.announce td:first-child{border-left:0!important;flex:none}
#announcement .modal-body tr.announce td:nth-child(2){min-width:0;width:auto!important}
#announcement .modal-body tr.announce td:last-child{padding:0!important;overflow:hidden}
#announcement .modal-body tr.announce td:nth-child(2) .d-flex>div:first-child{min-width:0;
  overflow:hidden;text-overflow:ellipsis}
#announcement .modal-body tr.announce:hover{zoom:1.02;
  box-shadow:0 18px 38px -20px rgba(0,0,0,.95);position:relative;z-index:2}
#announcement .modal-body tr.announce:hover td{background:#151f2b!important}
#announcement .modal-body tr.announce:hover td:first-child{border-left-color:#19c8f5!important}
.card-announcement .news-list{border-radius:10px;padding-left:8px;padding-right:8px;
  transition:transform .16s ease,background .16s ease}
.card-announcement .news-list:hover{transform:scale(1.015);background:#111823}
#announcement .modal-body tr.announce:hover td{color:#fff!important}
@keyframes eu-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#announcement .modal-body tr.announce:nth-child(1){animation-delay:.06s}
#announcement .modal-body tr.announce:nth-child(2){animation-delay:.12s}
#announcement .modal-body tr.announce:nth-child(3){animation-delay:.18s}
#announcement .modal-body tr.announce:nth-child(4){animation-delay:.24s}
#announcement .modal-body tr.announce:nth-child(5){animation-delay:.30s}
#announcement .modal-body tr.announce:nth-child(6){animation-delay:.36s}
#announcement .modal-body tr.announce:nth-child(7){animation-delay:.42s}
#announcement .modal-body tr.announce:nth-child(n+8){animation-delay:.48s}

/* announcements card on the dashboard */
.card-announcement{background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:16px!important}
.card-announcement .card-title span{color:#fac90e!important;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.card-announcement .news-list{border-bottom:1px solid #1f2b3a;padding:11px 2px}
.card-announcement .news-list:last-child{border-bottom:0}
.card-announcement .news-text{color:#c3d0de;font-size:13.5px}
.card-announcement .news-date{color:#5b6c80;font-family:ui-monospace,Consolas,monospace;font-size:11px;margin-top:3px}
.card-announcement a{color:#19c8f5}
.card-announcement a:hover{color:#fac90e}
.card-announcement .carousel-item h5{color:#e8eef6;font-size:15px;line-height:1.6}
.card-announcement .fa-bullhorn{color:#fac90e}

/* ---------- account dropdown ---------- */
header .nav-item.profile .nav-link{color:#e8eef6!important}
header .nav-item.profile .avatar-img img{width:34px;height:34px;border-radius:10px;
  border:1px solid #2b3a4d;background:#111823}
header .nav-item.profile .user-balance small{font-family:ui-monospace,Consolas,monospace;
  font-weight:700;letter-spacing:.04em}
@media (min-width:992px){header .nav-link.d-lg-none{display:none!important}}
header .nav-item.profile>div>div>a.nav-link{
  display:flex!important;align-items:center;gap:10px;width:100%;
  background:#0f151f!important;border:1px solid #1f2b3a!important;border-radius:12px;
  padding:7px 12px!important;
  transition:background .15s,border-color .15s}
header .nav-item.profile>div>div>a.nav-link:hover,
header .nav-item.profile.show>div>div>a.nav-link{background:#111823!important;border-color:#2b3a4d!important}
header .nav-item.profile .avatar-img img{width:30px!important;height:30px!important;border-radius:9px}
header .nav-item.profile .nav-link>div{gap:10px}
header .nav-item.profile{min-width:272px}
header .nav-item.profile>div,header .nav-item.profile>div>div{width:100%}
header .nav-item.profile .nav-link>div{width:100%}
header .nav-item.profile .nav-link>div>div:last-child{display:flex;flex-direction:row;
  align-items:center;gap:9px;flex:1;min-width:0;white-space:nowrap;
  line-height:1.2;font-size:13.5px;font-weight:600;color:#e8eef6;text-transform:none;letter-spacing:0}
header .nav-item.profile .user-balance{order:5;margin:0!important;padding-left:9px;
  border-left:1px solid #243244}
header .nav-item.profile .fa-chevron-down{order:9;margin-left:auto!important;
  color:#5b6c80;transition:color .15s,transform .15s}
header .nav-item.profile>div>div>a.nav-link:hover .fa-chevron-down{color:#19c8f5}
header .nav-item.profile.show .fa-chevron-down{color:#fac90e;transform:rotate(180deg)}
header .nav-item.profile .nav-link>div>div:last-child>span{
  display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;
  background:rgba(250,201,14,.13);border:1px solid rgba(250,201,14,.3);color:#fac90e!important;
  font-family:ui-monospace,Consolas,monospace;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  vertical-align:1px}

header .nav-item.profile .user-balance small{color:#fac90e!important;background:none!important;
  border:0!important;padding:0!important;font-family:ui-monospace,Consolas,monospace;
  font-weight:700;font-size:11.5px;letter-spacing:.02em}
header .nav-item.profile .user-balance.text-danger small{color:#ff5c6c!important}
header .nav-item.profile .fa-chevron-down{font-size:10px;color:#5b6c80;margin-left:6px}

header .dropdown-menu.my-account{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a!important;
  border-radius:14px!important;padding:8px!important;min-width:256px;margin-top:10px!important;
  box-shadow:0 28px 64px -26px rgba(0,0,0,.95);animation:eu-menu .16s ease-out both;
  right:0!important;left:auto!important;top:100%!important;transform:none!important;
  margin-top:0!important;padding-top:14px!important;min-width:250px}
/* invisible bridge so the menu never closes while the mouse travels to it */
header .nav-item.profile .dropdown-menu.my-account::before{content:"";position:absolute;
  left:0;right:0;top:-14px;height:16px;background:transparent}
header .nav-item.profile:hover .dropdown-menu.my-account,
header .nav-item.profile .dropdown-menu.my-account:hover{opacity:1!important;visibility:visible!important}
@keyframes eu-menu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
header .my-account .dropdown-item{display:flex;align-items:center;gap:11px;
  color:#c3d0de!important;border-radius:10px;padding:10px 12px!important;font-size:13.5px;
  transition:background .14s,color .14s,transform .14s}
header .my-account .dropdown-item:hover{background:#111823!important;color:#fac90e!important;transform:translateX(2px)}
header .my-account .dropdown-item .eun-ic{width:16px;height:16px;flex:none;color:#19c8f5;transition:color .14s}
header .my-account .dropdown-item:hover .eun-ic{color:#fac90e}
header .my-account .dropdown-divider{border-color:#1f2b3a!important;margin:6px 4px}
header .my-account .dropdown-header{color:#5b6c80!important;
  font-family:ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- kill the purple buttons in the logged-in header ---------- */
header .btn-primary,header .bg-primary,header .btn.bg-secondary,
header .badge-primary,header .btn-secondary.bg-primary{
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;background-color:#fac90e!important;
  border:0!important;color:#0a0e14!important;font-weight:700;border-radius:11px!important;
  box-shadow:0 4px 12px -8px rgba(250,201,14,.45)}
header .btn-primary:hover,header .btn.bg-secondary:hover{
  filter:brightness(1.06);transform:translateY(-1px);color:#0a0e14!important}
header .cartminiview .badge,header .badge{background:#19c8f5!important;color:#04121a!important;
  border-radius:999px;font-weight:700}
header .text-primary,header a.text-primary{color:#fac90e!important}
/* ---------- one palette everywhere (no more purple) ---------- */
.btn-primary,.btn.btn-primary,a.btn-primary,button.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:focus{
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;background-color:#fac90e!important;
  border:0!important;color:#0a0e14!important;font-weight:700;border-radius:11px!important;
  box-shadow:0 8px 22px -12px rgba(250,201,14,.85)!important;
  transition:transform .15s,filter .15s,box-shadow .15s}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px);color:#0a0e14!important}
.btn-info,.btn-secondary,.btn-outline-primary{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#c3d0de!important;
  border-radius:11px!important;font-weight:600;transition:border-color .15s,color .15s}
.btn-info:hover,.btn-secondary:hover,.btn-outline-primary:hover{
  border-color:#19c8f5!important;color:#19c8f5!important;background:#111823!important}
.bg-primary{background:linear-gradient(135deg,#fac90e,#e0a800)!important;color:#0a0e14!important}
.text-primary,a.text-primary,.text-primary:hover{color:#fac90e!important}
.badge-primary,.badge.badge-primary{background:#19c8f5!important;color:#04121a!important;border-radius:999px}
.border-primary{border-color:#fac90e!important}
.alert-primary,.alert-info{background:rgba(25,200,245,.08)!important;border:1px solid rgba(25,200,245,.28)!important;
  border-left:3px solid #19c8f5!important;color:#c3d0de!important;border-radius:12px!important}
.alert-info .btn,.alert-primary .btn{background:#19c8f5!important;color:#04121a!important;border:0!important;
  border-radius:9px!important;font-weight:700}
.progress{background:#1f2b3a!important;border-radius:999px}
.progress-bar,.progressbar{border-radius:999px}
a{color:#19c8f5}
a:hover{color:#fac90e}

/* plain .btn was forced purple by the theme - make it a quiet dark pill */
.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.close):not(.navbar-toggler):not(.carousel-control-prev):not(.carousel-control-next):not(.btn-link){
  background:#111823!important;border:1px solid #2b3a4d!important;color:#c3d0de!important;
  border-radius:11px!important;font-weight:600;
  transition:border-color .15s,color .15s,transform .15s}
.btn:not(.btn-primary):not(.close):not(.navbar-toggler):hover{
  border-color:#19c8f5!important;color:#fff!important;transform:translateY(-1px)}
.btn i,.btn .fal,.btn .far,.btn .fab,.btn .fa{color:#19c8f5}
.btn:hover i,.btn:hover .fal,.btn:hover .fab{color:#fac90e}
.btn-newsletter,.btn.btn-newsletter{background:linear-gradient(135deg,#fac90e,#e0a800)!important;
  border:0!important;color:#0a0e14!important;font-weight:700}
.btn-newsletter i,.btn-newsletter:hover i{color:#0a0e14!important}
.btn-primary i,.btn-primary:hover i{color:#0a0e14!important}

/* ---------- anything rendered inside a modal ---------- */
.modal-content .modal-body,.modal-content .bg-gray,.modal-content .bg-white,
.modal-content .page-container,.modal-content .card-body{background:transparent!important}
.modal-content table{background:transparent!important;color:#c3d0de!important;
  border-collapse:separate!important;border-spacing:0}
.modal-content table thead th{background:#111823!important;border:0!important;
  border-bottom:1px solid #1f2b3a!important;color:#93a4b8!important;white-space:nowrap;
  font-family:ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 14px!important}
.modal-content table thead th:first-child{border-radius:10px 0 0 0}
.modal-content table thead th:last-child{border-radius:0 10px 0 0}
.modal-content table tbody td{background:transparent!important;border:0!important;
  border-bottom:1px solid rgba(31,43,58,.65)!important;color:#c3d0de!important;
  padding:13px 14px!important;font-size:13.5px;vertical-align:middle}
.modal-content table tbody tr:hover td{background:rgba(25,200,245,.055)!important;color:#fff!important}
.modal-content .table-striped tbody tr:nth-of-type(odd) td{background:rgba(255,255,255,.014)!important}
.modal-content tbody tr td[colspan],.modal-content .no-result,.modal-content .not-found{
  color:#5b6c80!important;text-align:center;font-size:13.5px;padding:26px 14px!important}
.modal-content .pagination .page-link{background:#111823!important;border:1px solid #2b3a4d!important;
  color:#c3d0de!important;border-radius:9px!important;margin:0 3px}
.modal-content .pagination .page-item.active .page-link{
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;color:#0a0e14!important;border:0!important}
.modal-content .badge{border-radius:999px;padding:5px 11px;font-weight:700}
.modal-content .badge-success{background:rgba(25,200,245,.15)!important;color:#19c8f5!important}
.modal-content .badge-danger{background:rgba(255,92,108,.15)!important;color:#ff5c6c!important}
.modal-content .badge-warning{background:rgba(250,201,14,.15)!important;color:#fac90e!important}
.modal-content hr{border-color:#1f2b3a!important}
.modal-content .text-muted{color:#5b6c80!important}
.modal-content .modal-footer{border-top:1px solid #1f2b3a!important;background:#0d131c!important}
.modal-backdrop.show{background:#04070c;opacity:.72!important}

/* floating security notice */
.alert.alert-info,.alert.alert1{
  display:flex!important;align-items:center;gap:14px;
  background:linear-gradient(90deg,rgba(25,200,245,.10),rgba(250,201,14,.05))!important;
  border:1px solid rgba(25,200,245,.28)!important;border-left:3px solid #19c8f5!important;
  border-radius:12px!important;color:#c3d0de!important;padding:9px 14px!important;
  font-size:13.5px;line-height:1.45;margin-bottom:16px!important;
  box-shadow:0 16px 36px -28px rgba(0,0,0,.95);
  animation:eu-float 4.2s ease-in-out infinite;will-change:transform}
@keyframes eu-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.alert.alert-info,.alert.alert1{animation:none}}
.alert.alert-info::before,.alert.alert1::before{content:"";flex:none;width:28px;height:28px;
  border-radius:9px;border:1px solid rgba(25,200,245,.28);
  background:rgba(25,200,245,.12) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3Cpath d='M9.3 12.2l1.9 1.9 3.6-3.9'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.alert.alert-info a,.alert.alert1 a{margin-left:auto;flex:none;
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;color:#0a0e14!important;
  border-radius:9px;padding:6px 15px;font-size:13px;font-weight:700;text-decoration:none!important;
  box-shadow:0 8px 20px -12px rgba(250,201,14,.9);transition:transform .15s,filter .15s}
.alert.alert-info a:hover,.alert.alert1 a:hover{transform:translateY(-1px);filter:brightness(1.07);
  color:#0a0e14!important}

/* ---------- client dashboard ---------- */
.clientarea-balance .card,.card-othercredit,.card-area-status,.card-unpaid-balance{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a!important;
  border-radius:16px!important;position:relative;overflow:hidden;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.clientarea-balance .card:hover,.card-area-status:hover{
  border-color:#2b3a4d!important;transform:translateY(-3px);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.95)}
.clientarea-balance .card::before,.card-area-status::before{content:"";position:absolute;
  left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#fac90e,#19c8f5);opacity:.5}
.card-order-success::before{background:linear-gradient(90deg,#19c8f5,#0090c0)!important;opacity:.75}
.card-order-process::before{background:linear-gradient(90deg,#fac90e,#e0a800)!important;opacity:.75}
.card-order-fail::before{background:linear-gradient(90deg,#ff5c6c,#c62a3a)!important;opacity:.75}
.clientarea-balance .text-muted,.card-area-status .text-muted,.card-othercredit .text-muted{
  color:#5b6c80!important;font-family:ui-monospace,Consolas,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.clientarea-balance .counter,.clientarea-balance .big-font,
.card-area-status h2,.card-othercredit .card-body span{
  color:#e8eef6!important;font-family:ui-monospace,"SF Mono",Consolas,monospace;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clientarea-balance .counter{color:#fac90e!important}
.clientarea-balance .aftercounter{color:#93a4b8}
.card-unpaid-balance .text-danger,.text-danger{color:#ff5c6c!important}
.card-area-status .bg-light{background:#1f2b3a!important}
.card-order-success .bg-success{background:#19c8f5!important}
.card-order-process .bg-success,.card-order-process .progressbar{background:#fac90e!important}
.card-order-fail .bg-success,.card-order-fail .progressbar{background:#ff5c6c!important}
.card-area-status .big-icon,.clientarea-balance .big-icon,.card-othercredit i{color:#19c8f5!important}

/* ---------- service picker cards (place order) ---------- */
.service-list{list-style:none;padding:0;margin:0}
.service-list>li>ul{list-style:none;padding:0;margin:0 0 26px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.service-list>li>ul>li{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a;
  border-radius:14px;padding:14px;display:flex;align-items:flex-start;gap:13px;
  transition:border-color .16s,transform .16s,box-shadow .16s;cursor:pointer}
.service-list>li>ul>li:hover{border-color:#19c8f5;transform:translateY(-2px);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.95)}
.service-list .pull-left{float:none!important}
.service-list .service-ic{display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:12px;background:#111823;border:1px solid #2b3a4d;color:#19c8f5;
  font-family:ui-monospace,Consolas,monospace;font-weight:700;font-size:15px;text-transform:uppercase}
.service-list>li>ul>li:hover .service-ic{border-color:#fac90e;color:#fac90e}
.service-list a{color:#e8eef6!important;font-size:14.5px;line-height:1.45;text-decoration:none!important}
.service-list>li>ul>li:hover a{color:#fac90e!important}
.service-list small{color:#5b6c80!important;font-family:ui-monospace,Consolas,monospace;
  font-size:11px;letter-spacing:.06em;display:block;margin-top:5px}
.service-list .service-price2{display:inline-block;margin:6px 6px 0 0;padding:3px 11px;
  background:rgba(25,200,245,.12)!important;color:#19c8f5!important;
  border:1px solid rgba(25,200,245,.3);border-radius:999px;font-weight:700;font-size:11.5px}
.service-list .discount_text{background:rgba(250,201,14,.14)!important;color:#fac90e!important;
  border-color:rgba(250,201,14,.36)}
.service-list .time{display:inline-block;margin-top:6px;padding:3px 11px;background:#111823!important;
  border:1px solid #2b3a4d;color:#93a4b8!important;border-radius:999px;font-size:11.5px}
.service-heading{color:#fac90e!important;font-family:ui-monospace,Consolas,monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.list-services .service-info{background:#111823!important;border-bottom:1px solid #1f2b3a!important;
  border-radius:12px}
.not-found,.searchservice2 .not-found{color:#5b6c80;text-align:center;padding:26px}
*{scrollbar-width:thin;scrollbar-color:#2b3a4d transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0e14}
::-webkit-scrollbar-thumb{background:#243244;border-radius:999px;border:2px solid #0a0e14}
::-webkit-scrollbar-thumb:hover{background:#31465e}
::-webkit-scrollbar-corner{background:#0a0e14}
.modal-body::-webkit-scrollbar-track,.dropdown-menu::-webkit-scrollbar-track,
.card::-webkit-scrollbar-track,.services::-webkit-scrollbar-track{background:#0d131c}
.modal-body::-webkit-scrollbar-thumb,.dropdown-menu::-webkit-scrollbar-thumb,
.card::-webkit-scrollbar-thumb,.services::-webkit-scrollbar-thumb{border-color:#0d131c}
.eu-price{display:inline-flex;align-items:center;justify-content:center;
  min-width:108px;height:30px;margin:0 3px;padding:0 12px;border-radius:999px;
  background:rgba(250,201,14,.13);border:1px solid rgba(250,201,14,.38);color:#fac90e!important;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;font-weight:700;font-size:12.5px;
  letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 3px rgba(250,201,14,.05)}
#announcement .modal-body tr.announce:hover .eu-price,
.card-announcement .news-list:hover .eu-price{background:rgba(250,201,14,.2);border-color:#fac90e}
/* the chip sits at the far right of its row */
.eu-price-slot{margin-left:auto;flex:none;white-space:nowrap}
#announcement tr.announce td:nth-child(2) .d-flex{display:flex!important;align-items:center;gap:16px;width:100%}
#announcement tr.announce td:nth-child(2){width:100%}
.card-announcement .news-list.eu-has-price{display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"t p" "d p";column-gap:12px;align-items:center}
.card-announcement .news-list.eu-has-price .news-text{grid-area:t;min-width:0}
.card-announcement .news-list.eu-has-price .news-date{grid-area:d}
.card-announcement .news-list.eu-has-price .eu-price-slot{grid-area:p;align-self:center}
#sndkey.eu-2fa td{border:0!important;padding:14px 16px!important;vertical-align:middle}
#sndkey.eu-2fa h3{color:#e8eef6!important;font-size:16px;margin:0 0 4px}
#sndkey.eu-2fa .text-muted{color:#5b6c80!important;font-family:ui-monospace,Consolas,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
#sndkey.eu-2fa tr.eu-2fa-help{display:none}
#sndkey.eu-2fa.open tr.eu-2fa-help{display:table-row;animation:eu-rise .35s both}
#sndkey.eu-2fa img.steps{border-radius:12px;border:1px solid #1f2b3a;background:#111823}
#sndkey.eu-2fa .big-icon{color:#19c8f5;font-size:26px}
#sndkey.eu-2fa a:hover .big-icon{color:#fac90e}
#sndkey.eu-2fa img[alt="QR Code"]{padding:12px;background:#fff;border-radius:14px;
  border:1px solid #2b3a4d;box-shadow:0 16px 36px -22px rgba(0,0,0,.9)}
.eu-help-btn{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;cursor:pointer;
  background:#111823;border:1px solid #2b3a4d;color:#93a4b8;border-radius:999px;
  padding:7px 14px;font-size:12.5px;font-weight:600;transition:.15s}
.eu-help-btn:hover{border-color:#19c8f5;color:#19c8f5}
.eu-help-btn i,.eu-help-btn span.q{display:grid;place-items:center;width:18px;height:18px;
  border-radius:50%;background:rgba(25,200,245,.15);color:#19c8f5;font-weight:800;font-size:11px;
  font-family:ui-monospace,Consolas,monospace}
#sndkey.eu-2fa.open .eu-help-btn{border-color:#fac90e;color:#fac90e}
#sndkey.eu-2fa.open .eu-help-btn span.q{background:rgba(250,201,14,.16);color:#fac90e}
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item:active,
.bg-hover:hover,.bg-hover:focus,.menu.selected,.page-size.selected,
.btn.btn-light,.btn.btn-light:hover,.dropdown-item.active{
  background:#111823!important;color:#fac90e!important;border-color:#2b3a4d!important}
header .my-account .dropdown-item.text-danger:hover{color:#ff5c6c!important}
.dropdown-header{color:#5b6c80!important;font-family:ui-monospace,Consolas,monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.dropdown-menu{background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:14px!important;padding:8px!important}
.dropdown-menu .dropdown-item{color:#c3d0de!important;border-radius:10px;padding:9px 12px!important}
.dropdown-divider{border-color:#1f2b3a!important}
header .header-middle .nav-item>.nav-link.dropdown-item,
header .header-middle .nav-item>a.nav-link{
  padding:8px 11px!important;gap:7px;margin:0 1px}
header .header-middle .nav-item>.nav-link.dropdown-item:hover,
header .header-middle .nav-item>.nav-link.dropdown-item:focus,
header .header-middle .nav-item>a.nav-link:hover,
header .header-middle .nav-item.show>a.nav-link,
header .header-middle .nav-item.show>.nav-link.dropdown-item{
  background:#111823!important;color:#fff!important;border-color:#2b3a4d!important}
header .header-middle .nav-item>.nav-link.dropdown-item.eun-on,
header .header-middle .nav-item>a.nav-link.eun-on{
  background:rgba(250,201,14,.10)!important;color:#fac90e!important;
  border-color:rgba(250,201,14,.34)!important}
header .header-middle .nav-item>.nav-link:hover .eun-ic{color:#fac90e}
header .header-middle .navbar-nav,header .header-middle .nav,
header .header-middle .navbar-collapse .navbar-nav{gap:1px}
header .header-middle .nav-item{margin:0!important}
/* group heading as a badge with a gear */
.service-list-box h3.title,.list-services h3.title{
  display:flex;align-items:center;gap:14px;margin:14px 0 16px}
.service-list-box h3.title span,.list-services h3.title span{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  background:linear-gradient(135deg,#151f2c,#111823);border:1px solid #2b3a4d;
  border-left:3px solid #fac90e;border-radius:999px;padding:9px 18px 9px 15px;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:13px!important;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#fac90e!important;
  box-shadow:0 12px 26px -18px rgba(0,0,0,.9)}
.service-list-box h3.title span::before,.list-services h3.title span::before{
  content:"";width:17px;height:17px;flex:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fac90e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .32 1.77l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.6 1.6 0 0 0-1.77-.32 1.6 1.6 0 0 0-1 1.47V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1.05-1.47 1.6 1.6 0 0 0-1.77.32l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.6 1.6 0 0 0 4.6 15a1.6 1.6 0 0 0-1.47-1H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 9a1.6 1.6 0 0 0-.33-1.77l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.6 1.6 0 0 0 8.87 4.7 1.6 1.6 0 0 0 9.87 3.23V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.47 1.6 1.6 0 0 0 1.77-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.6 1.6 0 0 0 19.4 9v.13a1.6 1.6 0 0 0 1.47 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E") center/17px 17px no-repeat}
.service-list-box h3.title::after,.list-services h3.title::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,#1f2b3a,transparent)}

/* the card itself */
.service .card-product,.card.card-product{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:16px!important;overflow:hidden;
  padding:0!important;min-height:118px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.service:hover .card-product{border-color:#19c8f5!important;transform:translateY(-3px);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.95)}
.service.active .card-product{position:relative}
.service .card-product .row{margin:0}

/* the NEW flag rides on the card's top border */
.service .card-product{position:relative}
.card-product .textred{
  position:absolute!important;top:-1px;right:16px;z-index:3;
  background:linear-gradient(135deg,#19c8f5,#0090c0)!important;color:#04121a!important;
  border:0!important;border-radius:0 0 9px 9px!important;padding:3px 12px 4px!important;
  font-family:ui-monospace,Consolas,monospace;font-size:9.5px!important;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.2;
  box-shadow:0 8px 18px -10px rgba(25,200,245,.95)}
.service:hover .card-product .textred{background:linear-gradient(135deg,#fac90e,#e0a800)!important;
  box-shadow:0 8px 18px -10px rgba(250,201,14,.95)}

/* code tile on the left */
.card-product .col-group-icon{padding:0}
.card-product .col-group-icon>div{
  background:linear-gradient(180deg,#141d29,#111823)!important;border-right:1px solid #1f2b3a;
  min-width:76px;width:76px;
  justify-content:center;color:#19c8f5!important;font-family:ui-monospace,Consolas,monospace;
  font-weight:700;font-size:17px;letter-spacing:.06em;transition:color .18s,background .18s}
.service:hover .card-product .col-group-icon>div{color:#fac90e!important;background:#141d29!important}

/* text block */
.card-product .col{padding:15px 16px}
.card-product .searchme{display:block;color:#e8eef6!important;font-size:14.5px;font-weight:600;
  line-height:1.4;transition:color .16s}
.service:hover .card-product .searchme{color:#fac90e!important}
.card-product br{display:none}
.card-product .text-muted{color:#5b6c80!important;font-family:ui-monospace,Consolas,monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin:5px 0 11px}

/* badges */
.card-product .badge{border-radius:999px!important;padding:5px 12px!important;margin-right:7px;
  font-weight:700;letter-spacing:.02em;vertical-align:middle}
.card-product .badge-success{position:relative;overflow:hidden;display:inline-block;
  background:linear-gradient(135deg,rgba(25,200,245,.18),rgba(25,200,245,.07))!important;
  color:#19c8f5!important;border:1px solid rgba(25,200,245,.42)!important;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:12.5px;
  font-variant-numeric:tabular-nums;transform-origin:left center;
  box-shadow:0 0 0 3px rgba(25,200,245,.05);
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.card-product .badge-success::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%);
  transform:translateX(-130%);animation:eu-shine 3.6s ease-in-out infinite}
@keyframes eu-shine{0%,62%{transform:translateX(-130%)}86%,100%{transform:translateX(150%)}}
@media (prefers-reduced-motion:reduce){.card-product .badge-success::after{animation:none}}
.service:hover .card-product .badge-warning{color:#fac90e!important;
  border-color:rgba(250,201,14,.45)!important;background-color:rgba(250,201,14,.10)!important}
.card-product .badge-warning::after{content:"";position:absolute;left:11px;top:50%;
  width:13px;height:13px;margin-top:-6.5px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(25,200,245,.55);animation:eu-pulse 2.4s ease-out infinite}
.service:hover .card-product .badge-warning::after{border-color:rgba(250,201,14,.6)}
@keyframes eu-pulse{0%{transform:scale(.55);opacity:.85}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.card-product .badge-warning::after{animation:none;opacity:0}}
.service:hover .card-product .badge-success{transform:scale(1.07);
  background:linear-gradient(135deg,rgba(250,201,14,.22),rgba(250,201,14,.08))!important;
  color:#fac90e!important;border-color:rgba(250,201,14,.5)!important;
  box-shadow:0 8px 20px -10px rgba(250,201,14,.65)}
.card-product .badge-warning{position:relative;display:inline-flex;align-items:center;
  background:#111823!important;color:#93a4b8!important;border:1px solid #2b3a4d!important;
  font-size:11.5px;font-weight:600;padding-left:30px!important;letter-spacing:.02em;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a4b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;
  background-position:11px center!important;background-size:13px 13px!important;
  transition:color .18s,border-color .18s,background-color .18s}


/* the filter bar on top of the list */
.list-services .input-large,.list-services input[type=text],
.service-list-box input[type=text],.list-services select{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:11px!important;height:46px;padding:10px 14px!important;box-shadow:none!important}
.list-services input::placeholder{color:#5b6c80!important}
.list-services input:focus,.list-services select:focus{border-color:#19c8f5!important;
  box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}
/* no modal may crop its content - always fit the screen and scroll inside */
/* width stays per-modal - only the order/ajax popups are wide */
.modal .modal-dialog{margin:22px auto!important}
#login .modal-dialog{max-width:400px!important}
.modal .modal-content{max-height:calc(100vh - 44px)!important;display:flex;flex-direction:column;overflow:hidden}
.modal .modal-body{overflow-y:auto!important;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.modal .modal-header,.modal .modal-footer{flex:none}
.modal-dialog-centered{align-items:center;min-height:calc(100% - 44px)}

#modal-order .modal-dialog,#modal-ajax .modal-dialog,.modal .modal-dialog.modal-lg{max-width:min(920px,94vw)!important;margin:22px auto!important}
#modal-order .modal-content,#modal-ajax .modal-content{max-height:calc(100vh - 44px);display:flex;flex-direction:column;overflow:hidden}
#modal-order .modal-body,#modal-ajax .modal-body{overflow:auto!important;flex:1 1 auto;padding:20px 22px!important}
#modal-order .modal-header,#modal-ajax .modal-header{background:linear-gradient(90deg,#111823,#0d131c)!important;position:relative;flex:none}
#modal-order .modal-header::after,#modal-ajax .modal-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,#fac90e,#19c8f5,transparent)}
.server-order-layout,.server-order-layout *{box-sizing:border-box}
.server-order-layout{overflow:visible!important;position:static!important}
.server-order-form,.server-order-info{float:none!important;width:100%!important;padding-right:0!important}
@media (min-width:992px){
  .server-order-layout{display:flex;gap:26px;align-items:flex-start}
  .server-order-form{flex:0 0 384px;width:384px!important}
  .server-order-info{flex:1 1 auto;min-width:0;width:auto!important}
}

/* price block as the hero of the popup */
.creditCost.price-summary-block{background:linear-gradient(135deg,#111823,#0d131c)!important;
  border:1px solid #2b3a4d!important;border-left:3px solid #fac90e!important;border-radius:14px;
  padding:16px 18px!important;margin:0 0 16px;color:#93a4b8!important;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 16px 34px -24px rgba(0,0,0,.9)}
.creditCost.price-summary-block label{display:block;margin:0 0 4px;color:#fac90e!important;
  font-size:32px;font-weight:800;letter-spacing:-.01em;line-height:1.05;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;font-variant-numeric:tabular-nums;
  text-transform:none}
.creditCost.price-summary-block span{color:#93a4b8!important}

/* form side */
.server-order-form .form-label{color:#93a4b8!important;font-family:ui-monospace,Consolas,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;display:block}
.server-order-form input[type=text],.server-order-form input[type=password],
.server-order-form textarea,.server-order-form select,#modal-order .form-control,#modal-ajax .form-control{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:10px!important;width:100%;
  box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
.server-order-form input:focus,.server-order-form textarea:focus,#modal-order .form-control:focus,#modal-ajax .form-control:focus{
  border-color:#19c8f5!important;box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}
.server-order-form small,#modal-order small,#modal-ajax small{color:#5b6c80!important;font-size:11.5px}
.server-order-form .form-group{margin-bottom:15px}
.server-order-form .icons{background:#111823!important;border:1px solid #2b3a4d!important;
  border-radius:12px;padding:10px 14px!important;color:#93a4b8!important;font-size:13px!important}
.server-order-form .icons *{color:#93a4b8!important}

/* main action */
#modal-order .action-group .btn-primary,#modal-ajax .action-group .btn-primary,#modal-order #placeorder,#modal-ajax #placeorder{
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;color:#0a0e14!important;border:0!important;
  border-radius:12px!important;min-height:50px;font-weight:700;letter-spacing:normal;text-transform:none;
  box-shadow:0 14px 30px -14px rgba(250,201,14,.9);transition:transform .15s,filter .15s}
#modal-order .action-group .btn-primary:hover,#modal-ajax .action-group .btn-primary:hover,#modal-order #placeorder:hover,#modal-ajax #placeorder:hover{
  transform:translateY(-2px);filter:brightness(1.07)}

/* info side */
.server-order-info{background:linear-gradient(180deg,#0d131c,#0a0e14);border:1px solid #1f2b3a;
  border-radius:14px;padding:16px 18px;color:#c3d0de}
.server-order-info img{max-width:100%;height:auto;border-radius:10px}
.server-order-info hr,#modal-order hr,#modal-ajax hr{border-color:#1f2b3a!important}
.sInfo{color:#e8eef6}
.back-btn{color:#19c8f5!important}
/* filter bar */
.card.card-search{background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:16px!important;padding:16px 18px!important}
.card-search .form-inline{gap:12px;flex-wrap:wrap;align-items:center}
.card-search{overflow:visible}
.card-search .form-inline{display:flex;flex-wrap:nowrap;gap:12px;align-items:center;
  width:100%;max-width:100%;margin:0}
.card-search .form-inline>*{min-width:0}
.card-search .form-group{margin:0!important}
.card-search .form-group.d-lg-block{flex:0 0 auto!important;width:auto!important;padding-right:0!important;
  display:flex;align-items:center;color:#5b6c80}
.card-search .form-group.d-lg-block .fa-search{display:inline-block;font-size:15px}
.card-search .form-group.w-25{flex:0 1 300px!important;width:auto!important;min-width:0}
.card-search .form-group.mb-0{flex:1 1 auto;min-width:0;max-width:520px}
/* discounted switch */
.card-search .custom-checkbox{position:relative;display:inline-flex;align-items:center;
  height:46px;padding:0 15px;background:#111823;border:1px solid #2b3a4d;border-radius:11px;
  white-space:nowrap;transition:border-color .15s,background .15s}
.card-search .custom-checkbox:hover{border-color:#fac90e}
.card-search .custom-control-input{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;z-index:2}
.card-search .custom-control-label{position:relative;padding-left:50px;display:flex;align-items:center;
  margin:0;color:#c3d0de!important;font-size:13.5px;cursor:pointer}
.card-search .custom-control-label::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:40px;height:22px;border-radius:999px;background:#1b2534;
  border:1px solid #2b3a4d;box-shadow:none!important;transition:background .18s,border-color .18s;display:block!important}
.card-search .custom-control-label::after{content:"";position:absolute;left:4px;top:50%;
  transform:translateY(-50%);width:15px;height:15px;border-radius:50%;background:#5b6c80;
  transition:left .18s,background .18s;display:block!important}
.card-search .custom-control-input:checked~.custom-control-label::before{
  background:rgba(250,201,14,.2);border-color:#fac90e}
.card-search .custom-control-input:checked~.custom-control-label::after{left:22px;background:#fac90e}
.card-search .custom-control-input:checked~.custom-control-label{color:#fac90e!important}
.card-search .custom-checkbox{flex:0 0 auto;margin-left:auto!important;margin-right:0!important;
  white-space:nowrap;padding:11px 14px}
/* chosen replaces the native select */
.card-search .chosen-container{width:100%!important;min-width:0!important}
.card-search .chosen-container .chosen-single{background:#111823!important;border:1px solid #2b3a4d!important;
  color:#e8eef6!important;border-radius:11px!important;height:46px!important;line-height:44px!important;
  padding:0 14px!important;box-shadow:none!important}
.card-search .chosen-container .chosen-single div b{filter:hue-rotate(0)}
.card-search .chosen-container .chosen-drop{background:#0d131c!important;border:1px solid #1f2b3a!important;
  border-radius:12px!important;margin-top:6px;overflow:hidden;box-shadow:0 22px 50px -26px rgba(0,0,0,.95)}
.card-search .chosen-container .chosen-results li{color:#c3d0de!important;padding:9px 13px!important}
.card-search .chosen-container .chosen-results li.highlighted{background:#111823!important;color:#fac90e!important}
.card-search .chosen-container .chosen-search input{background:#111823!important;border:1px solid #2b3a4d!important;
  color:#e8eef6!important;border-radius:9px!important;padding:8px 12px!important}
@media (max-width:767px){.card-search .form-inline{flex-wrap:wrap}
  .card-search .form-group.w-25,.card-search .form-group.mb-0{flex:1 1 100%!important}}
.card-search .form-control,.card-search select.form-control{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:11px!important;height:46px!important;padding:10px 14px!important;width:100%;
  box-shadow:none!important;font-size:14px;transition:border-color .15s,box-shadow .15s}
.card-search .form-control::placeholder{color:#5b6c80!important}
.card-search .form-control:focus{border-color:#19c8f5!important;
  box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}
.card-search input#searchservicebox2{padding-left:42px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6c80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;
  background-position:14px center!important;background-size:16px 16px!important}
.card-search select.form-control{-webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:38px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:16px!important}
.card-search select.form-control option{background:#0d131c;color:#e8eef6}

.card-search .custom-checkbox{background:#111823;border:1px solid #2b3a4d;border-radius:11px;
  padding:11px 15px;min-height:46px;display:inline-flex;align-items:center}
.card-search .custom-control-label{color:#c3d0de!important;font-size:13.5px}

/* "want to use frequently" - the theme hard-codes a yellow box inline */
div[style*="#ffc107"],div[style*="rgb(255, 193, 7)"]{
  display:inline-block;background:#111823!important;border:1px solid #2b3a4d!important;
  border-radius:12px!important;width:auto!important;max-width:none!important;
  white-space:nowrap;padding:11px 15px!important}
div[style*="#ffc107"] .custom-control-label,div[style*="#ffc107"] label{
  color:#c3d0de!important;font-size:13.5px;white-space:nowrap!important}
div[style*="#ffc107"]:hover{border-color:#fac90e!important}
.controls .custom-checkbox,.form-group .custom-checkbox{position:relative;padding:0}
.controls .custom-control-input,.form-group .custom-control-input{position:absolute;inset:0;
  width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:2}
.controls .custom-control-label,.form-group .custom-control-label{position:relative;padding-left:52px;
  display:flex;align-items:center;min-height:24px;cursor:pointer}
.controls .custom-control-label::before,.form-group .custom-control-label::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:40px;height:22px;
  border-radius:999px;background:#1b2534;border:1px solid #2b3a4d;box-shadow:none!important;
  transition:background .18s,border-color .18s}
.controls .custom-control-label::after,.form-group .custom-control-label::after{
  content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  border-radius:50%;background:#5b6c80;transition:left .18s,background .18s}
.controls .custom-control-input:checked~.custom-control-label::before,
.form-group .custom-control-input:checked~.custom-control-label::before{
  background:rgba(250,201,14,.2);border-color:#fac90e}
.controls .custom-control-input:checked~.custom-control-label::after,
.form-group .custom-control-input:checked~.custom-control-label::after{left:22px;background:#fac90e}
#modal-order .text-green{display:inline-flex!important;align-items:center;gap:8px;
  background:#111823!important;border:1px solid #2b3a4d;border-left:3px solid #fac90e;
  border-radius:10px;height:46px;padding:0 18px;margin-top:0;
  box-shadow:none!important;color:#fac90e!important}
#modal-order .text-green>div{display:flex;align-items:baseline;gap:5px}
#modal-order .text-green .text-muted{color:#5b6c80!important;opacity:1;line-height:1;
  font-family:ui-monospace,Consolas,monospace;font-size:14px!important;font-weight:700}
#modal-order .order-total{color:#fac90e!important}
/* delivery time + cancel badge on one row */
#modal-order .eu-action-row{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin-top:10px}
#modal-order .eu-action-row>*{min-width:0}
#modal-order .eu-action-row>.d-actionbar-mobile{flex:1 1 58%}
#modal-order .eu-action-row>.form-group{flex:0 1 42%}
#modal-order .eu-action-row{align-items:stretch}
#modal-order .eu-action-row .placeorder,#modal-order .eu-action-row .btn-primary{
  display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:50px;
  padding:12px 18px!important;font-size:15px;font-weight:700;letter-spacing:normal;text-transform:none;
  white-space:nowrap;border-radius:12px!important;
  box-shadow:0 10px 24px -16px rgba(250,201,14,.8)!important}
#modal-order .eu-action-row>.d-actionbar-mobile,#modal-order .eu-action-row>.d-actionbar-mobile>div{
  display:flex;align-items:stretch;width:100%}
#modal-order .eu-action-row>.form-group{display:flex;align-items:stretch}
/* no box around the switch - just the switch and its label */
#modal-order .eu-action-row div[style*="ffc107"]{width:auto!important;height:auto;min-height:50px;
  padding:0!important;display:flex!important;align-items:center;
  background:transparent!important;border:0!important;box-shadow:none!important}
#modal-order .eu-action-row .custom-checkbox{width:100%}
#modal-order .eu-action-row .custom-control-label{font-size:12.5px;padding-left:50px;
  white-space:nowrap!important;color:#c3d0de!important}
@media (max-width:575px){#modal-order .eu-action-row{flex-wrap:wrap}
  #modal-order .eu-action-row>.d-actionbar-mobile,#modal-order .eu-action-row>.form-group{flex:1 1 100%}}
#modal-order .eu-action-row>.action-group,#modal-order .eu-action-row>.d-actionbar-mobile,
#modal-order .eu-action-row>.form-group:first-child{flex:1 1 240px;margin:0!important}
#modal-order .eu-action-row>.form-group{margin:0!important;flex:0 0 auto}
#modal-order .eu-summary{display:flex!important;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px}
#modal-order .eu-summary .text-green{margin-top:0!important}
#modal-order .eu-delivery{display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap;margin:0!important}
#modal-order .eu-delivery>div{color:#5b6c80!important;font-family:ui-monospace,Consolas,monospace;
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  white-space:nowrap!important;max-width:none}
#modal-order .eu-delivery .badge-info{font-size:10.5px;padding:4px 11px!important}
#modal-order .order-total{font-family:ui-monospace,"SF Mono",Consolas,monospace;
  font-size:21px!important;line-height:1.15;font-weight:800;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
#modal-order .text-green .text-muted{color:#5b6c80!important;font-size:15px!important;vertical-align:6px}
/* the whole right column becomes a summary card */
#modal-order .modal-body .col-lg-6:last-child>div:first-child,
#modal-order .summary-shell{background:linear-gradient(135deg,#111823,#0d131c);
  border:1px solid #2b3a4d;border-left:3px solid #fac90e;border-radius:14px;padding:16px 18px}
/* delivery-time line */
#modal-order .text-uppercase.text-muted,#modal-order .delivery-time,
#modal-order .text-muted.small{color:#93a4b8!important;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
#modal-order .badge-info{display:inline-flex;align-items:center;gap:7px;
  background:rgba(25,200,245,.13)!important;color:#19c8f5!important;
  border:1px solid rgba(25,200,245,.36)!important;border-radius:999px!important;
  padding:5px 13px!important;font-size:11.5px;font-weight:700;letter-spacing:.04em}
#modal-order .badge-info::before{content:"";width:13px;height:13px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a4b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E") center/13px no-repeat;opacity:.9}
#modal-order .border-danger,#modal-order [class*="border-bottom"]{border-color:#1f2b3a!important}
#modal-order .bg-danger,#modal-order [class*="bg-danger"]{background:#1f2b3a!important}
#modal-order .progress,#modal-order .progress-bar{display:none!important}
#modal-order hr{border-color:#1f2b3a!important}
#modal-order .eu-summary~div,#modal-order .eu-summary+*,
#modal-order .d-flex.justify-content-start+div,
#modal-order .d-flex.justify-content-start{border:0!important;box-shadow:none!important}
#modal-order .server-order-info{border:0!important;background:transparent!important;padding:0!important}
#modal-order hr,#modal-order .dropdown-divider{display:none!important}
body,body .bg-gray,body .w-100.min-height,body .body-container,body .page-container{background:#0b1017!important}
header .header-bottom{background:#0b1017!important}
header .header-top{background:#080c12!important}
header .header-middle{background:linear-gradient(180deg,#0d131c,#0b1017)!important}
body footer,body .footer,body .footer-links,body .footer-top,body .footer-bottom,
body .footer-navbar,body .footer-thanks{background:#0b1017!important}
body .footer-top{border-top:1px solid #141b25!important}
body .footer-top,body .footer-bottom{border-color:#141b25!important}
body .services table,body .services table.table,
body .services .table,body .table-responsive.services .table{
  background:transparent!important;background-color:transparent!important;
  border-color:#1f2b3a!important;margin-bottom:0}
body .services table.table tbody tr,
body .services .table-striped tbody tr,
body .services .table-striped tbody tr:nth-of-type(odd),
body .services .table-striped tbody tr:nth-of-type(even){background:transparent!important}
body .services table.table tbody td,
body .services .table-striped tbody tr td{
  background-color:transparent!important;color:#c3d0de!important;
  border:0!important;border-bottom:1px solid rgba(31,43,58,.55)!important}
body .services .table-striped tbody tr:nth-child(even) td{background-color:rgba(255,255,255,.018)!important}
body .services .table:not(.table-hover-disable) tbody tr:hover td,
body .services table.table tbody tr:hover td{
  background-color:rgba(25,200,245,.07)!important;color:#fff!important}
body .services table.table thead th,body .services .group.card thead th{
  background:#111823!important;color:#93a4b8!important;border:0!important;
  border-bottom:1px solid #1f2b3a!important}
body .services table.table tbody tr.hottest td,
body .services table.table tbody tr.table-danger td{
  background-color:rgba(250,201,14,.07)!important;color:#f2e6bd!important}
body .services table.table tbody tr.hottest:hover td{background-color:rgba(25,200,245,.10)!important;color:#fff!important}
body .services table.table tbody td:last-child{color:#fac90e!important}
body .services .group.card{background:linear-gradient(180deg,#0d131c,#0a0e14)!important}
/* the three controls share the bar evenly */
.eu-toolbar{display:flex!important;flex-wrap:wrap;align-items:center;gap:14px;
  padding:14px 16px!important}
.eu-toolbar>[class*="col-"]{padding:0!important;max-width:none!important;width:auto!important;
  margin:0!important;min-width:0}
.eu-toolbar>[class*="col-"]:nth-child(1){flex:1.3 1 260px}
.eu-toolbar>[class*="col-"]:nth-child(2){flex:1 1 220px}
.eu-toolbar>[class*="col-"]:nth-child(3){flex:0 0 auto;margin-left:auto!important}
.eu-toolbar .form-group{margin:0!important}
.eu-toolbar .form-control{width:100%}
@media (max-width:767px){
  .eu-toolbar>[class*="col-"]{flex:1 1 100%!important;margin-left:0!important}
}

/* a switch is just the control and its label - never a bordered box */
.custom-control.custom-checkbox,
.eu-toolbar .custom-checkbox,.card-search .custom-checkbox,
.controls .custom-checkbox,.form-group .custom-checkbox,
div[style*="#ffc107"],div[style*="rgb(255, 193, 7)"]{
  background:transparent!important;background-color:transparent!important;
  border:0!important;box-shadow:none!important;padding:0!important}
.eu-toolbar .custom-checkbox,.card-search .custom-checkbox{min-height:46px;display:inline-flex;align-items:center}
.custom-control.custom-checkbox:hover{border:0!important}

/* reseller notice keeps the site colours */
.eu-notice,.list-services .text-white,.services .text-white{color:#c3d0de!important}
.eu-notice a,.page-container>p a,.list-services a.text-white{color:#fac90e!important}

/* ============ pricing/order toolbar — final layout (external, 2026-07-22b) ============ */
/* the reseller notice is its own full-width line ABOVE the controls */
.card-search .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 14px;margin:0}
.card-search .row>[class*="col-"]{padding:0!important;margin:0!important;max-width:none!important;
  width:auto!important;min-width:0}
.card-search .row>.col-12{flex:0 0 100%!important;width:100%!important;
  color:#93a4b8!important;font-size:13.5px;line-height:1.5;margin-bottom:2px!important;
  background:rgba(25,200,245,.06);border:1px solid rgba(25,200,245,.22);border-left:3px solid #19c8f5;
  border-radius:12px;padding:11px 16px!important}
.card-search .row>.col-12 a{color:#fac90e!important;font-weight:700;text-decoration:none}
.card-search .row>.col-12 a:hover{text-decoration:underline}
/* the three controls share the remaining row evenly */
.card-search .row>[class*="col-"]:not(.col-12){flex:1 1 240px}
.card-search .row>[class*="col-"]:not(.col-12):last-child{flex:0 0 auto;margin-left:auto!important}
.card-search .form-group{margin:0!important;width:100%}
@media (max-width:767px){
  .card-search .row>[class*="col-"]:not(.col-12){flex:1 1 100%}
  .card-search .row>[class*="col-"]:not(.col-12):last-child{margin-left:0!important}
}
/* any checkbox switch: control + label only, never a bordered box */
.custom-control.custom-checkbox,.card-search .custom-checkbox,.eu-toolbar .custom-checkbox,
.controls .custom-checkbox,.form-group .custom-checkbox,
div[style*="#ffc107"],div[style*="rgb(255, 193, 7)"]{
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}

/* ============ no-flash bands + fixes (external, 2026-07-22c) ============ */
/* the page-head / breadcrumb band renders white then JS darkens it -> flash.
   paint it dark straight from CSS so there is no flash (needs :has, modern browsers) */
.bg-white:has(.page-title),.bg-white:has(.breadcrumb),
.bg-white.border-bottom{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border-bottom:1px solid #1f2b3a!important}
.bg-white:has(.page-title) .page-title,.bg-white .page-title{color:#e8eef6!important}
.bg-white:has(.breadcrumb) .breadcrumb,.bg-white .breadcrumb{color:#5b6c80!important}
.bg-white:has(.breadcrumb) .breadcrumb a,.bg-white .breadcrumb a{color:#93a4b8!important}
.bg-white:has(.breadcrumb) .breadcrumb a:hover{color:#fac90e!important}
.bg-white:has(.breadcrumb) .breadcrumb i{color:#19c8f5!important}

/* stat pills in the page head must stay horizontal, never stack vertically */
.eu-stats{display:flex!important;flex-wrap:wrap!important;gap:9px;width:100%;
  align-items:center;writing-mode:horizontal-tb!important}
.eu-stats span{display:inline-flex!important;align-items:center;gap:7px;flex:0 0 auto!important;
  width:auto!important;max-width:none!important;white-space:nowrap!important;
  writing-mode:horizontal-tb!important;text-orientation:mixed!important;
  background:#111823;border:1px solid #2b3a4d;border-radius:999px;padding:6px 13px;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#93a4b8}
.eu-stats span b{color:#fac90e;font-weight:700}
.eu-stats span.hot b{color:#19c8f5}

/* reseller notice: its own full-width line ABOVE the controls (final, wins over earlier rules) */
.card-search .row.align-items-center{display:flex!important;flex-wrap:wrap!important;
  align-items:center;gap:12px;margin:0}
.card-search .row.align-items-center>.col-12{flex:0 0 100%!important;max-width:100%!important;
  width:100%!important;order:-1;margin:0 0 4px!important;
  color:#93a4b8!important;font-size:13.5px;line-height:1.55;
  background:rgba(25,200,245,.06);border:1px solid rgba(25,200,245,.22);border-left:3px solid #19c8f5;
  border-radius:12px;padding:11px 16px!important}
.card-search .row.align-items-center>.col-12 a{color:#fac90e!important;font-weight:700}
.card-search .row.align-items-center>[class*="col-"]:not(.col-12){flex:1 1 240px;
  width:auto!important;max-width:none!important;min-width:0}
@media (max-width:767px){
  .card-search .row.align-items-center>[class*="col-"]:not(.col-12){flex:1 1 100%}
}

/* ============ pricing toolbar: notice OUT of the card frame (2026-07-22d) ============ */
/* flatten the outer .card-search frame so the notice banner stands alone above the controls */
.card-search{background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin-bottom:22px!important}
.card-search .row.align-items-center{gap:16px 14px}
/* the controls sit in their own subtle framed row, the notice floats above it */
.card-search .row.align-items-center>[class*="col-"]:not(.col-12){align-self:stretch}

/* ============ remove the box around the toolbar so the notice stands free (2026-07-22e) ============ */
.card-search .row.align-items-center,.eu-toolbar{
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;padding:0!important}

/* ============ hot-deals pill: theme forces .hot{position:absolute} -> stacks vertical (2026-07-22f) ============ */
.eu-stats span.hot{position:static!important;width:auto!important;height:auto!important;
  top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
  display:inline-flex!important;white-space:nowrap!important;writing-mode:horizontal-tb!important;
  transform:none!important;float:none!important}

/* ============ settings pages (profile, password, security…) — 2026-07-22g ============ */
body.page-settings .card{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a!important;
  border-radius:16px!important;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
/* tab rail */
body.page-settings .nav-pills{border-bottom:1px solid #1f2b3a;padding-bottom:0;gap:4px;flex-wrap:wrap!important;
  margin-bottom:24px!important}
body.page-settings .nav-pills .nav-link{
  color:#93a4b8!important;background:transparent!important;border:0!important;border-radius:10px 10px 0 0!important;
  padding:11px 16px!important;font-size:14px;font-weight:600;position:relative;transition:color .15s,background .15s}
body.page-settings .nav-pills .nav-link:hover{color:#e8eef6!important;background:#111823!important}
body.page-settings .nav-pills .nav-link.active{color:#fac90e!important;background:rgba(250,201,14,.06)!important}
body.page-settings .nav-pills .nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;
  height:2px;background:linear-gradient(90deg,#fac90e,#19c8f5);border-radius:2px}

/* labels */
body.page-settings .form-label,
body.page-settings .text-muted.font-normal{
  color:#93a4b8!important;font-family:ui-monospace,Consolas,monospace!important;font-size:11px!important;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;display:block}
body.page-settings .text-muted{color:#5b6c80!important}

/* field values that sit as plain text under a label */
body.page-settings .form-group>div>div:not(.text-muted){color:#e8eef6}

/* inputs / selects / textareas */
body.page-settings .form-control,body.page-settings input[type=text],body.page-settings input[type=email],
body.page-settings input[type=password],body.page-settings input[type=number],
body.page-settings textarea,body.page-settings select{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:11px!important;padding:11px 14px!important;min-height:46px;box-shadow:none!important;
  transition:border-color .15s,box-shadow .15s}
body.page-settings .form-control::placeholder,body.page-settings textarea::placeholder{color:#5b6c80!important}
body.page-settings .form-control:focus,body.page-settings textarea:focus,body.page-settings select:focus{
  border-color:#19c8f5!important;box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}
body.page-settings select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:38px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c8f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
body.page-settings select option{background:#0d131c;color:#e8eef6}
/* input-group suffix (USD, etc.) */
body.page-settings .input-group-text,body.page-settings .input-group-append .input-group-text{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#93a4b8!important;border-radius:0 11px 11px 0!important}

/* inline first/last name and address rows */
body.page-settings h3,body.page-settings h4,body.page-settings h5{color:#e8eef6!important}

/* links + badges */
body.page-settings a:not(.btn){color:#19c8f5!important}
body.page-settings a:not(.btn):hover{color:#fac90e!important}
body.page-settings .text-info,body.page-settings .text-primary{color:#19c8f5!important}
body.page-settings .badge-success,body.page-settings .badge.badge-success{
  background:rgba(25,200,245,.15)!important;color:#19c8f5!important;border-radius:999px;font-weight:700}
body.page-settings .text-danger{color:#ff5c6c!important}

/* Save button already gold via global; keep close-account subtle */
body.page-settings .btn-primary{min-height:46px}

/* checkbox → switch */
body.page-settings .custom-control-input{position:absolute;opacity:0;width:40px;height:22px;cursor:pointer}

/* ============ add funds page — fill the width, dark, professional (2026-07-22h) ============ */
body.page-addfunds .card.card-simple-form{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a!important;
  border-radius:16px!important;box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
/* the whole form is a narrow centered col-lg-5 -> widen it to fill the page */
body.page-addfunds .card-simple-form .border.col-lg-5,
body.page-addfunds .card-simple-form .col-lg-5.m-auto{
  max-width:1040px!important;width:100%!important;flex:0 0 100%!important;
  background:transparent!important;border:0!important;padding:0!important}
body.page-addfunds .app-content-header .col-lg-5{max-width:640px!important}
/* balance header */
body.page-addfunds .current-balance,body.page-addfunds .app-content-header{color:#e8eef6}
body.page-addfunds .app-content-header h2,body.page-addfunds .current-balance h2,
body.page-addfunds .app-content-header .h2{color:#fac90e!important;font-weight:800}
body.page-addfunds .text-muted{color:#5b6c80!important}
/* deposit-now block as a framed panel */
body.page-addfunds .card-simple-form>.border,
body.page-addfunds .deposit-total,body.page-addfunds .card-app{
  background:#0d131c!important;border-color:#1f2b3a!important}
/* inputs */
body.page-addfunds .form-control,body.page-addfunds input[type=text],body.page-addfunds input[type=number]{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:11px!important;min-height:48px;padding:12px 14px!important;box-shadow:none!important;font-size:16px}
body.page-addfunds .form-control:focus{border-color:#19c8f5!important;box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}
body.page-addfunds .input-group-text{background:#111823!important;border:1px solid #2b3a4d!important;color:#93a4b8!important}
/* the Fram payment iframe fills its column */
body.page-addfunds iframe{width:100%!important;border:0!important;display:block;background:transparent}
/* how-to / links / whatsapp-telegram buttons keep their brand colours but sit centered */
body.page-addfunds .btn{border-radius:11px!important}
/* summary table */
body.page-addfunds table{background:transparent!important;color:#c3d0de!important}
body.page-addfunds table td,body.page-addfunds table th{border-color:#1f2b3a!important;color:#c3d0de!important;padding:10px 6px!important}
body.page-addfunds table tr:last-child td,body.page-addfunds table .total{color:#fac90e!important;font-weight:700}
/* Next button already gold */
body.page-addfunds h5,body.page-addfunds h4,body.page-addfunds h3{color:#e8eef6!important}
/* the manual top-up switch box */
body.page-addfunds div[style*="#ffc107"],body.page-addfunds div[style*="rgb(255, 193, 7)"]{
  background:#111823!important;border:1px solid #2b3a4d!important;border-radius:12px!important}
@media (min-width:992px){
  /* deposit fields + payments side by side when there is room */
  body.page-addfunds .card-simple-form .border.col-lg-5{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:26px;align-items:start}
  body.page-addfunds .card-simple-form .border.col-lg-5>*{min-width:0}
}

/* ============ add funds: release the 384px card clamp so it fills the page (2026-07-22i) ============ */
body.page-addfunds .card.card-simple-form{
  display:block!important;max-width:1120px!important;width:100%!important;margin:0 auto!important}
body.page-addfunds .card-simple-form .card-app,
body.page-addfunds .card-simple-form .transactionform,
body.page-addfunds .card-simple-form .loadinfo,
body.page-addfunds .card-simple-form .border.p-4{width:auto!important;max-width:none!important}
/* two columns: deposit/how-to on the left, payment methods on the right */
@media (min-width:992px){
  body.page-addfunds .card-simple-form .border.col-lg-5{
    display:grid!important;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
    gap:28px;align-items:start;max-width:1120px!important}
  body.page-addfunds .card-simple-form .border.col-lg-5>*{min-width:0}
  /* the payment iframe wrapper spans the right column and stays tall */
  body.page-addfunds .loadinfo{grid-column:2;grid-row:1 / span 20}
  body.page-addfunds iframe[src*="Fram.php"]{width:100%!important;min-height:640px}
}

/* ============ add funds: flow content full-width (drop the grid attempt) (2026-07-22j) ============ */
@media (min-width:992px){
  /* undo the earlier 2-col grid — the form and iframe are nested, not siblings */
  body.page-addfunds .card-simple-form .border.col-lg-5{
    display:block!important;grid-template-columns:none!important;max-width:1120px!important;margin:0 auto!important}
  body.page-addfunds .loadinfo{grid-column:auto!important;grid-row:auto!important}
  /* make the deep wrapper chain span the full card so the payment grid fills the page */
  body.page-addfunds .card-simple-form .transactionform,
  body.page-addfunds .card-simple-form .card-app,
  body.page-addfunds .card-simple-form .loadinfo,
  body.page-addfunds .card-simple-form .border.col-lg-5>div{width:100%!important;max-width:none!important}
  body.page-addfunds iframe[src*="Fram.php"]{width:100%!important}
  /* keep the deposit amount, the how-to text and summary readable, not stretched edge to edge */
  body.page-addfunds .card-app>.form-group,
  body.page-addfunds .card-simple-form input[name="amount"]{max-width:520px}
}

/* ============ add funds: deposit input + min/max line (2026-07-22k) ============ */
body.page-addfunds .card-app .form-group,body.page-addfunds .deposit-total{max-width:560px!important;margin-left:auto!important;margin-right:auto!important}
body.page-addfunds input.calculate,body.page-addfunds input[name="amount"],
body.page-addfunds .card-app input.form-control{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#fac90e!important;
  border-radius:12px!important;min-height:56px!important;font-size:22px!important;font-weight:800;
  text-align:right;padding:12px 18px!important;box-shadow:none!important;
  font-family:ui-monospace,Consolas,monospace}
body.page-addfunds input.calculate:focus{border-color:#19c8f5!important;box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}
/* the Minimum / Maximum deposit hint row */
body.page-addfunds .min-max,body.page-addfunds .deposit-total .d-flex,
body.page-addfunds .card-app .text-muted{color:#5b6c80!important;
  font-family:ui-monospace,Consolas,monospace;font-size:11.5px;letter-spacing:.04em}
/* Deposit Now heading */
body.page-addfunds .card-app>h5,body.page-addfunds h5.deposit-title{color:#e8eef6!important;
  font-weight:700;margin-bottom:12px}

/* ============ add funds: center Deposit Now + exact iframe fit (2026-07-22l) ============ */
body.page-addfunds .card-app,body.page-addfunds .deposit-total{text-align:center}
body.page-addfunds .card-app>h5,body.page-addfunds .deposit-title,
body.page-addfunds h5{text-align:center!important}
body.page-addfunds .card-app .form-group,body.page-addfunds .deposit-total{
  max-width:560px;margin-left:auto!important;margin-right:auto!important}
body.page-addfunds .min-max{display:flex;justify-content:space-between;max-width:560px;margin:6px auto 0}
body.page-addfunds iframe[src*="Fram.php"]{min-height:0!important}

/* ============ add funds: iframe height comes from its own content (2026-07-22q) ============ */
/* the pinned 680px was clipping the taller payment grid (≈1400px) and forcing an inner
   scrollbar — let the JS-set inline height win, keep only a safe min-height fallback */
/* small fallback only — the JS (ResizeObserver) sets the exact height to fit content;
   a large min-height used to leave a big empty band below the payment grid */
body.page-addfunds iframe[src*="Fram.php"]{min-height:300px}
/* the iframe lives inside a flex ancestor that collapsed its wrapper to the default
   300px once the fixed height was removed — force the wrapper to span full width */
body.page-addfunds div:has(> iframe[src*="Fram.php"]){
  width:100%!important;flex:1 1 100%!important;min-width:0!important}
body.page-addfunds iframe[src*="Fram.php"]{width:100%!important;display:block}

/* ============ add funds: clean order summary + no iframe scroll (2026-07-22n) ============ */
body.page-addfunds iframe[src*="Fram.php"]{overflow:hidden!important;max-width:100%!important}
/* the summary table -> a compact centered panel */
body.page-addfunds table.table.no-wrap{
  max-width:440px!important;width:100%!important;margin:22px auto 0!important;
  background:#0d131c!important;border:1px solid #1f2b3a!important;border-radius:14px!important;
  padding:8px 16px!important;border-collapse:separate!important;border-spacing:0}
body.page-addfunds table.table.no-wrap td{
  border:0!important;border-bottom:1px solid rgba(31,43,58,.55)!important;
  padding:11px 4px!important;color:#c3d0de!important;font-size:14px;vertical-align:middle;
  text-align:left!important;width:auto!important}
body.page-addfunds table.table.no-wrap td:first-child{color:#93a4b8!important;width:60%!important}
body.page-addfunds table.table.no-wrap td.seperator-colon{display:none!important}
body.page-addfunds table.table.no-wrap td:last-child{text-align:right!important;color:#e8eef6!important;
  font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;font-weight:600}
body.page-addfunds table.table.no-wrap tr:last-child td{border-bottom:0!important;padding-top:14px!important}
body.page-addfunds table.table.no-wrap tr:last-child td:first-child{color:#fac90e!important;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
body.page-addfunds table.table.no-wrap tr:last-child td:last-child{color:#fac90e!important;font-size:19px;font-weight:800}
/* balance-after-deposit + Next row centered under the panel */
body.page-addfunds .balancededuct,body.page-addfunds .after-deposit,
body.page-addfunds .card-simple-form .d-flex.justify-content-between:last-of-type{
  max-width:440px!important;margin:14px auto 0!important}

/* ============ add funds: top-up row alignment + how-to text dark (2026-07-22o) ============ */
/* the manual-top-up switch + select on one centered, aligned row */
body.page-addfunds .border.p-4 .form-group .d-flex.align-items-center,
body.page-addfunds .border.p-4 .d-flex.align-items-center{
  display:flex!important;align-items:center!important;justify-content:center;
  gap:14px!important;flex-wrap:nowrap!important;max-width:640px;margin:0 auto}
body.page-addfunds .border.p-4 .custom-control,
body.page-addfunds .border.p-4 .custom-switch{margin:0!important;flex:0 0 auto;
  display:inline-flex!important;align-items:center;min-height:46px}
body.page-addfunds .border.p-4 .custom-control-label{padding-left:44px!important;min-height:22px}
body.page-addfunds .border.p-4 select.form-control,
body.page-addfunds .border.p-4 .no-chosen{flex:1 1 auto;min-width:0;max-width:460px;text-align:center}
/* the how-to headings + paragraphs on this card in dark-theme colours */
body.page-addfunds .border.p-4{background:#0d131c!important;border-color:#1f2b3a!important;border-radius:14px!important}
body.page-addfunds .border.p-4 h1,body.page-addfunds .border.p-4 h2,
body.page-addfunds .border.p-4 h3,body.page-addfunds .border.p-4 h4,body.page-addfunds .border.p-4 h5,
body.page-addfunds .border.p-4 strong,body.page-addfunds .border.p-4 b{color:#e8eef6!important}
body.page-addfunds .border.p-4 p,body.page-addfunds .border.p-4 div,
body.page-addfunds .border.p-4 span:not(.custom-control-label){color:#93a4b8!important}
body.page-addfunds .border.p-4 .text-muted,body.page-addfunds .border.p-4 small{color:#5b6c80!important}
body.page-addfunds .border.p-4 a.btn{color:#fff!important}
/* keep the arabic/english how-to lines centered and readable */
body.page-addfunds .border.p-4 .text-center,body.page-addfunds .border.p-4{line-height:1.7}

/* ============ add funds: tidy the two loose blocks (2026-07-22p) ============ */
/* (1) order summary + the balance/Next bar are SIBLINGS inside .position-relative.
   keep the wrapper a normal block so they STACK (a flex row made them overlap),
   then centre each one as its own ≈460px column */
body.page-addfunds .position-relative:has(> .deposit-total){
  display:block!important;text-align:center}
body.page-addfunds .deposit-total{display:block!important;float:none!important;
  max-width:460px!important;width:100%!important;margin:22px auto 0!important;padding:8px 18px 18px!important;
  background:#0d131c!important;border:1px solid #1f2b3a!important;border-radius:16px!important}
body.page-addfunds .deposit-total table.table.no-wrap{margin:0 auto!important;border:0!important;
  background:transparent!important;max-width:none!important}
/* the balance-after-deposit + Next bar: a centred row right under the summary card */
body.page-addfunds .position-relative:has(> .deposit-total) .d-actionbar-mobile{
  display:flex!important;justify-content:space-between!important;align-items:center;
  max-width:460px!important;width:100%!important;margin:16px auto 0!important;
  text-align:left;float:none!important}
/* (2) manual-top-up switch + select: kill the inline offsets, align on one clean row */
/* NOTE: two earlier !important caps were shrinking this row (.card-app .form-group=560px,
   and the .d-flex.justify-content-between:last-of-type=440px meant for the balance bar) —
   override both so the dropdown gets room for its full label */
body.page-addfunds .border.p-4 .form-group.mb-0{margin:0 auto!important;max-width:760px!important}
body.page-addfunds .border.p-4 .d-flex.align-items-center.justify-content-between{
  justify-content:center!important;gap:12px!important;flex-wrap:nowrap!important;
  margin:0 auto!important;max-width:760px!important}
body.page-addfunds .border.p-4 .custom-control.custom-radio{margin:0!important;flex:0 0 auto}
body.page-addfunds .border.p-4 select.form-control,
body.page-addfunds .border.p-4 .no-chosen{margin:0!important;flex:1 1 auto;min-width:0;width:100%;max-width:720px;
  height:46px;padding:0 14px!important;background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:11px!important;text-align:left}

/* ============ orders + retail + settings pages: match site palette (2026-07-23) ============ */
/* the floating theme-settings gear = the same theme picker already removed from the top bar;
   it sits fixed on the right and overlaps every card — hide it site-wide */
.theme-settings-icon,.modal-theme-settings{display:none!important}

/* order / retail cards -> deep palette instead of the washed blue #202940 */
body.page-orders .card,body.page-ordershopping .card{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a!important;
  border-radius:16px!important;box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}

/* kill the purple button (btn-success renders indigo #686FFB in this theme) -> gold */
body .btn-success,body a.btn-success,body button.btn-success,
body .btn-success:not(:disabled):not(.disabled):active,body .btn-success:focus{
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;background-color:#fac90e!important;
  border:0!important;color:#0a0e14!important;font-weight:700;border-radius:11px!important;
  box-shadow:0 8px 22px -12px rgba(250,201,14,.85)!important;transition:transform .15s,filter .15s}
body .btn-success:hover{filter:brightness(1.07);transform:translateY(-1px);color:#0a0e14!important}

/* filter inputs, date fields, jump-to-page + any bare inputs on these pages */
body.page-orders .form-control,body.page-ordershopping .form-control,
body.page-orders input[type=text],body.page-orders input[type=number],
body.page-ordershopping input[type=text],body.page-ordershopping input[type=number],
body.page-orders .chosen-container .chosen-single,body.page-ordershopping .chosen-container .chosen-single{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:10px!important;box-shadow:none!important}
body.page-orders .form-control::placeholder,body.page-ordershopping .form-control::placeholder{color:#5b6c80!important}
body.page-orders .form-control:focus,body.page-ordershopping .form-control:focus,
body.page-orders input:focus,body.page-ordershopping input:focus{
  border-color:#19c8f5!important;box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}

/* breadcrumb active + links -> cyan, never purple */
body.page-orders .breadcrumb .active,body.page-ordershopping .breadcrumb .active,
body.page-orders .breadcrumb li:last-child a,body.page-ordershopping .breadcrumb li:last-child a,
body.page-orders .breadcrumb li:last-child,body.page-ordershopping .breadcrumb li:last-child{color:#19c8f5!important}

/* toolbar buttons (Search/Export/View) + pager tidy on order tables */
body.page-orders .card .btn-info,body.page-orders .card .btn-secondary,
body.page-ordershopping .card .btn-info,body.page-ordershopping .card .btn-secondary{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#c3d0de!important;border-radius:10px!important}
body.page-orders .card .btn-info:hover,body.page-ordershopping .card .btn-info:hover{
  border-color:#19c8f5!important;color:#19c8f5!important}

/* ============ clean, world-class TABLES (Linear/Stripe style) — 2026-07-23 ============ */
body.page-orders table.table,body.page-ordershopping table.table,body.page-settings table.table{
  border-collapse:collapse!important;background:transparent!important;width:100%}
/* the order-history table ships with a fixed height:400px that floats a lone row into a huge
   empty band — let it fit its content so rows stack tightly under the header */
body.page-orders table.table,body.page-ordershopping table.table{height:auto!important;min-height:0!important}
body.page-orders table.table tbody,body.page-ordershopping table.table tbody{height:auto!important}
body.page-orders .table-responsive,body.page-ordershopping .table-responsive{min-height:0!important;height:auto!important}
body.page-orders table.table tbody tr,body.page-ordershopping table.table tbody tr{height:auto!important}
/* header: quiet, small, muted — a hairline underline, no heavy bar */
body.page-orders table.table thead th,body.page-ordershopping table.table thead th,
body.page-settings table.table thead th{
  background:transparent!important;color:#6d7d91!important;
  font-size:11px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  padding:12px 16px!important;border:0!important;border-bottom:1px solid #1e2a38!important;
  white-space:nowrap;vertical-align:middle!important}
/* body cells: comfortable rows, hairline separators */
body.page-orders table.table tbody td,body.page-ordershopping table.table tbody td,
body.page-settings table.table tbody td{
  background:transparent!important;color:#cdd8e4!important;font-size:13px!important;font-weight:400!important;
  padding:12px 16px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.05)!important;
  vertical-align:middle!important;font-variant-numeric:tabular-nums}
body.page-orders table.table tbody tr:last-child td,body.page-ordershopping table.table tbody tr:last-child td,
body.page-settings table.table tbody tr:last-child td{border-bottom:0!important}
/* no zebra — flatten the theme's bluish striping to keep it clean */
body.page-orders table.table-striped tbody tr,body.page-ordershopping table.table-striped tbody tr,
body.page-settings table.table-striped tbody tr{background:transparent!important}
/* elegant, subtle row hover */
body.page-orders table.table tbody tr:hover td,body.page-ordershopping table.table tbody tr:hover td,
body.page-settings table.table tbody tr:hover td{background:rgba(255,255,255,.028)!important}
/* links -> cyan, gold on hover */
body.page-orders table.table a,body.page-ordershopping table.table a,body.page-settings table.table a{
  color:#19c8f5!important;font-weight:500;text-decoration:none!important}
body.page-orders table.table a:hover,body.page-ordershopping table.table a:hover,
body.page-settings table.table a:hover{color:#fac90e!important}
/* tabs above the settings tables (Paid/Proforma/…) keep the gold active underline */
body.page-settings .nav-tabs .nav-link.active,body.page-orders .nav-tabs .nav-link.active{
  color:#fac90e!important;border-bottom-color:#fac90e!important;background:transparent!important}

/* ============ professional FOOTER — works in both themes (logged-in dark + logged-out theme1) 2026-07-23 ============ */
footer,footer.d-none{background:linear-gradient(180deg,#0b1017,#0a0e14)!important;color:#93a4b8!important}
footer .footer-top{background:transparent!important;border-top:1px solid #1a2634!important}
/* brand title */
footer .link-heading.h4,footer h4.link-heading{
  color:#fac90e!important;font-weight:800!important;font-size:20px!important;letter-spacing:.04em}
/* column headings -> light, uppercase, with a gold→cyan accent underline */
footer .link-heading.h5,footer h5.link-heading{
  color:#e8eef6!important;font-weight:700!important;font-size:12.5px!important;letter-spacing:.13em!important;
  text-transform:uppercase!important;position:relative;padding-bottom:12px!important;margin-bottom:15px!important}
footer .link-heading.h5::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;
  background:linear-gradient(90deg,#fac90e,#19c8f5);border-radius:2px}
/* links -> readable, gold on hover (fixes the near-black links) */
footer .footer-top a{color:#9fb0c3!important;text-decoration:none!important;transition:color .15s,padding-left .15s}
footer .footer-top a:hover{color:#fac90e!important}
footer .footer-top li>a:hover{padding-left:3px}
/* social icons -> cyan, gold on hover */
footer .social-icons a,footer .social-icons .nav-link{color:#19c8f5!important;font-size:16px}
footer .social-icons a:hover,footer .social-icons .nav-link:hover{color:#fac90e!important}
/* general footer text (Subscribe blurb, etc.) */
footer .footer-top p,footer .footer-top small,footer .footer-thanks,footer .footer-help-text{color:#93a4b8!important}
/* bottom bar */
footer .footer-bottom{background:transparent!important;border-top:1px solid #1a2634!important;color:#8595a8!important}
footer .footer-bottom a{color:#9fb0c3!important}footer .footer-bottom a:hover{color:#fac90e!important}

/* ============ cart / product-order pages (tpl-cart_item_config etc.) -> dark mode 2026-07-24 ============ */
/* these cards render pure white in every theme and broke the dark look on every service page */
body.page-cart .card,body .card-place-retail-order,body .card-min-height{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a!important;
  border-radius:16px!important;box-shadow:0 24px 50px -30px rgba(0,0,0,.9)!important;color:#c3d0de!important}
/* form fields */
body.page-cart .form-control,body.page-cart input[type=text],body.page-cart input[type=email],
body.page-cart input[type=number],body.page-cart textarea,body.page-cart select,
body .card-place-retail-order .form-control,body .card-place-retail-order textarea,
body .card-place-retail-order select{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:10px!important;box-shadow:none!important}
body.page-cart .form-control::placeholder,body.page-cart textarea::placeholder,
body .card-place-retail-order .form-control::placeholder{color:#5b6c80!important}
body.page-cart .form-control:focus,body.page-cart textarea:focus,body.page-cart select:focus,
body .card-place-retail-order .form-control:focus{
  border-color:#19c8f5!important;box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}
body.page-cart .input-group-text,body .card-place-retail-order .input-group-text{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#93a4b8!important}
/* labels, helper text, headings */
body.page-cart label,body .card-place-retail-order label{color:#cdd8e4!important;font-weight:600}
body.page-cart small,body.page-cart .form-text,body.page-cart .text-muted,
body .card-place-retail-order small,body .card-place-retail-order .text-muted{color:#8595a8!important}
body.page-cart h1,body.page-cart h2,body.page-cart h3,body.page-cart h4,body.page-cart h5,
body.page-cart .card b,body.page-cart .card strong{color:#e8eef6!important}
body.page-cart .card hr,body .card-place-retail-order hr{border-color:#1f2b3a!important}
/* price / summary panel inside the order card */
body.page-cart .price,body.page-cart .total,body.page-cart .amount{color:#fac90e!important}
body.page-cart table td,body.page-cart table th{border-color:#1f2b3a!important;color:#c3d0de!important}

/* ============ GLOBAL dark-mode safety net (2026-07-24) ============ */
/* Base-theme cards/fields still render pure white on many client pages (contact us, cart,
   product order forms, CMS pages...). This is the lowest-specificity dark baseline — every
   earlier, more specific rule (modals, dashboard, orders, addfunds) still wins over it. */
/* :not([class*="bg-"]) keeps cards that carry a deliberate bg utility (bg-primary…) intact */
body .card:not([class*="bg-"]){background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:16px!important;color:#c3d0de!important;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9)!important}
body .card .card-header,body .card .card-footer{
  background:#111823!important;border-color:#1f2b3a!important;color:#e8eef6!important}
/* form fields */
body .form-control,body input[type=text],body input[type=email],body input[type=password],
body input[type=number],body input[type=tel],body input[type=url],body textarea,body select.form-control{
  background:#111823!important;border:1px solid #2b3a4d!important;color:#e8eef6!important;
  border-radius:10px!important;box-shadow:none!important}
body .form-control::placeholder,body textarea::placeholder{color:#5b6c80!important}
body .form-control:focus,body textarea:focus,body select.form-control:focus{
  border-color:#19c8f5!important;box-shadow:0 0 0 3px rgba(25,200,245,.16)!important;outline:0}
body select.form-control option{background:#0d131c;color:#e8eef6}
/* readable text inside cards */
body .card label{color:#cdd8e4!important;font-weight:600}
body .card p,body .card li,body .card td,body .card th,body .card dd,body .card dt{color:#c3d0de!important}
body .card h1,body .card h2,body .card h3,body .card h4,body .card h5,body .card h6{color:#e8eef6!important}
body .card hr{border-color:#1f2b3a!important}
/* dark inline-coloured headings (e.g. maroon "Contact US via") -> gold accent */
body .card [style*="color:#800"],body .card [style*="color: #800"],
body .card [style*="color:maroon"],body .card font[color]{color:#fac90e!important}

/* ============ service-group product cards: one uniform grid (2026-07-24) ============ */
/* every slot gets the SAME image box, title height and price line, whether the service
   has a picture or falls back to the .image-not-found placeholder */
.col-product{display:flex!important;margin-bottom:26px}
.card-product{width:100%;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
.card-product:hover{transform:translateY(-4px);border-color:#19c8f5!important;
  box-shadow:0 26px 54px -28px rgba(0,0,0,.95)!important}
.card-product>a{height:100%;display:flex;flex-direction:column;text-decoration:none!important}
/* fixed identical media box */
.card-product .card-product-img{height:210px!important;min-height:210px!important;max-height:210px!important;
  display:flex!important;align-items:center;justify-content:center;padding:14px;overflow:hidden;
  background:#0b1017!important;border-bottom:1px solid #1f2b3a}
.card-product .card-product-img>.d-flex{height:100%!important;width:100%!important;margin:0}
.card-product .card-product-img img{max-height:182px!important;max-width:100%!important;
  width:auto!important;height:auto!important;object-fit:contain;display:block;margin:0 auto}
.card-product .image-not-found{display:flex!important;align-items:center;justify-content:center;
  height:100%!important;width:100%!important;background:transparent!important;padding:0!important}
.card-product .image-not-found .big-icon i{font-size:42px!important;color:#233144!important}
/* body: title clamped to 2 lines so every card lines up, price pinned to the bottom */
.card-product .card-body{flex:1 1 auto;display:flex;flex-direction:column;padding:14px 16px 16px!important}
.card-product .service-name{color:#e8eef6!important;font-size:13.5px!important;font-weight:600!important;
  line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em}
.card-product:hover .service-name{color:#fac90e!important}
.card-product .price{color:#fac90e!important;font-weight:800!important;font-size:17px!important;margin-top:auto;padding-top:10px}
/* HOT badge -> neat corner pill instead of the clipped square */
.card-product .card-product-img>.text-center{position:static}
.card-product .badge.hot{position:absolute!important;top:10px!important;right:10px!important;left:auto!important;
  bottom:auto!important;width:auto!important;height:auto!important;min-width:0!important;
  padding:4px 10px!important;border-radius:999px!important;font-size:10px!important;font-weight:700!important;
  letter-spacing:.08em;line-height:1.4!important;z-index:3;background:#e0344a!important;color:#fff!important;
  writing-mode:horizontal-tb!important;text-orientation:mixed!important}

/* --- fix: the site search field is borderless/transparent by design (.border-0);
       the global field styling above had wrapped it in a second box --- */
body .search-bar .form-control,body input.search-products,body .form-control.border-0{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body .search-bar .form-control:focus,body input.search-products:focus,body .form-control.border-0:focus{
  background:transparent!important;border:0!important;box-shadow:none!important;outline:0}
/* --- fix: the theme rotates the HOT badge 90deg, so it read vertically --- */
.card-product .badge.hot{transform:none!important}
/* the search field sits inside .eus-wrap which already draws the box — flatten the inner
   input so only ONE rounded box shows (was rendering a second box inset by the icon) */
body .eus-wrap .form-control,body .eus-wrap input.search-products,body .eus-wrap input{
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;outline:0!important;color:#e8eef6!important}
/* the DEFAULT (non-hover) card title is .truncate-text inside .card-info and ships pure
   black — .service-name is only the hover copy, so styling that alone left it unreadable */
.card-product .card-info .truncate-text,.card-product .truncate-text{
  color:#e8eef6!important;font-size:13.5px!important;font-weight:600!important;line-height:1.45!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.card-product:hover .card-info .truncate-text{color:#fac90e!important}
/* any empty / missing image slot shows the brand logo as a subtle watermark
   instead of the generic broken-image icon */
.image-not-found{
  background-image:url('/pay/LogoUnlocker.png')!important;background-repeat:no-repeat!important;
  background-position:center center!important;background-size:66% auto!important;opacity:.22!important}
.image-not-found .big-icon,.image-not-found i{display:none!important}
/* (specificity fix: the earlier `.card-product .image-not-found{background:transparent}`
   shorthand was cancelling the watermark, so match its specificity here) */
.card-product .image-not-found,body .image-not-found{
  background-image:url("/pay/LogoUnlocker.png")!important;background-repeat:no-repeat!important;
  background-position:center center!important;background-size:66% auto!important;
  background-color:transparent!important;opacity:.28!important}

/* ============ product-card badges + hover call-to-action (2026-07-24) ============ */
/* professional pill badges */
.card-product .badge{padding:5px 11px!important;border-radius:999px!important;
  font-size:9.5px!important;font-weight:800!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;line-height:1!important;border:1px solid rgba(255,255,255,.16)!important;
  z-index:5!important;backdrop-filter:blur(2px)}
.card-product .badge.hot,.card-product .badge-danger{
  background:linear-gradient(135deg,#ff4d63,#d92941)!important;color:#fff!important;
  box-shadow:0 6px 16px -6px rgba(217,41,65,.95)!important}
.card-product .badge-success,.card-product .badge.new{
  background:linear-gradient(135deg,#19c8f5,#0090c0)!important;color:#04121a!important;
  box-shadow:0 6px 16px -6px rgba(25,200,245,.95)!important}
.card-product .badge-warning{background:linear-gradient(135deg,#fac90e,#e0a800)!important;color:#0a0e14!important;
  box-shadow:0 6px 16px -6px rgba(250,201,14,.95)!important}

/* hover: dim the media box and reveal a "Select Service" action pill */
.card-product .card-product-img::before{content:"";position:absolute;inset:0;
  background:rgba(6,10,16,.7);opacity:0;transition:opacity .22s ease;z-index:3;pointer-events:none}
.card-product:hover .card-product-img::before{opacity:1}
.card-product .card-product-img::after{content:"Select Service";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-42%) scale(.94);
  padding:10px 20px;border-radius:999px;white-space:nowrap;z-index:4;pointer-events:none;
  background:linear-gradient(135deg,#fac90e,#e0a800);color:#0a0e14;
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 12px 28px -10px rgba(250,201,14,.95);
  opacity:0;transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.25,1)}
.card-product:hover .card-product-img::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* the hover overlay (.product-info) ships with a white background and flashed light on
   hover — keep it on the card's own dark surface */
.card-product .product-info{background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border-top:1px solid #1f2b3a!important;padding:14px 16px 16px!important}
.card-product .product-info .service-name{color:#fac90e!important}
.card-product .product-info .price{color:#fac90e!important}
/* --- refined hover CTA: sentence case, cart icon, sits at the bottom of the media box --- */
.card-product .card-product-img::after{
  content:"Select Service"!important;
  top:auto!important;bottom:16px!important;left:50%!important;
  transform:translate(-50%,8px) scale(.98)!important;
  padding:9px 18px 9px 38px!important;
  text-transform:none!important;letter-spacing:.01em!important;font-size:12.5px!important;font-weight:700!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e14' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"),linear-gradient(135deg,#fac90e,#e0a800)!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:14px center,center!important;
  background-size:15px 15px,auto!important;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.16) inset!important}
.card-product:hover .card-product-img::after{opacity:1!important;transform:translate(-50%,0) scale(1)!important}
/* soften the scrim so the product art stays visible behind the action */
.card-product .card-product-img::before{background:linear-gradient(180deg,rgba(6,10,16,.25),rgba(6,10,16,.82))!important}

/* ============ cross-browser layout guard (2026-07-24) ============ */
/* never let a stray wide element create a horizontal scrollbar / dead space */
html,body{max-width:100%!important;overflow-x:hidden!important}
body img,body iframe,body table,body pre,body video{max-width:100%}
body .container,body .container-fluid{max-width:100%}
/* wide tables scroll inside their own box instead of stretching the page */
body .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* product grids stay comfortable down to phones */
@media (max-width:575.98px){
  .col-product{width:50%;max-width:50%;flex:0 0 50%;padding-left:8px;padding-right:8px}
  .card-product .card-product-img{height:150px!important;min-height:150px!important;max-height:150px!important}
  .card-product .card-product-img img{max-height:126px!important}
  .card-product .card-body{padding:11px 12px 13px!important}
  .card-product .service-name,.card-product .truncate-text{font-size:12.5px!important}
}
@media (max-width:359.98px){
  .col-product{width:100%;max-width:100%;flex:0 0 100%}
}

/* ============ cart affordances: card icon + header cart + guest gate (2026-07-24) ============ */
/* (1) persistent shopping icon on every service card (bottom-right of the body) — the whole
   card is already a link to the service page, so clicking it opens the service details */
.card-product{position:relative}
/* the shopping icon is ONLY for real services (which have a price/body),
   never for group category cards (.card-group) */
.card-product:not(.card-group) .card-body,.card-product:not(.card-group) .product-info{padding-right:64px!important}
.card-product .product-info{z-index:3!important}
.card-product:not(.card-group)>a::after{
  content:"";position:absolute;right:14px;bottom:14px;width:41px;height:41px;border-radius:8px;z-index:7;border:0;
  background-color:rgba(255,152,0,.13);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 21H8.574a3 3 0 0 1-2.965-2.544l-1.255-8.152A2 2 0 0 1 6.331 8H17.67a2 2 0 0 1 1.977 2.304l-.263 1.708M16 19h6m-3-3v6'/%3E%3Cpath d='M9 11V6a3 3 0 0 1 6 0v5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:22px 22px;
  transition:background-color .16s,transform .16s;pointer-events:none}
/* hover: fill solid orange with a dark icon (matches the Pro store) */
.card-product:not(.card-group):hover>a::after{
  background-color:#ff9800;transform:translateY(-2px);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 21H8.574a3 3 0 0 1-2.965-2.544l-1.255-8.152A2 2 0 0 1 6.331 8H17.67a2 2 0 0 1 1.977 2.304l-.263 1.708M16 19h6m-3-3v6'/%3E%3Cpath d='M9 11V6a3 3 0 0 1 6 0v5'/%3E%3C/svg%3E")}

/* (2) header cart icon + count badge — hide DHRU's own messy mini-cart, use ours */
header .cartminiview{display:none!important}
header .eu-cart-li{display:flex!important;align-items:center;margin:0 14px 0 6px;list-style:none}
/* header cart: no box — just the icon */
.eu-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:auto;padding:4px;background:transparent;border:0;color:#e8eef6;
  text-decoration:none!important;transition:color .15s,transform .15s}
.eu-cart:hover{color:#fac90e;transform:translateY(-1px)}
.eu-cart svg{width:25px;height:25px}
.eu-cart .eu-cart-badge{position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:linear-gradient(135deg,#fac90e,#e0a800);color:#0a0e14;
  font-size:11px;font-weight:800;line-height:19px;text-align:center;
  box-shadow:0 4px 10px -3px rgba(250,201,14,.9);display:none}
.eu-cart.has-items .eu-cart-badge{display:block;animation:eu-cartpop .3s ease}
@keyframes eu-cartpop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* ============ cart view + service-info tables -> dark (2026-07-24) ============ */
/* the cart line-items & totals ship as plain white tables; the service-info block
   (admin HTML with "correct/wrong serial" examples) is also a white table */
body.page-cart table,body.page-cart .card table,body.page-cart .info table,
body.page-cart .service-info table,body.page-cart td[bgcolor],body.page-cart table[bgcolor]{
  background:transparent!important;color:#c3d0de!important;border-color:#1f2b3a!important}
body.page-cart table.table.border-bottom,body.page-cart table.border-0.align-items-center{
  background:linear-gradient(180deg,#0d131c,#0a0e14)!important;border:1px solid #1f2b3a!important;
  border-radius:14px!important;overflow:hidden}
body.page-cart table td,body.page-cart table th{
  background:transparent!important;color:#c3d0de!important;border-color:rgba(255,255,255,.05)!important;
  padding:12px 14px!important;vertical-align:middle}
body.page-cart table thead th,body.page-cart table th[style]{
  color:#8aa0b8!important;font-size:11.5px!important;text-transform:uppercase;letter-spacing:.05em}
body.page-cart table a{color:#19c8f5!important}
body.page-cart table a:hover{color:#fac90e!important}
body.page-cart .price,body.page-cart .total,body.page-cart .grand-total,body.page-cart .amount{color:#fac90e!important}
/* service-info white content blocks (page-cart product order) */
body.page-cart .card-info-desc,body.page-cart .service-info,body.page-cart .info,
body.page-cart div[style*="background:#fff"],body.page-cart div[style*="background: #fff"],
body.page-cart div[style*="background-color:#fff"],body.page-cart div[style*="background-color: rgb(255"]{
  background:#0d131c!important;color:#c3d0de!important;border-radius:12px}
body.page-cart *[style*="rgb(255, 255, 255)"],body.page-cart *[style*="#ffffff"],body.page-cart *[style*="#fff "]{
  background-color:transparent!important}
/* the green "correct" / red "wrong" example rows -> dark tinted, readable */
body.page-cart .alert-success,body.page-cart [style*="e8f5e9"],body.page-cart [style*="223, 240"],body.page-cart [style*="d4edda"]{
  background:rgba(47,208,122,.12)!important;color:#8ff0b5!important;border-left:3px solid #2fd07a!important}
body.page-cart .alert-danger,body.page-cart [style*="fdecea"],body.page-cart [style*="f8d7da"],body.page-cart [style*="253, 236"]{
  background:rgba(255,92,108,.12)!important;color:#ff9aa6!important;border-left:3px solid #ff5c6c!important}
body.page-cart h1,body.page-cart h2,body.page-cart h3,body.page-cart h4,body.page-cart h5{color:#e8eef6!important}
/* keep Chrome autofill from painting login/modal fields light-blue */
.modal-content input:-webkit-autofill,.modal-content input:-webkit-autofill:focus,
body .form-control:-webkit-autofill,.card-simple-form input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #111823 inset!important;-webkit-text-fill-color:#e8eef6!important;
  caret-color:#e8eef6;transition:background-color 9999s ease-in-out 0s}

/* ============ professional CART VIEW (2026-07-24) ============ */
body.page-cart .card:not([class*="bg-"]){background:linear-gradient(180deg,#0d131c,#0a0e14)!important;
  border:1px solid #1f2b3a!important;border-radius:18px!important;box-shadow:0 30px 64px -34px rgba(0,0,0,.9)!important}
/* products table */
body.page-cart table.table.border-bottom{border:0!important;background:transparent!important;width:100%}
body.page-cart table.table.border-bottom thead th{
  background:transparent!important;color:#6d7d91!important;font-size:11px!important;font-weight:600!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;border:0!important;
  border-bottom:1px solid #1e2a38!important;padding:16px 20px!important}
body.page-cart table.table.border-bottom tbody td{
  background:transparent!important;color:#cdd8e4!important;border:0!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;padding:18px 20px!important;vertical-align:middle!important}
body.page-cart table.table.border-bottom tbody tr:last-child td{border-bottom:0!important}
/* thumbnail: real image or the Easy-Unlocker logo watermark when none */
body.page-cart table.table.border-bottom .big-icon{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:96px!important;height:96px!important;border-radius:14px;
  background:#0b1017 url("/pay/LogoUnlocker.png") center/68% no-repeat!important;
  border:1px solid #1f2b3a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
body.page-cart table.table.border-bottom .big-icon i{display:none!important}
body.page-cart table.table.border-bottom img{width:96px;height:96px;object-fit:contain;
  border-radius:14px;background:#0b1017;border:1px solid #1f2b3a;padding:8px}
/* product name + description */
body.page-cart table.table.border-bottom a{color:#e8eef6!important;font-size:15.5px!important;
  font-weight:600!important;text-decoration:none!important;line-height:1.4}
body.page-cart table.table.border-bottom a:hover{color:#fac90e!important}
body.page-cart table.table.border-bottom td .text-muted,
body.page-cart table.table.border-bottom td small,body.page-cart table.table.border-bottom td p{
  color:#7c8ba0!important;font-size:12.5px!important;margin-top:3px}
/* quantity chip */
body.page-cart table.table.border-bottom td .col:not(.col-md-2):not(.w-100),
body.page-cart table.table.border-bottom td .quantity,body.page-cart table.table.border-bottom .qnt{
  font-variant-numeric:tabular-nums;font-weight:700;color:#e8eef6}
/* prices */
body.page-cart table.table.border-bottom .text-right,
body.page-cart table.table.border-bottom td:last-child{
  color:#fac90e!important;font-weight:800!important;font-size:16px!important;
  font-variant-numeric:tabular-nums;text-align:right}
/* ---- summary panel (Price / Shipping / Total) ---- */
body.page-cart table.table.border-0.align-items-center{
  background:linear-gradient(180deg,#111823,#0d131c)!important;border:1px solid #1f2b3a!important;
  border-radius:16px!important;overflow:hidden;margin-top:6px}
body.page-cart table.table.border-0.align-items-center td{
  border:0!important;padding:14px 20px!important;color:#c3d0de!important;font-size:14px}
body.page-cart table.table.border-0.align-items-center td:last-child{text-align:right;
  color:#e8eef6!important;font-variant-numeric:tabular-nums;font-weight:600}
body.page-cart table.table.border-0.align-items-center tr:last-child td{
  border-top:1px solid #1f2b3a!important;padding-top:16px!important}
body.page-cart table.table.border-0.align-items-center tr:last-child td:first-child{
  color:#fac90e!important;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em}
body.page-cart table.table.border-0.align-items-center tr:last-child td:last-child{
  color:#fac90e!important;font-weight:800;font-size:20px}
/* Next / checkout button */
body.page-cart .btn-warning,body.page-cart .btn.forward,body.page-cart a.btn[href*="checkout"]{
  background:linear-gradient(135deg,#fac90e,#e0a800)!important;color:#0a0e14!important;border:0!important;
  font-weight:800!important;border-radius:12px!important;min-height:52px;letter-spacing:.02em;
  box-shadow:0 14px 30px -12px rgba(250,201,14,.9)!important}

/* top bar phone / email: kill the ugly white hover background (2026-07-24) */
header .header-top .nav-link,header .header-top .nav-item{background:transparent!important;transition:color .15s}
header .header-top .nav-link:hover,header .header-top .nav-item:hover,
header .header-top .nav-link:focus,header .header-top a:hover,header .header-top a:focus{
  background:transparent!important;color:#19c8f5!important;box-shadow:none!important}
header .header-top .nav-link:hover i,header .header-top a:hover i{color:#19c8f5!important}

/* ============ unify service-card title + price + CTA with the orange cart icon (2026-07-24) ============ */
/* service title -> orange (both the default .truncate-text and the hover .service-name copies) */
.card-product:not(.card-group) .truncate-text,
.card-product:not(.card-group) .card-info .truncate-text,
.card-product:not(.card-group) .service-name,
.card-product:not(.card-group) .product-info .service-name,
.card-product:not(.card-group):hover .service-name,
.card-product:not(.card-group):hover .card-info .truncate-text{color:#ff9800!important}
/* price -> orange */
.card-product:not(.card-group) .price,
.card-product:not(.card-group) .product-info .price,
.card-product:not(.card-group) .price .prefix,
.card-product:not(.card-group) .price .suffix{color:#ff9800!important}
/* "Select Service" hover CTA -> orange fill with a dark icon/text */
.card-product:not(.card-group) .card-product-img::after{
  color:#0a0e14!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0e14' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E"),linear-gradient(135deg,#ff9800,#e07f00)!important;
  box-shadow:0 12px 26px -10px rgba(255,152,0,.9),0 0 0 1px rgba(255,255,255,.14) inset!important}

/* ============ title white by default -> orange only on hover (2026-07-24) ============ */
.card-product:not(.card-group) .truncate-text,
.card-product:not(.card-group) .card-info .truncate-text,
.card-product:not(.card-group) .service-name{color:#e8eef6!important}
.card-product:not(.card-group):hover .truncate-text,
.card-product:not(.card-group):hover .card-info .truncate-text,
.card-product:not(.card-group):hover .service-name,
.card-product:not(.card-group) .product-info .service-name,
.card-product:not(.card-group) .truncate-text:hover,
.card-product:not(.card-group) .service-name:hover{color:#ff9800!important}

/* ============ professional service cards on phones — 2 per row (2026-07-24) ============ */
@media (max-width:600px){
  .row>.col-product,.services .col-product,.col-product{
    width:50%!important;max-width:50%!important;flex:0 0 50%!important;
    padding-left:7px!important;padding-right:7px!important;margin-bottom:14px!important}
  .card-product .card-product-img{height:120px!important;min-height:120px!important;max-height:120px!important;padding:10px}
  .card-product .card-product-img img{max-height:100px!important}
  .card-product:not(.card-group) .card-body,.card-product:not(.card-group) .product-info{
    padding:11px 12px 12px!important;padding-right:12px!important}
  .card-product:not(.card-group) .truncate-text,.card-product:not(.card-group) .service-name{
    font-size:12px!important;line-height:1.35!important;min-height:2.7em}
  .card-product:not(.card-group) .price{font-size:14px!important;padding-top:8px!important}
  /* smaller shopping icon, tucked so it never overlaps the price */
  .card-product:not(.card-group)>a::after{width:34px!important;height:34px!important;right:10px!important;bottom:10px!important;background-size:18px 18px!important;border-radius:7px!important}
  .card-product:not(.card-group) .card-body{padding-right:52px!important}
  .card-product:not(.card-group) .product-info{padding-right:52px!important}
  .card-product .badge.hot{font-size:9px!important;padding:3px 8px!important;top:8px!important;right:8px!important}
}
@media (max-width:360px){
  .row>.col-product,.col-product{width:100%!important;max-width:100%!important;flex:0 0 100%!important}
}

/* ============ FINAL: title+price white by default, orange on hover; CART.png placeholder (2026-07-24) ============ */
/* both title copies (.truncate-text for desktop, .product-info .service-name shown on mobile) + price */
.card-product:not(.card-group) .truncate-text,
.card-product:not(.card-group) .card-info .truncate-text,
.card-product:not(.card-group) .service-name,
.card-product:not(.card-group) .product-info .service-name,
.card-product:not(.card-group) .price,
.card-product:not(.card-group) .product-info .price,
.card-product:not(.card-group) .price .prefix,
.card-product:not(.card-group) .price .suffix{color:#e8eef6!important}
.card-product:not(.card-group):hover .truncate-text,
.card-product:not(.card-group):hover .card-info .truncate-text,
.card-product:not(.card-group):hover .service-name,
.card-product:not(.card-group):hover .product-info .service-name,
.card-product:not(.card-group):hover .price,
.card-product:not(.card-group):hover .product-info .price,
.card-product:not(.card-group):hover .price .prefix,
.card-product:not(.card-group):hover .price .suffix{color:#ff9800!important}
/* tidy the clamped title so it aligns cleanly across cards */
.card-product:not(.card-group) .truncate-text,.card-product:not(.card-group) .service-name{
  font-weight:600!important;line-height:1.4!important;letter-spacing:-.005em;word-break:break-word}
/* placeholder image (no product picture) -> CART.png */
.image-not-found,.card-product .image-not-found,body .image-not-found{
  background-image:url("/pay/CART.png")!important;background-repeat:no-repeat!important;
  background-position:center center!important;background-size:58% auto!important;
  background-color:transparent!important;opacity:.9!important}
body.page-cart table.table.border-bottom .big-icon{
  background:#0b1017 url("/pay/CART.png") center/60% no-repeat!important}

/* let the service title show in FULL (undo the 2-line clamp) so nothing is cropped */
.card-product:not(.card-group) .truncate-text,
.card-product:not(.card-group) .card-info .truncate-text,
.card-product:not(.card-group) .service-name,
.card-product:not(.card-group) .product-info .service-name{
  display:block!important;-webkit-line-clamp:unset!important;-webkit-box-orient:unset!important;
  overflow:visible!important;white-space:normal!important;text-overflow:clip!important;
  min-height:0!important;margin-bottom:8px}

/* clean title wrapping: break at spaces, not mid-word (was one word per line on narrow cards) */
.card-product:not(.card-group) .truncate-text,
.card-product:not(.card-group) .card-info .truncate-text,
.card-product:not(.card-group) .service-name,
.card-product:not(.card-group) .product-info .service-name{
  word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important;text-align:left}
@media (max-width:600px){
  /* keep mobile titles tidy: up to 3 lines then ellipsis */
  .card-product:not(.card-group) .truncate-text,
  .card-product:not(.card-group) .service-name{
    display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;
    overflow:hidden!important;font-size:12.5px!important;line-height:1.4!important}
}

/* ============ mobile title fix: full width + clean wrap, price clears the icon (2026-07-24) ============ */
@media (max-width:600px){
  /* title area uses the FULL card width (the icon is absolute bottom-right, so only the
     price row needs clearance — not the whole body) */
  .card-product:not(.card-group) .card-body,
  .card-product:not(.card-group) .product-info{padding-left:12px!important;padding-right:12px!important}
  /* show the WHOLE title, wrapping cleanly at spaces (no clamp, no per-word breaks) */
  .card-product:not(.card-group) .truncate-text,
  .card-product:not(.card-group) .card-info .truncate-text,
  .card-product:not(.card-group) .service-name,
  .card-product:not(.card-group) .product-info .service-name{
    display:block!important;-webkit-line-clamp:unset!important;-webkit-box-orient:unset!important;
    overflow:visible!important;white-space:normal!important;word-break:normal!important;
    overflow-wrap:break-word!important;font-size:12.5px!important;line-height:1.42!important;min-height:0!important}
  /* keep the price from sliding under the bottom-right shopping icon */
  .card-product:not(.card-group) .price{padding-right:46px!important}
}

/* fix: center the "Select Service" pill inside the image so it never overlaps the title below */
.card-product:not(.card-group) .card-product-img::after{
  top:50%!important;bottom:auto!important;transform:translate(-50%,-52%) scale(.96)!important}
.card-product:not(.card-group):hover .card-product-img::after{
  transform:translate(-50%,-50%) scale(1)!important}

/* ============ announcements modal: professional stacked layout on phones (2026-07-25) ============ */
@media (max-width:600px){
  #announcement .modal-dialog{margin:10px auto!important;max-width:calc(100vw - 20px)!important}
  #announcement .modal-body{padding:10px 12px!important}
  /* stack each announcement's cells (date / text / price) into a tidy card */
  #announcement .modal-body table,
  #announcement .modal-body tbody,
  #announcement .modal-body tr.announce,
  #announcement .modal-body tr.announce>td{display:block!important;width:100%!important;max-width:100%!important}
  #announcement .modal-body tr.announce{padding:13px 15px!important;margin-bottom:10px!important}
  #announcement .modal-body tr.announce>td{border:0!important;padding:0!important;white-space:normal!important}
  /* date -> small muted line on top (drop the desktop left-border pill) */
  #announcement .modal-body tr.announce td.no-wrap{
    font-family:ui-monospace,Consolas,monospace;font-size:11px!important;letter-spacing:.08em;
    color:#5b6c80!important;margin-bottom:8px!important;border-left:0!important;border-radius:0!important;width:auto!important}
  #announcement .modal-body tr.announce td.text-center:empty{display:none!important}
  /* text takes the full width, price chip sits neatly below it */
  #announcement .eu-has-price{display:flex!important;flex-direction:column!important;
    align-items:flex-start!important;gap:10px!important}
  #announcement .eu-has-price>div{flex:1 1 100%;min-width:0;width:100%}
  #announcement .eu-has-price span{white-space:normal!important;word-break:normal!important;
    overflow-wrap:break-word!important;color:#c3d0de!important;font-size:13.5px!important;line-height:1.5}
  #announcement .eu-price-slot .eu-price{white-space:nowrap!important}
}

/* ============ login modal: autofill + register CTA (2026-07-26) ============ */
/* المتصفح يفرض خلفية بيضاء على الحقول المملوءة تلقائيًا (autofill) فتختفي البيانات.
   الحيلة القياسية: ظل داخلي بلون الحقل + تثبيت لون النص. */
/* ملاحظة أسبقية: القاعدة العامة `body input[type=text]{box-shadow:none!important}`
   أقوى من `input:-webkit-autofill`، فكانت تلغي الحيلة. لذلك نطابق نفس التخصيص ونزيد. */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active,
body input[type=text]:-webkit-autofill,
body input[type=email]:-webkit-autofill,
body input[type=password]:-webkit-autofill,
body input[type=tel]:-webkit-autofill,
body input[type=number]:-webkit-autofill,
body .form-control:-webkit-autofill,
body .form-control:-webkit-autofill:hover,
body .form-control:-webkit-autofill:focus,
body .modal-content input:-webkit-autofill,
body .modal-content .form-control:-webkit-autofill,
body textarea:-webkit-autofill,
body select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #111823 inset!important;
          box-shadow:0 0 0 1000px #111823 inset!important;
  background-color:#111823!important;
  background-image:none!important;
  -webkit-text-fill-color:#e8eef6!important;
  color:#e8eef6!important;
  caret-color:#e8eef6!important;
  border:1px solid #2b3a4d!important;
  transition:background-color 9999s ease-in-out 0s!important}
/* فايرفوكس */
input:autofill,textarea:autofill{background:#111823!important;color:#e8eef6!important}

/* زر التسجيل داخل نافذة الدخول */
.eu-reg-cta{margin-top:16px;padding-top:16px;border-top:1px solid #1f2b3a;text-align:center}
.eu-reg-cta .eu-reg-txt{display:block;color:#93a4b8;font-size:13px;margin-bottom:10px}
.eu-reg-cta .eu-reg-btn{display:block;width:100%;padding:12px 18px;border-radius:11px;
  background:transparent;border:1px solid #19c8f5;color:#19c8f5!important;
  font-size:14px;font-weight:700;text-decoration:none!important;
  transition:background .16s,color .16s,transform .16s}
.eu-reg-cta .eu-reg-btn:hover{background:#19c8f5;color:#04121a!important;transform:translateY(-1px)}

/* ============ Connect Telegram: زر أعلى الصفحة + تنسيق النافذة (2026-07-26) ============ */
/* الزر بعد نقله لشريط عنوان الصفحة (بمحاذاة Client Area Dashboard على اليمين) */
.eu-pagehead{position:relative}
.eu-tg-head{position:absolute;top:50%;transform:translateY(-50%);right:18px;z-index:5}
/* زر هادئ واحترافي: سطح داكن + حد خفيف، بدون توهج صارخ */
.eu-tg-head .btn,.eu-tg-head button{
  display:inline-flex!important;align-items:center;gap:9px;margin:0!important;
  background:#111823!important;color:#cfe9fb!important;
  border:1px solid #24506b!important;border-radius:10px!important;padding:9px 18px!important;
  font-size:13px!important;font-weight:600!important;letter-spacing:.01em;white-space:nowrap;
  box-shadow:none!important;
  transition:border-color .18s,color .18s,background .18s,transform .18s}
.eu-tg-head .btn:hover,.eu-tg-head button:hover{
  background:#132132!important;border-color:#29b6f6!important;color:#fff!important;
  transform:translateY(-1px)}
/* الأيقونة وحدها تحمل لمسة الحياة: نبضة لون خفيفة جدًا */
.eu-tg-head .btn i{font-size:14px;color:#29b6f6;animation:eu-tg-soft 3.2s ease-in-out infinite}
.eu-tg-head .btn:hover i{animation-play-state:paused;color:#4fc3f7}
@keyframes eu-tg-soft{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .eu-tg-head .btn,.eu-tg-head .btn i{animation:none!important}}
@media (max-width:767.98px){
  .eu-tg-head{position:static;transform:none;display:block;margin:10px 0 0;padding:0 15px}
  .eu-tg-head .btn{width:100%;justify-content:center}}

/* ---- نافذة Connect Telegram: تصميم هادئ ومنظّم ---- */
#modal-telegram .modal-dialog{max-width:820px}
#modal-telegram .modal-content{background:#0d131c!important;
  border:1px solid #1f2b3a!important;border-radius:16px!important;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95)!important}
#modal-telegram .modal-header{background:#111823!important;border-bottom:1px solid #1f2b3a!important;
  padding:16px 22px!important}
#modal-telegram .modal-title{color:#e8eef6!important;font-weight:700;font-size:16px!important;
  display:flex;align-items:center;gap:10px}
#modal-telegram .modal-title i{color:#29b6f6;font-size:15px}
#modal-telegram .close{color:#5b6c80!important;opacity:1!important;text-shadow:none!important;
  font-weight:400;transition:color .15s}
#modal-telegram .close:hover{color:#e8eef6!important}
#modal-telegram .modal-body{padding:24px 26px 28px!important}
/* النص التعريفي */
#modal-telegram .modal-body>div>h5:first-child{
  color:#93a4b8!important;font-size:14px!important;line-height:1.75;font-weight:400;
  margin:0 auto 6px!important;padding:0!important;max-width:560px}
#modal-telegram .modal-body>div>h5:first-child span{color:#29b6f6!important}
/* الصف: عمودان متساويان مع فاصل */
#modal-telegram .eu-tg-row{margin-top:22px!important;align-items:stretch!important}
#modal-telegram .eu-tg-row>[class*="col-lg-5"]{display:flex;flex-direction:column;justify-content:center}
#modal-telegram .eu-tg-search{color:#c3d0de!important;font-size:14px!important;line-height:1.8;font-weight:400}
/* الفاصل "or" */
#modal-telegram .or{position:relative;margin:0}
#modal-telegram .or span{color:#5b6c80!important;font-family:ui-monospace,Consolas,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  background:#0d131c;padding:6px 10px;position:relative;z-index:1}
#modal-telegram .or::before{content:"";position:absolute;left:50%;top:-40px;bottom:-40px;width:1px;
  background:#1f2b3a}
@media (max-width:991.98px){#modal-telegram .or::before{display:none}}
/* اسم البوت كزر مباشر */
#modal-telegram .eu-tg-bot{display:inline-flex;align-items:center;gap:8px;margin:8px 0;
  padding:9px 16px;border-radius:10px;text-decoration:none!important;
  background:#111823;border:1px solid #24506b;
  color:#cfe9fb!important;font-weight:600;font-size:13.5px;
  transition:background .16s,border-color .16s,color .16s,transform .16s}
#modal-telegram .eu-tg-bot i{color:#29b6f6;font-size:13px}
#modal-telegram .eu-tg-bot:hover{background:#132132;border-color:#29b6f6;color:#fff!important;
  transform:translateY(-1px)}
#modal-telegram .eu-tg-bot:hover i{color:#4fc3f7}
/* صندوق رمز الاقتران */
#modal-telegram .eu-tg-code{background:#0b1017!important;border:1px solid #1f2b3a!important;
  border-radius:12px!important;padding:18px 14px!important;margin-top:14px!important}
#modal-telegram .eu-tg-pin{display:block;font-size:34px!important;font-weight:700;letter-spacing:.16em;
  color:#fac90e!important;font-family:ui-monospace,Consolas,monospace;line-height:1.25}
#modal-telegram .eu-tg-pinlbl{display:inline-block;margin-top:8px;color:#5b6c80!important;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-family:ui-monospace,Consolas,monospace}
/* إطار الـQR */
#modal-telegram .eu-tg-qr{background:#fff!important;border:1px solid #1f2b3a!important;
  border-radius:12px!important;padding:10px;display:inline-block;line-height:0}
#modal-telegram .eu-tg-qr img{display:block;max-width:100%;height:auto;border-radius:4px}
@media (max-width:991.98px){
  #modal-telegram .modal-body{padding:20px 18px 22px!important}
  #modal-telegram .eu-tg-row{margin-top:14px!important}
  #modal-telegram .eu-tg-row>[class*="col-"]{margin-bottom:16px}
  #modal-telegram .eu-tg-pin{font-size:30px!important}
  #modal-telegram .or{margin:4px 0!important}}

/* ============ أيقونة قائمة الهاتف: 3 خطوط بألوان اللوجو (2026-08-02) ============ */
/* الأيقونة الأصلية رمز خط واحد (fa-bars) لا يمكن تلوين خطوطه منفردة،
   لذلك نُخفي الرمز ونرسم 3 أشرطة: ذهبي / سماوي / ذهبي */
header .navbar-toggler{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:8px 6px!important;display:inline-flex;align-items:center;justify-content:center;
  outline:none!important}
header .navbar-toggler:focus{outline:none!important;box-shadow:none!important}
header .navbar-toggler i.fa-bars{
  display:block;position:relative;width:26px;height:3px;border-radius:3px;
  font-size:0!important;line-height:0!important;color:transparent!important;
  background:#19c8f5!important;                       /* الخط الأوسط: سماوي */
  transition:background .2s}
header .navbar-toggler i.fa-bars::before,
header .navbar-toggler i.fa-bars::after{
  content:""!important;position:absolute;left:0;
  width:26px;height:3px;border-radius:3px;
  background:#fac90e!important;                       /* الأعلى والأسفل: ذهبي */
  font-size:0!important;line-height:0!important;
  transition:transform .2s}
header .navbar-toggler i.fa-bars::before{top:-8px}
header .navbar-toggler i.fa-bars::after{top:8px}
/* لمسة تفاعل بسيطة عند الضغط */
header .navbar-toggler:active i.fa-bars::before{transform:translateY(1px)}
header .navbar-toggler:active i.fa-bars::after{transform:translateY(-1px)}

/* ============================================================
   صفحات المحتوى الثابت  /pages/*  (Privacy Policy, Refund Policy)
   المحتوى قادم من الـCMS بألوان فاتحة مدمجة، فيُعاد ضبطه للوضع الليلي
   ============================================================ */

/* عمود العنوان: توسيط بنفس عرض بطاقة المحتوى */
body.page-pages .page-container > .container > .row > [class*="col-"]{
  width:100%!important;max-width:920px!important;flex:0 0 auto!important;
  margin-left:auto!important;margin-right:auto!important}
body.page-pages .news-data-wrapper{margin-bottom:18px!important}
body.page-pages .news-data-wrapper h1{
  color:#f2f5f8!important;font-size:27px!important;font-weight:800!important;
  line-height:1.35!important;margin:0!important;letter-spacing:-.01em}

/* بطاقة المستند */
body.page-pages .content-wrapper > .container > .row{justify-content:center!important}
body.page-pages .content-wrapper > .container > .row > [class*="col-"]{
  width:100%!important;max-width:920px!important;flex:0 0 auto!important;
  margin:0 auto 60px!important;padding:46px 52px!important;
  background:#0f1621!important;border:1px solid #1e2a38!important;border-radius:16px!important;
  box-shadow:0 24px 60px rgba(0,0,0,.34)!important}

/* توحيد الخط مع باقي الموقع (المحتوى يطلب Open Sans غير محمّل) */
body.page-pages .content-wrapper > .container > .row > [class*="col-"] *{
  font-family:inherit!important}

/* النص */
body.page-pages .content-wrapper p,
body.page-pages .content-wrapper li,
body.page-pages .content-wrapper span,
body.page-pages .content-wrapper td{color:#c3d0de!important}
body.page-pages .content-wrapper p{
  font-size:15px!important;line-height:1.9!important;margin:0 0 18px!important;text-align:left!important}
body.page-pages .content-wrapper strong,
body.page-pages .content-wrapper b{color:#eef3f9!important;font-weight:700!important}

/* عنوان رئيسي داخل المستند */
body.page-pages .content-wrapper h2{
  position:relative;color:#f2f5f8!important;font-size:22px!important;font-weight:800!important;
  margin:0 0 26px!important;padding:0 0 14px!important;
  border-bottom:1px solid #1e2a38!important;letter-spacing:-.01em}
body.page-pages .content-wrapper h2::after{
  content:"";position:absolute;left:0;bottom:-1px;width:66px;height:2px;
  background:linear-gradient(90deg,#fac90e,#19c8f5);border-radius:2px}

/* عناوين الأقسام */
body.page-pages .content-wrapper h3{
  position:relative;color:#19c8f5!important;font-size:16.5px!important;font-weight:700!important;
  margin:40px 0 14px!important;padding-left:15px!important}
body.page-pages .content-wrapper h3::before{
  content:"";position:absolute;left:0;top:.24em;width:3px;height:1.05em;
  border-radius:2px;background:#fac90e}
body.page-pages .content-wrapper h4{
  color:#e8eef6!important;font-size:15px!important;font-weight:700!important;margin:26px 0 10px!important}

/* روابط وقوائم */
body.page-pages .content-wrapper a{
  color:#19c8f5!important;text-decoration:none!important;
  border-bottom:1px solid rgba(25,200,245,.32);transition:color .15s,border-color .15s}
body.page-pages .content-wrapper a:hover{color:#fac90e!important;border-bottom-color:#fac90e}
body.page-pages .content-wrapper ul,
body.page-pages .content-wrapper ol{margin:0 0 18px!important;padding-left:24px!important}
body.page-pages .content-wrapper li{
  font-size:15px!important;line-height:1.85!important;margin:0 0 9px!important}
body.page-pages .content-wrapper li::marker{color:#fac90e}

/* عناصر متفرقة */
body.page-pages .content-wrapper hr{border:0!important;border-top:1px solid #1e2a38!important;margin:34px 0!important}
body.page-pages .content-wrapper img{max-width:100%!important;height:auto!important;border-radius:10px}
body.page-pages .content-wrapper table{width:100%!important;border-collapse:collapse!important;margin:0 0 18px!important}
body.page-pages .content-wrapper table td,
body.page-pages .content-wrapper table th{
  border:1px solid #1e2a38!important;padding:10px 13px!important;font-size:14px!important}
body.page-pages .content-wrapper table th{color:#8ea0b5!important;background:rgba(255,255,255,.02)!important}
/* ponytail: فوتر يتيم داخل نص الـCMS (١٤ حرفاً) — يُخفى بدل تعديل المحتوى */
body.page-pages .content-wrapper > .container footer.footer{display:none!important}

@media (max-width:767px){
  body.page-pages .content-wrapper > .container > .row > [class*="col-"]{
    padding:28px 22px!important;border-radius:13px!important;margin-bottom:38px!important}
  body.page-pages .news-data-wrapper h1{font-size:21px!important}
  body.page-pages .content-wrapper h2{font-size:19px!important}
  body.page-pages .content-wrapper h3{font-size:15.5px!important;margin-top:32px!important}
  body.page-pages .content-wrapper p,
  body.page-pages .content-wrapper li{font-size:14.5px!important;line-height:1.85!important}
}

/* عناوين المستند: العناصر الداخلية ترث لون العنوان لا لون النص العادي */
body.page-pages .content-wrapper h2 span,
body.page-pages .content-wrapper h2 strong,
body.page-pages .content-wrapper h3 span,
body.page-pages .content-wrapper h3 strong,
body.page-pages .content-wrapper h4 span,
body.page-pages .content-wrapper h4 strong{color:inherit!important;font-weight:inherit!important}

/* محاذاة عنوان الصفحة مع حافة النص داخل البطاقة */
body.page-pages .news-data-wrapper{padding:0 52px!important}
@media (max-width:767px){ body.page-pages .news-data-wrapper{padding:0 22px!important} }

/* الحاويات في هذه الصفحات مثبّتة على width:1200px فتخرج عن الشاشات الصغيرة */
body.page-pages .content-wrapper > .container,
body.page-pages .page-container > .container{
  width:100%!important;max-width:1200px!important;
  margin-left:auto!important;margin-right:auto!important}
body.page-pages .content-wrapper > .container > .row > [class*="col-"],
body.page-pages .page-container > .container > .row > [class*="col-"]{
  width:100%!important;max-width:920px!important;flex:0 0 auto!important}

/* ---- نمط ثانٍ لصفحات /pages: النص مباشرة داخل .page-container بلا حاوية ---- */
/* ponytail: :has() للتفرقة بين النمطين بدل تعديل القالب (مدعوم في كل المتصفحات الحديثة) */
body.page-pages .page-container:has(> p){
  max-width:920px!important;margin:0 auto 60px!important;padding:46px 52px!important;
  background:#0f1621!important;border:1px solid #1e2a38!important;border-radius:16px!important;
  box-shadow:0 24px 60px rgba(0,0,0,.34)!important}
body.page-pages .page-container:has(> p) *{font-family:inherit!important}
body.page-pages .page-container > p,
body.page-pages .page-container > ul,
body.page-pages .page-container > ol,
body.page-pages .page-container > div:not(.container) > p{
  color:#c3d0de!important;font-size:15px!important;line-height:1.9!important;margin:0 0 18px!important}
body.page-pages .page-container > p span,
body.page-pages .page-container > p font{color:inherit!important}
body.page-pages .page-container > p strong,
body.page-pages .page-container > p b{color:#eef3f9!important;font-weight:700!important}
body.page-pages .page-container > p a,
body.page-pages .page-container > p a strong{
  color:#19c8f5!important;text-decoration:none!important;font-weight:600!important;
  border-bottom:1px solid rgba(25,200,245,.32)}
body.page-pages .page-container > p a:hover,
body.page-pages .page-container > p a:hover strong{color:#fac90e!important;border-bottom-color:#fac90e}
body.page-pages .page-container > h2,
body.page-pages .page-container > h3{
  position:relative;color:#19c8f5!important;font-size:17px!important;font-weight:700!important;
  margin:34px 0 14px!important;padding-left:15px!important}
body.page-pages .page-container > h2::before,
body.page-pages .page-container > h3::before{
  content:"";position:absolute;left:0;top:.24em;width:3px;height:1.05em;border-radius:2px;background:#fac90e}
/* رابط تحرير الصفحة (يظهر للأدمن فقط) */
body.page-pages .page-container a[href*="editpage"],
body.page-pages .page-container > .text-right a{color:#8ea0b5!important;font-size:12.5px!important}

@media (max-width:767px){
  body.page-pages .page-container:has(> p){
    padding:28px 22px!important;border-radius:13px!important;margin-bottom:38px!important}
  body.page-pages .page-container > p{font-size:14.5px!important}
}