/* WhatsApp Store Theme: Bike Booking
   Folder: public/whatsapp-store-themes/bike-booking
   Keep this theme's custom CSS here so every store theme stays separate. */

body.whatsapp-store-theme-bike-booking {
    --wa-green: #101417;
    --wa-bright: #ffc400;
    background: #101417;
    color: #0d1115;
}

body.whatsapp-store-theme-bike-booking .app-shell {
    background: #fff;
}

body.whatsapp-store-theme-bike-booking .phone-header {
    background:
        radial-gradient(circle at 76% -18%, rgba(255, 196, 0, .14), transparent 34%),
        radial-gradient(circle at 10% 20%, rgba(255, 196, 0, .10), transparent 28%),
        linear-gradient(135deg, #101417 0%, #171c20 58%, #080b0e 100%);
    border-bottom: 1px solid rgba(255, 196, 0, .12);
}

body.whatsapp-store-theme-bike-booking .phone-header::after,
body.whatsapp-store-theme-bike-booking .sale-card::after,
body.whatsapp-store-theme-bike-booking .bike-sell-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image: radial-gradient(#ffc400 1px, transparent 1px);
    background-size: 12px 12px;
}

body.whatsapp-store-theme-bike-booking .phone-header {
    position: sticky;
}

body.whatsapp-store-theme-bike-booking .brand-row {
    position: relative;
    z-index: 1;
    gap: 14px;
    padding: 22px 18px 20px;
}
body.whatsapp-store-theme-bike-booking .brand {
    flex: 1;
    min-width: 0;
}

body.whatsapp-store-theme-bike-booking .wa-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffc400;
    box-shadow: 0 0 0 4px #fff, 0 12px 24px rgba(0, 0, 0, .28);
}

body.whatsapp-store-theme-bike-booking .wa-logo svg circle {
    fill: #11171b;
}

body.whatsapp-store-theme-bike-booking .wa-logo svg path:first-of-type {
    fill: #fff;
}

body.whatsapp-store-theme-bike-booking .wa-logo svg path:last-of-type {
    fill: #ffc400;
}

body.whatsapp-store-theme-bike-booking .store-title strong {
    color: #fff;
    font-size: 21px;
}
body.whatsapp-store-theme-bike-booking .cart-badge,
body.whatsapp-store-theme-bike-booking .tag,
body.whatsapp-store-theme-bike-booking .discount {
    background: #ffc400;
    color: #101417;
}

body.whatsapp-store-theme-bike-booking .location {
    gap: 12px;
    color: #14191d;
    border-bottom: 0;
    font-weight: 760;
    box-shadow: 0 8px 22px rgba(16, 20, 23, .06);
}

body.whatsapp-store-theme-bike-booking .location svg {
    stroke: #ffc400;
    fill: #101417;
}

body.whatsapp-store-theme-bike-booking .content {
    padding: 16px 17px 104px;
}

body.whatsapp-store-theme-bike-booking .sale-card {
    aspect-ratio: 2.08 / 1;
    height: auto;
    min-height: 0;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(9, 12, 15, .94), rgba(9, 12, 15, .76) 44%, rgba(255, 196, 0, .28) 66%, rgba(255, 196, 0, .88)),
        var(--store-banner, linear-gradient(135deg, #11171b, #ffc400));
    background-size: cover;
    background-position: center right;
    box-shadow: 0 16px 30px rgba(16, 20, 23, .20);
}

body.whatsapp-store-theme-bike-booking .sale-copy {
    max-width: 66%;
    padding: 19px 18px;
}

body.whatsapp-store-theme-bike-booking .tag {
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 11px;
    text-transform: uppercase;
}

body.whatsapp-store-theme-bike-booking .sale-copy h2 {
    color: #fff;
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 31px;
    line-height: .92;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 9px 0 6px;
}

body.whatsapp-store-theme-bike-booking .sale-copy h2 span,
body.whatsapp-store-theme-bike-booking .sale-copy p b,
body.whatsapp-store-theme-bike-booking .section-title span,
body.whatsapp-store-theme-bike-booking .price,
body.whatsapp-store-theme-bike-booking .bottom-nav .active,
body.whatsapp-store-theme-bike-booking .bottom-nav .active b {
    color: #ffc400;
}

body.whatsapp-store-theme-bike-booking .sale-copy p {
    color: #fff;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.32;
}

body.whatsapp-store-theme-bike-booking .shop-btn {
    min-height: 32px;
    border-radius: 8px;
    padding: 0 13px;
    background: #ffc400;
    color: #101417;
    font-size: 12px;
    box-shadow: 0 12px 22px rgba(255, 196, 0, .24);
}

body.whatsapp-store-theme-bike-booking .hero-products {
    display: none;
}

body.whatsapp-store-theme-bike-booking .category-strip {
    gap: 13px;
    padding: 18px 2px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

body.whatsapp-store-theme-bike-booking .category-strip::-webkit-scrollbar {
    display: none;
}

body.whatsapp-store-theme-bike-booking .cat-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 50px;
    text-align: center;
    color: #101417;
}

body.whatsapp-store-theme-bike-booking .cat-icon {
    width: 50px;
    height: 50px;
    margin: 0 0 8px;
    color: #101417;
    background: #fff !important;
    border: 1px solid #e8ecef;
    box-shadow: 0 7px 18px rgba(16, 20, 23, .07);
    font-size: 10px;
    letter-spacing: .02em;
}

body.whatsapp-store-theme-bike-booking .cat-icon img {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

body.whatsapp-store-theme-bike-booking .cat-link:first-child .cat-icon {
    color: #ffc400;
    background: #171c20 !important;
    font-size: 0;
}

body.whatsapp-store-theme-bike-booking .cat-link:first-child .cat-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background:
        linear-gradient(#ffc400 0 0) left top / 10px 10px no-repeat,
        linear-gradient(#ffc400 0 0) right top / 10px 10px no-repeat,
        linear-gradient(#ffc400 0 0) left bottom / 10px 10px no-repeat,
        linear-gradient(#ffc400 0 0) right bottom / 10px 10px no-repeat;
}

body.whatsapp-store-theme-bike-booking .cat-link:first-child span:last-child {
    color: #f6b900;
    font-weight: 850;
    width: 80px;
    margin-left: 0;
    text-align: center;
    font-size: 10px;
}

body.whatsapp-store-theme-bike-booking .cat-link span:last-child {
    width: 78px;
    margin-left: 0;
    text-align: center;
    color: #11171b;
    font-size: 11px;
    font-weight: 800;
}

body.whatsapp-store-theme-bike-booking .section-head {
    margin-top: 24px;
}

body.whatsapp-store-theme-bike-booking .timer {
    color: #ffc400;
    background: #151a1e;
    box-shadow: 0 8px 18px rgba(16, 20, 23, .14);
}

body.whatsapp-store-theme-bike-booking .deal-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 3px 2px 14px !important;
    scroll-snap-type: none !important;
}

body.whatsapp-store-theme-bike-booking .product-card {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    border: 1px solid #e7ebef;
    border-radius: 13px;
    box-shadow: 0 9px 24px rgba(16, 20, 23, .13);
}

body.whatsapp-store-theme-bike-booking .product-image {
    height: 128px;
    background: linear-gradient(180deg, #f7f8f9, #eceff2);
}

body.whatsapp-store-theme-bike-booking .product-image img {
    max-width: 100%;
    max-height: 112px;
}

body.whatsapp-store-theme-bike-booking .product-body h3 {
    min-height: 34px;
    font-size: 13px;
    font-weight: 950;
}

body.whatsapp-store-theme-bike-booking .product-body p {
    color: #11171b;
    font-size: 12px;
    font-weight: 700;
}

body.whatsapp-store-theme-bike-booking .mrp {
    color: #8b949e;
}

body.whatsapp-store-theme-bike-booking .rating {
    color: #5f6871;
}

body.whatsapp-store-theme-bike-booking .add-cart {
    border: 0;
    border-radius: 7px;
    background: #151a1e;
    color: #fff;
    padding: 9px 5px;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .08);
}

body.whatsapp-store-theme-bike-booking .bike-sell-banner {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    margin: 22px 0 8px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(circle at 76% 50%, rgba(255, 196, 0, .88), transparent 28%),
        linear-gradient(110deg, #101417 0%, #161c21 58%, #ffc400 100%);
    box-shadow: 0 14px 26px rgba(16, 20, 23, .18);
}

body.whatsapp-store-theme-bike-booking .bike-sell-banner div {
    position: relative;
    z-index: 1;
    width: 58%;
    padding: 17px;
}

body.whatsapp-store-theme-bike-booking .bike-sell-banner p {
    margin: 0 0 5px;
    color: #ffc400;
    font-size: 13px;
    font-style: italic;
    font-weight: 900;
}

body.whatsapp-store-theme-bike-booking .bike-sell-banner h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.08;
    font-weight: 950;
}

body.whatsapp-store-theme-bike-booking .bike-sell-banner span {
    display: block;
    margin: 6px 0 10px;
    font-size: 12px;
    font-weight: 750;
}

body.whatsapp-store-theme-bike-booking .top-cat {
    border-radius: 9px;
    background: #f3f4f6;
}

body.whatsapp-store-theme-bike-booking .top-cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.whatsapp-store-theme-bike-booking .top-cat .thumb {
    height: 54px;
    color: #101417;
    background: linear-gradient(180deg, #fff, #edf0f2);
    font-size: 11px;
    font-weight: 950;
}

body.whatsapp-store-theme-bike-booking .top-cat img {
    width: 68%;
    height: 68%;
    object-fit: contain;
}

body.whatsapp-store-theme-bike-booking .bottom-nav {
    width: min(398px, calc(100vw - 32px));
    bottom: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    background: #151a1e;
    color: #fff;
    box-shadow: 0 16px 30px rgba(16, 20, 23, .28);
}

body.whatsapp-store-theme-bike-booking .bottom-nav a,
body.whatsapp-store-theme-bike-booking .bottom-nav button,
body.whatsapp-store-theme-bike-booking .bottom-nav b {
    color: #aeb6bf;
}

body.whatsapp-store-theme-bike-booking .bottom-nav button:nth-child(3) {
    transform: translateY(-18px);
}

body.whatsapp-store-theme-bike-booking .bottom-nav button:nth-child(3) b {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-top: -18px;
    border-radius: 50%;
    background: #ffc400;
    color: #fff;
    font-size: 10px;
    box-shadow: 0 12px 22px rgba(255, 196, 0, .30);
}

@media (max-width: 360px) {
    body.whatsapp-store-theme-bike-booking .sale-copy h2 {
        font-size: 23px;
    }

    body.whatsapp-store-theme-bike-booking .product-card {
        flex-basis: 138px;
    }
}
