/* _content/HappyBus.Ux/Components/CustomComponents/AutoComplete.razor.rz.scp.css */
.autocomplete-wrapper[b-4j4nykl6sg] {
position: relative;
width: 300px;
}
.autocomplete-input[b-4j4nykl6sg] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.autocomplete-list[b-4j4nykl6sg] {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #ccc;
border-top: none;
background-color: #fff;
max-height: 200px;
overflow-y: auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.autocomplete-item[b-4j4nykl6sg] {
padding: 8px 12px;
cursor: pointer;
}
.autocomplete-item:hover[b-4j4nykl6sg] {
background-color: #f0f0f0;
}
.autocomplete-item.active[b-4j4nykl6sg] {
background-color: #007bff;
color: white;
}
.input-validation-error[b-4j4nykl6sg] {
border: 2px solid red;
width: 100%;
padding: 8px;
border-radius: 4px;
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
.autocomplete-wrapper[b-4j4nykl6sg] {
width: 100%;
}
.autocomplete-input[b-4j4nykl6sg] {
padding: 12px 14px;
font-size: 18px; /* Prevents zoom on iOS */
}
.autocomplete-item[b-4j4nykl6sg] {
padding: 14px 18px;
font-size: 18px;
}
}
@media (max-width: 480px) {
.autocomplete-input[b-4j4nykl6sg] {
padding: 10px 12px;
font-size: 16px;
}
.autocomplete-item[b-4j4nykl6sg] {
padding: 12px 14px;
font-size: 16px;
}
.autocomplete-list[b-4j4nykl6sg] {
max-height: 150px;
}
}
/* _content/HappyBus.Ux/Components/CustomComponents/BoardingDropingPoints.razor.rz.scp.css */
/* Mobile Responsive Design */
@media (max-width: 768px) {
.container[b-6e0p2di06c] {
max-width: 100%;
margin: 8px 4px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 1px solid #e9ecef;
overflow: visible;
box-sizing: border-box;
flex-shrink: 0;
width: calc(100% - 16px);
height: auto;
min-height: 150px;
}
.container:nth-child(2)[b-6e0p2di06c] {
margin-top: 16px;
margin-bottom: 20px;
}
/* Ensure parent container has proper height */
div[style*="display:flex"] .container[b-6e0p2di06c] {
display: block;
position: relative;
}
.header[b-6e0p2di06c] {
padding: 10px 12px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.header h2[b-6e0p2di06c] {
font-size: 18px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
}
.header p[b-6e0p2di06c] {
font-size: 14px;
color: #6c757d;
margin: 0;
}
.point[b-6e0p2di06c] {
padding: 10px 12px;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease;
}
.point:last-child[b-6e0p2di06c] {
border-bottom: none;
}
.point:hover[b-6e0p2di06c] {
background-color: #f8f9fa;
}
.point-left[b-6e0p2di06c] {
display: flex;
gap: 12px;
padding: 0;
flex: 1;
min-width: 0;
}
.time[b-6e0p2di06c] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
line-height: 1;
min-width: 50px;
}
.date[b-6e0p2di06c] {
font-size: 14px;
color: #e74c3c;
font-weight: 600;
margin-top: 4px;
}
.location[b-6e0p2di06c] {
font-size: 14px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 4px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.sublocation[b-6e0p2di06c] {
font-size: 12px;
color: #6c757d;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
}
.radio[b-6e0p2di06c] {
margin-left: 8px;
flex-shrink: 0;
}
input[type="radio"][b-6e0p2di06c] {
width: 20px;
height: 20px;
accent-color: #667eea;
}
/* Stack containers vertically on mobile */
div[style*="display:flex"][b-6e0p2di06c] {
flex-direction: column !important;
gap: 16px;
width: 100%;
box-sizing: border-box;
padding: 8px;
min-height: auto;
overflow-y: visible;
height: auto;
max-height: none;
}
}
/* Desktop styles remain unchanged */
.container[b-6e0p2di06c] {
max-width: 500px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
overflow: hidden;
margin: 0 4px;
border: 1px solid #e9ecef;
}
.header[b-6e0p2di06c] {
padding: 8px 12px;
border-bottom: 1px solid #eee;
}
.header h2[b-6e0p2di06c] {
margin: 0;
font-size: 15px;
}
.header p[b-6e0p2di06c] {
margin: 2px 0 0;
color: #888;
font-size: 12px;
}
.point[b-6e0p2di06c] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid #eee;
}
.point.preferred[b-6e0p2di06c] {
background: linear-gradient(to right, #e6ffe6, #ffffff);
}
.point-left[b-6e0p2di06c] {
display: flex;
gap: 12px;
padding: 4px 0;
}
.time[b-6e0p2di06c] {
font-size: 12px;
font-weight: bold;
color: #333;
}
.date[b-6e0p2di06c] {
font-size: 12px;
color: #ff5b5b;
}
.location[b-6e0p2di06c] {
font-weight: bold;
margin-top: 2px;
}
.sublocation[b-6e0p2di06c] {
font-size: 12px;
color: #666;
}
.preferred-tag[b-6e0p2di06c] {
display: inline-block;
margin-top: 6px;
padding: 2px 10px;
background-color: #b8f5b0;
color: #005c00;
font-size: 12px;
border-radius: 12px;
font-weight: 600;
}
.radio[b-6e0p2di06c] {
margin-left: 10px;
}
input[type="radio"][b-6e0p2di06c] {
width: 15px;
height: 15px;
}
/* _content/HappyBus.Ux/Components/CustomComponents/ContactComponent.razor.rz.scp.css */
/* Contact Details Container */
.contact-details[b-eetvz2j6jv] {
width: 100%;
}
/* Section Header */
.section-header[b-eetvz2j6jv] {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e9ecef;
}
.header-icon[b-eetvz2j6jv] {
width: 48px;
height: 48px;
background: transparent;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 20px;
flex-shrink: 0;
}
.header-content h3[b-eetvz2j6jv] {
color: #2c3e50;
font-size: 20px;
font-weight: 700;
margin: 0 0 4px 0;
}
.header-content p[b-eetvz2j6jv] {
color: #6c757d;
font-size: 14px;
margin: 0;
}
/* Contact Form */
.contact-form[b-eetvz2j6jv] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group[b-eetvz2j6jv] {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label[b-eetvz2j6jv] {
display: flex;
align-items: center;
gap: 8px;
color: #2c3e50;
font-weight: 600;
font-size: 14px;
}
.form-group label i[b-eetvz2j6jv] {
color: #333;
font-size: 16px;
}
.form-input[b-eetvz2j6jv] {
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
background: white;
color: #2c3e50;
}
.form-input:focus[b-eetvz2j6jv] {
outline: none;
border-color: #2196f3;
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
.form-input[b-eetvz2j6jv]::placeholder {
color: #adb5bd;
}
.validation-error[b-eetvz2j6jv] {
color: #dc3545;
font-size: 12px;
font-weight: 500;
margin-top: 4px;
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-form[b-eetvz2j6jv] {
grid-template-columns: 1fr;
gap: 16px;
}
.section-header[b-eetvz2j6jv] {
gap: 12px;
margin-bottom: 10px;
}
.header-icon[b-eetvz2j6jv] {
width: 40px;
height: 40px;
font-size: 18px;
}
.header-content h4[b-eetvz2j6jv] {
font-size: 15px;
}
.header-content p[b-eetvz2j6jv] {
font-size: 13px;
}
.form-input[b-eetvz2j6jv] {
padding: 12px 14px;
font-size: 15px;
}
}
@media (max-width: 480px) {
.section-header[b-eetvz2j6jv] {
flex-direction: row;
text-align: left;
gap: 12px;
margin-bottom: 16px;
align-items: center;
}
.header-icon[b-eetvz2j6jv] {
width: 36px;
height: 36px;
font-size: 16px;
}
.header-content h4[b-eetvz2j6jv] {
font-size: 13px;
font-weight: 800;
}
.form-input[b-eetvz2j6jv] {
padding: 10px 12px;
font-size: 12px;
}
.form-group label[b-eetvz2j6jv] {
font-size: 12px;
}
}
/* _content/HappyBus.Ux/Components/CustomComponents/CouponComponent.razor.rz.scp.css */
.coupon-container[b-mq2vnctenm] {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 16px;
width: 100%;
max-width: 450px;
}
.coupon-header[b-mq2vnctenm] {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.coupon-header span[b-mq2vnctenm] {
font-size: 14px;
font-weight: 500;
color: #333;
display: flex;
align-items: center;
gap: 6px;
}
.coupon-header svg[b-mq2vnctenm] {
width: 18px;
height: 18px;
}
.coupon-input[b-mq2vnctenm] {
margin-top: 12px;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
}
.coupon-input input[b-mq2vnctenm] {
border: none;
flex: 1;
padding: 12px;
font-size: 14px;
outline: none;
min-width: 0;
}
.coupon-input button[b-mq2vnctenm] {
border: none;
padding: 12px 18px;
font-size: 14px;
font-weight: 500;
border-radius: 0;
white-space: nowrap;
background-color: #e74c3c;
color: #fff;
font-weight: bold;
}
.coupon-input button:disabled[b-mq2vnctenm] {
background: #e5e5e5;
color: #777;
cursor: not-allowed;
}
/* Responsive for small screens */
@media (max-width: 480px) {
.coupon-input[b-mq2vnctenm] {
flex-direction: column;
align-items: stretch;
}
.coupon-input input[b-mq2vnctenm] {
width: 100%;
border-bottom: 1px solid #ccc;
}
.coupon-input button[b-mq2vnctenm] {
width: 100%;
border-radius: 0 0 8px 8px;
}
}
.success-message[b-mq2vnctenm] {
color: #388e3c;
background: #e8f5e9;
border-radius: 6px;
padding: 6px 12px;
font-size: 13px;
margin-top: 8px;
display: inline-block;
}
.error-message[b-mq2vnctenm] {
color: #d32f2f;
background: #fff0f0;
border-radius: 6px;
padding: 6px 12px;
font-size: 13px;
margin-top: 8px;
display: inline-block;
}
/* _content/HappyBus.Ux/Components/CustomComponents/DropdownMenu.razor.rz.scp.css */
/* Modern Dropdown Container */
.modern-dropdown[b-d5g4ihx7ro] {
position: relative;
display: inline-block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
z-index: 1000;
}
/* Dropdown Trigger Button */
.dropdown-trigger[b-d5g4ihx7ro] {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 12px 16px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
backdrop-filter: blur(10px);
font-size: 14px;
font-weight: 500;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.dropdown-trigger:hover[b-d5g4ihx7ro] {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.dropdown-trigger:active[b-d5g4ihx7ro] {
transform: translateY(0);
}
.user-avatar[b-d5g4ihx7ro] {
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.user-avatar i[b-d5g4ihx7ro] {
font-size: 20px;
color: #ffd700;
}
.user-info[b-d5g4ihx7ro] {
display: flex;
align-items: center;
gap: 8px;
pointer-events: none;
flex-direction: row;
justify-content: center;
}
.user-name[b-d5g4ihx7ro] {
font-weight: 600;
white-space: nowrap;
color: #2c3e50;
}
.dropdown-arrow[b-d5g4ihx7ro] {
font-size: 12px;
transition: transform 0.3s ease;
}
.dropdown-arrow.rotated[b-d5g4ihx7ro] {
transform: rotate(180deg);
}
/* Dropdown Menu */
.dropdown-menu[b-d5g4ihx7ro] {
position: absolute;
top: 100%;
right: 0;
background: white;
border-radius: 16px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
border: 1px solid #e9ecef;
min-width: 280px;
max-width: 320px;
width: auto;
z-index: 1001;
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.95);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 8px;
overflow: hidden;
pointer-events: none;
}
.dropdown-menu.show[b-d5g4ihx7ro] {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Dropdown Sections */
.dropdown-section[b-d5g4ihx7ro] {
padding: 4px 0;
border-bottom: 1px solid #f0f0f0;
}
.dropdown-section:last-child[b-d5g4ihx7ro] {
border-bottom: none;
padding-bottom: 6px;
}
.section-label[b-d5g4ihx7ro] {
padding: 6px 16px 3px;
font-size: 10px;
font-weight: 700;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
pointer-events: none;
}
/* Dropdown Items */
.dropdown-item[b-d5g4ihx7ro] {
display: flex;
align-items: center;
padding: 8px 14px;
color: #495057;
text-decoration: none;
transition: all 0.2s ease;
position: relative;
gap: 10px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.dropdown-item:hover[b-d5g4ihx7ro] {
background: #f8f9fa;
color: #667eea;
padding-left: 20px;
}
.dropdown-item:active[b-d5g4ihx7ro] {
transform: scale(0.98);
}
.dropdown-item.featured[b-d5g4ihx7ro] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin: 3px 8px;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.dropdown-item.featured:hover[b-d5g4ihx7ro] {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
padding-left: 20px;
color: white;
}
.dropdown-item.featured:active[b-d5g4ihx7ro] {
transform: translateY(0) scale(0.98);
}
.dropdown-item.featured[b-d5g4ihx7ro]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
}
.dropdown-item.featured:hover[b-d5g4ihx7ro]::before {
opacity: 1;
}
.dropdown-item.danger[b-d5g4ihx7ro] {
color: #dc3545;
}
.dropdown-item.danger:hover[b-d5g4ihx7ro] {
background: #fff5f5;
color: #c53030;
}
.dropdown-item.danger:active[b-d5g4ihx7ro] {
background: #ffe6e6;
}
/* Item Icons */
.item-icon[b-d5g4ihx7ro] {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
transition: all 0.3s ease;
pointer-events: none;
}
.item-icon.home[b-d5g4ihx7ro] {
background: #e3f2fd;
color: #1976d2;
}
.item-icon.ticket[b-d5g4ihx7ro] {
background: #e8f5e8;
color: #2e7d32;
}
.item-icon.cancel[b-d5g4ihx7ro] {
background: #ffebee;
color: #c62828;
}
.item-icon.email[b-d5g4ihx7ro] {
background: #fff3e0;
color: #f57c00;
}
.item-icon.profile[b-d5g4ihx7ro] {
background: #f3e5f5;
color: #7b1fa2;
}
.item-icon.trips[b-d5g4ihx7ro] {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.item-icon.signout[b-d5g4ihx7ro] {
background: #ffebee;
color: #c62828;
}
.dropdown-item:hover .item-icon[b-d5g4ihx7ro] {
transform: scale(1.1);
}
.dropdown-item.featured:hover .item-icon[b-d5g4ihx7ro] {
transform: scale(1.05);
}
/* Item Content */
.item-content[b-d5g4ihx7ro] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
pointer-events: none;
}
.item-title[b-d5g4ihx7ro] {
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
.item-subtitle[b-d5g4ihx7ro] {
font-size: 10px;
opacity: 0.7;
line-height: 1.2;
}
.dropdown-item.featured .item-subtitle[b-d5g4ihx7ro] {
opacity: 0.9;
}
/* Item Badge */
.item-badge[b-d5g4ihx7ro] {
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #ffd700;
pointer-events: none;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.dropdown-trigger[b-d5g4ihx7ro] {
padding: 8px 12px;
gap: 8px;
font-size: 12px;
align-items: center;
justify-content: center;
}
.user-name[b-d5g4ihx7ro] {
display: block;
font-size: 12px;
color: #2c3e50;
}
.dropdown-menu[b-d5g4ihx7ro] {
position: fixed;
top: 70px;
left: 10px;
right: 10px;
min-width: auto;
max-width: none;
width: auto;
border-radius: 16px;
overflow: hidden;
}
.dropdown-item[b-d5g4ihx7ro] {
padding: 8px 12px;
gap: 12px;
}
.item-icon[b-d5g4ihx7ro] {
width: 36px;
height: 36px;
font-size: 14px;
}
.item-title[b-d5g4ihx7ro] {
font-size: 14px;
}
.item-subtitle[b-d5g4ihx7ro] {
font-size: 11px;
}
.section-label[b-d5g4ihx7ro] {
padding: 6px 12px 4px;
font-size: 10px;
}
}
@media (max-width: 480px) {
.dropdown-trigger[b-d5g4ihx7ro] {
padding: 8px 12px;
}
.user-avatar i[b-d5g4ihx7ro] {
font-size: 18px;
}
.dropdown-menu[b-d5g4ihx7ro] {
top: 70px;
left: 8px;
right: 8px;
border-radius: 12px;
}
.dropdown-item[b-d5g4ihx7ro] {
padding: 10px 12px;
gap: 12px;
}
.item-icon[b-d5g4ihx7ro] {
width: 32px;
height: 32px;
font-size: 13px;
}
.item-title[b-d5g4ihx7ro] {
font-size: 13px;
}
.item-subtitle[b-d5g4ihx7ro] {
font-size: 10px;
}
}
/* Animation Enhancements */
@keyframes slideInUp-b-d5g4ihx7ro {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-item[b-d5g4ihx7ro] {
animation: slideInUp-b-d5g4ihx7ro 0.3s ease forwards;
}
.dropdown-item:nth-child(1)[b-d5g4ihx7ro] { animation-delay: 0.05s; }
.dropdown-item:nth-child(2)[b-d5g4ihx7ro] { animation-delay: 0.1s; }
.dropdown-item:nth-child(3)[b-d5g4ihx7ro] { animation-delay: 0.15s; }
.dropdown-item:nth-child(4)[b-d5g4ihx7ro] { animation-delay: 0.2s; }
.dropdown-item:nth-child(5)[b-d5g4ihx7ro] { animation-delay: 0.25s; }
/* _content/HappyBus.Ux/Components/CustomComponents/FilterBanner.razor.rz.scp.css */
/* RedBus Style Filter Container */
.filter-container[b-jjtvyfs7fi] {
width: 100%;
background: white;
border-radius: 0;
padding: 0;
border: none;
position: static;
height: auto;
max-height: none;
overflow-y: visible;
box-shadow: none;
backdrop-filter: none;
transition: none;
}
.filter-container:hover[b-jjtvyfs7fi] {
box-shadow: none;
transform: none;
}
/* AI-Powered Smart Filter Section */
.ai-filter-section[b-jjtvyfs7fi] {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 20px;
border-bottom: 1px solid #e9ecef;
margin-bottom: 0;
}
.ai-filter-header[b-jjtvyfs7fi] {
margin-bottom: 16px;
}
.ai-filter-title[b-jjtvyfs7fi] {
font-size: 24px;
font-weight: 800;
color: #6f42c1;
margin: 0 0 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.ai-filter-title i[b-jjtvyfs7fi] {
color: #6f42c1;
font-size: 20px;
}
.ai-subtitle[b-jjtvyfs7fi] {
font-size: 14px;
color: #6f42c1;
font-weight: 500;
opacity: 0.8;
}
.ai-filter-input[b-jjtvyfs7fi] {
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
.ai-input[b-jjtvyfs7fi] {
flex: 1;
padding: 14px 16px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 14px;
background: white;
color: #333;
transition: all 0.3s ease;
}
.ai-input:focus[b-jjtvyfs7fi] {
outline: none;
border-color: #6f42c1;
box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
}
.ai-input[b-jjtvyfs7fi]::placeholder {
color: #6c757d;
font-style: italic;
}
.ai-suggest-btn[b-jjtvyfs7fi] {
background: linear-gradient(135deg, #6f42c1, #5a32a3);
border: none;
color: white;
padding: 14px;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
}
.ai-suggest-btn:hover[b-jjtvyfs7fi] {
background: linear-gradient(135deg, #5a32a3, #4a2b8a);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(111, 66, 193, 0.4);
}
.ai-suggest-btn i[b-jjtvyfs7fi] {
font-size: 16px;
}
/* Search Statistics Banner */
.search-stats-banner[b-jjtvyfs7fi] {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
padding: 12px 20px;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #155724;
font-weight: 600;
position: relative;
overflow: hidden;
}
.search-stats-banner[b-jjtvyfs7fi]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #28a745, #20c997, #17a2b8);
animation: wave-b-jjtvyfs7fi 3s ease-in-out infinite;
}
@keyframes wave-b-jjtvyfs7fi {
0%, 100% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
}
.search-stats-banner i[b-jjtvyfs7fi] {
color: #28a745;
font-size: 16px;
}
/* Horizontal Filter Bar */
.horizontal-filter-bar[b-jjtvyfs7fi] {
background: white;
padding: 16px 20px;
border-bottom: 1px solid #e9ecef;
}
.filter-options[b-jjtvyfs7fi] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 0;
overflow-y: auto;
max-height: 400px;
}
.filter-options[b-jjtvyfs7fi]::-webkit-scrollbar {
width: 4px;
}
.filter-options[b-jjtvyfs7fi]::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.filter-options[b-jjtvyfs7fi]::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 2px;
}
.filter-options[b-jjtvyfs7fi]::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* Filter Pills - RedBus Style */
.filter-pill[b-jjtvyfs7fi] {
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
width: 100%;
position: relative;
overflow: hidden;
}
.filter-pill[b-jjtvyfs7fi]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.1), transparent);
transition: left 0.5s ease;
}
.filter-pill:hover[b-jjtvyfs7fi]::before {
left: 100%;
}
.filter-pill:hover[b-jjtvyfs7fi] {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.filter-pill.active[b-jjtvyfs7fi] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
transform: translateY(-1px);
}
.filter-pill.active[b-jjtvyfs7fi]::before {
display: none;
}
.filter-pill i[b-jjtvyfs7fi] {
font-size: 12px;
transition: all 0.3s ease;
}
.filter-pill:hover i[b-jjtvyfs7fi] {
transform: scale(1.1);
}
.filter-pill.active i[b-jjtvyfs7fi] {
transform: scale(1.1);
}
.filter-left[b-jjtvyfs7fi] {
display: flex;
align-items: center;
gap: 8px;
}
.filter-pill span[b-jjtvyfs7fi] {
font-size: 14px;
font-weight: 500;
}
.filter-count[b-jjtvyfs7fi] {
color: #6c757d;
font-weight: 600;
font-size: 12px;
}
.filter-pill.active .filter-count[b-jjtvyfs7fi] {
color: rgba(255, 255, 255, 0.8);
}
/* Selected Filters */
.selected-filters[b-jjtvyfs7fi] {
background: #f8f9fa;
padding: 16px 20px;
border-bottom: 1px solid #e9ecef;
}
.selected-header[b-jjtvyfs7fi] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.selected-count[b-jjtvyfs7fi] {
font-size: 14px;
font-weight: 600;
color: #495057;
}
.clear-all-btn[b-jjtvyfs7fi] {
background: #dc3545;
border: none;
color: white;
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
}
.clear-all-btn:hover[b-jjtvyfs7fi] {
background: #c82333;
transform: translateY(-1px);
}
.clear-all-btn i[b-jjtvyfs7fi] {
font-size: 10px;
}
.selected-tags[b-jjtvyfs7fi] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.selected-tag[b-jjtvyfs7fi] {
background: #dc3545;
color: white;
padding: 4px 10px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3);
}
.selected-tag:hover[b-jjtvyfs7fi] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
}
.selected-tag i[b-jjtvyfs7fi] {
font-size: 10px;
opacity: 0.8;
}
.selected-tag:hover i[b-jjtvyfs7fi] {
opacity: 1;
}
/* Mobile Responsive Design */
@media (max-width: 768px) {
.ai-filter-section[b-jjtvyfs7fi] {
padding: 16px;
}
.ai-filter-title[b-jjtvyfs7fi] {
font-size: 20px;
}
.ai-filter-title i[b-jjtvyfs7fi] {
font-size: 18px;
}
.ai-subtitle[b-jjtvyfs7fi] {
font-size: 13px;
}
.ai-input[b-jjtvyfs7fi] {
padding: 12px 14px;
font-size: 13px;
}
.ai-suggest-btn[b-jjtvyfs7fi] {
width: 44px;
height: 44px;
padding: 12px;
}
.search-stats-banner[b-jjtvyfs7fi] {
padding: 10px 16px;
font-size: 13px;
}
.horizontal-filter-bar[b-jjtvyfs7fi] {
padding: 12px 16px;
}
.filter-pill[b-jjtvyfs7fi] {
padding: 8px 14px;
font-size: 14px;
gap: 5px;
}
.filter-pill i[b-jjtvyfs7fi] {
font-size: 13px;
}
.filter-pill span[b-jjtvyfs7fi] {
font-size: 13px;
}
.filter-count[b-jjtvyfs7fi] {
font-size: 12px;
}
.selected-filters[b-jjtvyfs7fi] {
padding: 12px 16px;
}
.selected-count[b-jjtvyfs7fi] {
font-size: 13px;
}
.clear-all-btn[b-jjtvyfs7fi] {
padding: 5px 10px;
font-size: 11px;
}
.selected-tag[b-jjtvyfs7fi] {
padding: 3px 8px;
font-size: 11px;
}
}
@media (max-width: 480px) {
.ai-filter-section[b-jjtvyfs7fi] {
padding: 12px;
}
.ai-filter-title[b-jjtvyfs7fi] {
font-size: 20px;
}
.ai-subtitle[b-jjtvyfs7fi] {
font-size: 14px;
}
.ai-input[b-jjtvyfs7fi] {
padding: 12px 14px;
font-size: 14px;
}
.ai-suggest-btn[b-jjtvyfs7fi] {
width: 40px;
height: 40px;
padding: 10px;
}
.search-stats-banner[b-jjtvyfs7fi] {
padding: 8px 12px;
font-size: 12px;
}
.horizontal-filter-bar[b-jjtvyfs7fi] {
padding: 8px 12px;
}
.filter-pill[b-jjtvyfs7fi] {
padding: 7px 12px;
font-size: 13px;
}
.selected-filters[b-jjtvyfs7fi] {
padding: 10px 14px;
}
.selected-count[b-jjtvyfs7fi] {
font-size: 14px;
}
.clear-all-btn[b-jjtvyfs7fi] {
padding: 6px 10px;
font-size: 12px;
}
.selected-tag[b-jjtvyfs7fi] {
padding: 4px 8px;
font-size: 12px;
}
}
/* Animation Keyframes */
@keyframes filterPulse-b-jjtvyfs7fi {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.filter-pill.active[b-jjtvyfs7fi] {
animation: filterPulse-b-jjtvyfs7fi 0.3s ease;
}
@keyframes slideIn-b-jjtvyfs7fi {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.filter-pill[b-jjtvyfs7fi] {
animation: slideIn-b-jjtvyfs7fi 0.3s ease;
}
/* _content/HappyBus.Ux/Components/CustomComponents/Grid.razor.rz.scp.css */
/* Search Results Container */
.search-results-container[b-4w7gyvf6v5] {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
min-height: 100vh;
}
/* Results Header */
.results-header[b-4w7gyvf6v5] {
background: white;
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
}
.results-count[b-4w7gyvf6v5] {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 20px;
}
.count-number[b-4w7gyvf6v5] {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
}
.count-text[b-4w7gyvf6v5] {
font-size: 16px;
color: #6c757d;
font-weight: 500;
}
/* Sorting Bar */
.sorting-bar[b-4w7gyvf6v5] {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid #e9ecef;
}
.sort-label[b-4w7gyvf6v5] {
font-size: 14px;
font-weight: 600;
color: #495057;
margin-right: 20px;
}
.sort-options[b-4w7gyvf6v5] {
display: flex;
gap: 16px;
align-items: center;
}
.sort-option[b-4w7gyvf6v5] {
background: none;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
color: #6c757d;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
.sort-option:hover[b-4w7gyvf6v5] {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
}
.sort-option.active[b-4w7gyvf6v5] {
background: #e74c3c;
border-color: #e74c3c;
color: white;
}
.sort-option i[b-4w7gyvf6v5] {
font-size: 12px;
}
/* Bus Results Grid */
.bus-results-grid[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Bus Card */
.bus-card[b-4w7gyvf6v5] {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
margin-bottom: 16px;
}
.bus-card:hover[b-4w7gyvf6v5] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
/* Bus Card Content */
.bus-card-content[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Top Section: Operator Info and Rating */
.bus-card-top[b-4w7gyvf6v5] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
/* Middle Section: Timing and Seats */
.bus-card-middle[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Bottom Section: New Bus Tag, Price and View Seats */
.bus-card-bottom[b-4w7gyvf6v5] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding-top: 16px;
border-top: 2px dashed #e9ecef;
}
/* Timing and Seats Section */
.timing-seats-section[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 6px;
}
.time-display[b-4w7gyvf6v5] {
font-size: 22px;
font-weight: 700;
color: #2c3e50;
display: flex;
align-items: center;
gap: 6px;
}
.departure-time[b-4w7gyvf6v5] {
color: #2c3e50;
}
.time-separator[b-4w7gyvf6v5] {
color: #6c757d;
font-weight: 400;
}
.arrival-time[b-4w7gyvf6v5] {
color: #6c757d;
font-weight: 500;
}
.journey-details[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 6px;
}
.duration[b-4w7gyvf6v5] {
background: #f8f9fa;
color: #495057;
padding: 3px 6px;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
width: fit-content;
}
.seats-info[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #6c757d;
}
.seat-count[b-4w7gyvf6v5] {
color: #6c757d;
}
.single-seats[b-4w7gyvf6v5] {
color: #fd7e14;
font-weight: 600;
}
/* Operator Section */
.operator-section[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.operator-name-row[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 6px;
}
.operator-name-row i[b-4w7gyvf6v5] {
color: #6c757d;
font-size: 14px;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin: 0;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 13px;
color: #6c757d;
margin: 0;
font-weight: 500;
}
/* New Bus Tag */
.new-bus-tag[b-4w7gyvf6v5] {
background: #e3f2fd;
color: #1976d2;
padding: 4px 8px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
width: fit-content;
}
/* Price Action Section */
.price-action-section[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 16px;
}
.price-info[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 22px;
font-weight: 700;
color: #2c3e50;
}
.price-suffix[b-4w7gyvf6v5] {
font-size: 11px;
color: #6c757d;
font-weight: 500;
}
.rating-badge[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.rating-top[b-4w7gyvf6v5] {
background: transparent;
color: #495057;
padding: 4px 8px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 3px;
font-size: 12px;
font-weight: 600;
box-shadow: none;
}
.rating-text[b-4w7gyvf6v5] {
font-size: 12px;
font-weight: 700;
color: #495057;
}
.rating-badge i[b-4w7gyvf6v5] {
color: #495057;
font-size: 10px;
}
.rating-count[b-4w7gyvf6v5] {
background: transparent;
color: #28a745;
padding: 3px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
text-align: center;
min-width: 35px;
}
.view-seats-btn[b-4w7gyvf6v5] {
background: #e74c3c;
border: none;
color: white;
padding: 10px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);
min-width: 100px;
justify-content: center;
}
.view-seats-btn:hover[b-4w7gyvf6v5] {
background: #c0392b;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}
.view-seats-btn i[b-4w7gyvf6v5] {
font-size: 12px;
}
.rating-badge[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 60px;
flex-shrink: 0;
}
.rating-top[b-4w7gyvf6v5] {
background: transparent;
color: #495057;
padding: 6px 10px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 600;
box-shadow: none;
}
.rating-badge i[b-4w7gyvf6v5] {
color: #495057;
font-size: 12px;
}
.rating-text[b-4w7gyvf6v5] {
font-size: 14px;
font-weight: 700;
color: #495057;
}
.rating-count[b-4w7gyvf6v5] {
background: #90EE90;
color: #333;
padding: 4px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
text-align: center;
min-width: 40px;
}
.timing-section[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
min-width: 120px;
}
.time-display[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
color: #2c3e50;
}
.departure-time[b-4w7gyvf6v5] {
color: #2c3e50;
}
.time-separator[b-4w7gyvf6v5] {
color: #6c757d;
font-weight: 400;
}
.arrival-time[b-4w7gyvf6v5] {
color: #6c757d;
font-weight: 500;
}
.journey-details[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.duration[b-4w7gyvf6v5] {
font-size: 12px;
color: #6c757d;
font-weight: 500;
}
/* Bus Card Body */
.bus-card-body[b-4w7gyvf6v5] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.journey-info[b-4w7gyvf6v5] {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.route-display[b-4w7gyvf6v5] {
display: flex;
align-items: center;
justify-content: center;
}
.route-points[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
max-width: 400px;
}
.point[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.point-icon[b-4w7gyvf6v5] {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.point-icon i[b-4w7gyvf6v5] {
font-size: 12px;
color: #e74c3c;
}
.point.departure .point-icon i[b-4w7gyvf6v5] {
color: #e74c3c;
}
.point.arrival .point-icon i[b-4w7gyvf6v5] {
color: #28a745;
}
.point-info[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 2px;
}
.point-info .time[b-4w7gyvf6v5] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
line-height: 1;
}
.point-info .label[b-4w7gyvf6v5] {
font-size: 11px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.route-line[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
max-width: 200px;
}
.line[b-4w7gyvf6v5] {
flex: 1;
height: 2px;
background: linear-gradient(90deg, #e74c3c, #f39c12);
border-radius: 1px;
}
.duration[b-4w7gyvf6v5] {
background: #f8f9fa;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: #495057;
white-space: nowrap;
border: 1px solid #e9ecef;
}
.seats-info[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #6c757d;
}
.seat-count[b-4w7gyvf6v5] {
color: #6c757d;
}
.single-seats[b-4w7gyvf6v5] {
color: #f39c12;
font-weight: 600;
}
/* Price Section */
.price-info[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 20px;
font-weight: 700;
color: #2c3e50;
line-height: 1;
}
.price-suffix[b-4w7gyvf6v5] {
font-size: 12px;
color: #6c757d;
font-weight: 500;
}
/* Bus Card Footer */
.bus-card-footer[b-4w7gyvf6v5] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding-top: 16px;
border-top: 2px dashed #e9ecef;
}
.tags-section[b-4w7gyvf6v5] {
display: flex;
gap: 8px;
}
.new-bus-tag[b-4w7gyvf6v5] {
background: #e3f2fd;
color: #1976d2;
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.price-action-section[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 16px;
}
.view-seats-btn[b-4w7gyvf6v5] {
background: #e74c3c;
border: none;
color: white;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}
.view-seats-btn:hover[b-4w7gyvf6v5] {
background: #c0392b;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}
/* Loading Container */
.loading-container[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.loading-spinner[b-4w7gyvf6v5] {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #e74c3c;
border-radius: 50%;
animation: spin-b-4w7gyvf6v5 1s linear infinite;
margin-bottom: 16px;
}
@keyframes spin-b-4w7gyvf6v5 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-container p[b-4w7gyvf6v5] {
color: #6c757d;
font-size: 16px;
font-weight: 500;
}
/* Responsive Design - Progressive scaling */
@media (max-width: 1024px) and (min-width: 769px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 16px;
max-width: 1000px;
margin: 0 auto;
}
.bus-card[b-4w7gyvf6v5] {
padding: 20px;
margin-bottom: 16px;
border-radius: 16px;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 20px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 14px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 26px;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 12px 24px;
font-size: 15px;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 12px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.bus-card[b-4w7gyvf6v5] {
padding: 18px;
margin-bottom: 14px;
border-radius: 14px;
width: 100%;
box-sizing: border-box;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 21px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 15px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 26px;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 12px 22px;
font-size: 16px;
}
}
/* Specific breakpoint for screens around 659px */
@media (max-width: 659px) and (min-width: 481px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 10px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.bus-card[b-4w7gyvf6v5] {
padding: 16px;
margin-bottom: 12px;
border-radius: 12px;
width: 100%;
box-sizing: border-box;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 20px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 14px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 24px;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 11px 20px;
font-size: 15px;
}
}
/* Fix for screens between 320px and 480px */
@media (max-width: 480px) and (min-width: 321px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 8px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
margin: 0;
}
.bus-card[b-4w7gyvf6v5] {
padding: 16px;
margin-bottom: 12px;
border-radius: 12px;
width: 100%;
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 18px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 12px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 22px;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 10px 18px;
font-size: 13px;
min-width: 85px;
}
}
@media (max-width: 768px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 8px;
background: white;
}
.results-header[b-4w7gyvf6v5] {
padding: 16px;
margin-bottom: 16px;
border-radius: 12px;
}
.results-count[b-4w7gyvf6v5] {
margin-bottom: 16px;
}
.count-number[b-4w7gyvf6v5] {
font-size: 28px;
}
.count-text[b-4w7gyvf6v5] {
font-size: 16px;
}
.sorting-bar[b-4w7gyvf6v5] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding-top: 12px;
}
.sort-label[b-4w7gyvf6v5] {
font-size: 15px;
margin-right: 0;
margin-bottom: 8px;
}
.sort-options[b-4w7gyvf6v5] {
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.sort-option[b-4w7gyvf6v5] {
padding: 8px 14px;
font-size: 14px;
flex: 1;
min-width: 80px;
justify-content: center;
}
.bus-card[b-4w7gyvf6v5] {
padding: 16px;
margin-bottom: 12px;
border-radius: 12px;
}
.bus-card-header[b-4w7gyvf6v5] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 18px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 13px;
}
.rating-badge[b-4w7gyvf6v5] {
padding: 6px 10px;
font-size: 12px;
align-self: flex-start;
}
.bus-card-body[b-4w7gyvf6v5] {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.time-display[b-4w7gyvf6v5] {
width: 100%;
justify-content: space-between;
gap: 8px;
}
.time[b-4w7gyvf6v5] {
font-size: 20px;
}
.label[b-4w7gyvf6v5] {
font-size: 10px;
}
.journey-line[b-4w7gyvf6v5] {
max-width: 80px;
gap: 4px;
}
.duration[b-4w7gyvf6v5] {
font-size: 10px;
padding: 2px 6px;
}
.seats-info[b-4w7gyvf6v5] {
font-size: 13px;
margin-top: 8px;
}
.price-section[b-4w7gyvf6v5] {
text-align: left;
width: 100%;
}
.price-info[b-4w7gyvf6v5] {
align-items: flex-start;
}
.price-label[b-4w7gyvf6v5] {
font-size: 11px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 24px;
}
.bus-card-footer[b-4w7gyvf6v5] {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding-top: 16px;
}
.boarding-points-btn[b-4w7gyvf6v5],
.view-seats-btn[b-4w7gyvf6v5] {
justify-content: center;
padding: 12px 16px;
font-size: 13px;
}
.view-seats-btn[b-4w7gyvf6v5] {
background: #e74c3c;
order: 1;
}
.boarding-points-btn[b-4w7gyvf6v5] {
order: 2;
}
}
@media (max-width: 480px) and (min-width: 361px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 6px;
background: white;
width: 100%;
box-sizing: border-box;
margin: 0;
}
.bus-card[b-4w7gyvf6v5] {
padding: 14px;
margin-bottom: 10px;
border-radius: 10px;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 18px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 13px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 22px;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 11px 18px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 4px;
background: white;
width: 100%;
box-sizing: border-box;
margin: 0;
}
.results-header[b-4w7gyvf6v5] {
padding: 12px;
margin-bottom: 12px;
border-radius: 8px;
}
.results-count[b-4w7gyvf6v5] {
margin-bottom: 12px;
}
.count-number[b-4w7gyvf6v5] {
font-size: 24px;
}
.count-text[b-4w7gyvf6v5] {
font-size: 14px;
}
.sorting-bar[b-4w7gyvf6v5] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding-top: 8px;
}
.sort-label[b-4w7gyvf6v5] {
font-size: 14px;
margin-right: 0;
margin-bottom: 6px;
}
.sort-options[b-4w7gyvf6v5] {
flex-wrap: wrap;
gap: 6px;
width: 100%;
}
.sort-option[b-4w7gyvf6v5] {
padding: 6px 10px;
font-size: 13px;
flex: 1;
min-width: 60px;
justify-content: center;
}
.bus-card[b-4w7gyvf6v5] {
padding: 16px;
margin-bottom: 12px;
border-radius: 12px;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
width: 100%;
box-sizing: border-box;
overflow: hidden;
margin-left: 0;
margin-right: 0;
}
/* Mobile Bus Card Layout */
.bus-card-content[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.bus-card-top[b-4w7gyvf6v5] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.bus-card-middle[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.bus-card-bottom[b-4w7gyvf6v5] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-top: 12px;
border-top: 1px solid #e9ecef;
width: 100%;
}
/* Operator Section */
.operator-section[b-4w7gyvf6v5] {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.operator-name-row[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 8px;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin: 0;
line-height: 1.2;
}
.rating-row[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 6px;
}
.rating-stars[b-4w7gyvf6v5] {
display: flex;
gap: 1px;
}
.rating-stars i[b-4w7gyvf6v5] {
color: #ffc107;
font-size: 12px;
}
.rating-text[b-4w7gyvf6v5] {
font-size: 14px;
font-weight: 600;
color: #6c757d;
}
.rating-count[b-4w7gyvf6v5] {
font-size: 12px;
color: #6c757d;
}
/* Duration Badge */
.duration-badge[b-4w7gyvf6v5] {
display: flex;
align-items: center;
gap: 4px;
background: #f8f9fa;
padding: 6px 10px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #495057;
flex-shrink: 0;
}
.duration-badge i[b-4w7gyvf6v5] {
color: #2196f3;
font-size: 12px;
}
/* Timing Section */
.timing-section[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.departure-info[b-4w7gyvf6v5], .arrival-info[b-4w7gyvf6v5] {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.departure-info:last-child[b-4w7gyvf6v5], .arrival-info:last-child[b-4w7gyvf6v5] {
border-bottom: none;
}
.time[b-4w7gyvf6v5] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
min-width: 60px;
}
.label[b-4w7gyvf6v5] {
font-size: 14px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Bus Info Section */
.bus-info-section[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.bus-type-info[b-4w7gyvf6v5] {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
color: #6c757d;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.bus-type-info i[b-4w7gyvf6v5] {
color: #2196f3;
font-size: 14px;
}
.amenities[b-4w7gyvf6v5] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
.amenity[b-4w7gyvf6v5] {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: #6c757d;
border-bottom: none;
}
.amenity:last-child[b-4w7gyvf6v5] {
border-bottom: none;
}
.amenity i[b-4w7gyvf6v5] {
color: #2196f3;
font-size: 16px;
min-width: 20px;
}
/* Price Section */
.price-section[b-4w7gyvf6v5] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
}
.price-suffix[b-4w7gyvf6v5] {
font-size: 12px;
color: #6c757d;
font-weight: 500;
}
.view-seats-btn[b-4w7gyvf6v5] {
background: #e74c3c;
border: none;
color: white;
padding: 10px 16px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
min-width: 100px;
justify-content: center;
white-space: nowrap;
flex-shrink: 0;
}
.view-seats-btn:hover[b-4w7gyvf6v5] {
background: #c0392b;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(231, 76, 60, 0.4);
}
.view-seats-btn i[b-4w7gyvf6v5] {
font-size: 12px;
}
}
/* Ensure bus type text displays properly on all screens */
.bus-type[b-4w7gyvf6v5] {
white-space: normal !important;
word-wrap: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
display: inline-block;
max-width: 100%;
line-height: 1.2 !important;
}
.operator-name[b-4w7gyvf6v5] {
white-space: normal !important;
word-wrap: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
display: inline-block;
max-width: 100%;
line-height: 1.2 !important;
}
/* Force proper text display for all screen sizes */
@media (min-width: 321px) {
.bus-type[b-4w7gyvf6v5] {
white-space: normal !important;
word-wrap: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
display: inline-block !important;
max-width: 100% !important;
line-height: 1.2 !important;
text-align: left !important;
}
.operator-name[b-4w7gyvf6v5] {
white-space: normal !important;
word-wrap: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
display: inline-block !important;
max-width: 100% !important;
line-height: 1.2 !important;
text-align: left !important;
}
}
/* Extra small screens */
@media (max-width: 360px) and (min-width: 321px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 3px;
margin: 0;
}
.bus-card[b-4w7gyvf6v5] {
padding: 10px;
margin-bottom: 8px;
width: 100%;
margin-left: 0;
margin-right: 0;
border-radius: 8px;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 14px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 11px;
}
.price-action-section[b-4w7gyvf6v5] {
gap: 10px;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 8px 12px;
font-size: 10px;
min-width: 75px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 16px;
}
}
@media (max-width: 360px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 2px;
margin: 0;
}
.bus-card[b-4w7gyvf6v5] {
padding: 8px;
margin-bottom: 6px;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 15px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 12px;
}
.price-action-section[b-4w7gyvf6v5] {
gap: 8px;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 8px 12px;
font-size: 11px;
min-width: 70px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 16px;
}
}
/* Unified breakpoint for screens 321px to 480px */
@media (min-width: 321px) and (max-width: 480px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 6px;
margin: 0;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
.bus-card[b-4w7gyvf6v5] {
padding: 14px;
margin-bottom: 10px;
width: 100%;
margin-left: 0;
margin-right: 0;
border-radius: 12px;
box-sizing: border-box;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 17px;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 13px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 22px;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 11px 18px;
font-size: 13px;
min-width: 85px;
}
}
/* Very small screens (320px and below) */
@media (max-width: 320px) {
.search-results-container[b-4w7gyvf6v5] {
padding: 2px;
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.bus-card[b-4w7gyvf6v5] {
padding: 8px;
margin-bottom: 6px;
width: calc(100% - 4px);
margin-left: 2px;
margin-right: 2px;
border-radius: 8px;
box-sizing: border-box;
overflow: hidden;
}
.bus-card-content[b-4w7gyvf6v5] {
gap: 6px;
overflow: hidden;
width: 100%;
}
.bus-card-top[b-4w7gyvf6v5] {
gap: 6px;
overflow: hidden;
width: 100%;
}
.bus-card-middle[b-4w7gyvf6v5] {
gap: 4px;
overflow: hidden;
width: 100%;
}
.bus-card-bottom[b-4w7gyvf6v5] {
gap: 6px;
padding-top: 6px;
overflow: hidden;
width: 100%;
}
.operator-name[b-4w7gyvf6v5] {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.bus-type[b-4w7gyvf6v5] {
font-size: 9px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.price-action-section[b-4w7gyvf6v5] {
gap: 6px;
overflow: hidden;
width: 100%;
justify-content: space-between;
}
.view-seats-btn[b-4w7gyvf6v5] {
padding: 4px 8px;
font-size: 8px;
min-width: 60px;
}
.price-amount[b-4w7gyvf6v5] {
font-size: 12px;
}
.price-suffix[b-4w7gyvf6v5] {
font-size: 8px;
}
}
/* _content/HappyBus.Ux/Components/CustomComponents/MobileFilter.razor.rz.scp.css */
.search-result[b-51fnvdzcjq] {
display: flex;
height: calc(100vh - 80px);
flex-direction: row;
margin: 0 auto;
overflow: hidden;
max-width: 100%;
gap: 10px;
}
.header[b-51fnvdzcjq] {
display: none;
}
.header[b-51fnvdzcjq] {
justify-content: space-between;
align-items: center;
padding: 5px;
border-bottom: 1px solid #e0e0e0;
background-color: white;
border-radius: 5px;
}
@media screen and (max-width: 768px) {
.header[b-51fnvdzcjq] {
display: flex;
}
}
.left-section[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 10px;
}
.back-arrow[b-51fnvdzcjq] {
font-size: 22px;
cursor: pointer;
}
.route[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
}
.route-title[b-51fnvdzcjq] {
font-size: 16px;
font-weight: bold;
}
.route-title span[b-51fnvdzcjq] {
color: #555;
font-weight: normal;
}
.buses-count[b-51fnvdzcjq] {
font-size: 13px;
color: #777;
}
.right-section[b-51fnvdzcjq] {
background-color: #fde8e8;
border-radius: 20px;
padding: 5px 12px;
text-align: center;
}
.date[b-51fnvdzcjq] {
font-size: 14px;
font-weight: bold;
color: #000;
}
.day[b-51fnvdzcjq] {
font-size: 12px;
color: #777;
}
@media screen and (max-width: 768px) {
.desktop-only[b-51fnvdzcjq] {
display: none !important;
}
}
/* Mobile Header for Search Results */
.mobile-search-header[b-51fnvdzcjq] {
display: none;
background: #394560;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.mobile-header-content[b-51fnvdzcjq] {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
min-height: 60px;
}
.back-to-search-btn[b-51fnvdzcjq] {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.back-to-search-btn:hover[b-51fnvdzcjq] {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.mobile-search-info[b-51fnvdzcjq] {
flex: 1;
min-width: 0;
overflow: hidden;
}
.route-info[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
color: white;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.route-arrow[b-51fnvdzcjq] {
color: white;
font-size: 18px;
margin: 0 8px;
opacity: 1;
display: inline-block;
flex-shrink: 0;
font-weight: 600;
line-height: 1;
}
.from-city[b-51fnvdzcjq], .to-city[b-51fnvdzcjq] {
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bus-count[b-51fnvdzcjq] {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.date-badge[b-51fnvdzcjq] {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 6px 10px;
border-radius: 16px;
text-align: center;
min-width: 60px;
max-width: 80px;
display: flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.date-icon[b-51fnvdzcjq] {
font-size: 10px;
opacity: 0.9;
flex-shrink: 0;
}
.date-content[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
overflow: hidden;
}
.date-day[b-51fnvdzcjq] {
font-size: 10px;
font-weight: 600;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.date-weekday[b-51fnvdzcjq] {
font-size: 9px;
font-weight: 500;
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* RedBus Style Mobile Filter Bar */
.mobile-filter-bar[b-51fnvdzcjq] {
padding: 16px 20px;
background: white;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e9ecef;
position: relative;
overflow: hidden;
}
.mobile-filter-bar[b-51fnvdzcjq]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #dc3545, #fd7e14, #20c997, #6f42c1);
animation: shimmer-b-51fnvdzcjq 3s ease-in-out infinite;
}
@keyframes shimmer-b-51fnvdzcjq {
0%, 100% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
}
.filter-options[b-51fnvdzcjq] {
display: flex;
gap: 12px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
padding: 4px 0;
scroll-behavior: smooth;
}
.filter-options[b-51fnvdzcjq]::-webkit-scrollbar {
display: none;
}
/* RedBus Style Filter Pills */
.filter-pill[b-51fnvdzcjq] {
background: white;
border: 1px solid #dee2e6;
border-radius: 20px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-width: fit-content;
position: relative;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.filter-pill[b-51fnvdzcjq]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.1), transparent);
transition: left 0.5s ease;
}
.filter-pill:hover[b-51fnvdzcjq]::before {
left: 100%;
}
.filter-pill:hover[b-51fnvdzcjq] {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.filter-pill.active[b-51fnvdzcjq] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
transform: translateY(-1px);
}
.filter-pill.active[b-51fnvdzcjq]::before {
display: none;
}
.filter-pill i[b-51fnvdzcjq] {
font-size: 12px;
transition: all 0.3s ease;
}
.filter-pill:hover i[b-51fnvdzcjq] {
transform: scale(1.1);
}
.filter-pill.active i[b-51fnvdzcjq] {
transform: scale(1.1);
}
.filter-pill span[b-51fnvdzcjq] {
font-size: 12px;
font-weight: 500;
}
.filter-count[b-51fnvdzcjq] {
color: #6c757d;
font-weight: 600;
font-size: 11px;
}
.filter-pill.active .filter-count[b-51fnvdzcjq] {
color: rgba(255, 255, 255, 0.8);
}
.show-filters-btn[b-51fnvdzcjq] {
background: #dc3545;
color: white;
border: none;
border-radius: 20px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
.show-filters-btn:hover[b-51fnvdzcjq] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}
.show-filters-btn i[b-51fnvdzcjq] {
font-size: 12px;
}
/* Mobile-specific improvements */
@media (max-width: 768px) {
.mobile-filter-bar[b-51fnvdzcjq] {
padding: 12px 16px;
gap: 12px;
}
.filter-pill[b-51fnvdzcjq] {
padding: 10px 14px;
font-size: 12px;
gap: 5px;
min-height: 40px;
}
.filter-pill i[b-51fnvdzcjq] {
font-size: 12px;
}
.filter-pill span[b-51fnvdzcjq] {
font-size: 11px;
}
.filter-count[b-51fnvdzcjq] {
font-size: 10px;
font-weight: 600;
}
.show-filters-btn[b-51fnvdzcjq] {
padding: 10px 16px;
font-size: 12px;
min-height: 40px;
}
.show-filters-btn i[b-51fnvdzcjq] {
font-size: 11px;
}
}
@media (max-width: 480px) {
.mobile-filter-bar[b-51fnvdzcjq] {
padding: 10px 12px;
gap: 10px;
}
.filter-pill[b-51fnvdzcjq] {
padding: 8px 12px;
font-size: 11px;
gap: 4px;
min-height: 36px;
}
.filter-pill i[b-51fnvdzcjq] {
font-size: 11px;
}
.filter-pill span[b-51fnvdzcjq] {
font-size: 10px;
}
.filter-count[b-51fnvdzcjq] {
font-size: 9px;
}
.show-filters-btn[b-51fnvdzcjq] {
padding: 8px 12px;
font-size: 11px;
min-height: 36px;
}
.show-filters-btn i[b-51fnvdzcjq] {
font-size: 10px;
}
}
/* Desktop only elements */
.desktop-only[b-51fnvdzcjq] {
display: block;
}
/* Desktop layout improvements */
@media (min-width: 769px) {
.search-results-layout[b-51fnvdzcjq] {
gap: 32px;
padding: 32px;
}
.filters-sidebar[b-51fnvdzcjq] {
width: 350px;
}
.results-main[b-51fnvdzcjq] {
flex: 1;
min-width: 0;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
padding: 24px;
}
}
/* Mobile only elements - hidden on desktop */
.mobile-filters-panel[b-51fnvdzcjq] {
display: none;
}
/* Hide elements when search results are shown */
.hide-on-search[b-51fnvdzcjq] {
display: none !important;
}
/* Mobile view when search results are shown */
@media (max-width: 768px) {
.hero-section[b-51fnvdzcjq] {
padding: 40px 0 60px 0;
min-height: 450px;
}
.content-wrapper[b-51fnvdzcjq] {
margin-top: -15px;
}
.title[b-51fnvdzcjq] {
font-size: 32px;
margin-bottom: 15px;
margin-top: 0;
}
.search-box[b-51fnvdzcjq] {
margin-top: 10px;
padding: 20px;
}
.mobile-search-header[b-51fnvdzcjq] {
display: block;
}
.mobile-filters-panel[b-51fnvdzcjq] {
display: block;
}
.mobile-header-content[b-51fnvdzcjq] {
padding: 12px 14px;
gap: 10px;
}
.route-info[b-51fnvdzcjq] {
font-size: 16px;
}
.route-arrow[b-51fnvdzcjq] {
font-size: 18px;
margin: 0 8px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-51fnvdzcjq] {
font-size: 14px;
}
.date-badge[b-51fnvdzcjq] {
padding: 4px 8px;
min-width: 50px;
max-width: 70px;
}
.date-day[b-51fnvdzcjq] {
font-size: 9px;
}
.date-weekday[b-51fnvdzcjq] {
font-size: 8px;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.hero-section[b-51fnvdzcjq] {
padding: 30px 0 50px 0;
min-height: 400px;
}
.content-wrapper[b-51fnvdzcjq] {
margin-top: -10px;
max-width: 95%;
padding: 0 15px;
}
.title[b-51fnvdzcjq] {
font-size: 28px;
margin-bottom: 12px;
margin-top: 0;
}
.search-box[b-51fnvdzcjq] {
margin-top: 8px;
padding: 16px;
}
.mobile-header-content[b-51fnvdzcjq] {
padding: 10px 12px;
gap: 8px;
}
.route-info[b-51fnvdzcjq] {
font-size: 15px;
}
.route-arrow[b-51fnvdzcjq] {
font-size: 16px;
margin: 0 6px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-51fnvdzcjq] {
font-size: 13px;
}
.date-badge[b-51fnvdzcjq] {
padding: 3px 6px;
min-width: 45px;
max-width: 60px;
}
.date-day[b-51fnvdzcjq] {
font-size: 8px;
}
.date-weekday[b-51fnvdzcjq] {
font-size: 7px;
}
.back-to-search-btn[b-51fnvdzcjq] {
width: 32px;
height: 32px;
font-size: 16px;
}
.mobile-filters-panel[b-51fnvdzcjq] {
display: block;
}
.hide-on-mobile[b-51fnvdzcjq] {
display: none !important;
}
.desktop-only[b-51fnvdzcjq] {
display: none !important;
}
.search-results-wrapper[b-51fnvdzcjq] {
margin-top: 0;
padding-top: 0;
}
.search-results-layout[b-51fnvdzcjq] {
padding: 4px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.mobile-filters-panel[b-51fnvdzcjq] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
display: block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
transform: translateY(100%);
border-radius: 16px 16px 0 0;
height: 75vh;
display: flex;
flex-direction: column;
}
.mobile-filters-panel.hide[b-51fnvdzcjq] {
transform: translateY(100%);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-filters-panel.show[b-51fnvdzcjq] {
transform: translateY(0);
opacity: 1;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Filter Modal Header */
.filter-modal-header[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #e9ecef;
background: white;
flex-shrink: 0;
}
.filter-modal-header h3[b-51fnvdzcjq] {
font-size: 16px;
font-weight: 700;
color: #333;
margin: 0;
}
.close-filter-btn[b-51fnvdzcjq] {
background: none;
border: none;
color: #666;
font-size: 18px;
cursor: pointer;
padding: 6px;
border-radius: 6px;
transition: all 0.3s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.close-filter-btn:hover[b-51fnvdzcjq] {
background: #f8f9fa;
color: #333;
}
/* Filter Modal Content - Two Column Layout */
.filter-modal-content[b-51fnvdzcjq] {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
}
/* Left Sidebar - Filter Categories */
.filter-categories[b-51fnvdzcjq] {
width: 40%;
background: #f8f9fa;
overflow: hidden;
border-right: 1px solid #e9ecef;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.filter-category[b-51fnvdzcjq] {
padding: 10px 14px;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 1px solid #e9ecef;
font-size: 12px;
color: #495057;
font-weight: 500;
flex-shrink: 0;
}
.filter-category:hover[b-51fnvdzcjq] {
background: #e9ecef;
}
.filter-category.active[b-51fnvdzcjq] {
background: white;
color: #dc3545;
font-weight: 600;
border-right: 3px solid #dc3545;
}
/* Right Panel - Filter Options */
.filter-options-panel[b-51fnvdzcjq] {
width: 60%;
background: white;
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.filter-option-item[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid #f8f9fa;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.filter-option-item:hover[b-51fnvdzcjq] {
background: #f8f9fa;
}
.filter-option-item.active[b-51fnvdzcjq] {
background: #fff3f3;
border-left: 3px solid #dc3545;
}
.filter-option-item.active .option-label[b-51fnvdzcjq] {
color: #dc3545;
font-weight: 600;
}
.filter-option-item.active .option-left i[b-51fnvdzcjq] {
color: #dc3545;
}
.option-left[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.option-left i[b-51fnvdzcjq] {
font-size: 14px;
color: #6c757d;
width: 18px;
text-align: center;
}
.option-details[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 1px;
}
.option-time[b-51fnvdzcjq] {
font-size: 11px;
color: #6c757d;
font-weight: 500;
}
.option-label[b-51fnvdzcjq] {
font-size: 13px;
color: #333;
font-weight: 500;
}
.option-right[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 10px;
}
.option-count[b-51fnvdzcjq] {
font-size: 11px;
color: #6c757d;
font-weight: 500;
}
.option-check[b-51fnvdzcjq] {
width: 16px;
height: 16px;
border: 2px solid #dee2e6;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.option-check.checked[b-51fnvdzcjq] {
background: #dc3545;
border-color: #dc3545;
}
.option-check.checked i[b-51fnvdzcjq] {
color: white;
font-size: 10px;
}
/* Radio Button Styles for Sort Options */
.option-radio[b-51fnvdzcjq] {
width: 18px;
height: 18px;
border: 2px solid #dee2e6;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
background: white;
}
.option-radio.checked[b-51fnvdzcjq] {
border-color: #dc3545;
background: #dc3545;
}
.radio-inner[b-51fnvdzcjq] {
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
/* Filter Modal Footer */
.filter-modal-footer[b-51fnvdzcjq] {
display: flex;
gap: 12px;
padding: 16px 20px;
border-top: 1px solid #e9ecef;
background: white;
flex-shrink: 0;
margin-top: auto;
}
.clear-all-btn[b-51fnvdzcjq] {
flex: 1;
background: white;
border: 2px solid #333;
color: #333;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.clear-all-btn:hover[b-51fnvdzcjq] {
background: #f8f9fa;
}
.apply-btn[b-51fnvdzcjq] {
flex: 1;
background: #dc3545;
border: 2px solid #dc3545;
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.apply-btn:hover[b-51fnvdzcjq] {
background: #c82333;
border-color: #c82333;
}
}
/* Responsive design for search results - Progressive scaling */
@media (max-width: 1024px) and (min-width: 769px) {
.search-results-layout[b-51fnvdzcjq] {
flex-direction: column;
gap: 20px;
padding: 16px;
max-width: 1000px;
margin: 0 auto;
}
.filters-sidebar[b-51fnvdzcjq] {
width: 100%;
}
.results-main[b-51fnvdzcjq] {
padding: 16px;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.search-results-layout[b-51fnvdzcjq] {
flex-direction: column;
gap: 16px;
padding: 12px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-51fnvdzcjq] {
width: 100%;
}
.results-main[b-51fnvdzcjq] {
padding: 12px;
width: 100%;
box-sizing: border-box;
}
}
/* Specific breakpoint for screens around 659px */
@media (max-width: 659px) and (min-width: 481px) {
.search-results-layout[b-51fnvdzcjq] {
flex-direction: column;
gap: 12px;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-51fnvdzcjq] {
width: 100%;
}
.results-main[b-51fnvdzcjq] {
padding: 10px;
width: 100%;
box-sizing: border-box;
}
}
/* Unified breakpoint for screens 321px to 480px */
@media (max-width: 480px) and (min-width: 321px) {
.search-results-layout[b-51fnvdzcjq] {
padding: 8px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
.results-main[b-51fnvdzcjq] {
padding: 8px;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
}
/* Responsive design for search results */
@media (max-width: 1024px) {
.search-results-layout[b-51fnvdzcjq] {
flex-direction: column;
gap: 20px;
}
.filters-sidebar[b-51fnvdzcjq] {
width: 100%;
}
}
/* Discount Offers Section Styles */
.discount-offers-section[b-51fnvdzcjq] {
padding: 40px 0;
background-color: #f0f8ff;
}
.section-header[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.section-header h2[b-51fnvdzcjq] {
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0;
}
.view-all[b-51fnvdzcjq] {
color: #FF6B6B;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
}
.view-all:hover[b-51fnvdzcjq] {
color: #FF8E53;
transform: translateX(2px);
}
/* About Section Styles */
.about-section[b-51fnvdzcjq] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.about-section[b-51fnvdzcjq]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://img.freepik.com/free-vector/abstract-wave-pattern-background_53876-115444.jpg');
background-size: cover;
opacity: 0.05;
z-index: 1;
}
.about-section .container[b-51fnvdzcjq] {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.about-section .section-header[b-51fnvdzcjq] {
text-align: center;
margin-bottom: 50px;
}
.about-section .section-header h2[b-51fnvdzcjq] {
font-size: 32px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.about-section .section-header h2[b-51fnvdzcjq]::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
border-radius: 3px;
}
.about-section .section-header p[b-51fnvdzcjq] {
font-size: 16px;
color: #666;
max-width: 700px;
margin: 15px auto 0;
}
.about-content[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 50px;
}
.about-image[b-51fnvdzcjq] {
flex: 1;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.about-image:hover[b-51fnvdzcjq] {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.about-image img[b-51fnvdzcjq] {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.about-image:hover img[b-51fnvdzcjq] {
transform: scale(1.05);
}
.about-experience[b-51fnvdzcjq] {
position: absolute;
bottom: 30px;
left: 30px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-experience .years[b-51fnvdzcjq] {
font-size: 32px;
font-weight: 800;
line-height: 1;
}
.about-experience .text[b-51fnvdzcjq] {
font-size: 14px;
font-weight: 500;
}
.about-text[b-51fnvdzcjq] {
flex: 1;
}
.about-text p[b-51fnvdzcjq] {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.about-stats[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
margin: 40px 0;
}
/* Desktop Layout */
.desktop-layout[b-51fnvdzcjq] {
display: none;
min-height: 100vh;
background: #f8f9fa;
}
/* Desktop Search Section */
.desktop-search-section[b-51fnvdzcjq] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 24px 0;
}
.search-container[b-51fnvdzcjq] {
max-width: 2000px;
margin: 0 auto;
padding: 0 20px;
}
.route-info[b-51fnvdzcjq] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.route-display[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 600;
color: #333;
}
.from-city[b-51fnvdzcjq], .to-city[b-51fnvdzcjq] {
color: #333;
font-weight: 700;
}
.route-display i[b-51fnvdzcjq] {
color: #dc3545;
font-size: 16px;
}
.bus-count[b-51fnvdzcjq] {
background: #dc3545;
color: white;
padding: 6px 12px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
}
.search-stats[b-51fnvdzcjq] {
background: #d4edda;
color: #155724;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
width: fit-content;
}
.search-stats i[b-51fnvdzcjq] {
color: #28a745;
font-size: 16px;
}
.search-form[b-51fnvdzcjq] {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Desktop Main Content */
.desktop-main-content[b-51fnvdzcjq] {
max-width: 1200px;
margin: 0 auto;
padding: 24px 20px;
display: flex;
gap: 24px;
min-height: calc(100vh - 300px);
}
/* Filters Sidebar */
.filters-sidebar[b-51fnvdzcjq] {
width: 280px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
height: fit-content;
position: sticky;
top: 120px;
}
.filters-header[b-51fnvdzcjq] {
padding: 20px 20px 16px 20px;
border-bottom: 1px solid #e9ecef;
}
.filters-header h3[b-51fnvdzcjq] {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #333;
}
.filter-options[b-51fnvdzcjq] {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-option[b-51fnvdzcjq] {
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.filter-option:hover[b-51fnvdzcjq] {
background: #f8f9fa;
border-color: #adb5bd;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.filter-option.active[b-51fnvdzcjq] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
.filter-option i[b-51fnvdzcjq] {
font-size: 16px;
flex-shrink: 0;
}
.filter-option span[b-51fnvdzcjq] {
font-size: 14px;
font-weight: 500;
}
.filter-count[b-51fnvdzcjq] {
color: #6c757d;
font-weight: 600;
font-size: 12px;
}
.filter-option.active .filter-count[b-51fnvdzcjq] {
color: rgba(255, 255, 255, 0.8);
}
/* Results Panel */
.results-panel[b-51fnvdzcjq] {
flex: 1;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
padding: 24px;
min-height: 600px;
}
.results-header[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: white;
border-bottom: 1px solid #e1e5e9;
margin-bottom: 8px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.results-header h2[b-51fnvdzcjq] {
font-size: 22px;
font-weight: 600;
color: #495057;
margin: 0 0 20px 0;
padding: 0;
border-bottom: 2px solid #e9ecef;
padding-bottom: 12px;
position: relative;
}
.results-header h2[b-51fnvdzcjq]::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: #007bff;
}
.sort-section[b-51fnvdzcjq] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
}
.sort-section span[b-51fnvdzcjq] {
font-size: 14px;
font-weight: 600;
color: #495057;
}
.sort-buttons[b-51fnvdzcjq] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
/* Bus Cards for Desktop */
.bus-cards[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 16px;
}
.bus-card[b-51fnvdzcjq] {
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.bus-card:hover[b-51fnvdzcjq] {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.card-header[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.operator-info[b-51fnvdzcjq] {
flex: 1;
}
.operator-name[b-51fnvdzcjq] {
font-size: 18px;
font-weight: 700;
color: #333;
margin: 0 0 6px 0;
}
.bus-type[b-51fnvdzcjq] {
font-size: 15px;
color: #6c757d;
margin: 0;
}
.rating-badge[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: transparent;
color: #6c757d;
padding: 8px 12px;
border-radius: 8px;
min-width: 60px;
border: none;
}
.rating[b-51fnvdzcjq] {
font-size: 14px;
font-weight: 700;
color: #495057;
}
.rating-count[b-51fnvdzcjq] {
font-size: 12px;
opacity: 1;
color: #28a745;
font-weight: 600;
}
.card-body[b-51fnvdzcjq] {
margin-bottom: 16px;
}
.timing-section[b-51fnvdzcjq] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
/* Mobile Timing Section - Reduced Margin */
@media (max-width: 480px) {
.timing-section[b-51fnvdzcjq] {
margin-bottom: 6px;
}
}
.departure[b-51fnvdzcjq], .arrival[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.time[b-51fnvdzcjq] {
font-size: 18px;
font-weight: 700;
color: #333;
}
.label[b-51fnvdzcjq] {
font-size: 11px;
color: #6c757d;
text-transform: uppercase;
font-weight: 500;
}
.duration[b-51fnvdzcjq] {
background: #f8f9fa;
color: #495057;
padding: 6px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
border: 1px solid #e9ecef;
}
.seats-info[b-51fnvdzcjq] {
font-size: 13px;
color: #6c757d;
text-align: center;
}
.card-footer[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px dashed #e9ecef;
}
.price-section[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Mobile Price Section - Reduced Gap */
@media (max-width: 480px) {
.price-section[b-51fnvdzcjq] {
gap: 2px;
}
}
.new-bus-tag[b-51fnvdzcjq] {
background: #e3f2fd;
color: #1976d2;
padding: 6px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
width: fit-content;
}
.price[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 1px;
}
.amount[b-51fnvdzcjq] {
font-size: 22px;
font-weight: 700;
color: #333;
}
.suffix[b-51fnvdzcjq] {
font-size: 14px;
color: #6c757d;
}
.view-seats-btn[b-51fnvdzcjq] {
background: #dc3545;
border: none;
color: white;
padding: 12px 18px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
.view-seats-btn:hover[b-51fnvdzcjq] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.view-seats-btn i[b-51fnvdzcjq] {
font-size: 12px;
}
/* Hide navbar when search results are shown - only on mobile */
@media (max-width: 1024px) {
body.search-results-active header[b-51fnvdzcjq] {
display: none !important;
}
}
/* Mobile Layout Styles */
.mobile-layout[b-51fnvdzcjq] {
display: none;
background: #f8f9fa;
min-height: 100vh;
}
/* Mobile Header */
.mobile-header[b-51fnvdzcjq] {
background: white;
color: #333;
padding: 16px 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e9ecef;
}
.header-content[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 16px;
}
.back-btn[b-51fnvdzcjq] {
background: none;
border: none;
color: #333;
font-size: 20px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.back-btn:hover[b-51fnvdzcjq] {
background: rgba(0, 0, 0, 0.05);
}
.route-info[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
flex: 1;
}
.route-info i[b-51fnvdzcjq] {
color: #dc3545;
font-size: 16px;
}
.date-info[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 8px;
background: #f8f9fa;
padding: 8px 12px;
border-radius: 12px;
font-size: 14px;
color: #333;
}
.date-details[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 2px;
}
.date-day[b-51fnvdzcjq] {
font-weight: 600;
font-size: 14px;
color: #333;
}
.date-weekday[b-51fnvdzcjq] {
font-size: 12px;
color: #666;
}
/* Bus Count Bar */
.bus-count-bar[b-51fnvdzcjq] {
background: white;
padding: 12px 20px;
border-bottom: 1px solid #e9ecef;
font-size: 18px;
font-weight: 700;
color: #333;
}
/* Filters Bar */
.filters-bar[b-51fnvdzcjq] {
background: white;
padding: 16px 20px;
display: flex;
gap: 12px;
overflow-x: auto;
border-bottom: 1px solid #e9ecef;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filters-bar[b-51fnvdzcjq]::-webkit-scrollbar {
display: none;
}
.filter-btn[b-51fnvdzcjq] {
background: white;
border: 2px solid #e9ecef;
border-radius: 20px;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
min-width: fit-content;
}
.filter-btn i[b-51fnvdzcjq] {
font-size: 16px;
width: 16px;
text-align: center;
}
.filter-btn:hover[b-51fnvdzcjq] {
border-color: #dc3545;
color: #dc3545;
transform: translateY(-1px);
}
.filter-btn.primary[b-51fnvdzcjq] {
background: #dc3545;
border-color: #dc3545;
color: white;
}
.filter-btn.active[b-51fnvdzcjq] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
/* Smart Filters Panel */
.smart-filters-panel[b-51fnvdzcjq] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 20px;
}
.filters-header[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.header-left[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
color: #333;
}
.close-btn[b-51fnvdzcjq] {
background: none;
border: none;
color: #666;
font-size: 20px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.close-btn:hover[b-51fnvdzcjq] {
background: #f8f9fa;
color: #333;
}
.search-stats-banner[b-51fnvdzcjq] {
background: #d4edda;
color: #155724;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.filter-options[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-option[b-51fnvdzcjq] {
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 16px;
font-size: 16px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.filter-option:hover[b-51fnvdzcjq] {
border-color: #dc3545;
color: #dc3545;
transform: translateY(-1px);
}
.filter-option.active[b-51fnvdzcjq] {
background: #dc3545;
border-color: #dc3545;
color: white;
}
.filter-left[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 12px;
}
.filter-count[b-51fnvdzcjq] {
font-size: 14px;
opacity: 0.8;
}
/* Results Section */
.results-section[b-51fnvdzcjq] {
padding: 20px;
}
.results-header[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
}
.results-count[b-51fnvdzcjq] {
font-size: 16px;
font-weight: 600;
color: #333;
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
padding: 8px 16px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
/* Removed bus emoji from results count */
.count-number[b-51fnvdzcjq] {
font-size: 24px;
font-weight: 700;
color: #28a745;
}
.count-text[b-51fnvdzcjq] {
color: #6c757d;
}
.sort-section[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 16px;
background: white;
padding: 20px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
width: 100%;
}
.sort-label[b-51fnvdzcjq] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.sort-label[b-51fnvdzcjq]::before {
content: "📊";
font-size: 20px;
}
.sort-buttons[b-51fnvdzcjq] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
width: 100%;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
/* Bus Cards */
.bus-cards[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Mobile Bus Cards - Reduced Gap */
@media (max-width: 768px) {
.bus-cards[b-51fnvdzcjq] {
gap: 8px;
}
}
@media (max-width: 480px) {
.bus-cards[b-51fnvdzcjq] {
gap: 4px;
}
}
.bus-card[b-51fnvdzcjq] {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
/* Mobile Bus Card - Reduced Padding */
@media (max-width: 768px) {
.bus-card[b-51fnvdzcjq] {
padding: 16px;
border-radius: 12px;
}
}
@media (max-width: 480px) {
.bus-card[b-51fnvdzcjq] {
padding: 8px;
border-radius: 8px;
}
}
/* Mobile Card Sections - Reduced Margins */
@media (max-width: 768px) {
.card-header[b-51fnvdzcjq] {
margin-bottom: 12px;
}
.card-body[b-51fnvdzcjq] {
margin-bottom: 12px;
}
}
@media (max-width: 480px) {
.card-header[b-51fnvdzcjq] {
margin-bottom: 6px;
}
.card-body[b-51fnvdzcjq] {
margin-bottom: 6px;
}
}
.bus-card:hover[b-51fnvdzcjq] {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.card-header[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.operator-info[b-51fnvdzcjq] {
flex: 1;
}
.operator-name[b-51fnvdzcjq] {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 4px;
}
.bus-type[b-51fnvdzcjq] {
font-size: 14px;
color: #666;
}
.rating-badge[b-51fnvdzcjq] {
background: transparent;
color: #6c757d;
padding: 8px 12px;
border-radius: 8px;
text-align: center;
min-width: 60px;
}
.rating[b-51fnvdzcjq] {
font-size: 14px;
font-weight: 700;
color: #495057;
}
.rating-count[b-51fnvdzcjq] {
font-size: 12px;
opacity: 1;
color: #28a745;
font-weight: 600;
}
.card-body[b-51fnvdzcjq] {
margin-bottom: 16px;
}
.timing-section[b-51fnvdzcjq] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.departure[b-51fnvdzcjq], .arrival[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.time[b-51fnvdzcjq] {
font-size: 20px;
font-weight: 700;
color: #333;
}
.label[b-51fnvdzcjq] {
font-size: 12px;
color: #666;
text-transform: uppercase;
font-weight: 500;
}
.duration[b-51fnvdzcjq] {
background: #f8f9fa;
color: #495057;
padding: 6px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
border: 1px solid #e9ecef;
}
.seats-info[b-51fnvdzcjq] {
text-align: center;
font-size: 14px;
color: #666;
margin-top: 8px;
}
/* Mobile Seats Info - Reduced Margin */
@media (max-width: 480px) {
.seats-info[b-51fnvdzcjq] {
margin-top: 4px;
font-size: 13px;
}
}
.card-footer[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid #e9ecef;
}
/* Mobile Card Footer - Reduced Padding */
@media (max-width: 480px) {
.card-footer[b-51fnvdzcjq] {
padding-top: 8px;
}
}
.price-section[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 4px;
}
.new-bus-tag[b-51fnvdzcjq] {
background: #e3f2fd;
color: #1976d2;
padding: 4px 8px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
width: fit-content;
}
.price[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 2px;
}
.amount[b-51fnvdzcjq] {
font-size: 20px;
font-weight: 700;
color: #333;
}
.suffix[b-51fnvdzcjq] {
font-size: 12px;
color: #666;
}
.view-seats-btn[b-51fnvdzcjq] {
background: #dc3545;
border: none;
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
/* Mobile View Seats Button - Reduced Padding */
@media (max-width: 480px) {
.view-seats-btn[b-51fnvdzcjq] {
padding: 8px 16px;
font-size: 13px;
gap: 4px;
}
}
.view-seats-btn:hover[b-51fnvdzcjq] {
background: #c82333;
transform: translateY(-1px);
}
/* Desktop Layout */
.desktop-layout[b-51fnvdzcjq] {
display: block;
}
/* Responsive Design */
@media (max-width: 1024px) {
.desktop-layout[b-51fnvdzcjq] {
display: none;
}
.mobile-layout[b-51fnvdzcjq] {
display: block;
}
}
@media (max-width: 768px) {
.mobile-header[b-51fnvdzcjq] {
padding: 14px 18px;
}
.route-info[b-51fnvdzcjq] {
font-size: 18px;
}
.date-info[b-51fnvdzcjq] {
padding: 8px 12px;
font-size: 15px;
}
.bus-count-bar[b-51fnvdzcjq] {
padding: 14px 20px;
font-size: 20px;
}
.filters-bar[b-51fnvdzcjq] {
padding: 14px 18px;
gap: 12px;
}
.filter-btn[b-51fnvdzcjq] {
padding: 10px 16px;
font-size: 15px;
}
.smart-filters-panel[b-51fnvdzcjq] {
padding: 18px;
}
.filter-option[b-51fnvdzcjq] {
padding: 16px;
font-size: 17px;
}
.results-section[b-51fnvdzcjq] {
padding: 18px;
}
.results-count[b-51fnvdzcjq] {
font-size: 20px;
padding: 10px 16px;
border-radius: 6px;
margin-bottom: 16px;
}
.sort-section[b-51fnvdzcjq] {
padding: 18px;
border-radius: 12px;
gap: 14px;
}
.sort-label[b-51fnvdzcjq] {
font-size: 16px;
}
.sort-buttons[b-51fnvdzcjq] {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
.bus-card[b-51fnvdzcjq] {
padding: 18px;
}
.operator-name[b-51fnvdzcjq] {
font-size: 18px;
}
.time[b-51fnvdzcjq] {
font-size: 20px;
}
.amount[b-51fnvdzcjq] {
font-size: 20px;
}
}
@media (max-width: 480px) {
.mobile-header[b-51fnvdzcjq] {
padding: 12px 14px;
}
.header-content[b-51fnvdzcjq] {
gap: 14px;
}
.route-info[b-51fnvdzcjq] {
font-size: 17px;
}
.date-info[b-51fnvdzcjq] {
padding: 7px 10px;
font-size: 14px;
}
.bus-count-bar[b-51fnvdzcjq] {
padding: 12px 16px;
font-size: 19px;
}
.filters-bar[b-51fnvdzcjq] {
padding: 12px 14px;
gap: 10px;
}
.filter-btn[b-51fnvdzcjq] {
padding: 8px 14px;
font-size: 14px;
}
.smart-filters-panel[b-51fnvdzcjq] {
padding: 14px;
}
.filter-option[b-51fnvdzcjq] {
padding: 14px;
font-size: 16px;
}
.results-section[b-51fnvdzcjq] {
padding: 14px;
}
.results-count[b-51fnvdzcjq] {
font-size: 18px;
padding: 8px 12px;
border-radius: 4px;
margin-bottom: 12px;
}
.sort-section[b-51fnvdzcjq] {
padding: 16px;
border-radius: 10px;
gap: 12px;
}
.sort-label[b-51fnvdzcjq] {
font-size: 15px;
}
.sort-buttons[b-51fnvdzcjq] {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
.bus-card[b-51fnvdzcjq] {
padding: 14px;
}
.operator-name[b-51fnvdzcjq] {
font-size: 17px;
}
.time[b-51fnvdzcjq] {
font-size: 18px;
}
.amount[b-51fnvdzcjq] {
font-size: 18px;
}
.view-seats-btn[b-51fnvdzcjq] {
padding: 12px 18px;
font-size: 15px;
}
}
@media (max-width: 360px) {
.mobile-header[b-51fnvdzcjq] {
padding: 10px 12px;
}
.route-info[b-51fnvdzcjq] {
font-size: 16px;
}
.bus-count[b-51fnvdzcjq] {
font-size: 13px;
}
.date-info[b-51fnvdzcjq] {
padding: 6px 8px;
font-size: 13px;
}
.bus-count-bar[b-51fnvdzcjq] {
padding: 10px 14px;
font-size: 18px;
}
.results-count[b-51fnvdzcjq] {
font-size: 18px;
padding: 10px 14px;
border-radius: 6px;
margin-bottom: 10px;
}
.sort-section[b-51fnvdzcjq] {
padding: 12px;
border-radius: 6px;
gap: 6px;
}
.sort-label[b-51fnvdzcjq] {
font-size: 14px;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
.filter-btn[b-51fnvdzcjq] {
padding: 6px 10px;
font-size: 13px;
}
.operator-name[b-51fnvdzcjq] {
font-size: 16px;
}
.time[b-51fnvdzcjq] {
font-size: 17px;
}
.amount[b-51fnvdzcjq] {
font-size: 17px;
}
.view-seats-btn[b-51fnvdzcjq] {
padding: 10px 14px;
font-size: 14px;
}
}
/* New 2-Row Layout */
.card-row-1[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.bus-info[b-51fnvdzcjq] {
flex: 1;
}
.time-info[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 12px;
margin: 0 20px;
}
.departure-time[b-51fnvdzcjq], .arrival-time[b-51fnvdzcjq] {
font-size: 20px;
font-weight: 700;
color: #333;
}
.card-row-2[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid #e9ecef;
}
/* Modern Sort Dropdown Styles */
.sort-dropdown[b-51fnvdzcjq] {
position: relative;
display: inline-block;
}
.sort-dropdown-btn[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
min-width: 140px;
}
.sort-dropdown-btn:hover[b-51fnvdzcjq] {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.sort-dropdown-btn:active[b-51fnvdzcjq] {
transform: translateY(0);
}
.sort-dropdown-menu[b-51fnvdzcjq] {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 1px solid #e1e5e9;
min-width: 200px;
z-index: 1000;
overflow: hidden;
animation: slideDown-b-51fnvdzcjq 0.3s ease;
}
@keyframes slideDown-b-51fnvdzcjq {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sort-option[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #f0f0f0;
color: #333;
font-size: 14px;
}
.sort-option:last-child[b-51fnvdzcjq] {
border-bottom: none;
}
.sort-option:hover[b-51fnvdzcjq] {
background: #f8f9ff;
color: #667eea;
}
.sort-option.active[b-51fnvdzcjq] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.sort-option i:first-child[b-51fnvdzcjq] {
font-size: 16px;
width: 20px;
text-align: center;
}
.sort-option span[b-51fnvdzcjq] {
flex: 1;
font-weight: 500;
}
.sort-option i:last-child[b-51fnvdzcjq] {
font-size: 14px;
color: #4CAF50;
}
.sort-option.active i:last-child[b-51fnvdzcjq] {
color: white;
}
/* Results header styling */
.results-header[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: white;
border-bottom: 1px solid #e1e5e9;
margin-bottom: 8px;
}
.results-count[b-51fnvdzcjq] {
font-size: 16px;
font-weight: 600;
color: #333;
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
padding: 8px 16px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
/* New Results Header Design - Compact Version */
.results-header-new[b-51fnvdzcjq] {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
padding: 0 2px;
}
.results-stats-card[b-51fnvdzcjq] {
background: transparent;
border-radius: 12px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
border: 1px solid #e9ecef;
}
.results-stats-card[b-51fnvdzcjq]::before {
display: none;
}
.stats-icon[b-51fnvdzcjq] {
background: rgba(102, 126, 234, 0.1);
border-radius: 8px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
z-index: 1;
}
.stats-icon i[b-51fnvdzcjq] {
font-size: 16px;
color: #667eea;
}
.stats-content[b-51fnvdzcjq] {
flex: 1;
position: relative;
z-index: 1;
}
.stats-number[b-51fnvdzcjq] {
font-size: 20px;
font-weight: 600;
color: #495057;
line-height: 1;
margin-bottom: 2px;
}
.stats-label[b-51fnvdzcjq] {
font-size: 10px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.stats-badge[b-51fnvdzcjq] {
background: rgba(102, 126, 234, 0.1);
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
z-index: 1;
}
.stats-badge i[b-51fnvdzcjq] {
font-size: 10px;
color: #667eea;
}
.sort-controls[b-51fnvdzcjq] {
background: white;
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid #f0f0f0;
}
.sort-label-new[b-51fnvdzcjq] {
font-size: 13px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.sort-label-new[b-51fnvdzcjq]::before {
content: "âš¡";
font-size: 14px;
}
.sort-dropdown-new[b-51fnvdzcjq] {
position: relative;
display: inline-block;
width: 100%;
}
.sort-dropdown-btn-new[b-51fnvdzcjq] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 1px solid #e9ecef;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.sort-dropdown-btn-new:hover[b-51fnvdzcjq] {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
border-color: #adb5bd;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn-content[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 8px;
}
.btn-content i[b-51fnvdzcjq] {
font-size: 14px;
color: #6c757d;
}
.dropdown-arrow[b-51fnvdzcjq] {
font-size: 12px;
color: #6c757d;
transition: transform 0.3s ease;
}
.sort-dropdown-btn-new:hover .dropdown-arrow[b-51fnvdzcjq] {
transform: rotate(180deg);
}
.sort-dropdown-menu-new[b-51fnvdzcjq] {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 6px;
background: white;
border-radius: 12px;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
border: 1px solid #e9ecef;
z-index: 1000;
overflow: hidden;
animation: slideDownNew-b-51fnvdzcjq 0.3s ease;
}
@keyframes slideDownNew-b-51fnvdzcjq {
from {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.sort-option-new[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #f8f9fa;
color: #495057;
}
.sort-option-new:last-child[b-51fnvdzcjq] {
border-bottom: none;
}
.sort-option-new:hover[b-51fnvdzcjq] {
background: #f8f9ff;
color: #667eea;
}
.sort-option-new.active[b-51fnvdzcjq] {
background: transparent;
color: #667eea;
border-left: 3px solid #667eea;
}
.option-icon[b-51fnvdzcjq] {
background: rgba(102, 126, 234, 0.1);
border-radius: 8px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sort-option-new.active .option-icon[b-51fnvdzcjq] {
background: rgba(102, 126, 234, 0.1);
}
.option-icon i[b-51fnvdzcjq] {
font-size: 18px;
color: #667eea;
}
.sort-option-new.active .option-icon i[b-51fnvdzcjq] {
color: #667eea;
}
.option-content[b-51fnvdzcjq] {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.option-title[b-51fnvdzcjq] {
font-size: 16px;
font-weight: 600;
}
.option-subtitle[b-51fnvdzcjq] {
font-size: 13px;
opacity: 0.7;
font-weight: 400;
}
.sort-option-new.active .option-subtitle[b-51fnvdzcjq] {
opacity: 0.7;
color: #667eea;
}
.option-check[b-51fnvdzcjq] {
background: rgba(102, 126, 234, 0.1);
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.option-check i[b-51fnvdzcjq] {
font-size: 12px;
color: #667eea;
}
/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
.results-header-new[b-51fnvdzcjq] {
gap: 10px;
margin-bottom: 12px;
}
.results-stats-card[b-51fnvdzcjq] {
padding: 10px 12px;
gap: 8px;
}
.stats-icon[b-51fnvdzcjq] {
width: 28px;
height: 28px;
}
.stats-icon i[b-51fnvdzcjq] {
font-size: 14px;
}
.stats-number[b-51fnvdzcjq] {
font-size: 18px;
}
.stats-label[b-51fnvdzcjq] {
font-size: 9px;
}
.stats-badge[b-51fnvdzcjq] {
width: 18px;
height: 18px;
}
.stats-badge i[b-51fnvdzcjq] {
font-size: 9px;
}
.sort-controls[b-51fnvdzcjq] {
padding: 10px 12px;
}
.sort-label-new[b-51fnvdzcjq] {
font-size: 12px;
margin-bottom: 8px;
}
.sort-dropdown-btn-new[b-51fnvdzcjq] {
padding: 8px 12px;
font-size: 12px;
}
.btn-content[b-51fnvdzcjq] {
gap: 6px;
}
.btn-content i[b-51fnvdzcjq] {
font-size: 12px;
}
.sort-option-new[b-51fnvdzcjq] {
padding: 10px 12px;
gap: 8px;
}
.option-icon[b-51fnvdzcjq] {
width: 28px;
height: 28px;
}
.option-icon i[b-51fnvdzcjq] {
font-size: 12px;
}
.option-title[b-51fnvdzcjq] {
font-size: 12px;
}
.option-subtitle[b-51fnvdzcjq] {
font-size: 9px;
}
}
@media (max-width: 480px) {
.results-stats-card[b-51fnvdzcjq] {
padding: 8px 10px;
gap: 6px;
}
.stats-icon[b-51fnvdzcjq] {
width: 24px;
height: 24px;
}
.stats-icon i[b-51fnvdzcjq] {
font-size: 12px;
}
.stats-number[b-51fnvdzcjq] {
font-size: 16px;
}
.stats-label[b-51fnvdzcjq] {
font-size: 8px;
}
.stats-badge[b-51fnvdzcjq] {
width: 16px;
height: 16px;
}
.stats-badge i[b-51fnvdzcjq] {
font-size: 8px;
}
.sort-controls[b-51fnvdzcjq] {
padding: 8px 10px;
}
.sort-label-new[b-51fnvdzcjq] {
font-size: 11px;
margin-bottom: 6px;
}
.sort-dropdown-btn-new[b-51fnvdzcjq] {
padding: 6px 10px;
font-size: 11px;
}
.btn-content[b-51fnvdzcjq] {
gap: 4px;
}
.btn-content i[b-51fnvdzcjq] {
font-size: 10px;
}
.sort-option-new[b-51fnvdzcjq] {
padding: 8px 10px;
gap: 6px;
}
.option-icon[b-51fnvdzcjq] {
width: 24px;
height: 24px;
}
.option-icon i[b-51fnvdzcjq] {
font-size: 10px;
}
.option-title[b-51fnvdzcjq] {
font-size: 11px;
}
.option-subtitle[b-51fnvdzcjq] {
font-size: 8px;
}
}
/* Hide mobile header when modal is open */
body.modal-open .mobile-header[b-51fnvdzcjq] {
display: none !important;
}
body.modal-open .filters-bar[b-51fnvdzcjq] {
display: none !important;
}
body.modal-open .smart-filters-panel[b-51fnvdzcjq] {
display: none !important;
}
/* Filter Options */
.filter-options[b-51fnvdzcjq] {
padding: 20px;
overflow-y: auto;
max-height: 60vh;
}
.filter-option[b-51fnvdzcjq] {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px 20px;
margin-bottom: 8px;
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-align: left;
}
.filter-option:hover[b-51fnvdzcjq] {
background: #f8f9fa;
border-color: #667eea;
}
.filter-option.active[b-51fnvdzcjq] {
background: #fff3f3;
border-color: #dc3545;
border-left: 3px solid #dc3545;
}
.filter-left[b-51fnvdzcjq] {
display: flex;
align-items: center;
gap: 12px;
}
.filter-left i[b-51fnvdzcjq] {
font-size: 16px;
color: #6c757d;
width: 20px;
text-align: center;
}
.filter-left span[b-51fnvdzcjq] {
font-size: 14px;
color: #333;
font-weight: 500;
}
.filter-option.active .filter-left span[b-51fnvdzcjq] {
color: #dc3545;
font-weight: 600;
}
.filter-option.active .filter-left i[b-51fnvdzcjq] {
color: #dc3545;
}
.filter-count[b-51fnvdzcjq] {
font-size: 12px;
color: #6c757d;
font-weight: 500;
}
/* Filter Backdrop Overlay */
.filter-backdrop[b-51fnvdzcjq] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(2px);
}
.filter-backdrop.show[b-51fnvdzcjq] {
opacity: 1;
}
.filter-backdrop.hide[b-51fnvdzcjq] {
opacity: 0;
pointer-events: none;
}
/* _content/HappyBus.Ux/Components/CustomComponents/OffersComponent.razor.rz.scp.css */
.page-container[b-fc72bvrld9] {
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
background: #f8f9fa;
}
.hero-section[b-fc72bvrld9] {
background: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YnVzfGVufDB8fDB8fHww');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 50px 0 80px 0;
position: relative;
overflow: hidden;
color: white;
min-height: 220px;
display: flex;
align-items: center;
width: 100%;
}
.hero-section[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://img.freepik.com/free-vector/abstract-wave-pattern-background_53876-115444.jpg');
background-size: cover;
opacity: 0.1;
z-index: 0;
}
.hero-section[b-fc72bvrld9]::after {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: url('https://img.freepik.com/free-vector/red-bus-concept-illustration_114360-14698.jpg');
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
z-index: 1;
opacity: 0.8;
animation: float-b-fc72bvrld9 6s ease-in-out infinite;
}
@keyframes float-b-fc72bvrld9 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
.content-wrapper[b-fc72bvrld9] {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
margin-top: -30px;
}
.nav-menu[b-fc72bvrld9] {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.25);
border-radius: 20px;
padding: 8px;
margin-bottom: 25px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
width: fit-content;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.nav-item[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 10px;
color: white;
padding: 12px 30px;
border-radius: 16px;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
font-weight: 600;
letter-spacing: 0.5px;
background-color: rgba(255, 255, 255, 0.1);
}
.nav-item:hover[b-fc72bvrld9] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background-color: rgba(255, 255, 255, 0.3);
}
.nav-item img[b-fc72bvrld9] {
width: 24px;
height: 24px;
object-fit: contain;
}
.nav-item span[b-fc72bvrld9] {
font-size: 16px;
font-weight: 500;
}
.nav-item.active[b-fc72bvrld9] {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: #fff;
font-weight: 700;
}
.active-indicator[b-fc72bvrld9] {
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}
.title[b-fc72bvrld9] {
font-size: 42px;
font-weight: 800;
margin-bottom: 20px;
margin-top: 5px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
animation: fadeIn-b-fc72bvrld9 1s ease-in-out;
letter-spacing: 0.5px;
color: white;
}
@keyframes fadeIn-b-fc72bvrld9 {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav-text[b-fc72bvrld9] {
font-weight: 700;
color: white;
margin-left: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.active-indicator[b-fc72bvrld9] {
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 3px;
background-color: #e74c3c;
border-radius: 2px;
}
/* Title style is already defined above */
.search-box[b-fc72bvrld9] {
background: white;
border-radius: 20px;
padding: 30px;
color: black;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-top: 15px;
position: relative;
z-index: 3;
max-width: 2000px;
margin-left: auto;
margin-right: auto;
}
/* Main Content */
.main-content[b-fc72bvrld9] {
flex: 1;
position: relative;
z-index: 2;
margin-top: -50px;
padding-bottom: 60px;
}
/* Search Results */
.search-results-wrapper[b-fc72bvrld9] {
background: #f8f9fa;
min-height: 100vh;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.search-results-wrapper.show[b-fc72bvrld9] {
opacity: 1;
transform: translateY(0);
}
.search-results-layout[b-fc72bvrld9] {
display: flex;
gap: 20px;
max-width: 1600px;
margin: 0 auto;
padding: 24px;
align-items: flex-start;
min-height: 600px;
}
.filters-sidebar[b-fc72bvrld9] {
flex-shrink: 0;
width: 280px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
position: sticky;
top: 24px;
}
.results-main[b-fc72bvrld9] {
flex: 1;
min-width: 0;
max-width: calc(100% - 300px);
}
.no-results-container[b-fc72bvrld9] {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 40px 20px;
}
.no-results[b-fc72bvrld9] {
text-align: center;
background: white;
padding: 60px 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
max-width: 500px;
width: 100%;
}
.no-results-icon[b-fc72bvrld9] {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.no-results-icon i[b-fc72bvrld9] {
font-size: 32px;
color: #6c757d;
}
.no-results h3[b-fc72bvrld9] {
font-size: 24px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 12px 0;
}
.no-results p[b-fc72bvrld9] {
font-size: 16px;
color: #6c757d;
margin: 0 0 32px 0;
line-height: 1.5;
}
.retry-search-btn[b-fc72bvrld9] {
background: #e74c3c;
border: none;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
.retry-search-btn:hover[b-fc72bvrld9] {
background: #c0392b;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
}
/* Mobile Header for Search Results */
.mobile-search-header[b-fc72bvrld9] {
display: none;
background: #394560;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.mobile-header-content[b-fc72bvrld9] {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
min-height: 60px;
}
.back-to-search-btn[b-fc72bvrld9] {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.back-to-search-btn:hover[b-fc72bvrld9] {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.mobile-search-info[b-fc72bvrld9] {
flex: 1;
min-width: 0;
overflow: hidden;
}
.route-info[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
color: white;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.route-arrow[b-fc72bvrld9] {
color: white;
font-size: 18px;
margin: 0 8px;
opacity: 1;
display: inline-block;
flex-shrink: 0;
font-weight: 600;
line-height: 1;
}
.from-city[b-fc72bvrld9], .to-city[b-fc72bvrld9] {
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bus-count[b-fc72bvrld9] {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.date-badge[b-fc72bvrld9] {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 6px 10px;
border-radius: 16px;
text-align: center;
min-width: 60px;
max-width: 80px;
display: flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.date-icon[b-fc72bvrld9] {
font-size: 10px;
opacity: 0.9;
flex-shrink: 0;
}
.date-content[b-fc72bvrld9] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
overflow: hidden;
}
.date-day[b-fc72bvrld9] {
font-size: 10px;
font-weight: 600;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.date-weekday[b-fc72bvrld9] {
font-size: 9px;
font-weight: 500;
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* RedBus Style Mobile Filter Bar */
.mobile-filter-bar[b-fc72bvrld9] {
padding: 16px 20px;
background: white;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e9ecef;
position: relative;
overflow: hidden;
}
.mobile-filter-bar[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #dc3545, #fd7e14, #20c997, #6f42c1);
animation: shimmer-b-fc72bvrld9 3s ease-in-out infinite;
}
@keyframes shimmer-b-fc72bvrld9 {
0%, 100% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
}
.filter-options[b-fc72bvrld9] {
display: flex;
gap: 12px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
padding: 4px 0;
scroll-behavior: smooth;
}
.filter-options[b-fc72bvrld9]::-webkit-scrollbar {
display: none;
}
/* RedBus Style Filter Pills */
.filter-pill[b-fc72bvrld9] {
background: white;
border: 1px solid #dee2e6;
border-radius: 20px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-width: fit-content;
position: relative;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.filter-pill[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.1), transparent);
transition: left 0.5s ease;
}
.filter-pill:hover[b-fc72bvrld9]::before {
left: 100%;
}
.filter-pill:hover[b-fc72bvrld9] {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.filter-pill.active[b-fc72bvrld9] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
transform: translateY(-1px);
}
.filter-pill.active[b-fc72bvrld9]::before {
display: none;
}
.filter-pill i[b-fc72bvrld9] {
font-size: 12px;
transition: all 0.3s ease;
}
.filter-pill:hover i[b-fc72bvrld9] {
transform: scale(1.1);
}
.filter-pill.active i[b-fc72bvrld9] {
transform: scale(1.1);
}
.filter-pill span[b-fc72bvrld9] {
font-size: 12px;
font-weight: 500;
}
.filter-count[b-fc72bvrld9] {
color: #6c757d;
font-weight: 600;
font-size: 11px;
}
.filter-pill.active .filter-count[b-fc72bvrld9] {
color: rgba(255, 255, 255, 0.8);
}
.show-filters-btn[b-fc72bvrld9] {
background: #dc3545;
color: white;
border: none;
border-radius: 20px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
.show-filters-btn:hover[b-fc72bvrld9] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}
.show-filters-btn i[b-fc72bvrld9] {
font-size: 12px;
}
/* Mobile-specific improvements */
@media (max-width: 768px) {
.mobile-filter-bar[b-fc72bvrld9] {
padding: 12px 16px;
gap: 12px;
}
.filter-pill[b-fc72bvrld9] {
padding: 10px 14px;
font-size: 12px;
gap: 5px;
min-height: 40px;
}
.filter-pill i[b-fc72bvrld9] {
font-size: 12px;
}
.filter-pill span[b-fc72bvrld9] {
font-size: 11px;
}
.filter-count[b-fc72bvrld9] {
font-size: 10px;
font-weight: 600;
}
.show-filters-btn[b-fc72bvrld9] {
padding: 10px 16px;
font-size: 12px;
min-height: 40px;
}
.show-filters-btn i[b-fc72bvrld9] {
font-size: 11px;
}
}
@media (max-width: 480px) {
.mobile-filter-bar[b-fc72bvrld9] {
padding: 10px 12px;
gap: 10px;
}
.filter-pill[b-fc72bvrld9] {
padding: 8px 12px;
font-size: 11px;
gap: 4px;
min-height: 36px;
}
.filter-pill i[b-fc72bvrld9] {
font-size: 11px;
}
.filter-pill span[b-fc72bvrld9] {
font-size: 10px;
}
.filter-count[b-fc72bvrld9] {
font-size: 9px;
}
.show-filters-btn[b-fc72bvrld9] {
padding: 8px 12px;
font-size: 11px;
min-height: 36px;
}
.show-filters-btn i[b-fc72bvrld9] {
font-size: 10px;
}
}
/* Desktop only elements */
.desktop-only[b-fc72bvrld9] {
display: block;
}
/* Desktop layout improvements */
@media (min-width: 769px) {
.search-results-layout[b-fc72bvrld9] {
gap: 32px;
padding: 32px;
}
.filters-sidebar[b-fc72bvrld9] {
width: 350px;
}
.results-main[b-fc72bvrld9] {
flex: 1;
min-width: 0;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
padding: 24px;
}
}
/* Mobile only elements - hidden on desktop */
.mobile-filters-panel[b-fc72bvrld9] {
display: none;
}
/* Hide elements when search results are shown */
.hide-on-search[b-fc72bvrld9] {
display: none !important;
}
/* Mobile view when search results are shown */
@media (max-width: 768px) {
.hero-section[b-fc72bvrld9] {
padding: 40px 0 60px 0;
min-height: 450px;
}
.content-wrapper[b-fc72bvrld9] {
margin-top: -15px;
}
.title[b-fc72bvrld9] {
font-size: 32px;
margin-bottom: 15px;
margin-top: 0;
}
.search-box[b-fc72bvrld9] {
margin-top: 10px;
padding: 30px 20px;
}
.mobile-search-header[b-fc72bvrld9] {
display: block;
}
.mobile-filters-panel[b-fc72bvrld9] {
display: block;
}
.mobile-header-content[b-fc72bvrld9] {
padding: 10px 12px;
gap: 8px;
}
.route-info[b-fc72bvrld9] {
font-size: 14px;
}
.route-arrow[b-fc72bvrld9] {
font-size: 16px;
margin: 0 6px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-fc72bvrld9] {
font-size: 12px;
}
.date-badge[b-fc72bvrld9] {
padding: 4px 8px;
min-width: 50px;
max-width: 70px;
}
.date-day[b-fc72bvrld9] {
font-size: 9px;
}
.date-weekday[b-fc72bvrld9] {
font-size: 8px;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.hero-section[b-fc72bvrld9] {
padding: 30px 0 50px 0;
min-height: 400px;
}
.content-wrapper[b-fc72bvrld9] {
margin-top: -10px;
max-width: 95%;
padding: 0 15px;
}
.title[b-fc72bvrld9] {
font-size: 28px;
margin-bottom: 12px;
margin-top: 0;
}
.search-box[b-fc72bvrld9] {
margin-top: 8px;
padding: 16px;
}
.mobile-header-content[b-fc72bvrld9] {
padding: 8px 10px;
gap: 6px;
}
.route-info[b-fc72bvrld9] {
font-size: 13px;
}
.route-arrow[b-fc72bvrld9] {
font-size: 14px;
margin: 0 4px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-fc72bvrld9] {
font-size: 11px;
}
.date-badge[b-fc72bvrld9] {
padding: 3px 6px;
min-width: 45px;
max-width: 60px;
}
.date-day[b-fc72bvrld9] {
font-size: 8px;
}
.date-weekday[b-fc72bvrld9] {
font-size: 7px;
}
.back-to-search-btn[b-fc72bvrld9] {
width: 32px;
height: 32px;
font-size: 16px;
}
.mobile-filters-panel[b-fc72bvrld9] {
display: block;
}
.hide-on-mobile[b-fc72bvrld9] {
display: none !important;
}
.desktop-only[b-fc72bvrld9] {
display: none !important;
}
.search-results-wrapper[b-fc72bvrld9] {
margin-top: 0;
padding-top: 0;
}
.search-results-layout[b-fc72bvrld9] {
padding: 4px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.mobile-filters-panel[b-fc72bvrld9] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 20px;
transition: all 0.3s ease;
overflow: hidden;
display: block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
transform: translateY(100%);
border-radius: 16px 16px 0 0;
}
.mobile-filters-panel.hide[b-fc72bvrld9] {
transform: translateY(100%);
opacity: 0;
}
.mobile-filters-panel.show[b-fc72bvrld9] {
transform: translateY(0);
opacity: 1;
overflow-y: auto;
max-height: 80vh;
}
.mobile-filters-panel[b-fc72bvrld9]::-webkit-scrollbar {
width: 4px;
}
.mobile-filters-panel[b-fc72bvrld9]::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.mobile-filters-panel[b-fc72bvrld9]::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 2px;
}
.mobile-filters-panel[b-fc72bvrld9]::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.mobile-filters-header[b-fc72bvrld9] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.mobile-filters-header h3[b-fc72bvrld9] {
font-size: 20px;
font-weight: 700;
color: #333;
margin: 0;
}
.close-filters-btn[b-fc72bvrld9] {
background: none;
border: none;
color: #666;
font-size: 24px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.close-filters-btn:hover[b-fc72bvrld9] {
background: #f0f0f0;
color: #333;
}
.results-main[b-fc72bvrld9] {
order: 2;
padding: 4px;
width: 100%;
box-sizing: border-box;
}
/* Very small screens */
@media (max-width: 320px) {
.search-results-layout[b-fc72bvrld9] {
padding: 2px;
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.results-main[b-fc72bvrld9] {
padding: 2px;
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
}
.no-results[b-fc72bvrld9] {
padding: 40px 24px;
}
.no-results-icon[b-fc72bvrld9] {
width: 60px;
height: 60px;
}
.no-results-icon i[b-fc72bvrld9] {
font-size: 24px;
}
.no-results h3[b-fc72bvrld9] {
font-size: 20px;
}
.no-results p[b-fc72bvrld9] {
font-size: 14px;
}
}
/* Responsive design for search results - Progressive scaling */
@media (max-width: 1024px) and (min-width: 769px) {
.search-results-layout[b-fc72bvrld9] {
flex-direction: column;
gap: 20px;
padding: 16px;
max-width: 1000px;
margin: 0 auto;
}
.filters-sidebar[b-fc72bvrld9] {
width: 100%;
}
.results-main[b-fc72bvrld9] {
padding: 16px;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.search-results-layout[b-fc72bvrld9] {
flex-direction: column;
gap: 16px;
padding: 12px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-fc72bvrld9] {
width: 100%;
}
.results-main[b-fc72bvrld9] {
padding: 12px;
width: 100%;
box-sizing: border-box;
}
}
/* Specific breakpoint for screens around 659px */
@media (max-width: 659px) and (min-width: 481px) {
.search-results-layout[b-fc72bvrld9] {
flex-direction: column;
gap: 12px;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-fc72bvrld9] {
width: 100%;
}
.results-main[b-fc72bvrld9] {
padding: 10px;
width: 100%;
box-sizing: border-box;
}
}
/* Unified breakpoint for screens 321px to 480px */
@media (max-width: 480px) and (min-width: 321px) {
.search-results-layout[b-fc72bvrld9] {
padding: 8px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
.results-main[b-fc72bvrld9] {
padding: 8px;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
}
/* Responsive design for search results */
@media (max-width: 1024px) {
.search-results-layout[b-fc72bvrld9] {
flex-direction: column;
gap: 20px;
}
.filters-sidebar[b-fc72bvrld9] {
width: 100%;
}
}
/* Discount Offers Section Styles */
.discount-offers-section[b-fc72bvrld9] {
padding: 40px 0;
background-color: #f0f8ff;
}
.section-header[b-fc72bvrld9] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.section-header h2[b-fc72bvrld9] {
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0;
}
.view-all[b-fc72bvrld9] {
color: #FF6B6B;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
}
.view-all:hover[b-fc72bvrld9] {
color: #FF8E53;
transform: translateX(2px);
}
/* About Section Styles */
.about-section[b-fc72bvrld9] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.about-section[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://img.freepik.com/free-vector/abstract-wave-pattern-background_53876-115444.jpg');
background-size: cover;
opacity: 0.05;
z-index: 1;
}
.about-section .container[b-fc72bvrld9] {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.about-section .section-header[b-fc72bvrld9] {
text-align: center;
margin-bottom: 50px;
}
.about-section .section-header h2[b-fc72bvrld9] {
font-size: 32px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.about-section .section-header h2[b-fc72bvrld9]::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
border-radius: 3px;
}
.about-section .section-header p[b-fc72bvrld9] {
font-size: 16px;
color: #666;
max-width: 700px;
margin: 15px auto 0;
}
.about-content[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 50px;
}
.about-image[b-fc72bvrld9] {
flex: 1;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.about-image:hover[b-fc72bvrld9] {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.about-image img[b-fc72bvrld9] {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.about-image:hover img[b-fc72bvrld9] {
transform: scale(1.05);
}
.about-experience[b-fc72bvrld9] {
position: absolute;
bottom: 30px;
left: 30px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-experience .years[b-fc72bvrld9] {
font-size: 32px;
font-weight: 800;
line-height: 1;
}
.about-experience .text[b-fc72bvrld9] {
font-size: 14px;
font-weight: 500;
}
.about-text[b-fc72bvrld9] {
flex: 1;
}
.about-text p[b-fc72bvrld9] {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.about-stats[b-fc72bvrld9] {
display: flex;
justify-content: space-between;
margin: 40px 0;
}
.stat-item[b-fc72bvrld9] {
text-align: center;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
flex: 1;
margin: 0 10px;
}
.stat-item:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.stat-icon[b-fc72bvrld9] {
font-size: 28px;
color: #FF6B6B;
margin-bottom: 10px;
}
.stat-number[b-fc72bvrld9] {
font-size: 24px;
font-weight: 700;
color: #333;
margin-bottom: 5px;
}
.stat-text[b-fc72bvrld9] {
font-size: 14px;
color: #666;
}
.about-cta[b-fc72bvrld9] {
display: flex;
gap: 20px;
margin-top: 30px;
}
.about-btn[b-fc72bvrld9], .contact-btn[b-fc72bvrld9] {
padding: 12px 25px;
border-radius: 30px;
font-weight: 600;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
text-decoration: none;
}
.about-btn[b-fc72bvrld9] {
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
box-shadow: 0 8px 15px rgba(255, 107, 107, 0.3);
}
.contact-btn[b-fc72bvrld9] {
background: white;
color: #333;
border: 1px solid #ddd;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}
.about-btn:hover[b-fc72bvrld9], .contact-btn:hover[b-fc72bvrld9] {
transform: translateY(-3px);
}
.about-btn:hover[b-fc72bvrld9] {
box-shadow: 0 12px 20px rgba(255, 107, 107, 0.4);
}
.contact-btn:hover[b-fc72bvrld9] {
background: #f8f9fa;
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
}
/* Responsive Styles */
@media (max-width: 992px) {
.about-content[b-fc72bvrld9] {
flex-direction: column;
}
.about-image[b-fc72bvrld9], .about-text[b-fc72bvrld9] {
width: 100%;
}
.about-image[b-fc72bvrld9] {
margin-bottom: 40px;
}
.about-stats[b-fc72bvrld9] {
flex-wrap: wrap;
}
.stat-item[b-fc72bvrld9] {
flex: 0 0 calc(50% - 20px);
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
.about-section[b-fc72bvrld9] {
padding: 60px 0;
}
.about-cta[b-fc72bvrld9] {
flex-direction: column;
}
.stat-item[b-fc72bvrld9] {
flex: 0 0 100%;
}
.about-experience[b-fc72bvrld9] {
bottom: 20px;
left: 20px;
padding: 10px 20px;
}
.about-experience .years[b-fc72bvrld9] {
font-size: 28px;
}
.about-experience .text[b-fc72bvrld9] {
font-size: 12px;
}
}
@media (max-width: 576px) {
.about-section .section-header h2[b-fc72bvrld9] {
font-size: 28px;
}
.about-image img[b-fc72bvrld9] {
height: 300px;
}
}
.offers-slider[b-fc72bvrld9] {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 10px 0;
scrollbar-width: none; /* Firefox */
}
.offers-slider[b-fc72bvrld9]::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
.offers-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.offer-card[b-fc72bvrld9] {
flex: 0 0 auto;
width: 100%;
height: 170px;
border-radius: 16px;
overflow: hidden;
display: flex;
background-color: #fff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.offer-card:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.offer-content[b-fc72bvrld9] {
flex: 1;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: center;
}
.offer-tag-pill[b-fc72bvrld9] {
position: absolute;
top: 12px;
left: 12px;
font-size: 14px;
font-weight: 700;
color: #fff;
background-color: #e74c3c;
padding: 4px 12px;
border-radius: 20px;
z-index: 2;
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}
.offer-details p[b-fc72bvrld9] {
margin: 0 0 8px 0;
font-size: 14px;
color: #666;
}
.offer-validity[b-fc72bvrld9] {
font-size: 12px;
color: #888;
margin-bottom: 4px;
}
.offer-code[b-fc72bvrld9] {
font-size: 12px;
color: #888;
margin-top: 4px;
}
.offer-code span[b-fc72bvrld9] {
font-weight: 600;
color: #e74c3c;
background-color: rgba(231, 76, 60, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
.offer-image[b-fc72bvrld9] {
width: 30%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #f8f9fa;
position: relative;
}
.offer-image img[b-fc72bvrld9] {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1920px) {
.hero-section[b-fc72bvrld9]::before {
width: 100vw;
left: 0;
right: 0;
transform: none;
}
}
@media (max-width: 1024px) {
.nav-menu[b-fc72bvrld9] {
flex-wrap: wrap;
gap: 16px;
}
.title[b-fc72bvrld9] {
width: 100%;
text-align: center;
margin-top: 16px;
}
}
@media (max-width: 1200px) {
/* Responsive styles for 1200px and below */
}
@media (max-width: 768px) {
.hero-section[b-fc72bvrld9] {
padding: 20px 0;
}
.content-wrapper[b-fc72bvrld9] {
padding: 0 16px;
}
.nav-menu[b-fc72bvrld9] {
justify-content: center;
}
.nav-item[b-fc72bvrld9] {
padding: 8px 16px;
}
.nav-item img[b-fc72bvrld9] {
width: 20px;
height: 20px;
}
.nav-item span[b-fc72bvrld9] {
font-size: 14px;
}
.search-box[b-fc72bvrld9] {
padding: 16px;
margin-top: 16px;
}
.offers-slider[b-fc72bvrld9] {
flex-direction: column;
gap: 16px;
}
.offer-card[b-fc72bvrld9] {
width: 100%;
max-width: 100%;
}
.section-header[b-fc72bvrld9] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* Common Styles */
.container[b-fc72bvrld9] {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section[b-fc72bvrld9] {
padding: 30px 0;
background: #fff;
position: relative;
z-index: 1;
}
.section-header[b-fc72bvrld9] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.section-header h2[b-fc72bvrld9] {
font-size: 28px;
font-weight: 700;
color: #333;
margin: 0;
position: relative;
padding-left: 15px;
}
.section-header h2[b-fc72bvrld9]::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 25px;
background: linear-gradient(to bottom, #e74c3c, #c0392b);
border-radius: 3px;
}
.view-all[b-fc72bvrld9] {
color: #e74c3c;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
padding: 8px 16px;
border-radius: 20px;
background-color: rgba(231, 76, 60, 0.1);
}
.view-all:hover[b-fc72bvrld9] {
color: #fff;
background-color: #e74c3c;
transform: translateX(5px);
box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}
.offers-section[b-fc72bvrld9] {
padding: 30px 0;
background: #f8f9fa;
}
.offers-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 10px;
}
.offer-card[b-fc72bvrld9] {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.offer-card:hover[b-fc72bvrld9] {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.offer-image[b-fc72bvrld9] {
height: 200px;
overflow: hidden;
}
.offer-image img[b-fc72bvrld9] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.offer-card:hover .offer-image img[b-fc72bvrld9] {
transform: scale(1.1);
}
.offer-content[b-fc72bvrld9] {
padding: 20px;
}
.offer-tag[b-fc72bvrld9] {
display: inline-block;
padding: 8px 15px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
border-radius: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.offer-content p[b-fc72bvrld9] {
color: #666;
margin: 8px 0;
}
.offer-code[b-fc72bvrld9] {
font-size: 14px;
color: #666;
}
.offer-code span[b-fc72bvrld9] {
color: #e74c3c;
font-weight: 600;
}
/* Popular Routes Section */
.routes-section[b-fc72bvrld9] {
padding: 30px 0;
background: #f9f9f9;
}
.routes-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 10px;
}
.route-card[b-fc72bvrld9] {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.route-card:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}
.route-image[b-fc72bvrld9] {
position: relative;
height: 180px;
overflow: hidden;
}
.route-image img[b-fc72bvrld9] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.route-card:hover .route-image img[b-fc72bvrld9] {
transform: scale(1.05);
}
.route-overlay[b-fc72bvrld9] {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 16px;
color: white;
display: flex;
justify-content: space-between;
backdrop-filter: blur(2px);
}
.route-time[b-fc72bvrld9], .route-distance[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 500;
}
.route-info[b-fc72bvrld9] {
padding: 20px;
flex-grow: 1;
}
.cities[b-fc72bvrld9] {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 16px;
letter-spacing: 0.5px;
}
.route-meta[b-fc72bvrld9] {
display: flex;
justify-content: space-between;
color: #666;
font-size: 14px;
margin-bottom: 20px;
}
.route-meta span[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 6px;
}
.book-now[b-fc72bvrld9] {
width: calc(100% - 40px);
padding: 14px;
background: #e74c3c;
color: #fff;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 20px 20px 20px;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}
.book-now:hover[b-fc72bvrld9] {
background: #c0392b;
box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4);
transform: translateY(-2px);
}
/* Operators Section */
.operators-section[b-fc72bvrld9] {
padding: 30px 0;
background-color: #f9f9f9;
}
.operators-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 10px;
}
.operator-card[b-fc72bvrld9] {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.operator-card:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}
.operator-banner[b-fc72bvrld9] {
position: relative;
height: 160px;
overflow: hidden;
}
.banner-img[b-fc72bvrld9] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.operator-card:hover .banner-img[b-fc72bvrld9] {
transform: scale(1.05);
}
.operator-badge[b-fc72bvrld9] {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
letter-spacing: 0.5px;
}
.operator-logo-container[b-fc72bvrld9] {
display: flex;
justify-content: center;
margin-top: -35px;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.operator-logo[b-fc72bvrld9] {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
border: 4px solid white;
}
.operator-logo i[b-fc72bvrld9] {
font-size: 28px;
color: white;
}
.operator-info[b-fc72bvrld9] {
padding: 0 20px 20px;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.operator-card h3[b-fc72bvrld9] {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: #333;
letter-spacing: 0.5px;
}
.rating[b-fc72bvrld9] {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 15px;
}
.rating i[b-fc72bvrld9] {
color: #f39c12;
font-size: 16px;
}
.rating span[b-fc72bvrld9] {
font-weight: 700;
color: #555;
margin-left: 6px;
font-size: 15px;
}
.operator-details[b-fc72bvrld9] {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
color: #666;
font-size: 14px;
}
.operator-details span[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 5px;
}
.view-buses[b-fc72bvrld9] {
margin-top: auto;
display: inline-block;
color: #e74c3c;
font-weight: 700;
text-decoration: none;
font-size: 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
margin: 0 -20px;
margin-top: auto;
}
.view-buses:hover[b-fc72bvrld9] {
color: #c0392b;
background-color: rgba(231, 76, 60, 0.05);
}
.view-buses i[b-fc72bvrld9] {
transition: transform 0.3s ease;
}
.view-buses:hover i[b-fc72bvrld9] {
transform: translateX(5px);
}
/* App Section */
.app-section[b-fc72bvrld9] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.app-section[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: linear-gradient(135deg, rgba(231, 76, 60, 0.05) 0%, rgba(231, 76, 60, 0.1) 100%);
border-radius: 0 0 0 100%;
z-index: 0;
}
.app-content[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 60px;
position: relative;
z-index: 1;
}
.app-text[b-fc72bvrld9] {
flex: 1;
}
.app-badge[b-fc72bvrld9] {
display: inline-block;
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
padding: 6px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 20px;
letter-spacing: 1px;
box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3);
}
.app-text h2[b-fc72bvrld9] {
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
color: #333;
line-height: 1.2;
}
.app-text p[b-fc72bvrld9] {
font-size: 16px;
color: #666;
margin-bottom: 30px;
line-height: 1.6;
max-width: 90%;
}
.app-features[b-fc72bvrld9] {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.feature[b-fc72bvrld9] {
display: flex;
align-items: flex-start;
gap: 15px;
}
.feature-icon[b-fc72bvrld9] {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2);
flex-shrink: 0;
}
.feature-icon i[b-fc72bvrld9] {
font-size: 20px;
color: white;
}
.feature-text h4[b-fc72bvrld9] {
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.feature-text p[b-fc72bvrld9] {
font-size: 14px;
color: #666;
margin-bottom: 0;
line-height: 1.4;
}
.app-buttons[b-fc72bvrld9] {
display: flex;
gap: 15px;
margin-bottom: 25px;
}
.app-store[b-fc72bvrld9], .play-store[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 10px;
background-color: #333;
color: white;
padding: 12px 20px;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
border: none;
font-family: inherit;
}
.app-store[b-fc72bvrld9] {
background: linear-gradient(135deg, #007AFF, #0056CC);
}
.play-store[b-fc72bvrld9] {
background: linear-gradient(135deg, #00C851, #007E33);
}
.app-store:hover[b-fc72bvrld9], .play-store:hover[b-fc72bvrld9] {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
text-decoration: none;
color: white;
}
.app-store:hover[b-fc72bvrld9] {
background: linear-gradient(135deg, #0056CC, #003D99);
}
.play-store:hover[b-fc72bvrld9] {
background: linear-gradient(135deg, #007E33, #005A24);
}
.app-store i[b-fc72bvrld9], .play-store i[b-fc72bvrld9] {
font-size: 24px;
}
.button-text[b-fc72bvrld9] {
display: flex;
flex-direction: column;
}
.button-text span[b-fc72bvrld9] {
font-size: 10px;
opacity: 0.9;
line-height: 1.2;
}
.button-text strong[b-fc72bvrld9] {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.app-rating[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 10px;
}
.stars[b-fc72bvrld9] {
display: flex;
color: #f39c12;
}
.app-rating p[b-fc72bvrld9] {
margin: 0;
font-size: 14px;
color: #666;
}
.app-image[b-fc72bvrld9] {
flex: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.app-image img[b-fc72bvrld9] {
max-width: 100%;
height: auto;
max-height: 500px;
position: relative;
z-index: 1;
}
.app-image-overlay[b-fc72bvrld9] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 65%;
height: 75%;
z-index: 2;
overflow: hidden;
border-radius: 20px;
}
.app-screen[b-fc72bvrld9] {
width: 100%;
height: 100%;
overflow: hidden;
}
.app-screen img[b-fc72bvrld9] {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 992px) {
.app-content[b-fc72bvrld9] {
flex-direction: column;
text-align: center;
}
.app-text p[b-fc72bvrld9] {
max-width: 100%;
}
.app-features[b-fc72bvrld9] {
max-width: 500px;
margin: 0 auto 30px;
}
.feature[b-fc72bvrld9] {
text-align: left;
}
.app-buttons[b-fc72bvrld9] {
justify-content: center;
}
.app-rating[b-fc72bvrld9] {
justify-content: center;
}
}
/* Bus Services Section */
.bus-services-section[b-fc72bvrld9] {
background: #f8f9fa;
padding: 80px 0;
}
.services-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card[b-fc72bvrld9] {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.service-card:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.service-image[b-fc72bvrld9] {
position: relative;
height: 180px;
overflow: hidden;
}
.service-image img[b-fc72bvrld9] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.service-card:hover .service-image img[b-fc72bvrld9] {
transform: scale(1.05);
}
.service-content[b-fc72bvrld9] {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
}
.service-icon[b-fc72bvrld9] {
width: 60px;
height: 60px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 12px;
box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2);
}
.service-icon i[b-fc72bvrld9] {
font-size: 24px;
color: white;
}
.service-card h3[b-fc72bvrld9] {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 12px;
}
.service-card p[b-fc72bvrld9] {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.service-features[b-fc72bvrld9] {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
text-align: left;
}
.service-features span[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 14px;
}
.service-features i[b-fc72bvrld9] {
color: #e74c3c;
}
.service-link[b-fc72bvrld9] {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
color: #e74c3c;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.service-link:hover[b-fc72bvrld9] {
color: #c0392b;
transform: translateX(5px);
}
/* Why Us Section */
.why-us-section[b-fc72bvrld9] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.why-us-section[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?fm=jpg&q=60&w=3000');
background-size: cover;
opacity: 0.1;
z-index: 0;
}
.why-us-section .container[b-fc72bvrld9] {
position: relative;
z-index: 1;
}
.why-us-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.why-us-card[b-fc72bvrld9] {
background-color: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.why-us-card:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.why-us-icon[b-fc72bvrld9] {
width: 70px;
height: 70px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.why-us-icon i[b-fc72bvrld9] {
font-size: 32px;
color: white;
}
.why-us-icon.safety[b-fc72bvrld9] {
background: linear-gradient(135deg, #2ecc71, #27ae60);
}
.why-us-icon.punctuality[b-fc72bvrld9] {
background: linear-gradient(135deg, #3498db, #2980b9);
}
.why-us-icon.prices[b-fc72bvrld9] {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.why-us-icon.support[b-fc72bvrld9] {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.why-us-card h3[b-fc72bvrld9] {
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.why-us-card p[b-fc72bvrld9] {
font-size: 15px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.why-us-features[b-fc72bvrld9] {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.why-us-features li[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #555;
}
.why-us-features li i[b-fc72bvrld9] {
color: #27ae60;
font-size: 16px;
}
.why-us-image[b-fc72bvrld9] {
margin-top: auto;
height: 160px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.why-us-image img[b-fc72bvrld9] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.why-us-card:hover .why-us-image img[b-fc72bvrld9] {
transform: scale(1.05);
}
@media (max-width: 992px) {
.why-us-grid[b-fc72bvrld9] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.why-us-grid[b-fc72bvrld9] {
grid-template-columns: 1fr;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
/* Testimonials Section */
.testimonials-section[b-fc72bvrld9] {
padding: 80px 0;
background-color: #f8f9fa;
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 249, 250, 0.9) 100%);
position: relative;
}
.testimonials-section[b-fc72bvrld9]::before {
content: '"';
position: absolute;
top: 40px;
left: 5%;
font-size: 200px;
color: rgba(233, 76, 60, 0.05);
font-family: Georgia, serif;
line-height: 1;
}
.testimonials-section .section-header[b-fc72bvrld9] {
text-align: center;
position: relative;
z-index: 1;
}
.testimonials-section .section-header p[b-fc72bvrld9] {
color: #666;
margin-top: 10px;
}
.testimonials-slider[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin-top: 40px;
}
.testimonial-card[b-fc72bvrld9] {
background-color: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
border-top: 4px solid #e94c3c;
overflow: hidden;
}
.testimonial-card[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background-color: rgba(233, 76, 60, 0.05);
border-radius: 0 0 0 100%;
z-index: 0;
}
.testimonial-card:hover[b-fc72bvrld9] {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.testimonial-rating[b-fc72bvrld9] {
color: #ffc107;
margin-bottom: 15px;
display: flex;
gap: 2px;
}
.testimonial-content[b-fc72bvrld9] {
position: relative;
margin-bottom: 25px;
z-index: 1;
}
.testimonial-content .bi-quote[b-fc72bvrld9] {
position: absolute;
top: -10px;
left: -5px;
font-size: 24px;
color: #e94c3c;
opacity: 0.2;
}
.testimonial-content p[b-fc72bvrld9] {
font-size: 16px;
line-height: 1.7;
color: #555;
font-style: italic;
margin-top: 10px;
}
.testimonial-author[b-fc72bvrld9] {
display: flex;
align-items: center;
margin-top: 20px;
position: relative;
z-index: 1;
}
.testimonial-author img[b-fc72bvrld9] {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 3px solid #fff;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.author-info h4[b-fc72bvrld9] {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.author-details[b-fc72bvrld9] {
display: flex;
flex-direction: column;
margin-top: 5px;
}
.author-type[b-fc72bvrld9] {
font-size: 14px;
color: #e94c3c;
font-weight: 500;
}
.author-route[b-fc72bvrld9] {
font-size: 13px;
color: #777;
margin-top: 2px;
}
.testimonial-date[b-fc72bvrld9] {
font-size: 12px;
color: #999;
margin-top: 15px;
text-align: right;
font-style: italic;
}
.testimonial-actions[b-fc72bvrld9] {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
gap: 20px;
}
.testimonial-nav[b-fc72bvrld9] {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.testimonial-nav:hover[b-fc72bvrld9] {
background-color: #e94c3c;
color: white;
}
.testimonial-dots[b-fc72bvrld9] {
display: flex;
gap: 8px;
}
.dot[b-fc72bvrld9] {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active[b-fc72bvrld9] {
background-color: #e94c3c;
transform: scale(1.2);
}
@media (max-width: 768px) {
.testimonials-slider[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.testimonial-card[b-fc72bvrld9] {
padding: 25px;
}
.testimonial-author img[b-fc72bvrld9] {
width: 50px;
height: 50px;
}
}
/* Footer Section */
.footer-section[b-fc72bvrld9] {
background: #1a1a1a;
color: #fff;
padding: 80px 0 40px;
position: relative;
overflow: hidden;
}
.footer-section[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #e74c3c, #f39c12, #e74c3c);
}
.footer-content[b-fc72bvrld9] {
display: grid;
grid-template-columns: 1.5fr 2fr 1.5fr;
gap: 60px;
margin-bottom: 40px;
}
.footer-logo img[b-fc72bvrld9] {
height: 50px;
margin-bottom: 20px;
border-radius: 10px;
}
.footer-logo p[b-fc72bvrld9] {
color: #ccc;
margin-bottom: 20px;
line-height: 1.7;
}
.footer-links[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.footer-column h3[b-fc72bvrld9] {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
color: #fff;
position: relative;
padding-bottom: 10px;
}
.footer-column h3[b-fc72bvrld9]::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background-color: #e74c3c;
}
.footer-column ul[b-fc72bvrld9] {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column li[b-fc72bvrld9] {
margin-bottom: 12px;
}
.footer-column a[b-fc72bvrld9] {
color: #ccc;
text-decoration: none;
transition: all 0.3s ease;
font-size: 15px;
}
.footer-column a:hover[b-fc72bvrld9] {
color: #e74c3c;
padding-left: 5px;
}
.footer-column li i[b-fc72bvrld9] {
font-size: 12px;
color: #e74c3c;
margin-right: 8px;
}
.footer-contact h3[b-fc72bvrld9] {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-contact h3[b-fc72bvrld9]::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background-color: #e74c3c;
}
.footer-contact p[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 10px;
color: #ccc;
margin-bottom: 15px;
line-height: 1.5;
}
.footer-contact i[b-fc72bvrld9] {
color: #e74c3c;
font-size: 18px;
}
.social-links[b-fc72bvrld9] {
display: flex;
gap: 12px;
margin-top: 20px;
}
.social-links a[b-fc72bvrld9] {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: #333;
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
}
.social-links a:hover[b-fc72bvrld9] {
background: #e74c3c;
transform: translateY(-5px);
}
.social-links a.facebook:hover[b-fc72bvrld9] {
background-color: #3b5998;
}
.social-links a.twitter:hover[b-fc72bvrld9] {
background-color: #1da1f2;
}
.social-links a.instagram:hover[b-fc72bvrld9] {
background-color: #e1306c;
}
.social-links a.linkedin:hover[b-fc72bvrld9] {
background-color: #0077b5;
}
.social-links a.youtube:hover[b-fc72bvrld9] {
background-color: #ff0000;
}
.footer-bottom[b-fc72bvrld9] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p[b-fc72bvrld9] {
color: #aaa;
margin: 0;
font-size: 14px;
}
.footer-bottom p strong[b-fc72bvrld9] {
color: #e74c3c;
}
.payment-methods[b-fc72bvrld9] {
display: flex;
gap: 15px;
}
.payment-methods img[b-fc72bvrld9] {
height: 30px;
}
.footer-bottom-links[b-fc72bvrld9] {
display: flex;
gap: 20px;
}
.footer-bottom-links a[b-fc72bvrld9] {
color: #aaa;
font-size: 14px;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-bottom-links a:hover[b-fc72bvrld9] {
color: #e74c3c;
}
/* Responsive Design */
@media (max-width: 1200px) {
.why-choose-content[b-fc72bvrld9] {
flex-direction: column;
}
.why-choose-image[b-fc72bvrld9] {
margin-top: 60px;
}
.stats-card[b-fc72bvrld9] {
position: static;
transform: none;
margin-top: 30px;
width: 100%;
}
.footer-content[b-fc72bvrld9] {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-links[b-fc72bvrld9] {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
section[b-fc72bvrld9] {
padding: 40px 0;
}
.section-header h2[b-fc72bvrld9] {
font-size: 24px;
}
.app-content[b-fc72bvrld9] {
flex-direction: column;
text-align: center;
}
.app-features[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.app-buttons[b-fc72bvrld9] {
justify-content: center;
}
.app-info h2[b-fc72bvrld9] {
font-size: 28px;
}
.services-grid[b-fc72bvrld9],
.benefits-grid[b-fc72bvrld9],
.reviews-slider[b-fc72bvrld9],
.operators-grid[b-fc72bvrld9],
.routes-grid[b-fc72bvrld9],
.offers-grid[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.why-choose-text h2[b-fc72bvrld9] {
font-size: 28px;
}
.why-choose-text .subtitle[b-fc72bvrld9] {
font-size: 16px;
}
.benefits-grid[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.stats-card[b-fc72bvrld9] {
flex-direction: column;
gap: 20px;
}
.cta-button[b-fc72bvrld9] {
width: 100%;
text-align: center;
}
.footer-links[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.footer-bottom[b-fc72bvrld9] {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
.assured-section[b-fc72bvrld9] {
padding: 60px 0;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
position: relative;
overflow: hidden;
}
.assured-section[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('images/pattern.png') repeat;
opacity: 0.1;
}
.assured-content[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 40px;
position: relative;
z-index: 1;
}
.assured-info[b-fc72bvrld9] {
flex: 1;
color: white;
}
.assured-badge[b-fc72bvrld9] {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 30px;
margin-bottom: 30px;
}
.assured-badge img[b-fc72bvrld9] {
width: 24px;
height: 24px;
}
.assured-badge span[b-fc72bvrld9] {
font-weight: 600;
font-size: 16px;
}
.assured-features[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 30px;
}
.feature-item[b-fc72bvrld9] {
display: flex;
align-items: flex-start;
gap: 15px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
transition: all 0.3s ease;
}
.feature-item:hover[b-fc72bvrld9] {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
}
.feature-item i[b-fc72bvrld9] {
font-size: 24px;
color: #ffd700;
}
.feature-text h4[b-fc72bvrld9] {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 600;
}
.feature-text p[b-fc72bvrld9] {
margin: 0;
font-size: 14px;
opacity: 0.9;
}
.read-more-btn[b-fc72bvrld9] {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffd700;
color: #1e3c72;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.read-more-btn:hover[b-fc72bvrld9] {
background: #ffed4a;
transform: translateY(-2px);
}
.assured-image[b-fc72bvrld9] {
flex: 1;
position: relative;
display: flex;
justify-content: center;
}
.assured-image img[b-fc72bvrld9] {
max-width: 100%;
height: auto;
}
.assured-image .shield-image[b-fc72bvrld9] {
max-width: 300px;
height: auto;
filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
}
.floating-coins[b-fc72bvrld9] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
.coin[b-fc72bvrld9] {
position: absolute;
width: 48px;
height: 48px;
animation: float-b-fc72bvrld9 3s ease-in-out infinite;
}
.coin img[b-fc72bvrld9] {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
animation: rotate-b-fc72bvrld9 6s linear infinite;
}
.coin-1[b-fc72bvrld9] {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.coin-2[b-fc72bvrld9] {
top: 40%;
right: 20%;
animation-delay: 0.5s;
}
.coin-3[b-fc72bvrld9] {
bottom: 30%;
left: 25%;
animation-delay: 1s;
}
.coin-4[b-fc72bvrld9] {
top: 30%;
right: 25%;
animation-delay: 1.5s;
}
.coin-5[b-fc72bvrld9] {
bottom: 40%;
right: 15%;
animation-delay: 2s;
}
@keyframes float-b-fc72bvrld9 {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
@keyframes rotate-b-fc72bvrld9 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Modal Styles */
.assured-modal-content[b-fc72bvrld9] {
padding: 20px;
}
.assured-modal-header[b-fc72bvrld9] {
text-align: center;
margin-bottom: 30px;
}
.assured-modal-header img[b-fc72bvrld9] {
width: 72px !important;
height: 72px !important;
margin-bottom: 15px;
}
.assured-modal-header h3[b-fc72bvrld9] {
font-size: 24px;
color: #333;
margin: 0;
}
.benefits-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.benefit-item[b-fc72bvrld9] {
text-align: center;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
}
.benefit-item i[b-fc72bvrld9] {
font-size: 32px;
color: #1e3c72;
margin-bottom: 15px;
}
.benefit-item h4[b-fc72bvrld9] {
font-size: 18px;
color: #333;
margin: 0 0 5px 0;
}
.benefit-item p[b-fc72bvrld9] {
font-size: 14px;
color: #666;
margin: 0;
}
.terms-section[b-fc72bvrld9] {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
}
.terms-section h4[b-fc72bvrld9] {
font-size: 20px;
color: #333;
margin: 0 0 15px 0;
}
.terms-content[b-fc72bvrld9] {
max-height: 300px;
overflow-y: auto;
padding-right: 15px;
}
.terms-content h5[b-fc72bvrld9] {
font-size: 16px;
color: #333;
margin: 0 0 10px 0;
}
.terms-content ol[b-fc72bvrld9] {
padding-left: 20px;
margin: 0;
}
.terms-content li[b-fc72bvrld9] {
margin-bottom: 10px;
color: #666;
font-size: 14px;
line-height: 1.5;
}
.terms-content ul[b-fc72bvrld9] {
padding-left: 20px;
margin: 10px 0;
}
@media (max-width: 992px) {
.assured-content[b-fc72bvrld9] {
flex-direction: column;
}
.assured-image[b-fc72bvrld9] {
order: -1;
}
.assured-features[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.benefits-grid[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.assured-section[b-fc72bvrld9] {
padding: 40px 0;
}
.assured-badge[b-fc72bvrld9] {
margin-bottom: 20px;
}
.feature-item[b-fc72bvrld9] {
padding: 15px;
}
.feature-text h4[b-fc72bvrld9] {
font-size: 14px;
}
.feature-text p[b-fc72bvrld9] {
font-size: 12px;
}
}
.new-footer[b-fc72bvrld9] {
background: linear-gradient(to bottom, #1a1a1a, #121212);
color: white;
padding: 60px 0 30px;
}
.footer-top[b-fc72bvrld9] {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-links-container[b-fc72bvrld9] {
padding-right: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-logo[b-fc72bvrld9] {
width: 60px;
height: 60px;
margin-bottom: 30px;
filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.5));
transition: all 0.3s ease;
}
.footer-logo:hover[b-fc72bvrld9] {
transform: scale(1.1);
filter: drop-shadow(0 0 15px rgba(255, 107, 107, 0.7));
}
.footer-about h3[b-fc72bvrld9] {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer-about p[b-fc72bvrld9] {
color: #999;
margin-bottom: 15px;
line-height: 1.6;
font-size: 14px;
}
.footer-contact-section[b-fc72bvrld9] {
padding: 30px 0;
background: rgba(255, 255, 255, 0.03);
margin-bottom: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-container[b-fc72bvrld9] {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.contact-item[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 15px;
color: #bbb;
background: rgba(255, 255, 255, 0.05);
padding: 12px 20px;
border-radius: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
min-width: 250px;
}
.contact-item[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(255, 142, 83, 0.1));
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.contact-item:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.contact-item:hover[b-fc72bvrld9]::before {
transform: scaleX(1);
transform-origin: left;
}
.contact-item i[b-fc72bvrld9] {
color: #FF6B6B;
font-size: 20px;
transition: transform 0.3s ease;
}
.contact-item:hover i[b-fc72bvrld9] {
transform: scale(1.2);
}
.social-links[b-fc72bvrld9] {
display: flex;
gap: 15px;
margin-top: 25px;
flex-wrap: wrap;
}
.social-icon[b-fc72bvrld9] {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.social-icon[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 107, 107, 0.8), rgba(255, 142, 83, 0.8));
z-index: 0;
opacity: 0;
transform: scale(0);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.social-icon i[b-fc72bvrld9] {
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
.social-icon:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
.social-icon:hover[b-fc72bvrld9]::before {
opacity: 1;
transform: scale(1.5);
}
.social-icon:hover i[b-fc72bvrld9] {
transform: scale(1.2);
}
.social-icon.facebook:hover[b-fc72bvrld9] {
background: #1877f2;
}
.social-icon.twitter:hover[b-fc72bvrld9] {
background: #1da1f2;
}
.social-icon.instagram:hover[b-fc72bvrld9] {
background: #e4405f;
}
.social-icon.linkedin:hover[b-fc72bvrld9] {
background: #0077b5;
}
.social-icon.youtube:hover[b-fc72bvrld9] {
background: #ff0000;
}
.footer-links-wrapper[b-fc72bvrld9] {
border-left: 2px solid rgba(255, 107, 107, 0.3);
padding-left: 40px;
position: relative;
}
.footer-links-wrapper[b-fc72bvrld9]::before {
content: '';
position: absolute;
left: -1px;
top: 0;
height: 100%;
width: 2px;
background: linear-gradient(to bottom, rgba(255, 107, 107, 0.7), rgba(255, 142, 83, 0.7));
transform: scaleY(0.3);
transform-origin: top;
transition: transform 0.5s ease;
}
.footer-links-wrapper:hover[b-fc72bvrld9]::before {
transform: scaleY(1);
}
.footer-tabs[b-fc72bvrld9] {
display: flex;
gap: 20px;
margin-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 107, 107, 0.5) rgba(255, 255, 255, 0.1);
}
.footer-tabs[b-fc72bvrld9]::-webkit-scrollbar {
height: 5px;
}
.footer-tabs[b-fc72bvrld9]::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.footer-tabs[b-fc72bvrld9]::-webkit-scrollbar-thumb {
background: rgba(255, 107, 107, 0.5);
border-radius: 10px;
}
.tab[b-fc72bvrld9] {
color: #bbb;
cursor: pointer;
padding: 10px 15px;
position: relative;
transition: all 0.3s ease;
border-radius: 20px;
white-space: nowrap;
background: rgba(255, 255, 255, 0.05);
}
.tab:hover[b-fc72bvrld9] {
background: rgba(255, 107, 107, 0.2);
}
.tab.active[b-fc72bvrld9] {
background: linear-gradient(45deg, rgba(255, 107, 107, 0.3), rgba(255, 142, 83, 0.3));
color: white;
}
.tab[b-fc72bvrld9]::after {
content: '';
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.tab:hover[b-fc72bvrld9] {
color: white;
}
.tab.active[b-fc72bvrld9] {
color: white;
}
.tab.active[b-fc72bvrld9]::after {
transform: scaleX(1);
}
.footer-routes[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
animation: fadeIn-b-fc72bvrld9 0.5s ease-in-out;
}
@keyframes fadeIn-b-fc72bvrld9 {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.routes-column a[b-fc72bvrld9] {
display: block;
color: #bbb;
text-decoration: none;
margin-bottom: 15px;
transition: all 0.3s ease;
padding: 8px 12px;
border-radius: 8px;
position: relative;
overflow: hidden;
z-index: 1;
}
.routes-column a[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(255, 142, 83, 0.1));
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.routes-column a:hover[b-fc72bvrld9] {
color: white;
transform: translateX(5px);
}
.routes-column a:hover[b-fc72bvrld9]::before {
transform: scaleX(1);
transform-origin: left;
}
.footer-bottom[b-fc72bvrld9] {
padding: 20px 0;
text-align: center;
background: rgba(0, 0, 0, 0.3);
color: #bbb;
position: relative;
}
.footer-bottom[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 107, 107, 0.5), rgba(255, 142, 83, 0.5), transparent);
}
.footer-info[b-fc72bvrld9] {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
font-size: 14px;
padding: 10px 0;
position: relative;
z-index: 1;
}
.footer-info a[b-fc72bvrld9] {
color: #bbb;
text-decoration: none;
transition: all 0.3s ease;
padding: 5px 10px;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.footer-info a[b-fc72bvrld9]::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, rgba(255, 107, 107, 0.7), rgba(255, 142, 83, 0.7));
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.footer-info a:hover[b-fc72bvrld9] {
color: white;
}
.footer-info a:hover[b-fc72bvrld9]::before {
transform: scaleX(1);
transform-origin: left;
}
@media (max-width: 1024px) {
.footer-top[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.footer-about[b-fc72bvrld9] {
padding-right: 0;
text-align: center;
}
.footer-contact[b-fc72bvrld9] {
justify-content: center;
}
.social-links[b-fc72bvrld9] {
justify-content: center;
}
.footer-links-wrapper[b-fc72bvrld9] {
border-left: none;
padding-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 40px;
}
}
@media (max-width: 768px) {
.new-footer[b-fc72bvrld9] {
padding: 40px 0 20px;
}
.footer-tabs[b-fc72bvrld9] {
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding-bottom: 15px;
}
.tab[b-fc72bvrld9] {
padding: 8px 12px;
font-size: 14px;
}
.footer-routes[b-fc72bvrld9] {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.routes-column a[b-fc72bvrld9] {
font-size: 14px;
margin-bottom: 10px;
padding: 6px 10px;
}
.contact-container[b-fc72bvrld9] {
flex-direction: column;
align-items: center;
gap: 15px;
}
.contact-item[b-fc72bvrld9] {
width: 90%;
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.footer-routes[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.footer-info[b-fc72bvrld9] {
flex-direction: column;
gap: 15px;
}
.footer-about h3[b-fc72bvrld9] {
font-size: 20px;
}
.social-links[b-fc72bvrld9] {
gap: 10px;
}
.social-icon[b-fc72bvrld9] {
width: 40px;
height: 40px;
}
.tab[b-fc72bvrld9] {
font-size: 12px;
padding: 6px 10px;
}
.contact-item[b-fc72bvrld9] {
width: 100%;
padding: 10px 15px;
min-width: auto;
}
.contact-item i[b-fc72bvrld9] {
font-size: 18px;
}
.contact-item span[b-fc72bvrld9] {
font-size: 13px;
}
.footer-contact-section[b-fc72bvrld9] {
padding: 20px 0;
}
}
/* Stats Section */
.stats-section[b-fc72bvrld9] {
padding: 80px 0;
background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
position: relative;
overflow: hidden;
}
.stats-section[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.1;
}
.stats-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
position: relative;
z-index: 1;
}
.stat-item[b-fc72bvrld9] {
text-align: center;
color: white;
padding: 30px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.stat-item:hover[b-fc72bvrld9] {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
}
.stat-number[b-fc72bvrld9] {
font-size: 3rem;
font-weight: 700;
margin-bottom: 15px;
background: linear-gradient(45deg, #fff, #e6e9ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label[b-fc72bvrld9] {
font-size: 1.1rem;
opacity: 0.9;
}
@media (max-width: 768px) {
.stats-grid[b-fc72bvrld9] {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-item:nth-child(2)[b-fc72bvrld9]::after {
display: none;
}
}
@media (max-width: 480px) {
.stats-grid[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.stat-item[b-fc72bvrld9]::after {
display: none;
}
.stat-number[b-fc72bvrld9] {
font-size: 2rem;
}
}
/* FAQ Section */
.faq-section[b-fc72bvrld9] {
padding: 80px 0;
background: linear-gradient(135deg, #f6f9fc 0%, #f1f4f8 100%);
}
.faq-section h2[b-fc72bvrld9] {
font-size: 32px;
font-weight: 700;
text-align: center;
margin-bottom: 50px;
background: linear-gradient(45deg, #2D3436, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.faq-container[b-fc72bvrld9] {
max-width: 900px;
margin: 0 auto;
}
.faq-container .faq-item:nth-child(n+5)[b-fc72bvrld9] {
display: none;
}
.faq-container.show-all .faq-item:nth-child(n+5)[b-fc72bvrld9] {
display: block;
}
.faq-item[b-fc72bvrld9] {
background: white;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
overflow: hidden;
}
.faq-item:hover[b-fc72bvrld9] {
transform: translateX(5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.question[b-fc72bvrld9] {
padding: 25px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: white;
transition: all 0.3s ease;
}
.faq-item.expanded .question[b-fc72bvrld9] {
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
}
.question i[b-fc72bvrld9] {
font-size: 24px;
transition: all 0.3s ease;
}
.faq-item.expanded .question i[b-fc72bvrld9] {
transform: rotate(180deg);
color: white;
}
.answer[b-fc72bvrld9] {
padding: 0 25px 25px;
color: #666;
line-height: 1.8;
}
.answer p[b-fc72bvrld9] {
margin: 0;
}
.faq-button[b-fc72bvrld9] {
text-align: center;
margin-top: 40px;
}
.view-all-faqs[b-fc72bvrld9], .hide-faqs[b-fc72bvrld9] {
padding: 12px 30px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}
.view-all-faqs:hover[b-fc72bvrld9] {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}
.hide-faqs[b-fc72bvrld9] {
background: linear-gradient(45deg, #2D3436, #000000);
}
.hide-faqs:hover[b-fc72bvrld9] {
background: #eeeeee;
color: #333;
}
@media (max-width: 768px) {
.faq-section[b-fc72bvrld9] {
padding: 40px 20px;
}
.question[b-fc72bvrld9] {
font-size: 14px;
padding: 15px 0;
}
.answer[b-fc72bvrld9] {
font-size: 13px;
}
.faq-button[b-fc72bvrld9] {
text-align: center;
}
}
.why-choose-section[b-fc72bvrld9] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #f1f4f8 100%);
position: relative;
overflow: hidden;
}
.why-choose-section[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
opacity: 0.1;
}
.why-choose-section .section-header[b-fc72bvrld9] {
text-align: center;
margin-bottom: 60px;
}
.header-content[b-fc72bvrld9] {
max-width: 700px;
margin: 0 auto;
}
.header-content h2[b-fc72bvrld9] {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #333;
line-height: 1.2;
}
.header-content .highlight[b-fc72bvrld9] {
color: #FF6B6B;
}
.header-content p[b-fc72bvrld9] {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
}
.features-grid[b-fc72bvrld9] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.feature-card[b-fc72bvrld9] {
background: white;
border-radius: 20px;
padding: 40px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
display: flex;
gap: 25px;
align-items: flex-start;
}
.feature-card:hover[b-fc72bvrld9] {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.feature-icon[b-fc72bvrld9] {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: white;
position: relative;
overflow: hidden;
}
.feature-icon[b-fc72bvrld9]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: brightness(1.2);
transition: transform 0.3s ease;
transform-origin: right;
}
.feature-card:hover .feature-icon[b-fc72bvrld9]::before {
transform: scaleX(1.5) rotate(15deg);
}
.feature-icon.safety[b-fc72bvrld9] {
background: linear-gradient(45deg, #00b09b, #96c93d);
}
.feature-icon.punctuality[b-fc72bvrld9] {
background: linear-gradient(45deg, #4facfe, #00f2fe);
}
.feature-icon.comfort[b-fc72bvrld9] {
background: linear-gradient(45deg, #ff6b6b, #ff8e53);
}
.feature-icon.support[b-fc72bvrld9] {
background: linear-gradient(45deg, #7f7fd5, #86a8e7);
}
.feature-icon i[b-fc72bvrld9] {
position: relative;
z-index: 1;
}
.feature-content[b-fc72bvrld9] {
flex: 1;
}
.feature-content h3[b-fc72bvrld9] {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
white-space: nowrap;
}
.feature-content p[b-fc72bvrld9] {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.feature-list[b-fc72bvrld9] {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 10px;
color: #555;
margin-bottom: 0.75rem;
font-size: 0.95rem;
white-space: nowrap;
}
.feature-list li i[b-fc72bvrld9] {
color: #00b09b;
font-size: 1.1rem;
}
@media (max-width: 1200px) {
.features-grid[b-fc72bvrld9] {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.feature-card[b-fc72bvrld9] {
padding: 30px;
}
}
@media (max-width: 992px) {
.features-grid[b-fc72bvrld9] {
grid-template-columns: 1fr;
}
.feature-card[b-fc72bvrld9] {
flex-direction: row;
align-items: flex-start;
}
}
@media (max-width: 576px) {
.header-content h2[b-fc72bvrld9] {
font-size: 2rem;
}
.feature-card[b-fc72bvrld9] {
flex-direction: column;
padding: 25px;
text-align: center;
}
.feature-icon[b-fc72bvrld9] {
margin: 0 auto 20px;
}
.feature-content h3[b-fc72bvrld9] {
font-size: 1.3rem;
}
.feature-list li[b-fc72bvrld9] {
justify-content: center;
}
}
/* App Section Responsive Design */
@media (max-width: 768px) {
.app-section[b-fc72bvrld9] {
padding: 40px 20px !important;
}
.app-content[b-fc72bvrld9] {
flex-direction: column !important;
gap: 30px !important;
}
.app-info[b-fc72bvrld9] {
text-align: center !important;
order: 2 !important;
}
.app-image[b-fc72bvrld9] {
order: 1 !important;
}
.app-buttons[b-fc72bvrld9] {
flex-direction: column !important;
gap: 10px !important;
}
.app-store[b-fc72bvrld9], .play-store[b-fc72bvrld9] {
justify-content: center !important;
padding: 15px 20px !important;
}
.app-features[b-fc72bvrld9] {
flex-direction: column !important;
gap: 15px !important;
}
.feature[b-fc72bvrld9] {
flex-direction: row !important;
text-align: left !important;
}
.app-image img[b-fc72bvrld9] {
max-height: 300px !important;
}
}
@media (max-width: 480px) {
.app-section[b-fc72bvrld9] {
padding: 30px 15px !important;
}
.app-info h2[b-fc72bvrld9] {
font-size: 24px !important;
}
.app-info p[b-fc72bvrld9] {
font-size: 14px !important;
}
.app-buttons[b-fc72bvrld9] {
gap: 8px !important;
}
.app-store[b-fc72bvrld9], .play-store[b-fc72bvrld9] {
padding: 12px 16px !important;
}
.button-text strong[b-fc72bvrld9] {
font-size: 12px !important;
}
.button-text span[b-fc72bvrld9] {
font-size: 9px !important;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.hero-section[b-fc72bvrld9] {
padding: 30px 0 50px 0;
min-height: 400px;
}
.content-wrapper[b-fc72bvrld9] {
margin-top: -10px;
max-width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.title[b-fc72bvrld9] {
font-size: 28px;
margin-bottom: 12px;
margin-top: 0;
line-height: 1.2;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.search-box[b-fc72bvrld9] {
margin-top: 8px;
padding: 25px 16px;
}
.mobile-header-content[b-fc72bvrld9] {
padding: 8px 10px;
gap: 6px;
}
.route-info[b-fc72bvrld9] {
font-size: 13px;
}
.route-arrow[b-fc72bvrld9] {
font-size: 14px;
margin: 0 4px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-fc72bvrld9] {
font-size: 11px;
}
.date-badge[b-fc72bvrld9] {
padding: 3px 6px;
min-width: 45px;
max-width: 60px;
}
.date-day[b-fc72bvrld9] {
font-size: 8px;
}
.date-weekday[b-fc72bvrld9] {
font-size: 7px;
}
}
@media (max-width: 360px) {
.hero-section[b-fc72bvrld9] {
padding: 20px 0 40px 0;
min-height: 350px;
}
.content-wrapper[b-fc72bvrld9] {
margin-top: -5px;
max-width: 100%;
padding: 0 8px;
}
.title[b-fc72bvrld9] {
font-size: 24px;
margin-bottom: 10px;
line-height: 1.1;
}
.search-box[b-fc72bvrld9] {
margin-top: 6px;
padding: 20px 12px;
}
}
/* Footer Styles */
.footer[b-fc72bvrld9] {
background: #1a1a1a;
color: white;
padding: 40px 0 20px;
margin-top: 60px;
}
.footer-content[b-fc72bvrld9] {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-section h3[b-fc72bvrld9] {
color: #fff;
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
}
.footer-section h3[b-fc72bvrld9]::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: #dc3545;
border-radius: 2px;
}
.footer-section p[b-fc72bvrld9] {
color: #ccc;
line-height: 1.6;
margin-bottom: 20px;
}
.footer-section ul[b-fc72bvrld9] {
list-style: none;
padding: 0;
}
.footer-section ul li[b-fc72bvrld9] {
margin-bottom: 12px;
}
.footer-section ul li a[b-fc72bvrld9] {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover[b-fc72bvrld9] {
color: #dc3545;
}
.social-links[b-fc72bvrld9] {
display: flex;
gap: 15px;
}
.social-links a[b-fc72bvrld9] {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #333;
color: white;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
}
.social-links a:hover[b-fc72bvrld9] {
background: #dc3545;
transform: translateY(-2px);
}
.contact-info p[b-fc72bvrld9] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
color: #ccc;
}
.contact-info i[b-fc72bvrld9] {
color: #dc3545;
width: 20px;
}
.footer-bottom[b-fc72bvrld9] {
border-top: 1px solid #333;
margin-top: 40px;
padding-top: 20px;
}
.footer-bottom-content[b-fc72bvrld9] {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-bottom p[b-fc72bvrld9] {
color: #ccc;
margin: 0;
}
.footer-links[b-fc72bvrld9] {
display: flex;
gap: 20px;
}
.footer-links a[b-fc72bvrld9] {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover[b-fc72bvrld9] {
color: #dc3545;
}
/* Mobile Responsive Footer */
@media (max-width: 768px) {
.footer[b-fc72bvrld9] {
padding: 30px 0 15px;
}
.footer-content[b-fc72bvrld9] {
grid-template-columns: 1fr;
gap: 30px;
padding: 0 15px;
}
.footer-section h3[b-fc72bvrld9] {
font-size: 16px;
margin-bottom: 15px;
}
.footer-bottom-content[b-fc72bvrld9] {
flex-direction: column;
text-align: center;
gap: 15px;
}
.footer-links[b-fc72bvrld9] {
justify-content: center;
}
}
/* _content/HappyBus.Ux/Components/CustomComponents/PassengerComponent.razor.rz.scp.css */
/* Passenger Details Container */
.passenger-details[b-ucjhjmy8m5] {
width: 100%;
}
/* Section Header */
.section-header[b-ucjhjmy8m5] {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #e9ecef;
}
.header-icon[b-ucjhjmy8m5] {
width: 48px;
height: 48px;
background: transparent;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 20px;
flex-shrink: 0;
}
.header-content h3[b-ucjhjmy8m5] {
color: #2c3e50;
font-size: 20px;
font-weight: 700;
margin: 0 0 4px 0;
}
.header-content p[b-ucjhjmy8m5] {
color: #6c757d;
font-size: 14px;
margin: 0;
}
/* Passenger List */
.passenger-list[b-ucjhjmy8m5] {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Passenger Card */
.passenger-card[b-ucjhjmy8m5] {
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.passenger-card:hover[b-ucjhjmy8m5] {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* Passenger Header */
.passenger-header[b-ucjhjmy8m5] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #f8f9fa;
}
.seat-badge[b-ucjhjmy8m5] {
display: flex;
align-items: center;
gap: 8px;
background: #e3f2fd;
color: #1976d2;
padding: 8px 12px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
}
.seat-badge i[b-ucjhjmy8m5] {
font-size: 16px;
}
.lead-badge[b-ucjhjmy8m5] {
display: flex;
align-items: center;
gap: 6px;
background: #fff3cd;
color: #856404;
padding: 6px 10px;
border-radius: 6px;
font-weight: 500;
font-size: 12px;
}
.lead-badge i[b-ucjhjmy8m5] {
color: #ffc107;
font-size: 14px;
}
/* Passenger Form */
.passenger-form[b-ucjhjmy8m5] {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-row[b-ucjhjmy8m5] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group[b-ucjhjmy8m5] {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label[b-ucjhjmy8m5] {
display: flex;
align-items: center;
gap: 8px;
color: #2c3e50;
font-weight: 600;
font-size: 14px;
}
.form-group label i[b-ucjhjmy8m5] {
color: #ff6b6b;
font-size: 16px;
}
.form-input[b-ucjhjmy8m5] {
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
background: white;
color: #2c3e50;
}
.form-input:focus[b-ucjhjmy8m5] {
outline: none;
border-color: #ff6b6b;
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}
.form-input[b-ucjhjmy8m5]::placeholder {
color: #adb5bd;
}
/* Gender Options */
.gender-options[b-ucjhjmy8m5] {
display: flex;
gap: 16px;
}
.radio-option[b-ucjhjmy8m5] {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
transition: all 0.3s ease;
background: white;
flex: 1;
justify-content: center;
font-weight: 500;
color: #6c757d;
}
.radio-option:hover[b-ucjhjmy8m5] {
border-color: #ff6b6b;
background: #fff5f5;
}
.radio-option input[type="radio"][b-ucjhjmy8m5] {
display: none;
}
.radio-option input[type="radio"]:checked + .radio-custom[b-ucjhjmy8m5] {
background: #ff6b6b;
border-color: #ff6b6b;
}
.radio-option input[type="radio"]:checked ~ i[b-ucjhjmy8m5],
.radio-option input[type="radio"]:checked ~ span[b-ucjhjmy8m5] {
color: #ff6b6b;
}
.radio-option input[type="radio"]:checked[b-ucjhjmy8m5] {
background: #fff5f5;
border-color: #ff6b6b;
}
.radio-custom[b-ucjhjmy8m5] {
width: 16px;
height: 16px;
border: 2px solid #e9ecef;
border-radius: 50%;
transition: all 0.3s ease;
}
.radio-option i[b-ucjhjmy8m5] {
font-size: 16px;
transition: color 0.3s ease;
}
.radio-option span[b-ucjhjmy8m5] {
font-size: 14px;
transition: color 0.3s ease;
}
.validation-error[b-ucjhjmy8m5] {
color: #dc3545;
font-size: 12px;
font-weight: 500;
margin-top: 4px;
}
/* Responsive Design */
@media (max-width: 768px) {
.form-row[b-ucjhjmy8m5] {
grid-template-columns: 1fr;
gap: 12px;
}
.passenger-header[b-ucjhjmy8m5] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.gender-options[b-ucjhjmy8m5] {
flex-direction: column;
gap: 8px;
}
.radio-option[b-ucjhjmy8m5] {
justify-content: flex-start;
padding: 10px 12px;
}
.section-header[b-ucjhjmy8m5] {
gap: 12px;
margin-bottom: 20px;
}
.header-icon[b-ucjhjmy8m5] {
width: 40px;
height: 40px;
font-size: 18px;
}
.header-content h3[b-ucjhjmy8m5] {
font-size: 20px;
}
.header-content p[b-ucjhjmy8m5] {
font-size: 15px;
}
}
@media (max-width: 480px) {
.passenger-card[b-ucjhjmy8m5] {
padding: 12px;
}
.section-header[b-ucjhjmy8m5] {
flex-direction: row;
text-align: left;
gap: 12px;
margin-bottom: 16px;
align-items: center;
}
.header-icon[b-ucjhjmy8m5] {
width: 36px;
height: 36px;
font-size: 16px;
}
.header-content h3[b-ucjhjmy8m5] {
font-size: 18px;
font-weight: 700;
}
.form-input[b-ucjhjmy8m5] {
padding: 12px 14px;
font-size: 16px;
}
.radio-option[b-ucjhjmy8m5] {
padding: 10px 12px;
font-size: 15px;
}
.form-group label[b-ucjhjmy8m5] {
font-size: 15px;
}
}
/* _content/HappyBus.Ux/Components/CustomComponents/SearchFilter.razor.rz.scp.css */
.search-container[b-f995corigh] {
border: none;
border-radius: 16px;
padding: 32px;
max-width: 2000px;
margin: 30px auto;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
background-color: white;
min-height: 120px;
}
.search-form[b-f995corigh] {
display: grid;
grid-template-columns: 1fr auto 1fr 1.2fr auto;
gap: 6px;
align-items: end;
}
.input-group[b-f995corigh] {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
}
.input-icon[b-f995corigh] {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
.input-group[b-f995corigh] {
position: relative;
}
.input-group .input-icon i[b-f995corigh] {
font-size: 16px;
line-height: 1;
}
.input-icon i[b-f995corigh] {
font-size: 18px;
color: #666;
transition: all 0.3s ease;
}
.input-icon .from-icon[b-f995corigh] {
color: #e74c3c;
}
.input-icon .to-icon[b-f995corigh] {
color: #3498db;
}
.input-icon .calendar-icon[b-f995corigh] {
color: #f39c12;
}
.input-group:hover .input-icon i[b-f995corigh] {
transform: scale(1.2);
}
.date-group[b-f995corigh] {
min-width: 200px;
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
}
.date-group .input-label[b-f995corigh] {
position: absolute;
top: -10px;
left: 12px;
font-size: 12px;
background-color: white;
padding: 0 8px;
color: #666;
border-radius: 4px;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
z-index: 1;
}
/* Date label now uses input-label class */
.input-label[b-f995corigh] {
position: absolute;
top: -10px;
left: 12px;
font-size: 12px;
background-color: white;
padding: 0 8px;
color: #666;
border-radius: 4px;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.date-input[b-f995corigh] {
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
flex-direction: row;
}
.date-input input[type="date"][b-f995corigh] {
flex: 1;
padding: 12px 16px 12px 40px;
font-size: 16px;
border: 0.5px solid #e0e0e0;
border-radius: 8px;
background-color: #f8f9fa;
color: #333;
min-width: 160px;
width: auto;
height: 48px;
box-sizing: border-box;
}
.date-input input[type="date"]:focus[b-f995corigh] {
outline: none;
border-color: #e74c3c;
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}
.quick-dates[b-f995corigh] {
display: flex;
gap: 8px;
margin-top: 0;
flex-shrink: 0;
align-items: center;
justify-content: flex-start;
}
.quick-dates button[b-f995corigh] {
padding: 8px 12px;
font-size: 13px;
border: none;
border-radius: 4px;
background-color: #f0f0f0;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
flex-shrink: 0;
font-weight: 700;
}
.quick-dates button:hover[b-f995corigh] {
background-color: #e0e0e0;
color: #333;
}
.swap-button[b-f995corigh] {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e0e0e0;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 0;
}
.swap-button i[b-f995corigh] {
font-size: 16px;
color: #666;
transition: all 0.3s ease;
}
.swap-button:hover[b-f995corigh] {
background-color: #f8f9fa;
transform: rotate(180deg);
}
.search-button[b-f995corigh] {
padding: 10px 16px;
font-size: 14px;
border: none;
border-radius: 6px;
background-color: #e74c3c;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
margin-top: 0;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
white-space: nowrap;
min-width: fit-content;
max-width: 100px;
align-self: flex-end;
}
.search-button:hover[b-f995corigh] {
background-color: #c0392b;
}
.search-button i[b-f995corigh] {
font-size: 16px;
transition: all 0.3s ease;
}
.search-button:hover i.fa-arrow-right[b-f995corigh] {
transform: translateX(4px);
}
.search-button:hover i.fa-search[b-f995corigh] {
transform: scale(1.2);
}
:deep(.autocomplete-wrapper)[b-f995corigh] {
width: 100%;
}
:deep(.autocomplete-input)[b-f995corigh] {
width: 100%;
padding: 12px 16px 12px 40px;
font-size: 16px;
border: 0.5px solid #e0e0e0;
border-radius: 8px;
background-color: #f8f9fa;
color: #333;
height: 48px;
box-sizing: border-box;
}
:deep(.autocomplete-input:focus)[b-f995corigh] {
outline: none;
border-color: #e74c3c;
box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}
:deep(.autocomplete-list)[b-f995corigh] {
margin-top: 4px;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
:deep(.autocomplete-item)[b-f995corigh] {
padding: 10px 16px;
transition: all 0.2s ease;
}
:deep(.autocomplete-item:hover)[b-f995corigh],
:deep(.autocomplete-item.active)[b-f995corigh] {
background-color: #f8f9fa;
color: #e74c3c;
}
/* Desktop specific styles */
@media (min-width: 1025px) {
.search-button[b-f995corigh] {
padding: 10px 16px;
font-size: 14px;
max-width: 100px;
}
.date-input[b-f995corigh] {
flex-direction: row;
align-items: center;
}
.date-input input[type="date"][b-f995corigh] {
min-width: 170px;
width: auto;
flex: 1;
}
.quick-dates[b-f995corigh] {
margin-top: 0;
justify-content: flex-start;
}
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
.search-container[b-f995corigh] {
max-width: 95%;
margin: 20px auto;
padding: 20px;
}
.search-form[b-f995corigh] {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.input-group[b-f995corigh] {
gap: 8px;
}
.date-group[b-f995corigh] {
gap: 8px;
}
.swap-button[b-f995corigh] {
display: none;
}
.date-group[b-f995corigh] {
grid-column: span 2;
}
.search-button[b-f995corigh] {
grid-column: span 2;
margin-top: 12px;
justify-self: center;
width: 60%;
max-width: 200px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
}
@media (max-width: 640px) {
.search-form[b-f995corigh] {
grid-template-columns: 1fr;
gap: 16px;
}
.input-group[b-f995corigh] {
gap: 8px;
}
.date-group[b-f995corigh] {
gap: 8px;
grid-column: auto;
}
.search-button[b-f995corigh] {
grid-column: auto;
justify-self: center;
width: 60%;
max-width: 180px;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.date-input[b-f995corigh] {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.date-input input[type="date"][b-f995corigh] {
width: 100%;
}
.quick-dates[b-f995corigh] {
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.quick-dates button[b-f995corigh] {
flex: 1;
justify-content: center;
min-width: 0;
padding: 8px 10px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.search-container[b-f995corigh] {
padding: 16px;
margin: 15px auto;
max-width: 100%;
box-sizing: border-box;
}
.search-form[b-f995corigh] {
gap: 14px;
}
.date-input[b-f995corigh] {
gap: 6px;
}
.quick-dates[b-f995corigh] {
gap: 4px;
}
.quick-dates button[b-f995corigh] {
padding: 7px 8px;
font-size: 13px;
min-width: 0;
}
.search-button[b-f995corigh] {
padding: 12px 18px;
font-size: 16px;
justify-self: center;
width: 65%;
max-width: 160px;
margin-top: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
}
@media (max-width: 360px) {
.search-container[b-f995corigh] {
padding: 12px;
margin: 10px auto;
}
.search-form[b-f995corigh] {
gap: 8px;
}
.quick-dates button[b-f995corigh] {
padding: 6px 7px;
font-size: 12px;
}
.search-button[b-f995corigh] {
padding: 10px 14px;
font-size: 14px;
}
}
/* _content/HappyBus.Ux/Components/CustomComponents/SeatLayout.razor.rz.scp.css */
.seat-layout-container[b-2ep3rxp334] {
width: 100%;
}
.deck-sections-container[b-2ep3rxp334] {
display: flex;
gap: 20px;
justify-content: space-between;
align-items: flex-start;
}
.loading[b-2ep3rxp334] {
text-align: center;
padding: 40px;
color: #666;
font-size: 16px;
}
/* Deck Sections */
.deck-section[b-2ep3rxp334] {
flex: 1;
background: #fff;
border-radius: 16px;
padding: 10px;
max-width: 300px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header[b-2ep3rxp334] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.header h3[b-2ep3rxp334] {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.steering[b-2ep3rxp334] {
font-size: 26px;
}
.seats[b-2ep3rxp334] {
display: flex;
justify-content: flex-start;
gap: 12px;
}
.row[b-2ep3rxp334] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.sleeper[b-2ep3rxp334] {
border: 2px solid #4CAF50;
background: #fff;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
position: relative;
height: clamp(40px, 5vw, 65px); /* min 40px, max 65px */
width: clamp(19px, 2vw, 30px); /* min 15px, max 30px */
border-radius: 4px;
}
.seater[b-2ep3rxp334] {
transition: background 0.2s, border-color 0.2s;
position: relative;
/* width: 25px;
height: 20px;*/
border-radius: 4px;
height: 1.22rem;
width: clamp(19px, 2vw, 30px);
}
.available[b-2ep3rxp334] {
border: 1px solid #4CAF50;
background: #fff;
cursor: pointer;
}
.footpath[b-2ep3rxp334] {
position: relative;
cursor: not-allowed;
border: none;
}
/* Sold seat */
.sold[b-2ep3rxp334] {
border: 1px solid #ccc !important;
background: #f1f1f1 !important;
cursor: not-allowed;
border-radius: 4px;
}
/* Gender specific seats */
.female[b-2ep3rxp334] {
border-color: #E91E63;
color: #E91E63;
}
/*.female::before {
content: "♀";
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
font-weight: bold;
}*/
.male[b-2ep3rxp334] {
border-color: #2196F3;
color: #2196F3;
}
/*.male::before {
content: "♂";
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
}*/
.selected[b-2ep3rxp334] {
background: #4CAF50 !important;
border-color: #388E3C !important;
color: #fff !important;
}
/* Price label */
.seat-price[b-2ep3rxp334] {
margin-top: 2px;
font-size: 11px;
font-weight: 500;
color: #333;
min-height: 18px;
text-align: center;
}
.sleeper-price[b-2ep3rxp334] {
font-size: 11px;
}
/* Responsive for smaller screens */
@media (max-width: 500px) {
.seats[b-2ep3rxp334] {
flex-wrap: wrap;
}
.row[b-2ep3rxp334] {
flex: 1 1 30%;
}
}
table[b-2ep3rxp334] {
width: 100%;
border-collapse: collapse;
}
th[b-2ep3rxp334], td[b-2ep3rxp334] {
padding: 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
th[b-2ep3rxp334] {
font-weight: bold;
}
/* _content/HappyBus.Ux/Components/CustomComponents/SeatlayoutBoardingPoint.razor.rz.scp.css */
/* Modal Container */
.seat-booking-modal[b-3jwm7k3wj7] {
max-width: 900px;
width: 85%;
margin: 0 auto;
background: transparent;
border-radius: 12px;
box-shadow: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
/* Top Header */
.modal-header[b-3jwm7k3wj7] {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 16px 24px;
background: white;
border-bottom: 1px solid #e9ecef;
}
.close-button[b-3jwm7k3wj7] {
width: 32px;
height: 32px;
border-radius: 50%;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.close-button:hover[b-3jwm7k3wj7] {
background: transparent;
color: #6c757d;
}
.close-button i[b-3jwm7k3wj7] {
font-size: 14px;
}
/* Trip Details Header */
.trip-details-header[b-3jwm7k3wj7] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: transparent;
border-bottom: 1px solid #e9ecef;
}
.trip-info[b-3jwm7k3wj7] {
flex: 1;
}
.route-info[b-3jwm7k3wj7] {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 12px;
}
.route[b-3jwm7k3wj7] {
font-size: 24px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 8px;
}
.date-info[b-3jwm7k3wj7] {
display: flex;
align-items: center;
gap: 8px;
color: #6c757d;
font-size: 16px;
font-weight: 600;
}
.date-info i[b-3jwm7k3wj7] {
color: #2196f3;
}
.operator-info[b-3jwm7k3wj7] {
text-align: right;
}
.operator-name[b-3jwm7k3wj7] {
font-size: 22px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 6px;
}
.bus-type[b-3jwm7k3wj7] {
font-size: 16px;
font-weight: 600;
color: #6c757d;
}
/* Progress Steps */
.progress-steps[b-3jwm7k3wj7] {
display: flex;
justify-content: center;
padding: 8px 24px;
background: transparent;
border-bottom: 1px solid #e9ecef;
gap: 40px;
}
.step[b-3jwm7k3wj7] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.step.active[b-3jwm7k3wj7] {
background: transparent;
color: #2196f3;
border: 2px solid #2196f3;
}
.step.completed[b-3jwm7k3wj7] {
background: transparent;
color: #28a745;
border: 2px solid #28a745;
}
.step:not(.active):not(.completed)[b-3jwm7k3wj7] {
background: transparent;
color: #6c757d;
border: 2px solid #e9ecef;
}
.step-number[b-3jwm7k3wj7] {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 11px;
background: rgba(255, 255, 255, 0.2);
}
.step-text[b-3jwm7k3wj7] {
font-size: 14px;
font-weight: 600;
}
/* Main Content */
.main-content[b-3jwm7k3wj7] {
display: flex;
min-height: 300px;
padding-bottom: 10px;
}
/* Left Panel - Seat Selection */
.left-panel[b-3jwm7k3wj7] {
flex: 1;
padding: 16px;
background: transparent;
border-right: 1px solid #e9ecef;
}
/* Right Panel - Trip Summary */
.right-panel[b-3jwm7k3wj7] {
width: 350px;
padding: 16px;
background: transparent;
}
.trip-summary[b-3jwm7k3wj7] {
background: transparent;
border-radius: 12px;
padding: 12px;
box-shadow: none;
}
.operator-details[b-3jwm7k3wj7] {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #e9ecef;
}
.operator-details .operator-name[b-3jwm7k3wj7] {
font-size: 20px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.rating[b-3jwm7k3wj7] {
display: flex;
align-items: center;
gap: 8px;
}
.stars[b-3jwm7k3wj7] {
color: #ffc107;
font-size: 16px;
}
.rating-text[b-3jwm7k3wj7] {
font-size: 14px;
font-weight: 600;
color: #6c757d;
}
.timing-details[b-3jwm7k3wj7] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #e9ecef;
}
.departure[b-3jwm7k3wj7], .arrival[b-3jwm7k3wj7] {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.departure:last-child[b-3jwm7k3wj7], .arrival:last-child[b-3jwm7k3wj7] {
border-bottom: none;
}
.time[b-3jwm7k3wj7] {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
min-width: 60px;
}
.label[b-3jwm7k3wj7] {
font-size: 14px;
font-weight: 500;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.duration[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: #6c757d;
}
.duration i[b-3jwm7k3wj7] {
font-size: 16px;
color: #2196f3;
}
.duration span[b-3jwm7k3wj7] {
font-size: 16px;
font-weight: 600;
}
.bus-type-info[b-3jwm7k3wj7] {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #e9ecef;
color: #6c757d;
font-size: 16px;
font-weight: 600;
}
.bus-type-info i[b-3jwm7k3wj7] {
color: #2196f3;
}
.amenities[b-3jwm7k3wj7] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #e9ecef;
}
.amenity[b-3jwm7k3wj7] {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: #6c757d;
border-bottom: none;
}
.amenity:last-child[b-3jwm7k3wj7] {
border-bottom: none;
}
.amenity i[b-3jwm7k3wj7] {
color: #2196f3;
font-size: 16px;
min-width: 20px;
}
/* Boarding Points Section */
.boarding-point-section[b-3jwm7k3wj7] {
flex: 1;
padding: 12px;
background: transparent;
}
.section-header[b-3jwm7k3wj7] {
margin-bottom: 12px;
text-align: center;
}
.section-header h3[b-3jwm7k3wj7] {
font-size: 20px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.section-header h3 i[b-3jwm7k3wj7] {
color: #2196f3;
}
.section-header p[b-3jwm7k3wj7] {
color: #6c757d;
font-size: 14px;
margin: 0;
}
/* Bottom Action Section */
.bottom-action-section[b-3jwm7k3wj7] {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
width: 85%;
max-width: 900px;
padding: 12px 20px;
background: white;
border: 2px solid #e9ecef;
border-radius: 12px 12px 0 0;
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.bottom-action-section.show[b-3jwm7k3wj7] {
transform: translateX(-50%) translateY(0);
}
.bottom-action-section.hide[b-3jwm7k3wj7] {
transform: translateX(-50%) translateY(100%);
}
.summary-details[b-3jwm7k3wj7] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
gap: 16px;
border: 1px solid #e9ecef;
flex-wrap: wrap;
}
.summary-item[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
gap: 4px;
}
.summary-label[b-3jwm7k3wj7] {
font-size: 14px;
color: #6c757d;
font-weight: 500;
}
.summary-value[b-3jwm7k3wj7] {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
}
.summary-value.seats[b-3jwm7k3wj7] {
color: #2196f3;
}
.summary-value.price[b-3jwm7k3wj7] {
color: #e74c3c;
font-size: 20px;
}
.no-seats[b-3jwm7k3wj7] {
color: #6c757d;
font-style: italic;
}
/* Action Buttons */
.action-buttons[b-3jwm7k3wj7] {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 8px;
}
.btn[b-3jwm7k3wj7] {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
min-width: 160px;
justify-content: center;
}
.btn:disabled[b-3jwm7k3wj7] {
opacity: 0.6;
cursor: not-allowed;
}
.btn:hover:not(:disabled)[b-3jwm7k3wj7] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-primary[b-3jwm7k3wj7] {
background: #2196f3;
color: white;
}
.btn-primary:hover:not(:disabled)[b-3jwm7k3wj7] {
background: #1976d2;
}
.btn-secondary[b-3jwm7k3wj7] {
background: #6c757d;
color: white;
}
.btn-secondary:hover:not(:disabled)[b-3jwm7k3wj7] {
background: #5a6268;
}
.btn-success[b-3jwm7k3wj7] {
background: #28a745;
color: white;
}
.btn-success:hover:not(:disabled)[b-3jwm7k3wj7] {
background: #218838;
}
.btn-group[b-3jwm7k3wj7] {
display: flex;
gap: 12px;
}
/* Loading Container */
.loading-container[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
gap: 16px;
background: white;
padding: 40px;
}
.loading-spinner[b-3jwm7k3wj7] {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #2196f3;
border-radius: 50%;
animation: spin-b-3jwm7k3wj7 1s linear infinite;
}
@keyframes spin-b-3jwm7k3wj7 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-container p[b-3jwm7k3wj7] {
color: #6c757d;
font-size: 16px;
margin: 0;
}
/* Responsive Design */
@media (max-width: 1024px) {
.main-content[b-3jwm7k3wj7] {
flex-direction: column;
padding-bottom: 40px;
}
.right-panel[b-3jwm7k3wj7] {
width: 100%;
border-right: none;
border-top: 1px solid #e9ecef;
}
.trip-summary[b-3jwm7k3wj7] {
max-width: 500px;
margin: 0 auto;
}
}
/* Desktop and large screens */
@media (min-width: 1200px) {
.seat-booking-modal[b-3jwm7k3wj7] {
max-width: 1000px;
width: 80%;
}
.bottom-action-section[b-3jwm7k3wj7] {
max-width: 1000px;
width: 80%;
}
}
@media (min-width: 1400px) {
.seat-booking-modal[b-3jwm7k3wj7] {
max-width: 1100px;
width: 75%;
}
.bottom-action-section[b-3jwm7k3wj7] {
max-width: 1100px;
width: 75%;
}
}
@media (max-width: 768px) {
.seat-booking-modal[b-3jwm7k3wj7] {
margin: 0;
border-radius: 0;
max-width: 100%;
width: 100%;
min-height: 100vh;
padding: 0;
overflow-x: hidden;
}
.modal-header[b-3jwm7k3wj7] {
padding: 12px 16px;
position: sticky;
top: 0;
background: transparent;
z-index: 10;
border-bottom: 1px solid #e9ecef;
}
.trip-details-header[b-3jwm7k3wj7] {
padding: 16px 12px;
flex-direction: row;
gap: 12px;
align-items: center;
justify-content: space-between;
width: 100%;
}
.trip-info[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
gap: 4px;
}
.route-info[b-3jwm7k3wj7] {
font-size: 16px;
font-weight: 700;
margin-bottom: 0;
}
.date-info[b-3jwm7k3wj7] {
font-size: 12px;
font-weight: 600;
}
.operator-info[b-3jwm7k3wj7] {
text-align: right;
display: flex;
flex-direction: column;
gap: 2px;
}
.operator-name[b-3jwm7k3wj7] {
font-size: 14px;
font-weight: 700;
margin-bottom: 0;
}
.bus-type[b-3jwm7k3wj7] {
font-size: 12px;
font-weight: 600;
}
.progress-steps[b-3jwm7k3wj7] {
padding: 4px 6px;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
}
.step[b-3jwm7k3wj7] {
padding: 8px 12px;
min-width: auto;
flex: 1;
max-width: 140px;
overflow: hidden;
}
.step-number[b-3jwm7k3wj7] {
width: 20px;
height: 20px;
font-size: 11px;
}
.step-text[b-3jwm7k3wj7] {
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.main-content[b-3jwm7k3wj7] {
min-height: auto;
overflow-x: hidden;
width: 100%;
}
.left-panel[b-3jwm7k3wj7] {
padding: 12px 8px;
border-right: none;
border-bottom: 1px solid #e9ecef;
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.seat-selection-header h3[b-3jwm7k3wj7] {
font-size: 20px;
font-weight: 700;
flex-wrap: nowrap;
white-space: nowrap;
gap: 6px;
}
.seat-selection-header h3 i[b-3jwm7k3wj7] {
font-size: 18px;
}
.seat-selection-header p[b-3jwm7k3wj7] {
font-size: 14px;
font-weight: 600;
}
.right-panel[b-3jwm7k3wj7] {
width: 100%;
padding: 12px 8px;
border-top: 1px solid #e9ecef;
overflow-x: hidden;
box-sizing: border-box;
}
.trip-summary[b-3jwm7k3wj7] {
max-width: 100%;
margin: 0;
}
.operator-details .operator-name[b-3jwm7k3wj7] {
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
}
.rating[b-3jwm7k3wj7] {
gap: 6px;
}
.stars[b-3jwm7k3wj7] {
font-size: 14px;
}
.rating-text[b-3jwm7k3wj7] {
font-size: 12px;
font-weight: 600;
}
.timing-details[b-3jwm7k3wj7] {
flex-direction: column;
gap: 16px;
text-align: center;
}
.departure[b-3jwm7k3wj7], .arrival[b-3jwm7k3wj7] {
flex-direction: row;
justify-content: center;
gap: 8px;
}
.duration[b-3jwm7k3wj7] {
order: -1;
margin-bottom: 8px;
}
.amenities[b-3jwm7k3wj7] {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.amenity[b-3jwm7k3wj7] {
padding: 6px 8px;
font-size: 11px;
}
.bottom-action-section[b-3jwm7k3wj7] {
padding: 16px;
position: sticky;
bottom: 0;
background: transparent;
border-top: 2px solid #e9ecef;
box-shadow: none;
}
.summary-details[b-3jwm7k3wj7] {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
padding: 10px 12px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.summary-item[b-3jwm7k3wj7] {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.action-buttons[b-3jwm7k3wj7] {
flex-direction: column;
gap: 8px;
margin-top: 6px;
}
.btn-group[b-3jwm7k3wj7] {
flex-direction: column;
gap: 8px;
}
.btn[b-3jwm7k3wj7] {
width: 100%;
padding: 14px 16px;
font-size: 16px;
border-radius: 8px;
}
.route-title[b-3jwm7k3wj7] {
font-size: 16px;
}
.operator-name[b-3jwm7k3wj7] {
font-size: 16px;
}
.bus-type[b-3jwm7k3wj7] {
font-size: 12px;
}
.date-info[b-3jwm7k3wj7] {
font-size: 12px;
}
}
@media (max-width: 480px) {
.seat-booking-modal[b-3jwm7k3wj7] {
min-height: 100vh;
max-width: 100%;
width: 100%;
padding: 0;
overflow-x: hidden;
}
.modal-header[b-3jwm7k3wj7] {
padding: 8px 12px;
}
.trip-details-header[b-3jwm7k3wj7] {
padding: 12px 8px;
gap: 8px;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.trip-info[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
gap: 2px;
}
.route-info[b-3jwm7k3wj7] {
font-size: 14px;
font-weight: 700;
margin-bottom: 0;
}
.date-info[b-3jwm7k3wj7] {
font-size: 10px;
font-weight: 600;
}
.operator-info[b-3jwm7k3wj7] {
text-align: right;
display: flex;
flex-direction: column;
gap: 1px;
}
.operator-name[b-3jwm7k3wj7] {
font-size: 12px;
font-weight: 700;
margin-bottom: 0;
}
.bus-type[b-3jwm7k3wj7] {
font-size: 10px;
font-weight: 600;
}
.progress-steps[b-3jwm7k3wj7] {
padding: 8px 12px;
gap: 3px;
}
.step[b-3jwm7k3wj7] {
padding: 6px 8px;
max-width: 120px;
}
.step-number[b-3jwm7k3wj7] {
width: 18px;
height: 18px;
font-size: 10px;
}
.step-text[b-3jwm7k3wj7] {
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90px;
}
.left-panel[b-3jwm7k3wj7],
.right-panel[b-3jwm7k3wj7],
.boarding-point-section[b-3jwm7k3wj7] {
padding: 12px 8px;
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
max-width: 100vw;
}
.seat-selection-header h3[b-3jwm7k3wj7] {
font-size: 16px;
font-weight: 700;
flex-wrap: nowrap;
white-space: nowrap;
gap: 4px;
}
.seat-selection-header h3 i[b-3jwm7k3wj7] {
font-size: 14px;
}
.seat-selection-header p[b-3jwm7k3wj7] {
font-size: 12px;
font-weight: 600;
}
.operator-details .operator-name[b-3jwm7k3wj7] {
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.stars[b-3jwm7k3wj7] {
font-size: 12px;
}
.rating-text[b-3jwm7k3wj7] {
font-size: 10px;
font-weight: 600;
}
.bottom-action-section[b-3jwm7k3wj7] {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
width: 95%;
max-width: 95%;
padding: 10px 16px;
background: white;
border: 2px solid #e9ecef;
border-radius: 12px 12px 0 0;
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.bottom-action-section.show[b-3jwm7k3wj7] {
transform: translateX(-50%) translateY(0);
}
.bottom-action-section.hide[b-3jwm7k3wj7] {
transform: translateX(-50%) translateY(100%);
}
.timing-details[b-3jwm7k3wj7] {
gap: 12px;
}
.time[b-3jwm7k3wj7] {
font-size: 16px;
}
.label[b-3jwm7k3wj7] {
font-size: 10px;
}
.amenities[b-3jwm7k3wj7] {
grid-template-columns: 1fr;
gap: 6px;
}
.amenity[b-3jwm7k3wj7] {
padding: 4px 6px;
font-size: 10px;
}
.btn[b-3jwm7k3wj7] {
padding: 12px 14px;
font-size: 14px;
}
.summary-item[b-3jwm7k3wj7] {
gap: 4px;
}
.summary-label[b-3jwm7k3wj7] {
font-size: 12px;
}
.summary-value[b-3jwm7k3wj7] {
font-size: 14px;
}
.summary-value.price[b-3jwm7k3wj7] {
font-size: 18px;
}
}
/* Desktop View - Proper timing layout */
@media (min-width: 769px) {
.timing-details[b-3jwm7k3wj7] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 16px;
background: #f8f9fa;
border-radius: 12px;
gap: 20px;
}
.departure[b-3jwm7k3wj7], .arrival[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
min-width: 90px;
border-bottom: none;
}
.time[b-3jwm7k3wj7] {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
line-height: 1;
}
.label[b-3jwm7k3wj7] {
font-size: 10px;
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.duration[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 14px;
background: #e3f2fd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.duration i[b-3jwm7k3wj7] {
font-size: 16px;
color: #2196f3;
}
.duration span[b-3jwm7k3wj7] {
font-size: 14px;
font-weight: 600;
color: #1976d2;
line-height: 1;
}
}
/* Mobile View - Horizontal timing layout */
@media (max-width: 768px) {
.timing-details[b-3jwm7k3wj7] {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 20px;
padding: 10px;
background: #f8f9fa;
border-radius: 12px;
gap: 8px;
}
.departure[b-3jwm7k3wj7], .arrival[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 6px 8px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-bottom: none;
min-width: 65px;
flex: 0 0 auto;
}
.time[b-3jwm7k3wj7] {
font-size: 15px;
font-weight: 700;
color: #2c3e50;
line-height: 1;
}
.label[b-3jwm7k3wj7] {
font-size: 8px;
font-weight: 500;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.duration[b-3jwm7k3wj7] {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 6px 8px;
background: #e3f2fd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
min-width: 55px;
flex: 0 0 auto;
order: 2;
}
.departure[b-3jwm7k3wj7] {
order: 1;
}
.arrival[b-3jwm7k3wj7] {
order: 3;
}
.duration i[b-3jwm7k3wj7] {
font-size: 12px;
color: #2196f3;
}
.duration span[b-3jwm7k3wj7] {
font-size: 11px;
font-weight: 600;
color: #1976d2;
line-height: 1;
}
}
/* _content/HappyBus.Ux/Components/CustomComponents/SignIn.razor.rz.scp.css */
/* Sign In Component Styles - Updated */
.signin-container[b-3s92lpjrkt] {
padding: 20px;
max-width: 400px;
margin: 0 auto;
background: white;
}
.signin-header[b-3s92lpjrkt] {
text-align: center;
margin-bottom: 30px;
}
.mobile-input-container[b-3s92lpjrkt] {
position: relative;
display: flex;
align-items: center;
border: 2px solid #e5e7eb;
border-radius: 16px;
background: #f9fafb;
transition: all 0.3s ease;
}
.mobile-input-container:focus-within[b-3s92lpjrkt] {
border-color: #dc3545;
background: white;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}
.country-code[b-3s92lpjrkt] {
padding: 0 16px;
font-weight: 600;
color: #333;
border-right: 2px solid #e5e7eb;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 14px 0 0 14px;
}
.form-input.mobile-number[b-3s92lpjrkt] {
border: none;
background: transparent;
flex: 1;
padding: 12px 16px;
border-radius: 0 14px 14px 0;
}
.form-input.mobile-number:focus[b-3s92lpjrkt] {
outline: none;
box-shadow: none;
transform: none;
}
.header-icon[b-3s92lpjrkt] {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #dc3545, #c0392b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 8px 16px rgba(220, 53, 69, 0.3);
}
.header-icon i[b-3s92lpjrkt] {
font-size: 24px;
color: white;
}
.signin-header h2[b-3s92lpjrkt] {
font-size: 24px;
font-weight: 700;
color: #333;
margin: 0 0 8px 0;
}
.signin-header p[b-3s92lpjrkt] {
color: #666;
font-size: 14px;
margin: 0;
line-height: 1.5;
}
.signin-form[b-3s92lpjrkt] {
margin-bottom: 20px;
}
.form-step[b-3s92lpjrkt] {
transition: all 0.3s ease;
}
.form-step.hidden[b-3s92lpjrkt] {
display: none;
}
.form-step.active[b-3s92lpjrkt] {
display: block;
}
.input-group[b-3s92lpjrkt] {
margin-bottom: 24px;
position: relative;
}
.input-group label[b-3s92lpjrkt] {
display: flex;
align-items: center;
font-weight: 600;
color: #333;
font-size: 14px;
margin-bottom: 8px;
transition: all 0.3s ease;
gap: 8px;
}
.input-group label i[b-3s92lpjrkt] {
color: #dc3545;
font-size: 16px;
}
.form-input[b-3s92lpjrkt] {
width: 100%;
height: 50px;
padding: 15px 20px;
border: 2px solid #e5e7eb;
outline: none;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #f9fafb;
box-sizing: border-box;
color: #333;
font-weight: 500;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-input:focus[b-3s92lpjrkt] {
outline: none;
border: 2px solid #dc3545;
background: white;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
transform: translateY(-1px);
letter-spacing: 0.5px;
}
.form-input[b-3s92lpjrkt]::placeholder {
color: #9ca3af;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.3px;
opacity: 1;
}
.btn-primary[b-3s92lpjrkt] {
width: 100%;
padding: 16px 24px;
background: linear-gradient(135deg, #dc3545, #c0392b);
color: white;
border: none;
border-radius: 2px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}
.btn-primary:hover[b-3s92lpjrkt] {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(220, 53, 69, 0.4);
}
.otp-section[b-3s92lpjrkt] {
margin-bottom: 20px;
}
.otp-label[b-3s92lpjrkt] {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #333;
font-size: 14px;
margin-bottom: 16px;
}
.otp-label i[b-3s92lpjrkt] {
color: #dc3545;
font-size: 16px;
}
.otp-inputs[b-3s92lpjrkt] {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 16px;
}
.otp-input[b-3s92lpjrkt] {
width: 50px;
height: 50px;
text-align: center;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 20px;
font-weight: 600;
transition: all 0.3s ease;
background: #f8f9fa;
}
.otp-input:focus[b-3s92lpjrkt] {
outline: none;
border-color: #dc3545;
background: white;
box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}
.otp-actions[b-3s92lpjrkt] {
display: flex;
justify-content: space-between;
gap: 16px;
}
.btn-link[b-3s92lpjrkt] {
background: none;
border: none;
color: #dc3545;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: color 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 0;
}
.btn-link:hover[b-3s92lpjrkt] {
color: #c0392b;
}
.divider[b-3s92lpjrkt] {
text-align: center;
margin: 24px 0;
position: relative;
}
.divider[b-3s92lpjrkt]::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e9ecef;
}
.divider span[b-3s92lpjrkt] {
background: white;
padding: 0 16px;
color: #666;
font-size: 14px;
}
.social-login[b-3s92lpjrkt] {
margin-bottom: 24px;
}
.btn-google[b-3s92lpjrkt] {
width: 100%;
padding: 16px 24px;
background: white;
color: #333;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-google:hover[b-3s92lpjrkt] {
background: #f8f9fa;
border-color: #dc3545;
transform: translateY(-2px);
}
.btn-google i[b-3s92lpjrkt] {
color: #dc3545;
font-size: 18px;
}
.signin-footer[b-3s92lpjrkt] {
text-align: center;
}
.signin-footer p[b-3s92lpjrkt] {
color: #666;
font-size: 14px;
margin: 0;
}
.signin-footer .link[b-3s92lpjrkt] {
color: #dc3545;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.signin-footer .link:hover[b-3s92lpjrkt] {
color: #c0392b;
}
.close[b-3s92lpjrkt] {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
.modal-box[b-3s92lpjrkt] {
min-width: 280px;
max-width: 90%;
padding: 1.25rem;
margin: 20px;
}
.otp-input[b-3s92lpjrkt] {
width: 40px;
height: 40px;
font-size: 18px;
margin: 4px;
}
}
@media (max-width: 480px) {
.modal-box[b-3s92lpjrkt] {
min-width: 260px;
max-width: 95%;
padding: 1rem;
margin: 10px;
}
.otp-input[b-3s92lpjrkt] {
width: 35px;
height: 35px;
font-size: 16px;
margin: 3px;
}
.close[b-3s92lpjrkt] {
font-size: 24px;
}
}
/* _content/HappyBus.Ux/Components/CustomComponents/TripInfoComponent.razor.rz.scp.css */
/* Trip Summary Container */
.trip-summary[b-wd92rj4r2f] {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 16px;
border-radius: 16px;
}
/* Summary Section */
.summary-section[b-wd92rj4r2f] {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 16px;
padding: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.summary-section[b-wd92rj4r2f]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #007bff, #28a745, #ffc107, #dc3545);
border-radius: 16px 16px 0 0;
}
/* Section Header */
.section-header[b-wd92rj4r2f] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(0, 123, 255, 0.1);
}
.header-icon[b-wd92rj4r2f] {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
}
.header-content h3[b-wd92rj4r2f] {
color: #1a1a1a;
font-size: 20px;
font-weight: 700;
margin: 0 0 4px 0;
background: linear-gradient(135deg, #007bff, #0056b3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header-content p[b-wd92rj4r2f] {
color: #6c757d;
font-size: 14px;
margin: 0;
font-weight: 500;
}
/* Trip Info */
.trip-info[b-wd92rj4r2f] {
display: flex;
flex-direction: column;
gap: 8px;
}
.info-item[b-wd92rj4r2f] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 249, 250, 0.8) 100%);
border-radius: 12px;
border: 1px solid rgba(0, 123, 255, 0.1);
transition: all 0.3s ease;
}
.info-item:hover[b-wd92rj4r2f] {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);
border-color: rgba(0, 123, 255, 0.3);
}
.info-label[b-wd92rj4r2f] {
display: flex;
align-items: center;
gap: 12px;
color: #495057;
font-size: 14px;
font-weight: 600;
}
.info-label i[b-wd92rj4r2f] {
color: #007bff;
font-size: 16px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 123, 255, 0.1);
border-radius: 6px;
}
.info-value[b-wd92rj4r2f] {
color: #1a1a1a;
font-weight: 700;
font-size: 14px;
text-align: right;
max-width: 60%;
}
.info-value.route[b-wd92rj4r2f] {
display: flex;
align-items: center;
gap: 12px;
color: #1a1a1a;
font-weight: 700;
background: linear-gradient(135deg, #007bff, #28a745);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.info-value.route i[b-wd92rj4r2f] {
color: #ffc107;
font-size: 14px;
background: linear-gradient(135deg, #ffc107, #fd7e14);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.info-value.route .from[b-wd92rj4r2f],
.info-value.route .to[b-wd92rj4r2f] {
font-size: 14px;
font-weight: 800;
}
/* Fare Info */
.fare-info[b-wd92rj4r2f] {
display: flex;
flex-direction: column;
gap: 6px;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(255, 193, 7, 0.05) 100%);
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(40, 167, 69, 0.1);
}
.fare-item[b-wd92rj4r2f] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
transition: all 0.3s ease;
}
.fare-item:hover[b-wd92rj4r2f] {
background: rgba(255, 255, 255, 1);
transform: translateX(4px);
}
.fare-label[b-wd92rj4r2f] {
color: #495057;
font-size: 14px;
font-weight: 600;
}
.fare-value[b-wd92rj4r2f] {
color: #28a745;
font-weight: 700;
font-size: 14px;
}
.fare-item.total[b-wd92rj4r2f] {
padding: 12px 16px;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
margin-top: 8px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
}
.fare-item.total .fare-label[b-wd92rj4r2f] {
color: white;
font-weight: 700;
font-size: 16px;
}
.fare-item.total .fare-value[b-wd92rj4r2f] {
color: white;
font-weight: 800;
font-size: 18px;
}
.fare-divider[b-wd92rj4r2f] {
height: 2px;
background: linear-gradient(90deg, transparent 0%, #28a745 50%, transparent 100%);
margin: 8px 0;
border-radius: 1px;
}
/* Payment Section */
.payment-section[b-wd92rj4r2f] {
margin-top: 12px;
padding-top: 12px;
border-top: 2px solid rgba(40, 167, 69, 0.1);
text-align: center;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(32, 201, 151, 0.05) 100%);
padding: 16px;
border-radius: 12px;
}
.pay-button[b-wd92rj4r2f] {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
border: none;
padding: 18px 36px;
border-radius: 16px;
font-size: 18px;
font-weight: 800;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
gap: 12px;
box-shadow: 0 8px 32px rgba(40, 167, 69, 0.4);
min-width: 220px;
justify-content: center;
width: 100%;
position: relative;
overflow: hidden;
}
.pay-button[b-wd92rj4r2f]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s;
}
.pay-button:hover[b-wd92rj4r2f]::before {
left: 100%;
}
.pay-button:hover[b-wd92rj4r2f] {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 40px rgba(40, 167, 69, 0.5);
}
.pay-button:active[b-wd92rj4r2f] {
transform: translateY(-2px) scale(1.01);
}
.payment-note[b-wd92rj4r2f] {
margin-top: 12px;
color: #495057;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
background: rgba(255, 255, 255, 0.8);
padding: 6px 12px;
border-radius: 20px;
border: 1px solid rgba(40, 167, 69, 0.2);
}
.payment-note i[b-wd92rj4r2f] {
color: #28a745;
font-size: 14px;
}
/* Security Note */
.security-note[b-wd92rj4r2f] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 20px;
background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
border: 2px solid rgba(40, 167, 69, 0.2);
border-radius: 16px;
color: #155724;
font-size: 14px;
font-weight: 600;
margin-top: auto;
box-shadow: 0 4px 16px rgba(40, 167, 69, 0.1);
position: relative;
overflow: hidden;
}
.security-note[b-wd92rj4r2f]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #28a745, #20c997);
border-radius: 16px 16px 0 0;
}
.security-note i[b-wd92rj4r2f] {
color: #28a745;
font-size: 18px;
background: rgba(40, 167, 69, 0.1);
padding: 8px;
border-radius: 50%;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive Design */
@media (max-width: 768px) {
.trip-summary[b-wd92rj4r2f] {
gap: 20px;
padding: 16px;
margin: 0;
}
.summary-section[b-wd92rj4r2f] {
padding: 18px;
border-radius: 14px;
}
.section-header[b-wd92rj4r2f] {
gap: 14px;
margin-bottom: 18px;
}
.header-icon[b-wd92rj4r2f] {
width: 42px;
height: 42px;
font-size: 18px;
}
.header-content h3[b-wd92rj4r2f] {
font-size: 18px;
}
.header-content p[b-wd92rj4r2f] {
font-size: 13px;
}
.info-item[b-wd92rj4r2f] {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 16px;
}
.info-value[b-wd92rj4r2f] {
text-align: left;
max-width: 100%;
font-size: 16px;
}
.info-value.route[b-wd92rj4r2f] {
font-size: 15px;
}
.info-value.route .from[b-wd92rj4r2f],
.info-value.route .to[b-wd92rj4r2f] {
font-size: 14px;
}
.fare-item[b-wd92rj4r2f] {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 12px 16px;
}
.fare-value[b-wd92rj4r2f] {
align-self: flex-end;
font-size: 15px;
}
.fare-item.total .fare-label[b-wd92rj4r2f],
.fare-item.total .fare-value[b-wd92rj4r2f] {
font-size: 17px;
}
.payment-section[b-wd92rj4r2f] {
padding: 18px;
}
.pay-button[b-wd92rj4r2f] {
padding: 16px 32px;
font-size: 16px;
}
.security-note[b-wd92rj4r2f] {
padding: 16px;
font-size: 13px;
margin-top: 20px;
}
}
@media (max-width: 480px) {
.trip-summary[b-wd92rj4r2f] {
padding: 12px;
gap: 16px;
}
.summary-section[b-wd92rj4r2f] {
padding: 16px;
}
.section-header[b-wd92rj4r2f] {
flex-direction: row;
text-align: left;
gap: 12px;
align-items: center;
}
.header-icon[b-wd92rj4r2f] {
width: 36px;
height: 36px;
font-size: 16px;
}
.header-content h3[b-wd92rj4r2f] {
font-size: 16px;
}
.header-content p[b-wd92rj4r2f] {
font-size: 12px;
}
.info-item[b-wd92rj4r2f] {
padding: 14px;
}
.info-label[b-wd92rj4r2f],
.info-value[b-wd92rj4r2f] {
font-size: 14px;
}
.fare-label[b-wd92rj4r2f],
.fare-value[b-wd92rj4r2f] {
font-size: 14px;
}
.fare-item.total .fare-label[b-wd92rj4r2f],
.fare-item.total .fare-value[b-wd92rj4r2f] {
font-size: 16px;
}
.payment-section[b-wd92rj4r2f] {
padding: 16px;
}
.pay-button[b-wd92rj4r2f] {
padding: 14px 28px;
font-size: 15px;
min-width: 200px;
}
.security-note[b-wd92rj4r2f] {
padding: 14px;
font-size: 12px;
}
.security-note i[b-wd92rj4r2f] {
width: 30px;
height: 30px;
font-size: 16px;
}
}
/* _content/HappyBus.Ux/Components/Layout/MainLayout.razor.rz.scp.css */
/* Main Layout Styles */
body[b-0q6p7x8cu0] {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
overflow-x: hidden;
}
/* Header Styles */
header[b-0q6p7x8cu0] {
background: white;
color: #333;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 9999;
flex-wrap: wrap;
gap: 12px;
width: 100%;
box-sizing: border-box;
overflow: visible;
}
/* Logo and Brand */
.logo-brand[b-0q6p7x8cu0] {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex-shrink: 0;
}
.logo-brand img[b-0q6p7x8cu0] {
width: 50px;
height: 50px;
flex-shrink: 0;
}
.logo-brand h1[b-0q6p7x8cu0] {
margin: 0;
font-size: 20px;
font-weight: bold;
background: linear-gradient(90deg, #4A90E2 0%, #4A90E2 50%, #FF8C42 50%, #FF8C42 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
white-space: nowrap;
}
/* Mobile Menu Button */
#mobile-menu-btn[b-0q6p7x8cu0] {
display: none;
background: none;
border: none;
font-size: 20px;
color: #666;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
}
#mobile-menu-btn:hover[b-0q6p7x8cu0] {
background: #f5f5f5;
}
/* Navigation Links */
#main-nav[b-0q6p7x8cu0] {
display: flex;
gap: 8px;
margin: 0 20px;
flex-wrap: wrap;
align-items: center;
}
#main-nav a[b-0q6p7x8cu0] {
color: #666;
text-decoration: none;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
white-space: nowrap;
font-size: 14px;
}
#main-nav a:hover[b-0q6p7x8cu0] {
background: #f5f5f5;
color: #333;
transform: translateY(-1px);
}
#main-nav a i[b-0q6p7x8cu0] {
font-size: 14px;
}
/* Auth Section */
.auth-section[b-0q6p7x8cu0] {
display: flex;
align-items: center;
flex-shrink: 0;
}
.btn-primary[b-0q6p7x8cu0] {
background: #666;
border: 1px solid #666;
color: white;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}
.btn-primary:hover[b-0q6p7x8cu0] {
background: #555;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}
.btn-primary i[b-0q6p7x8cu0] {
font-size: 14px;
}
/* Main Content */
main[b-0q6p7x8cu0] {
min-height: calc(100vh - 80px);
background-color: #f8f9fa;
overflow-x: hidden;
width: 100%;
}
/* Search Results Active State - Hide navbar when search results are shown - only on mobile */
@media (max-width: 1024px) {
body.search-results-active header[b-0q6p7x8cu0] {
display: none !important;
}
}
/* Modal styling - Keep header visible when modal is open */
.modal-open .modal[b-0q6p7x8cu0] {
background: rgba(0, 0, 0, 0.5);
}
.modal-open .modal-dialog[b-0q6p7x8cu0] {
margin: 2% auto;
max-width: 90%;
}
.modal-open .modal-content[b-0q6p7x8cu0] {
border-radius: 12px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* Mobile Responsive Design */
@media (max-width: 768px) {
header[b-0q6p7x8cu0] {
padding: 10px 16px;
gap: 6px;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
overflow: visible;
}
.logo-brand[b-0q6p7x8cu0] {
display: flex;
align-items: center;
gap: 12px;
order: 1;
flex-shrink: 0;
max-width: 60%;
}
.logo-brand h1[b-0q6p7x8cu0] {
font-size: 20px;
}
.logo-brand img[b-0q6p7x8cu0] {
width: 32px;
height: 32px;
}
#mobile-menu-btn[b-0q6p7x8cu0] {
display: block;
z-index: 10001;
position: relative;
order: 2;
margin-left: 8px;
flex-shrink: 0;
}
#main-nav[b-0q6p7x8cu0] {
display: none;
position: fixed;
top: 80px;
left: 0;
right: 0;
background: white;
flex-direction: column;
padding: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-radius: 0 0 12px 12px;
margin: 0;
gap: 0;
z-index: 10000;
width: 100%;
box-sizing: border-box;
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
opacity: 0;
}
#main-nav.mobile-active[b-0q6p7x8cu0] {
display: flex;
transform: translateY(0);
opacity: 1;
}
#main-nav.slide-up[b-0q6p7x8cu0] {
transform: translateY(-100%);
opacity: 0;
transition: all 0.4s ease-in-out;
}
#main-nav a[b-0q6p7x8cu0] {
color: #333;
padding: 12px 16px;
width: 100%;
border-radius: 8px;
margin-bottom: 4px;
font-size: 16px;
}
#main-nav a:hover[b-0q6p7x8cu0] {
background: #f8f9fa;
color: #667eea;
}
.auth-section[b-0q6p7x8cu0] {
margin-left: auto;
order: 3;
flex-shrink: 0;
max-width: 120px;
}
.btn-primary[b-0q6p7x8cu0] {
padding: 8px 14px;
font-size: 15px;
}
.btn-primary span[b-0q6p7x8cu0] {
display: none;
}
.btn-primary i[b-0q6p7x8cu0] {
font-size: 18px;
}
}
@media (max-width: 480px) {
header[b-0q6p7x8cu0] {
padding: 8px 12px;
width: 100%;
box-sizing: border-box;
overflow: visible;
}
.logo-brand h1[b-0q6p7x8cu0] {
font-size: 18px;
}
.logo-brand img[b-0q6p7x8cu0] {
width: 28px;
height: 28px;
}
.logo-brand[b-0q6p7x8cu0] {
gap: 8px;
}
#mobile-menu-btn[b-0q6p7x8cu0] {
font-size: 18px;
padding: 6px;
}
.btn-primary[b-0q6p7x8cu0] {
padding: 7px 12px;
font-size: 14px;
}
}
/* Blazor Error UI */
#blazor-error-ui[b-0q6p7x8cu0] {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss[b-0q6p7x8cu0] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* Force override for stats number */
.stats-number[b-0q6p7x8cu0] {
font-size: 16px !important;
font-weight: 600 !important;
}
/* Force override for time display */
.departure-time[b-0q6p7x8cu0], .arrival-time[b-0q6p7x8cu0] {
font-size: 16px !important;
font-weight: 600 !important;
}
.time-separator[b-0q6p7x8cu0] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 8px !important;
}
.time-separator i[b-0q6p7x8cu0] {
font-size: 14px !important;
color: #666 !important;
}
/* Mobile responsive overrides */
@media (max-width: 768px) {
.stats-number[b-0q6p7x8cu0] {
font-size: 16px !important;
font-weight: 600 !important;
}
}
@media (max-width: 480px) {
.stats-number[b-0q6p7x8cu0] {
font-size: 14px !important;
font-weight: 600 !important;
}
}
/* _content/HappyBus.Ux/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-htgeutkviw] {
appearance: none;
cursor: pointer;
width: 3.5rem;
height: 2.5rem;
color: white;
position: absolute;
top: 0.5rem;
right: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}
.navbar-toggler:checked[b-htgeutkviw] {
background-color: rgba(255, 255, 255, 0.5);
}
.top-row[b-htgeutkviw] {
min-height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-htgeutkviw] {
font-size: 1.1rem;
}
.bi[b-htgeutkviw] {
display: inline-block;
position: relative;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.75rem;
top: -1px;
background-size: cover;
}
.bi-house-door-fill-nav-menu[b-htgeutkviw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}
.bi-plus-square-fill-nav-menu[b-htgeutkviw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}
.bi-list-nested-nav-menu[b-htgeutkviw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}
.nav-item[b-htgeutkviw] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-htgeutkviw] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-htgeutkviw] {
padding-bottom: 1rem;
}
.nav-item[b-htgeutkviw] .nav-link {
color: #d7d7d7;
background: none;
border: none;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
width: 100%;
}
.nav-item[b-htgeutkviw] a.active {
background-color: rgba(255,255,255,0.37);
color: white;
}
.nav-item[b-htgeutkviw] .nav-link:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
.nav-scrollable[b-htgeutkviw] {
display: none;
}
.navbar-toggler:checked ~ .nav-scrollable[b-htgeutkviw] {
display: block;
}
@media (min-width: 641px) {
.navbar-toggler[b-htgeutkviw] {
display: none;
}
.nav-scrollable[b-htgeutkviw] {
/* Never collapse the sidebar for wide screens */
display: block;
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
/* _content/HappyBus.Ux/Components/ModelDialogs/ConfirmationDialog.razor.rz.scp.css */
/* Overlay */
.custom-modal[b-sg4awtbah8] {
display: none;
position: fixed;
z-index: 1050;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
}
/* Show when active */
.custom-modal.show[b-sg4awtbah8] {
display: flex;
align-items: center;
justify-content: center;
}
/* Modal Box */
.custom-modal-content[b-sg4awtbah8] {
background: #fff;
border-radius: 12px;
width: 90%;
max-width: 450px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
animation: fadeIn-b-sg4awtbah8 0.3s ease-in-out;
}
/* Header, Body, Footer */
.modal-header[b-sg4awtbah8], .modal-footer[b-sg4awtbah8] {
padding: 1rem;
border-bottom: 1px solid #dee2e6;
}
.modal-footer[b-sg4awtbah8] {
border-top: 1px solid #dee2e6;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.modal-body[b-sg4awtbah8] {
padding: 1rem;
}
/* Small screen responsive */
@media (max-width: 576px) {
.custom-modal-content[b-sg4awtbah8] {
width: 95%;
max-width: 95%;
}
}
/* Fade-in animation */
@keyframes fadeIn-b-sg4awtbah8 {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* _content/HappyBus.Ux/Components/ModelDialogs/ErrorDialog.razor.rz.scp.css */
/* Overlay covers the entire screen */
.popup-overlay[b-zzhnotpv42] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex; /* Flexbox */
justify-content: center; /* Horizontal center */
align-items: center; /* Vertical center */
z-index: 1000;
}
/* Popup box */
.popup-content[b-zzhnotpv42] {
background: #fff;
padding: 20px 30px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
text-align: center;
max-width: 400px;
width: 90%;
animation: popup-fade 0.3s ease;
}
/* Success/Error styles */
.popup-content.success[b-zzhnotpv42] {
border-top: 6px solid #28a745;
}
.popup-content.error[b-zzhnotpv42] {
border-top: 6px solid #dc3545;
color: #dc3545;
}
/* Close button */
.close-btn[b-zzhnotpv42] {
background: #6c757d;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
margin-top: 15px;
transition: all 0.3s ease;
}
.close-btn:hover[b-zzhnotpv42] {
background: #5a6268;
}
/* _content/HappyBus.Ux/Components/ModelDialogs/ModalDialog.razor.rz.scp.css */
.modal[b-2g61hrpmat] {
display: none;
/* Hidden by default */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content[b-2g61hrpmat] {
background-color: #fff;
margin: 5% auto;
padding: 2px;
border: 1px solid #888;
width: 100%;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.modal-dialog.auto-size[b-2g61hrpmat] {
max-width: 85%;
width: auto;
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
.modal-content[b-2g61hrpmat] {
margin: 10% auto;
width: 95%;
max-width: 95%;
border-radius: 8px;
}
.modal-dialog.auto-size[b-2g61hrpmat] {
max-width: 95%;
width: 95%;
}
}
@media (max-width: 480px) {
.modal-content[b-2g61hrpmat] {
margin: 5% auto;
width: 98%;
max-width: 98%;
border-radius: 6px;
padding: 1px;
}
.modal-dialog.auto-size[b-2g61hrpmat] {
max-width: 98%;
width: 98%;
}
}
/* _content/HappyBus.Ux/Components/ModelDialogs/WaitingDialog.razor.rz.scp.css */
.overlay[b-t380zmkn49] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.dialog[b-t380zmkn49] {
background: white;
padding: 30px 50px;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.spinner[b-t380zmkn49] {
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin-b-t380zmkn49 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin-b-t380zmkn49 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.message[b-t380zmkn49] {
font-size: 18px;
color: #333;
}
/* _content/HappyBus.Ux/Components/Pages/BookingPage.razor.rz.scp.css */
/* Booking Page Layout */
.booking-page[b-giouoep5ja] {
min-height: 100vh;
background: #f8f9fa;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.booking-container[b-giouoep5ja] {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 400px;
gap: 24px;
align-items: start;
}
/* Form Section */
.booking-form-section[b-giouoep5ja] {
background: white;
border-radius: 16px;
padding: 32px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.form-header[b-giouoep5ja] {
text-align: center;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 2px solid #f8f9fa;
}
.form-header h1[b-giouoep5ja] {
color: #2c3e50;
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.form-header h1 i[b-giouoep5ja] {
color: #333;
}
.form-header p[b-giouoep5ja] {
color: #6c757d;
font-size: 16px;
margin: 0;
}
/* Form Cards */
.form-card[b-giouoep5ja] {
background: #f8f9fa;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
border: 1px solid #e9ecef;
}
/* Payment Section */
.payment-section[b-giouoep5ja] {
text-align: center;
padding: 24px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
}
.pay-button[b-giouoep5ja] {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
border: none;
padding: 16px 32px;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 12px;
box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
min-width: 200px;
justify-content: center;
}
.pay-button:hover[b-giouoep5ja] {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}
.pay-button:active[b-giouoep5ja] {
transform: translateY(0);
}
.payment-note[b-giouoep5ja] {
margin-top: 16px;
color: #6c757d;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.payment-note i[b-giouoep5ja] {
color: #28a745;
}
/* Trip Summary Section */
.trip-summary-section[b-giouoep5ja] {
background: white;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
position: sticky;
top: 20px;
}
/* Loading Container */
.loading-container[b-giouoep5ja] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 400px;
background: white;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
gap: 16px;
}
.loading-spinner[b-giouoep5ja] {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #2196f3;
border-radius: 50%;
animation: spin-b-giouoep5ja 1s linear infinite;
}
@keyframes spin-b-giouoep5ja {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-container p[b-giouoep5ja] {
color: #6c757d;
font-size: 16px;
margin: 0;
}
/* Responsive Design */
@media (max-width: 1024px) {
.booking-container[b-giouoep5ja] {
grid-template-columns: 1fr;
gap: 20px;
}
.trip-summary-section[b-giouoep5ja] {
position: static;
order: 3;
}
.booking-form-section[b-giouoep5ja] {
order: 1;
}
}
@media (max-width: 768px) {
.booking-page[b-giouoep5ja] {
padding: 12px;
background: #f8f9fa;
}
.booking-container[b-giouoep5ja] {
gap: 16px;
}
.booking-form-section[b-giouoep5ja] {
padding: 20px;
border-radius: 12px;
}
.form-header h1[b-giouoep5ja] {
font-size: 22px;
}
.form-header p[b-giouoep5ja] {
font-size: 15px;
}
.form-card[b-giouoep5ja] {
padding: 16px;
margin-bottom: 16px;
}
.payment-section[b-giouoep5ja] {
padding: 16px;
}
.pay-button[b-giouoep5ja] {
width: 100%;
padding: 14px 20px;
font-size: 16px;
}
.payment-note[b-giouoep5ja] {
font-size: 13px;
}
}
@media (max-width: 480px) {
.booking-page[b-giouoep5ja] {
padding: 8px;
}
.booking-form-section[b-giouoep5ja] {
padding: 16px;
border-radius: 10px;
}
.form-header h1[b-giouoep5ja] {
font-size: 20px;
}
.form-header p[b-giouoep5ja] {
font-size: 14px;
}
.form-card[b-giouoep5ja] {
padding: 12px;
margin-bottom: 12px;
}
.payment-section[b-giouoep5ja] {
padding: 12px;
}
.pay-button[b-giouoep5ja] {
padding: 12px 16px;
font-size: 15px;
}
.payment-note[b-giouoep5ja] {
font-size: 12px;
}
}
/* _content/HappyBus.Ux/Components/Pages/CancelTicketPage.razor.rz.scp.css */
.container[b-x773lq0pbi] {
max-width: 900px;
margin: auto;
font-family: "Segoe UI", Arial, sans-serif;
}
/* Section Title */
.section-title[b-x773lq0pbi] {
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
color: #444;
margin: 25px 0 12px;
padding-left: 10px;
}
/* Card */
.card[b-x773lq0pbi] {
background: #fff;
border-radius: 10px;
padding: 25px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
margin-bottom: 25px;
transition: transform 0.2s ease;
}
.card:hover[b-x773lq0pbi] {
transform: translateY(-3px);
}
/* Journey Header */
.journey-header[b-x773lq0pbi] {
font-size: 20px;
font-weight: 700;
color: #003366;
margin-bottom: 20px;
}
.sub-text[b-x773lq0pbi] {
font-size: 14px;
color: #777;
margin-left: 8px;
}
/* Journey Details */
.journey-details[b-x773lq0pbi] {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 25px;
font-size: 14px;
}
/* Columns */
.journey-col[b-x773lq0pbi] {
flex: 1;
min-width: 150px;
}
.label[b-x773lq0pbi] {
font-weight: 600;
color: #555;
margin-bottom: 5px;
font-size: 13px;
text-transform: uppercase;
}
.value[b-x773lq0pbi] {
font-size: 14px;
color: #333;
}
.value strong[b-x773lq0pbi] {
display: block;
font-size: 16px;
color: #000;
}
/* Arrow */
.journey-col.arrow[b-x773lq0pbi] {
flex: 0.2;
text-align: center;
font-size: 22px;
font-weight: bold;
color: #2962ff;
display: flex;
align-items: center;
justify-content: center;
}
/* Ticket Badge */
.ticket-no[b-x773lq0pbi] {
color: #fff;
background-color: #2962ff;
padding: 6px 10px;
border-radius: 6px;
font-weight: bold;
font-size: 13px;
display: inline-block;
box-shadow: 0 2px 6px rgba(41,98,255,0.3);
}
/* Status Badge */
.status[b-x773lq0pbi] {
font-weight: bold;
padding: 6px 10px;
border-radius: 6px;
display: inline-block;
font-size: 13px;
}
.status:contains("Cancelled")[b-x773lq0pbi] {
background: #ffebee;
color: #d32f2f;
}
.status:contains("Confirmed")[b-x773lq0pbi] {
background: #e8f5e9;
color: #388e3c;
}
.status:contains("Pending")[b-x773lq0pbi] {
background: #fff8e1;
color: #f9a825;
}
/* Passenger Table */
.table[b-x773lq0pbi] {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.table thead th[b-x773lq0pbi] {
text-align: left;
font-size: 13px;
color: #7a7a7a;
padding: 12px;
border-bottom: 2px solid #f0f0f0;
}
.table tbody td[b-x773lq0pbi] {
padding: 12px;
vertical-align: middle;
border-bottom: 1px solid #f5f5f5;
}
.table tbody tr:nth-child(even)[b-x773lq0pbi] {
background-color: #fafafa;
}
/* Checkboxes */
.checkbox[b-x773lq0pbi] {
width: 18px;
height: 18px;
accent-color: #2962ff;
cursor: pointer;
}
/* Passenger Info */
.passenger-name[b-x773lq0pbi] {
font-weight: 600;
text-transform: capitalize;
color: #222;
}
.passenger-info[b-x773lq0pbi] {
font-size: 13px;
color: #666;
}
.seat[b-x773lq0pbi] {
font-weight: bold;
color: #d9534f;
}
/* Buttons */
.btn[b-x773lq0pbi] {
background-color: #d9534f;
color: white;
border: none;
padding: 12px 25px;
font-size: 15px;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s ease, transform 0.1s ease;
}
.btn:hover[b-x773lq0pbi] {
background-color: #c9302c;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.journey-details[b-x773lq0pbi] {
flex-direction: column;
}
.journey-col.arrow[b-x773lq0pbi] {
order: -1;
font-size: 18px;
margin: 10px 0;
}
.table thead[b-x773lq0pbi] {
display: none;
}
.table tbody tr[b-x773lq0pbi] {
display: block;
margin-bottom: 15px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.table tbody td[b-x773lq0pbi] {
display: block;
padding: 10px;
text-align: left;
border: none;
}
.table tbody td[b-x773lq0pbi]::before {
content: attr(data-label);
font-weight: bold;
color: #555;
display: block;
margin-bottom: 4px;
}
}
/* _content/HappyBus.Ux/Components/Pages/HomePage.razor.rz.scp.css */
.page-container[b-v0et72y5s4] {
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
background: #f8f9fa;
}
.hero-section[b-v0et72y5s4] {
background: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YnVzfGVufDB8fDB8fHww');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 50px 0 80px 0;
position: relative;
overflow: hidden;
color: white;
min-height: 220px;
display: flex;
align-items: center;
width: 100%;
}
.hero-section[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://img.freepik.com/free-vector/abstract-wave-pattern-background_53876-115444.jpg');
background-size: cover;
opacity: 0.1;
z-index: 0;
}
.hero-section[b-v0et72y5s4]::after {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: url('https://img.freepik.com/free-vector/red-bus-concept-illustration_114360-14698.jpg');
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
z-index: 1;
opacity: 0.8;
animation: float-b-v0et72y5s4 6s ease-in-out infinite;
}
@keyframes float-b-v0et72y5s4 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
.content-wrapper[b-v0et72y5s4] {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
margin-top: -30px;
}
.nav-menu[b-v0et72y5s4] {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.25);
border-radius: 20px;
padding: 8px;
margin-bottom: 25px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
width: fit-content;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.nav-item[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 10px;
color: white;
padding: 12px 30px;
border-radius: 16px;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
font-weight: 600;
letter-spacing: 0.5px;
background-color: rgba(255, 255, 255, 0.1);
}
.nav-item:hover[b-v0et72y5s4] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background-color: rgba(255, 255, 255, 0.3);
}
.nav-item img[b-v0et72y5s4] {
width: 24px;
height: 24px;
object-fit: contain;
}
.nav-item span[b-v0et72y5s4] {
font-size: 16px;
font-weight: 500;
}
.nav-item.active[b-v0et72y5s4] {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: #fff;
font-weight: 700;
}
.active-indicator[b-v0et72y5s4] {
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}
.title[b-v0et72y5s4] {
font-size: 42px;
font-weight: 800;
margin-bottom: 20px;
margin-top: 5px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
animation: fadeIn-b-v0et72y5s4 1s ease-in-out;
letter-spacing: 0.5px;
color: white;
}
@keyframes fadeIn-b-v0et72y5s4 {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nav-text[b-v0et72y5s4] {
font-weight: 700;
color: white;
margin-left: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.active-indicator[b-v0et72y5s4] {
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 3px;
background-color: #e74c3c;
border-radius: 2px;
}
/* Title style is already defined above */
.search-box[b-v0et72y5s4] {
background: white;
border-radius: 20px;
padding: 30px;
color: black;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-top: 15px;
position: relative;
z-index: 3;
max-width: 2000px;
margin-left: auto;
margin-right: auto;
}
/* Main Content */
.main-content[b-v0et72y5s4] {
flex: 1;
position: relative;
z-index: 2;
margin-top: -50px;
padding-bottom: 60px;
}
/* Search Results */
.search-results-wrapper[b-v0et72y5s4] {
background: #f8f9fa;
min-height: 100vh;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.search-results-wrapper.show[b-v0et72y5s4] {
opacity: 1;
transform: translateY(0);
}
.search-results-layout[b-v0et72y5s4] {
display: flex;
gap: 20px;
max-width: 1600px;
margin: 0 auto;
padding: 24px;
align-items: flex-start;
min-height: 600px;
}
.filters-sidebar[b-v0et72y5s4] {
flex-shrink: 0;
width: 280px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
position: sticky;
top: 24px;
}
.results-main[b-v0et72y5s4] {
flex: 1;
min-width: 0;
max-width: calc(100% - 300px);
}
.no-results-container[b-v0et72y5s4] {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 40px 20px;
}
.no-results[b-v0et72y5s4] {
text-align: center;
background: white;
padding: 60px 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
max-width: 500px;
width: 100%;
}
.no-results-icon[b-v0et72y5s4] {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.no-results-icon i[b-v0et72y5s4] {
font-size: 32px;
color: #6c757d;
}
.no-results h3[b-v0et72y5s4] {
font-size: 24px;
font-weight: 700;
color: #2c3e50;
margin: 0 0 12px 0;
}
.no-results p[b-v0et72y5s4] {
font-size: 16px;
color: #6c757d;
margin: 0 0 32px 0;
line-height: 1.5;
}
.retry-search-btn[b-v0et72y5s4] {
background: #e74c3c;
border: none;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
.retry-search-btn:hover[b-v0et72y5s4] {
background: #c0392b;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
}
/* Mobile Header for Search Results */
.mobile-search-header[b-v0et72y5s4] {
display: none;
background: #394560;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.mobile-header-content[b-v0et72y5s4] {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
min-height: 60px;
}
.back-to-search-btn[b-v0et72y5s4] {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.back-to-search-btn:hover[b-v0et72y5s4] {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.mobile-search-info[b-v0et72y5s4] {
flex: 1;
min-width: 0;
overflow: hidden;
}
.route-info[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
color: white;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.route-arrow[b-v0et72y5s4] {
color: white;
font-size: 18px;
margin: 0 8px;
opacity: 1;
display: inline-block;
flex-shrink: 0;
font-weight: 600;
line-height: 1;
}
.from-city[b-v0et72y5s4], .to-city[b-v0et72y5s4] {
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bus-count[b-v0et72y5s4] {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.date-badge[b-v0et72y5s4] {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 6px 10px;
border-radius: 16px;
text-align: center;
min-width: 60px;
max-width: 80px;
display: flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.date-icon[b-v0et72y5s4] {
font-size: 10px;
opacity: 0.9;
flex-shrink: 0;
}
.date-content[b-v0et72y5s4] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
overflow: hidden;
}
.date-day[b-v0et72y5s4] {
font-size: 10px;
font-weight: 600;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.date-weekday[b-v0et72y5s4] {
font-size: 9px;
font-weight: 500;
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* RedBus Style Mobile Filter Bar */
.mobile-filter-bar[b-v0et72y5s4] {
padding: 16px 20px;
background: white;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e9ecef;
position: relative;
overflow: hidden;
}
.mobile-filter-bar[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #dc3545, #fd7e14, #20c997, #6f42c1);
animation: shimmer-b-v0et72y5s4 3s ease-in-out infinite;
}
@keyframes shimmer-b-v0et72y5s4 {
0%, 100% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
}
.filter-options[b-v0et72y5s4] {
display: flex;
gap: 12px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
padding: 4px 0;
scroll-behavior: smooth;
}
.filter-options[b-v0et72y5s4]::-webkit-scrollbar {
display: none;
}
/* RedBus Style Filter Pills */
.filter-pill[b-v0et72y5s4] {
background: white;
border: 1px solid #dee2e6;
border-radius: 20px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-width: fit-content;
position: relative;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.filter-pill[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.1), transparent);
transition: left 0.5s ease;
}
.filter-pill:hover[b-v0et72y5s4]::before {
left: 100%;
}
.filter-pill:hover[b-v0et72y5s4] {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.filter-pill.active[b-v0et72y5s4] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
transform: translateY(-1px);
}
.filter-pill.active[b-v0et72y5s4]::before {
display: none;
}
.filter-pill i[b-v0et72y5s4] {
font-size: 12px;
transition: all 0.3s ease;
}
.filter-pill:hover i[b-v0et72y5s4] {
transform: scale(1.1);
}
.filter-pill.active i[b-v0et72y5s4] {
transform: scale(1.1);
}
.filter-pill span[b-v0et72y5s4] {
font-size: 12px;
font-weight: 500;
}
.filter-count[b-v0et72y5s4] {
color: #6c757d;
font-weight: 600;
font-size: 11px;
}
.filter-pill.active .filter-count[b-v0et72y5s4] {
color: rgba(255, 255, 255, 0.8);
}
.show-filters-btn[b-v0et72y5s4] {
background: #dc3545;
color: white;
border: none;
border-radius: 20px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
.show-filters-btn:hover[b-v0et72y5s4] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}
.show-filters-btn i[b-v0et72y5s4] {
font-size: 12px;
}
/* Mobile-specific improvements */
@media (max-width: 768px) {
.mobile-filter-bar[b-v0et72y5s4] {
padding: 12px 16px;
gap: 12px;
}
.filter-pill[b-v0et72y5s4] {
padding: 10px 14px;
font-size: 12px;
gap: 5px;
min-height: 40px;
}
.filter-pill i[b-v0et72y5s4] {
font-size: 12px;
}
.filter-pill span[b-v0et72y5s4] {
font-size: 11px;
}
.filter-count[b-v0et72y5s4] {
font-size: 10px;
font-weight: 600;
}
.show-filters-btn[b-v0et72y5s4] {
padding: 10px 16px;
font-size: 12px;
min-height: 40px;
}
.show-filters-btn i[b-v0et72y5s4] {
font-size: 11px;
}
}
@media (max-width: 480px) {
.mobile-filter-bar[b-v0et72y5s4] {
padding: 10px 12px;
gap: 10px;
}
.filter-pill[b-v0et72y5s4] {
padding: 8px 12px;
font-size: 11px;
gap: 4px;
min-height: 36px;
}
.filter-pill i[b-v0et72y5s4] {
font-size: 11px;
}
.filter-pill span[b-v0et72y5s4] {
font-size: 10px;
}
.filter-count[b-v0et72y5s4] {
font-size: 9px;
}
.show-filters-btn[b-v0et72y5s4] {
padding: 8px 12px;
font-size: 11px;
min-height: 36px;
}
.show-filters-btn i[b-v0et72y5s4] {
font-size: 10px;
}
}
/* Desktop only elements */
.desktop-only[b-v0et72y5s4] {
display: block;
}
/* Desktop layout improvements */
@media (min-width: 769px) {
.search-results-layout[b-v0et72y5s4] {
gap: 32px;
padding: 32px;
}
.filters-sidebar[b-v0et72y5s4] {
width: 350px;
}
.results-main[b-v0et72y5s4] {
flex: 1;
min-width: 0;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
padding: 24px;
}
}
/* Mobile only elements - hidden on desktop */
.mobile-filters-panel[b-v0et72y5s4] {
display: none;
}
/* Hide elements when search results are shown */
.hide-on-search[b-v0et72y5s4] {
display: none !important;
}
/* Mobile view when search results are shown */
@media (max-width: 768px) {
.hero-section[b-v0et72y5s4] {
padding: 40px 0 60px 0;
min-height: 450px;
}
.content-wrapper[b-v0et72y5s4] {
margin-top: -15px;
}
.title[b-v0et72y5s4] {
font-size: 32px;
margin-bottom: 15px;
margin-top: 0;
}
.search-box[b-v0et72y5s4] {
margin-top: 10px;
padding: 30px 20px;
}
.mobile-search-header[b-v0et72y5s4] {
display: block;
}
.mobile-filters-panel[b-v0et72y5s4] {
display: block;
}
.mobile-header-content[b-v0et72y5s4] {
padding: 10px 12px;
gap: 8px;
}
.route-info[b-v0et72y5s4] {
font-size: 14px;
}
.route-arrow[b-v0et72y5s4] {
font-size: 16px;
margin: 0 6px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-v0et72y5s4] {
font-size: 12px;
}
.date-badge[b-v0et72y5s4] {
padding: 4px 8px;
min-width: 50px;
max-width: 70px;
}
.date-day[b-v0et72y5s4] {
font-size: 9px;
}
.date-weekday[b-v0et72y5s4] {
font-size: 8px;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.hero-section[b-v0et72y5s4] {
padding: 30px 0 50px 0;
min-height: 400px;
}
.content-wrapper[b-v0et72y5s4] {
margin-top: -10px;
max-width: 95%;
padding: 0 15px;
}
.title[b-v0et72y5s4] {
font-size: 28px;
margin-bottom: 12px;
margin-top: 0;
}
.search-box[b-v0et72y5s4] {
margin-top: 8px;
padding: 16px;
}
.mobile-header-content[b-v0et72y5s4] {
padding: 8px 10px;
gap: 6px;
}
.route-info[b-v0et72y5s4] {
font-size: 13px;
}
.route-arrow[b-v0et72y5s4] {
font-size: 14px;
margin: 0 4px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-v0et72y5s4] {
font-size: 11px;
}
.date-badge[b-v0et72y5s4] {
padding: 3px 6px;
min-width: 45px;
max-width: 60px;
}
.date-day[b-v0et72y5s4] {
font-size: 8px;
}
.date-weekday[b-v0et72y5s4] {
font-size: 7px;
}
.back-to-search-btn[b-v0et72y5s4] {
width: 32px;
height: 32px;
font-size: 16px;
}
.mobile-filters-panel[b-v0et72y5s4] {
display: block;
}
.hide-on-mobile[b-v0et72y5s4] {
display: none !important;
}
.desktop-only[b-v0et72y5s4] {
display: none !important;
}
.search-results-wrapper[b-v0et72y5s4] {
margin-top: 0;
padding-top: 0;
}
.search-results-layout[b-v0et72y5s4] {
padding: 4px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.mobile-filters-panel[b-v0et72y5s4] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 20px;
transition: all 0.3s ease;
overflow: hidden;
display: block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
transform: translateY(100%);
border-radius: 16px 16px 0 0;
}
.mobile-filters-panel.hide[b-v0et72y5s4] {
transform: translateY(100%);
opacity: 0;
}
.mobile-filters-panel.show[b-v0et72y5s4] {
transform: translateY(0);
opacity: 1;
overflow-y: auto;
max-height: 80vh;
}
.mobile-filters-panel[b-v0et72y5s4]::-webkit-scrollbar {
width: 4px;
}
.mobile-filters-panel[b-v0et72y5s4]::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.mobile-filters-panel[b-v0et72y5s4]::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 2px;
}
.mobile-filters-panel[b-v0et72y5s4]::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.mobile-filters-header[b-v0et72y5s4] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.mobile-filters-header h3[b-v0et72y5s4] {
font-size: 20px;
font-weight: 700;
color: #333;
margin: 0;
}
.close-filters-btn[b-v0et72y5s4] {
background: none;
border: none;
color: #666;
font-size: 24px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.close-filters-btn:hover[b-v0et72y5s4] {
background: #f0f0f0;
color: #333;
}
.results-main[b-v0et72y5s4] {
order: 2;
padding: 4px;
width: 100%;
box-sizing: border-box;
}
/* Very small screens */
@media (max-width: 320px) {
.search-results-layout[b-v0et72y5s4] {
padding: 2px;
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.results-main[b-v0et72y5s4] {
padding: 2px;
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
}
.no-results[b-v0et72y5s4] {
padding: 40px 24px;
}
.no-results-icon[b-v0et72y5s4] {
width: 60px;
height: 60px;
}
.no-results-icon i[b-v0et72y5s4] {
font-size: 24px;
}
.no-results h3[b-v0et72y5s4] {
font-size: 20px;
}
.no-results p[b-v0et72y5s4] {
font-size: 14px;
}
}
/* Responsive design for search results - Progressive scaling */
@media (max-width: 1024px) and (min-width: 769px) {
.search-results-layout[b-v0et72y5s4] {
flex-direction: column;
gap: 20px;
padding: 16px;
max-width: 1000px;
margin: 0 auto;
}
.filters-sidebar[b-v0et72y5s4] {
width: 100%;
}
.results-main[b-v0et72y5s4] {
padding: 16px;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.search-results-layout[b-v0et72y5s4] {
flex-direction: column;
gap: 16px;
padding: 12px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-v0et72y5s4] {
width: 100%;
}
.results-main[b-v0et72y5s4] {
padding: 12px;
width: 100%;
box-sizing: border-box;
}
}
/* Specific breakpoint for screens around 659px */
@media (max-width: 659px) and (min-width: 481px) {
.search-results-layout[b-v0et72y5s4] {
flex-direction: column;
gap: 12px;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-v0et72y5s4] {
width: 100%;
}
.results-main[b-v0et72y5s4] {
padding: 10px;
width: 100%;
box-sizing: border-box;
}
}
/* Unified breakpoint for screens 321px to 480px */
@media (max-width: 480px) and (min-width: 321px) {
.search-results-layout[b-v0et72y5s4] {
padding: 8px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
.results-main[b-v0et72y5s4] {
padding: 8px;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
}
/* Responsive design for search results */
@media (max-width: 1024px) {
.search-results-layout[b-v0et72y5s4] {
flex-direction: column;
gap: 20px;
}
.filters-sidebar[b-v0et72y5s4] {
width: 100%;
}
}
/* Discount Offers Section Styles */
.discount-offers-section[b-v0et72y5s4] {
padding: 40px 0;
background-color: #f0f8ff;
}
.section-header[b-v0et72y5s4] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.section-header h2[b-v0et72y5s4] {
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0;
}
.view-all[b-v0et72y5s4] {
color: #FF6B6B;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
}
.view-all:hover[b-v0et72y5s4] {
color: #FF8E53;
transform: translateX(2px);
}
/* About Section Styles */
.about-section[b-v0et72y5s4] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.about-section[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://img.freepik.com/free-vector/abstract-wave-pattern-background_53876-115444.jpg');
background-size: cover;
opacity: 0.05;
z-index: 1;
}
.about-section .container[b-v0et72y5s4] {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.about-section .section-header[b-v0et72y5s4] {
text-align: center;
margin-bottom: 50px;
}
.about-section .section-header h2[b-v0et72y5s4] {
font-size: 32px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.about-section .section-header h2[b-v0et72y5s4]::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
border-radius: 3px;
}
.about-section .section-header p[b-v0et72y5s4] {
font-size: 16px;
color: #666;
max-width: 700px;
margin: 15px auto 0;
}
.about-content[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 50px;
}
.about-image[b-v0et72y5s4] {
flex: 1;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.about-image:hover[b-v0et72y5s4] {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.about-image img[b-v0et72y5s4] {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.about-image:hover img[b-v0et72y5s4] {
transform: scale(1.05);
}
.about-experience[b-v0et72y5s4] {
position: absolute;
bottom: 30px;
left: 30px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-experience .years[b-v0et72y5s4] {
font-size: 32px;
font-weight: 800;
line-height: 1;
}
.about-experience .text[b-v0et72y5s4] {
font-size: 14px;
font-weight: 500;
}
.about-text[b-v0et72y5s4] {
flex: 1;
}
.about-text p[b-v0et72y5s4] {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.about-stats[b-v0et72y5s4] {
display: flex;
justify-content: space-between;
margin: 40px 0;
}
.stat-item[b-v0et72y5s4] {
text-align: center;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
flex: 1;
margin: 0 10px;
}
.stat-item:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}
.stat-icon[b-v0et72y5s4] {
font-size: 28px;
color: #FF6B6B;
margin-bottom: 10px;
}
.stat-number[b-v0et72y5s4] {
font-size: 24px;
font-weight: 700;
color: #333;
margin-bottom: 5px;
}
.stat-text[b-v0et72y5s4] {
font-size: 14px;
color: #666;
}
.about-cta[b-v0et72y5s4] {
display: flex;
gap: 20px;
margin-top: 30px;
}
.about-btn[b-v0et72y5s4], .contact-btn[b-v0et72y5s4] {
padding: 12px 25px;
border-radius: 30px;
font-weight: 600;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
text-decoration: none;
}
.about-btn[b-v0et72y5s4] {
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
box-shadow: 0 8px 15px rgba(255, 107, 107, 0.3);
}
.contact-btn[b-v0et72y5s4] {
background: white;
color: #333;
border: 1px solid #ddd;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}
.about-btn:hover[b-v0et72y5s4], .contact-btn:hover[b-v0et72y5s4] {
transform: translateY(-3px);
}
.about-btn:hover[b-v0et72y5s4] {
box-shadow: 0 12px 20px rgba(255, 107, 107, 0.4);
}
.contact-btn:hover[b-v0et72y5s4] {
background: #f8f9fa;
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
}
/* Responsive Styles */
@media (max-width: 992px) {
.about-content[b-v0et72y5s4] {
flex-direction: column;
}
.about-image[b-v0et72y5s4], .about-text[b-v0et72y5s4] {
width: 100%;
}
.about-image[b-v0et72y5s4] {
margin-bottom: 40px;
}
.about-stats[b-v0et72y5s4] {
flex-wrap: wrap;
}
.stat-item[b-v0et72y5s4] {
flex: 0 0 calc(50% - 20px);
margin-bottom: 20px;
}
}
@media (max-width: 768px) {
.about-section[b-v0et72y5s4] {
padding: 60px 0;
}
.about-cta[b-v0et72y5s4] {
flex-direction: column;
}
.stat-item[b-v0et72y5s4] {
flex: 0 0 100%;
}
.about-experience[b-v0et72y5s4] {
bottom: 20px;
left: 20px;
padding: 10px 20px;
}
.about-experience .years[b-v0et72y5s4] {
font-size: 28px;
}
.about-experience .text[b-v0et72y5s4] {
font-size: 12px;
}
}
@media (max-width: 576px) {
.about-section .section-header h2[b-v0et72y5s4] {
font-size: 28px;
}
.about-image img[b-v0et72y5s4] {
height: 300px;
}
}
.offers-slider[b-v0et72y5s4] {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 10px 0;
scrollbar-width: none; /* Firefox */
}
.offers-slider[b-v0et72y5s4]::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
.offers-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.offer-card[b-v0et72y5s4] {
flex: 0 0 auto;
width: 100%;
height: 120px;
border-radius: 16px;
overflow: hidden;
display: flex;
background-color: #fff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.offer-card:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.offer-content[b-v0et72y5s4] {
flex: 1;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: center;
}
.offer-tag-pill[b-v0et72y5s4] {
position: absolute;
top: 12px;
left: 12px;
font-size: 14px;
font-weight: 700;
color: #fff;
background-color: #e74c3c;
padding: 4px 12px;
border-radius: 20px;
z-index: 2;
box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}
.offer-details p[b-v0et72y5s4] {
margin: 0 0 8px 0;
font-size: 14px;
color: #666;
}
.offer-validity[b-v0et72y5s4] {
font-size: 12px;
color: #888;
margin-bottom: 4px;
}
.offer-code[b-v0et72y5s4] {
font-size: 12px;
color: #888;
margin-top: 4px;
}
.offer-code span[b-v0et72y5s4] {
font-weight: 600;
color: #e74c3c;
background-color: rgba(231, 76, 60, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
.offer-image[b-v0et72y5s4] {
width: 30%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #f8f9fa;
position: relative;
}
.offer-image img[b-v0et72y5s4] {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1920px) {
.hero-section[b-v0et72y5s4]::before {
width: 100vw;
left: 0;
right: 0;
transform: none;
}
}
@media (max-width: 1024px) {
.nav-menu[b-v0et72y5s4] {
flex-wrap: wrap;
gap: 16px;
}
.title[b-v0et72y5s4] {
width: 100%;
text-align: center;
margin-top: 16px;
}
}
@media (max-width: 1200px) {
/* Responsive styles for 1200px and below */
}
@media (max-width: 768px) {
.hero-section[b-v0et72y5s4] {
padding: 20px 0;
}
.content-wrapper[b-v0et72y5s4] {
padding: 0 16px;
}
.nav-menu[b-v0et72y5s4] {
justify-content: center;
}
.nav-item[b-v0et72y5s4] {
padding: 8px 16px;
}
.nav-item img[b-v0et72y5s4] {
width: 20px;
height: 20px;
}
.nav-item span[b-v0et72y5s4] {
font-size: 14px;
}
.search-box[b-v0et72y5s4] {
padding: 16px;
margin-top: 16px;
}
.offers-slider[b-v0et72y5s4] {
flex-direction: column;
gap: 16px;
}
.offer-card[b-v0et72y5s4] {
width: 100%;
max-width: 100%;
}
.section-header[b-v0et72y5s4] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* Common Styles */
.container[b-v0et72y5s4] {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section[b-v0et72y5s4] {
padding: 30px 0;
background: #fff;
position: relative;
z-index: 1;
}
.section-header[b-v0et72y5s4] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.section-header h2[b-v0et72y5s4] {
font-size: 28px;
font-weight: 700;
color: #333;
margin: 0;
position: relative;
padding-left: 15px;
}
.section-header h2[b-v0et72y5s4]::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 25px;
background: linear-gradient(to bottom, #e74c3c, #c0392b);
border-radius: 3px;
}
.view-all[b-v0et72y5s4] {
color: #e74c3c;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
padding: 8px 16px;
border-radius: 20px;
background-color: rgba(231, 76, 60, 0.1);
}
.view-all:hover[b-v0et72y5s4] {
color: #fff;
background-color: #e74c3c;
transform: translateX(5px);
box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}
.offers-section[b-v0et72y5s4] {
padding: 30px 0;
background: #f8f9fa;
}
.offers-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 10px;
}
.offer-card[b-v0et72y5s4] {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.offer-card:hover[b-v0et72y5s4] {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.offer-image[b-v0et72y5s4] {
height: 200px;
overflow: hidden;
}
.offer-image img[b-v0et72y5s4] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.offer-card:hover .offer-image img[b-v0et72y5s4] {
transform: scale(1.1);
}
.offer-content[b-v0et72y5s4] {
padding: 20px;
}
.offer-tag[b-v0et72y5s4] {
display: inline-block;
padding: 8px 15px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
border-radius: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.offer-content p[b-v0et72y5s4] {
color: #666;
margin: 8px 0;
}
.offer-code[b-v0et72y5s4] {
font-size: 14px;
color: #666;
}
.offer-code span[b-v0et72y5s4] {
color: #e74c3c;
font-weight: 600;
}
/* Popular Routes Section */
.routes-section[b-v0et72y5s4] {
padding: 30px 0;
background: #f9f9f9;
}
.routes-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 10px;
}
.route-card[b-v0et72y5s4] {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.route-card:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}
.route-image[b-v0et72y5s4] {
position: relative;
height: 180px;
overflow: hidden;
}
.route-image img[b-v0et72y5s4] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.route-card:hover .route-image img[b-v0et72y5s4] {
transform: scale(1.05);
}
.route-overlay[b-v0et72y5s4] {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 16px;
color: white;
display: flex;
justify-content: space-between;
backdrop-filter: blur(2px);
}
.route-time[b-v0et72y5s4], .route-distance[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 500;
}
.route-info[b-v0et72y5s4] {
padding: 20px;
flex-grow: 1;
}
.cities[b-v0et72y5s4] {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 16px;
letter-spacing: 0.5px;
}
.route-meta[b-v0et72y5s4] {
display: flex;
justify-content: space-between;
color: #666;
font-size: 14px;
margin-bottom: 20px;
}
.route-meta span[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 6px;
}
.book-now[b-v0et72y5s4] {
width: calc(100% - 40px);
padding: 14px;
background: #e74c3c;
color: #fff;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 20px 20px 20px;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}
.book-now:hover[b-v0et72y5s4] {
background: #c0392b;
box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4);
transform: translateY(-2px);
}
/* Operators Section */
.operators-section[b-v0et72y5s4] {
padding: 30px 0;
background-color: #f9f9f9;
}
.operators-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 10px;
}
.operator-card[b-v0et72y5s4] {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.operator-card:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}
.operator-banner[b-v0et72y5s4] {
position: relative;
height: 160px;
overflow: hidden;
}
.banner-img[b-v0et72y5s4] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.operator-card:hover .banner-img[b-v0et72y5s4] {
transform: scale(1.05);
}
.operator-badge[b-v0et72y5s4] {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
letter-spacing: 0.5px;
}
.operator-logo-container[b-v0et72y5s4] {
display: flex;
justify-content: center;
margin-top: -35px;
margin-bottom: 15px;
position: relative;
z-index: 2;
}
.operator-logo[b-v0et72y5s4] {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
border: 4px solid white;
}
.operator-logo i[b-v0et72y5s4] {
font-size: 28px;
color: white;
}
.operator-info[b-v0et72y5s4] {
padding: 0 20px 20px;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.operator-card h3[b-v0et72y5s4] {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: #333;
letter-spacing: 0.5px;
}
.rating[b-v0et72y5s4] {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-bottom: 15px;
}
.rating i[b-v0et72y5s4] {
color: #f39c12;
font-size: 16px;
}
.rating span[b-v0et72y5s4] {
font-weight: 700;
color: #555;
margin-left: 6px;
font-size: 15px;
}
.operator-details[b-v0et72y5s4] {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
color: #666;
font-size: 14px;
}
.operator-details span[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 5px;
}
.view-buses[b-v0et72y5s4] {
margin-top: auto;
display: inline-block;
color: #e74c3c;
font-weight: 700;
text-decoration: none;
font-size: 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
margin: 0 -20px;
margin-top: auto;
}
.view-buses:hover[b-v0et72y5s4] {
color: #c0392b;
background-color: rgba(231, 76, 60, 0.05);
}
.view-buses i[b-v0et72y5s4] {
transition: transform 0.3s ease;
}
.view-buses:hover i[b-v0et72y5s4] {
transform: translateX(5px);
}
/* App Section */
.app-section[b-v0et72y5s4] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.app-section[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: linear-gradient(135deg, rgba(231, 76, 60, 0.05) 0%, rgba(231, 76, 60, 0.1) 100%);
border-radius: 0 0 0 100%;
z-index: 0;
}
.app-content[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 60px;
position: relative;
z-index: 1;
}
.app-text[b-v0et72y5s4] {
flex: 1;
}
.app-badge[b-v0et72y5s4] {
display: inline-block;
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
padding: 6px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 20px;
letter-spacing: 1px;
box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3);
}
.app-text h2[b-v0et72y5s4] {
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
color: #333;
line-height: 1.2;
}
.app-text p[b-v0et72y5s4] {
font-size: 16px;
color: #666;
margin-bottom: 30px;
line-height: 1.6;
max-width: 90%;
}
.app-features[b-v0et72y5s4] {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.feature[b-v0et72y5s4] {
display: flex;
align-items: flex-start;
gap: 15px;
}
.feature-icon[b-v0et72y5s4] {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2);
flex-shrink: 0;
}
.feature-icon i[b-v0et72y5s4] {
font-size: 20px;
color: white;
}
.feature-text h4[b-v0et72y5s4] {
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}
.feature-text p[b-v0et72y5s4] {
font-size: 14px;
color: #666;
margin-bottom: 0;
line-height: 1.4;
}
.app-buttons[b-v0et72y5s4] {
display: flex;
gap: 15px;
margin-bottom: 25px;
}
.app-store[b-v0et72y5s4], .play-store[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 10px;
background-color: #333;
color: white;
padding: 12px 20px;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
border: none;
font-family: inherit;
}
.app-store[b-v0et72y5s4] {
background: linear-gradient(135deg, #007AFF, #0056CC);
}
.play-store[b-v0et72y5s4] {
background: linear-gradient(135deg, #00C851, #007E33);
}
.app-store:hover[b-v0et72y5s4], .play-store:hover[b-v0et72y5s4] {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
text-decoration: none;
color: white;
}
.app-store:hover[b-v0et72y5s4] {
background: linear-gradient(135deg, #0056CC, #003D99);
}
.play-store:hover[b-v0et72y5s4] {
background: linear-gradient(135deg, #007E33, #005A24);
}
.app-store i[b-v0et72y5s4], .play-store i[b-v0et72y5s4] {
font-size: 24px;
}
.button-text[b-v0et72y5s4] {
display: flex;
flex-direction: column;
}
.button-text span[b-v0et72y5s4] {
font-size: 10px;
opacity: 0.9;
line-height: 1.2;
}
.button-text strong[b-v0et72y5s4] {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
}
.app-rating[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 10px;
}
.stars[b-v0et72y5s4] {
display: flex;
color: #f39c12;
}
.app-rating p[b-v0et72y5s4] {
margin: 0;
font-size: 14px;
color: #666;
}
.app-image[b-v0et72y5s4] {
flex: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.app-image img[b-v0et72y5s4] {
max-width: 100%;
height: auto;
max-height: 500px;
position: relative;
z-index: 1;
}
.app-image-overlay[b-v0et72y5s4] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 65%;
height: 75%;
z-index: 2;
overflow: hidden;
border-radius: 20px;
}
.app-screen[b-v0et72y5s4] {
width: 100%;
height: 100%;
overflow: hidden;
}
.app-screen img[b-v0et72y5s4] {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 992px) {
.app-content[b-v0et72y5s4] {
flex-direction: column;
text-align: center;
}
.app-text p[b-v0et72y5s4] {
max-width: 100%;
}
.app-features[b-v0et72y5s4] {
max-width: 500px;
margin: 0 auto 30px;
}
.feature[b-v0et72y5s4] {
text-align: left;
}
.app-buttons[b-v0et72y5s4] {
justify-content: center;
}
.app-rating[b-v0et72y5s4] {
justify-content: center;
}
}
/* Bus Services Section */
.bus-services-section[b-v0et72y5s4] {
background: #f8f9fa;
padding: 80px 0;
}
.services-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card[b-v0et72y5s4] {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.service-card:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.service-image[b-v0et72y5s4] {
position: relative;
height: 180px;
overflow: hidden;
}
.service-image img[b-v0et72y5s4] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.service-card:hover .service-image img[b-v0et72y5s4] {
transform: scale(1.05);
}
.service-content[b-v0et72y5s4] {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
}
.service-icon[b-v0et72y5s4] {
width: 60px;
height: 60px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-radius: 12px;
box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2);
}
.service-icon i[b-v0et72y5s4] {
font-size: 24px;
color: white;
}
.service-card h3[b-v0et72y5s4] {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 12px;
}
.service-card p[b-v0et72y5s4] {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.service-features[b-v0et72y5s4] {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
text-align: left;
}
.service-features span[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 14px;
}
.service-features i[b-v0et72y5s4] {
color: #e74c3c;
}
.service-link[b-v0et72y5s4] {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
color: #e74c3c;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.service-link:hover[b-v0et72y5s4] {
color: #c0392b;
transform: translateX(5px);
}
/* Why Us Section */
.why-us-section[b-v0et72y5s4] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
}
.why-us-section[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?fm=jpg&q=60&w=3000');
background-size: cover;
opacity: 0.1;
z-index: 0;
}
.why-us-section .container[b-v0et72y5s4] {
position: relative;
z-index: 1;
}
.why-us-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.why-us-card[b-v0et72y5s4] {
background-color: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.why-us-card:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.why-us-icon[b-v0et72y5s4] {
width: 70px;
height: 70px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.why-us-icon i[b-v0et72y5s4] {
font-size: 32px;
color: white;
}
.why-us-icon.safety[b-v0et72y5s4] {
background: linear-gradient(135deg, #2ecc71, #27ae60);
}
.why-us-icon.punctuality[b-v0et72y5s4] {
background: linear-gradient(135deg, #3498db, #2980b9);
}
.why-us-icon.prices[b-v0et72y5s4] {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.why-us-icon.support[b-v0et72y5s4] {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
.why-us-card h3[b-v0et72y5s4] {
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
color: #333;
}
.why-us-card p[b-v0et72y5s4] {
font-size: 15px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.why-us-features[b-v0et72y5s4] {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.why-us-features li[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #555;
}
.why-us-features li i[b-v0et72y5s4] {
color: #27ae60;
font-size: 16px;
}
.why-us-image[b-v0et72y5s4] {
margin-top: auto;
height: 160px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.why-us-image img[b-v0et72y5s4] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.why-us-card:hover .why-us-image img[b-v0et72y5s4] {
transform: scale(1.05);
}
@media (max-width: 992px) {
.why-us-grid[b-v0et72y5s4] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.why-us-grid[b-v0et72y5s4] {
grid-template-columns: 1fr;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
/* Testimonials Section */
.testimonials-section[b-v0et72y5s4] {
padding: 80px 0;
background-color: #f8f9fa;
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 249, 250, 0.9) 100%);
position: relative;
}
.testimonials-section[b-v0et72y5s4]::before {
content: '"';
position: absolute;
top: 40px;
left: 5%;
font-size: 200px;
color: rgba(233, 76, 60, 0.05);
font-family: Georgia, serif;
line-height: 1;
}
.testimonials-section .section-header[b-v0et72y5s4] {
text-align: center;
position: relative;
z-index: 1;
}
.testimonials-section .section-header p[b-v0et72y5s4] {
color: #666;
margin-top: 10px;
}
.testimonials-slider[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin-top: 40px;
}
.testimonial-card[b-v0et72y5s4] {
background-color: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
border-top: 4px solid #e94c3c;
overflow: hidden;
}
.testimonial-card[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background-color: rgba(233, 76, 60, 0.05);
border-radius: 0 0 0 100%;
z-index: 0;
}
.testimonial-card:hover[b-v0et72y5s4] {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.testimonial-rating[b-v0et72y5s4] {
color: #ffc107;
margin-bottom: 15px;
display: flex;
gap: 2px;
}
.testimonial-content[b-v0et72y5s4] {
position: relative;
margin-bottom: 25px;
z-index: 1;
}
.testimonial-content .bi-quote[b-v0et72y5s4] {
position: absolute;
top: -10px;
left: -5px;
font-size: 24px;
color: #e94c3c;
opacity: 0.2;
}
.testimonial-content p[b-v0et72y5s4] {
font-size: 16px;
line-height: 1.7;
color: #555;
font-style: italic;
margin-top: 10px;
}
.testimonial-author[b-v0et72y5s4] {
display: flex;
align-items: center;
margin-top: 20px;
position: relative;
z-index: 1;
}
.testimonial-author img[b-v0et72y5s4] {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 3px solid #fff;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.author-info h4[b-v0et72y5s4] {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.author-details[b-v0et72y5s4] {
display: flex;
flex-direction: column;
margin-top: 5px;
}
.author-type[b-v0et72y5s4] {
font-size: 14px;
color: #e94c3c;
font-weight: 500;
}
.author-route[b-v0et72y5s4] {
font-size: 13px;
color: #777;
margin-top: 2px;
}
.testimonial-date[b-v0et72y5s4] {
font-size: 12px;
color: #999;
margin-top: 15px;
text-align: right;
font-style: italic;
}
.testimonial-actions[b-v0et72y5s4] {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
gap: 20px;
}
.testimonial-nav[b-v0et72y5s4] {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.testimonial-nav:hover[b-v0et72y5s4] {
background-color: #e94c3c;
color: white;
}
.testimonial-dots[b-v0et72y5s4] {
display: flex;
gap: 8px;
}
.dot[b-v0et72y5s4] {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active[b-v0et72y5s4] {
background-color: #e94c3c;
transform: scale(1.2);
}
@media (max-width: 768px) {
.testimonials-slider[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.testimonial-card[b-v0et72y5s4] {
padding: 25px;
}
.testimonial-author img[b-v0et72y5s4] {
width: 50px;
height: 50px;
}
}
/* Footer Section */
.footer-section[b-v0et72y5s4] {
background: #1a1a1a;
color: #fff;
padding: 80px 0 40px;
position: relative;
overflow: hidden;
}
.footer-section[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #e74c3c, #f39c12, #e74c3c);
}
.footer-content[b-v0et72y5s4] {
display: grid;
grid-template-columns: 1.5fr 2fr 1.5fr;
gap: 60px;
margin-bottom: 40px;
}
.footer-logo img[b-v0et72y5s4] {
height: 50px;
margin-bottom: 20px;
border-radius: 10px;
}
.footer-logo p[b-v0et72y5s4] {
color: #ccc;
margin-bottom: 20px;
line-height: 1.7;
}
.footer-links[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.footer-column h3[b-v0et72y5s4] {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
color: #fff;
position: relative;
padding-bottom: 10px;
}
.footer-column h3[b-v0et72y5s4]::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background-color: #e74c3c;
}
.footer-column ul[b-v0et72y5s4] {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column li[b-v0et72y5s4] {
margin-bottom: 12px;
}
.footer-column a[b-v0et72y5s4] {
color: #ccc;
text-decoration: none;
transition: all 0.3s ease;
font-size: 15px;
}
.footer-column a:hover[b-v0et72y5s4] {
color: #e74c3c;
padding-left: 5px;
}
.footer-column li i[b-v0et72y5s4] {
font-size: 12px;
color: #e74c3c;
margin-right: 8px;
}
.footer-contact h3[b-v0et72y5s4] {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-contact h3[b-v0et72y5s4]::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background-color: #e74c3c;
}
.footer-contact p[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 10px;
color: #ccc;
margin-bottom: 15px;
line-height: 1.5;
}
.footer-contact i[b-v0et72y5s4] {
color: #e74c3c;
font-size: 18px;
}
.social-links[b-v0et72y5s4] {
display: flex;
gap: 12px;
margin-top: 20px;
}
.social-links a[b-v0et72y5s4] {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: #333;
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
}
.social-links a:hover[b-v0et72y5s4] {
background: #e74c3c;
transform: translateY(-5px);
}
.social-links a.facebook:hover[b-v0et72y5s4] {
background-color: #3b5998;
}
.social-links a.twitter:hover[b-v0et72y5s4] {
background-color: #1da1f2;
}
.social-links a.instagram:hover[b-v0et72y5s4] {
background-color: #e1306c;
}
.social-links a.linkedin:hover[b-v0et72y5s4] {
background-color: #0077b5;
}
.social-links a.youtube:hover[b-v0et72y5s4] {
background-color: #ff0000;
}
.footer-bottom[b-v0et72y5s4] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p[b-v0et72y5s4] {
color: #aaa;
margin: 0;
font-size: 14px;
}
.footer-bottom p strong[b-v0et72y5s4] {
color: #e74c3c;
}
.payment-methods[b-v0et72y5s4] {
display: flex;
gap: 15px;
}
.payment-methods img[b-v0et72y5s4] {
height: 30px;
}
.footer-bottom-links[b-v0et72y5s4] {
display: flex;
gap: 20px;
}
.footer-bottom-links a[b-v0et72y5s4] {
color: #aaa;
font-size: 14px;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-bottom-links a:hover[b-v0et72y5s4] {
color: #e74c3c;
}
/* Responsive Design */
@media (max-width: 1200px) {
.why-choose-content[b-v0et72y5s4] {
flex-direction: column;
}
.why-choose-image[b-v0et72y5s4] {
margin-top: 60px;
}
.stats-card[b-v0et72y5s4] {
position: static;
transform: none;
margin-top: 30px;
width: 100%;
}
.footer-content[b-v0et72y5s4] {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-links[b-v0et72y5s4] {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
section[b-v0et72y5s4] {
padding: 40px 0;
}
.section-header h2[b-v0et72y5s4] {
font-size: 24px;
}
.app-content[b-v0et72y5s4] {
flex-direction: column;
text-align: center;
}
.app-features[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.app-buttons[b-v0et72y5s4] {
justify-content: center;
}
.app-info h2[b-v0et72y5s4] {
font-size: 28px;
}
.services-grid[b-v0et72y5s4],
.benefits-grid[b-v0et72y5s4],
.reviews-slider[b-v0et72y5s4],
.operators-grid[b-v0et72y5s4],
.routes-grid[b-v0et72y5s4],
.offers-grid[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.why-choose-text h2[b-v0et72y5s4] {
font-size: 28px;
}
.why-choose-text .subtitle[b-v0et72y5s4] {
font-size: 16px;
}
.benefits-grid[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.stats-card[b-v0et72y5s4] {
flex-direction: column;
gap: 20px;
}
.cta-button[b-v0et72y5s4] {
width: 100%;
text-align: center;
}
.footer-links[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.footer-bottom[b-v0et72y5s4] {
flex-direction: column;
gap: 20px;
text-align: center;
}
}
.assured-section[b-v0et72y5s4] {
padding: 60px 0;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
position: relative;
overflow: hidden;
}
.assured-section[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('images/pattern.png') repeat;
opacity: 0.1;
}
.assured-content[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 40px;
position: relative;
z-index: 1;
}
.assured-info[b-v0et72y5s4] {
flex: 1;
color: white;
}
.assured-badge[b-v0et72y5s4] {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 30px;
margin-bottom: 30px;
}
.assured-badge img[b-v0et72y5s4] {
width: 24px;
height: 24px;
}
.assured-badge span[b-v0et72y5s4] {
font-weight: 600;
font-size: 16px;
}
.assured-features[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 30px;
}
.feature-item[b-v0et72y5s4] {
display: flex;
align-items: flex-start;
gap: 15px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
transition: all 0.3s ease;
}
.feature-item:hover[b-v0et72y5s4] {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
}
.feature-item i[b-v0et72y5s4] {
font-size: 24px;
color: #ffd700;
}
.feature-text h4[b-v0et72y5s4] {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: 600;
}
.feature-text p[b-v0et72y5s4] {
margin: 0;
font-size: 14px;
opacity: 0.9;
}
.read-more-btn[b-v0et72y5s4] {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffd700;
color: #1e3c72;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.read-more-btn:hover[b-v0et72y5s4] {
background: #ffed4a;
transform: translateY(-2px);
}
.assured-image[b-v0et72y5s4] {
flex: 1;
position: relative;
display: flex;
justify-content: center;
}
.assured-image img[b-v0et72y5s4] {
max-width: 100%;
height: auto;
}
.assured-image .shield-image[b-v0et72y5s4] {
max-width: 300px;
height: auto;
filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
}
.floating-coins[b-v0et72y5s4] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
.coin[b-v0et72y5s4] {
position: absolute;
width: 48px;
height: 48px;
animation: float-b-v0et72y5s4 3s ease-in-out infinite;
}
.coin img[b-v0et72y5s4] {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
animation: rotate-b-v0et72y5s4 6s linear infinite;
}
.coin-1[b-v0et72y5s4] {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.coin-2[b-v0et72y5s4] {
top: 40%;
right: 20%;
animation-delay: 0.5s;
}
.coin-3[b-v0et72y5s4] {
bottom: 30%;
left: 25%;
animation-delay: 1s;
}
.coin-4[b-v0et72y5s4] {
top: 30%;
right: 25%;
animation-delay: 1.5s;
}
.coin-5[b-v0et72y5s4] {
bottom: 40%;
right: 15%;
animation-delay: 2s;
}
@keyframes float-b-v0et72y5s4 {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
@keyframes rotate-b-v0et72y5s4 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Modal Styles */
.assured-modal-content[b-v0et72y5s4] {
padding: 20px;
}
.assured-modal-header[b-v0et72y5s4] {
text-align: center;
margin-bottom: 30px;
}
.assured-modal-header img[b-v0et72y5s4] {
width: 72px !important;
height: 72px !important;
margin-bottom: 15px;
}
.assured-modal-header h3[b-v0et72y5s4] {
font-size: 24px;
color: #333;
margin: 0;
}
.benefits-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.benefit-item[b-v0et72y5s4] {
text-align: center;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
}
.benefit-item i[b-v0et72y5s4] {
font-size: 32px;
color: #1e3c72;
margin-bottom: 15px;
}
.benefit-item h4[b-v0et72y5s4] {
font-size: 18px;
color: #333;
margin: 0 0 5px 0;
}
.benefit-item p[b-v0et72y5s4] {
font-size: 14px;
color: #666;
margin: 0;
}
.terms-section[b-v0et72y5s4] {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
}
.terms-section h4[b-v0et72y5s4] {
font-size: 20px;
color: #333;
margin: 0 0 15px 0;
}
.terms-content[b-v0et72y5s4] {
max-height: 300px;
overflow-y: auto;
padding-right: 15px;
}
.terms-content h5[b-v0et72y5s4] {
font-size: 16px;
color: #333;
margin: 0 0 10px 0;
}
.terms-content ol[b-v0et72y5s4] {
padding-left: 20px;
margin: 0;
}
.terms-content li[b-v0et72y5s4] {
margin-bottom: 10px;
color: #666;
font-size: 14px;
line-height: 1.5;
}
.terms-content ul[b-v0et72y5s4] {
padding-left: 20px;
margin: 10px 0;
}
@media (max-width: 992px) {
.assured-content[b-v0et72y5s4] {
flex-direction: column;
}
.assured-image[b-v0et72y5s4] {
order: -1;
}
.assured-features[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.benefits-grid[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.assured-section[b-v0et72y5s4] {
padding: 40px 0;
}
.assured-badge[b-v0et72y5s4] {
margin-bottom: 20px;
}
.feature-item[b-v0et72y5s4] {
padding: 15px;
}
.feature-text h4[b-v0et72y5s4] {
font-size: 14px;
}
.feature-text p[b-v0et72y5s4] {
font-size: 12px;
}
}
.new-footer[b-v0et72y5s4] {
background: linear-gradient(to bottom, #1a1a1a, #121212);
color: white;
padding: 60px 0 30px;
}
.footer-top[b-v0et72y5s4] {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-links-container[b-v0et72y5s4] {
padding-right: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-logo[b-v0et72y5s4] {
width: 60px;
height: 60px;
margin-bottom: 30px;
filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.5));
transition: all 0.3s ease;
}
.footer-logo:hover[b-v0et72y5s4] {
transform: scale(1.1);
filter: drop-shadow(0 0 15px rgba(255, 107, 107, 0.7));
}
.footer-about h3[b-v0et72y5s4] {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer-about p[b-v0et72y5s4] {
color: #999;
margin-bottom: 15px;
line-height: 1.6;
font-size: 14px;
}
.footer-contact-section[b-v0et72y5s4] {
padding: 30px 0;
background: rgba(255, 255, 255, 0.03);
margin-bottom: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-container[b-v0et72y5s4] {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.contact-item[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 15px;
color: #bbb;
background: rgba(255, 255, 255, 0.05);
padding: 12px 20px;
border-radius: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
min-width: 250px;
}
.contact-item[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(255, 142, 83, 0.1));
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.contact-item:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.contact-item:hover[b-v0et72y5s4]::before {
transform: scaleX(1);
transform-origin: left;
}
.contact-item i[b-v0et72y5s4] {
color: #FF6B6B;
font-size: 20px;
transition: transform 0.3s ease;
}
.contact-item:hover i[b-v0et72y5s4] {
transform: scale(1.2);
}
.social-links[b-v0et72y5s4] {
display: flex;
gap: 15px;
margin-top: 25px;
flex-wrap: wrap;
}
.social-icon[b-v0et72y5s4] {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.social-icon[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 107, 107, 0.8), rgba(255, 142, 83, 0.8));
z-index: 0;
opacity: 0;
transform: scale(0);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.social-icon i[b-v0et72y5s4] {
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
.social-icon:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
.social-icon:hover[b-v0et72y5s4]::before {
opacity: 1;
transform: scale(1.5);
}
.social-icon:hover i[b-v0et72y5s4] {
transform: scale(1.2);
}
.social-icon.facebook:hover[b-v0et72y5s4] {
background: #1877f2;
}
.social-icon.twitter:hover[b-v0et72y5s4] {
background: #1da1f2;
}
.social-icon.instagram:hover[b-v0et72y5s4] {
background: #e4405f;
}
.social-icon.linkedin:hover[b-v0et72y5s4] {
background: #0077b5;
}
.social-icon.youtube:hover[b-v0et72y5s4] {
background: #ff0000;
}
.footer-links-wrapper[b-v0et72y5s4] {
border-left: 2px solid rgba(255, 107, 107, 0.3);
padding-left: 40px;
position: relative;
}
.footer-links-wrapper[b-v0et72y5s4]::before {
content: '';
position: absolute;
left: -1px;
top: 0;
height: 100%;
width: 2px;
background: linear-gradient(to bottom, rgba(255, 107, 107, 0.7), rgba(255, 142, 83, 0.7));
transform: scaleY(0.3);
transform-origin: top;
transition: transform 0.5s ease;
}
.footer-links-wrapper:hover[b-v0et72y5s4]::before {
transform: scaleY(1);
}
.footer-tabs[b-v0et72y5s4] {
display: flex;
gap: 20px;
margin-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 107, 107, 0.5) rgba(255, 255, 255, 0.1);
}
.footer-tabs[b-v0et72y5s4]::-webkit-scrollbar {
height: 5px;
}
.footer-tabs[b-v0et72y5s4]::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.footer-tabs[b-v0et72y5s4]::-webkit-scrollbar-thumb {
background: rgba(255, 107, 107, 0.5);
border-radius: 10px;
}
.tab[b-v0et72y5s4] {
color: #bbb;
cursor: pointer;
padding: 10px 15px;
position: relative;
transition: all 0.3s ease;
border-radius: 20px;
white-space: nowrap;
background: rgba(255, 255, 255, 0.05);
}
.tab:hover[b-v0et72y5s4] {
background: rgba(255, 107, 107, 0.2);
}
.tab.active[b-v0et72y5s4] {
background: linear-gradient(45deg, rgba(255, 107, 107, 0.3), rgba(255, 142, 83, 0.3));
color: white;
}
.tab[b-v0et72y5s4]::after {
content: '';
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.tab:hover[b-v0et72y5s4] {
color: white;
}
.tab.active[b-v0et72y5s4] {
color: white;
}
.tab.active[b-v0et72y5s4]::after {
transform: scaleX(1);
}
.footer-routes[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
animation: fadeIn-b-v0et72y5s4 0.5s ease-in-out;
}
@keyframes fadeIn-b-v0et72y5s4 {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.routes-column a[b-v0et72y5s4] {
display: block;
color: #bbb;
text-decoration: none;
margin-bottom: 15px;
transition: all 0.3s ease;
padding: 8px 12px;
border-radius: 8px;
position: relative;
overflow: hidden;
z-index: 1;
}
.routes-column a[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(255, 142, 83, 0.1));
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.routes-column a:hover[b-v0et72y5s4] {
color: white;
transform: translateX(5px);
}
.routes-column a:hover[b-v0et72y5s4]::before {
transform: scaleX(1);
transform-origin: left;
}
.footer-bottom[b-v0et72y5s4] {
padding: 20px 0;
text-align: center;
background: rgba(0, 0, 0, 0.3);
color: #bbb;
position: relative;
}
.footer-bottom[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 107, 107, 0.5), rgba(255, 142, 83, 0.5), transparent);
}
.footer-info[b-v0et72y5s4] {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
font-size: 14px;
padding: 10px 0;
position: relative;
z-index: 1;
}
.footer-info a[b-v0et72y5s4] {
color: #bbb;
text-decoration: none;
transition: all 0.3s ease;
padding: 5px 10px;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.footer-info a[b-v0et72y5s4]::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, rgba(255, 107, 107, 0.7), rgba(255, 142, 83, 0.7));
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.footer-info a:hover[b-v0et72y5s4] {
color: white;
}
.footer-info a:hover[b-v0et72y5s4]::before {
transform: scaleX(1);
transform-origin: left;
}
@media (max-width: 1024px) {
.footer-top[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.footer-about[b-v0et72y5s4] {
padding-right: 0;
text-align: center;
}
.footer-contact[b-v0et72y5s4] {
justify-content: center;
}
.social-links[b-v0et72y5s4] {
justify-content: center;
}
.footer-links-wrapper[b-v0et72y5s4] {
border-left: none;
padding-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 40px;
}
}
@media (max-width: 768px) {
.new-footer[b-v0et72y5s4] {
padding: 40px 0 20px;
}
.footer-tabs[b-v0et72y5s4] {
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding-bottom: 15px;
}
.tab[b-v0et72y5s4] {
padding: 8px 12px;
font-size: 14px;
}
.footer-routes[b-v0et72y5s4] {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.routes-column a[b-v0et72y5s4] {
font-size: 14px;
margin-bottom: 10px;
padding: 6px 10px;
}
.contact-container[b-v0et72y5s4] {
flex-direction: column;
align-items: center;
gap: 15px;
}
.contact-item[b-v0et72y5s4] {
width: 90%;
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.footer-routes[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.footer-info[b-v0et72y5s4] {
flex-direction: column;
gap: 15px;
}
.footer-about h3[b-v0et72y5s4] {
font-size: 20px;
}
.social-links[b-v0et72y5s4] {
gap: 10px;
}
.social-icon[b-v0et72y5s4] {
width: 40px;
height: 40px;
}
.tab[b-v0et72y5s4] {
font-size: 12px;
padding: 6px 10px;
}
.contact-item[b-v0et72y5s4] {
width: 100%;
padding: 10px 15px;
min-width: auto;
}
.contact-item i[b-v0et72y5s4] {
font-size: 18px;
}
.contact-item span[b-v0et72y5s4] {
font-size: 13px;
}
.footer-contact-section[b-v0et72y5s4] {
padding: 20px 0;
}
}
/* Stats Section */
.stats-section[b-v0et72y5s4] {
padding: 80px 0;
background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
position: relative;
overflow: hidden;
}
.stats-section[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.1;
}
.stats-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
position: relative;
z-index: 1;
}
.stat-item[b-v0et72y5s4] {
text-align: center;
color: white;
padding: 30px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.stat-item:hover[b-v0et72y5s4] {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.2);
}
.stat-number[b-v0et72y5s4] {
font-size: 3rem;
font-weight: 700;
margin-bottom: 15px;
background: linear-gradient(45deg, #fff, #e6e9ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label[b-v0et72y5s4] {
font-size: 1.1rem;
opacity: 0.9;
}
@media (max-width: 768px) {
.stats-grid[b-v0et72y5s4] {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-item:nth-child(2)[b-v0et72y5s4]::after {
display: none;
}
}
@media (max-width: 480px) {
.stats-grid[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.stat-item[b-v0et72y5s4]::after {
display: none;
}
.stat-number[b-v0et72y5s4] {
font-size: 2rem;
}
}
/* FAQ Section */
.faq-section[b-v0et72y5s4] {
padding: 80px 0;
background: linear-gradient(135deg, #f6f9fc 0%, #f1f4f8 100%);
}
.faq-section h2[b-v0et72y5s4] {
font-size: 32px;
font-weight: 700;
text-align: center;
margin-bottom: 50px;
background: linear-gradient(45deg, #2D3436, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.faq-container[b-v0et72y5s4] {
max-width: 900px;
margin: 0 auto;
}
.faq-container .faq-item:nth-child(n+5)[b-v0et72y5s4] {
display: none;
}
.faq-container.show-all .faq-item:nth-child(n+5)[b-v0et72y5s4] {
display: block;
}
.faq-item[b-v0et72y5s4] {
background: white;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
overflow: hidden;
}
.faq-item:hover[b-v0et72y5s4] {
transform: translateX(5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.question[b-v0et72y5s4] {
padding: 25px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: white;
transition: all 0.3s ease;
}
.faq-item.expanded .question[b-v0et72y5s4] {
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
}
.question i[b-v0et72y5s4] {
font-size: 24px;
transition: all 0.3s ease;
}
.faq-item.expanded .question i[b-v0et72y5s4] {
transform: rotate(180deg);
color: white;
}
.answer[b-v0et72y5s4] {
padding: 0 25px 25px;
color: #666;
line-height: 1.8;
}
.answer p[b-v0et72y5s4] {
margin: 0;
}
.faq-button[b-v0et72y5s4] {
text-align: center;
margin-top: 40px;
}
.view-all-faqs[b-v0et72y5s4], .hide-faqs[b-v0et72y5s4] {
padding: 12px 30px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}
.view-all-faqs:hover[b-v0et72y5s4] {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}
.hide-faqs[b-v0et72y5s4] {
background: linear-gradient(45deg, #2D3436, #000000);
}
.hide-faqs:hover[b-v0et72y5s4] {
background: #eeeeee;
color: #333;
}
@media (max-width: 768px) {
.faq-section[b-v0et72y5s4] {
padding: 40px 20px;
}
.question[b-v0et72y5s4] {
font-size: 14px;
padding: 15px 0;
}
.answer[b-v0et72y5s4] {
font-size: 13px;
}
.faq-button[b-v0et72y5s4] {
text-align: center;
}
}
.why-choose-section[b-v0et72y5s4] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #f1f4f8 100%);
position: relative;
overflow: hidden;
}
.why-choose-section[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
opacity: 0.1;
}
.why-choose-section .section-header[b-v0et72y5s4] {
text-align: center;
margin-bottom: 60px;
}
.header-content[b-v0et72y5s4] {
max-width: 700px;
margin: 0 auto;
}
.header-content h2[b-v0et72y5s4] {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #333;
line-height: 1.2;
}
.header-content .highlight[b-v0et72y5s4] {
color: #FF6B6B;
}
.header-content p[b-v0et72y5s4] {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
}
.features-grid[b-v0et72y5s4] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.feature-card[b-v0et72y5s4] {
background: white;
border-radius: 20px;
padding: 40px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
display: flex;
gap: 25px;
align-items: flex-start;
}
.feature-card:hover[b-v0et72y5s4] {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.feature-icon[b-v0et72y5s4] {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: white;
position: relative;
overflow: hidden;
}
.feature-icon[b-v0et72y5s4]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: brightness(1.2);
transition: transform 0.3s ease;
transform-origin: right;
}
.feature-card:hover .feature-icon[b-v0et72y5s4]::before {
transform: scaleX(1.5) rotate(15deg);
}
.feature-icon.safety[b-v0et72y5s4] {
background: linear-gradient(45deg, #00b09b, #96c93d);
}
.feature-icon.punctuality[b-v0et72y5s4] {
background: linear-gradient(45deg, #4facfe, #00f2fe);
}
.feature-icon.comfort[b-v0et72y5s4] {
background: linear-gradient(45deg, #ff6b6b, #ff8e53);
}
.feature-icon.support[b-v0et72y5s4] {
background: linear-gradient(45deg, #7f7fd5, #86a8e7);
}
.feature-icon i[b-v0et72y5s4] {
position: relative;
z-index: 1;
}
.feature-content[b-v0et72y5s4] {
flex: 1;
}
.feature-content h3[b-v0et72y5s4] {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
white-space: nowrap;
}
.feature-content p[b-v0et72y5s4] {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.feature-list[b-v0et72y5s4] {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 10px;
color: #555;
margin-bottom: 0.75rem;
font-size: 0.95rem;
white-space: nowrap;
}
.feature-list li i[b-v0et72y5s4] {
color: #00b09b;
font-size: 1.1rem;
}
@media (max-width: 1200px) {
.features-grid[b-v0et72y5s4] {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.feature-card[b-v0et72y5s4] {
padding: 30px;
}
}
@media (max-width: 992px) {
.features-grid[b-v0et72y5s4] {
grid-template-columns: 1fr;
}
.feature-card[b-v0et72y5s4] {
flex-direction: row;
align-items: flex-start;
}
}
@media (max-width: 576px) {
.header-content h2[b-v0et72y5s4] {
font-size: 2rem;
}
.feature-card[b-v0et72y5s4] {
flex-direction: column;
padding: 25px;
text-align: center;
}
.feature-icon[b-v0et72y5s4] {
margin: 0 auto 20px;
}
.feature-content h3[b-v0et72y5s4] {
font-size: 1.3rem;
}
.feature-list li[b-v0et72y5s4] {
justify-content: center;
}
}
/* App Section Responsive Design */
@media (max-width: 768px) {
.app-section[b-v0et72y5s4] {
padding: 40px 20px !important;
}
.app-content[b-v0et72y5s4] {
flex-direction: column !important;
gap: 30px !important;
}
.app-info[b-v0et72y5s4] {
text-align: center !important;
order: 2 !important;
}
.app-image[b-v0et72y5s4] {
order: 1 !important;
}
.app-buttons[b-v0et72y5s4] {
flex-direction: column !important;
gap: 10px !important;
}
.app-store[b-v0et72y5s4], .play-store[b-v0et72y5s4] {
justify-content: center !important;
padding: 15px 20px !important;
}
.app-features[b-v0et72y5s4] {
flex-direction: column !important;
gap: 15px !important;
}
.feature[b-v0et72y5s4] {
flex-direction: row !important;
text-align: left !important;
}
.app-image img[b-v0et72y5s4] {
max-height: 300px !important;
}
}
@media (max-width: 480px) {
.app-section[b-v0et72y5s4] {
padding: 30px 15px !important;
}
.app-info h2[b-v0et72y5s4] {
font-size: 24px !important;
}
.app-info p[b-v0et72y5s4] {
font-size: 14px !important;
}
.app-buttons[b-v0et72y5s4] {
gap: 8px !important;
}
.app-store[b-v0et72y5s4], .play-store[b-v0et72y5s4] {
padding: 12px 16px !important;
}
.button-text strong[b-v0et72y5s4] {
font-size: 12px !important;
}
.button-text span[b-v0et72y5s4] {
font-size: 9px !important;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.hero-section[b-v0et72y5s4] {
padding: 30px 0 50px 0;
min-height: 400px;
}
.content-wrapper[b-v0et72y5s4] {
margin-top: -10px;
max-width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.title[b-v0et72y5s4] {
font-size: 28px;
margin-bottom: 12px;
margin-top: 0;
line-height: 1.2;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.search-box[b-v0et72y5s4] {
margin-top: 8px;
padding: 25px 16px;
}
.mobile-header-content[b-v0et72y5s4] {
padding: 8px 10px;
gap: 6px;
}
.route-info[b-v0et72y5s4] {
font-size: 13px;
}
.route-arrow[b-v0et72y5s4] {
font-size: 14px;
margin: 0 4px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-v0et72y5s4] {
font-size: 11px;
}
.date-badge[b-v0et72y5s4] {
padding: 3px 6px;
min-width: 45px;
max-width: 60px;
}
.date-day[b-v0et72y5s4] {
font-size: 8px;
}
.date-weekday[b-v0et72y5s4] {
font-size: 7px;
}
}
@media (max-width: 360px) {
.hero-section[b-v0et72y5s4] {
padding: 20px 0 40px 0;
min-height: 350px;
}
.content-wrapper[b-v0et72y5s4] {
margin-top: -5px;
max-width: 100%;
padding: 0 8px;
}
.title[b-v0et72y5s4] {
font-size: 24px;
margin-bottom: 10px;
line-height: 1.1;
}
.search-box[b-v0et72y5s4] {
margin-top: 6px;
padding: 20px 12px;
}
}
/* Footer Styles */
.footer[b-v0et72y5s4] {
background: #1a1a1a;
color: white;
padding: 40px 0 20px;
margin-top: 60px;
}
.footer-content[b-v0et72y5s4] {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-section h3[b-v0et72y5s4] {
color: #fff;
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
}
.footer-section h3[b-v0et72y5s4]::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: #dc3545;
border-radius: 2px;
}
.footer-section p[b-v0et72y5s4] {
color: #ccc;
line-height: 1.6;
margin-bottom: 20px;
}
.footer-section ul[b-v0et72y5s4] {
list-style: none;
padding: 0;
}
.footer-section ul li[b-v0et72y5s4] {
margin-bottom: 12px;
}
.footer-section ul li a[b-v0et72y5s4] {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover[b-v0et72y5s4] {
color: #dc3545;
}
.social-links[b-v0et72y5s4] {
display: flex;
gap: 15px;
}
.social-links a[b-v0et72y5s4] {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #333;
color: white;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
}
.social-links a:hover[b-v0et72y5s4] {
background: #dc3545;
transform: translateY(-2px);
}
.contact-info p[b-v0et72y5s4] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
color: #ccc;
}
.contact-info i[b-v0et72y5s4] {
color: #dc3545;
width: 20px;
}
.footer-bottom[b-v0et72y5s4] {
border-top: 1px solid #333;
margin-top: 40px;
padding-top: 20px;
}
.footer-bottom-content[b-v0et72y5s4] {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-bottom p[b-v0et72y5s4] {
color: #ccc;
margin: 0;
}
.footer-links[b-v0et72y5s4] {
display: flex;
gap: 20px;
}
.footer-links a[b-v0et72y5s4] {
color: #ccc;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover[b-v0et72y5s4] {
color: #dc3545;
}
/* Mobile Responsive Footer */
@media (max-width: 768px) {
.footer[b-v0et72y5s4] {
padding: 30px 0 15px;
}
.footer-content[b-v0et72y5s4] {
grid-template-columns: 1fr;
gap: 30px;
padding: 0 15px;
}
.footer-section h3[b-v0et72y5s4] {
font-size: 16px;
margin-bottom: 15px;
}
.footer-bottom-content[b-v0et72y5s4] {
flex-direction: column;
text-align: center;
gap: 15px;
}
.footer-links[b-v0et72y5s4] {
justify-content: center;
}
}
/* _content/HappyBus.Ux/Components/Pages/MobileSearchpage.razor.rz.scp.css */
.search-result[b-92591663pn] {
display: flex;
height: calc(100vh - 80px);
flex-direction: row;
margin: 0 auto;
overflow: hidden;
max-width: 100%;
gap: 10px;
}
.header[b-92591663pn] {
display: none;
}
.header[b-92591663pn] {
justify-content: space-between;
align-items: center;
padding: 5px;
border-bottom: 1px solid #e0e0e0;
background-color:white;
border-radius:5px;
}
@media screen and (max-width: 768px) {
.header[b-92591663pn] {
display: flex;
}
}
.left-section[b-92591663pn] {
display: flex;
align-items: center;
gap: 10px;
}
.back-arrow[b-92591663pn] {
font-size: 22px;
cursor: pointer;
}
.route[b-92591663pn] {
display: flex;
flex-direction: column;
}
.route-title[b-92591663pn] {
font-size: 16px;
font-weight: bold;
}
.route-title span[b-92591663pn] {
color: #555;
font-weight: normal;
}
.buses-count[b-92591663pn] {
font-size: 13px;
color: #777;
}
.right-section[b-92591663pn] {
background-color: #fde8e8;
border-radius: 20px;
padding: 5px 12px;
text-align: center;
}
.date[b-92591663pn] {
font-size: 14px;
font-weight: bold;
color: #000;
}
.day[b-92591663pn] {
font-size: 12px;
color: #777;
}
@media screen and (max-width: 768px) {
.desktop-only[b-92591663pn] {
display: none !important;
}
}
/* Mobile Header for Search Results */
.mobile-search-header[b-92591663pn] {
display: none;
background: #394560;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.mobile-header-content[b-92591663pn] {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
min-height: 60px;
}
.back-to-search-btn[b-92591663pn] {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.back-to-search-btn:hover[b-92591663pn] {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.mobile-search-info[b-92591663pn] {
flex: 1;
min-width: 0;
overflow: hidden;
}
.route-info[b-92591663pn] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
color: white;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.route-arrow[b-92591663pn] {
color: white;
font-size: 18px;
margin: 0 8px;
opacity: 1;
display: inline-block;
flex-shrink: 0;
font-weight: 600;
line-height: 1;
}
.from-city[b-92591663pn], .to-city[b-92591663pn] {
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bus-count[b-92591663pn] {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.date-badge[b-92591663pn] {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 6px 10px;
border-radius: 16px;
text-align: center;
min-width: 60px;
max-width: 80px;
display: flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.date-icon[b-92591663pn] {
font-size: 10px;
opacity: 0.9;
flex-shrink: 0;
}
.date-content[b-92591663pn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
overflow: hidden;
}
.date-day[b-92591663pn] {
font-size: 10px;
font-weight: 600;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.date-weekday[b-92591663pn] {
font-size: 9px;
font-weight: 500;
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* RedBus Style Mobile Filter Bar */
.mobile-filter-bar[b-92591663pn] {
padding: 16px 20px;
background: white;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e9ecef;
position: relative;
overflow: hidden;
}
.mobile-filter-bar[b-92591663pn]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #dc3545, #fd7e14, #20c997, #6f42c1);
animation: shimmer-b-92591663pn 3s ease-in-out infinite;
}
@keyframes shimmer-b-92591663pn {
0%, 100% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
}
.filter-options[b-92591663pn] {
display: flex;
gap: 12px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
padding: 4px 0;
scroll-behavior: smooth;
}
.filter-options[b-92591663pn]::-webkit-scrollbar {
display: none;
}
/* RedBus Style Filter Pills */
.filter-pill[b-92591663pn] {
background: white;
border: 1px solid #dee2e6;
border-radius: 20px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-width: fit-content;
position: relative;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.filter-pill[b-92591663pn]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.1), transparent);
transition: left 0.5s ease;
}
.filter-pill:hover[b-92591663pn]::before {
left: 100%;
}
.filter-pill:hover[b-92591663pn] {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.filter-pill.active[b-92591663pn] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
transform: translateY(-1px);
}
.filter-pill.active[b-92591663pn]::before {
display: none;
}
.filter-pill i[b-92591663pn] {
font-size: 12px;
transition: all 0.3s ease;
}
.filter-pill:hover i[b-92591663pn] {
transform: scale(1.1);
}
.filter-pill.active i[b-92591663pn] {
transform: scale(1.1);
}
.filter-pill span[b-92591663pn] {
font-size: 12px;
font-weight: 500;
}
.filter-count[b-92591663pn] {
color: #6c757d;
font-weight: 600;
font-size: 11px;
}
.filter-pill.active .filter-count[b-92591663pn] {
color: rgba(255, 255, 255, 0.8);
}
.show-filters-btn[b-92591663pn] {
background: #dc3545;
color: white;
border: none;
border-radius: 20px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
.show-filters-btn:hover[b-92591663pn] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}
.show-filters-btn i[b-92591663pn] {
font-size: 12px;
}
/* Mobile-specific improvements */
@media (max-width: 768px) {
.mobile-filter-bar[b-92591663pn] {
padding: 12px 16px;
gap: 12px;
}
.filter-pill[b-92591663pn] {
padding: 10px 14px;
font-size: 12px;
gap: 5px;
min-height: 40px;
}
.filter-pill i[b-92591663pn] {
font-size: 12px;
}
.filter-pill span[b-92591663pn] {
font-size: 11px;
}
.filter-count[b-92591663pn] {
font-size: 10px;
font-weight: 600;
}
.show-filters-btn[b-92591663pn] {
padding: 10px 16px;
font-size: 12px;
min-height: 40px;
}
.show-filters-btn i[b-92591663pn] {
font-size: 11px;
}
}
@media (max-width: 480px) {
.mobile-filter-bar[b-92591663pn] {
padding: 10px 12px;
gap: 10px;
}
.filter-pill[b-92591663pn] {
padding: 8px 12px;
font-size: 11px;
gap: 4px;
min-height: 36px;
}
.filter-pill i[b-92591663pn] {
font-size: 11px;
}
.filter-pill span[b-92591663pn] {
font-size: 10px;
}
.filter-count[b-92591663pn] {
font-size: 9px;
}
.show-filters-btn[b-92591663pn] {
padding: 8px 12px;
font-size: 11px;
min-height: 36px;
}
.show-filters-btn i[b-92591663pn] {
font-size: 10px;
}
}
/* Desktop only elements */
.desktop-only[b-92591663pn] {
display: block;
}
/* Desktop layout improvements */
@media (min-width: 769px) {
.search-results-layout[b-92591663pn] {
gap: 32px;
padding: 32px;
}
.filters-sidebar[b-92591663pn] {
width: 350px;
}
.results-main[b-92591663pn] {
flex: 1;
min-width: 0;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
padding: 24px;
}
}
/* Mobile only elements - hidden on desktop */
.mobile-filters-panel[b-92591663pn] {
display: none;
}
/* Hide elements when search results are shown */
.hide-on-search[b-92591663pn] {
display: none !important;
}
/* Mobile view when search results are shown */
@media (max-width: 768px) {
.hero-section[b-92591663pn] {
padding: 40px 0 60px 0;
min-height: 450px;
}
.content-wrapper[b-92591663pn] {
margin-top: -15px;
}
.title[b-92591663pn] {
font-size: 32px;
margin-bottom: 15px;
margin-top: 0;
}
.search-box[b-92591663pn] {
margin-top: 10px;
padding: 20px;
}
.mobile-search-header[b-92591663pn] {
display: block;
}
.mobile-filters-panel[b-92591663pn] {
display: block;
}
.mobile-header-content[b-92591663pn] {
padding: 12px 14px;
gap: 10px;
}
.route-info[b-92591663pn] {
font-size: 16px;
}
.route-arrow[b-92591663pn] {
font-size: 18px;
margin: 0 8px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-92591663pn] {
font-size: 14px;
}
.date-badge[b-92591663pn] {
padding: 4px 8px;
min-width: 50px;
max-width: 70px;
}
.date-day[b-92591663pn] {
font-size: 9px;
}
.date-weekday[b-92591663pn] {
font-size: 8px;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.hero-section[b-92591663pn] {
padding: 30px 0 50px 0;
min-height: 400px;
}
.content-wrapper[b-92591663pn] {
margin-top: -10px;
max-width: 95%;
padding: 0 15px;
}
.title[b-92591663pn] {
font-size: 28px;
margin-bottom: 12px;
margin-top: 0;
}
.search-box[b-92591663pn] {
margin-top: 8px;
padding: 16px;
}
.mobile-header-content[b-92591663pn] {
padding: 10px 12px;
gap: 8px;
}
.route-info[b-92591663pn] {
font-size: 15px;
}
.route-arrow[b-92591663pn] {
font-size: 16px;
margin: 0 6px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-92591663pn] {
font-size: 13px;
}
.date-badge[b-92591663pn] {
padding: 3px 6px;
min-width: 45px;
max-width: 60px;
}
.date-day[b-92591663pn] {
font-size: 8px;
}
.date-weekday[b-92591663pn] {
font-size: 7px;
}
.back-to-search-btn[b-92591663pn] {
width: 32px;
height: 32px;
font-size: 16px;
}
.mobile-filters-panel[b-92591663pn] {
display: block;
}
.hide-on-mobile[b-92591663pn] {
display: none !important;
}
.desktop-only[b-92591663pn] {
display: none !important;
}
.search-results-wrapper[b-92591663pn] {
margin-top: 0;
padding-top: 0;
}
.search-results-layout[b-92591663pn] {
padding: 4px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.mobile-filters-panel[b-92591663pn] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
display: block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
transform: translateY(100%);
border-radius: 16px 16px 0 0;
height: 75vh;
display: flex;
flex-direction: column;
}
.mobile-filters-panel.hide[b-92591663pn] {
transform: translateY(100%);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-filters-panel.show[b-92591663pn] {
transform: translateY(0);
opacity: 1;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Filter Modal Header */
.filter-modal-header[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #e9ecef;
background: white;
flex-shrink: 0;
}
.filter-modal-header h3[b-92591663pn] {
font-size: 16px;
font-weight: 700;
color: #333;
margin: 0;
}
.close-filter-btn[b-92591663pn] {
background: none;
border: none;
color: #666;
font-size: 18px;
cursor: pointer;
padding: 6px;
border-radius: 6px;
transition: all 0.3s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.close-filter-btn:hover[b-92591663pn] {
background: #f8f9fa;
color: #333;
}
/* Filter Modal Content - Two Column Layout */
.filter-modal-content[b-92591663pn] {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
}
/* Left Sidebar - Filter Categories */
.filter-categories[b-92591663pn] {
width: 40%;
background: #f8f9fa;
overflow: hidden;
border-right: 1px solid #e9ecef;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.filter-category[b-92591663pn] {
padding: 10px 14px;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 1px solid #e9ecef;
font-size: 12px;
color: #495057;
font-weight: 500;
flex-shrink: 0;
}
.filter-category:hover[b-92591663pn] {
background: #e9ecef;
}
.filter-category.active[b-92591663pn] {
background: white;
color: #dc3545;
font-weight: 600;
border-right: 3px solid #dc3545;
}
/* Right Panel - Filter Options */
.filter-options-panel[b-92591663pn] {
width: 60%;
background: white;
overflow: hidden;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.filter-option-item[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid #f8f9fa;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.filter-option-item:hover[b-92591663pn] {
background: #f8f9fa;
}
.filter-option-item.active[b-92591663pn] {
background: #fff3f3;
border-left: 3px solid #dc3545;
}
.filter-option-item.active .option-label[b-92591663pn] {
color: #dc3545;
font-weight: 600;
}
.filter-option-item.active .option-left i[b-92591663pn] {
color: #dc3545;
}
.option-left[b-92591663pn] {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.option-left i[b-92591663pn] {
font-size: 14px;
color: #6c757d;
width: 18px;
text-align: center;
}
.option-details[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 1px;
}
.option-time[b-92591663pn] {
font-size: 11px;
color: #6c757d;
font-weight: 500;
}
.option-label[b-92591663pn] {
font-size: 13px;
color: #333;
font-weight: 500;
}
.option-right[b-92591663pn] {
display: flex;
align-items: center;
gap: 10px;
}
.option-count[b-92591663pn] {
font-size: 11px;
color: #6c757d;
font-weight: 500;
}
.option-check[b-92591663pn] {
width: 16px;
height: 16px;
border: 2px solid #dee2e6;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.option-check.checked[b-92591663pn] {
background: #dc3545;
border-color: #dc3545;
}
.option-check.checked i[b-92591663pn] {
color: white;
font-size: 10px;
}
/* Radio Button Styles for Sort Options */
.option-radio[b-92591663pn] {
width: 18px;
height: 18px;
border: 2px solid #dee2e6;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
background: white;
}
.option-radio.checked[b-92591663pn] {
border-color: #dc3545;
background: #dc3545;
}
.radio-inner[b-92591663pn] {
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
/* Filter Modal Footer */
.filter-modal-footer[b-92591663pn] {
display: flex;
gap: 12px;
padding: 16px 20px;
border-top: 1px solid #e9ecef;
background: white;
flex-shrink: 0;
margin-top: auto;
}
.clear-all-btn[b-92591663pn] {
flex: 1;
background: white;
border: 2px solid #333;
color: #333;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.clear-all-btn:hover[b-92591663pn] {
background: #f8f9fa;
}
.apply-btn[b-92591663pn] {
flex: 1;
background: #dc3545;
border: 2px solid #dc3545;
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.apply-btn:hover[b-92591663pn] {
background: #c82333;
border-color: #c82333;
}
}
/* Responsive design for search results - Progressive scaling */
@media (max-width: 1024px) and (min-width: 769px) {
.search-results-layout[b-92591663pn] {
flex-direction: column;
gap: 20px;
padding: 16px;
max-width: 1000px;
margin: 0 auto;
}
.filters-sidebar[b-92591663pn] {
width: 100%;
}
.results-main[b-92591663pn] {
padding: 16px;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.search-results-layout[b-92591663pn] {
flex-direction: column;
gap: 16px;
padding: 12px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-92591663pn] {
width: 100%;
}
.results-main[b-92591663pn] {
padding: 12px;
width: 100%;
box-sizing: border-box;
}
}
/* Specific breakpoint for screens around 659px */
@media (max-width: 659px) and (min-width: 481px) {
.search-results-layout[b-92591663pn] {
flex-direction: column;
gap: 12px;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-92591663pn] {
width: 100%;
}
.results-main[b-92591663pn] {
padding: 10px;
width: 100%;
box-sizing: border-box;
}
}
/* Unified breakpoint for screens 321px to 480px */
@media (max-width: 480px) and (min-width: 321px) {
.search-results-layout[b-92591663pn] {
padding: 8px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
.results-main[b-92591663pn] {
padding: 8px;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
}
/* Responsive design for search results */
@media (max-width: 1024px) {
.search-results-layout[b-92591663pn] {
flex-direction: column;
gap: 20px;
}
.filters-sidebar[b-92591663pn] {
width: 100%;
}
}
/* Discount Offers Section Styles */
.discount-offers-section[b-92591663pn] {
padding: 40px 0;
background-color: #f0f8ff;
}
.section-header[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.section-header h2[b-92591663pn] {
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0;
}
.view-all[b-92591663pn] {
color: #FF6B6B;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
}
.view-all:hover[b-92591663pn] {
color: #FF8E53;
transform: translateX(2px);
}
/* About Section Styles */
.about-section[b-92591663pn] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.about-section[b-92591663pn]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://img.freepik.com/free-vector/abstract-wave-pattern-background_53876-115444.jpg');
background-size: cover;
opacity: 0.05;
z-index: 1;
}
.about-section .container[b-92591663pn] {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.about-section .section-header[b-92591663pn] {
text-align: center;
margin-bottom: 50px;
}
.about-section .section-header h2[b-92591663pn] {
font-size: 32px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.about-section .section-header h2[b-92591663pn]::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
border-radius: 3px;
}
.about-section .section-header p[b-92591663pn] {
font-size: 16px;
color: #666;
max-width: 700px;
margin: 15px auto 0;
}
.about-content[b-92591663pn] {
display: flex;
align-items: center;
gap: 50px;
}
.about-image[b-92591663pn] {
flex: 1;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.about-image:hover[b-92591663pn] {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.about-image img[b-92591663pn] {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.about-image:hover img[b-92591663pn] {
transform: scale(1.05);
}
.about-experience[b-92591663pn] {
position: absolute;
bottom: 30px;
left: 30px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-experience .years[b-92591663pn] {
font-size: 32px;
font-weight: 800;
line-height: 1;
}
.about-experience .text[b-92591663pn] {
font-size: 14px;
font-weight: 500;
}
.about-text[b-92591663pn] {
flex: 1;
}
.about-text p[b-92591663pn] {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.about-stats[b-92591663pn] {
display: flex;
justify-content: space-between;
margin: 40px 0;
}
/* Desktop Layout */
.desktop-layout[b-92591663pn] {
display: none;
min-height: 100vh;
background: #f8f9fa;
}
/* Desktop Search Section */
.desktop-search-section[b-92591663pn] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 24px 0;
}
.search-container[b-92591663pn] {
max-width: 2000px;
margin: 0 auto;
padding: 0 20px;
}
.route-info[b-92591663pn] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.route-display[b-92591663pn] {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 600;
color: #333;
}
.from-city[b-92591663pn], .to-city[b-92591663pn] {
color: #333;
font-weight: 700;
}
.route-display i[b-92591663pn] {
color: #dc3545;
font-size: 16px;
}
.bus-count[b-92591663pn] {
background: #dc3545;
color: white;
padding: 6px 12px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
}
.search-stats[b-92591663pn] {
background: #d4edda;
color: #155724;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
width: fit-content;
}
.search-stats i[b-92591663pn] {
color: #28a745;
font-size: 16px;
}
.search-form[b-92591663pn] {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Desktop Main Content */
.desktop-main-content[b-92591663pn] {
max-width: 1200px;
margin: 0 auto;
padding: 24px 20px;
display: flex;
gap: 24px;
min-height: calc(100vh - 300px);
}
/* Filters Sidebar */
.filters-sidebar[b-92591663pn] {
width: 280px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
height: fit-content;
position: sticky;
top: 120px;
}
.filters-header[b-92591663pn] {
padding: 20px 20px 16px 20px;
border-bottom: 1px solid #e9ecef;
}
.filters-header h3[b-92591663pn] {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #333;
}
.filter-options[b-92591663pn] {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-option[b-92591663pn] {
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.filter-option:hover[b-92591663pn] {
background: #f8f9fa;
border-color: #adb5bd;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.filter-option.active[b-92591663pn] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
.filter-option i[b-92591663pn] {
font-size: 16px;
flex-shrink: 0;
}
.filter-option span[b-92591663pn] {
font-size: 14px;
font-weight: 500;
}
.filter-count[b-92591663pn] {
color: #6c757d;
font-weight: 600;
font-size: 12px;
}
.filter-option.active .filter-count[b-92591663pn] {
color: rgba(255, 255, 255, 0.8);
}
/* Results Panel */
.results-panel[b-92591663pn] {
flex: 1;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
padding: 24px;
min-height: 600px;
}
.results-header[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: white;
border-bottom: 1px solid #e1e5e9;
margin-bottom: 8px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.results-header h2[b-92591663pn] {
font-size: 22px;
font-weight: 600;
color: #495057;
margin: 0 0 20px 0;
padding: 0;
border-bottom: 2px solid #e9ecef;
padding-bottom: 12px;
position: relative;
}
.results-header h2[b-92591663pn]::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: #007bff;
}
.sort-section[b-92591663pn] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
}
.sort-section span[b-92591663pn] {
font-size: 14px;
font-weight: 600;
color: #495057;
}
.sort-buttons[b-92591663pn] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
/* Bus Cards for Desktop */
.bus-cards[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 16px;
}
.bus-card[b-92591663pn] {
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.bus-card:hover[b-92591663pn] {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.card-header[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.operator-info[b-92591663pn] {
flex: 1;
}
.operator-name[b-92591663pn] {
font-size: 18px;
font-weight: 700;
color: #333;
margin: 0 0 6px 0;
}
.bus-type[b-92591663pn] {
font-size: 15px;
color: #6c757d;
margin: 0;
}
.rating-badge[b-92591663pn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: transparent;
color: #6c757d;
padding: 8px 12px;
border-radius: 8px;
min-width: 60px;
border: none;
}
.rating[b-92591663pn] {
font-size: 14px;
font-weight: 700;
color: #495057;
}
.rating-count[b-92591663pn] {
font-size: 12px;
opacity: 1;
color: #28a745;
font-weight: 600;
}
.card-body[b-92591663pn] {
margin-bottom: 16px;
}
.timing-section[b-92591663pn] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
/* Mobile Timing Section - Reduced Margin */
@media (max-width: 480px) {
.timing-section[b-92591663pn] {
margin-bottom: 6px;
}
}
.departure[b-92591663pn], .arrival[b-92591663pn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.time[b-92591663pn] {
font-size: 18px;
font-weight: 700;
color: #333;
}
.label[b-92591663pn] {
font-size: 11px;
color: #6c757d;
text-transform: uppercase;
font-weight: 500;
}
.duration[b-92591663pn] {
background: #f8f9fa;
color: #495057;
padding: 6px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
border: 1px solid #e9ecef;
}
.seats-info[b-92591663pn] {
font-size: 13px;
color: #6c757d;
text-align: center;
}
.card-footer[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px dashed #e9ecef;
}
.price-section[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Mobile Price Section - Reduced Gap */
@media (max-width: 480px) {
.price-section[b-92591663pn] {
gap: 2px;
}
}
.new-bus-tag[b-92591663pn] {
background: #e3f2fd;
color: #1976d2;
padding: 6px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
width: fit-content;
}
.price[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 1px;
}
.amount[b-92591663pn] {
font-size: 22px;
font-weight: 700;
color: #333;
}
.suffix[b-92591663pn] {
font-size: 14px;
color: #6c757d;
}
.view-seats-btn[b-92591663pn] {
background: #dc3545;
border: none;
color: white;
padding: 12px 18px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
.view-seats-btn:hover[b-92591663pn] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.view-seats-btn i[b-92591663pn] {
font-size: 12px;
}
/* Hide navbar when search results are shown - only on mobile */
@media (max-width: 1024px) {
body.search-results-active header[b-92591663pn] {
display: none !important;
}
}
/* Mobile Layout Styles */
.mobile-layout[b-92591663pn] {
display: none;
background: #f8f9fa;
min-height: 100vh;
}
/* Mobile Header */
.mobile-header[b-92591663pn] {
background: white;
color: #333;
padding: 16px 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e9ecef;
}
.header-content[b-92591663pn] {
display: flex;
align-items: center;
gap: 16px;
}
.back-btn[b-92591663pn] {
background: none;
border: none;
color: #333;
font-size: 20px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.back-btn:hover[b-92591663pn] {
background: rgba(0, 0, 0, 0.05);
}
.route-info[b-92591663pn] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
flex: 1;
}
.route-info i[b-92591663pn] {
color: #dc3545;
font-size: 16px;
}
.date-info[b-92591663pn] {
display: flex;
align-items: center;
gap: 8px;
background: #f8f9fa;
padding: 8px 12px;
border-radius: 12px;
font-size: 14px;
color: #333;
}
.date-details[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 2px;
}
.date-day[b-92591663pn] {
font-weight: 600;
font-size: 14px;
color: #333;
}
.date-weekday[b-92591663pn] {
font-size: 12px;
color: #666;
}
/* Bus Count Bar */
.bus-count-bar[b-92591663pn] {
background: white;
padding: 12px 20px;
border-bottom: 1px solid #e9ecef;
font-size: 18px;
font-weight: 700;
color: #333;
}
/* Filters Bar */
.filters-bar[b-92591663pn] {
background: white;
padding: 16px 20px;
display: flex;
gap: 12px;
overflow-x: auto;
border-bottom: 1px solid #e9ecef;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filters-bar[b-92591663pn]::-webkit-scrollbar {
display: none;
}
.filter-btn[b-92591663pn] {
background: white;
border: 2px solid #e9ecef;
border-radius: 20px;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
min-width: fit-content;
}
.filter-btn i[b-92591663pn] {
font-size: 16px;
width: 16px;
text-align: center;
}
.filter-btn:hover[b-92591663pn] {
border-color: #dc3545;
color: #dc3545;
transform: translateY(-1px);
}
.filter-btn.primary[b-92591663pn] {
background: #dc3545;
border-color: #dc3545;
color: white;
}
.filter-btn.active[b-92591663pn] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
/* Smart Filters Panel */
.smart-filters-panel[b-92591663pn] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 20px;
}
.filters-header[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.header-left[b-92591663pn] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
color: #333;
}
.close-btn[b-92591663pn] {
background: none;
border: none;
color: #666;
font-size: 20px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.close-btn:hover[b-92591663pn] {
background: #f8f9fa;
color: #333;
}
.search-stats-banner[b-92591663pn] {
background: #d4edda;
color: #155724;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.filter-options[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-option[b-92591663pn] {
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 16px;
font-size: 16px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.filter-option:hover[b-92591663pn] {
border-color: #dc3545;
color: #dc3545;
transform: translateY(-1px);
}
.filter-option.active[b-92591663pn] {
background: #dc3545;
border-color: #dc3545;
color: white;
}
.filter-left[b-92591663pn] {
display: flex;
align-items: center;
gap: 12px;
}
.filter-count[b-92591663pn] {
font-size: 14px;
opacity: 0.8;
}
/* Results Section */
.results-section[b-92591663pn] {
padding: 20px;
}
.results-header[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
}
.results-count[b-92591663pn] {
font-size: 16px;
font-weight: 600;
color: #333;
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
padding: 8px 16px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
/* Removed bus emoji from results count */
.count-number[b-92591663pn] {
font-size: 24px;
font-weight: 700;
color: #28a745;
}
.count-text[b-92591663pn] {
color: #6c757d;
}
.sort-section[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 16px;
background: white;
padding: 20px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
width: 100%;
}
.sort-label[b-92591663pn] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.sort-label[b-92591663pn]::before {
content: "📊";
font-size: 20px;
}
.sort-buttons[b-92591663pn] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
width: 100%;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
/* Bus Cards */
.bus-cards[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Mobile Bus Cards - Reduced Gap */
@media (max-width: 768px) {
.bus-cards[b-92591663pn] {
gap: 8px;
}
}
@media (max-width: 480px) {
.bus-cards[b-92591663pn] {
gap: 4px;
}
}
.bus-card[b-92591663pn] {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
/* Mobile Bus Card - Reduced Padding */
@media (max-width: 768px) {
.bus-card[b-92591663pn] {
padding: 16px;
border-radius: 12px;
}
}
@media (max-width: 480px) {
.bus-card[b-92591663pn] {
padding: 8px;
border-radius: 8px;
}
}
/* Mobile Card Sections - Reduced Margins */
@media (max-width: 768px) {
.card-header[b-92591663pn] {
margin-bottom: 12px;
}
.card-body[b-92591663pn] {
margin-bottom: 12px;
}
}
@media (max-width: 480px) {
.card-header[b-92591663pn] {
margin-bottom: 6px;
}
.card-body[b-92591663pn] {
margin-bottom: 6px;
}
}
.bus-card:hover[b-92591663pn] {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.card-header[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.operator-info[b-92591663pn] {
flex: 1;
}
.operator-name[b-92591663pn] {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 4px;
}
.bus-type[b-92591663pn] {
font-size: 14px;
color: #666;
}
.rating-badge[b-92591663pn] {
background: transparent;
color: #6c757d;
padding: 8px 12px;
border-radius: 8px;
text-align: center;
min-width: 60px;
}
.rating[b-92591663pn] {
font-size: 14px;
font-weight: 700;
color: #495057;
}
.rating-count[b-92591663pn] {
font-size: 12px;
opacity: 1;
color: #28a745;
font-weight: 600;
}
.card-body[b-92591663pn] {
margin-bottom: 16px;
}
.timing-section[b-92591663pn] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.departure[b-92591663pn], .arrival[b-92591663pn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.time[b-92591663pn] {
font-size: 20px;
font-weight: 700;
color: #333;
}
.label[b-92591663pn] {
font-size: 12px;
color: #666;
text-transform: uppercase;
font-weight: 500;
}
.duration[b-92591663pn] {
background: #f8f9fa;
color: #495057;
padding: 6px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
border: 1px solid #e9ecef;
}
.seats-info[b-92591663pn] {
text-align: center;
font-size: 14px;
color: #666;
margin-top: 8px;
}
/* Mobile Seats Info - Reduced Margin */
@media (max-width: 480px) {
.seats-info[b-92591663pn] {
margin-top: 4px;
font-size: 13px;
}
}
.card-footer[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid #e9ecef;
}
/* Mobile Card Footer - Reduced Padding */
@media (max-width: 480px) {
.card-footer[b-92591663pn] {
padding-top: 8px;
}
}
.price-section[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 4px;
}
.new-bus-tag[b-92591663pn] {
background: #e3f2fd;
color: #1976d2;
padding: 4px 8px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
width: fit-content;
}
.price[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 2px;
}
.amount[b-92591663pn] {
font-size: 20px;
font-weight: 700;
color: #333;
}
.suffix[b-92591663pn] {
font-size: 12px;
color: #666;
}
.view-seats-btn[b-92591663pn] {
background: #dc3545;
border: none;
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
/* Mobile View Seats Button - Reduced Padding */
@media (max-width: 480px) {
.view-seats-btn[b-92591663pn] {
padding: 8px 16px;
font-size: 13px;
gap: 4px;
}
}
.view-seats-btn:hover[b-92591663pn] {
background: #c82333;
transform: translateY(-1px);
}
/* Desktop Layout */
.desktop-layout[b-92591663pn] {
display: block;
}
/* Responsive Design */
@media (max-width: 1024px) {
.desktop-layout[b-92591663pn] {
display: none;
}
.mobile-layout[b-92591663pn] {
display: block;
}
}
@media (max-width: 768px) {
.mobile-header[b-92591663pn] {
padding: 14px 18px;
}
.route-info[b-92591663pn] {
font-size: 18px;
}
.date-info[b-92591663pn] {
padding: 8px 12px;
font-size: 15px;
}
.bus-count-bar[b-92591663pn] {
padding: 14px 20px;
font-size: 20px;
}
.filters-bar[b-92591663pn] {
padding: 14px 18px;
gap: 12px;
}
.filter-btn[b-92591663pn] {
padding: 10px 16px;
font-size: 15px;
}
.smart-filters-panel[b-92591663pn] {
padding: 18px;
}
.filter-option[b-92591663pn] {
padding: 16px;
font-size: 17px;
}
.results-section[b-92591663pn] {
padding: 18px;
}
.results-count[b-92591663pn] {
font-size: 20px;
padding: 10px 16px;
border-radius: 6px;
margin-bottom: 16px;
}
.sort-section[b-92591663pn] {
padding: 18px;
border-radius: 12px;
gap: 14px;
}
.sort-label[b-92591663pn] {
font-size: 16px;
}
.sort-buttons[b-92591663pn] {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
.bus-card[b-92591663pn] {
padding: 18px;
}
.operator-name[b-92591663pn] {
font-size: 18px;
}
.time[b-92591663pn] {
font-size: 20px;
}
.amount[b-92591663pn] {
font-size: 20px;
}
}
@media (max-width: 480px) {
.mobile-header[b-92591663pn] {
padding: 12px 14px;
}
.header-content[b-92591663pn] {
gap: 14px;
}
.route-info[b-92591663pn] {
font-size: 17px;
}
.date-info[b-92591663pn] {
padding: 7px 10px;
font-size: 14px;
}
.bus-count-bar[b-92591663pn] {
padding: 12px 16px;
font-size: 19px;
}
.filters-bar[b-92591663pn] {
padding: 12px 14px;
gap: 10px;
}
.filter-btn[b-92591663pn] {
padding: 8px 14px;
font-size: 14px;
}
.smart-filters-panel[b-92591663pn] {
padding: 14px;
}
.filter-option[b-92591663pn] {
padding: 14px;
font-size: 16px;
}
.results-section[b-92591663pn] {
padding: 14px;
}
.results-count[b-92591663pn] {
font-size: 18px;
padding: 8px 12px;
border-radius: 4px;
margin-bottom: 12px;
}
.sort-section[b-92591663pn] {
padding: 16px;
border-radius: 10px;
gap: 12px;
}
.sort-label[b-92591663pn] {
font-size: 15px;
}
.sort-buttons[b-92591663pn] {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
.bus-card[b-92591663pn] {
padding: 14px;
}
.operator-name[b-92591663pn] {
font-size: 17px;
}
.time[b-92591663pn] {
font-size: 18px;
}
.amount[b-92591663pn] {
font-size: 18px;
}
.view-seats-btn[b-92591663pn] {
padding: 12px 18px;
font-size: 15px;
}
}
@media (max-width: 360px) {
.mobile-header[b-92591663pn] {
padding: 10px 12px;
}
.route-info[b-92591663pn] {
font-size: 16px;
}
.bus-count[b-92591663pn] {
font-size: 13px;
}
.date-info[b-92591663pn] {
padding: 6px 8px;
font-size: 13px;
}
.bus-count-bar[b-92591663pn] {
padding: 10px 14px;
font-size: 18px;
}
.results-count[b-92591663pn] {
font-size: 18px;
padding: 10px 14px;
border-radius: 6px;
margin-bottom: 10px;
}
.sort-section[b-92591663pn] {
padding: 12px;
border-radius: 6px;
gap: 6px;
}
.sort-label[b-92591663pn] {
font-size: 14px;
}
/* OLD SORT BUTTONS REMOVED - Using new dropdown style */
.filter-btn[b-92591663pn] {
padding: 6px 10px;
font-size: 13px;
}
.operator-name[b-92591663pn] {
font-size: 16px;
}
.time[b-92591663pn] {
font-size: 17px;
}
.amount[b-92591663pn] {
font-size: 17px;
}
.view-seats-btn[b-92591663pn] {
padding: 10px 14px;
font-size: 14px;
}
}
/* New 2-Row Layout */
.card-row-1[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.bus-info[b-92591663pn] {
flex: 1;
}
.time-info[b-92591663pn] {
display: flex;
align-items: center;
gap: 12px;
margin: 0 20px;
}
.departure-time[b-92591663pn], .arrival-time[b-92591663pn] {
font-size: 20px;
font-weight: 700;
color: #333;
}
.card-row-2[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid #e9ecef;
}
/* Modern Sort Dropdown Styles */
.sort-dropdown[b-92591663pn] {
position: relative;
display: inline-block;
}
.sort-dropdown-btn[b-92591663pn] {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
transition: all 0.3s ease;
min-width: 140px;
}
.sort-dropdown-btn:hover[b-92591663pn] {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.sort-dropdown-btn:active[b-92591663pn] {
transform: translateY(0);
}
.sort-dropdown-menu[b-92591663pn] {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 1px solid #e1e5e9;
min-width: 200px;
z-index: 1000;
overflow: hidden;
animation: slideDown-b-92591663pn 0.3s ease;
}
@keyframes slideDown-b-92591663pn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sort-option[b-92591663pn] {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #f0f0f0;
color: #333;
font-size: 14px;
}
.sort-option:last-child[b-92591663pn] {
border-bottom: none;
}
.sort-option:hover[b-92591663pn] {
background: #f8f9ff;
color: #667eea;
}
.sort-option.active[b-92591663pn] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.sort-option i:first-child[b-92591663pn] {
font-size: 16px;
width: 20px;
text-align: center;
}
.sort-option span[b-92591663pn] {
flex: 1;
font-weight: 500;
}
.sort-option i:last-child[b-92591663pn] {
font-size: 14px;
color: #4CAF50;
}
.sort-option.active i:last-child[b-92591663pn] {
color: white;
}
/* Results header styling */
.results-header[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: white;
border-bottom: 1px solid #e1e5e9;
margin-bottom: 8px;
}
.results-count[b-92591663pn] {
font-size: 16px;
font-weight: 600;
color: #333;
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
padding: 8px 16px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
/* New Results Header Design - Compact Version */
.results-header-new[b-92591663pn] {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
padding: 0 2px;
}
.results-stats-card[b-92591663pn] {
background: transparent;
border-radius: 12px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
border: 1px solid #e9ecef;
}
.results-stats-card[b-92591663pn]::before {
display: none;
}
.stats-icon[b-92591663pn] {
background: rgba(102, 126, 234, 0.1);
border-radius: 8px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
z-index: 1;
}
.stats-icon i[b-92591663pn] {
font-size: 16px;
color: #667eea;
}
.stats-content[b-92591663pn] {
flex: 1;
position: relative;
z-index: 1;
}
.stats-number[b-92591663pn] {
font-size: 20px;
font-weight: 600;
color: #495057;
line-height: 1;
margin-bottom: 2px;
}
.stats-label[b-92591663pn] {
font-size: 10px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.stats-badge[b-92591663pn] {
background: rgba(102, 126, 234, 0.1);
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
z-index: 1;
}
.stats-badge i[b-92591663pn] {
font-size: 10px;
color: #667eea;
}
.sort-controls[b-92591663pn] {
background: white;
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid #f0f0f0;
}
.sort-label-new[b-92591663pn] {
font-size: 13px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.sort-label-new[b-92591663pn]::before {
content: "âš¡";
font-size: 14px;
}
.sort-dropdown-new[b-92591663pn] {
position: relative;
display: inline-block;
width: 100%;
}
.sort-dropdown-btn-new[b-92591663pn] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 1px solid #e9ecef;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.sort-dropdown-btn-new:hover[b-92591663pn] {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
border-color: #adb5bd;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn-content[b-92591663pn] {
display: flex;
align-items: center;
gap: 8px;
}
.btn-content i[b-92591663pn] {
font-size: 14px;
color: #6c757d;
}
.dropdown-arrow[b-92591663pn] {
font-size: 12px;
color: #6c757d;
transition: transform 0.3s ease;
}
.sort-dropdown-btn-new:hover .dropdown-arrow[b-92591663pn] {
transform: rotate(180deg);
}
.sort-dropdown-menu-new[b-92591663pn] {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 6px;
background: white;
border-radius: 12px;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
border: 1px solid #e9ecef;
z-index: 1000;
overflow: hidden;
animation: slideDownNew-b-92591663pn 0.3s ease;
}
@keyframes slideDownNew-b-92591663pn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.sort-option-new[b-92591663pn] {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #f8f9fa;
color: #495057;
}
.sort-option-new:last-child[b-92591663pn] {
border-bottom: none;
}
.sort-option-new:hover[b-92591663pn] {
background: #f8f9ff;
color: #667eea;
}
.sort-option-new.active[b-92591663pn] {
background: transparent;
color: #667eea;
border-left: 3px solid #667eea;
}
.option-icon[b-92591663pn] {
background: rgba(102, 126, 234, 0.1);
border-radius: 8px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sort-option-new.active .option-icon[b-92591663pn] {
background: rgba(102, 126, 234, 0.1);
}
.option-icon i[b-92591663pn] {
font-size: 18px;
color: #667eea;
}
.sort-option-new.active .option-icon i[b-92591663pn] {
color: #667eea;
}
.option-content[b-92591663pn] {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.option-title[b-92591663pn] {
font-size: 16px;
font-weight: 600;
}
.option-subtitle[b-92591663pn] {
font-size: 13px;
opacity: 0.7;
font-weight: 400;
}
.sort-option-new.active .option-subtitle[b-92591663pn] {
opacity: 0.7;
color: #667eea;
}
.option-check[b-92591663pn] {
background: rgba(102, 126, 234, 0.1);
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.option-check i[b-92591663pn] {
font-size: 12px;
color: #667eea;
}
/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
.results-header-new[b-92591663pn] {
gap: 10px;
margin-bottom: 12px;
}
.results-stats-card[b-92591663pn] {
padding: 10px 12px;
gap: 8px;
}
.stats-icon[b-92591663pn] {
width: 28px;
height: 28px;
}
.stats-icon i[b-92591663pn] {
font-size: 14px;
}
.stats-number[b-92591663pn] {
font-size: 18px;
}
.stats-label[b-92591663pn] {
font-size: 9px;
}
.stats-badge[b-92591663pn] {
width: 18px;
height: 18px;
}
.stats-badge i[b-92591663pn] {
font-size: 9px;
}
.sort-controls[b-92591663pn] {
padding: 10px 12px;
}
.sort-label-new[b-92591663pn] {
font-size: 12px;
margin-bottom: 8px;
}
.sort-dropdown-btn-new[b-92591663pn] {
padding: 8px 12px;
font-size: 12px;
}
.btn-content[b-92591663pn] {
gap: 6px;
}
.btn-content i[b-92591663pn] {
font-size: 12px;
}
.sort-option-new[b-92591663pn] {
padding: 10px 12px;
gap: 8px;
}
.option-icon[b-92591663pn] {
width: 28px;
height: 28px;
}
.option-icon i[b-92591663pn] {
font-size: 12px;
}
.option-title[b-92591663pn] {
font-size: 12px;
}
.option-subtitle[b-92591663pn] {
font-size: 9px;
}
}
@media (max-width: 480px) {
.results-stats-card[b-92591663pn] {
padding: 8px 10px;
gap: 6px;
}
.stats-icon[b-92591663pn] {
width: 24px;
height: 24px;
}
.stats-icon i[b-92591663pn] {
font-size: 12px;
}
.stats-number[b-92591663pn] {
font-size: 16px;
}
.stats-label[b-92591663pn] {
font-size: 8px;
}
.stats-badge[b-92591663pn] {
width: 16px;
height: 16px;
}
.stats-badge i[b-92591663pn] {
font-size: 8px;
}
.sort-controls[b-92591663pn] {
padding: 8px 10px;
}
.sort-label-new[b-92591663pn] {
font-size: 11px;
margin-bottom: 6px;
}
.sort-dropdown-btn-new[b-92591663pn] {
padding: 6px 10px;
font-size: 11px;
}
.btn-content[b-92591663pn] {
gap: 4px;
}
.btn-content i[b-92591663pn] {
font-size: 10px;
}
.sort-option-new[b-92591663pn] {
padding: 8px 10px;
gap: 6px;
}
.option-icon[b-92591663pn] {
width: 24px;
height: 24px;
}
.option-icon i[b-92591663pn] {
font-size: 10px;
}
.option-title[b-92591663pn] {
font-size: 11px;
}
.option-subtitle[b-92591663pn] {
font-size: 8px;
}
}
/* Hide mobile header when modal is open */
body.modal-open .mobile-header[b-92591663pn] {
display: none !important;
}
body.modal-open .filters-bar[b-92591663pn] {
display: none !important;
}
body.modal-open .smart-filters-panel[b-92591663pn] {
display: none !important;
}
/* Filter Options */
.filter-options[b-92591663pn] {
padding: 20px;
overflow-y: auto;
max-height: 60vh;
}
.filter-option[b-92591663pn] {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px 20px;
margin-bottom: 8px;
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-align: left;
}
.filter-option:hover[b-92591663pn] {
background: #f8f9fa;
border-color: #667eea;
}
.filter-option.active[b-92591663pn] {
background: #fff3f3;
border-color: #dc3545;
border-left: 3px solid #dc3545;
}
.filter-left[b-92591663pn] {
display: flex;
align-items: center;
gap: 12px;
}
.filter-left i[b-92591663pn] {
font-size: 16px;
color: #6c757d;
width: 20px;
text-align: center;
}
.filter-left span[b-92591663pn] {
font-size: 14px;
color: #333;
font-weight: 500;
}
.filter-option.active .filter-left span[b-92591663pn] {
color: #dc3545;
font-weight: 600;
}
.filter-option.active .filter-left i[b-92591663pn] {
color: #dc3545;
}
.filter-count[b-92591663pn] {
font-size: 12px;
color: #6c757d;
font-weight: 500;
}
/* Filter Backdrop Overlay */
.filter-backdrop[b-92591663pn] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(2px);
}
.filter-backdrop.show[b-92591663pn] {
opacity: 1;
}
.filter-backdrop.hide[b-92591663pn] {
opacity: 0;
pointer-events: none;
}
/* _content/HappyBus.Ux/Components/Pages/MyBookings.razor.rz.scp.css */
/* Light Theme My Trips Container */
.my-trips-container[b-5xofz0u1fu] {
background: #f8f9fa;
min-height: 100vh;
padding: 15px 15px;
color: #2c3e50;
font-family: 'Inter', 'Segoe UI', sans-serif;
position: relative;
overflow-x: hidden;
}
/* Header Section - Glassmorphism Style */
.trips-header[b-5xofz0u1fu] {
text-align: center;
margin-bottom: 25px;
position: relative;
z-index: 2;
}
.header-content[b-5xofz0u1fu] {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 16px;
padding: 25px 20px;
border: 1px solid #e9ecef;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.page-title[b-5xofz0u1fu] {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
color: #2c3e50;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.page-title i[b-5xofz0u1fu] {
font-size: 2.2rem;
color: #2c3e50;
}
.page-subtitle[b-5xofz0u1fu] {
font-size: 1rem;
opacity: 0.8;
font-weight: 400;
color: #6c757d;
letter-spacing: 0.3px;
}
/* Tabs Container - Floating Style */
.tabs-container[b-5xofz0u1fu] {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 25px;
position: relative;
z-index: 2;
}
.tab-button[b-5xofz0u1fu] {
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 10px 20px;
color: #6c757d;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
min-width: 120px;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.tab-button[b-5xofz0u1fu]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s;
}
.tab-button:hover[b-5xofz0u1fu]::before {
left: 100%;
}
.tab-button:hover[b-5xofz0u1fu] {
background: #f8f9fa;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-color: #333;
color: #333;
}
.tab-button.active[b-5xofz0u1fu] {
background: #333;
border-color: #333;
color: white;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
.tab-button i[b-5xofz0u1fu] {
font-size: 14px;
transition: transform 0.3s ease;
}
.tab-button:hover i[b-5xofz0u1fu] {
transform: scale(1.1);
}
.badge[b-5xofz0u1fu] {
background: #333;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
margin-left: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
/* Content Section */
.trips-content[b-5xofz0u1fu] {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.trips-grid[b-5xofz0u1fu] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
padding: 0 5px;
}
/* Trip Card - Glassmorphism Style */
.trip-card[b-5xofz0u1fu] {
background: white;
border-radius: 16px;
padding: 20px;
border: 1px solid #e9ecef;
color: #2c3e50;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
cursor:pointer;
}
.trip-card[b-5xofz0u1fu]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: #333;
}
.trip-card[b-5xofz0u1fu]::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.trip-card:hover[b-5xofz0u1fu]::after {
opacity: 1;
}
.trip-card:hover[b-5xofz0u1fu] {
transform: translateY(-4px) scale(1.01);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-color: #333;
}
/* Status Badge - Floating Style */
.status-badge[b-5xofz0u1fu] {
position: absolute;
top: 5px;
padding: 6px 12px;
border-radius: 12px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.status-badge.confirmed[b-5xofz0u1fu] {
background: #e8f5e8;
color: #28a745;
border-color: #28a745;
}
.status-badge.cancelled[b-5xofz0u1fu] {
background: #f8f9fa;
color: #333;
border-color: #333;
}
.status-badge.pending[b-5xofz0u1fu] {
background: #f8f9fa;
color: #333;
border-color: #333;
}
/* Trip Info */
.trip-info[b-5xofz0u1fu] {
margin-top: 15px;
}
.route-info[b-5xofz0u1fu] {
margin-bottom: 15px;
}
.route-cities[b-5xofz0u1fu] {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
color: #2c3e50;
display: flex;
align-items: center;
gap: 12px;
line-height: 1.2;
}
.route-cities i[b-5xofz0u1fu] {
color: #333;
font-size: 16px;
}
.from-city[b-5xofz0u1fu], .to-city[b-5xofz0u1fu] {
color: #333;
}
.travel-name[b-5xofz0u1fu] {
color: #6c757d;
font-size: 13px;
font-weight: 500;
margin-bottom: 15px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 8px;
display: inline-block;
border: 1px solid #e9ecef;
}
/* Trip Details */
.trip-details[b-5xofz0u1fu] {
margin-bottom: 15px;
}
.detail-item[b-5xofz0u1fu] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 14px;
color: #495057;
padding: 8px 0;
border-bottom: 1px solid #f8f9fa;
}
.detail-item:last-child[b-5xofz0u1fu] {
border-bottom: none;
}
.detail-item i[b-5xofz0u1fu] {
width: 18px;
text-align: center;
color: #333;
font-size: 14px;
padding: 6px;
border-radius: 6px;
}
/* Ticket Info */
.ticket-info[b-5xofz0u1fu] {
border-top: 1px solid #e9ecef;
padding-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #6c757d;
}
.ticket-number[b-5xofz0u1fu], .passenger-count[b-5xofz0u1fu] {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
padding: 6px 10px;
background: #f8f9fa;
border-radius: 6px;
border: 1px solid #e9ecef;
}
.ticket-number i[b-5xofz0u1fu], .passenger-count i[b-5xofz0u1fu] {
color: #6c757d;
}
/* Action Menu */
.action-menu[b-5xofz0u1fu] {
position: absolute;
top: 5px;
right: 15px;
padding: 6px 12px;
border-radius: 12px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.menu-trigger[b-5xofz0u1fu] {
background: #333;
border: none;
color: white;
cursor: pointer;
padding: 8px 12px;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 14px;
}
.menu-trigger:hover[b-5xofz0u1fu] {
transform: scale(1.1) rotate(90deg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background: #555;
}
.menu-dropdown[b-5xofz0u1fu] {
position: absolute;
top: 100%;
right: 0;
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
border-radius: 12px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
min-width: 160px;
z-index: 1000;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 10px;
transform: translateX(-25%);
}
.menu-dropdown[b-5xofz0u1fu]::before {
content: '';
position: absolute;
top: -6px;
right: 15px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(26, 26, 46, 0.95);
}
.menu-item[b-5xofz0u1fu] {
padding: 10px 15px;
cursor: pointer;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
}
.menu-item:hover[b-5xofz0u1fu] {
background: rgba(255, 255, 255, 0.1);
color: #00d4ff;
padding-left: 20px;
}
.menu-item:last-child[b-5xofz0u1fu] {
border-bottom: none;
}
.menu-item i[b-5xofz0u1fu] {
width: 14px;
text-align: center;
color: #ffffff;
font-size: 14px;
}
/* Empty State */
.empty-state[b-5xofz0u1fu] {
text-align: center;
padding: 60px 20px;
max-width: 700px;
margin: 0 auto;
background: white;
border-radius: 16px;
border: 1px solid #e9ecef;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.empty-icon[b-5xofz0u1fu] {
font-size: 4rem;
color: #6c757d;
margin-bottom: 20px;
}
.empty-state h3[b-5xofz0u1fu] {
font-size: 1.8rem;
margin-bottom: 12px;
font-weight: 700;
color: #2c3e50;
}
.empty-state p[b-5xofz0u1fu] {
font-size: 1rem;
opacity: 0.7;
margin-bottom: 30px;
line-height: 1.5;
color: #6c757d;
}
.book-now-btn[b-5xofz0u1fu] {
background: #333;
color: white;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
gap: 8px;
}
.book-now-btn:hover[b-5xofz0u1fu] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background: #555;
}
.book-now-btn i[b-5xofz0u1fu] {
color: white;
}
/* Animations */
@keyframes glow-b-5xofz0u1fu {
0% { filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.5)); }
100% { filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.8)); }
}
@keyframes pulse-b-5xofz0u1fu {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes float-b-5xofz0u1fu {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes slide-b-5xofz0u1fu {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.my-trips-container[b-5xofz0u1fu] {
padding: 12px 10px;
}
.page-title[b-5xofz0u1fu] {
font-size: 2rem;
flex-direction: column;
gap: 8px;
}
.header-content[b-5xofz0u1fu] {
padding: 20px 15px;
}
.trips-grid[b-5xofz0u1fu] {
grid-template-columns: 1fr;
gap: 15px;
padding: 0;
}
.trip-card[b-5xofz0u1fu] {
padding: 15px;
}
.tabs-container[b-5xofz0u1fu] {
gap: 8px;
flex-wrap: wrap;
}
.tab-button[b-5xofz0u1fu] {
padding: 8px 16px;
font-size: 12px;
min-width: 100px;
}
.route-cities[b-5xofz0u1fu] {
font-size: 18px;
flex-direction: column;
gap: 6px;
text-align: center;
}
.route-cities i[b-5xofz0u1fu] {
transform: rotate(90deg);
}
.ticket-info[b-5xofz0u1fu] {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.menu-dropdown[b-5xofz0u1fu] {
right: -40px;
min-width: 140px;
}
}
@media (max-width: 480px) {
.page-title[b-5xofz0u1fu] {
font-size: 1.6rem;
}
.tab-button[b-5xofz0u1fu] {
padding: 6px 12px;
font-size: 11px;
min-width: 80px;
}
.trip-card[b-5xofz0u1fu] {
padding: 12px;
}
.route-cities[b-5xofz0u1fu] {
font-size: 16px;
}
.menu-dropdown[b-5xofz0u1fu] {
right: -60px;
min-width: 120px;
}
}
/* _content/HappyBus.Ux/Components/Pages/MyProfilePage.razor.rz.scp.css */
/* Profile Page Background */
[b-9n7f1shgnk] body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
margin: 0;
padding: 20px;
}
.profile-container[b-9n7f1shgnk] {
width: 100%;
max-width: 800px;
margin: 0 auto;
background-color: #ffffff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
}
h2[b-9n7f1shgnk] {
text-align: center;
color: #4a5085;
margin-bottom: 30px;
font-size: 32px;
font-weight: 700;
position: relative;
}
h2[b-9n7f1shgnk]::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
/* Alert Messages */
.alert[b-9n7f1shgnk] {
padding: 15px 20px;
border-radius: 12px;
margin-bottom: 25px;
font-weight: 500;
border: none;
animation: slideIn-b-9n7f1shgnk 0.3s ease;
}
.alert-success[b-9n7f1shgnk] {
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.alert-danger[b-9n7f1shgnk] {
background: linear-gradient(135deg, #f44336, #d32f2f);
color: white;
box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
}
@keyframes slideIn-b-9n7f1shgnk {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-row[b-9n7f1shgnk] {
display: flex;
flex-wrap: wrap;
margin: 0 -15px 25px;
}
.form-group[b-9n7f1shgnk] {
flex: 1 0 300px;
padding: 0 15px;
margin-bottom: 25px;
}
label[b-9n7f1shgnk] {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #4a5085;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
input[type="text"][b-9n7f1shgnk],
input[type="email"][b-9n7f1shgnk],
input[type="tel"][b-9n7f1shgnk],
input[type="date"][b-9n7f1shgnk],
select[b-9n7f1shgnk] {
width: 100%;
padding: 15px 18px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #f8f9fa;
color: #2c3e50;
}
input:focus[b-9n7f1shgnk],
select:focus[b-9n7f1shgnk] {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
input[b-9n7f1shgnk]::placeholder {
color: #bdc3c7;
}
/* Gender Options */
.gender-group[b-9n7f1shgnk] {
display: flex;
gap: 20px;
margin-top: 10px;
}
.gender-option[b-9n7f1shgnk] {
display: flex;
align-items: center;
padding: 12px 16px;
border: 2px solid #e1e5e9;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
background: #f8f9fa;
min-width: 100px;
justify-content: center;
}
.gender-option:hover[b-9n7f1shgnk] {
border-color: #667eea;
background: #f0f4ff;
transform: translateY(-2px);
}
.gender-option input[b-9n7f1shgnk] {
margin-right: 8px;
transform: scale(1.2);
}
.gender-option span[b-9n7f1shgnk] {
font-weight: 500;
color: #2c3e50;
}
/* Phone Input Group */
.phone-input-group[b-9n7f1shgnk] {
display: flex;
gap: 10px;
}
.phone-code[b-9n7f1shgnk] {
flex: 0 0 120px;
}
.phone-number[b-9n7f1shgnk] {
flex: 1;
}
/* Button Group */
.button-group[b-9n7f1shgnk] {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
padding-top: 30px;
border-top: 2px solid #f8f9fa;
}
button[b-9n7f1shgnk] {
padding: 15px 30px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
min-width: 150px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
button[type="submit"][b-9n7f1shgnk] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
button[type="submit"]:hover[b-9n7f1shgnk] {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
button[type="button"][b-9n7f1shgnk] {
background: #f8f9fa;
color: #6c757d;
border: 2px solid #e1e5e9;
}
button[type="button"]:hover[b-9n7f1shgnk] {
background: #e9ecef;
color: #495057;
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Responsive Design */
@media (max-width: 768px) {
[b-9n7f1shgnk] body {
padding: 10px;
}
.profile-container[b-9n7f1shgnk] {
padding: 25px;
border-radius: 15px;
}
h2[b-9n7f1shgnk] {
font-size: 24px;
}
.form-group[b-9n7f1shgnk] {
flex: 1 0 100%;
padding: 0 10px;
}
.form-row[b-9n7f1shgnk] {
margin: 0 -10px 20px;
}
.gender-group[b-9n7f1shgnk] {
flex-direction: column;
gap: 10px;
}
.gender-option[b-9n7f1shgnk] {
width: 100%;
}
.button-group[b-9n7f1shgnk] {
flex-direction: column;
gap: 15px;
}
button[b-9n7f1shgnk] {
width: 100%;
min-width: auto;
}
}
@media (max-width: 480px) {
.profile-container[b-9n7f1shgnk] {
padding: 20px;
}
h2[b-9n7f1shgnk] {
font-size: 20px;
}
input[type="text"][b-9n7f1shgnk],
input[type="email"][b-9n7f1shgnk],
input[type="tel"][b-9n7f1shgnk],
input[type="date"][b-9n7f1shgnk],
select[b-9n7f1shgnk] {
padding: 12px 15px;
font-size: 14px;
}
}
/* _content/HappyBus.Ux/Components/Pages/Offers.razor.rz.scp.css */
/* _content/HappyBus.Ux/Components/Pages/Reviews.razor.rz.scp.css */
/* General Page Styling */
body[b-n3ropv44gu] {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f4f7fb;
margin: 0;
padding: 0;
}
.alert-success[b-n3ropv44gu] {
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
button:disabled[b-n3ropv44gu],
button[disabled][b-n3ropv44gu] {
background-color: #cccccc !important; /* grey background */
color: #666666 !important; /* grey text */
cursor: not-allowed !important; /* stop hand cursor */
border-color: #999999 !important; /* faded border */
opacity: 0.7; /* optional transparency */
}
.title[b-n3ropv44gu] {
font-size: 28px;
font-weight: bold;
margin: 20px 0;
text-align: center;
color: #2c3e50;
}
/* Review Form */
.review-form[b-n3ropv44gu] {
background: #fff;
padding: 20px;
margin: 0 auto 25px auto;
max-width: 600px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.form-group[b-n3ropv44gu] {
margin-bottom: 18px;
}
.form-group label[b-n3ropv44gu] {
font-weight: 600;
margin-bottom: 6px;
display: block;
color: #34495e;
}
.stars[b-n3ropv44gu] {
font-size: 26px;
cursor: pointer;
}
.star[b-n3ropv44gu] {
color: #dcdcdc;
margin-right: 6px;
transition: color 0.2s, transform 0.2s;
}
.star:hover[b-n3ropv44gu] {
transform: scale(1.2);
}
.star.selected[b-n3ropv44gu] {
color: #f1c40f;
}
textarea.form-control[b-n3ropv44gu] {
width: 100%;
min-height: 100px;
padding: 10px;
border-radius: 8px;
border: 1px solid #ddd;
resize: vertical;
font-size: 14px;
}
/* Buttons */
.btn-submit[b-n3ropv44gu] {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
padding: 10px 18px;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
}
.btn-submit:hover[b-n3ropv44gu] {
background: linear-gradient(135deg, #2980b9, #1f618d);
transform: scale(1.05);
}
/* Review Cards */
.reviews[b-n3ropv44gu] {
max-width: 800px;
margin: 0 auto;
}
.review-card[b-n3ropv44gu] {
background: #fff;
padding: 18px;
border-radius: 12px;
margin-bottom: 15px;
box-shadow: 0 3px 8px rgba(0,0,0,0.08);
transition: transform 0.2s;
}
.review-card:hover[b-n3ropv44gu] {
transform: translateY(-3px);
}
.review-card .rating[b-n3ropv44gu] {
margin-bottom: 8px;
}
.review-card .comment[b-n3ropv44gu] {
font-size: 15px;
margin: 6px 0;
color: #2c3e50;
}
.review-card .date[b-n3ropv44gu] {
font-size: 12px;
color: #7f8c8d;
}
/* Responsive Design */
@media (max-width: 768px) {
.title[b-n3ropv44gu] {
font-size: 22px;
}
.review-form[b-n3ropv44gu] {
padding: 15px;
margin: 0 10px 20px 10px;
}
.btn-submit[b-n3ropv44gu] {
width: 100%;
text-align: center;
}
.review-card[b-n3ropv44gu] {
margin: 0 10px 15px 10px;
}
}
/* _content/HappyBus.Ux/Components/Pages/SearchPage.razor.rz.scp.css */
.search-result[b-0f28zo0a0m] {
display: flex;
height: calc(100vh - 80px);
flex-direction: row;
margin: 0 auto;
overflow: hidden;
max-width: 100%;
gap: 10px;
}
.header[b-0f28zo0a0m] {
display: none;
}
.header[b-0f28zo0a0m] {
justify-content: space-between;
align-items: center;
padding: 5px;
border-bottom: 1px solid #e0e0e0;
background-color:white;
border-radius:5px;
}
@media screen and (max-width: 768px) {
.header[b-0f28zo0a0m] {
display: flex;
}
}
.left-section[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 10px;
}
.back-arrow[b-0f28zo0a0m] {
font-size: 22px;
cursor: pointer;
}
.route[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
}
.route-title[b-0f28zo0a0m] {
font-size: 16px;
font-weight: bold;
}
.route-title span[b-0f28zo0a0m] {
color: #555;
font-weight: normal;
}
.buses-count[b-0f28zo0a0m] {
font-size: 13px;
color: #777;
}
.right-section[b-0f28zo0a0m] {
background-color: #fde8e8;
border-radius: 20px;
padding: 5px 12px;
text-align: center;
}
.date[b-0f28zo0a0m] {
font-size: 14px;
font-weight: bold;
color: #000;
}
.day[b-0f28zo0a0m] {
font-size: 12px;
color: #777;
}
@media screen and (max-width: 768px) {
.desktop-only[b-0f28zo0a0m] {
display: none !important;
}
}
/* Mobile Header for Search Results */
.mobile-search-header[b-0f28zo0a0m] {
display: none;
background: #394560;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.mobile-header-content[b-0f28zo0a0m] {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
min-height: 60px;
}
.back-to-search-btn[b-0f28zo0a0m] {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.back-to-search-btn:hover[b-0f28zo0a0m] {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.mobile-search-info[b-0f28zo0a0m] {
flex: 1;
min-width: 0;
overflow: hidden;
}
.route-info[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
color: white;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.route-arrow[b-0f28zo0a0m] {
color: white;
font-size: 18px;
margin: 0 8px;
opacity: 1;
display: inline-block;
flex-shrink: 0;
font-weight: 600;
line-height: 1;
}
.from-city[b-0f28zo0a0m], .to-city[b-0f28zo0a0m] {
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bus-count[b-0f28zo0a0m] {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.date-badge[b-0f28zo0a0m] {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 6px 10px;
border-radius: 16px;
text-align: center;
min-width: 60px;
max-width: 80px;
display: flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(10px);
flex-shrink: 0;
}
.date-icon[b-0f28zo0a0m] {
font-size: 10px;
opacity: 0.9;
flex-shrink: 0;
}
.date-content[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-width: 0;
overflow: hidden;
}
.date-day[b-0f28zo0a0m] {
font-size: 10px;
font-weight: 600;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.date-weekday[b-0f28zo0a0m] {
font-size: 9px;
font-weight: 500;
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* RedBus Style Mobile Filter Bar */
.mobile-filter-bar[b-0f28zo0a0m] {
padding: 16px 20px;
background: white;
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e9ecef;
position: relative;
overflow: hidden;
}
.mobile-filter-bar[b-0f28zo0a0m]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #dc3545, #fd7e14, #20c997, #6f42c1);
animation: shimmer-b-0f28zo0a0m 3s ease-in-out infinite;
}
@keyframes shimmer-b-0f28zo0a0m {
0%, 100% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
}
.filter-options[b-0f28zo0a0m] {
display: flex;
gap: 12px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
padding: 4px 0;
scroll-behavior: smooth;
}
.filter-options[b-0f28zo0a0m]::-webkit-scrollbar {
display: none;
}
/* RedBus Style Filter Pills */
.filter-pill[b-0f28zo0a0m] {
background: white;
border: 1px solid #dee2e6;
border-radius: 20px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
min-width: fit-content;
position: relative;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.filter-pill[b-0f28zo0a0m]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(220, 53, 69, 0.1), transparent);
transition: left 0.5s ease;
}
.filter-pill:hover[b-0f28zo0a0m]::before {
left: 100%;
}
.filter-pill:hover[b-0f28zo0a0m] {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.filter-pill.active[b-0f28zo0a0m] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
transform: translateY(-1px);
}
.filter-pill.active[b-0f28zo0a0m]::before {
display: none;
}
.filter-pill i[b-0f28zo0a0m] {
font-size: 12px;
transition: all 0.3s ease;
}
.filter-pill:hover i[b-0f28zo0a0m] {
transform: scale(1.1);
}
.filter-pill.active i[b-0f28zo0a0m] {
transform: scale(1.1);
}
.filter-pill span[b-0f28zo0a0m] {
font-size: 12px;
font-weight: 500;
}
.filter-count[b-0f28zo0a0m] {
color: #6c757d;
font-weight: 600;
font-size: 11px;
}
.filter-pill.active .filter-count[b-0f28zo0a0m] {
color: rgba(255, 255, 255, 0.8);
}
.show-filters-btn[b-0f28zo0a0m] {
background: #dc3545;
color: white;
border: none;
border-radius: 20px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
.show-filters-btn:hover[b-0f28zo0a0m] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}
.show-filters-btn i[b-0f28zo0a0m] {
font-size: 12px;
}
/* Mobile-specific improvements */
@media (max-width: 768px) {
.mobile-filter-bar[b-0f28zo0a0m] {
padding: 12px 16px;
gap: 12px;
}
.filter-pill[b-0f28zo0a0m] {
padding: 10px 14px;
font-size: 12px;
gap: 5px;
min-height: 40px;
}
.filter-pill i[b-0f28zo0a0m] {
font-size: 12px;
}
.filter-pill span[b-0f28zo0a0m] {
font-size: 11px;
}
.filter-count[b-0f28zo0a0m] {
font-size: 10px;
font-weight: 600;
}
.show-filters-btn[b-0f28zo0a0m] {
padding: 10px 16px;
font-size: 12px;
min-height: 40px;
}
.show-filters-btn i[b-0f28zo0a0m] {
font-size: 11px;
}
}
@media (max-width: 480px) {
.mobile-filter-bar[b-0f28zo0a0m] {
padding: 10px 12px;
gap: 10px;
}
.filter-pill[b-0f28zo0a0m] {
padding: 8px 12px;
font-size: 11px;
gap: 4px;
min-height: 36px;
}
.filter-pill i[b-0f28zo0a0m] {
font-size: 11px;
}
.filter-pill span[b-0f28zo0a0m] {
font-size: 10px;
}
.filter-count[b-0f28zo0a0m] {
font-size: 9px;
}
.show-filters-btn[b-0f28zo0a0m] {
padding: 8px 12px;
font-size: 11px;
min-height: 36px;
}
.show-filters-btn i[b-0f28zo0a0m] {
font-size: 10px;
}
}
/* Desktop only elements */
.desktop-only[b-0f28zo0a0m] {
display: block;
}
/* Desktop layout improvements */
@media (min-width: 769px) {
.search-results-layout[b-0f28zo0a0m] {
gap: 32px;
padding: 32px;
}
.filters-sidebar[b-0f28zo0a0m] {
width: 350px;
}
.results-main[b-0f28zo0a0m] {
flex: 1;
min-width: 0;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
padding: 24px;
height: calc(100vh - 200px);
overflow-y: auto;
}
}
/* Mobile only elements - hidden on desktop */
.mobile-filters-panel[b-0f28zo0a0m] {
display: none;
}
/* Hide elements when search results are shown */
.hide-on-search[b-0f28zo0a0m] {
display: none !important;
}
/* Mobile view when search results are shown */
@media (max-width: 768px) {
.hero-section[b-0f28zo0a0m] {
padding: 40px 0 60px 0;
min-height: 450px;
}
.content-wrapper[b-0f28zo0a0m] {
margin-top: -15px;
}
.title[b-0f28zo0a0m] {
font-size: 32px;
margin-bottom: 15px;
margin-top: 0;
}
.search-box[b-0f28zo0a0m] {
margin-top: 10px;
padding: 20px;
}
.mobile-search-header[b-0f28zo0a0m] {
display: block;
}
.mobile-filters-panel[b-0f28zo0a0m] {
display: block;
}
.mobile-header-content[b-0f28zo0a0m] {
padding: 12px 14px;
gap: 10px;
}
.route-info[b-0f28zo0a0m] {
font-size: 16px;
}
.route-arrow[b-0f28zo0a0m] {
font-size: 18px;
margin: 0 8px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-0f28zo0a0m] {
font-size: 14px;
}
.date-badge[b-0f28zo0a0m] {
padding: 4px 8px;
min-width: 50px;
max-width: 70px;
}
.date-day[b-0f28zo0a0m] {
font-size: 9px;
}
.date-weekday[b-0f28zo0a0m] {
font-size: 8px;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.hero-section[b-0f28zo0a0m] {
padding: 30px 0 50px 0;
min-height: 400px;
}
.content-wrapper[b-0f28zo0a0m] {
margin-top: -10px;
max-width: 95%;
padding: 0 15px;
}
.title[b-0f28zo0a0m] {
font-size: 28px;
margin-bottom: 12px;
margin-top: 0;
}
.search-box[b-0f28zo0a0m] {
margin-top: 8px;
padding: 16px;
}
.mobile-header-content[b-0f28zo0a0m] {
padding: 10px 12px;
gap: 8px;
}
.route-info[b-0f28zo0a0m] {
font-size: 15px;
}
.route-arrow[b-0f28zo0a0m] {
font-size: 16px;
margin: 0 6px;
opacity: 1;
font-weight: 600;
}
.bus-count[b-0f28zo0a0m] {
font-size: 13px;
}
.date-badge[b-0f28zo0a0m] {
padding: 3px 6px;
min-width: 45px;
max-width: 60px;
}
.date-day[b-0f28zo0a0m] {
font-size: 8px;
}
.date-weekday[b-0f28zo0a0m] {
font-size: 7px;
}
.back-to-search-btn[b-0f28zo0a0m] {
width: 32px;
height: 32px;
font-size: 16px;
}
.mobile-filters-panel[b-0f28zo0a0m] {
display: block;
}
.hide-on-mobile[b-0f28zo0a0m] {
display: none !important;
}
.desktop-only[b-0f28zo0a0m] {
display: none !important;
}
.search-results-wrapper[b-0f28zo0a0m] {
margin-top: 0;
padding-top: 0;
}
.search-results-layout[b-0f28zo0a0m] {
padding: 4px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
.mobile-filters-panel[b-0f28zo0a0m] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 20px;
transition: all 0.3s ease;
overflow: hidden;
display: block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
transform: translateY(100%);
border-radius: 16px 16px 0 0;
}
.mobile-filters-panel.hide[b-0f28zo0a0m] {
transform: translateY(100%);
opacity: 0;
}
.mobile-filters-panel.show[b-0f28zo0a0m] {
transform: translateY(0);
opacity: 1;
overflow-y: auto;
max-height: 80vh;
}
.mobile-filters-panel[b-0f28zo0a0m]::-webkit-scrollbar {
width: 4px;
}
.mobile-filters-panel[b-0f28zo0a0m]::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 2px;
}
.mobile-filters-panel[b-0f28zo0a0m]::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 2px;
}
.mobile-filters-panel[b-0f28zo0a0m]::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.mobile-filters-header[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
.mobile-filters-header h3[b-0f28zo0a0m] {
font-size: 20px;
font-weight: 700;
color: #333;
margin: 0;
}
.close-filters-btn[b-0f28zo0a0m] {
background: none;
border: none;
color: #666;
font-size: 24px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.close-filters-btn:hover[b-0f28zo0a0m] {
background: #f0f0f0;
color: #333;
}
.results-main[b-0f28zo0a0m] {
order: 2;
padding: 4px;
width: 100%;
box-sizing: border-box;
}
/* Very small screens */
@media (max-width: 320px) {
.search-results-layout[b-0f28zo0a0m] {
padding: 2px;
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.results-main[b-0f28zo0a0m] {
padding: 2px;
margin: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
}
.no-results[b-0f28zo0a0m] {
padding: 40px 24px;
}
.no-results-icon[b-0f28zo0a0m] {
width: 60px;
height: 60px;
}
.no-results-icon i[b-0f28zo0a0m] {
font-size: 24px;
}
.no-results h3[b-0f28zo0a0m] {
font-size: 20px;
}
.no-results p[b-0f28zo0a0m] {
font-size: 14px;
}
}
/* Responsive design for search results - Progressive scaling */
@media (max-width: 1024px) and (min-width: 769px) {
.search-results-layout[b-0f28zo0a0m] {
flex-direction: column;
gap: 20px;
padding: 16px;
max-width: 1000px;
margin: 0 auto;
}
.filters-sidebar[b-0f28zo0a0m] {
width: 100%;
}
.results-main[b-0f28zo0a0m] {
padding: 16px;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.search-results-layout[b-0f28zo0a0m] {
flex-direction: column;
gap: 16px;
padding: 12px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-0f28zo0a0m] {
width: 100%;
}
.results-main[b-0f28zo0a0m] {
padding: 12px;
width: 100%;
box-sizing: border-box;
}
}
/* Specific breakpoint for screens around 659px */
@media (max-width: 659px) and (min-width: 481px) {
.search-results-layout[b-0f28zo0a0m] {
flex-direction: column;
gap: 12px;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.filters-sidebar[b-0f28zo0a0m] {
width: 100%;
}
.results-main[b-0f28zo0a0m] {
padding: 10px;
width: 100%;
box-sizing: border-box;
}
}
/* Unified breakpoint for screens 321px to 480px */
@media (max-width: 480px) and (min-width: 321px) {
.search-results-layout[b-0f28zo0a0m] {
padding: 8px;
gap: 0;
flex-direction: column;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
.results-main[b-0f28zo0a0m] {
padding: 8px;
width: 100%;
box-sizing: border-box;
max-width: 100vw;
}
}
/* Responsive design for search results */
@media (max-width: 1024px) {
.search-results-layout[b-0f28zo0a0m] {
flex-direction: column;
gap: 20px;
}
.filters-sidebar[b-0f28zo0a0m] {
width: 100%;
}
}
/* Discount Offers Section Styles */
.discount-offers-section[b-0f28zo0a0m] {
padding: 40px 0;
background-color: #f0f8ff;
}
.section-header[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.section-header h2[b-0f28zo0a0m] {
font-size: 24px;
font-weight: 600;
color: #333;
margin: 0;
}
.view-all[b-0f28zo0a0m] {
color: #FF6B6B;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
}
.view-all:hover[b-0f28zo0a0m] {
color: #FF8E53;
transform: translateX(2px);
}
/* About Section Styles */
.about-section[b-0f28zo0a0m] {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.about-section[b-0f28zo0a0m]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://img.freepik.com/free-vector/abstract-wave-pattern-background_53876-115444.jpg');
background-size: cover;
opacity: 0.05;
z-index: 1;
}
.about-section .container[b-0f28zo0a0m] {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.about-section .section-header[b-0f28zo0a0m] {
text-align: center;
margin-bottom: 50px;
}
.about-section .section-header h2[b-0f28zo0a0m] {
font-size: 32px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.about-section .section-header h2[b-0f28zo0a0m]::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
border-radius: 3px;
}
.about-section .section-header p[b-0f28zo0a0m] {
font-size: 16px;
color: #666;
max-width: 700px;
margin: 15px auto 0;
}
.about-content[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 50px;
}
.about-image[b-0f28zo0a0m] {
flex: 1;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.about-image:hover[b-0f28zo0a0m] {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.about-image img[b-0f28zo0a0m] {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.about-image:hover img[b-0f28zo0a0m] {
transform: scale(1.05);
}
.about-experience[b-0f28zo0a0m] {
position: absolute;
bottom: 30px;
left: 30px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53);
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-experience .years[b-0f28zo0a0m] {
font-size: 32px;
font-weight: 800;
line-height: 1;
}
.about-experience .text[b-0f28zo0a0m] {
font-size: 14px;
font-weight: 500;
}
.about-text[b-0f28zo0a0m] {
flex: 1;
}
.about-text p[b-0f28zo0a0m] {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.about-stats[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
margin: 40px 0;
}
/* Desktop Layout */
.desktop-layout[b-0f28zo0a0m] {
display: none;
min-height: 100vh;
background: #f8f9fa;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Show desktop layout on larger screens */
@media (min-width: 769px) {
.desktop-layout[b-0f28zo0a0m] {
display: block;
}
}
/* Desktop Search Section */
.desktop-search-section[b-0f28zo0a0m] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 24px 0;
border-radius:15px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.search-container[b-0f28zo0a0m] {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.route-info[b-0f28zo0a0m] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.route-display[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 600;
color: #333;
}
.from-city[b-0f28zo0a0m], .to-city[b-0f28zo0a0m] {
color: #333;
font-weight: 700;
}
.route-display i[b-0f28zo0a0m] {
color: #dc3545;
font-size: 16px;
}
.bus-count[b-0f28zo0a0m] {
background: #dc3545;
color: white;
padding: 6px 12px;
border-radius: 16px;
font-size: 14px;
font-weight: 600;
}
.search-stats[b-0f28zo0a0m] {
background: #d4edda;
color: #155724;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
width: fit-content;
}
.search-stats i[b-0f28zo0a0m] {
color: #28a745;
font-size: 16px;
}
.search-form[b-0f28zo0a0m] {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Desktop Main Content */
.desktop-main-content[b-0f28zo0a0m] {
max-width: 1400px;
margin: 0 auto;
display: flex;
gap: 24px;
min-height: calc(100vh - 300px);
padding: 20px;
}
/* Filters Sidebar */
.filters-sidebar[b-0f28zo0a0m] {
width: 280px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
height: fit-content;
position: sticky;
top: 120px;
}
.filters-header[b-0f28zo0a0m] {
padding: 20px 20px 16px 20px;
border-bottom: 1px solid #e9ecef;
}
.filters-header h3[b-0f28zo0a0m] {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #333;
}
.filter-options[b-0f28zo0a0m] {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-option[b-0f28zo0a0m] {
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.filter-option:hover[b-0f28zo0a0m] {
background: #f8f9fa;
border-color: #adb5bd;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.filter-option.active[b-0f28zo0a0m] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
.filter-option i[b-0f28zo0a0m] {
font-size: 16px;
flex-shrink: 0;
}
.filter-option span[b-0f28zo0a0m] {
font-size: 14px;
font-weight: 500;
}
.filter-count[b-0f28zo0a0m] {
color: #6c757d;
font-weight: 600;
font-size: 12px;
}
.filter-option.active .filter-count[b-0f28zo0a0m] {
color: rgba(255, 255, 255, 0.8);
}
/* Results Panel */
.results-panel[b-0f28zo0a0m] {
flex: 1;
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
padding: 24px;
min-height: 600px;
height: calc(100vh - 200px);
overflow-y: auto;
}
.results-header[b-0f28zo0a0m] {
margin-bottom: 24px;
}
.results-header h2[b-0f28zo0a0m] {
font-size: 22px;
font-weight: 600;
color: #495057;
margin: 0 0 20px 0;
padding: 0;
border-bottom: 2px solid #e9ecef;
padding-bottom: 12px;
position: relative;
}
.results-header h2[b-0f28zo0a0m]::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: #007bff;
}
.sort-section[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 16px;
}
.sort-section span[b-0f28zo0a0m] {
font-size: 14px;
font-weight: 600;
color: #495057;
}
.sort-buttons[b-0f28zo0a0m] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sort-btn[b-0f28zo0a0m] {
background: white;
border: 1px solid #dee2e6;
border-radius: 16px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: #6c757d;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
.sort-btn:hover[b-0f28zo0a0m] {
background: #f8f9fa;
border-color: #adb5bd;
}
.sort-btn.active[b-0f28zo0a0m] {
background: #dc3545;
border-color: #dc3545;
color: white;
}
.sort-btn i[b-0f28zo0a0m] {
font-size: 12px;
}
/* Bus Cards for Desktop */
.bus-cards[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 16px;
}
.bus-card[b-0f28zo0a0m] {
background: white;
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.bus-card:hover[b-0f28zo0a0m] {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.card-header[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.operator-info[b-0f28zo0a0m] {
flex: 1;
}
.operator-name[b-0f28zo0a0m] {
font-size: 18px;
font-weight: 700;
color: #333;
margin: 0 0 6px 0;
}
.bus-type[b-0f28zo0a0m] {
font-size: 15px;
color: #6c757d;
margin: 0;
}
.rating-badge[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: transparent !important;
color: #6c757d;
padding: 8px 12px;
border-radius: 8px;
min-width: 60px;
border: none !important;
margin-left: auto;
}
.rating[b-0f28zo0a0m] {
font-size: 14px;
font-weight: 700;
color: #495057 !important;
}
.rating-count[b-0f28zo0a0m] {
font-size: 12px;
opacity: 1;
color: #28a745 !important;
font-weight: 600;
}
.card-body[b-0f28zo0a0m] {
margin-bottom: 16px;
}
.timing-section[b-0f28zo0a0m] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.departure[b-0f28zo0a0m], .arrival[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.time[b-0f28zo0a0m] {
font-size: 18px;
font-weight: 700;
color: #333;
}
.label[b-0f28zo0a0m] {
font-size: 11px;
color: #6c757d;
text-transform: uppercase;
font-weight: 500;
}
.duration[b-0f28zo0a0m] {
background: #f8f9fa;
color: #495057;
padding: 6px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
border: 1px solid #e9ecef;
}
.seats-info[b-0f28zo0a0m] {
font-size: 13px;
color: #6c757d;
text-align: center;
}
.card-footer[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px dashed #e9ecef;
}
.price-section[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 4px;
}
.new-bus-tag[b-0f28zo0a0m] {
background: #e3f2fd;
color: #1976d2;
padding: 6px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
width: fit-content;
}
.price[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 1px;
}
.amount[b-0f28zo0a0m] {
font-size: 22px;
font-weight: 700;
color: #333;
}
.suffix[b-0f28zo0a0m] {
font-size: 14px;
color: #6c757d;
}
.view-seats-btn[b-0f28zo0a0m] {
background: #dc3545;
border: none;
color: white;
padding: 12px 18px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
.view-seats-btn:hover[b-0f28zo0a0m] {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.view-seats-btn i[b-0f28zo0a0m] {
font-size: 12px;
}
/* Hide navbar when search results are shown - only on mobile */
@media (max-width: 1024px) {
body.search-results-active header[b-0f28zo0a0m] {
display: none !important;
}
}
/* Mobile Layout Styles */
.mobile-layout[b-0f28zo0a0m] {
display: none;
background: #f8f9fa;
min-height: 100vh;
}
/* Mobile Header */
.mobile-header[b-0f28zo0a0m] {
background: white;
color: #333;
padding: 16px 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #e9ecef;
}
.header-content[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 16px;
}
.back-btn[b-0f28zo0a0m] {
background: none;
border: none;
color: #333;
font-size: 20px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.back-btn:hover[b-0f28zo0a0m] {
background: rgba(0, 0, 0, 0.05);
}
.route-info[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
flex: 1;
}
.route-info i[b-0f28zo0a0m] {
color: #dc3545;
font-size: 16px;
}
.date-info[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 8px;
background: #f8f9fa;
padding: 8px 12px;
border-radius: 12px;
font-size: 14px;
color: #333;
}
.date-details[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 2px;
}
.date-day[b-0f28zo0a0m] {
font-weight: 600;
font-size: 14px;
color: #333;
}
.date-weekday[b-0f28zo0a0m] {
font-size: 12px;
color: #666;
}
/* Bus Count Bar */
.bus-count-bar[b-0f28zo0a0m] {
background: white;
padding: 12px 20px;
border-bottom: 1px solid #e9ecef;
font-size: 18px;
font-weight: 700;
color: #333;
}
/* Filters Bar */
.filters-bar[b-0f28zo0a0m] {
background: white;
padding: 16px 20px;
display: flex;
gap: 12px;
overflow-x: auto;
border-bottom: 1px solid #e9ecef;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filters-bar[b-0f28zo0a0m]::-webkit-scrollbar {
display: none;
}
.filter-btn[b-0f28zo0a0m] {
background: white;
border: 2px solid #e9ecef;
border-radius: 20px;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
min-width: fit-content;
}
.filter-btn i[b-0f28zo0a0m] {
font-size: 16px;
width: 16px;
text-align: center;
}
.filter-btn:hover[b-0f28zo0a0m] {
border-color: #dc3545;
color: #dc3545;
transform: translateY(-1px);
}
.filter-btn.primary[b-0f28zo0a0m] {
background: #dc3545;
border-color: #dc3545;
color: white;
}
.filter-btn.active[b-0f28zo0a0m] {
background: #dc3545;
border-color: #dc3545;
color: white;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
/* Smart Filters Panel */
.smart-filters-panel[b-0f28zo0a0m] {
background: white;
border-bottom: 1px solid #e9ecef;
padding: 20px;
}
.filters-header[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.header-left[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 700;
color: #333;
}
.close-btn[b-0f28zo0a0m] {
background: none;
border: none;
color: #666;
font-size: 20px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.close-btn:hover[b-0f28zo0a0m] {
background: #f8f9fa;
color: #333;
}
.search-stats-banner[b-0f28zo0a0m] {
background: #d4edda;
color: #155724;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.filter-options[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-option[b-0f28zo0a0m] {
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 16px;
font-size: 16px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.filter-option:hover[b-0f28zo0a0m] {
border-color: #dc3545;
color: #dc3545;
transform: translateY(-1px);
}
.filter-option.active[b-0f28zo0a0m] {
background: #dc3545;
border-color: #dc3545;
color: white;
}
.filter-left[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 12px;
}
.filter-count[b-0f28zo0a0m] {
font-size: 14px;
opacity: 0.8;
}
/* Results Section */
.results-section[b-0f28zo0a0m] {
padding: 20px;
}
.results-header[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
}
.results-count[b-0f28zo0a0m] {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
font-size: 18px;
font-weight: 600;
color: #495057;
background: #f8f9fa;
padding: 12px 20px;
border-radius: 8px;
border-left: 4px solid #28a745;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 300px;
}
.results-count[b-0f28zo0a0m]::before {
content: "🚌";
font-size: 24px;
}
.count-number[b-0f28zo0a0m] {
font-size: 24px;
font-weight: 700;
color: #28a745;
}
.count-text[b-0f28zo0a0m] {
color: #6c757d;
}
.sort-section[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 16px;
background: white;
padding: 20px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
width: 100%;
}
.sort-label[b-0f28zo0a0m] {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.sort-label[b-0f28zo0a0m]::before {
content: "📊";
font-size: 20px;
}
.sort-buttons[b-0f28zo0a0m] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
width: 100%;
}
.sort-btn[b-0f28zo0a0m] {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
color: #495057;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 120px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.sort-btn:hover[b-0f28zo0a0m] {
background: #e9ecef;
border-color: #6c757d;
color: #495057;
transform: translateY(-1px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.sort-btn.active[b-0f28zo0a0m] {
background: white;
border-color: #6c757d;
color: white;
box-shadow: 0 4px 16px rgba(108, 117, 125, 0.3);
transform: translateY(-1px);
}
/* Bus Cards */
.bus-cards[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Mobile Bus Cards - Reduced Gap */
@media (max-width: 768px) {
.bus-cards[b-0f28zo0a0m] {
gap: 8px;
}
}
@media (max-width: 480px) {
.bus-cards[b-0f28zo0a0m] {
gap: 6px;
}
}
.bus-card[b-0f28zo0a0m] {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
/* Mobile Bus Card - Reduced Padding */
@media (max-width: 768px) {
.bus-card[b-0f28zo0a0m] {
padding: 16px;
border-radius: 12px;
}
}
@media (max-width: 480px) {
.bus-card[b-0f28zo0a0m] {
padding: 12px;
border-radius: 10px;
}
}
/* Mobile Card Sections - Reduced Margins */
@media (max-width: 768px) {
.card-header[b-0f28zo0a0m] {
margin-bottom: 12px;
}
.card-body[b-0f28zo0a0m] {
margin-bottom: 12px;
}
}
@media (max-width: 480px) {
.card-header[b-0f28zo0a0m] {
margin-bottom: 10px;
}
.card-body[b-0f28zo0a0m] {
margin-bottom: 10px;
}
}
.bus-card:hover[b-0f28zo0a0m] {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.card-header[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.operator-info[b-0f28zo0a0m] {
flex: 1;
}
.operator-name[b-0f28zo0a0m] {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 4px;
}
.bus-type[b-0f28zo0a0m] {
font-size: 14px;
color: #666;
}
.rating-badge[b-0f28zo0a0m] {
background: transparent;
color: #6c757d;
padding: 8px 12px;
border-radius: 8px;
text-align: center;
min-width: 60px;
}
.rating[b-0f28zo0a0m] {
font-size: 14px;
font-weight: 700;
color: #495057;
}
.rating-count[b-0f28zo0a0m] {
font-size: 12px;
opacity: 1;
color: #28a745;
font-weight: 600;
}
.card-body[b-0f28zo0a0m] {
margin-bottom: 16px;
}
.timing-section[b-0f28zo0a0m] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.departure[b-0f28zo0a0m], .arrival[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.time[b-0f28zo0a0m] {
font-size: 20px;
font-weight: 700;
color: #333;
}
.label[b-0f28zo0a0m] {
font-size: 12px;
color: #666;
text-transform: uppercase;
font-weight: 500;
}
.duration[b-0f28zo0a0m] {
background: #f8f9fa;
color: #495057;
padding: 6px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
border: 1px solid #e9ecef;
}
.seats-info[b-0f28zo0a0m] {
text-align: center;
font-size: 14px;
color: #666;
margin-top: 8px;
}
.card-footer[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid #e9ecef;
}
.price-section[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 4px;
}
.new-bus-tag[b-0f28zo0a0m] {
background: #e3f2fd;
color: #1976d2;
padding: 4px 8px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
width: fit-content;
}
.price[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 2px;
}
.amount[b-0f28zo0a0m] {
font-size: 17px;
font-weight: 700;
color: #333;
}
.suffix[b-0f28zo0a0m] {
font-size: 12px;
color: #666;
}
.view-seats-btn[b-0f28zo0a0m] {
background: #dc3545;
border: none;
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
.view-seats-btn:hover[b-0f28zo0a0m] {
background: #c82333;
transform: translateY(-1px);
}
/* Desktop Layout */
.desktop-layout[b-0f28zo0a0m] {
display: block;
}
/* Responsive Design */
@media (max-width: 1024px) {
.desktop-layout[b-0f28zo0a0m] {
display: none;
}
.mobile-layout[b-0f28zo0a0m] {
display: block;
}
}
@media (max-width: 768px) {
.mobile-header[b-0f28zo0a0m] {
padding: 14px 18px;
}
.route-info[b-0f28zo0a0m] {
font-size: 18px;
}
.date-info[b-0f28zo0a0m] {
padding: 8px 12px;
font-size: 15px;
}
.bus-count-bar[b-0f28zo0a0m] {
padding: 14px 20px;
font-size: 20px;
}
.filters-bar[b-0f28zo0a0m] {
padding: 14px 18px;
gap: 12px;
}
.filter-btn[b-0f28zo0a0m] {
padding: 10px 16px;
font-size: 15px;
}
.smart-filters-panel[b-0f28zo0a0m] {
padding: 18px;
}
.filter-option[b-0f28zo0a0m] {
padding: 16px;
font-size: 17px;
}
.results-section[b-0f28zo0a0m] {
padding: 18px;
}
.results-count[b-0f28zo0a0m] {
font-size: 20px;
padding: 10px 16px;
border-radius: 6px;
margin-bottom: 16px;
}
.sort-section[b-0f28zo0a0m] {
padding: 18px;
border-radius: 12px;
gap: 14px;
}
.sort-label[b-0f28zo0a0m] {
font-size: 16px;
}
.sort-buttons[b-0f28zo0a0m] {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.sort-btn[b-0f28zo0a0m] {
min-width: 100px;
padding: 12px 14px;
border-radius: 8px;
font-size: 13px;
}
.bus-card[b-0f28zo0a0m] {
padding: 18px;
}
.operator-name[b-0f28zo0a0m] {
font-size: 18px;
}
.time[b-0f28zo0a0m] {
font-size: 20px;
}
.amount[b-0f28zo0a0m] {
font-size: 20px;
}
}
@media (max-width: 480px) {
.mobile-header[b-0f28zo0a0m] {
padding: 12px 14px;
}
.header-content[b-0f28zo0a0m] {
gap: 14px;
}
.route-info[b-0f28zo0a0m] {
font-size: 17px;
}
.date-info[b-0f28zo0a0m] {
padding: 7px 10px;
font-size: 14px;
}
.bus-count-bar[b-0f28zo0a0m] {
padding: 12px 16px;
font-size: 19px;
}
.filters-bar[b-0f28zo0a0m] {
padding: 12px 14px;
gap: 10px;
}
.filter-btn[b-0f28zo0a0m] {
padding: 8px 14px;
font-size: 14px;
}
.smart-filters-panel[b-0f28zo0a0m] {
padding: 14px;
}
.filter-option[b-0f28zo0a0m] {
padding: 14px;
font-size: 16px;
}
.results-section[b-0f28zo0a0m] {
padding: 14px;
}
.results-count[b-0f28zo0a0m] {
font-size: 18px;
padding: 8px 12px;
border-radius: 4px;
margin-bottom: 12px;
}
.sort-section[b-0f28zo0a0m] {
padding: 16px;
border-radius: 10px;
gap: 12px;
}
.sort-label[b-0f28zo0a0m] {
font-size: 15px;
}
.sort-buttons[b-0f28zo0a0m] {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.sort-btn[b-0f28zo0a0m] {
min-width: 90px;
padding: 10px 12px;
border-radius: 6px;
font-size: 12px;
}
.bus-card[b-0f28zo0a0m] {
padding: 14px;
}
.operator-name[b-0f28zo0a0m] {
font-size: 17px;
}
.time[b-0f28zo0a0m] {
font-size: 18px;
}
.amount[b-0f28zo0a0m] {
font-size: 18px;
}
.view-seats-btn[b-0f28zo0a0m] {
padding: 12px 18px;
font-size: 15px;
}
}
@media (max-width: 360px) {
.mobile-header[b-0f28zo0a0m] {
padding: 10px 12px;
}
.route-info[b-0f28zo0a0m] {
font-size: 16px;
}
.bus-count[b-0f28zo0a0m] {
font-size: 13px;
}
.date-info[b-0f28zo0a0m] {
padding: 6px 8px;
font-size: 13px;
}
.bus-count-bar[b-0f28zo0a0m] {
padding: 10px 14px;
font-size: 18px;
}
.results-count[b-0f28zo0a0m] {
font-size: 18px;
padding: 10px 14px;
border-radius: 6px;
margin-bottom: 10px;
}
.sort-section[b-0f28zo0a0m] {
padding: 12px;
border-radius: 6px;
gap: 6px;
}
.sort-label[b-0f28zo0a0m] {
font-size: 14px;
}
.sort-btn[b-0f28zo0a0m] {
padding: 6px 8px;
font-size: 12px;
min-width: 60px;
border-radius: 15px;
}
.filter-btn[b-0f28zo0a0m] {
padding: 6px 10px;
font-size: 13px;
}
.operator-name[b-0f28zo0a0m] {
font-size: 16px;
}
.time[b-0f28zo0a0m] {
font-size: 17px;
}
.amount[b-0f28zo0a0m] {
font-size: 17px;
}
.view-seats-btn[b-0f28zo0a0m] {
padding: 10px 14px;
font-size: 14px;
}
}
/* New 2-Row Layout */
.card-row-1[b-0f28zo0a0m] {
display: flex;
align-items: center;
margin-bottom: 8px;
position: relative;
}
.bus-info[b-0f28zo0a0m] {
flex: 1;
min-width: 0;
}
.time-info[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.time-display[b-0f28zo0a0m] {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
color: #333;
}
.departure-time[b-0f28zo0a0m], .arrival-time[b-0f28zo0a0m] {
font-size: 16px;
font-weight: 600;
color: #333;
}
.time-separator[b-0f28zo0a0m] {
font-size: 16px;
color: #666;
margin: 0 4px;
}
.duration[b-0f28zo0a0m] {
font-size: 12px;
color: #666;
font-weight: 500;
background: #f8f9fa;
padding: 2px 8px;
border-radius: 12px;
border: 1px solid #e9ecef;
}
.card-row-2[b-0f28zo0a0m] {
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: 4px;
border-top: 1px solid #e9ecef;
}
/* New Desktop Results Header Design - Compact Version */
.results-header-new[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
padding: 0 4px;
flex-shrink: 0;
}
.results-stats-card[b-0f28zo0a0m] {
background: transparent;
border-radius: 12px;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
border: 1px solid #e9ecef;
}
.results-stats-card[b-0f28zo0a0m]::before {
display: none;
}
.stats-icon[b-0f28zo0a0m] {
background: rgba(102, 126, 234, 0.1);
border-radius: 8px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
z-index: 1;
}
.stats-icon i[b-0f28zo0a0m] {
font-size: 18px;
color: #667eea;
}
.stats-content[b-0f28zo0a0m] {
flex: 1;
position: relative;
z-index: 1;
}
.stats-number[b-0f28zo0a0m] {
font-size: 20px;
font-weight: 600;
color: #495057;
line-height: 1;
margin-bottom: 2px;
}
.stats-label[b-0f28zo0a0m] {
font-size: 11px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.stats-badge[b-0f28zo0a0m] {
background: rgba(102, 126, 234, 0.1);
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(102, 126, 234, 0.2);
position: relative;
z-index: 1;
}
.stats-badge i[b-0f28zo0a0m] {
font-size: 12px;
color: #667eea;
}
.sort-controls[b-0f28zo0a0m] {
background: white;
border-radius: 12px;
padding: 16px 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border: 1px solid #f0f0f0;
}
.sort-label-new[b-0f28zo0a0m] {
font-size: 14px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.sort-label-new[b-0f28zo0a0m]::before {
content: "âš¡";
font-size: 16px;
}
.sort-buttons-new[b-0f28zo0a0m] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
width: 100%;
}
.sort-btn-new[b-0f28zo0a0m] {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: transparent;
border: 1px solid #e9ecef;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.sort-btn-new[b-0f28zo0a0m]::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transition: left 0.5s ease;
}
.sort-btn-new:hover[b-0f28zo0a0m]::before {
left: 100%;
}
.sort-btn-new:hover[b-0f28zo0a0m] {
background: rgba(102, 126, 234, 0.05);
border-color: #adb5bd;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.sort-btn-new.active[b-0f28zo0a0m] {
background: transparent;
border-color: #667eea;
color: #667eea;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
transform: translateY(-1px);
}
.sort-btn-new.active[b-0f28zo0a0m]::before {
display: none;
}
.btn-icon[b-0f28zo0a0m] {
background: rgba(102, 126, 234, 0.1);
border-radius: 4px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.sort-btn-new.active .btn-icon[b-0f28zo0a0m] {
background: rgba(102, 126, 234, 0.1);
}
.btn-icon i[b-0f28zo0a0m] {
font-size: 14px;
color: #667eea;
transition: all 0.3s ease;
}
.sort-btn-new.active .btn-icon i[b-0f28zo0a0m] {
color: #667eea;
}
.btn-text[b-0f28zo0a0m] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
text-align: left;
flex: 1;
}
.btn-title[b-0f28zo0a0m] {
font-size: 13px;
font-weight: 600;
color: #495057;
transition: all 0.3s ease;
}
.sort-btn-new.active .btn-title[b-0f28zo0a0m] {
color: #667eea;
}
.btn-subtitle[b-0f28zo0a0m] {
font-size: 10px;
color: #6c757d;
font-weight: 400;
transition: all 0.3s ease;
}
.sort-btn-new.active .btn-subtitle[b-0f28zo0a0m] {
color: rgba(102, 126, 234, 0.7);
}
.btn-arrow[b-0f28zo0a0m] {
background: rgba(102, 126, 234, 0.1);
border-radius: 50%;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.sort-btn-new.active .btn-arrow[b-0f28zo0a0m] {
background: rgba(102, 126, 234, 0.1);
}
.btn-arrow i[b-0f28zo0a0m] {
font-size: 8px;
color: #667eea;
transition: all 0.3s ease;
}
.sort-btn-new.active .btn-arrow i[b-0f28zo0a0m] {
color: #667eea;
}
/* Responsive adjustments for tablet */
@media (max-width: 1200px) {
.sort-buttons-new[b-0f28zo0a0m] {
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.sort-btn-new[b-0f28zo0a0m] {
padding: 8px 4px;
}
.btn-icon[b-0f28zo0a0m] {
width: 22px;
height: 22px;
}
.btn-icon i[b-0f28zo0a0m] {
font-size: 14px;
}
.btn-title[b-0f28zo0a0m] {
font-size: 13px;
}
.btn-subtitle[b-0f28zo0a0m] {
font-size: 10px;
}
}
@media (max-width: 768px) {
.results-header-new[b-0f28zo0a0m] {
gap: 12px;
margin-bottom: 16px;
}
.results-stats-card[b-0f28zo0a0m] {
padding: 12px 16px;
gap: 10px;
}
.stats-icon[b-0f28zo0a0m] {
width: 32px;
height: 32px;
}
.stats-icon i[b-0f28zo0a0m] {
font-size: 16px;
}
.stats-number[b-0f28zo0a0m] {
font-size: 20px;
}
.stats-label[b-0f28zo0a0m] {
font-size: 10px;
}
.stats-badge[b-0f28zo0a0m] {
width: 20px;
height: 20px;
}
.stats-badge i[b-0f28zo0a0m] {
font-size: 10px;
}
.sort-controls[b-0f28zo0a0m] {
padding: 12px 16px;
}
.sort-label-new[b-0f28zo0a0m] {
font-size: 13px;
margin-bottom: 10px;
}
.sort-buttons-new[b-0f28zo0a0m] {
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.sort-btn-new[b-0f28zo0a0m] {
flex-direction: column;
padding: 8px 4px;
gap: 3px;
}
.btn-text[b-0f28zo0a0m] {
align-items: center;
text-align: center;
}
.btn-icon[b-0f28zo0a0m] {
width: 22px;
height: 22px;
}
.btn-icon i[b-0f28zo0a0m] {
font-size: 14px;
}
.btn-title[b-0f28zo0a0m] {
font-size: 13px;
}
.btn-subtitle[b-0f28zo0a0m] {
font-size: 10px;
}
.btn-arrow[b-0f28zo0a0m] {
width: 14px;
height: 14px;
}
.btn-arrow i[b-0f28zo0a0m] {
font-size: 8px;
}
}
/* Hide desktop search section when modal is open */
body.modal-open .desktop-search-section[b-0f28zo0a0m] {
display: none !important;
}
/* Horizontal Sort Controls */
.sort-controls-horizontal[b-0f28zo0a0m] {
background: white;
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid #e9ecef;
}
.sort-header[b-0f28zo0a0m] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.sort-by-text[b-0f28zo0a0m] {
font-size: 16px;
font-weight: 600;
color: #333;
}
.buses-count[b-0f28zo0a0m] {
font-size: 14px;
color: #e74c3c;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
.buses-count[b-0f28zo0a0m]::before {
content: "🚌";
font-size: 16px;
}
.horizontal-sort-buttons[b-0f28zo0a0m] {
display: flex;
gap: 1px;
background: #f8f9fa;
border-radius: 8px;
padding: 4px;
overflow-x: auto;
}
.horizontal-sort-btn[b-0f28zo0a0m] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 16px;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
font-weight: 500;
color: #6c757d;
white-space: nowrap;
min-width: 120px;
}
.horizontal-sort-btn:hover[b-0f28zo0a0m] {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
.horizontal-sort-btn.active[b-0f28zo0a0m] {
background: white;
color: #333;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-weight: 600;
}
.horizontal-sort-btn i[b-0f28zo0a0m] {
font-size: 12px;
transition: all 0.3s ease;
}
.horizontal-sort-btn.active i[b-0f28zo0a0m] {
color: #667eea;
}
.sort-text[b-0f28zo0a0m] {
font-size: 14px;
}
/* Responsive Design */
@media (max-width: 768px) {
.sort-controls-horizontal[b-0f28zo0a0m] {
padding: 12px 16px;
margin-bottom: 16px;
}
.sort-header[b-0f28zo0a0m] {
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-bottom: 12px;
}
.horizontal-sort-buttons[b-0f28zo0a0m] {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.horizontal-sort-btn[b-0f28zo0a0m] {
min-width: 100px;
padding: 10px 12px;
font-size: 13px;
}
.sort-text[b-0f28zo0a0m] {
font-size: 13px;
}
}
@media (max-width: 480px) {
.sort-controls-horizontal[b-0f28zo0a0m] {
padding: 10px 12px;
}
.horizontal-sort-btn[b-0f28zo0a0m] {
min-width: 90px;
padding: 8px 10px;
font-size: 12px;
}
.sort-text[b-0f28zo0a0m] {
font-size: 12px;
}
.buses-count[b-0f28zo0a0m] {
font-size: 13px;
}
}
/* _content/HappyBus.Ux/Components/Pages/ShowTicket.razor.rz.scp.css */
/* Booking Confirmation Container */
.confirmation-container[b-t3009d8mk9] {
max-width: 900px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Green Confirmation Header Box */
.confirmation-header-box[b-t3009d8mk9] {
background: linear-gradient(135deg, #4CAF50, #45a049);
border-radius: 12px;
padding: 0;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
overflow: hidden;
}
/* Green Confirmation Header */
.confirmation-header[b-t3009d8mk9] {
background: transparent;
color: white;
padding: 20px;
border-radius: 0;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: none;
}
.confirmation-icon[b-t3009d8mk9] {
font-size: 32px;
margin-right: 16px;
}
.confirmation-content[b-t3009d8mk9] {
flex: 1;
}
.confirmation-content h2[b-t3009d8mk9] {
margin: 0 0 8px 0;
font-size: 24px;
font-weight: 600;
}
.savings-message[b-t3009d8mk9] {
margin: 0;
font-size: 16px;
opacity: 0.9;
}
.download-section[b-t3009d8mk9] {
margin-left: 16px;
}
.btn-download[b-t3009d8mk9] {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.btn-download:hover[b-t3009d8mk9] {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
/* Main Content Layout */
.main-content-layout[b-t3009d8mk9] {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.left-section[b-t3009d8mk9] {
display: flex;
flex-direction: column;
}
.right-section[b-t3009d8mk9] {
display: flex;
flex-direction: column;
}
/* Journey Section */
.journey-section[b-t3009d8mk9] {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
height: fit-content;
}
.journey-header[b-t3009d8mk9] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #e9ecef;
}
.route-info h3[b-t3009d8mk9] {
margin: 0 0 8px 0;
font-size: 20px;
font-weight: 600;
color: #2c3e50;
}
.route-info h3 i[b-t3009d8mk9] {
color: #4CAF50;
margin: 0 8px;
font-size: 16px;
}
.operator-name[b-t3009d8mk9] {
margin: 0;
color: #6c757d;
font-size: 14px;
}
.journey-date .date[b-t3009d8mk9] {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
}
.journey-details[b-t3009d8mk9] {
margin-bottom: 24px;
}
.detail-row[b-t3009d8mk9] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 16px;
}
.detail-item[b-t3009d8mk9] {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-item .label[b-t3009d8mk9] {
font-size: 12px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-item .value[b-t3009d8mk9] {
font-size: 14px;
color: #2c3e50;
font-weight: 600;
}
.boarding-dropping[b-t3009d8mk9] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 16px;
background: #f8f9fa;
border-radius: 8px;
}
.boarding-info[b-t3009d8mk9], .dropping-info[b-t3009d8mk9] {
text-align: center;
}
.boarding-info .time[b-t3009d8mk9], .dropping-info .time[b-t3009d8mk9] {
font-size: 14px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 4px;
}
.boarding-info .location[b-t3009d8mk9], .dropping-info .location[b-t3009d8mk9] {
font-size: 12px;
color: #6c757d;
}
/* Fare Section */
.fare-section[b-t3009d8mk9] {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
height: fit-content;
}
.fare-section h3[b-t3009d8mk9] {
margin: 0 0 20px 0;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
.fare-breakdown[b-t3009d8mk9] {
display: flex;
flex-direction: column;
gap: 12px;
}
.fare-item[b-t3009d8mk9] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.fare-item.discount .fare-value[b-t3009d8mk9] {
color: #4CAF50;
font-weight: 600;
}
.fare-total[b-t3009d8mk9] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0 8px 0;
border-top: 2px solid #e9ecef;
margin-top: 8px;
}
.fare-total .fare-label[b-t3009d8mk9] {
font-size: 16px;
font-weight: 700;
color: #2c3e50;
}
.fare-total .fare-value[b-t3009d8mk9] {
font-size: 18px;
font-weight: 700;
color: #4CAF50;
}
.fare-label[b-t3009d8mk9] {
font-size: 14px;
color: #2c3e50;
}
.fare-value[b-t3009d8mk9] {
font-size: 14px;
font-weight: 600;
color: #2c3e50;
}
/* Passenger Section */
.passenger-section[b-t3009d8mk9] {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Passenger Info Inline (within journey section) */
.passenger-info-inline[b-t3009d8mk9] {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #e9ecef;
}
.passenger-header[b-t3009d8mk9] {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid #e9ecef;
margin-bottom: 16px;
}
.header-label[b-t3009d8mk9] {
font-size: 12px;
color: #6c757d;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.passenger-row[b-t3009d8mk9] {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 16px;
align-items: center;
padding: 12px 0;
}
.passenger-item[b-t3009d8mk9] {
display: flex;
align-items: center;
gap: 8px;
}
.passenger-name[b-t3009d8mk9] {
font-size: 14px;
font-weight: 600;
color: #2c3e50;
}
.passenger-gender[b-t3009d8mk9], .passenger-age[b-t3009d8mk9], .passenger-seat[b-t3009d8mk9] {
font-size: 14px;
color: #2c3e50;
}
.passenger-status.confirmed[b-t3009d8mk9] {
color: #4CAF50;
font-weight: 600;
font-size: 14px;
}
.passenger-item i[b-t3009d8mk9] {
color: #6c757d;
font-size: 16px;
}
/* Email Notification */
.email-notification[b-t3009d8mk9] {
background: #f8f9fa;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
text-align: center;
}
.email-notification p[b-t3009d8mk9] {
margin: 0 0 8px 0;
font-size: 14px;
color: #6c757d;
}
.email-info[b-t3009d8mk9] {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.email-info i[b-t3009d8mk9] {
color: #4CAF50;
margin-right: 4px;
}
.email-info span[b-t3009d8mk9] {
font-size: 14px;
font-weight: 600;
color: #2c3e50;
}
/* My Bookings Section */
.my-bookings-section[b-t3009d8mk9] {
text-align: center;
padding: 16px;
}
.my-bookings-section p[b-t3009d8mk9] {
margin: 0;
font-size: 14px;
color: #6c757d;
}
.my-bookings-link[b-t3009d8mk9] {
color: #e91e63;
text-decoration: none;
font-weight: 600;
}
.my-bookings-link:hover[b-t3009d8mk9] {
text-decoration: underline;
}
/* Loading */
.loading[b-t3009d8mk9] {
text-align: center;
padding: 40px;
color: #6c757d;
}
/* Responsive Design */
@media (max-width: 768px) {
.confirmation-container[b-t3009d8mk9] {
padding: 16px;
}
.main-content-layout[b-t3009d8mk9] {
grid-template-columns: 1fr;
gap: 16px;
}
.confirmation-header[b-t3009d8mk9] {
flex-direction: column;
text-align: center;
gap: 16px;
}
.confirmation-icon[b-t3009d8mk9] {
margin-right: 0;
margin-bottom: 8px;
}
.journey-header[b-t3009d8mk9] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.detail-row[b-t3009d8mk9] {
grid-template-columns: 1fr;
gap: 16px;
}
.boarding-dropping[b-t3009d8mk9] {
grid-template-columns: 1fr;
gap: 16px;
}
.passenger-header[b-t3009d8mk9], .passenger-row[b-t3009d8mk9] {
grid-template-columns: 1fr;
gap: 8px;
}
.passenger-item[b-t3009d8mk9] {
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.email-info[b-t3009d8mk9] {
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 480px) {
.confirmation-container[b-t3009d8mk9] {
padding: 12px;
}
.journey-section[b-t3009d8mk9], .fare-section[b-t3009d8mk9], .passenger-section[b-t3009d8mk9] {
padding: 16px;
}
.confirmation-header[b-t3009d8mk9] {
padding: 16px;
}
.confirmation-content h2[b-t3009d8mk9] {
font-size: 20px;
}
.savings-message[b-t3009d8mk9] {
font-size: 14px;
}
}
/* _content/HappyBus.Ux/Components/Pages/ViewTicket.razor.rz.scp.css */
/* View Ticket Page Styles */
.view-ticket-container[b-b2878pnjxm] {
min-height: 100vh;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.view-ticket-card[b-b2878pnjxm] {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 500px;
position: relative;
overflow: hidden;
}
.view-ticket-card[b-b2878pnjxm]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #dc3545, #fd7e14, #20c997);
}
.card-header[b-b2878pnjxm] {
text-align: center;
margin-bottom: 40px;
}
.header-icon[b-b2878pnjxm] {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #dc3545, #c0392b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 10px 20px rgba(220, 53, 69, 0.3);
}
.header-icon i[b-b2878pnjxm] {
font-size: 32px;
color: white;
}
.card-header h1[b-b2878pnjxm] {
font-size: 32px;
font-weight: 700;
color: #333;
margin: 0 0 10px 0;
}
.card-header p[b-b2878pnjxm] {
color: #666;
font-size: 16px;
margin: 0;
line-height: 1.5;
}
.form-container[b-b2878pnjxm] {
display: flex;
flex-direction: column;
gap: 24px;
}
.input-group[b-b2878pnjxm] {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-group label[b-b2878pnjxm] {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #333;
font-size: 14px;
}
.input-group label i[b-b2878pnjxm] {
color: #dc3545;
font-size: 16px;
}
.form-input[b-b2878pnjxm] {
padding: 16px 20px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.form-input:focus[b-b2878pnjxm] {
outline: none;
border-color: #dc3545;
background: white;
box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}
.form-input[b-b2878pnjxm]::placeholder {
color: #999;
}
.button-group[b-b2878pnjxm] {
display: flex;
gap: 16px;
margin-top: 8px;
}
.btn-primary[b-b2878pnjxm], .btn-secondary[b-b2878pnjxm] {
flex: 1;
padding: 16px 24px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
}
.btn-primary[b-b2878pnjxm] {
background: linear-gradient(135deg, #dc3545, #c0392b);
color: white;
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}
.btn-primary:hover[b-b2878pnjxm] {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(220, 53, 69, 0.4);
}
.btn-secondary[b-b2878pnjxm] {
background: white;
color: #333;
border: 2px solid #e9ecef;
}
.btn-secondary:hover[b-b2878pnjxm] {
background: #f8f9fa;
border-color: #dc3545;
transform: translateY(-2px);
}
.response-message[b-b2878pnjxm] {
margin-top: 24px;
padding: 16px 20px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
}
.response-message.success[b-b2878pnjxm] {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.response-message.error[b-b2878pnjxm] {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.response-message i[b-b2878pnjxm] {
font-size: 18px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.view-ticket-container[b-b2878pnjxm] {
padding: 10px;
}
.view-ticket-card[b-b2878pnjxm] {
padding: 30px 20px;
}
.card-header h1[b-b2878pnjxm] {
font-size: 28px;
}
.header-icon[b-b2878pnjxm] {
width: 60px;
height: 60px;
}
.header-icon i[b-b2878pnjxm] {
font-size: 24px;
}
.button-group[b-b2878pnjxm] {
flex-direction: column;
}
.btn-primary[b-b2878pnjxm], .btn-secondary[b-b2878pnjxm] {
width: 100%;
}
}