/* ========================================= */
/* Root Variables & Basic Body/Container     */
/* ========================================= */
:root {
  --primary-font-color: #000000;
  --primary-title-color: #FF5800;
  --primary-link-color: #000000;
  --panel-bg: rgba(255, 255, 255, 0.9);
}

body {
  margin: 0;
  padding: 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: Arial, sans-serif;
  color: var(--primary-font-color);
}

body.custom-cursor a,
body.custom-cursor a:link,
body.custom-cursor a:visited,
body.custom-cursor a:hover,
body.custom-cursor a:active {
  cursor: inherit !important;
}


.page-container {
  width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* ========================================= */
/* Header & Link Bar                         */
/* ========================================= */
.header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #002B99;
  height: auto !important;
  color: #fff;
  position: relative;
  gap: 5px;
}

.header img.logo {
  height: 35px;
}

#help-button {
  cursor: pointer;
  height: 30px;
  transition: display 0.3s ease;
}

.link-bar {
  background-color: #669ACC;
  margin-bottom: 20px;
  padding: 10px 0px 6px 0px;
  text-align: center;
  font-size: 16px;
}

.link-bar a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 5px;
  /* Make each link an inline-flex container so the image and text align nicely */
  display: inline-flex;
  align-items: center;
}

.link-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  /* You can adjust margin-right as needed */
}


.link-bar a:hover {
  text-decoration: underline;
}

.link-bar .separator {
  display: inline-flex;
  align-items: center;
  color: #000000;
  margin: 0 5px;
  vertical-align: top
}

.link-bar .group1,
.link-bar .group2 {
  display: inline-block;
  vertical-align: middle;
}

/* ========================================= */
/* Login Bar                                 */
/* ========================================= */
.login-container {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0px;
  transition: all 0.3s ease;
}

.login-container input,
.login-container button {
  padding-left: 6px;
  border-radius: 4px;
}

.login-container input {
  transition: border-color 0.3s ease;
}

.login-container input:focus {
  outline: none;
  border: 2px solid #669ACC;
}

.login-container input[style*="border: 2px solid red"] {
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25%, 75% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
}

.login-container button {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 40px;
}

.login-container button:hover {
  text-decoration: underline;
}

.oauth-login-button {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
}

.oauth-login-button:hover {
  text-decoration: underline;
}

#bsky-handle {
  text-align: center;
}

/* Login prompt: white text with an arrow that points left */
.login-container .login-prompt {
  color: white;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  text-align: right;
}

.login-container button#oauth-login-button .login-image {
  width: auto;
  height: 28px;
  margin-top: 3px;
}

.login-image:hover {
  transform: scale(1.1);
}

/* Create a solid white triangle pointing left using borders */
.login-container .login-prompt .pulse-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid white;  /* This makes the triangle point left */
  margin-left: 4px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* More specific styling for the login input field only */
.login-container input#bsky-handle {
  border-radius: 20px;  /* Rounded, lozenge shape */
  padding: 4px 12px;
}

/* Specific placeholder styling for the login input */
.login-container input#bsky-handle::placeholder {
  color: #e0e0e0;  /* Very light grey */
}




/* ========================================= */
/* Welcome Message                           */
/* ========================================= */
.welcome-message {
  margin: 10px 0;
  padding: 10px;
  background-color: #d5e8fb;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* ========================================= */
/* Search Box                                */
/* ========================================= */
.search-container {
  flex: 1;
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-label {
  color: white;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.radio-label input {
  margin-right: 5px;
  margin-bottom: 5px;
}

#search-input {
  width: 150px;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
}

#search-button {
  margin-left: 10px;
  padding: 6px 12px;
  background-color: lightgrey;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#search-button:hover {
  background-color: grey;
}

/* ========================================= */
/* Popup Overlay (e.g. "I wouldn't bother")  */
/* ========================================= */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  max-width: 400px;
}

/* ========================================= */
/* Main Content Layout                       */
/* ========================================= */
.main-content {
  display: flex;
}

/* Keep your existing styling for the panel itself */
#special-header-panel {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
  margin-bottom: 20px;
}

.special-header-title {
  color: #FF5800;
  margin-top: 0px !important;
}

.special-header-intro {
  margin-bottom: 10px;
}

/* New classes for the two-column layout */
.special-content-row {
  display: flex;
  flex-wrap: wrap;  /* to be responsive for narrower screens */
  gap: 20px;        /* space between left & right sections if needed */
}

/* Left section takes up the remaining space (flex: 1).
   Feel free to set a specific width if you prefer. */
.special-left-section {
  flex: 1;
  min-width: 200px; /* just a safeguard for smaller screens */
}

/* Right section only needs enough width to hold 3 smaller cards in a row.
   We’ll let the cards themselves define the needed width. */
.special-right-section {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}


#special-header-panel .profiles-grid {
  display: flex !important;
  gap: 10px;
  margin-top: 16px; /* top margin */
}

#special-header-panel .profile-card {
  /* 2/3 of your original 150×200 => ~100×133 */
  width: 108px !important;
  height: 150px !important;

  /* Also reduce padding, font-size, etc. to 2/3 of original */
  padding: 8px; /* 2/3 of 10px */
  font-size: 0.66em; /* scale text if needed */
}

#special-header-panel .profile-card img {
  /* 2/3 of 100×100 => ~66×66 */
  width: 75px !important;
  height: 75px !important;
}

/* If you have other sub-elements with fixed px, override them too. */




/* ========================================= */
/* Left Column                               */
/* ========================================= */
.left-column {
  width: 360px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#profile-name-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}

.profile-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

#profile-name-header {
  font-size: 1.8em;
  font-weight: bold;
  text-align: left;
  color: var(--primary-title-color);
  margin-bottom: 5px;
}

#profile-address {
  font-size: 0.9em;
  text-align: left;
  color: #444;
}

.profile-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.profile-picture {
  width: 60%;
  text-align: left;
}

.profile-picture img {
  width: auto%;
  height: 200px;
  border: 0px solid #ccc;
}

.profile-picture-container {
  display: flex;
  flex-direction: column;
  width: 60%;
}

.profile-info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 180px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  border: none;
}

.profile-info-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

#profile-pics-link {
  font-size: 14px;
  font-weight: bold;
}

#profile-pics-link a {
  color: var(--primary-link-color);
}

.stats-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.stats-container div {
  display: block;
}

#profile-location a {
  color: var(--primary-link-color);
}

#profile-location a:visited {
  color: var(--primary-link-color);
}

#profile-location a:hover {
  text-decoration: underline;
}

.online-status {
  color: #1FAD28;
  position: relative;
  padding-left: 25px;
}

.online-status::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url('onlinenow.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================================= */
/* Right Column                              */
/* ========================================= */
.right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Latest Post Section */
.latest-post-section {
  background-color: #ffffff;
  border: 0px solid #000;
  padding: 10px;
}

.latest-post-section strong {
  color: var(--primary-title-color);
  font-size: 16px;
}

.latest-post-section p {
  color: #000000;
  margin: 10px 0;
}

.latest-post-section a {
  color: var(--primary-link-color);
  text-decoration: none;
}

.post-date {
  font-style: italic;
  color: var(--primary-title-color);
  margin-bottom: 10px;
}

#view-more-link {
  text-align: center;
}

/* Titles & text color overrides */
#latest-post-text,
#profile-address,
#profile-location {
  color: var(--primary-font-color) !important;
}

#latest-post-header {
  color: var(--primary-title-color) !important;
}

.like-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0px 4px 0px;
  font-size: 14px;
}

.like-summary a {
  color: var(--primary-link-color);
  text-decoration: none;
}

.like-summary a:hover {
  text-decoration: underline;
}

/* Heart & count side by side */
.like-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.heart-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  color: var(--primary-title-color);
}

@keyframes heartGrowFade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}
.heart-grow-fade {
  animation: heartGrowFade 1.6s ease-out forwards;
}

.post-repost-link, .post-reply-link {
  color: var(--primary-link-color);
  text-decoration: none;
  cursor: pointer;
}
.post-repost-link:hover, .post-reply-link:hover {
  text-decoration: underline;
}


/* Custom confirmation */

/* Separator styling */
.link-separator {
  color: var(--primary-link-color);
  margin: 0 5px;
}

/* Custom Confirm Modal Overlay */
.custom-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* Dialog Box */
.custom-confirm-dialog {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Message Text */
.custom-confirm-dialog p {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--primary-font-color);
}

/* Buttons Container */
.custom-confirm-buttons {
  display: flex;
  justify-content: space-around;
}

/* Yes and No Buttons */
.custom-confirm-buttons button {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Style the buttons to match your site's palette */
.custom-confirm-yes {
  background-color: var(--primary-title-color);
  color: #fff;
}
.custom-confirm-no {
  background-color: #ccc;
  color: #000;
}

.custom-confirm-yes:hover,
.custom-confirm-no:hover {
  opacity: 0.9;
}


/* Section header bar (Blurbs, Friends, etc.) */
.section-header {
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
  background-color: #FFCB99;
  color: var(--primary-title-color) !important;
  display: flex;
  align-items: center;
  justify-content: left;
  font-weight: bold;
  font-size: 16px;
}

/* ========================================= */
/* Music Section                             */
/* ========================================= */
.music-section {
  font-size: 14px;
}

#music-info {
  text-align: center;
}

/* ========================================= */
/* About, Top Friends, Comments, Replies     */
/* ========================================= */
.about-section,
.top-friends,
.latest-post-section,
.comments-section,
.replies-section {
  background-color: rgba(255, 255, 255, 0.8);
  border: 0px solid #CCC;
  padding: 10px;
  font-size: 14px;
}

.friend-comments-section,
.replies-section {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}

.comment {
  display: flex;
  gap: 4px;
  margin-bottom: 4px !important;
}

/* Left side: author info */
.comment-left {
  width: 33%;
  background-color: #FF9933;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.comment-author-link {
  text-decoration: none;
  color: inherit; /* Fix 'colour' -> 'color' */
  text-align: center;
}

.comment-author-name {
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}

.comment-author-pic {
  width: 60%;
  display: block;
  margin: 0 auto 10px;
}

/* Right side: date/time & text */
.comment-right {
  width: 67%;
  background-color: #FFCC99;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.comment-right .comment-datetime {
  text-align: left;
  margin-bottom: 4px;
}

.comment-right .comment-text {
  margin: 0;
  text-align: left;
}

.about-section h2 {
  margin-top: 0;
  font-size: 16px;
  color: var(--primary-title-color) !important;
}

.music-section h2,
.comments-section h2 {
  margin-top: 0;
  font-size: 16px;
}

#about-text {
  white-space: pre-wrap;
}

#about-text a {
  color: var(--primary-link-color);
  word-break: break-all;
}

.comment p {
  margin: 5px 0;
}

/* ========================================= */
/* Footer                                    */
/* ========================================= */
.footer {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: #555;
}

/* ========================================= */
/* Contact Section                           */
/* ========================================= */
.contact-section {
  background-color: #669ACC;
  border: 4px solid #669ACC;
  border-radius: 4px;
  overflow: hidden;
}

.contact-title-bar {
  background-color: #669ACC;
  color: #fff;
  padding: 2px 10px;
  font-weight: bold;
  font-size: 16px;
}

.contact-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
}

.contact-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #002B99;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.contact-link:hover {
  background-color: #e6e6e6;
}

.contact-icon {
  margin-right: 8px;
}

.add-friend-icon {
  width: 18px;
  height: 18px;
}

.send-message-icon {
  width: 26px;
  height: 12px;
}

.forward-icon {
  margin-right: 4px;
  width: 24px;
  height: 20px;
}

.rank-user-icon {
  width: 22px;
  height: 18px;
}

/* ========================================= */
/* Interests Section                         */
/* ========================================= */
.interests-section {
  background-color: #669ACC;
  border: 4px solid #669ACC;
  border-radius: 4px;
  overflow: hidden;
}

.interests-title-bar {
  background-color: #669ACC;
  color: #fff;
  padding: 2px 10px;
  font-weight: bold;
  font-size: 16px;
}

.interests-content {
  display: grid;
  grid-template-columns: 100%;
  gap: 2px;
  padding: 2px 4px 2px 2px;
  background-color: white;
}

.interest-search-link:hover {
  text-decoration: underline;
}

.interests-row {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 2px;
}

.interests-col1 {
  font-size: 14px;
  background-color: #B1D0F0;
  padding: 5px;
  color: #3B6D9E;
  font-weight: bold;
  text-align: left;
  vertical-align: top;
  border: 2px solid white;
}

.interests-col2 {
  font-size: 14px;
  background-color: #D5E8FB;
  padding: 5px;
  color: #000;
  text-align: left;
  vertical-align: top;
  border: 2px solid white;
}

.interests-col2 a {
  color: black;
}

.interests-col2 a:visited {
  color: black;
}

.interests-col2 a:hover {
  text-decoration: underline;
}

/* ========================================= */
/* .invisible Class                          */
/* ========================================= */
.invisible:not(#page-header):not(.logo) {
  display: none;
}

/* ========================================= */
/* Confetti                                  */
/* ========================================= */
#confetti-container {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

#page-content {
  position: relative;
  z-index: 1;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 1;
  animation: fallAndDrift linear forwards;
}

.confetti-triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #ffe3fa;
}

.confetti-diamond {
  transform: rotate(45deg);
}

.confetti-circle {
  border-radius: 50%;
}

@keyframes fallAndDrift {
  0% {
    transform: translate(calc(var(--drift, 0) * -1), -20px) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(var(--drift, 0), 50vh) rotate(180deg);
    opacity: 0.5;
  }
  100% {
    transform: translate(calc(var(--drift, 0) * -1), 100vh) rotate(360deg);
    opacity: 0;
  }
}

/* ========================================= */
/* Search Results Grid                       */
/* ========================================= */
.search-results-container {
  margin-top: 20px;
}

.search-results-container h1 {
  color: #002B99;
}

/* Grid for profile cards */
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  justify-content: center;
  align-items: start;
}

/* ========================================= */
/* Profile Card Styles                       */
/* ========================================= */
/* Ensure the card clips the shine */
.profile-card {
  position: relative;
  overflow: hidden;
  /* existing styles… */
  width: 100%;
  height: 200px;
  text-align: center;
  padding: 10px 0;
  background-color: #f8f8f8;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.3s ease;
}

.profile-card:hover {
  transform: scale(1.02);
}

.profile-card.gold {
  /* Add a subtle golden glow as an additional shadow */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 8px rgba(243, 173, 22, 076);
}

/* Only apply the shine effect for gold accounts */
.profile-card.gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 150%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,215,0,0.5), transparent);
  transform: skewX(-25deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2; /* Ensure it stacks above the video background */
}


/* When a gold card is hovered, trigger the shine animation */
.profile-card.gold:hover::after {
  animation: shine 0.5s ease-out forwards;
}

@keyframes shine {
  from {
    left: -100%;
    opacity: 1;
  }
  to {
    left: 100%;
    opacity: 0;
  }
}

.profile-card img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #ccc;
  z-index: 1;
}



/* ------------------------------ */
/* Profile Name Container */
/* ------------------------------ */
/*
  Ensure that each card’s name container always has three children:
    - .profile-quote at the top,
    - .profile-name in the middle (always central and larger),
    - .profile-location at the bottom.
  The container has a fixed height and a 5px gap above it.
*/
.profile-name-container {
  position: relative;
  z-index: 1;
  width: calc(87%);
  height: 100px;
  box-sizing: border-box;
  padding: 2px;
  margin-top: 5px;  /* gap above container */
  border: 2px solid #ccc;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.8rem, 2vw, 1rem);
  overflow: hidden;
  border-radius: 5px;
}

/* All three segments are absolutely positioned */
.profile-quote,
.profile-name,
.profile-location {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  text-align: center;
  line-height: 1;
  padding: 0 2px;
  /* Limit to two lines */
  -webkit-line-clamp: 2;
  transition: -webkit-line-clamp 0.2s ease-in-out;
}

/* The quote is pinned to the top */
.profile-quote {
  top: 0;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

/* The name is centered vertically */
.profile-name {
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: bold;
}

/* The location is pinned to the bottom */
.profile-location {
  bottom: 0;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.profile-location a {
  color: #666;
}


/* Hover effect for the card */
.profile-card:hover {
  transform: scale(1.02);
}

/* For the special header panel, allow the name container’s paragraph to wrap */
#special-header-panel .profile-name-container p {
  white-space: normal !important;
}


/* ========================================= */
/* Top Friends                               */
/* ========================================= */
.top-friends h2 {
  margin-top: 0;
  font-size: 16px;
}

.friends-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.friend {
  width: 110px;
  height: 130px;
  background-color: #fff;
  border: 0px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  text-align: center;
  overflow: hidden;
}

.friend img {
  width: 100%;
  height: auto;
  display: block;
  align-self: flex-end;
}

.friend-name-link {
  margin-top: 4px;
  flex: 1;
  display: block;
  color: #002B99;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  max-width: 110px;
}

.friend-name-link.text-truncated {
  text-align: left;
}

.friend-name-link:hover {
  text-decoration: underline;
}

/* ============================= */
/* EDIT BUTTON STYLES           */
/* ============================= */

/* Container for Edit Button and Text */
.edit-button-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the content horizontally */
  gap: 8px; /* Space between text and button */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* Text Next to Edit Button */
.edit-button-text {
  color: #000; /* Desired text color */
  font-size: 14px;
  line-height: 1.4;
  max-width: 150px; /* Adjust to control text wrapping */
  text-align: right; /* Right-aligned in normal (desktop) layout */
}

/* Edit Button Link */
.edit-button-link {
  text-decoration: none;
  color: #002B99; /* Matches text color */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Edit Button Icon */
.edit-button-icon {
  width: 40px;  /* Adjust size as needed */
  height: 40px;
  vertical-align: middle;
  margin: 5px;
  transition: transform 0.2s;
}

/* Hover effect: icon grows slightly */
.edit-button-link:hover .edit-button-icon {
  transform: scale(1.1);
}

.vertical-edit-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vertical-edit-group .edit-button-link {
  flex-direction: column; /* Forces the button icon and text to stack vertically */
  margin-left: -5px
}

.vertical-edit-group .edit-button-text {
  margin: 4px 4px 0 4px;
  text-align: center;
}


/* Responsive Adjustments */
@media (max-width: 500px) {
  .edit-button-container {
    flex-direction: column;
    align-items: center;
  }

  .edit-button-text {
    max-width: 100%;
    text-align: center;
  }

  .edit-button-icon {
    margin-top: 5px;
  }
}

/* ========================================= */
/* Modal Overlays (pictures, videos, etc.)   */
/* ========================================= */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: var(--panel-bg);
  padding: 20px;
  border-radius: 8px;
  width: 800px;
  height: 80%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  margin: 10px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.main-media-container {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
  overflow: hidden;
}

.main-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.caption {
  color: grey;
  font-style: italic;
  text-align: center;
  font-size: 14px;
  margin: 0 auto 10px auto;
  max-width: 90%;
  flex: 0 0 auto;
}

.thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  height: 100px;
  gap: 5px;
  justify-content: center;
  overflow-x: auto;
  margin-top: 15px;
}

.thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.thumbs img:hover {
  border-color: #0073e6;
}

/* ========================================= */
/* Help Overlay & Content                    */
/* ========================================= */
.help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.help-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  max-width: 500px;
  width: 80%;
  position: relative;
}

.help-content a {
  color: var(--primary-link-color);
  text-decoration: underline;
}

.help-content a:visited {
  color: var(--primary-link-color);
}

.help-image {
  display: block;
  margin: 0 auto 20px auto;
  max-width: 20%;
  height: auto;
}

.faq-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.faq-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  max-height: 80%;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 10px; /* ensures there is at least 10px gap from the screen edges */
}

.close-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 24px;
  cursor: pointer;
}

.faq-content h2 {
  margin-top: 0;
}

.faq-item p {
  margin: 0 0 1em 0;
}

.faq-item p:first-child {
  font-weight: bold; /* Bold the question */
}


/* ========================================= */
/* Universal Post Modal (the "new post" UI)  */
/* ========================================= */
#universal-post-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}

#universal-post-modal .post-modal-content {
  background-color: #fff;
  color: #000;
  border: 1px solid #888;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}

#universal-post-modal .close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}
#universal-post-modal .close-button:hover {
  color: #000;
}

#universal-modal-title {
  margin-top: 0;
  font-size: 1.5em;
}

#universal-modal-explanation {
  color: grey;
  font-size: 14px;
}

#universal-modal-contenteditable {
  width: 100%;
  min-height: 80px;
  border: 1px solid #888;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
  margin-top: 6px;
  outline: none;
  white-space: pre-wrap;
}

/* Form-based posts: inputs, textareas, etc. */
.full-width-input,
.full-width-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #888;
  border-radius: 4px;
}

.full-width-textarea {
  height: 80px;
}

/* Highlighting matched tokens (#hash, @mention) */
.highlight {
  font-weight: bold !important;
  color: #0073e6 !important;
}

/* Aesthetics (core) form section */
.core-form-section {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 6px;
  margin-top: 15px;
}

.core-form-section legend {
  font-weight: bold;
  font-size: 14px;
}

.inline-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.inline-group label {
  font-size: 14px;
  font-weight: bold;
}

.inline-group input[type="number"],
.inline-group select,
.inline-group input[type="color"],
.inline-group input[type="text"] {
  flex: 1;
  min-width: 80px;
}

/* Range styling */
input[type="range"] {
  flex: 1;
}

.transparency-slider {
  width: 30%;
}

/* Panel group layout */
.panel-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.panel-group .transparency-group {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Character count & “Hide Post” toggle */
.char-count-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 5px;
}

#universal-char-count {
  font-size: 14px;
  color: #555;
  transition: color 0.3s ease;
  text-align: right;
  white-space: nowrap;
}

/* Submit, error, success messages */
#universal-submit-button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #002B99;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

#universal-submit-button:hover {
  background-color: #001f6a;
}

#universal-post-error {
  color: red;
  margin-top: 10px;
  display: none;
}

#universal-post-success {
  color: green;
  margin-top: 10px;
  display: none;
}

/* Simple row layout for label & input combos */
.form-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

label {
  font-weight: bold;
}

.input-group label {
  min-width: 80px;
  text-align: right;
  margin-right: 10px;
}

.aligned-input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 0px;
}

#universal-post-modal .aligned-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#universal-post-modal .input-group {
  width: 100%;
  box-sizing: border-box;
}


/* ========================================= */
/* Forms & Aesthetics Section               */
/* ========================================= */

/* General fluid layout for the URL input container */
.aesthetics-section .input-group.bg-url {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* Force the label to be inline on larger screens */
.aesthetics-section .input-group.bg-url label {
  flex: 0 0 auto;
  margin-right: 0.5em;
  white-space: nowrap;
}

/* The input takes the remaining space */
.aesthetics-section .input-group.bg-url input {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
}

.core-form-section {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

legend {
  font-weight: bold;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

label {
  font-weight: bold;
}

.input-group label {
  min-width: 80px;
  text-align: right;
  margin-right: 10px;
}

input[type="text"],
input[type="number"],
select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="color"] {
  width: 40px;
  padding: 0;
  border: none;
  background: none;
}

input[type="range"] {
  flex: 1;
}

.transparency-slider {
  width: 30%;
}

/* Apply this rule only inside the modal */
#universal-post-modal .group-container {
  display: grid;
  /* Instead of three fixed columns, use auto-fit so they wrap as needed */
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}



.input-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.color-group label {
  flex: 0 0 80px;
}

.input-group.placeholder {
  visibility: hidden;
}

.panel-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.panel-group .transparency-group {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 5px;
}

.effects-section .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.effects-section .input-group {
  flex: 1 1 45%;  /* Each takes roughly half the row */
  min-width: 200px; /* Ensure a minimum width so they wrap nicely */
}

/* ========================================= */
/* TEXT OVERRIDES                            */
/* Wooooohooooo but probably not Varela      */
/* ========================================= */

.header,
.link-bar,
#oauth-login-button,
#oauth-logout-button {
  font-family: Arial, sans-serif !important;
}


/* ========================================= */
/* MOBILE (STACKED) LAYOUT OVERRIDES         */
/* Triggered at ~768px or below              */
/* ========================================= */
@media (max-width: 768px) {

  /* Let the container go edge-to-edge */
  .page-container {
    width: calc(100% - 20px); /* total horizontal padding of 20px */
    max-width: none;
    margin: 0 auto;
    padding: 10px; /* 10px on all sides gives equal left/right space */
  }

  .header {
    grid-template-columns: auto auto;  /* 2 columns */
    grid-template-rows: auto auto;     /* 2 rows */
    gap: 8px;
    padding: 10px; /* let it expand downward */
  }

  /* 1) Logo: row 1 col 1 */
  .logo {
    grid-row: 1;
    grid-column: 1;
    /* If you want it left aligned, that's default. */
  }

  /* 2) Login container: row 1 col 2, i.e. top-right */
  .login-container {
    grid-row: 1;
    grid-column: 2;
    justify-self: end; /* align it to the right edge */
  }

  /* 3) Search container: row 2 col 1-2 =>
       spanned across entire width, centered horizontally */
   .search-container {
     grid-row: 2;
     grid-column: 1 / span 2; /* span both columns */
     justify-self: center;
     width: 100px;
     max-width: 100px;
     margin-top: 8px;
   }

   #search-button {
     display: inline-block;
     position: relative;
     overflow: visible;
     width: 36px;
     height: 26px;
     font-size: 0;      /* This will hide the text */
     /* or alternatively: */
     /* color: transparent;  Another way to hide the text */
   }

   #search-button::after {
     content: "🔍";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     font-size: 16px;   /* Reset font size for the icon */
     color: #000;       /* Reset color if using the transparent method */
   }

  /* Make the link-bar wrap nicely and have slightly smaller text */
  .link-bar {
    font-size: 14px;
    white-space: normal;
  }

  .link-bar .group1,
  .link-bar .group2 {
    display: block;
    margin: 4px 0; /* spacing between lines */
  }

  /* Hide the pipe at the start of group2 (if any) */
  .group2 .separator:first-of-type {
    display: none;
  }

  @media (max-width: 768px) {
    /* Flatten the two columns so their children participate in the same grid */
    .left-column,
    .right-column {
      display: contents;
    }
    .main-content {
      display: grid;
      grid-template-areas:
        "special"
        "name"
        "pic"
        "latest"
        "blurbs"
        "music"
        "friends"
        "contact"
        "interests"
        "comments"
        "replies";
      grid-gap: 1em;
    }

    /* Assign each section to its grid area */
    #special-header-panel { grid-area: special; }
    #profile-name-section { grid-area: name; }
    #profile-pic-info { grid-area: pic; }
    #latest-post { grid-area: latest; }
    #about-header,
    #blurbs { grid-area: blurbs; }
    #contact { grid-area: contact; }
    #friends { grid-area: friends; }
    #music { grid-area: music; }
    #interests-section { grid-area: interests; }
    #comments-section { grid-area: comments; }
    #replies-section { grid-area: replies; }
  }


  /* Make the profile container properly flex */
  .profile-container {
    display: flex;
    gap: 10px;
    align-items: stretch; /* ensures children stretch to match heights */
    width: 100%;
    min-height: 100px; /* ensures minimum height matches desktop version */
  }

  .profile-picture-container {
    width: 40%;
    display: flex;
    flex-direction: column;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .profile-picture {
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
  }

  .profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* Fix the profile info to match height */
  .profile-info {
    width: 60%;
    margin: 0; /* Remove margin as we're using gap */
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: auto; /* Let it size naturally */
    min-height: 100%; /* Ensure it matches container height */
    box-sizing: border-box;
  }

  .profile-info-content {
    flex: 1; /* Allow content to fill available space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
  }

  #profile-pics-link {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 0;
    margin: 0;
    width: 100%;
    z-index: 1;
  }

  .friends-grid {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns per row */
    gap: 10px;
  }

  .friend {
    width: 100%;
    height: 100%;
  }

  /* If you want the “search results” .profiles-grid to be 2 across or 1 across, you can adjust: */
  .profiles-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* Decrease .profile-card height so they fit on smaller screens: */
  .profile-card {
    width: 85%;
    height: 200px%;
    margin: 0 auto 5px auto;
  }

  /* Universal Post Modal might fill screen fully on mobile */
  #universal-post-modal .post-modal-content {
    width: 95%;
    max-width: none;
    height: auto;
    max-height: 90vh; /* or remove if you want it to scroll normally */
  }

  /* Etc. Add any other overrides you’d like to reduce widths, font sizes, etc. */
}

@media (max-width: 600px) {
  /* For Frame and Font sections inside the modal */
  #universal-post-modal .group-container {
    /* Increase the minimum width so that if there’s room for two columns,
       they will appear side-by-side instead of stacking everything */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

  /* For the transparency group, allow its items to wrap */
  #universal-post-modal .transparency-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
  }
  /* Force the label (e.g. "Colour:") to be block-level so it wraps */
  #universal-post-modal .transparency-group label {
    display: block;
    width: 100%;
  }

  /* Ensure the modal content scrolls if it gets too tall */
  #universal-post-modal .post-modal-content {
    max-height: 80vh;
    overflow-y: auto;
  }
}





@media (max-width: 540px) {


  /* The “friends” grid can wrap into two columns or single column */
  /* Grid container for friend cards */
  .friends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns per row */
    gap: 10px;
  }

  /* Individual friend card */
  .friend {
    display: flex;
    flex-direction: column;           /* stack title above image */
    align-items: center;
  }

  /* Title bar above the image */
  .friend-name-link {
    display: block;
    width: 100%;
    height: 20px;                     /* fixed height */
    line-height: 20px;
    margin-top: 0px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }


}

@media (max-width: 580px) {

  .logo {
    content: url("skyspacelogonotext.png");
  }

  .login-container .login-text {
    display: none;
  }
  .login-container .login-prompt::before {
    content: "Log in";
    color: inherit;
    font-size: inherit;
    margin-right: 4px;
  }

  .aesthetics-section .input-group.bg-url {
    flex-direction: column;
    align-items: stretch;
  }
  .aesthetics-section .input-group.bg-url label {
    display: block;
    margin-bottom: 0.25em;
  }
  .aesthetics-section .input-group.bg-url input {
    width: 100%;
  }

}

@media (max-width: 450px) {
  #special-header-panel .profile-card {
    /* Subtract 1px from 108px for every 3px the viewport is below 450px */
    width: calc(108px - ((450px - 100vw) / 3)) !important;
    /* Scale the height proportionally (base height is 150px) */
    height: calc(150px * ((108px - ((450px - 100vw) / 3)) / 108px)) !important;
  }
}


@media (max-width: 420px) {

  .contact-links {
    grid-template-columns: 1fr;
  }
  .contact-link {
    justify-content: center;
  }

  .friends-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columns per row */
    gap: 10px;
  }

  #search-input {
    width: calc(150px - (420px - 100vw));
  }

}