/*==============================================================================
  ACCOUNTS (app-accounts)
  * Purchase, API configuration, verification, and password reset
==============================================================================*/

/* SECTION MAP
   1) Purchase and plan/credit UI
   2) API configuration and key management UI
   3) Auth/verification/reset page overrides
*/

/* COMPONENT USAGE NOTES
   - Shared components: `c-card`, `c-btn`, `c-badge`, `c-action-buttons`, `c-alert`, `c-modal*`.
   - Shared utilities: `u-*` text/layout/visibility helpers and `is-*` states.
   - App-specific requirements:
     1) Keep purchase/payment visual variants scoped to `.page--accounts`.
     2) Keep auth-flow spacing overrides local to account templates.
   - Documentation:
     1) `_Technical/Guidelines/UI_Guidelines.md`
     2) `static/css/components.css`
     3) `static/css/utilities.css`
*/

/* Purchase credits */

/* .page--accounts .purchase-container { */
/*   max-width: 1200px; */
/*   margin: var(--space-5) auto; */
/*   padding: var(--space-6); */
/*   background: var(--color-surface-1); */
/*   border-radius: var(--radius-lg); */
/*   box-shadow: var(--shadow-raised); */
/* } */

.page--accounts .purchase-container.c-card {
  max-width: 1200px;
  margin: var(--space-5) auto;
  padding: var(--space-6);
  background: var(--color-surface-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.page--accounts .purchase-container.c-card:hover {
  transform: none;
  box-shadow: var(--shadow-raised);
}

.page--accounts .purchase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-gray-200);
}

.page--accounts .purchase-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.page--accounts .purchase-back-link {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border-radius: var(--radius-base);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  transition: all 0.2s;
}

.page--accounts .purchase-back-link:hover {
  background: var(--color-gray-200);
}

.page--accounts .purchase-title {
  font-size: var(--font-size-xl);
  color: var(--color-gray-900);
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.page--accounts .purchase-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}


.page--accounts .purchase-info.c-info-box {
  --c-info-box-bg: var(--color-bg-base);
  --c-info-box-border-left: var(--space-1) solid var(--color-info);
  --c-info-box-radius: var(--radius-sm);
  --c-info-box-padding: var(--space-4);
  --c-info-box-margin-top: var(--space-6);
}

.page--accounts .purchase-info-title {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-semibold);
}


.page--accounts .purchase-info-list.c-list-secondary {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.8;
}

.page--accounts .purchase-empty {
  background: var(--color-error-light);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  text-align: center;
}

.page--accounts .purchase-empty-title {
  font-size: var(--font-size-base);
  color: var(--color-error-dark);
  margin: 0;
  font-weight: var(--font-weight-normal);
}

.page--accounts .purchase-empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-error-dark);
  margin: var(--space-3) 0 0;
}

/* Purchase result pages */
.page--accounts .purchase-result {
  max-width: 600px;
  margin: var(--space-20) auto;
  padding: var(--space-10);
  text-align: center;
}


.page--accounts .purchase-result-card.c-card {
  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-floating);
}

.page--accounts .purchase-result-card.c-card:hover {
  transform: none;
  box-shadow: var(--shadow-floating);
}

.page--accounts .purchase-result-icon {
  font-size: var(--space-15);
  margin-bottom: var(--space-5);
}

.page--accounts .purchase-result-title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
  font-weight: var(--font-weight-semibold);
}

.page--accounts .purchase-result-title--success {
  color: var(--color-success);
}

.page--accounts .purchase-result-title--cancel {
  color: var(--color-error);
}

.page--accounts .purchase-result-text {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.page--accounts .purchase-result-note {
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-8);
}

.page--accounts .purchase-result-note--warning {
  background: var(--color-error-light);
  border: 1px solid var(--color-error);
}

.page--accounts .purchase-result-note-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin: 0;
}

.page--accounts .purchase-result-note-text--warning {
  color: var(--color-error-dark);
}

.page--accounts .purchase-result-meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  margin-bottom: var(--space-6);
}


.page--accounts .purchase-result-actions {
  --c-action-row-gap: var(--space-3);
  --c-action-row-wrap: wrap;
  justify-content: center;
}

.page--accounts .purchase-result-footer {
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* API configuration */
.page--accounts .api-config-alert {
  margin-top: var(--space-3);
}

.page--accounts .api-config-section {
  margin-top: var(--space-3);
}


.page--accounts .api-config-actions {
  --c-action-row-gap: var(--space-3);
  --c-action-row-wrap: wrap;
  margin-top: var(--space-4);
}

.page--accounts .api-config-actions--tight {
  margin-top: var(--space-3);
}

/* Credit packages page */
.page--accounts .c-credit-packages-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8);
}

.page--accounts .c-credit-packages-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.page--accounts .c-credit-packages-header h1 {
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.page--accounts .c-credit-status {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.page--accounts .c-credit-alert {
  max-width: 600px;
  margin: 0 auto;
}

.page--accounts .c-credit-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.page--accounts .c-credit-package-card {
  background: var(--color-surface-1);
  border: var(--space-0-25) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-raised);
}

.page--accounts .c-credit-package-card:hover {
  transform: translateY(calc(var(--space-1) * -1));
  box-shadow: var(--shadow-floating);
}

.page--accounts .c-credit-package-card--featured {
  border: var(--space-0-5) solid var(--color-accent-blue);
  box-shadow: 0 0 0 var(--space-0-25) var(--color-accent-blue);
}

.page--accounts .c-package-badge {
  position: absolute;
  top: calc(var(--space-1) * -2.5);
  right: var(--space-5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-accent-support);
  color: var(--color-text-primary);
}

.page--accounts .c-package-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.page--accounts .c-package-header h3 {
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
}

.page--accounts .c-package-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.page--accounts .c-package-price__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-blue);
}

.page--accounts .c-package-price__credits {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.page--accounts .c-package-description {
  text-align: center;
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.page--accounts .c-package-details {
  margin-bottom: var(--space-8);
}

.page--accounts .c-detail-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--space-0-25) solid var(--color-border);
}

.page--accounts .c-detail-item:last-child {
  border-bottom: none;
}

.page--accounts .c-detail-item__label {
  color: var(--color-text-muted);
}

.page--accounts .c-detail-item__value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.page--accounts .c-detail-item--savings .c-detail-item__value {
  color: var(--color-success);
}

.page--accounts .c-package-actions {
  text-align: center;
}

.page--accounts .c-purchase-btn {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.page--accounts .c-credit-info {
  background: var(--color-surface-1);
  border: var(--space-0-25) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-top: var(--space-8);
}

.page--accounts .c-credit-info h3 {
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
}

.page--accounts .c-credit-info ul {
  margin: 0;
  padding-left: var(--space-6);
  color: var(--color-text-muted);
}

.page--accounts .c-credit-info li {
  margin-bottom: var(--space-2);
  line-height: 1.5;
}

.page--accounts .c-card-element {
  border: var(--space-0-25) solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  background: var(--color-surface-1);
}

.page--accounts .c-card-errors {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.page--accounts .c-purchase-processing {
  text-align: center;
  padding: var(--space-8);
}

.page--accounts .c-no-packages {
  text-align: center;
  padding: var(--space-12);
  color: var(--color-text-muted);
}

/* Auth pages (password reset + verification) */


.page--accounts .c-aux-links {
  margin-top: var(--space-4);
  text-align: center;
  justify-content: center;
}


.page--accounts .c-aux-links--spaced {
  margin-top: var(--space-6);
}



.page--accounts .auth-message.c-auth-info,
.page--accounts .auth-info-box.c-auth-info {
  margin: var(--space-4) 0;
}

.page--accounts .auth-form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
}

.page--accounts .c-card--auth.c-card--auth--wide {
  max-width: var(--space-150);
}

.page--accounts .c-field-error {
  color: var(--color-error);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}

.page--accounts .c-field-error ul {
  margin: 0;
  padding-left: var(--space-5);
}

.page--accounts .c-show-password {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin: 0 auto;
  white-space: nowrap;
}

.page--accounts .c-show-password input[type="checkbox"] {
  width: var(--space-4);
  height: var(--space-4);
  min-width: var(--space-4);
  padding: 0;
  margin: 0;
}

.page--accounts .c-consent-group {
  margin-top: var(--space-2);
  text-align: left;
}

.page--accounts .c-checkbox-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.page--accounts .c-checkbox-label input[type="checkbox"] {
  width: var(--space-4);
  height: var(--space-4);
  min-width: var(--space-4);
  margin: var(--space-0-25) 0 0;
  padding: 0;
}

.page--accounts .c-form-help-text {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}



/*==============================================================================
  1. LOGIN PAGE (page--login)
  * Wrapper background, centering, and gradient
  * Overrides for .c-card--auth inside the login page
  * Auxiliary-links styling under .c-card--auth
==============================================================================*/

/* 1.1. Full-viewport gradient and centering */
.page--login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--space-4);
  background: linear-gradient(
    135deg,
    var(--color-accent-primary) 0%,
    var(--color-dark-base) 100%
  );
}

/* 1.1.1. Override .site-main and parent containers for login page to show gradient */
.site-main:has(.page--login) {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

/* Remove margin from dashboard body wrapper on login page */
.my-dashboard-body:has(.page--login) {
  margin: 0;
}

/* 1.2. Card container overrides on Login */
.page--login .c-card--auth {
  width: min(100%, 31.25rem); /* 500px */
  max-width: 31.25rem;
  padding: var(--space-lg);
  background-color: var(--color-surface-1);
  border: var(--space-0-25) solid var(--color-border);
  box-shadow: var(--shadow-floating);
}

.page--login .c-card--auth .c-form-group input[type="checkbox"] {
  width: var(--space-4);
  height: var(--space-4);
  min-width: var(--space-4);
  padding: 0;
}
/* Logo sizing within login card */
.page--login .c-card--auth .logo {
  max-width: 100%;
  margin-bottom: var(--space-md);
}
/* Heading inside login card */
.page--login .c-card--auth h2 {
  margin-bottom: var(--space-lg);
  color: var(--color-dark-base);
  font-size: var(--font-size-xl); /* 1.5rem */
  font-weight: var(--font-weight-semibold);
}

/* 1.2.1. Form controls clarity */
.page--login .c-form-group label {
  --c-form-label-color: var(--color-text-primary);
  --c-form-label-font-weight: var(--font-weight-semibold);
}

/* 1.2.2. Primary action button visibility */
.page--login .c-btn--primary,
.page--login .c-btn--primary {
  --c-btn-width: 100%;
  --c-btn-shadow: 0 var(--space-0-25) 0 var(--color-gray-200);
  --c-btn-primary-bg: var(--color-accent-blue);
  --c-btn-primary-border-color: var(--color-accent-blue);
  --c-btn-primary-color: var(--color-surface-1);
  --c-btn-primary-hover-bg: var(--color-blue-600);
  --c-btn-primary-hover-border-color: var(--color-blue-600);
  --c-btn-primary-hover-color: var(--color-surface-1);
}

/* 1.3. Auxiliary links under the form (.c-aux-links) */
.page--login .c-card--auth .c-aux-links {
  margin-top: var(--space-lg);   /* 2rem */
  font-size: var(--font-size-lg);  /* 1.25rem */
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}
.page--login .c-aux-links a {
  color: var(--color-accent-primary);
  transition: text-decoration 0.2s;
}
.page--login .c-aux-links a:hover {
  text-decoration: underline;
}
.page--login .c-aux-links a.c-link-secondary {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.page--login .c-aux-links a.c-link-secondary:hover {
  color: var(--color-accent-primary);
  text-decoration: underline;
}
.page--login .c-card--auth .c-aux-links.c-aux-links--stack {
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-base);
}


.page--login .c-card--auth label::after {
  content: "";
  display: none;
}

@media (max-width: 768px) {
  .page--accounts .c-credit-packages-container {
    padding: var(--space-4);
  }

  .page--accounts .c-credit-packages-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .page--accounts .c-credit-package-card {
    padding: var(--space-6);
  }
}