/**
 * Retail Logic Design System — Client Portal
 * Scoped under .rl-client and .rl-auth
 */

/* ─── Design Tokens ─── */
.rl-client,
.rl-auth {
    --rl-black: #000000;
    --rl-white: #ffffff;
    --rl-cta: #fc9d30;
    --rl-cta-hover: #e88a1f;
    --rl-bg-main: #f8f9ff;
    --rl-bg-surface: #ffffff;
    --rl-bg-container: #e5eeff;
    --rl-text-primary: #0b1c30;
    --rl-text-secondary: #4c4546;
    --rl-text-muted: #7e7576;
    --rl-border: #e2e8f0;
    --rl-outline-variant: #cfc4c5;
    --rl-error: #ba1a1a;
    --rl-success: #0d7a4e;
    --rl-success-bg: #e6f4ed;
    --rl-warning: #9a6700;
    --rl-warning-bg: #fef3cd;
    --rl-info: #1e4a8a;
    --rl-info-bg: #e5eeff;

    --rl-radius-sm: 4px;
    --rl-radius: 8px;
    --rl-radius-md: 12px;
    --rl-radius-lg: 16px;
    --rl-radius-xl: 24px;
    --rl-radius-full: 9999px;

    --rl-space-xs: 4px;
    --rl-space-sm: 8px;
    --rl-space-md: 16px;
    --rl-space-lg: 24px;
    --rl-space-xl: 32px;
    --rl-space-2xl: 48px;
    --rl-space-3xl: 64px;

    --rl-font:
        "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --rl-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.05);
    --rl-max-width: 1440px;

    /* Sidebar navigation tokens (shared admin + client) */
    --rl-nav-text: #475569;
    --rl-nav-text-hover: #0f172a;
    --rl-nav-heading: #94a3b8;
    --rl-nav-icon: #64748b;
    --rl-nav-active-bg: rgba(252, 157, 48, 0.08);
    --rl-nav-active-text: #c2410c;
    --rl-nav-hover-bg: #e1ebf4;
    --rl-nav-sub-indent: 32px;

    /* Legacy alias for existing templates */
    --primary-color: var(--rl-cta);
}

/* ─── Base Typography ─── */
.rl-client,
.rl-auth {
    font-family: var(--rl-font);
    color: var(--rl-text-primary);
    -webkit-font-smoothing: antialiased;
}

.rl-client h1,
.rl-auth h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
}
.rl-client h2,
.rl-auth h2 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
}
.rl-client h3,
.rl-auth h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}
.rl-client .rl-body-lg {
    font-size: 18px;
}
.rl-client .rl-body-md,
.rl-auth .rl-body-md {
    font-size: 16px;
}
.rl-client .rl-body-sm,
.rl-auth .rl-body-sm {
    font-size: 14px;
}
.rl-client .rl-label-md,
.rl-auth .rl-label-md {
    font-size: 14px;
    font-weight: 600;
}
.rl-client .rl-label-sm,
.rl-auth .rl-label-sm {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Layout Shell ─── */
.rl-client {
    background: var(--rl-bg-main);
}

.rl-client .page-wrapper {
    background: var(--rl-bg-main);
}

.rl-client .page-wrapper > .content.container-fluid {
    max-width: 1600px;
    padding-left: var(--rl-space-xl);
    padding-right: var(--rl-space-xl);
}

@media (max-width: 767px) {
    .rl-client .page-wrapper > .content.container-fluid {
        padding-left: var(--rl-space-md);
        padding-right: var(--rl-space-md);
    }
}

/* ─── Header ─── */
.rl-client .header {
    background: var(--rl-bg-surface);
    border-bottom: 1px solid var(--rl-border);
    box-shadow: none;
}

.rl-client .header .nav-link {
    color: var(--rl-text-secondary);
}

.rl-client .header .nav-link:hover {
    color: var(--rl-text-primary);
}

.rl-client .header .user-menu .dropdown-menu {
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-md);
    box-shadow: var(--rl-shadow-hover);
    padding: var(--rl-space-sm);
}

.rl-client .header .user-menu .dropdown-item {
    border-radius: var(--rl-radius-sm);
    font-size: 14px;
    padding: 8px 12px;
    color: var(--rl-text-primary);
}

.rl-client .header .user-menu .dropdown-item:hover {
    background: var(--rl-bg-container);
}

.rl-client .header .user-header .user-text h6 {
    color: var(--rl-text-primary);
    font-weight: 600;
}

/* ─── Sidebar ─── */
.rl-client .sidebar {
    background: var(--rl-bg-surface);
    border-right: 1px solid var(--rl-border);
    box-shadow: none;
}

.rl-client .sidebar-app-selector {
    padding: var(--rl-space-md);
    border-bottom: 1px solid var(--rl-border);
    background: var(--rl-bg-main);
}

.rl-client .sidebar-app-selector-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rl-text-muted);
    margin-bottom: var(--rl-space-sm);
}

.rl-client .sidebar-app-dropdown {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border-radius: var(--rl-radius);
    border: 1px solid var(--rl-border);
    background: var(--rl-bg-surface);
    color: var(--rl-text-primary);
    font-size: 14px;
    font-weight: 500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%234C4546' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.rl-client .sidebar-app-dropdown:hover {
    border-color: var(--rl-outline-variant);
}

.rl-client .sidebar-app-dropdown:focus {
    outline: none;
    border-color: var(--rl-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.rl-client .sidebar-app-dropdown option {
    background: var(--rl-bg-surface);
    color: var(--rl-text-primary);
}

/* Legacy sidebar (old flat ul structure only — rl-nav-link uses retail-logic-shell.css) */
.rl-client .sidebar-menu > ul > li > a:not(.rl-nav-link),
.rl-client .sidebar-menu li a.sidebar-link:not(.rl-nav-link) {
    color: var(--rl-nav-text);
    border-radius: var(--rl-radius);
    font-size: 14px;
    font-weight: 500;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.rl-client .sidebar-menu > ul > li > a:not(.rl-nav-link) svg,
.rl-client .sidebar-menu > ul > li > a:not(.rl-nav-link) #sidebar-icons {
    fill: var(--rl-nav-icon);
}

.rl-client .sidebar-menu > ul > li > a:not(.rl-nav-link):hover,
.rl-client .sidebar-menu > ul > li > a:not(.rl-nav-link):hover span {
    background: var(--rl-nav-hover-bg) !important;
    color: var(--rl-nav-text-hover) !important;
}

.rl-client .sidebar-menu > ul > li.active > a:not(.rl-nav-link) {
    background: var(--rl-nav-active-bg) !important;
    color: var(--rl-nav-active-text) !important;
    font-weight: 600;
}

.rl-client .sidebar-menu ul ul li a:not(.rl-nav-link) {
    color: var(--rl-nav-text);
    font-size: 13px;
    font-weight: 500;
    padding-left: var(--rl-nav-sub-indent) !important;
}

.rl-client .sidebar-menu ul ul li a:not(.rl-nav-link):hover,
.rl-client .sidebar-menu ul ul li a:not(.rl-nav-link).active {
    background: var(--rl-nav-active-bg) !important;
    color: var(--rl-nav-active-text) !important;
    font-weight: 600;
}

/* ─── Impersonation Banner ─── */
.rl-client .rl-impersonation-banner {
    background: var(--rl-warning-bg);
    border-bottom: 1px solid #f0d78c;
    color: var(--rl-warning);
    padding: var(--rl-space-sm) var(--rl-space-md);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rl-client .rl-impersonation-banner .fa {
    font-size: 15px;
}

.rl-client .rl-impersonation-banner__btn,
.rl-client .rl-impersonation-banner .btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin-left: 0;
    font-size: 13px;
    font-weight: 600;
    color: #92400e !important;
    background: #fff;
    border: 1px solid #f0d78c;
    border-radius: var(--rl-radius);
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.rl-client .rl-impersonation-banner__btn:hover,
.rl-client .rl-impersonation-banner .btn:hover {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #78350f !important;
}

/* ─── Page Header ─── */
.rl-client .rl-page-header {
    margin-bottom: var(--rl-space-lg);
}

.rl-client .rl-page-header__inner {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rl-space-md);
}

.rl-client .rl-page-header__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--rl-text-primary);
    margin: 0 0 var(--rl-space-xs);
}

.rl-client .rl-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rl-client .rl-breadcrumb li {
    color: var(--rl-text-muted);
}

.rl-client .rl-breadcrumb li a {
    color: var(--rl-text-secondary);
    text-decoration: none;
}

.rl-client .rl-breadcrumb li a:hover {
    color: var(--rl-text-primary);
}

.rl-client .rl-breadcrumb li + li::before {
    content: "/";
    margin-right: var(--rl-space-xs);
    color: var(--rl-outline-variant);
}

.rl-client .rl-breadcrumb li:last-child {
    color: var(--rl-text-primary);
    font-weight: 500;
}

/* Legacy breadcrumb-card override */
.rl-client .breadcrumb-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    box-shadow: none;
    position: static;
    margin-bottom: var(--rl-space-lg);
}

.rl-client .breadcrumb-card .page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--rl-text-primary);
    margin-bottom: var(--rl-space-xs);
}

.rl-client .breadcrumb .breadcrumb-item a {
    color: var(--rl-text-secondary);
}

.rl-client .breadcrumb .active-breadcrumb {
    color: var(--rl-text-primary);
    font-weight: 500;
}

/* ─── Cards ─── */
.rl-client .card,
.rl-client .rl-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    box-shadow: none;
    margin-bottom: var(--rl-space-lg);
    transition: box-shadow 0.2s ease;
}

.rl-client .card.rl-card--interactive:hover,
.rl-client .rl-card.rl-card--interactive:hover {
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .card .card-body,
.rl-client .rl-card__body {
    padding: var(--rl-space-lg);
}

.rl-client .rl-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--rl-text-primary);
    margin-bottom: var(--rl-space-md);
    display: flex;
    align-items: center;
    gap: var(--rl-space-sm);
}

.rl-client .rl-card__title i,
.rl-client .rl-card__title svg {
    color: var(--rl-cta);
}

/* ─── Buttons ─── */
.rl-client .btn-primary,
.rl-auth .btn-primary,
.rl-client .btn.rl-btn-primary,
.rl-auth .btn.rl-btn-primary {
    background: var(--rl-black);
    border-color: var(--rl-black);
    color: var(--rl-white);
    border-radius: var(--rl-radius);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    transition:
        opacity 0.15s ease,
        box-shadow 0.15s ease;
}

.rl-client .btn-primary:hover,
.rl-auth .btn-primary:hover,
.rl-client .btn.rl-btn-primary:hover,
.rl-auth .btn.rl-btn-primary:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: var(--rl-white);
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .btn-secondary,
.rl-auth .btn-secondary,
.rl-client .btn.rl-btn-secondary,
.rl-auth .btn.rl-btn-secondary,
.rl-client .btn-outline-primary,
.rl-auth .btn-outline-primary,
.rl-client .btn-outline-dark {
    background: var(--rl-white);
    border: 1px solid var(--rl-black);
    color: var(--rl-black);
    border-radius: var(--rl-radius);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
}

.rl-client .btn-secondary:hover,
.rl-auth .btn-secondary:hover,
.rl-client .btn.rl-btn-secondary:hover,
.rl-auth .btn.rl-btn-secondary:hover,
.rl-client .btn-outline-primary:hover,
.rl-auth .btn-outline-primary:hover {
    background: var(--rl-bg-main);
    color: var(--rl-black);
    border-color: var(--rl-black);
}

.rl-client .btn.rl-btn-cta,
.rl-auth .btn.rl-btn-cta,
.rl-client .custom-create-btn,
.rl-client .btn-update-profile {
    background: var(--rl-cta);
    border-color: var(--rl-cta);
    color: var(--rl-white);
    border-radius: var(--rl-radius);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
}

.rl-client .btn.rl-btn-cta:hover,
.rl-auth .btn.rl-btn-cta:hover,
.rl-client .custom-create-btn:hover,
.rl-client .btn-update-profile:hover {
    background: var(--rl-cta-hover);
    border-color: var(--rl-cta-hover);
    color: var(--rl-white);
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .custom-edit-btn,
.rl-client .custom-view-btn,
.rl-client .custom-delete-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: var(--rl-radius) !important;
    border: 1px solid var(--rl-border) !important;
    background: var(--rl-bg-surface) !important;
    color: var(--rl-text-primary) !important;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
    vertical-align: middle;
}

.rl-client .custom-edit-btn i,
.rl-client .custom-view-btn i,
.rl-client .custom-delete-btn i {
    font-size: 14px;
    line-height: 1;
    opacity: 0.85;
}

.rl-client .custom-edit-btn:hover {
    border-color: var(--rl-black) !important;
    background: var(--rl-bg-main) !important;
    color: var(--rl-text-primary) !important;
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .custom-view-btn:hover {
    border-color: var(--rl-info) !important;
    background: var(--rl-bg-container) !important;
    color: var(--rl-info) !important;
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .custom-delete-btn:hover {
    border-color: var(--rl-error) !important;
    background: #fff8f8 !important;
    color: var(--rl-error) !important;
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .custom-edit-btn:focus,
.rl-client .custom-view-btn:focus,
.rl-client .custom-delete-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* ─── Forms & Inputs ─── */
.rl-client .form-group label,
.rl-auth .form-group label,
.rl-client .rl-form-label,
.rl-auth .rl-form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--rl-text-primary);
    margin-bottom: var(--rl-space-sm);
}

.rl-client .form-control,
.rl-auth .form-control,
.rl-client select.form-control,
.rl-auth select.form-control {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    color: var(--rl-text-primary);
    font-size: 14px;
    padding: 10px 14px;
    min-height: 42px;
}

.rl-client .form-control:focus,
.rl-auth .form-control:focus {
    border-color: var(--rl-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
    outline: none;
}

.rl-client .form-control::placeholder,
.rl-auth .form-control::placeholder {
    color: var(--rl-text-muted);
}

.rl-client label.required::after,
.rl-auth label.required::after {
    content: "*";
    color: var(--rl-error);
    margin-left: 2px;
}

.rl-client .text-danger,
.rl-auth .text-danger {
    color: var(--rl-error) !important;
    font-size: 13px;
}

/* ─── Tables ─── */
.rl-client .table {
    color: var(--rl-text-primary);
    border-collapse: collapse;
}

.rl-client .table thead th {
    background: var(--rl-bg-main);
    border-bottom: 1px solid var(--rl-border);
    border-top: none;
    color: var(--rl-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 16px;
    vertical-align: middle;
    border-left: none;
    border-right: none;
}

.rl-client .table tbody td {
    border-top: none;
    border-bottom: 1px solid var(--rl-border);
    border-left: none;
    border-right: none;
    padding: 14px 16px;
    vertical-align: middle;
    font-size: 14px;
    color: var(--rl-text-secondary);
}

.rl-client .table tbody tr:hover {
    background: var(--rl-bg-main);
}

.rl-client .table-hover tbody tr:hover {
    background: var(--rl-bg-main);
}

.rl-client .dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    padding: 8px 12px;
}

.rl-client .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    padding: 6px 10px;
}

/* ─── Status Badges ─── */
.rl-client .rl-badge,
.rl-client .status-badge,
.rl-client .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--rl-radius-full);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.rl-client .status-badge.active,
.rl-client .rl-badge--success,
.rl-client .badge-success {
    background: var(--rl-success-bg);
    color: var(--rl-success);
}

.rl-client .status-badge.trialing,
.rl-client .rl-badge--warning,
.rl-client .badge-warning {
    background: var(--rl-warning-bg);
    color: var(--rl-warning);
    margin-top: -30px;
    margin-left: 50px !important;
}

.rl-client .status-badge.pending,
.rl-client .rl-badge--pending {
    background: var(--rl-bg-container);
    color: var(--rl-info);
}

.rl-client .status-badge.past_due,
.rl-client .status-badge.unpaid,
.rl-client .rl-badge--failed,
.rl-client .badge-danger {
    background: #fde8e8;
    color: var(--rl-error);
}

.rl-client .status-badge.canceled,
.rl-client .status-badge.no-subscription,
.rl-client .rl-badge--inactive {
    background: #f0eeef;
    color: var(--rl-text-muted);
}

/* Payment / fulfillment badges */
.rl-client .badge-payment,
.rl-client .badge-fulfillment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--rl-radius-full);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.rl-client .badge-payment.paid {
    background: var(--rl-success-bg);
    color: var(--rl-success);
}
.rl-client .badge-payment.pending {
    background: var(--rl-warning-bg);
    color: var(--rl-warning);
}
.rl-client .badge-payment.refunded {
    background: #f0eeef;
    color: var(--rl-text-muted);
}
.rl-client .badge-payment.partially_refunded {
    background: #fde8e8;
    color: var(--rl-error);
}
.rl-client .badge-fulfillment.fulfilled {
    background: var(--rl-bg-container);
    color: var(--rl-info);
}
.rl-client .badge-fulfillment.partial {
    background: var(--rl-warning-bg);
    color: var(--rl-warning);
}
.rl-client .badge-fulfillment.unfulfilled {
    background: #f0eeef;
    color: var(--rl-text-muted);
}
.rl-client .badge-fulfillment.restocked {
    background: #fde8e8;
    color: var(--rl-error);
}

/* ─── Alerts & Banners ─── */
.rl-client .rl-alert {
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-md) var(--rl-space-lg);
    margin-bottom: var(--rl-space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rl-space-md);
    border: 1px solid transparent;
}

.rl-client .rl-alert--error,
.rl-client .setup-alert {
    background: #fde8e8;
    border-color: #f5c2c2;
    color: var(--rl-error);
    box-shadow: none;
}

.rl-client .setup-alert::before,
.rl-client .rl-alert::before {
    display: none;
}

.rl-client .setup-alert h5,
.rl-client .rl-alert h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: inherit;
}

.rl-client .setup-alert p,
.rl-client .rl-alert p {
    margin: 0;
    font-size: 14px;
    opacity: 1;
}

.rl-client .setup-alert .btn,
.rl-client .rl-alert .btn {
    background: var(--rl-error);
    color: var(--rl-white);
    border: none;
    border-radius: var(--rl-radius);
    font-weight: 600;
    padding: 8px 20px;
}

.rl-client .setup-alert.info,
.rl-client .rl-alert--info {
    background: var(--rl-info-bg);
    border-color: #c5d9f7;
    color: var(--rl-info);
}

.rl-client .setup-alert.info .btn,
.rl-client .rl-alert--info .btn {
    background: var(--rl-info);
    color: var(--rl-white);
}

.rl-client .setup-alert.warning,
.rl-client .rl-alert--warning {
    background: var(--rl-warning-bg);
    border-color: #f0d78c;
    color: var(--rl-warning);
}

.rl-client .setup-alert.warning .btn,
.rl-client .rl-alert--warning .btn {
    background: var(--rl-black);
    color: var(--rl-white);
}

.rl-client .alert-success {
    background: var(--rl-success-bg);
    border-color: #b8e0cc;
    color: var(--rl-success);
    border-radius: var(--rl-radius);
}

.rl-client .alert-danger {
    background: #fde8e8;
    border-color: #f5c2c2;
    color: var(--rl-error);
    border-radius: var(--rl-radius);
}

.rl-client .alert-warning {
    background: var(--rl-warning-bg);
    border-color: #f0d78c;
    color: var(--rl-warning);
    border-radius: var(--rl-radius);
}

/* ─── Dashboard ─── */
.rl-client .welcome-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    color: var(--rl-text-primary);
    margin-bottom: var(--rl-space-lg);
    box-shadow: none;
}

.rl-client .welcome-card::before {
    display: none;
}

.rl-client .welcome-card h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: var(--rl-space-xs);
    color: var(--rl-text-primary);
}

.rl-client .welcome-card p {
    font-size: 16px;
    color: var(--rl-text-secondary);
    margin: 0;
}

.rl-client .welcome-card h4 i {
    color: var(--rl-cta);
}

.rl-client .stats-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    color: var(--rl-text-primary);
    margin-bottom: var(--rl-space-lg);
    box-shadow: none;
    transition: box-shadow 0.2s ease;
}

.rl-client .stats-card::before {
    display: none;
}

.rl-client .stats-card:hover {
    box-shadow: var(--rl-shadow-hover);
    transform: none;
}

.rl-client .stats-card.primary {
    border-left: 4px solid var(--rl-cta);
}

.rl-client .stats-card.success {
    border-left: 4px solid var(--rl-success);
}

.rl-client .stats-card.info {
    border-left: 4px solid var(--rl-info);
}

.rl-client .stats-card.warning {
    border-left: 4px solid var(--rl-warning);
}

.rl-client .stats-icon {
    font-size: 24px;
    margin-bottom: var(--rl-space-sm);
    color: var(--rl-text-muted);
}

.rl-client .stats-card.primary .stats-icon {
    color: var(--rl-cta);
}
.rl-client .stats-card.success .stats-icon {
    color: var(--rl-success);
}
.rl-client .stats-card.info .stats-icon {
    color: var(--rl-info);
}
.rl-client .stats-card.warning .stats-icon {
    color: var(--rl-warning);
}

.rl-client .stats-number {
    font-size: 28px;
    font-weight: 700;
    color: var(--rl-text-primary);
    margin-bottom: 4px;
}

.rl-client .stats-number.stats-value-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.rl-client .stats-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rl-text-muted);
    opacity: 1;
}

/* ─── Metric cards (dashboard) ─── */
.rl-client .rl-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rl-space-lg);
    margin-bottom: var(--rl-space-lg);
}

.rl-client .rl-metric-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    height: 100%;
    min-height: 88px;
}

.rl-client .rl-metric-card:hover {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
    border-color: #dde3ea;
    transform: none;
}

.rl-client .rl-metric-card__icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}

.rl-client .rl-metric-card--primary .rl-metric-card__icon-wrap {
    background: rgba(252, 157, 48, 0.14);
    color: var(--rl-cta);
}

.rl-client .rl-metric-card--success .rl-metric-card__icon-wrap {
    background: rgba(34, 139, 87, 0.12);
    color: var(--rl-success);
}

.rl-client .rl-metric-card--info .rl-metric-card__icon-wrap {
    background: rgba(37, 99, 235, 0.12);
    color: var(--rl-info);
}

.rl-client .rl-metric-card--warning .rl-metric-card__icon-wrap {
    background: rgba(180, 130, 20, 0.14);
    color: var(--rl-warning);
}

.rl-client .rl-metric-card--neutral .rl-metric-card__icon-wrap {
    background: var(--rl-bg-main);
    color: var(--rl-text-secondary);
    border: 1px solid var(--rl-border);
}

.rl-client .rl-metric-card__body {
    min-width: 0;
    flex: 1;
}

.rl-client .rl-metric-card__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--rl-text-primary);
    line-height: 1.25;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

.rl-client .rl-metric-card__value.rl-metric-card__value--text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
}

.rl-client .rl-metric-card__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rl-text-muted);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.3;
}

@media (max-width: 991px) {
    .rl-client .rl-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .rl-client .rl-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.rl-client .dashboard-card,
.rl-client .profile-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    box-shadow: none;
    margin-bottom: var(--rl-space-lg);
}

.rl-client .dashboard-card:hover,
.rl-client .profile-card:hover {
    box-shadow: none;
    transform: none;
}

.rl-client .dashboard-card h3,
.rl-client .profile-card h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--rl-text-primary);
    border-bottom: 1px solid var(--rl-border);
    padding-bottom: var(--rl-space-md);
    margin-bottom: var(--rl-space-md);
}

.rl-client .dashboard-card h3 i,
.rl-client .profile-card h5 i {
    color: var(--rl-cta);
}

.rl-client .info-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid var(--rl-border);
}

.rl-client .info-row:hover {
    background: var(--rl-bg-main);
    padding-left: 8px;
    border-radius: var(--rl-radius-sm);
}

.rl-client .info-label {
    font-weight: 600;
    color: var(--rl-text-muted);
    width: 160px;
    font-size: 14px;
}

.rl-client .info-value {
    color: var(--rl-text-primary);
    font-size: 14px;
    flex: 1;
}

.rl-client .subscription-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    margin-bottom: var(--rl-space-md);
    box-shadow: none;
    border-left: 4px solid var(--rl-border);
}

.rl-client .subscription-card::before {
    display: none;
}

.rl-client .subscription-card.shopify {
    border-left-color: var(--rl-cta);
}

.rl-client .subscription-card.wordpress {
    border-left-color: var(--rl-info);
}

.rl-client .subscription-card:hover {
    box-shadow: var(--rl-shadow-hover);
    transform: none;
}

.rl-client .subscription-card h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--rl-text-primary);
}

.rl-client .subscription-info-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rl-text-muted);
}

.rl-client .subscription-info-value {
    font-size: 15px;
    color: var(--rl-text-primary);
    font-weight: 600;
}

.rl-client .trial-info {
    margin-top: var(--rl-space-md);
    padding: var(--rl-space-md);
    background: var(--rl-warning-bg);
    border-radius: var(--rl-radius);
    border-left: 4px solid var(--rl-cta);
}

.rl-client .trial-countdown-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-left: 4px solid var(--rl-cta);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    color: var(--rl-text-primary);
    box-shadow: none;
}

.rl-client .trial-countdown-card::before {
    display: none;
}

.rl-client .trial-countdown-header {
    font-size: 18px;
    font-weight: 600;
    color: var(--rl-text-primary);
}

.rl-client .trial-countdown-header i {
    color: var(--rl-cta);
}

.rl-client .countdown-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--rl-text-primary);
}

.rl-client .countdown-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rl-text-muted);
}

.rl-client .trial-countdown-end {
    font-size: 14px;
    color: var(--rl-text-secondary);
}

.rl-client .empty-state {
    text-align: center;
    padding: var(--rl-space-2xl) var(--rl-space-lg);
    color: var(--rl-text-muted);
}

.rl-client .empty-state i {
    font-size: 48px;
    margin-bottom: var(--rl-space-md);
    color: var(--rl-outline-variant);
    opacity: 1;
}

.rl-client .empty-state a {
    color: var(--rl-cta);
    font-weight: 600;
}

/* ─── Orders & Data Pages ─── */
.rl-client .orders-page .card,
.rl-client .orders-filters {
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    background: var(--rl-bg-surface);
    box-shadow: none;
}

.rl-client .orders-filters {
    margin-bottom: var(--rl-space-lg);
    padding: var(--rl-space-lg);
}

.rl-client .orders-filters .filters-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rl-space-md);
}

.rl-client .orders-filters .filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--rl-space-xs);
    min-width: 170px;
}

.rl-client .orders-filters .filter-field label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rl-text-muted);
}

.rl-client .orders-filters .filter-field select {
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    background: var(--rl-bg-surface);
    color: var(--rl-text-primary);
    padding: 8px 12px;
    font-size: 14px;
    height: 40px;
}

.rl-client .orders-filters .filter-field select:focus {
    outline: none;
    border-color: var(--rl-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.rl-client .orders-filters .filter-actions {
    display: flex;
    align-items: center;
    gap: var(--rl-space-md);
    margin-left: auto;
}

.rl-client .orders-filters .btn-filter {
    background: var(--rl-black);
    border: 1px solid var(--rl-black);
    color: var(--rl-white);
    border-radius: var(--rl-radius);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 20px;
    height: 40px;
    cursor: pointer;
}

.rl-client .orders-filters .btn-filter:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

.rl-client .orders-filters .btn-reset {
    color: var(--rl-cta);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.rl-client .orders-filters .btn-reset:hover {
    color: var(--rl-cta-hover);
    text-decoration: underline;
}

.rl-client .orders-card {
    overflow: hidden;
}

.rl-client .orders-table thead th {
    background: var(--rl-bg-main);
    color: var(--rl-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--rl-border);
    padding: var(--rl-space-sm) var(--rl-space-md);
    white-space: nowrap;
}

.rl-client .orders-table tbody td {
    border-bottom: 1px solid var(--rl-border);
    color: var(--rl-text-secondary);
    padding: var(--rl-space-sm) var(--rl-space-md);
    vertical-align: middle;
}

.rl-client .orders-table tbody tr:last-child td {
    border-bottom: none;
}

.rl-client .orders-table tbody tr:hover {
    background: var(--rl-bg-main);
}

.rl-client .order-name {
    font-weight: 600;
    color: var(--rl-text-primary);
    text-decoration: none;
}

.rl-client a.order-name:hover {
    color: var(--rl-cta);
    text-decoration: underline;
}

.rl-client .orders-empty {
    text-align: center;
    padding: var(--rl-space-2xl) var(--rl-space-lg);
    color: var(--rl-text-muted);
}

.rl-client .orders-empty .icon-wrap {
    font-size: 40px;
    margin-bottom: var(--rl-space-md);
    color: var(--rl-outline-variant);
}

.rl-client .orders-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rl-space-md);
    background: var(--rl-bg-main);
    border-top: 1px solid var(--rl-border);
    padding: var(--rl-space-md) var(--rl-space-lg);
}

.rl-client .orders-pager {
    display: flex;
    align-items: center;
    gap: var(--rl-space-xs);
}

.rl-client .orders-pager .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--rl-radius);
    border: 1px solid var(--rl-border);
    background: var(--rl-bg-surface);
    color: var(--rl-text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.rl-client .orders-pager .page-btn:hover:not(.disabled):not(.active) {
    border-color: var(--rl-black);
    color: var(--rl-text-primary);
}

.rl-client .orders-pager .page-btn.active {
    background: var(--rl-black);
    border-color: var(--rl-black);
    color: var(--rl-white);
}

.rl-client .orders-pager .page-btn.disabled {
    opacity: 0.5;
    cursor: default;
}

.rl-client .orders-pager .page-ellipsis {
    color: var(--rl-text-muted);
    padding: 0 4px;
}

.rl-client .orders-error {
    background: #fde8e8;
    color: var(--rl-error);
    border: 1px solid #f5c2c2;
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-md) var(--rl-space-lg);
    margin-bottom: var(--rl-space-md);
}

@media (max-width: 768px) {
    .rl-client .orders-filters .filters-body {
        flex-direction: column;
        align-items: stretch;
    }

    .rl-client .orders-filters .filter-field,
    .rl-client .orders-filters .filter-actions {
        width: 100%;
        margin-left: 0;
    }
}

/* ─── Auth Pages ─── */
.rl-auth {
    background: var(--rl-bg-main);
    min-height: 100vh;
}

.rl-auth .rl-auth-header {
    background: var(--rl-bg-surface);
    border-bottom: 1px solid var(--rl-border);
    padding: var(--rl-space-md) 0;
}

.rl-auth .rl-auth-header .container {
    max-width: var(--rl-max-width);
    padding-left: var(--rl-space-xl);
    padding-right: var(--rl-space-xl);
}

.rl-auth .login-body,
.rl-auth .main-wrapper.login-body {
    background: var(--rl-bg-main);
}

.rl-auth .loginbox {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-xl);
    overflow: hidden;
    box-shadow: none;
    max-width: 900px;
    margin: 0 auto;
}

.rl-auth .login-left {
    background: var(--rl-bg-container);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rl-space-2xl);
}

.rl-auth .login-right {
    padding: var(--rl-space-2xl);
}

.rl-auth .login-right-wrap h1 {
    font-size: 30px;
    font-weight: 600;
    color: var(--rl-text-primary);
    margin-bottom: var(--rl-space-sm);
}

.rl-auth .account-subtitle {
    color: var(--rl-text-secondary);
    font-size: 16px;
    margin-bottom: var(--rl-space-lg);
}

.rl-auth .rl-auth-footer {
    background: var(--rl-bg-surface);
    border-top: 1px solid var(--rl-border);
    padding: var(--rl-space-lg) 0;
    margin-top: var(--rl-space-2xl);
}

.rl-auth .rl-auth-footer a {
    color: var(--rl-text-secondary);
    text-decoration: none;
}

.rl-auth .rl-auth-footer a:hover {
    color: var(--rl-text-primary);
}

.rl-auth a:not(.btn) {
    color: var(--rl-cta);
    font-weight: 500;
}

.rl-auth a:not(.btn):hover {
    color: var(--rl-cta-hover);
}

/* ─── App setup wizard ─── */
.rl-client .rl-setup {
    max-width: 920px;
    margin: 0 auto;
    padding-bottom: var(--rl-space-xl);
}

.rl-client .rl-setup-hero {
    text-align: center;
    margin-bottom: var(--rl-space-lg);
    padding: var(--rl-space-xl) var(--rl-space-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-xl);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

.rl-client .rl-setup-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--rl-space-md);
    border-radius: var(--rl-radius-lg);
    background: rgba(252, 157, 48, 0.12);
    color: var(--rl-cta);
    font-size: 24px;
}

.rl-client .rl-setup-hero h1 {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
    color: var(--rl-text-primary);
    line-height: 1.25;
}

.rl-client .rl-setup-hero p {
    margin: 0 auto;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--rl-text-muted);
}

.rl-client .rl-setup-hero__actions {
    margin-top: var(--rl-space-lg);
}

.rl-client .rl-setup-skip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rl-text-secondary) !important;
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rl-client .rl-setup-skip:hover {
    background: var(--rl-nav-hover-bg);
    border-color: var(--rl-outline-variant);
    color: var(--rl-text-primary) !important;
}

.rl-client .rl-setup-progress {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-xl);
    padding: var(--rl-space-lg) var(--rl-space-md);
    margin-bottom: var(--rl-space-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.rl-client .rl-setup-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: 8px;
}

.rl-client .rl-setup-steps::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--rl-border);
    z-index: 1;
}

.rl-client .rl-setup-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.rl-client .rl-setup-step__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rl-bg-surface);
    border: 2px solid var(--rl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rl-text-muted);
    transition: all 0.22s ease;
}

.rl-client .rl-setup-step__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--rl-text-muted);
    line-height: 1.35;
    padding: 0 4px;
}

.rl-client .rl-setup-step.active .rl-setup-step__circle {
    background: var(--rl-cta);
    border-color: var(--rl-cta);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(252, 157, 48, 0.18);
}

.rl-client .rl-setup-step.active .rl-setup-step__label {
    color: var(--rl-cta);
    font-weight: 600;
}

.rl-client .rl-setup-step.completed .rl-setup-step__circle {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
    font-size: 0;
}

.rl-client .rl-setup-step.completed .rl-setup-step__circle::after {
    content: '✓';
    font-size: 16px;
    line-height: 1;
}

.rl-client .rl-setup-step.completed .rl-setup-step__label {
    color: #15803d;
}

.rl-client .rl-setup-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-xl);
    padding: var(--rl-space-lg);
    margin-bottom: var(--rl-space-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.rl-client .rl-setup-card__title {
    margin: 0 0 var(--rl-space-lg);
    padding-bottom: var(--rl-space-md);
    border-bottom: 1px solid var(--rl-border);
    font-size: 18px;
    font-weight: 600;
    color: var(--rl-text-primary);
}

.rl-client .rl-setup-step-content {
    display: none;
}

.rl-client .rl-setup-step-content.active {
    display: block;
    animation: rlSetupFadeIn 0.28s ease;
}

@keyframes rlSetupFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.rl-client .rl-setup-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--rl-space-md);
    margin-top: var(--rl-space-lg);
    padding-top: var(--rl-space-lg);
    border-top: 1px solid var(--rl-border);
}

.rl-client .rl-setup-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--rl-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.rl-client .rl-setup-nav__btn--prev {
    background: var(--rl-bg-surface);
    border-color: var(--rl-border);
    color: var(--rl-text-secondary);
}

.rl-client .rl-setup-nav__btn--prev:hover:not(:disabled) {
    background: var(--rl-nav-hover-bg);
    border-color: var(--rl-outline-variant);
    color: var(--rl-text-primary);
}

.rl-client .rl-setup-nav__btn--prev:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.rl-client .rl-setup-nav__btn--next,
.rl-client .rl-setup-nav__btn--submit {
    background: var(--rl-cta);
    border-color: var(--rl-cta);
    color: #fff;
}

.rl-client .rl-setup-nav__btn--next:hover,
.rl-client .rl-setup-nav__btn--submit:hover {
    background: var(--rl-cta-hover);
    border-color: var(--rl-cta-hover);
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .rl-setup .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--rl-text-secondary);
}

.rl-client .rl-setup .is-invalid {
    border-color: #dc3545 !important;
}

.rl-client .rl-setup .url-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

@media (max-width: 767px) {
    .rl-client .rl-setup-hero h1 {
        font-size: 22px;
    }

    .rl-client .rl-setup-steps {
        flex-wrap: wrap;
        gap: 12px;
    }

    .rl-client .rl-setup-steps::before {
        display: none;
    }

    .rl-client .rl-setup-step {
        flex: 1 1 45%;
    }

    .rl-client .rl-setup-nav {
        flex-direction: column-reverse;
    }

    .rl-client .rl-setup-nav__btn {
        width: 100%;
    }
}

/* Legacy auth setup aliases */
.rl-auth .setup-container,
.rl-client .rl-setup {
    max-width: 920px;
}

.rl-auth .setup-header,
.rl-client .rl-setup-hero {
    text-align: center;
}

.rl-auth .setup-step-card,
.rl-client .rl-setup-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
}

/* ─── Utilities ─── */
.rl-client .text-muted {
    color: var(--rl-text-muted) !important;
}

.rl-client .rl-text-secondary {
    color: var(--rl-text-secondary);
}

.rl-client .rl-divider {
    border: none;
    border-top: 1px solid var(--rl-border);
    margin: var(--rl-space-lg) 0;
}

.rl-client .rl-empty-icon {
    font-size: 48px;
    color: var(--rl-outline-variant);
    margin-bottom: var(--rl-space-md);
}

/* Pagination vendor override */
.rl-client .pagination .page-link {
    border-color: var(--rl-border);
    color: var(--rl-text-secondary);
    border-radius: var(--rl-radius);
    margin: 0 2px;
}

.rl-client .pagination .page-item.active .page-link {
    background: var(--rl-black);
    border-color: var(--rl-black);
}

/* Modal */
.rl-client .modal-content {
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .modal-header {
    border-bottom: 1px solid var(--rl-border);
    padding: var(--rl-space-lg);
}

.rl-client .modal-body {
    padding: var(--rl-space-lg);
}

.rl-client .modal-footer {
    border-top: 1px solid var(--rl-border);
    padding: var(--rl-space-md) var(--rl-space-lg);
}

/* Responsive table wrapper */
.rl-client .table-responsive {
    border-radius: var(--rl-radius-md);
}

@media (max-width: 991px) {
    .rl-auth .loginbox {
        flex-direction: column;
    }

    .rl-auth .login-left {
        padding: var(--rl-space-lg);
    }

    .rl-client .subscription-info {
        grid-template-columns: 1fr;
    }

    .rl-client .info-label {
        width: 120px;
    }

    .rl-client .setup-alert,
    .rl-client .rl-alert {
        flex-direction: column;
        text-align: center;
    }

    .rl-client .setup-alert .btn,
    .rl-client .rl-alert .btn {
        width: 100%;
    }
}

.rl-client .subscription-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

/* ─── App Selection & Payment ─── */
.rl-client .app-selection-container,
.rl-client .payment-container,
.rl-client .payment-required-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--rl-space-xl);
}

.rl-client .selection-header,
.rl-client .payment-header {
    text-align: center;
    margin-bottom: var(--rl-space-xl);
}

.rl-client .selection-header h2,
.rl-client .payment-header h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--rl-text-primary);
    margin-bottom: var(--rl-space-sm);
}

.rl-client .selection-header p,
.rl-client .payment-header p {
    color: var(--rl-text-secondary);
    font-size: 16px;
}

.rl-client .plan-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--rl-space-lg);
    justify-content: center;
    border-bottom: 1px solid var(--rl-border);
}

.rl-client .plan-tab {
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    color: var(--rl-text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
    margin-bottom: -1px;
}

.rl-client .plan-tab:hover {
    color: var(--rl-text-primary);
}

.rl-client .plan-tab.active {
    color: var(--rl-text-primary);
    border-bottom-color: var(--rl-black);
}

.rl-client .plan-tab.shopify.active {
    border-bottom-color: var(--rl-cta);
    color: var(--rl-cta);
}

.rl-client .plan-tab.wordpress.active {
    border-bottom-color: var(--rl-info);
    color: var(--rl-info);
}

.rl-client .tab-content-panel {
    display: none;
}

.rl-client .tab-content-panel.active {
    display: block;
}

.rl-client .app-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rl-space-lg);
    margin-top: var(--rl-space-lg);
}

.rl-client .app-option-card {
    background: var(--rl-bg-surface);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    text-align: center;
    border: 2px solid var(--rl-border);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
    cursor: pointer;
}

.rl-client .app-option-card:hover {
    border-color: var(--rl-outline-variant);
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .app-option-card.selected {
    border-color: var(--rl-black);
}

.rl-client .app-option-card.shopify {
    border-left: 4px solid var(--rl-cta);
}

.rl-client .app-option-card.wordpress {
    border-left: 4px solid var(--rl-info);
}

.rl-client .app-icon {
    font-size: 40px;
    margin-bottom: var(--rl-space-md);
    color: var(--rl-text-muted);
}

.rl-client .app-option-card.shopify .app-icon {
    color: var(--rl-cta);
}
.rl-client .app-option-card.wordpress .app-icon {
    color: var(--rl-info);
}

.rl-client .app-option-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--rl-text-primary);
    margin-bottom: var(--rl-space-sm);
}

.rl-client .price-info {
    background: var(--rl-bg-main);
    border-radius: var(--rl-radius);
    padding: var(--rl-space-md);
    margin: var(--rl-space-md) 0;
}

.rl-client .price-info .upfront-cost {
    font-size: 24px;
    font-weight: 700;
    color: var(--rl-text-primary);
    margin-bottom: 4px;
}

.rl-client .price-info .monthly-price {
    font-size: 13px;
    color: var(--rl-text-secondary);
}

.rl-client .trial-badge {
    background: var(--rl-success-bg);
    color: var(--rl-success);
    padding: 4px 12px;
    border-radius: var(--rl-radius-full);
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    margin-top: var(--rl-space-sm);
}

.rl-client .btn-select {
    display: inline-block;
    width: 100%;
    padding: 12px 16px;
    background: var(--rl-black);
    color: var(--rl-white);
    border: none;
    border-radius: var(--rl-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--rl-space-md);
    text-align: center;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.rl-client .app-option-card.shopify .btn-select {
    background: var(--rl-cta);
}
.rl-client .app-option-card.wordpress .btn-select {
    background: var(--rl-info);
}

.rl-client .btn-select:hover {
    color: var(--rl-white);
    text-decoration: none;
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .features-list {
    text-align: left;
    margin: var(--rl-space-md) 0;
    padding: 0;
    list-style: none;
}

.rl-client .features-list li {
    padding: 6px 0;
    color: var(--rl-text-secondary);
    font-size: 13px;
    position: relative;
    padding-left: 22px;
}

.rl-client .features-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--rl-success);
    font-weight: bold;
}

.rl-client .no-plans {
    text-align: center;
    padding: var(--rl-space-2xl) var(--rl-space-lg);
    color: var(--rl-text-muted);
}

.rl-client .no-plans i {
    font-size: 48px;
    margin-bottom: var(--rl-space-md);
    color: var(--rl-outline-variant);
}

.rl-client .payment-card,
.rl-client .payment-summary-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    margin-bottom: var(--rl-space-lg);
}

.rl-client .payment-required-icon {
    font-size: 48px;
    color: var(--rl-cta);
    margin-bottom: var(--rl-space-md);
}

/* ─── Notifications ─── */
.rl-client .notification-form-card,
.rl-client .notification-history-card {
    background: var(--rl-bg-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-lg);
    padding: var(--rl-space-lg);
    margin-bottom: var(--rl-space-lg);
    box-shadow: none;
}

.rl-client .btn-send-notification {
    background: var(--rl-cta);
    color: var(--rl-white);
    border: none;
    padding: 12px 30px;
    border-radius: var(--rl-radius);
    font-weight: 600;
}

.rl-client .btn-send-notification:hover {
    background: var(--rl-cta-hover);
    color: var(--rl-white);
    box-shadow: var(--rl-shadow-hover);
}

.rl-client .notification-item {
    padding: var(--rl-space-md);
    border-bottom: 1px solid var(--rl-border);
    transition: background 0.15s ease;
}

.rl-client .notification-item:hover {
    background: var(--rl-bg-main);
}

.rl-client .notification-item:last-child {
    border-bottom: none;
}

.rl-client .notification-title {
    font-weight: 600;
    color: var(--rl-text-primary);
    margin-bottom: 4px;
}

.rl-client .notification-body {
    color: var(--rl-text-secondary);
    font-size: 14px;
}

.rl-client .notification-meta {
    font-size: 12px;
    color: var(--rl-text-muted);
    margin-top: var(--rl-space-sm);
}

.rl-client .setup-alert .app-list {
    margin-top: var(--rl-space-md);
    padding-top: var(--rl-space-md);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
}

.rl-client .setup-alert .app-item {
    padding: var(--rl-space-sm) var(--rl-space-md);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--rl-radius);
    margin-bottom: var(--rl-space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 992px) {
    .rl-client .app-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .rl-client .app-options {
        grid-template-columns: 1fr;
    }

    .rl-client .app-selection-container,
    .rl-client .payment-container,
    .rl-client .payment-required-container {
        padding: var(--rl-space-md);
    }
}

@media (max-width: 767px) {
    .rl-client .trial-countdown-card {
        flex-direction: column;
        gap: var(--rl-space-md);
    }

    .rl-client .stats-card {
        margin-bottom: var(--rl-space-md);
    }
}