/* Collection item: "add to collection" wizard, scans editor, item details.
   Shared by the catalog (catalog.v2.html) and "Мои коллекции" (views/User/Profile/collections.html);
   templates - views/Catalog/Collection/item_wizard.html, code - js/vue-libs/components/collection-item-wizard.js */

input#collection-item-price + div .vs__dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.style-radio {
    display: block;
    position: relative;
    padding-left: 30px;
    transition: all .3s ease-in-out;
    input {
        display: none;
    }
    &::before {
        display: block;
        content: '';
        width: 18px;
        height: 18px;
        border: 2px solid #ccc;
        border-radius: 50%;
        margin-right: 10px;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        left: 0;
        cursor: pointer;
    }
    &:has(input:checked) {
        color: var(--accent-color);
        font-weight: 600;
    }
    &:has(input:checked)::before {
        background-color: #3c6690;
        border-color: #3c6690;
        z-index: 0;
    }
    &::after {
        content: '';
        width: 14px;
        height: 14px;
        border: 2.5px solid white;
        position: absolute;
        border-radius: 50%;
        left: 2px;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 1;
        cursor: pointer;
    }
    &:hover:before {
        border-color: #3c6690;
    }
    span {
        text-transform: capitalize;
    }
}

.new-collection-text p {
    font-size: .66rem;
    margin-bottom: .75rem;
    line-height: 1.5;
}

.air-datepicker-global-container {
    z-index: 100000;
}

/* Collection item: step-by-step form */
.collection-wizard-steps {
    display: flex;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.collection-wizard-steps li {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    position: relative;
    color: #9aa5ad;
    font-size: .75rem;
    text-align: center;
}
.collection-wizard-steps li:not(:first-child)::before {
    content: '';
    position: absolute;
    top: .8rem;
    right: calc(50% + 1rem);
    width: calc(100% - 2rem + .25rem);
    border-top: 2px solid #dee2e6;
}
.collection-wizard-steps li.passed:not(:first-child)::before,
.collection-wizard-steps li.active:not(:first-child)::before {
    border-color: var(--bs-color-very-dark-blue, #003958);
}
.collection-wizard-step-number {
    width: 1.6rem;
    height: 1.6rem;
    line-height: calc(1.6rem - 4px);
    border-radius: 50%;
    border: 2px solid #dee2e6;
    background: #fff;
    font-weight: bold;
}
.collection-wizard-step-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.collection-wizard-steps li.passed .collection-wizard-step-number {
    border-color: var(--bs-color-very-dark-blue, #003958);
    color: var(--bs-color-very-dark-blue, #003958);
}
.collection-wizard-steps li.active {
    color: var(--bs-color-very-dark-blue, #003958);
    font-weight: bold;
}
.collection-wizard-steps li.active .collection-wizard-step-number {
    border-color: var(--bs-color-very-dark-blue, #003958);
    background: var(--bs-color-very-dark-blue, #003958);
    color: #fff;
}
.collection-wizard-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
@media (max-width: 480px) {
    .collection-wizard-step-label {
        display: none;
    }
    .collection-wizard-steps li.active .collection-wizard-step-label {
        display: block;
    }
}

/* Collection item: user scans */
.collection-item-images {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.collection-item-image-tile {
    position: relative;
    width: 96px;
    height: 96px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #f8f9fa;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.collection-item-image-tile img {
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-in;
}
.collection-item-images-small {
    padding: .25rem .5rem .5rem;
}
.collection-item-images-small .collection-item-image-tile {
    width: 56px;
    height: 56px;
}
.collection-item-image-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .75rem;
    line-height: 22px;
    cursor: pointer;
}
.collection-item-image-remove:hover {
    background: #dc3545;
}
.collection-item-image-add {
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    border-style: dashed;
    color: #6c757d;
    cursor: pointer;
    text-align: center;
    font-size: 1.25rem;
}
.collection-item-image-add small {
    font-size: .65rem;
    line-height: 1.1;
    padding: 0 .25rem;
}
.collection-item-image-add:hover {
    color: var(--bs-color-very-dark-blue, #003958);
    border-color: var(--bs-color-very-dark-blue, #003958);
}
.collection-item-image-zoom {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .85);
    cursor: zoom-out;
}
.collection-item-image-zoom img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}

/* Collection item scans: order */
/* the bottom padding equals the top one (the common rule of style.v2.css has 0 at the bottom) */
.collection-item-images-editor .collection-item-images {
    padding-bottom: 5px;
}
.collection-item-images-editor .collection-item-image-tile {
    width: 110px;
    height: 110px;
}
.collection-item-image-tile.is-sortable {
    cursor: grab;
}
.collection-item-image-tile.is-dragging {
    opacity: .4;
}
.collection-item-image-tile.is-drop-target {
    border: 2px dashed var(--bs-color-very-dark-blue, #003958);
}
.collection-item-image-order {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .85);
    font-size: .75rem;
    line-height: 1;
}
.collection-item-image-order button {
    width: 26px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--bs-color-very-dark-blue, #003958);
    cursor: pointer;
}
.collection-item-image-order button:disabled {
    color: #ced4da;
    cursor: default;
}
.collection-wizard-grading {
    padding: .75rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

/* Collection item form: purchase date / price + currency */
.collection-item-details-col {
    flex: 1 1 0;
    min-width: 0;
}
.collection-item-price {
    display: flex;
    align-items: stretch;
}
.collection-item-price .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.collection-item-currency.v-select {
    flex: 0 0 90px;
    width: 90px;
}
.collection-item-currency .vs__dropdown-toggle {
    height: 100%;
    padding: 0;
    margin-left: -1px;
    border-color: #ced4da;
    border-radius: 0 .2rem .2rem 0;
}
.collection-item-currency .vs__selected-options {
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 0 0 .5rem;
}
.collection-item-currency .vs__selected {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1;
    font-size: inherit;
}
.collection-item-currency .vs__search,
.collection-item-currency .vs__search:focus {
    width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    line-height: 1;
}
.collection-item-currency .vs__actions {
    padding: 0 .4rem;
}

/* Collection item form: the main button has the same width on every step */
.collection-wizard-next,
.vue-query-button .collection-wizard-next {
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collection item form: "quick add" on the left side of the footer */
.collection-wizard-modal .v-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
.collection-wizard-modal .v-modal-footer .collection-wizard-quick {
    margin-right: auto;
    white-space: nowrap;
}

/* Add to collection: final message */
.collection-wizard-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0 .5rem;
    text-align: center;
}
.collection-wizard-done-icon {
    width: 3rem;
    height: 3rem;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.collection-wizard-done-circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: collection-wizard-draw .35s cubic-bezier(.65, 0, .45, 1) forwards;
}
.collection-wizard-done-check {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: collection-wizard-draw .25s cubic-bezier(.65, 0, .45, 1) .25s forwards;
}
@keyframes collection-wizard-draw {
    to { stroke-dashoffset: 0; }
}

/* the form leaves / comes back, the message pops in and floats up */
.collection-wizard-swap-enter-active,
.collection-wizard-swap-leave-active {
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.collection-wizard-swap-enter-from.add-to-collection {
    opacity: 0;
    transform: translateY(12px);
}
.collection-wizard-swap-leave-to.add-to-collection {
    opacity: 0;
    transform: scale(.98);
}
.collection-wizard-swap-enter-from.collection-wizard-done {
    opacity: 0;
    transform: scale(.85);
}
.collection-wizard-swap-leave-to.collection-wizard-done {
    opacity: 0;
    transform: translateY(-16px);
}

@media (prefers-reduced-motion: reduce) {
    .collection-wizard-swap-enter-active,
    .collection-wizard-swap-leave-active {
        transition: none;
        animation: none;
    }
    .collection-wizard-done-circle,
    .collection-wizard-done-check {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Collection item form: amount next to the serial number */
.collection-item-amount-col {
    flex: 0 0 96px;
    width: 96px;
}