/* assets/css/components/_tool-wc.css
 * Tool page (WooCommerce single product) — states the static Tool.html
 * didn't have: AJAX add-to-cart, favorites state, product image,
 * text-only info block, review cards/empty state, review form modal.
 * WooCommerce's own CSS is not loaded on this page (inc/hooks/woocommerce.php).
 */

/* Hero media: product image inside the dashed frame */
.tool-hero-media { overflow: hidden; }
.tool-hero-media-img {
  position: relative;
  z-index: 0;
  object-fit: contain;
  border-radius: 16px;
  width: 180px;
  height: auto;
}
.tool-hero-media-badge { z-index: 2; }

.tool-subtitle p { margin: 0; }
.tool-subtitle p + p { margin-top: 8px; }

.tool-rating-row .rating-summary-count { color: inherit; text-decoration: none; }
.tool-rating-row .rating-summary-count:hover { text-decoration: underline; }

/* Add to cart (<a> + Woo's AJAX classes) */
a.tool-add-to-cart-btn { text-decoration: none; }
.tool-add-to-cart-btn.loading,
.tool-add-to-cart-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.tool-add-to-cart-btn.added { background: #000080; }
.tool-add-to-cart-btn.is-disabled { background: #B9B9C8; cursor: not-allowed; }
.tool-actions-row a.added_to_cart { display: none; } /* Woo's "View cart" link — we show our own status */

.tool-cart-status {
  margin: -8px 0 0;
  font-size: 17px;
  color: #000080;
}
.tool-cart-status a { color: #C22DAF; font-weight: 600; }
.tool-cart-status[hidden] { display: none; }

/* Woo's own add-to-cart form (variable / grouped products) */
.tool-add-to-cart-form form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tool-add-to-cart-form .single_add_to_cart_button {
  height: 50px; padding: 10px 32px; border: 0; border-radius: 9999px;
  background: #CB6DA7; color: #FFFFFF; font: 600 20px/24px 'Fredoka', sans-serif; cursor: pointer;
}
.tool-add-to-cart-form .quantity input { width: 70px; height: 50px; border-radius: 12px; border: 1px solid rgba(24, 59, 81, 0.25); text-align: center; }

/* Info block: text only → full width */
.cat-value--text-only .cat-value__content-col { max-width: 100%; flex-basis: 100%; }
.cat-value__richtext { font: 400 21px/32px 'Fredoka', sans-serif; color: #183B51; text-align: right; }
.cat-value__richtext p { margin: 0; }
.cat-value__richtext p + p { margin-top: 16px; }
.cat-value__richtext ul { margin: 0; padding-inline-start: 1.3em; }
.cat-value__image-card img.cat-value__image { display: block; }

/* Reviews */
.tool-reviews-empty,
.tool-review-notice {
  margin: 0;
  padding: 18px 24px;
  border-radius: 16px;
  background: #FFFFFF;
  font-size: 18px;
  color: #183B51;
}
.tool-review-notice { margin-bottom: 20px; background: #E0EBE2; }

/* Review modal */
.modal--review .tool-review-panel {
  width: min(560px, calc(100vw - 32px));
  padding: 40px 36px 32px;
  border-radius: 24px;
  background: #FCF8F3;
  text-align: right;
  direction: rtl;
}
.tool-review-panel__title { margin: 0 0 16px; font: 500 28px/34px 'Fredoka', sans-serif; color: #000080; }
.tool-review-panel__text { margin: 0 0 20px; font-size: 18px; color: #183B51; }
.tool-review-form { display: flex; flex-direction: column; gap: 16px; }
.tool-review-form__field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tool-review-form__field label { font-size: 17px; color: #183B51; }
.tool-review-form textarea,
.tool-review-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid rgba(24, 59, 81, 0.25);
  border-radius: 14px;
  background: #FFFFFF;
  font: 400 17px/1.5 'Fredoka', sans-serif;
  color: #183B51;
}
.tool-review-form textarea:focus,
.tool-review-form input[type="text"]:focus { outline: 2px solid #A1CEE1; outline-offset: 1px; }
.tool-review-form .form-submit { margin: 4px 0 0; }

/* Star rating input: markup 5 → 1 + row-reverse, so star 1 is on the right (RTL) and
   hovering/checking a star fills it and every star to its right (~ siblings). */
.tool-review-form__rating { margin: 0; padding: 0; border: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 4px; }
.tool-review-form__rating legend { float: right; margin-inline-end: 12px; font-size: 17px; color: #183B51; }
.tool-review-star { cursor: pointer; font-size: 30px; line-height: 1; color: #D9D3E6; }
.tool-review-star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool-review-form__rating:not(:hover) .tool-review-star:has(input:checked),
.tool-review-form__rating:not(:hover) .tool-review-star:has(input:checked) ~ .tool-review-star,
.tool-review-star:hover,
.tool-review-star:hover ~ .tool-review-star { color: #F2B200; }
.tool-review-star:has(input:focus-visible) { outline: 2px solid #C22DAF; outline-offset: 2px; border-radius: 4px; }

/* Woo notices (no-JS add to cart etc.) */
.tool-notices { max-width: 1470px; margin: 20px auto 0; padding: 0 24px; }
.tool-notices .woocommerce-message,
.tool-notices .woocommerce-error,
.tool-notices .woocommerce-info { list-style: none; margin: 0; padding: 14px 20px; border-radius: 14px; background: #E0EBE2; color: #183B51; }
.tool-notices .woocommerce-error { background: #FBE3E6; }

/* Favorites button (inc/helpers/favorites.php): filled heart when saved */
.tool-favorite-link[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.tool-favorite-link.is-active svg path { fill: #C22DAF; }