/* =========================================================
   Footer — professional redesign
   ========================================================= */
.ds-site-footer {
    background: var(--ds-primary-dark);
    color: rgba(255, 255, 255, 0.78);
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

/* Thin brand-accent bar on top of the footer, separates it from page content
   without needing a heavy border. */
.ds-site-footer::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--ds-accent) 0%, var(--ds-primary) 50%, var(--ds-accent) 100%);
    position: relative;
    z-index: 2;
}

.ds-footer-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Decorative brand mark, bottom-left corner — very faint (10% opacity), sits above
   the glow (z-index 0) but below the real footer content (.container has no
   z-index set, so its default stacking already paints over this). Nudged slightly
   past the edges (negative left/bottom) since .ds-site-footer already clips
   overflow, so it can bleed off the corner instead of looking like a hard-cropped
   rectangle. */
.ds-footer-khalat {
    position: absolute;
    left: 80px;
    bottom: 5px;
    width: 340px;
    height: auto;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* Scaled down in two steps for narrower footers — at the full 340px this would
   crowd or overlap the footer text once the widgets column stacks to one column
   (991.98px, matching the breakpoint right below where .ds-footer-widgets itself
   switches to right-aligned single-column). Position also pulled back toward the
   corner at each step so it stays a background accent instead of competing with
   the (now narrower) text column next to it. */
@media (max-width: 991.98px) {
    .ds-footer-khalat {
        left: 30px;
        bottom: 0;
        width: 220px;
    }
}

@media (max-width: 575.98px) {
    .ds-footer-khalat {
        left: 10px;
        bottom: 5px;
        width: 260px;
    }
}

.ds-site-footer > .container {
    position: relative;
    z-index: 1;
}

.ds-site-footer a {
    color: rgba(255, 255, 255, 0.78);
}

.ds-site-footer a:hover {
    color: var(--ds-white);
}

/* ---- Trust badges row ---- */
.ds-trust-badges {
    padding-block: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ds-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.ds-trust-badge-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* Solid white (not the previous translucent tint) per site-owner request, so
       these theme-bundled illustrations stand out clearly against the dark footer
       background instead of blending into it. */
    background: var(--ds-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.ds-trust-badge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ds-trust-badge-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: var(--ds-fs-xs);
}

.ds-trust-badge-copy strong {
    color: var(--ds-white);
    font-size: var(--ds-fs-sm);
}

.ds-trust-badge-copy span:last-child {
    color: rgba(255, 255, 255, 0.55);
}

.ds-footer-logo img,
.ds-logo-image {
    /* Same wide (~1.5:1) logo mark as the header (see header.css) — the footer
       isn't squeezed into a fixed-height bar the way the header is, so it can
       afford to run a bit larger here: 52px tall, ~78px wide. */
    max-height: 70px;
    width: auto;
    height: auto;
}

.ds-footer-logo-text {
    font-size: var(--ds-fs-lg);
    font-weight: 800;
    color: var(--ds-white);
}

.ds-footer-tagline {
    font-size: var(--ds-fs-sm);
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.8;
    max-width: 340px;
    margin-bottom: 1rem;
}

.ds-footer-address {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--ds-fs-sm);
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.8;
    max-width: 340px;
}

.ds-footer-inline-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--ds-accent);
}

.ds-footer-widget-title {
    font-size: var(--ds-fs-base);
    font-weight: 700;
    color: var(--ds-white);
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.65rem;
}

.ds-footer-widget-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 2px;
    background: var(--ds-accent);
}

.ds-footer-widgets ul {
    margin: 0;
    padding: 0;
}

.ds-footer-link-list li {
    margin-bottom: 0.75rem;
    font-size: var(--ds-fs-sm);
}

.ds-footer-link-list li a {
    position: relative;
    transition: padding-right var(--ds-transition), color var(--ds-transition);
}

.ds-footer-link-list li a::before {
    content: "‹";
    position: absolute;
    right: -14px;
    opacity: 0;
    transition: opacity var(--ds-transition), right var(--ds-transition);
    color: var(--ds-accent);
}

.ds-footer-link-list li a:hover {
    padding-right: 14px;
}

.ds-footer-link-list li a:hover::before {
    right: 0;
    opacity: 1;
}

.ds-footer-contact li {
    margin-bottom: 0.85rem;
    font-size: var(--ds-fs-sm);
}

.ds-footer-contact li a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.ds-footer-contact li a span {
    direction: ltr;
    unicode-bidi: plaintext;
}

/* ---- Social icon buttons ---- */
.ds-site-footer .ds-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    /* Soft filled background (previously just a thin outline on transparent) plus a
       subtle shadow, so these read as clearly tappable, elevated buttons rather
       than faint line-art sitting flat on the footer background. */
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    color: var(--ds-white);
    transition: background-color var(--ds-transition), border-color var(--ds-transition), color var(--ds-transition), transform var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-site-footer .ds-social-link svg {
    width: 19px;
    height: 19px;
}

.ds-site-footer .ds-social-link:hover,
.ds-site-footer .ds-social-link:focus-visible {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
    color: var(--ds-text);
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ---- Bottom bar ---- */
.ds-footer-bottom {
    border-color: rgba(255, 255, 255, 0.12) !important;
    font-size: var(--ds-fs-xs);
}

.ds-footer-bottom p {
    /* Solid white — previously a translucent 55%-opacity white, but that was moot
       anyway because the ".text-muted" Bootstrap utility class on these elements
       (now removed from the markup) set an !important gray that silently beat this
       rule regardless of specificity. This is now the only rule controlling this
       text's color. */
    color: var(--ds-white);
}

@media (max-width: 991.98px) {
    .ds-footer-widgets { text-align: right; }
    .ds-footer-address,
    .ds-footer-tagline { max-width: none; }
}
.ds-footer-logo img, .ds-logo-image {
    width: 155px;
    height: 75px;
}