/* Bela Defects — Form Page styles (hero is in theme hero.css) */

/* ─── CONTACT BAR ─── */
.bela-dfp-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: -24px 0 32px;
    position: relative;
    z-index: 10;
}
.bela-dfp-contact__item {
    background: var(--bela-surface, #fff);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    font-size: 14px;
    line-height: 1.5;
    transition: transform .2s;
}
.bela-dfp-contact__item:hover { transform: translateY(-2px); }
.bela-dfp-contact__icon {
    font-size: 24px;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--bela-bg-alt, #f5f0e8);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bela-dfp-contact__item strong { color: var(--bela-text-primary, #2a2520); font-size: 13px; }
.bela-dfp-contact__item a { color: var(--bela-secondary, #1B3A4B); text-decoration: none; font-weight: 600; }
.bela-dfp-contact__item a:hover { text-decoration: underline; }

/* ─── STEPS ─── */
.bela-dfp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}
.bela-dfp-step {
    text-align: center;
    padding: 20px 12px;
    background: var(--bela-surface, #fff);
    border-radius: 12px;
    border: 1px solid var(--bela-border, #e8e4dc);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bela-dfp-step__num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1B3A4B, #2D5F3E);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.bela-dfp-step strong { font-size: 14px; color: var(--bela-text-primary, #2a2520); }
.bela-dfp-step span:last-child { font-size: 12px; color: var(--bela-text-muted, #8b7d6b); }

/* ─── FORM WRAPPER ─── */
.bela-dfp-form-wrap {
    background: var(--bela-surface, #fff);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid var(--bela-border, #e8e4dc);
    margin-bottom: 32px;
}
.bela-dfp-form-wrap__title {
    font-family: var(--bela-font-heading, serif);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bela-border, #e8e4dc);
    color: var(--bela-text-primary, #2a2520);
}

/* ─── FORM FIELDS (generated by JS) ─── */
.bela-defect-form { max-width: 100%; }
.bela-df__field {
    margin-bottom: 20px;
}
.bela-df__field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bela-text-primary, #2a2520);
    margin-bottom: 6px;
}
.bela-df__input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--bela-border, #d4cfc7);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--bela-text-primary, #2a2520);
    background: var(--bela-surface, #fff);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.bela-df__input:focus {
    outline: none;
    border-color: var(--bela-primary, #1B3A4B);
    box-shadow: 0 0 0 3px rgba(27,58,75,0.1);
}
select.bela-df__input { cursor: pointer; }
textarea.bela-df__input { resize: vertical; min-height: 100px; }

/* ─── MAP IN FORM ─── */
.bela-df__map {
    height: 350px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--bela-border, #d4cfc7) !important;
    margin-bottom: 4px;
    z-index: 1;
}

/* ─── GEOLOCATION ─── */
.bela-df__map-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bela-df__geo-btn {
    padding: 8px 16px;
    border: 1.5px solid var(--bela-border, #d4cfc7);
    border-radius: 8px;
    background: var(--bela-surface, #fff);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    font-weight: 600;
}
.bela-df__geo-btn:hover { background: var(--bela-bg-alt, #f5f0e8); border-color: var(--bela-primary); }
.bela-df__geo-btn:disabled { opacity: .5; cursor: not-allowed; }
.bela-df__geo-status { font-size: 13px; color: var(--bela-text-muted, #8b7d6b); }
.bela-df__coords { font-size: 12px; color: var(--bela-text-muted); font-family: var(--bela-font-mono, monospace); margin-top: 6px; }

/* ─── PHOTO UPLOAD ─── */
.bela-df__photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.bela-df__photo-item {
    position: relative;
    width: 110px; height: 110px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.bela-df__photo-item img { width: 100%; height: 100%; object-fit: cover; }
.bela-df__photo-remove {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.7);
    color: #fff; border: none; border-radius: 50%;
    width: 24px; height: 24px; font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.bela-df__photo-remove:hover { background: #B83A3A; }
.bela-df__photo-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    background: var(--bela-bg-alt, #f5f0e8);
    border: 2px dashed var(--bela-border, #d4cfc7);
    border-radius: 10px;
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    color: var(--bela-text-secondary, #5c5549);
}
.bela-df__photo-add-btn:hover { background: var(--bela-border); border-color: var(--bela-primary); }
.bela-df__photo-status { font-size: 13px; color: var(--bela-text-muted); margin-top: 6px; }

/* ─── GDPR ─── */
.bela-df__field--gdpr {
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--bela-bg-alt, #f9f6f0);
    border-radius: 10px;
    border-left: 4px solid var(--bela-primary, #1B3A4B);
}
.bela-df__gdpr-label {
    font-size: 14px;
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
    line-height: 1.5;
}
.bela-df__gdpr-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.bela-df__gdpr-label a { color: var(--bela-secondary, #1B3A4B); font-weight: 600; }

/* ─── HONEYPOT (invisible to humans) ─── */
.bela-df__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ─── SUBMIT BUTTON ─── */
.bela-btn--lg {
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 16px 40px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
    border: none;
    margin-top: 16px;
}
.bela-btn--primary {
    background: linear-gradient(135deg, #1B3A4B 0%, #2D5F3E 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(27,58,75,0.25);
}
.bela-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(27,58,75,0.35); }
.bela-btn--primary:disabled { opacity: .6; transform: none; cursor: not-allowed; }

/* ─── SUCCESS STATE ─── */
.bela-df__success {
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(135deg, rgba(45,95,62,0.06), rgba(27,58,75,0.06));
    border-radius: 12px;
    border: 1px solid rgba(45,95,62,0.15);
}
.bela-df__success p { font-size: 18px; margin: 0 0 8px; }
.bela-df__ref {
    display: inline-block;
    font-size: 16px;
    margin-top: 12px;
    padding: 12px 20px;
    background: var(--bela-surface, #fff);
    border-radius: 8px;
    font-family: var(--bela-font-mono, monospace);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ─── ERROR STATE ─── */
.bela-df__error {
    padding: 14px 18px;
    background: rgba(184,58,58,0.08);
    border: 1px solid rgba(184,58,58,0.2);
    border-radius: 8px;
    color: #B83A3A;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* ─── ARCHIVE LINK ─── */
.bela-dfp-archive-link {
    text-align: center;
    padding: 24px 0 40px;
}
.bela-btn--outline {
    display: inline-flex; padding: 10px 24px;
    border: 2px solid var(--bela-border, #d4cfc7);
    border-radius: 8px; font-size: 14px; font-weight: 600;
    color: var(--bela-text-secondary); text-decoration: none;
    transition: all .2s;
}
.bela-btn--outline:hover { border-color: var(--bela-primary); color: var(--bela-primary); }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
    .bela-page-hero { padding: 32px 0 36px; }
    .bela-dfp-contact { grid-template-columns: 1fr 1fr; margin-top: -16px; }
    .bela-dfp-steps { grid-template-columns: 1fr 1fr; }
    .bela-dfp-form-wrap { padding: 20px 16px; border-radius: 12px; }
    .bela-df__map { height: 280px !important; }
}
@media (max-width: 480px) {
    .bela-dfp-contact { grid-template-columns: 1fr; }
    .bela-dfp-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
    .bela-dfp-step { padding: 14px 8px; }
    .bela-dfp-form-wrap { padding: 16px 12px; }
}