/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ========================================================================
   Orbit 2.0 polish layer — dashboard, authentication and registration
   ======================================================================== */
:root {
    --ob-bg: #f6f8fc;
    --ob-surface: #ffffff;
    --ob-border: #e6eaf2;
    --ob-radius: 18px;
    --ob-radius-sm: 13px;
    --ob-shadow: 0 2px 4px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.07);
    --ob-shadow-lift: 0 12px 40px rgba(15,23,42,.13);
}

body.orbit #main-body { min-height: calc(100vh - 126px); }
body.orbit .ob-wrap .container { max-width: 1440px; }
body.orbit .main-content { min-width: 0; }

/* Dashboard summary cards */
body.orbit .ob-stats { margin: 8px -10px 18px; }
body.orbit .ob-stats > [class*="col-"] { padding: 0 10px; }
body.orbit .ob-stat {
    min-height: 126px;
    padding: 24px;
    border: 1px solid var(--ob-border);
    border-radius: 18px;
    box-shadow: var(--ob-shadow);
    background: rgba(255,255,255,.96);
    overflow: hidden;
}
body.orbit .ob-stat:hover { transform: translateY(-4px); box-shadow: var(--ob-shadow-lift); }
body.orbit .ob-stat-icon {
    width: 54px; height: 54px; min-width: 54px;
    border-radius: 15px; font-size: 20px;
    box-shadow: 0 10px 22px rgba(15,23,42,.14);
}
body.orbit .ob-stat-num { font-size: 30px; line-height: 1; letter-spacing: -.8px; }
body.orbit .ob-stat-label { margin-top: 8px; font-size: 13px; font-weight: 700; color: #68758e; }
body.orbit .ob-stat-go { right: 20px; bottom: 20px; top: auto; }

body.orbit .ob-kb-search { margin: 4px 0 24px; }
body.orbit .ob-kb-search .form-control {
    height: 58px; border-radius: 16px; border: 1px solid var(--ob-border);
    box-shadow: var(--ob-shadow); padding-left: 52px; font-size: 14px;
}
body.orbit .ob-kb-search > i { left: 20px; top: 21px; font-size: 16px; }

/* Larger, cleaner dashboard panels */
body.orbit .client-home-panels .row { margin-left: -10px; margin-right: -10px; }
body.orbit .client-home-panels [class*="col-"] { padding-left: 10px; padding-right: 10px; }
body.orbit .client-home-panels .panel {
    min-height: 150px;
    border: 1px solid var(--ob-border);
    border-radius: 18px;
    box-shadow: var(--ob-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}
body.orbit .client-home-panels .panel-heading { min-height: 58px; padding: 17px 20px; background: #fff; }
body.orbit .client-home-panels .panel-title { font-size: 14px; font-weight: 800; }
body.orbit .client-home-panels .panel-body { padding: 22px; color: #53617b; }
body.orbit .client-home-panels .list-group-item { padding: 15px 20px; border-color: #eef1f6; }
body.orbit .client-home-panels .panel-footer { min-height: 12px; padding: 10px 20px; background: #fbfcfe; }
body.orbit .client-home-panels .btn-xs { padding: 7px 11px; border-radius: 9px; font-weight: 700; }

/* Context sidebar */
body.orbit .sidebar .panel { border-radius: 16px; border: 1px solid var(--ob-border); box-shadow: var(--ob-shadow); overflow: hidden; }
body.orbit .sidebar .panel-heading { padding: 16px 18px; }
body.orbit .sidebar .panel-body, body.orbit .sidebar .list-group-item { padding: 15px 18px; }
@media (min-width: 992px) {
    body.orbit #main-body .main-content.col-md-9 { width: 76%; }
    body.orbit #main-body .sidebar.col-md-3 { width: 24%; }
}

/* Authentication layout */
body.ob-auth-page { background: #f4f7fb; }
body.ob-auth-page .ob-topbar { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }
body.ob-auth-page .ob-auth {
    width: min(1080px, calc(100vw - 40px));
    min-height: 650px;
    margin: 48px auto 70px;
    display: grid;
    grid-template-columns: minmax(360px, .95fr) minmax(440px, 1.05fr);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(15,23,42,.14);
    background: #fff;
}
body.ob-auth-page .ob-auth-side { width: auto; min-height: 650px; padding: 58px; }
body.ob-auth-page .ob-auth-main { min-height: 650px; padding: 58px; display: flex; align-items: center; }
body.ob-auth-page .ob-auth-card { width: 100%; max-width: 460px; margin: auto; padding: 0; box-shadow: none; border: 0; }
body.ob-auth-page .ob-auth-card .header-lined h1 { font-size: 30px; letter-spacing: -.8px; }
body.ob-auth-page .ob-auth-card .form-control { height: 52px; border-radius: 12px; }
body.ob-auth-page .ob-auth-card .btn-primary { min-height: 52px; border-radius: 12px; font-weight: 800; }

/* Registration page — contained and readable instead of full-screen stretched */
body.ob-auth-page #registration {
    width: min(1160px, calc(100vw - 40px));
    max-width: 1160px;
    margin: 42px auto 72px;
    padding: 34px;
    background: #fff;
    border: 1px solid var(--ob-border);
    border-radius: 24px;
    box-shadow: var(--ob-shadow-lift);
}
body.ob-auth-page #registration .sub-heading { margin: 30px 0 20px; text-align: left; }
body.ob-auth-page #registration .sub-heading span { font-size: 16px; font-weight: 800; color: var(--ob-ink); background: transparent; }
body.ob-auth-page #registration .row { margin-left: -10px !important; margin-right: -10px !important; }
body.ob-auth-page #registration [class*="col-"] { padding-left: 10px; padding-right: 10px; }
body.ob-auth-page #registration .form-group { margin-bottom: 18px; }
body.ob-auth-page #registration .field,
body.ob-auth-page #registration .form-control { width: 100%; height: 50px; border: 1px solid #dfe5ef; border-radius: 12px; background: #fbfcfe; }
body.ob-auth-page #registration textarea.field { min-height: 110px; height: auto; }
body.ob-auth-page #registration .prepend-icon .field { padding-left: 46px; }
body.ob-auth-page #registration .field-icon { height: 50px; line-height: 50px; }
body.ob-auth-page #registration .marketing-email-optin { border-radius: 15px; padding: 20px; background: #f7fafc; }
body.ob-auth-page #registration .btn-primary { min-width: 180px; min-height: 50px; border-radius: 12px; font-weight: 800; }

@media (max-width: 991px) {
    body.orbit .ob-stat { min-height: 108px; }
    body.ob-auth-page .ob-auth { display: block; width: min(620px, calc(100vw - 28px)); min-height: 0; margin-top: 28px; }
    body.ob-auth-page .ob-auth-side { display: none !important; }
    body.ob-auth-page .ob-auth-main { min-height: 0; padding: 38px 28px; }
}
@media (max-width: 767px) {
    body.orbit .ob-wrap .container { padding-left: 16px; padding-right: 16px; }
    body.orbit .ob-stat { min-height: 100px; padding: 18px; }
    body.orbit .ob-stat-num { font-size: 25px; }
    body.ob-auth-page #registration { width: calc(100vw - 24px); padding: 22px 16px; margin-top: 24px; }
}