/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
.site-primary-color {
  color: #8fc351;
}

.btn-site-primary {
  background-color: #8fc351;
  border-color: #8fc351;
  color: white;
}

.btn-site-primary:hover {
  background-color: #7db03f;
  border-color: #7db03f;
  color: white;
}

.btn-outline-site-primary {
  color: #8fc351;
  border-color: #8fc351;
  background-color: transparent;
}

.btn-outline-site-primary:hover {
  background-color: #8fc351;
  border-color: #8fc351;
  color: white;
}

.site-links {
  /* Target anchor tags within .site-links */
  a {
    text-decoration: none;
    color: black;
    font-weight: bold;
  }
}

.checkout-page .clover-field {
  height: 44px;
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.checkout-page .clover-field iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.checkout-page .checkout-form .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.password-auth-page {
  min-height: calc(100vh - 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.password-auth-card {
  width: 100%;
  max-width: 30rem;
  border: 0;
  border-radius: 0.85rem;
}

.password-auth-logo {
  max-width: 180px;
  width: 100%;
  height: auto;
}