/* ready→made Success Pages Stylesheet */

/* === FONTS === */
@font-face {
    font-family: 'Aero';
    src: url('https://cdn.levels.dev/ready-made/fonts/AtAero-Retina.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* === CSS VARIABLES === */
:root {
    /* Brand Colors */
    --rm-primary: #9580FF;
    --rm-primary-hover: #755cff;
    --rm-secondary: #80FFEA;
    --rm-accent: #FF80BF;
    --rm-warning: #FFCA80;
    --rm-success: #8AFF80;
    --rm-light: #FFFF80;
    
    /* Text Colors */
    --rm-text-primary: #090920;
    --rm-text-secondary: #434456;
    --rm-text-light: #666;
    --rm-text-white: #ffffff;
    
    /* Background Colors */
    --rm-bg-light: #F3F5FC;
    --rm-bg-white: #ffffff;
    --rm-bg-card: #ffffff;
    
    /* Spacing */
    --rm-spacing-xs: 0.5rem;
    --rm-spacing-sm: 1rem;
    --rm-spacing-md: 1.5rem;
    --rm-spacing-lg: 2rem;
    --rm-spacing-xl: 3rem;
    
    /* Border Radius */
    --rm-radius-sm: 4px;
    --rm-radius-md: 8px;
    --rm-radius-lg: 12px;
    --rm-radius-full: 100vh;
    
    /* Shadows */
    --rm-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.1);
    --rm-shadow-glow: 0px 0px 20px 0px var(--rm-primary);
    
    /* Gradients */
    --rm-gradient-primary: linear-gradient(45deg, var(--rm-primary), var(--rm-secondary));
    --rm-gradient-rainbow: linear-gradient(45deg, #FFFF80, #FFCA80 20%, #FF80BF 40%, #9580FF 60%, #80FFEA 80%, #8AFF80);
}

/* === RESET & BASE === */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Aero', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    background: var(--rm-bg-light);
    color: var(--rm-text-primary);
    line-height: 1.4;
    font-size: 16px;
}

footer {
    text-align: center;
    padding: var(--rm-spacing-sm);
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: var(--rm-spacing-sm);
    justify-content: center;
}

footer a {
    color: var(--rm-primary);
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
    color: var(--rm-primary-hover);
}

/* === LAYOUT === */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 100vh;*/
    padding: var(--rm-spacing-lg);
}

.card {
    background: var(--rm-bg-card);
    border-radius: var(--rm-radius-lg);
    box-shadow: var(--rm-shadow-card);
    padding: var(--rm-spacing-xl);
    max-width: 440px;
    width: 100%;
    text-align: center;
}

/* === TYPOGRAPHY === */
h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 var(--rm-spacing-md) 0;
    color: var(--rm-text-primary);
}

p {
    margin: 0 0 var(--rm-spacing-md) 0;
    color: var(--rm-text-secondary);
    line-height: 1.5;
}

.subtitle {
    font-size: 1.1rem;
    color: var(--rm-text-secondary);
    margin-bottom: var(--rm-spacing-lg);
}

.price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rm-text-primary);
}

.footer-note {
    font-size: 0.875rem;
    color: var(--rm-text-light);
    margin-top: var(--rm-spacing-md);
    margin-bottom: 0;
}

/* === SUCCESS ICON === */
.success-icon {
    margin-bottom: var(--rm-spacing-lg);
    display: flex;
    justify-content: center;
}

.success-icon svg {
    width: 60px;
    height: auto;
}

/* === BUTTONS === */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: var(--rm-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: var(--rm-spacing-sm) 0;
}

.btn-primary {
    background: var(--rm-primary);
    color: var(--rm-text-white);
    border: 2px solid transparent;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(149, 128, 255, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: transparent;
    color: var(--rm-text-light);
    border: 2px solid var(--rm-text-light);
}

.btn-secondary:hover {
    background: var(--rm-text-light);
    color: var(--rm-text-white);
}

/* === LISTS === */
.features-list {
    text-align: left;
    margin: var(--rm-spacing-lg) 0;
    padding: 0;
    list-style: none;
}

.features-list li {
    padding: var(--rm-spacing-xs) 0;
    color: var(--rm-text-secondary);
    font-size: 1rem;
}

.next-steps {
    margin: var(--rm-spacing-lg) 0;
}

.next-steps ol {
    text-align: left;
    margin: var(--rm-spacing-md) 0;
    padding-left: var(--rm-spacing-lg);
    color: var(--rm-text-secondary);
}

.next-steps ol li {
    margin: var(--rm-spacing-xs) 0;
    line-height: 1.4;
}

/* === PRICING SECTION === */
.pricing {
    background: var(--rm-bg-light);
    border-radius: var(--rm-radius-md);
    padding: var(--rm-spacing-md);
    margin: var(--rm-spacing-lg) 0;
    border: 1px solid var(--rm-primary);
}

/* === UTILITY CLASSES === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.gap-sm { gap: var(--rm-spacing-sm); }
.gap-md { gap: var(--rm-spacing-md); }
.gap-lg { gap: var(--rm-spacing-lg); }

.margin-bottom-sm { margin-bottom: var(--rm-spacing-sm); }
.margin-bottom-md { margin-bottom: var(--rm-spacing-md); }
.margin-bottom-lg { margin-bottom: var(--rm-spacing-lg); }

.plugin-note {
    background: var(--rm-bg-light);
    border-radius: var(--rm-radius-md);
    padding: var(--rm-spacing-md);
    margin: var(--rm-spacing-lg) 0;
    border: 1px solid var(--rm-primary);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .container {
        padding: var(--rm-spacing-md);
    }
    
    .card {
        padding: var(--rm-spacing-lg);
        margin: var(--rm-spacing-sm);
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        padding: var(--rm-spacing-sm);
    }
    
    .card {
        padding: var(--rm-spacing-md);
    }
    
    h1 {
        font-size: 1.5rem;
    }
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
    :root {
        --rm-text-primary: #f3f5fc;
        --rm-text-secondary: #c1c5d0;
        --rm-text-light: #9ca0aa;
        --rm-bg-light: #1a1a2e;
        --rm-bg-card: #2a2a3e;
    }
    
    body {
        background: var(--rm-bg-light);
        color: var(--rm-text-primary);
    }
    
    .card {
        background: var(--rm-bg-card);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .pricing {
        background: var(--rm-text-secondary);
    }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeIn 0.5s ease-out;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.success-icon svg {
    animation: pulse 2s ease-in-out infinite;
}

/* === LOADING STATE === */
.spinner {
    border: 2px solid rgba(149, 128, 255, 0.1);
    border-top: 2px solid var(--rm-primary);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin: 0 var(--rm-spacing-xs);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}