/* Berlin Clean Pro - Form Styles (v2)
   Extracted from index.html on 2026-07-18
   Self-contained with var() fallbacks (works without :root variables defined).

   CSS variables used: --gold-primary, --gold-secondary, --text-primary,
   --text-secondary, --text-muted, --bg-primary, --bg-secondary, --bg-tertiary, --teal.
   All have fallback values below. If the host page defines these, host wins.
   If not, the fallback is used.

   Loaded on all 16 pages via <link rel="stylesheet" href="assets/forms.css">
*/

/* ===== Form wrapper ===== */
.contact-form-wrap {
    padding: 1.5rem;
}

/* ===== Form header (above the form) ===== */
.contact-form-wrap {
    background: rgba(26, 26, 26, 0.7); border: 1px solid rgba(212, 175, 55, 0.12); border-radius: 1.5rem; padding: 3rem; backdrop-filter: blur(10px);
}

.contact-form-header {
    text-align: center; margin-bottom: 2.5rem;
}

.contact-form-header h3 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em;
}

.contact-form-header p {
    color: var(--text-secondary, #B0B0B0); font-size: 0.9rem;
}

.contact-form-wrap {
    padding: 2rem;
}

/* ===== Form group structure ===== */
.form-group {
    position: relative; margin-bottom: 1.75rem;
}

.form-group {
    position: relative; margin-bottom: 1.5rem;
}

/* ===== Form inputs (input, textarea, select) ===== */
.form-input, .form-textarea, .form-select {
    font-size: 16px;
}

.form-input, .form-textarea, .form-select {
    width: 100%; background: rgba(15, 15, 15, 0.9); border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 12px; padding: 1.15rem 1.25rem 0.75rem; color: var(--text-primary, #F5F5F5); font-family: 'Outfit', sans-serif; font-size: 0.95rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); appearance: none; -webkit-appearance: none;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none; border-color: var(--gold-primary, #D4AF37); background: rgba(15, 15, 15, 1); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15), 0 0 25px rgba(212, 175, 55, 0.1);
}

.form-textarea {
    resize: vertical; min-height: 130px;
}

.form-select {
    cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 3rem;
}

/* ===== Form labels (floating labels) ===== */
.form-label {
    position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--text-muted, #6B6B6B); font-size: 0.95rem; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; padding: 0 0.25rem;
}

.form-textarea ~ .form-label {
    top: 1.4rem; transform: none;
}

.form-input:focus ~ .form-label, .form-input:not(:placeholder-shown) ~ .form-label, .form-textarea:focus ~ .form-label, .form-textarea:not(:placeholder-shown) ~ .form-label, .form-select:focus ~ .form-label, .form-select:not([value=""]) ~ .form-label {
    top: 0; transform: translateY(-50%); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-primary, #D4AF37); background: var(--bg-tertiary, #1A1A1A);
}

.form-textarea:focus ~ .form-label, .form-textarea:not(:placeholder-shown) ~ .form-label {
    transform: none; top: -0.6rem;
}

/* ===== Submit button (shimmer effect) ===== */
.btn-shimmer {
    width: 100%; padding: 1.15rem 2rem; background: linear-gradient(135deg, var(--gold-primary, #D4AF37) 0%, var(--gold-secondary, #B8860B) 100%); border: none; border-radius: 0.75rem; color: var(--bg-primary, #050505); font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 4px 20px rgba(212, 175, 55, 0.25);
}

.btn-shimmer::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transform: skewX(-20deg); animation: shimmerSlide 2.5s ease-in-out infinite;
}

.btn-shimmer:active {
    transform: translateY(-1px);
}

/* ===== Form success state ===== */
.form-success {
    display: none; text-align: center; padding: 2rem;
}

.form-success.show {
    display: block;
}

.form-success-icon {
    width: 64px; height: 64px; margin: 0 auto 1.5rem; background: rgba(34, 197, 94, 0.1); border: 2px solid #22c55e; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #22c55e; animation: successPop 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-success-icon svg {
    width: 32px; height: 32px;
}

.form-success p {
    color: var(--text-secondary, #B0B0B0); font-size: 0.95rem;
}

/* ===== Form error state ===== */
.form-error-msg {
    color: #FCA5A5; font-size: 0.75rem; margin-top: 0.25rem; display: block;
}

/* ===== Trust badges under submit ===== */
.form-trust-badges {
    gap: 0.75rem;
}

.form-trust-item {
    font-size: 0.7rem;
}

.form-trust-badges {
    display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; flex-wrap: wrap;
}

.form-trust-item {
    display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-secondary, #B0B0B0);
}

.form-trust-item svg {
    width: 16px; height: 16px; fill: var(--gold-primary, #D4AF37);
}

/* ===== Other form rules ===== */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 1rem 1.25rem; padding-top: 1.75rem; background: var(--bg-tertiary, #1A1A1A); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 4px; color: var(--text-primary, #F5F5F5); font-size: 1rem; font-family: inherit; transition: all 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--gold-primary, #D4AF37); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.form-group label {
    position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--text-muted, #6B6B6B); font-size: 0.95rem; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; padding: 0 0.25rem;
}

.form-group textarea ~ label {
    top: 1.5rem; transform: none;
}

.form-group input:focus ~ label, .form-group input:not(:placeholder-shown) ~ label, .form-group textarea:focus ~ label, .form-group textarea:not(:placeholder-shown) ~ label {
    top: 0; transform: translateY(-50%); font-size: 0.75rem; color: var(--gold-primary, #D4AF37); background: var(--bg-secondary, #0D0D0D);
}

.form-group input::placeholder, .form-group textarea::placeholder {
    color: transparent;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: var(--gold-primary, #D4AF37); box-shadow: 0 0 0 1px var(--gold-primary, #D4AF37), 0 0 20px rgba(212, 175, 55, 0.2);
}

.form-group.error input, .form-group.error textarea {
    border-color: #e74c3c; animation: shake 0.4s ease;
}

.form-group.valid input::after, .form-group.valid textarea::after {
    content: '✓'; color: var(--teal, #00B4D8);
}