/* =============================================
   CONTACT.CSS
   Brand: #fe6e00 orange, #1a1a2e navy
   ============================================= */

.page-hero { background:#1a1a2e; padding:4rem 1.5rem 3rem; text-align:center; border-bottom:3px solid #fe6e00; }
.page-hero-container { max-width:700px; margin:0 auto; }
.page-hero-label { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fe6e00; margin-bottom:0.75rem; }
.page-hero-title { font-size:clamp(2rem,5vw,3rem); font-weight:700; color:#ffffff; margin-bottom:1rem; line-height:1.2; }
.page-hero-subtitle { font-size:1.05rem; color:#b0b6c8; line-height:1.75; max-width:560px; margin:0 auto; }

/* ---- Contact Layout ---- */
.contact-section { background:#ffffff; padding:5rem 1.5rem; }
.contact-container { max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start; }

/* ---- Left: Info ---- */
.contact-info-title { font-size:1.4rem; font-weight:700; color:#1a1a2e; margin-bottom:0.75rem; }
.contact-info-desc { font-size:0.9rem; color:#555; line-height:1.7; margin-bottom:2rem; }
.contact-info-items { display:flex; flex-direction:column; gap:1.25rem; margin-bottom:2rem; }
.contact-info-item { display:flex; align-items:flex-start; gap:1rem; }
.contact-info-icon { width:40px; height:40px; background:rgba(254,110,0,0.08); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-label { font-size:0.75rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.2rem; }
.contact-info-value { font-size:0.9rem; color:#1a1a2e; font-weight:500; text-decoration:none; transition:color 0.2s; display:block; }
.contact-info-value:hover, .contact-info-value:focus-visible { color:#fe6e00; text-decoration:underline; }
.contact-address { font-style:normal; line-height:1.65; }

/* Social */
.contact-social-label { font-size:0.78rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.75rem; }
.contact-social-links { display:flex; gap:0.75rem; flex-wrap:wrap; }
.contact-social-btn { display:inline-flex; align-items:center; gap:0.4rem; background:#f7f7fb; border:1px solid #e8e8f0; color:#1a1a2e; padding:0.4rem 0.9rem; border-radius:6px; font-size:0.82rem; font-weight:600; text-decoration:none; transition:all 0.2s; }
.contact-social-btn:hover, .contact-social-btn:focus-visible { border-color:#fe6e00; color:#fe6e00; background:#fff8f2; }

/* ---- Right: Form ---- */
.contact-form-wrap { background:#f7f7fb; border-radius:14px; padding:2.5rem; }
.contact-form-title { font-size:1.4rem; font-weight:700; color:#1a1a2e; margin-bottom:0.4rem; }
.contact-form-subtitle { font-size:0.88rem; color:#666; line-height:1.6; margin-bottom:1.75rem; }

/* Alerts */
.form-success { background:#dcfce7; border:1px solid #86efac; color:#15803d; padding:1rem 1.25rem; border-radius:8px; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.75rem; font-size:0.9rem; font-weight:500; }
.form-errors { background:#fee2e2; border:1px solid #fca5a5; color:#b91c1c; padding:1rem 1.25rem; border-radius:8px; margin-bottom:1.5rem; font-size:0.88rem; }
.form-errors ul { margin:0.5rem 0 0 1.25rem; padding:0; }
.form-errors li { margin-bottom:0.25rem; }

/* Form fields */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:1.25rem; }
.form-label { font-size:0.85rem; font-weight:600; color:#1a1a2e; }
.required { color:#e53e3e; font-weight:700; }
.form-input { background:#ffffff; border:1.5px solid #e0e0ec; border-radius:8px; padding:0.7rem 1rem; font-size:0.9rem; color:#1a1a2e; font-family:inherit; transition:border-color 0.2s, box-shadow 0.2s; width:100%; }
.form-input:hover { border-color:#c0c0d0; }
.form-input:focus { outline:none; border-color:#fe6e00; box-shadow:0 0 0 3px rgba(254,110,0,0.15); }
.form-input::placeholder { color:#aaa; }
.form-select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.form-textarea { resize:vertical; min-height:130px; line-height:1.6; }
.input-error { border-color:#e53e3e !important; box-shadow:0 0 0 3px rgba(229,62,62,0.12) !important; }
.field-error { font-size:0.78rem; color:#e53e3e; font-weight:500; margin-top:0.1rem; }
.field-hint { font-size:0.78rem; color:#888; }

/* Checkbox */
.form-checkbox-group { margin-bottom:1.5rem; }
.checkbox-label { display:flex; align-items:flex-start; gap:0.75rem; cursor:pointer; }
.checkbox-input { position:absolute; opacity:0; width:0; height:0; }
.checkbox-custom { width:20px; height:20px; min-width:20px; border:2px solid #c0c0d0; border-radius:4px; display:flex; align-items:center; justify-content:center; transition:all 0.2s; background:#fff; margin-top:1px; }
.checkbox-input:checked ~ .checkbox-custom { background:#fe6e00; border-color:#fe6e00; }
.checkbox-input:checked ~ .checkbox-custom::after { content:'✓'; color:#fff; font-size:12px; font-weight:700; }
.checkbox-input:focus-visible ~ .checkbox-custom { outline:3px solid #fe6e00; outline-offset:2px; }
.checkbox-text { font-size:0.85rem; color:#555; line-height:1.55; }

/* Submit button */
.form-submit { display:inline-flex; align-items:center; justify-content:center; gap:0.6rem; background:#fe6e00; color:#ffffff; border:none; padding:0.85rem 2rem; border-radius:8px; font-size:0.95rem; font-weight:700; cursor:pointer; width:100%; transition:background 0.2s, transform 0.1s; font-family:inherit; }
.form-submit:hover, .form-submit:focus-visible { background:#e56200; transform:translateY(-1px); }
.form-submit:active { transform:translateY(0); }

/* ---- Responsive ---- */
@media (max-width:900px) { .contact-container { grid-template-columns:1fr; gap:2.5rem; } }
@media (max-width:560px) { .form-row { grid-template-columns:1fr; } .contact-form-wrap { padding:1.5rem; } }