/* Subscription page specific styles */

.subscription-hero {
    background-color: var(--dark-bg);
    min-height: 70vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1rem;
}

.hero-content {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.hero-subtitle {
    font-size: 1.3rem;
    max-width: 800px;
    margin: 1.5rem auto;
    text-align: center !important;
    color: var(--text-color);
    line-height: 1.6;
    width: 100%;
    display: block;
}

/* Estilos para alertas de subscrição */
.subscription-alert {
    border-radius: 8px;
    padding: 20px;
    margin: 20px auto;
    max-width: 1000px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subscription-required {
    background-color: rgba(255, 184, 0, 0.1);
    border-left: 4px solid #FFB800;
}

.alert-content {
    display: flex;
    align-items: center;
}

.alert-icon {
    font-size: 24px;
    margin-right: 20px;
    color: #FFB800;
}

.alert-message h4 {
    margin: 0 0 5px;
    color: #FFB800;
    font-weight: 600;
}

.alert-message p {
    margin: 0;
    color: #d0d0d0;
}

.pricing {
    padding: 7rem 2rem;
    position: relative;
    background-color: var(--dark-bg);
    overflow: hidden;
}

.pricing::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1008%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='rgba(17%2c 17%2c 17%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c551.912C118.543%2c559.293%2c187.853%2c432.553%2c287.267%2c374.114C383.276%2c317.909%2c509.505%2c310.13%2c566.242%2c214.407C623.79%2c117.349%2c598.707%2c-5.575%2c586.046%2c-118.458C574.414%2c-222.492%2c541.598%2c-319.568%2c488.878%2c-411.484C428.032%2c-517.514%2c378.331%2c-658.799%2c252.602%2c-697.411C128.914%2c-735.376%2c33.273%2c-608.629%2c-92.504%2c-578.229C-222.89%2c-546.906%2c-371.595%2c-599.859%2c-476.352%2c-514.281C-582.399%2c-427.699%2c-605.307%2c-281.232%2c-632.9%2c-152.867C-659.621%2c-28.398%2c-646.281%2c98.639%2c-618.251%2c222.634C-590.535%2c345.238%2c-562.192%2c472.995%2c-474.91%2c566.265C-385.49%2c661.813%2c-254.335%2c694.363%2c-135.548%2c705.441C-39.74%2c714.201%2c52.08%2c655.862%2c137.583%2c608.994C193.752%2c577.914%2c-89.487%2c546.124%2c0%2c551.912' fill='rgba(28%2c 28%2c 28%2c 1)'%3e%3c/path%3e%3cpath d='M1920 1684.714C2035.108 1672.509 2128.167 1596.143 2220.069 1524.525 2311.735 1453.0720000000001 2403.271 1378.466 2444.851 1268.618 2485.739 1160.663 2465.472 1042.783 2442.563 930.064 2419.447 816.369 2386.4 704.488 2303.901 620.546 2223.464 538.715 2112.033 488.82 2003.426 461.724 1894.662 434.58 1783.879 461.398 1675.08 488.262 1573.359 513.285 1480.334 552.048 1399.196 618.902 1316.53 686.9590000000001 1242.48 771.8820000000001 1218.404 879.619 1194.405 987.013 1250.105 1091.482 1274.478 1198.811 1299.038 1307.227 1306.051 1427.11 1380.446 1505.854 1454.472 1584.209 1569.44 1606.581 1669.217 1643.471 1750.681 1673.835 1832.841 1693.336 1920 1684.714' fill='rgba(28%2c 28%2c 28%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1008'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-position: center;
    background-size: cover;
    opacity: 0.8;
}

.pricing-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4rem;
    gap: 1.5rem;
    background-color: rgba(50, 50, 50, 0.5);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    border-radius: 50px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.pricing-toggle-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--light);
}

.pricing-discount {
    background-color: var(--primary);
    color: var(--dark);
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    margin-left: 0.5rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(255, 184, 0, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 184, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 184, 0, 0);
    }
}

.pricing-toggle {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 34px;
}

.pricing-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pricing-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    transition: .4s;
    border-radius: 34px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.pricing-toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background: linear-gradient(145deg, var(--primary), var(--accent-color));
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.pricing-toggle input:checked + .pricing-toggle-slider {
    background-color: rgba(255, 255, 255, 0.4);
}

.pricing-toggle input:checked + .pricing-toggle-slider:before {
    transform: translateX(36px);
}

.pricing-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.pricing-card {
    background: linear-gradient(145deg, rgba(50, 50, 50, 0.9), rgba(35, 35, 35, 0.9));
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 184, 0, 0.3);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(0);
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    transition: all 0.5s ease;
    z-index: -1;
}

.pricing-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-color);
}

.pricing-card:hover::before {
    transform: scale(1.2) rotate(10deg);
}

.pricing-card.featured {
    border: 2px solid var(--accent-color);
    transform: scale(1.05);
}

.pricing-card.featured:hover {
    transform: scale(1.08) translateY(-15px);
}

.pricing-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--accent-color), #FFD700);
    color: var(--dark);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(255, 184, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pricing-card-header {
    text-align: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-card-header h3 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 700;
}

.pricing-card-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.pricing-price {
    margin: 1.5rem 0;
    position: relative;
}

.price-monthly, .price-annual {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.price-annual {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(10px);
}

.pricing-card.annual .price-monthly {
    opacity: 0;
    transform: translateY(-10px);
}

.pricing-card.annual .price-annual {
    opacity: 1;
    transform: translateY(0);
}

.pricing-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
}

.pricing-card-body {
    flex-grow: 1;
    padding: 2rem 0;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-features li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    color: var(--text-color);
}

.pricing-features li i {
    margin-right: 0.75rem;
    color: var(--accent-color);
    font-size: 1.2rem;
}

.pricing-features .feature-disabled {
    color: var(--text-muted);
}

.pricing-features .feature-disabled i {
    color: rgba(255, 255, 255, 0.3);
}

.pricing-card-footer {
    text-align: center;
    margin-top: auto;
}

/* Comparison Table */
.comparison {
    padding: 7rem 2rem;
    position: relative;
    background-color: var(--dark-bg);
}

.comparison-table-container {
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3rem;
    background-color: rgba(40, 40, 40, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    overflow: hidden;
}

.comparison-table th, 
.comparison-table td {
    padding: 1.2rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table th {
    background-color: rgba(30, 30, 30, 0.8);
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
    min-width: 200px;
}

.comparison-table tbody tr:nth-child(even) {
    background-color: rgba(60, 60, 60, 0.3);
}

.comparison-table tr:hover {
    background-color: rgba(70, 70, 70, 0.5);
}

.comparison-table i {
    font-size: 1.2rem;
    vertical-align: middle;
}

.comparison-table .bi-check-circle-fill {
    color: var(--accent-color);
}

.comparison-table .bi-x-circle {
    color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
    
    .pricing-card.featured {
        transform: none;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-10px);
    }
    
    .comparison-table th, 
    .comparison-table td {
        padding: 0.8rem;
    }
}

/* Estilos adicionais para a página de subscrições para integração com Stripe */
.stripe-integration {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Estilo da animação de carregamento */
.spinning {
    animation: spin 1s linear infinite;
}

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

/* Melhorias para a página de sucesso */
.success-section {
    padding: 6rem 1rem;
    background-color: var(--dark);
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.confirmation-box {
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 0%, rgba(40,40,40,0.8) 100%);
    border-radius: var(--radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid rgba(255, 184, 0, 0.2);
}

.confirmation-icon {
    font-size: 5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.subscription-details {
    background-color: rgba(10,10,10,0.5);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: left;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item span {
    color: var(--gray-light);
}

.detail-item strong {
    color: var(--light);
}

.status-active {
    color: #4CAF50;
}

.status-trialing {
    color: #2196F3;
}

.status-past-due {
    color: #FF9800;
}

.small-text {
    font-size: 0.85rem;
    opacity: 0.7;
}

.next-steps {
    margin: 2rem 0;
    text-align: left;
}

.next-steps h3 {
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
    display: inline-block;
}

.next-steps h3:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 1.5rem;
    width: 3px;
    background-color: var(--primary);
    transform: translateY(-50%);
}

.next-steps ul {
    list-style: none;
    padding: 0;
}

.next-steps li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.next-steps li i {
    color: var(--primary);
    position: absolute;
    left: 0;
    top: 0.25rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Estilos para a página de cancelamento */
.cancel-page {
    padding: 6rem 1rem;
    background-color: var(--dark);
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.cancel-container {
    background: linear-gradient(135deg, rgba(30,30,30,0.9) 0%, rgba(40,40,40,0.8) 100%);
    border-radius: var(--radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.cancel-icon {
    font-size: 5rem;
    color: #dc3545;
    margin-bottom: 1.5rem;
}