/* Resolutum Model Manager Frontend Styles */
/* Note: Finance calculator styles are now in the Resolutum Finance Calculator plugin */

/* CTA Buttons */
.resolutum-cta-buttons {
  margin-top: 18px;
}

.resolutum--models-and-pricing-container {
    margin: 0 !important;
}

.resolutum-cta-button {
  display: inline-block;
  padding: 10px 18px;
  margin-right: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #0073aa;
  background: #0073aa;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.resolutum-cta-button:hover {
  background: #005a87;
  border-color: #005a87;
}

.resolutum-cta-button[rel="noopener"] {
  text-decoration: none;
}

/* Model Header */
.resolutum-model-header {
  margin-bottom: 20px;
}

.resolutum-model-title {
  text-align: center;
  font-size: var(--wp--preset--font-size--x-large) !important;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast) !important;
  margin-top: 0px !important;
}

.resolutum-model-subtitle {
  text-align: center;
}

.resolutum-model-description {
  text-align: center;
}

/* Color selector styles */
.resolutum-model-colors { text-align: center; margin-top: 12px; }
.resolutum-colors-list { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.resolutum-color-swatch { background: transparent; border: 1px solid #ddd; padding: 6px 10px; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; gap: 8px; }
.resolutum-color-swatch.selected { outline: 2px solid var(--wp--preset--color--accent-1); }
.resolutum-color-swatch .swatch-name { font-size: 13px; color: #222; }
.resolutum-color-swatch .swatch-circle { box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset; }

.resolutum-frontend-tabs .resolutum-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.resolutum-frontend-tabs .resolutum-tab-btn {
  position: relative;
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  cursor: pointer;
  border-radius: 0px;
  padding-top: var(--wp--preset--spacing--20);
  padding-right: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--20);
  padding-left: var(--wp--preset--spacing--30);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.resolutum-frontend-tabs .resolutum-tab-btn.active {
  position: relative;
  background-color: #FFFFFF;
  color: #000000;
  border-color: #000000;
  border-bottom: 0;
}

.resolutum-frontend-tabs .resolutum-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #FFFFFF;
}

.resolutum-frontend-tabs .resolutum-tab-contents {
  border: 1px solid #000000;
  padding: var(--wp--preset--spacing--50);
}

.resolutum-frontend-tabs .resolutum-tab-content {
  display: none !important;
}

.resolutum-frontend-tabs .resolutum-tab-content.active {
  display: block !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .resolutum-frontend-tabs .resolutum-tab-contents {
        padding: var(--wp--preset--spacing--20);
    }
}

@media (max-width: 860px) {
  .calculator-grid {
    flex-direction: column;
  }

  .calculator-form,
  .calculator-sliders {
    width: 100%;
    flex: 1 1 auto;
  }

  .calculator-sliders {
    grid-template-columns: repeat(2, 1fr);
  }

  .resolutum-model-title {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .calculator-sliders {
    grid-template-columns: 1fr;
  }

  .resolutum-frontend-tabs .resolutum-tab-buttons {
    flex-direction: column;
  }

  .resolutum-frontend-tabs .resolutum-tab-btn {
    width: 100%;
  }

  .calculator-sliders,
  .calculator-form {
    padding: 0px;
  }
}