/* =================================================================== */
/* BP Hybrid Checkout — COMPLETE CSS                                   */
/* =================================================================== */

/* ---------- Base / Resets ---------- */
:root {
  --bpco-border: #e6e6e6;
  --bpco-text: #222;
  --bpco-muted: #444;
  --bpco-bg: #fff;
  --bpco-accent: #111;
  --bpco-success-bg: #daf5d8;
  --bpco-orange: #ff6a00;
}

.bpco-hidden {
  display: none !important;
}

.bpco-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  text-decoration: none;
  background: #fff;
  color: var(--bpco-text);
  cursor: pointer;
  line-height: 1.1;
  transition: transform .06s ease, background .12s ease, color .12s ease;
}

.bpco-btn:active {
  transform: scale(.98);
}

.bpco-btn-primary {
  border-color: var(--bpco-accent);
  background: var(--bpco-accent);
  color: #fff;
}

.bpco-btn-outline {
  background: #fff;
  border-color: var(--bpco-accent);
  color: var(--bpco-accent);
}

/* =================================================================== */
/* Confirm Address page: cards layout                                   */
/* =================================================================== */

.bpco-address-sheet {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
}

.bpco-address-sheet h3 {

  font-size: 20px;
  font-weight: bold;

}

.bpco-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.bpco-sheet-head h3 {
  margin: 0;
  font-size: 20px;
}

.bpco-add-new {
  text-decoration: none;
}

.bpco-address-list {
  display: grid;
  gap: 12px;
}

.bpco-card {
  border: 1px solid var(--bpco-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--bpco-bg);
}

.bpco-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.bpco-card-title {
  font-weight: 700;
  color: var(--bpco-text);
}

.bpco-delete {
  color: #d33;
  text-decoration: none;
}

.bpco-selected {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bpco-success-bg);
  margin-left: 8px;
}

.bpco-card-body {
  color: #444;
  font-size: 14px;
  line-height: 1.5;
}

.bpco-card-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.bpco-card-actions .bpco-btn {
  border-radius: 999px;
}

/* Form rows inside card/modal */
.bpco-row {
  margin-bottom: 10px;
}

/* Labels: +1px & bold */
.bpco-row label {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #333;
  font-weight: 600;
}

.bpco-row input,
.bpco-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
}

.bpco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width:640px) {
  .bpco-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================================================== */
/* One-Page Checkout: Address card on top + Woo forms polish            */
/* =================================================================== */

.bpco-opc {
  max-width: 1100px;
  margin: 0;
  padding: 0;
}

.bpco-opc-address {
  margin-bottom: 7px;
}

.bpco-opc-card-empty {
  text-align: center;
}

.bpco-opc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 0;
  /* header height tighter */
}

.bpco-opc-card-title {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}



.bpco-opc-card-body {
  margin-top: 4px;
  padding-left: 6px;
}

.bpco-opc-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bpco-text);
}

.bpco-opc-dotline {
  flex: 1;
  border-bottom: 2px dashed #c9c9c9;
  height: 0;
  transform: translateY(-2px);
}

.bpco-opc-name {
  font-size: 15px;
  margin-left: 2px;
  font-weight: 700;
}


.bpco-opc-addr {
  margin-left: 2px;
  padding: 0;
  border-left: 0;
  background: transparent;
  color: #333;
  font-size: 12px;
}

.bpco-opc-phone {
  color: #666;
  font-size: 12px;
  margin-left: 2px;
}

.bpco-opc-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bpco-opc-card .bpco-btn {
  border-radius: 999px;
}

.bpco-opc-card .bpco-btn:not(.bpco-btn-icon) {
  padding: 10px 18px;
}


/* Woo sections wrappers */
.bpco-cart {
  background: #fff9e4;
  border: 1px solid var(--bpco-border);
  border-radius: 16px;
  padding: 10px 4px 10px 4px;
  margin: 0 6px 7px 6px;
}

.bpco-checkout {
  background: #fff;
  padding: 0;
  margin-bottom: 9px;
}

/* Hide billing/shipping UI on OPC (values still present) */
.bpco-hide-forms .woocommerce-billing-fields,
.bpco-hide-forms .woocommerce-shipping-fields,
.bpco-hide-forms .woocommerce-additional-fields,
.bpco-hide-forms #ship-to-different-address,
.bpco-hide-forms .woocommerce-account-fields,
.bpco-hide-forms .woocommerce-privacy-policy-text {
  display: none !important;
}

/* Keep review + payment visible */
.bpco-checkout .woocommerce-checkout-review-order,
.bpco-checkout #order_review,
.bpco-checkout .woocommerce-checkout-payment {
  display: block !important;
}

/* =================================================================== */
/* Modal — Instagram-like Bottom Sheet (shared)                         */
/* =================================================================== */

.bpco-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: none;
  z-index: 2147483000;
  overscroll-behavior: none;
}

.bpco-modal[aria-hidden="false"] {
  display: block;
}

.bpco-modal--sheet .bpco-modal-dialog,
#bpco-opc-modal .bpco-modal-dialog,
#bpco-coupon-modal .bpco-modal-dialog,
#bpco-note-modal .bpco-modal-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
  padding: 0;
  /* header sticky ke liye content padding niche */
  max-height: calc(100dvh - 80px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  transform: translateY(100%);
  transition: transform .28s ease;
}

.bpco-modal--sheet.bpco-open .bpco-modal-dialog,
#bpco-opc-modal.bpco-open .bpco-modal-dialog,
#bpco-coupon-modal.bpco-open .bpco-modal-dialog,
#bpco-note-modal.bpco-open .bpco-modal-dialog {
  transform: translateY(0);
}

/* Sticky header bar */
.bpco-modal-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  padding: 12px 16px 10px 16px;
  border-bottom: 1px solid #eee;
}

.bpco-modal-title {
  margin: 0 40px 0 0;
  font-size: 18px;
  font-weight: 600;
}

.bpco-modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

/* Content padding */
#bpco-address-form {
  padding: 16px 16px 14px;
}

.bpco-modal-content {
  padding: 16px 16px 14px;
}

/* Body scroll lock */
.bpco-modal-open {
  overflow: hidden;
}

/* Mobile full-bleed sheet */
@media (max-width:640px) {

  .bpco-modal--sheet .bpco-modal-dialog,
  #bpco-opc-modal .bpco-modal-dialog,
  #bpco-coupon-modal .bpco-modal-dialog,
  #bpco-note-modal .bpco-modal-dialog {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: calc(100dvh - 64px);
  }
}

/* =================================================================== */
/* Minor WooCommerce tidy-ups                                           */
/* =================================================================== */

.bpco-cart .shop_table,
.bpco-checkout .shop_table {
  width: 100%;
}

.bpco-checkout .woocommerce-NoticeGroup {
  margin-bottom: 12px;
}

/* =================================================================== */
/* Utilities                                                            */
/* =================================================================== */

.text-center {
  text-align: center;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-16 {
  margin-bottom: 16px;
}

.rounded-12 {
  border-radius: 12px;
}

.rounded-16 {
  border-radius: 16px;
}

/* ------------------------------------------------------------------- */
/* (6) Prefilled subtle tint                                           */
/* ------------------------------------------------------------------- */
.bpco-modal .bpco-prefilled {
  background: #fffbe6;
}

/* ------------------------------------------------------------------- */
/* (13) Header polish: smaller title + "+ Add new" orange link         */
/* ------------------------------------------------------------------- */
.bpco-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.bpco-sheet-head .bpco-title-sm {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 0;
}

a.bpco-add-new {
  background: transparent;
  border: 0;
  color: var(--bpco-orange);
  font-weight: 600;
  text-decoration: none;
  padding: 0;
}

a.bpco-add-new:hover,
a.bpco-add-new:focus {
  text-decoration: underline;
  outline: none;
}

/* ------------------------------------------------------------------- */
/* (14) Edit button = orange bg + white text                           */
/* ------------------------------------------------------------------- */
.bpco-btn.bpco-edit {
  background: var(--bpco-orange);
  color: #fff;
  border: 0;
}

.bpco-btn.bpco-edit:hover,
.bpco-btn.bpco-edit:focus {
  filter: brightness(0.95);
  color: #fff;
}

/* ------------------------------------------------------------------- */
/* (B7) Label chips styling (confirm modal)                             */
/* ------------------------------------------------------------------- */
.bpco-label-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.bpco-chip {
  appearance: none;
  border: 1px solid #ddd;
  background: #fafafa;
  color: #222;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
}

.bpco-chip:active {
  transform: scale(.98);
}

.bpco-chip-ic {
  font-size: 14px;
  line-height: 1;
}

.bpco-chip.is-active {
  background: var(--bpco-accent);
  color: #fff;
  border-color: var(--bpco-accent);
}

.bpco-chip-custom {
  border: 1px dashed #ccc;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  min-width: 120px;
}

/* ------------------------------------------------------------------- */
/* OPC Change-Address chips (modal)                                     */
/* ------------------------------------------------------------------- */
.bpco-addr-chips {
  display: grid;
  gap: 10px;
}

.bpco-chip--addr {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #e6e6e6;
  background: #fff;
  color: #222;
  border-radius: 12px;
  padding: 12px 12px;
  transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}

.bpco-chip--addr:hover {
  border-color: #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.bpco-chip--addr.is-selected {
  border-color: var(--bpco-accent);
}

.bpco-chip--addr.is-busy {
  opacity: .6;
  pointer-events: none;
}

.bpco-chip-title {
  font-weight: 700;
  margin-bottom: 2px;
}

.bpco-chip-lines {
  font-size: 13px;
  color: #444;
}

.bpco-chip-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #333;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.bpco-chip-phone {
  font-weight: 600;
}

.bpco-btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--bpco-border);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}

.bpco-btn-back:hover {
  filter: brightness(0.98);
}

/* fallback: agar DOM me kabhi bacha rahe to */
#bpco-opc-badge-default {
  display: none !important;
}

/* ------------------------------------------------------------ */
/* OPC header: icon-only buttons + tint + typography            */
/* ------------------------------------------------------------ */

.bpco-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 0;
  /* icon vertical centering */
}

.bpco-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  display: block;
}

.bpco-btn-back {
  color: #111;
  border: 1px solid var(--bpco-border);
  background: #fff;
}

.bpco-btn-back:hover {
  filter: brightness(0.98);
}

.bpco-btn-change {
  color: #8b5a2b;
  /* brown-ish */
}

.bpco-btn-change.bpco-btn {
  border: 0;
  background: transparent;
}

.bpco-opc-name {
  font-weight: 700;
}

/* “Robin Sharma” bold jaisa screenshot */
.bpco-opc .bpco-opc-card {
  background: linear-gradient(90deg, #f2ffd6 0%, #fffbe6 100%);
}

.bpco-btn-back .bpco-icon {
  color: #222;
  stroke: #222;
}

.bpco-btn-change .bpco-icon {
  color: #8b5a2b;
  stroke: #8b5a2b;
}

.bpco-opc-card-title {
  font-weight: 700;
  font-size: 16px;
}

.bpco-opc-back-address {
  font-size: 20px;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
}

.bpco-opc-change-address {
  font-size: 20px;
  background: none;
  border: none;
  color: #824400;
  /* Brown color from your screenshot */
  cursor: pointer;
}

.bpco-opc-line {
  display: none;
}

/* Left group: Back + Title inline */
.bpco-opc-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 5px;
}

/* Ensure SVGs always render with currentColor */
.bpco-btn-icon svg,
.bpco-btn-icon .bpco-icon {
  display: block;
  width: 20px;
  height: 20px;
  color: currentColor;
  stroke: currentColor;
  fill: none;
}

/* Colors (already defined, reinforce just in case) */
.bpco-btn-back {
  color: #111;
}

.bpco-btn-change {
  color: #8b5a2b;
}

/* --- OPC: Icon buttons — no padding, fixed size --- */
.bpco-opc-card .bpco-btn.bpco-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  /* white pill ko kill */
  line-height: 0;
  display: contents;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

/* --- OPC: Ensure inline SVGs always render --- */
.bpco-opc-card-head .bpco-btn-icon svg,
.bpco-opc-card-head .bpco-btn-icon .bpco-icon {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}

.bpco-opc-card-head .bpco-btn-icon svg *,
.bpco-opc-card-head .bpco-btn-icon .bpco-icon * {
  stroke: currentColor !important;
  fill: none !important;
  vector-effect: non-scaling-stroke;
}

/* kill any stray pseudo/bullets that may overlay */
.bpco-opc-card-head .bpco-btn-icon::before,
.bpco-opc-card-head .bpco-btn-icon::after {
  content: none !important;
  display: none !important;
}

/* --- OPC: Icon colors --- */
.bpco-btn-back {
  color: #111 !important;
}

.bpco-btn-change {
  color: #8b5a2b !important;
}

/* --- Change icon: force visibility & color --- */
.bpco-opc-head-left .bpco-btn-change {
  color: #8b5a2b !important;
  /* currentColor chain */
  background: transparent !important;
  border: 0 !important;
}

.bpco-opc-head-left .bpco-btn-change svg,
.bpco-opc-head-left .bpco-btn-change .bpco-icon {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

.bpco-opc-head-left .bpco-btn-change svg path {
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Change icon: slightly denser stroke & tighter size */
.bpco-opc-head-left .bpco-btn-change .bpco-icon {
  width: 18px !important;
  /* 18–20 try kar sakte ho */
  height: 18px !important;
}

.bpco-opc-head-left .bpco-btn-change svg path {
  stroke-width: 2.2 !important;
  /* thoda weighty */
}

/* ===== OPC Modal: Topmost layering (JS toggled) ===== */
.bpco-topmost {
  overflow: hidden;
}

/* body/html scroll lock when needed */

#bpco-opc-modal.bpco-zmax,
#bpco-coupon-modal.bpco-zmax,
#bpco-note-modal.bpco-zmax {
  z-index: 2147483646 !important;
  /* backdrop above any sticky footer/nav */
}

#bpco-opc-modal.bpco-zmax .bpco-modal-dialog,
#bpco-coupon-modal.bpco-zmax .bpco-modal-dialog,
#bpco-note-modal.bpco-zmax .bpco-modal-dialog {
  z-index: 2147483647 !important;
  /* dialog above backdrop */
  position: fixed;
  /* ensure out of any stacking-context */
}

/* ===================== Mini Cart (OPC + Shortcode) ===================== */
.bpco-mini-cart {
  margin: 0;
}

.bpco-mc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.bpco-mc-item {
  display: flex;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--bpco-border);
  border-radius: 14px;
  padding: 2px;
  margin-left: 2px;
  margin-right: 2px;
}

.bpco-mc-item.is-busy {
  opacity: .7;
  pointer-events: none;
}

.bpco-mc-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 64px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bpco-mc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bpco-mc-main {
  flex: 1;
  min-width: 0;
}

.bpco-mc-title {
  font-weight: 400;
    margin-bottom: 2px;
    color: var(--bpco-text);
    line-height: 1.2;
    font-size: 12px;
    }

.bpco-mc-desc {
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
}

.bpco-mc-save {
  border: 0;
  background: transparent;
  color: var(--bpco-accent);
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
}

.bpco-mc-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 92px;
}

.bpco-mc-qty {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--bpco-border);
  border-radius: 10px;
  padding: 1px 1px;
}

.bpco-mc-qty button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--bpco-border);
  background: #f9f9f9;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.bpco-mc-qty-val {
  min-width: 18px;
  text-align: center;
  font-weight: 600;
}

.bpco-mc-line-total {
  font-weight: 700;
  color: #333;
  font-size: 14px;
}

@media (max-width:480px) {
  .bpco-mc-actions {
    min-width: 80px;
  }

  .bpco-mc-thumb {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
}

/* Mini-cart price flicker smooth */
.bpco-mini-cart .bpco-mc-line-total {
  display: inline-block;
  min-width: 6.5ch;
  /* roughly currency+amount width */
  transition: opacity .12s ease;
}

.bpco-mini-cart .is-busy .bpco-mc-line-total {
  opacity: .65;
}

/* BPCO: tiny shimmer on totals area during soft refresh (optional) */
.bpco-totals-busy .woocommerce-checkout-review-order-table,
.bpco-totals-busy #payment {
  position: relative;
}

.bpco-totals-busy .woocommerce-checkout-review-order-table::after,
.bpco-totals-busy #payment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04));
  animation: bpco-shimmer 1s linear infinite;
  border-radius: 6px;
}

@keyframes bpco-shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* BPCO-54: Allow page to scroll even if Woo's block overlay is shown */
.woocommerce .blockUI.blockOverlay,
.blockUI.blockOverlay {
  pointer-events: none !important;
  /* overlay clicks block kare, par scroll ko nahi */
}

/* BPCO-60: Woo notices no-scroll/no-outline on focus (OPC me jump avoid) */
.bpco-opc .woocommerce-message,
.bpco-opc .woocommerce-error,
.bpco-opc .woocommerce-info {
  scroll-margin-top: 0;
  /* defensive */
  outline: none !important;
  /* focus visible ko cosmetic rakhna */
}

.bpco-opc .woocommerce-message:focus,
.bpco-opc .woocommerce-error:focus,
.bpco-opc .woocommerce-info:focus {
  outline: none !important;
}

html {
  scroll-behavior: auto !important;
}

/* ensure no smooth-jump */


/* B-70: invisible placeholder must never affect layout */
#bpco-or-ph {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---- OPC tiny cards (coupon & note) ---- */
.bpco-opc-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  padding: 2px 0 0 0;
  margin: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.bpco-opc-card--slim {
  padding: 4px 4px;
  margin-bottom: 7px;
  border-radius: 10px;
  margin-left: 6px;
  margin-right: 6px;
}

.bpco-opc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px;
  background-color: white;
  border-radius: 10px;
}

.bpco-opc-title {
  font-size: 14px;
  line-height: 1.3;
}

.bpco-opc-cta .bpco-link {
  background: none;
  border: 0;
  color: #2563eb;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
}

.bpco-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f7ed;
  color: #0f5132;
  font-weight: 600;
}

.bpco-pill em {
  font-style: normal;
  opacity: .85;
  font-weight: 500;
}

.bpco-pill--ok .bpco-tick {
  font-weight: 700;
}

/* ---- Modals ---- */
.bpco-modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .4);
  display: none;
  z-index: 9999;
}

.bpco-modal.bpco-open {
  display: block;
}

.bpco-modal-dialog {
  background: #fff;
  width: min(520px, 94vw);
  margin: 10vh auto 0;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  position: relative;
}

.bpco-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.bpco-fieldline {
  display: flex;
  gap: 8px;
}

#bpco-coupon-input {
  flex: 1;
}

#bpco-note-text {
  width: 100%;
}

.bpco-form-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.bpco-form-msg {
  margin: 8px 0 0;
  font-size: 13px;
}

.bpco-form-msg.is-ok {
  color: #0f5132;
}

.bpco-form-msg.is-err {
  color: #b42318;
}

/* Prevent body scroll while modal open (reuse existing class) */
html.bpco-modal-open,
body.bpco-modal-open {
  overflow: hidden !important;
}

#bpco-coupon-title {
  font-size: 18px;
  margin-left: 10px;
}

/* Bottom-sheet modals (coupon & note) — padding for form content */
#bpco-coupon-modal .bpco-modal-dialog,
#bpco-note-modal .bpco-modal-dialog {
  padding: 16px;
}

#bpco-opc-coupon {
  background-color: #fff9e4
}

#bpco-opc-note {
  background-color: #fff9e4
}

/* OPC: Shipping (delivery options) */
#bpco-opc-shipping {
  margin-top: 10px;
}

#bpco-opc-shipping .bpco-opc-title {
  font-weight: 600;
}

#bpco-opc-shipping .bpco-opc-ship-area ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

#bpco-opc-shipping .bpco-opc-ship-area li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

#bpco-opc-shipping .bpco-opc-ship-area li:first-child {
  border-top: 0;
}

#bpco-opc-shipping .bpco-opc-ship-area label {
  cursor: pointer;
  display: inline-block;
  line-height: 1.35;
}

/* Hide native shipping choosers ONLY after relocation */
body.bpco-ship-relocated form.checkout ul.woocommerce-shipping-methods,
body.bpco-ship-relocated form.checkout ul[id^="shipping_method"],
body.bpco-ship-relocated form.checkout .woocommerce-shipping-totals .woocommerce-shipping-methods,
body.bpco-ship-relocated form.checkout .wc-shipping-methods,
body.bpco-ship-relocated form.checkout .shipping-methods {
  display: none !important;
}

/* Our OPC shipping area always visible */
#bpco-opc-shipping .bpco-opc-ship-area {
  display: block;
}

/* Show shipping lists inside our OPC area even when form-level hide is active */
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area ul.woocommerce-shipping-methods,
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area ul[id^="shipping_method"],
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area .woocommerce-shipping-methods,
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area .wc-shipping-methods,
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area .shipping-methods {
  display: block !important;
}

/* Force show shipping lists inside OPC area */
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area,
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area ul,
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area li,
body.bpco-ship-relocated #bpco-opc-shipping .bpco-opc-ship-area label {
  display: inline-flex;
  visibility: visible !important;
  opacity: 1 !important;
}

#bpco-opc-shipping .bpco-opc-ship-area ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

#bpco-opc-shipping .bpco-opc-ship-area li {
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

#bpco-opc-shipping .bpco-opc-ship-area li:first-child {
  border-top: 0;
}

#bpco-opc-shipping .bpco-opc-ship-area input[type="radio"] {
  margin-right: 8px;
  border-color: black;
}

/* =================================================================== */
/* Login Options (Confirm Address)                                      */
/* =================================================================== */

.bpco-login-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.bpco-login-options .bp-email-login-btn,
.bpco-login-options .bp-tc-btn {
  width: 100%;
  display: block;
  text-align: center;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

/* Email Button (Primary) */
.bpco-login-options .bp-email-login-btn {
  background-color: #2e4a36 !important;
  border: 1px solid #2e4a36 !important;
  color: #ffffff !important;
}

.bpco-login-options .bp-email-login-btn:hover {
  background-color: #253d2c !important;
  border-color: #253d2c !important;
}

/* Phone Button (Secondary) */
.bpco-login-options .bp-tc-btn {
  background-color: #ffffff !important;
  border: 1px solid #2e4a36 !important;
  color: #2e4a36 !important;
}

.bpco-login-options .bp-tc-btn:hover {
  background-color: #f0f7f2 !important;
}

/* =================================================================== */
/* Email Verification UI — Scoped to Confirm Address Page              */
/* Only applies inside .bpco-email-verify-wrapper (bp-hybrid-checkout) */
/* Does NOT affect bp-auth shortcode on other pages                    */
/* =================================================================== */

.bpco-email-verify-wrapper {
  text-align: center;
  padding: 24px 16px 20px;
  margin-top: 8px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fafffe 0%, #fff 100%);
}

/* Large envelope icon */
.bpco-ev-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 10px;
}

/* Subtitle: "Email verification required..." */
.bpco-ev-subtitle {
  font-size: 13px;
  color: #777;
  margin: 0 0 16px;
  line-height: 1.4;
}

/* Override bp-auth inline heading */
.bpco-email-verify-wrapper .bpv-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px;
}

/* Center the main row (hint + provider button) */
.bpco-email-verify-wrapper .bpv-row-main {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
}

/* Hint text (email info) */
.bpco-email-verify-wrapper .bpv-hint {
  font-size: 13px;
  color: #666;
  opacity: 1;
  text-align: center;
  margin: 0;
}

/* Provider button container — center it */
.bpco-email-verify-wrapper .bpv-col-provider {
  display: flex;
  justify-content: center;
  width: 100%;
}

.bpco-email-verify-wrapper .pe_verify_email {
  display: flex;
  justify-content: center;
}

/* Actions row (this isn't my email / verify later) */
.bpco-email-verify-wrapper .bpv-row-actions {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
}

/* "This isn't my email" link — subtle, small */
.bpco-email-verify-wrapper .bpv-link {
  font-size: 12px;
  color: #999;
  text-decoration: none;
  border-bottom: 1px dashed #ccc;
  transition: color .15s ease, border-color .15s ease;
}

.bpco-email-verify-wrapper .bpv-link:hover {
  color: #555;
  border-color: #888;
}

/* Badge (already verified) — keep it centered */
.bpco-email-verify-wrapper .bpv-badge {
  margin: 4px auto;
}

/* Help text — center */
.bpco-email-verify-wrapper .bpv-help {
  text-align: center;
  margin: 10px auto 0;
  max-width: 300px;
}

/* Error message styling */
.bpco-email-verify-wrapper .bpv-error {
  text-align: center;
}