/* ============================================================================
   PRICING CARDS V2 - CLEAN BUILD
   Last updated: 2025-10-24 11:40 - Reduced form field gap

   Specs:
   - Container: 1140px (Elementor boxed container, padding: 0)
   - 3 Cards: 360px each
   - Gap: 30px
   - Total: 360 + 30 + 360 + 30 + 360 = 1140px

   Structure:
   - Header: Icon + Name + Price
   - Content: Tags, Format, Reach, Features (flex: 1)
   - Footer: Durations + CTA Button (184px, gray background)
   ========================================================================= */

/* ============================================================================
   CONTAINER - Remove old padding
   ========================================================================= */

.eqolot-pricing {
  padding: 0 !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  font-family: 'Poppins', sans-serif;
  position: relative;
  min-height: 1000px;
  overflow: visible; /* Changed from hidden to allow sticky positioning */
}

/* Creator Section: Remove min-height and reduce outer spacing */
.eqolot-pricing--creator {
  min-height: auto;
  padding: 0 !important;
}

.eqolot-pricing__content {
  padding: 0 !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
}

/* Inaktive Panels komplett verstecken */
.eqolot-pricing__panel {
  display: none;
}

/* Nur aktives Panel zeigen */
.eqolot-pricing__panel.is-active {
  display: block;
}

/* Verhindere Layout-Shift durch konsistente Container-Eigenschaften */
.eqolot-pricing__panel[hidden] {
  display: none !important;
}

/* ============================================================================
   TABS (Vorgefertigte Pakete / Paket-Builder)
   ========================================================================= */

.eqolot-pricing__hero {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 64px;
}

.eqolot-pricing__tabs {
  position: relative;
  display: inline-flex;
  gap: 16px;
  padding: 10px 14px;
  background: #FFFAFA;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.eqolot-pricing__tab {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.4);
  background: #FFFFFF;
  box-shadow: none;
}

.eqolot-pricing__tab:not(.is-active) {
  border: 2px solid transparent;
}

.eqolot-pricing__tab:hover {
  transform: translateY(-1px);
  background: #000000;
  color: #FFFFFF;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.eqolot-pricing__tab:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12);
}

.eqolot-pricing__tab.is-active {
  background: #FFFFFF;
  color: #000000;
  box-shadow: inset 0 0 0 2px #000000;
}

.eqolot-pricing__tab.is-active:hover {
  background: #000000;
  color: #FFFFFF;
}

/* ============================================================================
   GRID LAYOUT
   ========================================================================= */

.eqolot-pricing__grid {
  display: grid;
  grid-template-columns: 360px 360px 360px;
  gap: 30px;
  width: 1140px;
  margin: 0;
  padding: 0;
}

/* ============================================================================
   CARD BASE
   ========================================================================= */

.eqolot-package--v2 {
  width: 360px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 24px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.eqolot-package--v2:hover {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
}

.eqolot-package--featured {
  border: 2px solid #1099FF;
}

/* ============================================================================
   HEADER
   ========================================================================= */

.eqolot-package__header-v2 {
  display: grid;
  grid-template-rows: 60px 30px auto;
  gap: 8px;
  padding: 32px 32px 0px 32px;
  text-align: center;
  background: #FFFFFF;
  justify-items: center;
  align-items: center;
}

.eqolot-package__icon-v2 {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}

.eqolot-package__name-v2 {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #1099FF;
  text-transform: uppercase;
  margin: 0;
  height: 30px;
  display: flex;
  align-items: center;
}

.eqolot-package__price-v2 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: 'Poppins', sans-serif;
  color: #181D27;
}

.eqolot-package__price-currency,
.eqolot-package__price-value {
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
}

.eqolot-package__price-period {
  font-size: 24px;
  font-weight: 700;
  line-height: 60px;
}

/* ============================================================================
   CONTENT (flexible, takes remaining space)
   ========================================================================= */

.eqolot-package__content-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 24px 24px 24px;
  flex: 1;
  background: #FFFFFF;
}

/* Tags */
.eqolot-package__tags-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eqolot-tag-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(16, 153, 255, 0.40);
  border-radius: 8px;
}

.eqolot-tag-v2--highlight {
  background: rgba(16, 153, 255, 0.40);
}

.eqolot-tag-v2__icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.eqolot-tag-v2__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.eqolot-tag-v2__text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #000000;
  flex: 1;
}

.eqolot-tag-v2__meta {
  font-weight: 400;
  color: #535862;
}

/* Format Section */
.eqolot-package__format-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eqolot-package__format-heading-v2 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #181D27;
  padding-left: 16px;
}

.eqolot-package__format-label-v2 {
  font-size: 14px;
  font-weight: 400;
  color: #535862;
}

.eqolot-package__format-details-v2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
}

.eqolot-package__format-detail {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #535862;
}

/* Reach Box */
.eqolot-package__reach-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  padding-top: 8px;
}

.eqolot-package__reach-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 1.5rem;
  background: rgba(238, 238, 238, 0.93);
  border-radius: 0.75rem;
  overflow: hidden;
}

.eqolot-package__reach-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #1099FF;
  border-radius: 0.75rem;
  z-index: 0;
}

.eqolot-package__reach-pill {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5rem;
  color: #FFFFFF;
  text-transform: capitalize;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
  width: 12.5rem;
  height: 1.5rem;
}

.eqolot-package__reach-value {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5rem;
  color: #FFFFFF;
  text-transform: uppercase;
  z-index: 1;
  position: absolute;
  height: 1.5rem;
}

/* Statische Breiten und Positionen basierend auf Plan-Key */
/* Basic: 50% Balken, Zahl am Ende */
[data-plan-key="basic"] .eqolot-package__reach-box::before {
  width: 50%;
}

[data-plan-key="basic"] .eqolot-package__reach-value {
  left: calc(50% - 60px);
}

/* Professional: 75% Balken, Zahl am Ende */
[data-plan-key="professional"] .eqolot-package__reach-box::before {
  width: 75%;
}

[data-plan-key="professional"] .eqolot-package__reach-value {
  left: calc(75% - 60px);
}

/* Premium: 100% Balken, Zahl am Ende */
[data-plan-key="premium"] .eqolot-package__reach-box::before {
  width: 100%;
}

[data-plan-key="premium"] .eqolot-package__reach-value {
  right: 20px;
}

.eqolot-package__reach-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #535862;
  margin: 0;
  padding-left: 8x;
  padding-bottom: 16px;
  border-bottom: 1px solid #EBEDF0;
}

/* Features List */
.eqolot-package__features-v2 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eqolot-feature-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 0 16px;
  background: transparent;
}

.eqolot-feature-v2__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.eqolot-feature-v2__text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #181D27;
}

/* Multiline Feature (für Rechte mit Zeilenumbruch) */
.eqolot-feature-v2--multiline {
  align-items: flex-start;
}

/* ============================================================================
   FOOTER (fixed height, gray background)
   ========================================================================= */

.eqolot-package__footer-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 32px 56px 32px;
  height: 184px;
  background: #EEEEEE;
  border-radius: 0 0 24px 24px;
}

/* Duration Select Dropdown (for predefined packages) */
.eqolot-package__duration-select-wrapper {
  width: 100%;
}

.eqolot-package__duration-select {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #181D27;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23181D27' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.eqolot-package__duration-select:hover {
  border-color: #1099FF;
}

.eqolot-package__duration-select:focus {
  outline: none;
  border-color: #1099FF;
  box-shadow: 0 0 0 3px rgba(16, 153, 255, 0.1);
}

/* CTA Button */
.eqolot-package__cta-v2 {
  width: 100%;
  padding: 14px 32px;
  background: transparent;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.eqolot-package__cta-v2:hover {
  background: #000000;
  color: #FFFFFF;
}

/* Featured card - CTA bleibt outline (wie andere Cards) */
/* .eqolot-package--featured .eqolot-package__cta-v2 {
  background: #000000;
  color: #FFFFFF;
} */

/* ============================================================================
   BUILDER (Paket-Konfigurator) - V2 NEU
   ========================================================================= */

.eqolot-pricing__builder {
  padding: 0 !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
}

.eqolot-builder {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  padding: 0 !important;
  width: 1140px !important;
  margin: 0 !important;
}

.eqolot-builder__form-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Builder Headline */
.eqolot-builder__headline {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #000000;
  margin: 0;
}

/* Form Field Container */
.eqolot-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Standard Abstand zwischen Label und Formfeld */
}

/* Label Row (Label + Info Icon) */
.eqolot-form-field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 670px;
  margin: 0;
  padding: 0;
}

/* Label */
.eqolot-form-field__label {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #000000;
  margin: 0;
  padding: 0;
}

/* Info Icon Container */
.eqolot-form-field__info-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.eqolot-form-field__info-icon img {
  display: block;
}

/* Tooltip */
.eqolot-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #374151;
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.eqolot-form-field__info-icon:hover .eqolot-tooltip {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Select Container */
.eqolot-form-select {
  position: relative;
  display: flex;
  align-items: center;
  width: 670px;
}

/* Select Input */
.eqolot-form-select__input {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  background: #FFFFFF;
  border: 1px solid #909090;
  border-radius: 8px;
  appearance: none;
  cursor: pointer;
  padding-right: 48px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.eqolot-form-select__input:focus {
  outline: none;
  border-color: #1099FF;
}

/* Dropdown Icon */
.eqolot-form-select__icon {
  position: absolute;
  right: 16px;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* Hint Fields */
.eqolot-form-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: #EBF8FF;
  border-radius: 8px;
  margin-top: 8px;
  width: 670px;
}

.eqolot-form-hint__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.eqolot-form-hint__text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #374151;
  margin: 0;
}

.eqolot-builder__summary {
  width: 400px;
}

/* Builder Card - identisch mit Package Cards */
.eqolot-package--builder {
  width: 400px;
}

/* Builder Reach - Custom Styling (kein Progress Bar, kein Padding links) */
.eqolot-builder-reach {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #181D27;
  margin-bottom: 8px;
}

.eqolot-pill {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #000000;
  background: rgba(159, 214, 255, 0.40);
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: capitalize;
}

/* Builder Numbers - Bold für Influencer und Contents Anzahl */
#builder-influencers,
#builder-contents {
  font-weight: 700;
}

/* Builder Footer - Override für gleichmäßigen Abstand */
.eqolot-package--builder .eqolot-package__footer-v2 {
  padding: 32px 32px 32px 32px;
  height: auto;
}

/* Builder Footer Info */
.eqolot-builder__footer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.eqolot-builder__footer-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #181D27;
  margin: 0;
}

.eqolot-builder__footer-text {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #6B7280;
  margin: 0;
}

/* ============================================================================
   RESPONSIVE (optional - for mobile)
   ========================================================================= */

@media (max-width: 1200px) {
  .eqolot-pricing__grid {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 24px;
  }

  .eqolot-package--v2 {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* ============================================================================
 * CREATOR CARD SPECIFIC STYLES
 * ========================================================================== */

/* Creator Card Container */
.eqolot-creator-card {
  display: flex;
  justify-content: center;
  max-width: 400px;
  margin: 0 auto;
}

.eqolot-package--creator {
  width: 100%;
  position: relative;
}

/* Creator Pills */
.eqolot-creator-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 24px 32px 0 32px;
}

.eqolot-creator-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.eqolot-creator-pill--neu {
  background: #FFA726;
  color: #FFFFFF;
}

.eqolot-creator-pill--availability {
  background: #E3F2FD;
  color: #181D27;
}

/* Creator Icon Wrapper */
.eqolot-creator-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  padding: 0 32px;
}

.eqolot-creator-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Creator Header Adjustments */
.eqolot-package__header--creator {
  margin-top: 0;
  padding-top: 0;
}

/* Blue Content Boxes */
.eqolot-creator-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.eqolot-creator-box {
  background: #E3F2FD;
  border-radius: 8px;
  padding: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #181D27;
}

.eqolot-creator-box strong {
  font-weight: 700;
}

.eqolot-creator-box__meta {
  font-size: 14px;
  font-weight: 400;
  color: #6B7280;
}

/* Creator Reach Styling */
.eqolot-package--creator .eqolot-package__reach-v2 {
  margin-bottom: 24px;
}

.eqolot-package__reach-value-v2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.eqolot-package__reach-value-v2 strong {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: #181D27;
}

.eqolot-package__reach-label-v2 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6B7280;
}

/* Creator Footer with Duration Select */
.eqolot-package__footer--creator {
  padding: 24px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Creator Duration Select */
.eqolot-creator-duration {
  width: 100%;
}

.eqolot-creator-duration__select {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #181D27;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23181D27' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}

.eqolot-creator-duration__select:hover {
  border-color: #1099FF;
}

.eqolot-creator-duration__select:focus {
  outline: none;
  border-color: #1099FF;
  box-shadow: 0 0 0 3px rgba(16, 153, 255, 0.1);
}

/* ============================================================================
   RESPONSIVE - MOBILE BUILDER OPTIMIZATION
   ========================================================================= */

/* Mobile: Integriertes Layout (Preis + Dropdowns in einer Card) */
@media (max-width: 768px) {
  /* Tab Bar: Schmaler auf Mobile */
  .eqolot-pricing__hero {
    margin-bottom: 32px;
    padding: 0 16px; /* Add horizontal padding */
  }

  .eqolot-pricing__tabs {
    width: 100%;
    max-width: 100%;
    gap: 8px; /* Reduce gap from 16px to 8px */
    padding: 8px 10px; /* Smaller padding */
  }

  .eqolot-pricing__tab {
    flex: 1; /* Equal width tabs */
    font-size: 14px; /* Smaller font */
    padding: 12px 16px; /* Smaller padding */
    white-space: nowrap; /* Prevent line breaks */
  }

  /* Vorgefertigte Pakete: Gleiche Breite wie Builder Card */
  .eqolot-pricing__grid {
    padding: 0 16px; /* 16px Padding - gleich wie Tab Bar */
  }

  .eqolot-package--v2:not(.eqolot-package--builder) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Creator Card: Full width - Padding wird in WordPress geregelt */
  .eqolot-creator-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .eqolot-package--creator {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Builder: Single Column auf Mobile */
  .eqolot-builder {
    display: block;
    width: 100% !important;
    padding: 0 !important; /* Kein Padding hier - wird auf summary gesetzt */
    overflow: visible !important;
  }

  /* Pricing Container: Allow sticky positioning */
  .eqolot-pricing__builder {
    overflow: visible !important;
  }

  /* Form Area: Verstecken auf Mobile (wir nutzen integrierte Card) */
  .eqolot-builder__form-area {
    display: none !important;
  }

  /* Builder Summary: Volle Breite, integriertes Design */
  .eqolot-builder__summary {
    width: 100%;
    max-width: 100%;
    padding: 0 16px; /* 16px Padding - gleich wie .eqolot-pricing__hero */
    margin-bottom: 4em; /* Außenabstand unten */
  }

  /* Builder Card: Integriertes Mobile Design mit sichtbaren runden Ecken */
  .eqolot-package--builder,
  .eqolot-package--builder.eqolot-package--v2 {
    width: 100% !important; /* Full width wie Tab Bar */
    max-width: 100% !important;
    margin: 0 !important; /* Kein Margin - benutze Padding vom parent */
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    border-radius: 24px !important; /* RUNDE ECKEN sichtbar */
  }

  /* Builder Card - ensure visible on mobile */
  .eqolot-builder__summary {
    display: block !important;
  }

  /* Sticky Price Header für Mobile */
  .eqolot-package--builder .eqolot-package__header-v2,
  .eqolot-package--builder .eqolot-package__header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #FFFFFF !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border-radius: 24px 24px 0 0 !important; /* Oben runde Ecken */
  }

  /* Preis im Header größer auf Mobile */
  .eqolot-package--builder .eqolot-package__price-value,
  .eqolot-package--builder .eqolot-package__price .eqolot-package__price-value {
    font-size: 32px !important;
    font-weight: 700 !important;
  }

  /* Mobile: Form Fields IN Card integrieren */
  .eqolot-package--builder .eqolot-package__content-v2,
  .eqolot-package--builder .eqolot-package__content {
    padding: 24px;
  }

  /* Mobile Form Container */
  .eqolot-builder__mobile-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 0; /* Remove bottom margin - no separator needed */
    padding-bottom: 0; /* Remove padding */
    border-bottom: none; /* Remove border - content below is hidden */
  }

  /* Hide original card content on mobile (tags, format, reach, features, blue boxes) */
  .eqolot-package--builder .eqolot-package__tags,
  .eqolot-package--builder .eqolot-package__tags-v2,
  .eqolot-package--builder .eqolot-package__format,
  .eqolot-package--builder .eqolot-package__format-v2,
  .eqolot-package--builder .eqolot-package__reach,
  .eqolot-package--builder .eqolot-package__reach-v2,
  .eqolot-package--builder .eqolot-package__features,
  .eqolot-package--builder .eqolot-package__features-v2,
  .eqolot-package--builder .eqolot-creator-content,
  .eqolot-package--builder .eqolot-creator-box {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Show footer info text on mobile (über CTA Button) */
  .eqolot-package--builder .eqolot-builder__footer-info {
    display: block !important;
    margin-bottom: 20px;
  }

  .eqolot-package--builder .eqolot-builder__footer-headline {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .eqolot-package--builder .eqolot-builder__footer-text {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Mobile Form Fields Styling - Higher specificity */
  .eqolot-package--builder .eqolot-package__content-v2 .eqolot-form-field,
  .eqolot-package--builder .eqolot-package__content .eqolot-form-field,
  .eqolot-package--builder .eqolot-form-field {
    margin-bottom: 0 !important;
    gap: 0 !important; /* KEIN Abstand zwischen Label und Select */
    row-gap: 0 !important;
  }

  .eqolot-package--builder .eqolot-form-field__label-row {
    width: 100%;
    margin-bottom: 0 !important; /* Kein Abstand - direkt an Auswahlbox */
  }

  .eqolot-package--builder .eqolot-form-field__label {
    font-size: 15px;
    font-weight: 600;
    color: #181D27;
    line-height: 1.2; /* Tighter line-height */
    margin-bottom: 0 !important; /* Kein Abstand */
  }

  /* Mobile Select Styling - Touch Friendly */
  .eqolot-package--builder .eqolot-form-select {
    width: 100%;
  }

  .eqolot-package--builder .eqolot-form-select__input {
    width: 100%;
    height: 56px; /* Touch-friendly height */
    padding: 16px;
    font-size: 16px;
    border: 1.5px solid #D1D5DB;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .eqolot-package--builder .eqolot-form-select__input:focus {
    border-color: #1099FF;
    box-shadow: 0 0 0 3px rgba(16, 153, 255, 0.1);
  }

  /* Mobile Hint Styling */
  .eqolot-package--builder .eqolot-form-hint {
    width: 100%;
    padding: 12px;
    background: #EBF8FF;
    border-left: 3px solid #1099FF;
    border-radius: 8px;
    margin-top: 12px;
  }

  .eqolot-package--builder .eqolot-form-hint__text {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Mobile Footer */
  .eqolot-package--builder .eqolot-package__footer-v2,
  .eqolot-package--builder .eqolot-package__footer {
    padding: 24px;
    border-top: 1px solid #E5E7EB;
    border-radius: 0 0 24px 24px !important; /* Unten runde Ecken */
  }

  /* Preis-Animation auf Mobile */
  .eqolot-package--builder .eqolot-package__price-value {
    transition: transform 0.3s ease, color 0.2s ease;
  }

  .eqolot-package--builder .eqolot-package__price-value.price-updated {
    animation: priceUpdate 0.5s ease;
  }

  @keyframes priceUpdate {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
      color: #1099FF;
    }
    100% {
      transform: scale(1);
    }
  }

  /* Tooltip auf Mobile: Innerhalb der Card */
  .eqolot-package--builder .eqolot-tooltip {
    width: calc(100vw - 80px); /* Fit inside screen with padding */
    left: auto;
    right: 0; /* Align to right edge of info icon */
    transform: translateX(0);
    max-width: 280px; /* Prevent too wide */
  }

  /* Info Icon Container positioning */
  .eqolot-package--builder .eqolot-form-field__info-icon {
    position: relative;
  }

  /* Creator Card Mobile */
  .eqolot-creator-card {
    max-width: 100%;
  }

  /* Other Mobile Adjustments */
  .eqolot-builder__control {
    flex-direction: column;
    align-items: stretch;
  }

  .eqolot-builder__info {
    margin-left: auto;
  }
}

/* ============================================================================
   TABLET RESPONSIVE (769px - 1024px)
   ========================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  /* Builder: Kleinerer Gap auf Tablet */
  .eqolot-builder {
    width: 100% !important;
    max-width: 100%;
    padding: 0 24px !important;
    gap: 24px;
  }

  /* Form Area: Flexible Width */
  .eqolot-form-field__label-row,
  .eqolot-form-select,
  .eqolot-form-hint {
    width: 100%;
    max-width: 100%;
  }

  /* Builder Summary: Flexible Width */
  .eqolot-builder__summary {
    width: 350px;
  }

  .eqolot-package--builder {
    width: 350px;
  }
}