.baby-name-ideas-container{display:flex;flex-direction:column;padding:1.5rem;border-radius:15px;width:100%;max-width:1500px;overflow-x:hidden}.baby-name-ideas-container .names-container{padding:20px;border-radius:12px;min-height:350px;margin-bottom:1.5rem;width:100%;overflow-x:hidden}[data-theme=dark] .baby-name-ideas-container .names-container{background-color:var(--color-lightBlack)}.baby-name-ideas-container .gender{display:flex;gap:15px;margin:15px 0;flex-wrap:wrap;width:100%}.baby-name-ideas-container .gender div{padding:12px 20px;border-radius:8px;border:2px solid;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease}.baby-name-ideas-container .gender div:hover{transform:translateY(-2px)}.baby-name-ideas-container .gender div svg{font-size:1.2rem}.names-container .selected{color:#fff;box-shadow:0 4px 8px #00000026}.search-for-baby-name{width:100%;margin:20px 0}.search-input-container{position:relative;width:100%;max-width:500px}.search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:1.2rem}.search-input{width:100%;padding:12px 50px 12px 45px;border-radius:50px;border:2px solid;font-size:20px;background-color:var(--bg-color);color:var(--text-color);transition:all .2s ease}.search-input:focus{outline:none;box-shadow:0 0 0 3px #007bff1a}.search-input::placeholder{font-size:16px}.clear-search{position:absolute;top:47%;right:10px;transform:translateY(-50%);background:none;border:none;color:var(--text-color);font-size:32.5px;cursor:pointer;width:40px;height:40px}.clear-search:hover{color:#555}.saved-baby-names,.baby-names-more-filters{width:100%;max-width:500px}.saved-names-btn,.baby-names-more-filters-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 20px;border-radius:50px;background-color:transparent;border:2px solid;font-weight:600;cursor:pointer;transition:all .2s ease;color:var(--text-color)}.saved-names-btn:hover,.baby-names-more-filters-btn:hover{transform:translateY(-2px)}.saved-names-btn.active{color:#fff}.saved-icon{font-size:1.1rem}.save-name-btn{background:none;cursor:pointer;padding:5px;opacity:.7;width:auto;transition:all .2s ease}.save-name-btn .saved{animation:pulse .3s ease-in-out}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.baby-name-ideas-container .alphabet{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:20px 0;gap:8px;width:100%}.baby-name-ideas-container .alphabet-letter{font-size:18px;font-weight:700;cursor:pointer;border-radius:6px;height:40px;width:40px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.baby-name-ideas-container .alphabet-letter:hover{transform:scale(1.05)}.baby-name-ideas-container .names{display:flex;flex-wrap:wrap;margin:25px 0;gap:12px;min-height:200px;width:100%}.baby-name-ideas-container .name-item{padding:12px 15px;margin:0;font-size:min(4vw,20px);border-radius:8px;text-align:center;cursor:default;background-color:var(--bg-color);transition:all .2s ease;flex-grow:1;display:flex;align-items:center;justify-content:center}.baby-name-ideas-container .no-names-message{width:100%;text-align:center;padding:40px 0;color:#888;display:flex;align-items:center;justify-content:center;gap:10px}.baby-name-ideas-container .pagination-controls{display:flex;justify-content:center;gap:20px;margin-top:20px;width:100%}.baby-name-ideas-container .pagination-button{width:120px;padding:10px 15px;border:none;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.baby-name-ideas-container .pagination-button:disabled{opacity:.5;cursor:not-allowed}.baby-name-ideas-container .page-indicator{display:block;text-align:center;margin-top:20px;color:#777;font-size:12px}.baby-name-explainer{max-width:100%;margin:4rem auto;padding:0 1.5rem;text-align:center;overflow-x:hidden}.explainer-header h1{font-size:2.5rem;color:var(--text-color);margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.explainer-header h1 svg{color:var(--accent-color)}.subtitle{font-size:1.2rem;color:var(--text-secondary);margin-bottom:3rem;width:100%}.explainer-content{display:flex;flex-direction:column;gap:2rem;width:100%}.explainer-card{border-radius:24px;padding:2.5rem;text-align:center;box-shadow:0 8px 24px #00000014;width:100%}[data-theme=dark] .explainer-card{background:var(--color-lightBlack)}.baby-name-explainer .card-icon{width:80px;height:80px;background:var(--accent-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;color:var(--accent-color)}.explainer-card h2{color:var(--text-color);margin-bottom:1.5rem;font-size:1.8rem;word-wrap:break-word}.explainer-card p{color:var(--text-color);line-height:1.7;max-width:700px;margin:0 auto 1.5rem;word-wrap:break-word}.feature-list{list-style:none;padding:0;max-width:500px;margin:0 auto;text-align:left;width:100%}.feature-list li{margin-bottom:1rem;padding:.8rem 1.5rem;background:var(--bg-color);border-radius:50px;display:flex;align-items:center;gap:1rem;color:var(--text-color);flex-wrap:wrap}.feature-icon{color:var(--accent-color)}.feature-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;width:100%}.feature-bubble{flex:1;min-width:250px;max-width:300px;padding:2rem 1.5rem;border-radius:24px;transition:transform .3s ease}.feature-bubble:hover{transform:translateY(-8px)}.feature-bubble h3{color:var(--text-color);margin:1.2rem 0 .5rem;word-wrap:break-word}.feature-bubble p{color:var(--text-color);margin:0;font-size:.95rem;word-wrap:break-word}.bubble-icon{font-size:2rem;color:#fff;background:var(--accent-color);width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto}.boy-bubble{background:#3b849c1a;border:2px solid rgba(59,132,156,.3)}.girl-bubble{background:#ff69b41a;border:2px solid rgba(255,105,180,.3)}.neutral-bubble{background:#f4cc001a;border:2px solid rgba(244,204,0,.3)}.cta-card{background:linear-gradient(135deg,var(--color-primaryBlue) 0%,var(--color-color2) 100%);border-radius:24px;padding:3rem 2rem;text-align:center;margin-top:1rem;width:100%}.cta-card h2{color:#fff;margin-bottom:1.5rem;word-wrap:break-word}.cta-card p{color:#ffffffe6;max-width:700px;margin:0 auto 2rem;font-size:16px;word-wrap:break-word}.cta-button{background:#fff;color:var(--color-midDarkBlue);border:none;padding:10px 20px;border-radius:50px;font-weight:600;font-size:min(4vw,20px);cursor:pointer;display:inline-flex;align-items:center;gap:.25rem;transition:all .3s ease;box-shadow:0 4px 12px #00000026;max-width:50%}.cta-button:hover{transform:translateY(-3px);box-shadow:0 6px 16px #0003}.cta-button svg{font-size:1.2rem}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.filters-modal-content{display:flex;flex-direction:column;gap:1.5rem;margin:20px}.filter-section{display:flex;flex-direction:column;gap:.75rem}.filter-label{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--text-color);font-size:1rem}.filter-icon{font-size:1.1rem;color:var(--text-color);opacity:.8}.filter-select,.filter-input-small{padding:.75rem;border:2px solid rgba(0,0,0,.1);border-radius:8px;background-color:var(--bg-color);color:var(--text-color);font-size:1rem;transition:all .2s ease}[data-theme=dark] .filter-select,[data-theme=dark] .filter-input-small{border-color:#fff3;background-color:#ffffff0d}.filter-select:focus,.filter-input-small:focus{outline:none;border-color:var(--color-primaryBlue);box-shadow:0 0 0 3px #007bff1a}.filter-select{cursor:pointer}.filter-range{display:flex;align-items:center;gap:.75rem}.filter-input-small{flex:1;min-width:0}.range-separator{color:var(--text-color);font-weight:500;opacity:.7}.modal-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.1)}[data-theme=dark] .modal-actions{border-top-color:#ffffff1a}.filter-btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;border:2px solid transparent;font-size:1rem}.filter-btn-secondary{background-color:transparent;color:var(--text-color);border-color:#0003}[data-theme=dark] .filter-btn-secondary{border-color:#fff3}.filter-btn-secondary:hover{background-color:#0000000d;transform:translateY(-1px)}[data-theme=dark] .filter-btn-secondary:hover{background-color:#ffffff1a}.filter-btn-primary{color:#fff;border:none;box-shadow:0 2px 8px #00000026}.filter-btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.filter-count{font-size:.85rem}.baby-names-more-filters-btn.has-filters{color:#fff}@media (max-width: 768px){.modal-overlay{padding:.5rem}.modal-container{max-height:95vh;border-radius:12px}.modal-header,.modal-body{padding:1rem}.modal-title{font-size:1.25rem}.modal-actions{flex-direction:column;gap:.75rem}.filter-btn{width:100%;justify-content:center}.filter-range{flex-direction:column;align-items:stretch}.range-separator{text-align:center;padding:.25rem 0}}@media (max-width: 480px){.modal-overlay{padding:.25rem}.modal-header,.modal-body{padding:.75rem}.filters-modal-content{gap:1rem}.filter-section{gap:.5rem}}@media (max-width: 768px){.explainer-header h1{font-size:2rem}.explainer-card{padding:2rem 1.5rem;border-radius:20px}.feature-bubble{min-width:100%}.cta-card{padding:2rem 1.5rem}.cta-button,.search-input-container,.saved-baby-names{max-width:100%}.clear-search{top:46.5%}}@media screen and (min-width: 769px){.baby-name-ideas-container .name-item{width:20%;max-width:1000px}}@media screen and (max-width: 768px){.baby-name-ideas-container .names-container{padding:5px}.baby-name-ideas-container .name-item{width:calc(33.33% - 12px)}.baby-name-ideas-container .gender,.baby-name-ideas-container .alphabet{justify-content:center}}@media screen and (max-width: 576px){.baby-name-ideas-container{padding:1rem}.baby-name-ideas-container .name-item{width:calc(50% - 12px);font-size:16px}.baby-name-ideas-container .alphabet-letter{height:32px;width:32px;font-size:14px}.baby-name-ideas-container .gender div{padding:8px 12px;font-size:14px}.baby-name-ideas-container .alphabet{gap:4px}.saved-names-btn,.baby-names-more-filters-btn{font-size:14px;padding:8px 16px}.baby-name-explainer{padding:0 1rem}}.baby-names-loading-container{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;margin:12px 0}.baby-names-loading-text{font-size:.9rem;font-weight:500;opacity:.8}.filter-loading-indicator{display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid rgba(0,0,0,.1);margin-bottom:16px}[data-theme=dark] .filter-loading-indicator{border-bottom-color:#ffffff1a}.names.updating{opacity:.7;transition:opacity .2s ease}button:disabled{opacity:.6;cursor:not-allowed}.baby-name-ideas-container .name-item{padding:12px 15px;margin:0;font-size:min(4vw,20px);border-radius:8px;text-align:center;cursor:default;background-color:var(--bg-color);transition:all .2s ease;flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.name-content{width:100%;display:flex;flex-direction:column;gap:8px}.name-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.name-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.meaning-btn{background:none;border:none;cursor:pointer;padding:5px;opacity:.7;width:auto;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.meaning-btn:hover{opacity:1;transform:scale(1.15)}.meaning-btn svg{font-size:1rem}.name-meaning{width:100%;padding:8px 0 4px;font-size:.85rem;color:var(--text-color);opacity:.9;border-top:1px solid rgba(0,0,0,.1);animation:slideDown .2s ease-out}[data-theme=dark] .name-meaning{border-top-color:#ffffff1a}.name-meaning em{font-style:italic;color:var(--text-color)}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.save-name-btn{background:none;border:none;cursor:pointer;padding:5px;opacity:.7;width:auto;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.save-name-btn:hover{opacity:1;transform:scale(1.2)}.save-name-btn svg{font-size:1rem}@media screen and (max-width: 376px){.baby-name-ideas-container{padding:.25rem}.baby-name-ideas-container .names{gap:6px}}