/* SoftUnlocker redesign E "Smooth Mono" - overlay layer.
   Loaded only when the su_theme=e cookie is set (see header.tpl SU-REDESIGN-E block).
   Every rule is scoped to html.su-e so the stock theme is untouched without it. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

html.su-e{
  --su-bg:#F4F4F5;--su-s:#FFFFFF;--su-s2:#FAFAFA;--su-ink:#0A0A0A;--su-ink2:#3F3F46;--su-mut:#71717A;--su-faint:#A1A1AA;
  --su-line:#E4E4E7;--su-line2:#D4D4D8;--su-red:#E5484D;--su-ok:#16A34A;
  --su-on:#FFFFFF;--su-ink-h:#27272A;--su-glass:rgba(255,255,255,.86);--su-hover:#F6F6F7;--su-border:rgba(10,10,10,.08);--su-border2:rgba(10,10,10,.14);--su-loud:#0A0A0A;
  --su-sh1:0 1px 2px rgba(10,10,10,.04),0 1px 1px rgba(10,10,10,.03);
  --su-sh2:0 2px 4px rgba(10,10,10,.04),0 12px 32px -8px rgba(10,10,10,.12);
  --su-shf:0 30px 80px -20px rgba(10,10,10,.18);
  --su-out:cubic-bezier(.16,1,.3,1);--su-ui:cubic-bezier(.2,.8,.2,1);
  --su-j:'Plus Jakarta Sans',system-ui,sans-serif;--su-i:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--su-m:'JetBrains Mono',ui-monospace,monospace;
}

/* ---------- base ---------- */
html.su-e body{font-family:var(--su-i) !important;color:var(--su-ink2);background:var(--su-bg) !important;-webkit-font-smoothing:antialiased;font-size:15px;letter-spacing:0}
html.su-e body .bg-gray{background:var(--su-bg) !important}
html.su-e h1,html.su-e h2,html.su-e h3,html.su-e h4,html.su-e h5,html.su-e h6,
html.su-e .h1,html.su-e .h2,html.su-e .h3,html.su-e .h4,html.su-e .h5,html.su-e .h6,html.su-e .page-title{font-family:var(--su-j) !important;color:var(--su-ink) !important;letter-spacing:-.02em;font-weight:700}
html.su-e a{color:var(--su-ink)}
html.su-e a:hover{color:var(--su-ink);opacity:.8}
html.su-e .text-muted{color:var(--su-mut) !important;opacity:1}
html.su-e ::selection{background:var(--su-ink);color:var(--su-on)}

/* ---------- header ---------- */
html.su-e header{position:sticky;top:0;z-index:1030}
html.su-e .header-top{background:var(--su-s) !important;border-bottom:1px solid var(--su-line);font-size:13px}
html.su-e .header-top .nav-link{color:var(--su-mut) !important;padding:.45rem .75rem}
html.su-e .header-middle,html.su-e .header-bottom,html.su-e .page-index header.navbar-shrink{background:var(--su-glass) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--su-line);box-shadow:none !important}
html.su-e .header-middle .container>nav{min-height:72px;display:flex;align-items:center}
html.su-e .navbar-brand img{max-height:46px;width:auto}
html.su-e .navbar-toggler{color:var(--su-ink) !important;border:1px solid var(--su-line) !important;border-radius:12px;width:44px;height:44px;align-items:center;justify-content:center;margin-right:10px}
@media (max-width:991px){html.su-e .navbar-toggler{display:inline-flex}}
html.su-e .navbar-mastermenu{background:var(--su-s);border:1px solid var(--su-line);border-radius:999px;padding:5px;box-shadow:var(--su-sh1);align-items:center;gap:2px}
html.su-e .navbar-mastermenu>.nav-item>.nav-link,
html.su-e .navbar-expand-lg .navbar-mastermenu .nav-link{color:var(--su-ink2) !important;font:500 14px var(--su-i) !important;height:38px;padding:0 16px !important;border-radius:999px;display:flex;align-items:center;gap:6px;background:transparent !important;transition:background .28s var(--su-out),color .28s var(--su-out)}
html.su-e .navbar-expand-lg .navbar-nav .nav-item .nav-link:not(.bg-secondary)::before{display:none !important}
html.su-e .navbar-mastermenu>.nav-item>.nav-link:hover{background:var(--su-bg) !important;color:var(--su-ink) !important;opacity:1}
html.su-e .navbar-mastermenu>.nav-item.active>.nav-link,
html.su-e .navbar-mastermenu>.nav-item>.nav-link.active{background:var(--su-ink) !important;color:var(--su-on) !important}
html.su-e .navbar-mastermenu .nav-item.login>div{padding-left:4px !important}
html.su-e .navbar-mastermenu .nav-item.login .nav-link.btn,
html.su-e .navbar-mastermenu .nav-link.bg-secondary{background:var(--su-ink) !important;color:var(--su-on) !important;font-weight:600 !important;padding:0 18px !important}
html.su-e .navbar-mastermenu .nav-item.login .nav-link.btn:hover{background:var(--su-ink-h) !important}
html.su-e .navbar-mastermenu .lg-icon{display:none}
html.su-e .navbar-mastermenu>.nav-item::after{display:none !important}
html.su-e .navbar-mastermenu>.nav-item{border:0 !important}
html.su-e .navbar-mastermenu .fa-chevron-down{font-size:11px;opacity:.6}
html.su-e .navbar-mastermenu .dropdown-menu{top:calc(100% + 10px) !important;min-width:210px}
/* invisible bridge over the 10px gap so a hover-opened menu doesn't close on the way down */
html.su-e .navbar-mastermenu .dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

/* dropdowns */
html.su-e .dropdown-menu{border:1px solid var(--su-border) !important;border-radius:16px !important;box-shadow:var(--su-sh2) !important;padding:6px !important;background:var(--su-s) !important;animation:suFade .18s ease-out}
html.su-e .dropdown-item{border-radius:10px;padding:9px 12px;font-size:14px;color:var(--su-ink2) !important;background:transparent !important}
html.su-e .dropdown-item:hover,html.su-e .dropdown-item:focus{background:var(--su-bg) !important;color:var(--su-ink) !important}

/* mobile menu sheet */
html.su-e .modal-menu .modal-content{background:var(--su-s) !important;border:0 !important;border-radius:0 24px 24px 0 !important;box-shadow:var(--su-shf) !important}
html.su-e .modal-menu .modal-header{background:var(--su-s) !important;border-bottom:1px solid var(--su-line) !important}
html.su-e .modal-menu .modal-header a,html.su-e .modal-menu .modal-header .navbar-brand,html.su-e .modal-menu .modal-header h3{color:var(--su-ink) !important}
html.su-e .modal-menu .modal-header .btn{height:44px;border:1px solid var(--su-line) !important;background:var(--su-s) !important;color:var(--su-ink) !important}
html.su-e .modal-menu .modal-header .btn.bg-primary{background:var(--su-ink) !important;border-color:var(--su-ink) !important;color:var(--su-on) !important}
html.su-e .modal-menu .modal-body{background:var(--su-s) !important;padding:8px !important}
html.su-e .modal-menu .nav-link,html.su-e .modal-menu .dropdown-item{color:var(--su-ink) !important;background:transparent !important;border:0 !important;border-radius:12px;font-weight:500}
html.su-e .modal-menu .nav-link:hover,html.su-e .modal-menu .dropdown-item:hover{background:var(--su-bg) !important}
html.su-e .modal-menu .nav-link::before,html.su-e .modal-menu .nav-link::after,html.su-e .modal-menu .nav-item::after{display:none !important}
html.su-e .modal-menu .dropdown-menu{position:static !important;transform:none !important;float:none;box-shadow:none !important;border:0 !important;background:transparent !important;animation:none !important;padding:0 0 0 12px !important;margin:0 !important}

/* ---------- page title band ---------- */
html.su-e .min-height>.bg-white.border-bottom{background:var(--su-s) !important;border-color:var(--su-line) !important}
html.su-e .page-title{font-size:28px;font-weight:700}
html.su-e .breadcrumb{background:transparent !important;padding:0;font-size:13px;color:var(--su-mut)}

/* ---------- surfaces ---------- */
html.su-e .card{background:var(--su-s) !important;border:1px solid var(--su-border) !important;border-radius:20px !important;box-shadow:var(--su-sh1) !important}
html.su-e .card-header,html.su-e .card-footer{background:transparent !important;border-color:var(--su-line) !important}
html.su-e .card-header:first-child{border-radius:20px 20px 0 0 !important}
html.su-e .bg-light{background:var(--su-s2) !important}
html.su-e .border,html.su-e .border-top,html.su-e .border-bottom,html.su-e .border-left,html.su-e .border-right{border-color:var(--su-line) !important}
html.su-e .shadow,html.su-e .shadow-sm{box-shadow:var(--su-sh1) !important}

/* ---------- buttons ---------- */
html.su-e .btn{border-radius:999px !important;font-family:var(--su-i) !important;font-weight:600 !important;letter-spacing:0;transition:background .18s var(--su-ui),color .18s var(--su-ui),box-shadow .18s,transform .12s var(--su-ui) !important}
html.su-e .btn:active{transform:scale(.98)}
html.su-e .btn-primary,html.su-e button.btn.btn-primary,html.su-e .bg-primary,html.su-e .btn-dark,html.su-e .btn-secondary,html.su-e .bg-secondary,
html.su-e .wizard .actions li a,html.su-e .btn-success,html.su-e .btn-info{background:var(--su-ink) !important;border-color:var(--su-ink) !important;color:var(--su-on) !important}
html.su-e .btn-primary:hover,html.su-e button.btn.btn-primary:hover,html.su-e .btn-dark:hover,html.su-e .btn-secondary:hover,html.su-e .btn-success:hover,html.su-e .btn-info:hover{background:var(--su-ink-h) !important;border-color:var(--su-ink-h) !important}
html.su-e .btn-light,html.su-e .btn-outline-primary,html.su-e .btn-outline-secondary,html.su-e .btn-outline-dark,html.su-e .btn-default,html.su-e .btn-newsletter{background:var(--su-s) !important;color:var(--su-ink) !important;border:1px solid var(--su-line) !important;box-shadow:none !important}
html.su-e .btn-light:hover,html.su-e .btn-outline-primary:hover,html.su-e .btn-outline-secondary:hover,html.su-e .btn-outline-dark:hover,html.su-e .btn-default:hover,html.su-e .btn-newsletter:hover{background:var(--su-s2) !important;border-color:var(--su-line2) !important}
html.su-e .btn-danger{background:var(--su-red) !important;border-color:var(--su-red) !important;color:var(--su-on) !important}
html.su-e .btn:focus,html.su-e .btn.focus{box-shadow:0 0 0 4px rgba(10,10,10,.10) !important}

/* ---------- forms ---------- */
html.su-e .form-control,html.su-e .custom-select,html.su-e select.form-control,html.su-e .chosen-container .chosen-single,html.su-e .chosen-container-multi .chosen-choices{border:1px solid var(--su-line) !important;border-radius:12px !important;background-color:var(--su-s) !important;color:var(--su-ink) !important;font-family:var(--su-i);font-size:15px;box-shadow:none !important;transition:border-color .15s,box-shadow .2s}
html.su-e input.form-control,html.su-e select.form-control,html.su-e .custom-select{min-height:46px}
html.su-e .form-control:focus,html.su-e .custom-select:focus{border-color:var(--su-line2) !important;box-shadow:0 0 0 4px rgba(10,10,10,.06) !important}
html.su-e .form-control::placeholder{color:var(--su-faint)}
html.su-e label,html.su-e .col-form-label{color:var(--su-ink);font-weight:600;font-size:14px}
html.su-e .input-group-text{background:var(--su-s2) !important;border:1px solid var(--su-line) !important;color:var(--su-mut) !important}
html.su-e .input-group>.input-group-prepend>.input-group-text{border-radius:12px 0 0 12px !important;border-right:0 !important}
html.su-e .input-group>.input-group-prepend+.form-control{border-radius:0 12px 12px 0 !important}
html.su-e .custom-checkbox .custom-control-input:checked~.custom-control-label::before,html.su-e .custom-radio .custom-control-input:checked~.custom-control-label::before{background:var(--su-ink) !important;border-color:var(--su-ink) !important}
html.su-e .chosen-container .chosen-results li.highlighted{background:var(--su-ink) !important;color:var(--su-on)}
html.su-e .chosen-container .chosen-drop{border-color:var(--su-line);border-radius:0 0 12px 12px;box-shadow:var(--su-sh2)}

/* ---------- tables ---------- */
html.su-e .table{color:var(--su-ink2);border-color:var(--su-line)}
html.su-e .table thead th{background:var(--su-s2) !important;color:var(--su-mut) !important;font:600 12px var(--su-i) !important;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--su-line) !important;border-top:0 !important}
html.su-e .table td,html.su-e .table th{border-color:var(--su-line) !important;vertical-align:middle}
html.su-e .table-striped tbody tr:nth-of-type(odd){background:var(--su-s2) !important}
html.su-e .table-hover tbody tr:hover,html.su-e .table tbody tr:hover{background:var(--su-hover) !important}

/* ---------- tabs / pills / badges / alerts ---------- */
html.su-e .nav-pills .nav-link,html.su-e .nav-tabs .nav-link{border-radius:999px !important;color:var(--su-ink2) !important;font-weight:500;border:0 !important;background:transparent !important}
html.su-e .nav-pills .nav-link.active,html.su-e .nav-pills .show>.nav-link,html.su-e .nav-tabs .nav-link.active,html.su-e ul.nav-pills.flex-nowrap .nav-link.active{background:var(--su-ink) !important;color:var(--su-on) !important}
html.su-e .nav-tabs:not(.nav-wizard){border-bottom:1px solid var(--su-line) !important;gap:4px;padding-bottom:6px}
/* registration step bars */
html.su-e .nav-wizard{border:0 !important;gap:6px;flex-wrap:nowrap}
html.su-e .nav-wizard .nav-item{flex:1}
html.su-e .nav-wizard .nav-link{background:var(--su-line) !important;border-radius:999px !important;padding:0 !important;height:5px}
html.su-e .nav-wizard .nav-item.checked .nav-link,html.su-e .nav-wizard .nav-link.active{background:var(--su-ink) !important}
html.su-e .badge{border-radius:999px;font-weight:600;padding:.4em .7em}
html.su-e .badge-primary,html.su-e .badge-secondary,html.su-e .badge-dark{background:var(--su-ink) !important;color:var(--su-on)}
html.su-e .alert{border-radius:14px !important;border:1px solid var(--su-line) !important}
html.su-e .page-link{color:var(--su-ink) !important;border-color:var(--su-line) !important}
html.su-e .page-item.active .page-link{background:var(--su-ink) !important;border-color:var(--su-ink) !important;color:var(--su-on) !important}

/* ---------- modals ---------- */
html.su-e .modal-backdrop.show{opacity:.35;background:#0A0A0A}
html.su-e .modal:not(.modal-menu) .modal-content{background:var(--su-s) !important;color:var(--su-ink2) !important;border:1px solid var(--su-border) !important;border-radius:24px !important;box-shadow:var(--su-shf) !important;overflow:hidden}
html.su-e .modal:not(.modal-menu) .modal-body,html.su-e .modal:not(.modal-menu) .modal-body .card,html.su-e .modal:not(.modal-menu) .login-panel,
html.su-e .modal:not(.modal-menu) .modal-body label,html.su-e .modal:not(.modal-menu) .custom-control-label,html.su-e .modal:not(.modal-menu) .modal-body .cursor-pointer{color:var(--su-ink2) !important}
html.su-e #login .modal-body .cursor-pointer{text-decoration:underline;text-underline-offset:3px}
html.su-e .modal:not(.modal-menu) [data-toggle="tooltip"],html.su-e .modal:not(.modal-menu) [data-toggle="tooltip"] i{color:var(--su-mut) !important}
@media (max-width:767px){html.su-e .modal .close .d-md-block{display:none !important}}
@media (min-width:768px){html.su-e .modal .close .d-md-none{display:none !important}}
html.su-e .modal-header{background:var(--su-s) !important;border-bottom:1px solid var(--su-line) !important;padding:18px 22px}
html.su-e .modal-header .modal-title,html.su-e .modal-header h5{color:var(--su-ink) !important;font-family:var(--su-j);font-weight:700}
html.su-e .modal-header .close{color:var(--su-ink) !important;opacity:.6;text-shadow:none}
html.su-e .modal.show .modal-dialog{animation:suSheet .45s var(--su-out) both}
html.su-e .modal-body-login .card{border:0 !important;box-shadow:none !important}
html.su-e #login .page-title{font-size:22px}

/* ---------- steps wizard ---------- */
html.su-e .steps ul li.first a,html.su-e .steps ul li.checked a,html.su-e .steps ul li.current a{background:var(--su-ink) !important;color:var(--su-on) !important;border-radius:999px}

/* ---------- footer ---------- */
html.su-e .footer-top{background:var(--su-s) !important;border-top:1px solid var(--su-line) !important}
html.su-e .footer-top .link-heading{font-family:var(--su-j) !important;color:var(--su-ink) !important;font-size:15px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:-.01em}
html.su-e .footer-top .link-heading:after{display:none !important}
html.su-e .footer-top .footer-navbar .nav-link{color:var(--su-mut) !important;padding:.3rem 0;font-size:14px}
html.su-e .footer-top .social-icons .nav-link{padding:.4rem .6rem}
html.su-e .footer-top .nav-link:hover{color:var(--su-ink) !important}
html.su-e .footer-bottom{background:var(--su-ink) !important;color:#A1A1AA}
html.su-e footer.d-lg-none{background:var(--su-s) !important}

/* cookie bar */
html.su-e .cookie-setting,html.su-e #COOKIESETT{border-radius:20px !important}
html.su-e .cn{font-family:var(--su-i) !important}

/* ---------- motion ---------- */
@keyframes suFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes suSheet{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
/* No animation on page wrappers: a transform/opacity animation there turns position:fixed pop-ups
   (e.g. #modal-order on the order pages, opened with jQuery .show()) into page-relative boxes = off screen. */
@keyframes suFade{from{opacity:0}to{opacity:1}}

/* ================= HOMEPAGE (su-e-home.tpl) ================= */
html.su-e .sue-home{overflow-x:clip;color:var(--su-ink);font-family:var(--su-i);font-size:15px;line-height:1.6;padding-bottom:24px}
html.su-e .sue-home *{box-sizing:border-box}
.sue-wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.sue-sec{margin-bottom:72px}
.sue-sr{position:absolute !important;left:-9999px}
.sue-mono{font-family:var(--su-m);font-variant-numeric:tabular-nums}
.sue-red{color:var(--su-red)}.sue-faint{color:var(--su-faint)}
.sue-eb{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--su-mut)}
html.su-e .sue-h1{font-family:var(--su-j) !important;font-size:68px;line-height:1.02;letter-spacing:-.035em;font-weight:800;margin:22px 0 18px;color:var(--su-ink) !important}
html.su-e .sue-h1 .sue-faint{color:var(--su-faint) !important}
html.su-e .sue-h2{font-family:var(--su-j) !important;font-size:38px;line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:6px 0 0}
.sue-mb{margin-bottom:24px !important}
.sue-h3{font-family:var(--su-j);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--su-ink);margin:16px 0 6px}
.sue-big{font-size:24px;letter-spacing:-.02em;margin:6px 0 20px}
.sue-p{color:var(--su-mut)}
.sue-lead{font-size:18px;color:var(--su-ink2);margin:0 0 28px;max-width:520px}

/* buttons */
html.su-e .sue-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--su-ink);color:var(--su-on) !important;font:600 15px var(--su-i);cursor:pointer;text-decoration:none !important;white-space:nowrap;transition:background .18s var(--su-ui),transform .12s var(--su-ui)}
html.su-e .sue-btn:hover{background:var(--su-ink-h);color:var(--su-on) !important;opacity:1}
html.su-e .sue-btn:active{transform:scale(.98)}
.sue-ar{transition:transform .18s var(--su-ui)}.sue-btn:hover .sue-ar{transform:translateX(3px)}
html.su-e .sue-btn2{background:var(--su-s);color:var(--su-ink) !important;box-shadow:inset 0 0 0 1px var(--su-line)}
html.su-e .sue-btn2:hover{background:var(--su-s2);color:var(--su-ink) !important}
html.su-e .sue-btnw{background:var(--su-s);color:var(--su-ink) !important;position:relative}
html.su-e .sue-btnw:hover{background:var(--su-bg);color:var(--su-ink) !important}
html.su-e .sue-sm{height:36px;padding:0 16px;font-size:14px}

/* hero */
.sue-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-top:64px;padding-bottom:40px}
.sue-live{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 14px;border:1px solid var(--su-line);border-radius:999px;font-size:13px;font-weight:500;color:var(--su-ink2);background:var(--su-s);box-shadow:var(--su-sh1)}
.sue-dot{width:7px;height:7px;border-radius:50%;background:var(--su-red);animation:suPulse 2s ease-in-out infinite;flex:none}
.sue-search{display:flex;align-items:center;gap:8px;height:60px;padding:0 6px 0 18px;border:1px solid var(--su-line);border-radius:999px;background:var(--su-s);box-shadow:var(--su-sh2);max-width:600px;margin:0;transition:box-shadow .2s,border-color .2s}
.sue-search:focus-within{box-shadow:0 0 0 4px rgba(10,10,10,.06),var(--su-sh2);border-color:var(--su-line2)}
html.su-e .sue-search input{flex:1;min-width:0;border:0 !important;outline:0;background:transparent !important;font:400 16px var(--su-i);color:var(--su-ink);box-shadow:none !important;height:auto;padding:0}
.sue-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.sue-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sue-chip{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--su-line);background:var(--su-s);font:500 13px var(--su-i);color:var(--su-ink2);cursor:pointer;transition:background .15s,border-color .15s}
.sue-chip:hover,.sue-chip.on{border-color:var(--su-line2);background:var(--su-s2)}
.sue-chip.on{background:var(--su-ink);color:var(--su-on);border-color:var(--su-ink)}

.sue-hero-art{position:relative;height:560px;display:flex;align-items:center;justify-content:center}
.sue-blob{position:absolute;border-radius:50%;animation:suDrift 14s ease-in-out infinite alternate}
.sue-blob1{width:380px;height:380px;background:#E4E4E7;filter:blur(80px);left:0;top:40px}
.sue-blob2{width:320px;height:320px;background:rgba(229,72,77,.22);filter:blur(90px);right:0;bottom:30px;animation-delay:-7s}
.sue-phone{position:relative;width:270px;height:540px;border-radius:44px;background:var(--su-ink);padding:10px;box-shadow:0 40px 80px -20px rgba(10,10,10,.35);animation:suFloat 6s ease-in-out infinite}
.sue-screen{width:100%;height:100%;border-radius:35px;background:var(--su-s2);overflow:hidden;position:relative}
.sue-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:999px;background:var(--su-ink)}
.sue-scr{padding:56px 16px 16px;display:flex;flex-direction:column;gap:12px}
.sue-scr .sue-eb{font-size:11px}
.sue-ocard{background:var(--su-s);border:1px solid var(--su-line);border-radius:18px;padding:16px;box-shadow:var(--su-sh1)}
.sue-oname{font-weight:600;font-size:14px;line-height:1.35}
.sue-omuted{font-size:12px;color:var(--su-mut);margin-top:6px}
.sue-orow{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.sue-orow .sue-omuted{margin:0;font-size:13px}.sue-orow .sue-mono{font-weight:600}
.sue-bar{height:6px;border-radius:999px;background:var(--su-line);margin:16px 0 12px;overflow:hidden}
.sue-barf{height:100%;border-radius:999px;background:var(--su-ink);animation:suBar 10.5s var(--su-out) infinite}
.sue-states{position:relative;height:22px;font-size:13px;font-weight:600}
.sue-st{position:absolute;inset:0;display:flex;align-items:center;gap:8px;opacity:0}
.sue-st i{width:7px;height:7px;border-radius:50%;display:inline-block}
.sue-i1{background:#D4D4D8}.sue-i2{background:#F59E0B}.sue-i3{background:#16A34A}
.sue-st1{color:var(--su-mut);animation:suS1 10.5s infinite}.sue-st2{color:var(--su-ink2);animation:suS2 10.5s infinite}.sue-st3{color:#16A34A;animation:suS3 10.5s infinite}
.sue-oagain{background:var(--su-ink);color:var(--su-on);border-radius:999px;height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.sue-float{position:absolute;background:var(--su-s);border:1px solid var(--su-border);border-radius:14px;box-shadow:var(--su-sh2);padding:10px 14px;font-size:13px;color:var(--su-mut);display:flex;gap:8px;align-items:center}
.sue-float img{height:24px;width:auto}
.sue-float .sue-mono{color:var(--su-ink);font-weight:600}
.sue-float1{left:4px;bottom:86px}.sue-float2{right:10px;top:70px}

/* stats */
.sue-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--su-line);border-radius:20px;background:var(--su-s);box-shadow:var(--su-sh1)}
.sue-stats>div{padding:24px 28px}
.sue-stats>div+div{border-left:1px solid var(--su-line)}
.sue-stat{font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--su-ink)}
.sue-statl{color:var(--su-mut);font-size:14px}

/* services */
.sue-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.sue-seg{display:flex;gap:2px;background:var(--su-s2);border:1px solid var(--su-line);border-radius:999px;padding:4px}
.sue-segb{height:38px;padding:0 16px;border-radius:999px;border:0;background:transparent;font:500 14px var(--su-i);color:var(--su-ink2);cursor:pointer;transition:background .28s var(--su-out),color .28s var(--su-out)}
.sue-segb .sue-mono{opacity:.6;font-size:12px}
.sue-segb.on{background:var(--su-ink);color:var(--su-on);box-shadow:0 1px 2px rgba(10,10,10,.2)}
.sue-svc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px;align-items:start}
.sue-loud{position:relative;overflow:hidden;background:var(--su-ink);color:var(--su-on);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:22px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,var(--su-shf);transition:transform .3s var(--su-ui)}
.sue-loud:hover{transform:translateY(-2px)}
.sue-glow{position:absolute;inset:-40px;background:radial-gradient(circle at 85% 0%,rgba(229,72,77,.38),transparent 55%);transition:transform .6s var(--su-out);pointer-events:none}
.sue-loud:hover .sue-glow{transform:translate(-12px,8px)}
.sue-loud>*{position:relative}
.sue-loudtag{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:rgba(229,72,77,.16);color:#FFB4B6;font-size:12px;font-weight:600}
.sue-loudt{font-family:var(--su-j);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.sue-loudp{margin-top:14px;display:flex;align-items:baseline;gap:8px;color:var(--su-faint)}
.sue-loudp .sue-mono{font-size:40px;font-weight:600;letter-spacing:-.03em;color:var(--su-on)}
.sue-loudl{display:flex;flex-direction:column;gap:10px;color:#D4D4D8;font-size:14px}
.sue-list{border:1px solid var(--su-line);border-radius:20px;overflow:hidden;background:var(--su-s);box-shadow:var(--su-sh1)}
.sue-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--su-line);transition:background .15s}
.sue-row:hover{background:var(--su-s2)}
.sue-row.sue-hide{display:none}
.sue-ico{width:36px;height:36px;border-radius:10px;background:var(--su-bg);border:1px solid var(--su-line);display:flex;align-items:center;justify-content:center;font:600 12px var(--su-i);color:var(--su-ink2)}
.sue-rname{font-weight:600;font-size:15px;line-height:1.35;color:var(--su-ink)}
.sue-rtype{font-size:13px;color:var(--su-mut)}
.sue-time{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--su-s2);border:1px solid var(--su-line);font-size:12px;color:var(--su-ink2);white-space:nowrap}
.sue-time::before{content:"";width:6px;height:6px;border-radius:50%;background:#A1A1AA}
.sue-price{font-size:16px;font-weight:600;text-align:right;min-width:64px;color:var(--su-ink)}
.sue-empty{display:none;padding:32px;text-align:center;color:var(--su-mut)}
.sue-empty.on{display:block}
.sue-empty a{font-weight:600;text-decoration:underline}
.sue-all{display:flex;flex-wrap:wrap;gap:8px 24px;padding:16px 18px;background:var(--su-s2);font-weight:600;font-size:14px}
html.su-e .sue-all a{color:var(--su-ink)}

/* cards + misc */
.sue-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sue-card{background:var(--su-s);border:1px solid var(--su-border);border-radius:20px;box-shadow:var(--su-sh1);padding:26px;transition:transform .22s var(--su-ui),box-shadow .22s var(--su-ui),border-color .22s}
.sue-card:hover{transform:translateY(-2px);box-shadow:var(--su-sh2);border-color:var(--su-border2)}
.sue-pad{padding:32px}
.sue-col{display:flex;flex-direction:column}
.sue-col .sue-big{margin-bottom:16px}
.sue-num{width:36px;height:36px;border-radius:10px;background:var(--su-ink);color:var(--su-on);display:flex;align-items:center;justify-content:center;font-size:14px}
.sue-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sue-pay{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sue-pay span{height:56px;border:1px solid var(--su-line);border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--su-s)}
.sue-pay img{height:34px;width:auto;max-width:86%;object-fit:contain}
.sue-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.sue-res{background:var(--su-s2);border:1px solid var(--su-line);border-radius:24px;padding:36px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.sue-res .sue-big{margin:0 0 4px}
.sue-trust{text-align:center;margin-bottom:24px}
html.su-e .sue-trust a{color:var(--su-mut);font-size:14px;font-weight:500}

/* motion */
@keyframes suUp{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes suPulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}70%,100%{box-shadow:0 0 0 7px rgba(229,72,77,0)}}
@keyframes suFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(-4deg)}}
@keyframes suDrift{from{transform:translate(-20px,10px)}to{transform:translate(20px,-10px)}}
@keyframes suS1{0%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes suS2{0%,30%{opacity:0}33%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes suS3{0%,63%{opacity:0}66%,97%{opacity:1}100%{opacity:0}}
@keyframes suBar{0%{width:4%}33%{width:38%}66%{width:72%}70%,97%{width:100%}100%{width:4%}}
.sue-u1{animation:suUp .8s var(--su-out) both}.sue-u2{animation:suUp .8s .07s var(--su-out) both}.sue-u3{animation:suUp .8s .14s var(--su-out) both}
.sue-u4{animation:suUp .8s .21s var(--su-out) both}.sue-u5{animation:suUp .8s .28s var(--su-out) both}.sue-u6{animation:suUp .9s .4s var(--su-out) both}
.sue-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--su-out),transform .6s var(--su-out)}
.sue-reveal.in{opacity:1;transform:none}

@media (max-width:991px){
  .sue-hero{grid-template-columns:1fr;padding-top:40px}
  .sue-hero-art{height:440px}
  .sue-phone{animation:none;transform:scale(.82) rotate(-4deg)}
  .sue-svc{grid-template-columns:1fr}
  .sue-two{grid-template-columns:1fr}
  .sue-steps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sue-wrap{padding-left:16px;padding-right:16px}
  .sue-sec{margin-bottom:48px}
  html.su-e .sue-h1{font-size:38px}
  html.su-e .sue-h2{font-size:28px}
  .sue-lead{font-size:16px}
  .sue-search{height:54px}
  .sue-hero-art{height:400px}
  .sue-float{display:none}
  .sue-stats{grid-template-columns:1fr 1fr}
  .sue-stats>div+div{border-left:0}
  .sue-stats>div:nth-child(n+3){border-top:1px solid var(--su-line)}
  .sue-stats>div:nth-child(2n){border-left:1px solid var(--su-line)}
  .sue-stats>div{padding:18px}
  .sue-stat{font-size:24px}
  .sue-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px 16px}
  .sue-ico,.sue-time{display:none}
  .sue-rn{grid-column:1/2}
  .sue-price{grid-column:2/3;grid-row:1/2}
  .sue-row .sue-btn{grid-column:2/3;grid-row:2/3;justify-self:end;height:40px}
  .sue-seg{width:100%}.sue-segb{flex:1;padding:0 8px}
  .sue-pay{grid-template-columns:1fr 1fr}
  .sue-loud,.sue-pad,.sue-res{padding:24px}
}

@media (max-width:991px){
  html.su-e .header-middle .container>nav{min-height:64px}
  html.su-e .page-title{font-size:22px}
}
@media (prefers-reduced-motion:reduce){html.su-e *{animation:none !important;transition:none !important}}

/* ================= v2: dark mode + hidden-text fixes ================= */
/* Dark tokens: on when the customer picked Dark in theme settings (dark.css present; class set in header.tpl). */
html.su-e.su-e-dark{color-scheme:dark;
  --su-bg:#09090B;--su-s:#111113;--su-s2:#18181B;--su-ink:#FAFAFA;--su-ink2:#D4D4D8;--su-mut:#A1A1AA;--su-faint:#71717A;
  --su-line:#27272A;--su-line2:#3F3F46;--su-on:#0A0A0A;--su-ink-h:#E4E4E7;--su-glass:rgba(17,17,19,.84);--su-hover:#1C1C1F;
  --su-border:rgba(255,255,255,.08);--su-border2:rgba(255,255,255,.16);--su-loud:#18181B;
  --su-sh1:0 1px 2px rgba(0,0,0,.4);--su-sh2:0 2px 4px rgba(0,0,0,.3),0 12px 32px -8px rgba(0,0,0,.6);--su-shf:0 30px 80px -20px rgba(0,0,0,.7)}
html.su-e.su-e-dark .bg-white{background:var(--su-s) !important}
html.su-e.su-e-dark .text-dark,html.su-e.su-e-dark .text-black{color:var(--su-ink) !important}
html.su-e.su-e-dark .sue-blob1{background:#27272A}
html.su-e.su-e-dark .sue-pay span,html.su-e.su-e-dark .sue-float1{background:#FAFAFA}
html.su-e.su-e-dark .sue-phone{box-shadow:0 0 0 1px #3F3F46,0 40px 80px -20px rgba(0,0,0,.7)}

/* Always-dark pieces (stay dark in both modes) */
html.su-e .sue-loud{background:var(--su-loud);color:#FAFAFA;border:1px solid var(--su-border)}
html.su-e .sue-loudp .sue-mono{color:#FAFAFA}
html.su-e .sue-btnw{background:#FFFFFF;color:#0A0A0A !important}
html.su-e .sue-btnw:hover{background:#E4E4E7;color:#0A0A0A !important}
html.su-e .sue-phone,html.su-e .sue-notch{background:#0A0A0A}
html.su-e .footer-bottom{background:var(--su-loud) !important}

/* Stock theme forces WHITE text inside modals ("SUPER STRONG DARK TEXT FIX") and the order details panel.
   E surfaces are light, so re-colour text - but leave buttons, badges, alerts and coloured status labels alone. */
html.su-e .modal:not(.modal-menu) .modal-content :is(p,li,ol,ul,strong,span,div,label,small,b,td,th,dt,dd,a):not(.btn,.badge,.alert,[class*="text-"]:not(.text-white),[class*="status"],.bg-primary,.bg-secondary,.bg-success,.bg-danger,.bg-warning,.bg-info,.bg-dark,.btn *,.badge *,.alert *,:is(.bg-primary,.bg-secondary,.bg-success,.bg-danger,.bg-warning,.bg-info,.bg-dark) *,[class*="status"] *),
html.su-e :is(#serviceDetails2,.card-servicedetail) :is(p,li,ol,ul,strong,span,div,label,small,b,td,th,dt,dd):not(.btn,.badge,.alert,[class*="text-"]:not(.text-white),[class*="status"],.bg-primary,.bg-secondary,.bg-success,.bg-danger,.bg-warning,.bg-info,.bg-dark,.btn *,.badge *,.alert *,:is(.bg-primary,.bg-secondary,.bg-success,.bg-danger,.bg-warning,.bg-info,.bg-dark) *,[class*="status"] *){color:var(--su-ink2) !important}
html.su-e .modal:not(.modal-menu) .modal-content :is(h1,h2,h3,h4,h5,h6),html.su-e :is(#serviceDetails2,.card-servicedetail) :is(h1,h2,h3,h4,h5,h6){color:var(--su-ink) !important}
html.su-e .modal:not(.modal-menu) .modal-body{background:transparent !important}
html.su-e .modal:not(.modal-menu) .modal-content .text-muted{color:var(--su-mut) !important}

/* Dashboard wallet card (.col-left .card): stock = navy + white text. E = the dark "loud" card.
   The order pop-up's field column is ALSO .col-left (.card-place-retail-order) - keep it out. */
html.su-e .col-left .card:not(.card-place-retail-order){background:var(--su-loud) !important;color:#FAFAFA !important;border:1px solid var(--su-border) !important;box-shadow:var(--su-shf) !important}
html.su-e .col-left .card:not(.card-place-retail-order) :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,p,span,div,strong,label,a:not(.btn)){color:#FAFAFA !important}
html.su-e .col-left .card:not(.card-place-retail-order) .text-muted{color:#A1A1AA !important}
html.su-e .col-left .card:not(.card-place-retail-order) .btn:not(.btn-primary):not(.bg-primary){background:#FFFFFF !important;color:#0A0A0A !important;border-color:#FFFFFF !important}

/* Logged-in profile / reseller menus in the header (stock = white text for a navy bar) */
html.su-e .header-middle .navbar-nav .nav-link:not(.btn):not(.bg-secondary){color:var(--su-ink2) !important}
html.su-e .header-middle .navbar-nav .profile>div>div>a{background:var(--su-s2) !important;border:1px solid var(--su-line) !important;color:var(--su-ink) !important}
html.su-e .header-middle .navbar-nav .profile>div>div>a *{color:inherit !important}
html.su-e .header-top .dropdown-menu h6{color:var(--su-ink) !important}

/* Transparent / text buttons default to white text in stock */
html.su-e .btn:is(.bg-transparent,.btn-link,.btn-text){color:var(--su-ink) !important;background:transparent !important}

/* Lists + selects that dark.css paints navy */
html.su-e .list-group-item{background:var(--su-s) !important;color:var(--su-ink2) !important;border-color:var(--su-line) !important}
html.su-e .chosen-container .chosen-drop,html.su-e .chosen-container .chosen-results li{background:var(--su-s) !important;color:var(--su-ink2) !important;border-color:var(--su-line) !important}
html.su-e .chosen-container .chosen-results li.highlighted{background:var(--su-ink) !important;color:var(--su-on) !important}
html.su-e .card-product,html.su-e .card-product .product-info{background:var(--su-s) !important}
html.su-e .card-product .service-name{color:var(--su-ink) !important}
html.su-e .dropdown-menu{color:var(--su-ink2) !important}
html.su-e .card{color:var(--su-ink2)}

/* ---------- v9 fixes from the logged-in page audit (2026-10-20) ---------- */
/* Pagination: long page lists pushed phones 14px sideways (orders, statement, mail). */
html.su-e .pagination{flex-wrap:wrap;row-gap:4px}
/* Order pop-up: the row's gutters overflowed #serviceDetails2 by 12px -> stray sideways scrollbar. */
html.su-e #serviceDetails2{overflow-x:hidden}
/* "Want to use frequently" sits on a fixed yellow box (inline style) - text must stay dark in both modes. */
html.su-e #serviceDetails2 #frequentlyuse + label[for="frequentlyuse"],html.su-e label[for="frequentlyuse"]{color:#0A0A0A !important}
/* Dashboard quick actions + app buttons: stock = translucent navy / indigo, washed out on white. */
html.su-e .quick-action-btn{background:var(--su-ink) !important;border-color:var(--su-ink) !important}
html.su-e .quick-action-btn,html.su-e .quick-action-btn *{color:var(--su-on) !important}
html.su-e.su-e-dark .quick-action-btn{background:var(--su-s2) !important;border:1px solid var(--su-border2) !important}
html.su-e.su-e-dark .quick-action-btn,html.su-e.su-e-dark .quick-action-btn *{color:var(--su-ink) !important}
html.su-e .aftercounter .btn{background:var(--su-ink) !important;color:var(--su-on) !important;border-color:var(--su-ink) !important}

/* Wallet card "Buy Credit" is .btn-primary: black-on-black in light mode. Same white pill as dark. */
html.su-e .col-left .card:not(.card-place-retail-order) .btn:is(.btn-primary,.bg-primary),html.su-e .col-left .card:not(.card-place-retail-order) .btn:is(.btn-primary,.bg-primary) *{background:#FFFFFF !important;color:#0A0A0A !important;border-color:#FFFFFF !important}
html.su-e .col-left .card:not(.card-place-retail-order) .btn:is(.btn-primary,.bg-primary) *{background:transparent !important}