/* BRAND UPSELL */
/*
 * Brand Upsell Section Styles
 * Design philosophy:
 * - Card-based layout with subtle shadows for visual hierarchy
 * - Mobile-first responsive design with breakpoints at 768px and 480px
 * - Flexbox for efficient product row layout (image, price, button)
 * - Minimalist white cards against varied backgrounds
 * - Consistent spacing and typography for readability
 */

/* Reset margins for consistent spacing */
.woocommerce div.product div.summary .upsell-section p,
.upsell-section p { margin: 0; }

/* Upsell Section */
.upsell-section {
    clear: both;
    margin: 0 auto;
    max-width: var(--aoptimize-content-narrow-width, 750px);
}
.upsell-title { font-size: 1.25rem; color: #333; margin: 0 0 1rem 0 !important; }

/* Product Cards */
.upsell-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    border: 1px solid #f0f0f0;
}

/* Product Title */
.upsell-product-title {
    font-size: 1rem;
    color: #333;
    margin: 0 0 0.75rem 0 !important;
    line-height: 1.3;
}
.upsell-product-title a { color: inherit; text-decoration: none; }
.upsell-product-title a:hover { color: #333; text-decoration: underline; }

/* Product Row (Image + Price + Button) */
.upsell-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

/* Product Image */
.upsell-image {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
}
.upsell-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* Product Price */
.upsell-price {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    flex: 1;
}

/* Add to Cart Button */
.upsell-add-to-cart {
    flex-shrink: 0;
    margin-left: auto;
}
.upsell-add-to-cart * { white-space: nowrap; }

/* Brand Section */
.brand-title {
    font-size: 1.125rem;
    color: #333;
    margin: 0 0 0.75rem 0;
}
.brand-section p:not(.brand-title) {
    color: #666;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.read-more {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}
.read-more:hover { text-decoration: underline; }

/* Tablet Responsive (768px and below)
 * Reduces font sizes and spacing for medium screens
 * Maintains readability while optimizing screen real estate
 */
@media (max-width: 768px) {
    .upsell-title { font-size: 1.125rem; margin-bottom: 0.875rem; }
    .upsell-card { margin-bottom: 0.875rem; }
    .upsell-row { gap: 0.75rem; flex-wrap: wrap; }
    .upsell-image { width: 4.375rem; height: 4.375rem; }
    .upsell-product-title { font-size: 0.875rem; margin-bottom: 0.625rem; }
    .upsell-price { font-size: 0.875rem; }
    .brand-title { font-size: 1rem; }
    .upsell-add-to-cart { width: 100%; margin-left: 0; margin-top: 0.5rem; }
}

/* Mobile Responsive (480px and below)
 * Further reduces sizes for small mobile devices
 * Ensures all content remains accessible and tappable on small screens
 */
@media (max-width: 480px) {
    .upsell-row { gap: 0.625rem; }
    .upsell-image { width: 3.75rem; height: 3.75rem; }
    .upsell-product-title { font-size: 0.8125rem; }
    .upsell-price { font-size: 0.8125rem; }
    .brand-title { font-size: 0.875rem; }
    .upsell-add-to-cart form { width: 100%; }
    .upsell-add-to-cart .form-add-to-cart-submit { width: 100% !important; margin: 0 !important; }
}

/* SIMILAR BUBBLES */
/* Container for all similar products */
.similar-products-container {
    margin: 20px 0;
}

/* Flexbox layout for product bubbles */
.product-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Individual product bubble styling */
.product-bubble {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;           /* Makes the image circular */
    overflow: hidden;             /* Clips image to circle */
    border: 2px solid #ddd;
    transition: transform 0.2s ease;
    text-decoration: none;
}

/* Hover effect - bubble grows and border changes color */
.product-bubble:hover {
    transform: scale(1.1);
    border-color: #007cba;
}

/* Ensure images fill the circular container */
.product-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* Crop image to fit circle */
}

/* Mobile responsive - smaller bubbles on mobile */
@media (max-width: 768px) {
    .product-bubbles {
        gap: 10px;
    }

    .product-bubble {
        width: 50px;
        height: 50px;
    }
}

/* PAYMENT METHODS */
/* ===== Payment Methods Display Styles ===== */

/* Container for payment methods section */
.product__payment-methods {
    margin: 15px 0 20px 0;  /* Spacing: after button, before description */
}

/* Section heading "Betalingsmuligheder" */
.product__payment-methods p {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #333;
}

/* Flexbox container for payment icons */
.payment-methods {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;       /* Allows wrapping on smaller screens */
    gap: 8px;              /* Consistent spacing between icons */
}

/* Individual payment icon styling */
.payment-methods img {
    height: 1.8rem;        /* Consistent height for all icons */
    width: auto;           /* Maintains aspect ratio */
}

/* STOCK INDICATOR */
/* ===== Stock Indicator Styles ===== */

/* Green dot indicator (12px circle) */
.stock-dot {
    width: 12px;
    height: 12px;
    background-color: #4CAF50;  /* Green - indicates availability */
    border-radius: 50%;          /* Makes it circular */
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
}

/* "På lager" text */
.stock-text {
    font-weight: 500;
    color: #333;
    vertical-align: middle;
}

/* EXTERNAL BUTTON */
/* Custom button styling for external/affiliate products
 * Design philosophy: Clean, minimalist, high-contrast for maximum visibility
 * Inverted hover state provides clear interaction feedback
 */
.form-add-to-cart-submit {
    display: inline-block !important;
    background: white !important;             /* White background for contrast */
    color: black !important;                  /* Black text for readability */
    border: 2px solid black !important;       /* Strong border for definition */
    padding: .5rem 1rem !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-align: center !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;     /* "KØB NU" - emphasis and consistency */
    letter-spacing: 1px !important;           /* Improved readability at uppercase */
    box-shadow: none !important;              /* Flat design, no depth effects */
    animation: aopt-btn-pop 0.35s ease-out 0.5s both !important;
    border-radius: 0 !important;              /* Sharp corners match minimalist aesthetic */
    min-width: 150px !important;              /* Consistent button size across products */
    margin: .5rem .5rem .5rem 0 !important;
}

/* Hover effect: Color inversion + badge-style pop animation */
.form-add-to-cart-submit:hover {
    background: black !important;             /* Inverted: black background */
    color: white !important;                  /* Inverted: white text */
    animation: aopt-btn-hover 0.35s ease-out !important;
}

/* Badge-style pop animations (matching hero badge) */
@keyframes aopt-btn-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes aopt-btn-hover {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}