.lpui{ --a:#ff5c00; --a2:#ff7a2e; --b:rgba(0,0,0,.10); --m:rgba(0,0,0,.55);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.lpui *{ box-sizing:border-box; }

.lpui-panel{
    background:#fff !important;
    border:1px solid var(--b) !important;
    border-radius:18px !important;
    box-shadow:0 12px 32px rgba(0,0,0,.08) !important;
    padding:16px !important;
}
.lpui-head{ display:flex !important; align-items:center !important; justify-content:space-between !important; margin-bottom:12px !important; }
.lpui-title{ margin:0 !important; font-weight:950 !important; font-size:16px !important; }

/* --- SIZE --- */
.lpui-sizeGrid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
}
@media(max-width:768px){ .lpui-sizeGrid{ grid-template-columns:1fr !important; } }

.lpui-sizeCard{
    position:relative !important;
    border:1px solid var(--b) !important;
    border-radius:16px !important;
    padding:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    cursor:pointer !important;
    background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,0)) !important;
    transition:.16s ease !important;
}
.lpui-sizeCard:hover{ transform:translateY(-1px) !important; border-color:rgba(0,0,0,.18) !important; }
.lpui-sizeCard.is-selected{
    border-color: rgba(255,92,0,.70) !important;
    box-shadow:0 0 0 5px rgba(255,92,0,.14) !important;
    background:radial-gradient(140% 120% at 0% 0%, rgba(255,92,0,.12), transparent 60%), #fff !important;
}
.lpui-sizeName,.lpui-sizePrice{ font-weight:950 !important; }
.lpui-radio{ position:absolute !important; inset:0 !important; opacity:0 !important; pointer-events:none !important; }

/* --- EXTRAS HEADER --- */
.lpui-counter{
    display:flex !important; gap:10px !important; align-items:center !important;
    background:rgba(0,0,0,.02) !important;
    border:1px solid var(--b) !important;
    border-radius:14px !important;
    padding:8px 12px !important;
    white-space:nowrap !important;
}
.lpui-counterLabel{ color:var(--m) !important; font-size:12px !important; }

/* --- SEARCH --- */
.lpui-search{
    margin:8px 0 10px !important;
    display:flex !important; align-items:center !important; gap:8px !important;
    border:1px solid var(--b) !important;
    border-radius:14px !important;
    padding:10px 12px !important;
    background:rgba(0,0,0,.02) !important;
}
.lpui-searchIcon{ color:rgba(0,0,0,.45) !important; font-weight:900 !important; }
.lpui-search input{
    width:100% !important; border:0 !important; outline:none !important; background:transparent !important;
    font-weight:800 !important; color:#111 !important; -webkit-text-fill-color:#111 !important;
}
.lpui-clear{
    width:30px !important; height:30px !important;
    border:0 !important; border-radius:10px !important; background:transparent !important;
    cursor:pointer !important; font-size:18px !important; color:rgba(0,0,0,.45) !important;
}
.lpui-clear:hover{ background:rgba(0,0,0,.06) !important; }

.lpui-warn{
    display:none;
    margin-top:8px !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    background:rgba(255,0,0,.08) !important;
    border:1px solid rgba(255,0,0,.18) !important;
    font-size:13px !important;
}

/* --- EXTRAS LIST --- */
.lpui-extraList{ display:flex !important; flex-direction:column !important; gap:10px !important; margin-top:10px !important; }
.lpui-extraRow{
    border:1px solid var(--b) !important;
    border-radius:16px !important;
    padding:12px !important;
    display:grid !important;
    grid-template-columns:1fr 300px !important;
    gap:12px !important;
    align-items:center !important;
    background:#fff !important;
}
@media(max-width:768px){ .lpui-extraRow{ grid-template-columns:1fr !important; } }
.lpui-extraTitle{ font-weight:950 !important; }
.lpui-extraRight{ display:flex !important; justify-content:flex-end !important; align-items:center !important; gap:70px !important; }
.lpui-extraPrice{ min-width:95px !important; text-align:right !important; font-weight:950 !important; white-space:nowrap !important; }

/* --- STEPPER (NUMBERS ALWAYS VISIBLE) --- */
.lpui-stepper{
    display:inline-flex !important;
    align-items:center !important;
    border:1px solid var(--b) !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:rgba(0,0,0,.02) !important;
}
.lpui-stepBtn{
    width:36px !important; height:36px !important;
    border:0 !important; background:transparent !important;
    cursor:pointer !important; font-weight:950 !important; font-size:18px !important;
    color:#111 !important;
}
.lpui-stepBtn:hover{ background:rgba(0,0,0,.06) !important; }

/* ✅ Tema ne yaparsa yapsın sayı görünür (text-shadow trick) */
.lpui-stepInp{
    width:64px !important; height:36px !important;
    border:0 !important; outline:none !important;
    background:transparent !important;
    text-align:center !important;
    font-weight:950 !important; font-size:14px !important;
    line-height:36px !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 0 #111 !important;
    caret-color:#111 !important;
    opacity:1 !important;

    appearance:textfield !important;
    padding:0 !important; margin:0 !important;
}
.lpui-stepInp::-webkit-outer-spin-button,.lpui-stepInp::-webkit-inner-spin-button{ -webkit-appearance:none !important; margin:0 !important; }

/* --- ACCORDION --- */
.lpui-acc{ margin-top:12px !important; border:1px solid var(--b) !important; border-radius:16px !important; overflow:hidden !important; }
.lpui-accBtn{
    width:100% !important; border:0 !important;
    background:rgba(0,0,0,.02) !important;
    padding:12px 14px !important;
    cursor:pointer !important;
    display:flex !important; justify-content:space-between !important;
    font-weight:950 !important;
}
.lpui-accBody{ padding:12px !important; background:#fff !important; }
.lpui-accChev{ transition:transform .18s ease !important; }
.lpui-acc.is-open .lpui-accChev{ transform:rotate(180deg) !important; }

/* --- FLOATING (BOTTOM LEFT, COLLAPSIBLE) --- */
.lpui-float{
    position:fixed !important;
    left:16px !important; bottom:16px !important;
    width:360px !important;
    max-width:calc(100vw - 32px) !important;
    border-radius:22px !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 20px 70px rgba(0,0,0,.18) !important;
    z-index:999999 !important;

    opacity:0 !important;
    transform:translateY(18px) !important;
    pointer-events:none !important;
    transition:.22s ease !important;
}
.lpui-float[data-visible="1"]{ opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important; }

.lpui-floatHead{
    width:100% !important;
    border:0 !important;
    background:linear-gradient(135deg,var(--a),var(--a2)) !important;
    color:#fff !important;
    padding:14px 16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    cursor:pointer !important;
    text-align:left !important;
}
.lpui-floatTitle{ font-weight:950 !important; font-size:15px !important; }
.lpui-floatMini{ padding:7px 10px !important; border-radius:999px !important; background:rgba(255,255,255,.22) !important; font-weight:950 !important; white-space:nowrap !important; }
.lpui-floatChev{ transition:transform .18s ease !important; opacity:.9 !important; }
.lpui-float[data-collapsed="1"] .lpui-floatChev{ transform:rotate(180deg) !important; }

.lpui-floatBody{
    padding:14px 16px 16px !important;
    max-height:520px !important;
    overflow:hidden !important;
    transition:max-height .22s ease, padding .22s ease, opacity .18s ease !important;
    opacity:1 !important;
}
.lpui-float[data-collapsed="1"] .lpui-floatBody{
    max-height:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    opacity:0 !important;
}

.lpui-row{ display:flex !important; justify-content:space-between !important; padding:7px 0 !important; font-size:14px !important; }
.lpui-row span{ color:rgba(0,0,0,.55) !important; font-weight:700 !important; }
.lpui-row strong{ font-weight:950 !important; }
.lpui-rowTotal{ font-size:16px !important; padding-top:10px !important; }
.lpui-line{ height:1px !important; background:rgba(0,0,0,.10) !important; margin:10px 0 !important; }

.lpui-actions{ display:flex !important; gap:10px !important; align-items:center !important; margin-top:12px !important; }
.lpui-btn{
    flex:1 !important;
    height:40px !important;
    border:0 !important;
    border-radius:14px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    background:linear-gradient(135deg,var(--a),var(--a2)) !important;
    color:#fff !important;
    font-weight:950 !important;
    font-size:14px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:0 14px 30px rgba(255,92,0,.22) !important;
    cursor:pointer !important;
}
.lpui-btn:active{ transform:translateY(1px) !important; }

@media(max-width:480px){ .lpui-float{ left:10px !important; bottom:10px !important; width:calc(100vw - 20px) !important; } }

/* Floating renkler kaybolmasın diye super-override */
#lpuiFloat .lpui-floatHead{
    background-image: linear-gradient(135deg,#ff5c00,#ff7a2e) !important;
    background-color: #ff5c00 !important;
    color: #fff !important;
}
#lpuiFloat .lpui-btn{
    background-image: linear-gradient(135deg,#ff5c00,#ff7a2e) !important;
    background-color: #ff5c00 !important;
    color: #fff !important;
}

/* Bazı temalar button’a filter/appearance basıyor */
#lpuiFloat button{
    -webkit-appearance: none !important;
    appearance: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* mini total pill */
#lpuiMiniTotal{
    background: rgba(255,255,255,.22) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}