#money {
        color: #dbdbdb;
    }
    input {
        width: 90%;
        padding: 10px;
        margin: 8px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }
    input[readonly] {
        background-color: #b6b6b6;
        cursor: not-allowed;
    }



    

    /* Container */
    .payments-wrap{
      width:100%;max-width:980px;display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start;
    }

    /* Left: intro */
    .hero{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      border-radius:16px;padding:28px;box-shadow:0 8px 30px rgba(2,6,23,0.6);backdrop-filter: blur(6px);
    }
    .hero h1{margin:0 0 6px;font-size:22px}
    .hero p{margin:0;color:var(--muted)}

    /* Right: cards */
    .cards{
      display:flex;flex-direction:column;gap:14px;
    }

    .card{
      display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:linear-gradient(180deg,var(--glass),transparent);
      border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 18px rgba(2,6,23,0.5);transition:transform .28s ease, box-shadow .28s ease;
      transform:translateY(0);
      position:relative;overflow:hidden;
    }
    .card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(2,6,23,0.6)}

    /* floating icon */
    .icon-wrap{width:56px;height:56px;flex:0 0 56px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);}
    .icon-wrap img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(2,6,23,0.6));animation:float 3.6s ease-in-out infinite}

    @keyframes float{
      0%{transform:translateY(0)}
      50%{transform:translateY(-6px)}
      100%{transform:translateY(0)}
    }

    .meta{flex:1;min-width:0}
    .meta .title{font-weight:600;font-size:15px}
    .meta .desc{font-size:13px;color:var(--muted);margin-top:4px}

    .amount{
      display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:120px
    }
    .amount .value{font-weight:700;font-size:18px}
    .amount .small{font-size:12px;color:var(--muted)}

    /* Animated accent bar */
    .card::after{
      content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,var(--accent1),var(--accent2));opacity:0.06;transform:rotate(20deg);
    }

    /* Different accents per currency */
    .card.usdt{border-left:4px solid rgba(6,182,212,0.18)}
    .card.usd{border-left:4px solid rgba(99,102,241,0.18)}
    .card.bob{border-left:4px solid rgba(252,211,77,0.12)}

    /* subtle pulse for primary option */
    .card.primary{animation:pulse 4s ease-in-out infinite}
    @keyframes pulse{
      0%{box-shadow:0 6px 18px rgba(2,6,23,0.45)}
      50%{box-shadow:0 20px 50px rgba(2,6,23,0.55)}
      100%{box-shadow:0 6px 18px rgba(2,6,23,0.45)}
    }

    /* symbol placement helpers */
    .symbol-start .value::before{content:attr(data-symbol) " ";}
    .symbol-end .value::after{content:" " attr(data-symbol);} /* usado para poner símbolo al final */

    /* small responsive tweaks */
    @media (max-width:880px){
      .payments-wrap{grid-template-columns:1fr;}
      .cards{order:2}
    }

    /* little badge */
    .badge{font-size:12px;padding:6px 8px;border-radius:999px;background:linear-gradient(90deg, rgba(233, 77, 77, 0.02), rgba(255,255,255,0.01));border:1px solid rgba(255, 255, 255, 0.03);display:inline-block;color:var(--muted)}