/**
 * Ubitto Program Creator - Frontend Form Styles
 */

/* === Form Wrapper === */
.ubitto-pc-wrapper {
    max-width: 1032px;
    margin: 0 auto;
    padding: 10px 0px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* === Header === */
.ubitto-pc-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
}

.ubitto-pc-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.ubitto-pc-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

.ubitto-pc-btn-small {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ubitto-pc-my-programs-btn {
    background: #e0e0e0;
    color: #333;
}

.ubitto-pc-my-programs-btn:hover {
    background: #c0c0c0;
    transform: translateX(-2px);
}

/* === Progress Bar === */
.ubitto-pc-progress-bar {
    margin-bottom: 20px;
}

.ubitto-pc-progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}

.ubitto-pc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 80px;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.ubitto-pc-step.active,
.ubitto-pc-step.completed {
    opacity: 1;
}

.ubitto-pc-step.hidden {
    display: none;
}

.ubitto-pc-step .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 6px;
    transition: all 0.3s;
}

.ubitto-pc-step.active .step-number {
    background: #f26522;
    color: white;
}

.ubitto-pc-step.completed .step-number {
    background: #4caf50;
    color: white;
    cursor: pointer;
    font-size: 0;
}

.ubitto-pc-step.completed .step-number::before {
    content: '✓';
    font-size: 20px;
}

.ubitto-pc-step.completed {
    cursor: pointer;
}

.ubitto-pc-step.completed:hover .step-number {
    background: #45a049;
    transform: scale(1.05);
}

.ubitto-pc-step .step-label {
    font-size: 12px;
    text-align: center;
    color: #666;
    line-height: 1.3;
}

.ubitto-pc-progress-line {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.ubitto-pc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f26522 0%, #ff8844 100%);
    transition: width 0.4s ease;
}

/* === Form Steps === */
.ubitto-pc-form-step {
    display: none;
    animation: fadeIn 0.4s;
}

.ubitto-pc-form-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ubitto-pc-step-content {
    background: white;
    border-radius: 12px;
    padding: 20px 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.ubitto-pc-step-title {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 15px 0;
}

.ubitto-pc-step-description {
    font-size: 16px;
    color: #666;
    margin: 0 0 15px 0;
    line-height: 1.6;
}

/* === Program Type Cards === */
.ubitto-pc-program-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.ubitto-pc-program-type-card {
    cursor: pointer;
    display: block;
}

.ubitto-pc-program-type-card input[type="radio"] {
    display: none;
}

.ubitto-pc-card-inner {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ubitto-pc-program-type-card:hover .ubitto-pc-card-inner {
    border-color: #f26522;
    box-shadow: 0 4px 12px rgba(242, 101, 34, 0.15);
}

.ubitto-pc-program-type-card input:checked + .ubitto-pc-card-inner {
    border-color: #f26522;
    background: #fff5f0;
    box-shadow: 0 4px 12px rgba(242, 101, 34, 0.2);
}

.ubitto-pc-card-icon {
    color: #f26522;
    margin-bottom: 16px;
}

.ubitto-pc-card-inner h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 10px 0;
}

.ubitto-pc-card-inner p {
    font-size: 14px;
    color: #666;
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.ubitto-pc-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ubitto-pc-card-features li {
    font-size: 13px;
    color: #888;
    padding-left: 20px;
    position: relative;
    margin-bottom: 6px;
}

.ubitto-pc-card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4caf50;
    font-weight: bold;
}

/* === Quiz Shortcut === */
.ubitto-pc-quiz-shortcut {
    margin: 30px 0 20px;
    text-align: center;
}

.ubitto-pc-quiz-shortcut-inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #f8f9fa;
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
}

.ubitto-pc-quiz-shortcut-text {
    font-size: 14px;
    color: #666;
}

.ubitto-pc-quiz-shortcut-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #7c3aed;
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ubitto-pc-quiz-shortcut-btn:hover {
    background: #6d28d9;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.ubitto-pc-quiz-shortcut-btn svg {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .ubitto-pc-quiz-shortcut-inner {
        flex-direction: column;
        gap: 10px;
    }
}

/* === Help Button === */
.ubitto-pc-help-btn {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    transform: translateY(2px);
    padding: 4px 10px;
    margin-left: 8px;
    background: #f0f0ff;
    border: 1px solid #4f46e5;
    border-radius: 4px;
    color: #4f46e5;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.ubitto-pc-help-btn:hover {
    background: #4f46e5;
    color: #fff;
}

/* === Help Sidebar === */
.ubitto-pc-help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ubitto-pc-help-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ubitto-pc-help-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    z-index: 99999;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ubitto-pc-help-sidebar.active {
    right: 0;
}

.ubitto-pc-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

.ubitto-pc-help-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.ubitto-pc-help-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ubitto-pc-help-close:hover {
    background: #f3f4f6;
    color: #111827;
}

.ubitto-pc-help-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.ubitto-pc-help-section {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e7eb;
}

.ubitto-pc-help-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ubitto-pc-help-section h4 {
    margin: 0 0 16px 0;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}

.ubitto-pc-help-section h5 {
    margin: 20px 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.ubitto-pc-help-section p {
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}

.ubitto-pc-help-section ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.ubitto-pc-help-section ul li {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 6px;
}

.ubitto-pc-help-tip {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #92400e;
}

.ubitto-pc-help-tip strong {
    color: #78350f;
}

.ubitto-pc-help-link {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ubitto-pc-help-link:hover {
    color: #4338ca;
    text-decoration: underline;
}

.ubitto-pc-help-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 16px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Help sidebar mobile footer - hidden by default */
.ubitto-pc-help-footer {
    display: none;
}

@media (max-width: 768px) {
    .ubitto-pc-help-footer {
        display: block;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px 20px;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .ubitto-pc-help-close-mobile {
        display: block;
        width: 100%;
        padding: 14px 24px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        background: #3b82f6;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .ubitto-pc-help-close-mobile:hover,
    .ubitto-pc-help-close-mobile:active {
        background: #2563eb;
    }

    /* Adjust content padding to not be hidden by sticky footer */
    .ubitto-pc-help-content {
        padding-bottom: 100px;
    }
}

@media (max-width: 480px) {
    .ubitto-pc-help-sidebar {
        width: 100%;
        right: -100%;
    }
}

/* === Form Fields === */
.ubitto-pc-form-fields {
    /* Container for form fields */
}

.ubitto-pc-form-group {
    margin-bottom: 24px;
}

.ubitto-pc-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.ubitto-pc-form-row.ubitto-pc-schedule-grid {
    grid-template-columns: 1fr 1fr 1fr;
}

.ubitto-pc-form-row.ubitto-pc-dates-grid {
    grid-template-columns: 1fr 1fr;
}

.ubitto-pc-label {
    display: block;
    font-weight: 600;
    color: #222;
    margin-bottom: 0px;
    font-size: 14px;
}

.ubitto-pc-label.ubitto-required::after,
label.ubitto-pc-label.ubitto-required::after {
    content: ' *';
    color: #e74c3c;
}

.ubitto-pc-label span.required,
span.required {
    color: #e74c3c;
}

.ubitto-pc-label-sm {
    font-size: 13px;
    font-weight: 500;
}

/* AI Generate Section */
.ubitto-pc-ai-generate-section {
    margin-bottom: 24px;
}

.ubitto-pc-ai-generate-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 10px;
}

.ubitto-pc-ai-generate-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.ubitto-pc-ai-generate-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ubitto-pc-ai-generate-text strong {
    font-size: 14px;
    color: #1e1b4b;
}

.ubitto-pc-ai-generate-text span {
    font-size: 12px;
    color: #64748b;
}

.ubitto-pc-btn-ai {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
}

.ubitto-pc-btn-ai:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.35);
}

.ubitto-pc-btn-ai:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Resume Autofill banner — only visible when the section is promoted
   (i.e. pool types). Mirrors the AI Generate gradient/icon treatment so
   it feels like the same family of "✨ smart-fill" affordances. */
.ubitto-pc-resume-autofill-banner {
    display: none;
}
.ubitto-pc-resume-promoted .ubitto-pc-resume-autofill-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    margin-bottom: 16px;
}
.ubitto-pc-resume-promoted .ubitto-pc-upload-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    transition: all 0.2s ease;
}
.ubitto-pc-resume-promoted .ubitto-pc-upload-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.35);
}

/* Per-language proficiency rows */
.ubitto-pc-language-proficiency-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ubitto-pc-language-proficiency-row {
    display: grid;
    grid-template-columns: minmax(100px, 130px) minmax(150px, 200px) 1fr;
    gap: 10px;
    align-items: center;
}
.ubitto-pc-language-proficiency-row .ubitto-lpr-lang {
    font-weight: 500;
    color: #1f2937;
}
.ubitto-pc-language-proficiency-row .ubitto-lpr-level,
.ubitto-pc-language-proficiency-row .ubitto-lpr-notes {
    height: 36px;
    padding: 6px 10px;
    font-size: 13px;
}
@media (max-width: 600px) {
    .ubitto-pc-language-proficiency-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* AI Generate Modal */
.ubitto-pc-ai-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ubitto-pc-ai-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.ubitto-pc-ai-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.ubitto-pc-ai-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ubitto-pc-ai-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.ubitto-pc-ai-modal-close:hover {
    color: #111827;
}

.ubitto-pc-ai-modal-body {
    padding: 24px;
}

.ubitto-pc-ai-modal-body label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.ubitto-pc-ai-modal-body textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
}

.ubitto-pc-ai-modal-body textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ubitto-pc-ai-modal-body .hint {
    font-size: 13px;
    color: #6b7280;
    margin-top: 8px;
}

.ubitto-pc-ai-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

.ubitto-pc-ai-modal-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ubitto-pc-ai-modal-btn-secondary {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.ubitto-pc-ai-modal-btn-secondary:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.ubitto-pc-ai-modal-btn-success {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #059669;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.ubitto-pc-ai-modal-btn-success:hover {
    background: #047857;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.35);
}

.ubitto-pc-ai-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f0f4ff;
    border-radius: 8px;
    margin-top: 16px;
}

.ubitto-pc-ai-status .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

@media (max-width: 480px) {
    .ubitto-pc-ai-generate-box {
        flex-direction: column;
        text-align: center;
    }

    .ubitto-pc-btn-ai {
        width: 100%;
    }
}

.ubitto-pc-input,
.ubitto-pc-textarea {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    background-color: #fff;
    border: 1px solid #cececf;
    display: inline-block;
    font-family: inherit;
    font-style: inherit;
    outline: 0;
    vertical-align: middle;
    border-radius: 8px;
    display: flex;
    padding: 5px 8px;
    color: #242425;
    transition: border-color 0.3s;
}

.ubitto-pc-select {
    width: 100%;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.01512 0.765313L5.26512 4.51531C5.23029 4.55018 5.18893 4.57784 5.14341 4.59671C5.09789 4.61558 5.04909 4.62529 4.99981 4.62529C4.95053 4.62529 4.90173 4.61558 4.8562 4.59671C4.81068 4.57784 4.76932 4.55018 4.73449 4.51531L0.984495 0.765313C0.93199 0.712867 0.896227 0.646022 0.881734 0.57324C0.86724 0.500458 0.874666 0.425012 0.903074 0.356454C0.931481 0.287895 0.979591 0.229307 1.04131 0.188105C1.10304 0.146903 1.1756 0.124942 1.24981 0.125H8.74981C8.82402 0.124942 8.89658 0.146903 8.9583 0.188105C9.02002 0.229307 9.06813 0.287895 9.09654 0.356454C9.12495 0.425012 9.13237 0.500458 9.11788 0.57324C9.10339 0.646022 9.06763 0.712867 9.01512 0.765313Z" fill="%233D3D3D"/></svg>');
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-color: #f6f6f6;
    padding: 6px 32px 6px 8px;
    border: 1px solid #e7e7e7;
    display: inline-block;
    font-family: inherit;
    font-style: inherit;
    outline: 0;
    vertical-align: middle;
    border-radius: 8px;
    display: flex;
    color: #242425;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    transition: border-color 0.3s;
}

.ubitto-pc-input:focus,
.ubitto-pc-select:focus,
.ubitto-pc-textarea:focus {
    outline: none;
    border-color: #f26522;
}

.ubitto-pc-input.error,
.ubitto-pc-select.error,
.ubitto-pc-textarea.error {
    border-color: #e74c3c;
}

.ubitto-pc-input-group {
    position: relative;
    display: block;
    width: 100%;
}

.ubitto-pc-input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #666;
    z-index: 1;
    pointer-events: none;
}

.ubitto-pc-input-group .ubitto-pc-input {
    /* Matches the .ubitto-pc-pricing-inputs rule above so every
       MYR-prefixed input lines up the same way. */
    padding-left: 60px !important;
    width: 100%;
}

.ubitto-pc-help-text {
    display: block;
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #888;
    line-height: 1.4;
}

/* === Checkboxes and Radios === */
.ubitto-pc-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.ubitto-pc-checkbox-group {
    background-color: #f6f6f6;
    padding: .5rem .75rem;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.ubitto-pc-checkbox-label {
    margin-bottom: 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1;
}

.ubitto-pc-checkbox-label input[type="checkbox"],
.ubitto-pc-checkbox-label input[type="radio"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    opacity: 1;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

.ubitto-pc-checkbox-label input[type="checkbox"]:disabled,
.ubitto-pc-checkbox-label input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ubitto-pc-checkbox-label:has(input:disabled) {
    opacity: 0.7;
    cursor: not-allowed;
}

.ubitto-pc-checkbox-label:has(input:disabled) span {
    color: #999;
}

/* Industry Expertise Section - Scrollable */
.ubitto-pc-industry-section .ubitto-pc-checkbox-group {
    max-height: 300px;
    overflow-y: auto;
}

/* === Content Option Cards === */
.ubitto-pc-content-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.ubitto-pc-option-card {
    cursor: pointer;
    display: block;
}

.ubitto-pc-option-card input[type="radio"] {
    display: none;
}

.ubitto-pc-option-card .ubitto-pc-card-inner {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s;
}

.ubitto-pc-option-card:hover .ubitto-pc-card-inner {
    border-color: #f26522;
}

.ubitto-pc-option-card input:checked + .ubitto-pc-card-inner {
    border-color: #f26522;
    background: #fff5f0;
}

.ubitto-pc-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ubitto-pc-option-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0;
}

.ubitto-pc-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.ubitto-pc-badge-recommended {
    background: #4caf50;
    color: white;
}

/* === File Upload === */
.ubitto-pc-image-upload,
.ubitto-pc-image-gallery,
.ubitto-pc-file-upload {
    /* Upload containers */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ubitto-pc-image-preview {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.ubitto-pc-image-preview img {
    display: block;
    max-width: 300px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.ubitto-pc-upload-btn,
.ubitto-pc-add-bundle-btn {
    padding: 8px 20px !important;
    font-size: 14px !important;
}

.ubitto-pc-remove-image {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e74c3c;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background 0.3s;
    z-index: 10;
    padding: 0px;
}

.ubitto-pc-remove-image:hover {
    background: #c0392b;
}

.ubitto-pc-gallery-preview,
.ubitto-pc-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.ubitto-pc-preview-item {
    position: relative;
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
}

.ubitto-pc-preview-item img {
    max-width: 200px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    display: flex;
}

.ubitto-pc-remove-preview {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e74c3c;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    z-index: 10;
    padding: 0;
    transition: background 0.3s;
}

.ubitto-pc-remove-preview:hover {
    background: #c0392b;
}

/* Resume "×" button — scoped so the BuddyBoss theme's default button
   chrome (large padding, big font, full bg colour) doesn't apply. Small
   inline circular icon that fades to red on hover. !important is used
   on the size/padding pair because the theme sets these via specific
   selectors that otherwise win the cascade. */
.ubitto-pc-remove-resume {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ubitto-pc-remove-resume:hover,
.ubitto-pc-remove-resume:focus {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    outline: none;
}

/* Custom credential rows — added inline via the Add Credential button.
   Each row has Edit + Remove icon buttons that the built-in rows don't.
   Same !important strategy as remove-resume to override theme buttons. */
.ubitto-pc-credential-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ubitto-pc-credential-custom-row .ubitto-pc-credential-text {
    flex: 1;
}
.ubitto-pc-credential-edit,
.ubitto-pc-credential-delete {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ubitto-pc-credential-edit:hover,
.ubitto-pc-credential-edit:focus {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
    outline: none;
}
.ubitto-pc-credential-delete:hover,
.ubitto-pc-credential-delete:focus {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    outline: none;
}
.ubitto-pc-credential-custom-row.is-editing .ubitto-pc-credential-edit {
    display: none;
}
.ubitto-pc-credential-edit-input {
    flex: 1;
    height: 32px;
    padding: 4px 8px;
    font-size: 13px;
}

/* Pulse the certifications upload panel for ~2s after a new credential
   is added — visual nudge so users know to upload proof next. */
@keyframes ubitto-pc-upload-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(102, 126, 234, 0);   }
    100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);       }
}
.ubitto-pc-credential-upload-section.ubitto-pc-prompt-upload {
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 12px;
    background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
    animation: ubitto-pc-upload-pulse 2.4s ease-out 1;
}

/* File items (for PDFs and documents) */
.ubitto-pc-file-item {
    position: relative;
    border-radius: 8px;
    display: flex;
    border: 2px solid #e0e0e0;
    background: #fafafa;
    padding: 4px 12px 4px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 250px;
}

.ubitto-pc-file-icon {
    font-size: 32px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.ubitto-pc-file-name {
    flex: 1;
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 28px;
}

.ubitto-pc-file-item .ubitto-pc-remove-preview {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* === Pricing Table === */
.ubitto-pc-pricing-table {
    flex-direction: column;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    margin-top: 15px;
}

.ubitto-pc-pricing-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    border-bottom: 1px solid #e0e0e0;
    align-items: center;
}

.ubitto-pc-pricing-row:last-child {
    border-bottom: none;
}

.ubitto-pc-pricing-label {
    padding: 16px;
    background: #f8f8f8;
    border-right: 1px solid #e0e0e0;
}

.ubitto-pc-pricing-label strong {
    display: block;
    font-size: 14px;
    color: #222;
    margin-bottom: 2px;
}

.ubitto-pc-pricing-label small {
    display: block;
    font-size: 12px;
    color: #888;
}

.ubitto-pc-pricing-inputs {
    padding: 16px;
    display: flex;
    gap: 16px;
}

.ubitto-pc-pricing-inputs .ubitto-pc-input-group {
    flex: 1;
    display: block !important;
    position: relative !important;
}

.ubitto-pc-pricing-inputs .ubitto-pc-input-prefix {
    position: absolute !important;
    left: 12px !important;
    top: 47% !important;
    transform: translateY(-50%) !important;
    z-index: 1;
}

.ubitto-pc-pricing-inputs .ubitto-pc-input {
    padding-left: 60px !important;
    width: 100%;
}

/* === Local Currency Field (hidden by default, shown via JS when checkbox is on) === */
.ubitto-lc-wrap {
    flex: 1;
    position: relative !important;
    display: none !important;
}
.ubitto-lc-wrap.ubitto-lc-visible {
    display: block !important;
}
.ubitto-lc-wrap .ubitto-pc-input-prefix {
    position: absolute !important;
    left: 12px !important;
    top: 47% !important;
    transform: translateY(-50%) !important;
    z-index: 1;
}
.ubitto-lc-wrap .ubitto-pc-input {
    padding-left: 60px !important;
    width: 100%;
}

/* === Bundle Repeater === */
#bundle-repeater {
    margin-bottom: 10px;
}

.ubitto-pc-bundle-item {
    position: relative;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 24px;
    padding-top: 34px;
    margin-bottom: 16px;
    background: #fafafa;
}

.ubitto-pc-remove-bundle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e74c3c;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background 0.3s;
}

.ubitto-pc-remove-bundle:hover {
    background: #c0392b;
}

/* === Info Boxes === */
.ubitto-pc-info-box {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    border-radius: 6px;
    margin-top: 20px;
}

.ubitto-pc-info-box svg {
    flex-shrink: 0;
    color: #2196f3;
}

.ubitto-pc-info-box p {
    margin: 0;
    font-size: 14px;
    color: #1565c0;
    line-height: 1.5;
}

/* === Buttons === */
.ubitto-pc-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.ubitto-pc-btn-primary {
    background: #f26522;
    color: white;
}

.ubitto-pc-btn-primary:hover {
    background: #d94d10;
    box-shadow: 0 4px 12px rgba(242, 101, 34, 0.3);
    color: white;
}

.ubitto-pc-btn-secondary {
    background: #e0e0e0;
    color: #333;
}

.ubitto-pc-btn-secondary:hover {
    background: #c0c0c0;
}

.ubitto-pc-btn-success {
    background: #4caf50;
    color: white;
}

.ubitto-pc-btn-success:hover {
    background: #45a049;
}

/* === Navigation === */
.ubitto-pc-form-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 30px;
}

.ubitto-pc-form-navigation .ubitto-pc-prev-btn {
    margin-right: auto;
}

.ubitto-pc-form-navigation .ubitto-pc-btn {
    padding: 8px 20px;
    font-size: 14px;
}

.ubitto-pc-form-navigation-top {
    margin-top: 0;
    margin-bottom: 30px;
    padding-bottom: 0;
    border-bottom: none;
}


/* === Validation Messages === */
.ubitto-pc-validation-message {
    background: #ffebee;
    border-left: 4px solid #e74c3c;
    padding: 16px;
    border-radius: 6px;
    margin-top: 20px;
}

.ubitto-pc-validation-message ul {
    margin: 0;
    padding-left: 20px;
    color: #c0392b;
}

.ubitto-pc-validation-message li {
    margin-bottom: 6px;
}

/* === Loading Overlay === */
.ubitto-pc-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ubitto-pc-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.ubitto-pc-loading-overlay p {
    color: white;
    font-size: 18px;
    margin-top: 20px;
}

/* === Success Message === */
.ubitto-pc-success-message {
    text-align: center;
    padding: 60px 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.ubitto-pc-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #4caf50;
    color: white;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.ubitto-pc-success-message h2 {
    font-size: 28px;
    color: #222;
    margin: 0 0 12px 0;
}

.ubitto-pc-success-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.ubitto-pc-success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.ubitto-pc-success-actions .ubitto-pc-btn {
    flex: 1;
    min-width: 180px;
}

/* === Conditional Fields === */
.ubitto-pc-conditional-field {
    /* Hidden by default, shown via JS */
}

/* Add visual styling for "Add New" options in taxonomies */
.ubitto-pc-taxonomy-select option[value="add_new"],
.ubitto-pc-taxonomy-multiselect option[value="add_new"] {
    font-weight: bold;
    color: #2271b1;
    background-color: #f0f6fc;
}

/* New taxonomy input fields */
#new_subject_category_field,
#new_language_field,
#mother_tongue_other_field,
#new_industry_field {
    margin-top: -10px;
    padding-top: 5px;
    border-left: 3px solid #2271b1;
    padding-left: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

/* Community Group Wrapper */
.ubitto-pc-community-group-wrapper {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.ubitto-pc-community-group-wrapper .ubitto-pc-input {
    flex: 1;
}

.ubitto-pc-create-group-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 16px !important;
    font-size: 13px !important;
}

/* Hide create button when URL has value */
.ubitto-pc-community-group-wrapper.has-url .ubitto-pc-create-group-btn {
    display: none;
}

/* === Modal Styles === */
.ubitto-pc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.ubitto-pc-modal-content {
    background: #fff;
    border-radius: 8px;
    display: flex;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.ubitto-pc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f8f8;
    border-radius: 8px 8px 0 0;
}

.ubitto-pc-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.ubitto-pc-modal-close {
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ubitto-pc-modal-close:hover {
    background: #e0e0e0;
    color: #333;
}

.ubitto-pc-modal-body {
    padding: 30px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

.ubitto-pc-modal-loader {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
}

/* Prevent body scroll when modal is open */
body.ubitto-pc-modal-open {
    overflow: hidden;
}

/* Style the BuddyBoss content within modal */
.ubitto-pc-modal-body .bb-rl-content-wrapper,
.ubitto-pc-modal-body #buddypress,
.ubitto-pc-modal-body .bp-nouveau {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Ensure buttons in modal are visible */
.ubitto-pc-modal-body button,
.ubitto-pc-modal-body input[type="submit"],
.ubitto-pc-modal-body .button {
    cursor: pointer;
}

/* Ensure form fields are properly styled */
.ubitto-pc-modal-body input[type="text"],
.ubitto-pc-modal-body input[type="email"],
.ubitto-pc-modal-body input[type="url"],
.ubitto-pc-modal-body textarea,
.ubitto-pc-modal-body select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix BuddyBoss form layout in modal */
.ubitto-pc-modal-body .editfield {
    margin-bottom: 20px;
}

.ubitto-pc-modal-body label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* Ensure proper spacing for form groups */
.ubitto-pc-modal-body .form-group,
.ubitto-pc-modal-body .bp-field-wrap {
    margin-bottom: 20px;
}

/* Fix any absolute positioning issues */
.ubitto-pc-modal-body * {
    position: relative !important;
}

.ubitto-pc-modal-body .ubitto-pc-modal-body,
.ubitto-pc-modal-content,
.ubitto-pc-modal-overlay {
    position: fixed !important;
}

/* Ensure BuddyBoss navigation steps are visible */
.ubitto-pc-modal-body #group-create-tabs {
    margin-bottom: 20px;
}

/* Make sure images and media are responsive */
.ubitto-pc-modal-body img {
    max-width: 100%;
    height: auto;
}

/* === Iframe Modal Specific Styles === */
.ubitto-pc-modal-iframe {
    max-width: 95vw;
    max-height: 95vh;
}

.ubitto-pc-modal-iframe-body {
    padding: 0;
    overflow: hidden;
}

.ubitto-pc-group-iframe {
    width: 100%;
    height: calc(95vh - 80px);
    min-height: 600px;
    border: none;
    display: block;
    background: #fff;
}

/* Hide header elements in iframe (note: this won't work due to same-origin policy) */
/* We'll need to add URL parameter instead */

/* === Location Autocomplete and Map === */
.ubitto-pc-location-wrapper {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.ubitto-pc-location-wrapper .ubitto-pc-location-input {
    flex: 1;
}

.ubitto-pc-map-toggle-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 16px !important;
    font-size: 13px !important;
}

.ubitto-pc-location-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: -3px;
}

.ubitto-pc-location-suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.ubitto-pc-location-suggestion-item:last-child {
    border-bottom: none;
}

.ubitto-pc-location-suggestion-item:hover {
    background-color: #f8f8f8;
}

.ubitto-pc-map-container {
    margin-top: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    overflow: hidden;
}

#location_map {
    height: 300px;
    width: 100%;
}

/* Leaflet map fixes */
.leaflet-container {
    font-family: inherit;
}

/* === Days Checkboxes === */
.ubitto-pc-days-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

/* === Video Upload === */
.ubitto-pc-video-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ubitto-pc-video-url-input {
    flex: 1;
}

.ubitto-pc-video-upload-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ubitto-pc-upload-video-btn {
    padding: 8px 20px !important;
    font-size: 14px !important;
}

.ubitto-pc-btn-link {
    background: none !important;
    color: #e74c3c !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    text-decoration: underline;
}

.ubitto-pc-btn-link:hover {
    color: #c0392b !important;
    background: none !important;
}

.ubitto-pc-video-preview {
    margin-top: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    background: #000;
}

.ubitto-pc-video-preview video {
    display: block;
    width: 100%;
    max-height: 400px;
}

.ubitto-pc-video-info {
    padding: 12px 16px;
    background: #f8f8f8;
    border-top: 1px solid #e0e0e0;
}

.ubitto-pc-video-name {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* === Booking Setup Modal === */
.ubitto-booking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.ubitto-booking-modal-overlay.active {
    opacity: 1;
}

.ubitto-booking-modal {
    background: white;
    border-radius: 12px;
    padding: 48px 40px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.ubitto-booking-modal-overlay.active .ubitto-booking-modal {
    transform: scale(1);
}

.ubitto-booking-modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #4caf50;
    color: white;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.ubitto-booking-modal-icon svg {
    width: 48px;
    height: 48px;
    stroke: white;
}

.ubitto-booking-modal h2 {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 16px 0;
}

.ubitto-booking-modal p {
    font-size: 16px;
    color: #666;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.ubitto-booking-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ubitto-booking-modal-actions .ubitto-pc-btn {
    width: 100%;
    text-align: center;
    padding: 16px 32px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ubitto-booking-modal-actions .ubitto-pc-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ubitto-booking-modal-actions-row {
    flex-direction: row !important;
    justify-content: center;
    gap: 12px;
}

.ubitto-booking-modal-actions-row .ubitto-pc-btn {
    width: auto !important;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 14px;
}

.ubitto-booking-modal-actions-row .ubitto-pc-btn-outline {
    padding: 10px 16px;
}

.ubitto-booking-modal-actions-bottom {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.ubitto-booking-modal-actions-bottom .ubitto-pc-btn {
    padding: 12px 24px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ubitto-pc-btn-outline {
    background: transparent;
    border: 2px solid var(--ub-primary, #2563eb);
    color: var(--ub-primary, #2563eb);
}

.ubitto-pc-btn-outline:hover {
    background: var(--ub-primary, #2563eb);
    color: #fff;
}

.ubitto-pc-btn-secondary {
    background: #64748b;
    color: #fff;
    border: none;
}

.ubitto-pc-btn-secondary:hover {
    background: #475569;
}

.ubitto-booking-modal-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.ubitto-booking-modal-note svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.ubitto-booking-modal-note p {
    font-size: 13px;
    color: #888;
    margin: 0;
    text-align: left;
}

/* Prevent body scroll when booking modal is open */
body.ubitto-booking-modal-open {
    overflow: hidden;
}

/* === Amelia Employee Panel Modal === */
.ubitto-amelia-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.ubitto-amelia-modal-overlay.active {
    opacity: 1;
}

.ubitto-amelia-modal {
    background: white;
    border-radius: 12px;
    max-width: 1060px;
    width: 100%;
    max-height: 95vh;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ubitto-amelia-modal-overlay.active .ubitto-amelia-modal {
    transform: scale(1);
}

.ubitto-amelia-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f8f8;
}

.ubitto-amelia-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.ubitto-amelia-modal-tooltip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    background: #e3f2fd;
    border-bottom: 1px solid #bbdefb;
}

.ubitto-amelia-modal-tooltip svg {
    flex-shrink: 0;
    color: #2196f3;
    margin-top: 2px;
}

.ubitto-amelia-modal-tooltip p {
    margin: 0;
    font-size: 14px;
    color: #1565c0;
    line-height: 1.5;
}

.ubitto-amelia-modal-close {
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.ubitto-amelia-modal-close:hover {
    background: #e0e0e0;
    color: #333;
}

.ubitto-amelia-modal-body {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #fff;
}

.ubitto-amelia-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.ubitto-amelia-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(242, 101, 34, 0.2);
    border-top-color: #f26522;
    border-radius: 50%;
    animation: ameliaSpin 1s linear infinite;
}

@keyframes ameliaSpin {
    to { transform: rotate(360deg); }
}

.ubitto-amelia-loading p {
    margin: 0;
    font-size: 16px;
    color: #666;
}

#amelia-employee-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Prevent body scroll when Amelia modal is open */
body.ubitto-amelia-modal-open {
    overflow: hidden;
}

/* === Responsive === */
@media (max-width: 768px) {
    .ubitto-pc-wrapper {
        padding: 20px 10px;
    }

    .ubitto-pc-step-content {
        padding: 24px 20px;
    }

    .ubitto-pc-step-title {
        font-size: 22px;
    }

    .ubitto-pc-program-types {
        grid-template-columns: 1fr;
    }

    .ubitto-pc-form-row {
        grid-template-columns: 1fr !important;
    }

    .ubitto-pc-days-group {
        gap: 8px !important;
    }

    .ubitto-pc-progress-steps {
        gap: 8px;
    }

    .ubitto-pc-step {
        min-width: 60px;
    }

    .ubitto-pc-step .step-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .ubitto-pc-step .step-label {
        font-size: 10px;
        line-height: 1.3;
    }

    .ubitto-pc-form-navigation {
        flex-direction: row;
        gap: 8px;
    }

    .ubitto-pc-form-navigation .ubitto-pc-btn {
        flex: 1;
        padding: 10px 12px;
        font-size: 13px;
    }

    .ubitto-booking-modal {
        padding: 32px 24px;
    }

    .ubitto-booking-modal h2 {
        font-size: 24px;
    }

    .ubitto-booking-modal-actions {
        gap: 6px;
    }

    .ubitto-booking-modal-actions .ubitto-pc-btn {
        padding: 14px 24px;
        font-size: 14px;
    }

    .ubitto-booking-modal-actions-row {
        flex-direction: column !important;
    }

    .ubitto-booking-modal-actions-row .ubitto-pc-btn {
        max-width: 100%;
    }
}

/* Loading Overlay for Edit Program Page */
.ubitto-pc-loading-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
}

.ubitto-pc-loading-overlay.active {
    display: flex !important;
}

.ubitto-pc-loading-content {
    text-align: center;
}

.ubitto-pc-spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #f26522;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: ubitto-spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes ubitto-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ubitto-pc-loading-content p {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

/* Initial Page Loading Overlay (separate from form submission overlay) */
.ubitto-pc-initial-loading {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
}

.ubitto-pc-initial-loading.active {
    display: flex !important;
}

/* === Certification Carousel Arrows === */
.ubitto-cert-prev svg,
.ubitto-cert-next svg {
    display: block !important;
    pointer-events: none;
}

.ubitto-cert-prev svg polyline,
.ubitto-cert-next svg polyline {
    stroke: #333 !important;
    stroke-width: 2 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.ubitto-cert-prev:hover svg polyline,
.ubitto-cert-next:hover svg polyline {
    stroke: #0073aa !important;
}

/* === Terms and Conditions Modal === */
.ubitto-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

.ubitto-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.ubitto-modal-content {
    position: relative;
    background: white;
    max-width: 800px;
    max-height: 90vh;
    margin: 5vh auto;
    border-radius: 8px;
    display: flex;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.ubitto-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ubitto-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

button.ubitto-modal-close {
    font-size: 18px;
    padding: 4px 8px;
    background-color: unset;
    border: 1px solid #dcdfe6;
    color: #7f8fa4;
    cursor: pointer;
    line-height: 1.1;
}

button.ubitto-modal-close:hover {
    color: #1a84ee !important;
    border-color: #1a84ee !important;
    background-color: #ecf5ff !important;
}

.ubitto-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.ubitto-terms-loading {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
}

.ubitto-terms-content {
    line-height: 1.6;
    color: #333;
}

.ubitto-terms-content h1,
.ubitto-terms-content h2,
.ubitto-terms-content h3 {
    margin-top: 24px;
    margin-bottom: 12px;
}

.ubitto-terms-content p {
    margin-bottom: 16px;
}

.ubitto-terms-content ul,
.ubitto-terms-content ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.ubitto-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

/* Prevent body scroll when modal is open */
body.ubitto-modal-open {
    overflow: hidden !important;
}



/* Lesson Builder Button in Success Message */
.ubitto-pc-btn-builder {
    background: linear-gradient(135deg, #f26522 0%, #e05515 100%);
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ubitto-pc-btn-builder:hover {
    background: linear-gradient(135deg, #e05515 0%, #d04510 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 101, 34, 0.3);
}

.ubitto-pc-btn-builder svg {
    flex-shrink: 0;
}

/* Course Builder Modal */
.ubitto-course-builder-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
}

.ubitto-course-builder-modal-overlay.active {
    display: flex;
}

body.ubitto-course-builder-modal-open {
    overflow: hidden;
}

.ubitto-course-builder-modal {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 1060px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s ease;
}

.ubitto-course-builder-modal-overlay.active .ubitto-course-builder-modal {
    transform: scale(1);
    opacity: 1;
}

.ubitto-course-builder-modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ubitto-course-builder-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.ubitto-course-builder-modal-close {
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.ubitto-course-builder-modal-close:hover {
    background: #f5f5f5;
    color: #333;
}

.ubitto-course-builder-modal-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ubitto-course-builder-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ubitto-course-builder-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #f26522;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ubitto-course-builder-loading p {
    color: #666;
    font-size: 14px;
}

.bb-readylaunch-template select {
    background-color: #f6f6f6;
    padding: 6px 32px 8px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    display: flex;
    color: #242425;
}

/* === Radio Group Styles === */
.ubitto-pc-radio-label span {
    font-size: 14px;
}

.ubitto-pc-radio-group {
    display: flex;
    flex-direction: column;
    padding: 6px 32px 6px 8px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    display: flex;
    background-color: #f6f6f6;
}

/* === Conducting Days Checkbox Styles === */
.ubitto-pc-days-group label {
    font-size: 14px;
}

.ubitto-pc-days-group input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    opacity: 1 !important;
    position: relative !important;
    margin: 0 !important;
    flex-shrink: 0;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    cursor: pointer;
}

.amelia-v2-booking #amelia-container.am-cap__wrapper {
    margin: 0px auto 30px !important;
}

/* Mobile responsive for location field */
@media (max-width: 480px) {
    /* 1on1 duration per session mobile */
    .ubitto-pc-1on1-duration-container .ubitto-pc-form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .ubitto-pc-1on1-online-duration,
    .ubitto-pc-1on1-inperson-duration {
        width: 100% !important;
    }

    /* Duration per session mobile layout */
    .ubitto-pc-group-class-online-only .ubitto-pc-form-row,
    .ubitto-pc-group-class-offline-only .ubitto-pc-form-row,
    .ubitto-pc-scheduled-session-only .ubitto-pc-form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .ubitto-pc-group-class-online-only .ubitto-pc-form-row .ubitto-pc-form-group,
    .ubitto-pc-group-class-offline-only .ubitto-pc-form-row .ubitto-pc-form-group,
    .ubitto-pc-scheduled-session-only .ubitto-pc-form-row .ubitto-pc-form-group {
        width: 100% !important;
    }

    /* Certificate carousel mobile */
    .ubitto-certificate-carousel-wrapper {
        padding: 0 35px;
    }
    
    .ubitto-cert-slide {
        flex: 0 0 100% !important;
        margin-right: 0 !important;
    }
    
    .ubitto-cert-prev {
        left: -5px !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    .ubitto-cert-next {
        right: -5px !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    .ubitto-cert-prev svg,
    .ubitto-cert-next svg {
        width: 14px !important;
        height: 14px !important;
    }

    .ubitto-pc-community-group-wrapper {
        flex-direction: column;
    }
    
    .ubitto-pc-create-group-btn {
        width: 100%;
        margin-top: 8px;
    }

    .ubitto-pc-location-wrapper {
        flex-direction: column;
    }
    
    .ubitto-pc-map-toggle-btn {
        width: 100%;
        margin-top: 8px;
    }
}

/* Hide footer on create-program and edit-program pages */
.bb-footer,
.footer-bottom,
.footer-widget-area,
footer.bb-footer,
footer.footer-bottom,
.site-footer,
#footer,
.ubitto-footer,
footer.ubitto-footer {
    display: none !important;
}

/* Disabled terms checkbox for edit mode */
.ubitto-pc-terms-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ubitto-pc-terms-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

/* Keep the terms link clickable */
.ubitto-pc-terms-disabled a {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

/* === Co-Educator Field === */
.ubitto-co-ed-search-wrap { position: relative; }
.ubitto-co-ed-results {
    position: absolute; z-index: 100; top: 100%; left: 0; right: 0;
    background: #fff; border: 1px solid #d0d0d0; border-top: none;
    border-radius: 0 0 6px 6px; max-height: 220px; overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ubitto-co-ed-result-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; font-size: 14px;
}
.ubitto-co-ed-result-item:hover { background: #f5f5f5; }
.ubitto-co-ed-no-result { color: #999; cursor: default; }
.ubitto-co-ed-no-result:hover { background: transparent; }
.ubitto-co-ed-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ubitto-co-ed-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ubitto-co-ed-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: #f7f7f7; border: 1px solid #e0e0e0;
    border-radius: 8px; font-size: 14px;
}
.ubitto-co-ed-chip .ubitto-co-ed-name { flex: 1; font-weight: 500; }
.ubitto-co-ed-toggle {
    background: #e0e0e0; border: none; padding: 4px 10px;
    border-radius: 12px; font-size: 11px; font-weight: 600;
    cursor: pointer; color: #666; white-space: nowrap;
}
.ubitto-co-ed-toggle--active { background: #4caf50; color: #fff; }
.ubitto-co-ed-remove {
    background: none; border: none; font-size: 18px; line-height: 1;
    cursor: pointer; color: #999; padding: 0 4px;
}
.ubitto-co-ed-remove:hover { color: #d63638; }

/* === wp_editor's "Add Media" button — reskin to match form buttons ===
   wp_editor(..., media_buttons => true) injects a <button class="button
   insert-media add_media"> sitting outside our control. The BuddyBoss
   theme styles core .button as a bright yellow CTA in the admin
   context; on this frontend form that makes the button visually clash
   with our other CTAs. We re-style it to be identical to the
   .ubitto-pc-btn .ubitto-pc-btn-secondary .ubitto-pc-upload-btn combo
   (slate-blue #64748b, padding 8px 20px, 14px, 600 weight, radius 8px,
   .3s all transition, hover → #475569). */
.ubitto-pc-form-group .wp-media-buttons {
    margin-bottom: 6px;
}
.ubitto-pc-form-group .wp-media-buttons .button,
.ubitto-pc-form-group .wp-media-buttons .add_media,
.ubitto-pc-form-group .wp-media-buttons .button.insert-media {
    /* Match .ubitto-pc-upload-btn padding (overrides base 10px 25px). */
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: normal !important;
    /* Match .ubitto-pc-btn-secondary fill + border. */
    color: #fff !important;
    background: #64748b !important;
    border: none !important;
    border-radius: 8px !important;
    /* Kill admin-theme injections that warp the look. */
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    height: auto !important;
    /* Match the base .ubitto-pc-btn behavior. */
    display: inline-block !important;
    cursor: pointer;
    transition: all 0.3s !important;
}
.ubitto-pc-form-group .wp-media-buttons .button:hover,
.ubitto-pc-form-group .wp-media-buttons .button:focus-visible,
.ubitto-pc-form-group .wp-media-buttons .add_media:hover,
.ubitto-pc-form-group .wp-media-buttons .add_media:focus-visible {
    background: #475569 !important;
    color: #fff !important;
    outline: none;
}
/* Hide the dashicon glyph WordPress injects — the label "Add Media"
   alone is clear enough, and the camera icon clashed with the cleaner
   look of the surrounding buttons. */
.ubitto-pc-form-group .wp-media-buttons .dashicons,
.ubitto-pc-form-group .wp-media-buttons .wp-media-buttons-icon {
    display: none !important;
}

/* === Autofill actions row (resume upload + import-from-existing) ===
   Two side-by-side CTAs that do the same job: prefill the form.
   Both buttons share a FIXED height (40px) so any difference in
   internal padding from .ubitto-pc-btn vs .ubitto-pc-upload-btn
   cascade order can't drift them apart. Selectors hit
   button.<class> so they outrank both .ubitto-pc-btn and the
   single-class .ubitto-pc-upload-btn rule. */
.ubitto-pc-autofill-actions {
    display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
    margin-bottom:6px;
}
.ubitto-pc-autofill-actions button.ubitto-pc-upload-btn,
.ubitto-pc-autofill-actions button.ubitto-pc-use-profile-btn,
.ubitto-pc-autofill-actions button.ubitto-pc-import-existing-btn {
    height:40px !important;
    min-height:40px !important;
    padding:0 18px !important;
    font-size:14px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px;
    border:1px solid transparent !important;
    box-sizing:border-box !important;
    vertical-align:middle;
    /* Override the .ubitto-pc-btn "transition: all 0.3s" — that
       animates every property at once (bg + border + color +
       shadow + transform), which feels laggy. Limit to bg/border/
       color and run it fast. */
    transition: background-color .12s ease, border-color .12s ease, color .12s ease !important;
}
.ubitto-pc-autofill-actions button.ubitto-pc-import-existing-btn {
    position:relative;
}
.ubitto-pc-autofill-actions button.ubitto-pc-import-existing-btn::before {
    content:"⇪"; opacity:.85; font-size:14px; line-height:1;
}
.ubitto-pc-autofill-actions button.ubitto-pc-use-profile-btn::before {
    content:"⚡"; opacity:.85; font-size:14px; line-height:1;
}

/* Loading state — disabled + lighter look, spinner icon replaces the
   normal glyph. The spinner uses a CSS keyframe so we don't need extra
   markup. */
.ubitto-pc-autofill-actions button.ubitto-pc-use-profile-btn.is-loading,
.ubitto-pc-autofill-actions button.ubitto-pc-import-existing-btn.is-loading {
    opacity:.85;
    cursor:wait !important;
}
.ubitto-pc-autofill-actions button.ubitto-pc-use-profile-btn.is-loading::before,
.ubitto-pc-autofill-actions button.ubitto-pc-import-existing-btn.is-loading::before {
    content:"" !important;
    width:14px; height:14px; border-radius:50%;
    border:2px solid rgba(99,102,241,.25);
    border-top-color:#6366f1;
    animation:pc-spin .7s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* Status line below the buttons — three flavors: loading (indigo),
   success (green), error (red). Padded chip so it reads as a
   distinct feedback area, not just stray text. */
.ubitto-pc-autofill-status {
    margin-top:10px;
    padding:8px 12px;
    border-radius:6px;
    font-size:13px;
    line-height:1.45;
    max-width:560px;
    border:1px solid transparent;
    display:flex; align-items:center; gap:8px;
}
.ubitto-pc-autofill-status[hidden] { display:none; }
.ubitto-pc-autofill-status.is-loading {
    background:#eef2ff; border-color:#c7d2fe; color:#3730a3;
}
.ubitto-pc-autofill-status.is-success {
    background:#ecfdf5; border-color:#a7f3d0; color:#065f46;
}
.ubitto-pc-autofill-status.is-error {
    background:#fef2f2; border-color:#fecaca; color:#991b1b;
}
.ubitto-pc-autofill-status .spin {
    display:inline-block;
    animation:pc-spin-emoji 1s linear infinite;
}
@keyframes pc-spin-emoji { to { transform: rotate(360deg); } }

/* Hover / focus — clean color swap only. No transform, no box-shadow,
   no flashy animation. Three properties (bg + border + color) and
   they're all included in the .12s transition above. */
.ubitto-pc-autofill-actions button.ubitto-pc-upload-btn:hover,
.ubitto-pc-autofill-actions button.ubitto-pc-upload-btn:focus-visible,
.ubitto-pc-autofill-actions button.ubitto-pc-use-profile-btn:hover,
.ubitto-pc-autofill-actions button.ubitto-pc-use-profile-btn:focus-visible,
.ubitto-pc-autofill-actions button.ubitto-pc-import-existing-btn:hover,
.ubitto-pc-autofill-actions button.ubitto-pc-import-existing-btn:focus-visible,
.ubitto-pc-autofill-actions button.ubitto-pc-import-existing-btn[aria-expanded="true"] {
    background:#eef2ff !important;
    border-color:#6366f1 !important;
    color:#3730a3 !important;
    outline:none;
}

/* The picker drops below the buttons; styled like a compact menu. */
.ubitto-pc-import-picker {
    margin-top:10px; padding:0; background:#fff;
    border:1px solid #e2e8f0; border-radius:8px;
    box-shadow:0 6px 18px -8px rgba(15,23,42,.18);
    max-width:520px; width:100%;
    overflow:hidden;
}
.ubitto-pc-import-picker[hidden]{display:none}
.ubitto-pc-import-picker-head {
    display:flex; flex-direction:column; gap:2px;
    padding:10px 14px; border-bottom:1px solid #f1f5f9;
    background:#fafbfc;
}
.ubitto-pc-import-picker-head strong { font-size:13px; color:#1f242c }
.ubitto-pc-import-picker-hint { font-size:11.5px; color:#64748b }
.ubitto-pc-import-picker-list {
    list-style:none; margin:0; padding:4px 0;
    max-height:280px; overflow-y:auto;
}
.ubitto-pc-import-picker-list li {
    display:flex; flex-direction:column; gap:2px;
    padding:9px 14px; cursor:pointer;
    border-bottom:1px solid #f8fafc;
    transition:background .12s;
}
.ubitto-pc-import-picker-list li:last-child { border-bottom:0 }
.ubitto-pc-import-picker-list li:hover,
.ubitto-pc-import-picker-list li:focus-visible {
    background:#eef2ff; outline:none;
}
.ubitto-pc-import-picker-list .pck-title {
    font-size:13.5px; font-weight:600; color:#1f242c;
}
.ubitto-pc-import-picker-list .pck-meta {
    font-size:11px; color:#64748b;
    display:flex; gap:8px; align-items:center;
}
.ubitto-pc-import-picker-list .pck-status {
    text-transform:uppercase; letter-spacing:.04em;
    font-weight:700; font-size:10px; padding:1px 6px;
    border-radius:3px; background:#e2e8f0; color:#475569;
}
.ubitto-pc-import-picker-list .pck-status.is-publish { background:#dcfce7; color:#166534 }
.ubitto-pc-import-picker-list .pck-status.is-pending { background:#fef3c7; color:#92400e }
.ubitto-pc-import-picker-list .pck-status.is-draft   { background:#e2e8f0; color:#475569 }
.ubitto-pc-import-picker-empty,
.ubitto-pc-import-picker-loading {
    padding:14px; text-align:center;
    color:#64748b; font-size:13px;
}