/* Explain: Styles for tech cards, floating buttons, and status messages. - */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tech-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}

.tech-card:hover {
    box-shadow: var(--shadow-card);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    transform: translateY(-4px);
}

.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 1.5rem;
}

.icon-box.accent {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
}

.floating-contact-open {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 950;
    display: none;
    box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.floating-contact-open.is-visible {
    display: inline-flex;
}

.callback-status.success {
    display: block;
    border: 1px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--text-color);
}

.callback-status.error {
    display: block;
    border: 1px solid color-mix(in srgb, red 50%, transparent);
    background: color-mix(in srgb, red 10%, transparent);
    color: var(--text-color);
}

#packages,
#addons,
#safety,
#gallery,
#reviews,
#faq,
#booking {
    scroll-margin-top: 6rem;
}

@media (max-width: 640px) {
    .floating-contact-open {
        display: none !important;
    }
}