/* Custom styles beyond Tailwind */

/* Montserrat font is loaded via Google Fonts in the HTML */
body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Custom animations and effects */
.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #ffffff;
}

::-webkit-scrollbar-thumb {
    background: #FF4500;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #E03D00;
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus {
    outline: 2px solid #FF4500;
    outline-offset: 2px;
}

/* Custom placeholder color */
::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Custom selection color */
::selection {
    background-color: #FF4500;
    color: white;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Navigation links */
.nav-link {
    position: relative;
    color: #333333;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FF4500;
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: #FF4500;
}

.nav-link:hover::after {
    width: 100%;
}

.mobile-nav-link {
    display: block;
    padding: 0.75rem 0;
    font-weight: 500;
    color: #333333;
    border-bottom: 1px solid rgba(51, 51, 51, 0.1);
    transition: color 0.3s ease;
}

.mobile-nav-link:hover {
    color: #FF4500;
}

/* Buttons */
.btn-primary {
    background-color: #FF4500;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(255, 69, 0, 0.2), 0 2px 4px -1px rgba(255, 69, 0, 0.1);
}

.btn-primary:hover {
    background-color: #E03D00;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(255, 69, 0, 0.2), 0 4px 6px -2px rgba(255, 69, 0, 0.1);
}

.btn-primary-large {
    background-color: #FF4500;
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(255, 69, 0, 0.2), 0 2px 4px -1px rgba(255, 69, 0, 0.1);
}

.btn-primary-large:hover {
    background-color: #E03D00;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(255, 69, 0, 0.2), 0 4px 6px -2px rgba(255, 69, 0, 0.1);
}

.btn-outline {
    background-color: transparent;
    color: #333333;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    border: 2px solid #333333;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline:hover {
    background-color: #333333;
    color: white;
    transform: translateY(-2px);
}

.btn-outline-large {
    background-color: transparent;
    color: #333333;
    padding: 0.875rem 2rem;
    border-radius: 9999px;
    border: 2px solid #333333;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-large:hover {
    background-color: #333333;
    color: white;
    transform: translateY(-2px);
}

.btn-light-large {
    background-color: white;
    color: #FF4500;
    padding: 0.875rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-light-large:hover {
    background-color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-outline-light-large {
    background-color: transparent;
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 9999px;
    border: 2px solid white;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-light-large:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.btn-outline-primary {
    background-color: transparent;
    color: #FF4500;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    border: 2px solid #FF4500;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-primary:hover {
    background-color: rgba(255, 69, 0, 0.1);
    transform: translateY(-2px);
}

.btn-text {
    color: #FF4500;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-text:hover {
    color: #E03D00;
    transform: translateX(4px);
}

/* Badges */
.badge-primary {
    display: inline-block;
    background-color: rgba(255, 69, 0, 0.1);
    color: #FF4500;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.badge-secondary {
    display: inline-block;
    background-color: rgba(82, 55, 124, 0.1);
    color: #52377c;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

.badge-light {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    margin-bottom: 1rem;
}

/* Feature cards */
.feature-card {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
}

.feature-card-horizontal {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.feature-card-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
}

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.feature-icon-small {
    min-width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Step cards */
.step-card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.step-number {
    width: 3rem;
    height: 3rem;
    background: #FF4500;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(255, 69, 0, 0.2), 0 2px 4px -1px rgba(255, 69, 0, 0.1);
}

/* Story cards */
.story-card {
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.story-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%);
}

.story-bookmark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.story-bookmark:hover {
    background-color: white;
    color: #FF4500;
    transform: scale(1.1);
}

/* Benefit items */
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.benefit-icon {
    min-width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Social icons */
.social-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #FF4500;
    transform: translateY(-3px);
}

/* Newsletter form */
.newsletter-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 9999px;
    width: 100%;
    transition: all 0.3s ease;
}

.newsletter-input:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.newsletter-button {
    background-color: #FF4500;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.newsletter-button:hover {
    background-color: #E03D00;
    transform: translateY(-2px);
}

/* Navigation Styles */
.nav-link {
    position: relative;
    font-weight: 500;
    color: #333333;
    transition: color 0.3s;
    padding-bottom: 4px;
}

.nav-link:hover {
    color: #FF4500;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FF4500;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.mobile-nav-link {
    display: block;
    padding: 0.5rem 0;
    font-weight: 500;
    color: #333333;
    transition: color 0.3s;
}

.mobile-nav-link:hover {
    color: #FF4500;
}

/* Button Styles */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    background-color: #FF4500;
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(255, 69, 0, 0.1), 0 2px 4px -1px rgba(255, 69, 0, 0.06);
}

.btn-primary:hover {
    background-color: #E03E00;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(255, 69, 0, 0.1), 0 4px 6px -2px rgba(255, 69, 0, 0.05);
}

.btn-primary-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: #FF4500;
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(255, 69, 0, 0.1), 0 2px 4px -1px rgba(255, 69, 0, 0.06);
}

.btn-primary-large:hover {
    background-color: #E03E00;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(255, 69, 0, 0.1), 0 4px 6px -2px rgba(255, 69, 0, 0.05);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    background-color: transparent;
    color: #333333;
    font-weight: 600;
    border: 2px solid #333333;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    border-color: #FF4500;
    color: #FF4500;
}

.btn-outline-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    color: #333333;
    font-weight: 600;
    border: 2px solid #333333;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-outline-large:hover {
    border-color: #FF4500;
    color: #FF4500;
}

.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    background-color: transparent;
    color: #FF4500;
    font-weight: 600;
    border: 2px solid #FF4500;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: #FF4500;
    color: white;
}

.btn-light-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: white;
    color: #FF4500;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-light-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-outline-light-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    color: white;
    font-weight: 600;
    border: 2px solid white;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-outline-light-large:hover {
    background-color: white;
    color: #FF4500;
}

.btn-text {
    display: inline-flex;
    align-items: center;
    color: #FF4500;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-text:hover {
    color: #E03E00;
}

.btn-outline-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    background-color: transparent;
    color: #FF4500;
    font-weight: 500;
    font-size: 0.875rem;
    border: 1px solid #FF4500;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.btn-outline-small:hover {
    background-color: #FF4500;
    color: white;
}

/* Badge Styles */
.badge-primary {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background-color: rgba(255, 69, 0, 0.1);
    color: #FF4500;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-secondary {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background-color: rgba(82, 55, 124, 0.1);
    color: #52377c;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-light {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-new {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #FF4500, #52377c);
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(255, 69, 0, 0.1), 0 2px 4px -1px rgba(255, 69, 0, 0.06);
}

/* Feature Card Styles */
.feature-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.feature-card-horizontal {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-card-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    margin-right: 1rem;
}

/* Step Card Styles */
.step-card {
    background-color: white;
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background-color: #FF4500;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    border-radius: 9999px;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(255, 69, 0, 0.2), 0 4px 6px -2px rgba(255, 69, 0, 0.1);
}

/* Story Card Styles */
.story-card {
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
}

.story-bookmark {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: white;
    color: #333333;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.story-bookmark:hover {
    background-color: #FF4500;
    color: white;
}

/* Benefit Item Styles */
.benefit-item {
    display: flex;
    align-items: flex-start;
    background-color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.benefit-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    margin-right: 1rem;
}

/* Social Icon Styles */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #FF4500;
    transform: translateY(-3px);
}

/* Newsletter Styles */
.newsletter-input {
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    width: 100%;
    transition: all 0.3s ease;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-input:focus {
    outline: none;
    border-color: #FF4500;
    background-color: rgba(255, 255, 255, 0.15);
}

.newsletter-button {
    padding: 0.75rem 1rem;
    background-color: #FF4500;
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.newsletter-button:hover {
    background-color: #E03E00;
}

/* Form Styles */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #FF4500;
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.1);
}

.form-input::placeholder {
    color: #9CA3AF;
}

/* Traveler Category Card Styles */
.traveler-category-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 2px solid #E5E7EB;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.traveler-category-card:hover {
    border-color: #FF4500;
}

.traveler-category-card.selected {
    border-color: #FF4500;
    background-color: rgba(255, 69, 0, 0.05);
}

.category-check {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: 2px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.3s ease;
}

.traveler-category-card.selected .category-check {
    background-color: #FF4500;
    border-color: #FF4500;
    color: white;
}

/* Password Strength Meter */
.password-strength-meter {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.strength-segment {
    height: 0.25rem;
    flex: 1;
    background-color: #E5E7EB;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.strength-segment.weak {
    background-color: #EF4444;
}

.strength-segment.medium {
    background-color: #F59E0B;
}

.strength-segment.strong {
    background-color: #10B981;
}

.strength-segment.very-strong {
    background-color: #047857;
}

/* Multi-step Form Styles */
.step {
    display: none;
}

.step.active {
    display: block;
}

/* Social Login Button Styles */
.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #4B5563;
    transition: all 0.3s ease;
}

.social-login-btn:hover {
    background-color: #F3F4F6;
    border-color: #D1D5DB;
}

/* Ads Slider Styles */
.ads-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
}

.ads-slider-track {
    display: flex;
    transition: transform 0.5s ease;
}

.slider-dot {
    transition: all 0.3s ease;
}

.slider-dot.active {
    background-color: #FF4500;
}

/* Travel-themed Decorative Elements */
.travel-icon-bg {
    position: absolute;
    opacity: 0.05;
    z-index: -1;
}

.travel-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF4500' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: -1;
}

.world-map-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23FF4500' fill-opacity='0.05' d='M11.1,44.7c0.6-1.2,1.2-2.4,1.9-3.5c0.7-1.1,1.4-2.2,2.2-3.3c0.8-1.1,1.6-2.1,2.5-3.1c0.9-1,1.8-2,2.8-2.9 c1-0.9,2-1.8,3-2.6c1.1-0.8,2.2-1.6,3.3-2.3c1.1-0.7,2.3-1.4,3.5-2c1.2-0.6,2.4-1.2,3.7-1.7c1.3-0.5,2.5-0.9,3.8-1.3 c1.3-0.4,2.6-0.7,3.9-0.9c1.3-0.2,2.7-0.4,4-0.5c1.4-0.1,2.7-0.1,4.1-0.1c1.4,0,2.7,0.1,4.1,0.2c1.3,0.1,2.7,0.3,4,0.6 c1.3,0.3,2.6,0.6,3.9,1c1.3,0.4,2.5,0.8,3.7,1.3c1.2,0.5,2.4,1.1,3.5,1.7c1.1,0.6,2.3,1.3,3.3,2c1.1,0.7,2.1,1.5,3.1,2.3 c1,0.8,1.9,1.7,2.8,2.6c0.9,0.9,1.7,1.9,2.5,2.9c0.8,1,1.5,2.1,2.2,3.2c0.7,1.1,1.3,2.2,1.9,3.4c0.6,1.2,1.1,2.3,1.5,3.5 c0.4,1.2,0.8,2.4,1.1,3.7c0.3,1.2,0.6,2.5,0.8,3.8c0.2,1.3,0.3,2.6,0.4,3.9c0.1,1.3,0.1,2.6,0,3.9c0,1.3-0.1,2.6-0.3,3.9 c-0.2,1.3-0.4,2.6-0.7,3.8c-0.3,1.3-0.7,2.5-1.1,3.7c-0.4,1.2-0.9,2.4-1.5,3.5c-0.5,1.2-1.1,2.3-1.8,3.4c-0.7,1.1-1.4,2.2-2.1,3.2 c-0.8,1-1.6,2-2.4,3c-0.9,0.9-1.8,1.9-2.7,2.7c-1,0.9-1.9,1.7-3,2.5c-1,0.8-2.1,1.5-3.2,2.2c-1.1,0.7-2.2,1.3-3.4,1.9 c-1.2,0.6-2.4,1.1-3.6,1.6c-1.2,0.5-2.5,0.9-3.7,1.2c-1.3,0.4-2.6,0.6-3.9,0.9c-1.3,0.2-2.6,0.4-4,0.5c-1.3,0.1-2.7,0.1-4,0.1 c-1.4,0-2.7-0.1-4-0.2c-1.3-0.1-2.7-0.3-4-0.6c-1.3-0.3-2.6-0.6-3.9-1c-1.3-0.4-2.5-0.8-3.7-1.3c-1.2-0.5-2.4-1.1-3.5-1.7 c-1.1-0.6-2.2-1.3-3.3-2c-1.1-0.7-2.1-1.5-3.1-2.3c-1-0.8-1.9-1.7-2.8-2.6c-0.9-0.9-1.7-1.9-2.5-2.9c-0.8-1-1.5-2.1-2.2-3.2 c-0.7-1.1-1.3-2.2-1.9-3.4c-0.6-1.2-1.1-2.3-1.5-3.5c-0.4-1.2-0.8-2.4-1.1-3.7c-0.3-1.2-0.6-2.5-0.8-3.8c-0.2-1.3-0.3-2.6-0.4-3.9 c-0.1-1.3-0.1-2.6,0-3.9c0-1.3,0.1-2.6,0.3-3.9c0.2-1.3,0.4-2.6,0.7-3.8c0.3-1.3,0.7-2.5,1.1-3.7C10,47.1,10.5,45.9,11.1,44.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    z-index: -1;
}

/* Travel-themed Form Elements */
.places-tag {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 69, 0, 0.1);
    color: #FF4500;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.places-tag button {
    margin-left: 0.5rem;
    color: #FF4500;
}

/* Enhanced Travel-themed Elements */
.destination-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.destination-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.destination-card img {
    transition: transform 0.5s ease;
}

.destination-card:hover img {
    transform: scale(1.05);
}

.destination-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: white;
}

/* .destination-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: rgba(255, 69, 0, 0.9);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;69,0,0.9);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  } */

.travel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255, 69, 0, 0.1);
    color: #FF4500;
    border-radius: 0.75rem;
    margin-right: 0.75rem;
}

/* Animated Elements */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Travel-themed Decorations */
.compass-decoration {
    position: absolute;
    width: 300px;
    height: 300px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23FF4500' stroke-width='1' stroke-opacity='0.1'/%3E%3Cpath d='M50,5 L50,15 M50,85 L50,95 M5,50 L15,50 M85,50 L95,50' stroke='%23FF4500' stroke-width='1' stroke-opacity='0.1'/%3E%3Cpath d='M50,20 L53,50 L50,80 L47,50 Z' fill='%23FF4500' fill-opacity='0.1' transform='rotate(45 50 50)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    z-index: -1;
}

.plane-decoration {
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF4500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    z-index: -1;
    animation: flying 20s linear infinite;
}

@keyframes flying {
    0% {
        transform: translate(-100px, 100px) rotate(45deg);
    }

    100% {
        transform: translate(calc(100% + 100px), calc(-100% - 100px)) rotate(45deg);
    }
}

/* Enhanced Ads Section */
.travel-deal-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #FF4500, #52377c);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

.price-tag {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 69, 0, 0.1);
    color: #FF4500;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

.price-tag-old {
    text-decoration: line-through;
    color: #9CA3AF;
    margin-right: 0.5rem;
}