/* ==========================================================
   ZTORE V2
   Mobile First
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#ffffff;

    font-family:'Poppins',sans-serif;

    color:#222;

}

/* ---------- Container ---------- */

.container{

    width:100%;
    max-width:500px;

    margin:auto;

    padding:20px 16px 30px;

}

/* ---------- Logo ---------- */

.logo{
    text-align:left;
    margin-top:4px;
}

.logo img {

    width:60px; /* mobile */

    height:auto;

    max-width:100%;

}

@media(min-width:768px) {

    .logo img {

    width:80px; /* desktop */

    }

}

/* ---------- Heading ---------- */

h1{

    font-size:24px;

    font-weight:600;

    text-align:center;

    margin-bottom:10px;

    color:#222;

}

/* ---------- Subtitle ---------- */

.subtitle{

    text-align:center;

    font-size:14px;

    color:#8A8A8A;

    font-weight:400;

    margin-top:-12px;

    margin-bottom:28px;

    line-height:22px;

}

/* ---------- Search ---------- */

.search-box{

    display:flex;

    align-items:center;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:14px 18px;

    margin-bottom:28px;

    transition:.25s;

}

.search-box:focus-within{

    border-color:#C7CDD6;

    box-shadow:0 4px 18px rgba(0,0,0,.05);

}

.search-box i{

    color:#9CA3AF;

    font-size:18px;

    margin-right:12px;

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    font-size:16px;

    font-family:'Poppins',sans-serif;

    background:transparent;

}

.search-box input::placeholder{

    color:#9CA3AF;

}

/* ---------- Restaurant List ---------- */

.restaurant-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ---------- Card ---------- */

.restaurant-card{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

    transition:.25s;

}

.restaurant-card{

    transition:.25s ease;

}

.restaurant-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 24px rgba(0,0,0,.08);

}

.restaurant-card:active{

    transform:scale(.98);

}
/* ---------- Image ---------- */
.restaurant-card img{

    width:100%;

    height:190px;

    object-fit:cover;

    object-position: center top;
    
    display:block;

    border-radius:16px 16px 0 0;

}
/* ---------- Name ---------- */
.restaurant-name{

    padding:18px;

    text-align:center;

    font-size:18px;

    font-weight:600;

    letter-spacing:.2px;

    color:#222;

}
/* ---------- Empty ---------- */

.no-result{

    text-align:center;

    color:#777;

    font-size:15px;

    padding:40px 10px;

}

/* ---------- Desktop ---------- */

@media(min-width:768px){

    .container{

        max-width:700px;

        padding-top:35px;

    }

    h1{

        font-size:28px;

    }

}

/* ---------- Add Kitchen ---------- */

.partner-card{

    margin-top:30px;

    margin-bottom:20px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:28px 22px;

    text-align:center;

}

.partner-card h2{

    font-size:22px;

    font-weight:600;

    color:#222;

    margin-bottom:12px;

}

.partner-card p{

    font-size:15px;

    color:#6B7280;

    line-height:1.7;

    margin-bottom:22px;

}

.partner-btn{

    width:100%;

    height:52px;

    border:none;

    border-radius:16px;

    background:#16A34A;

    color:#FFFFFF;

    font-family:'Poppins',sans-serif;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

}

.partner-btn:hover{

    background:#15803D;

    transform:translateY(-1px);

}

.partner-btn:active{

    transform:scale(.98);

}

/* Register */

/* ==========================================
   Registration
========================================== */

.register-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:28px 22px;

}

.subtitle{

    text-align:center;

    color:#6B7280;

    font-size:15px;

    line-height:1.7;

    margin-bottom:26px;

}

.input-box{

    display:flex;

    align-items:center;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:14px 16px;

    margin-bottom:18px;

    transition:.2s;

}

.input-box:focus-within{

    border-color:#C7CDD6;

    box-shadow:0 4px 18px rgba(0,0,0,.05);

}

.input-box i{

    color:#9CA3AF;

    font-size:18px;

    margin-right:14px;

}

.input-box input{

    width:100%;

    border:none;

    outline:none;

    font-family:'Poppins',sans-serif;

    font-size:16px;

    background:transparent;

}

.textarea-box{

    align-items:flex-start;

}

.textarea-box i{

    margin-top:4px;

}

.textarea-box textarea{

    width:100%;

    border:none;

    outline:none;

    resize:none;

    font-family:'Poppins',sans-serif;

    font-size:16px;

    background:transparent;

}

.register-note{

    margin-top:20px;

    text-align:center;

    color:#6B7280;

    font-size:14px;

    line-height:1.7;

}

/* ==========================================
   Custom Dialog
========================================== */

.dialog-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.45);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:20px;

}

.dialog-box{

    background:#FFF;

    width:100%;

    max-width:360px;

    border-radius:20px;

    padding:28px 24px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.18);

    animation:dialogPop .20s ease;

}

@keyframes dialogPop{

    from{

        transform:scale(.90);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.dialog-icon{

    width:70px;

    height:70px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#16A34A;

    color:#FFF;

    font-size:36px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

}

.dialog-title{

    font-size:22px;

    font-weight:600;

    color:#222;

    margin-bottom:10px;

}

.dialog-message{

    color:#666;

    font-size:15px;

    line-height:1.7;

    margin-bottom:24px;

}

.dialog-button{

    width:100%;

    height:50px;

    border:none;

    border-radius:14px;

    background:#16A34A;

    color:#FFF;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}