/* ==========================================================
   FelipeWeb Diamonds
   Frontend
========================================================== */

:root{

    --fw-primary:#0A84FF;
    --fw-primary-hover:#2D9CFF;

    --fw-bg:#1B2431;
    --fw-card:#253140;

    --fw-border:#34465C;

    --fw-text:#FFFFFF;
    --fw-muted:#B7C2D0;

    --fw-radius:16px;

}

.fwffra-shop{

    max-width:650px;

    margin:40px auto;

    background:var(--fw-bg);

    border-radius:var(--fw-radius);

    padding:35px;

    color:var(--fw-text);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.fwffra-shop-header{

    margin-bottom:30px;

    text-align:center;

}

.fwffra-shop-header h2{

    margin:0;

    font-size:32px;

}

.fwffra-shop-header p{

    color:var(--fw-muted);

    margin-top:10px;

}

.fwffra-field{

    margin-bottom:22px;

}

.fwffra-field label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.fwffra-field input,

.fwffra-field select{

    width:100%;

    padding:14px 16px;

    border-radius:12px;

    border:1px solid var(--fw-border);

    background:#111821;

    color:#fff;

    font-size:15px;

    transition:.25s;

}

.fwffra-field input:focus,

.fwffra-field select:focus{

    outline:none;

    border-color:var(--fw-primary);

    box-shadow:0 0 0 4px rgba(10,132,255,.15);

}

#fwffra-buy{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        var(--fw-primary),
        var(--fw-primary-hover)
    );

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

#fwffra-buy:hover{

    transform:translateY(-2px);

}

#fwffra-message{

    margin-top:25px;

}

.fwffra-success{

    padding:16px;

    border-radius:10px;

    background:#1F4E3A;

    color:#fff;

}

.fwffra-error{

    padding:16px;

    border-radius:10px;

    background:#5B2020;

    color:#fff;

}

@media(max-width:768px){

    .fwffra-shop{

        padding:20px;

        margin:20px;

    }

    .fwffra-shop-header h2{

        font-size:26px;

    }

}

.fwffra-loading{

    text-align:center;

    padding:35px;

}

.fwffra-spinner{

    width:55px;

    height:55px;

    margin:0 auto 20px;

    border:5px solid rgba(255,255,255,.15);

    border-top:5px solid #1f8cff;

    border-radius:50%;

    animation:fwffra-spin .8s linear infinite;

}

@keyframes fwffra-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.fwffra-success-card{

    background:#1b1f2d;

    border-radius:14px;

    padding:35px;

    text-align:center;

    margin-top:25px;

}

.fwffra-success-card h2{

    color:#5cc96c;

    margin-bottom:15px;

}

.fwffra-pin-box{

    background:#060135;

    border-radius:12px;

    padding:25px;

    margin:25px 0;

}

.fwffra-pin-title{

    color:#ffffff;

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:12px;

}

#fwffra-pin{

    display:block;
    font-family:Consolas, Monaco, monospace;
    font-size:18px;
    font-weight:700;
    color:#7CFC98;
    letter-spacing:1px;
    white-space:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 0;

}

.fwffra-copy-btn{

    background:#1f8cff;

    color:#fff;

    border:none;

    padding:12px 25px;

    border-radius:8px;

    cursor:pointer;

}

.fwffra-copy-btn:hover{

    opacity:.9;

}

.fwffra-mail-info{

    color:#cfcfcf;

    margin-top:20px;

}

#fwffra-copy-message{

    margin-top:15px;

    color:#59d46b;

    font-weight:600;

    font-size:15px;

}

.fwffra-paypal-notice{

    margin:15px 0;

    padding:14px 16px;

    background:#1b2f4a;

    border-left:4px solid #2d8cff;

    border-radius:8px;

    color:#ffffff;

    font-size:14px;

    line-height:1.6;

}

.fwffra-paypal-notice strong{

    color:#7fc0ff;

}


/* ==========================================================
   PÁGINA DE CONFIRMACIÓN BOLD
========================================================== */

.fwffra-success-card{

    max-width:700px;
    margin:60px auto;
    background:#0b1225;
    border-radius:18px;
    padding:40px;
    color:#ffffff;
    box-shadow:0 20px 45px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08);
    text-align:center;

}

.fwffra-success-icon{

    font-size:64px;
    margin-bottom:20px;

}

.fwffra-success-card h2{

    margin:0 0 10px;
    color:#38d39f;
    font-size:34px;

}

.fwffra-success-card h3{

    margin-bottom:30px;
    color:#ffffff;
    font-size:22px;
    font-weight:600;

}

.fwffra-pin-box{

    background:#060135;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:25px;
    margin:30px 0;

}

.fwffra-pin-box h4{

    margin-top:0;
    margin-bottom:18px;
    color:#59b8ff;
    letter-spacing:1px;

}

.fwffra-pin-box pre{

    background:#111827;
    color:#7CFC98;
    padding:18px;
    border-radius:10px;
    overflow:auto;
    font-size:16px;
    white-space:pre-wrap;
    word-break:break-word;
    text-align:left;

}

.fwffra-success-card p{

    margin-top:25px;
    color:#d1d5db;
    font-size:16px;

}

@media (max-width:768px){

    .fwffra-success-card{

        margin:20px;
        padding:25px;

    }

    .fwffra-success-card h2{

        font-size:28px;

    }

    .fwffra-success-card h3{

        font-size:19px;

    }

}


/* ==========================================
   DATOS DE LA COMPRA
========================================== */

/*==========================================
  TARJETAS DE INFORMACIÓN
==========================================*/

.fwffra-success-details{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
    margin:35px 0;

}

.fwffra-detail{

    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:22px;
    text-align:center;
    transition:.25s;

}

.fwffra-detail:hover{

    transform:translateY(-3px);
    border-color:#38d39f;

}

.fwffra-detail-icon{

    font-size:28px;
    margin-bottom:10px;

}

.fwffra-detail-title{

    color:#60a5fa;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:10px;

}

.fwffra-detail-value{

    color:#ffffff;
    font-size:15px;
    font-weight:600;
    word-break:break-word;

}

.fwffra-detail{

    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:18px;
    text-align:left;

}

.fwffra-detail strong{

    display:block;
    margin-bottom:8px;
    color:#59b8ff;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.5px;

}

.fwffra-mail-info{

    margin-top:30px;
    background:#0f172a;
    border-left:4px solid #38d39f;
    border-radius:10px;
    padding:18px 20px;
    color:#e5e7eb;
    line-height:1.7;

}

.fwffra-mail-info strong{

    color:#38d39f;

}



/* ==========================================
   BOTÓN COPIAR PIN
========================================== */

.fwffra-copy-pin{

    margin-top:18px;
    background:#2563eb;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 24px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;

}

.fwffra-copy-pin:hover{

    background:#1d4ed8;
    transform:translateY(-2px);

}


/*==========================================
  SERIAL Y PIN
==========================================*/

.fwffra-pin-line{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:18px 0;
    flex-wrap:wrap;

}

.fwffra-pin-line strong{

    color:#59b8ff;
    font-size:18px;

}

.fwffra-pin-line span{

    color:#ffffff;
    font-size:18px;
    font-weight:700;
    font-family:Consolas, Monaco, monospace;

}

#fwffra-pin{

    color:#7CFC98;
    letter-spacing:1px;
    white-space:nowrap;
}