/* wc-insurance-gateway — product-page-theme.css. Enqueued by
 * Frontend\ProductPageTheme, scoped to single product pages only
 * (body.single-product). Matches the STRUCTURAL layout pattern of a
 * reference product page the developer shared (badge, price block,
 * availability rows, big CTA, segmented "Recommended / Add protection"
 * pill, SKU/brand rows) using this store's own real data and generic
 * placeholder copy -- NOT their actual business content (mega-menu
 * catalog, real contact info, their specific bank financing offer are
 * deliberately not reproduced here; see ProductPageTheme.php for why).
 *
 * Moved in from a "LOCAL DEV ONLY" mu-plugin dev-stub kept outside this
 * plugin originally, for exactly the "not insurance logic" reason its own
 * docblock explains.
 */

body.single-product header.wp-block-template-part {
  display: none;
}

.wc-ig-pt-topbar {
  background: #171717;
  color: #ccc;
  font-size: 12px;
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 8px 24px;
  flex-wrap: wrap;
}
.wc-ig-pt-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.wc-ig-pt-topbar-icon {
  font-size: 13px;
}

.wc-ig-pt-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}
.wc-ig-pt-header .wc-ig-pt-logo {
  font-weight: 700;
  font-size: 20px;
  color: #171717;
  text-decoration: none;
  white-space: nowrap;
}
.wc-ig-pt-header .wc-ig-pt-search {
  flex: 1;
  display: flex;
  min-width: 160px;
}
.wc-ig-pt-header .wc-ig-pt-search input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-family: inherit;
}
.wc-ig-pt-header .wc-ig-pt-search button {
  border: 1px solid var(--wc-ig-brand, #e21382);
  background: var(--wc-ig-brand, #e21382);
  color: #fff;
  padding: 0 18px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.wc-ig-pt-header .wc-ig-pt-account,
.wc-ig-pt-header .wc-ig-pt-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: #171717;
  text-decoration: none;
  white-space: nowrap;
}
.wc-ig-pt-header .wc-ig-pt-cart {
  color: var(--wc-ig-brand, #e21382);
  font-weight: 700;
}
.wc-ig-pt-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--wc-ig-brand, #e21382);
  font-size: 15px;
  flex-shrink: 0;
}
.wc-ig-pt-account-text small,
.wc-ig-pt-cart-text small {
  font-weight: 400;
  color: #777;
}

.wc-ig-pt-nav {
  background: #f3f3f3;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  flex-wrap: wrap;
}
.wc-ig-pt-nav .wc-ig-pt-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #000;
  border: 1px solid #333;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 4px;
  white-space: nowrap;
}
.wc-ig-pt-all-icon {
  font-size: 13px;
}
.wc-ig-pt-nav a.wc-ig-pt-navlink {
  color: #333;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.wc-ig-pt-nav a.wc-ig-pt-navlink:hover {
  color: var(--wc-ig-brand, #e21382);
}
.wc-ig-pt-nav a.wc-ig-pt-navlink.is-active {
  color: var(--wc-ig-brand, #e21382);
  font-weight: 700;
  border-bottom-color: var(--wc-ig-brand, #e21382);
}
.wc-ig-pt-nav-spacer {
  flex: 1;
}
.wc-ig-pt-social {
  display: flex;
  gap: 14px;
}
.wc-ig-pt-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 13px;
  text-transform: uppercase;
}

/* WooCommerce's own default "Sale!" badge is replaced by our
   percentage-based one below -- hide the native one on product pages so
   they don't render stacked on top of each other. */
body.single-product .onsale {
  display: none;
}

/* Discount badge, only rendered when a real sale price exists */
.wc-ig-pt-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--wc-ig-brand, #e21382);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 2;
}

/* Price block restructure -- boxed panel, two columns (price | savings)
   when a real sale exists, matching the reference pattern's layout; a
   single-column panel when there's just one real price to show. */
.wc-ig-pt-price-block {
  display: flex;
  margin: 10px 0 16px;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
}
.wc-ig-pt-price-col {
  padding: 14px 20px;
  flex: 1;
}
.wc-ig-pt-price-col + .wc-ig-pt-price-col {
  border-left: 1px solid #e5e5e5;
}
.wc-ig-pt-price-row-label {
  font-size: 12px;
  color: #777;
  margin-bottom: 4px;
}
.wc-ig-pt-price-row-value {
  text-decoration: line-through;
  color: #999;
  font-size: 13px;
}
.wc-ig-pt-price-main {
  font-size: 28px;
  font-weight: 700;
  color: var(--wc-ig-brand, #e21382);
  line-height: 1.2;
}
.wc-ig-pt-savings-col {
  background: #fdeaf3;
}
.wc-ig-pt-savings-value {
  font-size: 20px;
  font-weight: 700;
  color: #171717;
  line-height: 1.2;
}

/* Availability rows -- generic descriptive labels, not operational
   promises. Positioned ABOVE the add-to-cart row (product-page-theme.js
   inserts it before form.cart, not after) to match the reference
   pattern's "availability info sits above the CTA" order. */
.wc-ig-pt-availability {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wc-ig-pt-availability-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #444;
}
.wc-ig-pt-availability-row svg {
  flex-shrink: 0;
  color: var(--wc-ig-brand, #e21382);
}

/* form.cart reorder: the insurance widget container renders where
   WooCommerce's own woocommerce_before_add_to_cart_button hook fires
   (before quantity + button in DOM order -- Frontend\ProductPage's own
   timing-safe hook, unchanged), but the reference pattern shows the big
   CTA first and the protection pill below it. Flex + explicit `order`
   reorders this visually without touching that hook or its markup
   position. flex-basis:100% on the widget container is what forces it
   onto its own line below the qty+button row rather than wrapping
   alongside them. */
body.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
body.single-product form.cart .quantity {
  order: 1;
}
body.single-product form.cart .single_add_to_cart_button,
body.single-product form.cart button[name="add-to-cart"] {
  order: 2;
}
body.single-product form.cart #insurance-widget-container {
  order: 3;
  flex: 1 0 100%;
  margin-top: 8px;
}

/* Big CTA */
body.single-product .wp-block-woocommerce-add-to-cart-form .add_to_cart_button,
body.single-product .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button,
body.single-product .wp-block-woocommerce-add-to-cart-form button[name="add-to-cart"] {
  flex: 1;
  padding: 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Segmented "Recommended / Add protection" pill (replaces the plain
   single button rendered by widget.js on other pages) */
.wc-ig-pt-pill {
  display: flex;
  border: 2px solid var(--wc-ig-brand, #e21382);
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0;
}
.wc-ig-pt-pill-recommended {
  background: var(--wc-ig-brand, #e21382);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  padding: 0 14px;
  white-space: nowrap;
}
/* High-specificity + !important, same reason as the specs accordion toggle
   below: this store's theme paints every bare <button> with its own solid
   brand background, which otherwise wins over a plain-class rule here
   regardless of source order -- collapsing the two segments into one flat
   pink bar. The right segment has to stay light so the pill reads as
   "recommended badge + action", not as a second CTA competing with the
   add-to-cart button above it. */
body.single-product .wc-ig-pt-pill button.wc-ig-pt-pill-action {
  flex: 1;
  background: #fff !important;
  border: none;
  color: #171717 !important;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 20px;
  cursor: pointer;
  text-align: center;
}
body.single-product .wc-ig-pt-pill button.wc-ig-pt-pill-action:hover {
  background: #fdeaf3 !important;
}

/* SKU / Brand / Category meta rows */
body.single-product .product_meta,
body.single-product .wp-block-woocommerce-product-meta {
  margin-top: 16px;
  border-top: 1px solid #eee;
  padding-top: 10px;
  font-size: 13px;
  color: #444;
}
body.single-product .product_meta > span,
body.single-product .wp-block-woocommerce-product-meta > span {
  display: block;
  padding: 4px 0;
}

/* The native WooCommerce "Product Details" tabs block only ever renders a
   Reviews(0) tab on this site (Description/Additional Info tabs don't
   populate here -- see product-page-theme.js's docblock), which doesn't
   match the reference pattern at all (no reviews section shown there).
   Hidden rather than removed: product-page-theme.js still uses this block
   as the DOM anchor to insert the specs panel right after it. */
body.single-product .wp-block-woocommerce-product-details,
body.single-product .woocommerce-tabs {
  display: none;
}

/* Product specs panel -- own generic content (product-page-theme.js's
   PRODUCT_SPECS), styled as a labeled panel with a feature checklist,
   a plain spec table, two collapsible placeholder rows, and a closing
   disclaimer -- matching the reference pattern's "Opis proizvoda" panel
   structure the developer asked to follow. */
.wc-ig-pt-specs {
  margin: 32px 0;
  font-size: 16px;
}
.wc-ig-pt-specs-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 24px;
}
.wc-ig-pt-specs-features li {
  font-size: 15px;
  color: #333;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wc-ig-pt-specs-check {
  color: var(--wc-ig-brand, #e21382);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 16px;
}
.wc-ig-pt-specs-table {
  border-top: 1px solid #eee;
}
.wc-ig-pt-specs-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
  font-size: 15px;
}
.wc-ig-pt-specs-row span:first-child {
  color: #777;
}
.wc-ig-pt-specs-row span:last-child {
  color: #171717;
  font-weight: 600;
  text-align: right;
}
.wc-ig-pt-specs-accordion {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
}
.wc-ig-pt-specs-accordion:last-of-type {
  margin-bottom: 0;
}
/* High-specificity + !important: this store's theme applies its own
   default background/color to every bare <button>, which otherwise wins
   over a plain-class rule here regardless of source order. Matching the
   reference pattern needs a light row with just a small outlined "+"
   accent, not a solid-brand-color bar, so this rule has to win outright. */
.wc-ig-pt-specs .wc-ig-pt-specs-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: #f0f0f0 !important;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: #171717 !important;
  cursor: pointer;
  text-align: left;
}
.wc-ig-pt-specs .wc-ig-pt-specs-accordion-toggle:hover {
  background: #e6e6e6 !important;
}
.wc-ig-pt-specs-accordion.is-open .wc-ig-pt-specs-accordion-toggle {
  background: #f7f7f7 !important;
}
.wc-ig-pt-specs-accordion-icon {
  font-size: 17px;
  flex-shrink: 0;
}
.wc-ig-pt-specs-accordion-plus {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--wc-ig-brand, #e21382);
  color: var(--wc-ig-brand, #e21382);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wc-ig-pt-specs-accordion.is-open .wc-ig-pt-specs-accordion-plus {
  transform: rotate(45deg);
}
.wc-ig-pt-specs-accordion-body {
  display: none;
  padding: 0 24px 20px;
  font-size: 14px;
  color: #666;
}
.wc-ig-pt-specs-accordion.is-open .wc-ig-pt-specs-accordion-body {
  display: block;
}
.wc-ig-pt-specs-disclaimer {
  margin: 20px 4px 0;
}
.wc-ig-pt-specs-disclaimer-title {
  display: block;
  color: #c0392b;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.wc-ig-pt-specs-disclaimer p {
  margin: 0;
  font-size: 13px;
  color: #888;
  line-height: 1.6;
}