/* Valori default pentru variabilele de culoare - suprascrise inline din PHP */
:root {
    --culoare: #0F408A;
    --culoare-accent: #c8a84b;
    --culoare-sectiuni: #0F408A;
    --culoare-buton: #0F408A;
    --culoare-text: #1c2333;
}

.bf230-wrap {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Formular 230 – OVP-Digital | Design identic cu 177 */

.bf230-wrap *, .bf230-wrap *::before, .bf230-wrap *::after { box-sizing: border-box; }
.bf230-wrap {
    /* Culorile sunt setate inline din PHP via style="" - nu le hardcoda aici */
    --culoare-l: #e8f0fb; --culoare-p: #f2f6fd;
    --text: var(--culoare-text, #1c2333); --muted: #5a6476; --border: #c8d5e8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--culoare-text, #1c2333); max-width: 900px; width: 100%; margin: 0 auto;
}

/* Hero */
.bf230-wrap .bf230-hero {
    background: linear-gradient(135deg, var(--culoare) 0%, var(--culoare) 60%, var(--culoare) 100%);
    color: #fff; padding: 44px 24px 36px; text-align: center;
    position: relative; overflow: hidden; border-radius: 10px 10px 0 0;
}
.bf230-wrap .bf230-hero-inner { position: relative; max-width: 640px; margin: 0 auto; }
.bf230-wrap .bf230-badge {
    display: inline-block; background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3); color: #d4e4ff;
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 14px;
}
.bf230-wrap .bf230-hero h2 {
    font-size: clamp(1.4rem,4vw,2rem) !important; font-weight: 700 !important;
    line-height: 1.25 !important; margin: 0 0 12px !important;
    color: #fff !important; padding: 0 !important; border: none !important;
}
.bf230-wrap .bf230-hero h2 span { color: var(--culoare-accent, #c8a84b); }
.bf230-wrap .bf230-hero p { font-size: .97rem; color: rgba(255,255,255,.82); line-height: 1.6; margin: 0; }
.bf230-wrap .bf230-hero-info { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.bf230-wrap .bf230-info-item {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px; padding: 7px 14px; font-size: .82rem; color: rgba(255,255,255,.9);
}

/* Body */
.bf230-wrap .bf230-body {
    background: #fff; border: 1px solid var(--border);
    border-top: none; border-radius: 0 0 10px 10px; padding: 24px;
}

/* Alert */
.bf230-wrap .bf230-alert {
    background: rgba(0,0,0,0.04); border-left: 4px solid var(--culoare);
    border-radius: 6px; padding: 12px 16px; margin-bottom: 20px;
    font-size: .92rem; color: var(--culoare); line-height: 1.6;
}

/* Sectiuni — identic cu 177 */
.bf230-wrap .bf230-section {
    background: #fff; border: 1px solid var(--border);
    border-radius: 8px; padding: 20px 20px 16px; margin-bottom: 16px;
}
.bf230-wrap .bf230-section h3 {
    font-size: 14px !important; font-weight: 700 !important;
    color: var(--culoare-sectiuni, #0F408A) !important; margin: 0 0 16px !important;
    padding: 6px 0 6px 12px !important; border: none !important;
    border-left: 4px solid var(--culoare-sectiuni, #0F408A) !important;
    background: rgba(0,0,0,0.04); border-radius: 0 4px 4px 0;
}

/* Grid */
.bf230-wrap .bf230-row { display: grid; gap: 14px; margin-bottom: 14px; }
.bf230-wrap .bf230-row:last-child { margin-bottom: 0; }
.bf230-wrap .bf230-col2  { grid-template-columns: 1fr 1fr; }
.bf230-wrap .bf230-col3  { grid-template-columns: 1fr 1fr 1fr; }
.bf230-wrap .bf230-col4  { grid-template-columns: repeat(4, 1fr); }
.bf230-wrap .bf230-col21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 640px) {
    .bf230-wrap .bf230-col2, .bf230-wrap .bf230-col3,
    .bf230-wrap .bf230-col4, .bf230-wrap .bf230-col21 { grid-template-columns: 1fr; }
    .bf230-wrap .bf230-body { padding: 16px 14px; }
}

/* Campuri */
.bf230-wrap .bf230-field { display: flex; flex-direction: column; gap: 5px; }
.bf230-wrap .bf230-field label {
    font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); margin: 0;
}
.bf230-wrap .bf230-field label .req { color: #c0392b; }
.bf230-wrap .bf230-field label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9aa5b4; font-size: .71rem; }
.bf230-wrap input[type=text], .bf230-wrap input[type=email],
.bf230-wrap input[type=tel], .bf230-wrap select {
    width: 100%; padding: 9px 12px; border: 1.5px solid var(--border);
    border-radius: 6px; font-family: inherit; font-size: .95rem;
    color: var(--text); background: #fafcff;
    transition: border-color .2s, box-shadow .2s; appearance: none; margin: 0;
}
.bf230-wrap input:focus, .bf230-wrap select:focus {
    outline: none; border-color: #1a56b0;
    box-shadow: 0 0 0 3px rgba(15,64,138,.12); background: #fff;
}
.bf230-wrap select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230F408A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; cursor: pointer;
}
.bf230-wrap input.bf230-invalid, .bf230-wrap select.bf230-invalid { border-color: #c0392b !important; }
.bf230-wrap .bf230-err { display: none; color: #c0392b; font-size: .76rem; margin-top: 2px; }
.bf230-wrap .bf230-err.show { display: block; }

/* Perioada */
.bf230-wrap .bf230-period { display: flex; gap: 14px; flex-wrap: wrap; }
.bf230-wrap .bf230-period-opt {
    display: flex; align-items: center; gap: 10px; padding: 10px 18px;
    border-radius: 8px; cursor: pointer; border: 1.5px solid var(--border);
    background: #fafcff; font-size: .95rem; transition: all .15s; user-select: none;
}
.bf230-wrap .bf230-period-opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.bf230-wrap .bf230-check-box {
    width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
    border: 2px solid var(--border); background: #fff;
    display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.bf230-wrap .bf230-period-opt.selected { border-color: var(--culoare); background: var(--culoare-l); color: var(--culoare); font-weight: 600; }
.bf230-wrap .bf230-period-opt.selected .bf230-check-box { background: var(--culoare); border-color: var(--culoare); }
.bf230-wrap .bf230-period-opt.selected .bf230-check-box::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* Checkbox-uri */
.bf230-wrap .bf230-check-row {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
    border-radius: 6px; border: 1px solid var(--border); background: var(--culoare-p);
    cursor: pointer; font-size: .9rem; line-height: 1.5; margin-bottom: 10px;
}
.bf230-wrap .bf230-check-row input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.bf230-wrap .bf230-sq {
    width: 20px; height: 20px; min-width: 20px; border-radius: 4px;
    border: 2px solid var(--border); background: #fff;
    display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: all .15s;
}
.bf230-wrap .bf230-check-row.checked .bf230-sq { background: var(--culoare); border-color: var(--culoare); }
.bf230-wrap .bf230-check-row.checked .bf230-sq::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
}
.bf230-wrap .bf230-check-label { flex: 1; }

/* Semnatura */
.bf230-wrap .bf230-sig-hint { font-size: .88rem; color: var(--muted); margin: 14px 0 8px; }
.bf230-wrap .bf230-sig-wrap { border: 2px solid var(--border); border-radius: 8px; overflow: hidden; background: #fafcff; }
.bf230-wrap #ovpspo-sig-canvas { display: block; width: 100%; height: 140px; cursor: crosshair; touch-action: none; }
.bf230-wrap .bf230-sig-actions { display: flex; justify-content: flex-end; padding: 6px 10px; border-top: 1px solid var(--border); background: #f5f7fa; }
.bf230-wrap .bf230-btn-clear {
    background: none; border: 1px solid var(--border); border-radius: 5px;
    padding: 4px 12px; font-size: .8rem; color: var(--muted); cursor: pointer; transition: all .15s;
}
.bf230-wrap .bf230-btn-clear:hover { border-color: #c0392b; color: #c0392b; }

/* Submit */
.bf230-wrap .bf230-submit-zone { margin-top: 16px; text-align: center; }
.bf230-wrap .bf230-btn-submit {
    display: inline-block; padding: 14px 40px; background: var(--culoare-buton, var(--culoare, #0F408A));
    color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700;
    cursor: pointer; transition: background .2s; width: 100%; max-width: 360px;
}
.bf230-wrap .bf230-btn-submit:hover { background: var(--culoare-buton, var(--culoare, #0F408A)); opacity: 0.88; }
.bf230-wrap .bf230-btn-submit:disabled { opacity: .6; cursor: not-allowed; }
.bf230-wrap #ovpspo-response { margin-top: 16px; padding: 14px 18px; border-radius: 8px; font-size: .95rem; display: none; }
.bf230-wrap #ovpspo-response.ok { background: #eafaf1; border: 1px solid #27ae60; color: #1a7a42; display: block; }
.bf230-wrap #ovpspo-response.err { background: #fdf0f0; border: 1px solid #e74c3c; color: #c0392b; display: block; }



/* ══════════════════════════════════════════════
   RESPONSIVE - Formular 230
══════════════════════════════════════════════ */

/* Desktop mare (>1400px) */
@media (min-width: 1400px) {
    .bf230-wrap { max-width: 1100px; }
}

/* Desktop normal (1024px - 1399px) */
@media (max-width: 1399px) and (min-width: 1024px) {
    .bf230-wrap { max-width: 900px; }
}

/* Laptop / Tablet landscape (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .bf230-wrap { max-width: 95%; }
    .bf230-wrap .bf230-col3  { grid-template-columns: 1fr 1fr; }
    .bf230-wrap .bf230-col4  { grid-template-columns: 1fr 1fr; }
    .bf230-wrap .bf230-col21 { grid-template-columns: 2fr 1fr; }
    .bf230-wrap .bf230-hero  { padding: 36px 20px 28px; }
    .bf230-wrap .bf230-hero h2 { font-size: 1.6rem !important; }
    .bf230-wrap .bf230-body  { padding: 20px 18px; }
    .bf230-wrap .bf230-section { padding: 16px 16px 14px; }
}

/* Tablet portrait (600px - 767px) */
@media (max-width: 767px) and (min-width: 600px) {
    .bf230-wrap { max-width: 98%; }
    .bf230-wrap .bf230-col2,
    .bf230-wrap .bf230-col3,
    .bf230-wrap .bf230-col4,
    .bf230-wrap .bf230-col21 { grid-template-columns: 1fr 1fr; }
    .bf230-wrap .bf230-hero  { padding: 30px 18px 24px; border-radius: 8px 8px 0 0; }
    .bf230-wrap .bf230-hero h2 { font-size: 1.4rem !important; }
    .bf230-wrap .bf230-hero p  { font-size: .9rem; }
    .bf230-wrap .bf230-body  { padding: 16px 14px; }
    .bf230-wrap .bf230-section { padding: 14px 14px 12px; margin-bottom: 12px; }
    .bf230-wrap .bf230-info-item { padding: 6px 10px; font-size: .78rem; }
    .bf230-wrap .bf230-btn-submit { max-width: 100%; }
}

/* Mobile (< 600px) */
@media (max-width: 599px) {
    .bf230-wrap { max-width: 100%; }
    .bf230-wrap .bf230-col2,
    .bf230-wrap .bf230-col3,
    .bf230-wrap .bf230-col4,
    .bf230-wrap .bf230-col21 { grid-template-columns: 1fr; }
    .bf230-wrap .bf230-hero  { padding: 24px 16px 20px; border-radius: 6px 6px 0 0; }
    .bf230-wrap .bf230-hero h2 { font-size: 1.25rem !important; }
    .bf230-wrap .bf230-hero p  { font-size: .85rem; }
    .bf230-wrap .bf230-badge   { font-size: 10px; padding: 4px 10px; }
    .bf230-wrap .bf230-hero-info { gap: 8px; }
    .bf230-wrap .bf230-info-item { padding: 5px 10px; font-size: .76rem; }
    .bf230-wrap .bf230-body    { padding: 14px 12px; }
    .bf230-wrap .bf230-section { padding: 12px 12px 10px; margin-bottom: 10px; border-radius: 6px; }
    .bf230-wrap .bf230-section h3 { font-size: 13px !important; padding: 5px 0 5px 10px !important; }
    .bf230-wrap .bf230-alert   { padding: 10px 12px; font-size: .85rem; }
    .bf230-wrap .bf230-period  { flex-direction: column; gap: 8px; }
    .bf230-wrap .bf230-period-opt { padding: 10px 14px; }
    .bf230-wrap .bf230-check-row  { padding: 8px 10px; font-size: .85rem; }
    .bf230-wrap .bf230-btn-submit { padding: 12px 20px; font-size: .95rem; max-width: 100%; }
    .bf230-wrap #ovpspo-sig-canvas { height: 120px; }
    .bf230-wrap input[type=text],
    .bf230-wrap input[type=email],
    .bf230-wrap input[type=tel],
    .bf230-wrap select { font-size: 16px; } /* previne zoom pe iOS */
}

/* Dashicons in formular */
.bf230-info-item .dashicons,
.bf177-info-item .dashicons,
.ovp-c-info-item .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 2px;
}
.bf230-info-item .dashicons { color: rgba(255,255,255,0.9); }