/* Light Design - Purple/Blue Design (Default) */

/* ============================================
   BACKGROUND & LAYOUT
   ============================================ */

body {
  background: linear-gradient(135deg, #f5eefd 0%, #e2dcf1 50%, #e3edfc 100%) !important;
  min-height: 100vh;
  background-attachment: fixed;
}

.form-page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0rem 0;
}

/* ============================================
   HEADER & LOGO
   ============================================ */

.form-header-default {
  display: none !important;
}

.club-header-outside {
  display: block !important;
  text-align: center;
  margin-bottom: -70px;
  padding-top: 1rem;
  position: relative;
  z-index: 10;
}

.club-logo {
  background: #ffffff;
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.15);
  padding: 1.25rem;
  overflow: hidden;
}

.club-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.form-title {
  display: block !important;
  text-align: center;
  margin-bottom: 2rem;
}

.form-title h1 {
  font-weight: 600;
  font-size: 1.75rem;
  color: #2d2d2d;
  margin-bottom: 0.5rem;
}

.form-title p {
  color: #6b7280;
  font-size: 0.95rem;
}

/* ============================================
   CONTAINER
   ============================================ */

.form-container {
  background: linear-gradient(180deg, #FBF9FF 0%, #F7F9FF 100%);
  border-radius: 16px !important;
  box-shadow: 0 2px 20px #b0a8da, 0 0 1px rgba(108, 92, 231, 0.2) !important;
  max-width: 800px;
  margin: 0 auto;
  padding: 2.5rem;
  padding-top: 90px;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Mobile: Reduced padding for better space usage on smartphones */
@media (max-width: 767px) {
  .form-container {
    padding: 1.25rem;
    padding-top: 90px;
  }
}

@media (min-width: 768px) {
  .form-container {
    padding: 3rem;
    padding-top: 80px;
  }
}

/* ============================================
   SECTION HEADERS - LIGHT STYLE
   ============================================ */

.custom-header {
  border-left: 4px solid #6c5ce7;
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

.custom-header .square,
.custom-header::after {
  display: none;
}

.custom-header .title {
  color: #2d2d2d;
  font-size: 1.1rem;
  font-weight: 600;
}

/* ============================================
   FORM CONTROLS & LABELS
   ============================================ */

/* Label styling */
.col-form-label,
label {
  color: #4b5563;
  font-weight: 400;
}

/* Focus styles for all screens */
.form-control:focus,
.form-select:focus {
  border-color: #6c5ce7;
  box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.15);
}

/* Larger input fields on desktop for better UX */
@media (min-width: 768px) {
  .form-control,
  .form-select {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  /* Higher input fields for form-floating (Family Controls) - must be more specific */
  .form-floating > .form-control,
  .form-floating > .form-select {
    padding-top: 1.625rem !important;
    padding-bottom: 0.75rem !important;
    min-height: calc(3.5rem + 2px);
  }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary {
  background: #6c5ce7;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
}

.btn-primary:hover {
  background: #5b4cdb;
}

.btn-outline-primary {
  border: 1.5px solid #6c5ce7;
  color: #6c5ce7;
  background: transparent;
  border-radius: 8px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-outline-primary:hover {
  background: rgba(108, 92, 231, 0.08);
  border-color: #5b4cdb;
  color: #5b4cdb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
}

/* Ensure icons remain visible on hover */
.btn-outline-primary:hover img {
  opacity: 1;
  filter: none;
}

.btn-group .btn {
  border-radius: 8px;
}

.btn-check:checked + .btn-primary {
  background: #6c5ce7;
  border-color: #6c5ce7;
}

/* ============================================
   STEPPER (SmartWizard) - LIGHT COLORS
   ============================================ */

.form-container {
  --sw-toolbar-btn-background-color: #6c5ce7;
  --sw-anchor-default-primary-color: #d0d0d0;
  --sw-anchor-active-primary-color: #6c5ce7;
  --sw-anchor-done-primary-color: #b4a8f3;
  --sw-progress-color: #6c5ce7;
}

.sw-theme-dots > .nav::before {
  background-color: #d0d0d0;
}

/* ============================================
   VALIDATION - LIGHT COLORS
   ============================================ */

.validation-message,
.text-danger {
  color: #dc3545 !important;
}

.invalid {
  border-color: #dc3545 !important;
}

.invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.valid.modified:not([type=checkbox]) {
  border-color: #198754;
}

.valid.modified:not([type=checkbox]):focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* ============================================
   FOOTER - LIGHT COLORS
   ============================================ */

.form-footer small {
  color: #999;
}

.form-footer small a {
  color: #999;
}

.form-footer small a:hover {
  color: #666;
}

/* ============================================
   DESKTOP LAYOUT (768px+)
   ============================================ */

@media (min-width: 768px) {
  /* Labels get more space - 25% instead of default 16.67% */
  .col-md-2.col-form-label {
    flex: 0 0 auto;
    width: 25%;
  }
  
  /* Standard input fields (single column) adjust to 75% */
  .row > .col-md-10:not(.row) {
    flex: 0 0 auto;
    width: 75%;
  }
  
  /* For nested row structure (Membership page) */
  .row > .col-md-10.row {
    flex: 0 0 auto;
    width: 75%;
  }
  
  /* PLZ/Ort in nested structure: within the 75% container */
  .zip-city-nested .col-md-2 {
    flex: 0 0 auto;
    width: 24% !important;
  }
  
  .zip-city-nested .col-md-10 {
    flex: 0 0 auto;
    width: 76% !important;
  }
  
  /* PLZ/Ort in direct structure (Change page): direct in 100% row */
  /* Label=25%, PLZ=18%, Ort=57% = 100% */
  .zip-city-direct .col-md-2:not(.col-form-label) {
    flex: 0 0 auto;
    width: 18% !important;
  }
  
  .zip-city-direct .col-md-8 {
    flex: 0 0 auto;
    width: 57% !important;
  }
  
  /* Hide placeholders on desktop */
  .form-control::placeholder,
  .form-select::placeholder {
    color: transparent !important;
  }
  
  .multi-select .multi-select-header-placeholder {
    color: rgba(var(--bs-body-color-rgb), 0.65) !important;
  }
}