/* =========================================================
   Mobitech B2B — PRO Registration Fields
   ========================================================= */

.mobitech-pro-section {
    margin-top: 28px;
}

.pro-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #6b7280;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pro-divider::before,
.pro-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Checkbox row */
.pro-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: background 0.2s;
}

.pro-checkbox-wrapper:hover {
    background: #e8eeff;
}

.pro-checkbox-wrapper .checkbox {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #1e40af;
    cursor: pointer;
    flex-shrink: 0;
}

.pro-checkbox-wrapper .label {
    cursor: pointer;
    margin: 0;
}

.pro-label-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pro-label-text strong {
    font-size: 1rem;
    color: #1e3a8a;
}

.pro-label-hint {
    font-size: 0.82rem;
    color: #6b7280;
    font-style: normal;
}

/* Animated reveal */
.pro-fields-wrapper {
    overflow: hidden;
    animation: proFieldsReveal 0.25s ease;
}

@keyframes proFieldsReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pro-fields-wrapper .field {
    margin-bottom: 16px;
}

.pro-fields-wrapper .label {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    margin-bottom: 4px;
    display: block;
}

.pro-fields-wrapper .label::after {
    content: none; /* override Magento required star; we handle it ourselves */
}

.pro-fields-wrapper #field-pro-tax-id .label::after {
    content: ' *';
    color: #dc2626;
}

.pro-fields-wrapper .input-text {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pro-fields-wrapper .input-text:focus {
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
    outline: none;
}

.pro-fields-wrapper .note {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 4px;
}