Uses !important to override default Fluent Form styles. ════════════════════════════════════════════════════════════ */ /* ── Field labels ────────────────────────────────────────── */ .ptpc-card .ff-el-group label, .ptpc-card .fluentform label, .ptpc-card .ff-el-input--label label { font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--primary) !important; margin-bottom: 6px !important; display: block !important; } /* ── Text inputs, textareas, selects ─────────────────────── */ .ptpc-card .ff-el-group input[type="text"], .ptpc-card .ff-el-group input[type="email"], .ptpc-card .ff-el-group input[type="tel"], .ptpc-card .ff-el-group input[type="number"], .ptpc-card .ff-el-group input[type="url"], .ptpc-card .ff-el-group textarea, .ptpc-card .ff-el-group select, .ptpc-card .fluentform input[type="text"], .ptpc-card .fluentform input[type="email"], .ptpc-card .fluentform input[type="tel"], .ptpc-card .fluentform input[type="number"], .ptpc-card .fluentform textarea, .ptpc-card .fluentform select { width: 100% !important; font-family: var(--font-body) !important; font-size: 13.5px !important; color: var(--text) !important; background: var(--gray-50) !important; border: 1.5px solid rgba(0,48,73,0.16) !important; border-radius: var(--rad) !important; padding: 11px 14px !important; line-height: 1.5 !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.14s ease !important; outline: none !important; box-shadow: none !important; } .ptpc-card .ff-el-group input:focus, .ptpc-card .ff-el-group textarea:focus, .ptpc-card .ff-el-group select:focus, .ptpc-card .fluentform input:focus, .ptpc-card .fluentform textarea:focus, .ptpc-card .fluentform select:focus { border-color: var(--secondary) !important; background: var(--white) !important; box-shadow: 0 0 0 3px rgba(247,127,0,0.12) !important; } .ptpc-card .ff-el-group textarea, .ptpc-card .fluentform textarea { min-height: 120px !important; resize: vertical !important; } /* ── Field groups / spacing ──────────────────────────────── */ .ptpc-card .ff-el-group, .ptpc-card .fluentform .ff-el-group { margin-bottom: 20px !important; } .ptpc-card .ff-el-group:last-of-type { margin-bottom: 0 !important; } /* ── Submit button ───────────────────────────────────────── */ .ptpc-card .ff-btn-submit, .ptpc-card .fluentform .ff-btn-submit, .ptpc-card button[type="submit"], .ptpc-card input[type="submit"] { font-family: var(--font-display) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; color: var(--white) !important; background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%) !important; border: none !important; border-radius: 50px !important; padding: 13px 36px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: transform 0.20s cubic-bezier(.22,.68,0,1.2), box-shadow 0.20s ease, filter 0.16s ease !important; box-shadow: 0 4px 16px rgba(247,127,0,0.30) !important; position: relative !important; overflow: hidden !important; } .ptpc-card .ff-btn-submit:hover, .ptpc-card .fluentform .ff-btn-submit:hover, .ptpc-card button[type="submit"]:hover, .ptpc-card input[type="submit"]:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(247,127,0,0.38) !important; filter: brightness(1.05) !important; } .ptpc-card .ff-btn-submit:active, .ptpc-card button[type="submit"]:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(247,127,0,0.22) !important; } /* ── Submit button wrapper — center the button ───────────── */ .ptpc-card .ff_submit_btn_container, .ptpc-card .ff-el-group.ff-el-is-fullwidth.ff_submit_btn_container { text-align: center !important; margin-top: 24px !important; } /* ── Error messages ──────────────────────────────────────── */ .ptpc-card .error.text-danger, .ptpc-card .ff-el-group .error { font-size: 12px !important; color: #c62828 !important; margin-top: 5px !important; display: block !important; } /* ── Success message ─────────────────────────────────────── */ .ptpc-card .ff-message-success, .ptpc-card .fluentform .ff-message-success { font-family: var(--font-body) !important; font-size: 14px !important; color: var(--success-dark) !important; background: var(--success-bg) !important; border: 1px solid var(--success-border) !important; border-radius: var(--rad) !important; padding: 14px 18px !important; margin-top: 16px !important; } /* ── Placeholder text ────────────────────────────────────── */ .ptpc-card .ff-el-group input::placeholder, .ptpc-card .ff-el-group textarea::placeholder, .ptpc-card .fluentform input::placeholder, .ptpc-card .fluentform textarea::placeholder { color: rgba(0,48,73,0.35) !important; font-size: 13px !important; } /* ── Radio / checkbox labels ─────────────────────────────── */ .ptpc-card .ff-el-group .ff-checkbox-group label, .ptpc-card .ff-el-group .ff-radio-group label { font-weight: 500 !important; color: var(--text-mid) !important; font-size: 13px !important; } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .ptpc-hero { padding: 40px 16px 50px; } .ptpc-hero-h1 { font-size: 26px; } .ptpc-hero-sub { font-size: 13.5px; } .ptpc-main { padding: 30px 14px 56px; } .ptpc-card { padding: 24px 20px 22px; } .ptpc-card .ff-btn-submit, .ptpc-card button[type="submit"] { width: 100% !important; justify-content: center !important; } }