:root {
--primary-color: #3b49df; 
--secondary-color: #333;
--bg-color: #f8f8f8;
--white: #ffffff;
--green: #28a745;
--red: #dc3545;
--free-tour-color: #ff6a00;
--dark-blue: #003366;
} .booking-info-icon .booking-tooltip {
display: none;
position: absolute;
bottom: calc(-100% + 8px);
left: 50%;
transform: translateX(5%);
background: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.booking-info-icon:hover .booking-tooltip {
display: block;
}
.booking-genius-icon {
width: 50px;
height: auto;
vertical-align: middle;
margin-right: 5px;
padding-bottom: 5px;
}
.tour-gallery {
margin-bottom: 40px; } .tour-card {
background: var(--white);
border-radius: 10px;
overflow: hidden;
margin: 20px auto;
}
.tour-header {
display: flex;
flex-wrap: wrap;
}
.tour-image {
flex: 1 1 300px;
background-size: cover;
background-position: center;
min-height: 250px;
position: relative;
}
.tour-info {
flex: 1 1 300px;
padding-top: 8px;
padding-bottom: 15px;
padding-right: 15px;
padding-left: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tour-title {
margin: 0;
margin-top: 1px !important;
font-size: 30px;
color: #000;
text-shadow: 1px 1px 3px rgba(255,106,0,0.5);
}
.page-title-h1 {
margin: 0;
margin-top: 1px !important;
margin-bottom: 10px !important;
font-size: 45px;
color: #000;
text-shadow: 1px 1px 3px rgba(255,106,0,0.5);
}
.page-title-h2 {
margin: 0;
margin-top: 1px !important;
font-size: 26px;
color: #000;
text-shadow: 1px 1px 3px rgba(255,106,0,0.5);
}
.tour-location {
font-size: 16px;
color: var(--secondary-color);
margin: 10px 0;
}
.tour-location i {
color: var(--red);
}
.tour-meta {
display: flex;
gap: 15px;
align-items: center;
font-size: 14px;
color: var(--secondary-color);
}
.tour-meta i {
margin-right: 5px;
}
.tour-features {
margin-top: 5px;
display: flex;
gap: 15px;
flex-wrap: wrap;
font-size: 14px;
color: var(--secondary-color);
}
.feature-accessible i {
color: var(--dark-blue);
}
.feature-cancellation i {
color: var(--green);
}
.feature-trending i {
color: #ff6a00;
}
.tour-features span i {
margin-right: 5px;
}
.tour-description {
padding: 20px;
border-top: 1px solid #eee;
} .link-best-recommendation,
.link-best-recommendation:hover {
text-decoration: underline;
text-decoration-color: var(--primary-color);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: text-shadow 0.3s ease;
}
.link-best-recommendation:hover {
text-shadow: 0 0 10px var(--primary-color);
} .providers-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
padding: 10px;
}
.providers-header h2 {
font-size: 20px;
color: var(--secondary-color);
margin: 0 0 15px 0;
white-space: normal;
}
.tooltip-container {
position: relative;
flex-shrink: 0;
}
.tooltip-container i {
font-size: 16px;
color: var(--secondary-color);
cursor: pointer;
vertical-align: super;
}
.tooltip-container .tooltip-inline-text {
visibility: hidden;
opacity: 0;
background-color: var(--secondary-color);
color: #fff;
text-align: center;
border-radius: 4px;
padding: 5px 8px;
position: absolute;
z-index: 1;
top: 100%;
left: 0;
margin-top: 5px;
width: 400px;
font-size: 12px;
transition: opacity 0.3s;
}
.tooltip-container:hover .tooltip-inline-text {
visibility: visible;
opacity: 1;
}
@media (max-width: 600px) {
.providers-header {
flex-wrap: nowrap;
align-items: center;
}
.tooltip-container .tooltip-inline-text {
left: 50%;
transform: translateX(-100%);
top: 110%; margin-top: 5px;
width: auto;
width: 250px; font-size: 10px;
}
} .price-history {
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
background: var(--bg-color);
border-top: 1px solid #eee;
}
.price-history button.toggle-price-history:hover {
color:#3b49df;
}
.price-history button.toggle-price-history {
background: none;
border: none;
font-size: 16px;
color: #000;
cursor: pointer;
align-items: center;
gap: 8px;
margin-bottom: 15px;
}
.price-history-content {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.price-chart {
position: relative;
height: 300px;
margin-bottom: 20px;
}
.price-stats {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.price-stats > div {
flex: 1 1 250px;
background: #fffbea;
border: 1px solid #e3e3e3;
border-radius: 8px;
padding: 15px;
text-align: center;
}
.stat-detail {
font-size: 14px;
color: var(--secondary-color);
margin: 8px 0;
}
.stat-price {
font-size: 22px;
font-weight: bold;
}
.price-low .stat-price {
color: var(--green);
}
.price-high .stat-price {
color: var(--red);
}
.price-additional {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 20px;
}
.price-additional > div {
background: #fff;
border: 1px solid #e3e3e3;
border-radius: 8px;
padding: 15px;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--secondary-color);
}
.price-additional i {
font-size: 20px;
padding-right: 5px;
}
.based-on {
display: block;
font-size: 10px;
color: #818181;
margin-top: 5px;
}
.providers-section {
padding: 20px;
border-top: 1px solid #eee;
}
.providers-list {
display: block;
} .provider-card {
background: var(--white);
border: 1px solid #e3e3e3;
border-radius: 10px;
width: 100%;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
overflow: hidden;
}
.provider-card.best-offer-card {
box-shadow: 0 0 10px 0 var(--green);
border: 1px solid var(--green);
}
.provider-card-content {
display: flex;
align-items: center;
padding: 10px 15px;
gap: 10px;
}
.provider-order-logo {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.provider-order {
width: 30px;
height: 30px;
background: #f0f0f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0;
}
.provider-order-free {
width: 30px;
height: 30px;
font-size: 10px;
background: #f0f0f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.provider-logo-section {
flex-shrink: 0;
}
.provider-logo {
width: 80px;
height: 40px;
object-fit: contain;
}
.provider-rating-button {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
justify-content: space-between;
}
.provider-rating-section {
display: flex;
align-items: center;
gap: 2px;
flex-wrap: wrap;
}
.provider-rating-text {
font-size: 14px;
}
.provider-button-section {
flex: 0 0 30%;
text-align: center;
}
.provider-book-btn {
display: inline-block;
padding: 10px;
text-decoration: none;
font-weight: 500;
color: #fff;
border-radius: 5px;
width: 100%;
transition: box-shadow 0.3s, filter 0.3s;
}
.btn-price {
color: #fff !important;
}
.provider-book-btn:hover .btn-price {
color: #fff !important;
}
.provider-book-btn.best-offer:hover {
box-shadow: 0 0 10px rgba(0,59,13,0.9);
}
.provider-book-btn.free-tour:hover {
box-shadow: 0 0 10px rgba(255,179,71,0.5);
}
.provider-book-btn:not(.best-offer):not(.free-tour):hover {
box-shadow: 0 0 10px rgba(16,3,80,0.9);
}
.provider-book-btn.best-offer {
background: var(--green);
}
.provider-card.guruwalk .provider-book-btn.free-tour {
background: var(--free-tour-color);
}
.provider-book-btn:not(.best-offer):not(.free-tour) {
background: var(--primary-color);
}
.best-label-badge {
background: var(--green);
color: #fff;
padding: 3px 8px;
font-size: 14px;
font-weight: bold;
border-radius: 3px;
margin-bottom: 5px;
text-align: center;
width: 100%;
} @media (max-width: 600px) {
.provider-card-content {
flex-direction: column;
align-items: stretch;
padding: 8px 10px;
}
.provider-order-logo {
flex-direction: row;
margin-bottom: 5px;
}
.provider-rating-button {
flex-direction: column;
align-items: center;
gap: 5px;
}
.provider-button-section {
width: 100%;
text-align: center;
margin-top: 5px;
}
.provider-logo {
width: 80px;
height: 30px;
object-fit: contain;
}
.booking-info-icon .booking-tooltip {
max-width: 200px;
width: 200px;
height: auto;
white-space: normal;
left: 50%;
transform: translateX(-80%);
bottom: calc(-290% + 10px);
}
.page-title-h1 {
font-size: 35px;
}
.page-title-h2 {
font-size: 20px;
}
}