/*
 * VH Audio — Cart Button Replacements
 * Replaces: add.gif (75x20), add_button.gif (75x20), view.gif (100x20)
 *
 * INTEGRATION NOTE FOR DEVELOPER:
 * These styles can be added to main.css or loaded as a separate stylesheet.
 * Replace the <img> tags in your product/cart templates as shown below.
 *
 * ── Usage ──────────────────────────────────────────────────────────────────
 *
 * Replace <img src="images/add.gif"> or <img src="images/add_button.gif">:
 *   <a href="[add-to-cart-url]" class="vha-add-btn" title="Add to cart">Add to Cart</a>
 *
 * Replace <img src="images/view.gif">:
 *   <a href="/cart/" class="vha-view-btn" title="View cart">View Cart</a>
 *
 * If the add button is inside a <form>, use a <button> instead of <a>:
 *   <button type="submit" class="vha-add-btn">Add to Cart</button>
 *
 * ── Animation note ─────────────────────────────────────────────────────────
 * Hover color matches the site's existing green (#33FF33).
 * Transition is kept short (0.12s) to feel snappy, not slow.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Shared base ──────────────────────────────────────────────── */
.vha-add-btn,
.vha-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
  background: #000000;
  color: #FFFFFF;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
  vertical-align: middle;
  height: 22px;
  box-sizing: border-box;
  padding: 0 8px;
}

/* Add to Cart — green border / green fill on hover */
.vha-add-btn {
  min-width: 75px;
  border: 2px solid #33FF33;
}
.vha-add-btn:hover,
.vha-add-btn:focus {
  background: #33FF33;
  color: #000000;
  text-decoration: none;
  outline: none;
}

/* View Cart — vivid orange-red border / fill on hover */
.vha-view-btn {
  min-width: 100px;
  border: 2px solid #FF5500;
}
.vha-view-btn:hover,
.vha-view-btn:focus {
  background: #FF5500;
  color: #FFFFFF;
  text-decoration: none;
  outline: none;
}

/* Keep visited state from turning link-purple */
.vha-add-btn:link, .vha-add-btn:visited { color: #FFFFFF; text-decoration: none; }
.vha-view-btn:link, .vha-view-btn:visited { color: #FFFFFF; text-decoration: none; }

/* <button> reset */
button.vha-add-btn, button.vha-view-btn {
  -webkit-appearance: none;
  appearance: none;
  border-style: solid;
}

/* ── Product page: cartscript1.js targets button.addtocartbutton ── */
button.addtocartbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 2px solid #33FF33;
  border-radius: 3px;
  background: #000000;
  color: #FFFFFF;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
  height: 22px;
  min-width: 75px;
  box-sizing: border-box;
  vertical-align: middle;
  transition: background 0.12s ease, border-color 0.12s ease;
  -webkit-appearance: none;
  appearance: none;
}

button.addtocartbutton:hover,
button.addtocartbutton:focus {
  background: #33FF33;
  color: #000000;
  outline: none;
}

/* Loading / disabled state */
button.addtocartbutton:disabled,
button.addtocartbutton[disabled] {
  border-color: #1a4a1a;
  color: #666;
  background: #001100;
  cursor: wait;
}

/* ── CSS-only fallbacks (no-JS / before-JS-paint safety) ──────────
   Hide the GIFs immediately so they never flash inside the styled button.
   ::after provides the button label as a pure-CSS fallback.
   Once JS runs it adds class "vha-js" which suppresses ::after so text
   doesn't double up with the JS-injected content. */

button.addtocartbutton img { display: none; }

/* CSS text fallback for Add to Cart */
button.addtocartbutton::after {
  content: 'Add to Cart';
}
/* Suppress fallback once JS has initialised the button */
button.addtocartbutton.vha-js::after {
  content: none;
}

/* View-cart <a> wrapper — styled before JS adds .vha-view-btn class.
   IMPORTANT: scoped with :has(img[src="view.gif"]) so that we only style
   the *original* View Cart link on product pages, NOT the "Calculate in
   Cart" links inside the cart popup overlay (which share the same URL
   pattern but contain no view.gif image). */
a[href*="view.x=1"]:has(img[src="view.gif"]) img { display: none; }

a[href*="view.x=1"]:has(img[src="view.gif"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 22px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 2px solid #FF5500;
  border-radius: 3px;
  background: #000000;
  color: #FFFFFF;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  vertical-align: middle;
}
/* CSS text fallback for View Cart */
a[href*="view.x=1"]:has(img[src="view.gif"])::after {
  content: 'View Cart';
}
/* Once JS has run it adds .vha-view-btn — suppress the ::after fallback */
a.vha-view-btn::after {
  content: none;
}