/* === General === */
.uber-menu{
--uber-bg:#f6f6f6;
--uber-card:#ffffff;
--uber-text:#222;
--uber-accent:#ff6b00;
--uber-border:#e6e6e6;
font-family:Arial;
background:var(--uber-bg);
color:var(--uber-text);
padding-bottom:0px;/*80px; *//* hapėsirė pėr floating cart */

    
	
}

/* Dark mode */
.uber-menu.uber-dark{
--uber-bg:#121212;
--uber-card:#1e1e1e;
--uber-text:#eee;
--uber-border:#333;
}

.body-uber {
  --uber-bg:#f6f6f6;
  background:var(--uber-bg);
  /* ?? shumė e rėndėsishme */
  /*
  -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
    white-space: nowrap;
	will-change: scroll-position;
	overscroll-behavior-y:contain;
	touch-action:pan-y;
	*/
}

.body-uber.uber-dark {
  --uber-bg:#121212;
}

/* === Header === */
.uber-header{
padding:16px;
font-size:20px;
font-weight:600;
display:flex;
justify-content:space-between;
background:var(--uber-card);
border-bottom:1px solid var(--uber-border);
}
.uber-theme-btn{
background:var(--uber-accent);
color:white;
border:none;
padding:6px 12px;
border-radius:20px;
cursor:pointer;
}

/* container social buttons */
.uber-groups-social {
    display: flex;
    gap: 10px;
    margin-bottom: 0px;
	margin-top: 10px;
	margin-left:10px;
}

/* style for all buttons */
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #555;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
}

.social-btn svg {
    fill: white;
}

.social-btn:hover {
    transform: scale(1.2);
}

/* Optional: colors per network */
.social-btn.google { background: #DB4437; }
.social-btn.instagram { background: #C13584; }
.social-btn.facebook { background: #4267B2; }
.social-btn.tripadvisor { background: #00AF87; }

/* efekt hover */
.social-btn:hover { transform: scale(1.1); }

/* === Search === */
.uber-search{
padding:10px;
background:var(--uber-card);
border-bottom:1px solid var(--uber-border);
position:sticky;
top:0; /*50px;*/
z-index:19;
}
.uber-search input{
width:100%;
padding:10px;
border-radius:10px;
border:1px solid var(--uber-border);
}

/* === Groups (Mengjes, Pjata...) === */
.uber-groups{
display:flex;
gap:8px;
overflow-x:auto;
padding:10px;
background:var(--uber-card);
border-bottom:1px solid var(--uber-border);
position:sticky;
top:0;
z-index:20;
}
.uber-groups button{
border:none;
padding:8px 14px;
border-radius:20px;
background:#eaeaea;
cursor:pointer;
white-space:nowrap;
}
.uber-groups button.uber-active{
background:var(--uber-accent);
color:white;
}

/* === Categories === */
.uber-categories-wrapper{
position:sticky;
top:50px;
z-index:19;
background:var(--uber-card);
}

.uber-categories{
display:flex;
gap:8px;
overflow-x:auto;
padding:10px;
padding-right:60px;
border-bottom:1px solid var(--uber-border);
  
    -webkit-overflow-scrolling: touch; /* ?? shumė e rėndėsishme */
    scroll-behavior: smooth;
    white-space: nowrap;
	will-change: scroll-position;
	overscroll-behavior-x:contain;
	touch-action:pan-x;
}

.uber-categories button{
border:none;
padding:6px 12px;
border-radius:20px;
background:#eaeaea;
cursor:pointer;
white-space:nowrap;
font-size:18px;
z-index:18;
}

.uber-more-btn{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
width:32px;
height:32px;
border-radius:50%;
background:#ddd;
z-index:20;
}

.uber-categories-wrapper::after{
content:"";
position:absolute;
right:0;
top:0;
width:40px;
height:100%;
pointer-events:none;
background:linear-gradient(to right, transparent, var(--uber-card));
}

.uber-categories button.uber-active{
background:var(--uber-accent);
color:white;
}



/* === Section === */
.uber-section{
padding:14px;
font-size:23px;
font-weight:600;
}
/* kjo e con direct scrollin te elementi saktesisht meqenese kemi dhe header*/
.uber-section {
    scroll-margin-top: 100px;
}

/* === Grid Horizontal === */

/* === Grid Horizontal Scroll === */
.uber-grid-horizontal-scroll{
display:grid;
grid-auto-flow:column;
grid-auto-columns:calc((100% - 24px) / 2);
gap:12px;
padding:12px;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch; 
}

.uber-grid-horizontal-scroll > *{
min-width:0; 
}


/* === Grid Vertical === */
.uber-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
padding:12px;
}
@media (min-width:600px){
.uber-grid{
grid-template-columns:repeat(2,1fr);
}}
@media (min-width:1000px){
.uber-grid{
grid-template-columns:repeat(4,1fr);
}}

/* === Card === */

.uber-card{
background:var(--uber-card);
border-radius:12px;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
position: relative; /* duhet per absolute positioning te asterix */
}


.uber-img-box{
width:100%;
aspect-ratio:1/1;
background:var(--uber-bg);

display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border-radius:12px;
}

.uber-img{
max-width:100%;
max-height:100%;
object-fit:contain;
border-radius:12px;
}

.uber-video{
width:100%;
height:100%;
object-fit:cover;
border-radius:12px;
}

.uber-fav {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 20px;
    color: gold;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    transition: transform 0.2s;
}

.uber-fav.active {
    color: red;
    transform: scale(1.2);
}

/* Mini menu djathtas */
.uber-card-menu {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
    background: transparent;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 12px;
    align-items: center;
    z-index: 10;
}

.uber-card-menu button {
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 14px;
}

.uber-card-menu input[type="checkbox"] {
    cursor: pointer;
}


/* body */

.uber-card-body{
padding:12px;
flex:1;
}

.uber-card-body{
padding:10px;
}
.uber-title{
font-weight:600;
font-size:14px;
}
.uber-desc{
font-size:12px;
opacity:0.7;
min-height:18px;

 white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;

    line-height: 1.4;
	
}
.uber-desc-extra{
font-size:12px;
opacity:0.7;
color:#4cd964;
min-height:18px;
}
.uber-price{
font-weight:700;
color:var(--uber-accent);
}



/* === Quantity === */
.uber-qty{
display:flex;
align-items:center;
gap:8px;
margin-top:8px;
}
.uber-qty button{
width:28px;
height:28px;
border:none;
border-radius:6px;
background:var(--uber-accent);
color:white;
font-weight:bold;
cursor:pointer;
}
.uber-count{
min-width:18px;
text-align:center;
font-weight:600;
}

/* === Empty === */
.uber-empty{
display:none;
text-align:center;
padding:30px;
opacity:0.7;
}

/* === Call Waiter === */
.uber-callwaiter-btn{
position:fixed;
bottom:80px;
right:20px;
background:#ff6b00;
color:white;
padding:14px 18px;
border-radius:30px;
font-weight:600;
cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,0.25);
z-index:999;
}
.uber-callwaiter-btn-badge{
display:none;
position:fixed;
bottom:60px;
right:20px;
background:#ff6b00;
color:white;
padding:8px 8px;
border-radius:50%;
/*font-weight:600;*/
font-size:12px;
cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,0.25);
z-index:1000;
}

/* === Call Waiter Modal === */
.uber-waiter-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
align-items:center;
justify-content:center;
z-index:1000;
}
.uber-waiter-box{
background:white;
padding:20px;
border-radius:12px;
width:90%;
max-width:420px;
}
.uber-waiter-title{
font-size:18px;
font-weight:600;
margin-bottom:10px;
}
.uber-waiter-options{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-bottom:10px;
}
.uber-waiter-options button{
padding:10px;
border:none;
border-radius:8px;
background:#eee;
cursor:pointer;
}
.uber-waiter-options button.uber-selected{
background:#ff6b00;
color:white;
}
.uber-waiter-text{
width:100%;
padding:8px;
border-radius:8px;
border:1px solid #ccc;
margin-top:6px;
}
.uber-waiter-send{
margin-top:12px;
width:100%;
padding:10px;
border:none;
background:#ff6b00;
color:white;
border-radius:8px;
cursor:pointer;
}
.uber-waiter-close{
margin-top:8px;
text-align:center;
cursor:pointer;
font-size:14px;
opacity:0.7;
}

/* === Item Modal === */
.uber-item-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:1000;
}
.uber-item-box{
background:white;
border-radius:12px;
overflow:hidden;
max-width:500px;
width:90%;
}
.uber-item-box img{
width:100%;
height:260px;
object-fit:cover;
}
.uber-item-content{
padding:16px;
}
.uber-modal-title{
font-size:20px;
font-weight:600;
}
.uber-modal-desc{
margin-top:6px;
opacity:0.8;

 white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;

    line-height: 1.4;
}
.uber-modal-price{
margin-top:10px;
font-weight:700;
color:#ff6b00;
}
.uber-modal-close{
padding:12px;
text-align:center;
cursor:pointer;
font-weight:600;
}

/* === Floating Cart === */
.uber-cart-bar{
position:fixed;
bottom:0;
left:0;
width:100%;
background:var(--uber-accent);
color:white;
display:flex;
justify-content:space-between;
padding:14px 18px;
font-weight:600;
cursor:pointer;
z-index:900;
}

/* === Cart Modal === */
.uber-cart-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:1000;
}
.uber-cart-box{
background:white;
border-radius:12px;
width:90%;
max-width:420px;
padding:20px;
}
.uber-cart-title{
font-size:20px;
font-weight:600;
margin-bottom:10px;
}
.uber-cart-item{
display:flex;
justify-content:space-between;
margin-bottom:8px;
}
.uber-cart-total{
margin-top:10px;
font-weight:700;
}
.uber-checkout-btn{
width:100%;
margin-top:14px;
padding:12px;
border:none;
background:#ff6b00;
color:white;
border-radius:8px;
cursor:pointer;
}

/* === Modifiers Modal === */
.uber-mod-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
align-items:center;
justify-content:center;
z-index:1000;
}
.uber-mod-box{
background:white;
border-radius:12px;
width:90%;
max-width:420px;
padding:20px;
}
.uber-mod-box label{
display:block;
margin-bottom:8px;
cursor:pointer;
}
.uber-mod-box button{
margin-top:10px;
padding:10px;
width:100%;
border:none;
background:#ff6b00;
color:white;
border-radius:8px;
cursor:pointer;
}

/* modal form qe shikon kategorite */
.uber-cat-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:none;
z-index:999;
}

.uber-cat-content{
position:absolute;
bottom:0;
width:100%;
max-height:80%;
background:#fff;
border-radius:16px 16px 0 0;
padding:15px;
overflow:auto;
}

.uber-cat-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
font-weight:bold;
}

.uber-cat-header button{
border:none;
background:none;
font-size:18px;
cursor:pointer;
}

.uber-cat-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
transition: all 0.2s ease;
}

.uber-cat-item{
padding:12px;
border-radius:12px;
background:#f3f3f3;
text-align:center;
cursor:pointer;
font-size:14px;
min-width:0;
}

.uber-cat-item:hover{
background:#e0e0e0;
}

/* 23.03.2026 menuja te jete me rreshta */

/* === Grid Table (list style) === */
.uber-grid-table{
display:flex;
flex-direction:column;
gap:10px;
padding:12px;
}

/* row item */
.uber-table-item{
background:var(--uber-card);
border-radius:10px;
padding:10px 12px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* rreshti kryesor: emri --- cmimi */
.uber-table-row{
display:flex;
align-items:center;
gap:8px;
}

/* emri majtas */
.uber-table-title{
font-weight:600;
font-size:15px;
white-space:nowrap;
}

/* viza (auto stretch) */
.uber-table-dots{
flex:1;
border-bottom:1px dashed var(--uber-border);
transform:translateY(-2px);
}

/* cmimi djathtas */
.uber-table-price{
font-weight:700;
color:var(--uber-accent);
white-space:nowrap;
}

/* pershkrimi poshte */
.uber-table-desc{
font-size:13px;
opacity:0.7;
margin-top:4px;

white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;

    line-height: 1.4;
}

/* alergjenet */
.uber-table-allergens{
font-size:12px;
opacity:0.75;
margin-top:3px;
color:#e67e22; /* portokalli i butė */
}

/* optional: nė dark mode pak mė soft */
.uber-menu.uber-dark .uber-table-allergens{
color:#ffb347;
}

.uber-table-allergens::before{
content:"Alergjenė: ";
font-weight:600;
}

/* toogle te sessioni i kategorise per ti mbyllur*/

/* header container */
/*
.uber-section-header{
display:flex;
flex-direction:column;
gap:4px;
flex-wrap:nowrap; 
}
*/
.uber-section-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
flex-wrap:nowrap; /* ? KY E ZGJIDH PROBLEMIN */
}

/* ROW 1 = titulli */
.uber-section-row{
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
}

/* majtas */
.uber-section-left{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

/* titulli */
.uber-section-title{
font-size:23px;
font-weight:600;
}

/* dots (vetėm pėr row 1) */
.uber-section-dots{
flex:1;
border-bottom:1px dashed var(--uber-border);
transform:translateY(2px);
}

/* djathtas */
.uber-section-right{
display:flex;
align-items:center;
flex-shrink:0; /* mos u ngushto */
}

/* emoji */
.uber-cat-emoji-right{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px; /* stabilizon hapėsirėn */
font-size:18px;
white-space:nowrap; /* mos thyhet */
flex-shrink:0;
}

/* pershkrimi poshte */
.uber-section-desc{
font-size:13px;
opacity:0.7;
margin-left:28px; /* align me tekstin (emoji offset) */
}

.uber-section-desc{
margin-left:30px; /* fine-tune sipas emoji */
}

@media (max-width:600px){

  .uber-section-title{
    /*font-size:16px;*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .uber-cat-emoji-right{
    font-size:16px;
  }

}