/*
 * sf-contact-details — generic, brand-agnostic contact section styles.
 *
 * Brand values from the canonical contact-details-salesfision block are lifted
 * into CSS custom properties (original hex preserved as defaults); override
 * these per-site instead of editing the rules. Class names are kept identical
 * to the canonical so the existing front-end CSS/JS (submitContactForm) binds.
 */
[data-sf-block="sf-contact-details"] {
  --sf-contact-accent: #e63946;
  --sf-contact-accent-hover: #c0222e;
  --sf-contact-bg: #0d0d0d;
  --sf-contact-card-bg: #161616;
  --sf-contact-text: #fff;
  --sf-contact-muted: #888;
  --sf-contact-success: #46b450;
}

/* ── CONTACT BODY ── */
[data-sf-block="sf-contact-details"] .contact-section { background: var(--sf-contact-bg); padding: 100px 40px; }
[data-sf-block="sf-contact-details"] .contact-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
@media (max-width: 900px) { [data-sf-block="sf-contact-details"] .contact-inner { grid-template-columns: 1fr; } }

/* ── CONTACT INFO ── */
[data-sf-block="sf-contact-details"] .contact-info h2 { font-size: 36px; font-weight: 800; color: var(--sf-contact-text); margin-bottom: 16px; line-height: 1.15; }
[data-sf-block="sf-contact-details"] .contact-info > p { font-size: 14px; color: var(--sf-contact-muted); line-height: 1.7; margin-bottom: 48px; }
[data-sf-block="sf-contact-details"] .contact-detail { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 32px; }
[data-sf-block="sf-contact-details"] .contact-detail-icon { width: 48px; height: 48px; background: rgba(230,57,70,0.1); border: 1px solid rgba(230,57,70,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
[data-sf-block="sf-contact-details"] .contact-detail-icon svg { width: 20px; height: 20px; fill: var(--sf-contact-accent); }
[data-sf-block="sf-contact-details"] .contact-detail-body h4 { font-size: 13px; font-weight: 700; color: var(--sf-contact-text); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
[data-sf-block="sf-contact-details"] .contact-detail-body p, [data-sf-block="sf-contact-details"] .contact-detail-body a { font-size: 14px; color: var(--sf-contact-muted); display: block; }
[data-sf-block="sf-contact-details"] .contact-detail-body a:hover { color: var(--sf-contact-accent); }

/* ── CONTACT FORM ── */
[data-sf-block="sf-contact-details"] .contact-form { background: var(--sf-contact-card-bg); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 48px 40px; }
[data-sf-block="sf-contact-details"] .contact-form h3 { font-size: 22px; font-weight: 800; color: var(--sf-contact-text); margin-bottom: 32px; }
[data-sf-block="sf-contact-details"] .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { [data-sf-block="sf-contact-details"] .form-row { grid-template-columns: 1fr; } }
[data-sf-block="sf-contact-details"] .form-group { margin-bottom: 20px; }
[data-sf-block="sf-contact-details"] .form-group label { display: block; font-size: 12px; font-weight: 700; color: var(--sf-contact-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
[data-sf-block="sf-contact-details"] .form-group input, [data-sf-block="sf-contact-details"] .form-group textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 14px 16px; font-family: inherit; font-size: 14px; color: var(--sf-contact-text); transition: border-color 0.2s; outline: none; resize: none; }
[data-sf-block="sf-contact-details"] .form-group input::placeholder, [data-sf-block="sf-contact-details"] .form-group textarea::placeholder { color: #555; }
[data-sf-block="sf-contact-details"] .form-group input:focus, [data-sf-block="sf-contact-details"] .form-group textarea:focus { border-color: var(--sf-contact-accent); }
[data-sf-block="sf-contact-details"] .form-group textarea { height: 120px; }
[data-sf-block="sf-contact-details"] .captcha-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
[data-sf-block="sf-contact-details"] .captcha-question { font-size: 14px; color: var(--sf-contact-muted); }
[data-sf-block="sf-contact-details"] .captcha-question strong { color: var(--sf-contact-text); }
[data-sf-block="sf-contact-details"] .captcha-input { width: 80px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 14px; font-family: inherit; font-size: 14px; color: var(--sf-contact-text); outline: none; }
[data-sf-block="sf-contact-details"] .captcha-input:focus { border-color: var(--sf-contact-accent); }
[data-sf-block="sf-contact-details"] .btn-submit { width: 100%; background: var(--sf-contact-accent); color: var(--sf-contact-text); border: none; border-radius: 8px; padding: 16px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: 0.5px; transition: background 0.2s, transform 0.2s; }
[data-sf-block="sf-contact-details"] .btn-submit:hover { background: var(--sf-contact-accent-hover); transform: translateY(-2px); }

/* ── CONTACT FORM SUCCESS (animated thank-you) ── */
[data-sf-block="sf-contact-details"] .contact-success { text-align: center; padding: 36px 16px; animation: sf-success-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-sf-block="sf-contact-details"] .success-check { width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; background: rgba(70,180,80,0.1); border: 1px solid rgba(70,180,80,0.3); display: flex; align-items: center; justify-content: center; animation: sf-check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; }
[data-sf-block="sf-contact-details"] .success-check svg { width: 46px; height: 46px; }
[data-sf-block="sf-contact-details"] .success-check-circle { stroke: var(--sf-contact-success); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: sf-check-circle 0.5s ease-out 0.15s forwards; }
[data-sf-block="sf-contact-details"] .success-check-mark { stroke: var(--sf-contact-success); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sf-check-mark 0.3s ease-out 0.6s forwards; }
[data-sf-block="sf-contact-details"] .contact-success h3 { font-size: 26px; font-weight: 800; color: var(--sf-contact-text); margin: 0 0 10px; opacity: 0; animation: sf-fade-up 0.45s ease-out 0.6s both; }
[data-sf-block="sf-contact-details"] .contact-success p { font-size: 14px; color: var(--sf-contact-muted); max-width: 340px; margin: 0 auto; line-height: 1.6; opacity: 0; animation: sf-fade-up 0.45s ease-out 0.75s both; }
@keyframes sf-success-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes sf-check-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes sf-check-circle { to { stroke-dashoffset: 0; } }
@keyframes sf-check-mark { to { stroke-dashoffset: 0; } }
@keyframes sf-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  [data-sf-block="sf-contact-details"] .contact-success,
  [data-sf-block="sf-contact-details"] .success-check,
  [data-sf-block="sf-contact-details"] .success-check-circle,
  [data-sf-block="sf-contact-details"] .success-check-mark,
  [data-sf-block="sf-contact-details"] .contact-success h3,
  [data-sf-block="sf-contact-details"] .contact-success p { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
}