/* OnlineCert Price Widget v1.8.0 */

.opw-wrap {
    font-family: inherit;
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
}

/* ── GARANTIE BANNER ─────────────────────────────────────────────────────── */
.opw-guarantee {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0F1A3E;
    color: #fff;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin: -32px -32px 28px;
}
.opw-guarantee svg { flex-shrink: 0; opacity: 0.85; }
.opw-guarantee em  { color: #F5C400; font-style: normal; }

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
.opw-section {
    padding-bottom: 24px;
    border-bottom: 1px solid #F3F4F6;
    margin-bottom: 24px;
}
.opw-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.opw-step-label-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1A2BCC;
    margin-bottom: 6px;
}
.opw-section-heading {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.25;
}
.opw-section-sub {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 20px;
    margin-top: 6px;
}

/* ── RADIO LIST ──────────────────────────────────────────────────────────── */
.opw-radio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.opw-radio-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border: 1.5px solid #E5E7EB;  /* FIX: explicit border shorthand */
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.opw-radio-row:hover  { border-color: #A5B4FC; }
.opw-radio-row.active { border-color: #1A2BCC; background: rgba(26,43,204,0.05); }

.opw-radio-left { display: flex; align-items: center; gap: 12px; }

.opw-radio-dot {
    width: 20px;
    height: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.18s, background 0.18s;
    background: #fff;
}

/* Active state — set by JS adding .active to the row */
.opw-radio-row.active .opw-radio-dot {
    border-color: #1A2BCC;
    border-width: 6px;   /* thick border = filled-center illusion, no ::after needed */
    background: #fff;
}

/* Hover on non-active rows */
.opw-radio-row:not(.active) .opw-radio-dot:hover {
    border-color: #A5B4FC;
}

/* Remove old ::after approach — replaced by thick border */
.opw-radio-dot::after { display: none; }

.opw-radio-info { display: flex; flex-direction: column; gap: 2px; }
.opw-radio-label { font-size: 15px; font-weight: 700; color: #111827; line-height: 1; }
.opw-radio-desc  { font-size: 12px; color: #9CA3AF; line-height: 1.3; }
.opw-radio-right { flex-shrink: 0; text-align: right; }
.opw-price-amount { font-size: 15px; font-weight: 700; color: #1A2BCC; white-space: nowrap; }

/* ── PRICE SUMMARY BOX ───────────────────────────────────────────────────── */
.opw-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8F9FF;
    border: 1.5px solid #E0E4FF;  /* FIX: explicit border shorthand */
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}
.opw-price-box-left  { display: flex; flex-direction: column; gap: 2px; }
.opw-price-box-title { font-size: 12px; color: #9CA3AF; }
.opw-price-box-pkg   { font-size: 15px; font-weight: 700; color: #111827; }
.opw-price-box-sub   { font-size: 12px; color: #9CA3AF; }
.opw-price-box-right { text-align: right; }
.opw-price-box-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1A2BCC;
    margin-bottom: 2px;
}
.opw-price-box-amount { font-size: 42px; font-weight: 800; color: #1A2BCC; line-height: 1; }

/* ── FORM FIELDS ─────────────────────────────────────────────────────────── */
.opw-field-wrap { margin-bottom: 10px; }

.opw-field {
    width: 100%;
    padding: 13px 16px;
    /* FIX: full border shorthand — browser resets won't strip it */
    border: 1.5px solid #D1D5DB;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: #111827;
    background: #F9FAFB;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
    resize: vertical;
    /* Elementor/theme reset insurance */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
}
.opw-field:focus       { border-color: #1A2BCC; background: #fff; outline: none; box-shadow: none; }
.opw-field::placeholder{ color: #9CA3AF; }

/* Elementor themes sometimes target input[type=text] etc. and remove border */
.opw-wrap input.opw-field,
.opw-wrap textarea.opw-field {
    border: 1.5px solid #D1D5DB !important;
    border-radius: 8px !important;
    background: #F9FAFB !important;
    padding: 13px 16px !important;
    box-shadow: none !important;
}
.opw-wrap input.opw-field:focus,
.opw-wrap textarea.opw-field:focus {
    border-color: #1A2BCC !important;
    background: #fff !important;
}

/* ── CHECKBOXES ─────────────────────────────────────────────────────────────── */
.opw-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0 4px;
    margin-bottom: 16px;
}
/* Docs checkboxes sit after price box — keep separator */
.opw-checkboxes-docs {
    border-bottom: 1px solid #F3F4F6;
    margin-bottom: 24px;
}
/* Privacy checkbox sits directly before submit button */
.opw-checkboxes-privacy {
    padding: 4px 0 12px;
    margin-bottom: 0;
}

.opw-cb-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    user-select: none;
}

/* Hide native checkbox */
.opw-cb-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom checkbox box */
.opw-cb-box {
    width: 20px;
    height: 20px;
    border: 1.5px solid #D1D5DB;
    border-radius: 4px;
    background: #F9FAFB;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}

.opw-cb-row:hover .opw-cb-box {
    border-color: #1A2BCC;
}

/* Checked state — JS adds .checked class to label */
.opw-cb-input:checked + .opw-cb-box {
    background: #1A2BCC;
    border-color: #1A2BCC;
}

.opw-cb-input:checked + .opw-cb-box::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
}

.opw-cb-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.55;
}

.opw-cb-text a {
    color: #1A2BCC;
    text-decoration: underline;
}

/* Docs hint box */
.opw-docs-hint {
    background: #FFFBEB;
    border: 1.5px solid #FCD34D;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 4px;
    margin-left: 31px;
}

.opw-docs-hint-text {
    font-size: 13px;
    color: #92400E;
    line-height: 1.6;
    margin-bottom: 8px;
}

.opw-docs-hint-link {
    font-size: 13px;
    font-weight: 600;
    color: #92400E;
    text-decoration: underline;
    display: inline-block;
}

/* ── ERROR ───────────────────────────────────────────────────────────────── */
.opw-error {
    background: #FEE2E2;
    color: #991B1B;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* ── SUBMIT ──────────────────────────────────────────────────────────────── */
.opw-submit {
    width: 100%;
    padding: 16px 24px;
    background: #1A2BCC;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
    -webkit-appearance: none;
}
.opw-submit:hover    { opacity: 0.88; }
.opw-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.opw-submit.loading::after {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: opw-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.opw-submit-sub {
    text-align: center;
    font-size: 12px;
    color: #9CA3AF;
    margin-top: 10px;
    line-height: 1.5;
}

@keyframes opw-spin { to { transform: rotate(360deg); } }

/* ── SUCCESS ─────────────────────────────────────────────────────────────── */
.opw-success { text-align: center; padding: 48px 24px; }
.opw-success-icon {
    width: 56px; height: 56px;
    background: #22C55E; color: #fff;
    border-radius: 50%; font-size: 26px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.opw-success-message { font-size: 16px; color: #166534; line-height: 1.6; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .opw-guarantee { margin: -24px -24px 24px; padding: 12px 18px; }
    .opw-price-box-amount { font-size: 32px; }
    .opw-radio-row { padding: 13px 14px; }
}