/* =========== © 2025 Centroarts.com - https://magenta.su =========== */

.mg-demo-content { position: relative; z-index: 1; border-radius: 2rem; }
.mg-demo-content::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit; border: 1px solid; opacity: .1; pointer-events: none;
}

.mg-card-set-demo-tabs { display: flex; align-items: center; justify-content: center; }
.mg-demo-tabs {
    display: flex; list-style: none; padding: .25rem; margin: 0; min-width: 14rem; border-radius: 1.5rem;
    box-shadow: inset 0 0 0 1px rgba(var(--mg-text-rgb), 0.1);
    text-align: center;
}
.mg-demo-tab { flex: 1; }
.mg-demo-tab-btn {
    display: block; width: 100%; outline: none; color: inherit !important;
    padding: .5rem .75rem; border: 0 none !important; background: none !important;
    transition: box-shadow .15s ease;
}
.mg-demo-tab-btn.active { box-shadow: inset 0 0 0 1px rgba(var(--mg-text-rgb), 0.1); border-radius: 1.5rem; }
.mg-demo-tab-btn:not(.active) { opacity: .5; }


@media (min-width: 992px) {
    .mg-card-set {
        --mg-card-gap: 2.5rem;
        --mg-card-maxw: 27.5rem;
        display: flex; justify-content: space-between; gap: var(--mg-card-gap);
    }
    .mg-card-set-controls { flex: 1; min-width: 320px; max-width: 540px; }
    .mg-card-set-demo { display: block !important; flex: 1; max-width: var(--mg-card-maxw); }

    .mg-card-set-demo-view { position: sticky; z-index: 1; top: calc(var(--mg-header-h) + var(--mg-vert-margin)); }
    .mg-card-set-demo-tabs { margin-top: 1.5rem; }
}

@media (max-width: 991px) {
    .mg-card-demo-btn {
        display: block !important; position: sticky; bottom: 0; z-index: 100;
        padding: var(--mg-container-pad-y) var(--mg-container-pad-x);
        margin-left: calc(var(--mg-container-pad-x) / -1);
        margin-right: calc(var(--mg-container-pad-x) / -1);

        background-image: linear-gradient(0deg, rgba(var(--mg-body-bg-rgb), 1), rgba(var(--mg-body-bg-rgb), 0));
    }
    .mg-card-demo-btn .btn { width: 100%; display: block; }

    html.demo-open { overflow: hidden; }
    .mg-card-set-demo {
        position: fixed; inset: 0; z-index: 123; background-color: rgba(0, 0, 0, 0.5);
        opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
    }
    .mg-card-set-demo.open { opacity: 1; visibility: visible; }

    .mg-card-set-demo-view { padding-top: 4.5rem; width: 100%; height: 100%; overflow: hidden; }
    .mg-card-set-demo-cont {
        width: 100%; height: 100%; border-radius: 2rem;
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
        background-color: var(--mg-body-bg);
        transition: transform .3s ease;
    }
    .mg-card-set-demo:not(.open) .mg-card-set-demo-cont { transform: translateY(4rem); }

    .mg-card-set-demo-cont .nfc-webc-wrapper { min-height: 100%; border-radius: 0; }
    .mg-card-set-demo-cont .nfc-webc-wrapper::after { display: none; }
    .mg-card-set-demo-cont .wallet-wrapper { margin: .5rem auto; border-radius: 1.5rem; max-width: 35rem; }

    .mg-demo-close {
        display: flex !important; align-items: center; justify-content: center;
        position: absolute; right: 0; top: 0; z-index: 1;
        width: 2.5rem; height: 2.5rem; padding: .5rem; border: 0 none !important;
        margin: 1rem; border-radius: 50%; background: none !important;
        color: #fff !important;
    }
    
    .mg-card-set-demo-tabs { position: absolute; top: 0; left: 0; right: 0; height: 4.5rem; }
    .mg-demo-tabs { background-color: var(--mg-body-bg); backdrop-filter: blur(10px); box-shadow: none; }
}
@media (max-width: 575px) {
    .mg-card-set-demo-cont .wallet-wrapper { margin: .5rem; max-width: none; }
}

/* Addon Fields */
.fc-addon-select ~ .fc-addon-input { margin-top: -2px; }
.fc-addon-input { position: relative; z-index: 1; }
.fc-addon-input .im {
    --im-size: 1rem;
    position: absolute; right: 0; top: calc(50% - .75rem); z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 1.5rem; margin-right: .125rem; opacity: .5;
}
.fc-addon-input .im:hover { opacity: 1; }
.fc-addon-input .form-control { padding-left: 1rem; padding-right: 2.5rem; border-top-left-radius: 0; border-top-right-radius: 0; }
.fc-addon-input .form-control-custom { padding-left: 1rem; padding-right: 2.5rem; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fc-addon-select { padding-left: 1rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.form-control-addon + .form-control-addon { margin-top: .5rem; }

.fc-addon-buttons { display: flex; gap: .5rem; justify-content: space-between; margin-top: .25rem; }
.fc-addon-buttons .btn { padding-left: 2px; padding-right: 2px; }
.fc-addon-buttons .btn .im { margin-right: .25rem; }

/* Uploader Images & Cropper */
.upload-box, .upload-file { display: flex; gap: .5rem; position: relative; z-index: 1; cursor: pointer; }
.upload-box .im {
    --mg-fc-color: var(--mg-primary);
    --mg-fc-bg: rgba(var(--mg-primary-rgb), 0.05);
    --mg-fc-border-color: rgba(var(--mg-primary-rgb), 0.1);
    --mg-fc-padding-x: var(--mg-fc-padding-y);
    flex: 0 0 var(--mg-fc-height);
}
.upload-box:hover .im {
    --mg-fc-bg: rgba(var(--mg-primary-rgb), 0.1);
    --mg-fc-border-color: rgba(var(--mg-primary-rgb), 0.2);
}

.upload-input { position: absolute; z-index: -1; inset: 0; width: 100%; height: var(--mg-fc-height); }
.upload-placeholder { display: flex; flex: 1 1 auto; min-width: 0; gap: .25rem; white-space: nowrap; }
.upload-placeholder::after { content: attr(title); font-size: .875rem; opacity: .5; }
.upload-title { flex: 1 1 auto; }

.upload-file .cover {
    z-index: 1;
    border-radius: var(--mg-fc-border-radius);
    flex: 0 0 var(--mg-fc-height); width: var(--mg-fc-height); height: var(--mg-fc-height);
}
.upload-file .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--mg-text-rgb), 0.1); }
.upload-file-box {
    display: flex; align-items: center;
    flex: 1 1 auto; min-width: 0; padding-top: 0; padding-bottom: 0; padding-right: .25rem;
}
.upload-filename { flex: 1 1 auto; min-width: 0; }
.upload-actions { display: flex; }
.upload-actions .btn {
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-hover-color: var(--mg-primary);
    border: 0 none !important;
    background: none !important;
}

/* адаптивность картинки в модалке */
.modal-cropper .modal-body { padding: 0; }
.modal-cropper .modal-body img {
    max-width: 100%;
    height: auto; object-fit: contain;
}

/* Выбор цвета */
.form-select-color + .form-select-color { margin-top: .5rem; }
.form-select-color { display: flex; align-items: center;  }
.form-select-color .form-label { font-weight: normal; flex: 1 1 auto; margin-bottom: 0; }
.form-select-color .form-control-color { padding: .25rem; }
.form-select-color .form-control-color::-moz-color-swatch { border: 1px solid rgba(var(--mg-text-rgb), 0.1) !important; border-radius: calc(var(--mg-fc-border-radius) - 0.25rem); }
.form-select-color .form-control-color::-webkit-color-swatch { border: 1px solid rgba(var(--mg-text-rgb), 0.1) !important; border-radius: calc(var(--mg-fc-border-radius) - 0.25rem); }

/* Input Tabs */
.input-tabs { display: flex; gap: 8px; }
.input-tab { flex: 1; position: relative; z-index: 1; text-align: center; }
.input-tab label {
    display: flex; justify-content: center; align-items: center;
    transition: border-color .15s ease, color .15s ease;
}
.input-tab .trigger-action:not(:checked) ~ label { --mg-fc-color: rgba(var(--mg-text-rgb),0.3); }
.input-tab:hover .trigger-action:not(:checked) ~ label { --mg-fc-color: rgba(var(--mg-text-rgb),0.7); }
.input-tab .trigger-action:checked ~ label { --mg-fc-border-color: rgba(var(--mg-text-rgb), 0.4); }

/* Select THM */
.input-thm-select { flex-direction: column; }
.input-thm-select .input-tab label { gap: .25rem; }
.input-thm-select .input-tab label > .text-truncate { flex: 1 1 auto; text-align: left; min-width: 0; }
.input-thm-select .input-tab label > .im { color: var(--mg-primary); } 
.input-thm-select .input-tab .trigger-action:not(:checked) ~ label > .im { opacity: 0; }

.input-thm-select-colors { display: flex; }
.input-thm-select-colors > i + i { margin-left: -.25rem; }
.input-thm-select-colors > i::before {
    content: ""; display: block; width: 1rem; height: 1rem; aspect-ratio: 1/1; border-radius: 50%;
    background-color: var(--ithm-sel-color);
    box-shadow: 0 0 0 1px #F6F6F6;
}

/* Copy Control */
.form-control-copy { position: relative; z-index: 1; }
.form-control-copy .form-control { padding-right: var(--mg-fc-height); }
.form-control-copy .btn-copy { position: absolute; right: 0; top: 0; --bs-btn-padding-x: var(--bs-btn-padding-y); }