/*
Theme Name: Archimak
Description: Archimak - Right to Left (RTL) Stylesheet
*/

/* Core WordPress Alignment Classes */
.alignleft { float: right; margin-right: 0; margin-left: 20px !important; }
.alignright { float: left; margin-left: 0; margin-right: 20px !important; }

/* General RTL Overrides */
.float-left { float: right !important; }
.float-right { float: left !important; }
.text-left { text-align: right !important; }
.text-right { text-align: left !important; }
ul, ol { margin-left: 0 !important; margin-right: 0px !important; }

/* Header/Menu Fixes */
.main-header { left: auto !important; right: 0 !important; padding: 0 0 0 90px !important; }
#wrapper { left: 0 !important; right: 90px !important; }
.top-header { left: 0 !important; right: -270px !important; width: calc(100% - 90px) !important; }
.logo-holder { float: right !important; }
.logo-holder img { height: auto !important; width: 150px !important; margin-right: 20px !important; }
.page-subtitle { float: right !important; margin-left: 0 !important; margin-right: 120px !important; }
.page-subtitle:before { left: auto !important; right: -70px !important; }
.nav-holder.vis-m { transform: translateX(0) !important; }
.nav-holder.vis-m ~ #wrapper { transform: none !important; -webkit-transform: none !important; }
.nav-holder-line { left: auto !important; right: 190px !important; }
.nav-title { left: 0 !important; right: 180px !important; }
.nav-title span { float: right !important; }
.nav-scroll-bar-wrap { padding: 70px 150px 0 40px !important; }
.logo_menu { float: right !important; margin: 0 30px 90px 0 !important; }
nav.nav-inner { float: right !important; }
.sliding-menu ul { float: right !important; }
.sliding-menu li { float: right !important; }
.sliding-menu a { float: right !important; padding: 0 20px 0 0 !important; text-align: right !important; }
.sliding-menu li a:after { left: auto !important; right: -10px !important; }
.sliding-menu a i { float: right !important; padding-right: 0 !important; padding-left: 20px !important; }
.sliding-menu a.back:before { content: '\f105' !important; }
.submen-dec:before { content: '\f104' !important; right: auto !important; left: 0 !important; }
.single-page-fixed-row-link { float: left !important; margin-right: 0 !important; margin-left: 120px !important; text-align: right !important; }
.single-page-fixed-row-link i { padding-right: 0 !important; padding-left: 20px !important; }
.single-page-fixed-row-link span:before { left: -80px !important; right: 70% !important; }
.single-page-fixed-row-link:hover span:before { left: -30% !important; }
.nav-button { left: auto !important; right: 28px !important; }

/* Rozhin's touch down etc. */
.hero-decor-let { right: auto !important; left: 33px !important; bottom: 450px !important; transform: rotate(-90deg) !important; color: #ffffff !important; font-size: 24px !important; }
.hero-decor-let div { right: 0 !important; }
.fwc-dec_top, .fwc-dec_right { right: auto !important; left: 45px !important; }
.start-btn_2 { right: 0 !important; left: 0 !important; }
.fixed-column-wrap { right: unset !important; left: 0 !important; }
.column-wrap { float: right !important; }
.main-footer { left: 0px !important; }

/* RTL sliding menu */
html[dir="rtl"] .nav-holder, html[dir="rtl"] .nav-holder-dec { left: auto; right: -600px; }
html[dir="rtl"] .nav-button.cmenu ~ .nav-holder, html[dir="rtl"] .nav-button.cmenu ~ .nav-holder-dec { left: auto !important; right: 0 !important; }
html[dir="rtl"] .nav-scroll-bar-wrap { direction: rtl; }

/* Text alignment fixes */
.fet_pr-carousel_title h2, .video-promo-text h3, .fet_pr-carousel_title p, .section-title h2, .section-title p, p, .serv-text, .serv-item h4, .text-block_subtitle, .pr-det-title h3, .accordion-inner, .accordion a.toggle, .contact-details h4, .contact-details li, .contact-details span, .contact-details a { text-align: right !important; }

/* RTL Button arrow on left */
.btn { padding: 14px 40px 14px 60px !important; font-size: 18px; }
.btn:before { content: "\f104" !important; left: 0 !important; right: auto !important; }

/* Font & spacing */
body, html, p, span, a, li, div, h1, h2, h3, h4, h5, h6 { font-family: 'Rubik', sans-serif !important; }
.single-page-fixed-row-link span, .page-scroll-nav li a, .services-nav li a, .start-btn, .hero-decor-let, .btn, .vc-section button, .custom-form button, .vc-section, .grid-det_category a, .fet_pr-carousel-box-text a, .widget-posts-descr a, .widget-posts-date, .policy-box, .footer-header, .page-subtitle, .menu-button-text, .sliding-menu a, .nav-title span, .folio-btn-tooltip, .share-icon, .footer-contacts li, .subcribe-form input.enteremail, .subcribe-form .subscribe-button, .scroll-notifer, .hhw_header, .hero_btn, .scroll-down-wrap span, .grid-det-item a, .inline-filter .gallery-filters a, .show-filter, .show-filter2, .pr-det_btn, .photo-info-btn_tooltip, .show-info span, .pr-list li, .parallax-header span, .parallax-header a, .content-nav li a span, .det-carousel-title h4, .accordion a.toggle, .custom-skillbar-title span, .contact-details li, .custom-form select, .section-title p, .testi-link, .post-tooltip, .post-link, .post-header span, .post-header a, .blog-btn-filter ul li a, .blog-btn, .pagination a, .post-opt li, .comment-meta, .comment-meta a, .error-wrap p, .order-wrap h3, .team-link, .team-info h4, .team-social_single_title, .inline-facts-wrap h6, .serv-price-wrap, .fet_pr-carousel_title h2, .video-promo-text h3 { letter-spacing: normal !important; }

/* CF7 RTL fixes */
.cf7-rtl { direction: rtl !important; text-align: right !important; }
.cf7-rtl input, .cf7-rtl textarea { direction: rtl !important; text-align: right !important; }
.cf7-rtl input[type="email"], .cf7-rtl input[type="tel"] { direction: ltr !important; text-align: right !important; }
.cf7-rtl ::placeholder { direction: rtl !important; text-align: right !important; }
.cf7-rtl select { direction: rtl !important; text-align: right !important; padding-left: 46px !important; padding-right: 18px !important; background-position: left 16px center !important; }
.cf7-rtl .select-holder:after, .cf7-rtl .select-holder i, .cf7-rtl .select-holder svg { left: 16px !important; right: auto !important; pointer-events: none !important; }
.cf7-rtl .select-holder:after { display: none !important; }
.wpcf7-not-valid-tip { color: #85081f !important; }

/* RTL scroll indicator to left */
html[dir="rtl"] .hero-scroll-down-notifer, html[dir="rtl"] .scroll-down-wrap { right: auto !important; left: 15px !important; }
html[dir="rtl"] .scroll-down-wrap .mousey { right: auto !important; left: 0 !important; }
div.fixed-column-wrap_bg::before { right: auto !important; left: 0 !important; }
.fixed-column-wrap_title, .scroll-notifer { text-align: right !important; }
.fixed-column-wrap_title:before { display: none !important; }

/* Gallery */
.pr-list li, .gallery-item, .gallery-item.gallery-item-second, .four-column .gallery-item, .four-column .gallery-item.gallery-item-second, .fs-grid-wrap .gallery-item, .fs-grid-wrap .gallery-item-second, .two-column .gallery-item { width: 50% !important; padding: 20px !important; }

/* =========================================================
   MOBILE RTL FIXES (non-desktop only)
   ========================================================= */
@media (max-width: 1064px) {
    html[dir="rtl"] #wrapper { left: 0 !important; right: 0 !important; width: 100% !important; }
    html[dir="rtl"] .top-header { left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; -webkit-transform: none !important; z-index: 999999 !important; }
    html[dir="rtl"] .main-header { left: auto !important; right: 0 !important; padding: 0 !important; z-index: 999999 !important; }
    html[dir="rtl"] .nav-holder.vis-m ~ #wrapper { transform: none !important; -webkit-transform: none !important; }
    html[dir="rtl"] body #wrapper, html[dir="rtl"] body .content, html[dir="rtl"] body .content-holder, html[dir="rtl"] body .main-content, html[dir="rtl"] body .scroll-content {
        transform: none !important; -webkit-transform: none !important; left: 0 !important; right: 0 !important; width: 100% !important;
        opacity: 1 !important; visibility: visible !important; display: block !important;
    }
    html[dir="rtl"] .nav-button, html[dir="rtl"] .nav-button.but-hol { left: 28px !important; right: auto !important; z-index: 1000000 !important; opacity: 1 !important; visibility: visible !important; display: block !important; }
    html[dir="rtl"] .nav-scroll-bar-wrap { padding: 70px 20px 0 20px !important; }
    html[dir="rtl"] .sliding-menu a { padding-right: 10px !important; padding-left: 0 !important; }
    html[dir="rtl"] .sliding-menu a i { padding-left: 12px !important; padding-right: 0 !important; }
    html[dir="rtl"] .hero-decor-let { bottom: 380px !important; left: 25px !important; right: auto !important; }
    html[dir="rtl"] .fixed-column-wrap, html[dir="rtl"] .fixed-column, html[dir="rtl"] .fixed-column-wrap_content, html[dir="rtl"] .fixed-column-wrap_bg {
        position: relative !important; left: auto !important; right: auto !important; height: auto !important; min-height: 0 !important;
    }
    html[dir="rtl"] .btn { padding: 10px 125px 14px 60px !important; font-size: 18px; }
    html[dir="rtl"], html[dir="rtl"] body { overflow-x: hidden !important; max-width: 100% !important; }
    html[dir="rtl"] #wrapper, html[dir="rtl"] .content, html[dir="rtl"] .content-holder, html[dir="rtl"] .main-content, html[dir="rtl"] .scroll-content, html[dir="rtl"] .main-footer, html[dir="rtl"] footer {
        overflow-x: hidden !important; max-width: 100% !important;
    }
    html[dir="rtl"] .main-footer:before, html[dir="rtl"] .main-footer:after, html[dir="rtl"] footer:before, html[dir="rtl"] footer:after {
        max-width: 100% !important; left: 0 !important; right: auto !important; transform: none !important;
    }
}

/* Transitional tablet range fix */
@media (min-width: 1025px) and (max-width: 1064px) {
    html[dir="rtl"] #wrapper, html[dir="rtl"] .top-header, html[dir="rtl"] .main-header, html[dir="rtl"] .content-holder, html[dir="rtl"] .main-content, html[dir="rtl"] .scroll-content {
        left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-right: 0 !important;
        transform: none !important; -webkit-transform: none !important;
    }
    html[dir="rtl"] .nav-holder, html[dir="rtl"] .nav-holder-dec { right: -100% !important; visibility: hidden !important; opacity: 0 !important; }
    html[dir="rtl"] body, html[dir="rtl"] #wrapper { overflow-x: hidden !important; background: #ffffff !important; }
}

/* Footer logo mobile */
@media (max-width: 1024px) {
  html[dir="rtl"] .footer-logo img { max-width: 120px !important; width: 100% !important; height: auto !important; }
  html[dir="rtl"] .footer-logo { margin-right: 0 !important; text-align: center !important; }
}

/* =========================================================
   RTL Leaflet Map â€“ Zoom buttons styled & positioned like LTR
   ========================================================= */
@media (max-width: 1064px) {

    /* Force LTR inside map container */
    html[dir="rtl"] .leaflet-container,
    html[dir="rtl"] .leaflet-container *,
    html[dir="rtl"] #map-single,
    html[dir="rtl"] .map-container {
        direction: ltr !important;
        text-align: left !important;
        unicode-bidi: plaintext !important;
    }

    /* Make map container tall enough (matches LTR) */
    html[dir="rtl"] .fixed-column-wrap.fcw_fw,
    html[dir="rtl"] .fixed-column-wrap,
    html[dir="rtl"] .fixed-column-wrap_bg,
    html[dir="rtl"] .map-container,
    html[dir="rtl"] #map-single {
        height: 80vh !important;
        min-height: 560px !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* The key fix: position .leaflet-top.leaflet-left exactly like in LTR */
    html[dir="rtl"] .leaflet-top.leaflet-left {
        left: 10px !important;
        top: 10px !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 1000 !important;
    }

    /* Zoom bar wrapper â€“ no background */
    html[dir="rtl"] .leaflet-control-zoom.leaflet-bar {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Individual zoom buttons â€“ match LTR style */
    html[dir="rtl"] .leaflet-control-zoom a,
    html[dir="rtl"] .leaflet-control-zoom-in,
    html[dir="rtl"] .leaflet-control-zoom-out {
        display: block !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        margin: 0 0 4px 0 !important;
        background: #ffffff !important;
        color: #333333 !important;
        font-size: 22px !important;
        font-weight: bold !important;
        text-align: center !important;
        border: 2px solid #cccccc !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
    }

    /* Hover effect â€“ typical LTR */
    html[dir="rtl"] .leaflet-control-zoom a:hover {
        background: #f5f5f5 !important;
        border-color: #999999 !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.3) !important;
    }

    /* âˆ’ button below + */
    html[dir="rtl"] .leaflet-control-zoom-out {
        margin-top: 4px !important;
    }

    /* Neutralize transforms */
    html[dir="rtl"] .leaflet-map-pane,
    html[dir="rtl"] .leaflet-tile-pane,
    html[dir="rtl"] .leaflet-marker-pane,
    html[dir="rtl"] .leaflet-control-container {
        transform: translate3d(0px, 0px, 0px) !important;
        -webkit-transform: translate3d(0px, 0px, 0px) !important;
        left: 0 !important;
        right: auto !important;
    }

    /* Marker centering */
    html[dir="rtl"] .leaflet-marker-icon {
        margin-left: -20px !important;
        margin-top: -20px !important;
    }
}

/* RTL Contact Page Text Alignment â€“ non-desktop only */
@media (max-width: 1064px) {
    html[dir="rtl"] .contact-details,
    html[dir="rtl"] .contact-details h4,
    html[dir="rtl"] .contact-details ul,
    html[dir="rtl"] .contact-details li,
    html[dir="rtl"] .contact-details span,
    html[dir="rtl"] .contact-details a {
        text-align: right !important;
        direction: rtl !important;
    }
    html[dir="rtl"] .contact-details ul {
        padding: 0 20px 0 0 !important;
        margin: 0 !important;
    }
}


/* =========================================================
   FIX: contact-details <span> disappearing in RTL mobile/tablet
   ========================================================= */
@media (max-width: 1064px) {
    html[dir="rtl"] .contact-details,
    html[dir="rtl"] .contact-details ul,
    html[dir="rtl"] .contact-details li {
        direction: rtl !important;
        text-align: right !important;
        overflow: visible !important;
        width: 100% !important;
        display: block !important;
    }

    /* Force span to stay visible and correctly positioned */
    html[dir="rtl"] .contact-details li span {
        display: inline-block !important;       /* instead of float */
        float: none !important;                 /* remove any float */
        width: auto !important;
        min-width: 80px !important;             /* prevent collapse */
        margin-right: 10px !important;          /* space after label in RTL */
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        text-align: right !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
    }

    /* Ensure the link/text after span stays in flow */
    html[dir="rtl"] .contact-details li a,
    html[dir="rtl"] .contact-details li span + * {
        display: inline !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 5px !important;
    }

    /* Prevent any parent clipping */
    html[dir="rtl"] .map-view-wrap,
    html[dir="rtl"] .map-view-wrap_item {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* =========================================================
   FIX: Align contact-details <span> labels like h4 in RTL mobile/tablet
   ========================================================= */
@media (max-width: 1064px) {
    html[dir="rtl"] .contact-details {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    html[dir="rtl"] .contact-details h4 {
        margin-right: 0 !important;
        padding-right: 0 !important;
        text-align: right !important;
        margin-bottom: 25px !important; /* space between title and list */
    }

    html[dir="rtl"] .contact-details li {
        display: flex !important;
        align-items: baseline !important;
        justify-content: flex-end !important; /* push content to right in RTL */
        margin-bottom: 18px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* Make <span> look & space like part of h4 style */
    html[dir="rtl"] .contact-details li span {
        display: inline-block !important;
        min-width: 100px !important;           /* adjust this value to match your h4 width feel */
        margin-right: 0 !important;
        margin-left: 12px !important;          /* space between label and value in RTL */
        padding-right: 0 !important;
        padding-left: 0 !important;
        font-weight: 600 !important;           /* same weight as h4 if needed */
        text-align: right !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* The value/link after span */
    html[dir="rtl"] .contact-details li a,
    html[dir="rtl"] .contact-details li span + * {
        flex-grow: 1 !important;
        text-align: right !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Prevent any wrapping issues */
    html[dir="rtl"] .contact-details ul {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}


/* ========================================================
   RTL mobile/tablet – Footer logo & header text alignment
   ======================================================== */
@media (max-width: 1064px) {
    html[dir="rtl"] .footer-logo {
        float: right !important;           /* pushes logo to right side in RTL flow */
        /* Optional: better modern approach if float causes issues */
        /* display: flex; justify-content: flex-end; */
    }

    html[dir="rtl"] .footer-logo img {
        margin: 0 !important;              /* reset any left/right margin that fights RTL */
        /* margin-left: auto !important; */ /* alternative if using flex */
    }

    html[dir="rtl"] .footer-header {
        text-align: right !important;      /* Arabic text should start from right */
        direction: rtl !important;         /* usually already set, but safety */
    }

    /* If .footer-header contains links, lists, or inline elements */
    html[dir="rtl"] .footer-header a,
    html[dir="rtl"] .footer-header li,
    html[dir="rtl"] .footer-header p,
    html[dir="rtl"] .footer-header span {
        text-align: right !important;
    }

    /* Prevent centering or left alignment sneaking in */
    html[dir="rtl"] .footer-header.text-center,
    html[dir="rtl"] .footer-header.center {
        text-align: right !important;
    }
}


/* ========================================================
   RTL mobile/tablet – Widget recent posts layout fix
   ======================================================== */
@media (max-width: 1064px) {
  .widget-posts-img {
        float: right !important;
    }

    .widget-posts-descr {
        float: right !important;
        padding-right: 20px !important;
        padding-left: auto !important;
        text-align: right !important;
    }
	
	.widget-posts-descr a {
	float: auto !important;
	}

}