.submit-scroll-section {
  padding: 4rem 2rem;
  background-color: #0e0e12;
  color: var(--on-background, #e6e6e6);
}
.submit-scroll-section .container {
  max-width: 900px;
  margin: 0 auto;
}
.user-submitted-title,
.chosen-container-multi, 
.chosen-with-drop, 
.chosen-container-active,
.usp-title,
.user-submitted-category,
.user-submitted-posts,
.user-submitted-tags,
.user_submitted_tags_chosen,
.usp-captcha,
.usp-tags,
.usp-category,
.user_submitted_category_chosen {
background-color: rgba(36, 37, 41, 0.05);
margin: 2rem;
padding: auto;
border-radius: 1rem;
}
.usp-tags,
.usp-category {
  display: flex;
  flex-direction: column;
 border-radius: 1rem;
}
#user_submitted_tags_chosen,
#user_submitted_category_chosen {
  width: 100% !important;
   border: 1px solid #485ff8;
  max-width: 100%;
  display: block;
  margin: 0 auto;
transition: border-color 0.2s;
border-radius: 1rem;
  box-sizing: border-box;
}
#usp_form fieldset {
  border: none;
  margin-bottom: 1.6rem;
  padding: 0;
}
#usp_form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: #bbf7f7;
  letter-spacing: 0.01em;
}
.usp-input, .usp-select, 
#usp_form input[type="text"], 
#usp_form input[type="file"], 
#usp_form select, 
#usp_form textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 1.05rem;
  border: 1px solid #485ff8;
  border-radius: 7px;
  background: #23253a;
  color: #e4e4e4;
  margin-bottom: 0.4rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.chosen-container  {
  width: 100% !important;
  min-width: 100%;
  padding: 0.5em;
  font-size: 1rem;
  color: var(--on-background, #fff);
  border-radius: 0.5em;
}
.chosen-container-multi {
  width: 100% !important;
  max-width: 100%;
  display: block;
}
.chosen-search-input,
.search-field {
    width: 100% !important;
  min-width: 100%;
  padding: 0.5em;
  font-size: 1rem;
   color: var(--on-background, #fff);
}
.chosen-container .chosen-choices li::marker,
.chosen-container .chosen-results li::marker {
  content: none;
  display: none;
}
.chosen-container .chosen-choices li,
.chosen-container .chosen-results li {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
.search-choice {
  background: #2f384c;
  border-radius: 5px;
  color: #485ff8;
  padding: 0.22em 0.85em;
  margin: 0.1em 0.2em 0.1em 0;
  font-size: 0.97em;
}
.search-choice-disabled {
  background: #24293a;
  color: #a0a0a0;
}
.chosen-drop {
  background:  rgba(45, 50, 69, 0.05);
}
.chosen-results li {
  padding: auto;
  cursor: pointer;
   color: #485ff8;
  border-radius: 1px;
}
.chosen-results li.highlighted, 
.chosen-results li.result-selected {
  background: #3d4abd;
   border-radius: 0 0 7px 7px;
  color: #f1f3fc;
}
@media (max-width: 800px) {
  #usp_form {
    padding: 1.2rem 0.7rem;
  }
  .chosen-container-multi,
  .chosen-container {
    width: 100% !important;
    min-width: 0;
  }
}
.page-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.usp-member-content,
.usp-visitor-content {
  padding: 2rem;
  border-radius: 1rem;
}
#usp_form {
  max-width: 700px;
  margin: 2rem auto;
  padding: 2rem 2.5rem 1.5rem 2.5rem;
  border-radius: 18px;
  font-family: var(--font-family-sans);
  color: #f2f2f2;
}
#usp_form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: #485ff8;
  letter-spacing: 0.01em;
}
#usp_form input[type="text"], 
#usp_form input[type="file"], 
#usp_form select, 
#usp_form textarea {
  width: 100%;
  padding: auto;
  font-size: 1.05rem;
  border: 1px solid #485ff8;
  border-radius: 7px;
background-color: rgba(36, 37, 41, 0.05); 	
  color: #e4e4e4;
  margin-bottom: 0.4rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.usp-input:focus,
.usp-select:focus {
  border-color: #3d4abd;
  outline: none;
}
.chosen-choices {
  min-height: 36px;
  padding: 0 0 0.2rem 0;
  display: flex;
  flex-wrap: wrap;
  color: #e4e4e4;
  gap: 0.3em;
}
.search-choice {
  border-radius: 5px;
  padding: 0.22em 0.85em;
  margin: 0.1em 0.2em 0.1em 0;
  font-size: 0.97em;
}
.chosen-drop {
  border-radius: 0 0 7px 7px;
  border: 1px solid #283046;
  border-top: none;
  color: #283046;
}
.chosen-results li.highlighted, 
.chosen-results li.result-selected,
.chosen-results li {
  content: none;
}
#usp-error-message {
  display: none;
  background: #da3d4a;
  color: #fff;
  padding: 0.9em 1em;
  border-radius: 7px;
  margin-bottom: 1.2em;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(218,61,74,0.16);
}
#usp-error-message.usp-callout-failure:not(.usp-hidden) {
  display: block;
}
.usp_text-editor {
  background: #222434;
  border-radius: 7px;
  border: 1px solid #283046;
  margin-bottom: 1em;
  padding: 1em;
}
.wp-editor-tools,
.wp-editor-tabs {
  margin-bottom: 0.5em;
}
.wp-editor-tabs button {
  background: #dbdbe8;
  color: #485ff8;
  border: none;
  border-radius: 5px 5px 0 0;
  margin-right: 0.25em;
  font-size: 1em;
  padding: 0.4em 1.3em;
  cursor: pointer;
}
.wp-editor-tabs button[aria-pressed="true"] {
  background: #3d4abd;
  color: #dbdbe8;
}
.usp-images label {
  margin-bottom: 0.4rem;
}
#usp-upload-message {
  color: #a0a0a0;
  font-size: 0.98em;
  margin-bottom: 0.7em;
}
.usp-file-preview {
  display: block;
  max-width: 120px;
  margin-top: 0.6em;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
#usp_add-another {
  display: inline-block;
  margin-top: 0.7em;
  color: #3d4abd;
  text-decoration: underline;
  font-size: 1em;
  cursor: pointer;
}
.uploader-editor {
  background: #1a1c2a;
  border: 1px dashed #3d4abd;
  border-radius: 7px;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 1.6em 0.7em;
  color: #6ee7b7;
  font-size: 1.05em;
  transition: border 0.25s;
}
.uploader-editor-title {
  font-weight: 600;
  color: #3d4abd;
  font-size: 1.07em;
}
#usp-submit {
  text-align: right;
  margin-top: 2em;
}
.usp-clone,
.usp-submit {
  background: linear-gradient(90deg, #7a48f8 0%, #485ff8 100%);
  color: #191c24;
  font-weight: 700;
  font-size: 1.18em;
  padding: 0.9em 2.5em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(14,246,204,0.14);
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}
.usp-clone,
.usp-submit:hover, .usp-submit:focus {
  background: linear-gradient(90deg, #48a8f8 0%, #485ff8 100%);
  color: #131619;
  box-shadow: 0 0 10px #8e7eff;
  transform: scale(1.02);
  transition: all 0.2s ease-in-out;
}
.usp-multiple,
select[multiple] {
  display: none !important;
}
@media (max-width: 800px) {
  #usp_form {
    padding: 1.2rem 0.7rem;
  }
  .chosen-container-multi,
  .chosen-container {
    width: 100% !important;
    min-width: 0;
  }
}
input[required], select[required], textarea[required] {
  border-left: 3px solid #3d4abd;
}
::-webkit-input-placeholder { color: #8f9ba8; }
::-moz-placeholder { color: #8f9ba8; }
:-ms-input-placeholder { color: #8f9ba8; }
::placeholder { color: #8f9ba8; }

.usp-hidden {
  display: none !important;
}


/* ==============================
   🎨 Custom Scrolls Login Styles
   ============================== */

.usp-login {
  width: 100%;
  max-width: 480px;
  margin: 3rem auto;
  padding: 2rem;
  background: #16171e;
  border-radius: 1rem;
  box-shadow: 0 0 18px rgba(123, 104, 238, 0.25);
  color: var(--on-background, #f4f4f4);
  font-family: var(--font-family-sans, 'Segoe UI', sans-serif);
  font-size: 0.875rem;
  line-height: 1.6;
}

.usp-login h1, .usp-login h3 {
  color: #b6b8ff;
  font-weight: 600;
  margin-bottom: 1rem;
}

.usp-login p {
  margin-bottom: 1.5rem;
  color: #aaa;
}

.tabs_login {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-bottom: 1.5rem;
}

.tabs_login li {
  margin: 0 0.25rem;
}

.tabs_login li a {
  display: block;
  padding: 0.5rem 1rem;
  color: #aaa;
  background: #262730;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.3s ease;
}

.tabs_login li.active_tab a,
.tabs_login li a:hover {
  background: #7b68ee;
  color: #fff;
}

.tab_container {
  background: #1f1f29;
  border-radius: 1rem;
  padding: 1.5rem;
}

.tab_content {
  display: none;
}

.tab_content.active {
  display: block;
}

.username,
.password,
.login_fields {
  margin-bottom: 1rem;
}

.username label,
.password label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #ccc;
}

.username input,
.password input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 0.5rem;
  background: #101115;
  color: #f4f4f4;
  font-size: 1rem;
}

.rememberme {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 1rem;
}

.rememberme input {
  margin-right: 0.5rem;
}

.user-submit {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(90deg, #7a48f8 0%, #485ff8 100%);
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

.user-submit:hover {
  transform: scale(1.04);
  box-shadow: 0 0 10px rgba(139, 115, 255, 0.4);
}

.user-logged-in {
  padding: 1.5rem;
  background: #21212a;
  border-radius: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.user-icon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.user-info p {
  margin: 0;
  color: #bbb;
}

.user-info p:last-child {
  color: #666;
  font-size: 0.8rem;
}

.user-info a {
  color: #b6b8ff;
  text-decoration: none;
}

.user-info a:hover {
  text-decoration: underline;
}

.usp-sep {
  margin: 0 0.25rem;
  color: #666;
}

/* Make tab content visible on load if active_tab is preassigned */
.usp-login .tab_content:not([style*="display: none"]) {
  display: block;
}

/* Responsive Fix */
@media (max-width: 480px) {
  .usp-login {
    padding: 1rem;
  }
  .tabs_login li a {
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
  }
}