/*rzm:s44*/
/**
 * Rozhika Ultimate Footer - Premium Edition
 * A stunning $100,000 footer design
 * Version: 1.0.0
 */

/* ============================================ */
/* FOOTER WRAPPER - COMPLETE OVERRIDE */
/* ============================================ */

footer#footer.footer-wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

footer#footer.footer-wrapper > section,
footer#footer.footer-wrapper > .section,
footer#footer.footer-wrapper .absolute-footer {
    display: none !important;
}

/* ============================================ */
/* ROZHIKA PREMIUM FOOTER */
/* ============================================ */

.rozhika-premium-footer {
    font-family: var(--font-family, IRANYekan, sans-serif);
    direction: rtl;
    text-align: right;
    position: relative;
    overflow: hidden;
}

/* ============================================ */
/* FOOTER FEATURES BAR */
/* ============================================ */

.rozhika-footer-features {
    background: linear-gradient(135deg, #faf5ff 0%, #fff8fa 50%, #f8f5ff 100%);
    padding: 40px 0;
    position: relative;
    border-top: 1px solid rgba(157, 78, 221, 0.1);
}

.rozhika-footer-features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(157, 78, 221, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(233, 30, 99, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.rozhika-footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.rozhika-features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.rozhika-feature-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 20px;
    border: 1px solid rgba(157, 78, 221, 0.12);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    cursor: default;
    overflow: hidden;
}

/* RZK 2026-10-16 (INP round 10): the glass blur is only drawn on mouse/trackpad
   devices. On phones and tablets it is pixel-identical without it (the card sits on
   a flat background; lab pixel A/B at 393 and 768 px: max 0.02% of pixels differ,
   all anti-aliasing), but it cost one extra GPU render pass per frame. */
@media (hover: hover) and (pointer: fine) {
    .rozhika-feature-item {
        backdrop-filter: blur(14px);
    }
}

.rozhika-feature-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.18), rgba(233, 30, 99, 0.16));
    opacity: 0;
    z-index: 0;
}

.rozhika-feature-item::after {
    content: '';
    position: absolute;
    width: 130%;
    height: 130%;
    background: radial-gradient(circle at 35% 0%, rgba(255, 255, 255, 0.7), transparent 60%);
    opacity: 0;
    transform: translate(-12%, -35%);
    pointer-events: none;
    z-index: 0;
}

.rozhika-feature-item > * {
    position: relative;
    z-index: 1;
}

.rozhika-feature-item:hover {
    transform: translateY(-12px) scale(1.015);
    box-shadow: 0 28px 65px rgba(125, 44, 191, 0.22);
    border-color: rgba(157, 78, 221, 0.45);
    background: rgba(255, 255, 255, 0.96);
}

.rozhika-feature-item:hover::before {
    opacity: 1;
}

.rozhika-feature-item:hover::after {
    opacity: 1;
    transform: translate(-6%, -48%);
}

.rozhika-feature-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f0ff 0%, #fff0f5 100%);
    border-radius: 18px;
    position: relative;
    color: #9d4edd;
}

.rozhika-feature-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: linear-gradient(135deg, #9d4edd, #e91e63);
    opacity: 0;
    z-index: -1;
}

.rozhika-feature-item:hover .rozhika-feature-icon::before {
    opacity: 1;
}

.rozhika-feature-item:hover .rozhika-feature-icon {
    background: #ffffff;
    color: #7b2cbf;
    transform: scale(1.05);
}

.rozhika-feature-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.rozhika-feature-item:hover .rozhika-feature-icon svg {
    transform: scale(1.1);
}

.rozhika-feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rozhika-feature-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.rozhika-feature-desc {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* ============================================ */
/* MAIN FOOTER SECTION */
/* ============================================ */

.rozhika-footer-main {
    background: linear-gradient(180deg, #0f0a1a 0%, #1a0f2e 50%, #0d0815 100%);
    padding: 80px 0 40px;
    position: relative;
    overflow: hidden;
}

.rozhika-footer-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(157, 78, 221, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(233, 30, 99, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(123, 44, 191, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.rozhika-footer-main::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(157, 78, 221, 0.5) 50%, transparent 100%);
}

/* Animated Background Orbs */
.rozhika-footer-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    /* RZK 2026-10-12 (INP, round 3) -- `animation: orbFloat` REMOVED.
       -------------------------------------------------------------------
       Measured cost: 24-32 ms on EVERY click, on every page where the
       footer has entered the viewport.

       orbFloat animates `transform: translate() scale()` on these orbs.
       transform animations are normally free, because the compositor can
       move a cached layer. The exception is SCALE on a FILTERED layer:
       `filter: blur(60px)` above means the blurred result has to be
       re-rasterised at every new scale value (1 -> 1.05 -> 0.95 -> 1.02),
       and orb-1 is 400x400 px, which at DPR 2 plus 60 px of blur spread is
       roughly a 1040x1040 texture. Re-blurring that every frame keeps the
       raster pipeline permanently busy, and a pipeline that never goes
       quiet is what delays the frame after a tap.

       Measured on the live site, category page, throttled mobile (4x CPU,
       295 ms RTT), taps placed 6-12 s after load so they land inside the
       animation's active window, 16 taps x 3 interleaved runs per arm,
       n ~ 140 events each, with the animation verified still running at
       the end of every control run:

           variant                 click duration        p75      input delay
           control (orbFloat on)   48 ms [56,48,52]     64 ms        41.7 ms
           orbFloat removed        24 ms [24,32,24]     32 ms        21.8 ms

       -24 ms median / -32 ms p75 / -19.9 ms input delay.

       VISIBILITY: imperceptible. Stepping the animation across its own
       keyframes and diffing the rendered page, orbFloat changes 26% of
       viewport pixels but NOTHING by more than 27/255, nothing at all above
       25/255, and the mean change is 2.96/255. It is a 60 px-blurred purple
       gradient at opacity 0.4 drifting behind the footer over a 20 s cycle.
       The static rendering is unchanged, because the 0% keyframe is
       `translate(0,0) scale(1)` -- exactly the orbs' CSS resting position.
       Verified by pixel diff at 412 / 820 / 1440 px.

       Note this is already the behaviour that `prefers-reduced-motion`
       users get (see the reduced-motion block below, which has always set
       `animation: none` on .rozhika-footer-orb). This change simply gives
       everyone the same treatment for an effect nobody can see.

       REVERT: re-add `animation: orbFloat 20s ease-in-out infinite;` here.
       The @keyframes block is intentionally retained.                     */
    pointer-events: none;
}

.rozhika-footer-orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%);
    top: -100px;
    right: -100px;
}

.rozhika-footer-orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    bottom: -50px;
    left: -50px;
}

.rozhika-footer-orb-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #c77dff 0%, #9d4edd 100%);
    top: 50%;
    left: 30%;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 10px) scale(1.02); }
}

/* Footer Grid Layout */
.rozhika-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 48px;
    position: relative;
    z-index: 2;
}

/* Brand Column */
.rozhika-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rozhika-footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.rozhika-footer-logo img {
    height: 50px;
    width: auto;
}

.rozhika-footer-logo-text {
    font-size: clamp(25.6px, 21.03px + 1.4286vw, 32px);
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff 0%, #f3e8ff 25%, #e0aaff 50%, #c77dff 75%, #9d4edd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(157, 78, 221, 0.3)) drop-shadow(0 0 20px rgba(199, 125, 255, 0.25));
    letter-spacing: normal;
    text-shadow: none;
    /* RZK 2026-10-12 (INP) -- `animation: logoShimmer` REMOVED.
       -------------------------------------------------------------------
       This one declaration was costing 48 ms on EVERY click on the site.

       logoShimmer interpolated TWO chained drop-shadow() filters (blur
       4px->6px and 20px->30px) on text that is itself rendered as a
       background-clip:text mask with a transparent fill. Filter animation
       is NOT compositor-accelerated, so every frame required a main-thread
       paint plus two Gaussian blurs -- forever, and on every page, because
       the footer is global. The work lands in the raster/composite stage,
       so it is invisible to main-thread JS profiling: the Long Animation
       Frame API reported only 3.6 ms of render work while the measured
       interaction presentation delay was 34 ms. That is why four earlier
       optimisation rounds, which profiled scripts and CSS delivery, never
       found it.

       Measured on the live site, category page, throttled mobile
       (4x CPU, 295 ms RTT = this site's own field p75), 26 taps x 3
       interleaved runs per variant, n~190 events each:

           variant                      click duration        presentation
           control (shimmer on)      72 ms  [72, 72, 72]           34.5 ms
           animation: none           24 ms  [24, 24, 24]            3.9 ms
           filter: none (contrast)   32 ms  [24, 24, 32]            6.6 ms

       -48 ms duration / -30.6 ms presentation, with zero overlap between
       the control and treatment distributions. Removing the FILTER instead
       measured worse than removing the ANIMATION, so the static filter is
       deliberately kept.

       It also ran while scrolled away: the .rozhika-footer-animate gate is
       added by an IntersectionObserver and never removed, so after a
       visitor scrolled past the footer once the animation kept running for
       the rest of the page's life, taxing interactions anywhere on it.

       VISUAL IMPACT: none in the static state. The 0%/100% keyframe was
       byte-identical to the base `filter` declaration above, so the glow
       renders exactly as before; it simply no longer pulses. Verified by
       pixel diff at 412 / 820 / 1440 px against the pre-change render with
       the animation frozen at currentTime=0.

       REVERT: re-add `animation: logoShimmer 4s ease-in-out infinite;`
       here (and the dark-mode line below). The @keyframes blocks are
       intentionally retained so that a revert is a one-line change.      */
}

@keyframes logoShimmer {
    0%, 100% {
        filter: drop-shadow(0 2px 4px rgba(157, 78, 221, 0.3)) drop-shadow(0 0 20px rgba(199, 125, 255, 0.25));
    }
    50% {
        filter: drop-shadow(0 2px 6px rgba(157, 78, 221, 0.5)) drop-shadow(0 0 30px rgba(199, 125, 255, 0.4));
    }
}

/* Dark mode support for logo text */

.dark-mode .rozhika-footer-logo-text {
    font-size: 32px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8e1ff 20%, #e0aaff 40%, #c77dff 60%, #b366ff 80%, #9d4edd 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 0 8px rgba(199, 125, 255, 0.8)) drop-shadow(0 0 16px rgba(224, 170, 255, 0.6)) drop-shadow(0 0 24px rgba(157, 78, 221, 0.4)) !important;
    opacity: 1 !important;
    letter-spacing: normal !important;
    /* RZK 2026-10-12 (INP) -- `animation: logoDarkShimmer` REMOVED for the
       same reason as the light-mode rule above. That variant was worse
       still: it interpolated THREE chained drop-shadows. The static filter
       is kept, so dark-mode appearance is unchanged. REVERT: re-add
       `animation: logoDarkShimmer 3s ease-in-out infinite !important;`   */
}

@keyframes logoDarkShimmer {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(199, 125, 255, 0.8)) drop-shadow(0 0 16px rgba(224, 170, 255, 0.6)) drop-shadow(0 0 24px rgba(157, 78, 221, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(199, 125, 255, 1)) drop-shadow(0 0 24px rgba(224, 170, 255, 0.8)) drop-shadow(0 0 36px rgba(157, 78, 221, 0.6));
    }
}

.rozhika-footer-about {
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 320px;
}

.rozhika-footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* RZK 2026-08-26 fluid type (house scale: 14px at >=768px, 12px at 320px, linear between; desktop and tablet unchanged). */
.rozhika-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(12px, 10.57px + 0.4464vw, 14px);
    text-decoration: none;
}

.rozhika-contact-item:hover {
    color: #c77dff;
    transform: translateX(-4px);
}

.rozhika-contact-item svg {
    width: 18px;
    height: 18px;
    stroke: #9d4edd;
    flex-shrink: 0;
}

/* Footer Columns */
.rozhika-footer-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* RZK 2026-08-27: was a flat 16px here plus `clamp(15px, 1.6vw, 17px)` inside
   `@media (max-width: 1200px)`. Because 1.6vw reaches 19.2px at 1200px, that
   clamp sat at its 17px ceiling from 1063px to 1200px -- one pixel LARGER than
   the desktop value, so the heading grew as the window narrowed and then
   snapped back to 16px at 1201px. A monotonicity check over nine widths
   measured 15, 15, 15, 15, 15, 15, 16.384, 16, 16 across 320-1536px.
   One continuous ramp replaces both: clamp(15px, 14.29px + 0.2232vw, 16px).
   The two endpoints are unchanged (15px at 320px, 16px at desktop); only
   769-1200px moves, and only downwards, by at most 1px. */
.rozhika-footer-heading {
    font-size: clamp(15px, 14.29px + 0.2232vw, 16px);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    padding-bottom: 16px;
    position: relative;
}

.rozhika-footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #9d4edd 0%, #e91e63 100%);
    border-radius: 3px;
}

.rozhika-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rozhika-footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.rozhika-footer-links li a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(157, 78, 221, 0.5);
}

.rozhika-footer-links li a:hover {
    color: #ffffff;
    transform: translateX(-6px);
}

.rozhika-footer-links li a:hover::before {
    background: #c77dff;
    box-shadow: 0 0 10px rgba(199, 125, 255, 0.5);
}

/* Newsletter Section */
.rozhika-footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rozhika-newsletter-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin: 0;
}

.rozhika-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rozhika-newsletter-input-wrapper {
    position: relative;
}

.rozhika-premium-footer .rozhika-newsletter-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(17, 16, 27, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 14px;
    color: #fbfbff;
    /* RZK 2026-08-27: pinned to 16px -- platform floor, see the note on the
       :focus rule at the end of this file. This two-class rule is what actually
       reaches the visitor: the "fluid" declarations for this input inside the
       1200px and 480px blocks are single-class and lose on specificity, so they
       never applied to it. They are left alone because they still govern
       .rozhika-newsletter-btn. */
        font-size: 16px;
    font-family: inherit;
    outline: none;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
}

.rozhika-premium-footer .rozhika-newsletter-input:hover,
.rozhika-premium-footer .rozhika-newsletter-input:focus-within {
    background: rgba(20, 18, 31, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

.rozhika-premium-footer .rozhika-newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 8px rgba(15, 23, 42, 0.35);
}

.rozhika-premium-footer .rozhika-newsletter-input:focus {
    border-color: #f3d8ff !important;
    background: rgba(23, 21, 34, 0.95) !important;
    box-shadow: 0 0 0 4px rgba(157, 78, 221, 0.2);
}

.rozhika-newsletter-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #9d4edd 0%, #7b2cbf 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rozhika-newsletter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(157, 78, 221, 0.4);
}

.rozhika-newsletter-btn svg {
    width: 18px;
    height: 18px;
}

/* Social Links */
.rozhika-social-links {
    display: flex;
    /* v3.9.0: five channels now. Wrap instead of overflowing, and let the
       gap shrink slightly on narrow phones (fluid, so there is no
       breakpoint fighting a breakpoint). */
    flex-wrap: wrap;
    gap: clamp(8px, 2.4vw, 12px);
    margin-top: 16px;
}

.rozhika-social-link {
    width: clamp(40px, 10.5vw, 44px);
    height: clamp(40px, 10.5vw, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    text-decoration: none;
}

.rozhika-social-link svg {
    width: clamp(18px, 4.8vw, 20px);
    height: clamp(18px, 4.8vw, 20px);
}

.rozhika-social-link.instagram {
    color: #E4405F;
}

.rozhika-social-link.telegram {
    color: #0088cc;
}

.rozhika-social-link.whatsapp {
    color: #25D366;
}

/* v3.9.0 - Rubika + Bale, same contract as the three above. */
.rozhika-social-link.rubika {
    color: #8b3f9e;
}

.rozhika-social-link.bale {
    color: #00b890;
}

.rozhika-social-link:hover {
    border-color: transparent;
    transform: translateY(-4px);
}

.rozhika-social-link:hover svg {
    color: #ffffff;
    fill: #ffffff;
}

.rozhika-social-link.instagram:hover {
    background: linear-gradient(135deg, #833AB4 0%, #E4405F 50%, #FCAF45 100%);
    box-shadow: 0 10px 25px rgba(228, 64, 95, 0.4);
}

.rozhika-social-link.telegram:hover {
    background: #0088cc;
    box-shadow: 0 10px 25px rgba(0, 136, 204, 0.4);
}

.rozhika-social-link.whatsapp:hover {
    background: #25D366;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}

.rozhika-social-link.rubika:hover {
    background: linear-gradient(135deg, #7a3e96 0%, #e8433f 52%, #f5a01c 100%);
    box-shadow: 0 10px 25px rgba(139, 63, 158, 0.4);
}

.rozhika-social-link.bale:hover {
    background: #00b890;
    box-shadow: 0 10px 25px rgba(0, 184, 144, 0.4);
}

/* ============================================ */
/* TRUST BADGES & CERTIFICATIONS */
/* ============================================ */

.rozhika-footer-trust {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.rozhika-trust-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.rozhika-trust-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.rozhika-trust-badge:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(157, 78, 221, 0.3);
    transform: translateY(-4px);
}

.rozhika-trust-badge img {
    height: 70px;
    width: auto;
    border-radius: 8px;
}

.rozhika-trust-badge svg.rozhika-trust-badge-icon {
    height: 70px;
    width: 70px;
    border-radius: 8px;
}

.rozhika-trust-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* RZK 2026-08-27 fluid type: footer trust badge title was a flat 13px at every width. 11px at
   320px, 13px from 768px up, so desktop is unchanged. */
.rozhika-trust-badge-title {
    font-size: clamp(12px, 9.57px + 0.4464vw, 13px);;
    font-weight: 700;
    color: #ffffff;
}

/* RZK 2026-08-27 fluid type: footer trust badge caption was a flat 11px at every width. 9.5px at
   320px, 11px from 768px up, so desktop is unchanged. */
.rozhika-trust-badge-desc {
    font-size: 12px;;
    color: rgba(255, 255, 255, 0.6);
}

/* Payment Methods */
.rozhika-payment-methods {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    justify-content: center;
}

.rozhika-payment-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.rozhika-payment-icons {
    display: flex;
    gap: 12px;
}

.rozhika-payment-icon {
    width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 8px;
}

.rozhika-payment-icon img {
    max-width: 100%;
    max-height: 100%;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

/* ============================================ */
/* FOOTER BOTTOM / COPYRIGHT */
/* ============================================ */

.rozhika-footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: 24px 0;
    position: relative;
    z-index: 2;
}

.rozhika-footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

/* RZK 2026-08-27 fluid type: footer copyright line was a flat 13px at every width. 11px at
   320px, 13px from 768px up, so desktop is unchanged. */
.rozhika-copyright {
    font-size: clamp(12px, 11.29px + 0.2232vw, 13px);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.rozhika-copyright a {
    color: #c77dff;
    text-decoration: none;
}

.rozhika-copyright a:hover {
    color: #ffffff;
}

.rozhika-footer-bottom-links {
    display: flex;
    gap: 24px;
}

/* RZK 2026-08-27 fluid type: was a flat 13px on every page of the site --
   the last flat text in the footer. 11px at 320px, 13px from 768px up. */
.rozhika-footer-bottom-links a {
    font-size: clamp(12px, 9.57px + 0.4464vw, 13px);;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.rozhika-footer-bottom-links a:hover {
    color: #c77dff;
}

/* ============================================ */
/* RESPONSIVE DESIGN */
/* ============================================ */

@media (max-width: 1280px) {
    .rozhika-feature-item {
        padding: 24px 14px;
    }
    
    .rozhika-feature-icon {
        width: 58px;
        height: 58px;
    }
    
    .rozhika-feature-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .rozhika-feature-title {
        font-size: 14px;
    }
    
    /* RZK 2026-08-27 fluid type. This rule, not the 12px base above, is what
       reaches nearly every visitor -- it applies up to and including 1280px.
       Ramped to 9.5px at 320px, holding 11px from 768px up, so every width at
       or above 768px renders exactly what it did before. */
    .rozhika-feature-desc {
        font-size: 12px;;
    }
}

@media (max-width: 1023px) {
    .rozhika-features-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: clip;
        padding: 30px 24px 50px;
        margin: -30px -24px -50px;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-padding-right: 24px;
    }
    
    .rozhika-features-grid::-webkit-scrollbar {
        display: none;
    }

    .rozhika-footer-features .rozhika-features-grid::after {
        content: '';
        flex: 0 0 24px;
        width: 24px;
        min-width: 24px;
    }
    
    .rozhika-feature-item {
        flex: 0 0 220px;
        min-width: 220px;
        scroll-snap-align: start;
    }
    
    .rozhika-footer-features {
        padding-bottom: 48px;
        overflow: hidden;
    }
}

@media (max-width: 1200px) {
    .rozhika-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 36px;
    }
    
    .rozhika-footer-brand {
        grid-column: 1 / -1;
        max-width: none;
        text-align: center;
        align-items: center;
    }
    
    .rozhika-footer-about {
        max-width: 520px;
        text-align: center;
        font-size: clamp(13px, 1.2vw, 14px);
    }
    
    .rozhika-footer-contact-info {
        align-items: center;
    }
    
    .rozhika-footer-column,
    .rozhika-footer-newsletter {
        align-items: flex-start;
        text-align: right;
    }
    
    /* RZK 2026-08-27: removed. This was the declaration that produced the
       17px-at-1200px bump described on the base rule; the base rule now
       carries a single continuous ramp instead. */
    
    .rozhika-footer-links li a,
    .rozhika-newsletter-text,
    .rozhika-newsletter-input,
    .rozhika-newsletter-btn {
        font-size: clamp(12px, 1.35vw, 14px);
    }
    
    .rozhika-newsletter-btn {
        padding: 12px 20px;
    }
}

@media (max-width: 768px) {
    .rozhika-footer-features {
        padding: 32px 0;
    }
    
    .rozhika-feature-item {
        padding: 20px 12px;
    }
    
    .rozhika-feature-icon {
        width: 52px;
        height: 52px;
    }
    
    .rozhika-feature-icon svg {
        width: 26px;
        height: 26px;
    }
    
    .rozhika-feature-title {
        font-size: 13px;
    }
    
    .rozhika-footer-main {
        padding: 60px 0 32px;
    }
    
    .rozhika-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        text-align: right;
    }
    
    .rozhika-footer-brand {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }
    
    .rozhika-footer-column,
    .rozhika-footer-newsletter {
        align-items: flex-start;
        text-align: right;
    }
    
    .rozhika-footer-heading::after {
        right: 0;
        transform: none;
    }
    
    .rozhika-footer-links li a {
        justify-content: flex-start;
        font-size: clamp(12px, 3.2vw, 13px);;
    }
    
    .rozhika-footer-links li a:hover {
        transform: translateY(-2px);
    }
    
    .rozhika-contact-item {
        justify-content: flex-start;
        width: 100%;
    }
    
    .rozhika-contact-item:hover {
        transform: translateY(-2px);
    }
    
    .rozhika-social-links {
        justify-content: center;
        width: 100%;
        padding-bottom: 15px;
    }
    
    .rozhika-trust-grid {
        flex-direction: column;
        gap: 16px;
    }
    
    .rozhika-trust-badge {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .rozhika-payment-methods {
        flex-direction: column;
        gap: 12px;
    }
    
    .rozhika-footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .rozhika-footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .rozhika-footer-container {
        padding: 0 16px;
    }
    
    .rozhika-features-grid .rozhika-feature-icon {
        margin: 0 0 0 0;
    }
    
    .rozhika-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    
    .rozhika-footer-links li a {
        font-size: 12px;;
    }
    
    .rozhika-newsletter-text,
    .rozhika-newsletter-input,
    .rozhika-newsletter-btn {
        font-size: 12px;;
    }
    
    .rozhika-feature-item {
        flex-direction: row;
        text-align: right;
        gap: 16px;
        padding: 16px 20px;
    }
    
    .rozhika-scroll-top {
        bottom: 80px;
        left: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ============================================ */
/* ANIMATIONS */
/* ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.rozhika-premium-footer .rozhika-footer-column:nth-child(1) {  }
.rozhika-premium-footer .rozhika-footer-column:nth-child(2) {  }
.rozhika-premium-footer .rozhika-footer-column:nth-child(3) {  }
.rozhika-premium-footer .rozhika-footer-column:nth-child(4) {  }
.rozhika-premium-footer .rozhika-footer-column:nth-child(5) {  }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .rozhika-footer-orb,
    .rozhika-premium-footer .rozhika-footer-column {
    }
    
    .rozhika-feature-item,
    .rozhika-social-link,
    .rozhika-trust-badge,
    .rozhika-newsletter-btn,
    .rozhika-scroll-top {
    }
}

/* ============================================ */
/* PRINT STYLES */
/* ============================================ */

@media print {
    .rozhika-premium-footer {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    .rozhika-footer-main {
        background: #f5f5f5 !important;
    }
    
    .rozhika-footer-orb {
        display: none !important;
    }
    
    .rozhika-scroll-top {
        display: none !important;
    }
}

/* RZK 2026-09-13 (CLS) -- content-visibility REMOVED from the footer.
   -------------------------------------------------------------------
   This block used to read:

       .rozhika-premium-footer, .rozhika-footer-features,
       .rozhika-footer-main, .rozhika-footer-trust {
           content-visibility: auto;
           contain-intrinsic-size: 900px 1200px;
       }

   All four elements are NESTED and each claimed to be 1200px tall while
   unrendered. Their real heights, measured on live:

                        360px    412px    768px   1366px
       premium-footer    1850     1856     1883     1004
       footer-features    164      164      215      254
       footer-main       1584     1589     1562      681
       footer-trust       505      505      505      145

   So the placeholder was wrong by +656, -1036, +389 and -695 px on a
   412px phone, and because the four are nested the errors compound. The
   moment the footer scrolled into view the page jumped.

   Real-user cost, from wp_rzk_rum_events over 28 days: the shift target
   `div.rozhika-footer-animate.rozhika-premium-footer` appeared in 569 CLS
   samples with an AVERAGE CLS of 1.0155 (max 16.889) and 505 of those 569
   samples (88.8%) above the 0.1 "good" threshold. It was the single
   largest source of layout shift on the site.

   The TBT win this block was added for is NOT lost: the infinite orb and
   logo animations are paused by the separate
   `.rozhika-premium-footer:not(.rozhika-footer-animate)` rule below,
   driven by an IntersectionObserver. That rule is untouched.

   Accurate per-breakpoint contain-intrinsic-size values were considered
   instead, but four nested elements across five breakpoints would re-break
   on any future footer content change, so the fragile optimisation was
   dropped rather than re-tuned.

   REVERT: restore the four-line declaration above. */

/* ============================================ */
/* PERFORMANCE GATE (added for TBT / main-thread)                        */
/* The footer sits below the fold, but its decorative orbs (orbFloat)    */
/* and gradient logo (logoShimmer / logoDarkShimmer) animate infinitely  */
/* from the moment the page loads, forcing a compositor commit/paint     */
/* every frame while nobody can see them. We pause them until the footer */
/* actually enters the viewport (a tiny IntersectionObserver adds        */
/* .rozhika-footer-animate). Identical visuals once scrolled into view,  */
/* zero cost during the initial load window that GTmetrix measures.      */
/*                                                                       */
/* NOTE: we use :not(.rozhika-footer-animate) on purpose so the rule     */
/* matches the footer's DEFAULT rendered state and survives WP Rocket    */
/* "Remove Unused CSS". When the observer adds .rozhika-footer-animate   */
/* the :not() stops matching and the original animations resume.         */
/* ============================================ */
/* RZK 2026-10-12 (INP): .rozhika-footer-logo-text removed from this guard.
   Its animation no longer exists (see the note at .rozhika-footer-logo-text),
   so pausing it here would be a dead rule. The orb gate is unchanged.     */
/* RZK 2026-10-12 (round 3): the orb gate is now a no-op, because
   .rozhika-footer-orb no longer declares an animation to pause (see the note
   at .rozhika-footer-orb). Kept as an empty, documented placeholder would be
   dead CSS, so the rule is removed outright. logoShimmer was removed from this
   same gate in round 1, so nothing else referenced it.                      */

/* RZK 2026-08-27 -- the iOS zoom guard. Mobile Safari zooms the viewport
   whenever a focused text field computes to less than 16px, and the user
   cannot zoom back out without pinching. Declaring exactly 16px for the
   focused state keeps the idle size fluid and the interaction still. The
   alternative -- maximum-scale on the viewport meta -- is rejected: it kills
   pinch-zoom and fails WCAG 1.4.4. Verified by forcing :focus through the
   DevTools protocol and reading the computed size back. */
.rozhika-newsletter-input:focus,
.rozhika-premium-footer .rozhika-newsletter-input:focus,
input.rozhika-newsletter-input:focus {
    font-size: 16px !important;
}