/*
 * RTL overrides.
 *
 * WordPress loads this automatically whenever is_rtl() is true, so it covers
 * Hebrew today and will cover Arabic without further work.
 *
 * Two kinds of rule live here:
 *   1. Flipping direction-specific layout the base stylesheets set for LTR.
 *   2. Undoing the `direction: ltr` overrides in custom.css. Those exist so
 *      Latin product names and the phone/platform controls read correctly on
 *      an RTL page - they must stay LTR - but they had also caught the
 *      surrounding Hebrew copy.
 *
 * Anything genuinely left-to-right (a phone number, a URL, a Latin brand name)
 * is deliberately kept LTR below.
 */

/* --------------------------------------------------------------------------
   1. Base direction
   -------------------------------------------------------------------------- */

body {
    direction: rtl;
    text-align: right;
}

/* --------------------------------------------------------------------------
   2. Pricing cards - these were pinned to LTR for the English layout
   -------------------------------------------------------------------------- */

.home-pricing-card,
.pricing-card,
.home-pricing-features li,
.pricing-features li,
.home-pricing-tagline,
.pricing-tagline,
.home-pricing-card h3,
.pricing-card h3 {
    direction: rtl;
    text-align: right;
}

.home-pricing-badge,
.pricing-badge {
    left: auto;
    right: 28px;
}

/* The amount itself stays LTR so "$129" does not render as "129$". */
.home-pricing-price,
.pricing-card-price,
.home-pricing-price .amount,
.pricing-card-price .price-amount,
.home-pricing-price .period,
.pricing-card-price .price-period {
    direction: ltr;
    text-align: right;
    unicode-bidi: isolate;
}

.home-pricing-price .label,
.pricing-card-price .price-label {
    direction: rtl;
    text-align: right;
}

/* Availability note: Hebrew sentence, but the icons lead. */
.home-pricing-availability,
.platform-availability {
    direction: rtl;
    text-align: right;
}

.home-pricing-availability__text,
.platform-availability__text {
    direction: rtl !important;
    text-align: right !important;
}

/* --------------------------------------------------------------------------
   3. Feature and checklist rows
   -------------------------------------------------------------------------- */

.feature-checklist li,
.feature-detail-content,
.feature-detail-content h2,
.feature-detail-content p {
    direction: rtl;
    text-align: right;
}

.feature-detail {
    flex-direction: row-reverse;
}

.feature-detail.alt {
    flex-direction: row;
}

/* --------------------------------------------------------------------------
   4. Forms
   -------------------------------------------------------------------------- */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="search"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
    direction: rtl;
    text-align: right;
}

/* Email, URL and phone stay LTR - they are never Hebrew. */
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form .iti input[type="tel"] {
    direction: ltr;
    text-align: right;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    text-align: right;
}

/* Phone country picker: the control is inherently LTR, but it should sit on
   the correct side of an RTL field. */
.wpcf7-form .iti--separate-dial-code .iti__selected-country {
    border-radius: 0;
}

.wpcf7-form .iti__dropdown-content {
    left: auto !important;
    right: 0 !important;
}

/* --------------------------------------------------------------------------
   5. Platform select
   -------------------------------------------------------------------------- */

.platform-select__button {
    direction: rtl;
    text-align: right;
}

.platform-select__label {
    direction: rtl !important;
    text-align: right !important;
}

/* custom.css pins these to LTR with !important so Latin platform names read
   correctly on an English page; match that weight to flip them back. */
.wpcf7-form .platform-select__list,
.platform-select__list {
    direction: rtl !important;
}

.wpcf7-form .platform-select__option,
.platform-select__option {
    direction: rtl !important;
    text-align: right !important;
}

.platform-select__option .platform-select__label {
    text-align: right !important;
}

.platform-select__list {
    left: auto;
    right: 0;
}

/* --------------------------------------------------------------------------
   6. Header, menu and language switcher
   -------------------------------------------------------------------------- */

.lang-switch-wrap {
    margin-inline-start: 18px;
    margin-inline-end: 0;
}

.mobile-menu-drawer {
    left: 0;
    right: auto;
}

.mobile-menu-overlay:not(.open) .mobile-menu-drawer {
    transform: translateX(-100%);
}

.mobile-menu-overlay.open .mobile-menu-drawer {
    transform: translateX(0);
}

/* --------------------------------------------------------------------------
   7. Blog and article layout
   -------------------------------------------------------------------------- */

.blog-card,
.blog-card-content,
.blog-card h2,
.blog-card p {
    direction: rtl;
    text-align: right;
}

/* --------------------------------------------------------------------------
   8. Anything that must never flip
   -------------------------------------------------------------------------- */

/* Latin brand names, code, prices and contact details read left-to-right even
   inside Hebrew copy. isolate keeps them from reordering their neighbours. */
.brand-part img,
.suitable-part img,
code,
kbd,
samp,
a[href^="tel:"],
a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Carousels keep their own coordinate system - flipping them breaks Swiper. */
.swiper,
.swiper-wrapper,
.swiper-slide {
    direction: ltr;
}

.swiper-slide > * {
    direction: rtl;
    text-align: right;
}

/* The brand strip is logos only; leave its flow alone. */
.brand-slider .swiper-slide > * {
    direction: ltr;
}

/* --------------------------------------------------------------------------
   9. Cards defined inline on the feature and industry templates
   -------------------------------------------------------------------------- */

.related-feature-card,
.related-feature-card h3,
.related-feature-card p,
.related-feature-link,
.related-features-grid {
    direction: rtl;
    text-align: right;
}

/* The arrow in "learn more →" points the wrong way once the text flows RTL. */
.related-feature-link {
    unicode-bidi: isolate;
}

.pricing-badge,
.home-pricing-badge {
    direction: rtl;
    text-align: center;
}

/* --------------------------------------------------------------------------
   10. Catch-all for inline-styled template sections
   --------------------------------------------------------------------------
   Several page templates carry their own <style> block with text-align:left.
   Rather than chase each one, align Hebrew content by default and keep the
   explicit LTR exceptions above.
   -------------------------------------------------------------------------- */

.feature-card,
.feature-card h3,
.feature-card p,
.industry-card,
.industry-card h3,
.industry-card p,
.comparison-card,
.stat-box,
.stat-box h3,
.stat-box p,
.step-card,
.step-card h3,
.step-card p,
.faq-item,
.faq-question,
.faq-answer,
.trust-item,
.checklist li,
.benefit-card,
.benefit-card h3,
.benefit-card p {
    direction: rtl;
    text-align: right;
}

/* Tables: header and cells follow the reading direction. */
.comparison-table th,
.comparison-table td {
    text-align: right;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: right;
}

/* --------------------------------------------------------------------------
   11. Tables
   --------------------------------------------------------------------------
   The comparison tables are styled from inline <style> blocks in the page
   templates, which outrank a plain selector here - hence !important.
   -------------------------------------------------------------------------- */

table th,
table td,
.comparison-table th,
.comparison-table td,
.pricing-comparison th,
.pricing-comparison td {
    text-align: right !important;
    direction: rtl;
}

/* Numeric and Latin cells (prices, "Shopify only") stay readable. */
table td:not(:first-child),
.comparison-table td:not(:first-child) {
    unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   12. Header menu
   -------------------------------------------------------------------------- */

/* The caret after a parent item is spaced with margin-left, which puts the gap
   on the wrong side once the row runs right-to-left. Use logical margins so it
   sits after the label in both directions. */
.main-menu > ul > li.menu-item-has-children > a::after {
    margin-left: 0;
    margin-inline-start: 6px;
    margin-inline-end: 0;
}

/* The mega panel is centred on the viewport with left:50% + translateX(-50%).
   That already drifts from the parent in English, and mirrors badly in Hebrew -
   the panel opens on the opposite side of the header from the item that was
   hovered. Anchor it to the menu row instead so it lines up the same way in
   both languages. */
.main-menu {
    position: relative;
}

.main-menu > ul > li.menu-item-has-children:hover > ul.sub-menu {
    left: auto;
    right: 0;
    transform: none;
}

/* --------------------------------------------------------------------------
   13. Step connector line (how-it-works, home page)
   --------------------------------------------------------------------------
   Reading order is unchanged in RTL (step 1 -> 2 -> 3), so the DOM-last item
   (step 3) is still correctly the one with no trailing connector - only the
   direction the line extends needs to flip, from the next visual box being
   to the right (LTR) to it being to the left (RTL). Same selector as the
   base rule, so it wins on source order alone with no specificity tricks.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .steps-grid ul li:not(:last-child)::after {
        left: auto;
        right: calc(50% + 42px);
        background: linear-gradient(270deg, var(--purple), rgba(177, 122, 255, 0.3));
    }
}

/* --------------------------------------------------------------------------
   14. Blog breadcrumb separator
   -------------------------------------------------------------------------- */
.breadcum-blog ul li:not(:last-child)::after {
    margin-left: 0;
    margin-right: 8px;
}

/* --------------------------------------------------------------------------
   15. Checkmark bullet lists (pricing features, feature bullets)
   --------------------------------------------------------------------------
   The icon is pinned with a physical `left:0` and the li reserves space with
   `padding-left`, so in RTL the checkmark stays on the left while the text
   flows to the right, leaving the icon orphaned away from its label.
   -------------------------------------------------------------------------- */
.pricing-card .pricing-features li,
.feature-detail-content .feature-bullets li {
    padding-left: 0;
    padding-right: 32px;
}

.pricing-card .pricing-features li::before,
.feature-detail-content .feature-bullets li::before {
    left: auto;
    right: 0;
}

/* --------------------------------------------------------------------------
   16. Blog search box icon / clear button
   -------------------------------------------------------------------------- */
.blog-search-icon {
    left: auto;
    right: 20px;
}

.blog-search-clear {
    right: auto;
    left: 16px;
}

input.blog-search-input {
    padding: 16px 52px 16px 50px;
}

/* --------------------------------------------------------------------------
   17. Blog card "continue reading" arrow
   --------------------------------------------------------------------------
   A right-pointing SVG chevron, plus a hover nudge to the right - both
   assume LTR reading direction. */
.blog-card-arrow svg {
    transform: scaleX(-1);
}

.blog-card:hover .blog-card-arrow {
    transform: translateX(-3px);
}

/* --------------------------------------------------------------------------
   18a. Blog search input and article body
   --------------------------------------------------------------------------
   Both were hard-pinned to LTR with !important, which was fine while every
   blog post was English-only but breaks completely once posts/search terms
   are in Hebrew/Arabic. */
.blog-search-input {
    direction: rtl !important;
    text-align: right !important;
}

.blog-details-section {
    direction: rtl !important;
    text-align: right !important;
}

/* Generic <select> elements were force-LTR site-wide; anything with
   Hebrew/Arabic option text needs to read the other way. */
select {
    direction: rtl;
    text-align: right;
}

/* Higher-specificity :focus state re-pins this to left, above the section 5
   fix for the unfocused button. */
.wpcf7-form .platform-select__button:focus {
    text-align: right;
}

/* --------------------------------------------------------------------------
   18. Blog pagination prev/next chevrons
   --------------------------------------------------------------------------
   paginate_links() is given fixed left-pointing/right-pointing SVGs for
   prev_text/next_text; flip both so "next" still points the way the reading
   order continues. */
.blog-pagination .page-numbers.prev svg,
.blog-pagination .page-numbers.next svg {
    transform: scaleX(-1);
}