/* =========================================================
   MEHFARO CHECKOUT - FINAL REFERENCE UI
========================================================= */

#checkoutModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;

  display: none !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(15, 23, 42, .42) !important;
}

#checkoutModal.open {
  display: flex !important;
}

#checkoutModal .checkout-ref-shell {
  position: relative !important;

  width: min(520px, 100%) !important;
  height: min(930px, 100dvh) !important;

  padding: 18px 16px 20px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  border-radius: 28px !important;

  background: #fbfbf9 !important;

  box-shadow:
    0 20px 60px
    rgba(15, 23, 42, .22) !important;
}


/* HEADER */

#checkoutModal #checkoutClose {
  position: absolute !important;

  left: 15px !important;
  top: 34px !important;

  width: 34px !important;
  height: 34px !important;

  border: 0 !important;
  background: transparent !important;

  color: #101827 !important;

  font-size: 30px !important;
  line-height: 1 !important;

  z-index: 5 !important;
}

.checkout-ref-header {
  display: grid;

  grid-template-columns:
    56px
    minmax(0, 1fr)
    auto;

  gap: 11px;

  align-items: center;

  min-height: 72px;

  padding:
    6px
    0
    6px
    38px;
}

.checkout-ref-logo {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #075f59,
      #003e3a
    );

  color: #e5b74f;

  font-family: Georgia, serif;
  font-size: 30px;
}

.checkout-ref-brand h2 {
  margin: 0;

  color: #111827;

  font-size: 20px;
  font-weight: 900;
}

.checkout-ref-brand p {
  margin: 3px 0 0;

  color: #77808d;

  font-size: 13px;
}

.checkout-ref-secure {
  display: flex;

  gap: 6px;

  align-items: center;

  color: #677181;

  font-size: 10px;
}

.checkout-ref-secure span {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #fff5de;

  color: #b57717;
}


/* STEPS */

.checkout-ref-steps {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  margin: 6px 7px 18px !important;
}

.checkout-ref-steps .checkout-step {
  position: relative;

  border: 0 !important;
  background: transparent !important;

  text-align: center;
}

.checkout-ref-steps
.checkout-step:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 17px;
  left: 66%;

  width: 68%;
  height: 2px;

  background: #d8dcdb;
}

.checkout-ref-steps
.checkout-step:first-child::after {
  background: #185f59;
}

.checkout-ref-steps .checkout-step span {
  position: relative;
  z-index: 2;

  width: 35px !important;
  height: 35px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 auto 7px !important;

  border-radius: 50% !important;

  background: #edf1f3 !important;

  color: #263342 !important;

  font-size: 13px !important;

  font-weight: 800 !important;
}

.checkout-ref-steps
.checkout-step.active span {
  background: #086c64 !important;
  color: #fff !important;
}

.checkout-ref-steps strong {
  display: block !important;

  color: #70798a !important;

  font-size: 11px !important;
  font-weight: 500 !important;
}

.checkout-ref-steps
.checkout-step.active strong {
  color: #075f59 !important;

  font-weight: 850 !important;
}


/* FORM */

.checkout-ref-form {
  display: grid !important;

  gap: 12px !important;
}

.checkout-ref-card {
  padding: 15px !important;

  border: 1px solid #e2e7e5 !important;
  border-radius: 18px !important;

  background: #fff !important;

  box-shadow:
    0 4px 14px
    rgba(15, 23, 42, .035) !important;
}

.checkout-ref-section-head {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 13px;
}

.checkout-ref-section-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #dff8ee;

  color: #066d64;

  font-size: 20px;
}

.checkout-ref-section-head h3 {
  margin: 0;

  color: #111827;

  font-size: 17px;
  font-weight: 900;
}

.checkout-ref-section-head p {
  margin: 2px 0 0;

  color: #7a8290;

  font-size: 10px;
}


/* BUYER FIELDS */

.checkout-ref-fields {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 11px 12px;
}

.checkout-ref-field span {
  display: block;

  margin-bottom: 5px;

  color: #111827;

  font-size: 10px;
  font-weight: 750;
}

.checkout-ref-field em {
  color: #ef4444;
  font-style: normal;
}

.checkout-ref-field input,
.checkout-ref-field select {
  width: 100%;
  height: 46px;

  padding: 0 12px;

  border: 1px solid #d9dfe2;
  border-radius: 9px;

  background: #fff;

  color: #182130;

  font-size: 12px;

  outline: none;
}

.checkout-ref-field
input:focus,
.checkout-ref-field
select:focus {
  border-color: #7fc7bc;

  box-shadow:
    0 0 0 3px
    rgba(7, 109, 101, .07);
}

.checkout-ref-address {
  grid-column: 1 / -1;
}


/* DELIVERY */

.checkout-ref-delivery {
  background:
    linear-gradient(
      135deg,
      #effff7,
      #e9faf2
    ) !important;
}

.checkout-ref-delivery-options {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.checkout-ref-option {
  min-height: 102px;

  padding: 12px;

  border: 1px solid #dfe7e4;
  border-radius: 14px;

  background: rgba(255,255,255,.9);
}

.checkout-ref-option > small {
  display: block;

  margin-bottom: 10px;

  color: #08756b;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .11em;
}

.checkout-ref-courier,
.checkout-ref-payment {
  display: flex;

  align-items: center;

  gap: 10px;
}

.checkout-ref-tcs {
  color: #dc2626;

  font-size: 19px;
  font-weight: 950;

  font-style: italic;
}

.checkout-ref-option strong {
  color: #111827;

  font-size: 11px;
  font-weight: 850;
}

.checkout-ref-option p {
  margin: 3px 0 0;

  color: #7a8290;

  font-size: 8px;
}

.checkout-ref-money {
  width: 37px;
  height: 37px;

  flex: 0 0 37px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #dff7ed;

  color: #056b63;

  font-size: 16px;
  font-weight: 900;
}

.checkout-ref-check {
  margin-left: auto;

  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #e0f7ee;

  color: #057267;

  font-weight: 900;
}


/* SHIPPING */

.checkout-ref-shipping {
  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    80px
    95px;

  gap: 10px;

  align-items: center;

  margin-top: 10px;

  padding: 11px;

  border: 1px solid #dfe7e4;
  border-radius: 13px;

  background: #fff;
}

.checkout-ref-package {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  font-size: 23px;
}

.checkout-ref-shipping-copy strong {
  display: block;

  color: #111827;

  font-size: 11px;
}

.checkout-ref-shipping-copy span,
.checkout-ref-shipping-stat span {
  display: block;

  color: #7a8290;

  font-size: 8px;
}

.checkout-ref-shipping-stat {
  padding-left: 10px;

  border-left: 1px solid #e2e6e4;

  text-align: center;
}

.checkout-ref-shipping-stat strong {
  display: block;

  margin-top: 3px;

  color: #111827;

  font-size: 11px;
}


/* ORDER SUMMARY */

.checkout-ref-summary-head {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 12px;

  margin-bottom: 8px;
}

.checkout-ref-summary-title {
  display: flex;

  align-items: center;

  gap: 10px;
}

.checkout-ref-cart-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #fff4dc;
}

.checkout-ref-summary-title h3 {
  margin: 0;

  color: #111827;

  font-size: 17px;
  font-weight: 900;
}

.checkout-ref-summary-title p {
  margin: 2px 0 0;

  color: #798291;

  font-size: 10px;
}

.checkout-ref-edit {
  padding: 9px 13px;

  border: 0;
  border-radius: 999px;

  background: #fff3dc;

  color: #9a650d;

  font-size: 10px;
  font-weight: 800;
}


/* PRODUCTS */

#checkoutModal .checkout-items {
  display: grid;

  gap: 0;
}

#checkoutModal .checkout-item {
  display: grid !important;

  grid-template-columns:
    58px
    minmax(0, 1fr)
    55px
    92px !important;

  gap: 9px !important;

  align-items: center !important;

  padding: 9px 2px !important;

  border-bottom: 1px solid #e6eae8 !important;
}

#checkoutModal .checkout-item img {
  width: 58px !important;
  height: 58px !important;

  object-fit: contain !important;

  border-radius: 8px !important;

  background: #f4f5f4 !important;
}

.checkout-ref-item-main h4 {
  margin: 0;

  color: #111827;

  font-size: 11px;
  font-weight: 850;
}

.checkout-ref-item-main p {
  margin: 3px 0 0;

  color: #74808d;

  font-size: 9px;
}

.checkout-ref-item-qty {
  color: #7a8290;

  font-size: 9px;

  white-space: nowrap;
}

.checkout-ref-item-qty strong {
  color: #111827;

  font-size: 11px;
}

.checkout-ref-item-price {
  text-align: right;
}

.checkout-ref-item-price strong {
  display: block;

  color: #111827;

  font-size: 11px;
}

.checkout-ref-item-price small {
  display: block;

  margin-top: 3px;

  color: #798291;

  font-size: 8px;
}


/* TOTALS */

.checkout-ref-totals {
  margin-top: 9px;

  border: 1px solid #e1e6e4;
  border-radius: 11px;

  overflow: hidden;
}

#checkoutModal .checkout-total-row {
  display: flex !important;

  justify-content: space-between !important;
  align-items: center !important;

  padding: 5px 10px !important;

  font-size: 10px !important;
}

#checkoutModal
.checkout-total-row.grand-total {
  margin-top: 4px !important;

  padding: 11px 10px !important;

  background:
    linear-gradient(
      90deg,
      #eafff4,
      #def7ed
    ) !important;
}

#checkoutModal
.checkout-total-row.grand-total span {
  color: #111827;

  font-size: 13px;
  font-weight: 900;
}

#checkoutModal
.checkout-total-row.grand-total strong {
  color: #056b63;

  font-size: 18px;
  font-weight: 900;
}

.checkout-fineprint {
  margin: 8px 3px 0 !important;

  color: #7a8290 !important;

  font-size: 9px !important;
}


/* CONFIRM */

.checkout-ref-confirm {
  width: 100% !important;

  min-height: 52px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 15px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background:
    linear-gradient(
      135deg,
      #08746c,
      #045d57
    ) !important;

  color: #fff !important;

  font-size: 14px !important;
  font-weight: 900 !important;
}

.checkout-ref-confirm span {
  margin-left: auto;

  padding-right: 16px;

  font-size: 22px;
}

.place-order-help {
  margin: -4px 0 0 !important;

  color: #7c8491 !important;

  font-size: 8px !important;

  text-align: center !important;
}


/* MOBILE */

@media (max-width: 540px) {

  #checkoutModal {
    align-items: stretch !important;
  }

  #checkoutModal
  .checkout-ref-shell {
    width: 100% !important;
    height: 100dvh !important;

    border-radius: 0 !important;
  }

}
/* =========================================================
   CHECKOUT REFERENCE POLISH V2
   VISUAL ONLY — NO LOGIC CHANGES
========================================================= */


/* MAIN PHONE FRAME */

#checkoutModal .checkout-ref-shell {
  width: min(540px, 100%) !important;

  padding:
    20px
    18px
    22px !important;

  background:
    linear-gradient(
      180deg,
      #fffdfa 0%,
      #fbfaf7 100%
    ) !important;
}


/* =========================================================
   HEADER
========================================================= */

.checkout-ref-header {
  min-height: 78px !important;

  grid-template-columns:
    58px
    minmax(0, 1fr)
    82px !important;

  gap: 12px !important;
}


.checkout-ref-logo {
  width: 58px !important;
  height: 58px !important;

  font-size: 32px !important;
}


.checkout-ref-brand h2 {
  font-size: 22px !important;
}


.checkout-ref-brand p {
  margin-top: 4px !important;

  font-size: 14px !important;
}


.checkout-ref-secure {
  justify-content: flex-end !important;

  font-size: 10px !important;
}


.checkout-ref-secure span {
  width: 35px !important;
  height: 35px !important;
}


/* =========================================================
   STEPPER
========================================================= */

.checkout-ref-steps {
  margin:
    8px
    8px
    20px !important;
}


.checkout-ref-steps
.checkout-step span {
  width: 38px !important;
  height: 38px !important;

  margin-bottom: 8px !important;

  font-size: 14px !important;
}


.checkout-ref-steps strong {
  font-size: 12px !important;
}


/* =========================================================
   COMMON CARDS
========================================================= */

.checkout-ref-card {
  padding: 17px !important;

  border-radius: 20px !important;

  box-shadow:
    0 5px 18px
    rgba(15,23,42,.04) !important;
}


.checkout-ref-section-head {
  gap: 12px !important;

  margin-bottom: 15px !important;
}


.checkout-ref-section-icon {
  width: 46px !important;
  height: 46px !important;

  flex-basis: 46px !important;

  font-size: 22px !important;
}


.checkout-ref-section-head h3 {
  font-size: 18px !important;
}


.checkout-ref-section-head p {
  margin-top: 3px !important;

  font-size: 11px !important;
}


/* =========================================================
   BUYER INFORMATION
========================================================= */

.checkout-ref-fields {
  gap:
    13px
    14px !important;
}


.checkout-ref-field span {
  margin-bottom: 6px !important;

  font-size: 11px !important;
}


.checkout-ref-field input,
.checkout-ref-field select {
  height: 50px !important;

  padding:
    0
    14px !important;

  border-radius: 10px !important;

  font-size: 13px !important;
}


/* =========================================================
   DELIVERY & PAYMENT
========================================================= */

.checkout-ref-delivery {
  padding: 17px !important;

  background:
    linear-gradient(
      135deg,
      #effff7 0%,
      #e5f9ef 100%
    ) !important;
}


.checkout-ref-delivery-options {
  gap: 12px !important;
}


.checkout-ref-option {
  min-height: 112px !important;

  padding: 14px !important;

  border-radius: 15px !important;
}


.checkout-ref-option > small {
  margin-bottom: 12px !important;

  font-size: 9px !important;
}


.checkout-ref-tcs {
  min-width: 58px !important;

  font-size: 25px !important;
}


.checkout-ref-option strong {
  font-size: 12px !important;
}


.checkout-ref-option p {
  margin-top: 4px !important;

  font-size: 9px !important;

  line-height: 1.35 !important;
}


.checkout-ref-money {
  width: 42px !important;
  height: 42px !important;

  flex-basis: 42px !important;

  font-size: 17px !important;
}


.checkout-ref-check {
  width: 32px !important;
  height: 32px !important;
}


/* =========================================================
   SHIPPING DETAILS
========================================================= */

.checkout-ref-shipping {
  grid-template-columns:
    42px
    minmax(0, 1fr)
    90px
    105px !important;

  min-height: 72px !important;

  margin-top: 12px !important;

  padding:
    12px
    13px !important;

  border-radius: 14px !important;
}


.checkout-ref-package {
  width: 38px !important;
  height: 38px !important;

  font-size: 25px !important;
}


.checkout-ref-shipping-copy strong {
  font-size: 12px !important;
}


.checkout-ref-shipping-copy span,
.checkout-ref-shipping-stat span {
  margin-top: 3px !important;

  font-size: 9px !important;
}


.checkout-ref-shipping-stat strong {
  margin-top: 5px !important;

  font-size: 12px !important;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.checkout-ref-summary {
  padding: 17px !important;
}


.checkout-ref-cart-icon {
  width: 44px !important;
  height: 44px !important;
}


.checkout-ref-summary-title h3 {
  font-size: 18px !important;
}


.checkout-ref-summary-title p {
  margin-top: 3px !important;

  font-size: 11px !important;
}


.checkout-ref-edit {
  padding:
    10px
    15px !important;

  font-size: 11px !important;
}


/* PRODUCT ROW */

#checkoutModal .checkout-item {
  grid-template-columns:
    64px
    minmax(0, 1fr)
    60px
    96px !important;

  gap: 11px !important;

  padding:
    11px
    3px !important;
}


#checkoutModal .checkout-item img {
  width: 64px !important;
  height: 64px !important;
}


.checkout-ref-item-main h4 {
  font-size: 12px !important;
}


.checkout-ref-item-main p {
  margin-top: 4px !important;

  font-size: 10px !important;
}


.checkout-ref-item-qty {
  font-size: 10px !important;
}


.checkout-ref-item-qty strong {
  font-size: 12px !important;
}


.checkout-ref-item-price strong {
  font-size: 12px !important;
}


.checkout-ref-item-price small {
  font-size: 9px !important;
}


/* =========================================================
   TOTALS
========================================================= */

.checkout-ref-totals {
  margin-top: 11px !important;

  border-radius: 12px !important;
}


#checkoutModal
.checkout-total-row {
  padding:
    7px
    11px !important;

  font-size: 11px !important;
}


#checkoutModal
.checkout-total-row strong {
  font-size: 12px !important;
}


#checkoutModal
.checkout-total-row.grand-total {
  padding:
    13px
    11px !important;
}


#checkoutModal
.checkout-total-row.grand-total span {
  font-size: 14px !important;
}


#checkoutModal
.checkout-total-row.grand-total strong {
  font-size: 20px !important;
}


/* =========================================================
   CONFIRM BUTTON
========================================================= */

.checkout-ref-confirm {
  min-height: 56px !important;

  margin-top: 2px !important;

  font-size: 15px !important;

  box-shadow:
    0 6px 16px
    rgba(5, 100, 93, .14) !important;
}


.checkout-ref-confirm span {
  font-size: 24px !important;
}


/* =========================================================
   SMALL SCREEN
========================================================= */

@media (max-width: 430px) {

  .checkout-ref-shipping {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      76px
      88px !important;

    gap: 7px !important;
  }


  #checkoutModal .checkout-item {
    grid-template-columns:
      56px
      minmax(0, 1fr)
      48px
      82px !important;

    gap: 7px !important;
  }


  #checkoutModal .checkout-item img {
    width: 56px !important;
    height: 56px !important;
  }

}
/* =========================================================
   FINAL REFERENCE FIX
   TOP STEPPER + BOTTOM CONFIRM BUTTON
========================================================= */


/* =========================================================
   TOP 1 / 2 / 3 STEPPER
========================================================= */

#checkoutModal .checkout-ref-steps {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  align-items: start !important;

  width: 100% !important;

  margin:
    8px
    4px
    22px !important;

  padding: 0 !important;

  overflow: visible !important;
}


#checkoutModal
.checkout-ref-steps
.checkout-step {
  position: relative !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 7px !important;

  min-width: 0 !important;
  min-height: 62px !important;

  margin: 0 !important;
  padding: 0 3px !important;

  border: 0 !important;

  background: transparent !important;

  text-align: center !important;
}


/* Purani connector line band */
#checkoutModal
.checkout-ref-steps
.checkout-step::after {
  content: none !important;

  display: none !important;
}


/* New connector line */
#checkoutModal
.checkout-ref-steps
.checkout-step:not(:last-child)::before {
  content: "" !important;

  position: absolute !important;

  z-index: 0 !important;

  top: 18px !important;

  left:
    calc(50% + 27px) !important;

  width:
    calc(100% - 54px) !important;

  height: 2px !important;

  background:
    #d9dddc !important;
}


/* Active first connector reference jaisa */
#checkoutModal
.checkout-ref-steps
.checkout-step.active:not(:last-child)::before {
  background:
    linear-gradient(
      90deg,
      #075f59 0%,
      #075f59 72%,
      #d9dddc 72%,
      #d9dddc 100%
    ) !important;
}


/* Number circles */
#checkoutModal
.checkout-ref-steps
.checkout-step > span {
  position: relative !important;

  z-index: 2 !important;

  display: grid !important;

  place-items: center !important;

  width: 36px !important;
  height: 36px !important;

  flex: 0 0 36px !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 50% !important;

  background:
    #edf1f4 !important;

  color:
    #273446 !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;

  line-height:
    36px !important;

  box-shadow: none !important;
}


/* Active circle */
#checkoutModal
.checkout-ref-steps
.checkout-step.active > span {
  background:
    linear-gradient(
      145deg,
      #08746b,
      #055f59
    ) !important;

  color:
    #ffffff !important;
}


/* Text must sit BELOW circle */
#checkoutModal
.checkout-ref-steps
.checkout-step > strong {
  position: static !important;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  color:
    #738090 !important;

  font-size:
    11px !important;

  font-weight:
    500 !important;

  line-height:
    1.25 !important;

  white-space:
    nowrap !important;

  text-align:
    center !important;
}


/* Active Customer Info */
#checkoutModal
.checkout-ref-steps
.checkout-step.active > strong {
  color:
    #075f59 !important;

  font-weight:
    850 !important;
}


/* =========================================================
   BOTTOM CONFIRM ORDER
========================================================= */

#checkoutModal
.checkout-ref-confirm {
  position: relative !important;

  display: block !important;

  width:
    calc(100% - 4px) !important;

  min-height:
    56px !important;

  height:
    56px !important;

  margin:
    5px
    2px
    0 !important;

  padding:
    0
    58px
    0
    58px !important;

  border:
    0 !important;

  border-radius:
    999px !important;

  background:
    linear-gradient(
      90deg,
      #086f68 0%,
      #05645e 100%
    ) !important;

  color:
    #ffffff !important;

  font-size:
    15px !important;

  font-weight:
    900 !important;

  line-height:
    56px !important;

  text-align:
    center !important;

  box-shadow:
    0 7px 18px
    rgba(5, 101, 94, .16) !important;

  overflow:
    hidden !important;
}


/* Arrow reference ki tarah right side */
#checkoutModal
.checkout-ref-confirm span {
  position:
    absolute !important;

  right:
    20px !important;

  top:
    50% !important;

  transform:
    translateY(-50%) !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #ffffff !important;

  font-size:
    27px !important;

  font-weight:
    400 !important;

  line-height:
    1 !important;
}


/* Agar purana pseudo arrow ho to remove */
#checkoutModal
.checkout-ref-confirm::before,
#checkoutModal
.checkout-ref-confirm::after {
  content:
    none !important;

  display:
    none !important;
}


/* Text below button */
#checkoutModal
.place-order-help {
  display:
    block !important;

  width:
    100% !important;

  margin:
    8px
    0
    2px !important;

  padding:
    0 !important;

  color:
    #7a8290 !important;

  font-size:
    9px !important;

  font-weight:
    500 !important;

  line-height:
    1.3 !important;

  text-align:
    center !important;
}