:root {
--primary-color: #20b2aa;
--primary-light: #40c9c0;
--primary-dark: #17a398;
--secondary-color: #20b2aa;
--accent-color: #40c9c0;
--bg-color: #f5f7fa;
--card-bg: rgba(255, 255, 255, 0.95);
--modal-overlay: rgba(26, 155, 158, 0.3);
--text-dark: #2c3e50;
--text-regular: #555555;
--text-light: #7f8c8d;
--text-white: #ffffff;
--success-color: #27ae60;
--warning-color: #f39c12;
--error-color: #e74c3c;
--info-color: #3498db;
--border-radius: 6px;
--card-radius: 12px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--spacing-xs: 5px;
--spacing-sm: 10px;
--spacing-md: 15px;
--spacing-lg: 20px;
--spacing-xl: 30px;
--spacing-xxl: 40px;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
--shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.2);
--calendar-selected: #20b2aa;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-regular);
line-height: 1.6;
position: relative;
min-height: 100vh;
overflow-x: hidden;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
.slide-up {
animation: slideUp 0.5s ease-out forwards;
}
.pulse {
animation: pulse 2s infinite;
}
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.no-scroll {
overflow: hidden;
}
#bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(26, 155, 158, 0.1), rgba(15, 180, 183, 0.1));
z-index: -1;
}
.nav-menu {
background: transparent;
padding: 15px 0;
top: 0;
z-index: 100;
transition: all 0.3s ease;
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-white);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.logo i {
color: var(--accent-color);
}
.nav-buttons {
display: flex;
align-items: center;
gap: 15px;
justify-content: center;
flex: 1;
}
.nav-btn {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text-white);
background: rgba(255, 255, 255, 0.1);
border: 2px solid transparent;
border-radius: 50px;
padding: 10px 20px;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.nav-btn:hover::before,
.nav-btn.active::before {
left: 0;
}
.nav-btn:hover,
.nav-btn.active {
border-color: var(--accent-color);
transform: translateY(-2px);
}
.nav-btn i {
font-size: 0.9rem;
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
color: var(--text-white);
font-size: 1.5rem;
cursor: pointer;
padding: 5px;
}
.main-content {
padding: 40px 0 60px;
min-height: calc(100vh - 70px);
}
.page-header {
text-align: left;
margin-bottom: 30px;
margin-top: 60px;
color: var(--text-white);
border-radius: 16px;
padding: 24px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.page-header h1 {
display: none;
}
.search-summary {
display: none;
}
.search-summary-item {
display: flex;
align-items: center;
gap: 5px;
}
.search-summary-item i {
color: var(--accent-color);
}
.content-wrapper {
display: grid;
grid-template-columns: 300px 1fr;
gap: 30px;
align-items: start;
}
.filter-section {
background: rgba(255, 255, 255, 0.95);
border-radius: var(--card-radius);
padding: var(--spacing-lg);
box-shadow: var(--shadow-md);
position: relative;
top: auto;
height: auto;
max-height: none;
overflow: visible;
}
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--bg-color);
}
.filter-header h2 {
font-size: 1.25rem;
color: var(--primary-color);
font-weight: 600;
}
.reset-btn {
background: none;
border: none;
color: var(--secondary-color);
font-size: 0.85rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
transition: var(--transition);
padding: 5px 10px;
border-radius: var(--border-radius);
}
.reset-btn:hover {
background: rgba(0, 147, 188, 0.1);
transform: translateX(2px);
}
.filter-group {
margin-bottom: var(--spacing-xl);
}
.filter-group:last-child {
margin-bottom: 0;
}
.filter-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
gap: 8px;
}
.filter-title i {
color: var(--primary-color);
font-size: 0.9rem;
}
.range-container {
padding: 0 10px;
}
.range-labels {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--text-light);
margin-bottom: var(--spacing-sm);
font-weight: 500;
}
.range-value {
color: var(--primary-color);
font-weight: 600;
}
.range-slider-wrapper {
position: relative;
padding: 15px 0;
}
.range-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
background: #e0e0e0;
border-radius: 3px;
transform: translateY(-50%);
}
.range-fill {
position: absolute;
top: 50%;
left: 0;
height: 6px;
background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
border-radius: 3px;
transform: translateY(-50%);
transition: width 0.2s ease;
}
.range-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8.5px;
background: transparent;
outline: none;
position: relative;
z-index: 2;
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--text-white);
border: 3px solid var(--secondary-color);
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.range-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: var(--shadow-md);
}
.range-slider::-webkit-slider-thumb:active {
transform: scale(1.1);
}
.checkbox-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.checkbox-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
padding: 8px 12px;
border-radius: var(--border-radius);
transition: var(--transition);
position: relative;
}
.checkbox-item:hover {
background: rgba(0, 84, 105, 0.05);
}
.checkbox-item input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-custom {
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
flex-shrink: 0;
}
.checkbox-item input[type="checkbox"]:checked ~ .checkbox-custom {
background: var(--primary-color);
border-color: var(--primary-color);
}
.checkbox-custom::after {
content: "";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--text-white);
font-size: 0.75rem;
opacity: 0;
transform: scale(0);
transition: var(--transition);
}
.checkbox-item input[type="checkbox"]:checked ~ .checkbox-custom::after {
opacity: 1;
transform: scale(1);
}
.checkbox-text {
font-size: 0.9rem;
color: var(--text-dark);
user-select: none;
}
.checkbox-count {
margin-left: auto;
font-size: 0.8rem;
color: var(--text-light);
padding: 2px 8px;
border-radius: 12px;
}
.results-section {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.results-header {
background: var(--card-bg);
border-radius: var(--card-radius);
padding: var(--spacing-md) var(--spacing-lg);
box-shadow: var(--shadow-sm);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.results-info {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.results-count {
font-size: 1rem;
color: var(--text-dark);
font-weight: 600;
height: 100%;
}
.results-count span {
color: var(--primary-color);
font-size: 1.0rem;
}
@media (max-width: 768px) {
.results-count span.provider-debug {
display: none;
}
}
.view-options {
display: none;
gap: var(--spacing-sm);
}
.view-btn {
background: none;
border: 1px solid #ddd;
padding: 6px 10px;
border-radius: var(--border-radius);
cursor: pointer;
transition: var(--transition);
color: var(--text-light);
}
.view-btn.active {
background: var(--primary-color);
color: var(--text-white);
border-color: var(--primary-color);
}
.flight-cards.grid-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--spacing-md);
}
.flight-cards.grid-view .flight-card {
display: flex;
flex-direction: column;
}
.flight-cards.grid-view .flight-card-content {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.flight-cards.grid-view .airline-info {
flex-direction: row;
justify-content: flex-start;
text-align: left;
gap: var(--spacing-md);
}
.flight-cards.grid-view .flight-timeline {
flex-direction: column;
gap: var(--spacing-md);
}
.flight-cards.grid-view .flight-price-section {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: var(--spacing-md);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sort-options {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.sort-label {
font-size: 0.95rem;
color: #ffffff;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.sort-dropdown {
position: relative;
width: auto;
}
.sort-selected {
background: linear-gradient(135deg, #17a398 0%, #20b2aa 50%, #40c9c0 100%);
border: none;
padding: 12px 20px;
border-radius: 50px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
transition: all 0.3s ease;
white-space: nowrap;
font-weight: 600;
color: #ffffff;
box-shadow: 0 4px 16px rgba(32, 178, 170, 0.35);
}
.sort-selected:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(32, 178, 170, 0.45);
}
.sort-selected i {
margin-left: auto;
transition: transform 0.3s ease;
}
.sort-dropdown.open .sort-selected i {
transform: rotate(180deg);
}
.sort-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
margin-top: 5px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 100;
min-width: 200px;
width: max-content;
padding: 0;
overflow: hidden;
}
.sort-dropdown.open .sort-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sort-option {
padding: 14px 18px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
color: #1e293b;
border-radius: 0;
margin: 0;
border-bottom: 1px solid #e2e8f0;
}
.sort-option:last-child {
border-bottom: none;
}
.sort-option:hover {
background: #f0fdfa;
color: #20b2aa;
}
.sort-option.active {
background: #f0fdfa;
color: #20b2aa;
font-weight: 600;
}
.sort-option i {
width: 20px;
text-align: center;
color: #20b2aa;
font-size: 1rem;
}
.sort-selected i {
margin-left: auto;
transition: transform 0.3s ease;
color: #ffffff;
}
.flight-cards {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.flight-card {
background: var(--card-bg);
border-radius: var(--card-radius);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
overflow: hidden;
opacity: 0;
animation: slideUp 0.5s ease forwards;
}
.flight-card:nth-child(1) { animation-delay: 0.1s; }
.flight-card:nth-child(2) { animation-delay: 0.15s; }
.flight-card:nth-child(3) { animation-delay: 0.2s; }
.flight-card:nth-child(4) { animation-delay: 0.25s; }
.flight-card:nth-child(5) { animation-delay: 0.3s; }
.flight-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
transition: left 0.3s ease;
}
.flight-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.flight-card:hover::before {
left: 0;
}
.flight-card-content {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: var(--spacing-lg);
align-items: center;
}
.airline-info {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
text-align: center;
width: 120px;
flex-shrink: 0;
}
.airline-logo {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--text-white);
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.3rem;
box-shadow: var(--shadow-sm);
position: relative;
}
.airline-logo::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 10px;
border: 3px solid transparent;
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
}
.flight-card:hover .airline-logo::after {
opacity: 1;
}
.airline-name {
font-size: 0.85rem;
color: var(--text-regular);
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flight-details {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.flight-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xs);
}
.flight-number {
font-size: 0.9rem;
color: var(--text-light);
font-weight: 500;
}
.flight-tags {
display: flex;
gap: var(--spacing-xs);
}
.flight-tag {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
}
.tag-best-value {
background: rgba(39, 174, 96, 0.1);
color: var(--success-color);
}
.tag-fastest {
background: rgba(52, 152, 219, 0.1);
color: var(--info-color);
}
.tag-cheapest {
background: rgba(243, 156, 18, 0.1);
color: var(--warning-color);
}
.flight-timeline {
display: flex;
align-items: center;
gap: var(--spacing-md);
position: relative;
}
.timeline-point {
display: flex;
flex-direction: column;
align-items: center;
z-index: 2;
}
.timeline-time {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 4px;
}
.timeline-airport {
font-size: 0.9rem;
color: var(--text-regular);
font-weight: 500;
cursor: default;
}
.timeline-airport[title]:hover {
text-decoration: underline dotted;
color: #006d75;
}
.timeline-date {
font-size: 0.8rem;
color: var(--text-light);
}
.timeline-connector {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 0 var(--spacing-md);
}
.timeline-line-wrapper {
width: 100%;
position: relative;
}
.timeline-line {
width: 100%;
height: 2px;
background: #e0e0e0;
position: relative;
overflow: hidden;
}
.timeline-line::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
animation: flight-path 3s infinite;
}
@keyframes flight-path {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes plane-hover {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-3px); }
}
.timeline-duration {
font-size: 0.85rem;
color: var(--text-light);
margin-top: var(--spacing-xs);
}
.flight-meta {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-top: var(--spacing-sm);
padding-top: var(--spacing-sm);
border-top: 1px dashed #e0e0e0;
}
.meta-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
color: var(--text-regular);
}
.meta-item i {
color: var(--primary-color);
font-size: 0.9rem;
}
.flight-price-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--spacing-sm);
}
.price-container {
display: flex;
flex-direction: column;
align-items: center;
}
.price-label {
font-size: 0.8rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.price-amount {
font-size: 2rem;
font-weight: 700;
color: #20b2aa;
line-height: 1;
margin-top: 4px;
}
.price-currency {
font-size: 1.5rem;
font-weight: 500;
color: #20b2aa;
}
.price-per-person {
font-size: 0.8rem;
color: var(--text-light);
}
.select-flight-btn {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--text-white);
border: none;
padding: 12px 24px;
border-radius: var(--border-radius);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
position: relative;
overflow: hidden;
width: 100%;
max-width: 160px;
}
.select-flight-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.select-flight-btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.select-flight-btn:hover::before {
}
.select-flight-btn:active {
transform: translateY(0);
}

/* ═══════════════ PROVIDER ACCORDION ═══════════════ */
.provider-panel {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(0, 109, 117, 0.15);
    margin-top: 12px;
    padding-top: 12px;
}
.provider-panel-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 4px;
}
.provider-panel-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}
.provider-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.provider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.provider-row:last-child {
    border-bottom: none;
}
.provider-row:hover {
    background: rgba(0, 109, 117, 0.06);
}
.provider-logo-wrap {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.provider-logo-img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    border-radius: 4px;
}
.provider-logo-fallback {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #006d75, #00a5b0);
    color: white;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.provider-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
}
.provider-price {
    font-size: 1rem;
    font-weight: 700;
    color: #006d75;
    white-space: nowrap;
}
.provider-arrow {
    font-size: 0.7rem;
    color: #94a3b8;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.provider-row:hover .provider-arrow {
    opacity: 1;
}
.flight-card.providers-expanded,
.flight-card.providers-expanded:hover {
    transform: none !important;
}

.flight-actions {
grid-column: 1 / -1;
display: flex;
justify-content: center;
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.details-toggle {
background: none;
border: none;
color: var(--secondary-color);
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
transition: var(--transition);
padding: 8px 16px;
border-radius: var(--border-radius);
}
.details-toggle:hover {
background: rgba(0, 147, 188, 0.1);
}
.details-toggle i {
transition: transform 0.3s ease;
}
.details-toggle.active i {
transform: rotate(180deg);
}
.flight-expanded-details {
grid-column: 1 / -1;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.flight-expanded-details.active {
max-height: 1000px;
margin-top: var(--spacing-lg);
}
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
padding: var(--spacing-lg);
background: var(--bg-color);
border-radius: var(--border-radius);
}
.detail-section {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.detail-section h4 {
font-size: 0.95rem;
color: var(--text-dark);
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.detail-section h4 i {
color: var(--primary-color);
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--text-regular);
padding: 4px 0;
}
.detail-label {
color: var(--text-light);
}
.stops-timeline {
grid-column: 1 / -1;
padding: var(--spacing-md);
background: rgba(26, 155, 158, 0.03);
border-radius: var(--border-radius);
border-left: 3px solid var(--primary-color);
}
.stops-timeline h4 {
color: var(--primary-color);
font-size: 1rem;
margin-bottom: var(--spacing-md);
font-weight: 600;
}
.stop-item {
display: grid;
grid-template-columns: 100px 1fr auto;
gap: var(--spacing-md);
align-items: center;
padding: var(--spacing-sm) 0;
position: relative;
}
.stop-item:not(:last-child)::after {
content: "";
position: absolute;
left: 50px;
bottom: -10px;
width: 2px;
height: 30px;
background: var(--primary-color);
opacity: 0.3;
}
.stop-time {
font-weight: 600;
color: var(--text-dark);
}
.stop-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.stop-airport {
font-weight: 500;
color: var(--text-dark);
}
.stop-city {
font-size: 0.85rem;
color: var(--text-light);
}
.stop-duration {
font-size: 0.85rem;
color: var(--primary-color);
background: rgba(26, 155, 158, 0.1);
padding: 4px 12px;
border-radius: 20px;
white-space: nowrap;
}
.amenities-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.amenity-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
padding: 4px 12px;
border-radius: 20px;
background: var(--bg-color);
}
.amenity-item.available {
color: var(--success-color);
background: rgba(39, 174, 96, 0.1);
}
.amenity-item.available i {
color: var(--success-color);
}
.amenity-item.unavailable {
color: var(--text-light);
opacity: 0.6;
text-decoration: line-through;
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
flex-direction: column;
gap: var(--spacing-lg);
}
.loading-spinner {
width: 60px;
height: 60px;
position: relative;
}
.loading-spinner::before,
.loading-spinner::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid transparent;
}
.loading-spinner::before {
border-top-color: #ffffff !important;
animation: spin 1.5s linear infinite;
}
.loading-spinner::after {
border-bottom-color: rgba(255, 255, 255, 0.6) !important;
animation: spin 1.5s linear infinite reverse;
inset: 8px;
}
.loading-text {
font-size: 1.1rem;
color: #ffffff !important;
font-weight: 500;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.no-results {
background: rgba(255, 255, 255, 0.95);
border-radius: var(--card-radius);
padding: var(--spacing-xxl);
text-align: center;
box-shadow: var(--shadow-md);
}
.no-results-icon {
font-size: 4rem;
color: var(--primary-color);
opacity: 0.3;
margin-bottom: var(--spacing-lg);
}
.no-results-title {
font-size: 1.5rem;
color: var(--text-dark);
margin-bottom: var(--spacing-md);
}
.no-results-text {
color: var(--text-regular);
margin-bottom: var(--spacing-xl);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.back-button {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--primary-color);
color: var(--text-white);
text-decoration: none;
padding: 12px 24px;
border-radius: var(--border-radius);
transition: var(--transition);
font-weight: 500;
}
.back-button:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.flight-card-skeleton {
background: var(--card-bg);
border-radius: var(--card-radius);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
}
.skeleton-content {
display: grid;
grid-template-columns: 60px 1fr 120px;
gap: var(--spacing-lg);
align-items: center;
}
.skeleton-airline {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--bg-color);
}
.skeleton-details {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.skeleton-line {
height: 20px;
background: var(--bg-color);
border-radius: 4px;
}
.skeleton-line.short {
width: 60%;
}
.skeleton-price {
width: 100px;
height: 40px;
background: var(--bg-color);
border-radius: 4px;
}
.cart-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 100;
}
.cart-btn {
background: var(--primary-color);
color: var(--text-white);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-lg);
transition: var(--transition);
position: relative;
border: none;
}
.cart-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: var(--shadow-xl);
background: var(--primary-light);
}
.cart-btn:active {
transform: translateY(-1px) scale(1.02);
}
.cart-icon {
font-size: 1.4rem;
z-index: 2;
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--warning-color);
color: var(--text-white);
border-radius: 50%;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.cart-count.active {
transform: scale(1);
}
.cart-count.bounce {
animation: bounce 0.5s ease;
}
@keyframes bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3); }
}
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(26, 155, 158, 0.4);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-backdrop.active {
opacity: 1;
visibility: visible;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
width: 90%;
max-width: 900px;
max-height: 92vh;
background: var(--text-white);
border-radius: var(--card-radius);
box-shadow: var(--shadow-xl);
opacity: 0;
visibility: hidden;
transition: var(--transition);
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.modal-header {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--text-white);
padding: var(--spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.modal-title {
font-size: 1.3rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.close-modal {
background: rgba(255, 255, 255, 0.2);
border: none;
color: var(--text-white);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
font-size: 1.2rem;
}
.close-modal:hover {
background: rgba(255, 255, 255, 0.3);
}
.modal-body {
flex: 1;
padding: var(--spacing-lg);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--primary-color) var(--bg-color);
}
.modal-footer {
padding: var(--spacing-lg);
border-top: 1px solid rgba(0, 0, 0, 0.1);
background: var(--bg-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
gap: var(--spacing-md);
}
.cart-items {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
min-height: 200px;
}
.cart-item {
background: rgba(26, 155, 158, 0.05);
border-radius: var(--border-radius);
padding: var(--spacing-md);
display: grid;
grid-template-columns: 50px 1fr auto;
gap: var(--spacing-md);
align-items: center;
transition: var(--transition);
opacity: 0;
animation: slideInRight 0.3s ease forwards;
border: 1px solid rgba(26, 155, 158, 0.1);
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.cart-item:hover {
box-shadow: var(--shadow-sm);
transform: translateX(-2px);
background: rgba(26, 155, 158, 0.08);
}
.cart-item-logo {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--text-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.1rem;
}
.cart-item-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-item-info h4 {
font-size: 1rem;
color: var(--text-dark);
font-weight: 600;
}
.cart-flight-route {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-regular);
}
.cart-flight-route i {
color: var(--secondary-color);
font-size: 0.8rem;
}
.cart-item-price-section {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.cart-item-price {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
}
.remove-item {
background: none;
border: none;
color: var(--text-light);
font-size: 0.8rem;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--border-radius);
transition: var(--transition);
display: flex;
align-items: center;
gap: 4px;
}
.remove-item:hover {
background: rgba(231, 76, 60, 0.1);
color: var(--error-color);
transform: translateX(-2px);
}
.empty-cart-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--spacing-xxl) 0;
gap: var(--spacing-md);
min-height: 300px;
}
.empty-cart-icon {
font-size: 3rem;
color: var(--text-light);
opacity: 0.5;
}
.empty-cart-message p {
color: var(--text-regular);
font-size: 0.95rem;
}
.empty-cart-message p:first-of-type {
font-weight: 600;
color: var(--text-dark);
}
.price-summary {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--text-regular);
}
.summary-item.total {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
padding-top: var(--spacing-sm);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.total-price {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-color);
}
.cart-actions {
display: flex;
gap: var(--spacing-sm);
}
.btn-secondary {
background: var(--text-white);
border: 2px solid var(--primary-color);
color: var(--primary-color);
padding: 10px 20px;
border-radius: var(--border-radius);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
}
.btn-secondary:hover {
background: var(--primary-color);
color: var(--text-white);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--text-white);
border: none;
padding: 10px 20px;
border-radius: var(--border-radius);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.checkout-modal .modal {
max-width: 800px;
}
.checkout-progress {
display: flex;
justify-content: space-between;
padding: var(--spacing-lg);
background: rgba(26, 155, 158, 0.05);
position: relative;
margin-bottom: var(--spacing-lg);
border-radius: var(--border-radius);
}
.checkout-progress::before {
content: "";
position: absolute;
top: 50%;
left: 40px;
right: 40px;
height: 2px;
background: #e0e0e0;
transform: translateY(-50%);
z-index: 1;
}
.progress-line {
position: absolute;
top: 50%;
left: 40px;
right: 40px;
height: 2px;
background: var(--primary-color);
transform: translateY(-50%);
transition: width 0.5s ease;
z-index: 2;
}
.checkout-step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
position: relative;
z-index: 3;
}
.step-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--text-white);
border: 3px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
font-weight: 600;
color: var(--text-light);
}
.checkout-step.active .step-circle {
border-color: var(--primary-color);
color: var(--primary-color);
transform: scale(1.1);
}
.checkout-step.completed .step-circle {
background: var(--success-color);
border-color: var(--success-color);
color: var(--text-white);
}
.step-label {
font-size: 0.85rem;
color: var(--text-light);
font-weight: 500;
transition: var(--transition);
text-align: center;
}
.checkout-step.active .step-label {
color: var(--primary-color);
}
.checkout-step.completed .step-label {
color: var(--success-color);
}
.checkout-form {
display: grid;
gap: var(--spacing-lg);
}
.form-section {
display: grid;
gap: var(--spacing-md);
}
.form-section-title {
font-size: 1.2rem;
color: var(--primary-color);
font-weight: 600;
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--bg-color);
margin-bottom: var(--spacing-md);
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.form-label {
font-size: 0.9rem;
color: var(--text-dark);
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.form-label .required {
color: var(--error-color);
}
.form-control {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: var(--border-radius);
font-size: 0.95rem;
transition: var(--transition);
background: var(--text-white);
}
.form-control:focus {
border-color: var(--secondary-color);
outline: none;
box-shadow: 0 0 0 4px rgba(0, 147, 188, 0.1);
}
.form-control.is-valid {
border-color: var(--success-color);
}
.form-control.is-invalid {
border-color: var(--error-color);
}
.form-error {
font-size: 0.8rem;
color: var(--error-color);
margin-top: 4px;
display: none;
}
.form-control.is-invalid ~ .form-error {
display: block;
}
.payment-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.payment-method {
border: 2px solid #e0e0e0;
border-radius: var(--border-radius);
padding: var(--spacing-md);
cursor: pointer;
transition: var(--transition);
text-align: center;
background: var(--text-white);
}
.payment-method:hover {
border-color: var(--secondary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.payment-method.active {
border-color: var(--primary-color);
background: rgba(26, 155, 158, 0.05);
}
.payment-icon {
font-size: 2rem;
color: var(--primary-color);
margin-bottom: var(--spacing-xs);
}
.payment-name {
font-size: 0.9rem;
color: var(--text-dark);
font-weight: 500;
}
.confirmation-container {
text-align: center;
padding: var(--spacing-xxl);
}
.confirmation-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--success-color), #2ecc71);
color: var(--text-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
margin: 0 auto var(--spacing-lg);
animation: checkmark 0.6s ease;
box-shadow: var(--shadow-lg);
}
@keyframes checkmark {
0% { transform: scale(0) rotate(-45deg); }
50% { transform: scale(1.2) rotate(-45deg); }
100% { transform: scale(1) rotate(0); }
}
.confirmation-title {
font-size: 2rem;
color: var(--text-dark);
margin-bottom: var(--spacing-sm);
}
.confirmation-message {
color: var(--text-regular);
margin-bottom: var(--spacing-xl);
font-size: 1.1rem;
}
.booking-reference {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: var(--text-white);
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--card-radius);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: var(--spacing-xl);
display: inline-block;
box-shadow: var(--shadow-md);
}
.toast {
position: fixed;
bottom: 30px;
right: 30px;
padding: 16px 24px;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 12px;
z-index: 9999;
animation: toastSlideIn 0.3s ease;
max-width: 400px;
}
@keyframes toastSlideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast-success {
background: var(--success-color);
color: var(--text-white);
}
.toast-error {
background: var(--error-color);
color: var(--text-white);
}
.toast-warning {
background: var(--warning-color);
color: var(--text-white);
}
.toast-info {
background: var(--info-color);
color: var(--text-white);
}
.toast i {
font-size: 1.2rem;
}
.toast-message {
flex: 1;
font-size: 0.95rem;
font-weight: 500;
}
.toast-close {
background: none;
border: none;
color: currentColor;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s ease;
font-size: 1.2rem;
}
.toast-close:hover {
opacity: 1;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes loading {
to {
background-position: 200% 0;
}
}
@media screen and (max-width: 1200px) {
.container {
max-width: 100%;
}
.content-wrapper {
grid-template-columns: 280px 1fr;
gap: 20px;
}
.flight-card-content {
gap: var(--spacing-md);
}
.search-edit-bar {
grid-template-columns: 2fr 1.5fr 1fr 0.8fr;
gap: 10px;
}.search-btn {
grid-column: 1 / -1;
margin-top: 8px;
}
}
@media screen and (max-width: 992px) {
.nav-content {
position: relative;
}
.mobile-menu-toggle {
display: block;
}
.nav-buttons {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
padding: var(--spacing-md);
gap: var(--spacing-sm);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.nav-buttons.active {
max-height: 400px;
}
.nav-btn {
width: 100%;
justify-content: center;
}
.content-wrapper {
grid-template-columns: 1fr;
}
.filter-section {
position: static;
max-height: none;
margin-bottom: var(--spacing-lg);
}
.results-header {
flex-direction: column;
align-items: stretch;
}
.results-info {
justify-content: space-between;
}
.sort-options {
width: 100%;
}
.sort-dropdown {
width: 100%;
}
.sort-selected {
width: 100%;
}
.modal {
width: 95%;
max-height: 95vh;
}
.page-header {
margin: 70px 20px 25px;
padding: 20px;
}.search-field.route-field {
grid-column: 1 / -1;
}.search-field.date-field {
grid-column: 1 / -1;
}
}
@media screen and (max-width: 768px) {
.page-header h1 {
font-size: 1.8rem;
}
.search-summary {
font-size: 0.95rem;
}
.flight-card {
padding: var(--spacing-md);
}
.flight-card-content {
grid-template-columns: 1fr !important;
gap: var(--spacing-md);
}
.airline-info {
flex-direction: row;
justify-content: flex-start;
}
.airline-logo {
width: 50px;
height: 50px;
font-size: 1.1rem;
}
.flight-timeline {
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-md) 0;
}
.timeline-connector {
display: none;
}
.timeline-point {
width: 100%;
flex-direction: row;
justify-content: space-between;
padding: var(--spacing-sm);
background: var(--bg-color);
border-radius: var(--border-radius);
}
.flight-price-section {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: var(--spacing-md);
border-top: 1px solid rgba(0, 0, 0, 0.05);
gap: 12px;
}
.price-amount {
font-size: 1.5rem;
}
.select-flight-btn {
max-width: none;
width: auto;
min-width: 110px;
padding: 10px 20px;
font-size: 0.9rem;
white-space: nowrap;
}
.details-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.filter-section {
padding: var(--spacing-md);
}
.checkbox-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xs);
}
.checkbox-item {
padding: 6px 10px;
}
.checkbox-text {
font-size: 0.85rem;
}
.cart-container {
bottom: 20px;
right: 20px;
}
.cart-btn {
width: 50px;
height: 50px;
}
.cart-icon {
font-size: 1.2rem;
}
.checkout-progress {
padding: var(--spacing-md);
}
.step-circle {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.step-label {
font-size: 0.75rem;
}
.form-row {
grid-template-columns: 1fr;
}
.payment-methods {
grid-template-columns: 1fr;
}
.page-header {
margin: 70px 15px 20px;
padding: 16px;
}.search-edit-bar {
grid-template-columns: 1fr;
gap: 10px;
}.search-field.route-field {
flex-direction: column;
gap: 10px;
}.search-field.date-field {
flex-direction: column;
gap: 10px;
}.search-input,
.search-select,
.passengers-dropdown-trigger {
padding: 10px 12px;
padding-left: 38px;
font-size: 0.9rem;
}.search-field > i {
left: 12px;
font-size: 0.9rem;
}.search-btn {
padding: 12px 24px;
font-size: 0.9rem;
}
}
@media screen and (max-width: 480px) {
.provider-row { padding: 8px 8px; gap: 8px; }
.provider-logo-wrap { width: 28px; height: 28px; }
.provider-logo-img { max-width: 28px; max-height: 28px; }
.provider-price { font-size: 0.9rem; }
.provider-arrow { opacity: 1; }
.main-content {
padding: 20px 0 40px;
}
.container {
padding: 0 15px;
}
.flight-meta {
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.meta-item {
font-size: 0.8rem;
}
.flight-price-section {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.price-container {
text-align: center;
}
.select-flight-btn {
width: 100%;
max-width: none;
padding: 12px 20px;
font-size: 0.95rem;
text-align: center;
justify-content: center;
}
.cart-actions {
flex-direction: column;
width: 100%;
}
.btn-secondary,
.btn-primary {
width: 100%;
justify-content: center;
}
.toast {
left: 20px;
right: 20px;
bottom: 20px;
}
.page-header {
margin: 65px 10px 15px;
padding: 12px;
}.search-edit-bar {
padding: 12px;
gap: 8px;
}.search-input,
.search-select,
.passengers-dropdown-trigger {
padding: 9px 10px;
padding-left: 36px;
font-size: 0.85rem;
}.search-btn {
padding: 10px 20px;
font-size: 0.85rem;
}.passenger-row {
padding: 10px 6px;
}.counter-btn {
width: 28px;
height: 28px;
font-size: 0.9rem;
}.autocomplete-dropdown {
max-height: 250px;
}.autocomplete-item {
padding: 12px 14px;
}.calendar-dropdown {
min-width: 260px;
}
}
@media print {
.nav-menu,
.filter-section,
.cart-container,
.modal-backdrop,
.toast,
#bg-video {
display: none !important;
}
body {
background: white;
color: black;
}
.flight-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 109, 117, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-backdrop.active {
opacity: 1;
visibility: visible;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
width: 92%;
max-width: 650px;
max-height: 90vh;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex !important;
flex-direction: column;
overflow: hidden;
pointer-events: none;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
pointer-events: auto;
}
.modal-header {
background: linear-gradient(135deg, #006d75 0%, #00a5b0 100%);
color: white;
padding: 24px 28px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}
.modal-title {
font-size: 1.4rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
margin: 0;
letter-spacing: -0.02em;
}
.modal-title i {
font-size: 1.5rem;
opacity: 0.95;
}
.close-modal {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 1.2rem;
}
.close-modal:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
.modal-body {
flex: 1;
padding: 28px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #00a5b0 #f1f5f9;
min-height: 200px;
background: white !important;
}
.modal-body::-webkit-scrollbar {
width: 8px;
}
.modal-body::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb {
background: #00a5b0;
border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
background: #006d75;
}
.cart-items {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 200px;
}
.empty-cart {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
color: #64748b;
min-height: 200px;
}
.empty-cart i {
font-size: 64px;
opacity: 0.3;
margin-bottom: 20px;
color: #94a3b8;
}
.empty-cart h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #475569;
font-weight: 600;
}
.empty-cart p {
color: #94a3b8;
font-size: 0.95rem;
}
.cart-item {
background: rgba(0, 109, 117, 0.05);
border-radius: 12px;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
transition: all 0.2s ease;
border: 1px solid rgba(0, 109, 117, 0.1);
animation: slideInCart 0.3s ease forwards;
}
@keyframes slideInCart {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.cart-item:hover {
box-shadow: 0 4px 12px rgba(0, 109, 117, 0.15);
transform: translateY(-2px);
background: rgba(0, 109, 117, 0.08);
}
.cart-item-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.cart-item-info h4 {
font-size: 1rem;
color: #1e293b;
font-weight: 600;
margin: 0;
}
.cart-flight-route {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: #475569;
}
.cart-flight-route i {
color: #00a5b0;
font-size: 0.8rem;
}
.cart-flight-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 0.85rem;
color: #64748b;
}
.cart-flight-meta span {
display: flex;
align-items: center;
gap: 6px;
}
.cart-flight-meta i {
color: #00a5b0;
font-size: 0.8rem;
}
.cart-item-price-section {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.cart-item-price {
font-size: 1.4rem;
font-weight: 700;
color: #006d75;
}
.remove-cart-item {
background: rgba(239, 68, 68, 0.1);
border: none;
color: #dc2626;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.9rem;
}
.remove-cart-item:hover {
background: rgba(239, 68, 68, 0.2);
transform: scale(1.1);
}
.remove-cart-item:active {
transform: scale(0.95);
}
.modal-footer {
padding: 24px 28px;
border-top: 1px solid #e2e8f0;
background: #f8fafc;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
gap: 20px;
flex-wrap: wrap;
}
.cart-total {
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-total-label {
font-size: 0.9rem;
color: #64748b;
font-weight: 500;
}
.total-price {
font-size: 1.8rem;
font-weight: 700;
color: #006d75;
}
.cart-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
flex: 1;
min-width: 300px;
}
.btn-secondary,
.btn-primary {
padding: 14px 24px;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
letter-spacing: 0.01em;
text-transform: none;
}
.btn-secondary {
background: #f1f5f9;
color: #475569;
border: 2px solid #e2e8f0;
}
.btn-secondary:hover {
background: #e2e8f0;
border-color: #cbd5e1;
transform: translateY(-1px);
}
.btn-secondary:active {
transform: translateY(0);
}
.btn-primary {
background: linear-gradient(135deg, #006d75, #00a5b0);
color: white;
box-shadow: 0 4px 12px rgba(0, 109, 117, 0.3);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 109, 117, 0.4);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-primary:disabled {
background: #cbd5e1;
color: #94a3b8;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
@media (max-width: 768px) {
.modal {
width: 95%;
max-width: none;
}
.modal-header {
padding: 20px;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 20px;
flex-direction: column;
align-items: stretch;
}
.cart-actions {
grid-template-columns: 1fr;
width: 100%;
min-width: auto;
}
.cart-item {
flex-direction: column;
align-items: flex-start;
}
.cart-item-price-section {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.checkout-modal {
max-width: 900px !important;
max-height: 95vh;
}
.checkout-modal .modal-body {
padding: 32px;
background: #f8fafc;
}
.checkout-progress {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 40px;
padding: 0;
background: none;
position: relative;
}
.checkout-progress::before {
content: "";
position: absolute;
top: 24px;
left: 80px;
right: 80px;
height: 3px;
background: #e2e8f0;
z-index: 1;
}
.checkout-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex: 1;
position: relative;
z-index: 2;
}
.step-number {
width: 48px;
height: 48px;
border-radius: 50%;
background: white;
border: 3px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
color: #94a3b8;
transition: all 0.3s ease;
position: relative;
}
.step-num {
display: block;
}
.step-check {
display: none;
font-size: 1.3rem;
}
.checkout-step.active .step-number {
background: #006d75;
border-color: #006d75;
color: white;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 109, 117, 0.3);
}
.checkout-step.completed .step-number {
background: #10b981;
border-color: #10b981;
color: white;
}
.checkout-step.completed .step-num {
display: none;
}
.checkout-step.completed .step-check {
display: block;
}
.step-label {
font-size: 0.9rem;
font-weight: 600;
color: #64748b;
text-align: center;
transition: all 0.3s ease;
}
.checkout-step.active .step-label {
color: #006d75;
}
.checkout-step.completed .step-label {
color: #10b981;
}
.step-content {
display: none;
animation: fadeInUp 0.4s ease;
}
.step-content.active {
display: block;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.checkout-section {
background: white;
border-radius: 16px;
padding: 28px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid #e2e8f0;
}
.section-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid #f1f5f9;
}
.section-title i {
color: #006d75;
font-size: 1.3rem;
}
.checkout-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 0.9rem;
font-weight: 600;
color: #475569;
}
.required {
color: #ef4444;
font-weight: 700;
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-icon {
position: absolute;
left: 16px;
color: #94a3b8;
font-size: 1rem;
pointer-events: none;
z-index: 2;
}
.form-input {
width: 100%;
padding: 14px 16px 14px 48px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
color: #1e293b;
background: white;
transition: all 0.2s ease;
}
.form-input:focus {
outline: none;
border-color: #006d75;
box-shadow: 0 0 0 3px rgba(0, 109, 117, 0.1);
}
.form-input::placeholder {
color: #cbd5e1;
}
.order-summary {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 2px dashed #cbd5e1;
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: white;
border-radius: 12px;
margin-bottom: 12px;
border: 1px solid #e2e8f0;
}
.summary-flight-info h5 {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 6px;
}
.summary-flight-route {
font-size: 0.85rem;
color: #64748b;
display: flex;
align-items: center;
gap: 8px;
}
.summary-flight-route i {
color: #00a5b0;
}
.summary-price {
font-size: 1.3rem;
font-weight: 700;
color: #006d75;
}
.summary-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: white;
border-radius: 12px;
margin-top: 16px;
border: 2px solid #006d75;
}
.summary-total-label {
font-size: 1.1rem;
font-weight: 600;
color: #475569;
}
.summary-total-price {
font-size: 1.8rem;
font-weight: 700;
color: #006d75;
}
.payment-info-box {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border: 2px solid #86efac;
border-radius: 12px;
margin-bottom: 20px;
}
.payment-info-box i {
font-size: 2rem;
color: #10b981;
flex-shrink: 0;
}
.payment-info-box strong {
display: block;
font-size: 1.1rem;
color: #065f46;
margin-bottom: 6px;
}
.payment-info-box p {
font-size: 0.9rem;
color: #059669;
margin: 0;
}
.stripe-redirect-info {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #f1f5f9;
border-radius: 12px;
border-left: 4px solid #3b82f6;
}
.stripe-redirect-info i {
font-size: 1.5rem;
color: #3b82f6;
flex-shrink: 0;
}
.stripe-redirect-info p {
margin: 0;
font-size: 0.95rem;
color: #475569;
}
.confirmation-section {
text-align: center;
padding: 48px 28px;
}
.success-icon {
width: 80px;
height: 80px;
margin: 0 auto 24px;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: scaleIn 0.5s ease;
}
.success-icon i {
font-size: 2.5rem;
color: white;
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.confirmation-title {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 24px;
}
.booking-reference {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 12px;
margin-bottom: 28px;
}
.reference-label {
font-size: 0.9rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.reference-number {
font-size: 1.8rem;
font-weight: 700;
color: #006d75;
letter-spacing: 2px;
font-family: "Courier New", monospace;
}
.confirmation-details {
text-align: left;
padding: 24px;
background: white;
border-radius: 12px;
border: 1px solid #e2e8f0;
margin-bottom: 24px;
}
.confirmation-message {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px;
background: #ecfdf5;
border-radius: 12px;
border: 1px solid #86efac;
}
.confirmation-message i {
font-size: 1.5rem;
color: #10b981;
}
.confirmation-message p {
margin: 0;
font-size: 0.95rem;
color: #059669;
font-weight: 500;
}
@media (max-width: 768px) {
.checkout-modal {
width: 98%;
max-width: none;
}
.checkout-modal .modal-body {
padding: 20px;
}
.checkout-progress::before {
left: 40px;
right: 40px;
}
.step-number {
width: 40px;
height: 40px;
font-size: 1rem;
}
.step-label {
font-size: 0.75rem;
}
.form-grid {
grid-template-columns: 1fr;
}
.checkout-section {
padding: 20px;
}
.modal-footer {
flex-direction: column;
gap: 12px;
}
.btn-secondary,
.btn-primary {
width: 100%;
}
}
.services-modal-content {
background: white;
border-radius: 16px;
max-width: 600px;
width: 90%;
max-height: 85vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.services-modal-header {
padding: 24px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.services-modal-header h3 {
margin: 0;
font-size: 24px;
color: #006d75;
}
.services-modal-close {
background: none;
border: none;
font-size: 32px;
color: #666;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.3s;
}
.services-modal-close:hover {
color: #006d75;
}
.services-modal-body {
padding: 24px;
overflow-y: auto;
flex: 1;
}
.flight-info-compact {
background: linear-gradient(135deg, #006d75, #20b2aa);
color: white;
padding: 16px;
border-radius: 12px;
margin-bottom: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.flight-info-compact .price {
font-size: 24px;
}
.service-section {
margin-bottom: 32px;
}
.service-section h4 {
font-size: 18px;
color: #006d75;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.service-note {
color: #666;
font-size: 14px;
font-style: italic;
margin-top: 8px;
}
.baggage-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.baggage-option {
border: 2px solid #e0e0e0;
border-radius: 12px;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
}
.baggage-option:hover {
border-color: #006d75;
background: rgba(0, 109, 117, 0.03);
}
.baggage-info {
flex: 1;
}
.baggage-type {
font-weight: 600;
color: #006d75;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.baggage-details {
color: #666;
font-size: 14px;
}
.baggage-controls {
display: flex;
align-items: center;
gap: 16px;
}
.baggage-price {
font-size: 20px;
font-weight: 600;
color: #006d75;
}
.quantity-selector {
display: flex;
align-items: center;
gap: 8px;
background: #f5f5f5;
border-radius: 8px;
padding: 4px;
}
.quantity-selector button {
background: white;
border: 1px solid #ddd;
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
font-weight: 600;
color: #006d75;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.quantity-selector button:hover {
background: #006d75;
color: white;
border-color: #006d75;
}
.quantity-selector span {
min-width: 32px;
text-align: center;
font-weight: 600;
color: #333;
}
.services-modal-footer {
padding: 24px;
border-top: 1px solid #e0e0e0;
display: flex;
gap: 12px;
justify-content: flex-end;
}
.btn-secondary {
padding: 12px 24px;
background: #f5f5f5;
color: #666;
border: 1px solid #ddd;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
}
.btn-secondary:hover {
background: #e0e0e0;
}
.btn-primary {
padding: 12px 32px;
background: linear-gradient(135deg, #006d75, #20b2aa);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 109, 117, 0.3);
}
.seat-map-container {
margin-top: 16px;
}
.seat-row {
display: flex;
gap: 4px;
justify-content: center;
margin-bottom: 4px;
}
.seat {
width: 36px;
height: 36px;
border: 2px solid #ddd;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
transition: all 0.3s;
}
.seat.available {
background: white;
border-color: #006d75;
}
.seat.available:hover {
background: #006d75;
color: white;
}
.seat.selected {
background: #006d75;
color: white;
border-color: #006d75;
}
.seat.occupied {
background: #f5f5f5;
border-color: #ddd;
cursor: not-allowed;
}
.seat.paid {
border-color: #ffa500;
}
.seat-legend {
display: flex;
gap: 16px;
justify-content: center;
margin-top: 16px;
font-size: 13px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.legend-box {
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 4px;
}
@media (max-width: 768px) {
.services-modal-content {
width: 95%;
max-height: 90vh;
}
.services-modal-header {
padding: 16px;
}
.services-modal-body {
padding: 16px;
}
.flight-info-compact {
flex-direction: column;
gap: 8px;
text-align: center;
}
.baggage-option {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.baggage-controls {
width: 100%;
justify-content: space-between;
}
.services-modal-footer {
flex-direction: column;
}
.services-modal-footer button {
width: 100%;
}
}
#servicesSelectionContainer {
display: flex;
flex-direction: column;
gap: 20px;
}
.loading-services {
text-align: center;
padding: 40px;
color: #666;
font-size: 16px;
}
.loading-services i {
font-size: 24px;
margin-bottom: 10px;
color: #006d75;
}
.service-error {
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 12px;
padding: 20px;
text-align: center;
color: #856404;
}
.service-error i {
font-size: 24px;
margin-bottom: 10px;
}
.flight-services-card {
background: #f8f9fa;
border: 2px solid #e0e0e0;
border-radius: 16px;
padding: 24px;
transition: all 0.3s;
}
.flight-services-card:hover {
border-color: #006d75;
box-shadow: 0 4px 12px rgba(0, 109, 117, 0.1);
}
.flight-services-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid #e0e0e0;
}
.flight-services-header h5 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 10px;
}
.flight-services-header h5 i {
color: #006d75;
}
.flight-services-header .route {
font-size: 14px;
color: #64748b;
font-weight: 600;
}
.no-services {
text-align: center;
padding: 30px;
color: #64748b;
font-size: 15px;
background: white;
border-radius: 12px;
border: 2px dashed #e0e0e0;
}
.no-services i {
font-size: 32px;
margin-bottom: 10px;
display: block;
color: #94a3b8;
}
.service-section {
margin-top: 20px;
}
.service-section h6 {
font-size: 16px;
font-weight: 700;
color: #006d75;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.service-section h6 i {
font-size: 18px;
}
.baggage-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.baggage-option {
background: white;
border: 2px solid #e0e0e0;
border-radius: 12px;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
}
.baggage-option:hover {
border-color: #006d75;
background: rgba(0, 109, 117, 0.03);
transform: translateX(4px);
}
.baggage-info {
flex: 1;
}
.baggage-type {
font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
}
.baggage-type i {
color: #006d75;
font-size: 16px;
}
.baggage-details {
color: #64748b;
font-size: 13px;
font-weight: 500;
}
.baggage-controls {
display: flex;
align-items: center;
gap: 20px;
}
.baggage-price {
font-size: 20px;
font-weight: 700;
color: #006d75;
min-width: 70px;
text-align: right;
}
.quantity-selector {
display: flex;
align-items: center;
gap: 12px;
background: #f1f5f9;
border-radius: 10px;
padding: 6px 8px;
}
.qty-btn {
background: white;
border: 2px solid #cbd5e1;
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
font-size: 20px;
font-weight: 700;
color: #006d75;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.qty-btn:hover {
background: #006d75;
color: white;
border-color: #006d75;
transform: scale(1.05);
}
.qty-btn:active {
transform: scale(0.95);
}
.qty-display {
min-width: 40px;
text-align: center;
font-weight: 700;
font-size: 18px;
color: #1e293b;
}
.seat-note {
background: #e0f2fe;
border: 1px solid #0ea5e9;
border-radius: 8px;
padding: 12px 16px;
color: #075985;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.seat-note i {
font-size: 18px;
color: #0284c7;
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid #f1f5f9;
transition: background 0.2s;
}
.summary-item:hover {
background: #f8f9fa;
}
.summary-item.service-item {
padding-left: 32px;
background: #f8f9fa;
}
.summary-item.service-item:hover {
background: #f1f5f9;
}
.summary-item-details {
flex: 1;
}
.summary-item-title {
font-weight: 600;
color: #1e293b;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
}
.summary-item-title i {
color: #006d75;
font-size: 14px;
}
.summary-item-subtitle {
font-size: 13px;
color: #64748b;
}
.summary-item-price {
font-weight: 700;
color: #1e293b;
font-size: 16px;
}
.summary-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 16px;
margin-top: 12px;
border-top: 3px solid #006d75;
background: linear-gradient(135deg, rgba(0, 109, 117, 0.05), rgba(32, 178, 170, 0.05));
}
.summary-total-label {
font-size: 18px;
font-weight: 700;
color: #1e293b;
}
.summary-total-price {
font-size: 24px;
font-weight: 700;
color: #006d75;
}
@media (max-width: 768px) {
.flight-services-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.baggage-option {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.baggage-controls {
width: 100%;
justify-content: space-between;
}
.baggage-price {
min-width: auto;
}
}
.modal-body,
.location-dropdown,
.location-autocomplete,
.custom-calendar,
.passenger-panel .panel-content,
.flatpickr-calendar {
scrollbar-width: auto;
scrollbar-color: auto;
}
.modal-body::-webkit-scrollbar,
.location-dropdown::-webkit-scrollbar,
.location-autocomplete::-webkit-scrollbar,
.custom-calendar::-webkit-scrollbar,
.passenger-panel .panel-content::-webkit-scrollbar,
.flatpickr-calendar::-webkit-scrollbar {
width: initial;
}
.modal-body::-webkit-scrollbar-track,
.location-dropdown::-webkit-scrollbar-track,
.location-autocomplete::-webkit-scrollbar-track,
.custom-calendar::-webkit-scrollbar-track,
.passenger-panel .panel-content::-webkit-scrollbar-track,
.flatpickr-calendar::-webkit-scrollbar-track {
background: initial;
}
.modal-body::-webkit-scrollbar-thumb,
.location-dropdown::-webkit-scrollbar-thumb,
.location-autocomplete::-webkit-scrollbar-thumb,
.custom-calendar::-webkit-scrollbar-thumb,
.passenger-panel .panel-content::-webkit-scrollbar-thumb,
.flatpickr-calendar::-webkit-scrollbar-thumb {
background: initial;
border-radius: initial;
}
#servicesSelectionContainer {
display: flex;
flex-direction: column;
gap: 24px;
}
.loading-services {
text-align: center;
padding: 60px 20px;
color: #64748b;
}
.loading-services i {
font-size: 48px;
margin-bottom: 16px;
color: #006d75;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.no-services {
text-align: center;
padding: 40px 20px;
color: #64748b;
background: #f8f9fa;
border-radius: 12px;
border: 2px dashed #cbd5e1;
}
.no-services i {
font-size: 40px;
margin-bottom: 12px;
display: block;
color: #94a3b8;
}
.service-error {
background: #fef3c7;
border: 2px solid #fbbf24;
border-radius: 12px;
padding: 24px;
text-align: center;
color: #92400e;
}
.service-error i {
font-size: 36px;
margin-bottom: 12px;
color: #f59e0b;
}
.flight-services-card {
background: white;
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 24px;
transition: all 0.3s ease;
}
.flight-services-card:hover {
border-color: #006d75;
box-shadow: 0 4px 16px rgba(0, 109, 117, 0.1);
}
.flight-services-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 2px solid #e2e8f0;
}
.flight-services-header h5 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 10px;
}
.flight-services-header h5 i {
color: #006d75;
font-size: 20px;
}
.flight-services-header .route {
font-size: 14px;
color: #64748b;
font-weight: 600;
}
.service-section {
margin-bottom: 24px;
}
.service-section:last-child {
margin-bottom: 0;
}
.service-section h6 {
font-size: 16px;
font-weight: 700;
color: #006d75;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.service-section h6 i {
font-size: 18px;
}
.baggage-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.baggage-option {
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.baggage-option:hover {
border-color: #006d75;
background: rgba(0, 109, 117, 0.03);
transform: translateX(4px);
}
.baggage-info {
flex: 1;
}
.baggage-type {
font-weight: 700;
color: #1e293b;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
}
.baggage-type i {
color: #006d75;
font-size: 18px;
}
.baggage-details {
color: #64748b;
font-size: 13px;
font-weight: 500;
}
.baggage-controls {
display: flex;
align-items: center;
gap: 20px;
}
.baggage-price {
font-size: 20px;
font-weight: 700;
color: #006d75;
min-width: 80px;
text-align: right;
}
.quantity-selector {
display: flex;
align-items: center;
gap: 12px;
background: white;
border-radius: 10px;
padding: 6px 10px;
border: 2px solid #e2e8f0;
}
.qty-btn {
background: #f1f5f9;
border: 2px solid #cbd5e1;
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
font-size: 20px;
font-weight: 700;
color: #006d75;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.qty-btn:hover {
background: #006d75;
color: white;
border-color: #006d75;
transform: scale(1.1);
}
.qty-btn:active {
transform: scale(0.95);
}
.qty-display {
min-width: 40px;
text-align: center;
font-weight: 700;
font-size: 18px;
color: #1e293b;
}
.seat-note {
background: #dbeafe;
border: 2px solid #3b82f6;
border-radius: 12px;
padding: 16px 20px;
color: #1e40af;
font-size: 14px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.seat-note i {
font-size: 20px;
color: #2563eb;
margin-top: 2px;
}
.seat-note strong {
display: block;
margin-bottom: 4px;
font-size: 15px;
}
.checkbox-toggle {
position: relative;
display: inline-block;
width: 56px;
height: 30px;
cursor: pointer;
}
.checkbox-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
border-radius: 30px;
transition: all 0.3s ease;
}
.toggle-slider:before {
content: "";
position: absolute;
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.checkbox-toggle input:checked + .toggle-slider {
background-color: #006d75;
}
.checkbox-toggle input:checked + .toggle-slider:before {
transform: translateX(26px);
}
.summary-divider {
height: 2px;
background: linear-gradient(to right, transparent, #e2e8f0, transparent);
margin: 16px 0;
}
.summary-services-header {
font-size: 14px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.summary-service-item {
padding: 12px 16px;
background: #f8fafc;
border-radius: 8px;
margin-bottom: 8px;
}
.summary-service-item .summary-flight-info span {
font-weight: 600;
color: #1e293b;
}
.summary-service-item .summary-flight-info small {
display: block;
margin-top: 4px;
font-size: 12px;
color: #64748b;
}
.summary-subtotal {
display: flex;
justify-content: space-between;
padding: 12px 0;
font-size: 15px;
color: #64748b;
border-top: 1px solid #e2e8f0;
margin-top: 12px;
}
.summary-subtotal span:last-child {
font-weight: 600;
color: #1e293b;
}
@media (max-width: 768px) {
.flight-services-card {
padding: 16px;
}
.flight-services-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.baggage-option {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.baggage-controls {
width: 100%;
justify-content: space-between;
}
.seat-note {
flex-direction: column;
}
}
.search-edit-bar {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr 0.8fr auto;
gap: 12px;
align-items: end;
background: rgba(255, 255, 255, 0.98);
padding: 16px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
width: 100%;
}
.search-field {
display: flex;
align-items: center;
gap: 8px;
background: white;
padding: 10px 16px;
border-radius: 8px;
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
}
.search-field:hover {
border-color: #1a9b9e;
}
.search-field:focus-within {
border-color: #1a9b9e;
}
.search-field i {
color: #1a9b9e;
font-size: 1rem;
flex-shrink: 0;
}
.search-input {
width: 100%;
padding: 12px 14px;
padding-left: 42px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 500;
color: #64748b;
background: #ffffff;
transition: all 0.2s ease;
box-sizing: border-box;
}
.search-input::placeholder {
color: #94a3b8;
}
.route-field {
flex: 1;
min-width: 350px;
display: flex;
align-items: center;
gap: 12px;
}
.autocomplete-wrapper {
flex: 1;
position: relative;
}
.autocomplete-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
max-height: 320px;
overflow-y: auto;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
display: block;
}
.segments-wrap,
.segment-row,
.multi-segment-row,
.autocomplete-wrapper {
overflow: visible;
}
.autocomplete-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
display: block;
}
.autocomplete-item {
padding: 14px 16px;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid #f1f5f9;
}
.autocomplete-item:hover {
background: #f0fdfa;
}
.autocomplete-item i {
color: #006d75;
font-size: 1.1rem;
width: 24px;
text-align: center;
}
.autocomplete-item-main {
flex: 1;
}
.autocomplete-item-name {
font-weight: 600;
color: #1e293b;
font-size: 0.95rem;
}
.autocomplete-item-code {
font-size: 0.8rem;
color: #64748b;
margin-top: 2px;
}
.arrow-separator {
font-size: 1.2rem;
color: #94a3b8;
font-weight: 600;
margin: 0 4px;
flex-shrink: 0;
}
.swap-route-btn {
border: none;
background: transparent;
color: #94a3b8;
font-size: 1.05rem;
padding: 10px 10px;
border-radius: 12px;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s ease;
}
.swap-route-btn:hover {
background: #f1f5f9;
color: #1a9b9e;
}
.swap-route-btn:active {
transform: scale(0.98);
}
.date-field {
min-width: 280px;
gap: 12px;
}
.date-picker-wrapper {
flex: 1;
position: relative;
}
.date-display {
cursor: pointer;
}
.search-input-hidden {
display: none;
}
.calendar-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
padding: 16px;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
min-width: 280px;
display: block;
}
.calendar-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
display: block;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 2px solid #f1f5f9;
}
.calendar-nav {
background: none;
border: none;
color: #006d75;
font-size: 1.2rem;
padding: 4px 8px;
border-radius: 6px;
transition: all 0.2s ease;
}
.calendar-month {
font-weight: 600;
color: #1e293b;
font-size: 0.95rem;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
}
.calendar-weekday {
text-align: center;
font-size: 0.75rem;
color: #64748b;
font-weight: 600;
padding: 4px;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
color: #334155;
border: 1px solid transparent;
}
.calendar-day.selected {
background: #006d75;
color: white;
font-weight: 600;
}
.calendar-day.today {
border-color: #006d75;
font-weight: 600;
}
.calendar-day.disabled {
color: #cbd5e1;
cursor: not-allowed;
}
.calendar-day.other-month {
color: #cbd5e1;
}
.date-separator {
font-size: 1.2rem;
color: #94a3b8;
font-weight: 600;
margin: 0 4px;
flex-shrink: 0;
}
.passengers-field {
min-width: 180px;
cursor: pointer;
}
.passengers-dropdown-trigger {
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 9px 14px;
padding-left: 42px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 500;
color: #1e293b;
cursor: pointer;
transition: all 0.2s ease;
box-sizing: border-box;
}
.passengers-dropdown-trigger span {
font-size: 0.95rem;
color: #1e293b;
font-weight: 500;
}
.passengers-dropdown-trigger i {
font-size: 0.75rem;
color: #64748b;
margin-left: auto;
}
.passengers-field.active .passengers-dropdown-trigger i {
transform: rotate(180deg);
}
.passengers-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #ffffff;
border: 2px solid #1a9b9e;
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 109, 117, 0.2);
padding: 0;
overflow: hidden;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
display: block;
}
.passengers-field.active .passengers-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.passenger-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid rgba(26, 155, 158, 0.15);
}
.passenger-label {
font-size: 0.9rem;
font-weight: 600;
color: #1facaf;
}
.counter-controls {
display: flex;
align-items: center;
gap: 12px;
}
.counter-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid #1a9b9e;
background: white;
color: #006d75;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.counter-btn:hover {
background: #1a9b9e;
color: white;
}
.counter-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
border-color: #e2e8f0;
}
.counter-controls span {
min-width: 24px;
text-align: center;
font-weight: 600;
color: #006d75;
}
.class-field {
min-width: 160px;
}
.search-select {
width: 100%;
padding: 13.5px 14px;
padding-left: 42px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 500;
color: #64748b;
background: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
box-sizing: border-box;
}
.search-btn {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: white;
border: none;
padding: 15.5px 28px;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
white-space: nowrap;
}
.search-btn:hover {
transform: translateY(-2px);
}
@media screen and (max-width: 992px) {
.search-edit-bar {
grid-template-columns: 1fr 1fr;
padding: 14px;
}
.search-field {
width: 100%;
min-width: unset;
}
.route-field {
min-width: unset;
flex-wrap: wrap;
}
.date-field {
min-width: unset;
flex-wrap: wrap;
}
.passengers-field {
min-width: unset;
}
.search-btn {
margin-top: 0;
}
}
@media screen and (max-width: 768px) {
.search-input {
min-width: 80px;
}
.route-field {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.arrow-separator {
display: none;
}
.date-field {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.date-separator {
display: none;
}
}
.filter-section {
border-radius: var(--card-radius);
overflow: hidden;
}
.baggage-icon {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--success-color, #27ae60);
transition: all 0.3s ease;
}
.baggage-icon i {
font-size: 0.9rem;
}
.baggage-icon.unavailable {
color: #95a5a6;
opacity: 0.7;
}
.baggage-icon:hover {
}
.flight-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 12px 0 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
align-items: center;
}
.meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
color: var(--text-light, #64748b);
padding: 4px 0;
}
.meta-item i {
font-size: 1rem;
color: var(--primary-color, #1a9b9e);
}
@media screen and (max-width: 768px) {
.flight-meta {
gap: 8px;
}
.baggage-icon {
font-size: 0.8rem;
padding: 3px 8px;
}
.baggage-icon i {
font-size: 0.85rem;
}
}
.baggage-icon[title]:hover::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.75rem;
white-space: nowrap;
z-index: 1000;
margin-bottom: 5px;
pointer-events: none;
}
.baggage-icon {
position: relative;
}
.baggage-icon.success {
color: #1c9c9f;
}
.search-field.route-field {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
position: relative;
background: transparent;
border: none;
}.search-field.route-field > i.fa-plane-departure {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #006d75;
font-size: 1rem;
z-index: 2;
}.search-input:hover {
border-color: #cbd5e1;
background: #f8fafc;
}.search-input:focus {
outline: none;
border-color: #006d75;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 109, 117, 0.1);
}.search-field.date-field {
display: flex;
align-items: center;
gap: 8px;
position: relative;
background: transparent;
border: none;
padding: 0;
}.search-field.date-field > i.fa-calendar-alt {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #006d75;
font-size: 1rem;
z-index: 2;
}.date-display,
.search-input.date-display {
cursor: pointer;
}.search-field.passengers-field {
position: relative;
background: transparent;
border: none;
padding: 0;
}.search-field.passengers-field > i.fa-users {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #006d75;
font-size: 1rem;
z-index: 2;
}.passengers-dropdown-trigger:hover {
border-color: #cbd5e1;
background: #f8fafc;
}.passengers-field.active .passengers-dropdown-trigger {
border-color: #006d75;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 109, 117, 0.1);
}.passenger-row:last-child {
border-bottom: none;
}.counter-btn:hover:not(:disabled) {
border-color: #006d75;
background: #f0fdfa;
transform: scale(1.05);
}.search-field.class-field {
position: relative;
background: transparent;
border: none;
padding: 0;
}.search-field.class-field > i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #006d75;
font-size: 1rem;
z-index: 2;
}.search-select:hover {
border-color: #cbd5e1;
background-color: #f8fafc;
}.search-select:focus {
outline: none;
border-color: #006d75;
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 109, 117, 0.1);
}.search-btn:active {
transform: translateY(0);
}.search-btn i {
font-size: 1rem;
}.autocomplete-item:last-child {
border-bottom: none;
}.autocomplete-item.loading {
justify-content: center;
color: #64748b;
}.autocomplete-item.error {
color: #ef4444;
justify-content: center;
}.autocomplete-dropdown::-webkit-scrollbar {
width: 6px;
}.autocomplete-dropdown::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}.autocomplete-dropdown::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}.autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}.search-btn.loading {
pointer-events: none;
opacity: 0.7;
}.search-btn.loading i {
animation: spin 1s linear infinite;
}
.search-edit-bar input.search-input-hidden,
.search-edit-bar .search-input-hidden {
display: none !important;
}
.search-edit-bar .search-input {
height: 48px;
padding: 0 14px;
font-weight: 500;
line-height: 48px;
}
.search-edit-bar .date-display {
line-height: normal;
display: flex;
align-items: center;
}
.search-edit-bar .passengers-dropdown-trigger {
height: 48px;
padding: 0 14px;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
}
.search-edit-bar #passengersDisplayText {
line-height: 1;
display: inline-flex;
align-items: center;
}
.date-modal{
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.35);
z-index: 9999;
}
.date-modal.active{ display: flex; }
.date-modal-inner{
width: min(860px, 94vw);
max-height: 86vh;
overflow: auto;
background: rgba(0, 92, 104, .96);
border-radius: 18px;
padding: 16px;
}
.date-modal-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom: 10px;
}
.date-title{ color:#fff; font-weight:700; font-size:18px; }
.date-close{
background: transparent;
border: 0;
color: #fff;
font-size: 28px;
cursor: pointer;
}
.date-nav{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
margin-bottom: 14px;
}
.cal-range-title{ color:#fff; font-weight:700; opacity:.95; }
.cal-nav-btn{
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color:#fff;
font-size: 22px;
cursor:pointer;
}
.double-calendar{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 740px){
.double-calendar{ grid-template-columns: 1fr; }
}
.cal-month{
background: rgba(0,0,0,.12);
border-radius: 14px;
padding: 14px;
}
.cal-month-title{ color:#fff; font-weight:700; margin-bottom:10px; }
.cal-weekdays, .cal-days{
display:grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.cal-weekday{
color: rgba(255,255,255,.7);
font-size: 12px;
text-align:center;
padding: 4px 0;
}
.cal-day{
color:#fff;
text-align:center;
padding: 10px 0;
border-radius: 10px;
cursor:pointer;
user-select:none;
}
.cal-day.disabled{ opacity:.35; cursor:not-allowed; }
.cal-day:hover:not(.disabled){ background: rgba(255,255,255,.08); }
.cal-day.start, .cal-day.end{
background: rgba(255,255,255,.18);
outline: 2px solid rgba(255,255,255,.35);
}
.cal-day.in-range{ background: rgba(255,255,255,.10); }
.date-modal-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.12);
}
.date-hint{ color: rgba(255,255,255,.85); }
.cal-confirm{
padding: 10px 16px;
border: 0;
border-radius: 12px;
cursor: pointer;
font-weight: 700;
}
.cal-confirm:disabled{ opacity:.45; cursor:not-allowed; }
.passengers-field{
position: relative;
}
.passengers-dropdown-trigger{
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 14px;
}
#passengersDisplayText{
display: flex;
align-items: center;
line-height: 1;
font-size: 14px;
font-weight: 400;
color: #64748b;
}
.passengers-dropdown-trigger .fa-chevron-down,
.passengers-dropdown-trigger .fa-chevron-up{
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 12px;
}
.passengers-dropdown{
position: absolute;
top: calc(100% + 8px);
left: 0;
transform: none;
width: 280px;
max-width: 92vw;
z-index: 9999;
}
.passengers-dropdown{
cursor: default;
}
.passengers-dropdown .counter-btn{
cursor: pointer;
}
#cabinClassField{ position: relative; }
.cabin-dropdown-trigger{
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 32px;
border: 2px solid #e2e8f0;
border-radius: 10px;
background: #fff;
cursor: pointer;
}
#cabinDisplayText{
font-size: 14px;
font-weight: 400;
color: #64748b;
line-height: 1;
}
.cabin-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 220px;
max-width: 92vw;
background: #ffffff;
border: 2px solid #1a9b9e;
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 109, 117, 0.2);
padding: 0;
overflow: hidden;
display: none;
z-index: 9999;
}
.cabin-dropdown.active {
display: block;
}
.cabin-option {
width: 100%;
text-align: left;
padding: 14px 16px;
border: 0;
background: transparent;
border-radius: 0;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 600;
color: #006d75;
cursor: pointer;
transition: all 0.2s ease;
}
.cabin-option:hover {
background: rgba(26, 155, 158, 0.1);
}
.cabin-option.active {
background: rgba(26, 155, 158, 0.15);
}
.cabin-ico {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #fff;
flex-shrink: 0;
}
.cabin-dropdown{ cursor: default; }
.cabin-option{ cursor: pointer; }
#cabinChevron{
font-size: 12px;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.cabin-dropdown{
padding: 10px;
}
.cabin-option{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
border-radius: 12px;
background: transparent;
}
.cabin-option:hover{
background: #eef2f7;
}
.cabin-radio {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #1a9b9e;
display: inline-block;
position: relative;
flex: 0 0 18px;
}
.cabin-option.active .cabin-radio {
border-color: #006d75;
}
.cabin-option.active .cabin-radio::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: #006d75;
}
.cabin-label {
font-size: 14px;
font-weight: 600;
color: #006d75;
}
.cabin-option.active{
background: #e8edf3;
}
.cabin-label{
font-weight: 600;
}
.cabin-dropdown{
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 16px 40px rgba(15,23,42,.12);
}
.trip-type-tabs{
display: inline-flex;
gap: 8px;
padding: 6px;
border-radius: 14px;
background: rgba(255,255,255,.65);
border: 1px solid rgba(226,232,240,.9);
margin-bottom: 10px;
}
.trip-tab{
border: 0;
background: transparent;
padding: 8px 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
color: #64748b;
cursor: pointer;
}
.trip-tab.active{
background: #fff;
color: #0f172a;
box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.trip-type-note{
margin: 6px 0 10px;
font-size: 13px;
color: #64748b;
}
#searchEditBar{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
#tripTypeTabs{
flex: 0 0 100%;
margin-bottom: 0;
}
#tripTypeNote{
flex: 0 0 100%;
margin: 0 0 6px 0;
}
#searchEditBar .search-field,
#searchEditBar .search-btn{
flex: 0 0 auto;
}
#tripTypeNote{
display: none;
font-size: 13px;
color: #64748b;
line-height: 1.3;
}
.triptype-wrap{
position: relative;
display: inline-flex;
align-items: center;
z-index: 100;
}
.triptype-trigger{
padding: 15.5px 20px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
white-space: nowrap;
}
.triptype-trigger:hover{
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 109, 117, 0.3);
}
#tripTypeLabel{
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
#tripTypeChevron{
font-size: 12px;
line-height: 1;
opacity: .9;
transition: transform .18s ease;
}
.triptype-menu{
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 220px;
max-width: 90vw;
background: #ffffff;
border: 2px solid #1a9b9e;
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 109, 117, 0.2);
padding: 0;
overflow: hidden;
display: none;
z-index: 9999;
}
#searchEditBar .search-controls-row,
.search-controls-row{
position: relative;
z-index: 2500;
overflow: visible;
}
.triptype-wrap.open .triptype-menu{ display: block; }
.triptype-wrap.open #tripTypeChevron{ transform: rotate(180deg); }
.triptype-item{
width: 100%;
border: 0;
background: transparent;
border-radius: 0;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
}
.triptype-item:hover{
background: rgba(26, 155, 158, 0.1);
}
.triptype-ico{
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #fff;
}
.triptype-text{
font-size: 14px;
font-weight: 600;
color: #006d75;
}
.triptype-item.active{
background: rgba(26, 155, 158, 0.15);
}
.triptype-note{
margin-top: 10px;
font-size: 13px;
color: #64748b;
line-height: 1.25;
max-width: 420px;
}
.triptype-menu{ margin-top: 2px; }
.triptype-item:active{ transform: scale(.99); }
.triptype-trigger:hover{ border-color: rgba(255,255,255,.55); }
.segments-wrap{
display: flex;
flex-direction: column;
gap: 10px;
}
.segment-row{
display: grid;
grid-template-columns: 1.5fr 1fr auto;
gap: 12px;
align-items: center;
}
.segment-row .route-field,
.segment-row .date-field{
width: 100%;
}
.segment-remove{
height: 44px;
width: 44px;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: rgba(255,255,255,.8);
color: #64748b;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.segment-remove:hover{
background: #fff;
color: #0f172a;
}
.segments-actions{
margin-top: 6px;
}
.segments-add{
height: 40px;
padding: 0 14px;
border-radius: 12px;
border: 1px dashed rgba(226,232,240,.9);
background: rgba(255,255,255,.65);
color: #0f172a;
font-weight: 700;
cursor: pointer;
}
.segments-add:hover{
background: #fff;
}
@media (max-width: 1100px){
.segment-row{ grid-template-columns: 1fr 1fr; }
.segment-remove{ width: 100%; }
}
#searchEditBar{display:flex;flex-direction:column;gap:14px;}
#searchEditBar .search-controls-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#searchEditBar .search-main-row{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;}
#searchEditBar #segmentsWrap{flex:1;min-width:0;}
#searchEditBar .editbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0;}
#segmentsActions{display:none !important;margin:0 !important;}
#segmentsActions[style*="block"]{display:flex !important;}
#segmentsActions .segments-add{margin:0 !important;}
#searchBtn{margin:0 !important;}
#searchEditBar{
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
#searchEditBar .search-controls-row{
margin: 0 !important;
padding: 0 !important;
margin-left: 16px !important;
margin-right: 16px !important;
justify-content: flex-start !important;
}
#searchEditBar .search-main-row{
background: rgba(255, 255, 255, 0.98) !important;
padding: 16px !important;
border-radius: 12px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
overflow: visible !important;
}
#searchEditBar .search-controls-row + .search-main-row{
margin-top: 8px;
}
@media (max-width: 1100px){
#searchEditBar .search-main-row{flex-wrap:wrap;}
#searchEditBar .editbar-actions{width:100%;justify-content:flex-end;}
}
.travellers-field {
position: relative;
min-width: 260px;
}
.travellers-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #1fb6b6;
color: #fff;
border-radius: 10px;
height: 48px;
padding: 0 16px;
font-weight: 500;
cursor: pointer;
user-select: none;
}
.travellers-trigger i {
font-size: 12px;
opacity: 0.95;
}
.travellers-dropdown {
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 320px;
background: #fff;
border: 2px solid #1a9b9e;
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 109, 117, 0.2);
padding: 0;
overflow: hidden;
z-index: 9999;
display: none;
}
#travellersField.open .travellers-dropdown { display: block; }
.travellers-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(26, 155, 158, 0.15);
}
.travellers-row:last-child { border-bottom: none; }
.travellers-divider {
height: 1px;
background: rgba(26, 155, 158, 0.2);
margin: 0;
}
.travellers-dropdown .counter-btn {
width: 34px;
height: 34px;
border-radius: 999px;
border: 2px solid #dbe7f5;
background: #fff;
color: #0f172a;
font-weight: 800;
line-height: 1;
cursor: pointer;
}
.travellers-dropdown .counter-btn:hover {
border-color: #1fb6b6;
color: #1fb6b6;
}
.travellers-dropdown .counter-controls span {
min-width: 22px;
text-align: center;
font-weight: 700;
color: #0f172a;
}
.travellers-dropdown .cabin-option {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 0;
border: none;
background: transparent;
cursor: pointer;
text-align: left;
transition: all 0.2s ease;
border-bottom: 1px solid rgba(26, 155, 158, 0.1);
}
.travellers-dropdown .cabin-option:last-of-type {
border-bottom: none;
}
.travellers-dropdown .cabin-option:hover {
background: rgba(26, 155, 158, 0.1);
}
.travellers-dropdown .cabin-option .radio {
width: 18px;
height: 18px;
border-radius: 999px;
border: 2px solid #cbd5e1;
position: relative;
flex: 0 0 18px;
}
.travellers-dropdown .cabin-option.active {
background: rgba(26, 155, 158, 0.15);
}
.travellers-dropdown .cabin-option.active .radio {
border-color: #1fb6b6;
}
.travellers-dropdown .cabin-option.active .radio::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 999px;
background: #1fb6b6;
}
.travellers-dropdown .cabin-option .cabin-label {
color: #006d75;
font-weight: 600;
font-size: 14px;
}
#cabinClassField { display: none !important; }
.search-controls-row {
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto 12px !important;
padding-left: 93px !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
text-align: left !important;
}
.search-controls-row > *:first-child {
position: static !important;
margin: 0 !important;
}
#searchEditBar,
#searchEditBar * {
max-width: 100%;
}
#searchEditBar{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
#searchEditBar .search-controls-row{
width: 100%;
max-width: 1200px;
padding-left: 16px !important;
padding-right: 16px !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
}
#searchEditBar .search-main-row{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
#searchEditBar .search-main-row,
#searchEditBar #segmentsWrap,
#searchEditBar .route-field,
#searchEditBar .autocomplete-wrapper{
min-width: 0;
}
#searchEditBar .search-input{
min-width: 0;
}
@media (max-width: 1100px){
#searchEditBar .search-main-row{
flex-wrap: wrap !important;
gap: 12px !important;
}
#searchEditBar #segmentsWrap{
flex: 1 1 100% !important;
}
#searchEditBar .editbar-actions{
width: 100% !important;
justify-content: flex-end !important;
margin-left: 0 !important;
}
}
@media (max-width: 768px){
#searchEditBar{
padding-left: 12px !important;
padding-right: 12px !important;
}
#searchEditBar .search-controls-row{
padding-left: 12px !important;
padding-right: 12px !important;
}
#searchEditBar .search-main-row{
padding: 12px !important;
border-radius: 12px !important;
}
#searchEditBar .route-field,
#searchEditBar .date-field{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
#searchEditBar .arrow-separator,
#searchEditBar .date-separator{
display: none !important;
}
#searchEditBar .travellers-field,
#searchEditBar #searchBtn{
width: 100% !important;
}
#searchEditBar .travellers-trigger,
#searchEditBar .search-btn{
width: 100% !important;
}
}
@media (max-width: 480px){
#searchEditBar{
padding-left: 10px !important;
padding-right: 10px !important;
}
#searchEditBar .search-main-row{
padding: 10px !important;
}
#searchEditBar .search-input{
font-size: 0.9rem;
}
}
.timeline-plane-lottie{
position: absolute;
left: 50%;
top: 4px;
transform: translate(-50%, -200%);
width: 28px;
height: 28px;
z-index: 3;
pointer-events: none;
}
.timeline-connector {
padding-top: 18px;
}
#showMoreBtn {
background:linear-gradient(135deg,#17a398 0%,#20b2aa 50%,#40c9c0 100%);
color: white;
border: none;
padding: 14px 32px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
margin: 24px auto;
}
#showMoreBtn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 109, 117, 0.3);
}
.custom-calendar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 3000;
display: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.custom-calendar-overlay.active {
display: block;
opacity: 1;
}
.custom-calendar {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background: #006d75;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
z-index: 3001;
display: none;
opacity: 0;
transition: all 0.3s ease;
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow: hidden;
}
.custom-calendar.active {
display: flex;
flex-direction: column;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.calendar-header {
background: #005a60;
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.calendar-title {
font-size: 18px;
font-weight: 600;
color: white !important;
margin: 0;
}
.calendar-close {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 5px;
opacity: 0.7;
transition: opacity 0.2s;
border-radius: 4px;
}
.calendar-close:hover {
opacity: 1;
}
.calendar-body {
padding: 20px;
overflow-y: auto;
flex: 1;
}
.calendar-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 10px;
}
.calendar-nav-btn {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
font-size: 16px;
}
.calendar-nav-btn:hover:not(:disabled) {
background: #20b2aa;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
border-color: #20b2aa;
}
.calendar-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.calendar-nav-btn i {
font-size: 14px;
line-height: 1;
}
.calendar-nav-title {
font-size: 16px;
font-weight: 600;
color: white;
}
.calendar-months-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
@media (max-width: 740px) {
.calendar-months-container {
grid-template-columns: 1fr;
}
}
.calendar-month {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 15px;
}
.calendar-month-title {
text-align: center;
font-size: 16px;
font-weight: 600;
color: white;
margin-bottom: 15px;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-bottom: 10px;
}
.calendar-weekday {
text-align: center;
font-size: 12px;
font-weight: 600;
color: #20b2aa;
padding: 5px;
text-transform: uppercase;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
position: relative;
font-weight: 500;
transition: all 0.2s;
color: white;
font-size: 14px;
}
.calendar-day:hover:not(.disabled):not(.empty) {
background: rgba(32, 178, 170, 0.2);
transform: scale(1.05);
}
.calendar-day.empty {
cursor: default;
}
.calendar-day.disabled {
color: rgba(255, 255, 255, 0.3);
cursor: not-allowed;
}
.calendar-day.today {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(32, 178, 170, 0.5);
}
.calendar-day.selected,
.calendar-day.start-date,
.calendar-day.end-date {
background: #20b2aa;
color: white;
font-weight: 700;
}
.calendar-day.in-range {
background: rgba(32, 178, 170, 0.15);
}
.calendar-day.start-date {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.calendar-day.end-date {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.calendar-day.start-date.end-date {
border-radius: 8px;
}
.calendar-footer {
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
background: #005a60;
}
.calendar-selection-info {
color: white;
font-size: 14px;
}
.calendar-confirm {
background: #20b2aa;
color: white;
border: none;
padding: 10px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.calendar-confirm:hover:not(:disabled) {
background: #1a9a8f;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
}
.calendar-confirm:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.multi-segment-row {
gap: 12px;
align-items: center;
margin-bottom: 10px;
}
.multi-segment-row .route-field {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
padding: 0;
}
.multi-segment-row .autocomplete-wrapper {
flex: 1;
position: relative;
overflow: visible;
min-width: 0;
}
.multi-segment-row .autocomplete-wrapper .autocomplete-dropdown {
right: auto;
min-width: 280px;
white-space: normal;
}
.multi-segment-row .search-input {
width: 100%;
height: 48px;
padding: 0 14px;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 500;
color: #64748b;
background: #ffffff;
transition: all 0.2s ease;
}
.multi-segment-row .search-input:hover {
border-color: #cbd5e1;
}
.multi-segment-row .search-input:focus {
outline: none;
border-color: #006d75;
box-shadow: 0 0 0 3px rgba(0, 109, 117, 0.1);
}
.multi-segment-row .search-input::placeholder {
color: #94a3b8;
}
.multi-segment-row .segment-swap-btn {
border: none;
background: transparent;
color: #006d75;
font-size: 1rem;
padding: 8px;
border-radius: 8px;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.multi-segment-row .segment-swap-btn:hover {
background: rgba(0, 109, 117, 0.1);
color: #004d52;
}
.multi-segment-row .segment-swap-btn:active {
transform: scale(0.95);
}
.segment-date-field {
position: relative;
display: flex;
align-items: center;
background: transparent;
border: none;
padding: 0;
flex: 1;
}
.segment-date-field .date-icon {
display: none !important;
}
.segment-date-field .search-input,
.segment-date-field .segment-date-input {
flex: 1;
width: 100%;
height: 48px;
padding: 0 14px !important;
padding-right: 40px !important;
cursor: pointer !important;
background: #fff !important;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 500;
color: #64748b;
transition: all 0.2s ease;
}
.segment-date-field .search-input:hover,
.segment-date-field .segment-date-input:hover {
}
.segment-date-field .search-input::placeholder,
.segment-date-field .segment-date-input::placeholder {
color: #94a3b8;
}
.segment-remove-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #94a3b8;
cursor: pointer;
border-radius: 4px;
display: none;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 5;
}
.segment-remove-btn:hover {
background: #fee2e2;
color: #ef4444;
}
.multi-segment-row:nth-child(1) .segment-remove-btn {
display: none !important;
}
.multi-segment-row:nth-child(n+2) .segment-remove-btn {
display: flex !important;
}
#segmentsActions {
display: none;
margin-top: 8px;
}
#segmentsActions .segments-add {
height: 40px;
padding: 0 16px;
border-radius: 10px;
border: 2px dashed #cbd5e1;
background: transparent;
color: #006d75;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
#segmentsActions .segments-add:hover {
border-color: #006d75;
background: rgba(0, 109, 117, 0.05);
}
.multi-segment-row .flatpickr-input {
cursor: pointer !important;
}
@media (max-width: 768px) {
.multi-segment-row {
grid-template-columns: 1fr;
gap: 10px;
}
.multi-segment-row .route-field {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.multi-segment-row .autocomplete-wrapper {
flex: 1 1 calc(50% - 20px);
min-width: 120px;
}
.segment-date-field {
width: 100%;
}
}
.segment-row--single,
.segments-wrap,
.segment-row {
overflow: visible !important;
}
.segment-row--single .autocomplete-wrapper {
overflow: visible;
position: relative;
}
.segment-row--single .autocomplete-dropdown {
min-width: 280px;
white-space: normal;
right: auto;
left: 0;
}
.modal-body .flight-slices-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.modal-body .flight-slices-wrapper .flight-slice {
border: 1px solid rgba(26, 155, 158, 0.2);
border-radius: 12px;
overflow: hidden;
}

@media (max-width: 700px) {
.modal-body .flight-slices-wrapper {
grid-template-columns: 1fr;
}
}

@media (max-width: 768px) {
/* ---- Passengers / Travellers / Cabin — BOTTOM SHEET on mobile ---- */
.travellers-dropdown,
.passengers-dropdown,
.cabin-dropdown {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 20px 20px 0 0 !important;
z-index: 10500 !important;
max-height: 75vh !important;
overflow-y: auto !important;
box-shadow: 0 -6px 30px rgba(0,0,0,0.22) !important;
}

/* ---- Flight card grid — single column ---- */
.flight-card-content {
grid-template-columns: 1fr !important;
}

/* ---- Continue button ---- */
#fpContinueBtn {
padding: 10px 16px !important;
font-size: 13px !important;
white-space: nowrap;
}

/* ---- Flight preview modal ---- */
#flightPreviewModal {
width: 96% !important;
max-width: 96% !important;
max-height: 92vh !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%,-50%) !important;
border-radius: 14px !important;
}
/* Force column layout inside modal */
#flightPreviewModal > div:first-child {
flex-direction: column !important;
}
/* Header bar — compact on mobile */
#flightPreviewModal > div:first-child > div:first-child {
width: 100% !important;
flex-direction: column !important;
padding: 10px 14px !important;
gap: 4px !important;
min-height: unset !important;
}
/* Remove duplicate separator in header */
#flightPreviewModal > div:first-child > div:first-child > div:last-child {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
/* Modal body — less padding on mobile */
#flightPreviewModal .modal-body,
#flightPreviewModal > div:first-child > div:last-child > div:first-child {
padding: 12px 14px !important;
}
/* Modal footer — stack price + button if needed */
#flightPreviewModal > div:first-child > div:last-child > div:last-child {
padding: 10px 14px !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
/* Full-width continue button on very narrow screens */
#fpContinueBtn {
flex: 1 1 auto !important;
justify-content: center !important;
min-width: 120px !important;
padding: 10px 18px !important;
font-size: 14px !important;
}
/* Footer price block — don't shrink */
#fpFooter > div:first-child {
flex: 1 1 auto !important;
}
/* Segment row times — smaller on mobile */
#flightPreviewModal [style*="font-size:28px"] {
font-size: 22px !important;
}
/* Segment row center — reduce min-width strain */
#flightPreviewModal [style*="min-width:80px"] {
min-width: 60px !important;
}
/* Airport name — allow wrapping instead of truncating */
#flightPreviewModal [style*="white-space:nowrap"] {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: none !important;
}
}
/* ═══════════════ METASEARCH PROVIDER VIEW (Momondo/Skyscanner style) ═══════════════ */

/* HERO BEST-PRICE CARD */
.ms-hero {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.05);
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 28px;
}
.ms-hero-route { min-width: 0; }
.ms-hero-route-line {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ms-hero-city { color: #0f172a; }
.ms-hero-route-icon {
    color: #17a398;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.ms-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #64748b;
    font-size: 0.86rem;
}
.ms-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ms-hero-meta i {
    color: #94a3b8;
    font-size: 0.78rem;
}
.ms-hero-meta-dot {
    color: #cbd5e1 !important;
    font-weight: 700;
}
.ms-hero-price-block {
    text-align: right;
    padding-right: 8px;
    border-right: 1px solid #e2e8f0;
    padding-right: 24px;
}
.ms-hero-price-label {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.ms-hero-price {
    font-size: 2.4rem;
    font-weight: 800;
    color: #17a398;
    letter-spacing: -0.03em;
    line-height: 1;
}
.ms-hero-price-sub {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 4px;
}
.ms-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #17a398 0%, #20b2aa 50%, #40c9c0 100%);
    color: white !important;
    text-decoration: none !important;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(23,163,152,0.35);
    transition: transform 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}
.ms-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(23,163,152,0.5);
}
.ms-hero-cta i { font-size: 0.78rem; }

.ms-disclaimer {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 206, 74, 0.12);
    border: 1px solid rgba(255, 215, 80, 0.3);
    border-left: 3px solid #ffce4a;
    color: rgba(255, 248, 214, 0.92);
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 0.85rem;
    margin-bottom: 24px;
}
.ms-disclaimer i { color: #ffce4a; flex-shrink: 0; }

.ms-providers-section { }
/* ═══════════════ SKYSCANNER-STYLE BOOK SECTION ═══════════════ */
.ms-book-section {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(125,211,211,0.15);
    border-radius: 16px;
    padding: 22px 24px;
    backdrop-filter: blur(8px);
}
.ms-book-head {
    margin-bottom: 14px;
}
.ms-book-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f0fffe;
    margin: 0 0 3px;
}
.ms-book-subtitle {
    font-size: 0.82rem;
    color: rgba(125,211,211,0.75);
}
.ms-book-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(23,163,152,0.1);
    border: 1px solid rgba(125,211,211,0.18);
    color: rgba(125,211,211,0.95);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 14px;
}
.ms-book-notice i { color: #7dd3d3; font-size: 0.85rem; }
.ms-book-list {
    display: flex;
    flex-direction: column;
}

/* Each row — Skyscanner-style */
.ms-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 4px;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid rgba(125,211,211,0.12);
    transition: background 0.18s;
    cursor: pointer;
}
.ms-row:last-child { border-bottom: none; }
.ms-row:hover {
    background: rgba(255,255,255,0.04);
}

.ms-row-left {
    flex: 1;
    min-width: 0;
}
.ms-row-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f0fffe;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ms-row-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #1d6cf2, #2278ff);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.01em;
}
.ms-row-badge i { font-size: 0.7rem; }

.ms-row-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(240,255,254,0.92);
    margin-bottom: 5px;
}
.ms-row-rating .fa-star {
    color: #ffce4a;
    font-size: 0.78rem;
}
.ms-row-rating-num {
    font-weight: 700;
    color: #f0fffe;
}
.ms-row-rating-divider {
    color: rgba(240,255,254,0.55);
    font-weight: 500;
}
.ms-row-rating-count {
    color: rgba(125,211,211,0.85);
    text-decoration: underline;
    text-decoration-color: rgba(125,211,211,0.4);
    text-underline-offset: 2px;
    margin-left: 4px;
}

.ms-row-support {
    font-size: 0.82rem;
    color: rgba(240,255,254,0.7);
    display: flex;
    align-items: center;
    gap: 7px;
}
.ms-row-support .fa-check {
    color: #7dd3d3;
    font-size: 0.78rem;
}

.ms-row-right {
    flex-shrink: 0;
}
.ms-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #0c2e2e !important;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
    border: 1px solid rgba(0,0,0,0.05);
    min-width: 140px;
}
.ms-row:hover .ms-row-btn {
    background: linear-gradient(135deg, #17a398, #20b2aa);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(23,163,152,0.4);
    border-color: transparent;
}

.ms-row--recommended {
    background: rgba(29,108,242,0.06);
    border-radius: 12px;
    padding-left: 14px;
    padding-right: 14px;
    margin: 4px 0;
    border-bottom: 1px solid rgba(29,108,242,0.18);
}
.ms-row--recommended:hover {
    background: rgba(29,108,242,0.1);
}

@media (max-width: 768px) {
    .ms-hero {
        grid-template-columns: 1fr;
        padding: 22px 24px;
        gap: 18px;
    }
    .ms-hero-route-line { font-size: 1.35rem; }
    .ms-hero-price-block {
        text-align: left;
        border-right: none;
        border-top: 1px solid #e2e8f0;
        padding-right: 0;
        padding-top: 16px;
    }
    .ms-hero-price { font-size: 2rem; }
    .ms-hero-cta { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
    .ms-book-section { padding: 16px 14px; }
    .ms-row { padding: 16px 4px; gap: 12px; flex-wrap: wrap; }
    .ms-row-name { font-size: 0.95rem; }
    .ms-row-rating { font-size: 0.8rem; }
    .ms-row-support { font-size: 0.78rem; }
    .ms-row-btn { padding: 10px 18px; font-size: 0.85rem; min-width: 110px; }
    .ms-row--recommended { padding-left: 10px; padding-right: 10px; }
}

/* PS LAYOUT (matches mockup design) */
.ps-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 22px;
    align-items: start;
}
.ps-main { min-width: 0; }

.ps-route-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 22px;
    align-items: center;
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    padding: 20px 26px;
    margin-bottom: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.ps-route-info { min-width: 0; }
.ps-route-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f3838;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ps-route-arrow { color: #17a398; font-size: 1rem; }
.ps-route-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: 0.82rem;
    color: #475569;
}
.ps-route-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0fffe;
    padding: 4px 10px;
    border-radius: 6px;
}
.ps-route-meta i { color: #17a398; font-size: 0.78rem; }
.ps-route-price {
    text-align: right;
    border-left: 1px solid #e2e8f0;
    padding-left: 22px;
}
.ps-route-price-label {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.ps-route-price-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: #17a398;
    letter-spacing: -0.03em;
    line-height: 1;
}
.ps-route-price-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 4px;
}
.ps-track-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: white;
    color: #0f3838;
    border: 1.5px solid #e2e8f0;
    padding: 10px 16px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.ps-track-btn:hover { border-color: #17a398; color: #17a398; }
.ps-track-btn i { color: #17a398; }

.ps-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: rgba(255,255,255,0.97);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.ps-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    transition: background 0.18s;
}
.ps-tab:hover { background: #f0fffe; }
.ps-tab--active {
    background: linear-gradient(135deg, #17a398, #20b2aa) !important;
}
.ps-tab--active .ps-tab-label,
.ps-tab--active .ps-tab-price { color: white !important; }
.ps-tab-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
}
.ps-tab-price {
    font-size: 0.92rem;
    font-weight: 700;
    color: #17a398;
}

.ps-disclaimer {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 230, 130, 0.95);
    color: #5d4900;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.85rem;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ps-disclaimer i { color: #b58400; flex-shrink: 0; }

.ps-providers {
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.ps-providers-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f3838;
    margin: 0 0 4px;
}
.ps-providers-sub {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0 0 16px;
}
.ps-providers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ps-row {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    cursor: pointer;
}
.ps-row:hover {
    transform: translateY(-2px);
    border-color: #17a398;
    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
}
.ps-prov-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ps-prov-logo img {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
    background: white;
    padding: 2px;
    border-radius: 4px;
}
.ps-prov-logo-fb {
    width: 100%;
    height: 100%;
    color: white;
    font-weight: 800;
    font-size: 1.25rem;
    align-items: center;
    justify-content: center;
}
.ps-row-info { min-width: 0; }
.ps-row-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f3838;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ps-best-tag {
    display: inline-flex;
    align-items: center;
    background: #17a398;
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ps-row-note {
    font-size: 0.78rem;
    color: #64748b;
}
.ps-row-price { text-align: right; white-space: nowrap; }
.ps-row-price-from {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-right: 2px;
}
.ps-row-price-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f3838;
    letter-spacing: -0.02em;
}
.ps-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #17a398, #20b2aa);
    color: white !important;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    white-space: nowrap;
    transition: box-shadow 0.18s, transform 0.18s;
    box-shadow: 0 2px 8px rgba(23,163,152,0.25);
}
.ps-row:hover .ps-row-btn {
    box-shadow: 0 6px 16px rgba(23,163,152,0.4);
    transform: translateY(-1px);
}
.ps-row-btn i { font-size: 0.7rem; }

.ps-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 24px;
}
.ps-side-card {
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.ps-side-illu {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #cdf3f3, #b9e8e8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #17a398;
    font-size: 1.4rem;
}
.ps-side-illu--cal {
    background: linear-gradient(135deg, #e6f0ff, #cfdef9);
    color: #2278ff;
}
.ps-side-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f3838;
    margin-bottom: 4px;
}
.ps-side-text {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 12px;
    line-height: 1.5;
}
.ps-side-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: white;
    color: #0f3838;
    border: 1.5px solid #e2e8f0;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s;
}
.ps-side-btn:hover { border-color: #17a398; color: #17a398; }
.ps-side-btn i { color: #17a398; }
.ps-side-btn--ghost { background: white; }
.ps-routes-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.ps-routes-list li {
    border-bottom: 1px solid #f1f5f9;
}
.ps-routes-list li:last-child { border-bottom: none; }
.ps-routes-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    color: #0f3838;
    font-size: 0.85rem;
    transition: color 0.15s;
}
.ps-routes-list a:hover { color: #17a398; }
.ps-routes-list i { color: #17a398; font-size: 0.7rem; margin: 0 4px; }
.ps-route-from { color: #17a398; font-weight: 600; font-size: 0.82rem; }
.ps-side-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #17a398;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.18s;
}
.ps-side-link:hover { gap: 10px; }

@media (max-width: 1024px) {
    .ps-layout { grid-template-columns: 1fr; }
    .ps-sidebar { position: static; }
}
@media (max-width: 768px) {
    .ps-route-card { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
    .ps-route-price { text-align: left; border-left: none; border-top: 1px solid #e2e8f0; padding-left: 0; padding-top: 14px; }
    .ps-track-btn { width: 100%; justify-content: center; }
    .ps-tabs { grid-template-columns: repeat(2, 1fr); }
    .ps-row { grid-template-columns: 44px 1fr; gap: 12px; }
    .ps-row-price { grid-column: 2; text-align: left; padding-top: 4px; }
    .ps-row-btn { grid-column: 1 / -1; justify-content: center; padding: 11px; }
}