/* Contact Page Specific Styles */
.contact-form-container {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.contact-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.contact-info-container {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.contact-info-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.contact-method-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.contact-method-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.contact-icon {
    color: var(--color-primary);
    font-size: var(--text-lg);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.contact-details {
    flex: 1;
}

.contact-details strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.location-card {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}

.location-placeholder {
    background: color-mix(in oklch, var(--color-surface), var(--color-primary-light) 10%);
    height: 200px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.location-icon {
    font-size: var(--text-4xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.location-detail {
    text-align: center;
    padding: var(--spacing-md);
}

.location-detail h4 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}