*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, html.admin-bar, body, body.admin-bar {
margin-top: 0 !important;
padding-top: 0 !important;
}
#wpadminbar {
display: none !important;
height: 0 !important;
min-height: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(96, 120, 144, 0.45) #080c14;
} html::-webkit-scrollbar {
width: 8px;
height: 8px;
}
html::-webkit-scrollbar-track {
background: #080c14;
}
html::-webkit-scrollbar-thumb {
background: rgba(96, 120, 144, 0.35);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
html::-webkit-scrollbar-thumb:hover {
background: rgba(56, 189, 248, 0.55);
}
body.gnozis-dark-mode {
background-color: var(--bg-deep);
color: var(--gnozis-text-secondary);
font-family: var(--gnozis-font-body);
line-height: 1.6;
min-height: 100vh;
width: 100%;
max-width: 100%;
overflow-x: visible;
overflow-y: visible;
position: relative;
} img {
max-width: 100%;
height: auto;
content-visibility: auto;
}
.user-avatar,
.fb-user-avatar-img,
.fb-dropdown-avatar-img,
.composer-avatar,
.profile-avatar-img,
.dialog-avatar,
.member-avatar,
.chats-item-avatar,
.mini-chat-avatar,
.mentor-avatar {
aspect-ratio: 1 / 1;
}
a {
color: var(--accent-cyan);
text-decoration: none;
transition: var(--gnozis-transition);
}
a:hover {
color: #7dd3fc;
text-shadow: 0 0 10px var(--accent-cyan-glow);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--gnozis-font-heading);
color: var(--gnozis-text-primary);
font-weight: 600;
letter-spacing: -0.01em;
} .gnozis-ambient-canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.gnozis-ambient-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.glow-top-left {
top: -250px;
left: -200px;
width: 800px;
height: 800px; background: radial-gradient(circle, rgba(96, 120, 144, 0.12) 0%, rgba(16, 24, 32, 0) 70%);
filter: blur(140px);
}
.glow-bottom-right {
bottom: -200px;
right: -200px;
width: 650px;
height: 650px;
background: radial-gradient(circle, rgba(120, 152, 184, 0.08) 0%, rgba(0, 16, 32, 0) 70%);
filter: blur(140px);
}
.gnozis-constellation-layer {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
opacity: 0.35;
}
.gnozis-page-shell {
position: relative;
z-index: 1;
max-width: 1440px;
margin: 0 auto;
padding: 24px 28px 80px;
} .gnozis-card {
background: var(--gnozis-bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-lg);
box-shadow: var(--shadow-card);
position: relative;
transition: var(--gnozis-transition);
}
.gnozis-card:hover {
border-color: var(--border-hover);
background: var(--gnozis-bg-card-hover);
} .btn-gradient-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--accent-primary);
color: var(--text-primary) !important;
font-family: var(--gnozis-font-heading);
font-size: 0.88rem;
font-weight: 600;
padding: 10px 20px;
border-radius: var(--gnozis-radius-md);
border: 1px solid rgba(96, 120, 144, 0.55);
cursor: pointer;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.40);
transition: var(--gnozis-transition);
letter-spacing: 0.01em;
}
.btn-gradient-primary:hover {
background: var(--accent-bright);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.50);
transform: translateY(-1px);
}
.btn-gradient-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
} .btn-outline-glass {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(26, 43, 60, 0.50);
color: var(--text-secondary) !important;
font-family: var(--gnozis-font-heading);
font-size: 0.88rem;
font-weight: 500;
padding: 10px 18px;
border-radius: var(--gnozis-radius-md);
border: 1px solid var(--border-input);
cursor: pointer;
transition: var(--gnozis-transition);
}
.btn-outline-glass:hover {
background: rgba(96, 120, 144, 0.10);
border-color: var(--border-hover);
color: var(--text-primary) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
transform: translateY(-1px);
}
.btn-block {
width: 100%;
} .gnozis-layout-3col {
display: grid;
grid-template-columns: 280px minmax(0, 1fr) 350px;
gap: 24px;
align-items: start;
}
.gnozis-col-left {
position: sticky;
top: 24px;
}
.gnozis-col-right {
position: sticky;
top: 24px;
}
.gnozis-sidebar-card {
background: var(--gnozis-bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-lg);
box-shadow: var(--shadow-card);
padding: 22px 16px;
display: flex;
flex-direction: column;
gap: 24px;
}  .gnozis-brand-box {
padding-bottom: 18px;
border-bottom: 1px solid var(--gnozis-border-subtle);
}
.gnozis-brand-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.gnozis-brand-sigil-wrap {
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gnozis-sigil-svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 10px rgba(96, 120, 144, 0.45));
}
.sigil-glow {
position: absolute;
inset: 4px;
background: radial-gradient(circle, rgba(96, 120, 144, 0.30) 0%, transparent 70%);
pointer-events: none;
filter: blur(6px);
}
.gnozis-brand-titles {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.gnozis-brand-titles .gnozis-title {
font-family: var(--gnozis-font-heading);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--gnozis-text-primary);
line-height: 1.2;
}
.gnozis-brand-titles .gnozis-slogan {
font-size: 0.67rem;
color: var(--gnozis-text-muted);
letter-spacing: 0.01em;
margin-top: 3px;
line-height: 1.3;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
} .gnozis-nav-menu .nav-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.gnozis-nav-menu .nav-item {
position: relative;
}
.gnozis-nav-menu .nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: var(--gnozis-radius-md);
color: var(--gnozis-text-muted);
font-size: 0.88rem;
font-weight: 500;
transition: var(--gnozis-transition);
position: relative;
border: 1px solid transparent;
}
.gnozis-nav-menu .nav-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: inherit;
flex-shrink: 0;
}
.gnozis-nav-menu .nav-label {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gnozis-nav-menu .nav-link:hover {
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.06);
} .gnozis-nav-menu .nav-item.active .nav-link {
color: var(--gnozis-text-primary);
background: rgba(96, 120, 144, 0.10);
border: 1px solid rgba(96, 120, 144, 0.28);
box-shadow: none;
}
.gnozis-nav-menu .nav-item.active .nav-active-glow {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--accent-cobalt);
box-shadow: 0 0 8px var(--accent-cobalt-glow);
} .nav-badge-pill {
background: rgba(120, 152, 184, 0.15);
color: var(--accent-cyan);
border: 1px solid rgba(120, 152, 184, 0.35);
border-radius: var(--gnozis-radius-full);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 8px;
box-shadow: 0 0 8px rgba(120, 152, 184, 0.2);
}
.nav-badge-count {
background: rgba(120, 152, 184, 0.18);
color: var(--accent-cyan);
border: 1px solid rgba(120, 152, 184, 0.4);
border-radius: var(--gnozis-radius-full);
min-width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
padding: 0 6px;
box-shadow: 0 0 8px rgba(120, 152, 184, 0.25);
}
.nav-badge-count.is-empty,
.nav-badge-count:empty {
display: none !important;
} .gnozis-sidebar-bottom {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 18px;
border-top: 1px solid var(--gnozis-border-subtle);
}
.gnozis-section-label {
display: block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.09em;
color: var(--gnozis-text-tertiary);
text-transform: uppercase;
margin-bottom: 8px;
} .gnozis-lang-switcher {
position: relative;
width: 100%;
}
.gnozis-lang-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
background: rgba(16, 26, 38, 0.85);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-md);
color: var(--gnozis-text-secondary);
font-family: var(--gnozis-font-body);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: var(--gnozis-transition);
}
.gnozis-lang-btn:hover {
border-color: rgba(255, 255, 255, 0.15);
color: var(--gnozis-text-primary);
}
.gnozis-lang-btn .lang-flag,
.gnozis-lang-list li .flag {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
flex-shrink: 0;
}
.gnozis-flag-svg {
display: block;
width: 20px;
height: 14px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
object-fit: cover;
}
.gnozis-lang-btn .lang-code {
font-weight: 600;
color: var(--gnozis-text-primary);
flex-grow: 1;
text-align: left;
margin-left: 4px;
}
.gnozis-lang-btn .lang-arrow-icon {
color: var(--gnozis-text-muted);
transition: transform 0.2s;
}
.gnozis-lang-switcher.open .lang-arrow-icon {
transform: rotate(180deg);
}
.gnozis-lang-list {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
right: 0;
background: #0C1322;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-md);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(96, 120, 144, 0.15);
list-style: none;
padding: 6px;
display: none;
z-index: 100;
}
.gnozis-lang-switcher.open .gnozis-lang-list {
display: block;
animation: fadeInDropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInDropdown {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.gnozis-lang-list li a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--gnozis-radius-sm);
color: var(--gnozis-text-secondary);
font-size: 0.82rem;
transition: var(--gnozis-transition-fast);
}
.gnozis-lang-list li a:hover,
.gnozis-lang-list li.active a {
background: rgba(96, 120, 144, 0.16);
color: var(--gnozis-text-primary);
}
.gnozis-lang-list li .code {
margin-left: auto;
font-size: 0.72rem;
color: var(--gnozis-text-muted);
font-weight: 600;
} .gnozis-current-user-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-md);
}
.user-avatar-wrap {
position: relative;
width: 38px;
height: 38px;
flex-shrink: 0;
}
.user-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border-card);
}
.user-status-dot {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--gnozis-bg-deep);
}
.user-status-dot.online {
background: #10B981;
box-shadow: 0 0 8px #10B981;
}
.user-info {
flex-grow: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.user-name {
font-size: 0.84rem;
font-weight: 600;
color: var(--gnozis-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-rank {
font-size: 0.72rem;
color: var(--gnozis-text-muted);
}
.btn-login-quick {
font-size: 0.8rem;
font-weight: 600;
color: var(--accent-cyan);
padding: 5px 12px;
border-radius: var(--gnozis-radius-sm);
background: rgba(120, 152, 184, 0.1);
border: 1px solid rgba(120, 152, 184, 0.3);
transition: var(--gnozis-transition);
}
.btn-login-quick:hover {
background: rgba(120, 152, 184, 0.2);
box-shadow: 0 0 10px rgba(120, 152, 184, 0.3);
color: #E0E8F0;
}
.btn-logout {
color: var(--gnozis-text-tertiary);
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: var(--gnozis-radius-sm);
transition: var(--gnozis-transition);
}
.btn-logout:hover {
color: #EF4444;
background: rgba(239, 68, 68, 0.1);
} .gnozis-col-center {
display: flex;
flex-direction: column;
gap: 20px;
} .gnozis-composer-card {
padding: 18px 20px;
}
.composer-top {
display: flex;
gap: 14px;
align-items: flex-start;
}
.composer-avatar-wrap {
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--border-card);
}
.composer-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.composer-textarea {
flex-grow: 1;
background: transparent;
border: none;
outline: none;
color: var(--gnozis-text-primary);
font-family: var(--gnozis-font-body);
font-size: 0.92rem;
line-height: 1.5;
resize: none;
min-height: 44px;
padding-top: 8px;
}
.composer-textarea::placeholder {
color: #506070;
}
.composer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--gnozis-border-subtle);
}
.composer-tools {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.composer-tool-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--gnozis-radius-md);
color: var(--gnozis-text-muted);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: var(--gnozis-transition);
}
.composer-tool-btn:hover {
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.04);
border-color: var(--border-card);
}
.composer-privacy-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-full);
color: var(--gnozis-text-secondary);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: var(--gnozis-transition);
}
.composer-privacy-pill:hover {
border-color: rgba(255, 255, 255, 0.15);
color: var(--gnozis-text-primary);
}
.btn-publish-post,
.btn-publish-wall-post,
.btn-publish-group-post {
padding: 8px 18px;
font-size: 0.84rem;
white-space: nowrap;
flex-shrink: 0;
}
.btn-publish-post .btn-plus {
font-size: 1.1rem;
line-height: 1;
margin-left: 2px;
} .composer-poll-box {
margin-top: 14px;
padding: 14px 16px;
background: linear-gradient(145deg, rgba(14, 22, 38, 0.75) 0%, rgba(8, 13, 24, 0.9) 100%);
border: 1px solid rgba(120, 152, 184, 0.22);
border-radius: var(--gnozis-radius-md, 12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: fadeInPollDrawer 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInPollDrawer {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.poll-box-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(120, 152, 184, 0.12);
}
.poll-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.poll-icon-wrap {
width: 26px;
height: 26px;
border-radius: 6px;
background: rgba(120, 152, 184, 0.12);
border: 1px solid rgba(120, 152, 184, 0.28);
color: var(--accent-cyan, #7898b8);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 8px rgba(120, 152, 184, 0.15);
}
.poll-box-title {
font-size: 0.84rem;
font-weight: 600;
color: var(--gnozis-text-primary, #e2e8f0);
margin: 0;
letter-spacing: 0.02em;
}
.btn-close-poll {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-close-poll:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.35);
color: #f87171;
transform: rotate(90deg);
}
.poll-options-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.poll-option-input-wrap {
display: flex;
align-items: center;
gap: 10px;
position: relative;
animation: fadeInPollDrawer 0.2s ease-out;
}
.poll-option-idx {
width: 24px;
height: 24px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(120, 152, 184, 0.1);
border: 1px solid rgba(120, 152, 184, 0.25);
color: var(--accent-cyan, #7898b8);
font-size: 0.72rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.poll-option-input-wrap .poll-input {
flex-grow: 1;
height: 38px;
background: #090e1a;
border: 1px solid rgba(120, 152, 184, 0.22);
border-radius: var(--gnozis-radius-sm, 8px);
color: #e2e8f0;
font-size: 0.85rem;
padding: 0 12px;
transition: all 0.2s ease;
outline: none;
font-family: inherit;
}
.poll-option-input-wrap .poll-input:focus {
border-color: rgba(120, 152, 184, 0.6);
box-shadow: 0 0 12px rgba(120, 152, 184, 0.25);
background: #0d1527;
}
.poll-option-input-wrap .poll-input::placeholder {
color: #475569;
}
.btn-remove-poll-option {
width: 26px;
height: 26px;
border-radius: 6px;
background: transparent;
border: none;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
flex-shrink: 0;
}
.btn-remove-poll-option:hover {
color: #ef4444;
background: rgba(239, 68, 68, 0.12);
}
.poll-box-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed rgba(120, 152, 184, 0.15);
}
.btn-add-poll-option {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(120, 152, 184, 0.08);
border: 1px dashed rgba(120, 152, 184, 0.35);
border-radius: var(--gnozis-radius-sm, 8px);
color: var(--accent-cyan, #7898b8);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-add-poll-option:hover {
background: rgba(120, 152, 184, 0.18);
border-color: rgba(120, 152, 184, 0.6);
color: #ffffff;
box-shadow: 0 0 10px rgba(120, 152, 184, 0.2);
}
.btn-add-poll-option .plus-icon {
font-size: 0.95rem;
font-weight: 700;
}
.poll-options-limit-hint {
font-size: 0.72rem;
color: #64748b;
user-select: none;
} .composer-tool-btn.active {
color: var(--accent-cyan, #7898b8);
background: rgba(120, 152, 184, 0.15);
border-color: rgba(120, 152, 184, 0.35);
box-shadow: 0 0 8px rgba(120, 152, 184, 0.2);
} .composer-media-previews {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
padding: 12px;
background: linear-gradient(145deg, rgba(14, 22, 38, 0.75) 0%, rgba(8, 13, 24, 0.9) 100%);
border: 1px solid rgba(120, 152, 184, 0.22);
border-radius: var(--gnozis-radius-md, 12px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
animation: fadeInPollDrawer 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.composer-media-preview-item {
position: relative;
width: 84px;
height: 84px;
border-radius: 8px;
overflow: hidden;
background: #090e1a;
border: 1px solid rgba(120, 152, 184, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.composer-media-preview-item.item-is-audio {
width: auto;
height: auto;
min-width: 200px;
max-width: 280px;
background: transparent;
border: none;
box-shadow: none;
overflow: visible;
}
.composer-media-preview-item:hover {
transform: translateY(-2px);
border-color: var(--accent-cyan, #7898b8);
}
.preview-media-inner {
width: 100%;
height: 100%;
position: relative;
}
.preview-media-inner img,
.preview-media-inner video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.preview-video-tag {
position: absolute;
bottom: 4px;
left: 4px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.05em;
background: rgba(0, 0, 0, 0.75);
color: #38bdf8;
padding: 1px 4px;
border-radius: 4px;
pointer-events: none;
}
.btn-remove-media-item {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
color: #ffffff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
line-height: 1;
z-index: 10;
}
.btn-remove-media-item:hover {
background: #ef4444;
border-color: #ef4444;
color: #ffffff;
transform: scale(1.12);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.media-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 0.68rem;
font-weight: 700;
border-radius: 9px;
background: linear-gradient(135deg, #0ea5e9, #38bdf8);
color: #ffffff;
margin-left: 2px;
box-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
} .post-media-gallery {
margin-top: 14px;
border-radius: 12px;
overflow: hidden;
gap: 8px;
}
.post-media-gallery.media-grid-1 {
display: block;
}
.post-media-gallery.media-grid-1 .post-media-item {
max-height: 520px;
border-radius: 10px;
overflow: hidden;
background: #090e1a;
}
.post-media-gallery.media-grid-1 .post-media-img {
width: 100%;
max-height: 520px;
object-fit: contain;
background: #050912;
display: block;
}
.post-media-gallery.media-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.post-media-gallery.media-grid-2 .post-media-item {
height: 240px;
}
.post-media-gallery.media-grid-3 {
display: grid;
grid-template-columns: 1.5fr 1fr;
grid-template-rows: repeat(2, 140px);
}
.post-media-gallery.media-grid-3 .post-media-item:first-child {
grid-row: span 2;
height: 100%;
}
.post-media-gallery.media-grid-4 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 180px);
}
.post-media-item {
position: relative;
overflow: hidden;
border-radius: 8px;
background: #090e1a;
border: 1px solid rgba(120, 152, 184, 0.15);
}
.post-media-link {
display: block;
width: 100%;
height: 100%;
cursor: zoom-in;
}
.post-media-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
.post-media-item:hover .post-media-img {
transform: scale(1.025);
filter: brightness(1.06);
} .post-media-item.has-more-overlay .post-media-link {
position: relative;
}
.post-media-more-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(5, 10, 18, 0.72);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
z-index: 2;
border: 1px solid rgba(56, 189, 248, 0.3);
}
.post-media-item:hover .post-media-more-overlay {
background: rgba(8, 16, 28, 0.58);
border-color: rgba(56, 189, 248, 0.6);
}
.more-count-badge {
font-size: 1.85rem;
font-weight: 800;
color: #FFFFFF;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.45);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-media-item:hover .more-count-badge {
transform: scale(1.08);
}
.post-media-videos {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.post-video-item {
border-radius: 12px;
overflow: hidden;
background: #050912;
border: 1px solid rgba(120, 152, 184, 0.2);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.post-video-player {
width: 100%;
max-height: 480px;
display: block;
background: #000;
outline: none;
} .gnozis-media-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.gnozis-media-lightbox.active {
opacity: 1;
visibility: visible;
}
.lightbox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(4, 8, 16, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.lightbox-content {
position: relative;
z-index: 2;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-image {
max-width: 86vw;
max-height: 84vh;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.75), 0 0 24px rgba(14, 165, 233, 0.25);
border: 1px solid rgba(120, 152, 184, 0.3);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.lightbox-image.is-changing {
opacity: 0.35;
transform: scale(0.98);
} .lightbox-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(11, 20, 34, 0.78);
border: 1px solid rgba(120, 152, 184, 0.3);
color: #FFFFFF;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
user-select: none;
outline: none;
}
.lightbox-prev {
left: 24px;
}
.lightbox-next {
right: 24px;
}
.lightbox-nav-btn:hover {
background: #112033;
border-color: #38BDF8;
color: #38BDF8;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
transform: translateY(-50%) scale(1.08);
}
.lightbox-nav-btn:active {
transform: translateY(-50%) scale(0.94);
} .lightbox-counter {
position: absolute;
top: 22px;
left: 24px;
font-size: 0.88rem;
font-weight: 700;
color: #E2E8F0;
background: rgba(11, 20, 34, 0.78);
border: 1px solid rgba(120, 152, 184, 0.25);
padding: 6px 14px;
border-radius: 20px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
letter-spacing: 0.04em;
z-index: 10;
}
.lightbox-close {
position: absolute;
top: -42px;
right: -10px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.lightbox-close:hover {
background: #ef4444;
border-color: #ef4444;
transform: scale(1.1);
}
@media (max-width: 768px) {
.lightbox-nav-btn {
width: 38px;
height: 38px;
font-size: 18px;
}
.lightbox-prev {
left: 10px;
}
.lightbox-next {
right: 10px;
}
.lightbox-counter {
top: 14px;
left: 14px;
font-size: 0.78rem;
padding: 4px 10px;
}
.lightbox-close {
top: -36px;
right: 0;
}
} .gnozis-feed-stream {
display: flex;
flex-direction: column;
gap: 20px;
} .gnozis-post-card {
padding: 22px;
display: flex;
flex-direction: column;
gap: 16px;
}
.post-card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.post-author-box {
display: flex;
align-items: center;
gap: 12px;
}
.author-avatar-wrap {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
}
.author-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #0d1527;
}
.author-ethereal-halo {
position: absolute;
inset: -3px;
border-radius: 50%;
background: radial-gradient(circle, rgba(26, 43, 60, 0.4) 0%, transparent 70%);
filter: blur(4px);
pointer-events: none;
}
.author-ethereal-halo.halo-cyan {
background: radial-gradient(circle, rgba(120, 152, 184, 0.4) 0%, transparent 70%);
}
.author-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.author-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.author-name {
font-size: 0.96rem;
font-weight: 600;
color: var(--gnozis-text-primary);
}
.rank-badge {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 2px 8px;
border-radius: var(--gnozis-radius-xs);
text-transform: uppercase;
}
.rank-magister {
background: rgba(26, 43, 60, 0.18);
color: #A0B0C0;
border: 1px solid rgba(26, 43, 60, 0.4);
box-shadow: 0 0 10px rgba(26, 43, 60, 0.2);
}
.rank-adept {
background: rgba(120, 152, 184, 0.15);
color: #BAE6FD;
border: 1px solid rgba(120, 152, 184, 0.35);
box-shadow: 0 0 10px rgba(120, 152, 184, 0.2);
}
.post-time {
font-size: 0.78rem;
color: var(--gnozis-text-tertiary);
} .post-header-actions {
display: flex;
align-items: center;
gap: 6px;
position: relative;
}
.post-card-header,
.post-header-row {
position: relative;
z-index: 5;
} .gnozis-card:has(.post-options-dropdown-wrap.active),
.gnozis-post-card:has(.post-options-dropdown-wrap.active),
.revelation-post-card:has(.post-options-dropdown-wrap.active),
article:has(.post-options-dropdown-wrap.active),
.gnozis-card.menu-open,
.gnozis-post-card.menu-open,
.revelation-post-card.menu-open,
article.menu-open {
position: relative !important;
z-index: 99999 !important;
overflow: visible !important;
}
.gnozis-card:has(.post-options-dropdown-wrap.active) .post-card-header,
.gnozis-post-card:has(.post-options-dropdown-wrap.active) .post-card-header,
.gnozis-card.menu-open .post-card-header,
.gnozis-post-card.menu-open .post-card-header,
.revelation-post-card.menu-open .post-card-header,
.post-card-header:has(.post-options-dropdown-wrap.active),
.post-card-header:has(.active) {
position: relative !important;
z-index: 99999 !important;
overflow: visible !important;
}
.post-options-dropdown-wrap {
position: relative;
z-index: 10;
}
.post-options-dropdown-wrap.active {
position: relative !important;
z-index: 99999 !important;
}
.post-options-btn {
background: transparent;
border: none;
color: var(--gnozis-text-muted);
cursor: pointer;
padding: 6px;
border-radius: var(--gnozis-radius-sm, 8px);
display: flex;
align-items: center;
justify-content: center;
transition: var(--gnozis-transition);
}
.post-options-btn:hover,
.post-options-dropdown-wrap.active .post-options-btn {
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.08);
}
.post-options-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 215px;
background: #0c1424 !important;
border: 1px solid rgba(120, 152, 184, 0.35) !important;
border-radius: var(--gnozis-radius-md, 12px) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.95), 0 0 25px rgba(0, 0, 0, 0.75) !important;
padding: 6px;
display: flex;
flex-direction: column;
gap: 3px;
z-index: 999999 !important;
opacity: 0;
visibility: hidden;
transform: translateY(-6px) scale(0.96);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-options-dropdown-wrap.active .post-options-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) scale(1) !important;
display: flex !important;
}
.post-menu-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--gnozis-text-primary, #e2e8f0);
font-size: 0.84rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
font-family: inherit;
}
.post-menu-item:hover {
background: rgba(120, 152, 184, 0.14);
color: var(--accent-cyan, #7898b8);
}
.post-menu-item.item-danger {
color: #f87171;
}
.post-menu-item.item-danger:hover {
background: rgba(239, 68, 68, 0.12);
color: #ef4444;
} .post-edited-indicator {
font-size: 0.74rem;
color: var(--gnozis-text-muted, #64748b);
font-style: italic;
margin-left: 2px;
} .post-inline-editor {
display: flex;
flex-direction: column;
gap: 10px;
margin: 8px 0 12px;
animation: fadeInPollDrawer 0.2s ease;
}
.post-edit-textarea {
width: 100%;
min-height: 80px;
padding: 10px 14px;
background: rgba(10, 16, 30, 0.95);
border: 1px solid rgba(120, 152, 184, 0.35);
border-radius: var(--gnozis-radius-md, 10px);
color: var(--gnozis-text-primary, #f1f5f9);
font-size: 0.94rem;
line-height: 1.5;
resize: vertical;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.post-edit-textarea:focus {
border-color: rgba(120, 152, 184, 0.7);
box-shadow: 0 0 12px rgba(120, 152, 184, 0.25);
}
.post-edit-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.post-edit-actions button {
padding: 6px 14px;
font-size: 0.82rem;
border-radius: var(--gnozis-radius-sm, 8px);
cursor: pointer;
} .post-shared-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
margin-bottom: 10px;
background: rgba(120, 152, 184, 0.12);
border: 1px solid rgba(120, 152, 184, 0.25);
border-radius: var(--gnozis-radius-full, 20px);
color: var(--accent-cyan, #7898b8);
font-size: 0.8rem;
font-weight: 500;
transition: var(--gnozis-transition);
}
.post-shared-badge svg {
color: var(--accent-cyan, #7898b8);
flex-shrink: 0;
}
.post-shared-badge .shared-author-link {
color: #A8C8E8;
font-weight: 600;
text-decoration: none;
transition: color 0.18s ease, text-decoration 0.18s ease;
}
.post-shared-badge .shared-author-link:hover {
color: #FFFFFF;
text-decoration: underline;
}
.post-text-body {
font-size: 0.94rem;
line-height: 1.65;
color: var(--gnozis-text-secondary);
} .gnozis-poll-widget {
display: flex;
flex-direction: column;
gap: 8px;
margin: 14px 0 4px;
}
.poll-option-row {
position: relative;
border-radius: var(--gnozis-radius-md);
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--gnozis-border-subtle);
padding: 12px 16px;
cursor: pointer;
transition: var(--gnozis-transition);
}
.poll-option-row:hover {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
} .poll-option-row.selected-glow {
border-color: rgba(96, 120, 144, 0.50);
box-shadow: 0 0 20px -5px rgba(96, 120, 144, 0.30);
}
.poll-bar-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
border-radius: var(--gnozis-radius-md) 0 0 var(--gnozis-radius-md);
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
} .fill-glow-violet {
background: linear-gradient(90deg, rgba(96, 120, 144, 0.65) 0%, rgba(56, 130, 246, 0.38) 100%);
box-shadow: inset 0 0 12px rgba(96, 120, 144, 0.30);
}
.fill-dark-indigo {
background: rgba(96, 120, 144, 0.16);
}
.fill-dark-cyan {
background: rgba(120, 152, 184, 0.14);
}
.poll-content-inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 0.88rem;
font-weight: 500;
}
.poll-content-inner .poll-text {
color: var(--gnozis-text-primary);
}
.poll-content-inner .poll-stat {
color: var(--gnozis-text-muted);
font-size: 0.82rem;
white-space: nowrap;
} .post-media-frame {
position: relative;
border-radius: var(--gnozis-radius-md);
overflow: hidden;
max-height: 260px;
border: 1px solid var(--gnozis-border-card);
background: #001020;
display: flex;
align-items: center;
justify-content: center;
}
.post-media-img {
width: 100%;
height: 100%;
max-height: 260px;
object-fit: contain;
position: relative;
z-index: 2;
}
.media-ambient-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(120, 152, 184, 0.15) 0%, transparent 70%);
filter: blur(20px);
z-index: 1;
} .post-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid var(--gnozis-border-subtle);
}
.post-reactions-bar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.reaction-pill-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-full);
color: var(--gnozis-text-muted);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: var(--gnozis-transition);
}
.reaction-pill-btn:hover {
background: rgba(245, 158, 11, 0.10);
border-color: rgba(245, 158, 11, 0.35);
color: var(--gnozis-text-primary);
transform: translateY(-1px);
} .reaction-pill-btn.active,
.reaction-pill-super.active {
background: rgba(245, 158, 11, 0.18);
border-color: rgba(245, 158, 11, 0.60);
color: #FDE68A;
box-shadow: 0 0 14px rgba(245, 158, 11, 0.28);
}
.reaction-label {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.reaction-emoji {
font-size: 1rem;
display: inline-block;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reaction-pill-btn:hover .reaction-emoji {
transform: scale(1.2) rotate(6deg);
}
.post-stats-bar {
display: flex;
align-items: center;
gap: 16px;
}
.post-stats-link {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
color: var(--gnozis-text-muted);
font-size: 0.82rem;
cursor: pointer;
transition: var(--gnozis-transition);
}
.post-stats-link:hover {
color: var(--gnozis-text-primary);
} .post-comments-thread {
margin-top: 14px;
padding-left: 16px;
border-left: 1px solid rgba(96, 120, 144, 0.28);
display: flex;
flex-direction: column;
gap: 14px;
}
.comments-list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
}
.btn-show-all-comments {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
background: rgba(30, 41, 59, 0.55);
border: 1px solid rgba(56, 189, 248, 0.22);
color: #38bdf8;
font-size: 0.82rem;
font-weight: 500;
padding: 6px 14px;
border-radius: 9999px;
cursor: pointer;
margin-bottom: 4px;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-show-all-comments:hover {
background: rgba(56, 189, 248, 0.14);
border-color: rgba(56, 189, 248, 0.45);
color: #7dd3fc;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}
.btn-show-all-comments.is-expanded {
background: rgba(30, 41, 59, 0.4);
border-color: rgba(148, 163, 184, 0.25);
color: #94a3b8;
}
.btn-show-all-comments.is-expanded:hover {
background: rgba(56, 189, 248, 0.1);
border-color: rgba(56, 189, 248, 0.35);
color: #38bdf8;
}
@keyframes hashGlowPulse {
0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); border-color: #38bdf8; }
50% { box-shadow: 0 0 24px 6px rgba(56, 189, 248, 0.45); border-color: #7dd3fc; }
100% { box-shadow: none; }
}
.gnozis-hash-highlight {
animation: hashGlowPulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.comment-item {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 0;
}
.comment-avatar-wrap {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--border-card);
}
.comment-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.comment-bubble {
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-md);
padding: 10px 14px;
flex-grow: 1;
}
.comment-author-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.comment-author-name {
font-size: 0.82rem;
font-weight: 600;
color: var(--gnozis-text-primary);
}
.comment-time {
font-size: 0.72rem;
color: var(--gnozis-text-tertiary);
}
.comment-text {
font-size: 0.86rem;
line-height: 1.5;
color: var(--gnozis-text-secondary);
margin: 0;
} .comment-footer-bar {
display: flex;
align-items: center;
gap: 12px;
margin-top: 6px;
padding-top: 2px;
}
.btn-reply-comment {
background: transparent;
border: none;
color: var(--gnozis-text-muted, #7898B8);
font-size: 0.76rem;
font-weight: 600;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
padding: 3px 6px;
border-radius: 4px;
transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.btn-reply-comment svg {
flex-shrink: 0;
stroke: currentColor;
}
.btn-reply-comment:hover {
color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
transform: translateY(-1px);
} .comment-thread {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 6px !important;
}
.comment-replies-section {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
} .btn-toggle-replies {
background: rgba(30, 41, 59, 0.45);
border: 1px solid rgba(56, 189, 248, 0.22);
color: #38bdf8;
font-size: 0.76rem;
font-weight: 600;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
margin-left: 42px;
margin-top: 4px;
margin-bottom: 4px;
padding: 4px 12px;
border-radius: var(--gnozis-radius-full, 9999px);
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
align-self: flex-start;
}
.btn-toggle-replies:hover {
color: #7dd3fc;
background: rgba(56, 189, 248, 0.16);
border-color: rgba(56, 189, 248, 0.45);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}
.btn-toggle-replies .reply-toggle-arrow {
transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
stroke: currentColor;
}
.btn-toggle-replies.is-open .reply-toggle-arrow {
transform: rotate(180deg);
} .comment-replies-wrap {
margin-left: 42px;
padding-left: 14px;
border-left: 2px solid rgba(56, 189, 248, 0.25);
margin-top: 6px;
margin-bottom: 6px;
width: calc(100% - 42px);
box-sizing: border-box;
}
.comment-replies-wrap .replies-list {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.comment-item.is-reply-item {
margin-top: 2px;
gap: 8px;
width: 100%;
}
.comment-item.is-reply-item .comment-avatar-wrap {
width: 26px;
height: 26px;
}
.comment-item.is-reply-item .comment-bubble {
padding: 8px 12px;
background: rgba(255, 255, 255, 0.018);
border-color: rgba(96, 120, 144, 0.2);
}
.comment-item.is-reply-item .comment-text {
font-size: 0.82rem;
} .comment-input-row {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-top: 14px !important;
padding-top: 2px;
width: 100% !important;
box-sizing: border-box !important;
}
.comment-replying-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.28);
border-radius: 8px;
font-size: 0.78rem;
color: #7dd3fc;
animation: replyBannerFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes replyBannerFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.comment-replying-info {
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.replying-icon {
color: #38bdf8;
font-size: 0.9rem;
}
.replying-target-name {
color: #38bdf8;
font-weight: 600;
}
.btn-cancel-reply-mode {
background: transparent;
border: none;
color: #94a3b8;
font-size: 0.85rem;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
line-height: 1;
transition: all 0.18s ease;
}
.btn-cancel-reply-mode:hover {
color: #f87171;
background: rgba(239, 68, 68, 0.15);
}
.comment-input-bottom-bar {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
}
.comment-input-wrap {
position: relative !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
.comment-input-field {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
background: rgba(16, 26, 38, 0.7);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-full);
padding: 8px 38px 8px 16px !important;
color: var(--gnozis-text-primary);
font-family: var(--gnozis-font-body);
font-size: 0.84rem;
outline: none;
box-sizing: border-box !important;
transition: var(--gnozis-transition);
}
.comment-input-wrap .gnozis-emoji-btn {
position: absolute !important;
right: 6px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 28px !important;
height: 28px !important;
margin: 0 !important;
z-index: 2 !important;
} .comment-input-field:focus {
border-color: rgba(96, 120, 144, 0.50);
box-shadow: 0 0 12px rgba(96, 120, 144, 0.22);
}
.comment-input-field::placeholder {
color: #506070;
} .btn-send-comment {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(96, 120, 144, 0.20);
border: 1px solid rgba(96, 120, 144, 0.45);
color: var(--gnozis-text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: var(--gnozis-transition);
}
.btn-send-comment:hover {
background: var(--accent-cobalt);
color: #E0E8F0;
box-shadow: 0 0 14px rgba(96, 120, 144, 0.50);
} .gnozis-right-sticky {
display: flex;
flex-direction: column;
gap: 12px;
} .gnozis-shop-showcase-card {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
background: #0d1522;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--gnozis-radius-lg, 16px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.shop-widget-header {
margin-bottom: 0;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.shop-widget-header-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 8px;
width: 100%;
}
.shop-header-title-box {
display: inline-flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
min-width: 0;
}
.shop-header-sigil {
color: #38bdf8;
font-size: 0.82rem;
line-height: 1;
flex-shrink: 0;
}
.shop-header-title {
font-size: 0.84rem;
font-weight: 700;
color: #f8fafc;
margin: 0;
white-space: nowrap;
letter-spacing: -0.01em;
}
.shop-hit-badge,
.badge-rarity {
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.3);
border-radius: 9999px;
font-size: 0.60rem;
font-weight: 700;
padding: 1px 6px;
line-height: 1.3;
white-space: nowrap;
flex-shrink: 0;
display: inline-flex;
align-items: center;
text-transform: uppercase;
letter-spacing: 0.03em;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.15);
}
.shop-header-link-all,
.link-view-all {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.72rem;
font-weight: 500;
color: #94a3b8;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
transition: all 0.2s ease;
}
.shop-header-link-all:hover,
.link-view-all:hover {
color: #38bdf8;
transform: translateX(2px);
} .featured-artifact-preview {
display: flex;
flex-direction: column;
gap: 8px;
}
.artifact-svg-frame {
position: relative;
width: 100%;
min-height: 105px;
max-height: 115px;
border-radius: var(--gnozis-radius-md, 12px);
overflow: hidden;
background: radial-gradient(circle at 50% 40%, rgba(56, 189, 248, 0.1) 0%, rgba(15, 23, 42, 0.6) 60%, rgba(10, 15, 26, 0.95) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.artifact-showcase-img {
max-width: 100%;
max-height: 98px;
width: auto;
height: auto;
object-fit: contain;
position: relative;
z-index: 2;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
transition: transform 0.3s ease;
}
.featured-img-link:hover .artifact-showcase-img {
transform: scale(1.05);
} .artifact-ambient-cobalt-glow,
.artifact-ambient-violet-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.15) 0%, transparent 65%);
pointer-events: none;
z-index: 1;
}
.artifact-meta-box {
display: flex;
flex-direction: column;
gap: 5px;
}
.artifact-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--gnozis-text-primary);
line-height: 1.25;
margin: 0;
}
.artifact-description {
font-size: 0.76rem;
line-height: 1.35;
color: var(--gnozis-text-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
} .artifact-price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: 4px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-md);
flex-wrap: nowrap;
overflow: hidden;
}
.price-box {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: nowrap;
min-width: 0;
flex-shrink: 1;
}
.price-label {
font-size: 0.72rem;
color: var(--gnozis-text-tertiary);
white-space: nowrap;
flex-shrink: 0;
}
.price-val {
font-size: 1rem;
font-weight: 700;
color: var(--accent-cyan);
letter-spacing: -0.01em;
white-space: nowrap;
flex-shrink: 0;
}
.price-val.price-sale {
color: #ef4444;
}
.price-val-old {
font-size: 0.78rem;
font-weight: 500;
color: #94a3b8;
text-decoration: line-through;
white-space: nowrap;
flex-shrink: 0;
}
.card-discount-pill {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
color: #ffffff;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 5px;
padding: 2px 5px;
letter-spacing: 0.01em;
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
white-space: nowrap;
flex-shrink: 0;
}
.currency-pills-switcher {
display: flex;
align-items: center;
gap: 2px;
background: rgba(0, 16, 32, 0.6);
padding: 2px;
border-radius: var(--gnozis-radius-sm);
border: 1px solid var(--gnozis-border-subtle);
flex-shrink: 0;
white-space: nowrap;
}
.currency-pill {
background: transparent;
border: none;
color: var(--gnozis-text-tertiary);
font-size: 0.64rem;
font-weight: 600;
padding: 2px 4px;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.2;
transition: var(--gnozis-transition-fast);
} .currency-pill.active {
background: rgba(96, 120, 144, 0.35);
color: #E0E8F0;
box-shadow: 0 0 8px rgba(96, 120, 144, 0.45);
} .artifact-cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 2px;
}
.artifact-cta-grid .btn-buy-instant {
padding: 6px 8px;
font-size: 0.76rem;
}
.artifact-cta-grid .btn-add-cart {
padding: 6px 8px;
font-size: 0.76rem;
} .shop-secondary-artifacts {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 14px;
border-top: 1px solid var(--gnozis-border-subtle);
}
.artifact-mini-card {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-md);
transition: var(--gnozis-transition);
}
.artifact-mini-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
.mini-thumb {
width: 38px;
height: 38px;
border-radius: var(--gnozis-radius-sm);
overflow: hidden;
background: #101820;
border: 1px solid var(--gnozis-border-card);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mini-thumb img {
width: 80%;
height: 80%;
object-fit: contain;
}
.mini-info {
flex-grow: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.mini-title {
font-size: 0.82rem;
font-weight: 600;
color: var(--gnozis-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-price {
font-size: 0.76rem;
font-weight: 600;
color: var(--accent-cyan);
}
.btn-mini-add {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-sm);
color: var(--gnozis-text-secondary);
padding: 6px 10px;
font-size: 0.78rem;
cursor: pointer;
transition: var(--gnozis-transition);
} .btn-mini-add:hover {
background: rgba(96, 120, 144, 0.20);
border-color: rgba(96, 120, 144, 0.45);
color: #E0E8F0;
} .gnozis-mystic-widget {
padding: 18px 20px;
}
.widget-header-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.widget-chevron {
color: var(--accent-cyan);
font-size: 1.2rem;
line-height: 1;
}
.widget-sigil {
color: var(--accent-violet-light);
font-size: 0.9rem;
}
.widget-title-glow {
font-size: 0.92rem;
font-weight: 600;
color: var(--accent-cyan);
text-shadow: 0 0 10px rgba(120, 152, 184, 0.35);
}
.widget-title {
font-size: 0.92rem;
font-weight: 600;
color: var(--gnozis-text-primary);
} .lunar-content-box {
display: flex;
align-items: center;
gap: 16px;
}
.lunar-moon-visual {
position: relative;
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lunar-crescent-svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 10px rgba(120, 152, 184, 0.5));
}
.lunar-cyan-aura {
position: absolute;
inset: 4px;
background: radial-gradient(circle, rgba(120, 152, 184, 0.3) 0%, transparent 70%);
filter: blur(8px);
pointer-events: none;
}
.lunar-info-box {
display: flex;
flex-direction: column;
gap: 4px;
}
.lunar-phase-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--gnozis-text-primary);
}
.lunar-phase-text {
font-size: 0.78rem;
line-height: 1.45;
color: var(--gnozis-text-muted);
} .mentors-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.mentor-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: var(--gnozis-radius-md);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--gnozis-border-subtle);
transition: var(--gnozis-transition);
}
.mentor-item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
.mentor-avatar-wrap {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.mentor-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.mentor-info {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.mentor-name {
font-size: 0.84rem;
font-weight: 600;
color: var(--gnozis-text-primary);
}
.mentor-role {
font-size: 0.72rem;
color: var(--gnozis-text-muted);
}
.btn-mentor-connect {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-sm);
color: var(--accent-cyan);
padding: 5px 10px;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: var(--gnozis-transition);
}
.btn-mentor-connect:hover {
background: rgba(120, 152, 184, 0.15);
border-color: rgba(120, 152, 184, 0.4);
box-shadow: 0 0 10px rgba(120, 152, 184, 0.25);
} .gnozis-modal {
position: fixed;
inset: 0;
z-index: 999999 !important;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.gnozis-modal.open {
opacity: 1;
pointer-events: auto;
}
.gnozis-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 10, 20, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 1;
} .gnozis-modal-dialog {
position: relative;
z-index: 2;
width: 100%;
max-width: 440px;
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #102030;
border: 1px solid rgba(96, 120, 144, 0.35);
border-radius: var(--gnozis-radius-xl);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(96, 120, 144, 0.18);
padding: 26px;
margin: auto;
transform: translateY(12px) scale(0.97);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnozis-modal.open .gnozis-modal-dialog {
transform: translateY(0) scale(1);
}
.gnozis-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.modal-title-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.modal-sigil {
color: var(--accent-cyan);
font-size: 1.1rem;
}
.modal-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--gnozis-text-primary);
}
.gnozis-modal-close {
background: transparent;
border: none;
color: var(--gnozis-text-muted);
font-size: 1.2rem;
cursor: pointer;
padding: 4px;
border-radius: var(--gnozis-radius-sm);
transition: var(--gnozis-transition);
}
.gnozis-modal-close:hover {
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.08);
} .modal-product-notice {
padding: 10px 14px;
background: rgba(96, 120, 144, 0.12);
border: 1px solid rgba(96, 120, 144, 0.32);
border-radius: var(--gnozis-radius-md);
margin-bottom: 18px;
display: flex;
flex-direction: column;
gap: 3px;
}
.modal-product-notice .notice-label {
font-size: 0.72rem;
color: var(--gnozis-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.modal-product-notice strong {
font-size: 0.88rem;
color: #C0D0E0;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.form-group label {
font-size: 0.78rem;
font-weight: 500;
color: var(--gnozis-text-secondary);
}
.gnozis-input-modal {
width: 100%;
background: rgba(16, 26, 38, 0.8);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-md);
padding: 10px 14px;
color: var(--gnozis-text-primary);
font-family: var(--gnozis-font-body);
font-size: 0.88rem;
outline: none;
transition: var(--gnozis-transition);
} .gnozis-input-modal:focus {
border-color: rgba(96, 120, 144, 0.55);
box-shadow: 0 0 12px rgba(96, 120, 144, 0.22);
} .gnozis-cart-drawer {
position: fixed;
inset: 0;
z-index: 1000005 !important;
pointer-events: none;
visibility: hidden;
transition: visibility 0.25s ease;
}
.gnozis-cart-drawer.open {
pointer-events: auto;
visibility: visible;
}
.gnozis-drawer-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.25s ease;
}
.gnozis-cart-drawer.open .gnozis-drawer-overlay {
opacity: 1;
} .gnozis-cart-drawer-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
background: #0f172a;
border-left: 1px solid #1e293b;
box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 2;
}
.gnozis-cart-drawer.open .gnozis-cart-drawer-inner {
transform: translateX(0);
}
.gnozis-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #111827;
border-bottom: 1px solid #1e293b;
}
.drawer-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.drawer-sigil {
font-size: 1.2rem;
}
.drawer-title {
font-size: 1.05rem;
font-weight: 600;
color: #f1f5f9;
margin: 0;
}
.drawer-badge {
background: #1e293b;
border: 1px solid #334155;
color: #94a3b8;
font-size: 0.72rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
}
.gnozis-drawer-close {
background: transparent;
border: none;
color: #64748b;
font-size: 1.1rem;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.gnozis-drawer-close:hover {
color: #f1f5f9;
background: #1e293b;
}
.gnozis-drawer-body {
flex-grow: 1;
overflow-y: auto;
padding: 16px 20px;
display: flex;
flex-direction: column;
}
.gnozis-drawer-items-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.gnozis-drawer-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #111827;
border: 1px solid #1e293b;
border-radius: 10px;
transition: border-color 0.15s ease;
}
.gnozis-drawer-item:hover {
border-color: #334155;
}
.item-thumb {
width: 54px;
height: 54px;
border-radius: 8px;
overflow: hidden;
background: #0b101b;
border: 1px solid #1e293b;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.item-thumb img {
width: 54px !important;
height: 54px !important;
max-width: 54px !important;
max-height: 54px !important;
object-fit: cover !important;
display: block !important;
}
.item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.item-title {
font-size: 0.88rem;
font-weight: 600;
color: #e2e8f0;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item-meta-row {
display: flex;
align-items: center;
gap: 8px;
}
.item-price {
font-size: 0.84rem;
font-weight: 600;
color: #94a3b8;
}
.item-qty {
font-size: 0.78rem;
color: #64748b;
}
.btn-drawer-remove-item {
width: 28px;
height: 28px;
border-radius: 6px;
background: transparent;
border: 1px solid transparent;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s ease;
}
.btn-drawer-remove-item:hover {
color: #f87171;
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.25);
} .gnozis-qty-stepper {
display: inline-flex;
align-items: center;
background: #0B1420;
border: 1px solid #1F3247;
border-radius: 6px;
padding: 2px;
gap: 2px;
user-select: none;
transition: var(--gnozis-transition, all 0.2s ease);
}
.gnozis-qty-stepper:hover {
border-color: #2D4866;
}
.gnozis-qty-stepper.is-updating {
opacity: 0.6;
pointer-events: none;
}
.gnozis-qty-stepper .btn-qty-step {
width: 22px;
height: 22px;
border-radius: 4px;
background: #112033;
border: 1px solid #1C2E42;
color: #94A3B8;
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.18s ease;
padding: 0;
}
.gnozis-qty-stepper .btn-qty-step:hover {
background: #1A3250;
color: #38BDF8;
border-color: #38BDF8;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
}
.gnozis-qty-stepper .btn-qty-step:active {
transform: scale(0.92);
}
.gnozis-qty-stepper .qty-step-value {
min-width: 20px;
text-align: center;
font-size: 0.8rem;
font-weight: 700;
color: #F1F5F9;
padding: 0 4px;
font-variant-numeric: tabular-nums;
} .review-item-meta-bar {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
}
.gnozis-checkout-qty-stepper {
background: #09101A;
border: 1px solid #1A2C3F;
}
.gnozis-checkout-qty-stepper .btn-qty-step {
width: 20px;
height: 20px;
font-size: 0.75rem;
}
.gnozis-checkout-qty-stepper .qty-step-value {
min-width: 18px;
font-size: 0.78rem;
}
.btn-checkout-remove-item {
background: transparent;
border: none;
color: #64748B;
font-size: 0.75rem;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: all 0.2s ease;
line-height: 1;
}
.btn-checkout-remove-item:hover {
color: #F87171;
background: rgba(239, 68, 68, 0.12);
}
.gnozis-drawer-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
min-height: 200px;
gap: 10px;
color: #64748b;
}
.empty-sigil {
font-size: 2.2rem;
}
.gnozis-drawer-empty h5 {
color: #e2e8f0;
font-size: 1rem;
margin: 0;
}
.gnozis-drawer-empty p {
font-size: 0.85rem;
max-width: 260px;
margin: 0 auto;
}
.gnozis-drawer-footer {
padding: 16px 20px;
border-top: 1px solid #1e293b;
background: #111827;
display: flex;
flex-direction: column;
gap: 12px;
}
.drawer-total-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.92rem;
color: #94a3b8;
}
.drawer-total-val {
font-size: 1.15rem;
font-weight: 700;
color: #f1f5f9;
}
.drawer-checkout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
background: #1e293b;
border: 1px solid #334155;
color: #f1f5f9;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.drawer-checkout-btn:hover {
background: #24344d;
border-color: #475569;
color: #ffffff;
}   .gnozis-shop-navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 20px;
background: rgba(0, 16, 32, 0.90);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-default);
border-radius: var(--gnozis-radius-lg);
box-shadow: var(--shadow-card);
margin-bottom: 24px;
position: sticky;
top: 20px;
z-index: 40;
}
.shop-nav-left {
display: flex;
align-items: center;
}
.btn-back-to-network {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-md);
padding: 8px 16px;
font-size: 0.85rem;
font-weight: 600;
transition: var(--gnozis-transition);
} .btn-back-to-network:hover {
background: rgba(96, 120, 144, 0.16);
border-color: rgba(96, 120, 144, 0.48);
color: #E0E8F0;
box-shadow: 0 0 16px rgba(96, 120, 144, 0.30);
transform: translateX(-3px);
}
.btn-back-to-network svg {
transition: transform 0.2s;
}
.btn-back-to-network:hover svg {
transform: translateX(-2px);
}
.shop-nav-center {
display: flex;
align-items: center;
}
.shop-nav-brand {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.shop-nav-brand .brand-sigil {
color: var(--accent-cyan);
font-size: 1.1rem;
text-shadow: 0 0 8px rgba(120, 152, 184, 0.4);
}
.shop-nav-brand .brand-name {
font-family: var(--gnozis-font-heading);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--gnozis-text-primary);
}
.shop-nav-brand .brand-badge {
background: rgba(120, 152, 184, 0.15);
color: var(--accent-cyan);
border: 1px solid rgba(120, 152, 184, 0.35);
border-radius: var(--gnozis-radius-full);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 8px;
margin-left: 4px;
}
.shop-nav-right {
display: flex;
align-items: center;
gap: 12px;
}
.shop-nav-links {
list-style: none;
display: flex;
align-items: center;
gap: 6px;
}
.nav-link-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: var(--gnozis-radius-md);
color: var(--gnozis-text-muted);
font-size: 0.82rem;
font-weight: 500;
background: rgba(255, 255, 255, 0.02);
border: 1px solid transparent;
transition: var(--gnozis-transition);
}
.nav-link-pill:hover {
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.05);
border-color: var(--border-card);
}
.btn-shop-cart-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(120, 152, 184, 0.1);
border: 1px solid rgba(120, 152, 184, 0.3);
border-radius: var(--gnozis-radius-md);
padding: 7px 14px;
color: var(--gnozis-text-primary);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: var(--gnozis-transition);
}
.btn-shop-cart-trigger:hover {
background: rgba(120, 152, 184, 0.2);
box-shadow: 0 0 12px rgba(120, 152, 184, 0.3);
color: #E0E8F0;
} .shop-breadcrumbs {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-full);
font-size: 0.8rem;
margin-bottom: 16px;
}
.crumb-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gnozis-text-muted);
transition: color 0.2s;
}
.crumb-link:hover {
color: var(--accent-cyan);
}
.crumb-sep {
color: var(--gnozis-text-tertiary);
}
.crumb-current {
color: var(--gnozis-text-secondary);
font-weight: 600;
}
.gnozis-shop-container {
max-width: 1360px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.gnozis-shop-header {
text-align: center;
padding: 10px 20px 20px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.shop-sigil {
color: var(--accent-cyan);
font-size: 0.95rem;
letter-spacing: 0.3em;
display: block;
margin-bottom: 8px;
text-shadow: 0 0 10px rgba(120, 152, 184, 0.4);
}
.shop-title {
font-size: 2.2rem;
font-weight: 700;
color: var(--gnozis-text-primary);
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.shop-subtitle {
font-size: 0.95rem;
color: var(--gnozis-text-muted);
max-width: 600px;
margin: 0 auto;
}
.gnozis-shop-layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.gnozis-shop-filters {
display: flex;
flex-direction: column;
gap: 20px;
position: sticky;
top: 24px;
}
.filter-card {
background: var(--gnozis-bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-lg);
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.filter-title {
font-size: 0.92rem;
font-weight: 600;
color: var(--gnozis-text-primary);
border-bottom: 1px solid var(--gnozis-border-subtle);
padding-bottom: 10px;
}
.filter-categories-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-categories-list li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-radius: var(--gnozis-radius-md);
color: var(--gnozis-text-muted);
font-size: 0.85rem;
transition: var(--gnozis-transition);
} .filter-categories-list li a:hover,
.filter-categories-list li.active a {
background: rgba(96, 120, 144, 0.16);
color: var(--gnozis-text-primary);
border: 1px solid rgba(96, 120, 144, 0.38);
}
.filter-categories-list .count {
font-size: 0.72rem;
background: rgba(255, 255, 255, 0.05);
padding: 2px 6px;
border-radius: 9999px;
}
.price-slider-box {
display: flex;
flex-direction: column;
gap: 10px;
} .gnozis-range-slider {
width: 100%;
accent-color: var(--accent-cobalt);
}
.price-range-labels {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: var(--gnozis-text-muted);
}
.current-price-val {
color: var(--accent-cyan);
font-weight: 600;
}
.gnozis-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.82rem;
color: var(--gnozis-text-secondary);
cursor: pointer;
} .gnozis-checkbox-label input {
accent-color: var(--accent-cobalt);
}
.gnozis-shop-catalog {
display: flex;
flex-direction: column;
gap: 20px;
}
.catalog-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
background: var(--gnozis-bg-card);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-md);
font-size: 0.85rem;
color: var(--gnozis-text-muted);
}
.gnozis-select {
background: rgba(0, 16, 32, 0.8);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-sm);
color: var(--gnozis-text-primary);
padding: 6px 12px;
font-size: 0.82rem;
outline: none;
}
.gnozis-products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.gnozis-product-card {
background: var(--gnozis-bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
transition: var(--gnozis-transition);
cursor: pointer;
}
.card-thumb-link {
display: block;
text-decoration: none;
color: inherit;
position: relative;
outline: none;
}
.gnozis-product-card .card-actions-row,
.gnozis-product-card .card-admin-bar {
cursor: default;
} .gnozis-product-card:hover {
border-color: rgba(96, 120, 144, 0.50);
transform: translateY(-3px);
box-shadow: 0 14px 30px -10px rgba(96, 120, 144, 0.28);
}
.gnozis-product-card .card-badge {
position: absolute;
top: 12px;
right: 12px;
background: rgba(120, 152, 184, 0.15);
color: var(--accent-cyan);
border: 1px solid rgba(120, 152, 184, 0.35);
border-radius: var(--gnozis-radius-full);
font-size: 0.68rem;
font-weight: 700;
padding: 2px 8px;
z-index: 5;
}
.card-thumb-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
min-height: 190px;
background: radial-gradient(circle at 50% 50%, #0d1728 0%, #060a12 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 12px;
}
.card-thumb-img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
position: relative;
z-index: 2;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnozis-product-card:hover .card-thumb-img {
transform: scale(1.06);
} .card-thumb-aura {
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(96, 120, 144, 0.22) 0%, transparent 70%);
filter: blur(15px);
z-index: 1;
}
.card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex-grow: 1;
}
.card-category {
font-size: 0.72rem;
color: var(--gnozis-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.card-title {
font-size: 0.96rem;
font-weight: 600;
color: var(--gnozis-text-primary);
line-height: 1.35;
}
.card-title a {
color: inherit;
}
.card-title a:hover {
color: var(--accent-cyan);
}
.card-desc {
font-size: 0.8rem;
color: var(--gnozis-text-muted);
line-height: 1.45;
flex-grow: 1;
}
.gnozis-product-card.has-discount {
border-color: rgba(239, 68, 68, 0.35);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.15);
}
.gnozis-product-card.has-discount:hover {
border-color: rgba(239, 68, 68, 0.6);
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(239, 68, 68, 0.3);
}
.card-badge-discount {
position: absolute;
top: 10px;
left: 10px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #f97316 100%);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 8px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.02em;
padding: 4px 10px;
z-index: 6;
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
display: inline-flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(8px);
animation: pulseDiscountGlow 2.8s infinite ease-in-out;
}
@keyframes pulseDiscountGlow {
0%, 100% {
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
transform: scale(1);
}
50% {
box-shadow: 0 6px 22px rgba(249, 115, 22, 0.8);
transform: scale(1.05);
}
}
.card-price-row {
margin-top: 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.card-price-stack {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.card-price-group {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.card-price {
font-size: 1.25rem;
font-weight: 800;
color: var(--accent-cyan);
}
.card-price.price-sale strong {
color: #38bdf8;
font-size: 1.3rem;
font-weight: 800;
text-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}
.card-price-old {
font-size: 0.96rem;
color: #cbd5e1;
text-decoration: line-through;
text-decoration-color: #ef4444;
text-decoration-thickness: 2px;
font-weight: 600;
opacity: 0.95;
letter-spacing: -0.01em;
}
.card-price-old .price-val-old {
color: #cbd5e1;
}
.card-discount-economy-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 2px;
}
.card-discount-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.74rem;
font-weight: 800;
color: #ffffff;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 6px;
padding: 2px 7px;
letter-spacing: 0.02em;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.card-economy-text {
font-size: 0.75rem;
color: #34d399;
font-weight: 600;
}
.card-economy-text strong {
color: #6ee7b7;
font-weight: 700;
}
.card-actions-row {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 8px;
width: 100%;
} .btn-gnozis-card-cart {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(59, 130, 246, 0.22) 100%);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.4);
border-radius: var(--gnozis-radius-sm, 10px);
padding: 10px 14px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--gnozis-transition);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
box-sizing: border-box;
}
.btn-gnozis-card-cart:hover {
background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
transform: translateY(-1px);
} .card-admin-bar {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.btn-admin-card-edit,
.btn-admin-card-delete {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 10px;
border-radius: var(--gnozis-radius-sm);
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
transition: var(--gnozis-transition);
text-decoration: none;
}
.btn-admin-card-edit {
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.35);
color: #38bdf8;
}
.btn-admin-card-edit:hover {
background: rgba(56, 189, 248, 0.22);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.btn-admin-card-delete {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.35);
color: #f87171;
}
.btn-admin-card-delete:hover {
background: rgba(239, 68, 68, 0.22);
border-color: #ef4444;
color: #ffffff;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
} .btn-reset-shop-filters {
width: 100%;
padding: 10px 14px;
background: rgba(96, 120, 144, 0.08);
border: 1px dashed rgba(96, 120, 144, 0.3);
border-radius: var(--gnozis-radius-md);
color: var(--gnozis-text-muted);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: var(--gnozis-transition);
text-align: center;
}
.btn-reset-shop-filters:hover {
background: rgba(96, 120, 144, 0.18);
border-color: rgba(96, 120, 144, 0.55);
color: var(--gnozis-text-primary);
} .gnozis-no-products {
background: var(--gnozis-bg-card);
border: 1px dashed var(--gnozis-border-card);
border-radius: var(--gnozis-radius-lg);
padding: 48px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
grid-column: 1 / -1;
}
.no-products-icon {
font-size: 2.8rem;
margin-bottom: 4px;
animation: floatIcon 3s ease-in-out infinite alternate;
}
@keyframes floatIcon {
from { transform: translateY(0); }
to { transform: translateY(-8px); }
}
.no-products-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--gnozis-text-primary);
}
.no-products-desc {
font-size: 0.88rem;
color: var(--gnozis-text-muted);
max-width: 380px;
line-height: 1.5;
}
.btn-reset-filters-inline {
margin-top: 8px;
padding: 9px 18px;
font-size: 0.85rem;
cursor: pointer;
} .gnozis-mobile-header {
display: none;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: rgba(16, 24, 32, 0.85);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--gnozis-border-card);
position: sticky;
top: 0;
z-index: 50;
}
.gnozis-mobile-brand {
display: flex;
align-items: center;
gap: 8px;
color: var(--gnozis-text-primary);
font-weight: 700;
}
.gnozis-mobile-brand .gnozis-brand-symbol {
color: var(--accent-cyan);
}
.gnozis-mobile-toggle {
background: transparent;
border: none;
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 6px;
}
.hamburger-line {
width: 22px;
height: 2px;
background: var(--gnozis-text-primary);
border-radius: 2px;
}
.btn-drawer-cart-trigger {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-full);
padding: 6px 12px;
color: var(--gnozis-text-primary);
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.cart-badge {
background: var(--accent-cyan);
color: #101820;
font-size: 0.72rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 9999px;
}
.gnozis-mobile-bottom-nav {
display: none;
} .gnozis-mobile-promoted-post,
.gnozis-post-card.gnozis-mobile-promoted-post,
article.gnozis-mobile-promoted-post {
display: none !important;
border: 1px solid rgba(56, 189, 248, 0.25);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(20, 29, 47, 0.98) 100%);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 15px rgba(56, 189, 248, 0.08);
position: relative;
overflow: hidden;
}
.gnozis-mobile-promoted-post::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, transparent);
}
.gnozis-mobile-promoted-post .promoted-product-media-card {
transition: transform 0.2s ease, border-color 0.2s ease;
}
.gnozis-mobile-promoted-post .promoted-product-media-card:hover {
border-color: rgba(56, 189, 248, 0.4);
transform: translateY(-2px);
} @media (min-width: 769px) {
.gnozis-mobile-bottom-nav {
display: none !important;
}
}
@media (min-width: 1025px) {
.gnozis-mobile-promoted-post,
.gnozis-post-card.gnozis-mobile-promoted-post,
article.gnozis-mobile-promoted-post {
display: none !important;
}
}
@media (max-width: 1200px) {
.gnozis-layout-3col {
grid-template-columns: 240px minmax(0, 1fr) 310px;
gap: 18px;
}
}
@media (max-width: 1024px) {
.gnozis-layout-3col {
grid-template-columns: minmax(0, 1fr);
}
.gnozis-col-left,
.gnozis-col-right {
display: none !important;
}
.gnozis-mobile-header {
display: flex;
}
.gnozis-mobile-promoted-post,
.gnozis-post-card.gnozis-mobile-promoted-post,
article.gnozis-mobile-promoted-post {
display: flex !important;
flex-direction: column !important;
}
.gnozis-page-shell {
padding-bottom: 75px;
}
}
@media (max-width: 900px) {
.gnozis-shop-layout {
grid-template-columns: 1fr;
}
.gnozis-shop-filters {
position: static;
}
}
@media (max-width: 768px) {
.gnozis-layout-3col {
grid-template-columns: 1fr;
}
.gnozis-col-right {
position: static;
}
.gnozis-page-shell {
padding: 16px 14px 90px;
}
} .gnozis-auth-viewport {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(85vh - 60px);
padding: 30px 16px 70px;
position: relative;
z-index: 2;
} .gnozis-auth-card {
display: grid;
grid-template-columns: 1fr 1.15fr;
max-width: 920px;
width: 100%;
border-radius: 22px;
overflow: hidden;
background: rgba(0, 16, 32, 0.90);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
border: 1px solid rgba(96, 120, 144, 0.28);
box-shadow: 0 24px 65px -12px rgba(0, 0, 0, 0.90), 0 0 50px rgba(96, 120, 144, 0.10);
position: relative;
}
.auth-card-visual {
padding: 44px 36px;
background: linear-gradient(145deg, rgba(16, 26, 38, 0.98) 0%, rgba(0, 10, 20, 0.99) 100%);
border-right: 1px solid var(--border-default);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.auth-back-to-feed {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gnozis-text-muted);
font-size: 0.84rem;
font-weight: 500;
text-decoration: none;
padding: 7px 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-card);
transition: var(--gnozis-transition);
width: fit-content;
margin-bottom: 24px;
}
.auth-back-to-feed:hover {
color: var(--accent-cyan);
border-color: rgba(120, 152, 184, 0.4);
background: rgba(120, 152, 184, 0.08);
transform: translateX(-3px);
}
.visual-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: auto 0;
}
.auth-sigil-rotating {
position: relative;
width: 140px;
height: 140px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.auth-sigil-rotating .sacred-seal-svg {
width: 100%;
height: 100%;
animation: spinSlowSigil 36s linear infinite;
filter: drop-shadow(0 0 18px rgba(26, 43, 60, 0.5));
}
@keyframes spinSlowSigil {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.auth-sigil-glow {
position: absolute;
inset: 15%;
border-radius: 50%;
background: radial-gradient(circle, rgba(26, 43, 60, 0.45) 0%, rgba(120, 152, 184, 0.2) 50%, transparent 70%);
filter: blur(24px);
pointer-events: none;
}
.auth-brand-title {
font-family: var(--font-primary);
font-size: 1.85rem;
font-weight: 700;
letter-spacing: 0.18em;
color: #E0E8F0;
margin: 0 0 6px;
text-shadow: 0 0 25px rgba(26, 43, 60, 0.6);
}
.auth-slogan {
font-size: 0.88rem;
color: var(--accent-cyan);
font-style: italic;
margin-bottom: 16px;
opacity: 0.95;
letter-spacing: 0.02em;
}
.auth-manifesto {
font-size: 0.84rem;
color: var(--gnozis-text-secondary);
line-height: 1.6;
max-width: 300px;
margin: 0 auto;
}
.auth-card-forms {
padding: 44px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.auth-tabs-nav {
display: flex;
background: rgba(255, 255, 255, 0.04);
padding: 4px;
border-radius: 12px;
border: 1px solid var(--border-card);
margin-bottom: 26px;
gap: 4px;
}
.auth-tab-btn {
flex: 1;
padding: 11px 16px;
border: none;
background: transparent;
color: var(--gnozis-text-muted);
font-size: 0.88rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: var(--gnozis-transition);
text-align: center;
outline: none;
} .auth-tab-btn.active {
background: rgba(96, 120, 144, 0.28);
color: #E0E8F0;
border: 1px solid rgba(96, 120, 144, 0.48);
box-shadow: 0 4px 14px rgba(96, 120, 144, 0.22);
}
.auth-tab-btn:hover:not(.active) {
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.05);
}
.gnozis-auth-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.gnozis-auth-form .form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.gnozis-auth-form .form-group label {
font-size: 0.82rem;
font-weight: 500;
color: var(--gnozis-text-secondary);
}
.gnozis-auth-form .label-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.gnozis-auth-form .link-lostpass {
font-size: 0.78rem;
color: var(--accent-cyan);
text-decoration: none;
transition: var(--gnozis-transition);
}
.gnozis-auth-form .link-lostpass:hover {
color: #A0B0C0;
text-decoration: underline;
}
.gnozis-auth-form .gnozis-input {
width: 100%;
padding: 13px 16px;
background: rgba(16, 24, 32, 0.85);
border: 1px solid var(--border-card);
border-radius: 10px;
color: #E0E8F0;
font-size: 0.92rem;
font-family: inherit;
transition: var(--gnozis-transition);
outline: none;
box-sizing: border-box;
} .gnozis-auth-form .gnozis-input:focus {
border-color: var(--accent-cobalt);
box-shadow: 0 0 0 3px rgba(96, 120, 144, 0.22);
background: rgba(26, 43, 60, 0.95);
}
.gnozis-auth-form .gnozis-input::placeholder {
color: rgba(148, 163, 184, 0.45);
}
.gnozis-auth-form .form-check-row {
flex-direction: row;
align-items: center;
}
.gnozis-checkbox-label {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
font-size: 0.83rem;
color: var(--gnozis-text-secondary);
line-height: 1.4;
} .gnozis-checkbox-label input[type="checkbox"] {
accent-color: var(--accent-cobalt);
width: 17px;
height: 17px;
cursor: pointer;
flex-shrink: 0;
}
.gnozis-alert {
padding: 12px 16px;
border-radius: 10px;
font-size: 0.86rem;
margin-bottom: 22px;
display: flex;
align-items: center;
gap: 10px;
}
.gnozis-alert-error {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #FCA5A5;
}
.gnozis-alert-success {
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #6EE7B7;
}
@media (max-width: 860px) {
.gnozis-auth-card {
grid-template-columns: 1fr;
max-width: 500px;
}
.auth-card-visual {
border-right: none;
border-bottom: 1px solid var(--border-default);
padding: 32px 24px;
}
.auth-card-forms {
padding: 32px 24px;
}
}  .gnozis-feed-filter-tabs {
display: flex;
align-items: center;
gap: 8px;
padding: 6px;
background: rgba(16, 24, 32, 0.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-lg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.feed-tab-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--gnozis-radius-md);
color: var(--gnozis-text-muted);
font-family: var(--gnozis-font-body);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: var(--gnozis-transition);
outline: none;
white-space: nowrap;
}
.feed-tab-btn span {
white-space: nowrap;
}
.feed-tab-btn:hover {
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.04);
} .feed-tab-btn.active {
background: rgba(96, 120, 144, 0.14);
border-color: rgba(96, 120, 144, 0.32);
color: var(--gnozis-text-primary);
font-weight: 600;
box-shadow: none;
} .post-header-actions {
display: flex;
align-items: center;
gap: 6px;
}
.post-bookmark-btn {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-sm);
color: var(--gnozis-text-muted);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--gnozis-transition);
}
.post-bookmark-btn:hover {
color: var(--accent-cyan);
border-color: rgba(120, 152, 184, 0.3);
background: rgba(120, 152, 184, 0.08);
} .post-bookmark-btn.active {
color: #7898B8;
background: rgba(96, 120, 144, 0.20);
border-color: rgba(96, 120, 144, 0.50);
box-shadow: 0 0 10px rgba(96, 120, 144, 0.28);
} .gnozis-toast-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
} .gnozis-toast-item {
pointer-events: auto;
background: rgba(16, 32, 48, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(96, 120, 144, 0.50);
border-radius: 12px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 24px rgba(96, 120, 144, 0.22);
color: #E0E8F0;
padding: 13px 22px;
font-family: var(--gnozis-font-body);
font-size: 0.88rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transform-origin: bottom right;
animation: toastSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.gnozis-toast-item.toast-fadeout {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
@keyframes toastSlideUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
} .gnozis-profile-viewport {
max-width: 960px;
margin: 0 auto;
padding: 30px 20px 80px;
display: flex;
flex-direction: column;
gap: 24px;
}
.profile-top-bar {
display: flex;
align-items: center;
}
.profile-hero-card {
padding: 0;
overflow: hidden;
position: relative;
}
.profile-hero-banner {
height: 160px;
background: linear-gradient(135deg, rgba(16, 26, 38, 0.95) 0%, rgba(0, 16, 32, 0.98) 100%);
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.banner-nebula-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 75% 30%, rgba(26, 43, 60, 0.35) 0%, transparent 60%),
radial-gradient(circle at 20% 80%, rgba(120, 152, 184, 0.25) 0%, transparent 50%);
filter: blur(25px);
}
.profile-hero-content {
padding: 0 32px 30px;
position: relative;
margin-top: -50px;
}
.profile-avatar-row {
display: flex;
align-items: flex-end;
gap: 22px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.profile-avatar-wrap {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
flex-shrink: 0;
}
.profile-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 3px solid #101820;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
position: relative;
z-index: 2;
}
.avatar-aura-ring {
position: absolute;
inset: -4px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(26, 43, 60, 0.7), rgba(120, 152, 184, 0.7));
filter: blur(8px);
z-index: 1;
}
.profile-identity {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 6px;
}
.profile-display-name {
font-size: 1.5rem;
font-weight: 700;
color: #E0E8F0;
letter-spacing: -0.01em;
margin: 0;
}
.profile-badges-row {
display: flex;
align-items: center;
gap: 10px;
}
.status-pill.status-astral {
background: rgba(120, 152, 184, 0.12);
border: 1px solid rgba(120, 152, 184, 0.3);
color: var(--accent-cyan);
font-size: 0.72rem;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--gnozis-radius-full);
}
.profile-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--gnozis-border-subtle);
}
.profile-stat-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
transition: var(--gnozis-transition);
}
.profile-stat-box:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
.profile-stat-box .stat-num {
font-size: 1.25rem;
font-weight: 700;
color: var(--accent-cyan);
letter-spacing: -0.01em;
}
.profile-stat-box .stat-lbl {
font-size: 0.75rem;
color: var(--gnozis-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.profile-main-layout {
display: flex;
flex-direction: column;
gap: 20px;
}
.profile-tabs-nav {
display: flex;
background: rgba(16, 24, 32, 0.6);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-lg);
padding: 5px;
gap: 6px;
}
.profile-tab-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--gnozis-radius-md);
color: var(--gnozis-text-muted);
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: var(--gnozis-transition);
}
.profile-tab-btn:hover {
color: var(--gnozis-text-primary);
background: rgba(255, 255, 255, 0.04);
} .profile-tab-btn.active {
background: rgba(96, 120, 144, 0.14);
border-color: rgba(96, 120, 144, 0.32);
color: var(--gnozis-text-primary);
font-weight: 600;
box-shadow: none;
}
.profile-tab-pane {
display: block;
}
.profile-wall-composer {
margin-bottom: 22px !important;
}
.profile-orders-card,
.profile-keys-card {
padding: 26px;
}
.gnozis-empty-card {
padding: 36px 24px;
text-align: center;
color: var(--gnozis-text-muted);
font-size: 0.92rem;
line-height: 1.6;
} .profile-friends-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.friend-mini-card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px 18px;
background: rgba(16, 24, 36, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
}
.friend-mini-card:hover {
transform: translateY(-2px);
border-color: rgba(96, 165, 250, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(96, 165, 250, 0.08);
}
.friend-mini-card-inner {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.friend-mini-avatar-wrap {
position: relative;
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 50%;
}
.friend-mini-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
display: block;
border: 2px solid rgba(255, 255, 255, 0.12);
transition: border-color 0.2s ease;
}
.friend-mini-card:hover .friend-mini-avatar {
border-color: rgba(96, 165, 250, 0.5);
}
.friend-online-dot {
position: absolute;
bottom: 2px;
right: 2px;
width: 11px;
height: 11px;
background: #10B981;
border: 2px solid #0B132B;
border-radius: 50%;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.friend-mini-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.friend-mini-name {
color: var(--gnozis-text-primary, #F8FAFC);
text-decoration: none;
font-size: 0.96rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.18s ease;
}
.friend-mini-name:hover {
color: #60A5FA;
}
.friend-mini-rank {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
color: #93C5FD;
background: rgba(59, 130, 246, 0.12);
padding: 2px 7px;
border-radius: 6px;
border: 1px solid rgba(59, 130, 246, 0.24);
align-self: flex-start;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.friend-mini-meta {
font-size: 0.78rem;
color: var(--gnozis-text-muted, #94A3B8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.friend-mini-actions {
display: flex;
align-items: center;
gap: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 12px;
}
.btn-mini-view {
flex: 1;
text-align: center;
padding: 7px 12px;
font-size: 0.82rem;
font-weight: 500;
color: var(--gnozis-text-primary, #F8FAFC);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-mini-view:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.22);
color: #FFFFFF;
}
.btn-mini-msg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: rgba(96, 165, 250, 0.1);
border: 1px solid rgba(96, 165, 250, 0.24);
border-radius: 8px;
color: #93C5FD;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.2s ease;
flex-shrink: 0;
}
.btn-mini-msg:hover {
background: rgba(96, 165, 250, 0.22);
border-color: rgba(96, 165, 250, 0.45);
transform: scale(1.05);
}
.btn-mini-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
color: var(--gnozis-text-primary, #F8FAFC);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.btn-mini-action-icon:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
transform: scale(1.05);
}
.btn-mini-action-icon.active {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.35);
color: #10B981;
}
.btn-mini-action-icon.is-pending {
background: rgba(245, 158, 11, 0.15);
border-color: rgba(245, 158, 11, 0.35);
color: #F59E0B;
}
.profile-stat-clickable {
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.profile-stat-clickable:hover {
transform: translateY(-2px);
border-color: rgba(96, 165, 250, 0.4);
background: rgba(16, 24, 36, 0.9);
}
.friend-empty-card {
padding: 42px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 16px;
border: 1px dashed rgba(255, 255, 255, 0.14);
background: rgba(16, 24, 36, 0.45);
}
.friend-empty-icon {
font-size: 2.6rem;
margin-bottom: 12px;
opacity: 0.8;
}
.friend-empty-title {
font-size: 1.15rem;
font-weight: 600;
margin: 0 0 8px;
color: var(--gnozis-text-primary, #F8FAFC);
}
.friend-empty-text {
max-width: 420px;
margin: 0 0 18px;
font-size: 0.88rem;
color: var(--gnozis-text-muted, #94A3B8);
line-height: 1.5;
}
.friend-empty-btn {
display: inline-block;
text-decoration: none;
padding: 9px 20px;
font-size: 0.88rem;
border-radius: 10px;
} .gnozis-messages-viewport {
max-width: 1080px;
margin: 0 auto;
padding: 30px 20px 80px;
display: flex;
flex-direction: column;
gap: 20px;
}
.messages-top-bar {
display: flex;
align-items: center;
}
.gnozis-messages-card {
display: grid;
grid-template-columns: 320px 1fr;
height: 680px;
max-height: calc(100vh - 140px);
min-height: 520px;
padding: 0;
overflow: hidden;
}
.messages-sidebar {
background: rgba(0, 16, 32, 0.7);
border-right: 1px solid var(--gnozis-border-card);
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}
.messages-sidebar-header {
flex-shrink: 0;
padding: 18px 20px;
border-bottom: 1px solid var(--gnozis-border-subtle);
}
.messages-dialogs-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
-webkit-overflow-scrolling: touch;
}
.messages-sidebar-header .header-title-box {
display: flex;
align-items: center;
gap: 8px;
}
.messages-sidebar-header .chat-sigil {
color: var(--accent-violet);
font-size: 0.95rem;
}
.messages-sidebar-header h4 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #E0E8F0;
}
.messages-dialogs-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.dialog-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
transition: var(--gnozis-transition);
}
.dialog-item:hover {
background: rgba(255, 255, 255, 0.03);
} .dialog-item.active {
background: rgba(96, 120, 144, 0.14);
border-left: 3px solid var(--accent-cobalt);
}
.dialog-avatar-wrap {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
}
.dialog-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.dialog-status.online {
position: absolute;
bottom: 0;
right: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: #10B981;
border: 2px solid #101820;
box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
.dialog-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.dialog-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.dialog-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--gnozis-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dialog-time {
font-size: 0.72rem;
color: var(--gnozis-text-tertiary);
flex-shrink: 0;
}
.dialog-snippet {
font-size: 0.78rem;
color: var(--gnozis-text-muted);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-chat-pane {
display: flex;
flex-direction: column;
background: rgba(16, 24, 32, 0.4);
position: relative;
height: 100%;
min-height: 0;
max-height: 100%;
overflow: hidden;
}
.chat-header {
flex-shrink: 0;
padding: 16px 24px;
border-bottom: 1px solid var(--gnozis-border-subtle);
background: rgba(16, 26, 38, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
.chat-interlocutor {
display: flex;
align-items: center;
gap: 12px;
}
.interlocutor-avatar-wrap {
position: relative;
width: 42px;
height: 42px;
}
.chat-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.chat-aura-halo {
position: absolute;
inset: -3px;
border-radius: 50%;
background: radial-gradient(circle, rgba(26, 43, 60, 0.4) 0%, transparent 70%);
filter: blur(4px);
pointer-events: none;
}
.interlocutor-name {
margin: 0 0 2px;
font-size: 0.95rem;
font-weight: 600;
color: #E0E8F0;
}
.interlocutor-rank {
font-size: 0.76rem;
color: var(--accent-cyan);
}
.chat-messages-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 16px;
-webkit-overflow-scrolling: touch;
}
.msg-bubble-wrap {
display: flex;
flex-direction: column;
max-width: 70%;
}
.msg-bubble-wrap.incoming {
align-self: flex-start;
}
.msg-bubble-wrap.outgoing {
align-self: flex-end;
}
.msg-bubble {
padding: 12px 18px;
border-radius: 16px;
font-size: 0.9rem;
line-height: 1.55;
position: relative;
}
.msg-bubble-wrap.incoming .msg-bubble {
background: rgba(16, 26, 38, 0.85);
border: 1px solid var(--gnozis-border-card);
color: var(--gnozis-text-primary);
border-bottom-left-radius: 4px;
} .msg-bubble-wrap.outgoing .msg-bubble {
background: linear-gradient(135deg, #4A6070 0%, #607890 100%);
color: #E0E8F0;
box-shadow: 0 4px 16px rgba(96, 120, 144, 0.35);
border-bottom-right-radius: 4px;
}
.msg-bubble p {
margin: 0 0 4px;
}
.msg-time {
display: block;
font-size: 0.68rem;
opacity: 0.7;
text-align: right;
}
.chat-composer-row {
flex-shrink: 0;
padding: 16px 20px;
background: rgba(16, 26, 38, 0.95);
border-top: 1px solid var(--gnozis-border-subtle);
display: flex;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 5;
}
.chat-composer-row .chat-input-field {
flex: 1;
background: rgba(0, 16, 32, 0.8);
border: 1px solid var(--gnozis-border-card);
border-radius: var(--gnozis-radius-full);
padding: 11px 20px;
color: #E0E8F0;
font-family: inherit;
font-size: 0.92rem;
outline: none;
transition: var(--gnozis-transition);
} .chat-composer-row .chat-input-field:focus {
border-color: var(--accent-cobalt, #607890);
box-shadow: 0 0 12px rgba(96, 120, 144, 0.25);
}
.chat-composer-row .chat-input-field::placeholder {
color: #506070;
} .chat-composer-row .btn-send-chat,
.chat-composer-row .btn-chat-send {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--accent-cobalt, #4A6070);
border: none;
color: #E0E8F0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--gnozis-transition);
box-shadow: 0 0 14px rgba(96, 120, 144, 0.38);
flex-shrink: 0;
}
.chat-composer-row .btn-send-chat:hover,
.chat-composer-row .btn-chat-send:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(96, 120, 144, 0.55);
}
@media (max-width: 768px) {
.profile-stats-grid {
grid-template-columns: 1fr 1fr;
}
.gnozis-messages-card {
grid-template-columns: 1fr;
height: auto;
max-height: none;
}
.messages-sidebar {
height: 220px;
}
.messages-chat-pane {
height: 520px;
min-height: 0;
max-height: 75vh;
overflow: hidden;
}
.chat-composer-row .chat-input-field {
font-size: 16px !important;
}
} .gnozis-subpage-viewport {
max-width: 1040px;
margin: 0 auto;
padding: 30px 20px 80px;
display: flex;
flex-direction: column;
gap: 24px;
}
.subpage-top-bar {
display: flex;
align-items: center;
}
.subpage-header-card {
padding: 36px 32px;
position: relative;
overflow: hidden;
background: linear-gradient(145deg, rgba(16, 26, 38, 0.98) 0%, rgba(0, 10, 20, 0.99) 100%);
border: 1px solid var(--gnozis-border-card);
} .subpage-header-glow {
position: absolute;
top: -50px;
right: -50px;
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, rgba(96, 120, 144, 0.30) 0%, rgba(120, 152, 184, 0.12) 50%, transparent 70%);
filter: blur(40px);
pointer-events: none;
}
.subpage-header-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 680px;
}
.subpage-badge-row {
margin-bottom: 2px;
}
.subpage-main-title {
font-size: 2rem;
font-weight: 700;
color: #E0E8F0;
letter-spacing: -0.02em;
margin: 0;
}
.subpage-description {
font-size: 0.94rem;
line-height: 1.6;
color: var(--gnozis-text-secondary);
margin: 0;
}
.subpage-filter-tabs {
margin-bottom: 4px;
} .groups-catalog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.group-card {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
transition: var(--gnozis-transition);
cursor: pointer;
} .group-card:hover {
transform: translateY(-3px);
border-color: rgba(96, 120, 144, 0.45);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(96, 120, 144, 0.18);
}
.group-card-banner {
height: 90px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.banner-violet {
background: linear-gradient(135deg, rgba(26, 43, 60, 0.45) 0%, rgba(0, 16, 32, 0.8) 100%);
}
.banner-cyan {
background: linear-gradient(135deg, rgba(120, 152, 184, 0.35) 0%, rgba(0, 16, 32, 0.8) 100%);
}
.banner-amber {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(0, 16, 32, 0.8) 100%);
}
.banner-indigo {
background: linear-gradient(135deg, rgba(96, 120, 144, 0.45) 0%, rgba(0, 16, 32, 0.8) 100%);
}
.group-sigil {
font-size: 2.2rem;
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}
.group-card-body {
padding: 22px;
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
}
.group-meta-top {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.78rem;
}
.group-members-badge {
color: var(--gnozis-text-tertiary);
}
.group-status-open {
color: var(--accent-cyan);
font-weight: 600;
}
.group-status-restricted {
color: #F59E0B;
font-weight: 600;
}
.group-title {
font-size: 1.15rem;
font-weight: 700;
color: #E0E8F0;
margin: 0;
}
.group-desc {
font-size: 0.86rem;
line-height: 1.55;
color: var(--gnozis-text-muted);
margin: 0;
flex-grow: 1;
}
.group-footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid var(--gnozis-border-subtle);
}
.group-magister {
font-size: 0.76rem;
color: var(--gnozis-text-tertiary);
}
.btn-join-group {
padding: 7px 16px;
font-size: 0.82rem;
} .members-catalog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.member-profile-card {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
transition: var(--gnozis-transition);
}
.member-profile-card:hover {
transform: translateY(-2px);
border-color: rgba(120, 152, 184, 0.4);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(120, 152, 184, 0.12);
}
.member-card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.member-avatar-wrap {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
}
.member-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid #101820;
position: relative;
z-index: 2;
}
.member-aura-ring {
position: absolute;
inset: -3px;
border-radius: 50%;
filter: blur(6px);
z-index: 1;
}
.member-aura-ring.aura-violet {
background: radial-gradient(circle, rgba(26, 43, 60, 0.6) 0%, transparent 70%);
}
.member-aura-ring.aura-cyan {
background: radial-gradient(circle, rgba(120, 152, 184, 0.6) 0%, transparent 70%);
}
.member-online-dot {
position: absolute;
bottom: 2px;
right: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #10B981;
border: 2px solid #101820;
z-index: 3;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.member-badge-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.member-card-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.member-name {
font-size: 1.1rem;
font-weight: 700;
color: #E0E8F0;
margin: 0;
}
.member-order {
font-size: 0.78rem;
color: var(--accent-cyan);
font-weight: 500;
}
.member-bio {
font-size: 0.84rem;
line-height: 1.5;
color: var(--gnozis-text-muted);
margin: 4px 0 6px;
}
.member-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 10px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-md);
text-align: center;
}
.member-stat .stat-v {
display: block;
font-size: 0.95rem;
color: var(--accent-cyan);
}
.member-stat .stat-l {
font-size: 0.68rem;
color: var(--gnozis-text-tertiary);
text-transform: uppercase;
}
.member-actions-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.btn-member-msg {
flex: 1;
text-align: center;
text-decoration: none;
padding: 8px 14px;
font-size: 0.82rem;
} .notifications-stream-card {
padding: 24px;
display: flex;
flex-direction: column;
gap: 18px;
}
.notifications-header-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px solid var(--gnozis-border-subtle);
}
.notif-count-badge {
font-size: 0.84rem;
color: var(--accent-cyan);
font-weight: 600;
}
.btn-clear-notifs {
background: transparent;
border: none;
color: var(--gnozis-text-muted);
font-size: 0.8rem;
cursor: pointer;
transition: var(--gnozis-transition);
}
.btn-clear-notifs:hover {
color: #E0E8F0;
}
.notifications-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.notif-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--gnozis-border-subtle);
border-radius: var(--gnozis-radius-md);
position: relative;
transition: var(--gnozis-transition);
}
.notif-item:hover {
background: rgba(255, 255, 255, 0.04);
} .notif-item.unread {
background: rgba(96, 120, 144, 0.09);
border-color: rgba(96, 120, 144, 0.32);
}
.notif-sigil-wrap {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.1rem;
} .sigil-violet {
background: rgba(96, 120, 144, 0.20);
border: 1px solid rgba(96, 120, 144, 0.42);
}
.sigil-cyan {
background: rgba(120, 152, 184, 0.18);
border: 1px solid rgba(120, 152, 184, 0.35);
}
.sigil-blue {
background: rgba(96, 120, 144, 0.2);
border: 1px solid rgba(96, 120, 144, 0.4);
}
.sigil-amber {
background: rgba(245, 158, 11, 0.2);
border: 1px solid rgba(245, 158, 11, 0.4);
}
.notif-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.notif-text {
font-size: 0.88rem;
line-height: 1.45;
color: var(--gnozis-text-primary);
margin: 0;
}
.notif-time {
font-size: 0.74rem;
color: var(--gnozis-text-tertiary);
} .notif-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-cobalt);
box-shadow: 0 0 8px rgba(96, 120, 144, 0.80);
flex-shrink: 0;
} .user-avatar-link,
.user-name-link,
.featured-img-link,
.artifact-title-link,
.mini-title-link,
.mini-thumb-link,
.mentor-avatar-link,
.mentor-name-link,
.author-avatar-link,
.author-name-link,
.comment-author-link {
text-decoration: none;
color: inherit;
transition: var(--gnozis-transition);
}
.user-name-link:hover,
.artifact-title-link:hover,
.mini-title-link:hover,
.mentor-name-link:hover,
.author-name-link:hover,
.comment-author-link:hover {
color: var(--accent-cyan) !important;
}
.featured-img-link:hover .artifact-showcase-img,
.mini-thumb-link:hover img {
transform: scale(1.05);
transition: transform 0.3s ease;
}
@media (max-width: 800px) {
.groups-catalog-grid,
.members-catalog-grid {
grid-template-columns: 1fr;
}
} .gnozis-notifications-popover {
position: fixed;
top: 60px;
right: 24px;
width: 360px;
max-width: calc(100vw - 32px);
max-height: 480px;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
z-index: 100005;
display: none;
flex-direction: column;
overflow: hidden;
animation: popoverSlideIn 0.2s ease;
}
.gnozis-notifications-popover.open {
display: flex;
}
@keyframes popoverSlideIn {
from {
opacity: 0;
transform: translateY(-12px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.notif-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.popover-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.popover-title-row h5 {
font-size: 0.95rem;
color: var(--gnozis-text-primary);
margin: 0;
}
.popover-unread-badge {
background: var(--accent-gradient-primary);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
}
.btn-popover-mark-read {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--gnozis-text-secondary);
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-popover-mark-read:hover {
color: var(--accent-cyan);
border-color: var(--accent-cyan);
background: rgba(56, 189, 248, 0.08);
}
.notif-popover-body {
padding: 8px 0;
overflow-y: auto;
max-height: 380px;
}
.gnozis-dropdown-notif-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 18px;
text-decoration: none;
color: inherit;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
transition: background 0.2s ease;
position: relative;
}
.gnozis-dropdown-notif-item:hover {
background: rgba(56, 189, 248, 0.06);
}
.gnozis-dropdown-notif-item.unread {
background: rgba(56, 189, 248, 0.04);
}
.gnozis-dropdown-notif-item.unread::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent-cyan);
}
.notif-sigil-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.notif-sigil-icon.sigil-cyan {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.3);
color: #38bdf8;
}
.notif-sigil-icon.sigil-steel {
background: rgba(96, 120, 144, 0.15);
border-color: rgba(96, 120, 144, 0.3);
color: #7898b8;
}
.notif-sigil-icon.sigil-amber {
background: rgba(245, 158, 11, 0.15);
border-color: rgba(245, 158, 11, 0.3);
color: #f59e0b;
}
.notif-sigil-icon.sigil-emerald {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.3);
color: #34d399;
}
.notif-details {
flex: 1;
}
.notif-details .notif-text {
font-size: 0.82rem;
line-height: 1.45;
color: var(--gnozis-text-primary);
margin-bottom: 4px;
}
.notif-details .notif-text strong {
color: #fff;
}
.notif-details .notif-timestamp {
font-size: 0.7rem;
color: var(--gnozis-text-tertiary);
} .notif-actions-inline {
display: flex;
gap: 8px;
align-items: center;
margin: 6px 0 4px;
flex-wrap: wrap;
}
.btn-notif-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid transparent;
text-decoration: none;
line-height: 1.2;
z-index: 2;
position: relative;
}
.btn-notif-action.btn-notif-accept {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.35));
border-color: rgba(16, 185, 129, 0.45);
color: #6ee7b7;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}
.btn-notif-action.btn-notif-accept:hover {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.45), rgba(5, 150, 105, 0.6));
border-color: rgba(16, 185, 129, 0.7);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}
.btn-notif-action.btn-notif-decline {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
color: var(--gnozis-text-secondary);
}
.btn-notif-action.btn-notif-decline:hover {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
transform: translateY(-1px);
}
.badge-notif-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 500;
}
.badge-notif-status.badge-status-accepted {
background: rgba(16, 185, 129, 0.15);
color: #6ee7b7;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-notif-status.badge-status-handled {
background: rgba(255, 255, 255, 0.05);
color: var(--gnozis-text-tertiary);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-toggle-friend.is-pending {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.35);
color: #fbbf24;
}
.btn-toggle-friend.is-pending:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
}
.notif-popover-footer {
padding: 10px 18px;
text-align: center;
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.popover-view-all-link {
font-size: 0.78rem;
color: var(--accent-cyan);
text-decoration: none;
transition: color 0.2s ease;
}
.popover-view-all-link:hover {
color: #7dd3fc;
}
.empty-notifs-box {
padding: 30px 20px;
text-align: center;
color: var(--gnozis-text-tertiary);
font-size: 0.85rem;
} .gnozis-messages-popover {
position: fixed;
top: 62px;
right: 70px;
width: 375px;
max-width: calc(100vw - 24px);
height: 540px;
max-height: calc(100vh - 84px);
background: linear-gradient(180deg, #090e18 0%, #060a12 100%);
border: 1px solid rgba(56, 189, 248, 0.24);
border-radius: 20px;
box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.92), 0 0 30px rgba(56, 189, 248, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
z-index: 100004;
display: none;
flex-direction: column;
overflow: hidden;
animation: popoverSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnozis-messages-popover.open {
display: flex;
}
.chats-popover-header {
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px 16px 12px;
background: rgba(15, 23, 42, 0.65);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.chats-popover-top-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.chats-popover-brand {
display: flex;
align-items: center;
gap: 10px;
}
.chats-brand-symbol {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.3);
color: #38bdf8;
font-size: 0.9rem;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
flex-shrink: 0;
}
.chats-brand-meta {
display: flex;
flex-direction: column;
}
.chats-popover-title {
font-size: 1.05rem;
font-weight: 700;
color: #f8fafc;
margin: 0;
line-height: 1.2;
letter-spacing: -0.01em;
}
.chats-brand-sub {
font-size: 0.68rem;
color: #64748b;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.chats-popover-actions {
display: flex;
align-items: center;
gap: 6px;
}
.chats-action-btn {
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
font-size: 0.82rem;
font-weight: 600;
transition: all 0.2s ease;
}
.chats-action-btn:hover {
background: rgba(56, 189, 248, 0.16);
border-color: rgba(56, 189, 248, 0.45);
color: #38bdf8;
transform: translateY(-1px);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}
.chats-popover-search-wrap {
position: relative;
width: 100%;
}
.chats-popover-search-icon {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: #64748b;
display: flex;
align-items: center;
pointer-events: none;
}
.chats-popover-search-input {
width: 100%;
height: 35px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 0 12px 0 34px;
color: #f8fafc;
font-size: 0.82rem;
outline: none;
box-sizing: border-box;
transition: all 0.2s ease;
}
.chats-popover-search-input:focus {
background: rgba(15, 23, 42, 0.85);
border-color: rgba(56, 189, 248, 0.5);
box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}
.chats-popover-search-input::placeholder {
color: #475569;
}
.chats-popover-filter-tabs {
display: flex;
align-items: center;
gap: 4px;
background: rgba(0, 0, 0, 0.35);
padding: 3px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.chats-filter-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 5px 8px;
border-radius: 7px;
background: transparent;
border: none;
color: #94a3b8;
font-size: 0.76rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.chats-filter-tab:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.05);
}
.chats-filter-tab.active {
background: rgba(56, 189, 248, 0.16);
color: #38bdf8;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(56, 189, 248, 0.35);
}
.chats-filter-tab .tab-glyph {
font-size: 0.72rem;
opacity: 0.85;
}
.chats-popover-body {
flex: 1;
overflow-y: auto;
padding: 6px 4px;
scrollbar-width: thin;
scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
}
.chats-popover-body::-webkit-scrollbar {
width: 5px;
}
.chats-popover-body::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.3);
border-radius: 10px;
}
.chats-popover-item {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
border-radius: 10px;
margin: 2px 4px;
cursor: pointer;
position: relative;
background: transparent;
border-left: 2px solid transparent;
transition: all 0.2s ease;
text-decoration: none;
}
.chats-popover-item:hover {
background: rgba(56, 189, 248, 0.08);
border-left-color: #38bdf8;
transform: translateX(2px);
}
.chats-popover-item.is-unread {
background: rgba(56, 189, 248, 0.05);
border-left-color: rgba(56, 189, 248, 0.75);
}
.chats-item-avatar-wrap {
position: relative;
width: 42px;
height: 42px;
flex-shrink: 0;
}
.chats-item-avatar {
width: 100%;
height: 100%;
border-radius: 12px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.chats-item-online-dot {
position: absolute;
bottom: -2px;
right: -2px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #10b981;
border: 2px solid #090e18;
box-shadow: 0 0 8px #10b981;
}
.chats-item-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.chats-item-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.chats-item-name {
font-size: 0.9rem;
font-weight: 600;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chats-item-time {
font-size: 0.72rem;
color: #64748b;
white-space: nowrap;
}
.chats-item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.chats-item-snippet {
font-size: 0.78rem;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.chats-item-unread-dot {
width: 8px;
height: 8px;
min-width: 8px;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}
.chats-empty-state {
padding: 36px 16px;
text-align: center;
color: #64748b;
}
.chats-empty-icon {
display: block;
font-size: 2rem;
margin-bottom: 8px;
opacity: 0.8;
}
.chats-empty-state p {
margin: 0;
font-size: 0.86rem;
}
.chats-popover-footer {
padding: 10px 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.25);
text-align: center;
}
.chats-popover-view-all {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 9px 16px;
border-radius: 12px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.22);
color: #38bdf8;
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
transition: all 0.2s ease;
box-sizing: border-box;
}
.chats-popover-view-all:hover {
background: rgba(56, 189, 248, 0.16);
border-color: rgba(56, 189, 248, 0.45);
color: #f8fafc;
box-shadow: 0 4px 14px rgba(56, 189, 248, 0.18);
transform: translateY(-1px);
text-decoration: none;
}
.chats-popover-view-all .btn-sparkle {
font-size: 0.85rem;
color: #38bdf8;
transition: transform 0.2s ease;
}
.chats-popover-view-all:hover .btn-sparkle {
transform: rotate(15deg) scale(1.15);
color: #7dd3fc;
}
.chats-popover-view-all svg {
transition: transform 0.2s ease;
}
.chats-popover-view-all:hover svg {
transform: translateX(3px);
}
@media (max-width: 768px) {
.gnozis-messages-popover {
right: 12px !important;
top: 56px !important;
width: calc(100vw - 24px) !important;
max-width: none !important;
height: 480px !important;
}
} .gnozis-chat-heads-dock {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9980;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: 12px;
pointer-events: none;
} body.woocommerce-checkout .gnozis-chat-heads-dock,
body.woocommerce-checkout .gnozis-mini-chat-window,
body.page-template-page-checkout .gnozis-chat-heads-dock,
body.page-template-page-checkout .gnozis-mini-chat-window,
.gnozis-checkout-page-wrapper ~ .gnozis-chat-heads-dock,
.gnozis-checkout-page-wrapper ~ .gnozis-mini-chat-window,
.woocommerce-checkout #gnozis-chat-heads-dock,
body.page-template-template-messages .gnozis-chat-heads-dock,
body.page-template-template-messages .gnozis-mini-chat-window,
.gnozis-messages-page-wrapper ~ .gnozis-chat-heads-dock,
.gnozis-messages-page-wrapper ~ .gnozis-mini-chat-window {
display: none !important;
}
.chat-heads-list {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: 10px;
pointer-events: auto;
}
.chat-head-item {
position: relative;
width: 52px;
height: 52px;
border-radius: 50%;
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
pointer-events: auto;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.chat-head-item:hover {
transform: scale(1.08);
}
.chat-head-item.active {
box-shadow: 0 0 0 2.5px var(--accent-cyan), 0 8px 25px rgba(56, 189, 248, 0.4);
}
.chat-head-avatar-wrap {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.18);
background: #0d1424;
display: flex;
align-items: center;
justify-content: center;
}
.chat-head-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.chat-head-badge {
position: absolute;
top: -2px;
right: -2px;
background: #ef4444;
color: #fff;
font-size: 0.68rem;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid #0a0f1d;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.chat-head-online {
position: absolute;
bottom: 1px;
right: 1px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #10b981;
border: 2px solid #0a0f1d;
}
.chat-head-dismiss {
position: absolute;
top: -3px;
left: -3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #cbd5e1;
font-size: 0.65rem;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.chat-head-item:hover .chat-head-dismiss {
display: flex;
}
.chat-head-dismiss:hover {
background: #ef4444;
color: #fff;
border-color: #ef4444;
}
.chat-head-more-btn {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(20, 32, 48, 0.92);
backdrop-filter: blur(16px);
border: 2px solid rgba(56, 189, 248, 0.4);
color: var(--accent-cyan);
font-family: var(--gnozis-font-heading);
font-size: 0.85rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
transition: transform 0.25s ease, background 0.2s ease;
pointer-events: auto;
}
.chat-head-more-btn:hover {
transform: scale(1.08);
background: rgba(26, 43, 60, 0.98);
border-color: var(--accent-cyan);
}
.chat-heads-more-popup {
position: absolute;
right: 65px;
bottom: 0;
width: 260px;
background: rgba(13, 20, 36, 0.98);
backdrop-filter: blur(20px);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
overflow: hidden;
pointer-events: auto;
z-index: 9990;
animation: popoverSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.more-popup-header {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.78rem;
font-weight: 600;
color: var(--gnozis-text-secondary);
}
.more-popup-list {
max-height: 220px;
overflow-y: auto;
padding: 4px 0;
}
.more-popup-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
transition: background 0.2s ease;
}
.more-popup-item:hover {
background: rgba(56, 189, 248, 0.08);
}
.more-popup-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.more-popup-info {
flex: 1;
min-width: 0;
}
.more-popup-name {
display: block;
font-size: 0.82rem;
color: var(--gnozis-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.more-popup-status {
font-size: 0.68rem;
color: var(--gnozis-text-tertiary);
}
.more-popup-badge {
background: #ef4444;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 8px;
}  .gnozis-floating-chat-bubble {
width: 48px;
height: 48px;
border-radius: 50%;
background: #141e30;
border: 1px solid #24344d;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
position: relative;
transition: all 0.2s ease;
}
.gnozis-floating-chat-bubble:hover {
background: #1e2d42;
border-color: #334866;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.chat-bubble-icon {
font-size: 1.25rem;
color: #94a3b8;
}
.chat-bubble-badge {
position: absolute;
top: -2px;
right: -2px;
background: #881337;
color: #fecdd3;
font-size: 0.65rem;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
border: 1.5px solid #0b101b;
} .gnozis-mini-chat-window {
position: fixed;
bottom: 24px;
right: 80px;
width: 340px;
max-width: calc(100vw - 32px);
height: 440px;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
z-index: 100005;
display: none;
flex-direction: column;
overflow: hidden;
animation: miniChatSlideUp 0.2s ease;
}
.gnozis-mini-chat-window.open {
display: flex;
}
.gnozis-mini-chat-window.minimized {
height: 52px;
overflow: hidden;
}
.gnozis-mini-chat-window.minimized .mini-chat-body,
.gnozis-mini-chat-window.minimized .mini-chat-footer {
display: none;
}
@keyframes miniChatSlideUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.mini-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
}
.mini-chat-interlocutor-info {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.mini-chat-avatar-wrap {
position: relative;
width: 34px;
height: 34px;
flex-shrink: 0;
}
.mini-chat-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid var(--accent-cyan);
}
.mini-chat-status-dot {
position: absolute;
bottom: 0;
right: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
border: 1.5px solid #0d1424;
}
.mini-chat-details {
min-width: 0;
}
.mini-chat-name {
font-size: 0.85rem;
color: var(--gnozis-text-primary);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-chat-status-txt {
font-size: 0.68rem;
color: var(--gnozis-text-tertiary);
display: block;
}
.mini-chat-header-controls {
display: flex;
align-items: center;
gap: 4px;
}
.mini-chat-btn {
background: transparent;
border: none;
color: var(--gnozis-text-tertiary);
font-size: 0.85rem;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.mini-chat-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.mini-chat-body {
flex: 1;
padding: 14px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.mini-chat-msg-wrap {
display: flex;
flex-direction: column;
max-width: 82%;
}
.mini-chat-msg-wrap.incoming {
align-self: flex-start;
}
.mini-chat-msg-wrap.outgoing {
align-self: flex-end;
}
.mini-msg-bubble {
padding: 9px 13px;
border-radius: 14px;
font-size: 0.82rem;
line-height: 1.45;
position: relative;
}
.mini-chat-msg-wrap.incoming .mini-msg-bubble {
background: rgba(255, 255, 255, 0.07);
color: var(--gnozis-text-primary);
border: 1px solid rgba(255, 255, 255, 0.08);
border-bottom-left-radius: 4px;
}
.mini-chat-msg-wrap.outgoing .mini-msg-bubble {
background: linear-gradient(135deg, #1e3a5f 0%, #0284c7 100%);
color: #fff;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 15px rgba(2, 132, 199, 0.25);
}
.mini-msg-time {
display: block;
font-size: 0.65rem;
margin-top: 4px;
opacity: 0.7;
text-align: right;
}
.mini-chat-footer {
padding: 10px 14px;
background: rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mini-chat-input-row {
display: flex;
align-items: center;
gap: 8px;
}
.mini-chat-input {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
padding: 8px 14px;
color: var(--gnozis-text-primary);
font-size: 0.82rem;
outline: none;
transition: all 0.2s ease;
}
.mini-chat-input:focus {
border-color: var(--accent-cyan);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}
.btn-mini-chat-send {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #1e3a5f 0%, #0284c7 100%);
border: none;
color: #fff;
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.btn-mini-chat-send:hover {
transform: scale(1.08);
} .gnozis-fb-topbar {
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 56px;
background: rgba(11, 16, 27, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid #1e293b;
z-index: 99999 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
user-select: none;
}
.fb-topbar-inner {
width: 100%;
height: 56px;
padding: 0 16px;
display: grid;
grid-template-columns: 300px 1fr 300px;
align-items: center;
} .fb-topbar-left {
display: flex;
align-items: center;
gap: 10px;
}
.fb-brand-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
flex-shrink: 0;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.fb-brand-circle:hover {
transform: scale(1.08);
}
.fb-brand-logo-img {
width: 38px;
height: 38px;
display: block;
object-fit: contain;
filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
transition: filter 0.25s ease;
}
.fb-brand-circle:hover .fb-brand-logo-img {
filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 4px rgba(129, 140, 248, 0.8));
}
.fb-brand-symbol {
display: none;
} .fb-search-trigger-btn {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
height: 38px !important;
width: 230px !important;
padding: 0 12px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 20px !important;
color: #94a3b8 !important;
cursor: pointer !important;
font-family: inherit !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-align: left !important;
outline: none !important;
user-select: none !important;
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
-webkit-tap-highlight-color: transparent !important;
}
.fb-search-trigger-btn:hover {
background: rgba(255, 255, 255, 0.09) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
color: #f1f5f9 !important;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.2) !important;
}
.fb-search-trigger-btn .fb-search-ico {
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #38bdf8 !important;
flex-shrink: 0 !important;
}
.fb-search-trigger-btn .fb-search-placeholder-txt {
flex: 1 !important;
font-size: 0.86rem !important;
font-weight: 400 !important;
color: #94a3b8 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.fb-search-trigger-btn:hover .fb-search-placeholder-txt {
color: #e2e8f0 !important;
}
.fb-search-trigger-btn .fb-search-shortcut-badge {
font-size: 0.70rem !important;
font-weight: 600 !important;
color: #64748b !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
padding: 2px 6px !important;
border-radius: 6px !important;
letter-spacing: 0.5px !important;
flex-shrink: 0 !important;
}
@media (max-width: 900px) {
.fb-search-trigger-btn {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
padding: 0 !important;
border-radius: 50% !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
flex-shrink: 0 !important;
}
.fb-search-trigger-btn .fb-search-placeholder-txt,
.fb-search-trigger-btn .fb-search-shortcut-badge {
display: none !important;
}
.fb-search-trigger-btn:hover,
.fb-search-trigger-btn:active {
background: rgba(56, 189, 248, 0.18) !important;
border-color: rgba(56, 189, 248, 0.5) !important;
color: #38bdf8 !important;
transform: scale(1.05) !important;
}
} .fb-topbar-center {
display: flex;
justify-content: center;
align-items: center;
height: 56px;
gap: 4px;
}
.fb-nav-tab {
flex: 0 1 110px;
max-width: 110px;
min-width: 65px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: #64748b;
text-decoration: none;
border-radius: 8px 8px 0 0;
transition: background 0.15s ease, color 0.15s ease;
cursor: pointer;
}
.fb-nav-tab:hover {
background: rgba(255, 255, 255, 0.03);
color: #94a3b8;
}
.fb-tab-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding-bottom: 2px;
}
.fb-nav-tab svg {
transition: transform 0.15s ease, stroke 0.15s ease;
}
.fb-nav-tab.active {
color: #cbd5e1;
}
.fb-tab-indicator {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: transparent;
border-radius: 3px 3px 0 0;
transition: background 0.2s ease;
}
.fb-nav-tab.active .fb-tab-indicator {
background: #607890;
} .fb-nav-tab[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 6px);
background: #0f172a;
color: #cbd5e1;
font-size: 0.75rem;
font-weight: 500;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.15s ease, transform 0.15s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
border: 1px solid #1e293b;
z-index: 100000;
}
.fb-nav-tab:hover[data-tooltip]::after {
opacity: 1;
transform: translateY(0);
} .fb-topbar-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.fb-round-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: #111827;
border: 1px solid #1e293b;
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: all 0.15s ease;
outline: none;
flex-shrink: 0;
text-decoration: none;
}
.fb-round-btn:hover {
background: #1e293b;
color: #e2e8f0;
border-color: #334155;
}
.fb-round-btn:active {
transform: translateY(0);
}
.fb-notif-badge {
position: absolute;
top: -2px;
right: -2px;
background: #881337;
color: #fecdd3;
font-size: 0.65rem;
font-weight: 700;
min-width: 16px;
height: 16px;
line-height: 16px;
padding: 0 3px;
border-radius: 8px;
text-align: center;
border: 1.5px solid #0b101b;
}
.fb-notif-badge.is-empty,
.fb-notif-badge:empty,
.popover-unread-badge.is-empty,
.popover-unread-badge:empty,
.chat-bubble-badge.is-empty,
.chat-bubble-badge:empty,
.drawer-badge.is-empty,
.drawer-badge:empty {
display: none !important;
} .fb-profile-wrap {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.fb-avatar-btn {
width: 38px;
height: 38px;
border-radius: 50%;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
outline: none;
}
.fb-avatar-frame {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
background: #0f172a;
border: 1.5px solid #334155;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.fb-user-avatar-img {
width: 38px !important;
height: 38px !important;
max-width: 38px !important;
max-height: 38px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.fb-avatar-arrow-badge {
position: absolute;
bottom: -2px;
right: -2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #1e293b;
border: 1.5px solid #0b101b;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
transition: transform 0.2s ease, color 0.2s ease;
}
.fb-profile-wrap.open .fb-avatar-arrow-badge {
transform: rotate(180deg);
color: #cbd5e1;
} .fb-profile-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 280px;
background: #0f172a;
border: 1px solid #1e293b;
border-radius: 12px;
padding: 8px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
z-index: 100001;
display: none;
animation: fbMenuAnim 0.14s ease forwards;
}
.fb-profile-dropdown-menu.active {
display: block;
}
@keyframes fbMenuAnim {
from {
opacity: 0;
transform: translateY(-4px) scale(0.99);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.fb-dropdown-user-card {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
background: #111827;
border: 1px solid #1e293b;
}
.fb-dropdown-avatar-wrap {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1.5px solid #334155;
}
.fb-dropdown-avatar-img {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
}
.fb-dropdown-user-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.fb-dropdown-name {
color: #e2e8f0;
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.fb-dropdown-status {
color: #64748b;
font-size: 0.74rem;
margin-top: 1px;
}
.fb-dropdown-divider {
height: 1px;
background: #1e293b;
margin: 6px 0;
}
.fb-dropdown-actions {
display: flex;
flex-direction: column;
gap: 2px;
}
.fb-dropdown-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
color: #94a3b8;
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
width: 100%;
}
.fb-dropdown-link:hover {
background: #1e293b;
color: #e2e8f0;
}
.fb-dropdown-icon {
font-size: 1rem;
flex-shrink: 0;
}
.fb-link-danger {
color: #f87171;
}
.fb-link-danger:hover {
background: rgba(239, 68, 68, 0.12);
color: #fca5a5;
} .fb-lang-topbar-wrap {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.topbar-lang-code {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.05em;
color: #38bdf8;
text-transform: uppercase;
font-family: inherit;
line-height: 1;
user-select: none;
}
.btn-trigger-lang-popover:hover .topbar-lang-code {
color: #7dd3fc;
text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}
.gnozis-lang-topbar-popover {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 190px;
background: rgba(15, 23, 42, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: 12px;
padding: 8px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.08);
z-index: 100002;
display: none;
animation: fbMenuAnim 0.14s ease forwards;
}
.gnozis-lang-topbar-popover.active {
display: block;
}
.lang-popover-header {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
padding: 4px 8px 6px 8px;
border-bottom: 1px solid #1e293b;
margin-bottom: 4px;
}
.lang-popover-items {
display: flex;
flex-direction: column;
gap: 2px;
}
.lang-popover-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 8px;
text-decoration: none;
color: #94a3b8;
font-size: 0.84rem;
font-weight: 500;
transition: all 0.15s ease;
}
.lang-popover-item:hover {
background: rgba(30, 41, 59, 0.8);
color: #f1f5f9;
}
.lang-popover-item.is-active {
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
font-weight: 600;
}
.lang-popover-code {
font-size: 0.68rem;
font-weight: 800;
padding: 2px 5px;
border-radius: 4px;
background: #1e293b;
color: #cbd5e1;
min-width: 24px;
text-align: center;
}
.lang-popover-item.is-active .lang-popover-code {
background: rgba(56, 189, 248, 0.25);
color: #38bdf8;
}
.lang-popover-name {
flex: 1;
}
.lang-popover-check {
font-size: 0.8rem;
font-weight: bold;
color: #38bdf8;
} .fb-dropdown-lang-section {
padding: 8px 10px;
}
.fb-dropdown-lang-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
margin-bottom: 8px;
}
.fb-dropdown-lang-chips {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.fb-lang-chip {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 0;
border-radius: 6px;
background: #111827;
border: 1px solid #1e293b;
color: #94a3b8;
font-size: 0.74rem;
font-weight: 700;
text-decoration: none;
transition: all 0.15s ease;
user-select: none;
}
.fb-lang-chip:hover {
background: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
.fb-lang-chip.is-active {
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
} @media (max-width: 992px) {
.fb-topbar-inner {
grid-template-columns: 240px 1fr 240px;
}
.fb-search-box {
width: 170px;
}
.fb-search-input:focus {
width: 190px;
}
.fb-nav-tab {
flex: 0 1 80px;
min-width: 50px;
}
}
@media (max-width: 768px) { .gnozis-fb-topbar {
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 54px !important;
background: rgba(11, 16, 27, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid #1e293b !important;
z-index: 99999 !important;
}
.fb-topbar-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 54px !important;
padding: 0 12px !important;
}
.fb-topbar-left {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.fb-topbar-right {
display: flex !important;
align-items: center !important;
gap: 6px !important;
} .fb-topbar-center {
display: none !important;
} .gnozis-mobile-bottom-nav {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 58px !important;
height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
background: rgba(11, 16, 27, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
border-bottom: none !important;
display: flex !important;
justify-content: space-around !important;
align-items: center !important;
padding: 0 4px !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
z-index: 99998 !important;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
user-select: none !important;
}
.mobile-bottom-tab {
flex: 1 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
color: #64748b !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
padding: 4px 0 !important;
}
.mobile-bottom-tab.active {
color: #cbd5e1 !important;
}
.mobile-bottom-tab:hover {
color: #94a3b8 !important;
}
.mobile-tab-icon-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.mobile-tab-icon-wrap svg {
width: 22px !important;
height: 22px !important;
stroke: currentColor !important;
}
.mobile-bottom-tab.active .mobile-tab-icon-wrap svg {
stroke: #cbd5e1 !important;
filter: drop-shadow(0 0 4px rgba(203, 213, 225, 0.25)) !important;
}
.mobile-tab-label {
font-size: 0.68rem !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
.mobile-bottom-tab.active .mobile-tab-label {
font-weight: 600 !important;
color: #cbd5e1 !important;
} .gnozis-page-shell {
padding-top: 10px !important;
padding-bottom: 75px !important;
padding-left: 10px !important;
padding-right: 10px !important;
} .gnozis-chat-heads-dock {
bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
right: 14px !important;
}
.gnozis-mini-chat-window {
bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
right: 14px !important;
}
.gnozis-floating-audio-fab {
bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important;
right: 14px !important;
}
} .composer-destination-select-wrap {
margin-left: 8px;
}
.composer-destination-select {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 5px 12px;
color: var(--gnozis-text-secondary);
font-size: 0.78rem;
outline: none;
cursor: pointer;
transition: all 0.2s ease;
}
.composer-destination-select:hover,
.composer-destination-select:focus {
border-color: var(--accent-cyan);
color: var(--gnozis-text-primary);
background: rgba(56, 189, 248, 0.08);
}
.composer-destination-select option,
.composer-destination-select optgroup {
background: #0d1424;
color: #e2e8f0;
}
.wall-target-arrow {
color: var(--accent-cyan);
font-size: 0.75rem;
margin: 0 4px;
}
.wall-target-link {
text-decoration: none;
}
.wall-target-name {
color: var(--accent-cyan);
font-size: 0.95rem;
}
.group-target-pill {
margin-left: 6px;
font-size: 0.75rem;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.28);
padding: 2px 8px;
border-radius: 12px;
}
.group-target-pill a {
color: #7dd3fc;
text-decoration: none;
}
.wall-dest-badge {
font-size: 0.78rem;
color: var(--accent-cyan);
background: rgba(56, 189, 248, 0.08);
padding: 4px 10px;
border-radius: 12px;
border: 1px solid rgba(56, 189, 248, 0.2);
} .gnozis-cart-drawer {
position: fixed;
inset: 0;
z-index: 1000005 !important;
visibility: hidden;
pointer-events: none;
transition: visibility 0.3s ease;
}
.gnozis-cart-drawer.open {
visibility: visible;
pointer-events: auto;
}
.gnozis-drawer-overlay {
position: absolute;
inset: 0;
background: rgba(5, 9, 16, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.3s ease;
}
.gnozis-cart-drawer.open .gnozis-drawer-overlay {
opacity: 1;
}
.gnozis-cart-drawer-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 92vw;
background: #0b121e;
border-left: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: -15px 0 50px rgba(0, 0, 0, 0.65);
z-index: 2;
}
.gnozis-cart-drawer.open .gnozis-cart-drawer-inner {
transform: translateX(0);
}
.gnozis-drawer-header {
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
}
.drawer-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.drawer-sigil {
font-size: 1.25rem;
}
.drawer-title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #f1f5f9;
letter-spacing: -0.01em;
}
.drawer-badge {
background: #1e293b;
color: #94a3b8;
font-size: 0.75rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gnozis-drawer-close {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85rem;
}
.gnozis-drawer-close:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
transform: scale(1.05);
}
.gnozis-drawer-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.gnozis-drawer-body::-webkit-scrollbar {
width: 5px;
}
.gnozis-drawer-body::-webkit-scrollbar-track {
background: transparent;
}
.gnozis-drawer-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 4px;
}
.gnozis-drawer-items-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.gnozis-drawer-item {
display: flex;
align-items: center;
gap: 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 10px 12px;
transition: all 0.25s ease;
position: relative;
}
.gnozis-drawer-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
}
.gnozis-drawer-item.removing {
opacity: 0;
transform: translateX(30px);
transition: all 0.3s ease;
}
.item-thumb {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: #141e2e;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.item-thumb img,
.item-thumb svg {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
display: block;
}
.item-info {
flex: 1;
min-width: 0;
}
.item-title {
margin: 0 0 4px 0;
font-size: 0.88rem;
font-weight: 600;
color: #e2e8f0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item-meta-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
}
.item-price {
color: #38bdf8;
font-weight: 700;
}
.item-qty {
color: #64748b;
font-size: 0.76rem;
}
.btn-drawer-remove-item {
background: transparent;
border: none;
color: #64748b;
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
padding: 0;
}
.btn-drawer-remove-item:hover {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
transform: scale(1.08);
}
.btn-drawer-remove-item:active {
transform: scale(0.95);
}
.gnozis-drawer-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 20px;
gap: 10px;
color: #64748b;
}
.gnozis-drawer-empty .empty-sigil {
font-size: 2.8rem;
margin-bottom: 6px;
opacity: 0.6;
}
.gnozis-drawer-empty h5 {
margin: 0;
font-size: 1.1rem;
color: #94a3b8;
font-weight: 600;
}
.gnozis-drawer-empty p {
margin: 0;
font-size: 0.82rem;
line-height: 1.4;
max-width: 260px;
}
.gnozis-drawer-footer {
padding: 18px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(10, 16, 26, 0.95);
display: flex;
flex-direction: column;
gap: 14px;
}
.drawer-total-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.95rem;
color: #94a3b8;
}
.drawer-total-val {
font-size: 1.25rem;
font-weight: 700;
color: #f8fafc;
}
.drawer-checkout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 18px;
border-radius: 10px;
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #ffffff !important;
font-weight: 600;
font-size: 0.92rem;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.drawer-checkout-btn:hover {
background: linear-gradient(135deg, #334155 0%, #475569 100%);
border-color: rgba(255, 255, 255, 0.25);
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}  .single-group-viewport {
display: flex;
flex-direction: column;
gap: 24px;
}
.group-hero-card {
padding: 0 !important;
overflow: hidden;
position: relative;
border-radius: var(--gnozis-radius-lg, 16px);
background: linear-gradient(180deg, #0d1522 0%, #080d16 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.group-hero-banner {
height: 140px;
width: 100%;
position: relative;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0c1a2e 100%);
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.group-hero-banner.banner-slate {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #162638 100%);
}
.banner-nebula-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 30%, rgba(56, 189, 248, 0.2) 0%, transparent 65%);
pointer-events: none;
}
.group-hero-content {
padding: 0 28px 26px;
position: relative;
z-index: 2;
}
.group-header-top-row {
display: flex;
align-items: flex-start;
gap: 24px;
margin-top: -45px;
} .group-avatar-wrap {
position: relative;
width: 92px;
height: 92px;
border-radius: 18px;
background: #0f172a;
border: 2px solid rgba(56, 189, 248, 0.35);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.group-avatar-wrap .avatar-aura-ring {
display: none !important;
}
.group-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
display: block;
}
.btn-group-avatar-upload-trigger {
position: absolute;
bottom: -4px;
right: -4px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #0f172a;
border: 1.5px solid rgba(56, 189, 248, 0.4);
color: #38bdf8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
transition: all 0.2s ease;
padding: 0;
z-index: 3;
}
.btn-group-avatar-upload-trigger:hover {
background: #1e293b;
color: #ffffff;
border-color: #38bdf8;
transform: scale(1.1);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
} .group-header-main-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 14px;
}
.group-meta-badges {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.group-badge-cat,
.group-badge-privacy,
.group-badge-paused {
font-size: 0.74rem;
font-weight: 600;
padding: 4px 11px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.25);
color: #7dd3fc;
}
.group-badge-privacy {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
color: #cbd5e1;
}
.group-badge-paused {
background: rgba(245, 158, 11, 0.15);
border-color: rgba(245, 158, 11, 0.4);
color: #fbbf24;
}
.group-hero-title {
font-size: 1.65rem;
font-weight: 800;
color: #f8fafc;
margin: 4px 0 2px;
line-height: 1.25;
letter-spacing: -0.01em;
}
.group-hero-desc {
font-size: 0.9rem;
color: #94a3b8;
line-height: 1.55;
margin: 0 0 8px 0;
max-width: 780px;
} .group-details-bar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin-top: 6px;
}
.group-admin-box {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 5px 12px 5px 6px;
border-radius: 9999px;
}
.group-admin-avatar {
width: 32px !important;
height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
flex-shrink: 0 !important;
display: block !important;
}
.group-admin-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.group-admin-text .admin-label {
font-size: 0.65rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.group-admin-text .admin-name {
font-size: 0.82rem;
color: #e2e8f0;
font-weight: 600;
} .group-members-facepile-wrap {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 5px 14px 5px 8px;
border-radius: 9999px;
}
.group-facepile-list {
display: inline-flex;
align-items: center;
}
.facepile-avatar {
width: 26px !important;
height: 26px !important;
max-width: 26px !important;
max-height: 26px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 2px solid #0d1522 !important;
margin-left: -7px;
background: #1e293b;
transition: transform 0.2s ease, z-index 0.2s ease;
position: relative;
display: block !important;
}
.facepile-avatar:first-child {
margin-left: 0;
}
.facepile-avatar:hover {
transform: translateY(-2px) scale(1.15);
z-index: 5;
}
.group-members-count-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.82rem;
color: #94a3b8;
font-weight: 500;
}
.group-members-count-badge .members-num {
color: #38bdf8;
font-weight: 700;
} .group-hero-actions-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
margin-top: 50px;
flex-shrink: 0;
}
.group-primary-action-wrap {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
width: 100%;
}
.group-hero-actions-col .btn-toggle-group-join {
padding: 9px 20px;
font-size: 0.88rem;
font-weight: 600;
white-space: nowrap;
border-radius: 10px;
transition: all 0.2s ease;
}
.group-hero-actions-col .btn-toggle-group-join.is-joined {
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.4);
color: #34d399;
}
.group-primary-action-wrap .btn-admin-edit-group {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
font-size: 0.88rem;
font-weight: 600;
border-radius: 10px;
white-space: nowrap;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.4);
color: #38bdf8;
cursor: pointer;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.group-primary-action-wrap .btn-admin-edit-group:hover {
background: rgba(56, 189, 248, 0.25);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}
.group-admin-controls-box {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
background: rgba(15, 23, 42, 0.92);
border: 1px solid rgba(56, 189, 248, 0.22);
border-radius: 14px;
padding: 10px 12px;
backdrop-filter: blur(14px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
width: 100%;
min-width: 270px;
box-sizing: border-box;
}
.admin-controls-title {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #94a3b8;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
.admin-controls-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
width: 100%;
}
.btn-mod-control,
.btn-admin-action-pill {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 7px 10px !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 8px !important;
color: #cbd5e1 !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
white-space: nowrap !important;
cursor: pointer !important;
text-decoration: none !important;
line-height: 1 !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
width: 100% !important;
min-height: 34px !important;
box-sizing: border-box !important;
}
.btn-mod-control svg,
.btn-admin-action-pill svg {
flex-shrink: 0 !important;
}
.btn-mod-control:hover,
.btn-admin-action-pill:hover {
background: rgba(56, 189, 248, 0.16) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
color: #38bdf8 !important;
transform: translateY(-1px);
}
.btn-mod-control.is-paused,
.btn-admin-action-pill.is-paused,
.btn-admin-action-pill.btn-admin-toggle-pause-group.is-paused {
background: rgba(245, 158, 11, 0.15) !important;
border-color: rgba(245, 158, 11, 0.4) !important;
color: #fbbf24 !important;
}
.btn-mod-control.item-danger,
.btn-admin-action-pill.item-danger {
color: #f87171 !important;
border-color: rgba(248, 113, 113, 0.25) !important;
background: rgba(248, 113, 113, 0.08) !important;
}
.btn-mod-control.item-danger:hover,
.btn-admin-action-pill.item-danger:hover {
background: rgba(248, 113, 113, 0.25) !important;
border-color: #f87171 !important;
color: #ffffff !important;
transform: translateY(-1px);
} .group-feed-section {
display: flex;
flex-direction: column;
gap: 16px;
}
.group-feed-header-row h3 {
font-size: 1.15rem;
font-weight: 600;
color: #f1f5f9;
margin: 0;
}
.group-composer-box {
margin-bottom: 22px !important;
} .groups-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 20px;
margin-top: 10px;
}
.group-card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 14px;
background: #0d1522;
border: 1px solid rgba(255, 255, 255, 0.07);
padding: 0 !important;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.group-card:hover {
transform: translateY(-3px);
border-color: rgba(56, 189, 248, 0.3);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}
.group-card-banner {
height: 72px;
width: 100%;
position: relative;
background: linear-gradient(135deg, #1e293b, #0f172a);
}
.group-card-banner.banner-cyan {
background: linear-gradient(135deg, #0e3d54, #0b1e2c);
}
.group-card-banner.banner-amber {
background: linear-gradient(135deg, #422d0d, #1a150c);
}
.group-card-banner.banner-indigo {
background: linear-gradient(135deg, #2b1f54, #120e24);
}
.group-card-avatar-wrap {
position: absolute;
bottom: -18px;
left: 16px;
width: 48px;
height: 48px;
border-radius: 12px;
background: #0a101b;
border: 2px solid #0d1522;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.group-card-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.group-card-body {
padding: 24px 16px 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.group-meta-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.group-badge-pill {
font-size: 0.7rem;
font-weight: 600;
color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
padding: 2px 7px;
border-radius: 6px;
}
.group-status-open {
font-size: 0.7rem;
color: #10b981;
font-weight: 500;
}
.group-status-closed {
font-size: 0.7rem;
color: #f59e0b;
font-weight: 500;
}
.group-title {
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 6px 0;
line-height: 1.3;
}
.group-title a {
color: #f1f5f9;
text-decoration: none;
transition: color 0.2s ease;
}
.group-title a:hover {
color: #38bdf8;
}
.group-desc {
font-size: 0.82rem;
color: #94a3b8;
line-height: 1.45;
flex: 1;
margin: 0 0 14px 0;
}
.group-card-middle-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 12px;
}
.group-card-facepile {
display: flex;
align-items: center;
gap: 8px;
}
.group-card-members-count {
font-size: 0.76rem;
color: #94a3b8;
font-weight: 600;
}
.group-magister {
font-size: 0.74rem;
color: #64748b;
}
.group-magister strong {
color: #cbd5e1;
font-weight: 600;
}
.group-footer-row {
display: flex;
align-items: center;
gap: 8px;
}
.btn-sm-view {
flex: 1;
text-align: center;
padding: 7px 12px;
font-size: 0.8rem;
border-radius: 8px;
text-decoration: none;
}
.btn-sm-join {
flex: 1;
padding: 7px 12px;
font-size: 0.8rem;
border-radius: 8px;
} .create-group-modal-dialog {
max-width: 490px;
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #0c1420;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(56, 189, 248, 0.12);
margin: auto;
}
.create-group-modal-dialog .form-label-title {
font-size: 0.82rem;
font-weight: 600;
color: #cbd5e1;
margin-bottom: 5px;
display: block;
}
.create-group-modal-dialog .gnozis-input-modal {
width: 100%;
background: #080e18;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 10px 14px;
color: #f1f5f9;
font-size: 0.88rem;
font-family: inherit;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.create-group-modal-dialog .gnozis-input-modal:focus {
border-color: rgba(56, 189, 248, 0.6);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}
.create-group-modal-dialog .gnozis-textarea-modal {
width: 100%;
background: #080e18;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 10px 14px;
color: #f1f5f9;
font-size: 0.88rem;
font-family: inherit;
line-height: 1.45;
outline: none;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.create-group-modal-dialog .gnozis-textarea-modal:focus {
border-color: rgba(56, 189, 248, 0.6);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}
.create-group-modal-dialog .gnozis-select-wrap {
position: relative;
width: 100%;
}
.create-group-modal-dialog .gnozis-select-modal {
width: 100%;
background: #080e18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 14px center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 10px 38px 10px 14px;
color: #f1f5f9;
font-size: 0.88rem;
font-family: inherit;
outline: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.create-group-modal-dialog .gnozis-select-modal option {
background: #0f172a;
color: #f1f5f9;
padding: 8px;
}
.create-group-modal-dialog .gnozis-select-modal:focus {
border-color: rgba(56, 189, 248, 0.6);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
} .group-privacy-selector-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 4px;
}
.privacy-option-card {
display: flex;
position: relative;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.privacy-radio-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.privacy-card-content {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.privacy-card-header {
display: flex;
align-items: center;
gap: 6px;
}
.privacy-icon {
font-size: 1.1rem;
line-height: 1;
}
.privacy-title {
font-size: 0.86rem;
font-weight: 700;
color: #cbd5e1;
transition: color 0.2s ease;
}
.privacy-desc {
font-size: 0.72rem;
color: #94a3b8;
line-height: 1.35;
margin: 0;
}
.privacy-option-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(56, 189, 248, 0.3);
}
.privacy-option-card.active {
background: rgba(56, 189, 248, 0.08);
border-color: #38bdf8;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.2);
}
.privacy-option-card.active .privacy-title {
color: #38bdf8;
} .modal-group-avatar-upload {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.group-create-avatar-thumb {
width: 40px;
height: 40px;
border-radius: 10px;
overflow: hidden;
border: 2px solid #38bdf8;
flex-shrink: 0;
background: #080e18;
}
.group-create-avatar-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.group-file-upload-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: #cbd5e1;
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.group-file-upload-btn:hover {
background: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.4);
color: #38bdf8;
}
.group-avatar-filename-preview {
font-size: 0.78rem;
color: #94a3b8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 170px;
} @media (max-width: 768px) {
.gnozis-modal {
padding: 14px 10px calc(80px + env(safe-area-inset-bottom, 0px)) 10px !important;
align-items: flex-start !important;
}
.gnozis-modal-dialog,
.create-group-modal-dialog {
width: 100% !important;
max-width: 100% !important;
max-height: calc(100dvh - 100px) !important;
max-height: calc(100vh - 100px) !important;
padding: 20px 16px 28px 16px !important;
margin: 10px auto !important;
border-radius: 16px !important;
}
.create-group-modal-dialog .modal-actions,
.gnozis-modal-dialog .modal-actions {
margin-top: 22px !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
}
.create-group-modal-dialog .modal-actions button,
.gnozis-modal-dialog .modal-actions button {
min-height: 48px !important;
font-size: 0.95rem !important;
}
.group-privacy-selector-grid {
grid-template-columns: 1fr;
}
.group-header-top-row {
flex-direction: column;
align-items: center;
text-align: center;
}
.group-header-main-info {
margin-top: 8px;
align-items: center;
}
.group-details-bar {
justify-content: center;
}
.group-hero-actions-col {
margin-top: 18px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.group-hero-actions-col .btn-toggle-group-join {
width: 100%;
max-width: 100%;
text-align: center;
}
.group-admin-controls-box {
width: 100%;
align-items: stretch;
padding: 10px 12px;
box-sizing: border-box;
}
.admin-controls-title {
justify-content: center;
margin-bottom: 2px;
}
.admin-controls-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
width: 100%;
}
.btn-admin-action-pill {
width: 100%;
padding: 9px 8px;
font-size: 0.78rem;
min-height: 38px;
border-radius: 9px;
justify-content: center;
text-align: center;
box-sizing: border-box;
}
} .gnozis-subpage-viewport,
.gnozis-profile-viewport {
max-width: 1280px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
gap: 22px;
}
.gnozis-subpage-2col-layout,
.profile-2col-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 350px;
gap: 24px;
align-items: start;
width: 100%;
}
.subpage-main-col,
.profile-main-col {
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.subpage-side-col,
.profile-side-col {
width: 350px;
flex-shrink: 0;
}
.subpage-sticky-sidebar,
.profile-sticky-sidebar {
position: sticky;
top: 86px;
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-width: 1100px) {
.gnozis-subpage-2col-layout,
.profile-2col-layout {
grid-template-columns: 1fr;
}
.subpage-side-col,
.profile-side-col {
width: 100%;
}
.subpage-sticky-sidebar,
.profile-sticky-sidebar {
position: static;
}
} .profile-meta-info-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.profile-meta-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 4px 10px;
border-radius: 8px;
font-size: 0.82rem;
color: #94a3b8;
}
.profile-meta-chip .meta-icon {
font-size: 0.9rem;
}
.profile-meta-link {
color: #38bdf8;
text-decoration: none;
transition: color 0.2s ease;
}
.profile-meta-link:hover {
color: #7dd3fc;
text-decoration: underline;
}
.profile-bio-box {
margin-top: 10px;
max-width: 680px;
}
.profile-bio-text {
font-size: 0.92rem;
line-height: 1.55;
color: #cbd5e1;
margin: 0;
}
.profile-interests-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.profile-interests-label {
font-size: 0.78rem;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.profile-interests-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.profile-interest-tag {
display: inline-block;
padding: 3px 9px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: 6px;
color: #38bdf8;
font-size: 0.76rem;
font-weight: 500;
}
.btn-avatar-camera-overlay {
position: absolute;
bottom: 4px;
right: 4px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #0284c7;
border: 2px solid #080e18;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
transition: transform 0.2s ease, background 0.2s ease;
z-index: 5;
}
.btn-avatar-camera-overlay:hover {
transform: scale(1.1);
background: #38bdf8;
} .edit-profile-modal-dialog {
max-width: 580px;
width: 90%;
background: #0b1326;
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(56, 189, 248, 0.15);
overflow: hidden;
}
.avatar-edit-preview-box {
display: flex;
align-items: center;
gap: 16px;
padding: 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
}
.avatar-edit-thumb {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
border: 2px solid #38bdf8;
flex-shrink: 0;
}
.avatar-edit-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-edit-controls {
display: flex;
flex-direction: column;
gap: 4px;
}
.btn-upload-avatar-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.3);
border-radius: 8px;
color: #38bdf8;
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
width: fit-content;
}
.btn-upload-avatar-trigger:hover {
background: rgba(56, 189, 248, 0.2);
border-color: #38bdf8;
}
.form-input-tip {
font-size: 0.72rem;
color: #64748b;
}
.form-grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 580px) {
.form-grid-2col {
grid-template-columns: 1fr;
}
} .members-search-toolbar {
background: rgba(16, 24, 38, 0.75) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 14px !important;
padding: 12px 18px !important;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
margin-bottom: 22px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.members-search-toolbar:focus-within {
border-color: rgba(56, 189, 248, 0.4) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.12);
}
.members-search-icon {
font-size: 1.15rem;
color: #38bdf8;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#members-live-search-input,
.members-search-input {
flex: 1;
background: rgba(11, 16, 28, 0.8) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 10px !important;
color: #f8fafc !important;
font-size: 0.92rem !important;
padding: 10px 16px !important;
outline: none !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
font-family: inherit !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#members-live-search-input::placeholder,
.members-search-input::placeholder {
color: #64748b !important;
font-size: 0.88rem !important;
}
#members-live-search-input:focus,
.members-search-input:focus {
background: rgba(15, 23, 42, 0.95) !important;
border-color: #38bdf8 !important;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), 0 0 16px rgba(56, 189, 248, 0.15) !important;
color: #ffffff !important;
}
.search-results-counter {
font-size: 0.82rem;
font-weight: 500;
color: #94a3b8;
background: rgba(255, 255, 255, 0.05);
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
border: 1px solid rgba(255, 255, 255, 0.08);
} .members-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.member-card {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.member-card:hover {
transform: translateY(-2px);
border-color: rgba(56, 189, 248, 0.35);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.1);
}
.member-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.member-avatar-wrap {
width: 54px;
height: 54px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.member-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.member-card-titles {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.member-name-link {
text-decoration: none;
color: #f8fafc;
}
.member-name {
font-size: 1rem;
font-weight: 600;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s ease;
}
.member-name-link:hover .member-name {
color: #38bdf8;
}
.member-role-tag {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #38bdf8;
text-transform: uppercase;
}
.member-card-body {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
font-size: 0.84rem;
color: #94a3b8;
}
.member-meta-item {
display: flex;
align-items: center;
gap: 6px;
}
.member-meta-item .meta-icon {
font-size: 0.88rem;
flex-shrink: 0;
}
.member-meta-item .meta-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-bio {
font-size: 0.82rem;
line-height: 1.45;
color: #cbd5e1;
margin: 0;
}
.member-card-actions {
display: flex;
align-items: center;
gap: 8px;
}
.member-card-actions .btn-sm {
flex: 1;
text-align: center;
justify-content: center;
padding: 7px 12px;
font-size: 0.82rem;
}  @media (max-width: 992px) {
*, *::before, *::after {
-webkit-tap-highlight-color: transparent;
}
button, a, input, select, textarea {
touch-action: manipulation;
} input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
font-size: 16px !important;
} .gnozis-page-shell {
padding: 14px 10px calc(80px + env(safe-area-inset-bottom, 0px)) 10px;
max-width: 100%;
overflow-x: hidden;
} .gnozis-layout-3col,
.gnozis-stream-layout,
.stream-grid-layout,
.gnozis-columns-3 {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
width: 100% !important;
max-width: 100% !important;
} .gnozis-layout-3col .gnozis-col-left,
.gnozis-col-left,
.stream-sidebar-left {
display: none !important;
}
.gnozis-layout-3col .gnozis-col-center,
.gnozis-col-center,
.stream-feed-center {
width: 100% !important;
max-width: 100% !important;
order: 1 !important;
}
.gnozis-layout-3col .gnozis-col-right,
.gnozis-col-right,
.stream-sidebar-right {
width: 100% !important;
max-width: 100% !important;
order: 2 !important;
position: static !important;
margin-top: 14px !important;
} .products-grid,
.woocommerce ul.products,
.gnozis-shop-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
}
} @media (max-width: 768px) { .gnozis-layout-3col .gnozis-col-right,
.gnozis-col-right,
.stream-sidebar-right {
display: none !important;
} .gnozis-fb-topbar {
position: sticky !important;
top: 0 !important;
height: 54px !important;
}
.fb-topbar-inner {
padding: 0 10px !important;
justify-content: space-between !important;
}
.fb-topbar-left {
gap: 8px !important;
}
.fb-brand-circle {
width: 38px !important;
height: 38px !important;
font-size: 1.15rem !important;
} .fb-topbar-center {
display: none !important;
} .fb-topbar-right {
gap: 6px !important;
}
.fb-round-btn {
width: 36px !important;
height: 36px !important;
}
.fb-round-btn svg {
width: 18px !important;
height: 18px !important;
}
.fb-avatar-btn {
width: 36px !important;
height: 36px !important;
}
.fb-avatar-frame {
width: 36px !important;
height: 36px !important;
}
.fb-avatar-arrow-badge {
display: none !important;
}
.fb-profile-dropdown-menu {
right: 4px !important;
width: calc(100vw - 20px) !important;
max-width: 320px !important;
border-radius: 16px !important;
}
.gnozis-lang-topbar-popover {
right: 0 !important;
width: 190px !important;
max-width: calc(100vw - 24px) !important;
} .gnozis-composer-card {
padding: 12px 14px !important;
border-radius: 16px !important;
margin-bottom: 14px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.composer-top {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
}
.composer-avatar-wrap {
width: 38px !important;
height: 38px !important;
flex-shrink: 0 !important;
}
.composer-textarea {
font-size: 16px !important;
min-height: 48px !important;
padding: 8px 12px !important;
border-radius: 12px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.composer-bottom {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin-top: 10px !important;
}
.composer-tools {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
width: 100% !important;
padding-bottom: 3px !important;
}
.composer-tools::-webkit-scrollbar {
display: none !important;
}
.composer-tool-btn {
padding: 6px 10px !important;
font-size: 0.78rem !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.composer-destination-select-wrap {
flex: 1 !important;
min-width: 120px !important;
}
.composer-destination-select {
width: 100% !important;
font-size: 0.78rem !important;
padding: 6px 8px !important;
border-radius: 8px !important;
}
.btn-publish-post,
.btn-publish-wall-post {
width: 100% !important;
padding: 10px !important;
font-size: 0.88rem !important;
justify-content: center !important;
border-radius: 10px !important;
} .gnozis-feed-filter-tabs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: 8px !important;
padding: 4px 2px 10px 2px !important;
scrollbar-width: none !important;
margin-bottom: 12px !important;
width: 100% !important;
}
.gnozis-feed-filter-tabs::-webkit-scrollbar {
display: none !important;
}
.feed-tab-btn {
flex-shrink: 0 !important;
padding: 8px 14px !important;
border-radius: 20px !important;
font-size: 0.82rem !important;
white-space: nowrap !important;
} .gnozis-feed-stream {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
gap: 12px !important;
}
.gnozis-post-card {
padding: 12px 14px !important;
border-radius: 16px !important;
margin-bottom: 12px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.post-card-header {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
margin-bottom: 10px !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.post-author-box {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 0 !important;
flex: 1 !important;
overflow: hidden !important;
}
.author-avatar-wrap {
width: 38px !important;
height: 38px !important;
flex-shrink: 0 !important;
}
.author-meta {
min-width: 0 !important;
flex: 1 !important;
overflow: hidden !important;
}
.author-name-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 4px 6px !important;
min-width: 0 !important;
width: 100% !important;
}
.author-name {
font-size: 0.92rem !important;
margin: 0 !important;
font-weight: 600 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 130px !important;
}
.group-target-pill {
font-size: 0.72rem !important;
max-width: 120px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: inline-block !important;
vertical-align: middle !important;
}
.group-target-pill a {
display: inline-block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100% !important;
}
.wall-target-name {
max-width: 100px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: inline-block !important;
}
.rank-badge {
font-size: 0.60rem !important;
padding: 2px 5px !important;
border-radius: 5px !important;
flex-shrink: 0 !important;
}
.post-time {
font-size: 0.72rem !important;
color: #94a3b8 !important;
display: block !important;
margin-top: 1px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.post-header-actions {
flex-shrink: 0 !important;
}
.post-bookmark-btn {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.post-content {
margin-bottom: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.post-text-body {
font-size: 0.90rem !important;
line-height: 1.55 !important;
color: #e2e8f0 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.post-media-frame {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 240px !important;
box-sizing: border-box !important;
margin-top: 10px !important;
}
.post-media-img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
} .gnozis-poll-widget {
margin-top: 10px !important;
gap: 6px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.poll-option-row {
padding: 8px 10px !important;
border-radius: 8px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.poll-content-inner {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 6px !important;
font-size: 0.78rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
.poll-content-inner .poll-text {
flex: 1 !important;
min-width: 0 !important;
word-break: break-word !important;
}
.poll-content-inner .poll-stat {
flex-shrink: 0 !important;
font-size: 0.72rem !important;
} .post-card-footer {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding-top: 8px !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
width: 100% !important;
box-sizing: border-box !important;
}
.post-reactions-bar {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.reaction-pill-btn {
width: 100% !important;
padding: 5px 2px !important;
font-size: 0.76rem !important;
border-radius: 10px !important;
min-height: 30px !important;
gap: 3px !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.reaction-emoji {
font-size: 0.85rem !important;
}
.reaction-count {
font-size: 0.72rem !important;
}
.post-stats-bar {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
padding-top: 6px !important;
border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
box-sizing: border-box !important;
}
.post-stats-link {
font-size: 0.76rem !important;
gap: 4px !important;
} .products-grid,
.woocommerce ul.products,
.gnozis-shop-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.product-card,
.woocommerce ul.products li.product {
padding: 10px !important;
border-radius: 12px !important;
}
.product-card-thumb,
.woocommerce ul.products li.product img {
border-radius: 8px !important;
aspect-ratio: 1/1 !important;
object-fit: cover !important;
}
.product-card-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 0.85rem !important;
line-height: 1.3 !important;
margin-top: 6px !important;
}
.product-card-price,
.woocommerce ul.products li.product .price {
font-size: 0.92rem !important;
margin: 4px 0 8px 0 !important;
}
.product-card-actions .btn-buy-now,
.product-card-actions .button,
.woocommerce ul.products li.product .button {
padding: 8px 6px !important;
font-size: 0.78rem !important;
border-radius: 8px !important;
width: 100% !important;
text-align: center !important;
justify-content: center !important;
} .members-grid-container {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.member-card {
padding: 14px !important;
border-radius: 14px !important;
}
.member-avatar-wrap {
width: 48px !important;
height: 48px !important;
} .groups-cards-grid,
.groups-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.group-card {
padding: 14px !important;
border-radius: 14px !important;
} .profile-header-card {
border-radius: 16px !important;
overflow: hidden !important;
margin-bottom: 16px !important;
}
.profile-cover-wrap {
height: 130px !important;
}
.profile-header-content {
padding: 0 14px 16px 14px !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.profile-main-avatar-wrap {
width: 76px !important;
height: 76px !important;
margin-top: -38px !important;
border-width: 3px !important;
margin-bottom: 8px !important;
}
.profile-header-titles {
align-items: center !important;
}
.profile-display-name {
font-size: 1.25rem !important;
}
.profile-meta-chips-wrap {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.profile-stats-bar {
justify-content: center !important;
gap: 16px !important;
width: 100% !important;
padding-top: 10px !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.profile-header-actions {
width: 100% !important;
justify-content: center !important;
margin-top: 10px !important;
}
.profile-header-actions .btn {
flex: 1 !important;
justify-content: center !important;
} .profile-nav-tabs-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding-bottom: 4px !important;
}
.profile-nav-tabs-wrap::-webkit-scrollbar {
display: none !important;
}
.profile-nav-tabs {
display: flex !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
gap: 6px !important;
} .gnozis-recommended-shop-widget,
.gnozis-floating-shop-widget {
bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
right: 10px !important;
left: 10px !important;
max-width: calc(100vw - 20px) !important;
width: auto !important;
border-radius: 14px !important;
padding: 10px 12px !important;
z-index: 998 !important;
}
.rec-widget-inner {
gap: 10px !important;
}
.rec-widget-thumb {
width: 44px !important;
height: 44px !important;
border-radius: 8px !important;
}
.rec-widget-title {
font-size: 0.82rem !important;
max-width: 140px !important;
}
.rec-widget-price {
font-size: 0.85rem !important;
}
.rec-widget-btn {
padding: 7px 12px !important;
font-size: 0.78rem !important;
} .gnozis-modal-dialog,
.modal-dialog-card,
.group-modal-content,
.gnozis-quick-buy-card {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
max-height: 86vh !important;
border-radius: 18px !important;
padding: 18px 16px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.modal-header h3 {
font-size: 1.15rem !important;
} .gnozis-cart-drawer {
z-index: 1000005 !important;
}
.gnozis-cart-drawer-inner {
width: 100% !important;
max-width: 100vw !important;
height: 100% !important;
height: 100dvh !important;
max-height: 100dvh !important;
display: flex !important;
flex-direction: column !important;
}
.gnozis-drawer-header {
padding: 14px 16px !important;
flex-shrink: 0 !important;
}
.gnozis-drawer-body {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 14px 16px !important;
}
.gnozis-drawer-footer {
flex-shrink: 0 !important;
padding: 16px !important;
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
background: #111827 !important;
border-top: 1px solid #1e293b !important;
}
.drawer-checkout-btn {
padding: 14px 20px !important;
font-size: 1rem !important;
font-weight: 600 !important;
border-radius: 10px !important;
width: 100% !important;
}
} @media (max-width: 380px) {
.products-grid,
.woocommerce ul.products,
.gnozis-shop-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
.product-card {
padding: 8px !important;
}
.product-card-title {
font-size: 0.78rem !important;
}
.rec-widget-title {
max-width: 100px !important;
}
} .gnozis-checkout-page-wrapper,
.gnozis-standard-page-wrapper {
width: 100%;
min-height: calc(100vh - 120px);
padding: 24px 0 60px;
position: relative;
z-index: 2;
}
.gnozis-checkout-container,
.gnozis-page-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
} .gnozis-checkout-header {
text-align: center;
margin-bottom: 36px;
position: relative;
}
.checkout-header-sigil {
font-size: 1.15rem;
color: var(--accent-bright);
letter-spacing: 0.3em;
margin-bottom: 8px;
text-shadow: 0 0 12px var(--accent-glow-strong);
}
.checkout-main-title {
font-size: 2.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 10px;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.checkout-subtitle {
font-size: 1rem;
color: var(--text-secondary);
max-width: 620px;
margin: 0 auto 28px;
line-height: 1.5;
} .gnozis-checkout-stepper {
display: flex;
align-items: center;
justify-content: center;
max-width: 520px;
margin: 0 auto;
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-full);
padding: 10px 24px;
box-shadow: var(--shadow-card);
}
.stepper-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-muted);
transition: var(--gnozis-transition);
}
.step-badge {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-elevated);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
border: 1px solid var(--border-default);
transition: var(--gnozis-transition);
}
.stepper-item.is-completed {
color: var(--accent-bright);
}
.stepper-item.is-completed .step-badge {
background: var(--accent-primary);
color: #ffffff;
border-color: var(--accent-bright);
box-shadow: 0 0 10px var(--accent-glow);
}
.stepper-item.is-active {
color: #ffffff;
}
.stepper-item.is-active .step-badge {
background: var(--accent-bright);
color: var(--bg-void);
border-color: #ffffff;
box-shadow: 0 0 14px var(--accent-glow-strong);
}
.stepper-line {
flex: 1;
height: 2px;
background: var(--border-default);
margin: 0 14px;
border-radius: 2px;
transition: var(--gnozis-transition);
}
.stepper-line.is-active {
background: var(--accent-primary);
box-shadow: 0 0 8px var(--accent-glow);
}
.stepper-line.is-current {
background: linear-gradient(90deg, var(--accent-primary) 0%, var(--border-default) 100%);
} .gnozis-checkout-layout-grid {
display: grid;
grid-template-columns: 1fr 440px;
gap: 28px;
align-items: start;
}
.gnozis-checkout-col-main {
display: flex;
flex-direction: column;
gap: 24px;
}
.gnozis-checkout-col-summary {
position: relative;
}
.gnozis-sticky-summary-box {
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: 20px;
} .gnozis-card.checkout-step-card,
.gnozis-card.checkout-summary-card,
.gnozis-card.checkout-coupon-card,
.gnozis-card.checkout-empty-card,
.gnozis-card.thankyou-success-card,
.gnozis-card.thankyou-failed-card {
background: var(--bg-surface);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: var(--gnozis-transition);
position: relative;
}
.checkout-step-card {
padding: 24px 28px;
}
.checkout-card-header {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 18px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-subtle);
}
.header-icon-box {
width: 40px;
height: 40px;
border-radius: var(--gnozis-radius-sm);
background: var(--bg-elevated);
border: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.header-title-box {
display: flex;
align-items: center;
gap: 10px;
}
.step-num-pill {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent-fill-medium);
color: var(--accent-bright);
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--accent-primary);
}
.step-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
} .gnozis-checkout-page-wrapper,
.woocommerce-checkout,
.wp-block-woocommerce-checkout,
.wc-block-checkout {
color: var(--text-primary);
} .gnozis-checkout-form .woocommerce-billing-fields__field-wrapper,
.gnozis-checkout-form .woocommerce-shipping-fields__field-wrapper,
.gnozis-checkout-form .woocommerce-additional-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.gnozis-checkout-form .woocommerce-additional-fields {
margin-top: 14px;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
}
.gnozis-checkout-form .form-row,
.woocommerce-checkout .form-row {
margin: 0 0 14px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.gnozis-checkout-form .form-row-wide,
.gnozis-checkout-form .notes,
.gnozis-checkout-form #billing_address_1_field,
.gnozis-checkout-form #billing_address_2_field,
.gnozis-checkout-form #billing_country_field,
.gnozis-checkout-form #shipping_address_1_field,
.gnozis-checkout-form #shipping_address_2_field,
.gnozis-checkout-form #shipping_country_field {
grid-column: 1 / -1;
}
.gnozis-checkout-form label,
.woocommerce-checkout label,
.wc-block-components-checkout-step__title,
.wc-block-components-title {
font-size: 0.88rem;
font-weight: 500;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 4px;
}
.gnozis-checkout-form .required,
.woocommerce-checkout .required {
color: var(--accent-bright);
font-weight: 700;
text-decoration: none;
} .gnozis-checkout-page-wrapper input[type="text"],
.gnozis-checkout-page-wrapper input[type="email"],
.gnozis-checkout-page-wrapper input[type="tel"],
.gnozis-checkout-page-wrapper input[type="password"],
.gnozis-checkout-page-wrapper input[type="number"],
.gnozis-checkout-page-wrapper textarea,
.gnozis-checkout-page-wrapper select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.wc-block-checkout__main input,
.wc-block-checkout__main select,
.wc-block-checkout__main textarea,
.wc-block-checkout__sidebar input,
.wc-block-checkout__sidebar select,
.wc-block-components-text-input,
.wc-block-components-combobox,
.wc-block-components-combobox-control,
.wc-block-components-select__select,
.wc-block-components-totals-coupon-input-form .wc-block-components-text-input,
.gnozis-coupon-input,
.gnozis-input-coupon {
width: 100%;
background: var(--bg-input) !important;
background-color: var(--bg-input) !important;
border: 1px solid var(--border-input) !important;
border-radius: var(--gnozis-radius-sm) !important;
color: var(--text-primary) !important;
font-family: var(--gnozis-font-body);
font-size: 0.92rem;
padding: 12px 14px;
outline: none;
transition: var(--gnozis-transition);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
} .wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-components-combobox-control__input,
.wc-block-components-combobox input,
.wc-block-components-textarea textarea,
.wc-block-checkout__main .wc-block-components-text-input input,
.wc-block-checkout__main .wc-block-components-combobox-control input {
background: transparent !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
color: var(--text-primary) !important;
font-family: var(--gnozis-font-body) !important;
font-size: 0.92rem !important;
box-shadow: none !important;
padding: 0 !important;
width: 100% !important;
} .wc-block-components-combobox-control__toggle,
.wc-block-components-combobox-control__suffix,
.wc-block-components-combobox-control__toggle svg,
.wc-block-components-combobox-control__suffix svg {
color: var(--accent-bright) !important;
fill: var(--accent-bright) !important;
} .gnozis-checkout-page-wrapper input:-webkit-autofill,
.gnozis-checkout-page-wrapper input:-webkit-autofill:hover,
.gnozis-checkout-page-wrapper input:-webkit-autofill:focus,
.gnozis-checkout-page-wrapper textarea:-webkit-autofill,
.gnozis-checkout-page-wrapper select:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-combobox-control input:-webkit-autofill {
-webkit-text-fill-color: var(--text-primary) !important;
-webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
transition: background-color 5000s ease-in-out 0s !important;
} .wc-block-components-text-input label,
.wc-block-components-combobox label {
color: var(--text-muted) !important;
background: transparent !important;
font-size: 0.88rem !important;
transition: var(--gnozis-transition) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label,
.wc-block-components-combobox.is-active label,
.wc-block-components-combobox:focus-within label {
color: var(--accent-bright) !important;
background: var(--bg-input) !important;
padding: 0 6px !important;
border-radius: 3px !important;
} .gnozis-checkout-page-wrapper input:focus,
.gnozis-checkout-page-wrapper textarea:focus,
.gnozis-checkout-page-wrapper select:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.wc-block-components-text-input:focus-within,
.wc-block-components-combobox:focus-within,
.wc-block-components-combobox-control:focus-within,
.wc-block-components-select__select:focus,
.gnozis-coupon-input:focus,
.gnozis-input-coupon:focus {
background: var(--bg-input-focus) !important;
border-color: var(--accent-bright) !important;
box-shadow: 0 0 0 3px var(--accent-glow), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.gnozis-checkout-page-wrapper textarea,
.woocommerce-checkout textarea {
min-height: 90px;
resize: vertical;
}
.gnozis-checkout-page-wrapper select,
.woocommerce-checkout select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237898B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
padding-right: 38px !important;
} .wc-block-components-combobox-list,
.select2-dropdown {
background: var(--bg-card) !important;
border: 1px solid var(--border-hover) !important;
border-radius: var(--gnozis-radius-md) !important;
box-shadow: var(--shadow-card-elevated) !important;
color: var(--text-primary) !important;
overflow: hidden !important;
z-index: 99999 !important;
}
.wc-block-components-combobox-list__option,
.select2-results__option {
color: var(--text-primary) !important;
background: transparent !important;
padding: 10px 14px !important;
cursor: pointer !important;
transition: var(--gnozis-transition) !important;
}
.wc-block-components-combobox-list__option:hover,
.wc-block-components-combobox-list__option--is-active,
.wc-block-components-combobox-list__option[aria-selected="true"],
.select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected="true"] {
background: var(--bg-elevated) !important;
color: var(--accent-bright) !important;
}
.select2-container--default .select2-selection--single {
background-color: var(--bg-input) !important;
border: 1px solid var(--border-input) !important;
border-radius: var(--gnozis-radius-sm) !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--text-primary) !important;
line-height: 48px !important;
padding-left: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 46px !important;
}
.select2-search--dropdown .select2-search__field {
background-color: var(--bg-input) !important;
border: 1px solid var(--border-input) !important;
color: var(--text-primary) !important;
border-radius: var(--gnozis-radius-xs) !important;
padding: 8px 12px !important;
} .wc-block-components-checkout-step,
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
background: var(--gnozis-bg-card) !important;
border: 1px solid var(--gnozis-border-card) !important;
border-radius: var(--gnozis-radius-lg) !important;
padding: 24px !important;
margin-bottom: 24px !important;
box-shadow: var(--shadow-card) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title {
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
margin-bottom: 16px !important;
font-family: var(--gnozis-font-heading) !important;
}
.wc-block-components-radio-control-accordion-option {
background: var(--bg-card) !important;
border: 1px solid var(--border-card) !important;
border-radius: var(--gnozis-radius-md) !important;
padding: 14px 18px !important;
margin-bottom: 10px !important;
transition: var(--gnozis-transition) !important;
}
.wc-block-components-radio-control-accordion-option:hover,
.wc-block-components-radio-control-accordion-option.is-selected {
border-color: var(--accent-bright) !important;
background: var(--bg-elevated) !important;
}
.wc-block-components-radio-control__label {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.wc-block-components-radio-control__description {
color: var(--text-secondary) !important;
}
.wc-block-components-totals-item {
color: var(--text-secondary) !important;
border-color: var(--border-subtle) !important;
font-size: 0.95rem !important;
}
.wc-block-components-totals-item .wc-block-components-totals-item__value {
color: var(--text-primary) !important;
font-weight: 600 !important;
}
.wc-block-components-totals-item.wc-block-components-totals-footer {
border-top: 1px solid var(--border-hover) !important;
padding-top: 14px !important;
margin-top: 8px !important;
}
.wc-block-components-totals-footer .wc-block-components-totals-item__value {
color: var(--accent-bright) !important;
font-size: 1.35rem !important;
font-weight: 800 !important;
text-shadow: 0 0 12px var(--accent-glow);
} .wc-block-components-checkout-place-order-button,
.wc-block-components-button {
background: var(--accent-primary) !important;
color: var(--text-primary) !important;
font-family: var(--gnozis-font-heading) !important;
font-size: 1rem !important;
font-weight: 600 !important;
padding: 14px 24px !important;
border-radius: var(--gnozis-radius-md) !important;
border: 1px solid rgba(96, 120, 144, 0.55) !important;
cursor: pointer !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40) !important;
transition: var(--gnozis-transition) !important;
width: 100% !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:hover {
background: var(--accent-bright) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.50) !important;
transform: translateY(-1px) !important;
} .gnozis-checkout-form .woocommerce-form__label-for-checkbox,
.wc-block-components-checkbox__label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 0.9rem;
color: var(--text-primary) !important;
margin-top: 8px;
}
.gnozis-checkout-form input[type="checkbox"],
.wc-block-components-checkbox__input {
appearance: none;
width: 18px;
height: 18px;
border-radius: var(--gnozis-radius-xs);
background: var(--bg-input) !important;
border: 1px solid var(--border-input) !important;
cursor: pointer;
position: relative;
transition: var(--gnozis-transition);
}
.gnozis-checkout-form input[type="checkbox"]:checked,
.wc-block-components-checkbox__input:checked {
background: var(--accent-primary) !important;
border-color: var(--accent-bright) !important;
}
.gnozis-checkout-form input[type="checkbox"]:checked::after,
.wc-block-components-checkbox__input:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 0.75rem;
font-weight: 800;
} .gnozis-checkout-payment-box {
margin-top: 10px;
}
.gnozis-payment-methods-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
margin: 0 0 20px;
}
.gnozis-payment-method-item {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-md);
padding: 16px 18px;
cursor: pointer;
transition: var(--gnozis-transition);
position: relative;
}
.gnozis-payment-method-item:hover {
border-color: var(--border-hover);
background: var(--bg-elevated);
}
.gnozis-payment-method-item.is-selected {
border-color: var(--accent-bright);
background: var(--bg-elevated);
box-shadow: 0 0 16px var(--accent-glow);
}
.gnozis-payment-radio {
display: none;
}
.gnozis-payment-method-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.custom-radio-circle {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--border-input);
background: var(--bg-input);
display: flex;
align-items: center;
justify-content: center;
transition: var(--gnozis-transition);
}
.gnozis-payment-method-item.is-selected .custom-radio-circle {
border-color: var(--accent-bright);
background: var(--accent-bright);
box-shadow: 0 0 8px var(--accent-glow);
}
.gateway-icon-badge {
font-size: 1.25rem;
line-height: 1;
}
.gateway-title-text {
flex: 1;
}
.gateway-img-icons img {
max-height: 24px;
width: auto;
object-fit: contain;
}
.gnozis-payment-desc-box {
margin-top: 12px;
padding: 14px 16px;
background: #142232 !important;
border: 1px solid #283C50 !important;
border-radius: 8px !important;
font-size: 0.88rem;
color: #9AB0C8 !important;
line-height: 1.55;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.woocommerce-checkout #payment div.payment_box {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 14px 16px !important;
margin: 12px 0 6px !important;
font-size: 0.88rem !important;
border-radius: 8px !important;
line-height: 1.55 !important;
background-color: #142232 !important;
color: #9AB0C8 !important;
border: 1px solid #283C50 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.woocommerce-checkout #payment div.payment_box p {
margin: 0 !important;
color: #9AB0C8 !important;
}
.woocommerce-checkout #payment div.payment_box::before {
content: "" !important;
display: block !important;
border: 8px solid transparent !important;
border-bottom-color: #283C50 !important;
position: absolute !important;
top: -16px !important;
left: 24px !important;
margin: 0 !important;
}
.woocommerce-checkout #payment div.payment_box::after {
content: "" !important;
display: block !important;
border: 7px solid transparent !important;
border-bottom-color: #142232 !important;
position: absolute !important;
top: -14px !important;
left: 25px !important;
margin: 0 !important;
} .gateway-brand-logos {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.svg-brand-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 4px;
background: transparent;
border: none;
line-height: 1;
transition: var(--gnozis-transition);
}
.svg-brand-badge svg {
display: block;
height: 24px;
width: auto;
}
.svg-brand-badge:hover {
transform: translateY(-1px);
}
.badge-svg-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: #0E1A28;
border: 1px solid #223448;
}
.badge-svg-apple {
background: #000000;
color: #FFFFFF;
}
.badge-svg-google {
background: #182230;
}
.brand-logo-pill {
font-size: 0.75rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
}
.brand-logo-pill.visa-pill {
background: #1A1F71;
color: #FFFFFF;
font-style: italic;
font-family: Arial, sans-serif;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.brand-logo-pill.mc-pill {
background: #252525;
color: #EB001B;
border: 1px solid rgba(235, 0, 27, 0.4);
}
.brand-logo-pill.apple-pill {
background: #000000;
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.brand-logo-pill.gpay-pill {
background: #3c4043;
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.25);
} .gnozis-card-payment-fields {
display: flex;
flex-direction: column;
gap: 14px;
}
.gnozis-express-pay-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 6px;
}
.btn-express-applepay,
.btn-express-gpay,
.btn-applepay-direct,
.btn-gpay-direct {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
border-radius: var(--gnozis-radius-sm);
font-weight: 600;
cursor: pointer;
transition: var(--gnozis-transition);
border: 1px solid var(--border-hover);
}
.btn-express-applepay,
.btn-applepay-direct {
background: #000000;
color: #FFFFFF;
}
.btn-express-applepay:hover,
.btn-applepay-direct:hover {
background: #1c1c1e;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.btn-express-gpay,
.btn-gpay-direct {
background: #1f1f1f;
color: #FFFFFF;
}
.btn-express-gpay:hover,
.btn-gpay-direct:hover {
background: #2d2d2d;
box-shadow: 0 0 12px rgba(66, 133, 244, 0.25);
}
.gnozis-payment-separator {
text-align: center;
position: relative;
margin: 6px 0;
}
.gnozis-payment-separator::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border-subtle);
z-index: 0;
}
.gnozis-payment-separator span {
position: relative;
background: var(--bg-card);
padding: 0 10px;
font-size: 0.78rem;
color: var(--text-muted);
}
.gnozis-card-input-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.gnozis-field-group {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.gnozis-field-group label {
font-size: 0.82rem;
font-weight: 500;
color: var(--text-secondary);
}
.card-input-with-badges {
position: relative;
}
.card-input-with-badges input {
padding-right: 90px !important;
}
.input-card-logos {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 4px;
pointer-events: none;
}
.logo-badge-visa {
font-size: 0.7rem;
font-weight: 800;
font-style: italic;
background: #1A1F71;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
}
.logo-badge-mc {
font-size: 0.7rem;
font-weight: 800;
background: #EB001B;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
}
.gnozis-field-row-inline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.gnozis-payment-secure-badge {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--text-muted);
background: var(--accent-fill-soft);
border: 1px solid var(--border-subtle);
padding: 8px 12px;
border-radius: var(--gnozis-radius-xs);
}
.gnozis-applepay-preview-badge,
.gnozis-gpay-preview-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--gnozis-radius-sm);
margin-top: 10px;
font-size: 0.88rem;
color: var(--text-primary);
}
.gnozis-applepay-preview-badge .pay-icon {
font-weight: 800;
background: #000;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
}
.gnozis-gpay-preview-badge .pay-icon {
font-weight: 800;
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
}  #customer_details ~ #wc-stripe-payment-request-wrapper,
#customer_details ~ #wc-stripe-payment-request-button-separator,
.gnozis-checkout-col-main > #wc-stripe-payment-request-wrapper,
.gnozis-checkout-col-main > #wc-stripe-payment-request-button-separator,
.gnozis-checkout-col-main > #wc-stripe-express-checkout-element,
.gnozis-checkout-form > #wc-stripe-payment-request-wrapper,
.gnozis-checkout-form > #wc-stripe-payment-request-button-separator {
display: none !important;
} .gnozis-express-accordion-item {
background: var(--bg-card, #0E1A29);
border: 1px solid var(--border-card, #1F3247);
border-radius: var(--gnozis-radius-md, 12px);
margin-bottom: 14px;
transition: var(--gnozis-transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1));
overflow: hidden;
position: relative;
}
.gnozis-express-accordion-item:hover {
border-color: var(--border-hover, #2A4360);
background: var(--bg-elevated, #112033);
}
.gnozis-express-accordion-item.is-selected {
border-color: var(--accent-bright, #38BDF8) !important;
background: #112033 !important;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.22) !important;
}
.gnozis-express-accordion-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
cursor: pointer;
user-select: none;
outline: none;
}
.gnozis-express-title-group {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.gnozis-express-title-group .gateway-title-text {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary, #F1F5F9);
line-height: 1.3;
}
.gnozis-express-subtitle {
font-size: 0.8rem;
color: var(--text-muted, #7E95AD);
line-height: 1.3;
transition: color 0.25s ease;
}
.gnozis-express-accordion-item.is-selected .gnozis-express-subtitle {
color: #94A3B8;
} .gnozis-express-accordion-header .custom-radio-circle {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--border-input, #283C50);
background: var(--bg-input, #060C14);
display: flex;
align-items: center;
justify-content: center;
transition: var(--gnozis-transition, all 0.25s ease);
flex-shrink: 0;
position: relative;
}
.gnozis-express-accordion-item.is-selected .gnozis-express-accordion-header .custom-radio-circle {
border-color: var(--accent-bright, #38BDF8) !important;
background: var(--accent-bright, #38BDF8) !important;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}
.gnozis-express-accordion-item.is-selected .gnozis-express-accordion-header .custom-radio-circle::after {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #0B1420;
display: block;
} .badge-express-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
background: rgba(251, 191, 36, 0.12);
color: #FBBF24;
font-size: 0.85rem;
border: 1px solid rgba(251, 191, 36, 0.3);
} .gnozis-express-chevron {
font-size: 0.72rem;
color: var(--text-muted, #64748B);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
margin-left: 6px;
line-height: 1;
display: inline-block;
}
.gnozis-express-accordion-item.is-selected .gnozis-express-chevron {
transform: rotate(180deg);
color: var(--accent-bright, #38BDF8);
} .gnozis-express-accordion-body {
max-height: 0;
overflow: hidden;
padding: 0 18px;
opacity: 0;
pointer-events: none;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.3s ease;
}
.gnozis-express-accordion-item.is-selected .gnozis-express-accordion-body {
max-height: 450px;
opacity: 1;
pointer-events: auto;
padding: 4px 18px 18px;
border-top: 1px solid rgba(56, 189, 248, 0.12);
}
.gnozis-express-hint-text {
font-size: 0.82rem;
color: var(--text-muted, #8A9EB5);
margin: 12px 0 14px;
line-height: 1.4;
} .gnozis-express-buttons-holder {
display: flex;
flex-direction: column;
gap: 16px;
}
#payment #wc-stripe-payment-request-wrapper,
#payment #wc-stripe-express-checkout-element,
.gnozis-express-buttons-holder #wc-stripe-express-checkout-element,
.gnozis-express-buttons-holder #wc-stripe-payment-request-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#payment #wc-stripe-payment-request-wrapper::before {
display: none !important;
}
#wc-stripe-payment-request-button-separator {
display: none !important;
} #wc-stripe-express-checkout-element > div,
#wc-stripe-express-checkout-element > iframe,
#wc-stripe-payment-request-wrapper > div,
#wc-stripe-payment-request-wrapper > iframe,
.gnozis-express-buttons-holder > div,
.gnozis-express-buttons-holder iframe {
margin-bottom: 14px !important;
border-radius: 8px !important;
transition: filter 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, opacity 0.2s ease !important;
cursor: pointer !important;
}
#wc-stripe-express-checkout-element > div:last-child,
#wc-stripe-express-checkout-element > iframe:last-child,
#wc-stripe-payment-request-wrapper > div:last-child,
#wc-stripe-payment-request-wrapper > iframe:last-child,
.gnozis-express-buttons-holder > div:last-child,
.gnozis-express-buttons-holder iframe:last-child {
margin-bottom: 0 !important;
} #wc-stripe-express-checkout-element > div:hover,
#wc-stripe-express-checkout-element > iframe:hover,
#wc-stripe-payment-request-wrapper > div:hover,
#wc-stripe-payment-request-wrapper > iframe:hover,
.gnozis-express-buttons-holder > div:hover,
.gnozis-express-buttons-holder iframe:hover,
.gnozis-express-buttons-holder .is-btn-hovered {
box-shadow: 0 0 18px rgba(255, 255, 255, 0.28), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
transform: translateY(-1px) !important;
} #wc-stripe-express-checkout-element > div:last-child:hover,
#wc-stripe-express-checkout-element > div:nth-child(2):hover,
#wc-stripe-express-checkout-element > iframe:last-child:hover,
#wc-stripe-express-checkout-element > iframe:nth-child(2):hover,
.gnozis-express-buttons-holder > div:last-child:hover,
.gnozis-express-buttons-holder > div:nth-child(2):hover,
.gnozis-express-buttons-holder iframe:last-child:hover,
.gnozis-express-buttons-holder iframe:nth-child(2):hover,
.gnozis-express-buttons-holder > div:last-child.is-btn-hovered,
.gnozis-express-buttons-holder > div:nth-child(2).is-btn-hovered {
filter: contrast(1.85) brightness(0.82) !important;
}
#wc-stripe-express-checkout-element > div:active,
#wc-stripe-express-checkout-element > iframe:active,
#wc-stripe-payment-request-wrapper > div:active,
#wc-stripe-payment-request-wrapper > iframe:active,
.gnozis-express-buttons-holder > div:active,
.gnozis-express-buttons-holder iframe:active {
transform: translateY(0) scale(0.99) !important;
} .woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe_cc {
background: var(--bg-card, #0E1A29) !important;
border: 1px solid var(--border-card, #1F3247) !important;
border-radius: var(--gnozis-radius-md, 12px) !important;
padding: 16px 20px !important;
margin-bottom: 12px !important;
transition: var(--gnozis-transition, all 0.25s cubic-bezier(0.4, 0, 0.2, 1)) !important;
}
.woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe:hover,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe.is-selected,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe_cc:hover,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe_cc.is-selected {
border-color: #3B82F6 !important;
background: #112033 !important;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
} .woocommerce-checkout #payment div.payment_box.payment_method_stripe,
.woocommerce-checkout #payment div.payment_box.payment_method_stripe_cc {
background: #0B1420 !important;
border: 1px solid #1C2E42 !important;
border-radius: 10px !important;
padding: 18px 20px !important;
margin-top: 14px !important;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
.woocommerce-checkout #payment div.payment_box.payment_method_stripe::before,
.woocommerce-checkout #payment div.payment_box.payment_method_stripe::after {
display: none !important;
} .wc-stripe-elements-field,
.wc-stripe-upe-element,
.wc-stripe-elements-field iframe,
#stripe-card-element,
#stripe-exp-element,
#stripe-cvc-element {
background: #060B12 !important;
border: 1px solid #1E334A !important;
border-radius: 8px !important;
color: #F1F5F9 !important;
padding: 10px 14px !important;
transition: all 0.25s ease !important;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}
.wc-stripe-elements-field:focus-within,
.wc-stripe-elements-field.focused,
.wc-stripe-upe-element:focus-within,
#stripe-card-element.focused {
border-color: #3B82F6 !important;
box-shadow: 0 0 14px rgba(59, 130, 246, 0.35), inset 0 1px 4px rgba(0, 0, 0, 0.6) !important;
} #order_review #payment,
#order_review .woocommerce-checkout-payment,
#order_review .gnozis-checkout-payment-box {
display: none !important;
} .checkout-summary-card {
padding: 22px 24px;
}
.summary-header {
justify-content: space-between;
}
.summary-items-count {
font-size: 0.82rem;
font-weight: 600;
color: var(--accent-bright);
background: var(--accent-fill-medium);
padding: 4px 10px;
border-radius: var(--gnozis-radius-full);
border: 1px solid var(--accent-primary);
} .gnozis-review-items-list {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 380px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: var(--border-hover) transparent;
}
.gnozis-review-items-list::-webkit-scrollbar {
width: 4px;
}
.gnozis-review-items-list::-webkit-scrollbar-track {
background: transparent;
}
.gnozis-review-items-list::-webkit-scrollbar-thumb {
background: var(--border-hover);
border-radius: 4px;
}
.gnozis-review-items-list::-webkit-scrollbar-thumb:hover {
background: var(--accent-bright);
}
.gnozis-review-items-list .gnozis-review-item,
.woocommerce-checkout-review-order .gnozis-review-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 12px !important;
background: var(--bg-card) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: var(--gnozis-radius-sm) !important;
transition: var(--gnozis-transition) !important;
box-sizing: border-box !important;
width: 100% !important;
}
.gnozis-review-items-list .gnozis-review-item:hover,
.woocommerce-checkout-review-order .gnozis-review-item:hover {
border-color: var(--border-card) !important;
background: var(--bg-elevated) !important;
}
.review-item-thumb {
width: 48px;
height: 48px;
border-radius: var(--gnozis-radius-xs);
background: var(--bg-elevated);
position: relative;
flex-shrink: 0;
overflow: visible;
}
.review-item-thumb img,
.review-product-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--gnozis-radius-xs);
}
.review-item-qty-badge {
position: absolute;
top: -6px;
right: -6px;
width: 20px;
height: 20px;
background: var(--accent-primary);
color: #ffffff;
font-size: 0.72rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ffffff;
box-shadow: var(--shadow-xs);
}
.review-item-details {
flex: 1;
min-width: 0;
}
.review-item-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.review-item-total {
font-size: 0.92rem;
font-weight: 700;
color: var(--text-primary);
flex-shrink: 0;
}
.gnozis-review-divider {
height: 1px;
background: var(--border-card);
margin: 18px 0;
}
.gnozis-review-divider.total-divider {
background: var(--border-active);
opacity: 0.5;
margin: 14px 0;
} .gnozis-review-totals-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.review-total-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-secondary);
}
.review-total-row .row-val {
font-weight: 600;
color: var(--text-primary);
}
.review-total-row .discount-val {
color: #10B981;
}
.grand-total-row {
font-size: 1.15rem;
color: var(--text-primary);
margin-top: 4px;
}
.grand-total-row .row-label {
font-weight: 700;
}
.grand-total-val {
font-size: 1.35rem;
font-weight: 800;
color: var(--accent-bright) !important;
text-shadow: 0 0 12px var(--accent-glow);
} .gnozis-place-order-box {
margin-top: 20px;
}
.btn-gnozis-place-order {
width: 100%;
padding: 16px 24px;
font-size: 1.05rem;
font-weight: 700;
border-radius: var(--gnozis-radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 4px 20px var(--accent-glow-strong);
transition: var(--gnozis-transition);
border: none;
color: #ffffff;
background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-primary) 100%);
}
.btn-gnozis-place-order:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px var(--accent-glow-strong);
}
.btn-gnozis-place-order:active {
transform: translateY(0);
}
.btn-spinner-ring {
display: none;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: gnozisSpin 0.7s linear infinite;
}
.btn-gnozis-place-order.is-loading .btn-spinner-ring {
display: inline-block;
}
.btn-gnozis-place-order.is-loading .btn-arrow {
display: none;
}
@keyframes gnozisSpin {
to { transform: rotate(360deg); }
} .checkout-coupon-card {
padding: 18px 20px;
}
.coupon-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.coupon-title {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-primary);
}
.checkout-coupon-form-inline {
display: flex;
gap: 8px;
}
.checkout-coupon-form-inline .gnozis-input-coupon {
flex: 1;
padding: 10px 12px;
font-size: 0.88rem;
}
.btn-apply-gnozis-coupon {
padding: 10px 16px;
font-size: 0.85rem;
font-weight: 600;
border-radius: var(--gnozis-radius-sm);
white-space: nowrap;
cursor: pointer;
border: none;
background: var(--accent-primary);
color: #ffffff;
transition: var(--gnozis-transition);
}
.btn-apply-gnozis-coupon:hover {
background: var(--accent-bright);
}
.gnozis-coupon-message {
margin-top: 8px;
font-size: 0.82rem;
padding: 6px 10px;
border-radius: var(--gnozis-radius-xs);
}
.gnozis-coupon-message.is-success {
background: rgba(16, 185, 129, 0.15);
color: #10B981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.gnozis-coupon-message.is-error {
background: rgba(239, 68, 68, 0.15);
color: #EF4444;
border: 1px solid rgba(239, 68, 68, 0.3);
} .checkout-trust-badges {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 12px;
}
.trust-badge-item {
display: flex;
align-items: center;
gap: 12px;
}
.trust-icon {
font-size: 1.25rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-card);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-card);
flex-shrink: 0;
}
.trust-text {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.trust-text strong {
font-size: 0.82rem;
color: var(--text-primary);
}
.trust-text small {
font-size: 0.75rem;
color: var(--text-muted);
} .checkout-empty-card {
padding: 48px 32px;
text-align: center;
max-width: 600px;
margin: 0 auto 40px;
}
.empty-state-sigil {
font-size: 3.5rem;
margin-bottom: 16px;
display: inline-block;
animation: gnozisFloat 3s ease-in-out infinite;
}
@keyframes gnozisFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.empty-state-title {
font-size: 1.6rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 10px;
}
.empty-state-desc {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 24px;
line-height: 1.5;
}
.empty-state-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.checkout-empty-recommended-wrap {
width: 100%;
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.checkout-rec-title {
text-align: center;
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-bright, #00f3ff);
margin-bottom: 20px;
letter-spacing: 0.05em;
text-shadow: 0 0 12px rgba(0, 243, 255, 0.3);
}
.checkout-rec-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
width: 100%;
}
.rec-card-item {
flex: 1 1 200px;
max-width: 240px;
min-width: 180px;
padding: 14px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
background: rgba(14, 22, 33, 0.75);
border: 1px solid rgba(0, 243, 255, 0.15);
border-radius: var(--gnozis-radius-md, 12px);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
text-align: left;
box-sizing: border-box;
position: relative;
}
.rec-card-item:hover {
transform: translateY(-3px);
border-color: rgba(0, 243, 255, 0.4);
box-shadow: 0 6px 20px rgba(0, 243, 255, 0.18);
}
.rec-thumb {
width: 100%;
aspect-ratio: 1 / 1;
max-height: 180px;
border-radius: var(--gnozis-radius-sm, 8px);
background: var(--bg-elevated, #080d14);
flex-shrink: 0;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
.rec-thumb a {
display: block;
width: 100%;
height: 100%;
}
.rec-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.rec-card-item:hover .rec-thumb img {
transform: scale(1.05);
}
.rec-discount-badge {
position: absolute;
top: 8px;
left: 8px;
background: linear-gradient(135deg, #ff1a53, #ff6b3d);
color: #ffffff;
font-size: 0.75rem;
font-weight: 800;
padding: 3px 7px;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(255, 26, 83, 0.45);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1;
letter-spacing: 0.02em;
}
.rec-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-bottom: 12px;
}
.rec-title {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-primary, #ffffff);
margin: 0 0 6px 0;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rec-title a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.rec-title a:hover {
color: var(--accent-bright, #00f3ff);
}
.rec-price-wrap {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;
}
.rec-price {
font-size: 1rem;
font-weight: 700;
color: var(--accent-bright, #00f3ff);
white-space: nowrap;
}
.rec-price.rec-sale-price {
color: #ff3366;
font-size: 1.05rem;
font-weight: 800;
text-shadow: 0 0 10px rgba(255, 51, 102, 0.3);
}
.rec-old-price {
font-size: 0.85rem;
color: #8da4b8;
text-decoration: line-through;
opacity: 0.8;
white-space: nowrap;
}
.rec-card-item .btn-ajax-add-to-cart {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 0.85rem;
padding: 9px 12px;
border-radius: 8px;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
} .gnozis-thankyou-wrapper {
max-width: 800px;
margin: 0 auto;
}
.thankyou-success-card {
padding: 36px 32px;
text-align: center;
position: relative;
margin-bottom: 24px;
}
.success-ambient-aura {
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
width: 260px;
height: 260px;
background: radial-gradient(circle, var(--accent-glow-strong) 0%, rgba(0, 0, 0, 0) 70%);
pointer-events: none;
filter: blur(40px);
}
.thankyou-sigil-badge {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent-primary) 100%);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 0 24px var(--accent-glow-strong);
}
.thankyou-sigil-badge .sigil-icon {
font-size: 2rem;
color: #ffffff;
}
.thankyou-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.thankyou-subtitle {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 28px;
line-height: 1.5;
}
.thankyou-meta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-md);
padding: 16px;
text-align: left;
}
.meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.meta-label {
font-size: 0.78rem;
color: var(--text-muted);
font-weight: 500;
}
.meta-value {
font-size: 0.92rem;
color: var(--text-primary);
font-weight: 600;
}
.meta-value.text-accent {
color: var(--accent-bright);
font-weight: 700;
}
.thankyou-footer-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 32px;
} @media (max-width: 1024px) {
.gnozis-checkout-layout-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.gnozis-sticky-summary-box {
position: static;
}
.thankyou-meta-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 768px) {
.gnozis-checkout-page-wrapper {
padding-top: 14px !important;
padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
}
.gnozis-checkout-container {
padding: 0 12px !important;
}
.gnozis-checkout-header {
margin-bottom: 20px !important;
}
.checkout-main-title {
font-size: 1.6rem !important;
margin-bottom: 6px !important;
}
.checkout-subtitle {
font-size: 0.88rem !important;
margin-bottom: 18px !important;
line-height: 1.45 !important;
padding: 0 6px !important;
}
.gnozis-checkout-stepper {
padding: 8px 12px !important;
gap: 6px !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 20px !important;
}
.stepper-item {
font-size: 0.74rem !important;
gap: 6px !important;
}
.stepper-line {
width: 16px !important;
margin: 0 4px !important;
}
.step-badge {
width: 20px !important;
height: 20px !important;
font-size: 0.7rem !important;
}
.gnozis-checkout-form .woocommerce-billing-fields__field-wrapper,
.gnozis-checkout-form .woocommerce-shipping-fields__field-wrapper,
.gnozis-checkout-form .woocommerce-additional-fields__field-wrapper {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.gnozis-checkout-form .form-row {
margin-bottom: 12px !important;
} .gnozis-checkout-page-wrapper input[type="text"],
.gnozis-checkout-page-wrapper input[type="email"],
.gnozis-checkout-page-wrapper input[type="tel"],
.gnozis-checkout-page-wrapper input[type="password"],
.gnozis-checkout-page-wrapper input[type="number"],
.gnozis-checkout-page-wrapper textarea,
.gnozis-checkout-page-wrapper select,
.wc-block-components-text-input input {
font-size: 16px !important;
min-height: 48px !important;
padding: 11px 14px !important;
border-radius: 8px !important;
}
.checkout-step-card {
padding: 16px 14px !important;
margin-bottom: 16px !important;
border-radius: 14px !important;
}
.checkout-summary-card {
padding: 16px 14px !important;
margin-bottom: 16px !important;
border-radius: 14px !important;
}
.step-header {
margin-bottom: 16px !important;
}
.step-title {
font-size: 1.05rem !important;
}
.btn-gnozis-place-order {
padding: 15px 20px !important;
font-size: 1.02rem !important;
border-radius: 10px !important;
width: 100% !important;
}
.checkout-rec-grid {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
}
.rec-card-item {
max-width: 100% !important;
width: 100% !important;
min-width: 0 !important;
}
.thankyou-meta-grid {
grid-template-columns: 1fr !important;
}
.thankyou-success-card {
padding: 24px 16px !important;
}
}  .woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .entry-summary {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.gnozis-single-product-container {
max-width: 1360px;
width: 100%;
margin: 0 auto;
padding: 8px 0 60px;
} .gnozis-product-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
padding: 12px 20px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-lg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.product-topbar-breadcrumbs .woocommerce-breadcrumb,
.product-topbar-breadcrumbs .gnozis-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 0.86rem;
color: var(--text-muted);
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.product-topbar-breadcrumbs a {
color: var(--text-secondary);
text-decoration: none;
transition: var(--gnozis-transition);
}
.product-topbar-breadcrumbs a:hover {
color: var(--accent-bright);
text-shadow: 0 0 10px var(--accent-glow);
}
.crumb-separator {
color: var(--accent-dim);
font-size: 0.68rem;
margin: 0 4px;
opacity: 0.8;
}
.btn-back-to-shop {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(96, 120, 144, 0.14);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-md);
color: var(--text-secondary);
font-size: 0.84rem;
font-weight: 600;
text-decoration: none;
transition: var(--gnozis-transition);
white-space: nowrap;
}
.btn-back-to-shop:hover {
background: var(--bg-elevated);
border-color: var(--accent-bright);
color: #ffffff;
box-shadow: 0 0 12px var(--accent-glow);
} .gnozis-single-product-card {
display: flex;
flex-direction: column;
gap: 40px;
}
.gnozis-product-hero {
display: grid;
grid-template-columns: 500px minmax(0, 1fr);
gap: 40px;
align-items: start;
} .gnozis-product-gallery-wrap {
position: relative;
border-radius: var(--gnozis-radius-xl);
background: var(--bg-card);
border: 1px solid var(--border-card);
padding: 24px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--shadow-card-elevated);
overflow: hidden;
}
.product-gallery-ambient-glow {
position: absolute;
top: -40%;
left: -40%;
width: 180%;
height: 180%;
background: radial-gradient(circle, rgba(96, 120, 144, 0.16) 0%, rgba(0, 16, 32, 0) 70%);
pointer-events: none;
z-index: 0;
}
.woocommerce-product-gallery {
position: relative;
z-index: 1;
width: 100% !important;
}
.woocommerce-product-gallery__wrapper {
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-product-gallery__image {
border-radius: var(--gnozis-radius-lg);
overflow: hidden;
background: radial-gradient(circle at 50% 50%, #0d1728 0%, #060a12 100%);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
padding: 16px;
}
.woocommerce-product-gallery__image img {
display: block;
width: 100%;
max-height: 480px;
object-fit: contain;
border-radius: var(--gnozis-radius-lg);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.woocommerce-product-gallery__image:hover img {
transform: scale(1.03);
}
.woocommerce-product-gallery__trigger {
position: absolute !important;
top: 16px !important;
right: 16px !important;
width: 38px !important;
height: 38px !important;
background: rgba(16, 24, 32, 0.88) !important;
border: 1px solid var(--border-card) !important;
border-radius: var(--gnozis-radius-full) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
text-indent: -9999px;
backdrop-filter: blur(8px);
transition: var(--gnozis-transition);
}
.woocommerce-product-gallery__trigger::after {
content: "🔍";
font-size: 14px;
text-indent: 0;
display: block;
line-height: 1;
}
.woocommerce-product-gallery__trigger:hover {
background: var(--bg-surface) !important;
border-color: var(--accent-bright) !important;
} .flex-control-thumbs {
display: flex;
gap: 12px;
margin-top: 18px;
list-style: none;
padding: 0;
}
.flex-control-thumbs li {
width: 76px;
height: 76px;
border-radius: var(--gnozis-radius-md);
border: 1px solid var(--border-subtle);
overflow: hidden;
cursor: pointer;
background: rgba(0, 16, 32, 0.5);
transition: var(--gnozis-transition);
}
.flex-control-thumbs li img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.65;
transition: var(--gnozis-transition);
}
.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li:hover img {
opacity: 1;
}
.flex-control-thumbs li:has(img.flex-active),
.flex-control-thumbs li:hover {
border-color: var(--accent-bright);
box-shadow: 0 0 14px var(--accent-glow);
} .gnozis-product-summary {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-xl);
padding: 36px 42px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
gap: 22px;
} .gnozis-product-badge-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.badge-row-left {
display: flex;
align-items: center;
gap: 10px;
}
.product-sigil-lead {
color: var(--accent-bright);
font-size: 1rem;
opacity: 0.85;
}
.product-cat-pill {
display: inline-flex;
align-items: center;
padding: 5px 16px;
background: var(--accent-fill-soft);
border: 1px solid var(--border-subtle);
border-radius: var(--gnozis-radius-full);
color: var(--accent-bright);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
transition: var(--gnozis-transition);
}
.product-cat-pill:hover {
background: var(--accent-fill-medium);
border-color: var(--border-hover);
color: #ffffff;
}
.product-sku-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-family: var(--gnozis-font-mono);
color: var(--text-muted);
background: var(--bg-input);
padding: 4px 10px;
border-radius: var(--gnozis-radius-xs);
border: 1px solid var(--border-subtle);
}
.product-sku-badge .sku-val {
color: var(--text-primary);
font-weight: 600;
} .single-product-admin-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.btn-admin-single-edit,
.btn-admin-single-delete {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: var(--gnozis-transition);
}
.btn-admin-single-edit {
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.4);
color: #38bdf8;
}
.btn-admin-single-edit:hover {
background: rgba(56, 189, 248, 0.25);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}
.btn-admin-single-delete {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #f87171;
}
.btn-admin-single-delete:hover {
background: rgba(239, 68, 68, 0.25);
border-color: #ef4444;
color: #ffffff;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
} .product_title.entry-title {
font-size: 2.25rem;
font-weight: 800;
color: #ffffff;
line-height: 1.22;
margin: 0;
letter-spacing: -0.02em;
} .gnozis-price-stock-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 16px 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.single-price-discount-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
}
.single-price-main-line {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.single-price-current,
.single-price-current .woocommerce-Price-amount {
font-size: 2.35rem;
font-weight: 800;
color: #38bdf8;
text-shadow: 0 0 24px rgba(56, 189, 248, 0.45);
line-height: 1;
letter-spacing: -0.02em;
}
.single-price-regular del,
.single-price-regular del .woocommerce-Price-amount {
font-size: 1.35rem;
color: #cbd5e1;
text-decoration: line-through;
text-decoration-color: #ef4444;
text-decoration-thickness: 2.5px;
font-weight: 600;
opacity: 0.95;
}
.single-discount-banner {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.single-discount-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #f97316 100%);
color: #ffffff;
font-weight: 800;
font-size: 0.88rem;
padding: 5px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 3px 12px rgba(239, 68, 68, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
letter-spacing: 0.02em;
}
.single-savings-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(16, 185, 129, 0.16);
border: 1px solid rgba(16, 185, 129, 0.45);
color: #34d399;
font-size: 0.86rem;
font-weight: 600;
padding: 5px 14px;
border-radius: 8px;
backdrop-filter: blur(6px);
}
.single-savings-pill strong,
.single-savings-pill strong .woocommerce-Price-amount {
color: #6ee7b7;
font-weight: 800;
}
.product-price-box .price {
display: flex;
align-items: baseline;
gap: 14px;
font-size: 2.2rem;
font-weight: 800;
color: var(--accent-bright);
text-shadow: 0 0 20px var(--accent-glow);
margin: 0;
}
.product-price-box .price del,
.product-price-box .price del .woocommerce-Price-amount {
font-size: 1.35rem;
color: #cbd5e1;
font-weight: 600;
text-decoration: line-through;
text-decoration-color: #ef4444;
text-decoration-thickness: 2.5px;
opacity: 0.95;
}
.product-price-box .price ins,
.product-price-box .price ins .woocommerce-Price-amount {
text-decoration: none;
color: #38bdf8;
font-weight: 800;
text-shadow: 0 0 20px rgba(56, 189, 248, 0.45);
}
.gnozis-single-product-card .onsale,
.gnozis-product-gallery-wrap .onsale,
.gnozis-sale-flash {
position: absolute;
top: 36px !important;
left: 36px !important;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #f97316 100%);
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 9999px;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.04em;
padding: 6px 14px;
z-index: 30 !important;
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
display: inline-flex;
align-items: center;
gap: 6px;
backdrop-filter: blur(8px);
animation: pulseDiscountGlow 2.8s infinite ease-in-out;
}
.stock-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: var(--gnozis-radius-full);
font-size: 0.85rem;
font-weight: 600;
}
.stock-badge.is-in-stock {
background: rgba(16, 185, 129, 0.14);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #34d399;
}
.stock-badge.is-out-of-stock {
background: rgba(239, 68, 68, 0.14);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #f87171;
}
.stock-dot {
font-size: 0.75rem;
} .woocommerce-product-details__short-description {
color: var(--text-secondary);
font-size: 0.98rem;
line-height: 1.68;
padding: 16px 20px;
background: rgba(0, 16, 32, 0.45);
border-left: 3px solid var(--accent-bright);
border-radius: 0 var(--gnozis-radius-md) var(--gnozis-radius-md) 0;
} .gnozis-purchase-action-wrap form.cart {
display: flex;
flex-direction: column;
gap: 14px;
margin: 6px 0;
} .gnozis-purchase-action-wrap form.cart .quantity,
.gnozis-purchase-action-wrap form.cart .gnozis-quantity-wrapper {
display: inline-flex;
align-items: center;
background: var(--bg-input);
border: 1px solid var(--border-input);
border-radius: var(--gnozis-radius-md);
overflow: hidden;
height: 52px;
transition: var(--gnozis-transition);
}
.gnozis-purchase-action-wrap form.cart .gnozis-quantity-wrapper:focus-within {
border-color: var(--accent-bright);
box-shadow: 0 0 0 2px var(--accent-glow);
}
.btn-qty-minus,
.btn-qty-plus {
width: 44px;
height: 100%;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--gnozis-transition);
user-select: none;
}
.btn-qty-minus:hover,
.btn-qty-plus:hover {
background: rgba(96, 120, 144, 0.25);
color: var(--accent-bright);
}
.gnozis-quantity-wrapper input.qty {
width: 52px;
height: 100%;
background: transparent;
border: none;
text-align: center;
color: var(--text-primary);
font-size: 1.05rem;
font-weight: 700;
outline: none;
padding: 0;
-moz-appearance: textfield;
}
.gnozis-quantity-wrapper input.qty::-webkit-outer-spin-button,
.gnozis-quantity-wrapper input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} button.single_add_to_cart_button,
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce-page button.button.alt.single_add_to_cart_button {
height: 52px !important;
width: 100% !important;
padding: 0 28px !important;
background: linear-gradient(135deg, #607890 0%, #4a6070 100%) !important;
border: 1px solid rgba(120, 152, 184, 0.45) !important;
border-radius: var(--gnozis-radius-md) !important;
color: #ffffff !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
transition: var(--gnozis-transition) !important;
box-shadow: 0 4px 18px var(--accent-glow) !important;
}
button.single_add_to_cart_button:hover {
background: linear-gradient(135deg, #7898b8 0%, #607890 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 26px var(--accent-glow-strong) !important;
border-color: var(--accent-bright) !important;
}
button.single_add_to_cart_button::before {
content: "🛒";
font-size: 1.1rem;
} .btn-trigger-one-click-buy {
height: 52px;
width: 100%;
padding: 0 24px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.28) 100%);
border: 1px solid rgba(245, 158, 11, 0.55);
border-radius: var(--gnozis-radius-md);
color: #fbbf24;
font-size: 0.96rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: var(--gnozis-transition);
}
.btn-trigger-one-click-buy:hover {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.45) 100%);
border-color: #f59e0b;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(245, 158, 11, 0.35);
} .gnozis-product-features-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 4px;
padding: 18px 20px;
background: rgba(0, 16, 32, 0.4);
border: 1px solid var(--border-subtle);
border-radius: var(--gnozis-radius-lg);
}
.product-feature-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.product-feature-item .feature-icon {
font-size: 1.2rem;
color: var(--accent-bright);
line-height: 1.2;
}
.product-feature-item .feature-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.product-feature-item .feature-text strong {
font-size: 0.84rem;
font-weight: 600;
color: var(--text-primary);
}
.product-feature-item .feature-text span {
font-size: 0.74rem;
color: var(--text-muted);
line-height: 1.35;
} .woocommerce-tabs {
background: var(--bg-card) !important;
border: 1px solid var(--border-card) !important;
border-radius: var(--gnozis-radius-xl) !important;
padding: 36px 42px !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: var(--shadow-card) !important;
margin-top: 44px !important;
margin-bottom: 48px !important;
}
.woocommerce-tabs ul.tabs {
display: flex !important;
gap: 12px !important;
border-bottom: 1px solid var(--border-subtle) !important;
padding: 0 0 18px 0 !important;
margin: 0 0 28px 0 !important;
list-style: none !important;
background: transparent !important;
overflow-x: auto;
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {
display: none !important;
}
.woocommerce-tabs ul.tabs li {
background: var(--bg-surface) !important;
border: 1px solid var(--border-card) !important;
border-radius: var(--gnozis-radius-md) !important;
margin: 0 !important;
padding: 0 !important;
transition: var(--gnozis-transition) !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
display: none !important;
}
.woocommerce-tabs ul.tabs li a {
display: block !important;
padding: 12px 24px !important;
color: var(--text-muted) !important;
font-size: 0.94rem !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: var(--gnozis-transition) !important;
background: transparent !important;
}
.woocommerce-tabs ul.tabs li.active {
background: rgba(96, 120, 144, 0.25) !important;
border-color: var(--accent-bright) !important;
box-shadow: 0 0 16px var(--accent-glow) !important;
}
.woocommerce-tabs ul.tabs li.active a {
color: var(--text-primary) !important;
}
.woocommerce-tabs ul.tabs li:hover:not(.active) {
background: var(--bg-elevated) !important;
border-color: var(--border-hover) !important;
}
.woocommerce-tabs ul.tabs li:hover:not(.active) a {
color: var(--text-secondary) !important;
} .woocommerce-Tabs-panel {
color: var(--text-secondary);
font-size: 0.98rem;
line-height: 1.75;
}
.woocommerce-Tabs-panel h2 {
display: none;
}
.woocommerce-Tabs-panel p {
margin-bottom: 16px;
}
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
margin-left: 20px;
margin-bottom: 16px;
}
.woocommerce-Tabs-panel li {
margin-bottom: 6px;
} .woocommerce-product-attributes {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
padding: 14px 18px;
border: 1px solid var(--border-subtle);
font-size: 0.92rem;
}
.woocommerce-product-attributes th {
background: var(--bg-surface);
color: var(--text-primary);
font-weight: 600;
width: 30%;
}
.woocommerce-product-attributes td {
background: rgba(0, 16, 32, 0.3);
color: var(--text-secondary);
} #reviews #comments ol.commentlist {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
#reviews .commentlist li {
background: rgba(0, 16, 32, 0.45);
border: 1px solid var(--border-subtle);
border-radius: var(--gnozis-radius-md);
padding: 22px;
}
#reviews .commentlist li img.avatar {
border-radius: var(--gnozis-radius-full);
float: left;
margin-right: 16px;
border: 1px solid var(--border-card);
}
#reviews .comment-text {
overflow: hidden;
}
#reviews .comment-text .meta {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 8px;
}
#reviews .comment-text .meta strong {
color: var(--text-primary);
}
#reviews .star-rating {
color: #f59e0b;
float: right;
}
#review_form_wrapper {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border-subtle);
}
#review_form_wrapper .comment-reply-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 16px;
}
#review_form_wrapper form {
display: flex;
flex-direction: column;
gap: 16px;
}
#review_form_wrapper label {
font-size: 0.85rem;
color: var(--text-secondary);
display: block;
margin-bottom: 6px;
}
#review_form_wrapper input[type="text"],
#review_form_wrapper input[type="email"],
#review_form_wrapper textarea {
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border-input);
border-radius: var(--gnozis-radius-md);
padding: 12px 16px;
color: var(--text-primary);
font-size: 0.92rem;
outline: none;
transition: var(--gnozis-transition);
}
#review_form_wrapper input:focus,
#review_form_wrapper textarea:focus {
border-color: var(--accent-bright);
box-shadow: 0 0 0 2px var(--accent-glow);
}
#review_form_wrapper .form-submit input[type="submit"] {
background: linear-gradient(135deg, #607890 0%, #4a6070 100%);
border: 1px solid var(--accent-primary);
color: #ffffff;
padding: 12px 28px;
border-radius: var(--gnozis-radius-md);
font-size: 0.94rem;
font-weight: 600;
cursor: pointer;
transition: var(--gnozis-transition);
}
#review_form_wrapper .form-submit input[type="submit"]:hover {
background: linear-gradient(135deg, #7898b8 0%, #607890 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--accent-glow);
} .related.products {
margin-top: 48px;
}
.related.products > h2 {
font-size: 1.6rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
}
.related.products > h2::before {
content: "✦";
color: var(--accent-bright);
font-size: 1.1rem;
}
.related.products ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.related.products ul.products::before,
.related.products ul.products::after {
display: none !important;
}
.related.products ul.products li.product {
background: var(--bg-card) !important;
border: 1px solid var(--border-card) !important;
border-radius: var(--gnozis-radius-xl) !important;
padding: 20px !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin: 0 !important;
width: auto !important;
float: none !important;
transition: var(--gnozis-transition) !important;
backdrop-filter: blur(20px) !important;
position: relative !important;
}
.related.products ul.products li.product:hover {
transform: translateY(-4px) !important;
border-color: var(--accent-bright) !important;
box-shadow: var(--shadow-card-elevated), 0 0 22px var(--accent-glow) !important;
}
.related.products ul.products li.product a.woocommerce-LoopProduct-link {
display: flex;
flex-direction: column;
gap: 12px;
text-decoration: none;
}
.related.products ul.products li.product img {
width: 100% !important;
aspect-ratio: 1/1 !important;
object-fit: cover !important;
border-radius: var(--gnozis-radius-lg) !important;
background: rgba(0, 16, 32, 0.6) !important;
border: 1px solid var(--border-subtle) !important;
margin: 0 !important;
}
.related.products ul.products li.product .woocommerce-loop-product__title {
font-size: 1.05rem !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
line-height: 1.35 !important;
margin: 0 !important;
padding: 0 !important;
}
.related.products ul.products li.product .price {
font-size: 1.2rem !important;
font-weight: 700 !important;
color: var(--accent-bright) !important;
margin: 0 !important;
}
.related.products ul.products li.product .button {
margin-top: auto !important;
padding: 10px 18px !important;
background: rgba(96, 120, 144, 0.18) !important;
border: 1px solid var(--border-card) !important;
border-radius: var(--gnozis-radius-md) !important;
color: var(--text-primary) !important;
text-align: center !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
transition: var(--gnozis-transition) !important;
}
.related.products ul.products li.product .button:hover {
background: var(--accent-bright) !important;
color: #001020 !important;
border-color: var(--accent-bright) !important;
} .gnozis-modal {
position: fixed;
inset: 0;
z-index: 999999 !important;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: var(--gnozis-transition-smooth);
padding: 20px;
}
.gnozis-modal.open {
opacity: 1;
visibility: visible;
}
.gnozis-modal-backdrop {
position: absolute;
inset: 0;
background: var(--bg-overlay);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.gnozis-modal-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 460px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--gnozis-radius-xl);
padding: 32px 28px;
box-shadow: var(--shadow-modal);
transform: scale(0.95) translateY(10px);
transition: var(--gnozis-transition-smooth);
}
.gnozis-modal.open .gnozis-modal-content {
transform: scale(1) translateY(0);
}
.gnozis-modal-close {
position: absolute;
top: 16px;
right: 16px;
background: var(--bg-surface);
border: 1px solid var(--border-card);
color: var(--text-muted);
width: 32px;
height: 32px;
border-radius: var(--gnozis-radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.9rem;
transition: var(--gnozis-transition);
}
.gnozis-modal-close:hover {
color: #ffffff;
border-color: var(--border-hover);
background: var(--bg-elevated);
}
.gnozis-modal-header {
text-align: center;
margin-bottom: 22px;
}
.gnozis-modal-header .gnozis-sigil {
font-size: 1.6rem;
color: #fbbf24;
text-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
margin-bottom: 6px;
}
.gnozis-modal-header h3 {
font-size: 1.35rem;
color: var(--text-primary);
margin: 0 0 6px 0;
font-weight: 700;
}
.gnozis-modal-header p {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.45;
margin: 0;
}
.gnozis-esoteric-form .form-group {
margin-bottom: 16px;
}
.gnozis-esoteric-form label {
display: block;
font-size: 0.82rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 6px;
}
.gnozis-esoteric-form input {
width: 100%;
background: var(--bg-input);
border: 1px solid var(--border-input);
border-radius: var(--gnozis-radius-md);
padding: 12px 14px;
color: var(--text-primary);
font-size: 0.92rem;
outline: none;
transition: var(--gnozis-transition);
}
.gnozis-esoteric-form input:focus {
border-color: var(--accent-bright);
box-shadow: 0 0 0 2px var(--accent-glow);
}
.btn-gnozis-gold.btn-block {
width: 100%;
height: 48px;
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
border: 1px solid #f59e0b;
border-radius: var(--gnozis-radius-md);
color: #ffffff;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: var(--gnozis-transition);
box-shadow: 0 4px 20px rgba(217, 119, 6, 0.35);
}
.btn-gnozis-gold.btn-block:hover {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(245, 158, 11, 0.45);
}
.gnozis-form-message {
margin-top: 14px;
font-size: 0.85rem;
text-align: center;
border-radius: var(--gnozis-radius-sm);
transition: var(--gnozis-transition);
}
.gnozis-form-message.is-success {
padding: 10px 14px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #34d399;
}
.gnozis-form-message.is-error {
padding: 10px 14px;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #f87171;
} @media (max-width: 1100px) {
.gnozis-product-hero {
grid-template-columns: 1fr;
gap: 32px;
}
.woocommerce-product-gallery__image img {
height: auto;
max-height: 480px;
}
.related.products ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
.gnozis-product-features-box {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.gnozis-product-topbar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.gnozis-product-summary {
padding: 24px 20px;
}
.product_title.entry-title {
font-size: 1.65rem;
}
.product-price-box .price {
font-size: 1.65rem;
}
.gnozis-price-stock-row {
flex-direction: column;
align-items: flex-start;
}
.woocommerce-tabs {
padding: 24px 18px !important;
}
.woocommerce-tabs ul.tabs li a {
padding: 10px 16px !important;
font-size: 0.88rem !important;
}
.related.products ul.products {
grid-template-columns: 1fr !important;
}
} .gnozis-product-full-desc {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-secondary);
margin: 0;
max-width: 860px;
}
.woocommerce-tabs .woocommerce-Tabs-panel--description h2,
.woocommerce-tabs .woocommerce-Tabs-panel--reviews h2 {
display: none !important;
}
.gnozis-empty-reviews-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 36px 24px;
background: rgba(255, 255, 255, 0.02);
border: 1px dashed rgba(255, 255, 255, 0.09);
border-radius: var(--gnozis-radius-lg);
max-width: 680px;
margin: 12px 0 24px 0;
}
.gnozis-empty-reviews-card .empty-sigil {
font-size: 1.8rem;
color: var(--accent-bright);
margin-bottom: 10px;
text-shadow: 0 0 16px var(--accent-glow);
}
.gnozis-empty-reviews-card .empty-title {
font-size: 1.15rem;
color: var(--text-primary);
margin: 0 0 8px 0;
font-weight: 600;
}
.gnozis-empty-reviews-card .empty-subtitle {
font-size: 0.92rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.gnozis-notice-box {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--gnozis-radius-md);
color: var(--text-secondary);
font-size: 0.9rem;
max-width: 680px;
margin-top: 14px;
}
.gnozis-notice-box .notice-icon {
font-size: 1.1rem;
flex-shrink: 0;
} .gnozis-reviews-container {
max-width: 860px;
margin-top: 10px;
}
.gnozis-reviews-header {
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gnozis-reviews-header .woocommerce-Reviews-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.5px;
}
.gnozis-reviews-header .reviews-sigil {
color: var(--accent-bright);
text-shadow: 0 0 12px var(--accent-glow);
} .gnozis-review-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 32px 0 !important;
display: flex;
flex-direction: column;
gap: 16px;
}
.gnozis-review-list .gnozis-review-item {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
} .gnozis-review-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: rgba(13, 20, 36, 0.7);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--gnozis-radius-lg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gnozis-review-card:hover {
transform: translateY(-2px);
border-color: rgba(0, 240, 255, 0.2);
box-shadow: 0 6px 24px rgba(0, 240, 255, 0.08), 0 4px 20px rgba(0, 0, 0, 0.35);
} .gnozis-review-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.gnozis-review-avatar-link {
display: block;
position: relative;
border-radius: 50%;
}
.gnozis-review-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(0, 240, 255, 0.35);
box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
display: block;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.gnozis-review-avatar-link:hover .gnozis-review-avatar {
border-color: var(--accent-bright);
transform: scale(1.05);
} .gnozis-review-body {
flex: 1;
min-width: 0;
}
.gnozis-review-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.gnozis-review-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.gnozis-review-author-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.gnozis-review-author-name {
color: var(--text-primary);
font-size: 0.98rem;
text-decoration: none;
transition: color 0.2s ease;
}
.gnozis-review-author-name:hover {
color: var(--accent-bright);
} .gnozis-verified-buyer-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
background: rgba(0, 240, 255, 0.1);
color: var(--accent-bright);
border: 1px solid rgba(0, 240, 255, 0.28);
letter-spacing: 0.3px;
}
.gnozis-review-date {
font-size: 0.8rem;
color: var(--text-muted);
} .gnozis-review-stars-display {
display: inline-flex;
gap: 3px;
font-size: 1.1rem;
line-height: 1;
user-select: none;
}
.gnozis-review-stars-display .star-filled {
color: #fbbf24;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
}
.gnozis-review-stars-display .star-empty {
color: rgba(255, 255, 255, 0.18);
} .gnozis-review-text {
color: var(--text-secondary);
font-size: 0.94rem;
line-height: 1.65;
word-break: break-word;
}
.gnozis-review-text p {
margin: 0 0 8px 0;
}
.gnozis-review-text p:last-child {
margin-bottom: 0;
} .gnozis-review-form-wrap {
margin-top: 32px;
}
.review-form-card {
background: rgba(13, 20, 36, 0.75);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--gnozis-radius-lg);
padding: 24px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.review-form-card .comment-reply-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 20px 0;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.3px;
}
.review-form-card .reply-sigil {
color: var(--accent-bright);
text-shadow: 0 0 10px var(--accent-glow);
}
.comment-form .form-group {
margin-bottom: 20px;
}
.comment-form label {
display: block;
font-size: 0.88rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 8px;
letter-spacing: 0.3px;
}
.comment-form label .required {
color: #ef4444;
} .comment-form-rating p.stars,
#review_form p.stars,
p.stars {
display: none !important;
} .gnozis-star-rating-picker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 2px 0;
background: transparent !important;
border: none !important;
cursor: pointer;
user-select: none;
}
.star-picker-item {
font-size: 1.55rem;
line-height: 1;
color: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: transform 0.15s ease, color 0.15s ease, text-shadow 0.15s ease;
}
.star-picker-item:hover,
.star-picker-item.hover {
color: #f59e0b;
text-shadow: 0 0 12px rgba(245, 158, 11, 0.65);
transform: scale(1.15);
}
.star-picker-item.active {
color: #fbbf24;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
} .gnozis-textarea-modal {
width: 100%;
background: rgba(8, 13, 24, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--gnozis-radius-md);
padding: 14px 16px;
color: var(--text-primary);
font-family: inherit;
font-size: 0.95rem;
line-height: 1.6;
resize: vertical;
min-height: 120px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
outline: none;
box-sizing: border-box;
}
.gnozis-textarea-modal:focus {
background: rgba(10, 16, 30, 0.95);
border-color: var(--accent-bright);
box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.15), 0 0 16px rgba(0, 240, 255, 0.2);
}
.gnozis-textarea-modal::placeholder {
color: rgba(255, 255, 255, 0.35);
} .btn-submit-review {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
font-size: 0.92rem;
font-weight: 600;
color: var(--text-primary);
background: rgba(0, 240, 255, 0.08);
border: 1px solid rgba(0, 240, 255, 0.28);
border-radius: var(--gnozis-radius-md);
cursor: pointer;
box-shadow: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
text-transform: none;
letter-spacing: 0.3px;
}
.btn-submit-review:hover {
background: rgba(0, 240, 255, 0.18);
border-color: rgba(0, 240, 255, 0.5);
color: var(--accent-bright);
box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
transform: translateY(-1px);
}
.btn-submit-review:active {
transform: translateY(0);
}
@media (max-width: 640px) {
.gnozis-review-card {
padding: 16px;
gap: 12px;
}
.gnozis-review-avatar {
width: 38px;
height: 38px;
}
.review-form-card {
padding: 18px 16px;
}
}  .profile-settings-card {
padding: 36px 40px 40px 40px !important;
background: var(--bg-card, #1A2B3C) !important;
border: 1px solid var(--border-card, #2A3B4C) !important;
border-radius: 16px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
margin-bottom: 24px;
}
.profile-settings-card .settings-title {
font-size: 1.3rem;
font-weight: 700;
color: #f1f5f9;
margin: 0 0 10px 0;
display: flex;
align-items: center;
gap: 10px;
}
.profile-settings-card .settings-desc {
font-size: 0.94rem;
color: #94a3b8;
line-height: 1.6;
margin: 0 0 24px 0;
}
.profile-avatar-setting-box {
display: flex;
align-items: center;
gap: 20px;
margin: 20px 0 30px 0 !important;
padding: 20px 24px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 14px !important;
}
.profile-settings-card .settings-form-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.profile-settings-card .form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-settings-card .form-group label {
font-size: 0.9rem;
font-weight: 600;
color: #cbd5e1;
letter-spacing: 0.2px;
margin-bottom: 2px;
}
.profile-settings-card .gnozis-input-modal {
width: 100%;
padding: 13px 18px !important;
border-radius: 10px !important;
background: rgba(15, 23, 42, 0.65) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #f8fafc !important;
font-size: 0.95rem !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
font-family: inherit;
box-sizing: border-box;
}
.profile-settings-card .gnozis-input-modal:focus {
outline: none !important;
border-color: #38bdf8 !important;
background: rgba(15, 23, 42, 0.9) !important;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), 0 0 16px rgba(56, 189, 248, 0.12) !important;
}
.profile-settings-card .form-grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.profile-settings-card .settings-actions {
margin-top: 12px;
display: flex;
justify-content: flex-start;
}
.profile-orders-card {
padding: 32px 36px !important;
background: var(--bg-card, #1A2B3C) !important;
border: 1px solid var(--border-card, #2A3B4C) !important;
border-radius: 16px !important;
}
@media (max-width: 768px) {
.profile-settings-card {
padding: 22px 18px !important;
}
.profile-avatar-setting-box {
padding: 16px !important;
gap: 14px;
}
.profile-settings-card .form-grid-2col {
grid-template-columns: 1fr;
gap: 16px;
}
} .gnozis-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.gnozis-modal.open {
display: flex !important;
}
.gnozis-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 8, 20, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1;
}
.gnozis-modal-dialog {
position: relative;
z-index: 2;
background: var(--bg-card, #1A2B3C);
border: 1px solid var(--border-card, #2A3B4C);
border-radius: 18px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow-y: auto;
padding: 24px 28px 28px;
box-sizing: border-box;
}
.gnozis-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gnozis-modal-close {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #94a3b8 !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.15rem !important;
line-height: 1 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
padding: 0 !important;
flex-shrink: 0 !important;
z-index: 10 !important;
touch-action: manipulation;
}
.gnozis-modal-close:hover,
.gnozis-modal-close:active {
background: rgba(239, 68, 68, 0.25) !important;
border-color: rgba(239, 68, 68, 0.6) !important;
color: #f87171 !important;
transform: scale(1.08);
} .gnozis-omni-search-modal {
display: none !important;
align-items: flex-start !important;
justify-content: center !important;
padding: 70px 16px 20px !important;
z-index: 999999 !important;
}
.gnozis-omni-search-modal.open {
display: flex !important;
}
.gnozis-omni-search-modal .gnozis-modal-backdrop {
background: rgba(4, 8, 16, 0.78) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
.gnozis-omni-search-modal .omni-search-dialog {
max-width: 680px !important;
width: 100% !important;
background: rgba(11, 18, 32, 0.94) !important;
backdrop-filter: blur(30px) saturate(190%) !important;
-webkit-backdrop-filter: blur(30px) saturate(190%) !important;
border: 1px solid rgba(56, 189, 248, 0.28) !important;
border-radius: 20px !important;
box-shadow: 0 25px 80px -10px rgba(0, 0, 0, 0.95), 0 0 45px rgba(56, 189, 248, 0.14) !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
max-height: 85vh !important;
animation: omniModalScale 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes omniModalScale {
from {
opacity: 0;
transform: scale(0.96) translateY(-8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.omni-search-input-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
position: relative;
}
.omni-search-icon {
color: #38bdf8;
display: flex;
align-items: center;
flex-shrink: 0;
filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6));
}
.omni-search-input {
flex: 1;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
color: #f8fafc !important;
font-size: 1.12rem !important;
font-weight: 500 !important;
font-family: inherit !important;
padding: 0 !important;
min-width: 0;
}
.omni-search-input::placeholder {
color: #64748b;
font-weight: 400;
}
.omni-search-clear-btn {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.omni-search-clear-btn:hover {
background: rgba(255, 255, 255, 0.18);
color: #f8fafc;
border-color: rgba(255, 255, 255, 0.25);
}
.omni-modal-close-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.omni-modal-close-btn:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
transform: rotate(90deg);
}
.omni-search-filter-tabs {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
scrollbar-width: none;
}
.omni-search-filter-tabs::-webkit-scrollbar {
display: none;
}
.omni-filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap !important;
flex-shrink: 0 !important;
transition: all 0.2s ease;
}
.omni-filter-pill span {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
.omni-filter-pill:hover {
background: rgba(255, 255, 255, 0.08);
color: #f8fafc;
border-color: rgba(255, 255, 255, 0.15);
}
.omni-filter-pill.active {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.5);
color: #38bdf8;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}
.omni-filter-pill .pill-badge {
background: #38bdf8;
color: #0f172a;
font-size: 0.68rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
line-height: 1.2;
}
.omni-search-body {
flex: 1;
overflow-y: auto;
padding: 18px 20px;
max-height: 480px;
scrollbar-width: thin;
scrollbar-color: rgba(56, 189, 248, 0.3) rgba(0, 0, 0, 0.2);
}
.omni-search-body::-webkit-scrollbar {
width: 6px;
}
.omni-search-body::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.omni-search-body::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.3);
border-radius: 8px;
}
.omni-search-body::-webkit-scrollbar-thumb:hover {
background: rgba(56, 189, 248, 0.6);
}
.omni-section-label {
font-size: 0.80rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
display: block;
}
.omni-quick-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.omni-quick-tag {
padding: 7px 13px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: #cbd5e1;
font-size: 0.84rem;
cursor: pointer;
transition: all 0.2s ease;
}
.omni-quick-tag:hover {
background: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.4);
color: #38bdf8;
transform: translateY(-1px);
}
.omni-quick-nav-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.omni-nav-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
text-decoration: none;
transition: all 0.2s ease;
}
.omni-nav-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(56, 189, 248, 0.3);
transform: translateY(-1px);
}
.omni-nav-icon {
font-size: 1.4rem;
flex-shrink: 0;
}
.omni-nav-card strong {
display: block;
font-size: 0.88rem;
color: #f1f5f9;
}
.omni-nav-card small {
font-size: 0.76rem;
color: #64748b;
} .omni-result-group {
margin-bottom: 22px;
}
.omni-result-group:last-child {
margin-bottom: 0;
}
.omni-group-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.78rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.omni-group-count {
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.25);
font-size: 0.70rem;
padding: 1px 7px;
border-radius: 8px;
font-weight: 700;
}
.omni-item-row {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
margin-bottom: 8px;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.omni-item-row:hover {
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.3);
transform: translateX(3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.omni-item-thumb {
width: 48px;
height: 48px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
border: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.omni-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.omni-item-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
border: 1.5px solid rgba(56, 189, 248, 0.4);
background: #0f172a;
flex-shrink: 0;
}
.omni-item-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.omni-group-icon-frame {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.omni-item-info {
flex: 1;
min-width: 0;
}
.omni-item-title {
display: block;
font-size: 0.94rem;
font-weight: 600;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.omni-item-category,
.omni-item-desc,
.omni-item-meta {
display: block;
font-size: 0.78rem;
color: #64748b;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.omni-item-action {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.omni-item-price {
font-size: 0.98rem;
font-weight: 700;
color: #38bdf8;
text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
.btn-search-quick-add,
.btn-mini-add-cart {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 8px;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.3);
color: #38bdf8;
cursor: pointer;
font-size: 0.80rem;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-search-quick-add:hover,
.btn-mini-add-cart:hover {
background: #38bdf8;
color: #0b101b;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
transform: scale(1.05);
}
.omni-member-name-row {
display: flex;
align-items: center;
gap: 8px;
}
.omni-member-name-row .rank-badge {
font-size: 0.65rem;
font-weight: 700;
color: #38bdf8;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.3);
padding: 1px 6px;
border-radius: 6px;
}
.omni-group-members-badge {
font-size: 0.74rem;
color: #94a3b8;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 3px 8px;
border-radius: 8px;
flex-shrink: 0;
}
.omni-search-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 40px 0;
color: #94a3b8;
font-size: 0.9rem;
}
.omni-loader-ring {
width: 32px;
height: 32px;
border: 3px solid rgba(56, 189, 248, 0.2);
border-top-color: #38bdf8;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.omni-no-results {
text-align: center;
padding: 40px 10px;
color: #94a3b8;
}
.omni-no-results-icon {
font-size: 2.4rem;
display: block;
margin-bottom: 8px;
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
}
.omni-no-results h4 {
color: #f1f5f9;
font-size: 1.15rem;
margin-bottom: 6px;
}
.omni-no-results p {
font-size: 0.88rem;
max-width: 360px;
margin: 0 auto;
color: #64748b;
}
.omni-search-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.74rem;
color: #64748b;
}
.omni-search-footer kbd {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 2px 5px;
border-radius: 4px;
color: #cbd5e1;
font-family: inherit;
font-size: 0.70rem;
margin-right: 4px;
}
@media (max-width: 768px) {
.gnozis-omni-search-modal {
padding: 15px 10px !important;
}
.gnozis-omni-search-modal .omni-search-dialog {
max-height: 92vh !important;
border-radius: 16px !important;
width: 100% !important;
}
.omni-search-input-header {
padding: 12px 14px;
}
.omni-search-input {
font-size: 1rem !important;
}
.omni-search-filter-tabs {
padding: 8px 12px !important;
gap: 6px !important;
}
.omni-filter-pill {
padding: 5px 11px !important;
font-size: 0.78rem !important;
}
.omni-quick-nav-grid {
grid-template-columns: 1fr;
}
.omni-search-footer {
display: none;
}
}  html {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
box-sizing: border-box !important;
}
body {
width: 100% !important;
max-width: 100% !important;
overflow-x: visible !important;
overflow-y: visible !important;
position: relative !important;
box-sizing: border-box !important;
}
*, *::before, *::after {
box-sizing: border-box !important;
} p, span, h1, h2, h3, h4, h5, h6, a, li, blockquote, figcaption, td, th, label, div {
overflow-wrap: break-word !important;
word-break: break-word;
}
img, video, iframe, embed, object, canvas, svg {
max-width: 100% !important;
height: auto;
}
pre, code, kbd, samp {
white-space: pre-wrap !important;
word-break: break-word !important;
max-width: 100% !important;
overflow-x: auto !important;
}
table {
max-width: 100% !important;
} .gnozis-page-shell {
width: 100% !important;
max-width: 1440px !important;
min-width: 0 !important;
overflow-x: clip !important;
} @media (max-width: 992px) {
.gnozis-subpage-2col-layout,
.profile-2col-layout,
.gnozis-shop-layout,
.gnozis-checkout-layout-grid,
.gnozis-messages-card,
.gnozis-product-hero,
.gnozis-auth-card {
grid-template-columns: 1fr !important;
width: 100% !important;
max-width: 100% !important;
}
.subpage-side-col,
.profile-side-col,
.gnozis-col-left,
.gnozis-col-right {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
} @media (max-width: 768px) {
.gnozis-page-shell {
padding-top: 10px !important;
padding-bottom: 75px !important;
padding-left: 10px !important;
padding-right: 10px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.gnozis-subpage-viewport,
.gnozis-profile-viewport,
.gnozis-messages-viewport {
padding-top: 0 !important;
padding-bottom: 75px !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 0 !important;
width: 100% !important;
}
.gnozis-layout-3col,
.gnozis-stream-layout {
margin-top: 0 !important;
padding-top: 0 !important;
}
.stream-composer {
margin-top: 0 !important;
margin-bottom: 12px !important;
} .gnozis-layout-3col,
.gnozis-stream-layout,
.gnozis-feed-column,
.gnozis-col-center,
.gnozis-card,
.gnozis-post-card,
.stream-composer,
.profile-settings-card,
.gnozis-product-summary,
.gnozis-product-gallery-wrap,
.gnozis-subpage-viewport,
.gnozis-profile-viewport,
.gnozis-messages-viewport,
.checkout-step-card,
.checkout-summary-card,
.checkout-coupon-card,
.filter-card,
.member-card,
.group-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
} .profile-tabs-nav {
display: flex !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
white-space: nowrap !important;
width: 100% !important;
max-width: 100% !important;
padding: 5px !important;
gap: 6px !important;
}
.profile-tabs-nav::-webkit-scrollbar {
display: none !important;
}
.profile-tab-btn {
flex: 0 0 auto !important;
padding: 8px 14px !important;
font-size: 0.82rem !important;
white-space: nowrap !important;
} .gnozis-messages-viewport {
padding: 10px 0 80px !important;
width: 100% !important;
}
.gnozis-messages-card {
border-radius: 16px !important;
height: auto !important;
min-height: 500px !important;
width: 100% !important;
} .form-grid-2col,
.gnozis-card-input-grid,
.settings-form-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
} .products-grid,
.woocommerce ul.products,
.gnozis-shop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
} .members-grid-container,
.groups-grid-container,
.groups-catalog-grid,
.members-catalog-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
} .comment-item {
width: 100% !important;
min-width: 0 !important;
}
.comment-bubble {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.comment-text {
min-width: 0 !important;
word-break: break-word !important;
} .woocommerce-table,
.shop_table,
.shop_table_responsive {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
} .fb-topbar-center {
display: none !important;
}
.gnozis-mobile-bottom-nav {
display: flex !important;
visibility: visible !important;
pointer-events: auto !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
width: 100% !important;
height: 58px !important;
height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
background: rgba(11, 16, 27, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
border-bottom: none !important;
justify-content: space-around !important;
align-items: center !important;
padding-left: 4px !important;
padding-right: 4px !important;
z-index: 999999 !important;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
user-select: none !important;
}
.mobile-bottom-tab {
flex: 1 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
color: #64748b !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
padding: 4px 0 !important;
}
.mobile-bottom-tab.active {
color: #cbd5e1 !important;
}
.mobile-bottom-tab:hover {
color: #94a3b8 !important;
}
.mobile-tab-icon-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.mobile-tab-icon-wrap svg {
width: 22px !important;
height: 22px !important;
stroke: currentColor !important;
}
.mobile-bottom-tab.active .mobile-tab-icon-wrap svg {
stroke: #cbd5e1 !important;
filter: drop-shadow(0 0 4px rgba(203, 213, 225, 0.25)) !important;
}
.mobile-tab-label {
font-size: 0.68rem !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
.mobile-bottom-tab.active .mobile-tab-label {
font-weight: 600 !important;
color: #cbd5e1 !important;
}
} @media (max-width: 380px) {
.gnozis-page-shell {
padding-left: 6px !important;
padding-right: 6px !important;
}
.products-grid,
.woocommerce ul.products,
.gnozis-shop-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.gnozis-post-card {
padding: 10px 10px !important;
}
.author-name {
max-width: 110px !important;
}
} .btn-admin-action-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.3);
color: #38bdf8;
border-radius: 9999px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}
.btn-admin-action-pill:hover {
background: rgba(56, 189, 248, 0.2);
border-color: #38bdf8;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(56, 189, 248, 0.2);
}
.btn-admin-action-pill.is-paused {
background: rgba(245, 158, 11, 0.15);
border-color: rgba(245, 158, 11, 0.4);
color: #fbbf24;
}
.btn-admin-action-pill.item-danger {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: #f87171;
}
.btn-admin-action-pill.item-danger:hover {
background: rgba(239, 68, 68, 0.22);
border-color: #ef4444;
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}
.btn-admin-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--gnozis-text-muted);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.88rem;
}
.btn-admin-icon-btn:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
transform: scale(1.05);
}
.group-badge-paused {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 9999px;
background: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.4);
color: #fbbf24;
font-size: 0.75rem;
font-weight: 600;
}
.group-paused-notice-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.25);
border-radius: var(--gnozis-radius-lg, 14px);
margin-bottom: 20px;
}
.group-paused-notice-card .paused-notice-icon {
font-size: 1.6rem;
line-height: 1;
}
.group-paused-notice-card strong {
display: block;
color: #fbbf24;
font-size: 0.95rem;
margin-bottom: 4px;
}
.group-paused-notice-card p {
margin: 0;
font-size: 0.85rem;
color: var(--gnozis-text-muted, #94a3b8);
line-height: 1.4;
}
.comment-author-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.comment-author-meta-left {
display: flex;
align-items: center;
gap: 8px;
}
.comment-actions-btns {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: auto;
}
.btn-comment-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
background: transparent;
border: none;
color: var(--gnozis-text-muted, #94a3b8);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
opacity: 0.65;
}
.comment-item:hover .btn-comment-action {
opacity: 1;
}
.btn-comment-action.btn-edit-comment:hover {
color: #38bdf8;
background: rgba(56, 189, 248, 0.15);
transform: scale(1.1);
}
.btn-comment-action.btn-admin-delete-comment:hover {
color: #ef4444;
background: rgba(239, 68, 68, 0.15);
transform: scale(1.1);
} .comment-inline-editor {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 6px;
width: 100%;
}
.comment-edit-textarea {
width: 100%;
min-height: 52px;
padding: 7px 10px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 8px;
color: #f1f5f9;
font-size: 0.86rem;
line-height: 1.4;
resize: vertical;
font-family: inherit;
outline: none;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.12);
}
.comment-edit-textarea:focus {
border-color: #38bdf8;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}
.comment-edit-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.btn-comment-edit-cancel,
.btn-comment-edit-save {
padding: 4px 10px;
border-radius: 6px;
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.btn-comment-edit-cancel {
background: rgba(255, 255, 255, 0.06);
color: #94a3b8;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-comment-edit-cancel:hover {
background: rgba(255, 255, 255, 0.12);
color: #f1f5f9;
}
.btn-comment-edit-save {
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #ffffff;
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}
.btn-comment-edit-save:hover {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
.rank-banned {
background: rgba(239, 68, 68, 0.18) !important;
border: 1px solid rgba(239, 68, 68, 0.4) !important;
color: #f87171 !important;
font-weight: 700;
}
.member-card.is-banned-card {
opacity: 0.65;
border-color: rgba(239, 68, 68, 0.25);
} .gnozis-shop-hero-banner {
position: relative;
border-radius: var(--gnozis-radius-xl, 24px);
overflow: hidden;
margin-bottom: 32px;
border: 1px solid rgba(220, 38, 38, 0.35);
background: radial-gradient(ellipse at 85% 50%, rgba(185, 28, 28, 0.18) 0%, rgba(15, 23, 42, 0.95) 60%, #06070b 100%), #06070b;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(220, 38, 38, 0.18);
min-height: 290px;
}
.shop-hero-bg-wrapper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.shop-hero-ambient-glow {
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
}
.shop-hero-glow-left {
top: -30%;
left: 10%;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(220, 38, 38, 0.18) 0%, transparent 70%);
}
.shop-hero-glow-right {
top: 10%;
right: 5%;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 70%);
}
.shop-hero-stars-overlay {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 28px 28px;
opacity: 0.35;
}
.shop-hero-inner {
position: relative;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 32px 40px;
}
.shop-hero-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 680px;
}
.shop-hero-sigil-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 14px;
background: rgba(220, 38, 38, 0.15);
border: 1px solid rgba(220, 38, 38, 0.4);
border-radius: 9999px;
width: fit-content;
box-shadow: 0 0 16px rgba(220, 38, 38, 0.25);
}
.shop-hero-sigil-icon {
color: #f87171;
font-size: 0.82rem;
letter-spacing: 2px;
}
.shop-hero-tag {
color: #fca5a5;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.shop-hero-title {
font-size: 2.6rem;
font-weight: 800;
color: #ffffff;
line-height: 1.15;
margin: 0;
letter-spacing: -0.02em;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 24px rgba(220, 38, 38, 0.35);
}
.shop-hero-subtitle {
font-size: 1.05rem;
line-height: 1.55;
color: #cbd5e1;
margin: 0;
max-width: 580px;
}
.shop-hero-meta-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 6px;
}
.shop-hero-meta-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 15px;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
font-size: 0.84rem;
color: #e2e8f0;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: all 0.25s ease;
}
.shop-hero-meta-pill:hover {
border-color: rgba(239, 68, 68, 0.4);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.2);
}
.shop-hero-meta-pill .pill-icon {
font-size: 0.95rem;
} .shop-hero-visual-side {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.shop-hero-art-card {
position: relative;
width: 230px;
height: 230px;
border-radius: 20px;
overflow: hidden;
background: #000000;
border: 2px solid rgba(220, 38, 38, 0.45);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 35px rgba(220, 38, 38, 0.35);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.shop-hero-art-card:hover {
transform: scale(1.04) rotate(0.5deg);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 45px rgba(239, 68, 68, 0.5);
border-color: rgba(239, 68, 68, 0.8);
}
.shop-hero-art-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(1.05) contrast(1.1);
display: block;
transition: transform 0.6s ease;
}
.shop-hero-art-card:hover .shop-hero-art-img {
transform: scale(1.06);
}
.shop-hero-art-border-glow {
position: absolute;
inset: 0;
box-shadow: inset 0 0 20px rgba(220, 38, 38, 0.4);
pointer-events: none;
z-index: 2;
border-radius: 18px;
} .shop-hero-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
flex-wrap: wrap;
}
.btn-edit-shop-banner {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 6px 14px !important;
background: rgba(15, 23, 42, 0.85) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(239, 68, 68, 0.5) !important;
border-radius: 20px !important;
color: #fca5a5 !important;
font-family: inherit !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
line-height: 1 !important;
cursor: pointer !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(220, 38, 38, 0.25) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
white-space: nowrap !important;
outline: none !important;
}
.btn-edit-shop-banner:hover {
background: rgba(220, 38, 38, 0.25) !important;
border-color: #ef4444 !important;
color: #ffffff !important;
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
transform: translateY(-1px) !important;
}
.btn-edit-shop-banner svg {
color: #ef4444 !important;
flex-shrink: 0 !important;
}
.is-admin-art-card {
position: relative;
cursor: pointer;
}
.btn-shop-art-edit-overlay {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: rgba(10, 10, 15, 0.88);
border: 1px solid rgba(220, 38, 38, 0.45);
border-radius: 16px;
color: #fca5a5;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.25s ease;
opacity: 0.85;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
font-family: inherit;
white-space: nowrap;
}
.shop-hero-art-card:hover .btn-shop-art-edit-overlay {
opacity: 1;
background: rgba(220, 38, 38, 0.25);
border-color: #ef4444;
color: #fff;
transform: translateX(-50%) translateY(-2px);
box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
} .gnozis-modal-shop-banner {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
}
.gnozis-modal-shop-banner.open,
.gnozis-modal-shop-banner.active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.gnozis-modal-shop-banner .gnozis-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(4, 7, 14, 0.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 1;
}
.gnozis-modal-dialog.gnozis-modal-shop-banner-dialog {
position: relative;
z-index: 2;
background: radial-gradient(130% 130% at 50% 0%, #16121e 0%, #0a0710 100%);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 20px;
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow-y: auto;
padding: 30px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(220, 38, 38, 0.25);
transform: translateY(20px) scale(0.97);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
scrollbar-width: thin;
scrollbar-color: rgba(239, 68, 68, 0.3) transparent;
}
.gnozis-modal-shop-banner.open .gnozis-modal-dialog,
.gnozis-modal-shop-banner.active .gnozis-modal-dialog {
transform: translateY(0) scale(1);
}
.modal-banner-image-upload-wrap {
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
background: rgba(10, 8, 15, 0.7);
border: 1px dashed rgba(239, 68, 68, 0.35);
border-radius: 12px;
}
.banner-img-preview-box {
width: 76px;
height: 76px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid rgba(239, 68, 68, 0.4);
background: #000;
}
.banner-img-preview-box img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.banner-file-input-col {
display: flex;
flex-direction: column;
gap: 8px;
flex-grow: 1;
}
.btn-upload-banner-file {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 10px;
color: #fca5a5;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
width: fit-content;
transition: all 0.2s ease;
font-family: inherit;
}
.btn-upload-banner-file:hover {
background: rgba(239, 68, 68, 0.25);
border-color: #ef4444;
color: #ffffff;
}
.banner-filename-display {
font-size: 0.76rem;
color: var(--text-muted, #94a3b8);
word-break: break-all;
}
@media (max-width: 900px) {
.shop-hero-inner {
padding: 24px 24px;
gap: 20px;
}
.shop-hero-art-card {
width: 180px;
height: 180px;
border-radius: 16px;
}
.shop-hero-title {
font-size: 2rem;
}
.shop-hero-subtitle {
font-size: 0.95rem;
}
}
@media (max-width: 680px) {
.shop-hero-inner {
flex-direction: column-reverse;
align-items: flex-start;
padding: 20px 18px;
}
.shop-hero-visual-side {
width: 100%;
justify-content: center;
margin-bottom: 4px;
}
.shop-hero-art-card {
width: 190px;
height: 190px;
}
.shop-hero-title {
font-size: 1.7rem;
}
.shop-hero-meta-pill {
padding: 5px 10px;
font-size: 0.78rem;
}
.shop-hero-top-row {
gap: 8px;
}
} .gnozis-mention-dropdown {
position: absolute;
z-index: 99999;
background: rgba(10, 15, 29, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.2);
max-height: 280px;
overflow-y: auto;
width: 320px;
padding: 8px;
display: none;
}
.gnozis-mention-dropdown.is-active {
display: block;
animation: gnozisFadeSlideDown 0.18s ease-out;
}
.gnozis-mention-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
color: #e2e8f0;
user-select: none;
}
.gnozis-mention-item:hover,
.gnozis-mention-item.is-selected {
background: rgba(56, 189, 248, 0.16);
color: #ffffff;
transform: translateX(2px);
}
.gnozis-mention-item.is-mention-all {
background: rgba(168, 85, 247, 0.12);
border: 1px solid rgba(168, 85, 247, 0.28);
margin-bottom: 6px;
}
.gnozis-mention-item.is-mention-all:hover,
.gnozis-mention-item.is-mention-all.is-selected {
background: rgba(168, 85, 247, 0.22);
border-color: rgba(168, 85, 247, 0.5);
box-shadow: 0 0 15px rgba(168, 85, 247, 0.25);
}
.gnozis-mention-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.15);
flex-shrink: 0;
}
.gnozis-mention-avatar-wrap.is-all {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #a855f7, #6366f1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}
.gnozis-mention-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.gnozis-mention-name {
font-size: 0.88rem;
font-weight: 600;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gnozis-mention-handle {
font-size: 0.74rem;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gnozis-mention-special-badge {
font-size: 0.68rem;
padding: 2px 7px;
border-radius: 6px;
background: rgba(168, 85, 247, 0.2);
color: #d8b4fe;
border: 1px solid rgba(168, 85, 247, 0.4);
font-weight: 700;
margin-left: auto;
flex-shrink: 0;
}
.gnozis-mention-special-badge.badge-global-admin {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(239, 68, 68, 0.25));
color: #fde047;
border: 1px solid rgba(234, 179, 8, 0.6);
box-shadow: 0 0 10px rgba(234, 179, 8, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gnozis-mention-avatar-wrap.is-all.is-global {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(249, 115, 22, 0.25));
border: 1px solid rgba(234, 179, 8, 0.5);
}
.gnozis-mention-role-pill {
font-size: 0.68rem;
padding: 2px 6px;
border-radius: 4px;
background: rgba(56, 189, 248, 0.15);
color: #7dd3fc;
border: 1px solid rgba(56, 189, 248, 0.3);
margin-left: auto;
flex-shrink: 0;
}
.gnozis-mention-tag {
color: #38bdf8;
font-weight: 600;
background: none;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
text-decoration: none;
transition: color 0.15s ease;
display: inline;
}
.gnozis-mention-tag:hover {
background: none;
color: #7dd3fc;
text-decoration: underline;
}
.gnozis-mention-tag.mention-all-tag {
color: #c084fc;
background: none;
border: none;
box-shadow: none;
font-weight: 600;
}
.gnozis-mention-tag.mention-all-tag:hover {
background: none;
color: #e9d5ff;
text-decoration: underline;
}
.gnozis-mention-tag.mention-global-tag {
color: #fde047;
background: none;
border: none;
box-shadow: none;
font-weight: 700;
}
.gnozis-mention-tag.mention-global-tag:hover {
background: none;
color: #fef08a;
box-shadow: none;
text-decoration: underline;
} .gnozis-modal-backdrop {
position: fixed;
inset: 0;
z-index: 999998;
background: rgba(4, 7, 13, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
animation: gnozisFadeIn 0.2s ease-out;
}
.gnozis-modal-backdrop.is-open {
display: flex !important;
}
.gnozis-modal-box {
position: relative;
background: linear-gradient(145deg, #0d131f 0%, #080c14 100%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.12);
width: 100%;
max-width: 520px;
overflow: hidden;
animation: gnozisModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnozis-modal-header {
padding: 20px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.02);
}
.gnozis-modal-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.gnozis-modal-title-wrap .modal-icon {
font-size: 1.3rem;
}
.gnozis-modal-title {
font-size: 1.15rem;
font-weight: 700;
color: #f1f5f9;
margin: 0;
}
.gnozis-modal-close {
background: transparent;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 6px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.gnozis-modal-close:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
}
.gnozis-modal-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 18px;
max-height: 75vh;
overflow-y: auto;
}
.mod-target-user-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}
.mod-target-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(56, 189, 248, 0.4);
}
.mod-target-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.mod-target-name {
font-size: 0.96rem;
font-weight: 700;
color: #ffffff;
}
.mod-target-badges {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.74rem;
}
.mod-target-status-badge {
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
}
.mod-target-status-badge.status-clean {
background: rgba(16, 185, 129, 0.15);
color: #34d399;
}
.mod-target-status-badge.status-warning {
background: rgba(245, 158, 11, 0.18);
color: #fbbf24;
}
.mod-target-status-badge.status-banned {
background: rgba(239, 68, 68, 0.18);
color: #f87171;
}
.mod-form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.mod-form-label {
font-size: 0.82rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.mod-action-options-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.mod-action-radio-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.mod-action-radio-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(56, 189, 248, 0.4);
}
.mod-action-radio-card input[type="radio"] {
display: none;
}
.mod-action-radio-card.is-checked {
background: rgba(56, 189, 248, 0.12);
border-color: #38bdf8;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}
.mod-action-radio-card.is-checked.action-danger {
background: rgba(239, 68, 68, 0.15);
border-color: #ef4444;
box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}
.mod-radio-header {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.88rem;
font-weight: 600;
color: #f1f5f9;
}
.mod-radio-desc {
font-size: 0.74rem;
color: #94a3b8;
line-height: 1.35;
}
.mod-restrictions-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
.mod-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.84rem;
color: #cbd5e1;
cursor: pointer;
}
.mod-checkbox-label input[type="checkbox"] {
accent-color: #38bdf8;
width: 16px;
height: 16px;
}
.mod-select,
.mod-textarea {
width: 100%;
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 9px 12px;
color: #ffffff;
font-size: 0.88rem;
outline: none;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.mod-select:focus,
.mod-textarea:focus {
border-color: #38bdf8;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}
.mod-textarea {
min-height: 70px;
resize: vertical;
}
.gnozis-modal-footer {
padding: 18px 24px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
background: rgba(255, 255, 255, 0.02);
}
.btn-mod-cancel {
padding: 8px 18px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-mod-cancel:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.btn-mod-submit {
padding: 8px 20px;
border-radius: 8px;
background: linear-gradient(135deg, #0284c7, #0369a1);
border: none;
color: #ffffff;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}
.btn-mod-submit:hover {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(14, 165, 233, 0.45);
}
.btn-mod-submit.btn-danger {
background: linear-gradient(135deg, #dc2626, #b91c1c);
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}
.btn-mod-submit.btn-danger:hover {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
} @keyframes gnozisFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes gnozisModalPop {
from { opacity: 0; transform: scale(0.94) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes gnozisFadeSlideDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
} .gnozis-mention-dropdown {
position: fixed;
background: rgba(15, 23, 42, 0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(56, 189, 248, 0.28);
border-radius: 12px;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(56, 189, 248, 0.12);
padding: 6px;
max-height: 260px;
overflow-y: auto;
z-index: 999999;
display: flex;
flex-direction: column;
gap: 2px;
animation: gnozisFadeSlideDown 0.15s ease-out;
}
.gnozis-mention-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
user-select: none;
}
.gnozis-mention-item:hover,
.gnozis-mention-item.is-selected {
background: rgba(56, 189, 248, 0.14);
border: 1px solid rgba(56, 189, 248, 0.3);
}
.gnozis-mention-item.is-mention-all {
background: linear-gradient(90deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
border: 1px solid rgba(245, 158, 11, 0.25);
}
.gnozis-mention-item.is-mention-all:hover,
.gnozis-mention-item.is-mention-all.is-selected {
background: linear-gradient(90deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.1));
border-color: rgba(245, 158, 11, 0.5);
}
.gnozis-mention-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.15);
flex-shrink: 0;
}
.gnozis-mention-avatar-wrap.is-all {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(245, 158, 11, 0.2);
border: 1px solid rgba(245, 158, 11, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.gnozis-mention-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.gnozis-mention-name {
font-size: 0.85rem;
font-weight: 600;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gnozis-mention-handle {
font-size: 0.73rem;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gnozis-mention-role-pill {
font-size: 0.65rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 6px;
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.3);
text-transform: uppercase;
letter-spacing: 0.03em;
flex-shrink: 0;
}
.gnozis-mention-special-badge {
font-size: 0.65rem;
font-weight: 800;
padding: 2px 7px;
border-radius: 6px;
background: rgba(245, 158, 11, 0.2);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.4);
letter-spacing: 0.05em;
flex-shrink: 0;
} .gnozis-moderation-modal .moderation-modal-dialog {
max-width: 540px !important;
max-height: 90vh;
overflow-y: auto;
background: #0d1527 !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
border-radius: 16px !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(56, 189, 248, 0.15) !important;
padding: 24px !important;
}
.gnozis-moderation-modal .gnozis-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 18px;
}
.gnozis-moderation-modal .modal-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.gnozis-moderation-modal .modal-sigil {
font-size: 1.3rem;
}
.gnozis-moderation-modal .modal-title {
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
margin: 0;
} .mod-user-info-card {
display: flex;
align-items: center;
gap: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 18px;
}
.mod-user-avatar-wrap {
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid rgba(56, 189, 248, 0.4);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}
.mod-user-avatar-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mod-user-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.mod-user-name {
font-size: 0.98rem;
font-weight: 700;
color: #f8fafc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mod-user-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
} .gnozis-moderation-modal .form-label-title {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #94a3b8;
margin-bottom: 8px;
} .mod-actions-grid {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.gnozis-moderation-modal .mod-action-card,
.mod-actions-grid .mod-action-card,
.gnozis-modal .form-group label.mod-action-card {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
padding: 11px 14px !important;
background: rgba(15, 23, 42, 0.7);
border: 1.5px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
position: relative !important;
user-select: none !important;
box-sizing: border-box !important;
width: 100% !important;
margin: 0 !important;
}
.gnozis-moderation-modal .mod-action-card[style*="display: none"],
.mod-actions-grid .mod-action-card[style*="display: none"] {
display: none !important;
}
.mod-action-card:hover {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(56, 189, 248, 0.35);
transform: translateY(-1px);
} .mod-action-card.active,
.mod-action-card:has(input[type="radio"]:checked) {
background: rgba(14, 165, 233, 0.12) !important;
border-color: #38bdf8 !important;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.22) !important;
} .mod-action-card.item-danger-card:hover {
border-color: rgba(239, 68, 68, 0.4);
}
.mod-action-card.item-danger-card.active,
.mod-action-card.item-danger-card:has(input[type="radio"]:checked) {
background: rgba(239, 68, 68, 0.14) !important;
border-color: #ef4444 !important;
box-shadow: 0 0 18px rgba(239, 68, 68, 0.3) !important;
} .mod-action-card.item-success-card:hover {
border-color: rgba(16, 185, 129, 0.4);
}
.mod-action-card.item-success-card.active,
.mod-action-card.item-success-card:has(input[type="radio"]:checked) {
background: rgba(16, 185, 129, 0.14) !important;
border-color: #10b981 !important;
box-shadow: 0 0 18px rgba(16, 185, 129, 0.3) !important;
} .mod-action-card.item-moderator-card:hover {
border-color: rgba(56, 189, 248, 0.5);
}
.mod-action-card.item-moderator-card.active,
.mod-action-card.item-moderator-card:has(input[type="radio"]:checked) {
background: rgba(56, 189, 248, 0.15) !important;
border-color: #38bdf8 !important;
box-shadow: 0 0 18px rgba(56, 189, 248, 0.35) !important;
} .mod-action-card.item-moderator-revoke-card:hover {
border-color: rgba(245, 158, 11, 0.5);
}
.mod-action-card.item-moderator-revoke-card.active,
.mod-action-card.item-moderator-revoke-card:has(input[type="radio"]:checked) {
background: rgba(245, 158, 11, 0.14) !important;
border-color: #f59e0b !important;
box-shadow: 0 0 18px rgba(245, 158, 11, 0.35) !important;
}
.mod-action-card.item-moderator-revoke-card .mod-radio-input {
accent-color: #f59e0b !important;
filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.4));
} .mod-radio-input {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
accent-color: #38bdf8 !important;
cursor: pointer !important;
margin: 0 !important;
flex-shrink: 0 !important;
filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.4));
}
.mod-action-card.item-danger-card .mod-radio-input {
accent-color: #ef4444 !important;
filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.4));
}
.mod-action-card.item-success-card .mod-radio-input {
accent-color: #10b981 !important;
filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.4));
}
.mod-card-content {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 12px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.mod-act-icon {
font-size: 1.25rem !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
.mod-act-info {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.mod-act-info strong {
display: block !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
color: #f1f5f9 !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.mod-act-info p {
font-size: 0.76rem !important;
color: #94a3b8 !important;
margin: 2px 0 0 !important;
line-height: 1.3 !important;
white-space: normal !important;
word-break: break-word !important;
} .mod-checkboxes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 8px;
margin-bottom: 16px;
}
@media (max-width: 480px) {
.mod-checkboxes-grid {
grid-template-columns: 1fr;
}
}
.mod-checkbox-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(15, 23, 42, 0.8);
border: 1.5px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.mod-checkbox-item:hover {
background: rgba(30, 41, 59, 0.9);
border-color: rgba(56, 189, 248, 0.45);
transform: translateY(-1px);
}
.mod-checkbox-item:has(input[type="checkbox"]:checked) {
background: rgba(56, 189, 248, 0.16) !important;
border-color: #38bdf8 !important;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
}
.mod-checkbox-item:has(input[type="checkbox"]:checked) span {
color: #ffffff !important;
font-weight: 600;
} .mod-checkbox-item input[type="checkbox"] {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
accent-color: #38bdf8 !important;
cursor: pointer !important;
margin: 0 !important;
border-radius: 6px !important;
flex-shrink: 0 !important;
filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.5));
}
.mod-checkbox-item span {
font-size: 0.84rem;
color: #cbd5e1;
line-height: 1.3;
transition: color 0.15s ease;
} .gnozis-moderation-modal .gnozis-select-modal,
.gnozis-moderation-modal .gnozis-textarea-modal {
width: 100%;
background: rgba(15, 23, 42, 0.85);
border: 1.5px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: #f1f5f9;
padding: 10px 14px;
font-size: 0.88rem;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.gnozis-moderation-modal .gnozis-select-modal:focus,
.gnozis-moderation-modal .gnozis-textarea-modal:focus {
border-color: #38bdf8;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.3);
}
.gnozis-moderation-modal .gnozis-textarea-modal {
resize: vertical;
min-height: 80px;
}  .preview-media-inner.is-audio {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85));
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 10px;
padding: 10px 42px 10px 14px;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-width: 210px;
max-width: 290px;
height: 56px;
box-sizing: border-box;
position: relative;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.preview-media-inner.is-audio .btn-remove-media-item {
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: rgba(239, 68, 68, 0.25);
border: 1px solid rgba(239, 68, 68, 0.5);
color: #fca5a5;
font-size: 11px;
font-weight: 700;
}
.preview-media-inner.is-audio .btn-remove-media-item:hover {
background: #ef4444;
border-color: #ef4444;
color: #ffffff;
transform: translateY(-50%) scale(1.15);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}
.preview-audio-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.preview-audio-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.preview-audio-name {
font-size: 0.82rem;
font-weight: 600;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-audio-tag {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #38bdf8;
} .post-audio-list,
.post-media-audios {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 14px;
margin-bottom: 8px;
width: 100%;
}
.post-media-audios > .gnozis-audio-player + .gnozis-audio-player,
.post-audio-list > .gnozis-audio-player + .gnozis-audio-player {
margin-top: 12px;
}
@supports (gap: 12px) {
.post-media-audios > .gnozis-audio-player + .gnozis-audio-player,
.post-audio-list > .gnozis-audio-player + .gnozis-audio-player {
margin-top: 0;
}
} .gnozis-audio-player {
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.88) 100%);
border: 1px solid rgba(56, 189, 248, 0.22);
border-radius: 14px;
padding: 12px 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
width: 100%;
box-sizing: border-box;
}
.gnozis-audio-player:hover,
.gnozis-audio-player.is-playing {
border-color: rgba(56, 189, 248, 0.5);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.15);
} .btn-audio-play-pause {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
border: 1px solid rgba(56, 189, 248, 0.5);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
flex-shrink: 0;
padding: 0;
outline: none;
}
.btn-audio-play-pause:hover {
transform: scale(1.08);
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.55);
}
.btn-audio-play-pause:active {
transform: scale(0.95);
} .gnozis-audio-player.is-playing .btn-audio-play-pause {
background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
box-shadow: 0 0 18px rgba(14, 165, 233, 0.65), 0 4px 14px rgba(2, 132, 199, 0.4);
border-color: #38bdf8;
animation: audioPlayPulse 2.2s ease-in-out infinite;
}
@keyframes audioPlayPulse {
0%, 100% { box-shadow: 0 0 14px rgba(14, 165, 233, 0.5), 0 4px 12px rgba(2, 132, 199, 0.4); }
50% { box-shadow: 0 0 24px rgba(56, 189, 248, 0.85), 0 4px 16px rgba(2, 132, 199, 0.6); }
}
.audio-icon-play,
.audio-icon-pause {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
} .audio-player-body,
.audio-track-details {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.audio-header-row,
.audio-track-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.audio-title-wrap {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
flex: 1;
}
.audio-sigil-badge {
font-size: 1rem;
flex-shrink: 0;
}
.audio-title,
.audio-track-title {
font-size: 0.92rem;
font-weight: 600;
color: #f8fafc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
.audio-meta-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.audio-size-pill,
.audio-track-size {
font-size: 0.72rem;
color: #94a3b8;
background: rgba(148, 163, 184, 0.12);
padding: 2px 7px;
border-radius: 6px;
font-weight: 500;
flex-shrink: 0;
}
.audio-time-counter,
.audio-time-row {
font-size: 0.74rem;
color: #38bdf8;
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 600;
letter-spacing: 0.5px;
white-space: nowrap;
}
.audio-time-total {
color: #94a3b8;
font-weight: 400;
}
.audio-waveform-row {
display: flex;
align-items: center;
gap: 10px;
}
.audio-progress-bar-wrap,
.audio-progress-container {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
}
.audio-progress-bar-rail {
position: relative;
width: 100%;
height: 6px;
background: rgba(51, 65, 85, 0.6);
border-radius: 999px;
cursor: pointer;
overflow: visible;
}
.audio-progress-bar-rail:hover {
height: 8px;
}
.audio-progress-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%);
border-radius: 999px;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
pointer-events: none;
transition: width 0.05s linear;
}
.audio-progress-bar-pin {
position: absolute;
top: 50%;
left: 0%;
width: 13px;
height: 13px;
background: #ffffff;
border: 2.5px solid #38bdf8;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
pointer-events: none;
transition: left 0.05s linear;
} .audio-player-volume-wrap {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding-left: 8px;
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-audio-volume {
background: transparent;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.btn-audio-volume:hover {
color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
}
.audio-volume-slider-wrap {
width: 65px;
display: flex;
align-items: center;
}
.audio-volume-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: rgba(51, 65, 85, 0.8);
border-radius: 4px;
outline: none;
cursor: pointer;
transition: background 0.2s;
}
.audio-volume-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
cursor: pointer;
transition: transform 0.15s ease;
}
.audio-volume-range::-webkit-slider-thumb:hover {
transform: scale(1.25);
}
.audio-volume-range::-moz-range-thumb {
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
cursor: pointer;
} .soundwave-anim-bars {
display: flex;
align-items: center;
gap: 3px;
height: 14px;
flex-shrink: 0;
}
.soundwave-anim-bars span {
width: 2.5px;
height: 4px;
background: rgba(56, 189, 248, 0.35);
border-radius: 2px;
transition: height 0.2s ease, background-color 0.2s ease;
}
.gnozis-audio-player.is-playing .soundwave-anim-bars span {
background: #38bdf8;
animation: soundwaveBars 1.2s ease-in-out infinite alternate;
}
.soundwave-anim-bars span:nth-child(1) { animation-delay: 0.0s; }
.soundwave-anim-bars span:nth-child(2) { animation-delay: 0.2s; }
.soundwave-anim-bars span:nth-child(3) { animation-delay: 0.4s; }
.soundwave-anim-bars span:nth-child(4) { animation-delay: 0.1s; }
.soundwave-anim-bars span:nth-child(5) { animation-delay: 0.35s; }
.soundwave-anim-bars span:nth-child(6) { animation-delay: 0.15s; }
.soundwave-anim-bars span:nth-child(7) { animation-delay: 0.45s; }
.soundwave-anim-bars span:nth-child(8) { animation-delay: 0.25s; }
.soundwave-anim-bars span:nth-child(9) { animation-delay: 0.5s; }
@keyframes soundwaveBars {
0% { height: 4px; }
50% { height: 14px; }
100% { height: 6px; }
} .chat-audio-player {
display: flex;
align-items: center;
gap: 10px;
background: rgba(15, 23, 42, 0.65);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 12px;
padding: 8px 12px;
margin: 6px 0;
min-width: 220px;
max-width: 320px;
box-sizing: border-box;
transition: border-color 0.2s;
}
.msg-bubble-wrap.outgoing .chat-audio-player {
background: rgba(2, 132, 199, 0.18);
border-color: rgba(56, 189, 248, 0.4);
}
.chat-audio-player .btn-audio-play-pause {
width: 34px;
height: 34px;
min-width: 34px;
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}
.chat-audio-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.chat-audio-title {
font-size: 0.8rem;
font-weight: 600;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-audio-scrubber-rail {
position: relative;
height: 4px;
background: rgba(255, 255, 255, 0.15);
border-radius: 999px;
cursor: pointer;
}
.chat-audio-scrubber-fill {
height: 100%;
background: #38bdf8;
border-radius: 999px;
pointer-events: none;
transition: width 0.08s linear;
}
.chat-audio-duration {
font-size: 0.7rem;
color: #94a3b8;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
} .btn-chat-attach-audio {
background: transparent;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 8px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s, background-color 0.2s;
outline: none;
}
.btn-chat-attach-audio:hover {
color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
}
.chat-attached-audio-preview {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(56, 189, 248, 0.3);
border-radius: 10px;
padding: 6px 12px;
margin: 8px 12px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.chat-audio-pill {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: #38bdf8;
font-weight: 500;
min-width: 0;
}
.chat-audio-pill span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-cancel-chat-audio {
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
font-size: 0.9rem;
padding: 2px 6px;
border-radius: 4px;
transition: color 0.15s;
}
.btn-cancel-chat-audio:hover {
color: #ef4444;
} [data-card-url],
.filterable-group-card,
.filterable-member-card,
.group-card {
cursor: pointer;
}
[data-card-url] a,
[data-card-url] button,
[data-card-url] input,
.filterable-group-card button,
.filterable-group-card a,
.filterable-member-card button,
.filterable-member-card a {
cursor: pointer;
} .composer-input-wrap {
position: relative;
flex-grow: 1;
display: flex;
align-items: flex-start;
width: 100%;
}
.composer-input-wrap .composer-textarea {
width: 100%;
padding-right: 42px;
}
.chat-input-wrap {
position: relative;
flex: 1;
display: flex;
align-items: center;
width: 100%;
}
.chat-input-wrap .chat-input-field {
width: 100%;
padding-right: 44px;
}
.mini-chat-input-wrap {
position: relative;
flex: 1;
display: flex;
align-items: center;
width: 100%;
}
.mini-chat-input-wrap .mini-chat-input {
width: 100%;
padding-right: 38px;
} .gnozis-emoji-btn {
background: transparent;
border: none;
cursor: pointer;
color: var(--gnozis-text-muted, #7898B8);
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
padding: 0;
transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
outline: none;
flex-shrink: 0;
z-index: 3;
}
.composer-input-wrap .gnozis-emoji-btn {
position: absolute;
right: 8px;
top: 6px;
}
.chat-input-wrap .gnozis-emoji-btn,
.mini-chat-input-wrap .gnozis-emoji-btn,
.comment-input-wrap .gnozis-emoji-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
}
.gnozis-emoji-btn:hover,
.gnozis-emoji-btn.is-active {
color: #FFFFFF;
background: rgba(96, 120, 144, 0.22);
}
.chat-input-wrap .gnozis-emoji-btn:hover,
.mini-chat-input-wrap .gnozis-emoji-btn:hover,
.comment-input-wrap .gnozis-emoji-btn:hover,
.chat-input-wrap .gnozis-emoji-btn.is-active,
.mini-chat-input-wrap .gnozis-emoji-btn.is-active,
.comment-input-wrap .gnozis-emoji-btn.is-active {
transform: translateY(-50%) scale(1.1);
}
.composer-input-wrap .gnozis-emoji-btn:hover,
.composer-input-wrap .gnozis-emoji-btn.is-active {
transform: scale(1.1);
}
.gnozis-emoji-btn svg {
display: block;
pointer-events: none;
} .gnozis-emoji-popover {
position: absolute;
z-index: 99999;
width: 328px;
max-width: calc(100vw - 28px);
height: 330px;
background: #142030;
background: rgba(20, 32, 48, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-card, #2A3B4C);
border-radius: 14px;
box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.85), 0 0 1px 1px rgba(96, 120, 144, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
animation: gnozisEmojiFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
user-select: none;
}
@keyframes gnozisEmojiFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(6px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.gnozis-emoji-tabs {
display: flex;
align-items: center;
justify-content: space-around;
padding: 6px 8px;
border-bottom: 1px solid rgba(96, 120, 144, 0.15);
background: rgba(10, 18, 28, 0.75);
flex-shrink: 0;
}
.gnozis-emoji-tab {
background: none;
border: none;
font-size: 1.15rem;
line-height: 1;
padding: 5px 8px;
border-radius: 8px;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
outline: none;
}
.gnozis-emoji-tab:hover,
.gnozis-emoji-tab.active {
opacity: 1;
background: rgba(96, 120, 144, 0.2);
transform: scale(1.12);
}
.gnozis-emoji-body {
flex: 1;
overflow-y: auto;
padding: 8px 10px 12px;
scrollbar-width: thin;
scrollbar-color: rgba(96, 120, 144, 0.35) transparent;
}
.gnozis-emoji-body::-webkit-scrollbar {
width: 5px;
}
.gnozis-emoji-body::-webkit-scrollbar-thumb {
background: rgba(96, 120, 144, 0.35);
border-radius: 4px;
}
.gnozis-emoji-section-title {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #7898B8;
margin: 8px 0 6px 4px;
}
.gnozis-emoji-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
}
.gnozis-emoji-item {
background: none;
border: none;
font-size: 1.35rem;
line-height: 1;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
transition: transform 0.12s ease, background-color 0.12s ease;
outline: none;
padding: 0;
}
.gnozis-emoji-item:hover {
background: rgba(96, 120, 144, 0.25);
transform: scale(1.22);
}
.gnozis-emoji-item:active {
transform: scale(0.94);
}  .composer-bg-palette {
background: rgba(14, 22, 34, 0.95);
border: 1px solid var(--border-card, #2A3B4C);
border-radius: 12px;
padding: 10px 14px;
margin-top: 12px;
animation: gnozisBgPaletteFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gnozisBgPaletteFadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bg-palette-title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.bg-palette-title {
font-size: 0.76rem;
font-weight: 600;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.btn-close-bg-palette {
background: none;
border: none;
color: #64748B;
cursor: pointer;
font-size: 0.85rem;
padding: 2px 6px;
border-radius: 4px;
transition: color 0.15s ease;
}
.btn-close-bg-palette:hover {
color: #F1F5F9;
}
.bg-palette-title-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.bg-palette-options {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
padding: 4px 2px;
}
.bg-palette-item {
width: 36px;
height: 36px;
border-radius: 9px;
border: 2px solid rgba(255, 255, 255, 0.16);
cursor: pointer;
flex-shrink: 0;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
position: relative;
outline: none;
padding: 0;
}
.bg-palette-item:hover {
transform: scale(1.15);
border-color: rgba(255, 255, 255, 0.65);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
z-index: 2;
}
.bg-palette-item.active {
border-color: #38bdf8 !important;
transform: scale(1.18);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
z-index: 3;
}
.bg-palette-item.bg-item-none {
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
} .bg-item-sky {
background: #f0f9ff url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/sky.jpg) center/cover no-repeat;
border-color: rgba(255, 255, 255, 0.35);
}
.bg-item-parchment {
background: radial-gradient(circle at 50% 30%, #fffdf8 0%, #f7f1e5 55%, #ede2ce 100%);
border-color: rgba(255, 255, 255, 0.35);
}
.bg-item-cotton {
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #fef3c7 45%, #fed7aa 100%);
border-color: rgba(255, 255, 255, 0.35);
}
.bg-item-celebration {
background: #120c04 url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/celebration.jpg) center/cover no-repeat;
}
.bg-item-gold {
background: #1c1404 url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/gold.jpg) center/cover no-repeat;
}
.bg-item-sunset {
background: radial-gradient(circle at 50% 30%, #831843 0%, #4c0519 50%, #1a030c 100%);
}
.bg-item-aurora {
background: radial-gradient(circle at 50% 30%, #065f46 0%, #064e3b 50%, #022c22 100%);
}
.bg-item-nebula {
background: #0d081e url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/nebula.jpg) center/cover no-repeat;
}
.bg-item-emerald {
background: #041a12 url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/emerald.jpg) center/cover no-repeat;
}
.bg-item-eclipse {
background: #1a0508 url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/eclipse.jpg) center/cover no-repeat;
}
.bg-item-amethyst {
background: radial-gradient(circle at 50% 35%, #581c60 0%, #240a2a 55%, #0e0212 100%);
}
.bg-item-cyber {
background: radial-gradient(circle at 50% 35%, #0b5570 0%, #062030 55%, #020d14 100%);
}
.bg-item-abyss {
background: radial-gradient(circle at 50% 40%, #1e3a5f 0%, #0c1827 55%, #050b12 100%);
}
.bg-item-sacred {
background: radial-gradient(circle at 50% 50%, #2b243b 0%, #13101c 60%, #08060c 100%);
}
.bg-item-minimal {
background: radial-gradient(circle at 50% 40%, #334155 0%, #1e293b 60%, #0f172a 100%);
} .composer-input-wrap.has-bg {
border-radius: 14px;
overflow: hidden;
position: relative;
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.composer-input-wrap.has-bg::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.28);
pointer-events: none;
z-index: 1;
}
.composer-input-wrap.has-bg .composer-textarea {
min-height: 170px;
padding: 36px 48px 36px 24px;
font-size: 1.3rem;
font-weight: 600;
text-align: center;
color: #FFFFFF !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.9);
z-index: 2;
position: relative;
line-height: 1.45;
}
.composer-input-wrap.has-bg .composer-textarea::placeholder {
color: rgba(255, 255, 255, 0.65);
text-shadow: none;
}
.composer-input-wrap.has-bg .gnozis-emoji-btn {
z-index: 3;
color: #FFFFFF;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(8px);
} .post-bg-canvas {
min-height: 220px;
border-radius: 14px;
padding: 38px 30px;
margin: 10px 0 14px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.08);
}
.post-bg-canvas::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.45) 100%);
pointer-events: none;
z-index: 1;
}
.post-bg-text-content {
position: relative;
z-index: 2;
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 1.32rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.01em;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.9);
word-break: break-word;
}
.post-bg-text-content a {
color: #93C5FD;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 700;
transition: color 0.15s ease;
}
.post-bg-text-content a:hover {
color: #FFFFFF;
} .gnozis-bg-abyss {
background: radial-gradient(circle at 50% 40%, #1e3a5f 0%, #0c1827 55%, #050b12 100%) !important;
}
.gnozis-bg-nebula {
background: #0d081e url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/nebula.jpg) center/cover no-repeat !important;
}
.gnozis-bg-emerald {
background: #041a12 url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/emerald.jpg) center/cover no-repeat !important;
}
.gnozis-bg-eclipse {
background: #1a0508 url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/eclipse.jpg) center/cover no-repeat !important;
}
.gnozis-bg-gold {
background: #1c1404 url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/gold.jpg) center/cover no-repeat !important;
}
.gnozis-bg-amethyst {
background: radial-gradient(circle at 50% 35%, #581c60 0%, #240a2a 55%, #0e0212 100%) !important;
}
.gnozis-bg-cyber {
background: radial-gradient(circle at 50% 35%, #0b5570 0%, #062030 55%, #020d14 100%) !important;
}
.gnozis-bg-sacred {
background: radial-gradient(circle at 50% 50%, #2b243b 0%, #13101c 60%, #08060c 100%) !important;
}
.gnozis-bg-celebration {
background: #120c04 url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/celebration.jpg) center/cover no-repeat !important;
}
.gnozis-bg-sunset {
background: radial-gradient(circle at 50% 30%, #831843 0%, #4c0519 50%, #1a030c 100%) !important;
}
.gnozis-bg-aurora {
background: radial-gradient(circle at 50% 30%, #065f46 0%, #064e3b 50%, #022c22 100%) !important;
}
.gnozis-bg-minimal {
background: radial-gradient(circle at 50% 40%, #334155 0%, #1e293b 60%, #0f172a 100%) !important;
}
.gnozis-bg-sky {
background: #f0f9ff url(//irenshpak.com/wp-content/themes/gnozis-theme/assets/images/post-backgrounds/sky.jpg) center/cover no-repeat !important;
}
.gnozis-bg-parchment {
background: radial-gradient(circle at 50% 30%, #fffdf8 0%, #f7f1e5 55%, #ede2ce 100%) !important;
}
.gnozis-bg-cotton {
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #fef3c7 45%, #fed7aa 100%) !important;
} .post-bg-canvas.gnozis-bg-is-light::before {
background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 100%) !important;
}
.post-bg-canvas.gnozis-bg-is-light .post-bg-text-content {
color: #1c1917 !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 1px rgba(255, 255, 255, 0.7) !important;
}
.post-bg-canvas.gnozis-bg-is-light .post-bg-text-content a {
color: #b45309 !important;
text-shadow: none !important;
}
.composer-input-wrap.has-bg.gnozis-bg-is-light::before {
background: rgba(255, 255, 255, 0.35) !important;
}
.composer-input-wrap.has-bg.gnozis-bg-is-light .composer-textarea {
color: #1c1917 !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}
.composer-input-wrap.has-bg.gnozis-bg-is-light .composer-textarea::placeholder {
color: rgba(28, 25, 23, 0.6) !important;
text-shadow: none !important;
}
.composer-input-wrap.has-bg.gnozis-bg-is-light .gnozis-emoji-btn {
color: #1c1917 !important;
background: rgba(255, 255, 255, 0.65) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
}  .gnozis-order-details-section {
margin-top: 28px;
width: 100%;
}
.gnozis-order-details-card {
background: rgba(14, 21, 32, 0.72) !important;
border: 1px solid rgba(56, 189, 248, 0.18) !important;
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 0 20px -6px rgba(56, 189, 248, 0.08) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: 16px !important;
padding: 24px !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gnozis-order-details-card:hover {
border-color: rgba(56, 189, 248, 0.3) !important;
box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 0 24px -4px rgba(56, 189, 248, 0.15) !important;
}
.order-details-card-header {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 18px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.order-details-header-icon {
font-size: 24px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 12px;
color: #38bdf8;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}
.order-details-card-title {
font-size: 1.25rem;
font-weight: 700;
color: #f1f5f9;
margin: 0;
letter-spacing: -0.01em;
}
.order-details-card-sub {
font-size: 0.85rem;
color: #94a3b8;
display: block;
margin-top: 2px;
} .gnozis-order-items-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.gnozis-order-item-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
transition: background 0.25s ease, border-color 0.25s ease;
}
.gnozis-order-item-row:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(56, 189, 248, 0.2);
}
.order-item-media {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.order-item-media .order-item-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.order-item-info {
flex: 1;
min-width: 0;
}
.order-item-title-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.order-item-name-link,
.order-item-name {
font-weight: 600;
color: #f8fafc;
font-size: 0.95rem;
line-height: 1.4;
transition: color 0.2s ease;
}
.order-item-name-link:hover {
color: #38bdf8;
text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
.order-item-qty-badge {
font-size: 0.75rem;
font-weight: 600;
background: rgba(56, 189, 248, 0.12);
color: #7dd3fc;
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 6px;
padding: 2px 7px;
}
.order-item-purchase-note {
margin-top: 6px;
font-size: 0.8rem;
color: #94a3b8;
background: rgba(255, 255, 255, 0.03);
border-left: 2px solid #38bdf8;
padding: 6px 10px;
border-radius: 0 6px 6px 0;
}
.order-item-price-wrap {
text-align: right;
flex-shrink: 0;
}
.order-item-price {
font-size: 1.05rem;
font-weight: 700;
color: #f1f5f9;
letter-spacing: -0.01em;
} .gnozis-order-totals-box {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.order-total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 0.92rem;
color: #94a3b8;
}
.order-total-row .total-label {
font-weight: 500;
}
.order-total-row .total-value {
font-weight: 600;
color: #e2e8f0;
} .order-total-row.total-row-order_total {
border-top: 1px dashed rgba(255, 255, 255, 0.12);
margin-top: 8px;
padding-top: 14px;
font-size: 1.15rem;
}
.order-total-row.total-row-order_total .total-label {
color: #f8fafc;
font-weight: 700;
}
.order-total-row.total-row-order_total .total-value {
color: #38bdf8;
font-size: 1.35rem;
font-weight: 800;
text-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}
.order-customer-note-row {
margin-top: 12px;
padding: 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
font-size: 0.85rem;
}
.order-customer-note-row .note-label {
color: #38bdf8;
font-weight: 600;
display: block;
margin-bottom: 4px;
}
.order-customer-note-row .note-content {
color: #cbd5e1;
margin: 0;
line-height: 1.5;
}
.order-actions-row {
margin-top: 20px;
display: flex;
gap: 12px;
flex-wrap: wrap;
} .gnozis-customer-details-section {
margin-top: 24px;
width: 100%;
}
.gnozis-customer-addresses-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.gnozis-customer-addresses-grid.has-two-addresses {
grid-template-columns: 1fr 1fr;
}
}
.address-card {
background: rgba(14, 21, 32, 0.72) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 16px !important;
padding: 22px !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: border-color 0.25s ease;
}
.address-card:hover {
border-color: rgba(56, 189, 248, 0.25) !important;
}
.address-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.address-card-icon {
font-size: 1.25rem;
}
.address-card-title {
font-size: 1.05rem;
font-weight: 700;
color: #f1f5f9;
margin: 0;
}
.address-formatted-text {
font-style: normal;
font-size: 0.92rem;
color: #cbd5e1;
line-height: 1.6;
margin-bottom: 14px;
}
.address-contacts-list {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 12px;
border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.address-contact-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.88rem;
}
.address-contact-item .contact-icon {
font-size: 0.95rem;
opacity: 0.85;
}
.address-contact-item .contact-link {
color: #38bdf8;
font-weight: 500;
transition: color 0.2s ease;
}
.address-contact-item .contact-link:hover {
color: #7dd3fc;
text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
} .profile-orders-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.profile-orders-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: rgba(14, 21, 32, 0.75);
border: 1px solid rgba(56, 189, 248, 0.15);
border-radius: 16px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.orders-header-info {
display: flex;
align-items: center;
gap: 14px;
}
.orders-header-icon-wrap {
font-size: 26px;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 12px;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.2);
}
.orders-header-title {
font-size: 1.25rem;
font-weight: 700;
color: #f8fafc;
margin: 0;
letter-spacing: -0.01em;
}
.orders-header-sub {
font-size: 0.85rem;
color: #94a3b8;
margin: 2px 0 0 0;
}
.orders-count-badge {
font-size: 0.82rem;
font-weight: 600;
padding: 6px 14px;
background: rgba(56, 189, 248, 0.1);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 20px;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
} .profile-orders-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.profile-order-card {
background: rgba(14, 21, 32, 0.72) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 16px !important;
padding: 20px 22px !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.profile-order-card:hover {
transform: translateY(-2px);
border-color: rgba(56, 189, 248, 0.28) !important;
box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6), 0 0 20px -4px rgba(56, 189, 248, 0.12) !important;
} .profile-order-card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.order-main-meta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.order-number-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 1.05rem;
font-weight: 700;
color: #f8fafc;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.order-number-badge:hover {
color: #38bdf8;
text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}
.order-number-badge .sigil-bullet {
color: #38bdf8;
font-size: 0.9rem;
}
.order-date-text {
font-size: 0.85rem;
color: #94a3b8;
display: inline-flex;
align-items: center;
gap: 4px;
}
.order-date-text .date-icon {
opacity: 0.8;
} .order-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.01em;
} .order-status-badge.status-processing {
background: rgba(245, 158, 11, 0.12);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.3);
box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
} .order-status-badge.status-completed {
background: rgba(16, 185, 129, 0.12);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.3);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
} .order-status-badge.status-on-hold {
background: rgba(249, 115, 22, 0.12);
color: #fb923c;
border: 1px solid rgba(249, 115, 22, 0.3);
} .order-status-badge.status-pending {
background: rgba(168, 85, 247, 0.12);
color: #c084fc;
border: 1px solid rgba(168, 85, 247, 0.3);
} .order-status-badge.status-cancelled,
.order-status-badge.status-failed {
background: rgba(239, 68, 68, 0.12);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.3);
} .order-status-badge.status-refunded {
background: rgba(148, 163, 184, 0.12);
color: #cbd5e1;
border: 1px solid rgba(148, 163, 184, 0.3);
} .profile-order-card-items {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 0;
}
.profile-order-item-row {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
transition: background 0.2s ease;
}
.profile-order-item-row:hover {
background: rgba(255, 255, 255, 0.035);
}
.profile-order-item-row .order-item-media {
width: 46px;
height: 46px;
border-radius: 8px;
flex-shrink: 0;
}
.profile-order-item-row .order-item-details {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.profile-order-item-row .order-item-title-link,
.profile-order-item-row .order-item-title {
font-size: 0.92rem;
font-weight: 600;
color: #f1f5f9;
line-height: 1.4;
transition: color 0.2s ease;
}
.profile-order-item-row .order-item-title-link:hover {
color: #38bdf8;
}
.order-item-qty-tag {
font-size: 0.72rem;
font-weight: 600;
padding: 2px 6px;
background: rgba(255, 255, 255, 0.06);
color: #94a3b8;
border-radius: 5px;
}
.profile-order-item-row .order-item-subtotal {
font-size: 0.95rem;
font-weight: 700;
color: #f8fafc;
flex-shrink: 0;
} .profile-order-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.order-footer-meta {
display: flex;
align-items: center;
gap: 8px;
}
.payment-title-tag {
font-size: 0.82rem;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 3px 10px;
border-radius: 8px;
}
.order-footer-actions {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
}
.order-total-block {
display: flex;
align-items: baseline;
gap: 6px;
}
.order-total-block .total-caption {
font-size: 0.85rem;
color: #94a3b8;
}
.order-total-block .total-amount-glow {
font-size: 1.25rem;
font-weight: 800;
color: #38bdf8;
text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
letter-spacing: -0.01em;
}
.order-details-btn {
font-size: 0.82rem;
padding: 8px 16px;
border-radius: 10px;
} .profile-orders-empty-card {
text-align: center;
padding: 48px 24px !important;
background: rgba(14, 21, 32, 0.72) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 16px !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.empty-orders-sigil {
font-size: 48px;
margin-bottom: 16px;
display: inline-block;
filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.3));
animation: gnozisFloatSigil 4s ease-in-out infinite;
}
@keyframes gnozisFloatSigil {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
.empty-orders-title {
font-size: 1.3rem;
font-weight: 700;
color: #f8fafc;
margin: 0 0 8px 0;
}
.empty-orders-desc {
font-size: 0.92rem;
color: #94a3b8;
max-width: 480px;
margin: 0 auto 24px auto;
line-height: 1.5;
}
.empty-orders-action .btn-gradient-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
border-radius: 12px;
text-decoration: none;
}  #wc-stripe-payment-request-button-separator,
#wc-stripe-express-checkout-button-separator,
.wc-stripe-payment-request-button-separator,
#payment #wc-stripe-payment-request-button-separator,
#payment #wc-stripe-express-checkout-button-separator,
p#wc-stripe-payment-request-button-separator,
p#wc-stripe-express-checkout-button-separator {
display: none !important;
visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
font-size: 0 !important;
line-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
} .woocommerce-SavedPaymentMethods-saveNew,
#wc-stripe-new-payment-method,
label[for="wc-stripe-new-payment-method"],
.wc-stripe-save-source,
.wc-stripe-save-payment-method-checkbox,
.wc-stripe-save-payment-method-container {
display: none !important;
visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden !important;
} fieldset#wc-stripe-upe-form,
fieldset#wc-stripe-cc-form,
.payment_box[class*="payment_method_stripe"] fieldset#wc-stripe-upe-form {
display: block !important;
visibility: visible !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
} #payment #wc-stripe-payment-request-wrapper,
#payment #wc-stripe-express-checkout-element {
margin: 0 0 16px 0 !important;
padding: 12px 16px !important;
background: rgba(16, 26, 38, 0.70) !important;
border: 1px solid rgba(96, 120, 144, 0.22) !important;
border-radius: 12px !important;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#payment #wc-stripe-payment-request-wrapper:hover,
#payment #wc-stripe-express-checkout-element:hover {
border-color: rgba(120, 152, 184, 0.38) !important;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45) !important;
}
#payment #wc-stripe-payment-request-button {
margin: 0 auto !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 8px !important;
overflow: hidden !important;
} .gnozis-payment-methods-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 10px;
}
.gnozis-payment-methods-list .wc_payment_method {
background: rgba(16, 26, 38, 0.60);
border: 1px solid rgba(96, 120, 144, 0.20);
border-radius: 12px;
padding: 12px 16px;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
position: relative;
}
.gnozis-payment-methods-list .wc_payment_method:hover {
border-color: rgba(96, 120, 144, 0.40);
background: rgba(20, 32, 48, 0.75);
}
.gnozis-payment-methods-list .wc_payment_method.is-selected {
border-color: #38BDF8 !important;
background: rgba(16, 32, 52, 0.85) !important;
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.30), 0 4px 18px rgba(0, 0, 0, 0.40) !important;
}
.gnozis-payment-method-label {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin: 0;
cursor: pointer;
user-select: none;
}
.gateway-brand-logos {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.gateway-brand-logos .svg-brand-badge svg {
display: block;
height: 22px;
width: auto;
border-radius: 4px;
} .payment_box.payment_method_stripe,
.payment_box.payment_method_stripe_cc,
.gnozis-payment-desc-box {
margin-top: 12px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(96, 120, 144, 0.18) !important;
color: var(--text-secondary) !important;
font-size: 0.88rem !important;
line-height: 1.5 !important;
}
.payment_box .wc-stripe-upe-element {
margin-top: 10px !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
} .gnozis-no-gateways-notice,
.woocommerce-checkout #payment .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
background: rgba(16, 26, 40, 0.85) !important;
border: 1px solid rgba(96, 120, 144, 0.35) !important;
border-radius: 12px !important;
color: #E0E8F0 !important;
padding: 16px 20px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40) !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
list-style: none !important;
font-size: 0.92rem !important;
line-height: 1.5 !important;
margin: 12px 0 !important;
}
.woocommerce-checkout #payment .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before {
color: #38BDF8 !important;
}
.gnozis-alert-box {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.gnozis-alert-box .alert-icon {
font-size: 1.2rem;
color: #38bdf8;
}
.gnozis-alert-box .alert-text {
color: #E0E8F0;
font-weight: 500;
} .gnozis-audio-widget {
background: linear-gradient(180deg, rgba(14, 20, 34, 0.95) 0%, rgba(10, 15, 26, 0.98) 100%);
border: 1px solid rgba(56, 189, 248, 0.18);
border-radius: 16px;
padding: 12px 14px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.05);
margin-bottom: 0;
position: relative;
overflow: hidden;
}
.gnozis-audio-widget::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), rgba(168, 85, 247, 0.6), transparent);
pointer-events: none;
} .audio-widget-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.audio-header-title-box {
display: flex;
align-items: center;
gap: 8px;
}
.audio-header-sigil-wrap {
position: relative;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(56, 189, 248, 0.12);
border-radius: 50%;
border: 1px solid rgba(56, 189, 248, 0.3);
}
.audio-header-sigil {
font-size: 12px;
}
.audio-pulse-ring {
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1px solid rgba(56, 189, 248, 0.4);
opacity: 0;
animation: audioRingPulse 2.5s infinite;
}
@keyframes audioRingPulse {
0% { transform: scale(0.9); opacity: 0.8; }
100% { transform: scale(1.4); opacity: 0; }
}
.audio-title-group {
display: flex;
flex-direction: column;
gap: 1px;
}
.audio-header-title {
font-size: 0.88rem;
font-weight: 700;
color: #f8fafc;
letter-spacing: -0.01em;
margin: 0;
}
.audio-author-pill {
font-size: 0.64rem;
font-weight: 600;
color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 12px;
padding: 0 6px;
align-self: flex-start;
} .btn-audio-admin-add {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 6px;
color: #38bdf8;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-audio-admin-add:hover {
background: rgba(56, 189, 248, 0.22);
border-color: #38bdf8;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
color: #fff;
transform: translateY(-1px);
}
.btn-audio-admin-add .btn-plus-icon {
font-size: 12px;
font-weight: bold;
} .audio-player-deck {
background: rgba(18, 26, 44, 0.55);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
padding: 8px 10px;
margin-bottom: 8px;
}
.audio-deck-main {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.audio-cover-frame {
position: relative;
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(56, 189, 248, 0.4);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
flex-shrink: 0;
background: #0b101b;
}
.audio-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.is-playing .audio-cover-img {
animation: vinylSpin 14s linear infinite;
}
@keyframes vinylSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.audio-vinyl-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: #080c14;
border: 1.5px solid #38bdf8;
border-radius: 50%;
pointer-events: none;
}
.audio-track-details {
flex: 1;
min-width: 0;
}
.audio-track-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 1px;
}
.audio-active-title {
font-size: 0.82rem;
font-weight: 700;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.audio-active-artist {
font-size: 0.70rem;
color: #94a3b8;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .audio-visualizer-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 12px;
flex-shrink: 0;
}
.audio-visualizer-bars .vbar {
width: 2px;
height: 3px;
background: #38bdf8;
border-radius: 1px;
transition: height 0.15s ease;
}
.is-playing .audio-visualizer-bars .vbar-1 { animation: eqBarAnim 0.7s infinite alternate ease-in-out; }
.is-playing .audio-visualizer-bars .vbar-2 { animation: eqBarAnim 0.5s infinite alternate ease-in-out 0.15s; }
.is-playing .audio-visualizer-bars .vbar-3 { animation: eqBarAnim 0.8s infinite alternate ease-in-out 0.3s; }
.is-playing .audio-visualizer-bars .vbar-4 { animation: eqBarAnim 0.6s infinite alternate ease-in-out 0.1s; }
.is-playing .audio-visualizer-bars .vbar-5 { animation: eqBarAnim 0.75s infinite alternate ease-in-out 0.25s; }
@keyframes eqBarAnim {
0% { height: 3px; background: #38bdf8; }
50% { height: 12px; background: #818cf8; }
100% { height: 6px; background: #38bdf8; }
} .audio-scrubber-box {
margin-bottom: 6px;
}
.audio-timeline-track {
position: relative;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
cursor: pointer;
transition: height 0.15s ease;
}
.audio-timeline-track:hover {
height: 6px;
}
.audio-timeline-buffered {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: rgba(255, 255, 255, 0.18);
border-radius: 2px;
pointer-events: none;
}
.audio-timeline-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, #38bdf8, #818cf8);
border-radius: 2px;
pointer-events: none;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}
.audio-timeline-handle {
position: absolute;
top: 50%;
width: 9px;
height: 9px;
background: #fff;
border: 2px solid #38bdf8;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.15s ease, transform 0.1s ease;
box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
pointer-events: none;
}
.audio-timeline-track:hover .audio-timeline-handle {
opacity: 1;
}
.audio-time-row {
display: flex;
justify-content: space-between;
margin-top: 3px;
font-size: 0.65rem;
font-weight: 500;
color: #94a3b8;
} .audio-controls-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.audio-ctrl-btn {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
color: #94a3b8;
cursor: pointer;
transition: all 0.2s ease;
}
.audio-ctrl-btn:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.1);
}
.audio-ctrl-btn.active {
color: #38bdf8;
background: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.3);
}
.audio-play-main-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
border: none;
color: #080c14;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.audio-play-main-btn:hover {
transform: scale(1.08);
box-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
color: #040810;
}
.audio-play-main-btn:active {
transform: scale(0.96);
} .audio-volume-pop-wrap {
position: relative;
}
.audio-volume-slider-box {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(14, 20, 34, 0.95);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 8px;
padding: 6px 8px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
z-index: 10;
width: 84px;
}
.audio-volume-pop-wrap:hover .audio-volume-slider-box,
.audio-volume-pop-wrap:focus-within .audio-volume-slider-box {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.audio-volume-slider {
width: 100%;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.audio-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 9px;
height: 9px;
background: #38bdf8;
border-radius: 50%;
box-shadow: 0 0 6px #38bdf8;
} .audio-playlist-section {
margin-top: 2px;
}
.audio-playlist-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.playlist-header-lbl {
font-size: 0.70rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
}
.playlist-count-badge {
font-size: 0.66rem;
font-weight: 600;
color: #94a3b8;
background: rgba(255, 255, 255, 0.05);
padding: 1px 5px;
border-radius: 8px;
}
.audio-playlist-list {
display: flex;
flex-direction: column;
gap: 3px;
max-height: 200px;
overflow-y: auto;
padding-right: 2px;
scrollbar-width: thin;
scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
}
.audio-playlist-list::-webkit-scrollbar {
width: 4px;
}
.audio-playlist-list::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.3);
border-radius: 4px;
}
.audio-track-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 8px;
transition: all 0.2s ease;
gap: 6px;
}
.audio-track-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(56, 189, 248, 0.2);
}
.audio-track-item.is-active {
background: rgba(56, 189, 248, 0.09);
border-color: rgba(56, 189, 248, 0.35);
box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.06);
}
.audio-track-play-btn {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
color: inherit;
text-align: left;
cursor: pointer;
flex: 1;
min-width: 0;
padding: 0;
font-family: inherit;
}
.audio-track-play-indicator {
width: 18px;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.audio-track-num {
font-size: 0.74rem;
font-weight: 700;
color: #64748b;
text-align: center;
display: inline-block;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.audio-track-item.is-active .audio-track-num {
display: none;
}
.audio-track-bars-mini {
display: none;
align-items: flex-end;
gap: 1.5px;
height: 10px;
width: 12px;
}
.audio-track-item.is-active .audio-track-bars-mini {
display: flex;
}
.audio-track-bars-mini i {
width: 2px;
height: 3px;
background: #38bdf8;
border-radius: 1px;
}
.is-playing.audio-track-item .audio-track-bars-mini i:nth-child(1) { animation: eqBarAnim 0.6s infinite alternate ease; }
.is-playing.audio-track-item .audio-track-bars-mini i:nth-child(2) { animation: eqBarAnim 0.4s infinite alternate ease 0.1s; }
.is-playing.audio-track-item .audio-track-bars-mini i:nth-child(3) { animation: eqBarAnim 0.7s infinite alternate ease 0.2s; }
.audio-track-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.track-row-title {
font-size: 0.80rem;
font-weight: 600;
color: #e2e8f0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
}
.audio-track-item.is-active .track-row-title {
color: #38bdf8;
}
.track-row-artist {
font-size: 0.68rem;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.audio-track-actions {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.audio-track-duration {
font-size: 0.68rem;
color: #64748b;
font-variant-numeric: tabular-nums;
} .btn-audio-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
color: #94a3b8;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-audio-download:hover {
color: #38bdf8;
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.4);
transform: translateY(-1px);
}
.btn-audio-delete:hover {
color: #ef4444;
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
transform: translateY(-1px);
} .audio-empty-box {
text-align: center;
padding: 20px;
color: #64748b;
font-size: 0.85rem;
}
.audio-empty-icon {
font-size: 2rem;
display: block;
margin-bottom: 6px;
opacity: 0.5;
} .gnozis-audio-modal {
position: fixed !important;
inset: 0 !important;
z-index: 100060 !important;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnozis-audio-modal.open {
opacity: 1 !important;
pointer-events: auto !important;
display: flex !important;
}
.gnozis-audio-modal .gnozis-modal-backdrop {
position: fixed !important;
inset: 0 !important;
background: rgba(4, 8, 16, 0.85) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
z-index: 1 !important;
}
.gnozis-audio-modal .gnozis-modal-dialog {
position: relative !important;
z-index: 2 !important;
max-width: 490px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: linear-gradient(180deg, #0f172a 0%, #080d1a 100%) !important;
border: 1px solid rgba(56, 189, 248, 0.3) !important;
border-radius: 18px !important;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(56, 189, 248, 0.16) !important;
padding: 24px 26px !important;
transform: translateY(14px) scale(0.98);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnozis-audio-modal.open .gnozis-modal-dialog {
transform: translateY(0) scale(1) !important;
}
.gnozis-audio-modal .gnozis-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gnozis-audio-modal .modal-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.gnozis-audio-modal .modal-sigil {
font-size: 1.1rem;
color: #38bdf8;
text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}
.gnozis-audio-modal .modal-title {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #f8fafc;
letter-spacing: -0.01em;
}
.gnozis-audio-modal .gnozis-modal-close {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.2s ease;
}
.gnozis-audio-modal .gnozis-modal-close:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
}
.gnozis-audio-modal .gnozis-modal-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.gnozis-audio-modal .form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
.gnozis-audio-modal .form-label {
font-size: 0.82rem;
font-weight: 600;
color: #94a3b8;
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: 6px;
}
.gnozis-audio-modal .gnozis-input,
.gnozis-audio-modal .gnozis-input-modal {
width: 100% !important;
background: rgba(15, 23, 42, 0.85) !important;
border: 1px solid rgba(56, 189, 248, 0.22) !important;
border-radius: 10px !important;
padding: 10px 14px !important;
color: #f8fafc !important;
font-size: 0.88rem !important;
font-family: inherit !important;
outline: none !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45) !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.gnozis-audio-modal .gnozis-input:focus,
.gnozis-audio-modal .gnozis-input-modal:focus {
border-color: #38bdf8 !important;
background: rgba(15, 23, 42, 0.98) !important;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18), inset 0 2px 4px rgba(0, 0, 0, 0.45) !important;
}
.gnozis-audio-modal .gnozis-input::placeholder,
.gnozis-audio-modal .gnozis-input-modal::placeholder {
color: #475569 !important;
opacity: 0.9;
}
.audio-file-dropzone {
position: relative;
border: 1.5px dashed rgba(56, 189, 248, 0.35);
border-radius: 12px;
padding: 18px 14px;
text-align: center;
background: rgba(56, 189, 248, 0.03);
cursor: pointer;
transition: all 0.22s ease;
}
.audio-file-dropzone:hover,
.audio-file-dropzone.is-dragover {
border-color: #38bdf8;
background: rgba(56, 189, 248, 0.09);
box-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
}
.audio-hidden-file-input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.dropzone-content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.dropzone-icon {
font-size: 1.6rem;
margin-bottom: 2px;
filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}
.dropzone-title {
font-size: 0.88rem;
color: #f1f5f9;
font-weight: 600;
}
.dropzone-hint {
font-size: 0.74rem;
color: #64748b;
} .audio-custom-cover-wrap {
display: flex;
align-items: center;
gap: 12px;
background: rgba(15, 23, 42, 0.65);
border: 1px solid rgba(56, 189, 248, 0.18);
border-radius: 10px;
padding: 7px 10px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.btn-cover-select-custom {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(56, 189, 248, 0.35);
color: #38bdf8;
padding: 6px 14px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
user-select: none;
}
.btn-cover-select-custom:hover {
background: rgba(56, 189, 248, 0.25);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}
.audio-hidden-cover-input {
position: absolute !important;
opacity: 0 !important;
width: 0.1px !important;
height: 0.1px !important;
pointer-events: none !important;
}
.audio-cover-name-badge {
font-size: 0.78rem;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.audio-cover-name-badge.has-file {
color: #38bdf8;
font-weight: 500;
}
.audio-upload-progress {
margin-top: 4px;
}
.audio-upload-progress .progress-bar-track {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.audio-upload-progress .progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #0284c7, #38bdf8, #818cf8);
box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
transition: width 0.2s ease;
}
.audio-upload-progress .progress-text {
font-size: 0.75rem;
color: #38bdf8;
display: block;
margin-top: 4px;
text-align: right;
font-weight: 500;
}
.gnozis-audio-modal .gnozis-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.gnozis-audio-modal .btn-outline-glass {
padding: 9px 18px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #94a3b8;
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.gnozis-audio-modal .btn-outline-glass:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.25);
color: #f1f5f9;
}
.gnozis-audio-modal .btn-gradient-primary {
padding: 9px 22px;
border-radius: 10px;
background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
border: none;
color: #ffffff;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4);
transition: all 0.2s ease;
}
.gnozis-audio-modal .btn-gradient-primary:hover {
box-shadow: 0 6px 22px rgba(56, 189, 248, 0.55);
transform: translateY(-1px);
}  .gnozis-floating-audio-fab {
position: fixed;
bottom: 96px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
z-index: 9975;
cursor: pointer;
user-select: none;
display: none; align-items: center;
justify-content: center;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.2);
}
.gnozis-floating-audio-fab:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.75), 0 0 18px rgba(56, 189, 248, 0.4);
}
.gnozis-floating-audio-fab:active {
transform: scale(0.96);
} .fab-pulse-aura {
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1.5px solid rgba(56, 189, 248, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.gnozis-floating-audio-fab.is-playing .fab-pulse-aura {
opacity: 1;
animation: audioFabPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes audioFabPulse {
0% {
transform: scale(0.98);
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
}
70% {
transform: scale(1.12);
box-shadow: 0 0 0 6px rgba(56, 189, 248, 0);
}
100% {
transform: scale(0.98);
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
}
}
.fab-inner-disc {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: #080d1a;
border: 2px solid rgba(56, 189, 248, 0.35);
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.gnozis-floating-audio-fab.is-playing .fab-inner-disc {
border-color: #38bdf8;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
animation: vinylSpin 6s linear infinite;
}
.fab-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fab-sigil-overlay {
position: absolute;
inset: 0;
background: rgba(8, 13, 26, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.gnozis-floating-audio-fab.is-playing .fab-sigil-overlay {
background: rgba(8, 13, 26, 0.15);
}
.fab-sigil-icon {
font-size: 1.15rem;
filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.7));
}
.fab-mini-eq {
position: absolute;
bottom: -2px;
right: -2px;
background: #090e1c;
border: 1.5px solid #38bdf8;
border-radius: 6px;
padding: 2px 3px;
display: none;
align-items: flex-end;
gap: 1.5px;
height: 13px;
z-index: 2;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.gnozis-floating-audio-fab.is-playing .fab-mini-eq {
display: flex;
}
.feq-bar {
width: 2px;
height: 3px;
background: #38bdf8;
border-radius: 1px;
}
.gnozis-floating-audio-fab.is-playing .feq-1 { animation: eqBarAnim 0.6s infinite alternate ease; }
.gnozis-floating-audio-fab.is-playing .feq-2 { animation: eqBarAnim 0.4s infinite alternate ease 0.15s; }
.gnozis-floating-audio-fab.is-playing .feq-3 { animation: eqBarAnim 0.7s infinite alternate ease 0.25s; } body.woocommerce-checkout .gnozis-floating-audio-fab,
body.woocommerce-checkout .gnozis-mobile-audio-sheet,
body.page-template-page-checkout .gnozis-floating-audio-fab,
body.page-template-page-checkout .gnozis-mobile-audio-sheet,
.woocommerce-checkout #gnozis-floating-audio-fab,
.gnozis-checkout-page-wrapper ~ .gnozis-floating-audio-fab {
display: none !important;
} .gnozis-mobile-audio-sheet {
position: fixed !important;
inset: 0 !important;
z-index: 100010 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.gnozis-mobile-audio-sheet.open {
opacity: 1 !important;
pointer-events: auto !important;
}
.mobile-audio-sheet-backdrop {
position: absolute !important;
inset: 0 !important;
background: rgba(4, 8, 16, 0.82) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
z-index: 1 !important;
}
.mobile-audio-sheet-panel {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 540px !important;
margin: 0 auto !important;
max-height: 88vh !important;
background: linear-gradient(180deg, #0f172a 0%, #080d1a 100%) !important;
border: 1px solid rgba(56, 189, 248, 0.25) !important;
border-bottom: none !important;
border-radius: 24px 24px 0 0 !important;
padding: 10px 20px 24px 20px !important;
padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.92), 0 0 30px rgba(56, 189, 248, 0.14) !important;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}
.gnozis-mobile-audio-sheet.open .mobile-audio-sheet-panel {
transform: translateY(0) !important;
} .sheet-grab-bar-wrap {
display: flex;
justify-content: center;
padding: 6px 0 12px 0;
cursor: pointer;
touch-action: none;
}
.sheet-grab-bar {
width: 44px;
height: 4.5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
transition: background 0.2s ease, width 0.2s ease;
}
.sheet-grab-bar-wrap:hover .sheet-grab-bar {
background: #38bdf8;
width: 52px;
} .mobile-audio-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sheet-header-title-box {
display: flex;
align-items: center;
gap: 10px;
}
.sheet-header-sigil {
font-size: 1.3rem;
filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
}
.sheet-title-group {
display: flex;
flex-direction: column;
}
.sheet-header-title {
margin: 0;
font-size: 0.98rem;
font-weight: 700;
color: #f8fafc;
letter-spacing: -0.01em;
}
.sheet-author-pill {
font-size: 0.72rem;
color: #38bdf8;
font-weight: 500;
}
.sheet-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.btn-sheet-close {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.2s ease;
}
.btn-sheet-close:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #fca5a5;
} .sheet-audio-deck {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(56, 189, 248, 0.18);
border-radius: 16px;
padding: 16px;
margin-bottom: 18px;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}
.sheet-cover-container {
display: flex;
justify-content: center;
margin-bottom: 14px;
}
.sheet-cover-frame {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
border: 2.5px solid rgba(56, 189, 248, 0.4);
background: #080d1a;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(56, 189, 248, 0.2);
}
.sheet-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sheet-vinyl-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: #080d1a;
border: 2.5px solid #38bdf8;
box-shadow: 0 0 6px #38bdf8;
z-index: 2;
}
.is-playing .sheet-cover-frame {
animation: vinylSpin 6s linear infinite;
border-color: #38bdf8;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 24px rgba(56, 189, 248, 0.45);
}
.sheet-track-details {
text-align: center;
margin-bottom: 12px;
}
.sheet-title-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 2px;
}
.sheet-active-title {
font-size: 1.05rem;
font-weight: 700;
color: #f8fafc;
letter-spacing: -0.01em;
}
.sheet-visualizer-bars {
display: flex;
align-items: flex-end;
gap: 2px;
height: 14px;
}
.sheet-visualizer-bars .vbar {
width: 2.5px;
height: 4px;
background: #38bdf8;
border-radius: 1px;
}
.is-playing .sheet-visualizer-bars .vbar-1 { animation: eqBarAnim 0.6s infinite alternate ease; }
.is-playing .sheet-visualizer-bars .vbar-2 { animation: eqBarAnim 0.4s infinite alternate ease 0.1s; }
.is-playing .sheet-visualizer-bars .vbar-3 { animation: eqBarAnim 0.7s infinite alternate ease 0.2s; }
.is-playing .sheet-visualizer-bars .vbar-4 { animation: eqBarAnim 0.5s infinite alternate ease 0.15s; }
.is-playing .sheet-visualizer-bars .vbar-5 { animation: eqBarAnim 0.8s infinite alternate ease 0.05s; }
.sheet-active-artist {
font-size: 0.82rem;
color: #94a3b8;
} .sheet-scrubber-box {
margin-bottom: 14px;
}
.sheet-timeline-track {
position: relative;
height: 6px;
background: rgba(255, 255, 255, 0.08);
border-radius: 3px;
cursor: pointer;
overflow: visible;
}
.sheet-timeline-buffered {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
}
.sheet-timeline-progress {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: linear-gradient(90deg, #0284c7, #38bdf8);
border-radius: 3px;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}
.sheet-timeline-handle {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
background: #ffffff;
border: 2px solid #38bdf8;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
pointer-events: none;
}
.sheet-time-row {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: #64748b;
margin-top: 6px;
font-variant-numeric: tabular-nums;
} .sheet-controls-row {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.sheet-ctrl-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
}
.sheet-ctrl-btn:hover {
background: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.35);
color: #38bdf8;
transform: translateY(-1px);
}
.sheet-ctrl-btn.active {
background: rgba(56, 189, 248, 0.2);
border-color: #38bdf8;
color: #38bdf8;
}
.sheet-play-main-btn {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
border: none;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 18px rgba(2, 132, 199, 0.45);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sheet-play-main-btn:hover {
transform: scale(1.06);
box-shadow: 0 6px 24px rgba(56, 189, 248, 0.6);
}
.sheet-play-main-btn:active {
transform: scale(0.95);
} .sheet-playlist-section {
margin-top: 4px;
}
.sheet-playlist-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.sheet-track-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 240px;
overflow-y: auto;
padding-right: 2px;
padding-bottom: 36px;
scrollbar-width: thin;
scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
}
.sheet-track-list::-webkit-scrollbar {
width: 4px;
}
.sheet-track-list::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.3);
border-radius: 4px;
} @media (max-width: 1024px) {
.gnozis-floating-audio-fab {
display: flex !important;
bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important;
right: 14px !important;
}
} .gnozis-shop-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 16px 60px;
} .gnozis-shop-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
align-items: start;
} .gnozis-shop-filters {
display: flex;
flex-direction: column;
gap: 18px;
position: sticky;
top: 20px;
}
.filter-card {
background: rgba(13, 19, 33, 0.75);
border: 1px solid rgba(56, 189, 248, 0.15);
border-radius: 14px;
padding: 18px;
backdrop-filter: blur(12px);
}
.filter-title {
font-size: 0.92rem;
font-weight: 700;
color: #f8fafc;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
.filter-categories-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-categories-list li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-radius: 8px;
color: #94a3b8;
text-decoration: none;
font-size: 0.88rem;
transition: all 0.2s ease;
background: transparent;
border: 1px solid transparent;
}
.filter-categories-list li a:hover {
color: #f8fafc;
background: rgba(56, 189, 248, 0.06);
border-color: rgba(56, 189, 248, 0.15);
}
.filter-categories-list li.active a {
color: #38bdf8;
background: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.35);
font-weight: 600;
}
.filter-categories-list .count {
font-size: 0.78rem;
background: rgba(255, 255, 255, 0.06);
padding: 2px 7px;
border-radius: 9999px;
color: #64748b;
}
.filter-categories-list li.active .count {
background: rgba(56, 189, 248, 0.2);
color: #38bdf8;
} .price-slider-box {
display: flex;
flex-direction: column;
gap: 10px;
}
.gnozis-range-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
outline: none;
cursor: pointer;
}
.gnozis-range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #38bdf8;
border-radius: 50%;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
cursor: pointer;
transition: transform 0.15s ease;
}
.gnozis-range-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.price-range-labels {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #64748b;
}
.current-price-val {
color: #38bdf8;
font-weight: 600;
} .gnozis-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 0.88rem;
color: #cbd5e1;
margin-bottom: 8px;
user-select: none;
}
.gnozis-checkbox-label input[type="checkbox"] {
display: none;
}
.checkbox-box {
width: 18px;
height: 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 5px;
background: rgba(15, 23, 42, 0.6);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}
.gnozis-checkbox-label input[type="checkbox"]:checked + .checkbox-box {
background: #0284c7;
border-color: #38bdf8;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
.gnozis-checkbox-label input[type="checkbox"]:checked + .checkbox-box::after {
content: '✓';
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
}
.btn-reset-shop-filters {
width: 100%;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: #94a3b8;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-reset-shop-filters:hover {
background: rgba(255, 255, 255, 0.08);
color: #f8fafc;
border-color: rgba(255, 255, 255, 0.15);
} .gnozis-shop-catalog {
display: flex;
flex-direction: column;
gap: 20px;
}
.catalog-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
background: rgba(13, 19, 33, 0.6);
border: 1px solid rgba(56, 189, 248, 0.15);
border-radius: 14px;
padding: 12px 20px;
backdrop-filter: blur(10px);
}
.catalog-count {
font-size: 0.95rem;
font-weight: 600;
color: #f8fafc;
}
.catalog-count span {
color: #38bdf8;
}
.catalog-toolbar-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.btn-toggle-shop-filters-mobile {
display: none;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 10px;
color: #94a3b8;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap !important;
flex-shrink: 0 !important;
transition: all 0.2s ease;
font-family: inherit;
}
.btn-toggle-shop-filters-mobile:hover,
.btn-toggle-shop-filters-mobile.active {
background: rgba(56, 189, 248, 0.2);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.3);
}
.btn-toggle-shop-filters-mobile svg {
color: #38bdf8;
}
.btn-gnozis-add-product {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(14, 165, 233, 0.28) 100%);
border: 1px solid rgba(56, 189, 248, 0.5);
border-radius: 10px;
padding: 8px 16px;
color: #38bdf8;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap !important;
flex-shrink: 0 !important;
font-family: inherit;
}
.btn-gnozis-add-product:hover {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.3) 0%, rgba(14, 165, 233, 0.45) 100%);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 22px rgba(56, 189, 248, 0.5);
transform: translateY(-1px);
}
.gnozis-select {
background: rgba(8, 12, 20, 0.8);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: 9px;
padding: 8px 14px;
color: #e2e8f0;
font-size: 0.88rem;
outline: none;
cursor: pointer;
transition: border-color 0.2s ease;
font-family: inherit;
}
.gnozis-select:focus {
border-color: #38bdf8;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
} .gnozis-products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
} .gnozis-product-card {
position: relative;
background: radial-gradient(140% 140% at 50% 0%, #111a2e 0%, #080c14 100%);
border: 1px solid rgba(56, 189, 248, 0.16);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.gnozis-product-card:hover {
transform: translateY(-3px);
border-color: rgba(56, 189, 248, 0.45);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 18px rgba(56, 189, 248, 0.15);
}
.card-badge-discount {
position: absolute;
top: 8px;
left: 8px;
z-index: 4;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: #ffffff;
font-size: 0.72rem;
font-weight: 800;
padding: 3px 7px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
letter-spacing: 0.02em;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 4;
background: rgba(8, 12, 20, 0.85);
border: 1px solid rgba(56, 189, 248, 0.3);
color: #38bdf8;
font-size: 0.68rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 6px;
backdrop-filter: blur(6px);
}
.card-thumb-frame {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-height: 200px;
overflow: hidden;
background: #060911;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.card-thumb-img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.4s ease;
}
.gnozis-product-card:hover .card-thumb-img {
transform: scale(1.05);
}
.card-thumb-aura {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(8, 12, 20, 0.95) 100%);
pointer-events: none;
}
.card-body {
padding: 12px 10px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.card-category {
font-size: 0.68rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.card-title {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 4px;
}
.card-title a {
color: #f8fafc;
text-decoration: none;
transition: color 0.2s ease;
}
.card-title a:hover {
color: #38bdf8;
}
.card-desc {
font-size: 0.84rem;
color: #94a3b8;
line-height: 1.5;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.card-footer {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.card-price-box {
display: flex;
align-items: baseline;
gap: 8px;
}
.card-price-current {
font-size: 1.25rem;
font-weight: 800;
color: #f8fafc;
}
.gnozis-product-card.has-discount .card-price-current {
color: #38bdf8;
}
.card-price-old {
font-size: 0.9rem;
color: #64748b;
text-decoration: line-through;
}
.card-actions {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.btn-card-buy-oneclick {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
border: none;
border-radius: 9px;
padding: 8px 12px;
color: #ffffff;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 12px rgba(2, 132, 199, 0.3);
}
.btn-card-buy-oneclick:hover {
background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
box-shadow: 0 4px 16px rgba(56, 189, 248, 0.5);
}
.btn-card-add-cart {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 9px;
color: #e2e8f0;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-card-add-cart:hover {
background: rgba(56, 189, 248, 0.15);
border-color: rgba(56, 189, 248, 0.4);
color: #38bdf8;
}
.card-stock-status {
font-size: 0.78rem;
display: flex;
align-items: center;
gap: 5px;
}
.card-stock-status.instock {
color: #10b981;
}
.card-stock-status.onbackorder {
color: #f59e0b;
}
.card-stock-status.outofstock {
color: #ef4444;
} .shop-empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
background: rgba(13, 19, 33, 0.5);
border: 1px dashed rgba(56, 189, 248, 0.2);
border-radius: 16px;
}
.empty-state-sigil {
font-size: 2.5rem;
color: #38bdf8;
margin-bottom: 12px;
}
.empty-state-title {
font-size: 1.25rem;
font-weight: 700;
color: #f8fafc;
margin-bottom: 8px;
}
.empty-state-desc {
font-size: 0.92rem;
color: #94a3b8;
margin-bottom: 20px;
} .gnozis-modal-product-editor {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
}
.gnozis-modal-product-editor.open,
.gnozis-modal-product-editor.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.gnozis-modal-product-editor .gnozis-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(4, 7, 14, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 1;
}
.gnozis-modal-dialog.gnozis-modal-add-product {
position: relative;
z-index: 2;
background: radial-gradient(130% 130% at 50% 0%, #101827 0%, #090d16 100%);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 20px;
width: 100%;
max-width: 680px;
max-height: 90vh;
overflow-y: auto;
padding: 32px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.15);
transform: translateY(20px) scale(0.97);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
scrollbar-width: thin;
scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
}
.gnozis-modal-product-editor.open .gnozis-modal-dialog,
.gnozis-modal-product-editor.active .gnozis-modal-dialog {
transform: translateY(0) scale(1);
}
.gnozis-modal-close {
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #94a3b8;
font-size: 1.3rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.gnozis-modal-close:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
}
.gnozis-modal-add-product .gnozis-modal-header {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 24px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.modal-sigil-icon {
font-size: 1.8rem;
color: #38bdf8;
text-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
margin-bottom: 6px;
line-height: 1;
}
.gnozis-modal-add-product .gnozis-modal-title {
font-size: 1.5rem !important;
font-weight: 800 !important;
color: #f8fafc !important;
margin-bottom: 6px !important;
line-height: 1.3 !important;
text-align: center !important;
}
.gnozis-modal-add-product .gnozis-modal-subtitle {
font-size: 0.88rem !important;
color: #94a3b8 !important;
line-height: 1.5 !important;
text-align: center !important;
}
.modal-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group.half-width {
grid-column: span 1;
}
.form-group.align-center-group {
display: flex;
align-items: flex-end;
padding-bottom: 6px;
}
.form-group label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: #cbd5e1;
margin-bottom: 6px;
}
.form-group label .required {
color: #ef4444;
}
.gnozis-input,
.gnozis-textarea {
width: 100%;
background: rgba(8, 12, 20, 0.85);
border: 1px solid rgba(56, 189, 248, 0.22);
border-radius: 10px;
padding: 10px 14px;
color: #f8fafc;
font-size: 0.9rem;
outline: none;
transition: all 0.2s ease;
font-family: inherit;
}
.gnozis-input:focus,
.gnozis-textarea:focus,
.modal-form-grid .gnozis-select:focus {
border-color: #38bdf8;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
background: rgba(8, 12, 20, 0.98);
}
.modal-form-grid .gnozis-select {
width: 100%;
}
.gnozis-textarea {
resize: vertical;
min-height: 70px;
} .image-uploader-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px 16px;
border: 2px dashed rgba(56, 189, 248, 0.35);
border-radius: 12px;
background: rgba(8, 12, 20, 0.6);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
text-align: center;
min-height: 140px;
overflow: hidden;
}
.image-uploader-box:hover,
.image-uploader-box.is-dragover {
border-color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}
.dropzone-file-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.image-uploader-box.has-preview .dropzone-file-input {
pointer-events: none;
z-index: 0;
}
.image-upload-prompt {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
user-select: none;
pointer-events: none;
}
.image-upload-prompt .prompt-icon {
font-size: 2rem;
line-height: 1;
filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}
.image-upload-prompt .prompt-info {
display: flex;
flex-direction: column;
gap: 3px;
}
.prompt-main-text {
font-size: 0.92rem;
font-weight: 600;
color: #f8fafc;
}
.prompt-sub-text {
font-size: 0.78rem;
color: #94a3b8;
}
.btn-uploader-browse {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(56, 189, 248, 0.14);
border: 1px solid rgba(56, 189, 248, 0.4);
border-radius: 8px;
color: #38bdf8;
font-size: 0.82rem;
font-weight: 600;
margin-top: 4px;
transition: all 0.2s ease;
pointer-events: none;
}
.image-uploader-box:hover .btn-uploader-browse {
background: rgba(56, 189, 248, 0.28);
border-color: #38bdf8;
color: #ffffff;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
}
.image-preview-slot {
position: relative;
width: 140px;
height: 140px;
border-radius: 10px;
overflow: hidden;
border: 2px solid #38bdf8;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
background: #020617;
z-index: 4;
}
.image-preview-slot img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
}
.btn-remove-preview {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
background: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(239, 68, 68, 0.8);
border-radius: 50%;
color: #ef4444;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
line-height: 1;
transition: all 0.2s ease;
z-index: 10;
}
.btn-remove-preview:hover {
background: #ef4444;
color: #ffffff;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}
.gnozis-form-message {
padding: 10px 14px;
border-radius: 8px;
font-size: 0.85rem;
margin-bottom: 16px;
display: none;
}
.gnozis-form-message.success {
display: block;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #34d399;
}
.gnozis-form-message.error {
display: block;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #f87171;
}
.modal-actions-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.btn-gnozis-ghost {
padding: 10px 20px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
color: #94a3b8;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-gnozis-ghost:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.3);
}
.btn-submit-add-product,
.btn-gnozis-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
border: 1px solid rgba(56, 189, 248, 0.5);
border-radius: 10px;
padding: 10px 24px;
color: #ffffff;
font-weight: 700;
font-size: 0.92rem;
cursor: pointer;
box-shadow: 0 4px 18px rgba(2, 132, 199, 0.4);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-submit-add-product:hover,
.btn-gnozis-primary:hover {
background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
box-shadow: 0 6px 24px rgba(56, 189, 248, 0.6);
transform: translateY(-1px);
}
.btn-submit-add-product:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
} @media (max-width: 900px) {
.gnozis-shop-layout {
display: flex;
flex-direction: column;
}
.gnozis-shop-filters {
display: none !important;
width: 100%;
margin-bottom: 20px;
}
.gnozis-shop-filters.is-open {
display: flex !important;
flex-direction: column;
animation: gnozisFadeSlideDown 0.22s ease-out;
}
.btn-toggle-shop-filters-mobile {
display: inline-flex !important;
}
.modal-form-grid {
grid-template-columns: 1fr;
}
.form-group.half-width {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.catalog-toolbar {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 12px 14px;
}
.catalog-count {
text-align: left;
}
.catalog-toolbar-actions {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: nowrap;
}
.btn-gnozis-add-product {
padding: 8px 12px;
font-size: 0.82rem;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.btn-toggle-shop-filters-mobile {
padding: 8px 11px;
font-size: 0.82rem;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.catalog-sorting {
flex: 1;
min-width: 0;
}
.catalog-sorting .gnozis-select {
width: 100%;
min-width: 0;
padding: 8px 10px;
font-size: 0.82rem;
} .gnozis-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.gnozis-product-card {
border-radius: 12px !important;
}
.card-thumb-frame {
max-height: 155px !important;
padding: 6px !important;
}
.card-body {
padding: 8px 6px !important;
gap: 4px !important;
}
.card-category {
font-size: 0.62rem !important;
}
.card-title {
font-size: 0.82rem !important;
margin-bottom: 2px !important;
line-height: 1.25 !important;
}
.card-desc {
display: none !important;
}
.card-price-stack {
gap: 2px !important;
}
.card-price-group {
gap: 4px !important;
}
.card-price,
.card-price.price-sale strong {
font-size: 0.95rem !important;
}
.card-price-old {
font-size: 0.72rem !important;
}
.card-discount-economy-line {
gap: 4px !important;
margin-top: 1px !important;
}
.card-discount-pill {
font-size: 0.62rem !important;
padding: 1px 4px !important;
}
.card-economy-text {
display: none !important;
}
.card-actions-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
margin-top: 4px !important;
}
.btn-gnozis-card-cart {
padding: 8px 10px !important;
font-size: 0.78rem !important;
border-radius: 8px !important;
}
.card-admin-bar {
gap: 4px !important;
margin-top: 4px !important;
padding-top: 4px !important;
}
.btn-admin-card-edit,
.btn-admin-card-delete {
padding: 4px 2px !important;
font-size: 0.65rem !important;
}
.card-badge,
.card-badge-discount {
top: 6px !important;
left: 6px !important;
right: 6px !important;
font-size: 0.62rem !important;
padding: 2px 5px !important;
border-radius: 5px !important;
}
} .gnozis-guest-composer-banner {
background: linear-gradient(135deg, rgba(14, 20, 34, 0.85) 0%, rgba(19, 29, 50, 0.7) 100%);
border: 1px solid rgba(56, 189, 248, 0.2);
border-radius: 16px;
padding: 22px 24px;
margin-bottom: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
transition: all 0.3s ease;
}
.gnozis-guest-composer-banner:hover {
border-color: rgba(56, 189, 248, 0.35);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.1);
}
.guest-composer-banner-inner {
display: flex;
align-items: center;
gap: 20px;
}
.guest-composer-icon-wrap {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(129, 140, 248, 0.15) 100%);
border: 1px solid rgba(56, 189, 248, 0.25);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 24px;
}
.guest-composer-body {
flex: 1;
min-width: 0;
}
.guest-composer-title {
margin: 0 0 6px 0;
font-size: 1.05rem;
font-weight: 700;
color: #f8fafc;
letter-spacing: -0.01em;
}
.guest-composer-desc {
margin: 0;
font-size: 0.88rem;
color: #94a3b8;
line-height: 1.5;
}
.guest-composer-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.btn-guest-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-guest-login {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: #ffffff;
border: 1px solid rgba(56, 189, 248, 0.3);
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}
.btn-guest-login:hover {
background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
transform: translateY(-1px);
color: #ffffff;
}
.btn-guest-register {
background: rgba(255, 255, 255, 0.05);
color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.btn-guest-register:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(56, 189, 248, 0.4);
color: #38bdf8;
transform: translateY(-1px);
} .comment-guest-lock-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 18px;
margin-top: 10px;
background: rgba(15, 23, 42, 0.6);
border: 1px dashed rgba(56, 189, 248, 0.2);
border-radius: 10px;
font-size: 0.86rem;
color: #94a3b8;
text-align: center;
}
.comment-guest-lock-icon {
font-size: 15px;
}
.comment-guest-lock-text {
line-height: 1.4;
}
.comment-guest-link {
color: #38bdf8;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
.comment-guest-link:hover {
color: #7dd3fc;
text-decoration: underline;
}
@media (max-width: 640px) {
.guest-composer-banner-inner {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.guest-composer-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.btn-guest-action {
width: 100%;
text-align: center;
}
} .gnozis-cart-page-wrapper {
width: 100%;
min-height: calc(100vh - 120px);
padding: 24px 0 60px;
position: relative;
z-index: 2;
}
.gnozis-cart-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
.gnozis-cart-header {
text-align: center;
margin-bottom: 36px;
}
.cart-header-sigil {
font-size: 1.15rem;
color: var(--accent-bright);
letter-spacing: 0.3em;
margin-bottom: 8px;
text-shadow: 0 0 12px var(--accent-glow-strong);
}
.cart-main-title {
font-size: 2.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.cart-subtitle {
font-size: 0.95rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.5;
}
.gnozis-cart-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 28px;
align-items: start;
}
.gnozis-cart-form-card {
padding: 24px;
background: rgba(14, 20, 34, 0.75);
backdrop-filter: blur(16px);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
}
.gnozis-cart-items-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.gnozis-cart-item-row {
display: grid;
grid-template-columns: 76px 1fr 120px 100px 36px;
gap: 16px;
align-items: center;
padding: 16px;
background: rgba(10, 15, 29, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
transition: var(--gnozis-transition);
}
.gnozis-cart-item-row:hover {
border-color: rgba(96, 120, 144, 0.3);
background: rgba(10, 15, 29, 0.85);
}
.cart-item-thumb img {
width: 76px;
height: 76px;
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.cart-item-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 6px 0;
}
.cart-item-title a {
color: var(--text-primary);
text-decoration: none;
transition: color 0.2s;
}
.cart-item-title a:hover {
color: var(--accent-bright);
}
.cart-item-unit-price {
font-size: 0.88rem;
color: var(--text-secondary);
}
.cart-item-qty .quantity {
display: inline-flex;
}
.cart-item-qty .qty {
width: 64px;
padding: 8px 10px;
background: rgba(16, 24, 32, 0.85);
border: 1px solid var(--border-card);
border-radius: 8px;
color: #fff;
text-align: center;
font-size: 0.95rem;
}
.cart-item-subtotal {
font-size: 1.05rem;
font-weight: 700;
color: var(--accent-bright);
text-align: right;
}
.btn-remove-cart-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
color: #94a3b8;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: var(--gnozis-transition);
}
.btn-remove-cart-item:hover {
color: #ef4444;
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.3);
}
.gnozis-cart-actions-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cart-coupon-wrap {
display: flex;
gap: 10px;
flex: 1;
max-width: 400px;
}
.input-coupon {
flex: 1;
}
.btn-coupon-apply {
padding: 10px 18px;
background: rgba(96, 120, 144, 0.18);
border: 1px solid rgba(96, 120, 144, 0.35);
border-radius: 10px;
color: #e2e8f0;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: var(--gnozis-transition);
}
.btn-coupon-apply:hover {
background: rgba(96, 120, 144, 0.35);
color: #fff;
}
.btn-update-cart {
padding: 10px 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: #cbd5e1;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: var(--gnozis-transition);
}
.btn-update-cart:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.gnozis-cart-totals-card {
padding: 24px;
background: rgba(14, 20, 34, 0.75);
backdrop-filter: blur(16px);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
position: sticky;
top: 80px;
}
.cart-totals-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 20px 0;
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cart-totals-rows {
display: flex;
flex-direction: column;
gap: 12px;
}
.totals-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
color: var(--text-secondary);
}
.totals-value {
font-weight: 600;
color: var(--text-primary);
}
.totals-divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 8px 0;
}
.totals-grand-row {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
}
.totals-grand-value {
color: var(--accent-bright);
font-size: 1.35rem;
}
.cart-proceed-to-checkout {
margin-top: 24px;
}
.btn-checkout-proceed {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
text-align: center;
padding: 14px 20px;
font-size: 1.05rem;
font-weight: 700;
}
.cart-continue-shopping-row {
margin-top: 16px;
text-align: center;
}
.link-continue-shopping {
color: #94a3b8;
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s;
}
.link-continue-shopping:hover {
color: var(--accent-bright);
}
.gnozis-empty-cart-card {
text-align: center;
padding: 60px 24px;
max-width: 600px;
margin: 40px auto;
}
.empty-cart-sigil-wrap {
position: relative;
width: 96px;
height: 96px;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
}
.empty-cart-orb {
color: #607890;
}
.empty-cart-glow {
position: absolute;
inset: -10px;
background: radial-gradient(circle, rgba(96, 120, 144, 0.25) 0%, transparent 70%);
pointer-events: none;
}
.empty-cart-title {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 12px;
}
.empty-cart-desc {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 28px;
} .gnozis-single-page-wrapper,
.gnozis-archive-page-wrapper,
.gnozis-search-page-wrapper {
width: 100%;
min-height: calc(100vh - 120px);
padding: 24px 0 60px;
position: relative;
z-index: 2;
}
.gnozis-single-container,
.gnozis-archive-container,
.gnozis-search-container {
max-width: 920px;
margin: 0 auto;
padding: 0 20px;
}
.single-meta-top,
.page-meta-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
font-size: 0.88rem;
}
.single-breadcrumb-link,
.page-breadcrumb-link {
color: #94a3b8;
text-decoration: none;
transition: color 0.2s;
}
.single-breadcrumb-link:hover,
.page-breadcrumb-link:hover {
color: var(--accent-bright);
}
.single-category-badge,
.archive-cat-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(96, 120, 144, 0.15);
border: 1px solid rgba(96, 120, 144, 0.3);
border-radius: 20px;
color: #7dd3fc;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
}
.gnozis-single-article-card,
.gnozis-page-card {
padding: 36px 40px;
background: rgba(14, 20, 34, 0.75);
backdrop-filter: blur(16px);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
margin-bottom: 32px;
}
.single-article-title {
font-size: 2.3rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.25;
margin: 0 0 20px 0;
letter-spacing: -0.02em;
}
.single-author-bar {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 24px;
margin-bottom: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.single-author-avatar-img {
width: 46px;
height: 46px;
border-radius: 50%;
border: 2px solid rgba(96, 120, 144, 0.4);
object-fit: cover;
}
.single-author-name {
font-size: 1.05rem;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
}
.single-author-name:hover {
color: var(--accent-bright);
}
.single-post-details {
font-size: 0.82rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.single-featured-image-wrap {
position: relative;
border-radius: 14px;
overflow: hidden;
margin-bottom: 32px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.single-featured-img {
width: 100%;
max-height: 480px;
object-fit: cover;
display: block;
} .gnozis-prose-content {
font-size: 1.05rem;
line-height: 1.8;
color: #e2e8f0;
}
.gnozis-prose-content p {
margin-bottom: 1.5em;
}
.gnozis-prose-content h2,
.gnozis-prose-content h3,
.gnozis-prose-content h4 {
color: #fff;
font-weight: 700;
margin-top: 1.8em;
margin-bottom: 0.8em;
line-height: 1.3;
}
.gnozis-prose-content h2 { font-size: 1.65rem; }
.gnozis-prose-content h3 { font-size: 1.35rem; }
.gnozis-prose-content blockquote {
border-left: 3px solid var(--accent-bright);
background: rgba(96, 120, 144, 0.08);
padding: 16px 20px;
margin: 1.8em 0;
border-radius: 0 10px 10px 0;
font-style: italic;
color: #cbd5e1;
}
.gnozis-prose-content ul,
.gnozis-prose-content ol {
padding-left: 24px;
margin-bottom: 1.5em;
}
.gnozis-prose-content li {
margin-bottom: 0.5em;
}
.gnozis-prose-content a {
color: #38bdf8;
text-decoration: underline;
text-underline-offset: 3px;
}
.gnozis-prose-content a:hover {
color: #7dd3fc;
}
.single-tags-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tags-label {
font-size: 0.88rem;
font-weight: 600;
color: var(--text-secondary);
}
.tags-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.single-tag-pill {
padding: 4px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
color: #94a3b8;
font-size: 0.82rem;
text-decoration: none;
transition: var(--gnozis-transition);
}
.single-tag-pill:hover {
color: #fff;
background: rgba(96, 120, 144, 0.25);
border-color: rgba(96, 120, 144, 0.4);
}
.single-share-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
margin-top: 24px;
padding: 16px 20px;
background: rgba(10, 15, 29, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
}
.share-title {
font-size: 0.9rem;
font-weight: 600;
color: #cbd5e1;
}
.share-buttons-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn-share-social {
padding: 6px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: #e2e8f0;
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: var(--gnozis-transition);
}
.btn-share-social:hover {
background: rgba(96, 120, 144, 0.35);
color: #fff;
}
.single-author-box {
display: flex;
gap: 18px;
align-items: center;
padding: 20px 24px;
margin-top: 28px;
background: rgba(10, 15, 29, 0.8);
border: 1px solid rgba(96, 120, 144, 0.2);
border-radius: 14px;
}
.author-box-avatar img {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid rgba(96, 120, 144, 0.4);
object-fit: cover;
}
.author-box-role {
font-size: 0.76rem;
color: #7dd3fc;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.author-box-name {
font-size: 1.15rem;
font-weight: 700;
margin: 2px 0 6px 0;
}
.author-box-name a {
color: #fff;
text-decoration: none;
}
.author-box-bio {
font-size: 0.88rem;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.single-post-navigation-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 32px;
}
.post-nav-card {
padding: 16px 20px;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(14, 20, 34, 0.75);
border: 1px solid var(--border-card);
border-radius: 12px;
transition: var(--gnozis-transition);
}
.post-nav-card:hover {
border-color: rgba(96, 120, 144, 0.4);
background: rgba(18, 26, 44, 0.9);
}
.post-nav-dir {
font-size: 0.78rem;
color: #7dd3fc;
font-weight: 600;
}
.post-nav-title {
font-size: 0.95rem;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .gnozis-comments-area {
padding: 32px;
background: rgba(14, 20, 34, 0.75);
backdrop-filter: blur(16px);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
}
.comments-section-header {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.comments-main-title {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.comments-count-pill {
padding: 2px 10px;
background: rgba(96, 120, 144, 0.25);
border-radius: 12px;
font-size: 0.82rem;
color: #7dd3fc;
}
.gnozis-comments-list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.gnozis-comment-item {
list-style: none;
}
.gnozis-comment-item .children {
list-style: none;
padding-left: 32px;
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
.comment-body-wrap {
display: flex;
gap: 14px;
padding: 16px;
background: rgba(10, 15, 29, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
}
.comment-author-avatar img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.comment-content-box {
flex: 1;
}
.comment-header-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.comment-author-name {
font-size: 0.95rem;
color: #fff;
}
.comment-date-time {
font-size: 0.78rem;
color: #94a3b8;
}
.comment-text-content {
font-size: 0.92rem;
line-height: 1.6;
color: #cbd5e1;
margin-bottom: 8px;
}
.comment-reply-row {
font-size: 0.8rem;
}
.comment-reply-row a {
color: #38bdf8;
text-decoration: none;
font-weight: 600;
}
.comment-reply-row a:hover {
text-decoration: underline;
} .gnozis-search-header-card,
.gnozis-archive-header-card {
text-align: center;
padding: 36px 24px;
margin-bottom: 32px;
background: rgba(14, 20, 34, 0.75);
backdrop-filter: blur(16px);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
}
.search-header-sigil,
.archive-header-sigil {
font-size: 1.1rem;
color: var(--accent-bright);
letter-spacing: 0.3em;
margin-bottom: 8px;
}
.search-main-title,
.archive-main-title {
font-size: 2.1rem;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 10px 0;
}
.search-subtitle,
.archive-description {
font-size: 0.95rem;
color: var(--text-secondary);
max-width: 580px;
margin: 0 auto;
}
.search-form-bar {
max-width: 540px;
margin: 24px auto 0;
}
.search-input-wrap {
display: flex;
gap: 8px;
}
.search-field-input {
flex: 1;
}
.gnozis-search-results-grid,
.archive-cards-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.search-result-card,
.archive-article-card {
display: flex;
gap: 20px;
padding: 22px;
background: rgba(14, 20, 34, 0.75);
backdrop-filter: blur(16px);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
transition: var(--gnozis-transition);
}
.search-result-card:hover,
.archive-article-card:hover {
border-color: rgba(96, 120, 144, 0.35);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.search-card-thumb,
.archive-card-thumb {
width: 180px;
height: 120px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
}
.search-thumb-img,
.archive-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.search-card-body,
.archive-card-body {
flex: 1;
display: flex;
flex-direction: column;
}
.search-card-meta-top,
.archive-card-meta-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.search-type-pill {
padding: 3px 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
font-size: 0.72rem;
font-weight: 600;
color: #7dd3fc;
}
.search-card-date,
.archive-card-date {
font-size: 0.78rem;
color: #94a3b8;
}
.search-card-title,
.archive-card-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 8px 0;
line-height: 1.35;
}
.search-card-title a,
.archive-card-title a {
color: #fff;
text-decoration: none;
transition: color 0.2s;
}
.search-card-title a:hover,
.archive-card-title a:hover {
color: var(--accent-bright);
}
.search-card-excerpt,
.archive-card-excerpt {
font-size: 0.88rem;
color: #cbd5e1;
line-height: 1.5;
margin-bottom: 14px;
flex: 1;
}
.search-card-footer,
.archive-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.search-card-author,
.archive-card-author {
display: flex;
align-items: center;
gap: 8px;
}
.search-author-img,
.archive-author-img {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
}
.search-author-name,
.archive-author-name {
font-size: 0.82rem;
color: #94a3b8;
}
.btn-view-result,
.btn-read-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 600;
color: #38bdf8;
text-decoration: none;
}
.btn-view-result:hover,
.btn-read-more:hover {
color: #7dd3fc;
}
.search-empty-state-card,
.archive-empty-card {
text-align: center;
padding: 48px 24px;
}
.empty-sigil-icon {
font-size: 3rem;
margin-bottom: 16px;
}
.empty-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.empty-desc {
color: var(--text-secondary);
max-width: 500px;
margin: 0 auto 24px;
line-height: 1.6;
}
.empty-suggestions-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
} .gnozis-pagination-wrap {
margin-top: 36px;
text-align: center;
}
.gnozis-pagination-wrap .nav-links {
display: inline-flex;
gap: 8px;
align-items: center;
}
.gnozis-pagination-wrap .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 10px;
background: rgba(14, 20, 34, 0.8);
border: 1px solid var(--border-card);
border-radius: 8px;
color: #e2e8f0;
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
transition: var(--gnozis-transition);
}
.gnozis-pagination-wrap .page-numbers.current,
.gnozis-pagination-wrap .page-numbers:hover {
background: rgba(96, 120, 144, 0.35);
border-color: rgba(96, 120, 144, 0.6);
color: #fff;
} @media (max-width: 900px) {
.gnozis-cart-grid {
grid-template-columns: 1fr;
}
.gnozis-single-article-card,
.gnozis-page-card {
padding: 24px 20px;
}
.single-article-title {
font-size: 1.8rem;
}
.search-result-card,
.archive-article-card {
flex-direction: column;
}
.search-card-thumb,
.archive-card-thumb {
width: 100%;
height: 180px;
}
}
@media (max-width: 640px) {
.gnozis-cart-item-row {
grid-template-columns: 60px 1fr 32px;
grid-template-areas:
"thumb info remove"
"qty qty subtotal";
gap: 12px;
}
.cart-item-thumb { grid-area: thumb; }
.cart-item-info { grid-area: info; }
.cart-item-remove { grid-area: remove; }
.cart-item-qty { grid-area: qty; }
.cart-item-subtotal { grid-area: subtotal; text-align: right; }
.single-post-navigation-grid {
grid-template-columns: 1fr;
}
}  .card-badge.badge-expected,
.stock-badge.is-expected {
background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(217, 119, 6, 0.35)) !important;
border: 1px solid rgba(245, 158, 11, 0.6) !important;
color: #fbbf24 !important;
text-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
box-shadow: 0 2px 10px rgba(245, 158, 11, 0.2);
}
.stock-badge.is-expected .stock-dot {
color: #fbbf24;
font-size: 0.9em;
} .btn-gnozis-card-notify {
grid-column: 1 / -1 !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 9px 12px !important;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.16) 0%, rgba(217, 119, 6, 0.28) 100%) !important;
border: 1px solid rgba(245, 158, 11, 0.5) !important;
border-radius: var(--gnozis-radius-sm, 8px) !important;
color: #fef08a !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: var(--gnozis-transition) !important;
box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15) !important;
white-space: nowrap !important;
text-align: center !important;
user-select: none !important;
}
.btn-gnozis-card-notify:hover {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.45) 100%) !important;
border-color: rgba(245, 158, 11, 0.85) !important;
color: #ffffff !important;
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35) !important;
transform: translateY(-1px) !important;
} .gnozis-expected-action-box {
background: linear-gradient(145deg, rgba(20, 24, 38, 0.85), rgba(15, 18, 28, 0.95));
border: 1px solid rgba(245, 158, 11, 0.35);
border-radius: 16px;
padding: 22px 20px;
margin: 18px 0;
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(245, 158, 11, 0.05);
}
.gnozis-expected-action-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.8), transparent);
}
.expected-box-header {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
}
.expected-badge-pill {
display: inline-block;
padding: 4px 10px;
background: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.4);
border-radius: 20px;
font-size: 0.78rem;
font-weight: 700;
color: #fbbf24;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.expected-sigil {
font-size: 2rem;
line-height: 1;
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
}
.expected-title {
font-size: 1.15rem;
font-weight: 700;
color: #f8fafc;
margin: 0 0 6px 0;
}
.expected-desc {
font-size: 0.9rem;
color: #94a3b8;
line-height: 1.5;
margin: 0;
} .gnozis-modal-notify-stock {
position: fixed !important;
inset: 0 !important;
z-index: 100005 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px 14px !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease !important;
}
.gnozis-modal-notify-stock.is-active,
.gnozis-modal-notify-stock.open,
.gnozis-modal-notify-stock.active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.gnozis-modal-notify-stock .gnozis-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(4, 7, 14, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 1;
}
.gnozis-modal-notify-dialog {
position: relative;
z-index: 2;
background: radial-gradient(130% 130% at 50% 0%, #101827 0%, #090d16 100%);
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 20px;
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
padding: 32px 28px;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(56, 189, 248, 0.15);
transform: translateY(20px) scale(0.97);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.gnozis-modal-notify-stock.is-active .gnozis-modal-notify-dialog,
.gnozis-modal-notify-stock.open .gnozis-modal-notify-dialog,
.gnozis-modal-notify-stock.active .gnozis-modal-notify-dialog {
transform: translateY(0) scale(1);
}
.notify-modal-header {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 22px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
width: 100% !important;
}
.notify-sigil-icon {
font-size: 2.2rem;
color: #38bdf8;
text-shadow: 0 0 18px rgba(56, 189, 248, 0.7);
margin-bottom: 8px;
line-height: 1;
display: block;
}
.notify-modal-title {
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #f8fafc !important;
margin: 0 0 8px 0 !important;
line-height: 1.35 !important;
text-align: center !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
width: 100% !important;
}
.notify-modal-subtitle {
font-size: 0.88rem !important;
color: #94a3b8 !important;
line-height: 1.5 !important;
margin: 0 !important;
text-align: center !important;
max-width: 440px !important;
white-space: normal !important;
}
.notify-target-product-card {
display: flex !important;
align-items: center !important;
gap: 10px !important;
background: rgba(245, 158, 11, 0.08) !important;
border: 1px solid rgba(245, 158, 11, 0.25) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
margin-bottom: 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.notify-product-sigil {
font-size: 1.3rem !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.notify-product-title-text {
font-size: 0.92rem !important;
font-weight: 700 !important;
color: #fef08a !important;
line-height: 1.4 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
flex: 1 !important;
min-width: 0 !important;
}
.notify-form-grid {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin-bottom: 20px !important;
width: 100% !important;
}
.notify-form-grid .form-group {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
width: 100% !important;
}
.notify-form-grid label {
display: block !important;
font-size: 0.84rem !important;
font-weight: 600 !important;
color: #cbd5e1 !important;
margin-bottom: 4px !important;
}
.notify-form-grid label .required {
color: #ef4444 !important;
}
.gnozis-modal-notify-dialog .gnozis-input {
width: 100% !important;
background: rgba(8, 12, 20, 0.85) !important;
border: 1px solid rgba(56, 189, 248, 0.25) !important;
border-radius: 10px !important;
padding: 12px 14px !important;
color: #f8fafc !important;
font-size: 0.95rem !important;
outline: none !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
}
.gnozis-modal-notify-dialog .gnozis-input:focus {
border-color: #38bdf8 !important;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.35) !important;
background: rgba(8, 12, 20, 0.98) !important;
} .btn-floating-bug-report {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 9990;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: linear-gradient(135deg, rgba(225, 29, 72, 0.9) 0%, rgba(159, 18, 57, 0.95) 100%);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50px;
font-size: 0.86rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
box-shadow: 0 8px 24px rgba(225, 29, 72, 0.4), 0 0 16px rgba(244, 63, 94, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
user-select: none;
}
.btn-floating-bug-report:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 12px 30px rgba(225, 29, 72, 0.55), 0 0 24px rgba(244, 63, 94, 0.5);
background: linear-gradient(135deg, rgba(244, 63, 94, 0.95) 0%, rgba(190, 18, 60, 1) 100%);
color: #ffffff;
}
.btn-floating-bug-report:active {
transform: translateY(0) scale(0.98);
}
.bug-float-icon {
font-size: 1.15rem;
line-height: 1;
animation: bugWiggle 3s ease-in-out infinite;
}
@keyframes bugWiggle {
0%, 100% { transform: rotate(0deg); }
15% { transform: rotate(-12deg); }
30% { transform: rotate(12deg); }
45% { transform: rotate(-6deg); }
60% { transform: rotate(6deg); }
75% { transform: rotate(0deg); }
}
@media (max-width: 768px) {
.btn-floating-bug-report {
bottom: 80px;
left: 14px;
padding: 8px 14px;
font-size: 0.8rem;
}
} .gnozis-modal-bug-report {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
align-items: center;
justify-content: center;
padding: 20px 14px;
}
.gnozis-modal-bug-report.is-active,
.gnozis-modal-bug-report.open {
display: flex !important;
}
.gnozis-modal-bug-dialog {
max-width: 580px;
width: 100%;
background: linear-gradient(180deg, #131b2e 0%, #0c1220 100%);
border: 1px solid rgba(244, 63, 94, 0.35);
border-radius: 20px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 35px rgba(244, 63, 94, 0.15);
padding: 26px 28px;
position: relative;
max-height: 90vh;
overflow-y: auto;
color: #f8fafc;
}
.bug-sigil-icon {
font-size: 2rem;
margin-bottom: 6px;
display: inline-block;
filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.6));
}
.gnozis-modal-bug-dialog .gnozis-modal-header {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 14px;
margin-bottom: 20px;
}
.gnozis-modal-bug-dialog .gnozis-modal-title {
font-size: 1.3rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 6px 0;
}
.gnozis-modal-bug-dialog .gnozis-modal-subtitle {
font-size: 0.86rem;
color: #94a3b8;
margin: 0;
line-height: 1.45;
max-width: 440px;
}
.modal-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.modal-form-grid .full-width {
grid-column: span 2;
}
.modal-form-grid .half-width {
grid-column: span 1;
}
@media (max-width: 600px) {
.modal-form-grid .half-width {
grid-column: span 2;
}
}
.gnozis-modal-bug-dialog .form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.gnozis-modal-bug-dialog label,
.gnozis-modal-bug-dialog .gnozis-field-label {
font-size: 0.84rem;
font-weight: 600;
color: #cbd5e1;
}
.gnozis-modal-bug-dialog .required {
color: #f43f5e;
}
.gnozis-modal-bug-dialog .gnozis-input,
.gnozis-modal-bug-dialog .gnozis-select,
.gnozis-modal-bug-dialog .gnozis-textarea {
width: 100%;
padding: 10px 14px;
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: #f8fafc;
font-size: 0.9rem;
font-family: inherit;
box-sizing: border-box;
transition: all 0.2s ease;
}
.gnozis-modal-bug-dialog .gnozis-input:focus,
.gnozis-modal-bug-dialog .gnozis-select:focus,
.gnozis-modal-bug-dialog .gnozis-textarea:focus {
outline: none;
border-color: #f43f5e;
box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18), 0 0 12px rgba(244, 63, 94, 0.15);
background: rgba(15, 23, 42, 0.95);
}
.gnozis-modal-bug-dialog .gnozis-textarea {
resize: vertical;
min-height: 85px;
} .bug-uploader-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(255, 255, 255, 0.02);
border: 2px dashed rgba(244, 63, 94, 0.3);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
min-height: 100px;
position: relative;
overflow: hidden;
}
.bug-uploader-box:hover,
.bug-uploader-box.drag-over {
background: rgba(244, 63, 94, 0.06);
border-color: rgba(244, 63, 94, 0.6);
}
.bug-uploader-box .image-upload-prompt {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
justify-content: space-between;
}
.bug-uploader-box .prompt-icon {
font-size: 1.6rem;
}
.bug-uploader-box .prompt-info {
display: flex;
flex-direction: column;
flex: 1;
}
.bug-uploader-box .prompt-main-text {
font-size: 0.86rem;
font-weight: 600;
color: #f1f5f9;
}
.bug-uploader-box .prompt-sub-text {
font-size: 0.72rem;
color: #94a3b8;
}
.bug-uploader-box .btn-uploader-browse {
padding: 6px 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
font-size: 0.78rem;
color: #cbd5e1;
font-weight: 600;
}
.bug-uploader-box .image-preview-slot {
position: relative;
max-height: 180px;
width: 100%;
text-align: center;
}
.bug-uploader-box .image-preview-slot img {
max-height: 160px;
max-width: 100%;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.15);
object-fit: contain;
}
.bug-uploader-box .btn-remove-preview {
position: absolute;
top: 4px;
right: 4px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(239, 68, 68, 0.9);
color: #ffffff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
line-height: 1;
transition: transform 0.2s ease;
}
.bug-uploader-box .btn-remove-preview:hover {
transform: scale(1.15);
} .bug-reporter-info-pill {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
font-size: 0.78rem;
color: #94a3b8;
}
.bug-reporter-info-pill strong {
color: #f1f5f9;
}
.modal-actions-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-gnozis-ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
color: #94a3b8;
padding: 10px 18px;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-gnozis-ghost:hover {
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
}
.btn-gnozis-primary.btn-submit-bug {
background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
border: 1px solid rgba(244, 63, 94, 0.4);
color: #ffffff;
padding: 10px 22px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
transition: all 0.2s ease;
}
.btn-gnozis-primary.btn-submit-bug:hover {
background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
transform: translateY(-1px);
}
.btn-gnozis-primary.btn-submit-bug:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
} .modal-group-members .group-members-modal-dialog {
background: rgba(15, 23, 42, 0.96) !important;
border: 1px solid rgba(56, 189, 248, 0.28) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.12) !important;
backdrop-filter: blur(20px) !important;
border-radius: 18px !important;
max-width: 760px !important;
width: 95% !important;
}
.group-tab-sub-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: #94a3b8;
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 6px 6px 0 0;
white-space: nowrap;
}
.group-tab-sub-btn:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.04);
}
.group-tab-sub-btn.active {
color: #38bdf8;
border-bottom-color: #38bdf8;
background: rgba(56, 189, 248, 0.08);
}
.group-member-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
transition: all 0.2s ease;
flex-wrap: wrap;
}
.group-member-item:hover {
background: rgba(255, 255, 255, 0.045);
border-color: rgba(56, 189, 248, 0.2);
transform: translateY(-1px);
}
.group-member-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 200px;
flex: 1 1 220px;
}
.group-member-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.group-member-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(56, 189, 248, 0.25);
}
.group-member-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.group-member-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
min-width: 0;
}
.group-member-name-link {
font-size: 0.92rem;
font-weight: 600;
color: #f1f5f9;
text-decoration: none;
transition: color 0.15s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
flex-shrink: 1;
}
.group-member-name-link:hover {
color: #38bdf8;
}
.group-role-badge {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 3px;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.role-badge-owner {
background: rgba(245, 158, 11, 0.16);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.45);
box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}
.role-badge-moderator {
background: rgba(56, 189, 248, 0.16);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.45);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}
.role-badge-member {
background: rgba(255, 255, 255, 0.05);
color: #94a3b8;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.role-badge-banned {
background: rgba(239, 68, 68, 0.16);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.45);
}
.group-member-occupation {
font-size: 0.76rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.group-member-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
margin-left: auto;
}
.btn-member-action {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.05);
color: #cbd5e1;
white-space: nowrap !important;
flex-shrink: 0;
}
.btn-member-action:hover {
transform: translateY(-1px);
}
.btn-action-promote {
border-color: rgba(56, 189, 248, 0.35);
color: #38bdf8;
background: rgba(56, 189, 248, 0.08);
}
.btn-action-promote:hover {
background: rgba(56, 189, 248, 0.18);
border-color: #38bdf8;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}
.btn-action-demote {
border-color: rgba(245, 158, 11, 0.35);
color: #fbbf24;
background: rgba(245, 158, 11, 0.08);
}
.btn-action-demote:hover {
background: rgba(245, 158, 11, 0.18);
border-color: #fbbf24;
}
.btn-action-kick {
border-color: rgba(239, 68, 68, 0.3);
color: #f87171;
background: rgba(239, 68, 68, 0.06);
}
.btn-action-kick:hover {
background: rgba(239, 68, 68, 0.18);
border-color: #f87171;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}
.btn-action-ban {
border-color: rgba(225, 29, 72, 0.35);
color: #fb7185;
background: rgba(225, 29, 72, 0.08);
}
.btn-action-ban:hover {
background: rgba(225, 29, 72, 0.22);
border-color: #fb7185;
box-shadow: 0 0 12px rgba(225, 29, 72, 0.3);
}
.btn-action-unban {
border-color: rgba(16, 185, 129, 0.35);
color: #34d399;
background: rgba(16, 185, 129, 0.08);
}
.btn-action-unban:hover {
background: rgba(16, 185, 129, 0.2);
border-color: #34d399;
box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}
@media (max-width: 640px) {
.group-member-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.group-member-actions {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
} .post-menu-divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 6px 0;
}
.report-modal-dialog {
max-width: 480px !important;
background: #0d1527 !important;
border: 1px solid rgba(120, 152, 184, 0.3) !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(99, 102, 241, 0.15) !important;
border-radius: 18px !important;
padding: 24px !important;
box-sizing: border-box;
}
.report-modal-dialog .gnozis-modal-close {
position: absolute;
top: 18px;
right: 18px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
line-height: 1;
}
.report-modal-dialog .gnozis-modal-close:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #f87171;
}
.report-reasons-list {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
.report-reasons-list .report-reason-item,
#gnozis-modal-report-post .report-reason-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
min-height: 44px !important;
padding: 8px 14px !important;
background: rgba(15, 23, 42, 0.65) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
user-select: none !important;
box-sizing: border-box !important;
margin: 0 !important;
width: 100% !important;
}
.report-reasons-list .report-reason-item:hover,
#gnozis-modal-report-post .report-reason-item:hover {
background: rgba(99, 102, 241, 0.1) !important;
border-color: rgba(99, 102, 241, 0.35) !important;
transform: translateY(-1px);
}
.report-reasons-list .report-reason-item:has(input[type="radio"]:checked),
#gnozis-modal-report-post .report-reason-item:has(input[type="radio"]:checked) {
background: rgba(99, 102, 241, 0.16) !important;
border-color: rgba(99, 102, 241, 0.6) !important;
box-shadow: 0 0 12px rgba(99, 102, 241, 0.2) !important;
}
.report-reasons-list .report-reason-item input[type="radio"],
#gnozis-modal-report-post .report-reason-item input[type="radio"] {
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
pointer-events: none !important;
margin: 0 !important;
}
.report-reasons-list .report-reason-item .reason-custom-radio,
#gnozis-modal-report-post .reason-custom-radio {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border-radius: 50% !important;
border: 2px solid rgba(148, 163, 184, 0.5) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.2s ease !important;
background: transparent !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
.report-reasons-list .report-reason-item input[type="radio"]:checked + .reason-custom-radio,
#gnozis-modal-report-post .report-reason-item input[type="radio"]:checked + .reason-custom-radio {
border-color: #6366f1 !important;
background: #6366f1 !important;
box-shadow: 0 0 8px rgba(99, 102, 241, 0.6) !important;
}
.report-reasons-list .report-reason-item .reason-custom-radio::after,
#gnozis-modal-report-post .reason-custom-radio::after {
content: '' !important;
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: #ffffff !important;
opacity: 0 !important;
transform: scale(0) !important;
transition: all 0.2s ease !important;
}
.report-reasons-list .report-reason-item input[type="radio"]:checked + .reason-custom-radio::after,
#gnozis-modal-report-post .report-reason-item input[type="radio"]:checked + .reason-custom-radio::after {
opacity: 1 !important;
transform: scale(1) !important;
}
.report-reasons-list .report-reason-item .reason-text,
#gnozis-modal-report-post .reason-text {
font-size: 0.88rem !important;
color: #e2e8f0 !important;
font-weight: 500 !important;
line-height: 1.3 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.report-modal-dialog textarea.gnozis-input-modal {
width: 100%;
background: rgba(10, 16, 28, 0.75);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 10px 14px;
color: #f8fafc;
font-family: inherit;
font-size: 0.88rem;
line-height: 1.5;
resize: vertical;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.report-modal-dialog textarea.gnozis-input-modal:focus {
border-color: #6366f1;
outline: none;
box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
}
.btn-toggle-block-user.is-blocked {
background: rgba(239, 68, 68, 0.15) !important;
border-color: rgba(239, 68, 68, 0.45) !important;
color: #fca5a5 !important;
}
.btn-toggle-block-user.is-blocked:hover {
background: rgba(239, 68, 68, 0.25) !important;
border-color: rgba(239, 68, 68, 0.6) !important;
}