/* =========================================================
   WRAPPER
========================================================= */

.th-offer-wrapper{
  margin:16px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* =========================================================
   CARD
========================================================= */

.th-offer-wrapper .th-offer-card{
  position:relative;
  overflow:hidden;

  background:var(--th-card-bg,#fff);

  border-top:
    var(--th-border-top,1px)
    var(--th-border-style,solid)
    var(--th-border-color,#e5e7eb);

  border-right:
    var(--th-border-right,1px)
    var(--th-border-style,solid)
    var(--th-border-color,#e5e7eb);

  border-bottom:
    var(--th-border-bottom,1px)
    var(--th-border-style,solid)
    var(--th-border-color,#e5e7eb);

  border-left:
    var(--th-border-left,1px)
    var(--th-border-style,solid)
    var(--th-border-color,#e5e7eb);

  border-top-left-radius:
    var(--th-radius-top-left,12px);

  border-top-right-radius:
    var(--th-radius-top-right,12px);

  border-bottom-right-radius:
    var(--th-radius-bottom-right,12px);

  border-bottom-left-radius:
    var(--th-radius-bottom-left,12px);

  transition:all .22s ease;
  cursor:pointer;

  
}

/* HOVER */

.th-offer-wrapper .th-offer-card.offer_select,
.th-offer-wrapper .th-offer-card:hover{
  border-color:var(--th-progress-fill,#22c55e);

  transform:translateY(-1px);

  box-shadow:
    0 6px 16px rgba(0,0,0,.05),
    0 2px 6px rgba(0,0,0,.03);
}

/* =========================================================
   ACTIVE
========================================================= */

.th-offer-wrapper .th-offer-card input:checked + .th-card-inner{
  background:var(
    --th-card-active-bg,
    linear-gradient(
      180deg,
      #f8fff9 0%,
      #ffffff 100%
    )
  );
}

.th-offer-wrapper .th-offer-card input:checked + .th-card-inner::before{
  border-color:var(--th-highlight-color,#22c55e);
}

.th-offer-wrapper .th-offer-card input:checked + .th-card-inner::after{
  opacity:1;
  transform:scale(1);
}

/* =========================================================
   LABEL
========================================================= */

.th-offer-wrapper .th-offer-card label{
  display:block;
  cursor:pointer;
}

.th-offer-wrapper .th-offer-card input[type="radio"]{
  display:none;
}

/* =========================================================
   INNER
========================================================= */

.th-offer-wrapper .th-card-inner{
  position:relative;
padding:
    var(--th-padding-top,14px)
    var(--th-padding-right,14px)
    var(--th-padding-bottom,14px)
    var(--th-padding-left,14px);

  display:flex;
  flex-direction:column;
  gap:8px;
}

/* =========================================================
   CUSTOM RADIO
========================================================= */

.th-offer-wrapper .th-card-inner::before{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid #cfcfcf;
  background:#fff;
  transition:.22s ease;
  -webkit-box-sizing: unset;
    -moz-box-sizing:unset;
    box-sizing: unset;
}

.th-offer-wrapper .th-card-inner::after{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  width:8px;
  height:8px;
  border-radius:50%;

  background:
    var(--th-highlight-color,#22c55e);

  opacity:0;
  transform:scale(.5);
  transition:.2s ease;
}

/* =========================================================
   BADGE
========================================================= */

.th-offer-wrapper .th-badge{
  position:absolute;
  top:0;
  right:0;

  padding:4px 10px;

  border-bottom-left-radius:10px;

  background:
    var(
      --th-badge-bg,
      linear-gradient(
        135deg,
        #22c55e,
        #16a34a
      )
    );

  color:var(--th-badge-color,#fff);

  font-size:10px;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;

  box-shadow:
    0 3px 8px rgb(158 158 158 / 32%);

  z-index:2;
}

/* =========================================================
   ROW
========================================================= */

.th-offer-wrapper .th-row{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   IMAGE
========================================================= */

.th-offer-wrapper .th-left{
  flex-shrink:0;
}

.th-offer-wrapper .th-left img{
  width:54px;
  height:54px;

  object-fit:cover;

  border-radius:
    var(--th-image-radius,10px);

  border:1px solid #ececec;

  background:#fff;
}

/* =========================================================
   CONTENT
========================================================= */

.th-offer-wrapper .th-mid{
  flex:1;
  min-width:0;
}

.th-offer-wrapper .th-offer-heading{
  display:block;

  font-size:14px;
  line-height:1.35;
  font-weight:700;

  color:
    var(--th-heading-color,#111827);

  margin-bottom:2px;
}

.th-offer-wrapper .th-product-title{
  font-size:12px;

  color:
    var(--th-text-color,#6b7280);

  margin-bottom:2px;
  font-weight:500;
}

.th-offer-wrapper .th-offer-subheading{
  font-size:11px;

  color:
    var(--th-text-color,#9ca3af);

  line-height:1.45;
  margin-bottom:4px;
}

.th-offer-wrapper .th-offer-meta{
  display:inline-flex;
  align-items:center;
  gap:5px;

  color:
    var(--th-highlight-color,#15803d);

  font-size:11px;
  font-weight:600;

  width:fit-content;
}

/* =========================================================
   PRICE
========================================================= */

.th-offer-wrapper .th-right{
  max-width:100px;
  text-align:right;
}

.th-offer-wrapper .th-price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
}

.th-offer-wrapper .th-price del{
  color:
    var(--th-price-color,#111827);
  font-size:11px;
  opacity:0.8;
}

.th-offer-wrapper .th-price strong{
  color:
    var(--th-price-color,#111827);

  font-size:15px;
  font-weight:700;
}
.th-offer-wrapper .th-price  .th-save-price{
   color:
    var(--th-highlight-color,#15803d);
}
/* =========================================================
   PROGRESS
========================================================= */

.th-offer-wrapper .th-progress{
  position:relative;
  overflow:hidden;

  height:6px;

  border-radius:999px;

  background:
    var(--th-progress-bg,#e5e7eb4d);
}

.th-offer-wrapper .th-bar{
  height:100%;
  width:0%;

  border-radius:999px;

  background:
    var(
      --th-progress-fill,
      linear-gradient(
        90deg,
        #22c55e 0%,
        #16a34a 100%
      )
    );

  transition:width .35s ease;
}

/* =========================================================
   MESSAGE
========================================================= */

.th-offer-wrapper .th-msg{
  font-size:12px;
  line-height:1.45;
  font-weight:500;

  color:
    var(--th-message-color,#6b7280);
}

.th-offer-wrapper .th-offer-card .th-msg{
  margin-top:4px;
  transition:all .2s ease;
}

.th-offer-wrapper .th-offer-card input:checked
+ .th-card-inner .th-msg{

  color:
    var(--th-success-color,#16a34a);

  font-weight:600;
}

/* =========================================================
   CART OFFER
========================================================= */

.th-offer-wrapper .th-offer-cart{
  margin:10px 0;
}

.th-offer-wrapper .th-cart-msg{
  padding:12px 14px;
  border-radius:12px;

  font-size:13px;
  font-weight:600;
  line-height:1.45;
}

/* SUCCESS */

.th-offer-wrapper .th-cart-msg.success{
  background:#effdf5;
  border:1px solid #86efac;
  color:#166534;
}

/* DISCOUNT */

.th-offer-wrapper .th-cart-msg.discount{
  background:#fff8eb;
  border:1px solid #fcd34d;
  color:#b45309;
}

/* =========================================================
   VARIATION PENDING
========================================================= */

.th-offer-wrapper .th-variation-pending .th-card-inner{
  opacity:.15;
  pointer-events:none;
}

.th-offer-wrapper .th-variation-only-msg{
  position:absolute;
  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  z-index:20;

  font-size:13px;
  font-weight:600;
  text-align:center;

  color:#111827;

  background:#fff;

  padding:12px 16px;

  border-radius:10px;

  box-shadow:
    0 4px 18px rgba(0,0,0,.08);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

  .th-offer-wrapper .th-card-inner{
    gap:7px;
  }

  .th-offer-wrapper .th-row{
    align-items:flex-start;
    gap:8px;
  }

  .th-offer-wrapper .th-left img{
    width:50px;
    height:50px;
  }

  .th-offer-wrapper .th-offer-heading{
    font-size:13px;
  }

  .th-offer-wrapper .th-product-title{
    font-size:11px;
  }

  .th-offer-wrapper .th-offer-subheading{
    font-size:10px;
  }

  .th-offer-wrapper .th-price strong{
    font-size:14px;
  }

  .th-offer-wrapper .th-right{
    min-width:65px;
  }

  .th-offer-wrapper .th-msg{
    font-size:11px;
  }
}