/* ==============================================
LETGO THEME - CONSOLIDATED STYLESHEET
Auto-generated from inline styles
============================================== */
/* === CSS VARIABLES === */
:root {
/* Primary theme colors */
--primary-orange: #FF6B35;
--primary-coral: #FF8C61;
--dark-navy: #1A1A2E;
--light-gray: #F5F7FA;
--white: #FFFFFF;
--text-dark: #2C3E50;
--text-light: #6C757D;
--success-green: #10B981;
--warning-yellow: #F59E0B;
--error-red: #EF4444;
/* Aliased names */
--letgo-primary: var(--primary-orange);
--letgo-primary-hover: var(--primary-coral);
--letgo-primary-light: #FFF4F0;
--letgo-primary-dark: var(--primary-coral);
--letgo-secondary: var(--dark-navy);
--letgo-accent: var(--primary-coral);
--letgo-white: var(--white);
--letgo-light-bg: var(--light-gray);
--letgo-gray-700: var(--text-dark);
--letgo-gray-600: var(--text-light);
--letgo-gray-100: #F9FAFB;
--letgo-gray-200: #E5E7EB;
--letgo-gray-300: #D1D5DB;
--letgo-gray-900: #111827;
/* RGB channel variables for rgba() usage */
--primary-orange-rgb: 255, 107, 53;
--primary-coral-rgb: 255, 140, 97;
--dark-navy-rgb: 26, 26, 46;
--success-green-rgb: 16, 185, 129;
--error-red-rgb: 239, 68, 68;
/* Shorthand aliases (used by booking pages) */
--primary: var(--primary-orange);
--primary-hover: var(--primary-coral);
--primary-gradient: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
--secondary-gradient: linear-gradient(135deg, #f5576c 0%, #ff6b95 100%);
--card-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
/* Utility tokens */
--letgo-radius-md: 0.5rem;
--letgo-radius-lg: 0.75rem;
--letgo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--letgo-spacing-md: 1.5rem;
--letgo-spacing-lg: 2rem;
--letgo-font-primary: 'Poppins', sans-serif;
--letgo-transition-base: all 0.3s ease;
}
/* === HEADER === */
/* ========================================
TOURVISOR INSPIRED HEADER STYLES
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
/* ----------- HEADER ----------- */
.travel-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 20px 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
}
.travel-header.scrolled {
padding: 15px 0;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ----------- LOGO ----------- */
.header-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
font-size: 28px;
font-weight: 800;
color: var(--letgo-secondary);
transition: all 0.3s ease;
z-index: 1001;
}
.header-logo:hover {
transform: scale(1.05);
color: var(--letgo-primary);
}
.logo-icon {
font-size: 36px;
display: flex;
align-items: center;
filter: drop-shadow(0 2px 4px rgba(var(--primary-orange-rgb), 0.3));
}
.logo-icon .custom-logo {
height: 45px;
width: auto;
object-fit: contain;
}
/* ----------- DESKTOP NAVIGATION ----------- */
.header-nav {
display: flex;
align-items: center;
gap: 40px;
}
.nav-links {
display: flex;
gap: 35px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links li {
margin: 0;
padding: 0;
position: relative;
}
.nav-links a {
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
position: relative;
display: block;
padding: 8px 0;
}
.nav-links a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-orange), var(--primary-coral));
border-radius: 2px;
transition: width 0.3s ease;
}
.nav-links a:hover::before,
.nav-links a.active::before {
width: 100%;
}
.nav-links a:hover {
color: var(--primary-orange);
}
/* ----------- SUBMENU DROPDOWN ----------- */
.nav-links .sub-menu {
position: absolute;
top: calc(100% + 15px);
left: 0;
min-width: 240px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
padding: 15px 0;
z-index: 100;
}
.nav-links li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-links .sub-menu li {
display: block;
margin: 0;
}
.nav-links .sub-menu a {
color: var(--text-dark);
padding: 12px 25px;
font-size: 14px;
display: block;
border-radius: 8px;
margin: 0 8px;
}
.nav-links .sub-menu a::before {
display: none;
}
.nav-links .sub-menu a:hover {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: white;
transform: translateX(5px);
}
/* ----------- CTA BUTTON ----------- */
.header-cta {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: white;
padding: 12px 28px;
border-radius: 30px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
display: inline-block;
}
.header-cta:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.4);
}
/* ----------- PROFILE MENU ----------- */
.profile-menu {
position: relative;
}
.profile-button {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
border: 3px solid rgba(var(--primary-orange-rgb), 0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 20px;
color: white;
}
.profile-button img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-button:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 5px 20px rgba(var(--primary-orange-rgb), 0.4);
}
.profile-dropdown {
position: absolute;
top: calc(100% + 15px);
right: 0;
min-width: 220px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
overflow: hidden;
}
.profile-menu.active .profile-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-header {
padding: 20px;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: white;
}
.dropdown-header .user-name {
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.dropdown-header .user-email {
font-size: 12px;
opacity: 0.9;
}
.dropdown-menu {
padding: 10px;
}
.dropdown-menu a,
.dropdown-menu button {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 15px;
color: var(--text-dark);
text-decoration: none;
font-size: 14px;
font-weight: 500;
border: none;
background: none;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
border-radius: 8px;
}
.dropdown-menu a:hover,
.dropdown-menu button:hover {
background: var(--light-gray);
color: var(--primary-orange);
transform: translateX(5px);
}
.dropdown-menu .logout-btn {
border-top: 1px solid #e9ecef;
color: var(--error-red);
margin-top: 5px;
padding-top: 15px;
}
/* ----------- HAMBURGER MENU ----------- */
.mobile-toggle {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
z-index: 1001;
padding: 10px;
}
.mobile-toggle span {
width: 28px;
height: 3px;
background: var(--primary-orange);
border-radius: 3px;
transition: all 0.3s ease;
}
.mobile-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.mobile-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(8px, -8px);
}
/* ----------- MOBILE MENU ----------- */
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background: white;
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
padding: 100px 30px 30px;
}
.mobile-menu.active {
right: 0;
}
.mobile-nav-links {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-nav-links li {
margin-bottom: 5px;
}
.mobile-nav-links a {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
font-size: 15px;
border-radius: 12px;
transition: all 0.3s ease;
}
.mobile-nav-links a:hover,
.mobile-nav-links a.active {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: white;
transform: translateX(10px);
}
.mobile-nav-links .sub-menu {
list-style: none;
padding-left: 20px;
margin-top: 5px;
display: none;
}
.mobile-nav-links li.menu-item-has-children > a::after {
content: ' ▼';
font-size: 10px;
margin-left: auto;
}
.mobile-nav-links .sub-menu a {
font-size: 14px;
padding: 10px 15px;
font-weight: 500;
}
.mobile-nav-links li.menu-item-has-children.open > .sub-menu {
display: block;
}
/* ----------- MOBILE OVERLAY ----------- */
.mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.mobile-overlay.active {
opacity: 1;
visibility: visible;
}
/* ----------- RESPONSIVE ----------- */
@media (max-width: 968px) {
.header-nav .nav-links {
display: none;
}
.header-cta {
display: none;
}
.mobile-toggle {
display: flex;
}
}
@media (max-width: 480px) {
.header-container {
padding: 0 20px;
}
.header-logo {
font-size: 22px;
}
.logo-icon {
font-size: 30px;
}
.logo-icon .custom-logo {
height: 35px;
}
.mobile-menu {
width: 280px;
padding: 90px 20px 20px;
}
.profile-button {
width: 40px;
height: 40px;
font-size: 18px;
}
}
/* === FOOTER === */
/* ============================================
FOOTER DESIGN - BLUE THEME (#2D9CDB)
============================================ */
/* Footer animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Main Footer */
.site-footer {
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
position: relative;
overflow: hidden;
padding: 0;
margin-top: 0;
width: 100%;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(var(--primary-orange-rgb), 0.3) 0%, transparent 70%);
pointer-events: none;
}
.site-footer::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
pointer-events: none;
}
/* Newsletter Section */
.footer-newsletter {
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.95) 0%, rgba(var(--primary-coral-rgb), 0.9) 100%);
padding: 80px 0;
text-align: center;
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
}
.newsletter-content {
max-width: 700px;
margin: 0 auto;
animation: fadeInUp 1s ease-out;
}
.newsletter-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
margin-bottom: 1rem;
color: white;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
letter-spacing: -1px;
}
.newsletter-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 2.5rem;
line-height: 1.6;
}
.newsletter-form {
display: flex;
gap: 15px;
max-width: 550px;
margin: 0 auto;
}
.newsletter-input {
flex: 1;
padding: 18px 28px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
background: rgba(255, 255, 255, 0.15);
color: white;
font-size: 15px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-input:focus {
outline: none;
border-color: white;
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
.newsletter-button {
padding: 18px 38px;
background: white;
color: var(--primary-orange);
border: none;
border-radius: 50px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
font-size: 15px;
white-space: nowrap;
}
.newsletter-button:hover {
transform: translateY(-4px);
box-shadow: 0 10px 35px rgba(255, 255, 255, 0.3);
background: #FFF5F2;
}
/* Footer Content */
.footer-content {
display: grid;
grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
gap: 50px;
padding: 80px 0 50px;
position: relative;
z-index: 2;
}
.footer-widget {
animation: fadeInUp 0.8s ease-out;
}
.footer-widget:nth-child(2) {
animation-delay: 0.1s;
}
.footer-widget:nth-child(3) {
animation-delay: 0.2s;
}
.footer-widget:nth-child(4) {
animation-delay: 0.3s;
}
.footer-widget h3 {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 25px;
color: white;
position: relative;
padding-bottom: 15px;
}
.footer-widget h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: white;
border-radius: 2px;
}
.footer-widget p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.8;
margin-bottom: 1.5rem;
font-size: 1rem;
}
/* Footer Logo Section */
.footer-logo-section {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.footer-logo-icon {
font-size: 3rem;
flex-shrink: 0;
filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.5));
}
.footer-logo img {
max-width: 60px;
height: auto;
}
.footer-brand-name {
font-size: 2rem;
font-weight: 900;
color: white;
margin: 0;
line-height: 1.2;
}
/* Footer Menu */
.footer-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-widget ul li {
margin-bottom: 12px;
}
.footer-widget ul li a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1rem;
position: relative;
padding-left: 20px;
}
.footer-widget ul li a::before {
content: '→';
position: absolute;
left: 0;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.footer-widget ul li a:hover {
color: white;
transform: translateX(8px);
}
.footer-widget ul li a:hover::before {
opacity: 1;
transform: translateX(0);
}
/* Contact Info */
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.footer-contact-item:hover {
color: white;
transform: translateX(5px);
}
.footer-contact-icon {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
backdrop-filter: blur(10px);
}
.footer-contact-text {
flex: 1;
}
.footer-contact-label {
font-size: 0.85rem;
opacity: 0.9;
margin-bottom: 5px;
}
.footer-contact-value {
font-weight: 700;
font-size: 1.05rem;
}
/* Social Links */
.footer-social {
display: flex;
gap: 12px;
margin-top: 25px;
}
.social-icon {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.2);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.social-icon:hover {
background: white;
color: var(--primary-orange);
transform: translateY(-5px) rotate(10deg);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}
/* Footer Bottom */
.footer-bottom {
padding: 30px 0;
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-bottom p {
margin: 0;
color: rgba(255, 255, 255, 0.95);
font-size: 0.95rem;
}
.footer-bottom-links {
display: flex;
gap: 30px;
}
.footer-bottom-links a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.footer-bottom-links a:hover {
color: white;
text-decoration: underline;
}
/* Scroll to Top Button */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 55px;
height: 55px;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 1.6rem;
box-shadow: 0 6px 25px rgba(var(--primary-orange-rgb), 0.4);
transition: all 0.3s ease;
z-index: 9999;
animation: float 3s ease-in-out infinite;
}
.scroll-to-top.show {
display: flex;
}
.scroll-to-top:hover {
transform: translateY(-8px) scale(1.1);
box-shadow: 0 12px 40px rgba(var(--primary-orange-rgb), 0.6);
}
/* Responsive Design */
@media (max-width: 968px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.newsletter-title {
font-size: 2rem;
}
.footer-widget:first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 40px;
}
.newsletter-form {
flex-direction: column;
}
.newsletter-button {
width: 100%;
}
.newsletter-title {
font-size: 1.75rem;
}
.footer-newsletter {
padding: 60px 0;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.footer-bottom-links {
flex-direction: column;
gap: 15px;
}
}
@media (max-width: 480px) {
.footer-newsletter {
padding: 50px 0;
}
.newsletter-title {
font-size: 1.5rem;
}
.footer-widget h3 {
font-size: 1.25rem;
}
.scroll-to-top {
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
font-size: 1.4rem;
}
}
/* === HOME PAGE === */
/* ============================================
ENHANCED HOME PAGE DESIGN
============================================ */
/* ----------- BUTTONS ----------- */
.btn {
padding: 16px 36px;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
display: inline-block;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
font-size: 15px;
}
.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;
}
.btn:hover::before {
width: 400px;
height: 400px;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.35);
}
.btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(var(--primary-orange-rgb), 0.45);
}
.btn-outline {
background: transparent;
color: white;
border: 3px solid white;
backdrop-filter: blur(10px);
}
.btn-outline:hover {
background: white;
color: var(--primary-orange);
}
.btn-lg {
padding: 18px 42px;
font-size: 16px;
}
/* ----------- ANIMATIONS ----------- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.animate-on-scroll {
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.animated {
opacity: 1;
}
/* ----------- HERO SECTION ----------- */
.hero-section {
min-height: 100vh;
background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F2 100%);
padding: 100px 0 10px;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(var(--primary-orange-rgb), 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
}
/* Hero Text */
.hero-text .welcome-text {
font-family: 'Dancing Script', cursive;
font-size: 2.5rem;
color: var(--primary-orange);
margin-bottom: 20px;
font-weight: 700;
animation: fadeInUp 1s ease-out;
}
.hero-text h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
margin-bottom: 1.5rem;
font-weight: 900;
animation: fadeInUp 1s ease-out 0.2s backwards;
line-height: 1.2;
letter-spacing: -1px;
}
.hero-text p {
font-size: clamp(1.1rem, 2vw, 1.3rem);
color: var(--text-light);
margin-bottom: 3rem;
animation: fadeInUp 1s ease-out 0.4s backwards;
line-height: 1.8;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.6s backwards;
}
/* Hero Images - Circular Layout */
.hero-images {
position: relative;
height: 600px;
}
.hero-circle-img {
position: absolute;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border: 8px solid white;
transition: transform 0.3s ease;
}
.hero-circle-img:hover {
transform: scale(1.05);
}
.hero-circle-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-circle-img.large {
width: 350px;
height: 350px;
bottom: 50px;
right: 100px;
z-index: 3;
animation: fadeInUp 1s ease-out 0.8s backwards;
}
.hero-circle-img.medium {
width: 220px;
height: 220px;
top: 20px;
right: 50px;
z-index: 2;
animation: fadeInUp 1s ease-out 1s backwards;
}
.hero-circle-img.small-1 {
width: 150px;
height: 150px;
bottom: 150px;
left: 50px;
z-index: 1;
animation: fadeInUp 1s ease-out 1.2s backwards;
}
.hero-circle-img.small-2 {
width: 180px;
height: 180px;
bottom: 20px;
right: 450px;
z-index: 2;
animation: fadeInUp 1s ease-out 1.4s backwards;
}
/* Decorative Elements */
.deco-line {
position: absolute;
width: 200px;
height: 200px;
border: 4px solid var(--primary-orange);
border-radius: 50%;
opacity: 0.3;
}
.deco-line.line-1 {
top: 0;
right: 200px;
border-top: none;
border-left: none;
}
.deco-line.line-2 {
bottom: 80px;
right: 0;
border-bottom: none;
border-right: none;
}
/* ----------- SECTION STYLES ----------- */
.section {
padding: 100px 0;
}
.section-light {
background: var(--light-gray);
}
.section-header {
text-align: center;
margin-bottom: 70px;
}
.section-subtitle {
color: var(--primary-orange);
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
display: inline-block;
}
.section-title {
font-size: clamp(2rem, 4vw, 3.5rem);
margin-bottom: 1.5rem;
font-weight: 900;
position: relative;
letter-spacing: -1px;
}
.section-description {
font-size: 1.1rem;
color: var(--text-light);
max-width: 650px;
margin: 0 auto;
line-height: 1.8;
}
/* ----------- TRIP CARDS ----------- */
.trip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 35px;
margin-top: 50px;
}
.trip-card {
background: white;
border-radius: 20px;
overflow: hidden;
text-decoration: none;
transition: all 0.4s ease;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
}
.trip-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 50px rgba(var(--primary-orange-rgb), 0.25);
}
.trip-card-image {
height: 250px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.trip-card-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.5) 0%, rgba(var(--dark-navy-rgb), 0.5) 100%);
transition: opacity 0.4s ease;
}
.trip-card:hover .trip-card-image::before {
opacity: 0.7;
}
.trip-card-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--primary-orange);
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 13px;
font-weight: 700;
z-index: 1;
}
.trip-card-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 70px;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
transition: transform 0.4s ease;
z-index: 1;
}
.trip-card:hover .trip-card-icon {
transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
}
.trip-card-content {
padding: 30px;
flex-grow: 1;
}
.trip-card-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 800;
color: var(--text-dark);
}
.trip-card-desc {
color: var(--text-light);
line-height: 1.7;
font-size: 0.95rem;
}
/* ----------- CTA SECTION ----------- */
.cta-section {
padding: 120px 0;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
border-radius: 50%;
}
.cta-content {
text-align: center;
position: relative;
z-index: 2;
}
.cta-text h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
color: white;
margin-bottom: 1.5rem;
font-weight: 900;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
letter-spacing: -1px;
line-height: 1.2;
}
.cta-text p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 3rem;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
.cta-text .btn {
background: white;
color: var(--primary-orange);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.cta-text .btn:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
/* ----------- HOW IT WORKS SECTION ----------- */
.how-it-works-section {
padding: 100px 0;
background: white;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 50px;
margin-top: 60px;
}
.step-item {
text-align: center;
padding: 40px 30px;
border-radius: 20px;
transition: all 0.4s ease;
background: var(--light-gray);
}
.step-item:hover {
background: white;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
transform: translateY(-10px);
}
.step-number {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 900;
color: white;
margin: 0 auto 30px;
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.3);
transition: all 0.4s ease;
}
.step-item:hover .step-number {
transform: scale(1.1) rotate(10deg);
box-shadow: 0 15px 40px rgba(var(--primary-orange-rgb), 0.4);
}
.step-item h3 {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 800;
}
.step-item p {
color: var(--text-light);
line-height: 1.8;
font-size: 1rem;
}
/* ----------- READY SECTION ----------- */
.ready-section {
padding: 100px 0;
background: var(--light-gray);
}
.ready-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.ready-text h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
margin-bottom: 2rem;
font-weight: 900;
line-height: 1.2;
letter-spacing: -1px;
}
.ready-text .highlight {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ready-text p {
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: 2rem;
}
.ready-image {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.ready-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.ready-image:hover img {
transform: scale(1.1);
}
/* ----------- TESTIMONIALS SECTION ----------- */
.testimonials-section {
padding: 100px 0;
background: white;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 35px;
margin-top: 60px;
}
.testimonial-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border: 2px solid transparent;
position: relative;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: 15px;
left: 25px;
font-size: 80px;
color: rgba(var(--primary-orange-rgb), 0.1);
font-family: Georgia, serif;
line-height: 1;
}
.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(var(--primary-orange-rgb), 0.2);
border-color: var(--primary-orange);
}
.testimonial-rating {
color: var(--warning-yellow);
font-size: 1.3rem;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.testimonial-text {
color: var(--text-light);
line-height: 1.8;
margin-bottom: 25px;
font-size: 1rem;
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.author-info h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 3px;
}
.author-info p {
color: var(--text-light);
font-size: 0.9rem;
}
/* ----------- CONTACT SECTION ----------- */
.contact-section {
padding: 100px 0;
background: var(--light-gray);
}
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 50px;
align-items: start;
}
.contact-form-area h2 {
font-size: clamp(2rem, 3vw, 2.5rem);
margin-bottom: 1.5rem;
font-weight: 900;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contact-form input,
.contact-form textarea {
padding: 18px 24px;
border: 2px solid #E5E7EB;
border-radius: 12px;
font-size: 15px;
transition: all 0.3s ease;
font-family: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--primary-orange);
box-shadow: 0 4px 20px rgba(var(--primary-orange-rgb), 0.15);
}
.contact-info-card {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: white;
padding: 50px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(var(--primary-orange-rgb), 0.3);
}
.contact-info-card h3 {
font-size: 1.8rem;
color: white;
margin-bottom: 30px;
font-weight: 800;
}
.contact-info-card .info-item {
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
box-shadow: none;
border-radius: 0;
padding: 0 0 25px 0;
}
.contact-info-card .info-item:last-child {
border-bottom: none;
}
.contact-info-card .info-item p:first-child {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin-bottom: 5px;
}
.contact-info-card .info-item p:last-child {
color: white;
font-weight: 700;
font-size: 1.1rem;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 30px;
}
.social-link {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.2);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
}
.social-link:hover {
background: white;
color: var(--primary-orange);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}
/* ----------- RESPONSIVE ----------- */
@media (max-width: 1200px) {
.hero-content {
gap: 50px;
}
.hero-images {
height: 500px;
}
.hero-circle-img.large {
width: 300px;
height: 300px;
}
}
@media (max-width: 968px) {
.hero-content {
grid-template-columns: 1fr;
gap: 60px;
}
.hero-text {
text-align: center;
}
.hero-buttons {
justify-content: center;
}
.hero-images {
height: 450px;
margin: 0 auto;
max-width: 500px;
}
.ready-content {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-grid {
grid-template-columns: 1fr;
}
.profile-menu{
display:none;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 130px 0 60px;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
.steps-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.container {
padding: 0 20px;
}
.hero-text .welcome-text {
font-size: 2rem;
}
.hero-images {
height: 350px;
}
.hero-circle-img.large {
width: 250px;
height: 250px;
right: 20px;
}
.hero-circle-img.medium {
width: 150px;
height: 150px;
}
.hero-circle-img.small-1,
.hero-circle-img.small-2 {
width: 120px;
height: 120px;
}
.section,
.how-it-works-section,
.ready-section,
.testimonials-section,
.contact-section,
.cta-section {
padding: 60px 0;
}
.contact-info-card {
padding: 30px;
}
}
/* === ABOUT US === */
/* Hero Banner */
.about-banner {
position: relative;
height: 600px;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.9) 0%, rgba(var(--primary-coral-rgb), 0.9) 100%),
url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1920') center/cover;
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
overflow: hidden;
}
.about-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.85) 0%, rgba(var(--primary-coral-rgb), 0.85) 100%);
z-index: 1;
}
.about-banner::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to top, var(--light-gray), transparent);
z-index: 2;
}
.banner-content {
position: relative;
z-index: 3;
text-align: center;
color: white;
max-width: 900px;
padding: 0 2rem;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.banner-icon {
font-size: 6rem;
margin-bottom: 1.5rem;
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
25%, 75% { transform: scale(1.1); }
50% { transform: scale(1.05); }
}
.banner-title {
font-size: 4.5rem;
font-weight: 800;
margin-bottom: 1rem;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.banner-subtitle {
font-size: 1.75rem;
opacity: 0.95;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
line-height: 1.6;
}
/* Main Content */
.about-page {
padding: 5rem 0;
}
.about-page .container {
max-width: 1400px;
padding: 0 2rem;
}
/* Story Section */
.story-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 6rem;
align-items: center;
}
.story-content {
animation: slideInLeft 0.8s ease-out;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.section-label {
display: inline-block;
padding: 0.5rem 1.5rem;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 2rem;
margin-bottom: 1.5rem;
}
.story-content h2 {
font-size: 3rem;
font-weight: 800;
color: var(--dark-navy);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.story-content p {
font-size: 1.125rem;
color: var(--text-light);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.story-image {
position: relative;
border-radius: 2rem;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
animation: slideInRight 0.8s ease-out;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.story-image img {
width: 100%;
height: 500px;
object-fit: cover;
transition: transform 0.6s ease;
}
.story-image:hover img {
transform: scale(1.05);
}
/* Stats Section */
.stats-section {
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
border-radius: 2rem;
padding: 4rem 3rem;
margin-bottom: 6rem;
position: relative;
overflow: hidden;
}
.stats-section::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
position: relative;
z-index: 1;
}
.stat-item {
text-align: center;
color: white;
animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.stat-number {
font-size: 4rem;
font-weight: 800;
margin-bottom: 0.5rem;
line-height: 1;
animation: countUp 2s ease-out;
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stat-label {
font-size: 1.125rem;
opacity: 0.95;
font-weight: 500;
}
/* Values Section */
.values-section {
margin-bottom: 6rem;
}
.section-header {
text-align: center;
max-width: 800px;
margin: 0 auto 4rem;
}
.section-header h2 {
font-size: 3rem;
font-weight: 800;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.section-header p {
font-size: 1.25rem;
color: var(--text-light);
line-height: 1.8;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.value-card {
background: white;
border-radius: 1.5rem;
padding: 3rem 2rem;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.value-card:nth-child(1) { animation-delay: 0.1s; }
.value-card:nth-child(2) { animation-delay: 0.2s; }
.value-card:nth-child(3) { animation-delay: 0.3s; }
.value-card:nth-child(4) { animation-delay: 0.4s; }
.value-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(var(--primary-orange-rgb), 0.15);
}
.value-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
border-radius: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2.5rem;
color: white;
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.3);
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.value-card h3 {
font-size: 1.75rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.value-card p {
font-size: 1rem;
color: var(--text-light);
line-height: 1.8;
}
/* Team Section */
.team-section {
background: white;
border-radius: 2rem;
padding: 4rem 3rem;
margin-bottom: 6rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.team-header {
text-align: center;
margin-bottom: 3rem;
}
.team-header h2 {
font-size: 3rem;
font-weight: 800;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.team-header p {
font-size: 1.25rem;
color: var(--text-light);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.team-member {
text-align: center;
animation: fadeIn 0.8s ease-out;
}
.team-member:nth-child(1) { animation-delay: 0.1s; }
.team-member:nth-child(2) { animation-delay: 0.2s; }
.team-member:nth-child(3) { animation-delay: 0.3s; }
.team-member:nth-child(4) { animation-delay: 0.4s; }
.member-photo {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
font-weight: 800;
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.3);
transition: all 0.3s ease;
}
.team-member:hover .member-photo {
transform: scale(1.1) rotate(5deg);
}
.member-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.member-role {
font-size: 1rem;
color: var(--text-light);
margin-bottom: 1rem;
}
.member-social {
display: flex;
justify-content: center;
gap: 1rem;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--light-gray);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dark);
transition: all 0.3s ease;
text-decoration: none;
}
.social-link:hover {
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
transform: translateY(-3px);
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, var(--dark-navy) 0%, #0f1419 100%);
border-radius: 2rem;
padding: 4rem 3rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(var(--primary-orange-rgb), 0.1) 0%, transparent 70%);
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cta-section h2 {
font-size: 3rem;
font-weight: 800;
color: white;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.cta-section p {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 3rem;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
font-size: 1.25rem;
font-weight: 700;
border: none;
border-radius: 3rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.4);
position: relative;
z-index: 1;
}
.cta-btn:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(var(--primary-orange-rgb), 0.5);
}
/* Responsive */
@media (max-width: 1024px) {
.story-section {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 768px) {
.about-banner {
height: 500px;
margin-top: 60px;
}
.banner-icon {
font-size: 4rem;
}
.banner-title {
font-size: 3rem;
}
.banner-subtitle {
font-size: 1.25rem;
}
.story-content h2,
.section-header h2,
.team-header h2,
.cta-section h2 {
font-size: 2.5rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.stat-number {
font-size: 3rem;
}
.values-grid {
grid-template-columns: 1fr;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.about-page .container {
padding: 0 1rem;
}
.about-banner {
height: 400px;
}
.banner-title {
font-size: 2.5rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.team-grid {
grid-template-columns: 1fr;
}
.cta-btn {
width: 100%;
justify-content: center;
}
}
/* === CONTACT US === */
/* Hero Banner */
.contact-banner {
position: relative;
height: 500px;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.9) 0%, rgba(var(--primary-coral-rgb), 0.9) 100%),
url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920') center/cover;
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
overflow: hidden;
}
.contact-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.85) 0%, rgba(var(--primary-coral-rgb), 0.85) 100%);
z-index: 1;
}
.contact-banner::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to top, var(--light-gray), transparent);
z-index: 2;
}
.banner-content {
position: relative;
z-index: 3;
text-align: center;
color: white;
max-width: 900px;
padding: 0 2rem;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.banner-icon {
font-size: 5rem;
margin-bottom: 1.5rem;
animation: swing 2s ease-in-out infinite;
}
@keyframes swing {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(10deg); }
75% { transform: rotate(-10deg); }
}
.banner-title {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1rem;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.banner-subtitle {
font-size: 1.5rem;
opacity: 0.95;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
line-height: 1.6;
}
/* Main Content */
.contact-page {
padding: 5rem 0;
}
.contact-page .container {
max-width: 1400px;
padding: 0 2rem;
}
/* Contact Grid */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 5rem;
}
/* Contact Info */
.contact-info {
animation: slideInLeft 0.8s ease-out;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.info-header h2 {
font-size: 3rem;
font-weight: 800;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.info-header p {
font-size: 1.25rem;
color: var(--text-light);
line-height: 1.8;
margin-bottom: 3rem;
}
.info-cards {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.info-card {
background: white;
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
display: flex;
align-items: flex-start;
gap: 1.5rem;
transition: all 0.3s ease;
}
.info-card:hover {
transform: translateX(10px);
box-shadow: 0 15px 50px rgba(var(--primary-orange-rgb), 0.15);
}
.info-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.75rem;
flex-shrink: 0;
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.3);
}
.info-content h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.info-content p {
color: var(--text-light);
font-size: 1rem;
line-height: 1.6;
}
.info-content a {
color: var(--primary-orange);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.info-content a:hover {
color: var(--primary-coral);
}
/* Social Links */
.social-links {
display: flex;
gap: 1rem;
margin-top: 3rem;
}
.social-link {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.social-link:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.4);
}
/* Contact Form */
.contact-form-container {
background: white;
border-radius: 2rem;
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
animation: slideInRight 0.8s ease-out;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.form-header {
margin-bottom: 2rem;
}
.form-header h3 {
font-size: 2rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.form-header p {
color: var(--text-light);
font-size: 1rem;
}
.alert {
padding: 1rem 1.5rem;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 500;
animation: slideDown 0.5s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-success {
background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
color: #065F46;
border: 2px solid var(--success-green);
}
.alert-error {
background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
color: #991B1B;
border: 2px solid var(--error-red);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.form-group label .required {
color: var(--error-red);
}
.form-input,
.form-textarea {
width: 100%;
padding: 1rem;
border: 2px solid #E5E7EB;
border-radius: 0.75rem;
font-size: 1rem;
color: var(--text-dark);
font-family: inherit;
transition: all 0.3s ease;
background: var(--white);
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: var(--primary-orange);
box-shadow: 0 0 0 3px rgba(var(--primary-orange-rgb), 0.1);
}
.form-textarea {
resize: vertical;
min-height: 150px;
}
.submit-btn {
width: 100%;
padding: 1.25rem 2rem;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
border: none;
border-radius: 0.75rem;
font-size: 1.125rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(var(--primary-orange-rgb), 0.4);
}
.submit-btn:active {
transform: translateY(0);
}
/* Map Section */
.map-section {
background: white;
border-radius: 2rem;
padding: 0;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.map-section iframe {
width: 100%;
height: 500px;
border: none;
display: block;
}
/* Responsive */
@media (max-width: 1024px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 768px) {
.contact-banner {
height: 400px;
margin-top: 60px;
}
.banner-icon {
font-size: 3.5rem;
}
.banner-title {
font-size: 2.5rem;
}
.banner-subtitle {
font-size: 1.125rem;
}
.info-header h2 {
font-size: 2.5rem;
}
.contact-form-container {
padding: 2rem;
}
.form-header h3 {
font-size: 1.75rem;
}
.map-section iframe {
height: 400px;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.contact-banner {
height: 350px;
}
.banner-title {
font-size: 2rem;
}
.info-card {
flex-direction: column;
text-align: center;
}
.contact-form-container {
padding: 1.5rem;
}
.social-links {
justify-content: center;
}
}
/* === HOW IT WORKS === */
/* Hero Banner */
.how-it-works-banner {
position: relative;
height: 500px;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.9) 0%, rgba(var(--primary-coral-rgb), 0.9) 100%),
url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1920') center/cover;
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
overflow: hidden;
}
.how-it-works-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.85) 0%, rgba(var(--primary-coral-rgb), 0.85) 100%);
z-index: 1;
}
.how-it-works-banner::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to top, var(--light-gray), transparent);
z-index: 2;
}
.banner-content {
position: relative;
z-index: 3;
text-align: center;
color: white;
max-width: 900px;
padding: 0 2rem;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.banner-icon {
font-size: 5rem;
margin-bottom: 1.5rem;
animation: rotate 4s ease-in-out infinite;
}
@keyframes rotate {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(10deg); }
}
.banner-title {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1rem;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.banner-subtitle {
font-size: 1.5rem;
opacity: 0.95;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
line-height: 1.6;
}
/* Main Content */
.how-it-works-page {
padding: 4rem 0;
}
.how-it-works-page .container {
max-width: 1400px;
padding: 0 2rem;
}
/* Intro Section */
.intro-section {
text-align: center;
max-width: 800px;
margin: 0 auto 5rem;
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.intro-section h2 {
font-size: 2.5rem;
font-weight: 800;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.intro-section p {
font-size: 1.25rem;
color: var(--text-light);
line-height: 1.8;
}
/* Steps Section */
.steps-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.step-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 4rem;
background: white;
border-radius: 2rem;
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
opacity: 0;
transform: translateY(50px);
animation: slideInUp 0.6s ease-out forwards;
position: relative;
overflow: hidden;
}
.step-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
}
.step-card:nth-child(1) { animation-delay: 0.1s; }
.step-card:nth-child(2) { animation-delay: 0.2s; }
.step-card:nth-child(3) { animation-delay: 0.3s; }
.step-card:nth-child(4) { animation-delay: 0.4s; }
.step-card:nth-child(5) { animation-delay: 0.5s; }
@keyframes slideInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.step-card:nth-child(even) {
grid-template-columns: 1fr 1fr;
}
.step-card:nth-child(even) .step-content {
order: 2;
}
.step-card:nth-child(even) .step-visual {
order: 1;
}
.step-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
font-size: 2rem;
font-weight: 800;
border-radius: 1rem;
margin-bottom: 1.5rem;
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.3);
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.step-title {
font-size: 2rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 1rem;
line-height: 1.3;
}
.step-description {
font-size: 1.125rem;
color: var(--text-light);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.step-features {
list-style: none;
padding: 0;
}
.step-features li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
font-size: 1rem;
color: var(--text-dark);
}
.step-features li i {
color: var(--primary-orange);
font-size: 1.25rem;
margin-top: 0.25rem;
}
.step-visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.visual-icon {
width: 100%;
max-width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.1) 0%, rgba(var(--primary-coral-rgb), 0.1) 100%);
border-radius: 2rem;
position: relative;
overflow: hidden;
}
.visual-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(var(--primary-orange-rgb), 0.1), transparent);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}
.visual-icon i {
font-size: 10rem;
color: var(--primary-orange);
opacity: 0.8;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
border-radius: 2rem;
padding: 4rem 3rem;
text-align: center;
margin-top: 5rem;
box-shadow: 0 20px 60px rgba(var(--primary-orange-rgb), 0.3);
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.cta-section h2 {
font-size: 3rem;
font-weight: 800;
color: white;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.cta-section p {
font-size: 1.25rem;
color: white;
opacity: 0.95;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 3rem;
background: white;
color: var(--primary-orange);
font-size: 1.25rem;
font-weight: 700;
border: none;
border-radius: 3rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.cta-btn:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
/* Responsive */
@media (max-width: 1024px) {
.step-card {
grid-template-columns: 1fr;
gap: 2rem;
}
.step-card:nth-child(even) .step-content,
.step-card:nth-child(even) .step-visual {
order: initial;
}
.visual-icon {
max-width: 300px;
height: 300px;
}
.visual-icon i {
font-size: 7rem;
}
}
@media (max-width: 768px) {
.how-it-works-banner {
height: 400px;
margin-top: 60px;
}
.banner-icon {
font-size: 3.5rem;
}
.banner-title {
font-size: 2.5rem;
}
.banner-subtitle {
font-size: 1.125rem;
}
.intro-section h2 {
font-size: 2rem;
}
.intro-section p {
font-size: 1.125rem;
}
.step-card {
padding: 2rem;
}
.step-title {
font-size: 1.75rem;
}
.step-description {
font-size: 1rem;
}
.visual-icon {
max-width: 250px;
height: 250px;
}
.visual-icon i {
font-size: 5rem;
}
.cta-section {
padding: 3rem 2rem;
}
.cta-section h2 {
font-size: 2rem;
}
.cta-section p {
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.how-it-works-page .container {
padding: 0 1rem;
}
.how-it-works-banner {
height: 350px;
}
.banner-title {
font-size: 2rem;
}
.step-card {
padding: 1.5rem;
}
.step-number {
width: 60px;
height: 60px;
font-size: 1.75rem;
}
.cta-btn {
width: 100%;
justify-content: center;
}
}
/* === BOOK VACATION === */
/* Hero Banner - Travel Planning Theme */
.vacation-banner {
position: relative;
height: 550px;
background: url('https://images.unsplash.com/photo-1500835556837-99ac94a94552?w=1920') center/cover;
display: flex;
align-items: center;
justify-content: center;
margin-top: 0px;
overflow: hidden;
}
.vacation-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.85) 0%, rgba(var(--primary-coral-rgb), 0.85) 100%);
z-index: 1;
}
.vacation-banner::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to top, var(--light-gray), transparent);
z-index: 2;
}
.banner-content {
position: relative;
z-index: 3;
text-align: center;
color: white;
max-width: 900px;
padding: 0 2rem;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.banner-icon {
font-size: 5rem;
margin-bottom: 1.5rem;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.banner-title {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1rem;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
line-height: 1.2;
}
.banner-subtitle {
font-size: 1.5rem;
opacity: 0.95;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
line-height: 1.6;
}
/* Main Content */
.vacation-page {
padding: 4rem 0;
}
.vacation-page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Intro Section */
.vacation-intro {
text-align: center;
margin-bottom: 3.5rem;
}
.vacation-intro h2 {
font-size: 2.5rem;
font-weight: 800;
color: var(--dark-navy);
margin-bottom: 0.75rem;
}
.vacation-intro p {
font-size: 1.15rem;
color: var(--text-light);
max-width: 650px;
margin: 0 auto;
line-height: 1.7;
}
/* Trip Types Grid - 2 Columns */
.trip-types-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
/* Trip Type Card */
.trip-type-card {
background: white;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.trip-type-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(var(--primary-orange-rgb), 0.2);
}
/* Card Image */
.trip-type-image {
position: relative;
height: 280px;
overflow: hidden;
}
.trip-type-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.trip-type-card:hover .trip-type-image img {
transform: scale(1.08);
}
.trip-type-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(var(--dark-navy-rgb), 0.6) 100%);
pointer-events: none;
}
.trip-type-icon-badge {
position: absolute;
top: 1.25rem;
left: 1.25rem;
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
box-shadow: 0 6px 20px rgba(var(--primary-orange-rgb), 0.4);
z-index: 2;
}
.trip-type-count {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
color: var(--primary-orange);
padding: 0.4rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 700;
z-index: 2;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Card Body */
.trip-type-body {
padding: 2rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.trip-type-name {
font-size: 1.6rem;
font-weight: 800;
color: var(--dark-navy);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.trip-type-desc {
color: var(--text-light);
font-size: 1rem;
line-height: 1.7;
margin-bottom: 0.75rem;
flex: 1;
}
.trip-type-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1rem 2rem;
margin-top: 1rem;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
color: white;
border: none;
border-radius: 0.75rem;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
align-self: center;
}
.trip-type-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.4);
color: white;
}
.trip-type-btn i {
transition: transform 0.3s ease;
}
.trip-type-btn:hover i {
transform: translateX(4px);
}
/* Empty State */
.vacation-page .empty-state {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 1.5rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
grid-column: 1 / -1;
}
.vacation-page .empty-icon {
font-size: 4rem;
color: var(--text-light);
margin-bottom: 1rem;
}
.vacation-page .empty-state h3 {
font-size: 1.75rem;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.vacation-page .empty-state p {
color: var(--text-light);
font-size: 1.125rem;
}
/* Responsive */
@media (max-width: 968px) {
.trip-types-grid {
grid-template-columns: 1fr;
max-width: 600px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.vacation-banner {
height: 450px;
margin-top: 60px;
}
.banner-icon {
font-size: 3.5rem;
}
.banner-title {
font-size: 2.5rem;
}
.banner-subtitle {
font-size: 1.125rem;
}
.vacation-intro h2 {
font-size: 2rem;
}
.trip-type-image {
height: 240px;
}
.trip-type-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.vacation-page .container {
padding: 0 1rem;
}
.vacation-banner {
height: 350px;
}
.banner-title {
font-size: 2rem;
}
.banner-subtitle {
font-size: 1rem;
}
.vacation-intro h2 {
font-size: 1.6rem;
}
.trip-type-image {
height: 200px;
}
.trip-type-name {
font-size: 1.35rem;
}
}
/* === BOOKING FORM === */
/* ===============================================
ENHANCED BOOKING FORM STYLES - COMPLETE
=============================================== */
body.page-template-template-booking-form {
background: #F8FAFB;
min-height: 100vh;
}
.booking-page {
width: 100%;
max-width: 100%;
background: #F8FAFB;
}
/* ===============================================
HERO BANNER SECTION
=============================================== */
.booking-hero-banner {
margin-top: 70px;
position: relative;
min-height: 400px;
background: linear-gradient(135deg, rgba(var(--dark-navy-rgb), 0.95) 0%, rgba(var(--primary-orange-rgb), 0.85) 100%),
url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?q=80&w=2000') center/cover no-repeat;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.booking-hero-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 50%, rgba(var(--primary-orange-rgb), 0.3) 0%, transparent 70%);
animation: pulse 8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.booking-hero-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
padding: 2rem;
max-width: 800px;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.booking-hero-breadcrumb {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 1rem;
opacity: 0.9;
}
.booking-hero-breadcrumb a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}
.booking-hero-breadcrumb a:hover {
color: #FFE8A1;
}
.booking-hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
line-height: 1.2;
}
.booking-hero-subtitle {
font-size: 1.25rem;
opacity: 0.95;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.booking-hero-icon {
font-size: 4rem;
margin-bottom: 1rem;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
/* ===============================================
MAIN CONTAINER
=============================================== */
.booking-container {
max-width: 1200px;
margin: -80px auto 0;
padding: 0 2rem 4rem;
position: relative;
z-index: 3;
}
.booking-card {
background: white;
border-radius: 2rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
}
/* ===============================================
STEP INDICATOR
=============================================== */
.step-indicator {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
padding: 0 1rem;
position: relative;
gap:5px;
}
.step-indicator::before {
content: '';
position: absolute;
top: 25px;
left: 0;
right: 0;
height: 3px;
background: var(--letgo-gray-200);
z-index: 0;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
flex: 1;
}
.step-circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
border: 3px solid var(--letgo-gray-200);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
color: var(--letgo-gray-600);
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.step-label {
font-size: 0.875rem;
color: var(--letgo-gray-600);
font-weight: 600;
text-align: center;
}
.step.active .step-circle {
background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-primary-dark) 100%);
border-color: var(--letgo-primary);
color: white;
transform: scale(1.15);
box-shadow: 0 6px 20px rgba(var(--primary-orange-rgb), 0.4);
}
.step.active .step-label {
color: var(--letgo-primary);
font-weight: 700;
}
.step.completed .step-circle {
background: var(--letgo-primary);
border-color: var(--letgo-primary);
color: white;
}
.step.completed .step-circle::after {
content: '✓';
font-size: 1.5rem;
}
/* ===============================================
FORM STYLES
=============================================== */
.form-step {
display: none;
}
.form-step.active {
display: block;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-section-title {
color: var(--letgo-secondary);
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.form-section-description {
color: var(--letgo-gray-600);
font-size: 1rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-weight: 600;
color: var(--letgo-gray-700);
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.required {
color: var(--letgo-error);
margin-left: 2px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid var(--letgo-gray-200);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
transition: all 0.3s ease;
background: white;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--letgo-primary);
box-shadow: 0 0 0 3px rgba(var(--primary-orange-rgb), 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-check {
display: flex;
align-items: center;
margin: 0.75rem 0;
cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
width: 18px;
height: 18px;
margin-right: 0.75rem;
cursor: pointer;
accent-color: var(--letgo-primary);
}
.form-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.form-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.form-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
/* ===============================================
EMERGENCY CONTACT BOX
=============================================== */
.emergency-contact-box {
background: linear-gradient(135deg, #FFF3CD 0%, #FFE8A1 100%);
padding: 2rem;
border-radius: 1rem;
margin: 2rem 0;
border-left: 5px solid #FFC107;
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
}
.emergency-contact-box h4 {
color: #856404;
margin-bottom: 0.75rem;
font-size: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.emergency-contact-box p {
color: #856404;
margin: 0;
}
/* ===============================================
CO-TRAVELLER STYLES
=============================================== */
.co-traveller {
background: linear-gradient(135deg, var(--letgo-primary-light) 0%, rgba(var(--primary-orange-rgb), 0.05) 100%);
padding: 2rem;
border-radius: 1rem;
margin-bottom: 1.5rem;
border-left: 5px solid var(--letgo-primary);
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.1);
}
.co-traveller-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.co-traveller-header h4 {
color: var(--letgo-secondary);
font-size: 1.25rem;
margin: 0;
}
.btn-delete {
background: var(--letgo-error);
color: white;
border: none;
padding: 0.625rem 1.25rem;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-delete:hover {
background: #DC2626;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
/* ===============================================
BUTTON STYLES
=============================================== */
.btn {
padding: 1rem 2rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
border: none;
font-family: inherit;
}
.btn-primary {
background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-primary-dark) 100%);
color: white;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.4);
}
.btn-outline {
background: white;
color: var(--letgo-primary);
border: 2px solid var(--letgo-primary);
}
.btn-outline:hover {
background: var(--letgo-primary-light);
border-color: var(--letgo-primary);
}
.btn-lg {
padding: 1.125rem 3rem;
font-size: 1.125rem;
}
.form-navigation {
display: flex;
justify-content: space-between;
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid var(--letgo-gray-200);
}
/* ===============================================
BUDGET SLIDER STYLES
=============================================== */
.budget-slider-container {
margin: 2rem 0;
padding: 2.5rem;
background: linear-gradient(135deg, var(--letgo-primary-light) 0%, rgba(var(--primary-orange-rgb), 0.05) 100%);
border-radius: 1.5rem;
border: 3px solid var(--letgo-primary);
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.15);
}
.slider-wrapper {
margin: 2rem 0;
}
.budget-slider {
width: 100%;
height: 10px;
border-radius: 5px;
outline: none;
-webkit-appearance: none;
background: linear-gradient(to right, #E5E7EB 0%, #E5E7EB 100%);
}
.budget-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-primary-dark) 100%);
cursor: pointer;
box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.5);
transition: all 0.3s ease;
}
.budget-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 6px 18px rgba(var(--primary-orange-rgb), 0.7);
}
.budget-slider::-moz-range-thumb {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-primary-dark) 100%);
cursor: pointer;
box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.5);
border: none;
transition: all 0.3s ease;
}
.budget-slider::-moz-range-thumb:hover {
transform: scale(1.2);
box-shadow: 0 6px 18px rgba(var(--primary-orange-rgb), 0.7);
}
.slider-labels {
display: flex;
justify-content: space-between;
margin-top: 0.75rem;
font-size: 0.875rem;
color: var(--letgo-gray-600);
font-weight: 600;
}
.selected-budget-display {
text-align: center;
margin: 1.5rem 0;
}
.selected-budget-display .amount {
font-size: 3rem;
font-weight: 800;
color: var(--letgo-primary);
display: block;
margin: 0.5rem 0;
text-shadow: 0 2px 10px rgba(var(--primary-orange-rgb), 0.2);
}
.selected-budget-display .label {
font-size: 1.125rem;
color: var(--letgo-gray-700);
font-weight: 600;
}
.budget-breakdown {
background: white;
padding: 2rem;
border-radius: 1rem;
margin-top: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.budget-breakdown h4 {
margin: 0 0 1.5rem 0;
color: var(--letgo-secondary);
font-size: 1.125rem;
}
.budget-breakdown-item {
display: flex;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 2px solid #F3F4F6;
}
.budget-breakdown-item:last-child {
border-bottom: none;
}
.budget-note {
background: white;
padding: 1.5rem;
border-radius: 0.75rem;
margin-top: 1.5rem;
border-left: 4px solid var(--letgo-primary);
font-size: 0.95rem;
color: var(--letgo-gray-700);
line-height: 1.7;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* ===============================================
DYNAMIC FIELDS
=============================================== */
.dynamic-fields-container {
margin: 3rem 0;
padding: 2.5rem;
background: linear-gradient(135deg, #F8FAFB 0%, #EFF6FF 100%);
border-radius: 1.5rem;
border-left: 5px solid var(--letgo-primary);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.form-help {
font-size: 0.875rem;
color: var(--letgo-gray-600);
margin-top: 0.25rem;
}
/* Error Messages */
.error-message {
display: block;
color: var(--letgo-error);
font-size: 0.875rem;
margin-top: 0.5rem;
font-weight: 500;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
border-color: var(--letgo-error);
}
.form-group.has-error input:focus,
.form-group.has-error select:focus,
.form-group.has-error textarea:focus {
border-color: var(--letgo-error);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
/* ===============================================
TRIP TYPE SELECTION
=============================================== */
.trip-type-option {
cursor: pointer;
display: block;
}
.trip-type-card {
background: white;
padding: 2rem;
border-radius: 1.25rem;
border: 3px solid #E5E7EB;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.trip-type-option:hover .trip-type-card {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(var(--primary-orange-rgb), 0.2);
border-color: var(--letgo-primary);
}
.trip-type-option.selected .trip-type-card {
background: linear-gradient(135deg, var(--letgo-primary-light) 0%, rgba(var(--primary-orange-rgb), 0.1) 100%);
border-color: var(--letgo-primary);
border-width: 3px;
box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.25);
}
.trip-type-icon {
font-size: 3.5rem;
margin-bottom: 1rem;
filter: grayscale(100%);
transition: all 0.3s ease;
}
.trip-type-option.selected .trip-type-icon,
.trip-type-option:hover .trip-type-icon {
filter: grayscale(0%);
transform: scale(1.1);
}
.trip-type-label {
font-size: 1.125rem;
font-weight: 700;
color: var(--letgo-secondary);
margin-bottom: 0.5rem;
}
.trip-type-desc {
font-size: 0.95rem;
color: var(--letgo-gray-600);
margin: 0;
}
.trip-type-check {
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
background: var(--letgo-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.25rem;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.4);
}
.trip-type-option.selected .trip-type-check {
opacity: 1;
transform: scale(1);
}
/* ===============================================
RESPONSIVE DESIGN
=============================================== */
@media (max-width: 768px) {
.booking-hero-title {
font-size: 2.5rem;
}
.booking-hero-subtitle {
font-size: 1rem;
}
.booking-container {
margin-top: -60px;
padding: 0 1rem 3rem;
}
.booking-card {
padding: 2rem 1.5rem;
border-radius: 1.5rem;
}
.form-grid-2,
.form-grid-3,
.form-grid-4 {
grid-template-columns: 1fr;
}
.step-indicator {
padding: 0 0.5rem;
}
.step-label {
font-size: 0.7rem;
}
.step-circle {
width: 40px;
height: 40px;
font-size: 1rem;
}
.selected-budget-display .amount {
font-size: 2.5rem;
}
.form-section-title {
font-size: 1.5rem;
}
/* Single line trip types on mobile - allow horizontal scroll */
.trip-type-option {
min-width: 180px !important;
}
.trip-type-card {
padding: 1.5rem 1rem;
}
.trip-type-icon {
font-size: 2.5rem;
}
.trip-type-label {
font-size: 0.95rem;
}
.trip-type-desc {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.booking-hero-title {
font-size: 2rem;
}
.booking-hero-icon {
font-size: 3rem;
}
.step-circle {
width: 35px;
height: 35px;
font-size: 0.875rem;
}
.step-label {
font-size: 0.65rem;
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.budget-slider-container {
padding: 1.5rem;
}
.selected-budget-display .amount {
font-size: 2rem;
}
}
@media print {
body {
background: white;
}
.booking-hero-banner,
.form-navigation,
.step-indicator {
display: none !important;
}
}
/* === BOOKING STEPPER === */
/* ============================================
BOOKING WIZARD - ORANGE THEME (MATCHES APP)
============================================ */
/* Hero Banner */
.booking-hero-banner {
position: relative;
width: 100%;
min-height: 320px;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.95) 0%, rgba(var(--primary-coral-rgb), 0.9) 50%, rgba(var(--dark-navy-rgb), 0.85) 100%),
url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1920&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
margin-top: 75px;
}
.booking-hero-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(var(--primary-orange-rgb), 0.3) 0%, transparent 70%);
animation: heroPulse 8s ease-in-out infinite;
}
@keyframes heroPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.banner-content {
position: relative;
z-index: 2;
text-align: center;
padding: 40px 20px;
max-width: 800px;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.banner-content h1 {
font-size: clamp(32px, 6vw, 52px);
font-weight: 800;
margin-bottom: 16px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
line-height: 1.2;
letter-spacing: -1px;
color: white;
}
.banner-content .subtitle {
font-size: clamp(16px, 3vw, 22px);
font-weight: 500;
opacity: 0.95;
margin-bottom: 24px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.banner-features {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}
.banner-feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.banner-feature svg {
width: 20px;
height: 20px;
}
/* Wizard Wrapper */
.booking-wizard-wrapper {
background: var(--letgo-light-bg);
display: flex;
justify-content: center;
padding: 0 20px 40px;
position: relative;
z-index: 10;
margin-top: -40px;
}
.booking-wizard-wrapper * {
box-sizing: border-box;
}
.wizard-container {
width: 100%;
max-width: 900px;
background-color: white;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
overflow: hidden;
position: relative;
}
.wizard-header {
padding: 24px 24px 16px;
text-align: center;
background: linear-gradient(135deg, var(--letgo-primary), var(--letgo-accent));
color: white;
}
.wizard-header h1 {
font-size: 28px;
font-weight: 800;
margin-bottom: 8px;
letter-spacing: -0.5px;
color: white;
}
.wizard-header p {
font-size: 16px;
opacity: 0.9;
font-weight: 500;
color: white;
}
/* Progress Bar */
.progress-container {
padding: 20px 24px 0;
background-color: white;
}
.progress-bar {
height: 8px;
background-color: #e5e7eb;
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.progress-fill {
height: 100%;
background: linear-gradient(to right, var(--letgo-success), var(--letgo-primary));
border-radius: 4px;
width: 12.5%;
transition: width 0.5s ease;
}
.progress-text {
font-size: 14px;
color: #6b7280;
font-weight: 600;
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
/* Screens */
.wizard-screen {
display: none;
padding: 24px;
animation: fadeIn 0.5s ease;
}
.wizard-screen.active {
display: block;
}
.screen-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin-bottom: 8px;
line-height: 1.3;
}
.screen-subtitle {
font-size: 16px;
color: #6b7280;
margin-bottom: 24px;
line-height: 1.5;
}
/* Input Styles */
.input-group {
margin-bottom: 24px;
}
.input-label {
display: block;
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 8px;
}
.input-label .required {
color: var(--letgo-error);
margin-left: 4px;
}
.input-field {
width: 100%;
padding: 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
color: #1f2937;
background-color: white;
transition: border-color 0.3s ease;
font-family: inherit;
}
.input-field:focus {
outline: none;
border-color: var(--letgo-primary);
}
.input-field::placeholder {
color: #9ca3af;
}
.input-field.error {
border-color: var(--letgo-error);
}
.error-message {
color: var(--letgo-error);
font-size: 14px;
margin-top: 4px;
display: none;
}
.error-message.show {
display: block;
}
/* Travel Type Cards */
.travel-type-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.travel-type-card {
background-color: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 24px 12px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.travel-type-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.travel-type-card.selected {
border-color: var(--letgo-primary);
background-color: var(--letgo-primary-light);
box-shadow: 0 8px 16px rgba(var(--primary-orange-rgb), 0.15);
}
.travel-type-icon {
font-size: 36px;
margin-bottom: 12px;
}
.travel-type-text {
font-size: 16px;
font-weight: 600;
color: #1f2937;
}
/* Mood Cards */
.mood-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.mood-card {
background-color: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 20px 12px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 130px;
}
.mood-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.mood-card.selected {
border-color: var(--letgo-primary);
background-color: var(--letgo-primary-light);
box-shadow: 0 8px 16px rgba(var(--primary-orange-rgb), 0.15);
}
.mood-icon {
font-size: 32px;
margin-bottom: 12px;
}
.mood-text {
font-size: 14px;
font-weight: 600;
color: #1f2937;
}
/* Timing Options */
.timing-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.timing-option {
background-color: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 16px;
padding: 20px 12px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 130px;
}
.timing-option:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.timing-option.selected {
border-color: var(--letgo-primary);
background-color: var(--letgo-primary-light);
box-shadow: 0 8px 16px rgba(var(--primary-orange-rgb), 0.15);
}
.timing-icon {
font-size: 32px;
margin-bottom: 12px;
}
.timing-text {
font-size: 14px;
font-weight: 600;
color: #1f2937;
}
/* Traveller Counter */
.counter-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
}
.counter-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #e5e7eb;
background-color: white;
font-size: 24px;
font-weight: 700;
color: var(--letgo-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.counter-btn:hover {
border-color: var(--letgo-primary);
background-color: var(--letgo-primary-light);
}
.counter-display {
font-size: 48px;
font-weight: 800;
color: var(--letgo-primary);
margin: 0 24px;
min-width: 60px;
text-align: center;
}
.counter-label {
text-align: center;
font-size: 14px;
color: #6b7280;
margin-top: -16px;
margin-bottom: 32px;
}
/* Budget Display */
.budget-display {
background-color: var(--letgo-primary-light);
border-radius: 16px;
padding: 20px;
margin-bottom: 24px;
text-align: center;
border: 2px solid #FFE8E0;
}
.budget-per-person {
font-size: 14px;
color: #6b7280;
margin-bottom: 4px;
}
.budget-amount {
font-size: 32px;
font-weight: 800;
color: var(--letgo-primary);
margin-bottom: 4px;
}
.budget-total {
font-size: 14px;
color: #6b7280;
}
.budget-note {
font-size: 12px;
color: #9ca3af;
margin-top: 8px;
font-style: italic;
}
/* Slider */
.slider-container {
margin-bottom: 32px;
}
.slider-item {
margin-bottom: 32px;
}
.slider-label {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
.slider-label-text {
font-weight: 600;
color: #1f2937;
font-size: 16px;
}
.slider-label-value {
font-weight: 700;
color: var(--letgo-primary);
font-size: 16px;
}
.slider {
width: 100%;
height: 10px;
-webkit-appearance: none;
appearance: none;
background: #e5e7eb;
border-radius: 5px;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--letgo-primary);
cursor: pointer;
border: 3px solid white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.slider::-moz-range-thumb {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--letgo-primary);
cursor: pointer;
border: 3px solid white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.slider-scale {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 14px;
color: #6b7280;
}
/* Checkbox Preferences (kept for any inline usage) */
.checkbox-group {
margin-bottom: 32px;
}
.checkbox-item {
display: flex;
align-items: center;
padding: 16px;
background-color: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.checkbox-item:hover {
background-color: #f3f4f6;
border-color: #d1d5db;
}
.checkbox-item.checked {
background-color: var(--letgo-primary-light);
border-color: var(--letgo-primary);
}
.checkbox-input {
width: 24px;
height: 24px;
margin-right: 12px;
cursor: pointer;
accent-color: var(--letgo-primary);
}
.checkbox-label-text {
font-size: 16px;
font-weight: 600;
color: #1f2937;
cursor: pointer;
flex: 1;
}
/* Optional Note */
.optional-note {
margin-bottom: 32px;
}
.optional-label {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 12px;
}
.optional-textarea {
width: 100%;
padding: 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 16px;
font-family: inherit;
resize: vertical;
min-height: 100px;
}
.optional-textarea:focus {
outline: none;
border-color: var(--letgo-primary);
}
/* Contact Card */
.contact-card {
background-color: var(--letgo-primary-light);
border: 2px solid #FFE8E0;
border-radius: 16px;
padding: 20px;
margin-bottom: 24px;
}
.contact-title {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 700;
color: #c2410c;
margin-bottom: 16px;
}
.contact-title i {
margin-right: 12px;
color: var(--letgo-primary);
}
/* Offline Card */
.offline-card {
background-color: #fffbeb;
border: 2px solid #fbbf24;
border-radius: 16px;
padding: 20px;
margin-bottom: 24px;
}
.offline-title {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 700;
color: #92400e;
margin-bottom: 12px;
}
.offline-title i {
margin-right: 12px;
color: var(--letgo-warning);
}
.offline-text {
font-size: 14px;
color: #92400e;
line-height: 1.5;
margin-bottom: 16px;
}
.offline-list {
list-style-type: none;
margin-left: 8px;
padding: 0;
}
.offline-list li {
font-size: 14px;
color: #92400e;
margin-bottom: 8px;
display: flex;
align-items: flex-start;
}
.offline-list li i {
color: var(--letgo-warning);
margin-right: 10px;
margin-top: 2px;
}
/* Summary Card */
.summary-card {
background-color: var(--letgo-primary-light);
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid #FFE8E0;
}
.summary-title {
font-size: 20px;
font-weight: 700;
color: var(--letgo-primary);
margin-bottom: 16px;
display: flex;
align-items: center;
}
.summary-title i {
margin-right: 12px;
}
.summary-item {
display: flex;
align-items: center;
margin-bottom: 16px;
font-size: 16px;
}
.summary-icon {
font-size: 20px;
margin-right: 12px;
width: 24px;
text-align: center;
}
/* Reassurance */
.reassurance {
background-color: #f9fafb;
border-radius: 12px;
padding: 20px;
margin-bottom: 32px;
}
.reassurance-item {
display: flex;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
color: #6b7280;
}
.reassurance-item:last-child {
margin-bottom: 0;
}
.reassurance-item i {
color: var(--letgo-success);
margin-right: 12px;
}
/* Buttons */
.button-container {
display: flex;
gap: 16px;
margin-top: 20px;
}
.btn {
flex: 1;
padding: 18px 24px;
border: none;
border-radius: 16px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: inherit;
}
.btn-primary {
background: linear-gradient(135deg, var(--letgo-primary), var(--letgo-accent));
color: white;
}
.btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(var(--primary-orange-rgb), 0.3);
}
.btn-secondary {
background-color: #f9fafb;
color: #6b7280;
border: 2px solid #e5e7eb;
}
.btn-secondary:hover {
background-color: #f3f4f6;
transform: translateY(-4px);
}
.btn-icon {
margin-left: 8px;
}
.btn-icon-left {
margin-right: 8px;
}
/* Dynamic Fields Section */
.dynamic-fields-section {
margin-bottom: 24px;
}
.dynamic-fields-section .dynamic-field {
margin-bottom: 28px;
}
.dynamic-fields-section .form-section-title {
display: block;
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 12px;
}
.dynamic-fields-section .form-group {
margin-bottom: 0;
}
.dynamic-fields-section label:not(.form-section-title):not(.form-check) {
font-size: 14px;
color: #6b7280;
margin-bottom: 12px;
display: block;
}
/* Dynamic field inputs - match wizard theme */
.dynamic-fields-section input[type="text"],
.dynamic-fields-section input[type="email"],
.dynamic-fields-section input[type="tel"],
.dynamic-fields-section input[type="number"],
.dynamic-fields-section input[type="date"],
.dynamic-fields-section textarea,
.dynamic-fields-section select {
width: 100%;
padding: 14px 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 16px;
font-family: inherit;
transition: border-color 0.3s ease;
background: white;
color: #1f2937;
}
.dynamic-fields-section input:focus,
.dynamic-fields-section textarea:focus,
.dynamic-fields-section select:focus {
outline: none;
border-color: var(--letgo-primary);
}
/* Column layout for checkbox & radio groups */
.dynamic-fields-section .form-check {
display: flex;
align-items: center;
padding: 14px 16px;
background-color: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
font-weight: 500;
color: #1f2937;
gap: 10px;
}
.dynamic-fields-section .form-check:hover {
background-color: #f3f4f6;
border-color: #d1d5db;
}
.dynamic-fields-section .form-check input[type="checkbox"],
.dynamic-fields-section .form-check input[type="radio"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--letgo-primary);
flex-shrink: 0;
}
/* Two-column grid for checkbox/radio options */
.dynamic-fields-section .form-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* Help text and label should span full width */
.dynamic-fields-section .form-group > label:not(.form-check) {
grid-column: 1 / -1;
}
/* Text inputs, textareas, selects should span full width */
.dynamic-fields-section .form-group > input,
.dynamic-fields-section .form-group > textarea,
.dynamic-fields-section .form-group > select {
grid-column: 1 / -1;
}
@media (max-width: 640px) {
.dynamic-fields-section .form-group {
grid-template-columns: 1fr;
}
}
/* Loading Overlay */
.loading-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
align-items: center;
justify-content: center;
}
.loading-overlay.active {
display: flex;
}
.loading-spinner {
width: 60px;
height: 60px;
border: 4px solid #f3f4f6;
border-top-color: var(--letgo-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hide newsletter popups */
.newsletter-popup,
.popup-overlay,
[class*="newsletter"],
[id*="popup"],
.sidebar,
.widget-area {
display: none !important;
}
/* Responsive */
@media (max-width: 1024px) {
.wizard-container {
max-width: 90%;
}
.booking-hero-banner {
min-height: 280px;
}
}
@media (max-width: 640px) {
.booking-hero-banner {
min-height: 240px;
background-attachment: scroll;
}
.banner-content {
padding: 30px 16px;
}
.banner-features {
flex-direction: column;
gap: 10px;
}
.booking-wizard-wrapper {
padding: 0 12px 30px;
margin-top: -30px;
}
.wizard-container {
max-width: 100%;
border-radius: 16px;
}
.mood-grid,
.travel-type-grid,
.timing-grid {
grid-template-columns: 1fr;
}
.button-container {
flex-direction: column;
}
.wizard-header h1 {
font-size: 24px;
}
.screen-title {
font-size: 22px;
}
.wizard-screen {
padding: 16px;
}
}
/* === BOOKING DETAILS === */
.booking-details-page {
background: var(--letgo-light-bg, var(--letgo-light-bg));
min-height: 100vh;
position: relative;
}
/* Booking Details Banner */
.bd-banner {
position: relative;
height: 300px;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.9) 0%, rgba(var(--primary-coral-rgb), 0.9) 100%),
url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1200') center/cover;
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
overflow: hidden;
}
.bd-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.85) 0%, rgba(var(--primary-coral-rgb), 0.85) 100%);
z-index: 1;
}
.bd-banner-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
animation: slideUp 0.8s ease-out;
}
.bd-banner-icon {
font-size: 4rem;
margin-bottom: 1rem;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.bd-banner-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.bd-banner-subtitle {
font-size: 1.25rem;
opacity: 0.95;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.bd-banner-badge {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1.25rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 2rem;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.5px;
}
.booking-details-page .bd-page-body {
padding: 3rem 1rem;
}
.booking-details-page .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.back-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: white;
color: var(--primary);
text-decoration: none;
border-radius: 0.75rem;
font-weight: 600;
margin-bottom: 2rem;
transition: all 0.3s ease;
border: 2px solid var(--primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.back-button:hover {
background: var(--primary);
color: white;
transform: translateX(-5px);
box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.3);
}
.details-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 2rem;
box-shadow: var(--card-shadow);
padding: 3rem;
border: 1px solid rgba(255, 255, 255, 0.3);
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.details-header {
display: flex;
justify-content: space-between;
align-items: start;
padding-bottom: 2rem;
border-bottom: 2px solid rgba(var(--primary-orange-rgb), 0.2);
margin-bottom: 2rem;
}
.header-left h1 {
font-size: 2.5rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
margin-bottom: 0.5rem;
}
.booking-id-badge {
display: inline-block;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, var(--letgo-primary-light) 0%, #FFE8DE 100%);
border-radius: 0.5rem;
font-weight: 600;
color: var(--primary);
font-size: 0.875rem;
}
.status-badges {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.status-badge {
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.status-confirmed {
background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-accent) 100%);
color: white;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.status-pending {
background: linear-gradient(135deg, var(--letgo-warning) 0%, #d97706 100%);
color: white;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.status-paid, .status-completed {
background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-accent) 100%);
color: white;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.section {
margin-bottom: 2.5rem;
padding: 2rem;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.04) 0%, rgba(var(--primary-coral-rgb), 0.04) 100%);
border-radius: 1rem;
border: 1px solid rgba(var(--primary-orange-rgb), 0.1);
}
.section-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--letgo-gray-900, var(--letgo-secondary));
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-title i {
color: var(--primary);
font-size: 1.75rem;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.info-item {
background: white;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.info-item:hover {
box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.15);
transform: translateY(-2px);
}
.info-label {
font-size: 0.875rem;
color: var(--letgo-gray-600, var(--letgo-text-light));
margin-bottom: 0.5rem;
font-weight: 500;
}
.info-value {
font-weight: 700;
font-size: 1.125rem;
color: var(--letgo-gray-900, var(--letgo-secondary));
word-break: break-word;
}
.preference-row {
display: flex;
padding: 1rem;
background: white;
border-radius: 0.5rem;
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.preference-row:hover {
background: #f8fafc;
transform: translateX(5px);
}
.preference-label {
font-weight: 600;
color: var(--letgo-gray-700, var(--letgo-text-dark));
min-width: 250px;
}
.preference-value {
color: var(--letgo-gray-900, var(--letgo-secondary));
flex: 1;
}
.traveller-card {
background: white;
padding: 1.5rem;
border-radius: 0.75rem;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.traveller-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--letgo-gray-900, var(--letgo-secondary));
margin-bottom: 0.5rem;
}
.traveller-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.price-summary {
background: var(--primary-gradient);
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
box-shadow: 0 10px 30px rgba(var(--primary-orange-rgb), 0.3);
position: relative;
overflow: hidden;
}
.price-summary::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.price-label {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 0.5rem;
}
.price-amount {
font-size: 3.5rem;
color: white;
font-weight: 800;
margin: 0;
position: relative;
z-index: 1;
}
.btn {
flex: 1;
min-width: 200px;
padding: 1rem 2rem;
border: none;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
}
.btn-primary {
background: var(--primary-gradient);
color: white;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--primary-orange-rgb), 0.4);
}
.btn-secondary {
background: white;
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-secondary:hover {
background: var(--primary);
color: white;
}
/* Traveller table */
.travellers-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
background: white;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.travellers-table thead tr {
background: var(--primary-gradient);
color: white;
}
.travellers-table th {
padding: 0.85rem 1rem;
text-align: left;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.travellers-table td {
padding: 0.85rem 1rem;
color: #334155;
border-bottom: 1px solid #f1f5f9;
}
.travellers-table tbody tr:last-child td { border-bottom: none; }
.travellers-table tbody tr:nth-child(even) { background: #f8fafc; }
.travellers-table tbody tr:hover { background: rgba(var(--primary-orange-rgb), 0.05); }
.travellers-table .row-num { color: #94a3b8; font-weight: 700; text-align: center; width: 40px; }
.travellers-table .traveller-name-cell { font-weight: 600; color: var(--letgo-gray-900, var(--letgo-secondary)); }
/* Document list */
.document-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
background: white;
border-radius: 0.75rem;
margin-bottom: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.document-item:hover {
box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.15);
transform: translateY(-2px);
}
.document-info { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.document-icon {
width: 44px; height: 44px; border-radius: 0.6rem;
display: flex; align-items: center; justify-content: center;
font-size: 1.25rem; flex-shrink: 0;
background: linear-gradient(135deg, var(--letgo-primary-light) 0%, #FFE8DE 100%);
}
.document-meta { min-width: 0; }
.document-meta .doc-name { font-weight: 600; color: var(--letgo-gray-900, var(--letgo-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.document-meta .doc-details { font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }
.document-meta .doc-type-badge {
display: inline-block; padding: 2px 8px;
background: var(--letgo-primary-light); color: var(--primary);
border-radius: 4px; font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px;
}
.doc-download-btn {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.5rem 1rem; background: var(--primary-gradient);
color: white; text-decoration: none; border-radius: 0.5rem;
font-size: 0.8rem; font-weight: 600; transition: all 0.3s ease; flex-shrink: 0;
}
.doc-download-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.3);
color: white;
}
.empty-state-msg { text-align: center; padding: 2rem; color: #94a3b8; font-style: italic; }
/* Payment loading overlay */
.payment-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9999; align-items: center; justify-content: center; }
.payment-overlay.active { display: flex; }
.payment-loader { background: white; padding: 3rem; border-radius: 1.5rem; text-align: center; max-width: 400px; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid var(--primary); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 0 auto 1.5rem; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@media (max-width: 768px) {
.bd-banner { height: 220px; }
.bd-banner-title { font-size: 2rem; }
.bd-banner-icon { font-size: 2.5rem; }
.details-card { padding: 1.5rem; }
.details-header { flex-direction: column; gap: 1rem; }
.header-left h1 { font-size: 1.75rem; }
.info-grid { grid-template-columns: 1fr; }
.preference-row { flex-direction: column; gap: 0.5rem; }
.preference-label { min-width: auto; }
.price-amount { font-size: 2.5rem; }
.travellers-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.document-item { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.doc-download-btn { width: 100%; justify-content: center; }
}
@media print {
body * { visibility: hidden; }
.details-card, .details-card * { visibility: visible; }
.details-card { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 1px solid #e5e7eb; padding: 2rem; margin: 0; border-radius: 0; }
.back-button, .payment-overlay, .bd-banner { display: none !important; visibility: hidden !important; }
.booking-details-page { background: white; padding: 0; }
.booking-details-page .container { max-width: 100%; padding: 0; }
.status-badge, .price-summary { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
.section, .traveller-card, .info-item { page-break-inside: avoid; break-inside: avoid; }
* { animation: none !important; transition: none !important; }
.header-left h1 { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: var(--primary) !important; background: none !important; -webkit-text-fill-color: initial !important; }
}
/* === BOOKING CONFIRMATION === */
.booking-confirmation-page {
background: var(--letgo-light-bg, var(--letgo-light-bg));
min-height: 100vh;
padding: 3rem 1rem;
padding-top: calc(80px + 3rem);
position: relative;
}
.conf-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.conf-back-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: white;
color: var(--primary);
text-decoration: none;
border-radius: 0.75rem;
font-weight: 600;
margin-bottom: 2rem;
transition: all 0.3s ease;
border: 2px solid var(--primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.conf-back-button:hover {
background: var(--primary);
color: white;
transform: translateX(-5px);
box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.3);
}
.conf-details-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 2rem;
box-shadow: var(--card-shadow);
padding: 3rem;
border: 1px solid rgba(255, 255, 255, 0.3);
animation: confSlideUp 0.6s ease-out;
}
@keyframes confSlideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.conf-details-header {
display: flex;
justify-content: space-between;
align-items: start;
padding-bottom: 2rem;
border-bottom: 2px solid rgba(var(--primary-orange-rgb), 0.2);
margin-bottom: 2rem;
}
.conf-header-left h1 {
font-size: 2.5rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
margin-bottom: 0.5rem;
}
.conf-booking-id-badge {
display: inline-block;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, var(--letgo-primary-light) 0%, #FFE8DE 100%);
border-radius: 0.5rem;
font-weight: 600;
color: var(--primary);
font-size: 0.875rem;
}
.conf-status-badges { display: flex; gap: 1rem; flex-wrap: wrap; }
.conf-status-badge {
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.conf-status-confirmed { background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-accent) 100%); color: white; box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3); }
.conf-status-pending { background: linear-gradient(135deg, var(--letgo-warning) 0%, #d97706 100%); color: white; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
.conf-status-paid, .conf-status-completed { background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-accent) 100%); color: white; box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3); }
.conf-section {
margin-bottom: 2.5rem;
padding: 2rem;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.04) 0%, rgba(var(--primary-coral-rgb), 0.04) 100%);
border-radius: 1rem;
border: 1px solid rgba(var(--primary-orange-rgb), 0.1);
}
.conf-section-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--letgo-gray-900, var(--letgo-secondary));
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.conf-section-title i { color: var(--primary); font-size: 1.75rem; }
.conf-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.conf-info-item {
background: white;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.conf-info-item:hover { box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.15); transform: translateY(-2px); }
.conf-info-label { font-size: 0.875rem; color: var(--letgo-gray-600, var(--letgo-text-light)); margin-bottom: 0.5rem; font-weight: 500; }
.conf-info-value { font-weight: 700; font-size: 1.125rem; color: var(--letgo-gray-900, var(--letgo-secondary)); word-break: break-word; }
.conf-preference-row { display: flex; padding: 1rem; background: white; border-radius: 0.5rem; margin-bottom: 0.75rem; transition: all 0.3s ease; }
.conf-preference-row:hover { background: #f8fafc; transform: translateX(5px); }
.conf-preference-label { font-weight: 600; color: var(--letgo-gray-700, var(--letgo-text-dark)); min-width: 250px; }
.conf-preference-value { color: var(--letgo-gray-900, var(--letgo-secondary)); flex: 1; }
.conf-traveller-card { background: white; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.conf-traveller-name { font-size: 1.25rem; font-weight: 700; color: var(--letgo-gray-900, var(--letgo-secondary)); margin-bottom: 0.5rem; }
.conf-traveller-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
/* Traveller table */
.conf-travellers-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: white; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.conf-travellers-table thead tr { background: var(--primary-gradient); color: white; }
.conf-travellers-table th { padding: 0.85rem 1rem; text-align: left; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.conf-travellers-table td { padding: 0.85rem 1rem; color: #334155; border-bottom: 1px solid #f1f5f9; }
.conf-travellers-table tbody tr:last-child td { border-bottom: none; }
.conf-travellers-table tbody tr:nth-child(even) { background: #f8fafc; }
.conf-travellers-table tbody tr:hover { background: rgba(var(--primary-orange-rgb), 0.05); }
.conf-travellers-table .row-num { color: #94a3b8; font-weight: 700; text-align: center; width: 40px; }
.conf-travellers-table .traveller-name-cell { font-weight: 600; color: var(--letgo-gray-900, var(--letgo-secondary)); }
/* Document list */
.conf-document-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: white; border-radius: 0.75rem; margin-bottom: 0.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; }
.conf-document-item:hover { box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.15); transform: translateY(-2px); }
.conf-document-info { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.conf-document-icon { width: 44px; height: 44px; border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; background: linear-gradient(135deg, var(--letgo-primary-light) 0%, #FFE8DE 100%); }
.conf-document-meta { min-width: 0; }
.conf-document-meta .doc-name { font-weight: 600; color: var(--letgo-gray-900, var(--letgo-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conf-document-meta .doc-details { font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }
.conf-doc-type-badge { display: inline-block; padding: 2px 8px; background: var(--letgo-primary-light); color: var(--primary); border-radius: 4px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.conf-doc-download-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; background: var(--primary-gradient); color: white; text-decoration: none; border-radius: 0.5rem; font-size: 0.8rem; font-weight: 600; transition: all 0.3s ease; flex-shrink: 0; }
.conf-doc-download-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--primary-orange-rgb), 0.3); color: white; }
.conf-empty-state { text-align: center; padding: 2rem; color: #94a3b8; font-style: italic; }
/* Price summary */
.conf-price-summary {
background: var(--primary-gradient);
padding: 2.5rem;
border-radius: 1.5rem;
text-align: center;
box-shadow: 0 10px 30px rgba(var(--primary-orange-rgb), 0.3);
position: relative;
overflow: hidden;
margin-bottom: 2.5rem;
}
.conf-price-summary::before {
content: '';
position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
animation: confShine 3s infinite;
}
@keyframes confShine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.conf-price-label { color: rgba(255, 255, 255, 0.9); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem; }
.conf-price-amount { font-size: 3.5rem; color: white; font-weight: 800; margin: 0; position: relative; z-index: 1; }
.conf-payment-status { color: rgba(255, 255, 255, 0.9); margin-top: 1rem; position: relative; z-index: 1; }
/* Payment section */
.conf-payment-section { margin-bottom: 2.5rem; padding: 2rem; background: #f0fdf4; border-radius: 1rem; border: 2px dashed var(--letgo-success); text-align: center; }
.conf-payment-button { display: block; width: 100%; max-width: 400px; margin: 0 auto; padding: 1.25rem 2rem; background: linear-gradient(135deg, var(--letgo-success) 0%, #059669 100%); color: white; border: none; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; }
.conf-payment-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3); }
/* Action buttons */
.conf-action-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(var(--primary-orange-rgb), 0.15); }
.conf-action-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; }
.conf-action-btn:hover { transform: translateY(-2px); }
.conf-action-btn-primary { background: var(--primary-gradient); color: white; box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3); }
.conf-action-btn-primary:hover { box-shadow: 0 8px 25px rgba(var(--primary-orange-rgb), 0.4); color: white; }
.conf-action-btn-outline { background: white; color: var(--primary); border-color: var(--primary); }
.conf-action-btn-outline:hover { background: var(--primary); color: white; box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3); }
.conf-action-btn-success { background: linear-gradient(135deg, var(--letgo-success) 0%, #059669 100%); color: white; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
.conf-action-btn-success:hover { box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4); color: white; }
@media (max-width: 768px) {
.conf-details-card { padding: 1.5rem; }
.conf-details-header { flex-direction: column; gap: 1rem; }
.conf-header-left h1 { font-size: 1.75rem; }
.conf-info-grid { grid-template-columns: 1fr; }
.conf-preference-row { flex-direction: column; gap: 0.5rem; }
.conf-preference-label { min-width: auto; }
.conf-price-amount { font-size: 2.5rem; }
.conf-travellers-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.conf-document-item { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.conf-doc-download-btn { width: 100%; justify-content: center; }
.conf-action-buttons { flex-direction: column; }
.conf-action-btn { width: 100%; justify-content: center; }
}
@media print {
body * { visibility: hidden; }
.conf-details-card, .conf-details-card * { visibility: visible; }
.conf-details-card { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 1px solid #e5e7eb; padding: 2rem; margin: 0; border-radius: 0; }
.conf-back-button, .conf-payment-section, .conf-action-buttons { display: none !important; visibility: hidden !important; }
.booking-confirmation-page { background: white; padding: 0; }
.conf-container { max-width: 100%; padding: 0; }
.conf-status-badge, .conf-price-summary { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
.conf-section, .conf-traveller-card, .conf-info-item { page-break-inside: avoid; break-inside: avoid; }
* { animation: none !important; transition: none !important; }
.conf-header-left h1 { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: var(--primary) !important; background: none !important; -webkit-text-fill-color: initial !important; }
}
/* === MY BOOKINGS === */
/* Banner Section */
.page-banner {
position: relative;
height: 300px;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.9) 0%, rgba(var(--primary-coral-rgb), 0.9) 100%),
url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1200') center/cover;
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
overflow: hidden;
}
.page-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.85) 0%, rgba(var(--primary-coral-rgb), 0.85) 100%);
z-index: 1;
}
.banner-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.banner-icon {
font-size: 4rem;
margin-bottom: 1rem;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.banner-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.banner-subtitle {
font-size: 1.25rem;
opacity: 0.95;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.my-bookings-page {
background: var(--light-gray);
min-height: 100vh;
padding: 3rem 0;
position: relative;
}
.my-bookings-page .container {
max-width: 1400px;
padding: 0 1rem;
position: relative;
z-index: 1;
}
.filters-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 1.5rem;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.3);
animation: slideUp 0.6s ease-out 0.1s both;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.filter-tabs {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.filter-tab {
padding: 0.75rem 2rem;
border: 2px solid transparent;
background: #f3f4f6;
border-radius: 0.75rem;
font-weight: 600;
color: #6b7280;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.filter-tab:hover {
background: #e5e7eb;
transform: translateY(-2px);
}
.filter-tab.active {
background: var(--primary-gradient);
color: white;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.filter-count {
background: rgba(0, 0, 0, 0.1);
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
font-size: 0.875rem;
}
.filter-tab.active .filter-count {
background: rgba(255, 255, 255, 0.2);
}
.bookings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
animation: slideUp 0.6s ease-out 0.2s both;
}
.booking-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 1.5rem;
overflow: hidden;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.booking-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.card-header {
padding: 1.5rem;
background: var(--primary-gradient);
color: white;
position: relative;
overflow: hidden;
}
.card-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}
.booking-id {
font-size: 0.875rem;
opacity: 0.9;
font-weight: 600;
margin-bottom: 0.5rem;
}
.product-name {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.trip-type {
font-size: 0.875rem;
opacity: 0.9;
text-transform: capitalize;
}
.card-body {
padding: 1.5rem;
}
.info-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid #f3f4f6;
}
.info-row:last-child {
border-bottom: none;
}
.info-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.1) 0%, rgba(var(--primary-coral-rgb), 0.1) 100%);
border-radius: 0.75rem;
color: var(--primary-orange);
flex-shrink: 0;
}
.info-content {
flex: 1;
}
.info-label {
font-size: 0.75rem;
color: #6b7280;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-value {
font-weight: 600;
color: var(--text-dark);
font-size: 0.95rem;
}
.card-footer {
padding: 1.5rem;
background: var(--light-gray);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.status-badge {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.status-confirmed {
background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%);
color: white;
}
.status-pending {
background: linear-gradient(135deg, var(--warning-yellow) 0%, #d97706 100%);
color: white;
}
.status-completed {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: white;
}
.status-cancelled {
background: linear-gradient(135deg, var(--letgo-error) 0%, #dc2626 100%);
color: white;
}
.view-btn {
padding: 0.75rem 1.5rem;
background: var(--primary-gradient);
color: white;
border: none;
border-radius: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.view-btn:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.4);
}
.empty-state {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 2rem;
padding: 4rem 2rem;
text-align: center;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.empty-icon {
font-size: 5rem;
margin-bottom: 1.5rem;
opacity: 0.5;
}
.empty-state h3 {
font-size: 2rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.empty-state p {
color: #6b7280;
font-size: 1.125rem;
margin-bottom: 2rem;
}
.browse-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: var(--secondary-gradient);
color: white;
text-decoration: none;
border-radius: 0.75rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}
.browse-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}
@media (max-width: 768px) {
.page-banner {
height: 250px;
margin-top: 60px;
}
.banner-icon {
font-size: 3rem;
}
.banner-title {
font-size: 2.5rem;
}
.banner-subtitle {
font-size: 1rem;
}
.bookings-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.filter-tabs {
flex-direction: column;
}
.filter-tab {
width: 100%;
justify-content: center;
}
.card-footer {
flex-direction: column;
gap: 1rem;
}
.view-btn {
width: 100%;
justify-content: center;
}
}
/* === MY ACCOUNT === */
/* Banner Section */
.profile-banner {
position: relative;
height: 300px;
background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-coral) 100%);
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
overflow: hidden;
}
.profile-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
opacity: 0.3;
}
.banner-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
}
.profile-avatar-large {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
margin: 0 auto 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 5px solid var(--white);
}
.banner-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.banner-subtitle {
font-size: 1.125rem;
opacity: 0.95;
}
/* Profile Page Container */
.profile-page {
background: var(--light-gray);
min-height: 100vh;
padding: 3rem 0;
}
.profile-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Stats Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
margin-top: -50px;
position: relative;
z-index: 3;
}
.stat-card {
background: var(--white);
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 1.5rem;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
border-color: var(--primary-orange);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
flex-shrink: 0;
}
.stat-icon.orange {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: white;
}
.stat-icon.green {
background: linear-gradient(135deg, var(--letgo-success), #059669);
color: white;
}
.stat-icon.blue {
background: linear-gradient(135deg, #3B82F6, #2563EB);
color: white;
}
.stat-content h3 {
font-size: 2rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 0.25rem;
}
.stat-content p {
color: var(--text-light);
font-size: 0.875rem;
font-weight: 500;
}
/* Profile Content Grid */
.profile-grid {
display: grid;
grid-template-columns: 350px 1fr;
gap: 2rem;
margin-top: 2rem;
}
/* Sidebar */
.profile-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-card {
background: var(--white);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.user-info {
text-align: center;
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin: 0 auto 1rem;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.user-info h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.user-info .user-email {
color: var(--text-light);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.user-meta {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 2px solid var(--light-gray);
}
.meta-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-light);
font-size: 0.875rem;
}
.meta-item i {
width: 20px;
color: var(--primary-orange);
}
/* Quick Actions */
.quick-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.quick-actions h3 {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.action-btn {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--light-gray);
border: 2px solid transparent;
border-radius: 0.75rem;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.action-btn:hover {
background: var(--white);
border-color: var(--primary-orange);
transform: translateX(5px);
}
.action-btn i {
width: 24px;
text-align: center;
color: var(--primary-orange);
}
/* Main Content */
.profile-main {
display: flex;
flex-direction: column;
gap: 2rem;
}
.profile-section {
background: var(--white);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--light-gray);
flex-direction: column;
}
.section-header h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-header i {
color: var(--primary-orange);
}
/* Alert Messages */
.alert {
padding: 1rem 1.5rem;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 500;
}
.alert-success {
background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
color: #065F46;
border: 2px solid var(--letgo-success);
}
.alert-error {
background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
color: #991B1B;
border: 2px solid var(--letgo-error);
}
.alert i {
font-size: 1.25rem;
}
/* Form Styles */
.profile-form {
display: flex;
flex-direction: column;
gap: 2rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-weight: 600;
color: var(--text-dark);
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-group label i {
color: var(--primary-orange);
font-size: 0.875rem;
}
.form-input {
padding: 0.875rem 1rem;
border: 2px solid #E5E7EB;
border-radius: 0.75rem;
font-size: 1rem;
color: var(--text-dark);
transition: all 0.3s ease;
background: var(--white);
}
.form-input:focus {
outline: none;
border-color: var(--primary-orange);
box-shadow: 0 0 0 3px rgba(var(--primary-orange-rgb), 0.1);
}
.form-input:disabled {
background: var(--light-gray);
cursor: not-allowed;
}
.form-actions {
display: flex;
gap: 1rem;
padding-top: 1rem;
border-top: 2px solid var(--light-gray);
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 0.75rem;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.75rem;
justify-content: center;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: white;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--primary-orange-rgb), 0.4);
}
.btn-secondary {
background: var(--light-gray);
color: var(--text-dark);
}
.btn-secondary:hover {
background: #E5E7EB;
}
/* Responsive Design */
@media (max-width: 968px) {
.profile-grid {
grid-template-columns: 1fr;
}
.profile-sidebar {
order: 2;
}
.profile-main {
order: 1;
}
}
@media (max-width: 768px) {
.profile-banner {
height: 250px;
margin-top: 60px;
}
.banner-title {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
.form-actions {
flex-direction: column;
}
.btn {
width: 100%;
}
}
/* === LOGIN === */
/* ----------- BACKGROUND WITH GRADIENT OVERLAY ----------- */
.travel-auth-bg {
min-height: 100vh;
padding: 30px 20px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.8), rgba(var(--primary-coral-rgb), 0.7)),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&q=80') center/cover no-repeat fixed;
position: relative;
overflow: hidden;
}
/* Animated background elements */
.travel-auth-bg::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -100px;
right: -100px;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
/* ----------- CARD CONTAINER ----------- */
.travel-auth-card {
width: 100%;
max-width: 450px;
padding: 40px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ----------- LOGO/ICON ----------- */
.login-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
box-shadow: 0 8px 20px rgba(var(--primary-orange-rgb), 0.4);
}
/* ----------- HEADINGS ----------- */
.travel-auth-card h2 {
text-align: center;
font-size: 28px;
font-weight: 800;
margin-bottom: 25px;
background: linear-gradient(135deg, var(--dark-navy), var(--primary-orange));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ----------- INPUT GROUPS ----------- */
.input-group {
position: relative;
margin-bottom: 18px;
}
.input-group input {
width: 100%;
padding: 14px 14px 14px 45px;
border-radius: 12px;
border: 2px solid #e9ecef;
font-size: 15px;
transition: all 0.3s ease;
background: #fff;
}
.input-group input:focus {
outline: none;
border-color: var(--primary-orange);
box-shadow: 0 0 0 4px rgba(var(--primary-orange-rgb), 0.1);
}
.input-group .input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--letgo-text-light);
font-size: 18px;
}
.input-group input:focus + .input-icon {
color: var(--primary-orange);
}
/* ----------- CHECKBOX & LINKS ----------- */
.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 14px;
}
.remember-forgot label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.remember-forgot a {
color: var(--primary-orange);
text-decoration: none;
font-weight: 600;
}
.remember-forgot a:hover {
text-decoration: underline;
}
/* ----------- BUTTONS ----------- */
.auth-btn {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: 600;
border-radius: 12px;
border: none;
cursor: pointer;
margin-bottom: 12px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.login-btn {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: #fff;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.4);
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--primary-orange-rgb), 0.5);
}
.otp-btn {
background: linear-gradient(135deg, #27ae60, #1e8449);
color: #fff;
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
}
.otp-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5);
}
.google-btn {
background: #fff;
color: #333;
border: 2px solid #e9ecef;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.google-btn:hover {
background: #f8f9fa;
border-color: #dee2e6;
transform: translateY(-2px);
}
/* ----------- DIVIDER ----------- */
.divider {
display: flex;
align-items: center;
margin: 25px 0;
color: var(--letgo-text-light);
font-size: 14px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #dee2e6;
}
.divider span {
padding: 0 15px;
font-weight: 500;
}
/* ----------- ERROR & SUCCESS ----------- */
.form-error {
color: var(--error-red);
background: linear-gradient(135deg, #ffe6e9, #ffd4d8);
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 20px;
font-weight: 500;
border-left: 4px solid var(--error-red);
font-size: 14px;
}
.form-success {
color: var(--success-green);
background: linear-gradient(135deg, #d1f4e0, #b8f0d3);
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 20px;
text-align: center;
font-weight: 500;
border-left: 4px solid var(--success-green);
font-size: 14px;
}
/* ----------- AUTH HOME LINK ----------- */
.auth-home-link {
display: inline-block;
margin-bottom: 20px;
color: var(--primary-orange);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
}
.auth-home-link:hover {
color: var(--primary-coral);
text-decoration: underline;
}
/* ----------- BOTTOM LINKS ----------- */
.bottom-links {
text-align: center;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #e9ecef;
color: var(--letgo-text-light);
font-size: 15px;
}
.bottom-links a {
color: var(--primary-orange);
font-weight: 700;
text-decoration: none;
}
.bottom-links a:hover {
text-decoration: underline;
}
/* ----------- OTP SECTION ----------- */
.otp-section {
margin-top: 25px;
padding-top: 25px;
border-top: 2px dashed #dee2e6;
}
.otp-section h3 {
font-size: 18px;
margin-bottom: 15px;
color: #27ae60;
text-align: center;
}
/* === REGISTER === */
/* ----------- BACKGROUND WITH GRADIENT OVERLAY ----------- */
.travel-auth-bg {
min-height: 100vh;
padding: 30px 20px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.8), rgba(var(--primary-coral-rgb), 0.7)),
url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?q=80') center/cover no-repeat fixed;
position: relative;
overflow: hidden;
}
/* Animated background elements */
.travel-auth-bg::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -100px;
right: -100px;
animation: float 6s ease-in-out infinite;
}
.travel-auth-bg::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
bottom: -50px;
left: -50px;
animation: float 8s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
/* ----------- CARD CONTAINER ----------- */
.travel-auth-card {
width: 100%;
max-width: 480px;
padding: 45px 40px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
position: relative;
z-index: 1;
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ----------- LOGO/ICON ----------- */
.register-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
box-shadow: 0 8px 20px rgba(var(--primary-orange-rgb), 0.4);
}
/* ----------- HEADINGS ----------- */
.travel-auth-card h2 {
text-align: center;
font-size: 32px;
font-weight: 800;
margin-bottom: 8px;
background: linear-gradient(135deg, var(--dark-navy), var(--primary-orange));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.travel-auth-card .subtitle {
text-align: center;
color: var(--letgo-text-light);
font-size: 14px;
margin-bottom: 30px;
}
/* ----------- INPUT GROUPS ----------- */
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group input {
width: 100%;
padding: 16px 16px 16px 45px;
border-radius: 14px;
border: 2px solid #e9ecef;
font-size: 15px;
transition: all 0.3s ease;
background: #fff;
}
.input-group input:focus {
outline: none;
border-color: var(--primary-orange);
box-shadow: 0 0 0 4px rgba(var(--primary-orange-rgb), 0.1);
}
.input-group .input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--letgo-text-light);
font-size: 18px;
}
.input-group input:focus + .input-icon {
color: var(--primary-orange);
}
/* ----------- PASSWORD STRENGTH ----------- */
.password-strength {
font-size: 12px;
margin-top: -15px;
margin-bottom: 15px;
padding-left: 45px;
color: var(--letgo-text-light);
}
.password-strength.weak { color: var(--error-red); }
.password-strength.medium { color: #ffc107; }
.password-strength.strong { color: #28a745; }
.password-match {
font-size: 12px;
margin-top: -15px;
margin-bottom: 15px;
padding-left: 45px;
color: var(--letgo-text-light);
}
.password-match.match { color: #28a745; }
.password-match.nomatch { color: var(--error-red); }
/* ----------- CHECKBOX ----------- */
.terms-check {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 25px;
font-size: 14px;
color: #495057;
}
.terms-check input[type="checkbox"] {
margin-top: 3px;
cursor: pointer;
}
.terms-check a {
color: var(--primary-orange);
text-decoration: none;
font-weight: 600;
}
.terms-check a:hover {
text-decoration: underline;
}
/* ----------- BUTTONS ----------- */
.auth-btn {
width: 100%;
padding: 16px;
font-size: 16px;
font-weight: 600;
border-radius: 14px;
border: none;
cursor: pointer;
margin-bottom: 12px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
overflow: hidden;
}
.auth-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;
}
.auth-btn:hover::before {
width: 300px;
height: 300px;
}
.register-btn {
background: linear-gradient(135deg, var(--primary-coral), var(--primary-orange));
color: #fff;
box-shadow: 0 4px 15px rgba(42, 157, 143, 0.4);
}
.register-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(42, 157, 143, 0.5);
}
.register-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* ----------- DIVIDER ----------- */
.divider {
display: flex;
align-items: center;
text-align: center;
margin: 25px 0;
color: var(--letgo-text-light);
font-size: 14px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #dee2e6;
}
.divider span {
padding: 0 15px;
font-weight: 500;
}
/* ----------- SOCIAL BUTTONS ----------- */
.google-btn {
background: #fff;
color: #333;
border: 2px solid #e9ecef;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.google-btn:hover {
background: #f8f9fa;
border-color: #dee2e6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* ----------- ERROR & SUCCESS ----------- */
.form-error {
color: var(--error-red);
background: linear-gradient(135deg, #ffe6e9, #ffd4d8);
padding: 14px 16px;
border-radius: 12px;
margin-bottom: 20px;
font-weight: 500;
border-left: 4px solid var(--error-red);
animation: shake 0.4s ease;
font-size: 14px;
line-height: 1.6;
}
.form-error b {
display: block;
margin-bottom: 8px;
font-size: 15px;
}
.form-success {
color: var(--success-green);
background: linear-gradient(135deg, #d1f4e0, #b8f0d3);
padding: 14px 16px;
border-radius: 12px;
margin-bottom: 20px;
text-align: center;
font-weight: 500;
border-left: 4px solid var(--success-green);
font-size: 14px;
}
.form-success a {
color: #0d6832;
font-weight: 700;
text-decoration: underline;
}
.form-info {
color: #0c5460;
background: linear-gradient(135deg, #d1ecf1, #bee5eb);
padding: 14px 16px;
border-radius: 12px;
margin-bottom: 20px;
text-align: center;
font-weight: 500;
border-left: 4px solid #17a2b8;
font-size: 14px;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
/* ----------- LINKS ----------- */
.bottom-links {
text-align: center;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #e9ecef;
color: var(--letgo-text-light);
font-size: 15px;
}
.bottom-links a {
color: var(--primary-orange);
font-weight: 700;
text-decoration: none;
transition: color 0.3s;
}
.bottom-links a:hover {
color: var(--dark-navy);
text-decoration: underline;
}
/* ----------- FEATURES LIST ----------- */
.features-list {
background: #f8f9fa;
border-radius: 12px;
padding: 15px 20px;
margin-bottom: 20px;
}
.features-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.features-list li {
padding: 8px 0;
color: #495057;
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.features-list li::before {
content: '✓';
color: #28a745;
font-weight: bold;
font-size: 16px;
}
/* ----------- RESPONSIVE ----------- */
@media (max-width: 480px) {
.travel-auth-card {
padding: 35px 25px;
}
.travel-auth-card h2 {
font-size: 26px;
}
.input-group input {
padding: 14px 14px 14px 42px;
}
}
/* === LOGIN PAGE === */
/* ----------- BACKGROUND WITH GRADIENT OVERLAY ----------- */
.travel-auth-bg {
min-height: 100vh;
padding: 30px 20px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, rgba(var(--primary-orange-rgb), 0.8), rgba(var(--primary-coral-rgb), 0.7)),
url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?q=80') center/cover no-repeat fixed;
position: relative;
overflow: hidden;
}
/* Animated background elements */
.travel-auth-bg::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -100px;
right: -100px;
animation: float 6s ease-in-out infinite;
}
.travel-auth-bg::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
bottom: -50px;
left: -50px;
animation: float 8s ease-in-out infinite reverse;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
/* ----------- CARD CONTAINER ----------- */
.travel-auth-card {
width: 100%;
max-width: 450px;
padding: 45px 40px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
position: relative;
z-index: 1;
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ----------- LOGO/ICON ----------- */
.login-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
box-shadow: 0 8px 20px rgba(var(--primary-orange-rgb), 0.4);
}
/* ----------- HEADINGS ----------- */
.travel-auth-card h2 {
text-align: center;
font-size: 32px;
font-weight: 800;
margin-bottom: 8px;
background: linear-gradient(135deg, var(--dark-navy), var(--primary-orange));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.travel-auth-card .subtitle {
text-align: center;
color: var(--letgo-text-light);
font-size: 14px;
margin-bottom: 30px;
}
/* ----------- INPUT GROUPS ----------- */
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group input {
width: 100%;
padding: 16px 16px 16px 45px;
border-radius: 14px;
border: 2px solid #e9ecef;
font-size: 15px;
transition: all 0.3s ease;
background: #fff;
}
.input-group input:focus {
outline: none;
border-color: var(--primary-orange);
box-shadow: 0 0 0 4px rgba(var(--primary-orange-rgb), 0.1);
}
.input-group .input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--letgo-text-light);
font-size: 18px;
}
.input-group input:focus + .input-icon {
color: var(--primary-orange);
}
/* ----------- CHECKBOX ----------- */
.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
font-size: 14px;
}
.remember-forgot label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: #495057;
}
.remember-forgot a {
color: var(--primary-orange);
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.remember-forgot a:hover {
color: var(--dark-navy);
}
/* ----------- BUTTONS ----------- */
.auth-btn {
width: 100%;
padding: 16px;
font-size: 16px;
font-weight: 600;
border-radius: 14px;
border: none;
cursor: pointer;
margin-bottom: 12px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.auth-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;
}
.auth-btn:hover::before {
width: 300px;
height: 300px;
}
.login-btn {
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: #fff;
box-shadow: 0 4px 15px rgba(var(--primary-orange-rgb), 0.4);
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--primary-orange-rgb), 0.5);
}
/* ----------- DIVIDER ----------- */
.divider {
display: flex;
align-items: center;
text-align: center;
margin: 25px 0;
color: var(--letgo-text-light);
font-size: 14px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #dee2e6;
}
.divider span {
padding: 0 15px;
font-weight: 500;
}
/* ----------- SOCIAL BUTTONS ----------- */
.google-btn {
background: #fff;
color: #333;
border: 2px solid #e9ecef;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.google-btn:hover {
background: #f8f9fa;
border-color: #dee2e6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.facebook-btn {
background: #1877F2;
color: white;
border: 2px solid #1877F2;
}
.facebook-btn:hover {
background: #166FE5;
border-color: #166FE5;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(24, 119, 242, 0.4);
}
/* Social button icons */
.social-btn-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* ----------- ERROR & SUCCESS ----------- */
.form-error {
color: var(--error-red);
background: linear-gradient(135deg, #ffe6e9, #ffd4d8);
padding: 14px;
border-radius: 12px;
margin-bottom: 20px;
text-align: center;
font-weight: 500;
border-left: 4px solid var(--error-red);
animation: shake 0.4s ease;
}
.form-success {
color: var(--success-green);
background: linear-gradient(135deg, #d1f4e0, #b8f0d3);
padding: 14px;
border-radius: 12px;
margin-bottom: 20px;
text-align: center;
font-weight: 500;
border-left: 4px solid var(--success-green);
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
/* ----------- LINKS ----------- */
.bottom-links {
text-align: center;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid #e9ecef;
color: var(--letgo-text-light);
font-size: 15px;
}
.bottom-links a {
color: var(--primary-orange);
font-weight: 700;
text-decoration: none;
transition: color 0.3s;
}
.bottom-links a:hover {
color: var(--dark-navy);
text-decoration: underline;
}
/* ----------- RESPONSIVE ----------- */
@media (max-width: 480px) {
.travel-auth-card {
padding: 35px 25px;
}
.travel-auth-card h2 {
font-size: 26px;
}
.auth-btn {
font-size: 14px;
padding: 14px;
}
}
/* === SINGLE PRODUCT === */
/* ================================
PREMIUM TRAVEL UI - MATCHING HOME PAGE
================================ */
/* Override specific styles */
.trip-hero-modern {
background: linear-gradient(135deg, rgba(var(--dark-navy-rgb), 0.85) 0%, rgba(var(--primary-orange-rgb), 0.7) 100%);
}
.trip-hero-modern::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(var(--dark-navy-rgb), 0.85) 0%, rgba(var(--primary-orange-rgb), 0.7) 100%) !important;
animation: pulse 8s ease-in-out infinite;
}
.trip-page {
background: linear-gradient(180deg, #F8FAFB 0%, #ffffff 50%, #F8FAFB 100%);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow-x: hidden;
}
/* ================================
ANIMATIONS
================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* SCROLL ANIMATION CLASSES */
.animate-on-scroll {
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.animated {
opacity: 1;
}
/* ================================
HERO SECTION
================================ */
.trip-hero-modern {
min-height: 70vh;
position: relative;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
padding: 100px 0 80px;
overflow: hidden;
}
.trip-hero-modern::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(14, 30, 64, 0.85) 0%, rgba(0, 196, 204, 0.7) 100%);
animation: pulse 8s ease-in-out infinite;
}
.trip-hero-modern::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 50%, rgba(0, 196, 204, 0.3) 0%, transparent 70%);
}
.trip-hero-content {
position: relative;
z-index: 5;
color: #fff;
animation: fadeInUp 1s ease-out;
}
.breadcrumb-modern {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
animation: slideInFromTop 0.8s ease-out;
}
.breadcrumb-modern a {
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.breadcrumb-modern a:hover {
color: var(--letgo-primary);
}
.trip-hero-title {
font-weight: 800;
font-size: 4rem;
line-height: 1.2;
margin-bottom: 1rem;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
animation: fadeInUp 1s ease-out 0.2s backwards;
}
.trip-hero-subtitle {
font-size: 1.3rem;
opacity: 0.95;
line-height: 1.6;
max-width: 700px;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
animation: fadeInUp 1s ease-out 0.4s backwards;
}
.hero-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 28px;
padding: 16px 36px;
background: linear-gradient(135deg, var(--primary-orange), var(--primary-coral));
color: #fff;
font-size: 18px;
font-weight: 700;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 8px 30px rgba(var(--primary-orange-rgb), 0.4);
transition: all 0.3s ease;
animation: fadeInUp 1s ease-out 0.6s backwards;
}
.hero-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(var(--primary-orange-rgb), 0.55);
color: #fff;
}
.hero-cta-btn svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.hero-cta-btn:hover svg {
transform: translateX(4px);
}
/* ================================
SECTION STYLING
================================ */
.section {
margin: 80px 0;
position: relative;
}
.section-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 2rem;
color: var(--letgo-secondary);
position: relative;
display: inline-block;
}
.section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--letgo-primary) 0%, #00a8af 100%);
border-radius: 2px;
}
.section-title-icon {
font-size: 2.5rem;
margin-right: 0.5rem;
vertical-align: middle;
display: inline-block;
animation: float 3s ease-in-out infinite;
}
/* ================================
CARD STYLING
================================ */
.info-card {
background: white;
padding: 2.5rem;
border-radius: 1.5rem;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
border: 1px solid rgba(0, 196, 204, 0.1);
margin-bottom: 2rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--letgo-primary) 0%, #00a8af 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.info-card:hover::before {
transform: scaleX(1);
}
.info-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,196,204,0.2);
}
.info-card p {
margin: 12px 0;
font-size: 1.1rem;
line-height: 1.8;
color: var(--letgo-gray-700);
}
.info-card strong {
color: var(--letgo-secondary);
font-weight: 700;
}
/* ================================
PRICING CARDS
================================ */
.pricing-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 2rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.pricing-card {
background: white;
padding: 2.5rem;
border-radius: 1.5rem;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.pricing-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--letgo-primary) 0%, #00a8af 100%);
}
.pricing-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 50px rgba(0,196,204,0.3);
border-color: var(--letgo-primary);
}
.pricing-icon {
font-size: 3.5rem;
margin-bottom: 1rem;
display: inline-block;
animation: float 4s ease-in-out infinite;
}
.pricing-label {
font-size: 1.2rem;
font-weight: 700;
color: var(--letgo-secondary);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.pricing-amount {
font-size: 2.5rem;
font-weight: 800;
color: var(--letgo-primary);
margin-bottom: 0.5rem;
}
.pricing-period {
color: var(--letgo-gray-600);
font-size: 1rem;
}
/* ================================
DURATION CARDS
================================ */
.duration-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-top: 2rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.duration-card {
background: linear-gradient(135deg, var(--letgo-primary-light) 0%, rgba(0,196,204,0.1) 100%);
padding: 2rem;
border-radius: 1.5rem;
text-align: center;
transition: all 0.4s ease;
border: 2px solid transparent;
}
.duration-card:hover {
background: linear-gradient(135deg, var(--letgo-primary) 0%, #00a8af 100%);
transform: scale(1.05);
border-color: white;
}
.duration-card:hover .duration-label,
.duration-card:hover .duration-value {
color: white;
}
.duration-label {
font-size: 1.1rem;
font-weight: 700;
color: var(--letgo-secondary);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.duration-value {
font-size: 1.8rem;
font-weight: 800;
color: var(--letgo-primary);
}
/* ================================
ICON LIST
================================ */
.icon-list {
list-style: none;
padding: 0;
margin: 0;
}
.icon-list li {
margin: 1.25rem 0;
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.1rem;
color: var(--letgo-gray-700);
padding: 0.75rem;
border-radius: 0.75rem;
transition: all 0.3s ease;
}
.icon-list li:hover {
background: var(--letgo-primary-light);
transform: translateX(10px);
}
.icon-list-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--letgo-primary) 0%, #00a8af 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: bold;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(0,196,204,0.3);
}
/* ================================
CTA BUTTON
================================ */
.cta-section {
text-align: center;
padding: 4rem 0;
position: relative;
}
.trip-cta {
background: linear-gradient(135deg, var(--letgo-primary) 0%, #00a8af 100%);
padding: 18px 50px;
color: white;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
box-shadow: 0 8px 25px rgba(0,196,204,0.4);
position: relative;
overflow: hidden;
}
.trip-cta::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;
}
.trip-cta:hover::before {
width: 300px;
height: 300px;
}
.trip-cta:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 40px rgba(0,196,204,0.5);
}
/* ================================
INFO HIGHLIGHT BOX
================================ */
.info-highlight {
background: linear-gradient(135deg, var(--letgo-primary-light) 0%, rgba(0,196,204,0.15) 100%);
padding: 2rem;
border-radius: 1.5rem;
border-left: 5px solid var(--letgo-primary);
margin: 2rem 0;
position: relative;
overflow: hidden;
}
.info-highlight::before {
content: "";
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0,196,204,0.1) 0%, transparent 70%);
animation: pulse 6s ease-in-out infinite;
}
.info-highlight p {
margin: 0;
font-size: 1.1rem;
line-height: 1.8;
color: var(--letgo-gray-700);
position: relative;
z-index: 1;
}
/* ================================
WOOCOMMERCE INTEGRATION
================================ */
.woocommerce-section {
background: white;
padding: 3rem;
border-radius: 1.5rem;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
margin: 3rem 0;
}
/* ================================
RESPONSIVE DESIGN
================================ */
@media (max-width: 968px) {
.trip-hero-title {
font-size: 3rem;
}
.section-title {
font-size: 2rem;
}
.pricing-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
.duration-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.trip-hero-title {
font-size: 2.5rem;
}
.trip-hero-subtitle {
font-size: 1.1rem;
}
.section {
margin: 50px 0;
}
.section-title {
font-size: 1.75rem;
}
.info-card {
padding: 1.5rem;
}
.pricing-card,
.duration-card {
padding: 1.5rem;
}
.hero-cta-btn {
padding: 14px 28px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.trip-hero-title {
font-size: 2rem;
}
.trip-hero-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 1.5rem;
}
.trip-cta {
width: 100%;
padding: 16px 30px;
}
.hero-cta-btn {
padding: 12px 24px;
font-size: 15px;
width: 100%;
justify-content: center;
}
}
/* === SOCIAL LOGIN CALLBACK === */
.letgo-welcome-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.letgo-welcome-popup {
background: white;
border-radius: 24px;
padding: 50px 40px;
max-width: 500px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease;
position: relative;
}
.letgo-welcome-close {
position: absolute;
top: 20px;
right: 20px;
background: var(--letgo-light-bg);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: var(--letgo-text-light);
transition: all 0.3s ease;
}
.letgo-welcome-close:hover {
background: #e5e7eb;
transform: rotate(90deg);
}
.letgo-welcome-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(--letgo-primary), var(--letgo-accent));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
animation: bounce 1s ease infinite;
}
.letgo-welcome-popup h2 {
font-size: 32px;
margin-bottom: 15px;
background: linear-gradient(135deg, var(--letgo-primary), var(--letgo-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.letgo-welcome-popup p {
color: var(--letgo-text-light);
font-size: 16px;
margin-bottom: 30px;
line-height: 1.6;
}
.letgo-welcome-button {
display: inline-block;
padding: 15px 40px;
background: linear-gradient(135deg, var(--letgo-primary), var(--letgo-accent));
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.letgo-welcome-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(var(--primary-orange-rgb), 0.4);
color: white;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* === CUSTOM CSS (from assets/css/custom.css) === */
/* Additional custom styles for LetGo theme */
/* User Dashboard */
.dashboard-container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
.dashboard-grid {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
margin-top: 2rem;
}
.dashboard-sidebar {
background: var(--letgo-white);
border-radius: var(--letgo-radius-lg);
padding: var(--letgo-spacing-md);
box-shadow: var(--letgo-shadow-md);
height: fit-content;
}
.dashboard-sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.dashboard-sidebar li {
margin-bottom: 0.5rem;
}
.dashboard-sidebar a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
color: var(--letgo-gray-700);
border-radius: var(--letgo-radius-md);
transition: var(--letgo-transition-base);
}
.dashboard-sidebar a:hover,
.dashboard-sidebar a.active {
background-color: var(--letgo-primary-light);
color: var(--letgo-primary);
}
.dashboard-content {
background: var(--letgo-white);
border-radius: var(--letgo-radius-lg);
padding: var(--letgo-spacing-lg);
box-shadow: var(--letgo-shadow-md);
}
/* Booking List */
.bookings-list {
display: grid;
gap: var(--letgo-spacing-md);
}
.booking-item {
background: var(--letgo-light-bg);
border-radius: var(--letgo-radius-md);
padding: var(--letgo-spacing-md);
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--letgo-transition-base);
}
.booking-item:hover {
box-shadow: var(--letgo-shadow-md);
}
.booking-info h3 {
margin-bottom: 0.5rem;
}
.booking-meta {
display: flex;
gap: 1rem;
font-size: var(--letgo-text-sm);
color: var(--letgo-gray-600);
}
.booking-actions {
display: flex;
gap: 0.5rem;
}
/* Responsive */
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.booking-item {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
/* === MENU STYLES (from functions.php) === */
/* My Booking Menu Item */
.menu-item-my-booking > a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: linear-gradient(135deg, var(--letgo-primary) 0%, var(--letgo-accent) 100%);
color: white !important;
border-radius: 0.75rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
margin: 0 0.5rem;
}
.menu-item-my-booking > a:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(var(--primary-orange-rgb), 0.4);
background: linear-gradient(135deg, var(--letgo-accent) 0%, var(--letgo-primary) 100%);
}
.menu-item-my-booking > a i {
font-size: 1.1rem;
}
/* Booking Count Badge */
.booking-count-badge {
position: absolute;
top: -8px;
right: -8px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: linear-gradient(135deg, var(--letgo-error) 0%, #dc2626 100%);
color: white;
border-radius: 11px;
font-size: 11px;
font-weight: 700;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
0%, 100% {
transform: scale(1);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
50% {
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.menu-item-my-booking > a {
width: 100%;
justify-content: center;
margin: 0.5rem 0;
}
.booking-count-badge {
position: static;
margin-left: 0.5rem;
}
}
/* Active state when on My Bookings or Booking Details page */
body.page-template-template-my-bookings .menu-item-my-booking > a,
body.page-template-template-booking-details .menu-item-my-booking > a {
background: linear-gradient(135deg, var(--letgo-accent) 0%, var(--letgo-primary) 100%);
box-shadow: 0 8px 20px rgba(var(--primary-orange-rgb), 0.4);
}
/* === SOCIAL LOGIN CSS (from assets/css/social-login.css) === */
/**
* Social Login Styles
* Beautiful Google and Facebook login buttons
*
* @package LetGo
*/
/* Social Login Container */
.social-login-container {
margin: 20px 0;
width: 100%;
}
/* Separator */
.social-login-separator {
text-align: center;
margin: 20px 0;
position: relative;
}
.social-login-separator::before,
.social-login-separator::after {
content: '';
position: absolute;
top: 50%;
width: 40%;
height: 1px;
background: #ddd;
}
.social-login-separator::before {
left: 0;
}
.social-login-separator::after {
right: 0;
}
.social-login-separator span {
background: #fff;
padding: 0 15px;
color: #666;
font-size: 14px;
position: relative;
z-index: 1;
}
/* Social Login Buttons Container */
.social-login-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 15px;
}
/* Base Social Button Styles */
.social-login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 20px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
background: white;
}
.social-login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.social-login-btn:active {
transform: translateY(0);
}
.social-login-btn svg {
flex-shrink: 0;
}
/* Google Button */
.google-btn {
color: #1f2937;
border-color: #e5e7eb;
}
.google-btn:hover {
border-color: #4285F4;
background: #f8faff;
}
/* Facebook Button */
.facebook-btn {
color: white;
background: #1877F2;
border-color: #1877F2;
}
.facebook-btn:hover {
background: #166FE5;
border-color: #166FE5;
}
/* Loading State */
.social-login-btn.loading {
pointer-events: none;
opacity: 0.6;
}
.social-login-btn.loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-top-color: rgba(0, 0, 0, 0.4);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Responsive Design */
@media (min-width: 480px) {
.social-login-buttons {
flex-direction: row;
}
.social-login-btn {
flex: 1;
}
}
/* WordPress Login Page Specific */
body.login .social-login-container {
margin-bottom: 20px;
}
body.login #login {
width: 400px;
}
body.login .social-login-btn {
font-size: 14px;
padding: 10px 16px;
}
/* WooCommerce Integration */
.woocommerce-form-login .social-login-container,
.woocommerce-form-register .social-login-container {
margin: 20px 0;
}
/* User Profile Page - Connected Accounts */
.connected-social-accounts {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.connected-social-accounts h3 {
margin-top: 0;
color: #1f2937;
font-size: 18px;
margin-bottom: 15px;
}
.social-account-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 6px;
margin-bottom: 10px;
}
.social-account-info {
display: flex;
align-items: center;
gap: 12px;
}
.social-account-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.social-account-icon.google {
background: #f8faff;
}
.social-account-icon.facebook {
background: #e7f3ff;
}
.social-account-details {
flex: 1;
}
.social-account-provider {
font-weight: 600;
color: #1f2937;
font-size: 14px;
}
.social-account-email {
color: #6b7280;
font-size: 13px;
}
.disconnect-btn {
padding: 6px 12px;
background: #fee2e2;
color: #dc2626;
border: 1px solid #fecaca;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.disconnect-btn:hover {
background: #fecaca;
border-color: #fca5a5;
}
/* Error Messages */
.social-login-error {
background: #fee2e2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 12px;
border-radius: 6px;
margin: 15px 0;
font-size: 14px;
}
/* Success Messages */
.social-login-success {
background: #d1fae5;
border: 1px solid #a7f3d0;
color: #065f46;
padding: 12px;
border-radius: 6px;
margin: 15px 0;
font-size: 14px;
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.social-login-separator::before,
.social-login-separator::after {
background: #374151;
}
.social-login-separator span {
background: #1f2937;
color: #9ca3af;
}
.social-login-btn {
background: #1f2937;
border-color: #374151;
color: #f9fafb;
}
.google-btn:hover {
background: #374151;
border-color: #4285F4;
}
.connected-social-accounts {
background: #1f2937;
border-color: #374151;
}
.social-account-item {
background: #111827;
border-color: #374151;
}
}
/* Animation for hover effects */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.social-login-container {
animation: fadeIn 0.3s ease-out;
}
/* Print Styles */
@media print {
.social-login-container,
.connected-social-accounts {
display: none !important;
}
}
/* Accessibility */
.social-login-btn:focus {
outline: 2px solid #4285F4;
outline-offset: 2px;
}
.social-login-btn:focus:not(:focus-visible) {
outline: none;
}
/* Mobile Optimization */
@media (max-width: 479px) {
body.login #login {
width: 320px;
}
.social-login-btn {
font-size: 13px;
padding: 10px 12px;
}
.social-login-btn svg {
width: 16px;
height: 16px;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.social-login-btn {
border-width: 3px;
}
.google-btn {
border-color: #000;
}
.facebook-btn {
border-color: #000;
}
}
.m-0{
margin: 0px !important;
}