| @@ -9,8 +9,10 @@ | ||
| 9 | 9 | return; |
| 10 | 10 | } |
| 11 | 11 | ?> |
| 12 | 12 | |
| 13 | +<?php if (function_exists('aibui_render_onboarding_blocks')) { aibui_render_onboarding_blocks(); } ?> | |
| 14 | + | |
| 13 | 15 | <div class="ai-credits-container ai-fade-in"> |
| 14 | 16 | <!-- Header --> |
| 15 | 17 | <div class="ai-credits-header"> |
| 16 | 18 | <h1>AI Credits & Subscription</h1> |
| @@ -61,16 +63,37 @@ | ||
| 61 | 63 | <h2>Subscription Management</h2> |
| 62 | 64 | <p>Choose the perfect plan for your AI needs</p> |
| 63 | 65 | </div> |
| 64 | 66 | |
| 67 | + <div class="ai-subscription-note"> | |
| 68 | + Cancel anytime — your generated content stays on your site. | |
| 69 | + </div> | |
| 70 | + | |
| 71 | + <!-- Monthly / Yearly billing toggle --> | |
| 72 | + <div class="ai-billing-toggle" role="tablist" aria-label="Billing period"> | |
| 73 | + <button type="button" class="ai-billing-option is-active" data-billing="monthly" role="tab" aria-selected="true"> | |
| 74 | + Monthly | |
| 75 | + </button> | |
| 76 | + <button type="button" class="ai-billing-option" data-billing="yearly" role="tab" aria-selected="false"> | |
| 77 | + Yearly | |
| 78 | + <span class="ai-billing-save">Save up to 17%</span> | |
| 79 | + </button> | |
| 80 | + </div> | |
| 81 | + | |
| 65 | 82 | <div class="ai-subscription-actions" id="subscription-plans-container"> |
| 66 | 83 | <!-- Plan Essential --> |
| 67 | - <div class="ai-plan-card-wrapper" data-plan="essential"> | |
| 84 | + <div class="ai-plan-card-wrapper" | |
| 85 | + data-plan="essential" | |
| 86 | + data-monthly-price="9" | |
| 87 | + data-yearly-price="90" | |
| 88 | + data-monthly-type="essential" | |
| 89 | + data-yearly-type="essential_year" | |
| 90 | + data-monthly-credits="750"> | |
| 68 | 91 | <div class="ai-plan-card ai-plan-essential"> |
| 69 | - <div class="ai-plan-badge">Essential</div> | |
| 70 | 92 | <div class="ai-plan-header"> |
| 71 | 93 | <div class="ai-plan-title"> |
| 72 | - <h3>Essential</h3> | |
| 94 | + <h3>Starter</h3> | |
| 95 | + <p class="ai-plan-persona">Best for discovering AI Builder and creating your first pages.</p> | |
| 73 | 96 | </div> |
| 74 | 97 | </div> |
| 75 | 98 | |
| 76 | 99 | <div class="ai-plan-features"> |
| @@ -95,8 +118,9 @@ | ||
| 95 | 118 | </div> |
| 96 | 119 | <span class="ai-feature-text">Generation of pages, blocks, images & texts</span> |
| 97 | 120 | </div> |
| 98 | 121 | |
| 122 | + | |
| 99 | 123 | <div class="ai-feature-item"> |
| 100 | 124 | <div class="ai-feature-icon"> |
| 101 | 125 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 102 | 126 | xmlns="http://www.w3.org/2000/svg"> |
| @@ -110,12 +134,14 @@ | ||
| 110 | 134 | |
| 111 | 135 | <div class="ai-plan-header"> |
| 112 | 136 | <div class="ai-plan-title"> |
| 113 | 137 | <div class="ai-plan-price"> |
| 138 | + <span class="ai-price-old" hidden>$9</span> | |
| 114 | 139 | <span class="ai-price-amount">$9</span> |
| 115 | 140 | <span class="ai-price-period">/month</span> |
| 116 | 141 | </div> |
| 117 | 142 | <span class="ai-price-credit">$0.012 per credit</span> |
| 143 | + <span class="ai-price-billed" hidden>Billed annually at $90/year</span> | |
| 118 | 144 | </div> |
| 119 | 145 | </div> |
| 120 | 146 | |
| 121 | 147 | <div class="ai-plan-cta"> |
| @@ -120,9 +146,9 @@ | ||
| 120 | 146 | |
| 121 | 147 | <div class="ai-plan-cta"> |
| 122 | 148 | <button type="button" class="ai-cta-btn ai-plan-btn" data-subscription-type="essential"> |
| 123 | 149 | <span class="ai-loading" style="display: none;"></span> |
| 124 | - <span class="btn-text">Choose Essential</span> | |
| 150 | + <span class="btn-text">Choose Starter</span> | |
| 125 | 151 | </button> |
| 126 | 152 | </div> |
| 127 | 153 | </div> |
| 128 | 154 | </div> |
| @@ -127,14 +153,21 @@ | ||
| 127 | 153 | </div> |
| 128 | 154 | </div> |
| 129 | 155 | |
| 130 | 156 | <!-- Plan Premium --> |
| 131 | - <div class="ai-plan-card-wrapper" data-plan="premium"> | |
| 157 | + <div class="ai-plan-card-wrapper" | |
| 158 | + data-plan="premium" | |
| 159 | + data-monthly-price="19" | |
| 160 | + data-yearly-price="190" | |
| 161 | + data-monthly-type="premium" | |
| 162 | + data-yearly-type="premium_year" | |
| 163 | + data-monthly-credits="2000"> | |
| 132 | 164 | <div class="ai-plan-card ai-plan-premium ai-plan-popular"> |
| 133 | 165 | <div class="ai-plan-badge ai-plan-badge-popular">Most Popular</div> |
| 134 | 166 | <div class="ai-plan-header"> |
| 135 | 167 | <div class="ai-plan-title"> |
| 136 | - <h3>Premium</h3> | |
| 168 | + <h3>Pro</h3> | |
| 169 | + <p class="ai-plan-persona">Best for creators who need more credits and advanced features to build faster.</p> | |
| 137 | 170 | </div> |
| 138 | 171 | </div> |
| 139 | 172 | |
| 140 | 173 | <div class="ai-plan-features"> |
| @@ -159,8 +192,9 @@ | ||
| 159 | 192 | </div> |
| 160 | 193 | <span class="ai-feature-text">Generation of pages, blocks, images & texts</span> |
| 161 | 194 | </div> |
| 162 | 195 | |
| 196 | + | |
| 163 | 197 | <div class="ai-feature-item"> |
| 164 | 198 | <div class="ai-feature-icon"> |
| 165 | 199 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 166 | 200 | xmlns="http://www.w3.org/2000/svg"> |
| @@ -167,8 +201,19 @@ | ||
| 167 | 201 | <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 168 | 202 | stroke-linecap="round" stroke-linejoin="round" /> |
| 169 | 203 | </svg> |
| 170 | 204 | </div> |
| 205 | + <span class="ai-feature-text">Multi Page Generator</span> | |
| 206 | + </div> | |
| 207 | + | |
| 208 | + <div class="ai-feature-item"> | |
| 209 | + <div class="ai-feature-icon"> | |
| 210 | + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" | |
| 211 | + xmlns="http://www.w3.org/2000/svg"> | |
| 212 | + <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" | |
| 213 | + stroke-linecap="round" stroke-linejoin="round" /> | |
| 214 | + </svg> | |
| 215 | + </div> | |
| 171 | 216 | <span class="ai-feature-text">Extra credits available on demand</span> |
| 172 | 217 | </div> |
| 173 | 218 | </div> |
| 174 | 219 | |
| @@ -174,12 +219,14 @@ | ||
| 174 | 219 | |
| 175 | 220 | <div class="ai-plan-header"> |
| 176 | 221 | <div class="ai-plan-title"> |
| 177 | 222 | <div class="ai-plan-price"> |
| 223 | + <span class="ai-price-old" hidden>$19</span> | |
| 178 | 224 | <span class="ai-price-amount">$19</span> |
| 179 | 225 | <span class="ai-price-period">/month</span> |
| 180 | 226 | </div> |
| 181 | 227 | <span class="ai-price-credit">$0.009 per credit</span> |
| 228 | + <span class="ai-price-billed" hidden>Billed annually at $190/year</span> | |
| 182 | 229 | </div> |
| 183 | 230 | </div> |
| 184 | 231 | |
| 185 | 232 | <div class="ai-plan-cta"> |
| @@ -184,9 +231,9 @@ | ||
| 184 | 231 | |
| 185 | 232 | <div class="ai-plan-cta"> |
| 186 | 233 | <button type="button" class="ai-cta-btn ai-plan-btn" data-subscription-type="premium"> |
| 187 | 234 | <span class="ai-loading" style="display: none;"></span> |
| 188 | - <span class="btn-text">Choose Premium</span> | |
| 235 | + <span class="btn-text">Choose Pro</span> | |
| 189 | 236 | </button> |
| 190 | 237 | </div> |
| 191 | 238 | </div> |
| 192 | 239 | </div> |
| @@ -191,14 +238,20 @@ | ||
| 191 | 238 | </div> |
| 192 | 239 | </div> |
| 193 | 240 | |
| 194 | 241 | <!-- Plan Creator --> |
| 195 | - <div class="ai-plan-card-wrapper" data-plan="creator"> | |
| 242 | + <div class="ai-plan-card-wrapper" | |
| 243 | + data-plan="creator" | |
| 244 | + data-monthly-price="49" | |
| 245 | + data-yearly-price="490" | |
| 246 | + data-monthly-type="creator" | |
| 247 | + data-yearly-type="creator_year" | |
| 248 | + data-monthly-credits="6000"> | |
| 196 | 249 | <div class="ai-plan-card ai-plan-creator"> |
| 197 | - <div class="ai-plan-badge">Creator</div> | |
| 198 | 250 | <div class="ai-plan-header"> |
| 199 | 251 | <div class="ai-plan-title"> |
| 200 | - <h3>Creator</h3> | |
| 252 | + <h3>Agency</h3> | |
| 253 | + <p class="ai-plan-persona">Best for agencies and teams scaling production across many projects.</p> | |
| 201 | 254 | </div> |
| 202 | 255 | </div> |
| 203 | 256 | |
| 204 | 257 | <div class="ai-plan-features"> |
| @@ -223,8 +276,9 @@ | ||
| 223 | 276 | </div> |
| 224 | 277 | <span class="ai-feature-text">Generation of pages, blocks, images & texts</span> |
| 225 | 278 | </div> |
| 226 | 279 | |
| 280 | + | |
| 227 | 281 | <div class="ai-feature-item"> |
| 228 | 282 | <div class="ai-feature-icon"> |
| 229 | 283 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" |
| 230 | 284 | xmlns="http://www.w3.org/2000/svg"> |
| @@ -231,8 +285,19 @@ | ||
| 231 | 285 | <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" |
| 232 | 286 | stroke-linecap="round" stroke-linejoin="round" /> |
| 233 | 287 | </svg> |
| 234 | 288 | </div> |
| 289 | + <span class="ai-feature-text">Multi Page Generator</span> | |
| 290 | + </div> | |
| 291 | + | |
| 292 | + <div class="ai-feature-item"> | |
| 293 | + <div class="ai-feature-icon"> | |
| 294 | + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" | |
| 295 | + xmlns="http://www.w3.org/2000/svg"> | |
| 296 | + <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2.5" | |
| 297 | + stroke-linecap="round" stroke-linejoin="round" /> | |
| 298 | + </svg> | |
| 299 | + </div> | |
| 235 | 300 | <span class="ai-feature-text">Extra credits available on demand</span> |
| 236 | 301 | </div> |
| 237 | 302 | </div> |
| 238 | 303 | |
| @@ -238,12 +303,14 @@ | ||
| 238 | 303 | |
| 239 | 304 | <div class="ai-plan-header"> |
| 240 | 305 | <div class="ai-plan-title"> |
| 241 | 306 | <div class="ai-plan-price"> |
| 307 | + <span class="ai-price-old" hidden>$49</span> | |
| 242 | 308 | <span class="ai-price-amount">$49</span> |
| 243 | 309 | <span class="ai-price-period">/month</span> |
| 244 | 310 | </div> |
| 245 | 311 | <span class="ai-price-credit">$0.008 per credit</span> |
| 312 | + <span class="ai-price-billed" hidden>Billed annually at $490/year</span> | |
| 246 | 313 | </div> |
| 247 | 314 | </div> |
| 248 | 315 | |
| 249 | 316 | <div class="ai-plan-cta"> |
| @@ -248,9 +315,9 @@ | ||
| 248 | 315 | |
| 249 | 316 | <div class="ai-plan-cta"> |
| 250 | 317 | <button type="button" class="ai-cta-btn ai-plan-btn" data-subscription-type="creator"> |
| 251 | 318 | <span class="ai-loading" style="display: none;"></span> |
| 252 | - <span class="btn-text">Choose Creator</span> | |
| 319 | + <span class="btn-text">Choose Agency</span> | |
| 253 | 320 | </button> |
| 254 | 321 | </div> |
| 255 | 322 | </div> |
| 256 | 323 | </div> |
| @@ -256,109 +323,102 @@ | ||
| 256 | 323 | </div> |
| 257 | 324 | </div> |
| 258 | 325 | |
| 259 | 326 | <div class="ai-section-header" style="margin-bottom: 120px;"> |
| 260 | -</div> | |
| 261 | - | |
| 262 | - <!-- Cancel Subscription Button (shown when user has active subscription) --> | |
| 263 | - <div class="ai-action-card" id="cancel-subscription-card" style="display: none; margin-top: 24px;"> | |
| 264 | - <div class="ai-action-icon"> | |
| 265 | - <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| 266 | - <path d="M12 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 267 | - stroke-linejoin="round" /> | |
| 268 | - <path d="M12 18V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 269 | - stroke-linejoin="round" /> | |
| 270 | - <path d="M4.93 4.93L7.76 7.76" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 271 | - stroke-linejoin="round" /> | |
| 272 | - <path d="M16.24 16.24L19.07 19.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 273 | - stroke-linejoin="round" /> | |
| 274 | - <path d="M2 12H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 275 | - stroke-linejoin="round" /> | |
| 276 | - <path d="M18 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 277 | - stroke-linejoin="round" /> | |
| 278 | - <path d="M4.93 19.07L7.76 16.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 279 | - stroke-linejoin="round" /> | |
| 280 | - <path d="M16.24 7.76L19.07 4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 281 | - stroke-linejoin="round" /> | |
| 282 | - </svg> | |
| 283 | - </div> | |
| 284 | - <div class="ai-action-content"> | |
| 285 | - <h3>Manage Subscription</h3> | |
| 286 | - <p>Cancel your subscription or change your plan</p> | |
| 287 | - <button type="button" class="ai-danger-btn" id="subscription-btn"> | |
| 288 | - <span class="ai-loading" style="display: none;"></span> | |
| 289 | - <span class="btn-text">Cancel Subscription</span> | |
| 290 | - </button> | |
| 291 | - </div> | |
| 292 | 327 | </div> |
| 293 | 328 | </div> |
| 294 | 329 | |
| 295 | 330 | |
| 296 | 331 | |
| 297 | - <!-- Credit Purchase --> | |
| 332 | + <!-- Credit Purchase (One-time top-up with custom amount) --> | |
| 298 | 333 | <div class="ai-section" id="credit-purchase-section"> |
| 299 | 334 | <div class="ai-section-header"> |
| 300 | - <h2></h2> | |
| 301 | - <p></p> | |
| 335 | + <h2>One-time top-up</h2> | |
| 336 | + <p id="credit-purchase-subtitle">Buy extra credits whenever you need them. Purchased credits never expire.</p> | |
| 302 | 337 | </div> |
| 303 | 338 | |
| 304 | - <div class="ai-credit-actions"> | |
| 305 | - <div class="ai-action-card" id="credit-purchase-card"> | |
| 306 | - <div class="ai-action-icon"> | |
| 307 | - <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| 308 | - <path d="M12 1V23" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 309 | - stroke-linejoin="round" /> | |
| 310 | - <path | |
| 311 | - d="M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6" | |
| 312 | - stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| 339 | + <div class="ai-topup-card" id="credit-purchase-card" data-locked="false"> | |
| 340 | + <!-- Overlay shown to users without an active subscription --> | |
| 341 | + <div class="ai-topup-lock" id="topup-lock-overlay" hidden> | |
| 342 | + <div class="ai-topup-lock-icon" aria-hidden="true"> | |
| 343 | + <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| 344 | + <rect x="3" y="11" width="18" height="11" rx="2" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> | |
| 345 | + <path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| 313 | 346 | </svg> |
| 314 | 347 | </div> |
| 315 | - <div class="ai-action-content"> | |
| 316 | - <h3>Purchase 750 Credits</h3> | |
| 317 | - <p>Buy credits immediately, pay once.</p> | |
| 348 | + <div class="ai-topup-lock-text"> | |
| 349 | + <h3>Subscribe to unlock top-ups</h3> | |
| 350 | + <p>One-time credit purchases are available to subscribers only. Choose a plan above to activate this option.</p> | |
| 351 | + </div> | |
| 352 | + </div> | |
| 318 | 353 | |
| 319 | - <!-- Message pour utilisateurs sans abonnement --> | |
| 320 | - <div id="subscription-required-message" class="ai-subscription-required" style="display: none;"> | |
| 321 | - <div class="ai-warning-icon"> | |
| 322 | - <svg width="20" height="20" viewBox="0 0 24 24" fill="none" | |
| 323 | - xmlns="http://www.w3.org/2000/svg"> | |
| 324 | - <path | |
| 325 | - d="M10.29 3.86L1.82 18A2 2 0 0 0 3.54 21H20.46A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z" | |
| 326 | - stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 327 | - stroke-linejoin="round" /> | |
| 328 | - <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 329 | - stroke-linejoin="round" /> | |
| 330 | - <circle cx="12" cy="17" r="1" stroke="currentColor" stroke-width="2" /> | |
| 354 | + <div class="ai-topup-body"> | |
| 355 | + <div class="ai-topup-header"> | |
| 356 | + <div class="ai-topup-header-icon" aria-hidden="true"> | |
| 357 | + <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| 358 | + <path d="M12 1V23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| 359 | + <path d="M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6" | |
| 360 | + stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| 361 | + </svg> | |
| 362 | + </div> | |
| 363 | + <div class="ai-topup-header-text"> | |
| 364 | + <h3>Choose your amount</h3> | |
| 365 | + <p>Rate: <strong>$0.012</strong> per credit · Credits never expire</p> | |
| 366 | + </div> | |
| 367 | + </div> | |
| 368 | + | |
| 369 | + <div class="ai-topup-grid"> | |
| 370 | + <div class="ai-topup-input-group"> | |
| 371 | + <label for="topup-amount" class="ai-topup-label">Amount in USD</label> | |
| 372 | + <div class="ai-topup-amount-wrapper"> | |
| 373 | + <span class="ai-topup-currency">$</span> | |
| 374 | + <input | |
| 375 | + type="number" | |
| 376 | + id="topup-amount" | |
| 377 | + class="ai-topup-amount-input" | |
| 378 | + min="5" | |
| 379 | + max="1200" | |
| 380 | + step="1" | |
| 381 | + value="10" | |
| 382 | + inputmode="numeric" | |
| 383 | + autocomplete="off" | |
| 384 | + /> | |
| 385 | + </div> | |
| 386 | + <p class="ai-topup-range-info">Between <strong>$5</strong> and <strong>$1,200</strong>.</p> | |
| 387 | + <div class="ai-topup-presets" role="group" aria-label="Quick amount presets"> | |
| 388 | + <button type="button" class="ai-topup-preset" data-amount="10">$10</button> | |
| 389 | + <button type="button" class="ai-topup-preset" data-amount="25">$25</button> | |
| 390 | + <button type="button" class="ai-topup-preset" data-amount="50">$50</button> | |
| 391 | + <button type="button" class="ai-topup-preset" data-amount="100">$100</button> | |
| 392 | + <button type="button" class="ai-topup-preset" data-amount="250">$250</button> | |
| 393 | + <button type="button" class="ai-topup-preset" data-amount="500">$500</button> | |
| 394 | + </div> | |
| 395 | + <p class="ai-topup-error" id="topup-error" role="alert" aria-live="polite"></p> | |
| 396 | + </div> | |
| 397 | + | |
| 398 | + <div class="ai-topup-summary" aria-live="polite"> | |
| 399 | + <div class="ai-topup-summary-row"> | |
| 400 | + <span class="ai-topup-summary-label">You pay</span> | |
| 401 | + <span class="ai-topup-summary-value" id="topup-pay-amount">$10.00</span> | |
| 402 | + </div> | |
| 403 | + <div class="ai-topup-summary-arrow" aria-hidden="true"> | |
| 404 | + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| 405 | + <path d="M12 5V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| 406 | + <path d="M5 12L12 19L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| 331 | 407 | </svg> |
| 332 | 408 | </div> |
| 333 | - <div class="ai-warning-content"> | |
| 334 | - <strong>Active subscription required</strong> | |
| 335 | - <p>You need an active subscription to purchase additional credits. Get a subscription first | |
| 336 | - to unlock this feature.</p> | |
| 409 | + <div class="ai-topup-summary-row ai-topup-summary-credits"> | |
| 410 | + <span class="ai-topup-summary-label">You get</span> | |
| 411 | + <span class="ai-topup-summary-value" id="topup-credits-amount">833 credits</span> | |
| 337 | 412 | </div> |
| 413 | + | |
| 414 | + <button type="button" class="ai-primary-btn ai-topup-btn" id="buy-credits-btn"> | |
| 415 | + <span class="ai-loading" style="display: none;"></span> | |
| 416 | + <span class="btn-text">Purchase credits</span> | |
| 417 | + </button> | |
| 418 | + | |
| 419 | + <p class="ai-topup-hint">Between $5 and $1,200. Credits are added instantly after payment.</p> | |
| 338 | 420 | </div> |
| 339 | - | |
| 340 | - <button type="button" class="ai-primary-btn" id="buy-credits-btn" onclick="handleCreditPurchase()"> | |
| 341 | - <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| 342 | - <path d="M12 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 343 | - stroke-linejoin="round" /> | |
| 344 | - <path d="M12 18V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 345 | - stroke-linejoin="round" /> | |
| 346 | - <path d="M4.93 4.93L7.76 7.76" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 347 | - stroke-linejoin="round" /> | |
| 348 | - <path d="M16.24 16.24L19.07 19.07" stroke="currentColor" stroke-width="2" | |
| 349 | - stroke-linecap="round" stroke-linejoin="round" /> | |
| 350 | - <path d="M2 12H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 351 | - stroke-linejoin="round" /> | |
| 352 | - <path d="M18 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 353 | - stroke-linejoin="round" /> | |
| 354 | - <path d="M4.93 19.07L7.76 16.24" stroke="currentColor" stroke-width="2" | |
| 355 | - stroke-linecap="round" stroke-linejoin="round" /> | |
| 356 | - <path d="M16.24 7.76L19.07 4.93" stroke="currentColor" stroke-width="2" | |
| 357 | - stroke-linecap="round" stroke-linejoin="round" /> | |
| 358 | - </svg> | |
| 359 | - Buy Credits | |
| 360 | - </button> | |
| 361 | 421 | </div> |
| 362 | 422 | </div> |
| 363 | 423 | </div> |
| 364 | 424 | </div> |
| @@ -399,8 +459,41 @@ | ||
| 399 | 459 | </div> |
| 400 | 460 | </div> |
| 401 | 461 | </div> |
| 402 | 462 | |
| 463 | + <!-- Manage Subscription (shown when user has active subscription) --> | |
| 464 | + <div class="ai-section"> | |
| 465 | + <div class="ai-action-card" id="cancel-subscription-card" style="display: none;"> | |
| 466 | + <div class="ai-action-icon"> | |
| 467 | + <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| 468 | + <path d="M12 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 469 | + stroke-linejoin="round" /> | |
| 470 | + <path d="M12 18V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 471 | + stroke-linejoin="round" /> | |
| 472 | + <path d="M4.93 4.93L7.76 7.76" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 473 | + stroke-linejoin="round" /> | |
| 474 | + <path d="M16.24 16.24L19.07 19.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 475 | + stroke-linejoin="round" /> | |
| 476 | + <path d="M2 12H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 477 | + stroke-linejoin="round" /> | |
| 478 | + <path d="M18 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 479 | + stroke-linejoin="round" /> | |
| 480 | + <path d="M4.93 19.07L7.76 16.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 481 | + stroke-linejoin="round" /> | |
| 482 | + <path d="M16.24 7.76L19.07 4.93" stroke="currentColor" stroke-width="2" stroke-linecap="round" | |
| 483 | + stroke-linejoin="round" /> | |
| 484 | + </svg> | |
| 485 | + </div> | |
| 486 | + <div class="ai-action-content"> | |
| 487 | + <h3>Manage Subscription</h3> | |
| 488 | + <button type="button" class="ai-cancel-subscription-btn" id="subscription-btn" style="opacity: 0.7; font-weight: 400;"> | |
| 489 | + <span class="ai-loading" style="display: none;"></span> | |
| 490 | + <span class="btn-text">Cancel Subscription</span> | |
| 491 | + </button> | |
| 492 | + </div> | |
| 493 | + </div> | |
| 494 | + </div> | |
| 495 | + | |
| 403 | 496 | <!-- Messages --> |
| 404 | 497 | <div id="message-container"></div> |
| 405 | 498 | </div> |
| 406 | 499 | |
| @@ -413,8 +506,11 @@ | ||
| 413 | 506 | </div> |
| 414 | 507 | <div class="ai-modal-body"> |
| 415 | 508 | <p>Are you sure you want to cancel your subscription? You will lose access to monthly credits at the end of |
| 416 | 509 | your current billing period.</p> |
| 510 | + <p style="margin-top: 16px; padding: 12px; background: #fef3c7; border-left: 3px solid #f59e0b; border-radius: 4px; color: #92400e;"> | |
| 511 | + <strong>Important:</strong> Once your credits are used up, you will no longer be able to use AI features such as page translation and AI-powered content creation. | |
| 512 | + </p> | |
| 417 | 513 | </div> |
| 418 | 514 | <div class="ai-modal-footer"> |
| 419 | 515 | <button type="button" class="ai-secondary-btn" onclick="closeModal()">Keep Subscription</button> |
| 420 | 516 | <button type="button" class="ai-danger-btn" onclick="confirmCancelSubscription()"> |
| @@ -424,8 +520,33 @@ | ||
| 424 | 520 | </div> |
| 425 | 521 | </div> |
| 426 | 522 | </div> |
| 427 | 523 | |
| 524 | +<!-- Switch subscription confirmation modal --> | |
| 525 | +<div id="switch-subscription-modal" class="ai-modal" style="display: none;"> | |
| 526 | + <div class="ai-modal-content"> | |
| 527 | + <div class="ai-modal-header"> | |
| 528 | + <h3>Switch your subscription</h3> | |
| 529 | + <button type="button" class="ai-modal-close" onclick="closeSwitchSubscriptionModal()">×</button> | |
| 530 | + </div> | |
| 531 | + <div class="ai-modal-body"> | |
| 532 | + <p> | |
| 533 | + You are about to switch to the <strong id="switch-target-plan-label">—</strong> plan. | |
| 534 | + </p> | |
| 535 | + <p style="margin-top: 16px; padding: 12px; background: #eef2ff; border-left: 3px solid #4f46e5; border-radius: 4px; color: #3730a3;"> | |
| 536 | + <strong>Heads up:</strong> this change takes effect <strong>immediately</strong>. Your billing will be adjusted accordingly from today. | |
| 537 | + </p> | |
| 538 | + </div> | |
| 539 | + <div class="ai-modal-footer"> | |
| 540 | + <button type="button" class="ai-secondary-btn" onclick="closeSwitchSubscriptionModal()">Cancel</button> | |
| 541 | + <button type="button" class="ai-primary-btn" id="switch-subscription-confirm-btn" onclick="confirmSwitchSubscription()"> | |
| 542 | + <span class="ai-loading" style="display: none;"></span> | |
| 543 | + <span class="btn-text">Confirm switch</span> | |
| 544 | + </button> | |
| 545 | + </div> | |
| 546 | + </div> | |
| 547 | +</div> | |
| 548 | + | |
| 428 | 549 | <style> |
| 429 | 550 | /* Subscription Plans Container */ |
| 430 | 551 | .ai-subscription-actions { |
| 431 | 552 | display: grid; |
| @@ -433,8 +554,107 @@ | ||
| 433 | 554 | gap: 24px; |
| 434 | 555 | margin-bottom: 24px; |
| 435 | 556 | } |
| 436 | 557 | |
| 558 | + .ai-subscription-note { | |
| 559 | + font-size: 13px; | |
| 560 | + color: #6b7280; | |
| 561 | + text-align: center; | |
| 562 | + margin-bottom: 16px; | |
| 563 | + max-width: 540px; | |
| 564 | + margin-left: auto; | |
| 565 | + margin-right: auto; | |
| 566 | + } | |
| 567 | + | |
| 568 | + /* ============================================================== */ | |
| 569 | + /* Monthly / Yearly billing toggle */ | |
| 570 | + /* ============================================================== */ | |
| 571 | + .ai-billing-toggle { | |
| 572 | + display: inline-flex; | |
| 573 | + align-items: stretch; | |
| 574 | + background: #f1f5f9; | |
| 575 | + border: 1px solid #e2e8f0; | |
| 576 | + border-radius: 999px; | |
| 577 | + padding: 4px; | |
| 578 | + margin: 0 auto 24px; | |
| 579 | + gap: 4px; | |
| 580 | + position: relative; | |
| 581 | + left: 50%; | |
| 582 | + transform: translateX(-50%); | |
| 583 | + } | |
| 584 | + | |
| 585 | + .ai-billing-option { | |
| 586 | + appearance: none; | |
| 587 | + border: none; | |
| 588 | + background: transparent; | |
| 589 | + color: #475569; | |
| 590 | + font-size: 14px; | |
| 591 | + font-weight: 600; | |
| 592 | + padding: 10px 22px; | |
| 593 | + border-radius: 999px; | |
| 594 | + cursor: pointer; | |
| 595 | + display: inline-flex; | |
| 596 | + align-items: center; | |
| 597 | + gap: 8px; | |
| 598 | + transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; | |
| 599 | + white-space: nowrap; | |
| 600 | + } | |
| 601 | + | |
| 602 | + .ai-billing-option:hover:not(.is-active) { | |
| 603 | + color: #1e293b; | |
| 604 | + } | |
| 605 | + | |
| 606 | + .ai-billing-option.is-active { | |
| 607 | + background: #ffffff; | |
| 608 | + color: #0f172a; | |
| 609 | + box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); | |
| 610 | + } | |
| 611 | + | |
| 612 | + .ai-billing-save { | |
| 613 | + font-size: 11px; | |
| 614 | + font-weight: 700; | |
| 615 | + letter-spacing: 0.3px; | |
| 616 | + color: #047857; | |
| 617 | + background: rgba(16, 185, 129, 0.12); | |
| 618 | + border: 1px solid rgba(16, 185, 129, 0.25); | |
| 619 | + padding: 3px 8px; | |
| 620 | + border-radius: 999px; | |
| 621 | + text-transform: uppercase; | |
| 622 | + } | |
| 623 | + | |
| 624 | + /* Struck-through "was" monthly price shown in yearly mode */ | |
| 625 | + .ai-price-old { | |
| 626 | + font-size: 22px; | |
| 627 | + font-weight: 500; | |
| 628 | + color: #94a3b8; | |
| 629 | + text-decoration: line-through; | |
| 630 | + text-decoration-thickness: 2px; | |
| 631 | + margin-right: 4px; | |
| 632 | + } | |
| 633 | + | |
| 634 | + /* Billed annually note under the price */ | |
| 635 | + .ai-price-billed { | |
| 636 | + display: block; | |
| 637 | + margin-top: 6px; | |
| 638 | + font-size: 12px; | |
| 639 | + font-weight: 500; | |
| 640 | + color: #475569; | |
| 641 | + } | |
| 642 | + | |
| 643 | + /* La règle ci-dessus (display:block) écraserait l'attribut [hidden] sans | |
| 644 | + cette override (cf. même pattern que .ai-topup-lock). */ | |
| 645 | + .ai-price-billed[hidden] { | |
| 646 | + display: none !important; | |
| 647 | + } | |
| 648 | + | |
| 649 | + #credit-purchase-card .ai-credit-pack-persona { | |
| 650 | + text-align: center; | |
| 651 | + max-width: 420px; | |
| 652 | + margin-left: auto; | |
| 653 | + margin-right: auto; | |
| 654 | + margin-bottom: 8px; | |
| 655 | + } | |
| 656 | + | |
| 437 | 657 | .ai-plan-card-wrapper { |
| 438 | 658 | position: relative; |
| 439 | 659 | } |
| 440 | 660 | |
| @@ -488,13 +708,21 @@ | ||
| 488 | 708 | font-size: 11px; |
| 489 | 709 | font-weight: 600; |
| 490 | 710 | text-transform: uppercase; |
| 491 | 711 | letter-spacing: 0.6px; |
| 712 | + line-height: 1.2; | |
| 713 | + max-width: calc(100% - 36px); | |
| 714 | + box-sizing: border-box; | |
| 492 | 715 | } |
| 493 | 716 | |
| 494 | 717 | .ai-plan-badge-popular { |
| 495 | 718 | background: rgba(79, 70, 229, 0.12); |
| 496 | 719 | color: #4338ca; |
| 720 | + top: 14px; | |
| 721 | + right: 14px; | |
| 722 | + font-size: 10px; | |
| 723 | + padding: 5px 10px; | |
| 724 | + letter-spacing: 0.4px; | |
| 497 | 725 | } |
| 498 | 726 | |
| 499 | 727 | /* Plan Colors */ |
| 500 | 728 | .ai-plan-essential { |
| @@ -529,8 +757,18 @@ | ||
| 529 | 757 | margin: 0 0 6px 0; |
| 530 | 758 | color: #0f172a; |
| 531 | 759 | } |
| 532 | 760 | |
| 761 | + .ai-plan-persona { | |
| 762 | + margin: 0; | |
| 763 | + font-size: 13px; | |
| 764 | + line-height: 1.5; | |
| 765 | + color: #64748b; | |
| 766 | + max-width: 300px; | |
| 767 | + margin-left: auto; | |
| 768 | + margin-right: auto; | |
| 769 | + } | |
| 770 | + | |
| 533 | 771 | .ai-plan-price { |
| 534 | 772 | display: flex; |
| 535 | 773 | align-items: baseline; |
| 536 | 774 | justify-content: center; |
| @@ -690,8 +928,336 @@ | ||
| 690 | 928 | |
| 691 | 929 | .ai-plan-badge { |
| 692 | 930 | font-size: 10px; |
| 693 | 931 | padding: 4px 8px; |
| 932 | + } | |
| 933 | + } | |
| 934 | + | |
| 935 | + /* ============================================================== */ | |
| 936 | + /* One-time top-up (custom amount) */ | |
| 937 | + /* ============================================================== */ | |
| 938 | + .ai-topup-card { | |
| 939 | + position: relative; | |
| 940 | + background: #ffffff; | |
| 941 | + border-radius: 16px; | |
| 942 | + padding: 32px; | |
| 943 | + box-shadow: 0 18px 30px rgba(15, 23, 42, 0.07); | |
| 944 | + border: 1px solid #e4e8ef; | |
| 945 | + overflow: hidden; | |
| 946 | + transition: box-shadow 0.3s ease, transform 0.3s ease; | |
| 947 | + } | |
| 948 | + | |
| 949 | + .ai-topup-card::before { | |
| 950 | + content: ''; | |
| 951 | + position: absolute; | |
| 952 | + top: 0; | |
| 953 | + left: 16px; | |
| 954 | + right: 16px; | |
| 955 | + height: 3px; | |
| 956 | + border-radius: 999px; | |
| 957 | + background: linear-gradient(90deg, #4f46e5, rgba(79, 70, 229, 0.1)); | |
| 958 | + } | |
| 959 | + | |
| 960 | + .ai-topup-card[data-locked="true"] .ai-topup-body { | |
| 961 | + filter: blur(2px) grayscale(0.2); | |
| 962 | + opacity: 0.55; | |
| 963 | + pointer-events: none; | |
| 964 | + user-select: none; | |
| 965 | + } | |
| 966 | + | |
| 967 | + .ai-topup-lock { | |
| 968 | + position: absolute; | |
| 969 | + inset: 0; | |
| 970 | + z-index: 2; | |
| 971 | + display: flex; | |
| 972 | + flex-direction: column; | |
| 973 | + align-items: center; | |
| 974 | + justify-content: center; | |
| 975 | + gap: 14px; | |
| 976 | + padding: 32px; | |
| 977 | + text-align: center; | |
| 978 | + background: rgba(255, 255, 255, 0.72); | |
| 979 | + backdrop-filter: blur(2px); | |
| 980 | + -webkit-backdrop-filter: blur(2px); | |
| 981 | + } | |
| 982 | + | |
| 983 | + /* La règle .ai-topup-lock (display:flex) a une spécificité plus forte que | |
| 984 | + [hidden] (qui applique display:none via l'UA stylesheet). Sans cette | |
| 985 | + règle, lockOverlay.hidden = true ne masquerait pas l'overlay. */ | |
| 986 | + .ai-topup-lock[hidden] { | |
| 987 | + display: none !important; | |
| 988 | + } | |
| 989 | + | |
| 990 | + .ai-topup-lock-icon { | |
| 991 | + width: 56px; | |
| 992 | + height: 56px; | |
| 993 | + border-radius: 50%; | |
| 994 | + display: flex; | |
| 995 | + align-items: center; | |
| 996 | + justify-content: center; | |
| 997 | + background: rgba(79, 70, 229, 0.12); | |
| 998 | + color: #4338ca; | |
| 999 | + border: 1px solid rgba(79, 70, 229, 0.2); | |
| 1000 | + } | |
| 1001 | + | |
| 1002 | + .ai-topup-lock-text h3 { | |
| 1003 | + margin: 0 0 6px 0; | |
| 1004 | + font-size: 18px; | |
| 1005 | + font-weight: 600; | |
| 1006 | + color: #0f172a; | |
| 1007 | + } | |
| 1008 | + | |
| 1009 | + .ai-topup-lock-text p { | |
| 1010 | + margin: 0; | |
| 1011 | + font-size: 14px; | |
| 1012 | + color: #475569; | |
| 1013 | + max-width: 420px; | |
| 1014 | + line-height: 1.5; | |
| 1015 | + } | |
| 1016 | + | |
| 1017 | + .ai-topup-header { | |
| 1018 | + display: flex; | |
| 1019 | + align-items: center; | |
| 1020 | + gap: 14px; | |
| 1021 | + margin-bottom: 24px; | |
| 1022 | + } | |
| 1023 | + | |
| 1024 | + .ai-topup-header-icon { | |
| 1025 | + flex-shrink: 0; | |
| 1026 | + width: 44px; | |
| 1027 | + height: 44px; | |
| 1028 | + border-radius: 12px; | |
| 1029 | + display: flex; | |
| 1030 | + align-items: center; | |
| 1031 | + justify-content: center; | |
| 1032 | + background: rgba(79, 70, 229, 0.12); | |
| 1033 | + color: #4338ca; | |
| 1034 | + border: 1px solid rgba(79, 70, 229, 0.2); | |
| 1035 | + } | |
| 1036 | + | |
| 1037 | + .ai-topup-header-text h3 { | |
| 1038 | + margin: 0 0 2px 0; | |
| 1039 | + font-size: 18px; | |
| 1040 | + font-weight: 600; | |
| 1041 | + color: #0f172a; | |
| 1042 | + } | |
| 1043 | + | |
| 1044 | + .ai-topup-header-text p { | |
| 1045 | + margin: 0; | |
| 1046 | + font-size: 13px; | |
| 1047 | + color: #64748b; | |
| 1048 | + } | |
| 1049 | + | |
| 1050 | + .ai-topup-header-text strong { | |
| 1051 | + color: #0f172a; | |
| 1052 | + font-weight: 600; | |
| 1053 | + } | |
| 1054 | + | |
| 1055 | + .ai-topup-grid { | |
| 1056 | + display: grid; | |
| 1057 | + grid-template-columns: 1.2fr 1fr; | |
| 1058 | + gap: 28px; | |
| 1059 | + align-items: stretch; | |
| 1060 | + } | |
| 1061 | + | |
| 1062 | + .ai-topup-input-group { | |
| 1063 | + display: flex; | |
| 1064 | + flex-direction: column; | |
| 1065 | + gap: 12px; | |
| 1066 | + } | |
| 1067 | + | |
| 1068 | + .ai-topup-label { | |
| 1069 | + font-size: 13px; | |
| 1070 | + font-weight: 600; | |
| 1071 | + color: #334155; | |
| 1072 | + letter-spacing: 0.2px; | |
| 1073 | + } | |
| 1074 | + | |
| 1075 | + .ai-topup-amount-wrapper { | |
| 1076 | + position: relative; | |
| 1077 | + display: flex; | |
| 1078 | + align-items: center; | |
| 1079 | + background: #f8fafc; | |
| 1080 | + border: 1px solid #e2e8f0; | |
| 1081 | + border-radius: 12px; | |
| 1082 | + transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; | |
| 1083 | + } | |
| 1084 | + | |
| 1085 | + .ai-topup-amount-wrapper:focus-within { | |
| 1086 | + border-color: #4f46e5; | |
| 1087 | + background: #ffffff; | |
| 1088 | + box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12); | |
| 1089 | + } | |
| 1090 | + | |
| 1091 | + .ai-topup-amount-wrapper.has-error { | |
| 1092 | + border-color: #ef4444; | |
| 1093 | + box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); | |
| 1094 | + } | |
| 1095 | + | |
| 1096 | + .ai-topup-currency { | |
| 1097 | + padding: 0 14px 0 18px; | |
| 1098 | + font-size: 24px; | |
| 1099 | + font-weight: 600; | |
| 1100 | + color: #64748b; | |
| 1101 | + } | |
| 1102 | + | |
| 1103 | + .ai-topup-amount-input { | |
| 1104 | + flex: 1; | |
| 1105 | + width: 100%; | |
| 1106 | + border: none; | |
| 1107 | + background: transparent; | |
| 1108 | + padding: 16px 18px 16px 0; | |
| 1109 | + font-size: 28px; | |
| 1110 | + font-weight: 600; | |
| 1111 | + color: #0f172a; | |
| 1112 | + outline: none; | |
| 1113 | + -moz-appearance: textfield; | |
| 1114 | + } | |
| 1115 | + | |
| 1116 | + .ai-topup-amount-input::-webkit-outer-spin-button, | |
| 1117 | + .ai-topup-amount-input::-webkit-inner-spin-button { | |
| 1118 | + -webkit-appearance: none; | |
| 1119 | + margin: 0; | |
| 1120 | + } | |
| 1121 | + | |
| 1122 | + .ai-topup-range-info { | |
| 1123 | + margin: 0; | |
| 1124 | + font-size: 12px; | |
| 1125 | + color: #94a3b8; | |
| 1126 | + } | |
| 1127 | + | |
| 1128 | + .ai-topup-range-info strong { | |
| 1129 | + color: #475569; | |
| 1130 | + font-weight: 600; | |
| 1131 | + } | |
| 1132 | + | |
| 1133 | + .ai-topup-presets { | |
| 1134 | + display: flex; | |
| 1135 | + flex-wrap: wrap; | |
| 1136 | + gap: 8px; | |
| 1137 | + margin-top: 4px; | |
| 1138 | + } | |
| 1139 | + | |
| 1140 | + .ai-topup-preset { | |
| 1141 | + appearance: none; | |
| 1142 | + border: 1px solid #e2e8f0; | |
| 1143 | + background: #ffffff; | |
| 1144 | + color: #475569; | |
| 1145 | + padding: 8px 14px; | |
| 1146 | + border-radius: 999px; | |
| 1147 | + font-size: 13px; | |
| 1148 | + font-weight: 600; | |
| 1149 | + cursor: pointer; | |
| 1150 | + transition: all 0.2s ease; | |
| 1151 | + } | |
| 1152 | + | |
| 1153 | + .ai-topup-preset:hover { | |
| 1154 | + border-color: #4f46e5; | |
| 1155 | + color: #4338ca; | |
| 1156 | + background: rgba(79, 70, 229, 0.06); | |
| 1157 | + } | |
| 1158 | + | |
| 1159 | + .ai-topup-preset.is-active { | |
| 1160 | + border-color: #4f46e5; | |
| 1161 | + background: rgba(79, 70, 229, 0.1); | |
| 1162 | + color: #4338ca; | |
| 1163 | + } | |
| 1164 | + | |
| 1165 | + .ai-topup-error { | |
| 1166 | + margin: 0; | |
| 1167 | + min-height: 18px; | |
| 1168 | + font-size: 12px; | |
| 1169 | + color: #dc2626; | |
| 1170 | + font-weight: 500; | |
| 1171 | + } | |
| 1172 | + | |
| 1173 | + .ai-topup-summary { | |
| 1174 | + display: flex; | |
| 1175 | + flex-direction: column; | |
| 1176 | + gap: 12px; | |
| 1177 | + background: linear-gradient(160deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.05)); | |
| 1178 | + border: 1px solid rgba(79, 70, 229, 0.15); | |
| 1179 | + border-radius: 14px; | |
| 1180 | + padding: 22px; | |
| 1181 | + } | |
| 1182 | + | |
| 1183 | + .ai-topup-summary-row { | |
| 1184 | + display: flex; | |
| 1185 | + align-items: baseline; | |
| 1186 | + justify-content: space-between; | |
| 1187 | + gap: 12px; | |
| 1188 | + } | |
| 1189 | + | |
| 1190 | + .ai-topup-summary-label { | |
| 1191 | + font-size: 13px; | |
| 1192 | + color: #64748b; | |
| 1193 | + font-weight: 500; | |
| 1194 | + } | |
| 1195 | + | |
| 1196 | + .ai-topup-summary-value { | |
| 1197 | + font-size: 22px; | |
| 1198 | + font-weight: 700; | |
| 1199 | + color: #0f172a; | |
| 1200 | + } | |
| 1201 | + | |
| 1202 | + .ai-topup-summary-credits .ai-topup-summary-value { | |
| 1203 | + color: #4338ca; | |
| 1204 | + font-size: 26px; | |
| 1205 | + } | |
| 1206 | + | |
| 1207 | + .ai-topup-summary-arrow { | |
| 1208 | + display: flex; | |
| 1209 | + justify-content: center; | |
| 1210 | + color: #94a3b8; | |
| 1211 | + } | |
| 1212 | + | |
| 1213 | + .ai-topup-btn { | |
| 1214 | + margin-top: 6px; | |
| 1215 | + padding: 14px 22px; | |
| 1216 | + font-size: 15px; | |
| 1217 | + font-weight: 600; | |
| 1218 | + width: 100%; | |
| 1219 | + display: inline-flex; | |
| 1220 | + align-items: center; | |
| 1221 | + justify-content: center; | |
| 1222 | + gap: 8px; | |
| 1223 | + } | |
| 1224 | + | |
| 1225 | + .ai-topup-btn:disabled { | |
| 1226 | + opacity: 0.6; | |
| 1227 | + cursor: not-allowed; | |
| 1228 | + } | |
| 1229 | + | |
| 1230 | + .ai-topup-hint { | |
| 1231 | + margin: 0; | |
| 1232 | + font-size: 12px; | |
| 1233 | + color: #64748b; | |
| 1234 | + text-align: center; | |
| 1235 | + line-height: 1.4; | |
| 1236 | + } | |
| 1237 | + | |
| 1238 | + @media (max-width: 768px) { | |
| 1239 | + .ai-topup-card { | |
| 1240 | + padding: 24px; | |
| 1241 | + } | |
| 1242 | + | |
| 1243 | + .ai-topup-grid { | |
| 1244 | + grid-template-columns: 1fr; | |
| 1245 | + gap: 20px; | |
| 1246 | + } | |
| 1247 | + | |
| 1248 | + .ai-topup-amount-input { | |
| 1249 | + font-size: 24px; | |
| 1250 | + padding: 14px 14px 14px 0; | |
| 1251 | + } | |
| 1252 | + | |
| 1253 | + .ai-topup-currency { | |
| 1254 | + font-size: 20px; | |
| 1255 | + padding: 0 10px 0 14px; | |
| 1256 | + } | |
| 1257 | + | |
| 1258 | + .ai-topup-summary-credits .ai-topup-summary-value { | |
| 1259 | + font-size: 22px; | |
| 694 | 1260 | } |
| 695 | 1261 | } |
| 696 | 1262 | |
| 697 | 1263 | /* Animation for loading states */ |
