/* ==========================================================================
   Brand override — aligns carepaymn-landing with merchant.carepay.mn
   Loaded last, on purpose: overrides style.css / vcard_button.css by source
   order rather than editing those files directly.

   Merchant palette (from carepay-web resources/assets/merchant-web/scss):
     primary blue   #0164ff
     hover blue     #104cba
     gradient blue  #086ad8
     light blue     #378cff
     navy           #051836
     font           "Rubik", sans-serif
   ========================================================================== */

/* -- Typography -------------------------------------------------------- */
body,
.navbar,
.btn,
.solid-btn,
.outline-btn,
.primary-solid-btn,
.google-play-btn,
.app-store-btn,
.main-menu ul > li a,
h1, h2, h3, h4, h5, h6 {
    font-family: "Rubik", sans-serif;
}

/* -- Brand utility classes ---------------------------------------------- */
.color-primary {
    color: #0164ff;
}
.color-secondary {
    color: #051836;
}
.primary-bg {
    background: #051836;
}
.secondary-bg {
    background: #0164ff;
}

/* -- Buttons -------------------------------------------------------------- */
.primary-solid-btn {
    border-color: #0164ff;
    background: #0164ff;
    color: #ffffff;
}
.primary-solid-btn:hover {
    background: transparent;
    color: #104cba;
    border-color: #104cba;
}

.solid-btn {
    background: #0164ff;
    border: 2px solid #0164ff;
    border-radius: 10px;
    box-shadow: 0 5px 12px 0 rgba(1, 100, 255, 0.25);
}
.solid-btn:hover {
    background: transparent;
    color: #104cba;
    border-color: #104cba;
}

.outline-btn {
    border-radius: 10px;
    color: #0164ff;
    border: 2px solid #0164ff;
}
.outline-btn:hover {
    color: #fff;
    background: #0164ff;
    box-shadow: 0 20px 30px 0 rgba(1, 100, 255, 0.25);
}

.google-play-btn {
    background: #0164ff;
    border-color: #0164ff;
    border-radius: 10px;
}
.app-store-btn {
    border-radius: 10px;
    color: #0164ff;
    border-color: #0164ff;
}
.app-store-btn:hover {
    background: #0164ff;
    color: #fff;
}

/* -- Navbar --------------------------------------------------------------- */
.affix {
    background-color: #051836;
}
.main-menu ul li:last-child a {
    color: #0164ff;
}
.affix .main-menu ul li:last-child a {
    background: #0164ff;
}
.white-bg.affix ul li a {
    color: #051836 !important;
}

/* -- Login CTA (.glow-on-hover, base rules in vcard_button.css) ---------- */
.glow-on-hover {
    background: #0164ff;
}
.glow-on-hover:before {
    background: linear-gradient(45deg, #051836, #086ad8, #378cff, #0164ff, #104cba, #051836);
}
.glow-on-hover:active {
    color: #0164ff;
}
.glow-on-hover:after {
    background: linear-gradient(45deg, #0164ff, #104cba);
}

/* -- Feature icon badges ---------------------------------------------------
   .single-promo-1 span already carries its own icon-badge look (70px glyph +
   a background-image blob from promo-icon-bg.svg, positioned via padding /
   background-position). Give IT the blue circle instead of stacking a second
   circle on the .circle-icon wrapper — that's what caused the icons to look
   doubled/overlapping. */
.single-promo-1 span {
    background-image: none;
    background: #0164ff;
    width: 90px;
    height: 90px;
    padding: 0;
    font-size: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

/* -- Purple raster icon assets (about-section feature icons + diagram) --
   These are baked-in-purple PNGs (#6730e3 family); hue-rotate shifts them
   into the blue brand family without touching the source files. */
.icon-box img,
.about-content-right img {
    filter: hue-rotate(-42deg) saturate(1.1);
}

/* -- Footer background photo (footer-bg-min.png is a purple gradient) ----
   Recolor via a ::before layer instead of filtering .footer-top directly,
   so the filter doesn't also re-rotate the white text/logo and the blue
   .social-list links sitting on top of it. */
.footer-top {
    position: relative;
    background: none !important;
    overflow: hidden;
}
.footer-top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/assets/images/landing/footer-bg-min.png') no-repeat center top / cover;
    filter: hue-rotate(-38deg) saturate(1.1);
}
.social-list li a {
    color: #0164ff;
}

/* -- Hero photo collage (replaces the old flat-illustration composite) --
   Main photo + two floating accent photos, each bobbing independently,
   mirroring the original layered/animated hero without the cartoon SVGs. */
.hero-photo-collage {
    position: relative;
    z-index: 2;
    padding: 12% 10%;
}
.hero-photo-main {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px 0 rgba(1, 100, 255, 0.3);
    animation: heroFloatMain 6s ease-in-out infinite;
}
.hero-photo-main img,
.hero-photo-badge img {
    display: block;
    width: 100%;
    height: auto;
}
.hero-photo-badge {
    position: absolute;
    width: 34%;
    border-radius: 16px;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 15px 30px 0 rgba(1, 100, 255, 0.35);
}
.hero-photo-badge-1 {
    top: 0;
    right: 0;
    animation: heroFloatBadge1 5s ease-in-out infinite;
}
.hero-photo-badge-2 {
    bottom: 0;
    left: 0;
    animation: heroFloatBadge2 7s ease-in-out infinite;
}
@keyframes heroFloatMain {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes heroFloatBadge1 {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(12px) rotate(-3deg); }
}
@keyframes heroFloatBadge2 {
    0%, 100% { transform: translateY(0) rotate(3deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

/* -- App download modal (custom.css uses purple with !important) -------- */
.app-modal .app-links a.app-link {
    background: linear-gradient(#fff, #cfe0ff) !important;
}
.app-modal .app-links a.app-link:after {
    background: linear-gradient(#fff, #99c2ff) !important;
}
.app-modal .app-links a.app-link > div strong,
.app-modal .app-links a.app-link > div small {
    color: #0164ff;
}

/* -- Hero decorative floating dots (were literal rainbow colors) -------- */
.animated-point-1,
.animated-point-4 {
    background-color: #378cff;
}
.animated-point-2,
.animated-point-7 {
    background-color: #086ad8;
}
.animated-point-3,
.animated-point-6 {
    background-color: #104cba;
}
.animated-point-5 {
    background-color: #0164ff;
}
.animated-point-8,
.animated-point-9 {
    background-color: #051836;
}

/* -- FAQ accordion +/- toggle icon --------------------------------------- */
.accordion-faq.accordion .card-header:after {
    color: #0164ff;
}

/* -- Mobile navbar (style.css sets its own purple inside this breakpoint) */
@media (min-width: 320px) and (max-width: 992px) {
    .navbar {
        background: #051836 !important;
    }
    .white-bg.custom-nav ul li a,
    .custom-nav ul li a {
        color: #051836 !important;
    }
    .white-bg.navbar .navbar-toggler span {
        color: #051836;
    }
}