@import "details_css.css";

:root {
    --ch-bg: #f8fafc;
    --ch-sidebar-w: 260px;
    --ch-header-h: 70px;
    --ch-border: 1px dashed var(--ch-border-dashed, #cbd5e1);
    --ch-border-dashed: #cbd5e1;
    --ch-primary: #F5A623;
    --ch-primary-soft: #fffbeb;
    --ch-text-dark: #0f172a;
    --ch-text-main: #334155;
    --ch-text-muted: #64748b;
    --ch-text-nav: #94a3b8;
    --ch-gap: 24px;
    --ch-radius-card: 12px;
    --ch-radius-btn: 8px;
    --ch-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
@import " details_css.css\;
:root {
    --ch-bg: #f8fafc;
    --ch-sidebar-w: 260px;
    --ch-header-h: 70px;
    --ch-border: 1px dashed var(--ch-border-dashed, #cbd5e1);
    --ch-border-dashed: #cbd5e1;
    --ch-primary: #F5A623;
    --ch-primary-soft: #fffbeb;
    --ch-text-dark: #0f172a;
    --ch-text-main: #334155;
    --ch-text-muted: #64748b;
    --ch-text-nav: #94a3b8;
    --ch-gap: 24px;
    --ch-radius-card: 12px;
    --ch-radius-btn: 8px;
    --ch-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

body { 
    background: var(--ch-bg) !important; 
    color: var(--ch-text-main); 
    margin: 0; font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* LAYOUT */
.ch-shell { display: flex; min-height: 100vh; }
.ch-sidebar { 
    width: var(--ch-sidebar-w); background: #fff; border-right: 1px solid var(--ch-border); 
    position: fixed; height: 100vh; z-index: 1050; display: flex; flex-direction: column;
}
.ch-main { flex: 1; margin-left: var(--ch-sidebar-w); display: flex; flex-direction: column; min-width: 0; }

/* SIDEBAR REFINEMENT */
.ch-sidebar-brand { height: var(--ch-header-h); display: flex; align-items: center; padding: 0 24px; }
.ch-sidebar-search { padding: 0 16px 20px; position: relative; }
.ch-sidebar-search input { 
    width: 100%; height: 40px; border-radius: var(--ch-radius-btn); border: 1px dashed var(--ch-border-dashed, #cbd5e1); 
    padding: 0 12px 0 38px; font-size: 13px; outline: none; background: #fff;
    transition: border-color 0.2s;
}
.ch-sidebar-search input:focus {
    border-color: var(--ch-primary);
}
.ch-sidebar-search .lucide { position: absolute; left: 28px; top: 12px; width: 16px; height: 16px; color: var(--ch-text-nav); }

.ch-nav-group-title { font-size: 11px; font-weight: 700; color: var(--ch-text-nav); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 24px; margin: 25px 0 12px; display: block; }

/* FLOATING PILL NAV */
.ch-nav-item { 
    display: flex !important; align-items: center !important; padding: 10px 16px !important; margin: 0 12px 4px !important;
    color: var(--ch-text-muted) !important; text-decoration: none !important; border-radius: var(--ch-radius-btn) !important; transition: all 0.2s; 
}
.ch-nav-item:hover { background: #f8fafc !important; color: var(--ch-primary) !important; }
.ch-nav-item.active { background: var(--ch-primary-soft) !important; color: #b45309 !important; }
.ch-nav-item.active .ch-nav-title { color: #b45309 !important; }
.ch-nav-item.active .ch-nav-subtitle { color: #f59e0b !important; }
.ch-nav-item.active .lucide { color: #b45309 !important; stroke: #b45309 !important; }

.ch-nav-item .lucide { margin-right: 14px; width: 18px; height: 18px; stroke-width: 2px; }
.ch-nav-info { line-height: 1.2; }
.ch-nav-title { font-size: 13px; font-weight: 600; color: var(--ch-text-dark); display: block; }
.ch-nav-subtitle { font-size: 11px; color: var(--ch-text-muted); }

.ch-sidebar-footer { margin-top: auto; padding: 24px; border-top: 1px solid var(--ch-border); }
.ch-signout-btn { 
    border: 1px dashed var(--ch-border-dashed, #cbd5e1); height: 44px; display: flex; align-items: center; 
    justify-content: center; border-radius: var(--ch-radius-btn); color: var(--ch-text-main); 
    font-weight: 600; text-decoration: none !important; transition: all 0.2s; gap: 8px;
}
.ch-signout-btn:hover { background: #f8fafc; border-color: var(--ch-text-muted); }

/* HEADER AREA */
.ch-header { 
    height: var(--ch-header-h); background: #fff; border-bottom: 1px solid var(--ch-border);
    padding: 0 32px; display: flex; align-items: center; justify-content: space-between; 
    position: sticky; top: 0; z-index: 1000;
}
.ch-header-title { font-size: 18px; font-weight: 700; color: var(--ch-text-dark); margin: 0; }

.ch-header .ch-icon-zone { 
    width: 40px !important; height: 40px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
    color: var(--ch-text-muted) !important; background: transparent !important; border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important; transition: background 0.2s !important; cursor: pointer !important;
}
.ch-header .ch-icon-zone:hover { background: #f1f5f9 !important; color: var(--ch-primary) !important; }

/* BELL WIGGLE ANIMATION */
@keyframes ch-wiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-15deg); }
    30% { transform: rotate(12deg); }
    45% { transform: rotate(-10deg); }
    60% { transform: rotate(8deg); }
    75% { transform: rotate(-4deg); }
}
.ch-bell-wiggle:hover .lucide {
    animation: ch-wiggle 0.6s ease-in-out;
    transform-origin: top center;
}

/* KPI GRID FIXED */
.ch-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr) !important; gap: var(--ch-gap); margin-bottom: var(--ch-gap); width: 100%; }
.ch-kpi-card { 
    border: 1px dashed var(--ch-border-dashed, #cbd5e1); border-radius: var(--ch-radius-card); 
    padding: 20px 24px; background: #fff; display: flex; flex-direction: column; 
    justify-content: center; height: 100%; transition: all 0.2s ease-in-out;
}
.ch-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    border-style: solid;
}
.ch-kpi-card.ch-kpi-blue:hover { border-color: #F5A623; background: #fffbeb; }
.ch-kpi-card.ch-kpi-green:hover { border-color: #10b981; background: #f0fdf4; }
.ch-kpi-card.ch-kpi-yellow:hover { border-color: #f59e0b; background: #fefce8; }
.ch-kpi-card.ch-kpi-pink:hover { border-color: #ec4899; background: #fdf2f8; }

.ch-kpi-val { font-size: 28px; font-weight: 700; color: var(--ch-text-dark); margin-bottom: 4px; }
.ch-kpi-lbl { font-size: 11px; font-weight: 700; color: var(--ch-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* CONTENT BLOCKS FIXED */
.ch-content-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ch-gap); align-items: stretch; width: 100%; }
.ch-span-8 { grid-column: span 8; display: flex; flex-direction: column; }
.ch-span-4 { grid-column: span 4; display: flex; flex-direction: column; }

.ch-card { background: #fff; border: 1px dashed var(--ch-border-dashed, #cbd5e1); border-radius: var(--ch-radius-card); padding: 24px; display: flex; flex-direction: column; flex: 1; min-height: 100%; }
.ch-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ch-card-title { font-size: 16px; font-weight: 600; color: var(--ch-text-dark); margin: 0; }

/* TABLE REFINEMENT */
.table thead th { 
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; 
    color: var(--ch-text-nav); border-bottom: 1px solid var(--ch-border) !important; padding: 12px 0 !important;
}

/* ALERT CENTER & DROPDOWNS */
.ch-popover { 
    width: 320px; border-radius: 16px; border: 1px dashed var(--ch-border-dashed, #cbd5e1); 
    box-shadow: var(--ch-shadow-lg) !important; padding: 0; overflow: hidden; margin-top: 15px; background: #fff;
}
.ch-popover-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--ch-border); font-weight: 700; font-size: 15px; color: var(--ch-text-dark); }
.ch-popover-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 16px !important; background: #fcfdfe !important; }

/* BENTO STAT CARDS (COSMODOCS STYLE) */
.ch-popover-stat-card {
    display: flex !important;
    align-items: center !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.ch-popover-stat-card:hover {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    transform: translateY(-1px) !important;
}
.ch-popover-stat-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fffbeb;
    color: #F5A623;
    flex-shrink: 0 !important;
}
.ch-popover-stat-icon .lucide {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2.5px !important;
}
.ch-popover-stat-lbl {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
}
.ch-popover-stat-val {
    margin-left: auto !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #F5A623 !important;
}

/* ALERTS LIST (COSMODOCS STYLE) */
.ch-popover-alerts-list {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 12px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
}
.ch-popover-alert-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 10px !important;
    gap: 12px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    margin-bottom: 4px !important;
}
.ch-popover-alert-item:hover {
    background: #f8fafc !important;
}
.ch-popover-alert-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eff6ff !important;
    color: #F5A623 !important;
    flex-shrink: 0 !important;
}
.ch-popover-alert-avatar.danger { background: #fef2f2 !important; color: #ef4444 !important; }
.ch-popover-alert-avatar.warning { background: #fffbeb !important; color: #d97706 !important; }

.ch-popover-alert-avatar .lucide {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2px !important;
}
.ch-popover-alert-body {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}
.ch-popover-alert-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ch-text-dark) !important;
    margin-bottom: 2px !important;
}
.ch-popover-alert-text {
    font-size: 11px !important;
    color: var(--ch-text-muted) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
}

/* DROPDOWN USER MENU */
.ch-popover .dropdown-item {
    padding: 10px 16px !important;
    border-radius: 8px;
    color: var(--ch-text-main) !important;
    font-weight: 500;
    transition: background 0.2s;
    margin: 2px 8px;
    width: calc(100% - 16px);
}
.ch-popover .dropdown-item:hover {
    background: #f8fafc !important;
    color: var(--ch-primary) !important;
}
.ch-popover .dropdown-item.text-danger:hover {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}
.ch-popover .dropdown-item .lucide {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2px;
    margin-right: 12px;
}

/* BUTTONS */
.btn-ch-primary { background: var(--ch-primary) !important; color: #fff !important; border-radius: var(--ch-radius-btn) !important; font-weight: 700 !important; font-size: 13px !important; border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important; height: 44px; width: 100%; display: flex; align-items: center; justify-content: center; }
.btn-ch-outline {
    background: #ffffff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    color: #475569 !important;
    border-radius: var(--ch-radius-btn) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
}
.btn-ch-outline:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: var(--ch-text-dark) !important;
}

.btn-ch-outline-primary {
    background: #ffffff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    color: var(--ch-primary) !important;
    border-radius: var(--ch-radius-btn) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
}
.btn-ch-outline-primary:hover {
    background: var(--ch-primary-soft) !important;
    color: #b45309 !important;
}

/* HIDE WHMCS DEFAULTS */
#main-navbar, .header, .sidebar, .page-header { display: none !important; }
.main-content { padding: 32px; flex: 1; }
/* COLLAPSIBLE SUBMENUS */
.ch-nav-item[data-toggle="collapse"] {
    cursor: pointer;
}
.ch-nav-item[data-toggle="collapse"] .ch-chevron {
    transition: transform 0.2s;
}
.ch-nav-item[data-toggle="collapse"]:not(.collapsed) .ch-chevron {
    transform: rotate(180deg);
}

.ch-nav-sub {
    padding-left: 44px !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}
.ch-nav-sub-item {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ch-text-muted) !important;
    padding: 8px 12px !important;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.2s;
    display: block;
    margin: 1px 12px 1px 0;
}
.ch-nav-sub-item:hover {
    color: var(--ch-primary) !important;
    background: #f8fafc;
}
.ch-nav-sub-item.active {
    color: var(--ch-primary) !important;
    background: var(--ch-primary-soft) !important;
    font-weight: 600 !important;
}

/* HOVER ICON COLOR (2563eb) */
.ch-nav-item:hover .lucide,
.ch-nav-sub-item:hover .lucide {
    color: #F5A623 !important;
    stroke: #F5A623 !important;
}

.btn-ch-outline-danger {
    background: #ffffff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    color: #ef4444 !important;
    border-radius: var(--ch-radius-btn) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
}
.btn-ch-outline-danger:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.ch-nav-item:hover .ch-nav-title {
    color: var(--ch-primary) !important;
}
.ch-nav-item:hover .ch-nav-subtitle {
    color: #60a5fa !important;
}

/* REMOVE HOVER UNDERLINES ON BUTTONS AND NAV ITEMS */
a:hover, 
.btn:hover, 
[class*="btn-ch-"]:hover, 
.ch-nav-item:hover, 
.ch-nav-sub-item:hover,
.ch-signout-btn:hover {
    text-decoration: none !important;
}

.ch-nav-sub-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.ch-nav-sub-item .lucide {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 2px !important;
    margin-right: 0 !important;
}

/* ACTIVE INVOICES (COSMODOCS STYLE) */
.ch-invoice-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: var(--ch-gap) !important;
    margin-bottom: var(--ch-gap) !important;
    width: 100% !important;
}
.ch-invoice-card {
    background: #ffffff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: var(--ch-radius-card) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
}
.ch-invoice-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ch-shadow-lg) !important;
    border-color: var(--ch-primary) !important;
}
.ch-invoice-preview {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--ch-border) !important;
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
    height: 160px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.ch-invoice-preview-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}
.ch-invoice-preview-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #ef4444 !important;
    background: #fef2f2 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
}
.ch-invoice-preview-body {
    font-size: 11px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.ch-invoice-preview-row {
    display: flex !important;
    justify-content: space-between !important;
    color: var(--ch-text-muted) !important;
}
.ch-invoice-preview-val {
    font-weight: 600 !important;
    color: var(--ch-text-dark) !important;
}
.ch-invoice-preview-total {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ch-text-dark) !important;
    border-top: 1px dashed var(--ch-border-dashed) !important;
    padding-top: 6px !important;
}
.ch-invoice-preview-total b {
    font-size: 14px !important;
    color: #ef4444 !important;
    font-weight: 700 !important;
}
.ch-invoice-hover-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(2px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease-in-out !important;
}
.ch-invoice-card:hover .ch-invoice-hover-overlay {
    opacity: 1 !important;
}
.ch-invoice-footer {
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #ffffff !important;
}
.ch-invoice-footer-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ch-text-dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.ch-invoice-footer-title .lucide {
    width: 14px !important;
    height: 14px !important;
    color: var(--ch-text-muted) !important;
    margin-right: 0 !important;
}
.ch-invoice-footer-date {
    font-size: 11px !important;
    color: var(--ch-text-muted) !important;
}

/* ALERT BANNER (COSMODOCS STYLE) */
.ch-alert-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fef2f2 !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-left: 4px solid #ef4444 !important;
    border-radius: var(--ch-radius-btn) !important;
    padding: 16px 20px !important;
    margin-bottom: var(--ch-gap) !important;
    gap: 16px !important;
}
.ch-alert-content {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.ch-alert-icon {
    width: 20px !important;
    height: 20px !important;
    color: #ef4444 !important;
    stroke-width: 2.5px !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
}
.ch-alert-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.ch-alert-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #991b1b !important;
}
.ch-alert-desc {
    font-size: 11px !important;
    color: #7f1d1d !important;
    line-height: 1.4 !important;
}
.ch-alert-desc strong {
    font-weight: 700 !important;
}
.ch-alert-actions {
    display: flex !important;
    align-items: center !important;
}

/* USER PROFILE SUMMARY CARD (SaaS Style v2) */
.ch-profile-card {
    background: #ffffff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: var(--ch-radius-card) !important;
    overflow: hidden !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.ch-profile-body {
    padding: 24px 28px 24px 28px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- Top row: avatar + identity + actions --- */
.ch-profile-top {
    display: flex !important;
    align-items: flex-end !important;
    gap: 18px !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    flex-wrap: wrap !important;
}
.ch-profile-avatar-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.ch-profile-avatar {
    width: 76px !important;
    height: 76px !important;
    border-radius: 18px !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    display: block !important;
}
.ch-profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.ch-profile-status-dot {
    position: absolute !important;
    bottom: 3px !important;
    right: 3px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    display: block !important;
}
.ch-profile-identity {
    flex: 1 1 auto !important;
    min-width: 180px !important;
    padding-bottom: 6px !important;
    display: flex !important;
    flex-direction: column !important;
}
.ch-profile-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.ch-profile-name-row > .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}
.ch-profile-name {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--ch-text-dark) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
.ch-profile-email-line {
    font-size: 12px !important;
    color: var(--ch-text-muted) !important;
    margin-top: 3px !important;
    display: block !important;
}
.ch-profile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
    padding-bottom: 6px !important;
    flex-shrink: 0 !important;
}

/* --- Chips row --- */
.ch-profile-chips {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--ch-border) !important;
}
.ch-profile-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ch-text-muted) !important;
    white-space: nowrap !important;
}
.ch-profile-chip .lucide,
.ch-profile-chip svg {
    width: 13px !important;
    height: 13px !important;
    color: var(--ch-text-nav) !important;
    flex-shrink: 0 !important;
}
.ch-profile-chip strong {
    color: var(--ch-text-dark) !important;
}

/* --- KPI grid --- */
.ch-profile-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
    margin-top: 18px !important;
}
.ch-profile-kpi-box {
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: 12px !important;
    padding: 16px !important;
    background: #fafbfc !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.2s ease !important;
    min-width: 0 !important;
}
.ch-profile-kpi-box:hover {
    border-color: var(--ch-primary) !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(245,166,35,0.08) !important;
}
.ch-profile-kpi-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.ch-profile-kpi-icon .lucide,
.ch-profile-kpi-icon svg {
    width: 18px !important;
    height: 18px !important;
}
.ch-kpi-icon-balance {
    background: #ecfdf5 !important;
    color: #10b981 !important;
}
.ch-kpi-icon-due {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}
.ch-kpi-icon-services {
    background: #eff6ff !important;
    color: #3b82f6 !important;
}
.ch-kpi-icon-tickets {
    background: #fefce8 !important;
    color: #eab308 !important;
}
.ch-kpi-icon-quotes {
    background: #f5f3ff !important;
    color: #8b5cf6 !important;
}
.ch-profile-kpi-content {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
}
.ch-profile-kpi-lbl {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--ch-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 3px !important;
    line-height: 1 !important;
}
.ch-profile-kpi-val {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ch-text-dark) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.ch-profile-kpi-val.text-danger {
    color: #ef4444 !important;
}
.ch-profile-kpi-action-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #ecfdf5 !important;
    color: #10b981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
.ch-profile-kpi-action-btn .lucide,
.ch-profile-kpi-action-btn svg {
    width: 14px !important;
    height: 14px !important;
}
.ch-profile-kpi-action-btn:hover {
    background: #10b981 !important;
    color: #fff !important;
}

/* TICKETS LIST (COSMODOCS STYLE) */
.ch-ticket-row {
    padding: 16px !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: var(--ch-radius-btn) !important;
    background: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.ch-ticket-row:hover {
    transform: translateX(4px) !important;
    border-color: var(--ch-primary) !important;
    background: #f8fafc !important;
}
/* removed open ticket left border */

/* removed answered ticket left border */
/* removed reply ticket left border */

.ch-ticket-subject {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--ch-text-dark) !important;
    transition: color 0.2s !important;
}
.ch-ticket-subject:hover {
    color: var(--ch-primary) !important;
}
.ch-ticket-meta {
    font-size: 11px !important;
    color: var(--ch-text-muted) !important;
    display: block !important;
}


/* SOFT BADGES (COSMODOCS STYLE) */
.badge-soft-success {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
}
.badge-soft-danger {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
}
.badge-soft-warning {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
}
.badge-soft-secondary {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
}
.badge-soft-info {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
}

/* MODERN SAAS SCROLLBAR */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* STICKY TABLE HEADERS FOR SCROLLABLE BLOCKS */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.table-responsive thead th {
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 20 !important;
    border-bottom: 1px solid var(--ch-border) !important;
}

/* FIX INTERNAL SCROLLING SYMMETRY */
.ch-card .table-responsive {
    flex: 1;
    margin-right: -10px; /* Offset for scrollbar air */
    padding-right: 10px;
}

.ch-scrollable-area {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* UNIFIED SMALL OUTLINE BUTTONS FOR DASHBOARD */
.btn-saas-outline {
    background: transparent !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    color: var(--ch-text-muted) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
    height: 32px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.btn-saas-outline:hover {
    background: #f8fafc !important;
    border-color: var(--ch-text-nav) !important;
    color: var(--ch-text-dark) !important;
}

/* Primary variant for important actions but still outline */
.btn-saas-outline-primary {
    background: transparent !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    color: var(--ch-primary) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
    height: 32px !important;
    text-decoration: none !important;
}

.btn-saas-outline-primary:hover {
    background: var(--ch-primary-soft) !important;
    border-color: var(--ch-primary) !important;
}

/* IMPROVED GRID SYMMETRY (6/6 SPLIT) */
.ch-span-6 { grid-column: span 6 / span 6; }

/* BETTER BREATHING ROOM FOR DEPLOYMENT ROWS */
.ch-deployment-row {
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: 14px !important;
    background: #fff !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s;
}
.ch-deployment-row:hover { border-color: var(--ch-primary) !important; }

/* 4-COLUMN SPAN FOR 3-BLOCK ROW */
.ch-span-4 { grid-column: span 4 / span 4; }

/* FIX BADGE/BUTTON SPACING */
.ch-deployment-actions {
    display: flex;
    align-items: center;
    gap: 16px !important; /* Forces a clear gap between Badge and Button */
}

/* TIGHTEN TICKET ROW FOR COMPACT VIEW */
.ch-ticket-compact-row {
    padding: 12px 15px !important;
    margin-bottom: 8px !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

/* HIGH-PRECISION ROW LAYOUT (No more crowding) */
.ch-deployment-row {
    display: grid !important;
    grid-template-columns: 36px 1fr auto auto; /* Fixed icon, flexible name, auto status, auto button */
    align-items: center;
    gap: 20px !important; /* LARGE GAP between all elements */
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1);
    border-radius: 12px;
    background: #fff;
    transition: all 0.2s;
}

.ch-deployment-row:hover {
    border-color: var(--ch-primary);
    background: #fcfdfe;
}

.ch-deployment-name {
    line-height: 1.2;
    overflow: hidden;
}

/* Ensure the grid doesn't collapse or stretch unexpectedly */
.ch-grid-12 {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
}


/* Due KPI compact pay button */
.ch-kpi-due-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.ch-kpi-pay-btn {
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: #ef4444 !important;
    color: #fff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
}
.ch-kpi-pay-btn:hover {
    background: #dc2626 !important;
    color: #fff !important;
    text-decoration: none !important;
}


/* CART ICON BADGE */
.ch-cart-count {
    position: absolute !important;
    top: 6px !important;
    right: 4px !important;
    min-width: 16px !important;
    height: 16px !important;
    background: var(--ch-primary) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    line-height: 1 !important;
}


/* PULSING STATUS BADGES */
.ch-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px 4px 8px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
}
.ch-status-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    display: block !important;
}
.ch-status-dot::after {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    animation: ch-pulse 2s ease-in-out infinite !important;
}

/* Active ? green pulse */
.ch-status-active {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #dcfce7 !important;
}
.ch-status-active .ch-status-dot {
    background: #22c55e !important;
}
.ch-status-active .ch-status-dot::after {
    background: rgba(34, 197, 94, 0.3) !important;
}

/* Pending ? yellow pulse */
.ch-status-pending {
    background: #fffbeb !important;
    color: #d97706 !important;
    border-color: #fef3c7 !important;
}
.ch-status-pending .ch-status-dot {
    background: #f59e0b !important;
}
.ch-status-pending .ch-status-dot::after {
    background: rgba(245, 158, 11, 0.3) !important;
}

/* Completed ? blue, no pulse */
.ch-status-completed {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #dbeafe !important;
}
.ch-status-completed .ch-status-dot {
    background: #3b82f6 !important;
}
.ch-status-completed .ch-status-dot::after {
    animation: none !important;
    display: none !important;
}

/* Suspended ? red pulse */
.ch-status-suspended {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fee2e2 !important;
}
.ch-status-suspended .ch-status-dot {
    background: #ef4444 !important;
}
.ch-status-suspended .ch-status-dot::after {
    background: rgba(239, 68, 68, 0.3) !important;
}

/* Terminated ? dark red, no pulse */
.ch-status-terminated {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
}
.ch-status-terminated .ch-status-dot {
    background: #b91c1c !important;
}
.ch-status-terminated .ch-status-dot::after {
    animation: none !important;
    display: none !important;
}

/* Cancelled ? gray, no pulse */
.ch-status-cancelled {
    background: #f8fafc !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}
.ch-status-cancelled .ch-status-dot {
    background: #94a3b8 !important;
}
.ch-status-cancelled .ch-status-dot::after {
    animation: none !important;
    display: none !important;
}

/* Fraud ? orange pulse */
.ch-status-fraud {
    background: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fed7aa !important;
}
.ch-status-fraud .ch-status-dot {
    background: #ea580c !important;
}
.ch-status-fraud .ch-status-dot::after {
    background: rgba(234, 88, 12, 0.3) !important;
}

/* Default ? gray */
.ch-status-default {
    background: #f8fafc !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}
.ch-status-default .ch-status-dot {
    background: #94a3b8 !important;
}
.ch-status-default .ch-status-dot::after {
    animation: none !important;
    display: none !important;
}

@keyframes ch-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0; transform: scale(1.8); }
}
/* SERVICES LIST (SaaS Style) */
.ch-services-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.ch-service-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    background: #fff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    border-radius: var(--ch-radius-card) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    color: inherit !important;
}
.ch-service-row:hover {
    border-color: var(--ch-primary) !important;
    box-shadow: 0 2px 8px rgba(245,166,35,0.08) !important;
    text-decoration: none !important;
    color: inherit !important;
    transform: translateX(3px) !important;
}
.ch-service-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: var(--ch-primary) !important;
}
.ch-service-icon .lucide,
.ch-service-icon svg {
    width: 18px !important;
    height: 18px !important;
}
.ch-service-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.ch-service-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ch-text-dark) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.ch-service-domain {
    font-size: 11px !important;
    color: var(--ch-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.ch-service-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    min-width: 90px !important;
    flex-shrink: 0 !important;
}
.ch-service-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ch-text-dark) !important;
}
.ch-service-cycle {
    font-size: 10px !important;
    color: var(--ch-text-muted) !important;
}
.ch-service-due {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    min-width: 90px !important;
    flex-shrink: 0 !important;
}
.ch-service-due-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: var(--ch-text-nav) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.ch-service-due-date {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ch-text-muted) !important;
}
.ch-service-status-col {
    min-width: 80px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}
.ch-service-arrow {
    flex-shrink: 0 !important;
    color: var(--ch-text-nav) !important;
    transition: transform 0.15s ease !important;
}
.ch-service-arrow .lucide,
.ch-service-arrow svg {
    width: 16px !important;
    height: 16px !important;
}
.ch-service-row:hover .ch-service-arrow {
    transform: translateX(3px) !important;
    color: var(--ch-primary) !important;
}

/* PAGINATION (SaaS Style) */
.ch-pagination-nav {
    display: flex !important;
    justify-content: center !important;
}
.ch-pagination {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ch-page-item {
    list-style: none !important;
}
.ch-page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ch-text-muted) !important;
    text-decoration: none !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
    transition: all 0.15s ease !important;
}
.ch-page-link:hover {
    background: #f8fafc !important;
    border-color: var(--ch-border) !important;
    color: var(--ch-text-dark) !important;
    text-decoration: none !important;
}
.ch-page-item.active .ch-page-link {
    background: var(--ch-primary) !important;
    color: #fff !important;
    border-color: var(--ch-primary) !important;
}
.ch-page-item.disabled .ch-page-link {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* Services responsive */
@media (max-width: 768px) {
    .ch-service-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .ch-service-meta,
    .ch-service-due {
        min-width: auto !important;
    }
    .ch-service-arrow {
        display: none !important;
    }
}
/* QUICK ACTIONS BLOCK */
.ch-quick-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.ch-qa-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1)!important;
}
.ch-qa-item:hover {
    background: #f8fafc !important;
    border-color: var(--ch-border) !important;
    text-decoration: none !important;
}
.ch-qa-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.ch-qa-icon .lucide,
.ch-qa-icon svg {
    width: 16px !important;
    height: 16px !important;
}
.ch-qa-icon-order { background: #eff6ff !important; color: #3b82f6 !important; }
.ch-qa-icon-ticket { background: #fefce8 !important; color: #eab308 !important; }
.ch-qa-icon-funds { background: #ecfdf5 !important; color: #10b981 !important; }
.ch-qa-icon-profile { background: #f5f3ff !important; color: #8b5cf6 !important; }
.ch-qa-icon-security { background: #fef2f2 !important; color: #ef4444 !important; }
.ch-qa-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.ch-qa-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ch-text-dark) !important;
    line-height: 1.3 !important;
}
.ch-qa-desc {
    font-size: 11px !important;
    color: var(--ch-text-muted) !important;
    line-height: 1.2 !important;
}
.ch-qa-arrow {
    width: 14px !important;
    height: 14px !important;
    color: var(--ch-text-nav) !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease !important;
}
.ch-qa-item:hover .ch-qa-arrow {
    transform: translateX(2px) !important;
    color: var(--ch-text-muted) !important;
}
/* =============================================
   RESPONSIVE & ADAPTIVE LAYOUT
   ============================================= */

/* --- 1200px: KPI grid 3 cols, bento 6/6/12 --- */
@media (max-width: 1200px) {
    .ch-profile-kpis {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ch-grid-12 {
        grid-template-columns: repeat(12, 1fr) !important;
    }
    .ch-grid-12 > .ch-span-4 {
        grid-column: span 6 !important;
    }
    .ch-grid-12 > .ch-span-4:last-child {
        grid-column: span 12 !important;
    }
}

/* --- 992px: sidebar collapse, profile top stack, KPI 2 cols, bento stack --- */
@media (max-width: 992px) {
    .ch-sidebar {
        transform: translateX(-100%) !important;
        position: fixed !important;
        z-index: 9999 !important;
        transition: transform 0.3s ease !important;
    }
    .ch-sidebar.open {
        transform: translateX(0) !important;
    }
    .ch-main {
        margin-left: 0 !important;
    }
    .main-content {
        padding: 20px !important;
    }
    .ch-profile-kpis {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ch-profile-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .ch-profile-actions {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .ch-profile-body {
        padding: 20px !important;
    }
    .ch-grid-12 {
        grid-template-columns: 1fr !important;
    }
    .ch-grid-12 > .ch-span-4,
    .ch-grid-12 > .ch-span-6,
    .ch-grid-12 > .ch-span-8 {
        grid-column: span 1 !important;
    }
    .ch-alert-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .ch-alert-actions {
        width: 100% !important;
    }
    .ch-alert-actions .btn-saas-outline {
        width: 100% !important;
    }
    .ch-invoice-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
}

/* --- 768px: KPI 1 col, full stack, tighter padding --- */
@media (max-width: 768px) {
    .ch-profile-kpis {
        grid-template-columns: 1fr 1fr !important;
    }
    .ch-profile-chips {
        gap: 6px !important;
    }
    .ch-profile-chip {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
    .ch-profile-name {
        font-size: 18px !important;
    }
    .ch-profile-avatar {
        width: 60px !important;
        height: 60px !important;
        border-radius: 14px !important;
    }
    .main-content {
        padding: 16px !important;
    }
    .ch-card {
        padding: 16px !important;
    }
    .ch-profile-body {
        padding: 16px !important;
    }
    .ch-profile-kpi-box {
        padding: 12px !important;
    }
    .ch-profile-kpi-icon {
        width: 36px !important;
        height: 36px !important;
    }
    .ch-profile-kpi-val {
        font-size: 16px !important;
    }
    .ch-invoice-grid {
        grid-template-columns: 1fr !important;
    }
    .ch-deployment-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* --- 480px: ultra-compact mobile --- */
@media (max-width: 480px) {
    .ch-profile-kpis {
        grid-template-columns: 1fr !important;
    }
    .ch-profile-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .ch-profile-actions .btn-saas-outline {
        width: 100% !important;
        justify-content: center !important;
    }
    .ch-profile-top {
        margin-top: 0 !important;
    }
    .ch-profile-name {
        font-size: 16px !important;
    }
    .ch-profile-kpi-box {
        padding: 10px !important;
        gap: 8px !important;
    }
    .ch-profile-kpi-val {
        font-size: 14px !important;
    }
    .ch-alert-content {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .main-content {
        padding: 12px !important;
    }
}

.ch-saas-outline {
    border: 1px dashed var(--ch-border-dashed, #cbd5e1);
    background: transparent;
    box-shadow: none;
}

/* SaaS-style Invoice Rows */
.ch-row-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-radius: 12px;
    background: #fff;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}
.ch-row-box:hover {
    box-shadow: var(--ch-shadow-lg, 0 4px 12px rgba(0,0,0,0.05));
    transform: translateY(-2px);
    border-color: var(--ch-primary, #F5A623);
}
.ch-row-info { display: flex; align-items: center; gap: 16px; }
.ch-row-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--ch-primary-soft, #fffbeb); border-radius: 50%; color: var(--ch-primary, #F5A623); }
.ch-row-title { font-weight: 600; color: var(--ch-text-dark, #0f172a); display: block; margin-bottom: 2px; }
.ch-row-subtitle { font-size: 13px; color: var(--ch-text-muted, #64748b); }

.btn-ch-save {
    height: 40px;
    padding: 0 20px;
    border-radius: var(--ch-radius-btn, 8px);
    background: var(--ch-primary, #F5A623);
    color: #fff;
    font-weight: 600;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1);
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.btn-ch-save:hover { background: #e09419; color: #fff; text-decoration: none; }

/* SaaS-style Invoice Rows (Corrected Symmetry) */
.ch-row-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-radius: 12px;
    background: #fff;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}
.ch-row-box:hover {
    box-shadow: var(--ch-shadow-lg, 0 4px 12px rgba(0,0,0,0.05));
    transform: translateY(-2px);
    border-color: var(--ch-primary, #F5A623);
}
.ch-row-info { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    flex-grow: 1; /* Allow this to take up available space */
}
.ch-row-icon { 
    width: 44px; 
    height: 44px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: var(--ch-primary-soft, #fffbeb); 
    border-radius: 50%; 
    color: var(--ch-primary, #F5A623); 
    flex-shrink: 0; /* Prevent icon from shrinking */
}
.ch-row-title { 
    font-weight: 600; 
    color: var(--ch-text-dark, #0f172a); 
    display: block; 
    margin-bottom: 2px; 
}
.ch-row-subtitle { 
    font-size: 13px; 
    color: var(--ch-text-muted, #64748b); 
}
.ch-row-box .d-flex { /* Target the right-side container */
    align-items: center;
    gap: 24px;
    flex-shrink: 0; /* Prevent right side from shrinking */
}
.btn-ch-outline-primary {
    height: 38px; /* Adjusted for better symmetry */
    padding: 0 20px;
    font-size: 13px;
}

.status-filter {
    margin-right: 8px; /* Add spacing between buttons */
}
.status-filter:last-child {
    margin-right: 0;
}/* Fix Dropdown Symmetry */
.dropdown-menu {
    margin-top: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px !important;
}
.dropdown-item {
    padding: 10px 16px !important;
    transition: background 0.2s;
}
.dropdown-item:hover {
    background-color: #f8fafc !important;
    color: var(--ch-primary) !important;
}
#invoiceSortBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px !important;
}/* ===================================================================
*
*  COMPONENT: BENTO BOX
*
* =================================================================== */
.ch-bento-box {
    border-radius: var(--ch-radius-card);
    border: 1px solid var(--ch-border);
    padding: 1.5rem;
    background-color: var(--ch-body-bg);
    margin-bottom: 1.5rem;
    height: 100%;
}

.ch-bento-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--ch-headings-color);
}

.ch-bento-box .table {
    margin-bottom: 0;
}

.ch-bento-box .table th {
    font-weight: 500;
    font-size: .875rem;
    color: var(--ch-body-color-muted);
    border-top: none;
    border-bottom: 1px solid var(--ch-border);
    padding: .75rem;
}

.ch-bento-box .table td {
    vertical-align: middle;
    padding: .75rem;
    border-top: 1px solid var(--ch-border);
}

.ch-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ch-border-light);
}

.ch-summary-item {
    display: flex;
    justify-content: space-between;
    font-size: .9375rem;
    padding: .5rem 0;
}
.ch-summary-item.ch-summary-total {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ch-headings-color);
    border-top: 1px solid var(--ch-border-light);
    padding-top: 1rem;
    margin-top: .5rem;
}


/* ===================================================================
 *
 *  UTILITY: INVOICE STATUS
 *
 * =================================================================== */
.status-badge {
    display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}

.status-paid {
    background-color: #28a745; /* Green */
}

.status-unpaid {
    background-color: #dc3545; /* Red */
}

.status-cancelled,
.status-refunded {
    background-color: #6c757d; /* Gray */
}

.status-collections {
    background-color: #ffc107; /* Yellow */
    color: #212529;
}

.badge-soft-success {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
}

.badge-soft-danger {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* -- STYLES IMPORTED FROM SHUFYTHEME -- */

.view__invoice__page__wrapper .default__shadow__panel {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05);
    border: 0px;
    padding: 0;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.view__invoice__page__wrapper .default__shadow__panel .default__shadow__panel__header {
    padding: 25px 30px;
    border-bottom: 1px solid #ebedf2;
}

.view__invoice__page__wrapper .default__shadow__panel .default__shadow__panel__body {
    padding: 30px;
}

.view__invoice__page__main__content .invoice-status .badge {
    color: #fff;
    font-weight: 500;
}

.view__invoice__page__main__conent__header .view__invoice__text__wrapper {
    text-align: right;
}
.view__invoice__page__main__conent__header .view__invoice__text {
    font-size: 13px;
    color: #434343;
    margin-bottom: 7px;
}
.view__invoice__page__main__conent__header .view__invoice__text span {
    color: #929292;
}

.view__invoice__page__main__content__body .table thead th {
    border-top: 0px;
    border-bottom: 1px solid #ebedf2;
    color: #b5b5c3;
    font-weight: 600;
    font-size: 13px;
    padding: 20px 25px;
    text-transform: uppercase;
}

.view__invoice__page__main__content__body .table tbody td {
    padding: 15px 25px;
    font-weight: 500;
}

.view__invoice__page__main__content__body .invoice-summary {
    padding: 20px 0 0;
}
.view__invoice__page__main__content__body .invoice-summary .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}
.view__invoice__page__main__content__body .invoice-summary .summary-row .summary-title {
    color: #5e6278;
}
.view__invoice__page__main__content__body .invoice-summary .summary-row .summary-value {
    color: #5e6278;
    font-weight: 500;
}
.view__invoice__page__main__content__body .invoice-summary .summary-total {
    border-top: 1px solid #ebedf2;
    margin-top: 10px;
    padding-top: 15px;
}
.view__invoice__page__main__content__body .invoice-summary .summary-total .summary-title,
.view__invoice__page__main__content__body .invoice-summary .summary-total .summary-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ch-primary, #007bff);
}

.view__invoice__page__sidebar .view__invoice__page__sidebar__actions {
    margin-top: 0;
}
.view__invoice__page__sidebar .view__invoice__page__sidebar__actions a {
    display: block;
    margin-bottom: 10px;
    color: #5e6278;
    font-weight: 500;
}
.view__invoice__page__sidebar .view__invoice__page__sidebar__actions a i {
    margin-right: 8px;
}

/* ===================================================================
 * SaaS REDESIGN FOR VIEW INVOICE PAGE
 * =================================================================== */

/* Layout & Containers */
.view__invoice__page__wrapper .default__shadow__panel {
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--ch-radius-card, 12px) !important;
}

.view__invoice__page__wrapper .default__shadow__panel .default__shadow__panel__header {
    border-bottom: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    background: rgba(248, 250, 252, 0.5) !important;
}

/* Typography & Headings */
.view__invoice__page__main__content h6, 
.view__invoice__page__main__content .coodiv-text-8,
.view__invoice__page__main__content .coodiv-text-10 {
    font-family: 'Google Sans', sans-serif !important;
    color: var(--ch-headings-color, #1e293b) !important;
    letter-spacing: -0.01em;
}

/* Status Badges */
.invoice-status .badge {
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 6px !important;
}

.invoice-status .badge-danger, .invoice-status .unpaid {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.invoice-status .badge-success, .invoice-status .paid {
    background: rgba(34, 197, 94, 0.1) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

/* Tables */
.view__invoice__page__main__content__tables .table thead td {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--ch-border, #e2e8f0) !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
}

.view__invoice__page__main__content__tables .table tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--ch-border, #f1f5f9) !important;
    color: #334155 !important;
    font-size: 14px !important;
}

.total-pay-row {
    color: var(--ch-primary, #1d4ed8) !important;
    font-size: 16px !important;
}

/* Form Elements & Dropdowns */
.view__invoice__page__wrapper select.form-control,
.view__invoice__page__wrapper .form-control {
    border: 1px solid var(--ch-border, #e2e8f0) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    height: auto !important;
    padding: 10px 14px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    background-color: #fff !important;
}

.view__invoice__page__wrapper select.form-control:focus {
    border-color: var(--ch-primary, #3b82f6) !important;
    outline: none !important;
}

/* Buttons */
.view__invoice__page__sidebar__actions a,
.btn-invoice-pay {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
    border: 1px solid var(--ch-border, #e2e8f0) !important;
    background: #fff !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
}

.view__invoice__page__sidebar__actions a:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    text-decoration: none !important;
}

.view__invoice__page__sidebar__actions a i {
    margin-right: 8px !important;
    color: #64748b !important;
}

/* Billing Note Box */
.view__invoice__page__main__content .billing-note {
    background: rgba(239, 246, 255, 0.5) !important;
    border: 1px dashed #bfdbfe !important;
    color: #1d4ed8 !important;
    border-radius: 10px !important;
    padding: 16px !important;
}

/* --- SAAS VIEW INVOICE SYMMETRY FIXES --- */

/* ????????? */
.ch-container {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/* ???????? (Bento Boxes) - ?????? ????? */
.ch-bento-box {
    background: #fff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    border-radius: var(--ch-radius-card, 12px) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: none !important;
}

/* ????????? ???????? */
.ch-bento-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ch-headings-color, #1e293b) !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--ch-border, #f1f5f9) !important;
}

/* ?????? */
.btn-saas-outline {
    background: #fff !important;
    border: 1px solid var(--ch-border, #cbd5e1) !important;
    color: #475569 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
}

.btn-saas-outline:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* ??????? */
.table.ch-table {
    margin-bottom: 0 !important;
}

.table.ch-table thead th {
    background: #f8fafc !important;
    border-top: none !important;
    border-bottom: 1px solid var(--ch-border, #e2e8f0) !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 24px !important;
}

.table.ch-table tbody td {
    padding: 16px 24px !important;
    border-bottom: 1px solid var(--ch-border, #f1f5f9) !important;
    color: #334155 !important;
}

/* ???????????? ? ??????? */
.d-flex.gap-2 { gap: 8px; }
.text-right { text-align: right; }

/* --- SaaS Invoice Card Style --- */

.saas-invoice-card {
    background: #fff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    border-radius: var(--ch-radius-card, 12px) !important;
    box-shadow: none !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.saas-invoice-card-header {
    padding: 0 0 20px 0 !important;
    border-bottom: 1px solid var(--ch-border, #f1f5f9) !important;
    margin-bottom: 20px !important;
    background: transparent !important;
}

.saas-invoice-card .table thead td {
    background: #f8fafc !important;
    border-top: none !important;
    border-bottom: 1px solid var(--ch-border, #e2e8f0) !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 24px !important;
}

/* --- SaaS Select & Payment Button Styling --- */

/* ?????????? ??????????? ?????? */
.saas-invoice-card select,
.saas-invoice-card select.form-control,
.saas-invoice-card select.select-inline {
    width: 100% !important;
    padding: 10px 36px 10px 14px !important;
    border: 1px solid var(--ch-border, #cbd5e1) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    font-size: 14px !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.saas-invoice-card select:focus {
    outline: none !important;
    border-color: var(--ch-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* ?????????? ?????? ?????? ? ????? ?????? ??????/??????? ?????? ???????? ?????? */
.saas-invoice-card input[type="submit"],
.saas-invoice-card input[type="button"],
.saas-invoice-card button,
.saas-invoice-card .btn-success,
.saas-invoice-card .btn-primary {
    width: 100% !important;
    padding: 12px 20px !important;
    background-color: var(--ch-primary, #3b82f6) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    display: inline-block !important;
    margin-top: 10px !important;
}

.saas-invoice-card input[type="submit"]:hover,
.saas-invoice-card input[type="button"]:hover,
.saas-invoice-card button:hover {
    background-color: var(--ch-primary-hover, #2563eb) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.saas-invoice-card form {
    margin-bottom: 0 !important;
}

/* --- SaaS Outline Style for Payment Buttons --- */

.saas-invoice-card input[type="submit"],
.saas-invoice-card input[type="button"],
.saas-invoice-card button,
.saas-invoice-card .btn-success,
.saas-invoice-card .btn-primary {
    background: #fff !important;
    border: 1px solid var(--ch-border, #cbd5e1) !important;
    color: #475569 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    width: 100% !important;
    display: block !important;
    margin-top: 15px !important;
}

.saas-invoice-card input[type="submit"]:hover,
.saas-invoice-card input[type="button"]:hover,
.saas-invoice-card button:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* --- FORCE SAAS OUTLINE STYLE FOR PAYMENT BUTTON --- */

.saas-invoice-card input[type="submit"],
.saas-invoice-card input[type="button"],
.saas-invoice-card button,
.saas-invoice-card .payment-btn-container input {
    background-color: transparent !important;
    background: transparent !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    color: #475569 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    width: 100% !important;
    display: block !important;
    margin-top: 15px !important;
    cursor: pointer !important;
}

.saas-invoice-card input[type="submit"]:hover,
.saas-invoice-card input[type="button"]:hover,
.saas-invoice-card button:hover,
.saas-invoice-card .payment-btn-container input:hover {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* --- ISOLATED OUTLINE BUTTON STYLES FOR VIEW INVOICE --- */

/* ?????? Download, Print ? ?????? ?????? (Crypto Pay) */
.saas-invoice-card .saas-action-btn-outline,
.saas-invoice-card input[type="submit"],
.saas-invoice-card input[type="button"],
.saas-invoice-card button {
    background-color: transparent !important;
    background: transparent !important;
    border: 1px solid var(--ch-border, #cbd5e1) !important; /* ???????? ????? */
    color: #475569 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    text-align: center !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
}

/* ??? ??????, ??????? ????? ?????? 100% (??????) */
.saas-invoice-card .w-100.saas-action-btn-outline,
.saas-invoice-card input[type="submit"],
.saas-invoice-card input[type="button"],
.saas-invoice-card button {
    width: 100% !important;
    margin-top: 10px !important;
}

/* ?????? ????????? */
.saas-invoice-card .saas-action-btn-outline:hover,
.saas-invoice-card input[type="submit"]:hover,
.saas-invoice-card input[type="button"]:hover,
.saas-invoice-card button:hover {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* ???? ??? ?????? ?????? ?????? */
.saas-invoice-card .saas-action-btn-outline i {
    margin-right: 8px !important;
}

/* --- FORCE SAAS OUTLINE V3 --- */
.saas-invoice-card form input[type="submit"],
.saas-invoice-card form button {
    background-color: #ffffff !important; 
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    width: 100% !important;
}
.saas-invoice-card form input[type="submit"]:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* --- ULTIMATE SAAS OUTLINE FIX --- */

/* ?????????????? ????? ??? ???? ?????? ? ??????-?????? ? ????????? ????? */
.saas-invoice-card .btn,
.saas-invoice-card .saas-action-btn-outline,
.saas-invoice-card a.btn,
.saas-invoice-card input[type="submit"],
.saas-invoice-card button {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-decoration: none !important;
}

/* ?????? ??? ????????? */
.saas-invoice-card .btn:hover,
.saas-invoice-card .saas-action-btn-outline:hover,
.saas-invoice-card a.btn:hover,
.saas-invoice-card input[type="submit"]:hover,
.saas-invoice-card button:hover {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* ??????? ????? ????? ??????, ???? ??? ???? */
.saas-invoice-card .btn:focus,
.saas-invoice-card input[type="submit"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(203, 213, 225, 0.5) !important;
}

/* --- Fix Dropdown Margin in Payment Card --- */
.saas-invoice-card .form-group {
    margin-top: 1rem !important; /* 16px */
}

/* --- Dropdown Spacing Fix --- */

/* ??????????? ?????? ?????? ? ?????? ???? select */
.saas-invoice-card .form-group select.form-control {
    padding-bottom: 12px !important; 
    margin-bottom: 5px !important; /* ????????? ????????? ?????? ????? */
}

/* ??????????? ??????? ?????? ? ?????? ??????, ????? ???? ?????? ????? */
.saas-invoice-card .payment-btn-container {
    margin-top: 10px !important;
}

/* --- CUSTOM SAAS DROPDOWN --- */

.custom-saas-dropdown {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.custom-saas-dropdown .selected-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--ch-border, #cbd5e1);
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #334155;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.custom-saas-dropdown.active .selected-option {
    border-color: var(--ch-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-saas-dropdown .selected-option i {
    color: #94a3b8;
    transition: transform 0.2s;
}

.custom-saas-dropdown.active .selected-option i {
    transform: rotate(180deg);
}

.custom-saas-dropdown .options {
    display: none;
    position: absolute;
    top: calc(100% + 8px); /* 8px ?????? ????? */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--ch-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
}

.custom-saas-dropdown.active .options {
    display: block;
}

.custom-saas-dropdown .option {
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    color: #334155;
}

.custom-saas-dropdown .option:hover,
.custom-saas-dropdown .option.selected {
    background-color: transparent !important;
    color: var(--ch-primary, #3b82f6) !important;
    font-weight: 600 !important;
}

/* --- SaaS Bind to Global Outline Button Styles --- */

/* ????? ?????? ??? ?????? ? ???????? ????????, ????? ??? ???????????? ?????????? ????? btn-ch-outline */
.saas-invoice-card input[type="submit"],
.saas-invoice-card input[type="button"],
.saas-invoice-card button {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    color: var(--ch-primary) !important;
    border-radius: var(--ch-radius-btn, 8px) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 20px !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    text-shadow: none !important;
    width: 100% !important;
    display: block !important;
    margin-top: 15px !important;
    cursor: pointer !important;
    text-align: center !important;
}

.saas-invoice-card input[type="submit"]:hover,
.saas-invoice-card input[type="button"]:hover,
.saas-invoice-card button:hover {
    background: var(--ch-primary-soft, rgba(59, 130, 246, 0.1)) !important;
    border-color: var(--ch-primary) !important;
    color: var(--ch-primary) !important;
}

/* --- FORCE TRANSPARENT TABLE HEADER --- */
.saas-invoice-card .table thead tr th,
.saas-invoice-card .table thead td {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid #e2e8f0 !important;
}



/* Zebra striping for borderless invoice table */
.saas-invoice-card .table tbody tr:nth-of-type(even) {
    background-color: rgba(248, 250, 252, 0.5) !important; /* ????? ?????? ????? ???? ??? ?????? ????? */
}
.saas-invoice-card .table tbody tr {
    border-bottom: none !important;
}
.saas-invoice-card .table tbody tr td {
    border: none !important;
}

/* --- FORCE INVOICE ITEMS HEADER COLOR --- */
.saas-invoice-card .table thead td {
    color: #F5AD1B !important;
}

/* --- SAAS STYLE FOR SUBMIT TICKET PAGE --- */

/* Main card wrapper for the form */
.saas-ticket-form-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Individual bento box cards for form sections */
.saas-ticket-card {
    background: #fff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    border-radius: var(--ch-radius-card, 12px) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: none !important;
}

.saas-ticket-card h6 {
    font-weight: 700 !important;
    color: var(--ch-headings-color, #1e293b) !important;
    font-size: 16px !important;
    margin-bottom: 20px !important;
}

/* Form inputs styling */
.saas-ticket-card .form-control {
    background: #fff !important;
    border: 1px solid var(--ch-border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    height: auto !important;
    font-size: 14px !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    transition: all 0.2s !important;
}

.saas-ticket-card .form-control:focus {
    border-color: var(--ch-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

.saas-ticket-card textarea.form-control {
    min-height: 150px;
}

/* Custom file input */
.saas-ticket-card .form-control-file {
    border: 2px dashed var(--ch-border-dashed, #e2e8f0) !important;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.saas-ticket-card .form-control-file:hover {
    background: #f8fafc;
    border-color: var(--ch-primary, #3b82f6);
}

/* Submit button */
.saas-ticket-submit-btn {
    background: var(--ch-primary, #3b82f6) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
}

.saas-ticket-submit-btn:hover {
    background: var(--ch-primary-hover, #2563eb) !important;
}

/* --- SAAS STYLE FOR DEPARTMENT SELECTION --- */

.saas-department-card {
    display: block;
    height: 100%;
    padding: 24px;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    border-radius: var(--ch-radius-card, 12px) !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    background: #fff !important;
    box-shadow: none !important;
}

.saas-department-card:hover {
    border-color: var(--ch-primary, #3b82f6) !important;
    background: #fafcff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

.saas-department-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ch-primary);
    flex-shrink: 0;
}

/* Remove background and border-radius for department icons */
.saas-department-icon {
    background: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}



/* Custom File Input (Attachments) */
.saas-custom-file-label {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px dashed var(--ch-border, #e2e8f0);
    border-radius: 8px;
    background-color: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.saas-custom-file-label:hover {
    background-color: #f8fafc;
    border-color: var(--ch-primary, #3b82f6);
    color: var(--ch-primary, #3b82f6);
}

.saas-custom-file-input {
    display: none; /* Hide the actual file input */
}

/* --- FINAL SAAS TICKET FORM STYLE (CSS ONLY) --- */

/* ???????? ??????????? ??????? WHMCS */



/* ?????????? ?????? ????? ? ????????? ???????? (Bento Box) */


/* ??????? ????? ? ????????? ????????? */
.main-content form .row .row,
.main-content form .row .form-group {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* ?????????? ???? ????? ????? */
.main-content .form-control {
    border: 1px dashed #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    height: auto !important;
    font-size: 14px !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.main-content .form-control:focus {
    border-color: var(--ch-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* ?????????? ?????????? ? ????? */
.main-content label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ?????????? ?????? */
#openTicketSubmit, 
.main-content .btn-primary[type="submit"] {
    background: #ffffff !important;
    border: 1px dashed var(--ch-primary) !important;
    color: var(--ch-primary) !important;
    padding: 12px 40px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    transition: all 0.2s !important;
    width: auto !important;
}

.main-content .btn-default, 
.main-content .btn-secondary {
    background: #fff !important;
    border: 1px dashed #cbd5e1 !important;
    color: #64748b !important;
    padding: 12px 30px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}





/* --- FINAL SAAS CARD SYSTEM --- */
.ch-saas-card {
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.ch-saas-card h6 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.05em !important;
}

.ch-saas-card .form-control {
    border: 1px dashed #e2e8f0 !important;
    border-radius: 8px !important;
    height: 42px !important;
    font-size: 14px !important;
}

.ch-saas-card textarea.form-control {
    height: auto !important;
    min-height: 150px !important;
}

.ch-saas-card label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
}
\n.custom-saas-dropdown .options { top: calc(100% + 8px) !important; }\n
/* --- FINAL STABLE TICKET FORM DESIGN --- */

/* ???????? ??????????? ??????? WHMCS */



/* ?????? ?????? ????? (row) ?????? ????? ?????????? ????????? ????????? */


/* ?????????? ????? ??? ???? ????? ????? */
.main-content .form-control {
    border: 1px dashed #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    height: auto !important;
    background-color: #fff !important;
    margin-top: 8px !important;
}

/* ???? ??? ?????????? ???????, ????? ??? ?? ????????? */
.main-content select.form-control {
    padding-bottom: 12px !important;
}

/* ?????????? ?????? */
#openTicketSubmit, 
.main-content .btn-primary[type="submit"] {
    background: #ffffff !important;
    border: 1px dashed var(--ch-primary) !important;
    color: var(--ch-primary) !important;
    padding: 12px 40px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    float: right !important;
}

.main-content .btn-default {
    background: #fff !important;
    border: 1px dashed #cbd5e1 !important;
    color: #64748b !important;
    padding: 12px 30px !important;
    border-radius: 10px !important;
    float: right !important;
    margin-right: 15px !important;
}

/* ????????? ?????????? ????? */
.main-content label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

/* Hide WHMCS Branding */
p.poweredby, .poweredby, a[href*='whmcs.com'] {
    display: none !important;
}


\n\n
/* --- COMPLETE HIDE WHMCS BRANDING --- */
p, div, a, span {
    if content contains "Powered by" { display: none !important; } /* ??? ????????? ??? ??????, ???? ???????? CSS */
}
/* ???????? CSS ?? ?????????? ? ????????? */
 
.main-content center,
a[href*="whmcs.com"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Fix: Show useful text, hide only branding --- */
a[href*="whmcs.com"] {
    display: none !important;
}

/* --- COMPACT WYSIWYG EDITOR BUTTONS --- */
.md-header.btn-toolbar {
    padding: 8px 12px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px dashed #cbd5e1 !important;
    border-radius: 10px 10px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.md-header.btn-toolbar .btn-group {
    margin-right: 6px !important;
}

.md-header.btn-toolbar .btn {
    height: 28px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.md-header.btn-toolbar .btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.md-header.btn-toolbar .btn.active {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* ?????????? ??? ?????? Preview */
.md-header.btn-toolbar .btn-primary {
    border-color: var(--ch-primary, #3b82f6) !important;
    color: var(--ch-primary, #3b82f6) !important;
}

/* ????????? ?????? ????????? */
.md-editor {
    border: 1px dashed #cbd5e1 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.md-editor textarea {
    border: none !important;
    padding: 16px !important;
}

/* --- SAAS STYLING FOR WYSIWYG TEXTAREA --- */

/* ????????? ????? ????????? */
.md-editor {
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* ??? ?????? ?? ????????? */
.md-editor.active {
    border-color: var(--ch-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* ???? ????????? ???? ?????? ????????? */
.md-editor textarea.md-input,
.md-editor textarea.form-control {
    background-color: transparent !important;
    border: none !important; /* ??????? ??????????? ?????, ??? ??? ????? ?????? ? ????? ?????????? */
    padding: 16px 20px !important;
    font-size: 14px !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ?????? ???????????? (????? ?????????) */
.md-editor .md-header {
    background-color: #f8fafc !important;
    border-bottom: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    padding: 10px 16px !important;
}

/* ?????? ????????? ????? ????????? */
.md-editor .md-footer {
    background-color: #f8fafc !important;
    border-top: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    padding: 8px 16px !important;
    font-size: 11px !important;
    color: #64748b !important;
}

/* --- HIDE UNWANTED WYSIWYG ELEMENTS --- */

/* ???????? ?????? ??????? (????????) */
.md-header .fa-question-circle,
.md-header .fa-question,
.md-header button[data-handler="bootstrap-markdown-cmdHelp"] {
    display: none !important;
}

/* ???????? ?????? ????????????? ?? ???? ????? (??????) */
.md-editor .md-controls {
    display: none !important;
}

/* ???????? ????? ????????? (?????????? ?????/????) */
.md-editor .md-footer {
    display: none !important;
}

/* --- FORCE HIDE TICKET HELP BUTTON --- */
.md-header button[data-handler="bootstrap-markdown-cmdHelp"],
.md-header a[href*="action=markdown"],
.md-header .open-modal {
    display: none !important;
}

/* --- Fix Focus Glow Bug on Markdown Editor --- */
.md-editor textarea.md-input:focus,
.md-editor textarea.form-control:focus,
.md-editor.active textarea.md-input,
.md-editor.active textarea.form-control {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ?????? SaaS ???????? ?????? ?? ??????? ??????? ????????? */
.md-editor.active {
    border-color: var(--ch-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    background-color: #ffffff !important;
}

/* --- ENFORCE GLOBAL GOOGLE SANS FONT --- */
*, html, body, p, div, span, h1, h2, h3, h4, h5, h6, a, input, select, textarea, button, label {
    font-family: 'Google Sans', sans-serif !important;
}


/* --- INVOICES PAGE SEARCH & SORT SYMMETRY --- */
.ch-invoice-filter-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ??????? ?????? ???????? ??? ?????? ???? ????? */
.ch-invoice-search-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    width: 240px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    padding: 0 14px !important; /* ??????? ? ????? */
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.ch-invoice-search-wrapper:focus-within {
    border-color: var(--ch-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* ?????????? ?????? ???? ?????? ??????? */
.ch-invoice-search-wrapper i,
.ch-invoice-search-wrapper svg {
    color: #94a3b8 !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 10px !important; /* ?????? ????? ????? ? ??????? */
    flex-shrink: 0 !important;
}

/* ?????? ????? ??? ??????????? ????? ? ???? */
.ch-invoice-search-input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    font-size: 13px !important;
    outline: none !important;
    box-shadow: none !important;
    color: #334155 !important;
}

/* ?????? ?????????? */
#invoiceSortBtn.btn-ch-outline {
    height: 40px !important;
    width: 160px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fff !important;
    box-shadow: none !important;
}

#invoiceSortBtn.btn-ch-outline:hover {
    border-color: #94a3b8 !important;
}

/* --- Fix: Force Solid Border for Invoices Search Input --- */
.ch-invoice-search-wrapper {
    border: 1px solid #e2e8f0 !important; /* ?????? ???????? ????? */
    border-style: solid !important;
    background-color: #ffffff !important;
}

.ch-invoice-search-wrapper:focus-within {
    border-color: var(--ch-primary, #3b82f6) !important;
    border-style: solid !important;
}

/* --- Fix: Remove inner input styling completely --- */
.ch-invoice-search-input,
input.ch-invoice-search-input {
    border: none !important;
    border-style: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
}
\n
/* --- SaaS Submit Ticket Step 1 Spacers and Spacing --- */
.saas-department-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding: 24px !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    border-radius: var(--ch-radius-card, 12px) !important;
    background: #fff !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
}

.saas-department-card:hover {
    border-color: var(--ch-primary, #3b82f6) !important;
    background: #fafcff !important;
    transform: translateY(-2px);
}

.saas-department-icon {
    color: var(--ch-primary) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Status Indicator block inside department card */
.saas-department-card .sh-status-indicator {
    margin-top: 20px !important;
    padding: 10px 16px !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.saas-department-card .sh-status-indicator .sh-dot {
    width: 8px !important;
    height: 8px !important;
    margin-right: 8px !important;
    border-radius: 50% !important;
}

.saas-department-card .sh-status-indicator .sh-label {
    font-weight: 700 !important;
    font-size: 12px !important;
}

.saas-department-card .sh-status-indicator .sh-time {
    font-size: 11px !important;
    color: #64748b !important;
    margin-left: 8px !important;
}



/* --- SaaS Department Cards Flex Alignment --- */
.saas-department-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.saas-department-card > .d-flex.align-items-start {
    flex-grow: 1 !important;
    margin-bottom: 16px !important; /* ?????? ????? ????????? ? ???????? */
}

.saas-department-card .sh-status-indicator {
    margin-top: auto !important; /* ????????? ?????? ?????? ? ???? ???????? */
    width: 100% !important;
}



/* --- SaaS Department Equal Height & Bottom Status Alignment --- */
.main-content .row > .col-md-6 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.saas-department-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex-grow: 1 !important;
}

.saas-department-card > .d-flex.align-items-start {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important; /* ?????? ?? ????? ??????? */
}

.saas-department-card .sh-status-indicator {
    margin-top: auto !important; /* ??????????? ???? ??????? ? ????? ??? ???????? */
    width: 100% !important;
}

/* --- Compact NEW TICKET button styling --- */
.btn-new-ticket {
    height: 36px !important;
    padding: 0 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px dashed #F5AD1B !important;
    color: #F5AD1B !important;
    background-color: #ffffff !important;
    border-radius: 10px !important;
}

.btn-new-ticket:hover {
    background-color: #fffaf0 !important;
    border-color: #d68a00 !important;
    color: #d68a00 !important;
}


/* --- FINAL STABLE VIEW TICKET DESIGN --- */

/* ????????? ???????? ????????? */
.view__ticket__wrapper__item {
    margin-bottom: 24px !important;
}

.view__ticket__wrapper__item .ticket-reply {
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: none !important;
}

/* ?????????? ??????? ???????? */
.posted__by__name img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
}

.posted__by__name {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 12px !important;
}

/* ?????????? ????? ?????? */
#replyFormContainer, .reply-form-card {
    background: #ffffff !important;
    border: 1px dashed var(--ch-primary) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 32px !important;
}

/* ???? ? ?????? */
.main-content .form-control {
    border: 1px dashed #e2e8f0 !important;
    border-radius: 8px !important;
}

#openTicketSubmit, .main-content .btn-primary[type="submit"] {
    background: #fff !important;
    border: 1px dashed var(--ch-primary) !important;
    color: var(--ch-primary) !important;
    padding: 10px 32px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}



/* --- SAAS DASHBOARD GRID --- */
.ch-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
}

.ch-bento-stat-card {
    background: #ffffff !important;
    border: 1px dashed var(--ch-border-dashed, #cbd5e1) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.ch-bento-stat-card:hover {
    border-color: var(--ch-primary, #3b82f6) !important;
    background: #fafcff !important;
    transform: translateY(-2px);
}

.ch-bento-stat-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ch-primary) !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

.ch-bento-stat-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.ch-bento-stat-info span {
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.ch-bento-stat-info h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

/* ===========================================================
   CHX — clean dashboard cards (Services / Tickets / Quick)
   Self-contained, mobile-first, no !important wars.
   Matches cloudhive-saas dashed-outline style.
   =========================================================== */
.chx-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    width:100%;
    align-items:stretch;
}
.chx-card{
    background:#fff;
    border:1px dashed var(--ch-border-dashed,#cbd5e1);
    border-radius:var(--ch-radius-card,16px);
    padding:24px;
    display:flex;
    flex-direction:column;
    min-width:0;
}
.chx-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
    min-height:36px;
}
.chx-card-title{
    font-size:16px;
    font-weight:600;
    color:var(--ch-text-dark,#0f172a);
    margin:0;
}
.chx-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

/* ROW — base for service/ticket/quick */
.chx-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border:1px dashed var(--ch-border-dashed,#cbd5e1);
    border-radius:12px;
    background:#fff;
    text-decoration:none;
    color:inherit;
    transition:all .2s ease;
    min-width:0;
}
.chx-row:hover{
    border-color:var(--ch-primary,#f5a623);
    text-decoration:none;
    color:inherit;
}

/* icon bubble */
.chx-row-ico{
    flex:0 0 auto;
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    background:#f1f5f9;
    color:#475569;
}
.chx-row-ico svg{width:18px;height:18px;}

/* the flexible text column — THIS is what was collapsing before */
.chx-row-body{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    overflow:hidden;
}
.chx-row-title{
    font-size:13px;
    font-weight:600;
    color:var(--ch-text-dark,#0f172a);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.chx-row-sub{
    font-size:11px;
    color:var(--ch-text-muted,#64748b);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* trailing slot (status badge / arrow) */
.chx-row-end{
    flex:0 0 auto;
    margin-left:auto;
    display:flex;
    align-items:center;
}
.chx-row-end > .badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    padding:5px 10px;
    border-radius:999px;
    font-size:11px;
    line-height:1;
    font-weight:700;
    letter-spacing:0.02em;
}
.chx-arrow{width:16px;height:16px;color:var(--ch-text-nav,#94a3b8);}

/* TICKET specifics */
.chx-ticket{border-style:dashed;}
.chx-tk-badge{
    flex:0 0 auto;
    min-width:84px;
    text-align:center;
    padding:5px 8px;
    font-size:10px;
    font-weight:700;
    background:#fff;
    border:1px dashed currentColor;
    border-radius:6px;
    white-space:nowrap;
}

/* QUICK ACTION icon tints */
.chx-ico-order{background:#eff6ff;color:#3b82f6;}
.chx-ico-ticket{background:#fefce8;color:#eab308;}
.chx-ico-funds{background:#ecfdf5;color:#10b981;}

/* ============ RESPONSIVE ============ */
/* tablet: 3 -> stack; cap content width handled by main-content below */
@media (max-width:992px){
    .chx-grid{grid-template-columns:1fr;gap:16px;}
}
@media (max-width:576px){
    .chx-card{padding:18px;}
    .chx-row{padding:12px 14px;gap:12px;}
    .chx-tk-badge{min-width:74px;}
}

/* 2K cap + center so it never stretches edge-to-edge on big monitors */
.main-content{max-width:1600px;margin-left:auto;margin-right:auto;}
@media (min-width:1920px){ .main-content{max-width:1760px;} }

/* kill any horizontal overflow globally */
html,body{overflow-x:hidden;}

/* ===========================================================
   MY SERVICES — mobile reflow (<=576px)
   Desktop unchanged. On phone: name full width on top,
   then price / due / status wrap into a second row.
   =========================================================== */
@media (max-width:576px){
    .ch-service-row{
        flex-wrap:wrap !important;
        align-items:center !important;
        row-gap:10px !important;
        padding:14px !important;
    }
    /* icon stays left */
    .ch-service-icon{flex:0 0 auto !important;}
    /* name+domain take the rest of the first line */
    .ch-service-info{
        flex:1 1 auto !important;
        min-width:0 !important;
        order:1 !important;
    }
    .ch-service-name{
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        font-size:14px !important;
    }
    .ch-service-domain{
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }
    /* status badge sits on the first line, far right */
    .ch-service-status-col{
        flex:0 0 auto !important;
        order:2 !important;
        margin-left:auto !important;
    }
    /* hide the chevron on phone (whole row is tappable) */
    .ch-service-arrow{display:none !important;}
    /* price + due drop to a full-width second line, side by side */
    .ch-service-meta,
    .ch-service-due{
        order:3 !important;
        align-items:flex-start !important;
        min-width:0 !important;
        flex:1 1 0 !important;
    }
    .ch-service-meta{padding-left:50px !important;}
    .ch-service-due{align-items:flex-end !important;}
}

/* =====================================================================
   CHROME BRIDGE — classes my header/footer use that the base css lacks.
   Keeps the cloudhive-saas look, wires the new dynamic chrome.
   ===================================================================== */

/* collapsible sidebar groups */
.ch-collapse{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.ch-collapse.show{max-height:500px;}
.ch-chevron{width:14px;height:14px;flex-shrink:0;margin-left:6px;transition:transform .2s ease;color:var(--ch-text-nav,#94a3b8);}
.ch-nav-item.open .ch-chevron{transform:rotate(180deg);}

/* CTA nav item */
.ch-nav-cta{margin-top:10px !important;border:1px dashed var(--ch-primary,#F5A623) !important;background:var(--ch-primary-soft,#fffbeb) !important;color:#b45309 !important;}
.ch-nav-cta>i:first-child{color:var(--ch-primary,#F5A623) !important;}

/* header actions cluster */
.ch-header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.ch-header-switchers{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.ch-header-switch{position:relative;}
.ch-header-switch-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:12px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;}
.ch-header-switch-btn i:first-child{width:16px;height:16px;}
.ch-header-switch-btn-icon{width:38px;min-width:38px;padding:0;justify-content:center;}
.ch-header-switch-btn-icon .ch-header-switch-caret,.ch-header-switch-btn-icon span{display:none !important;}
.ch-header-switch-btn-icon svg{width:16px;height:16px;display:block;flex-shrink:0;color:currentColor;}

.ch-header-switch-caret{width:14px;height:14px;opacity:.72;}
.ch-header-switch-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;max-height:min(70vh,520px);padding:10px;border:1px dashed var(--ch-border-dashed,#cbd5e1);border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.12);display:none;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;z-index:10020;}
.ch-header-switch-menu-right{left:auto;right:0;}
.ch-dd-root.open .ch-header-switch-menu{display:block;}
.ch-header-switch-head{position:sticky;top:-10px;padding:12px 4px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ch-text-nav,#94a3b8);background:#fff;z-index:2;}
.ch-header-switch-form{display:flex;flex-direction:column;gap:6px;margin:0;}
.ch-header-switch-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:0 12px;border:1px dashed transparent;border-radius:10px;background:#fff;color:var(--ch-text-dark,#0f172a);font-size:13px;font-weight:600;text-align:left;transition:border-color .15s ease, background-color .15s ease, color .15s ease;}
.ch-header-switch-item:hover,.ch-header-switch-item:focus{border-color:var(--ch-border-dashed,#cbd5e1);background:#f8fafc;outline:none;}
.ch-header-switch-item.active{border-color:rgba(37,99,235,.26);background:#eff6ff;color:var(--ch-primary-blue,#2563eb);}
.ch-header-switch-item i{width:15px;height:15px;flex-shrink:0;}
#chLangDD .ch-header-switch-menu{max-height:min(calc(100vh - 88px),520px) !important;overflow:hidden !important;flex-direction:column;}
#chLangDD .ch-dd-root.open .ch-header-switch-menu{display:flex !important;}
#chLangDD .ch-header-switch-head{flex:0 0 auto;}
#chLangDD .ch-header-switch-form{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px;}
#chLangDD .ch-header-switch-form::-webkit-scrollbar{width:6px;}

.ch-icon-admin{color:#ef4444 !important;}
.ch-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;background:#ef4444;border-radius:50%;border:2px solid #fff;}
.ch-guest-brand{font-weight:700;color:var(--ch-text-dark,#0f172a);font-size:18px;text-decoration:none;}
.ch-guest-brand img{height:28px;}
.ch-header-guest{justify-content:space-between;}

/* mobile burger */
.ch-burger{display:none;background:none;border:none;color:var(--ch-text-dark,#0f172a);margin-right:12px;padding:6px;cursor:pointer;}
.ch-burger>i{width:24px;height:24px;}

/* full-width main when logged out */
.ch-main-full{margin-left:0 !important;width:100% !important;}

/* content wrappers */
.ch-content{padding:28px;flex:1;max-width:1640px;width:100%;margin:0 auto;}
.ch-breadcrumb{margin-bottom:18px;font-size:13px;}
.ch-breadcrumb .breadcrumb{background:none;padding:0;margin:0;}
.ch-content-grid{display:flex;gap:24px;align-items:flex-start;width:100%;min-width:0;}
.ch-content-main{flex:1;min-width:0;}
.ch-context-sidebar{width:280px;flex-shrink:0;}

/* context sidebar (Nexus $primarySidebar cards) restyled dashed */
.ch-context-sidebar .card-sidebar{margin-bottom:16px;border:1px dashed var(--ch-border-dashed,#cbd5e1) !important;border-radius:12px !important;overflow:hidden;background:#fff;}
.ch-context-sidebar .card-header{padding:14px 16px;background:#fff !important;border-bottom:1px dashed var(--ch-border-dashed,#cbd5e1) !important;}
.ch-context-sidebar .card-title{font-size:14px;font-weight:600;color:var(--ch-text-dark,#0f172a);}
.ch-context-sidebar .list-group-item{border:none !important;border-bottom:1px dashed var(--ch-border-dashed,#cbd5e1) !important;padding:10px 16px;color:var(--ch-text-muted,#64748b);background:#fff;}
.ch-context-sidebar .list-group-item:last-child{border-bottom:none !important;}
.ch-context-sidebar .list-group-item.active{background:var(--ch-primary-soft,#fffbeb) !important;color:#b45309 !important;}
.ch-context-sidebar .list-group-item-action:hover{background:#f8fafc;color:var(--ch-text-dark,#0f172a);}
.sidebar-menu-item-wrapper{display:flex;align-items:center;gap:10px;}
.sidebar-menu-item-icon{width:16px;text-align:center;}

/* footer */
.ch-footer{padding:20px 28px;border-top:1px dashed var(--ch-border-dashed,#cbd5e1);background:#fff;}
.ch-footer-inner{max-width:1640px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.ch-footer-links{list-style:none;display:flex;gap:18px;margin:0;padding:0;}
.ch-footer-links a{color:var(--ch-text-muted,#64748b);font-size:13px;}
.ch-footer-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.ch-copyright{width:100%;margin:0;font-size:12px;color:var(--ch-text-nav,#94a3b8);}

/* lucide default sizing + Google Sans enforce */
[data-lucide]{width:20px;height:20px;stroke-width:2;}
html,body,.ch-shell,button,input,select,textarea,.btn,.form-control,.card,.table,h1,h2,h3,h4,h5,h6,p,a,span,div,li,label{
    font-family:"Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-optical-sizing:auto;font-variation-settings:"GRAD" 0;
}

/* responsive: off-canvas sidebar (base css may target different markup) */
@media (max-width:992px){
    .ch-burger{display:inline-flex;}
    .ch-content-grid{flex-direction:column;}
    .ch-context-sidebar{width:100%;}
    .ch-content{padding:20px;}
}
@media (max-width:576px){
    .ch-content{padding:14px;}
}
@media (min-width:1920px){
    .ch-content,.ch-footer-inner{max-width:1760px;}
}

/* =====================================================================
   HEADER FIXES — mobile sidebar bleed, title clash, stray notif dot
   ===================================================================== */

/* 1. notif dot must anchor to its icon-zone, not the page */
.ch-icon-zone{position:relative !important;}
.ch-dot{
    position:absolute !important;
    top:6px !important;right:6px !important;
    width:8px;height:8px;background:#ef4444;border-radius:50%;
    border:2px solid #fff;
}
.ch-cart-count{position:absolute !important;top:-4px !important;right:-4px !important;}

/* 2. header above the off-canvas sidebar; title doesn't collide */
.ch-header{z-index:10000 !important;gap:10px;}
.ch-header-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 3. on phones the off-canvas sidebar (and its logo) must be fully hidden
      until opened — kill any bleed regardless of base-css z-index */
@media (max-width:992px){
    .ch-sidebar{
        transform:translateX(-100%) !important;
        box-shadow:none !important;
    }
    .ch-sidebar.open{
        transform:translateX(0) !important;
        box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
    }
    /* overlay when open */
    .ch-sidebar.open::after{content:"";}
}

/* logo never overflows its brand box */
.ch-logo-img{max-height:30px;width:auto;max-width:180px;object-fit:contain;}
.ch-sidebar-brand{overflow:hidden;}

/* phone: hide page title in header (burger + icons are enough), give icons room */
@media (max-width:576px){
    .ch-header-title{display:none !important;}
    .ch-header-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end;}
    .ch-header-switchers{order:2;width:100%;justify-content:flex-end;}
    .ch-header-switch-btn{height:36px;padding:0 10px;font-size:11px;}
    .ch-icon-zone{width:36px;height:36px;}
}

/* context sidebar (nexus $primarySidebar): hide broken FA icon squares, tidy */
.ch-context-sidebar i.fa,.ch-context-sidebar i.fas,.ch-context-sidebar i.far,.ch-context-sidebar i.fal,.ch-context-sidebar i.fad,.ch-context-sidebar i[class^='fa-'],.ch-context-sidebar .sidebar-menu-item-icon{display:none !important;}
.ch-context-sidebar .sidebar-menu-item-wrapper{gap:0 !important;}
.ch-context-sidebar .card-minimise{display:none !important;}

/* 2026-06-09 clientareainvoices: action buttons (Pay/View/Download) + mobile wrap */
.ch-invoice-row-end{gap:20px;}
.ch-invoice-actions{flex-shrink:0;}
.ch-invoice-actions .btn-sm{height:38px;display:inline-flex;align-items:center;justify-content:center;}
.ch-invoice-actions .ch-invoice-dl{padding-left:12px;padding-right:12px;}
.ch-invoice-actions .ch-invoice-dl i{width:16px;height:16px;}
@media (max-width:576px){
  .ch-row-box{flex-wrap:wrap;gap:12px;}
  .ch-row-box .ch-invoice-row-end{width:100%;justify-content:space-between;}
}

/* 2026-06-09 viewinvoice: SaaS gateway selector — logo rows (outline) */
.ch-gw-list{display:flex;flex-direction:column;gap:8px;}
.ch-gw-row{
  display:flex;align-items:center;gap:12px;margin:0;
  padding:10px 14px;cursor:pointer;background:#fff;
  border:1px dashed var(--ch-border-dashed,#cbd5e1);
  border-radius:10px;transition:all .15s ease;
}
.ch-gw-row:hover{border-color:var(--ch-primary,#F5A623);}
.ch-gw-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.ch-gw-logo{width:48px;height:28px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.ch-gw-logo img{max-width:48px;max-height:28px;width:auto;height:auto;object-fit:contain;}
.ch-gw-logo-fallback{display:none;align-items:center;justify-content:center;color:var(--ch-text-muted,#64748b);}
.ch-gw-logo-fallback i{width:22px;height:22px;}
.ch-gw-name{font-size:13px;font-weight:600;color:var(--ch-text-dark,#0f172a);flex:1 1 auto;min-width:0;}
.ch-gw-check{display:none;color:var(--ch-primary,#F5A623);flex-shrink:0;}
.ch-gw-check i{width:18px;height:18px;}
.ch-gw-row.active{border-color:var(--ch-primary,#F5A623);background:var(--ch-primary-soft,#fffbeb);}
.ch-gw-row.active .ch-gw-name{color:var(--ch-primary,#F5A623);}
.ch-gw-row.active .ch-gw-check{display:inline-flex;}

/* gateway pay button forced to outline style (per user: all buttons outline) */
.payment-btn-container input[type=submit],
.payment-btn-container button,
.payment-btn-container .btn{
  display:block !important;width:100% !important;height:44px;margin-top:4px;
  background:#fff !important;color:var(--ch-primary,#F5A623) !important;
  border:1px dashed var(--ch-primary,#F5A623) !important;
  border-radius:var(--ch-radius-btn,8px) !important;
  font-weight:700 !important;font-size:13px !important;cursor:pointer;transition:all .15s ease;
}
.payment-btn-container input[type=submit]:hover,
.payment-btn-container button:hover,
.payment-btn-container .btn:hover{background:var(--ch-primary-soft,#fffbeb) !important;}

/* 2026-06-09 supportticketslist: legend, status badge, active filter */
.ch-ticket-legend{gap:16px;font-size:11px;padding:10px 16px;border:1px dashed #e2e8f0;border-radius:8px;background:#f8fafc;}
.ch-legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;}
.ch-ticket-status-badge{display:inline-block;min-width:110px;text-align:center;font-size:11px;font-weight:700;background:#fff !important;border-radius:6px;padding:8px 12px;margin-right:16px;}
.status-filter.active{border-color:var(--ch-primary,#F5A623) !important;color:var(--ch-primary,#F5A623) !important;background:var(--ch-primary-soft,#fffbeb) !important;}

/* 2026-06-09 login / auth — modern SaaS split screen */
.ch-login{position:fixed;inset:0;z-index:60;display:flex;background:#fff;overflow:auto;font-family:"Google Sans",sans-serif;}

/* brand panel (left) */
.ch-login-brand{flex:0 0 44%;max-width:44%;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px;color:#fff;background:linear-gradient(160deg,#0f172a 0%,#1e293b 60%,#0b1220 100%);}
.ch-login-brand::before{content:"";position:absolute;top:-20%;right:-12%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,0.30),transparent 70%);pointer-events:none;z-index:0;}
.ch-login-brand>*{position:relative;z-index:1;}
.ch-login-brand-logo img{max-height:42px;width:auto;}
.ch-login-brand-logo span{font-size:24px;font-weight:800;color:#fff;}
.ch-login-brand-mid h2{font-size:34px;line-height:1.2;font-weight:700;margin:0 0 16px;letter-spacing:-0.5px;}
.ch-login-brand-mid p{font-size:15px;color:#94a3b8;margin:0 0 32px;max-width:420px;}
.ch-login-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px;}
.ch-login-features li{display:flex;align-items:center;gap:12px;font-size:15px;color:#e2e8f0;}
.ch-login-features li i{width:20px;height:20px;color:var(--ch-primary,#F5A623);flex-shrink:0;}
.ch-login-brand-foot{font-size:13px;color:#64748b;}

/* form panel (right) */
.ch-login-form-col{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:40px 24px;min-width:0;}
.ch-login-form-inner{width:100%;max-width:400px;}
.ch-login-mobile-logo{display:block;text-align:center;margin-bottom:24px;}
.ch-login-mobile-logo img{max-height:44px;}
.ch-login-mobile-logo span{font-size:22px;font-weight:800;color:#0f172a;}
.ch-auth-head h4{color:var(--ch-text-dark,#0f172a);font-size:24px;}
.ch-auth-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ch-text-muted,#64748b);margin-bottom:8px;}
.ch-auth-forgot{font-size:12px;font-weight:700;color:var(--ch-primary,#F5A623);}
.ch-auth-forgot:hover{color:#e0930f;text-decoration:none;}
.ch-auth-input{border:1px dashed var(--ch-border-dashed,#cbd5e1);border-radius:10px;overflow:hidden;background:#fff;flex-wrap:nowrap;}
.ch-auth-input:focus-within{border-color:var(--ch-primary,#F5A623);box-shadow:0 0 0 3px rgba(245,166,35,0.12);}
.ch-auth-input .input-group-text{background:#fff;border:none;color:var(--ch-text-nav,#94a3b8);padding:0 14px;}
.ch-auth-input .input-group-text i,.ch-auth-input .btn-reveal-pw i{width:16px;height:16px;}
.ch-auth-input .form-control{border:none !important;box-shadow:none !important;height:48px;background:#fff;font-size:14px;color:var(--ch-text-dark,#0f172a);}
.ch-auth-input .btn-reveal-pw{border:none;background:#fff;color:var(--ch-text-nav,#94a3b8);padding:0 14px;}
.ch-auth-input .btn-reveal-pw:hover{color:var(--ch-primary,#F5A623);}
.ch-auth-remember{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ch-text-muted,#64748b);cursor:pointer;margin:0;}
.ch-turnstile-wrap{min-height:66px;}
.ch-auth-submit{height:48px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;}
.ch-login-form-inner .linked-accounts,.ch-login-form-inner .login-with{margin-top:20px;}

@media (max-width:992px){
  .ch-login-brand{display:none;}
}


/* ===== clientareadetails — CloudHive form styling v3 (2026-06-09) ===== */
.ch-account-form{margin-top:4px;}
.ch-account-form .row{margin-left:-10px;margin-right:-10px;}
.ch-account-form .row > [class*="col-"]{padding-left:10px;padding-right:10px;}
.ch-account-form .form-group{margin-bottom:20px;}
.ch-account-form .form-group.mb-4{margin-bottom:20px;}
.ch-account-form .mt-4{margin-top:8px;}
.ch-account-form .pt-4{padding-top:26px;}

/* labels */
.ch-account-form label{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ch-text-muted,#64748b);margin-bottom:7px;
}

/* inputs / selects — clean rounded CloudHive fields */
.ch-account-form .form-control,
.ch-account-form .custom-select,
.ch-account-form input[type="text"],
.ch-account-form input[type="email"],
.ch-account-form input[type="tel"]{
  display:block;width:100%;height:46px;padding:10px 14px;
  font-family:inherit;font-size:.92rem;color:var(--ch-text-dark,#0f172a);
  background:#fff;border:1px solid #e5e9f0;border-radius:10px;
  box-shadow:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;
}
.ch-account-form .form-control:focus{
  outline:none;border-color:var(--ch-primary,#F5A623);
  box-shadow:0 0 0 3px var(--ch-primary-soft,#fffbeb);
}
.ch-account-form .form-control:disabled,
.ch-account-form .form-control[disabled],
.ch-account-form input:disabled{
  background:#f6f8fb;color:#94a3b8;cursor:not-allowed;border-color:#e5e9f0;
}
.ch-account-form .form-control::placeholder{color:#cbd5e1;}

/* ---- custom dropdown (replaces native <select>; native list cannot be spaced) ---- */
.ch-account-form .ch-dd{position:relative;width:100%;}
.ch-account-form .ch-dd > select{
  position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;
  pointer-events:none!important;margin:0!important;padding:0!important;border:0!important;
}
.ch-account-form .ch-dd-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:46px;
  padding:10px 14px;font-family:inherit;font-size:.92rem;text-align:left;color:var(--ch-text-dark,#0f172a);
  background:#fff;border:1px solid #e5e9f0;border-radius:10px;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.ch-account-form .ch-dd-trigger:hover{border-color:#d8deea;}
.ch-account-form .ch-dd-trigger::after{
  content:"";flex:0 0 auto;width:11px;height:11px;margin-left:8px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  transition:transform .18s;
}
.ch-account-form .ch-dd.open .ch-dd-trigger{border-color:var(--ch-primary,#F5A623);box-shadow:0 0 0 3px var(--ch-primary-soft,#fffbeb);}
.ch-account-form .ch-dd.open .ch-dd-trigger::after{transform:rotate(180deg);}
.ch-account-form .ch-dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ch-account-form .ch-dd-disabled .ch-dd-trigger{background:#f6f8fb;color:#94a3b8;cursor:not-allowed;}
.ch-account-form .ch-dd-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;
  background:#fff;border:1px solid #e5e9f0;border-radius:12px;
  box-shadow:0 12px 28px -8px rgba(15,23,42,.18);padding:6px;
  max-height:260px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.ch-account-form .ch-dd.open .ch-dd-menu{opacity:1;visibility:visible;transform:translateY(0);}
.ch-account-form .ch-dd-item{
  padding:11px 14px;border-radius:8px;font-size:.9rem;color:var(--ch-text-main,#334155);
  cursor:pointer;transition:background .12s,color .12s;margin:2px 0;
}
.ch-account-form .ch-dd-item:hover{background:#f6f8fb;color:var(--ch-text-dark,#0f172a);}
.ch-account-form .ch-dd-item.active{background:var(--ch-primary-soft,#fffbeb);color:#b45309;font-weight:600;}

/* WHMCS phone intl widget */
.ch-account-form .field-icon,.ch-account-form .intl-tel-input,.ch-account-form .iti{width:100%;display:block;}
.ch-account-form .iti input,.ch-account-form .intl-tel-input input{height:46px;border-radius:10px;}

/* section heading rows */
.ch-account-form .border-top{border-top:1px dashed var(--ch-border-dashed,#cbd5e1)!important;}
.ch-account-form h6{
  font-size:1rem;font-weight:800;color:var(--ch-text-dark,#0f172a);
  letter-spacing:.01em;margin:0 0 4px;
}

/* ----- email preferences: toggle-switch rows ----- */
.ch-pref-list{display:flex;flex-direction:column;gap:10px;}
.ch-account-form .ch-pref-row{
  display:flex;align-items:center;gap:16px;margin:0;cursor:pointer;
  padding:14px 18px;border:1px solid #eef1f6;border-radius:12px;background:#fff;
  text-transform:none;letter-spacing:normal;transition:border-color .15s,background .15s,box-shadow .15s;
}
.ch-account-form .ch-pref-row:hover{border-color:#e2e8f0;background:#fcfdff;}
.ch-account-form .ch-pref-row:has(.ch-pref-toggle:checked){border-color:#fde9c8;background:#fffdf8;}
.ch-pref-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;}
.ch-account-form .ch-pref-title{
  font-size:.9rem;font-weight:600;color:var(--ch-text-dark,#0f172a);
  text-transform:none;letter-spacing:normal;margin:0;
}
.ch-account-form .ch-pref-desc{
  font-size:.78rem;font-weight:400;color:var(--ch-text-muted,#64748b);
  text-transform:none;letter-spacing:normal;line-height:1.35;
}
/* hide the real checkbox, drive the switch off it */
.ch-account-form .ch-pref-toggle{
  position:absolute!important;opacity:0!important;width:0!important;height:0!important;
  pointer-events:none!important;margin:0!important;
}
.ch-pref-switch{
  flex:0 0 auto;position:relative;width:36px;height:20px;border-radius:999px;
  background:#dde3ec;transition:background .2s;
}
.ch-pref-switch::after{
  content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s;
}
.ch-account-form .ch-pref-toggle:checked ~ .ch-pref-switch{background:var(--ch-primary,#F5A623);}
.ch-account-form .ch-pref-toggle:checked ~ .ch-pref-switch::after{transform:translateX(16px);}
.ch-account-form .ch-pref-toggle:focus-visible ~ .ch-pref-switch{box-shadow:0 0 0 3px var(--ch-primary-soft,#fffbeb);}

/* footer buttons row — both house outline buttons, identical metrics, compact + symmetric */
.ch-account-form .ch-account-actions{
  display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:28px;padding-top:24px;border-top:1px dashed var(--ch-border-dashed,#cbd5e1);
}
.ch-account-form .ch-account-actions .btn-ch-outline,
.ch-account-form .ch-account-actions .btn-ch-outline-primary{
  height:38px!important;min-width:140px;padding:0 22px!important;font-size:13px!important;
  font-weight:600!important;border-radius:9px!important;
}

/* mobile: single column, full-width buttons */
@media (max-width:767px){
  .ch-account-form .col-md-6{flex:0 0 100%;max-width:100%;}
  .ch-account-form .form-group{margin-bottom:16px;}
  .ch-account-form .ch-account-actions{flex-direction:column-reverse;gap:8px;}
  .ch-account-form .ch-account-actions .btn-ch-outline,
  .ch-account-form .ch-account-actions .btn-ch-outline-primary{width:100%;min-width:0;}
}
/* ===== end clientareadetails ===== */

/* ===================================================================== */
/* ===== SIDEBAR — FINAL UNIFIED RULES (2026-06-09) overrides all above === */
/* Appended last so source-order wins. Kills the !important color wars.   */
/* ===================================================================== */

/* --- shell / brand --- */
.ch-sidebar{
  width:var(--ch-sidebar-w,260px)!important;background:#fff!important;
  border-right:1px solid #eef1f6!important;position:fixed!important;height:100vh!important;
  z-index:1050!important;display:flex!important;flex-direction:column!important;overflow:hidden;
}
.ch-sidebar-brand{height:var(--ch-header-h,70px)!important;display:flex!important;align-items:center!important;padding:0 22px!important;flex:0 0 auto;}
.ch-logo-img{max-height:30px;width:auto;max-width:180px;object-fit:contain;}

/* scroll area for the nav (so long menus don't clip) */
.ch-nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:6px 0 24px;}
.ch-nav::-webkit-scrollbar{width:6px;}
.ch-nav::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:3px;}

/* --- group titles --- */
.ch-nav-group-title{
  font-size:10.5px!important;font-weight:700!important;color:#9aa7b8!important;
  text-transform:uppercase!important;letter-spacing:.06em!important;
  padding:0 22px!important;margin:22px 0 10px!important;display:block!important;
}
.ch-nav-group-title:first-child{margin-top:8px!important;}

/* --- top-level item --- */
.ch-nav-item{
  display:flex!important;align-items:center!important;gap:0!important;
  padding:9px 14px!important;margin:2px 12px!important;
  color:#475569!important;text-decoration:none!important;
  border-radius:10px!important;transition:background .15s,color .15s!important;cursor:pointer;
  border:1px solid transparent!important;
}
.ch-nav-item .lucide{margin-right:13px!important;width:18px!important;height:18px!important;stroke-width:2px!important;color:#94a3b8!important;flex:0 0 auto;}
.ch-nav-info{line-height:1.25;min-width:0;flex:1 1 auto;}
.ch-nav-title{font-size:13px!important;font-weight:600!important;color:#334155!important;display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ch-nav-subtitle{font-size:11px!important;font-weight:400!important;color:#94a3b8!important;display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* hover (uniform — no blue, no orange-subtitle drift) */
.ch-nav-item:hover{background:#f6f8fb!important;color:#334155!important;}
.ch-nav-item:hover .lucide{color:var(--ch-primary,#F5A623)!important;stroke:var(--ch-primary,#F5A623)!important;}
.ch-nav-item:hover .ch-nav-title{color:var(--ch-text-dark,#0f172a)!important;}
.ch-nav-item:hover .ch-nav-subtitle{color:#94a3b8!important;}

/* active top-level item */
.ch-nav-item.active{background:var(--ch-primary-soft,#fffbeb)!important;border-color:#fde9c8!important;}
.ch-nav-item.active .lucide{color:var(--ch-primary,#F5A623)!important;stroke:var(--ch-primary,#F5A623)!important;}
.ch-nav-item.active .ch-nav-title{color:#b45309!important;}
.ch-nav-item.active .ch-nav-subtitle{color:#d8943a!important;}

/* --- chevron --- */
.ch-chevron{width:14px!important;height:14px!important;flex:0 0 auto!important;margin-left:8px!important;margin-right:0!important;color:#b0bccb!important;transition:transform .2s ease!important;}
.ch-nav-item.open .ch-chevron{transform:rotate(180deg)!important;}

/* --- collapse panel --- */
.ch-collapse{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.ch-collapse.show{max-height:600px;}

/* --- sub items --- */
.ch-nav-sub{padding:2px 0 6px 0!important;display:flex;flex-direction:column;margin:0 12px 4px!important;}
.ch-nav-sub-item{
  display:flex!important;align-items:center!important;gap:10px!important;
  font-size:12.5px!important;font-weight:500!important;color:#64748b!important;
  padding:8px 12px 8px 16px!important;margin:1px 0!important;
  text-decoration:none!important;border-radius:8px!important;transition:background .15s,color .15s!important;
}
.ch-nav-sub-item .lucide{width:15px!important;height:15px!important;stroke-width:2px!important;margin:0!important;color:#a3b0c0!important;flex:0 0 auto;}
.ch-nav-sub-item:hover{background:#f6f8fb!important;color:var(--ch-text-dark,#0f172a)!important;}
.ch-nav-sub-item:hover .lucide{color:var(--ch-primary,#F5A623)!important;stroke:var(--ch-primary,#F5A623)!important;}
.ch-nav-sub-item.active{background:var(--ch-primary-soft,#fffbeb)!important;color:#b45309!important;font-weight:600!important;}
.ch-nav-sub-item.active .lucide{color:var(--ch-primary,#F5A623)!important;stroke:var(--ch-primary,#F5A623)!important;}

/* nested rail to connect subs visually to parent */
.ch-nav-sub{position:relative;}
.ch-nav-sub::before{content:"";position:absolute;left:23px;top:2px;bottom:6px;width:1px;background:#eef1f6;}
.ch-nav-sub-item{padding-left:30px!important;}
.ch-nav-sub-item .lucide{position:relative;}

/* no underlines anywhere in nav */
.ch-nav-item:hover,.ch-nav-sub-item:hover{text-decoration:none!important;}
/* ===== end SIDEBAR final ===== */

/* ===== User account dropdown (header) ===== */
.ch-user-dd{position:relative;display:inline-flex;}
.ch-user-trigger{border:none;background:transparent;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.ch-user-dd.open .ch-user-trigger{background:#f1f5f9 !important;color:var(--ch-primary) !important;}
.ch-user-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ch-primary-soft);color:var(--ch-primary);border:1px dashed var(--ch-primary);}
.ch-user-avatar svg{width:18px;height:18px;}
.ch-user-avatar.lg{width:42px;height:42px;}
.ch-user-avatar.lg svg{width:22px;height:22px;}
.ch-user-caret{width:14px;height:14px;color:var(--ch-text-nav);transition:transform .18s ease;}
.ch-user-dd.open .ch-user-caret{transform:rotate(180deg);color:var(--ch-primary);}
.ch-user-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:268px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,42,.22);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:120;}
.ch-user-dd.open .ch-user-menu{opacity:1;visibility:visible;transform:translateY(0);}
.ch-user-menu-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px dashed var(--ch-border-dashed);margin-bottom:6px;}
.ch-user-greeting{font-size:14px;font-weight:700;color:var(--ch-text-dark);line-height:1.3;}
.ch-user-menu-list{display:flex;flex-direction:column;}
.ch-user-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ch-text-main);text-decoration:none;transition:background .14s ease,color .14s ease;}
.ch-user-link svg{width:17px;height:17px;color:var(--ch-text-nav);flex:0 0 auto;}
.ch-user-link span{flex:1 1 auto;}
.ch-user-link:hover{background:#f8fafc;color:var(--ch-text-dark);text-decoration:none;}
.ch-user-link:hover svg{color:var(--ch-primary);}
.ch-user-link.active{background:var(--ch-primary-soft);color:var(--ch-text-dark);}
.ch-user-link.active svg{color:var(--ch-primary);}
.ch-user-link-caret{width:15px !important;height:15px !important;margin-left:auto;transition:transform .18s ease;}
.ch-user-sub-toggle.open .ch-user-link-caret{transform:rotate(180deg);color:var(--ch-primary) !important;}
.ch-user-sub{display:none;flex-direction:column;margin:2px 0 4px 26px;padding-left:10px;border-left:1px dashed var(--ch-border-dashed);}
.ch-user-sub.show{display:flex;}
.ch-user-sublink{padding:7px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ch-text-muted);text-decoration:none;transition:background .14s ease,color .14s ease;}
.ch-user-sublink:hover{background:#f8fafc;color:var(--ch-text-dark);text-decoration:none;}
.ch-user-sublink.active{color:var(--ch-primary);font-weight:600;}
.ch-user-balance{display:flex;align-items:center;justify-content:space-between;padding:10px;margin:4px 0;border-radius:9px;background:#f8fafc;border:1px dashed var(--ch-border-dashed);}
.ch-user-balance-lbl{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ch-text-muted);}
.ch-user-balance-lbl svg{width:16px;height:16px;color:var(--ch-primary);}
.ch-user-balance-val{font-size:14px;font-weight:800;color:var(--ch-text-dark);}
.ch-user-divider{height:1px;background:#eef2f6;margin:6px 2px;}
@media (max-width:992px){.ch-user-menu{position:fixed;top:64px;right:10px;left:auto;}}

/* user dropdown trigger refinements (single avatar circle, no box) */

/* ===== Domains page (clientareadomains) ===== */
.ch-bulk-bar{padding:12px 14px;background:#f8fafc;border:1px dashed var(--ch-border-dashed);border-radius:12px;}
.ch-bulk-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ch-text-muted);margin-right:4px;}
.ch-bulk-bar .btn{display:inline-flex;align-items:center;gap:6px;}
.ch-bulk-bar .btn svg,.ch-bulk-bar .btn i[data-lucide]{width:15px;height:15px;flex:0 0 auto;}
.ch-domain-check{display:inline-flex;align-items:center;margin:0 4px 0 0;cursor:pointer;}
.ch-domain-check input{width:16px;height:16px;accent-color:var(--ch-primary);cursor:pointer;}
.ch-domain-icon img{border-radius:4px;}
.ch-domain-link{color:var(--ch-text-dark);text-decoration:none;font-weight:600;}
.ch-domain-link:hover{color:var(--ch-primary);text-decoration:none;}
.ch-row-subtitle .ch-ar-on{width:14px;height:14px;color:#16a34a;vertical-align:-2px;}
.ch-row-subtitle .ch-ar-off{width:14px;height:14px;color:#dc2626;vertical-align:-2px;}
.ch-row-dot{margin:0 4px;color:var(--ch-text-nav);}

/* ===== Knowledgebase page ===== */
.ch-kb-search-card{padding:18px;}
.ch-kb-search{display:flex;align-items:center;gap:12px;}
.ch-kb-search-wrapper{flex:1 1 auto;width:auto;}
.ch-kb-search .btn-ch-outline-primary{flex:0 0 auto;height:44px;padding:0 24px;}
.ch-kb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.ch-kb-cat{position:relative;display:flex;align-items:flex-start;gap:14px;padding:18px;background:#fff;border:1px dashed var(--ch-border-dashed);border-radius:14px;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.ch-kb-cat:hover{border-color:var(--ch-primary);box-shadow:0 12px 26px -14px rgba(15,23,42,.18);transform:translateY(-2px);text-decoration:none;}
.ch-kb-cat-icon{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:var(--ch-primary-soft);color:var(--ch-primary);border:1px solid #fde9c8;}
.ch-kb-cat-icon svg{width:22px;height:22px;}
.ch-kb-cat-body{flex:1 1 auto;min-width:0;}
.ch-kb-cat-head{display:flex;align-items:center;gap:10px;}
.ch-kb-cat-title{font-size:15px;font-weight:700;color:var(--ch-text-dark);}
.ch-kb-count{flex:0 0 auto;margin-left:auto;font-size:11px;white-space:nowrap;}
.ch-kb-cat-desc{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--ch-text-muted);}
.ch-kb-edit{margin-top:10px;}
.ch-kb-cat-arrow{flex:0 0 auto;width:18px;height:18px;color:#cbd5e1;align-self:center;transition:transform .15s ease,color .15s ease;}
.ch-kb-cat:hover .ch-kb-cat-arrow{color:var(--ch-primary);transform:translateX(2px);}
.ch-kb-pop-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px dashed var(--ch-border-dashed);}
.ch-kb-pop-head h6{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ch-text-muted);display:inline-flex;align-items:center;gap:8px;}
.ch-kb-pop-head h6 svg{width:15px;height:15px;color:var(--ch-primary);}
.ch-kb-pop-item{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #f1f5f9;text-decoration:none;color:var(--ch-text-main);transition:background .14s ease;}
.ch-kb-pop-item:last-child{border-bottom:0;}
.ch-kb-pop-item:hover{background:#f8fafc;text-decoration:none;color:var(--ch-text-dark);}
.ch-kb-pop-icon{flex:0 0 auto;width:16px;height:16px;color:var(--ch-text-nav);}
.ch-kb-pop-title{flex:1 1 auto;font-size:14px;font-weight:500;}
.ch-kb-pop-arrow{flex:0 0 auto;width:15px;height:15px;color:#cbd5e1;}
.ch-kb-pop-item:hover .ch-kb-pop-arrow{color:var(--ch-primary);}
@media (max-width:768px){.ch-kb-grid{grid-template-columns:1fr;}.ch-kb-search{flex-wrap:wrap;}.ch-kb-search .btn-ch-outline-primary{width:100%;}}

/* ===== Knowledgebase — article + category internal pages ===== */
.ch-kb-article{padding:26px 28px;}
.ch-kb-article-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.ch-kb-article-title{margin:0;font-size:22px;font-weight:800;color:var(--ch-text-dark);line-height:1.3;}
.ch-kb-print{flex:0 0 auto;white-space:nowrap;}
.ch-kb-print svg{width:14px;height:14px;margin-right:5px;vertical-align:-2px;}
.ch-kb-article-meta{display:flex;align-items:center;gap:14px;margin-top:14px;padding-bottom:18px;border-bottom:1px dashed var(--ch-border-dashed);}
.ch-kb-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;}
.ch-kb-tag svg{width:13px;height:13px;}
.ch-kb-meta-useful{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ch-text-muted);}
.ch-kb-meta-useful svg{width:14px;height:14px;color:#16a34a;}
/* prose */
.ch-kb-article-body{padding-top:20px;font-size:14.5px;line-height:1.75;color:var(--ch-text-main);}
.ch-kb-article-body h1,.ch-kb-article-body h2,.ch-kb-article-body h3,.ch-kb-article-body h4{color:var(--ch-text-dark);font-weight:700;margin:1.4em 0 .6em;line-height:1.35;}
.ch-kb-article-body h1{font-size:20px;}.ch-kb-article-body h2{font-size:18px;}.ch-kb-article-body h3{font-size:16px;}.ch-kb-article-body h4{font-size:15px;}
.ch-kb-article-body p{margin:0 0 1em;}
.ch-kb-article-body a{color:var(--ch-primary);text-decoration:none;}
.ch-kb-article-body a:hover{text-decoration:underline;}
.ch-kb-article-body ul,.ch-kb-article-body ol{margin:0 0 1em;padding-left:1.5em;}
.ch-kb-article-body li{margin:.3em 0;}
.ch-kb-article-body img{max-width:100%;height:auto;border-radius:8px;border:1px solid #eef2f6;margin:.6em 0;}
.ch-kb-article-body code{background:#f1f5f9;color:#0f172a;padding:2px 6px;border-radius:5px;font-size:13px;}
.ch-kb-article-body pre{background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:10px;overflow:auto;font-size:13px;line-height:1.6;margin:0 0 1em;}
.ch-kb-article-body pre code{background:transparent;color:inherit;padding:0;}
.ch-kb-article-body blockquote{margin:0 0 1em;padding:10px 16px;border-left:3px solid var(--ch-primary);background:var(--ch-primary-soft);border-radius:0 8px 8px 0;color:var(--ch-text-main);}
.ch-kb-article-body table{width:100%;border-collapse:collapse;margin:0 0 1em;font-size:13.5px;}
.ch-kb-article-body th,.ch-kb-article-body td{border:1px solid #e2e8f0;padding:8px 12px;text-align:left;}
.ch-kb-article-body th{background:#f8fafc;font-weight:700;color:var(--ch-text-dark);}
.ch-kb-article-body hr{border:0;border-top:1px dashed var(--ch-border-dashed);margin:1.4em 0;}
/* vote */
.ch-kb-vote{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:24px;padding:16px 18px;background:#f8fafc;border:1px dashed var(--ch-border-dashed);border-radius:12px;}
.ch-kb-vote-q{font-size:14px;font-weight:700;color:var(--ch-text-dark);}
.ch-kb-vote-actions{display:flex;gap:8px;margin:0;}
.ch-kb-vote-actions svg{width:14px;height:14px;margin-right:5px;vertical-align:-2px;}
/* article rows (related + category list) */
.ch-kb-art-item{display:flex;align-items:center;gap:13px;padding:14px 20px;border-bottom:1px solid #f1f5f9;text-decoration:none;color:var(--ch-text-main);transition:background .14s ease;}
.ch-kb-art-item:last-child{border-bottom:0;}
.ch-kb-art-item:hover{background:#f8fafc;text-decoration:none;}
.ch-kb-art-icon{flex:0 0 auto;width:18px;height:18px;color:var(--ch-text-nav);}
.ch-kb-art-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.ch-kb-art-title{font-size:14px;font-weight:600;color:var(--ch-text-dark);}
.ch-kb-art-snippet{font-size:12.5px;color:var(--ch-text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ch-kb-art-arrow{flex:0 0 auto;width:15px;height:15px;color:#cbd5e1;}
.ch-kb-art-item:hover .ch-kb-art-arrow{color:var(--ch-primary);}
.ch-kb-art-empty{padding:18px 20px;color:var(--ch-text-muted);font-size:13.5px;text-align:center;}
@media (max-width:768px){.ch-kb-article{padding:20px;}.ch-kb-article-head{flex-direction:column;}}

/* ===== Account Security (clientareasecurity) ===== */
.ch-sec-card{padding:24px 26px;}
.ch-sec-note{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;background:var(--ch-primary-soft);border:1px dashed #fde9c8;border-radius:11px;font-size:13.5px;line-height:1.55;color:var(--ch-text-main);}
.ch-sec-note svg{flex:0 0 auto;width:18px;height:18px;color:var(--ch-primary);margin-top:1px;}
.ch-sso-row{display:flex;align-items:center;gap:14px;margin:20px 0 4px;}
.ch-sso-text{font-size:14px;font-weight:600;color:var(--ch-text-dark);}
/* clean iOS-style toggle (replaces WHMCS bootstrapSwitch) */
.ch-sso-switch{position:relative;display:inline-block;width:46px;height:26px;margin:0;flex:0 0 auto;cursor:pointer;}
.ch-sso-switch input{position:absolute;opacity:0;width:0;height:0;}
.ch-sso-slider{position:absolute;inset:0;background:#cbd5e1;border-radius:26px;transition:background .18s ease;}
.ch-sso-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease;}
.ch-sso-switch input:checked + .ch-sso-slider{background:var(--ch-primary);}
.ch-sso-switch input:checked + .ch-sso-slider::before{transform:translateX(20px);}
.ch-sec-disablenotice{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--ch-text-muted);}

/* ===== Payment Methods (account-paymentmethods) ===== */
.ch-pm-actions .btn i[data-lucide],.ch-pm-actions .btn svg{width:14px;height:14px;vertical-align:-2px;}
.ch-pm-actions .btn-set-default.disabled{opacity:.5;pointer-events:none;}
@media (max-width:576px){.ch-pm-actions{flex-wrap:wrap;}}

/* ===== Security Settings (user-security): 2FA + questions ===== */
.ch-sec-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ch-text-muted);margin:0 0 14px;}
.ch-2fa-head{display:flex;align-items:flex-start;gap:12px;}
.ch-2fa-head-text{flex:1 1 auto;min-width:0;}
.ch-2fa-status{margin:6px 0 0;font-size:13.5px;color:var(--ch-text-main);}
.ch-2fa-status strong{color:var(--ch-text-dark);}
.ch-2fa-head .badge{flex:0 0 auto;margin-left:auto;}
.ch-2fa-note{margin:16px 0;}
.ch-2fa-note svg{color:var(--ch-primary);}
.ch-2fa-actions{display:flex;flex-wrap:wrap;gap:8px;}
.ch-2fa-actions .btn svg,.ch-2fa-actions .btn i[data-lucide]{width:15px;height:15px;margin-right:6px;vertical-align:-2px;}
.ch-form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
/* ensure WHMCS w-hidden hides buttons too (our .btn display would otherwise override) */
.btn.w-hidden{display:none !important;}

/* ===== Notification dropdown (bell) ===== */
.ch-notif-dd{position:relative;display:inline-flex;}
.ch-notif-trigger{border:none;background:transparent;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.ch-notif-dd.open .ch-notif-trigger{background:#f1f5f9 !important;color:var(--ch-primary) !important;}
.ch-notif-menu{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:92vw;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,42,.22);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:120;overflow:hidden;}
.ch-notif-dd.open .ch-notif-menu{opacity:1;visibility:visible;transform:translateY(0);}
.ch-notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px dashed var(--ch-border-dashed);}
.ch-notif-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ch-text-muted);}
.ch-notif-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--ch-primary);color:#fff;font-size:11px;font-weight:700;}
.ch-notif-body{max-height:360px;overflow-y:auto;}
.ch-notif-item{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-bottom:1px solid #f1f5f9;text-decoration:none;color:var(--ch-text-main);transition:background .14s ease;}
.ch-notif-item:last-child{border-bottom:0;}
.ch-notif-item:hover{background:#f8fafc;text-decoration:none;color:var(--ch-text-dark);}
.ch-notif-ic{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;}
.ch-notif-ic svg{width:16px;height:16px;}
.ch-notif-danger .ch-notif-ic{background:#fef2f2;color:#dc2626;}
.ch-notif-warning .ch-notif-ic{background:#fffbeb;color:#d97706;}
.ch-notif-success .ch-notif-ic{background:#f0fdf4;color:#16a34a;}
.ch-notif-info .ch-notif-ic{background:#eff6ff;color:#2563eb;}
.ch-notif-msg{flex:1 1 auto;font-size:13px;line-height:1.5;padding-top:5px;}
.ch-notif-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 16px;color:var(--ch-text-nav);}
.ch-notif-empty svg{width:26px;height:26px;color:#cbd5e1;}
.ch-notif-empty span{font-size:13px;}
@media (max-width:992px){.ch-notif-menu{position:fixed;top:64px;right:10px;left:auto;}}

/* ===== GLOBAL: modals / tooltips / popovers in CloudHive style ===== */
.modal-content{border:none;border-radius:16px;box-shadow:0 24px 60px -16px rgba(15,23,42,.35);overflow:hidden;}
.modal-header{border-bottom:1px dashed var(--ch-border-dashed);padding:18px 22px;align-items:center;}
.modal-title,.modal-header h4,.modal-header h5{font-size:17px;font-weight:800;color:var(--ch-text-dark);margin:0;}
.modal-header .close{padding:0;margin:0;width:30px;height:30px;border-radius:8px;opacity:.6;font-size:22px;line-height:1;color:var(--ch-text-muted);transition:background .14s ease,opacity .14s ease;}
.modal-header .close:hover{opacity:1;background:#f1f5f9;color:var(--ch-text-dark);}
.modal-body{padding:22px;font-size:14px;line-height:1.65;color:var(--ch-text-main);}
.modal-footer{border-top:1px dashed var(--ch-border-dashed);padding:14px 22px;display:flex;justify-content:flex-end;align-items:center;gap:8px;}
.modal-footer > .btn{margin:0;}
.modal-footer .btn{border-radius:9px;font-size:13px;font-weight:600;padding:9px 20px;min-width:110px;text-align:center;box-shadow:none;}
.modal-footer .btn-primary,.modal-footer .modal-submit{background:transparent;border:1px solid var(--ch-primary);color:var(--ch-primary);}
.modal-footer .btn-primary:hover,.modal-footer .modal-submit:hover{background:var(--ch-primary);color:#fff;}
.modal-footer .btn-default,.modal-footer .btn-secondary{background:#fff;border:1px solid #e2e8f0;color:var(--ch-text-main);}
.modal-footer .btn-default:hover,.modal-footer .btn-secondary:hover{background:#f1f5f9;color:var(--ch-text-dark);}
.modal-footer .btn-danger{background:transparent;border:1px solid #dc2626;color:#dc2626;}
.modal-footer .btn-danger:hover{background:#dc2626;color:#fff;}
.modal-backdrop.show{opacity:.5;background:#0f172a;}
/* tooltips */
.tooltip{font-family:inherit;}
.tooltip-inner{background:#0f172a;color:#fff;border-radius:8px;padding:7px 11px;font-size:12px;font-weight:500;line-height:1.4;max-width:240px;box-shadow:0 8px 20px -6px rgba(15,23,42,.4);}
.tooltip.bs-tooltip-top .arrow::before,.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before{border-top-color:#0f172a;}
.tooltip.bs-tooltip-bottom .arrow::before,.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before{border-bottom-color:#0f172a;}
.tooltip.bs-tooltip-left .arrow::before,.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before{border-left-color:#0f172a;}
.tooltip.bs-tooltip-right .arrow::before,.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before{border-right-color:#0f172a;}
/* popovers */
.popover{border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 18px 40px -12px rgba(15,23,42,.25);font-family:inherit;}
.popover-header{background:#f8fafc;border-bottom:1px dashed var(--ch-border-dashed);font-size:13px;font-weight:700;color:var(--ch-text-dark);border-radius:12px 12px 0 0;padding:10px 14px;}
.popover-body{padding:13px 14px;font-size:13px;line-height:1.6;color:var(--ch-text-main);}

/* ===== Bell ring animation when client has notifications ===== */
@keyframes ch-bell-ring{
    0%{transform:rotate(0);}
    2%{transform:rotate(15deg);}
    4%{transform:rotate(-13deg);}
    6%{transform:rotate(10deg);}
    8%{transform:rotate(-8deg);}
    10%{transform:rotate(6deg);}
    12%{transform:rotate(-4deg);}
    14%{transform:rotate(2deg);}
    16%{transform:rotate(0);}
    100%{transform:rotate(0);}
}
@keyframes ch-dot-pulse{
    0%{box-shadow:0 0 0 0 rgba(239,68,68,.55);}
    70%{box-shadow:0 0 0 6px rgba(239,68,68,0);}
    100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}
.ch-notif-trigger.has-alerts svg{transform-origin:50% 3px;animation:ch-bell-ring 4s ease-in-out infinite;}
.ch-notif-trigger.has-alerts .ch-dot{animation:ch-dot-pulse 1.8s ease-in-out infinite;}
.ch-notif-dd.open .ch-notif-trigger.has-alerts svg{animation:none;}

/* ===== GLOBAL: center all modals + unified form controls ===== */
.modal-dialog{display:flex;align-items:center;min-height:calc(100% - 1rem);}
@media (min-width:576px){.modal-dialog{min-height:calc(100% - 3.5rem);}}
.modal-dialog > .modal-content{width:100%;}
/* unified checkboxes + radios (orange accent) */
input[type=checkbox],input[type=radio]{accent-color:var(--ch-primary);cursor:pointer;}
.modal input[type=checkbox],.modal input[type=radio]{width:16px;height:16px;vertical-align:middle;}

/* ===== Localisation (language/currency) modal — light CloudHive style ===== */
.modal-localisation .modal-content{background:#fff;color:var(--ch-text-main);}
.modal-localisation .modal-body{padding:26px 28px 20px;}
.modal-localisation .modal-body .close{color:var(--ch-text-muted);opacity:.7;text-shadow:none;}
.modal-localisation .modal-body .close:hover{opacity:1;color:var(--ch-text-dark);}
.modal-localisation h5,.modal-localisation .h5{color:var(--ch-text-dark);font-weight:800;font-size:16px;}
.modal-localisation .item-selector .item{display:block;border:1px dashed var(--ch-border-dashed);border-radius:9px;padding:9px 12px;margin-bottom:10px;color:var(--ch-text-main);text-decoration:none;text-align:center;font-size:13px;font-weight:500;background:#fff;transition:border-color .14s ease,background .14s ease,color .14s ease;}
.modal-localisation .item-selector .item:hover{border-color:var(--ch-primary);color:var(--ch-text-dark);text-decoration:none;}
.modal-localisation .item-selector .item.active{background:var(--ch-primary-soft);border-color:var(--ch-primary);border-style:solid;color:var(--ch-text-dark);font-weight:600;}
.modal-localisation .modal-footer{border-top:1px dashed var(--ch-border-dashed);}
.modal-localisation .modal-footer .btn-default{background:transparent;border:1px solid var(--ch-primary);color:var(--ch-primary);}
.modal-localisation .modal-footer .btn-default:hover{background:var(--ch-primary);color:#fff;}

/* ===== Reusable CloudHive toggle (.ch-toggle) ===== */
.ch-toggle-row{display:inline-flex;align-items:center;gap:12px;margin:6px 0 0;cursor:pointer;}
.ch-toggle-label{font-size:14px;font-weight:500;color:var(--ch-text-main);}
.ch-toggle{position:relative;display:inline-block;width:46px;height:26px;margin:0;flex:0 0 auto;cursor:pointer;}
.ch-toggle input{position:absolute;opacity:0;width:0;height:0;}
.ch-toggle-slider{position:absolute;inset:0;background:#cbd5e1;border-radius:26px;transition:background .18s ease;}
.ch-toggle-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease;}
.ch-toggle input:checked + .ch-toggle-slider{background:var(--ch-primary);}
.ch-toggle input:checked + .ch-toggle-slider::before{transform:translateX(20px);}


/* ============================================================
 * ===== Checkout / viewcart (active orderform = shufytheme_cart)
 * CSS-only override. Targets shufytheme BEM wrappers:
 *   .standard__cart__order__steps__container
 *   .view__cart__items__wrapper
 *   .already__registered__wrapper
 *   .checkout__informations__wrapper
 *   .sticky__order__summary__sidebar__wrapper
 *   .default__shadow__panel
 * Restyles to CloudHive look (orange, dashed, rounded16, lucide-ish).
 * NO markup changes. Backups: shufytheme_cart/*.bak_pristine_20260610.
 * ============================================================ */

/* Stepper top */
.standard__cart__order__steps__container{background:transparent !important;padding:0 !important;margin-bottom:0;}
.standard__cart__order__steps__container .main__page__content{padding:0;}
.orderform__cart__header h1{font-family:"Google Sans",system-ui,-apple-system,sans-serif !important;font-size:24px !important;font-weight:800 !important;color:var(--ch-text-dark) !important;margin:0 0 4px !important;}
.orderform__cart__header p{font-size:13.5px !important;color:var(--ch-text-muted) !important;margin:0 0 18px !important;font-weight:400 !important;}
.standard__cart__order__steps__wrapper{margin-top:0 !important;margin-bottom:18px !important;}
.standard__cart__order__steps{display:flex;flex-wrap:wrap;gap:6px;background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:12px 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.standard__cart__order__steps__item{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;border:1px dashed transparent;font-size:12.5px;font-weight:600;color:var(--ch-text-muted) !important;text-decoration:none !important;transition:.15s;}
.standard__cart__order__steps__item:hover{color:var(--ch-primary) !important;}
.standard__cart__order__steps__item__number{width:22px;height:22px;border-radius:50%;background:#eef2f6;color:var(--ch-text-muted);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;}
.standard__cart__order__steps__item__text{font-size:12.5px;}
.standard__cart__order__steps__item.done .standard__cart__order__steps__item__number{background:#ecfdf5;color:#10b981;}
.standard__cart__order__steps__item.done{color:var(--ch-text-dark) !important;}
.standard__cart__order__steps__item.current{background:var(--ch-primary-soft);border-color:var(--ch-primary);color:var(--ch-primary) !important;}
.standard__cart__order__steps__item.current .standard__cart__order__steps__item__number{background:var(--ch-primary);color:#fff;}

/* Layout grid (main + right sidebar) */
#order-standard_cart{margin-top:0;}
#order-standard_cart > .row{margin:0 !important;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;}
@media (max-width:991px){#order-standard_cart > .row{grid-template-columns:1fr;}}
.orderform__main__content__wrapper__with__sidebar{min-width:0;display:flex;flex-direction:column;gap:18px;padding:0 !important;width:100%;}
#order-standard_cart .main-sidebar,#order-standard_cart .main-sidebar-lg{padding:0 !important;min-width:0;width:100%;}

/* Universal CARD: every .default__shadow__panel becomes ch-card */
.default__shadow__panel{background:#fff !important;border:1px solid #eef2f6 !important;border-radius:14px !important;box-shadow:0 1px 2px rgba(15,23,42,.04) !important;padding:0 !important;margin:0 !important;}
.default__shadow__panel__body{padding:18px 22px !important;}
.default__shadow__panel__body__small{padding:14px 18px !important;}

/* CART ITEMS PANEL */
.view__cart__items__wrapper{padding:0 !important;overflow:hidden;}
.view__cart__items__wrapper__header{background:#f8fafc;padding:12px 22px !important;border-bottom:1px solid #eef2f6;border-radius:14px 14px 0 0;}
.view__cart__items__wrapper__header .row{display:flex !important;width:100%;margin:0 !important;align-items:center;}
.view__cart__items__wrapper__header .row > [class*="col-"]{padding:0 !important;}
.view__cart__items__wrapper__header__title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ch-text-muted);}

.view__cart__items__wrapper__body{padding:0 !important;}
.view__cart__items__wrapper__body__item{padding:14px 22px;border-bottom:1px dashed var(--ch-border-dashed);}
.view__cart__items__wrapper__body__item:last-of-type{border-bottom:0;}
.view__cart__items__wrapper__main__item{display:flex !important;flex-wrap:wrap !important;align-items:center;gap:10px;margin:0 !important;}
.view__cart__items__wrapper__main__item > [class*="col-"]{padding:0 !important;flex:initial;}
.view__cart__items__wrapper__main__item > .col-7{flex:1 1 50%;min-width:0;}
.view__cart__items__wrapper__main__item > .col-8{flex:1 1 60%;min-width:0;}
.view__cart__items__wrapper__main__item > .col-5{flex:1 1 45%;min-width:0;}
.view__cart__items__wrapper__main__item > .col-4{flex:0 0 160px;text-align:right;}
.view__cart__items__wrapper__main__item > .col-2{flex:0 0 90px;text-align:center;}
.view__cart__items__wrapper__main__item > .col{flex:0 0 160px;text-align:right;}

.view__cart__items__wrapper__body__item__productinfo h6{font-size:14.5px !important;font-weight:700 !important;color:var(--ch-text-dark) !important;margin:0 !important;}
.view__cart__items__wrapper__body__item__productinfo .this__item__domain{display:block;font-size:12.5px;color:var(--ch-text-muted);margin-top:2px;}

.item__price .price,.item__price > .d-block > .price{font-size:14px;font-weight:700;color:var(--ch-text-dark);}
.item__price .cycle,.item__price .billing__cycle__dropdown__separation{font-size:12.5px;color:var(--ch-text-muted);font-weight:500;}
.item__price .product__only__setup__price,.item__price .renewal{font-size:11.5px;color:var(--ch-text-muted);margin-top:3px;}
.item__price{font-size:14px;}

/* Qty input + repeat button */
.item__qty{display:flex !important;align-items:center;gap:6px;justify-content:center;}
.item__qty input.form-control{width:64px;padding:5px 8px;font-size:13.5px;text-align:center;font-weight:700;border:1px solid #e2e8f0;border-radius:9px;}
.update__item__qty__btn{background:transparent;border:1px dashed var(--ch-border-dashed);border-radius:8px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ch-text-muted);transition:.15s;}
.update__item__qty__btn:hover{border-color:var(--ch-primary);color:var(--ch-primary);background:var(--ch-primary-soft);}
.update__item__qty__btn svg{width:13px;height:13px;}

/* Item actions (edit/trash) */
.view__cart__items__wrapper__body__item__options{position:absolute !important;top:14px;right:22px;display:flex;gap:5px;align-items:center;}
.view__cart__items__wrapper__body__item__options a,.view__cart__items__wrapper__body__item__options button{background:transparent !important;border:1px solid #eef2f6 !important;border-radius:8px !important;width:30px;height:30px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center;color:var(--ch-text-muted) !important;transition:.15s;}
.view__cart__items__wrapper__body__item__options a:hover{border-color:var(--ch-primary) !important;color:var(--ch-primary) !important;background:var(--ch-primary-soft) !important;}
.view__cart__items__wrapper__body__item__options button:hover{border-color:#dc2626 !important;color:#dc2626 !important;background:#fef2f2 !important;}
.view__cart__items__wrapper__body__item__options svg{width:14px;height:14px;}

/* Position relative needed for absolute action buttons */
.view__cart__items__wrapper__main__item.position-relative{position:relative;}

/* Config options block under product */
.view__cart__items__wrapper__body__item__product__configoptions{margin-top:10px;background:#f8fafc;border:1px dashed var(--ch-border-dashed);border-radius:10px;padding:8px 14px;}
.configoptions__item{display:flex !important;align-items:center;gap:8px;padding:5px 0;border-bottom:1px dashed #e2e8f0;font-size:13px;margin:0 !important;}
.configoptions__item:last-child{border-bottom:0;}
.configoptions__item > [class*="col-"]{padding:0 !important;flex:initial;}
.configoptions__item > .col-7,.configoptions__item > .col-6{flex:1 1 55%;min-width:0;}
.configoptions__item > .col-5{flex:0 0 35%;}
.configoptions__item > .col{flex:0 0 160px;text-align:right;}
.configoptions__item .addon__name{flex:1 1 55%;min-width:0;}
.configoptions__item .item__name{color:var(--ch-text-muted);margin-right:4px;}
.configoptions__item .item__value{color:var(--ch-text-dark);font-weight:600;}
.configoptions__item .addon__price{flex:0 0 160px;text-align:right;}
.configoptions__item .addon__price .item__price{font-size:13px;color:var(--ch-text-dark);font-weight:600;}
.configoptions__item .item-price{flex:0 0 160px;text-align:right;color:var(--ch-text-dark);font-weight:600;font-size:13px;}
.configoptions__item .addon__qty__empty{color:var(--ch-text-muted);text-align:center;}

/* Footer of cart items list */
.view__cart__items__wrapper__footer{background:#fafbfc;padding:14px 22px !important;border-top:1px dashed var(--ch-border-dashed);}
.view__cart__items__wrapper__footer .row{margin:0 !important;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.view__cart__items__wrapper__footer .row > [class*="col-"]{padding:0 !important;flex:0 0 auto;}

/* CHECKOUT BLOCK = main form */
.checkout__informations__wrapper{padding:0 !important;display:flex;flex-direction:column;gap:18px;}

/* Login/register accordion */
.already__registered__wrapper{padding:0 !important;overflow:hidden;}
.already__registered__card{border-bottom:1px dashed var(--ch-border-dashed);}
.already__registered__card:last-child{border-bottom:0;}
.already__registered__card.border-0{border:none !important;}
.already__registered__card__header{padding:0;}
.already__registered__card__title{display:flex !important;align-items:center;gap:10px;width:100%;padding:14px 22px !important;background:transparent !important;border:none !important;cursor:pointer;text-align:left;font-size:14px !important;color:var(--ch-text-dark) !important;font-weight:700 !important;}
.already__registered__card__title:hover{background:#f8fafc !important;}
.already__registered__card__title .cursor{width:16px;height:16px;border:1.5px solid var(--ch-text-muted);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;}
.already__registered__card__title:not(.collapsed) .cursor{border-color:var(--ch-primary);background:var(--ch-primary);}
.already__registered__card__title:not(.collapsed) .cursor::after{content:"";position:absolute;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);}
.already__registered__card__title .coodiv-text-11{font-size:14px !important;font-weight:700 !important;color:inherit !important;}
.already__registered__card__body{padding:14px 22px 22px !important;}
.already__registered__card__body.p-0,.already__registered__card__body.pt-0.pb-0{padding:14px 22px 22px !important;}

/* Existing customer login row */
.checkout__page__auth__wrapper .alert-danger{background:#fef2f2;border:1px dashed #fecaca;border-radius:11px;padding:10px 14px;color:#991b1b;font-size:13px;margin-bottom:12px;}
.checkout__page__auth__wrapper .row{margin:0 -8px !important;}
.checkout__page__auth__wrapper .row > [class*="col-"]{padding:0 8px !important;}
@media (max-width:768px){
  .checkout__page__auth__wrapper .row{flex-direction:column;}
  .checkout__page__auth__wrapper .col-sm-5,.checkout__page__auth__wrapper .col-sm-2{flex:0 0 100%;max-width:100%;}
}

/* Account select cards (panel__check__cart__group) */
.panel__check__cart__group{margin:0 -8px !important;gap:0 !important;}
.panel__check__cart__group > [class*="col-"]{padding:8px !important;}
.radio__check__panel{cursor:pointer;}
.radio__check__panel.default__shadow__panel{border:1px dashed var(--ch-border-dashed) !important;transition:.15s;}
.radio__check__panel:has(input[type=radio]:checked){border-style:solid !important;border-color:var(--ch-primary) !important;background:var(--ch-primary-soft) !important;}
.panel__check__cart__group__label{display:flex !important;align-items:flex-start;gap:10px;margin:0;cursor:pointer;}
.cercle__input__radio{flex:0 0 18px;position:relative;height:18px;width:18px;margin-top:2px;}
.cercle__input__radio input[type=radio]{position:absolute;opacity:0;width:18px;height:18px;cursor:pointer;margin:0;}
.cercle__input__radio .icheck__control__check__icon{position:absolute;inset:0;border:1.5px solid #cbd5e1;border-radius:50%;background:#fff;transition:.15s;}
.cercle__input__radio input[type=radio]:checked + .icheck__control__check__icon{border-color:var(--ch-primary);}
.cercle__input__radio .icheck__control__check__icon__checked__effect{position:absolute;inset:3px;border-radius:50%;background:var(--ch-primary);opacity:0;transition:.15s;}
.cercle__input__radio input[type=radio]:checked + .icheck__control__check__icon .icheck__control__check__icon__checked__effect{opacity:1;}
.panel__check__cart__group__content{padding-left:8px !important;flex:1 1 auto;min-width:0;}
.panel__check__cart__group__content h6{font-size:13.5px !important;font-weight:700 !important;color:var(--ch-text-dark) !important;margin:0 0 3px !important;display:flex !important;align-items:center !important;flex-wrap:wrap;gap:6px;}
.panel__check__cart__group__content .label{display:inline-block;padding:2px 8px;font-size:10.5px;font-weight:700;border-radius:99px;background:#eef2f6;color:var(--ch-text-muted);text-transform:uppercase;letter-spacing:.04em;}
.panel__check__cart__group__content .label-info{background:#e0f2fe;color:#0369a1;}
.panel__check__cart__group__content p{font-size:12.5px !important;color:var(--ch-text-muted) !important;font-weight:500 !important;margin:0 !important;}

/* All form inputs */
.checkout__informations__wrapper .form-control,
.standard__cart__order__steps__container .form-control,
.sticky__order__summary__sidebar__wrapper .form-control,
.field-container .form-control,
input.field.form-control{border:1px solid #e2e8f0 !important;border-radius:9px !important;padding:9px 13px !important;font-size:14px !important;background:#fff !important;color:var(--ch-text-dark) !important;width:100% !important;transition:.15s;line-height:1.4 !important;height:auto !important;box-shadow:none !important;}
input.field.form-control:focus,.checkout__informations__wrapper .form-control:focus,.standard__cart__order__steps__container .form-control:focus{border-color:var(--ch-primary) !important;box-shadow:0 0 0 3px rgba(245,166,35,.12) !important;outline:none !important;}
.form-group{margin:0 0 14px !important;}
.form-group:last-child{margin-bottom:0 !important;}
.checkout__informations__wrapper .form-group span.d-block,
.checkout__informations__wrapper .form-group label{display:block !important;font-size:12.5px !important;font-weight:600 !important;color:var(--ch-text-dark) !important;margin:0 0 6px !important;padding:0 !important;}
.field-help-text,.help-block{font-size:12px !important;color:var(--ch-text-muted) !important;margin-top:4px !important;}
.field-error-msg{font-size:12px;color:#dc2626;margin-top:4px;display:none;}

/* h6 field titles */
.checkout__informations__wrapper h6.coodiv-text-9,
.checkout__informations__wrapper .field__title{font-family:"Google Sans",system-ui,sans-serif !important;font-size:13px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.04em !important;color:var(--ch-text-muted) !important;margin:0 0 14px !important;}
.checkout__informations__wrapper .field-container > .row.mb-5{margin-bottom:6px !important;}
.checkout__informations__wrapper .field-container > .row.mb-5 h6{margin-bottom:6px !important;}
.checkout__informations__wrapper .field-container p.coodiv-text-12{font-size:12.5px !important;color:var(--ch-text-muted) !important;font-weight:400 !important;margin:0 0 12px !important;}
.checkout__informations__wrapper .field-container{margin-top:0 !important;}

/* Row grid */
.checkout__informations__wrapper .row{margin:0 -8px;}
.checkout__informations__wrapper .row > [class*="col-"]{padding:0 8px;}

/* Payment gateways list */
.checkout__payment__gateway__radios__wrapper{padding:6px !important;display:flex;flex-direction:column;gap:6px;}
.checkout__payment__gateway__radios{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:12px;padding:12px 14px !important;margin:0 !important;background:#fff;border:1px dashed var(--ch-border-dashed);border-radius:11px;cursor:pointer;transition:.15s;position:relative;}
.checkout__payment__gateway__radios:hover{border-color:var(--ch-primary);background:var(--ch-primary-soft);}
.checkout__payment__gateway__radios:has(input:checked){border-style:solid;border-color:var(--ch-primary);background:var(--ch-primary-soft);}
.checkout__payment__gateway__radios .cercle__input__radio{flex:0 0 18px;}
.checkout__payment__gateway__radios .payment__gateway__name{flex:1 1 auto;font-size:14px !important;font-weight:600 !important;color:var(--ch-text-dark) !important;margin-left:6px;}
.checkout__payment__gateway__radios:has(input:checked) .payment__gateway__name{color:var(--ch-primary) !important;}
.payment__gateway__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:flex-end;}
.payment__gateway__icon img,.payment__gateway__icon svg{max-height:22px;width:auto;}

/* CC fields container */
.shufythemecart__cc__input__container{padding:0 !important;}
.shufythemecart__cc__input__container .default__shadow__panel__body{padding:18px 22px !important;}
.existing-cc-grid,.existing__payment__card__wrapper{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.cvv-input{margin:0 !important;}
ul.mb-6{list-style:none;padding:0;margin:14px 0 !important;}
.radio-inline{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ch-text-main);margin:0;}
.radio-inline input[type=radio]{accent-color:var(--ch-primary);}

/* Tax box + estimate taxes form (when shown) */
.field-container.mt-8,.field-container.mt-10{margin-top:0 !important;}

/* Credit balance / apply-credit panel */
#applyCreditContainer .default__shadow__panel__body{padding:18px 22px !important;}
.label.radio{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;color:var(--ch-text-main);margin:6px 0;}
.label.radio input{accent-color:var(--ch-primary);}

/* TOS box */
.accepttos__checkout__wrapper{display:flex;align-items:center;gap:8px;margin:0;}
.checkbox-inline.one__lign__checkbox{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ch-text-main);margin:0;cursor:pointer;}
.checkbox-inline.one__lign__checkbox input[type=checkbox]{accent-color:var(--ch-primary);width:16px;height:16px;}
.checkbox-inline a{color:var(--ch-primary);text-decoration:none;font-weight:600;}
.checkbox-inline a:hover{text-decoration:underline;}
.accepttos__checkout__activations__styles{display:none;}
.shownotesfield{margin-top:14px !important;border-top:1px dashed var(--ch-border-dashed);padding-top:14px;}
.shownotesfield .row.mb-3{margin:0 0 6px !important;display:flex;align-items:center;justify-content:space-between;}
.shownotesfield input[name=notes]{padding:9px 13px !important;}
.shownotesfield .coodiv-text-12.sub-color{font-size:12px !important;color:var(--ch-text-muted) !important;}

/* Marketing optin panel */
.marketing-email-optin .default__shadow__panel__body{text-align:left !important;padding:18px 22px !important;}
.marketing-email-optin h6{font-size:13px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.04em !important;color:var(--ch-text-muted) !important;margin:0 0 6px !important;}
.marketing-email-optin p{font-size:12.5px !important;color:var(--ch-text-muted) !important;margin-bottom:10px !important;}
.switch__box__on__off{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;margin:0;}
.switch__box__on__off__title{font-size:13.5px;color:var(--ch-text-dark);font-weight:600;}

/* SSL secure alert at bottom */
#overdueInvoicesPanel{background:var(--ch-primary-soft) !important;border:1px dashed #fcd34d !important;border-radius:11px !important;padding:14px 18px !important;color:#92400e !important;margin-top:0 !important;}
#overdueInvoicesPanel .alert-title{font-size:13.5px !important;font-weight:700 !important;color:#92400e !important;margin:0 0 4px !important;}
#overdueInvoicesPanel p{font-size:12.5px !important;color:#92400e !important;margin:0 !important;}

/* Promo + viewcart-output banner */
.viewcart__output__banner{background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:14px 18px;box-shadow:0 1px 2px rgba(15,23,42,.04);}

/* Inline page-level alerts */
.standard__cart__order__steps__container ~ #order-standard_cart .alert,
.orderform__main__content__wrapper__with__sidebar > .alert{background:#fef2f2 !important;border:1px dashed #fecaca !important;border-radius:11px !important;padding:10px 14px !important;color:#991b1b !important;font-size:13px !important;}
.orderform__main__content__wrapper__with__sidebar > .alert-warning{background:var(--ch-primary-soft) !important;border-color:#fcd34d !important;color:#92400e !important;}
.orderform__main__content__wrapper__with__sidebar > .alert-info{background:#eff6ff !important;border-color:#bfdbfe !important;color:#1e3a8a !important;}
.orderform__main__content__wrapper__with__sidebar > .alert-success{background:#ecfdf5 !important;border-color:#a7f3d0 !important;color:#065f46 !important;}

/* ORDER SUMMARY SIDEBAR (right) */
.sticky__order__summary__sidebar__wrapper{position:sticky;top:88px;}
@media (max-width:991px){.sticky__order__summary__sidebar__wrapper{position:static;}}
.sticky__order__summary__sidebar{background:#fff;border:1px solid #eef2f6;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.sticky__order__summary__sidebar__header{background:#f8fafc;border-bottom:1px dashed var(--ch-border-dashed);padding:14px 18px !important;}
.sticky__order__summary__sidebar__header h2{font-family:"Google Sans",system-ui,sans-serif !important;font-size:13px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.05em !important;color:var(--ch-text-dark) !important;margin:0 !important;}
.sticky__order__summary__sidebar__body{padding:14px 18px !important;}
.product__summary__totals__item{display:flex !important;justify-content:space-between;align-items:flex-start;gap:8px;padding:5px 0;font-size:13px;color:var(--ch-text-main);}
.product__summary__name{flex:1 1 auto;color:var(--ch-text-muted);}
.product__summary__price{flex:0 0 auto;color:var(--ch-text-dark);font-weight:600;text-align:right;}
.bordered-totals{padding:8px 0;border-top:1px dashed var(--ch-border-dashed);border-bottom:1px dashed var(--ch-border-dashed);margin:6px 0;}
.recurring-totals{padding-top:8px !important;border-top:1px dashed var(--ch-border-dashed);margin-top:6px;}
.recurring-charges{text-align:right;font-size:12.5px;color:var(--ch-text-muted);}
.recurring-charges .cost{font-weight:600;color:var(--ch-text-dark);}
.sidebar__separated__price{margin:14px 18px 0 !important;padding:14px 0 !important;border-top:1px dashed var(--ch-border-dashed);}
.sidebar__separated__price .coodiv-text-11{font-size:13px !important;color:var(--ch-text-muted) !important;font-weight:600 !important;}
.sidebar__separated__price .totalDueToday{display:block;}
.sidebar__separated__price .amt{font-family:"Google Sans",system-ui,sans-serif !important;font-size:24px !important;font-weight:800 !important;color:var(--ch-text-dark) !important;}
.express-checkout-buttons{padding:0 18px 14px !important;}
.express-checkout-buttons .separator{font-size:11px;color:var(--ch-text-muted);text-align:center;margin:8px 0;letter-spacing:.05em;text-transform:uppercase;font-weight:600;}
.sticky__order__summary__sidebar__footer{padding:14px 18px !important;background:#fafbfc;border-top:1px dashed var(--ch-border-dashed);}

/* Apply promo code box (below sidebar) */
.sidebar__aply__promo__code__wrapper{margin-top:14px;background:#fff;border:1px dashed var(--ch-border-dashed);border-radius:12px;padding:12px 16px;}
.sidebar__aply__promo__code__caller{cursor:pointer;display:block;text-align:center;font-size:13px;font-weight:700;color:var(--ch-primary) !important;text-decoration:none !important;padding:4px 0;}
.sidebar__aply__promo__code__caller:hover{text-decoration:underline !important;}
.sidebar__aply__promo__code__form{display:flex;gap:8px;margin-top:8px;}
.sidebar__aply__promo__code__form.d-none{display:none;}
.sidebar__aply__promo__code__form input{flex:1 1 auto;padding:8px 12px !important;}
.sidebar__accepted__promo__code{font-size:13px;color:var(--ch-text-dark);display:flex;flex-direction:column;gap:8px;align-items:flex-start;}

/* BUTTONS — global override */
.standard__cart__order__steps__container .btn,
#order-standard_cart .btn,
.checkout__informations__wrapper .btn,
.sticky__order__summary__sidebar__wrapper .btn{border-radius:9px !important;font-weight:600 !important;font-size:13.5px !important;padding:9px 18px !important;border:1px solid transparent !important;line-height:1.4 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:6px;transition:.15s;text-decoration:none !important;cursor:pointer;background-image:none !important;text-transform:none !important;box-shadow:none !important;}
.standard__cart__order__steps__container .btn-sm,.standard__cart__order__steps__container .btn-small,
#order-standard_cart .btn-sm,#order-standard_cart .btn-small,
.checkout__informations__wrapper .btn-sm,.checkout__informations__wrapper .btn-small{padding:7px 14px !important;font-size:12.5px !important;border-radius:8px !important;}
.standard__cart__order__steps__container .btn-lg,#order-standard_cart .btn-lg,
.checkout__informations__wrapper .btn-lg,.sticky__order__summary__sidebar__wrapper .btn-lg{padding:13px 22px !important;font-size:14.5px !important;border-radius:10px !important;}

/* Outline primary buttons */
.standard__cart__order__steps__container .btn-primary,
.standard__cart__order__steps__container .btn-primary-outline-light,
.standard__cart__order__steps__container .btn-primary-light,
#order-standard_cart .btn-primary,#order-standard_cart .btn-primary-outline-light,#order-standard_cart .btn-primary-light,
.checkout__informations__wrapper .btn-primary,.checkout__informations__wrapper .btn-primary-outline-light,.checkout__informations__wrapper .btn-primary-light{background:transparent !important;border:1px solid var(--ch-primary) !important;color:var(--ch-primary) !important;}
.standard__cart__order__steps__container .btn-primary:hover,#order-standard_cart .btn-primary:hover,
.checkout__informations__wrapper .btn-primary:hover,#order-standard_cart .btn-primary-outline-light:hover{background:var(--ch-primary) !important;color:#fff !important;}
.standard__cart__order__steps__container .btn-default,#order-standard_cart .btn-default,
.checkout__informations__wrapper .btn-default,#order-standard_cart .btn-default{background:#fff !important;border:1px solid #e2e8f0 !important;color:var(--ch-text-main) !important;}
.standard__cart__order__steps__container .btn-default:hover,#order-standard_cart .btn-default:hover{border-color:var(--ch-primary) !important;color:var(--ch-primary) !important;background:var(--ch-primary-soft) !important;}

/* Complete order BIG button in sidebar */
#btnCompleteOrder{width:100% !important;background:var(--ch-primary) !important;color:#fff !important;border-color:var(--ch-primary) !important;font-weight:700 !important;font-size:14.5px !important;padding:14px 22px !important;border-radius:10px !important;}
#btnCompleteOrder:hover{background:#e8961a !important;border-color:#e8961a !important;color:#fff !important;}
#btnCompleteOrder[disabled]{opacity:.5;cursor:not-allowed;}

/* "Continue shopping" / "Empty cart" footer icons */
.view__cart__items__wrapper__footer .btn svg{width:14px;height:14px;}
.btn-with-icon{display:inline-flex;align-items:center;gap:6px;}

/* Common spacing — fold lagom mt/mb utilities to ch */
.mt-9{margin-top:0 !important;}
.checkout__informations__wrapper .mt-5,.checkout__informations__wrapper .mt-8,.checkout__informations__wrapper .mt-10{margin-top:0 !important;}
.checkout__informations__wrapper .mb-5{margin-bottom:6px !important;}
.checkout__informations__wrapper .mb-0{margin-bottom:0 !important;}

/* Hide stray icons we don't need */
.options__icons{display:inline-block;}

/* Dropdown menu (billing cycle in cart) */
.standard__cart__order__steps__container .dropdown-menu,
#order-standard_cart .dropdown-menu{background:#fff;border:1px solid #eef2f6;border-radius:10px;box-shadow:0 8px 24px -6px rgba(15,23,42,.15);padding:6px;min-width:200px;}
.standard__cart__order__steps__container .dropdown-item,.standard__cart__order__steps__container .dropdown-menu li > a,
#order-standard_cart .dropdown-item,#order-standard_cart .dropdown-menu li > a{padding:7px 12px !important;font-size:13px !important;color:var(--ch-text-main) !important;border-radius:7px;text-decoration:none !important;}
.standard__cart__order__steps__container .dropdown-item:hover,.standard__cart__order__steps__container .dropdown-menu li > a:hover,
#order-standard_cart .dropdown-menu li > a:hover{background:var(--ch-primary-soft) !important;color:var(--ch-primary) !important;}
.veiwcart__period__dropdown__btn{background:transparent !important;border:1px dashed var(--ch-border-dashed) !important;border-radius:8px !important;padding:4px 10px !important;font-size:13px !important;font-weight:600 !important;color:var(--ch-text-dark) !important;}
.veiwcart__period__dropdown__btn:hover{border-color:var(--ch-primary) !important;color:var(--ch-primary) !important;}

/* Empty cart message */
.no__data__error__box{background:#fff;border:1px solid #eef2f6;border-radius:14px;padding:48px 24px !important;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.no__data__error__box h6{font-size:16px !important;font-weight:700 !important;color:var(--ch-text-dark) !important;margin:6px 0 8px !important;}
.no__data__error__box p{font-size:13.5px !important;color:var(--ch-text-muted) !important;margin:0 0 16px !important;}
.no__data__error__box .btn-primary{background:var(--ch-primary) !important;color:#fff !important;border-color:var(--ch-primary) !important;padding:10px 20px !important;}
.no__data__error__box .btn-primary:hover{background:#e8961a !important;border-color:#e8961a !important;}
.message__image svg{width:64px;height:64px;color:var(--ch-text-nav);}

/* Modals (remove item / empty cart) — match global modal styling */
.modal-remove-item .modal-content{border-radius:16px !important;border:none !important;box-shadow:0 24px 60px -16px rgba(15,23,42,.35) !important;}
.modal-remove-item .modal-header{padding:14px 22px !important;border-bottom:none !important;}
.modal-remove-item .modal-body{padding:8px 24px 22px !important;}
.modal-remove-item .modal-body h4{font-size:16px !important;font-weight:700 !important;color:var(--ch-text-dark) !important;}
.modal-remove-item .modal-body p{font-size:13.5px !important;color:var(--ch-text-muted) !important;}
.modal-remove-item .fa-exclamation-triangle{color:var(--ch-primary) !important;font-size:32px !important;}

/* Hide branding box that ships old shufy theme classes — keep narrow */
.checkout__informations__wrapper .sub-heading{background:transparent !important;border:none !important;padding:0 !important;margin:0 0 8px !important;}
.checkout__informations__wrapper .sub-heading .primary-bg-color{display:inline-block;background:var(--ch-primary-soft) !important;color:var(--ch-primary) !important;padding:3px 12px;border-radius:99px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}

/* Mobile responsive */
@media (max-width:768px){
  .orderform__cart__header h1{font-size:20px !important;}
  .standard__cart__order__steps{flex-wrap:wrap;}
  .view__cart__items__wrapper__body__item{padding:14px 16px;}
  .view__cart__items__wrapper__header{padding:10px 16px !important;}
  .view__cart__items__wrapper__main__item > .col-7,.view__cart__items__wrapper__main__item > .col-8{flex:1 1 100%;}
  .view__cart__items__wrapper__main__item > .col-4,.view__cart__items__wrapper__main__item > .col{flex:1 1 100%;text-align:left;}
  .view__cart__items__wrapper__body__item__options{position:relative !important;top:auto;right:auto;margin-top:8px;}
  .checkout__page__auth__wrapper .col-sm-5,.checkout__page__auth__wrapper .col-sm-2{flex:0 0 100%;max-width:100%;}
  .panel__check__cart__group > [class*="col-"]{flex:0 0 100%;max-width:100%;}
  .already__registered__card__body{padding:14px 16px 18px !important;}
  .checkout__informations__wrapper .col-sm-6,.checkout__informations__wrapper .col-sm-3{flex:0 0 100%;max-width:100%;}
  .checkout__payment__gateway__radios{flex-wrap:wrap;}
  .sticky__order__summary__sidebar__wrapper{position:static !important;}
}


/* ===== Checkout fix v1 =====
 * 1) Force main column to full width inside grid
 * 2) Force gateway name color (.coodiv-text-11 was conflicting)
 * 3) Strip default body padding/margin on the form sections so cards align
 */
.orderform__main__content__wrapper__with__sidebar{flex:initial !important;max-width:100% !important;width:100% !important;}
#order-standard_cart .main-sidebar,#order-standard_cart .main-sidebar-lg{flex:initial !important;max-width:100% !important;width:100% !important;}

/* Gateway name — override .coodiv-text-11 inheritance */
.checkout__payment__gateway__radios .payment__gateway__name,
.checkout__payment__gateway__radios .payment__gateway__name.coodiv-text-11{color:var(--ch-text-dark) !important;font-size:14px !important;font-weight:600 !important;}
.checkout__payment__gateway__radios:has(input:checked) .payment__gateway__name{color:var(--ch-primary) !important;}

/* Gateway row layout: make the radio + name fill, push icon to the right */
.checkout__payment__gateway__radios{justify-content:space-between !important;}
.checkout__payment__gateway__radios > .cercle__input__radio{display:contents;}
.checkout__payment__gateway__radios .cercle__input__radio input,
.checkout__payment__gateway__radios .cercle__input__radio .icheck__control__check__icon{position:relative;}
.checkout__payment__gateway__radios{position:relative;padding-left:48px !important;}
.checkout__payment__gateway__radios .cercle__input__radio{position:absolute !important;left:14px;top:50%;transform:translateY(-50%);}
.checkout__payment__gateway__radios .cercle__input__radio input{position:absolute;inset:0;}
.checkout__payment__gateway__radios .cercle__input__radio .icheck__control__check__icon{position:absolute;inset:0;}

/* Default CTA button text-decoration off */
.btn{text-decoration:none !important;}

/* Continue/Empty cart row in footer — make spacing breathe */
.view__cart__items__wrapper__footer .row.gap-5{gap:8px;}
.view__cart__items__wrapper__footer .col-auto{padding:0 !important;}
.view__cart__items__wrapper__footer .btn{padding:7px 14px !important;}

/* Account login row align */
.checkout__page__auth__wrapper .row.align-items-center{align-items:flex-end !important;}
.checkout__page__auth__wrapper .form-group input{margin:0 !important;}

/* Spacing in "Already registered" + "Create new" accordion bodies */
.already__registered__card__body{padding:0 22px 18px !important;}
.already__registered__wrapper > .already__registered__card:first-child .already__registered__card__body{padding-top:0 !important;}

/* Right sidebar: keep card visible above mobile sticky button */
@media (max-width:991px){
  .main-sidebar,.main-sidebar-lg{margin-top:18px;}
}

/* Field labels: shufy uses <span class="d-block coodiv-text-12">label</span>. Recolor */
.checkout__informations__wrapper span.coodiv-text-12.font-weight-400{color:var(--ch-text-dark) !important;font-size:12.5px !important;font-weight:600 !important;}

/* "Apply Promo Code" / coodiv-text-12 sidebar link */
.sidebar__aply__promo__code__caller.coodiv-text-12{font-size:13px !important;color:var(--ch-primary) !important;font-weight:700 !important;}

/* If there's an `apply credit` block — give it a soft chip vibe */
#applyCreditContainer .field__title{margin-bottom:4px !important;}

/* Estimate Taxes inline card */
.field-container.mt-8 .default__shadow__panel__body{padding:18px 22px !important;}
.field-container.mt-8 .form-group:last-child{text-align:right;margin-bottom:0 !important;}

/* Already-registered card title spacing on dense look */
.already__registered__card__title{padding:14px 22px !important;}

/* ===== 2FA modal — SaaS redesign v2 (user-approved layout, CloudHive orange) ===== */
.twofa-setup .modal-dialog{max-width:520px;}
.twofa-setup .modal-content{border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 10px 30px -10px rgba(15,23,42,.18);overflow:hidden;}
.twofa-setup .modal-header{display:flex !important;align-items:center;justify-content:space-between;text-align:left;border-bottom:none;padding:24px 28px 0;position:static;}
.twofa-setup .modal-header .modal-title{font-size:20px;font-weight:800;color:var(--ch-text-dark);margin:0;}
.twofa-setup .modal-header .close{position:static;margin:0;padding:0;width:28px;height:28px;font-size:22px;color:var(--ch-text-nav);opacity:.8;text-shadow:none;}
.twofa-setup .modal-header .close:hover{opacity:1;color:var(--ch-text-dark);background:transparent;}
.twofa-setup .modal-body{text-align:center;padding:24px 28px 8px;font-size:14px;color:var(--ch-text-main);}
.twofa-setup .modal-body:has(.twofa-module) > p:not(.ch-2fa-sub),.twofa-setup .modal-body:has(.twofa-module) form > p:not([align]){display:none !important;}
.twofa-setup .ch-2fa-hero{display:flex;justify-content:center;margin:0 0 24px;}
.twofa-setup .ch-2fa-hero-badge{width:96px;height:96px;border-radius:22px;background:var(--ch-primary-soft);border:1px solid #fde9c8;display:inline-flex;align-items:center;justify-content:center;}
.twofa-setup .ch-2fa-hero-badge svg{width:46px;height:46px;color:var(--ch-primary);}
.twofa-setup .ch-2fa-sub{font-size:15px;color:var(--ch-text-muted);max-width:400px;margin:0 auto 24px;line-height:1.6;}
.twofa-setup .twofa-module{display:flex !important;align-items:flex-start;gap:16px;text-align:left;margin:0 0 24px;padding:18px;border:2px dashed #f3cd95;border-radius:12px;background:var(--ch-primary-soft);cursor:pointer;overflow:hidden;transition:background .15s ease;}
.twofa-setup .twofa-module:hover{background:#fef6e7;}
.twofa-setup .twofa-module > div{float:none !important;width:auto !important;margin:0 !important;padding:0 !important;line-height:normal !important;text-align:left !important;}
.twofa-setup .twofa-module .col-radio{display:none !important;}
.twofa-setup .twofa-module .col-logo{flex:0 0 auto !important;width:48px !important;height:48px;border-radius:10px;background:#fff;border:1px solid #f0e2cb;display:flex !important;align-items:center;justify-content:center;}
.twofa-setup .twofa-module .col-logo img{display:none !important;}
.twofa-setup .twofa-module .col-logo::after{content:"";width:24px;height:24px;flex:0 0 auto;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4'/%3E%3Cpath d='M14 13.12c0 2.38 0 6.38-1 8.88'/%3E%3Cpath d='M17.29 21.02c.12-.6.43-2.3.5-3.02'/%3E%3Cpath d='M2 12a10 10 0 0 1 18-6'/%3E%3Cpath d='M2 16h.01'/%3E%3Cpath d='M21.8 16c.2-2 .131-5.354 0-6'/%3E%3Cpath d='M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2'/%3E%3Cpath d='M8.65 22c.21-.66.45-1.32.57-2'/%3E%3Cpath d='M9 6.8a6 6 0 0 1 9 5.2v2'/%3E%3C/svg%3E");}
.twofa-setup .twofa-module .col-description{flex:1 1 auto !important;min-width:0;font-size:13.5px;line-height:1.5;color:var(--ch-text-muted);}
.twofa-setup .twofa-module .col-description strong{display:block;font-size:14.5px;color:var(--ch-text-dark);font-weight:700;margin-bottom:3px;}
.twofa-setup .modal-body p[align="center"]{margin:0;text-align:center;}
.twofa-setup .modal-body .btn-primary{display:flex;align-items:center;justify-content:center;width:100%;height:48px;padding:0;font-size:14px;font-weight:600;border-radius:10px;background:#fff !important;border:2px solid var(--ch-primary) !important;color:var(--ch-primary) !important;box-shadow:none !important;}
.twofa-setup .modal-body .btn-primary:hover{background:var(--ch-primary) !important;color:#fff !important;}
.twofa-setup .modal-footer{display:flex;flex-direction:column;gap:10px;border-top:none;padding:8px 28px 26px;}
.twofa-setup .modal-footer .btn{width:100%;height:48px;margin:0;border-radius:10px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.twofa-setup .modal-footer .btn-default{background:#fff;border:1px dashed var(--ch-border-dashed);color:var(--ch-text-muted);}
.twofa-setup .modal-footer .btn-default:hover{background:#f8fafc;color:var(--ch-text-dark);}
.twofa-setup .modal-footer .btn-primary,.twofa-setup .modal-footer .modal-submit{order:-1;background:#fff !important;border:2px solid var(--ch-primary) !important;color:var(--ch-primary) !important;}
.twofa-setup .modal-footer .btn-primary:hover,.twofa-setup .modal-footer .modal-submit:hover{background:var(--ch-primary) !important;color:#fff !important;}
.twofa-setup .modal-footer .loader{display:none !important;}
.twofa-setup .modal-body img{border-radius:10px;background:#fff;}
.twofa-setup .modal-body input[type=text],.twofa-setup .modal-body input[type=number]{border:1px solid #e2e8f0;border-radius:9px;padding:11px 14px;font-size:14px;}
.twofa-setup .modal-body input[type=text]:focus,.twofa-setup .modal-body input[type=number]:focus{border-color:var(--ch-primary);box-shadow:0 0 0 3px rgba(245,166,35,.15);outline:none;}


/* ===== 2FA modal — STEP 2 "Scan QR Code" (user mockup, orange) ===== */
.twofa-setup .ch-2fa-qrhead{text-align:center;margin:2px 0 18px;}
.twofa-setup .ch-2fa-qrhero-badge{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;border:1.5px solid var(--ch-primary);color:var(--ch-primary);display:flex;align-items:center;justify-content:center;}
.twofa-setup .ch-2fa-qrhero-badge svg{width:26px;height:26px;}
.twofa-setup .ch-2fa-qrtitle{font-size:20px;font-weight:800;color:var(--ch-text-dark);margin:0 0 8px;}
.twofa-setup .ch-2fa-qrframe{display:flex;justify-content:center;padding:14px;border:2px dashed #f3cd95;border-radius:12px;background:#fff;width:max-content;margin:0 auto;}
.twofa-setup .ch-2fa-qrframe svg{display:block;}
.twofa-setup .ch-2fa-manual{text-align:center;margin:14px 0 2px;}
.twofa-setup .ch-2fa-manual-link{background:none;border:none;padding:0;color:var(--ch-primary);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.twofa-setup .ch-2fa-manual-link:hover{text-decoration:underline;}
.twofa-setup .ch-2fa-manual-link svg{width:16px;height:16px;}
.twofa-setup .ch-2fa-manual-code{display:inline-block;margin-top:10px;padding:8px 14px;background:#f8fafc;border:1px dashed var(--ch-border-dashed);border-radius:8px;font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--ch-text-dark);font-family:ui-monospace,monospace;}
.twofa-setup .ch-2fa-vlabel{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--ch-text-muted);margin:18px 0 10px;}
.twofa-setup .ch-2fa-vrow{display:flex;flex-direction:column;gap:12px;margin:0;}
.twofa-setup .ch-2fa-vrow > div{width:100% !important;max-width:100% !important;flex:0 0 100% !important;padding:0 !important;}
.twofa-setup .ch-2fa-vrow input[name=verifykey]{display:block;width:100%;max-width:260px;margin:0 auto;text-align:center;font-size:22px !important;letter-spacing:.22em;font-weight:700;color:var(--ch-text-dark);border:1px solid #e2e8f0;border-radius:12px;padding:13px 12px;height:auto;background:#fff;}
.twofa-setup .ch-2fa-vrow input[name=verifykey]:focus{border-color:var(--ch-primary);box-shadow:0 0 0 4px rgba(245,166,35,.12);outline:none;}
.twofa-setup .ch-2fa-vrow input[type=button]{display:block;width:100%;height:48px;border-radius:10px;font-size:14px;font-weight:600;background:#fff !important;border:2px solid var(--ch-primary) !important;color:var(--ch-primary) !important;box-shadow:none !important;}
.twofa-setup .ch-2fa-vrow input[type=button]:hover{background:var(--ch-primary) !important;color:#fff !important;}

/* ===== Change Password (user-password) ===== */
.ch-pw-field{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
.ch-pw-field .form-control{flex:1 1 auto;min-width:180px;}
.ch-pw-field .generate-password{flex:0 0 auto;white-space:nowrap;}
.ch-pw-field .generate-password svg{width:14px;height:14px;margin-right:5px;vertical-align:-2px;}

/* ===== Contacts (account-contacts-manage) ===== */
.ch-cs-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-top:10px;}
.ch-cs-row select{flex:1 1 auto;min-width:200px;}
.ch-cs-row .btn{flex:0 0 auto;}
.ch-pref-checks{display:flex;flex-direction:column;gap:12px;}
.ch-pref-check{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--ch-text-main);cursor:pointer;}
.ch-pref-check input[type=checkbox]{width:17px;height:17px;flex:0 0 auto;}
.ch-form-actions-spread{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.ch-form-actions-spread .btn-ch-outline-danger svg{width:14px;height:14px;margin-right:5px;vertical-align:-2px;}

/* ===== View Quote (viewquote) ===== */
.ch-quote-stage{font-size:12px;padding:6px 12px;}
.ch-inv-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ch-text-muted);margin-bottom:6px;}
.ch-inv-addr{font-size:13.5px;line-height:1.6;color:var(--ch-text-main);font-style:normal;margin:0 0 16px;}
.ch-inv-items{border:1px solid #eef2f6;border-radius:12px;overflow:hidden;}
.ch-inv-table{width:100%;margin:0;border-collapse:collapse;font-size:13.5px;}
.ch-inv-table thead th{background:#f8fafc;text-transform:uppercase;font-size:11px;letter-spacing:.04em;color:var(--ch-text-muted);font-weight:700;padding:11px 16px;border-bottom:1px solid #eef2f6;}
.ch-inv-table tbody td{padding:12px 16px;border-bottom:1px solid #f1f5f9;color:var(--ch-text-main);}
.ch-inv-table tfoot td{padding:9px 16px;font-size:13px;color:var(--ch-text-muted);}
.ch-inv-table tfoot tr:first-child td{padding-top:14px;}
.ch-inv-table tfoot .ch-inv-total td{font-size:15px;font-weight:800;color:var(--ch-text-dark);border-top:1px dashed var(--ch-border-dashed);padding-top:12px;}
.ch-back-link{display:inline-flex;align-items:center;gap:6px;color:var(--ch-text-muted);text-decoration:none;font-size:13px;font-weight:600;}
.ch-back-link:hover{color:var(--ch-primary);}
.ch-back-link svg{width:15px;height:15px;}

/* ===== Generate Password modal ===== */
#modalGeneratePassword .ch-genpw-err{border-radius:10px;font-size:13px;}
#modalGeneratePassword .ch-genpw-field{margin-bottom:16px;}
#modalGeneratePassword .ch-genpw-field label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ch-text-muted);margin-bottom:7px;}
#modalGeneratePassword .form-control{border:1px solid #e2e8f0;border-radius:10px;padding:11px 14px;font-size:14px;height:auto;width:100%;}
#modalGeneratePassword .form-control:focus{border-color:var(--ch-primary);box-shadow:0 0 0 3px rgba(245,166,35,.15);outline:none;}
#modalGeneratePassword .ch-genpw-output{display:flex;gap:8px;}
#modalGeneratePassword .ch-genpw-output .form-control{flex:1 1 auto;font-family:ui-monospace,monospace;letter-spacing:.06em;}
#modalGeneratePassword .ch-genpw-output .btn{flex:0 0 auto;display:inline-flex;align-items:center;}
#modalGeneratePassword .ch-genpw-gen{margin-top:2px;}
#modalGeneratePassword .ch-genpw-gen svg,#modalGeneratePassword .copy-to-clipboard svg{width:15px;height:15px;}
#modalGeneratePassword .ch-genpw-gen svg{margin-right:6px;vertical-align:-2px;}

/* ===== Order form cart/checkout: restore bootstrap row/col (theme overrides .row to grid) ===== */
#order-standard_cart .row:not([style*="display: none"]):not([style*="display:none"]){display:flex !important;flex-wrap:nowrap;align-items:flex-start;}
@media (min-width:992px){
  #order-standard_cart .col-lg-8{flex:0 0 65%;max-width:65%;}
  #order-standard_cart .col-lg-4{flex:0 0 35%;max-width:35%;}
}
@media (max-width:991px){
  #order-standard_cart .row{flex-wrap:wrap;}
  #order-standard_cart .col-lg-8,#order-standard_cart .col-lg-4{flex:0 0 100%;max-width:100%;}
}

/* ===== Invoice payment page — SaaS (invoice-payment.tpl /invoice/x/pay) ===== */
#frmPayment .card{border:1px dashed rgba(115,119,132,.28) !important;border-radius:14px !important;box-shadow:none !important;background:#fff !important;}
#frmPayment .card-body{padding:28px !important;}
#frmPayment .card-title{font-size:18px !important;font-weight:700 !important;color:#1b1c1d !important;margin-bottom:22px !important;}
#frmPayment .form-control,#frmPayment .custom-select{border:1px dashed rgba(115,119,132,.3) !important;border-radius:9px !important;height:44px !important;box-shadow:none !important;font-size:13px !important;}
#frmPayment textarea.form-control{height:auto !important;}
#frmPayment .control-label,#frmPayment .col-form-label{font-weight:500 !important;color:#434653 !important;font-size:13px !important;}
#frmPayment #btnSubmit{background:#fff !important;color:#F5A623 !important;border:1.5px dashed #F5A623 !important;border-radius:10px !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.04em;padding:12px 30px !important;box-shadow:none !important;}
#frmPayment #btnSubmit:hover{background:rgba(245,166,35,.08) !important;}
.ch-pay-secure{display:flex !important;align-items:center;gap:10px;border:1px dashed rgba(245,166,35,.5) !important;background:rgba(245,166,35,.05) !important;color:#7a5b00 !important;border-radius:10px !important;font-size:13px;margin-top:16px;}
.ch-pay-secure svg{width:16px;height:16px;color:#F5A623;flex:0 0 auto;}

/* ===== Bank-transfer / gateway requisites on viewinvoice ($paymentbutton) ===== */
.payment-btn-container{margin-top:6px;}
.payment-btn-container p{border:1px dashed rgba(245,166,35,.5);background:rgba(245,166,35,.05);border-radius:12px;padding:16px 18px;margin:0;font-size:13px;line-height:1.95;color:#1b1c1d;word-break:break-word;}
.payment-btn-container .btn,.payment-btn-container button{border-radius:10px !important;}
/* ===== Invoice "Make Payment" — SaaS refinement (ACTIVE whmcs-hive theme) ===== */
/* Stock layout right-aligns a col-4 label against col-7/8/6/2 fields (cramped, asymmetric).
   Stack each label left, above a full-width field, so every row lines up. Append-only. */
#frmPayment .cc-payment-form .form-group.row,
#frmPayment .form-group.cc-details.row{ display:block !important; margin-bottom:18px !important; }
#frmPayment .cc-payment-form .form-group.row > label,
#frmPayment .form-group.cc-details.row > label{
    display:block !important; width:100% !important; max-width:100% !important;
    flex:none !important; float:none !important; text-align:left !important;
    padding:0 0 6px !important; margin:0 !important;
}
#frmPayment .cc-payment-form .form-group.row > div[class*="col-"],
#frmPayment .form-group.cc-details.row > div[class*="col-"]{
    flex:0 0 100% !important; max-width:100% !important; width:100% !important; padding:0 !important;
}
/* Naturally-short fields shouldn't stretch full width */
#frmPayment #inputCardExpiry,
#frmPayment #inputCardStart,
#frmPayment #inputCardCvv,
#frmPayment #inputIssueNum{ max-width:220px !important; }

/* CVV helper link — quiet, aligned under field */
#frmPayment #cvvWhereLink{ padding:6px 0 0 !important; color:#9a9da6 !important; font-size:12px !important; text-decoration:none !important; }

/* Save-card row: kill the col-4 offset under stacked layout + on-brand amber switch */
#frmPayment .form-group.cc-details.row .offset-sm-4{ margin-left:0 !important; }
#frmPayment .bootstrap-switch{ border:1px dashed rgba(115,119,132,.3) !important; border-radius:22px !important; box-shadow:none !important; overflow:hidden; }
#frmPayment .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{ background:#F5A623 !important; color:#fff !important; }
#frmPayment .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
#frmPayment .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default{ background:#f1f1f4 !important; color:#6b6f76 !important; }
#frmPayment .form-check-inline.no-padding{ vertical-align:middle !important; }

/* Submit area breathing room */
#frmPayment .submit-container{ margin-top:24px !important; }

/* invoice pay — class-based hide/pair (robust; :has variant did not apply visually) */
#frmPayment .cc-payment-form .form-group.row.ch-hide{ display:none !important; }
#frmPayment .cc-payment-form .form-group.row.ch-half{ display:inline-block !important; width:48% !important; vertical-align:top; margin:0 0 15px !important; }
#frmPayment .cc-payment-form .form-group.row.ch-half.ch-half-l{ margin-right:3% !important; }
#frmPayment #inputCardExpiry,#frmPayment #inputCardCvv{ width:100% !important; max-width:100% !important; }

/* ===== Invoice PayPal ACDC hosted fields ===== */
#frmPayment #paypal_acdc_input_container{
    margin:10px 0 4px !important;
    padding:0 !important;
    max-width:100% !important;
}
#frmPayment #paypal_acdc_input_container .form-group,
#frmPayment #paypal_acdc_input_container [class*="form-group"]{
    display:block !important;
    margin:0 0 14px !important;
}
#frmPayment #paypal_acdc_input_container label,
#frmPayment #paypal_acdc_input_container .control-label,
#frmPayment #paypal_acdc_input_container .col-form-label{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 0 6px !important;
    margin:0 !important;
    text-align:left !important;
    color:#434653 !important;
    font-size:13px !important;
    font-weight:500 !important;
}
#frmPayment #paypal_acdc_input_container [class*="col-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
}
#frmPayment #paypal_acdc_input_container .row{
    display:block !important;
    margin:0 !important;
}
#frmPayment #paypal_acdc_input_container input.form-control,
#frmPayment #paypal_acdc_input_container .form-control:not(iframe){
    width:100% !important;
    height:44px !important;
    border:1px dashed rgba(115,119,132,.3) !important;
    border-radius:9px !important;
    background:#fff !important;
    box-shadow:none !important;
    color:#1b1c1d !important;
    font-size:13px !important;
}
#frmPayment #paypal_acdc_input_container iframe{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    width:100% !important;
    min-height:0 !important;
}
#frmPayment #paypal_acdc_input_container [id*="expiry"] input.form-control,
#frmPayment #paypal_acdc_input_container [id*="cvv"] input.form-control,
#frmPayment #paypal_acdc_input_container [id*="expiry"] .form-control:not(iframe),
#frmPayment #paypal_acdc_input_container [id*="cvv"] .form-control:not(iframe){
    max-width:220px !important;
}
#frmPayment .submit-container{ margin-top:18px !important; }
#frmPayment #btnSubmit{
    min-height:38px !important;
    padding:8px 20px !important;
    border-radius:9px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    letter-spacing:.035em !important;
}

/* ===== Invoice payment summary SaaS redesign ===== */
#frmPayment #invoiceIdSummary,
#invoiceIdSummary.ch-invoice-summary-card{
    position:sticky !important;
    top:92px !important;
    border:1px dashed rgba(115,119,132,.28) !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
}
#frmPayment #invoiceIdSummary .ch-invoice-summary,
#invoiceIdSummary .ch-invoice-summary{
    padding:24px !important;
    color:#334155 !important;
}
#invoiceIdSummary .ch-invoice-summary-head{
    padding-bottom:18px !important;
    margin-bottom:18px !important;
    border-bottom:1px dashed rgba(115,119,132,.24) !important;
}
#invoiceIdSummary .ch-invoice-summary-label{
    display:block !important;
    margin-bottom:5px !important;
    color:#64748b !important;
    font-size:11px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
}
#invoiceIdSummary .ch-invoice-summary-head h2{
    margin:0 !important;
    color:#1b1c1d !important;
    font-size:22px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
    letter-spacing:0 !important;
}
#invoiceIdSummary .ch-invoice-summary-cols{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 128px !important;
    gap:16px !important;
    align-items:center !important;
    margin-bottom:8px !important;
    color:#64748b !important;
    font-size:11px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
}
#invoiceIdSummary .ch-invoice-summary-cols span:last-child{
    text-align:right !important;
}
#invoiceIdSummary .ch-invoice-summary-items{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    margin-bottom:14px !important;
}
#invoiceIdSummary .ch-invoice-summary-item{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 128px !important;
    gap:16px !important;
    align-items:start !important;
    padding:14px !important;
    border:1px solid #eef2f6 !important;
    border-radius:12px !important;
    background:#fff !important;
}
#invoiceIdSummary .ch-invoice-item-description{
    min-width:0 !important;
    color:#334155 !important;
    font-size:13px !important;
    line-height:1.65 !important;
    font-weight:500 !important;
    word-break:break-word !important;
}
#invoiceIdSummary .ch-invoice-item-description br{
    content:"" !important;
}
#invoiceIdSummary .ch-invoice-item-amount{
    color:#1b1c1d !important;
    font-size:13px !important;
    line-height:1.45 !important;
    font-weight:850 !important;
    text-align:right !important;
    white-space:nowrap !important;
}
#invoiceIdSummary .ch-invoice-summary-totals{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin-top:4px !important;
}
#invoiceIdSummary .ch-invoice-total-row,
#invoiceIdSummary .ch-invoice-paid-row,
#invoiceIdSummary .ch-invoice-balance-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 128px !important;
    gap:16px !important;
    align-items:center !important;
    min-height:46px !important;
    padding:12px 14px !important;
    border-radius:10px !important;
    font-size:12.5px !important;
}
#invoiceIdSummary .ch-invoice-total-row{
    border:1px solid #eef2f6 !important;
    background:#f8fafc !important;
    color:#475569 !important;
    font-weight:750 !important;
}
#invoiceIdSummary .ch-invoice-total-row strong,
#invoiceIdSummary .ch-invoice-paid-row strong,
#invoiceIdSummary .ch-invoice-balance-row strong{
    color:#1b1c1d !important;
    font-size:13px !important;
    font-weight:850 !important;
    text-align:right !important;
    white-space:nowrap !important;
}
#invoiceIdSummary .ch-invoice-total-due{
    border:1px dashed rgba(245,166,35,.45) !important;
    background:#fff7ed !important;
    color:#1b1c1d !important;
    font-weight:850 !important;
}
#invoiceIdSummary .ch-invoice-paid-row{
    margin-top:14px !important;
    border:1px dashed rgba(115,119,132,.24) !important;
    background:#f8fafc !important;
    color:#64748b !important;
}
#invoiceIdSummary .ch-invoice-balance-row{
    margin-top:10px !important;
    border:1px solid rgba(16,185,129,.22) !important;
    background:#ecfdf5 !important;
    color:#047857 !important;
    font-weight:800 !important;
}
#invoiceIdSummary .ch-invoice-balance-row strong{
    color:#065f46 !important;
    font-size:14px !important;
    font-weight:900 !important;
}
@media (max-width:991px){
    #frmPayment #invoiceIdSummary,
    #invoiceIdSummary.ch-invoice-summary-card{ position:static !important; }
}
@media (max-width:575px){
    #invoiceIdSummary .ch-invoice-summary{ padding:18px !important; }
    #invoiceIdSummary .ch-invoice-summary-head h2{ font-size:20px !important; }
    #invoiceIdSummary .ch-invoice-summary-cols,
    #invoiceIdSummary .ch-invoice-summary-item,
    #invoiceIdSummary .ch-invoice-total-row,
    #invoiceIdSummary .ch-invoice-paid-row,
    #invoiceIdSummary .ch-invoice-balance-row{ grid-template-columns:minmax(0,1fr) 100px !important; gap:12px !important; }
}

/* ===== Invoice PayPal flow cleanup ===== */
#frmPayment.ch-paypal-cleanup #paymentGatewayInput{
    margin-top:10px !important;
}
#frmPayment.ch-paypal-cleanup .paymethod-info{
    max-width:520px !important;
    margin:0 auto 18px !important;
}
#frmPayment.ch-paypal-cleanup .paymethod-info label{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:44px !important;
    padding:12px 14px !important;
    border:1px dashed rgba(115,119,132,.28) !important;
    border-radius:10px !important;
    background:#f8fafc !important;
    color:#334155 !important;
    font-size:13px !important;
    font-weight:600 !important;
}
#frmPayment.ch-paypal-cleanup .cc-payment-form > p,
#frmPayment.ch-paypal-cleanup .cc-payment-form > .alert,
#frmPayment.ch-paypal-cleanup #paymentGatewayInput > p,
#frmPayment.ch-paypal-cleanup #paymentGatewayInput > .alert{
    max-width:620px !important;
    margin:0 auto 16px !important;
    color:#64748b !important;
    font-size:13px !important;
    line-height:1.55 !important;
    text-align:left !important;
}
#frmPayment.ch-paypal-cleanup input[value*="PayPal"],
#frmPayment.ch-paypal-cleanup button:not(#btnSubmit),
#frmPayment.ch-paypal-cleanup a[href*="paypal"]{
    max-width:520px !important;
    min-height:46px !important;
    margin:14px auto 0 !important;
    border-radius:10px !important;
}
#frmPayment.ch-paypal-cleanup #btnSubmitContainer.ch-hide{ display:none !important; }

/* ===== Invoice payment no custom focus ring ===== */
#frmPayment input:focus,
#frmPayment input:focus-visible,
#frmPayment select:focus,
#frmPayment select:focus-visible,
#frmPayment textarea:focus,
#frmPayment textarea:focus-visible,
#frmPayment .form-control:focus,
#frmPayment .form-control:focus-visible,
#frmPayment .custom-select:focus,
#frmPayment .custom-select:focus-visible{
    border-color:rgba(115,119,132,.3) !important;
    box-shadow:none !important;
    outline:none !important;
}
#frmPayment input[type="radio"]:focus,
#frmPayment input[type="radio"]:focus-visible,
#frmPayment input[type="checkbox"]:focus,
#frmPayment input[type="checkbox"]:focus-visible{
    box-shadow:none !important;
    outline:none !important;
}

/* ===== Invoice payment header back button ===== */
.ch-header-back{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    height:36px !important;
    padding:0 13px !important;
    border:1px dashed rgba(115,119,132,.34) !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#334155 !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1 !important;
    text-decoration:none !important;
    box-shadow:none !important;
    transition:background .15s ease,border-color .15s ease,color .15s ease !important;
    flex:0 0 auto !important;
}
.ch-header-back:hover{
    background:#fffbeb !important;
    border-color:#F5A623 !important;
    color:#b45309 !important;
    text-decoration:none !important;
}
.ch-header-back svg,
.ch-header-back .lucide{
    width:15px !important;
    height:15px !important;
    stroke-width:2.4 !important;
}
@media (max-width:575px){
    .ch-header-back{width:36px !important;padding:0 !important;gap:0 !important;}
    .ch-header-back span{display:none !important;}
}

/* ===== Pre-content Back action ===== */
.ch-precontent-actions{
    padding:18px 32px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}
.ch-precontent-actions .ch-header-back{
    height:36px !important;
}
@media (max-width:767px){
    .ch-precontent-actions{padding:14px 18px 0 !important;}
}

/* ===== Support ticket filter counts ===== */
.status-filter{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:36px !important;
    padding:8px 12px !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
}
.status-filter > span:first-child{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}
.status-filter .ch-filter-count{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:28px !important;
    height:22px !important;
    padding:0 8px !important;
    flex:0 0 auto !important;
    box-sizing:border-box !important;
    border-radius:999px !important;
    background:#f8fafc !important;
    border:1px dashed #cbd5e1 !important;
    color:#475569 !important;
    font-size:11px !important;
    font-weight:800 !important;
    font-variant-numeric:tabular-nums !important;
    line-height:1 !important;
    white-space:nowrap !important;
}
.status-filter.active .ch-filter-count{
    background:#fff !important;
    border-color:#F5A623 !important;
    color:#b45309 !important;
}
.status-filter:hover .ch-filter-count{
    border-color:#F5A623 !important;
    color:#b45309 !important;
}
@media (max-width:767px){
    .status-filter{
        flex:1 1 calc(50% - 8px) !important;
    }
}
@media (max-width:420px){
    .status-filter{
        flex-basis:100% !important;
    }
}

/* ===== Support ticket priority badges ===== */
.ch-ticket-title-line{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}
.ch-ticket-priority-badge{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:24px !important;
    padding:0 9px !important;
    border-radius:999px !important;
    border:1px dashed #cbd5e1 !important;
    background:#fff !important;
    color:#64748b !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    letter-spacing:.035em !important;
}
.ch-ticket-priority-low{
    border-color:rgba(34,197,94,.45) !important;
    background:#f0fdf4 !important;
    color:#15803d !important;
}
.ch-ticket-priority-medium{
    border-color:rgba(245,166,35,.55) !important;
    background:#fffbeb !important;
    color:#b45309 !important;
}
.ch-ticket-priority-high{
    border-color:rgba(239,68,68,.5) !important;
    background:#fef2f2 !important;
    color:#b91c1c !important;
}

/* ===== View ticket attachment upload alignment ===== */
.ch-ticket-upload-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 42px !important;
    align-items:center !important;
    gap:12px !important;
}
.ch-ticket-file-trigger,
.ch-ticket-upload-action{
    height:42px !important;
    min-height:42px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 16px !important;
    border-style:dashed !important;
    box-shadow:none !important;
    line-height:1 !important;
    margin:0 !important;
}
.ch-ticket-file-trigger{
    width:100% !important;
    min-width:0 !important;
    gap:12px !important;
    cursor:pointer !important;
    text-align:center !important;
}
.ch-ticket-file-trigger .file-label-text{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}
.ch-ticket-file-trigger i,
.ch-ticket-upload-action i{
    width:16px !important;
    height:16px !important;
    flex:0 0 16px !important;
}
.ch-ticket-upload-action{
    width:42px !important;
    padding:0 !important;
    flex:0 0 42px !important;
}
.ch-ticket-upload-remove,
.ch-ticket-upload-remove i{
    color:#ef4444 !important;
}
@media (max-width:575px){
    .ch-ticket-upload-row{
        grid-template-columns:minmax(0,1fr) 42px !important;
        gap:8px !important;
    }
}
#file-uploads-container .ch-ticket-file-trigger,
#file-uploads-container .ch-ticket-upload-action{
    margin:0 !important;
    margin-bottom:0 !important;
}
/* ===== Submit ticket step one SaaS layout ===== */
.ch-submit-ticket-card{
    padding:0 !important;
    overflow:hidden !important;
}
.ch-submit-ticket-head{
    padding:28px 28px 18px !important;
    border-bottom:1px dashed #dbe4f0 !important;
    background:linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%) !important;
}
.ch-submit-ticket-title{
    margin:0 0 10px !important;
    color:#183b56 !important;
    font-size:2rem !important;
    font-weight:700 !important;
    line-height:1.15 !important;
}
.ch-submit-ticket-copy{
    margin:0 !important;
    max-width:760px !important;
    color:#5f7890 !important;
    font-size:14px !important;
    line-height:1.7 !important;
}
.ch-submit-ticket-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:16px !important;
    padding:24px 28px 28px !important;
}
.ch-submit-ticket-option{
    display:grid !important;
    grid-template-columns:48px minmax(0, 1fr) 20px !important;
    align-items:start !important;
    gap:16px !important;
    min-height:148px !important;
    padding:20px !important;
    border:1px dashed #d3deea !important;
    border-radius:14px !important;
    background:#fff !important;
    color:inherit !important;
    text-decoration:none !important;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease !important;
}
.ch-submit-ticket-option:hover{
    border-color:#f5a623 !important;
    background:#fffdf8 !important;
    box-shadow:0 16px 28px rgba(15, 23, 42, .06) !important;
    transform:translateY(-1px) !important;
}
.ch-submit-ticket-icon{
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#eef6ff !important;
    color:#2d6da3 !important;
    border:1px solid rgba(45,109,163,.12) !important;
}
.ch-submit-ticket-icon svg{
    width:20px !important;
    height:20px !important;
}
.ch-submit-ticket-body{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    min-width:0 !important;
}
.ch-submit-ticket-name{
    color:#183b56 !important;
    font-size:1.05rem !important;
    font-weight:700 !important;
    line-height:1.3 !important;
}
.ch-submit-ticket-desc{
    color:#60788f !important;
    font-size:13px !important;
    line-height:1.7 !important;
}
.ch-submit-ticket-arrow{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    color:#9ab0c5 !important;
    padding-top:4px !important;
}
.ch-submit-ticket-arrow svg{
    width:18px !important;
    height:18px !important;
}
@media (max-width:991px){
    .ch-submit-ticket-grid{
        grid-template-columns:1fr !important;
    }
}
@media (max-width:575px){
    .ch-submit-ticket-head{
        padding:22px 20px 16px !important;
    }
    .ch-submit-ticket-title{
        font-size:1.7rem !important;
    }
    .ch-submit-ticket-grid{
        padding:18px 20px 20px !important;
        gap:12px !important;
    }
    .ch-submit-ticket-option{
        grid-template-columns:42px minmax(0, 1fr) 18px !important;
        gap:14px !important;
        min-height:auto !important;
        padding:16px !important;
    }
    .ch-submit-ticket-icon{
        width:42px !important;
        height:42px !important;
        border-radius:12px !important;
    }
}

/* ===== Master breadcrumb ===== */
.master-breadcrumb{
    display:flex !important;
    align-items:center !important;
    margin:12px 0 20px !important;
    padding:0 24px !important;
}
.master-breadcrumb .breadcrumb{
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    font-size:12px !important;
    line-height:1.5 !important;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a{
    color:#7a92a8 !important;
}
.master-breadcrumb .breadcrumb-item.active{
    color:#183b56 !important;
    font-weight:600 !important;
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
    color:#a5b7c8 !important;
}

/* ===== Submit ticket custom dropdowns ===== */
.ch-ticket-native-select{
    display:none !important;
}
.ch-ticket-dropdown{
    position:relative;
}
.ch-ticket-dropdown-trigger.btn-ch-outline{
    width:100% !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 14px !important;
    border:1px dashed rgba(115,119,132,.3) !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    color:#183b56 !important;
    font-size:13px !important;
    font-weight:500 !important;
}
.ch-ticket-dropdown-trigger.btn-ch-outline:hover,
.ch-ticket-dropdown.show .ch-ticket-dropdown-trigger.btn-ch-outline{
    border-color:#b8c6d4 !important;
    background:#fff !important;
}
.ch-ticket-dropdown-trigger.btn-ch-outline:focus,
.ch-ticket-dropdown-trigger.btn-ch-outline:active,
.ch-ticket-dropdown-trigger.btn-ch-outline:not(:disabled):not(.disabled):active{
    box-shadow:none !important;
    background:#fff !important;
}
.ch-ticket-dropdown-label{
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:left !important;
}
.ch-ticket-dropdown-trigger .lucide{
    width:14px !important;
    height:14px !important;
    color:#7a92a8 !important;
    flex:0 0 auto !important;
}
.ch-ticket-dropdown-menu{
    width:100% !important;
    min-width:100% !important;
    border:none !important;
    border-radius:10px !important;
    box-shadow:0 10px 15px -3px rgba(0,0,0,0.1) !important;
    padding:8px !important;
    margin-top:8px !important;
}
.ch-ticket-dropdown-menu .dropdown-item{
    border-radius:6px !important;
    font-size:13px !important;
    padding:8px 12px !important;
    color:#334155 !important;
    white-space:normal !important;
}
.ch-ticket-dropdown-menu .dropdown-item:hover,
.ch-ticket-dropdown-menu .dropdown-item:focus,
.ch-ticket-dropdown-menu .dropdown-item.active,
.ch-ticket-dropdown-menu .dropdown-item:active{
    background:#f8fafc !important;
    color:#183b56 !important;
}

/* ===== Submit ticket step two SaaS layout ===== */
.ch-submit-ticket-form-card{
    padding:0 !important;
    overflow:hidden !important;
}
.ch-submit-ticket-form-head{
    padding:28px 28px 18px !important;
    border-bottom:1px dashed #dbe4f0 !important;
    background:linear-gradient(180deg, #fcfdff 0%, #f8fbff 100%) !important;
}
.ch-submit-ticket-form-title{
    margin:0 0 10px !important;
    color:#183b56 !important;
    font-size:1.95rem !important;
    font-weight:700 !important;
    line-height:1.15 !important;
}
.ch-submit-ticket-form-copy{
    margin:0 !important;
    max-width:760px !important;
    color:#60788f !important;
    font-size:14px !important;
    line-height:1.7 !important;
}
.ch-submit-ticket-form-alert{
    padding:20px 28px 0 !important;
}
.ch-submit-ticket-form-body{
    padding:24px 28px 28px !important;
}
.ch-submit-ticket-panel{
    padding:20px !important;
    border:1px dashed #dbe4f0 !important;
    border-radius:14px !important;
    background:#fff !important;
}
.ch-submit-ticket-panel + .ch-submit-ticket-panel{
    margin-top:18px !important;
}
.ch-submit-ticket-panel-title{
    margin:0 0 16px !important;
    color:#183b56 !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}
.ch-submit-ticket-form-card label{
    margin-bottom:8px !important;
    color:#36536b !important;
    font-size:12px !important;
    font-weight:600 !important;
    letter-spacing:.02em !important;
}
.ch-submit-ticket-form-card .form-group{
    margin-bottom:18px !important;
}
.ch-submit-ticket-form-card .form-control,
.ch-submit-ticket-form-card select.form-control,
.ch-submit-ticket-form-card textarea.form-control{
    min-height:44px !important;
    border:1px dashed #cbd8e6 !important;
    border-radius:12px !important;
    background:#fbfdff !important;
    box-shadow:none !important;
    color:#183b56 !important;
    padding:10px 14px !important;
}
.ch-submit-ticket-form-card textarea.form-control{
    min-height:260px !important;
    padding:14px 16px !important;
}
.ch-submit-ticket-form-card .form-control:disabled{
    background:#f4f8fb !important;
    color:#5f7890 !important;
    opacity:1 !important;
}
.ch-submit-ticket-form-card .md-editor{
    border:1px dashed #dbe4f0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:#fff !important;
}
.ch-submit-ticket-form-card .md-header{
    border-bottom:1px dashed #dbe4f0 !important;
    background:#fbfdff !important;
}
.ch-submit-ticket-attachments .input-group{
    align-items:stretch !important;
}
.ch-submit-ticket-attachments .custom-file{
    height:44px !important;
}
.ch-submit-ticket-attachments .custom-file-label{
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 14px !important;
    border:1px dashed #cbd8e6 !important;
    border-radius:12px !important;
    background:#fbfdff !important;
    color:#60788f !important;
    box-shadow:none !important;
}
.ch-submit-ticket-attachments .custom-file-label::after{
    display:none !important;
}
.ch-submit-ticket-attachments .custom-file-input:focus ~ .custom-file-label,
.ch-submit-ticket-attachments .custom-file-input:active ~ .custom-file-label{
    border-color:#cbd8e6 !important;
    box-shadow:none !important;
}
.ch-submit-ticket-attachments .custom-file-input{
    height:44px !important;
}
.ch-submit-ticket-addmore{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    height:44px !important;
    padding:0 14px !important;
    margin-left:10px !important;
    border:1px dashed #cbd8e6 !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#36536b !important;
    box-shadow:none !important;
}
.ch-submit-ticket-addmore svg{
    width:16px !important;
    height:16px !important;
}
.ch-submit-ticket-help{
    margin-top:10px !important;
}
.ch-submit-ticket-help small{
    color:#7a92a8 !important;
    font-size:12px !important;
}
.ch-submit-ticket-captcha{
    margin-top:18px !important;
}
.ch-submit-ticket-actions{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:12px !important;
    margin-top:22px !important;
}
.ch-submit-ticket-actions .btn{
    width:auto !important;
    min-height:42px !important;
    padding:10px 22px !important;
}
@media (max-width:767px){
    .master-breadcrumb{
        margin-bottom:16px !important;
    }
    .ch-submit-ticket-form-head,
    .ch-submit-ticket-form-alert,
    .ch-submit-ticket-form-body{
        padding-left:20px !important;
        padding-right:20px !important;
    }
    .ch-submit-ticket-form-title{
        font-size:1.65rem !important;
    }
    .ch-submit-ticket-panel{
        padding:16px !important;
    }
    .ch-submit-ticket-addmore{
        margin-left:8px !important;
        padding:0 12px !important;
    }
    .ch-submit-ticket-actions{
        flex-direction:column-reverse !important;
        align-items:stretch !important;
    }
    .ch-submit-ticket-actions .btn{
        width:100% !important;
    }
}

/* step two markdown toolbar spacing */
.ch-submit-ticket-form-card .md-header{
    gap:10px !important;
    padding:12px 16px !important;
}
.ch-submit-ticket-form-card .md-header .btn-group{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    margin-right:0 !important;
}
.ch-submit-ticket-form-card .md-header .btn{
    margin:0 !important;
    min-width:32px !important;
    border-radius:10px !important;
}
.ch-submit-ticket-form-card .md-header .btn.btn-primary{
    padding:2px 12px !important;
}

/* ===== Services grouped tabs ===== */
.ch-services-tabs{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
}
.ch-services-tab{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    text-transform:none !important;
}
.ch-services-tab > span:first-child{
    white-space:nowrap !important;
}
.ch-services-tab .ch-filter-count{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:22px !important;
    max-width:none !important;
    height:22px !important;
    padding:0 8px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.75) !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1 !important;
    font-variant-numeric:tabular-nums !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
}
.ch-services-tab.btn-ch-outline .ch-filter-count{
    color:#60788f !important;
    border:1px solid #dbe4f0 !important;
}
.ch-services-tab.btn-ch-outline-primary .ch-filter-count{
    color:#b45309 !important;
    border:1px solid rgba(245,166,35,.28) !important;
    background:#fff7e8 !important;
}
.ch-services-grouped-list{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
}
.ch-service-row.is-hidden{
    display:none !important;
}
.ch-service-row-unified{
    text-decoration:none !important;
}
.ch-service-addon-row{
    cursor:default !important;
}
.ch-service-addon-row:hover{
    transform:none !important;
}
.ch-service-arrow-muted{
    opacity:.45 !important;
}
.ch-service-headline{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:0 !important;
}
.ch-service-kind{
    display:inline-flex !important;
    align-items:center !important;
    height:22px !important;
    padding:0 10px !important;
    border-radius:999px !important;
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.03em !important;
    text-transform:uppercase !important;
    flex:0 0 auto !important;
}
.ch-service-kind-product{
    background:#eef6ff !important;
    color:#2563eb !important;
}
.ch-service-kind-addon{
    background:#f5f3ff !important;
    color:#7c3aed !important;
}
.ch-service-icon-addon{
    background:#f8f5ff !important;
    color:#7c3aed !important;
}
@media (max-width: 767px){
    .ch-services-tabs{
        gap:8px !important;
    }
    .ch-service-headline{
        flex-wrap:wrap !important;
    }
}
/* ======================================================
   UPGRADE PAGE REDESIGN
   ====================================================== */

main.ch-content .ch-desc {
    font-size: 13.5px; color: #6b7280; line-height: 1.6; margin-bottom: 16px;
}

main.ch-content .ch-current-config {
    display: flex; align-items: center; gap: 10px;
    background: #f9fafb; border: 1.5px dashed #e5e7eb;
    border-radius: 10px; padding: 11px 16px; margin-bottom: 20px;
    font-size: 13px; color: #6b7280;
}
main.ch-content .ch-current-config svg { color: #f97316; flex-shrink: 0; }
main.ch-content .ch-current-config strong { color: #111827; font-weight: 600; }

main.ch-content .ch-section-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #9ca3af; margin-bottom: 14px;
}

main.ch-content .ch-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

main.ch-content .ch-plan-card {
    border: 1.5px dashed #d1d5db; border-radius: 12px;
    overflow: hidden; display: flex; flex-direction: column;
    background: #fff; transition: border-color .2s;
}
main.ch-content .ch-plan-card:hover { border-color: #f97316; }

main.ch-content .ch-plan-header {
    background: #f9fafb; border-bottom: 1.5px dashed #e5e7eb;
    padding: 14px 16px; display: flex; align-items: center;
    justify-content: space-between;
}
main.ch-content .ch-plan-name {
    font-size: 13.5px; font-weight: 700; color: #111827; letter-spacing: -0.2px;
}
main.ch-content .ch-plan-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f0fdf4; color: #16a34a; border: 1.5px dashed #86efac;
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: 0.4px;
    white-space: nowrap;
}

main.ch-content .ch-plan-specs {
    padding: 14px 16px; flex: 1;
    display: flex; flex-direction: column;
}
main.ch-content .ch-spec-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1.5px dashed #f3f4f6;
}
main.ch-content .ch-spec-row:last-child { border-bottom: none; }
main.ch-content .ch-spec-icon {
    width: 24px; height: 24px; flex-shrink: 0;
    border: 1.5px dashed #e5e7eb; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
}
main.ch-content .ch-spec-icon svg { color: #9ca3af; }
main.ch-content .ch-spec-label {
    font-size: 10px; font-weight: 600; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.4px;
    width: 42px; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
main.ch-content .ch-spec-value {
    font-size: 12.5px; font-weight: 500; color: #374151;
}

main.ch-content .ch-plan-footer {
    border-top: 1.5px dashed #e5e7eb; padding: 14px 16px; background: #fff;
}
main.ch-content .ch-price-row {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 4px; margin-bottom: 12px;
}
main.ch-content .ch-price-amount {
    font-size: 26px; font-weight: 800; color: #111827;
    letter-spacing: -1px; line-height: 1;
}
main.ch-content .ch-price-period {
    font-size: 11px; font-weight: 500; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 2px;
}

/* Custom select */
main.ch-content .ch-plan-select { display: none; }

main.ch-content .ch-custom-select {
    position: relative; width: 100%; margin-bottom: 12px;
    user-select: none;
}
main.ch-content .ch-custom-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; background: #fff;
    border: 1.5px dashed #d1d5db; border-radius: 9px;
    font-size: 13px; font-weight: 500; color: #111827;
    cursor: pointer; transition: border-color .15s; gap: 8px;
}
main.ch-content .ch-custom-select-trigger:hover,
main.ch-content .ch-custom-select.open .ch-custom-select-trigger {
    border-color: #f97316;
}
main.ch-content .ch-custom-select-trigger svg {
    color: #9ca3af; flex-shrink: 0; transition: transform .2s;
}
main.ch-content .ch-custom-select.open .ch-custom-select-trigger svg {
    transform: rotate(180deg);
}
main.ch-content .ch-custom-select-dropdown {
    display: none; position: absolute;
    top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1.5px dashed #d1d5db;
    border-radius: 10px; overflow: hidden;
    z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
main.ch-content .ch-custom-select.open .ch-custom-select-dropdown { display: block; }
main.ch-content .ch-custom-select-option {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; font-size: 13px; font-weight: 500; color: #374151;
    cursor: pointer; border-bottom: 1.5px dashed #f3f4f6; transition: background .12s;
}
main.ch-content .ch-custom-select-option:last-child { border-bottom: none; }
main.ch-content .ch-custom-select-option:hover { background: #fff7ed; color: #f97316; }
main.ch-content .ch-custom-select-option.selected {
    color: #f97316; font-weight: 600; background: #fff7ed;
}
main.ch-content .ch-custom-select-option .opt-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #e5e7eb; flex-shrink: 0;
}
main.ch-content .ch-custom-select-option.selected .opt-dot { background: #f97316; }

main.ch-content .ch-plan-btn {
    width: 100%; background: transparent;
    border: 1.5px dashed #f97316; border-radius: 8px;
    padding: 9px 14px; font-size: 13px; font-weight: 600; color: #f97316;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; gap: 6px;
    transition: background .15s; box-shadow: none;
}
main.ch-content .ch-plan-btn:hover { background: #fff7ed; }

@media (max-width: 900px) {
    main.ch-content .ch-plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    main.ch-content .ch-plans-grid {
        grid-template-columns: 1fr;
    }
}

main.ch-content .ch-config-shell {
    border: 1.5px dashed #e5e7eb;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
main.ch-content .ch-config-head {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) 40px minmax(260px, 1.2fr);
    gap: 0;
    padding: 14px 20px;
    border-bottom: 1.5px dashed #e5e7eb;
    background: #f9fafb;
}
main.ch-content .ch-config-head__current,
main.ch-content .ch-config-head__new {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .08em;
}
main.ch-content .ch-config-head__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}
main.ch-content .ch-config-list {
    display: flex;
    flex-direction: column;
}
main.ch-content .ch-config-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) 40px minmax(260px, 1.2fr);
    gap: 0;
    align-items: stretch;
    border-bottom: 1.5px dashed #eef2f7;
}
main.ch-content .ch-config-row:last-child {
    border-bottom: none;
}
main.ch-content .ch-config-cell {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    min-width: 0;
}
main.ch-content .ch-config-cell--option,
main.ch-content .ch-config-cell--current,
main.ch-content .ch-config-cell--arrow {
    border-right: 1.5px dashed #eef2f7;
}
main.ch-content .ch-config-cell--arrow {
    justify-content: center;
}
main.ch-content .ch-config-label {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.45;
}
main.ch-content .ch-config-value {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    line-height: 1.45;
    word-break: break-word;
}
main.ch-content .ch-config-mobile-kicker {
    display: none;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
main.ch-content .ch-config-cell--new {
    display: block;
}
main.ch-content .ch-config-cell--new .form-group {
    margin: 0;
}
main.ch-content .ch-config-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin: 0;
}
main.ch-content .ch-config-check input[type="checkbox"] {
    margin: 0;
}
main.ch-content .ch-config-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 44px;
}
main.ch-content .ch-config-qty .form-control {
    width: 88px;
    height: 44px;
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    box-shadow: none;
}
main.ch-content .ch-config-qty span {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

@media (max-width: 991px) {
    main.ch-content .ch-config-head {
        display: none;
    }
    main.ch-content .ch-config-row {
        grid-template-columns: 1fr;
    }
    main.ch-content .ch-config-cell {
        padding: 14px 16px;
        border-right: none !important;
        border-bottom: 1.5px dashed #eef2f7;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }
    main.ch-content .ch-config-row .ch-config-cell:last-child {
        border-bottom: none;
    }
    main.ch-content .ch-config-cell--arrow {
        min-height: 36px;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        background: #f9fafb;
    }
    main.ch-content .ch-config-mobile-kicker {
        display: inline-block;
    }
}