.cp-pay-btn {
display:         inline-flex;
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:      0 4px 14px rgba(42, 133, 255, 0.35);
letter-spacing:  0.01em;
user-select:     none;
}
.cp-pay-btn:hover {
background:  #1a70e0;
box-shadow:  0 6px 20px rgba(42, 133, 255, 0.45);
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:    #fff;
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:       #111827;
}
#cp-email-desc {
margin:    0 0 20px;
font-size: 14px;
color:     #6b7280;
}
#cp-email-input {
display:       block;
width:         100%;
box-sizing:    border-box;
padding:       12px 16px;
border:        2px solid #e5e7eb;
border-radius: 10px;
font-size:     15px;
outline:       none;
transition:    border-color 0.2s;
margin-bottom: 6px;
}
#cp-email-input:focus {
border-color: #2A85FF;
}
#cp-email-input.cp-error {
border-color: #ef4444;
}
#cp-email-error {
display:     none;
color:       #ef4444;
font-size:   13px;
margin-bottom: 12px;
}
#cp-email-submit {
margin-top:    16px;
display:       block;
width:         100%;
padding:       13px;
background:    #2A85FF;
color:         #fff;
border:        none;
border-radius: 10px;
font-size:     15px;
font-weight:   600;
cursor:        pointer;
transition:    background 0.2s;
}
#cp-email-submit:hover {
background: #1a70e0;
} .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;
}
#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; } } #cp-skeleton-inner {
background:    #ffffff;
border-radius: 16px;
width:         100%;
max-width:     450px;
padding:       28px 24px 20px;
box-shadow:    0 32px 80px rgba(0, 0, 0, 0.25);
overflow:      hidden;
position:      relative;
} .cp-sk-line {
background:    #e9ecef;
border-radius: 6px;
position:      relative;
overflow:      hidden;
}
.cp-sk-line::after {
content:    '';
position:   absolute;
inset:      0;
background: linear-gradient(
90deg,
transparent        0%,
rgba(255,255,255,0.7) 50%,
transparent        100%
);
animation: cpSkShimmer 1.5s infinite;
transform: translateX(-100%);
}
@keyframes cpSkShimmer {
to { transform: translateX(100%); }
} .cp-sk-header {
margin-bottom: 20px;
}
.cp-sk-title {
height:        14px;
width:         55%;
margin-bottom: 10px;
}
.cp-sk-amount {
height: 26px;
width:  40%;
} .cp-sk-btn-block {
display:        flex;
flex-direction: column;
gap:            10px;
margin-bottom:  18px;
}
.cp-sk-btn {
height:        52px;
border-radius: 8px;
background:    #dbeafe; }
.cp-sk-btn-dark {
background: #1e1e2e; }
.cp-sk-btn-dark::after {
background: linear-gradient(
90deg,
transparent          0%,
rgba(255,255,255,0.1) 50%,
transparent          100%
);
} .cp-sk-divider {
height:        1px;
background:    #f3f4f6;
margin-bottom: 18px;
} .cp-sk-row {
display:         flex;
align-items:     center;
justify-content: space-between;
margin-bottom:   14px;
}
.cp-sk-label {
height: 14px;
width:  160px;
}
.cp-sk-toggle {
width:         44px;
height:        24px;
border-radius: 12px;
background:    #bfdbfe;
flex-shrink:   0;
} .cp-sk-field {
height:        48px;
border-radius: 8px;
margin-bottom: 0;
background:    #f9fafb;
border:        2px solid #e5e7eb;
}
.cp-sk-field::after { display: none; }  .cp-sk-footer {
margin-top:     20px;
padding-top:    16px;
border-top:     1px solid #f3f4f6;
}
.cp-sk-logos {
display:         flex;
align-items:     center;
justify-content: center;
gap:             10px;
}
.cp-sk-logo {
width:         38px;
height:        22px;
border-radius: 4px;
background:    #e9ecef;
position:      relative;
overflow:      hidden;
}
.cp-sk-logo::after {
content:    '';
position:   absolute;
inset:      0;
background: linear-gradient(
90deg,
transparent          0%,
rgba(255,255,255,0.7) 50%,
transparent          100%
);
animation: cpSkShimmer 1.5s infinite;
transform: translateX(-100%);
} .cp-sk-logo:nth-child(1)::after { animation-delay: 0s; }
.cp-sk-logo:nth-child(2)::after { animation-delay: 0.1s; }
.cp-sk-logo:nth-child(3)::after { animation-delay: 0.2s; }
.cp-sk-logo:nth-child(4)::after { animation-delay: 0.3s; }
.cp-sk-logo:nth-child(5)::after { animation-delay: 0.4s; } #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:    16px;
padding:       12px 14px;
background:    #fffbeb;
border:        1px solid #fde68a;
border-radius: 8px;
font-size:     13px;
line-height:   1.5;
color:         #92400e;
}
#cp-email-warning a { color: #b45309; text-decoration: underline; }
#cp-email-error {
display:     none;
color:       #ef4444;
font-size:   13px;
margin-top:  4px;
} @media (max-width: 480px) {
#cp-skeleton-inner {
margin:  0 16px;
padding: 22px 16px 16px;
}
}