/* =========================================================
   DTB One-Page Checkout — Style Lock (scoped + theme-proof)
   Everything is intentionally scoped to .dtb-opc only.
   ========================================================= */
.dtb-opc,
.dtb-opc * ,
.dtb-opc *::before,
.dtb-opc *::after {
  box-sizing: border-box !important;
}

.dtb-opc{
  isolation: isolate;
  font-family: var(--dtb-opc-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif) !important;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

.dtb-opc :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dt,dd){
  margin: 0;
  padding: 0;
}

.dtb-opc :where(ul,ol){ list-style: none; }

.dtb-opc :where(a){
  color: inherit !important;
  text-decoration: none !important;
}

.dtb-opc :where(img,svg){
  max-width: 100%;
  height: auto;
  display: block;
}

.dtb-opc :where(button,input,select,textarea){
  font: inherit !important;
  letter-spacing: normal;
  text-transform: none;
}

.dtb-opc :where(input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select){
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 10px 12px;
  outline: none;
}

.dtb-opc :where(button, .dtb-opc-btn){
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  background: #111 !important;
  color: #fff !important;
}

.dtb-opc {
  padding: 40px 16px;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  font-family: var(--dtb-opc-font, inherit);
  color: #000;
  background: var(--dtb-opc-bottom-bg-color, transparent);
}
.dtb-opc * { color: #000; }

.dtb-opc::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: var(--dtb-opc-top-bg-height, 0px);
  background: var(--dtb-opc-top-bg-color, transparent);
  z-index: 0;
}
.dtb-opc__hero, .dtb-opc__card { position: relative; z-index: 1; }

.dtb-opc__hero { max-width: 980px; margin: 0 auto 24px; position: relative; text-align: center; }
.dtb-opc__back { position: absolute; left: 0; top: 0; text-decoration: none; opacity: .9; color: inherit; }
.dtb-opc__logo { font-weight: 700; letter-spacing: .5px; }
.dtb-opc__logo img { display: inline-block; }

.dtb-opc__card {
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  overflow: hidden;
}

.dtb-opc-summary { border-bottom: 1px solid rgba(0,0,0,.08); }
.dtb-opc-summary__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px;
}
.dtb-opc-summary__toggle { display: flex; gap: 10px; align-items: center; }
.dtb-opc-summary__icon { width:18px; height:18px; display:inline-block; }
.dtb-opc-summary__btn { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 400; font-size:14px; }
.dtb-opc-summary__total { font-weight: 500; font-size: 20px; }
.dtb-opc-summary__body { padding: 0 18px 18px; }

.dtb-opc-summary.is-collapsed .dtb-opc-summary__body { display: none; }

/* Items */
.dtb-opc-item {
  display: grid;
  grid-template-columns: 144px 1fr 90px;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.dtb-opc-item__thumbimg { border-radius: 10px; display:block; width:128px; height:192px; object-fit:cover; }
.dtb-opc-item__title { font-weight: 400; font-size:14px; margin-bottom: 6px; }
.dtb-opc-item__meta { font-size: 12px; opacity: .85; line-height: 1.35; }
.dtb-opc-item__side { text-align: right; display:flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.dtb-opc-item__remove { border: 1px solid rgba(0,0,0,.18); background: #fff; width: 28px; height: 28px; border-radius: 999px; cursor: pointer; font-size:16px; line-height:26px; display:flex; align-items:center; justify-content:center; }
.dtb-opc-item__price { font-weight: 600; font-size:14px; }
.dtb-opc-item__price .dtb-opc-price__regular{ display:block; opacity:0.55; margin:0 0 2px 0; font-weight:400; }
.dtb-opc-item__price .dtb-opc-price__regular *{ opacity:1; }
.dtb-opc-item__price .dtb-opc-price__saved{ display:block; margin:0 0 2px 0; font-weight:400; font-size:12px; color:#1f7a3a !important; }
.dtb-opc-item__price .dtb-opc-price__saved *{ color:#1f7a3a !important; font-weight:400; font-size:12px; }

.dtb-opc-item__price .dtb-opc-price__saved .woocommerce-Price-amount,
.dtb-opc-item__price .dtb-opc-price__saved .woocommerce-Price-currencySymbol{ color:#1f7a3a !important; }
.dtb-opc-item__price .dtb-opc-price__sale{ display:block; text-decoration:none; font-weight:600; margin:0; }


/* Qty */
/* Coupon */
.dtb-opc-summary__coupon{
  display:block;
  margin-top:14px;
}
.dtb-opc-coupon__row{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  align-items:stretch;
}
.dtb-opc-coupon__msg{
  width:100%;
  margin-top:10px;
}

.dtb-opc-coupon__input{
  flex:1 1 auto;
  width:100%;
  height:48px;
  padding:0 16px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:14px;
  background:#fff;
  font-family: inherit;
  font-size: inherit;
  line-height: normal;
  box-sizing:border-box;
}
.dtb-opc-coupon__input::placeholder{
  color: rgba(0,0,0,.55);
}
.dtb-opc-coupon__btn{
  width:180px;
  height:48px;
  border-radius:14px;
  border:0;
  background:#1b1b1b;
  cursor:pointer;
  font-weight:700;
  color:#fff;
  box-sizing:border-box;
}
.dtb-opc-coupon__btn:hover{
  background:#d4af37;
  color:#fff;
}
.dtb-opc-coupon__msg{
  flex: 0 0 100%;
  width:100%;
  margin-top:0;
  font-size:13px;
  line-height:1.35;
}
@media (max-width: 640px){
  /* Mobile: stack discount code input and Apply button as full-width rows */
  .dtb-opc-coupon__row{
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }
  .dtb-opc-coupon__input{
    width:100%;
    height:48px !important;
    min-height:48px !important;
    font-size:16px; /* iOS-friendly */
  }
  .dtb-opc-coupon__btn{
    width:100%;
    flex:0 0 auto;
    height:48px !important;
    min-height:48px !important;
    padding:0 16px !important;
    line-height:48px !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }
}


@media (max-width: 640px){
  /* Mobile: prevent long product titles from breaking the item layout */
  .dtb-opc-item{
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "thumb main"
      "thumb side";
    gap: 12px;
  }
  .dtb-opc-item__thumb{ grid-area: thumb; }
  .dtb-opc-item__main{ grid-area: main; min-width: 0; }
  .dtb-opc-item__title{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .dtb-opc-item__side{
    grid-area: side;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  .dtb-opc-item__price{
    text-align: right;
  }
}
/* Totals */
.dtb-opc-summary__totals { margin-top: 16px; border-top: 1px solid rgba(0,0,0,.06); padding-top: 12px; }
.dtb-opc-trow { display:flex; justify-content: space-between; padding: 6px 0; }
.dtb-opc-trow--total { font-weight: 800; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.06); margin-top: 10px; }

/* Checkout block styling */
.dtb-opc-checkout { padding: 18px; }
.dtb-opc-h2 { margin: 18px 0 10px; font-size: 20px; }
.dtb-opc-block { padding: 12px 0 6px; }
/* Two-column layout for DTB field groups (desktop), stacked on mobile */
.dtb-opc-fields-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 24px;
}
@media (max-width: 900px){
  .dtb-opc-fields-grid{
    grid-template-columns: 1fr;
  }
}
.dtb-opc-fields-grid .form-row{ margin:0; }
.dtb-opc-fields-grid .form-row-wide{ grid-column: 1 / -1; }


/* Keep Woo fields clean */
.dtb-opc .woocommerce form .form-row { margin: 0 0 12px; }
.dtb-opc .woocommerce form .form-row input.input-text,
.dtb-opc .woocommerce form .form-row select,
.dtb-opc .woocommerce form .form-row textarea {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
}


/* Ensure inputs/selects fill their grid cell */
.dtb-opc-fields-grid .form-row input.input-text,
.dtb-opc-fields-grid .form-row select,
.dtb-opc-fields-grid .form-row textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* Mobile */
@media (max-width: 640px) {
  .dtb-opc-item { grid-template-columns: 104px 1fr; }
  .dtb-opc-item__thumbimg{ width:96px; height:144px; }
  .dtb-opc-item__side { grid-column: 2; align-items:flex-start; text-align:left; flex-direction: row; justify-content: space-between; width:100%; }
  .dtb-opc-summary__coupon { flex-direction: column; }
  .dtb-opc-coupon__btn { width: 180px; height: 44px; border-radius: 10px; border: 0; background: #1b1b1b; cursor:pointer; font-weight: 700; color:#fff; }
.dtb-opc-coupon__btn:hover{ background:#d4af37; color:#fff; }
}

/* Hide Woo coupon toggle notice inside this UI */
.dtb-opc .woocommerce-form-coupon-toggle,
.dtb-opc .woocommerce-info {
  display:none !important;
}

/* Back link should not change color after visit */
.dtb-opc__back:link,
.dtb-opc__back:visited,
.dtb-opc__back:hover,
.dtb-opc__back:active{ color: inherit; }

.dtb-opc-qty__btn, .dtb-opc-qty__input, .dtb-opc-coupon__input, .dtb-opc-coupon__btn { width: 180px; height: 44px; border-radius: 10px; border: 0; background: #1b1b1b; cursor:pointer; font-weight: 700; color:#fff; }
.dtb-opc-coupon__input{ background: #fff !important; color: #000 !important; }
.dtb-opc-coupon__btn:hover{ background:#d4af37; color:#fff; }

/* Back link: default white, hover gold, visited same as default */
.dtb-opc__back:link,
.dtb-opc__back:visited{
  color:#ffffff;
}
.dtb-opc__back:hover,
.dtb-opc__back:active{
  color:#d4af37;
}

.dtb-opc-summary__btn{ display:flex; align-items:center; gap:8px; }
.dtb-opc-summary__arrow{ font-size:12px; opacity:.85; }

/* Force rounded checkout fields (Woo may override) */
.dtb-opc .woocommerce form .form-row input.input-text,
.dtb-opc .woocommerce form .form-row select,
.dtb-opc .woocommerce form .form-row textarea{
  border-radius:14px !important;
}

/* Thumbnail qty badge + controls */
.dtb-opc-thumbwrap{ position:relative; display:inline-block; }
.dtb-opc-qty-under{ margin-top:6px; display:flex; gap:10px; align-items:center; justify-content:center; }

/* Variation labels/values in cart item meta — field name on own line, values below */
.dtb-opc-item__meta{ font-size:12px; line-height:1.4; }
/* Compact one-line-per-option rows (label + value on same line). */
.dtb-opc-meta-row{ margin:0 0 1px; white-space:normal; }
.dtb-opc-meta-label{ font-weight:700; }
/* Legacy <dl> fallback (if any other code path still outputs it). */
.dtb-opc-item__meta dl{ margin:2px 0 0; }
.dtb-opc-item__meta dl:first-child{ margin-top:0; }
.dtb-opc-item__meta dt{ display:inline; white-space:normal; font-weight:700; margin:0; }
.dtb-opc-item__meta dd{ display:inline; white-space:normal; font-weight:400; margin:0; }
.dtb-opc-item__meta dd p{ display:inline; margin:0; }


.dtb-opc-qtyunder__btn{
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  font-size:16px;
  line-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#000;
}
.dtb-opc-qtyunder__btn:hover{
  background: rgba(0,0,0,.06);
}

/* Coupon input: keep original styling (do not inherit global rounding) */
.dtb-opc-coupon__input{
  border-radius:10px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  height:44px !important;
  padding:0 12px !important;
  background:#fff !important;
  color:#000 !important;
}


/* Summary totals (bottom of order summary) */
.dtb-opc-totals,
.dtb-opc-totals *{
  font-size:20px;
  font-weight:500;
}

@media (max-width: 640px){
  .dtb-opc-coupon{ display:block; }
  .dtb-opc-coupon__input{ width:100% !important; }
  .dtb-opc-coupon__btn{ width:100% !important; margin-top:10px; }
}

@media (max-width: 640px){
  .dtb-opc-item__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:nowrap; }
  .dtb-opc-item__title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dtb-opc-item__price{ white-space:nowrap; }
}

/* Force correct sizing for remove and qty buttons (override any theme styles) */
.dtb-opc-item__remove{
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  background:#fff !important;
  font-size:16px !important;
  line-height:26px !important;
}
.dtb-opc-qtyunder__btn{
  width:28px !important;
  height:28px !important;
  border-radius:999px !important;
  background:#fff !important;
  font-size:16px !important;
  line-height:26px !important;
}

/* Summary bottom total row */
.dtb-opc-summary__totals .dtb-opc-trow--total .dtb-opc-trow__label,
.dtb-opc-summary__totals .dtb-opc-trow--total .dtb-opc-trow__value{
  font-size:20px !important;
  font-weight:500 !important;
}

.dtb-opc-qtybadge{
  position:absolute;
  right:6px;
  bottom:6px;
  width:32px;
  height:32px;
  border-radius:999px;
  background:#d4af37;
  border:1px solid rgba(0,0,0,.25);
  color:#000;
  font-weight:500;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}

@media (max-width: 640px){
  .dtb-opc-item__head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
  }
  .dtb-opc-item__title{
    flex:1 1 auto !important;
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .dtb-opc-item__price{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    margin-left:auto !important;
  }
}

@media (max-width: 640px){
  .dtb-opc-coupon{
    display:block !important;
  }
  .dtb-opc-coupon__input{
    width:100% !important;
    height:44px !important;
    font-size:14px !important;
  }
  .dtb-opc-coupon__btn{
    width:100% !important;
    height:50px !important;
    margin-top:10px !important;
  }
}

/* --- Customer details tweaks --- */
/* Hide Woo default Billing/Shipping section titles inside our blocks (keeps our own 'Customer details' title) */
.dtb-opc .woocommerce-billing-fields > h3,
.dtb-opc .woocommerce-shipping-fields > h3{
  display:none !important;
}

/* Remove "Ship to a different address" checkbox + extra address fields */
.dtb-opc #ship-to-different-address,
.dtb-opc .shipping_address{
  display:none !important;
}

/* Rounded inputs in Customer details */
.dtb-opc-form input[type="text"],
.dtb-opc-form input[type="email"],
.dtb-opc-form input[type="tel"],
.dtb-opc-form input[type="password"],
.dtb-opc-form input[type="number"],
.dtb-opc-form select,
.dtb-opc-form textarea{
  border-radius:14px !important;
}

/* Place order button rounded */
.dtb-opc-form #place_order,
.dtb-opc-form button#place_order,
.dtb-opc-form .woocommerce-checkout-payment button,
.dtb-opc-form button[type="submit"].button{
  border-radius:14px !important;
}


to{transform:rotate(360deg);} }

/* Order notes textarea: taller, but normal text + equal padding */
.dtb-opc-form textarea#order_comments{
  min-height: 140px !important; /* ~3x */
  padding: 14px 14px !important; /* equal top/sides */
  line-height: 1.4 !important;
  font-size: inherit !important;
  box-sizing: border-box !important;
}


/* Hide all footer rows except shipping */
#dtb-opc-shipping-methods .woocommerce-checkout-review-order-table tfoot tr{
  display:none !important;
}
#dtb-opc-shipping-methods .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals{
  display:table-row !important;
}
#dtb-opc-shipping-methods .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th{
  display:none !important; /* remove "Shipping" label, keep radios */
}
#dtb-opc-shipping-methods #shipping_method{
  margin:0;
  padding:0;
  list-style:none;
}
#dtb-opc-shipping-methods #shipping_method li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  margin:10px 0 0;
}
#dtb-opc-shipping-methods #shipping_method li input{
  margin-right:10px;
}
#dtb-opc-shipping-methods #shipping_method li label{
  flex:1;
  cursor:pointer;
  font-size:14px;
  line-height:1.3;
}
#dtb-opc-shipping-methods #shipping_method li .amount{
  font-weight:600;
}

/* Delivery method: shipping methods only */
.dtb-opc-shipping-only ul.woocommerce-shipping-methods{
  margin:0;
  padding:0;
  list-style:none;
}
.dtb-opc-shipping-only li.woocommerce-shipping-method{
  margin:10px 0 0;
}
.dtb-opc-shipping-only li.woocommerce-shipping-method label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  cursor:pointer;
  width:100%;
}
.dtb-opc-shipping-only li.woocommerce-shipping-method input[type="radio"]{
  margin:0 10px 0 0;
  flex:0 0 auto;
}
.dtb-opc-shipping-only .dtb-ship-label{
  flex:1 1 auto;
  font-size:14px;
  line-height:1.3;
}
.dtb-opc-shipping-only .amount{
  font-weight:600;
}
.dtb-opc-shipping-empty{
  font-size:14px;
  opacity:.7;
  margin:8px 0 0;
}

/* Rounded country select */
.dtb-opc-form select,
.dtb-opc-form .select2-container .select2-selection--single{
  border-radius:14px !important;
}

/* Select2 always fills its parent — prevents width shrinkage after checkout fragment refresh */
.dtb-opc-form .select2-container {
  width: 100% !important;
}

/* Mid order total block (between delivery & payment) */
.dtb-opc-midtotal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  margin:14px 0 22px;
}
.dtb-opc-midtotal__label{
  font-size:14px;
  font-weight:500;
}
.dtb-opc-midtotal__amount{
  font-size:20px;
  font-weight:500;
}

/* Mid totals block spacing */
.dtb-opc-block--midtotals{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 18px 0 22px;
}
.dtb-opc-summary__totals--mid{
  margin: 0;
}



/* Apply button keeps existing theme colors but matches height/rounding */
.dtb-opc-coupon button,
.dtb-opc-coupon button[name="apply_coupon"],
.woocommerce-form-coupon button,
.woocommerce-form-coupon button[name="apply_coupon"]{
  height:48px !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
}


/* Customer details: make street / postcode / city compact (2-column grid on desktop) */
.dtb-opc-fields-grid .woocommerce-billing-fields__field-wrapper{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px 24px;
}
@media (max-width: 900px){
  .dtb-opc-fields-grid .woocommerce-billing-fields__field-wrapper{
    grid-template-columns: 1fr !important;
    gap:14px !important;
  }
  /* Ensure all fields span full width on mobile */
  .dtb-opc-fields-grid #billing_first_name_field,
  .dtb-opc-fields-grid #billing_email_field,
  .dtb-opc-fields-grid #billing_phone_field,
  .dtb-opc-fields-grid #billing_address_1_field,
  .dtb-opc-fields-grid #billing_postcode_field,
  .dtb-opc-fields-grid #billing_city_field,
  .dtb-opc-fields-grid #billing_country_field{
    grid-column: 1 / -1 !important;
  }
}

/* Force specific address fields to take one column (not full width) */
.dtb-opc-fields-grid #billing_address_1_field,
.dtb-opc-fields-grid #billing_postcode_field,
.dtb-opc-fields-grid #billing_city_field,
.dtb-opc-fields-grid #billing_country_field,
.dtb-opc-fields-grid #billing_first_name_field,
.dtb-opc-fields-grid #billing_phone_field,
.dtb-opc-fields-grid #billing_email_field{
  width:auto;
}

/* Email: half width on desktop (leave room for Express button) */
.dtb-opc-fields-grid #billing_email_field{
  grid-column: 1 !important;
}

/* Hide WooPayments default separator inside DTB checkout */
.dtb-opc #wcpay-express-checkout-button-separator{
  display:none !important;
}

/* Express checkout (shown only when a gateway actually renders an express button) */
.dtb-opc-express-head,
.dtb-opc-express-section,
.dtb-opc-express-alt{
  display:none;
}
.dtb-opc-express-head.is-visible,
.dtb-opc-express-section.is-visible,
.dtb-opc-express-alt.is-visible{
  display:block;
}
.dtb-opc-express-alt{
  margin:12px 0 10px;
  text-align:center;
  font-size:13px;
  opacity:.8;
}



/* Inline email helper note (shown only on the standard checkout path) */
.dtb-opc #billing_email_field label{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap: 6px;
}

.dtb-opc-email-note-inline{
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: #777;
  opacity: 1;
}

/* Express checkout slot (Apple Pay / Google Pay via WooPayments, etc.) */
.dtb-opc-express-slot{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
}

/* Keep gateway-rendered buttons visually aligned with our inputs */
.dtb-opc-express-slot button,
.dtb-opc-express-slot .button,
.dtb-opc-express-slot a.button{
  border-radius: 14px !important;
  height: 48px !important;
  box-sizing: border-box !important;
}

/* Place Name + Phone on same row */
.dtb-opc-fields-grid #billing_first_name_field{ grid-column: 1 !important; }
.dtb-opc-fields-grid #billing_phone_field{ grid-column: 2 !important; }

/* Address + City on same row */
.dtb-opc-fields-grid #billing_address_1_field{ grid-column: 1 !important; }
.dtb-opc-fields-grid #billing_city_field{ grid-column: 2 !important; }

/* Postcode + Country on same row */
.dtb-opc-fields-grid #billing_postcode_field{ grid-column: 1 !important; }
.dtb-opc-fields-grid #billing_country_field{ grid-column: 2 !important; }

/* Ensure field wrappers don't expand weirdly */

.dtb-opc-fields-grid .form-row{
  margin:0 !important;
}


/* Coupon line in totals */
.dtb-opc-trow--coupon{
  color:#147a2f;
  background: rgba(31, 143, 58, 0.18);
  border: 1px solid rgba(31, 143, 58, 0.28);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 6px 0;
}
.dtb-opc-trow--coupon .dtb-opc-trow__label{
  display:flex;
  align-items:center;
  gap:8px;
}
.dtb-opc-couponline__remove{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  border-radius:0;
  width:auto;
  height:auto;
  line-height:1;
  font-size:16px;
  font-weight:700;
  padding:0 2px;
  cursor:pointer;
  box-shadow:none;
}
.dtb-opc-couponline__remove:hover{
  opacity:.85;
}

.dtb-opc-couponline__prefix{font-weight:600;}


/* Empty cart / Thank you title row */
.dtb-opc-empty__title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.dtb-opc-empty__title .dtb-opc-summary__icon{ flex:0 0 auto; }

/*
  Unified button styling
  ----------------------
  The coupon "Apply" button (.dtb-opc-coupon__btn) is the reference style.
  We mirror that look (colors, hover, rounding, font weight) across:
  - Empty cart button
  - Proceed to delivery & payment
  - Place order
  - Thank you button
*/

/* Base: full-width primary buttons */
.dtb-opc-btn-primary,
.dtb-opc-continue,
.dtb-opc-form #place_order,
.dtb-opc-form button#place_order,
.dtb-opc-form .woocommerce-checkout-payment button,
.dtb-opc-form button[type="submit"].button{
  background:#1b1b1b !important;
  color:#fff !important;
  border:0 !important;
  border-radius:14px !important;
  font-weight:700 !important;
  font-family:inherit !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
  text-decoration:none !important;
}

/* Ensure consistent sizing for anchor/button variants */
.dtb-opc-btn-primary,
.dtb-opc-continue{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:48px;
  padding:0 16px;
  line-height:48px;
}

/* Woo place order button (can be <button> with theme padding) */
.dtb-opc-form #place_order,
.dtb-opc-form button#place_order,
.dtb-opc-form .woocommerce-checkout-payment button,
.dtb-opc-form button[type="submit"].button{
  min-height:48px !important;
  padding:0 16px !important;
  line-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
}

/* Hover: gold */
.dtb-opc-btn-primary:hover,
.dtb-opc-continue:hover,
.dtb-opc-form #place_order:hover,
.dtb-opc-form button#place_order:hover,
.dtb-opc-form .woocommerce-checkout-payment button:hover,
.dtb-opc-form button[type="submit"].button:hover{
  background:#d4af37 !important;
  color:#fff !important;
}

/* Active: keep subtle press without opacity fade */
.dtb-opc-btn-primary:active,
.dtb-opc-continue:active,
.dtb-opc-form #place_order:active,
.dtb-opc-form button#place_order:active,
.dtb-opc-form .woocommerce-checkout-payment button:active,
.dtb-opc-form button[type="submit"].button:active{
  transform: translateY(1px);
}


/* Step 2 reveal (progressive one-page checkout) */
.dtb-opc-step2.is-hidden{ display:none; }

/* Step 1 (email-first) */
.dtb-opc-step1-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.dtb-opc-step1-edit{
  background:transparent;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
  opacity:.75;
}

.dtb-opc-step1-edit:hover{ opacity:1; }

.dtb-opc-step1-edit.is-hidden{ display:none; }

.dtb-opc-step1-actions.is-hidden{ display:none; }

/* When Step 2 is revealed, keep Step 1 visible but compact */
.dtb-opc-step1.is-compact .dtb-opc-block{
  margin-bottom:0;
}


.dtb-opc-step1-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin: 14px 0 22px;
}

.dtb-opc-step1-notice{
  min-height: 0;
}

.dtb-opc-step1-notice .woocommerce-error,
.dtb-opc-step1-notice .woocommerce-message{
  margin:0;
}

.dtb-opc-continue:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* --- Mobile: force DTB field ordering to stack in one column (override per-field grid columns) --- */
@media (max-width: 900px){
  .dtb-opc-fields-grid{
    grid-template-columns: 1fr !important;
  }
  .dtb-opc-fields-grid #billing_first_name_field,
  .dtb-opc-fields-grid #billing_phone_field,
  .dtb-opc-fields-grid #billing_address_1_field,
  .dtb-opc-fields-grid #billing_city_field,
  .dtb-opc-fields-grid #billing_postcode_field,
  .dtb-opc-fields-grid #billing_country_field,
  .dtb-opc-fields-grid #billing_email_field{
    grid-column: 1 / -1 !important;
  }
}

/* =========================================================
   DTB OPC — Unified text fields (match coupon input computed)
   Scoped to .dtb-opc only.
   ========================================================= */
.dtb-opc input[type="text"],
.dtb-opc input[type="email"],
.dtb-opc input[type="tel"],
.dtb-opc input[type="password"],
.dtb-opc input[type="number"],
.dtb-opc select{
  appearance: auto !important;
  display: inline-block;
  box-sizing: border-box !important;

  width: 100%;
  max-width: 100%;

  height: 50px !important;
  padding: 0 16px !important;

  background-color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(205, 205, 205) !important;
  border-radius: 14px !important;

  font-family: Poppins, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgb(0, 0, 0) !important;

  letter-spacing: normal !important;
  line-height: 48px !important;
  box-shadow: none !important;
  outline: none !important;
}

.dtb-opc textarea{
  appearance: auto !important;
  display: inline-block;
  box-sizing: border-box !important;

  width: 100%;
  max-width: 100%;

  padding: 12px 16px !important;

  background-color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(205, 205, 205) !important;
  border-radius: 14px !important;

  font-family: Poppins, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgb(0, 0, 0) !important;

  letter-spacing: normal !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;

  min-height: 120px;
  height: auto;
}

.dtb-opc input::placeholder,
.dtb-opc textarea::placeholder{
  font-weight: 300 !important;
  color: rgba(0,0,0,.45) !important;
  opacity: 1;
}

/* =========================================================
   DTB OPC — Button shield (keep current look, prevent overrides)
   IMPORTANT: does NOT touch qty +/- buttons (dtb-opc-qtyunder__btn).
   ========================================================= */
.dtb-opc button#place_order.button.alt,
.dtb-opc #place_order,
.dtb-opc .dtb-opc-coupon__btn,
.dtb-opc a.dtb-opc-btn-primary,
.dtb-opc button.button,
.dtb-opc a.button,
.dtb-opc input[type="submit"],
.dtb-opc input[type="button"]{
  font-family: Poppins, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;

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

  box-shadow: none !important;
  outline: none !important;
}

/* Primary buttons */
.dtb-opc button#place_order.button.alt,
.dtb-opc #place_order,
.dtb-opc .dtb-opc-coupon__btn,
.dtb-opc a.dtb-opc-btn-primary,
.dtb-opc input[type="submit"]{
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 18px !important;

  background: #1b1b1b !important;
  color: #fff !important;
  cursor: pointer;
}

.dtb-opc button#place_order.button.alt:hover,
.dtb-opc #place_order:hover,
.dtb-opc .dtb-opc-coupon__btn:hover,
.dtb-opc a.dtb-opc-btn-primary:hover,
.dtb-opc input[type="submit"]:hover{
  background: #d4af37 !important;
}

.dtb-opc button#place_order.button.alt:disabled,
.dtb-opc #place_order:disabled,
.dtb-opc .dtb-opc-coupon__btn:disabled,
.dtb-opc a.dtb-opc-btn-primary[aria-disabled="true"],
.dtb-opc input[type="submit"]:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
}


/* =========================================================
   DTB OPC — critical style lock fixes
   Prevent generic button shield from affecting summary toggle,
   remove buttons and qty +/- buttons.
   ========================================================= */
.dtb-opc .dtb-opc-summary,
.dtb-opc .dtb-opc-summary__head,
.dtb-opc .dtb-opc-summary__body{
  background:#fff !important;
}

.dtb-opc button.dtb-opc-summary__btn,
.dtb-opc .dtb-opc-summary__btn{
  appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#000 !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  line-height:1.2 !important;
}
.dtb-opc .dtb-opc-summary__btn span,
.dtb-opc .dtb-opc-summary__label,
.dtb-opc .dtb-opc-summary__arrow{
  color:#000 !important;
}

.dtb-opc button.dtb-opc-item__remove,
.dtb-opc .dtb-opc-item__remove{
  appearance:none !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.18) !important;
  color:#000 !important;
  box-shadow:none !important;
}
.dtb-opc .dtb-opc-item__remove,
.dtb-opc .dtb-opc-item__remove *{
  color:#000 !important;
}

.dtb-opc button.dtb-opc-qtyunder__btn,
.dtb-opc .dtb-opc-qtyunder__btn{
  appearance:none !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.18) !important;
  color:#000 !important;
  box-shadow:none !important;
}
.dtb-opc .dtb-opc-qtyunder__btn,
.dtb-opc .dtb-opc-qtyunder__btn *{
  color:#000 !important;
}

/* Hide WooCommerce's built-in terms checkbox; we show a static statement instead */
.dtb-opc-form .woocommerce-terms-and-conditions-wrapper {
  display: none !important;
}

/* ── Payment Methods ────────────────────────────────────────────────────────
   Layout: CSS grid on each <li> with 3 columns:
     [46px radio] [1fr label text] [auto icons]
   Icons are moved into .dtb-opc-pm-icons by JS (handles any gateway HTML).
   ─────────────────────────────────────────────────────────────────────────── */

/* Strip WooCommerce's grey #payment background / padding */
.dtb-opc #payment {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* List reset + vertical stack */
.dtb-opc #payment ul.wc_payment_methods {
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Each gateway = selectable card — 3-column grid */
.dtb-opc #payment ul.wc_payment_methods li.wc_payment_method {
  display: grid !important;
  grid-template-columns: 46px 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  border: 1.5px solid rgba(0,0,0,.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dtb-opc #payment ul.wc_payment_methods li.wc_payment_method:hover {
  border-color: rgba(0,0,0,.28) !important;
}

/* Selected card */
.dtb-opc #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  border-color: #1b1b1b !important;
  background: #fafafa !important;
}

/* Column 1 — custom radio dot */
.dtb-opc #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #ccc !important;
  border-radius: 50% !important;
  margin: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color .15s !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.dtb-opc #payment ul.wc_payment_methods li.wc_payment_method > input[type="radio"]:checked {
  border-color: #1b1b1b !important;
  background: #1b1b1b !important;
  box-shadow: inset 0 0 0 3px #fff !important;
}

/* Column 2 — label (text only after JS runs) */
.dtb-opc #payment ul.wc_payment_methods li.wc_payment_method > label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  padding: 13px 8px !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #000 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Column 3 — icons wrapper (injected by JS) */
.dtb-opc-pm-icons {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  padding: 0 14px 0 24px !important;
  flex-shrink: 0 !important;
}

.dtb-opc-pm-icons img,
.dtb-opc-pm-icons svg {
  height: 20px !important;
  width: auto !important;
  max-width: 150px !important;
  display: inline-block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  border-radius: 2px !important;
}

@media (max-width: 640px) {
  .dtb-opc-pm-icons img,
  .dtb-opc-pm-icons svg {
    max-width: 100px !important;
  }
}

/* Row 2 — description box (radio column excluded), rounded inset box */
.dtb-opc #payment ul.wc_payment_methods li.wc_payment_method .payment_box {
  grid-column: 2 / -1 !important;
  grid-row: 2 !important;
  background: rgba(0,0,0,.03) !important;
  border: none !important;
  border-radius: 10px !important;
  margin: 0 10px 10px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #555 !important;
  width: auto !important;
}

/* Remove WooCommerce's default ::before caret on payment_box */
.dtb-opc #payment ul.wc_payment_methods li.wc_payment_method .payment_box::before {
  display: none !important;
}

/* Place order section — flush with card list */
.dtb-opc #payment .form-row.place-order {
  padding: 0 !important;
  margin: 4px 0 0 !important;
}

/* Required-field validation error highlight */
.dtb-opc .form-row.woocommerce-invalid input.input-text,
.dtb-opc .form-row.woocommerce-invalid input[type="text"],
.dtb-opc .form-row.woocommerce-invalid input[type="email"],
.dtb-opc .form-row.woocommerce-invalid input[type="tel"],
.dtb-opc .form-row.woocommerce-invalid select {
  border-color: #e2401c !important;
}

/* "Select payment method" button wrapper */
.dtb-opc-payment-btn-wrap {
  margin: 6px 0 18px;
}

/* Payment notice (validation error) spacing */
.dtb-opc-payment-btn-wrap .dtb-opc-step1-notice:not(:empty) {
  margin-bottom: 10px;
}

/* Payment section (heading + block) — hidden until button is clicked */
.dtb-opc-payment-section.is-hidden {
  display: none;
}

/* ---- Address quick search field ---- */
.dtb-opc-address-search-wrap {
  grid-column: 1 / -1 !important; /* always full width in the 2-column grid */
}

.dtb-opc-address-search {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Maa-amet ADS dropdown */
.dtb-opc-ads-dropdown {
  display: none;
  position: absolute;
  z-index: 99999;
  left: 0;
  right: 0;
  top: 100%;
  margin: 2px 0 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  font-family: inherit;
  max-height: 240px;
  overflow-y: auto;
}

.dtb-opc-address-search-wrap {
  position: relative; /* anchor for the absolute dropdown */
}

.dtb-opc-ads-item {
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.4;
  color: #222;
}

.dtb-opc-ads-item:hover {
  background: #f5f5f5;
}

/* Google Places dropdown must appear above the card shadow / other elements */
.pac-container {
  z-index: 99999 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  font-family: inherit !important;
  margin-top: 2px !important;
}

.pac-item {
  padding: 8px 12px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.pac-item:hover,
.pac-item-selected {
  background: #f5f5f5 !important;
}

/* Terms acceptance statement */
.dtb-opc .dtb-opc-terms-text {
  font-size: 13px !important;
  color: #555 !important;
  margin: 0 0 12px !important;
  line-height: 1.5 !important;
}
.dtb-opc .dtb-opc-terms-text a {
  color: inherit !important;
  text-decoration: underline !important;
}

/* ── Account block (register / login) ── */
.dtb-opc-account-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: #fafafa;
}

/* Register checkbox row */
.dtb-opc-register-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.dtb-opc-register-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #1b1b1b;
  cursor: pointer;
}
.dtb-opc-register-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dtb-opc-register-title {
  font-size: 14px;
  font-weight: 600;
  color: #1b1b1b;
}
.dtb-opc-register-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.5;
}

/* Divider between register and login rows */
.dtb-opc-account-block .dtb-opc-register-label + .dtb-opc-login-row {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 10px;
}

/* Login hint row */
.dtb-opc-login-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.dtb-opc-login-hint {
  color: #777;
}
.dtb-opc-login-link {
  color: #1b1b1b;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.dtb-opc-login-link:hover {
  opacity: .7;
}

/* Make login-link button look like plain text — override all theme/WC button styles */
button.dtb-opc-login-link {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  display: inline !important;
  cursor: pointer;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #1b1b1b !important;
  text-decoration: underline !important;
  white-space: nowrap;
}

/* ---- Login modal — dark style matching My Account login ---- */
.dtb-opc-login-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtb-opc-login-modal[hidden] {
  display: none;
}
.dtb-opc-login-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  cursor: pointer;
}
.dtb-opc-login-modal__box {
  position: relative;
  z-index: 1;
  background: #1c1c26;
  border-radius: 18px;
  padding: 36px 30px 28px;
  width: 100%;
  max-width: 400px;
  margin: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
/* subtle inner glow to give depth */
.dtb-opc-login-modal__box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.04) 0%, transparent 60%);
  pointer-events: none;
}
.dtb-opc-login-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  padding: 4px 8px;
  transition: color .15s;
}
.dtb-opc-login-modal__close:hover {
  color: #fff;
}
.dtb-opc-login-modal__title {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .01em;
}
#dtb-opc-login-notice:empty {
  display: none;
}
#dtb-opc-login-notice .woocommerce-error {
  margin: 0;
  font-size: 13px;
  background: rgba(180, 30, 30, .25);
  border-color: rgba(255, 80, 80, .35);
  color: #ffaaaa;
}
.dtb-opc-login-modal__form {
  display: contents; /* doesn't add layout box — gap comes from parent flex */
}
.dtb-opc-login-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dtb-opc-login-modal__field label {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, .7);
}
.dtb-opc-login-modal__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  font-size: 15px;
  color: #fff;
  outline: none;
  transition: border-color .15s;
}
.dtb-opc-login-modal__field input::placeholder {
  color: rgba(255, 255, 255, .35);
}
.dtb-opc-login-modal__field input:focus {
  border-color: rgba(255, 255, 255, .40);
}
/* Remember me row */
.dtb-opc-login-modal__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  cursor: pointer;
}
.dtb-opc-login-modal__remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: rgba(255,255,255,.6);
  cursor: pointer;
}
/* Submit button */
#dtb-opc-login-submit {
  width: 100%;
  padding: 13px;
  font-size: 15px;
  font-weight: 400;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: none !important;
  transition: background .15s;
  letter-spacing: .02em;
}
#dtb-opc-login-submit:hover {
  background: rgba(255, 255, 255, .26) !important;
}
#dtb-opc-login-submit.dtb-loading {
  opacity: .5;
  cursor: wait;
}
.dtb-opc-login-modal__forgot {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  /* !important: the frontend theme's generic `a` colour was overriding this and
     rendering the link near-invisible (dark on dark) inside the modal. */
  color: rgba(255, 255, 255, .85) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dtb-opc-login-modal__forgot:hover {
  color: #ffffff !important;
}
body.dtb-opc-login-modal-open {
  overflow: hidden;
}

/* ── Bank transfer details (thank-you page, unpaid BACS orders) ───────────── */
.dtb-opc-bank {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
  background: #fafafa;
}
.dtb-opc-bank__heading {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 12px;
}
.dtb-opc-bank__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}
.dtb-opc-bank__row:last-child {
  border-bottom: 0;
}
.dtb-opc-bank__label {
  color: #6b7280;
  font-size: 13px;
  flex: 0 0 auto;
}
.dtb-opc-bank__valwrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.dtb-opc-bank__value {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.dtb-opc-bank .dtb-opc-bank__copy {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid #d1d5db !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #6b7280 !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
  line-height: 1;
  text-transform: none;
  transition: background .15s, border-color .15s, color .15s;
}
.dtb-opc-bank .dtb-opc-bank__copy svg {
  width: 15px;
  height: 15px;
  display: block;
}
.dtb-opc-bank .dtb-opc-bank__copy:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}
.dtb-opc-bank .dtb-opc-bank__copy.is-copied {
  border-color: #16a34a !important;
  color: #16a34a !important;
  background: #f0fdf4 !important;
}
.dtb-opc-bank .dtb-opc-bank__copy[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  background: #16a34a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
}
.dtb-opc-bank__intl {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 4px;
}