/*@import "./utils.css" layer(mp.utils);*/
@layer mvc-grid, wa, wa-native, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides, mp;
@layer mp {
  body {
    scrollbar-gutter: stable both-edges;
  }

  :root {
    --mp-color-purple-200: #E4D1FF;
    --mp-color-purple-300: #CFAEFF;
    --mp-color-purple-400: #A060FF;
    --mp-color-purple-500: #812EFB;
    --mp-color-purple-700: #67437F;
    --mp-color-purple-800: #41145F;

    --mp-color-body: #F2EBE7;

    --mp-color-light: var(--mp-color-purple-300);
    --mp-color-dark: var(--mp-color-purple-800);
    --mp-color-dark-muted: var(--mp-color-purple-700);
    --mp-color-primary: var(--mp-color-purple-500);
    --mp-color-primary-foreground: white;
    --mp-color-secondary: var(--mp-color-purple-700);
    --mp-color-secondary-foreground: var(--mp-color-dark);
    --mp-color-accent: var(--mp-color-purple-400);
    --mp-color-accent-foreground: white;
    --mp-color-error: #FF4D4F;
    --mp-color-error-foreground: white;
    --mp-color-warning: #FAAD14;
    --mp-color-warning-foreground: var(--mp-color-dark);
    --mp-color-success: #52C41A;
    --mp-color-success-foreground: white;
    --mp-color-info: #1890FF;
    --mp-color-info-foreground: white;
  }


  ul {
    list-style: none;
    padding: 0;
  }

  html {
    /*background: #f4f4f4;*/
  }

  .form-dialog {
  }

  wa-zoomable-frame::part(controls) {
    margin-inline-end: var(--wa-space-m);
    right: 0.5em;
  }

  wa-zoomable-frame::part(zoom-in-button),
  wa-zoomable-frame::part(zoom-out-button) {
    display: flex;
    align-items: center;
    padding: 0.25em;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  wa-dialog.form-dialog::part(body),
  wa-zoomable-frame::part(iframe) {
    background-color: var(--mp-color-body);
  }

  wa-dialog.form-dialog::part(footer) {
    background: #f2f2f2;
  }

  wa-dialog.form-dialog::part(header-actions),
  wa-dialog.form-dialog::part(close-button) {
    display: none;
  }

  wa-dialog.form-dialog::part(footer) {
    border-top: var(--wa-border-width-l) solid var(--mp-color-primary);

  }

  wa-dialog.form-dialog::part(body) {
    padding: 0;
    display: grid;
    box-shadow: inset 0 0 30px #e3d7d1;
  }

  wa-dialog.form-dialog::part(header) {
    background: var(--mp-color-dark);
    color: white;
    height: 4rem;
    padding-block-end: calc(var(--wa-space-m) - var(--wa-form-control-padding-block));
    --wa-color-neutral-on-quiet: white;
    --wa-transition-fast: 150ms;
    --wa-color-neutral-fill-quiet: var(--mp-color-primary);
  }

  wa-dialog.form-dialog::part(header) > :last-child {
    display: none !important;
  }


  wa-dialog.form-dialog::part(dialog) {
    --height: max(90vh, calc(calc(100vh - 6rem) - calc(100vw * 0.03)));
    @supports (height: 100dvh) {
      --height: max(90dvh, calc(calc(100dvh - 2rem) - calc(100vw * 0.03)));
    }
    max-height: unset;
    block-size: var(--height);
  }

  wa-dialog.hide::part(dialog) {
    animation: show-dialog var(--hide-duration, 200ms) ease reverse;
  }

  wa-dialog.show::part(dialog) {
    animation: show-dialog var(--hide-duration, 200ms) ease;
  }

  wa-dialog.form-dialog .form-error-banner {
    position: relative;
    padding: var(--wa-space-s);
    background: var(--wa-color-danger-80);
  }

  mp-stepper {

  }

  mp-stepper-step:not(:last-of-type) {
    --mp-stepper-step-connector-color: var(--mp-color-secondary);
  }

  mp-stepper-step::part(step-label) {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--wa-space-m);
    align-items: center;
  }

  mp-stepper-step::part(step-indicator) {
    background: var(--mp-color-primary);
    color: white;
    --mp-stepper-step-indicator-size: 2rem;
    --mp-stepper-step-indicator-border-radius: 50%;
    --mp-stepper-step-indicator-border-width: 0.25rem;
    --mp-stepper-step-indicator-border-color: var(--mp-color-secondary);
    --mp-stepper-step-indicator-border-style: solid;
    --mp-stepper-step-indicator-border-color-active: var(--mp-color-primary);
    --mp-stepper-step-indicator-border-color-complete: var(--mp-color-primary);
    --mp-stepper-step-indicator-border-color-error: var(--mp-color-primary);
    --mp-stepper-step-indicator-border-color-disabled: var(--mp-color-secondary);
  }

  mp-stepper-step::part(step-header) {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--wa-space-m);
    align-items: center;
  }

  mp-stepper-step::part(step-label) {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--wa-space-m);
    align-items: center;
    color: var(--mp-color-dark);
    font-weight: 600;
  }

  mp-stepper-step::part(step-description) {
    color: var(--mp-color-dark-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.43;
    --mp-stepper-step-description-color-active: var(--mp-color-dark);
    --mp-stepper-step-description-color-complete: var(--mp-color-dark);
    --mp-stepper-step-description-color-error: var(--mp-color-dark);
    --mp-stepper-step-description-color-disabled: var(--mp-color-dark-muted);
  }

  mp-stepper-step::part(step-content) {
    background: white;
    padding: var(--wa-space-l);
    border-radius: var(--wa-border-radius-m);
    border: var(--wa-border-width-l) solid var(--mp-color-secondary);
  }

  mp-stepper-step:not([active]) {
    display: none;
  }

  mp-stepper-step::part(step-content-error) {
    border-color: var(--mp-color-error);
  }

  mp-stepper-step[active]::part(step-content) {
    display: block;
  }

  mp-stepper-step[active]::part(step-content-error) {
    border-color: var(--mp-color-error);
  }

  .wa-native-off {
    @layer wa-native {
      all: revert-layer !important
    }
  }

  .wa-native-off-deep {
    @layer wa-native {
      all: revert-layer !important;
    }
  }

  .wa-native-off-deep * {
    @layer wa-native {
      all: revert-layer !important;
    }
  }

  mp-form-card > button {
    max-inline-size: 45ch;
    inline-size: 100%;
    user-select: text;
    background-color: inherit;
    box-shadow: var(--wa-shadow-s);
    position: relative;
    border-radius: var(--wa-border-radius-l);
    border: var(--wa-border-width-m) solid var(--mp-color-dark);
    color: inherit;
    border-color: var(--mp-color-dark);
    padding: var(--wa-space-2xl) var(--wa-space-xl);

  }

  mp-form-card .form-description {
    font-size: var(--wa-font-size-s);
    color: var(--mp-color-dark-muted);
    margin-bottom: 0;
  }

  mp-form-card .bundle-form-state-icon {
    border-radius: var(--wa-border-radius-m);
    width: var(--wa-space-2xl);
    height: var(--wa-space-2xl);
    text-align: center;
    justify-content: center;
    align-items: center;
    display: inline-grid;

    background-color: var(--wa-color-blue-80);
    color: var(--wa-color-blue-20);
  }

  mp-form-card wa-icon {
    padding-inline-start: 4px;
  }

  mp-form-card.bundle-form-state--submitted {
    background-color: var(--wa-color-green-80);
    color: var(--wa-color-green-40);
    padding-inline-end: 4px;
  }


  mp-form-card[submission-state="submitted"] {
    cursor: default;
  }

  mp-form-card[submission-state="submitted"] > button {
    cursor: default;
  }

  mp-form-card[submission-state="submitted"] wa-button {
    pointer-events: none;
    cursor: not-allowed;
  }

  :root {
    --mp-form--container-max-width: 900px;
  }

  .mp-iframed {
    padding: var(--wa-space-l) var(--wa-space-m);
  }

  .mp-iframed button[type="submit"], .mp-iframed wa-button[type="submit"] {
    display: none;
    pointer-events: none;
  }

  .packet-name {
  }


  /* Header Styles */
  .header {
    text-align: center;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 20px;
    margin-bottom: 30px;
  }

  .header h1 {
    font-size: 1.2em;
    color: #555;
    letter-spacing: 2px;
    margin: 0;
    font-weight: 600;
  }

  .header span {
    color: #888;
    font-weight: 300;
  }

  /* Main Content Headings */
  h2.document-title {
    text-align: center;
    color: #1a1a1a;
    font-size: 2em;
    margin-bottom: 30px;
  }

  h3 {
    font-size: 1.5em;
    color: #333;
    /*border-bottom: 1px solid #eee;*/
  }

  h4 {
    font-size: 1.2em;
    color: #444;
    margin-top: 25px;
  }

  /* Paragraph and List Styles */
  p, li {
    font-size: 1em;
    margin-bottom: 15px;
  }

  strong {
    font-weight: 600;
  }

  /* Signature and Form Section */
  .signature-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: end;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #555;
  }

  .form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    height: 40px;
  }

  /* Footer Styles */
  .footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #e0e0e0;
    font-size: 0.9em;
    color: #777;
  }

  /* Radio */
  input[type='radio'] {
    display: inline-flex;
  }

  input[type='radio']:checked {
    color: var(--checked-icon-color);

    border-color: var(--wa-form-control-activated-color);
  }

  input[type='radio']:checked::after {
    content: '';

    aspect-ratio: 1;
    width: 100%;
    scale: var(--checked-icon-scale);

    background-color: currentColor;
    border-radius: 50%;

  }

}

main > .form-container {
  display: grid;
  gap: var(--wa-space-m);
  justify-self: center;
  align-self: stretch;
  grid-template-columns: 1fr;
  inline-size: min(100%, var(--mp-form--container-max-width));
}

main > wa-button[type="submit"], main > .form-container > wa-button[type="submit"] {
  justify-self: end;
}

.form-container {
  display: grid;
  grid-template-columns: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Container for the main content */
.form-container:not(:has(.form-container)) {
  background-color: #fff;
  padding: var(--wa-space-m);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@layer mp {
  
  label:has(input[data-form-control-enhanced]) {
    width: 100%;
    display: inline-block;
  }
  
  input[data-form-control-enhanced] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  /*this.input.style.position = 'absolute';*/
  /*this.input.style.width = '1px';*/
  /*this.input.style.height = '1px';*/
  /*this.input.style.opacity = '0';*/
  /*this.input.style.overflow = 'hidden';*/
  /*this.input.style.pointerEvents = 'none';*/
  
  
  .enhanced-file-drop-zone {
    margin-block-start: 0.5em;
    border-radius: 8px;
    /*padding-block-start: 2rem;*/
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    --_mp-file-border-color: #ccc;
  }

  input[type=file]:focus + .enhanced-file-drop-zone,
  .enhanced-file-drop-zone:hover,
  .enhanced-file-drop-zone.dragover {
    --_mp-file-border-color: var(--wa-color-focus);
    background-color: rgba(169, 135, 201, 0.1);
    outline: none;
  }
  input[type=file]:focus-visible + .enhanced-file-drop-zone {
    /*box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);*/
  }

  .enhanced-file-drop-content {
    border: 2px dashed var(--_mp-file-border-color);
    border-radius: var(--wa-form-control-border-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    pointer-events: none;
  }

  .enhanced-file-upload-icon {
    width: 48px;
    height: 48px;
    color: #999;
  }

  .enhanced-file-drop-text {
    font-size: 0.9rem;
  }

  .enhanced-file-preview-container {
    cursor: default;
    border: 1px solid #cdc5d3;
    border-top: none;
    background: #fafafa;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .enhanced-file-preview-container:empty {
    display: none;
  }

  .enhanced-file-preview {
    position: relative;
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f3f3;
    /* 4 stacked shadows to make crisp */
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.05),
      0 2px 4px rgba(0, 0, 0, 0.1);
    
    transition: opacity 0.2s, border-color 0.2s;
  }

  .enhanced-file-preview.status-processing {
    opacity: 0.7;
  }

  .enhanced-file-preview.status-error {
    border-color: #dc3545;
    background: #fff5f5;
  }

  .enhanced-file-preview-content {
    display: flex;
    flex-direction: column;
  }

  .enhanced-file-preview-image {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    overflow: hidden;
  }

  .enhanced-file-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .enhanced-file-type-icon {
    width: 40px;
    height: 40px;
    color: #666;
  }

  .enhanced-file-type-icon svg {
    width: 100%;
    height: 100%;
  }

  .enhanced-file-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #ddd;
    border-top-color: #0066cc;
    border-radius: 50%;
    animation: enhanced-file-spin 0.8s linear infinite;
  }

  @keyframes enhanced-file-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .enhanced-file-preview-info {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .enhanced-file-preview-name {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .enhanced-file-preview-size {
    font-size: 0.65rem;
    color: #888;
  }

  .enhanced-file-preview-status {
    font-size: 0.65rem;
    color: #dc3545;
  }

  .enhanced-file-preview.status-processing .enhanced-file-preview-status {
    color: #0066cc;
  }

  .enhanced-file-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /*background: rgba(0, 0, 0, 0.6);*/
    background: rgba(128, 40, 47, 0.8);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
  }

  .enhanced-file-preview:hover .enhanced-file-preview-remove,
  .enhanced-file-preview-remove:focus {
    opacity: 1;
  }

  .enhanced-file-preview-remove:hover {
    background: rgba(220, 53, 69, 0.9);
  }

  .enhanced-file-preview-remove:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }

  .enhanced-file-preview-remove svg {
    width: 14px;
    height: 14px;
  }
  
  .form-error-list {
    display: block;
    inline-size: 100%;
    border-radius: var(--wa-border-radius-m);
    padding: var(--wa-space-m);
    background-color: var(--wa-color-danger-95);
    border: var(--wa-border-width-m) solid var(--wa-color-danger-50);
    color: var(--wa-color-danger-50);
    font-weight: 600;
    margin-top: 1em;
    list-style: disc;
  }
  .form-error-list:empty {
    display: none;
  }
  
  .form-container:has( > wa-icon[name=check-circle]) {
    grid-template-columns: auto 1fr !important;
    align-items: center;
  }
}