/* =========================================================
CAFE 54R ORDER SYSTEM
PRODUCTION VERSION
========================================================= */

:root{
--primary:#ff6b35;
--primary-hover:#f15a24;
--success:#16a34a;
--dark:#1f2937;
--light:#f8fafc;
--border:#e5e7eb;
--white:#ffffff;
--shadow:0 10px 30px rgba(0,0,0,.08);
}

/* =========================================================
GLOBAL
========================================================= */

*{
box-sizing:border-box;
}

body{
background:#f4f6f9;
font-family:'Segoe UI',sans-serif;
color:#333;
padding-bottom:100px;
}

a{
text-decoration:none;
}

.container{
max-width:1400px;
}

/* =========================================================
HEADER
========================================================= */

.order-header{

    background:#1f2937 !important;

    color:#fff;

    padding:22px;

    border-radius:20px;

    margin-bottom:25px;
}

.app-title{

    color:#ffb703 !important;

    font-size:30px;

    font-weight:800;
}

.order-header small{

    color:#d1d5db;
}

/* =========================================================
CARD
========================================================= */

.card{


border:none;

border-radius:20px;

overflow:hidden;

box-shadow:
0 5px 20px rgba(0,0,0,.05);


}

.card-body{
padding:20px;
}

/* =========================================================
FORM
========================================================= */

.form-control{


border-radius:14px;

border:1px solid #ddd;

min-height:48px;


}

.form-control:focus{


border-color:var(--primary);

box-shadow:
0 0 0 .15rem rgba(255,107,53,.15);


}

textarea.form-control{


min-height:100px;

resize:none;


}

/* =========================================================
MENU CARD
========================================================= */

.menu-card{


background:#fff;

border-radius:18px;

overflow:hidden;

border:1px solid #eee;

transition:.25s ease;

height:100%;

animation:fadeIn .35s ease;


}

.menu-card:hover{


transform:translateY(-4px);

box-shadow:
0 15px 35px rgba(0,0,0,.08);


}

.menu-img{


width:100%;

height:210px;

object-fit:cover;

background:#eee;


}

.menu-body{


padding:15px;


}

.menu-body h6{


font-weight:700;

margin-bottom:5px;

min-height:48px;


}

.menu-body small{


color:#6b7280;


}

.price{


color:var(--primary);

font-size:20px;

font-weight:700;

margin:10px 0;


}

/* =========================================================
INPUT QTY
========================================================= */

.qty-input{


text-align:center;

font-weight:700;

border-radius:12px;


}

/* =========================================================
TOTAL BOX
========================================================= */

.total-box{


background:#fff;

border-radius:18px;

padding:20px;

box-shadow:var(--shadow);

position:sticky;

top:20px;


}

.total-title{


font-weight:700;

margin-bottom:10px;


}

.total-harga{


color:var(--success);

font-size:28px;

font-weight:800;


}

/* =========================================================
STICKY ORDER BUTTON
========================================================= */

.sticky-order{


position:fixed;

left:0;
right:0;
bottom:0;

background:#fff;

padding:12px;

box-shadow:
0 -5px 20px rgba(0,0,0,.08);

z-index:999;


}

.sticky-order .btn{

```
height:58px;

border:none;

border-radius:14px;

font-size:18px;

font-weight:700;

background:var(--primary);
```

}

.sticky-order .btn:hover{

```
background:var(--primary-hover);
```

}

/* =========================================================
BUTTON
========================================================= */

.btn-primary{

```
background:var(--primary);

border:none;
```

}

.btn-primary:hover{

```
background:var(--primary-hover);
```

}

/* =========================================================
ALERT
========================================================= */

.alert{

```
border:none;

border-radius:14px;
```

}

/* =========================================================
CATEGORY
========================================================= */

.category-title{

```
font-size:24px;

font-weight:700;

color:var(--dark);

margin-bottom:20px;
```

}

/* =========================================================
RESPONSIVE TABLET
========================================================= */

@media(max-width:991px){

```
.menu-img{
    height:180px;
}

.app-title{
    font-size:26px;
}
```

}

/* =========================================================
RESPONSIVE MOBILE
========================================================= */

@media(max-width:768px){

```
.container{
    padding-left:12px;
    padding-right:12px;
}

.order-header{
    padding:18px;
}

.app-title{
    font-size:22px;
}

.menu-img{
    height:150px;
}

.menu-body{
    padding:12px;
}

.menu-body h6{
    min-height:auto;
    font-size:14px;
}

.price{
    font-size:16px;
}

.sticky-order .btn{
    height:55px;
    font-size:16px;
}
```

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

```
.menu-img{
    height:130px;
}

.price{
    font-size:15px;
}

.menu-body{
    padding:10px;
}

.app-title{
    font-size:20px;
}
```

}

/* =========================================================
ANIMATION
========================================================= */

@keyframes fadeIn{

```
from{
    opacity:0;
    transform:translateY(15px);
}

to{
    opacity:1;
    transform:translateY(0);
}
```

}