/* Components CSS - Reusable UI components used across the site */

/* ============================================
   Translation meta (liten tillvalsnotis, inte inläggs-chrome)
   ============================================ */
.translation-controls {
  margin: 0.2rem 0 0;
  padding: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  max-width: 100%;
}

.translation-controls .translation-hint {
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.82;
  white-space: nowrap;
}

.translation-controls .translation-original-toggle {
  display: inline;
  margin: 0;
  padding: 0;
}

.translation-controls .translation-original-toggle[open] {
  flex-basis: 100%;
  width: 100%;
}

.translation-controls .translation-original-toggle summary.translation-inline-trigger {
  list-style: none;
}

.translation-controls .translation-original-toggle summary.translation-inline-trigger::-webkit-details-marker {
  display: none;
}

.translation-controls .translation-inline-trigger {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  text-underline-offset: 0.15em;
}

.translation-controls .translation-inline-trigger:hover,
.translation-controls .translation-inline-trigger:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  outline: none;
}

.translation-controls .translation-original-panel {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.35rem 0 0 0.45rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text);
  opacity: 0.92;
}

.translation-controls .translation-request-form {
  display: inline;
  margin: 0;
  padding: 0;
}

/* ============================================
   NSFW Content Blur
   ============================================ */
.nsfw-blur {
  filter: blur(20px);
  -webkit-filter: blur(20px);
  transition: filter 0.3s ease;
  pointer-events: none;
  user-select: none;
}

/* Clickable NSFW container with "Visa" button - only for main media stage */
.media-stage.nsfw-container {
  cursor: pointer;
  position: relative;
}

.media-stage.nsfw-container::after {
  content: 'Visa';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  pointer-events: none;
  z-index: 10;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-lg);
  background: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-family: var(--font-family);
  font-weight: 500;
  transition: all 0.2s ease;
  text-align: center;
  height: 38px;
  box-sizing: border-box;
}

.btn:hover {
  background: var(--color-primary-dark);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22) 0%, rgba(157, 78, 221, 0.2) 100%);
  color: var(--color-white);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.22),
              0 0 0 1px rgba(6, 182, 212, 0.24) inset;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(6, 182, 212, 0.5);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 100%);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(157, 78, 221, 0.12) 0%,
    rgba(6, 182, 212, 0.08) 100%);
  opacity: 0.65;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.3) 0%, rgba(157, 78, 221, 0.26) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.28),
              0 0 0 1px rgba(6, 182, 212, 0.3) inset;
  border-color: rgba(6, 182, 212, 0.6);
  text-decoration: none;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover::after {
  opacity: 0.9;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.22),
              0 0 0 1px rgba(6, 182, 212, 0.2) inset;
}

.btn-ghost {
  background: rgba(6, 182, 212, 0.05);
  color: var(--color-primary);
  border: 1px solid rgba(6, 182, 212, 0.3);
  padding: 0 var(--spacing-lg);
  height: 38px;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.btn-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(6, 182, 212, 0.1) 0%,
    rgba(157, 78, 221, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn-ghost::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ghost:hover {
  background: rgba(6, 182, 212, 0.15);
  color: var(--color-white);
  border-color: rgba(6, 182, 212, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.25),
              0 0 0 1px rgba(6, 182, 212, 0.2) inset;
  text-decoration: none;
}

.btn-ghost:hover::before {
  opacity: 1;
}

.btn-ghost:hover::after {
  left: 100%;
}

.btn-ghost:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2),
              0 0 0 1px rgba(6, 182, 212, 0.2) inset;
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.875rem;
  height: auto;
  min-height: 32px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Redigera-ikon på profilsidor (edit_icon_svg i core/helpers.php) */
.edit-icon-svg {
  display: block;
  flex-shrink: 0;
}

.trash-icon-svg {
  display: block;
  flex-shrink: 0;
}

.folder-plus-icon-svg {
  display: block;
  flex-shrink: 0;
}

.plus-icon-svg {
  display: block;
  flex-shrink: 0;
}

/* Flytande flik-FAB (profil, upptäck, m.fl.) */
.app-tab-fab {
  position: fixed;
  bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  right: max(1rem, calc(env(safe-area-inset-right, 0px) + 0.5rem));
  z-index: 160;
  width: 3.015rem;
  height: 3.015rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(248, 250, 252, 0.96);
  text-decoration: none;
  background:
    linear-gradient(155deg, rgba(38, 38, 46, 0.94) 0%, rgba(18, 18, 24, 0.97) 45%, rgba(28, 24, 38, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(157, 78, 221, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 20px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(6, 182, 212, 0.12),
    0 0 36px rgba(124, 58, 237, 0.1);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease,
    opacity 0.2s ease, visibility 0.2s ease;
}

.app-tab-fab .edit-icon-svg,
.app-tab-fab .plus-icon-svg {
  width: calc(22px * 0.97);
  height: calc(22px * 0.97);
}

.app-tab-fab--off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-tab-fab:hover {
  color: #fff;
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(157, 78, 221, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 36px rgba(6, 182, 212, 0.2),
    0 0 44px rgba(124, 58, 237, 0.16);
}

.app-tab-fab:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.85);
  outline-offset: 3px;
}

.app-tab-fab-host {
  padding-bottom: 2rem;
}

@media (min-width: 769px) {
  .app-tab-fab {
    bottom: max(4rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem));
    right: max(3.5rem, calc(env(safe-area-inset-right, 0px) + 2rem));
  }
}

@media (max-width: 768px) {
  body.has-app-bottom-nav .app-tab-fab {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px) + 0.6rem);
  }
}

.circle-arrow-left-icon-svg {
  display: block;
  flex-shrink: 0;
}

.btn.btn-icon-edit {
  padding: 0.35rem 0.55rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  line-height: 0;
}

a.edit-icon-only,
button.edit-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.gallery-actions-menu a.edit-icon-only {
  display: flex;
}

.profile-actions-menu a.profile-action-link.edit-icon-only {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-white);
  text-decoration: none;
}

.btn-danger:hover {
  background: #dc2626;
  color: var(--color-white);
  text-decoration: none;
}

.btn-success {
  background: var(--color-success);
  color: var(--color-white);
  text-decoration: none;
}

.btn-success:hover {
  background: #059669;
  color: var(--color-white);
  text-decoration: none;
}

.btn-warning {
  background: var(--color-warning);
  color: var(--color-white);
  text-decoration: none;
}

.btn-warning:hover {
  background: #d97706;
  color: var(--color-white);
  text-decoration: none;
}

.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-disabled:hover {
  background: rgba(6, 182, 212, 0.1);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.icon-button {
  position: relative !important;
  background: transparent;
  border: none;
  color: var(--color-text);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.icon-button:hover {
  color: var(--color-primary);
  background: transparent;
}

/* Ensure icon-button is the positioning context for badges */
.nav-notifs .icon-button:not(#notifBellBtn) {
  position: relative !important;
}

/* For notification bell button, use static so .icon-bell becomes the positioning context */
#notifBellBtn {
  position: static !important;
}

/* ============================================
   Forms
   ============================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-left: 0;
  margin-left: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.form-row {
  padding-left: var(--spacing-md);
}

.fieldset {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fieldset:hover {
  border-color: rgba(6, 182, 212, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

/* Remove margin-bottom from last fieldset when NOT in a grid container */
.fieldset:last-child {
  margin-bottom: 0;
}

/* Remove margin-bottom from ALL fieldsets in grid layouts (grid handles spacing with gap) 
   This must come after :last-child to override it for grid elements */
.grid-2 > .fieldset,
.grid-3 > .fieldset,
.grid-4 > .fieldset,
.grid-5 > .fieldset,
.grid-2-5 > .fieldset {
  margin-bottom: 0;
}

.form-label-modern {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.form-label {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-xs);
  letter-spacing: -0.01em;
}

/* Modern form labels for auth */
#login-form .form-label,
#register-form .form-label,
.auth-card .form-label {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-xs);
}

.form-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.form-actions.vertical {
  flex-direction: column;
  gap: var(--spacing-sm);
}

.form-actions.vertical .btn {
  width: 100%;
}

.form-check-inline {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  /* samma vänsterinryck som .form-row */
  padding-left: var(--spacing-md);
}

/* Inuti .form-row har raden redan padding — undvik dubbelt inryck */
.form-row .form-check-inline {
  padding-left: 0;
}

.form-check-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  transition: all 0.2s ease;
}

.form-check-inline input[type="checkbox"]:hover {
  border-color: var(--color-primary);
  background: rgba(6, 182, 212, 0.1);
}

.form-check-inline input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-inline input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.form-check-inline span {
  color: var(--color-text);
  user-select: none;
}

/* ============================================
   Inputs
   ============================================ */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="number"],
textarea {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  font-family: var(--font-family);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
  min-height: calc(1rem * 1.5 + var(--spacing-sm) * 2);
  position: relative;
}

/* Modern input styling for auth forms */
#login-form input,
#register-form input,
.auth-card input {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:focus,
input:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2),
              0 0 0 1px var(--color-primary);
  background: rgba(255, 255, 255, 0.04);
}

/* Modern focus gradient for auth inputs */
#login-form input:focus,
#register-form input:focus,
.auth-card input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2),
              0 0 0 1px var(--color-primary),
              0 0 20px rgba(6, 182, 212, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input.form-control:hover,
input[type="url"].form-control:hover,
input[type="number"].form-control:hover,
textarea.form-control:hover {
  border-color: rgba(6, 182, 212, 0.4);
  background-color: rgba(6, 182, 212, 0.05);
  background-image: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern hover for auth inputs */
#login-form input:hover,
#register-form input:hover,
.auth-card input:hover {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* Ingress textarea - smaller height for short excerpts */
textarea[name="excerpt"] {
  min-height: 60px;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

/* File input styling */
input[type="file"] {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid #2a2a2a;
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  font-family: var(--font-family);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

input[type="file"]:hover {
  border-color: var(--color-primary);
  background-color: rgba(6, 182, 212, 0.05);
}

input[type="file"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-glow);
}

input[type="file"]::-webkit-file-upload-button {
  padding: var(--spacing-xs) var(--spacing-md);
  margin-right: var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--color-primary-dark);
}

/* Input prefix styling */
.input-prefix {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #2a2a2a;
  border-radius: var(--border-radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.input-prefix .prefix {
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-muted);
  font-size: 1rem;
  flex-shrink: 0;
}

.input-prefix input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--spacing-sm) var(--spacing-md);
  padding-left: 0;
}

.input-prefix input:focus {
  outline: none;
}

.input-prefix:hover {
  border-color: var(--color-primary);
  background-color: rgba(6, 182, 212, 0.05);
}

.input-prefix:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-glow);
}

/* ============================================
   Selects
   ============================================ */
/* 
  Select system structure:
  - Native selects: Use select.form-control (standard styling)
  - Custom dropdowns: Use .custom-select-* classes (replaces native selects via JS)
  - Multi-select dropdowns: Use .language-select-* classes (for checkbox-based selections)
  
  All custom dropdowns share the same base styling for consistent appearance.
*/

/* 
  Native select styling - minimal styling for fallback (when JS is disabled)
  and brief display before JavaScript converts them to custom dropdowns.
  
  Note: All selects are automatically converted to custom dropdowns via JavaScript,
  but native selects are kept hidden for form submission compatibility.
*/
select.form-control {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid #2a2a2a;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg-card);
  width: 100%;
  box-sizing: border-box;
  min-height: calc(1rem * 1.5 + var(--spacing-sm) * 2);
}

select.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-glow);
}

/* Hide converted selects (they're replaced by custom dropdowns) */
select.custom-select-converted {
  display: none !important;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================
   Custom Select Dropdowns
   ============================================ */
/* 
  Custom dropdown system - replaces native selects for better styling control.
  All custom dropdowns (single-select and multi-select) share the same base styling.
*/

/* Wrapper for custom dropdown components */
.custom-select-wrapper,
.language-select-wrapper {
  position: relative;
  z-index: 1;
}

/* Increase z-index when dropdown is open */
.custom-select-wrapper:has(.custom-select-dropdown.open),
.language-select-wrapper:has(.language-select-dropdown[style*="display: block"]) {
  z-index: 10001;
}

/* Unified toggle button styling - shared base for all custom select toggles */
.custom-select-toggle,
.language-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  padding-right: calc(0.75rem * 2 + 12px);
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid transparent;
  background-image: linear-gradient(rgba(20, 20, 20, 0.6), rgba(20, 20, 20, 0.6)),
    linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(157, 78, 221, 0.3));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 8px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  box-sizing: border-box;
  font-size: 0.95rem;
  font-family: var(--font-family);
  min-height: calc(0.95rem * 1.5 + 0.75rem * 2);
  height: calc(0.95rem * 1.5 + 0.75rem * 2);
  line-height: 1.5;
  position: relative;
}

.custom-select-toggle:hover,
.language-select-toggle:hover {
  background-image: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)),
    linear-gradient(135deg, rgba(6, 182, 212, 0.4), rgba(157, 78, 221, 0.4));
}

.custom-select-toggle:focus,
.language-select-toggle:focus {
  outline: none;
  background-image: linear-gradient(rgba(30, 30, 30, 0.8), rgba(30, 30, 30, 0.8)),
    linear-gradient(135deg, rgba(6, 182, 212, 0.5), rgba(157, 78, 221, 0.5));
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2),
    0 4px 12px rgba(6, 182, 212, 0.2);
}

/* Unified toggle icon styling */
.custom-select-toggle .toggle-icon,
.language-select-toggle .toggle-icon {
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  flex-shrink: 0;
  width: auto;
  height: auto;
  text-align: center;
  line-height: 1;
  display: block;
  white-space: nowrap;
  visibility: visible;
  opacity: 1;
}

.custom-select-toggle:hover .toggle-icon,
.language-select-toggle:hover .toggle-icon {
  color: var(--color-primary);
}

.custom-select-toggle.open .toggle-icon {
  transform: translateY(-50%) rotate(180deg);
}

/* Unified toggle text styling */
.custom-select-toggle .toggle-text,
.language-select-toggle .toggle-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: var(--spacing-sm);
  min-width: 0;
}

/* Hide duplicate toggle-icons for language select */
.language-select-toggle .toggle-icon:not(:first-child) {
  display: none;
}

.language-select-toggle .toggle-icon:first-child {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Unified dropdown styling */
.custom-select-dropdown,
.language-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--spacing-xs);
  background: rgba(30, 30, 30, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid #2a2a2a;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--spacing-xs);
  display: none;
}

/* Ensure dropdown is visible above other elements */
.custom-select-dropdown.open {
  display: block;
  z-index: 10002;
}

/* Custom select option styling */
.custom-select-option {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: var(--border-radius-sm);
  color: var(--color-text);
}

.custom-select-option:hover {
  background: rgba(6, 182, 212, 0.1);
}

.custom-select-option.selected {
  background: rgba(6, 182, 212, 0.15);
  color: var(--color-primary);
  font-weight: 500;
}

/* Kompakt sortering i resultatlistor (klass sätts i custom-selects.js; även när listan flyttas till body) */
.custom-select-wrapper.custom-select-compact .custom-select-toggle {
  padding: 0.3125rem 0.5rem;
  padding-right: calc(0.5rem + 14px + 0.45rem);
  font-size: 0.8125rem;
  min-height: 0;
  height: auto;
  line-height: 1.3;
  border-radius: var(--border-radius-sm);
}

.custom-select-wrapper.custom-select-compact .custom-select-toggle .toggle-icon {
  right: 0.45rem;
  font-size: 0.65rem;
}

.custom-select-wrapper.custom-select-compact .custom-select-dropdown,
.custom-select-dropdown.custom-select-compact {
  margin-top: 2px;
  padding: 2px;
}

.custom-select-wrapper.custom-select-compact .custom-select-option,
.custom-select-dropdown.custom-select-compact .custom-select-option {
  padding: 0.3125rem 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 400;
}

.custom-select-wrapper.custom-select-compact .custom-select-option.selected,
.custom-select-dropdown.custom-select-compact .custom-select-option.selected {
  font-weight: 500;
}

select.form-control.search-results-sort {
  padding: 0.3125rem var(--spacing-sm);
  font-size: 0.8125rem;
  min-height: 0;
  line-height: 1.3;
}

/* Language option styling - specific for multi-select dropdowns with checkboxes */
.language-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: var(--border-radius-sm);
}

.language-option:hover {
  background: rgba(6, 182, 212, 0.1);
}

.language-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  cursor: pointer;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  transition: all 0.2s ease;
}

.language-option input[type="checkbox"]:hover {
  border-color: var(--color-primary);
  background: rgba(6, 182, 212, 0.1);
}

.language-option input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.language-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.language-option span {
  flex: 1;
  color: var(--color-text);
  user-select: none;
}

/* ============================================
   Checkboxes
   ============================================ */
.checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: var(--spacing-xs) 0;
}

.checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  cursor: pointer;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  transition: all 0.2s ease;
}

.checkbox input[type="checkbox"]:hover {
  border-color: var(--color-primary);
  background: rgba(6, 182, 212, 0.1);
}

.checkbox input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.checkbox-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.checkbox-content strong {
  font-weight: 500;
  color: var(--color-text);
}

.checkbox-content small {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  line-height: 1.3;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ============================================
   Radio Buttons
   ============================================ */
.radio-group-horizontal {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.radio-group-horizontal .radio {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
}

.radio-group-horizontal .radio:hover {
  background: rgba(0, 255, 255, 0.1);
}

.radio-group-horizontal .radio input[type="radio"] {
  margin: 0;
}

.radio-group-horizontal .radio input[type="radio"]:checked + span {
  color: var(--color-primary);
  font-weight: 600;
}

.radio-group-center {
  justify-content: center;
}

.form-options--inline {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.form-options--inline-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 0 1 auto;
}

.form-options--inline-item input[type="radio"] {
  margin: 0;
}

/* ============================================
   Alerts
   ============================================ */
.alert {
  --alert-bg: rgba(255, 255, 255, 0.04);
  --alert-border: rgba(255, 255, 255, 0.12);
  --alert-text: var(--color-text);
  --alert-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  border-radius: var(--alert-radius);
  margin-bottom: var(--spacing-md);
  background: var(--alert-bg);
  color: var(--alert-text);
  border: 1px solid var(--alert-border);
  backdrop-filter: blur(12px);
}

.alert p,
.alert strong {
  color: inherit;
}

.alert a,
.alert-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

/* List item links - complete styling for all pages */
a.list-item {
  display: block;
  color: var(--color-text);
  text-decoration: none !important;
  transition: color 0.2s ease, background 0.2s ease;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-xs);
}

a.list-item:last-child {
  margin-bottom: 0;
}

a.list-item:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none !important;
}

.alert-danger {
  --alert-bg: rgba(239, 68, 68, 0.16);
  --alert-border: rgba(239, 68, 68, 0.45);
}

.alert-success {
  --alert-bg: rgba(16, 185, 129, 0.18);
  --alert-border: rgba(16, 185, 129, 0.45);
}

.alert-info {
  --alert-bg: rgba(6, 182, 212, 0.18);
  --alert-border: rgba(6, 182, 212, 0.45);
  --alert-text: var(--color-text);
  --alert-radius: var(--border-radius);
  padding: var(--spacing-md);
}

.alert-warning {
  --alert-bg: rgba(245, 158, 11, 0.16);
  --alert-border: rgba(245, 158, 11, 0.45);
  --alert-text: var(--color-text);
  --alert-radius: var(--border-radius);
  padding: var(--spacing-md);
}

/* ============================================
   Flash emphasis (nivå A) — Desyra-krom
   ============================================ */
.flash-emphasis-stack {
  margin-top: var(--header-content-gap);
  margin-bottom: var(--spacing-md);
}

.alert-app-emphasis {
  --alert-bg: transparent;
  --alert-border: rgba(255, 255, 255, 0.09);
  background: linear-gradient(
    155deg,
    rgba(157, 78, 221, 0.14) 0%,
    rgba(6, 182, 212, 0.07) 42%,
    rgba(18, 16, 28, 0.94) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 36px rgba(0, 0, 0, 0.32);
  padding: 0.75rem 1rem;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(40rem, calc(100vw - 1.5rem));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--color-text);
}

.alert-app-emphasis--success {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(16, 185, 129, 0.12),
    0 14px 36px rgba(0, 0, 0, 0.32);
}

.alert-app-emphasis--danger {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(239, 68, 68, 0.12),
    0 14px 36px rgba(0, 0, 0, 0.32);
}

.alert-app-emphasis--warning {
  border-color: rgba(245, 158, 11, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(245, 158, 11, 0.1),
    0 14px 36px rgba(0, 0, 0, 0.32);
}

.alert-app-emphasis--info {
  border-color: rgba(6, 182, 212, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(6, 182, 212, 0.1),
    0 14px 36px rgba(0, 0, 0, 0.32);
}

.alert-app-emphasis__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.alert-app-emphasis__msg {
  margin: 0;
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.45;
}

.flash-emphasis-dismiss {
  flex-shrink: 0;
  min-width: 2.25rem;
}

/* ============================================
   Toasts (nivå B)
   ============================================ */
.toast-stack {
  position: fixed;
  z-index: 180;
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
  max-width: min(22rem, calc(100vw - 1.5rem));
}

body.has-app-bottom-nav .toast-stack {
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(248, 250, 252, 0.95);
  background: linear-gradient(
    155deg,
    rgba(38, 38, 46, 0.96) 0%,
    rgba(22, 20, 32, 0.98) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.toast--in {
  opacity: 1;
  transform: translateY(0);
}

.toast--out {
  opacity: 0;
  transform: translateY(6px);
}

.toast__text {
  flex: 1;
  min-width: 0;
}

.toast__close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
  border-radius: 6px;
}

.toast__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.toast--success {
  border-color: rgba(16, 185, 129, 0.28);
}

.toast--info {
  border-color: rgba(6, 182, 212, 0.28);
}

.toast--warning {
  border-color: rgba(245, 158, 11, 0.3);
}

.toast--danger {
  border-color: rgba(239, 68, 68, 0.35);
}

/* ============================================
   Badges
   ============================================ */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

.badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-open {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-under_review {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-resolved {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-dismissed {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.admin-report-show .admin-report-grid {
  align-items: start;
}

.admin-report-section h2 {
  margin-top: 0;
}

.admin-report-section h3 {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}

.admin-report-kv dd {
  margin-bottom: 0.65rem;
}

.admin-report-excerpt {
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-report-party + .admin-report-party {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-report-party-name {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.admin-report-party-meta {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.admin-report-links,
.admin-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.admin-report-note {
  margin-bottom: 1rem;
}

.admin-report-history {
  margin-top: 1rem;
}

.admin-report-history h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-report-history-note {
  margin: 0 0 0.75rem;
}

.admin-report-notes-form textarea {
  width: 100%;
  min-height: 6rem;
}

.admin-report-tech summary {
  cursor: pointer;
  font-weight: 600;
}

.admin-report-list-target {
  font-weight: 600;
}

.admin-report-list-excerpt,
.admin-report-list-email {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.admin-report-list-user {
  display: block;
  font-weight: 600;
}

.admin-flash,
.admin-reports-flash {
  display: none;
}

.admin-spinner,
.admin-reports-spinner,
.row-spinner {
  display: none;
}

[id^="feed-post-view-"],
[id^="feed-promo-view-"],
.activity-item[id^="feed-post-"] {
  scroll-margin-top: calc(var(--topnav-height, 60px) + 1rem);
}

.alert .maintenance-banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  flex-direction: row;
}

.alert .maintenance-banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.alert .maintenance-banner-text {
  text-align: center;
}

.alert .maintenance-banner-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
  text-align: center;
}

.alert .maintenance-banner-text p {
  margin: 0;
  font-size: 1rem;
  text-align: center;
}

/* Maintenance banner spacing — samma som header → innehåll */
.maintenance-banner {
  margin-top: var(--header-content-gap) !important;
  margin-bottom: var(--header-content-gap) !important;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* E-postbekräftelse — samma krom som flash/status, inte gul varning */
.email-banner-wrap {
  margin-top: var(--header-content-gap) !important;
  margin-bottom: var(--header-content-gap) !important;
}

.email-banner-wrap .email-banner {
  margin-bottom: 0;
}

.email-banner__row {
  align-items: center;
}

.email-banner__form {
  flex-shrink: 0;
  margin: 0;
}

.email-banner__form .btn {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .email-banner__row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .email-banner__form {
    display: flex;
    justify-content: center;
  }
}

/* Lanseringsläge: app-lik statusrad (chrome / sheet), inte klassisk cyan webb-alert */
.alert.maintenance-banner--launch {
  --alert-bg: transparent;
  --alert-border: rgba(255, 255, 255, 0.09);
  background: linear-gradient(
    155deg,
    rgba(157, 78, 221, 0.12) 0%,
    rgba(6, 182, 212, 0.06) 42%,
    rgba(18, 16, 28, 0.94) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 14px 36px rgba(0, 0, 0, 0.32);
  padding: 0.75rem 1rem;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(40rem, calc(100vw - 1.5rem));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.alert.maintenance-banner--launch.maintenance-banner--compact {
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0.65rem 0.85rem;
}

.alert.maintenance-banner--launch .maintenance-banner-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 0.75rem;
  width: 100%;
}

.alert.maintenance-banner--launch .maintenance-banner-icon {
  font-size: 1.35rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.maintenance-banner-eyebrow {
  display: block;
  font-family: var(--font-family);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.2rem;
}

.alert.maintenance-banner--launch .maintenance-banner-text {
  text-align: left;
  min-width: 0;
}

.alert.maintenance-banner--launch .maintenance-banner-text h3 {
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  margin: 0 0 0.2rem 0;
  line-height: 1.3;
}

.alert.maintenance-banner--launch .maintenance-banner-text p {
  font-family: var(--font-family);
  font-size: 0.8125rem;
  text-align: left;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 768px) {
  .alert.maintenance-banner--launch:not(.maintenance-banner--compact) {
    max-width: calc(100vw - 1rem);
    padding: 0.65rem 0.75rem;
  }
}

/* Ensure maintenance banner content takes full width for proper centering */
.maintenance-banner .maintenance-banner-content {
  width: 100%;
  max-width: 100%;
}

/* Spacing between maintenance banner and login-required banner (alerts.wrap) */
.maintenance-banner + .alerts.wrap,
.email-banner-wrap + .maintenance-banner,
.maintenance-banner + .email-banner-wrap {
  margin-top: var(--header-content-gap) !important;
  margin-bottom: var(--header-content-gap) !important;
}

/* Banner spacing under topbar / ovanför innehåll */
.alerts.wrap {
  margin-top: var(--header-content-gap) !important;
  margin-bottom: var(--header-content-gap) !important;
}

/* Reduce margin-bottom on alerts inside alerts.wrap */
.alerts.wrap .alert {
  margin-bottom: 0;
}

/*
 * Banner/alerts margin-bottom ger gap — main ska inte också ha padding-top.
 * Använd body:has(): quick-post-overlay, flash m.m. ligger ofta MELLAN banner och
 * main (syns inte i devtools när man markerar innehåll — gapet är main:s padding).
 */
body:has(.maintenance-banner) main.container,
body:has(.email-banner-wrap) main.container,
body:has(.alerts.wrap) main.container,
body:has(.flash-emphasis-stack) main.container,
.maintenance-banner + main.container,
.email-banner-wrap + main.container,
.alerts.wrap + main.container,
.maintenance-banner + .alerts.wrap + main.container {
  padding-top: 0 !important;
  padding: 0 var(--spacing-md) 0 !important;
  margin-top: 0;
}

@media (max-width: 768px) {
  body:has(.maintenance-banner) main.container,
  body:has(.email-banner-wrap) main.container,
  body:has(.alerts.wrap) main.container,
  body:has(.flash-emphasis-stack) main.container,
  .maintenance-banner + main.container,
  .email-banner-wrap + main.container,
  .alerts.wrap + main.container,
  .maintenance-banner + .alerts.wrap + main.container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: max(var(--spacing-sm), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--spacing-sm), env(safe-area-inset-right, 0px)) !important;
  }
}

.maintenance-banner + main.container > .container,
.alerts.wrap + main.container > .container,
.maintenance-banner + .alerts.wrap + main.container > .container {
  padding-top: 0 !important;
}

/* Reduce container padding when banner is first child inside container */
.container:has(> .maintenance-banner:first-child) {
  padding-top: var(--spacing-sm);
}

/* Prevent nested containers from getting extra padding when banner exists */
/* This ensures only the first-level container gets reduced padding */
body:has(.maintenance-banner) main.container > .container,
body:has(.maintenance-banner) .container > .container {
  padding-top: 0;
}

.field-error {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
}

.error {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--color-danger);
}

/* ============================================
   Badges
   ============================================ */
.badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-danger);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 10;
  pointer-events: none;
}

/* Ensure icon has position relative for badge positioning */
.icon,
.icon-bell,
.icon-mail {
  position: relative !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.icon svg,
.icon-bell svg,
.icon-mail svg {
  display: block;
  transform: translateY(1px);
}

/* Ensure badge is positioned relative to icon, not icon-button or nav-notifs */
.icon .badge-count,
.icon-bell .badge-count,
.icon-mail .badge-count,
.icon-button .icon .badge-count,
#notifBellBtn .icon .badge-count,
.nav-notifs .icon-button .icon .badge-count {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  transform: none !important;
  margin: 0 !important;
}

/* Specifically for notification badge - ensure it's positioned relative to .icon-bell */
#notifBadge,
.icon-bell #notifBadge,
#notifBellBtn .icon-bell #notifBadge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  transform: none !important;
  margin: 0 !important;
  left: auto !important;
  bottom: auto !important;
}

/* ============================================
   Modals
   ============================================ */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.modal.show {
  display: flex;
}

/* Specific rule for admin modals */
.modal.admin-modal {
  display: none;
}

.modal.admin-modal.show {
  display: flex;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}

.modal-content {
  position: relative;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-large {
  width: 900px;
}

.modal-preview {
  max-width: 1200px;
  width: 95vw;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.modal-body {
  padding: var(--spacing-xl);
  max-height: 60vh;
  overflow-y: auto;
}

.modal-footer {
  padding: var(--spacing-md) var(--spacing-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

/* Compact modal for small confirmation dialogs */
.modal-content.modal-compact {
  max-width: 400px;
  width: auto;
  margin-bottom: 0;
}

.modal-content.modal-compact .modal-header {
  padding: var(--spacing-md) var(--spacing-lg);
}

.modal-content.modal-compact .modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
}

.modal-content.modal-compact .modal-body {
  padding: var(--spacing-lg);
}

.modal-content.modal-compact .modal-body p {
  margin: 0;
}

.modal-content.modal-compact .form-actions {
  padding: var(--spacing-md) var(--spacing-lg);
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Confirmation dialog specific styles */
.confirm-dialog-header {
  padding: var(--spacing-md) var(--spacing-xl);
}

.confirm-dialog-title {
  margin: 0;
  padding: 0;
}

.confirm-dialog-footer {
  justify-content: center;
}

/* ============================================
   Report modal (samma språk som quick-post / messages-modal)
   ============================================ */
.report-modal {
  padding: var(--spacing-md);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.report-modal .report-modal__panel.modal-content {
  position: relative;
  width: min(100%, 28rem);
  max-width: 28rem;
  max-height: min(90vh, 40rem);
  overflow: auto;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(28, 26, 38, 0.97) 0%, rgba(22, 20, 32, 0.98) 100%);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(157, 78, 221, 0.08) inset,
    0 0 28px rgba(6, 182, 212, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: fadeInUp 0.4s ease-out;
  color-scheme: dark;
}

.report-modal .report-modal__panel.modal-content::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(157, 78, 221, 0.06) 0%,
    transparent 42%,
    rgba(6, 182, 212, 0.06) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.report-modal__header,
.report-modal__form {
  position: relative;
  z-index: 1;
}

.report-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.report-modal__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.report-modal__close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  color: var(--color-text-muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.report-modal__close:hover {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.35);
  color: var(--color-text);
}

.report-modal__steps {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 var(--spacing-xl) var(--spacing-md);
}

.report-modal__step-dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.report-modal__step-dot.is-active {
  border-color: var(--color-primary);
  background: rgba(6, 182, 212, 0.15);
  color: var(--color-text);
}

.report-modal__step-dot.is-done {
  border-color: rgba(6, 182, 212, 0.4);
  color: var(--color-primary);
}

.report-modal__step-line {
  width: 1.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.report-modal__panel-step[hidden] {
  display: none !important;
}

.report-modal__form {
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-lg);
}

.report-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.report-modal__actions .js-report-back {
  margin-right: auto;
}

.report-modal__actions .btn[hidden] {
  display: none !important;
}

.report-modal__actions[hidden] {
  display: none !important;
}

.report-modal__reasons {
  margin: 0 0 var(--spacing-md);
  padding: 0;
  border: none;
}

.report-modal__legend {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
  padding: 0;
}

.report-modal__reason-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.report-modal__reason {
  display: block;
  cursor: pointer;
}

.report-modal__reason-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.report-modal__reason-box {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-modal__reason-label {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--color-text);
}

.report-modal__reason-input:focus-visible + .report-modal__reason-box {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-glow);
}

.report-modal__reason-input:checked + .report-modal__reason-box {
  border-color: rgba(6, 182, 212, 0.5);
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.14) 0%,
    rgba(157, 78, 221, 0.1) 100%
  );
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.2) inset,
    0 4px 16px rgba(6, 182, 212, 0.12);
}

.report-modal__reason:hover .report-modal__reason-box {
  border-color: rgba(157, 78, 221, 0.35);
  background: rgba(157, 78, 221, 0.08);
}

.report-modal__details-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-light);
}

.report-modal__optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.report-modal__textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: var(--spacing-sm) var(--spacing-md);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--border-radius);
  resize: vertical;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-modal__textarea::placeholder {
  color: var(--color-text-muted);
}

.report-modal__textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-glow);
}

.report-modal__error {
  margin: var(--spacing-sm) 0 0;
  font-size: 0.875rem;
  color: var(--color-danger);
}

.report-modal__error[hidden] {
  display: none;
}

.report-modal__submit {
  min-width: 8.5rem;
}

body.report-modal-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .report-modal {
    padding: 0;
    align-items: flex-end;
  }

  .report-modal .report-modal__panel.modal-content {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
}

/* ============================================
   Dropdowns
   ============================================ */
/* User Menu Dropdown */
.user-menu {
  position: relative;
  display: inline-block;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  border-radius: var(--border-radius-sm);
}

.user-menu-btn:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
}

.user-dropdown-arrow {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.user-menu-btn[aria-expanded="true"] .user-dropdown-arrow {
  transform: rotate(180deg);
}

.user-menu .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 0.5rem) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  background: rgba(20, 20, 20, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1001;
  min-width: 250px;
  max-width: 300px;
  position: relative;
  overflow: hidden;
}

.user-menu .dropdown-menu::before,
.app-bottom-nav__create-wrap .dropdown-menu::before,
.nav-create-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.4) 0%, rgba(157, 78, 221, 0.4) 100%);
  z-index: 1;
}

.user-menu .dropdown-header,
.app-bottom-nav__create-wrap .dropdown-header,
.nav-create-menu .dropdown-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-menu .dropdown-section,
.app-bottom-nav__create-wrap .dropdown-section,
.nav-create-menu .dropdown-section {
  padding: var(--spacing-sm) 0;
}

.user-menu .dropdown-item,
.app-bottom-nav__create-wrap .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1rem;
  border-radius: 0;
  font-weight: 500;
  text-decoration-color: transparent;
  text-underline-offset: 0;
  position: relative;
}

.user-menu .dropdown-item::before,
.app-bottom-nav__create-wrap .dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.6) 0%, rgba(157, 78, 221, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.user-menu .dropdown-item:hover,
.app-bottom-nav__create-wrap .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 0;
}

.user-menu .dropdown-item:hover::before,
.app-bottom-nav__create-wrap .dropdown-item:hover::before {
  opacity: 1;
}

.user-menu .dropdown-item.active,
.app-bottom-nav__create-wrap .dropdown-item.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(157, 78, 221, 0.15) 100%);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 0;
}

.user-menu .dropdown-item.active::before,
.app-bottom-nav__create-wrap .dropdown-item.active::before {
  opacity: 1;
}

.user-menu .dropdown-item.disabled,
.app-bottom-nav__create-wrap .dropdown-item.disabled,
.app-bottom-nav__create-wrap .dropdown-item:disabled {
  color: var(--color-text-muted);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 0;
}

.user-menu .dropdown-icon,
.app-bottom-nav__create-wrap .dropdown-icon {
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}

.user-menu .dropdown-item strong,
.app-bottom-nav__create-wrap .dropdown-item strong {
  text-decoration: none;
}

.user-menu .dropdown-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
  padding: 0 var(--spacing-md);
}

.user-menu .dropdown-form {
  margin: 0;
  padding: 0;
}

.user-menu .dropdown-profile-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 1rem;
  border-radius: 0;
  font-weight: 500;
  cursor: pointer;
}

.user-menu .dropdown-profile-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
}

.user-menu .dropdown-profile-btn.active {
  background: rgba(6, 182, 212, 0.2);
  color: var(--color-primary);
  font-weight: 600;
}

.user-menu .dropdown-profile-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.user-menu .dropdown-content {
  flex: 1;
  text-align: left;
}

.user-menu .dropdown-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(6, 182, 212, 0.2);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-menu .dropdown-footer {
  padding: var(--spacing-sm) 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--spacing-sm);
}

.user-menu .dropdown-logout-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--color-danger);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 1rem;
  border-radius: 0;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.user-menu .dropdown-logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

/* Mobile navigation dropdown */
.mobile-nav-dropdown {
  display: none;
}

.mobile-nav-btn {
  background: transparent;
  border: none;
  color: var(--color-text);
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  outline: none;
  cursor: pointer;
}

.mobile-nav-btn:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.05);
}

.mobile-nav-arrow {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.mobile-nav-btn[aria-expanded="true"] .mobile-nav-arrow {
  transform: rotate(180deg);
}

.mobile-nav-dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: rgba(20, 20, 20, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1000;
  min-width: 200px;
  position: relative;
  overflow: hidden;
}

.mobile-nav-dropdown .dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.4) 0%, rgba(157, 78, 221, 0.4) 100%);
  z-index: 1;
}

.mobile-nav-dropdown .dropdown-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-nav-dropdown .dropdown-section {
  padding: var(--spacing-sm) 0;
}

.mobile-nav-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1rem;
  border-radius: 0;
  font-weight: 500;
  text-decoration-color: transparent;
  text-underline-offset: 0;
  position: relative;
}

.mobile-nav-dropdown .dropdown-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.6) 0%, rgba(157, 78, 221, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-dropdown .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 0;
}

.mobile-nav-dropdown .dropdown-item:hover::before {
  opacity: 1;
}

.mobile-nav-dropdown .dropdown-item.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(157, 78, 221, 0.15) 100%);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 0;
}

.mobile-nav-dropdown .dropdown-item.active::before {
  opacity: 1;
}

.mobile-nav-dropdown .dropdown-item.disabled {
  color: var(--color-text-muted);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 0;
}

.mobile-nav-dropdown .dropdown-icon {
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}

.mobile-nav-dropdown .dropdown-item strong {
  text-decoration: none;
}

.mobile-nav-dropdown .dropdown-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
  padding: 0 var(--spacing-md);
}

.mobile-nav-dropdown .dropdown-form {
  margin: 0;
  padding: 0;
}

.mobile-nav-dropdown .dropdown-profile-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 1rem;
  border-radius: 0;
  font-weight: 500;
  cursor: pointer;
}

.mobile-nav-dropdown .dropdown-profile-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
}

.mobile-nav-dropdown .dropdown-profile-btn.active {
  background: rgba(6, 182, 212, 0.2);
  color: var(--color-primary);
  font-weight: 600;
}

.mobile-nav-dropdown .dropdown-profile-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.mobile-nav-dropdown .dropdown-content {
  flex: 1;
  text-align: left;
}

.mobile-nav-dropdown .dropdown-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(6, 182, 212, 0.2);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-nav-dropdown .dropdown-footer {
  padding: var(--spacing-sm) 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--spacing-sm);
}

.mobile-nav-dropdown .dropdown-logout-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--color-danger);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 1rem;
  border-radius: 0;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.mobile-nav-dropdown .dropdown-logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

/* Admin Nav Dropdown */
.admin-nav-dropdown {
  position: relative;
  z-index: 1001;
}

.admin-nav-dropdown-toggle {
  color: var(--color-text-light);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  font-size: 0.85rem;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  font-weight: 500;
}

.admin-nav-dropdown-toggle:hover {
  color: var(--color-primary);
  background: rgba(0, 255, 255, 0.1);
  text-decoration: none;
}

.admin-nav-dropdown-toggle.is-active {
  color: var(--color-primary);
  background: rgba(0, 255, 255, 0.1);
  font-weight: 600;
  text-decoration: none;
}

.admin-nav-dropdown-toggle:focus {
  outline: none;
  color: var(--color-primary);
  background: rgba(0, 255, 255, 0.1);
}

.dropdown-arrow {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  display: inline-block;
}

.admin-nav-dropdown.is-open .dropdown-arrow {
  transform: rotate(180deg);
}

.admin-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 9999;
  padding: var(--spacing-xs) 0;
  margin: 0;
  display: none;
}

/* Right-align dropdown if it's near the right edge */
.admin-nav-dropdown:last-child .admin-nav-dropdown-menu {
  left: auto;
  right: 0;
}

.admin-nav-dropdown.is-open .admin-nav-dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.admin-nav-dropdown-menu a {
  display: block;
  color: var(--color-text-light);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.85rem;
  transition: all 0.2s ease;
  white-space: nowrap;
  border-radius: 0;
  font-weight: 400;
}

.admin-nav-dropdown-menu a:hover {
  color: var(--color-primary);
  background: rgba(0, 255, 255, 0.1);
  text-decoration: none;
}

.admin-nav-dropdown-menu a.is-active {
  color: var(--color-primary);
  background: rgba(0, 255, 255, 0.15);
  font-weight: 600;
  text-decoration: none;
}

/* Notifications Dropdown */
.nav-notifs {
  position: relative;
  display: inline-block;
}

.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: rgba(20, 20, 20, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1000;
  min-width: 300px;
  max-width: 400px;
  overflow: hidden;
}

.notif-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.4) 0%, rgba(157, 78, 221, 0.4) 100%);
  z-index: 1;
}

.notif-dropdown > * {
  position: relative;
  z-index: 1;
}

.notif-dropdown:not(.hidden) {
  display: block;
}

.notif-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.notif-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(157, 78, 221, 0.3) 50%,
    transparent 100%);
}

.notif-head strong {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: none;
}

.notif-head .link,
.notif-head button.link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  transition: color 0.2s ease;
  background: transparent !important;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.notif-head .link:hover,
.notif-head button.link:hover {
  color: var(--color-primary-light);
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-xs) 0;
  padding-left: 0;
  max-height: 300px;
  overflow-y: auto;
}

.notif-foot {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  position: relative;
}

.notif-foot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(157, 78, 221, 0.3) 50%,
    transparent 100%);
}

.notif-foot .link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.notif-foot .link:hover {
  color: var(--color-primary-light);
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.notif-item.unread {
  background: rgba(6, 182, 212, 0.1);
}

.notif-item.unread:hover {
  background: rgba(6, 182, 212, 0.15);
}

.notif-item a {
  flex: 1;
  text-decoration: none;
  color: var(--color-text);
  min-width: 0;
}

.notif-item .text {
  font-size: 0.875rem;
  line-height: 1.35;
  margin-bottom: 0.125rem;
  word-break: break-word;
}

.notif-item .meta {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.notif-item .mark-read {
  flex-shrink: 0;
  align-self: center;
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.notif-item .mark-read:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* Friend requests list */
.fr-list {
  display: flex;
  flex-direction: column;
  padding: 0 2rem;
}

.fr-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 1;
}

.fr-item:has(.fr-dialog.show) {
  z-index: 10001;
}

.fr-item:last-child {
  margin-bottom: 0;
}

.fr-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.fr-profile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.fr-profile:hover .fr-name {
  color: var(--color-primary);
}

.fr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.fr-info {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.fr-name {
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.fr-date {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.fr-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fr-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.fr-btn-accept {
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
}

.fr-btn-accept:hover {
  background: var(--color-success, #22c55e);
  color: white;
}

.fr-btn-decline {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
}

.fr-btn-decline:hover {
  border-color: var(--color-danger, #ef4444);
  background: var(--color-danger, #ef4444);
  color: white;
}

/* Friend request dialog */
.fr-dialog {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: var(--color-bg, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm, 8px);
  padding: 1rem;
  z-index: 99999 !important;
  min-width: 240px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.fr-dialog.show {
  display: block;
  z-index: 99999 !important;
}

/* When dialog is moved to body with fixed positioning */
body > .fr-dialog {
  position: fixed !important;
  z-index: 99999 !important;
}

.fr-dialog.show {
  display: block;
}

.fr-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.fr-checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.fr-checkbox:hover {
  color: var(--color-primary);
}

.fr-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.fr-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fr-dialog-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm, 4px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s ease;
  font-family: var(--font-family);
}

.fr-dialog-cancel {
  background: transparent;
  color: var(--color-text-muted);
  border-color: rgba(255, 255, 255, 0.1);
}

.fr-dialog-cancel:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.fr-dialog-confirm {
  background: var(--color-success, #22c55e);
  color: white;
  border-color: var(--color-success, #22c55e);
}

.fr-dialog-confirm:hover {
  background: #16a34a;
  border-color: #16a34a;
}

@media (max-width: 480px) {
  .fr-list {
    padding: 0 1rem;
  }
  
  .fr-item {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .fr-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .fr-checkbox span {
    display: none;
  }
}

/* Gallery actions dropdown */
.gallery-actions-dropdown {
  position: relative;
  display: inline-block;
}

.gallery-actions-toggle {
  background: transparent;
  border: 1px solid var(--color-border, #404040);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.gallery-actions-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-primary, #06b6d4);
}

.gallery-actions-icon {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: bold;
}

.gallery-actions-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--color-surface, #1a1a1a);
  border: 1px solid var(--color-border, #404040);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 180px;
  display: none;
  z-index: 100;
  overflow: hidden;
}

.gallery-actions-dropdown.open .gallery-actions-menu,
.media-actions-dropdown-top-right.open .gallery-actions-menu {
  display: block;
}

.gallery-actions-menu a,
.gallery-actions-menu form {
  display: block;
  border-bottom: 1px solid var(--color-border, #404040);
}

.gallery-actions-menu a:last-child,
.gallery-actions-menu form:last-child {
  border-bottom: none;
}

.gallery-actions-menu a {
  padding: 0.75rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.2s ease;
}

.gallery-actions-menu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-primary, #06b6d4);
}

.gallery-actions-menu form {
  margin: 0;
  padding: 0;
}

.gallery-actions-menu .gallery-action-link {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  transition: background 0.2s ease;
}

.gallery-actions-menu .gallery-action-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-primary, #06b6d4);
}

/* Profile actions dropdown */
.profile-actions-dropdown-top-right {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 10;
}

.profile-actions-toggle {
  background: transparent;
  border: 1px solid var(--color-border, #404040);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
}

.profile-actions-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-primary, #06b6d4);
}

.profile-actions-icon {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: bold;
}

.profile-actions-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--color-surface, #1a1a1a);
  border: 1px solid var(--color-border, #404040);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 180px;
  display: none;
  z-index: 100;
  overflow: hidden;
}

.profile-actions-dropdown-top-right.open .profile-actions-menu {
  display: block;
}

.profile-actions-menu a,
.profile-actions-menu form {
  display: block;
  border-bottom: 1px solid var(--color-border, #404040);
}

.profile-actions-menu a:last-child,
.profile-actions-menu form:last-child {
  border-bottom: none;
}

.profile-actions-menu .profile-action-link {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  transition: background 0.2s ease;
}

.profile-actions-menu .profile-action-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-primary, #06b6d4);
}

.profile-actions-menu .profile-action-link-danger {
  color: var(--color-danger, #ef4444);
}

.profile-actions-menu .profile-action-link-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger, #ef4444);
}

/* Comment actions dropdown */
.comment-actions-dropdown {
  position: relative;
}

.comment-actions-toggle {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  line-height: 1;
}

.comment-actions-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.comment-actions-icon {
  font-size: 1rem;
  line-height: 1;
  font-weight: bold;
}

.comment-actions-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  background: rgba(0,0,0,0.8);
  border-radius: 4px;
  padding: 0.25rem;
  min-width: 160px;
  display: none;
  z-index: 10;
}

.comment-actions-dropdown.open .comment-actions-menu {
  display: block;
}

.comment-actions-menu .comment-action-link,
.comment-actions-menu button.comment-action-link {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  color: white;
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  font: inherit;
}

.comment-actions-menu .comment-action-link:last-child,
.comment-actions-menu button.comment-action-link:last-child {
  border-bottom: none;
}

.comment-actions-menu .comment-action-link:hover,
.comment-actions-menu button.comment-action-link:hover {
  background: rgba(255,255,255,0.1);
}

/* ============================================
   Progress Bars
   ============================================ */
.completion-bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: var(--spacing-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.completion-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 6px;
  transition: width 0.3s ease;
}

.completion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid rgba(6, 182, 212, 0.3);
}

.completion-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.completion-header small {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.completion-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.completion-checklist li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.completion-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xs);
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.completion-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: bold;
  flex-shrink: 0;
}

.completion-check.completed {
  color: var(--color-primary);
}

.completion-check.incomplete {
  color: var(--color-text-muted);
}

/* ============================================
   Avatars
   ============================================ */
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
}

.user-icon {
  font-size: 1.2rem;
  color: var(--color-text);
}

.avatar-with-status {
  position: relative;
  display: inline-block;
}

.avatar-xl {
  width: 192px;
  height: 192px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
}

.avatar-upload-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.avatar-preview {
  flex-shrink: 0;
}

.avatar-preview-img {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

.avatar-form {
  flex: 1;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

/* ============================================
   Tags
   ============================================ */
/* ============================================
   Base Tag Class (form only - no colors)
   Used by all tag types: interest-tag, prefs-tag, etc.
   ============================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  /* NO colors/borders here - only form */
}

/* Interest tags - category-based colors */
.tag.interest-tag[data-category="Kreativt & kulinariskt"],
.tag.interest-tag[data-category="Kreativt och kulinariskt"] {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(217, 119, 6, 0.35);
}

.tag.interest-tag[data-category="Kreativt & kulinariskt"]:hover,
.tag.interest-tag[data-category="Kreativt och kulinariskt"]:hover {
  background: rgba(217, 119, 6, 0.25);
  border-color: #fbbf24;
}

.tag.interest-tag[data-category="Kultur & media"],
.tag.interest-tag[data-category="Kultur och media"] {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.35);
}

.tag.interest-tag[data-category="Kultur & media"]:hover,
.tag.interest-tag[data-category="Kultur och media"]:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: #c4b5fd;
}

.tag.interest-tag[data-category="Kunskap & utforskande"],
.tag.interest-tag[data-category="Kunskap och utforskande"] {
  background: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.35);
}

.tag.interest-tag[data-category="Kunskap & utforskande"]:hover,
.tag.interest-tag[data-category="Kunskap och utforskande"]:hover {
  background: rgba(37, 99, 235, 0.25);
  border-color: #93c5fd;
}

.tag.interest-tag[data-category="Natur & livsstil"],
.tag.interest-tag[data-category="Natur och livsstil"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border: 1px solid rgba(101, 163, 13, 0.35);
}

.tag.interest-tag[data-category="Natur & livsstil"]:hover,
.tag.interest-tag[data-category="Natur och livsstil"]:hover {
  background: rgba(101, 163, 13, 0.25);
  border-color: #a3e635;
}

.tag.interest-tag[data-category="Spel & nörderi"],
.tag.interest-tag[data-category="Spel och nörderi"] {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.35);
}

.tag.interest-tag[data-category="Spel & nörderi"]:hover,
.tag.interest-tag[data-category="Spel och nörderi"]:hover {
  background: rgba(20, 184, 166, 0.25);
  border-color: #5eead4;
}

.tag.interest-tag[data-category="Träning & aktivitet"],
.tag.interest-tag[data-category="Träning och aktivitet"] {
  background: rgba(251, 113, 133, 0.15);
  color: #fda4af;
  border: 1px solid rgba(251, 113, 133, 0.35);
}

.tag.interest-tag[data-category="Träning & aktivitet"]:hover,
.tag.interest-tag[data-category="Träning och aktivitet"]:hover {
  background: rgba(251, 113, 133, 0.25);
  border-color: #fda4af;
}

/* Interest option buttons in dropdown - same form and colors as tags */
.interest-option {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.interest-option:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.5);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.interest-option.selected {
  background: rgba(6, 182, 212, 0.2);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

.interest-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.interest-option[data-category="Kreativt & kulinariskt"],
.interest-option[data-category="Kreativt och kulinariskt"] {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(217, 119, 6, 0.35);
}

.interest-option[data-category="Kreativt & kulinariskt"]:hover:not(:disabled),
.interest-option[data-category="Kreativt och kulinariskt"]:hover:not(:disabled) {
  background: rgba(217, 119, 6, 0.25);
  border-color: rgba(217, 119, 6, 0.5);
}

.interest-option[data-category="Kultur & media"],
.interest-option[data-category="Kultur och media"] {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.35);
}

.interest-option[data-category="Kultur & media"]:hover:not(:disabled),
.interest-option[data-category="Kultur och media"]:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.5);
}

.interest-option[data-category="Kunskap & utforskande"],
.interest-option[data-category="Kunskap och utforskande"] {
  background: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.35);
}

.interest-option[data-category="Kunskap & utforskande"]:hover:not(:disabled),
.interest-option[data-category="Kunskap och utforskande"]:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.25);
  border-color: rgba(37, 99, 235, 0.5);
}

.interest-option[data-category="Natur & livsstil"],
.interest-option[data-category="Natur och livsstil"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border: 1px solid rgba(101, 163, 13, 0.35);
}

.interest-option[data-category="Natur & livsstil"]:hover:not(:disabled),
.interest-option[data-category="Natur och livsstil"]:hover:not(:disabled) {
  background: rgba(101, 163, 13, 0.25);
  border-color: rgba(101, 163, 13, 0.5);
}

.interest-option[data-category="Spel & nörderi"],
.interest-option[data-category="Spel och nörderi"] {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.35);
}

.interest-option[data-category="Spel & nörderi"]:hover:not(:disabled),
.interest-option[data-category="Spel och nörderi"]:hover:not(:disabled) {
  background: rgba(20, 184, 166, 0.25);
  border-color: rgba(20, 184, 166, 0.5);
}

.interest-option[data-category="Träning & aktivitet"],
.interest-option[data-category="Träning och aktivitet"] {
  background: rgba(251, 113, 133, 0.15);
  color: #fda4af;
  border: 1px solid rgba(251, 113, 133, 0.35);
}

.interest-option[data-category="Träning & aktivitet"]:hover:not(:disabled),
.interest-option[data-category="Träning och aktivitet"]:hover:not(:disabled) {
  background: rgba(251, 113, 133, 0.25);
  border-color: rgba(251, 113, 133, 0.5);
}

/* Tags row - spacing between tags */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Ensure spacing for interests tags specifically */
#interests-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

#interests-tags .tag {
  cursor: pointer;
  user-select: none; /* Prevent text selection when clicking */
}

/* Interest options container - spacing between buttons */
.interest-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

/* Interests categories container - spacing between categories */
.interests-categories {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Interest category - spacing between header and options */
.interest-category {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Interest category header */
.interest-category-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
}

.category-emoji {
  font-size: 1.2rem;
}

.category-name {
  flex: 1;
}

/* Interests foldout card - match prefs-section styling */
.interests-foldout-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.02);
  margin-top: 0;
  overflow: hidden;
}

.interests-foldout-toggle {
  width: 100%;
  padding: calc(var(--spacing-md) * 0.5);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s ease;
}

.interests-foldout-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* General toggle-icon for interests - specific selector to avoid conflicts */
.interests-foldout-toggle .toggle-icon {
  margin-right: var(--spacing-sm);
  transition: transform 0.2s ease;
}

.interests-foldout-content {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--spacing-md);
  margin-top: calc(var(--spacing-md) * 0.035);
  max-height: 500px;
  overflow-y: auto;
}

/* Innehållstaggar: autocomplete (dagbok, galleri, kontaktannonser) */
.content-tag-picker {
  position: relative;
}

.content-tag-picker-chips {
  margin-bottom: var(--spacing-sm);
}

.content-tag-picker-fieldwrap {
  position: relative;
}

.content-tag-picker-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-surface, #1a1a22);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.content-tag-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.85rem;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: var(--color-text, #fff);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.content-tag-picker-item:last-child {
  border-bottom: none;
}

.content-tag-picker-item:hover,
.content-tag-picker-item:focus {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.tag .tag-remove {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  margin-left: var(--spacing-xs);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.tag .tag-remove:hover {
  opacity: 1;
}

.tag-suggest {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tag-suggest input[type="checkbox"] {
  display: none;
}

.tag-suggest:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.5);
  color: var(--color-primary);
}

/* Tag remove button (tag-x) - for preferences form */
.tag-x {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  margin-left: var(--spacing-xs);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.tag-x:hover {
  opacity: 1;
}

/* Selected tags in preferences form (.group-selected) */
.group-selected .tag {
  background: rgba(6, 182, 212, 0.2);
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.4);
  cursor: pointer;
}

.group-selected .tag:hover {
  background: rgba(6, 182, 212, 0.3);
  border-color: rgba(6, 182, 212, 0.6);
  transform: translateY(-1px);
}

/* Seeking tags styling */
.seeking-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding-top: calc(var(--spacing-md) * 0.6);
  margin-bottom: calc(var(--spacing-md) * 0.6);
  align-items: flex-start;
}

/* Hide seeking-tags container when empty */
.seeking-tags:empty {
  display: none;
}

.seeking-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* ============================================
   "Söker" tags in about.php (profile seeking preferences)
   These are for values like "Förhållande", "Dejting", etc. (NO # prefix)
   ============================================ */
/* Seeking tags - Private (vanliga) - Sval turkos */
.seeking-tag.seeking-tag-private:not([data-value^="#"]),
.seeking-option.seeking-tag-private:not([data-value^="#"]) {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.35);
}

.seeking-tag.seeking-tag-private:not([data-value^="#"]):hover,
.seeking-option.seeking-tag-private:not([data-value^="#"]):hover {
  background: rgba(20, 184, 166, 0.25);
  border-color: #5eead4;
  transform: translateY(-1px);
}

/* Seeking tags - Professional - Djup lila indigo */
.seeking-tag.seeking-tag-pro:not([data-value^="#"]),
.seeking-option.seeking-tag-pro:not([data-value^="#"]) {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.seeking-tag.seeking-tag-pro:not([data-value^="#"]):hover,
.seeking-option.seeking-tag-pro:not([data-value^="#"]):hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: #a5b4fc;
  transform: translateY(-1px);
}

/* × button for "Söker" tags - use inherit color from tag class */
.seeking-tag.seeking-tag-private:not([data-value^="#"])::after,
.seeking-tag.seeking-tag-pro:not([data-value^="#"])::after {
  content: ' ×';
  margin-left: var(--spacing-xs);
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  color: inherit;
}

.seeking-tag.seeking-tag-private:not([data-value^="#"]):hover::after,
.seeking-tag.seeking-tag-pro:not([data-value^="#"]):hover::after {
  opacity: 1;
}

/* Fallback default style for "Söker" tags without specific class (shouldn't happen, but just in case) */
.seeking-tag:not([data-value^="#"]):not(.seeking-tag-private):not(.seeking-tag-pro) {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.35);
}

.seeking-tag:not([data-value^="#"]):not(.seeking-tag-private):not(.seeking-tag-pro):hover {
  background: rgba(20, 184, 166, 0.25);
  border-color: #5eead4;
  transform: translateY(-1px);
}

.seeking-tag:not([data-value^="#"]):not(.seeking-tag-private):not(.seeking-tag-pro)::after {
  content: ' ×';
  margin-left: var(--spacing-xs);
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  color: inherit;
}

/* ============================================
   Gallery Tags (for images/media)
   These are tags with # prefix used in gallery: #NSFW, #fotografering, etc.
   ============================================ */
.gallery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding-top: calc(var(--spacing-md) * 0.6);
  margin-bottom: calc(var(--spacing-md) * 0.6);
  align-items: flex-start;
}

.gallery-tags:empty {
  display: none;
}

.gallery-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.gallery-tag:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.gallery-tag::after {
  content: ' ×';
  margin-left: var(--spacing-xs);
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.gallery-tag:hover::after {
  opacity: 1;
}

/* 🔥 Erotik / Sensuellt / Hud (Vinröd) */
.gallery-tag[data-value="#NSFW"],
.gallery-tag[data-value="#sensual"],
.gallery-tag[data-value="#spicy"],
.gallery-tag[data-value="#flirt"],
.gallery-tag[data-value="#hud"],
.gallery-tag[data-value="#silhuett"],
.gallery-tag[data-value="#curves"],
.gallery-tag[data-value="#lingerie"],
.gallery-tag[data-value="#tease"],
.gallery-tag[data-value="#heatingup"] {
  background: rgba(185, 28, 28, 0.15);
  color: #f87171;
  border: 1px solid rgba(185, 28, 28, 0.35);
}

.gallery-tag[data-value="#NSFW"]:hover,
.gallery-tag[data-value="#sensual"]:hover,
.gallery-tag[data-value="#spicy"]:hover,
.gallery-tag[data-value="#flirt"]:hover,
.gallery-tag[data-value="#hud"]:hover,
.gallery-tag[data-value="#silhuett"]:hover,
.gallery-tag[data-value="#curves"]:hover,
.gallery-tag[data-value="#lingerie"]:hover,
.gallery-tag[data-value="#tease"]:hover,
.gallery-tag[data-value="#heatingup"]:hover {
  background: rgba(185, 28, 28, 0.25);
  border-color: #f87171;
}

.gallery-tag[data-value="#NSFW"]::after,
.gallery-tag[data-value="#sensual"]::after,
.gallery-tag[data-value="#spicy"]::after,
.gallery-tag[data-value="#flirt"]::after,
.gallery-tag[data-value="#hud"]::after,
.gallery-tag[data-value="#silhuett"]::after,
.gallery-tag[data-value="#curves"]::after,
.gallery-tag[data-value="#lingerie"]::after,
.gallery-tag[data-value="#tease"]::after,
.gallery-tag[data-value="#heatingup"]::after {
  color: #f87171;
}

/* 🌿 Vardag / Natur / Liv (Grön) */
.gallery-tag[data-value="#natur"],
.gallery-tag[data-value="#vi"],
.gallery-tag[data-value="#tillsammans"],
.gallery-tag[data-value="#minvardag"],
.gallery-tag[data-value="#hemma"],
.gallery-tag[data-value="#utomhus"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border: 1px solid rgba(101, 163, 13, 0.35);
}

.gallery-tag[data-value="#natur"]:hover,
.gallery-tag[data-value="#vi"]:hover,
.gallery-tag[data-value="#tillsammans"]:hover,
.gallery-tag[data-value="#minvardag"]:hover,
.gallery-tag[data-value="#hemma"]:hover,
.gallery-tag[data-value="#utomhus"]:hover {
  background: rgba(101, 163, 13, 0.25);
  border-color: #a3e635;
}

.gallery-tag[data-value="#natur"]::after,
.gallery-tag[data-value="#vi"]::after,
.gallery-tag[data-value="#tillsammans"]::after,
.gallery-tag[data-value="#minvardag"]::after,
.gallery-tag[data-value="#hemma"]::after,
.gallery-tag[data-value="#utomhus"]::after {
  color: #a3e635;
}

/* 🎥 Media / Skapande (Petrolblå) */
.gallery-tag[data-value="#fotografering"],
.gallery-tag[data-value="#foto"],
.gallery-tag[data-value="#behindthescenes"],
.gallery-tag[data-value="#contentcreation"],
.gallery-tag[data-value="#projekt"],
.gallery-tag[data-value="#GIF"],
.gallery-tag[data-value="#kreativt"],
.gallery-tag[data-value="#editing"] {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  border: 1px solid rgba(13, 148, 136, 0.35);
}

.gallery-tag[data-value="#fotografering"]:hover,
.gallery-tag[data-value="#foto"]:hover,
.gallery-tag[data-value="#behindthescenes"]:hover,
.gallery-tag[data-value="#contentcreation"]:hover,
.gallery-tag[data-value="#projekt"]:hover,
.gallery-tag[data-value="#GIF"]:hover,
.gallery-tag[data-value="#kreativt"]:hover,
.gallery-tag[data-value="#editing"]:hover {
  background: rgba(13, 148, 136, 0.25);
  border-color: #5eead4;
}

.gallery-tag[data-value="#fotografering"]::after,
.gallery-tag[data-value="#foto"]::after,
.gallery-tag[data-value="#behindthescenes"]::after,
.gallery-tag[data-value="#contentcreation"]::after,
.gallery-tag[data-value="#projekt"]::after,
.gallery-tag[data-value="#GIF"]::after,
.gallery-tag[data-value="#kreativt"]::after,
.gallery-tag[data-value="#editing"]::after {
  color: #5eead4;
}

/* ✨ Mood / Aesthetic / Stämning (Plommonlila) */
.gallery-tag[data-value="#softvibes"],
.gallery-tag[data-value="#stämning"],
.gallery-tag[data-value="#ögonblick"],
.gallery-tag[data-value="#stunder"],
.gallery-tag[data-value="#småstunder"],
.gallery-tag[data-value="#smastunder"],
.gallery-tag[data-value="#selfie"],
.gallery-tag[data-value="#jag"] {
  background: rgba(147, 51, 234, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(147, 51, 234, 0.35);
}

.gallery-tag[data-value="#softvibes"]:hover,
.gallery-tag[data-value="#stämning"]:hover,
.gallery-tag[data-value="#ögonblick"]:hover,
.gallery-tag[data-value="#stunder"]:hover,
.gallery-tag[data-value="#småstunder"]:hover,
.gallery-tag[data-value="#smastunder"]:hover,
.gallery-tag[data-value="#selfie"]:hover,
.gallery-tag[data-value="#jag"]:hover {
  background: rgba(147, 51, 234, 0.25);
  border-color: #c4b5fd;
}

.gallery-tag[data-value="#softvibes"]::after,
.gallery-tag[data-value="#stämning"]::after,
.gallery-tag[data-value="#ögonblick"]::after,
.gallery-tag[data-value="#stunder"]::after,
.gallery-tag[data-value="#småstunder"]::after,
.gallery-tag[data-value="#smastunder"]::after,
.gallery-tag[data-value="#selfie"]::after,
.gallery-tag[data-value="#jag"]::after {
  color: #c4b5fd;
}

.gallery-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.gallery-option {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  position: relative;
  overflow: hidden;
}

.gallery-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(6, 182, 212, 0.2) inset;
  border-color: rgba(6, 182, 212, 0.3);
}

.gallery-option:hover::before {
  left: 100%;
}

.gallery-option.selected {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.2) inset;
}

/* 🔥 Erotik / Sensuellt / Hud (Vinröd) */
.gallery-option[data-value="#NSFW"],
.gallery-option[data-value="#sensual"],
.gallery-option[data-value="#spicy"],
.gallery-option[data-value="#flirt"],
.gallery-option[data-value="#hud"],
.gallery-option[data-value="#silhuett"],
.gallery-option[data-value="#curves"],
.gallery-option[data-value="#lingerie"],
.gallery-option[data-value="#tease"],
.gallery-option[data-value="#heatingup"] {
  background: rgba(185, 28, 28, 0.15);
  color: #f87171;
  border-color: rgba(185, 28, 28, 0.35);
}

.gallery-option[data-value="#NSFW"]:hover,
.gallery-option[data-value="#sensual"]:hover,
.gallery-option[data-value="#spicy"]:hover,
.gallery-option[data-value="#flirt"]:hover,
.gallery-option[data-value="#hud"]:hover,
.gallery-option[data-value="#silhuett"]:hover,
.gallery-option[data-value="#curves"]:hover,
.gallery-option[data-value="#lingerie"]:hover,
.gallery-option[data-value="#tease"]:hover,
.gallery-option[data-value="#heatingup"]:hover {
  background: rgba(185, 28, 28, 0.25);
  border-color: #f87171;
}

/* 🎥 Media / Skapande (Petrolblå) */
.gallery-option[data-value="#fotografering"],
.gallery-option[data-value="#foto"],
.gallery-option[data-value="#behindthescenes"],
.gallery-option[data-value="#contentcreation"],
.gallery-option[data-value="#projekt"],
.gallery-option[data-value="#GIF"],
.gallery-option[data-value="#kreativt"],
.gallery-option[data-value="#editing"] {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  border-color: rgba(13, 148, 136, 0.35);
}

.gallery-option[data-value="#fotografering"]:hover,
.gallery-option[data-value="#foto"]:hover,
.gallery-option[data-value="#behindthescenes"]:hover,
.gallery-option[data-value="#contentcreation"]:hover,
.gallery-option[data-value="#projekt"]:hover,
.gallery-option[data-value="#GIF"]:hover,
.gallery-option[data-value="#kreativt"]:hover,
.gallery-option[data-value="#editing"]:hover {
  background: rgba(13, 148, 136, 0.25);
  border-color: #5eead4;
}

/* 🌿 Vardag / Natur / Liv (Grön) */
.gallery-option[data-value="#natur"],
.gallery-option[data-value="#nature"],
.gallery-option[data-value="#vi"],
.gallery-option[data-value="#tillsammans"],
.gallery-option[data-value="#minvardag"],
.gallery-option[data-value="#hemma"],
.gallery-option[data-value="#utomhus"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border-color: rgba(101, 163, 13, 0.35);
}

.gallery-option[data-value="#natur"]:hover,
.gallery-option[data-value="#nature"]:hover,
.gallery-option[data-value="#vi"]:hover,
.gallery-option[data-value="#tillsammans"]:hover,
.gallery-option[data-value="#minvardag"]:hover,
.gallery-option[data-value="#hemma"]:hover,
.gallery-option[data-value="#utomhus"]:hover {
  background: rgba(101, 163, 13, 0.25);
  border-color: #a3e635;
}

/* ✨ Mood / Aesthetic / Stämning (Plommonlila) */
.gallery-option[data-value="#softvibes"],
.gallery-option[data-value="#stämning"],
.gallery-option[data-value="#ögonblick"],
.gallery-option[data-value="#stunder"],
.gallery-option[data-value="#småstunder"],
.gallery-option[data-value="#smastunder"],
.gallery-option[data-value="#selfie"],
.gallery-option[data-value="#jag"] {
  background: rgba(147, 51, 234, 0.15);
  color: #c4b5fd;
  border-color: rgba(147, 51, 234, 0.35);
}

.gallery-option[data-value="#softvibes"]:hover,
.gallery-option[data-value="#stämning"]:hover,
.gallery-option[data-value="#ögonblick"]:hover,
.gallery-option[data-value="#stunder"]:hover,
.gallery-option[data-value="#småstunder"]:hover,
.gallery-option[data-value="#smastunder"]:hover,
.gallery-option[data-value="#selfie"]:hover,
.gallery-option[data-value="#jag"]:hover {
  background: rgba(147, 51, 234, 0.25);
  border-color: #c4b5fd;
}

/* Selected state for gallery options */
.gallery-option.selected {
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* 🔥 Erotik / Sensuellt / Hud (Vinröd) - Selected */
.gallery-option.selected[data-value="#NSFW"],
.gallery-option.selected[data-value="#sensual"],
.gallery-option.selected[data-value="#spicy"],
.gallery-option.selected[data-value="#flirt"],
.gallery-option.selected[data-value="#hud"],
.gallery-option.selected[data-value="#silhuett"],
.gallery-option.selected[data-value="#curves"],
.gallery-option.selected[data-value="#lingerie"],
.gallery-option.selected[data-value="#tease"],
.gallery-option.selected[data-value="#heatingup"] {
  background: rgba(185, 28, 28, 0.25);
  color: #f87171;
  border-color: rgba(185, 28, 28, 0.5);
}

/* 🎥 Media / Skapande (Petrolblå) - Selected */
.gallery-option.selected[data-value="#fotografering"],
.gallery-option.selected[data-value="#foto"],
.gallery-option.selected[data-value="#behindthescenes"],
.gallery-option.selected[data-value="#contentcreation"],
.gallery-option.selected[data-value="#projekt"],
.gallery-option.selected[data-value="#GIF"],
.gallery-option.selected[data-value="#kreativt"],
.gallery-option.selected[data-value="#editing"] {
  background: rgba(13, 148, 136, 0.25);
  color: #5eead4;
  border-color: rgba(13, 148, 136, 0.5);
}

/* 🌿 Vardag / Natur / Liv (Grön) - Selected */
.gallery-option.selected[data-value="#natur"],
.gallery-option.selected[data-value="#nature"],
.gallery-option.selected[data-value="#vi"],
.gallery-option.selected[data-value="#tillsammans"],
.gallery-option.selected[data-value="#minvardag"],
.gallery-option.selected[data-value="#hemma"],
.gallery-option.selected[data-value="#utomhus"] {
  background: rgba(101, 163, 13, 0.25);
  color: #a3e635;
  border-color: rgba(101, 163, 13, 0.5);
}

/* ✨ Mood / Aesthetic / Stämning (Plommonlila) - Selected */
.gallery-option.selected[data-value="#softvibes"],
.gallery-option.selected[data-value="#stämning"],
.gallery-option.selected[data-value="#ögonblick"],
.gallery-option.selected[data-value="#stunder"],
.gallery-option.selected[data-value="#småstunder"],
.gallery-option.selected[data-value="#smastunder"],
.gallery-option.selected[data-value="#selfie"],
.gallery-option.selected[data-value="#jag"] {
  background: rgba(147, 51, 234, 0.25);
  color: #c4b5fd;
  border-color: rgba(147, 51, 234, 0.5);
}

/* ============================================
   Diary List Tag (display only - no X button)
   ============================================ */
.diary-list-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: default;
  pointer-events: none;
  border: 1px solid transparent;
}

/* Make diary tags smaller in sidebar (index.php right sidebar) */
.sidebar-right .diary-list-tag {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 12px;
}

.diary-list-tag::after {
  display: none;
}


.diary-list-tags .diary-list-tag,
.diary-list-tags .diary-list-tag:hover,
.diary-list-tags .diary-list-tag:focus,
.diary-list-tags .diary-list-tag:active {
  text-decoration: none !important;
}

/* ============================================
   Diary Tag Colors (for .diary-list-tag and diary tag search options)
   ============================================ */
/* Note: Diary tags use .seeking-option class in search form but should be styled separately */

/* 🔥 Sensuellt / Lust / Reflektion kring sex (Vinröd) */
.diary-list-tag[data-value="#lust"],
.diary-list-tag[data-value="#spicythoughts"],
.diary-list-tag[data-value="#fantasier"],
.diary-list-tag[data-value="#kåt"],
.diary-list-tag[data-value="#sexlivet"],
.diary-list-tag[data-value="#intimitet"],
.diary-list-tag[data-value="#aftercare"],
.diary-list-tag[data-value="#spicyreflektion"],
.diary-list-tag[data-value="#desire"],
.diary-list-tag[data-value="#hett"] {
  background: rgba(185, 28, 28, 0.15);
  color: #f87171;
  border: 1px solid rgba(185, 28, 28, 0.35);
}

#diary-tags-container .seeking-option[data-value="#lust"],
#diary-tags-container .seeking-option[data-value="#spicythoughts"],
#diary-tags-container .seeking-option[data-value="#fantasier"],
#diary-tags-container .seeking-option[data-value="#kåt"],
#diary-tags-container .seeking-option[data-value="#sexlivet"],
#diary-tags-container .seeking-option[data-value="#intimitet"],
#diary-tags-container .seeking-option[data-value="#aftercare"],
#diary-tags-container .seeking-option[data-value="#spicyreflektion"],
#diary-tags-container .seeking-option[data-value="#desire"],
#diary-tags-container .seeking-option[data-value="#hett"] {
  background: rgba(185, 28, 28, 0.15);
  color: #f87171;
  border-color: rgba(185, 28, 28, 0.35);
}

/* 🌿 Livet / Vardag / Relationer (Mossgrön) */
.diary-list-tag[data-value="#idag"],
.diary-list-tag[data-value="#livet"],
.diary-list-tag[data-value="#mittliv"],
.diary-list-tag[data-value="#ögonblick"],
.diary-list-tag[data-value="#händelser"],
.diary-list-tag[data-value="#minstund"],
.diary-list-tag[data-value="#justnu"],
.diary-list-tag[data-value="#relationer"],
.diary-list-tag[data-value="#minvardag"],
.diary-list-tag[data-value="#pågång"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border: 1px solid rgba(101, 163, 13, 0.35);
}

#diary-tags-container .seeking-option[data-value="#idag"],
#diary-tags-container .seeking-option[data-value="#livet"],
#diary-tags-container .seeking-option[data-value="#mittliv"],
#diary-tags-container .seeking-option[data-value="#ögonblick"],
#diary-tags-container .seeking-option[data-value="#händelser"],
#diary-tags-container .seeking-option[data-value="#minstund"],
#diary-tags-container .seeking-option[data-value="#justnu"],
#diary-tags-container .seeking-option[data-value="#relationer"],
#diary-tags-container .seeking-option[data-value="#minvardag"],
#diary-tags-container .seeking-option[data-value="#pågång"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border-color: rgba(101, 163, 13, 0.35);
}

/* ✨ Tankar / Känslor / Reflektion (Plommonlila) */
.diary-list-tag[data-value="#heltärligt"],
.diary-list-tag[data-value="#random"],
.diary-list-tag[data-value="#liteommycket"],
.diary-list-tag[data-value="#tankarutanfilter"],
.diary-list-tag[data-value="#reflektioner"],
.diary-list-tag[data-value="#djupatankar"] {
  background: rgba(147, 51, 234, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(147, 51, 234, 0.35);
}

#diary-tags-container .seeking-option[data-value="#heltärligt"],
#diary-tags-container .seeking-option[data-value="#random"],
#diary-tags-container .seeking-option[data-value="#liteommycket"],
#diary-tags-container .seeking-option[data-value="#tankarutanfilter"],
#diary-tags-container .seeking-option[data-value="#reflektioner"],
#diary-tags-container .seeking-option[data-value="#djupatankar"] {
  background: rgba(147, 51, 234, 0.15);
  color: #c4b5fd;
  border-color: rgba(147, 51, 234, 0.35);
}

/* 🎥 Idéer / Skapande / Arbete / Projekt (Petrolblå) */
.diary-list-tag[data-value="#idéer"],
.diary-list-tag[data-value="#inspiration"],
.diary-list-tag[data-value="#contentcreation"],
.diary-list-tag[data-value="#jobbgrejer"] {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  border: 1px solid rgba(13, 148, 136, 0.35);
}

#diary-tags-container .seeking-option[data-value="#idéer"],
#diary-tags-container .seeking-option[data-value="#inspiration"],
#diary-tags-container .seeking-option[data-value="#contentcreation"],
#diary-tags-container .seeking-option[data-value="#jobbgrejer"] {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  border-color: rgba(13, 148, 136, 0.35);
}

/* ============================================
   Diary Tags (for diary entry forms)
   These are tags with # prefix used in diary: #idag, #relationer, etc.
   ============================================ */
.diary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding-top: calc(var(--spacing-md) * 0.6);
  margin-bottom: calc(var(--spacing-md) * 0.6);
  align-items: flex-start;
}

.diary-tags:empty {
  display: none;
}

.diary-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.diary-tag:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.diary-tag::after {
  content: ' ×';
  margin-left: var(--spacing-xs);
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.diary-tag:hover::after {
  opacity: 1;
}

/* 🔥 Sensuellt / Lust / Reflektion kring sex (Vinröd) */
.diary-tag[data-value="#lust"],
.diary-tag[data-value="#spicythoughts"],
.diary-tag[data-value="#fantasier"],
.diary-tag[data-value="#kåt"],
.diary-tag[data-value="#sexlivet"],
.diary-tag[data-value="#intimitet"],
.diary-tag[data-value="#aftercare"],
.diary-tag[data-value="#spicyreflektion"],
.diary-tag[data-value="#desire"],
.diary-tag[data-value="#hett"] {
  background: rgba(185, 28, 28, 0.15);
  color: #f87171;
  border: 1px solid rgba(185, 28, 28, 0.35);
}

.diary-tag[data-value="#lust"]:hover,
.diary-tag[data-value="#spicythoughts"]:hover,
.diary-tag[data-value="#fantasier"]:hover,
.diary-tag[data-value="#kåt"]:hover,
.diary-tag[data-value="#sexlivet"]:hover,
.diary-tag[data-value="#intimitet"]:hover,
.diary-tag[data-value="#aftercare"]:hover,
.diary-tag[data-value="#spicyreflektion"]:hover,
.diary-tag[data-value="#desire"]:hover,
.diary-tag[data-value="#hett"]:hover {
  background: rgba(185, 28, 28, 0.25);
  border-color: #f87171;
}

.diary-tag[data-value="#lust"]::after,
.diary-tag[data-value="#spicythoughts"]::after,
.diary-tag[data-value="#fantasier"]::after,
.diary-tag[data-value="#kåt"]::after,
.diary-tag[data-value="#sexlivet"]::after,
.diary-tag[data-value="#intimitet"]::after,
.diary-tag[data-value="#aftercare"]::after,
.diary-tag[data-value="#spicyreflektion"]::after,
.diary-tag[data-value="#desire"]::after,
.diary-tag[data-value="#hett"]::after {
  color: #f87171;
}

/* 🌿 Livet / Vardag / Relationer (Mossgrön) */
.diary-tag[data-value="#idag"],
.diary-tag[data-value="#livet"],
.diary-tag[data-value="#mittliv"],
.diary-tag[data-value="#ögonblick"],
.diary-tag[data-value="#händelser"],
.diary-tag[data-value="#minstund"],
.diary-tag[data-value="#justnu"],
.diary-tag[data-value="#relationer"],
.diary-tag[data-value="#minvardag"],
.diary-tag[data-value="#pågång"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border: 1px solid rgba(101, 163, 13, 0.35);
}

.diary-tag[data-value="#idag"]:hover,
.diary-tag[data-value="#livet"]:hover,
.diary-tag[data-value="#mittliv"]:hover,
.diary-tag[data-value="#ögonblick"]:hover,
.diary-tag[data-value="#händelser"]:hover,
.diary-tag[data-value="#minstund"]:hover,
.diary-tag[data-value="#justnu"]:hover,
.diary-tag[data-value="#relationer"]:hover,
.diary-tag[data-value="#minvardag"]:hover,
.diary-tag[data-value="#pågång"]:hover {
  background: rgba(101, 163, 13, 0.25);
  border-color: #a3e635;
}

.diary-tag[data-value="#idag"]::after,
.diary-tag[data-value="#livet"]::after,
.diary-tag[data-value="#mittliv"]::after,
.diary-tag[data-value="#ögonblick"]::after,
.diary-tag[data-value="#händelser"]::after,
.diary-tag[data-value="#minstund"]::after,
.diary-tag[data-value="#justnu"]::after,
.diary-tag[data-value="#relationer"]::after,
.diary-tag[data-value="#minvardag"]::after,
.diary-tag[data-value="#pågång"]::after {
  color: #a3e635;
}

/* ✨ Tankar / Känslor / Reflektion (Plommonlila) */
.diary-tag[data-value="#heltärligt"],
.diary-tag[data-value="#random"],
.diary-tag[data-value="#liteommycket"],
.diary-tag[data-value="#tankarutanfilter"],
.diary-tag[data-value="#reflektioner"],
.diary-tag[data-value="#djupatankar"] {
  background: rgba(147, 51, 234, 0.15);
  color: #c4b5fd;
  border: 1px solid rgba(147, 51, 234, 0.35);
}

.diary-tag[data-value="#heltärligt"]:hover,
.diary-tag[data-value="#random"]:hover,
.diary-tag[data-value="#liteommycket"]:hover,
.diary-tag[data-value="#tankarutanfilter"]:hover,
.diary-tag[data-value="#reflektioner"]:hover,
.diary-tag[data-value="#djupatankar"]:hover {
  background: rgba(147, 51, 234, 0.25);
  border-color: #c4b5fd;
}

.diary-tag[data-value="#heltärligt"]::after,
.diary-tag[data-value="#random"]::after,
.diary-tag[data-value="#liteommycket"]::after,
.diary-tag[data-value="#tankarutanfilter"]::after,
.diary-tag[data-value="#reflektioner"]::after,
.diary-tag[data-value="#djupatankar"]::after {
  color: #c4b5fd;
}

/* 🎥 Idéer / Skapande / Arbete / Projekt (Petrolblå) */
.diary-tag[data-value="#idéer"],
.diary-tag[data-value="#inspiration"],
.diary-tag[data-value="#contentcreation"],
.diary-tag[data-value="#jobbgrejer"] {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  border: 1px solid rgba(13, 148, 136, 0.35);
}

.diary-tag[data-value="#idéer"]:hover,
.diary-tag[data-value="#inspiration"]:hover,
.diary-tag[data-value="#contentcreation"]:hover,
.diary-tag[data-value="#jobbgrejer"]:hover {
  background: rgba(13, 148, 136, 0.25);
  border-color: #5eead4;
}

.diary-tag[data-value="#idéer"]::after,
.diary-tag[data-value="#inspiration"]::after,
.diary-tag[data-value="#contentcreation"]::after,
.diary-tag[data-value="#jobbgrejer"]::after {
  color: #5eead4;
}

.diary-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.diary-option {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  position: relative;
  overflow: hidden;
}

.diary-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.diary-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(157, 78, 221, 0.2) inset;
  border-color: rgba(157, 78, 221, 0.3);
}

.diary-option:hover::before {
  left: 100%;
}

.diary-option.selected {
  background: rgba(157, 78, 221, 0.15);
  border-color: rgba(157, 78, 221, 0.4);
  box-shadow: 0 0 0 1px rgba(157, 78, 221, 0.2) inset;
}

/* 🔥 Sensuellt / Lust / Reflektion kring sex (Vinröd) */
.diary-option[data-value="#lust"],
.diary-option[data-value="#spicythoughts"],
.diary-option[data-value="#fantasier"],
.diary-option[data-value="#kåt"],
.diary-option[data-value="#sexlivet"],
.diary-option[data-value="#intimitet"],
.diary-option[data-value="#aftercare"],
.diary-option[data-value="#spicyreflektion"],
.diary-option[data-value="#desire"],
.diary-option[data-value="#hett"] {
  background: rgba(185, 28, 28, 0.15);
  color: #f87171;
  border-color: rgba(185, 28, 28, 0.35);
}

.diary-option[data-value="#lust"]:hover,
.diary-option[data-value="#spicythoughts"]:hover,
.diary-option[data-value="#fantasier"]:hover,
.diary-option[data-value="#kåt"]:hover,
.diary-option[data-value="#sexlivet"]:hover,
.diary-option[data-value="#intimitet"]:hover,
.diary-option[data-value="#aftercare"]:hover,
.diary-option[data-value="#spicyreflektion"]:hover,
.diary-option[data-value="#desire"]:hover,
.diary-option[data-value="#hett"]:hover {
  background: rgba(185, 28, 28, 0.25);
  border-color: #f87171;
}

/* 🌿 Livet / Vardag / Relationer (Mossgrön) */
.diary-option[data-value="#idag"],
.diary-option[data-value="#livet"],
.diary-option[data-value="#mittliv"],
.diary-option[data-value="#ögonblick"],
.diary-option[data-value="#händelser"],
.diary-option[data-value="#minstund"],
.diary-option[data-value="#justnu"],
.diary-option[data-value="#relationer"],
.diary-option[data-value="#minvardag"],
.diary-option[data-value="#pågång"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border-color: rgba(101, 163, 13, 0.35);
}

.diary-option[data-value="#idag"]:hover,
.diary-option[data-value="#livet"]:hover,
.diary-option[data-value="#mittliv"]:hover,
.diary-option[data-value="#ögonblick"]:hover,
.diary-option[data-value="#händelser"]:hover,
.diary-option[data-value="#minstund"]:hover,
.diary-option[data-value="#justnu"]:hover,
.diary-option[data-value="#relationer"]:hover,
.diary-option[data-value="#minvardag"]:hover,
.diary-option[data-value="#pågång"]:hover {
  background: rgba(101, 163, 13, 0.25);
  border-color: #a3e635;
}

/* ✨ Tankar / Känslor / Reflektion (Plommonlila) */
.diary-option[data-value="#heltärligt"],
.diary-option[data-value="#random"],
.diary-option[data-value="#liteommycket"],
.diary-option[data-value="#tankarutanfilter"],
.diary-option[data-value="#reflektioner"],
.diary-option[data-value="#djupatankar"] {
  background: rgba(147, 51, 234, 0.15);
  color: #c4b5fd;
  border-color: rgba(147, 51, 234, 0.35);
}

.diary-option[data-value="#heltärligt"]:hover,
.diary-option[data-value="#random"]:hover,
.diary-option[data-value="#liteommycket"]:hover,
.diary-option[data-value="#tankarutanfilter"]:hover,
.diary-option[data-value="#reflektioner"]:hover,
.diary-option[data-value="#djupatankar"]:hover {
  background: rgba(147, 51, 234, 0.25);
  border-color: #c4b5fd;
}

/* 🎥 Idéer / Skapande / Arbete / Projekt (Petrolblå) */
.diary-option[data-value="#idéer"],
.diary-option[data-value="#inspiration"],
.diary-option[data-value="#contentcreation"],
.diary-option[data-value="#jobbgrejer"] {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  border-color: rgba(13, 148, 136, 0.35);
}

.diary-option[data-value="#idéer"]:hover,
.diary-option[data-value="#inspiration"]:hover,
.diary-option[data-value="#contentcreation"]:hover,
.diary-option[data-value="#jobbgrejer"]:hover {
  background: rgba(13, 148, 136, 0.25);
  border-color: #5eead4;
}

/* Selected state for diary options */
.diary-option.selected {
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* 🔥 Sensuellt / Lust / Reflektion kring sex (Vinröd) - Selected */
.diary-option.selected[data-value="#lust"],
.diary-option.selected[data-value="#spicythoughts"],
.diary-option.selected[data-value="#fantasier"],
.diary-option.selected[data-value="#kåt"],
.diary-option.selected[data-value="#sexlivet"],
.diary-option.selected[data-value="#intimitet"],
.diary-option.selected[data-value="#aftercare"],
.diary-option.selected[data-value="#spicyreflektion"],
.diary-option.selected[data-value="#desire"],
.diary-option.selected[data-value="#hett"] {
  background: rgba(185, 28, 28, 0.25);
  color: #f87171;
  border-color: rgba(185, 28, 28, 0.5);
}

/* 🌿 Livet / Vardag / Relationer (Mossgrön) - Selected */
.diary-option.selected[data-value="#idag"],
.diary-option.selected[data-value="#livet"],
.diary-option.selected[data-value="#mittliv"],
.diary-option.selected[data-value="#ögonblick"],
.diary-option.selected[data-value="#händelser"],
.diary-option.selected[data-value="#minstund"],
.diary-option.selected[data-value="#justnu"],
.diary-option.selected[data-value="#relationer"],
.diary-option.selected[data-value="#minvardag"],
.diary-option.selected[data-value="#pågång"] {
  background: rgba(101, 163, 13, 0.25);
  color: #a3e635;
  border-color: rgba(101, 163, 13, 0.5);
}

/* ✨ Tankar / Känslor / Reflektion (Plommonlila) - Selected */
.diary-option.selected[data-value="#heltärligt"],
.diary-option.selected[data-value="#random"],
.diary-option.selected[data-value="#liteommycket"],
.diary-option.selected[data-value="#tankarutanfilter"],
.diary-option.selected[data-value="#reflektioner"],
.diary-option.selected[data-value="#djupatankar"] {
  background: rgba(147, 51, 234, 0.25);
  color: #c4b5fd;
  border-color: rgba(147, 51, 234, 0.5);
}

/* 🎥 Idéer / Skapande / Arbete / Projekt (Petrolblå) - Selected */
.diary-option.selected[data-value="#idéer"],
.diary-option.selected[data-value="#inspiration"],
.diary-option.selected[data-value="#contentcreation"],
.diary-option.selected[data-value="#jobbgrejer"] {
  background: rgba(13, 148, 136, 0.25);
  color: #5eead4;
  border-color: rgba(13, 148, 136, 0.5);
}

/* ========================================
 * Personals Tags
 * ======================================== */

/* Personals tag container */
.personals-tags {
  margin-bottom: 1.5%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.personals-tags:empty {
  display: none;
}

/* Personals tag (selected/displayed) - Grundform */
.personals-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid;
}

.personals-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.personals-tag::after {
  content: ' ×';
  margin-left: var(--spacing-xs);
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* Personals options container */
.personals-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

/* Personals option (selectable) - Grundform */
.personals-option {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.personals-option:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Personals tags - Vibe & personlighet (Plommonlila) */
.personals-tag[data-category="vibe"],
.personals-option[data-category="vibe"] {
  background: rgba(147, 51, 234, 0.15);
  color: #c4b5fd;
  border-color: rgba(147, 51, 234, 0.35);
}

.personals-tag[data-category="vibe"]::after {
  color: #c4b5fd;
}

.personals-tag[data-category="vibe"]:hover {
  background: rgba(147, 51, 234, 0.25);
  border-color: #c4b5fd;
}

.personals-tag[data-category="vibe"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="vibe"]:hover {
  background: rgba(147, 51, 234, 0.25);
  border-color: #c4b5fd;
}

.personals-option[data-category="vibe"].selected {
  background: rgba(147, 51, 234, 0.25);
  color: #c4b5fd;
  border-color: rgba(147, 51, 234, 0.5);
}

/* Personals tags - Kontaktstil & tempo (Kallt blå) */
.personals-tag[data-category="contact"],
.personals-option[data-category="contact"] {
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.35);
}

.personals-tag[data-category="contact"]::after {
  color: #7dd3fc;
}

.personals-tag[data-category="contact"]:hover {
  background: rgba(14, 165, 233, 0.25);
  border-color: #7dd3fc;
}

.personals-tag[data-category="contact"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="contact"]:hover {
  background: rgba(14, 165, 233, 0.25);
  border-color: #7dd3fc;
}

.personals-option[data-category="contact"].selected {
  background: rgba(14, 165, 233, 0.25);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.5);
}

/* Personals tags - Trygghet & samspel (Kall gul) */
.personals-tag[data-category="safety"],
.personals-option[data-category="safety"] {
  background: rgba(234, 179, 8, 0.15);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.35);
}

.personals-tag[data-category="safety"]::after {
  color: #fde047;
}

.personals-tag[data-category="safety"]:hover {
  background: rgba(234, 179, 8, 0.25);
  border-color: #fde047;
}

.personals-tag[data-category="safety"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="safety"]:hover {
  background: rgba(234, 179, 8, 0.25);
  border-color: #fde047;
}

.personals-option[data-category="safety"].selected {
  background: rgba(234, 179, 8, 0.25);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.5);
}

/* Personals tags - Plats & logistik (Teal) */
.personals-tag[data-category="location"],
.personals-option[data-category="location"] {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.35);
}

.personals-tag[data-category="location"]::after {
  color: #5eead4;
}

.personals-tag[data-category="location"]:hover {
  background: rgba(20, 184, 166, 0.25);
  border-color: #5eead4;
}

.personals-tag[data-category="location"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="location"]:hover {
  background: rgba(20, 184, 166, 0.25);
  border-color: #5eead4;
}

.personals-option[data-category="location"].selected {
  background: rgba(20, 184, 166, 0.25);
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.5);
}

/* Personals tags - Förväntningar & gränser - Casual (Soft peachy pink) */
.personals-tag[data-category="casual_expectations"],
.personals-option[data-category="casual_expectations"] {
  background: rgba(255, 192, 203, 0.15);
  color: #fbcfe8;
  border-color: rgba(255, 192, 203, 0.35);
}

.personals-tag[data-category="casual_expectations"]::after {
  color: #fbcfe8;
}

.personals-tag[data-category="casual_expectations"]:hover {
  background: rgba(255, 192, 203, 0.25);
  border-color: #fbcfe8;
}

.personals-tag[data-category="casual_expectations"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="casual_expectations"]:hover {
  background: rgba(255, 192, 203, 0.25);
  border-color: #fbcfe8;
}

.personals-option[data-category="casual_expectations"].selected {
  background: rgba(255, 192, 203, 0.25);
  color: #fbcfe8;
  border-color: rgba(255, 192, 203, 0.5);
}

/* Personals tags - Trygghet/ramar - Kink (Plommonröd) */
.personals-tag[data-category="kink_safety"],
.personals-option[data-category="kink_safety"] {
  background: rgba(190, 18, 60, 0.15);
  color: #fca5a5;
  border-color: rgba(190, 18, 60, 0.35);
}

.personals-tag[data-category="kink_safety"]::after {
  color: #fca5a5;
}

.personals-tag[data-category="kink_safety"]:hover {
  background: rgba(190, 18, 60, 0.25);
  border-color: #fca5a5;
}

.personals-tag[data-category="kink_safety"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="kink_safety"]:hover {
  background: rgba(190, 18, 60, 0.25);
  border-color: #fca5a5;
}

.personals-option[data-category="kink_safety"].selected {
  background: rgba(190, 18, 60, 0.25);
  color: #fca5a5;
  border-color: rgba(190, 18, 60, 0.5);
}

/* Personals tags - Poly-dynamik - Poly/Öppen relation (Sage grön) */
.personals-tag[data-category="poly_dynamics"],
.personals-option[data-category="poly_dynamics"] {
  background: rgba(134, 239, 172, 0.15);
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.35);
}

.personals-tag[data-category="poly_dynamics"]::after {
  color: #86efac;
}

.personals-tag[data-category="poly_dynamics"]:hover {
  background: rgba(134, 239, 172, 0.25);
  border-color: #86efac;
}

.personals-tag[data-category="poly_dynamics"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="poly_dynamics"]:hover {
  background: rgba(134, 239, 172, 0.25);
  border-color: #86efac;
}

.personals-option[data-category="poly_dynamics"].selected {
  background: rgba(134, 239, 172, 0.25);
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.5);
}

/* Personals tags - Relation-fokus - Relation (Mörkt dustyrose) */
.personals-tag[data-category="relation_focus"],
.personals-option[data-category="relation_focus"] {
  background: rgba(190, 132, 140, 0.15);
  color: #e8b4b8;
  border-color: rgba(190, 132, 140, 0.35);
}

.personals-tag[data-category="relation_focus"]::after {
  color: #e8b4b8;
}

.personals-tag[data-category="relation_focus"]:hover {
  background: rgba(190, 132, 140, 0.25);
  border-color: #e8b4b8;
}

.personals-tag[data-category="relation_focus"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="relation_focus"]:hover {
  background: rgba(190, 132, 140, 0.25);
  border-color: #e8b4b8;
}

.personals-option[data-category="relation_focus"].selected {
  background: rgba(190, 132, 140, 0.25);
  color: #e8b4b8;
  border-color: rgba(190, 132, 140, 0.5);
}

/* Personals tags - Collab-stil - Samarbete (Sienna-Coral Rust) */
.personals-tag[data-category="collab_style"],
.personals-option[data-category="collab_style"] {
  background: rgba(205, 92, 92, 0.15);
  color: #f4a460;
  border-color: rgba(205, 92, 92, 0.35);
}

.personals-tag[data-category="collab_style"]::after {
  color: #f4a460;
}

.personals-tag[data-category="collab_style"]:hover {
  background: rgba(205, 92, 92, 0.25);
  border-color: #f4a460;
}

.personals-tag[data-category="collab_style"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="collab_style"]:hover {
  background: rgba(205, 92, 92, 0.25);
  border-color: #f4a460;
}

.personals-option[data-category="collab_style"].selected {
  background: rgba(205, 92, 92, 0.25);
  color: #f4a460;
  border-color: rgba(205, 92, 92, 0.5);
}

/* Personals tags - Sociala aktiviteter - Socialt (Mint/Aqua) */
.personals-tag[data-category="social_activities"],
.personals-option[data-category="social_activities"] {
  background: rgba(102, 221, 170, 0.15);
  color: #66ddaa;
  border-color: rgba(102, 221, 170, 0.35);
}

.personals-tag[data-category="social_activities"]::after {
  color: #66ddaa;
}

.personals-tag[data-category="social_activities"]:hover {
  background: rgba(102, 221, 170, 0.25);
  border-color: #66ddaa;
}

.personals-tag[data-category="social_activities"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="social_activities"]:hover {
  background: rgba(102, 221, 170, 0.25);
  border-color: #66ddaa;
}

.personals-option[data-category="social_activities"].selected {
  background: rgba(102, 221, 170, 0.25);
  color: #66ddaa;
  border-color: rgba(102, 221, 170, 0.5);
}

/* Personals tags - Castcrew-stil - Casting & Crew (Slate) */
.personals-tag[data-category="castcrew_style"],
.personals-option[data-category="castcrew_style"] {
  background: rgba(112, 128, 144, 0.15);
  color: #708090;
  border-color: rgba(112, 128, 144, 0.35);
}

.personals-tag[data-category="castcrew_style"]::after {
  color: #708090;
}

.personals-tag[data-category="castcrew_style"]:hover {
  background: rgba(112, 128, 144, 0.25);
  border-color: #708090;
}

.personals-tag[data-category="castcrew_style"]:hover::after {
  opacity: 1;
}

.personals-option[data-category="castcrew_style"]:hover {
  background: rgba(112, 128, 144, 0.25);
  border-color: #708090;
}

.personals-option[data-category="castcrew_style"].selected {
  background: rgba(112, 128, 144, 0.25);
  color: #708090;
  border-color: rgba(112, 128, 144, 0.5);
}

/* Backward compatibility: Keep #diary-tags-container .seeking-option for now */
/* These will be replaced by .diary-option in PHP files */

.seeking-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.seeking-option {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

/* "Söker" options in about.php (tags without # prefix) */
/* Default seeking-option styling (only for options without specific class) */
.seeking-option:not([data-value^="#"]):not(.seeking-tag-private):not(.seeking-tag-pro) {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.35);
}

.seeking-option:not([data-value^="#"]):not(.seeking-tag-private):not(.seeking-tag-pro):hover {
  background: rgba(20, 184, 166, 0.25);
  border-color: rgba(20, 184, 166, 0.5);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Selected state - enhance existing colors instead of overriding */
.seeking-option.selected {
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* "Söker" options selected state (tags without # prefix) - preserve specific class colors */
.seeking-option.selected.seeking-tag-private:not([data-value^="#"]) {
  background: rgba(20, 184, 166, 0.25) !important;
  color: #5eead4 !important;
  border-color: rgba(20, 184, 166, 0.5) !important;
}

.seeking-option.selected.seeking-tag-pro:not([data-value^="#"]) {
  background: rgba(99, 102, 241, 0.25) !important;
  color: #a5b4fc !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
}

/* Fallback for selected without specific class */
.seeking-option.selected:not([data-value^="#"]):not(.seeking-tag-private):not(.seeking-tag-pro) {
  background: rgba(20, 184, 166, 0.25) !important;
  color: #5eead4 !important;
  border-color: rgba(20, 184, 166, 0.5) !important;
}

/* NOTE: Gallery tag CSS moved to .gallery-option above */
/* NOTE: Diary tag CSS moved to .diary-option above */

/* Selected states for diary tags (only in diary search container) - match theme-desyra.css */
/* 🔥 Sensuellt / Lust / Reflektion kring sex (Vinröd) - Selected */
#diary-tags-container .seeking-option.selected[data-value="#lust"],
#diary-tags-container .seeking-option.selected[data-value="#spicythoughts"],
#diary-tags-container .seeking-option.selected[data-value="#fantasier"],
#diary-tags-container .seeking-option.selected[data-value="#kåt"],
#diary-tags-container .seeking-option.selected[data-value="#sexlivet"],
#diary-tags-container .seeking-option.selected[data-value="#intimitet"],
#diary-tags-container .seeking-option.selected[data-value="#aftercare"],
#diary-tags-container .seeking-option.selected[data-value="#spicyreflektion"],
#diary-tags-container .seeking-option.selected[data-value="#desire"],
#diary-tags-container .seeking-option.selected[data-value="#hett"] {
  background: rgba(185, 28, 28, 0.25);
  color: #f87171;
  border-color: rgba(185, 28, 28, 0.5);
}

/* 🌿 Livet / Vardag / Relationer (Mossgrön) - Selected */
#diary-tags-container .seeking-option.selected[data-value="#idag"],
#diary-tags-container .seeking-option.selected[data-value="#livet"],
#diary-tags-container .seeking-option.selected[data-value="#mittliv"],
#diary-tags-container .seeking-option.selected[data-value="#ögonblick"],
#diary-tags-container .seeking-option.selected[data-value="#händelser"],
#diary-tags-container .seeking-option.selected[data-value="#minstund"],
#diary-tags-container .seeking-option.selected[data-value="#justnu"],
#diary-tags-container .seeking-option.selected[data-value="#relationer"],
#diary-tags-container .seeking-option.selected[data-value="#minvardag"],
#diary-tags-container .seeking-option.selected[data-value="#pågång"] {
  background: rgba(101, 163, 13, 0.25);
  color: #a3e635;
  border-color: rgba(101, 163, 13, 0.5);
}

/* ✨ Tankar / Känslor / Reflektion (Plommonlila) - Selected */
#diary-tags-container .seeking-option.selected[data-value="#heltärligt"],
#diary-tags-container .seeking-option.selected[data-value="#random"],
#diary-tags-container .seeking-option.selected[data-value="#liteommycket"],
#diary-tags-container .seeking-option.selected[data-value="#tankarutanfilter"],
#diary-tags-container .seeking-option.selected[data-value="#reflektioner"],
#diary-tags-container .seeking-option.selected[data-value="#djupatankar"] {
  background: rgba(147, 51, 234, 0.25);
  color: #c4b5fd;
  border-color: rgba(147, 51, 234, 0.5);
}

/* 🎥 Idéer / Skapande / Arbete / Projekt (Petrolblå) - Selected */
#diary-tags-container .seeking-option.selected[data-value="#idéer"],
#diary-tags-container .seeking-option.selected[data-value="#inspiration"],
#diary-tags-container .seeking-option.selected[data-value="#contentcreation"],
#diary-tags-container .seeking-option.selected[data-value="#jobbgrejer"] {
  background: rgba(13, 148, 136, 0.25);
  color: #5eead4;
  border-color: rgba(13, 148, 136, 0.5);
}

.search-checkbox-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Help Text and Hints
   ============================================ */
.help {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.hint-text {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.form-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.form-section-help {
  color: var(--color-text-light);
  font-size: 0.875rem;
  margin: 0 0 var(--spacing-lg) 0;
  line-height: 1.5;
}

.form-help {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin-top: var(--spacing-xs);
  line-height: 1.4;
}

.required {
  color: var(--color-danger);
  margin-left: 2px;
}

/* ============================================
   Profile Notifications
   ============================================ */
.profile-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  max-width: 360px;
  min-width: 280px;
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.profile-notification-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.profile-notification-error .profile-notification-content {
  border-left: 3px solid var(--color-danger);
}

.profile-notification-warning .profile-notification-content {
  border-left: 3px solid var(--color-warning);
}

.profile-notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: bold;
  flex-shrink: 0;
}

.profile-notification-success .profile-notification-icon {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-success);
}

.profile-notification-error .profile-notification-icon {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
}

.profile-notification-warning .profile-notification-icon {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-warning);
}

.profile-notification-message {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.5;
}

.profile-notification-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.profile-notification-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

/* ============================================
   Reaction Menus
   ============================================ */
.reaction-toggle-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.reaction-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(1.1);
}

.reaction-toggle-btn__stack {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.reaction-toggle-btn__emojis {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.reaction-toggle-btn__emoji-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 0 0 -0.35rem;
  font-size: 0.95rem;
  line-height: 1;
  position: relative;
}

.reaction-toggle-btn__emoji-i:first-child {
  margin-left: 0;
  z-index: 5;
}

.reaction-toggle-btn__emoji-i:nth-child(2) {
  z-index: 4;
}

.reaction-toggle-btn__emoji-i:nth-child(3) {
  z-index: 3;
}

.reaction-toggle-btn__solo {
  font-size: 1rem;
  line-height: 1;
}

.reaction-toggle-btn__count {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-muted, #a1a1aa);
  line-height: 1;
}

.reaction-toggle-btn--has-summary {
  padding: 0.12rem 0.28rem 0.12rem 0.2rem;
}

.reaction-toggle-btn .reaction-count {
  font-size: 0.875rem;
  color: var(--color-text-light, #d1d5db);
}

.comment-reply-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.comment-reply-toggle-btn .comment-count {
  font-size: 0.875rem;
  color: var(--color-text-light, #d1d5db);
  margin-left: 0.15rem;
}

.reaction-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  background: var(--color-surface, #1a1a1a);
  border: 1px solid var(--color-border, #404040);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 0.5rem;
  display: none;
  z-index: 1000;
  gap: 0.25rem;
  flex-wrap: wrap;
  min-width: 200px;
  max-height: none;
}

.reaction-menu.open {
  display: flex;
}

.reaction-menu button {
  background: transparent;
  border: 1px solid var(--color-border, #404040);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.reaction-menu button:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.reaction-container {
  position: relative;
  display: inline-block;
}

/* ============================================
   Comment Components
   ============================================ */
.comment-layout {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.4rem 0 0.1rem 0.75rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  gap: 0.35rem;
  min-width: 0;
}

.comment-user-info {
  flex: 1;
  min-width: 0;
}

.comment-user-info strong {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.comment-user-info .pro-badge,
.comment-user-info .admin-badge {
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 0;
  box-sizing: border-box;
}

.comment-user-info .pro-badge svg,
.comment-user-info .admin-badge svg {
  width: 16px;
  height: 16px;
}

.comment-time-ago {
  font-size: 0.875rem;
  color: var(--color-text-muted, #999);
  margin-left: 0.5rem;
  margin-right: 0;
  flex-shrink: 0;
}

.comment-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-body {
  margin-bottom: 0.3rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.comment-actions-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.3rem;
  justify-content: flex-start;
}

.comment-actions-dropdown {
  margin-left: auto;
  margin-right: 2%;
}

.comment-reply-toggle-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.comment-reply-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(1.1);
}

.comment-reply-form-container {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.comment-reply-form {
  display: flex;
  flex-direction: column;
  gap: 0.025rem;
}

.comment-reply-form textarea {
  width: 100%;
  resize: none !important;
  line-height: 1.4;
  padding: 0.25rem 0.5rem;
  min-height: 2.2rem !important;
  max-height: 8rem;
  height: auto;
  overflow-y: hidden;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.comment-reply-submit-btn {
  background: var(--color-primary, #06b6d4);
  border: 1px solid var(--color-primary, #06b6d4);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
  margin-top: 0.25rem;
}

.comment-reply-submit-btn:hover {
  background: var(--color-primary-dark, #0891b2);
  border-color: var(--color-primary-dark, #0891b2);
}

.comment-reply-btn {
  background: transparent;
  border: 1px solid var(--color-border, #404040);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}

.comment-reply-btn::-webkit-details-marker {
  display: none;
}

.comment-reply-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-primary, #06b6d4);
  transform: scale(1.1);
}

/* ============================================
   Comments List Container
   ============================================ */
#comments-list-container,
#diary-comments-list-container {
  border: 1px solid var(--color-border, #404040);
  border-radius: 8px;
  padding: 0.2rem;
  margin-top: 1rem;
}

#comments-list-container .comments,
#comments-list-container ul.comments,
#diary-comments-list-container .comments,
#diary-comments-list-container ul.comments {
  list-style: none;
  padding: 0;
  margin: 0;
}

#comments-list-container .comment,
#diary-comments-list-container .comment {
  list-style: none;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#comments-list-container .comment:last-child,
#diary-comments-list-container .comment:last-child {
  border-bottom: none;
}

/* Comment replies - Facebook-style indentation */
#comments-list-container .comment-replies,
#diary-comments-list-container .comment-replies {
  margin-left: 1.89rem !important;
  padding-left: 0;
  margin-top: 0.25rem;
  width: calc(100% - 1.89rem);
  position: relative;
}

/* All replies (both first-level and nested) are now on the same level - same styling for all */
#comments-list-container .comment-replies > .comment-reply,
#diary-comments-list-container .comment-replies > .comment-reply {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  margin-bottom: 0.25rem;
  margin-left: 0.9rem;
  position: relative;
}

/* First reply - add top border that starts after the vertical line (like borders between replies) */
#comments-list-container .comment-replies > .comment-reply:first-child,
#diary-comments-list-container .comment-replies > .comment-reply:first-child,
#comments-list-container .comment-replies > .comment-replies-more-wrap + .comment-reply,
#diary-comments-list-container .comment-replies > .comment-replies-more-wrap + .comment-reply {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

/* Individual border line for all replies - same styling for all */
#comments-list-container .comment-replies > .comment-reply > .comment-layout::before,
#diary-comments-list-container .comment-replies > .comment-reply > .comment-layout::before {
  content: '';
  position: absolute;
  left: -0.9rem;
  top: 8px;
  height: calc(100% - 16px);
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}

/* First reply - line starts from top to connect with main comment */
#comments-list-container .comment-replies > .comment-reply:first-child > .comment-layout::before,
#diary-comments-list-container .comment-replies > .comment-reply:first-child > .comment-layout::before,
#comments-list-container .comment-replies > .comment-replies-more-wrap + .comment-reply > .comment-layout::before,
#diary-comments-list-container .comment-replies > .comment-replies-more-wrap + .comment-reply > .comment-layout::before {
  top: -8px;
  height: calc(100% + 8px - 8px);
}

#comments-list-container .comment-reply:last-child,
#diary-comments-list-container .comment-reply:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Sista svaret: trådlinjen ska inte sticka ut under innehållet */
#comments-list-container .comment-replies > .comment-reply:last-child:not(:first-child) > .comment-layout::before,
#diary-comments-list-container .comment-replies > .comment-reply:last-child:not(:first-child) > .comment-layout::before {
  top: 8px;
  height: calc(100% - 16px);
}

/* Visa fler svar — inline i svarstråden, samma look som "Svara" */
.comment-replies-more-wrap {
  list-style: none;
  margin: 0 0 0.15rem 0.9rem;
  padding: 0;
  border: none;
  background: transparent;
}

.comment-replies-more {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.05rem 0 0.15rem 0.75rem;
  min-width: 0;
}

.comment-replies-more-thread {
  width: 1.15rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  border-radius: 1px;
}

.comment-replies-more .comment-replies-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  padding: 0.1rem 0;
  margin: 0;
  min-height: 0;
  width: auto;
  height: auto;
  line-height: 1.35;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.comment-replies-more .comment-replies-toggle:hover {
  color: rgba(255, 255, 255, 0.9);
  background: transparent !important;
  text-decoration: none;
}

.comment-replies-more .comment-replies-toggle:focus-visible {
  outline: 2px solid var(--color-primary, #06b6d4);
  outline-offset: 2px;
  border-radius: 2px;
}

#comments-list-container .comment-reply .comment-layout,
#diary-comments-list-container .comment-reply .comment-layout {
  padding-left: 0;
  position: relative;
}

/* All comment avatars in gallery and diary should be 40px */
#comments-list-container .comment-avatar,
#comments-list-container .comment-avatar-placeholder,
#diary-comments-list-container .comment-avatar,
#diary-comments-list-container .comment-avatar-placeholder {
  width: 40px;
  height: 40px;
}

/* ============================================
   Auth Components - Modern Styling
   ============================================ */
.auth-logo-container {
  text-align: center;
  margin-bottom: var(--spacing-sm);
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-logo {
  height: 80px;
  width: auto;
}

/* Login/register: ~halverad vertikal luft mellan statusbanner och inloggningskort */
body.page-auth-login .maintenance-banner,
body.page-auth-register .maintenance-banner {
  margin-bottom: 0.5% !important;
}

body.page-auth-login main.container,
body.page-auth-login .maintenance-banner + main.container,
body.page-auth-login .alerts.wrap + main.container,
body.page-auth-login .maintenance-banner + .alerts.wrap + main.container,
body.page-auth-register main.container,
body.page-auth-register .maintenance-banner + main.container,
body.page-auth-register .alerts.wrap + main.container,
body.page-auth-register .maintenance-banner + .alerts.wrap + main.container {
  padding-top: 0.5% !important;
}

@media (max-width: 768px) {
  body.page-auth-login main.container,
  body.page-auth-login .maintenance-banner + main.container,
  body.page-auth-login .alerts.wrap + main.container,
  body.page-auth-login .maintenance-banner + .alerts.wrap + main.container,
  body.page-auth-register main.container,
  body.page-auth-register .maintenance-banner + main.container,
  body.page-auth-register .alerts.wrap + main.container,
  body.page-auth-register .maintenance-banner + .alerts.wrap + main.container {
    padding-top: 0.5% !important;
  }
}

.auth-card--register {
  max-width: 640px;
}

#register-form .form-actions.auth-cta-bar {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xs);
}

#register-form + .auth-link-center {
  display: block;
  margin-top: var(--spacing-md);
}

/* Modern Auth Card — overflow clips ::before/::after so gradients follow card shape */
.auth-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.6) 0%, rgba(30, 30, 30, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 
              0 0 0 1px rgba(6, 182, 212, 0.1) inset;
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    rgba(6, 182, 212, 0.03) 0%, 
    transparent 30%,
    transparent 70%,
    rgba(157, 78, 221, 0.03) 100%);
  pointer-events: none;
  z-index: 0;
}

.auth-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    rgba(6, 182, 212, 0.4) 0%,
    rgba(157, 78, 221, 0.4) 100%);
  border-radius: 12px 12px 0 0;
  z-index: 1;
}

.auth-card > * {
  position: relative;
  z-index: 1;
}

/* Modern Auth Title */
.auth-title {
  text-align: center;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-large {
  height: 100px;
  width: auto;
}

.auth-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-container input:invalid,
.auth-input-container input:-moz-ui-invalid {
  box-shadow: none;
  border-color: var(--color-border);
  outline: none;
}

.auth-input-container input:invalid:focus,
.auth-input-container input:-moz-ui-invalid:focus {
  box-shadow: 0 0 0 3px var(--color-glow);
  border-color: var(--color-primary);
}

.auth-input-padding {
  padding-right: 2.5rem;
}

.auth-input-status {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
}

.auth-status-success {
  color: var(--color-success);
}

.auth-status-danger {
  color: var(--color-danger);
}

.auth-status-loading {
  color: var(--color-primary);
  animation: pulse 1s infinite;
}

.auth-help-text {
  color: var(--color-text-light);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
  display: block;
  text-align: left;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

.auth-error-list {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
}

.auth-submit-btn {
  width: auto;
}

.ui-text-link,
.auth-text-link,
.auth-link-center {
  display: inline-block;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  padding: 0 0 1px;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.auth-link-center {
  text-align: center;
  margin-top: var(--spacing-md);
  align-self: center;
}

.ui-text-link::before,
.auth-text-link::before,
.auth-link-center::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  opacity: 0.45;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ui-text-link:hover,
.ui-text-link:focus-visible,
.auth-text-link:hover,
.auth-text-link:focus-visible,
.auth-link-center:hover,
.auth-link-center:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
}

.ui-text-link:hover::before,
.ui-text-link:focus-visible::before,
.auth-text-link:hover::before,
.auth-text-link:focus-visible::before,
.auth-link-center:hover::before,
.auth-link-center:focus-visible::before {
  opacity: 1;
  height: 2px;
}

.ui-text-link:focus-visible,
.auth-text-link:focus-visible,
.auth-link-center:focus-visible {
  outline: none;
}

/* Login page adjustments (kept intentionally minimal) */
#login-form .auth-link-center {
  margin-top: var(--spacing-xs);
}

#login-form .form-actions {
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}

/* Login/register CTAs — tydlig luft som gäst hero */
#login-form .form-actions.auth-cta-bar {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xs);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
}

#login-form .form-actions.auth-cta-bar .btn,
#login-form .form-actions.auth-cta-bar a.btn {
  min-height: 42px;
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
  border-radius: var(--border-radius);
}

#login-form .form-actions.auth-cta-bar .btn-ghost {
  font-weight: 600;
}

#login-form .form-actions .btn,
#login-form .form-actions a.btn {
  margin-bottom: 0;
}

/* Legacy: .auth-card .form-check-inline { margin-left: 3% } skjuter raden höger vs inputs — nollställ på login */
#login-form .login-remember-row .form-check-inline {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

#login-form .login-remember-row .form-check-inline input[type="checkbox"] {
  margin-left: 0;
}

.auth-fieldset-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-fieldset-center .form-label {
  text-align: center;
}

.radio-group-center {
  justify-content: center;
}

/* ============================================
   Preferences Section
   ============================================ */
/* Modern Preferences Section Styling (for prefs.php) */
.prefs-section {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.6) 0%, rgba(30, 30, 30, 0.5) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.prefs-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(6, 182, 212, 0.02) 0%, 
    transparent 50%,
    rgba(157, 78, 221, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.prefs-section:hover {
  border-color: rgba(6, 182, 212, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(6, 182, 212, 0.1) inset;
}

.prefs-section:hover::before {
  opacity: 1;
}

.prefs-section[open] {
  border-color: rgba(6, 182, 212, 0.3);
  background: linear-gradient(135deg, 
    rgba(30, 30, 30, 0.65) 0%, 
    rgba(30, 30, 30, 0.55) 100%);
}

.prefs-section > * {
  position: relative;
  z-index: 1;
}

.prefs-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.prefs-section-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.prefs-section-header::-webkit-details-marker {
  display: none;
}

.prefs-section-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.expand-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1rem;
  color: var(--color-text-muted);
}

.prefs-section[open] .expand-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.prefs-section-content {
  padding: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

.prefs-section-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(6, 182, 212, 0.3) 25%,
    rgba(157, 78, 221, 0.3) 75%,
    transparent 100%);
  z-index: 1;
}

/* ============================================
   Preferences View (Profile View Tab)
   ============================================ */
.prefs-cards-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.prefs-card {
  width: 100%;
  margin: 0;
}

.prefs-cards-container .prefs-card .row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1%;
}

.prefs-card h3 {
  margin: 0;
}

/* Prefs tag styling */
.prefs-tag {
  cursor: default;
  pointer-events: none;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: #06b6d4;
  /* Remove all hover effects - tags are not clickable */
  transition: none;
}

.prefs-tag:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.3);
  transform: none;
  box-shadow: none;
  cursor: default;
}

/* Tag pro styling */
.tag-pro {
  cursor: default;
  pointer-events: none;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: #06b6d4;
}

.tag-pro:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.3);
  transform: none;
}

/* Prefs group foldout styling */
.prefs-group-foldout {
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  overflow: hidden;
}

.prefs-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  cursor: pointer;
  list-style: none;
  background: transparent;
  transition: background 0.2s ease;
}

.prefs-group-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

.prefs-group-toggle::-webkit-details-marker {
  display: none;
}

.prefs-group-toggle .form-label {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.prefs-group-toggle .toggle-icon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  color: var(--color-text-muted, #999);
}

.prefs-group-foldout[open] .toggle-icon {
  transform: rotate(180deg);
}

.prefs-group-content {
  padding: 0.5rem;
  border-top: none;
}

/* Desktop: auto-open foldouts */
@media (min-width: 769px) {
  .prefs-group-foldout {
    margin-bottom: 1rem;
  }
  
  .prefs-group-toggle {
    padding: 0.5rem;
    background: transparent;
    cursor: default;
  }
  
  .prefs-group-toggle:hover {
    background: transparent;
  }
  
  .prefs-group-toggle .toggle-icon {
    display: none;
  }
  
  .prefs-group-content {
    padding: 0.5rem;
  }
}

/* ============================================
   Form Sections
   ============================================ */
.form-section {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--spacing-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-section-title::before {
  content: '';
  width: 4px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 2px;
}

.form-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

/* ============================================
   Responsive Components
   ============================================ */
@media (max-width: 768px) {
  .form-options--inline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .profile-notification {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
    min-width: auto;
  }
  
  .radio-group-horizontal {
    flex-direction: column;
  }
}

/* ============================================
   Tag Selection (for news/admin forms)
   ============================================ */
.tag-selection {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.tag-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-checkbox input[type="checkbox"] {
  display: none;
}

.tag-label {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.tag-checkbox input[type="checkbox"]:checked + .tag-label {
  border-color: var(--tag-color);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
  transform: scale(1.05);
}

/* ============================================================
   Enhetliga innehållstaggar (data-tag-group / intern kategori)
   Dagbok, galleri, sök — samma palett som tidigare hashtag-grupper
   ============================================================ */

/* Känsla & energi — vinröd */
.diary-list-tag[data-tag-group="feelings_energy"],
.diary-tag[data-tag-group="feelings_energy"],
.diary-option[data-tag-group="feelings_energy"],
#diary-tags-container .diary-option[data-tag-group="feelings_energy"],
.gallery-tag[data-tag-group="feelings_energy"],
.gallery-option[data-tag-group="feelings_energy"],
#image-tags-container .gallery-option[data-tag-group="feelings_energy"] {
  background: rgba(185, 28, 28, 0.15);
  color: #f87171;
  border: 1px solid rgba(185, 28, 28, 0.35);
}
#diary-tags-container .diary-option[data-tag-group="feelings_energy"],
#image-tags-container .gallery-option[data-tag-group="feelings_energy"] {
  border-color: rgba(185, 28, 28, 0.35);
}

/* Vardag & kontext — mossgrön */
.diary-list-tag[data-tag-group="daily_context"],
.diary-tag[data-tag-group="daily_context"],
.diary-option[data-tag-group="daily_context"],
#diary-tags-container .diary-option[data-tag-group="daily_context"],
.gallery-tag[data-tag-group="daily_context"],
.gallery-option[data-tag-group="daily_context"],
#image-tags-container .gallery-option[data-tag-group="daily_context"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border: 1px solid rgba(101, 163, 13, 0.35);
}
#diary-tags-container .diary-option[data-tag-group="daily_context"],
#image-tags-container .gallery-option[data-tag-group="daily_context"] {
  border-color: rgba(101, 163, 13, 0.35);
}

/* Relationer & socialt — kallblå */
.diary-list-tag[data-tag-group="relations_social"],
.diary-tag[data-tag-group="relations_social"],
.diary-option[data-tag-group="relations_social"],
#diary-tags-container .diary-option[data-tag-group="relations_social"],
.gallery-tag[data-tag-group="relations_social"],
.gallery-option[data-tag-group="relations_social"],
#image-tags-container .gallery-option[data-tag-group="relations_social"] {
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border: 1px solid rgba(14, 165, 233, 0.35);
}
#diary-tags-container .diary-option[data-tag-group="relations_social"],
#image-tags-container .gallery-option[data-tag-group="relations_social"] {
  border-color: rgba(14, 165, 233, 0.35);
}

/* Edge & dynamik — plommonröd */
.diary-list-tag[data-tag-group="edge_dynamics"],
.diary-tag[data-tag-group="edge_dynamics"],
.diary-option[data-tag-group="edge_dynamics"],
#diary-tags-container .diary-option[data-tag-group="edge_dynamics"],
.gallery-tag[data-tag-group="edge_dynamics"],
.gallery-option[data-tag-group="edge_dynamics"],
#image-tags-container .gallery-option[data-tag-group="edge_dynamics"] {
  background: rgba(190, 18, 60, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(190, 18, 60, 0.35);
}
#diary-tags-container .diary-option[data-tag-group="edge_dynamics"],
#image-tags-container .gallery-option[data-tag-group="edge_dynamics"] {
  border-color: rgba(190, 18, 60, 0.35);
}

/* Uttryck & skapande — petrolblå */
.diary-list-tag[data-tag-group="expression_creative"],
.diary-tag[data-tag-group="expression_creative"],
.diary-option[data-tag-group="expression_creative"],
#diary-tags-container .diary-option[data-tag-group="expression_creative"],
.gallery-tag[data-tag-group="expression_creative"],
.gallery-option[data-tag-group="expression_creative"],
#image-tags-container .gallery-option[data-tag-group="expression_creative"] {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  border: 1px solid rgba(13, 148, 136, 0.35);
}
#diary-tags-container .diary-option[data-tag-group="expression_creative"],
#image-tags-container .gallery-option[data-tag-group="expression_creative"] {
  border-color: rgba(13, 148, 136, 0.35);
}

/* Kontaktannonser — samma fem interna nycklar */
.personals-tag[data-category="feelings_energy"],
.personals-option[data-category="feelings_energy"] {
  background: rgba(185, 28, 28, 0.15);
  color: #f87171;
  border-color: rgba(185, 28, 28, 0.35);
}
.personals-tag[data-category="daily_context"],
.personals-option[data-category="daily_context"] {
  background: rgba(101, 163, 13, 0.15);
  color: #a3e635;
  border-color: rgba(101, 163, 13, 0.35);
}
.personals-tag[data-category="relations_social"],
.personals-option[data-category="relations_social"] {
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.35);
}
.personals-tag[data-category="edge_dynamics"],
.personals-option[data-category="edge_dynamics"] {
  background: rgba(190, 18, 60, 0.15);
  color: #fca5a5;
  border-color: rgba(190, 18, 60, 0.35);
}
.personals-tag[data-category="expression_creative"],
.personals-option[data-category="expression_creative"] {
  background: rgba(13, 148, 136, 0.15);
  color: #5eead4;
  border-color: rgba(13, 148, 136, 0.35);
}
.personals-tag[data-category="feelings_energy"]::after { color: #f87171; }
.personals-tag[data-category="daily_context"]::after { color: #a3e635; }
.personals-tag[data-category="relations_social"]::after { color: #7dd3fc; }
.personals-tag[data-category="edge_dynamics"]::after { color: #fca5a5; }
.personals-tag[data-category="expression_creative"]::after { color: #5eead4; }
.personals-option[data-category="feelings_energy"]:hover,
.personals-option[data-category="daily_context"]:hover,
.personals-option[data-category="relations_social"]:hover,
.personals-option[data-category="edge_dynamics"]:hover,
.personals-option[data-category="expression_creative"]:hover {
  filter: brightness(1.08);
}