/* ============================================================
   CREDIT CARD SVG — Visual card styling + flip animation
   Scoped to .apliko-body to avoid global conflicts
   ============================================================ */

/* Disable transitions during preload */
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

/* Card wrapper (direct flex child of .apliko-body) */
.apliko-body .card-wrapper {
    flex-shrink: 0;
    width: 100%;
    max-width: 300px;
}

/* Card container */
.apliko-body .container {
    width: 100%;
    max-width: 400px;
    max-height: 251px;
    height: 54vw;
    perspective: 1000px;
}

@media (max-width: 768px) {
    .apliko-body .card-wrapper {
        max-width: 100%;
    }
    .apliko-body .container {
        margin: 0 auto;
        max-height: 220px;
    }
}

/* Card type icon (top-right corner) */
#ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
}

#ccsingle svg {
    width: 100px;
    max-height: 60px;
}

/* SVG card shadow + rounded corners */
.creditcard svg#cardfront,
.creditcard svg#cardback {
    width: 100%;
    -webkit-box-shadow: 1px 5px 6px 0px black;
    box-shadow: 1px 5px 6px 0px black;
    border-radius: 22px;
}

/* ── CHANGEABLE CARD ELEMENTS (color transitions) ── */
.creditcard .lightcolor,
.creditcard .darkcolor {
    -webkit-transition: fill .5s;
    transition: fill .5s;
}

.creditcard .lightblue    { fill: #03A9F4; }
.creditcard .lightbluedark { fill: #0288D1; }
.creditcard .red          { fill: #ef5350; }
.creditcard .reddark      { fill: #d32f2f; }
.creditcard .purple       { fill: #ab47bc; }
.creditcard .purpledark   { fill: #7b1fa2; }
.creditcard .cyan         { fill: #26c6da; }
.creditcard .cyandark     { fill: #0097a7; }
.creditcard .green        { fill: #66bb6a; }
.creditcard .greendark    { fill: #388e3c; }
.creditcard .lime         { fill: #d4e157; }
.creditcard .limedark     { fill: #afb42b; }
.creditcard .yellow       { fill: #ffeb3b; }
.creditcard .yellowdark   { fill: #7B6822; }
.creditcard .orange       { fill: #ff9800; }
.creditcard .orangedark   { fill: #ef6c00; }
.creditcard .grey         { fill: #bdbdbd; }
.creditcard .greydark     { fill: #616161; }

/* ── FRONT OF CARD ── */
#svgname {
    text-transform: uppercase;
}

#cardfront .st2  { fill: #FFFFFF; }
#cardfront .st3  { font-family: 'Source Code Pro', monospace; font-weight: 600; }
#cardfront .st4  { font-size: 25.7px; }
#cardfront .st5  { font-family: 'Source Code Pro', monospace; font-weight: 400; }
#cardfront .st6  { font-size: 15.5px; }
#cardfront .st7  { opacity: 0.6; fill: #FFFFFF; }
#cardfront .st8  { font-size: 11.3px; }
#cardfront .st9  { font-size: 17.1px; }
#cardfront .st10 { font-family: 'Source Code Pro', monospace; font-weight: 300; }
#cardfront .st11 { font-size: 7.6px; }
#cardfront .st12 { fill: #4C4C4C; }

/* ── BACK OF CARD ── */
#cardback .st0  { fill: none; stroke: #0F0F0F; stroke-miterlimit: 10; }
#cardback .st2  { fill: #111111; }
#cardback .st3  { fill: #F2F2F2; }
#cardback .st4  { fill: #D8D2DB; }
#cardback .st5  { fill: #C4C4C4; }
#cardback .st6  { font-family: 'Source Code Pro', monospace; font-weight: 400; }
#cardback .st7  { font-size: 12.7px; }
#cardback .st8  { opacity: 0.6; }
#cardback .st9  { fill: #FFFFFF; }
#cardback .st10 { font-size: 11.3px; }
#cardback .st11 { fill: #EAEAEA; }
#cardback .st12 { font-family: 'Rock Salt', cursive; }
#cardback .st13 { font-size: 17.7px; }

/* ── FLIP ANIMATION ── */
.creditcard {
    width: 100%;
    max-width: 400px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
}

.creditcard .front,
.creditcard .back {
    position: absolute;
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
}

.creditcard .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}