/* ==========================================================
   DIGITAL MUSIC ROMANIA
   BLOCKCHAIN CERTIFICATE
   PREMIUM EDITION
========================================================== */


/* ==========================================================
   RESET
========================================================== */

/*==================================================
COLOR PALETTE
==================================================*/

:root{

    --bg:#0B0B0B;

    --card:#151515;

    --card-light:#1B1B1B;

    --text:#F4F4F4;

    --text-soft:#A8A8A8;

    --gold:#B08D57;
    --gold-soft:#C8AE72;
    --gold-dark:#8E6E38;

    --border:rgba(255,255,255,.08);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Inter,Arial,sans-serif;

    color:#fff;

    background:
        radial-gradient(circle at top,#1d1d1d 0%,transparent 55%),
        radial-gradient(circle at bottom,#101010 0%,transparent 70%),
        #090909;

    min-height:100vh;

    padding:50px 20px;

}
.certificate-page{

    max-width:1200px;

    margin:auto;

}

.card{

    position:relative;

    max-width:980px;

    margin:auto;

    background:
        linear-gradient(
            180deg,
            #181818 0%,
            #101010 100%
        );

    border-radius:32px;

    overflow:hidden;

    border:1px solid rgba(212,175,55,.18);

    box-shadow:

        0 35px 90px rgba(0,0,0,.55),

        inset 0 1px 0 rgba(255,255,255,.05);

    transition:.35s;

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 45px 110px rgba(0,0,0,.65),

        0 0 30px rgba(212,175,55,.10);

}
.card::before{

    content:"";

    position:absolute;

    inset:14px;

    border-radius:22px;

    border:1px solid rgba(212,175,55,.12);

    pointer-events:none;

}
.card::after{

    content:"";

    position:absolute;

    top:-50%;

    left:-30%;

    width:70%;

    height:200%;

    background:

        linear-gradient(

            115deg,

            transparent,

            rgba(255,255,255,.03),

            transparent

        );

    transform:rotate(20deg);

    pointer-events:none;

}
.card-content{

    position:relative;

    z-index:2;

    padding:45px;

}
.certificate-title{

    text-align:center;

    padding:55px 45px 25px;

}
.card-top-line{

    width:180px;

    height:4px;

    margin:0 auto 35px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}
.certificate-title h1{

    color:var(--text);

    font-weight:800;

    letter-spacing:4px;

}

.certificate-title span{

    color:var(--gold);

    letter-spacing:3px;

}

.certificate-number{

    margin-top:30px;

    display:inline-block;

    padding:16px 30px;

    border-radius:999px;

    background:#141414;

    border:1px solid rgba(255,255,255,.08);

}
.certificate-number strong{

    color:var(--gold);

}
.single-badge{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:fit-content;

    margin:0 auto 40px;

    padding:13px 26px;

    background:var(--card-light);

    border:1px solid rgba(176,141,87,.35);

    border-radius:999px;

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    box-shadow:none;

}
/* ==========================================================
   COVER
========================================================== */

.card img{

    width:320px;

    display:block;

    margin:0 auto 40px;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 25px 60px rgba(0,0,0,.45);

}
.card-content h2{

    text-align:center;

    font-size:42px;

    margin-bottom:12px;

    color:#fff;

    line-height:1.2;

}
.artist{

    text-align:center;

    font-size:22px;

    color:var(--gold);

    margin-bottom:40px;

    font-weight:600;

}
.single-meta{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

    margin-bottom:40px;

}
.meta-row{

    background:var(--card-light);

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

    border-radius:18px;

    padding:24px;

    transition:.25s ease;

}

.meta-row:hover{

    transform:translateY(-3px);

    border-color:rgba(196,168,106,.20);

    background:#202020;

}

.meta-row strong{

    display:block;

    color:var(--gold);

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:12px;

}

.meta-row span{

    font-family:monospace;

    font-size:19px;

    color:var(--text);

    letter-spacing:1px;

}

.hash-box{

    margin:45px 0;

    padding:32px;

    background:var(--card-light);

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

    border-radius:22px;

    box-shadow:none;

}

.hash-box h3{

    color:var(--text);

    font-size:22px;

    margin-bottom:20px;

}

.hash-box small{

    display:block;

    font-family:"Consolas","Courier New",monospace;

    font-size:16px;

    line-height:1.8;

    color:var(--text);

    letter-spacing:.4px;

    word-break:break-all;

}


.hash-box::before{

    content:"";

    display:block;

    width:80px;

    height:3px;

    margin:0 auto 20px;

    border-radius:999px;

    background:var(--gold);

}
.single-description{

    margin:45px 0;

    text-align:center;

    font-size:18px;

    line-height:1.9;

    color:#cfcfcf;

}

/* ==========================================================
   CERTIFICATE INFO
========================================================== */

.certificate-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:45px 0;

}

.info-item{

    background:#141414;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:22px;

    text-align:center;

    transition:.30s;

}

.info-item:hover{

    transform:translateY(-4px);

    border-color:rgba(255,215,0,.25);

}

.info-item span{

    display:block;

    color:#8f8f8f;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:10px;

}

.info-item strong{

    color:var(--gold);

    font-size:18px;

}

/* ==========================================================
   QR SECTION
========================================================== */

.qr-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

    margin:60px 0;

    align-items:start;

}

.qr-grid > div{

    display:flex;

    flex-direction:column;

    align-items:center;

}
.qr-grid h3{

    margin-bottom:20px;

    color:var(--gold);

    font-size:24px;

    text-align:center;

}


.qr-wrapper{

    background:#fff;
    padding:30px;
    border-radius:22px;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.qr-wrapper canvas{

    width:260px;
    height:260px;
}

.available-on{

    margin-top:28px;

    text-align:center;

}
.available-on span{

    display:block;

    margin-bottom:18px;

    color:#8d8d8d;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:12px;

    font-weight:700;

}
.platform-icons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:22px;

}
.platform-icons a{

    color:var(--gold-soft);

    font-size:28px;

    transition:.30s;

}
.platform-icons a:hover{

    color:var(--gold);

}
.available-on::before{

    content:"";

    display:block;

    width:90px;

    height:2px;

    margin:0 auto 18px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}

/* ==========================================================
   CERTIFICATE SIGNATURE
========================================================== */

.certificate-signature{

    margin:70px 0 50px;

    text-align:center;

}
.signature-line{

    width:180px;

    height:3px;

    margin:0 auto 35px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}
.certificate-signature h3{

    color:#8f8f8f;

    font-size:16px;

    font-weight:500;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:12px;

}
.certificate-signature h2{

    color:var(--gold);

    font-size:34px;

    margin-bottom:14px;

}
.signature-subtitle{

    color:#bdbdbd;

    font-size:17px;

    margin-bottom:24px;

}
.signature-text{

    max-width:700px;

    margin:0 auto;

    line-height:1.9;

    color:#9f9f9f;

    font-size:16px;

}

.signature-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:35px;

    padding:14px 30px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #148d47,
            #18b45b
        );

    color:white;

    font-weight:700;

    letter-spacing:1px;

    box-shadow:

        0 10px 25px rgba(24,180,91,.25);

}



/*==================================================
PREMIUM BUTTONS
==================================================*/

.card-buttons{

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

}

/*==================================================
BUTTON BASE
==================================================*/

.btn-action{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    width:100%;
    height:58px;

    padding:0 24px;

    background:var(--card-light);

    color:var(--text);

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

    border-radius:16px;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:all .25s ease;

    cursor:pointer;

}

.btn-action i{

    color:var(--gold-soft);

    opacity:.9;

}

/* Listen */

.btn-listen{

    border-color:rgba(196,168,106,.35);

}

.btn-listen:hover{

    border-color:var(--gold);

}


/* Blockchain */

.btn-chain{

    background:#181818;
    color:var(--gold);

    border:1px solid rgba(255,215,0,.25);

}

/* Registry */

.btn-home{

    background:#242424;
    color:#fff;

    border:1px solid rgba(255,255,255,.08);

}

/* Share */

.btn-share{

    background:var(--card-light);

    color:var(--text);

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

}


.btn-share i,
.btn-print i{

    color:var(--gold);

}  

/* PDF */

.btn-print{

    background:var(--card-light);

    color:var(--text);

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

}

/* Hover */

.btn-action:hover i{

    color:#D8BE82;

}

.btn-action:hover{

    background:#202020;

    border-color:rgba(196,168,106,.25);

    transform:translateY(-2px);

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

}

.certificate-footer{

    margin-top:45px;

    text-align:center;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-copy{

    color:#777;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

}

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

.card{

    animation:fadeIn .7s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.card img{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.card img:hover{

    transform:scale(1.02);

    box-shadow:

        0 30px 70px rgba(0,0,0,.45),

        0 0 25px rgba(255,215,0,.15);

}

.qr-wrapper{

    transition:all .30s ease;

}

.qr-wrapper:hover{

    transform:translateY(-4px);

    box-shadow:

        0 18px 40px rgba(0,0,0,.35);

}

@media(max-width:768px){

.single-meta{

    grid-template-columns:1fr;

}

.certificate-info{

    grid-template-columns:1fr;

}

.qr-grid{

    grid-template-columns:1fr;

}

.card-content{

    padding:30px;

}

}
@media(max-width:600px){

body{

    padding:20px 10px;

}

.card{

    border-radius:22px;

}

.card-content{

    padding:20px;

}

.card img{

    width:240px;

}

.certificate-title h1{

    font-size:30px;

}

.card-content h2{

    font-size:28px;

}

.artist{

    font-size:18px;

}

.platform-icons{

    gap:16px;

}

.platform-icons a{

    color:var(--gold-soft);

}

.card-buttons{

    margin:70px 0 40px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

}

}



/*==================================================
PRINT VERSION
==================================================*/

@page{

    size:A4 portrait;

    margin:8mm;

}

@media print{

html,
body{

    width:210mm;
    height:297mm;

    background:#fff !important;

    overflow:hidden;

}

body{

    padding:0;

}

.card img{

    width:220px;

    margin:0 auto 20px;

}

.single-meta{

    margin-bottom:25px;

}

.hash-box{

    margin:25px 0;

}

.single-description{

    margin:25px 0;

}

.qr-wrapper{

    padding:12px;

}

.qr-grid{

    page-break-inside:avoid;

    break-inside:avoid;

}

.hash-box{

    page-break-inside:avoid;

}

.certificate-signature{

    page-break-inside:avoid;

}
.certificate-footer{

    margin-top:20px;

}

.single-meta{

    page-break-inside:avoid;

}

.qr-wrapper canvas,
.qr-wrapper img{

    width:170px !important;

    height:170px !important;

}

.certificate-info{

    margin:25px 0;

}

.qr-grid{

    margin:30px 0;

}

.certificate-signature{

    margin:35px 0 20px;

}

.certificate-title h1{

    font-size:30px;

}

.card-content h2{

    font-size:28px;

}

.artist{

    font-size:18px;

    margin-bottom:25px;

}

.card{

    max-width:none;

    width:100%;

    margin:0;

    border:none;

    border-radius:0;

    box-shadow:none;

    background:white;

    color:black;

}

.card::before,
.card::after{

    display:none;

}

.card-buttons{

    display:none;

}

}

.certificate-header{

    position:sticky;
    top:0;

    z-index:999;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 28px;

    background:#0f0f10;

    border-bottom:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

}

.back-home{

    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.back-home:hover{

    color:#FFD700;

}

.certificate-logo{

    text-align:right;

}

.certificate-logo h2{

    font-size:18px;

    margin:0;

    color:#fff;

}

.certificate-logo span{

    color:#aaa;

    font-size:13px;

}

@media (max-width:700px){

.certificate-header{

    padding:14px 18px;

}

.certificate-logo h2{

    font-size:15px;

}

.certificate-logo span{

    display:none;

}

}

.back-home i{
    transition:.25s;
}

.back-home:hover i{
    transform:translateX(-4px);
}

.certificate-header{
    margin-bottom:30px;
    border-radius:18px;
}
.preview-actions{

grid-template-columns:1fr;

gap:16px;

}

.preview-actions a{

height:60px;

font-size:17px;

border-radius:16px;

}

.preview-actions a:hover{

background:#252525;

border-color:#B8860B;

transform:translateY(-2px);

}