/* =========================================================
   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"
   plus an explicit grid-template-rows of 70px 68px (58px and
   54px at the mobile breakpoints).
   That button no longer renders, so the row stayed behind as
   an empty band between Add to cart and Buy Now. Dropping the
   area alone was not enough: the sized track kept the band.
   grid-template-rows: auto collapses it to the one row the
   remaining children need, and because the children carry
   their own heights it stays correct at every breakpoint.
   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;
  grid-template-rows: auto !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; }


/* =========================================================
   REFINEMENTS

   Appended last on purpose, so these win at equal specificity.
   !important appears only on the controls the theme paints
   globally: without it a theme button rule repaints the submit
   button and the quantity steppers pink on hover.
   ========================================================= */

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

.rvt-cod-submit{
  background: var(--rvt-accent, #2FA9A0) !important;
  color: var(--rvt-ink, #1A1A1A) !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(47, 169, 160, .26) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}

/* black with white text on every active state, as asked */
.rvt-cod-submit:hover:not(:disabled),
.rvt-cod-submit:focus:not(:disabled),
.rvt-cod-submit:focus-visible:not(:disabled),
.rvt-cod-submit:active:not(:disabled){
  background: #101010 !important;
  color: #FFFFFF !important;
  transform: none !important;
  box-shadow: 0 10px 26px rgba(16, 16, 16, .28) !important;
}

.rvt-cod-submit:focus-visible{
  outline: 3px solid var(--rvt-accent, #2FA9A0) !important;
  outline-offset: 3px !important;
}

.rvt-cod-submit:disabled{
  box-shadow: none !important;
  opacity: .5 !important;
}

/* the spinner has to read on whichever colour the button is wearing */
.rvt-cod-submit__spin{
  border: 2px solid currentColor !important;
  border-top-color: transparent !important;
  opacity: .75;
}

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

.rvt-cod-qty{
  overflow: hidden;
  border-radius: 10px;
}

.rvt-cod-qty__btn{
  background: var(--rvt-surface, #FFFFFF) !important;
  color: var(--rvt-ink, #1A1A1A) !important;
  transition: background-color .16s ease, color .16s ease !important;
}

.rvt-cod-qty__btn:hover:not(:disabled){
  background: #101010 !important;
  color: #FFFFFF !important;
}

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

.rvt-cod-input,
.rvt-cod-select,
.rvt-cod-textarea{
  border-radius: 10px;
  border-color: #E6DCD1;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.rvt-cod-input:hover:not(:focus),
.rvt-cod-select:hover:not(:focus),
.rvt-cod-textarea:hover:not(:focus){
  border-color: #CDBFB0;
}

/* a neutral focus ring sits better beside a black primary button
   than the teal one, and reads just as clearly */
.rvt-cod-input:focus,
.rvt-cod-select:focus,
.rvt-cod-textarea:focus{
  border-color: var(--rvt-ink, #1A1A1A);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, .10);
}

.rvt-cod-label{
  margin-bottom: 7px;
  color: #33312F;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.rvt-cod-help{ font-size: 11.5px; }

/* ---------- panels and summary ---------- */

.rvt-cod__panel{
  border-color: #EFE6DC;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(26, 26, 26, .04), 0 12px 30px rgba(26, 26, 26, .05);
}

.rvt-cod__legend{
  margin-bottom: 18px;
  font-size: 16px;
  letter-spacing: -.015em;
}

.rvt-cod-item__name{ letter-spacing: -.01em; }

.rvt-cod-totals{ margin-top: 20px; padding-top: 18px; }

.rvt-cod-totals__row{ font-size: 13.5px; }

.rvt-cod-totals__grand{
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rvt-border, #EADFD5);
  font-size: 19px;
  letter-spacing: -.02em;
}

/* the payment line is a reassurance, so it reads as one */
.rvt-cod-pay{
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--rvt-bg, #FBF3EC);
  font-size: 13px;
  font-weight: 600;
}

.rvt-cod-secure{ font-size: 12px; }