/* ============================================
   Onsen Signup Page Styles
   ============================================ */

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page container with gradient background */
.page-container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #FCC9B9 0%, #F5F0E8 30%, #ABDBD8 60%, #DCD0EA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* Decorative background icons */
.bg-icon {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* Top left cluster */
.bg-icon-1 {
  top: 6%;
  left: 8%;
  font-size: 8rem;
  opacity: 0.08;
  transform: rotate(-15deg);
}

.bg-icon-2 {
  top: 18%;
  left: 3%;
  font-size: 6.5rem;
  opacity: 0.06;
  transform: rotate(8deg);
}

.bg-icon-3 {
  top: 3%;
  left: 20%;
  font-size: 5.5rem;
  opacity: 0.07;
}

/* Top right cluster */
.bg-icon-4 {
  top: 10%;
  right: 6%;
  font-size: 7.5rem;
  opacity: 0.08;
  transform: rotate(20deg);
}

.bg-icon-5 {
  top: 4%;
  right: 18%;
  font-size: 6rem;
  opacity: 0.06;
  transform: rotate(-12deg);
}

.bg-icon-6 {
  top: 22%;
  right: 10%;
  font-size: 5rem;
  opacity: 0.07;
}

/* Bottom left cluster */
.bg-icon-7 {
  bottom: 18%;
  left: 4%;
  font-size: 5.5rem;
  opacity: 0.06;
  transform: rotate(-8deg);
}

.bg-icon-8 {
  bottom: 6%;
  left: 16%;
  font-size: 6.5rem;
  opacity: 0.07;
}

/* Bottom right cluster */
.bg-icon-9 {
  bottom: 8%;
  right: 6%;
  font-size: 7rem;
  opacity: 0.08;
  transform: rotate(-18deg);
}

.bg-icon-10 {
  bottom: 4%;
  right: 20%;
  font-size: 6rem;
  opacity: 0.06;
  transform: rotate(10deg);
}

.bg-icon-11 {
  bottom: 20%;
  right: 12%;
  font-size: 5.2rem;
  opacity: 0.07;
}

/* Middle scattered icons */
.bg-icon-12 {
  top: 38%;
  left: 5%;
  font-size: 6rem;
  opacity: 0.05;
  transform: rotate(-25deg);
}

.bg-icon-13 {
  top: 52%;
  right: 4%;
  font-size: 6.5rem;
  opacity: 0.05;
  transform: rotate(22deg);
}

.bg-icon-14 {
  top: 32%;
  right: 24%;
  font-size: 5rem;
  opacity: 0.04;
}

/* Main signup card */
.signup-card {
  background-color: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.12);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

/* Logo */
.logo-container {
  text-align: center;
  margin-bottom: 2rem;
}

.logo {
  height: 56px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(67%) sepia(18%) saturate(1089%) hue-rotate(259deg) brightness(91%) contrast(88%);
}

/* Heading section */
.heading-container {
  text-align: center;
  margin-bottom: 2rem;
}

.heading {
  font-size: 1.75rem;
  font-weight: 600;
  color: #2C2C2C;
  margin: 0 0 0.5rem 0;
}

.subheading {
  font-size: 0.9375rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* Form styles */
.signup-form {
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group-password {
  margin-bottom: 0.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4A4A4A;
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  border: 2px solid #E8E0E8;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

.form-input:focus {
  border-color: #C8B8D8;
}

/* Forgot password link */
.forgot-password-container {
  text-align: right;
  margin-bottom: 1.25rem;
}

.forgot-password-link {
  font-size: 0.8125rem;
  color: #999;
  text-decoration: none;
  font-weight: 400;
}

.forgot-password-link:hover {
  color: #666;
  text-decoration: underline;
}

/* Primary signup button */
.btn-primary {
  width: 100%;
  padding: 0.875rem;
  background-color: #8B6FB3;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-primary:hover {
  background-color: #7A5E9F;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 111, 179, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Divider */
.divider-container {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  gap: 1rem;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
}

.divider-text {
  font-size: 0.8125rem;
  color: #999;
  font-weight: 500;
}

/* OAuth buttons (anchor tags styled as buttons) */
.btn-oauth {
  width: 100%;
  padding: 0.75rem;
  background-color: #FFFFFF;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-decoration: none;
}

.btn-oauth:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-oauth:active {
  transform: translateY(0);
}

/* Google button specific styles */
.btn-google {
  color: #3C4043;
  border: 1px solid #DADCE0;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

/* Microsoft button specific styles */
.btn-microsoft {
  color: #5E5E5E;
  border: 1px solid #8C8C8C;
  font-weight: 600;
}

/* Disabled / coming-soon provider tile (Microsoft identity SSO, backlog #8) */
.integration-panel-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.integration-panel-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Session-expired resume banner (login.html, when ?next= is present) */
.resume-banner {
  color: #B45309;
}

/* Footer text */
.footer-text {
  text-align: center;
  font-size: 0.8125rem;
  color: #999;
  margin-top: 1.5rem;
  line-height: 1.5;
}

.signin-link {
  color: #C8B8D8;
  font-weight: 500;
  text-decoration: none;
}

.signin-link:hover {
  text-decoration: underline;
}

/* Bottom tagline — sits just under the signup card, above the legal footer */
.tagline {
  position: absolute;
  bottom: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(44, 44, 44, 0.6);
  font-size: 0.8125rem;
  font-weight: 300;
  z-index: 0;
}

/* Legal footer — small muted-text row pinned to the bottom of the page */
.legal-footer {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(44, 44, 44, 0.5);
  z-index: 0;
  white-space: nowrap;
}

.legal-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.legal-link:hover {
  color: rgba(44, 44, 44, 0.85);
  text-decoration: underline;
}

.legal-sep {
  color: rgba(44, 44, 44, 0.35);
  user-select: none;
}

/* Responsive design */
@media (max-width: 640px) {
  .page-container {
    padding: 1rem;
  }

  .signup-card {
    padding: 2rem 1.5rem;
  }

  .heading {
    font-size: 1.5rem;
  }

  .subheading {
    font-size: 0.875rem;
  }

  /* Scale down background icons on mobile */
  .bg-icon-1 { font-size: 5rem; }
  .bg-icon-2 { font-size: 4rem; }
  .bg-icon-3 { font-size: 3.5rem; }
  .bg-icon-4 { font-size: 5rem; }
  .bg-icon-5 { font-size: 4rem; }
  .bg-icon-6 { font-size: 3.5rem; }
  .bg-icon-7 { font-size: 3.5rem; }
  .bg-icon-8 { font-size: 4rem; }
  .bg-icon-9 { font-size: 4.5rem; }
  .bg-icon-10 { font-size: 4rem; }
  .bg-icon-11 { font-size: 3.5rem; }
  .bg-icon-12 { font-size: 4rem; }
  .bg-icon-13 { font-size: 4rem; }
  .bg-icon-14 { font-size: 3.5rem; }

  .tagline {
    bottom: 3.25rem;
    font-size: 0.75rem;
  }

  .legal-footer {
    bottom: 0.75rem;
    gap: 0.375rem;
    font-size: 0.6875rem;
  }
}