/* BikeLocker - iPhone Design */


* {
    box-sizing: border-box;
}



body {

    margin:0;

    padding:20px;

    padding-bottom:60px;


    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Helvetica Neue",
    Arial,
    sans-serif;


    background:#f2f2f7;

    color:#111;

}





header {

    text-align:center;

    margin-top:20px;

    margin-bottom:30px;

}



header h1 {

    font-size:38px;

    margin:0;

    letter-spacing:-1px;

}



header p {

    font-size:18px;

    margin-top:8px;

    color:#6e6e73;

}





.card {


    background:white;


    border-radius:25px;


    padding:20px;


    margin-bottom:20px;


    box-shadow:

    0 8px 25px rgba(0,0,0,.08);


}





h2 {


    margin-top:0;

    font-size:22px;

}





#lastDate {


    font-size:18px;

    font-weight:600;

    margin:15px 0;


}







button {


    width:100%;


    padding:15px;


    border:none;


    border-radius:16px;


    background:#007aff;


    color:white;


    font-size:17px;


    font-weight:600;


}





button:active {

    transform:scale(.97);

}








.summary {


    display:flex;


    gap:15px;


    margin-bottom:30px;


}





.summary-box {


    flex:1;


    background:white;


    border-radius:22px;


    padding:20px;


    text-align:center;


    box-shadow:

    0 6px 20px rgba(0,0,0,.08);


}





.summary-box span {


    display:block;


    color:#6e6e73;


    font-size:15px;


    margin-bottom:8px;


}



.summary-box strong {


    font-size:34px;


}







.summary-box:last-child strong {


    color:#ff3b30;


}







.category-title {


    margin-top:35px;


}







.product {


    background:white;


    border-radius:20px;


    padding:15px;


    margin-bottom:12px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    box-shadow:

    0 5px 15px rgba(0,0,0,.07);


}



.product.empty {


    border:2px solid #ff3b30;


}






.product-name {


    font-size:17px;

    font-weight:600;


}





.controls {


    display:flex;


    align-items:center;


    gap:8px;


}





.controls button {


    width:40px;


    height:40px;


    padding:0;


    border-radius:50%;


    font-size:24px;


}





.amount-input {


    width:60px;


    height:40px;


    text-align:center;


    border-radius:12px;


    border:1px solid #ccc;


    font-size:18px;


    font-weight:600;


}








/* Fotos */


.photos-top {


    display:flex;


    gap:10px;


    overflow-x:auto;


    margin:15px 0;


}



.photos-top img {


    width:130px;


    height:130px;


    object-fit:cover;


    border-radius:18px;


}





#photoGallery {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:10px;


    margin-top:15px;


}



#photoGallery img {


    width:100%;


    aspect-ratio:1/1;


    object-fit:cover;


    border-radius:18px;


}







input[type="file"] {


    width:100%;


    padding:12px;


    border-radius:15px;


    background:#f2f2f7;


}








/* Dark Mode */


@media(prefers-color-scheme:dark){


body {

    background:#000;

    color:white;

}



.card,
.summary-box,
.product {

    background:#1c1c1e;

    color:white;

}



header p,
.summary-box span {

    color:#aaa;

}



.amount-input {

    background:#2c2c2e;

    color:white;

    border:none;

}



}