/* ==========================================================================
   lolpos brand overrides - loaded on every CMS page, after cms.css
   Owned by lolpos. BardPOS updates overwrite cms.css wholesale; they cannot
   touch this file, so anything we need to hold across updates goes here.
   See CUSTOMISATIONS.md
   ========================================================================== */

:root {
    /* Sataloop Technologies palette. storefront.css declares the same values
       so the landing page still renders correctly if this file is missing. */
    --lp-brand: #01A4E7;         /* Sataloop cyan      */
    --lp-brand-rgb: 1, 164, 231;
    --lp-accent: #D91C5C;        /* Sataloop crimson   */
    --lp-accent-dark: #C4174F;
    --lp-accent-rgb: 217, 28, 92;
    --lp-green: #5CB849;         /* Sataloop green     */
    --lp-deep: #083646;          /* Sataloop deep teal */
}

/* --------------------------------------------------------------------------
   1. Solid calls to action use crimson, not cyan.
      White text on #01A4E7 lands around 3:1, which is below the readable
      threshold at these sizes - "Try For Free" was almost invisible against it.
      Crimson clears 4.6:1 and matches the hero button on the home page.
   -------------------------------------------------------------------------- */
.modern-navbar__cta--primary,
.modern-navbar__mobile-cta--primary {
    background-color: var(--lp-accent) !important;
    border-color: var(--lp-accent) !important;
    color: #ffffff !important;
    font-weight: 600;
}
.modern-navbar__cta--primary:hover,
.modern-navbar__mobile-cta--primary:hover {
    background-color: var(--lp-accent-dark) !important;
    border-color: var(--lp-accent-dark) !important;
    color: #ffffff !important;
}

.btn--primary {
    background-color: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #ffffff;
}
.btn--primary:hover {
    background-color: var(--lp-accent-dark);
    border-color: var(--lp-accent-dark);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   2. Retire the leftover amber hovers cms.css still hard-codes.
      These were tied to the old #FFB600 theme and stayed amber no matter what
      colour the theme was set to.
   -------------------------------------------------------------------------- */
a:hover { color: var(--lp-brand); }
.prose a:hover { color: var(--lp-brand); }
body.dark-mode a:hover { color: var(--lp-brand); }

/* ── Log in and sign up stand out (desktop header and phone header) ───────────────── */
/* "Login" was plain grey text beside the crimson trial button; it is now a clear outlined button. */
.modern-navbar__cta--secondary,
.modern-navbar__mobile-cta--secondary {
    border: 2px solid var(--lp-deep, #083646) !important;
    color: var(--lp-deep, #083646) !important;
    background: #fff !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 700 !important;
}
.modern-navbar__cta--secondary:hover,
.modern-navbar__mobile-cta--secondary:hover { background: var(--lp-deep, #083646) !important; color: #fff !important; }
.modern-navbar__cta--primary, .modern-navbar__mobile-cta--primary { border-radius: 999px !important; padding: 9px 20px !important; font-weight: 700 !important; box-shadow: 0 6px 16px rgba(217, 28, 92, .3); }

/* Phone header: Log in and Sign up beside the menu button */
.lp-mobile-cta { display: none; }
@media (max-width: 991px) {
    .lp-mobile-cta { display: flex; gap: 6px; align-items: center; margin-left: auto; margin-right: 8px; }
    .lp-mobile-cta__btn { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none !important; }
    .lp-mobile-cta__btn--secondary { border: 2px solid var(--lp-deep, #083646); color: var(--lp-deep, #083646) !important; background: #fff; }
    .lp-mobile-cta__btn--primary { background: #D91C5C; color: #fff !important; border: 2px solid #D91C5C; box-shadow: 0 4px 12px rgba(217, 28, 92, .3); }
}
@media (max-width: 360px) { .lp-mobile-cta__btn { padding: 6px 10px; font-size: 12px; } }
/* The public site's own dark theme */
html.dark-mode .modern-navbar__cta--secondary, html.dark-mode .modern-navbar__mobile-cta--secondary, html.dark-mode .lp-mobile-cta__btn--secondary { background: transparent !important; border-color: #e6f6fd !important; color: #e6f6fd !important; }