/* =========== © 2026 Centroarts - https://m1r.ru =========== */

/* --- BUTTONS --- */
button { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { font: inherit; appearance: button; color: inherit; background: none; border: 0 none; padding: 0; outline: none !important; cursor: pointer; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; }

.btn-group, .save-buttons, .ui-dialog-buttonset { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-group .btn-block { flex: 0 0 100%; }
.btn-group .btn-wsim { flex: 1; }
.btn-group.center { justify-content: center; }

.save-buttons { padding-top: 0 !important; margin-top: 8px; }

.btn-reset { padding: 0; margin: 0; background: none; border: 0 none; cursor: pointer; }
.btn, .bbcodes, .ui-button {
	--btn-h: 40px;
	--btn-lh: 24px;
  --btn-fs: var(--fs);
  --btn-fw: bold;
  --btn-rd: 24px;
  --btn-pad: var(--btn-pad-y) var(--btn-pad-x);
  --btn-pad-x: 8px;
  --btn-pad-y: 8px;
	--btn-c-text: hsl(var(--c-text));
	--btn-c-bg: none;
  --btn-sw: none;

	height: var(--btn-h); line-height: var(--btn-lh); border-radius: var(--btn-rd);
	padding: var(--btn-pad); color: var(--btn-c-text) !important; font-size: var(--btn-fs);
	white-space: nowrap; text-align: center; border: 0 none; font-weight: var(--btn-fw);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; outline: none; text-decoration: none !important;
	background: var(--btn-c-bg); box-shadow: var(--btn-sw); user-select: none;
  touch-action: manipulation;
}
.btn:hover, .bbcodes:hover, .ui-button:hover {
  transition: background-color .15s ease, box-shadow .15s ease;
}
.bbcodes, .ui-button { --btn-pad-x: 12px; }
.btn:not(.item-link) { position: relative; z-index: 1; }

.btn-cont { padding: 0 6px; transition: opacity .2s ease; }
.btn-icon { max-width: var(--btn-h); }

.btn .im { --i-color: var(--btn-c-text);  }

.btn-md { --btn-h: 48px; --btn-pad-x: 12px; --btn-pad-y: 12px; }
.btn-lg { --btn-h: 56px; }

.btn-fill, .btn-light, .btn-dark {
  --btn-sw: inset 0px -1px 1px 0px hsla(0, 0%, 0%, .1), 0px 2px 6px -2px hsla(0, 0%, 0%, .25);
}

.btn-fill {
	--btn-c-text: var(--btn-fill-text);
	--btn-c-bg: var(--btn-fill-bg);
}
.btn-fill:hover {
	--btn-c-bg: var(--btn-fill-bg-h);
}
.btn-fill:active {
	--btn-c-bg: var(--btn-fill-bg);
  --btn-sw: none;
}

.btn-light {
	--btn-c-text: var(--btn-light-text);
	--btn-c-bg: var(--btn-light-bg);
}
.btn-light:hover {
	--btn-c-bg: var(--btn-light-bg-h);
}
.btn-light:active {
	--btn-c-bg: var(--btn-light-bg-a);
  --btn-sw: inset 0px -1px 1px 0px hsla(0, 0%, 0%, .05), 0px 1px 4px -2px hsla(0, 0%, 0%, .15);
}

.btn-dark {
	--btn-c-text: var(--btn-dark-text);
	--btn-c-bg: var(--btn-dark-bg);
}
.btn-dark:hover {
	--btn-c-bg: var(--btn-dark-bg-h);
}
.btn-dark:active {
	--btn-c-bg: var(--btn-dark-bg-a);
}

.btn-mono {
	--btn-c-text: var(--btn-mono-text);
	--btn-c-bg: var(--btn-mono-bg);
}
.btn-mono:hover {
	--btn-c-bg: var(--btn-mono-bg-h);
}
.btn-mono:active {
	--btn-c-bg: var(--btn-mono-bg);
  --btn-sw: none;
}

.btn-tone {
	--btn-c-text: var(--btn-tone-text);
	--btn-c-bg: var(--btn-tone-bg);
}
.btn-tone:hover { --btn-c-bg: var(--btn-tone-bg-h); }
.btn-tone:active { --btn-c-bg: var(--btn-tone-bg-a); }

.btn-line {
	--btn-c-text: hsla(var(--c-text),0.8);
	--btn-c-bg: hsla(var(--c-primary),0);
  --btn-sw: inset 0 0 0 1px var(--c-border);
}
.btn-line::after { box-shadow: var(--btn-c-sw); }

.btn-line:hover {
  --btn-c-text: hsl(var(--c-link-hover));
  --btn-c-bg: hsla(var(--c-primary),0.1);
  --btn-sw: inset 0 0 0 6px hsla(var(--c-primary),0);
}
.btn-line:active {
	--btn-c-bg: hsla(var(--c-primary),0.2);
  --btn-c-text: hsl(var(--c-link-press));
}

.btn-link {
	--btn-c-text: inherit; font-weight: normal;
	
}
.btn-link .btn-cont { text-decoration: underline; text-decoration-color: hsl(var(--c-link)); }
.btn-link::after { display: none; }
.btn-link:hover { --btn-c-text: hsl(var(--c-link-hover)); }
.btn-link:hover .btn-cont { text-decoration: none; }

.btn-fill.btn-blue {
	--btn-c-bg: var(--btn-fill-blue-bg);
}
.btn-fill.btn-blue:hover {
	--btn-c-bg: var(--btn-fill-blue-bg-h);
}
.btn-fill.btn-blue:active {
	--btn-c-bg: var(--btn-fill-blue-bg);
}

@media (max-width: 575px) {
  .btn-block { width: 100%; }
}
.btn-wide { width: 100%; }

/* BB Codes */
.bbcodes, .ui-button {
  --btn-h: 40px;
  --btn-fs: var(--fs-2);
  --btn-c-text: var(--btn-fill-text);
	--btn-c-bg: var(--btn-fill-bg);

  background: var(--btn-c-bg); box-shadow: var(--btn-c-sw);
  transition: background-color .2s ease, opacity .2s ease, color .2s ease, box-shadow .2s ease;
}
.bbcodes:hover, .ui-button:hover {
	--btn-c-bg: var(--btn-fill-bg-h);
}
.bbcodes:active, .ui-button:active {
	--btn-c-bg: var(--btn-fill-bg);
  --btn-c-sw: none;
}

/* --- FORMS --- */
.form-list {
  --gap: 20px;
}
.form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--g-gap); }
.form-grid .form-group { grid-column: auto/span 6; }
.form-grid .fg-c2 { grid-column: auto/span 3; }

.form-submit { margin-top: var(--gap); }
.form-group:not(:last-child), .form-check:not(:last-child), .form-combo:not(:last-child), .form-sep:not(:last-child) { margin-bottom: var(--gap); }

.form-group-label { display: flex; gap: 8px; margin-bottom: 8px !important; font-size: var(--fs-1); }
.form-group-label label { flex: 1 1 auto; opacity: .7; }
.form-group-label .right { margin-left: auto; }

.comment-editor > br, .comment-editor > .comments_subscribe,
.comment-editor .bb-pane, .dlereplypopup .bb-pane { display: none; }

@media (min-width: 680px) {
  .form-combo { display: flex; margin-left: -12px; margin-right: -12px }
  .form-combo .form-group { width: 100%; flex: 0 0 50%; max-width: 50%; padding: 0 12px; margin: 0 !important; }
}

/* Inputs */
select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=range]) {
  display: block; width: 100%; font: inherit; background-clip: padding-box;
  outline: none; color: inherit; border: 0 none;
}

.form-control, select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=range]):not([type=search]) {
  --field-h: 48px;
	--field-lh: 24px;
  --field-c-text: hsl(var(--c-text));
	--field-c-bg: hsl(var(--c-body));
  --field-rd: 12px;
  --field-sw: inset 0 0 0 1.5px hsla(var(--c-text),0.15);
  
  height: var(--field-h); line-height: var(--field-lh);
	padding: calc((var(--field-h) - var(--field-lh))/2) calc((var(--field-h) - var(--field-lh))/1.5);
  background-color: var(--field-c-bg); color: var(--field-c-text);
	box-shadow: var(--field-sw); border-radius: var(--field-rd);
	transition: box-shadow .2s ease;
}

.form-control:focus, select:focus, textarea:focus, input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=range]):not([type=search]):focus {
  --field-sw: inset 0 0 0 1.5px hsla(var(--c-text),0.5), 0 0 0 3px hsla(var(--c-text),0.05);
}
textarea.form-control { margin: 0; height: auto; overflow: auto; vertical-align: top; resize: vertical; }
input[type="radio"], input[type="checkbox"] { line-height: normal; vertical-align: middle; }
input[type="file"], input[type="image"],
input[type="submit"], input[type="reset"],
input[type="button"], input[type="radio"],
input[type="checkbox"] { width: auto; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
select[multiple], select { -webkit-appearance: none; appearance: none; }
select[multiple], select[size], textarea { height: auto; }

select:not([multiple]) {
	padding-right: 2rem;
	background-position: calc(100% - 8px) 50%; background-size: 20px 20px; background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23777777' d='M18.7071 9.29289C19.0976 9.68342 19.0976 10.3166 18.7071 10.7071L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L5.29289 10.7071C4.90237 10.3166 4.90237 9.68342 5.29289 9.29289C5.68342 8.90237 6.31658 8.90237 6.70711 9.29289L12 14.5858L17.2929 9.29289C17.6834 8.90237 18.3166 8.90237 18.7071 9.29289Z'/%3E%3C/svg%3E");
}

::placeholder { opacity: 0.4; color: inherit; }

input:focus { outline: none; }
input[type="file"], input[type="image"] { padding: 0; border-width: 0; background: none; box-shadow: none; }

input[type="checkbox"],
input[type="radio"] {
  accent-color: hsl(var(--c-primary));
  width: 18px; height: 18px;
}

/* - Trigger - */
.trigger { position: relative; }
.trigger-btn { display: block; }
.trigger-action { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }

/* - Search Tags - */
.search-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.search-tag-item { cursor: pointer; user-select: none; }
.search-tag-item * { font-style: normal; }

.tag-item {
  --btn-h: 36px;
  --btn-pad-x: 8px;
  --btn-pad-y: 8px;
  --btn-rd: 16px;
  --btn-lh: 20px;
  --btn-c-bg: var(--tags-bg);
  --btn-fs: var(--fs-1);
  --btn-fw: normal;
  --btn-c-text: var(--tags-text);
  --btn-sw: inset 0 0 0 0px hsla(var(--c-text),0);
}
.tag-item:hover { --btn-sw: inset 0 0 0 2px hsla(var(--c-text),0.3); }
.tag-item .im { --i-size: var(--btn-lh); }
.tag-item .btn-cont { padding: 0 4px; }

.search-tag-item .trigger-action:checked ~ .tag-item,
.tag-item.active {
  --btn-c-bg: transparent;
  --btn-sw: inset 0 0 0 2px hsl(var(--c-primary));
}

/* Category Tags */
.category-tags {
  display: flex; gap: 4px; user-select: none;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.category-tags::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.category-tags { flex-wrap: wrap; }
}

.category-tags > .tag-item {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

@media (max-width: 991px) {
	.category-tags {
		padding-left: var(--wrp-p); padding-right: var(--wrp-p);
		margin-left: var(--wrp-p-inv); margin-right: var(--wrp-p-inv);
	}
	.category-tags > .tag-item {
		scroll-margin-left: var(--wrp-p);
		scroll-margin-right: var(--wrp-p);
	}
  .category-tags > .tag-item:first-child { order: -1; }
  .category-tags > .tag-item.active { order: -1; }
}
@media (max-width: 575px) {
	.category-tags > .tag-item {
		--btn-h: 36px;
   		--btn-pad-x: 8px;
   		--btn-pad-y: 8px;
	}
}

/* - Upload Photo - */
.panel-tabs {
	display: flex; gap: 4px; box-shadow: inset 0 0 0 1px var(--c-border);
	border-radius: 30px; padding: 4px;
}
.panel-tab-item {
  --btn-rd: 24px;
  opacity: .6; flex: 1;
  font-weight: normal;
}
	
#tab-gallery-mode:checked ~ .panel-tabs [for="tab-gallery-mode"],
#tab-custom-mode:checked ~ .panel-tabs [for="tab-custom-mode"] {
  --btn-c-bg: hsla(var(--c-primary),0.1);
  --btn-c-text: hsl(var(--c-primary));
  opacity: 1;
}

.tab-content { display: none; }
#tab-gallery-mode:checked ~ .gallery-avatar { display: block; }
#tab-custom-mode:checked ~ .custom-avatar { display: block; }

@media (max-width: 575px) {
  #tab-gallery-mode:checked ~ .gallery-avatar { display: flex; }
  .gallery-avatar {
    --agallery-pad: var(--modal-pad);
    overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: calc(var(--agallery-pad)/-1); margin-right: calc(var(--agallery-pad)/-1);
  }
  .pform-cont-form .gallery-avatar {
    --agallery-pad: var(--pform-box-pad);
  }
  .gallery-avatar-list { display: flex; padding-left: var(--agallery-pad); padding-right: var(--agallery-pad); }

  .avatar-select { min-width: 104px; }
}
@media (min-width: 576px) {
  .gallery-avatar-list { display: grid; grid-template-columns: repeat(6, 1fr); }
}

.gallery-avatar-list { gap: 8px; }
.avatar-select { cursor: pointer; display: block; margin: 0; aspect-ratio: 1 / 1; }
.avatar-select-img {
  display: flex; width: 100%; position: relative; border-radius: 50%;
  user-select: none; overflow: hidden;
  transition: padding .2s ease;
}
.avatar-select-img::before { content: ""; width: 1px; height: 0; padding-top: 100%; margin-left: -1px; }
.avatar-select-img::after {
  content: ""; border-radius: inherit;
  position: absolute; inset: 0; border: 3px solid; opacity: 0;
  transition: opacity .2s ease;
}
.avatar-select-img img {
  pointer-events: none;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
}
.avatar-select input[type="radio"]:checked + .avatar-select-img::after { opacity: 1; }
.avatar-select input[type="radio"]:checked + .avatar-select-img { padding: 6px; }

.custom-avatar-card {
  --avatar-card-pad: 12px;
  --avatar-card-gap: 10px;
  --avatar-card-rd: var(--rd-big);
  --avatar-card-sw: inset 0 0 0 1px var(--c-border);

  display: flex; align-items: center;
  gap: var(--avatar-card-gap);
  padding: var(--avatar-card-pad);
  box-shadow: var(--avatar-card-sw);
  border-radius: var(--avatar-card-rd);

  position: relative; z-index: 1;
}

.custom-avatar-label {
  display: flex; align-items: center; gap: var(--avatar-card-gap);
  flex: 1 1 auto; padding: var(--avatar-card-gap);
  cursor: pointer;
}
.custom-avatar-label::after { content: ""; position: absolute; inset: 0; }
.custom-avatar-label-cont { flex: 1 1 auto; }
.custom-avatar-label-cont > span { display: block; }
.custom-avatar-label .upload-desc { font-size: var(--fs-2); color: var(--c-text-mute); }

.cancel-del-photo { display: none; }
.upload-ready .delete-foto-btn { display: none; }

.custom-avatar-view {
  --avatar-view-size: 80px;
	position: relative; width: var(--avatar-view-size); height: var(--avatar-view-size); border-radius: 16px;
  overflow: hidden; background-color: var(--c-body-tone); flex-shrink: 0;
}

@media (max-width: 499px) {
  .custom-avatar-label .btn { display: none; }
  .custom-avatar-label { text-align: center; }
}
@media (min-width: 500px) {
  .custom-avatar-view { --avatar-view-size: 120px; }
  .custom-avatar-label .btn { pointer-events: none; --btn-c-bg: hsla(var(--c-text),0.075); flex-shrink: 0; }
}

.custom-avatar-view img {
  width: inherit; height: inherit; object-fit: cover;
  pointer-events: none; user-select: none;
}

.custom-avatar-view .delete-foto-btn {
    --btn-h: 32px;
    --btn-rd: 10px;
    --btn-pad-x: 4px;
    --btn-pad-y: 4px;
    --btn-c-text: hsl(var(--c-text-white));
    --btn-c-bg: rgba(0, 0, 0, 0.6);

    width: var(--btn-h);

    position: absolute; z-index: 3;
    left: 6px; bottom: 6px;
}
.delete-foto-btn:hover { --btn-c-bg: rgba(220, 53, 69, 0.9); }
input#del_foto:checked ~ .custom-avatar-card .delete-foto-btn {
  --btn-h: var(--avatar-view-size); inset: 0; --btn-rd: inherit;
  --btn-c-bg: rgba(220, 53, 69, 0.4);
}
input#del_foto:checked ~ .custom-avatar-card .cancel-del-photo { display: flex !important; }
input#del_foto:checked ~ .custom-avatar-card .upload-new-photo { display: none !important; }