/* BikeBros Shop - additive styles only, reuses variables from style.css */

/* Sticky navbar cart badge (desktop icon link) */
.cart-icon-wrap {
    position: relative;
    display: inline-flex;
}

/* Sticky cart badge on the mobile bottom-nav icon specifically - just the
   icon wrapper gets position:relative, so the outer nav-item's
   flex-column icon/label stacking is left untouched. */
.mobile-nav-cart-icon {
    position: relative;
    display: inline-block;
}

.cart-badge-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Wishlist heart toggle (outline <-> filled) */
.wishlist-btn-wrap .bi-heart-fill {
    display: none;
    color: #dc3545;
}

.wishlist-btn-wrap.in-wishlist .bi-heart {
    display: none;
}

.wishlist-btn-wrap.in-wishlist .bi-heart-fill {
    display: inline-block;
}

/* Cart / wishlist page item rows */
.cart-line-item, .wishlist-line-item {
    border: 1px solid #EFEFEF;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    overflow: hidden;
}

.qty-stepper button {
    border: none;
    background: #FAFAFB;
    width: 32px;
    height: 32px;
    font-weight: 700;
}

.qty-stepper input {
    width: 44px;
    text-align: center;
    border: none;
    border-left: 1px solid #EBEBEB;
    border-right: 1px solid #EBEBEB;
    height: 32px;
}

/* Vehicle widget */
.shop-vehicle-widget {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Brand / Bike Model / Category cards */
.shop-pick-card {
    border: 1px solid #EFEFEF;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.shop-pick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--primary);
}

.shop-pick-card:active {
    transform: translateY(-1px) scale(0.99);
}

.shop-pick-logo-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-light);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.shop-pick-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.shop-pick-logo-wrap.placeholder i {
    font-size: 2rem;
    color: #C7C7C7;
}

/* Product card */
.product-card {
    border: 1px solid #EFEFEF;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

.product-thumb-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-light);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.75rem;
}

.product-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-thumb-wrap.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-thumb-wrap.placeholder i {
    font-size: 2.5rem;
    color: #C7C7C7;
}

.product-badge-row {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

.compat-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.compat-badge.compatible {
    background-color: #E8F8EE;
    color: #1E7B45;
}

.compat-badge.not-compatible {
    background-color: #FDECEC;
    color: #C62828;
}

.featured-badge {
    background-color: #121212;
    color: var(--primary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.stock-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-block;
}

.stock-pill.in-stock {
    background-color: #E8F8EE;
    color: #1E7B45;
}

.stock-pill.low-stock {
    background-color: #FFF3CD;
    color: #8A6D00;
}

.stock-pill.out-of-stock {
    background-color: #FDECEC;
    color: #C62828;
}

.product-card .ajax-cart-form .btn {
    min-height: 44px;
}

/* Card-only wishlist restyle: a quiet icon-only affordance next to the bold
   Add to Cart button, instead of a second outlined button competing for
   attention. Product Detail page's own buy box keeps the outlined square
   button (unaffected - it isn't nested in .product-card). */
.product-card .wishlist-btn-wrap .btn {
    border-color: transparent;
    background-color: transparent;
    color: #8A8A8A;
}

.product-card .wishlist-btn-wrap .btn:hover,
.product-card .wishlist-btn-wrap .btn:focus {
    background-color: var(--neutral);
    border-color: transparent;
    color: #495057;
}

.product-card .wishlist-btn-wrap.in-wishlist .btn {
    color: #dc3545;
}

/* Filter bar */
.shop-filter-bar {
    background-color: white;
    border: 1px solid #EBEBEB;
    border-radius: 14px;
}

.shop-search-input {
    background-color: #FAFAFB;
    border: 1px solid #EBEBEB;
    padding-left: 40px;
}

.shop-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #A0A0A0;
}

/* Product gallery (detail page) */
.gallery-main-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-light);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.gallery-main-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.gallery-main-wrap.zoomed img {
    transform: scale(1.8);
    cursor: zoom-out;
}

.gallery-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background-color: var(--bg-light);
    flex-shrink: 0;
}

.gallery-thumb.active {
    border-color: var(--primary);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Compatible model chip (product detail) */
.compat-model-chip {
    border: 1px solid #EBEBEB;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    background-color: white;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Empty state */
.shop-empty-state {
    text-align: center;
    padding: 4rem 1rem;
}

.shop-empty-state i {
    font-size: 3rem;
    color: #D8D8D8;
}

/* Checkout - selectable address card (modal) */
.checkout-address-option {
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.checkout-address-option:hover {
    border-color: #ffc107 !important;
}

.checkout-address-option.selected {
    border-color: #ffc107 !important;
    background-color: #fff9e6;
}

/* Order status badges (My Orders / Order Detail) */
.order-status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    color: #fff;
    height: fit-content;
}

.order-status-pending { background-color: #6c757d; }
.order-status-confirmed { background-color: #0d6efd; }
.order-status-packed { background-color: #6f42c1; }
.order-status-shipped { background-color: #0dcaf0; color: #212529; }
.order-status-delivered { background-color: #28a745; }
.order-status-cancelled { background-color: #dc3545; }
.order-status-returned { background-color: #fd7e14; }
.order-status-refunded { background-color: #20c997; }

/* Part request status badges (My Part Requests / Part Request Detail) -
   reuses .order-status-badge/.order-timeline* above; only new color
   modifiers are needed here ('cancelled' already covered above). */
.order-status-submitted { background-color: #6c757d; }
.order-status-under_review { background-color: #0d6efd; }
.order-status-searching_supplier { background-color: #6f42c1; }
.order-status-quotation_ready { background-color: #0dcaf0; color: #212529; }
.order-status-available { background-color: #28a745; }
.order-status-unavailable { background-color: #fd7e14; }
.order-status-completed { background-color: #20c997; }

/* Part request priority badge (My Part Requests / Part Request Detail) */
.priority-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.3px;
    border: 1px solid currentColor;
    height: fit-content;
}

.priority-low { color: #6c757d; }
.priority-normal { color: #0d6efd; }
.priority-high { color: #e0a800; }
.priority-urgent { color: #dc3545; }

/* Order timeline (Order Detail page) */
.order-timeline {
    padding-left: 4px;
}

.order-timeline-entry {
    position: relative;
    padding-left: 26px;
    padding-bottom: 22px;
}

.order-timeline-entry::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: -8px;
    width: 2px;
    background-color: #EBEBEB;
}

.order-timeline-entry-last::before {
    display: none;
}

.order-timeline-dot {
    position: absolute;
    left: 0;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #EBEBEB;
}

/* ---------------------------------------------------------------------
   Phase 9: Customer Engagement - Reviews & Star Ratings, Flash Sales,
   Coupon Engine. Reuses this file's existing badge/pill color language
   (see .stock-pill/.compat-badge/.featured-badge above) rather than
   introducing new ad-hoc colors.
   --------------------------------------------------------------------- */

.star-rating {
    color: var(--warning-dark, #D48806);
    letter-spacing: 1px;
    font-size: 0.9rem;
    line-height: 1;
}

.verified-purchase-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background-color: #E8F8EE;
    color: #1E7B45;
}

/* Pure-CSS star picker (review submission form) - radios declared 5->1 in
   DOM, displayed reversed via row-reverse, so each label's ~ sibling rule
   highlights itself plus every star to its visual left. */
.star-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.star-input input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-input label {
    font-size: 1.8rem;
    line-height: 1;
    color: #ddd;
    cursor: pointer;
    transition: color 0.1s ease-in-out;
}

.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
    color: var(--warning-dark, #D48806);
}

.flash-sale-badge {
    background-color: #C62828;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.flash-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #C62828;
}

.flash-sale-banner {
    background-color: #FDECEC;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}

.flash-sale-banner-badge {
    background-color: #C62828;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.coupon-applied-pill {
    background-color: #E8F8EE;
    color: #1E7B45;
    border-radius: 0.75rem;
    padding: 10px 14px;
    font-size: 0.85rem;
}

.coupon-discount-line {
    color: #1E7B45;
    font-weight: 600;
}

.coupon-code-input {
    text-transform: uppercase;
}