/* Brand theme for Baby Clothing company */
:root {
  --brand-primary: #ff6f61;
  --brand-secondary: #ffd166;
  --brand-dark: #2a2a2a;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: var(--brand-dark); }

.navbar-brand { font-weight: 700; color: var(--brand-primary); }
.navbar-brand:hover { color: var(--brand-primary); }

.hero-section { padding: 64px 0; background: linear-gradient(135deg, #fff8f5 0%, #fff 100%); }
.hero-section .lead { max-width: 720px; }
.hero-section .btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.hero-section .btn-secondary { background-color: var(--brand-secondary); border-color: var(--brand-secondary); color: #333; }

.features-section { padding: 48px 0; }
.features-section .card { border: none; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05); }

.about-illustration { background: #fff8f5; border: 1px dashed #ffb3a9; }

.global-section .stat .counter { color: var(--brand-primary); }

.timeline { position: relative; margin: 0 auto; max-width: 900px; }
.timeline::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: #e9ecef; }
.timeline-item { position: relative; padding-left: 60px; margin-bottom: 24px; }
.timeline-dot { position: absolute; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-primary); top: 6px; }
.timeline-content { background: #fff; border: 1px solid #eee; border-radius: .5rem; padding: 12px 16px; box-shadow: 0 .25rem .75rem rgba(0,0,0,0.04); }

.site-footer { background: #f8f9fa; padding: 32px 0; }
.site-footer h3 { font-size: 1.1rem; }
.site-footer .copyright { border-top: 1px solid #e9ecef; margin-top: 16px; padding-top: 16px; font-size: 0.9rem; color: #666; }
.lang-switch { display: flex; align-items: center; }
.lang-pills { gap: 6px; }
.lang-pills .nav-link { padding: 4px 8px; border-radius: 999px; color: #555; background: #f7f7f7; border: 1px solid #eee; }
.lang-pills .nav-link:hover { background: #fff; }
.lang-pills .nav-link.active { color: #fff; background: var(--brand-primary); border-color: var(--brand-primary); }
.flag-icon-sm { width: 16px; height: 12px; object-fit: cover; border: 1px solid #ddd; border-radius: 2px; }
.lang-label { font-size: .85rem; }
.flag-icon { width: 20px; height: 14px; object-fit: cover; border: 1px solid #ddd; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.dropdown-menu .dropdown-item .flag-icon { margin-right: 8px; }
.btn .flag-icon { margin-right: 8px; }
.lang-toggle { padding: 4px 8px; border-radius: 999px; }
.lang-dropdown .dropdown-menu { min-width: 160px; }
.lang-dropdown .dropdown-item { padding: 6px 10px; }
.lang-dropdown .dropdown-item.active { background: #f0f4ff; color: #333; }

/* Mobile optimizations */
.about-hero { background: linear-gradient(135deg, #fff8f5 0%, #fff 100%); }
.about-section .card { border: none; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.04); }
.scope-item { background: #fff; }
.map-placeholder { box-shadow: 0 .5rem 1rem rgba(0,0,0,0.06); }
.stat-box { background: #fff; }

@media (max-width: 576px) {
  .about-hero h1 { font-size: 1.5rem; }
}
.hero-section .btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.hero-section .btn-secondary { background-color: var(--brand-secondary); border-color: var(--brand-secondary); color: #333; }

.features-section { padding: 48px 0; }
.features-section .card { border: none; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05); }

.about-illustration { background: #fff8f5; border: 1px dashed #ffb3a9; }

.global-section .stat .counter { color: var(--brand-primary); }

.timeline { position: relative; margin: 0 auto; max-width: 900px; }
.timeline::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: #e9ecef; }
.timeline-item { position: relative; padding-left: 60px; margin-bottom: 24px; }
.timeline-dot { position: absolute; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-primary); top: 6px; }
.timeline-content { background: #fff; border: 1px solid #eee; border-radius: .5rem; padding: 12px 16px; box-shadow: 0 .25rem .75rem rgba(0,0,0,0.04); }

.site-footer { background: #f8f9fa; padding: 32px 0; }
.site-footer h3 { font-size: 1.1rem; }
.site-footer .copyright { border-top: 1px solid #e9ecef; margin-top: 16px; padding-top: 16px; font-size: 0.9rem; color: #666; }
.lang-switch { display: flex; align-items: center; }
.lang-pills { gap: 6px; }
.lang-pills .nav-link { padding: 4px 8px; border-radius: 999px; color: #555; background: #f7f7f7; border: 1px solid #eee; }
.lang-pills .nav-link:hover { background: #fff; }
.lang-pills .nav-link.active { color: #fff; background: var(--brand-primary); border-color: var(--brand-primary); }
.flag-icon-sm { width: 16px; height: 12px; object-fit: cover; border: 1px solid #ddd; border-radius: 2px; }
.lang-label { font-size: .85rem; }
.flag-icon { width: 20px; height: 14px; object-fit: cover; border: 1px solid #ddd; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.dropdown-menu .dropdown-item .flag-icon { margin-right: 8px; }
.btn .flag-icon { margin-right: 8px; }
.lang-toggle { padding: 4px 8px; border-radius: 999px; }
.lang-dropdown .dropdown-menu { min-width: 160px; }
.lang-dropdown .dropdown-item { padding: 6px 10px; }
.lang-dropdown .dropdown-item.active { background: #f0f4ff; color: #333; }

/* Mobile optimizations */
@media (max-width: 576px) {
  .site-header .navbar { padding-top: .25rem; padding-bottom: .25rem; }
  .navbar-brand { font-size: 1rem; }
  .navbar-brand img { height: 24px !important; }
  .navbar-nav .nav-link { padding: .5rem 0; border-bottom: 1px solid #f5f5f5; }
  .navbar-nav .nav-link:last-child { border-bottom: none; }
  .lang-toggle { padding: 4px 6px; }
  .lang-dropdown .dropdown-menu { left: 0; right: auto; }

  .site-footer { padding: 20px 0; }
  .site-footer h3 { font-size: 1rem; }
  .site-footer .container { padding-left: 12px; padding-right: 12px; }
  .site-footer .row .col-md-4 { text-align: center; }
  .site-footer ul.list-unstyled li a { display: inline-block; padding: 6px 0; }
}

/* Desktop alignment for dropdown */
@media (min-width: 992px) {
  .lang-dropdown .dropdown-menu { right: 0; left: auto; }
}

/* About page refined styles */
.container-narrow { max-width: 960px; }
.about-hero { background: linear-gradient(180deg, rgba(33,37,41,0.03), rgba(33,37,41,0)); }
.muted-lead { color: var(--bs-gray-600); font-size: 1.05rem; }
.section-title { font-size: 1.25rem; font-weight: 600; letter-spacing: .2px; margin-bottom: .5rem; }
.about-card { border: none; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.scope-item { background: #f9fafb; }
.map-placeholder { box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.stat-card { background: #fff; border: 1px solid var(--bs-border-color); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.photo-grid img { border-radius: .75rem; border: 1px solid var(--bs-border-color); transition: transform .2s ease, box-shadow .2s ease; }
.photo-grid img:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* Mobile tweaks */
@media (max-width: 576px) {
  .display-5 { font-size: 1.75rem; }
  .muted-lead { font-size: .95rem; }
  .section-title { font-size: 1.125rem; }
  .about-hero { padding-top: 2.25rem !important; padding-bottom: 2rem !important; }
  .about-section, .about-factory { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .photo-grid img { border-radius: .5rem; }
  .map-placeholder { min-height: 220px !important; }
  .card-body { padding: 1rem 1rem; }
}

/* Lightbox (photo modal) styles */
.photo-modal-img { max-width: 92vw; max-height: 82vh; border-radius: .5rem; border: 1px solid var(--bs-border-color); box-shadow: 0 16px 40px rgba(0,0,0,.2); background-color: #fff; }
.modal-backdrop.show { background-color: rgba(33,37,41,.55); }