/*
Theme Name: ClipRoll
*/

body {
  background-color: #f5f5f5; /* your example */
}

/* Paste the rest of your working CSS from Additional CSS here */

/* --- TikTok Style Theme Colors --- */
body,
html {
  background: #111 !important;
  color: #fff !important;
}

a {
  color: #fff;
  transition: color 0.2s;
}
a:hover, a:focus {
  color: #1de9b6;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff !important;
  font-weight: bold;
}

.site-header,
header,
nav,
#sidebar,
.sidebar,
.footer,
.site-footer {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
}

button,
input[type="submit"],
.button,
.wp-block-button__link,
.sidebar-toggle,
.upload-btn,
.like-btn {
  background: linear-gradient(90deg, #ff3576 0%, #1de9b6 100%);
  color: #fff !important;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  padding: 10px 24px;
  box-shadow: 0 2px 8px rgba(30,233,182,0.08);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.sidebar-toggle:hover,
.upload-btn:hover,
.like-btn:hover {
  background: linear-gradient(90deg, #1de9b6 0%, #ff3576 100%);
  color: #fff !important;
}

.sidebar-nav a,
.sidebar-nav a:visited {
  color: #fff !important;
  font-weight: 500;
}

.sidebar-nav a:hover {
  background: rgba(255,53,118,0.08);
  color: #1de9b6 !important;
}

.video-feed-container,
.video-post,
.search-form,
.upload-prompt {
  background: transparent !important;
  color: #fff !important;
}

.video-post {
  background: #181818 !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(30,233,182,0.08);
}

input[type=\"text\"], input[type=\"search\"], input[type=\"email\"], textarea {
  background: #222 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  border-radius: 8px;
}

input[type=\"text\"]:focus, input[type=\"search\"]:focus, input[type=\"email\"]:focus, textarea:focus {
  border-color: #ff3576 !important;
  outline: none;
}

::-webkit-input-placeholder { color: #bbb; }
::-moz-placeholder { color: #bbb; }
:-ms-input-placeholder { color: #bbb; }
::placeholder { color: #bbb; }

.footer,
.site-footer {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
}

.wp-block-button__link {
  border-radius: 25px !important;
}

::-webkit-scrollbar {
  width: 8px;
  background: #181818;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #ff3576 0%, #1de9b6 100%);
  border-radius: 8px;
}
.search-form input[type="search"], .search-form input[type="text"] {
  min-width: 260px;
  width: 280px;
  max-width: 100%;
  font-size: 1.1em;
  padding: 10px 16px;
}

/* ====================== */
/* BuddyPress Friend Button Fixes */
/* ====================== */

/* Make BuddyPress Add Friend button always visible */
.bp-profile-button {
    opacity: 1 !important;
    visibility: visible !important;
}

/* BuddyPress friend button styling */
.bp-profile-button.friendship-button {
    background: #1de9b6 !important;
    color: #111 !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
    margin-left: 10px !important;
    display: inline-block !important;
}

.bp-profile-button.friendship-button:hover {
    background: #ff3576 !important;
    color: white !important;
}

/* Different states of the friend button */
.friendship-button.pending:not(.requested) {
    background: #ffb74d !important;
    color: #111 !important;
}

.friendship-button.is_friend {
    background: #4caf50 !important;
    color: white !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bp-profile-button.friendship-button {
        padding: 6px 12px !important;
        font-size: 0.9em !important;
    }
}

/* ====================== */
/* BuddyPress Add Friend Button Only */
/* ====================== */

button#friend-3.friendship-button.not_friends.add,
.buddypress .friendship-button.not_friends.add {
    background: #666 !important;  /* Changed from #fff to dark gray */
    border-color: #888 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 20px !important;  /* Added rounded corners */
    color: white !important;  /* Changed from #555 to white */
    cursor: pointer !important;
    font-weight: bold !important;  /* Made text bold */
    padding: 8px 16px !important;  /* Better padding */
    transition: all 0.2s ease !important;
}

button#friend-3.friendship-button.not_friends.add:hover,
.buddypress .friendship-button.not_friends.add:hover {
    background: #1de9b6 !important;  /* Your teal color on hover */
    color: #111 !important;
    border-color: transparent !important;
}

/* For the "Friendship Requested" state */
button#friend-3.friendship-button.pending,
.buddypress .friendship-button.pending {
    background: #ffb74d !important;  /* Orange for pending */
    color: #111 !important;
}

/* For the "Friends" state */
button#friend-3.friendship-button.is_friend,
.buddypress .friendship-button.is_friend {
    background: #4caf50 !important;  /* Green for friends */
    color: white !important;
}

@media (min-width: 768px) {
  /* Push main content right by sidebar width */
  #buddypress.buddypress-wrap {
    margin-left: 80px; /* Match sidebar width */
    width: calc(100% - 280px); /* Prevent horizontal overflow */
  }

  /* Optional: Fix header alignment */
  #site-header.header-inner {
    margin-left: 280px;
    width: calc(100% - 280px);
  }
}

@media (max-width: 767px) {
  #buddypress.buddypress-wrap, 
  #site-header.header-inner {
    margin-left: 0 !important;
    width: 100% !important;
  }
}