/* LOOVIE FITTING CTA CLARITY V1
   Membuat banner "Mau fitting dulu?" lebih jelas, kontras, dan mudah terlihat.
*/

body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1,
body .loovie-fitting-cta-clear-v1 {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.1rem !important;
    width: 100% !important;
    padding: 1.25rem 1.45rem !important;
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    border: 1px solid rgba(197,151,58,.42) !important;
    border-left: 6px solid #C5973A !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 8% 20%, rgba(228,196,118,.22), transparent 28%),
        linear-gradient(135deg, #FFF8EA 0%, #FFFFFF 58%, #F6E9CE 100%) !important;
    box-shadow: 0 18px 42px rgba(29,45,72,.10) !important;
    color: #1D2D48 !important;
    overflow: hidden !important;
}

body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1::before,
body .loovie-fitting-cta-clear-v1::before {
    content: "✨" !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    color: #C5973A !important;
    background: rgba(197,151,58,.14) !important;
    box-shadow: inset 0 0 0 1px rgba(197,151,58,.18) !important;
    font-size: 1.25rem !important;
}

body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 > *:first-child,
body .loovie-fitting-cta-clear-v1 > *:first-child {
    flex: 1 1 auto !important;
}

body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 strong,
body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 b,
body .loovie-fitting-cta-clear-v1 strong,
body .loovie-fitting-cta-clear-v1 b {
    color: #1D2D48 !important;
    font-weight: 900 !important;
}

body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 p,
body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 span,
body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 div,
body .loovie-fitting-cta-clear-v1 p,
body .loovie-fitting-cta-clear-v1 span,
body .loovie-fitting-cta-clear-v1 div {
    color: #39485E !important;
    font-size: 1.03rem !important;
    line-height: 1.55 !important;
}

/* Link/button WhatsApp di dalam banner */
body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 a,
body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 button,
body .loovie-fitting-cta-clear-v1 a,
body .loovie-fitting-cta-clear-v1 button {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    min-height: 48px !important;
    padding: .72rem 1.15rem !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #128C4A 0%, #18A85B 100%) !important;
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 14px 28px rgba(18,140,74,.24) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
    white-space: nowrap !important;
}

body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 a:hover,
body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 button:hover,
body .loovie-fitting-cta-clear-v1 a:hover,
body .loovie-fitting-cta-clear-v1 button:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.04) !important;
    box-shadow: 0 18px 34px rgba(18,140,74,.30) !important;
    color: #FFFFFF !important;
}

body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 a i,
body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 a svg,
body .loovie-fitting-cta-clear-v1 a i,
body .loovie-fitting-cta-clear-v1 a svg {
    color: #FFFFFF !important;
}

/* Kalau banner lama berupa border dotted, hilangkan agar terlihat premium */
body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1[style],
body .loovie-fitting-cta-clear-v1[style] {
    border-style: solid !important;
}

/* Dark mode */
html.dark body .loovie-fitting-cta-clear-v1,
html[data-bs-theme="dark"] body .loovie-fitting-cta-clear-v1,
html.lv5d-dark body .loovie-fitting-cta-clear-v1 {
    background:
        radial-gradient(circle at 8% 20%, rgba(228,196,118,.20), transparent 28%),
        linear-gradient(135deg, #162236 0%, #1D2D48 62%, #2A3548 100%) !important;
    border-color: rgba(228,196,118,.35) !important;
    border-left-color: #E4C476 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}

html.dark body .loovie-fitting-cta-clear-v1 p,
html.dark body .loovie-fitting-cta-clear-v1 span,
html.dark body .loovie-fitting-cta-clear-v1 div,
html[data-bs-theme="dark"] body .loovie-fitting-cta-clear-v1 p,
html[data-bs-theme="dark"] body .loovie-fitting-cta-clear-v1 span,
html[data-bs-theme="dark"] body .loovie-fitting-cta-clear-v1 div,
html.lv5d-dark body .loovie-fitting-cta-clear-v1 p,
html.lv5d-dark body .loovie-fitting-cta-clear-v1 span,
html.lv5d-dark body .loovie-fitting-cta-clear-v1 div {
    color: rgba(255,255,255,.82) !important;
}

html.dark body .loovie-fitting-cta-clear-v1 strong,
html.dark body .loovie-fitting-cta-clear-v1 b,
html[data-bs-theme="dark"] body .loovie-fitting-cta-clear-v1 strong,
html[data-bs-theme="dark"] body .loovie-fitting-cta-clear-v1 b,
html.lv5d-dark body .loovie-fitting-cta-clear-v1 strong,
html.lv5d-dark body .loovie-fitting-cta-clear-v1 b {
    color: #FFFFFF !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1,
    body .loovie-fitting-cta-clear-v1 {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 1.1rem !important;
        border-radius: 18px !important;
    }

    body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1::before,
    body .loovie-fitting-cta-clear-v1::before {
        position: absolute !important;
        top: 1rem !important;
        left: 1rem !important;
    }

    body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 > *:first-child,
    body .loovie-fitting-cta-clear-v1 > *:first-child {
        padding-left: 3.25rem !important;
    }

    body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 a,
    body.loovie-luxury-v5 .loovie-fitting-cta-clear-v1 button,
    body .loovie-fitting-cta-clear-v1 a,
    body .loovie-fitting-cta-clear-v1 button {
        width: 100% !important;
        white-space: normal !important;
    }
}