/* =============================================================================
   Puzzels — RTL overrides v7
   Loaded automatically when is_rtl() is true.
   Complements puzzels-customizer.css — does not replace it.

   `direction: rtl` is set on the root `.puzzels-customizer` and cascades.
   Flex rows and CSS Grids reverse automatically. Explicit overrides are only
   needed where auto-reversal produces the wrong visual result. All rules are
   scoped under `.puzzels-customizer` to match the main stylesheet's
   specificity strategy (no `!important`).
   ============================================================================= */

/* ── Root: cascade RTL direction ──────────────────────────────────────────── */
.puzzels-customizer {
  direction: rtl;
}

/* ── Action bar: primary button on the visual left ────────────────────────
   In RTL the natural flex reversal places the second DOM child (the CTA
   button) on the left, which is what we want — so keep the default `row`
   direction (no row-reverse). Confined to widths above the mobile breakpoint
   so it never overrides the mobile `flex-direction: column`.              */
@media (min-width: 661px) {
  .puzzels-customizer .pc-action-bar {
    flex-direction: row;
  }
}

/* ── Editor layout: CSS Grid column reversal ─────────────────────────────
   direction:rtl reverses grid columns automatically:
   canvas (1fr) → RIGHT, sidebar (272px) → LEFT ✓                         */
.puzzels-customizer .puzzle-editor-layout {
  direction: rtl;
}

/* ── Caption row labels ───────────────────────────────────────────────────
   Fixed-width label (44px) needs explicit alignment.                      */
.puzzels-customizer .caption-row__label {
  text-align: right;
}

/* ── Caption textarea ─────────────────────────────────────────────────────
   Hebrew text entry: right-aligned.                                       */
.puzzels-customizer .caption-textarea {
  text-align: right;
}

/* ── Font dropdown ────────────────────────────────────────────────────────
   Hebrew font names should read right.                                    */
.puzzels-customizer .font-dropdown-btn,
.puzzels-customizer .font-dropdown-list,
.puzzels-customizer .font-option,
.puzzels-customizer .font-group-label {
  text-align: right;
}

/* ── Panel titles ─────────────────────────────────────────────────────────
   Headings may inherit from theme; explicit right-align for consistency.  */
.puzzels-customizer .puzzels-panel__title,
.puzzels-customizer .puzzels-panel__subtitle {
  text-align: right;
}

.puzzels-customizer .puzzels-flow-step {
  text-align: right;
}

.puzzels-customizer .puzzels-onboarding {
  text-align: right;
}

/* Bullet sits on physical left in the main rule, which doesn't auto-flip
   for RTL. The text-side padding uses padding-inline-start which already
   flips, so we only need to move the bullet.                              */
.puzzels-customizer .puzzels-onboarding__list li::before {
  left: auto;
  right: 0;
}

/* ── Upload hint ──────────────────────────────────────────────────────────
   Paragraph below the drop zone.                                          */
.puzzels-customizer .puzzels-upload-hint {
  text-align: right;
}

/* ── Notices ──────────────────────────────────────────────────────────────
   Ensures dynamically-injected error messages render Hebrew correctly.    */
.puzzels-customizer .puzzels-notice {
  text-align: right;
  direction: rtl;
}