/* ==========================================
   PYGIT Contact Page Styles
   ========================================== */

.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-12); margin-bottom: var(--space-16); }

/* Info Cards */
.contact-info-cards { display: flex; flex-direction: column; gap: var(--space-4); }

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--c-bg-light);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.contact-info-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-info-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-light);
    color: var(--c-primary);
    border-radius: var(--radius);
}

.contact-info-card h4 { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: var(--space-1); }
.contact-info-card p { font-size: var(--fs-base); color: var(--c-text-secondary); }
.contact-info-card a { color: var(--c-primary); font-weight: var(--fw-semibold); }

/* Form Wrapper - Enhanced */
.contact-form-wrapper {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.contact-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%);
}

.contact-form-wrapper h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-2); color: var(--c-text); }
.contact-form-wrapper > p { font-size: var(--fs-base); color: var(--c-text-secondary); margin-bottom: var(--space-6); line-height: var(--lh-relaxed); }

/* Form Grid */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-group { margin-bottom: var(--space-5); position: relative; }
.form-group--full { grid-column: 1 / -1; }

/* Floating Label Styles */
.form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-secondary);
    margin-bottom: var(--space-2);
    transition: all var(--transition-fast);
    pointer-events: none;
}

.form-group:focus-within .form-label,
.form-group.has-value .form-label {
    color: var(--c-primary);
    transform: translateY(-2px);
}

/* Input Wrapper for Icons */
.form-input-wrapper { position: relative; }
.form-input-wrapper .input-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    font-size: var(--fs-lg);
    pointer-events: none;
    transition: all var(--transition-fast);
}
.form-group:focus-within .input-icon { color: var(--c-primary); }
.form-group:focus-within textarea ~ .input-icon {
    top: var(--space-4);
    transform: translateY(0);
}
.form-input-wrapper .form-input,
.form-input-wrapper .form-textarea { padding-left: var(--space-10); }

/* Form Inputs */
.form-input,
.form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder { 
    color: var(--c-text-muted); 
    transition: opacity var(--transition-fast);
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder { opacity: 0.5; }

.form-input:hover,
.form-textarea:hover { border-color: var(--c-text-muted); }

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px var(--c-primary-light);
    background: var(--c-bg);
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) { border-color: var(--c-error); }

.form-input.is-invalid,
.form-textarea.is-invalid { border-color: var(--c-error); }

.form-textarea { min-height: 140px; resize: vertical; line-height: var(--lh-relaxed); }

/* Error & Hint Messages */
.form-error {
    display: none;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--c-error);
    align-items: center;
    gap: var(--space-1);
    animation: shakeIn 0.3s ease;
}
.form-error.visible { display: inline-flex; }
.form-error::before { content: '⚠'; font-size: var(--fs-xs); }

.form-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

@keyframes shakeIn {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Floating Label Effect */
.form-group { position: relative; }

/* Character Counter for Textarea */
.char-counter {
    text-align: right;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: var(--space-1);
    transition: color var(--transition-fast);
}
.char-counter.warning { color: var(--c-accent); }
.char-counter.exceeded { color: var(--c-error); }

/* Form Actions */
.form-actions { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; width: 100%; }

.form-submit {
    width: 100%;
    max-width: 320px;
    padding: var(--space-4) var(--space-8);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    position: relative;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.form-submit:disabled { opacity: 0.7; cursor: not-allowed; }

.btn-loader {
    display: none;
    width: 22px;
    height: 22px;
    border: 2.5px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.form-submit.loading .btn-text { opacity: 0; }
.form-submit.loading .btn-loader { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.form-privacy {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    text-align: center;
    width: 100%;
}
.form-privacy a { color: var(--c-primary); text-decoration: underline; }

/* Form Status Messages */
.form-status {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    animation: slideIn 0.3s ease;
    width: 100%;
}
.form-status.success {
    background: #ECFDF5;
    border: 1px solid #10B981;
    color: #065F46;
}
.form-status.error {
    background: #FEF2F2;
    border: 1px solid #EF4444;
    color: #991B1B;
}
.form-status::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.form-status.success::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.form-status.error::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/svg%3E"); }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Map */
.map-section { margin-top: var(--space-8); }
.map-section h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-4); }
.map-wrapper { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-border); }
.map-wrapper iframe { width: 100%; height: 400px; border: 0; display: block; }
.map-wrapper:hover iframe { filter: brightness(0.98); }

/* Responsive */
@media (max-width: 768px) {
    .contact-layout { grid-template-columns: 1fr; gap: var(--space-8); }
    .contact-form-wrapper { padding: var(--space-6); }
    .form-row { grid-template-columns: 1fr; }
    .form-submit { max-width: 100%; }
}

@media (max-width: 480px) {
    .contact-form-wrapper { padding: var(--space-5); }
    .form-submit { padding: var(--space-3) var(--space-6); font-size: var(--fs-base); }
    .form-input-wrapper .form-input,
    .form-input-wrapper .form-textarea { padding-left: var(--space-4); }
    .form-input-wrapper .input-icon { display: none; }
}