/* Embedded Design - Optimized for iFrame embedding */

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

body:has([data-design="embedded"]) {
  background: #ffffff !important;
  margin: 0;
  padding: 0;
}

[data-design="embedded"].form-page-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
}

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

[data-design="embedded"] .form-header-default {
  display: none !important;
}

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

[data-design="embedded"] .form-title {
  display: block !important;
  text-align: center;
  margin-bottom: 2rem;
}

[data-design="embedded"] .form-title h1 {
  font-weight: 600;
  font-size: 1.5rem;
  color: #2d2d2d;
  margin-bottom: 0.5rem;
}

[data-design="embedded"] .form-title p {
  color: #6b7280;
  font-size: 0.9rem;
}

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

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

[data-design="embedded"] .form-container {
  background: #ffffff;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 1rem;
  border: none;
}

@media (min-width: 768px) {
  [data-design="embedded"] .form-container {
    padding: 1.5rem;
  }
}

/* Show the main heading */
[data-design="embedded"] .form-container h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #2d2d2d;
}

@media (min-width: 768px) {
  [data-design="embedded"] .form-container h1 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }
}

/* ============================================
   SECTION HEADERS - EMBEDDED STYLE
   ============================================ */

[data-design="embedded"] .custom-header {
  border-left: 3px solid #6c5ce7;
  padding-left: 0.75rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

[data-design="embedded"] .custom-header .square,
[data-design="embedded"] .custom-header::after {
  display: none;
}

[data-design="embedded"] .custom-header .title {
  color: #2d2d2d;
  font-size: 1rem;
  font-weight: 600;
}

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

/* Label styling */
[data-design="embedded"] .col-form-label,
[data-design="embedded"] label {
  color: #4b5563;
  font-weight: 400;
  font-size: 0.9rem;
}

/* Form controls */
[data-design="embedded"] .form-control,
[data-design="embedded"] .form-select {
  font-size: 0.9rem;
}

/* Focus styles */
[data-design="embedded"] .form-control:focus,
[data-design="embedded"] .form-select:focus {
  border-color: #6c5ce7;
  box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.15);
}

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

[data-design="embedded"] .btn-primary {
  background: #6c5ce7;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

[data-design="embedded"] .btn-primary:hover {
  background: #5b4cdb;
}

[data-design="embedded"] .btn-outline-primary {
  border: 2px solid #6c5ce7;
  color: #6c5ce7;
  background: transparent;
  border-radius: 6px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

[data-design="embedded"] .btn-outline-primary:hover {
  background: #6c5ce7;
  color: #ffffff;
}

[data-design="embedded"] .btn-group .btn {
  border-radius: 6px;
  font-size: 0.9rem;
}

[data-design="embedded"] .btn-check:checked + .btn-primary {
  background: #6c5ce7;
  border-color: #6c5ce7;
}

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

[data-design="embedded"] .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;
}

[data-design="embedded"] .sw-theme-dots > .nav::before {
  background-color: #d0d0d0;
}

/* Compact stepper for embedded mode */
[data-design="embedded"] .sw-theme-dots {
  margin-bottom: 1rem;
}

[data-design="embedded"] .sw-theme-dots .nav-link {
  font-size: 0.85rem;
}

/* ============================================
   VALIDATION - EMBEDDED COLORS
   ============================================ */

[data-design="embedded"] .validation-message,
[data-design="embedded"] .text-danger {
  color: #dc3545 !important;
  font-size: 0.8rem;
}

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

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

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

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

/* ============================================
   FOOTER - EMBEDDED COLORS
   ============================================ */

[data-design="embedded"] .form-footer {
  padding: 1rem 0 0.5rem 0;
}

[data-design="embedded"] .form-footer small {
  color: #999;
  font-size: 0.75rem;
}

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

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

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (min-width: 768px) {
  /* Standard desktop layout without extra spacing */
  [data-design="embedded"] .col-md-2.col-form-label {
    flex: 0 0 auto;
    width: 20%;
  }
  
  [data-design="embedded"] .row > .col-md-10:not(.row) {
    flex: 0 0 auto;
    width: 80%;
  }
  
  [data-design="embedded"] .row > .col-md-10.row {
    flex: 0 0 auto;
    width: 80%;
  }
  
  /* PLZ/Ort in nested structure */
  [data-design="embedded"] .zip-city-nested .col-md-2 {
    flex: 0 0 auto;
    width: 30% !important;
  }
  
  [data-design="embedded"] .zip-city-nested .col-md-10 {
    flex: 0 0 auto;
    width: 70% !important;
  }
  
  /* PLZ/Ort in direct structure */
  [data-design="embedded"] .zip-city-direct .col-md-2:not(.col-form-label) {
    flex: 0 0 auto;
    width: 20% !important;
  }
  
  [data-design="embedded"] .zip-city-direct .col-md-8 {
    flex: 0 0 auto;
    width: 60% !important;
  }
}

/* ============================================
   COMPACT MODE FOR MOBILE
   ============================================ */

@media (max-width: 767px) {
  [data-design="embedded"] .form-container {
    padding: 0.75rem;
  }
  
  [data-design="embedded"] .custom-header {
    margin-bottom: 0.75rem;
  }
  
  [data-design="embedded"] .mb-3 {
    margin-bottom: 0.75rem !important;
  }
}

/* ============================================
   IFRAME OPTIMIZATION
   ============================================ */

/* Remove any scrollbars that might appear */
[data-design="embedded"] body {
  overflow-x: hidden;
}

/* Ensure content fits within iframe */
[data-design="embedded"] .container-fluid,
[data-design="embedded"] .container {
  padding-left: 0;
  padding-right: 0;
}

/* Compact spacing for better iframe integration */
[data-design="embedded"] .row {
  margin-left: 0;
  margin-right: 0;
}

[data-design="embedded"] h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  [data-design="embedded"] h1 {
    font-size: 1.75rem;
  }
}