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

    ** Custom Stylesheet **

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

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

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus 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.
 */

: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%;
}

/* =====================================================================
   PERMISSOR — minimal light theme
   Derived from the marketing mockup at mockups/permissor-it (light theme).
   Everything below overrides the Nexus defaults. No SASS recompile needed.
   ===================================================================== */

/* ---- Palette remap (these vars drive Nexus theme.min.css globally) ---- */
:root {
    /* Brand */
    --permissor-hero: #0373ab;     /* hero panel            */
    --permissor-blue: #035b87;     /* cards / primary buttons */
    --permissor-blue-hover: #046a9e;
    --permissor-navy: #02334b;     /* dark sections / header  */
    --permissor-footer: #01283c;
    --permissor-accent: #007aff;   /* links / highlights      */
    --permissor-cream: #faf7ef;
    --permissor-text: #012537;

    /* Map Nexus tokens onto the Permissor palette */
    --primary: #035b87;
    --primary-lifted: #046a9e;
    --primary-accented: #02334b;

    --info: #007aff;
    --info-lifted: #0a6fe0;
    --info-accented: #0356b3;

    --text: #012537;
    --text-accented: #02334b;
    --text-lifted: #355b6e;

    --bg: #ffffff;
    --bg-muted: #faf7ef;
    --bg-lifted: #f8f7f6;
    --bg-accented: #eef1f4;

    --border-muted: #e9edf1;
    --border: #d8dee4;
    --border-lifted: #c2cad2;

    --rounding-sm: 6px;
    --rounding-md: 10px;
    --rounding-lg: 22px;
}

/* ---- Typography ---- */
body,
input, select, textarea, button, .btn,
.form-control {
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .pricing-card-title, .card-title {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body {
    color: var(--permissor-text);
    background: #ffffff;
}

/* ---- Buttons ---- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--permissor-blue);
    border-color: var(--permissor-blue);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--permissor-blue-hover);
    border-color: var(--permissor-blue-hover);
}
.btn-outline-primary {
    color: var(--permissor-blue);
    border-color: var(--permissor-blue);
}
.btn-outline-primary:hover {
    background-color: var(--permissor-blue);
    border-color: var(--permissor-blue);
    color: #fff;
}
a { color: var(--permissor-blue); }
a:hover { color: var(--permissor-blue-hover); }

/* ---- Header (dark navy bar, white Permissor logo) ---- */
#header { background: var(--permissor-navy); }
#header .topbar { background: var(--permissor-footer); }
#header .topbar,
#header .topbar .btn,
#header .topbar .input-group-text { color: rgba(255, 255, 255, .85); }
#header .navbar.navbar-light { background: var(--permissor-navy); }
#header .navbar-light .navbar-brand,
#header .navbar-light .navbar-nav .nav-link,
#header .navbar-light .navbar-nav .nav-link i { color: #fff; }
#header .navbar-light .navbar-nav .nav-link:hover { color: var(--permissor-accent); }
#header .cart-btn .badge { background: var(--permissor-accent); color: #fff; }

/* Logo: vector (blue owl + white wordmark), derived from the brand logo_neg SVG
   with the black artboard removed and the viewBox tightened to the artwork.
   background-size: contain keeps it crisp at every device density. */
.permissor-logo {
    display: block;
    width: 205px;
    height: 44px;
    background: url("../images/permissor/logo.svg") left center / contain no-repeat;
}

/* Account / login links live in the top toolbar. navbar.tpl renders top-level
   items as <a class="dropdown-toggle"> or a bare <a> (no .nav-link), so target
   them explicitly — direct-child + :not() keeps cart, lang and menu items out. */
#header .toolbar > li:not(.permissor-lang):not(.nav-item) > a,
#header .toolbar .dropdown-toggle {
    color: rgba(255, 255, 255, .92);
    font-weight: 600;
}
#header .toolbar > li:not(.permissor-lang):not(.nav-item) > a:hover,
#header .toolbar .dropdown-toggle:hover { color: #fff; }
#header .toolbar > li.dropdown { position: relative; margin-right: .5rem; }
/* The top toolbar is a plain (non-expand) navbar, so Bootstrap makes its
   dropdown-menu position:static -> it pushes the layout. Float it instead. */
#header .toolbar .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    z-index: 1050;
    float: none;
    margin-top: .35rem;
    min-width: 12rem;
    background: #fff;
    border: 0;
    border-radius: var(--rounding-md);
    box-shadow: 0 6px 24px rgba(1, 37, 55, .15);
}
#header .toolbar .dropdown-menu .dropdown-item,
#header .toolbar .dropdown-menu .dropdown-item > a { color: var(--permissor-text); }
#header .toolbar .dropdown-menu .dropdown-item > a:hover { color: var(--permissor-blue); background: #f4f6f8; }

/* Second navbar row — client-area primary nav (shown only when logged in) */
#header .main-navbar-wrapper { background: var(--permissor-navy); border-top: 1px solid rgba(255, 255, 255, .08); }
#header .main-navbar-wrapper .navbar-nav > li > a { color: rgba(255, 255, 255, .85); }
#header .main-navbar-wrapper .navbar-nav > li > a:hover { color: #fff; }
#header .main-navbar-wrapper .dropdown-menu { background: #fff; }
#header .main-navbar-wrapper .dropdown-menu .dropdown-item,
#header .main-navbar-wrapper .dropdown-menu .dropdown-item > a { color: var(--permissor-text); }

/* Hide breadcrumb on the storefront homepage for a cleaner landing */
.tpl-homepage .master-breadcrumb { display: none; }

/* ---- Language switcher (header + footer share these classes) ---- */
.permissor-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
}
.permissor-lang__opt {
    color: #fff;
    padding: 2px 3px;
    transition: opacity .2s ease;
}
.permissor-lang__opt:hover { opacity: .8; }
.permissor-lang__opt.is-active {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.permissor-lang__sep { color: rgba(255, 255, 255, .7); }

/* Win over any Nexus `.toolbar a` / `.navbar a` colour rule (higher specificity) */
#header .permissor-lang__opt,
#footer .permissor-lang__opt { color: #fff; }
#header .permissor-lang__sep,
#footer .permissor-lang__sep { color: rgba(255, 255, 255, .6); }

/* ---- Footer (dark navy) ---- */
#footer.footer { background: var(--permissor-footer); color: #fff; }
#footer.footer .nav-link,
#footer.footer .copyright,
#footer.footer a { color: rgba(255, 255, 255, .9); }
#footer.footer .nav-link:hover,
#footer.footer a:hover { color: #fff; }

/* =====================================================================
   Storefront homepage (self-contained — does not rely on Nexus classes)
   ===================================================================== */
.permissor-home { padding: 8px 0 16px; }

.permissor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--permissor-blue);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 16px;
    padding: 16px 34px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.permissor-btn:hover { background: var(--permissor-blue-hover); color: #fff; }
.permissor-btn--lg { font-size: 18px; padding: 20px 46px; }

/* Hero */
.permissor-hero {
    background: var(--permissor-hero);
    color: #fff;
    border-radius: 22px;
    padding: 72px 56px;
    margin: 8px 0 44px;
}
.permissor-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    font-size: 14px;
    opacity: .9;
    margin: 0 0 18px;
}
.permissor-hero__title {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
    margin: 0 0 20px;
    max-width: 760px;
}
.permissor-hero__lead {
    font-size: 19px;
    line-height: 1.5;
    max-width: 560px;
    margin: 0 0 30px;
    opacity: .96;
}
.permissor-hero .permissor-btn { background: var(--permissor-blue); }
.permissor-hero .permissor-btn:hover { background: var(--permissor-blue-hover); }

/* Pricing cards */
.permissor-pricing-title {
    text-align: center;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 4vw, 40px);
    margin: 8px 0 30px;
    color: var(--permissor-text);
}
.permissor-pricing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 820px;
    margin: 0 auto;
}
.permissor-price-card {
    background: var(--permissor-blue);
    color: #fff;
    border-radius: 10px;
    padding: 30px 32px;
    display: flex;
    flex-direction: column;
}
.permissor-price-card__name {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 26px;
    margin: 0 0 12px;
}
.permissor-price-card__features {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: 17px;
}
.permissor-price-card__features li { margin: 0 0 6px; opacity: .94; }
.permissor-price-card__features li::before {
    content: "\2713";
    margin-right: 8px;
    opacity: .8;
}
.permissor-price-card__price { margin: auto 0 22px; }
.permissor-price-card__amount {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 36px;
}
.permissor-price-card__per { font-size: 18px; opacity: .85; margin-left: 4px; }
.permissor-price-card .permissor-btn {
    margin-top: auto;
    background: #fff;
    color: var(--permissor-blue);
}
.permissor-price-card .permissor-btn:hover {
    background: rgba(255, 255, 255, .88);
    color: var(--permissor-blue);
}

/* CTA */
.permissor-cta {
    background: var(--permissor-navy);
    color: #fff;
    border-radius: 22px;
    padding: 56px 48px;
    text-align: center;
    margin: 48px 0 8px;
}
.permissor-cta h2 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 4vw, 38px);
    margin: 0 0 14px;
    color: #fff;
}
.permissor-cta p {
    font-size: 18px;
    max-width: 620px;
    margin: 0 auto 26px;
    opacity: .92;
}
.permissor-cta .permissor-btn { background: var(--permissor-blue); }
.permissor-cta .permissor-btn:hover { background: var(--permissor-blue-hover); }

@media (max-width: 767px) {
    .permissor-pricing { grid-template-columns: 1fr; }
    .permissor-hero { padding: 48px 26px; }
    .permissor-cta { padding: 40px 26px; }
    .permissor-logo { width: 177px; height: 38px; }
}

/* =====================================================================
   Cart / store sidebar trim + global sticky footer
   ===================================================================== */

/* Fallback hide of the useless store/cart sidebar cards. The cards are fully
   removed (and the column collapses) by the permissor_sidebars hook; this just
   keeps them hidden if the hook isn't installed yet. Names = menuItemName in
   includes/sidebar.tpl. NB: without the hook the (empty) column may remain. */
.card-sidebar[menuItemName="Categories"],
.card-sidebar[menuItemName="Actions"] { display: none !important; }

/* Sticky footer: #footer always sits at least at the bottom of the viewport.
   #main-body and #footer are direct siblings under <body>, so a flex column
   with #main-body growing pushes the footer down on short pages. */
body { display: flex; flex-direction: column; min-height: 100vh; }
#main-body { flex: 1 0 auto; }
#footer.footer { flex-shrink: 0; }

/* =====================================================================
   WHMCS attribution removal (owned / branding-free license)
   ===================================================================== */

/* Hide the "Powered by WHMCompleteSolution" attribution link that core may
   inject via {$footeroutput}. The storefront has no other whmcs.com links, so a
   global anchor hide is safe; the text-only form is handled by JS in footer.tpl. */
a[href*="whmcs.com"] { display: none !important; }