/* ========================================
   PAGINATION.CSS
   Styles for pagination component
======================================== */

/* Pagination styles */
.pagination-container {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-btn,
.pagination-number {
    padding: 10px 15px;
    border: 1px solid #D2691E;
    background: white;
    color: #8B4513;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.pagination-btn:hover,
.pagination-number:hover {
    background: #8B4513;
    color: white;
    transform: translateY(-1px);
}

.pagination-number.active {
    background: #8B4513;
    color: white;
}

.pagination-dots {
    padding: 0 5px;
    color: #8B4513;
}

.pagination-info {
    color: #4a2c17;
    font-size: 14px;
}

/* ----------------------------------------
  RESPONSIVE DESIGN FOR PAGINATION
---------------------------------------- */

/* Large tablets and medium screens */
@media (max-width: 1024px) {
   .pagination-container {
       margin-top: 35px;
       gap: 12px;
   }
   
   .pagination {
       gap: 8px;
   }
   
   .pagination-btn,
   .pagination-number {
       padding: 9px 13px;
       font-size: 14px;
   }
   
   .pagination-info {
       font-size: 13px;
   }
}

/* Tablets */
@media (max-width: 768px) {
   .pagination-container {
       margin-top: 30px;
       gap: 10px;
   }
   
   .pagination {
       gap: 6px;
       flex-wrap: wrap;
       justify-content: center;
   }
   
   .pagination-btn,
   .pagination-number {
       padding: 8px 11px;
       font-size: 13px;
       min-width: 40px;
       text-align: center;
   }
   
   .pagination-dots {
       padding: 0 3px;
       font-size: 13px;
   }
   
   .pagination-info {
       font-size: 12px;
       text-align: center;
   }
}

/* Small tablets and large phones */
@media (max-width: 600px) {
   .pagination-container {
       margin-top: 25px;
       gap: 8px;
   }
   
   .pagination {
       gap: 4px;
       flex-wrap: wrap;
   }
   
   .pagination-btn,
   .pagination-number {
       padding: 6px 9px;
       font-size: 12px;
       min-width: 35px;
       border-radius: 4px;
   }
   
   .pagination-dots {
       padding: 0 2px;
       font-size: 12px;
   }
   
   .pagination-info {
       font-size: 11px;
       padding: 0 10px;
       text-align: center;
       line-height: 1.3;
   }
}

/* Mobile phones */
@media (max-width: 480px) {
   .pagination-container {
       margin-top: 20px;
       gap: 6px;
   }
   
   .pagination {
       gap: 3px;
       flex-wrap: wrap;
       max-width: 100%;
       overflow-x: auto;
       padding: 5px 0;
   }
   
   .pagination-btn,
   .pagination-number {
       padding: 5px 7px;
       font-size: 11px;
       min-width: 30px;
       flex-shrink: 0;
   }
   
   .pagination-btn:hover,
   .pagination-number:hover {
       transform: none; /* Remove transform on mobile for better touch experience */
   }
   
   .pagination-dots {
       padding: 0 1px;
       font-size: 11px;
   }
   
   .pagination-info {
       font-size: 10px;
       padding: 0 8px;
       line-height: 1.2;
   }
}

/* Very small screens */
@media (max-width: 320px) {
   .pagination-container {
       margin-top: 15px;
       gap: 4px;
   }
   
   .pagination {
       gap: 2px;
       padding: 3px 0;
   }
   
   .pagination-btn,
   .pagination-number {
       padding: 4px 6px;
       font-size: 10px;
       min-width: 28px;
   }
   
   .pagination-dots {
       font-size: 10px;
   }
   
   .pagination-info {
       font-size: 9px;
       padding: 0 5px;
   }
}