/* ===================================================
   AJRLY — Mobile Responsive Styles
   يُضاف تلقائياً من navbar.php لكل الصفحات
=================================================== */

/* ===== Global Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ===== Navbar Mobile ===== */
@media (max-width: 768px) {
  .navbar {
    padding: 10px 15px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .navbar > div:last-child {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .navbar a {
    font-size: 13px !important;
    margin-left: 8px !important;
  }
  .logo-text {
    font-size: 20px !important;
  }
  .logo img {
    height: 36px !important;
  }
  .account-btn {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  .account-menu {
    left: auto !important;
    right: 0 !important;
    min-width: 200px !important;
  }
  .icon-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
  body {
    padding-top: 56px !important;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 8px 10px !important;
  }
  .navbar a {
    font-size: 12px !important;
    margin-left: 5px !important;
  }
  .logo-text {
    font-size: 18px !important;
  }
  .logo img {
    height: 30px !important;
  }
  /* Hide text links, keep icons */
  .navbar > div:last-child > a:not(.icon-btn):not(.nav-item) {
    font-size: 0 !important;
  }
}

/* ===== Hero Section ===== */
@media (max-width: 768px) {
  .hero {
    padding: 40px 15px 35px !important;
  }
  .hero h1 {
    font-size: 24px !important;
  }
  .hero p {
    font-size: 15px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .hero-btn {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }
  .search-wrap {
    flex-direction: row !important;
    padding: 4px !important;
  }
  .search-wrap input[type=text] {
    font-size: 14px !important;
    padding: 10px 5px !important;
  }
  .search-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}

/* ===== Stats Bar ===== */
@media (max-width: 768px) {
  .stats-bar, .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 15px 10px !important;
    gap: 10px !important;
    margin-top: -20px !important;
  }
  .stat-item, .stat-card {
    padding: 15px 10px !important;
    border-radius: 14px !important;
  }
  .stat-item .n, .stat-card .num {
    font-size: 24px !important;
  }
  .stat-item .l, .stat-card .lbl {
    font-size: 11px !important;
  }
}

/* ===== Categories ===== */
@media (max-width: 768px) {
  .categories {
    padding: 20px 10px !important;
  }
  .cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .cat-card {
    padding: 14px 8px !important;
  }
  .cat-icon {
    font-size: 28px !important;
  }
  .cat-name {
    font-size: 12px !important;
  }
}

@media (max-width: 400px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== Filters Bar ===== */
@media (max-width: 768px) {
  .filters-bar {
    padding: 0 10px !important;
  }
  .filters-bar form {
    padding: 12px !important;
  }
  .f-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .f-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Items Grid ===== */
@media (max-width: 768px) {
  .items, .items-grid, .featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 15px 10px !important;
  }
  .item img, .item-card img, .feat-img {
    height: 140px !important;
  }
  .info, .card-info, .feat-info {
    padding: 10px !important;
  }
  .info h3, .card-info h4, .feat-info h4 {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .items, .items-grid, .featured-grid {
    grid-template-columns: 1fr !important;
  }
  .item img, .item-card img {
    height: 180px !important;
  }
}

/* ===== Sections ===== */
@media (max-width: 768px) {
  .section {
    padding: 0 10px !important;
    margin: 20px auto !important;
  }
  .sec-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .sec-title-h {
    font-size: 20px !important;
  }
}

/* ===== Pros Grid ===== */
@media (max-width: 768px) {
  .pros-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .pro-card {
    padding: 15px !important;
  }
  .pro-avatar {
    width: 60px !important;
    height: 60px !important;
    font-size: 26px !important;
  }
}

@media (max-width: 480px) {
  .pros-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Testimonials ===== */
@media (max-width: 768px) {
  .testi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ===== Footer ===== */
@media (max-width: 768px) {
  .footer {
    padding: 30px 15px 15px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ===== Item Detail Page ===== */
@media (max-width: 920px) {
  .wrap {
    grid-template-columns: 1fr !important;
    padding: 0 10px 30px !important;
  }
  .sidebar {
    order: -1 !important;
  }
  h1.item-title {
    font-size: 22px !important;
  }
  .price-main {
    font-size: 26px !important;
  }
  .quick-info {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .btn-row {
    grid-template-columns: 1fr !important;
  }
  .related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .bread {
    padding: 10px !important;
    font-size: 12px !important;
  }
  .top-badges, .float-actions {
    gap: 5px !important;
  }
  .badge-chip {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  .related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Tabs ===== */
@media (max-width: 768px) {
  .tabs {
    padding: 6px !important;
    gap: 3px !important;
  }
  .tab {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .tab-content, .tab-panel {
    padding: 15px !important;
  }
}

/* ===== Chat / Inbox ===== */
@media (max-width: 768px) {
  .page, .chat-page {
    padding: 0 8px !important;
    margin: 15px auto !important;
  }
  .conv-item {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }
  .conv-name {
    font-size: 14px !important;
  }
  .item-tag {
    display: none !important;
  }
  .chat-container {
    height: calc(100vh - 90px) !important;
    border-radius: 14px !important;
  }
  .chat-header {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .header-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  .header-name {
    font-size: 14px !important;
  }
  .chat-messages {
    padding: 12px !important;
  }
  .msg .bubble {
    max-width: 82% !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
  .chat-input {
    padding: 10px 12px !important;
  }
  .input-wrap textarea {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  .send-btn {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ===== Profile Page ===== */
@media (max-width: 768px) {
  .profile-hero {
    padding: 35px 15px 30px !important;
  }
  .big-avatar {
    width: 90px !important;
    height: 90px !important;
    font-size: 38px !important;
  }
  .profile-name {
    font-size: 22px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .profile-badges {
    gap: 6px !important;
  }
  .p-badge {
    font-size: 12px !important;
    padding: 4px 12px !important;
  }
  .action-row {
    gap: 8px !important;
  }
  .action-btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  .content {
    padding: 0 10px !important;
    margin: 20px auto !important;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .items-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Instant Requests ===== */
@media (max-width: 768px) {
  .top {
    padding: 20px 15px !important;
  }
  .top h1 {
    font-size: 22px !important;
  }
  .tabs-ir {
    gap: 6px !important;
  }
  .grid {
    grid-template-columns: 1fr !important;
    padding: 15px 10px !important;
    gap: 12px !important;
  }
  .card {
    padding: 14px !important;
  }
}

/* ===== Dashboard ===== */
@media (max-width: 768px) {
  .dash-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .chart-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Orders Page ===== */
@media (max-width: 768px) {
  .order-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ===== Forms (Add/Edit Item, Pro Register, etc.) ===== */
@media (max-width: 768px) {
  .form-wrap, .form-card, form[method="POST"] {
    max-width: 100% !important;
    padding: 15px !important;
  }
  .form-header, .top-header {
    padding: 20px 15px !important;
  }
  .form-header h1, .top-header h1 {
    font-size: 22px !important;
  }
  input, select, textarea {
    font-size: 15px !important;
    padding: 12px !important;
  }
  .field input {
    padding: 16px 12px 8px 12px !important;
  }
  .social-row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Login / Register Split ===== */
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr !important;
  }
  .left-side {
    display: none !important;
  }
  .right-side {
    padding: 25px 20px !important;
  }
}

/* ===== Favorites Page ===== */
@media (max-width: 768px) {
  .fav-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ===== General Mobile Fixes ===== */
@media (max-width: 768px) {
  /* Better tap targets */
  a, button {
    min-height: 40px;
  }

  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden !important;
  }

  /* Better spacing */
  .sec-title, .sec-title-h {
    font-size: 18px !important;
  }

  /* Tables scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ===== Very Small Screens (320px) ===== */
@media (max-width: 360px) {
  .navbar {
    padding: 8px !important;
  }
  .hero h1 {
    font-size: 20px !important;
  }
  .stat-card .num, .stat-item .n {
    font-size: 20px !important;
  }
  .price-main {
    font-size: 22px !important;
  }
}