/* =========================================================
   ROYAL VISION TRADERS - CASH ON DELIVERY ORDER FLOW
   Loaded only on the order page. Tokens come from
   mu-plugins/rvt-design.css; nothing here invents a colour.
   ========================================================= */

.rvt-cod{
  --cod-gap: clamp(18px, 2.4vw, 28px);
  padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 80px);
  background: var(--rvt-bg, #FBF3EC);
  font-family: var(--rvt-b, 'General Sans', ui-sans-serif, system-ui, sans-serif);
  color: var(--rvt-ink, #1A1A1A);
}

.rvt-cod *{ box-sizing: border-box; }

.rvt-cod__inner{ width: min(100% - 32px, 1240px); margin: 0 auto; }

.rvt-cod__head{ margin: 0 0 clamp(20px, 3vw, 32px); }

.rvt-cod__eyebrow{
  display: inline-block; margin-bottom: 8px;
  color: var(--rvt-muted, #6E6A66);
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
}

.rvt-cod__title{
  margin: 0 0 6px;
  font-family: var(--rvt-h, 'Satoshi', ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.15;
}

.rvt-cod__sub{ margin: 0; max-width: 60ch; color: var(--rvt-muted, #6E6A66); font-size: 15px; line-height: 1.6; }

/* ---------- layout ---------- */

.rvt-cod__grid{ display: grid; grid-template-columns: 1fr; gap: var(--cod-gap); }

@media (min-width: 981px){
  .rvt-cod__grid{ grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: start; }
  .rvt-cod__aside{ position: sticky; top: calc(var(--rvt-header-h, 88px) + 20px); }
}

/* on phones the summary is what reassures first, so it leads */
.rvt-cod__aside{ order: -1; }
@media (min-width: 981px){ .rvt-cod__aside{ order: 0; } }

.rvt-cod__panel{
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid var(--rvt-border, #EADFD5);
  border-radius: var(--rvt-rl, 24px);
  background: var(--rvt-surface, #FFFFFF);
  box-shadow: var(--rvt-sh, 0 8px 24px rgba(26, 26, 26, .06));
}

.rvt-cod__panel + .rvt-cod__panel{ margin-top: 16px; }

.rvt-cod__legend{
  display: block; width: 100%; margin: 0 0 16px; padding: 0;
  font-family: var(--rvt-h, 'Satoshi', ui-sans-serif, system-ui, sans-serif);
  font-size: 18px; font-weight: 700; line-height: 1.25;
}

/* ---------- product summary ---------- */

.rvt-cod-item{ display: flex; gap: 14px; align-items: flex-start; }

.rvt-cod-item__media{
  overflow: hidden; flex: 0 0 88px; width: 88px; height: 88px;
  border: 1px solid var(--rvt-border, #EADFD5);
  border-radius: var(--rvt-rm, 16px);
  background: var(--rvt-bg, #FBF3EC);
}

.rvt-cod-item__media img{ display: block; width: 100%; height: 100%; object-fit: contain; }

.rvt-cod-item__name{
  margin: 0 0 4px;
  font-family: var(--rvt-h, 'Satoshi', ui-sans-serif, system-ui, sans-serif);
  font-size: 16px; font-weight: 700; line-height: 1.3;
}

.rvt-cod-item__meta{ margin: 0 0 6px; color: var(--rvt-muted, #6E6A66); font-size: 13px; line-height: 1.5; }

.rvt-cod-item__price{
  font-family: var(--rvt-h, 'Satoshi', ui-sans-serif, system-ui, sans-serif);
  font-size: 17px; font-weight: 700;
}

.rvt-cod-item__price del{ margin-left: 6px; color: var(--rvt-muted, #6E6A66); font-size: .85em; font-weight: 400; }

.rvt-cod-stock{
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px; font-size: 13px; font-weight: 600;
}

.rvt-cod-stock::before{ width: 8px; height: 8px; border-radius: 50%; content: ""; }
.rvt-cod-stock.is-in{ color: var(--rvt-ink, #1A1A1A); }
.rvt-cod-stock.is-in::before{ background: var(--rvt-mint, #6FCFA8); }
.rvt-cod-stock.is-out{ color: var(--rvt-ink, #1A1A1A); }
.rvt-cod-stock.is-out::before{ background: var(--rvt-coral, #F0806F); }

/* ---------- totals ---------- */

.rvt-cod-totals{ margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rvt-border, #EADFD5); }

.rvt-cod-totals__row{
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: 14px; color: var(--rvt-muted, #6E6A66);
}

.rvt-cod-totals__row span:last-child{ color: var(--rvt-ink, #1A1A1A); font-weight: 600; }

.rvt-cod-totals__row.is-free span:last-child{ color: var(--rvt-ink, #1A1A1A); }

.rvt-cod-totals__grand{
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  margin-top: 10px; padding-top: 14px;
  border-top: 1px solid var(--rvt-border, #EADFD5);
  font-family: var(--rvt-h, 'Satoshi', ui-sans-serif, system-ui, sans-serif);
  font-size: 20px; font-weight: 700;
}

.rvt-cod-freenote{
  margin: 12px 0 0; padding: 10px 12px;
  border-radius: var(--rvt-rs, 8px);
  background: var(--rvt-bg, #FBF3EC);
  color: var(--rvt-ink, #1A1A1A);
  font-size: 13px; line-height: 1.5;
}

.rvt-cod-pay{
  display: flex; gap: 10px; align-items: center;
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--rvt-border, #EADFD5);
  border-radius: var(--rvt-rm, 16px);
  font-size: 14px; font-weight: 600;
}

.rvt-cod-pay__dot{
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rvt-accent, #2FA9A0);
}

/* ---------- quantity ---------- */

.rvt-cod-qty{ display: flex; gap: 0; align-items: stretch; width: max-content; }

.rvt-cod-qty__btn{
  display: flex; align-items: center; justify-content: center;
  width: 46px; min-height: 48px; padding: 0;
  border: 1px solid var(--rvt-border, #EADFD5);
  background: var(--rvt-surface, #FFFFFF);
  color: var(--rvt-ink, #1A1A1A);
  font-size: 20px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}

.rvt-cod-qty__btn:first-child{ border-radius: var(--rvt-rs, 8px) 0 0 var(--rvt-rs, 8px); }
.rvt-cod-qty__btn:last-child{ border-radius: 0 var(--rvt-rs, 8px) var(--rvt-rs, 8px) 0; }
.rvt-cod-qty__btn:hover:not(:disabled){ background: var(--rvt-bg, #FBF3EC); }
.rvt-cod-qty__btn:disabled{ opacity: .45; cursor: not-allowed; }

.rvt-cod-qty__input{
  width: 64px; min-height: 48px; padding: 0;
  border: 1px solid var(--rvt-border, #EADFD5);
  border-right: 0; border-left: 0;
  border-radius: 0;
  background: var(--rvt-surface, #FFFFFF);
  color: var(--rvt-ink, #1A1A1A);
  font-family: inherit; font-size: 16px; font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.rvt-cod-qty__input::-webkit-outer-spin-button,
.rvt-cod-qty__input::-webkit-inner-spin-button{ margin: 0; -webkit-appearance: none; }

/* ---------- form fields ---------- */

.rvt-cod-field{ margin: 0 0 16px; }
.rvt-cod-row{ display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 620px){ .rvt-cod-row{ grid-template-columns: 1fr 1fr; } }

.rvt-cod-label{
  display: block; margin: 0 0 6px;
  font-size: 13px; font-weight: 600; color: var(--rvt-ink, #1A1A1A);
}

.rvt-cod-label .req{ color: var(--rvt-coral, #F0806F); }

.rvt-cod-input,
.rvt-cod-select,
.rvt-cod-textarea{
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--rvt-border, #EADFD5);
  border-radius: var(--rvt-rs, 8px);
  background: var(--rvt-surface, #FFFFFF);
  color: var(--rvt-ink, #1A1A1A);
  font-family: inherit;
  /* 16px stops iOS zooming the page on focus */
  font-size: 16px; line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.rvt-cod-textarea{ min-height: 96px; resize: vertical; }

.rvt-cod-input:focus,
.rvt-cod-select:focus,
.rvt-cod-textarea:focus{
  outline: 0;
  border-color: var(--rvt-accent, #2FA9A0);
  box-shadow: 0 0 0 3px rgba(47, 169, 160, .18);
}

.rvt-cod-input[aria-invalid="true"],
.rvt-cod-select[aria-invalid="true"],
.rvt-cod-textarea[aria-invalid="true"]{ border-color: var(--rvt-coral, #F0806F); }

.rvt-cod-help{ margin: 6px 0 0; color: var(--rvt-muted, #6E6A66); font-size: 12px; line-height: 1.5; }

.rvt-cod-error{ margin: 6px 0 0; color: var(--rvt-ink, #1A1A1A); font-size: 13px; font-weight: 600; }
.rvt-cod-error::before{ margin-right: 5px; content: "\\26A0"; color: var(--rvt-coral, #F0806F); }

/* honeypot - present for bots, gone for people and screen readers */
.rvt-cod-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- notices ---------- */

.rvt-cod-notice{
  margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--rvt-border, #EADFD5);
  border-left: 4px solid var(--rvt-coral, #F0806F);
  border-radius: var(--rvt-rs, 8px);
  background: var(--rvt-surface, #FFFFFF);
  font-size: 14px; line-height: 1.6;
}

.rvt-cod-notice ul{ margin: 8px 0 0; padding-left: 20px; }
.rvt-cod-notice li{ margin: 3px 0; }

/* ---------- submit ---------- */

.rvt-cod-submit{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; margin-top: 6px; padding: 14px 28px;
  border: 0; border-radius: var(--rvt-rp, 999px);
  /* ink on teal reads at 6.05:1; white on this teal is only 2.88:1 */
  background: var(--rvt-accent, #2FA9A0);
  color: var(--rvt-ink, #1A1A1A);
  font-family: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.rvt-cod-submit:hover:not(:disabled){ transform: translateY(-2px); box-shadow: var(--rvt-sh-lg, 0 24px 60px rgba(26, 26, 26, .08)); }
.rvt-cod-submit:disabled{ opacity: .6; cursor: progress; transform: none; }

.rvt-cod-submit__spin{
  display: none; width: 16px; height: 16px;
  border: 2px solid rgba(26, 26, 26, .25);
  border-top-color: var(--rvt-ink, #1A1A1A);
  border-radius: 50%;
  animation: rvt-cod-spin .7s linear infinite;
}

.rvt-cod-submit.is-busy .rvt-cod-submit__spin{ display: block; }

@keyframes rvt-cod-spin{ to{ transform: rotate(360deg); } }

.rvt-cod-secure{ margin: 12px 0 0; color: var(--rvt-muted, #6E6A66); font-size: 12px; line-height: 1.5; text-align: center; }

/* ---------- confirmation ---------- */

.rvt-cod-done{ max-width: 720px; margin: 0 auto; text-align: center; }

.rvt-cod-done__tick{
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--rvt-mint, #6FCFA8);
  color: var(--rvt-ink, #1A1A1A);
  font-size: 32px; line-height: 1;
}

.rvt-cod-done__title{
  margin: 0 0 8px;
  font-family: var(--rvt-h, 'Satoshi', ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(24px, 3.6vw, 34px); font-weight: 700; line-height: 1.2;
}

.rvt-cod-done__lead{ margin: 0 0 26px; color: var(--rvt-muted, #6E6A66); font-size: 15px; line-height: 1.6; }

.rvt-cod-done__panel{ text-align: left; }

.rvt-cod-done__no{
  display: inline-block; margin: 0 0 16px; padding: 8px 16px;
  border-radius: var(--rvt-rp, 999px);
  background: var(--rvt-bg, #FBF3EC);
  font-family: var(--rvt-h, 'Satoshi', ui-sans-serif, system-ui, sans-serif);
  font-size: 15px; font-weight: 700;
}

.rvt-cod-next{ margin: 16px 0 0; }
.rvt-cod-next h3{
  margin: 0 0 8px;
  font-family: var(--rvt-h, 'Satoshi', ui-sans-serif, system-ui, sans-serif);
  font-size: 16px; font-weight: 700;
}
.rvt-cod-next p{ margin: 0; color: var(--rvt-muted, #6E6A66); font-size: 14px; line-height: 1.6; }

.rvt-cod-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.rvt-cod-wa,
.rvt-cod-more{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 24px;
  border-radius: var(--rvt-rp, 999px);
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.rvt-cod-wa{ border: 0; background: var(--rvt-accent, #2FA9A0); color: var(--rvt-ink, #1A1A1A); }
.rvt-cod-more{ border: 1.5px solid var(--rvt-ink, #1A1A1A); background: transparent; color: var(--rvt-ink, #1A1A1A); }
.rvt-cod-more:hover{ background: var(--rvt-ink, #1A1A1A); color: var(--rvt-surface, #FFFFFF); }
.rvt-cod-wa:hover{ transform: translateY(-2px); box-shadow: var(--rvt-sh-lg, 0 24px 60px rgba(26, 26, 26, .08)); }

/* ---------- buy now button on the product page ---------- */

.rvt-buynow{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; padding: 13px 26px;
  border: 0; border-radius: var(--rvt-rp, 999px);
  background: var(--rvt-accent, #2FA9A0);
  color: var(--rvt-ink, #1A1A1A);
  font-family: var(--rvt-b, 'General Sans', ui-sans-serif, system-ui, sans-serif);
  font-size: 15px; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.rvt-buynow:hover{ transform: translateY(-2px); box-shadow: var(--rvt-sh-lg, 0 24px 60px rgba(26, 26, 26, .08)); color: var(--rvt-ink, #1A1A1A); }
.rvt-buynow:focus-visible{ outline: 2px solid var(--rvt-accent-h, #238C85); outline-offset: 3px; }
.rvt-buynow.is-disabled{ opacity: .5; pointer-events: none; }

.rvt-buynow__note{ margin: 8px 0 0; color: var(--rvt-muted, #6E6A66); font-size: 12px; line-height: 1.5; text-align: center; }

@media (prefers-reduced-motion: reduce){
  .rvt-cod-submit, .rvt-cod-wa, .rvt-buynow, .rvt-cod-qty__btn{ transition: none; }
  .rvt-cod-submit:hover:not(:disabled), .rvt-cod-wa:hover, .rvt-buynow:hover{ transform: none; }
  .rvt-cod-submit__spin{ animation-duration: 2s; }
}


/* =========================================================
   VARIABLE PRODUCT PURCHASE AREA

   The Customizer CSS lays the variation buttons out as a grid
   with a second row reserved for the old variable Buy Now
   button:  grid-template-areas: "quantity cart" "buy buy".
   That button no longer renders, so the row stayed behind as
   an empty band between Add to cart and Buy Now. The row is
   removed here. The selector repeats two classes so it wins
   against the Customizer block, which prints later in <head>.
   ========================================================= */

html body.single-product div.product form.variations_form.cart.cart .woocommerce-variation-add-to-cart.variations_button.variations_button{
  grid-template-areas: "quantity cart" !important;
  row-gap: 0 !important;
}

html body.single-product div.product .rvt-purchase form.cart.cart{
  margin-bottom: 14px !important;
}

.rvt-purchase .rvt-buynow{ margin-top: 0; }

/* before an option is chosen the link still works, it just reads as
   secondary, so a JavaScript failure can never block the sale */
.rvt-buynow.is-pending{ opacity: .62; }