/* =====================================================================
   Eramhost Modern — WHMCS (Twenty-One child) override
   Matches the eramhost.com WordPress theme: cyan #00c2e5 -> blue #1f6fd6,
   Vazirmatn font, light & premium, navy footer. RTL handled by WHMCS.
   ===================================================================== */

@font-face{
  font-family:'Vazirmatn';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/Vazirmatn[wght].woff2") format("woff2-variations");
}

:root{
  --eram-cyan:#1ac8ec;
  --eram-blue:#2f86e6;
  --eram-blue-700:#2f86e6;
  --eram-ink:#0b1f3a;
  --eram-line:#e4ebf3;
  --eram-soft:#f4f8fc;
  --eram-grad:linear-gradient(120deg,#00d4f0 0%,#2f7ef6 55%,#7b5cf0 100%);
  --eram-grad-d:linear-gradient(160deg,#2f86e6 0%,#1a4f99 55%,#0b1f3a 100%);
}

/* remove link underlines site-wide (per request) */
a,a:hover,a:focus,.nav-link,.footer a,.master-breadcrumb a{text-decoration:none !important}

/* domain search bar reads LEFT-TO-RIGHT (www.|name|.ir) — scoped to the bar ONLY
   so it doesn't flip the radios/form around it */
.domains-row{direction:ltr !important}

/* RTL radios & checkboxes: control on the RIGHT, text right-aligned (Persian) */
.domain-selection-options .option,.domain-selection-options label,
.custom-control,.form-check,label.radio-inline,label.checkbox-inline{direction:rtl !important;text-align:right}
.domain-selection-options label{display:flex;align-items:center;gap:8px;flex-direction:row}
.domain-selection-options label input[type=radio],.domain-selection-options label input[type=checkbox]{margin:0 0 0 4px;order:-1}
/* Bootstrap-4 custom-control: move the box to the right edge */
.custom-control{padding-right:1.6rem !important;padding-left:0 !important}
.custom-control-label::before,.custom-control-label::after{right:-1.6rem !important;left:auto !important}
/* generic checkbox/radio + label rows (terms acceptance etc.) */
.checkbox label,.radio label,.form-group .form-check{padding-right:0}
input[type=checkbox]+label,input[type=radio]+label{margin-right:6px}
/* phone field (intl-tel-input): NATIVE plugin layout (unbroken), number digits LTR + branded dropdown.
   (Forcing the flag to the left broke this old v12 plugin's dial-code rendering, so we keep native.) */
.intl-tel-input,.iti{width:100% !important}
.intl-tel-input input,.intl-tel-input input[type=tel],.iti input,input[type=tel],.field-phonenumber input{direction:ltr !important;text-align:right !important}
.intl-tel-input .selected-flag,.iti .selected-flag{background:var(--eram-soft) !important}
.intl-tel-input .country-list.hide,.country-list.hide{display:none !important}
/* let the open country dropdown ESCAPE the card's overflow:hidden (otherwise it's clipped/forces a
   scrollbar). Scoped to cards that actually contain a phone field; dropdown floats above siblings. */
.card:has(.intl-tel-input.allow-dropdown),
.panel:has(.intl-tel-input.allow-dropdown),
.form-group:has(.intl-tel-input),
.intl-tel-input.allow-dropdown{overflow:visible !important}
/* lift the phone card above sibling cards so its open dropdown isn't covered by the next section */
.card:has(.intl-tel-input.allow-dropdown.expanded),.panel:has(.intl-tel-input.allow-dropdown.expanded),
.card:has(.country-list:not(.hide)),.panel:has(.country-list:not(.hide)),
.card:has(.intl-tel-input.allow-dropdown),.panel:has(.intl-tel-input.allow-dropdown){position:relative;z-index:30}
.intl-tel-input .country-list,.country-list{z-index:1060 !important}
/* branded country dropdown — premium LTR picker: [flag] [name] ........... [+code] */
.intl-tel-input .country-list,.country-list{
  margin-top:8px;padding:7px;border:1px solid var(--eram-line) !important;border-radius:14px !important;
  box-shadow:0 24px 54px -22px rgba(11,31,58,.42) !important;
  max-height:min(60vh,420px) !important;background:#fff;
  direction:ltr !important;text-align:left !important;overflow-x:hidden;overflow-y:auto !important;
  scrollbar-width:thin;scrollbar-color:#c3d2e3 transparent}
/* clearly-visible branded scrollbar so users know the list scrolls (246 countries) */
.intl-tel-input .country-list::-webkit-scrollbar,.country-list::-webkit-scrollbar{width:11px}
.intl-tel-input .country-list::-webkit-scrollbar-track,.country-list::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.intl-tel-input .country-list::-webkit-scrollbar-thumb,.country-list::-webkit-scrollbar-thumb{
  background:#c9d6e6;border-radius:9px;border:3px solid #fff;min-height:40px}
.intl-tel-input .country-list::-webkit-scrollbar-thumb:hover,.country-list::-webkit-scrollbar-thumb:hover{background:var(--eram-blue)}
.intl-tel-input .country-list .country,.country-list .country{
  display:flex !important;align-items:center;gap:11px;
  border-radius:10px;padding:9px 13px;text-align:left !important;
  transition:background .15s ease,transform .15s ease}
.intl-tel-input .country-list .flag-box,.country-list .flag-box{flex:0 0 auto;display:inline-flex}
.intl-tel-input .country-list .country .country-name,.country-list .country .country-name{
  flex:1 1 auto;color:var(--eram-ink)}
.intl-tel-input .country-list .country .dial-code,.country-list .country .dial-code{
  margin-left:auto;color:var(--eram-blue) !important;font-weight:700;font-feature-settings:"tnum"}
.intl-tel-input .country-list .country:hover,.country-list .country:hover{
  background:var(--eram-soft) !important;transform:translateX(3px)}
.intl-tel-input .country-list .country.highlight,.country-list .country.highlight{
  background:linear-gradient(90deg,rgba(26,200,236,.12),rgba(47,134,230,.05)) !important}
.intl-tel-input .country-list .country.active,.country-list .country.active{
  background:linear-gradient(90deg,rgba(26,200,236,.18),rgba(47,134,230,.06)) !important;
  box-shadow:inset 3px 0 0 var(--eram-cyan);transform:none}
.intl-tel-input .country-list .country.active .country-name,
.country-list .country.active .country-name{font-weight:800}
.intl-tel-input .country-list .divider,.country-list .divider{border-bottom:1px solid var(--eram-line);margin:7px 6px}

/* header knowledge-base search: clean connected pill */
.navbar .input-group.search,.navbar-search .input-group{display:flex !important;border:1.5px solid var(--eram-line) !important;border-radius:999px !important;overflow:hidden !important;background:var(--eram-soft) !important;align-items:stretch}
.navbar .input-group.search .form-control{border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;padding-inline:18px}
.navbar .input-group.search .btn,.navbar .input-group.search button,.navbar .input-group.search .input-group-text{border-radius:0 !important;background:var(--eram-grad) !important;color:#fff !important;border:0 !important;padding-inline:18px !important}

/* branded native checkboxes & radios */
input[type=checkbox],input[type=radio],input.form-check-input{
  -webkit-appearance:none !important;appearance:none !important;width:19px !important;height:19px !important;
  flex:none;cursor:pointer;box-sizing:border-box !important;
  border:1.6px solid #c4d2e3;background:#fff;position:relative !important;vertical-align:-4px;margin:0;
  transition:border-color .15s,background .15s}
input[type=checkbox]{border-radius:6px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked{border-color:transparent}
input[type=checkbox]:checked{background:var(--eram-grad)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:50%;top:46%;width:6px;height:11px;border:solid #fff;border-width:0 2.6px 2.6px 0;transform:translate(-50%,-50%) rotate(45deg)}
input[type=radio]:checked{border:1.6px solid var(--eram-cyan)}
input[type=radio]:checked::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;background:var(--eram-grad)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,194,229,.2)}

/* ====================================================================
   Polish pass: carets, hover, buttons, toolbars, tables, frames
   ==================================================================== */

/* panel collapse caret: eram-jalali.js rotates it to match state (up when OPEN, down when collapsed).
   No forced rotation here (default = chevron-up = open look); JS adds rotate(180deg) when collapsed. */
.card-minimise,.panel-minimise{transition:transform .25s ease;color:var(--eram-blue) !important;opacity:.7}
.card-minimise:hover,.panel-minimise:hover{opacity:1}

/* dashboard tile hover: subtle (was too big) */
.tiles .tile:hover{transform:translateY(-3px)}
.tiles .tile:hover > i,.tiles .tile:hover .fas,.tiles .tile:hover .far{transform:none !important}

/* segmented / toggle button groups (ثبت نام / انتقال) */
.btn-group{border-radius:11px;overflow:hidden;box-shadow:0 8px 20px -14px rgba(11,31,58,.3)}
.btn-group > .btn,.btn-group > .btn-block{border-radius:0 !important;border:0 !important;font-weight:700;padding:10px 24px;box-shadow:none !important}
.btn-group > .btn:not(.active):not(.btn-primary):not(.btn-info):not(.btn-success){background:var(--eram-soft) !important;color:var(--eram-ink) !important}
.btn-group > .btn.active,.btn-group > .btn.btn-primary,.btn-group > .btn.btn-info,.btn-group > .btn.btn-success{background:var(--eram-grad) !important;color:#fff !important}
.btn-group > .btn:hover{filter:brightness(1.03)}

/* Split-button dropdowns (e.g. «ورود به cPanel ▾» on the services list): the menu is position:absolute
   and must escape its containers. The rounded btn-group used overflow:hidden which CLIPPED the open menu,
   so the «ورود به وب‌میل» item was invisible. For groups that contain a dropdown, switch to overflow:visible
   and round the outer ends via the child corners instead (segmented toolbars keep overflow:hidden untouched). */
.btn-group:has(.dropdown-toggle){overflow:visible}
.btn-group:has(.dropdown-toggle) > .btn:first-child{border-start-start-radius:11px !important;border-end-start-radius:11px !important}
.btn-group:has(.dropdown-toggle) .dropdown-toggle{border-start-end-radius:11px !important;border-end-end-radius:11px !important}
/* the card wrapping the services list also clips with overflow:hidden — let it overflow while a menu is open */
.card:has(.btn-group.show),.card:has(.dropdown.show),.card:has(.btn-group.open),.panel:has(.btn-group.show){overflow:visible}
/* Position the menu under the WHOLE split-button, not the narrow ▾ toggle. By default it anchors right:0 to the
   tiny inner toggle-group and spills LEFT over the «دیدن جزئیات» button. Make the OUTER group the positioning
   context (relative) and the inner toggle-group static, so right:0 aligns the menu's right edge to the cPanel
   button — it drops straight down under the split-button, right-aligned (RTL-correct), no spilling. */
.btn-group:has(.dropdown-menu):not(:has(> .dropdown-menu)){position:relative}
.btn-group:has(> .dropdown-menu){position:static}
.btn-group:has(> .dropdown-menu) > .dropdown-menu{left:auto !important;right:0 !important}

/* action toolbars (domain manager etc.) — tidy outline buttons + brand dropdown */
.btn-toolbar,.tablelist-actions,.btn-group-toolbar,.client-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.btn-toolbar .btn,.tablelist-actions .btn,.client-actions .btn{border-radius:10px !important;border:1.5px solid var(--eram-line) !important;background:#fff !important;color:var(--eram-ink) !important;font-weight:600;padding:9px 16px;box-shadow:none !important}
.btn-toolbar .btn:hover,.tablelist-actions .btn:hover,.client-actions .btn:hover{border-color:var(--eram-cyan) !important;color:var(--eram-blue) !important;background:var(--eram-soft) !important;transform:translateY(-1px)}
.btn-toolbar .btn.btn-primary,.btn-toolbar .dropdown-toggle.btn-primary,.client-actions .btn-primary{background:var(--eram-grad) !important;color:#fff !important;border-color:transparent !important}

/* tables: organized, roomy, branded headers */
.table{border-collapse:separate;border-spacing:0;width:100%}
.table thead th{background:var(--eram-soft) !important;color:var(--eram-ink) !important;font-weight:700;border:0 !important;border-bottom:2px solid var(--eram-line) !important;padding:14px 12px}
.table tbody td{border:0 !important;border-bottom:1px solid var(--eram-line) !important;padding:15px 12px;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0 !important}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:#fafdff}
.table-responsive,.tablelist,.responsive-table-container{border:1px solid var(--eram-line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(11,31,58,.05)}
.table .label,.table .badge{border-radius:8px;padding:5px 12px;font-weight:600}
/* pagination */
.pagination{gap:4px}
.pagination .page-link{border-radius:9px !important;border:1px solid var(--eram-line) !important;color:var(--eram-ink);padding:8px 14px}
.pagination .page-item.active .page-link{background:var(--eram-grad) !important;border-color:transparent !important;color:#fff}
.pagination .page-link:hover{background:var(--eram-soft);color:var(--eram-blue)}

/* list-group rows in panels (recent tickets, support menu) — clean dividers */
.list-group{border-radius:0}
.list-group-item{border-inline:0 !important;border-top:0 !important;border-bottom:1px solid var(--eram-line) !important;padding:13px 16px;transition:background .15s,padding .15s}
.list-group-item:last-child{border-bottom:0 !important}
.list-group-item:hover{background:var(--eram-soft);padding-inline-end:20px}
.list-group-item.active{background:var(--eram-grad) !important;border-color:transparent !important;color:#fff !important}

/* page section spacing so cards breathe */
.card,.panel{margin-bottom:22px}

/* success states -> brand-aligned teal (positive, but no clashing bootstrap green) */
.alert-success{background:#e6fbf6 !important;border-color:#b6ecdf !important;color:#0a7a63 !important}
.alert-success a,.alert-success .close,.alert-success strong,.alert-success i{color:#0a7a63 !important}
.badge-success,.label-success,span.badge.badge-success{background:#0fb597 !important;color:#fff !important;border-color:transparent !important}
.text-success{color:#0fb597 !important}
.bg-success{background:#0fb597 !important}
.table .text-success,.table .label-success{color:#0a7a63 !important}
/* keep status dots/checks readable */
.fa-check-circle.text-success,.fa-check.text-success{color:#0fb597 !important}

/* clean dropdowns (notifications, account, language) — remove awkward notch, detached card */
.dropdown-menu{border:1px solid var(--eram-line) !important;border-radius:13px !important;
  box-shadow:0 18px 46px -22px rgba(11,31,58,.38) !important;padding:6px !important;margin-top:10px !important;background:#fff}
.dropdown-menu::before,.dropdown-menu::after{display:none !important;content:none !important}
.dropdown-menu .dropdown-item,.dropdown-menu li > a{border-radius:9px;padding:10px 14px;transition:background .15s,color .15s}
.dropdown-menu .dropdown-item:hover,.dropdown-menu li > a:hover{background:var(--eram-soft);color:var(--eram-blue)}
.dropdown-menu .empty,.dropdown-menu .text-center,.dropdown-menu .notifications-empty,.dropdown-menu p{padding:18px 16px;color:#6b7e99;text-align:center;margin:0}
.dropdown-menu .dropdown-divider{border-color:var(--eram-line)}

/* ====================================================================
   Premium polish: button sheen, smoother hovers, entrance motion
   ==================================================================== */
.btn{transition:transform .18s,box-shadow .25s,filter .2s,background .2s}
.btn:active{transform:translateY(1px) scale(.99)}
/* light sweep across primary/gradient buttons on hover */
.btn-primary,.btn-info,.btn-success,.btn-order-now,.bootstrap-switch-handle-on{position:relative;overflow:hidden}
.btn-primary::after,.btn-info::after,.btn-success::after,.btn-order-now::after{
  content:"";position:absolute;top:0;bottom:0;width:60%;inset-inline-start:-80%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:inset-inline-start .55s ease}
.btn-primary:hover::after,.btn-info:hover::after,.btn-success:hover::after,.btn-order-now:hover::after{inset-inline-start:130%}
/* card / panel lift */
.card,.panel,.product,.tiles .tile{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .2s}
.card:hover,.panel:hover{box-shadow:0 22px 46px -26px rgba(11,31,58,.28)}
/* gentle entrance for main content blocks */
@keyframes eramRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#main-body > .row,.card,.tiles,.domain-selection-options,.products,.tablelist,.table-responsive{animation:eramRise .5s cubic-bezier(.2,.7,.3,1) both}
@media(prefers-reduced-motion:reduce){*{animation:none !important}}
/* nav link underline sweep already; add icon nudge on sidebar items */
.list-group-item i,.sidebar a i{transition:transform .2s}
.list-group-item:hover i{transform:translateX(-3px)}
/* focus rings (a11y, premium) */
.btn:focus-visible,a:focus-visible,.form-control:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,194,229,.35)}

/* bootstrap-switch (e.g. Single Sign-On) rebuilt as a true iOS-style toggle: a compact gradient
   track + a circular sliding knob. The plugin's ON/OFF text segments are hidden; the wrapper's
   .bootstrap-switch-on / -off state classes drive the track colour + knob side. */
.bootstrap-switch{
  display:inline-block !important;position:relative !important;
  width:54px !important;min-width:54px !important;max-width:54px !important;height:30px !important;
  border:0 !important;border-radius:999px !important;overflow:hidden !important;vertical-align:middle;cursor:pointer;
  background:#cdd9e8 !important;box-shadow:inset 0 1px 3px rgba(11,31,58,.14) !important;
  transition:background .22s ease,box-shadow .15s ease !important}
.bootstrap-switch.bootstrap-switch-on{background:var(--eram-grad) !important;box-shadow:inset 0 1px 2px rgba(11,31,58,.06) !important}
.bootstrap-switch .bootstrap-switch-container{width:100% !important;height:100% !important;margin:0 !important;transform:none !important}
/* hide the ON / OFF text segments */
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off{
  position:absolute !important;width:1px !important;height:1px !important;min-width:0 !important;
  padding:0 !important;opacity:0 !important;overflow:hidden !important;font-size:0 !important}
/* the circular knob */
.bootstrap-switch .bootstrap-switch-label{
  position:absolute !important;top:3px !important;left:3px !important;right:auto !important;
  width:24px !important;min-width:24px !important;height:24px !important;margin:0 !important;padding:0 !important;
  background:#fff !important;border:0 !important;border-radius:50% !important;font-size:0 !important;text-indent:-999px;
  box-shadow:0 2px 4px rgba(11,31,58,.32) !important;transition:left .22s ease,right .22s ease !important}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{left:auto !important;right:3px !important}
.bootstrap-switch:hover{filter:brightness(1.03)}
.bootstrap-switch.bootstrap-switch-focused{box-shadow:inset 0 1px 2px rgba(11,31,58,.06),0 0 0 3px rgba(0,194,229,.22) !important}

/* RTL: "back" buttons (e.g. «بازگشت به جزئیات محصول» on the upgrade page) use left-pointing FA arrows;
   mirror them to point RIGHT, the correct "back" direction when reading right-to-left. */
.btn .fa-arrow-circle-left,.btn .fa-arrow-alt-circle-left,.btn .fa-arrow-left,
.btn .fa-long-arrow-alt-left,.btn .fa-long-arrow-left,.btn .fa-chevron-left,
.btn .fa-chevron-circle-left,.btn .fa-angle-left,.btn .fa-caret-left{
  display:inline-block;transform:scaleX(-1)}
/* RTL: "continue / next" buttons (e.g. «ادامه» on the cart) use right-pointing FA arrows;
   mirror them to point LEFT, the correct "forward" direction when reading right-to-left. */
.btn .fa-arrow-circle-right,.btn .fa-arrow-alt-circle-right,.btn .fa-arrow-right,
.btn .fa-long-arrow-alt-right,.btn .fa-long-arrow-right,.btn .fa-chevron-right,
.btn .fa-chevron-circle-right,.btn .fa-angle-right,.btn .fa-caret-right{
  display:inline-block;transform:scaleX(-1)}

/* ====================================================================
   WOW — effects & animations (all bug-safe; reveal class added via JS)
   ==================================================================== */
@keyframes eramPageIn{from{opacity:0}to{opacity:1}}
@keyframes eramGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes eramFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes eramPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,194,229,.5)}70%{box-shadow:0 0 0 10px rgba(0,194,229,0)}}

/* gentle page-load fade (pure CSS — no JS dependency, never leaves blank).
   IMPORTANT: fill-mode is `backwards`, NOT `both`. With `both`, Chrome keeps the element in the
   animation's "after phase", which creates a persistent STACKING CONTEXT on #main-body. Because
   Bootstrap modals are nested inside #main-body but the .modal-backdrop is appended to <body>,
   that context trapped every modal BELOW the backdrop → modal buttons (e.g. «بلی» on empty-cart)
   were unclickable. eramPageIn only fades opacity and the base state is fully visible, so dropping
   the forward fill loses nothing visually and lets the context dissolve. eram-jalali.js also strips
   the animation on animationend as a belt-and-suspenders guarantee. */
#main-body,.main-content,section.main{animation:eramPageIn .45s ease backwards}

/* scroll progress bar */
.eram-scroll-prog{position:fixed;top:0;inset-inline:0;height:3px;z-index:2000;background:var(--eram-grad);transform:scaleX(0);transform-origin:right center;will-change:transform}

/* scroll reveal (hiding class is JS-added, so no-JS = fully visible) */
.eram-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);will-change:opacity,transform}
.eram-reveal.eram-in{opacity:1;transform:none}

/* premium gradient sub-header band (the breadcrumb area) */
.master-breadcrumb{
  background:var(--eram-grad-d) !important;background-size:180% 180% !important;
  animation:eramGrad 20s ease-in-out infinite;border:0 !important;position:relative;overflow:hidden;
  padding:20px 0 !important;box-shadow:0 14px 30px -22px rgba(11,31,58,.6)
}
.master-breadcrumb::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,194,229,.5),transparent 70%);top:-150px;inset-inline-start:6%;filter:blur(8px);pointer-events:none;animation:eramFloat 9s ease-in-out infinite}
.master-breadcrumb .container{position:relative;z-index:2}
.master-breadcrumb,.master-breadcrumb a,.master-breadcrumb li,.master-breadcrumb .breadcrumb-item,.master-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:#dbe9ff !important}
.master-breadcrumb a:hover{color:#fff !important}
.master-breadcrumb h1,.master-breadcrumb h2,.master-breadcrumb .h1{color:#fff !important;font-weight:800}

/* button sheen on all CTAs */
.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-order-now,.btn-checkout{position:relative;overflow:hidden;z-index:0}
.btn-primary::after,.btn-success::after,.btn-info::after,.btn-warning::after,.btn-order-now::after,.btn-checkout::after{
  content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-130%);
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transition:transform .6s}
.btn-primary:hover::after,.btn-success:hover::after,.btn-info:hover::after,.btn-warning:hover::after,.btn-order-now:hover::after,.btn-checkout:hover::after{transform:translateX(130%)}

/* richer hover depth + icon micro-motion */
.product,.card,.panel{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.product:hover,.card:hover:not(.card-sidebar){box-shadow:0 30px 60px -28px rgba(11,31,58,.42) !important}
.action-icon-btns .ico-container,.card .ic{transition:transform .4s cubic-bezier(.34,1.5,.6,1)}
.action-icon-btns a:hover .ico-container{transform:scale(1.1) rotate(-5deg)}
.sidebar .list-group-item,.list-group-item{transition:transform .18s,background .2s}
.sidebar .list-group-item:hover{transform:translateX(-3px)}

/* nav-link gradient underline already added; add smooth link transitions */
a{transition:color .18s}

/* second floating orb in the hero band for depth */
.master-breadcrumb::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,194,229,.28),transparent 70%);bottom:-130px;inset-inline-end:12%;
  pointer-events:none;animation:eramFloat 12s ease-in-out infinite reverse;z-index:1}

/* extra micro-motion */
.btn:active,.ew-btn:active{transform:translateY(1px) scale(.985)}
.dropdown-item{transition:background .2s,color .2s,padding .2s}
.dropdown-item:hover{padding-inline-end:18px}
.list-group-item{transition:transform .18s,background .2s,padding .2s}
.product .btn-order-now,.btn-checkout{transition:transform .2s,box-shadow .25s,letter-spacing .2s}
.product .btn-order-now:hover{letter-spacing:.3px}
.panel-heading svg,.card-header svg,.tile i{transition:transform .3s}
.panel:hover > .panel-heading svg,.card:hover > .card-header svg{transform:scale(1.12)}

@media(prefers-reduced-motion:reduce){
  .eram-reveal{opacity:1 !important;transform:none !important}
  .master-breadcrumb,.master-breadcrumb::before,.master-breadcrumb::after,#main-body{animation:none !important}
}

/* ===== dashboard welcome hero (merged into the gradient band) ===== */
.master-breadcrumb.eram-hero-mode{padding:28px 0 34px !important}
.eram-welcome-inner{margin-top:14px;animation:eramPageIn .5s ease backwards}
.eram-welcome-inner h1{color:#fff !important;font-size:1.95rem;font-weight:800;margin:0 0 8px}
.eram-welcome-inner p{color:#cfe0f5 !important;font-size:1.02rem;max-width:580px;margin:0 0 18px;line-height:1.9}
.ew-actions{display:flex;gap:12px;flex-wrap:wrap}
.ew-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:999px;font-weight:700;font-size:.95rem;
  transition:transform .2s,box-shadow .2s,background .2s;border:1.5px solid transparent;cursor:pointer;text-decoration:none}
.master-breadcrumb .ew-btn-light,.ew-btn-light{background:#fff !important;color:var(--eram-blue) !important;box-shadow:0 16px 32px -16px rgba(0,0,0,.45)}
.master-breadcrumb .ew-btn-light:hover,.ew-btn-light:hover{transform:translateY(-3px);color:var(--eram-blue-700) !important;box-shadow:0 22px 40px -18px rgba(0,0,0,.5)}
.master-breadcrumb .ew-btn-ghost,.ew-btn-ghost{background:rgba(255,255,255,.14) !important;color:#fff !important;border-color:rgba(255,255,255,.42)}
.master-breadcrumb .ew-btn-ghost:hover,.ew-btn-ghost:hover{background:rgba(255,255,255,.24) !important;transform:translateY(-3px);color:#fff !important}
@media(max-width:640px){.eram-welcome-inner h1{font-size:1.5rem}.eram-welcome-inner p{font-size:.92rem}.ew-btn{padding:10px 18px;font-size:.88rem}}

/* ---------- base ---------- */
body,.primary-bg-color{
  font-family:'Vazirmatn',Tahoma,sans-serif !important;
  background:var(--eram-soft) !important;
  color:#15243a;
}
h1,h2,h3,h4,h5,.card-title{font-family:'Vazirmatn',Tahoma,sans-serif !important;font-weight:800;color:var(--eram-ink)}
a{color:var(--eram-blue)}
a:hover{color:var(--eram-cyan)}

/* ---------- header / navbars (clean white, cyan accents) ---------- */
.header{background:#fff !important;box-shadow:0 4px 22px -14px rgba(11,31,58,.3)}
.header .topbar{background:var(--eram-ink) !important}
.header .topbar .btn,.header .topbar .input-group-text,.header .topbar a{color:#cdd7e6 !important}
.navbar.navbar-light{background:#fff !important;padding-top:.7rem;padding-bottom:.7rem}
.navbar-brand .logo-img{max-height:46px;width:auto}
.main-navbar-wrapper{background:#fff !important;border-top:1px solid var(--eram-line)}
#nav .nav-link,.main-navbar-wrapper .nav-link{color:#15243a !important;font-weight:600;border-radius:10px;transition:.2s}
#nav .nav-link:hover,.main-navbar-wrapper .nav-link:hover{color:var(--eram-cyan) !important;background:var(--eram-soft)}
#nav .nav-item.active>.nav-link,#nav .open>.nav-link{color:var(--eram-blue) !important}
.navbar .search .form-control{border-radius:999px 0 0 999px}
.navbar .cart-btn{color:var(--eram-blue) !important}
.navbar .badge-info{background:var(--eram-cyan)}

/* ---------- buttons ---------- */
.btn{border-radius:999px;font-weight:700;transition:transform .2s,box-shadow .2s}
.btn-primary,.btn-info{
  background:var(--eram-grad) !important;border:0 !important;color:#fff !important;
  box-shadow:0 14px 32px -14px rgba(0,150,200,.6);
}
.btn-primary:hover,.btn-info:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(0,150,200,.7)}
.btn-outline-primary{border:1.5px solid var(--eram-cyan) !important;color:var(--eram-blue) !important;background:#fff}
.btn-outline-primary:hover{background:var(--eram-grad) !important;color:#fff !important;border-color:transparent !important}
.btn-default{border-radius:999px}
.btn-success{background:#16a34a;border-color:#16a34a}

/* ---------- breadcrumb ---------- */
.master-breadcrumb{background:#fff;border-bottom:1px solid var(--eram-line)}
.master-breadcrumb .breadcrumb{background:transparent}
.master-breadcrumb a{color:var(--eram-blue)}

/* ---------- cards / panels ---------- */
.card{border:1px solid var(--eram-line);border-radius:18px;box-shadow:0 2px 10px rgba(11,31,58,.05);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(11,31,58,.28)}
.card-columns.home .card{text-align:center}
.pricing-card-title{color:var(--eram-ink)}
.panel,.well{border-radius:16px;border:1px solid var(--eram-line)}

/* domain search box on homepage */
#main-body .domain-search,.domain-checker,.domain-search-form{border-radius:18px}
.domain-add-to-cart,.domainchecker .btn{border-radius:999px}

/* ---------- homepage action icon buttons (harmonize to brand) ---------- */
.action-icon-btns a{border-radius:18px;border:1px solid var(--eram-line);background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s;padding:22px 10px}
.action-icon-btns a:hover{transform:translateY(-5px);box-shadow:0 20px 44px -22px rgba(11,31,58,.28);border-color:transparent;color:var(--eram-blue)}
.action-icon-btns .ico-container{color:#fff;background:var(--eram-grad);width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 14px 30px -14px rgba(0,150,200,.6)}
.action-icon-btns .ico-container i{color:#fff}
/* neutralize the stock accent colours so all icons match the brand */
.action-icon-btns [class*="card-accent-"] .ico-container{background:var(--eram-grad) !important}

/* ---------- sidebar (client area) ---------- */
.sidebar .list-group-item.active,.sidebar .panel-heading{background:var(--eram-grad) !important;border-color:transparent !important;color:#fff !important}
.sidebar .list-group-item{border-radius:10px;margin-bottom:2px}
.sidebar a:hover{color:var(--eram-cyan)}

/* ---------- forms ---------- */
.form-control{border-radius:10px;border:1.5px solid var(--eram-line);font-family:inherit}
.form-control:focus{border-color:var(--eram-cyan);box-shadow:0 0 0 4px rgba(0,194,229,.15)}
.input-group .form-control{border-radius:10px}

/* ---------- tables ---------- */
.table thead th{background:var(--eram-soft);color:var(--eram-ink);border-bottom:2px solid var(--eram-line)}
.table-striped tbody tr:nth-of-type(odd){background:#fafcfe}

/* ---------- alerts / badges ---------- */
.alert-info{background:#e6f8fc;border-color:#bfeaf4;color:#0b5566}
.badge-primary{background:var(--eram-blue)}

/* ---------- footer (match WP: navy) ---------- */
#footer.footer{background:var(--eram-ink) !important;color:#9fb1c9;margin-top:48px;padding-top:40px;position:relative}
#footer.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--eram-grad)}
#footer.footer a,#footer.footer .nav-link{color:#9fb1c9 !important}
#footer.footer a:hover,#footer.footer .nav-link:hover{color:var(--eram-cyan) !important}
#footer.footer .copyright{color:#7488a4}

/* ---------- progress / misc accents ---------- */
.progress-bar{background:var(--eram-grad)}
.text-primary{color:var(--eram-blue) !important}
.nav-tabs .nav-link.active{border-bottom:2px solid var(--eram-cyan);color:var(--eram-blue)}

/* order summary / cart (checkout sidebar) */
.order-summary{background:#fff !important;border:1px solid var(--eram-line) !important;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px -14px rgba(11,31,58,.28)}
.order-summary h2,.order-summary .summary-title,#orderSummary .panel-heading{
  background:var(--eram-grad) !important;color:#fff !important;font-size:1.1rem !important;font-weight:800;
  margin:0 !important;padding:15px 18px !important;text-align:center;
}
.order-summary .subtotal,.order-summary .recurring-totals,.order-summary .total-due-today,.order-summary .total-due-today-padded,.order-summary .promotion{padding-inline:18px}
.order-summary .total-due-today,.order-summary .total-due-today .amt{color:var(--eram-blue) !important;font-weight:800}
.btn-checkout{border-radius:999px !important;font-weight:700}
/* cart table header -> brand */
.cart-items thead th,.table-cart thead th,#cartContents thead th{background:var(--eram-ink) !important;color:#fff !important;border:0}

/* ====================================================================
   Mobile / responsive hardening for the components we customized
   ==================================================================== */
@media(max-width:768px){
  .product{margin-bottom:18px}
  .product-pricing .price,.product .price{font-size:1.5rem !important}
  .product .btn-order-now{max-width:none;width:100%}
  .navbar-brand{width:140px;height:40px}
  .footer-logo{height:78px}
  .order-summary{margin-top:20px}
  #footer.site-footer{padding-top:48px}
  .master-breadcrumb{padding:10px 0}
  /* let long tables scroll instead of overflowing */
  .table-responsive,.tablelist{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:480px){
  .product-pricing .price,.product .price{font-size:1.35rem !important}
  #footer.site-footer h3::after{inset-inline-start:calc(50% - 14px)}
  .footer-grid{text-align:center}
  .footer-contact a,.footer-contact span{justify-content:center}
}

/* RTL niceties (WHMCS loads rtl css; just smooth a few spots) */
[dir="rtl"] .navbar .search .form-control{border-radius:0 999px 999px 0}

/* ===== input-group RTL fix (domain search / cart / forms) — clean unified container ===== */
.input-group{border:1.5px solid var(--eram-line);border-radius:11px;overflow:hidden;background:#fff;transition:border-color .18s,box-shadow .18s}
.input-group > .form-control,.input-group > .custom-select,.input-group select,
.input-group .input-group-addon,.input-group .input-group-text,
.input-group .input-group-prepend,.input-group .input-group-append,
.input-group .input-group-prepend > *,.input-group .input-group-append > *,
.input-group .btn{border:0 !important;border-radius:0 !important;box-shadow:none !important;margin:0 !important;outline:0 !important}
.input-group .input-group-addon,.input-group .input-group-text,
.input-group .input-group-prepend .input-group-text{background:var(--eram-soft) !important;color:var(--eram-ink) !important;font-weight:600}
.input-group > * + *{border-inline-start:1px solid var(--eram-line) !important}
.input-group:focus-within{border-color:var(--eram-cyan);box-shadow:0 0 0 4px rgba(0,194,229,.14)}
/* domain parts (www. / .ir) must read left-to-right, not bidi-flipped */
.input-group .input-group-addon,.input-group .input-group-text,.input-group select,.input-group .custom-select,.input-group input[type="text"]{direction:ltr !important;text-align:center}
.input-group input[type="text"]::placeholder{text-align:center;direction:rtl}

/* ===== domain search: professional connected bar ===== */
/* outer row: tight flex group, no gutters, no offset */
.col-sm-offset-1,.offset-sm-1{margin-inline-start:0 !important}
.row:has(> [class*="col-"] .domains-row){display:flex !important;flex-wrap:nowrap !important;align-items:stretch !important;gap:12px;margin:0 !important;max-width:780px}
.row:has(> [class*="col-"] .domains-row) > [class*="col-"]{padding:0 !important;flex:0 0 auto;max-width:none !important;width:auto !important;display:flex;align-items:stretch}
.row:has(> [class*="col-"] .domains-row) > [class*="col-"]:has(.domains-row){flex:1 1 auto}

/* the bar */
.domains-row{display:flex !important;flex-wrap:nowrap !important;align-items:stretch !important;margin:0 !important;width:100%;height:52px;
  border:1.5px solid var(--eram-line);border-radius:12px;overflow:hidden;background:#fff;transition:border-color .18s,box-shadow .18s}
.domains-row:focus-within{border-color:var(--eram-cyan);box-shadow:0 0 0 4px rgba(0,194,229,.14)}
.domains-row > [class*="col-"]{padding:0 !important;display:flex;align-items:stretch;max-width:none !important;width:auto !important;flex:0 0 auto !important}
.domains-row > [class*="col-"]:has(.input-group){flex:1 1 auto !important;width:auto !important;min-width:0}
.domains-row > [class*="col-"]:has(select),.domains-row > [class*="col-"]:has(.custom-select){flex:0 0 auto !important;width:auto !important}
.domains-row .input-group{display:flex !important;flex-wrap:nowrap !important;border:0 !important;border-radius:0 !important;width:100% !important;background:transparent !important;height:100%;box-shadow:none !important}
.domains-row .input-group .form-control{border:0 !important;height:100% !important;font-size:1rem;box-shadow:none !important;flex:1 1 auto !important;width:1% !important;min-width:0}
.domains-row .input-group-prepend,.domains-row .input-group-append{flex:0 0 auto !important}
.domains-row .input-group-addon,.domains-row .input-group-text{background:var(--eram-soft) !important;border:0 !important;border-inline-end:1px solid var(--eram-line) !important;height:100%;display:flex;align-items:center;padding:0 16px;font-weight:700;color:var(--eram-ink) !important}
.domains-row select,.domains-row .custom-select{border:0 !important;border-radius:0 !important;border-inline-start:1px solid var(--eram-line) !important;background:var(--eram-soft) !important;height:100%;min-width:96px;width:auto;direction:ltr;text-align:left;padding:0 30px 0 14px !important;font-weight:600;color:var(--eram-ink) !important;-webkit-appearance:auto;appearance:auto;cursor:pointer}

/* ===== domain selection: modern selectable option cards ===== */
.domain-selection-options{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.domain-selection-options .option{
  border:1.5px solid var(--eram-line) !important;border-radius:16px !important;padding:18px 22px !important;background:#fff !important;
  transition:border-color .2s,box-shadow .2s,background .25s !important}
.domain-selection-options .option:hover{border-color:var(--eram-cyan) !important}
.domain-selection-options .option.option-selected,.domain-selection-options .option:has(input[type=radio]:checked){
  border-color:var(--eram-cyan) !important;background:linear-gradient(180deg,#eefaff 0%,#fff 55%) !important;
  box-shadow:0 16px 42px -26px rgba(0,150,200,.45) !important}
.domain-selection-options .option label{font-weight:700;color:var(--eram-ink);font-size:1rem;margin:0}
.domain-selection-options .option.option-selected .domains-row{margin-top:18px}
/* resting depth + hover lift on the option cards (premium) */
.domain-selection-options .option{box-shadow:0 4px 16px -10px rgba(11,31,58,.12) !important}
.domain-selection-options .option:not(.option-selected):not(:has(input:checked)):hover{transform:translateY(-2px);box-shadow:0 16px 32px -18px rgba(11,31,58,.24) !important}
/* unified premium domain field: bordered rounded group + focus ring */
.domain-selection-options .domains-row .input-group{
  border:1.6px solid var(--eram-line) !important;border-radius:13px !important;overflow:hidden !important;
  background:#fff !important;min-height:54px;transition:border-color .16s ease,box-shadow .16s ease}
.domain-selection-options .domains-row .input-group:focus-within{
  border-color:var(--eram-cyan) !important;box-shadow:0 0 0 3px rgba(26,200,236,.15) !important}
.domain-selection-options .domains-row .input-group .input-group-addon,
.domain-selection-options .domains-row .input-group .input-group-text{font-size:1.02rem;letter-spacing:.3px;color:var(--eram-blue) !important}
.domain-selection-options .domains-row .form-control{font-size:1.02rem}
/* TLD select (register/transfer options) — clean matching box + branded */
.domain-selection-options .domains-row select{
  border:1.6px solid var(--eram-line) !important;border-radius:13px !important;min-height:54px;background:#fff !important;
  font-weight:700;color:var(--eram-blue) !important;transition:border-color .16s ease,box-shadow .16s ease}
.domain-selection-options .domains-row select:focus{border-color:var(--eram-cyan) !important;box-shadow:0 0 0 3px rgba(26,200,236,.15) !important}
/* the use/submit button — gradient pill matching the field height */
.domain-selection-options .domains-row .btn,.domain-selection-options .domains-row button[type=submit]{
  min-height:54px;border-radius:13px !important;background:var(--eram-grad) !important;border:0 !important;color:#fff !important;
  font-weight:700;font-size:1.02rem;transition:filter .15s ease,transform .15s ease}
.domain-selection-options .domains-row .btn:hover,.domain-selection-options .domains-row button[type=submit]:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff !important}
/* the TLD element — register/transfer = <select id=...tld>, owndomain = <input id=owndomaintld>.
   Clean matching box so all three options look identical. */
.domain-selection-options .domains-row [id$="tld"]{
  border:1.6px solid var(--eram-line) !important;border-radius:13px !important;min-height:54px !important;background:#fff !important;
  font-weight:700;color:var(--eram-blue) !important;direction:ltr !important;text-align:center !important;
  transition:border-color .16s ease,box-shadow .16s ease}
.domain-selection-options .domains-row [id$="tld"]:focus{border-color:var(--eram-cyan) !important;box-shadow:0 0 0 3px rgba(26,200,236,.15) !important}
/* FUSE www.|input|.tld into ONE seamless field — works for BOTH the <select> tld (register/transfer)
   AND the <input> tld (owndomain, 3rd option). input-group LEFT (www.), TLD RIGHT, shared divider. */
.domain-selection-options .domains-row:has([id$="tld"]) > [class*="col-9"]{padding-left:0 !important;padding-right:0 !important}
.domain-selection-options .domains-row:has([id$="tld"]) > [class*="col-3"]{padding-left:0 !important;padding-right:0 !important}
.domain-selection-options .domains-row:has([id$="tld"]) .input-group{
  border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:0 !important}
.domain-selection-options .domains-row:has([id$="tld"]) [id$="tld"]{
  border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;
  border-left:1.6px solid var(--eram-line) !important;margin:0 !important}
.domain-selection-options .domains-row:has([id$="tld"]):focus-within .input-group,
.domain-selection-options .domains-row:has([id$="tld"]):focus-within [id$="tld"]{border-color:var(--eram-cyan) !important}
/* keep the field within its column so it can't push the «استفاده/بررسی» button out of the card.
   (after the padding:0 fusion the input-group could exceed its col and overflow → button shoved left) */
.domain-selection-options .domain-input-group > .row{flex-wrap:nowrap !important}
.domain-selection-options .domain-input-group > .row > [class*="col-sm-8"]{flex:1 1 0 !important;min-width:0 !important;max-width:none !important;width:auto !important}
.domain-selection-options .domain-input-group > .row > [class*="col-sm-2"]{flex:0 0 auto !important;width:auto !important;max-width:none !important;margin:0 !important}
.domain-selection-options .domains-row{flex-wrap:nowrap !important;min-width:0 !important;width:100% !important}
.domain-selection-options .domains-row > [class*="col-9"]{flex:1 1 0 !important;min-width:0 !important;max-width:none !important;width:auto !important}
.domain-selection-options .domains-row .input-group{min-width:0 !important}
.domain-selection-options .domains-row .input-group .form-control{min-width:0 !important;flex:1 1 auto !important}

/* ===== Domain availability checker results (order-flow search) — brand the raw #555 buttons + tidy ===== */
/* available = positive green, unavailable = muted, invalid = soft red, add-to-cart = brand gradient */
.btn.available{background:linear-gradient(135deg,#1ec98a,#10a56c) !important;color:#fff !important;border:0 !important;font-weight:700 !important}
.btn.unavailable{background:#eef2f7 !important;color:#7e8da1 !important;border:0 !important;font-weight:600 !important}
.btn.invalid{background:#fdecec !important;color:#c0392b !important;border:0 !important;font-weight:600 !important}
.btn.btn-add-to-cart,.btn-add-to-cart,.btn.product-domize{background:var(--eram-grad) !important;color:#fff !important;border:0 !important;font-weight:700 !important}
.btn.btn-add-to-cart:hover,.btn-add-to-cart:hover{filter:brightness(1.07) !important;color:#fff !important}
/* spotlight TLD boxes: recolor + CONSTRAIN the button to the box width (it was 100px wide in a 70px box,
   overflowing left and forming an overlapping band across the grid). */
.spotlight-tld-container .btn:not(.w-hidden),.spotlight-tlds .btn:not(.w-hidden){
  font-weight:700 !important;display:block !important;width:100% !important;min-width:0 !important;max-width:100% !important;
  box-sizing:border-box !important;padding:9px 3px !important;font-size:.7rem !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:0 0 11px 11px !important}
.spotlight-tld-container .btn-add-to-cart.w-hidden,.spotlight-tlds .btn-add-to-cart.w-hidden,.spotlight-tld-container .domain-contact-support.w-hidden,.spotlight-tlds .domain-contact-support.w-hidden{display:none !important}
/* the box clipped the add-to-cart button: .spotlight-tld had overflow:hidden + fixed height. Let it grow. */
.spotlight-tld{overflow:visible !important;height:auto !important;display:flex !important;flex-direction:column}
.spotlight-tld-container{height:auto !important;min-height:0 !important;overflow:visible !important}
.spotlight-tld .btn,.spotlight-tld-container .btn{margin-top:auto !important}
/* WIDER boxes + a real branded add-to-cart button per AVAILABLE box.
   WHMCS floats the boxes (float:left) and keeps each .btn-add-to-cart .w-hidden (display-only).
   eram-jalali.js removes w-hidden + adds .eram-tld-add on boxes whose price is visible (available);
   here we lay them out as a centered wrapping flex grid and style the revealed button. */
.spotlight-tlds-container{display:flex !important;flex-wrap:wrap !important;gap:12px !important;justify-content:center !important}
.spotlight-tld-container{float:none !important;width:auto !important;flex:1 1 120px !important;min-width:120px !important;max-width:170px !important;margin:0 !important}
.spotlight-tld{padding:14px 10px 12px !important;gap:7px !important}
.spotlight-tld-container .btn.eram-tld-add{
  display:flex !important;align-items:center;justify-content:center;gap:6px;
  width:100% !important;padding:9px 6px !important;font-size:.78rem !important;line-height:1.2 !important;
  border-radius:10px !important;margin-top:10px !important;white-space:nowrap;overflow:visible !important}
.spotlight-tld-container .btn.eram-tld-add .added i{margin:0}
/* === Domain name-SUGGESTIONS list: premium clean rows ===
   ALL .domain-suggestion have .w-hidden; the REAL rows are `.clone`, the empty TEMPLATE is `:not(.clone)`. */
.suggested-domains .domain-suggestion:not(.clone){display:none !important}   /* hide the empty template row */
.suggested-domains .domain-suggestion.clone{
  display:flex !important;align-items:center;gap:0;flex-wrap:wrap;
  height:auto !important;min-height:66px !important;padding:12px 18px !important;
  border-bottom:1px solid var(--eram-line) !important;transition:background .14s ease}
.suggested-domains .domain-suggestion.clone:hover{background:var(--eram-soft) !important}
/* read the domain LEFT-to-right as name.extension (was "cn. name"): extension sits to the RIGHT of the name,
   adjacent (gap:0). In the RTL flex row, order:1 = rightmost, so extension:1 (right) then domain:2 (its left). */
.suggested-domains .domain-suggestion.clone .extension{order:1;flex:0 0 auto;direction:ltr;text-align:left;font-weight:700;font-size:1.02rem;color:var(--eram-blue)}
.suggested-domains .domain-suggestion.clone .domain{order:2;flex:0 0 auto;direction:ltr;text-align:left;font-weight:700;font-size:1.02rem;color:var(--eram-ink)}
.suggested-domains .domain-suggestion.clone .price{flex:0 0 auto;white-space:nowrap;font-weight:700;color:var(--eram-blue);margin-inline-end:14px}
.suggested-domains .domain-suggestion.clone .actions{order:3;display:flex !important;gap:8px;align-items:center;flex:0 0 auto;margin-inline-start:auto}
.suggested-domains .domain-suggestion.clone .btn{
  min-height:40px !important;height:auto !important;padding:9px 16px !important;font-size:.82rem !important;
  white-space:nowrap;border-radius:10px !important;width:auto !important;display:inline-flex !important}
/* "contact support to buy" (premium domain) = secondary outline; "add to cart" = primary gradient */
.suggested-domains .domain-suggestion.clone .actions .btn-primary{
  background:#fff !important;color:var(--eram-blue) !important;border:1.5px solid var(--eram-cyan) !important;font-weight:700 !important}
.suggested-domains .domain-suggestion.clone .actions .btn-primary:hover{background:var(--eram-soft) !important;color:var(--eram-blue) !important}

/* softer, more professional button shadows in the domain flow */
.col-sm-2 .btn-block,.domain-selection-options .btn-block,.domains-row ~ * .btn{box-shadow:0 8px 20px -14px rgba(0,150,200,.4) !important}

/* the بررسی button, matched height, beside the bar */
.row:has(> [class*="col-"] .domains-row) .btn-block,.row:has(> [class*="col-"] .domains-row) .btn{
  height:52px !important;min-height:52px;border-radius:12px !important;box-shadow:0 14px 28px -16px rgba(0,150,200,.6) !important;
  margin:0 !important;padding:0 34px !important;white-space:nowrap;width:auto !important;display:inline-flex;align-items:center;justify-content:center}
.input-group .btn[type=submit],.input-group button.btn,.input-group .domaincheck{
  background:var(--eram-grad) !important;color:#fff !important;font-weight:700;padding-inline:24px !important}
/* keep header search + topbar masquerade OUT of the boxed-group styling */
.navbar .input-group,.header .input-group,.navbar-search .input-group,
.topbar .input-group,.input-group.active-client{border:0 !important;overflow:visible !important;background:transparent !important;box-shadow:none !important}
.input-group.active-client > *,.topbar .input-group > *{background:transparent !important;border:0 !important;color:#cdd7e6 !important}
.input-group.active-client > * + *,.topbar .input-group > * + *{border-inline-start:0 !important}
.navbar .search .form-control,.header .search input{border:1.5px solid var(--eram-line) !important;border-radius:999px !important;background:var(--eram-soft)}

/* ====================================================================
   v2 — closer match to the eramhost.com WordPress front-end
   ==================================================================== */

/* ---------- real eram host logo in the header (replace text/old img) ---------- */
.navbar-brand{
  display:inline-flex !important;align-items:center;
  width:172px;height:48px;
  background:url("logo.png") no-repeat center center;background-size:contain;
  font-size:0 !important;color:transparent !important;line-height:0;
}
.navbar-brand img,.navbar-brand svg{display:none !important}
[dir="rtl"] .navbar-brand{background-position:right center}
@media(max-width:600px){.navbar-brand{width:140px;height:40px}}

/* ---------- green success CTAs -> brand gradient (WP has no green) ---------- */
.btn-success,.btn-success.btn-sm,.order-button .btn,.btn-order-now{
  background:var(--eram-grad) !important;border:0 !important;color:#fff !important;
  box-shadow:0 12px 28px -14px rgba(0,150,200,.55) !important;
}
.btn-success:hover,.order-button .btn:hover,.btn-order-now:hover{
  transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(0,150,200,.72) !important;color:#fff !important;
}

/* ---------- pricing / product cards (match WP plan cards) ---------- */
.sidebar-menu .panel,.panel{border-radius:18px;overflow:hidden;border:1px solid var(--eram-line)}
.panel-sidebar .panel-heading,.sidebar .panel-heading,.panel-title{font-weight:800}
.product-group-list .panel,.pricing .panel,.products-list .panel{box-shadow:0 2px 12px rgba(11,31,58,.06);transition:transform .25s,box-shadow .25s}
.product-group-list .panel:hover,.pricing .panel:hover,.products-list .panel:hover{transform:translateY(-4px);box-shadow:0 22px 48px -24px rgba(11,31,58,.3)}
.pricing .price,.product-pricing,.cycle .amount,.recurring-amount{color:var(--eram-blue);font-weight:800}
.featured-plan,.panel.featured{border-color:var(--eram-cyan) !important;box-shadow:0 22px 50px -26px rgba(0,150,200,.5)}

/* ---------- topbar (match WP utility bar: navy, light text) ---------- */
.header .toplinks,.top-bar,.secondary-navbar{background:var(--eram-ink) !important}
.header .toplinks a,.top-bar a{color:#cdd7e6 !important}
.header .toplinks a:hover{color:#fff !important}

/* ---------- client-area summary cards / stat boxes ---------- */
.panel.panel-info,.client-home-panels .panel,.account-overview .panel{border-radius:18px}
.btn-default,.btn-outline-secondary{border-radius:999px;border:1.5px solid var(--eram-line);color:var(--eram-ink)}
.btn-default:hover{border-color:var(--eram-cyan);color:var(--eram-blue)}

/* ---------- links / headings weight to match WP ---------- */
.page-header h1,.client-home h2,h1,h2{letter-spacing:-.01em}

/* ---------- unify remaining contextual buttons to brand (no orange/teal clash) ---------- */
.btn-warning,.btn-purple,.btn-teal,.btn-pink{
  background:var(--eram-grad) !important;border:0 !important;color:#fff !important;
  box-shadow:0 12px 28px -14px rgba(0,150,200,.5) !important;
}
.btn-warning:hover,.btn-purple:hover,.btn-teal:hover{color:#fff !important;transform:translateY(-2px)}
.btn-dark{background:var(--eram-ink) !important;border-color:var(--eram-ink) !important;color:#fff !important}
.btn-dark:hover{background:#15294a !important;color:#fff !important;transform:translateY(-2px)}
.btn-outline-info,.btn-outline-warning,.btn-outline-success,.btn-outline-dark{
  border:1.5px solid var(--eram-cyan) !important;color:var(--eram-blue) !important;background:#fff !important;
}
.btn-outline-info:hover,.btn-outline-warning:hover,.btn-outline-success:hover,.btn-outline-dark:hover{
  background:var(--eram-grad) !important;color:#fff !important;border-color:transparent !important;
}

/* ---------- fix double-edge corners: clip children to the rounded frame ---------- */
.panel,.card,.well,.order-summary,.tiles .tile,.client-home-panels .panel,.summary-container{overflow:hidden}
.panel > .panel-heading:first-child,.card > .card-header:first-child{border-top-left-radius:inherit !important;border-top-right-radius:inherit !important}
.panel > *:last-child,.card > *:last-child{border-bottom-left-radius:inherit !important;border-bottom-right-radius:inherit !important}

/* ---------- dashboard stat tiles: clean separated brand cards (fix flush edges) ---------- */
.tiles .row.no-gutters{margin-inline:-8px !important}
.tiles .col-6,.tiles .col-xl-3,.tiles [class*="col-"]{padding:8px !important}
.tiles .tile{
  background:#fff !important;border:1px solid var(--eram-line) !important;border-radius:16px !important;
  box-shadow:0 4px 14px rgba(11,31,58,.06);height:100%;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s;overflow:hidden
}
.tiles .tile:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(11,31,58,.3) !important;border-color:var(--eram-cyan) !important}
/* unify the per-stat colored accent bars to the brand gradient */
.tiles .highlight,.tile .highlight,.highlight[class*="bg-color-"]{background:var(--eram-grad) !important;height:3px !important;border-radius:2px}
.tiles .tile > i,.tiles .tile .fas,.tiles .tile .far,.tiles .tile .fa{color:var(--eram-blue) !important;transition:transform .3s}
.tiles .tile:hover > i,.tiles .tile:hover .fas{transform:scale(1.12)}
.tiles .tile .stat .number,.tiles .tile h2,.tiles .tile .h2{color:var(--eram-ink) !important;font-weight:800}

/* ---------- account-overview stat boxes: brand the colored accents ---------- */
.account-overview-panel,.client-home-panels .stat,.panel-stat{border-radius:16px}
.account-overview-panel .border-bottom,
.client-home-panels [class*="border-"],
.stat-box .stat-bar,
[class*="card-accent-"]{border-color:var(--eram-cyan) !important}

/* ====================================================================
   Footer rebuilt to match the eramhost.com site (4-column navy)
   ==================================================================== */
#footer.site-footer{background:var(--eram-ink) !important;color:#9fb1c9;padding-top:70px;margin-top:56px;position:relative;overflow:hidden}
#footer.site-footer::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--eram-grad)}
#footer.site-footer .container{position:relative;z-index:2}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:46px;text-align:right}
.footer-logo{height:94px;width:auto;margin-bottom:20px}
.footer-brand p{color:#8295b0;font-size:.94rem;max-width:340px;line-height:1.95}
.footer-contact{display:grid;gap:10px;margin-top:16px}
.footer-contact a,.footer-contact span{display:flex;align-items:center;gap:9px;color:#9fb1c9 !important;font-size:.92rem}
.footer-contact a:hover{color:var(--eram-cyan) !important}
.footer-contact svg{width:18px;height:18px;color:var(--eram-cyan);flex:none}
#footer.site-footer h3{color:#fff;font-size:1rem;margin-bottom:18px;position:relative;padding-bottom:11px;font-weight:800}
#footer.site-footer h3::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:28px;height:2px;background:var(--eram-grad);border-radius:2px}
.footer-links{display:grid;gap:10px}
.footer-links a{color:#9fb1c9 !important;font-size:.93rem;transition:color .2s,padding .2s}
.footer-links a:hover{color:var(--eram-cyan) !important;padding-inline-start:5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-block:22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.86rem;color:#7488a4}
.footer-watermark{position:absolute;top:50%;transform:translateY(-50%);font-size:8rem;font-weight:800;color:rgba(255,255,255,.03);line-height:1;pointer-events:none;white-space:nowrap;z-index:1}
.footer-watermark.fw-en{left:24px}
.footer-watermark.fw-fa{right:24px}
@media(max-width:992px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr;gap:28px}.footer-bottom{justify-content:center;text-align:center}.footer-watermark{display:none}}

/* ====================================================================
   Header polish — mirror the WP site (topbar, nav underline, search, cart)
   ==================================================================== */
/* main bar: clean white, subtle shadow, comfortable height */
.navbar.navbar-light{background:#fff !important;padding:.6rem 0;box-shadow:0 2px 16px -12px rgba(11,31,58,.4)}
.main-navbar-wrapper{background:#fff !important;border-top:1px solid var(--eram-line);box-shadow:0 6px 22px -18px rgba(11,31,58,.35)}

/* nav links: pill hover + animated gradient underline (like WP) */
#nav .nav-link,.main-navbar-wrapper .nav-link{position:relative;font-weight:600;padding:10px 15px !important;border-radius:10px;transition:color .2s,background .25s}
#nav .nav-link::after,.main-navbar-wrapper .nav-link::after{content:"";position:absolute;inset-inline:14px;bottom:6px;height:2px;background:var(--eram-grad);border-radius:2px;transform:scaleX(0);transition:transform .25s}
#nav .nav-link:hover,.main-navbar-wrapper .nav-link:hover{background:var(--eram-soft)}
#nav .nav-link:hover::after,#nav .nav-item.active>.nav-link::after,#nav .open>.nav-link::after{transform:scaleX(1)}
#nav .dropdown-menu{border:1px solid var(--eram-line);border-radius:14px;box-shadow:0 18px 44px -22px rgba(11,31,58,.3);padding:8px;margin-top:8px}
#nav .dropdown-item{border-radius:9px;font-weight:500;padding:9px 13px}
#nav .dropdown-item:hover{background:var(--eram-soft);color:var(--eram-blue)}

/* topbar: deep navy, light text (WP utility bar) */
.header .topbar,.toplinks{background:var(--eram-ink) !important}
.header .topbar a,.header .topbar .btn,.toplinks a{color:#cdd7e6 !important;font-weight:500}
.header .topbar a:hover{color:#fff !important}

/* search pill + cart button */
.navbar .search .form-control,.header .search input{border-radius:999px !important;border:1.5px solid var(--eram-line);background:var(--eram-soft)}
.navbar .search .form-control:focus{border-color:var(--eram-cyan);box-shadow:0 0 0 4px rgba(0,194,229,.14);background:#fff}
.navbar .cart-btn,.header .cart{color:var(--eram-blue) !important}
.navbar .cart-btn .badge,.header .cart .badge{background:var(--eram-grad) !important;color:#fff}
.welcome-msg,.navbar-text{color:var(--eram-ink) !important;font-weight:600}

/* breadcrumb to match */
.master-breadcrumb{background:linear-gradient(180deg,#fff,var(--eram-soft));border-bottom:1px solid var(--eram-line);padding:14px 0}
.master-breadcrumb .breadcrumb{background:transparent;margin:0;font-size:.88rem}
.master-breadcrumb a{color:var(--eram-blue)}
.page-header h1,.master-breadcrumb h1{font-weight:800;color:var(--eram-ink)}

/* ====================================================================
   Store / pricing cards (.product) — match WP plan cards
   ==================================================================== */
.product{
  border:1.5px solid var(--eram-line) !important;border-radius:18px !important;
  box-shadow:0 3px 14px rgba(11,31,58,.06) !important;background:#fff;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s;margin-bottom:24px;
}
.product:hover{transform:translateY(-5px);box-shadow:0 26px 52px -26px rgba(11,31,58,.32) !important;border-color:var(--eram-cyan) !important}
.product .panel-heading,.product .card-header{
  background:var(--eram-soft) !important;border-bottom:1px solid var(--eram-line) !important;
  text-align:center;padding:18px 16px;
}
.product .panel-title,.product .card-header,.product .panel-heading{
  font-size:1.15rem !important;font-weight:800 !important;color:var(--eram-ink) !important;
}
.product .panel-body,.product .card-body{padding:22px 20px}
/* un-float the two columns so the card stacks vertically (name > features > price > button) */
.product .product-desc,.product > footer,.product footer{float:none !important;width:100% !important;display:block !important}
.product-desc ul,.product .product-desc{padding-inline-start:0;list-style:none;margin-bottom:0}
/* feature row in 3 aligned columns: check (left) | value (fixed middle, aligned) | label (right).
   direction:ltr makes the columns predictable; text stays RTL per-cell. */
.product-desc li{padding:10px 18px;border-bottom:1px dashed var(--eram-line);font-size:.9rem;
  display:grid;grid-template-columns:24px 138px 1fr;align-items:center;column-gap:12px;direction:ltr;text-align:right}
.product-desc li::before{grid-column:1;justify-self:center;margin:0}
.product-desc li .feature-value{grid-column:2;text-align:center;white-space:nowrap;direction:rtl}
.product-desc li:last-child{border-bottom:0}
.product-desc li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:rgba(0,194,229,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2300a9cc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}
.feature-value{font-weight:700;color:var(--eram-ink)}
.product > footer,.product footer{text-align:center !important;border-top:1px solid var(--eram-line);margin-top:14px;padding-top:18px}
.product-pricing{text-align:center;margin:0 0 16px}
.product-pricing .price,.product .price{font-size:1.8rem !important;font-weight:800 !important;color:var(--eram-blue) !important;display:block;line-height:1.2}
.product-pricing .price [class],.product-pricing small,.product-pricing .cycle{color:#6b7e99;font-size:.85rem;display:block;margin-top:2px;font-weight:600}
.btn-order-now{border-radius:999px !important;font-weight:700 !important;padding:12px 34px !important;font-size:.97rem !important}
.product .btn-order-now{display:inline-block;margin:4px auto 0}

/* recommended / featured product */
.product.featured,.product.recommended,.product.eram-featured{
  border:2px solid var(--eram-cyan) !important;box-shadow:0 28px 58px -26px rgba(0,150,200,.55) !important;position:relative;padding-top:8px}
.product.eram-featured > header,.product.eram-featured .panel-heading,.product.eram-featured .card-header{
  background:var(--eram-grad) !important;border-bottom:0 !important;color:#fff !important;padding-top:28px !important}
.product.eram-featured > header *,.product.eram-featured .panel-heading *,.product.eram-featured .card-header *{color:#fff !important}
.eram-ribbon{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap;
  background:var(--eram-grad);color:#fff;font-weight:800;font-size:.74rem;padding:6px 24px;border-radius:0 0 14px 14px;
  box-shadow:0 8px 18px -8px rgba(0,150,200,.6)}

/* store category sidebar headers already gradient; tidy items */
.card-sidebar .list-group-item,.panel-sidebar .list-group-item{border-radius:10px;margin-bottom:2px;font-weight:500}
.card-sidebar .list-group-item.active{background:var(--eram-grad) !important;border-color:transparent !important}

/* ===== Support: premium department-selection cards (step one) ===== */
.eram-dept-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
@media (min-width:768px){.eram-dept-grid{grid-template-columns:1fr 1fr}}
.eram-dept-card{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#fff;
  border:1px solid var(--eram-line);border-radius:16px;text-decoration:none !important;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;box-shadow:0 10px 26px -20px rgba(11,31,58,.5)}
.eram-dept-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  background:var(--eram-grad);transform:scaleY(0);transform-origin:bottom;transition:transform .25s ease}
.eram-dept-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 26px 50px -26px rgba(0,150,200,.55)}
.eram-dept-card:hover::before{transform:scaleY(1)}
.eram-dept-ic{flex:0 0 auto;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(26,200,236,.16),rgba(47,134,230,.16));color:var(--eram-blue);font-size:1.25rem;
  transition:background .25s ease,color .25s ease,transform .25s ease}
.eram-dept-card:hover .eram-dept-ic{background:var(--eram-grad);color:#fff;transform:scale(1.06)}
.eram-dept-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.eram-dept-name{font-weight:800;color:var(--eram-ink);font-size:1.02rem;line-height:1.4}
.eram-dept-desc{font-size:.82rem;color:#6b7a90;line-height:1.5;margin:0}
.eram-dept-arrow{flex:0 0 auto;color:#b9c6d6;font-size:.95rem;transition:color .25s ease,transform .25s ease}
.eram-dept-card:hover .eram-dept-arrow{color:var(--eram-blue);transform:translateX(-5px)}

/* ===== Affiliates: rebrand the 3 summary tiles (kill bootstrap green/gold/blue) ===== */
.affiliate-stat{background:#fff !important;border:1px solid var(--eram-line) !important;color:var(--eram-ink) !important;
  border-radius:16px !important;padding:22px 18px !important;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:0 12px 30px -22px rgba(11,31,58,.55);transition:transform .25s ease,box-shadow .25s ease}
.affiliate-stat:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(0,150,200,.5)}
.affiliate-stat i{font-size:1.9rem !important;margin-bottom:6px;color:var(--eram-blue) !important;
  background:linear-gradient(135deg,var(--eram-cyan),var(--eram-blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.affiliate-stat span{font-size:1.95rem !important;font-weight:800 !important;color:var(--eram-ink) !important;line-height:1.1}

/* ===== Featured plan: refined premium motion (slow glow-pulse + periodic shine sweep) ===== */
@media (prefers-reduced-motion: no-preference){
  @keyframes eramFeatGlow{0%,100%{box-shadow:0 26px 54px -28px rgba(0,150,200,.5)}50%{box-shadow:0 30px 64px -24px rgba(0,150,200,.72)}}
  @keyframes eramFeatShine{0%,62%{transform:translateX(-180%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
  .product.eram-featured{animation:eramFeatGlow 3.4s ease-in-out infinite}
  .product.eram-featured > header{position:relative;overflow:hidden}
  .product.eram-featured > header::after{content:"";position:absolute;top:0;left:0;width:36%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);animation:eramFeatShine 5s ease-in-out infinite}
}

/* Persian-ize the Bootstrap file-upload button (default ::after is "Browse") */
.custom-file-label::after{content:"انتخاب" !important}

/* ===== Premium staggered cascade entrance for the dashboard stat tiles ===== */
@media (prefers-reduced-motion: no-preference){
  @keyframes eramTileIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
  .tiles .tile{animation:eramTileIn .55s cubic-bezier(.2,.75,.3,1) both}
  .tiles [class*="col-"]:nth-child(1) .tile{animation-delay:.05s}
  .tiles [class*="col-"]:nth-child(2) .tile{animation-delay:.13s}
  .tiles [class*="col-"]:nth-child(3) .tile{animation-delay:.21s}
  .tiles [class*="col-"]:nth-child(4) .tile{animation-delay:.29s}
  .tiles [class*="col-"]:nth-child(5) .tile{animation-delay:.37s}
  .tiles [class*="col-"]:nth-child(6) .tile{animation-delay:.45s}
}

/* ===== Premium branded scrollbar (page + tables + editor) ===== */
html{scrollbar-width:thin;scrollbar-color:var(--eram-blue) var(--eram-soft)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--eram-soft)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--eram-cyan),var(--eram-blue));
  border-radius:10px;border:3px solid var(--eram-soft)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--eram-blue),var(--eram-blue-700))}
::-webkit-scrollbar-corner{background:var(--eram-soft)}

/* ===== Dashboard "ثبت دامنه جدید" panel — premium floating pill buttons ===== */
/* break the flush input-group into a rounded field + distinct pill buttons (overflow visible so lift isn't clipped) */
.card-accent-emerald .input-group{overflow:visible !important;border:0 !important;background:transparent !important;box-shadow:none !important;flex-wrap:nowrap;align-items:stretch;gap:10px}
.card-accent-emerald .input-group > .form-control{flex:1 1 auto;border:1.5px solid var(--eram-line) !important;border-radius:12px !important;background:#fff;box-shadow:none !important}
.card-accent-emerald .input-group-btn{display:flex !important;gap:10px;align-items:stretch}
.card-accent-emerald .input-group-btn .btn{
  border:0 !important;border-radius:999px !important;font-weight:800 !important;padding:.74rem 1.85rem !important;font-size:.95rem;letter-spacing:.3px;white-space:nowrap;
  background-repeat:no-repeat !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 7px 18px -9px rgba(11,31,58,.45) !important;
  transition:transform .34s cubic-bezier(.34,1.45,.5,1),box-shadow .34s,filter .28s,background-position .65s ease !important}
/* layer 1 = white shine streak (parked off-screen left), layer 2 = the base gradient */
.card-accent-emerald .input-group-btn .btn-success{
  background-image:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.72) 50%,transparent 82%),linear-gradient(120deg,#16cff5,#2f86e6) !important;
  background-size:45% 100%,100% 100% !important;background-position:-160% 0,0 0 !important;color:#fff !important}
.card-accent-emerald .input-group-btn .btn-default{
  background-image:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.5) 50%,transparent 82%),linear-gradient(120deg,#21477e,#0b1f3a) !important;
  background-size:45% 100%,100% 100% !important;background-position:-160% 0,0 0 !important;color:#fff !important;opacity:1 !important}
/* hover: stay put (no lift/scale) — just brightness pop + glow + shine sweep */
.card-accent-emerald .input-group-btn .btn:hover{transform:none !important;filter:saturate(1.16) brightness(1.08);background-position:260% 0,0 0 !important}
.card-accent-emerald .input-group-btn .btn-success:hover{box-shadow:0 18px 36px -14px rgba(0,185,240,.85),inset 0 1px 0 rgba(255,255,255,.4) !important}
.card-accent-emerald .input-group-btn .btn-default:hover{box-shadow:0 18px 36px -14px rgba(34,86,160,.75),inset 0 1px 0 rgba(255,255,255,.32) !important}
.card-accent-emerald .input-group-btn .btn:active{transform:none !important}

/* ===== Phone (intl-tel-input allow-dropdown) — premium LTR international field ===== */
.intl-tel-input.allow-dropdown{direction:ltr !important;display:block;width:100%}
.intl-tel-input.allow-dropdown > input,
.intl-tel-input.allow-dropdown > input[type=tel],
.intl-tel-input.allow-dropdown .form-control{
  direction:ltr !important;text-align:left !important;
  padding-left:98px !important;padding-right:14px !important;
  font-weight:500;letter-spacing:.7px;font-variant-numeric:tabular-nums;
  transition:border-color .18s ease,box-shadow .18s ease}
.intl-tel-input.allow-dropdown > input::placeholder,
.intl-tel-input.allow-dropdown .form-control::placeholder{font-weight:400;letter-spacing:normal;color:#9aa7b8}
/* flag well on the LEFT — flow flag/code/arrow inline (plugin positions flag absolute, which hid +1 in LTR) */
.intl-tel-input.allow-dropdown .flag-container{left:0 !important;right:auto !important;width:auto !important;padding:0}
.intl-tel-input.allow-dropdown .selected-flag{
  display:flex !important;align-items:center;gap:7px;
  width:auto !important;height:100%;padding:0 13px;
  border-radius:11px 0 0 11px;
  border-inline-end:1px solid var(--eram-line);
  background:linear-gradient(180deg,#fbfdff,var(--eram-soft));
  transition:background .18s ease}
.intl-tel-input.allow-dropdown .selected-flag:hover,
.intl-tel-input.allow-dropdown .selected-flag[aria-expanded=true]{background:linear-gradient(180deg,#eef6fe,#e2effb)}
.intl-tel-input.allow-dropdown .iti-flag{
  position:static !important;margin:0 !important;top:auto !important;
  box-shadow:0 1px 2px rgba(11,31,58,.18);border-radius:2px;flex:0 0 auto}
.intl-tel-input.allow-dropdown .selected-dial-code{
  position:static !important;padding:0 !important;margin:0 !important;
  font-weight:700;color:var(--eram-blue);font-family:inherit;direction:ltr;white-space:nowrap}
/* default plugin triangle -> clean branded chevron */
.intl-tel-input.allow-dropdown .iti-arrow{
  position:static !important;border:0;width:7px;height:7px;margin:0 !important;flex:0 0 auto;
  border-inline-end:2px solid var(--eram-blue);border-bottom:2px solid var(--eram-blue);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.intl-tel-input.allow-dropdown .iti-arrow.up{transform:rotate(-135deg) translateY(1px)}
/* unified premium focus ring across the whole field (input + flag well) */
.intl-tel-input.allow-dropdown:focus-within > input,
.intl-tel-input.allow-dropdown:focus-within .form-control{
  border-color:var(--eram-cyan) !important;box-shadow:0 0 0 3px rgba(26,200,236,.16) !important}
.intl-tel-input.allow-dropdown:focus-within .selected-flag{background:linear-gradient(180deg,#eef6fe,#e2effb)}

/* ===== Custom Nameserver Management (childhosts table) — LTR ns/IP fields + branded suffix ===== */
.input-group:has(input[name="nameserver"]){direction:ltr}
.input-group:has(input[name="nameserver"]) .input-group-text,
.input-group:has(input[name="nameserver"]) .input-group-addon{background:var(--eram-soft) !important;color:var(--eram-blue) !important;font-weight:800;
  display:flex !important;align-items:center !important;justify-content:center !important;
  border-inline-start:1.5px solid var(--eram-line) !important;
  border-top-right-radius:10px !important;border-bottom-right-radius:10px !important;
  border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}
input[name="nameserver"],input[name="ipaddress"],input[name="currentipaddress"],input[name="newipaddress"]{direction:ltr;text-align:left}
input[name="nameserver"]::placeholder,input[name="ipaddress"]::placeholder{text-align:left;color:#aab6c6}
/* premium frame + breathing room for the management table */
table.table:has(input[name="nameserver"]),table.table:has(input[name="newipaddress"]){
  border:1.5px solid var(--eram-line) !important;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 26px -12px rgba(11,31,58,.14);background:#fff;margin-top:8px}
table.table:has(input[name="nameserver"]) thead th,table.table:has(input[name="newipaddress"]) thead th{
  background:var(--eram-soft) !important;padding:15px 18px;font-weight:800;color:var(--eram-ink) !important}
table.table:has(input[name="nameserver"]) tbody td,table.table:has(input[name="newipaddress"]) tbody td{padding:18px 18px;vertical-align:middle}
table.table:has(input[name="nameserver"]) tbody tr:hover{background:transparent}

/* ===== Premium private-nameserver management (registerns) — LTR ns/IP fields ===== */
.ns-mgmt .card{margin-bottom:20px}
.ns-mgmt .card-title{font-weight:800;color:var(--eram-ink);padding-bottom:13px;margin-bottom:22px;border-bottom:1px solid var(--eram-line);position:relative}
.ns-mgmt .card-title::after{content:"";position:absolute;bottom:-1px;inset-inline-start:0;width:52px;height:3px;border-radius:3px;background:var(--eram-grad)}
.ns-mgmt .col-form-label{font-weight:700;color:#41526b}
.ns-mgmt .form-group.row{align-items:center;margin-bottom:18px}
.ns-mgmt .input-group .input-group-text{background:var(--eram-soft) !important;color:var(--eram-blue) !important;font-weight:800;border-inline-start:1.5px solid var(--eram-line) !important}
.ns-mgmt input.form-control{direction:ltr;text-align:left}
.ns-mgmt input.form-control::placeholder{text-align:left;color:#aab6c6}
.ns-mgmt .btn-primary{padding:11px 34px !important;border-radius:999px !important;font-weight:700}

/* productdetails: kill the tiny (~8px) horizontal scrollbar on the usage-stats gauge panels (Bootstrap .row negative margins) */
.card-body.text-center,.panel-body.text-center{overflow-x:hidden}
/* productdetails: quick-create email field reads left-to-right (username@domain) */
.input-group:has(#cpanel-email-prefix){direction:ltr}
#cpanel-email-prefix{direction:ltr;text-align:left}

/* branded text selection */
::selection{background:rgba(26,200,236,.85);color:#fff}
::-moz-selection{background:rgba(26,200,236,.85);color:#fff}

/* premium form text: crisp ink values + clearly muted placeholders (contrast/a11y) */
.form-control,.custom-select,select.form-control,textarea.form-control{color:var(--eram-ink) !important}
.form-control::placeholder,textarea.form-control::placeholder{color:#9aa8bd !important;opacity:1}
.form-control:disabled,.form-control[readonly]{background:var(--eram-soft) !important;color:#5b6b80 !important}

/* ===== Premium forms (global polish: contact-info, profile, billing, order…) =====
   Comfortable height + soft fill that brightens on focus + refined hover/focus, branded
   labels/select-arrow/radios, premium tabs. Horizontal padding stays minimal so special
   inputs (phone flag-well padding-left, domain-search) keep their own spacing. */
.form-control,select.form-control,textarea.form-control,.custom-select{
  min-height:46px;padding-top:10px;padding-bottom:10px;
  background:#fcfdff;border:1.5px solid var(--eram-line);border-radius:12px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
textarea.form-control{min-height:108px;padding-top:12px}
.form-control:hover:not(:focus),select.form-control:hover:not(:focus),.custom-select:hover:not(:focus){border-color:#c4d3e4}
.form-control:focus,select.form-control:focus,textarea.form-control:focus,.custom-select:focus{
  background:#fff !important;border-color:var(--eram-cyan) !important;
  box-shadow:0 0 0 3px rgba(26,200,236,.16) !important;outline:0 !important}
.form-group{margin-bottom:20px}
.form-group > label,.col-form-label,.control-label{
  font-weight:600;color:#41526b;margin-bottom:7px;letter-spacing:.1px}
/* branded select arrow (RTL → arrow on the left) */
.custom-select,select.form-control{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232f86e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:left 14px center !important;background-size:15px !important;
  padding-left:40px}
/* branded radios & checkboxes */
input[type=radio],input[type=checkbox]{accent-color:var(--eram-blue)}
/* premium contact-info tabs (TechnicalContact / Billing / Admin / Registrant) */
.nav-tabs{border-bottom:1px solid var(--eram-line) !important;gap:3px}
.nav-tabs .nav-item .nav-link,.nav-tabs > li > a{
  border:0 !important;border-radius:10px 10px 0 0 !important;color:#5b6b82 !important;font-weight:600;
  padding:11px 18px !important;transition:color .15s ease,background .15s ease}
.nav-tabs .nav-item .nav-link:hover,.nav-tabs > li > a:hover{background:var(--eram-soft) !important;color:var(--eram-blue) !important}
.nav-tabs .nav-item .nav-link.active,.nav-tabs > li.active > a,.nav-tabs > li > a.active{
  color:var(--eram-blue) !important;background:transparent !important;position:relative}
.nav-tabs .nav-link.active::after,.nav-tabs > li.active > a::after,.nav-tabs > li > a.active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px;background:var(--eram-grad)}

/* ===== Premium ticket messages — sections inside the one card (no nested corners) ===== */
.view-ticket > .card-body:not(.p-3){padding:0;border-top:1px solid var(--eram-line)}
.ticket-reply.staff{background:#f7fbff}
.ticket-reply .posted-by{margin:0;padding:12px 22px;background:var(--eram-soft);
  border-bottom:1px solid var(--eram-line);font-size:.84rem;color:#5b6b80;line-height:1.9;overflow:hidden}
.ticket-reply.staff .posted-by{background:linear-gradient(90deg,rgba(47,134,230,.12),rgba(26,200,236,.05))}
.ticket-reply .posted-by-name{font-weight:800;color:var(--eram-ink)}
.ticket-reply .message{padding:20px 22px !important;line-height:2;color:#27384f}
.ticket-reply .message hr{border-color:var(--eram-line);margin:14px 0}
.requestor-badge{border-radius:999px !important;font-weight:700;padding:.34em .85em !important}

/* CC recipients: full-width email field + add button below it (input was clipping at 119px) */
.input-group.margin-bottom-5{display:block !important;border:0 !important;background:transparent !important;overflow:visible !important;box-shadow:none !important}
.input-group.margin-bottom-5 > .input-email{display:block;width:100% !important;border:1.5px solid var(--eram-line) !important;border-radius:11px !important;padding:.55rem .85rem !important;margin-bottom:8px !important;text-align:right}
.input-group.margin-bottom-5 > .input-group-append{display:block !important;width:100% !important}
.input-group.margin-bottom-5 > .input-group-append > .btn{width:100% !important;border-radius:11px !important}

/* clean branded chevron on native selects (replaces the browser ↕ double-arrow) */
select.form-control,select.custom-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f86e6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:left .95rem center !important;background-size:13px !important;
  padding-inline-start:2.2rem !important}

/* ===== Domain renewals list -> premium cards (was flat line-separated rows) ===== */
.domain-renewals .domain-renewal{background:#fff;border:1px solid var(--eram-line);border-radius:16px;
  padding:20px 24px;margin-bottom:16px;position:relative;overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(11,31,58,.5);transition:transform .25s,box-shadow .25s,border-color .25s}
.domain-renewals .domain-renewal:hover{transform:translateY(-3px);border-color:transparent;
  box-shadow:0 24px 48px -26px rgba(0,150,200,.45)}
.domain-renewals .domain-renewal::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  background:var(--eram-grad);transform:scaleY(0);transform-origin:bottom;transition:transform .25s}
.domain-renewals .domain-renewal:hover::before{transform:scaleY(1)}
.domain-renewals .domain-renewal{padding:22px 26px}
.domain-renewals .domain-renewal h3,.domain-renewals .domain-renewal h4,.domain-renewals .domain-renewal .domain{font-weight:800;color:var(--eram-ink)}
.domain-renewals .domain-renewal .label-success{background:#0fb597 !important;border-radius:999px;font-weight:700;padding:.34em .85em;font-size:.74rem;vertical-align:middle}
.domain-renewals .domain-renewal > p{color:#6b7e99 !important;font-size:.9rem;margin:4px 0 16px;padding-bottom:16px;border-bottom:1px dashed var(--eram-line)}
.domain-renewals .domain-renewal form .form-group,.domain-renewals .domain-renewal form .form-group.row{margin:0 0 14px}
.domain-renewals .domain-renewal .text-right .btn,.domain-renewals .domain-renewal .btn-add-renewal-to-cart{
  background:var(--eram-grad) !important;color:#fff !important;border:0 !important;border-radius:999px !important;
  padding:9px 30px !important;font-weight:700 !important;font-size:.92rem;
  box-shadow:0 12px 24px -12px rgba(0,150,200,.6);transition:transform .2s,box-shadow .25s}
.domain-renewals .domain-renewal .text-right .btn:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(0,150,200,.7)}

/* ===== Own-domain row (3rd domain option): FUSE www.|name|.tld into ONE seamless field (like register) =====
   www.|name = the .input-group (square right, no right border); the TLD <input> = square left + divider +
   rounded right, touching the input-group. Higher specificity than the generic class fusion above. */
.domain-selection-options .input-group:has(#owndomainsld){direction:ltr;
  border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:0 !important}
.domain-selection-options #owndomainsld{flex:1 1 auto !important;width:auto !important;min-width:0;text-align:left;
  border:0 !important;background:transparent !important;box-shadow:none !important}
.domain-selection-options .domains-row #owndomaintld{text-align:center;font-weight:700;color:var(--eram-blue) !important;
  border:1.6px solid var(--eram-line) !important;border-left:1.6px solid var(--eram-line) !important;
  border-radius:0 13px 13px 0 !important;min-height:54px !important;background:#fff !important;box-shadow:none !important;outline:0 !important}
.domain-selection-options .domains-row #owndomaintld:focus{border-color:var(--eram-cyan) !important;box-shadow:0 0 0 3px rgba(0,194,229,.14) !important}
.domain-selection-options .domains-row [class*="col"]:has(> #owndomaintld){flex:0 0 96px !important;max-width:96px !important;padding:0 !important}
#useOwnDomain{white-space:nowrap}

/* ===== Promo / coupon code field (cart) — fix tofu box + premium =====
   ROOT CAUSE of the «box» on the placeholder: the order-form prepends a `.field-icon` with
   `<i class="fas fa-ticket-alt">`, but FontAwesome glyphs don't map on this order-form page (and
   fa-ticket-alt was renamed in FA6), so the icon rendered as a notdef tofu box sitting ON TOP of the
   placeholder's first letters — it only LOOKED like «کوپن» was broken. The placeholder text is fine.
   Fix: hide the broken FA icon and draw a bulletproof inline-SVG tag icon as the input background. */
.form-group:has(#inputPromotionCode) .field-icon{display:none !important}
#inputPromotionCode{direction:rtl !important;
  border:1.5px solid var(--eram-line) !important;border-radius:11px !important;
  padding-right:42px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f86e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px 18px;
  transition:border-color .18s ease,box-shadow .18s ease}
#inputPromotionCode::placeholder{color:#9aa7b8}
#inputPromotionCode:focus{border-color:var(--eram-cyan) !important;box-shadow:0 0 0 3px rgba(26,200,236,.16) !important;outline:0 !important}
.promo button[name="validatepromo"]{background:var(--eram-grad) !important;border:0 !important;color:#fff !important;
  font-weight:700;border-radius:11px !important;padding:11px 16px !important;
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease}
.promo button[name="validatepromo"]:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(47,134,230,.28);color:#fff !important}

/* ===== EPP / domain transfer code — premium LTR monospace chip + copy button ===== */
.epp-result{margin-top:18px;padding:18px;border:1px solid var(--eram-line);border-radius:14px;
  background:linear-gradient(180deg,#fbfdff,var(--eram-soft));max-width:520px}
.epp-code-row .epp-code{flex:0 1 auto}
.epp-label{font-weight:700;color:#41526b;margin-bottom:13px}
.epp-label .fa-key{color:var(--eram-blue)}
.epp-code-row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.epp-code{flex:1 1 auto;min-width:200px;direction:ltr;text-align:left;unicode-bidi:isolate;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Courier New",monospace;font-size:17px;font-weight:700;
  letter-spacing:.5px;color:var(--eram-ink);background:#fff;border:1.5px dashed #b9d4ec;border-radius:11px;
  padding:13px 16px;user-select:all;display:flex;align-items:center;overflow-wrap:anywhere}
.epp-copy{flex:0 0 auto;background:var(--eram-grad) !important;border:0 !important;color:#fff !important;
  font-weight:700;border-radius:11px;padding:0 22px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  transition:filter .18s ease,transform .18s ease}
.epp-copy:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff !important}
.epp-copy.copied{background:#16a34a !important;transform:none}

/* ===== Domain TRANSFER config page («پیکره بندی دامنه ها», #frmConfigureDomains) =====
   The EPP input uses WHMCS's class="field" inside .prepend-icon (NOT .form-control), so the global
   premium input styles miss it entirely → it looked plain. Brand it, force LTR (EPP codes are Latin
   alphanumeric), and tidy the registration-period / hosting info into soft cards. */
#frmConfigureDomains .sub-heading .primary-bg-color{
  display:inline-block;direction:ltr;font-weight:800;font-size:1.12rem;color:var(--eram-blue) !important;
  background:var(--eram-soft);padding:7px 16px;border-radius:12px;letter-spacing:.3px}
#frmConfigureDomains .row > .col-sm-6 > .form-group{
  background:#fcfdff;border:1.5px solid var(--eram-line);border-radius:13px;padding:12px 16px;margin-bottom:16px}
#frmConfigureDomains .row > .col-sm-6 > .form-group > label{font-weight:600;color:#5b6b80;margin-bottom:2px}

/* EPP code field — premium + LTR; lock icon tucked inside the leading (left) edge */
#frmConfigureDomains .form-group.prepend-icon{position:relative;max-width:360px;margin-top:4px}
#frmConfigureDomains .prepend-icon .field{
  width:100%;min-height:48px;direction:ltr;text-align:left;box-sizing:border-box;
  padding:10px 16px 10px 46px;
  background:#fcfdff;border:1.5px solid var(--eram-line);border-radius:12px;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:.6px;font-weight:600;color:var(--eram-ink);
  transition:border-color .15s ease,box-shadow .15s ease}
#frmConfigureDomains .prepend-icon .field::placeholder{direction:rtl;font-family:inherit;letter-spacing:normal;font-weight:500;color:#9aa7b8}
#frmConfigureDomains .prepend-icon .field:focus{border-color:var(--eram-cyan);box-shadow:0 0 0 3px rgba(0,194,229,.18);outline:none}
#frmConfigureDomains .prepend-icon .field-icon{
  position:absolute;left:0;top:0;height:48px;width:46px;margin:0;padding:0;
  display:flex;align-items:center;justify-content:center;color:var(--eram-blue);opacity:.7;pointer-events:none}
#frmConfigureDomains .prepend-icon .field-help-text{display:block;margin-top:8px;color:#8290a3;font-size:.85rem;line-height:1.6}

/* ===== Final checkout (#frmCheckout) ===== */
/* The base order form prepends FontAwesome «field-icon»s, but no matching Font Awesome is loaded on the
   checkout page (the <i> resolves to an unloaded "Font Awesome 5 Pro" → empty notdef box). Each box was
   rendering as a grey tofu square sitting OVER the right-aligned text (e.g. "Behz□ad", "Shi□az"). The
   fields all carry clear Persian placeholders/labels, so hide the broken icons for a clean form.
   Scoped to #frmCheckout so the EPP lock on other pages is untouched. */
#frmCheckout .prepend-icon .field-icon{display:none !important}
#frmCheckout .prepend-icon .field,
#frmCheckout .prepend-icon input,
#frmCheckout .prepend-icon select,
#frmCheckout .prepend-icon textarea{padding-inline-start:14px !important}
/* tidy section sub-headings + spacing */
#frmCheckout .prepend-icon{margin-bottom:14px}
/* email reads LTR-Latin, not RTL */
#frmCheckout input[type=email],#frmCheckout input[name=email],#frmCheckout input#inputEmail{direction:ltr;text-align:left}

/* Terms-of-service agreement row (#frmCheckout): Bootstrap's .checkbox-inline pins the box to the LEFT
   (LTR absolute positioning) and leaves it unbranded. Force a flex row so the branded checkbox sits on
   the RIGHT (RTL leading edge), vertically centred, with the text + ToS link after it. */
#frmCheckout label.checkbox-inline,#frmCheckout label.form-check:has(a){
  display:inline-flex !important;flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:9px;direction:rtl;text-align:right;
  padding:0 !important;margin:0;line-height:1.7;font-weight:600;color:var(--eram-ink)}
#frmCheckout label.checkbox-inline input[type=checkbox],#frmCheckout label.form-check:has(a) input[type=checkbox]{position:relative !important;margin:0 !important;flex:none;top:auto !important}
#frmCheckout label.checkbox-inline a,#frmCheckout label.form-check:has(a) a{color:var(--eram-blue);font-weight:700;text-decoration:none}
#frmCheckout label.checkbox-inline a:hover,#frmCheckout label.form-check:has(a) a:hover{text-decoration:underline}
/* checked state was being overridden (stayed white → white checkmark invisible). Force the brand fill. */
#frmCheckout input[type=checkbox]:checked{background:var(--eram-grad) !important;border-color:transparent !important}
/* bulletproof checked fill: solid brand colour as base (in case the gradient image doesn't paint) + checkmark */
#frmCheckout input[type=checkbox]:checked{background-color:#2bb4e6 !important;background-image:var(--eram-grad) !important;border-color:transparent !important}

/* WHMCS skins the agree-checkbox with the iCheck plugin (div.icheckbox_square-blue + sprite), hiding the
   native <input> — so native checkbox branding is invisible under it. Re-skin the iCheck box itself to match
   the theme: white rounded box → brand gradient + white checkmark when ticked (iCheck adds .checked on click). */
#frmCheckout .icheckbox_square-blue{
  width:20px !important;height:20px !important;
  background:#fff !important;background-image:none !important;
  border:1.6px solid #c4d2e3 !important;border-radius:6px !important;box-sizing:border-box;
  transition:background .15s ease,border-color .15s ease}
#frmCheckout .icheckbox_square-blue.hover,#frmCheckout .icheckbox_square-blue:hover{border-color:var(--eram-cyan) !important}
#frmCheckout .icheckbox_square-blue.checked{background:#2bb4e6 !important;background-image:var(--eram-grad) !important;border-color:transparent !important}
#frmCheckout .icheckbox_square-blue.checked::after{
  content:"";position:absolute;left:50%;top:46%;width:6px;height:11px;
  border:solid #fff;border-width:0 2.6px 2.6px 0;transform:translate(-50%,-50%) rotate(45deg);z-index:1}
/* «تکمیل سفارش» (complete-order) button: keep the glow but don't lift/shift on hover */
#btnCompleteOrder:hover,#btnCompleteOrder:active{transform:none !important}

/* ===== Auth forms (login / register / password-reset) — premium polish ===== */
/* email/username is Latin → read LTR */
#inputEmail[type=email],.login-form input[type=email]{direction:ltr !important;text-align:left}
/* password-reveal eye: subtle ghost icon button, not a heavy gradient block */
.login-form .input-group .btn-reveal-pw,.input-group .btn.btn-reveal-pw,.btn-reveal-pw{background:transparent !important;background-image:none !important;color:#9aa7b8 !important;
  border:0 !important;box-shadow:none !important;width:46px !important;min-width:0 !important;padding:0 !important;filter:none !important}
.login-form .input-group .btn-reveal-pw:hover,.input-group .btn.btn-reveal-pw:hover,.btn-reveal-pw:hover,.btn-reveal-pw:focus{color:var(--eram-blue) !important;background:transparent !important}
/* Buttons keep their glow/brightness on hover but never lift or shift (consistent everywhere, per preference) */
.btn:hover,.btn-primary:hover,.btn-info:hover,.btn-success:hover,.btn-warning:hover,.btn-dark:hover,
.btn-default:hover,.btn-teal:hover,.btn-purple:hover,.ew-btn:hover,.btn-lg:hover,.btn-block:hover{transform:none !important}

/* === FIX: cart domain registration-period dropdown (#{domain}Pricing) ===
   viewcart.tpl renders each option as <li class="dropdown-item"><a>…</a></li>.
   The generic .dropdown-menu rules padded BOTH the <li> and the <a> → double-height,
   oversized panel that overflowed the page. Scope a compact, single-padded layout. */
.dropdown-menu[aria-labelledby$="Pricing"]{min-width:230px;max-height:60vh;overflow-y:auto;z-index:1060;padding:6px}
.dropdown-menu[aria-labelledby$="Pricing"] li.dropdown-item,
.dropdown-menu[aria-labelledby$="Pricing"] li.dropdown-item:hover{padding:0 !important;margin:0;background:none !important}
.dropdown-menu[aria-labelledby$="Pricing"] li.dropdown-item > a{display:block;padding:8px 14px !important;border-radius:8px;color:var(--eram-ink) !important;white-space:nowrap;font-size:.92rem;line-height:1.55}
.dropdown-menu[aria-labelledby$="Pricing"] li.dropdown-item > a:hover{background:var(--eram-soft) !important;color:var(--eram-blue) !important;padding-inline-end:14px !important}

/* === notifications dropdown — brand font + clean panel (no notch) === */
#Notifications .dropdown-menu,.notifications-list,.notification-list,
.dropdown-menu[aria-labelledby*="Notification"],[id*="Notification"] .dropdown-menu,
.navbar .dropdown-menu .notification,.popover{
  font-family:'Vazirmatn',Tahoma,Arial,sans-serif !important;
}
.dropdown-menu .notification,.dropdown-menu li.notification,.notifications-list li{
  font-family:'Vazirmatn',Tahoma,sans-serif !important;padding:13px 16px !important;line-height:1.95;
  color:var(--eram-ink);border-radius:10px;white-space:normal;
}
.dropdown-menu .notification *,.notifications-list *{font-family:inherit !important}
.dropdown-menu .notification:hover,.notifications-list li:hover{background:var(--eram-soft)}
.dropdown-menu .notification .text-muted,.dropdown-menu .notification small{color:#64768f !important}
/* if WHMCS renders notifications as a Bootstrap popover, brand it + drop the arrow */
.popover{border:1px solid var(--eram-line) !important;border-radius:14px !important;
  box-shadow:0 18px 44px -22px rgba(11,31,58,.3) !important;color:var(--eram-ink)}
.popover .arrow,.popover .popover-arrow,.popover::before,.popover::after{display:none !important}
.popover .popover-body,.popover-content{font-family:'Vazirmatn',Tahoma,sans-serif !important;line-height:1.95}

/* === bigger header logo (override) === */
.navbar-brand{width:248px !important;height:72px !important}
@media(max-width:600px){.navbar-brand{width:188px !important;height:54px !important}}

/* =====================================================================
   ثبت دامنه — modern redesign of the domain-register order page (2026-06-26)
   Replaces the default yellow search hero with an on-brand cyan→blue hero,
   modernises the TLD spotlight cards, suggestion rows, price table & promo
   boxes, and removes the "contact support to buy" button.
   ===================================================================== */

/* --- remove the "برای خرید با پشتیبانی تماس بگیرید" button everywhere --- */
.domain-contact-support,
.suggested-domains .domain-suggestion .actions .domain-contact-support,
.spotlight-tld-container .domain-contact-support{display:none !important}

/* --- page heading --- */
#order-standard_cart .header-lined h1{font-weight:800 !important;color:var(--eram-ink) !important;letter-spacing:-.3px}
#order-standard_cart > .row > .cart-body > p{color:#5a6b82;font-size:1.02rem;margin-bottom:18px}

/* --- SEARCH HERO: brand gradient, glow, faint globe --- */
#order-standard_cart .domain-checker-container{
  position:relative;overflow:hidden;margin:6px 0 28px !important;border-radius:24px !important;
  background:var(--eram-grad-d) !important;background-color:#1a4f99 !important;
  box-shadow:0 26px 60px -30px rgba(11,31,58,.6) !important;border:0 !important}
#order-standard_cart .domain-checker-container::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 90% at 88% -10%,rgba(27,201,236,.55),transparent 60%),
    radial-gradient(50% 80% at 6% 120%,rgba(47,134,230,.45),transparent 60%)}
#order-standard_cart .domain-checker-bg{
  position:relative;z-index:1;padding:64px 24px !important;margin:0 !important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%3E%3Ccircle%20cx='100'%20cy='100'%20r='92'/%3E%3Cellipse%20cx='100'%20cy='100'%20rx='38'%20ry='92'/%3E%3Cellipse%20cx='100'%20cy='100'%20rx='70'%20ry='92'/%3E%3Cellipse%20cx='100'%20cy='100'%20rx='92'%20ry='38'/%3E%3Cellipse%20cx='100'%20cy='100'%20rx='92'%20ry='70'/%3E%3Cline%20x1='8'%20y1='100'%20x2='192'%20y2='100'/%3E%3Cline%20x1='100'%20y1='8'%20x2='100'%20y2='192'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:108% 50% !important;background-size:340px !important;opacity:1}
@media(max-width:992px){#order-standard_cart .domain-checker-bg{padding:40px 16px !important;background-size:240px !important;background-position:120% 50% !important}}

/* the white search field becomes a clean flex pill */
#order-standard_cart .domain-checker-container .input-group-box{
  position:relative;z-index:2;max-width:660px;margin:0 auto !important;padding:8px !important;
  display:flex !important;flex-wrap:nowrap !important;align-items:stretch;gap:8px;
  background:#fff !important;border-radius:16px !important;border:0 !important;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.45) !important}
#order-standard_cart .input-group-box .form-control{
  flex:1 1 auto !important;border:0 !important;background:transparent !important;box-shadow:none !important;
  height:52px !important;font-size:1.06rem !important;font-weight:600;color:var(--eram-ink) !important;
  direction:ltr;text-align:center;border-radius:12px !important;min-width:0}
#order-standard_cart .input-group-box .form-control:focus{box-shadow:none !important;outline:none !important}
#order-standard_cart .input-group-box .input-group-btn,
#order-standard_cart .input-group-box .input-group-append{flex:0 0 auto !important;display:flex}
#order-standard_cart .input-group-box .btn,
#order-standard_cart .input-group-box #btnCheckAvailability{
  height:52px !important;min-height:52px !important;padding:0 34px !important;border:0 !important;
  border-radius:12px !important;font-weight:800 !important;font-size:1rem !important;color:#fff !important;
  background:var(--eram-grad) !important;box-shadow:0 12px 24px -12px rgba(27,201,236,.7) !important;
  display:inline-flex;align-items:center;justify-content:center;transition:filter .2s,transform .2s;white-space:nowrap}
#order-standard_cart .input-group-box .btn:hover,
#order-standard_cart .input-group-box #btnCheckAvailability:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* "domain not available / available" result headline */
#searchDomainInfo .domain-checker-unavailable{color:#d23f3f !important;font-weight:700}
#searchDomainInfo .domain-checker-available{color:#16a06a !important;font-weight:700}

/* --- SPOTLIGHT TLD CARDS (me. biz. info. ...) — modern selectable cards --- */
#order-standard_cart .spotlight-tld-container{
  flex:1 1 130px !important;min-width:130px !important;max-width:172px !important}
#order-standard_cart .spotlight-tld{
  background:#fff !important;border:1.5px solid var(--eram-line) !important;border-radius:16px !important;
  padding:18px 12px 14px !important;text-align:center;font-weight:800;font-size:1.12rem;color:var(--eram-ink) !important;
  box-shadow:0 8px 22px -16px rgba(11,31,58,.22) !important;transition:transform .18s,box-shadow .18s,border-color .18s}
#order-standard_cart .spotlight-tld:hover{transform:translateY(-3px);border-color:var(--eram-cyan) !important;
  box-shadow:0 18px 34px -18px rgba(27,201,236,.45) !important}
#order-standard_cart .spotlight-tld .available.price{color:var(--eram-blue) !important;font-weight:800;font-size:.92rem;margin-top:4px}
#order-standard_cart .spotlight-tld-container .btn.eram-tld-add{
  background:var(--eram-grad) !important;color:#fff !important;border:0 !important;border-radius:11px !important;
  font-weight:800 !important;box-shadow:0 10px 20px -12px rgba(27,201,236,.6) !important}

/* --- SUGGESTED DOMAINS — round the card + cleaner rows --- */
#order-standard_cart .suggested-domains{
  border:1px solid var(--eram-line) !important;border-radius:18px !important;overflow:hidden !important;
  box-shadow:0 14px 34px -24px rgba(11,31,58,.28) !important;margin-top:8px}
#order-standard_cart .suggested-domains .panel-heading,
#order-standard_cart .suggested-domains .card-header{
  background:var(--eram-soft) !important;border:0 !important;font-weight:800 !important;color:var(--eram-ink) !important;
  padding:15px 20px !important;font-size:1.05rem}
.suggested-domains .domain-suggestion.clone .actions .btn-add-to-cart{
  background:var(--eram-grad) !important;color:#fff !important;border:0 !important;font-weight:800 !important}
.suggested-domains .domain-suggestion.clone .actions .btn-add-to-cart:hover{filter:brightness(1.07)}

/* --- TLD PRICE TABLE (browse extensions by category) --- */
#order-standard_cart .tld-filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
#order-standard_cart .tld-filters .badge{
  background:#fff !important;color:var(--eram-ink) !important;border:1.5px solid var(--eram-line) !important;
  border-radius:999px !important;padding:8px 16px !important;font-size:.86rem !important;font-weight:700 !important;
  cursor:pointer;transition:.16s}
#order-standard_cart .tld-filters .badge:hover{border-color:var(--eram-cyan) !important;color:var(--eram-blue) !important}
#order-standard_cart .tld-filters .badge.active,
#order-standard_cart .tld-filters .badge.badge-primary{background:var(--eram-grad) !important;color:#fff !important;border-color:transparent !important}
#order-standard_cart .domain-pricing .bg-white{border:1px solid var(--eram-line) !important;border-radius:16px !important;overflow:hidden}
#order-standard_cart .tld-pricing-header{
  background:var(--eram-grad-d) !important;color:#fff !important;font-weight:800 !important;padding:14px 0 !important}
#order-standard_cart .tld-pricing-header .tld-column{color:#fff !important}
#order-standard_cart .tld-row{padding:14px 0 !important;border-bottom:1px solid var(--eram-line) !important;transition:background .14s}
#order-standard_cart .tld-row:hover{background:var(--eram-soft) !important}
#order-standard_cart .tld-row strong{color:var(--eram-blue) !important;font-size:1.05rem;direction:ltr;display:inline-block}

/* --- BOTTOM PROMO BOXES (add hosting / transfer) --- */
#order-standard_cart .domain-promo-box{
  background:#fff !important;border:1px solid var(--eram-line) !important;border-radius:18px !important;
  padding:28px !important;text-align:center;box-shadow:0 14px 34px -24px rgba(11,31,58,.28) !important;
  height:100%;transition:transform .18s,box-shadow .18s}
#order-standard_cart .domain-promo-box:hover{transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(11,31,58,.34) !important}
#order-standard_cart .domain-promo-box i{color:var(--eram-cyan) !important;margin-bottom:6px}
#order-standard_cart .domain-promo-box h3{color:var(--eram-ink) !important;font-weight:800 !important}
#order-standard_cart .domain-promo-box .btn{
  background:var(--eram-grad) !important;color:#fff !important;border:0 !important;border-radius:12px !important;
  font-weight:800 !important;padding:11px 28px !important;box-shadow:0 12px 24px -14px rgba(27,201,236,.6) !important}
#order-standard_cart .domain-promo-box .btn.btn-warning{background:var(--eram-grad) !important}

/* --- right sidebar (categories / actions) polish --- */
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .cart-sidebar .card{border:1px solid var(--eram-line) !important;border-radius:16px !important;overflow:hidden;box-shadow:0 10px 28px -22px rgba(11,31,58,.25) !important}

/* === Enamad seal in the WHMCS footer === */
.eram-footer .footer-enamad{display:flex;justify-content:flex-start;margin-top:14px}
.eram-footer .footer-enamad a{display:inline-block;background:#fff;border-radius:14px;padding:7px;line-height:0;box-shadow:0 14px 34px -18px rgba(0,0,0,.5)}
.eram-footer .footer-enamad img{display:block;width:92px;max-width:92px;height:auto;border-radius:9px}
/* domain extensions read with the dot on the LEFT site-wide */
.tld,.extension,.tld-amt,.spotlight-tld,.tld-row strong{direction:ltr;unicode-bidi:isolate}
/* little red maple beside the footer GCMS link (matches the main site) */
.eram-footer .footer-links a .fl-maple{display:inline-flex;vertical-align:-2px;margin-inline-start:3px}
.eram-footer .footer-links a .fl-maple svg{width:13px;height:13px;color:#d52b1e}

/* ===================================================================
   ثبت دامنه — domain page polish v2 (2026-06-26)
   =================================================================== */
/* page headings */
#order-standard_cart .header-lined h1{letter-spacing:-.3px}
#order-standard_cart .domain-pricing h4{font-weight:800 !important;color:var(--eram-ink) !important;margin:6px 0 14px}
#order-standard_cart .domain-pricing > h4,
#order-standard_cart .suggested-domains .card-header{font-size:1.12rem}

/* --- featured TLD cards (.name / .net / .com) → premium cards, refined price bar --- */
#order-standard_cart .featured-tlds-container{margin-top:6px}
#order-standard_cart .featured-tld{
  background:#fff;border:1px solid var(--eram-line);border-radius:16px;overflow:hidden;margin-bottom:20px;
  box-shadow:0 14px 34px -22px rgba(11,31,58,.3);transition:transform .18s ease,box-shadow .18s ease}
#order-standard_cart .featured-tld:hover{transform:translateY(-4px);box-shadow:0 26px 50px -22px rgba(11,31,58,.4)}
#order-standard_cart .featured-tld .img-container{
  padding:30px 20px 20px !important;min-height:106px;display:flex;align-items:center;justify-content:center}
#order-standard_cart .featured-tld .img-container img{max-height:44px;width:auto}
#order-standard_cart .featured-tld .price{
  color:#fff !important;font-weight:800 !important;font-size:1.05rem !important;letter-spacing:.2px;
  padding:14px 10px !important;text-align:center !important;border:0 !important;
  direction:rtl !important;unicode-bidi:isolate !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.10)) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.2)}
/* category filter pills: clear clickable + active states */
#order-standard_cart .tld-filters .badge{cursor:pointer !important}
#order-standard_cart .tld-filters .badge.active{background:var(--eram-grad) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 8px 18px -8px rgba(27,201,236,.55)}

/* --- pricing table header: clean, uniform (kill stray column highlight) --- */
#order-standard_cart .tld-pricing-header{border-radius:14px 14px 0 0 !important;overflow:hidden;padding:15px 0 !important}
#order-standard_cart .tld-pricing-header [class*="col-"],
#order-standard_cart .tld-pricing-header .tld-column,
#order-standard_cart .tld-pricing-header .row{background:transparent !important;color:#fff !important;font-weight:800 !important}
#order-standard_cart .domain-pricing .bg-white{box-shadow:0 16px 38px -28px rgba(11,31,58,.32) !important}
#order-standard_cart .tld-row .two-row-center strong{font-size:1.14rem}
#order-standard_cart .tld-row small{color:#64768f}
#order-standard_cart .tld-row:last-child{border-bottom:0 !important}

/* --- category filter pills: subtle depth --- */
#order-standard_cart .tld-filters .badge{box-shadow:0 4px 12px -8px rgba(11,31,58,.2)}

/* --- search field + button refinements --- */
#order-standard_cart .input-group-box #btnCheckAvailability{min-width:122px;letter-spacing:.3px}
#order-standard_cart .domain-checker-container{margin-bottom:34px !important}

/* ===== audit 2026-07-01: skip-link (WCAG 2.4.1) ===== */
.eram-skip{position:absolute;inset-inline-start:-9999px;top:10px;z-index:3000;background:#0b1f3a;color:#fff !important;padding:11px 20px;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none}
.eram-skip:focus{inset-inline-start:10px}

/* ERAM-SSTATUS: server-status polish */
#main-body .table-server-status th{background:#0b1f3a;color:#fff;font-weight:700;padding:14px 12px}
#main-body .table-server-status td{padding:14px 12px;vertical-align:middle}
#main-body .table-server-status tr:hover td{background:#f4f8fc}
#main-body .table-server-status .fa-check-circle{color:#16a34a;font-size:19px}
#main-body .table-server-status .fa-minus-circle,#main-body .table-server-status .fa-times-circle{color:#dc2626;font-size:19px}

/* ═══ ERAM-V9-DOMPICKER: RTL polish for the WHMCS 9 product-domain step ═══ */
#domainregister textarea#message{direction:rtl;text-align:right;min-height:74px;border-radius:14px;padding:12px 16px;font-size:13.5px;line-height:2;resize:vertical;}
#domainregister textarea#message::placeholder{color:#8aa0bb;font-size:12.5px;line-height:1.9;}
.domain-checker-advanced .domain-search-filters,.domain-checker-advanced .advanced-search-options{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:flex-start;padding:10px 4px;}
.domain-selection-options .option>label{font-weight:700;font-size:14.5px;}
.domain-selection-options .input-group .input-group-text{direction:ltr;font-family:Tahoma,Arial,sans-serif;font-size:13px;color:#4a6076;}
.domain-selection-options input#owndomaintld,.domain-selection-options input#registersld,.domain-selection-options input#owndomainsld,.domain-selection-options input#transfersld{direction:ltr;text-align:left;}
#domainSuggestions .domain-suggestion .domain,#domainSuggestions .domain-suggestion .extension{direction:ltr;display:inline-block;}
#primaryLookupResult{padding:10px 0;}

/* ═══ ERAM-V9-DOMPICKER-2: taller AI box (both placeholder lines visible) + finished filter row ═══ */
#domainregister textarea#message{min-height:96px !important;}
#domainregister .domains-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
#domainregister .domains-row > .multiselect,
#domainregister .domains-row .btn-group{border-radius:12px;}
#domainregister .domains-row label{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:13px;color:#33475f;cursor:pointer;background:#fff;border:1px solid #dbe6f2;border-radius:12px;padding:8px 14px;}
#domainregister .domains-row label input[type="checkbox"].no-icheck{appearance:auto;-webkit-appearance:checkbox;width:16px;height:16px;margin:0;accent-color:#1f6fd6;position:static;opacity:1;}
#domainregister .domain-checker-advanced .btn-group .multiselect{background:#fff;border:1px solid #dbe6f2;border-radius:12px !important;padding:8px 14px;font-size:13px;color:#33475f;}

/* ═══ ERAM-V9-DOMPICKER-3: beat iCheck inline styles; stable textarea height ═══ */
#domainregister textarea#message{height:96px !important;min-height:96px !important;line-height:1.9 !important;}
#domainregister textarea#message::placeholder{line-height:1.9 !important;font-size:12.5px;color:#8aa0bb;}
#domainregister .domains-row label [class*="icheckbox"]{position:static !important;display:inline-flex !important;align-items:center;width:auto !important;height:auto !important;background:none !important;border:none !important;}
#domainregister .domains-row label [class*="icheckbox"] ins{display:none !important;}
#domainregister .domains-row label input[type="checkbox"]{position:static !important;opacity:1 !important;visibility:visible !important;display:inline-block !important;width:16px !important;height:16px !important;margin:0 !important;accent-color:#1f6fd6;cursor:pointer;}
#domainregister .col-sm-2 #btnCheckAvailability,#domainregister button#btnCheckAvailability{min-height:52px;border-radius:14px;margin-top:2px;}

/* ═══════ ERAM-V9-DOMPICKER-FINAL: premium RTL restyle of the WHMCS 9 AI domain picker ═══════ */
/* the redesign's classic-searchbar pill (52px, LTR) must NOT apply inside the advanced block */
#domainregister.domain-checker-advanced .domains-row{height:auto !important;background:transparent !important;border:none !important;box-shadow:none !important;direction:rtl !important;display:flex !important;flex-wrap:wrap !important;gap:10px 14px;align-items:center;padding:0 !important}
#domainregister.domain-checker-advanced .domains-row:focus-within{box-shadow:none !important;border:none !important}
/* AI textarea */
#domainregister textarea#message{height:96px !important;min-height:96px !important;width:100% !important;direction:rtl !important;text-align:right !important;border:1.5px solid #dbe6f2 !important;border-radius:16px !important;padding:14px 18px !important;font-size:13.5px !important;line-height:1.9 !important;resize:vertical;background:#fff !important;color:#1c2c40}
#domainregister textarea#message:focus{border-color:#00c2e5 !important;box-shadow:0 0 0 4px rgba(0,194,229,.12) !important;outline:none !important}
#domainregister textarea#message::placeholder{color:#93a8c2 !important;font-size:12.75px !important;line-height:1.9 !important}
/* بررسی button fills the textarea height */
#domainregister button#btnCheckAvailability{height:96px !important;min-height:96px !important;border-radius:16px !important;font-size:15px;font-weight:800;padding:0 26px !important}
/* filter chips: uniform pills */
#domainregister.domain-checker-advanced .domains-row .btn-group > button.multiselect{background:#fff !important;border:1.5px solid #dbe6f2 !important;border-radius:12px !important;padding:9px 16px !important;margin:0 !important;font-size:13px !important;font-weight:600 !important;color:#33475f !important;height:auto !important;min-width:132px;text-align:right}
#domainregister.domain-checker-advanced .domains-row .btn-group > button.multiselect:hover{border-color:#b9d2ec !important}
/* dropdown panels */
#domainregister .multiselect-container.dropdown-menu{direction:rtl !important;text-align:right !important;border-radius:14px !important;border:1px solid #e3ecf5 !important;box-shadow:0 18px 44px rgba(11,31,58,.14) !important;padding:8px !important;min-width:230px;max-height:290px;overflow-y:auto}
#domainregister .multiselect-container li a{padding:6px 9px !important;border-radius:9px;display:block;text-decoration:none}
#domainregister .multiselect-container li a:hover,#domainregister .multiselect-container li.active a{background:#f2f7fc !important}
#domainregister .multiselect-container li a label{display:flex !important;flex-direction:row !important;align-items:center;gap:9px;margin:0 !important;padding:0 !important;font-size:13px !important;font-weight:500 !important;color:#26364a !important;cursor:pointer;direction:ltr;justify-content:flex-end}
#domainregister .multiselect-container .multiselect-item.filter{width:100% !important;padding:4px 4px 10px !important}
#domainregister .multiselect-container .multiselect-item.filter input{width:100% !important;border:1.5px solid #e3ecf5 !important;border-radius:10px !important;padding:8px 12px !important;direction:rtl;text-align:right;font-size:13px !important}
#domainregister .multiselect-container input[type="radio"],#domainregister .multiselect-container input[type="checkbox"]{position:static !important;opacity:1 !important;width:15px !important;height:15px !important;margin:0 !important;accent-color:#1f6fd6;cursor:pointer}
/* safe-search chip */
#domainregister.domain-checker-advanced .domains-row > label{display:inline-flex !important;align-items:center;gap:9px;background:#fff !important;border:1.5px solid #dbe6f2 !important;border-radius:12px !important;padding:9px 16px !important;margin:0 !important;font-size:13px !important;font-weight:600 !important;color:#33475f !important;cursor:pointer}
#domainregister.domain-checker-advanced .domains-row > label input[type="checkbox"]{position:static !important;opacity:1 !important;visibility:visible !important;display:inline-block !important;width:16px !important;height:16px !important;margin:0 !important;accent-color:#1f6fd6;cursor:pointer}
#domainregister.domain-checker-advanced .domains-row > label [class*="icheckbox"]{position:static !important;display:inline-flex !important;width:auto !important;height:auto !important;background:none !important;border:none !important;margin:0 !important}
#domainregister.domain-checker-advanced .domains-row > label [class*="icheckbox"] ins{display:none !important}
/* sidebar panel headers: chevron at the far end, breathing room */
.sidebar .card-header h3,.sidebar .panel-heading h3{display:flex !important;align-items:center;gap:9px;width:100%;margin:0}
.sidebar .card-header h3 .card-minimise,.sidebar .panel-heading h3 .panel-minimise{margin-inline-start:auto;float:none !important}

/* ═══ ERAM-V9-SPACING: RTL gaps for WHMCS 9 sidebar structure + bidi-safe mixed-script text ═══ */
/* sidebar items: icon wrapper was LTR-designed — glue between icon/radio and label in RTL */
.sidebar-menu-item-wrapper{display:flex !important;align-items:center;gap:9px;direction:rtl;}
.sidebar-menu-item-icon-wrapper{margin:0 !important;flex:0 0 auto;display:inline-flex;align-items:center;}
.sidebar-menu-item-icon{margin:0 !important;}
.list-group-item .sidebar-menu-item-wrapper .badge{margin-inline-start:auto;}
/* generic sidebar links that still use bare <i> + text */
.sidebar .list-group-item > i,.sidebar .list-group-item > .fas,.sidebar .list-group-item > .far{margin-inline-end:8px;}
/* client-info address block: each line resolves its own direction (fixes ".Hang Sq" period jump) */
.client-info-card .card-body,.client-info .card-body,#main-body address,
.card-body p.address,.client-info-details{unicode-bidi:plaintext;}
/* mixed-script one-liners: ticket subjects, domain names in tables, service labels */
.tablelist td a,.table-list td a,td[data-label] a{unicode-bidi:plaintext;}
/* navbar greeting: keep name+greeting composed cleanly */
.navbar .dropdown-toggle{unicode-bidi:plaintext;}

/* ═══ ERAM-V9-SPACING-3: bidi-correct text inputs (address fields hold LTR content in an RTL form) ═══ */
#inputAddress1,#inputAddress2,#inputCity,#inputState,#inputPostcode,
input[name="address1"],input[name="address2"],input[name="city"],input[name="state"],input[name="postcode"]{unicode-bidi:plaintext;}
/* ERAM-V9-SPACING-4: keep form alignment uniform while dir=auto fixes punctuation sides */
#inputFirstName,#inputLastName,#inputCompanyName,#inputAddress1,#inputAddress2,#inputCity,#stateinput,#inputPostcode{text-align:right !important;}

/* ═══ ERAM-V9-PREMIUM: RTL list markers + mixed-script usage stats ═══ */
#main-body ul:not([class]){direction:rtl;padding-right:1.4em !important;padding-left:0 !important;}
#resourceusage p,#main-body .text-center p{unicode-bidi:plaintext;}

/* ═══ ERAM-V9-PREMIUM-2: THE root alignment fix — bootstrap LTR build sets body{text-align:left};
   the 9.0 twenty-one rebase lost the RTL compensation. Everything that relies on inheritance
   (lists, free paragraphs, headings without alignment classes) rendered left-aligned. ═══ */
body{text-align:right;}
/* ERAM-V9-PREMIUM-3: dashboard stat tiles — count floats opposite the label (was overlapping the icon) */
#main-body .stat{float:left !important;}
/* ERAM-V9-PREMIUM-4: dashboard tiles as RTL grid — icon right, count+label left, nothing overlaps */
#main-body .tile{display:grid !important;grid-template-columns:auto 1fr;grid-template-areas:"icon stat" "icon title";column-gap:16px;row-gap:2px;align-items:center;position:relative;padding:20px 22px !important;}
#main-body .tile > i{grid-area:icon;font-size:40px;position:static !important;float:none !important;}
#main-body .tile .stat{grid-area:stat;float:none !important;position:static !important;font-size:23px;font-weight:800;line-height:1.2;text-align:start;}
#main-body .tile .title{grid-area:title;position:static !important;float:none !important;font-size:13px;text-align:start;}
#main-body .tile .highlight{position:absolute;bottom:0;inset-inline:0;height:3px;}

/* ERAM-V9: EPP code centered in its box */
.epp-code{text-align:center !important;display:flex !important;align-items:center;justify-content:center;}

/* ═══ ERAM-V9-PREMIUM-5: cart pages — renewals layout, picker button, dropdown anchors, breadcrumb, file input ═══ */
/* renewals: title and search side by side instead of overlapping */
#order-standard_cart .header-lined{display:flex !important;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
#order-standard_cart .header-lined .pull-right,#order-standard_cart .header-lined .float-right{float:none !important;}
/* renewals: pricing select wide enough for «تومان» */
#order-standard_cart .select-renewal-pricing{min-width:235px !important;}
/* renewals: order-summary back into the flow (the scrollingPanel JS positions it for LTR only) */
#order-standard_cart .secondary-cart-sidebar{position:static !important;inset:auto !important;width:100% !important;max-width:360px;margin:0 auto 22px;}
/* AI picker: بررسی button — compact pill, top-aligned with the box, no wrapping */
#domainregister button#btnCheckAvailability{height:96px !important;min-height:0 !important;width:auto !important;border-radius:16px !important;display:inline-flex !important;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:0 28px !important;font-size:15px;align-self:flex-start !important;}
/* picker dropdowns: anchor to their own chip (were escaping to the page corner) */
#domainregister .domains-row .btn-group{position:relative !important;}
#domainregister .multiselect-container.dropdown-menu{position:absolute !important;top:calc(100% + 6px) !important;inset-inline-start:0 !important;inset-inline-end:auto !important;}
/* breadcrumb: balanced separators on the correct side */
.breadcrumb-item + .breadcrumb-item{padding-inline-start:9px;}
.breadcrumb-item + .breadcrumb-item::before{content:"/";padding-inline-end:9px;float:none !important;}
/* file inputs (ticket attachments): roomy, RTL-safe */
#main-body input[type="file"]{min-height:46px;padding:9px 12px !important;line-height:1.5;}

/* ═══ ERAM-V9-PREMIUM-6: ثبت دامنه hero — proper card layout for the 9.0 AI search ═══ */
#frmDomainChecker .input-group-box:has(#message){display:flex !important;flex-wrap:wrap;gap:12px;background:#fff;border-radius:22px;padding:16px 18px;height:auto !important;box-shadow:0 24px 60px rgba(11,31,58,.28);align-items:center;}
#frmDomainChecker .input-group-box #message{flex:1 1 100%;order:1;min-height:88px;border:1.5px solid #e3ecf5 !important;border-radius:14px !important;padding:12px 16px !important;direction:rtl;text-align:right;font-size:13.5px;line-height:1.9;resize:vertical;background:#fbfdff;}
#frmDomainChecker .input-group-box #message:focus{border-color:#00c2e5 !important;box-shadow:0 0 0 4px rgba(0,194,229,.12);outline:none;}
#frmDomainChecker .input-group-box #btnCheckAvailability{order:2;height:44px !important;border-radius:12px !important;padding:0 26px !important;display:inline-flex !important;align-items:center;gap:7px;white-space:nowrap;font-size:14px;width:auto !important;}
#frmDomainChecker .input-group-box .btn-group{order:3;position:relative !important;}
#frmDomainChecker .input-group-box .btn-group > .multiselect{background:#f6f9fd !important;border:1.5px solid #e3ecf5 !important;border-radius:12px !important;padding:10px 16px !important;font-size:13px !important;color:#33475f !important;}
#frmDomainChecker .input-group-box > label{order:4;display:inline-flex !important;align-items:center;gap:8px;background:#f6f9fd;border:1.5px solid #e3ecf5;border-radius:12px;padding:10px 16px;margin:0 !important;font-size:13px !important;font-weight:600;color:#33475f !important;cursor:pointer;}
#frmDomainChecker .input-group-box > label input[type="checkbox"]{position:static !important;opacity:1 !important;visibility:visible !important;display:inline-block !important;width:16px !important;height:16px !important;margin:0 !important;accent-color:#1f6fd6;}
#frmDomainChecker .input-group-box > label [class*="icheckbox"]{position:static !important;display:inline-flex !important;width:auto !important;height:auto !important;background:none !important;border:none !important;margin:0 !important;}
#frmDomainChecker .input-group-box > label [class*="icheckbox"] ins{display:none !important;}
#frmDomainChecker .multiselect-container.dropdown-menu{position:absolute !important;top:calc(100% + 6px) !important;inset-inline-start:0 !important;inset-inline-end:auto !important;direction:rtl;text-align:right;border-radius:14px !important;border:1px solid #e3ecf5 !important;box-shadow:0 18px 44px rgba(11,31,58,.14) !important;padding:8px !important;min-width:230px;max-height:290px;overflow-y:auto;z-index:1060;}
#frmDomainChecker .multiselect-container li a{padding:6px 9px !important;border-radius:9px;display:block;}
#frmDomainChecker .multiselect-container li a label{display:flex !important;align-items:center;gap:9px;margin:0 !important;padding:0 !important;font-size:13px !important;background:none;border:none;direction:ltr;justify-content:flex-end;}
#frmDomainChecker .multiselect-container .multiselect-item.filter{width:100% !important;padding:4px 4px 10px !important;}
#frmDomainChecker .multiselect-container .multiselect-item.filter input{width:100% !important;border:1.5px solid #e3ecf5 !important;border-radius:10px !important;padding:8px 12px !important;direction:rtl;text-align:right;}
#frmDomainChecker .multiselect-container input[type="radio"],#frmDomainChecker .multiselect-container input[type="checkbox"]{position:static !important;opacity:1 !important;width:15px !important;height:15px !important;margin:0 !important;accent-color:#1f6fd6;}
.domain-checker-bg{height:auto !important;}

/* ERAM-V9-PREMIUM-6b: advanced hero — full-width card inside the blue band */
#frmDomainChecker .row:has(#message) > [class*="col-"]{flex:0 0 94% !important;max-width:94% !important;width:94% !important;margin:0 auto !important;}
.domain-checker-bg:has(#message){display:flex;align-items:center;padding:28px 0 !important;}
.domain-checker-bg:has(#message) form{width:100%;}

/* ERAM-V9-PREMIUM-6c: kill stock absolute positioning on the search button; textarea owns its row */
#frmDomainChecker .input-group-box:has(#message) #btnCheckAvailability{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;}
#frmDomainChecker .input-group-box:has(#message) #message{flex:1 1 100% !important;width:100% !important;max-width:100% !important;}
#frmDomainChecker .input-group-box > label{white-space:nowrap;}

/* ERAM-V9-PREMIUM-6d: hero AI card as locked grid (cart css loads after theme css and was beating flex rules) */
#frmDomainChecker .input-group-box:has(#message){display:grid !important;grid-template-columns:auto auto auto 1fr !important;grid-template-areas:"msg msg msg msg" "btn tld len safe" !important;gap:12px !important;padding:18px !important;height:auto !important;align-items:center !important;border-radius:22px !important;background:#fff !important;}
#frmDomainChecker .input-group-box:has(#message) #message{grid-area:msg;width:100% !important;min-height:88px !important;}
#frmDomainChecker .input-group-box:has(#message) #btnCheckAvailability{grid-area:btn;justify-self:start;}
#frmDomainChecker .input-group-box:has(#message) .btn-group:nth-of-type(1){grid-area:tld;}
#frmDomainChecker .input-group-box:has(#message) .btn-group:nth-of-type(2){grid-area:len;}
#frmDomainChecker .input-group-box:has(#message) > label{grid-area:safe;justify-self:start;}

/* ═══════════ ERAM-MOTION: premium motion & effects layer (entire portal) ═══════════ */
:root{--eram-ease:cubic-bezier(.22,.61,.36,1);}
@media (prefers-reduced-motion: no-preference){

/* page entry: content rises in softly */
#main-body{animation:eramPageIn .55s var(--eram-ease) both;}
@keyframes eramPageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* staggered tile entrance + count-up handled in JS */
.tiles .row > div:nth-child(1) .tile{animation:eramRise .6s var(--eram-ease) .05s both;}
.tiles .row > div:nth-child(2) .tile{animation:eramRise .6s var(--eram-ease) .13s both;}
.tiles .row > div:nth-child(3) .tile{animation:eramRise .6s var(--eram-ease) .21s both;}
.tiles .row > div:nth-child(4) .tile{animation:eramRise .6s var(--eram-ease) .29s both;}
@keyframes eramRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* cards: gentle lift on hover with deep soft shadow */
#main-body .card{transition:transform .35s var(--eram-ease),box-shadow .35s var(--eram-ease);}
#main-body .card:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(11,31,58,.10);}

/* stat tiles: lift + animated gradient ring + playful icon */
#main-body .tile{transition:transform .35s var(--eram-ease),box-shadow .35s var(--eram-ease);overflow:hidden;}
#main-body .tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,#00c2e5,#1f6fd6,#7fd6ef);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none;}
#main-body .tile:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(31,111,214,.18);}
#main-body .tile:hover::before{opacity:1;}
#main-body .tile > i{transition:transform .45s var(--eram-ease);}
#main-body .tile:hover > i{transform:scale(1.14) rotate(-7deg);}
#main-body .tile .highlight{transition:height .3s var(--eram-ease);}
#main-body .tile:hover .highlight{height:5px;}

/* buttons: lift, glow, sheen sweep */
.btn{transition:transform .25s var(--eram-ease),box-shadow .25s var(--eram-ease),filter .25s !important;position:relative;overflow:hidden;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.97);}
.btn-primary,#main-body a.btn[class*="btn-"]{box-shadow:0 8px 20px rgba(31,111,214,.22);}
.btn-primary:hover{box-shadow:0 14px 32px rgba(31,111,214,.38);filter:brightness(1.06);}
.btn-primary::after{content:"";position:absolute;top:0;inset-inline-start:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:inset-inline-start .65s var(--eram-ease);pointer-events:none;}
.btn-primary:hover::after{inset-inline-start:130%;}

/* sidebar items: slide-in accent */
.sidebar .list-group-item{transition:background .25s,padding .3s var(--eram-ease),color .25s;}
.sidebar .list-group-item:hover{background:#f2f8ff;padding-inline-start:1.4rem;}

/* tables: living rows */
#main-body table tbody tr{transition:background .22s,box-shadow .22s;}
#main-body table tbody tr:hover{background:#f6faff !important;box-shadow:inset 3px 0 0 #1f6fd6;}

/* inputs: breathing focus */
.form-control,textarea,select{transition:border-color .25s,box-shadow .25s !important;}

/* panel headers: gradient underline grows on hover */
#main-body .card-header{position:relative;}
#main-body .card-header::after{content:"";position:absolute;bottom:0;inset-inline-start:0;height:2.5px;width:0;background:linear-gradient(90deg,#00c2e5,#1f6fd6);transition:width .45s var(--eram-ease);}
#main-body .card:hover > .card-header::after{width:100%;}

/* hero search button: soft pulse to invite action */
#frmDomainChecker #btnCheckAvailability{animation:eramPulse 3.2s var(--eram-ease) infinite;}
@keyframes eramPulse{0%,100%{box-shadow:0 8px 22px rgba(31,111,214,.28)}50%{box-shadow:0 12px 34px rgba(0,194,229,.42)}}

/* order summary: premium glass */
.order-summary{border-radius:18px !important;overflow:hidden;box-shadow:0 18px 44px rgba(11,31,58,.10);transition:transform .35s var(--eram-ease),box-shadow .35s var(--eram-ease);}
.order-summary:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(11,31,58,.14);}

/* dropdowns/menus: pop in */
.dropdown-menu{animation:eramPop .22s var(--eram-ease);}
@keyframes eramPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* smooth anchor scrolling */
html{scroll-behavior:smooth;}
}
@media (prefers-reduced-motion: reduce){
#main-body,.tiles .tile{animation:none !important;}
}

/* ERAM-V9: navbar dropdowns fully RTL */
.dropdown-menu{text-align:right !important;direction:rtl !important;}
.dropdown-menu .dropdown-item,.dropdown-menu > li > a,.navbar .dropdown-menu a{text-align:right !important;}

/* ERAM-V9: dropdown panels were clipped by the hero band overflow — let them escape */
.domain-checker-container,.domain-checker-bg,#frmDomainChecker,#frmDomainChecker .row,#frmDomainChecker .input-group-box:has(#message){overflow:visible !important;}
#frmDomainChecker .btn-group > button.multiselect{overflow:visible !important;}
/* renewals: breathing room between domain name and expiry badge */
#order-standard_cart .badge{margin-inline:10px 6px;vertical-align:middle;}

/* ERAM-V9: renewals expiry chip (.label in a float-right wrapper) — clear gap from the domain name */
#order-standard_cart .domain-renewal .pull-right .label,#order-standard_cart .pull-right .label,#order-standard_cart .float-right .label{margin-inline-end:12px;display:inline-block;vertical-align:middle;}

/* ═══ ERAM-V9-PREMIUM-7: ribbon unclip, real toggle switch, premium tables & chips ═══ */
/* «محبوب‌ترین» ribbon was clipped by the product card */
#main-body .product{overflow:visible !important;}

/* safe-search: real animated switch (state was invisible -> felt broken) */
#frmDomainChecker .input-group-box > label input[type="checkbox"],#domainregister .domains-row > label input[type="checkbox"]{position:absolute !important;opacity:0 !important;width:0 !important;height:0 !important;pointer-events:none;}
#frmDomainChecker .input-group-box > label::after,#domainregister .domains-row > label::after{content:"";display:inline-block;width:38px;height:21px;border-radius:21px;flex:0 0 auto;transition:background .3s var(--eram-ease),box-shadow .3s;background:radial-gradient(circle 8px at calc(100% - 11px) 50%,#fff 97%,transparent),#cdd9e8;box-shadow:inset 0 1px 3px rgba(11,31,58,.12);}
#frmDomainChecker .input-group-box > label:has(input:checked)::after,#domainregister .domains-row > label:has(input:checked)::after{background:radial-gradient(circle 8px at 11px 50%,#fff 97%,transparent),linear-gradient(90deg,#00c2e5,#1f6fd6);box-shadow:0 3px 10px rgba(0,194,229,.35);}
#frmDomainChecker .input-group-box > label:has(input:checked),#domainregister .domains-row > label:has(input:checked){border-color:#8fd4ef !important;color:#1f6fd6 !important;background:#f0faff !important;}

/* status chips: rounded, color-coded, weighty */
#main-body .label{border-radius:20px !important;padding:5px 13px !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.2px;display:inline-block;}
#main-body .label-default{background:#eef2f8 !important;color:#5a6f88 !important;}
#main-body .label-success{background:linear-gradient(120deg,#18b98d,#0fa374) !important;color:#fff !important;}
#main-body .label-warning{background:linear-gradient(120deg,#f7b731,#f0932b) !important;color:#fff !important;}
#main-body .label-danger{background:linear-gradient(120deg,#ee5a52,#d63031) !important;color:#fff !important;}
#main-body .label-info{background:linear-gradient(120deg,#00c2e5,#1f6fd6) !important;color:#fff !important;}

/* tables: soft header, clean borders */
#main-body table thead th{background:#f6f9fd !important;border-bottom:2px solid #e4edf7 !important;font-weight:700 !important;color:#33475f !important;}
#main-body table tbody td{border-color:#eef3f9 !important;}
#main-body div.dataTables_wrapper{border-radius:16px;}

/* datatables search + pagination */
#main-body .dataTables_filter input{border:1.5px solid #e3ecf5 !important;border-radius:12px !important;padding:9px 14px !important;background:#fff;transition:border-color .25s,box-shadow .25s !important;}
#main-body .dataTables_filter input:focus{border-color:#00c2e5 !important;box-shadow:0 0 0 4px rgba(0,194,229,.12) !important;outline:none !important;}
#main-body .dataTables_paginate .paginate_button{border-radius:10px !important;transition:background .25s,color .25s,transform .2s !important;}
#main-body .dataTables_paginate .paginate_button:hover{transform:translateY(-1px);}
#main-body .dataTables_length select{border:1.5px solid #e3ecf5 !important;border-radius:10px !important;padding:6px 10px !important;}

/* pricing feature rows: hover glow */
#main-body .product ul li,#main-body .product .feature{transition:background .2s;}
#main-body .product ul li:hover{background:#f6fbff;}

/* ═══ ERAM-V9-PREMIUM-8: dropdown anchor gap, radio rows, renewals filter, sidebar consistency ═══ */
/* chips: stop grid-stretching so the panel hugs its chip */
#frmDomainChecker .input-group-box:has(#message) .btn-group{align-self:center !important;height:auto !important;display:inline-block !important;}
#frmDomainChecker .multiselect-container.dropdown-menu,#domainregister .multiselect-container.dropdown-menu{top:calc(100% + 8px) !important;}
/* dropdown option rows: [radio/check][value] tight, right-aligned RTL */
.multiselect-container li a label{direction:rtl !important;justify-content:flex-start !important;gap:9px !important;}
/* kill orphaned iCheck helpers floating inside panels (the stray blue dot) */
.multiselect-container [class*="iradio"],.multiselect-container [class*="icheckbox"]{position:static !important;display:inline-flex !important;width:auto !important;height:auto !important;background:none !important;border:none !important;margin:0 !important;}
.multiselect-container [class*="iradio"] ins,.multiselect-container [class*="icheckbox"] ins{display:none !important;}
/* renewals search filter: was clipping its placeholder */
#domainRenewalFilter,.domain-renewals-filter{height:auto !important;min-height:44px !important;padding:9px 14px !important;border:1.5px solid #e3ecf5 !important;border-radius:12px !important;font-size:13px;}
/* store/cart sidebar headers: white like the rest of the portal (were gradient-filled, merging with the active item) */
#order-standard_cart .card-header,#order-standard_cart .panel-heading{background:#fff !important;color:#1c2c40 !important;}
#order-standard_cart .card-header h3,#order-standard_cart .panel-heading h3{color:#1c2c40 !important;}
/* active sidebar item: distinct rounded pill so it never merges with the header */
.sidebar .list-group-item.active{border-radius:12px !important;margin:5px 7px !important;width:auto !important;}

/* ERAM-V9: the original <select> behind each multiselect chip was still taking space (phantom gap + stray dot) */
#frmDomainChecker select.multiselect,#domainregister select.multiselect,.input-group-box select.multiselect,.domains-row select.multiselect{display:none !important;width:0 !important;height:0 !important;position:absolute !important;visibility:hidden !important;}

/* ERAM-V9: kill orphaned pseudo-radio artifacts in picker dropdowns (the floating blue dot) */
.multiselect-container label.radio::before,.multiselect-container label.radio::after,
.multiselect-container label.checkbox::before,.multiselect-container label.checkbox::after{display:none !important;content:none !important;}
.multiselect-container label.radio,.multiselect-container label.checkbox{padding-inline-start:0 !important;}

/* ERAM-V9: the floating dot = a li ::marker (the dropdown is a ul) — kill list markers in panels */
.multiselect-container,.multiselect-container li{list-style:none !important;}
.multiselect-container li::marker{content:none !important;}

/* ERAM-V9: panel radios/checkboxes paint natively in place (split-paint artifact fix) */
.multiselect-container input[type="radio"],.multiselect-container input[type="checkbox"]{appearance:auto !important;-webkit-appearance:auto !important;transform:none !important;}

/* ERAM-V9: the phantom dot = offset box-shadow from a legacy custom-radio technique */
.multiselect-container input[type="radio"],.multiselect-container input[type="checkbox"]{box-shadow:none !important;outline:none !important;}

/* ERAM-V9-FINAL: panels use highlighted-row selection (native radio paint was glitching) */
.multiselect-container input[type="radio"],.multiselect-container input[type="checkbox"]{display:none !important;}
.multiselect-container li a{border-radius:9px;}
.multiselect-container li a:has(input:checked){background:#eaf4ff !important;}
.multiselect-container li a:has(input:checked) label{color:#1f6fd6 !important;font-weight:700 !important;}
.multiselect-container li a:has(input:checked) label::after{content:"✓";color:#1f6fd6;font-weight:800;font-size:13px;margin-inline-start:auto;display:inline-block !important;width:auto;height:auto;background:none;box-shadow:none;}
.multiselect-container li a label{width:100%;}

/* ERAM-V9: status chips never glue to adjacent text (ticket titles etc.) */
#main-body .label{margin-inline:6px;}
/* TLD panel checkboxes: visible again for multi-select, native paint */
.multiselect-container input[type="checkbox"]{display:inline-block !important;position:static !important;opacity:1 !important;width:15px !important;height:15px !important;margin:0 !important;accent-color:#1f6fd6;appearance:auto !important;-webkit-appearance:auto !important;box-shadow:none !important;}

/* ═══ ERAM-V9-TILES-2: richer stat tiles — gradient icon chips, flowing underline, gradient count ═══ */
@media (prefers-reduced-motion: no-preference){
#main-body .tile > i{width:62px;height:62px;display:inline-flex !important;align-items:center;justify-content:center;background:linear-gradient(135deg,#e9f7ff,#eef3ff);border-radius:19px;font-size:27px !important;color:#1f6fd6;transition:background .4s var(--eram-ease),color .4s,transform .45s var(--eram-ease),box-shadow .4s !important;}
#main-body .tile:hover > i{background:linear-gradient(135deg,#00c2e5,#1f6fd6);color:#fff;transform:scale(1.1) rotate(-7deg);box-shadow:0 12px 26px rgba(31,111,214,.38);}
#main-body .tile .stat{font-size:26px !important;font-weight:800 !important;transition:all .3s;}
#main-body .tile:hover .stat{background:linear-gradient(90deg,#00c2e5,#1f6fd6);-webkit-background-clip:text;background-clip:text;color:transparent;}
#main-body .tile .title{color:#7b8da3;font-weight:600;transition:color .3s;}
#main-body .tile:hover .title{color:#33475f;}
#main-body .tile .highlight{background:linear-gradient(90deg,#00c2e5,#1f6fd6,#7fd6ef,#00c2e5) !important;background-size:300% 100% !important;animation:eramFlow 7s linear infinite;}
@keyframes eramFlow{0%{background-position:0% 0}100%{background-position:300% 0}}
#main-body .tile::after{content:"";position:absolute;top:0;inset-inline-start:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:inset-inline-start .7s var(--eram-ease);pointer-events:none;}
#main-body .tile:hover::after{inset-inline-start:130%;}
}

/* ═══ ERAM-V9: premium file inputs — native button was overlapping its own text in RTL ═══ */
#main-body input[type="file"]{width:100%;min-height:0 !important;height:auto !important;padding:8px 10px !important;border:1.5px solid #e3ecf5 !important;border-radius:12px !important;background:#fbfdff;font-size:13px;color:#5a6f88;cursor:pointer;transition:border-color .25s,box-shadow .25s;}
#main-body input[type="file"]:hover{border-color:#b9d2ec !important;}
#main-body input[type="file"]:focus{border-color:#00c2e5 !important;box-shadow:0 0 0 4px rgba(0,194,229,.12) !important;outline:none !important;}
#main-body input[type="file"]::file-selector-button{margin-inline-end:12px;border:none;background:linear-gradient(120deg,#00c2e5,#1f6fd6);color:#fff;padding:8px 18px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;transition:filter .25s,transform .2s;}
#main-body input[type="file"]::file-selector-button:hover{filter:brightness(1.1);}
#main-body input[type="file"]::-webkit-file-upload-button{margin-inline-end:12px;border:none;background:linear-gradient(120deg,#00c2e5,#1f6fd6);color:#fff;padding:8px 18px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;}

/* ═══ ERAM-V9: bootstrap custom-file widget properly RTL (button is the label ::after, LTR-positioned) ═══ */
#main-body .custom-file{height:auto !important;min-height:50px;}
#main-body .custom-file-input{height:100% !important;cursor:pointer;}
#main-body .custom-file-label{direction:rtl;text-align:right;height:auto !important;min-height:50px;display:flex;align-items:center;padding:10px 16px !important;padding-inline-end:16px !important;padding-inline-start:140px !important;border:1.5px solid #e3ecf5 !important;border-radius:12px !important;background:#fbfdff !important;color:#8aa0bb !important;font-size:13px;margin:0 !important;transition:border-color .25s,box-shadow .25s;}
#main-body .custom-file-input:focus ~ .custom-file-label{border-color:#00c2e5 !important;box-shadow:0 0 0 4px rgba(0,194,229,.12) !important;}
#main-body .custom-file-label::after{content:"انتخاب فایل" !important;position:absolute;top:4px;bottom:4px;inset-inline-start:4px;inset-inline-end:auto;left:4px;right:auto;height:auto !important;display:flex;align-items:center;padding:0 22px !important;background:linear-gradient(120deg,#00c2e5,#1f6fd6) !important;color:#fff !important;font-weight:600;font-size:12.5px;border:none !important;border-radius:9px !important;transition:filter .25s;}
#main-body .custom-file:hover .custom-file-label::after{filter:brightness(1.1);}

/* ERAM-V9-TILES-3: icon must invert to white on hover; labels never wrap */
#main-body .tile:hover > i{color:#fff !important;}
#main-body .tile:hover > i::before{color:#fff !important;}
#main-body .tile .title{white-space:nowrap;font-size:12.5px !important;}
#main-body .tile{padding:18px 20px !important;}

/* ERAM-V9: featured-plan ribbon floats centered above the card, clear of the header title */
#main-body .product .eram-ribbon{top:-15px !important;left:50% !important;right:auto !important;transform:translateX(-50%) !important;z-index:5;box-shadow:0 8px 22px rgba(0,194,229,.42);white-space:nowrap;}
#main-body .product.eram-featured{margin-top:20px !important;}

/* ERAM-V9: product-domain step — unclip dropdown panels + remove iCheck remnant on the toggle */
#domainregister,#domainregister .domains-row,.domain-selection-options,.domain-selection-options .option,.domain-input-group{overflow:visible !important;}
#domainregister .domains-row > label ins,#domainregister .domains-row > label [class*="iCheck"],#domainregister .domains-row > label [class*="icheck"]{display:none !important;width:0 !important;height:0 !important;}

/* ERAM-V9: final iCheck wrapper kill at matching specificity */
#domainregister.domain-checker-advanced .domains-row > label [class*="icheckbox"],#domainregister.domain-checker-advanced .domains-row > label [class*="iradio"],#frmDomainChecker .input-group-box > label [class*="icheckbox"]{display:none !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;}

/* ERAM-V9: hide the raw checkbox behind the switch at winning specificity */
#domainregister.domain-checker-advanced .domains-row > label input[type="checkbox"],#frmDomainChecker .input-group-box:has(#message) > label input[type="checkbox"]{position:absolute !important;opacity:0 !important;width:0 !important;height:0 !important;pointer-events:none !important;}

/* ═══════ ERAM-V9-PRODUCTS: full premium plan cards ═══════ */
#main-body .products .product{border-radius:20px !important;border:1.5px solid #e6eef7 !important;background:#fff;box-shadow:0 12px 34px -18px rgba(11,31,58,.18);transition:transform .35s var(--eram-ease),box-shadow .35s var(--eram-ease);overflow:visible !important;}
#main-body .products .product:hover{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(31,111,214,.35);}
/* standard headers: soft gradient, accent underline */
#main-body .products .product > header{background:linear-gradient(135deg,#f4f9ff,#eef4fb) !important;border-radius:18px 18px 0 0 !important;padding:18px 22px !important;position:relative;border-bottom:1px solid #e9f0f8 !important;}
#main-body .products .product > header::after{content:"";position:absolute;bottom:-1px;inset-inline-start:22px;width:46px;height:3px;border-radius:3px;background:linear-gradient(90deg,#00c2e5,#1f6fd6);}
/* featured: gradient header flush inside the cyan frame */
#main-body .products .product.eram-featured{border:2px solid #17c4e8 !important;}
#main-body .products .product.eram-featured > header{background:linear-gradient(120deg,#00c2e5,#1f6fd6) !important;border-radius:16px 16px 0 0 !important;padding:26px 22px 18px !important;border-bottom:0 !important;}
#main-body .products .product.eram-featured > header::after{background:rgba(255,255,255,.55);}
/* ribbon: clean floating pill with white keyline */
#main-body .product .eram-ribbon{top:-16px !important;border-radius:30px !important;padding:7px 26px !important;font-size:.78rem !important;border:2px solid #fff !important;box-shadow:0 10px 24px rgba(0,150,200,.45) !important;}
/* no stray list markers anywhere in the store */
#order-standard_cart li::marker{content:"" !important;font-size:0 !important;}

/* ═══ ERAM-V9: product-domain option rows — full-width selects, proportioned check button ═══ */
/* in-cart / transfer / own-domain selects fill their bar elegantly */
#domainincart .domains-row select,#incartsld{width:100% !important;flex:1 1 auto !important;background:#fff !important;border:none !important;font-weight:700 !important;color:#1f6fd6 !important;direction:ltr;text-align:center;padding:0 18px !important;cursor:pointer;}
/* بررسی: tall pill matched to the textarea, not a giant square */
#domainregister button#btnCheckAvailability{height:96px !important;width:auto !important;min-width:112px !important;max-width:150px !important;border-radius:18px !important;font-size:15px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;white-space:nowrap !important;}

/* ═══ ERAM-V9: panel option rows = clean menu items (chip-pill styling was leaking into them) ═══ */
#domainregister .multiselect-container li label,#frmDomainChecker .multiselect-container li label,.multiselect-container li label{background:transparent !important;border:none !important;box-shadow:none !important;border-radius:8px !important;padding:6px 9px !important;margin:0 !important;width:100% !important;display:flex !important;align-items:center !important;gap:10px !important;direction:rtl !important;justify-content:flex-start !important;font-weight:500 !important;color:#26364a !important;font-size:13px !important;white-space:nowrap;}
.multiselect-container li a{padding:2px 4px !important;background:transparent;}
.multiselect-container li a:hover{background:#f2f7fc !important;}

/* ERAM-V9: drop the redundant check glyph (checkboxes are visible again) */
.multiselect-container li a:has(input:checked) label::after{content:none !important;display:none !important;}

/* ERAM-V9: no pseudo markers of any kind inside panel rows */
.multiselect-container li::before,.multiselect-container li::after,.multiselect-container li a::before,.multiselect-container li a::after{content:none !important;display:none !important;}

/* ERAM-V9: active panel rows carry a background-image checkmark in the theme — remove it */
.multiselect-container li a,.multiselect-container li.active a,.multiselect-container li a:hover{background-image:none !important;}

/* ERAM-V9: Popper leaves will-change:transform on panels — the compositing layer displaces
   native checkbox/radio glyph paint (the phantom dot/check saga). Kill the layer. */
.multiselect-container{will-change:auto !important;transform:none !important;}

/* ERAM-V9: THE phantom glyph = a dead glyphicon (font not shipped in BS4) in the search addon,
   wrapped below the full-width filter input onto the first row. Remove the addon. */
.multiselect-container .multiselect-item.filter .input-group-addon{display:none !important;}

/* ERAM-V9-FINAL-2: checkbox panels join the row-highlight style — native checkbox paint
   is the source of the phantom glyphs (Chrome anomaly). Selected = tinted row + bold blue. */
.multiselect-container input[type="checkbox"]{display:none !important;}
.multiselect-container li a{background-color:transparent;}
.multiselect-container li a:has(input:checked){background-color:#eaf4ff !important;}
.multiselect-container li a:has(input:checked) label{color:#1f6fd6 !important;font-weight:700 !important;}

/* ═══ ERAM-V9: picker spacing + chip polish ═══ */
/* clear space between the search box and the controls row (both pages) */
#domainregister textarea#message,#frmDomainChecker .input-group-box #message{margin-bottom:14px !important;}
#domainregister.domain-checker-advanced .domains-row{row-gap:12px !important;margin-top:4px !important;}
/* chips: caret breathing room + hover lift */
#domainregister .btn-group > button.multiselect .caret,#frmDomainChecker .btn-group > button.multiselect .caret{margin-inline-start:9px;}
#domainregister .btn-group > button.multiselect,#frmDomainChecker .btn-group > button.multiselect{transition:border-color .25s,box-shadow .25s,transform .2s !important;}
#domainregister .btn-group > button.multiselect:hover,#frmDomainChecker .btn-group > button.multiselect:hover{border-color:#8fd4ef !important;box-shadow:0 6px 16px rgba(0,194,229,.15);transform:translateY(-1px);}
/* panel: slightly larger offset + soft entry already; align tight to chip */
#domainregister .multiselect-container.dropdown-menu,#frmDomainChecker .multiselect-container.dropdown-menu{margin-top:2px !important;}

/* ERAM-V9: panel search = single clean field (wrapper + input were both drawing frames) */
.multiselect-container .multiselect-item.filter{padding:6px 6px 10px !important;background:transparent !important;border:none !important;box-shadow:none !important;}
.multiselect-container .multiselect-item.filter .input-group{border:none !important;background:transparent !important;padding:0 !important;box-shadow:none !important;display:block !important;border-radius:0 !important;height:auto !important;}
.multiselect-container .multiselect-item.filter input{width:100% !important;border:1.5px solid #e3ecf5 !important;border-radius:10px !important;padding:9px 13px !important;background:#fff !important;box-shadow:none !important;margin:0 !important;height:auto !important;font-size:13px !important;}
.multiselect-container .multiselect-item.filter input:focus{border-color:#00c2e5 !important;box-shadow:0 0 0 3px rgba(0,194,229,.12) !important;outline:none !important;}

/* ═══ ERAM-V9: checkout review — centered summary, stacked buttons with gap (were overlapping) ═══ */
#orderSummary{max-width:430px !important;margin:26px auto 10px !important;float:none !important;}
#orderSummary .text-right{display:flex !important;flex-direction:column;align-items:center;gap:14px;text-align:center !important;padding:6px 0 14px;}
#orderSummary .text-right br{display:none;}
#orderSummary .btn-continue-shopping{margin:0 !important;background:#fff !important;border:1.5px solid #e3ecf5 !important;border-radius:12px !important;padding:9px 26px !important;color:#5a6f88 !important;font-size:13px;text-decoration:none !important;}
#orderSummary .btn-continue-shopping:hover{border-color:#8fd4ef !important;color:#1f6fd6 !important;}

/* ═══ ERAM-V9: checkout review = two-column layout — items right, sticky summary LEFT ═══ */
@media (min-width: 992px){
#order-standard_cart .cart-body:has(#orderSummary){display:grid !important;grid-template-columns:minmax(0,1fr) 375px;column-gap:26px;align-items:start;}
#order-standard_cart .cart-body:has(#orderSummary) > *{grid-column:1;min-width:0;}
#order-standard_cart .cart-body:has(#orderSummary) > .header-lined{grid-column:1 / -1;}
#order-standard_cart .cart-body:has(#orderSummary) > #orderSummary{grid-column:2 !important;grid-row:2 / span 30;position:sticky;top:22px;margin:0 !important;max-width:none !important;width:100%;}
}

/* ERAM-V9: keep the stock float/width while grid-ing the inside (grid had collapsed the box) */
@media (min-width: 992px){
#order-standard_cart .cart-body:has(#orderSummary){float:right !important;width:75% !important;}
}

/* ERAM-V9: checkout columns done right — revert grid, flex the inner row, summary = sticky LEFT column */
#order-standard_cart .cart-body:has(#orderSummary){display:block !important;}
@media (min-width: 992px){
#order-standard_cart .cart-body > .row:has(.secondary-cart-sidebar){display:flex !important;gap:26px;align-items:flex-start;}
#order-standard_cart .cart-body > .row:has(.secondary-cart-sidebar) > *{flex:1 1 auto;min-width:0;}
#order-standard_cart .cart-body > .row:has(.secondary-cart-sidebar) > .secondary-cart-sidebar{flex:0 0 375px !important;width:375px !important;max-width:375px !important;order:2;position:sticky !important;top:22px;margin:0 !important;inset:auto !important;}
}

/* ERAM-V9: summary as true LEFT column — absolute-pinned, content padded away from it */
@media (min-width: 992px){
#order-standard_cart .cart-body:has(#orderSummary){position:relative !important;padding-left:415px !important;}
#order-standard_cart .cart-body:has(#orderSummary) .secondary-cart-sidebar{position:absolute !important;left:15px !important;right:auto !important;top:88px !important;width:378px !important;max-width:378px !important;margin:0 !important;}
}

/* ═══ ERAM-V9: cart items polish — soft stripes, roomy rows, refined controls ═══ */
#order-standard_cart .view-cart-items .item{padding:16px 14px !important;transition:background .2s;}
#order-standard_cart .view-cart-items .item:nth-child(odd){background:#fff !important;}
#order-standard_cart .view-cart-items .item:nth-child(even){background:#f7fafd !important;}
#order-standard_cart .view-cart-items .item:hover{background:#f2f8ff !important;}
#order-standard_cart a[href*="a=empty"],#order-standard_cart .btn-empty-cart{margin-top:14px !important;border-radius:10px !important;}
#order-standard_cart .view-cart-items .item .fa-times{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#f4f7fb;color:#8aa0bb;transition:background .2s,color .2s;cursor:pointer;}
#order-standard_cart .view-cart-items .item .fa-times:hover{background:#fdecec;color:#d63031;}

/* ═══ ERAM-V9: cart remove-buttons — visible circular chips, row-centered ═══ */
#order-standard_cart .view-cart-items .item .row{position:relative;}
#order-standard_cart .view-cart-items .item .hidden-xs > .btn-remove-from-cart{position:absolute;left:14px;top:50%;transform:translateY(-50%);}
#order-standard_cart .view-cart-items .item .btn-remove-from-cart{width:34px;min-width:34px;max-width:34px;height:34px;flex:0 0 34px;display:inline-flex !important;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid #e3ebf5;box-shadow:0 1px 4px rgba(31,64,112,.08);padding:0;transition:all .2s;}
#order-standard_cart .view-cart-items .item .btn-remove-from-cart .fa-times{width:auto !important;height:auto !important;background:transparent !important;color:#97a9c0;font-size:13px;display:inline !important;}
#order-standard_cart .view-cart-items .item .btn-remove-from-cart:hover{background:#fdecec;border-color:#f3c2c2;}
#order-standard_cart .view-cart-items .item .btn-remove-from-cart:hover .fa-times{color:#d63031;}

/* ═══ ERAM-V9: register-domain widget — breathing room between header line and controls ═══ */
#registerDomainPanel .card-body .input-group,
#registerDomainPanel .panel-body .input-group{padding:16px 14px !important;}

/* ═══ ERAM-V9: domain search results — uniform spotlight tiles + aligned suggestion rows ═══ */
.spotlight-tld{display:flex !important;flex-direction:column !important;align-items:center !important;gap:6px;padding:16px 10px 14px !important;}
.spotlight-tld > .domain-lookup-loader{order:2;}
.spotlight-tld > .domain-lookup-result{order:3;width:100%;}
.spotlight-tld > .eram-tags{order:4 !important;margin-top:auto !important;display:flex !important;flex-direction:column;align-items:center;gap:3px;padding-top:10px;}
#domainSuggestions .domain-suggestion:not(.w-hidden){display:flex !important;align-items:center !important;padding:14px 18px !important;transition:background .2s;}
#domainSuggestions .domain-suggestion:not(.w-hidden):nth-child(even){background:#f7fafd;}
#domainSuggestions .domain-suggestion:not(.w-hidden):hover{background:#f2f8ff;}
#domainSuggestions .domain-suggestion .actions{display:flex !important;flex-direction:row-reverse;align-items:center;gap:16px;margin-inline-start:auto;}
#domainSuggestions .domain-suggestion .actions .price{flex:0 0 175px;width:175px;text-align:left;font-weight:800;white-space:nowrap;}
#domainSuggestions .domain-suggestion .btn-add-to-cart{min-width:132px;}
#domainSuggestions .domain-suggestion .domain{font-weight:700;}

/* ═══ ERAM-V9-RENEWALS-2: aligned controls row, full-width select, soft badges, summary card ═══ */
@media (min-width: 768px){
  .domain-renewals .domain-renewal form.form-horizontal{display:inline-block;vertical-align:middle;margin:0 !important;}
  .domain-renewals .domain-renewal > .text-right{display:inline-block;float:left;margin-top:8px;}
  .domain-renewals .domain-renewal::after{content:"";display:block;clear:both;}
}
.domain-renewals .domain-renewal form .form-group,
.domain-renewals .domain-renewal form .form-group.row{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;margin:0 !important;}
.domain-renewals .domain-renewal form .form-group > label.control-label{flex:0 0 auto;width:auto !important;max-width:none;padding:0 !important;margin:0 !important;color:#5a6c86;font-weight:700;font-size:.9rem;}
.domain-renewals .domain-renewal form .form-group > div[class*="col"]{flex:0 0 auto;width:auto !important;max-width:none;padding:0 !important;}
.select-renewal-pricing{min-width:300px !important;width:auto !important;height:46px !important;border:1.6px solid var(--eram-line) !important;border-radius:12px !important;background:#f8fbff !important;font-weight:700;color:var(--eram-ink) !important;padding:0 16px !important;}
.select-renewal-pricing:focus{border-color:var(--eram-cyan) !important;box-shadow:0 0 0 3px rgba(0,194,229,.14) !important;outline:0;}
.domain-renewals .domain-renewal .label{border-radius:999px;font-weight:700;padding:.42em 1em;font-size:.74rem;vertical-align:middle;display:inline-block;}
.domain-renewals .domain-renewal .label-warning{background:#fff4e0 !important;color:#b97324 !important;}
.domain-renewals .domain-renewal .label-danger{background:#fdecec !important;color:#d63031 !important;}
.domain-renewals .domain-renewal .label-info{background:#e8f4fd !important;color:#2f86e6 !important;}
.domain-renewals .domain-renewal .label-grey{background:#eef2f7 !important;color:#5a6c86 !important;}
#domainRenewalFilter{height:44px;border:1.6px solid var(--eram-line);border-radius:12px;padding:0 16px;min-width:260px;font-size:.9rem;background:#fff;}
#domainRenewalFilter:focus{border-color:var(--eram-cyan);box-shadow:0 0 0 3px rgba(0,194,229,.14);outline:0;}
#order-standard_cart #orderSummary .order-summary{background:#fff;border:1px solid var(--eram-line);border-radius:18px;overflow:hidden;box-shadow:0 14px 34px -24px rgba(11,31,58,.5);padding:0 0 12px;}
#order-standard_cart #orderSummary .order-summary h2{background:var(--eram-grad);color:#fff !important;font-size:1.15rem !important;font-weight:800;margin:0 0 12px;padding:14px 20px;text-align:center;}
#order-standard_cart #orderSummary .order-summary .summary-container{padding:6px 18px 8px;}
#order-standard_cart #btnGoToCart{background:var(--eram-grad) !important;border:0 !important;border-radius:999px !important;color:#fff !important;font-weight:700 !important;padding:12px 34px !important;box-shadow:0 12px 24px -12px rgba(0,150,200,.6);margin-top:14px;transition:transform .2s,box-shadow .25s;}
#order-standard_cart #btnGoToCart:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(0,150,200,.7);}

/* ═══ ERAM-KB: knowledgebase article readability — RTL body with clean LTR technical fragments ═══ */
#main-body article{line-height:2.05;font-size:15.5px;color:#2f3e53;}
#main-body article p{margin-bottom:12px;}
#main-body article h3{font-weight:800;margin:26px 0 10px;font-size:1.12rem;color:var(--eram-ink);}
#main-body article ol,#main-body article ul{padding-right:24px;padding-left:0;margin:10px 0 16px;}
#main-body article li{margin-bottom:8px;}
#main-body article code{unicode-bidi:plaintext;display:inline-block;background:#f2f6fc;border:1px solid #e3ecf7;border-radius:6px;padding:0 8px;font-size:.88em;color:#1f5fae;vertical-align:baseline;line-height:1.7;}
#main-body article a{color:var(--eram-blue);font-weight:600;}
#main-body article div[style*="direction:ltr"]{line-height:1.9;overflow-x:auto;}
#main-body article div[style*="border-right"]{line-height:1.9;}
#main-body article img{max-width:100%;height:auto;border-radius:10px;}


/* ═══ ERAM-KB-2: learning-center premium layer (index cards, article page, lists, votes) ═══ */
/* search hero */
.kb-search .form-control{height:56px !important;border:1.6px solid var(--eram-line) !important;border-radius:0 16px 16px 0 !important;font-size:1rem;background:#fff !important;}
.kb-search .form-control:focus{border-color:var(--eram-cyan) !important;box-shadow:0 0 0 3px rgba(0,194,229,.14) !important;}
.kb-search .btn{border-radius:16px 0 0 16px !important;background:var(--eram-grad) !important;border:0 !important;font-weight:700;padding-inline:30px !important;}
/* category cards */
.kb-category{border:1px solid var(--eram-line) !important;border-radius:16px !important;overflow:hidden;transition:transform .22s,box-shadow .25s,border-color .22s;}
.kb-category:hover{transform:translateY(-3px);border-color:transparent !important;box-shadow:0 22px 44px -26px rgba(0,150,200,.4);}
.kb-category .card-body{padding:20px 22px !important;display:block;text-decoration:none !important;}
.kb-category .h5{font-weight:800;color:var(--eram-ink);}
.kb-category .h5 .fal{color:var(--eram-blue);background:#eaf3ff;border-radius:10px;padding:9px;margin-inline-end:6px;}
.kb-category .badge-info{background:var(--eram-grad) !important;border-radius:999px;font-weight:700;padding:.45em 1em;}
.kb-category p{margin-top:8px !important;}
/* article list rows (popular / related / category) */
.kb-article-item{padding:15px 20px !important;border:0 !important;border-bottom:1px solid #eef3fa !important;position:relative;transition:background .2s,padding .2s;}
.kb-article-item::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--eram-grad);transform:scaleY(0);transition:transform .2s;}
.kb-article-item:hover{background:#f6faff;padding-inline-start:26px !important;}
.kb-article-item:hover::before{transform:scaleY(1);}
.kb-article-item .fal{color:var(--eram-blue) !important;}
.kb-article-item small{display:block;color:#8b9bb3;margin-top:4px;line-height:1.9;}
/* article page header */
.view-knowledgebase h1, #main-body .card-body > h1{font-size:1.65rem;font-weight:800;color:var(--eram-ink);line-height:1.7;}
#main-body .card-body > h1 .btn{border-radius:999px !important;border:1.5px solid var(--eram-line) !important;background:#fff !important;color:#5a6c86 !important;font-weight:700;padding:7px 18px !important;transition:all .2s;}
#main-body .card-body > h1 .btn:hover{border-color:var(--eram-cyan) !important;color:var(--eram-blue) !important;}
/* helpful vote buttons */
button[name="vote"][value="yes"]{background:#e7f8f2 !important;color:#0c8f6e !important;border:1.5px solid #bfe9db !important;border-radius:999px !important;font-weight:700;padding:8px 26px !important;transition:all .2s;}
button[name="vote"][value="yes"]:hover{background:#0fb597 !important;color:#fff !important;border-color:#0fb597 !important;}
button[name="vote"][value="no"]{background:#fdf0f0 !important;color:#c0392b !important;border:1.5px solid #f3cfcf !important;border-radius:999px !important;font-weight:700;padding:8px 26px !important;transition:all .2s;}
button[name="vote"][value="no"]:hover{background:#d63031 !important;color:#fff !important;border-color:#d63031 !important;}
/* related-articles card */
#main-body .card .card-title .fal{color:var(--eram-blue);}

/* ═══ ERAM-KB-3: header KB search — button on the LEFT end of the pill (RTL) ═══ */
.input-group.search{flex-wrap:nowrap;}
.input-group.search .input-group-prepend{order:2;}
.input-group.search .form-control{order:1;border-radius:0 999px 999px 0 !important;border-inline-start:0 !important;}
.input-group.search .input-group-prepend .btn{border-radius:999px 0 0 999px !important;}

/* ═══ ERAM-KB-4: article header layout, likes chip, gradient category icons, hover-only admin edit ═══ */
/* article H1 row: flex layout — print chip at the left end, never overlapping the title */
#main-body .card-body > h1{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
#main-body .card-body > h1 .btn{float:none !important;flex:0 0 auto;margin-top:6px;white-space:nowrap;}
/* likes counter -> neat pill */
#main-body .card-body > h1 + .list-inline .list-inline-item.text-muted{background:#f2f6fc;border:1px solid #e3ecf7;border-radius:999px;padding:6px 16px;color:#5a6c86 !important;font-weight:700;display:inline-flex;align-items:center;gap:8px;font-size:.85rem;}
#main-body .card-body > h1 + .list-inline .fa-thumbs-up{color:#0fb597;}
/* category cards: gradient icon chip, soft count badge pushed to the far end, flex title row */
.kb-category .h5{display:flex;align-items:center;gap:10px;}
.kb-category .h5 .fal{background:var(--eram-grad);color:#fff !important;border-radius:12px;padding:11px;font-size:1rem;box-shadow:0 8px 18px -10px rgba(0,150,200,.6);}
.kb-category .badge-info{margin-inline-start:auto;background:#eaf6ff !important;color:#1f6fd6 !important;font-size:.72rem;padding:.45em .95em;float:none !important;}
/* admin-only edit chips: invisible until the card is hovered */
.kb-category .show-on-card-hover,.kb-article-item .show-on-card-hover{opacity:0;transition:opacity .2s;}
.kb-category:hover .show-on-card-hover,.kb-article-item:hover .show-on-card-hover{opacity:1;}
/* list-row file icons -> tinted chips */
.kb-article-item > .fal{background:#eaf3ff;border-radius:9px;padding:8px;color:var(--eram-blue) !important;margin-inline-end:4px;}

/* ═══ ERAM-KB-5: search inputs are RTL — placeholder ellipsis sits at the LEFT end ═══ */
.input-group.search .form-control,.kb-search .form-control{direction:rtl;text-align:right;}

/* ═══ ERAM-KB-6: category icon chip — fixed square, glyph dead-centered ═══ */
.kb-category .h5 .fal{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;flex:0 0 44px;}
.kb-article-item > .fal{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:.92rem;line-height:1;}

/* ═══ ERAM-KB-7: category title row order — icon RIGHT, title middle, count far LEFT ═══ */
.kb-category .h5{direction:rtl;}
.kb-category .h5 .fal{order:-1;}
.kb-category .badge-info{order:3;margin-inline-start:auto;}

/* ═══ ERAM-PRINT: clean article printing — content only, full width, no transforms ═══ */
@media print{
  *,*::before,*::after{animation:none !important;transition:none !important;transform:none !important;box-shadow:none !important;opacity:1 !important;}
  body{background:#fff !important;text-align:right;}
  /* hide everything that is not the content */
  #header,.main-navbar-wrapper,.navbar,.top-bar,.home-shortcuts,.breadcrumb,.breadcrumbs,
  #footer,footer,.footer,.btn,button,form,.kb-search,.input-group.search,
  .sidebar,[class*="sidebar"],.col-lg-4,.col-md-4,.col-xl-4,
  #main-body .card + .card,          /* related-articles card */
  #main-body .card-body > h1 .btn,   /* print chip */
  .list-inline,.modal,.eram-sugg-search{display:none !important;}
  /* main column takes the full sheet */
  #main-body,[class*="col-lg-8"],[class*="col-lg-9"],[class*="col-md-8"],.container,.container-fluid,.row{
    width:100% !important;max-width:100% !important;flex:0 0 100% !important;margin:0 !important;padding:0 !important;display:block !important;}
  .card{border:0 !important;border-radius:0 !important;}
  .card-body{padding:0 !important;}
  #main-body .card-body > h1{font-size:20pt !important;display:block !important;}
  #main-body article{font-size:12pt !important;line-height:2 !important;color:#000 !important;}
  #main-body article code{border:1px solid #bbb !important;background:#f5f5f5 !important;color:#000 !important;}
  #main-body article div[style*="direction:ltr"]{border:1px solid #bbb !important;background:#f7f7f7 !important;overflow:visible !important;}
  #main-body article a{color:#000 !important;text-decoration:underline;}
}

/* ═══ ERAM-NS-PREMIUM: private-nameserver management (DNA childns) ═══ */
.eram-ns-h{font-weight:800;color:var(--eram-ink);}
.eram-ns-d{display:table;margin:8px auto 28px;background:var(--eram-soft);color:var(--eram-blue);font-weight:800;padding:9px 26px;border-radius:999px;font-size:1.02rem;direction:ltr;letter-spacing:.2px;}
table.table:has(input[name="nameserver"]) thead th{background:#f6f9fd;color:#5a6c86;font-weight:800;font-size:.86rem;padding:16px 18px;border:0;}
table.table:has(input[name="nameserver"]) tbody td{padding:18px;vertical-align:middle;border-top:1px solid #eef3f9;}
table.table:has(input[name="nameserver"]) tbody tr:hover td{background:#f8fbff;}
table.table-striped:has(input[name="nameserver"]) tbody tr:nth-of-type(odd){background:transparent;}
table.table:has(input[name="nameserver"]) .input-group{direction:ltr;flex-wrap:nowrap;}
table.table:has(input[name="nameserver"]) .input-group .form-control{border-radius:12px 0 0 12px !important;border:1.5px solid var(--eram-line);border-right:0;height:46px;direction:ltr;text-align:left;font-weight:700;}
table.table:has(input[name="nameserver"]) .input-group-addon{background:var(--eram-soft) !important;color:var(--eram-blue) !important;font-weight:800;border:1.5px solid var(--eram-line);border-left:0;border-radius:0 12px 12px 0;padding:0 14px;display:flex;align-items:center;font-size:.9rem;white-space:nowrap;}
table.table:has(input[name="nameserver"]) input[disabled]{background:#f6f9fd !important;color:#33465f !important;}
table.table:has(input[name="nameserver"]) input.form-control:not([disabled]):focus{border-color:var(--eram-cyan);box-shadow:0 0 0 3px rgba(0,194,229,.14);outline:0;}
table.table:has(input[name="nameserver"]) td input[name="newipaddress"],table.table:has(input[name="nameserver"]) td input[name="ipaddress"]{height:46px;border-radius:12px;border:1.5px solid var(--eram-line);direction:ltr;text-align:left;font-weight:700;}
table.table:has(input[name="nameserver"]) td .btn{border-radius:999px !important;padding:8px 20px !important;font-weight:700 !important;border:0 !important;margin:3px 4px;transition:transform .18s,box-shadow .22s;white-space:nowrap;}
table.table:has(input[name="nameserver"]) td .btn:hover{transform:translateY(-2px);}
table.table:has(input[name="nameserver"]) td .btn-warning,table.table:has(input[name="nameserver"]) td .btn-success{background:var(--eram-grad) !important;color:#fff !important;box-shadow:0 10px 22px -12px rgba(0,150,200,.65);}
table.table:has(input[name="nameserver"]) td .btn-danger{background:#fdecec !important;color:#d63031 !important;box-shadow:none;}
table.table:has(input[name="nameserver"]) td .btn-danger:hover{background:#d63031 !important;color:#fff !important;}


/* ═══ ERAM-SUGG-TIDY: suggestion rows — aligned columns, one-line sale cluster ═══ */
#domainSuggestions .domain-suggestion:not(.w-hidden){min-height:66px;gap:12px;}
#domainSuggestions .domain-suggestion .eram-tags{display:inline-flex !important;align-items:center;gap:8px;flex-wrap:wrap;row-gap:4px;margin-inline:14px !important;}
#domainSuggestions .domain-suggestion .eram-sale{display:inline-flex;align-items:center;margin:0 !important;white-space:nowrap;}
#domainSuggestions .domain-suggestion .eram-was{display:inline;margin:0 !important;white-space:nowrap;}
#domainSuggestions .domain-suggestion .eram-pct,
#domainSuggestions .domain-suggestion .eram-pctwrap{display:inline-flex;align-items:center;gap:6px;margin:0 !important;white-space:nowrap;}
#domainSuggestions .domain-suggestion .actions{display:inline-flex !important;align-items:center;gap:12px;margin-inline-start:auto;flex:0 0 auto;}
#domainSuggestions .domain-suggestion .actions .price{margin:0 !important;}
#domainSuggestions .domain-suggestion .btn-add-to-cart{min-width:132px;text-align:center;}

/* ═══ ERAM: hide the «فروش ویژه» sale cluster on spotlight tiles that are unavailable ═══ */
#order-standard_cart .spotlight-tld:has(button.unavailable:not(.w-hidden)) .eram-tags{display:none !important;}

/* invariant: a spotlight tile that shows the add button (available) must never also show «موجود نیست» — kills the transient half-flip during async verification. guardTiles re-adds .w-hidden to the add button when it flips a tile to unavailable, so this stays correct both ways. */
#order-standard_cart .spotlight-tld:has(button.btn-add-to-cart:not(.w-hidden)) button.unavailable{display:none !important;}