@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap");.createbooks-container{min-height:100vh;width:100%;position:relative;background-image:radial-gradient(#9696964d 1px,#f0f9ff 0);background-size:20px 20px;padding:0;overflow-x:hidden;font-family:Fredoka,sans-serif}.createbooks-background{z-index:-10}.createbooks-background,.createbooks-bg-pattern{position:absolute;top:0;left:0;width:100%;height:100%}.createbooks-bg-pattern{background-image:radial-gradient(circle at 25px 25px,rgba(255,255,255,.1) 2px,transparent 0);background-size:50px 50px;z-index:-9}.createbooks-bg-gradient{background:linear-gradient(135deg,rgba(102,126,234,.8),rgba(118,75,162,.8));z-index:-8}.createbooks-bg-gradient,.floating-elements{position:absolute;top:0;left:0;width:100%;height:100%}.floating-elements{z-index:-7;pointer-events:none}.floating-bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.1);animation:float 6s ease-in-out infinite}.bubble-1{width:80px;height:80px;top:20%;left:10%;animation-delay:0s}.bubble-2{width:120px;height:120px;top:60%;right:15%;animation-delay:2s}.bubble-3{width:60px;height:60px;bottom:20%;left:20%;animation-delay:4s}@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(180deg)}}.back-button{position:fixed;top:2rem;left:2rem;width:50px;height:50px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#667eea;font-size:1.2rem;text-decoration:none;box-shadow:0 4px 15px rgba(0,0,0,.1);backdrop-filter:blur(10px);transition:all .3s ease;z-index:1000}.back-button:hover{background:rgba(255,255,255,1);transform:scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.15)}.createbooks-header{padding:4rem 2rem 2rem;display:flex;flex-direction:column;align-items:center;position:relative;z-index:10;max-width:1200px;margin:0 auto}.createbooks-title{font-size:3.5rem;font-weight:700;color:white;margin-bottom:1rem;position:relative;text-shadow:0 4px 8px rgba(0,0,0,.3);line-height:1.2}.createbooks-subtitle,.createbooks-title{text-align:center;font-family:Fredoka,sans-serif}.createbooks-subtitle{font-size:1.3rem;color:rgba(255,255,255,.9);text-shadow:0 2px 4px rgba(0,0,0,.2);margin-bottom:3rem;max-width:600px;line-height:1.5}.progress-indicator{display:flex;align-items:center;justify-content:center;gap:3rem;margin-top:2rem;flex-wrap:wrap;padding:0 1rem}.progress-step{display:flex;flex-direction:column;align-items:center;gap:.75rem;position:relative;opacity:.6;transition:all .3s ease;min-width:80px}.progress-step.active{opacity:1;transform:scale(1.05)}.step-number{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;color:white;border:3px solid rgba(255,255,255,.3);transition:all .3s ease;backdrop-filter:blur(10px)}.progress-step.active .step-number{background:linear-gradient(135deg,#667eea,#764ba2);border-color:rgba(255,255,255,.8);box-shadow:0 6px 20px rgba(102,126,234,.4)}.progress-step span{font-size:.95rem;font-weight:500;color:white;text-align:center;font-family:Fredoka,sans-serif;white-space:nowrap}.steps-container{padding:2rem;max-width:1200px;margin:0 auto;position:relative;z-index:10}.step-container{background:rgba(255,255,255,.95);border-radius:24px;padding:3rem;box-shadow:0 20px 40px rgba(0,0,0,.1);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3);margin-bottom:2rem}.step-title{font-size:2.5rem;font-weight:700;color:#2d3748;margin-bottom:1rem;line-height:1.3}.step-subtitle,.step-title{text-align:center;font-family:Fredoka,sans-serif}.step-subtitle{font-size:1.1rem;color:#718096;margin-bottom:3rem;line-height:1.5;max-width:600px;margin-left:auto;margin-right:auto}.storybooks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2.5rem;margin-top:2rem;padding:0 1rem}.storybook-card{background:rgba(255,255,255,.95);border-radius:20px;overflow:hidden;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 30px rgba(0,0,0,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);position:relative}.storybook-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px rgba(0,0,0,.15);border-color:rgba(102,126,234,.3)}.book-cover{position:relative;height:390px;overflow:hidden}.cover-image{transition:transform .4s ease;border-radius:20px 20px 0 0}.storybook-card:hover .cover-image{transform:scale(1.08)}.book-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(102,126,234,.1),rgba(118,75,162,.1));display:flex;align-items:flex-start;justify-content:flex-end;padding:1rem}.book-badge{background:rgba(255,255,255,.9);color:#667eea;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;backdrop-filter:blur(10px)}.book-info{padding:2rem;text-align:center}.book-info h3{font-size:1.5rem;font-weight:700;color:#2d3748;margin-bottom:1rem;font-family:Fredoka,sans-serif;line-height:1.3}.book-info p{color:#718096;line-height:1.6;margin-bottom:2rem}.book-info p,.select-book-btn{font-size:1rem;font-family:Fredoka,sans-serif}.select-book-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;padding:1rem 2rem;border-radius:50px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;box-shadow:0 4px 15px rgba(102,126,234,.3)}.select-book-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,.4);background:linear-gradient(135deg,#5a67d8,#6b46c1)}.child-info-form{max-width:600px;margin:0 auto;padding:0 1rem}.form-group{margin-bottom:2rem}.form-group label{display:block;font-size:1rem;font-weight:600;color:#2d3748;margin-bottom:.75rem;font-family:Fredoka,sans-serif}.form-group input,.form-group select{width:100%;padding:1rem 1.5rem;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;font-family:Fredoka,sans-serif;transition:all .3s ease;background:rgba(255,255,255,.9);backdrop-filter:blur(10px)}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1);background:white}.form-row{gap:1.5rem;margin-bottom:2rem}.continue-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;padding:1.25rem 3rem;border-radius:50px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.75rem;margin:2rem auto 0;font-family:Fredoka,sans-serif;box-shadow:0 6px 20px rgba(102,126,234,.3);min-width:250px}.continue-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(102,126,234,.4);background:linear-gradient(135deg,#5a67d8,#6b46c1)}.upload-section{display:grid;grid-template-columns:1fr 1.5fr;gap:3rem;align-items:start;margin-top:2rem}.upload-guidelines{background:rgba(102,126,234,.05);border-radius:16px;padding:2rem;border:1px solid rgba(102,126,234,.1)}.upload-guidelines h3{font-size:1.3rem;font-weight:700;color:#2d3748;margin-bottom:1.5rem;font-family:Fredoka,sans-serif;display:flex;align-items:center;gap:.5rem}.upload-guidelines h3:before{content:"📋";font-size:1.5rem}.upload-guidelines ul{list-style:none;padding:0;margin:0}.upload-guidelines li{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem;font-size:.95rem;color:#4a5568;line-height:1.5;font-family:Fredoka,sans-serif}.upload-guidelines li i{color:#48bb78;margin-top:.2rem;flex-shrink:0}.upload-area{gap:1.5rem}.upload-area,.upload-dropzone{display:flex;flex-direction:column}.upload-dropzone{border:3px dashed #cbd5e0;border-radius:16px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:rgba(255,255,255,.5);backdrop-filter:blur(10px);min-height:300px;align-items:center;justify-content:center}.upload-dropzone:hover{border-color:#667eea;background:rgba(102,126,234,.05);transform:translateY(-2px)}.upload-icon{width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;color:white;font-size:2rem}.upload-dropzone h3{font-size:1.5rem;font-weight:700;color:#2d3748;margin-bottom:.5rem;font-family:Fredoka,sans-serif}.upload-dropzone p{font-size:1rem;color:#718096;margin-bottom:1rem;font-family:Fredoka,sans-serif}.upload-formats{font-size:.9rem;color:#a0aec0;font-weight:500;font-family:Fredoka,sans-serif}.image-preview-container{display:flex;flex-direction:column;gap:2rem;align-items:center}.image-preview{position:relative;width:300px;height:300px;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1);border:3px solid rgba(102,126,234,.2)}.preview-image{border-radius:16px;transition:transform .3s ease}.image-preview:hover .preview-image{transform:scale(1.05)}.preview-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.change-photo-btn{background:rgba(255,255,255,.9);color:#667eea;border:2px solid #667eea;padding:1rem 2rem;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;font-family:Fredoka,sans-serif;backdrop-filter:blur(10px)}.change-photo-btn:hover{background:#667eea;color:white;transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.3)}.generate-book-btn{background:linear-gradient(135deg,#48bb78,#38a169);color:white;border:none;padding:1rem 2.5rem;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;font-family:Fredoka,sans-serif;box-shadow:0 6px 20px rgba(72,187,120,.3);position:relative;overflow:hidden}.generate-book-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 30px rgba(72,187,120,.4);background:linear-gradient(135deg,#38a169,#2f855a)}.generate-book-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.story-phases-container{display:flex;flex-direction:column;gap:3rem;margin-top:2rem;max-width:1200px;margin-left:auto;margin-right:auto;padding:0 1rem}.story-phase-card{background:rgba(255,255,255,.95);border-radius:24px;padding:0;box-shadow:0 10px 30px rgba(0,0,0,.1);border:1px solid rgba(102,126,234,.1);transition:all .3s ease;backdrop-filter:blur(10px);overflow:hidden;max-width:600px;margin:0 auto}.story-phase-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.15);border-color:rgba(102,126,234,.2)}.phase-number{position:absolute;top:1.5rem;left:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:.75rem 1.25rem;border-radius:25px;font-size:1rem;font-weight:700;font-family:Fredoka,sans-serif;box-shadow:0 6px 20px rgba(102,126,234,.4);z-index:10;backdrop-filter:blur(10px)}.phase-content{display:flex;flex-direction:column;align-items:center;text-align:center}.phase-image{position:relative;width:100%;height:400px;overflow:hidden;border-radius:24px 24px 0 0}.phase-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.story-phase-card:hover .phase-img{transform:scale(1.05)}.phase-text{padding:2.5rem;width:100%}.phase-text h3{font-size:1.8rem;font-weight:700;color:#2d3748;margin-bottom:1.5rem;line-height:1.3}.phase-text h3,.phase-text p{font-family:Fredoka,sans-serif}.phase-text p{font-size:1.1rem;color:#4a5568;line-height:1.8;text-align:left;max-width:none}.story-actions{text-align:center;margin-top:4rem;padding:3rem 2rem;background:rgba(102,126,234,.05);border-radius:24px;border:1px solid rgba(102,126,234,.1)}.continue-to-preview-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;padding:1.5rem 4rem;border-radius:50px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:1rem;font-family:Fredoka,sans-serif;box-shadow:0 8px 25px rgba(102,126,234,.3)}.continue-to-preview-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(102,126,234,.4);background:linear-gradient(135deg,#5a67d8,#6b46c1)}.book-preview-container{display:flex;justify-content:center;align-items:center;margin-top:2rem;padding:2rem}.book-preview{display:grid;grid-template-columns:350px 1fr;gap:3rem;align-items:center;max-width:900px;width:100%}.book-cover-3d{position:relative;width:100%;height:450px;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.15);transition:all .4s ease;transform:perspective(1000px) rotateY(-5deg)}.book-cover-3d:hover{transform:perspective(1000px) rotateY(0deg) scale(1.02);box-shadow:0 25px 50px rgba(0,0,0,.2)}.generated-cover{border-radius:16px;object-fit:cover}.book-details{padding:1rem}.book-details h3{font-size:2rem;font-weight:700;color:#2d3748;margin-bottom:.5rem;font-family:Fredoka,sans-serif;line-height:1.3}.book-details p{font-size:1.1rem;color:#718096;margin-bottom:2rem;font-family:Fredoka,sans-serif}.book-specs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}.spec-item{display:flex;align-items:center;gap:.75rem;padding:1rem;background:rgba(102,126,234,.05);border-radius:12px;font-family:Fredoka,sans-serif;font-weight:500;color:#4a5568}.spec-item i{color:#667eea;font-size:1.1rem}.pricing{text-align:center;margin-bottom:2rem;padding:1.5rem;background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1));border-radius:16px;border:1px solid rgba(102,126,234,.2)}.price{font-size:2.5rem;font-weight:700;color:#2d3748;margin-bottom:.5rem}.price,.shipping{font-family:Fredoka,sans-serif}.shipping{font-size:1rem;color:#48bb78;font-weight:600}.order-now-btn{background:linear-gradient(135deg,#48bb78,#38a169);color:white;border:none;padding:1.25rem 3rem;border-radius:50px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;font-family:Fredoka,sans-serif;box-shadow:0 8px 25px rgba(72,187,120,.3)}.order-now-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(72,187,120,.4);background:linear-gradient(135deg,#38a169,#2f855a)}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(10px)}.loading-content{text-align:center;color:white;max-width:400px;padding:2rem}.loading-spinner{position:relative;width:80px;height:80px;margin:0 auto 2rem}.spinner-ring{position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite}.spinner-ring:nth-child(2){width:60px;height:60px;top:10px;left:10px;border-top-color:#764ba2;animation-duration:.8s;animation-direction:reverse}.spinner-ring:nth-child(3){width:40px;height:40px;top:20px;left:20px;border-top-color:#48bb78;animation-duration:.6s}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-content h3{font-size:1.5rem;font-weight:700;margin-bottom:1rem;font-family:Fredoka,sans-serif}.loading-content p{font-size:1rem;opacity:.9;margin-bottom:2rem;font-family:Fredoka,sans-serif}.loading-progress{width:100%;height:4px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,#667eea,#764ba2,#48bb78);border-radius:2px;animation:progress 2s ease-in-out infinite}@keyframes progress{0%{width:0}50%{width:70%}to{width:100%}}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(10px);padding:2rem}.popup-content{background:white;border-radius:24px;padding:3rem;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 25px 50px rgba(0,0,0,.2)}.popup-close{position:absolute;top:1.5rem;right:1.5rem;width:40px;height:40px;border:none;background:rgba(0,0,0,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#718096;font-size:1.2rem}.popup-close:hover{background:rgba(0,0,0,.2);color:#2d3748;transform:scale(1.1)}.order-popup h3{font-size:2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:2rem;font-family:Fredoka,sans-serif}.order-form{display:flex;flex-direction:column;gap:2rem}.form-section h4{font-size:1.2rem;font-weight:600;color:#2d3748;margin-bottom:1rem;font-family:Fredoka,sans-serif}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-row input{width:100%;padding:1rem;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;font-family:Fredoka,sans-serif;transition:all .3s ease}.form-row input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.order-summary{background:rgba(102,126,234,.05);border-radius:16px;padding:1.5rem;margin-top:1rem}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;font-family:Fredoka,sans-serif;font-weight:500}.summary-row.total{border-top:2px solid rgba(102,126,234,.2);margin-top:.5rem;padding-top:1rem;font-size:1.2rem;font-weight:700;color:#2d3748}.payment-btn{background:linear-gradient(135deg,#48bb78,#38a169);color:white;border:none;padding:1.25rem 2rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Fredoka,sans-serif;box-shadow:0 6px 20px rgba(72,187,120,.3);margin-top:1rem}.payment-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px rgba(72,187,120,.4);background:linear-gradient(135deg,#38a169,#2f855a)}.payment-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.success-popup{text-align:center}.success-icon{font-size:4rem;color:#48bb78;margin-bottom:1.5rem}.success-popup h3{font-size:2rem;font-weight:700;color:#2d3748}.success-popup h3,.success-popup p{margin-bottom:1rem;font-family:Fredoka,sans-serif}.success-popup p{font-size:1rem;color:#718096;line-height:1.6}.success-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;padding:1rem 2rem;border-radius:50px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Fredoka,sans-serif;box-shadow:0 6px 20px rgba(102,126,234,.3);margin-top:1rem}.success-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,.4);background:linear-gradient(135deg,#5a67d8,#6b46c1)}@media (max-width:1024px){.book-preview,.upload-section{grid-template-columns:1fr;gap:2rem}.book-preview{text-align:center}.story-phases-container{gap:2.5rem;padding:0 1rem}.story-phase-card{max-width:100%}.phase-image{height:350px}.phase-text{padding:2rem}.phase-text h3{font-size:1.6rem}.phase-text p{font-size:1rem}}@media (max-width:768px){.createbooks-header{padding:3rem 1rem 2rem}.createbooks-title{font-size:2.5rem}.createbooks-subtitle{font-size:1.1rem}.progress-indicator{gap:1.5rem}.step-number{width:50px;height:50px;font-size:1.1rem}.progress-step span{font-size:.85rem}.step-container{padding:2rem 1.5rem}.step-title{font-size:2rem}.storybooks-grid{grid-template-columns:1fr;padding:0}.form-row{grid-template-columns:1fr;gap:1rem}.popup-content{margin:1rem;padding:2rem}.story-phases-container{gap:2rem;padding:0 .5rem}.story-phase-card{border-radius:20px}.phase-image{height:300px;border-radius:20px 20px 0 0}.phase-number{top:1rem;left:1rem;padding:.5rem 1rem;font-size:.9rem}.phase-text{padding:1.5rem}.phase-text h3{font-size:1.4rem;margin-bottom:1rem}.phase-text p{font-size:.95rem;line-height:1.6}.story-actions{margin-top:3rem;padding:2rem 1rem}.continue-to-preview-btn{padding:1.25rem 3rem;font-size:1.1rem}}@media (max-width:480px){.createbooks-header{padding:2rem 1rem 1.5rem}.createbooks-title{font-size:2rem}.createbooks-subtitle{font-size:1rem}.steps-container{padding:1rem}.step-container{padding:1.5rem 1rem}.step-title{font-size:1.8rem}.progress-indicator{gap:1rem}.step-number{width:45px;height:45px;font-size:1rem}.progress-step span{font-size:.8rem}.story-phases-container{gap:1.5rem;padding:0 .5rem}.story-phase-card{border-radius:16px}.phase-image{height:250px;border-radius:16px 16px 0 0}.phase-number{top:.75rem;left:.75rem;padding:.5rem .75rem;font-size:.8rem}.phase-text{padding:1.25rem}.phase-text h3{font-size:1.2rem;margin-bottom:.75rem}.phase-text p{font-size:.9rem;line-height:1.5}.story-actions{margin-top:2rem;padding:1.5rem 1rem}.continue-to-preview-btn{padding:1rem 2rem;font-size:1rem}.back-button{top:1rem;left:1rem;width:45px;height:45px}}