/*  public/profile.css  */



html {
height: auto;
}
.profile-wrapper {
margin: 70px auto 0px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
justify-items: stretch;
max-width: 1280px;
}
.upload-avatar {
background: #cbd2dc;
color: #fff;
font-size: 14px;
position: absolute;
font-weight: 100;
padding: 3px 10px;
border-radius: 5px;
z-index: -1;
}
.profile-container {
background-color: #565a67;
padding: 10px;
border-radius: 20px;
margin: 5px;
}
.profile-container-list .empty-cta {
display: flex;
align-items: center;
justify-content: center;
background: #36688f;
color: #fff;
text-align: center;
text-decoration: none;
height: auto;
width: -webkit-fill-available;
border: none;
border-radius: 10px;
cursor: pointer;
transition: transform .2s ease;    
}
.profile-container-list .empty-cta:hover {
transform: translateY(-2px);
}
.profile-container h3 {
background: #565a67;
padding: 15px 20px 15px 20px;
margin: -10px -10px 10px -10px;
border-radius: 20px 20px 0px 0px;
text-align: center;
color: white;
font-size: 22px;
font-weight: 400;
}
.profile-container-list {
list-style-type: none;
padding: 0px;
overflow: auto;
max-height: 420px;
display: flex;
flex-direction: column;
gap: 3px;
scrollbar-color: #0000004f #00000000;
scrollbar-width: thin;
}
.profile-container ul {
margin: 10px 0 0 0;
}
.profile-container li {
position: relative;
padding: 0 0px;
color: #fff;
text-align: center;
display: flex;
align-items: center;
}
.profile-container a {
padding: 10px;
border-bottom: 1px solid #00000033;
border-radius: 0px;
font-size: 16px;
text-align: left;
cursor: pointer;
color: #ffffffd6;
text-decoration: none;
width: -webkit-fill-available;
height: -webkit-fill-available;
background: #494d59;
border-radius: 10px;
transition: 0.2s;
display: inline-block;
}
.profile-container a:hover {
background: #3f434f;
transition: 0s;
}
.profile-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 270px;
margin: 20px auto;
display: none;
}
.profile-logo {
font-size: 18px;
}
.profile-header .chats-button {
padding: 11px 55px;
background: #70cb85;
font-size: 16px;
color: #fff;
border: none;
border-radius: 999px;
cursor: pointer;
font-weight: 100;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.profile-header .chats-button:hover {
transform: translateY(-1px);
}
.avatar-preview-container {
width: 120px;
height: 120px;
border-radius: 50%;
background: #eaedf1;
margin: 10px auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
cursor: pointer;
font-size: 80px;
color: #fff;
font-weight: 500;
transition: transform 0.2s ease;
}
.avatar-preview-container:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.avatar-preview-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.initial-letter {
background-color: transparent !important;
color: #cbd2dc;
}
.form-group {
margin-bottom: 1px;
text-align: left;
font-size: 14px;
}
.form-group label {
display: block;
font-family: "Open Sans", sans-serif;
FONT-WEIGHT: 100;
color: #fff;
}

.form-group input[type="text"]:focus, .form-group input[type="password"]:focus, .form-group textarea:focus {
border-color: #4ca9af;
box-shadow: 0 0 0 3px rgb(76 170 175 / 20%);
}

.form-group textarea {
min-height: 80px;
resize: vertical;
}
.button-group {
display: flex;
gap: 5px;
margin: 0 0 5px 0;
justify-items: center;
justify-content: center;
}
.button-group button {
background: #36688f;
padding: 13px 0px;
font-size: 14px;
width: -webkit-fill-available;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 300;
color: #fff;
}
.button-group button.save {
background: #4b8cbe;
}
.button-group button.delete {
background-color: #e9eff60a;
color: #a0a6af;
}
.button-group button:hover {
transform: translateY(-2px);
}
.message-box {
background-color: #f8d7da;
color: #721c24;
padding: 10px 15px;
border: 1px solid #f5c6cb;
border-radius: 8px;
margin-bottom: 20px;
display: none; /* Hidden by default */
}
.message-box.success {
background-color: #d4edda;
color: #155724;
border-color: #c3e6cb;
}
.message-box.active {
display: block;
}







.confirm-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 78%);
display: flex;
justify-content: center;
align-items: center;
z-index: 4;
opacity: 0;
visibility: hidden;
transition: opacity 0.1s;
}
.confirm-modal-overlay.active {
opacity: 1;
visibility: visible;
z-index: 49;
}
.confirm-modal-content {
background-color: #2a5554;
background-color: #343941;
padding: 30px;
border-radius: 20px;
max-width: 250px;
text-align: center;
transform: scale(0.1);
transition: transform 0.3s ease;
}
.confirm-modal-overlay.active .confirm-modal-content {
transform: scale(1);
}
.confirm-modal-content h3 {
color: #ffffff;
font-weight: 400;
margin: 0 0 25px 0px;
font-size: 16px;
line-height: 1.3;
}
.confirm-modal-buttons {
display: flex;
justify-content: center;
gap: 8px;
margin: 0 0 10px 0;
flex-wrap: wrap;
}
.confirm-modal-buttons button {
padding: 13px;
border: none;
border-radius: 6px;
cursor: pointer;
color: #fff;
transition: transform .15s ease, opacity .15s ease, filter .15s ease, background-color .15s ease;
}
.confirm-modal-buttons button[hidden] {
display: none !important;
}
.confirm-modal-buttons button.confirm-yes {
background-color: #dbe2eb0f;
color: #ffffff5c;
}
.confirm-modal-buttons button.confirm-no {
background: #36688f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
max-width: 150px;
}
.confirm-modal-buttons button:hover {
transform: translateY(-2px);
}
.confirm-modal-buttons button:disabled {
opacity: .42;
cursor: default;
pointer-events: none;
filter: grayscale(.2);
transform: none;
box-shadow: none;
}
.confirm-modal-buttons button:disabled:hover {
transform: none;
}

.confirm-modal-buttons-status1 {
color: #447ca7;
font-size: 43px;
margin: 2px 0 13px 0;
line-height: 1;
}
.confirm-modal-buttons-status2 {
font-size: 14px;
}

.quota-provider-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: -4px 0 18px 0;
}

.quota-provider-tab {
background: #e9eff6;
color: #101418;
border: 2px solid transparent;
border-radius: 10px;
padding: 12px 14px;
cursor: pointer;
text-align: left;
transition: .15s ease-in-out;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 66px;
}

.quota-provider-tab:hover {
transform: translateY(-1px);
border-color: #7dd3fc;
}

.quota-provider-tab.is-active {
border-color: #0de7f3;
box-shadow: inset 0 0 0 1px rgba(13, 231, 243, 0.25);
}

.quota-provider-tab:disabled {
opacity: .55;
cursor: default;
transform: none;
}

.quota-provider-tab__title {
font-size: 15px;
font-weight: 700;
line-height: 1.15;
color: #000;
}

.quota-provider-tab__subtitle {
font-size: 12px;
line-height: 1.2;
margin-top: 4px;
color: #000000b5;
}

@media (max-width: 420px) {
.quota-provider-tabs {
grid-template-columns: 1fr;
}
}






/* кнопки для редактирования показа и закрепления товара */
.product-item-actions {
position: absolute;
right: 6px;
bottom: 0px;
display: flex;
align-items: center;
}
.product-item-actions:hover {
}
.pinned-toggle-btn {
background: url(img/icon39.png) no-repeat center center;
background-size: 15px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
height: 30px;
width: 30px;
}
.pinned-toggle-btn:hover {
background-color: #c6e6ff;
}
.is-pinned {
background: url(img/icon40.png) no-repeat center center;
background-size: 15px;
}
.is-unpinned {}
.edit-icon-btn {
background: url(img/icon19.png) no-repeat center center;
background-size: 15px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
height: 30px;
width: 30px;
}
.edit-icon-btn:hover {
transition: 0s;
background-color: #c6e6ff;
}
.listing-status-btn {
background: url(img/icon38.png) no-repeat center center;
background-size: 25px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
height: 30px;
width: 30px;
}
.listing-status-btn.is-active {
background: url(img/icon37.png) no-repeat center center;
background-size: 25px;
}
.listing-status-btn img {
max-width: 25px;
max-height: 25px;
}
.listing-status-btn.is-archived {
}
.listing-status-btn:disabled {
opacity: .6;
cursor: not-allowed;
}






.badge {
display: flex;
min-width: 18px;
padding: 3px;
margin-left: 0px;
border-radius: 999px;
font-size: 12px;
background: #4b8cbe;
color: #ffffff;
text-align: right;
bottom: 8px;
right: 6px;
position: absolute;
pointer-events: none;
align-items: center;
justify-content: center;
}
.text-right { font-size: 10px; text-align: right; margin: 0 3px 0px 0px; }
.text-sm {}
.text-gray-500 {color: #fff;}






/* Блок публикации товара */
#productImageInput {
width: 100%;
font-size: 14px;
border: 0px solid #d8e0eb;
border-radius: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
color: gray;
}
#newProductLinkWrapper {
background: #e9eff6;
color: #000;
border-radius: 8px;
padding: 10px 12px;
line-height: 1.4;
word-break: break-all;
}
#newProductLinkWrapper a {
color: #4aa35e;
text-decoration: none;
font-size: 12px;
font-weight: 400;
}
#newProductLinkWrapper a:hover {
color: white;
border-radius: 12px;
}


/* ===== Блок "Товары" в личном кабинете ===== */
.product-search-wrapper {
margin-bottom: 5px;
}
#productSearchInput {
text-align: center;
}
.product-inline-price {
display: block;
font-size: 16px;
color: #00120f;
margin-top: 0px;
font-weight: 400;
}
#myProductsList a {
font-size: 13px;
}
.product-inline-name { 
max-width: 220px;
display: block;
}

/* модалка редактирования товара (productModalOverlay) */
.product-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: .3s ease all;
}
.product-modal-overlay.active {
opacity: 1;
visibility: visible;
z-index: 47;
}
.product-modal-content {
background-color: #565a67;
padding: 30px;
border-radius: 15px;
max-width: 400px;
min-width: 270px;
width: 100%;
text-align: left;
transform: scale(0.9);
transition: transform .3s ease;
box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.product-modal-overlay.active .product-modal-content {
transform: scale(1);
max-width: 854px;
padding: 20px;
}
.category-menu-modal__content {
max-height: 273px !important;
}
.product-modal-content h3 {
font-weight: 100;
font-size: 19px;
text-align: center;
color: #fff;
margin: 20px 0;
line-height: 1;
}

.add-photo-box{
display: block;
display:grid;
grid-template-columns:repeat(6,1fr);
gap:3px;
}
.add-photo-prev {
aspect-ratio: 1 / 1;
background: #0000001a;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #ffffff52;
cursor: pointer;
}
.add-photo-prev:hover {
background: #ffffff50;
}
.dz-remove {
position: absolute;
top: 0px;
right: 0px;
width: 18px;
height: 16px;
border-radius: 0px 0px 0px 9px;
background: #ef4444;
color: #fff;
border: none;
font-size: 18px;
line-height: 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.dz-persist-remove {
position:absolute;
top:6px;
right:6px;
width:22px;
height:22px;
border-radius:9999px;
background:#ef4444;
color:#fff;
border:none;
font-weight:700;
line-height:22px;
cursor:pointer;
}
.dz-edit-remove {
position:absolute;
top:6px;
right:6px;
width:22px;
height:22px;
border-radius:9999px;
background:#ef4444;
color:#fff;
border:none;
font-weight:700;
line-height:22px;
cursor:pointer;
}
.dz-server-remove {
position:absolute;
top:6px;
right:6px;
width:22px;
height:22px;
border-radius:9999px;
background:#ef4444;
color:#fff;
border:none;
font-weight:700;
line-height:22px;
cursor:pointer;
}
.product-thumb {
width: 60px;
height: -webkit-fill-available;
overflow: hidden;
object-fit: cover;
border-radius: 8px;
display: block;
}
.edit-close-but {
position: absolute;
display: flex;
top: 0;
right: 0;
aspect-ratio: 1;
border: 0;
border-radius: 0px 15px 0px 5px;
background: #cf0000;
color: #fff;
cursor: pointer;
font-size: 29px;
padding: 9px;
line-height: 0px;
z-index: 1;
align-items: center;
justify-content: center;
}
.edit-img {
position:relative;
aspect-ratio:1/1;
background:#fff;
border:0px solid #e2e8f0;
border-radius:8px;
overflow:hidden;
}




/* ===== Категории: модалки и список ===== */
/* Оверлей выбора категории */
.category-modal-overlay {
position: fixed;
inset: 0;
background: rgb(0 0 0 / 73%);
display: flex;
align-items: center;
justify-content: center;
z-index: 48;
opacity: 0;
visibility: hidden;
transition: .3s all;
backdrop-filter: blur(10px);
}
.category-modal-overlay.active { 
opacity:1; 
visibility:visible; 
}
.category-modal {
position: relative;
background: #565a67;
color: #fff;
width: min(300px, 92vw);
border-radius: 15px;
padding: 18px 16px 12px;
box-shadow: 0 6px 20px #00000066;
}
.category-modal h3 {
margin:0 0 20px; 
font-weight:100; 
font-size:18px; 
text-align:center; 
color:#fff;
}
/* Кнопки категорий */
.cat-row, .cat-row--default {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: #494d59;
color: #fff;
margin: 0 0 1px 0px;
border: none;
border-radius: 10px;
padding: 12px 44px 12px 14px;
cursor: pointer;
font-size: 15px;
transition: .15s ease-in-out;
text-align: left;
}
.cat-row + .cat-row { margin-top:8px; }
.cat-row:hover { background:#3f434f; }
.cat-row:focus-visible { outline:2px solid #70cb85; outline-offset:2px; }
.cat-row--default {}
.cat-row-count{ color:#00b994; font-weight:600; margin-left:8px; }
/* Прокручиваемый список */
.cat-list-scroll {}
.cat-list-scroll::-webkit-scrollbar { width:6px; }
.cat-list-scroll::-webkit-scrollbar-thumb{ background:#000; border-radius:10px; }
/* Обёртка и кнопка "карандаш" */
.cat-row-wrap { position:relative; }
.cat-row-edit {
position:absolute; right:6px; top:6px;
width:26px; height:26px; border:none;
background:#000; color:#fff; border-radius:8px;
cursor:pointer; 
}
.cat-row-edit:hover { background:#00936d; }
/* Низ модалки */
.cat-actions { 
display:flex; justify-content:center; 
}
.cat-actions .confirm-no {
width: 100%;
padding: 10px 10px;
background: #4b8cbe;
border: 0;
border-radius: 10px;
font-size: 17px;
color: #fff;
cursor: pointer;
}
/* Модалки "Новая категория" и "Переименовать/Удалить" */
.category-edit-overlay {
position:fixed; inset:0;
background:rgba(0,0,0,.7);
display:flex; 
align-items:center; 
justify-content:center;
z-index:3;
opacity:0; 
visibility:hidden; 
transition:.3s all;
}
.category-edit-overlay.active { 
opacity:1; 
visibility:visible;
z-index: 49;
}
.category-edit-modal {
position: relative;
background: #565a67;
color: #fff;
width: min(260px, 92vw);
border-radius: 15px;
padding: 20px;
box-shadow: 0 6px 20px #00000066;
text-align: center;
}
.category-edit-modal h3 {
margin:0 0 20px; 
font-weight:100; 
font-size:18px;
}
.category-edit-modal input[type="text"] {
width: -webkit-fill-available;
padding: 10px 12px;
border: 0px solid #d8e0eb;
border-radius: 8px;
outline: 0;
font-size: 14px;
background: #fff;
color: #000;
}
.category-edit-modal .confirm-modal-buttons { margin-top:14px; }
/* Поля категории выглядят кликабельными */
#productCategoryInput[readonly]:hover,
#editProductCategoryInput[readonly]:hover {
box-shadow: 0 0 0 3px rgb(89 255 255 / 25%);
border-color: #00efff;
}



/* Мобильные правки */
@media (max-width:420px) {
.category-modal { width:80vw; }
.category-edit-modal { width:80vw; }
}
























/* ===== Tabs (Чаты) ===== */
#chatsTabsContainer .tabs {
display: flex;
}
#chatsTabsContainer .tab-btn {
flex: 1;
border: 0;
border-radius: 7px;
padding: 10px 6px;
cursor: pointer;
background: none;
font-size: 15px;
transition: .2s;
color: #ffffff78;
}
#chatsTabsContainer .tab-btn:hover {
background: #0011253d;
color: #fff;
transition: 0s;
}
#chatsTabsContainer .tab-btn.active {
background: #4b8cbe;
color: #fff;
box-shadow: inset 0px 2px 2px 0px #0000004d;
}
#chatsTabsContainer .tab-panel {
display:none;
}
#chatsTabsContainer .tab-panel.active {
display:block;
}










.product-inline-price {
display: block;
font-size: 16px;
color: #b7caed;
margin-top: 0px;
font-weight: 400;
}









.gen-desc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 6px 0;
padding: 6px 12px;
font-size: 12px;
border-radius: 9999px;
border: none;
background: #0f766e;
color: #ffffff;
cursor: pointer;
gap: 6px;
transition: 0.15s ease;
}
.gen-desc-btn:hover {
background: #115e59;
box-shadow: 0 4px 10px rgba(15, 118, 110, 0.45);
transform: translateY(-1px);
}
.gen-desc-btn:active {
transform: translateY(0);
box-shadow: none;
}
.gen-desc-btn:disabled {
opacity: 0.6;
cursor: default;
box-shadow: none;
transform: none;
}

.gen-desc-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.78);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.gen-desc-overlay--active {
display: flex;
}
.gen-desc-overlay__inner {
background: #212227a6;
padding: 80px;
text-align: center;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
backdrop-filter: blur(31px);
}
.gen-desc-overlay__loader {
width: 150px;
height: 80px;
margin-bottom: 16px;
}
.gen-desc-overlay__cancel {
margin-top: 8px;
padding: 16px 26px;
border-radius: 9999px;
border: none;
background: #ffffff2e;
color: #ffffff;
cursor: pointer;
font-size: 18px;
}
.gen-desc-overlay__cancel:hover {
background: #be123c;
box-shadow: 0 4px 10px rgba(190, 18, 60, 0.55);
transform: translateY(-1px);
}
.gen-desc-overlay__cancel:active {
transform: translateY(0);
box-shadow: none;
}

body.gen-desc-busy {
overflow: hidden;
}








#productCategoryInput[readonly],
#editProductCategoryInput[readonly] {
cursor:pointer;
}
.form-group input[type="text"][readonly] {
}
.form-group input[type="text"], .form-group input[type="password"], .form-group textarea {
width: 100%;
cursor: pointer;
border-radius: 8px;
font-size: 14px;
outline: none;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
color: #000;
padding: 12px;
border: 0;
scrollbar-color: #00000059 #00000000;
scrollbar-width: thin;
}












/* =====  "Личные чаты" ===== */
#privateChatsList a.chat-messenger {
display: flex;
align-items: center;
gap: 10px;
padding-right: 44px;
}
#privateChatsList .chat-avatar {
width: 42px;
height: 42px;
flex: 0 0 42px;
border-radius: 999px;
overflow: hidden;
background: #0000001a;
display: flex;
align-items: center;
justify-content: center;
}
#privateChatsList .chat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#privateChatsList .chat-avatar-initial {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: #cbd2dc;
background: #2a3242;
}
#privateChatsList .chat-main {
display: flex;
flex-direction: column;
min-width: 0;
width: 100%;
gap: 2px;
}
#privateChatsList .chat-title {
font-weight: 600;
color: #14aebf;
}
#privateChatsList .chat-last {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}





/* ===== Quota toast (мини-индикатор 2 сек) ===== */
.quota-toast {
position: fixed;
left: 0;
top: 0;
transform: translate(-50%, -100%);
background: rgba(0,0,0,.78);
color: #fff;
padding: 10px 12px;
border-radius: 12px;
font-size: 13px;
line-height: 1.2;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity .12s ease;
max-width: calc(100vw - 24px);
text-align: center;
}
.quota-toast.show { opacity: 1; }







/*  блок оплаты SKY PAY V2 (no redirect)  */
.sky-pay-v2-modal-1 {
margin: 20px 0;
color: white;
font-size: 30px;
font-weight: 500;
}
.sky-pay-v2-modal-2 {
line-height: 1;
font-size: 14px;
font-weight: 300;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.sky-pay-v2-modal-3 {
color: #81ff80;
font-weight: 400;
}
.sky-pay-v2-modal-4 {
font-size: 10px;
color: #447ca7;
}
.sky-pay-v2-modal-5 {
font-size: 10px;
color: #e618ca;
}
.sky-pay-v2-modal-6 {
font-size: 16px;
color: #659b65;
margin: 20px 0 0 0;
min-height: 24px;
}
.sky-pay-v2-modal-7 {
display: none;
}
.sky-pay-v2-modal-8 {
color: #81ff80;
margin: 20px 0 0 0;
}
.sky-pay-v2-modal-88 {
color: #81ff80;
}

.quota-inline-loader-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #81ff80;
}

.quota-inline-loader {
width: 16px;
height: 16px;
border: 2px solid rgba(129, 255, 128, 0.28);
border-top-color: #81ff80;
border-radius: 50%;
animation: quota-inline-spin .8s linear infinite;
flex: 0 0 auto;
}

.quota-inline-loader-text {
display: inline-block;
line-height: 1.2;
color: #81ff80;
}

@keyframes quota-inline-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}