/* ==========================================================================
   Ezzat theme — professional webhosting + domains (Hostixo-style)
   Pure CSS, no build step. Brand colors injected via :root variables.
   ========================================================================== */

:root {
    --ezzat-primary: #2563eb;
    --ezzat-secondary: #0ea5e9;
    --ezzat-accent: #f59e0b;
    --ezzat-dark: #0b1e3a;
    --ezzat-ink: #0f172a;
    --ezzat-muted: #64748b;
    --ezzat-line: #e2e8f0;
    --ezzat-bg: #f6f9ff;
    --ezzat-card: #ffffff;
    --ezzat-radius: 14px;
    --ezzat-shadow: 0 10px 30px rgba(11, 30, 58, .10);
    --ezzat-shadow-sm: 0 4px 14px rgba(11, 30, 58, .08);
    --ezzat-font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

[data-bs-theme="dark"] {
    --ezzat-ink: #e8eef7;
    --ezzat-muted: #9fb0c7;
    --ezzat-line: #24344f;
    --ezzat-bg: #0a1428;
    --ezzat-card: #101e38;
    --ezzat-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --ezzat-shadow-sm: 0 4px 14px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body.ezzat-body {
    font-family: var(--ezzat-font);
    color: var(--ezzat-ink);
    background: var(--ezzat-card);
    margin: 0;
    line-height: 1.6;
}

a { color: var(--ezzat-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- wrappers ---------- */
.ezzat-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ezzat-narrow { max-width: 800px; margin: 0 auto; }

/* ---------- announcement ---------- */
.ezzat-announce { background: linear-gradient(90deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; text-align: center; font-size: 14px; padding: 8px 12px; }
.ezzat-announce a { color: #fff; font-weight: 600; }

/* ---------- top mini bar ---------- */
.ezzat-topbar { background: var(--ezzat-dark); color: #cdd9ec; font-size: 13px; }
.ezzat-topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.ezzat-topbar-left, .ezzat-topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ezzat-top-link { color: #cdd9ec; }
.ezzat-top-link:hover { color: #fff; }
.ezzat-top-phone { color: #fff; font-weight: 600; }
.ezzat-register { background: var(--ezzat-accent); color: #1a1005 !important; padding: 3px 12px; border-radius: 20px; font-weight: 700; }
.ezzat-lang, .ezzat-topbar select { background: #16294d; color: #fff; border: 1px solid #2b446e; border-radius: 8px; font-size: 12px; padding: 3px 8px; }
.ezzat-account { position: relative; }
.ezzat-account-btn { background: transparent; border: 0; color: #fff; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.ezzat-avatar, .ezzat-account img { border-radius: 50%; }
.ezzat-caret { font-size: 10px; }
.ezzat-dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: 10px; box-shadow: var(--ezzat-shadow); min-width: 180px; z-index: 200; padding: 6px; }
.ezzat-dropdown a { display: block; padding: 8px 12px; color: var(--ezzat-ink); border-radius: 6px; }
.ezzat-dropdown a:hover { background: var(--ezzat-bg); text-decoration: none; }

/* ---------- main header ---------- */
.ezzat-header { background: var(--ezzat-card); border-bottom: 1px solid var(--ezzat-line); position: sticky; top: 0; z-index: 100; transition: box-shadow .2s; }
.ezzat-header.is-stuck { box-shadow: var(--ezzat-shadow-sm); }
.ezzat-header-inner { display: flex; align-items: center; gap: 26px; padding-top: 12px; padding-bottom: 12px; }
.ezzat-logo { display: inline-flex; align-items: center; font-weight: 800; font-size: 22px; color: var(--ezzat-dark); }
[data-bs-theme="dark"] .ezzat-logo { color: #fff; }
.ezzat-logo:hover { text-decoration: none; }
.ezzat-logo-img { max-height: 44px; width: auto; }
.ezzat-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 1px solid var(--ezzat-line); border-radius: 8px; padding: 9px 10px; cursor: pointer; margin-left: auto; }
.ezzat-burger span { display: block; width: 22px; height: 2px; background: var(--ezzat-ink); }

/* mega menu */
.ezzat-nav { flex: 1; }
.ezzat-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; align-items: center; }
.ezzat-menu-item { position: relative; }
.ezzat-menu-item > a { display: inline-flex; align-items: center; gap: 5px; padding: 10px 13px; font-weight: 600; font-size: 15px; color: var(--ezzat-ink); border-radius: 8px; white-space: nowrap; }
.ezzat-menu-item > a:hover { color: var(--ezzat-primary); background: var(--ezzat-bg); text-decoration: none; }
.ezzat-mega { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: 12px; box-shadow: var(--ezzat-shadow); padding: 10px; z-index: 150; }
.ezzat-menu-item:hover > .ezzat-mega, .ezzat-menu-item:focus-within > .ezzat-mega, .ezzat-menu-item.open > .ezzat-mega { display: block; }
.ezzat-mega a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ezzat-ink); font-size: 14px; }
.ezzat-mega a:hover { background: var(--ezzat-bg); color: var(--ezzat-primary); text-decoration: none; }
.ezzat-mega a.ezzat-mega-sub { padding: 6px 12px 6px 24px; font-size: 13px; color: var(--ezzat-muted); }
.ezzat-mega a.ezzat-mega-sub:hover { color: var(--ezzat-primary); }
[dir="rtl"] .ezzat-mega a.ezzat-mega-sub { padding: 6px 24px 6px 12px; }

.ezzat-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ezzat-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--ezzat-line); border-radius: 10px; color: var(--ezzat-ink); }
.ezzat-cart:hover { text-decoration: none; border-color: var(--ezzat-primary); }
.ezzat-cart-icon { font-size: 19px; }
.ezzat-cart-count { position: absolute; top: -7px; right: -7px; background: var(--ezzat-accent); color: #1a1005; font-size: 11px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }

/* buttons */
.ezzat-btn { display: inline-block; border-radius: 10px; padding: 11px 22px; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; text-align: center; }
.ezzat-btn:hover { text-decoration: none; filter: brightness(.95); }
.ezzat-btn-primary { background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; }
.ezzat-btn-accent { background: var(--ezzat-accent); color: #1a1005; }
.ezzat-btn-outline { border-color: var(--ezzat-primary); color: var(--ezzat-primary); background: transparent; }
.ezzat-btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
.ezzat-btn-block { display: block; width: 100%; }
.ezzat-header-actions .ezzat-btn { padding: 9px 16px; font-size: 14px; white-space: nowrap; }

/* ---------- mobile drawer ---------- */
.ezzat-drawer[aria-hidden="true"] { display: none; }
.ezzat-drawer { position: fixed; inset: 0; z-index: 500; }
.ezzat-drawer-backdrop { position: absolute; inset: 0; background: rgba(5, 12, 26, .55); }
.ezzat-drawer-panel { position: absolute; top: 0; right: 0; width: min(340px, 88vw); height: 100%; background: var(--ezzat-card); overflow-y: auto; padding: 18px; box-shadow: var(--ezzat-shadow); animation: ezzatSlide .22s ease; }
@keyframes ezzatSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ezzat-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ezzat-drawer-close { background: none; border: 0; font-size: 30px; cursor: pointer; color: var(--ezzat-ink); line-height: 1; }
.ezzat-drawer-list { list-style: none; margin: 0; padding: 0; }
.ezzat-drawer-list a { display: block; padding: 10px 6px; color: var(--ezzat-ink); font-weight: 600; border-bottom: 1px solid var(--ezzat-line); }
.ezzat-drawer-group { padding: 12px 6px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ezzat-muted); }
.ezzat-drawer-lang { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 6px; font-weight: 600; border-bottom: 1px solid var(--ezzat-line); }
.ezzat-drawer-lang select { max-width: 55%; }
.ezzat-drawer-auth { display: flex; gap: 10px; padding-top: 16px; }
.ezzat-drawer-auth .ezzat-btn { flex: 1; padding: 10px; font-size: 14px; }

/* ---------- hero ---------- */
.ezzat-hero { background: radial-gradient(1100px 420px at 85% -60px, rgba(14, 165, 233, .35), transparent 60%), linear-gradient(135deg, var(--ezzat-dark) 0%, #123064 60%, var(--ezzat-primary) 130%); color: #fff; overflow: hidden; }
.ezzat-hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 54px; }
.ezzat-pill { display: inline-block; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); padding: 6px 14px; border-radius: 30px; font-size: 13px; margin-bottom: 16px; }
.ezzat-hero-copy h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12; margin: 0 0 14px; font-weight: 800; }
.ezzat-hero-sub { color: #d6e4fa; font-size: 17px; max-width: 560px; }
.ezzat-domain { display: flex; gap: 0; margin-top: 22px; background: #fff; border-radius: 12px; padding: 6px; max-width: 560px; }
.ezzat-domain input { flex: 1; border: 0; outline: 0; padding: 12px 14px; font-size: 15px; border-radius: 8px; color: #0f172a; min-width: 0; }
.ezzat-domain-hint { font-size: 13px; color: #bcd0ee; }
.ezzat-domain-hint a { color: #fff; font-weight: 600; }
.ezzat-trust { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; font-size: 14px; color: #e6efff; }
.ezzat-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ezzat-hero-media { display: flex; justify-content: center; }
.ezzat-hero-card { background: rgba(255, 255, 255, .96); color: #0f172a; border-radius: 16px; width: min(360px, 100%); box-shadow: var(--ezzat-shadow); overflow: hidden; }
.ezzat-hero-card-head { background: #e8eef7; padding: 10px 14px; display: flex; gap: 6px; }
.ezzat-hero-card-head span { width: 11px; height: 11px; border-radius: 50%; background: #c3d2ea; display: block; }
.ezzat-hero-card-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.ezzat-hero-card-body strong { font-size: 19px; }
.ezzat-hero-card-body span, .ezzat-hero-card-body small { color: var(--ezzat-muted); font-size: 13px; }
.ezzat-hero-meter { background: #e8eef7; border-radius: 8px; height: 10px; overflow: hidden; }
.ezzat-hero-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--ezzat-primary), var(--ezzat-secondary)); }
.ezzat-hero-media img { max-width: 100%; border-radius: 16px; }
.ezzat-ticker { background: rgba(0, 0, 0, .25); border-top: 1px solid rgba(255, 255, 255, .18); }
.ezzat-ticker-inner { display: flex; gap: 26px; align-items: center; justify-content: center; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
.ezzat-ticker a { color: #ffd88a; font-weight: 700; }

/* ---------- sections / cards ---------- */
.ezzat-main { background: var(--ezzat-card); }
.ezzat-section { padding: 60px 0; }
.ezzat-alt { background: var(--ezzat-bg); }
.ezzat-h2 { text-align: center; font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin: 0 0 10px; }
.ezzat-sub { text-align: center; color: var(--ezzat-muted); margin: 0 0 34px; }
.ezzat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ezzat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ezzat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ezzat-card { position: relative; background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 28px 24px; box-shadow: var(--ezzat-shadow-sm); display: flex; flex-direction: column; gap: 10px; transition: transform .18s, box-shadow .18s; }
.ezzat-card:hover { transform: translateY(-4px); box-shadow: var(--ezzat-shadow); }
.ezzat-badge { position: absolute; top: 14px; right: 14px; background: var(--ezzat-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.ezzat-badge-sale { background: var(--ezzat-accent); color: #1a1005; }
.ezzat-card-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; }
.ezzat-card-icon img { width: 30px; height: 30px; object-fit: contain; }
.ezzat-card h3 { margin: 6px 0 0; font-size: 20px; }
.ezzat-card-desc { color: var(--ezzat-muted); font-size: 14px; }
.ezzat-card-desc table { width: 100%; }
.ezzat-card-feats { list-style: none; margin: 6px 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.ezzat-card-feats li { color: var(--ezzat-ink); }
.ezzat-price { margin-top: auto; padding: 10px 0; }
.ezzat-price small { display: block; color: var(--ezzat-muted); }
.ezzat-price strong { font-size: 22px; }
.ezzat-empty { text-align: center; color: var(--ezzat-muted); }

/* features */
.ezzat-feat { background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 22px; text-align: center; }
.ezzat-feat span { font-size: 30px; }
.ezzat-feat h4 { margin: 10px 0 6px; font-size: 17px; }
.ezzat-feat p { margin: 0; color: var(--ezzat-muted); font-size: 14px; }

/* tabs */
.ezzat-tabs { max-width: 860px; margin: 26px auto 0; border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); overflow: hidden; }
.ezzat-tab-btns { display: flex; background: var(--ezzat-bg); }
.ezzat-tab-btns button { flex: 1; border: 0; background: none; padding: 14px; font-weight: 700; font-size: 15px; cursor: pointer; color: var(--ezzat-muted); }
.ezzat-tab-btns button.active { background: var(--ezzat-card); color: var(--ezzat-primary); box-shadow: inset 0 -3px 0 var(--ezzat-primary); }
.ezzat-tab-panels > div { padding: 30px; text-align: center; }
.ezzat-tab-panels p { color: var(--ezzat-muted); margin-top: 0; }

/* steps */
.ezzat-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 30px 0 0; padding: 0; }
.ezzat-steps li { background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 22px 12px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ezzat-steps b { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.ezzat-steps span { font-weight: 600; font-size: 14px; }

/* reviews */
.ezzat-review { background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 24px; margin: 0; box-shadow: var(--ezzat-shadow-sm); }
.ezzat-stars { color: var(--ezzat-accent); letter-spacing: 2px; }
.ezzat-review cite { color: var(--ezzat-muted); font-style: normal; font-weight: 700; }

/* CTA */
.ezzat-cta { background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; }
.ezzat-cta-inner { text-align: center; padding-top: 56px; padding-bottom: 56px; }
.ezzat-cta-inner h2 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 34px); }
.ezzat-cta-inner p { color: #e2ecff; margin: 0 0 22px; }

/* FAQ */
.ezzat-faq { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.ezzat-faq-item { border: 1px solid var(--ezzat-line); border-radius: 12px; padding: 16px 18px; background: var(--ezzat-card); }
.ezzat-faq-item summary { font-weight: 700; cursor: pointer; }
.ezzat-faq-item p { color: var(--ezzat-muted); margin: 10px 0 0; }

/* posts */
.ezzat-post { border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 22px; background: var(--ezzat-card); }
.ezzat-post h4 { margin: 0 0 8px; }
.ezzat-post p { color: var(--ezzat-muted); font-size: 14px; }

/* showcase (huraga compat) */
.ezzat-showcase { background: var(--ezzat-bg); border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 26px 28px; margin-top: 26px; }

/* ---------- app content zone (module pages) ---------- */
.ezzat-content-zone { display: grid; grid-template-columns: 250px 1fr; gap: 28px; padding-top: 34px; padding-bottom: 50px; align-items: start; }
.ezzat-content-zone.no-sidebar { grid-template-columns: 1fr; }
.ezzat-content-zone.no-sidebar .ezzat-content { width: 100%; max-width: 100%; }
.ezzat-sidebar { min-width: 0; }
.ezzat-content > section { width: 100%; min-width: 0; }
.ezzat-content .card { width: 100%; }
.ezzat-content .form-control { width: 100%; }
.ezzat-side { position: sticky; top: 150px; background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 12px; }
.ezzat-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ezzat-side-item a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--ezzat-ink); font-weight: 600; font-size: 14px; }
.ezzat-side-item a:hover { background: var(--ezzat-bg); text-decoration: none; }
.ezzat-side-item.active a { background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; }
.ezzat-side-item .icon { width: 18px; height: 18px; }
.ezzat-side-note { padding: 14px 12px 6px; font-size: 13px; color: var(--ezzat-muted); }
.ezzat-side-note h5 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.ezzat-content { min-width: 0; }
.ezzat-content .content-block, .ezzat-content .card, .ezzat-content .box { border-radius: var(--ezzat-radius); }
.ezzat-crumbs { margin-bottom: 14px; }
.ezzat-breadcrumb { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; font-size: 13px; color: var(--ezzat-muted); }
.ezzat-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--ezzat-muted); }
.ezzat-breadcrumb .active { color: var(--ezzat-ink); font-weight: 600; }

/* professional order / pricing tables */
.ezzat-content table { width: 100%; border-collapse: collapse; }
.ezzat-content .pricing .currency, .ezzat-content .currency { font-size: 24px; font-weight: 800; color: var(--ezzat-primary); }
.ezzat-content .btn, .ezzat-content button[type="submit"], .ezzat-content .btn-primary { border-radius: 10px; }
.ezzat-content select, .ezzat-content input[type="text"], .ezzat-content input[type="email"], .ezzat-content input[type="password"], .ezzat-content textarea { border: 1px solid var(--ezzat-line); border-radius: 9px; padding: 9px 12px; max-width: 100%; }

/* flash messages (keeps huraga .h-block compat) */
.ezzat-flash, .h-block { border-radius: 12px; padding: 16px 18px; margin: 14px 0; border: 1px solid var(--ezzat-line); background: var(--ezzat-bg); }
.ezzat-flash-title, .h-block h2 { margin: 0 0 4px; font-size: 16px; text-transform: capitalize; }
.ezzat-flash-text, .h-block p { margin: 0; }
.ezzat-flash-error, .h-block.error { background: #fef2f2; border-color: #fecaca; }
.ezzat-flash-success, .h-block.success { background: #f0fdf4; border-color: #bbf7d0; }
.ezzat-flash-info, .h-block.info { background: #eff6ff; border-color: #bfdbfe; }

/* ---------- footer ---------- */
.ezzat-footer { background: var(--ezzat-dark); color: #b9c8e2; margin-top: 0; }
.ezzat-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: 28px; padding-top: 54px; padding-bottom: 40px; }
.ezzat-foot-brand .ezzat-logo { color: #fff; }
.ezzat-foot-brand p { font-size: 14px; }
.ezzat-foot-col h5 { color: #fff; margin: 0 0 12px; font-size: 15px; }
.ezzat-foot-col a { display: block; color: #b9c8e2; font-size: 14px; padding: 4px 0; }
.ezzat-foot-col a:hover { color: #fff; }
.ezzat-social { display: flex; gap: 8px; margin-top: 12px; }
.ezzat-social a { width: 32px; height: 32px; border-radius: 8px; background: #1a3260; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; padding: 0; }
.ezzat-bottombar { border-top: 1px solid #22385f; }
.ezzat-bottombar-inner { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; font-size: 13px; }
.ezzat-pay { display: flex; gap: 8px; flex-wrap: wrap; }
.ezzat-pay-badge { border: 1px solid #33497a; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 700; color: #dbe6f7; }

/* ---------- auth (layout_public) ---------- */
.ezzat-public { background: linear-gradient(135deg, var(--ezzat-dark), #16336e); min-height: 100vh; }
.ezzat-auth { display: flex; justify-content: center; padding: 60px 16px; }
.ezzat-auth-card { background: var(--ezzat-card); border-radius: 18px; box-shadow: var(--ezzat-shadow); padding: 36px; width: min(520px, 100%); }
.ezzat-auth-logo { text-align: center; margin-bottom: 18px; }

/* ---------- error page ---------- */
.ezzat-error { text-align: center; padding: 70px 20px; }
.ezzat-error-code { font-size: clamp(70px, 12vw, 140px); font-weight: 800; margin: 0; background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ezzat-error-text { font-size: 18px; }
.ezzat-error-detail { color: var(--ezzat-muted); }
.ezzat-error-actions { margin-top: 20px; }

/* ---------- floating bits ---------- */
.ezzat-toasts { position: fixed; bottom: 18px; right: 18px; z-index: 600; display: flex; flex-direction: column; gap: 10px; }
.ezzat-toast { background: var(--ezzat-dark); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--ezzat-shadow); font-size: 14px; }
.ezzat-top { position: fixed; bottom: 18px; left: 18px; z-index: 400; width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; font-size: 20px; cursor: pointer; box-shadow: var(--ezzat-shadow); }
.ezzat-wait { position: fixed; inset: 0; background: rgba(5, 12, 26, .4); z-index: 700; display: flex; align-items: center; justify-content: center; }
.ezzat-spinner { width: 52px; height: 52px; border: 5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ezzatSpin .8s linear infinite; }
@keyframes ezzatSpin { to { transform: rotate(360deg); } }

/* svg sprite icons inside ezzat chrome */
.ezzat-side-item .icon, .ezzat-top .icon { width: 18px; height: 18px; }

/* hide-theme helpers (parity with huraga) */
[data-bs-theme="dark"] .hide-theme-dark { display: none !important; }
[data-bs-theme="light"] .hide-theme-light { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .ezzat-grid { grid-template-columns: repeat(2, 1fr); }
    .ezzat-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ezzat-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .ezzat-steps { grid-template-columns: repeat(3, 1fr); }
    .ezzat-content-zone { grid-template-columns: 220px 1fr; }
    .ezzat-header-actions .ezzat-btn-outline { display: none; }
}

@media (max-width: 900px) {
    .ezzat-nav { display: none; }
    .ezzat-burger { display: flex; }
    .ezzat-hero-inner { grid-template-columns: 1fr; padding-top: 44px; }
    .ezzat-hero-media { order: -1; }
    .ezzat-hero-card { width: min(420px, 100%); }
    .ezzat-content-zone { grid-template-columns: 1fr; }
    .ezzat-side { position: static; }
    .ezzat-header-actions .ezzat-btn-primary { display: none; }
    .ezzat-topbar-left .ezzat-top-link:nth-child(n+3) { display: none; }
}

@media (max-width: 640px) {
    .ezzat-grid, .ezzat-grid-3, .ezzat-grid-4 { grid-template-columns: 1fr; }
    .ezzat-steps { grid-template-columns: repeat(2, 1fr); }
    .ezzat-footer-grid { grid-template-columns: 1fr 1fr; }
    .ezzat-domain { flex-direction: column; gap: 6px; }
    .ezzat-domain .ezzat-btn { width: 100%; }
    .ezzat-topbar { font-size: 12px; }
    .ezzat-section { padding: 40px 0; }
    .ezzat-auth-card { padding: 24px 18px; }
    .ezzat-header-inner { gap: 12px; }
    .ezzat-cart + .ezzat-btn { display: none; }
}

/* ==========================================================================
   EZS — service category landing pages (Verpex-style, ezs- namespace)
   Uses var(--ezzat-*) exclusively so dark mode follows automatically.
   The hero gradient stays dark in both modes by design.
   ========================================================================== */
.ezs-page { background: var(--ezzat-card); }

/* ---------- hero ---------- */
.ezs-hero { background: radial-gradient(1100px 420px at 85% -60px, rgba(14, 165, 233, .35), transparent 60%), linear-gradient(135deg, #0b1e3a 0%, #123064 60%, #2563eb 130%); color: #fff; overflow: hidden; }
.ezs-hero-inner { padding-top: 40px; padding-bottom: 54px; }
.ezs-crumbs { font-size: 13px; color: #bcd0ee; margin-bottom: 18px; }
.ezs-crumbs a { color: #fff; font-weight: 600; }
.ezs-crumbs-sep { margin: 0 8px; color: #8fa9d4; }
.ezs-crumbs-current { color: #e6efff; font-weight: 600; }
.ezs-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.ezs-icon-chip { width: 60px; height: 60px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; margin-bottom: 16px; }
.ezs-icon-chip img { width: 34px; height: 34px; object-fit: contain; }
.ezs-title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.12; margin: 0 0 14px; font-weight: 800; color: #fff; }
.ezs-sub { color: #d6e4fa; font-size: 17px; max-width: 620px; }
.ezs-sub table { width: 100%; }
.ezs-trust { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; font-size: 14px; color: #e6efff; }
.ezs-stats { color: #bcd0ee; font-size: 15px; margin: 0 0 20px; }
.ezs-stats strong { color: #fff; font-size: 19px; }
.ezs-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ezs-hero-side { display: flex; justify-content: center; }
.ezs-hero-card { background: rgba(255, 255, 255, .96); color: #0f172a; border-radius: 16px; width: min(360px, 100%); box-shadow: var(--ezzat-shadow); overflow: hidden; }
.ezs-hero-card-head { background: #e8eef7; padding: 10px 14px; display: flex; gap: 6px; }
.ezs-hero-card-head span { width: 11px; height: 11px; border-radius: 50%; background: #c3d2ea; display: block; }
.ezs-hero-card-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.ezs-hero-card-body strong { font-size: 19px; }
.ezs-hero-card-body span, .ezs-hero-card-body small { color: var(--ezzat-muted); font-size: 13px; }
.ezs-hero-meter { background: #e8eef7; border-radius: 8px; height: 10px; overflow: hidden; }
.ezs-hero-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--ezzat-primary), var(--ezzat-secondary)); }
.ezs-domain { display: flex; gap: 0; margin-top: 22px; background: #fff; border-radius: 12px; padding: 6px; max-width: 560px; }
.ezs-domain input { flex: 1; border: 0; outline: 0; padding: 12px 14px; font-size: 15px; border-radius: 8px; color: #0f172a; min-width: 0; }
.ezs-domain-note { font-size: 13px; color: #bcd0ee; margin-top: 12px; }
.ezs-domain-note a { color: #fff; font-weight: 600; }

/* ---------- billing toggle ---------- */
.ezs-billing { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 30px 0 6px; }
.ezs-pill { position: relative; border: 1px solid var(--ezzat-line); background: var(--ezzat-card); color: var(--ezzat-ink); border-radius: 30px; padding: 10px 22px; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .18s; }
.ezs-pill:hover { border-color: var(--ezzat-primary); color: var(--ezzat-primary); }
.ezs-pill.active { background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; border-color: transparent; box-shadow: var(--ezzat-shadow-sm); }
.ezs-pill-badge { display: inline-block; margin-left: 8px; background: var(--ezzat-accent); color: #1a1005; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 12px; vertical-align: middle; }
.ezs-pill.active .ezs-pill-badge { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- plan cards ---------- */
.ezs-plans { padding-top: 26px; padding-bottom: 50px; }
.ezs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 330px)); justify-content: center; align-items: stretch; gap: 22px; }
@media (max-width: 1100px) {
    .ezs-grid { grid-template-columns: repeat(2, minmax(0, 330px)); }
}
@media (max-width: 720px) {
    .ezs-grid { grid-template-columns: minmax(0, 400px); }
}
.ezs-card { position: relative; background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 28px 24px; box-shadow: var(--ezzat-shadow-sm); display: flex; flex-direction: column; gap: 10px; transition: transform .18s, box-shadow .18s; }
.ezs-card:hover { transform: translateY(-4px); box-shadow: var(--ezzat-shadow); }
.ezs-card.ezs-featured { border: 2px solid var(--ezzat-primary); box-shadow: var(--ezzat-shadow); transform: translateY(-4px); overflow: hidden; }
.ezs-rec { display: block; background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; padding: 9px 10px; margin: -28px -24px 14px; }
.ezs-badge { position: absolute; top: 14px; right: 14px; background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.ezs-card-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; }
.ezs-card-icon img { width: 30px; height: 30px; object-fit: contain; }
.ezs-card-title { margin: 6px 0 0; font-size: 20px; }
.ezs-card-desc { color: var(--ezzat-muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ezs-card-desc table { width: 100%; }
.ezs-price { margin-top: auto; padding: 12px 0 4px; }
.ezs-price strong { font-size: 30px; font-weight: 800; color: var(--ezzat-ink); }
.ezs-price strong.ezs-price-free { color: var(--ezzat-primary); }
.ezs-per { display: block; color: var(--ezzat-muted); font-size: 13px; }
.ezs-was { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ezzat-muted); margin-top: 6px; }
.ezs-was del { color: var(--ezzat-muted); }
.ezs-off { display: inline-block; background: #bef264; color: #1a2e05; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 6px; transform: rotate(-2deg); white-space: nowrap; }
.ezs-paytoday { display: block; color: var(--ezzat-muted); font-size: 12px; margin-top: 4px; }
.ezs-setup { display: block; color: var(--ezzat-muted); font-size: 12px; }
.ezs-feats { list-style: none; margin: 6px 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.ezs-feats li { color: var(--ezzat-ink); }
.ezs-card-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* ---------- comparison table ---------- */
.ezs-compare-sec { padding-bottom: 50px; }
.ezs-scroll-hint { display: none; text-align: center; color: var(--ezzat-muted); font-size: 13px; margin: 0 0 10px; }
.ezs-table-wrap { overflow-x: auto; border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); background: var(--ezzat-card); }
.ezs-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ezs-table th, .ezs-table td { padding: 14px 16px; border-bottom: 1px solid var(--ezzat-line); font-size: 14px; text-align: center; vertical-align: top; }
.ezs-table thead th { background: var(--ezzat-bg); font-weight: 800; white-space: nowrap; }
.ezs-table tbody tr:nth-child(even) td { background: var(--ezzat-bg); }
.ezs-table tbody tr:last-child td { border-bottom: 0; }
.ezs-table .ezs-row-label { text-align: left; font-weight: 700; white-space: nowrap; }
.ezs-table th.ezs-row-label:first-child, .ezs-table td.ezs-row-label:first-child { position: sticky; left: 0; background: var(--ezzat-card); z-index: 2; box-shadow: 1px 0 0 var(--ezzat-line); }
.ezs-table thead th.ezs-row-label:first-child { background: var(--ezzat-bg); }
.ezs-table td strong { font-size: 18px; }
.ezs-cell-desc { max-width: 260px; font-size: 13px; color: var(--ezzat-muted); }
.ezs-cell-desc table { width: 100%; }

/* ---------- marketing bands ---------- */
.ezs-bands { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ezs-band { background: var(--ezzat-card); border: 1px solid var(--ezzat-line); border-radius: var(--ezzat-radius); padding: 28px; display: flex; gap: 16px; align-items: flex-start; }
.ezs-band-icon { font-size: 34px; line-height: 1; }
.ezs-band h3 { margin: 0 0 6px; font-size: 19px; }
.ezs-band p { margin: 0; color: var(--ezzat-muted); font-size: 14px; }
.ezs-featgrid { margin-top: 26px; }
.ezs-support-band { background: linear-gradient(135deg, var(--ezzat-dark), #16336e); color: #fff; }
.ezs-support-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 44px; }
.ezs-support-inner h2 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); color: #fff; }
.ezs-support-inner p { margin: 0; color: #d6e4fa; }

/* ---------- FAQ ---------- */
.ezs-faq { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.ezs-faq-item { border: 1px solid var(--ezzat-line); border-radius: 12px; padding: 16px 18px; background: var(--ezzat-card); }
.ezs-faq-item summary { font-weight: 700; cursor: pointer; color: var(--ezzat-ink); }
.ezs-faq-item p { color: var(--ezzat-muted); margin: 10px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .ezs-hero-grid { grid-template-columns: 1fr; }
    .ezs-hero-side { order: -1; }
    .ezs-hero-card { width: min(420px, 100%); }
    .ezs-bands { grid-template-columns: 1fr; }
    .ezs-scroll-hint { display: block; }
}
@media (max-width: 640px) {
    .ezs-domain { flex-direction: column; gap: 6px; }
    .ezs-domain .ezzat-btn { width: 100%; }
    .ezs-billing { justify-content: flex-start; }
    .ezs-pill { padding: 9px 16px; font-size: 13px; }
    .ezs-price strong { font-size: 26px; }
    .ezs-table th, .ezs-table td { padding: 10px 12px; font-size: 13px; }
    .ezs-support-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   EZC — Verpex-style order/checkout redesign (themes/ezzat override only)
   Namespace: ezc- . Uses var(--ezzat-*) tokens. Logical properties for RTL.
   ========================================================================== */

/* ---------- page head (mod_order_index / mod_order_product) ---------- */
.ezc-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    background: var(--ezzat-card);
    border: 1px solid var(--ezzat-line);
    border-radius: var(--ezzat-radius);
    box-shadow: var(--ezzat-shadow-sm);
    padding: 22px 24px;
    margin-block-end: 22px;
}
.ezc-pagehead-text { flex: 1 1 220px; min-inline-size: 0; }
.ezc-pagehead-title { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--ezzat-ink); }
.ezc-pagehead-sub { margin: 4px 0 0; color: var(--ezzat-muted); font-size: 14px; }
.ezc-pagehead-currency { margin-inline-start: auto; }
.ezc-pagehead-currency label { margin: 0; }

/* ---------- step indicator ---------- */
.ezc-steps {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 18px 22px;
    background: var(--ezzat-card);
    border: 1px solid var(--ezzat-line);
    border-radius: var(--ezzat-radius);
    box-shadow: var(--ezzat-shadow-sm);
    overflow-x: auto;
}
.ezc-steps-compact { border: 0; box-shadow: none; background: transparent; padding: 0; }
.ezc-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-inline-size: max-content;
    color: var(--ezzat-muted);
    font-size: 14px;
    font-weight: 600;
    padding-block: 4px;
}
.ezc-step + .ezc-step { border-inline-start: 1px dashed var(--ezzat-line); padding-inline-start: 18px; margin-inline-start: 12px; }
.ezc-step-num {
    inline-size: 30px;
    block-size: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--ezzat-line);
    background: var(--ezzat-bg);
    color: var(--ezzat-muted);
    font-size: 13px;
    font-weight: 800;
}
.ezc-step.is-active { color: var(--ezzat-ink); }
.ezc-step.is-active .ezc-step-num {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary));
    color: #fff;
    box-shadow: var(--ezzat-shadow-sm);
}
.ezc-step.is-done { color: var(--ezzat-ink); }
.ezc-step.is-done .ezc-step-num {
    border-color: transparent;
    background: var(--ezzat-primary);
    color: #fff;
}
.ezc-step-label { white-space: nowrap; }

/* ---------- checkout shell ---------- */
.ezc-checkout { display: flex; flex-direction: column; gap: 18px; }
.ezc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}
.ezc-main { min-inline-size: 0; display: flex; flex-direction: column; gap: 18px; }
.ezc-flow { display: flex; flex-direction: column; gap: 18px; }

/* ---------- cards ---------- */
.ezc-card {
    background: var(--ezzat-card);
    border: 1px solid var(--ezzat-line);
    border-radius: var(--ezzat-radius);
    box-shadow: var(--ezzat-shadow-sm);
    overflow: hidden;
}
.ezc-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-block-end: 1px solid var(--ezzat-line);
    background: var(--ezzat-bg);
}
.ezc-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 800;
    font-size: 17px;
    color: var(--ezzat-ink);
    cursor: pointer;
}
.ezc-card-toggle:hover { color: var(--ezzat-primary); }
.ezc-toggle-caret { font-size: 12px; color: var(--ezzat-muted); transition: transform .18s; }
.ezc-card-toggle[aria-expanded="true"] .ezc-toggle-caret { transform: rotate(180deg); }
.ezc-card-icon-sm {
    inline-size: 34px;
    block-size: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary));
    color: #fff;
    font-size: 17px;
    flex: 0 0 auto;
}
.ezc-card-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--ezzat-ink); }
.ezc-card-titlewrap { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ezc-card-body { padding: 20px; }
.ezc-count-badge { font-size: 12px; }

/* ---------- choose product ---------- */
.ezc-choose-head { justify-content: space-between; }
.ezc-searchwrap { flex: 1 1 220px; max-inline-size: 320px; margin-inline-start: auto; }
.ezc-search { border-radius: 10px; }
.ezc-cat + .ezc-cat { margin-block-start: 20px; }
.ezc-cat-title { margin: 0 0 2px; font-size: 16px; font-weight: 800; color: var(--ezzat-ink); }
.ezc-cat-desc { color: var(--ezzat-muted); font-size: 13px; margin-block-end: 10px; }
.ezc-cat-desc p { margin: 0 0 6px; }
.ezc-plan-list { display: flex; flex-direction: column; gap: 10px; }
.ezc-plan-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ezzat-line);
    border-radius: 12px;
    background: var(--ezzat-card);
    color: var(--ezzat-ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ezc-plan-row:hover {
    text-decoration: none;
    border-color: var(--ezzat-primary);
    box-shadow: var(--ezzat-shadow-sm);
    transform: translateY(-1px);
}
.ezc-plan-main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ezc-plan-name { font-weight: 700; font-size: 15px; }
.ezc-plan-from { color: var(--ezzat-muted); font-size: 13px; }
.ezc-plan-arrow {
    margin-inline-start: auto;
    inline-size: 32px;
    block-size: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ezzat-bg);
    border: 1px solid var(--ezzat-line);
    color: var(--ezzat-primary);
    font-weight: 800;
}
[dir="rtl"] .ezc-plan-arrow { transform: scaleX(-1); }
.ezc-plan-row:hover .ezc-plan-arrow { background: var(--ezzat-primary); border-color: var(--ezzat-primary); color: #fff; }
.ezc-no-results { color: var(--ezzat-muted); text-align: center; margin: 14px 0 0; }

/* ---------- configuration hero + billing ---------- */
.ezc-hero { padding: 22px 20px 0; }
.ezc-step-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ezzat-primary);
    background: var(--ezzat-bg);
    border: 1px solid var(--ezzat-line);
    border-radius: 20px;
    padding: 3px 12px;
    margin-block-end: 8px;
}
.ezc-hero-title { margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; color: var(--ezzat-ink); }
.ezc-hero-desc { color: var(--ezzat-muted); font-size: 14px; }
.ezc-hero-desc p { margin: 0 0 8px; }
.ezc-hero-price { display: flex; align-items: baseline; gap: 10px; margin-block: 10px 4px; flex-wrap: wrap; }
.ezc-from-label { color: var(--ezzat-muted); font-size: 13px; }
.ezc-price-strong { font-size: 28px; font-weight: 800; color: var(--ezzat-primary); }
.ezc-billing-card {
    border: 1px solid var(--ezzat-line);
    border-radius: 12px;
    background: var(--ezzat-bg);
    padding: 16px 18px;
    margin-block-end: 16px;
}
.ezc-billing-title { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ezzat-ink); }
.ezc-field-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; }
.ezc-field-label { font-weight: 600; color: var(--ezzat-ink); font-size: 14px; }
.ezc-field-control { min-inline-size: 0; }
.ezc-period { max-inline-size: 100%; }
.ezc-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ezc-next { padding-inline: 34px; font-weight: 800; }

/* ---------- account tabs ---------- */
.ezc-auth-tabs { margin-inline-start: auto; }
.ezc-auth-tabs .nav-link { border-radius: 20px; font-weight: 700; font-size: 13px; color: var(--ezzat-muted); }
.ezc-auth-tabs .nav-link.active { background: linear-gradient(135deg, var(--ezzat-primary), var(--ezzat-secondary)); color: #fff; }

/* ---------- cart ---------- */
.ezc-table-wrap { overflow-x: auto; border: 1px solid var(--ezzat-line); border-radius: 12px; margin-block-end: 16px; }
.ezc-table-wrap .ezc-cart-table { margin: 0; }
.ezc-cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ezc-promo-link { font-weight: 600; font-size: 14px; }
.ezc-promo-form { margin-block-start: 8px; }
.ezc-promo-row { display: flex; gap: 8px; }
.ezc-promo-input { flex: 1 1 auto; }
.ezc-totals { margin-block-end: 0; }
.ezc-grand-total td { background: var(--ezzat-bg); font-size: 16px; }
.ezc-pay-form { margin-block-start: 14px; }
.ezc-gateways { display: flex; flex-wrap: wrap; gap: 10px; }
.ezc-gateway { border: 1px solid var(--ezzat-line); transition: border-color .15s, box-shadow .15s; }
.ezc-gateway:has(input:checked) { border-color: var(--ezzat-primary); box-shadow: var(--ezzat-shadow-sm); background: var(--ezzat-bg); }
.ezc-gateway label.btn { cursor: pointer; margin: 0; min-inline-size: 90px; min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; }
.ezc-pay-btn { inline-size: 100%; font-weight: 800; padding-block: 12px; }
.ezc-empty-cart { color: var(--ezzat-muted); margin: 0; }

/* ---------- payment pane ---------- */
.ezc-pay .ezc-card-body :is(iframe, table) { max-inline-size: 100%; }

/* ---------- sticky summary aside ---------- */
.ezc-aside { position: sticky; top: 16px; }
.ezc-summary {
    background: var(--ezzat-card);
    border: 1px solid var(--ezzat-line);
    border-radius: var(--ezzat-radius);
    box-shadow: var(--ezzat-shadow-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ezc-summary-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--ezzat-ink); padding-block-end: 10px; border-block-end: 1px solid var(--ezzat-line); }
.ezc-summary-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ezc-summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ezc-summary-name { color: var(--ezzat-ink); min-inline-size: 0; }
.ezc-summary-period { display: block; color: var(--ezzat-muted); }
.ezc-summary-price { white-space: nowrap; font-weight: 700; }
.ezc-summary-totals { margin: 0; padding: 12px; background: var(--ezzat-bg); border: 1px solid var(--ezzat-line); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.ezc-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ezc-summary-row dt { font-weight: 600; color: var(--ezzat-muted); }
.ezc-summary-row dd { margin: 0; font-weight: 700; color: var(--ezzat-ink); }
.ezc-summary-row.is-total dt, .ezc-summary-row.is-total dd { font-size: 17px; font-weight: 800; color: var(--ezzat-ink); }
.ezc-summary-empty { color: var(--ezzat-muted); font-size: 14px; margin: 0; }
.ezc-trust { list-style: none; margin: 0; padding: 12px 0 0; border-block-start: 1px solid var(--ezzat-line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ezzat-muted); }
.ezc-support-link { font-size: 14px; font-weight: 600; text-align: center; }

/* ---------- dark-mode tuning (vars do the heavy lifting) ---------- */
[data-bs-theme="dark"] .ezc-plan-row:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
[data-bs-theme="dark"] .ezc-gateway:has(input:checked) { background: var(--ezzat-bg); }

/* ---------- responsive: aside stacks below main ---------- */
@media (max-width: 992px) {
    .ezc-grid { grid-template-columns: minmax(0, 1fr); }
    .ezc-aside { position: static; }
    .ezc-cart-grid { grid-template-columns: minmax(0, 1fr); }
    .ezc-field-row { grid-template-columns: minmax(0, 1fr); }
    .ezc-pagehead-currency { margin-inline-start: 0; inline-size: 100%; }
}
@media (max-width: 640px) {
    .ezc-card-body { padding: 16px; }
    .ezc-steps { gap: 2px; padding: 12px 14px; }
    .ezc-step + .ezc-step { padding-inline-start: 10px; margin-inline-start: 6px; }
    .ezc-step-label { font-size: 12px; }
    .ezc-step-num { inline-size: 26px; block-size: 26px; font-size: 12px; }
    .ezc-searchwrap { max-inline-size: 100%; flex-basis: 100%; }
    .ezc-auth-tabs { margin-inline-start: 0; }
    .ezc-price-strong { font-size: 24px; }
    .ezc-plan-row { padding: 12px; }
}