/* ==========================================================================
   Brand primary color override — #9E2963 (per Figma)
   Loaded site-wide, AFTER style.css/custom_style.css, so it safely recolors
   the existing reusable utility classes without touching their structure,
   layout, or any other file. Nothing here changes markup or JS behaviour.
   ========================================================================== */
:root {
    --color-1: #9E2963;   /* was #2f57ef — used by .color (gradient text) and other accents */
    --color-2: #3F001F;   /* was #192335 — dark end used alongside --color-1 */
}

.gradient {
    background-image: linear-gradient(to right, #9E2963 0%, #c23a80 51%, #9E2963 100%);
}

/* ==========================================================================
   FOOTER ADD-ONS (payment strip + phone layout)
   Loaded site-wide because the footer renders on every page. Everything is
   scoped to .footer-area / .footer-payment, so nothing else can be affected.
   ========================================================================== */

/* ---- Payment gateway strip -------------------------------------------- */
/* The artwork is transparent with dark lettering, so it needs a light panel
   to stay readable on the dark footer. Centred, never edge to edge. */
.footer-area .footer-payment {
    background: #ffffff;
    border-radius: 14px;
    padding: 4px 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    width: 100%;
    /*max-width: 620px;*/
    margin: 18px auto 0;
}

.footer-area .footer-payment img {
    display: block;
    width: 100%;
    height: auto;
}

/* Phones: the strip sits ABOVE the Newsletter block. Only these two columns
   get an explicit order, so Top Categories / Useful links / Company keep the
   default order 0 and stay first. */
@media (max-width: 767px) {
    .footer-area .footer-payment-col { order: 4; }
    .footer-area .footer-newsletter-col { order: 5; }

    .footer-area .footer-payment {
        max-width: 100%;
        margin: 0 auto 22px;
        padding: 10px;
        border-radius: 10px;
    }
}

/* ---- Phone layout: "Useful links" and "Company" side by side ----------- */
@media (max-width: 575px) {
    .footer-area .footer-company-col .footer-widget ul li a,
    .footer-area .footer-company-col .footer-widget ul li {
        font-size: 13px;
        line-height: 1.5;
        word-break: break-word;      /* long email must not overflow the half column */
        overflow-wrap: anywhere;
    }

    .footer-area .footer-newsletter-col {
        margin-top: 6px;
    }
}