/*
 * Afternet client area (templates/afternet-v2, child of Twenty-One).
 * Layout: sticky sidebar (rounded grey card) left; right a header that
 * sticks to the top with a background once scrolled; content in white
 * rounded cards. Colours as variables — the brand red by default.
 * Dark mode: html[data-theme="dark"] (the moon in the header).
 */

:root {
    --af21-primary: #B71C2B;          /* brand red (the logo / our PDFs) */
    --af21-primary-hover: #9a1623;
    --af21-primary-soft: #fbeaec;
    --af21-page: #f7f7f9;
    --af21-sidebar: #f1f1f4;
    --af21-card: #ffffff;
    --af21-border: #e8e9ee;
    --af21-text: #1f2430;
    --af21-muted: #7c8293;
    --af21-radius: 18px;
    --af21-sidebar-width: 280px;
}

html[data-theme="dark"] {
    --af21-page: #18191d;
    --af21-sidebar: #202227;
    --af21-card: #24262b;
    --af21-border: #33363d;
    --af21-text: #e6e8ec;
    --af21-muted: #9aa0ad;
    --af21-primary-soft: #3a1d22;
}

body.af21 {
    background: var(--af21-page) !important;
    color: var(--af21-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
body.af21 h1, body.af21 h2, body.af21 h3, body.af21 h4, body.af21 h5 { font-family: inherit; color: var(--af21-text); }

/* ─── Shell ──────────────────────────────────────────────────────────── */
.af21-shell { display: flex; min-height: 100vh; padding: 24px; gap: 32px; }

.af21-sidebar {
    position: sticky;
    top: 24px;
    flex: 0 0 var(--af21-sidebar-width);
    width: var(--af21-sidebar-width);
    height: calc(100vh - 48px);
    z-index: 1030;
}
.af21-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 18px 18px;
    border-radius: 26px;
    background: var(--af21-sidebar);
}
.af21-logo { display: block; padding: 0 12px 26px; font-size: 26px; font-weight: 700; color: var(--af21-text) !important; text-decoration: none !important; }
.af21-logo img { max-width: 170px; max-height: 48px; }

/* Menu */
.af21-nav-wrap { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.af21-nav, .af21-subnav { list-style: none; margin: 0; padding: 0; }
.af21-nav-secondary { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--af21-border); }
.af21-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--af21-text) !important;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}
.af21-nav-link:hover, .af21-nav-link.is-active { background: rgba(0, 0, 0, .045); }
html[data-theme="dark"] .af21-nav-link:hover, html[data-theme="dark"] .af21-nav-link.is-active { background: rgba(255, 255, 255, .06); }
.af21-nav-icon { width: 20px; text-align: center; color: var(--af21-muted); }
.af21-nav-link.is-active .af21-nav-icon, .af21-nav-item.is-current > .af21-nav-link .af21-nav-icon { color: var(--af21-primary); }
.af21-nav-label { flex: 1; }
.af21-nav-caret { font-size: 11px; color: var(--af21-muted); transition: transform .2s; }
.af21-nav-item.is-open > .af21-nav-link .af21-nav-caret { transform: rotate(180deg); }
.af21-subnav { display: none; padding: 2px 0 8px 44px; }
.af21-nav-item.is-open > .af21-subnav { display: block; }
.af21-subnav-link {
    position: relative;
    display: block;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--af21-muted) !important;
    font-size: 14px;
    text-decoration: none !important;
}
.af21-subnav-link::before { content: ''; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; transform: translateY(-50%); }
.af21-subnav-link:hover { color: var(--af21-text) !important; }
.af21-subnav-link.is-active { color: var(--af21-text) !important; font-weight: 600; }
.af21-subnav-link.is-active::before { background: var(--af21-primary); opacity: 1; }
.af21-badge { margin-left: auto; padding: 1px 7px; border-radius: 10px; background: var(--af21-primary-soft); color: var(--af21-primary); font-size: 11px; font-weight: 600; }

/* The user, at the bottom */
.af21-user { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 8px 4px; border-top: 1px solid var(--af21-border); }
.af21-user-avatar {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 42px; width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--af21-primary-soft); color: var(--af21-primary) !important;
    font-weight: 700; text-decoration: none !important;
}
.af21-user-text { flex: 1; min-width: 0; line-height: 1.25; }
.af21-user-text strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af21-user-text span { display: block; color: var(--af21-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Main column + sticky header ────────────────────────────────────── */
.af21-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.af21-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -24px -24px 24px 0;
    padding: 24px 24px 16px 0;
    transition: background .2s, box-shadow .2s;
}
.af21-header.is-scrolled {
    background: var(--af21-card);
    box-shadow: 0 6px 24px rgba(17, 24, 39, .06);
    margin-left: -32px;
    padding-left: 32px;
    border-radius: 0 0 18px 18px;
}
.af21-header-title { flex: 1; min-width: 0; }
.af21-header-title h1 { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.af21-header .breadcrumb { margin: 0; padding: 0; background: none; font-size: 14px; }
.af21-header .breadcrumb-item a { color: var(--af21-muted); }
.af21-header .breadcrumb-item.active { color: var(--af21-text); }
.af21-header .breadcrumb-item + .breadcrumb-item::before { content: '•'; color: var(--af21-muted); }
.af21-header-tools { display: flex; align-items: center; gap: 10px; }
.af21-search {
    display: flex; align-items: center; gap: 10px;
    width: 280px; height: 44px; padding: 0 14px;
    border: 1px solid var(--af21-border); border-radius: 12px;
    background: var(--af21-card); color: var(--af21-muted);
}
.af21-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--af21-text); font-size: 14px; }
.af21-icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0 !important;
    border: 1px solid var(--af21-border) !important; border-radius: 12px !important;
    background: var(--af21-card) !important; color: var(--af21-muted) !important;
    font-size: 17px;
}
.af21-icon-btn:hover { color: var(--af21-text) !important; }
/* The count on an icon button (notifications): inside its top-right corner —
   outside it the header / button clipped it. */
.af21-icon-btn { overflow: visible !important; }
.af21-dot {
    position: absolute; top: 3px; right: 3px;
    min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
    border-radius: 9px; background: var(--af21-primary); color: #fff;
    border: 2px solid var(--af21-card);
    font-size: 10px; font-weight: 700; line-height: 13px; text-align: center;
    pointer-events: none;
}
.af21-icon-btn .fa-sun { display: none; }
html[data-theme="dark"] .af21-icon-btn .fa-sun { display: inline-block; }
html[data-theme="dark"] .af21-icon-btn .fa-moon { display: none; }
.af21-menu-btn { display: none !important; }

/* ─── Content: cards ─────────────────────────────────────────────────── */
.af21-body { flex: 1; }
.af21 .card, .af21 .sidebar .card {
    border: 1px solid var(--af21-border);
    border-radius: var(--af21-radius);
    background: var(--af21-card);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .03);
}
.af21 .card-header { background: transparent; border-bottom-color: var(--af21-border); border-radius: var(--af21-radius) var(--af21-radius) 0 0 !important; }
.af21 .list-group-item { background: transparent; border-color: var(--af21-border); color: var(--af21-text); }
.af21 .table { color: var(--af21-text); }
.af21 .table td, .af21 .table th { border-color: var(--af21-border); }
.af21 a { color: var(--af21-primary); }
.af21 .btn-primary { background: var(--af21-primary); border-color: var(--af21-primary); border-radius: 10px; }
.af21 .btn-primary:hover, .af21 .btn-primary:focus { background: var(--af21-primary-hover); border-color: var(--af21-primary-hover); }
.af21 .btn-default { border-radius: 10px; }
.af21 .form-control, .af21 .custom-select { border-color: var(--af21-border); border-radius: 10px; background-color: var(--af21-card); color: var(--af21-text); }
.af21 .sidebar .list-group-item.active { background: var(--af21-primary-soft); color: var(--af21-primary); border-color: var(--af21-border); }

.af21-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 28px 4px 4px; color: var(--af21-muted); font-size: 13px; }
.af21-footer-links a { margin-left: 16px; color: var(--af21-muted); }

/* ─── Mobile: the sidebar slides in ──────────────────────────────────── */
.af21-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .af21-shell { padding: 12px; gap: 0; }
    .af21-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; padding: 12px;
        transform: translateX(-110%); transition: transform .25s;
    }
    body.af21-menu-open .af21-sidebar { transform: none; }
    body.af21-menu-open .af21-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 1025; background: rgba(15, 17, 21, .4); }
    .af21-menu-btn { display: inline-flex !important; }
    .af21-header { margin: -12px -12px 16px; padding: 12px; }
    .af21-header.is-scrolled { margin-left: -12px; padding-left: 12px; }
    .af21-header-title h1 { font-size: 20px; }
    .af21-header .breadcrumb { display: none; }
}

/* ─── Font: Inter everywhere, as the admin theme (Twenty-One sets Open
   Sans / system fonts per element, so this overrides them all; Font
   Awesome icons keep theirs). ─────────────────────────────────────── */
body.af21, body.af21 h1, body.af21 h2, body.af21 h3, body.af21 h4, body.af21 h5, body.af21 h6,
body.af21 p, body.af21 a, body.af21 span, body.af21 div, body.af21 li, body.af21 td, body.af21 th,
body.af21 label, body.af21 input, body.af21 select, body.af21 textarea, body.af21 button, body.af21 .btn,
body.af21 .card-title, body.af21 .dropdown-item, body.af21 .popover, body.af21 .modal, body.af21 .tooltip {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
body.af21 .fa, body.af21 .fas, body.af21 .far, body.af21 .fal, body.af21 .fad, body.af21 .fab,
body.af21 [class^="fa-"], body.af21 [class*=" fa-"] { font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; }
body.af21 .fab { font-family: "Font Awesome 5 Brands" !important; }

/* ─── Twenty-One's pieces in the new look ────────────────────────────── */
/* Home tiles (Services / Domains / Quotes / Tickets …): white rounded cards. */
.af21 .tiles { margin: 0 0 24px; padding: 0; background: none; box-shadow: none; }
.af21 .tiles .row { margin: 0 -8px; }
.af21 .tiles .row > [class*="col"] { padding: 8px; }
.af21 .tile {
    display: block;
    height: 100%;
    padding: 22px 22px 20px;
    border: 1px solid var(--af21-border) !important;
    border-radius: var(--af21-radius);
    background: var(--af21-card);
    color: var(--af21-text) !important;
    text-decoration: none !important;
    transition: transform .15s, box-shadow .15s;
}
.af21 .tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(17, 24, 39, .07); background: var(--af21-card); }
.af21 .tile i { color: var(--af21-primary) !important; opacity: 1 !important; font-size: 26px; }
.af21 .tile .stat { color: var(--af21-text) !important; font-size: 34px; font-weight: 700; }
.af21 .tile .title { color: var(--af21-muted) !important; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.af21 .tile .highlight { display: none; }

/* Cards (the panels everywhere) */
.af21 .card { margin-bottom: 24px; overflow: hidden; }
.af21 .card-header { padding: 18px 22px; font-weight: 600; }
.af21 .card-header .card-title, .af21 .card-title { font-size: 16px; font-weight: 600; margin: 0; }
.af21 .card-body { padding: 22px; }
.af21 .card-footer { background: transparent; border-top-color: var(--af21-border); }
.af21 .card .list-group-item { padding: 12px 22px; }
.af21 .card .list-group-item-action:hover { background: rgba(0, 0, 0, .025); }

/* WHMCS's left sidebars (inside pages, e.g. Your Info / Shortcuts) */
.af21 .sidebar .card { box-shadow: none; }
.af21 .sidebar .card-header { padding: 14px 18px; }
.af21 .sidebar .list-group-item { padding: 10px 18px; font-size: 14px; }
.af21 .sidebar .list-group-item i { color: var(--af21-muted); }

/* Tables */
.af21 .table thead th, .af21 .table thead td { border-top: 0; color: var(--af21-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.af21 .table td, .af21 .table th { padding: 14px 12px; vertical-align: middle; }
.af21 .table-striped tbody tr:nth-of-type(odd) { background: rgba(0, 0, 0, .015); }
.af21 .table-list { border-radius: var(--af21-radius); overflow: hidden; }
.af21 .dataTables_wrapper .dataTables_info { color: var(--af21-muted); }

/* Status labels */
.af21 .label, .af21 .badge { border-radius: 8px; padding: 4px 9px; font-weight: 600; }

/* Buttons and fields */
.af21 .btn { border-radius: 10px; font-weight: 500; padding: 8px 16px; }
.af21 .btn-sm { padding: 5px 12px; border-radius: 8px; }
.af21 .btn-default, .af21 .btn-light { border-color: var(--af21-border); background: var(--af21-card); color: var(--af21-text); }
.af21 .btn-success { border-radius: 10px; }
.af21 .form-control, .af21 .custom-select { height: auto; min-height: 44px; padding: 10px 14px; }
.af21 textarea.form-control { min-height: 110px; }
.af21 .form-control:focus { border-color: var(--af21-primary); box-shadow: 0 0 0 3px var(--af21-primary-soft); }
.af21 .input-group-text { border-color: var(--af21-border); background: var(--af21-page); border-radius: 10px; }

/* Alerts */
.af21 .alert { border: 0; border-radius: 14px; }

/* Login / register (not logged in): the form as a centred card. */
.af21 .login-form, .af21 .card.mw-540 { margin-left: auto; margin-right: auto; }

/* Popovers / dropdowns */
.af21 .dropdown-menu { border: 1px solid var(--af21-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(17, 24, 39, .1); padding: 6px; background: var(--af21-card); }
.af21 .dropdown-item { border-radius: 8px; padding: 8px 12px; color: var(--af21-text); }
.af21 .dropdown-item:hover { background: rgba(0, 0, 0, .04); }
.af21 .popover { border-color: var(--af21-border); border-radius: 12px; }

/* Dark mode: Twenty-One's own light backgrounds */
html[data-theme="dark"] .af21 .card, html[data-theme="dark"] .af21 .tile,
html[data-theme="dark"] .af21 .modal-content, html[data-theme="dark"] .af21 .list-group-item { background: var(--af21-card); color: var(--af21-text); }
html[data-theme="dark"] .af21 .table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .02); }
html[data-theme="dark"] .af21 .btn-default, html[data-theme="dark"] .af21 .btn-light { background: var(--af21-card); color: var(--af21-text); border-color: var(--af21-border); }

/* Buttons keep their own text colour (the red link colour was reaching them). */
.af21 a.btn, .af21 .btn { text-decoration: none !important; }
.af21 a.btn-success, .af21 a.btn-primary, .af21 a.btn-danger, .af21 a.btn-info, .af21 a.btn-warning,
.af21 .btn-success, .af21 .btn-primary, .af21 .btn-danger, .af21 .btn-info { color: #fff !important; }
.af21 a.btn-default, .af21 a.btn-light, .af21 a.btn-outline-secondary { color: var(--af21-text) !important; }
.af21 .btn-success { background: #16a34a; border-color: #16a34a; }

/* Menu icons (includes/navbar-vertical.tpl): the brand red on the current one. */
.af21-nav-icon { font-size: 16px; }
.af21-nav-dot { font-size: 6px; vertical-align: middle; }

/* The sidebar fits the window; the user block always shows at the bottom. */
.af21-sidebar { height: calc(100vh - 48px); }
.af21-sidebar-inner { min-height: 0; overflow: hidden; }
.af21-nav-wrap { min-height: 0; }
.af21-user { flex-shrink: 0; padding-bottom: 6px; }

/* Content starts in line with the header's title. */
.af21-body { padding-top: 4px; }

/* ─── Lighter, more modern type (as the reference design): smaller sizes,
   regular / medium weights instead of bold; duotone icons, muted with the
   brand colour on their second tone. ──────────────────────────────── */
body.af21 { font-size: 14px; font-weight: 400; color: var(--af21-text); -webkit-font-smoothing: antialiased; }
body.af21 strong, body.af21 b { font-weight: 600; }
body.af21 h1, body.af21 h2, body.af21 h3 { font-weight: 600; letter-spacing: -.01em; }
body.af21 h4, body.af21 h5, body.af21 h6, body.af21 .card-title { font-weight: 600; }
.af21-header-title h1 { font-size: 24px; font-weight: 600; }
.af21-header .breadcrumb { font-size: 13px; font-weight: 400; }
.af21-nav-link { font-size: 14px; font-weight: 400; color: #3f4554 !important; padding: 10px 12px; }
.af21-nav-link.is-active, .af21-nav-item.is-current > .af21-nav-link { font-weight: 500; color: var(--af21-text) !important; }
.af21-subnav-link { font-size: 13.5px; }
.af21-user-text strong { font-weight: 600; font-size: 13.5px; }
.af21 .tile .stat { font-size: 30px; font-weight: 600; }
.af21 .tile .title { font-size: 12px; font-weight: 500; letter-spacing: .03em; }
.af21 .card-header .card-title, .af21 .card-title { font-size: 15px; }
.af21 .table thead th, .af21 .table thead td { font-weight: 500; font-size: 11.5px; }
.af21 .btn { font-weight: 500; font-size: 14px; }
html[data-theme="dark"] .af21-nav-link { color: #c7cbd3 !important; }

/* Duotone icons (Font Awesome Pro "fad", shipped with WHMCS): grey with a
   brand-red second tone; the current menu item fully in colour. */
.af21 .fad { --fa-primary-color: #8a90a0; --fa-secondary-color: var(--af21-primary); --fa-secondary-opacity: .35; }
.af21-nav-icon { font-size: 17px; }
.af21-nav-link.is-active .fad, .af21-nav-item.is-current > .af21-nav-link .fad { --fa-primary-color: var(--af21-primary); --fa-secondary-opacity: .45; }
.af21 .tile .fad { --fa-primary-color: var(--af21-primary); --fa-secondary-opacity: .3; }
/* Duotone icons use their own font family (the Inter override above set Pro's). */
body.af21 .fad, body.af21 .fad::before, body.af21 .fad::after { font-family: "Font Awesome 5 Duotone" !important; }

/* ═══ The right-hand content (as the reference designs) ═══════════════ */

/* The page's content sits on one white rounded surface. */
.af21-body {
    padding: 30px 32px;
    border-radius: 24px;
    background: var(--af21-card);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .03);
}
.af21-body > .row { margin-left: -12px; margin-right: -12px; }
.af21-body > .row > [class*="col"] { padding-left: 12px; padding-right: 12px; }
/* Cards inside it: quieter — a hairline, no shadow. */
.af21-body .card { box-shadow: none; border-color: var(--af21-border); }
.af21-body .card-header { background: transparent; }

/* The tab bar (includes/sidebar-tabs.tpl): links left, filters with counts right. */
.af21-tabs {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
    margin: -30px -32px 26px; padding: 0 32px;
    border-bottom: 1px solid var(--af21-border);
}
.af21-tabs-left, .af21-tabs-right { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.af21-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 20px 2px 18px;
    color: #4b5263 !important; font-size: 14.5px; font-weight: 400;
    text-decoration: none !important; white-space: nowrap;
}
.af21-tab:hover { color: var(--af21-text) !important; }
.af21-tab.is-active { color: var(--af21-primary) !important; font-weight: 500; }
.af21-tab.is-active::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--af21-primary); }
.af21-tab-count { min-width: 22px; padding: 1px 7px; border-radius: 7px; background: var(--af21-page); color: var(--af21-muted); font-size: 11.5px; font-weight: 500; text-align: center; }
.af21-tab.is-active .af21-tab-count { background: var(--af21-primary-soft); color: var(--af21-primary); }

/* Lists (WHMCS's table-list pages: tickets, invoices, quotes, services …). */
.af21 .table-container, .af21 .dataTables_wrapper { margin: 0; }
.af21 .dataTables_wrapper .dataTables_info { font-size: 15px; font-weight: 600; color: var(--af21-text); padding-top: 0; }
.af21 .dataTables_wrapper .dataTables_filter input {
    height: 42px; min-width: 240px; padding: 0 14px 0 38px;
    border: 1px solid var(--af21-border); border-radius: 12px;
    background: var(--af21-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa0ad' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
}
.af21 .dataTables_wrapper .dataTables_filter label { font-size: 0; }
.af21 .dataTables_wrapper .dataTables_length label { color: var(--af21-muted); font-size: 13px; }
.af21 table.table-list, .af21 .table-list { border: 0; }
.af21 table.table-list thead th, .af21 table.dataTable thead th {
    padding: 14px 16px; border-bottom: 1px solid var(--af21-border) !important; border-top: 0;
    background: transparent; color: var(--af21-muted); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0;
}
.af21 table.table-list tbody td, .af21 table.dataTable tbody td {
    padding: 18px 16px; border-top: 0; border-bottom: 1px solid var(--af21-border);
    background: transparent; font-size: 14.5px; vertical-align: middle;
}
.af21 table.table-list tbody tr:hover td, .af21 table.dataTable tbody tr:hover td { background: rgba(0, 0, 0, .015); cursor: pointer; }
.af21 table.table-list tbody tr td a, .af21 table.table-list .text-primary { color: var(--af21-primary) !important; }
.af21 table.dataTable thead .sorting::before, .af21 table.dataTable thead .sorting::after { opacity: .25; }

/* Status labels as pills (WHMCS's .label.status-*): soft for open / active,
   filled for what needs the client, grey for closed / cancelled. */
.af21 .label.status, .af21 span.status {
    display: inline-block; padding: 5px 11px; border-radius: 7px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2;
}
.af21 .status-open, .af21 .status-active, .af21 .status-paid, .af21 .status-accepted, .af21 .status-completed { background: #e8f8ef !important; color: #15803d !important; }
.af21 .status-answered, .af21 .status-pending, .af21 .status-delivered, .af21 .status-onhold, .af21 .status-in-progress { background: #eef2ff !important; color: #4338ca !important; }
.af21 .status-customer-reply, .af21 .status-unpaid, .af21 .status-overdue, .af21 .status-suspended { background: #f97316 !important; color: #fff !important; }
.af21 .status-closed, .af21 .status-cancelled, .af21 .status-terminated, .af21 .status-expired, .af21 .status-lost, .af21 .status-dead, .af21 .status-refunded, .af21 .status-fraud { background: #8a8f9c !important; color: #fff !important; }

/* Pagination under the lists */
.af21 .dataTables_paginate .pagination { gap: 4px; }
.af21 .dataTables_paginate .page-item .page-link {
    min-width: 36px; margin: 0; padding: 7px 11px;
    border: 1px solid var(--af21-border); border-radius: 10px !important;
    background: var(--af21-card); color: var(--af21-text); text-align: center;
}
.af21 .dataTables_paginate .page-item.active .page-link { background: var(--af21-primary); border-color: var(--af21-primary); color: #fff; }
.af21 .dataTables_paginate .page-item.disabled .page-link { color: #c0c4cc; }

/* Headings inside the content */
.af21-body h2, .af21-body h3.h3 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }

/* Mobile */
@media (max-width: 991.98px) {
    .af21-body { padding: 18px 16px; border-radius: 18px; }
    .af21-tabs { margin: -18px -16px 18px; padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; }
    .af21-tabs-left, .af21-tabs-right { flex-wrap: nowrap; }
}

/* ─── Padding + depth fix: Twenty-One sets #main-body's padding by id, so
   the surface's own padding needs the same weight; the tab bar's line then
   spans exactly the surface. Stronger, soft shadows on the surfaces. ─── */
#main-body.af21-body {
    padding: 8px 36px 34px !important;
    margin: 0 !important;
    border-radius: 24px;
    background: var(--af21-card);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 12px 36px rgba(17, 24, 39, .07);
}
#main-body.af21-body:not(.has-tabs) { padding-top: 34px !important; }
#main-body.af21-body .af21-tabs { margin: 0 -36px 28px; padding: 0 36px; }
#main-body.af21-body .af21-tabs-left .af21-tab { padding-top: 22px; }
.af21-body > .row { margin-left: 0; margin-right: 0; }
.af21-body > .row > .primary-content:only-child { padding-left: 0; padding-right: 0; }

/* Cards, tiles, sidebar panels: lifted off the page. */
.af21 .tile, .af21 .sidebar .card {
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 10px 28px rgba(17, 24, 39, .06);
    border-color: transparent !important;
}
.af21 .tile:hover { box-shadow: 0 2px 6px rgba(17, 24, 39, .05), 0 16px 40px rgba(17, 24, 39, .10); }
.af21-body .card { border-color: var(--af21-border); box-shadow: 0 1px 2px rgba(17, 24, 39, .03); }

/* Header buttons / search and the sidebar: the same soft lift. */
.af21-icon-btn, .af21-search { border-color: transparent !important; box-shadow: 0 1px 3px rgba(17, 24, 39, .05), 0 6px 18px rgba(17, 24, 39, .05); }
.af21-sidebar-inner { box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .03); }

/* Lists: the first column breathes from the edge; headers aligned as the cells. */
.af21 table.table-list thead th:first-child, .af21 table.table-list tbody td:first-child,
.af21 table.dataTable thead th:first-child, .af21 table.dataTable tbody td:first-child { padding-left: 4px; }
.af21 table.table-list thead th, .af21 table.dataTable thead th { text-align: left; }
.af21 .dataTables_wrapper .dataTables_info { margin-bottom: 8px; }

html[data-theme="dark"] #main-body.af21-body { box-shadow: 0 12px 36px rgba(0, 0, 0, .35); }

/* "Νέο αίτημα" in the tickets list's tab bar: the one button that stands out. */
.af21-tabs-right .af21-tabs-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 10px 0; padding: 10px 20px;
    border-radius: 12px; font-weight: 600;
    box-shadow: 0 6px 18px rgba(183, 28, 43, .25);
}
.af21-tabs-right .af21-tabs-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(183, 28, 43, .32); }

/* ─── Ticket page (viewticket.tpl) ────────────────────────────────────── */
/* The head card: subject + actions */
.af21 .view-ticket .card-body.p-3 { padding: 22px 26px !important; }
.af21 .view-ticket .card-title { font-size: 18px; font-weight: 600; }
.af21 .view-ticket .ticket-actions .btn { padding: 8px 14px; }
/* Each reply: its own card, as the reference — letter avatar, name, badge, date. */
.af21 .view-ticket > .card-body:not(.p-3) { padding: 0 26px 20px; border: 0; }
.af21 .ticket-reply {
    margin: 0; padding: 22px 24px;
    border: 1px solid var(--af21-border); border-radius: 16px;
    background: var(--af21-card);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .03);
}
.af21 .ticket-reply.staff { border-left: 3px solid var(--af21-primary); }
.af21 .af21-reply-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.af21 .af21-reply-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px;
    background: #eef2ff; color: #4f46e5; font-size: 20px; font-weight: 600;
}
.af21 .ticket-reply.staff .af21-reply-avatar { background: var(--af21-primary-soft); color: var(--af21-primary); }
.af21 .af21-reply-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; line-height: 1.3; }
.af21 .af21-reply-who strong { font-size: 15.5px; font-weight: 600; color: var(--af21-text); }
.af21 .af21-reply-badge { padding: 2px 8px; border-radius: 6px; background: #eef2ff; color: #4f46e5; font-size: 11.5px; font-weight: 600; }
.af21 .ticket-reply.staff .af21-reply-badge { background: var(--af21-primary-soft); color: var(--af21-primary); }
.af21 .af21-reply-when { flex-basis: 100%; color: var(--af21-muted); font-size: 13px; }
.af21 .ticket-reply .message { padding: 0 !important; background: none; font-size: 14.5px; line-height: 1.7; color: #374151; }
.af21 .ticket-reply .posted-by { display: none; }
.af21 .ticket-reply .attachments { margin-top: 14px; padding: 12px 0 0 !important; border-top: 1px solid var(--af21-border); background: none; }
html[data-theme="dark"] .af21 .ticket-reply .message { color: var(--af21-text); }

/* The reply form card */
.af21 #ticketReplyContainer .card-body { padding: 24px 26px; }
.af21 #ticketReplyContainer .card-title { font-size: 17px; font-weight: 600; margin-bottom: 18px; }
.af21 .custom-file-label { border-color: var(--af21-border); border-radius: 10px; height: 44px; padding: 10px 14px; }
.af21 .custom-file-label::after { height: 42px; padding: 10px 14px; border-radius: 0 10px 10px 0; }

/* Page sidebars (ticket info, CC, custom fields): tidy cards, buttons that fit. */
.af21 .sidebar .card { margin-bottom: 16px; border-radius: 16px; }
.af21 .sidebar .card-header { padding: 14px 18px; }
.af21 .sidebar .card-title { font-size: 14.5px; font-weight: 600; }
.af21 .sidebar .card-title i:first-child { color: var(--af21-muted); margin-right: 4px; }
.af21 .sidebar .card-minimise { font-size: 12px; color: var(--af21-muted); }
.af21 .sidebar .card-body { padding: 14px 18px; }
.af21 .sidebar .btn { padding: 8px 10px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af21 .sidebar .card-footer .row > [class*="col"] { padding-left: 4px; padding-right: 4px; }
.af21 .sidebar .card-footer { padding: 12px 14px; }
.af21 .sidebar .input-group .form-control { min-height: 40px; }

/* ─── New support request (supportticketsubmit-*) ─────────────────────── */
.af21-intro { margin-bottom: 24px; }
.af21-intro h2 { font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.af21-intro p { color: var(--af21-muted); margin: 0; }
.af21-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.af21-dept-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 24px; border: 1px solid var(--af21-border); border-radius: 18px;
    background: var(--af21-card); color: var(--af21-text) !important; text-decoration: none !important;
    transition: transform .15s, box-shadow .15s;
}
.af21-dept-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(17, 24, 39, .08); }
.af21-dept-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--af21-primary-soft); font-size: 22px; }
.af21-dept-name { font-size: 17px; font-weight: 600; }
.af21-dept-desc { color: var(--af21-muted); font-size: 13.5px; }
.af21-dept-go { margin-top: auto; color: var(--af21-primary); font-weight: 500; font-size: 14px; }
/* Step 2 (the form): one clean card. */
.af21 #frmOpenTicket .card, .af21 form[action*="submitticket"] .card { border: 0; box-shadow: none; }
.af21 #frmOpenTicket .card-body, .af21 form[action*="submitticket"] .card-body { padding: 0; }
.af21 #frmOpenTicket label, .af21 form[action*="submitticket"] label { font-weight: 500; font-size: 13.5px; color: #374151; }

/* Lists: headers and cells share one alignment; the sorted column isn't shaded. */
.af21 table.table-list th, .af21 table.table-list td,
.af21 table.dataTable th, .af21 table.dataTable td { text-align: left !important; }
.af21 table.dataTable thead th.sorting_asc, .af21 table.dataTable thead th.sorting_desc,
.af21 table.dataTable tbody td.sorting_1, .af21 table.dataTable .sorting_1 { background: transparent !important; }
.af21 table.table-list td .border-left { border-left: 0 !important; padding-left: 0 !important; }
.af21 #tableTicketsList .ticket-number { color: var(--af21-muted); margin-right: 6px; }
.af21 #tableTicketsList .ticket-subject { color: var(--af21-primary); }
.af21 #tableTicketsList .ticket-subject.unread { font-weight: 600; }

/* Ticket page: the reply / close buttons once — over the ticket, not again
   in the "Ticket Information" panel. */
.af21 .sidebar [menuItemName="Ticket Information"] .card-footer,
.af21 .sidebar [menuitemname="Ticket Information"] .card-footer { display: none; }
/* …and the panel itself when the buttons were all it had. */
.af21 .sidebar [menuItemName="Ticket Information"]:not(:has(.list-group-item)) { display: none; }

/* ─── Pages with WHMCS sidebars (tickets, invoices, services, …) — layout: the conversation on the left, its info panels
   (Ticket Information, custom fields, CC, …) in their own container on the
   right — two separate surfaces instead of one. ─────────────────────── */
#main-body.has-side.af21-body { padding: 0 !important; background: transparent; box-shadow: none; border-radius: 0; }
#main-body.has-side > .row { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 -12px; }
#main-body.has-side > .row > .primary-content { order: 1; }
#main-body.has-side > .row > .af21-side-col { order: 2; }
.af21-page-viewticket .primary-content > .card,
.af21-page-viewticket .primary-content .view-ticket,
.af21-page-viewticket #ticketReplyContainer {
    border: 0 !important; border-radius: 22px;
    background: var(--af21-card);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 12px 36px rgba(17, 24, 39, .07);
}
/* The whole column (both of WHMCS's sidebars) is the one container. */
.has-side .af21-side-col {
    padding: 14px 20px; border-radius: 22px; background: var(--af21-card);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 12px 36px rgba(17, 24, 39, .07);
}
.has-side .af21-side-col .sidebar { margin: 0; }
.has-side .af21-side-col .sidebar + .sidebar { border-top: 1px solid var(--af21-border); }
@media (min-width: 992px) {
    .has-side .af21-side-col { position: sticky; top: 110px; }
}
/* Inside that container the panels are plain sections, divided by a line. */
.has-side .af21-side-col .sidebar .card { margin: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; }
.has-side .af21-side-col .sidebar .card + .card { border-top: 1px solid var(--af21-border) !important; }
.has-side .af21-side-col .sidebar .card-header { padding: 14px 4px; border: 0; }
.has-side .af21-side-col .sidebar .card-body,
.has-side .af21-side-col .sidebar .list-group-item { padding-left: 4px; padding-right: 4px; }
.has-side .af21-side-col .sidebar .card-body { padding-top: 0; }
@media (max-width: 991.98px) {
    .has-side .af21-side-col { margin-top: 18px; }
}
/* A clear gap from the conversation: the column a bit narrower, pushed right. */
@media (min-width: 992px) {
    .has-side .af21-side-col { flex: 0 0 calc(33.333% - 16px); max-width: calc(33.333% - 16px); margin-left: 16px; }
}
@media (min-width: 1200px) {
    .has-side .af21-side-col { flex: 0 0 calc(25% - 16px); max-width: calc(25% - 16px); }
}

/* Ticket page: the two columns end exactly where the header's icons end
   (no grid gutters at the edges), and the info container gets its own
   soft tint to stand apart from the white conversation. */
#main-body.has-side > .row { margin: 0 !important; }
#main-body.has-side > .row > .primary-content { padding-left: 0 !important; padding-right: 0 !important; }
.has-side .af21-side-col {
    padding: 14px 20px !important;
    background: #f3f4f8;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .04);
}
.has-side .af21-side-col .sidebar .card + .card,
.has-side .af21-side-col .sidebar + .sidebar { border-top-color: rgba(17, 24, 39, .08) !important; }
.has-side .af21-side-col .form-control,
.has-side .af21-side-col .input-group .btn { background: #fff; }
html[data-theme="dark"] #main-body.has-side .af21-side-col { background: #1d1f24; }

/* Ticket page info container — stand out properly: white like the cards,
   a brand-red band on top, a deeper shadow, red section icons. */
.has-side .af21-side-col {
    background: var(--af21-card) !important;
    border-top: 4px solid var(--af21-primary);
    box-shadow: 0 2px 6px rgba(17, 24, 39, .05), 0 18px 44px rgba(17, 24, 39, .10) !important;
}
.has-side .af21-side-col .sidebar .card-title i:first-child { color: var(--af21-primary) !important; }
.has-side .af21-side-col .sidebar .card-title { font-size: 14px; letter-spacing: .01em; }
.has-side .af21-side-col .form-control { background: var(--af21-page); }
html[data-theme="dark"] #main-body.has-side .af21-side-col { background: var(--af21-card) !important; }

/* Other pages than the ticket: the content itself is the white surface. */
#main-body.has-side > .row > .primary-content {
    padding: 28px 30px !important; border-radius: 22px; background: var(--af21-card);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 12px 36px rgba(17, 24, 39, .07);
}
.af21-page-viewticket #main-body.has-side > .row > .primary-content { padding: 0 !important; border-radius: 0; background: none; box-shadow: none; }
@media (max-width: 767.98px) {
    #main-body.has-side > .row > .primary-content { padding: 18px 16px !important; }
}

/* Tickets list: the subject takes half the table. */
.af21 #tableTicketsList { table-layout: auto; width: 100% !important; }
.af21 #tableTicketsList th:first-child, .af21 #tableTicketsList td:first-child { width: 50% !important; }

/* ─── Home (clientareahome.tpl) ───────────────────────────────────────── */
.af21-page-clientareahome .tiles .tile i { font-size: 24px; }
.af21-alert-hours {
    display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 20px; padding: 16px 18px; border-radius: 16px;
    background: #fff4ed; color: #9a3412; font-size: 14px;
}
.af21-alert-hours i { font-size: 22px; margin-top: 2px; --fa-primary-color: #ea580c; --fa-secondary-color: #fdba74; --fa-secondary-opacity: 1; }
.af21-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 991.98px) { .af21-home-grid { grid-template-columns: 1fr; } }
.af21-home-card {
    display: flex; flex-direction: column;
    padding: 22px 24px; border: 1px solid var(--af21-border); border-radius: 20px;
    background: var(--af21-card);
}
.af21-home-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.af21-home-card h3 { margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.af21-home-card h3 i { font-size: 18px; }
.af21-home-list { list-style: none; margin: 0; padding: 0; }
.af21-home-list li + li { border-top: 1px solid var(--af21-border); }
.af21-home-list a { display: flex; align-items: center; gap: 12px; padding: 12px 2px; color: var(--af21-text) !important; text-decoration: none !important; }
.af21-home-list a:hover .af21-home-main { color: var(--af21-primary); }
.af21-home-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.af21-home-main small { display: block; color: var(--af21-muted); font-size: 12px; }
.af21-home-main small.is-overdue { color: #dc2626; font-weight: 500; }
.af21-home-date { color: var(--af21-muted); font-size: 12.5px; white-space: nowrap; }
.af21-home-amount { font-weight: 600; white-space: nowrap; }
.af21-home-list .label.status { font-size: 10.5px; padding: 4px 8px; }
.af21-home-list .btn-sm { padding: 4px 12px; font-size: 12.5px; }
.af21-home-more, .af21-home-more-top { color: var(--af21-primary) !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; }
.af21-home-more { margin-top: auto; padding-top: 12px; }
.af21-home-empty { margin: 8px 0 4px; color: var(--af21-muted); font-size: 14px; }
.af21-muted { color: var(--af21-muted); }

/* ─── Home: tiles and cards in the brand red, with the red band on top. ─ */
.af21-page-clientareahome .tile,
.af21-home-card { border-top: 4px solid var(--af21-primary) !important; }
.af21-home-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 11px;
    background: var(--af21-primary-soft, rgba(183, 28, 43, .08));
}
.af21-home-card .af21-home-ico i { font-size: 17px; --fa-primary-color: var(--af21-primary); --fa-secondary-color: var(--af21-primary); --fa-secondary-opacity: .4; color: var(--af21-primary); }
.af21-home-list a { padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.af21-home-list a:hover { background: var(--af21-primary-soft, rgba(183, 28, 43, .05)); }

/* ─── Inner pages: a brand-red band along the containers' rounded top. ─── */
#main-body.af21-body:not(.has-side),
#main-body.has-side > .row > .primary-content:not(:has(> .card)),
#main-body.has-side .af21-side-col,
.af21-page-viewticket .primary-content .view-ticket,
.af21-page-viewticket .primary-content > .card:first-child { border-top: 4px solid var(--af21-primary) !important; }
.af21-page-clientareahome #main-body.af21-body { border-top: 0 !important; }

/* ─── Cart (order form afternet-orderform on standard_cart): our look.
   The order form's own big title is the header's; no category sidebar. ─ */
.af21 .page-header__title,
.af21 #order-standard_cart .sidebar-collapsed { display: none !important; }
.af21 .page-header__text { margin: -6px 0 18px; color: var(--af21-muted); font-size: 14.5px; }
.af21 .back-link { margin-bottom: 14px; text-align: right; }
.af21 .back-link a { float: none !important; display: inline-flex; align-items: center; gap: 6px; color: var(--af21-primary) !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; }
.af21 .back-link a::before { content: "\f060"; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 12px; }

/* Items table */
.af21 #order-standard_cart .view-cart-items-header {
    background: transparent !important; color: var(--af21-muted) !important;
    padding: 0 16px 10px; border-bottom: 1px solid var(--af21-border); border-radius: 0;
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.af21 #order-standard_cart .view-cart-items { border-bottom: 1px solid var(--af21-border) !important; }
.af21 #order-standard_cart .view-cart-items .item { padding: 16px; border-bottom: 1px solid var(--af21-border); background: transparent !important; }
.af21 #order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
.af21 #order-standard_cart .item-title { font-weight: 600; color: var(--af21-text); }
.af21 #order-standard_cart .item-group, .af21 #order-standard_cart .item-domain { color: var(--af21-muted) !important; font-size: 13px; }
.af21 #order-standard_cart .item-price .cost { font-weight: 600; }
.af21 #order-standard_cart .btn-remove-from-cart { color: var(--af21-muted) !important; }
.af21 #order-standard_cart .btn-remove-from-cart:hover { color: var(--af21-primary) !important; }
.af21 #order-standard_cart .view-cart-empty { padding: 44px 16px; color: var(--af21-muted); font-size: 15px; text-align: center; }

/* Product being configured */
.af21 #order-standard_cart .product-info {
    margin: 0 0 22px; padding: 20px 24px; border: 0; border-radius: 16px; background: var(--af21-page);
}
.af21 #order-standard_cart .product-info .product-title { margin-bottom: 8px; color: var(--af21-text); font-size: 18px; font-weight: 600; }
.af21 #order-standard_cart .product-info ul { margin: 0; padding-left: 20px; }
.af21 #order-standard_cart .product-info li { padding: 3px 0; }
.af21 #order-standard_cart .sub-heading { border-color: var(--af21-border); }
.af21 #order-standard_cart .sub-heading span { background: var(--af21-card); color: var(--af21-text); font-weight: 600; }

/* Order summary */
.af21 #order-standard_cart .order-summary {
    overflow: hidden; margin-bottom: 16px;
    border: 1px solid var(--af21-border) !important; border-top: 4px solid var(--af21-primary) !important;
    border-radius: 18px; background: var(--af21-card) !important;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .05), 0 18px 44px rgba(17, 24, 39, .10);
}
.af21 #order-standard_cart .order-summary h2 {
    margin: 0; padding: 18px 22px 8px; background: transparent !important;
    color: var(--af21-text) !important; font-size: 16px; font-weight: 600; text-align: left;
}
.af21 #order-standard_cart .summary-container { padding: 4px 22px 20px; border: 0 !important; background: transparent !important; color: var(--af21-text); font-size: 13.5px; }
.af21 #order-standard_cart .summary-container .product-name { font-weight: 600; }
.af21 #order-standard_cart .summary-container .bordered-totals,
.af21 #order-standard_cart .summary-container .subtotal { border-color: var(--af21-border) !important; }
.af21 #order-standard_cart .total-due-today .amt { color: var(--af21-text); font-size: 30px; font-weight: 700; }
.af21 #order-standard_cart .total-due-today span:not(.amt) { color: var(--af21-muted); font-size: 12.5px; }
.af21 #order-standard_cart .express-checkout-buttons, .af21 #order-standard_cart .order-summary .text-right { padding: 0 22px 22px; }
.af21 #order-standard_cart .btn-checkout,
.af21 #order-standard_cart #btnCompleteProductConfig {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 13px 20px; border: 0 !important; border-radius: 12px;
    background: var(--af21-primary) !important; color: #fff !important;
    font-size: 15px; font-weight: 600;
    box-shadow: 0 6px 16px rgba(183, 28, 43, .28);
}
.af21 #order-standard_cart .btn-checkout.disabled { opacity: .45; box-shadow: none; }
.af21 #order-standard_cart #btnCompleteProductConfig { margin-top: 2px; }

/* Promo code */
.af21 #order-standard_cart .view-cart-tabs { margin-top: 26px; }
.af21 #order-standard_cart .view-cart-tabs .nav-tabs { display: flex; gap: 22px; margin: 0; padding: 0; border: 0; list-style: none; }
.af21 #order-standard_cart .view-cart-tabs .nav-tabs li a {
    display: inline-block; padding: 0 0 10px; border: 0 !important; background: none !important;
    color: var(--af21-muted) !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important;
}
.af21 #order-standard_cart .view-cart-tabs .nav-tabs li.active a,
.af21 #order-standard_cart .view-cart-tabs .nav-tabs li a.active { color: var(--af21-primary) !important; box-shadow: inset 0 -2px 0 var(--af21-primary); }
.af21 #order-standard_cart .view-cart-tabs .tab-content { padding: 18px; border: 0 !important; border-radius: 16px; background: var(--af21-page) !important; }
.af21 #order-standard_cart .promo form { display: flex; gap: 10px; align-items: stretch; margin: 0; }
.af21 #order-standard_cart .promo .form-group { position: relative; flex: 1; margin: 0; }
.af21 #order-standard_cart .promo .field-icon { position: absolute; left: 14px; top: 50%; margin: 0; transform: translateY(-50%); color: var(--af21-muted); }
.af21 #order-standard_cart .promo .field {
    width: 100%; height: 44px; padding: 0 14px 0 40px;
    border: 1px solid var(--af21-border); border-radius: 10px; background: var(--af21-card); color: var(--af21-text);
}
.af21 #order-standard_cart .promo .field:focus { outline: 0; border-color: var(--af21-primary); box-shadow: 0 0 0 3px rgba(183, 28, 43, .12); }
.af21 #order-standard_cart .promo .btn-block {
    width: auto; margin: 0; padding: 0 20px; border: 1px solid var(--af21-primary); border-radius: 10px;
    background: var(--af21-card); color: var(--af21-primary); font-weight: 600; white-space: nowrap;
}
.af21 #order-standard_cart .promo .btn-block:hover { background: var(--af21-primary); color: #fff; }
.af21 #order-standard_cart .view-cart-promotion-code { margin-bottom: 10px; font-weight: 600; text-align: center; }
@media (max-width: 575.98px) {
    .af21 #order-standard_cart .promo form { flex-direction: column; }
    .af21 #order-standard_cart .promo .btn-block { height: 42px; }
}

/* Cart layout (standard_cart and afternet-orderform): no category sidebar,
   no second title; the page's content and the order summary are two
   separate containers, as on the ticket page. */
body.af21-cart #main-body.af21-body { padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; border-top: 0 !important; }
.af21 #order-standard_cart .cart-sidebar,
.af21 #order-standard_cart .header-lined { display: none !important; }
.af21 #order-standard_cart > .row { margin: 0; }
.af21 #order-standard_cart .cart-body { flex: 0 0 100%; max-width: 100%; width: 100%; float: none; padding: 0; }
.af21 #order-standard_cart .cart-body > .row,
.af21 #order-standard_cart .cart-body > form > .row,
.af21 #order-standard_cart .row:has(> #scrollingPanelContainer) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin: 0; }
.af21 #order-standard_cart .secondary-cart-body,
.af21 #order-standard_cart .row:has(> #scrollingPanelContainer) > .col-md-8 {
    flex: 1 1 0; min-width: 0; max-width: none; width: auto; float: none;
    padding: 28px 32px; border-radius: 22px; background: var(--af21-card);
    border-top: 4px solid var(--af21-primary);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 12px 36px rgba(17, 24, 39, .07);
}
.af21 #order-standard_cart #scrollingPanelContainer { flex: 0 0 340px; max-width: 340px; width: auto; float: none; padding: 0; }
.af21 #order-standard_cart #scrollingPanelContainer .order-summary { margin-top: 0; }
@media (max-width: 991.98px) {
    .af21 #order-standard_cart #scrollingPanelContainer { flex: 1 1 100%; max-width: 100%; }
    .af21 #order-standard_cart .secondary-cart-body,
    .af21 #order-standard_cart .row:has(> #scrollingPanelContainer) > .col-md-8 { flex: 1 1 100%; padding: 20px 18px; }
}
/* Checkout: green, as it was. */
.af21 #order-standard_cart .btn-checkout { background: #16a34a !important; box-shadow: 0 6px 16px rgba(22, 163, 74, .28) !important; }
.af21 #order-standard_cart .btn-checkout:hover { background: #15803d !important; }

/* ─── Cart sidebar menu (includes/sidebar-cart.tpl) ───────────────────── */
.af21-nav-heading { margin: 18px 12px 6px; color: var(--af21-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; list-style: none; }
.af21-nav-heading:empty { margin: 12px 12px; border-top: 1px solid var(--af21-border); }
.af21-nav-back .af21-nav-link { color: var(--af21-muted) !important; font-size: 13px; }
.af21-nav-back .af21-nav-icon i { font-size: 13px; }
.af21-nav-link.is-active .fad { --fa-primary-color: var(--af21-primary); --fa-secondary-color: var(--af21-primary); --fa-secondary-opacity: .4; }
.af21-nav-badge { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--af21-primary); color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; }

/* ─── Store: a category's products (legacy_modern #order-modern, and
   standard_cart / afternet-orderform .products) as pricing cards. The title
   is the header's, the categories are the sidebar's. ─────────────────── */
.af21 #order-modern .title-bar,
.af21 #order-standard_cart > .row > .sidebar { display: none !important; }
.af21 #order-standard_cart > .row > .col-md-9 { flex: 0 0 100%; max-width: 100%; }
.af21 #order-modern,
.af21 #order-standard_cart .products {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.af21 #order-modern > *:not(.row),
.af21 #order-standard_cart .products > *:not(.row) { grid-column: 1 / -1; }
.af21 #order-modern > .row,
.af21 #order-standard_cart .products > .row { display: contents; }
.af21 #order-modern .col-md-6,
.af21 #order-standard_cart .products .col-md-6 { width: auto; max-width: none; flex: none; padding: 0; }

.af21 #order-modern .product,
.af21 #order-standard_cart .products .product {
    display: flex; flex-direction: column; height: 100%; margin: 0; padding: 30px 30px 28px;
    border: 1px solid var(--af21-border) !important; border-radius: 22px; background: var(--af21-card) !important;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 12px 36px rgba(17, 24, 39, .06);
    transition: transform .15s ease, box-shadow .15s ease; cursor: pointer;
}
.af21 #order-modern .product:hover,
.af21 #order-standard_cart .products .product:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(17, 24, 39, .05), 0 20px 48px rgba(17, 24, 39, .12); }

/* Name */
.af21 #order-modern .product .name,
.af21 #order-standard_cart .products .product header {
    order: 1; float: none; margin: 0 0 14px; padding: 0; border: 0; background: none;
    color: var(--af21-text); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
}
.af21 #order-standard_cart .products .product header span { font-size: inherit; color: inherit; }
.af21 #order-modern .product .qty, .af21 #order-standard_cart .products .product .qty { display: block; color: var(--af21-muted); font-size: 12.5px; font-weight: 500; }

/* Price: big amount, the cycle beside it */
.af21 #order-modern .product > .pricing,
.af21 #order-standard_cart .products .product footer { order: 2; }
.af21 #order-modern .product > .pricing,
.af21 #order-standard_cart .products .product .product-pricing {
    float: none; width: auto; margin: 0 0 20px; padding: 0; text-align: left;
    color: var(--af21-muted); font-size: 14px; line-height: 1.3;
}
.af21 #order-modern .product > .pricing br,
.af21 #order-standard_cart .products .product .product-pricing br { display: none; }
.af21 #order-modern .product > .pricing span.pricing,
.af21 #order-standard_cart .products .product .product-pricing .price {
    display: inline-block; float: none; width: auto; margin: 0 6px 0 0; padding: 0; color: var(--af21-text); font-size: 36px; font-weight: 700; letter-spacing: -.02em;
}
.af21 #order-modern .product > .pricing small,
.af21 #order-standard_cart .products .product .product-pricing small { display: block; margin-top: 4px; font-size: 12.5px; }
.af21 #order-standard_cart .products .product footer { float: none; width: auto; margin: 0; padding: 0; text-align: left; }

/* The order button: under the price, full width, outlined → filled */
.af21 #order-modern .product > .text-right { order: 3; margin: 0 0 22px; text-align: left; }
.af21 #order-modern .product > .text-right .btn,
.af21 #order-standard_cart .products .product footer .btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 22px;
    padding: 12px 18px; border: 1.5px solid var(--af21-primary) !important; border-radius: 12px;
    background: transparent !important; color: var(--af21-primary) !important;
    font-size: 14.5px; font-weight: 600; box-shadow: none;
}
.af21 #order-modern .product > .text-right .btn { margin: 0; }
.af21 #order-modern .product:hover > .text-right .btn,
.af21 #order-standard_cart .products .product:hover footer .btn { background: var(--af21-primary) !important; color: #fff !important; }

/* Description / features: a checked list */
.af21 #order-modern .product .description,
.af21 #order-standard_cart .products .product .product-desc {
    order: 4; float: none; width: auto; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--af21-border);
    color: var(--af21-text); font-size: 14px; line-height: 1.5;
}
.af21 #order-modern .product .prodfeature { order: 5; display: inline-block; margin: 10px 18px 0 0; color: var(--af21-muted); font-size: 13px; }
.af21 #order-modern .product .prodfeature br { display: none; }
.af21 #order-modern .product .prodfeature .feature { margin-right: 4px; color: var(--af21-text); font-weight: 600; }
.af21 #order-modern .product .clear { display: none; }
.af21 #order-modern .product .description ul,
.af21 #order-standard_cart .products .product .product-desc ul { margin: 0; padding: 0; list-style: none; }
.af21 #order-modern .product .description li,
.af21 #order-standard_cart .products .product .product-desc li { position: relative; margin: 0; padding: 5px 0 5px 28px; }
.af21 #order-modern .product .description li::before,
.af21 #order-standard_cart .products .product .product-desc li::before {
    content: "\f00c"; position: absolute; left: 0; top: 7px;
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
    background: var(--af21-primary-soft, rgba(183, 28, 43, .1)); color: var(--af21-primary);
    font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 9px;
}
.af21 #order-standard_cart .products .product .product-desc .feature-value { font-weight: 600; }
.af21 #order-modern .product .description p:last-child,
.af21 #order-standard_cart .products .product .product-desc p:last-child { margin-bottom: 0; }
.af21 #order-modern .currencychooser { text-align: center; }

/* ─── Checkout (afternet-orderform / standard_cart): one white container,
   left-aligned section headings, full-width fields. ──────────────────── */
.af21 #order-standard_cart:has(#frmCheckout) {
    padding: 30px 34px; border-radius: 22px; background: var(--af21-card);
    border-top: 4px solid var(--af21-primary);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 12px 36px rgba(17, 24, 39, .07);
}
@media (max-width: 767.98px) { .af21 #order-standard_cart:has(#frmCheckout) { padding: 20px 16px; } }
.af21 #order-standard_cart .already-registered { margin: 0 0 6px; }
.af21 #order-standard_cart .already-registered .pull-right { float: none !important; }
.af21 #order-standard_cart .already-registered .btn {
    padding: 9px 18px; border: 1px solid var(--af21-border) !important; border-radius: 10px;
    background: var(--af21-page) !important; color: var(--af21-text) !important; font-size: 13.5px; font-weight: 500; box-shadow: none;
}
.af21 #order-standard_cart .already-registered .btn:hover { border-color: var(--af21-primary) !important; color: var(--af21-primary) !important; }
.af21 #order-standard_cart .sub-heading {
    height: auto; margin: 30px 0 16px; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--af21-border); text-align: left;
}
.af21 #order-standard_cart .sub-heading span {
    position: static; top: 0; padding: 0; background: none !important;
    color: var(--af21-text); font-size: 16px; font-weight: 600;
}
.af21 #order-standard_cart .prepend-icon { position: relative; margin-bottom: 14px; }
.af21 #order-standard_cart .prepend-icon .field-icon {
    position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
    width: 42px; height: 46px; margin: 0; color: var(--af21-muted); font-size: 14px;
}
.af21 #order-standard_cart .prepend-icon .field,
.af21 #order-standard_cart #frmCheckout select.field,
.af21 #order-standard_cart #frmCheckout .form-control {
    display: block; width: 100%; height: 46px; padding: 0 14px 0 42px;
    border: 1px solid var(--af21-border); border-radius: 10px; background: var(--af21-card); color: var(--af21-text);
    font-size: 14.5px; box-shadow: none;
}
.af21 #order-standard_cart #frmCheckout .form-control:not(.prepend-icon .form-control) { padding-left: 14px; }
.af21 #order-standard_cart #frmCheckout textarea.field,
.af21 #order-standard_cart #frmCheckout textarea.form-control { height: auto; min-height: 100px; padding: 12px 14px; }
.af21 #order-standard_cart .prepend-icon .field:focus,
.af21 #order-standard_cart #frmCheckout .form-control:focus { outline: 0; border-color: var(--af21-primary); box-shadow: 0 0 0 3px rgba(183, 28, 43, .12); }
.af21 #order-standard_cart #frmCheckout .intl-tel-input,
.af21 #order-standard_cart #frmCheckout .iti { display: block; width: 100%; }
.af21 #order-standard_cart #frmCheckout .intl-tel-input .field,
.af21 #order-standard_cart #frmCheckout .iti .field { padding-left: 92px; }
.af21 #order-standard_cart #frmCheckout label:not(.field-icon):not(.radio-inline):not(.checkbox-inline) { color: var(--af21-muted); font-size: 13px; font-weight: 500; }
.af21 #order-standard_cart #frmCheckout .payment-methods,
.af21 #order-standard_cart #frmCheckout .marketing-email-optin { padding: 16px 18px; border-radius: 14px; background: var(--af21-page); }
.af21 #order-standard_cart #frmCheckout .marketing-email-optin h4 { font-size: 15px; font-weight: 600; }

/* ─── Continue / complete order: always green. ────────────────────────── */
.af21 #order-standard_cart #btnCompleteProductConfig,
.af21 #order-standard_cart #btnCompleteOrder,
.af21 #order-standard_cart .btn-checkout,
.af21 #order-standard_cart #btnDomainContinue,
.af21 #order-standard_cart .btn-continue {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border: 0 !important; border-radius: 12px;
    background: #16a34a !important; color: #fff !important; font-size: 15px; font-weight: 600;
    box-shadow: 0 6px 16px rgba(22, 163, 74, .28) !important;
}
.af21 #order-standard_cart #btnCompleteProductConfig,
.af21 #order-standard_cart .btn-checkout { display: flex; width: 100%; }
.af21 #order-standard_cart #btnCompleteProductConfig:hover,
.af21 #order-standard_cart #btnCompleteOrder:hover,
.af21 #order-standard_cart .btn-checkout:hover,
.af21 #order-standard_cart #btnDomainContinue:hover,
.af21 #order-standard_cart .btn-continue:hover { background: #15803d !important; }
.af21 #order-standard_cart #btnCompleteOrder { margin-top: 10px; padding: 14px 34px; }

/* Cart: the bar above the content (view cart / back), instead of the
   order form's own "back" link; the empty-cart button plain; the
   complete-order button on one line. */
.af21 .back-link { display: none !important; }
.af21-cart-bar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: 0 0 16px; }
.af21-cart-bar-title, .af21-body h2.af21-cart-bar-title { margin: 0 auto 0 0; color: var(--af21-text); font-size: 34px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
@media (max-width: 575.98px) { .af21-cart-bar { flex-wrap: wrap; } .af21-cart-bar-title, .af21-body h2.af21-cart-bar-title { font-size: 26px; flex: 1 1 100%; } }
.af21-cart-bar-btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px;
    border-radius: 12px; background: var(--af21-card); color: var(--af21-text) !important;
    font-size: 14px; font-weight: 600; text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .05), 0 8px 24px rgba(17, 24, 39, .08);
}
.af21-cart-bar-btn i { color: var(--af21-primary); }
.af21-cart-bar-btn span { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--af21-primary); color: #fff; font-size: 11.5px; text-align: center; }
.af21-cart-bar-btn:hover { color: var(--af21-primary) !important; }
.af21-cart-bar-back { display: inline-flex; align-items: center; gap: 6px; color: var(--af21-primary) !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; }
.af21 #order-standard_cart .empty-cart { text-align: right; }
.af21 #order-standard_cart .empty-cart .btn,
.af21 #order-standard_cart #btnEmptyCart {
    display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 6px 12px;
    border: 0 !important; border-radius: 8px; background: transparent !important; color: var(--af21-muted) !important;
    font-size: 13px; font-weight: 500; box-shadow: none !important;
}
.af21 #order-standard_cart #btnEmptyCart:hover { background: var(--af21-primary-soft, rgba(183, 28, 43, .08)) !important; color: var(--af21-primary) !important; }
.af21 #order-standard_cart .btn-checkout { white-space: nowrap; padding-left: 16px !important; padding-right: 16px !important; }

/* The E-shop's menu (cart pages): its own soft red-tinted background, so it
   reads as a different place from the client area's menu. */
body.af21-cart .af21-sidebar-inner { background: #f8eaec !important; box-shadow: inset 0 0 0 1px rgba(183, 28, 43, .08) !important; }
body.af21-cart .af21-nav-link:hover,
body.af21-cart .af21-nav-link.is-active { background: rgba(183, 28, 43, .08) !important; }
body.af21-cart .af21-nav-heading { color: #a2545d; }
body.af21-cart .af21-sidebar-inner [class*="border-top"], body.af21-cart .af21-sidebar-inner hr { border-color: rgba(183, 28, 43, .12) !important; }
html[data-theme="dark"] body.af21-cart .af21-sidebar-inner { background: #2a1d20 !important; }
html[data-theme="dark"] body.af21-cart .af21-nav-heading { color: #d9a0a7; }

/* E-shop pages: the header's line under the title (instead of breadcrumbs). */
.af21-header-sub { margin-top: 2px; color: var(--af21-muted); font-size: 14px; }

/* Header: the cart button (every page) — brand red, label + count. */
.af21 .af21-cart-btn {
    display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px;
    border: 0; border-radius: 14px; background: var(--af21-primary); color: #fff !important;
    font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(183, 28, 43, .30);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.af21 .af21-cart-btn:hover { background: #9c1724; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(183, 28, 43, .36); }
.af21 .af21-cart-btn i { font-size: 16px; }
.af21-cart-btn-count { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--af21-primary); font-size: 12px; font-weight: 700; text-align: center; }
@media (max-width: 991.98px) {
    .af21-cart-btn-label { display: none; }
    .af21 .af21-cart-btn { padding: 0 14px; gap: 8px; }
}
.af21-cart-bar:not(:has(*)) { display: none; }

/* Cart: the remove-item / empty-cart confirmations (Bootstrap 3 markup in a
   Bootstrap 4 theme) — a small centred dialog. */
.af21 .modal-remove-item .modal-dialog { max-width: 440px; margin-top: 12vh; }
.af21 .modal-remove-item .modal-content { overflow: hidden; border: 0; border-radius: 22px; background: var(--af21-card); box-shadow: 0 24px 64px rgba(17, 24, 39, .25); }
.af21 .modal-remove-item .modal-header {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 34px 28px 6px; border: 0; background: transparent !important; text-align: center;
}
.af21 .modal-remove-item .modal-header .close {
    position: absolute; top: 14px; right: 16px; margin: 0; padding: 4px 8px; float: none;
    color: var(--af21-muted); font-size: 24px; opacity: .7; text-shadow: none;
}
.af21 .modal-remove-item .modal-header .close:hover { opacity: 1; color: var(--af21-text); }
.af21 .modal-remove-item .modal-title {
    display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0;
    color: var(--af21-text); font-size: 19px; font-weight: 700; text-align: center;
}
.af21 .modal-remove-item .modal-title i {
    display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%;
    background: var(--af21-primary-soft, rgba(183, 28, 43, .1)); color: var(--af21-primary); font-size: 24px !important;
}
.af21 .modal-remove-item .modal-body { padding: 10px 30px 4px; color: var(--af21-muted); font-size: 14.5px; text-align: center; }
.af21 .modal-remove-item .modal-footer { justify-content: center; gap: 10px; padding: 20px 28px 28px; border: 0; }
.af21 .modal-remove-item .modal-footer .btn { min-width: 110px; margin: 0; padding: 10px 20px; border-radius: 12px; font-weight: 600; }
.af21 .modal-remove-item .modal-footer .btn-default { border: 1px solid var(--af21-border); background: var(--af21-card); color: var(--af21-text); }
.af21 .modal-remove-item .modal-footer .btn-primary { border: 0; background: var(--af21-primary); color: #fff; }

/* Checkout: the notes fields full width; the payment methods one under the
   other, each in its own box (the chosen one marked). */
.af21 #order-standard_cart #frmCheckout textarea.field,
.af21 #order-standard_cart #frmCheckout textarea.form-control {
    display: block; width: 100% !important; max-width: 100%; min-height: 120px; padding: 12px 14px;
    border: 1px solid var(--af21-border); border-radius: 10px; background: var(--af21-card); color: var(--af21-text);
    font-size: 14.5px; resize: vertical;
}
.af21 #order-standard_cart #frmCheckout textarea.field:focus { outline: 0; border-color: var(--af21-primary); box-shadow: 0 0 0 3px rgba(183, 28, 43, .12); }
.af21 #order-standard_cart #frmCheckout .field-container .form-group input:not([type="radio"]):not([type="checkbox"]),
.af21 #order-standard_cart #frmCheckout .field-container .form-group select { width: 100%; }

.af21 #order-standard_cart #paymentGatewaysContainer > .text-center {
    display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.af21 #order-standard_cart #paymentGatewaysContainer .radio-inline {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px;
    border: 1.5px solid var(--af21-border); border-radius: 14px; background: var(--af21-card);
    color: var(--af21-text); font-size: 15px; font-weight: 500; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.af21 #order-standard_cart #paymentGatewaysContainer .radio-inline:hover { border-color: #86efac; }
.af21 #order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked),
.af21 #order-standard_cart #paymentGatewaysContainer .radio-inline:has(.checked) {
    border-color: #4ade80; background: #f0fdf4;
}
html[data-theme="dark"] .af21 #order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked),
html[data-theme="dark"] .af21 #order-standard_cart #paymentGatewaysContainer .radio-inline:has(.checked) { border-color: #22c55e; background: rgba(34, 197, 94, .10); }
.af21 #order-standard_cart #paymentGatewaysContainer .radio-inline input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: #16a34a; }
.af21 #order-standard_cart #paymentGatewaysContainer .radio-inline + .radio-inline { margin-left: 0; }

/* ═══ Login / password reset / 2FA / account invite: a clean page ═══════
   (header.tpl $afAuth): only the logo and the form, centred on the grey. */
.af21-auth .af21-sidebar,
.af21-auth .af21-sidebar-backdrop,
.af21-auth .af21-header,
.af21-auth .af21-footer { display: none !important; }
.af21-auth .af21-shell { padding: 24px 16px; justify-content: center; }
.af21-auth .af21-main { max-width: 560px; margin: 0 auto; justify-content: center; }
.af21-auth #main-body.af21-body {
    padding: 0 !important; background: transparent; box-shadow: none; border: 0 !important; border-radius: 0;
    flex: 0 0 auto; margin: auto 0 !important;
}
.af21-auth #main-body.af21-body::before { display: none; }
.af21-auth-logo { display: block; text-align: center; margin: 0 0 22px; font-size: 26px; font-weight: 700; color: var(--af21-text) !important; text-decoration: none !important; }
.af21-auth-logo img { max-width: 190px; max-height: 56px; }
.af21-auth .card { border: 0; border-top: 4px solid var(--af21-primary) !important; border-radius: var(--af21-radius); box-shadow: 0 12px 36px rgba(17, 24, 39, .08) !important; margin-top: 0 !important; }
.af21-auth .card-footer { background: transparent; border-top: 1px solid var(--af21-border); }

/* The order form (orderforms/afternet-orderform) was written for the old
   theme: it hides things with Bootstrap 3's .hidden (the empty error box,
   domain search results …), which this theme lacks. Not !important, so
   WHMCS's own .show() still reveals them when needed. */
.af21 .hidden { display: none; }

/* ═══ Domain pages (orderforms/afternet-orderform — standard_cart's markup):
   register, transfer, renewals, domain-with-product. The yellow search band
   becomes our white card with the red top line; results, suggestions,
   spotlight TLDs and the promo boxes follow the theme's cards. ══════════ */
.af21 #order-standard_cart .domain-checker-container {
    margin: 0 0 24px; padding: 34px 32px; border-radius: 22px; background: var(--af21-card) !important;
    border-top: 4px solid var(--af21-primary); box-shadow: 0 1px 3px rgba(17, 24, 39, .04), 0 12px 36px rgba(17, 24, 39, .07);
}
.af21 #order-standard_cart .domain-checker-bg { background: none !important; padding: 0 !important; margin: 0 !important; }
.af21 #order-standard_cart .domain-checker-container .input-group-box { max-width: 760px; margin: 0 auto; padding: 0; background: transparent; box-shadow: none; }
.af21 #order-standard_cart .domain-checker-container .form-control { height: 54px; padding: 0 18px; font-size: 17px; border: 1.5px solid var(--af21-border); border-radius: 14px 0 0 14px; }
.af21 #order-standard_cart .domain-checker-container .form-control:focus { border-color: var(--af21-primary); box-shadow: none; }
.af21 #order-standard_cart .domain-checker-container .btn { height: 54px; padding: 0 26px; border-radius: 0 14px 14px 0 !important; font-weight: 600; font-size: 15px; }
.af21 #order-standard_cart .domain-check-availability,
.af21 #order-standard_cart .btn-add-to-cart,
.af21 #order-standard_cart .domain-checker-container .btn-primary { background: var(--af21-primary) !important; border-color: var(--af21-primary) !important; color: #fff !important; }
.af21 #order-standard_cart .btn-add-to-cart.added { background: #16a34a !important; border-color: #16a34a !important; }
.af21 #order-standard_cart .domain-checker-container p,
.af21 #order-standard_cart .domain-checker-container h2 { color: var(--af21-text); }
.af21 #order-standard_cart .domain-checker-container .idn-language-selector { max-width: 760px; margin: 14px auto 0; }

/* The searched name's result. */
.af21 #order-standard_cart .domain-checker-result-headline { margin: 18px 0 8px; font-size: 22px; font-weight: 600; }
.af21 #order-standard_cart .domain-checker-available { color: #15803d; }
.af21 #order-standard_cart .domain-checker-unavailable,
.af21 #order-standard_cart .domain-checker-invalid { color: var(--af21-primary); }
.af21 #order-standard_cart .domain-lookup-result .domain-price { font-size: 20px; font-weight: 700; color: var(--af21-text); }

/* Spotlight TLDs (.gr, .com …) as small cards. */
.af21 #order-standard_cart .spotlight-tlds { margin: 22px 0 6px; }
.af21 #order-standard_cart .spotlight-tld {
    border: 1px solid var(--af21-border) !important; border-radius: 16px; background: var(--af21-card) !important;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .05); color: var(--af21-text) !important; font-weight: 700;
}
.af21 #order-standard_cart .spotlight-tld .btn { border-radius: 10px; }

/* Suggestions + the TLD price list: a card with hairline rows. */
.af21 #order-standard_cart .suggested-domains,
.af21 #order-standard_cart .domain-pricing {
    margin-top: 24px; padding: 6px 0 0; border: 1px solid var(--af21-border); border-radius: 18px; background: var(--af21-card); overflow: hidden;
}
.af21 #order-standard_cart .suggested-domains .panel-heading,
.af21 #order-standard_cart .suggested-domains .card-header { padding: 14px 20px; background: transparent; border-bottom: 1px solid var(--af21-border); font-weight: 600; font-size: 15px; }
.af21 #order-standard_cart .domain-suggestion,
.af21 #order-standard_cart .suggested-domains .list-group-item { padding: 12px 20px; border: 0; border-bottom: 1px solid var(--af21-border); background: transparent; }
.af21 #order-standard_cart .suggested-domains .panel-footer,
.af21 #order-standard_cart .suggested-domains .card-footer { padding: 12px 20px; background: transparent; border: 0; }
.af21 #order-standard_cart .domain-suggestions-warning { padding: 0 20px 14px; font-size: 12px; }
.af21 #order-standard_cart .tld-filters a { margin: 0 6px 6px 0; border-radius: 999px; }
.af21 #order-standard_cart .tld-filters a.badge-success { background: var(--af21-primary); }
.af21 #order-standard_cart .header-lined h1,
.af21 #order-standard_cart .header-lined h2 { font-size: 22px; font-weight: 700; }

/* "Web hosting" / "Μεταφορά" promo boxes: plain cards, red link buttons. */
.af21 #order-standard_cart .domain-promo-box {
    margin-top: 24px; padding: 24px 26px; border: 1px solid var(--af21-border); border-radius: 18px; background: var(--af21-card);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .04);
}
.af21 #order-standard_cart .domain-promo-box h3 { font-size: 20px; font-weight: 700; color: var(--af21-text); }
.af21 #order-standard_cart .domain-promo-box i { color: var(--af21-primary); opacity: .85; }
.af21 #order-standard_cart .domain-promo-box .text-warning,
.af21 #order-standard_cart .domain-promo-box .text-primary { color: var(--af21-muted) !important; font-weight: 500; }
.af21 #order-standard_cart .domain-promo-box .btn { border-radius: 10px; background: var(--af21-primary); border-color: var(--af21-primary); color: #fff; }

/* Renewals: the list as hairline rows. */
.af21 #order-standard_cart .domain-renewals .domain-renewal { padding: 14px 4px; border-bottom: 1px solid var(--af21-border); }

html[data-theme="dark"] .af21 #order-standard_cart .domain-checker-container .form-control { background: #1d1f24; color: #e5e7eb; border-color: #33363d; }

/* Domain pages, fixes: the category pills (Popular / Other …) readable —
   grey, the chosen one brand red with white text; the search button never
   cut; the price table's header lines in brand colours (were blue). */
.af21 #order-standard_cart .tld-filters a,
.af21 #order-standard_cart .tld-filters a.badge {
    display: inline-block; margin: 0 6px 8px 0; padding: 7px 14px; border-radius: 999px;
    background: #f1f1f4 !important; color: var(--af21-text) !important; font-size: 13px; font-weight: 600; text-decoration: none !important;
}
.af21 #order-standard_cart .tld-filters a.badge-success,
.af21 #order-standard_cart .tld-filters a.active { background: var(--af21-primary) !important; color: #fff !important; }
html[data-theme="dark"] .af21 #order-standard_cart .tld-filters a:not(.badge-success) { background: #2a2d34 !important; color: #e5e7eb !important; }
.af21 #order-standard_cart .domain-checker-container .input-group-append { flex: 0 0 auto; }
.af21 #order-standard_cart .domain-checker-container .input-group-append .btn { width: auto !important; min-width: 150px; white-space: nowrap; }
.af21 #order-standard_cart .tld-pricing-header > div,
.af21 #order-standard_cart .tld-pricing-header .row > div { border-bottom-color: var(--af21-primary) !important; }
.af21 #order-standard_cart .tld-pricing-header .row > div:nth-child(2) { border-bottom-color: #e5a5ab !important; background: transparent !important; }

/* Home: the prepaid support hours line (clientareahome.tpl, $afHome.hours). */
.af21-home-hours { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 18px; border-radius: 16px; background: #ecfdf5; color: #14532d; }
.af21-home-hours.is-out { background: #fef2f2; color: #991b1b; }
.af21-home-hours i { font-size: 20px; }
.af21-home-hours span { flex: 1; }
.af21-home-hours small { opacity: .75; }