/* ============================================
   Signup Modal
   ============================================ */
.signup-modal {
  width: 100%;
  max-width: 100%;
  margin: 50px auto;
  background: var(--color-bg-white);
  border-radius: 12px; /* var(--radius-xl, 12px) */
  box-shadow: 
    0px 20px 24px -4px rgba(10, 13, 18, 0.08),
    0px 8px 8px -4px rgba(10, 13, 18, 0.03),
    0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* ============================================
   Signup Header
   ============================================ */
.signup-header {
  width: 100%;
  flex-shrink: 0;
}

.signup-header-content {
  display: flex;
  flex-direction: column;
  gap: 4px; /* var(--spacing-xs, 4px) */
  align-items: flex-start;
  padding: 24px 24px 0 24px; /* var(--spacing-3xl, 24px) */
  text-align: right;
}

.signup-title {
  font-family: var(--font-secondary);
  font-size: 18px; /* var(--font-size/text-lg, 18px) */
  line-height: 28px; /* var(--line-height/text-lg, 28px) */
  font-weight: normal;
  color: #181d27; /* var(--colors/text/text-primary-(900), #181d27) */
  margin: 0;
}

.signup-subtitle {
  font-size: 14px; /* var(--font-size/text-sm, 14px) */
  line-height: 20px; /* var(--line-height/text-sm, 20px) */
  font-weight: normal;
  color: #535862; /* var(--colors/text/text-tertiary-(600), #535862) */
  margin: 0;
}

/* Padding bottom for header */
.signup-header::after {
  content: '';
  display: block;
  height: 20px;
  width: 100%;
  flex-shrink: 0;
}

/* ============================================
   Signup Form
   ============================================ */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 16px; /* var(--spacing-xl, 16px) */
  align-items: flex-end;
  padding: 0 24px; /* var(--spacing-3xl, 24px) */
  width: 100%;
  flex-shrink: 0;
  text-align: right;
}

/* ============================================
   Form Field
   ============================================ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px; /* var(--spacing-sm, 6px) */
  align-items: flex-end;
  width: 100%;
  flex-shrink: 0;
}

.form-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px; /* var(--spacing-sm, 6px) */
  align-items: flex-end;
  width: 100%;
  text-align: right;
}

/* ============================================
   Form Label
   ============================================ */
.form-label {
  display: flex;
  gap: 2px; /* var(--spacing-xxs, 2px) */
  align-items: flex-start;
  flex-shrink: 0;
  text-align: right;
  justify-content: flex-end;
  align-self: flex-end;
  margin-left: auto;
  width: auto;
}

.form-label span {
  font-family: var(--font-secondary);
  font-size: 14px; /* var(--font-size/text-sm, 14px) */
  line-height: 20px; /* var(--line-height/text-sm, 20px) */
  font-weight: normal;
  color: #414651; /* var(--colors/text/text-secondary-(700), #414651) */
  white-space: nowrap;
  text-align: right;
  display: inline-block;
  direction: rtl;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
}

/* ============================================
   Form Input Container
   ============================================ */
.form-input-container {
  width: 100%;
  flex-shrink: 0;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-bg-white);
  border: 1px solid #d5d7da; /* var(--colors/border/border-primary, #d5d7da) */
  border-radius: 8px; /* var(--radius-md, 8px) */
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05); /* var(--shadow-xs) */
  font-family: var(--font-primary);
  /*font-size: 16px;*/
  line-height: 24px; /* var(--line-height/text-md, 24px) */
  font-weight: normal;
  color: var(--color-text-primary);
  text-align: right;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input::placeholder {
  color: #717680; /* var(--colors/text/text-placeholder, #717680) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(1, 145, 71, 0.1);
}

/* ============================================
   Form Select Container
   ============================================ */
/* Select styles moved to shared_css/select.css */

/* ============================================
   Modal Actions
   ============================================ */
.signup-actions {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 0 0 0; /* var(--spacing-4xl, 32px) */
}

.signup-actions-content {
  display: flex;
  flex-direction: column;
  gap: 12px; /* var(--spacing-lg, 12px) */
  align-items: flex-start;
  padding: 0 24px 24px 24px; /* var(--spacing-3xl, 24px) */
  width: 100%;
}

/* ============================================
   Signup Button
   ============================================ */
.signup-button {
  width: 100%;
  padding: 10px 16px; /* var(--spacing-xl, 16px) */
  background: var(--color-button-primary);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px; /* var(--radius-md, 8px) */
  box-shadow: 
    0px 1px 2px 0px rgba(10, 13, 18, 0.05), /* var(--shadow-xs) */
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), /* var(--shadow-skeumorphic-inner-border) */
    inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05); /* var(--shadow-skeumorphic-inner) */
  font-family: var(--font-primary);
  font-size: 16px; /* var(--font-size/text-md, 16px) */
  line-height: 24px; /* var(--line-height/text-md, 24px) */
  font-weight: normal;
  color: white; /* var(--component-colors/components/buttons/primary/button-primary-fg, white) */
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  text-align: center;
  white-space: nowrap;
  position: relative;
}

.signup-button::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
  border-radius: 8px;
}

.signup-button:hover {
  background: var(--color-success-700);
  transform: translateY(-1px);
}

.signup-button:active {
  transform: translateY(0);
}

/* ============================================
   Login Link
   ============================================ */
.signup-login-text {
  font-family: var(--font-primary);
  font-size: 14px; /* var(--font-size/text-sm, 14px) */
  line-height: 20px;
  font-weight: normal;
  color: #535862; /* var(--colors/text/text-tertiary-(600), #535862) */
  text-align: center;
  width: 100%;
  margin: 0;
}

.signup-login-link-text {
  color: #079455; /* var(--component-colors/utility/success/utility-success-600, #079455) */
  text-decoration: none;
  transition: color 0.2s;
}

.signup-login-link-text:hover {
  color: var(--color-success-700);
  text-decoration: underline;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
  body {
    /*padding: var(--spacing-lg);*/
  }

  .signup-modal {
    max-width: 100%;
  }

  .signup-header-content,
  .signup-form,
  .signup-actions-content {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}