/**
 * edtech-eg.com - Mobile & Responsive QA Optimization Patch
 * Comprehensive fixes for iOS Safari, Touch Targets, Viewports, and Layouts
 */

/* ==========================================================================
   1. Global Mobile Reset & Horizontal Scroll Lock
   ========================================================================== */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: border-box;
}

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

/* ==========================================================================
   2. iOS Safari Input Zoom Prevention (font-size >= 16px)
   ========================================================================== */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

/* ==========================================================================
   3. Touch Targets Accessibility (Min 44px x 44px)
   ========================================================================== */
@media screen and (max-width: 768px) {
  button,
  .btn,
  .nav-link,
  .dropdown-item,
  .pagination .page-link,
  .hamburger-btn,
  .drawer-toggle,
  .action-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  .nav-item, .list-group-item {
    min-height: 44px;
  }
}

/* ==========================================================================
   4. Video Players & Responsive Embeds (16:9 Ratio & Playsinline)
   ========================================================================== */
.video-container,
.responsive-video-wrapper,
.plyr-wrapper,
.video-js-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto 1.25rem auto;
}

.video-container video,
.video-container iframe,
.responsive-video-wrapper video,
.responsive-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* ==========================================================================
   5. Marketplace & Teacher Cards Optimization (marketplace.php)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .marketplace-grid,
  .teachers-grid,
  .courses-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0.5rem !important;
  }

  .teacher-card,
  .marketplace-card {
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    overflow: hidden;
  }

  /* Header: Avatar Left, Teacher Info Right (RTL) */
  .teacher-card-header {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
  }

  .teacher-card-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
  }

  .teacher-card-info {
    text-align: right !important;
    flex: 1;
    margin-right: 0.75rem;
  }

  /* 2+1 Action Buttons */
  .teacher-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  .teacher-card-actions .btn-primary-action {
    grid-column: span 2 !important;
    width: 100% !important;
    min-height: 48px !important;
    font-weight: bold;
  }

  /* Quick View Modal (Mobile Bottom Sheet) */
  .modal.fade.show .modal-dialog {
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .modal-content {
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
}

/* ==========================================================================
   6. Teacher Profile Responsive Optimization (teacher.php)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .teacher-hero {
    padding: 1.5rem 1rem !important;
    text-align: center !important;
  }

  .teacher-hero-avatar {
    width: 88px !important;
    height: 88px !important;
    margin: 0 auto 0.75rem auto !important;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .teacher-hero-name {
    font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
    margin-bottom: 0.5rem !important;
  }

  .teacher-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

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

/* ==========================================================================
   7. Student Portal & Shell (course_student/)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .student-auth-card {
    width: calc(100% - 2rem) !important;
    margin: 1.5rem auto !important;
    padding: 1.5rem !important;
    border-radius: 16px !important;
  }

  /* Mobile Bottom Navigation */
  .student-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1040;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  }

  .student-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #64748b;
    text-decoration: none;
    flex: 1;
    height: 100%;
  }

  .student-bottom-nav-item.active,
  .student-bottom-nav-item:hover {
    color: #2563eb;
  }

  .student-bottom-nav-item i {
    font-size: 1.25rem;
    margin-bottom: 2px;
  }

  /* Add padding-bottom to main content when bottom nav is present */
  .has-bottom-nav {
    padding-bottom: 74px !important;
  }

  /* Payment method tiles */
  .payment-methods-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .payment-method-card {
    min-height: 56px;
    padding: 0.85rem 1rem !important;
  }
}

/* ==========================================================================
   8. Admin / Instructor / Studio Responsive Panels & Drawers
   ========================================================================== */
@media screen and (max-width: 991px) {
  /* Off-canvas sidebar */
  .sidebar-offcanvas {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    z-index: 1050 !important;
    background: #1e293b !important;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-offcanvas.open {
    transform: translateX(0) !important;
  }

  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1045;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
  }

  /* Tables Scrollable Wrapper */
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}