@font-face {
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Brand palette: change colors here only
   Primary   #315E67 (deep teal)
   Secondary #F05229 (vermilion orange)
   ========================================================================== */
:root {
    /* Primary */
    --brand-primary: #315E67;
    --brand-primary-hover: #2A5058;       /* 15% darker */
    --brand-primary-active: #25464D;      /* 25% darker */
    --brand-primary-emphasis: #1D383E;    /* 40% darker, for text on light tints */
    --brand-primary-subtle: #D6DFE1;      /* 80% lighter, backgrounds */
    --brand-primary-subtle-border: #ADBFC2; /* 60% lighter, borders */
    --brand-primary-tint: #EAEFF0;        /* 90% lighter, page sections */
    --brand-primary-accent: #EEFCFE;      /* AsensoPay Biz backgrounds */

    /* Secondary */
    --brand-secondary: #F05229;
    --brand-secondary-hover: #CC4623;
    --brand-secondary-active: #B43E1F;
    --brand-secondary-emphasis: #903119;
    --brand-secondary-subtle: #FCDCD4;
    --brand-secondary-subtle-border: #F9BAA9;
    --brand-secondary-tint: #FEEEEA;
    --brand-secondary-accent: #FFF5DE;    /* AsensoPay Enterprise backgrounds */

    /* Tertiary (#15A46F, green) */
    --brand-tertiary: #15A46F;
    --brand-tertiary-hover: #128B5E;
    --brand-tertiary-active: #107B53;
    --brand-tertiary-emphasis: #0D6243;
    --brand-tertiary-subtle: #D0EDE2;
    --brand-tertiary-subtle-border: #A1DBC5;
    --brand-tertiary-tint: #E8F6F1;

    /* Neutrals */
    --brand-bg: #FFFFFF;
    --brand-accent: #F8F8F8;              /* gray section panels */
    --brand-text: #1F2937;
    --brand-text-emphasis: #353737;       /* dark headings on light backgrounds, e.g. the hero subtitle */

    /* Font */
    --bs-body-font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Map the palette onto Bootstrap */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 49, 94, 103;
    --bs-primary-text-emphasis: var(--brand-primary-emphasis);
    --bs-primary-bg-subtle: var(--brand-primary-subtle);
    --bs-primary-border-subtle: var(--brand-primary-subtle-border);

    --bs-secondary: var(--brand-secondary);
    --bs-secondary-rgb: 240, 82, 41;
    --bs-secondary-text-emphasis: var(--brand-secondary-emphasis);
    --bs-secondary-bg-subtle: var(--brand-secondary-subtle);
    --bs-secondary-border-subtle: var(--brand-secondary-subtle-border);

    --bs-body-bg: var(--brand-bg);
    --bs-body-color: var(--brand-text);
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: 49, 94, 103;
    --bs-link-hover-color: var(--brand-primary-hover);
    --bs-link-hover-color-rgb: 42, 80, 88;
}

html, body {
    font-family: var(--bs-body-font-family);
}

html {
    scroll-behavior: smooth;
}

/* FocusOnNavigate (Routes.razor) moves focus to the page's <h1> after each navigation, so screen
   readers announce the new page. The heading isn't interactive, so it needs no focus ring. */
h1:focus {
    outline: none;
}

/* ===== Buttons ===== */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-focus-shadow-rgb: 49, 94, 103;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-secondary);
    --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-secondary-hover);
    --bs-btn-hover-border-color: var(--brand-secondary-hover);
    --bs-btn-focus-shadow-rgb: 240, 82, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-secondary-active);
    --bs-btn-active-border-color: var(--brand-secondary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-secondary);
    --bs-btn-disabled-border-color: var(--brand-secondary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 49, 94, 103;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-active);
    --bs-btn-active-border-color: var(--brand-primary-active);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--brand-secondary-hover);
    --bs-btn-border-color: var(--brand-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-secondary);
    --bs-btn-hover-border-color: var(--brand-secondary);
    --bs-btn-focus-shadow-rgb: 240, 82, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-secondary-active);
    --bs-btn-active-border-color: var(--brand-secondary-active);
    --bs-btn-disabled-color: var(--brand-secondary);
    --bs-btn-disabled-border-color: var(--brand-secondary);
}

.btn-tertiary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-tertiary);
    --bs-btn-border-color: var(--brand-tertiary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-tertiary-hover);
    --bs-btn-hover-border-color: var(--brand-tertiary-hover);
    --bs-btn-focus-shadow-rgb: 21, 164, 111;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-tertiary-active);
    --bs-btn-active-border-color: var(--brand-tertiary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-tertiary);
    --bs-btn-disabled-border-color: var(--brand-tertiary);
}

.btn-outline-tertiary {
    --bs-btn-color: var(--brand-tertiary-emphasis);
    --bs-btn-border-color: var(--brand-tertiary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-tertiary);
    --bs-btn-hover-border-color: var(--brand-tertiary);
    --bs-btn-focus-shadow-rgb: 21, 164, 111;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-tertiary-active);
    --bs-btn-active-border-color: var(--brand-tertiary-active);
    --bs-btn-disabled-color: var(--brand-tertiary);
    --bs-btn-disabled-border-color: var(--brand-tertiary);
}

/* ===== Link utilities =====
   Bootstrap compiles the link-primary and link-secondary hover colours as fixed values (its own
   blue and gray), so they don't follow the palette above. Point them at the brand hover shades. */
.link-primary:hover,
.link-primary:focus {
    color: var(--brand-primary-hover) !important;
    text-decoration-color: var(--brand-primary-hover) !important;
}

.link-secondary:hover,
.link-secondary:focus {
    color: var(--brand-secondary-hover) !important;
    text-decoration-color: var(--brand-secondary-hover) !important;
}

/* ===== Inputs ===== */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ===== Components that use --bs-primary-bg directly ===== */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary);
    --bs-pagination-color: var(--brand-primary);
    --bs-pagination-hover-color: var(--brand-primary-hover);
    --bs-pagination-focus-color: var(--brand-primary-hover);
}

.list-group {
    --bs-list-group-active-bg: var(--brand-primary);
    --bs-list-group-active-border-color: var(--brand-primary);
}

.accordion {
    --bs-accordion-active-bg: var(--brand-primary-tint);
    --bs-accordion-active-color: var(--brand-primary-emphasis);
    --bs-accordion-btn-focus-border-color: var(--brand-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.progress {
    --bs-progress-bar-bg: var(--brand-primary);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand-primary);
}

/* ===== Background utilities =====
   Bootstrap-style classes for the accent colours, which have no Bootstrap theme colour of their own */
.bg-primary-accent {
    background-color: var(--brand-primary-accent) !important;
}

.bg-secondary-accent {
    background-color: var(--brand-secondary-accent) !important;
}

/* ===== Search highlights =====
   Words matched by the FAQ search (js/faq-search.js). The CSS Custom Highlight API marks them without
   changing the markup, so they can't be reached from a component's scoped CSS. */
::highlight(faq-search) {
    background-color: var(--brand-secondary-subtle);
}

/* ===== Modal backdrop (created by Bootstrap outside the component, so styled globally) ===== */
.modal-backdrop {
    --bs-backdrop-bg: var(--brand-primary-emphasis);
    --bs-backdrop-opacity: 0.55;
    backdrop-filter: blur(3px);
}

/* Keep this short: Bootstrap waits for the backdrop to finish fading in before it starts showing
   the dialog, so a long backdrop transition reads as a pause before the modal appears. */
.modal-backdrop.fade {
    transition: opacity 0.12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop.fade {
        transition: none;
    }
}

/* Scrolling to a section (a link with #fragment) stops below the sticky header (5.75rem) */
section[id] {
    scroll-margin-top: 6.5rem;
}

/* A link to one product card (#mobile, #e-com...) also stops below the sticky header */
.business-solution [id] {
    scroll-margin-top: 6.5rem;
}

/* ===== Scroll reveal =====
   Elements marked data-reveal (or picked by data-reveal-children) start hidden and ease into view each
   time they scroll onto the screen; wwwroot/js/scroll-reveal.js adds .is-revealed, and takes it off
   again once the element has left the screen so it can play again.
   Only applied when scripting is on and the visitor has not asked for reduced motion, so without
   either of those everything is simply visible. */
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translate3d(0, 1.75rem, 0);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
    }

    [data-reveal="fade"] { transform: none; }
    [data-reveal="left"] { transform: translate3d(-1.75rem, 0, 0); }
    [data-reveal="right"] { transform: translate3d(1.75rem, 0, 0); }
    [data-reveal="zoom"] { transform: scale(0.94); }

    [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* Sliding in from the side must not make the page scroll sideways while it moves */
.content {
    overflow-x: clip;
}

/* Blazor's <FocusOnNavigate> (Routes.razor) moves focus to the page's <h1> after each navigation so
   screen readers announce the new page. The browser draws a focus ring on it; it is not something a
   visitor tabs to or clicks, so the ring is hidden. Focus itself is kept. */
h1:focus,
h1:focus-visible {
    outline: none;
}