/* ==========================================================
   Easy Shoppers Trend
   Main Stylesheet
   Version: 2.0
   Compatible: HostGator, Chrome, Firefox, Edge, Safari
========================================================== */

/* ==========================================================
   CSS RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.6;
    color:#222;
    background:#f8f9fb;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
    border:none;
}

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#f59e0b;

    --success:#10b981;
    --danger:#ef4444;
    --warning:#f59e0b;

    --white:#ffffff;
    --black:#111827;

    --gray-50:#f9fafb;
    --gray-100:#f3f4f6;
    --gray-200:#e5e7eb;
    --gray-300:#d1d5db;
    --gray-500:#6b7280;
    --gray-700:#374151;
    --gray-900:#111827;

    --radius:10px;

    --shadow:
        0 10px 25px rgba(0,0,0,.08);

    --transition:
        all .30s ease;

    --container:1280px;
}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:92%;
    max-width:var(--container);
    margin:auto;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,h2,h3,h4{

    color:var(--gray-900);
    line-height:1.25;

}

h1{

    font-size:3rem;
    margin-bottom:20px;

}

h2{

    font-size:2.1rem;
    margin-bottom:15px;

}

h3{

    font-size:1.3rem;

}

p{

    color:var(--gray-700);

}

/* ==========================================================
   COMMON SECTION
========================================================== */

section{

    padding:70px 0;

}

.gray-bg{

    background:#f2f5f8;

}

.section-title{

    text-align:center;
    margin-bottom:45px;

}

.section-title p{

    max-width:700px;
    margin:auto;

}

/* ==========================================================
   BUTTONS
========================================================== */

.primary-btn{

    display:inline-block;

    padding:14px 30px;

    background:var(--primary);

    color:#fff;

    border-radius:var(--radius);

    transition:var(--transition);

    font-weight:bold;

}

.primary-btn:hover{

    background:var(--primary-dark);

}

.secondary-btn{

    display:inline-block;

    padding:14px 28px;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:var(--radius);

    transition:var(--transition);

}

.secondary-btn:hover{

    background:var(--primary);

    color:#fff;

}

/* ==========================================================
   HEADER
========================================================== */

.top-header{

    position:sticky;

    top:0;

    z-index:999;

    background:#fff;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.top-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:82px;

}

.logo a{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:48px;

}

.logo span{

    font-size:1.4rem;

    font-weight:bold;

    color:var(--primary);

}

/* ==========================================================
   NAVIGATION
========================================================== */

#mainNav ul{

    display:flex;

    gap:25px;

}

#mainNav a{

    font-weight:600;

    transition:var(--transition);

}

#mainNav a:hover{

    color:var(--primary);

}

/* ==========================================================
   HEADER RIGHT
========================================================== */

.header-right{

    display:flex;

    align-items:center;

    gap:14px;

}

#searchForm{

    display:flex;

    background:#fff;

    border:1px solid var(--gray-300);

    border-radius:40px;

    overflow:hidden;

}

#searchInput{

    border:none;

    outline:none;

    width:220px;

    padding:11px 16px;

}

#searchForm button{

    background:var(--primary);

    color:#fff;

    padding:0 18px;

}

#regionSelector{

    padding:10px;

    border-radius:8px;

    border:1px solid var(--gray-300);

}

/* ==========================================================
   CART
========================================================== */

.cart-icon{

    position:relative;

    font-size:1.3rem;

}

#cartCount{

    position:absolute;

    top:-8px;

    right:-10px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--danger);

    color:#fff;

    font-size:.70rem;

    display:flex;

    align-items:center;

    justify-content:center;

}

.login-btn,
.register-btn{

    padding:10px 18px;

    border-radius:8px;

    font-weight:600;

}

.login-btn{

    border:1px solid var(--primary);

    color:var(--primary);

}

.register-btn{

    background:var(--primary);

    color:#fff;

}

#menuToggle{

    display:none;

    background:none;

    font-size:1.4rem;

}


/* ==========================================================
   HERO SECTION
========================================================== */

.hero{

    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #ffffff
    );

}

.hero-flex{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

.hero-left{

    flex:1;

}

.hero-left p{

    font-size:1.15rem;

    max-width:600px;

    margin-bottom:30px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    margin-bottom:40px;

}


.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

}

.hero-right img{

    max-width:520px;

    animation:floatBook 4s infinite ease-in-out;

}


@keyframes floatBook{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }

}


/* ==========================================================
   HERO STATS
========================================================== */

.hero-stats{

    display:flex;

    gap:25px;

}

.hero-stats div{

    background:#fff;

    padding:18px 25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    text-align:center;

}

.hero-stats h2{

    color:var(--primary);

    margin:0;

    font-size:1.8rem;

}

.hero-stats p{

    margin:0;

    font-size:.9rem;

}


/* ==========================================================
   CATEGORY SECTION
========================================================== */

.category-grid{

    display:grid;

    grid-template-columns:
    repeat(6,1fr);

    gap:20px;

}


.category-card{

    background:#fff;

    padding:25px 15px;

    text-align:center;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.category-card i{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:15px;

}


.category-card h3{

    font-size:1rem;

}


.category-card:hover{

    transform:translateY(-8px);

}


/* ==========================================================
   PROMO STRIP
========================================================== */

.promo-strip{

    background:var(--primary);

    padding:25px 0;

}


.promo-content{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    color:#fff;

}


.promo-content i{

    font-size:1.5rem;

}


.promo-content span{

    color:#fff;

    font-weight:600;

}


/* ==========================================================
   BOOK GRID
========================================================== */

.book-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}


/* ==========================================================
   BOOK CARD
========================================================== */

.book-card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

    position:relative;

}


.book-card:hover{

    transform:translateY(-8px);

}


.book-image{

    height:260px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f3f4f6;

}


.book-image img{

    height:100%;

    object-fit:contain;

}


.book-content{

    padding:20px;

}


.book-title{

    font-size:1.1rem;

    font-weight:bold;

    min-height:55px;

}


.book-author{

    color:var(--gray-500);

    font-size:.9rem;

    margin:8px 0;

}


.book-rating{

    color:#fbbf24;

    margin-bottom:10px;

}


.book-price{

    font-size:1.2rem;

    font-weight:bold;

    color:var(--primary);

}


.book-actions{

    display:flex;

    gap:10px;

    margin-top:15px;

}


.book-actions button,
.book-actions a{

    flex:1;

    padding:10px;

    border-radius:8px;

    text-align:center;

    font-size:.9rem;

}


/* ==========================================================
   BOOK SKELETON LOADING
========================================================== */

.book-skeleton{

    height:360px;

    border-radius:var(--radius);

    background:

    linear-gradient(
        90deg,
        #eeeeee 25%,
        #f8f8f8 37%,
        #eeeeee 63%
    );

    background-size:400% 100%;

    animation:skeleton 1.5s infinite;

}


@keyframes skeleton{

    0%{

        background-position:100% 0;

    }


    100%{

        background-position:-100% 0;

    }

}


/* ==========================================================
   WHY CHOOSE US
========================================================== */

.feature-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}


.feature-card{

    background:#fff;

    padding:30px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow);

}


.feature-card i{

    font-size:2.5rem;

    color:var(--primary);

    margin-bottom:15px;

}


/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter{

    background:#eef6ff;

}


.newsletter-box{

    text-align:center;

    max-width:750px;

    margin:auto;

}


.newsletter-box form{

    display:flex;

    gap:10px;

    justify-content:center;

    margin-top:25px;

}


.newsletter-box input{

    flex:1;

    max-width:400px;

    padding:14px;

    border:1px solid var(--gray-300);

    border-radius:8px;

}



/* ==========================================================
   FEATURED AUTHORS
========================================================== */

.author-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}


.author-card{

    background:#fff;

    padding:25px;

    text-align:center;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.author-card:hover{

    transform:translateY(-6px);

}


.author-card img{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    margin:0 auto 15px;

}


.author-card h3{

    margin-bottom:5px;

}


.author-card p{

    color:var(--gray-500);

}


/* ==========================================================
   READER REVIEWS
========================================================== */

.review-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:25px;

}


.review-card{

    background:#fff;

    padding:25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


.review-user{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:15px;

}


.review-user img{

    width:50px;

    height:50px;

    border-radius:50%;

}


.review-stars{

    color:#f59e0b;

}


.review-text{

    font-style:italic;

    color:var(--gray-700);

}


.review-skeleton{

    height:220px;

    border-radius:var(--radius);

    background:#eee;

    animation:skeleton 1.5s infinite;

}


/* ==========================================================
   READING STATISTICS
========================================================== */

.reading-stats{

    background:var(--primary);

}


.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}


.stat-box{

    text-align:center;

    color:#fff;

}


.stat-box h2{

    color:#fff;

    font-size:2.5rem;

}


.stat-box span{

    color:#fff;

}


/* ==========================================================
   FAQ SECTION
========================================================== */

.faq-list{

    max-width:900px;

    margin:auto;

}


.faq-item{

    background:#fff;

    margin-bottom:15px;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

}


.faq-question{

    width:100%;

    text-align:left;

    padding:20px;

    background:#fff;

    font-weight:bold;

    display:flex;

    justify-content:space-between;

}


.faq-question::after{

    content:"+";

    font-size:1.5rem;

}


.faq-question.active::after{

    content:"-";

}


.faq-answer{

    padding:0 20px 20px;

    display:none;

}


.faq-answer.show{

    display:block;

}


/* ==========================================================
   CTA BANNER
========================================================== */

.cta-banner{

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #1e40af
    );

    color:#fff;

}


.cta-content{

    text-align:center;

}


.cta-content h2{

    color:#fff;

}


.cta-content p{

    color:#fff;

    max-width:700px;

    margin:15px auto 30px;

}


.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}


/* ==========================================================
   CATALOG TOOLBAR
========================================================== */

.catalog-toolbar{

    background:#fff;

    padding:20px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-bottom:35px;

}


.catalog-left{

    display:flex;

    gap:15px;

}


.catalog-toolbar select,
.catalog-toolbar input{

    padding:12px;

    border:1px solid var(--gray-300);

    border-radius:8px;

}


.catalog-right input{

    width:250px;

}


/* ==========================================================
   LOAD MORE
========================================================== */

.load-more-section{

    padding:30px 0;

    text-align:center;

}


/* ==========================================================
   PAGINATION
========================================================== */

#pagination{

    display:flex;

    justify-content:center;

    gap:10px;

}


#pagination button{

    width:40px;

    height:40px;

    border-radius:50%;

    background:#fff;

    border:1px solid var(--gray-300);

}


#pagination button.active{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   RECENT BOOKS
========================================================== */

.recent-books{

    background:#fff;

}


/* ==========================================================
   CATEGORY PILLS
========================================================== */

.category-slider{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}


.category-pill{

    background:#fff;

    padding:12px 25px;

    border-radius:30px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.category-pill:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   FEATURED DEALS
========================================================== */

.deal-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:25px;

}


.deal-card{

    background:#fff;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


.deal-badge{

    display:inline-block;

    background:var(--secondary);

    color:#fff;

    padding:6px 15px;

    border-radius:20px;

    margin-bottom:15px;

    font-size:.85rem;

}



/* ==========================================================
   AMAZON REGION INFORMATION
========================================================== */

.amazon-region-info{

    background:#fff;

}


.region-card{

    display:flex;

    align-items:center;

    gap:25px;

    background:#fff;

    padding:30px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


.region-card i{

    font-size:3rem;

    color:#ff9900;

}


/* ==========================================================
   READING QUOTES
========================================================== */

.quote-carousel{

    max-width:800px;

    margin:auto;

    text-align:center;

}


.quote-carousel blockquote{

    display:none;

    font-size:1.5rem;

    font-style:italic;

    color:var(--gray-700);

    padding:30px;

}


.quote-carousel blockquote.active{

    display:block;

}


/* ==========================================================
   MODAL
========================================================== */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.5);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:2000;

}


.modal.hidden,
.hidden{

    display:none;

}


.modal-content{

    background:#fff;

    padding:40px;

    width:90%;

    max-width:450px;

    text-align:center;

    border-radius:var(--radius);

    position:relative;

}


.close-modal{

    position:absolute;

    top:10px;

    right:15px;

    background:none;

    font-size:2rem;

}


.modal-icon{

    font-size:3rem;

    color:var(--success);

    margin-bottom:15px;

}


/* ==========================================================
   SEARCH RESULTS
========================================================== */

.search-results{

    background:#fff;

}


/* ==========================================================
   LOADING OVERLAY
========================================================== */

.loading-overlay{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.9);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    z-index:3000;

}


.loader{

    width:50px;

    height:50px;

    border-radius:50%;

    border:5px solid var(--gray-200);

    border-top-color:var(--primary);

    animation:spin 1s linear infinite;

}


@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   TOAST NOTIFICATIONS
========================================================== */

.toast-container{

    position:fixed;

    bottom:30px;

    right:30px;

    z-index:2500;

}


.toast{

    background:#111827;

    color:#fff;

    padding:15px 25px;

    border-radius:8px;

    margin-top:10px;

    animation:toastShow .3s ease;

}


@keyframes toastShow{

    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   COOKIE BANNER
========================================================== */

.cookie-banner{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    background:#111827;

    color:#fff;

    padding:20px;

    z-index:1500;

}


.cookie-content{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}


.cookie-content p{

    color:#fff;

}


.cookie-actions{

    display:flex;

    gap:10px;

}


/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top{

    position:fixed;

    bottom:90px;

    right:30px;

    width:45px;

    height:45px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:1000;

}


.back-to-top.show{

    display:flex;

}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    background:#111827;

    padding:70px 0 40px;

}


.footer-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:35px;

}


.footer-column h3{

    color:#fff;

    margin-bottom:20px;

}


.footer-column p{

    color:#d1d5db;

}


.footer-column ul li{

    margin-bottom:12px;

}


.footer-column a{

    color:#d1d5db;

    transition:.3s;

}


.footer-column a:hover{

    color:#fff;

}


.footer-social{

    display:flex;

    gap:12px;

    margin-top:20px;

}


.footer-social a{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#374151;

    border-radius:50%;

}


.footer-contact li{

    color:#d1d5db;

    display:flex;

    gap:10px;

}


/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom{

    background:#030712;

    padding:20px 0;

}


.footer-bottom-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.footer-bottom p{

    color:#d1d5db;

}


.footer-links{

    display:flex;

    gap:20px;

}


.footer-links a{

    color:#d1d5db;

}


/* ==========================================================
   NOSCRIPT
========================================================== */

.noscript-warning{

    background:#fee2e2;

    color:#991b1b;

    padding:15px;

    text-align:center;

}


/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */


/* Large Tablets */

@media(max-width:1100px){

    .category-grid{

        grid-template-columns:
        repeat(3,1fr);

    }


    .book-grid{

        grid-template-columns:
        repeat(3,1fr);

    }


    .feature-grid{

        grid-template-columns:
        repeat(2,1fr);

    }


    .author-grid{

        grid-template-columns:
        repeat(2,1fr);

    }


    .stats-grid{

        grid-template-columns:
        repeat(2,1fr);

    }


    .footer-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}



/* Tablets */

@media(max-width:900px){


    .top-header .container{

        flex-wrap:wrap;

        padding:15px 0;

    }


    #mainNav{

        order:3;

        width:100%;

        display:none;

    }


    #mainNav.active{

        display:block;

    }


    #mainNav ul{

        flex-direction:column;

        background:#fff;

        padding:20px;

        box-shadow:var(--shadow);

    }


    #menuToggle{

        display:block;

    }


    .hero-flex{

        flex-direction:column;

        text-align:center;

    }


    .hero-left p{

        margin-left:auto;

        margin-right:auto;

    }


    .hero-buttons{

        justify-content:center;

    }


    .catalog-toolbar{

        flex-direction:column;

    }


    .catalog-left{

        flex-wrap:wrap;

    }


    .deal-grid{

        grid-template-columns:1fr;

    }


    .review-grid{

        grid-template-columns:1fr;

    }


    .cookie-content{

        flex-direction:column;

        text-align:center;

    }


}


/* Mobile */

@media(max-width:600px){


    body{

        font-size:15px;

    }


    section{

        padding:45px 0;

    }


    h1{

        font-size:2rem;

    }


    h2{

        font-size:1.6rem;

    }


    .container{

        width:94%;

    }


    .logo span{

        font-size:1.1rem;

    }


    .header-right{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

    }


    #searchForm{

        width:100%;

    }


    #searchInput{

        width:100%;

    }


    .hero-stats{

        flex-direction:column;

    }


    .category-grid{

        grid-template-columns:
        repeat(2,1fr);

    }


    .book-grid{

        grid-template-columns:1fr;

    }


    .feature-grid{

        grid-template-columns:1fr;

    }


    .author-grid{

        grid-template-columns:1fr;

    }


    .stats-grid{

        grid-template-columns:1fr;

    }


    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }


    .footer-social{

        justify-content:center;

    }


    .footer-contact li{

        justify-content:center;

    }


    .footer-bottom-content{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }


    .footer-links{

        flex-direction:column;

        gap:10px;

    }


    .newsletter-box form{

        flex-direction:column;

    }


    .newsletter-box input{

        max-width:none;

    }


    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }


    .region-card{

        flex-direction:column;

        text-align:center;

    }


    .catalog-left,
    .catalog-right{

        width:100%;

    }


    .catalog-toolbar input,
    .catalog-toolbar select{

        width:100%;

    }


    .cookie-actions{

        flex-direction:column;

    }


}



/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible{

    outline:3px solid var(--secondary);

    outline-offset:3px;

}


/* Reduced Motion */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

        scroll-behavior:auto!important;

    }

}



/* ==========================================================
   PRINT
========================================================== */

@media print{


    .top-header,
    .site-footer,
    .cookie-banner,
    .back-to-top,
    .newsletter,
    button{

        display:none!important;

    }


    body{

        background:#fff;

        color:#000;

    }


}


/* ==========================================================
   END OF STYLE.CSS
========================================================== */