/**
 * @file
 * Base styles for Transmit Orchestrator journeys.
 *
 * Table of Contents:
 * 1. Debug & Hidden Elements
 * 2. Utilities
 * 3. Journey Step Layout
 * 4. Typography & Headers
 * 5. Links & Navigation
 * 6. Loading States
 * 7. Forms & Inputs
 * 8. Buttons
 * 9. OTP Components
 * 10. Animations
 */

#ts-orchestrator {
  /* ========================================
     1. DEBUG & HIDDEN ELEMENTS
     ======================================== */
  #additional_data_button {
    display: none;
  }

  /* ========================================
     2. UTILITIES
     ======================================== */
  .text-center {
    text-align: center;
  }

  /* ========================================
     3. JOURNEY STEP LAYOUT
     ======================================== */
  .journey-step__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
  }

  .journey-step__icon img {
    height: auto;
  }

  .journey-step__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .journey-step__separator {
    display: block;
    width: 100%;
    margin-top: 16px;
  }

  .journey-step__separator--with-line {
    border-bottom: 1px solid var(--border-primary);
    margin: 32px 0;
  }

  .journey-step__extra-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .journey-step__links-wrapper {
    margin-top: 32px;
  }

  /* ========================================
     4. TYPOGRAPHY & HEADERS
     ======================================== */
  .journey-step__header {
    text-align: center;
    margin-bottom: 32px;
  }

  .journey-step__title {
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
  }

  .journey-step__subtitle {
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-tertiary);
  }

  .journey-step__aux-message {
    color: var(--text-tertiary, #535862);
    text-align: center;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 300;
    line-height: normal;
    margin-bottom: 5px;
  }

  .journey-step__first-access-cta {
    text-align: center;
    padding-top: 32px;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    color: var(--text-tertiary, #535862);
  }

  /* ========================================
     5. LINKS & NAVIGATION
     ======================================== */
  .journey-step__cancel-link {
    display: block;
    text-align: center;
    color: var(--text-brand-secondary, #1DB4FF);
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding: 12px;
    transition: opacity 0.2s ease;
  }

  .journey-step__cancel-link:hover {
    opacity: 0.8;
    text-decoration: underline;
  }

  .journey-step__back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary, #414651);
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 12px;
    transition: opacity 0.2s ease;
    position: relative;
    outline: none;
    box-shadow: none;
  }

  .journey-step__back-link:hover {
    opacity: 0.7;
  }

  .journey-step__back-link:focus,
  .journey-step__back-link:focus-visible,
  .journey-step__back-link:active {
    outline: none;
    box-shadow: none;
  }

  .journey-step__back-link svg {
    flex-shrink: 0;
  }

  .journey-step__back-link.loading {
    opacity: 0.7;
    pointer-events: none;
  }

  .journey-step__back-link.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    right: 12px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-spinner 0.6s linear infinite;
  }

  /* SDK Alternate Branch Container */
  #alternate-branch-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
  }

  #alternate-branch-container .column {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Style Cancel button as a link when it comes from SDK */
  #alternate-branch-container button:last-child {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #1DB4FF;
    font-weight: 500;
    padding: 12px;
  }

  #alternate-branch-container button:last-child:hover {
    opacity: 0.8;
    text-decoration: underline;
  }

  /* ========================================
     6. LOADING STATES
     ======================================== */
  .journey-step--loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 24px;
  }

  .loading-spinner {
    width: 64px;
    height: 64px;
    border: 8px solid var(--bg-tertiary, #F5F5F5);
    border-top-color: var(--color-primary, #1DB4FF);
    border-radius: 50%;
    animation: loading-spinner-rotate 0.8s linear infinite;
  }

  .loading-text {
    color: var(--text-secondary, #414651);
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
  }

  /* ========================================
     7. FORMS & INPUTS
     ======================================== */
  form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .input-container {
    display: flex;
    flex-direction: column;
  }

  .input-container label {
    margin-bottom: 6px;
    color: var(--text-secondary, #414651);
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
  }

  .input-container input {
    width: 100%;
    padding: 8px 12px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 16px;
    line-height: 24.6px;
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .input-container input::placeholder {
    color: var(--text-quaternary, #717680);
    font-size: 90%;
  }

  .input-container input:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
  }

  .input-container input.invalid {
    border-color: var(--border-error, #F04438);
    color: var(--text-error-primary, #D92D20);
  }

  .input-container input.invalid:focus {
    border-color: var(--border-error, #F04438);
    box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1);
  }

  .input-container input[readonly],
  .input-container input[disabled] {
    background-color: var(--bg-disabled);
  }

  /* Password Input with Toggle */
  .password-container {
    position: relative;
  }

  .password-container input {
    padding-right: 45px;
  }

  .password-toggle {
    position: absolute;
    right: 8px;
    bottom: 3px;
    width: auto;
    padding: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .password-toggle:hover {
    color: var(--text-secondary);
  }

  .password-toggle:focus {
    outline: none;
    box-shadow: none;
  }

  /* Password Validation Rules */
  .password-validation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
  }

  .validation-rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .validation-rule .validation-icon {
    flex-shrink: 0;
    margin-top: 2px;
  }

  .validation-rule .validation-icon-circle {
    fill: #D5D7DA;
    transition: fill 0.2s ease;
  }

  .validation-rule.valid .validation-icon-circle {
    fill: #36B37E;
  }

  .validation-rule span {
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary, #414651);
  }

  .validation-rule strong {
    font-weight: 700;
  }

  input[type="password"]::-ms-reveal,
  input[type="password"]::-ms-clear {
    display: none;
  }

  /* ========================================
     8. BUTTONS
     ======================================== */
  button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-size: 14px;
    line-height: 18.9px;
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: opacity 0.2s ease;

    .material-symbols-sharp {
      font-size: 18px;
    }
  }

  /* Button Variants */
  button.primary,
  button[type="submit"]:not(.secondary),
  button#submit-branch_1:not(.as-link-primary) {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: var(--text-primary);
  }

  button.secondary {
    padding: 0.625rem var(--spacing-xl, 1rem);
    background: var(--button-secondary);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow:
      0 0 0 1px rgba(10, 13, 18, 0.18) inset,
      0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
      0 1px 2px 0 rgba(10, 13, 18, 0.05);
  }

  button.as-link-primary {
    color: #0096E0;
    font-size: 16px;
  }

  button.as-link-secondary {
    color: var(--text-tertiary);
  }

  /* Button Loading State */
  button.loading {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
  }

  button.loading::after {
    content: '';
    position: absolute;
    top: calc(50% - 3px);
    right: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-spinner 0.6s linear infinite;
  }

  /* ========================================
     9. OTP COMPONENTS
     ======================================== */

  /* OTP Method Selection */
  .otp-method-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .otp-method-option {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    display: inline-flex;
    cursor: pointer;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }

  .otp-method-option:hover {
    background: var(--bg-secondary, #F9FAFB);
  }

  .otp-method-option__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .otp-method-option__radio {
    width: 20px;
    height: 20px;
    position: relative;
    background: var(--border-primary, #D5D7DA);
    border-radius: 9999px;
    flex-shrink: 0;
    transition: all 0.2s ease;

    &::after {
      content: '';
      width: 8px;
      height: 8px;
      left: 6px;
      top: 6px;
      position: absolute;
      background: white;
      border-radius: 9999px;
    }
  }

  .otp-method-option--selected .otp-method-option__radio {
    background: var(--color-primary, #1DB4FF);
  }

  .otp-method-option__content {
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    display: flex;
    flex: 1;
  }

  .otp-method-option__icon {
    width: 24px;
    height: 24px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--color-secondary, #7B18DD);
  }

  .otp-method-option__text {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    display: inline-flex;
    flex: 1;
  }

  .otp-method-option__label {
    align-self: stretch;
    color: var(--text-primary, #181D27);
    font-size: 14px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-weight: 700;
    word-wrap: break-word;
  }

  .otp-method-option__description {
    align-self: stretch;
    color: var(--text-quaternary, #717680);
    font-size: 12px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-weight: 500;
    word-wrap: break-word;
  }

  /* OTP Input Component */
  .otp-input-wrapper {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: inline-flex;
  }

  .otp-input-label {
    align-self: stretch;
    text-align: center;
    color: var(--text-secondary, #414651);
    font-size: 14px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-weight: 400;
    word-wrap: break-word;
  }

  .otp-input {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
  }

  .otp-input__digit {
    width: 39px;
    height: 42px;
    min-width: 36px;
    min-height: 39px;
    padding: 1px 5px;
    background: var(--bg-primary, white);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 9px;
    outline: 1px var(--border-primary, #D5D7DA) solid;
    outline-offset: -1px;
    border: none;
    text-align: center;
    color: var(--text-primary, #181D27);
    font-size: 24px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-weight: 400;
    transition: all 0.2s ease;
    line-height: 1;
  }

  .otp-input__digit::placeholder {
    color: var(--text-placeholder-subtle, #D5D7DA);
  }

  .otp-input__digit:focus {
    outline: 2px var(--color-primary, #1DB4FF) solid;
    outline-offset: -2px;
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05), 0 0 0 3px rgba(29, 180, 255, 0.1);
  }

  .otp-input__digit:not(:placeholder-shown) {
    color: var(--text-primary, #181D27);
  }

  /* OTP Error State */
  .otp-input-wrapper.has-error .otp-input__digit {
    outline: 2px var(--border-error, #F04438) solid;
    outline-offset: -2px;
    color: var(--text-error-primary, #D92D20);
    box-shadow: 0px 0px 0px 4px rgba(71, 194, 255, 0.25);
  }

  .otp-input-wrapper.has-error .otp-input__error-message {
    display: block;
  }

  .otp-input__error-message {
    display: none;
    align-self: stretch;
    text-align: center;
    color: var(--text-error-primary, #D92D20);
    font-size: 14px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-weight: 300;
    word-wrap: break-word;
  }

  .otp-input__separator {
    width: 20px;
    height: 42px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-placeholder-subtle, #D5D7DA);
    font-size: 32px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-weight: 400;
    line-height: 1;
  }

  .otp-resend-message {
    text-align: center;
    color: var(--text-tertiary, #535862);
    font-size: 14px;
    font-family: var(--ssa-font-stacks-uni-neue-regular);
    font-weight: 400;
    margin: 16px 0;
  }

  .otp-resend-message .as-link-primary {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    width: auto;
    text-decoration: none;
    cursor: pointer;
  }

  .otp-resend-message .as-link-primary:hover {
    text-decoration: underline;
  }

}

/* ========================================
   10. ANIMATIONS
   ======================================== */
@keyframes button-spinner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes loading-spinner-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}