/**
 * English Language Specific Styles
 *
 * This file contains styles that are specific to the English (LTR) version
 * of the application. These styles are dynamically loaded when the user
 * selects English as their language.
 */

/* ========================================
   1. TEXT DIRECTION & ALIGNMENT
   ======================================== */

body.lang-en {
  direction: ltr;
  text-align: left;
}

/* Default text alignment for English - FIXED: Removed invalid :not(.company-formation-hero *) selectors */
/* Note: :not() only accepts simple selectors, not descendant selectors like "parent *" */
/* Excluded classes: cf-premier-hub-*, cf-benefits-* for mobile centering */
/* CRITICAL: Exclude anchor children (a span, a *) to prevent overriding button text alignment */
.lang-en h1:not(.text-center):not(.lg\:text-center):not(.hero-title):not(.hero-title-text):not(.gate-pass-intro-title),
.lang-en h2:not(.text-center):not(.lg\:text-center):not(.cf-premier-hub-title):not(.cf-benefits-title),
.lang-en h3:not(.text-center):not(.lg\:text-center),
.lang-en h4:not(.text-center):not(.lg\:text-center),
.lang-en h5:not(.text-center):not(.lg\:text-center),
.lang-en h6:not(.text-center):not(.lg\:text-center),
.lang-en p:not(.text-center):not(.lg\:text-center):not(.hero-description):not(.cf-premier-hub-paragraph):not(.cf-benefits-paragraph):not(.cf-benefits-subtitle):not(.process-step-description),
.lang-en li:not(a li):not(a *),
.lang-en span:not(.hero-title-text):not(.hero-subtitle-text):not(.oman-step-number-text):not(.text-center):not(.oman-hero-title-span):not(.oman-hero-subtitle-span):not(.notary-hero-title-span):not(.notary-hero-subtitle-span):not(.debt-collection-hero-title-span) { text-align: left; }

/* CRITICAL OVERRIDE: GCC Hero section spans must inherit text-align, not forced left */
/* These rules MUST come after line 30 to override the global span left-alignment */
.lang-en .oman-hero-section h1 span,
.lang-en .oman-hero-section p span,
.lang-en .uae-hero-section h1 span,
.lang-en .kuwait-hero-section h1 span,
.lang-en .bahrain-hero-section h1 span,
.lang-en .saudi-hero-section h1 span,
.lang-en .debt-collection-hero-section h1 span,
html body.lang-en .oman-hero-section h1 span,
html body.lang-en .oman-hero-section p span,
html body.lang-en .uae-hero-section h1 span,
html body.lang-en .kuwait-hero-section h1 span,
html body.lang-en .bahrain-hero-section h1 span,
html body.lang-en .saudi-hero-section h1 span,
html body.lang-en .debt-collection-hero-section h1 span {
  text-align: inherit;
}

/* NUCLEAR OVERRIDE: Oman hero title spans - MUST be centered */
.oman-hero-title,
.oman-hero-title-span,
.oman-hero-subtitle-span,
.lang-en .oman-hero-title,
.lang-en .oman-hero-title-span,
.lang-en .oman-hero-subtitle-span,
html body .oman-hero-title,
html body .oman-hero-title-span,
html body .oman-hero-subtitle-span,
html body.lang-en .oman-hero-title,
html body.lang-en .oman-hero-title-span,
html body.lang-en .oman-hero-subtitle-span,
html body.ad-page .oman-hero-title,
html body.ad-page .oman-hero-title-span,
html body.ad-page .oman-hero-subtitle-span,
html body.ad-page.lang-en .oman-hero-title,
html body.ad-page.lang-en .oman-hero-title-span,
html body.ad-page.lang-en .oman-hero-subtitle-span {
  text-align: center !important;
}

/* CRITICAL: Company Formation Hero elements on mobile must be centered */
/* This overrides the general left-alignment rule above */
@media (max-width: 1023px) {
  .lang-en .company-formation-hero h1,
  .lang-en .company-formation-hero h2,
  .lang-en .company-formation-hero h3,
  .lang-en .company-formation-hero p,
  .lang-en .company-formation-hero span,
  .lang-en .company-formation-hero .hero-title,
  .lang-en .company-formation-hero .hero-title-text,
  .lang-en .company-formation-hero .hero-subtitle-text,
  .lang-en .company-formation-hero .hero-description {
    text-align: center !important;
  }

  /* CRITICAL: Oman Hero Section - center on mobile */
  .lang-en .oman-hero-section h1,
  .lang-en .oman-hero-section h1 span,
  .lang-en .oman-hero-section p,
  .lang-en .oman-hero-section .space-y-4,
  .lang-en .oman-hero-section .space-y-6,
  html body.lang-en .oman-hero-section h1,
  html body.lang-en .oman-hero-section h1 span,
  html body.lang-en .oman-hero-section p {
    text-align: center !important;
  }

  /* CRITICAL: All GCC Ad Page Hero Sections - center on mobile */
  .lang-en .uae-hero-section h1,
  .lang-en .uae-hero-section h1 span,
  .lang-en .kuwait-hero-section h1,
  .lang-en .kuwait-hero-section h1 span,
  .lang-en .bahrain-hero-section h1,
  .lang-en .bahrain-hero-section h1 span,
  .lang-en .saudi-hero-section h1,
  .lang-en .saudi-hero-section h1 span,
  .lang-en .debt-collection-hero-section h1,
  .lang-en .debt-collection-hero-section h1 span,
  html body.lang-en .uae-hero-section h1,
  html body.lang-en .uae-hero-section h1 span,
  html body.lang-en .kuwait-hero-section h1,
  html body.lang-en .kuwait-hero-section h1 span,
  html body.lang-en .bahrain-hero-section h1,
  html body.lang-en .bahrain-hero-section h1 span,
  html body.lang-en .saudi-hero-section h1,
  html body.lang-en .saudi-hero-section h1 span,
  html body.lang-en .debt-collection-hero-section h1,
  html body.lang-en .debt-collection-hero-section h1 span {
    text-align: center !important;
  }
}

/* High specificity override for document items - force left alignment */
html body.lang-en .document-item-text-left,
html body.lang-en p.document-item-text-left {
  text-align: left !important;
  direction: ltr !important;
}

/* Ultra-specific override for document types section */
html body.lang-en #document-types-section p.document-item-text-left,
html body.lang-en #document-types-section .document-item-text-left,
html body.lang-en #document-types-section .space-y-3 p {
  text-align: left !important;
  direction: ltr !important;
}

/* Data attribute targeting for English */
html body.lang-en #document-types-section [data-text-align="left"],
html body.lang-en #document-types-section p[data-text-align="left"],
html body.lang-en #document-types-section div[data-text-align="left"],
html body.lang-en #document-types-section [data-text-align="left"] p {
  text-align: left !important;
  direction: ltr !important;
}

/* Translation Services section English alignment - exclude CTA buttons */
html body.lang-en #translation-services-section [data-text-align="left"]:not(a):not(a *),
html body.lang-en #translation-services-section p[data-text-align="left"]:not(a *),
html body.lang-en #translation-services-section div[data-text-align="left"]:not(a):not(a *),
html body.lang-en #translation-services-section [data-text-align="left"] p:not(a *),
html body.lang-en #translation-services-section .space-y-2 p:not(a *),
html body.lang-en #translation-services-section .space-y-2 .flex p:not(a *) {
  text-align: left !important;
  direction: ltr !important;
}

/* CTA buttons should always be centered - highest priority */
html body.lang-en #translation-services-section a[href^="https://wa.me"],
html body.lang-en #translation-services-section a[href^="tel:"],
html body.lang-en #translation-services-section a[href^="https://wa.me"] *,
html body.lang-en #translation-services-section a[href^="tel:"] * {
  text-align: center !important;
}

/* Popup form buttons should always be centered - nuclear option */
html body.lang-en .fixed button[type="submit"],
html body.lang-en .fixed button[type="submit"] *,
html body.lang-en .fixed.inset-0 button,
html body.lang-en .fixed.inset-0 button *,
html body.lang-en .fixed button,
html body.lang-en .fixed button *,
html body.lang-en .fixed form button,
html body.lang-en .fixed form button * {
  text-align: center !important;
  justify-content: center !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ========================================
   CRITICAL: ALL LINKS/BUTTONS TEXT CENTERED
   This MUST come after general alignment rules
   ======================================== */

/* All anchor elements (links/buttons) - force centered text */
html body.lang-en a,
html body.lang-en a *,
html body.lang-en a span,
html body.lang-en a p,
html body.lang-en button,
html body.lang-en button *,
html body.lang-en button span {
  text-align: center !important;
}

/* Exception: Footer links should be left-aligned on desktop */
@media (min-width: 768px) {
  html body.lang-en footer a,
  html body.lang-en footer a *,
  html body.lang-en footer a span,
  html body.lang-en footer a p,
  html body.lang-en footer a div,
  html body.lang-en footer .text-center {
    text-align: left !important;
  }
}

/* ========================================
   2. FONT FAMILIES
   ======================================== */

/* English font stack optimized for readability */
body.lang-en {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

/* Headings with specific English fonts */
.lang-en h1,
.lang-en h2,
.lang-en h3,
.lang-en h4,
.lang-en h5,
.lang-en h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ========================================
   3. SPACING & MARGINS (LTR)
   ======================================== */

/* Left-to-right specific spacing */
.lang-en .text-with-icon {
  padding-left: 0.5rem;
  padding-right: 0;
}

.lang-en .icon-before {
  margin-right: 0.5rem;
  margin-left: 0;
}

.lang-en .icon-after {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Navigation items */
.lang-en .nav-item {
  margin-right: 1.5rem;
  margin-left: 0;
}

.lang-en .nav-item:last-child {
  margin-right: 0;
}

/* Lists */
.lang-en ul,
.lang-en ol {
  padding-left: 1.5rem;
  padding-right: 0;
}

/* ========================================
   4. FORMS & INPUTS
   ======================================== */

.lang-en input,
.lang-en textarea,
.lang-en select {
  text-align: left;
}

.lang-en input[type="text"],
.lang-en input[type="email"],
.lang-en input[type="tel"],
.lang-en input[type="number"],
.lang-en textarea {
  direction: ltr;
}

/* Form labels */
.lang-en label {
  text-align: left;
}

/* Placeholder text */
.lang-en ::placeholder {
  text-align: left;
}

/* ========================================
   5. BUTTONS & INTERACTIVE ELEMENTS
   ======================================== */

.lang-en button {
  text-align: center;
}

/* Button with icon */
.lang-en .btn-icon-left {
  padding-left: 2.5rem;
}

.lang-en .btn-icon-right {
  padding-right: 2.5rem;
}

/* ========================================
   6. NAVIGATION & MENUS
   ======================================== */

/* Header navigation */
.lang-en .header-nav {
  text-align: left;
}

/* Dropdown menus */
.lang-en .dropdown-menu {
  left: 0;
  right: auto;
  text-align: left;
}

/* Breadcrumbs */
.lang-en .breadcrumb {
  direction: ltr;
}

.lang-en .breadcrumb-item::before {
  content: "/";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ========================================
   7. CARDS & CONTAINERS
   ======================================== */

.lang-en .card,
.lang-en .container {
  text-align: left;
}

/* Card headers */
.lang-en .card-header {
  text-align: left;
}

/* ========================================
   8. TABLES
   ======================================== */

.lang-en table {
  text-align: left;
}

.lang-en th,
.lang-en td {
  text-align: left;
}

/* ========================================
   9. MODALS & DIALOGS
   ======================================== */

.lang-en .modal,
.lang-en .dialog {
  text-align: left;
}

.lang-en .modal-header,
.lang-en .dialog-header {
  text-align: left;
}

/* ========================================
   10. TOOLTIPS & POPOVERS
   ======================================== */

.lang-en .tooltip,
.lang-en .popover {
  text-align: left;
}

/* ========================================
   11. ANIMATIONS & TRANSITIONS
   ======================================== */

/* Slide animations for LTR */
.lang-en .slide-enter {
  transform: translateX(-100%);
}

.lang-en .slide-enter-active {
  transform: translateX(0);
}

.lang-en .slide-exit {
  transform: translateX(0);
}

.lang-en .slide-exit-active {
  transform: translateX(-100%);
}

/* ========================================
   12. RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
  .lang-en .mobile-nav {
    text-align: left;
  }
}

/* ========================================
   13. CUSTOM COMPONENTS
   ======================================== */

/* Sidebar */
.lang-en .sidebar {
  left: 0;
  right: auto;
}

/* Floating action button */
.lang-en .fab {
  right: 1rem;
  left: auto;
}

/* Badge positioning */
.lang-en .badge {
  right: -0.5rem;
  left: auto;
}

/* ========================================
   14. UTILITY CLASSES
   ======================================== */

.lang-en .text-start {
  text-align: left !important;
}

.lang-en .text-end {
  text-align: right !important;
}

.lang-en .float-start {
  float: left !important;
}

.lang-en .float-end {
  float: right !important;
}

/* ========================================
   15. PRINT STYLES
   ======================================== */

@media print {
  .lang-en {
    direction: ltr;
    text-align: left;
  }
}

/* ========================================
   16. COMPANY FORMATION HERO - MOBILE CENTERING
   ======================================== */
/* CRITICAL: Override English left-alignment for hero description on mobile */
/* This must come AFTER the general paragraph rules to take precedence */

@media (max-width: 1023px) {
  /* Hero description - center on mobile */
  .lang-en .company-formation-hero p.hero-description,
  .lang-en .company-formation-hero .hero-description,
  .lang-en .company-formation-hero p.text-xl,
  html body.lang-en .company-formation-hero p.hero-description,
  html body.lang-en .company-formation-hero .hero-description,
  html body.lang-en .company-formation-hero p.text-xl.text-white,
  body.lang-en .company-formation-hero p.hero-description,
  body.lang-en .company-formation-hero .hero-description {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* Hero title and subtitle - center on mobile */
  .lang-en .company-formation-hero .hero-title-text,
  .lang-en .company-formation-hero .hero-subtitle-text,
  .lang-en .company-formation-hero h1,
  html body.lang-en .company-formation-hero .hero-title-text,
  html body.lang-en .company-formation-hero .hero-subtitle-text,
  html body.lang-en .company-formation-hero h1 {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* Hero badges - center on mobile */
  .lang-en .company-formation-hero .company-formation-hero-badges,
  html body.lang-en .company-formation-hero .company-formation-hero-badges {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Hero badge spans - center on mobile */
  .lang-en .company-formation-hero .company-formation-hero-badge span,
  html body.lang-en .company-formation-hero .company-formation-hero-badge span {
    text-align: center !important;
  }
}

/* ========================================
   17. PREMIER HUB & BENEFITS SECTIONS - MOBILE CENTERING
   ======================================== */
/* CRITICAL: Center Premier Hub and Benefits section text on mobile */
/* This must come AFTER the general paragraph rules to take precedence */

@media (max-width: 1023px) {
  /* ========== PREMIER HUB SECTION ========== */
  /* Premier Hub Title - center on mobile */
  .lang-en .cf-premier-hub-section .cf-premier-hub-title,
  .lang-en .cf-premier-hub-title,
  html body.lang-en .cf-premier-hub-title {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* Premier Hub Paragraphs - center on mobile */
  .lang-en .cf-premier-hub-section .cf-premier-hub-paragraph,
  .lang-en .cf-premier-hub-paragraph,
  html body.lang-en .cf-premier-hub-paragraph {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* Premier Hub Content Wrapper - center on mobile */
  .lang-en .cf-premier-hub-section .cf-premier-hub-content,
  .lang-en .cf-premier-hub-section .cf-premier-hub-paragraphs,
  html body.lang-en .cf-premier-hub-content,
  html body.lang-en .cf-premier-hub-paragraphs {
    text-align: center !important;
  }

  /* Premier Hub Logos - center on mobile */
  .lang-en .cf-premier-hub-section .cf-premier-hub-logos,
  html body.lang-en .cf-premier-hub-logos {
    justify-content: center !important;
  }

  /* ========== BENEFITS SECTION ========== */
  /* Benefits Title - center on mobile */
  .lang-en .cf-benefits-section .cf-benefits-title,
  .lang-en .cf-benefits-title,
  html body.lang-en .cf-benefits-title {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* Benefits Subtitle - center on mobile */
  .lang-en .cf-benefits-section .cf-benefits-subtitle,
  .lang-en .cf-benefits-subtitle,
  html body.lang-en .cf-benefits-subtitle {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* Benefits Paragraphs - center on mobile */
  .lang-en .cf-benefits-section .cf-benefits-paragraph,
  .lang-en .cf-benefits-paragraph,
  html body.lang-en .cf-benefits-paragraph {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* Benefits Content Wrapper - center on mobile */
  .lang-en .cf-benefits-section .cf-benefits-content,
  .lang-en .cf-benefits-section .cf-benefits-mobile-content,
  .lang-en .cf-benefits-section .cf-benefits-descriptions,
  html body.lang-en .cf-benefits-content,
  html body.lang-en .cf-benefits-mobile-content,
  html body.lang-en .cf-benefits-descriptions {
    text-align: center !important;
  }

  /* Benefits Badge - center on mobile */
  .lang-en .cf-benefits-section .cf-benefits-badge-wrapper,
  html body.lang-en .cf-benefits-badge-wrapper {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
  }

  .lang-en .cf-benefits-section .cf-benefits-badge,
  html body.lang-en .cf-benefits-badge {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* GATE PASS IMPORTANT NOTES - LTR ALIGNMENT */
html body.lang-en .gate-pass-important-notes h3,
html body.lang-en .gate-pass-important-notes p {
  text-align: left !important;
}

/* GATE PASS INDUSTRIAL AREAS - LTR ALIGNMENT */
html body.lang-en .gate-pass-industrial-areas h3,
html body.lang-en .gate-pass-industrial-areas p {
  text-align: left !important;
}

/* GATE PASS TYPES - LTR ALIGNMENT */
html body.lang-en .gate-pass-types h3,
html body.lang-en .gate-pass-types p,
html body.lang-en .gate-pass-types li {
  text-align: left !important;
}

html body.lang-en .gate-pass-types li span {
  text-align: left !important;
}

/* GATE PASS REQUIREMENTS - FORCE LEFT ALIGNMENT */
html body.lang-en .gate-pass-requirements,
html body.lang-en .gate-pass-requirements ul,
html body.lang-en .gate-pass-requirements li,
html body.lang-en .gate-pass-requirements span {
  text-align: left !important;
}

/* Override text-center cascade for requirements */
html body.lang-en .text-center .gate-pass-requirements,
html body.lang-en .text-center .gate-pass-requirements ul,
html body.lang-en .text-center .gate-pass-requirements li,
html body.lang-en .text-center .gate-pass-requirements span {
  text-align: left !important;
}

/* Mobile-specific overrides */
@media (max-width: 767px) {
  /* Prevent card from centering children */
  html body.lang-en div.gate-pass-card {
    display: block !important;
    text-align: left !important;
  }
  
  /* Remove all centering effects from card children */
  html body.lang-en .gate-pass-card > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Force requirements container to left edge */
  html body.lang-en .gate-pass-requirements-container {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
  }
  
  /* Ultra-specific override - beats all other rules */
  html body.lang-en div.gate-pass-card div ul.gate-pass-requirements,
  html body.lang-en div.bg-white.gate-pass-card ul.gate-pass-requirements {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  html body.lang-en div.gate-pass-card div ul.gate-pass-requirements li,
  html body.lang-en div.bg-white.gate-pass-card ul.gate-pass-requirements li {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  
  html body.lang-en div.gate-pass-card div ul.gate-pass-requirements li span,
  html body.lang-en div.bg-white.gate-pass-card ul.gate-pass-requirements li span {
    text-align: left !important;
  }
  
  html body.lang-en .gate-pass-card .gate-pass-requirements,
  html body.lang-en .gate-pass-card .gate-pass-requirements ul,
  html body.lang-en .gate-pass-card .gate-pass-requirements li,
  html body.lang-en .gate-pass-card .gate-pass-requirements span {
    text-align: left !important;
  }
  
  html body.lang-en .gate-pass-card .text-center .gate-pass-requirements,
  html body.lang-en .gate-pass-card .gate-pass-requirements ul,
  html body.lang-en .gate-pass-card .gate-pass-requirements li,
  html body.lang-en .gate-pass-card .gate-pass-requirements span {
    text-align: left !important;
  }
  
  /* Force flex alignment on mobile */
  html body.lang-en .gate-pass-card .gate-pass-requirements {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  /* Force list items to align left */
  html body.lang-en .gate-pass-card .gate-pass-requirements li {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  
  /* Force UL container */
  html body.lang-en .gate-pass-card ul.gate-pass-requirements {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* GATE PASS SERVICES GRID - LTR ALIGNMENT */
html body.lang-en .gate-pass-services-grid h3,
html body.lang-en .gate-pass-services-grid p {
  text-align: left !important;
}

/* ============================================== */
/* EOR PROCESS TITLE - MUST BE CENTERED          */
/* ============================================== */
.eor-process-title,
h2.eor-process-title,
.lang-en .eor-process-title,
.lang-en h2.eor-process-title,
html body.lang-en .eor-process-title,
html body.lang-en h2.eor-process-title,
html body.lang-en .container .eor-process-title,
html body.lang-en div .eor-process-title {
  text-align: center !important;
  text-align-last: center !important;
}