/* ==========================================================================
   Hafiz Obaidullah — Enterprise i18n, RTL & 5-Screen Responsive Framework
   Tested & Optimized for Google Translate with seamless RTL and LTR support
   ========================================================================== */

/* Load Arabic Fonts for high-fidelity typography */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* --- RTL Root Styles & Typography --- */
html[dir="rtl"],
html[dir="rtl"] body,
body.rtl-mode {
  direction: rtl;
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', 'Cairo', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .nav-title,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .btn-action,
html[dir="rtl"] .btn-nav,
html[dir="rtl"] .ho-modal-title {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', 'Archivo', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0 !important;
}

html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .mono,
html[dir="rtl"] .nav-sub,
html[dir="rtl"] .hero-tag,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .price-tag,
html[dir="rtl"] .stat-num {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
}

/* --- Navigation Bar RTL Adjustments --- */
html[dir="rtl"] .nav-brand-text {
  text-align: right !important;
}

html[dir="rtl"] .cart-badge {
  margin-left: 0 !important;
  margin-right: 4px !important;
}

html[dir="rtl"] .btn-lang-toggle .flag-icon {
  margin-left: 5px !important;
  margin-right: 0 !important;
}

/* --- Hero Section RTL Polish --- */
html[dir="rtl"] .hero,
html[dir="rtl"] #hero {
  text-align: right;
}

html[dir="rtl"] .hero-content {
  direction: rtl;
}

html[dir="rtl"] .hero-text {
  text-align: right;
}

html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero-subtitle {
  text-align: right;
}

html[dir="rtl"] .eyebrow {
  justify-content: flex-start;
  text-align: right;
}

html[dir="rtl"] .hero-actions {
  justify-content: flex-start;
}

html[dir="rtl"] .hero-stats {
  justify-content: flex-start;
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .hero-stats > div {
  text-align: right;
}

/* ── Hero Photo RTL — mirror chip positions ── */
/* In RTL, chip1 was on the LEFT  → move to RIGHT */
html[dir="rtl"] .chip1 {
  left: auto !important;
  right: -24px !important;
}
/* In RTL, chip2 was on the RIGHT → move to LEFT */
html[dir="rtl"] .chip2 {
  right: auto !important;
  left: -28px !important;
}
/* In RTL, chip3 was on the LEFT  → move to RIGHT */
html[dir="rtl"] .chip3 {
  left: auto !important;
  right: -18px !important;
}

/* RTL chip text direction */
html[dir="rtl"] .float-chip {
  direction: rtl;
  text-align: right;
  white-space: normal;
  max-width: 180px;
}

/* ── Hero Photo & Chips: full 5-screen responsive ── */

/* XL Desktop (> 1440px) */
@media (min-width: 1440px) {
  .photo-wrap {
    max-width: 400px;
  }
  .chip1 { left: -28px; }
  .chip2 { right: -32px; }
  .chip3 { left: -22px; }
  html[dir="rtl"] .chip1 { right: -28px !important; left: auto !important; }
  html[dir="rtl"] .chip2 { left: -32px !important; right: auto !important; }
  html[dir="rtl"] .chip3 { right: -22px !important; left: auto !important; }
}

/* Standard Desktop (1200–1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .photo-wrap {
    max-width: 360px;
  }
}

/* Tablet Landscape (992–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .photo-wrap {
    max-width: 300px;
  }
  .float-chip {
    font-size: 0.66rem;
    padding: 6px 12px;
  }
  .chip1 { left: -16px; }
  .chip2 { right: -16px; }
  .chip3 { left: -12px; }
  html[dir="rtl"] .chip1 { right: -16px !important; left: auto !important; }
  html[dir="rtl"] .chip2 { left: -16px !important; right: auto !important; }
  html[dir="rtl"] .chip3 { right: -12px !important; left: auto !important; }
}

/* Tablet Portrait (768–991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-photo {
    max-width: 360px;
    margin: 0 auto;
  }
  .photo-wrap {
    max-width: 320px;
  }
  /* Keep chips inside bounds */
  .float-chip {
    font-size: 0.66rem;
    padding: 6px 10px;
    white-space: normal;
    max-width: 160px;
  }
  .chip1 { left: 0px; top: 12px; }
  .chip2 { right: 0px; top: 45%; }
  .chip3 { left: 0px; bottom: 16px; }
  html[dir="rtl"] .chip1 { right: 0px !important; left: auto !important; }
  html[dir="rtl"] .chip2 { left: 0px !important; right: auto !important; }
  html[dir="rtl"] .chip3 { right: 0px !important; left: auto !important; }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .hero-photo {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
  }
  .photo-wrap {
    max-width: 260px;
    margin: 0 auto;
  }
  /* On mobile — pull chips INSIDE the frame, no negative offset */
  .float-chip {
    font-size: 0.62rem !important;
    padding: 5px 10px !important;
    white-space: normal !important;
    max-width: 140px !important;
    text-align: center;
    line-height: 1.3;
  }
  .chip1 {
    top: 10px !important;
    left: 8px !important;
    right: auto !important;
  }
  .chip2 {
    top: 44% !important;
    right: 8px !important;
    left: auto !important;
  }
  .chip3 {
    bottom: 10px !important;
    left: 8px !important;
    right: auto !important;
  }
  /* RTL mobile — mirror chip sides */
  html[dir="rtl"] .chip1 {
    right: 8px !important;
    left: auto !important;
  }
  html[dir="rtl"] .chip2 {
    left: 8px !important;
    right: auto !important;
  }
  html[dir="rtl"] .chip3 {
    right: 8px !important;
    left: auto !important;
  }
  html[dir="rtl"] .float-chip {
    text-align: right;
  }
}

/* Extra-small (≤ 380px) */
@media (max-width: 380px) {
  .hero-photo {
    max-width: 260px;
  }
  .photo-wrap {
    max-width: 220px;
  }
  /* Hide chips on very small screens to prevent clutter */
  .float-chip {
    display: none !important;
  }
}

/* ── Module-Map RTL ── */
html[dir="rtl"] .module-map {
  direction: rtl;
}

html[dir="rtl"] .map-inner {
  /* do NOT reverse — browser engine handles it naturally with dir=rtl */
  direction: rtl;
}

html[dir="rtl"] .map-hint {
  text-align: center;
  direction: rtl;
}

/* Flip tooltip arrow & position in RTL */
html[dir="rtl"] .mod-tip {
  text-align: right;
  direction: rtl;
}

/* Connector packet animation: RTL direction */
html[dir="rtl"] .connector::after {
  animation-direction: reverse;
}

/* ── Hero Stats: full 5-screen responsive ── */

/* XL Desktop (> 1440px) — default generous gap */
@media (min-width: 1440px) {
  .hero-stats {
    gap: 36px;
  }
}

/* Standard Desktop (1200–1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .hero-stats {
    gap: 28px;
  }
}

/* Tablet Landscape (992–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-stats {
    gap: 20px;
    flex-wrap: wrap;
  }
}

/* Tablet Portrait (768–991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-stats {
    justify-content: center !important;
    gap: 24px;
    flex-wrap: wrap;
  }
  html[dir="rtl"] .hero-stats {
    justify-content: center !important;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .hero-stats {
    justify-content: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    padding-top: 18px !important;
  }
  .hero-stats > div {
    text-align: center;
    min-width: 80px;
  }
  html[dir="rtl"] .hero-stats {
    justify-content: center !important;
    text-align: center;
  }
  html[dir="rtl"] .hero-stats > div {
    text-align: center;
  }
}

/* Extra-small (≤ 380px) */
@media (max-width: 380px) {
  .hero-stats {
    gap: 14px !important;
  }
  .hero-stats > div {
    min-width: 70px;
  }
}

/* ── Module Map: full 5-screen responsive ── */

/* XL Desktop — full connector width */
@media (min-width: 1440px) {
  .module-map {
    padding: 28px 0 20px;
  }
  .connector {
    width: 44px;
  }
  .mod {
    font-size: 0.84rem;
    padding: 10px 18px;
  }
}

/* Standard Desktop */
@media (min-width: 1200px) and (max-width: 1439px) {
  .connector {
    width: 36px;
  }
  .mod {
    font-size: 0.82rem;
    padding: 9px 16px;
  }
}

/* Tablet Landscape (992–1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .connector {
    width: 24px;
  }
  .mod {
    font-size: 0.79rem;
    padding: 8px 13px;
  }
  .mod-tip {
    width: 210px;
    font-size: 0.76rem;
  }
}

/* Tablet Portrait (768–991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .module-map {
    padding: 18px 0 14px;
  }
  .map-inner {
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: center;
  }
  .connector {
    width: 18px;
    height: 2px;
  }
  .mod {
    font-size: 0.76rem;
    padding: 7px 12px;
    white-space: normal;
  }
  .mod-tip {
    width: 200px;
    font-size: 0.74rem;
    left: 0;
    transform: translateX(0) translateY(8px);
  }
  .mod:hover .mod-tip,
  .mod:focus-visible .mod-tip,
  .mod.open .mod-tip {
    transform: translateX(0) translateY(0);
  }
  html[dir="rtl"] .mod-tip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(8px);
  }
  html[dir="rtl"] .mod:hover .mod-tip,
  html[dir="rtl"] .mod:focus-visible .mod-tip,
  html[dir="rtl"] .mod.open .mod-tip {
    transform: translateX(0) translateY(0);
  }
  .map-hint {
    font-size: 0.8rem;
    padding: 0 12px;
    text-align: center;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  .module-map {
    padding: 14px 0 10px;
  }
  .map-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    row-gap: 8px !important;
    padding: 0 12px;
  }
  /* Hide connectors on mobile — modules wrap to grid */
  .connector {
    display: none !important;
  }
  .mod {
    font-size: 0.74rem !important;
    padding: 7px 12px !important;
    white-space: normal !important;
    text-align: center;
    min-width: 80px;
  }
  /* Tooltip: always show BELOW on mobile for better UX */
  .mod-tip {
    width: 200px !important;
    max-width: 80vw !important;
    bottom: auto !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important;
    font-size: 0.73rem !important;
  }
  .mod:hover .mod-tip,
  .mod:focus-visible .mod-tip,
  .mod.open .mod-tip {
    transform: translateX(-50%) translateY(0) !important;
  }
  /* Arrow points UP when tooltip is below */
  .mod-tip::after {
    top: auto !important;
    bottom: 100% !important;
    border-top-color: transparent !important;
    border-bottom-color: rgba(223, 164, 58, 0.65) !important;
  }
  .map-hint {
    font-size: 0.75rem !important;
    padding: 6px 16px 0 !important;
    text-align: center !important;
  }
  html[dir="rtl"] .map-inner {
    flex-direction: row-reverse;
    justify-content: center !important;
  }
  html[dir="rtl"] .mod {
    text-align: center;
  }
  html[dir="rtl"] .mod-tip {
    direction: rtl;
    text-align: right;
    left: 50% !important;
    right: auto !important;
  }
}

/* Extra-small (≤ 380px) */
@media (max-width: 380px) {
  .mod {
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
  }
  .mod-tip {
    width: 180px !important;
    max-width: 88vw !important;
    font-size: 0.7rem !important;
  }
  .hero-stats > div > div:first-child {
    font-size: 1.5rem !important;
  }
}

/* Hero Actions responsive */
@media (max-width: 767px) {
  .hero-actions {
    justify-content: center !important;
    gap: 12px !important;
  }
  .hero-actions .btn {
    font-size: 0.88rem !important;
    padding: 11px 18px !important;
  }
  html[dir="rtl"] .hero-actions {
    justify-content: center !important;
  }
}

@media (max-width: 380px) {
  .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── Hero Section + Module Map: flush bottom strip across all screens ── */

/* The hero section's inline style has padding-bottom:70px;
   We override it here to keep the bottom tight before the module-map strip */
#hero.hero {
  padding-bottom: 70px !important;
}

/* Tablet Portrait — reduce hero bottom padding */
@media (max-width: 991px) {
  #hero.hero {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
  }
}

/* Mobile — hero takes just enough padding */
@media (max-width: 767px) {
  #hero.hero {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }
  .module-map {
    padding: 14px 0 10px !important;
  }
}

@media (max-width: 380px) {
  #hero.hero {
    padding-top: 72px !important;
    padding-bottom: 30px !important;
  }
}

/* RTL: module-map inherits direction from html[dir=rtl],
   ensure container text alignment is correct */
html[dir="rtl"] .map-hint {
  direction: rtl;
  text-align: center;
}


html[dir="rtl"] .hero-sec,
html[dir="rtl"] .contact-hero,
html[dir="rtl"] .section-head,
html[dir="rtl"] .text-center {
  text-align: center;
}

html[dir="rtl"] .stat,
html[dir="rtl"] .service-card,
html[dir="rtl"] .profile-card,
html[dir="rtl"] .box-card,
html[dir="rtl"] .form-card,
html[dir="rtl"] .sidebar,
html[dir="rtl"] .panel,
html[dir="rtl"] .faq-item,
html[dir="rtl"] .cart-table,
html[dir="rtl"] .table-wrap table {
  text-align: right;
}

/* --- Form Fields & Inputs RTL --- */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .form-label,
html[dir="rtl"] label {
  text-align: right;
  display: block;
}

html[dir="rtl"] .input-group-icon {
  left: auto;
  right: 14px;
}

/* --- Badges, Tags & Icons RTL --- */
html[dir="rtl"] .svc-badge,
html[dir="rtl"] .h-badge,
html[dir="rtl"] .badge {
  direction: rtl;
}

html[dir="rtl"] .skill-list li::before {
  margin-right: 0;
  margin-left: 10px;
}

html[dir="rtl"] .arrow-icon,
html[dir="rtl"] .btn-arrow {
  display: inline-block;
  transform: scaleX(-1);
}

/* --- Grid and Flex Reversals for Dashboards & Split Layouts --- */
html[dir="rtl"] .admin-layout,
html[dir="rtl"] .layout {
  direction: rtl;
}

html[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--line-gold, rgba(223, 164, 58, 0.25));
}

html[dir="rtl"] .sidebar .nav-item {
  text-align: right;
  justify-content: flex-start;
}

html[dir="rtl"] .contact-grid,
html[dir="rtl"] .checkout-wrap,
html[dir="rtl"] .profile-grid {
  direction: rtl;
}

/* --- Footer RTL --- */
html[dir="rtl"] .main-footer {
  text-align: right;
}

html[dir="rtl"] .footer-container {
  direction: rtl;
}

html[dir="rtl"] .footer-social {
  justify-content: flex-start;
}

html[dir="rtl"] .footer-bottom {
  text-align: center;
}

/* --- Cart & Steps in RTL --- */
html[dir="rtl"] .price-currency {
  margin-left: 0;
  margin-right: 4px;
}

/* --- Modals & Toasts in RTL --- */
html[dir="rtl"] .ho-modal-actions {
  flex-direction: row-reverse;
}

html[dir="rtl"] #cartToast {
  right: auto !important;
  left: 32px !important;
}

@media (max-width: 768px) {
  html[dir="rtl"] #cartToast {
    left: 16px !important;
    right: 16px !important;
  }
}

/* ==========================================================================
   UNIVERSAL 5-SCREEN RESPONSIVE ARCHITECTURE
   ========================================================================== */

/* Base Safety to prevent any horizontal page blowout */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Responsive Table Wrapper */
.table-responsive,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* --- 1. Extra Large Desktop (> 1440px) --- */
@media (min-width: 1440px) {
  .nav-container,
  .container,
  .footer-container,
  .hero-content {
    max-width: 1320px;
  }
}

/* --- 2. Standard Desktop (1200px - 1439px) --- */
@media (min-width: 1200px) and (max-width: 1439px) {
  .nav-container,
  .container,
  .footer-container,
  .hero-content {
    max-width: 1160px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- 3. Small Laptop / Tablet Landscape (992px - 1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
  .nav-container,
  .container,
  .footer-container {
    max-width: 960px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .hero-content {
    grid-template-columns: 1fr 360px !important;
    gap: 24px !important;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- 4. Tablet Portrait (768px - 991px) --- */
@media (max-width: 991px) {
  .hero-content {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 32px !important;
  }

  .hero-content > div:last-child {
    margin: 0 auto !important;
    max-width: 420px !important;
    width: 100% !important;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .contact-container {
    grid-template-columns: 1fr !important;
  }

  .checkout-wrap {
    grid-template-columns: 1fr !important;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }

  .admin-layout,
  .layout {
    flex-direction: column !important;
  }

  .sidebar {
    width: 100% !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid rgba(223, 164, 58, 0.25) !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }

  .sidebar .nav-item {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* --- 5. Mobile Screens (320px - 767px, specially <= 480px) --- */
@media (max-width: 767px) {
  .main-navbar {
    padding: 0 14px !important;
  }

  .nav-container {
    height: 64px !important;
  }

  .nav-logo-mark {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.88rem !important;
  }

  .nav-title {
    font-size: 0.95rem !important;
  }

  .nav-sub {
    font-size: 0.68rem !important;
  }

  .hero-sec,
  .contact-hero {
    padding: 40px 16px 28px !important;
  }

  .hero-title {
    font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
    line-height: 1.25 !important;
  }

  .hero-sub {
    font-size: 0.92rem !important;
  }

  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .service-card {
    padding: 22px 18px !important;
  }

  .profile-card {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 24px 18px !important;
    gap: 20px !important;
  }

  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .form-card {
    padding: 22px 16px !important;
  }

  .footer-container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .main-footer {
    padding: 40px 16px 20px !important;
  }

  /* Interactive Elements & Touch Targets */
  button,
  .btn,
  .btn-nav,
  .btn-action,
  .btn-svc,
  .nav-link {
    min-height: 44px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
  }

  /* Cart step bar on mobile */
  .steps {
    gap: 6px !important;
  }
  .step-label {
    font-size: 0.72rem !important;
  }

  /* Modals & Dialogs on mobile */
  .ho-modal-card {
    padding: 24px 18px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* Extra-Small Mobile Screens (<= 380px) */
@media (max-width: 380px) {
  .nav-brand-text {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-title {
    font-size: 0.88rem !important;
  }
  .nav-sub {
    font-size: 0.65rem !important;
  }
  .btn-svc {
    font-size: 0.8rem !important;
    padding: 10px 12px !important;
  }
}

/* --- Smooth Language Transition Animation --- */
body {
  transition: opacity 0.15s ease;
}

body.lang-transitioning {
  opacity: 0.94;
}

/* --- Services Page RTL & Responsive Refinements --- */
html[dir="rtl"] .hero-sec {
  text-align: center;
}

html[dir="rtl"] .svc-features li {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .svc-desc {
  text-align: right;
}

html[dir="rtl"] .svc-title {
  text-align: right;
}

html[dir="rtl"] .calc-opt-info {
  text-align: right;
}

html[dir="rtl"] .calc-summary-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .summary-breakdown-list li {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .step-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .guarantee-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .faq-header {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .faq-body {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .scope-modal-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .calc-total-row,
html[dir="rtl"] .calc-timeline-row {
  direction: rtl;
}