/*
 * order-history.css
 * Styles specific to the order-history.html page.
 * This file should be linked after global.css in your order-history.html.
 */

/* ========================================= */
/* Order History Hero Section */
/* ========================================= */

.order-history-hero-section {
    /* Tailwind already handles bg-blue-700, text-white, py-16, text-center, rounded-b-xl, shadow-lg */
}

/* ========================================= */
/* Order History Content Layout */
/* ========================================= */

.order-history-container {
    /* Tailwind handles mx-auto, mt-8, p-8 */
}

/* Filter and Search Section */
.filter-search-section {
    /* Tailwind handles bg-white, p-6, rounded-lg, shadow-md, mb-8, flex, flex-col, md:flex-row, items-center, gap-4 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}
.filter-search-section input,
.filter-search-section select {
    /* Tailwind handles w-full, px-4, py-2, border, border-gray-300, rounded-md, shadow-sm, focus:ring-blue-500, focus:border-blue-500, sm:text-sm */
}

/* Order List Section */
.order-list-section {
    /* Tailwind handles bg-white, p-6, rounded-lg, shadow-md */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
    animation-delay: 0.1s; /* Stagger after filter section */
}

/* Order Card Styling */
.order-card {
    /* Tailwind handles bg-gray-50, p-5, rounded-lg, shadow-sm, border-l-4 */
    /* Border color will be dynamically set by JavaScript based on status */
    transition: all 0.2s ease-in-out;
}

.order-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.order-card h3 {
    /* Tailwind handles text-xl, font-semibold, text-gray-800 */
}

.order-card span.text-lg {
    /* Tailwind handles text-lg, font-bold, text-gray-900 */
}

.order-card .order-item img {
    /* Tailwind handles w-16, h-16, object-cover, rounded-md */
}

.order-card .order-item p {
    /* Tailwind handles font-medium, text-gray-800, text-gray-600, text-sm */
}

.order-card .order-item span {
    /* Tailwind handles font-semibold, text-gray-900 */
}

/* Status Badges */
.order-card .px-3.py-1 {
    /* Tailwind handles bg-color, text-color, text-xs, font-semibold, rounded-full */
}

/* Animation for sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-header .logo-container img {
    height: 40px; /* Default logo height for desktop as per original setup */
    width: auto;
    margin-right: 0.75rem; /* Tailwind's mr-3 */
}

.site-header .club-name {
    font-size: 1.5rem; /* Tailwind's text-2xl for desktop */
    line-height: 1.2; /* Adjust line-height for better vertical alignment if needed */
}

.site-header .nav-links {
    /* Tailwind's space-x-6 (1.5rem gap) is generally good for desktop */
    gap: 1.5rem; /* Ensuring a good gap for desktop */
}

.site-header .nav-links .nav-item {
    font-size: 1rem; /* Tailwind's text-base for desktop */
    padding-left: 0.75rem; /* Tailwind's px-3 */
    padding-right: 0.75rem; /* Tailwind's px-3 */
    padding-top: 0.5rem; /* Tailwind's py-2 */
    padding-bottom: 0.5rem; /* Tailwind's py-2 */
    white-space: nowrap;
}

.site-header .auth-buttons {
    gap: 1rem; /* Tailwind's space-x-4 */
}

.site-header .auth-buttons .btn-login,
.site-header .site-header .auth-buttons .btn-signup {
    font-size: 1rem; /* Tailwind's text-base */
    padding-left: 1.25rem; /* Tailwind's px-5 */
    padding-right: 1.25rem; /* Tailwind's px-5 */
    padding-top: 0.5rem; /* Tailwind's py-2 */
    padding-bottom: 0.5rem; /* Tailwind's py-2 */
}


/* Adjust logo and club name for mobile devices (phones) */
@media (max-width: 767px) { /* Targets screens smaller than Tailwind's 'md' breakpoint */
    .site-header .logo-container .club-name {
        font-size: 1.25rem; /* Smaller font size for mobile (e.g., text-xl in Tailwind) */
        margin-left: 0.5rem; /* Adjust as needed */
    }
    .site-header .logo-container img {
        height: 32px; /* Slightly smaller logo to match text better, adjust as needed */
        width: auto;
    }

    /* Ensure mobile nav items are visible and formatted correctly within the dropdown */
    .mobile-nav-dropdown .mobile-nav-item {
        font-size: 1rem; /* Adjust if needed for readability in the dropdown */
        padding: 0.75rem 1rem; /* Consistent padding */
    }
}

/* Adjust logo and club name and navigation links for iPad-type devices (tablets) in portrait or landscape */
@media (min-width: 768px) and (max-width: 1023px) { /* Targets viewports from md (768px) up to lg (1023px) */
    .site-header .main-nav {
        padding-left: 0rem; /* Example: reduced from 1rem */
        padding-right: 1rem;
    }

    .site-header .logo-container {
        margin-right: 0.25rem; /* Example: reduces space between logo container and nav links */
    }

    .site-header .logo-container img {
        height: 32px; /* Adjust logo height to match the desired size in the image */
        width: auto; /* Maintain aspect ratio */
        margin-right: 0.25rem; /* Further reduce margin-right of the logo itself */
    }

    .site-header .club-name {
        font-size: 1.25rem; /* Adjusted to text-xl for tablets as per image to create space */
        line-height: 1.5; /* Example adjustment, test to see what works best */
    }

    .site-header .nav-links {
        gap: 0.5rem; /* Reduced gap between navigation items */
    }

    .site-header .nav-links .nav-item {
        font-size: 0.8125rem; /* Further reduced font size (e.g., 13px) to ensure fit */
        padding-left: 0rem; /* Smaller padding for individual nav items */
        padding-right: 0.4rem;
        white-space: nowrap; /* Ensures text doesn't wrap inside nav items */
    }

    .site-header .auth-buttons {
        gap: 0.4rem; /* Reduce gap between auth buttons */
    }

    .site-header .auth-buttons .btn-login,
    .site-header .auth-buttons .btn-signup {
        font-size: 0.75rem; /* Even smaller font for login/signup buttons */
        padding-left: 0rem; /* Smaller padding for buttons */
        padding-right: 0.6rem;
        padding-top: 0.3rem; /* Further reduced vertical padding */
        padding-bottom: 0.3rem; /* Further reduced vertical padding */
    }
}

/* NEW: Simplified Two-Breakpoint Navbar Logic */
@media (min-width: 1025px) {
  .site-header .nav-links {
    display: flex !important;
  }
  .site-header .mobile-menu-toggle {
    display: none !important;
  }
  body {
    font-weight: 400;
  }
  @media (min-width: 1440px) {
    body {
      font-weight: 500;
    }
  }
  @media (min-width: 1920px) {
    body {
      font-weight: 600;
    }
  }
}

@media (max-width: 1024px) {
  .site-header .nav-links {
    display: none !important;
  }
  .site-header .mobile-menu-toggle {
    display: block !important;
    cursor: pointer;
  }
  .site-header .nav-links.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 1rem 0;
    z-index: 999;
  }
}