/* Send-money page styles */
:root{ --primary: var(--color-primary); --secondary: var(--color-secondary); }
body{ background: linear-gradient(45deg, rgba(250,244,236,0.6), rgba(255,255,255,0.9)); }
.top-banner{ max-width:900px; margin:34px auto 12px; background:linear-gradient(90deg,var(--primary), #f4b400); color:#fff; padding:12px; border-radius:8px; text-align:center; box-shadow:0 8px 28px rgba(0,0,0,0.06); font-weight:700; font-size:1.2rem; margin-bottom:20px; }
.center-block{ max-width:680px; margin:26px auto; text-align:center; padding:24px; background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.1) }
.wu-logo img{ width:110px; height:110px; border-radius:50%; background:#0f2b2b; padding:12px; box-shadow:0 14px 40px rgba(15,43,43,0.12); display:inline-block }
.page-title{ margin-top:16px; color:#0b3b39; font-weight:800; font-size:1.8rem }
.page-sub{ color:#6b6b6b; margin-bottom:24px; font-size:1.2rem }
.options-list{ display:flex; flex-direction:column; gap:18px; margin-top:18px }
.send-btn{ display:flex; gap:14px; align-items:center; justify-content:space-between; padding:18px 24px; border-radius:10px; text-decoration:none; color:inherit; box-shadow:0 8px 28px rgba(0,0,0,0.06); transition: all .28s ease; font-size:1rem }
.send-btn .btn-icon{ width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px }
.send-btn .btn-text{ flex:1; text-align:right; font-weight:700 }
.send-btn.gold{ background: linear-gradient(90deg,#ffd54a,#f2c200); color:#111 }
.send-btn.dark{ background: #0f1a1a; color:#fff }
/* hover: add sheen and use primary identity color for dark links */
.send-btn:hover{ transform: translateY(-6px) scale(1.01); box-shadow:0 22px 60px rgba(10,20,20,0.12) }
.send-btn.gold:hover{ background: linear-gradient(90deg,var(--primary), var(--secondary)) ; color:#fff }
.send-btn.dark:hover{ background: linear-gradient(90deg,var(--primary), var(--secondary)); color:#fff }
.send-btn .btn-icon{ background: rgba(255,255,255,0.12); }
.send-btn.gold .btn-icon{ background: rgba(0,0,0,0.06) }
.floating-icons{ position:fixed; inset:auto 18px 18px auto; display:flex; flex-direction:column; gap:18px }
.floating-icons .fi{ width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.06); font-size:1.2rem }

/* button sheen animation */
@keyframes sheen{ 0%{background-position:-200px 0} 100%{background-position:200px 0} }
.send-btn::after{ content:''; position:absolute; inset:0; border-radius:10px; pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.0) 100%); transform:translateZ(0); opacity:0 }
.send-btn:hover::after{ opacity:1; animation:sheen 1s linear forwards }

/* Footer refinement styles */
.footer {
    margin-top: 40px;
    padding: 16px;
    background: linear-gradient(90deg, #fff, #f9f9f9);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1rem;
    color: var(--primary);
    gap: 12px;
}

.footer-content span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.footer-content span::before {
    content: '';
    width: 24px;
    height: 24px;
    background: var(--secondary);
    border-radius: 50%;
    display: inline-block;
}

@media (min-width:700px){ .options-list{ flex-direction:column } }

    .transfer-features {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        flex-wrap: wrap;
        padding: 2rem;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid rgba(219, 173, 43, 0.1);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
        animation: featuresFade 0.8s ease backwards 1.2s;
    }

    @keyframes featuresFade {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .feature-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.3s ease;
    }

    .feature-item:hover {
        transform: translateY(-3px);
    }

    .feature-icon-small {
        width: 45px;
        height: 45px;
        background: linear-gradient(135deg, rgba(219, 173, 43, 0.1) 0%, rgba(245, 216, 118, 0.15) 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 1.125rem;
        animation: iconBounce 2s ease-in-out infinite;
    }

    .feature-item:nth-child(1) .feature-icon-small {
        animation-delay: 0s;
    }

    .feature-item:nth-child(2) .feature-icon-small {
        animation-delay: 0.2s;
    }

    .feature-item:nth-child(3) .feature-icon-small {
        animation-delay: 0.4s;
    }

    .feature-item:nth-child(4) .feature-icon-small {
        animation-delay: 0.6s;
    }

    @keyframes iconBounce {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-5px);
        }
    }

    .feature-item span {
        font-weight: 700;
        color: var(--dark);
        font-size: 1rem;
    }