/*
* ═══════════════════════════════════════════════════════════
* EzeeHire — Arabic RTL Design System | v1.0 MAY 2026
* Brand colors: #3467A7 (blue) · #1CAADD (cyan) · #F5F5F5 (bg)
*
* FONT LINKS — add once to Laravel layouts/app-ar.blade.php :
*
*
*
*
* ARABIC FONT: Tajawal (Google Fonts, free) — replaces DIN Next LT W23
* If DIN Next LT W23 is licensed, add @font-face BEFORE this file:
* @font-face { font-family:'DIN Next LT W23'; src:url('/fonts/DINNextLTW23-Regular.woff2'); }
* Then change --font-arabic below to 'DIN Next LT W23', 'Tajawal', sans-serif
*
* USAGE (add body class per page in Blade Arabic layout):
* Homepage:
* Candidate Profiles:
* Maid Visa:
*
* HOW THIS FILE WORKS:
* - Load ezeehire-global.css FIRST, then this file SECOND
* - This file overrides only what changes in RTL:
* direction, text-align, margin/padding flips, flex-direction,
* border-radius corners, icon positions, font-family
* - All colors, spacing tokens, and layout grid sizes are inherited
* from global.css — no duplication
* ═══════════════════════════════════════════════════════════
*/
/* ══════════════════════════════════════════════════════════
1. RTL DESIGN TOKENS — ARABIC OVERRIDES
══════════════════════════════════════════════════════════ */
:root {
/* Arabic font system */
--font-arabic: 'Tajawal', 'DIN Next LT W23', sans-serif;
--font-display: 'Tajawal', sans-serif; /* override: all headings → Tajawal in AR */
--font-body: 'Tajawal', sans-serif; /* override: all body → Tajawal in AR */
--font-accent: 'Tajawal', sans-serif; /* override: editorial → Tajawal in AR */
/* RTL layout helpers */
--start: right;
--end: left;
}
/* ══════════════════════════════════════════════════════════
2. BASE RTL DIRECTION
══════════════════════════════════════════════════════════ */
html[dir="rtl"],
.rtl {
direction: rtl;
text-align: right;
}
.rtl body {
font-family: var(--font-arabic);
}
/* All headings → Tajawal */
.rtl h1,
.rtl h2,
.rtl h3,
.rtl h4,
.rtl h5 {
font-family: var(--font-arabic);
letter-spacing: 0; /* Arabic doesn't use letter-spacing */
}
/* Reset letter-spacing globally for Arabic */
.rtl * {
letter-spacing: 0 !important;
}
/* Buttons */
.rtl .btn,
.rtl button {
font-family: var(--font-arabic);
letter-spacing: 0;
}
/* ══════════════════════════════════════════════════════════
3. NAVIGATION RTL
══════════════════════════════════════════════════════════ */
.rtl nav {
direction: rtl;
}
/* Logo: flip so text is on left of icon in RTL visual flow */
.rtl .nav-logo {
flex-direction: row-reverse;
}
/* Nav links: right-aligned, reverse order */
.rtl .nav-links {
flex-direction: row-reverse;
}
/* Nav actions: reverse */
.rtl .nav-actions {
flex-direction: row-reverse;
}
.rtl .nav-badge {
margin-right: 0;
margin-left: 6px;
}
/* Topbar (visa page) */
.rtl .topbar-inner {
flex-direction: row-reverse;
}
.rtl .topbar-actions {
flex-direction: row-reverse;
}
.rtl .topbar-msg {
text-align: right;
}
/* ══════════════════════════════════════════════════════════
4. EYEBROW / SECTION LABELS RTL
══════════════════════════════════════════════════════════ */
.rtl .eyebrow {
flex-direction: row-reverse;
justify-content: flex-end;
}
/* The decorative line after the eyebrow — flip to before in RTL */
.rtl .eyebrow::after {
display: none;
}
.rtl .eyebrow::before {
content: '';
flex: 1;
max-width: 44px;
height: 1px;
background: var(--cyan);
opacity: 0.4;
}
.rtl .eyebrow.centered::before {
display: none;
}
/* Section title text alignment */
.rtl .section-title {
text-align: right;
}
.rtl .section-title.centered {
text-align: center;
}
.rtl .section-title p {
text-align: right;
}
.rtl .section-title.centered p {
text-align: center;
margin: 0 auto;
}
/* ══════════════════════════════════════════════════════════
5. BUTTONS RTL
══════════════════════════════════════════════════════════ */
/* Icons inside buttons: flip order so icon appears on left in RTL visual */
.rtl .btn,
.rtl .btn-call,
.rtl .btn-wa,
.rtl .btn-cta-primary,
.rtl .btn-cta-wa,
.rtl .btn-modal-wa {
flex-direction: row-reverse;
}
.rtl .btn-group {
flex-direction: row-reverse;
}
/* Keep centered buttons centered */
.rtl .btn-full {
flex-direction: row-reverse;
justify-content: center;
}
/* ══════════════════════════════════════════════════════════
6. TRUST BAR / TRUST STRIP RTL
══════════════════════════════════════════════════════════ */
.rtl .trust-bar,
.rtl .trust-strip {
direction: rtl;
}
.rtl .trust-item,
.rtl .trust-item-bar {
flex-direction: row-reverse;
}
/* ══════════════════════════════════════════════════════════
7. FOOTER RTL
══════════════════════════════════════════════════════════ */
.rtl footer {
direction: rtl;
text-align: right;
}
.rtl .footer-grid {
direction: rtl;
}
.rtl .footer-logo {
flex-direction: row-reverse;
justify-content: flex-end;
}
.rtl .footer-contact-item {
flex-direction: row-reverse;
}
.rtl .footer-bottom {
flex-direction: row-reverse;
}
.rtl .footer-socials {
flex-direction: row-reverse;
}
.rtl .footer-seo-links {
flex-direction: row-reverse;
flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════════════
8. CONTACT DETAIL RTL
══════════════════════════════════════════════════════════ */
.rtl .contact-detail {
flex-direction: row-reverse;
text-align: right;
}
.rtl .contact-detail strong {
text-align: right;
}
/* ══════════════════════════════════════════════════════════
9. FORMS RTL
══════════════════════════════════════════════════════════ */
.rtl .form-group label,
.rtl .form-label {
text-align: right;
}
.rtl .form-group input,
.rtl .form-group select,
.rtl .form-group textarea,
.rtl .form-input,
.rtl .form-select,
.rtl .form-textarea {
direction: rtl;
text-align: right;
}
.rtl select {
background-position: left 12px center;
padding-left: 32px;
padding-right: 14px;
}
/* ══════════════════════════════════════════════════════════
10. FAQ RTL
══════════════════════════════════════════════════════════ */
.rtl .faq-q {
flex-direction: row-reverse;
text-align: right;
}
.rtl .faq-arrow,
.rtl .faq-icon {
margin-left: 0;
margin-right: 16px;
}
.rtl .faq-a {
text-align: right;
}
/* ══════════════════════════════════════════════════════════
11. PAGE: HOMEPAGE RTL (.page-home.rtl)
══════════════════════════════════════════════════════════ */
/* Hero */
.page-home.rtl .hero-content {
text-align: right;
}
.page-home.rtl .hero h1 {
text-align: right;
}
.page-home.rtl .hero p {
text-align: right;
}
.page-home.rtl .hero-ctas {
flex-direction: row-reverse;
justify-content: flex-start;
}
.page-home.rtl .hero-stats {
flex-direction: row-reverse;
}
.page-home.rtl .hero-badge {
flex-direction: row-reverse;
}
.page-home.rtl .hero-badge .dot {
margin-left: 0;
margin-right: 8px;
}
/* Hero visual card */
.page-home.rtl .hero-visual {
left: 5%;
right: auto;
}
.page-home.rtl .hero-card-title {
text-align: right;
}
.page-home.rtl .hero-trust-row {
flex-direction: row-reverse;
}
/* Packages */
.page-home.rtl .pkg-card {
text-align: right;
}
.page-home.rtl .pkg-badge-card {
left: 18px;
right: auto;
}
.page-home.rtl .pkg-features li {
flex-direction: row-reverse;
text-align: right;
}
.page-home.rtl .pkg-features li::before {
margin-left: 9px;
margin-right: 0;
}
.page-home.rtl .pkg-cta-row {
flex-direction: row-reverse;
}
/* Nationalities */
.page-home.rtl .nat-grid {
flex-direction: row-reverse;
}
/* Profile cards */
.page-home.rtl .profile-avatar-wrap {
flex-direction: row-reverse;
}
.page-home.rtl .profile-name,
.page-home.rtl .profile-nationality {
text-align: right;
}
.page-home.rtl .profile-salary {
left: 18px;
right: auto;
}
.page-home.rtl .profile-detail-label,
.page-home.rtl .profile-detail-val {
text-align: right;
}
.page-home.rtl .profile-skills {
flex-direction: row-reverse;
}
.page-home.rtl .profile-ctas {
flex-direction: row-reverse;
}
/* How it works */
.page-home.rtl .how-tabs {
flex-direction: row-reverse;
}
.page-home.rtl .steps-grid {
direction: rtl;
}
/* About */
.page-home.rtl .about-grid {
direction: rtl;
}
.page-home.rtl .about-point {
flex-direction: row-reverse;
text-align: right;
}
.page-home.rtl .about-point-title,
.page-home.rtl .about-point-desc {
text-align: right;
}
.page-home.rtl .about-metrics {
direction: rtl;
}
/* Testimonials */
.page-home.rtl .testi-quote {
text-align: right;
direction: ltr; /* keep quote mark visually correct */
}
.page-home.rtl .testi-text,
.page-home.rtl .testi-name,
.page-home.rtl .testi-loc {
text-align: right;
}
.page-home.rtl .testi-author {
flex-direction: row-reverse;
}
.page-home.rtl .testi-points li {
flex-direction: row-reverse;
text-align: right;
}
.page-home.rtl .testi-points li::before {
margin-left: 6px;
margin-right: 0;
}
/* Blog */
.page-home.rtl .blog-body {
text-align: right;
}
/* Contact */
.page-home.rtl .contact-grid {
direction: rtl;
}
.page-home.rtl .contact-ctas {
flex-direction: row-reverse;
}
/* ══════════════════════════════════════════════════════════
12. PAGE: CANDIDATE PROFILES RTL (.page-candidates.rtl)
══════════════════════════════════════════════════════════ */
/* Hero strip */
.page-candidates.rtl .page-hero {
text-align: right;
}
.page-candidates.rtl .breadcrumb {
flex-direction: row-reverse;
justify-content: flex-end;
}
.page-candidates.rtl .page-hero h1,
.page-candidates.rtl .page-hero p {
text-align: right;
}
.page-candidates.rtl .hero-stat-row {
flex-direction: row-reverse;
justify-content: flex-end;
}
/* Main layout — filters on the left in RTL (visually right side for Arabic) */
.page-candidates.rtl .main-layout {
direction: rtl;
grid-template-columns: 1fr 260px; /* flip: content left, filters right */
}
/* Filters panel */
.page-candidates.rtl .filters-header {
flex-direction: row-reverse;
}
.page-candidates.rtl .filter-group-title {
text-align: right;
}
.page-candidates.rtl .filter-option {
flex-direction: row-reverse;
text-align: right;
}
.page-candidates.rtl .active-filters {
flex-direction: row-reverse;
}
.page-candidates.rtl .filter-chip {
flex-direction: row-reverse;
}
/* Profile cards */
.page-candidates.rtl .p-card {
direction: rtl;
grid-template-columns: 1fr 200px; /* flip: details left, photo right */
}
.page-candidates.rtl .p-card-salary {
left: 14px;
right: auto;
}
.page-candidates.rtl .badge-new {
right: auto;
left: 14px;
}
.page-candidates.rtl .badge-inside,
.page-candidates.rtl .badge-outside {
left: 14px;
right: auto;
}
.page-candidates.rtl .p-card-name,
.page-candidates.rtl .p-card-nat {
text-align: right;
}
.page-candidates.rtl .p-card-body {
text-align: right;
}
.page-candidates.rtl .p-card-details {
flex-direction: row-reverse;
}
.page-candidates.rtl .p-detail-lbl,
.page-candidates.rtl .p-detail-val {
text-align: right;
}
.page-candidates.rtl .p-card-skills {
flex-direction: row-reverse;
}
.page-candidates.rtl .p-card-about {
text-align: right;
}
.page-candidates.rtl .p-card-footer {
flex-direction: row-reverse;
}
/* Modal */
.page-candidates.rtl .modal-header {
flex-direction: row-reverse;
}
.page-candidates.rtl .modal-name,
.page-candidates.rtl .modal-sub {
text-align: right;
}
.page-candidates.rtl .modal-body {
direction: rtl;
grid-template-columns: 1fr 220px; /* photo on right in RTL */
}
.page-candidates.rtl .modal-section-title {
text-align: right;
}
.page-candidates.rtl .modal-details {
direction: rtl;
}
.page-candidates.rtl .m-detail-lbl,
.page-candidates.rtl .m-detail-val {
text-align: right;
}
.page-candidates.rtl .modal-skills {
flex-direction: row-reverse;
}
.page-candidates.rtl .modal-about {
text-align: right;
}
.page-candidates.rtl .modal-cta-row {
flex-direction: row-reverse;
}
/* CTA strip */
.page-candidates.rtl .cta-strip {
flex-direction: row-reverse;
}
.page-candidates.rtl .cta-text h3,
.page-candidates.rtl .cta-text p {
text-align: right;
}
.page-candidates.rtl .cta-btns-row {
flex-direction: row-reverse;
}
/* ══════════════════════════════════════════════════════════
13. PAGE: MAID VISA RTL (.page-visa.rtl)
══════════════════════════════════════════════════════════ */
/* Hero */
.page-visa.rtl .hero-grid {
direction: rtl;
}
.page-visa.rtl .hero h1,
.page-visa.rtl .hero-sub {
text-align: right;
}
.page-visa.rtl .hero-badge {
flex-direction: row-reverse;
}
.page-visa.rtl .hero-price-block {
flex-direction: row-reverse;
}
.page-visa.rtl .hero-turnaround {
text-align: left; /* flip: was right, now left in RTL context */
}
.page-visa.rtl .hero-trust {
flex-direction: row-reverse;
}
.page-visa.rtl .hero-trust-item {
flex-direction: row-reverse;
}
.page-visa.rtl .hero-card-stats {
flex-direction: row-reverse;
}
.page-visa.rtl .hero-stat {
text-align: center; /* keep centered */
}
/* Trust strip */
.page-visa.rtl .trust-strip-inner {
flex-direction: row-reverse;
}
.page-visa.rtl .trust-item {
flex-direction: row-reverse;
}
/* Package */
.page-visa.rtl .package-header {
flex-direction: row-reverse;
}
.page-visa.rtl .package-header-left h2,
.page-visa.rtl .package-header-left p {
text-align: right;
}
.page-visa.rtl .package-grid {
direction: rtl;
}
.page-visa.rtl .package-item {
flex-direction: row-reverse;
text-align: right;
}
.page-visa.rtl .pkg-label,
.page-visa.rtl .pkg-desc {
text-align: right;
}
.page-visa.rtl .package-cta {
flex-direction: row-reverse;
}
/* Pricing card */
.page-visa.rtl .pricing {
direction: rtl;
}
/* Comparison table */
.page-visa.rtl .comp-table {
direction: rtl;
}
.page-visa.rtl .comp-table th,
.page-visa.rtl .comp-table td {
text-align: right;
}
.page-visa.rtl .comp-table th:first-child {
text-align: right;
}
.page-visa.rtl .comp-table td:nth-child(2),
.page-visa.rtl .comp-table td:nth-child(3) {
text-align: center; /* keep data columns centered */
}
/* How it works */
.page-visa.rtl .steps {
direction: rtl;
}
.page-visa.rtl .steps::before {
/* Flip gradient direction */
background: linear-gradient(270deg, var(--cyan), rgba(28,170,221,.2));
}
.page-visa.rtl .step h3,
.page-visa.rtl .step p {
text-align: center; /* keep centered for steps */
}
/* Documents */
.page-visa.rtl .doc-grid {
direction: rtl;
}
.page-visa.rtl .doc-card-header {
flex-direction: row-reverse;
text-align: right;
}
.page-visa.rtl .doc-card-header h3,
.page-visa.rtl .doc-card-header p {
text-align: right;
}
.page-visa.rtl .doc-list li {
flex-direction: row-reverse;
text-align: right;
}
/* Contact form */
.page-visa.rtl .contact-grid {
direction: rtl;
}
.page-visa.rtl .contact-info p {
text-align: right;
}
.page-visa.rtl .form-card h3 {
text-align: right;
}
/* ══════════════════════════════════════════════════════════
14. UTILITY: LTR ISLANDS IN RTL PAGES
Use .ltr-keep on elements that must stay LTR:
phone numbers, email addresses, URLs, prices, numbers
══════════════════════════════════════════════════════════ */
.rtl .ltr-keep,
.rtl [dir="ltr"] {
direction: ltr;
display: inline-block;
}
/* Numbers and prices always LTR */
.rtl .price-tag,
.rtl .hero-price,
.rtl .hero-turnaround-num,
.rtl .hero-stat-num,
.rtl .h-stat-num,
.rtl .about-metric-num,
.rtl .pkg-price {
direction: ltr;
display: inline-block;
}
/* ══════════════════════════════════════════════════════════
15. RTL RESPONSIVE OVERRIDES
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.page-candidates.rtl .main-layout {
grid-template-columns: 1fr 240px;
}
}
@media (max-width: 768px) {
.page-candidates.rtl .main-layout {
grid-template-columns: 1fr;
direction: rtl;
}
.page-candidates.rtl .p-card {
grid-template-columns: 1fr;
}
.page-home.rtl .hero-ctas,
.rtl .btn-group {
flex-direction: column;
align-items: flex-start;
}
.page-home.rtl .hero-stats {
flex-direction: row-reverse;
flex-wrap: wrap;
}
.rtl .footer-grid {
direction: rtl;
}
}
@media (max-width: 600px) {
.page-visa.rtl .hero-price-block {
flex-direction: column;
align-items: flex-end;
}
.rtl .btn-group {
flex-direction: column;
align-items: stretch;
}
}