/* ============================================================
   CloudPayments Widget — стили кнопки и уведомлений
   ============================================================ */

/* Базовая кнопка */
.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;
    }
}

/* ============================================================
   E-mail модальное окно
   ============================================================ */
#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;
    margin-bottom: 6px;
}
#cp-email-input:focus {
    border-color: #FFDD2D7A;
}
#cp-email-input.cp-error {
    border-color: #ef4444;
}

#cp-email-error {
    display:     none;
    color:       #FF6636;
    font-size:   14px;
    margin-bottom: 10px;
    padding-left: 14px;
    margin-top: -5px;
    font-weight: 500;
}

#cp-email-submit {
    margin-top:    16px;
    display:       block;
    width:         100%;
    padding:       13px;
    background:    #FFDD2D;
    color:         #000;
    font-family:   "Roboto";
    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;
}

/* ============================================================
   Модалка — e-mail
   ============================================================ */
#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:         #000;
}
#cp-email-warning a { color: #b45309; text-decoration: underline; font-size: 12px; }