/* ============================================================
   Customer Dashboard — light theme, sidebar layout
   Accent: solid indigo #4F46E5 (no gradients, per brand direction)
   ============================================================ */

/* Universal box-sizing reset. Without this, any page that DOESN'T
   separately reset box-sizing (like the dark-theme homepage does in
   its own inline stylesheet) renders padded elements slightly wider
   than pages that do — e.g. the site header measuring 1288px on one
   page and 1240px on another for the identical max-width value. This
   makes every page that loads customer.css compute sizes identically,
   regardless of what the page itself does or doesn't reset. */
*, *::before, *::after { box-sizing: border-box; }

/* Browser default 8px body margin — invisible on white-on-white pages,
   but shows up as a colored "boxed" border around the header/content on
   any page whose body background differs from white (e.g. checkout.php's
   own body{background:var(--cu-bg)}). Reset here once so this can never
   silently reappear on any current or future page that loads this file. */
body { margin: 0; }

:root {
    --cu-bg: #F7F8FC;
    --cu-surface: #FFFFFF;
    --cu-border: #ECEDF3;
    --cu-border-strong: #DDDFE8;
    --cu-text: #14162B;
    --cu-text-secondary: #54566B;
    --cu-text-muted: #9092A3;
    --cu-accent: #4F46E5;
    --cu-accent-hover: #4338CA;
    --cu-accent-soft: #EEECFF;
    --cu-success: #0F6E56;
    --cu-success-soft: #E1F5EE;
    --cu-warning: #B45309;
    --cu-warning-soft: #FDECC8;
    --cu-danger: #C0392B;
    --cu-danger-soft: #FBEAEA;
    --cu-radius: 12px;
    --cu-radius-lg: 16px;
    --cu-shadow: 0 1px 2px rgba(20,22,43,0.04), 0 4px 16px rgba(20,22,43,0.04);
    --cu-shadow-hover: 0 4px 12px rgba(20,22,43,0.06), 0 8px 24px rgba(20,22,43,0.06);
}

.cu-body { background: var(--cu-bg); color: var(--cu-text); font-family: 'Inter', sans-serif; min-height: 100vh; }
.cu-body * { box-sizing: border-box; }
.cu-body h1, .cu-body h2, .cu-body h3 { font-family: 'Space Grotesk', sans-serif; color: var(--cu-text); margin: 0; }

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

/* ---------- Auth pages (login/register/forgot/reset) ---------- */
.cu-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--cu-bg); }

.cu-auth-split { height: 100vh; display: flex; overflow: hidden; }
/* When the common site-header sits above this split layout (login/register/forgot pages), subtract its height so the page still fills exactly one screen with no extra scrollbar */
.cu-auth-split--with-header { height: calc(100vh - 65px); }
.cu-auth-visual { flex: 1.1; background: var(--cu-text); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cu-auth-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--cu-bg); overflow-y: auto; height: 100%; perspective: 1200px; }
.cu-auth-card { width: 100%; max-width: 400px; background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: var(--cu-radius-lg); padding: 36px 32px; text-align: center; box-shadow: var(--cu-shadow); animation: cuFlipIn 0.35s ease both; }
.cu-auth-card.cu-flip-out { animation: cuFlipOut 0.3s ease forwards; }
@keyframes cuFlipIn { from { transform: rotateY(-90deg); opacity: 0; } to { transform: rotateY(0deg); opacity: 1; } }
@keyframes cuFlipOut { from { transform: rotateY(0deg); opacity: 1; } to { transform: rotateY(90deg); opacity: 0; } }

.cu-server-rack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 220px; }
.cu-server-unit { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; animation: cuFloatY 4s ease-in-out infinite; }
.cu-server-unit:nth-child(2) { animation-delay: 0.3s; }
.cu-server-unit:nth-child(3) { animation-delay: 0.6s; }
.cu-server-light { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; flex-shrink: 0; animation: cuBlink 2s ease-in-out infinite; }
.cu-server-unit:nth-child(2) .cu-server-light { animation-delay: 0.5s; background: #4F46E5; }
.cu-server-unit:nth-child(3) .cu-server-light { animation-delay: 1s; }
.cu-server-bars { display: flex; gap: 3px; flex: 1; }
.cu-server-bars span { height: 3px; flex: 1; background: rgba(255,255,255,0.15); border-radius: 2px; }

.cu-orbit-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #4F46E5; box-shadow: 0 0 12px 2px rgba(79,70,229,0.6); }
.cu-orbit-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; transform: translate(-50%, -50%); }

.cu-auth-caption { position: absolute; bottom: 40px; left: 40px; right: 40px; color: rgba(255,255,255,0.85); z-index: 2; }
.cu-auth-caption h2 { font-size: 19px; color: #fff; margin-bottom: 8px; }
.cu-auth-caption p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }

@keyframes cuFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cuBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes cuOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .cu-auth-visual { display: none; }
}

.cu-auth-logo { height: 34px; margin-bottom: 22px; }
.cu-auth-title { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.cu-auth-sub { color: var(--cu-text-secondary); font-size: 13.5px; margin-bottom: 26px; }
.cu-auth-card form { text-align: left; }
.cu-auth-card label { display: block; font-size: 12.5px; color: var(--cu-text-secondary); margin: 14px 0 6px; font-weight: 600; }
.cu-auth-card input, .cu-auth-card select {
    width: 100%; padding: 11px 14px; border-radius: 9px;
    border: 1px solid var(--cu-border-strong); background: #fff;
    color: var(--cu-text); font-size: 14px; font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cu-auth-card input:focus, .cu-auth-card select:focus { outline: none; border-color: var(--cu-accent); box-shadow: 0 0 0 3px var(--cu-accent-soft); }

/* Phone input with a fixed, non-editable +91 country code badge */
.phone-input-group { display: flex; align-items: stretch; border: 1px solid var(--cu-border-strong); border-radius: 9px; overflow: hidden; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.phone-input-group:focus-within { border-color: var(--cu-accent); box-shadow: 0 0 0 3px var(--cu-accent-soft); }
.phone-input-group .phone-cc-badge { display: flex; align-items: center; padding: 0 12px; background: var(--cu-bg); color: var(--cu-text-secondary); font-size: 14px; font-weight: 600; border-right: 1px solid var(--cu-border-strong); flex-shrink: 0; }
.phone-input-group input { border: none !important; border-radius: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; }
.phone-input-group input:focus { box-shadow: none !important; }
.cu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 20px; padding: 11px 20px; border-radius: 9px; background: var(--cu-accent); color: #fff; border: none; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; }
.cu-btn:hover { background: var(--cu-accent-hover); }
.cu-btn:active { transform: scale(0.98); }
.cu-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cu-alert-error { background: var(--cu-danger-soft); color: var(--cu-danger); border: 1px solid #F5C6C6; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-top: 14px; text-align: left; }
.cu-alert-success { background: var(--cu-success-soft); color: var(--cu-success); border: 1px solid #BFE8D9; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-top: 14px; text-align: left; }
.cu-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--cu-text-muted); font-size: 12px; }
.cu-divider::before, .cu-divider::after { content: ''; flex: 1; height: 1px; background: var(--cu-border); }
.cu-auth-foot { margin-top: 22px; font-size: 13px; color: var(--cu-text-secondary); }
.cu-auth-foot a { color: var(--cu-accent); font-weight: 600; text-decoration: none; }
.cu-auth-foot a:hover { text-decoration: underline; }

.cu-btn-google {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #fff; color: var(--cu-text); border: 1px solid var(--cu-border-strong); border-radius: 9px;
    padding: 10px 20px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cu-btn-google:hover { border-color: var(--cu-border-strong); box-shadow: var(--cu-shadow-hover); }
.cu-btn-google svg { width: 18px; height: 18px; }

/* ---------- Dashboard shell ---------- */
.cu-shell { display: flex; min-height: 100vh; }

.cu-sidebar {
    width: 220px; flex-shrink: 0; background: var(--cu-surface); border-right: 1px solid var(--cu-border);
    padding: 20px 14px; display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; overflow-y: auto;
    transition: transform 0.25s ease;
}
.cu-sidebar-logo { padding: 4px 8px 22px; display: flex; justify-content: center; align-items: center; }
.cu-sidebar-logo img { height: 52px; width: auto; display: block; }

.cu-stat-card.cu-clickable { cursor: pointer; }

.cu-days-left { font-weight: 600; }
.cu-days-left.cu-days-warning { color: var(--cu-warning); }
.cu-days-left.cu-days-danger { color: var(--cu-danger); }

.cu-dropdown { position: relative; }
.cu-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: 10px; box-shadow: var(--cu-shadow-hover); z-index: 40; overflow: hidden; }
.cu-dropdown-menu.open { display: block; }
.cu-dropdown-menu a { display: block; padding: 10px 14px; font-size: 13px; color: var(--cu-text-secondary); text-decoration: none; border-bottom: 1px solid var(--cu-border); transition: background 0.15s ease, color 0.15s ease; }
.cu-dropdown-menu a:last-child { border-bottom: none; }
.cu-dropdown-menu a:hover { background: var(--cu-accent-soft); color: var(--cu-accent); }

.cu-edit-roles { display: none; width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cu-border); }
.cu-edit-roles.open { display: block; }

.cu-nav-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--cu-text-muted); text-transform: uppercase; padding: 0 10px; margin: 18px 0 8px; }

.cu-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
    color: var(--cu-text-secondary); font-size: 13.5px; font-weight: 500; text-decoration: none;
    margin-bottom: 2px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
    position: relative; border: none; background: transparent; width: 100%; text-align: left; font-family: inherit;
}
.cu-nav-item svg, .cu-nav-item i { width: 17px; height: 17px; flex-shrink: 0; }
.cu-nav-item:hover { background: #F7F8FC; color: var(--cu-text); }
.cu-nav-item.active { background: var(--cu-accent-soft); color: var(--cu-accent); font-weight: 600; }
.cu-nav-item .cu-nav-badge { margin-left: auto; background: var(--cu-danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }

.cu-sidebar-spacer { flex: 1; }
.cu-nav-logout {
    display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 8px;
    color: var(--cu-danger); font-size: 13.5px; font-weight: 600; text-decoration: none;
    border: 1px solid #F0D9D9; margin-top: 14px; transition: background 0.15s ease;
}
.cu-nav-logout:hover { background: var(--cu-danger-soft); }
.cu-nav-logout svg { width: 16px; height: 16px; }

.cu-sidebar-overlay { display: none; }
.cu-hamburger { display: none; }

/* ---------- Main area ---------- */
.cu-main { flex: 1; margin-left: 219px; min-width: 0; background: var(--cu-surface); position: relative; z-index: 1; }

.cu-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; border-bottom: 1px solid var(--cu-border); background: var(--cu-surface); position: sticky; top: 0; z-index: 20; }
.cu-breadcrumb { font-size: 12px; color: var(--cu-text-muted); }
.cu-breadcrumb a { color: var(--cu-text-muted); text-decoration: none; transition: color 0.15s ease; }
.cu-breadcrumb a:hover { color: var(--cu-accent); }
.cu-breadcrumb .current { color: var(--cu-accent); font-weight: 600; }
.cu-topbar-right { display: flex; align-items: center; gap: 16px; }
.cu-search-wrap { position: relative; }
.cu-search { display: flex; align-items: center; gap: 8px; background: var(--cu-bg); border: 1px solid var(--cu-border); border-radius: 9px; padding: 8px 12px; width: 220px; color: var(--cu-text-muted); font-size: 12.5px; transition: border-color 0.15s ease; }
.cu-search:focus-within { border-color: var(--cu-accent); }
.cu-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.cu-search input { border: none; background: transparent; outline: none; font-size: 12.5px; font-family: inherit; color: var(--cu-text); width: 100%; }
.cu-search input::placeholder { color: var(--cu-text-muted); }
.cu-search-results { display: none; position: absolute; top: calc(100% + 6px); right: 0; width: 280px; background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: 10px; box-shadow: var(--cu-shadow-hover); z-index: 50; max-height: 320px; overflow-y: auto; }
.cu-search-results.open { display: block; }
.cu-search-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--cu-border); transition: background 0.15s ease; }
.cu-search-item:last-child { border-bottom: none; }
.cu-search-item:hover { background: var(--cu-bg); }
.cu-search-item-label { font-size: 13px; font-weight: 600; color: var(--cu-text); }
.cu-search-item-sub { font-size: 11.5px; color: var(--cu-text-muted); margin-top: 1px; }
.cu-search-empty { padding: 14px; font-size: 12.5px; color: var(--cu-text-muted); text-align: center; }
.cu-bell { color: var(--cu-text-secondary); position: relative; cursor: pointer; display: flex; }
.cu-bell svg { width: 19px; height: 19px; }
.cu-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--cu-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; overflow: hidden; flex-shrink: 0; }
.cu-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cu-content { padding: 26px; max-width: 1180px; }
.cu-page-title { font-size: 22px; margin-bottom: 4px; }
.cu-page-sub { color: var(--cu-text-secondary); font-size: 13.5px; margin-bottom: 24px; }

.cu-section { display: none; animation: cuFadeIn 0.25s ease both; }
.cu-section.active { display: block; }

/* ---------- Stat cards ---------- */
.cu-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.cu-stat-card {
    background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: var(--cu-radius);
    padding: 16px; opacity: 0; animation: cuFadeUp 0.4s ease forwards;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cu-stat-card:hover { box-shadow: var(--cu-shadow-hover); transform: translateY(-1px); }
.cu-stat-card:nth-child(1) { animation-delay: 0.02s; }
.cu-stat-card:nth-child(2) { animation-delay: 0.07s; }
.cu-stat-card:nth-child(3) { animation-delay: 0.12s; }
.cu-stat-card:nth-child(4) { animation-delay: 0.17s; }
.cu-stat-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cu-stat-icon svg { width: 18px; height: 18px; }
.cu-stat-icon.i-indigo { background: var(--cu-accent-soft); color: var(--cu-accent); }
.cu-stat-icon.i-amber { background: var(--cu-warning-soft); color: var(--cu-warning); }
.cu-stat-icon.i-teal { background: var(--cu-success-soft); color: var(--cu-success); }
.cu-stat-icon.i-slate { background: #EEF0F5; color: #626478; }
.cu-stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; }
.cu-stat-label { font-size: 12.5px; color: var(--cu-text-muted); margin-top: 2px; }

/* ---------- Panels ---------- */
.cu-panel { background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: var(--cu-radius); padding: 18px 20px; margin-bottom: 16px; opacity: 0; animation: cuFadeUp 0.4s ease 0.1s forwards; position: relative; }
/* Lifts a panel above its siblings' stacking contexts while one of its dropdowns
   is open — otherwise the fade-up animation on later panels makes them paint
   on top of an earlier panel's open dropdown, regardless of the dropdown's own z-index. */
.cu-panel.cu-panel-lift { z-index: 45; }
.cu-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cu-panel-head h3 { font-size: 14.5px; font-weight: 700; }
.cu-panel-head p { font-size: 12px; color: var(--cu-text-muted); margin: 2px 0 0; }
.cu-panel-empty { text-align: center; padding: 40px 20px; color: var(--cu-text-muted); font-size: 13px; }
.cu-panel-empty svg { width: 32px; height: 32px; margin-bottom: 10px; opacity: 0.4; }

.cu-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--cu-border); gap: 14px; flex-wrap: wrap; transition: background 0.15s ease; }
.cu-row:first-of-type { border-top: none; }
.cu-row:hover { background: #FBFBFE; margin: 0 -20px; padding: 12px 20px; border-radius: 8px; }
.cu-row-title { font-size: 13.5px; font-weight: 600; }
.cu-row-sub { font-size: 12px; color: var(--cu-text-muted); margin-top: 2px; }
.cu-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.cu-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.cu-badge-active { background: var(--cu-success-soft); color: var(--cu-success); }
.cu-badge-pending, .cu-badge-paid { background: var(--cu-warning-soft); color: var(--cu-warning); }
.cu-badge-suspended, .cu-badge-failed { background: var(--cu-danger-soft); color: var(--cu-danger); }
.cu-badge-terminated, .cu-badge-expired { background: #EEF0F5; color: var(--cu-text-muted); }

.cu-btn-sm { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--cu-border-strong); color: var(--cu-text-secondary); font-size: 12.5px; font-weight: 600; background: #fff; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; white-space: nowrap; }
.cu-btn-sm:hover { border-color: var(--cu-accent); color: var(--cu-accent); }
.cu-btn-sm.primary { background: var(--cu-accent); color: #fff; border-color: var(--cu-accent); }
.cu-btn-sm.primary:hover { background: var(--cu-accent-hover); border-color: var(--cu-accent-hover); }
.cu-btn-sm.danger:hover { border-color: var(--cu-danger); color: var(--cu-danger); }

.cu-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cu-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.cu-copy-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0;
    border: 1px solid var(--cu-border-strong); border-radius: 6px;
    background: var(--cu-bg); color: var(--cu-text-muted);
    cursor: pointer; padding: 0; transition: all 0.15s ease;
}
.cu-copy-btn svg { width: 12px; height: 12px; }
.cu-copy-btn:hover { border-color: var(--cu-accent); color: var(--cu-accent); }
.cu-copy-btn.copied { border-color: var(--cu-success, #0F6E56); color: var(--cu-success, #0F6E56); background: var(--cu-success-soft, #E1F5EE); }

/* ---------- Tables ---------- */
.cu-table-wrap { overflow-x: auto; }
.cu-table { width: 100%; border-collapse: collapse; }
.cu-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cu-text-muted); padding: 10px 12px; border-bottom: 1px solid var(--cu-border); white-space: nowrap; }
.cu-table td { padding: 13px 12px; border-bottom: 1px solid var(--cu-border); font-size: 13px; }
.cu-table tr:last-child td { border-bottom: none; }
.cu-table tr:hover td { background: #FBFBFE; }

/* ---------- Forms ---------- */
.cu-form label { display: block; font-size: 12.5px; color: var(--cu-text-secondary); font-weight: 600; margin: 14px 0 6px; }
.cu-form label:first-child { margin-top: 0; }
.cu-form input, .cu-form select, .cu-form textarea {
    width: 100%; padding: 10px 13px; border-radius: 8px; border: 1px solid var(--cu-border-strong);
    background: #fff; color: var(--cu-text); font-size: 13.5px; font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cu-form input:focus, .cu-form select:focus, .cu-form textarea:focus { outline: none; border-color: var(--cu-accent); box-shadow: 0 0 0 3px var(--cu-accent-soft); }
.cu-form textarea { resize: vertical; min-height: 90px; }
.cu-form-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 20px; border-radius: 8px; background: var(--cu-accent); color: #fff; border: none; font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background 0.15s ease; }
.cu-form-btn:hover { background: var(--cu-accent-hover); }

.cu-attach-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--cu-border-strong); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--cu-accent); font-weight: 600; transition: border-color 0.15s ease; }
.cu-attach-row:hover { border-color: var(--cu-accent); }
.cu-attach-row svg { width: 16px; height: 16px; flex-shrink: 0; }

.cu-kv { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid var(--cu-border); font-size: 13px; }
.cu-kv:first-of-type { border-top: none; }
.cu-kv span:first-child { color: var(--cu-text-muted); }
.cu-kv span:last-child { font-weight: 600; }

.cu-soon { text-align: center; padding: 50px 20px; }
.cu-soon svg { width: 40px; height: 40px; color: var(--cu-border-strong); margin-bottom: 14px; }
.cu-soon h3 { font-size: 15px; margin-bottom: 6px; }
.cu-soon p { font-size: 13px; color: var(--cu-text-muted); }

.cu-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: cuSpin 0.6s linear infinite; display: inline-block; }
@keyframes cuSpin { to { transform: rotate(360deg); } }

/* ---------- Common public site header ---------- */
.cu-site-header { background: var(--cu-surface); border-bottom: 1px solid var(--cu-border); position: sticky; top: 0; z-index: 50; font-family: 'Inter', sans-serif; color: var(--cu-text); }
.cu-site-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 24px;
    position: relative;
}
.cu-site-logo { flex-shrink: 0; display: flex; align-items: center; }
.cu-site-logo img { height: 46px; width: auto; display: block; }

/* On desktop, cu-site-nav-group produces no box of its own — its two
   children (.cu-site-nav and .cu-site-nav-auth) become direct grid
   items, landing in their own columns. That's what makes the nav
   links land dead-center regardless of the logo's or the auth
   button's width, instead of being pushed off-center by them. */
.cu-site-nav-group { display: contents; }
.cu-site-nav { display: flex; align-items: center; justify-content: center; gap: 26px; }
.cu-site-nav a { font-size: 13.5px; font-weight: 600; color: var(--cu-text-secondary); text-decoration: none; transition: color 0.15s ease; white-space: nowrap; }
.cu-site-nav a:hover { color: var(--cu-accent); }
.cu-site-nav-auth { display: flex; align-items: center; }

.cu-header-capsule { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--cu-border); border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease; }
.cu-header-capsule:hover { border-color: var(--cu-border-strong); }
.cu-header-capsule .cu-avatar { flex-shrink: 0; }
.cu-header-capsule-name { font-size: 12.5px; font-weight: 600; color: var(--cu-text); line-height: 1.3; }
.cu-header-capsule-email { font-size: 11px; color: var(--cu-text-muted); line-height: 1.3; }

/* Hamburger — hidden by default (desktop); only ever shown inside the
   mobile media query below. Keeping both rules for the same selector
   inside one place (rather than split across the file) avoids the
   "unconditional rule declared after the media query" bug that used
   to permanently hide it. */
.cu-site-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 1px solid var(--cu-border-strong);
    cursor: pointer;
    flex-shrink: 0;
    background: var(--cu-surface);
}
.cu-site-hamburger svg { width: 19px; height: 19px; color: var(--cu-text); }
.cu-site-hamburger:hover { border-color: var(--cu-accent); }

/* Tablet: slightly tighter spacing so 4 links + logo + auth still fit comfortably */
@media (max-width: 1080px) and (min-width: 901px) {
    .cu-site-header-inner { gap: 16px; padding: 12px 20px; }
    .cu-site-nav { gap: 16px; }
    .cu-site-logo img { height: 40px; }
}

@media (max-width: 900px) {
    .cu-site-header-inner { grid-template-columns: auto auto; justify-content: space-between; }
    .cu-site-logo img { height: 38px; }

    .cu-site-nav-group {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--cu-surface);
        border-bottom: 1px solid var(--cu-border);
        box-shadow: 0 12px 24px rgba(20,22,43,0.08);
        flex-direction: column;
        align-items: stretch;
        padding: 10px 20px 16px;
    }
    .cu-site-nav-group.open { display: flex; }
    .cu-site-nav { flex-direction: column; align-items: stretch; gap: 2px; }
    .cu-site-nav a { padding: 10px 4px; width: 100%; }
    .cu-site-nav-auth {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--cu-border);
        width: 100%;
    }
    .cu-site-nav-auth .cu-btn-sm.primary { display: block; width: 100%; text-align: center; }
    .cu-site-nav-auth .cu-dropdown { width: 100%; }
    .cu-site-nav-auth .cu-header-capsule { width: 100%; }
    .cu-site-hamburger { display: flex; }
}

/* ---------- Product details page ---------- */
.cu-pd-banner { background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: var(--cu-radius-lg); padding: 24px 26px; color: var(--cu-text); }
.cu-pd-banner-title { font-size: 12.5px; color: var(--cu-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cu-pd-banner-domain { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; margin: 6px 0 12px; color: var(--cu-text); }

.cu-donut {
    --pct: 0; width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(var(--cu-accent) calc(var(--pct) * 1%), var(--cu-border) 0);
    display: flex; align-items: center; justify-content: center; position: relative;
}
.cu-donut::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--cu-surface); }
.cu-donut span { position: relative; font-size: 14px; font-weight: 700; color: var(--cu-text); }

.cu-pd-days { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; }

.cu-shortcuts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cu-shortcut {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    background: var(--cu-bg); border: 1px solid var(--cu-border); border-radius: 10px;
    padding: 14px; font-size: 12.5px; font-weight: 600; color: var(--cu-text); text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.cu-shortcut:hover { border-color: var(--cu-accent); transform: translateY(-1px); }
.cu-shortcut svg { width: 20px; height: 20px; color: var(--cu-accent); }
.cu-shortcut-badge { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.cu-shortcut-badge-cpanel { background: #FF6C2C; }
.cu-shortcut-badge-webmail { background: #FF7A1A; }
.cu-shortcut-danger svg { color: var(--cu-danger); }
.cu-shortcut-danger:hover { border-color: var(--cu-danger); }

.cu-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20,22,43,0.5); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
.cu-modal-overlay.open { display: flex; }
.cu-modal { background: var(--cu-surface); border-radius: var(--cu-radius-lg); padding: 26px; width: 100%; max-width: 380px; }

@media (max-width: 900px) {
    .cu-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .cu-grid-2 { grid-template-columns: 1fr; }
    .cu-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .cu-sidebar { transform: translateX(-100%); box-shadow: 20px 0 60px rgba(0,0,0,0.15); }
    .cu-sidebar.open { transform: translateX(0); }
    .cu-main { margin-left: 0; }
    .cu-hamburger { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--cu-border-strong); cursor: pointer; }
    .cu-hamburger svg { width: 18px; height: 18px; }
    .cu-search { display: none; }
    .cu-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(20,22,43,0.4); z-index: 25; }
    .cu-sidebar-overlay.open { display: block; }
    .cu-stats-grid { grid-template-columns: 1fr 1fr; }
    .cu-content { padding: 18px; }

    /* Fix: long names/emails in the topbar capsule were pushing the whole
       row wider than the screen, forcing the entire page to scroll sideways. */
    body { overflow-x: hidden; }
    .cu-topbar { padding: 12px 14px; gap: 8px; }
    .cu-breadcrumb { display: none; } /* redundant with the page title right below it — reclaims space */
    .cu-topbar-right { gap: 8px; min-width: 0; margin-left: auto; } /* margin-left:auto keeps this pinned right even when breadcrumb (the other flex child, on pages with no hamburger) is hidden above */
    .cu-topbar-right .cu-btn-sm:not(.primary) { display: none; } /* "Go Back To Website" — hidden on mobile, nav menu covers this */
    .cu-header-capsule { padding: 4px 10px 4px 4px; min-width: 0; max-width: 220px; }
    .cu-header-capsule-name,
    .cu-header-capsule-email {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cu-header-capsule-email { display: none; } /* name + avatar is enough on mobile; full details are one tap away in the dropdown */
}
/* ---------- Site footer (4-column: Logo / Legal / Policies / Contact) ---------- */
.cu-site-footer {
    position: relative;
    border-top: 1px solid var(--cu-border);
    background: var(--cu-surface);
    padding: 52px 24px 0;
    font-family: 'Inter', sans-serif;
}
.cu-site-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
}
.cu-site-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.1fr;
    gap: 32px;
    padding-bottom: 40px;
}
.cu-site-footer-col { display: flex; flex-direction: column; gap: 13px; }
.cu-site-footer-logo { display: flex; align-items: center; width: fit-content; }
.cu-site-footer-logo img { height: 56px; width: auto; display: block; }
.cu-site-footer-tagline {
    font-size: 13px;
    line-height: 1.7;
    color: var(--cu-text-secondary);
    max-width: 260px;
    margin: 2px 0 4px;
}
.cu-site-footer-social { display: flex; align-items: center; gap: 10px; }
.cu-site-footer-social-icon {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cu-surface);
    border: 1px solid var(--cu-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(20,22,43,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cu-site-footer-social-icon svg { width: 14px; height: 14px; }
.cu-site-footer-social-icon:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(20,22,43,0.1); }
.cu-site-footer-social-icon.fb { color: #1877F2; }
.cu-site-footer-social-icon.fb svg { color: #1877F2; }
.cu-site-footer-social-icon.ig { color: #D6249F; }
.cu-site-footer-social-icon.ig svg { color: #D6249F; }
.cu-site-footer-social-icon.wa { color: #25D366; }
.cu-site-footer-social-icon.wa svg { color: #25D366; }
.cu-site-footer-heading {
    position: relative;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--cu-text);
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.cu-site-footer-heading-bar {
    position: absolute;
    left: 0; bottom: 0;
    width: 26px; height: 3px;
    border-radius: 3px;
    background: var(--cu-accent);
}
.cu-site-footer-col a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cu-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.cu-site-footer-col a svg { width: 15px; height: 15px; color: var(--cu-accent); flex-shrink: 0; }
.cu-site-footer-col a:hover { color: var(--cu-accent); }
.cu-site-footer-bottom {
    border-top: 1px solid var(--cu-border);
    padding: 18px 0;
    text-align: center;
}
.cu-site-footer-bottom p {
    font-size: 12px;
    color: var(--cu-text-muted);
    margin: 0;
}

@media (max-width: 780px) {
    .cu-site-footer { padding: 40px 20px 0; }
    .cu-site-footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .cu-site-footer-col { gap: 11px; }
    .cu-site-footer-heading { margin-top: 6px; }
}
/* ---------- Dashboard footer (copyright-only, per site-wide footer plan) ---------- */
.cu-dashboard-footer-line {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--cu-border);
    text-align: center;
    font-size: 12px;
    color: var(--cu-text-muted);
}