/* Critical viewport and layout fixes */
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Override Bootstrap RTL potential issues */
[dir="rtl"] body {
  text-align: right;
}

[dir="rtl"] .container {
  padding-left: 15px;
  padding-right: 15px;
}

:root { 
  --topbar-height: 36px; 
  --navbar-height: 70px; 
}

html { 
  scroll-behavior: smooth; 
}

body {
  font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  padding-top: calc(var(--topbar-height) + var(--navbar-height));
  background-color: #f4f7f7;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  overflow-x: hidden;
}

section { 
  scroll-margin-top: calc(var(--topbar-height) + var(--navbar-height)); 
}

/* Topbar */
.topbar { 
  height: var(--topbar-height); 
  background: #0f4f54; 
  color: #d7f1f1; 
  font-size: 0.875rem; 
  width: 100%;
  left: 0;
  right: 0;
  position: fixed;
  top: 0;
  z-index: 1031;
}

.topbar a { 
  color: #d7f1f1; 
  text-decoration: none; 
}

.topbar .social a { 
  opacity: .9; 
}

/* Navbar */
.navbar { 
  height: var(--navbar-height); 
  width: 100%;
  left: 0;
  right: 0;
  position: fixed;
  top: var(--topbar-height);
  z-index: 1030;
}

/* Hero */
.hero {
  min-height: calc(100vh - var(--navbar-height) - var(--topbar-height));
  background-image:
    linear-gradient(rgba(3, 30, 32, 0.65), rgba(3, 30, 32, 0.65)),
    url('assets/hero.jpeg'),
    url('assets/hero.png'),
    url('assets/hero.jpeg'),
    url('https://images.unsplash.com/photo-1586773860418-d37222d8fce3?q=80&w=1600&auto=format&fit=crop');
  background-size: cover; 
  background-position: center; 
  color: #fff;
  display: flex; 
  align-items: center; 
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.hero .btn-danger { 
  padding-inline: 1.25rem; 
}

/* Feature cards */
.feature-card { 
  border: 0; 
  background: #ffffff; 
  box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.06); 
}

.feature-icon { 
  width: 56px; 
  height: 56px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 12px; 
  background: #e8f2f3; 
  color: #0f6d72; 
  font-size: 28px; 
}

/* Services cards */
.service-card { 
  border: 0; 
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06); 
}

/* Mission */
.mission-img { 
  background: #eef2f3; 
  border-radius: 12px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 420px; 
  color: #94a3ab; 
  font-size: 48px; 
}

/* Footer */
footer { 
  background: #0f4f54; 
  color: #cfe8e8; 
}

footer a { 
  color: #cfe8e8; 
  text-decoration: none; 
}

/* WhatsApp Floating */
.whatsapp-float { 
  position: fixed; 
  right: 18px; 
  bottom: 18px; 
  width: 52px; 
  height: 52px; 
  background: #25D366; 
  color: #fff; 
  border-radius: 50%; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); 
  z-index: 1030; 
}

.whatsapp-float:hover { 
  color: #fff; 
  filter: brightness(0.95); 
}

.shadow-soft { 
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12); 
}

/* Gallery hover effects */
.gallery-item {
  transition: all 0.3s ease;
  cursor: pointer;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.gallery-item:hover img { 
  transform: scale(1.05); 
}

.gallery-item:hover .gallery-overlay { 
  opacity: 1 !important; 
}

.gallery-item .gallery-overlay {
  background: linear-gradient(135deg, rgba(15, 109, 114, 0.8), rgba(37, 160, 168, 0.8)) !important;
}

/* Background gradient */
.bg-gradient-light { 
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
}

/* Navbar improvements */
.navbar-nav .nav-link { 
  position: relative; 
  transition: color 0.3s ease; 
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #0f6d72;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}

/* Responsive navbar improvements */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
    padding: 1rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin: 0.25rem 0;
    transition: all 0.3s ease;
  }
  
  .navbar-nav .nav-link:hover {
    background: rgba(15, 109, 114, 0.1);
    color: #0f6d72 !important;
  }
  
  .navbar-nav .nav-item.ms-lg-3 {
    margin-left: 0 !important;
    margin-top: 0.5rem;
  }
}

/* Mobile layout fixes */
@media (max-width: 767.98px) {
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }
  
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .hero .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .navbar .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .topbar .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fix RTL mobile issues */
  .navbar-nav {
    text-align: right !important;
  }
  
  .navbar-nav .nav-link {
    text-align: right !important;
  }
  
  /* Ensure proper centering on mobile */
  .hero h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .hero .lead {
    font-size: 1rem !important;
  }

  /* Prevent horizontal overflow */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .col, .col-md-4, .col-lg-6, .col-xl-9 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Override Bootstrap RTL issues */
  [dir="rtl"] .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  [dir="rtl"] .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [dir="rtl"] .col, [dir="rtl"] .col-md-4, [dir="rtl"] .col-lg-6, [dir="rtl"] .col-xl-9 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Force full width */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix any potential Bootstrap RTL positioning */
  .navbar, .topbar, .hero, section, header, footer {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* Extra small devices */
@media (max-width: 575.98px) {
  .hero h1 {
    font-size: 1.75rem !important;
  }
  
  .hero .lead {
    font-size: 0.9rem !important;
  }
  
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Additional RTL fixes for Bootstrap compatibility */
@media (max-width: 767.98px) {
  /* Override any Bootstrap RTL margin/padding issues */
  .ms-auto, .me-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .ps-0, .pe-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure proper text alignment in RTL */
  .text-start {
    text-align: right !important;
  }
  
  .text-end {
    text-align: left !important;
  }
  
  /* Fix any potential float issues */
  .float-start {
    float: right !important;
  }
  
  .float-end {
    float: left !important;
  }
}

/* Critical viewport fixes */
@media (max-width: 767.98px) {
  /* Force viewport constraints */
  html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Override any potential Bootstrap RTL positioning */
  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Ensure all sections are properly contained */
  section, header, footer, .hero {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* Additional styles for doctor pages */
.page-header { 
  background: linear-gradient(rgba(3,30,32,.75),rgba(3,30,32,.75)), url('./assets/galary-3.jpeg') center/cover; 
  color: #fff; 
}

.divider { 
  border-top: 1px dashed #c9d6d9; 
  margin: 1.25rem 0; 
}