.cp-pay-btn {
display:         flex;
justify-content: center;
align-items:     center;
gap:             8px;
padding:         14px 28px;
background:      #2A85FF;
color:           #fff;
border:          none;
border-radius:   10px;
font-size:       16px;
font-weight:     600;
cursor:          pointer;
transition:      background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
box-shadow:      none;
letter-spacing:  0.01em;
user-select:     none;
}
.cp-pay-btn:hover {
background:  #1a70e0;
box-shadow:  none;
transform:   translateY(-1px);
}
.cp-pay-btn:active {
transform:   translateY(0);
box-shadow:  0 2px 8px rgba(42, 133, 255, 0.3);
}
.cp-btn-icon {
font-size: 18px;
line-height: 1;
} .cp-pay-btn.btn-gold {
background: linear-gradient(135deg, #f6a623, #e8860a);
box-shadow: 0 4px 14px rgba(246, 166, 35, 0.4);
}
.cp-pay-btn.btn-gold:hover {
background: linear-gradient(135deg, #e8a020, #d4780a);
box-shadow: 0 6px 20px rgba(246, 166, 35, 0.5);
}
.cp-pay-btn.btn-green {
background: linear-gradient(135deg, #34C759, #28a548);
box-shadow: 0 4px 14px rgba(52, 199, 89, 0.4);
}
.cp-pay-btn.btn-green:hover {
background: linear-gradient(135deg, #28a548, #1e8f3c);
box-shadow: 0 6px 20px rgba(52, 199, 89, 0.5);
}
.cp-pay-btn.btn-dark {
background: linear-gradient(135deg, #1c1c1e, #3a3a3c);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.cp-pay-btn.btn-dark:hover {
background: linear-gradient(135deg, #2c2c2e, #4a4a4c);
} .cp-notice {
position:      fixed;
bottom:        30px;
right:         30px;
z-index:       999999;
display:       flex;
align-items:   center;
gap:           12px;
padding:       16px 20px;
border-radius: 12px;
font-size:     15px;
font-weight:   500;
box-shadow:    0 8px 30px rgba(0, 0, 0, 0.15);
animation:     cpSlideIn 0.3s ease;
max-width:     360px;
}
@keyframes cpSlideIn {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
.cp-notice--success {
background: #f0fdf4;
color:      #166534;
border:     1px solid #bbf7d0;
}
.cp-notice--error {
background: #fef2f2;
color:      #991b1b;
border:     1px solid #fecaca;
}
.cp-notice-close {
background:  none;
border:      none;
font-size:   20px;
cursor:      pointer;
color:       inherit;
opacity:     0.6;
padding:     0;
line-height: 1;
margin-left: auto;
flex-shrink: 0;
}
.cp-notice-close:hover {
opacity: 1;
} @media (max-width: 480px) {
.cp-pay-btn {
width:           100%;
justify-content: center;
padding:         16px 20px;
}
.cp-notice {
bottom:    16px;
right:     16px;
left:      16px;
max-width: none;
}
} #cp-email-modal {
position:        fixed;
inset:           0;
z-index:         1000000;
display:         none;
align-items:     center;
justify-content: center;
}
#cp-email-overlay {
position: absolute;
inset:    0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(3px);
}
#cp-email-box {
position:      relative;
z-index:       1;
background:    #212121;
border:        1px solid #FFDD2D7A;
font-family:   "Roboto";
border-radius: 16px;
padding:       36px 32px 32px;
width:         100%;
max-width:     420px;
box-shadow:    0 24px 60px rgba(0, 0, 0, 0.18);
animation:     cpFadeUp 0.25s ease;
}
@keyframes cpFadeUp {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}
#cp-email-close {
position:   absolute;
top:        14px;
right:      16px;
background: none;
border:     none;
font-size:  22px;
line-height: 1;
cursor:     pointer;
color:      #9ca3af;
padding:    4px 6px;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
#cp-email-close:hover {
color:      #374151;
background: #f3f4f6;
}
#cp-email-title {
margin:      0 0 6px;
font-size:   20px;
font-weight: 700;
color:       #fff;
}
#cp-email-desc {
margin:    0 0 20px;
font-size: 14px;
line-height: 1.4;
color:     #fff;
opacity:   .8;
}
#cp-email-input {
display:       block;
width:         100%;
box-sizing:    border-box;
padding:       12px 16px;
border:        2px solid #e5e7eb;
border-radius: 10px;
font-size:     16px;
outline:       none;
transition:    border-color 0.2s;
}
#cp-email-input:focus {
border-color: #FFDD2D7A;
}
#cp-email-input.cp-error {
border-color: #ef4444;
}
#cp-email-error {
display:      none;
font-family:  "Roboto", sans-serif;
font-size:    15px;
font-weight:  500;
line-height:  20px;
color:        rgba(255, 102, 54, 1);
text-align:   center;
letter-spacing: 0;
margin-top:   5px;
} #cp-email-checking {
display:         none;
align-items:     center;
justify-content: center;
gap:             8px;
padding:         6px 2px 2px;
font-family:     "Open Sans", sans-serif;
font-size:       15px;
font-weight:     700;
line-height:     22px;
color:           rgba(236, 241, 247, 1);
letter-spacing:  0;
text-transform:  uppercase;
}
#cp-email-checking.cp-visible { display: flex; }
.cp-checking-spinner {
width:        16px;
height:       16px;
border:       2px solid rgba(255, 221, 45, 0.25);
border-top-color: #FFDD2D;
border-radius: 50%;
flex-shrink:  0;
animation:    cpCheckSpin 0.7s linear infinite;
}
@keyframes cpCheckSpin { to { transform: rotate(360deg); } } #cp-agreement-wrap {
display:     none;
align-items: flex-start;
gap:         10px;
margin-top:  12px;
cursor:      pointer;
}
#cp-agreement-wrap.cp-visible { display: flex; }
#cp-agreement-cb {
-webkit-appearance: none;
appearance:   none;
width:        22px;
height:       22px;
min-width:    22px;
border-radius: 6px;
border:       2px solid rgba(87, 91, 97, 1);
background:   transparent;
cursor:       pointer;
flex-shrink:  0;
margin-top:   1px;
position:     relative;
transition:   border-color 0.15s, background 0.15s;
}
#cp-agreement-cb:checked {
background:   #009966;
border-color: #009966;
}
#cp-agreement-cb:checked::after {
content:     '';
display:     block;
width:       5px;
height:      9px;
border:      2px solid #fff;
border-top:  none;
border-left: none;
transform:   rotate(45deg);
position:    absolute;
top:         2px;
left:        6px;
}
#cp-agreement-text {
font-family: "Roboto", sans-serif;
font-size:   15px;
font-weight: 400;
line-height: 20px;
color:       rgba(255, 255, 255, 0.9);
}
#cp-agreement-text a {
color:           #009966;
text-decoration: underline;
text-decoration-style: solid;
font-size:       inherit;
}
#cp-agreement-wrap.cp-agreement-error #cp-agreement-text       { color: #ef4444; }
#cp-agreement-wrap.cp-agreement-error #cp-agreement-text a     { color: #ef4444; }
#cp-email-submit {
margin-top:    16px;
display:       block;
width:         100%;
padding:       13px;
background:    #FFDD2D;
color:         #000;
font-family:   "Poppins", Sans-serif;
border:        none;
border-radius: 10px;
font-size:     15px;
font-weight:   600;
cursor:        pointer;
transition:    background 0.2s;
}
#cp-email-submit:hover {
background: #e1c326;
} .cp-notice-body {
display:        flex;
flex-direction: column;
gap:            4px;
flex: 1;
}
.cp-notice-title {
font-size:   16px;
font-weight: 700;
display:     block;
}
.cp-notice-text {
font-size: 14px;
opacity:   0.9;
display:   block;
}
@media (max-width: 480px) {
#cp-email-box {
margin:  0 16px;
padding: 28px 20px 24px;
}
} #cp-skeleton {
position:        fixed;
inset:           0;
z-index:         2147483647;
display:         none;
align-items:     center;
justify-content: center;
pointer-events:  all;
background:      rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
#cp-skeleton.cp-skeleton--visible {
display:   flex;
animation: cpSkFadeIn 0.2s ease;
}
#cp-skeleton.cp-skeleton--hiding {
animation: cpSkFadeOut 0.3s ease forwards;
}
@keyframes cpSkFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cpSkFadeOut { from { opacity: 1; } to { opacity: 0; } }
.preloader {
width:           140px;
height:          140px;
position:        relative;
display:         flex;
align-items:     center;
justify-content: center;
}
.circle-bg {
position:      absolute;
width:         110px;
height:        110px;
border-radius: 50%;
background:    #1c1c1c;
}
.spinner-svg {
position:  absolute;
top:       0;
left:      0;
width:     140px;
height:    140px;
animation: cpSpinRotate 2s linear infinite;
}
@keyframes cpSpinRotate {
from { transform: rotate(-90deg); }
to   { transform: rotate(270deg); }
}
.arc {
fill:              none;
stroke:            #f0c020;
stroke-width:      6;
stroke-linecap:    round;
stroke-dasharray:  30 372;
stroke-dashoffset: 0;
animation:         cpArcStretch 1.6s ease-in-out infinite;
}
@keyframes cpArcStretch {
0%   { stroke-dasharray:  30 372; stroke-dashoffset:    0; }
50%  { stroke-dasharray: 280 122; stroke-dashoffset:  -80; }
100% { stroke-dasharray:  30 372; stroke-dashoffset: -402; }
}
.p-letter {
position:    relative;
z-index:     10;
color:       #f0c020;
font-family: 'Trebuchet MS', Georgia, serif;
font-size:   62px;
font-weight: 500;
line-height: 1;
user-select: none;
margin-top:  4px;
} #cp-email-modal {
display:         none;
position:        fixed;
inset:           0;
z-index:         1000000;
align-items:     center;
justify-content: center;
}
#cp-email-modal.cp-modal--visible {
display: flex;
}
#cp-email-warning {
display:     none;
margin-top:  14px;
font-family: "Roboto", sans-serif;
font-size:   15px;
font-weight: 400;
line-height: 20px;
color:       rgba(255, 255, 255, 0.9);
text-align:  center;
}
#cp-email-warning a {
color:           #009966;
text-decoration: underline;
font-size:       inherit;
}