/* Classic Design - Original/Default Layout */

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

[data-design="classic"] .form-container {
  background-color: #f3f1fa;
  color: #343333;
}

[data-design="classic"].form-page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0rem 0;
}

/* Apply gradient - Classic specific */
[data-design="classic"] .form-container.gradient-advanced,
[data-design="classic"] .form-container .container {
  background: radial-gradient(70% 100% at 30% 30%, #e2dff2 0%, #f3f1fa 50%, transparent 90%), 
              radial-gradient(60% 100% at 50% 50%, #d8d3ed 0%, #f3f1fa 60%, transparent 90%), 
              radial-gradient(50% 100% at 20% 70%, #e2dff2 0%, #f3f1fa 60%, transparent 90%), 
              radial-gradient(80% 100% at 80% 80%, #f3f1fa 0%, #f3f1fa 50%, transparent 90%);
  background-blend-mode: soft-light, overlay, normal, difference, screen;
}

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

[data-design="classic"] .form-header-default {
  display: block;
}

[data-design="classic"] .club-header-outside {
  display: none !important;
}

[data-design="classic"] .form-title {
  display: none !important;
}

[data-design="classic"] .form-container h1 {
  font-weight: 200;
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  [data-design="classic"] .form-container h1 {
    font-size: 2.5rem;
  }
}

/* ============================================
   SECTION HEADERS - COLOR OVERRIDES
   ============================================ */

[data-design="classic"] .custom-header .square {
  background-color: #8860D0;
}

[data-design="classic"] .custom-header .title {
  color: #343333;
}

[data-design="classic"] .custom-header::after {
  background-color: #8860D0;
}

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

[data-design="classic"] .form-container {
  --sw-toolbar-btn-background-color: #009EF7;
  --sw-anchor-default-primary-color: #8860D0;
  --sw-anchor-default-secondary-color: #ebeaea;
  --sw-anchor-active-primary-color: #8860D0;
  --sw-anchor-done-primary-color: #c2a6f5;
  --sw-progress-color: #009EF7;
}

/* ============================================
   VALIDATION - CLASSIC COLORS
   ============================================ */

[data-design="classic"] .validation-message,
[data-design="classic"] .text-danger {
  color: #dc3545 !important;
}

[data-design="classic"] .invalid {
  border-color: #dc3545 !important;
}

[data-design="classic"] .invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

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

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

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

@media (min-width: 768px) {
  /* Higher input fields for form-floating (Family Controls) */
  [data-design="classic"] .form-floating > .form-control,
  [data-design="classic"] .form-floating > .form-select {
    padding-top: 1.625rem !important;
    padding-bottom: 0.75rem !important;
    min-height: calc(3.5rem + 2px);
  }
  
  /* Keep Bootstrap default layout for Classic Design */
  /* PLZ/Ort in nested structure (Membership page) */
  [data-design="classic"] .zip-city-nested .col-md-2 {
    flex: 0 0 auto;
    width: 20%;
  }
  
  [data-design="classic"] .zip-city-nested .col-md-10 {
    flex: 0 0 auto;
    width: 80%;
  }
  
  /* PLZ/Ort in direct structure (Change page) - Bootstrap defaults */
  [data-design="classic"] .zip-city-direct .col-md-2:not(.col-form-label) {
    flex: 0 0 auto;
    width: 16.666667%;
  }
  
  [data-design="classic"] .zip-city-direct .col-md-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }
}

/* ============================================
   FOOTER - CLASSIC COLORS
   ============================================ */

[data-design="classic"] .form-footer small {
  color: #aeaaaa;
}

[data-design="classic"] .form-footer small a {
  color: #aeaaaa;
}

[data-design="classic"] .form-footer small a:hover {
  color: #999;
}