/* Tabber Component Styles - Jinan University */

/* ===============================
   TABBER SECTION
   =============================== */

.tabber-section {
  background: var(--bg-gradient-light);
  padding: var(--section-spacing) 0;
  min-height: 100vh;
}

/* ===============================
   PAGE HEADER
   =============================== */

.tabber-page-title {
  color: var(--jinan-teal);
  font-family: var(--font-headings);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-lg);
  position: relative;
}

.tabber-page-title i {
  color: var(--jinan-gold);
  margin-right: var(--space-md);
  font-size: 0.9em;
}

.tabber-title-divider {
  height: 4px;
  background: var(--bg-gradient-gold);
  border: none;
  margin: var(--space-xl) 0 var(--space-3xl) 0;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.tabber-title-divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ===============================
   TABBER SPECIFIC STYLES
   =============================== */

.tab-loading {
  position: relative;
  min-height: 200px;
}

.tab-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(205, 153, 51, 0.1),
    transparent
  );
  animation: loading-slide 1.5s infinite;
  border-radius: var(--radius-2xl);
}

@keyframes loading-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--bg-gradient-light);
  border-radius: var(--radius-2xl);
  border: var(--border-width) solid var(--jinan-teal-light);
}

.loading-container .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--jinan-teal-light);
  border-top: 4px solid var(--jinan-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===============================
   LANGUAGE CONTENT STYLES
   =============================== */

.english-content,
.arabic-content {
  direction: ltr;
  text-align: left;
}

html[data-lang="ar"] .english-content {
  display: none;
}

html[data-lang="en"] .arabic-content {
  display: none;
}

html[data-lang="ar"] .content-section,
html[data-lang="ar"] .content-section h1,
html[data-lang="ar"] .content-section h2,
html[data-lang="ar"] .content-section h3,
html[data-lang="ar"] .content-section h4,
html[data-lang="ar"] .content-section h5,
html[data-lang="ar"] .content-section h6 {
  direction: rtl;
  text-align: right;
}

html[data-lang="ar"] .content-section ul,
html[data-lang="ar"] .content-section ol {
  padding-right: var(--space-lg);
  padding-left: 0;
}

/* ===============================
   RESPONSIVE DESIGN - TABBER SPECIFIC
   =============================== */

@media (max-width: 991.98px) {
  .tabber-page-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-md);
  }
}

@media (max-width: 575.98px) {
  .tabber-section {
    padding: var(--space-lg) 0;
  }

  .tabber-page-title {
    font-size: var(--font-size-2xl);
  }
}

/* ===============================
   RTL SUPPORT - TABBER SPECIFIC
   =============================== */

html[dir="rtl"] .tabber-page-title i {
  margin-right: 0;
  margin-left: var(--space-md);
}