/**
 * Single Product Page Styles
 * NF Digital Shop Plugin
 * Optimized and extracted from inline styles
 */

/* =============================================
   KRITISCHER MOBILE FIX - HÖCHSTE PRIORITÄT
   ============================================= */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    *, *::before, *::after {
        max-width: 100% !important;
    }
    
    body .container,
    body [class*="container"],
    body .features-section .container,
    body .product-section .container,
    body .full-width-section .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

/* =============================================
   CSS RESET - SPECIFIC TO PRODUCT PAGE
   ============================================= */
.woocommerce div.product,
.woocommerce div.product * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.woocommerce div.product {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}

/* Hide WooCommerce default elements */
.woocommerce-product-gallery,
.summary,
.woocommerce-tabs {
    display: none !important;
}

/* =============================================
   CONTAINER
   ============================================= */
@media (min-width: 769px) {
    #nfdigital-product .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =============================================
   HEADER
   ============================================= */
.header {
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #313D4D;
}

.nav-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-btn {
    padding: 8px 16px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 0;
    text-decoration: none;
    color: #666;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: #FD8311;
    color: white;
    border-color: #FD8311;
}

/* =============================================
   PRODUCT SECTION
   ============================================= */
.product-section {
    padding: 40px 0 !important;
    margin-top: 32px !important;
}

@media (max-width: 768px) {
    .product-section {
        padding: 20px 0 !important;
        margin-top: 20px !important;
    }
}

@media (max-width: 480px) {
    .product-section {
        padding: 15px 0 !important;
        margin-top: 15px !important;
    }
}

/* Product Grid */
#nfdigital-product .product-section .container .product-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
}

#nfdigital-product .product-grid > .image-gallery,
#nfdigital-product .product-grid > .product-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#nfdigital-product .product-grid > * {
    box-sizing: border-box !important;
}

/* Mobile Grid */
@media (max-width: 768px) {
    .container,
    #nfdigital-product .container,
    .product-section .container,
    .features-section .container,
    .full-width-section .container,
    .hinweise-section .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .product-section,
    .features-section,
    .full-width-section,
    .hinweise-section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }
    
    #nfdigital-product .product-section .container .product-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    .image-gallery {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    .product-info {
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    .price {
        padding: 0 15px !important;
        margin-bottom: 20px !important;
    }
}

/* Phone specific */
@media (max-width: 480px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    .container,
    #nfdigital-product .container,
    .woocommerce .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }
}

/* =============================================
   IMAGE GALLERY
   ============================================= */
.image-gallery {
    position: sticky;
    top: 100px;
    max-width: 500px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
}

.main-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    -webkit-user-drag: none;
}

.main-image.dragging {
    cursor: grabbing;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    pointer-events: none;
    padding: 10px;
    box-sizing: border-box;
    filter: none !important;
    opacity: 1 !important;
}

.main-image:hover img {
    transform: scale(1.05);
}

/* Main Image Navigation Arrows */
.main-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(44, 85, 48, 0.8);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 0;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-nav-arrow:hover {
    background: rgba(44, 85, 48, 1);
    transform: translateY(-50%) scale(1.1);
}

.main-nav-arrow.prev {
    left: 15px;
}

.main-nav-arrow.next {
    right: 15px;
}

/* Thumbnail Container */
.thumbnail-container {
    position: relative;
}

.thumbnail-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    position: relative;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 10px 0;
}

.thumbnail-wrapper::-webkit-scrollbar {
    display: none;
}

.thumbnail-grid {
    display: flex;
    gap: 10px;
    padding: 5px;
    cursor: grab;
    user-select: none;
}

.thumbnail-grid.dragging {
    cursor: grabbing;
}

.thumbnail {
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail.active {
    border-color: #FD8311;
    box-shadow: 0 0 0 2px rgba(253, 131, 17, 0.2);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    padding: 5px;
    box-sizing: border-box;
    filter: none !important;
    opacity: 1 !important;
}

/* Thumbnail Dots */
.thumbnail-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    opacity: 1;
}

.thumbnail-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumbnail-dot.active {
    background: #FD8311;
    transform: scale(1.2);
}

.thumbnail-dot:hover {
    background: #666;
}

/* =============================================
   PRODUCT INFO
   ============================================= */
.product-info {
    padding: 0 15px;
}

.breadcrumb {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.breadcrumb a {
    color: #FD8311;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: #E57300;
    text-decoration: underline;
}

.breadcrumb span {
    color: #666;
    font-weight: 500;
}

.product-title,
h1.product-title {
    font-size: 1.8rem !important;
    font-weight: bold !important;
    color: #313D4D !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
    padding: 0 15px 5px 15px !important;
    height: auto !important;
}

.categories,
div.categories {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    padding: 0 15px !important;
}

.category-tag,
span.category-tag {
    background: #e8f5e9 !important;
    color: #313D4D !important;
    padding: 5px 12px !important;
    border-radius: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Price */
#nfdigital-product .price {
    font-size: 1.5rem !important;
    margin-bottom: 20px;
}

.price-vat-info {
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
}

/* Description */
.description {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

.description h3 {
    display: none !important;
}

.description p,
.description div {
    color: #666 !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
    text-align: left !important;
}

/* =============================================
   FORM & ADD TO CART
   ============================================= */
form.cart,
#nfdigital-product form.cart {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    display: block !important;
}

.quantity-cart-container {
    display: flex !important;
    gap: 15px !important;
    align-items: stretch !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

.quantity-selector {
    flex-shrink: 0 !important;
    width: 120px !important;
}

.quantity-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 45px !important;
}

.quantity-btn,
button.quantity-btn {
    width: 45px !important;
    height: 45px !important;
    border: 2px solid #FD8311 !important;
    background: white !important;
    background-color: white !important;
    color: #313D4D !important;
    border-radius: 0 !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
}

.quantity-btn:hover,
button.quantity-btn:hover {
    background: #FD8311 !important;
    background-color: #FD8311 !important;
    color: white !important;
}

.quantity-input,
input.quantity-input {
    width: 70px !important;
    height: 45px !important;
    border: 2px solid #ddd !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 41px !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    background: white !important;
    background-color: white !important;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.quantity-input:focus,
input.quantity-input:focus {
    outline: none !important;
    border-color: #2c5530 !important;
}

.add-to-cart {
    background: #FD8311;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1 1 auto !important;
    width: 100%;
    height: 45px;
}

.add-to-cart:hover {
    background: #313D4D !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(49, 61, 77, 0.3);
}

/* =============================================
   EXPRESS CHECKOUT
   ============================================= */
   
/* HIDE GOOGLE PAY AND APPLE PAY BUTTONS - ONLY SHOW PAYPAL */
/* WooCommerce Payments */
.wcpay-payment-request-button,
.wcpay-payment-request-button-wrapper,
.wc-payments-payment-request-button,
.wc-payments-payment-request-button-wrapper,
#payment-request-button,
.wc-payment-request-button-wrapper,
#wc-stripe-payment-request-wrapper,
#wc-stripe-payment-request-button-separator,
.wc-stripe-payment-request-button-separator,
/* Generic Google Pay / Apple Pay */
.gpay-button,
.apple-pay-button,
button[aria-label*="Google Pay"],
button[aria-label*="Apple Pay"],
button[aria-label*="GPay"],
div[id*="google-pay"],
div[id*="apple-pay"],
div[id*="gpay"],
div[class*="google-pay"],
div[class*="apple-pay"],
div[class*="gpay"],
/* Payment Method Classes */
.payment-method_stripe_googlepay,
.payment-method_stripe_applepay,
.payment_method_stripe_googlepay,
.payment_method_stripe_applepay,
/* WooCommerce Core */
.woocommerce-PaymentMethods li[id*="google"],
.woocommerce-PaymentMethods li[id*="apple"],
/* Any iframe or button that might contain these */
iframe[src*="google"],
iframe[src*="apple"],
iframe[src*="gpay"],
/* Express Checkout Container - but only for Google/Apple */
.express-checkout-container > *:not(.paypal-buttons):not([class*="paypal"]):not([id*="paypal"]),
.wcc-express-checkout-section > *:not(.paypal-buttons):not([class*="paypal"]):not([id*="paypal"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

.express-checkout-container,
.wcc-express-checkout-section {
    margin-top: 15px;
    padding: 0;
}

.wcc-express-skeleton {
    display: block;
    margin: 10px 0;
}

.wcc-skeleton-button {
    height: 45px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.wcpay-express-checkout-wrapper,
.wcpay-express-checkout-element,
.paypal-buttons-container {
    margin: 8px 0;
}

.wcpay-express-checkout-element button,
.paypal-buttons button {
    width: 100% !important;
    height: 45px !important;
    border-radius: 4px !important;
}

/* =============================================
   PRODUCT META
   ============================================= */
.product-meta,
div.product-meta {
    padding: 20px 0 !important;
    border-top: 1px solid #eee !important;
    margin-top: 20px !important;
}

.product-sku {
    margin-bottom: 10px !important;
    color: #666 !important;
    font-size: 0.9rem !important;
}

.product-availability,
div.product-availability {
    margin-bottom: 10px !important;
}

.availability-status,
span.availability-status {
    padding: 5px 12px !important;
    border-radius: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    display: inline-block !important;
}

.availability-status.available,
span.availability-status.available {
    background: #e8f5e9 !important;
    color: #313D4D !important;
}

.availability-status.unavailable {
    background: #ffeaea !important;
    color: #d63638 !important;
}

/* =============================================
   VARIANTS & LIEFERUMFANG
   ============================================= */
.variations-container {
    margin-bottom: 30px;
}

.variation-dropdowns select,
.attribute-select {
    width: 100% !important;
    padding: 12px 15px !important;
    margin-bottom: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    color: #666 !important;
    background: white !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3e%3cpath fill='%23666' d='M0 0l5 5 5-5z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 10px !important;
    padding-right: 40px !important;
}

.variation-dropdowns select:focus,
.attribute-select:focus {
    border-color: #FD8311 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(253, 131, 17, 0.1) !important;
}

.lieferumfang-container {
    margin: 15px 0 20px 0 !important;
    padding: 0 15px !important;
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.lieferumfang-btn {
    flex: 1;
    width: 100% !important;
    padding: 12px 15px !important;
    background: white !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

.lieferumfang-btn:hover {
    background: #313D4D !important;
    border-color: #313D4D !important;
    color: white !important;
}

.lieferumfang-btn.active {
    background: #FD8311 !important;
    border-color: #FD8311 !important;
    color: white !important;
}

@media (max-width: 768px) {
    .lieferumfang-container {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .lieferumfang-btn {
        width: 100% !important;
        white-space: normal !important;
    }
}

/* =============================================
   SECTIONS
   ============================================= */
.section-title {
    font-size: 1.8rem !important;
    font-weight: 300 !important;
    color: #313D4D !important;
    margin: 30px 0 !important;
    text-align: center !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.section-title::before,
.section-title::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: #ddd !important;
}

.section-title::before {
    margin-right: 20px !important;
}

.section-title::after {
    margin-left: 20px !important;
}

.features-section {
    margin-top: 40px;
    padding-top: 0;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 769px) {
    .features-section .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
}

.details-crosssell-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 768px) {
    .details-crosssell-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.details-content-card,
.details-main-column {
    background: white;
    padding: 40px;
    border-radius: 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    color: #666;
    line-height: 1.8;
}

/* Cross-Sell Sidebar */
.crosssell-sidebar {
    background: #f8f9fa !important;
    border-radius: 0 !important;
    padding: 30px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important;
    position: sticky;
    top: 120px;
    align-self: start;
    height: fit-content;
}

@media (max-width: 768px) {
    .crosssell-sidebar {
        position: static !important;
        margin-top: 30px !important;
    }
}

.sidebar-title {
    color: #313D4D !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0 0 25px 0 !important;
    text-align: left !important;
}

.crosssell-sidebar-grid {
    display: grid !important;
    gap: 20px !important;
}

.crosssell-sidebar-card {
    background: white !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
}

.crosssell-sidebar-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(44, 85, 48, 0.1) !important;
}

.crosssell-sidebar-image {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

.crosssell-no-image {
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #6c757d;
}

.crosssell-sidebar-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 100px !important;
}

.crosssell-sidebar-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #313D4D !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.crosssell-sidebar-price {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #4CAF50 !important;
    margin: 8px 0 !important;
}

.crosssell-sidebar-link {
    background: #FD8311 !important;
    color: white !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    transition: background 0.3s ease !important;
    display: inline-block !important;
}

.crosssell-sidebar-link:hover {
    background: #313D4D !important;
}

/* Full Width Sections */
.full-width-section {
    padding: 60px 0 !important;
}

@media (max-width: 768px) {
    .full-width-section {
        padding: 40px 0 !important;
    }
}

.full-width-content {
    background: white;
    padding: 40px;
    border-radius: 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    color: #666;
    line-height: 1.8;
    max-width: 1000px;
    margin: 0 auto;
}

/* Formatted Text & Lists */
.formatted-text {
    text-align: left !important;
}

.formatted-text ul {
    margin: 20px 0 25px 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.formatted-text li {
    position: relative !important;
    padding-left: 30px !important;
    margin-bottom: 12px !important;
    line-height: 1.7 !important;
    color: #555 !important;
    text-align: left !important;
    font-size: 0.95rem !important;
}

.formatted-text li:before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: -2px !important;
    color: #4CAF50 !important;
    font-weight: bold !important;
    font-size: 1.2em !important;
}

.formatted-text strong,
.formatted-text b {
    color: #313D4D !important;
    font-weight: 600 !important;
}

/* =============================================
   FAQ SECTION
   ============================================= */
.faq-container {
    max-width: 1000px !important;
    margin: 40px auto !important;
}

.faq-item {
    border-bottom: 1px solid #f0f0f0 !important;
}

.faq-question {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 0 !important;
    cursor: pointer !important;
    color: #313D4D !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

.faq-question:hover {
    color: #4CAF50 !important;
}

.faq-toggle {
    font-size: 1.5rem !important;
    color: #4CAF50 !important;
    transition: all 0.3s ease !important;
}

.faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease-out !important;
    color: #666 !important;
    line-height: 1.7 !important;
}

.faq-answer.active {
    max-height: 2000px !important;
    padding-bottom: 20px !important;
}