/* SVG geometry is sized to the button's border box by buttons.js. */
html body .epm-pill.epm-pill {
  background-color:transparent!important;
  background-image:var(--epm-pill-image)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  background-origin:border-box!important;
  background-clip:border-box!important;
  border-color:transparent!important;
  border-radius:0!important;
}

/* Shared public-site button palette, consumed by the SVG renderer. */
:root {
  /* Shared geometry: applies to buttons AND fields. Ratios scale with height. */
  --epm-shape-smoothing:1.23076923076923; /* 64 / 52 */
  --epm-shape-vertical-handle:1.15;
  /* Shared checkout field settings. */
  --epm-field-height:48px;
  --epm-field-padding-x:20px;
  --epm-field-border-width:1px;
  --epm-field-fill:#fff;
  --epm-field-border:#dcd4e5;
  --epm-field-focus:#8a6baa;
  --epm-field-error:#ff0000;
  --epm-button-green:hsl(84,59%,46%);
  --epm-button-green-hover:hsl(84,59%,35%);
  --epm-button-blue:hsl(205,76%,48%);
  --epm-button-blue-hover:hsl(205,76%,36%);
}
:is(#cartbutton,#epm-checkout-next,#epm-pay) {
  --epm-button-default-fill:var(--epm-button-green);
  --epm-button-hover-fill:var(--epm-button-green-hover);
  --epm-button-fill:var(--epm-button-green);
  --epm-button-default-stroke:var(--epm-button-green);
  --epm-button-stroke:var(--epm-button-green);
  color:white!important;
}
.dcart {
  --epm-button-default-fill:transparent;
  --epm-button-hover-fill:var(--epm-button-green-hover);
  --epm-button-fill:transparent;
  --epm-button-default-stroke:var(--epm-button-green);
  --epm-button-stroke:var(--epm-button-green);
  color:var(--epm-button-green)!important;
}
:is(#cartbutton,#epm-checkout-next,#epm-pay,.dcart):hover:not(:disabled) {
  --epm-button-fill:var(--epm-button-green-hover);
  --epm-button-stroke:var(--epm-button-green-hover);
  color:white!important;
}
:is(#readmore_button,.dmore,#epm-cart .epm-continue) {
  --epm-button-default-fill:transparent;
  --epm-button-hover-fill:var(--epm-button-blue-hover);
  --epm-button-fill:transparent;
  --epm-button-default-stroke:var(--epm-button-blue);
  --epm-button-stroke:var(--epm-button-blue);
  color:var(--epm-button-blue)!important;
  border-width:2px;
  border-style:solid;
}
:is(#readmore_button,.dmore,#epm-cart .epm-continue):hover:not(:disabled) {
  --epm-button-fill:var(--epm-button-blue-hover);
  --epm-button-stroke:var(--epm-button-blue-hover);
  color:white!important;
}

/* Both SVG states are decoded before activation; hover only switches images. */
html body .epm-pill.epm-pill:hover:not(:disabled){background-image:var(--epm-pill-hover-image,var(--epm-pill-image))!important}

/* Add epm-shaped-field to opt a field or secure-input wrapper into this shape. */
#epm-cart :is(#epm-name,#epm-email,#epm-card-element).epm-shaped-field {
  height:var(--epm-field-height);
  min-height:var(--epm-field-height);
  padding:0 var(--epm-field-padding-x);
  border:var(--epm-field-border-width) solid var(--epm-field-border);
  background:var(--epm-field-fill);
  --epm-button-default-fill:var(--epm-field-fill);
  --epm-button-default-stroke:var(--epm-field-border);
}
#epm-cart :is(#epm-name,#epm-email,#epm-card-element).epm-shaped-field:is(:focus-within,.StripeElement--focus) {
  --epm-button-default-stroke:var(--epm-field-focus);
}
#epm-cart :is(#epm-name,#epm-email,#epm-card-element).epm-shaped-field:is(.epm-invalid,[aria-invalid="true"]) {
  --epm-button-default-stroke:var(--epm-field-error);
}
#epm-cart .epm-shaped-field:focus-visible {outline:none!important}

#epm-cart #epm-card-element.epm-shaped-field{display:flex;align-items:center}
#epm-cart #epm-card-element.epm-shaped-field>div{width:100%;min-width:0}

/* Form submission buttons use the shared solid blue palette. */
#subscribesubmit,
form[action="videoentries.php"] .contactsubmit {
  --epm-button-default-fill:var(--epm-button-blue);
  --epm-button-default-stroke:var(--epm-button-blue);
  --epm-button-hover-fill:var(--epm-button-blue-hover);
}
/* The label text sits over this input, so hovering either activates the state. */
html body .subscribe-button:hover #subscribesubmit.epm-pill:not(:disabled),
html body form[action="videoentries.php"] .form-button:hover .contactsubmit.epm-pill:not(:disabled) {
  background-image:var(--epm-pill-hover-image,var(--epm-pill-image))!important;
}
