/* SaaS Submit & Review – Frontend CSS v1.0 */
:root {
  --ssf-p:      #2563EB;
  --ssf-pd:     #1D4ED8;
  --ssf-ok:     #10B981;
  --ssf-warn:   #F59E0B;
  --ssf-err:    #EF4444;
  --ssf-g100:   #F3F4F6;
  --ssf-g200:   #E5E7EB;
  --ssf-g400:   #9CA3AF;
  --ssf-g600:   #4B5563;
  --ssf-text:   #111827;
  --ssf-font:   'Inter', -apple-system, sans-serif;
  --ssf-r:      12px;
  --ssf-r-sm:   8px;
  --ssf-sh:     0 2px 8px rgba(0,0,0,.08);
  --ssf-tr:     all .22s ease;
}

.ssf-wrap * { box-sizing: border-box; }
.ssf-wrap {
  font-family: var(--ssf-font);
  color: var(--ssf-text);
  max-width: 760px;
  margin: 0 auto;
  padding: 0 4px;
}

/* Header */
.ssf-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  border-radius: var(--ssf-r);
  padding: 28px 24px;
  color: #fff;
  margin-bottom: 24px;
}
.ssf-header__icon { font-size: 2.5rem; line-height: 1; flex-shrink: 0; }
.ssf-header__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; color: #fff; }
.ssf-header__sub { font-size: .88rem; opacity: .85; margin: 0; }

/* Section */
.ssf-section {
  background: #fff;
  border: 1.5px solid var(--ssf-g200);
  border-radius: var(--ssf-r);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--ssf-sh);
}
.ssf-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ssf-g200);
}
.ssf-section__head h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.ssf-section__num {
  width: 28px; height: 28px;
  background: var(--ssf-p);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Grid */
.ssf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) { .ssf-grid-2 { grid-template-columns: 1fr; } }

/* Field */
.ssf-field { margin-bottom: 14px; }
.ssf-field:last-child { margin-bottom: 0; }
.ssf-field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ssf-g600);
  margin-bottom: 5px;
}
.ssf-field label em { color: var(--ssf-err); font-style: normal; }
.ssf-field input[type="text"],
.ssf-field input[type="email"],
.ssf-field input[type="url"],
.ssf-field input[type="tel"],
.ssf-field select,
.ssf-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--ssf-g200);
  border-radius: var(--ssf-r-sm);
  font-family: var(--ssf-font);
  font-size: .88rem;
  color: var(--ssf-text);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ssf-field input:focus,
.ssf-field select:focus,
.ssf-field textarea:focus {
  border-color: var(--ssf-p);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.ssf-field textarea { resize: vertical; line-height: 1.6; }
.ssf-field small { font-size: .75rem; color: var(--ssf-g400); margin-top: 4px; display: block; }

/* Logo upload */
.ssf-field--logo { margin-bottom: 14px; }
.ssf-upload-zone {
  border: 2px dashed var(--ssf-g200);
  border-radius: var(--ssf-r);
  background: var(--ssf-g100);
  position: relative;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  overflow: hidden;
}
.ssf-upload-zone:hover { border-color: var(--ssf-p); background: #EFF6FF; }
.ssf-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ssf-g400);
  font-size: .85rem;
  text-align: center;
  pointer-events: none;
  padding: 20px;
}
.ssf-upload-placeholder svg { opacity: .5; }
.ssf-upload-placeholder u { color: var(--ssf-p); }
.ssf-upload-placeholder small { font-size: .72rem; }
.ssf-upload-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  width: 100%;
}
.ssf-upload-preview img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.ssf-upload-remove {
  background: var(--ssf-err);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px; height: 24px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Notice */
.ssf-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--ssf-r-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .85rem;
  color: #92400E;
}
.ssf-notice p { margin: 0; }

/* Message */
.ssf-message {
  padding: 14px 16px;
  border-radius: var(--ssf-r-sm);
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: 16px;
}
.ssf-message--success { background: #D1FAE5; border: 1px solid #6EE7B7; color: #065F46; }
.ssf-message--error   { background: #FEE2E2; border: 1px solid #FCA5A5; color: #991B1B; }

/* Submit row */
.ssf-submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ssf-terms { font-size: .75rem; color: var(--ssf-g400); margin: 0; }
.ssf-terms a { color: var(--ssf-p); }

/* Buttons */
.ssf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--ssf-r-sm);
  font-family: var(--ssf-font);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: var(--ssf-tr);
  white-space: nowrap;
}
.ssf-btn--primary { background: var(--ssf-p); color: #fff; }
.ssf-btn--primary:hover { background: var(--ssf-pd); }
.ssf-btn--outline { background: transparent; color: var(--ssf-p); border: 1.5px solid var(--ssf-p); }
.ssf-btn--outline:hover { background: var(--ssf-p); color: #fff; }
.ssf-btn--lg { padding: 13px 28px; font-size: .95rem; }
.ssf-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Success screen */
.ssf-success-screen {
  text-align: center;
  padding: 60px 24px;
  background: #fff;
  border-radius: var(--ssf-r);
  border: 1.5px solid var(--ssf-g200);
  box-shadow: var(--ssf-sh);
}
.ssf-success-icon { font-size: 4rem; margin-bottom: 16px; }
.ssf-success-screen h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; }
.ssf-success-screen p { color: var(--ssf-g600); margin: 0 0 24px; max-width: 400px; margin-left: auto; margin-right: auto; }

/* Login notice */
.ssf-login-notice {
  text-align: center;
  padding: 56px 24px;
  background: #fff;
  border-radius: var(--ssf-r);
  border: 1.5px solid var(--ssf-g200);
}
.ssf-login-icon { font-size: 3rem; margin-bottom: 16px; }
.ssf-login-notice h3 { font-size: 1.2rem; margin: 0 0 10px; }
.ssf-login-notice p { color: var(--ssf-g600); margin: 0 0 20px; }

/* ============================================================
   REVIEWS
   ============================================================ */
.ssf-reviews { font-family: var(--ssf-font); }

/* Summary */
.ssf-reviews__summary {
  display: flex;
  gap: 24px;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--ssf-g200);
  border-radius: var(--ssf-r);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--ssf-sh);
  flex-wrap: wrap;
}
.ssf-reviews__avg { text-align: center; flex-shrink: 0; }
.ssf-reviews__avg-num { font-size: 3rem; font-weight: 700; color: var(--ssf-text); line-height: 1; }
.ssf-reviews__stars { color: #F59E0B; font-size: 1.1rem; letter-spacing: 2px; margin: 4px 0; }
.ssf-reviews__count { font-size: .78rem; color: var(--ssf-g400); }
.ssf-reviews__bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.ssf-reviews__bar-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ssf-g600); }
.ssf-reviews__bar-row span:first-child { width: 20px; text-align: right; }
.ssf-reviews__bar-row span:last-child  { width: 20px; }
.ssf-reviews__bar { flex: 1; height: 8px; background: var(--ssf-g200); border-radius: 50px; overflow: hidden; }
.ssf-reviews__bar-fill { height: 100%; background: #F59E0B; border-radius: 50px; transition: width .4s ease; }

/* Review list */
.ssf-reviews__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.ssf-reviews__empty { text-align: center; padding: 32px; color: var(--ssf-g400); font-size: .9rem; background: var(--ssf-g100); border-radius: var(--ssf-r); }

.ssf-review-item {
  background: #fff;
  border: 1.5px solid var(--ssf-g200);
  border-radius: var(--ssf-r-sm);
  padding: 16px;
  box-shadow: var(--ssf-sh);
}
.ssf-review-item__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ssf-review-item__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ssf-p);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ssf-review-item__info { flex: 1; }
.ssf-review-item__info strong { display: block; font-size: .88rem; font-weight: 600; }
.ssf-review-item__info span { font-size: .78rem; color: var(--ssf-g400); }
.ssf-review-item__rating { margin-left: auto; text-align: right; }
.ssf-stars { color: #F59E0B; font-size: .88rem; letter-spacing: 1px; }
.ssf-review-date { display: block; font-size: .72rem; color: var(--ssf-g400); margin-top: 2px; }
.ssf-review-item__content { font-size: .875rem; color: var(--ssf-g600); margin: 0; line-height: 1.6; }

/* Write review */
.ssf-write-review {
  background: #F9FAFB;
  border: 1.5px solid var(--ssf-g200);
  border-radius: var(--ssf-r);
  padding: 20px;
}
.ssf-write-review__title { font-size: .95rem; font-weight: 600; margin: 0 0 14px; }

/* Star picker */
.ssf-star-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.ssf-star-picker .ssf-star {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--ssf-g200);
  cursor: pointer;
  padding: 0;
  transition: color .15s;
  line-height: 1;
}
.ssf-star-picker .ssf-star:hover,
.ssf-star-picker .ssf-star:hover ~ .ssf-star,
.ssf-star-picker .ssf-star.active,
.ssf-star-picker .ssf-star.active ~ .ssf-star {
  color: #F59E0B;
}
.ssf-star-label { font-size: .8rem; color: var(--ssf-g400); margin-left: 8px; }

.ssf-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 600px) { .ssf-review-grid { grid-template-columns: 1fr; } }
.ssf-review-grid input {
  padding: 9px 12px;
  border: 1.5px solid var(--ssf-g200);
  border-radius: var(--ssf-r-sm);
  font-family: var(--ssf-font);
  font-size: .85rem;
  outline: none;
  width: 100%;
  transition: border-color .2s;
}
.ssf-review-grid input:focus { border-color: var(--ssf-p); }
.ssf-review-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--ssf-g200);
  border-radius: var(--ssf-r-sm);
  font-family: var(--ssf-font);
  font-size: .85rem;
  resize: vertical;
  outline: none;
  margin-bottom: 10px;
  transition: border-color .2s;
  line-height: 1.5;
}
.ssf-review-form textarea:focus { border-color: var(--ssf-p); }
.ssf-review-form__foot { display: flex; align-items: center; gap: 12px; }
.ssf-review-msg { font-size: .82rem; font-weight: 500; }