/* =========================================================
   ROLLERPIAC V2 – COUPON GLASS CARD (CR80 Gift Card Layout)
   - Üveglap dizájn
   - Arányosan skálázódó tipográfia
   - Ajándékkártya (bankkártya) arány: 85.6 × 54 mm
========================================================= */

.rpcc-card {
    display: grid;
    grid-template-rows: auto 1fr auto;

    width: 100%;
    max-width: 856px;
    aspect-ratio: 85.6 / 54;

    margin: 40px auto;
    padding: 3.5% 5%;

    border-radius: 40px !important;
    position: relative !important;
    overflow: hidden !important;

    background: radial-gradient(
        circle at top left,
        rgba(255,255,255,0.24),
        rgba(255,255,255,0.04)
    ) !important;

    background-color: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;

    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    box-shadow:
        0 14px 40px rgba(0,0,0,0.65),
        0 0 30px rgba(0,0,0,0.6) !important;

    text-align: center;
    color: #fff;
}

/* ----------------------------------------------
   Fény overlay (alap)
---------------------------------------------- */
.rpcc-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.05) 32%,
        rgba(255,255,255,0) 80%
    );

    opacity: 0.50;
    pointer-events: none;
    border-radius: inherit;
}

/* ----------------------------------------------
   Rollerpiac logó
---------------------------------------------- */
.rpcc-logo {
    position: absolute;
    top: 4%;
    right: 4%;
    width: clamp(60px, 18%, 140px);
    aspect-ratio: 5 / 1;

    background-image: url('https://rollerpiac.hu/wp-content/uploads/rollerpiac_logo_animated-2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;

    opacity: 0.9;
    z-index: 5;
}

/* ----------------------------------------------
   Ajándékkártya összeg / felirat
---------------------------------------------- */
.rpcc-amount {
    font-weight: 800;
    margin-bottom: 5%;
    color: #29ff26;
    font-size: clamp(30px, 10.5vw, 72px);
    line-height: 1.1;
}

/* ----------------------------------------------
   Kuponkód wrapper
---------------------------------------------- */
.rpcc-code-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ----------------------------------------------
   Kuponkód
---------------------------------------------- */
.rpcc-code {
    display: inline-block;
    padding: 2.7% 6.75%;
    font-weight: 700;
    border-radius: 21px;
    font-size: clamp(24px, 7.5vw, 54px);

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);

    box-shadow: 0 0 20px rgba(41,255,38,0.45);
    color: #29ff26;
}

/* Placeholder */
.rpcc-code.rpcc-placeholder {
    box-shadow: none !important;
    color: #d1d1d1 !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* ----------------------------------------------
   Infó szöveg
---------------------------------------------- */
.rpcc-footer {
    margin-top: 5%;
    font-size: clamp(10px, 2.8vw, 18px);
    opacity: 0.8;
    line-height: 1.4;
    letter-spacing: 0.4px;
}




}