.b2bpd-panel {
    margin-top: 20px;
}

.b2bpd-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
	background: #ffffff!important;
	font-size: 16px;
}

.b2bpd-panel-heading strong::before {
    content: "\f15c";
    font-family: FontAwesome;
    margin-right: 8px;
    font-weight: normal;
}

.b2bpd-panel-toggle {
    position: relative;
    width: 14px;
    height: 14px;
    margin-left: 12px;
    flex: 0 0 14px;
}

.b2bpd-panel-toggle::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.b2bpd-panel.is-collapsed .b2bpd-panel-toggle::before {
    transform: rotate(-45deg);
    top: 3px;
}

.b2bpd-panel .dokan-panel-body {
    padding: 16px 20px;
}

.b2bpd-panel.is-collapsed .b2bpd-panel-body {
    display: none;
}

.b2bpd-description {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}

.b2bpd-upload-form {
    border-top: 1px solid #eee;
    padding-top: 14px;
}

.b2bpd-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.b2bpd-input {
    flex: 1 1 auto;
    min-width: 220px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
}

.b2bpd-file-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.b2bpd-panel .b2bpd-file-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    background: #4a90e2 !important;
    border: 1px solid #4a90e2 !important;
    border-radius: 3px !important;
    color: #fff !important;
    cursor: pointer;
    margin: 0 !important;
    white-space: nowrap;
    transition: all .15s ease;
    box-shadow: none !important;
}

.b2bpd-panel .b2bpd-file-button:hover,
.b2bpd-panel .b2bpd-file-button:focus,
.b2bpd-panel .b2bpd-file-button:active {
    background: #1f69c1 !important;
    border-color: #1f69c1 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.b2bpd-panel .b2bpd-upload-button.button,
.b2bpd-panel .b2bpd-upload-button.button-primary {
    white-space: nowrap;
    height: 40px;
    padding: 0 16px;
    border-radius: 3px !important;
    background: #4a90e2 !important;
    border: 1px solid #4a90e2 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.b2bpd-panel .b2bpd-upload-button.button:hover,
.b2bpd-panel .b2bpd-upload-button.button:focus,
.b2bpd-panel .b2bpd-upload-button.button:active,
.b2bpd-panel .b2bpd-upload-button.button-primary:hover,
.b2bpd-panel .b2bpd-upload-button.button-primary:focus,
.b2bpd-panel .b2bpd-upload-button.button-primary:active {
    background: #1f69c1 !important;
    border-color: #1f69c1 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.b2bpd-file-name {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    word-break: break-word;
}

.b2bpd-debug-output {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.b2bpd-debug-output > div,
.b2bpd-debug-output > span {
    display: block;
    padding: 10px 12px;
    border-radius: 4px;
    background: #f8f8f8;
}

.b2bpd-debug-output .b2bpd-success {
    background: #ecf7ed;
    color: #146c2e;
    border: 1px solid #b7dfbf;
}

.b2bpd-debug-output .b2bpd-error {
    background: #fff0f0;
    color: #b42318;
    border: 1px solid #f3b3b3;
}

.b2bpd-documents-list-wrap {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 14px;
}

.b2bpd-list-title {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.4;
}

.b2bpd-document-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.b2bpd-document-main {
    min-width: 0;
}

.b2bpd-document-title {
    font-weight: 600;
    color: #222;
    margin-bottom: 2px;
}

.b2bpd-document-title-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.b2bpd-title-edit-input {
    min-width: 220px;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #ccd0d4;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
}

.b2bpd-document-meta {
    font-size: 13px;
    color: #666;
    word-break: break-word;
}

.b2bpd-document-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.b2bpd-panel .b2bpd-document-actions .button,
.b2bpd-panel .b2bpd-document-title-edit .button {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 30px;
    border-radius: 3px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.b2bpd-panel .b2bpd-edit-title-button.button,
.b2bpd-panel .b2bpd-save-title-button.button,
.b2bpd-panel .b2bpd-cancel-title-button.button {
    background: #eef3f8 !important;
    border: 1px solid #c9d6e2 !important;
    color: #33475b !important;
}

.b2bpd-panel .b2bpd-edit-title-button.button:hover,
.b2bpd-panel .b2bpd-edit-title-button.button:focus,
.b2bpd-panel .b2bpd-edit-title-button.button:active,
.b2bpd-panel .b2bpd-save-title-button.button:hover,
.b2bpd-panel .b2bpd-save-title-button.button:focus,
.b2bpd-panel .b2bpd-save-title-button.button:active,
.b2bpd-panel .b2bpd-cancel-title-button.button:hover,
.b2bpd-panel .b2bpd-cancel-title-button.button:focus,
.b2bpd-panel .b2bpd-cancel-title-button.button:active {
    background: #dfeaf5 !important;
    border-color: #b8c9db !important;
    color: #22384f !important;
    box-shadow: none !important;
}

.b2bpd-panel .b2bpd-delete-document-button.button {
    background: #f8ecec !important;
    border: 1px solid #e2c2c2 !important;
    color: #8a3b3b !important;
}

.b2bpd-panel .b2bpd-delete-document-button.button:hover,
.b2bpd-panel .b2bpd-delete-document-button.button:focus,
.b2bpd-panel .b2bpd-delete-document-button.button:active {
    background: #f2dede !important;
    border-color: #d7a9a9 !important;
    color: #7a2d2d !important;
    box-shadow: none !important;
}

.b2bpd-empty-list {
    font-size: 14px;
    color: #777;
}

@media (max-width: 900px) {
    .b2bpd-upload-row {
        flex-wrap: wrap;
    }

    .b2bpd-input {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .b2bpd-document-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .b2bpd-document-actions {
        width: 100%;
    }
}