/**
 * Card Complete — Bootstrap 5 bridge
 * Load order: design-tokens.css → Bootstrap 5 CSS → this file
 */
@import url("./design-tokens.css");
@import url("./header.css");
@import url("./footer.css");
@import url("./product-intro.css");

:root {
  --bs-body-font-family: var(--cc-font-family);
  --bs-body-color: var(--cc-color-text);
  --bs-body-bg: var(--cc-color-body);

  --bs-primary: var(--cc-color-secondary);
  --bs-primary-rgb: 103, 101, 176;
  --bs-warning: var(--cc-color-primary);
  --bs-warning-rgb: 250, 207, 26;

  --bs-border-radius: var(--cc-radius-button);
  --bs-border-radius-lg: var(--cc-radius-card-lg);
  --bs-link-color: var(--cc-color-secondary);
  --bs-link-hover-color: var(--cc-color-purple-500);
}

body {
  font-family: var(--cc-font-family);
  color: var(--cc-color-text);
}

/*
  28zwo development
- btn-default added
*/
.btn-primary, .btn-default {
  --bs-btn-bg: var(--cc-color-primary);
  --bs-btn-border-color: var(--cc-color-primary);
  --bs-btn-color: var(--cc-color-text);
  --bs-btn-hover-bg: #e6bc18;
  --bs-btn-hover-border-color: #e6bc18;
  --bs-btn-hover-color: var(--cc-color-text);
  border-radius: var(--cc-radius-button);
  font-weight: 600;
  font-size: var(--cc-text-base);
  padding: 10px 24px;
}
.btn-primary:disabled, .btn-default:disabled {
  background-color: var(--color-blue-100);
  border-color: var(--color-blue-100);
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-bg: var(--cc-color-secondary);
  --bs-btn-border-color: var(--cc-color-secondary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--cc-color-purple-500);
  --bs-btn-hover-border-color: var(--cc-color-purple-500);
  border-radius: var(--cc-radius-button);
  font-weight: 600;
  font-size: var(--text-base);
  padding: 10px 24px;
}
.btn-secondary:disabled {
  background-color: var(--color-blue-100);
  border-color: var(--color-blue-100);
}
.card {
  border-radius: var(--cc-radius-card-lg);
}

.navbar,
.modal-content {
  font-family: var(--cc-font-family);
}

/* Optional: map Bootstrap form controls to Card Complete field look */

/*
  28zwo development
  - #id_captcha_1 added
*/
.form-control,
.form-select,
#id_captcha_1 {
  min-height: 56px;
  padding: 16px;
  font-size: var(--cc-text-base);
  letter-spacing: var(--cc-tracking-base);
  color: var(--cc-color-blue-700);
  background-color: #fff;
  border: none;
  border-radius: var(--cc-radius-button);
  box-shadow: var(--cc-shadow-xs);
}
.form-control:focus,
.form-select:focus,
#id_captcha_1 {
  border: none;
  box-shadow: var(--cc-shadow-xs);
  color: var(--cc-color-blue-700);
}
.form-check-input:checked {
  background-color: var(--cc-color-secondary);
  border-color: var(--cc-color-secondary);
}
.form-check-input:focus {
  border-color: var(--cc-color-secondary);
  box-shadow: 0 0 0 0.2rem rgba(103, 101, 176, 0.25);
}

/* Card Complete component classes (optional, same as public site) */
.btn.cc-btn-primary, a.btn.cc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: var(--cc-color-primary);
  color: var(--cc-color-text);
  font-size: var(--cc-text-base);
  font-weight: 600;
  letter-spacing: var(--cc-tracking-base);
  text-decoration: none;
  border-radius: var(--cc-radius-button);
  border: none;
}

.btn.cc-btn-secondary, a.btn.cc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: var(--cc-color-secondary);
  color: #fff;
  font-size: var(--cc-text-base);
  font-weight: 600;
  letter-spacing: var(--cc-tracking-base);
  text-decoration: none;
  border-radius: var(--cc-radius-button);
  border: none;
}