:root{
      --bg: #ffffff;
      --muted: #9aa0a6;
      --accent: #2f7a3e;
      --danger: #e74c3c;
      --card: #f7f7f7;
      --black: #0b0b0b;
      font-size: 16px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background:var(--bg);
      color:var(--black);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* Container similar to mobile sidebar */
    .sidebar{
      max-width:420px;
      margin:20px auto;
      border:1px solid #e6e6e6;
      border-radius:10px;
      overflow:hidden;
      background:#fff;
      box-shadow:0 6px 18px rgba(0,0,0,0.04);
    }

    .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px;
      border-bottom:1px solid #eee;
    }
    .header .left{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:600;
    }
    .cart-dot{
      width:10px;height:10px;border-radius:50%;background:#2ecc71;display:inline-block;
      box-shadow:0 0 0 3px rgba(46,204,113,0.08);
    }
    .header .price{font-weight:700;}

    .item{
      display:flex;
      gap:12px;
      padding:16px;
      align-items:center;
      border-bottom:1px solid #f0f0f0;
    }
    .item .thumb{
      width:72px;height:72px;background:#eee;border-radius:6px;flex:0 0 72px;
      background-image:linear-gradient(135deg,#f0f0f0,#e9e9e9);
      display:flex;align-items:center;justify-content:center;color:#aaa;font-size:12px;
    }
    .item .meta{flex:1}
    .title{font-weight:600;margin-bottom:4px}
    .variant{color:var(--muted);font-size:0.92rem;margin-bottom:8px}
    .price-row{display:flex;align-items:center;justify-content:space-between}
    .price-row .price{font-weight:700}

    /* Quantity control */
    .qty{
      display:inline-flex;
      align-items:center;
      border:1px solid #e0e0e0;
      border-radius:8px;
      overflow:hidden;
      margin-left:8px;
    }
    .qty button{
      border:0;background:#fff;padding:8px 10px;font-weight:600;cursor:pointer;
    }
    .qty input{
      width:40px;border:0;text-align:center;font-weight:600;padding:8px 0;
      outline:none;
    }

    /* Promo */
    .promo{
      padding:12px 16px;
      border-bottom:1px solid #f1f1f1;
      display:flex;gap:8px;
    }
    .promo input{
      flex:1;padding:12px;border:1px solid #eee;border-radius:6px;background:var(--card);
      outline:none;
    }
    .promo button{
      padding:12px 14px;border:0;border-radius:6px;background:#ddd;cursor:pointer;
    }

    /* Summary */
    .summary{
      padding:14px 16px;
      border-bottom:1px solid #f1f1f1;
      font-size:0.96rem;
    }
    .summary .row{display:flex;justify-content:space-between;padding:8px 0}
    .summary .discount{color: #238b3a;} /* green */
    .summary .total{font-weight:800;font-size:1.05rem;padding-top:6px}

    /* Save info */
    .saveinfo{
      padding:14px 16px;
      border-bottom:1px solid #f1f1f1;
    }
    .saveinfo h4{margin:0 0 8px 0}
    .saveinfo p{margin:0 0 12px 0;color:var(--muted);font-size:0.95rem}
    .password-wrap{display:flex;gap:8px;align-items:center}
    .password-wrap input{
      flex:1;padding:12px;border:1px solid #eee;border-radius:6px;background:var(--card);
      outline:none;
    }
    .show-eye{
      cursor:pointer;padding:8px;border-radius:6px;border:1px solid #eee;background:#fff;
      display:inline-flex;align-items:center;justify-content:center;
    }

    /* Place order */
    .place{
      padding:16px;
    }
    .place button{
      width:100%;
      padding:14px 18px;
      background:#0b0b0b;color:#fff;border:0;border-radius:8px;font-weight:700;
      font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
    }

    /* small text */
    .small{font-size:0.86rem;color:var(--muted)}

    @media (max-width:440px){
      .sidebar{margin:8px;border-radius:0}
    }
    
    
    body{
    font-family: Arial, sans-serif;
    background:#f7f7f7;
}
.form-box{
    width:350px;
    margin:40px auto;
    padding:25px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
}
.form-box h2{
    text-align:center;
    margin-bottom:20px;
}
.form-box input,
.form-box textarea{
    width:100%;
    padding:10px;
    margin:8px 0;
    border:1px solid #ccc;
    border-radius:5px;
}
.form-box button{
    width:100%;
    padding:10px;
    background:#008CFF;
    color:#fff;
    border:none;
    font-size:16px;
    border-radius:5px;
    cursor:pointer;
}
.form-box button:hover{
    background:#0066cc;
}