/* =============================================
   The Produser — Modulo di registrazione
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Reset scoped ── */
.rr-wrapper,
.rr-wrapper * {
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

/* ── Contenitore pagina ── */
.rr-wrapper {
  background: #fff !important;
  color: #000 !important;
  padding: 48px 16px !important;
  display: flex !important;
  justify-content: center !important;
  animation: rr-fadein 0.4s ease both;
}

@keyframes rr-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card ── */
.rr-card {
  background: #fff !important;
  color: #000 !important;
  width: 100% !important;
  max-width: 520px !important;
  border: 1.5px solid #000 !important;
  box-shadow: none !important;
}

/* ── Header card (nero come thead tabella) ── */
.rr-header {
  background: #000 !important;
  padding: 20px 24px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.rr-logo-icon { display: none !important; }
.rr-subtitle  { display: none !important; }

.rr-brand {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 2.8rem !important;
  letter-spacing: 4px !important;
  color: #fff !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  display: block !important;
  background: none !important;
}

.rr-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ── Corpo del form ── */
#rr-form {
  background: #fff !important;
  padding: 28px 24px !important;
}

/* ── Referral badge ── */
.rr-referral-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f5f5f5 !important;
  border: 1.5px solid #000 !important;
  padding: 10px 14px !important;
  font-size: 0.68rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin-bottom: 24px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.rr-referral-badge svg { display: none !important; }

/* ── Campi ── */
.rr-field {
  margin-bottom: 20px !important;
  background: none !important;
}

.rr-field > label:not(.rr-checkbox-label),
.rr-field label:not(.rr-checkbox-label) {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* ── Input wrapper ── */
.rr-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: none !important;
}

.rr-input-icon { display: none !important; }

/* ── Input ── */
.rr-wrapper input[type="email"],
.rr-wrapper input[type="password"],
.rr-wrapper input[type="text"] {
  width: 100% !important;
  background: #fff !important;
  border: 1.5px solid #000 !important;
  border-radius: 0 !important;
  color: #000 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  padding: 13px 44px 13px 14px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  height: auto !important;
  line-height: normal !important;
}

.rr-wrapper input[type="email"]:focus,
.rr-wrapper input[type="password"]:focus,
.rr-wrapper input[type="text"]:focus {
  background: #fafafa !important;
  border-color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
}

.rr-wrapper input::placeholder {
  color: #bbb !important;
  font-weight: 300 !important;
}

/* ── Toggle password ── */
.rr-toggle-pwd {
  position: absolute !important;
  right: 12px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: #999 !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.15s;
}
.rr-toggle-pwd:hover { color: #000 !important; }

/* ── Forza password ── */
.rr-pwd-strength {
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  opacity: 0;
  transition: opacity 0.15s;
  background: none !important;
}
.rr-pwd-strength.visible { opacity: 1 !important; }

.rr-pwd-bar {
  flex: 1 !important;
  height: 2px !important;
  background: #e8e8e8 !important;
  overflow: hidden !important;
}
.rr-pwd-bar span {
  display: block !important;
  height: 100% !important;
  width: 0;
  transition: width 0.3s ease, background 0.3s ease;
}
.rr-pwd-strength small {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  min-width: 72px !important;
  background: none !important;
}

/* ── Select ── */
.rr-select-wrapper {
  position: relative !important;
  background: none !important;
}

.rr-wrapper select {
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff !important;
  border: 1.5px solid #000 !important;
  border-radius: 0 !important;
  color: #000 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  padding: 13px 44px 13px 14px !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: normal !important;
}

.rr-wrapper select:focus {
  background: #fafafa !important;
  box-shadow: none !important;
  outline: none !important;
}

.rr-select-arrow {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #000 !important;
  pointer-events: none !important;
  background: none !important;
}

/* ── Checkbox privacy ── */
.rr-privacy-field { margin-top: 8px !important; }

.rr-recaptcha-field {
  margin-top: 16px !important;
  display: flex !important;
  justify-content: center !important;
}

.rr-checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: #555 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.rr-checkbox-label input[type="checkbox"] {
  display: none !important;
}

.rr-checkbox-custom {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-top: 2px !important;
  background: #fff !important;
  border: 1.5px solid #000 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.15s;
}

.rr-checkbox-label:has(input:checked) .rr-checkbox-custom {
  background: #000 !important;
  border-color: #000 !important;
}

.rr-checkbox-label:has(input:checked) .rr-checkbox-custom::after {
  content: '' !important;
  width: 4px !important;
  height: 8px !important;
  border: 1.5px solid #fff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) translateY(-1px) !important;
  display: block !important;
}

.rr-checkbox-label a {
  color: #000 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ── Bottone submit ── */
.rr-wrapper .rr-submit,
.rr-wrapper button[type="submit"] {
  width: 100% !important;
  margin-top: 14px !important;
  background: #000 !important;
  color: #fff !important;
  border: 1.5px solid #000 !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 16px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  height: auto !important;
  line-height: normal !important;
}

.rr-wrapper .rr-submit:hover:not(:disabled) {
  background: #fff !important;
  color: #000 !important;
}

.rr-wrapper .rr-submit:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* ── Loader ── */
.rr-btn-loader {
  display: none !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: rr-spin 0.7s linear infinite;
  flex-shrink: 0 !important;
}

.rr-submit.loading .rr-btn-text   { display: none !important; }
.rr-submit.loading .rr-btn-loader { display: block !important; }

@keyframes rr-spin { to { transform: rotate(360deg); } }

/* ── Feedback ── */
.rr-feedback {
  margin: 0 24px !important;
  font-size: 0.85rem !important;
  overflow: hidden !important;
  max-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.rr-feedback.visible {
  max-height: 320px !important;
  padding: 16px !important;
}

.rr-feedback.success {
  background: #fff !important;
  border: none !important;
  color: #000 !important;
}

.rr-feedback.error {
  background: #fff !important;
  border: 1.5px solid #cc0000 !important;
  color: #cc0000 !important;
}

.rr-feedback .rr-ref-display {
  margin-top: 14px !important;
  background: #f5f5f5 !important;
  border: 1.5px solid #000 !important;
  padding: 14px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.6rem !important;
  letter-spacing: 6px !important;
  text-align: center !important;
  color: #000 !important;
}

.rr-feedback .rr-ref-label {
  font-size: 0.62rem !important;
  color: #999 !important;
  text-align: center !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  display: block !important;
  background: none !important;
}

/* ── Helper text ── */
.rr-field-helper {
  display: block !important;
  margin-top: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 400 !important;
  color: #999 !important;
  letter-spacing: 0.5px !important;
  background: none !important;
}

/* ── Link di invito + condivisione social ── */
.rr-invite-block {
  margin-top: 16px !important;
  border-top: 1px solid #e8e8e8 !important;
  padding-top: 14px !important;
}

.rr-invite-label {
  display: block !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #999 !important;
  margin-bottom: 8px !important;
  background: none !important;
}

.rr-invite-link-row {
  display: flex !important;
  align-items: stretch !important;
  margin-bottom: 10px !important;
}

.rr-invite-url {
  flex: 1 !important;
  font-size: 0.75rem !important;
  font-family: 'Inter', monospace !important;
  color: #444 !important;
  background: #f5f5f5 !important;
  border: 1.5px solid #000 !important;
  border-right: none !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

.rr-copy-link {
  background: #000 !important;
  color: #fff !important;
  border: 1.5px solid #000 !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s !important;
}

.rr-copy-link:hover {
  background: #fff !important;
  color: #000 !important;
}

.rr-share-row {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.rr-share-btn {
  flex: 1 !important;
  min-width: 56px !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 9px 6px !important;
  border: 1.5px solid currentColor !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rr-share-mail { color: #555    !important; background: transparent !important; }
.rr-share-wa   { color: #25d366 !important; background: transparent !important; }
.rr-share-tg   { color: #2aabee !important; background: transparent !important; }

.rr-share-mail:hover { background: #555    !important; color: #fff !important; }
.rr-share-wa:hover   { background: #25d366 !important; color: #fff !important; }
.rr-share-tg:hover   { background: #2aabee !important; color: #fff !important; }

/* ── Area personale ── */
.rr-personal-card {
  max-width: 560px !important;
}

.rr-personal-body {
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.rr-personal-pending {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  color: #555 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  background: none !important;
}

/* Sezioni */
.rr-personal-section {
  padding: 20px 0 !important;
  border-bottom: 1px solid #e8e8e8 !important;
}
.rr-personal-section:last-child {
  border-bottom: none !important;
}

.rr-personal-section-profile {
  padding-top: 0 !important;
}

.rr-profile-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.rr-profile-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.rr-profile-row input {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1.5px solid #000 !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  color: #000 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.rr-profile-row input:focus {
  background: #fafafa !important;
  outline: none !important;
}

.rr-profile-save-btn {
  padding: 10px 16px !important;
  background: #000 !important;
  color: #fff !important;
  border: 1.5px solid #000 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.15s !important;
}

.rr-profile-save-btn:hover {
  background: #222 !important;
}

.rr-profile-feedback {
  font-size: 0.8rem !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
  border-radius: 0 !important;
  display: none !important;
}

.rr-profile-feedback.success {
  background: #d4edda !important;
  color: #155724 !important;
  border: 1px solid #c3e6cb !important;
  display: block !important;
}

.rr-profile-feedback.error {
  background: #f8d7da !important;
  color: #721c24 !important;
  border: 1px solid #f5c6cb !important;
  display: block !important;
}

.rr-personal-section-label {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #999 !important;
  margin-bottom: 12px !important;
  background: none !important;
}

/* Codice referral + copia */
.rr-personal-copy-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.rr-personal-code {
  flex: 1 !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.5rem !important;
  letter-spacing: 5px !important;
  color: #000 !important;
  background: #f5f5f5 !important;
  border: 1.5px solid #000 !important;
  padding: 10px 16px !important;
  display: block !important;
  line-height: 1 !important;
}

.rr-copy-btn {
  background: #000 !important;
  color: #fff !important;
  border: 1.5px solid #000 !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 0 18px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s !important;
}
.rr-copy-btn:hover {
  background: #fff !important;
  color: #000 !important;
}

.rr-copy-link-full {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 11px 0 !important;
  font-size: 0.62rem !important;
  text-align: center !important;
}

/* URL row */
.rr-personal-url-row {
  margin-bottom: 10px !important;
}

.rr-personal-url-text {
  flex: 1 !important;
  font-family: 'Inter', monospace !important;
  font-size: 0.75rem !important;
  color: #444 !important;
  background: #f5f5f5 !important;
  border: 1.5px solid #000 !important;
  border-right: none !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  line-height: normal !important;
}

/* Bottoni social */
.rr-personal-share-btns {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.rr-personal-share-btns .rr-share-btn {
  flex: 1 !important;
  min-width: 80px !important;
}

/* Stats grid */
.rr-personal-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border: 1.5px solid #000 !important;
  margin: 20px 0 !important;
}

.rr-personal-stat {
  padding: 20px !important;
  text-align: center !important;
  border-right: 1.5px solid #000 !important;
}
.rr-personal-stat:last-child {
  border-right: none !important;
}

.rr-personal-stat-value {
  display: block !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 2.8rem !important;
  letter-spacing: 3px !important;
  color: #000 !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  background: none !important;
}

.rr-personal-stat-label {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #999 !important;
  background: none !important;
}

/* Milestone */
.rr-milestone-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.rr-milestone-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  color: #aaa !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.rr-milestone-item.rr-milestone-achieved {
  color: #000 !important;
}

.rr-milestone-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border: 1.5px solid #ccc !important;
  font-size: 0.7rem !important;
  flex-shrink: 0 !important;
  color: #ccc !important;
  background: none !important;
}

.rr-milestone-achieved .rr-milestone-icon {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

.rr-milestone-progress {
  margin-top: 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  color: #666 !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Login required ── */
.rr-login-body {
  align-items: center !important;
  text-align: center !important;
  padding: 40px 24px !important;
  gap: 20px !important;
}

.rr-login-msg {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  color: #555 !important;
  margin: 0 !important;
  background: none !important;
}

.rr-login-btn {
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #fff !important;
  background: #000 !important;
  border: 1.5px solid #000 !important;
  padding: 12px 32px !important;
  transition: background 0.15s, color 0.15s !important;
}
.rr-login-btn:hover {
  background: #fff !important;
  color: #000 !important;
}

/* ── Logout ── */
.rr-personal-footer {
  padding: 16px 24px !important;
  border-top: 1.5px solid #000 !important;
  text-align: right !important;
  background: none !important;
}

.rr-logout-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #999 !important;
  text-decoration: none !important;
  border: 1.5px solid #ccc !important;
  padding: 8px 18px !important;
  display: inline-block !important;
  transition: color 0.15s, border-color 0.15s !important;
  background: none !important;
}
.rr-logout-btn:hover {
  color: #cc0000 !important;
  border-color: #cc0000 !important;
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .rr-wrapper { padding: 24px 12px !important; }
  .rr-brand   { font-size: 2.2rem !important; }
  #rr-form    { padding: 20px 16px !important; }
  .rr-feedback { margin: 0 16px !important; }
  .rr-personal-body { padding: 20px 16px !important; }
  .rr-personal-stats-grid { grid-template-columns: 1fr 1fr; }
}