/* =============================================================================
   Raz Variation Checkout — Frontend Styles
   Scope: all rules are prefixed with .rvc- to avoid theme conflicts.
   ============================================================================= */

/* ── Buy Now button — base ────────────────────────────────────────────────── */
.rvc-buy-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none !important;
  cursor: pointer;
  min-width: -webkit-fit-content;
  min-width: fit-content;
  border-radius: 3px;
  font-size: inherit;
  line-height: 1.4;
  padding: 0.618em 1.2em;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.rvc-buy-now-btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Loading state */
.rvc-buy-now-btn.rvc-loading {
  opacity: 0.65;
  pointer-events: none;
  cursor: wait;
}

/* ── Button style: filled (dark) ─────────────────────────────────────────── */
.rvc-btn--filled {
  background-color: #111111;
  border-color: #111111;
  color: #ffffff;
}

.rvc-btn--filled:hover,
.rvc-btn--filled:focus {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff;
}

/* ── Button style: outline ───────────────────────────────────────────────── */
.rvc-btn--outline {
  background-color: transparent;
  border: 1px solid #111111;
  color: #111111;
}

.rvc-btn--outline:hover,
.rvc-btn--outline:focus {
  background-color: #111111;
  border-color: #111111;
  color: #ffffff;
}

/* ── Single product page spacing ─────────────────────────────────────────── */
.single-product .summary .rvc-btn--single {
  margin-left: 10px;
  margin-right: 10px;
}

@media (max-width: 768px) {
  .single-product .summary .rvc-btn--single {
    margin-left: 4px;
    margin-right: 4px;
  }
}

/* ── Archive / loop button wrappers ──────────────────────────────────────── */
.rvc-loop-btn-wrap {
  margin-top: 8px;
  text-align: center;
}

/* Relative positioning anchor for overlay modes */
li.product {
  position: relative;
}

/* ── Overlay button positions ────────────────────────────────────────────── */
.rvc-overlay-btn {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 15;
}

.rvc-overlay-btn.overlay_thumbnail_hover {
  display: none;
}

li.product:hover>.rvc-overlay-btn.overlay_thumbnail_hover {
  display: block;
}

/* Circular icon-style button for overlay modes */
.rvc-overlay-btn .rvc-buy-now-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  padding: 0;
}

/* Tooltip label shown on hover in overlay mode */
.rvc-overlay-btn .rvc-btn-text {
  position: absolute;
  top: 50%;
  left: 130%;
  transform: translateY(-50%);
  white-space: nowrap;
  display: none;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  pointer-events: none;
}

.rvc-overlay-btn:hover .rvc-btn-text {
  display: inline-block;
}


/* =============================================================================
   Variation Selector Styles
   ============================================================================= */

/* ── Container ───────────────────────────────────────────────────────────── */
.rvc-variation-wrap {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Extra breathing room on single product pages */
.rvc-variation-wrap--single {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* ── Overlay variation panel ─────────────────────────────────────────────── */
.rvc-variation-wrap--overlay {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 12;
}

li.product:hover>.rvc-variation-wrap--overlay {
  opacity: 1;
}

/* ── Combined layout — one button per full variation ─────────────────────── */
.rvc-combo-btn {
  display: inline-flex;
  align-items: center;
  background: #ececec !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 3px;
  color: #111111 !important;
  font-size: 12px;
  line-height: 1.2;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  margin-right: 4px;
  margin-bottom: 4px;
}

.rvc-combo-btn:hover {
  background: #dbdbdb !important;
  border-color: #b4b4b4 !important;
}

.rvc-combo-btn--selected {
  background: #C30C2C !important;
  border-color: #C30C2C !important;
  color: #ffffff !important;
}

.rvc-combo-btn--selected:hover {
  background: #A20B24 !important;
  border-color: #A20B24 !important;
}

/* ── Separate layout — per-attribute rows ────────────────────────────────── */
.rvc-sep-attrs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* One attribute row */
.rvc-attr-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Center buttons only on archive/shop cards (not on single product page) */
.rvc-variation-wrap:not(.rvc-variation-wrap--single) .rvc-attr-row {
  justify-content: center;
}

/* Attribute name label */
.rvc-attr-label {
  font-weight: 600;
  font-size: 12px;
  margin-right: 4px;
  flex-shrink: 0;
}

/* Options group within a row */
.rvc-attr-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Individual option button */
.rvc-opt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  background: #ececec !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 3px;
  color: #111111 !important;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  padding: 8px 14px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  -webkit-user-select: none;
  user-select: none;
}

/* Individual buttons only on archive/shop cards (not on single product page) */
.rvc-variation-wrap:not(.rvc-variation-wrap--single) .rvc-opt-btn {
    padding: 4px 8px;
}

.rvc-opt-btn:hover {
  background: #dbdbdb !important;
  border-color: #b4b4b4 !important;
}

/* Selected state */
.rvc-opt-btn--selected {
  background: #C30C2C !important;
  border-color: #C30C2C !important;
  color: #ffffff !important;
}

.rvc-opt-btn--selected:hover {
  background: #A20B24 !important;
  border-color: #A20B24 !important;
  color: #ffffff !important;
}

/* Disabled / unavailable state */
.rvc-opt-btn--disabled {
  opacity: 0.38;
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: line-through;
}


/* =============================================================================
   Responsive adjustments
   ============================================================================= */
@media (max-width: 480px) {
  .rvc-opt-btn {
    padding: 5px 10px;
  }

  .rvc-combo-btn {
    padding: 8px 8px;
  }

  .rvc-buy-now-btn {
    font-size: 13px;
    padding: 0.55em 1em;
  }
}


/* =============================================================================
   Single product page — hide native WC dropdowns (non-destructive)

   Strategy:
   - .rvc-single-box-active body class is added by PHP on variable product pages.
   - The <select> must stay IN the DOM so WooCommerce's JS can read/write it.
   - We use the "visually hidden" pattern: 1×1 px, clipped, no overflow.
     This takes zero layout space yet remains accessible to scripts.
   ============================================================================= */

.rvc-single-box-active form.cart table.variations select,
.rvc-single-box-active form.variations-form table.variations select {
  /* Visually hidden — takes NO layout space, but stays in the DOM for WC JS */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* td.value needs relative positioning as clipping context */
.rvc-single-box-active form.cart table.variations td.value {
  position: relative;
}

/* Box-button row injected directly inside td.value by PHP.
   Adds breathing room between the hidden select and the buttons. */
.rvc-single-box-active form.cart table.variations td.value .rvc-attr-row,
.rvc-single-box-active form.variations-form table.variations td.value .rvc-attr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* "Clear" reset link sits naturally below the last box row — no extra work needed */
.rvc-single-box-active .reset_variations {
  display: block;
  margin-top: 6px;
  font-size: 0.85em;
}