/* Campaign page styles matching the image */
.campaign-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    min-height: 100vh;
}

.campaign-breadcrumb { margin-bottom: 20px; }

.breadcrumb { background: none; padding: 0; margin: 0; font-size: 14px; }
.breadcrumb-item a { color: #666; text-decoration: underline; }
.breadcrumb-item.active { color: #333; }

.campaign-title { margin-bottom: 30px; }
.campaign-title h1 { font-size: 1.8rem; font-weight: bold; color: #333; margin: 0; }

.campaign-price-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.price-info { display: flex; flex-direction: column; gap: 5px; }
.price-label { font-size: 14px; color: #666; }
.price-amount { font-size: 1.5rem; font-weight: bold; color: #B8860B; }

.quantity-and-cart { display: flex; align-items: center; gap: 15px; }

.quantity-selector { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; }
.quantity-btn { border: none; background: #f8f9fa; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: #333; }
.quantity-btn:hover { background: #e9ecef; }
.quantity-selector input { border: none; width: 50px; height: 35px; text-align: center; background: white; outline: none; }

.add-to-cart-btn { background: #333; color: white; border: none; padding: 10px 20px; border-radius: 5px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
.add-to-cart-btn:hover { background: #555; }

.campaign-products { margin-bottom: 20px; }
.product-item { background: white; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; }
.product-header { padding: 15px 20px; border-bottom: 1px solid #eee; }
.product-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: #333; }
.product-content { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.product-dropdown-section { flex: 1; }
.product-select { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; background: white; font-size: 14px; color: #333; cursor: pointer; }
.product-select:focus { outline: none; border-color: #007bff; }

.edit-btn { background: transparent; border: 1px solid #666; padding: 8px 15px; border-radius: 5px; font-size: 13px; color: #666; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.3s ease; }
.edit-btn:hover { background: #f8f9fa; }

.bottom-add-cart { position: sticky; bottom: 20px; margin-top: 20px; }
.add-to-cart-btn-full { width: 100%; background: #333; color: white; border: none; padding: 15px; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.add-to-cart-btn-full:hover { background: #555; }

/* Modal styles */
.modal-content { border-radius: 8px; }
.modal-header { border-bottom: 1px solid #eee; padding: 20px; }
.modal-title { font-size: 1.2rem; font-weight: 600; color: #333; }
.edit-section { margin-bottom: 25px; }
.edit-section h6 { font-weight: 600; margin-bottom: 15px; color: #333; }
.dough-options, .extra-options { display: flex; flex-direction: column; gap: 10px; }
.dough-options label, .extra-options label { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; font-size: 14px; }
.dough-options input, .extra-options input { margin: 0; }
.modal-footer { border-top: 1px solid #eee; padding: 20px; }
.modal-footer .btn-primary { background: #007bff; border-color: #007bff; padding: 10px 25px; font-weight: 500; }

/* Modal dropdown stilleri */
.modal .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    z-index: 1080; /* modal backdrop üstünde kalsın */
    width: 100% !important; /* Dropdown genişliğini tam yap */
    min-width: 100% !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Mobil cihazlar için dropdown yüksekliğini kısalt */
@media (max-width: 768px) { .modal .dropdown-menu { max-height: 200px; } }

/* Çok küçük ekranlar için daha da kısalt ve yukarı açtır */
@media (max-width: 576px) {
    .modal-dialog { margin: 0.75rem; }
    .modal .dropdown-menu { max-height: 55vh; }
    .modal .dropup .dropdown-menu,
    .modal .dropdown-menu.show[data-popper-placement^="top"],
    .modal .dropdown-menu.show[data-bs-popper-placement^="top"] {
        bottom: calc(100% + 6px) !important;
        top: auto !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Yüksekliği 600px ve daha az cihazlar (iPhone 5 benzeri) için yukarı açılma kuralı */
@media (max-height: 600px) {
    .modal .dropdown-menu { max-height: 50vh; }
    .modal .dropdown-menu.show {
        bottom: calc(100% + 6px) !important;
        top: auto !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Dropup yönlendirmesi: tetikleyicinin üstünde açılır */
.modal .dropup .dropdown-menu { bottom: calc(100% + 6px); top: auto; left: 0; right: 0; }

.modal .dropdown-menu .dropdown-item { padding: 8px 15px; border-bottom: 1px solid #f0f0f0; }
.modal .dropdown-menu .dropdown-item:last-child { border-bottom: none; }
.modal .dropdown-menu .dropdown-item:hover { background-color: #f8f9fa; }

/* Modal içindeki dropdown container */
.modal .dropdown { position: relative; }

/* Modal body overflow kontrolü - dropdown'ın dışarı çıkabilmesi için */
.modal-body { max-height: 70vh; overflow: visible; }
.modal-content { overflow: visible; }
.modal { overflow: visible; }

/* Selectable ürünler için stiller */
.selectable_products { margin-top: 15px; }
.selectable_title { font-size: 14px; color: #6c757d; margin-bottom: 10px; }
.selectable_items { display: flex; flex-direction: column; gap: 10px; }
.selectable_item { }
.selectable_item .product_dropdown .btn { }
.selectable_item .product_modal .btn { }

/* Selectable modal stilleri (tekrar) */
.modal-content { border-radius: 8px; }
.modal-header { border-bottom: 1px solid #eee; padding: 20px; }
.modal-title { font-size: 1.2rem; font-weight: 600; color: #333; }
.edit-section { margin-bottom: 25px; }
.edit-section h6 { font-weight: 600; margin-bottom: 15px; color: #333; }
.dough-options, .extra-options { display: flex; flex-direction: column; gap: 10px; }
.dough-options label, .extra-options label { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; font-size: 14px; }
.dough-options input, .extra-options input { margin: 0; }
.modal-footer { border-top: 1px solid #eee; padding: 20px; }
.modal-footer .btn-primary { background: #007bff; border-color: #007bff; padding: 10px 25px; font-weight: 500; }

@media (max-width: 768px) {
    .campaign-container { padding: 15px; }
    .campaign-price-section { flex-direction: column; gap: 15px; align-items: stretch; }
    .quantity-and-cart { justify-content: space-between; }
    .product-content { flex-direction: column; gap: 15px; align-items: stretch; }
    .selectable_products { padding: 10px; }
    .selectable_item { padding: 10px; }
}

/* Special price tag styling */
.special-price-tag { color: #28a745; font-weight: bold; font-size: 0.9em; margin-left: 5px; }