/* ========================================
   UNIVEXAM — Mobile Performance Optimizations
   تحسينات الأداء للجوال (مع الحفاظ الكامل على التصميم)
   ======================================== */

/* ---- 1. Fast tap response (remove 300ms delay) ---- */
* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- 2. Prevent input zoom on iOS ---- */
input,
select,
textarea {
  font-size: 16px !important;
}

/* ---- 3. Smooth scrolling & overscroll ---- */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  overscroll-behavior-y: none;
}

/* ========================================
   MOBILE HARDWARE ACCELERATION (GPU SUPPORT)
   ======================================== */
@media (max-width: 1024px) {

  /* استغلال كرت الشاشة لتسريع حركة البطاقات بدلًا من استهلاك المعالج 
     بدون المساس بخصائص position fixed في الشريط العلوي */
  .file-card,
  .specialty-category-card,
  .feature-card,
  .university-card,
  .news-ticker-container,
  .hero-content,
  .hero-rounded-box,
  .glass-box {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  /* ---- Manage GPU Memory allocation ---- */
  .sidebar-link-v2-rotating::before,
  .mobile-link-v2-rotating::before,
  .shiny-badge::after {
    will-change: transform, opacity;
  }

  /* ---- Faster hover transitions on mobile (since touch doesn't truly hover) ---- */
  .file-card,
  .specialty-category-card,
  .university-card,
  .feature-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }

  /* ---- Disable hover transforms (no hover on touch, prevents stuck hover states) ---- */
  .file-card:hover,
  .specialty-category-card:hover,
  .specialties-grid .specialty-category-card:hover,
  .university-card:hover,
  .feature-card:hover,
  .btn-primary:hover {
    transform: translateZ(0) !important;
  }

  /* ---- Font display optimization ---- */
  @font-face {
    font-display: swap;
  }

}

/* end @media (max-width: 1024px) */


/* ========================================
   SMALL MOBILE TWEAKS (≤ 768px)
   ======================================== */
@media (max-width: 768px) {

  /* Better container padding */
  .container {
    padding: 0 1rem !important;
  }

  /* Hero improvements */
  .hero {
    min-height: unset !important;
    padding-top: 80px !important;
    padding-bottom: 30px !important;
  }

  .hero-content h1 {
    font-size: 2rem !important;
    line-height: 1.25 !important;
    margin-bottom: 1rem !important;
  }

  .hero-content p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Search input height for easy tap */
  .search-input {
    height: 54px !important;
    font-size: 1rem !important;
    padding-right: 3rem !important;
  }

  .search-btn {
    height: 54px !important;
  }

  /* Cards */
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  .file-card {
    padding: 1.4rem !important;
    border-radius: 16px !important;
  }

  .file-title {
    font-size: 1.15rem !important;
  }

  /* Specialties */
  .specialties-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .specialty-category-card {
    padding: 1.2rem !important;
    border-radius: 18px !important;
  }

  /* Section spacing */
  .section {
    padding: 2.5rem 0 !important;
  }

  .section-head {
    margin-bottom: 2rem !important;
  }

  .section-head h2 {
    font-size: 1.8rem !important;
  }

  /* Navbar height */
  .mobile-only-header {
    height: 60px !important;
  }

  main {
    padding-top: 60px !important;
  }

  /* Page headers */
  .page-title {
    font-size: 1.5rem !important;
  }

  /* Buttons */
  .btn-primary,
  .btn-secondary {
    padding: 0.7rem 1.4rem !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
  }

  /* Hero stats */
  .hero-stats {
    gap: 1.2rem !important;
    flex-wrap: wrap !important;
  }

  .stat-item strong {
    font-size: 1.1rem !important;
  }

  /* Filter tabs wrap */
  .filter-tabs {
    gap: 0.5rem !important;
  }

  .filter-tab {
    padding: 0.45rem 1rem !important;
    font-size: 0.88rem !important;
  }

  /* Admin panel mobile */
  .admin-panel {
    padding: 1.2rem !important;
    border-radius: 16px !important;
  }

  /* Footer */
  .footer {
    padding: 2.5rem 0 1.5rem !important;
  }

  /* PDF modal */
  .pdf-modal-content {
    height: 95vh !important;
    border-radius: 16px !important;
  }

  /* CTA section */
  .cta-card {
    padding: 2.5rem 1.5rem !important;
    border-radius: 24px !important;
  }

  .cta-content h2 {
    font-size: 1.7rem !important;
  }

  /* Floating theme button */
  .floating-theme-btn-smart {
    bottom: 20px !important;
    left: 20px !important;
    padding: 12px !important;
    width: 52px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .floating-theme-btn-smart span {
    display: none !important;
  }

  /* News ticker smaller */
  .ticker-text {
    font-size: 0.95rem !important;
  }

  .news-label {
    font-size: 0.8rem !important;
    padding: 4px 10px !important;
  }

}

/* end @media (max-width: 768px) */


/* ========================================
   VERY SMALL SCREENS (≤ 380px)
   ======================================== */
@media (max-width: 380px) {

  .container {
    padding: 0 0.8rem !important;
  }

  .hero-content h1 {
    font-size: 1.7rem !important;
  }

  .btn-primary,
  .btn-secondary {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.88rem !important;
  }

  .section-head h2 {
    font-size: 1.55rem !important;
  }

  .file-title {
    font-size: 1.05rem !important;
  }

}

/* ========================================
   ROSE THEME (BEAUTIFUL PINK & WHITE) FOR MOBILE & DESKTOP
   الوضع الزهري المخصص للطالبات (وردي وأبيض ناصع مع لمسات ناعمة)
   ======================================== */

/* Soften all elements to be cute and feminine */
body.theme-rose {
  background-color: #fffafc !important; /* Soft rose white */
  background-image: radial-gradient(circle at 15% 50%, rgba(255, 105, 180, 0.08), transparent 25%),
                    radial-gradient(circle at 85% 30%, rgba(255, 20, 147, 0.06), transparent 25%) !important;
  color: #d11370 !important;
  font-family: 'Outfit', 'Cairo', sans-serif !important;
}

/* Titles and Headers */
body.theme-rose h1,
body.theme-rose h2,
body.theme-rose h3,
body.theme-rose h4,
body.theme-rose h5,
body.theme-rose .top-banner-title {
  color: #ff1493 !important;
  text-shadow: 0 2px 10px rgba(255, 20, 147, 0.15) !important;
  font-weight: 800 !important;
}

body.theme-rose p,
body.theme-rose span:not(.shiny-badge):not(.news-label),
body.theme-rose div {
  color: #b0105e; /* Elegant deep magenta-pink */
}

/* Navbar & Mobile Header (Chic Glassmorphism) */
body.theme-rose .navbar,
body.theme-rose .mobile-only-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-bottom: 1px solid rgba(255, 105, 180, 0.3) !important;
  box-shadow: 0 10px 30px rgba(255, 105, 180, 0.1) !important;
}

/* Sidebar Menu (Soft Pink Glass) */
body.theme-rose .mobile-menu,
body.theme-rose .mega-nav-sidebar {
  background: rgba(255, 250, 252, 0.98) !important;
  border-left: 2px solid rgba(255, 105, 180, 0.2) !important;
  box-shadow: -10px 0 40px rgba(255, 20, 147, 0.08) !important;
}

/* Cards & Containers (Cute and Bubbly) */
body.theme-rose .file-card,
body.theme-rose .specialty-category-card,
body.theme-rose .feature-card,
body.theme-rose .university-card,
body.theme-rose .message-card,
body.theme-rose .glass-box,
body.theme-rose .admin-panel,
body.theme-rose .form-card {
  background: #ffffff !important;
  border: 1px solid rgba(255, 182, 193, 0.6) !important;
  border-radius: 28px !important; /* Extremely rounded for a softer look */
  box-shadow: 0 12px 35px rgba(255, 20, 147, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 1) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Remove default dark glowing pseudo-elements from cards */
body.theme-rose .file-card:before,
body.theme-rose .file-card:after,
body.theme-rose .specialty-category-card:after,
body.theme-rose .specialty-category-card:before {
  display: none !important;
}

/* Link Cards, Categories, and Inputs (Flirty & Bright) */
body.theme-rose .cat-item-link,
body.theme-rose .sidebar-link-v2-rotating,
body.theme-rose .sidebar-link-v2-slide,
body.theme-rose .mobile-link-v2-rotating,
body.theme-rose .mobile-link,
body.theme-rose .mobile-sub-link,
body.theme-rose .search-input,
body.theme-rose input,
body.theme-rose select {
  background: #fff5f8 !important; /* Extremely light pink background */
  color: #ff1493 !important;
  border: 1px solid rgba(255, 105, 180, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 2px 4px rgba(255, 105, 180, 0.05) !important;
  font-weight: 600 !important;
}

/* Hover States for links */
body.theme-rose .cat-item-link:hover,
body.theme-rose .mobile-link:hover,
body.theme-rose .sidebar-link:hover {
  background: linear-gradient(135deg, #ff69b4, #ff1493) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(255, 20, 147, 0.25) !important;
  transform: translateY(-2px) !important;
}

/* Search Box specific */
body.theme-rose .search-input::placeholder {
  color: rgba(255, 105, 180, 0.5) !important;
}
body.theme-rose .search-icon {
  color: #ff69b4 !important;
}

/* Primary Beautiful Gradient Buttons */
body.theme-rose .btn-primary,
body.theme-rose .btn-diamond,
body.theme-rose .btn-mirror-green,
body.theme-rose .hero-badge {
  background: linear-gradient(135deg, #ff1493, #ff69b4, #ffb6c1) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important; /* Pill shaped cute buttons */
  box-shadow: 0 8px 25px rgba(255, 20, 147, 0.35), inset 0 2px 5px rgba(255, 255, 255, 0.4) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}
body.theme-rose .btn-primary:active,
body.theme-rose .btn-diamond:active {
  transform: scale(0.95) !important;
  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3) !important;
}

/* Secondary Buttons */
body.theme-rose .btn-secondary {
  background: #ffffff !important;
  color: #ff1493 !important;
  border: 2px solid #ff69b4 !important;
  border-radius: 50px !important;
}

/* Badges and Tickers */
body.theme-rose .news-ticker-container {
  background: #fff0f5 !important;
  border: 1px solid rgba(255, 105, 180, 0.3) !important;
  border-radius: 50px !important;
}
body.theme-rose .news-label,
body.theme-rose .shiny-badge {
  background: linear-gradient(135deg, #ff1493, #ff69b4) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3) !important;
}
body.theme-rose .ticker-text {
  color: #d11370 !important;
}

/* CTA Card */
body.theme-rose .cta-card {
  background: linear-gradient(135deg, #fff0f5, #ffe4e1, #ffb6c1) !important;
  box-shadow: 0 20px 50px rgba(255, 105, 180, 0.2) !important;
  border: 1px solid #ffffff !important;
  border-radius: 40px !important;
}
body.theme-rose .cta-content h2 {
  color: #ff1493 !important;
}
body.theme-rose .cta-content p {
  color: #d11370 !important;
}
body.theme-rose .cta-btns .btn-primary {
  background: #ff1493 !important;
  color: #ffffff !important;
}
body.theme-rose .cta-btns .btn-secondary {
  border-color: #ff1493 !important;
}
/* Additional Feminine Touches */
body.theme-rose .cta-btns .btn-secondary {
  background: #ffffff !important;
  color: #ff1493 !important;
  border-width: 2px !important;
}

/* Floating Theme Button */
body.theme-rose .floating-theme-btn-smart {
  background: #ffffff !important;
  border: 3px solid #ff69b4 !important;
  box-shadow: 0 10px 25px rgba(255, 105, 180, 0.4) !important;
}
body.theme-rose .floating-theme-btn-smart svg {
  color: #ff1493 !important;
  filter: drop-shadow(0 2px 4px rgba(255, 20, 147, 0.3)) !important;
}

/* Footer Details */
body.theme-rose .footer {
  background: #ffffff !important;
  color: #ff1493 !important;
  border-top: 2px dashed rgba(255, 182, 193, 0.5) !important;
}
body.theme-rose .footer-heading {
  color: #ff1493 !important;
}
body.theme-rose .footer-links a {
  color: #d11370 !important;
  font-weight: 600 !important;
}

/* Cute icons overriding */
body.theme-rose svg, 
body.theme-rose .file-icon,
body.theme-rose .cat-icon {
  color: #ff1493 !important;
}
body.theme-rose .cat-icon-wrapper,
body.theme-rose .file-icon {
  background: #fff0f5 !important;
  border: 1px solid rgba(255, 105, 180, 0.3) !important;
}