/* =====================================================================
   Kadopich — bespoke checkout (self-contained).

   On the checkout page KPC_Checkout dequeues the theme's woocommerce.css,
   WooCommerce's core CSS, select2 and the sibling-module CSS, so THIS file is
   the single source of truth for the whole checkout look. It reproduces the
   approved "Checkout (standalone)" design pixel-for-pixel on top of the bespoke
   template overrides (theme/woocommerce/checkout/form-checkout.php +
   review-order.php) while WooCommerce keeps handling all the plumbing
   (field names, nonce, gateways, AJAX, validation, order placement).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Base / resets (scoped to the checkout shell)
   --------------------------------------------------------------------- */
body.woocommerce-checkout {
  background: radial-gradient(
      130% 80% at 50% -10%,
      #fdeef0 0%,
      #f7f4f3 48%,
      #f3efee 100%
    )
    no-repeat fixed;
}
body.woocommerce-checkout .kp-page__title {
  display: none;
} /* theme prints a duplicate title */

.kpc-co,
.kpc-co * {
  box-sizing: border-box;
}
.kpc-co {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 0 48px;
  font-family:
    "Vazirmatn",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: #1c1518;
  direction: rtl;
  text-align: right;
  font-size: 14px;
  line-height: 1.7;
}
.kpc-co h1,
.kpc-co h2,
.kpc-co h3,
.kpc-co h4,
.kpc-co p,
.kpc-co ul,
.kpc-co li {
  margin: 0;
  padding: 0;
}
.kpc-co ul {
  list-style: none;
}
.kpc-co a {
  color: inherit;
}
.kpc-co button {
  font-family: inherit;
  cursor: pointer;
}
.kpc-co .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.kpc-co .kpc-hidden,
.kpc-co #billing_country_field {
  display: none !important;
}
/* Pickup mode: address rows are hidden server-side (matches the session's
   current shipping method) so they never flash visible before shipping.js
   re-applies the same state on the client. */
.kpc-co .kpc-pickup-hidden {
  display: none !important;
}
.kpc-co .clear {
  clear: both;
}

/* ---------------------------------------------------------------------
   Heading
   --------------------------------------------------------------------- */
.kpc-co__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.kpc-co__title {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.kpc-co__sub {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #9b9091;
}
.kpc-co__secure {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #8a8081;
}

/* ---------------------------------------------------------------------
   Step indicator (KPC_Checkout::render_steps)
   --------------------------------------------------------------------- */
.kpc-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 1.2vw, 10px);
  margin: 0 0 24px;
  flex-wrap: nowrap;
}
.kpc-steps__item {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.2vw, 9px);
  background: #fff;
  border: 1px solid #f1e7e7;
  border-radius: 999px;
  padding: clamp(5px, 1.4vw, 8px) clamp(8px, 2.4vw, 16px);
  box-shadow: 0 2px 8px -4px rgba(20, 12, 12, 0.08);
  flex: 0 1 auto;
  min-width: 0;
}
.kpc-steps__num {
  width: clamp(17px, 4.6vw, 22px);
  height: clamp(17px, 4.6vw, 22px);
  border-radius: 50%;
  background: #f3eaea;
  color: #b3a8a8;
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.kpc-steps__label {
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 600;
  color: #8a8081;
  white-space: nowrap;
}
.kpc-steps__item--done .kpc-steps__num {
  background: #1fa463;
  color: #fff;
}
.kpc-steps__item--current {
  background: linear-gradient(180deg, #c20606, #a30d0d);
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(194, 6, 6, 0.5);
}
.kpc-steps__item--current .kpc-steps__num {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.kpc-steps__item--current .kpc-steps__label {
  color: #fff;
  font-weight: 700;
}
.kpc-steps__sep {
  width: clamp(8px, 3vw, 26px);
  height: 2px;
  border-radius: 2px;
  background: #ece3e3;
  flex: 0 1 auto;
}
.kpc-steps__item--done + .kpc-steps__sep {
  background: linear-gradient(90deg, #f0bcc1, #f7d9dc);
}

/* ---------------------------------------------------------------------
   Login + coupon prompts → the design's dashed "discount" banner / panels
   --------------------------------------------------------------------- */
.kpc-co .woocommerce-form-login-toggle .woocommerce-info,
.kpc-co .woocommerce-form-coupon-toggle .woocommerce-info {
  display: block;
  background: linear-gradient(100deg, #fff6f7, #fffafa);
  border: 1.5px dashed #f3c4c9;
  border-radius: 18px;
  padding: 15px 20px;
  margin: 0 0 20px;
  color: #1c1518;
  font-size: 14.5px;
  font-weight: 700;
}
.kpc-co .woocommerce-form-login-toggle .showlogin,
.kpc-co .woocommerce-form-coupon-toggle .showcoupon {
  color: #c20606;
  font-weight: 800;
  text-decoration: none;
}

/* Coupon prompt → the design's dashed "discount" banner content */
.kpc-co .woocommerce-form-coupon-toggle .woocommerce-info {
  padding: 0;
  font-weight: inherit;
}
.kpc-co a.showcoupon.kpc-coupon-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 20px;
  text-decoration: none;
  color: #1c1518;
  font-weight: 400;
}
.kpc-coupon-banner__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #c20606, #a30d0d);
  background-repeat: no-repeat;
  background-position: center;
  background-size:
    18px 18px,
    cover;
  box-shadow: 0 6px 14px -6px rgba(194, 6, 6, 0.55);
}
.kpc-coupon-banner__text {
  flex: 1;
  min-width: 0;
}
.kpc-coupon-banner__title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #1c1518;
}
.kpc-coupon-banner__sub {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #9b9091;
  margin-top: 2px;
}
.kpc-coupon-banner__chev {
  flex-shrink: 0;
  color: #c20606;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}
.kpc-co form.checkout_coupon,
.kpc-co form.woocommerce-form-login {
  background: #fff;
  border: 1px solid #f2e9e9;
  border-radius: 18px;
  padding: 20px;
  margin: 0 0 20px;
  box-shadow:
    0 1px 2px rgba(20, 12, 12, 0.04),
    0 20px 50px -28px rgba(194, 6, 6, 0.16);
}

/* Coupon form: input + "apply" button on one row, button in the site red */
.kpc-co form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}
.kpc-co form.checkout_coupon .form-row {
  margin: 0;
  padding: 0;
}
.kpc-co form.checkout_coupon .form-row-first {
  flex: 1 1 180px;
  min-width: 0;
}
.kpc-co form.checkout_coupon .form-row-last {
  flex: 0 0 auto;
  display: flex;
}
.kpc-co form.checkout_coupon .clear {
  display: none;
}
.kpc-co form.checkout_coupon button[name="apply_coupon"] {
  height: 100%;
  padding: 15px 24px;
  border: 0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #c20606 0%, #a30d0d 100%);
  box-shadow:
    0 10px 20px -10px rgba(194, 6, 6, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease;
}
.kpc-co form.checkout_coupon button[name="apply_coupon"]:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 26px -10px rgba(194, 6, 6, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.kpc-co form.checkout_coupon button[name="apply_coupon"]:active {
  transform: translateY(1px) scale(0.99);
}

/* ---------------------------------------------------------------------
   Two-column grid
   --------------------------------------------------------------------- */
.kpc-co__form {
  display: block;
}
.kpc-co__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 24px;
  align-items: start;
}
.kpc-co__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  order: 1;
}
.kpc-co__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 20px;
  min-width: 0;
  order: 2;
}
.kpc-co #order_review {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Shared card chrome */
.kpc-co .woocommerce-billing-fields,
.kpc-co .woocommerce-additional-fields,
.kpc-sum,
.kpc-ship,
.kpc-co #payment {
  background: #fff;
  border: 1px solid #f2e9e9;
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(20, 12, 12, 0.04),
    0 20px 50px -28px rgba(194, 6, 6, 0.16);
}
.kpc-co .woocommerce-billing-fields,
.kpc-co .woocommerce-additional-fields {
  padding: 26px;
}
.kpc-co .woocommerce-shipping-fields {
  display: none;
} /* shipping merged into billing */

/* Card headings with leading icon chip + trailing divider */
.kpc-co .woocommerce-billing-fields > h3,
.kpc-co .woocommerce-additional-fields > h3 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 24px;
  font-size: 17px;
  font-weight: 800;
  color: #1c1518;
}
.kpc-co .woocommerce-billing-fields > h3::before,
.kpc-co .woocommerce-additional-fields > h3::before {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #fff2f3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
}
.kpc-co .woocommerce-billing-fields > h3::after,
.kpc-co .woocommerce-additional-fields > h3::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, #f1e7e7, transparent);
}
.kpc-co .woocommerce-billing-fields > h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23dc2031' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.kpc-co .woocommerce-additional-fields > h3::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23dc2031' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='13' y2='17'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   Form fields
   --------------------------------------------------------------------- */
.kpc-co .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kpc-co .form-row {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}
.kpc-co .form-row-wide,
.kpc-co
  .woocommerce-billing-fields__field-wrapper
  > .form-row:not(.form-row-first):not(.form-row-last) {
  grid-column: 1 / -1;
}
.kpc-co .form-row-first {
  grid-column: 1;
}
.kpc-co .form-row-last {
  grid-column: 2;
}
/* Mobile + postcode: one shared row, two equal halves
   (mobile → col 1 = right in RTL, postcode → col 2 = left). */
.kpc-co #billing_kpc_mobile_field {
  grid-column: 1;
}
.kpc-co #billing_postcode_field {
  grid-column: 2;
}
/* Pickup mode: postcode is hidden so mobile expands to full width. */
.kpc-co #billing_kpc_mobile_field.kpc-pickup-wide {
  grid-column: 1 / -1;
}

.kpc-co .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #6b6164;
  margin-bottom: 9px;
}
.kpc-co .required {
  color: #c20606;
  border: 0;
  text-decoration: none;
}
.kpc-co .optional {
  color: #b3a8a8;
  font-weight: 500;
  font-size: 12px;
}
.kpc-co .woocommerce-input-wrapper {
  display: block;
  width: 100%;
  position: relative;
}

.kpc-co input.input-text,
.kpc-co textarea,
.kpc-co select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 16px;
  height: auto;
  border: 1.5px solid #ece5e5;
  border-radius: 14px;
  background: #fcfbfb;
  font-family: inherit;
  font-size: 14.5px;
  color: #1c1518;
  line-height: 1.5;
  outline: none;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    background 0.18s;
}
.kpc-co textarea {
  min-height: 92px;
  line-height: 1.9;
  resize: vertical;
}
.kpc-co input.input-text::placeholder,
.kpc-co textarea::placeholder {
  color: #c2b8b8;
}

.kpc-co input.input-text:focus,
.kpc-co textarea:focus,
.kpc-co select:focus {
  border-color: #f0a8b0;
  box-shadow: 0 0 0 4px rgba(194, 6, 6, 0.08);
  background: #fff;
}

/* Validation states */
.kpc-co .form-row.woocommerce-invalid input.input-text,
.kpc-co .form-row.woocommerce-invalid select,
.kpc-co .form-row.woocommerce-invalid textarea {
  border-color: #f0a8b0;
}
.kpc-co .form-row.woocommerce-validated input.input-text {
  border-color: #bfe6cf;
}

/* Native selects: chevron on the left (RTL) */
.kpc-co select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color: #6b6164;
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23c2b3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
}
/* Themed native dropdown list (the open <option> popup) → site red palette */
.kpc-co select {
  accent-color: #c20606;
}
.kpc-co select:hover {
  border-color: #e6bfc3;
}
.kpc-co select option {
  background: #fff;
  color: #1c1518;
  font-weight: 600;
  padding: 10px 12px;
}
.kpc-co select option:checked {
  background: #fdeef0;
  color: #c20606;
  font-weight: 700;
}
.kpc-co select option:disabled {
  color: #c2b8b8;
}

/* ---------------------------------------------------------------------
   Custom dropdown widget (kpc-checkout.js enhances every native <select>)
   The real <select> stays in the DOM (hidden) for WooCommerce/KPC logic,
   validation and submission; this widget is the styled, themed surface.
   --------------------------------------------------------------------- */
.kpc-dd {
  position: relative;
  width: 100%;
}
/* Hidden-but-present native control (kept for focus / form submission).
   Gated on html.js (set synchronously in <head>, before first paint) rather
   than on a class checkout.js adds at runtime — so the native control is
   already invisible on first paint and on every AJAX-inserted replacement,
   with no gap where the raw <select> flashes before the widget wraps it. */
.js .kpc-co select:not(#billing_country) {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  background: none;
}
.kpc-dd__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 15px 16px;
  text-align: right;
  border: 1.5px solid #ece5e5;
  border-radius: 14px;
  background: #fcfbfb;
  font-family: inherit;
  font-size: 14.5px;
  color: #1c1518;
  line-height: 1.5;
  cursor: pointer;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    background 0.18s;
}
.kpc-dd__toggle:hover {
  border-color: #e6bfc3;
}
.kpc-dd__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23c2b3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.2s ease;
}
.kpc-dd.is-open .kpc-dd__toggle {
  border-color: #f0a8b0;
  box-shadow: 0 0 0 4px rgba(194, 6, 6, 0.08);
  background: #fff;
}
.kpc-dd.is-open .kpc-dd__toggle::after {
  transform: rotate(180deg);
}
.kpc-dd__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpc-dd.is-placeholder .kpc-dd__label {
  color: #6b6164;
}
/* Validation states mirrored onto the toggle */
.kpc-co .form-row.woocommerce-invalid .kpc-dd__toggle {
  border-color: #f0a8b0;
}
.kpc-co .form-row.woocommerce-validated .kpc-dd__toggle {
  border-color: #bfe6cf;
}
/* Popup panel */
.kpc-dd__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid #f0e6e6;
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(20, 12, 12, 0.25);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}
.kpc-dd.is-open .kpc-dd__panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Search box (long lists only) stays pinned; the list below it scrolls */
.kpc-dd__search {
  width: 100%;
  margin: 2px 0 6px;
  padding: 10px 12px;
  border: 1.5px solid #ece5e5;
  border-radius: 10px;
  background: #fbf7f7;
  font-family: inherit;
  font-size: 13.5px;
  color: #1c1518;
  outline: none;
  transition:
    border-color 0.18s,
    background 0.18s;
}
.kpc-dd__search:focus {
  border-color: #f0a8b0;
  background: #fff;
}
.kpc-dd__search::placeholder {
  color: #b8adae;
}
.kpc-dd__list {
  max-height: 240px;
  overflow-y: auto;
}
.kpc-dd__option {
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: #1c1518;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.kpc-dd__option.is-active,
.kpc-dd__option:hover {
  background: #faf3f4;
}
.kpc-dd__option.is-selected {
  background: #fdeef0;
  color: #c20606;
  font-weight: 700;
}
.kpc-dd__option.is-disabled {
  color: #c2b8b8;
  cursor: default;
}
.kpc-dd__option.is-disabled:hover {
  background: transparent;
}
/* Thin themed scrollbar for long lists (province / city) */
.kpc-dd__list::-webkit-scrollbar {
  width: 8px;
}
.kpc-dd__list::-webkit-scrollbar-thumb {
  background: #ead9db;
  border-radius: 999px;
}

/* Mobile + postcode: LTR, with a phone icon on the mobile field */
.kpc-co #billing_kpc_mobile,
.kpc-co #billing_postcode {
  direction: ltr;
  text-align: right;
}
.kpc-co #billing_kpc_mobile {
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23c2b3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='3'/%3E%3Cline x1='12' y1='18' x2='12' y2='18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

/* Custom radios (delivery + payment) — design's red circle with white dot */
.kpc-co input[type="radio"],
.kpc-co input.input-radio {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d6cdcd;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.kpc-co input[type="radio"]::before,
.kpc-co input.input-radio::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.2s ease;
}
.kpc-co input[type="radio"]:checked,
.kpc-co input.input-radio:checked {
  border-color: #c20606;
  background: #c20606;
}
.kpc-co input[type="radio"]:checked::before,
.kpc-co input.input-radio:checked::before {
  transform: scale(1);
}
.kpc-co input[type="radio"]:focus-visible,
.kpc-co input.input-radio:focus-visible {
  box-shadow: 0 0 0 4px rgba(194, 6, 6, 0.12);
}

/* ---------------------------------------------------------------------
   Delivery scheduling block (KPC_Delivery, inside the notes card)
   --------------------------------------------------------------------- */
.kpc-delivery {
  background: #fbf4f5;
  border: 1px solid #f3e3e5;
  border-radius: 18px;
  padding: 20px;
  margin: 22px 0 0;
    margin-bottom: 32px !important;
}


.kpc-delivery h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.kpc-delivery h3::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: #c20606;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13' rx='2'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13' rx='2'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
.kpc-delivery__note {
  font-size: 12.5px;
  color: #9b9091;
  margin: 0 0 14px;
  line-height: 1.7;
}
.kpc-delivery .form-row {
  margin-bottom: 12px;
}
.kpc-delivery .form-row label {
  font-size: 13px;
  font-weight: 600;
  color: #6b6164;
  margin-bottom: 9px;
}
.kpc-delivery__select {
  width: 100%;
}
@media (min-width: 480px) {
  .kpc-delivery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .kpc-delivery h3,
  .kpc-delivery__note {
    grid-column: 1 / -1;
  }
  .kpc-delivery .form-row {
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------------
   Order summary card (review-order.php)
   --------------------------------------------------------------------- */
.kpc-sum {
  overflow: hidden;
  /* Drop the summary so its top lines up with the billing card's heading
     (billing card has 26px top padding). Reset when stacked on mobile. */
  margin-top: 26px;
}
.kpc-sum__head {
  background: linear-gradient(180deg, #c20606, #a30d0d);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kpc-sum__title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.kpc-sum__count {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 11px;
  border-radius: 999px;
}
.kpc-sum__items {
  padding: 14px 22px 10px;
}
.kpc-sum__item {
  display: flex;
  gap: 20px;
  padding: 16px;
  border-bottom: 1px solid #f4eeee;
  align-items: center;
}
.kpc-sum__item:last-child {
  /* keep the bottom line on the last product so it separates the
     items from the totals block (same line as between products) */
  border-bottom: 1px solid #f4eeee;
}
.kpc-sum__info {
  order: 2;
  text-align: right;
} /* text second → left of the thumbnail (RTL), right-aligned to hug it */
.kpc-sum__thumb {
  order: 1; /* thumbnail first → right edge (RTL) */
  align-self: flex-start;
  margin: 20px;
  margin-right: 30px;
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: repeating-linear-gradient(
    135deg,
    #f7f0f1,
    #f7f0f1 6px,
    #f1e8e9 6px,
    #f1e8e9 12px
  );
  /* No overflow:hidden here — it would clip the quantity badge, which sits at -7px.
	   The image rounds itself instead. */
}
.kpc-sum__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 13px;
}
.kpc-sum__qty {
  position: absolute;
  top: -7px;
  left: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #1c1518;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  line-height: 1;
}
.kpc-sum__info {
  flex: 1;
  min-width: 0;
}
.kpc-sum__name {
  font-size: 12.5px;
  margin-top: 10px;
  /* margin-left: 10px; */
  font-weight: 700;
  line-height: 1.65;
  color: #1c1518;
}
.kpc-sum__color {
  font-size: 11px;
  font-weight: 500;
  color: #a99e9f;
  margin-top: 3px;
}
.kpc-sum__variant {
  font-size: 11px;
  font-weight: 500;
  color: #a99e9f;
  margin-top: 3px;
}
.kpc-sum__variant p {
  margin: 0;
}
.kpc-sum__price {
  font-size: 12.5px;
  font-weight: 800;
  color: #1c1518;
  margin-top: 6px;
}
.kpc-sum__price .woocommerce-Price-currencySymbol {
  font-size: 10.5px;
  font-weight: 600;
  color: #a99e9f;
}
.kpc-sum__totals {
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.kpc-sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.kpc-sum__label {
  color: #9b9091;
  font-weight: 500;
}
.kpc-sum__val {
  font-weight: 700;
  color: #1c1518;
}
.kpc-sum__val .woocommerce-Price-currencySymbol {
  font-size: 10.5px;
  font-weight: 600;
  color: #a99e9f;
}
.kpc-sum__val--discount {
  color: #c20606;
}
/* Coupon row: static label + code shown as a green pill + "حذف" remove link */
.kpc-sum__coupon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kpc-sum__coupon-label {
  color: #9b9091;
  font-weight: 500;
}
.kpc-coupon-tag {
  display: inline-flex;
  align-items: center;
  direction: ltr;
  background: #e7f5ec;
  color: #2e9e5b;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
}
.kpc-coupon-remove {
  font-size: 11px;
  font-weight: 600;
  color: #b3a9aa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kpc-coupon-remove:hover {
  color: #c20606;
}
.kpc-sum__row--total {
  border-top: 1px solid #f1e7e7;
  margin-top: 5px;
  padding-top: 16px;
}
.kpc-sum__row--total .kpc-sum__label {
  font-size: 14.5px;
  font-weight: 800;
  color: #1c1518;
}
.kpc-sum__val--total {
  font-size: 19px;
  font-weight: 800;
  color: #c20606;
}
.kpc-sum__val--total .woocommerce-Price-currencySymbol {
  font-size: 12px;
  font-weight: 700;
  color: #c20606;
}

/* ---------------------------------------------------------------------
   Delivery-method card (KPC_Shipping::method_selector → .kpc-ship)
   --------------------------------------------------------------------- */
.kpc-ship {
  padding: 20px;
  margin-bottom: 12px; /* breathing room so the next section isn't cramped against it */
}
.kpc-ship__title {
  font-size: 15px;
  font-weight: 800;
  color: #1c1518;
  margin-bottom: 5px;
}
.kpc-ship__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin: 15px 0 11px;
  border: 1.5px solid #efe9e9;
  background: #fcfbfb;
  border-radius: 16px;
  padding: 14px 15px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.kpc-ship__opt:last-of-type {
  margin-bottom: 0;
}
.kpc-ship__opt:has(input:checked) {
  border-color: #f7c2c8;
  background: linear-gradient(180deg, #fff6f7, #fffafa);
  box-shadow: 0 8px 22px -12px rgba(194, 6, 6, 0.3);
}
.kpc-ship__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kpc-ship__name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1c1518;
}
.kpc-ship__note {
  font-size: 11.5px;
  font-weight: 500;
  color: #9b9091;
  margin-top: 2px;
}
.kpc-ship__price {
  font-size: 12px;
  font-weight: 800;
  color: #1c1518;
  flex-shrink: 0;
}
.kpc-ship__free {
  color: #1fa463;
}
.kpc-ship__hint {
  /* margin (not padding) — it's spacing between this text and the last
     shipping option above it, and it carries no background/border of its
     own for padding to sit inside of. */
  margin: 16px 0 0 !important;
  font-size: 11.5px;
  font-weight: 600;
  color: #c98a90;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------
   Payment card (#payment, WooCommerce — real gateways, re-skinned)
   --------------------------------------------------------------------- */
.kpc-co #payment {
  padding: 20px;
  position: relative;
}
.kpc-co #payment::before {
  content: "شیوه پرداخت";
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #1c1518;
  margin-bottom: 16px;
}
/* "select one" pill next to the heading (design) */
.kpc-co #payment::after {
  content: "یک مورد را انتخاب کنید";
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: #a59a9a;
  background: #f6f1f1;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.kpc-co #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: transparent;
}
.kpc-co #payment ul.payment_methods li {
  list-style: none;
  margin: 0;
  border: 1.5px solid #efe9e9;
  background: #fcfbfb;
  border-radius: 18px;
  padding: 14px;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}
.kpc-co #payment ul.payment_methods li:has(input.input-radio:checked) {
  border-color: #f7c2c8;
  background: linear-gradient(180deg, #fff6f7, #fffafa);
  box-shadow: 0 8px 22px -12px rgba(194, 6, 6, 0.3);
}
.kpc-co #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1c1518;
  cursor: pointer;
}
.kpc-co #payment ul.payment_methods li label > input.input-radio {
  margin-inline-end: 0;
}
.kpc-co #payment ul.payment_methods li img {
  max-height: 30px;
  width: auto;
  margin-inline-start: auto;
  vertical-align: middle;
}
.kpc-co #payment .payment_box {
  background: #f6faff;
  border: 1px solid #e3f0ff;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #33414f;
  line-height: 1.9;
}
.kpc-co #payment .payment_box::before {
  content: none;
}
.kpc-co #payment .woocommerce-terms-and-conditions-wrapper {
  font-size: 11.5px;
  color: #b0a6a6;
  line-height: 1.85;
  margin-top: 14px;
}
.kpc-co #payment .place-order {
  padding: 0;
  margin: 14px 0 0;
}

.kpc-co #place_order {
  width: 100%;
  padding: 17px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #c20606 0%, #a30d0d 100%);
  box-shadow:
    0 12px 24px -10px rgba(194, 6, 6, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease;
}
.kpc-co #place_order:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 30px -10px rgba(194, 6, 6, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.kpc-co #place_order:active {
  transform: translateY(1px) scale(0.99);
}

/* ---------------------------------------------------------------------
   Trust badges
   --------------------------------------------------------------------- */
.kpc-co__trust {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.kpc-co__trust-item {
  background: #fff;
  border: 1px solid #f2e9e9;
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.kpc-co__trust-item span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: #1c1518;
}

/* ---------------------------------------------------------------------
   WooCommerce notices
   --------------------------------------------------------------------- */
.kpc-co .woocommerce-NoticeGroup,
.kpc-co .woocommerce-error,
.kpc-co .woocommerce-message,
.kpc-co .woocommerce-info {
  list-style: none;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid #f1e7e7;
  background: #fff;
}
.kpc-co .woocommerce-error {
  border-color: #f3c4c9;
  background: #fff6f7;
  color: #b3261e;
}
.kpc-co .woocommerce-message {
  border-color: #bfe6cf;
  background: #f1faf5;
  color: #18774a;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Single column: flatten the two-column wrappers so every section becomes a
     direct sibling and can be freely reordered with `order`. */
  .kpc-co__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* full-width cards (base rule uses align-items:start for the desktop grid) */
    gap: 24px;
  }
  .kpc-co__main,
  .kpc-co__side,
  .kpc-co #order_review {
    display: contents;
  }
  .kpc-co__side {
    position: static;
  }

  /* Mobile section order:
     ۱ سفارش کاربر · ۲ روش دریافت سفارش · ۳ جزییات صورتحساب · ۴ توضیحات تکمیلی · ۵ شیوه پرداخت */
  .kpc-co .kpc-sum {
    order: 1;
    margin-top: 0; /* cards are stacked here, no need to offset */
  }
  .kpc-co #kpc-ship {
    order: 2;
  }
  .kpc-co .woocommerce-billing-fields {
    order: 3;
  }
  .kpc-co .woocommerce-additional-fields {
    order: 4;
    display: flex;
    flex-direction: column;
  }
  /* Delivery (زمان تحویل) sits inside the notes card — lift it above the notes. */
  .kpc-co #kpc-delivery {
    order: -1;
  }
  .kpc-co #payment {
    order: 5;
  }
  .kpc-co__trust {
    order: 6;
  }
}
@media (max-width: 520px) {
  .kpc-co__title {
    font-size: 22px;
	/* margin: 10px; */
  }
  /* .kpc-co__head {
	gap: 12px;
  } */
  .kpc-co .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .kpc-co .form-row-first,
  .kpc-co .form-row-last {
    grid-column: 1;
  }
  /* #billing_postcode_field's `grid-column: 2` (line ~452) outranks the
     class-based reset above by specificity, so it still asked for a second
     column here even though the wrapper is single-column — that stray
     column was created as a narrow auto-width implicit track, squeezing
     the input. Match its specificity and override explicitly. */
  .kpc-co #billing_kpc_mobile_field,
  .kpc-co #billing_postcode_field {
    grid-column: 1;
  }
  .kpc-co .woocommerce-billing-fields,
  .kpc-co .woocommerce-additional-fields {
    padding: 20px;
  }
}