:root{
  --primary:#7323A8;
  --light-purple:#f3e9fb;
}

.product-wrapper{
  background:#fff;
  border-radius:20px;
  padding:40px;
}

/* Thumbnail images */
.thumb-img{
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:20px;
  cursor:pointer;
  border:2px solid transparent;
  transition:0.2s;
}

.thumb-img:hover{
  border-color:var(--primary);
}

/* Main image */
.main-img{
  width:100%;
  border-radius:20px;
  object-fit:cover;
}

/* Action icon buttons */
.icon-btn{
  width:48px;
  height:48px;
  border-radius:14px;
  border:1.5px solid var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  background:#fff;
  transition:0.2s;
}

.icon-btn:hover{
  background:var(--light-purple);
}

/* Title */
.product-title{
  font-size:32px;
  font-weight:600;
  line-height:1.3;
}

/* Price */
.product-price{
  font-size:28px;
  font-weight:700;
}

/* Location */
.product-location{
  color:var(--primary);
  font-weight:500;
}
.bg-pending{
  background-color: #FDF8E1;
  color: #5F3706;
}

.bg-active{
  background-color: #F0FFE7;
  color: #10651C;
}
/* Primary Button */
.btn-primary-custom{
  background:var(--primary);
  color:#fff;
  border-radius:50px;
  padding:16px;
  font-size:18px;
  font-weight:600;
  border:none;
}
.btn-primary-custom:hover {
    background-color: #5e1d8a; /* darker shade */
    color: #fff;
}

.btn-primary-custom:hover{
  opacity:0.9;
}

/* Outline Button */
.btn-outline-custom{
  border:1.5px solid var(--primary);
  color:var(--primary);
  border-radius:50px;
  padding:14px;
  font-weight:500;
}

.btn-outline-custom:hover{
  background:var(--light-purple);
}

/* Report Box */
.report-box{
  background:#eee;
  border-radius:50px;
  padding:20px;
  text-align:center;
  font-weight:500;
  color:#c0392b;
  display: flex;
  justify-content: center;
}


:root{
  --primary:#7323A8;
  --light-purple:#f3e9fb;
}

.product-tabs-wrapper{
  background:#fff;
  border-radius:20px;
}

.product-tabs .nav-link{
  color:#555;
  font-weight:500;
  border:none;
  position:relative;
  padding:12px 20px;
}

.product-tabs .nav-link.active{
  color:var(--primary);
  background:transparent;
}

.product-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:3px;
  background:var(--primary);
  border-radius:10px;
}

.section-divider{
  margin:40px 0;
  opacity:0.3;
}

.text-purple{
  color:var(--primary);
}

.verified-badge{
  width:40px;
  height:40px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

     .demo-card {
            background: white;
            border-radius: 28px;
            padding: 30px 28px;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 25px 45px -12px rgba(0,0,0,0.15);
        }
        /* exactly the requested button */
        .btn-outline-custom {
            border: 1.5px solid #d0d5dd;
            border-radius: 60px;
            background: white;
            color: #1e293b;
            font-weight: 550;
            font-size: 1rem;
            padding: 12px 18px;
            transition: 0.2s;
            letter-spacing: 0.2px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .btn-outline-custom:hover {
            background-color: #f8fafc;
            border-color: #98a2b3;
        }
        /* the small digits at the bottom (1.138.44) – as seen in image */
        .footnote-digits {
            margin-top: 24px;
            color: #8e99aa;
            font-size: 15px;
            font-weight: 450;
            text-align: right;
            border-top: 1px dashed #dce2ea;
            padding-top: 16px;
            letter-spacing: 0.3px;
        }
        /* modal content – pixel perfect to the described "Cancel Request" popup */
        .cancel-modal-body {
            text-align: center;
            padding: 16px 8px 8px 8px;
        }
        .cancel-modal-body h3 {
            font-size: 1.8rem;
            font-weight: 600;
            color: #0b1e3a;
            margin-bottom: 12px;
            letter-spacing: -0.3px;
        }
      
        .modal-btn-group {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin: 24px 0 8px;
        }
      
        /* ensure bootstrap modal matches our design */
        .modal-content {
            border-radius: 32px;
            border: none;
            box-shadow: 0 30px 60px rgba(0, 10, 30, 0.2);
            padding: 18px 12px 22px 12px;
        }
        .modal-header, .modal-footer {
            border: none;
        }
        /* hide default bootstrap header X if we want, but we keep it minimal */
        .btn-close {
            background-size: 0.8rem;
            opacity: 0.5;
        }
        /* small extra for the dots or fine print */
        .digits-gray {
            color: #8e99aa;
        }

            .demo-card {
            background: white;
            border-radius: 28px;
            padding: 40px 30px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 20px 35px -5px rgba(0,0,0,0.08);
            text-align: center;
        }
        /* exactly the report-box trigger from description */
        .report-box {
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: #f8f9fa;
            border-radius: 20px;
            border: 1px solid #e9ecef;
            transition: 0.15s;
            color: #2c3e50;
            font-weight: 500;
        }
        .report-box:hover {
            background: #e9ecef;
        }
        /* modal custom styles – pixel perfect for "Remove Item" */
        .remove-modal .modal-content {
            border-radius: 32px;
            border: none;
            box-shadow: 0 30px 60px rgba(0, 10, 30, 0.15);
            overflow: hidden;
        }
        .remove-modal .modal-header {
            border-bottom: none;
            padding: 1.5rem 1.5rem 0.25rem 1.5rem;
        }
        .remove-modal .modal-title {
            font-size: 2rem;
            font-weight: 700;
            color: #121212;
            letter-spacing: -0.02em;
        }
        .remove-modal .btn-close {
            opacity: 0.5;
            background-size: 0.9rem;
        }
        .remove-modal .modal-body {
            padding: 0.5rem 1.5rem 1.5rem 1.5rem;
            text-align: center;
        }
        .remove-modal .description {
            color: #4b5565;
            font-size: 1rem;
            line-height: 1.5;
            max-width: 320px;
            margin: 0 auto 1.8rem auto;
        }
        /* dual action buttons: Cancel | Confirm (side by side) */
        .action-btns {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin: 0.5rem 0 2rem 0;
        }
        .btn-cancel-light {
            background: white;
            border: 1.5px solid #d7dee8;
            color: #1a2639;
            font-weight: 600;
            padding: 0.6rem 2.2rem;
            border-radius: 40px;
            font-size: 1rem;
            transition: 0.15s;
            min-width: 120px;
        }
        .btn-cancel-light:hover {
            background: #f2f6fc;
            border-color: #b7c4d7;
        }
        .btn-confirm-dark {
            background: #111c2f;
            border: none;
            color: white;
            font-weight: 600;
            padding: 0.6rem 2.2rem;
            border-radius: 40px;
            font-size: 1rem;
            box-shadow: 0 6px 14px rgba(10, 25, 50, 0.2);
            transition: 0.15s;
            min-width: 120px;
        }
        .btn-confirm-dark:hover {
            background: #1b2a44;
        }
        /* secondary buttons: Clear Cart / Clear Shopping Bag (exact as image) */
        .secondary-btns {
            display: flex;
            gap: 1.2rem;
            justify-content: center;
            border-top: 1px solid #ecf0f3;
            padding-top: 1.5rem;
            margin-top: 0.2rem;
        }
        .btn-ghost-underline {
            background: transparent;
            border: none;
            color: #3d4e6b;
            font-weight: 550;
            font-size: 0.95rem;
            padding: 0.3rem 0.2rem;
            border-bottom: 1.5px dashed #b3c2d6;
            border-radius: 0;
            letter-spacing: 0.2px;
            transition: 0.1s;
        }
        .btn-ghost-underline:hover {
            color: #0b1a32;
            border-bottom: 1.5px solid #7b8faa;
        }
        /* fine adjustments */
        .bi-flag {
            font-size: 1rem;
        }