/**
 * Wigrou Codex - Stylesheet
 * Responsive, modern styling for Save Button, Modal, Dashboard, and Cards
 */

:root {
  --wigrou-primary: #0073aa;
  --wigrou-primary-hover: #005177;
  --wigrou-success: #10b981;
  --wigrou-danger: #ef4444;
  --wigrou-gray-50: #f9fafb;
  --wigrou-gray-100: #f3f4f6;
  --wigrou-gray-200: #e5e7eb;
  --wigrou-gray-300: #d1d5db;
  --wigrou-gray-600: #4b5563;
  --wigrou-gray-700: #374151;
  --wigrou-gray-900: #111827;
  --wigrou-radius: 8px;
  --wigrou-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Save to List Button (.pact & .wigrou-save-to-list-btn)
   ========================================================================== */
.pact {
  cursor: pointer;
}

.pact svg {
  vertical-align: middle;
  transition: fill 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
}

button.pact:hover,
button.pact:focus:not(:focus-visible) {
  background: none;
  color: #000;
  transform: scale(1.08);
}

.pact.is-saved svg {
  fill: #ef4444;
  stroke: #ef4444;
}

.pact.is-saved {
  color: #ef4444;
}

button.pact.is-saved:hover,
button.pact.is-saved:focus:not(:focus-visible) {
  color: #ef4444;
  transform: scale(1.08);
}

.wigrou-save-to-list-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1.5px solid var(--wigrou-gray-300);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--wigrou-gray-700);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: none;
  text-decoration: none;
  line-height: 1.4;
  vertical-align: middle;
}

.wigrou-save-to-list-btn:hover {
  border-color: var(--wigrou-primary);
  color: var(--wigrou-primary);
  background: #f0f7fd;
  transform: translateY(-1px);
}

.wigrou-save-to-list-btn.is-saved {
  background: #ecfdf5;
  border-color: var(--wigrou-success);
  color: #065f46;
}

.wigrou-save-to-list-btn.is-saved svg {
  fill: var(--wigrou-success);
  stroke: var(--wigrou-success);
}

.wigrou-btn-icon svg {
  display: block;
  transition:
    fill 0.2s ease,
    stroke 0.2s ease;
}

/* ==========================================================================
   Modal & Backdrop
   ========================================================================== */
.wigrou-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(17, 24, 39, 0.55);
  z-index: 100002 !important;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.wigrou-modal-backdrop.is-active {
  opacity: 1;
}

.wigrou-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100003 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.wigrou-modal-dialog {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: var(--wigrou-shadow);
  overflow: hidden;
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.12s ease-out;
}

.wigrou-modal.is-active .wigrou-modal-dialog {
  transform: scale(1);
  opacity: 1;
}

.wigrou-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--wigrou-gray-200);
}

.wigrou-modal-heading {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--wigrou-gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wigrou-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--wigrou-gray-600);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.wigrou-modal-close:hover {
  color: var(--wigrou-gray-900);
}

.wigrou-modal-body {
  padding: 20px;
  max-height: 65vh;
  overflow-y: auto;
}

.wigrou-modal-footer {
  padding: 12px 20px;
  background: var(--wigrou-gray-50);
  border-top: 1px solid var(--wigrou-gray-200);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Lists Checkbox Selection
   ========================================================================== */
.wigrou-lists-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.wigrou-list-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--wigrou-radius);
  border: 1px solid var(--wigrou-gray-200);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.wigrou-list-item-row:hover {
  background: var(--wigrou-gray-50);
  border-color: var(--wigrou-primary);
}

.wigrou-list-item-label {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--wigrou-gray-900);
  margin: 0;
}

.wigrou-list-item-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--wigrou-primary);
  margin: 0;
}

.wigrou-list-badge-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wigrou-list-item-count {
  font-size: 12px;
  color: var(--wigrou-gray-600);
  background: var(--wigrou-gray-100);
  padding: 2px 7px;
  border-radius: 12px;
  font-weight: 500;
}

/* ==========================================================================
   Create New List Section
   ========================================================================== */
.wigrou-create-section {
  border-top: 1px dashed var(--wigrou-gray-300);
  padding-top: 14px;
  margin-top: 10px;
}

.wigrou-btn-toggle-create {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px dashed var(--wigrou-gray-300);
  border-radius: var(--wigrou-radius);
  color: var(--wigrou-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  justify-content: center;
  transition: all 0.15s ease;
}

.wigrou-btn-toggle-create:hover {
  background: #f0f7fd;
  border-color: var(--wigrou-primary);
}

.wigrou-create-list-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wigrou-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wigrou-form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wigrou-gray-700);
  margin: 0;
}

.wigrou-input,
.wigrou-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--wigrou-gray-300);
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease;
}

.wigrou-input:focus,
.wigrou-textarea:focus {
  border-color: var(--wigrou-primary);
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}

.wigrou-form-group-visibility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wigrou-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--wigrou-gray-200);
  border-radius: 6px;
  cursor: pointer;
  margin: 0;
}

.wigrou-radio-label input {
  margin-top: 3px;
  accent-color: var(--wigrou-primary);
}

.wigrou-radio-label span {
  display: flex;
  flex-direction: column;
}

.wigrou-radio-label strong {
  font-size: 13px;
  color: var(--wigrou-gray-900);
}

.wigrou-radio-label small {
  font-size: 11px;
  color: var(--wigrou-gray-600);
}

.wigrou-create-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wigrou-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none;
  transition: all 0.15s ease !important;
}

.wigrou-btn-primary {
  background: var(--wigrou-primary);
  color: #ffffff !important;
  background-color: var(--wigrou-primary) !important;
}

.wigrou-btn-primary:hover {
  background: var(--wigrou-primary-hover);
}

.wigrou-btn-secondary {
  background: var(--wigrou-gray-200);
  color: var(--wigrou-gray-900) !important;
}

.wigrou-btn-secondary:hover {
  background: var(--wigrou-gray-300);
}

.wigrou-btn-text {
  background: transparent;
  color: var(--wigrou-gray-600);
}

.wigrou-btn-text:hover {
  color: var(--wigrou-gray-900);
}

.wigrou-btn-block {
  width: 100%;
}

.wigrou-btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

.wigrou-btn:disabled,
.wigrou-btn[disabled],
.wigrou-btn.is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: auto !important;
}

.wigrou-btn:disabled:hover,
.wigrou-btn[disabled]:hover,
.wigrou-btn.is-disabled:hover {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  background: var(--wigrou-gray-200) !important;
  color: var(--wigrou-gray-900) !important;
}

.wigrou-btn-outline-danger {
  background: transparent;
  border: 1px solid var(--wigrou-danger);
  color: var(--wigrou-danger) !important;
}

.wigrou-btn-outline-danger:hover {
  background: var(--wigrou-danger);
  color: #fff !important;
}

.wigrou-btn-icon-danger {
  background: transparent;
  border: none;
  color: var(--wigrou-gray-600);
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wigrou-btn-icon-danger:hover {
  background: #fee2e2;
  color: var(--wigrou-danger);
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.wigrou-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.wigrou-toast {
  pointer-events: auto;
  background: var(--wigrou-gray-900);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.wigrou-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Dashboard & Grids
   ========================================================================== */
.wigrou-codex-dashboard {
  margin: 20px 0;
  container-type: inline-size;
}

.wigrou-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--wigrou-gray-200);
  padding-bottom: 16px;
}

.wigrou-dashboard-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.wigrou-dashboard-title h2 {
  margin: 0;
  font-size: 24px;
  color: var(--wigrou-gray-900);
}

.wigrou-lists-counter {
  font-size: 14px;
  color: var(--wigrou-gray-600);
}

.wigrou-lists-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .wigrou-lists-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .wigrou-lists-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .wigrou-lists-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@container (max-width: 1100px) {
  .wigrou-lists-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container (max-width: 820px) {
  .wigrou-lists-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@container (max-width: 520px) {
  .wigrou-lists-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.wigrou-list-card {
  background: #ffffff;
  border: 1px solid var(--wigrou-gray-200);
  border-radius: var(--wigrou-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.wigrou-list-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wigrou-shadow);
}

.wigrou-list-card-cover {
  height: 140px;
  position: relative;
  background: var(--wigrou-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.wigrou-list-card-cover img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.wigrou-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: capitalize;
}

.wigrou-badge-public {
  background: #dcfce7;
  color: #15803d;
}

.wigrou-badge-private {
  background: #fee2e2;
  color: #b91c1c;
}

.wigrou-badge-shared {
  background: #e0f2fe;
  color: #0369a1;
}

.wigrou-list-card-body {
  padding: 16px;
  flex: 1;
}

.wigrou-list-card-title {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.wigrou-list-card-title a {
  color: var(--wigrou-gray-900);
  text-decoration: none;
}

.wigrou-list-card-title a:hover {
  color: var(--wigrou-primary);
}

.wigrou-list-card-meta {
  font-size: 13px;
  color: var(--wigrou-gray-600);
  display: flex;
  gap: 6px;
}

.wigrou-list-card-desc {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--wigrou-gray-600);
}

.wigrou-list-card-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--wigrou-gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.wigrou-list-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.wigrou-owner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wigrou-edit-list-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wigrou-list-card-tags,
.wigrou-single-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.wigrou-tag-pill {
  display: inline-flex;
  align-items: center;
  background: var(--wigrou-gray-100);
  color: var(--wigrou-gray-700);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--wigrou-gray-200);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.wigrou-single-list-header {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--wigrou-gray-200);
  padding-bottom: 16px;
}

.wigrou-single-list-intro {
  margin-bottom: 16px;
}

.wigrou-single-list-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--wigrou-gray-900);
}

.wigrou-single-list-desc {
  margin: 8px 0;
  font-size: 14px;
  color: var(--wigrou-gray-600);
  line-height: 1.5;
}

.wigrou-header-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wigrou-share-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.wigrou-share-input-wrap input {
  flex: 1;
  background: var(--wigrou-gray-50);
  font-family: monospace;
  font-size: 13px;
}

.wigrou-share-input-wrap button {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   Single List Items Grid
   ========================================================================== */
.wigrou-saved-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.wigrou-saved-item-card {
  background: #ffffff;
  border: 1px solid var(--wigrou-gray-200);
  border-radius: var(--wigrou-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.wigrou-saved-item-card:hover {
  border-color: var(--wigrou-gray-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wigrou-item-thumbnail {
  height: 160px;
  background: var(--wigrou-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wigrou-item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wigrou-item-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wigrou-item-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.wigrou-item-title a {
  color: var(--wigrou-gray-900);
  text-decoration: none;
}

.wigrou-item-title a:hover {
  color: var(--wigrou-primary);
}

.wigrou-item-address {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--wigrou-gray-600);
  margin-bottom: 8px;
}

.wigrou-item-address svg {
  color: var(--wigrou-gray-400);
  flex-shrink: 0;
}

.wigrou-item-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.wigrou-star-badge {
  background: #fef3c7;
  color: #d97706;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.wigrou-rating-count {
  font-size: 12px;
  color: var(--wigrou-gray-600);
}

.wigrou-item-excerpt {
  font-size: 13px;
  color: var(--wigrou-gray-600);
  margin-bottom: 12px;
  flex: 1;
}

.wigrou-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.wigrou-pagination ul.page-numbers {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
}

.wigrou-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--wigrou-gray-300);
  border-radius: 6px;
  color: var(--wigrou-gray-700);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.wigrou-pagination .page-numbers:hover {
  border-color: var(--wigrou-primary);
  color: var(--wigrou-primary);
  background: #f0f7fd;
}

.wigrou-pagination .page-numbers.current {
  background: var(--wigrou-primary);
  border-color: var(--wigrou-primary);
  color: #ffffff;
}

.wigrou-item-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--wigrou-gray-100);
  padding-top: 10px;
}

.wigrou-item-view-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--wigrou-primary);
  text-decoration: none;
}

.wigrou-remove-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--wigrou-gray-600);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.wigrou-remove-item-btn:hover {
  background: #fee2e2;
  color: var(--wigrou-danger);
}

.wigrou-list-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--wigrou-gray-50);
  border: 1px solid var(--wigrou-gray-200);
  border-radius: var(--wigrou-radius);
  margin-bottom: 20px;
}

.wigrou-list-meta-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wigrou-empty-state {
  text-align: center;
  padding: 48px 20px;
  background: var(--wigrou-gray-50);
  border: 1px dashed var(--wigrou-gray-300);
  border-radius: var(--wigrou-radius);
  color: var(--wigrou-gray-600);
}

.wigrou-empty-state svg {
  color: var(--wigrou-gray-400);
  margin-bottom: 12px;
}

.wigrou-empty-state h3 {
  margin: 0 0 6px 0;
  color: var(--wigrou-gray-900);
}

.wigrou-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--wigrou-gray-200);
  border-top-color: var(--wigrou-primary);
  border-radius: 50%;
  animation: wigrou-spin 0.6s linear infinite;
  margin: 0 auto 8px auto;
}

@keyframes wigrou-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Badges & Identity
   ========================================================================== */
.wigrou-badges-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
  align-items: center;
}

.wigrou-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: default;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  user-select: none;
}

.wigrou-user-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.wigrou-badge-icon {
  display: inline-flex;
  align-items: center;
}

.wigrou-badge-icon svg {
  display: block;
}

.wigrou-badge-label {
  white-space: nowrap;
}

/* ==========================================================================
   User Profile Mockup Design & Layout
   ========================================================================== */
.wigrou-profile-mockup-wrapper {
  max-width: 960px;
  margin: 30px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #0f172a;
}

.wigrou-profile-mockup-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .wigrou-profile-mockup-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.wigrou-profile-main-col {
  min-width: 0;
}

.wigrou-profile-section-header {
  margin-bottom: 24px;
}

.wigrou-mockup-title {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.wigrou-mockup-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* Form Fields */
.wigrou-field-group {
  margin-bottom: 22px;
}

.wigrou-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.wigrou-field-input {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  color: #0f172a !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.wigrou-field-input:focus {
  outline: none !important;
  border-color: #0f172a !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06) !important;
}

/* Input Addon Groups (Username & Socials) */
.wigrou-input-addon-group {
  display: flex !important;
  align-items: stretch !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.wigrou-input-addon-group:focus-within {
  border-color: #0f172a !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06) !important;
}

.wigrou-addon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.wigrou-addon-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  color: #0f172a !important;
  font-family: inherit !important;
  outline: none !important;
  width: 100% !important;
  box-shadow: none !important;
}

.wigrou-field-textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  line-height: 1.5 !important;
  min-height: 110px !important;
  font-family: inherit !important;
  resize: vertical !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.wigrou-field-textarea::placeholder {
  color: #94a3b8 !important;
}

.wigrou-field-textarea:focus {
  outline: none !important;
  border-color: #0f172a !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06) !important;
}

/* Social Links Grid */
.wigrou-social-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .wigrou-social-links-grid {
    grid-template-columns: 1fr;
  }
}

.wigrou-social-addon-group {
  min-height: 44px;
}

.wigrou-social-addon-box {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #f1f5f9 !important;
  border-right: 1px solid #e2e8f0 !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.wigrou-social-addon-box svg {
  flex-shrink: 0;
}

.wigrou-social-addon-group .wigrou-addon-input {
  padding: 10px 12px !important;
  font-size: 14px !important;
}

/* Save Changes Pill Button */
.wigrou-profile-btn-wrap {
  margin-top: 10px;
}

.wigrou-mockup-save-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000000 !important;
  color: #ffffff !important;
  padding: 12px 28px !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.wigrou-mockup-save-btn:hover {
  background: #1e293b !important;
  transform: translateY(-1px);
}

.wigrou-mockup-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Section Divider */
.wigrou-mockup-divider {
  border-top: 1px solid #f1f5f9;
  margin: 36px 0;
}

/* Mails Section */
.wigrou-mails-section {
  margin-top: 20px;
}

.wigrou-mails-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.wigrou-mails-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.wigrou-mails-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.wigrou-mails-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wigrou-mails-add-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.wigrou-add-email-drawer {
  margin-bottom: 14px;
  background: #f8fafc;
  padding: 12px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
}

.wigrou-email-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
}

.wigrou-email-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.wigrou-email-address {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.wigrou-email-badge {
  background: #e2e8f0;
  color: #0f172a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.wigrou-email-note {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Right Column: Avatar Photo & Badges */
.wigrou-profile-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}

@media (max-width: 768px) {
  .wigrou-profile-sidebar {
    order: -1;
    padding-top: 0;
    margin-bottom: 12px;
  }
}

.wigrou-profile-photo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wigrou-avatar-circle {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.wigrou-avatar-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.wigrou-avatar-initials {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1;
}

.wigrou-avatar-upload-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0099cc;
  border: 2.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
  padding: 0;
}

.wigrou-avatar-upload-btn:hover {
  background: #0080aa;
  transform: scale(1.08);
}

/* UsersWP Avatar within Wigrou circles */
.wigrou-avatar-circle.wigrou-uwp-avatar-container {
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

.wigrou-avatar-circle .card {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-shadow: none !important;
}

.wigrou-avatar-circle .card-body {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.wigrou-avatar-circle .row,
.wigrou-avatar-circle .col {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.wigrou-avatar-circle .avatar,
.wigrou-avatar-circle img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
  cursor: pointer;
}

.wigrou-avatar-circle .card-img-overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

.wigrou-avatar-circle .uwp-banner-change-icon {
  pointer-events: auto !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #0099cc !important;
  border: 2.5px solid #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
  z-index: 10 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.wigrou-avatar-circle .uwp-banner-change-icon:hover {
  background: #0080aa !important;
  transform: scale(1.1) !important;
  color: #ffffff !important;
}

.wigrou-avatar-circle .uwp-banner-change-icon i {
  font-size: 13px !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

.wigrou-hero-profile-sidebar .wigrou-avatar-circle .uwp-banner-change-icon {
  width: 28px !important;
  height: 28px !important;
  border-width: 2px !important;
  bottom: 0 !important;
  right: 0 !important;
}

.wigrou-hero-profile-sidebar .wigrou-avatar-circle .uwp-banner-change-icon i {
  font-size: 12px !important;
}

/* UsersWP Profile Image Modal Styling */
.uwp-profile-image-change-modal {
  z-index: 100050 !important;
}

.uwp-profile-image-change-modal .modal-dialog {
  max-width: 620px !important;
  margin: 2rem auto !important;
}

.uwp-profile-image-change-modal .modal-content {
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden;
  background: #ffffff !important;
}

.uwp-profile-image-change-modal .modal-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 18px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.uwp-profile-image-change-modal .modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.uwp-profile-image-change-modal .btn-close {
  background: transparent !important;
  border: none !important;
  font-size: 20px !important;
  cursor: pointer !important;
  color: #64748b !important;
  opacity: 0.8 !important;
  padding: 4px !important;
}

.uwp-profile-image-change-modal .btn-close:hover {
  opacity: 1 !important;
  color: #0f172a !important;
}

.uwp-profile-image-change-modal .modal-body {
  padding: 28px 24px !important;
}

.uwp-profile-image-change-modal .modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.uwp-profile-image-change-modal .btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 9px 20px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.uwp-profile-image-change-modal .btn-primary {
  background: #0099cc !important;
  border: 1px solid #0099cc !important;
  color: #ffffff !important;
}

.uwp-profile-image-change-modal .btn-primary:hover:not(:disabled) {
  background: #0080aa !important;
  border-color: #0080aa !important;
  box-shadow: 0 4px 12px rgba(0, 153, 204, 0.25) !important;
}

.uwp-profile-image-change-modal .btn-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.uwp-profile-image-change-modal .btn-outline-primary {
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  background: #ffffff !important;
}

.uwp-profile-image-change-modal .btn-outline-primary:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #94a3b8 !important;
}

.uwp-profile-image-change-modal .btn-danger {
  background: #ef4444 !important;
  border: 1px solid #ef4444 !important;
  color: #ffffff !important;
}

.uwp-profile-image-change-modal .btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.uwp-profile-image-change-modal .uwp-crop-form {
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.uwp-profile-image-change-modal .jcrop-holder {
  margin: 0 auto !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.uwp-profile-image-change-modal .uwp_upload_button {
  padding: 12px 24px !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.uwp-profile-image-change-modal .progress {
  height: 8px !important;
  border-radius: 999px !important;
  background: #e2e8f0 !important;
  margin-top: 14px !important;
  overflow: hidden !important;
}

.uwp-profile-image-change-modal .progress-bar {
  background: #0099cc !important;
  transition: width 0.2s ease !important;
}

.wigrou-photo-caption {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  margin-top: 14px;
  margin-bottom: 16px;
}

/* Badge Pill (Matching Mockup Purple Capsule) */
.wigrou-sidebar-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wigrou-mockup-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: #faf5ff;
  border: 1px solid #d8b4fe;
  color: #7e22ce;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.wigrou-badge-guardian-pill {
  background: #faf5ff;
  border-color: #d8b4fe;
  color: #7e22ce;
}

.wigrou-mockup-badge-pill .wigrou-badge-icon {
  display: inline-flex;
  align-items: center;
}

/* Public Profile Extras */
.wigrou-public-bio-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.6;
  background: #f8fafc;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.wigrou-public-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wigrou-public-social-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

.wigrou-public-social-pill:hover {
  background: #e2e8f0;
  color: #000000;
}

/* Legacy Card Support */
.wigrou-profile-card {
  background: #ffffff;
  border: 1px solid var(--wigrou-gray-200);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 24px;
  max-width: 640px;
  margin: 20px 0;
}

.wigrou-profile-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.wigrou-profile-avatar img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--wigrou-gray-100);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: block;
}

.wigrou-profile-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--wigrou-gray-900);
  margin: 0;
  line-height: 1.3;
}

.wigrou-profile-bio {
  font-size: 14px;
  color: var(--wigrou-gray-600);
  line-height: 1.5;
  margin: 8px 0;
}

.wigrou-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}

.wigrou-stat-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  transition: background 0.15s ease;
}

.wigrou-stat-card:hover {
  background: #f1f5f9;
}

.wigrou-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.wigrou-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  display: block;
}

/* ==========================================================================
   Role Requests Application
   ========================================================================== */
.wigrou-role-request-container {
  background: #ffffff;
  border: 1px solid var(--wigrou-gray-200);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 24px;
  max-width: 640px;
  margin: 20px 0;
}

.wigrou-role-request-header {
  margin-bottom: 20px;
}

.wigrou-role-request-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--wigrou-gray-900);
  margin: 0 0 6px 0;
}

.wigrou-role-request-header p {
  font-size: 14px;
  color: var(--wigrou-gray-600);
  line-height: 1.5;
  margin: 0;
}

.wigrou-role-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.wigrou-role-selector-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--wigrou-gray-700);
  margin-bottom: 2px;
  display: block;
}

.wigrou-role-card-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--wigrou-gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0;
}

.wigrou-role-card-option:hover:not(.is-disabled) {
  border-color: var(--wigrou-primary);
  background: #f0f7fd;
}

.wigrou-role-card-option input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--wigrou-primary);
}

.wigrou-role-card-option.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--wigrou-gray-50);
}

.wigrou-role-card-content {
  flex: 1;
}

.wigrou-role-card-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.wigrou-role-desc {
  font-size: 13px;
  color: var(--wigrou-gray-600);
  margin: 0;
  line-height: 1.4;
}

.wigrou-status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  text-transform: capitalize;
}

.wigrou-pill-active,
.wigrou-pill-approved {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.wigrou-pill-pending {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.wigrou-pill-rejected {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.wigrou-role-history-box {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--wigrou-gray-200);
}

.wigrou-role-history-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--wigrou-gray-900);
  margin: 0 0 12px 0;
}

.wigrou-role-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wigrou-role-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--wigrou-gray-50);
  border: 1px solid var(--wigrou-gray-200);
  border-radius: 6px;
}

.wigrou-role-history-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wigrou-role-history-meta strong {
  font-size: 14px;
  color: var(--wigrou-gray-900);
}

.wigrou-role-date {
  font-size: 12px;
  color: var(--wigrou-gray-600);
}

.wigrou-role-status {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
}

.wigrou-role-status-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.wigrou-role-status-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* ==========================================================================
   Verified Place Badge
   ========================================================================== */
.wigrou-verified-place-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  vertical-align: middle;
}

.wigrou-verified-place-badge svg {
  display: block;
  color: #2563eb;
}

/* ==========================================================================
   Comprehensive Profile Page Dashboard ([wigrou_profile_page])
   ========================================================================== */
/* Ensure full-width stretching inside Elementor & theme wrappers */
.elementor-widget-shortcode:has(.wigrou-profile-page-container),
.elementor-widget:has(.wigrou-profile-page-container),
.elementor-widget-container:has(.wigrou-profile-page-container),
.elementor-shortcode:has(.wigrou-profile-page-container),
.elementor-element-77fb5cb {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  align-self: stretch !important;
  flex: 1 1 100% !important;
}

.elementor-widget-shortcode .elementor-shortcode,
.elementor-widget-shortcode .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

.wigrou-profile-page-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 0 40px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  flex: 1 1 100% !important;
}

.wigrou-profile-page-container .wigrou-profile-page-hero,
.wigrou-profile-page-container .wigrou-profile-page-nav,
.wigrou-profile-page-container .wigrou-profile-page-panels,
.wigrou-profile-page-container .wigrou-profile-page-panel {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure inner wrappers inside profile tabs stretch to full width */
.wigrou-profile-page-container .wigrou-profile-mockup-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 20px 0 !important;
  box-sizing: border-box !important;
}

.wigrou-profile-page-container .wigrou-role-request-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 20px 0 !important;
  box-sizing: border-box !important;
}

.wigrou-profile-page-container .wigrou-user-lists-container,
.wigrou-profile-page-container .wigrou-saved-places-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Login Prompt */
.wigrou-profile-page-login-prompt {
  padding: 40px 20px;
  max-width: 540px;
  margin: 40px auto;
  text-align: center;
}

/* Top Hero Header Bar */
.wigrou-profile-page-hero {
  background: #ffffff;
  border: 1px solid var(--wigrou-gray-200);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wigrou-profile-page-user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Hero Avatar Sidebar & Container */
.wigrou-hero-profile-sidebar {
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  order: 0 !important;
  flex-shrink: 0;
}

.wigrou-hero-profile-sidebar .wigrou-profile-photo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wigrou-hero-profile-sidebar .wigrou-avatar-circle {
  width: 80px;
  height: 80px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 2px solid #ffffff;
}

.wigrou-hero-profile-sidebar .wigrou-avatar-initials {
  font-size: 28px;
}

.wigrou-hero-profile-sidebar .wigrou-avatar-upload-btn {
  width: 28px;
  height: 28px;
  border-width: 2px;
}

.wigrou-hero-profile-sidebar .wigrou-avatar-upload-btn svg {
  width: 13px;
  height: 13px;
}

.wigrou-hero-profile-sidebar .wigrou-photo-caption {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wigrou-profile-page-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.wigrou-profile-page-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: block;
}

.wigrou-profile-page-avatar-initials {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wigrou-profile-page-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wigrou-profile-page-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.wigrou-profile-page-name {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}

.wigrou-profile-page-handle {
  font-size: 15px;
  color: #64748b;
  font-weight: 500;
}

.wigrou-profile-page-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.wigrou-hero-badge {
  font-size: 12px !important;
  padding: 3px 10px !important;
}

/* Stats Summary */
.wigrou-profile-page-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  border-left: 1px solid var(--wigrou-gray-200);
  padding-left: 28px;
  flex-shrink: 0;
}

.wigrou-profile-page-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wigrou-profile-page-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.wigrou-profile-page-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}

/* Navigation Tabs (.wigrou-profile-page-nav) - Matched to Hero Card & UI Guidelines */
.wigrou-profile-page-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 6px 8px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  box-sizing: border-box !important;
}

.wigrou-profile-page-nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.wigrou-profile-page-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 10px 20px !important;
  border-radius: 11px !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  color: #64748b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  outline: none !important;
  text-decoration: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.wigrou-profile-page-tab-btn svg {
  width: 15px !important;
  height: 15px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s ease, color 0.18s ease !important;
}

.wigrou-profile-page-tab-btn:hover:not(.is-active) {
  color: #0f172a !important;
  background: #f8fafc !important;
  border-color: #f1f5f9 !important;
}

.wigrou-profile-page-tab-btn:hover:not(.is-active) svg {
  transform: scale(1.08);
}

.wigrou-profile-page-tab-btn.is-active {
  background: #0a0f14 !important;
  color: #ffffff !important;
  border-color: #0a0f14 !important;
  box-shadow: 0 4px 14px rgba(10, 15, 20, 0.16) !important;
}

.wigrou-profile-page-tab-btn.is-active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.wigrou-profile-page-tab-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  min-width: 20px !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  transition: all 0.18s ease !important;
}

.wigrou-profile-page-tab-btn:hover:not(.is-active) .wigrou-profile-page-tab-badge {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.wigrou-profile-page-tab-btn.is-active .wigrou-profile-page-tab-badge {
  background: #0099cc !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 153, 204, 0.35) !important;
}

/* Tab Panels & Smooth Animation */
.wigrou-profile-page-panel {
  animation: wigrouFadeIn 0.22s ease forwards;
}

@keyframes wigrouFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wigrou-profile-page-stacked {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.wigrou-profile-page-divider {
  border: none;
  border-top: 1px solid var(--wigrou-gray-200);
  margin: 10px 0;
}

/* Visitor Community Badges Showcase */
.wigrou-visitor-roles-container {
  background: #ffffff;
  border: 1px solid var(--wigrou-gray-200);
  border-radius: 12px;
  padding: 28px;
}

.wigrou-role-badges-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.wigrou-role-showcase-card {
  padding: 16px;
  background: var(--wigrou-gray-50);
  border: 1px solid var(--wigrou-gray-200);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wigrou-role-showcase-pill {
  display: flex;
  align-items: center;
}

.wigrou-role-showcase-desc {
  margin: 0;
  font-size: 13px;
  color: var(--wigrou-gray-600);
  line-height: 1.5;
}

/* Responsive layout adjustments */
@media (max-width: 900px) {
  .wigrou-profile-page-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .wigrou-profile-page-stats {
    border-left: none;
    border-top: 1px solid var(--wigrou-gray-200);
    padding-left: 0;
    padding-top: 18px;
    width: 100%;
    justify-content: flex-start;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .wigrou-profile-page-hero {
    padding: 18px 20px;
  }
  .wigrou-profile-page-user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .wigrou-profile-page-nav {
    padding: 5px 6px !important;
    gap: 5px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
  }
  .wigrou-profile-page-tab-btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
    gap: 7px !important;
    border-radius: 9px !important;
  }
  .wigrou-profile-page-tab-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  .wigrou-profile-page-tab-badge {
    font-size: 11px !important;
    padding: 2.5px 6.5px !important;
    min-width: 18px !important;
  }
}

/* ==========================================================================
   Top Header Profile Icon & Dropdown Menu (.wigrou-header-profile-wrap)
   Matching Mockup: Dark navy/slate circle (#252f40) with bold white initials
   ========================================================================== */

.wigrou-header-profile-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-align: left;
  vertical-align: middle;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  box-sizing: border-box;
}

.wigrou-header-profile-wrap *,
.wigrou-header-profile-wrap *::before,
.wigrou-header-profile-wrap *::after {
  box-sizing: border-box;
}

/* Circular Trigger Button */
.wigrou-header-profile-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #252f40;
  color: #ffffff !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1;
  position: relative;
  overflow: hidden;
  user-select: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  outline: none;
}

.wigrou-header-profile-trigger:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  background-color: #252f40 !important;
}

.wigrou-header-profile-trigger:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.wigrou-header-avatar-initials {
  font-weight: 700;
  color: #ffffff;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wigrou-header-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.wigrou-guest-trigger svg {
  stroke: #ffffff;
  display: block;
}

/* Dropdown Menu Container */
.wigrou-header-profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  min-width: 260px;
  max-width: 320px;
  width: max-content;
  border-radius: 14px;
  padding: 8px;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s ease;
}

/* Alignments */
.wigrou-dropdown-align-right .wigrou-header-profile-menu {
  right: 0;
  left: auto;
  transform-origin: top right;
}

.wigrou-dropdown-align-left .wigrou-header-profile-menu {
  left: 0;
  right: auto;
  transform-origin: top left;
}

/* Dropdown Active / Open State */
.wigrou-header-profile-wrap.is-open {
  z-index: 100001 !important;
}

.wigrou-header-profile-wrap.is-open .wigrou-header-profile-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.wigrou-header-profile-wrap.is-open .wigrou-header-profile-menu * {
  pointer-events: auto !important;
}

/* Dark Theme (Default) */
.wigrou-theme-dark .wigrou-header-profile-menu {
  background: #0f141c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.wigrou-theme-dark .wigrou-menu-user-head {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wigrou-theme-dark .wigrou-menu-head-avatar {
  border-radius: 50%;
  background: #252f40;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wigrou-theme-dark .wigrou-menu-head-avatar svg {
  stroke: #94a3b8;
}

.wigrou-theme-dark .wigrou-menu-head-info {
  min-width: 0;
  flex: 1;
}

.wigrou-theme-dark .wigrou-menu-head-name {
  font-size: 14px;
  font-weight: 600;
  color: #f9fafb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.wigrou-theme-dark .wigrou-menu-head-handle {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 2px;
}

.wigrou-theme-dark .wigrou-menu-badges {
  padding: 0 12px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wigrou-theme-dark .wigrou-menu-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.wigrou-theme-dark .wigrou-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 4px;
}

.wigrou-theme-dark .wigrou-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wigrou-theme-dark .wigrou-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1.3;
}

.wigrou-theme-dark .wigrou-menu-item:hover,
.wigrou-theme-dark .wigrou-menu-item:focus {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-decoration: none;
  outline: none;
}

.wigrou-theme-dark .wigrou-menu-icon {
  color: #94a3b8;
  flex-shrink: 0;
  transition: color 0.12s ease;
}

.wigrou-theme-dark .wigrou-menu-item:hover .wigrou-menu-icon {
  color: #60a5fa;
}

.wigrou-theme-dark .wigrou-menu-badge-pill {
  margin-left: auto;
  background: #252f40;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  line-height: 1;
}

.wigrou-theme-dark .wigrou-menu-item-primary {
  color: #60a5fa;
  font-weight: 600;
}

.wigrou-theme-dark .wigrou-menu-item-primary .wigrou-menu-icon {
  color: #60a5fa;
}

.wigrou-theme-dark .wigrou-menu-item-logout:hover {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}

.wigrou-theme-dark .wigrou-menu-item-logout:hover .wigrou-menu-icon {
  color: #f87171;
}

/* Light Theme */
.wigrou-theme-light .wigrou-header-profile-menu {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.wigrou-theme-light .wigrou-menu-user-head {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wigrou-theme-light .wigrou-menu-head-avatar {
  border-radius: 50%;
  background: #252f40;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.wigrou-theme-light .wigrou-menu-head-avatar svg {
  stroke: #64748b;
}

.wigrou-theme-light .wigrou-menu-head-info {
  min-width: 0;
  flex: 1;
}

.wigrou-theme-light .wigrou-menu-head-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.wigrou-theme-light .wigrou-menu-head-handle {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 2px;
}

.wigrou-theme-light .wigrou-menu-badges {
  padding: 0 12px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wigrou-theme-light .wigrou-menu-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.wigrou-theme-light .wigrou-menu-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 6px 4px;
}

.wigrou-theme-light .wigrou-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wigrou-theme-light .wigrou-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #334155;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1.3;
}

.wigrou-theme-light .wigrou-menu-item:hover,
.wigrou-theme-light .wigrou-menu-item:focus {
  background: #f8fafc;
  color: #0f172a;
  text-decoration: none;
  outline: none;
}

.wigrou-theme-light .wigrou-menu-icon {
  color: #64748b;
  flex-shrink: 0;
  transition: color 0.12s ease;
}

.wigrou-theme-light .wigrou-menu-item:hover .wigrou-menu-icon {
  color: #2563eb;
}

.wigrou-theme-light .wigrou-menu-badge-pill {
  margin-left: auto;
  background: #e2e8f0;
  color: #1e293b;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  line-height: 1;
}

.wigrou-theme-light .wigrou-menu-item-primary {
  color: #2563eb;
  font-weight: 600;
}

.wigrou-theme-light .wigrou-menu-item-primary .wigrou-menu-icon {
  color: #2563eb;
}

.wigrou-theme-light .wigrou-menu-item-logout:hover {
  background: #fee2e2;
  color: #dc2626;
}

.wigrou-theme-light .wigrou-menu-item-logout:hover .wigrou-menu-icon {
  color: #dc2626;
}

/* Guest Login Pill Button */
.wigrou-header-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: #252f40;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  line-height: 1.4;
  vertical-align: middle;
}

.wigrou-header-login-btn svg {
  stroke: #ffffff;
  display: block;
}

.wigrou-header-login-btn:hover {
  background: #1e2638;
  color: #ffffff;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

/* ==========================================================================
   UsersWP - Modern Auth Forms & Profile Dashboard
   ========================================================================== */

/* Hide duplicated bare theme page headers on UsersWP auth pages */
body.page-id-1294 .page-header,
body.page-id-1295 .page-header,
body.page-id-1297 .page-header,
.uwp_page_login .page-header,
.uwp_page_register .page-header,
.uwp_page_forgot .page-header {
  display: none !important;
}

/* UsersWP Centered Card */
.uwp_page .card.mx-auto,
.uwp-login-class .card.mx-auto,
.uwp-register-class .card.mx-auto,
.uwp-forgot-class .card.mx-auto,
.uwp-reset-class .card.mx-auto,
.uwp-change-class .card.mx-auto {
  max-width: 460px !important;
  width: 100% !important;
  margin: 30px auto 50px auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 40px 36px 36px !important;
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  box-sizing: border-box;
}

/* Wider width for Register form to accommodate extra fields comfortably */
.uwp-register-class .card.mx-auto {
  max-width: 520px !important;
}

/* Account / Dashboard Card */
.uwp-account-class .card.mx-auto {
  max-width: 860px !important;
  padding: 36px !important;
}

/* Card Heading */
.uwp_page .card-title,
.uwp-login-class .card-title,
.uwp-register-class .card-title,
.uwp-forgot-class .card-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

/* Form Groups & Spacing */
.uwp_form div[data-argument] {
  margin-bottom: 18px !important;
}

/* Form Controls (Inputs, Selects) */
.uwp_page .form-control,
.uwp_page .form-select,
.uwp_form input[type="text"],
.uwp_form input[type="email"],
.uwp_form input[type="password"],
.uwp_form input[type="url"],
.uwp_form input[type="tel"] {
  min-height: 48px !important;
  height: 48px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 14.5px !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box;
}

.uwp_page .form-control:focus,
.uwp_page .form-select:focus,
.uwp_form input[type="text"]:focus,
.uwp_form input[type="email"]:focus,
.uwp_form input[type="password"]:focus,
.uwp_form input[type="url"]:focus,
.uwp_form input[type="tel"]:focus {
  background-color: #ffffff !important;
  border-color: #0099cc !important;
  box-shadow: 0 0 0 3.5px rgba(0, 153, 204, 0.14) !important;
  outline: none !important;
}

.uwp_page .form-control::placeholder,
.uwp_form input::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* Password Field with Eye Toggle Icon */
.uwp-password-wrap .input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.uwp-password-wrap .input-group input.form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.uwp-password-wrap .input-group .input-group-text {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: none !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  color: #64748b !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.uwp-password-wrap .input-group:focus-within input.form-control {
  border-color: #0099cc !important;
  background-color: #ffffff !important;
}

.uwp-password-wrap .input-group:focus-within .input-group-text {
  border-color: #0099cc !important;
  background-color: #ffffff !important;
  color: #0099cc !important;
  box-shadow: 0 0 0 3.5px rgba(0, 153, 204, 0.14) !important;
  clip-path: inset(-5px -5px -5px 0px);
}

.uwp-password-wrap .input-group .input-group-text:hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

/* Remember Me Checkbox */
.uwp-remember-me .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding-left: 0;
}

.uwp-remember-me .form-check-input {
  width: 18px !important;
  height: 18px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  float: none !important;
  accent-color: #0099cc;
  transition: all 0.15s ease;
}

.uwp-remember-me .form-check-input:checked {
  background-color: #0099cc !important;
  border-color: #0099cc !important;
}

.uwp-remember-me .form-check-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
  user-select: none;
}

/* Submit Buttons */
.uwp_page button[type="submit"],
.uwp_page input[type="submit"],
.uwp_login_submit,
.uwp_register_submit,
.uwp_forgot_submit {
  min-height: 48px !important;
  background: #0099cc !important;
  border: 1px solid #0099cc !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(0, 153, 204, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
}

.uwp_page button[type="submit"]:hover,
.uwp_page input[type="submit"]:hover,
.uwp_login_submit:hover,
.uwp_register_submit:hover,
.uwp_forgot_submit:hover {
  background: #0088b7 !important;
  border-color: #0088b7 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 153, 204, 0.38) !important;
}

.uwp_page button[type="submit"]:active,
.uwp_page input[type="submit"]:active,
.uwp_login_submit:active,
.uwp_register_submit:active,
.uwp_forgot_submit:active {
  transform: translateY(0) !important;
  background: #0073aa !important;
  box-shadow: 0 2px 8px rgba(0, 153, 204, 0.2) !important;
}

/* Footer Links */
.uwp-footer-links {
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.uwp-footer-link {
  float: none !important;
  margin: 0 !important;
}

.uwp-footer-link a,
.uwp-login-link,
.uwp-register-link,
.uwp-forgot-password-link {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #0099cc !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  display: inline-block !important;
  margin: 0 !important;
}

.uwp-footer-link a:hover,
.uwp-login-link:hover,
.uwp-register-link:hover,
.uwp-forgot-password-link:hover {
  color: #0073aa !important;
  text-decoration: underline !important;
}

/* Alerts & Validation Messages */
.uwp_page .alert,
.uwp_page .uwp-message {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
  border: 1px solid transparent !important;
  line-height: 1.45 !important;
}

.uwp_page .alert-danger {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

.uwp_page .alert-success {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

.uwp_page .alert-info {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

/* Password Strength Bar */
#uwp-password-strength {
  height: 6px !important;
  border-radius: 9999px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  background-color: #e2e8f0 !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

/* Account Navigation Tabs */
.uwp-account-class .nav-tabs,
.uwp-account-class .nav-pills {
  border-bottom: 2px solid #f1f5f9 !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}

.uwp-account-class .nav-link {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  transition: all 0.2s ease !important;
}

.uwp-account-class .nav-link:hover {
  color: #0f172a !important;
  background: #f8fafc !important;
}

.uwp-account-class .nav-link.active {
  color: #ffffff !important;
  background: #0099cc !important;
  box-shadow: 0 3px 10px rgba(0, 153, 204, 0.25) !important;
}


/* ==========================================================================
   GeoDirectory - Add Listing Form (.geodir-add-listing)
   ========================================================================== */

/* Page Wrapper & Header */
.geodir-page-add .site-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.geodir-page-add .page-header {
  text-align: center;
  margin-bottom: 30px;
}

.geodir-page-add .page-header .entry-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

/* Add Listing Card Container */
.geodir-add-listing.bsui,
.wp-block-geodirectory-geodir-widget-add-listing {
  max-width: 960px;
  margin: 0 auto;
}

form#geodirectory-add-post {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 42px 48px !important;
  box-shadow: 0 4px 28px -4px rgba(15, 23, 42, 0.07), 0 2px 8px -2px rgba(15, 23, 42, 0.03) !important;
  transition: box-shadow 0.25s ease;
}

/* Section Headings / Fieldsets */
.geodir-add-listing fieldset {
  border: none !important;
  margin: 40px 0 24px 0 !important;
  padding: 0 !important;
}

.geodir-add-listing fieldset:first-of-type {
  margin-top: 0 !important;
}

.geodir-add-listing fieldset h3.h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #f1f5f9 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: -0.01em !important;
}

.geodir-add-listing fieldset h3.h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: #0099cc;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Stacked Form Field Rows (Replaces Cramped 2-Column Bootstrap col-sm-2 / col-sm-10) */
.geodir-add-listing div[data-argument].row:not(.d-none),
.geodir-add-listing #gd_placecategory_row:not(.d-none),
.geodir-add-listing #post_images_row:not(.d-none),
.geodir-add-listing #business_hours_row:not(.d-none),
.geodir-add-listing #geodir_address_map_row > div.row:first-child {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Field Labels */
.geodir-add-listing div[data-argument].row > label,
.geodir-add-listing #gd_placecategory_row > label,
.geodir-add-listing #post_images_row > label,
.geodir-add-listing #business_hours_row > label {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 0 8px 0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

/* Field Inputs Wrapper */
.geodir-add-listing div[data-argument].row > .col-sm-10,
.geodir-add-listing #gd_placecategory_row > .col-sm-10,
.geodir-add-listing #post_images_row > .col-sm-10,
.geodir-add-listing #business_hours_row > .col-sm-10,
.geodir-add-listing #geodir_address_map_row > div.row:first-child > .col-sm-10 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

/* Hide empty spacer column */
.geodir-add-listing div[data-argument].row > .col-sm-2:empty,
.geodir-add-listing #geodir_address_map_row > div.row:first-child > .col-sm-2:empty {
  display: none !important;
}

/* Preserve hidden fields and map overlay visibility states */
.geodir-add-listing .d-none,
.geodir-add-listing div[data-argument].d-none,
.geodir-add-listing .gd-hidden-latlng,
.geodir-add-listing #address_map_loading_div[style*="display: none"],
.geodir-add-listing #address_map_loading_div[style*="display:none"],
.geodir-add-listing #address_map_map_nofound[style*="display: none"],
.geodir-add-listing #address_map_map_nofound[style*="display:none"],
.geodir-add-listing #address_map_map_notloaded[style*="display: none"],
.geodir-add-listing #address_map_map_notloaded[style*="display:none"] {
  display: none !important;
}

/* Form Inputs, Selects, Textareas */
.geodir-add-listing input.form-control,
.geodir-add-listing select.form-select,
.geodir-add-listing textarea.form-control {
  min-height: 48px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-family: 'Poppins', sans-serif !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box;
}

.geodir-add-listing textarea.form-control {
  min-height: 140px !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}

.geodir-add-listing input.form-control:focus,
.geodir-add-listing select.form-select:focus,
.geodir-add-listing textarea.form-control:focus {
  background-color: #ffffff !important;
  border-color: #0099cc !important;
  box-shadow: 0 0 0 3.5px rgba(0, 153, 204, 0.14) !important;
  outline: none !important;
}

.geodir-add-listing small.form-text.text-muted {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin-top: 6px !important;
  line-height: 1.45 !important;
}

/* Required Indicator */
.geodir-add-listing .text-danger {
  color: #ef4444 !important;
  font-weight: 700 !important;
}

/* Address Locate Button Input Group */
div[data-argument="address_street"] .input-group {
  display: flex !important;
  width: 100% !important;
}

div[data-argument="address_street"] .input-group input.form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

div[data-argument="address_street"] .input-group .gd-locate-me-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: none !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  color: #0099cc !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

div[data-argument="address_street"] .input-group:focus-within input.form-control {
  border-color: #0099cc !important;
  background-color: #ffffff !important;
}

div[data-argument="address_street"] .input-group:focus-within .gd-locate-me-btn {
  border-color: #0099cc !important;
  color: #0099cc !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(0, 153, 204, 0.14) !important;
  clip-path: inset(-5px -5px -5px 0px);
}

div[data-argument="address_street"] .input-group .gd-locate-me-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0073aa !important;
}

/* Map Button & Container */
#address_set_address_button {
  background: #0f172a !important;
  border: 1px solid #0f172a !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

#address_set_address_button:hover {
  background: #1e293b !important;
  border-color: #1e293b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
}

#address_map_wrapper,
.geodir_map_container.address_map {
  border-radius: 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

#address_map {
  border-radius: 12px;
}

/* Image Dropzone */
.geodir-add-files {
  border: 2px dashed #cbd5e1 !important;
  border-radius: 16px !important;
  background-color: #f8fafc !important;
  padding: 26px 20px !important;
  transition: all 0.2s ease !important;
}

.geodir-add-files:hover,
.geodir-add-files .geodir-files-dropbox.dragover {
  border-color: #0099cc !important;
  background-color: #f0f9ff !important;
}

.geodir-dropbox-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

#post_imagesplupload-browse-button {
  background: #0099cc !important;
  border: 1px solid #0099cc !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  box-shadow: 0 3px 10px rgba(0, 153, 204, 0.22) !important;
  transition: all 0.2s ease !important;
}

#post_imagesplupload-browse-button:hover {
  background: #0088b7 !important;
  border-color: #0088b7 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(0, 153, 204, 0.32) !important;
}

.plupload-thumbs .thumbnail {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Select2 Category & Tags Pills */
.geodir-add-listing .select2-container--default .select2-selection--single,
.geodir-add-listing .select2-container--default .select2-selection--multiple {
  min-height: 48px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background-color: #f8fafc !important;
  padding: 6px 12px !important;
  transition: all 0.2s ease !important;
}

.geodir-add-listing .select2-container--default.select2-container--focus .select2-selection--multiple,
.geodir-add-listing .select2-container--default.select2-container--open .select2-selection--single,
.geodir-add-listing .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #0099cc !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(0, 153, 204, 0.14) !important;
  outline: none !important;
}

.geodir-add-listing .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

.geodir-add-listing .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #0369a1 !important;
  margin-right: 5px !important;
}

.geodir-add-listing .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #ef4444 !important;
}

/* Business Hours Table */
.gd-bh-row .form-check-inline {
  margin-right: 20px !important;
}

.gd-bh-row .form-check-input {
  width: 18px !important;
  height: 18px !important;
  accent-color: #0099cc !important;
  cursor: pointer !important;
}

.gd-bh-row .form-check-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  cursor: pointer !important;
}

.gd-bh-items {
  margin-top: 14px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
}

.gd-bh-items table {
  margin-bottom: 0 !important;
}

.gd-bh-items thead {
  background-color: #f1f5f9 !important;
}

.gd-bh-items thead th {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 12px 14px !important;
  border: none !important;
}

.gd-bh-items tbody td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
  border-top: 1px solid #f1f5f9 !important;
}

.gd-bh-day {
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: 13.5px !important;
}

.gd-bh-hours input.form-control {
  min-height: 38px !important;
  height: 38px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
  background: #ffffff !important;
}

.gd-bh-hours input.form-control:focus {
  border-color: #0099cc !important;
  box-shadow: 0 0 0 2.5px rgba(0, 153, 204, 0.15) !important;
}

.gd-bh-act .gd-bh-add i {
  color: #0099cc !important;
  font-size: 16px !important;
  transition: transform 0.15s ease !important;
}

.gd-bh-act .gd-bh-add:hover i {
  transform: scale(1.15) !important;
}

.gd-bh-remove i {
  color: #ef4444 !important;
  font-size: 16px !important;
  transition: transform 0.15s ease !important;
}

.gd-bh-remove:hover i {
  transform: scale(1.15) !important;
}

/* Submit Button Row */
#geodir-add-listing-submit {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#geodir-add-listing-submit label.col-sm-2 {
  display: none !important;
}

#geodir-add-listing-submit .col-sm-10 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

#geodir-add-listing-submit button.geodir_button {
  min-height: 52px !important;
  min-width: 260px !important;
  background: #0099cc !important;
  border: 1px solid #0099cc !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 12px 32px !important;
  box-shadow: 0 4px 16px rgba(0, 153, 204, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#geodir-add-listing-submit button.geodir_button:hover {
  background: #0088b7 !important;
  border-color: #0088b7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 153, 204, 0.38) !important;
}

#geodir-add-listing-submit button.geodir_button:active {
  background: #0073aa !important;
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0, 153, 204, 0.2) !important;
}

/* Responsive Overrides */
@media (max-width: 768px) {
  form#geodirectory-add-post {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }

  .geodir-page-add .page-header .entry-title {
    font-size: 26px !important;
  }

  #geodir-add-listing-submit button.geodir_button {
    width: 100% !important;
    max-width: 100% !important;
  }

  .uwp_page .card.mx-auto {
    padding: 26px 20px !important;
    margin: 20px auto 40px auto !important;
    border-radius: 16px !important;
  }
}

#wpadminbar #adminbarsearch .adminbar-button {
  display: none !important;
}

/* ==========================================================================
   Public Accessible User Profile Page (.wigrou-public-profile-container)
   Matches the design in media_1791528753024_7dcf98b7.png
   ========================================================================== */

/* Hide empty or placeholder headings from theme/elementor on profile page */
.page-id-1300 .elementor-element-9a74f3d,
.page-id-1300 .elementor-element-57887f5,
.page-id-1300 [data-id="9a74f3d"],
.page-id-1300 [data-id="57887f5"],
.page-id-1300 [data-id="c55836b"],
.page-id-1300 .e-c55836b-aa1cdc5 {
  display: none !important;
}

.wigrou-public-profile-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto 60px auto !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #0a0f14 !important;
  box-sizing: border-box !important;
}

.wigrou-public-profile-container *,
.wigrou-public-profile-container *::before,
.wigrou-public-profile-container *::after {
  box-sizing: border-box !important;
}

/* 1. Dark Hero Header Banner */
.wigrou-public-profile-hero {
  background: #0b0f15 !important;
  border-radius: 20px !important;
  padding: 44px 48px !important;
  color: #ffffff !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 32px !important;
  margin-bottom: 48px !important;
  box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.28) !important;
  position: relative !important;
  overflow: hidden !important;
}

.wigrou-public-hero-left {
  display: flex !important;
  align-items: flex-start !important;
  gap: 28px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Avatar Circle */
.wigrou-public-avatar {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  border: 2.5px solid rgba(255, 255, 255, 0.22) !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e2f5ee !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.wigrou-public-avatar img,
.wigrou-public-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.wigrou-public-avatar-initials {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #0a0f14 !important;
  line-height: 1 !important;
}

/* Identity Info */
.wigrou-public-identity {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.wigrou-public-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.wigrou-public-name {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Dynamic Badge Pill (inherits colors & icon from wp-admin Badges & Roles Manager) */
.wigrou-public-role-badge,
.wigrou-public-badge-guardian {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: #f5b700;
  border: 1px solid #f5b700;
  color: #0b0f15;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  letter-spacing: 0.05em !important;
  vertical-align: middle !important;
}

.wigrou-public-role-badge svg {
  color: currentColor !important;
  flex-shrink: 0 !important;
}

.wigrou-public-handle {
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

.wigrou-public-bio {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 14px 0 0 0 !important;
  max-width: 580px !important;
  font-weight: 400 !important;
}

/* Stats Row */
.wigrou-public-stats {
  display: flex !important;
  align-items: flex-start !important;
  gap: 36px !important;
  margin-top: 22px !important;
}

.wigrou-public-stat-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.wigrou-public-stat-num {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

.wigrou-public-stat-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em !important;
}

/* Action Button on Hero Right */
.wigrou-public-hero-right {
  flex-shrink: 0 !important;
}

.wigrou-public-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: #0a0f14 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 11px 32px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  user-select: none !important;
}

.wigrou-public-action-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  background: #f8fafc !important;
  color: #0a0f14 !important;
}

.wigrou-public-action-btn.is-following {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wigrou-public-action-btn.is-following:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

/* 2. Content Sections */
.wigrou-public-section {
  margin-bottom: 44px !important;
}

.wigrou-public-section-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.wigrou-public-section-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.wigrou-public-kicker {
  color: #0099cc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  line-height: 1 !important;
  font-family: 'Poppins', sans-serif !important;
}

.wigrou-public-section-title {
  color: #0a0f14 !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  font-family: 'Poppins', sans-serif !important;
}

.wigrou-public-view-all-btn {
  background: #ffffff !important;
  color: #0a0f14 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding: 7px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  font-family: 'Poppins', sans-serif !important;
}

.wigrou-public-view-all-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  color: #0a0f14 !important;
}

/* 3. Colecciones (Listas) 3-Column Grid */
.wigrou-public-collections-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.wigrou-public-list-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 148px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.wigrou-public-list-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07) !important;
  border-color: #cbd5e1 !important;
}

.wigrou-public-list-card-author {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.wigrou-public-list-author-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #0a0f14 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.wigrou-public-list-author-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.wigrou-public-list-author-name {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.wigrou-public-list-card-title {
  color: #0a0f14 !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 16px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-family: 'Poppins', sans-serif !important;
}

.wigrou-public-list-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  margin-top: auto !important;
}

.wigrou-public-list-likes {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.wigrou-public-list-likes svg {
  color: #64748b !important;
}

/* 4. Horizontal Section Divider */
.wigrou-public-divider {
  border: none !important;
  border-top: 1px solid #e2e8f0 !important;
  margin: 44px 0 !important;
}

/* 5. Favoritos (Lugares guardados) 3-Column Grid */
.wigrou-public-places-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.wigrou-public-place-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.wigrou-public-place-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07) !important;
  border-color: #cbd5e1 !important;
}

/* Visual Cover Area */
.wigrou-public-place-cover {
  position: relative !important;
  height: 180px !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f8fafc !important;
}

.wigrou-public-place-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.wigrou-public-place-emoji {
  font-size: 44px !important;
  line-height: 1 !important;
  user-select: none !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12)) !important;
}

/* Top-Left Guardian Badge */
.wigrou-public-place-top-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: #000000 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 11px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 2 !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.wigrou-public-place-top-badge .wigrou-badge-dot {
  font-size: 8px !important;
  color: #ffffff !important;
}

/* Bottom-Right Category Pill Badge */
.wigrou-public-place-bottom-badge {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  z-index: 2 !important;
  text-transform: capitalize !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.wigrou-public-place-bottom-badge.wigrou-badge-comunidad {
  background: #6366f1 !important;
  color: #ffffff !important;
}

.wigrou-public-place-bottom-badge.wigrou-badge-negocio {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Card Body */
.wigrou-public-place-body {
  padding: 18px 20px 14px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.wigrou-public-place-kicker {
  color: #0099cc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: block !important;
  line-height: 1.2 !important;
}

.wigrou-public-place-title {
  margin: 0 0 6px 0 !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  font-family: 'Poppins', sans-serif !important;
}

.wigrou-public-place-title a {
  color: #0a0f14 !important;
  text-decoration: none !important;
}

.wigrou-public-place-title a:hover {
  color: #0099cc !important;
}

.wigrou-public-place-meta {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.wigrou-place-meta-sep {
  color: #94a3b8 !important;
}

.wigrou-place-rating {
  color: #0a0f14 !important;
  font-weight: 600 !important;
}

/* Card Footer */
.wigrou-public-place-footer {
  border-top: 1px solid #f1f5f9 !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.wigrou-public-place-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color 0.18s ease, transform 0.18s ease !important;
  font-family: 'Poppins', sans-serif !important;
}

.wigrou-public-place-btn svg {
  color: currentColor !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s ease !important;
}

.wigrou-public-place-btn:hover {
  color: #0a0f14 !important;
}

.wigrou-public-place-btn:hover svg {
  transform: scale(1.15) !important;
}

.wigrou-like-place-btn.is-liked {
  color: #ef4444 !important;
}

/* 6. Responsive Media Queries */
@media (max-width: 960px) {
  .wigrou-public-collections-grid,
  .wigrou-public-places-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  .wigrou-public-profile-hero {
    padding: 32px 30px !important;
  }
}

@media (max-width: 680px) {
  .wigrou-public-profile-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 24px 20px !important;
    gap: 24px !important;
    border-radius: 16px !important;
  }
  .wigrou-public-hero-left {
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
  }
  .wigrou-public-avatar {
    width: 76px !important;
    height: 76px !important;
  }
  .wigrou-public-name {
    font-size: 24px !important;
  }
  .wigrou-public-hero-right {
    width: 100% !important;
  }
  .wigrou-public-action-btn {
    width: 100% !important;
  }
  .wigrou-public-collections-grid,
  .wigrou-public-places-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .wigrou-public-section-title {
    font-size: 22px !important;
  }
  .wigrou-public-divider {
    margin: 32px 0 !important;
  }
}

/* ==========================================================================
   Featured Creators / Users Directory Shortcode ([wigrou_users_list])
   Matches media_1791703024464_a517226a.png 1:1
   ========================================================================== */

.wigrou-creators-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 48px auto !important;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #0b0f15 !important;
  box-sizing: border-box !important;
}

.wigrou-creators-section *,
.wigrou-creators-section *::before,
.wigrou-creators-section *::after {
  box-sizing: border-box !important;
}

.wigrou-creators-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
}

.wigrou-creators-header.wigrou-creators-header-only-right {
  justify-content: flex-end !important;
  margin-bottom: 18px !important;
}

@media (min-width: 769px) {
  .elementor-element-daf9a74 .wigrou-creators-header.wigrou-creators-header-only-right {
    margin-top: -54px !important;
    margin-bottom: 24px !important;
    pointer-events: none !important;
  }
  .elementor-element-daf9a74 .wigrou-creators-header.wigrou-creators-header-only-right .wigrou-creators-header-right,
  .elementor-element-daf9a74 .wigrou-creators-header.wigrou-creators-header-only-right .wigrou-creators-view-all-btn {
    pointer-events: auto !important;
  }
}

.wigrou-creators-header-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.wigrou-creators-kicker {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
  margin: 0 0 2px 0 !important;
}

.wigrou-creators-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0b0f15 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}

.wigrou-creators-subtitle {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.wigrou-creators-header-right {
  flex-shrink: 0 !important;
}

.wigrou-creators-view-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 20px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  color: #0f172a !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.wigrou-creators-view-all-btn:hover,
.wigrou-creators-view-all-btn:focus-visible {
  border-color: #0f172a !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

.wigrou-creators-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

.wigrou-creators-grid.wigrou-creators-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.wigrou-creators-grid.wigrou-creators-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.wigrou-creator-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 32px 20px 28px 20px !important;
  text-decoration: none !important;
  color: #0b0f15 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
  position: relative !important;
}

.wigrou-creator-card:hover,
.wigrou-creator-card:focus-visible {
  border-color: #0f172a !important;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  color: #0b0f15 !important;
}

.wigrou-creator-card.is-extra-card {
  display: none !important;
}

.wigrou-creators-section.is-expanded .wigrou-creator-card.is-extra-card {
  display: flex !important;
}

.wigrou-creator-avatar {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px auto !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.wigrou-creator-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.wigrou-creator-avatar-emoji {
  font-size: 30px !important;
  line-height: 1 !important;
  display: inline-block !important;
  transform: translateY(1px) !important;
}

.wigrou-creator-name {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #0b0f15 !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

.wigrou-creator-handle {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
}

.wigrou-creator-badges {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.wigrou-creator-badge-role {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: #f5b700;
  color: #0b0f15;
  border: 1px solid #f5b700;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  line-height: 1.2 !important;
}

.wigrou-creator-badge-guardian {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: #f5f3ff;
  border: 1px solid #c7d2fe;
  color: #6366f1;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  line-height: 1.2 !important;
}

.wigrou-guardian-shield-icon {
  font-size: 11px !important;
  line-height: 1 !important;
}

@media (max-width: 1024px) {
  .wigrou-creators-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 600px) {
  .wigrou-creators-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .wigrou-creators-title {
    font-size: 26px !important;
  }
  .wigrou-creators-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}