/*
 * KSA Hosting - UI enhancement layer for shufytheme + shyfytheme_cart (2026-11-09)
 * Loaded last (after theme + addon CSS). Pure progressive enhancement:
 * - colours follow the active theme scheme (--btn-primary-bg), fallback #825D95
 * - all motion is disabled for users with prefers-reduced-motion
 * - reveal-on-scroll only hides content once ksa-enhance.js has added .ksa-js to <html>
 */

:root {
    --ksa-primary: var(--btn-primary-bg, #825D95);
    --ksa-primary-hover: var(--btn-primary-bg-hover, #6f4d80);
    --ksa-primary-soft: rgba(130, 93, 149, .10);
    --ksa-primary-ring: rgba(130, 93, 149, .22);
    --ksa-border: #e6e8ef;
    --ksa-border-strong: #d5d8e3;
    --ksa-surface: #ffffff;
    --ksa-muted-bg: #f7f7fb;
    --ksa-text-muted: #7a7f95;
    --ksa-radius: 14px;
    --ksa-radius-sm: 10px;
    --ksa-shadow-sm: 0 1px 2px rgba(23, 26, 44, .05), 0 2px 8px rgba(23, 26, 44, .04);
    --ksa-shadow-md: 0 6px 22px rgba(23, 26, 44, .08);
    --ksa-shadow-lg: 0 14px 38px rgba(64, 40, 88, .16);
    --ksa-ease: cubic-bezier(.22, .61, .36, 1);
    --ksa-speed: .22s;
}

/* ---------- global ---------- */
html { scroll-behavior: smooth; }
::selection { background: var(--ksa-primary); color: #fff; }

/* page scrollbar only (inner scroll areas keep the theme's own, often hidden, scrollbars) */
/* note: no scrollbar-color here - it is inherited and would disable the theme's own ::-webkit-scrollbar styles */
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: #f4f2f7; }
html::-webkit-scrollbar-thumb { background: rgba(130, 93, 149, .45); border-radius: 20px; border: 2px solid #f4f2f7; }
html::-webkit-scrollbar-thumb:hover { background-color: rgba(130, 93, 149, .7); }

a, .btn, .nav-link, .dropdown-item, .list-group-item, .sidebar__link, .header__link,
.form-control, .custom-select, select, .card, .badge, .page-link {
    transition: color var(--ksa-speed) var(--ksa-ease), background-color var(--ksa-speed) var(--ksa-ease),
        border-color var(--ksa-speed) var(--ksa-ease), box-shadow var(--ksa-speed) var(--ksa-ease),
        transform var(--ksa-speed) var(--ksa-ease), opacity var(--ksa-speed) var(--ksa-ease);
}

:focus-visible { outline: 2px solid var(--ksa-primary); outline-offset: 2px; }
a:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; }

/* ---------- top page progress bar (navigation feedback on slow pages) ---------- */
.ksa-progress {
    position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 100000; pointer-events: none;
    background: linear-gradient(90deg, var(--ksa-primary), #c58be0, var(--ksa-primary));
    background-size: 200% 100%;
    transform-origin: right center; transform: scaleX(0); opacity: 0;
    transition: transform .4s var(--ksa-ease), opacity .3s;
}
html[dir="ltr"] .ksa-progress { transform-origin: left center; }
.ksa-progress.is-active { opacity: 1; transform: scaleX(.85); transition: transform 8s cubic-bezier(.1, .7, .2, 1), opacity .2s; animation: ksa-shimmer 1.2s linear infinite; }
@keyframes ksa-shimmer { to { background-position: -200% 0; } }

/* ---------- header ---------- */
header.header { transition: box-shadow var(--ksa-speed) var(--ksa-ease), background-color var(--ksa-speed); }
body.ksa-scrolled header.header {
    box-shadow: 0 6px 24px rgba(23, 26, 44, .08);
    background-color: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(10px); backdrop-filter: saturate(1.6) blur(10px);
}
.header__item > a, .header__item > button { transition: transform var(--ksa-speed) var(--ksa-ease); }
.header__item > a:hover, .header__item > button:hover { transform: translateY(-1px); }
.header__head__item___number { box-shadow: 0 0 0 2px #fff; animation: ksa-pop .4s var(--ksa-ease) both; }
@keyframes ksa-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- side menu (main sidebar) ---------- */
.sidebar__link { position: relative; border-radius: 12px; }
.sidebar__link .side__bar__item__icon { transition: transform var(--ksa-speed) var(--ksa-ease), background-color var(--ksa-speed), box-shadow var(--ksa-speed); }
.sidebar__link:hover .side__bar__item__icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.sidebar__link:hover .side__bar__item__text { color: #fff !important; }
.sidebar__item.active > .sidebar__link .side__bar__item__icon,
.sidebar__link.active .side__bar__item__icon {
    background: linear-gradient(135deg, var(--ksa-primary), #b07ccc) !important; color: #fff !important;
    box-shadow: 0 6px 18px rgba(130, 93, 149, .45);
}
.sidebar__logout .side__bar__item__icon, .sidebar__foot a { transition: transform var(--ksa-speed) var(--ksa-ease); }
.sidebar__foot a:hover { transform: translateY(-2px); }

/* sidebar child menus (dropdown/flyout) */
.sidebar__item_dropdown .sidebar__menu, .sidebar__item_dropdown ul {
    animation: ksa-fade-in-side .22s var(--ksa-ease) both;
}
.sidebar__item_dropdown ul a:hover, .sidebar__menu a:hover { padding-inline-start: 4px; color: var(--ksa-primary) !important; }

/* secondary horizontal menu under page title */
.full__width__secondarysidebar__menu__item, .nav__items__wrapper .nav-link, .main__nav__title { position: relative; }
.full__width__secondarysidebar__menu__item > a, .nav__items__wrapper .nav-link { position: relative; }
.full__width__secondarysidebar__menu__item > a::after, .nav__items__wrapper .nav-link::after {
    content: ""; position: absolute; inset-inline: 50%; bottom: 4px; height: 2px; border-radius: 2px;
    background: var(--ksa-primary); transition: inset-inline var(--ksa-speed) var(--ksa-ease);
}
.full__width__secondarysidebar__menu__item > a:hover::after, .full__width__secondarysidebar__menu__item.active > a::after,
.nav__items__wrapper .nav-link:hover::after, .nav__items__wrapper .nav-link.active::after { inset-inline: 0; }
.full__width__secondarysidebar__menu__item > a:hover { color: var(--ksa-primary) !important; }

/* ---------- dropdown menus ---------- */
.dropdown-menu {
    border: 1px solid var(--ksa-border) !important; border-radius: var(--ksa-radius) !important;
    box-shadow: var(--ksa-shadow-lg) !important; padding: 6px !important; overflow: hidden;
}
.dropdown-menu.show { animation: ksa-drop .2s var(--ksa-ease) both; }
@keyframes ksa-drop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dropdown-item { border-radius: 9px; padding: .5rem .85rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ksa-primary-soft) !important; color: var(--ksa-primary) !important; padding-inline-start: 1.1rem; }
.dropdown-item.active, .dropdown-item:active { background: var(--ksa-primary) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--ksa-border); margin: .35rem 0; }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; border-radius: var(--ksa-radius-sm); font-weight: 600; }
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-2px); }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0) scale(.98); }
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info { box-shadow: 0 4px 14px rgba(23, 26, 44, .12); }
.btn-primary:not(:disabled):hover { box-shadow: 0 10px 24px rgba(130, 93, 149, .38); }
.btn-primary {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
}
.btn-success:not(:disabled):hover { box-shadow: 0 10px 24px rgba(40, 167, 69, .32); }
.btn-danger:not(:disabled):hover { box-shadow: 0 10px 24px rgba(220, 53, 69, .32); }
.btn-default:hover, .btn-light:hover, .btn-outline-primary:hover { box-shadow: var(--ksa-shadow-md); }
/* shine sweep */
.btn-primary::before, .btn-success::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%; inset-inline-start: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg); transition: inset-inline-start .6s var(--ksa-ease); pointer-events: none;
}
.btn-primary:hover::before, .btn-success:hover::before { inset-inline-start: 120%; }
/* ripple (span injected by ksa-enhance.js) */
.ksa-ripple {
    position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none;
    background: rgba(255, 255, 255, .45); animation: ksa-ripple .6s ease-out forwards;
}
.btn-light .ksa-ripple, .btn-default .ksa-ripple, .btn-outline-primary .ksa-ripple { background: var(--ksa-primary-ring); }
@keyframes ksa-ripple { to { transform: scale(4); opacity: 0; } }
/* submitting state */
.btn.ksa-loading { pointer-events: none; color: transparent !important; }
.btn.ksa-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em;
    border: 2px solid rgba(255, 255, 255, .55); border-top-color: #fff; border-radius: 50%;
    animation: ksa-spin .7s linear infinite;
}
.btn-light.ksa-loading::after, .btn-default.ksa-loading::after { border-color: var(--ksa-primary-ring); border-top-color: var(--ksa-primary); }
@keyframes ksa-spin { to { transform: rotate(360deg); } }

/* ---------- form fields ---------- */
.form-control, .custom-select, select.form-control, textarea.form-control,
input[type="text"].form-control, input[type="email"].form-control, input[type="password"].form-control {
    border: 1.5px solid var(--ksa-border-strong);
    background-color: var(--ksa-surface);
    min-height: 44px;
    box-shadow: inset 0 1px 2px rgba(23, 26, 44, .03);
}
.form-control:not(.input-group .form-control), .custom-select:not(.input-group .custom-select) { border-radius: var(--ksa-radius-sm); }
textarea.form-control { min-height: 110px; }
.form-control:hover, .custom-select:hover { border-color: #b9a6c6; }
.form-control:focus, .custom-select:focus {
    border-color: var(--ksa-primary) !important;
    box-shadow: 0 0 0 4px var(--ksa-primary-ring) !important;
    background-color: #fff;
}
.form-control::placeholder { color: #a5a9bb; opacity: 1; transition: opacity var(--ksa-speed), transform var(--ksa-speed); }
.form-control:focus::placeholder { opacity: .55; }
.form-control:disabled, .form-control[readonly] { background-color: var(--ksa-muted-bg); }
.form-control.is-invalid, .has-error .form-control { border-color: #e5535f !important; }
.form-control.is-invalid:focus, .has-error .form-control:focus { box-shadow: 0 0 0 4px rgba(229, 83, 95, .18) !important; }
.form-control.is-valid { border-color: #2fb36f !important; }
.input-group-text, .input-group-prepend .input-group-text, .input-group-append .input-group-text {
    border: 1.5px solid var(--ksa-border-strong); background: var(--ksa-muted-bg); color: var(--ksa-text-muted);
}
.input-group:focus-within .input-group-text { border-color: var(--ksa-primary); color: var(--ksa-primary); background: var(--ksa-primary-soft); }
label, .control-label { font-weight: 600; }
.form-group:focus-within > label, .form-group:focus-within .control-label { color: var(--ksa-primary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ksa-primary); }
input[type="checkbox"]:not(.custom-control-input):not(.bootstrap-switch input), input[type="radio"]:not(.custom-control-input) {
    width: 1.05em; height: 1.05em; vertical-align: middle; cursor: pointer;
}
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ksa-primary) !important; border-color: var(--ksa-primary) !important; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 4px var(--ksa-primary-ring) !important; }
select.form-control, .custom-select { cursor: pointer; }

/* domain search box (cart + homepage) */
.domain__search__input__wrapper, .domain__register__form .single-input {
    border-radius: 16px; transition: box-shadow var(--ksa-speed) var(--ksa-ease), transform var(--ksa-speed) var(--ksa-ease);
}
.domain__search__input__wrapper:focus-within, .domain__register__form:focus-within .single-input {
    box-shadow: 0 0 0 5px var(--ksa-primary-ring), var(--ksa-shadow-lg); transform: translateY(-1px);
}

/* ---------- cards / boxes ---------- */
.card {
    border: 1px solid var(--ksa-border) !important; border-radius: var(--ksa-radius) !important;
    box-shadow: var(--ksa-shadow-sm);
}
.card:hover { box-shadow: var(--ksa-shadow-md); }
.card .card__header, .card .card-header { border-top-left-radius: var(--ksa-radius); border-top-right-radius: var(--ksa-radius); }

/* small interactive tiles: lift on hover */
.client__area__proforomance__box, .pm-box, .client__area__profile__static__box,
.pricing__plans__standard, .homepage__main__pricing__plan__box,
.main__homepage__services__grid__element, .product__cart__sidepanel__item,
.domain__search__results__wrapper .domain-suggestion, .spotlight__tlds__domains__configure__product__wrapper > * {
    transition: transform .28s var(--ksa-ease), box-shadow .28s var(--ksa-ease), border-color .28s var(--ksa-ease);
}
.client__area__proforomance__box:hover, .pm-box:hover,
.pricing__plans__standard:hover, .homepage__main__pricing__plan__box:hover,
.main__homepage__services__grid__element:hover {
    transform: translateY(-6px);
    box-shadow: var(--ksa-shadow-lg) !important;
}
.pricing__plans__standard { border: 1px solid var(--ksa-border); position: relative; }
.pricing__plans__standard:hover { border-color: rgba(130, 93, 149, .45); }
.pricing__plans__standard::after, .homepage__main__pricing__plan__box::after {
    content: ""; position: absolute; inset-inline: 18%; top: 0; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--ksa-primary), #c58be0); opacity: 0; transform: scaleX(.3);
    transition: opacity .28s, transform .28s var(--ksa-ease);
}
.homepage__main__pricing__plan__box { position: relative; }
.pricing__plans__standard:hover::after, .homepage__main__pricing__plan__box:hover::after { opacity: 1; transform: scaleX(1); }
.client__area__proforomance__box__icon { transition: transform .35s var(--ksa-ease); }
.client__area__proforomance__box:hover .client__area__proforomance__box__icon { transform: rotate(-8deg) scale(1.12); }
.popular-plan.animate-popular, .popular-plan { animation: ksa-float 3s ease-in-out infinite; }
@keyframes ksa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* client area list rows (services / domains / tickets lists on home) */
.body__list__group__item, .div-service-item, .list-group-item-action {
    transition: background-color var(--ksa-speed), padding var(--ksa-speed) var(--ksa-ease), box-shadow var(--ksa-speed);
}
.body__list__group__item:hover, .div-service-item:hover, .list-group-item-action:hover {
    background-color: var(--ksa-muted-bg) !important; padding-inline-start: 1.35rem !important;
}
.body__list__group__item__link:hover { color: var(--ksa-primary) !important; }

/* order-form side panel (categories / actions) */
.product__cart__sidepanel { border-radius: var(--ksa-radius); overflow: hidden; }
.product__cart__sidepanel__item { border-radius: 10px; }
.product__cart__sidepanel__item:hover { background: var(--ksa-primary-soft); padding-inline-start: 6px; }
.product__cart__sidepanel__item.active { background: var(--ksa-primary-soft); box-shadow: inset 3px 0 0 var(--ksa-primary); }
html[dir="rtl"] .product__cart__sidepanel__item.active { box-shadow: inset -3px 0 0 var(--ksa-primary); }
.product__cart__sidepanel__item__icon { transition: transform var(--ksa-speed) var(--ksa-ease); }
.product__cart__sidepanel__item:hover .product__cart__sidepanel__item__icon { transform: scale(1.15); color: var(--ksa-primary); }

/* ---------- tabs / pills / list groups ---------- */
.nav-tabs { border-bottom: 1px solid var(--ksa-border); gap: 4px; }
.nav-tabs .nav-link { border: 0 !important; border-radius: 10px 10px 0 0; position: relative; color: var(--ksa-text-muted); }
.nav-tabs .nav-link::after {
    content: ""; position: absolute; inset-inline: 50%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--ksa-primary); transition: inset-inline var(--ksa-speed) var(--ksa-ease);
}
.nav-tabs .nav-link:hover { color: var(--ksa-primary); background: var(--ksa-primary-soft); }
.nav-tabs .nav-link.active { color: var(--ksa-primary) !important; background: transparent; font-weight: 700; }
.nav-tabs .nav-link.active::after, .nav-tabs .nav-link:hover::after { inset-inline: 12%; }
.nav-pills .nav-link { border-radius: 10px; }
.nav-pills .nav-link:hover:not(.active) { background: var(--ksa-primary-soft); color: var(--ksa-primary); }
.nav-pills .nav-link.active { background: var(--ksa-primary) !important; box-shadow: 0 6px 16px rgba(130, 93, 149, .35); }
.list-group-item { border-color: var(--ksa-border); }
.list-group-item.active { background-color: var(--ksa-primary) !important; border-color: var(--ksa-primary) !important; }
.tab-content > .active { animation: ksa-fade-up .35s var(--ksa-ease) both; }

/* ---------- tables ---------- */
.table-container, .dataTables_wrapper, .table-responsive {
    border-radius: var(--ksa-radius); background: #fff;
}
.table { border-collapse: separate; border-spacing: 0; }
.table thead th, table.dataTable thead th {
    background: var(--ksa-muted-bg) !important; color: #4a4f66; font-weight: 700; font-size: .86em;
    border-bottom: 1px solid var(--ksa-border) !important; border-top: 0 !important; white-space: nowrap;
}
.table thead th:first-child { border-start-start-radius: 12px; }
.table thead th:last-child { border-start-end-radius: 12px; }
.table td { border-top: 1px solid #f0f1f6 !important; vertical-align: middle; }
.table tbody tr { transition: background-color var(--ksa-speed), box-shadow var(--ksa-speed); }
.table-hover tbody tr:hover, table.dataTable tbody tr:hover, .table tbody tr[onclick]:hover, .table tbody tr.clickable:hover {
    background-color: rgba(130, 93, 149, .055) !important; cursor: pointer;
}
.table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--ksa-primary); }
html[dir="rtl"] .table tbody tr:hover td:first-child { box-shadow: inset -3px 0 0 var(--ksa-primary); }
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--ksa-border-strong); border-radius: 20px; padding: .35rem .9rem; min-height: 38px;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ksa-primary); box-shadow: 0 0 0 4px var(--ksa-primary-ring); outline: 0; }

/* ---------- status labels / badges ---------- */
.badge, .label, .status, [class*="status-"] .label { border-radius: 30px; font-weight: 600; letter-spacing: .1px; }
.label.status, span.status { padding: .3em .85em; }

/* ---------- pagination ---------- */
.page-link { border-radius: 10px !important; margin: 0 3px; border: 1px solid var(--ksa-border); color: #4a4f66; min-width: 38px; text-align: center; }
.page-link:hover { background: var(--ksa-primary-soft); color: var(--ksa-primary); border-color: transparent; transform: translateY(-2px); }
.page-item.active .page-link { background: var(--ksa-primary) !important; border-color: var(--ksa-primary) !important; box-shadow: 0 6px 16px rgba(130, 93, 149, .35); }

/* ---------- alerts ---------- */
.alert { border-radius: var(--ksa-radius); border-width: 1px; animation: ksa-fade-up .4s var(--ksa-ease) both; box-shadow: var(--ksa-shadow-sm); }
.alert .close { transition: transform var(--ksa-speed), opacity var(--ksa-speed); }
.alert .close:hover { transform: rotate(90deg); }

/* ---------- modals ---------- */
.modal-content { border: 0 !important; border-radius: 18px !important; box-shadow: 0 24px 60px rgba(23, 26, 44, .25) !important; overflow: hidden; }
.modal.fade .modal-dialog { transform: translateY(16px) scale(.97); transition: transform .28s var(--ksa-ease), opacity .28s; }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.show { opacity: .45; }
.modal-backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- breadcrumb ---------- */
.breadcrumb-item a { position: relative; }
.breadcrumb-item a:hover { color: var(--ksa-primary) !important; }

/* ---------- footer ---------- */
.bottom__footer__links__wrapper a, .main__footer__wrapper a:not(.btn) { position: relative; display: inline-block; }
.bottom__footer__links__wrapper a::after, .main__footer__wrapper li a:not(.btn)::after {
    content: ""; position: absolute; inset-inline-start: 0; bottom: -2px; height: 1.5px; width: 0;
    background: currentColor; transition: width var(--ksa-speed) var(--ksa-ease);
}
.bottom__footer__links__wrapper a:hover::after, .main__footer__wrapper li a:not(.btn):hover::after { width: 100%; }
.main__footer__wrapper li a:not(.btn):hover { color: var(--ksa-primary) !important; transform: translateX(-3px); }
html[dir="ltr"] .main__footer__wrapper li a:not(.btn):hover { transform: translateX(3px); }
.footer__contact__methods__item i { transition: transform var(--ksa-speed) var(--ksa-ease); }
.footer__contact__methods__item:hover i { transform: scale(1.2) rotate(-8deg); color: var(--ksa-primary); }

/* ---------- cookie box ---------- */
.flowting__cookies__box__wrapper {
    border-radius: 18px !important; box-shadow: var(--ksa-shadow-lg) !important; border: 1px solid var(--ksa-border);
    animation: ksa-fade-up .5s .4s var(--ksa-ease) both;
}

/* ---------- back to top ---------- */
.ksa-to-top {
    position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 1040;
    width: 46px; height: 46px; border-radius: 14px; border: 0; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, var(--ksa-primary), #b07ccc);
    box-shadow: 0 10px 24px rgba(130, 93, 149, .4);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
    transition: opacity .25s, visibility .25s, transform .25s var(--ksa-ease), box-shadow .25s;
}
body.ksa-show-top .ksa-to-top { opacity: 1; visibility: visible; transform: none; }
.ksa-to-top:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(130, 93, 149, .5); }

/* ---------- reveal on scroll (only when JS is active) ---------- */
.ksa-js .ksa-reveal { opacity: 0; transform: translateY(22px); }
.ksa-js .ksa-reveal.ksa-in { opacity: 1; transform: none; transition: opacity .6s var(--ksa-ease), transform .6s var(--ksa-ease); transition-delay: var(--ksa-delay, 0s); }

@keyframes ksa-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ksa-fade-in-side { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* ---------- page content entrance ---------- */
.ksa-js .page__container > .container, .ksa-js .page__container > .container-fluid,
.ksa-js .main-content, .ksa-js #main-body { animation: ksa-fade-up .45s var(--ksa-ease) both; }

/* ---------- mobile ---------- */
@media (max-width: 767.98px) {
    .btn:not(:disabled):not(.disabled):hover { transform: none; }
    .client__area__proforomance__box:hover, .pm-box:hover, .pricing__plans__standard:hover,
    .homepage__main__pricing__plan__box:hover, .main__homepage__services__grid__element:hover { transform: none; }
    .ksa-to-top { width: 42px; height: 42px; bottom: 16px; inset-inline-end: 16px; }
    .form-control, .custom-select { font-size: 16px; } /* avoid iOS zoom on focus */
}

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .ksa-js .ksa-reveal { opacity: 1; transform: none; }
    .btn-primary::before, .btn-success::before, .ksa-ripple { display: none; }
}

/* ---------- secondary page menu (nav-link list-group-item): readable active item ---------- */
.nav__items__wrapper .nav-link.active, .nav__items__wrapper .list-group-item.active { color: #fff !important; }
.nav__items__wrapper .nav-link:not(.active):hover { color: var(--ksa-primary) !important; }

/* Order summary total (2026-11-10): "ريال سعودي 580.00" wrapped onto two lines in the
   narrow summary column of the service/domain renewal pages. Keep it on one line and
   shrink the font with the column width instead. */
#order-standard_cart .order-summary,
#order-standard_cart .sidebar__separated__price { container-type: inline-size; }
#order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart .sidebar__separated__price .amt {
    white-space: nowrap;
    font-size: clamp(1.15rem, 11cqi, 2rem);
}