/*  Base layout  */
body{
    font-family:Arial,sans-serif;
}

/*  Navbar  */
.navbar{
    background-color:#212529;
    margin-bottom:40px;
}
.navbar-brand img{height:40px}

.navbar-nav{margin-left:auto;margin-right:auto}
.nav-link{
    color:#fff!important;
    font-size:1rem;
    margin:0 10px;
}

/* cart icon & badge */
.cart-icon{
    font-size:1.8rem;
    color:#fff;
    position:relative;
}
.cart-badge{
    background:red;
    color:#fff;
    font-size:.9rem;
    font-weight:bold;
    border-radius:50%;
    padding:4px 8px;
    position:absolute;
    top:-10px;
    right:-15px
}

/*  Navbar – tablet & down  */
@media(max-width:992px){
    .navbar .container{display:flex;align-items:center;justify-content:space-between}
    .navbar-brand{order:0;margin-right:auto}
    .cart-icon{order:2;margin-left:auto;font-size:1.2rem}
    .navbar-toggler{order:1;margin-left:10px;font-size:1.5rem;color:#fff}
    .navbar-collapse{order:3;width:100%;flex-grow:1;text-align:center}
    .navbar-nav{flex-direction:column;gap:10px}
}

/*  Tables  */
.table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:20px
}
.table th,.table td{
    text-align:center;
    padding:8px;
    border:1px solid #ddd;
    font-size:1rem
}

/* order summary table */
.summary-table{
    width:100%;
    margin-top:20px;
    border-collapse:collapse
}
.summary-table th,
.summary-table td{
    padding:10px;
    border:1px solid #ddd;
    text-align:left;
    font-size:1rem
}
.summary-table th{background:#f8f9fa;font-weight:bold}
.summary-table .total-row th{background:#e9ecef}
.summary-table .total-row td{font-weight:bold;color:#212529;font-size:1.2rem}

/*  Buttons  */
.btn.btn-sm.btn-danger{
    display:inline-block;
    height:35px;
    padding:5px 15px;
    font-size:.9rem;
    transition:background-color .3s,box-shadow .3s
}
.btn.btn-sm.btn-danger:hover{background:#c82333;box-shadow:0 4px 4px rgba(0,0,0,.2)}

.btn.btn-sm.btn-secondary{
    padding:3px 6px;
    font-size:.5rem;
    border-radius:3px;
    width:30px;
    height:30px;
    line-height:1
}

/*  Mobile ≤ 768px  */
@media(max-width:768px){
    .cart-item-image{width:45px;height:auto;margin-right:10px}
    .btn.btn-sm.btn-danger{height:20px;padding:4px 8px;font-size:.5rem}
    .table th,
    .table td{padding:6px;font-size:.6rem}
    .summary-table td,
    .summary-table th{font-size:.9rem}
    .summary-table .total-row td{font-size:1rem}
}

/*  Tablet 768-991px  */
@media(min-width:768px)and(max-width:991px){
    .cart-item-image{width:55px;height:auto}
    .summary-table .total-row td{font-size:1.2rem}
}

/*  Desktop ≥ 992px  */
@media (min-width: 992px) {
    /* INLINE image + small right‐margin so name sits beside it */
    .cart-item-image {
        width: 65px;
        height: auto;
        display: inline-block;  /* inline again (not block) */
        margin: 0 10px 0 0;     /* 10px space to the right */
        vertical-align: middle; /* center against the text */
    }

    /* table cells */
    .table th,
    .table td {
        font-size: 1.2rem;
        height: 60px;
        vertical-align: middle;
    }

    /* delete button */
    .btn.btn-sm.btn-danger {
        height: 40px;
        padding: 6px 20px;
        font-size: 1rem;
    }

    /* table data padding */
    .table td {
        padding: 15px;
    }

    /* summary table */
    .summary-table td,
    .summary-table th {
        font-size: 1.2rem;
    }
    .summary-table .total-row td {
        font-size: 1.4rem;
    }
}

/*  Coupon area  */
.coupon-section{
    background:#f9f9f9;
    border:1px solid #ddd;
    padding:10px;
    border-radius:5px
}
#coupon_form{
    background:#fff;
    padding:10px;
    border-radius:5px;
    box-shadow:0 2px 4px rgba(0,0,0,.1)
}
#coupon_form input[type="text"]{font-size:.85rem;padding:5px}
#coupon_form .btn{font-size:.85rem;padding:5px 10px}

/*  Logo scaling  */
.logo-img{width:120px;height:auto}
@media(min-width:768px){.logo-img{width:150px}}
@media(min-width:1200px){.logo-img{width:200px}}