:root {
    --primary-color: #ef7f1a;
    --secondary-color: #e8b50d;

    --light-bg: #fcf1e7;

    --heart-bg: #fff;

    --footer-bg-color: #371c03;
}

body {
    font-family: Poppins, sans-serif;
}

.required-field::after {
    content: " *";
    color: #dc3545;
    font-size: 22px;
}

.links.active {
    color: var(--primary-color);
}

/* ===========Home Page============ */

/* Autocomplete dropdown box */
.ui-autocomplete {
    background: white;
    border: 1px solid #e5e7eb; /* Tailwind gray-200 */
    border-radius: 8px; /* match your inputs */
    max-height: 250px;
    overflow-y: auto;
    padding: 4px 0;
    font-size: 18px;
    z-index: 1050; /* stay above other components */
}

.ui-autocomplete::-webkit-scrollbar {
    display: none;
}

/* Each item */
.swiper-slide.ui-menu-item {
    padding: 10px 14px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4rem;
    color: #374151; /* gray-700 */
    cursor: pointer;
    border-radius: 6px;
    margin: 2px 6px;
}

.ui-menu-item-wrapper {
    background-color: transparent !important;
    border: none !important;
    color: #000 !important;
}

/* Hover/active state */
.ui-menu-item:hover,
.ui-state-active {
    background: var(--light-bg); /* same as input bg */
    color: var(--primary-color) !important;
    font-weight: 500;
}

.hero-bg {
    background: linear-gradient(78deg, #fff 2.29%, #ffa757 88.17%);
    max-height: 504px;
}

.book-card-bg {
    border-radius: 16px 16px 0 0;
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(255, 242, 230, 0.26) 38%,
        rgba(255, 180, 112, 0.25) 100%
    );
}

.bookSwiperUp.swiper,
.bookSwiperDown.swiper {
    height: 500px !important;
}

.bookSwiperUp .swiper-wrapper,
.bookSwiperDown .swiper-wrapper {
    transition-timing-function: linear !important;
}

.swiper-button-next,
.swiper-button-prev {
    display: none !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--primary-color) !important;
}

.swiper-pagination-bullet {
    height: 15px !important;
    width: 15px !important;
}

.section-bg {
    background: linear-gradient(180deg, #fff 0%, #fff3e8 47.6%, #fff 100%);
}

.header-bg {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 243, 232, 0.18) 0.01%,
        rgba(255, 255, 255, 0.6) 60.58%
    );
}

.my-profile-header-bg {
    background: linear-gradient(
        180deg,
        #fff 0%,
        rgba(255, 243, 232, 0.4) 0.01%,
        #fff 100%
    );
}

.gradient-btn {
    border-radius: 10px;
    background: linear-gradient(90deg, #ef7f1a 0%, #cd711e 100%);
}

/* Bestseller  */

.bestseller-illustration {
    width: 410px;
    height: 394px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #ffeddc 0%, #fff 100%);
    position: absolute;
    bottom: 0;
    left: -205px;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sort-by option:checked {
    background-color: var(--primary-color) !important;
    color: #fff;
}

/* ========= Books page ============ */
.option:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.option.active {
    background-color: var(--light-bg);
    color: #000;
}

/* ===== About Satguru ======*/
@keyframes windFloat1 {
    0% {
        transform: translateX(-150px) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateX(50vw) translateY(-100px);
        opacity: 0.9;
    }
    100% {
        transform: translateX(110vw) translateY(150px);
        opacity: 0;
    }
}

@keyframes windFloat2 {
    0% {
        transform: translateX(15vw) translateY(-40px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateX(-50vw) translateY(320px);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-100vw) translateY(-20px);
        opacity: 0;
    }
}

@keyframes windFloat3 {
    0% {
        transform: translateX(10vw) translateY(36px);
        opacity: 0;
    }
    20% {
        transform: translateX(-30vw) translateY(200px);
        opacity: 1;
    }
    50% {
        transform: translateX(-60vw) translateY(300px);
        opacity: 0.9;
    }
    100% {
        transform: translateX(-100vw) translateY(-20px);
        opacity: 0;
    }
}

/* Assign animations to different circles */
.wind-1 {
    animation: windFloat1 12s linear infinite;
    animation-delay: 0s;
}

.wind-2 {
    animation: windFloat2 12s linear infinite;
    animation-delay: 0s;
}

.wind-3 {
    animation: windFloat3 16s linear infinite;
    animation-delay: 4s;
}

/* Account -> My Order -> Date range picker */

.daterangepicker .ranges ul li.active {
    background-color: var(--primary-color);
}

.daterangepicker .ranges ul li:hover {
    background-color: var(--primary-color);
    color: white;
}

.daterangepicker .drp-calendar .calendar-table table tbody td.active.available {
    background-color: var(--primary-color);
    color: white;
}

.daterangepicker .drp-calendar .calendar-table table tbody td.in-range {
    background-color: var(--light-bg);
}

/*Account -> My Order -> DataTables Tailwind */

.dt-container .dt-length select {
    background-color: var(--light-bg) !important;
    border: none;
}

.dt-container .dt-search input {
    border: 2px solid #00000080;
    background-color: #fff;
    color: #000;
}

.dt-container .dt-paging ul a {
    background-color: var(--light-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.dataTable {
    overflow-x: scroll;
}

.dataTable thead tr th {
    background-color: #f5f5f5;
}

.dataTable tbody tr {
    background-color: white !important;
}

.dataTable thead tr .dt-column-title {
    color: #000000cc !important;
    font-size: 18px;
}

.dataTable thead tr .dt-column-order {
    color: var(--primary-color);
}

.dataTable tbody tr.even {
    background-color: #fff;
}

/* Responsive code */

@media (max-width: 768px) {
    .ui-autocomplete {
        font-size: 14px;
    }

    .hero-bg {
        background: linear-gradient(180deg, #fff 0%, #fcf1e7 100%);
    }

    .hero-right-circle-illustration {
        width: 285px !important;
        height: 161px;
        transform: rotate(-92.236deg);
        opacity: 0.1;
    }

    .hero-left-circle-illustration {
        width: 285px;
        height: 161px;
        transform: rotate(-90deg);
    }

    .bookSwiperUp.swiper,
    .bookSwiperDown.swiper {
        height: 150px !important;
        width: 100% !important;
    }

    .swiper-pagination-bullet {
        height: 10px !important;
        width: 10px !important;
    }

    .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bestsellerBooksSwiper .swiper-slide,
    .marathiGranthSwiper .swiper-slide,
    .hindiGranthSwiper .swiper-slide,
    .kindleVersionSwiper .swiper-slide,
    .relatedBooksSwiper .swiper-slide {
        width: 80% !important;
    }

    .dt-container .dt-paging {
        margin-top: 10px;
    }

    .dataTable thead tr .dt-column-title {
        font-size: 16px;
    }
}

/* 👇 Between 1024px and 1439px → 3 columns */
@media (min-width: 1024px) and (max-width: 1439px) {
    .books-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 👇 Between 1440px and 1600px → 4 columns */
@media (min-width: 1440px) and (max-width: 1599px) {
    .books-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ========= Lazy Loading & Skeleton Loaders ============ */

/* Lazy loading images */
img[data-lazy] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img.lazy-loaded {
    opacity: 1;
}

img.lazy-error {
    opacity: 0.5;
}

/* Skeleton loader animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton-loader {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
    background-image: linear-gradient(
        90deg,
        #e0e0e0 0px,
        #f0f0f0 40px,
        #e0e0e0 80px
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    transition: opacity 0.3s ease-in-out;
}

/* Skeleton variants */
.skeleton-loader-card {
    border-radius: 16px 16px 0 0;
    width: 100%;
    height: 269px;
}

.skeleton-loader-detail {
    width: 100%;
    height: 550px;
    border-radius: 8px;
}

.skeleton-loader-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 4px;
}

.skeleton-loader-thumbnail-lg {
    width: 133px;
    height: 133px;
    border-radius: 4px;
}

.skeleton-loader-circle {
    border-radius: 50%;
}

.skeleton-loader-table {
    width: 48px;
    height: 64px;
    border-radius: 4px;
}

/* Lazy image wrapper */
.lazy-image-wrapper {
    position: relative;
    display: inline-block;
}

.lazy-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

/* Book card skeleton */
.book-card-skeleton {
    padding: 16px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.book-card-skeleton .skeleton-title {
    height: 20px;
    margin: 12px 0 8px 0;
    width: 75%;
    border-radius: 4px;
}

.book-card-skeleton .skeleton-author {
    height: 16px;
    margin-bottom: 8px;
    width: 50%;
    border-radius: 4px;
}

.book-card-skeleton .skeleton-price {
    height: 24px;
    width: 40%;
    border-radius: 4px;
}

/* Responsive skeleton loaders */
@media (max-width: 768px) {
    .skeleton-loader-card {
        height: 200px;
    }

    .skeleton-loader-detail {
        height: 300px;
    }
}

/* Image fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lazy-loaded {
    animation: fadeIn 0.3s ease-in-out;
}