/* =============================================================================
   PSB‐STYLES.CSS  (Prompto Social Signup plugin)
   -----------------------------------------------------------------------------
   • Restored “brand card” styling so each brand is inside its own rounded box
   • Kept “+ Add New Brand” as a green text link
   • Made “Go to Social Bot” a black button with white text
   • Added extra vertical margin around brand‐card area
   -----------------------------------------------------------------------------
   Place this file at:
     wp-content/plugins/prompto-social-signup/psb-styles.css
   =============================================================================
*/


/* ─────────────────────────────────────────────────────────────────────────────
   1. GLOBAL RESET & BASE RULES
   ----------------------------------------------------------------------------- */

/* Box‐sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margins/paddings */
body, h1, h2, h3, p, ul, ol, li, figure {
  margin: 0;
  padding: 0;
}

/* Base body */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
  background-color: #f8f9fa; /* light gray behind containers */
}

/* Links */
a {
  color: #88cc00; /* green accent */
  text-decoration: none;
}

a:hover {
  color: #6ba600; /* darker green on hover */
  text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. FORM CONTAINERS (Login / Register / Edit Profile)
   ----------------------------------------------------------------------------- */

/* Common form wrapper */
.psb-form-container {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-width: 500px;
  margin: 32px auto;
  padding: 32px 24px;
}

/* Form heading */
.psb-form-container h2 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  font-weight: 600;
  color: #1a1a1a;
}

/* Form labels */
.psb-form-container label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
}

/* Text inputs & password fields */
.psb-form-container input[type="text"],
.psb-form-container input[type="email"],
.psb-form-container input[type="password"],
.psb-form-container input[type="url"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background-color: #f1f3f5;
  margin-bottom: 16px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.psb-form-container input[type="text"]:focus,
.psb-form-container input[type="email"]:focus,
.psb-form-container input[type="password"]:focus,
.psb-form-container input[type="url"]:focus {
  outline: none;
  border-color: #88cc00;
  background-color: #ffffff;
}

/* “Remember Me” checkbox */
.psb-form-container .psb-checkbox-label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  font-weight: 500;
  cursor: pointer;
}

.psb-form-container .psb-checkbox-label input[type="checkbox"] {
  margin-right: 8px;
}

/* Error message */
.psb-form-container .psb-form-error {
  color: #d9534f; /* bootstrap-red */
  font-size: 0.875rem;
  margin-bottom: 16px;
}

/* Submit buttons */
.psb-form-container .psb-button {
  width: 100%;
  display: block;
  background-color: #000000;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 14px 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.psb-form-container .psb-button:hover {
  background-color: #333333;
}

/* Link under form (e.g. “Don’t have an account? Register here.”) */
.psb-form-container .psb-toggle-link {
  margin-top: 16px;
  font-size: 0.95rem;
  text-align: center;
}

.psb-form-container .psb-toggle-link a {
  font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. DASHBOARD CONTAINER & HEADINGS
   ----------------------------------------------------------------------------- */

.psb-dashboard-container {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-width: 800px;
  margin: 32px auto 16px auto; /* extra bottom spacing */
  padding: 32px 24px;
}

.psb-dashboard-container .psb-dashboard-heading {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 24px;
  color: #1a1a1a;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. “Your Brands” CARDS
   ----------------------------------------------------------------------------- */

/* Wrapper to push the brand cards a bit down */
.psb-brands-wrapper {
  margin-top: 24px;
}

/* Each brand card */
.psb-brand-card {
  background: #ffffff;
  border: 1px solid #e1e3e5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 20px 24px;
  margin-bottom: 24px; /* space between cards */
}

/* Brand header (title + edit link) */
.psb-brand-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.psb-brand-card__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a1a1a;
}

.psb-brand-card__edit-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: #88cc00;
  text-decoration: none;
}

.psb-brand-card__edit-link:hover {
  color: #6ba600;
  text-decoration: underline;
}

/* Brand‐field container */
.psb-brand-card__body {
  margin-top: 4px;
}

/* Individual field row: normal-weight label + green value */
.psb-brand-field {
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: #2c2c2c;
}

.psb-brand-field strong {
  font-weight: 400; /* normal weight */
  margin-right: 6px;
}

/* Sub‐labels (e.g. “Website:”) */
.psb-brand-field label {
  color: #1a1a1a;
}

/* Actual link/text value (green) */
.psb-brand-field .psb-brand-value {
  color: #88cc00;
  font-weight: 500;
}

.psb-brand-field .psb-brand-value:hover {
  color: #6ba600;
}


/* “No Brands Yet” message (if user has zero brands) */
.psb-no-brands-message {
  font-size: 1rem;
  color: #555555;
  margin-bottom: 24px;
  text-align: center;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. “+ Add New Brand” GREEN LINK
   ----------------------------------------------------------------------------- */

.psb-add-brand-wrapper {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 24px;
}

.psb-add-brand-link {
  font-size: 1rem;
  font-weight: 500;
  color: #88cc00;         /* green accent */
  text-decoration: none;
  transition: color 0.2s ease;
}

.psb-add-brand-link:hover {
  color: #6ba600; /* slightly darker green */
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. “Go to Social Bot” BLACK BUTTON WITH WHITE TEXT
   ----------------------------------------------------------------------------- */

.psb-social-bot-wrapper {
  text-align: center;
  margin-top: 16px;
}

.psb-social-bot-button {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;         /* white text */
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 0;
  width: 100%;
  max-width: 280px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.psb-social-bot-button:hover {
  background-color: #333333;
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. EDIT PROFILE FORM STYLES (reuse from Section 2)
   ----------------------------------------------------------------------------- */
/* (No changes here—same as login/register forms.) */


/* ─────────────────────────────────────────────────────────────────────────────
   8. GENERAL MOBILE / RESPONSIVE TWEAKS
   ----------------------------------------------------------------------------- */

/* On small screens, reduce padding inside containers */
@media (max-width: 480px) {
  .psb-form-container {
    padding: 24px 16px;
  }
  .psb-dashboard-container {
    padding: 24px 16px;
  }
  .psb-brand-card {
    padding: 16px 16px;
  }
}

/* Slightly smaller text on very narrow phones */
@media (max-width: 360px) {
  .psb-brand-card__title {
    font-size: 1rem;
  }
  .psb-brand-field {
    font-size: 0.9rem;
  }
}

/* Ensure “Go to Social Bot” button never overflows */
.psb-social-bot-button {
  max-width: 100%;
}

.psb-social-bot-button {
    
    color: white!important;
    font-weight: 400;
    font-size: 0.9rem;

}

/* Temporary notice at top of dashboard */
.psb-temp-notice {
  background: #e6f6ea;
  border: 1px solid #88cc00;
  color: #225522;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
  margin-bottom: 16px;
  display: inline-block;
}

/* Fade-out animation */
@keyframes psb-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.psb-fade-out {
  animation: psb-fadeout 1s ease-in-out forwards;
  animation-delay: 3s;
}

.psb-success-message,
.psb-temp-notice {
  background: #e6ffed;
  border-left: 4px solid #2ea44f;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  font-weight: 500;
}

@keyframes psb-fadeout {
  to { opacity: 0; }
}
.psb-fade-out {
  animation: psb-fadeout 0.6s ease-out forwards;
  animation-delay: 3s;
}

/* Back-link styling (unchanged) */
.psb-back-link {
  margin-top: 1.5em;
  text-align: left;
}
.psb-back-link a {
  color: #4a90e2;
  text-decoration: none;
  font-size: 0.9rem;
}
.psb-back-link a:hover {
  text-decoration: underline;
}

/* ================================
   Brand Form Styling (psb-form-wrapper)
   ================================ */

/* Wrapper */
.psb-form-wrapper {
  max-width: 600px;
  margin: 0 auto 2em;
  padding: 1.5em;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: inherit;
}

/* Field groups */
.psb-form-wrapper .psb-field-group {
  margin-bottom: 1.2em;
}

/* Labels */
.psb-form-wrapper label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25em;
  color: #333;
}

/* Inputs */
.psb-form-wrapper input[type="text"],
.psb-form-wrapper input[type="url"] {
  width: 100%;
  padding: 0.6em 0.8em;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Submit button wrapper */
.psb-form-wrapper .psb-submit-group {
  margin-bottom: 1em;
}

/* Button */
.psb-form-wrapper button[type="submit"] {
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  padding: 1em;
  text-align: center;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.psb-form-wrapper button[type="submit"]:hover {
  background: #222;
}

/* Back link */
.psb-form-wrapper .psb-back-link {
  margin-top: 0.5em;
  text-align: left;
}
.psb-form-wrapper .psb-back-link a {
  color: #4a90e2;
  text-decoration: none;
  font-size: 0.9rem;
}
.psb-form-wrapper .psb-back-link a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   END OF PSB-STYLES.CSS
   ============================================================================= */