#departure_date {
     padding: 10.5px 10px !important;
     border: 1px solid #ddd;
 }

 /* General Container Styles */
 .flight-search-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
     background: #ffffff;
 }

 .flight-booking-details {
     max-width: 800px;
     margin: 0 auto;
     background: #ffffff;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 /* Search Form Styles */
 .flight-search-form {
     background: #ffffff;
     padding: 40px;
     border: 1px solid #e5e5e5;
     border-radius: 8px;
     margin-bottom: 30px;
 }

 .search-grid {
     display: grid;
     gap: 30px;
 }

 .search-field-group {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }

 .search-field-group:last-of-type {
     flex-basis: 100%;
 }

 .search-field {
     position: relative;
     flex: 1;
 }

 .search-field label {
     display: block;
     margin-bottom: 8px;
     font-weight: 600;
     color: #666;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .search-field select,
 .search-field input[type="text"],
 .search-field input[type="date"],
 .search-field select:focus,
 .search-field input[type="text"]:focus,
 .search-field input[type="date"]:focus {
     width: 100% !important;
     padding: 12px 16px !important;
     border: 1px solid #ddd;
     border-radius: 4px !important;
     font-size: 16px;
     background: #ffffff;
     color: #666;
 }

 .search-field select:focus,
 .search-field input[type="text"]:focus,
 .search-field input[type="date"]:focus {
     outline: none;
     border-color: #000 !important;
     padding: 12px 16px !important;
     border: 1px solid #ddd !important;
 }

 /* Counter Styles */
 .counter-wrapper {
     display: flex;
     align-items: center;
     border: 1px solid #ddd;
     border-radius: 4px;
     overflow: hidden;
 }

 .counter-btn {
     background: transparent !important;
     border: none;
     padding: 12px 16px;
     cursor: pointer;
     font-size: 18px;
     color: #666 !important;
     transition: background-color 0.2s;
     border-radius: 0;
 }

 .counter-wrapper input {
     border: none;
     text-align: left;
     width: 60px;
     padding: 12px 8px;
     font-size: 16px;
 }

 input[type=number],
 input[type=number]:focus {
     border: none !important;
     outline: none !important;
 }

 /* Search Button */
 .search-field-button {
     grid-column: 1 / -1;
     margin-top: 20px;
 }

 .search-btn {
     text-transform: uppercase;
     letter-spacing: 1px;
     display: inline-flex;
     align-items: center;
     background-color: #3e6fa9 !important;
     color: white !important;
     padding: 12px 24px;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     font-size: 16px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border: none !important;
     position: relative;
     z-index: 1;
 }

 .search-btn:hover {
     background: #ff5252;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
     background-color: #2c5080 !important;
     color: white !important;
     transform: translateY(-2px);
     box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
     text-decoration: none;
 }

 /* Flight Results */
 .flight-results {
     margin-top: 30px;
 }

 .flight-results-list {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .no-flights-found {
     text-align: center;
     padding: 60px 20px;
     font-size: 18px;
     color: #7f8c8d;
     background: #ffffff;
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }

 /* Flight Card Styles */
 .flight-card,
 .flight-card-row {
     background: #ffffff;
     border: 1px solid #e5e5e5;
     border-radius: 8px;
     transition: all 0.3s ease;
     overflow: hidden;
 }

 .flight-card-row {
     margin-bottom: 20px;
 }

 .flight-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .flight-card-content {
     display: grid;
     grid-template-columns: 150px 1fr 150px 200px;
     align-items: center;
 }

 /* Airline Section */
 .airline-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     height: 100%;
     justify-content: center;
     padding: 20px 0;
     width: 100%;
 }

 .airline-logo-wrapper {
     width: 90px;
     height: 90px;
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .airline-logo-wrapper.jet {
     background: #003366;
 }

 .airline-logo-wrapper.vistara {
     background: #663399;
 }

 .airline-logo-wrapper.spicejet {
     background: #ff6600;
 }

 .airline-logo-wrapper.default {
     background: #007bff;
 }

 .airline-placeholder {
     color: white;
     font-weight: bold;
     font-size: 18px;
 }

 .airline-logo {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .airline-name {
     font-size: 14px;
     font-weight: 500;
     color: #333;
 }

 /* Flight Details Section */

 .flight-time-info {
     display: flex;
     justify-content: center;
     flex-direction: column;
     gap: 15px;
     height: 100%;
 }

 .departure-info,
 .arrival-info {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 8px;
     padding: 20px 0;
 }

 .flight-icon {
     width: 20px;
     display: flex;
 }

 .time {
     font-weight: 600;
     color: #333;
     font-size: 16px;
 }

 .location {
     font-size: 14px;
     color: #666;
     margin-left: 10px;
 }

 .flight-details-section {
     height: 100%;
 }

 /* Duration Section */
 .flight-duration-section {
     height: 100%;
 }

 .duration-info {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
     justify-content: center;
     height: 100%;
 }

 .duration-icon {
     display: flex;
     color: #ff6b6b;
     font-size: 14px;
     width: 20px;
     height: 20px;
 }

 .duration-text {
     font-weight: 600;
     color: #333;
     font-size: 18px;
 }

 .stops-info {
     font-size: 16px;
     color: #666;
 }

 /* Price Section */
 .flight-price-section {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
 }

 .flight-price-wrapper {
     padding: 20px 0;
 }

 .price-info {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
 }

 .price-amount {
     font-size: 20px;
     font-weight: 700;
     color: #333;
 }

 .price-label {
     font-size: 14px;
     color: #666;
 }

 /* Action Section */
 .flight-action-section {
     text-align: center;
 }

 .book-btn {
     text-transform: uppercase;
     letter-spacing: 1px;
     display: inline-flex;
     align-items: center;
     background-color: #3e6fa9 !important;
     color: white !important;
     padding: 8px 18px;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     font-size: 16px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border: none !important;
     position: relative;
     z-index: 1;
 }

 .book-btn:hover {
     background: #ff5252;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
 }

 /* Flight Booking Details Styles */
 .flight-header {
     position: relative;
     overflow: hidden;
 }

 .flight-image {
     width: 100%;
     height: 300px;
     object-fit: cover;
 }

 .flight-title {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
     color: white;
     padding: 30px 30px 20px;
     margin: 0;
     font-size: 28px;
     font-weight: 600;
 }

 .flight-info-grid {
     padding: 30px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
 }

 .flight-detail-item {
     display: flex;
     flex-direction: column;
     padding: 20px;
     background: #f8f9fa;
     border-radius: 8px;
     border-left: 4px solid #3498db;
 }

 .detail-label {
     font-size: 12px;
     font-weight: 600;
     color: #7f8c8d;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 5px;
 }

 .detail-value {
     font-size: 16px;
     font-weight: 600;
     color: #2c3e50;
 }

 .flight-actions {
     padding: 0 30px 30px;
     text-align: center;
 }

 .book-flight-btn {
     display: inline-block;
     background: linear-gradient(135deg, #e74c3c, #c0392b);
     color: white;
     text-decoration: none;
     padding: 15px 40px;
     border-radius: 8px;
     font-size: 18px;
     font-weight: 600;
     transition: all 0.3s ease;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .book-flight-btn:hover {
     background: linear-gradient(135deg, #c0392b, #a93226);
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
     text-decoration: none;
     color: white;
 }

 /* Loading States */
 .flight-results.loading {
     opacity: 0.7;
     position: relative;
 }

 .flight-results.loading::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 40px;
     height: 40px;
     margin: -20px 0 0 -20px;
     border: 4px solid #f3f3f3;
     border-top: 4px solid #3498db;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Animation for cards appearing */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .flight-card {
     animation: fadeInUp 0.5s ease forwards;
 }

 .flight-card:nth-child(2) {
     animation-delay: 0.1s;
 }

 .flight-card:nth-child(3) {
     animation-delay: 0.2s;
 }

 .flight-card:nth-child(4) {
     animation-delay: 0.3s;
 }

 .flight-card:nth-child(5) {
     animation-delay: 0.4s;
 }

 /* Search form enhancements */
 .search-field input[type="text"]::placeholder {
     color: #bdc3c7;
     font-style: italic;
 }

 /* Focus styles for accessibility */
 .flight-card:focus,
 .view-details-btn:focus,
 .search-btn:focus,
 .book-flight-btn:focus {
     outline-offset: 2px;
 }

 .counter-wrapper input {
     width: 100%;
 }

 /* 
.search-field-group:nth-child(2) input {
    width: 100%;
    min-height: 54px;
} */

 button:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
 input[type=submit]:focus,
 input[type=text]:focus,
 input[type=date]:focus {
     outline: none !important;
 }

 .search-field input[type="text"]::placeholder {
     font-style: normal;
 }

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

 /* Error States */
 .search-field.error input,
 .search-field.error select {
     border-color: #e74c3c !important;
     box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
 }

 /* ==========================================================================
   PAGINATION STYLES
   ========================================================================== */

 .pagination-info {
     color: #666;
     font-size: 14px;
     font-weight: 500;
 }

 .pagination-controls {
     display: flex;
     align-items: center;
     gap: 15px;
     flex-wrap: wrap;
     justify-content: center;
 }

 .page-numbers {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .page-btn {
     background: #fff;
     border: 2px solid #e1e5e9;
     color: #495057;
     padding: 10px 15px;
     border-radius: 8px;
     font-weight: 600;
     transition: all 0.3s ease;
     cursor: pointer;
     font-size: 14px;
     min-width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     font-family: inherit;
 }

 .page-btn:hover {
     background: #f8f9fa;
     border-color: #3e6fa9;
     color: #3e6fa9;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(62, 111, 169, 0.2);
     text-decoration: none;
 }

 .page-btn.active {
     background: #3e6fa9;
     border-color: #3e6fa9;
     color: white;
     box-shadow: 0 4px 12px rgba(62, 111, 169, 0.3);
 }

 .page-btn:disabled {
     background: #f8f9fa;
     border-color: #dee2e6;
     color: #6c757d;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
 }

 .prev-btn,
 .next-btn {
     padding: 10px 20px;
     display: flex;
     align-items: center;
     gap: 8px;
     background: #3e6fa9;
     color: white;
     border-color: #3e6fa9;
 }

 .prev-btn:hover,
 .next-btn:hover {
     background: #2c5080;
     border-color: #2c5080;
     color: white;
     text-decoration: none;
 }

 .page-arrow {
     font-size: 18px;
     font-weight: bold;
 }

 .page-dots {
     color: #6c757d;
     font-weight: bold;
     padding: 0 5px;
     font-size: 16px;
 }

 /* Enhanced loading states for pagination */
 .flight-results.loading {
     opacity: 0.6;
     pointer-events: none;
     position: relative;
 }

 .flight-results.loading::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 40px;
     height: 40px;
     margin: -20px 0 0 -20px;
     border: 4px solid #f3f3f3;
     border-top: 4px solid #3e6fa9;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     z-index: 100;
 }


 .departure-time,
 .arrival-time {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .location-info,
 .arrival-info {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .location-icon,
 .arrival-icon {
     width: 20px;
     display: flex;
 }

 .flight-price-section::before,
 .flight-price-section::after {
     content: '';
     position: absolute;
     left: 10px;
     width: 1px;
     height: 20px;
     background: #666;
     right: 0;
     margin: 0 auto;
     top: 4px;
 }


 .flight-price-section::after {
     top: 33px;
 }

 .flight-card-content>*:not(:last-child) {
     position: relative;
 }

 .flight-card-content>*:not(:last-child)::after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 2px;
     height: 100%;
     background: #f0f0f0;
     z-index: 0;
 }

 .flight-pagination {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 15px;
 }

 .flight-pagination span {
     cursor: pointer;
     padding: 6px 12px;
     border: 1px solid #ddd;
 }

 .flight-pagination .active {
     background: #0073aa;
     color: #fff;
     border-color: #0073aa;
 }

 .flight-pagination .disabled {
     color: #999;
     cursor: not-allowed;
     border-color: #eee;
 }

 .locations {
     display: flex;
 }

 .flight-price-section {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
 }

 /* Loader wrapper */
 .flight-loader {
     display: none;
     align-items: center;
     justify-content: center;
     padding: 40px 0;
     margin: 0 auto;
     width: 40px;
 }

 /* Spinner circle */
 .flight-loader .spinner {
     border: 4px solid rgba(0, 0, 0, 0.1);
     border-top: 4px solid #3498db;
     /* Blue highlight */
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
 }

.booking-section {
    display: flex;
    justify-content: center;
    padding: 20px 0 0 0;
}

 /* Keyframes for rotation */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Responsive Design */

 @media (max-width: 999px) {
     .flight-card-content {
         grid-template-columns: 1fr 1fr;
     }
 }


 @media (max-width: 768px) {

     .flight-price-section::before,
     .flight-price-section::after {
         height: 17px;
     }

     .book-btn {
         font-size: 14px !important;
         padding: 10px 16px;
     }

     .airline-section {
         padding: 20px 0 0 0;
     }

     .flight-price-wrapper {
         padding: 0 0 20px 0;
     }

     .flight-search-container {
         padding: 15px;
     }

     .flight-search-form {
         padding: 20px;
     }

     .search-field-group {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .search-field-group:last-of-type {
         grid-template-columns: 1fr 1fr;
     }

     .flight-card-content {
         grid-template-columns: 1fr;
         gap: 20px;
         text-align: center;
     }

     .flight-time-info {
         flex-direction: row;
         justify-content: space-around;
         gap: 20px;
     }

     .departure-info,
     .arrival-info {
         flex-direction: column;
         text-align: center;
         gap: 5px;
     }

     .location {
         margin-left: 0;
     }

     .flight-info-grid {
         grid-template-columns: 1fr;
         padding: 20px;
     }

     .flight-title {
         font-size: 22px;
         padding: 20px 20px 15px;
     }

     .flight-card-content>*:not(:last-child)::after {
         display: none;
     }

     .flight-card {
         padding: 20px;
     }

     .search-field-group {
         display: block;
     }

     .search-grid {
         gap: 0;
     }

     .search-field label {
         margin-top: 8px;
     }

     .departure-info,
     .arrival-info {
         padding: 0;
     }

     .flight-pagination {
         margin: 20px 0;
     }

     .pagination-controls {
         gap: 10px;
     }

     .page-btn {
         padding: 8px 12px;
         min-width: 36px;
         height: 36px;
         font-size: 13px;
     }

     .prev-btn,
     .next-btn {
         padding: 8px 16px;
         font-size: 13px;
     }

     .pagination-info {
         font-size: 13px;
         text-align: center;
     }
 }

 @media (max-width: 480px) {
     .search-field-group:last-of-type {
         grid-template-columns: 1fr;
     }

     .flight-time-info {
         flex-direction: column;
         gap: 15px;
     }

     .price-amount {
         font-size: 20px;
     }

     .book-btn {
         padding: 10px 20px;
         font-size: 12px;
     }

     .flight-pagination {
         margin: 15px 0;
     }

     .pagination-controls {
         gap: 8px;
     }

     .page-btn {
         padding: 6px 10px;
         min-width: 32px;
         height: 32px;
         font-size: 12px;
     }

     .prev-btn,
     .next-btn {
         padding: 6px 12px;
         font-size: 12px;
         gap: 4px;
     }

     .page-arrow {
         font-size: 14px;
     }
 }