/**
 * Product Card Styles - Unified Card System
 * Mobile-first CSS for ProductDetail components
 * Uses theme variables for B2B/B2C support
 */

/* ============================================
   Card Design System - Global Variables
   ============================================ */
:root {
    /* Product Card Variables */
    --product-card-spacing: 16px;
    --product-card-touch-target: 44px;
    --product-card-border-radius: 8px;
    --product-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --product-card-image-size: 300px;
    /* Card System Variables */
    --card-bg: #ffffff;
    --card-border: #e0e0e0;
    --card-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --card-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --card-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
    --card-padding-mobile: 16px;
    --card-padding-tablet: 20px;
    --card-padding-desktop: 24px;
    --card-margin-bottom: 12px;
    --card-header-border: 1px solid #e0e0e0;
    --card-header-padding-bottom: 12px;
    --card-header-margin-bottom: 12px;
}

/* ============================================
   Base Card Class - Reusable
   ============================================ */
.card-base {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--product-card-border-radius);
    padding: var(--card-padding-mobile);
    margin-bottom: var(--card-margin-bottom);
    box-shadow: var(--card-shadow-sm);
    transition: box-shadow 0.3s ease;
}

    .card-base:hover {
        box-shadow: var(--card-shadow-md);
    }

.card-base__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--card-header-margin-bottom);
    padding-bottom: var(--card-header-padding-bottom);
    border-bottom: var(--card-header-border);
}

.card-base__icon {
    color: var(--brand-color);
    font-size: 20px;
}

.card-base__title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* ============================================
   Product Detail Container
   ============================================ */
.product-detail-container {
    width: 98%;
    max-width: 98%;
    min-height: 100vh;
    /* Dynamic viewport height where the engine has it: on mobile the two differ by the browser chrome,
       and 100vh alone left the column taller than what the shopper could actually see. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/*
   A product with no related items, promotion or description leaves the column shorter than the screen,
   and that gap is what used to show as a blank strip between the last card and the bar. The last card
   before the bar takes it instead, so the layout ends where the screen does.

   The bar is always the last child -- it renders even with no product, as .cart-action-bar--hidden --
   so the one before it is whichever section actually drew something. When the content is already
   taller than the screen there is no free space and this does nothing.
*/
.product-detail-container > :nth-last-child(2) {
    flex-grow: 1;
}

.product-detail-container--loading,
.product-detail-container--error {
    padding: 2rem;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
}

.product-detail-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--brand-color);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.error-icon {
    font-size: 3rem;
    color: #dc3545;
}

/* ============================================
   Product Header (Gallery + Price)
   ============================================ */
.product-header {
    /* Inherits card-base styles */
}

/* Gallery Section */
.product-card__gallery {
    position: relative;
    width: 100%;
    background-color: #f8f9fa;
    border-radius: var(--product-card-border-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.product-card__gallery-container {
    position: relative;
    width: 100%;
    max-width: var(--product-card-image-size);
    aspect-ratio: 1 / 1;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    margin: 0 auto;
}

.product-card__gallery-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .product-card__image:active {
        transform: scale(0.98);
    }

.product-card__image--placeholder {
    opacity: 0.5;
}

/* Video Styles */
.product-card__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    background-color: #000;
    border-radius: var(--product-card-border-radius);
}

    /* stylelint-disable-next-line property-no-vendor-prefix, selector-pseudo-element-no-unknown */
    .product-card__video::-webkit-media-controls-fullscreen-button {
        display: none !important;
    }

    /* stylelint-disable-next-line property-no-vendor-prefix, selector-pseudo-element-no-unknown */
    .product-card__video::-webkit-media-controls-overflow-button {
        display: none !important;
    }

/* Gallery Navigation Buttons */
.product-card__gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}

    .product-card__gallery-nav:hover:not(:disabled) {
        background-color: rgba(0, 0, 0, 0.7);
        transform: translateY(-50%) scale(1.1);
    }

    .product-card__gallery-nav:active:not(:disabled) {
        transform: translateY(-50%) scale(0.95);
    }

    .product-card__gallery-nav:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

.product-card__gallery-nav--prev {
    left: 12px;
}

.product-card__gallery-nav--next {
    right: 12px;
}

.product-card__gallery-nav i {
    font-size: 1.25rem;
}

/* Gallery Indicators (Dots) */
.product-card__gallery-indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.product-card__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .product-card__indicator:hover {
        background-color: rgba(255, 255, 255, 0.7);
    }

.product-card__indicator--active {
    background-color: #fff;
    width: 24px;
    border-radius: 4px;
}

/*
   Price Section

   A wrapping flex row, not a two-column layout: every block takes a full line, so the discount badge
   keeps the whole card width to push itself against, and only the sale price line gives room to the
   favourite and share buttons beside it. Were the buttons a column of their own, they would take their
   width off every line above them and the badge would stop short of the edge the buttons reached.
*/
.product-card__price-section {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 5px;
}

.product-card__price-section > * {
    flex: 1 1 100%;
    min-width: 0;
}

/* The one line that is shared. It shrinks to its content so the buttons fit beside it, and when the
   ally badge and the price leave no room the buttons wrap to a line of their own, still right-aligned. */
.product-card__price-section > .product-card__price-container--inline {
    flex: 1 1 auto;
}

.product-card__price-section > .product-header__actions {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Last in the layout whatever its place in the markup, which is before the buttons. */
.product-card__price-section > .product-card__price-points {
    order: 1;
}

.product-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-header__action-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: #666;
    font-size: 1.125rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.product-header__action-btn:active {
    transform: scale(0.95);
}

.product-header__action-btn:disabled {
    cursor: default;
}

.product-card__auth-required {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: var(--product-card-border-radius);
    color: #6c757d;
    font-size: 0.875rem;
}

    .product-card__auth-required i {
        font-size: 1.125rem;
    }

.product-card__price-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.product-card__price-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
}

.product-card__price--discounted {
    color: var(--brand-color);
}

.product-card__price--original {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
}

.product-card__discount-badge {
    background-color: #dc3545;
    color: var(--brand-text-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: auto;
}

.product-card__discount-badge-targeted-offer {
    background-color: #DAA520;
    color: var(--brand-text-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: auto;
    position: relative;
    overflow: visible;
}

.product-card__discount-badge-targeted-offer .discount-badge__targeted-offer-crown {
    position: absolute;
    top: -16px;
    left: -10px;
    width: 26px;
    height: 26px;
    object-fit: contain;
    transform: rotate(300deg);
    pointer-events: none;
    z-index: 10;
}

.product-card__ally-badge {
    color: var(--brand-text-color);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
}

.product-card__points-badge {
    color: var(--brand-text-color);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    display: flex;
    width: fit-content;
    margin-top: 8px;
    /* Accumulation rate labels ("Por $5.000 obtienes 1 punto") wrap to two lines;
       justify-content only centers the text block, so the lines need text-align. */
    text-align: center;
}

.product-card__points-badge--accumulated {
    background-color: var(--brand-color);
    color: #ffffff;
}

.product-card__points-badge--redeemed {
    background-color: var(--points-redemption-badge-color);
    color: #ffffff;
}

/* ============================================
   Product Description
   ============================================ */
.product-description {
    /* Inherits card-base styles */
}

.product-card-header__title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.product-card-header__description {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   ProductCardInfoLabels
   ============================================ */
.product-card-info {
    /* Inherits card-base styles */
}

.product-card-info__labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.product-card-info__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    width: 100%;
    justify-content: flex-start;
}

.product-card-info__icon {
    color: #333;
    font-size: 18px;
    min-width: 24px;
    text-align: center;
}

.product-card-info__label {
    font-weight: 400;
    color: #666;
    white-space: nowrap;
}

.product-card-info__value {
    font-weight: 700;
    color: #666;
    text-align: right;
}

/* Info Labels - Sold Out State */
.product-card-info__icon--out {
    color: #dc3545;
}

.product-card-info__label--out {
    color: #dc3545;
}

.product-card-info__value--out {
    font-weight: 700;
    color: #dc3545;
}

/* ============================================
   ProductCardSuggestedPrice
   ============================================ */
.product-card-suggested {
    margin-bottom: var(--card-margin-bottom);
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

    .product-card-suggested .suggested-price-calculator {
        width: 100%;
        box-sizing: border-box;
    }

    .product-card-suggested input,
    .product-card-suggested button,
    .product-card-suggested .profit-margin-control__button {
        min-height: var(--product-card-touch-target);
        min-width: var(--product-card-touch-target);
    }

        .product-card-suggested input[type="number"],
        .product-card-suggested input[type="range"] {
            font-size: 1rem;
        }

/* ============================================
   Video Fullscreen Button
   ============================================ */
.product-card__video-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.product-card__fullscreen-btn {
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1.4;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .product-card__fullscreen-btn:active {
        background: rgba(0, 0, 0, 0.85);
    }

/* ============================================
   Placeholders (Phase 2)
   ============================================ */
.suggested-promotion-placeholder,
.related-products-placeholder {
    /* Inherits card-base styles */
    text-align: center;
    color: #666;
    font-style: italic;
}

/* ============================================
   Responsive - Tablet (768px+)
   ============================================ */
@media (min-width: 768px) {
    :root {
        --product-card-image-size: 350px;
    }

    .card-base {
        padding: var(--card-padding-tablet);
    }

    .card-base__icon {
        font-size: 22px;
    }

    .card-base__title {
        font-size: 17px;
    }

    .product-card__gallery-container {
        aspect-ratio: 4 / 3;
    }

    .product-card-header__title {
        font-size: 20px;
    }

    .product-card-header__description {
        font-size: 15px;
    }

    .product-card-info__item {
        font-size: 15px;
    }

    .product-card-info__icon {
        font-size: 20px;
        min-width: 28px;
    }
}

/* ============================================
   Responsive - Desktop (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    :root {
        --product-card-image-size: 400px;
    }

    .card-base {
        padding: var(--card-padding-desktop);
    }

    .card-base__icon {
        font-size: 24px;
    }

    .card-base__title {
        font-size: 18px;
    }

    .product-card-header__title {
        font-size: 22px;
    }
}