/* Prevents layout shift when scrollbar appears */
html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    font-family: 'Inter', sans-serif;
}

.glow-button {
    box-shadow: 0 4px 20px 0 rgba(37, 99, 235, 0.4);
    transition: all 0.3s ease-in-out;
}

.glow-button:hover {
    box-shadow: 0 8px 30px 0 rgba(37, 99, 235, 0.5);
    transform: translateY(-3px);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.faq-question[open] summary svg {
    transform: rotate(180deg);
}

.pricing-card {
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

[x-cloak] {
    display: none !important;
}

/* Testimonial Scroller */
.scroller {
    max-width: 100%;
    -ms-overflow-style: none;
    /* for Internet Explorer, Edge */
    scrollbar-width: none;
    /* for Firefox */
    overflow-x: auto;
    /* Allows for manual scrolling */
    cursor: grab;
}

.scroller:active {
    cursor: grabbing;
}

.scroller::-webkit-scrollbar {
    display: none;
    /* for Chrome, Safari, and Opera */
}

.scroller__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.75rem));
    }
}

/* Apply the animation when the data-animated attribute is true */
.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll 40s linear infinite;
}

/* Add a pause effect on hover for better usability */
.scroller:hover .scroller__inner {
    animation-play-state: paused;
}

/* Custom Form Styles */
.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    width: 26px;
    margin: auto;
}

.calendar-day:not(.disabled):hover {
    background-color: #dbeafe;
    border-radius: 50%;
}

.time-slot:not(.selected):hover {
    background-color: #eff6ff;
    border-color: #93c5fd;
}

.selected-date,
.selected-time {
    background-color: #2563eb !important;
    color: white !important;
}

.selected-date {
    border-radius: 50%;
}

.selected-time {
    border-color: #2563eb !important;
}

.disabled {
    color: #d1d5db;
    /* gray-300 */
    cursor: not-allowed;
    text-decoration: none;
    background-color: #f3f4f6;
    /* gray-100 */
    border-radius: 50%;
    position: relative;
}

.disabled .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: #1f2937;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.disabled:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.popup-enter {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.popup-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.timezone-option:hover {
    background-color: #eff6ff;
}

.popup-view {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    will-change: opacity, transform;
    /* Performance optimization */
}

/* A view that is completely hidden and off-screen */
.view-hidden {
    opacity: 0;
    transform: translateX(15px);
    /* Start slightly to the right */
    position: absolute;
    /* Take it out of the document flow */
    pointer-events: none;
    /* Not interactive when hidden */
    width: 100%;
}

/* A view that is currently visible and on-screen */
.view-visible {
    opacity: 1;
    transform: translateX(0);
    position: static;
    /* Put it back in the normal document flow */
}

/* A view that is in the process of exiting to the left */
.view-exiting {
    opacity: 0;
    transform: translateX(-15px);
    /* Animate it out to the left */
    position: absolute;
    /* Take it out of the flow as it exits */
    width: 100%;
}

/* Fix for mobile scrolling on timezone list */
.mobile-scroll {
    -webkit-overflow-scrolling: touch;
}

/* Styles from Thank You Page */
.pattern-bg {
    background-image: radial-gradient(#e2e8f0 0.5px, transparent 0.5px);
    background-size: 20px 20px;
}

.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-h-9 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Comparison Table Styles */
.comparison-table .plan-highlight {
    background-color: #eff6ff; /* brand-blue-50 */
}
.comparison-table th, .comparison-table td {
    padding: 1rem 1.25rem;
    transition: background-color 0.2s ease-in-out;
}
.comparison-table thead th {
     border-bottom: 2px solid #e5e7eb; /* gray-200 */
     position: sticky;
     top: 0;
     background-color: #ffffff;
}
 .comparison-table tbody tr:not(.category-row) {
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}
.comparison-table .category-row td {
    background-color: #f9fafb; /* gray-50 */
    font-weight: 700;
    color: #1e3a8a; /* brand-blue-900 */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}