/* =========================================================
   JITS BUTTON SYSTEM
   Stable – Divi + Theme Builder – Divi + WooCommerce
   ========================================================= */

/* =========================================================
   0) BUTTON TARGETS (who gets the JITS button look)
   - Divi custom: .jits-c-btn
   - Divi Read More: .et_pb_more_button
   - Divi Contact submit: .et_pb_contact_submit / name="et_builder_submit_button"
   - Woo Add to cart: .single_add_to_cart_button
   - Woo Update cart: button[name="update_cart"]
   (Add more selectors here, NOT more code)
   ========================================================= */

body #page-container :is(
  a.jits-c-btn,
  a.et_pb_button.jits-c-btn,
  button.jits-c-btn,

  a.et_pb_button.et_pb_more_button,

  .single_add_to_cart_button.button,
  button.single_add_to_cart_button,

  button[name="update_cart"].button,
  a.button.wc-forward,
  #place_order,

  /* Divi Contact Form submit */
  button.et_pb_contact_submit,
  button[name="et_builder_submit_button"].et_pb_button
) {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  cursor: pointer;

  font-family: inherit;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;

  padding: 0.75em 1.2em !important;

  border: 1px solid #f2c300 !important;
  border-radius: 9999px !important;

  color: #f2c300 !important;
  background-color: transparent !important;

  background-image: linear-gradient(#f2c300, #f2c300) !important;
  background-repeat: no-repeat !important;
  background-position: left !important;
  background-size: 0% 100% !important;

  transition: background-size 220ms ease, color 150ms ease !important;

  font-weight: 600 !important;
  letter-spacing: 0 !important;

  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  vertical-align: middle !important;

  /* Sub-pixel gap fix */
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  box-shadow: inset 0 0 0 1px #f2c300 !important;
}

/* =========================================================
   HOVER (shared)
   ========================================================= */

body #page-container :is(
  a.jits-c-btn,
  a.et_pb_button.jits-c-btn,
  button.jits-c-btn,

  a.et_pb_button.et_pb_more_button,

  .single_add_to_cart_button.button,
  button.single_add_to_cart_button,

  button[name="update_cart"].button,
  a.button.wc-forward,
  #place_order,

  /* Divi Contact Form submit */
  button.et_pb_contact_submit,
  button[name="et_builder_submit_button"].et_pb_button
):hover {
  background-size: 100% 100% !important;
  color: #ffffff !important;
}

/* =========================================================
   ACTIVE (shared)
   ========================================================= */

body #page-container :is(
  a.jits-c-btn,
  button.jits-c-btn,

  .single_add_to_cart_button.button,
  button.single_add_to_cart_button,

  button[name="update_cart"].button,
  #place_order,

  /* Divi Contact Form submit */
  button.et_pb_contact_submit,
  button[name="et_builder_submit_button"].et_pb_button
):active {
  background-size: 100% 100% !important;
}

/* =========================================================
   FOCUS (shared)
   ========================================================= */

body #page-container :is(
  a.jits-c-btn,
  button.jits-c-btn,

  a.et_pb_button.et_pb_more_button,

  .single_add_to_cart_button.button,
  button.single_add_to_cart_button,

  button[name="update_cart"].button,
  #place_order,

  /* Divi Contact Form submit */
  button.et_pb_contact_submit,
  button[name="et_builder_submit_button"].et_pb_button
):focus-visible {
  outline: 2px solid #f2c300 !important;
  outline-offset: 3px;
}

/* =========================================================
   DISABLED (no “stuck after back”)
   ========================================================= */

/* True disabled buttons (HTML attribute) */
body #page-container :is(
  button.jits-c-btn:disabled,
  .single_add_to_cart_button.button:disabled,
  button.single_add_to_cart_button:disabled,
  button[name="update_cart"].button:disabled,
  #place_order:disabled,

  /* Divi Contact Form submit */
  button.et_pb_contact_submit:disabled,
  button[name="et_builder_submit_button"].et_pb_button:disabled
) {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  /* NOTE: no pointer-events blocking here; disabled already blocks clicks */
}

/* Class-based "disabled/loading" states that can persist after Back */
body #page-container :is(
  a.button.disabled,
  a.button.loading,

  .single_add_to_cart_button.disabled,
  .single_add_to_cart_button.loading,

  a.et_pb_button.disabled,
  a.et_pb_button.loading
) {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* =========================================================
   Firefox inner padding fix (buttons only)
   ========================================================= */

body #page-container button:is(
  .jits-c-btn,
  .single_add_to_cart_button,
  [name="update_cart"],
  #place_order,
  .et_pb_contact_submit,
  [name="et_builder_submit_button"]
)::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* =========================================================
   Kill Divi icons / arrows / plus
   ========================================================= */

body #page-container a.et_pb_button:is(.jits-c-btn, .et_pb_more_button)::before,
body #page-container a.et_pb_button:is(.jits-c-btn, .et_pb_more_button)::after,
body #page-container a.et_pb_button:is(.jits-c-btn, .et_pb_more_button)[data-icon]::before,
body #page-container a.et_pb_button:is(.jits-c-btn, .et_pb_more_button)[data-icon]::after,
body #page-container button.et_pb_contact_submit::before,
body #page-container button.et_pb_contact_submit::after,
body #page-container button[name="et_builder_submit_button"].et_pb_button::before,
body #page-container button[name="et_builder_submit_button"].et_pb_button::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   Alignment (Divi wrappers)
   ========================================================= */

.et_pb_button_module_wrapper,
.et_pb_button_wrapper {
  text-align: center;
}

/* =========================================================
   Clickable text (Divi text module)
   Underline = text width only
   ========================================================= */

.et_pb_text.et_clickable .et_pb_text_inner p {
  background: none !important;
  box-shadow: none !important;
  border: none !important;

  text-decoration: none !important;
  cursor: pointer;

  letter-spacing: 0 !important;
  transition: color 180ms ease, letter-spacing 180ms ease !important;
}

.et_pb_text.et_clickable:hover .et_pb_text_inner p {
  color: #f2c300 !important;
  letter-spacing: 0.02em !important;

  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.25em !important;
}

/* =========================================================
   WooCommerce category titles (same as clickable text)
   ========================================================= */

.woocommerce-loop-category__title {
  background: none !important;
  box-shadow: none !important;
  border: none !important;

  cursor: pointer;
  letter-spacing: 0 !important;
  text-decoration: none !important;

  transition: color 180ms ease, letter-spacing 180ms ease !important;
}

.woocommerce-loop-category__title:hover {
  color: #f2c300 !important;
  letter-spacing: 0.02em !important;

  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.25em !important;
}

.woocommerce-loop-category__title::before,
.woocommerce-loop-category__title::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   JITS UI LINK (reusable text link)
   ========================================================= */

.jits-ui-link {
  color: #f2c300 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;

  transition: color 180ms ease;
}

.jits-ui-link:hover {
  color: #f2c300 !important;

  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.25em !important;
  text-decoration-color: currentColor !important;
}

/* =========================================================
   Woo "wc-forward" – force sliding fill on hover
   ========================================================= */

body #page-container a.button.wc-forward {
  background-color: transparent !important;

  background-image: linear-gradient(#f2c300, #f2c300) !important;
  background-repeat: no-repeat !important;
  background-position: left !important;
  background-size: 0% 100% !important;

  border: 1px solid #f2c300 !important;
  color: #f2c300 !important;

  transition: background-size 220ms ease, color 150ms ease !important;
}

body #page-container a.button.wc-forward:hover {
  background-color: transparent !important;
  background-size: 100% 100% !important;
  color: #ffffff !important;
}

/* =========================================================
   Woo Checkout #place_order – force sliding fill on hover
   ========================================================= */

body #page-container #place_order.button,
body #page-container button#place_order {
  background: transparent !important;
  background-color: transparent !important;

  background-image: linear-gradient(#f2c300, #f2c300) !important;
  background-repeat: no-repeat !important;
  background-position: left !important;
  background-size: 0% 100% !important;

  border: 1px solid #f2c300 !important;
  color: #f2c300 !important;

  transition: background-size 220ms ease, color 150ms ease !important;
}

body #page-container #place_order.button:hover,
body #page-container button#place_order:hover {
  background: transparent !important;
  background-color: transparent !important;

  background-size: 100% 100% !important;
  color: #ffffff !important;
}

/* =========================================================
   Divi Contact Form submit – force sliding fill on hover
   (prevents Divi hover background shorthand from killing the gradient)
   ========================================================= */

body #page-container :is(
  button.et_pb_contact_submit,
  button[name="et_builder_submit_button"].et_pb_button
) {
  background: transparent !important;
  background-color: transparent !important;

  background-image: linear-gradient(#f2c300, #f2c300) !important;
  background-repeat: no-repeat !important;
  background-position: left !important;
  background-size: 0% 100% !important;

  transition: background-size 220ms ease, color 150ms ease !important;
}

body #page-container :is(
  button.et_pb_contact_submit,
  button[name="et_builder_submit_button"].et_pb_button
):hover {
  background: transparent !important;
  background-color: transparent !important;

  background-size: 100% 100% !important;
  color: #ffffff !important;
}

/* =========================================================
   WooCommerce success notice (Add to cart message)
   ========================================================= */

body #page-container .woocommerce-message {
  background-color: #000000 !important;
  border-left: 4px solid #f2c300 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body #page-container .woocommerce-message,
body #page-container .woocommerce-message * {
  color: #ffffff !important;
}

body #page-container .woocommerce-message a {
  color: #f2c300 !important;
  text-decoration: none !important;
}

body #page-container .woocommerce-message a:hover {
  text-decoration: underline !important;
}

body #page-container .woocommerce-message::before {
  color: #f2c300 !important;
}
/* =========================================================
   WooCommerce Breadcrumb – JITS underline behavior
   ========================================================= */

body #page-container .woocommerce-breadcrumb a {
  color: #f2c300 !important;
  text-decoration: none !important;
  cursor: pointer;

  transition: color 180ms ease;
}

body #page-container .woocommerce-breadcrumb a:hover {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.25em !important;
}
/* =========================================================
   Divi Icon (et_clickable) – JITS hover
   ========================================================= */

body #page-container .et_pb_icon.et_clickable a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform 180ms ease, color 180ms ease;
}

body #page-container .et_pb_icon.et_clickable .et-pb-icon {
  transition: transform 180ms ease, color 180ms ease, text-shadow 180ms ease;
}

body #page-container .et_pb_icon.et_clickable:hover .et-pb-icon {
  color: #f2c300 !important;
  transform: scale(1.12);
  text-shadow: 0 0 6px rgba(242,195,0,0.45);
}

/* =========================================================
   PERSISTENT FILL (after click)
   Add .is-filled via JS
   ========================================================= */

body #page-container :is(
  a.jits-c-btn.is-filled,
  a.et_pb_button.jits-c-btn.is-filled,
  button.jits-c-btn.is-filled,

  a.et_pb_button.et_pb_more_button.is-filled,

  .single_add_to_cart_button.button.is-filled,
  button.single_add_to_cart_button.is-filled,

  button[name="update_cart"].button.is-filled,
  a.button.wc-forward.is-filled,
  #place_order.is-filled,

  button.et_pb_contact_submit.is-filled,
  button[name="et_builder_submit_button"].et_pb_button.is-filled
) {
  background-size: 100% 100% !important;
  color: #ffffff !important;
}

/* =========================================================
   Woo Checkout #place_order – hard override (alt button)
   ========================================================= */

body #page-container button#place_order.button.alt {
  background: transparent !important;
  background-color: transparent !important;

  background-image: linear-gradient(#f2c300, #f2c300) !important;
  background-repeat: no-repeat !important;
  background-position: left !important;
  background-size: 0% 100% !important;

  border: 1px solid #f2c300 !important;
  color: #f2c300 !important;

  transition: background-size 220ms ease, color 150ms ease !important;
}

body #page-container button#place_order.button.alt:hover,
body #page-container button#place_order.button.alt:focus,
body #page-container button#place_order.button.alt:active {
  background: transparent !important;
  background-color: transparent !important;

  /* Re-assert the gradient on interaction to defeat theme shorthand backgrounds */
  background-image: linear-gradient(#f2c300, #f2c300) !important;
  background-repeat: no-repeat !important;
  background-position: left !important;

  background-size: 100% 100% !important;
  color: #ffffff !important;
}