/* ===========================================================
   File: css/single-space.css
   Full replacement — Single Space template CSS
   Note: Integrated rating styles (authoritative) so remove any other rating CSS/enqueue.
   Screenshot reference (for debugging): /mnt/data/Screenshot 2025-11-25 214104.png
   =========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --page-pad: 20px;
  --left-col-width: 200px;
  --gap: 16px;
  --details-max: 920px;

  --bg-primary: #ffffff;
  --bg-surface: #fbfbfb;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;

  --accent-1: #6366f1;
  --accent-2: #8b5cf6;
  --star-color: #f59e0b;

  --border-light: #eef2f6;
  --pill-bg: #ffffff;
  --pill-border: #e8e8f0;
  --pill-radius: 999px;

  --card-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  --card-shadow-hover: 0 18px 40px rgba(16, 24, 40, 0.08);

  --transition-base: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --max-content-width: 1200px;
}

/* ---------------------------
   Global layout
   --------------------------- */
.site-main {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-primary);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.single-space-container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 24px var(--page-pad);
  box-sizing: border-box;
}

/* Rows */
.row {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  box-sizing: border-box;
}
.row-top {
  width: 100%;
  max-width: var(--details-max);
  margin-left: auto;
  margin-right: auto;
}
.row-details {
  width: 100%;
  max-width: var(--details-max);
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.details-inner {
  width: 100%;
}

/* Columns */
.col-left {
  flex: 0 0 var(--left-col-width);
  max-width: var(--left-col-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.col-right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ---------------------------
   Avatar / Space photo
   --------------------------- */
/* ---------------------------
   Avatar / Space photo
   --------------------------- */
.space-avatar,
.space-avatar--initials {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-base),
    box-shadow var(--transition-base);
  position: relative; /* For edit overlay */
  text-decoration: none; /* If it's an anchor */
}
.space-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.space-avatar--initials {
  background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 34px;
}
.space-avatar.is-owner:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  cursor: pointer;
}

/* Edit Overlay on Space Avatar */
.edit-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  padding: 4px 0;
  backdrop-filter: blur(2px);
}

.edit-overlay svg {
  flex-shrink: 0;
}

.edit-overlay span {
  letter-spacing: 0.3px;
}

/* Title & subtitle */
.space-title {
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0 0 0;
  text-align: center;
  color: var(--text-primary);
  line-height: 1.2;
}

/* ---------------------------
   Authoritative Rating block
   (Replace any other rating CSS; this is the only rating styling)
   --------------------------- */
/* ===========================================================
   SPACE AVERAGE RATING — COPIED FROM PROFILE LOGIC
   =========================================================== */

.space-average-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  padding: 10px 15px;
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  border-left: 4px solid #ffc107;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(255, 193, 7, 0.15);
}

.space-average-rating .avg-single-star {
  color: #ffc107;
  font-size: 14px;
  line-height: 1;
}

.space-average-rating .avg-info {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-sm);
  line-height: 1;
}

.space-average-rating .avg-value {
  font-weight: 700;
  color: #333;
}

.space-average-rating .avg-slash,
.space-average-rating .avg-max {
  color: #666;
  font-weight: 500;
}

.space-average-rating .avg-count {
  color: #666;
  font-weight: 400;
  font-style: italic;
  margin-left: 2px;
}

/* ---------------------------
   Right column: actions / pills / recommend / share
   --------------------------- */
.actions-panel {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--pill-radius);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
  transition: transform var(--transition-base),
    box-shadow var(--transition-base);
  white-space: nowrap;
}

.pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.05);
}

/* semantic meta pills */
.meta-type {
  background: #fff;
  border-color: #eef0ff;
  color: var(--text-primary);
}
.meta-since {
  background: #fff;
  border-color: var(--pill-border);
  color: var(--text-secondary);
}
.meta-location {
  background: #fff;
  border-color: var(--pill-border);
  color: var(--text-secondary);
}

/* Status pills (yes/no) */
.pill-status.yes { background: #fff; color: #2e7d32; }
.pill-status.yes .pill-mark { color: #2e7d32; font-weight: bold; }
.pill-status.no { background: #fff; color: #999; opacity: 0.8; }
.pill-status.no .pill-mark { color: #bbb; }
.pill-mark { display: flex; align-items: center; justify-content: center; background: none !important; box-shadow: none !important; padding: 0; width: auto; height: auto; font-size: 14px; }

/* share / recommend specific */
.pill-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.recommend-wrap {
  display: inline-flex;
  align-items: center;
}

/* ---------------------------
   Friend Action Buttons
   --------------------------- */
.pill-form {
  display: inline-flex;
  margin: 0;
}

.pill-action {
  cursor: pointer;
  text-decoration: none;
}

.pill-friend {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  color: #fff !important;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
  transition: all 0.25s ease;
}
.pill-friend:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.pill-friend:active {
  transform: translateY(0);
}
.pill-friend svg {
  stroke: #fff;
}

.pill-pending {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fbbf24;
  color: #92400e !important;
  padding: 8px 18px;
  font-weight: 600;
  cursor: default;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.25);
}
.pill-pending svg {
  stroke: #92400e;
}

/* Following state - green success style */
.pill-following {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #10b981;
  color: #065f46 !important;
  padding: 8px 18px;
  font-weight: 600;
  cursor: default;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
.pill-following svg {
  stroke: #065f46;
}

.pill-accept {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: #fff !important;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  transition: all 0.25s ease;
}
.pill-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.pill-accept svg {
  stroke: #fff;
}

.pill-message {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border: none;
  color: #fff !important;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
  transition: all 0.25s ease;
}
.pill-message:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}
.pill-message svg {
  stroke: #fff;
}

.pill-unlock {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  color: #fff !important;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: all 0.25s ease;
}
.pill-unlock:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.pill-unlock svg {
  stroke: #fff;
}

/* ---------------------------
   Tabs
   --------------------------- */
.space-tabs {
  display: flex;
  gap: 20px;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.space-tabs::-webkit-scrollbar {
  display: none;
}

.space-tab-btn {
  background: transparent;
  border: none;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.tab-icon {
    width: 18px; 
    height: 18px; 
    opacity: 0.6; 
    transition: all 0.2s ease;
}
.space-tab-btn.active {
  color: #1976d2; 
  border-bottom-color: #1976d2;
}
.space-tab-btn.active .tab-icon {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(34%) sepia(98%) saturate(1774%) hue-rotate(190deg) brightness(92%) contrast(93%); /* Matches #1976d2 */
}

/* panels */
.space-tab-panels {
  margin-top: 18px;
}
.space-tab-panel {
  animation: fadeIn var(--transition-base);
}
.space-tab-panel[hidden] {
  display: none;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* panel headings and body */
.panel-heading {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}
.panel-body {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---------------------------
   Social Tab (Matched to Profile)
   --------------------------- */
.social-row { display: flex; align-items: center; padding: 16px 4px; background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--border-light); gap: 16px; transition: background-color 0.2s ease; text-decoration: none; }
.social-row:hover { background: #fafafa; transform: none; box-shadow: none; }
.social-row:last-child { border-bottom: none; }
.social-row-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border-radius: 50%; border: none; flex-shrink: 0; }
.social-row-icon img { width: 18px; height: 18px; opacity: 0.8; }
.social-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.social-row-text .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; min-width: 140px; }
.social-row-text .value { font-size: 16px; color: var(--text-primary); font-weight: 500; word-break: break-word; }

@media (max-width: 640px) {
  .social-row { padding: 12px 0; flex-direction: row; align-items: flex-start; gap: 12px; }
  .social-row-icon { width: 32px; height: 32px; }
  .social-row-icon img { width: 16px; height: 16px; }
}

/* ---------------------------
   Gallery (carousel basics)
   --------------------------- */
.pg-wrapper {
  margin: 12px 0;
}
.pg-carousel-frame {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.pg-carousel-track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}
.pg-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding-top: 56.25%;
  position: relative;
}
.pg-slide .pg-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-slide img,
.pg-slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.pg-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.pg-prev {
  left: 10px;
}
.pg-next {
  right: 10px;
}

/* gallery admin fallback */
.gallery-admin-fallback {
  border: 1px solid #f0f3ff;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
}

/* ---------------------------
   Modal minimal (recommend modal)
   --------------------------- */
.rec-modal-overlay {
  display: none;
}
.rec-modal-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------
   Misc small utilities
   --------------------------- */
.panel-body p {
  margin: 0 0 12px 0;
}
a {
  color: inherit;
}

/* ---------------------------
   Responsive: mobile-first tweaks
   --------------------------- */
@media (max-width: 1024px) {
  :root {
    --left-col-width: 150px;
    --page-pad: 18px;
  }
  .single-space-container {
    padding: 20px var(--page-pad);
  }
  .space-avatar,
  .space-avatar--initials {
    width: 110px;
    height: 110px;
  }
  .space-title {
    font-size: 18px;
  }
  .space-average-rating {
    padding: 10px 12px;
    min-width: 110px;
    gap: 10px;
  }
  .space-average-rating .avg-star {
    width: 34px;
    height: 34px;
    font-size: 16px;
    border-radius: 7px;
  }
  .pill {
    padding: 7px 12px;
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  :root {
    --left-col-width: 100px;
    --page-pad: 14px;
    --gap: 12px;
  }
  .row {
    flex-direction: row;
    align-items: flex-start;
  }
  .col-left {
    flex: 0 0 var(--left-col-width);
  }
  .col-right {
    flex: 1 1 auto;
  }
  .space-avatar,
  .space-avatar--initials {
    width: 88px;
    height: 88px;
  }
  .space-title {
    font-size: 16px;
  }
  .space-tabs {
     gap: 2px;
     justify-content: space-between;
  }
  .space-tab-btn {
    padding: 8px 4px;
    font-size: 10px;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 50px;
  }
  .tab-icon {
    width: 20px;
    height: 20px;
  }
  .space-tab-btn span {
      display: block;
      line-height: 1.1;
      text-align: center;
  }
  .pg-nav-btn {
    padding: 6px;
  }
  .panel-body {
    font-size: 15px;
  }
  .social-link {
    font-size: 14px;
  }
}

/* END OF FILE */
/* ---------------------------
   Details Tab
   --------------------------- */
/* ---------------------------
   Details Tab (Modern Grid)
   --------------------------- */
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.detail-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.detail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: var(--pill-border);
}
.detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.detail-icon.yes {
  background: #e6f4ea;
  color: #1e8e3e;
}
.detail-icon.no {
  background: #f1f3f4;
  color: #5f6368;
}
.detail-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}
.detail-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.detail-status {
  font-size: 13px;
  color: var(--text-secondary);
}
.detail-card.address-card {
  grid-column: 1 / -1; /* Address takes full width if needed, or keep in grid */
}

/* ---------------------------
   Experts Tab
   --------------------------- */
.experts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px; }
.expert-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; gap: 10px; padding: 10px; border-radius: 12px; transition: background 0.2s ease; }
.expert-card:hover { background: var(--bg-surface); }
.expert-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; background: #fff; }
.expert-avatar img { width: 100%; height: 100%; object-fit: cover; }
.expert-avatar--blue { background: #e3f2fd; color: #1976d2; font-weight: 700; font-size: 24px; }
.expert-name { font-size: 14px; font-weight: 600; color: var(--text-primary); text-align: center; line-height: 1.3; }

@media (max-width: 640px) {
  .detail-item { flex-direction: column; gap: 2px; }
  .detail-label { min-width: auto; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .experts-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .expert-avatar { width: 64px; height: 64px; }
  .expert-name { font-size: 13px; }
}