/* =====================================================================
   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(135deg,#1bc9ec 0%,#3a8cf0 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.w-hidden,.spotlight-tlds .btn.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:#7587a0 !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:#7587a0}
#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}