/* Bottom-to-top slide modal */
    .modal.fade .modal-dialog {
      transform: translateY(100%);
      transition: transform .4s ease-out;
      margin: 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      max-width: 640px;           /* keeps it pleasant on larger screens */
      left: 50%;
      transform: translate(-50%, 100%);
    }
    .modal.show .modal-dialog {
      transform: translate(-50%, 0);
    }

    /* Rounded top for the sheet */
    .modal-content {
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border: none;
      box-shadow: 0 -8px 30px rgba(0,0,0,.15);
    }

    /* Handle */
    .sheet-handle {
      width: 56px; height: 5px; border-radius: 99px;
      background: #dee2e6; margin: .5rem auto 0.25rem auto;
    }

    /* Row cards like your image */
    .option-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      background: #fff;
      border: 1px solid #eef0f3;
      border-radius: 14px;
      padding: .95rem .75rem;
      box-shadow: 0 2px 8px rgba(31,36,48,.04);
    }
    .opt-left{
      display:flex; align-items:center; gap:.6rem;
      color:#1f2430;
    }
    .size-chip {
      height: 30px; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 600; font-size: .9rem; color: #6c757d;
      background: #f4f6fb; border: 1px solid #e9edf2; padding:0px 10px;
    }
    .price {
      font-weight: 600;
      color: #1f2430;
      font-size:10pt;
    }

    /* Quantity control (pill) */
    .qty-wrap {
      display: inline-flex; align-items: center; gap:.4rem;
    }
    .qty-wrap .btn, .qty-wrap .form-control {
      border-radius: 10px;
      height: 36px;
    }
    .qty-wrap .btn {
      padding: 0 .9rem;
      line-height: 36px;
    }
    .qty-wrap .form-control {
      width: 76px; text-align: center; font-weight: 600;
      padding: 0;
    }

    /* Update Basket button (full-width, like screenshot) */
    .btn-basket {
      width: 100%;
      border-radius: 8px;
      font-weight: 600;
      padding: 7px 0px;
      box-shadow: 0 4px 14px rgba(0,0,0,.08);
    }

    @media (min-width: 768px){
      .modal-dialog { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
      .modal-body { padding: 1rem 1.25rem 0 1.25rem; }
    }

    .btn-step{border: 1px solid rgba(31,36,48,0.15); border-radius: 10px; background: #fff; padding:10px 20px;}
    .btn-step:hover{background: #F9F8F6;}