/* Приховування блоків від неактивних користувачів: Якщо у є .csp-no-subscription – ми ховаємо .csp-need-subscription */ .csp-no-subscription .csp-need-subscription { display: none !important; } /* Якщо у є .csp-active-subscription – ховаємо .csp-show-if-no-subscription */ .csp-active-subscription .csp-show-if-no-subscription { display: none !important; } /* Основні стилі для кабінету користувача */ .csp-subscription-info { max-width: 900px; margin: 30px auto; padding: 30px; background: #ffffff; border-radius: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); font-family: "Roboto", sans-serif; } .csp-subscription-status { margin-bottom: 30px; padding-bottom: 25px; border-bottom: 2px solid #f0f0f0; } .csp-status-title { color: #83D68E; font-size: 28px; font-weight: 700; margin: 0 0 20px 0; } .csp-info-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; } .csp-info-row:last-child { border-bottom: none; } .csp-info-label { color: #666; font-size: 16px; font-weight: 500; } .csp-info-value { color: #333; font-size: 16px; font-weight: 600; } .csp-plan-name { color: #83D68E; font-size: 18px; text-transform: uppercase; letter-spacing: 0.5px; } /* Стилі для інформації про символи */ .csp-chars-info { margin: 30px 0; padding: 25px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 15px; border: 2px solid #83D68E; } .csp-chars-title { color: #83D68E; font-size: 22px; font-weight: 700; margin: 0 0 20px 0; } .csp-chars-unlimited { text-align: center; padding: 20px; } .csp-unlimited-badge { display: inline-block; background: #83D68E; color: #ffffff; padding: 10px 25px; border-radius: 25px; font-size: 18px; font-weight: 700; margin-bottom: 15px; } .csp-chars-used { color: #666; font-size: 16px; margin: 0; } .csp-chars-progress { margin-top: 15px; } .csp-chars-stats { display: flex; justify-content: space-between; margin-bottom: 10px; color: #666; font-size: 16px; } .csp-progress-bar { width: 100%; height: 25px; background: #e9ecef; border-radius: 15px; overflow: hidden; margin-bottom: 15px; position: relative; } .csp-progress-fill { height: 100%; background: linear-gradient(90deg, #83D68E 0%, #6bc477 100%); border-radius: 15px; transition: width 0.3s ease; } .csp-chars-remaining { text-align: center; font-size: 18px; color: #333; } .csp-remaining-value { color: #83D68E; font-size: 24px; font-weight: 700; } /* Стилі для секції планів */ .csp-plans-section { margin-top: 40px; padding-top: 30px; border-top: 2px solid #f0f0f0; } .csp-plans-section-title { color: #333; font-size: 24px; font-weight: 700; margin: 0 0 25px 0; text-align: center; } /* Стилі для планів */ .csp-upgrade-section { margin-top: 30px; padding-top: 25px; border-top: 2px solid #f0f0f0; } .csp-upgrade-section h4 { color: #333; font-size: 22px; font-weight: 700; margin: 0 0 20px 0; } .csp-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; } .csp-plan-card { background: #ffffff; border: 2px solid #e0e0e0; border-radius: 15px; padding: 25px; text-align: center; transition: all 0.3s ease; position: relative; } .csp-plan-card:hover { border-color: #83D68E; box-shadow: 0 8px 25px rgba(131, 214, 142, 0.2); transform: translateY(-5px); } .csp-plan-card.csp-plan-vip { border-color: #83D68E; background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%); } .csp-plan-card.csp-plan-vip::before { content: 'VIP'; position: absolute; top: -10px; right: 20px; background: #83D68E; color: #ffffff; padding: 5px 15px; border-radius: 15px; font-size: 12px; font-weight: 700; text-transform: uppercase; } .csp-plan-card.csp-plan-current { border-color: #83D68E; border-width: 3px; box-shadow: 0 4px 15px rgba(131, 214, 142, 0.3); } .csp-plan-card h5 { color: #333; font-size: 24px; font-weight: 700; margin: 0 0 15px 0; } .csp-plan-price { color: #83D68E; font-size: 36px; font-weight: 700; margin: 15px 0; } .csp-plan-chars { color: #666; font-size: 16px; margin: 15px 0 20px 0; } .csp-plan-button { width: 100%; background: #83D68E; color: #ffffff; border: none; border-radius: 25px; padding: 12px 30px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .csp-plan-button:hover { background: #6bc477; transform: scale(1.05); box-shadow: 0 4px 15px rgba(131, 214, 142, 0.4); } .csp-plan-button:active { transform: scale(0.98); } .csp-plan-button-disabled { background: #cccccc !important; color: #666666 !important; cursor: not-allowed !important; opacity: 0.7; } .csp-plan-button-disabled:hover { background: #cccccc !important; transform: none !important; box-shadow: none !important; } /* Старі стилі для зворотної сумісності */ .comments-area a, .page-content a:nth-child(4) { color: rgb(0, 119, 205); border: 2px solid rgb(0, 119, 205); padding: 10px 15px; border-radius: 25px; margin-right: 15px; font-weight: 600; } .comments-area a, .page-content a:nth-child(4):hover { background: rgb(0, 119, 205); color: #fff; } .liqpaybtn { color: #83D68E; font-weight: 700; border: 2px solid #83D68E; border-radius: 25px; background: transparent; padding: 10px 20px; transition: all 0.3s ease; } .liqpaybtn:hover { background: #83D68E; color: #ffffff; } /* Стилі для безліміту в TTS */ .csp-unlimited-text { color: #83D68E; font-size: 20px; } /* Адаптивність */ @media screen and (max-width: 768px) { .csp-subscription-info { padding: 20px; font-size: 14px; } .csp-status-title { font-size: 22px; } .csp-info-row { flex-direction: column; align-items: flex-start; gap: 5px; } .csp-plans-grid { grid-template-columns: 1fr; } .liqpaybtn { font-size: 13px; margin-top: 20px; width: 100%; } .csp-plan-price { font-size: 28px; } }