/* src/css/style.css */
/* Tailwind is used for most styles, this is for custom additions */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

/* Sold badge styles (used on cards and product details) */
.sold-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    font-size: 0.875rem;
}
.sold-badge--very-high { background: linear-gradient(90deg,#ef4444,#f97316); }
.sold-badge--high { background: linear-gradient(90deg,#f97316,#f59e0b); }
.sold-badge--medium { background: linear-gradient(90deg,#60a5fa,#3b82f6); }
.sold-badge--none { background: #6b7280; }

/* small variant for mini cards */
.sold-badge--small { padding: 0.125rem 0.4rem; font-size: 0.75rem; left: 0.5rem; bottom: 0.5rem; }

/* Search clear button */
/* search UI removed site-wide */

/* ensure mobile sidebar sticky only on large screens */
@media (min-width: 1024px) {
    .lg-sticky { position: sticky; top: 5rem; }
}

/* Product details - responsive fixes */
/* Keep mobile-first: small screens get simplified layout and smaller typography */
@media (max-width: 640px) {
    /* Main product container: tighter padding on small screens */
    #product-details-container { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Ensure the gallery image scales and doesn't overflow */
    .product-gallery img#main-product-image {
        width: 100%;
        height: auto;
        max-height: 40vh; /* keep image visible without pushing content too far */
        object-fit: cover;
    }

    /* Thumbnails: smaller and horizontally scrollable if many */
    #thumbnail-gallery { gap: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #thumbnail-gallery img { width: 56px; height: 56px; object-fit: cover; border-radius: .375rem; }

    /* Disable sticky product-info on small screens to avoid overlap */
    .product-info { position: static !important; top: auto !important; }

    /* Tweak typography to fit mobile viewport */
    #product-name { font-size: 1.4rem; line-height: 1.1; }
    #discounted-price { font-size: 1.75rem; }
    #actual-price { font-size: 0.95rem; }

    /* Make badges smaller on mobile and avoid absolute positioning so they don't overlap content */
    .sold-badge, .sold-badge--small { font-size: 0.7rem; padding: 0.18rem 0.45rem; }
    /* On small screens place the sold badge inline under the gallery instead of absolutely positioned */
    .sold-badge { position: static !important; left: auto !important; bottom: auto !important; z-index: auto !important; display: inline-block; margin-top: 0.5rem; }

    /* Ensure CTA buttons are full-width and easy to tap */
    #messenger-link, #sticky-messenger-link { width: 100%; display: inline-block; }
    /* Coupon input + button: stack vertically on small screens to avoid overlap */
    #coupon-code-input { flex: none; width: 100%; box-sizing: border-box; }
    #coupon-code-input + #apply-coupon-btn { width: 100%; margin-left: 0 !important; margin-top: 0.5rem; transform: none !important; }
    /* also ensure the parent flex container can wrap if present */
    #coupon-code-input, #apply-coupon-btn { max-width: 100%; }

    /* Reduce spacing in product panels */
    .product-gallery, .product-info { margin-bottom: 0.75rem; }

    /* Stack the inline rating and review count below the price for better mobile layout */
    button[aria-label="Go to reviews"] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
        margin-left: 0.35rem; /* small spacing from price */
        padding: 0;
        background: transparent;
    }
    button[aria-label="Go to reviews"] i { margin-right: 0; }
    #avg-rating-inline, #review-count-inline { display: block; margin-left: 0; }
}

/* Early-bird offer badge responsive tweaks */
.early-bird {
    display: inline-block;
    vertical-align: middle;
    white-space: normal; /* allow wrapping */
    max-width: 46%;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    /* reduce size and remove rotation on very small screens */
    .early-bird {
        max-width: 100%;
        font-size: 0.68rem; /* slightly smaller */
        margin-left: 0.4rem !important;
        transform: none !important; /* undo rotate-2 on small screens */
        display: block; /* push badge to its own line if needed */
        margin-top: 0.35rem;
    }
    /* ensure the discounted price container allows wrapping */
    #discounted-price { display: inline-block; white-space: normal; }
}

@media (min-width: 641px) {
    .early-bird { max-width: 60%; }
}

/* Medium screens adjustments (tablet) */
@media (min-width: 641px) and (max-width: 1023px) {
    .product-gallery img#main-product-image { max-height: 55vh; object-fit: contain; }
    #thumbnail-gallery img { width: 64px; height: 64px; }
    #product-name { font-size: 1.8rem; }
    #discounted-price { font-size: 2.25rem; }
}

/* Price row helpers to keep discounted and actual price aligned */
.price-row { display:flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.price-row .price-values { display:flex; align-items: baseline; gap: 0.5rem; }
.price-row .price-values #actual-price { color: #9CA3AF; }
@media (max-width: 640px) {
    .price-row { align-items: flex-start; }
    .price-row .price-values { order: 0; }
    .price-row button[aria-label="Go to reviews"] { order: 1; }
}

/* Mobile nav slide animation */
#mobile-nav { transform-origin: top center; transition: transform 260ms ease, opacity 260ms ease; transform: translateY(-8%); opacity: 0; }
#mobile-nav.mobile-open { transform: translateY(0); opacity: 1; }

/* Loader overlay for product lists */
.list-loader { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.7); z-index: 20; }
.list-loader.hidden { display: none; }
.loader-dot { width:10px; height:10px; background:#3b82f6; border-radius:9999px; margin:0 6px; animation: loader-bounce 0.8s infinite ease-in-out; }
.loader-dot:nth-child(2) { animation-delay: 0.12s }
.loader-dot:nth-child(3) { animation-delay: 0.24s }
@keyframes loader-bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

.load-more-btn { display:block; margin: 1rem auto; background:#fff; border:1px solid #e5e7eb; padding:0.6rem 1rem; border-radius:0.5rem; cursor:pointer; font-weight:600 }
.load-more-btn:hover { background:#f8fafc }

/* CTA Pill styling: icon on left, centered text, nice shadow and border */
.cta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 0.9rem 1.6rem;
    border-radius: 9999px;
    box-shadow: 0 8px 18px rgba(13, 54, 116, 0.12);
    font-weight: 700;
    text-align: center;
    min-height: 56px;
    line-height: 1;
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    text-decoration: none;
}

.cta-pill:active { transform: translateY(1px); }
.cta-pill:focus { outline: none; box-shadow: 0 0 0 4px rgba(59,130,246,0.12); }

.cta-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 1.15rem;
    box-shadow: 0 4px 8px rgba(2,6,23,0.06) inset;
}

.cta-text { display: inline-block; vertical-align: middle; }

.cta-disabled { opacity: 0.75; cursor: not-allowed; filter: grayscale(0.02); }

.messenger-btn { background: linear-gradient(180deg,#2771e6,#1e61d6); color: #fff; border: 1px solid rgba(0,0,0,0.04); }
.whatsapp-btn { background: linear-gradient(180deg,#18a44a,#128c3a); color: #fff; border: 1px solid rgba(0,0,0,0.04); }

/* Mobile sticky buttons smaller, more compact */
#sticky-order-bar .sticky-btn { padding: 0.5rem 0.9rem; min-width: 64px; border-radius: 10px; }

@media (max-width: 640px) {
    .cta-pill { font-size: 16px; padding: 0.7rem 1rem; min-height: 48px; }
    .cta-icon { width:36px; height:36px; min-width:36px; }
}

/* Commitment cards: reveal details on hover */
.commit-card { overflow: hidden; position: relative; }
.commit-card .short-desc { transition: opacity 200ms ease; }
.commit-card .reveal { max-height: 0; overflow: hidden; transition: max-height 300ms ease, opacity 300ms ease, transform 300ms ease; opacity: 0; transform: translateY(-6px); }
.commit-card:hover .reveal, .commit-card:focus-within .reveal, .commit-card.group-hover\:reveal { max-height: 400px; opacity: 1; transform: translateY(0); }
.commit-card:hover .short-desc { opacity: 0.0; }

@media (min-width: 768px) {
    .commit-card .reveal { padding-left: 0.5rem; padding-right: 0.5rem; }
}