/*
 * CashWorld theme overrides.
 *
 * Loaded after the theme's own style.css. Everything here exists because the
 * theme hard-codes #7367f0 / #723eeb in places instead of using
 * var(--primary-color) -- so changing base_color alone leaves purple behind.
 *
 * Kept as a separate file rather than edited into style.css: that file is
 * vendor code and a theme update would take these changes with it.
 *
 * Tokens come from partials/theme-tokens.blade.php, which reads
 * config/cashworld-theme.php.
 */

/* ------------------------------------------------------------------ *
 * 1. The hard-coded purples
 * ------------------------------------------------------------------ */

.bg--primary            { background-color: var(--primary-color) !important; }
.text--primary          { color: var(--primary-color) !important; }
.border--primary        { border-color: var(--primary-color) !important; }
.btn--primary           { background-color: var(--primary-color); border-color: var(--primary-color); }
.badge--primary::before { background-color: var(--primary-color); }

.transaction-table .coupon-name i           { background-color: var(--primary-color); }
.agent-money-out .card-form .note-area code { color: var(--primary-color) !important; }

.agent-banner .agent-access-btn .agent-login:hover {
    background-color: var(--primary-color);
}

/* ------------------------------------------------------------------ *
 * 2. Auth screens
 *
 * The theme's pill buttons and thin borders were drawn for a light purple.
 * Against the deeper red they need a little more weight to read as the same
 * product as cashworld.app.
 * ------------------------------------------------------------------ */

.login,
.register {
    background: linear-gradient(180deg, var(--red0) 0%, #ffffff 55%);
}

.login .content h3,
.register .content h3 {
    color: var(--ink9);
    letter-spacing: -0.02em;
}

.login .form--control,
.register .form--control {
    border: 1.5px solid var(--ink2);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}

.login .form--control:focus,
.register .form--control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--red1);
    outline: none;
}

/* Gold, not red: a focus ring the same colour as the button disappears
   into it, and gold is the accent the marketing site already uses. */
.login .btn--base:focus-visible,
.register .btn--base:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.login .btn--base,
.register .btn--base {
    border-radius: 14px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(163, 5, 15, .28);
}

.login .btn--base:hover,
.register .btn--base:hover {
    background: var(--red5);
    border-color: var(--red5);
    transform: translateY(-2px);
}

.login .text--base,
.register .text--base,
.login .create-acc a,
.register .create-acc a {
    color: var(--primary-color);
    font-weight: 600;
}

.login .show-pass,
.register .show-pass {
    color: var(--ink4);
}

/* ------------------------------------------------------------------ *
 * 3. Shared accents
 * ------------------------------------------------------------------ */

/* Bullets and list markers pick up the accent rather than staying purple. */
.text--base      { color: var(--primary-color) !important; }
.bg--base        { background-color: var(--primary-color) !important; }

/* Status colours, so a success pill is not a shade of the brand red. */
.badge--success,
.text--success   { color: var(--gr) !important; }
.bg--success     { background-color: var(--grb) !important; }

/* ------------------------------------------------------------------ *
 * Logo sizing
 *
 * The theme sizes the logo by width (max-width: 140px). The CashWorld mark is
 * 360x240, so a width constraint makes it ~93px tall -- a red slab across the
 * header. cashworld.app sizes by height instead, which is what keeps it
 * looking like a logo rather than a banner.
 * ------------------------------------------------------------------ */

.site-logo,
.account-logo .site-logo {
    max-width: none;
}

.site-logo img,
.account-logo .site-logo img,
.sidebar-logo img,
.footer-logo img,
.navbar-brand img {
    height: 46px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

@media only screen and (max-width: 991px) {
    .site-logo img,
    .account-logo .site-logo img,
    .sidebar-logo img,
    .navbar-brand img {
        height: 38px;
    }
}

/* The footer sits on a dark ground, where the mark can carry a little more. */
.footer-logo img {
    height: 54px;
}

/* ------------------------------------------------------------------ *
 * Footer
 *
 * The theme paints the footer rgba(35,12,89,.98) -- a hard-coded deep purple
 * that survives any base_color change -- and the copyright strip below it in
 * the primary. With the primary now red, the Belmoney MID statement sitting in
 * that strip inherited dark grey text on a red ground and became unreadable.
 *
 * That statement is the wording Belmoney check against the MID submission, so
 * legibility there is a compliance matter, not a preference.
 * ------------------------------------------------------------------ */

.footer-section {
    background: var(--red9);
}

.footer-section .copyright-area {
    /* A shade deeper than the body, so the strip still reads as separate
       without being a second brand-red block. */
    background: #2a0104;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 22px 0 18px;
}

/* The MID statement: light on dark, and large enough to actually read. */
.footer-section .copyright-area .belmoney-statement p {
    color: rgba(255, 255, 255, .88);
    font-size: 12.5px;
    line-height: 1.75;
    max-width: 980px;
}

.footer-section .copyright-area .belmoney-statement {
    opacity: 1;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-section .copyright-text p,
.footer-section .copyright-text a {
    color: rgba(255, 255, 255, .72);
}

.footer-section .copyright-text a {
    color: var(--gold);
    font-weight: 600;
}

/* Footer widgets on the darker ground */
.footer-section .footer-widget .title,
.footer-section h4 {
    color: #ffffff;
}

.footer-section .footer-text p,
.footer-section .footer-widget p {
    color: rgba(255, 255, 255, .70);
}

.footer-section .footer-widget ul li a {
    color: rgba(255, 255, 255, .80);
}

.footer-section .footer-widget ul li a:hover {
    color: var(--gold);
}

/* Social icons: the primary red disappears against a deep red ground. */
.footer-section .footer-social-icon i {
    background-color: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: background-color .15s, border-color .15s;
}

.footer-section .footer-social-icon a:hover i {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--red9);
}

/* Footer logo -- the theme wraps it in .f-img, not .footer-logo. */
.footer-section .f-img img {
    height: 54px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* ------------------------------------------------------------------ *
 * Auth illustration
 *
 * The theme ships a stock illustration whose purple blobs belong to the old
 * brand, and it is an uploaded site-section asset, so no colour token reaches
 * it. Replaced with a vector drawn in the CashWorld palette: a card in Europe,
 * an arc across the map, a phone receiving mobile money in West Africa --
 * which is the product, rather than a person at a laptop.
 *
 * The uploaded <img> is hidden rather than removed from the blade, so an admin
 * uploading their own image through Site Sections still takes effect: remove
 * these rules and the original path is intact.
 * ------------------------------------------------------------------ */

.login-img img {
    display: none;
}

.login-img {
    min-height: 420px;
    background-image: url('../images/cashworld-transfer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media only screen and (max-width: 991px) {
    /* On a phone the form is what matters; the illustration only pushes it
       below the fold. */
    .login-img {
        display: none;
    }
}