/*!
 * Puppy Deposits — front-end styles.
 *
 * THIS FILE IS THE SOURCE. It is shipped and enqueued as-is; there is no build step
 * and no minified counterpart. Edit it directly.
 *
 * Do not re-minify it. The server serves it Brotli-compressed (measured: the old
 * 5,964-byte minified file went over the wire at 1,351 bytes), so minifying saves a
 * couple of hundred bytes and costs the ability to read and maintain the file.
 *
 * History: this began as the vendored, source-less `style.min.css` from WooCommerce
 * Deposits 4.6.10 (Webtomizer). It was de-minified in 5.1.0 with prettier; that commit
 * changed formatting only, no rules. The pristine upstream copy is kept for reference
 * in ../webtomizer-woocommerce-deposits-4.6.10/.
 *
 * The vendored "candy" toggle switch that used to live here was replaced in 5.1.0 by
 * .wcdp-toggle. Nothing generates !important overrides against this file any more:
 * wc-deposits-functions.php only publishes --wcdp-* custom properties, and every
 * default is the fallback beside its property here. Keep it that way — put the rule
 * here and the default in its fallback, rather than emitting CSS from PHP.
 *
 * Defaults must be literals. They ship to any site, so a fallback naming a theme token
 * (var(--action) etc.) resolves to nothing where that token does not exist. Settings may
 * hold tokens; defaults may not.
 *
 * US spelling, matching the settings labels and CSS itself ("color", not "colour").
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Reserve card — the framed block around the deposit controls on a product page.

   Everything a merchant can configure is a --wcdp-* custom property carrying the
   old default as its fallback. wcdp_get_deposit_slider_custom_styles() publishes
   only the properties that have a value, on .wc-deposits-reserve-card; the card is
   the ancestor of everything here, so they cascade to the toggle and options too.
   ───────────────────────────────────────────────────────────────────────────── */
/* The card carries NO padding: its children decide their own insets, so the heading
   band can span edge to edge. In toggle mode the toggle and message sit in a padded
   .wcdp-card-body; in radio mode the option rows are full-bleed with their own padding. */
.wc-deposits-reserve-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1em 0 1.25em;
  padding: 0;
  border: var(--wcdp-card-border-width, 1px) solid
    var(--wcdp-card-border-color, rgba(0, 0, 0, 0.12));
  border-radius: var(--wcdp-card-radius, 8px);
  background: var(--wcdp-card-bg, rgba(0, 0, 0, 0.03));
}
.wc-deposits-reserve-card > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Toggle mode's padded region under the band. No gap: the only thing needing separation
   is the message, which carries its own margin-top. */
.wcdp-card-body {
  display: flex;
  flex-direction: column;
  padding: var(--wcdp-card-padding, 1em 1.25em);
}

/* The heading is a header band across the top of the card in BOTH modes — its own fill,
   edge to edge, with a rule beneath separating it from what follows. Subtle by default;
   set Heading Background + Heading Color on the Styling tab for a strong band.

   It rounds its own top corners to match the card rather than relying on the card's
   overflow:hidden — toggle mode cannot clip, because the "Pay in Full unavailable"
   tooltip escapes the card upwards.

   font-weight must come from a stylesheet, NOT an inline style: an external script
   (Bricks / Automatic.css paragraph normalization) strips inline font-weight off
   paragraphs after load, which showed as a bold→light flash. A rule survives it. */
.wc-deposits-reserve-heading {
  padding: var(--wcdp-heading-padding, 0.9em 1.25em);
  background-color: var(--wcdp-heading-bg, rgba(0, 0, 0, 0.04));
  border-bottom: 1px solid var(--wcdp-option-divider, rgba(0, 0, 0, 0.1));
  border-radius: var(--wcdp-card-radius, 8px) var(--wcdp-card-radius, 8px) 0 0;
  font-size: var(--wcdp-heading-size, 1.05em);
  font-weight: var(--wcdp-heading-weight, 700);
  line-height: 1.2;
  color: var(--wcdp-heading-color, inherit);
  /* Alignment is set on the heading and message directly rather than on the card.
     text-align inherits, so on the card it also reached the radio option labels —
     centering the whole option list next to left-aligned radios. Toggle mode is
     unaffected by the move: the toggle's labels have their own centering and the
     card body is flex, so the heading and message were the only things it ever
     visually reached there. */
  text-align: var(--wcdp-card-align, left);
}

/* The message under the controls. It is a <span>, so display:block is required for
   width/margin to apply at all. Centered with explicit left/right margins rather than
   the shorthand — an auto vertical margin on a flex item absorbs free space, and the
   top margin here is doing real work. It sets the message off from the toggle above
   (this is the only pair in the body needing separation, so it replaces the body gap). */
.wc-deposits-reserve-card .wc-deposits-notice {
  display: block;
  width: 90%;
  margin-top: 0.85em;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--wcdp-message-size, inherit);
  color: var(--wcdp-message-color, inherit);
  text-align: var(--wcdp-card-align, left);
}

/* ── Radio presentation (the "Use basic radio buttons" mode) ────────────────── */
/* The options read as one grouped control: no gap between them, separated by rules
   instead, each row filling on hover and when selected.

   The rows are full-bleed so a selected row's fill covers its whole half of the card,
   and the last row's fill has to be clipped to the card's bottom corners. overflow is
   safe to hide HERE but not in toggle mode, where the "Pay in Full unavailable" tooltip
   escapes the card upwards; radio mode shows that message as an inline subline instead,
   so nothing needs to escape. */
.basic-wc-deposits-options-form .wc-deposits-reserve-card {
  overflow: hidden;
}
.wc-deposits-options {
  display: flex;
  flex-direction: column;
}

/* Grid: [radio | text]. align-items:center centers the radio on the FIRST (title)
   line; the balance subline drops to row 2 / column 2, aligned under the title.
   color defaults to inherit so option text matches the theme's normal text color,
   overriding the muted gray a Frames/Automatic.css `.form--light label` rule applies. */
/* Rows are flush to the card edges, so they carry the horizontal inset the card used
   to provide. No per-row radius: the card's own corners round the first and last row. */
.wc-deposits-option {
  position: relative; /* contains the visually-hidden input */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6em;
  align-items: center;
  margin: 0;
  padding: var(--wcdp-option-padding, 0.9em 1.25em);
  cursor: pointer;
  /* Unselected rows carry an 18% tint of the Selected Option Background — the same
     derivation the toggle uses for its unselected button, so the two styles match. The
     selected row (below) paints the full color over it. */
  background-color: var(
    --wcdp-option-unselected-bg,
    color-mix(in srgb, var(--wcdp-option-selected-bg, #dcdcdc) 18%, transparent)
  );
  /* Static fallback for the auto-contrast in the @supports block below — dark, readable on
     the light tint. NOT --wcdp-option-text/inherit: the label must contrast the row's OWN
     fill, not follow a setting or theme color that can be light on a light tint. */
  color: #1a1a1a;
  /* Smoothly cross-fade the fill AND the text color as selection moves between options. */
  transition:
    background-color 0.28s ease,
    color 0.28s ease;
}

/* A rule between rows, not around them — the row's own padding keeps the text off it. */
.wc-deposits-option + .wc-deposits-option {
  border-top: 1px solid var(--wcdp-option-divider, rgba(0, 0, 0, 0.1));
}

/* Selected wins over hover, so the two never fight when hovering the selected row.
   :has() lets the checked input tint its own label — the input is nested inside it. */
.wc-deposits-option:hover {
  background-color: var(
    --wcdp-option-hover-bg,
    color-mix(in srgb, var(--wcdp-option-selected-bg, #dcdcdc) 28%, transparent)
  );
}
/* The selected row is a FILLED bar, like a selected toggle button: it takes the Selected
   Option Background, and its text (with the checkmark) auto-contrasts against it in the
   @supports block below — Selected Option Text Color overrides. border-radius default 0
   keeps rows full-bleed; Option Corner Radius rounds the highlight if set. */
.wc-deposits-option:has(.input-radio:checked) {
  background-color: var(--wcdp-option-selected-bg, rgba(0, 0, 0, 0.05));
  color: var(--wcdp-option-selected-text, #fff); /* fallback; @supports refines below */
  border-radius: var(--wcdp-toggle-radius, 0);
}

/* A disabled option is not selectable, so it must not offer a hover affordance — hold the
   unselected tint rather than clearing to transparent, which would flash the bare card. */
.wc-deposits-option--disabled:hover {
  background-color: var(
    --wcdp-option-unselected-bg,
    color-mix(in srgb, var(--wcdp-option-selected-bg, #dcdcdc) 18%, transparent)
  );
}

/* Auto-contrast the radio labels, mirroring the toggle: black or white by the fill's
   lightness, so text stays readable whatever Selected Option Background is chosen —
   including a var() theme token, which PHP cannot resolve. #dcdcdc is the opaque stand-in
   for the translucent defaults. The checkmark (currentColor) and price (inherit) follow. */
@supports (color: oklch(from red l 0 0)) {
  /* Unselected: against the 18% tint over a light surface — nearly always dark text. */
  .wc-deposits-option {
    color: oklch(
      from color-mix(in srgb, var(--wcdp-option-selected-bg, #dcdcdc) 18%, white)
        clamp(0, (0.62 - l) * 1000, 1) 0 0
    );
  }
  /* Selected: Selected Option Text Color still wins; else contrast the solid fill. */
  .wc-deposits-option:has(.input-radio:checked) {
    color: var(
      --wcdp-option-selected-text,
      oklch(from var(--wcdp-option-selected-bg, #dcdcdc) clamp(0, (0.62 - l) * 1000, 1) 0 0)
    );
  }
}
/* Custom radio: instead of a round control, the SELECTED row shows a checkmark in
   column 1 — the same idea as the toggle's selected checkmark. The real <input> stays in
   the DOM, just visually hidden: still focusable, still in the accessibility tree, still
   the .pay-deposit / .pay-full-amount / .input-radio that add-to-cart.js re-renders and
   queries. The check is a ::before on the row, revealed only when that row's input is
   checked (:has). Its space is reserved on every row (transparent when unselected) so all
   option text lines up. currentColor makes it take the selected row's text color (the
   Selected Option Text Color), matching the label. */
.wc-deposits-option .input-radio {
  /* Visually hidden, but focusable and present. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.wc-deposits-option::before {
  content: "\2713"; /* ✓ */
  grid-column: 1;
  grid-row: 1 / -1; /* span the title + subline rows, so it centers between them */
  align-self: center;
  color: currentColor;
  font-size: 1.3em;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.wc-deposits-option:has(.input-radio:checked)::before {
  opacity: 1;
}
/* Keyboard focus: outline the row, inset so the card's overflow:hidden cannot clip it. */
.wc-deposits-option:has(.input-radio:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .wc-deposits-option::before {
    transition: none;
  }
}
/* Option Label Text Size / Option Font Weight are shared with the toggle, fallbacks
   included: both styles inherit the surrounding text size and render bold unless the
   merchant sets otherwise, so the two presentations read the same by default. */
.wc-deposits-option-title {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--wcdp-toggle-label-size, inherit);
  font-weight: var(--wcdp-toggle-weight, 700);
}

/* Radio's price stays inline after the label (the toggle's is display:block, on its own
   line, because its buttons are narrow). Both wrap the parentheses with the amount so
   they scale together. */
.wc-deposits-option-price {
  font-size: var(--wcdp-toggle-price-size, inherit);
}
.wc-deposits-option-sub {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.15em;
  font-size: var(--wcdp-message-size, 0.85em);
  line-height: 1.35;
  color: var(--wcdp-subline-color, inherit);
  /* PHP sets --wcdp-subline-opacity to 1 when a subline color is configured, so a
     chosen color is shown as chosen rather than faded to 70% of itself. */
  opacity: var(--wcdp-subline-opacity, 0.7);
}

/* Forced deposit: mute the TITLE, not the row — a row-level opacity would compound
   with the subline's own and leave the explanation too faint to read. */
.wc-deposits-option--disabled {
  cursor: not-allowed;
}
.wc-deposits-option--disabled .wc-deposits-option-title {
  opacity: 0.55;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Deposit toggle — a two-option segmented control.

   Replaces the vendored "candy" switch that used to live here: a 2013-era
   third-party toggle library that pinned itself to a single 1.875em line, floated
   its labels, hard-coded an embossed text-shadow and bevel, and ran an infinite
   `webkitSiblingBugfix` animation on every page. Because it could not be edited,
   every design decision had to be fought with !important overrides generated in
   wcdp_get_deposit_slider_custom_styles(). Owning the markup means the design
   lives here, and PHP only publishes the custom properties below.

   Every configurable value is a --wcdp-toggle-* custom property carrying the old
   default as its fallback, so an unset setting renders the original look and no
   override is needed to express a default.

   CONTRACT — do not rename: .pay-deposit, .pay-full-amount and .input-radio on the
   inputs, and the sibling .wc-deposits-notice, are queried by add-to-cart.js, which
   re-renders this markup over AJAX. The .wcdp-toggle* classes are ours and free.
   ───────────────────────────────────────────────────────────────────────────── */
/* The WHOLE switch carries the unselected color — an 18% tint of the selected one — and
   the selected option paints over it. Each option rounds only its OUTER corners (the
   --deposit / --full rules below), so the two meet in a straight seam while the switch's
   outer corners stay rounded. Coloring the container (rather than each unselected option)
   means there is nothing behind the options to show through. */
.wcdp-toggle {
  display: flex;
  position: relative; /* anchors __tip */
  border-radius: var(--wcdp-toggle-radius, 3px);
  background-color: var(
    --wcdp-toggle-unselected-bg,
    color-mix(in srgb, var(--wcdp-toggle-selected, rgba(0, 0, 0, 0.12)) 18%, transparent)
  );
  text-align: center;
}

/* Visually hidden, but still focusable and still in the accessibility tree. The
   candy switch used `display: none`, which drops the radios out of the tab order
   entirely — keyboard users could not choose a payment option at all. */
.wcdp-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Unselected options are transparent and simply show the container's color, so the whole
   switch reads as one unselected surface with the selected option painted on it.

   Deliberately not `opacity` for the unselected state — that would fade the label with the
   fill, and it would collide with the disabled state below (opacity .4), leaving
   "unselected" and "unavailable" looking alike on a control choosing between a deposit and
   the full price.

   The label color does NOT follow the fill: a tint of a dark selected color is light, so
   light selected-text would be unreadable on it. Unselected inherits the theme's own text
   color; --wcdp-toggle-text applies to the selected option only (see below), where it has
   a fill to contrast against. */
.wcdp-toggle__option {
  flex: 1 1 0;
  margin: 0;
  padding: var(--wcdp-toggle-padding, 12px 24px);
  cursor: pointer;
  background-color: transparent;
  /* Base (unselected) label color. The @supports block below auto-contrasts it against the
     unselected tint; this static value is the fallback for browsers without relative-color
     syntax. Deliberately NOT --wcdp-option-text or inherit: in toggle mode the label must
     contrast with the toggle's OWN fills, not follow the shared radio option color or a
     theme-inherited color that can be light on a light tint (which read as white-on-pink). */
  color: #1a1a1a;
  /* Two-column layout: [ checkmark | label-over-price ]. The check (::before) spans both
     rows in column 1 so it centers vertically across the label AND the price line, instead
     of shifting the first line as an inline mark did. The label text auto-places at row 1 /
     column 2; the price is pinned to row 2 / column 2 below it. justify-content centers the
     two columns as a group. */
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  justify-items: center;
  align-items: center;
  column-gap: 0.6em;
  /* Shared defaults with the radio rows: inherit the surrounding text size, bold.
     (1em and inherit compute identically here; inherit states the intent.) */
  font-size: var(--wcdp-toggle-label-size, inherit);
  font-weight: var(--wcdp-toggle-weight, 700);
  line-height: normal;
  /* Cross-fade the fill and text as selection moves between the two buttons. */
  transition:
    background-color 0.28s ease,
    color 0.28s ease;
}

/* Round only the OUTER corners so the seam between the two options stays a straight line.
   --deposit is always the left option and --full the right (fixed template order), so
   deposit rounds its left corners and full its right; the switch's own border-radius rounds
   the container behind them to match. */
.wcdp-toggle__option--deposit {
  border-radius: var(--wcdp-toggle-radius, 3px) 0 0 var(--wcdp-toggle-radius, 3px);
}
.wcdp-toggle__option--full {
  border-radius: 0 var(--wcdp-toggle-radius, 3px) var(--wcdp-toggle-radius, 3px) 0;
}

/* Hover paints a deeper tint of the same color ON TOP of the container's, so the two
   composite to something darker still — which is the intent: hover reads as "more than
   resting". The checked rule below outranks this (3 classes vs 2), so hovering the
   selected option cannot dislodge its fill, regardless of source order. */
.wcdp-toggle__option:hover {
  background-color: var(
    --wcdp-toggle-hover-bg,
    color-mix(in srgb, var(--wcdp-toggle-selected, rgba(0, 0, 0, 0.12)) 22%, transparent)
  );
}

/* The price always takes its own line under the label. Pinned to row 2 / column 2 of the
   option grid so it sits beneath the label text and beside the checkmark's column, not
   under the checkmark. */
.wcdp-toggle__price {
  grid-column: 2;
  grid-row: 2;
  display: block;
  font-size: var(--wcdp-toggle-price-size, 0.85em);
}

/* wc_price() wraps the amount and its currency symbol in spans that themes color
   independently; without this the symbol can stay a different color to the number. */
.wcdp-toggle__price .amount,
.wcdp-toggle__price .amount * {
  color: inherit;
}

/* The selected option carries the configured fill. Its text is the Selected Button Text
   Color if set, otherwise auto-contrast (see @supports below); this static value is the
   fallback for browsers without relative-color syntax — white suits the dark default fill. */
.wcdp-toggle__input:checked + .wcdp-toggle__option {
  background-color: var(--wcdp-toggle-selected, rgba(0, 0, 0, 0.12));
  color: var(--wcdp-toggle-text, #fff);
}

/* Auto-contrast the toggle labels: pick black or white by the fill's lightness, so text
   stays readable whatever color is chosen — INCLUDING a var() theme token, which PHP cannot
   resolve to pick a text color for. oklch lightness `l` is 0..1; the clamp is a hard step
   near 0.62 (dark text on light fills, light on dark). #dcdcdc is an opaque stand-in for the
   default translucent fill, so the default state contrasts correctly too. Progressive
   enhancement — browsers without relative-color syntax keep the static fallbacks above.
   The checkmark and the price inherit this color, so both follow the label. */
@supports (color: oklch(from red l 0 0)) {
  /* Unselected: against the 20% tint composited over a light surface — nearly always dark. */
  .wcdp-toggle__option {
    color: oklch(
      from color-mix(in srgb, var(--wcdp-toggle-selected, #dcdcdc) 20%, white)
        clamp(0, (0.62 - l) * 1000, 1) 0 0
    );
  }
  /* Selected: Selected Button Text Color still wins; else contrast the solid fill. */
  .wcdp-toggle__input:checked + .wcdp-toggle__option {
    color: var(
      --wcdp-toggle-text,
      oklch(from var(--wcdp-toggle-selected, #dcdcdc) clamp(0, (0.62 - l) * 1000, 1) 0 0)
    );
  }
}

/* Checkmark to the LEFT of the selected option's label, vertically centered across both
   lines: it spans both grid rows in column 1 (see the grid on .wcdp-toggle__option). Space
   is reserved on BOTH options — the mark is transparent when unselected — so the label
   does not shift when toggling. It inherits the selected text color, so it matches. */
.wcdp-toggle__option::before {
  content: "\2713"; /* ✓ */
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.35em;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.wcdp-toggle__input:checked + .wcdp-toggle__option::before {
  opacity: 1;
}

/* currentColor, not --wcdp-toggle-selected: the selected fill is a faint overlay by
   default, and a focus ring drawn in it would be all but invisible. */
.wcdp-toggle__input:focus-visible + .wcdp-toggle__option {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Forced deposit: "Pay in Full" renders disabled. Read as clearly unavailable while
   keeping the full price legible for reference. */
.wcdp-toggle__input:disabled + .wcdp-toggle__option {
  opacity: 0.4;
  cursor: not-allowed;
}
/* A disabled option is not selectable, so it must not offer a hover affordance. transparent
   is correct now that the container carries the unselected color: it reveals that, rather
   than stripping the fill to nothing. */
.wcdp-toggle__input:disabled + .wcdp-toggle__option:hover {
  background-color: transparent;
}

/* Tooltip explaining why "Pay in Full" is unavailable. A sibling of the labels, not a
   child, so the dimming above does not fade the explanation. Hover is pure CSS; tap
   adds --visible from the delegated handler in class-wc-deposits-add-to-cart.php. */
.wcdp-toggle__tip {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 10px;
  width: max-content;
  max-width: min(260px, 80vw);
  padding: 8px 11px;
  border-radius: 6px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.wcdp-toggle__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 24px;
  border: 6px solid transparent;
  border-top-color: #1a1a1a;
}
.wcdp-toggle__option--full:hover ~ .wcdp-toggle__tip,
.wcdp-toggle__tip--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wc-deposits-options-form {
  margin-bottom: 12px;
}
.wc-deposits-options-form hr.separator {
  margin: 4px;
}
#tiptip_holder {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
}
#tiptip_holder.tip_top {
  padding-bottom: 5px;
}
#tiptip_holder.tip_bottom {
  padding-top: 5px;
}
#tiptip_holder.tip_right {
  padding-left: 5px;
}
#tiptip_holder.tip_left {
  padding-right: 5px;
}
#tiptip_content {
  font-size: 11px;
  color: #fff;
  text-shadow: 0 0 2px #000;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: #191919;
  background-color: rgba(25, 25, 25, 0.92);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: 0 0 3px #555;
  -webkit-box-shadow: 0 0 3px #555;
  -moz-box-shadow: 0 0 3px #555;
}
#tiptip_arrow,
#tiptip_arrow_inner {
  position: absolute;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  height: 0;
  width: 0;
}
#tiptip_holder.tip_top #tiptip_arrow {
  border-top-color: #fff;
  border-top-color: rgba(255, 255, 255, 0.35);
}
#tiptip_holder.tip_bottom #tiptip_arrow {
  border-bottom-color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.35);
}
#tiptip_holder.tip_right #tiptip_arrow {
  border-right-color: #fff;
  border-right-color: rgba(255, 255, 255, 0.35);
}
#tiptip_holder.tip_left #tiptip_arrow {
  border-left-color: #fff;
  border-left-color: rgba(255, 255, 255, 0.35);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
  margin-top: -7px;
  margin-left: -6px;
  border-top-color: #191919;
  border-top-color: rgba(25, 25, 25, 0.92);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
  margin-top: -5px;
  margin-left: -6px;
  border-bottom-color: #191919;
  border-bottom-color: rgba(25, 25, 25, 0.92);
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
  margin-top: -6px;
  margin-left: -5px;
  border-right-color: #191919;
  border-right-color: rgba(25, 25, 25, 0.92);
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
  margin-top: -6px;
  margin-left: -7px;
  border-left-color: #191919;
  border-left-color: rgba(25, 25, 25, 0.92);
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #tiptip_content {
    padding: 4px 8px 5px;
    background-color: rgba(45, 45, 45, 0.88);
  }
  #tiptip_holder.tip_bottom #tiptip_arrow_inner {
    border-bottom-color: rgba(45, 45, 45, 0.88);
  }
  #tiptip_holder.tip_top #tiptip_arrow_inner {
    border-top-color: rgba(20, 20, 20, 0.92);
  }
}
/* KEPT, though it looks unused here: .wcdp_hidden is applied by the blocks slider
   (includes/blocks/build/…deposit-slider.js) when a deposit is forced and hidden. That
   page loads the blocks stylesheet, not this file — enqueue_styles() bails early on
   has_block('woocommerce/checkout') — so this copy is belt-and-braces, not the live one. */
.wcdp_hidden {
  display: none !important;
}
/* KEPT — live. wc-deposits-functions.php renders #deposit-help-tip and
   wc-deposits-checkout.js runs WooCommerce's tipTip plugin on it, styled by the
   #tiptip_* rules above. Do not remove either without removing that help tip. */
#deposit-help-tip {
  background: rgba(80, 80, 80, 0.92);
  padding: 1px 7px;
  color: #fff;
  border-radius: 5px;
}
/* Payment plans were dropped in the fork (a locked decision), so everything from here to
   the end of the payment-plan rules is dead in practice. KEPT deliberately: the feature was
   disabled at its entry points rather than deep-deleted, so the markup that carries these
   classes still exists in templates/wc-deposits-checkout-mode-slider.php and add-to-cart.js
   — it is simply unreachable. Delete these rules together with that dormant code, not before,
   or the two fall out of step. See the deep-delete TODO in FORK-HANDOFF.md. */
.wcdp-payment-plans {
  padding: 10px;
}
.wcdp-payment-plans a {
  cursor: pointer;
}
.wcdp-payment-plans ul {
  list-style: none !important;
}
#pay-deposit-label,
#pay-full-amount-label {
  margin: 0;
}
#wcdp-payment-plans ul {
  list-style: none;
}
#pay-deposit-label,
#pay-full-amount-label,
#wcdp-payment-plans a,
#wcdp-payment-plans input {
  cursor: pointer;
}