/* Shared slide-over create panel (cargo + marketing banners) */
@keyframes cargoCreateFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cargoCreateFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes cargoCreateSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cargoCreateSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }

.cargo-create-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,.45); animation: cargoCreateFadeIn .28s ease-out; }
.cargo-create-backdrop.is-closing { animation: cargoCreateFadeOut .28s ease-in forwards; }

.cargo-create-shell {
    position: fixed; z-index: 1050; background: var(--barex-surface); display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 0 35px rgba(0,0,0,.15);
    transition: top 1s ease-in-out, left 1s ease-in-out, right 1s ease-in-out, bottom 1s ease-in-out, width 1s ease-in-out,
        height 1s ease-in-out, max-height 1s ease-in-out, border-radius 1s ease-in-out, transform 1s ease-in-out;
}
.cargo-create-shell.is-panel { top: 0; bottom: 0; left: 0; right: auto; width: 500px; height: 100vh; max-height: 100vh; border-radius: 0; transform: none; }
.cargo-create-shell.is-dialog {
    top: 50%; left: 50%; right: auto; bottom: auto; width: min(1090px, calc(100vw - 32px)); height: min(709px, calc(100vh - 32px));
    max-height: min(709px, calc(100vh - 32px)); border-radius: 12px; transform: translate(-50%, -50%);
}
.cargo-create-shell.is-dialog.is-dialog-size-resize { transition: width 1s ease-in-out, height 1s ease-in-out, max-height 1s ease-in-out; }
.cargo-create-shell.is-dialog.is-dialog-size-resize.is-dialog-size-default {
    width: min(1090px, calc(100vw - 32px)); height: min(709px, calc(100vh - 32px)); max-height: min(709px, calc(100vh - 32px));
}
.cargo-create-shell.is-dialog.is-dialog-size-resize.is-dialog-size-full {
    width: calc(100vw - 32px); height: calc(100vh - 32px); max-height: calc(100vh - 32px);
}
.cargo-create-shell.is-closing { animation: cargoCreateSlideDown .28s ease-in forwards; }

.cargo-create-header { flex-shrink: 0; border-bottom: 1px solid var(--barex-divider); padding: 0 16px 0 23px; height: 56px; display: flex; align-items: center; }
.cargo-create-header.is-dialog-header { height: 49px; }
.cargo-create-body { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 0; min-height: 0; -webkit-overflow-scrolling: touch; }
.cargo-create-shell.is-dialog .cargo-create-body { overflow: hidden; display: flex; flex-direction: column; }
.cargo-create-shell.is-dialog .cargo-create-body .cargo-create-form { overflow-y: auto; flex: 1; min-height: 0; }
.cargo-create-footer { flex-shrink: 0; border-top: 1px solid var(--barex-divider); padding: 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.cargo-create-header-inner { width: 100%; }
.cargo-create-title { font-size: 16px; font-weight: 500; color: var(--barex-text-primary); text-align: right; margin: 0; }
.cargo-create-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--barex-divider); border-radius: 10px; background: var(--barex-surface); color: var(--barex-text-primary); cursor: pointer; }
.cargo-create-icon-btn:disabled { opacity: .65; pointer-events: none; }
.cargo-create-icon-btn i { font-size: 20px; }
.cargo-create-header-sep { display: inline-block; width: 1px; height: 20px; background: var(--barex-divider); flex-shrink: 0; }

.cargo-create-form { display: flex; flex-direction: column; gap: 0; min-width: 0; max-width: 100%; }
.cargo-create-form.is-panel .cargo-create-section { padding: 16px; }
.cargo-create-divider { height: 1px; background: var(--barex-divider); width: 100%; flex-shrink: 0; }
.cargo-create-block { display: flex; flex-direction: column; gap: 12px; }

.cargo-btn-primary { border: 0; background: var(--barex-primary); color: var(--barex-onprimary); border-radius: 10px; padding: 6px 32px; font-size: 14px; min-height: 30px; }
.cargo-btn-outline { border: 1px solid var(--barex-primary); background: var(--barex-surface); color: var(--barex-primary); border-radius: 10px; padding: 6px 32px; font-size: 14px; min-height: 30px; }

@media (max-width: 767.98px) {
    .cargo-create-toggle-wrap { display: none !important; }
    .cargo-create-shell.is-panel, .cargo-create-shell.is-dialog {
        top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 90vh; border-radius: 16px 16px 0 0;
        transform: none; animation: cargoCreateSlideUp .28s ease-out;
    }
    .cargo-create-shell.is-dialog .cargo-create-body { overflow-y: auto; display: block; }
}