/* ==========================================
   Napoli Theme - Campaign & Product Details Stylesheet
   Gourmet Dark/Gold Aesthetic with Light/Dark Support
   ========================================== */

/* Font Definitions */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --napoli-gold: #ff9f0d;
    --napoli-gold-hover: #e08a00;
    --napoli-dark-bg: #121214;
    --napoli-card-dark: #1c1c1e;
    --napoli-inner-dark: #252528;
    --napoli-border-dark: rgba(255, 255, 255, 0.08);
    --napoli-text-dark-primary: #ffffff;
    --napoli-text-dark-secondary: #9ca3af;

    --napoli-light-bg: #f7f6f2;
    --napoli-card-light: #ffffff;
    --napoli-inner-light: #f3f4f6;
    --napoli-border-light: rgba(0, 0, 0, 0.08);
    --napoli-text-light-primary: #1c1c1e;
    --napoli-text-light-secondary: #6b7280;
}

/* Base Page Padding */
.order-padding, .campaign-container {
    margin: 0 auto;
    padding: 40px 15px;
    min-height: 80vh;
    font-family: 'Poppins', sans-serif;
}

/* Detail Container Styling (Main Info Card) */
.detail-container, .campaign-price-section, .product-item {
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Theme-Specific Styles */
/* --- DARK THEME --- */
html[data-theme="dark"] .detail-container,
html[data-theme="dark"] .campaign-price-section,
html[data-theme="dark"] .product-item {
    background-color: var(--napoli-card-dark) !important;
    border-color: var(--napoli-border-dark);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .campaign-breadcrumb .breadcrumb-item a {
    color: var(--napoli-text-dark-secondary);
}
html[data-theme="dark"] .campaign-breadcrumb .breadcrumb-item.active {
    color: var(--napoli-text-dark-primary);
}

html[data-theme="dark"] .detail-title,
html[data-theme="dark"] .campaign-title h1,
html[data-theme="dark"] .product-header h3,
html[data-theme="dark"] .products_title {
    color: var(--napoli-text-dark-primary) !important;
}

html[data-theme="dark"] .detail-content,
html[data-theme="dark"] .price-label,
html[data-theme="dark"] .product-desc {
    color: var(--napoli-text-dark-secondary) !important;
}

/* --- LIGHT THEME --- */
html[data-theme="light"] .detail-container,
html[data-theme="light"] .campaign-price-section,
html[data-theme="light"] .product-item {
    background-color: var(--napoli-card-light) !important;
    border-color: var(--napoli-border-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .campaign-breadcrumb .breadcrumb-item a {
    color: var(--napoli-text-light-secondary);
}
html[data-theme="light"] .campaign-breadcrumb .breadcrumb-item.active {
    color: var(--napoli-text-light-primary);
}

html[data-theme="light"] .detail-title,
html[data-theme="light"] .campaign-title h1,
html[data-theme="light"] .product-header h3,
html[data-theme="light"] .products_title {
    color: var(--napoli-text-light-primary) !important;
}

html[data-theme="light"] .detail-content,
html[data-theme="light"] .price-label,
html[data-theme="light"] .product-desc {
    color: var(--napoli-text-light-secondary) !important;
}

/* Image Div & Product Images */
.img-div {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.campaign-img-container {
    max-width: 500px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
}
.product-detail-img {
    transition: transform 0.5s ease;
}
.img-div:hover .product-detail-img,
.campaign-img-container:hover .product-detail-img {
    transform: scale(1.05);
}


/* Price Tags */
.detail-price, .price-amount, .new_price {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--napoli-gold) !important;
    letter-spacing: -0.02em;
}

/* Add-Remove Counter Capsule */
.add-remove-button, .counter_side {
    display: inline-flex;
    align-items: center;
    background-color: var(--napoli-inner-light);
    border-radius: 50px;
    padding: 6px 12px;
    gap: 15px;
    user-select: none;
    border: 1px solid transparent;
}
html[data-theme="dark"] .add-remove-button,
html[data-theme="dark"] .counter_side {
    background-color: var(--napoli-inner-dark);
    border-color: var(--napoli-border-dark);
}

.add-remove-button button, .counter_side .btn {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--napoli-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}
.add-remove-button button:hover, .counter_side .btn:hover {
    background-color: rgba(255, 159, 13, 0.15);
    transform: scale(1.1);
}
.add-remove-button .quantity, .counter_side .counter {
    font-size: 1.1rem;
    font-weight: 600;
    width: 30px;
    text-align: center;
    border: none;
    background: none;
    outline: none;
}
html[data-theme="dark"] .add-remove-button .quantity,
html[data-theme="dark"] .counter_side .counter {
    color: var(--napoli-text-dark-primary);
}
html[data-theme="light"] .add-remove-button .quantity,
html[data-theme="light"] .counter_side .counter {
    color: var(--napoli-text-light-primary);
}

/* Add to Cart & Premium Buttons */
.add, .single_add_to_cart_button, .add-to-cart-btn-full, .add-to-cart-btn {
    background: var(--napoli-gold);
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: 12px 30px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 159, 13, 0.3);
}
.add:hover, .single_add_to_cart_button:hover, .add-to-cart-btn-full:hover, .add-to-cart-btn:hover {
    background: var(--napoli-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 159, 13, 0.45);
}

/* Detail Button Rows & Icons */
.detail-button {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.detail-button .share, .detail-button .order-heart {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--napoli-inner-light);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--napoli-text-light-secondary);
}
html[data-theme="dark"] .detail-button .share,
html[data-theme="dark"] .detail-button .order-heart {
    background-color: var(--napoli-inner-dark);
    border-color: var(--napoli-border-dark);
    color: var(--napoli-text-dark-secondary);
}
.detail-button .share img {
    filter: opacity(0.7);
    width: 18px;
    height: 18px;
}
html[data-theme="dark"] .detail-button .share img {
    filter: invert(1) opacity(0.8);
}
.detail-button .share:hover, .detail-button .order-heart:hover {
    transform: scale(1.05);
    background-color: rgba(255, 159, 13, 0.1);
    color: var(--napoli-gold);
}
.detail-button .order-heart.active {
    background-color: rgba(255, 159, 13, 0.15);
    color: var(--napoli-gold) !important;
}

/* Dropdowns in Single & Combo Select */
.product_dropdown .dropdown .btn {
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
html[data-theme="dark"] .product_dropdown .dropdown .btn {
    background-color: var(--napoli-inner-dark) !important;
    border-color: var(--napoli-border-dark) !important;
    color: var(--napoli-text-dark-primary) !important;
}
html[data-theme="light"] .product_dropdown .dropdown .btn {
    background-color: var(--napoli-inner-light) !important;
    border-color: var(--napoli-border-light) !important;
    color: var(--napoli-text-light-primary) !important;
}
.product_dropdown .dropdown .btn:focus {
    border-color: var(--napoli-gold) !important;
    box-shadow: 0 0 0 3px rgba(255, 159, 13, 0.25) !important;
}

/* Dropdown Menu Overrides */
.dropdown-menu {
    border-radius: 12px !important;
    padding: 8px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid transparent !important;
}
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--napoli-inner-dark) !important;
    border-color: var(--napoli-border-dark) !important;
}
html[data-theme="light"] .dropdown-menu {
    background-color: var(--napoli-card-light) !important;
    border-color: var(--napoli-border-light) !important;
}

.dropdown-item {
    font-size: 0.9rem;
    padding: 10px 20px !important;
    transition: all 0.2s ease;
}
html[data-theme="dark"] .dropdown-item {
    color: var(--napoli-text-dark-primary) !important;
}
html[data-theme="light"] .dropdown-item {
    color: var(--napoli-text-light-primary) !important;
}
.dropdown-item:hover {
    background-color: rgba(255, 159, 13, 0.1) !important;
    color: var(--napoli-gold) !important;
}

/* Combo Option Edit Pencil Buttons */
.edit-btn, .product_modal .btn-product {
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    background: transparent !important;
    border: 1px solid var(--napoli-gold) !important;
    color: var(--napoli-gold) !important;
    transition: all 0.2s ease;
}
.edit-btn:hover, .product_modal .btn-product:hover {
    background-color: var(--napoli-gold) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Removable Ingredients Grid (Napoli Theme) */
.menu-ingredients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.ingredient-item-napoli {
    border-radius: 12px !important;
    padding: 12px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
html[data-theme="dark"] .ingredient-item-napoli {
    background-color: var(--napoli-inner-dark) !important;
    border: 1px solid var(--napoli-border-dark) !important;
    color: var(--napoli-text-dark-secondary) !important;
}
html[data-theme="light"] .ingredient-item-napoli {
    background-color: var(--napoli-inner-light) !important;
    border: 1px solid var(--napoli-border-light) !important;
    color: var(--napoli-text-light-secondary) !important;
}
.ingredient-item-napoli:hover {
    transform: translateY(-2px);
    border-color: var(--napoli-gold) !important;
}
.ingredient-item-napoli.active {
    background-color: rgba(231, 76, 60, 0.08) !important;
    border-color: #e74c3c !important;
    color: #e74c3c !important;
}

/* Special Price Tag for Variant Selection inside Dropdown */
.special-price-tag {
    color: var(--napoli-gold);
    font-weight: 600;
    margin-left: 5px;
}

/* Combo product items wrapper */
.choose_product_wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.first_product {
    border-radius: 16px;
    padding: 25px;
    border: 1px solid transparent;
}
html[data-theme="dark"] .first_product {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--napoli-border-dark);
}
html[data-theme="light"] .first_product {
    background-color: rgba(0, 0, 0, 0.01) !important;
    border-color: var(--napoli-border-light);
}

/* Modals Override inside campaign/combo page */
.modal-content {
    border-radius: 20px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .modal-content {
    background-color: var(--napoli-card-dark) !important;
    border-color: var(--napoli-border-dark) !important;
}
html[data-theme="light"] .modal-content {
    background-color: var(--napoli-card-light) !important;
    border-color: var(--napoli-border-light) !important;
}

.modal-header {
    border-bottom: 1px solid transparent !important;
    padding: 24px 24px 10px 24px !important;
}
html[data-theme="dark"] .modal-header {
    border-color: var(--napoli-border-dark) !important;
}
html[data-theme="light"] .modal-header {
    border-color: var(--napoli-border-light) !important;
}
.modal-title, .extra_materials_title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--napoli-gold);
}
.extra_materials_desc {
    font-size: 0.85rem;
    line-height: 1.5;
}
html[data-theme="dark"] .extra_materials_desc {
    color: var(--napoli-text-dark-secondary);
}
html[data-theme="light"] .extra_materials_desc {
    color: var(--napoli-text-light-secondary);
}

/* Checkbox and Topping list items in Modals */
.modal-body .form-check {
    padding: 10px 0;
    display: flex;
    align-items: center;
}
.modal-body .form-check-input {
    border-radius: 4px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--napoli-gold);
    background: transparent;
    cursor: pointer;
}
.modal-body .form-check-input:checked {
    background-color: var(--napoli-gold);
    border-color: var(--napoli-gold);
}
.modal-body .form-check-label {
    margin-left: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
html[data-theme="dark"] .modal-body .form-check-label {
    color: var(--napoli-text-dark-primary);
}
html[data-theme="light"] .modal-body .form-check-label {
    color: var(--napoli-text-light-primary);
}
.modal-body .form-check-label .price {
    font-weight: 600;
    color: var(--napoli-gold);
}

/* Close buttons inside modals */
.close_button, .btn-close {
    filter: invert(1);
    opacity: 0.8;
}
html[data-theme="light"] .close_button,
html[data-theme="light"] .btn-close {
    filter: none;
}

/* Similar Products Slider Styling */
.similar-products-section {
    border-top: 1px solid var(--napoli-border-light);
    padding-top: 40px;
}
html[data-theme="dark"] .similar-products-section {
    border-top-color: var(--napoli-border-dark);
}
.order-like-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
}
html[data-theme="dark"] .order-like-title {
    color: var(--napoli-text-dark-primary);
}
html[data-theme="light"] .order-like-title {
    color: var(--napoli-text-light-primary);
}

/* Slider Track & Arrow Controls */
.similar-products-section .slider-container {
    position: relative;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}
.slider-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 24px;
    padding: 15px 5px 30px 5px;
    scrollbar-width: none; /* Firefox */
}
.slider-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.slider-item {
    flex: 0 0 270px;
    text-decoration: none !important;
}

.similar-products-section .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(28, 28, 30, 0.8) !important;
    border: 1px solid var(--napoli-gold) !important;
    color: var(--napoli-gold) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}
html[data-theme="light"] .similar-products-section .slider-btn {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--napoli-gold) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}
.similar-products-section .slider-btn:hover {
    background-color: var(--napoli-gold) !important;
    color: #121214 !important;
    box-shadow: 0 6px 20px rgba(255, 159, 13, 0.45) !important;
    transform: translateY(-50%) scale(1.1);
}
.left-btn { left: -24px; }
.right-btn { right: -24px; }
@media (max-width: 768px) {
    .similar-products-section .slider-btn { display: none !important; }
}

/* Similar Product Card overrides */
.slider-item .product-card {
    border: 1px solid var(--napoli-border-light);
    border-radius: 20px;
    padding: 16px;
    height: auto;
    min-height: 410px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
html[data-theme="dark"] .slider-item .product-card {
    background-color: var(--napoli-card-dark);
    border-color: var(--napoli-border-dark);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
html[data-theme="light"] .slider-item .product-card {
    background-color: var(--napoli-card-light);
    border-color: var(--napoli-border-light);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}
.slider-item .product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 159, 13, 0.4) !important;
}
html[data-theme="dark"] .slider-item .product-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 159, 13, 0.15) !important;
}
html[data-theme="light"] .slider-item .product-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 0 15px rgba(255, 159, 13, 0.08) !important;
}

.product-card-img-wrapper {
    aspect-ratio: 1.15;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    background-color: rgba(0,0,0,0.1);
    width: 100%;
}
html[data-theme="dark"] .product-card-img-wrapper {
    background-color: rgba(255, 255, 255, 0.03);
}
.product-card-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.slider-item .product-card:hover .product-card-img {
    transform: scale(1.08) !important;
}

.slider-item .product-card .product-title {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
    margin-top: 4px;
}
html[data-theme="dark"] .slider-item .product-card .product-title {
    color: var(--napoli-text-dark-primary);
}
html[data-theme="light"] .slider-item .product-card .product-title {
    color: var(--napoli-text-light-primary);
}

.slider-item .product-card .product-content {
    list-style: none !important;
    padding-left: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    height: 24px;
    overflow: hidden;
    margin-bottom: 12px !important;
}
.slider-item .product-card .product-content li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.74rem;
    padding: 2px 8px !important;
    height: 22px !important;
    line-height: 1 !important;
    border-radius: 6px;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
html[data-theme="dark"] .slider-item .product-card .product-content li {
    background-color: var(--napoli-inner-dark);
    color: var(--napoli-text-dark-secondary) !important;
}
html[data-theme="light"] .slider-item .product-card .product-content li {
    background-color: var(--napoli-inner-light);
    color: var(--napoli-text-light-secondary) !important;
}

.slider-item .product-card .price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--napoli-gold);
    font-family: 'Outfit', sans-serif;
    margin-top: auto;
}

/* Floating heart position and modern styling */
.slider-item .product-card .product-heart {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    z-index: 8 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="dark"] .slider-item .product-card .product-heart {
    background-color: rgba(28, 28, 30, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--napoli-text-dark-secondary) !important;
}
html[data-theme="light"] .slider-item .product-card .product-heart {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--napoli-text-light-secondary) !important;
}
.slider-item .product-card .product-heart:hover {
    transform: scale(1.1) !important;
    color: #e74c3c !important;
    background-color: #ffffff !important;
}
.slider-item .product-card .product-heart.active {
    background-color: #e74c3c !important;
    border-color: #e74c3c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4) !important;
}
.slider-item .product-card .product-heart.active i {
    color: #ffffff !important;
}

/* ==========================================
   #order-pop (Shared Customization Popup) Override
   ========================================== */
html[data-theme="dark"] #order-pop .popup {
    background-color: var(--napoli-card-dark) !important;
    border: 1px solid var(--napoli-border-dark);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] #order-pop .popup-header {
    border-bottom-color: var(--napoli-border-dark);
}
html[data-theme="dark"] #order-pop .popup-title {
    color: var(--napoli-text-dark-primary) !important;
}
html[data-theme="dark"] #order-pop .close-btn {
    color: var(--napoli-text-dark-secondary) !important;
}
html[data-theme="dark"] #order-pop .section-title {
    color: var(--napoli-gold) !important;
}
html[data-theme="dark"] #order-pop .section-desc {
    color: var(--napoli-text-dark-secondary) !important;
}

/* Popup Ingredients (removal check tags) */
#order-pop .select-ingredient {
    border-radius: 30px !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    user-select: none !important;
}
html[data-theme="dark"] #order-pop .select-ingredient {
    background-color: var(--napoli-inner-dark) !important;
    border: 1px solid var(--napoli-border-dark) !important;
    color: var(--napoli-text-dark-secondary) !important;
}
html[data-theme="light"] #order-pop .select-ingredient {
    background-color: var(--napoli-inner-light) !important;
    border: 1px solid var(--napoli-border-light) !important;
    color: var(--napoli-text-light-secondary) !important;
}
#order-pop .select-ingredient:hover {
    border-color: var(--napoli-gold) !important;
}
#order-pop .select-ingredient.selected {
    background-color: rgba(231, 76, 60, 0.1) !important;
    border-color: #e74c3c !important;
    color: #e74c3c !important;
    text-decoration: line-through;
}

/* Extra materials lists in shared popup */
#order-pop .menu-options .menu-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
html[data-theme="dark"] #order-pop .menu-options .menu-item {
    background-color: var(--napoli-inner-dark);
    border-color: var(--napoli-border-dark);
}
html[data-theme="light"] #order-pop .menu-options .menu-item {
    background-color: var(--napoli-inner-light);
    border-color: var(--napoli-border-light);
}
#order-pop .menu-options .menu-item:hover {
    border-color: var(--napoli-gold);
}

#order-pop .menu-options .menu-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid var(--napoli-gold);
    border-radius: 4px;
    margin-right: 12px;
}
#order-pop .menu-options .menu-item input[type="checkbox"]:checked {
    background-color: var(--napoli-gold);
}
#order-pop .menu-options .menu-item label {
    flex-grow: 1;
    font-weight: 500;
    cursor: pointer;
}
html[data-theme="dark"] #order-pop .menu-options .menu-item label {
    color: var(--napoli-text-dark-primary);
}
html[data-theme="light"] #order-pop .menu-options .menu-item label {
    color: var(--napoli-text-light-primary);
}

#order-pop .menu-options .menu-item .price {
    font-weight: 600;
    color: var(--napoli-gold);
}

/* Popup Footer Controls */
#order-pop .popup-footer {
    padding-top: 20px;
    border-top: 1px solid transparent;
}
html[data-theme="dark"] #order-pop .popup-footer {
    border-top-color: var(--napoli-border-dark);
}
html[data-theme="light"] #order-pop .popup-footer {
    border-top-color: var(--napoli-border-light);
}

#order-pop .popup-footer button {
    border-radius: 50px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
#order-pop .order-add {
    background: var(--napoli-gold) !important;
    color: #fff !important;
    border: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
#order-pop .order-add:hover {
    background: var(--napoli-gold-hover) !important;
    transform: translateY(-1px);
}
#order-pop .order-price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .detail-container {
        padding: 20px;
    }
    .detail-price, .price-amount, .new_price {
        font-size: 1.8rem;
    }
    .add, .single_add_to_cart_button, .add-to-cart-btn-full {
        width: 100%;
        margin-top: 10px;
    }
    .detail-button {
        justify-content: space-between;
    }
    .detail-button .button-wrapper {
        flex: 1;
    }
    .detail-button .share, .detail-button .order-heart {
        width: 100%;
        border-radius: 12px;
    }
}

/* Modal içi çıkarılabilir malzemeler (pills görünümü) */
.ingredients_container_removable {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ingredient_item_napoli_modal {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
    white-space: nowrap;
}

html[data-theme="dark"] .ingredient_item_napoli_modal {
    border: 2px solid var(--napoli-border-dark);
    background-color: var(--napoli-inner-dark);
    color: var(--napoli-text-dark-primary);
}

html[data-theme="light"] .ingredient_item_napoli_modal {
    border: 2px solid #e0e0e0;
    background-color: #ffffff;
    color: #333333;
}

.ingredient_item_napoli_modal .fa-check-circle {
    display: none;
}

.ingredient_item_napoli_modal.selected {
    border-color: #e74c3c !important;
    color: #e74c3c !important;
    text-decoration: line-through !important;
}

html[data-theme="dark"] .ingredient_item_napoli_modal.selected {
    background-color: rgba(231, 76, 60, 0.08);
}

html[data-theme="light"] .ingredient_item_napoli_modal.selected {
    background-color: #ffffff;
}

.ingredient_item_napoli_modal.selected .fa-check-circle {
    display: inline-block;
    margin-right: 5px;
}

.ingredient_item_napoli_modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* ==========================================
   Small Campaigns (Mini Deals) Styling
   ========================================== */
.small-campaigns-section {
    margin-bottom: 40px;
}

.campaign-card-mini {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] .campaign-card-mini {
    background-color: var(--napoli-card-dark);
    border-color: var(--napoli-border-dark);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .campaign-card-mini {
    background-color: var(--napoli-card-light);
    border-color: var(--napoli-border-light);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.campaign-card-mini:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 159, 13, 0.4);
}

html[data-theme="dark"] .campaign-card-mini:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(255, 159, 13, 0.15);
}

html[data-theme="light"] .campaign-card-mini:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08), 0 0 15px rgba(255, 159, 13, 0.08);
}

.campaign-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    background-color: rgba(0,0,0,0.05);
}

.campaign-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.campaign-card-mini:hover .campaign-img {
    transform: scale(1.05);
}

.campaign-info-wrapper {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.campaign-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

html[data-theme="dark"] .campaign-title {
    color: var(--napoli-text-dark-primary);
}

html[data-theme="light"] .campaign-title {
    color: var(--napoli-text-light-primary);
}

.campaign-card-mini:hover .campaign-title {
    color: var(--napoli-gold);
}

.campaign-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

html[data-theme="dark"] .campaign-desc {
    color: var(--napoli-text-dark-secondary);
}

html[data-theme="light"] .campaign-desc {
    color: var(--napoli-text-light-secondary);
}

.campaign-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-theme="light"] .campaign-footer {
    border-top-color: rgba(0, 0, 0, 0.05);
}

.campaign-price {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--napoli-gold);
}

.btn-campaign-detail {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--napoli-gold);
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(255, 159, 13, 0.3);
}

.btn-campaign-detail:hover {
    background-color: var(--napoli-gold-hover);
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(255, 159, 13, 0.5);
}

.btn-campaign-detail i {
    font-size: 0.9rem;
}

/* ==========================================
   Share Modal (Paylaşım Popup) Styling
   ========================================== */
.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.share-modal.hidden {
    display: none !important;
}

.share-modal-content {
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    max-width: 420px;
    animation: popInShare 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    border: 1px solid transparent;
}

html[data-theme="dark"] .share-modal-content {
    background-color: var(--napoli-card-dark);
    border-color: var(--napoli-border-dark);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

html[data-theme="light"] .share-modal-content {
    background-color: var(--napoli-card-light);
    border-color: var(--napoli-border-light);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.share-modal .close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    font-size: 28px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}

html[data-theme="dark"] .share-modal .close-btn {
    color: var(--napoli-text-dark-secondary) !important;
}
html[data-theme="light"] .share-modal .close-btn {
    color: var(--napoli-text-light-secondary) !important;
}

.share-modal .close-btn:hover {
    color: var(--napoli-gold) !important;
}

.share-modal h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
    color: var(--napoli-gold);
}

.share-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.share-links a {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

/* Specific colors for social icons */
.share-links .whatsapp {
    background-color: rgba(37, 211, 102, 0.1);
    color: #25d366 !important;
    border: 1px solid rgba(37, 211, 102, 0.2);
}
.share-links .whatsapp:hover {
    background-color: #25d366;
    color: #fff !important;
    transform: translateY(-3px);
}

.share-links .facebook {
    background-color: rgba(24, 119, 242, 0.1);
    color: #1877f2 !important;
    border: 1px solid rgba(24, 119, 242, 0.2);
}
.share-links .facebook:hover {
    background-color: #1877f2;
    color: #fff !important;
    transform: translateY(-3px);
}

.share-links .twitter {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="light"] .share-links .twitter {
    background-color: rgba(0, 0, 0, 0.05);
    color: #121214 !important;
    border-color: rgba(0, 0, 0, 0.1);
}
.share-links .twitter:hover {
    background-color: #121214;
    color: #fff !important;
    transform: translateY(-3px);
}
html[data-theme="light"] .share-links .twitter:hover {
    background-color: #000;
}

.copy-section {
    display: flex;
    gap: 10px;
    background-color: var(--napoli-inner-light);
    border: 1px solid var(--napoli-border-light);
    border-radius: 12px;
    padding: 6px;
}
html[data-theme="dark"] .copy-section {
    background-color: var(--napoli-inner-dark);
    border-color: var(--napoli-border-dark);
}

.copy-section input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.85rem;
    padding: 8px 12px;
}
html[data-theme="dark"] .copy-section input {
    color: var(--napoli-text-dark-primary);
}
html[data-theme="light"] .copy-section input {
    color: var(--napoli-text-light-primary);
}

#copyLinkBtn {
    background-color: var(--napoli-gold);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#copyLinkBtn:hover {
    background-color: var(--napoli-gold-hover);
}

@keyframes popInShare {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Napoli Selector Overrides (Offcanvas Select Menus) */
html[data-theme="dark"] .select-field {
    background-color: var(--napoli-card-dark) !important;
    border-color: var(--napoli-border-dark) !important;
    color: var(--napoli-text-dark-primary) !important;
}
html[data-theme="light"] .select-field {
    background-color: var(--napoli-card-light) !important;
    border-color: var(--napoli-border-light) !important;
    color: var(--napoli-text-light-primary) !important;
}
html[data-theme="dark"] .select-field:hover {
    border-color: var(--napoli-gold) !important;
}
html[data-theme="light"] .select-field:hover {
    border-color: var(--napoli-gold) !important;
}
html[data-theme="dark"] .select-field .arrow-icon {
    color: var(--napoli-text-dark-primary) !important;
    filter: invert(1);
}
html[data-theme="light"] .select-field .arrow-icon {
    color: var(--napoli-text-light-primary) !important;
}

/* Offcanvas list container */
html[data-theme="dark"] .list {
    background-color: var(--napoli-inner-dark) !important;
    border-left: 1px solid var(--napoli-border-dark) !important;
}
html[data-theme="light"] .list {
    background-color: var(--napoli-light-bg) !important;
    border-left: 1px solid var(--napoli-border-light) !important;
}

/* Offcanvas Header */
html[data-theme="dark"] .offcanvas-header {
    background-color: var(--napoli-card-dark) !important;
    border-bottom-color: var(--napoli-border-dark) !important;
}
html[data-theme="light"] .offcanvas-header {
    background-color: var(--napoli-card-light) !important;
    border-bottom-color: var(--napoli-border-light) !important;
}
html[data-theme="dark"] .offcanvas-title {
    color: var(--napoli-text-dark-primary) !important;
}
html[data-theme="light"] .offcanvas-title {
    color: var(--napoli-text-light-primary) !important;
}

/* Variant Option Cards */
html[data-theme="dark"] .list .options.variant-card {
    background-color: var(--napoli-card-dark) !important;
    border-color: var(--napoli-border-dark) !important;
}
html[data-theme="light"] .list .options.variant-card {
    background-color: var(--napoli-card-light) !important;
    border-color: var(--napoli-border-light) !important;
}
html[data-theme="dark"] .list .options.variant-card:hover {
    border-color: var(--napoli-gold) !important;
}
html[data-theme="light"] .list .options.variant-card:hover {
    border-color: var(--napoli-gold) !important;
}
html[data-theme="dark"] .list .options.variant-card.selected {
    border-color: var(--napoli-gold) !important;
    background-color: rgba(255, 159, 13, 0.1) !important;
}
html[data-theme="light"] .list .options.variant-card.selected {
    border-color: var(--napoli-gold) !important;
    background-color: rgba(255, 159, 13, 0.05) !important;
}

/* Variant Texts */
html[data-theme="dark"] .variant-name {
    color: var(--napoli-text-dark-primary) !important;
}
html[data-theme="light"] .variant-name {
    color: var(--napoli-text-light-primary) !important;
}
html[data-theme="dark"] .variant-desc {
    color: var(--napoli-text-dark-secondary) !important;
}
html[data-theme="light"] .variant-desc {
    color: var(--napoli-text-light-secondary) !important;
}
.variant-price {
    color: var(--napoli-gold) !important;
    font-weight: 700 !important;
}

/* Napoli Theme - Detail Container Display Override */
.detail-container {
    display: block !important;
}

/* Mobile Offcanvas Drawer Fix for Napoli Theme */
@media (max-width: 900px) {
    .select-menu-container .selector .list {
        width: 100% !important;
        left: auto !important;
        right: -100% !important; /* Hide off-screen by default on mobile */
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: block !important;
    }

    .select-menu-container .selector.open .list {
        left: 0 !important;
        right: 0 !important;
    }
}