/* ==========================================================================
   DM Menü — Paylaşılan Sipariş Paneli CSS (dm-tema F3)
   order-panel.blade partial'ının öz-yeterli stilleri: #viewOrder (sepet) +
   #menuCustomize (varyant/ekstra) panellerinin taban mekaniği + premium
   görünüm (modern-theme'in dm-panel v2/v3 blokları buraya kopyalandı).
   layout.blade, shared-order destekli temalarda style_at_top yığınından
   SONRA yükler; tema kendi css'iyle üzerine ince ayar yapabilir.
   Renk tonu --theme-color-* merdiveninden gelir (restoran marka rengi).
   ========================================================================== */

/* --- Taban panel mekaniği (yalnız sipariş/bilgi panelleri, id-scoped) --- */
#viewOrder.sidenav.bottom,
#menuCustomize.sidenav.bottom,
#menuDetail.sidenav.bottom,
#dm-info.sidenav.bottom,
#dm-cats.sidenav.bottom,
#call-waiter-box.sidenav.bottom {
    width: 100%;
    bottom: -110vh;
    left: 0;
    position: fixed;
    height: auto;
    max-height: 92vh;
    z-index: 1001;
    background-color: #F8F9FA;
    transition: bottom .3s ease;
    overflow: auto;
    border-radius: 18px 18px 0 0;
}
#viewOrder.sidenav.bottom.active,
#menuCustomize.sidenav.bottom.active,
#menuDetail.sidenav.bottom.active,
#dm-info.sidenav.bottom.active,
#dm-cats.sidenav.bottom.active,
#call-waiter-box.sidenav.bottom.active { bottom: 0 !important; }
/* dm-fix: layout'un eski ortalanmış-diyalog kuralı transform:translateX(-50%)
   bırakıyordu — kabuk left:0 verince panel yarım ekran SOLA kayıyordu */
#menuDetail.sidenav.bottom { transform: none; }
#viewOrder .sidebar-header,
#menuCustomize .sidebar-header,
#menuDetail .sidebar-header,
#dm-info .sidebar-header,
#dm-cats .sidebar-header,
#call-waiter-box .sidebar-header {
    padding: 0 20px;
    min-height: 56px;
    display: flex;
    align-items: center;
    background: #fff;
    color: #1e1e1e;
    border-bottom: 1px solid #ececf1;
    border-radius: 18px 18px 0 0;
    position: static;
}
#viewOrder .sidebar-header .navbar-heading h4,
#menuCustomize .sidebar-header .navbar-heading h4,
#menuDetail .sidebar-header .navbar-heading h4,
#dm-info .sidebar-header .navbar-heading h4,
#dm-cats .sidebar-header .navbar-heading h4,
#call-waiter-box .sidebar-header .navbar-heading h4 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#viewOrder .sidebar-header .btn,
#menuCustomize .sidebar-header .btn,
#menuDetail .sidebar-header .btn,
#dm-info .sidebar-header .btn,
#dm-cats .sidebar-header .btn,
#call-waiter-box .sidebar-header .btn {
    color: #1e1e1e;
    margin-left: auto;
    background: transparent;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    box-shadow: none;
}
#viewOrder .sidebar-wrapper,
#menuCustomize .sidebar-wrapper,
#menuDetail .sidebar-wrapper,
#dm-info .sidebar-wrapper,
#call-waiter-box .sidebar-wrapper { width: 100%; padding: 4px 18px 18px; }
#viewOrder .section, #menuCustomize .section,
#menuDetail .section, #dm-info .section, #call-waiter-box .section { padding: 10px 0; }
#viewOrder .footer.footer-extras,
#menuCustomize .footer.footer-extras,
#call-waiter-box .footer.footer-extras {
    background: #fff;
    border-top: 1px solid #ecedf1;
    padding: 10px 18px max(10px, env(safe-area-inset-bottom, 0px));
}
#menuDetail, #dm-info, #dm-cats, #call-waiter-box {
    background: #fff;
    color: #1e1e1e;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Bootstrap'ın mavi btn-primary'si panellerde MARKA rengine döner */
#viewOrder .btn-primary, #menuCustomize .btn-primary,
#menuDetail .btn-primary, #call-waiter-box .btn-primary {
    background-color: var(--theme-color-1, #d7193f) !important;
    border-color: var(--theme-color-1, #d7193f) !important;
    color: var(--theme-on-accent, #fff) !important;
}
#call-waiter-box .btn-primary {
    min-height: 46px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14.5px;
}

/* Garson kutusu girişleri — viewOrder alan diliyle aynı */
#call-waiter-box .form-group .form-line .form-control,
#call-waiter-box input.form-control {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px !important;
    border: 1px solid #e1e3ea !important;
    border-radius: 11px !important;
    background: #fff;
    font-size: 14.5px !important;
    color: #222;
    box-shadow: none !important;
}
#call-waiter-box .form-group .form-line { border-bottom: 0 !important; }
#call-waiter-box .form-group .form-line:after { display: none !important; }
#call-waiter-box input.form-control:focus {
    outline: none;
    border-color: var(--theme-color-1, #444) !important;
    box-shadow: 0 0 0 3px var(--theme-color-0_12, rgba(0,0,0,.08)) !important;
}

/* --- İşletme bilgisi paneli içeriği --- */
#dm-info .dm-info-desc { color: #4b5563; font-size: 13.5px; line-height: 1.6; margin: 2px 0 12px; }
#dm-info .dm-info-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
#dm-info .dm-info-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13.5px;
    color: #1e1e1e;
    line-height: 1.5;
}
#dm-info .dm-info-list li i { color: var(--theme-color-1, #d7193f); flex: 0 0 auto; font-size: 15px; }
#dm-info .dm-info-list li a { color: inherit; text-decoration: none; font-weight: 600; }
#dm-info .dm-info-maps {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700 !important;
    color: var(--theme-color-1, #d7193f) !important;
    white-space: nowrap;
}
/* contact-icons listesi — layout'taki .single-page-header stili burada geçmez,
   aynı hap görünümü #dm-info kapsamında yeniden kurulur */
#dm-info .restaurant-contact-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 0;
    margin: 0;
    list-style: none;
}
#dm-info .restaurant-contact-icons li { display: block; margin: 0; padding: 0; }
#dm-info .restaurant-contact-icons a,
#dm-info .restaurant-contact-icons button {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    background: #f6f7f9;
    border: 1px solid #e5e7ee;
    color: #222;
    padding: 0 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
}
#dm-info .restaurant-contact-icons a:hover,
#dm-info .restaurant-contact-icons button:hover {
    background: var(--theme-color-1, #d7193f);
    border-color: var(--theme-color-1, #d7193f);
    color: #fff;
}
#dm-info .restaurant-contact-icons i { margin: 0; font-size: 15px; line-height: 1; }
.dm-order-overlay-note { display: none; }
/* ==========================================================================
   dm-panel-v2: Siparişim çekmecesi — native/stilsiz kontroller modern kutulara
   ========================================================================== */
#viewOrder { max-height: 86vh; height: auto; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
#viewOrder .sidebar-header { border-radius: 18px 18px 0 0; border-bottom: 1px solid #ececf1; }
#viewOrder .sidebar-wrapper { padding: 4px 18px 18px; }
#viewOrder .col-text.font-medium { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a8f9a; margin: 14px 0 6px !important; }
#viewOrder select.form-control,
#viewOrder .form-group .form-line .form-control,
#viewOrder input.form-control,
#viewOrder textarea.form-control {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px !important;
    border: 1px solid #e1e3ea !important;
    border-radius: 11px !important;
    background: #fff;
    font-size: 14.5px !important;
    color: #222;
    box-shadow: none !important;
    line-height: 1.35;
}
#viewOrder textarea.form-control { min-height: 64px; }
#viewOrder select.form-control {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px !important;
}
#viewOrder .form-group .form-line { border-bottom: 0 !important; }
#viewOrder .form-group .form-line:after { display: none !important; }
#viewOrder .form-group { margin-bottom: 10px; }
#viewOrder select.form-control:focus,
#viewOrder input.form-control:focus,
#viewOrder textarea.form-control:focus {
    outline: none;
    border-color: var(--theme-color-1, #444) !important;
    box-shadow: 0 0 0 3px var(--theme-color-0_12, rgba(0,0,0,.08)) !important;
}
#viewOrder #order-submit-button {
    min-height: 48px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    margin-top: 6px;
}
/* 9px yazı kalıntısı (üstteki .custom-select kuralı) bu panelde etkisiz */
#viewOrder .custom-select { font-size: 14.5px !important; }

/* ==========================================================================
   dm-siparis-v3: Siparişim paneli tam ekran (mobil) + yapılandırılmış adres
   alanları + konum düğmesi + ara toplam/teslimat ücreti satırları
   ========================================================================== */
@media (max-width: 768px) {
    /* dm-siparis-v3.1: gerçek uygulama düzeni — başlık sabit, içerik kendi içinde
       kayar, Sipariş Gönder alta SABİT (içerik kısa olsa da boşluk kalmaz,
       uzun olsa da buton hep görünür) */
    #viewOrder.sidenav.bottom {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        padding-bottom: 0 !important;
        display: flex;
        flex-direction: column;
    }
    /* KRİTİK: vendor .sidebar-header position:fixed — akış dışına çıkıp içeriğin
       üstüne biniyor ve ilk sepet satırları kalıcı olarak altında kalıyordu.
       Tam ekran düzende başlık akışa alınır (flex'in ilk satırı olur). */
    #viewOrder .sidebar-header {
        position: static !important;
        flex: 0 0 auto;
        width: 100%;
        border-radius: 0;
        min-height: 56px;
        height: auto;
    }
    #viewOrder .your-order-content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #viewOrder #send-order-form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    #viewOrder #send-order-form .sidebar-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    #viewOrder .footer.footer-extras {
        position: static;
        flex: 0 0 auto;
        margin: 0;
        border-top: 1px solid #ecedf1;
        background: #fff;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    }
    #viewOrder .order-success-message {
        flex: 1 1 auto;
        overflow-y: auto;
    }
}

/* dm-siparis-v3.1: panel içi ritim — sepet satırları, toplam kartı, bölüm etiketleri */
#viewOrder .your-order-items .section-menu {
    padding: 12px 0;
    border-bottom: 1px solid #f0f1f4;
}
#viewOrder .your-order-items .section-menu:last-child { border-bottom: 0; }
#viewOrder .section3 { padding-top: 0; }
#viewOrder .total-price {
    background: #f6f7f9;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 6px 0 2px;
}
#viewOrder .total-price .grand-total {
    font-weight: 800;
    font-size: 15.5px;
}
#viewOrder .order-subtotal-row { padding: 2px 0 6px; }
#viewOrder #order-submit-button {
    min-height: 50px;
    border-radius: 12px;
    font-size: 15.5px;
}
.dm-address-fields { display: grid; gap: 10px; }
.dm-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm-address-fields .form-control { margin: 0; }
.dm-location-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 11px;
    border: 1px dashed #c6cbd4;
    background: transparent;
    color: #3c4250;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.dm-location-btn i { font-size: 15px; }
.dm-location-btn.is-on {
    border-style: solid;
    border-color: #10b981;
    background: rgba(16, 185, 129, .08);
    color: #0c8a62;
}
.order-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13.5px;
    color: #5a6170;
}
.total-price .grand-total { font-weight: 800; }

/* ==========================================================================
   dm-siparis-v3.2: premium sepet — görselli ürün satırı, modern adet düğmesi,
   tutar gömülü gönder butonu (yemek platformu görsel dili)
   ========================================================================== */
#viewOrder .dm-cart-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
}
#viewOrder .dm-cart-media {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05);
}
#viewOrder .dm-cart-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#viewOrder .dm-cart-body { flex: 1 1 auto; min-width: 0; }
#viewOrder .dm-cart-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
#viewOrder .dm-cart-top h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #17181c;
}
#viewOrder .dm-cart-top h4 small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #8a8f99;
    margin-top: 2px;
}
#viewOrder .dm-cart-line-total {
    font-weight: 800;
    font-size: 14.5px;
    white-space: nowrap;
    color: #17181c;
}
#viewOrder .dm-cart-unit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 12.5px;
    color: #8a8f99;
}
#viewOrder .dm-cart-unit .badge {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    font-size: 8px;
    line-height: 1;
}
#viewOrder .dm-cart-unit .menu-price { font-size: 12.5px; color: #8a8f99; }
#viewOrder .dm-cart-item .menu-extra-wrapper .menu-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 3px 0 0;
    font-size: 12.5px;
    color: #5a6170;
}
#viewOrder .dm-cart-item .menu-extra-wrapper h4 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: #5a6170;
    display: inline;
}
#viewOrder .dm-cart-item .menu-extra-wrapper .menu_price { font-size: 12.5px; font-weight: 700; }
#viewOrder .dm-cart-item .item-extra-delete { color: #c0392b; }
#viewOrder .dm-stepper {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    border: 1px solid #e7e8ee;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    overflow: hidden;
}
#viewOrder .dm-step {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--theme-color-1, #d7193f);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    transition: background-color .12s;
}
#viewOrder .dm-step:active { background: var(--theme-color-0_08, rgba(0, 0, 0, .05)); }
#viewOrder .dm-step-qty {
    min-width: 26px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    color: #17181c;
}
/* premium gönder butonu: etiket solda, tutar sağda, marka gölgesi */
#viewOrder #order-submit-button {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 15.5px;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px var(--theme-color-0_25, rgba(0, 0, 0, .18));
}
#viewOrder #order-submit-button .dm-submit-total {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    opacity: .95;
}
#viewOrder #order-submit-button .dm-submit-total:empty { display: none; }

/* ==========================================================================
   dm-siparis-v3.3: Yemeksepeti düzeni — segmentli sipariş türü, satır toplamı
   sağda dikey ortalı, başlıkta restoran adı
   ========================================================================== */
#viewOrder .dm-cart-heading { line-height: 1.15; }
#viewOrder .dm-cart-heading h4 { margin: 0; }
#viewOrder .dm-cart-rest {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #8a8f99;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
}
.dm-type-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f1f2f5;
    border-radius: 13px;
}
.dm-type-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #5a6170;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, color .15s, box-shadow .15s;
}
.dm-type-btn i { font-size: 15px; }
.dm-type-btn.is-active {
    background: #fff;
    color: #17181c;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
}
.dm-type-btn.is-active i { color: var(--theme-color-1, #d7193f); }
/* satır: görsel | içerik | toplam sağda dikey ortalı */
#viewOrder .dm-cart-item { align-items: center; }
#viewOrder .dm-cart-right {
    flex: 0 0 auto;
    align-self: center;
    padding-left: 4px;
}
#viewOrder .dm-cart-body h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #17181c;
}
#viewOrder .dm-cart-body h4 small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #8a8f99;
    margin-top: 2px;
}

/* dm-hizli-siparis: kayıtlı müşteri bilgisi kartı (yalnız cihazda saklanır) */
#viewOrder .dm-saved-customer {
    border: 1px solid var(--theme-color-0_25, rgba(215, 25, 63, .25));
    background: var(--theme-color-0_04, rgba(215, 25, 63, .04));
    border-radius: 13px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
#viewOrder .dm-saved-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 800;
    color: #17181c;
}
#viewOrder .dm-saved-head i { color: var(--theme-color-1, #d7193f); font-size: 15px; }
#viewOrder .dm-saved-summary {
    margin: 7px 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #5a6170;
    white-space: pre-line;
}
#viewOrder .dm-saved-actions { display: flex; gap: 8px; }
#viewOrder .dm-saved-actions button {
    flex: 1 1 auto;
    min-height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}
#viewOrder #dm-saved-use {
    background: var(--theme-color-1, #d7193f);
    color: #fff;
    border-color: var(--theme-color-1, #d7193f);
}
#viewOrder #dm-saved-new {
    background: #fff;
    color: #5a6170;
    border-color: #e1e3ea;
}

/* dm-siparis-v3.5: tür segmentleri responsive — dar ekranda ikon üstte/etiket
   altta dikey düzen; üç seçenek 360px'te bile taşmadan sığar */
.dm-type-switch { width: 100%; }
.dm-type-btn { min-width: 0; }
@media (max-width: 430px) {
    .dm-type-btn {
        flex-direction: column;
        gap: 4px;
        min-height: 56px;
        padding: 7px 4px;
        font-size: 11.5px;
        line-height: 1.1;
    }
    .dm-type-btn i { font-size: 16px; }
}
@media (max-width: 340px) {
    .dm-type-btn { font-size: 10.5px; }
}

/* ==========================================================================
   dm-tema F5 düzeltmesi: modern dışı temalarda eksik kalan vendor blokları —
   panel tabanı, özelleştirme (variant/ekstra/adet) ve yardımcılar. Modern'de
   bunlar temanın kendi style.css'inden geliyordu; artık motorla birlikte gelir.
   ========================================================================== */
#menuCustomize, #viewOrder {
    background-color: #ffffff;
    color: #1e1e1e;
    overflow: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#menuCustomize { height: auto; max-height: 86vh; }
#menuCustomize .sidebar-header,
#viewOrder .sidebar-header {
    background: #fff;
    color: #1e1e1e;
}
#menuCustomize .sidebar-header .navbar-heading h4 { margin: 0; font-size: 16.5px; font-weight: 700; }
#menuCustomize .sidebar-header .btn { color: #1e1e1e; background: none; border: 0; }
#menuCustomize .customize-item-description { color: #6b7280; font-size: 13px; line-height: 1.5; }

.line-separate { width: 100%; height: 1px; background-color: #ececf1; margin: 14px 0; }

.extras-heading { line-height: 1.2; margin-bottom: 10px; }
.extras-heading .title { color: #1e1e1e; font-size: 15px; font-weight: 700; }
.extras-heading small { color: #9ca3af; font-size: 12px; }

/* variant/ekstra satırları — kart görünümü */
.extras.menu-extra-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1.5px solid #ececf1;
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.extras.menu-extra-item.active {
    border-color: var(--theme-color-1, #d7193f);
    background: var(--theme-color-0_04, rgba(215, 25, 63, .04));
}
.extras.menu-extra-item .extra-item-title { font-size: 13.5px; font-weight: 600; color: #1e1e1e; cursor: pointer; }
.extras.menu-extra-item .menu_price { font-size: 12px; font-weight: 700; color: #6b7280; }
.extra.active { color: var(--theme-color-1, #d7193f); }
.menu-extra-wrapper .menu-title h4 { font-size: 14px; display: inline-block; }
.menu-extra-wrapper .menu-price, .menu-extra-wrapper .menu-title { display: inline-block; }
.grand-total { font-size: 16px; font-weight: 700; }
.form-error { color: #ea5252; display: none; }

/* adet azalt/arttır hap düğmesi */
#menuCustomize .add-menu { height: 100%; }
#menuCustomize .add-item-btn {
    height: 100%;
    min-height: 46px;
    border: 1.5px solid #ececf1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
#menuCustomize .add-item-btn .wrapper { width: 100%; height: 100%; display: flex; align-items: stretch; }
#menuCustomize .add-item-btn .wrapper .addition {
    flex: 1 1 32%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--theme-color-1, #d7193f);
    font-size: 13px;
}
#menuCustomize .add-item-btn .wrapper .count {
    flex: 1 1 36%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f8;
}
#menuCustomize .add-item-btn .wrapper .count .num { color: #1e1e1e; font-size: 14px; font-weight: 700; }

/* Ekle düğmesi + alt bar */
#menuCustomize .footer.footer-extras {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #ececf1;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom));
}
#menuCustomize .footer.footer-extras .section { padding: 0 18px; }
#menuCustomize #add-order-button {
    min-height: 46px;
    border-radius: 12px;
    background: var(--theme-color-1, #d7193f);
    border-color: var(--theme-color-1, #d7193f);
    font-weight: 800;
    font-size: 14.5px;
}
.p-r-10 { padding-right: 10px !important; }
.p-l-10 { padding-left: 10px !important; }

/* panel açıkken sayfa yatay kaymasın */
body.noscroll { overflow-x: hidden; }

/* dm-fix: Bootstrap .dropdown-menu { left:0; float:left } tema dil menüleriyle
   çakışıyor — right:0 hizalı menüler iki yana gerilip SAĞA taşıyordu.
   Sağ hizada kalıp sola doğru açılır. */
.user-lang-switcher .dropdown-menu { left: auto; float: none; }

/* dm-tema QA: dar ekranda sepet çubuğu metni tek satırda kalır — büyük harf +
   harf aralıklı temalarda (Şef/Kontrast/Kraft) 3 satıra kırılıyordu */
@media (max-width: 420px) {
    #viewOrderBtn { font-size: 12.5px !important; letter-spacing: .02em !important; }
    #viewOrderBtn > span { white-space: nowrap; }
    #viewOrderBtn > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; }
}

/* ==========================================================================
   dm-tema: paylaşılan kampanya popup'ı (theme-info Supports: campaign)
   ========================================================================== */
.dm-campaign[hidden] { display: none !important; }
.dm-campaign {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 10, 12, .6); padding: 22px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.dm-campaign-card {
    position: relative; width: 100%; max-width: 380px;
    background: linear-gradient(160deg, var(--theme-color-1, #E11D48), var(--theme-color-0_65, #9d1436));
    color: var(--theme-on-accent, #fff); border-radius: 20px; padding: 26px 22px 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.dm-campaign-close {
    position: absolute; right: 12px; top: 12px;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.18); color: inherit; font-size: 15px; cursor: pointer;
}
.dm-campaign-tag {
    display: inline-block; font-size: 10.5px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    background: rgba(0,0,0,.16); border-radius: 999px; padding: 5px 12px;
}
.dm-campaign-card h3 { margin: 12px 0 6px; font-size: 21px; font-weight: 800; line-height: 1.25; color: inherit; }
.dm-campaign-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; opacity: .92; color: inherit; }
.dm-campaign-ok {
    width: 100%; min-height: 46px; border: 0; border-radius: 12px;
    background: #fff; color: #17181c; font-size: 14px; font-weight: 800; cursor: pointer;
}

/* ==========================================================================
   dm-tema QA: sipariş BAŞARI ekranı — modern'in kendi css'inde kalmıştı, diğer
   temalarda stilsizdi (küçük tik, sola yaslı). Paylaşılan sürüm (mutlak
   konumlama yok; masaüstü panel + mobil tam ekran flex düzeninde ortalanır).
   ========================================================================== */
#viewOrder .order-success-message {
    text-align: center;
    padding: 44px 22px 56px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1e1e1e;
}
#viewOrder .order-success-message.none { display: none; }
#viewOrder .order-success-message i.qr-success-icon {
    display: flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; margin: 0 auto; border-radius: 50%;
    background: #1cc731; color: #fff; font-size: 44px; line-height: 1;
    box-shadow: 0 12px 30px rgba(28, 199, 49, .3);
}
#viewOrder .order-success-message h4 { margin: 18px 0 0; font-size: 21px; font-weight: 800; color: #111; }
#viewOrder .order-success-message .order-success-meta {
    margin: 10px 0 0; font-size: 15px;
    display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}
#viewOrder .order-success-message .order-success-no { font-weight: 700; }
#viewOrder .order-success-message .order-success-total { opacity: .85; font-variant-numeric: tabular-nums; }
#viewOrder .order-success-message .order-success-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 16px; min-height: 46px; padding: 10px 22px; border-radius: 999px;
    background: #25D366; color: #fff; font-weight: 700; text-decoration: none;
}
#viewOrder .order-success-message .order-success-track {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin: 10px 6px 0; min-height: 44px; padding: 9px 20px; border-radius: 999px;
    border: 1.5px solid var(--theme-color-1, #444); color: var(--theme-color-1, #444);
    font-weight: 700; text-decoration: none;
}

/* dm-tema QA: boş kategori mesajı (order.js ekler) */
.dm-empty-cat {
    margin: 6px 0 14px;
    padding: 14px 16px;
    border: 1.5px dashed rgba(128, 128, 128, .35);
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    opacity: .7;
}

/* ==========================================================================
   dm-tema F12: kategori şeridi kaydırma ipuçları (28 temada tek kaynaktan)
   - .dm-chips: tema DOM'una dokunmadan, şeridin kendi ::before/::after'ı
     yapışkan (sticky) flex öğesi olarak kenar solması çizer; renk JS'in
     ölçtüğü şerit arka planından (--dm-chips-bg), yön RTL'de tersine döner.
   - .dm-cats-btn: sağ uçta yapışkan "tüm kategoriler" düğmesi → #dm-cats paneli.
   Yalnız yatay taşma varken (.dm-scrollable) etkin; masaüstünde çipler sarılır.
   ========================================================================== */
.dm-chips { --dm-chips-bg: #fff; --dm-fade-end: right; --dm-gap: 8px; --dm-pad-start: 16px; --dm-pad-end: 16px; }
.dm-chips::before, .dm-chips::after {
    content: '';
    flex: 0 0 56px;
    align-self: stretch;
    position: sticky;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.dm-chips::before {
    inset-inline-start: 0;
    margin-inline-end: calc(-56px - var(--dm-gap));
    background: linear-gradient(to var(--dm-fade-end), var(--dm-chips-bg) 30%, transparent);
}
.dm-chips::after {
    inset-inline-end: 0;
    margin-inline-start: calc(-56px - var(--dm-gap));
    background: linear-gradient(to var(--dm-fade-end), transparent, var(--dm-chips-bg) 70%);
}
.dm-chips.dm-scrollable.dm-more-start::before { opacity: 1; }
.dm-chips.dm-scrollable.dm-more-end::after { opacity: 1; }
/* yapışkan öğe kaydırma kabının İÇ kutusunda kalır (padding alanına giremez) →
   kaydırılabilirken yan padding sıfırlanır, aynı boşluk ilk çipin önüne ve düğmenin
   arkasına kenar boşluğu olarak taşınır; solma böylece kenara kadar ulaşır */
.dm-chips.dm-scrollable { padding-inline: 0; }
.dm-chips.dm-scrollable::before { margin-inline-end: calc(-56px - var(--dm-gap) + var(--dm-pad-start, 16px)); }
.dm-chips.dm-scrollable::after { flex-basis: 96px; margin-inline-start: calc(-96px - var(--dm-gap)); }
.dm-chips.dm-scrollable .dm-cats-btn { margin-inline-end: var(--dm-pad-end, 16px); }
.dm-cats-btn {
    display: none;
    flex: 0 0 auto;
    position: sticky;
    inset-inline-end: 10px;
    z-index: 4;
    width: 34px;
    height: 34px;
    align-self: center;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, .38);
    background: var(--dm-chips-bg);
    color: inherit;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .16);
    cursor: pointer;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}
.dm-chips.dm-scrollable .dm-cats-btn { display: inline-flex; align-items: center; justify-content: center; }
.dm-cats-btn svg { width: 17px; height: 17px; display: block; }
.dm-cats-btn:active { transform: scale(.94); }

/* alt panel: tüm kategoriler */
#dm-cats .dm-cats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 16px max(16px, env(safe-area-inset-bottom, 0px));
}
@media (min-width: 560px) { #dm-cats .dm-cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#dm-cats .dm-cats-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    background: #fff;
    color: #1e1e1e;
    font: 600 14px/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: start;
    cursor: pointer;
}
#dm-cats .dm-cats-item span {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--theme-color-0_08, rgba(0,0,0,.05));
    color: var(--theme-color-1, #444);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
#dm-cats .dm-cats-item.active {
    border-color: var(--theme-color-1, #d7193f);
    background: var(--theme-color-0_08, rgba(0,0,0,.04));
}
#dm-cats .dm-cats-item:active { transform: scale(.98); }