:root{--primary-color:#ea2a33;--secondary-color:#fd8080;--button-color:#74a0b4;--accent-color:#89d2f7;--background-color:#fcf8f8;--text-color:#202020}body{font-family:var(--font-family-alt);background-color:var(--background-color);color:var(--text-color);margin:0}*{box-sizing:border-box}.app{color:var(--text-color);background-color:var(--background-color);min-height:100vh;font-family:Arial,sans-serif}.content{flex-direction:column;min-height:90vh;display:flex}
.promotion-banner{color:#fff;text-align:center;background-color:#202020;width:100%;padding:.5rem 1rem;font-size:.9rem;position:relative;overflow:hidden}.promotion-banner .promotion-content{transition:opacity .5s;display:inline-block}.promotion-banner .promotion-content.fade-in{opacity:1}.promotion-banner .promotion-content.fade-out{opacity:0}.promotion-banner .promotion-content .small-menu a{color:#fd8080;margin:0 .25rem;text-decoration:none}.promotion-banner .promotion-content .small-menu a:hover{text-decoration:underline}
:root{--primary-color:#ea2a33;--secondary-color:#fd8080;--button-color:#74a0b4;--accent-color:#89d2f7;--background-color:#fcf8f8;--text-color:#202020}.email-popup-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.email-popup{text-align:center;background:#fff;border-radius:12px;width:90%;max-width:400px;padding:2rem;position:relative}.close-button{color:#000;cursor:pointer;background:0 0;border:none;font-size:1.5rem;position:absolute;top:.5rem;right:.5rem}.input-wrapper input{border:1px solid #ccc;border-radius:6px;width:100%;margin-bottom:1rem;padding:.5rem}.button-wrapper button{color:#fff;cursor:pointer;background-color:#74a0b4;border:none;border-radius:6px;width:11rem;padding:.5rem 1rem}.button-wrapper button:disabled{opacity:.6;cursor:not-allowed}.message{color:#763124;margin-top:1rem}.disclaimer{color:#666;margin-top:1rem;font-size:.8rem}
.header .top .actions>:nth-child(3){margin-left:1rem}.header .top .actions>:nth-child(2){margin-bottom:2px;margin-left:.3rem}.header .top .actions>:first-child{margin-left:.3rem}.header .top .actions>:first-child .material-symbols-outlined:hover{color:var(--primary-color)}.header{background:#fff;border-bottom:1px solid #eee;flex-direction:column;width:100%;display:flex}.header .top{background-color:var(--background-color);justify-content:space-between;align-items:center;padding:.5rem 2rem;font-size:14px;display:flex}.header .top .actions{gap:0;display:flex}.header .top .actions a,.header .top .actions .account-link{color:var(--text-color);cursor:pointer;align-items:center;gap:.25rem;text-decoration:none;display:flex}.header .top .actions a:hover,.header .top .actions .account-link:hover{color:var(--primary-color)}.header .top .actions .account-wrapper{position:relative}.header .top .actions .account-wrapper .arrow{font-size:1.2rem;transition:transform .3s}.header .top .actions .account-wrapper .account-popup{opacity:0;visibility:hidden;z-index:50;background-color:#fff;border:1px solid #ccc;border-radius:6px;min-width:180px;margin-top:.25rem;transition:all .3s;position:absolute;top:100%;right:0;transform:translateY(-10px);box-shadow:0 4px 8px #0000001a}.header .top .actions .account-wrapper .account-popup.open{opacity:1;visibility:visible;transform:translateY(0)}.header .top .actions .account-wrapper .account-popup .popup-item{cursor:pointer;color:var(--text-color);padding:.75rem 1rem;font-size:.9rem}.header .top .actions .account-wrapper .account-popup .popup-item:hover{background-color:var(--primary-color);color:#fff}.header .top .actions .notifications-wrapper{position:relative}.header .top .actions .notifications-wrapper .notifications-circle{color:#ea2a33;background-color:#fff;border:2px solid #ea2a33;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;margin-right:.5rem;font-size:14px;display:flex;position:absolute;top:-5px;right:-5px;transform:translateY(5px)}.header .top .actions .notifications-wrapper .notifications-popup{z-index:10;background-color:#fff;border:1px solid #ccc;border-radius:4px;width:max-content;max-height:300px;padding:1rem;position:absolute;top:calc(100% + 5px);left:auto;right:0;overflow-y:auto;transform:none;box-shadow:0 4px 6px #0000001a}@media (max-width:490px){.header .top .actions .notifications-wrapper .notifications-popup{left:0}}.header .top .actions .notifications-wrapper .notifications-popup .notifications-title{border-bottom:1px solid #eee;padding:10px;font-size:16px;font-weight:700}.header .top .actions .notifications-wrapper .notifications-popup .notification-item{border-bottom:1px solid #eee;justify-content:space-between;align-items:center;padding:8px 10px;display:flex}.header .top .actions .notifications-wrapper .notifications-popup .notification-item:last-child{border-bottom:none}.header .top .actions .notifications-wrapper .notifications-popup .notification-time{color:#888;font-size:12px}.header .middle{justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.header .middle .logo{text-shadow:0 1px #70383866;color:inherit;align-items:center;gap:4px;font-family:monospace;font-size:1.2rem;font-weight:400;text-decoration:none;display:flex}.header .middle .logo .logo-icon{width:38px;height:38px}@media (max-width:768px){.header .top{padding:.2rem .5rem 0 0}.header .middle{padding:.7rem .2rem}.header .middle .logo{text-align:center;text-shadow:none;padding-left:5px;font-size:.65rem;display:inline}.header .middle .search-bar{min-width:none;padding-left:.4rem;padding-right:.5rem}.header .middle .search-bar input{width:fit-content;padding-right:2rem}}
.nav-container{justify-content:flex-end;align-items:center;padding:1rem 1.5rem;display:flex;position:relative}.nav-menu{color:var(--text-color);gap:1.5rem;font-size:.875rem;font-weight:500;display:flex}.nav-menu a{color:var(--text-color);text-decoration:none;transition:color .3s}.nav-menu a:hover{color:var(--primary-color)}.menu-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:space-between;width:22px;height:16px;padding:0;display:none}.menu-toggle span{background:var(--text-color);border-radius:2px;height:2px;transition:all .3s;display:block}.menu-toggle.active span:first-child{transform:rotate(45deg)translate(3px,4px)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:rotate(-45deg)translate(3px,-4px)}@media (max-width:768px){.menu-toggle{display:flex}.nav-menu{background:#fff;border-radius:10px;flex-direction:column;align-items:flex-start;padding:1rem 1.5rem;animation:.3s fadeIn;display:none;position:absolute;top:60px;left:1rem;box-shadow:0 4px 8px #0000001a}.nav-menu.open{z-index:1000;display:flex}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.search-bar{width:100%;padding-left:1rem;padding-right:1rem;display:flex;position:relative}.search-bar input{border:1px solid #ccc;border-radius:9999px;outline:none;flex:1;width:100%;padding:.75rem 1rem;font-size:.9rem}.search-bar input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #007bff33}@media (max-width:768px){.search-bar input{padding-right:3rem}}.search-bar button{background:var(--primary-color);cursor:pointer;border:none;border-radius:9999px;justify-content:center;align-items:center;min-width:4rem;margin-top:0;margin-left:1rem;padding:0 1rem;transition:background .2s;display:flex}@media (max-width:490px){.search-bar button{min-width:.9rem}}.search-bar button span.material-symbols-outlined{color:#fff;font-size:1.2rem}.search-bar button:hover{background:red}@media (max-width:768px){.search-bar button{border-radius:0 9999px 9999px 0;justify-content:center;align-items:center;height:100%;padding:0 .75rem;display:flex;position:absolute;bottom:0;right:0}}.search-bar-container{width:100%;max-width:700px;margin:0 auto;position:relative}.autocomplete-list{z-index:1000;background:#fff;border:1px solid #ddd;border-radius:.5rem;max-height:250px;position:absolute;top:2rem;left:2rem;right:7rem;overflow-y:auto;box-shadow:0 4px 12px #0000001a}@media (max-width:1024px) and (min-width:491px){.autocomplete-list{left:1rem;right:4rem}}@media (max-width:490px){.autocomplete-list{left:1rem;right:1rem}}.autocomplete-list li{cursor:pointer;justify-content:space-between;padding:.5rem .75rem;font-size:.9rem;display:flex}.autocomplete-list li:hover,.autocomplete-list li.highlighted{background:#f0f0f0}.autocomplete-list li .book-title{font-weight:700}.autocomplete-list li .book-author{color:#666;margin-left:.25rem;font-style:italic}
.cart-icon{color:inherit;align-items:center;gap:.5rem;text-decoration:none;transition:color .3s;display:flex}.cart-icon:hover{color:var(--primary-color)}.cart-icon .count{background-color:var(--primary-color);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;font-size:.75rem;font-weight:700;display:flex}@media (max-width:768px){.cart-icon{gap:.1rem;margin-right:3px;padding-left:4px}.cart-icon .material-symbols-outlined{font-size:20px}}
:root{--primary-color:#ea2a33;--secondary-color:#fd8080;--button-color:#74a0b4;--accent-color:#89d2f7;--background-color:#fcf8f8;--text-color:#202020}.signin-popup-container{z-index:1000;background-color:#20202080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.signin-popup-container .progress-bar{background:#89d2f7;width:100%;height:4px;animation:.5s linear progress;position:absolute;top:0;left:0}@keyframes progress{0%{width:0}to{width:100%}}.signin-popup-container .signin-popup{text-align:center;background:#fcf8f8;border-radius:8px;flex-direction:column;gap:20px;width:450px;max-width:90%;padding:40px 50px;display:flex;position:relative;box-shadow:0 6px 15px #20202040}.signin-popup-container .signin-popup .close-btn{cursor:pointer;color:#202020;background:0 0;border:none;font-size:20px;position:absolute;top:10px;right:10px}.signin-popup-container .signin-popup .popup-title{color:#202020;margin-bottom:20px;font-size:24px;font-weight:700}.signin-popup-container .signin-popup form{flex-direction:column;gap:12px;display:flex}.signin-popup-container .signin-popup form .input-group{flex-direction:column;gap:4px;display:flex}.signin-popup-container .signin-popup form .input-group input{color:#202020;border:1px solid #ccc;border-radius:4px;width:100%;padding:12px;font-size:14px}.signin-popup-container .signin-popup form .input-group input::placeholder{color:#aaa}.signin-popup-container .signin-popup form .input-group input:focus{border-color:#000;outline:none}.signin-popup-container .signin-popup form .input-group .error{color:red;text-align:left;font-size:12px}.signin-popup-container .signin-popup form .server-error{color:red;font-size:.8rem}.signin-popup-container .signin-popup form .bottom-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.signin-popup-container .signin-popup form .bottom-row .forgot-link{color:#202020;cursor:pointer;font-size:12px;text-decoration:underline;display:inline-block}.signin-popup-container .signin-popup form .bottom-row .forgot-link:hover{color:#070707}.signin-popup-container .signin-popup form .bottom-row .account-info{flex-shrink:1;align-items:center;gap:5px;display:flex}.signin-popup-container .signin-popup form .bottom-row .account-info .no-account-text{color:gray;font-size:12px}.signin-popup-container .signin-popup form .bottom-row .account-info .signup-link{color:#202020;cursor:pointer;font-size:12px;font-weight:700}.signin-popup-container .signin-popup form .success{color:green}.signin-popup-container .signin-popup form .signin-btn{color:#fff;cursor:pointer;background:#89d2f7;border:none;border-radius:4px;padding:12px;font-size:16px}.signin-popup-container .signin-popup form .signin-btn:hover{background:#59c0f4}.signin-popup-container .signin-popup form .create-account-btn{color:#fd8080;cursor:pointer;background:0 0;border:none;margin-top:10px;font-size:14px;font-weight:700;text-decoration:underline}.signin-popup-container .signin-popup form .create-account-btn:hover{color:#fc4e4e}.signin-popup-container .signin-popup .divider{text-align:center;color:#888;align-items:center;margin:20px 0;display:flex}.signin-popup-container .signin-popup .divider span{background:#fcf8f8;padding:0 10px;font-size:12px}.signin-popup-container .signin-popup .divider:before,.signin-popup-container .signin-popup .divider:after{content:"";background:#ccc;flex:1;height:1px}.signin-popup-container .signin-popup .social-login{justify-content:center;gap:20px;margin-bottom:10px;display:flex}.signin-popup-container .signin-popup .social-login .social-icon{cursor:pointer;width:50px;height:50px;color:inherit;background:0 0;border:2px solid;border-radius:50%;justify-content:center;align-items:center;font-size:24px;transition:transform .2s,background .2s;display:flex}.signin-popup-container .signin-popup .social-login .social-icon.google{color:#db4437;border-color:#db4437}.signin-popup-container .signin-popup .social-login .social-icon.google:hover{background:#db44371a;transform:scale(1.1)}.signin-popup-container .signin-popup .social-login .social-icon.facebook{color:#4267b2;border-color:#4267b2}.signin-popup-container .signin-popup .social-login .social-icon.facebook:hover{background:#4267b21a;transform:scale(1.1)}.signin-popup-container .signin-popup .terms-row{color:gray;text-align:center;margin-top:15px;font-size:12px}.signin-popup-container .signin-popup .terms-row a{color:#fd8080;text-decoration:none}.signin-popup-container .signin-popup .terms-row a:hover{text-decoration:underline}@media (max-width:500px){.signin-popup{width:90%;padding:25px}.social-login{gap:15px}}