/*
* Contact Form Stylesheet
* Sunco HC SALA-960
* 
* Table of Contents:
* 1. CSS Variables (Custom Properties)
* 2. Base Layout & Container Styles
* 3. Form Elements
*    3.1. Input Fields (Text, Email, Select)
*    3.2. Textarea
*    3.3. Labels
*    3.4. Error States
*    3.5. Buttons
*    3.6. File Upload
* 4. Typography
* 5. Success & Error States
* 6. Popup & Modal Styles
* 7. Loading States & Animations
* 8. Transitions & Visibility
*/

/* ========================================
   1. CSS Variables (Custom Properties)
   ======================================== */
:root {
  /* Colors */
  --cf-color-white: #fff;
  --cf-color-black: #000;
  --cf-color-dark: #2d3745;
  --cf-color-gray: #69778b;
  --cf-color-light-gray: #f5f5f57a;
  --cf-color-text: #48576f;

  /* Error colors */
  --cf-color-error: #ff5252;
  --cf-color-error-border: #ffcdd2;
  --cf-color-error-bg: #fff5f5;

  /* Shadows */
  --cf-shadow-popup: 0 0 10px rgba(0, 0, 0, 0.3);
  --cf-shadow-depth: 0 32px 40px rgba(35, 43, 54, 0.1);
  --cf-shadow-border: 0 0px 8px rgba(35, 43, 54, 0.06);
  --cf-shadow-overlay: rgba(0, 0, 0, 0.5);

  /* Spacing */
  --cf-spacing-xs: 4px;
  --cf-spacing-sm: 8px;
  --cf-spacing-md: 12px;
  --cf-spacing-lg: 16px;

  /* Font Sizes */
  --cf-font-size-xs: 11px;
  --cf-font-size-sm: 12px;
  --cf-font-size-md: 14px;
  --cf-font-size-lg: 24px;

  /* Font Weights */
  --cf-font-weight-normal: 400;
  --cf-font-weight-medium: 500;
  --cf-font-weight-bold: 700;

  /* Line Heights */
  --cf-line-height-xs: 14px;
  --cf-line-height-sm: 16px;
  --cf-line-height-md: 18px;
  --cf-line-height-lg: 24px;

  /* Dimensions */
  --cf-label-container-height: 20px;
  --cf-error-container-height: 20px;
  --cf-input-height: 40px;
  --cf-textarea-height: 156px;
  --cf-upload-button-width: 159px;
  --cf-upload-button-height: 32px;
  --cf-icon-size-sm: 16px;
  --cf-gap-xs: 2px;

  /* Calculated dimensions */
  --cf-fieldset-height: calc(
    var(--cf-input-height) + var(--cf-error-container-height) + var(--cf-label-container-height)
  );
  --cf-fieldset-mobile-height: calc(
    var(--cf-input-height) + (var(--cf-error-container-height) * 1.25) +
      var(--cf-label-container-height)
  );
  --cf-message-fieldset-height: calc(
    var(--cf-textarea-height) + var(--cf-error-container-height) + var(--cf-label-container-height)
  );

  --cf-form-max-width: 712px;
  --cf-spinner-size: 20px;
  --cf-loader-size: 56px;

  /* Border radius */
  --cf-border-radius: 8px;

  /* Animation durations */
  --cf-animation-duration-fast: 0.3s;
  --cf-animation-duration-normal: 0.8s;

  /* Animation timing functions */
  --cf-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Opacity values */
  --cf-opacity-disabled: 0.5;
  --cf-opacity-semi-transparent: 0.3;

  /* Placeholder Typography */
  --cf-placeholder-font-size: var(--cf-font-size-md);
  --cf-placeholder-font-weight: var(--cf-font-weight-normal);
  --cf-placeholder-line-height: var(--cf-line-height-md);
  --cf-placeholder-color: var(--cf-color-gray);
}

/* ========================================
   2. Base Layout & Container Styles
   ======================================== */

/* Main form container */
.contact-form {
  position: relative;
  padding-left: var(--cf-spacing-lg);
  padding-right: var(--cf-spacing-lg);
  max-width: var(--cf-form-max-width);
  width: 100%;
  margin: auto;
  transition:
    opacity var(--cf-animation-duration-fast) var(--cf-ease-standard),
    transform var(--cf-animation-duration-fast) var(--cf-ease-standard),
    visibility 0s linear var(--cf-animation-duration-fast);
}

/* Grid layout for form elements */
.contact-form__grid {
  row-gap: var(--cf-spacing-md);
}

.contact-form__row {
  row-gap: var(--cf-spacing-md);
}

/* Standard field heights */
.contact-form__field {
  /* Base styles for all form fields */
}

.contact-form__field--user,
.contact-form__field--email,
.contact-form__field--category {
  height: var(--cf-fieldset-height);
}

@media screen and (max-width: 767px) {
  .contact-form__field--user,
  .contact-form__field--email,
  .contact-form__field--category {
    height: var(--cf-fieldset-mobile-height);
  }
}

.contact-form__field--message {
  height: var(--cf-message-fieldset-height);
}

.contact-form__field--upload {
  height: min-content;
}

/* Success screen layout */
.contact-form__success {
  display: grid;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  height: 100%;
  min-height: 800px;
}

/* Overlay background for popups */
.shadowed-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--cf-shadow-overlay);
  z-index: 999;
}

/* ========================================
   3. Form Elements
   ======================================== */

/* 3.1. Input Fields (Text, Email, Select) */

.contact-form__field--email,
.contact-form__field--user,
.contact-form__button {
  width: 100%;
}

input.contact-form__input,
select.contact-form__input {
  border-radius: var(--cf-border-radius);
  height: var(--cf-input-height);
  font-size: var(--cf-font-size-md);
  font-weight: var(--cf-font-weight-normal);
  line-height: var(--cf-line-height-md);
  color: var(--cf-color-text);
  background: var(--cf-color-white);
}

.contact-form__input:disabled {
  background: var(--cf-color-light-gray);
}

.contact-form__select {
  /* Specific styles for select inputs */
  appearance: auto; /* Restore native dropdown appearance */
}

/* Placeholder styling for all inputs */
.contact-form__input::placeholder,
textarea.contact-form__input::placeholder,
select.contact-form__input::placeholder {
  font-size: var(--cf-placeholder-font-size);
  font-weight: var(--cf-placeholder-font-weight);
  line-height: var(--cf-placeholder-line-height);
  color: var(--cf-placeholder-color);
  opacity: 1; /* Firefox applies opacity to placeholders, this ensures consistency */
}

/* For Internet Explorer */
.contact-form__input:-ms-input-placeholder,
textarea.contact-form__input:-ms-input-placeholder,
select.contact-form__input:-ms-input-placeholder {
  font-size: var(--cf-placeholder-font-size);
  font-weight: var(--cf-placeholder-font-weight);
  line-height: var(--cf-placeholder-line-height);
  color: var(--cf-placeholder-color);
}

/* For Microsoft Edge */
.contact-form__input::-ms-input-placeholder,
textarea.contact-form__input::-ms-input-placeholder,
select.contact-form__input::-ms-input-placeholder {
  font-size: var(--cf-placeholder-font-size);
  font-weight: var(--cf-placeholder-font-weight);
  line-height: var(--cf-placeholder-line-height);
  color: var(--cf-placeholder-color);
}

/* Specific field placeholders */
#field-name::placeholder,
#field-email::placeholder,
#field-category::placeholder,
#field-message::placeholder {
  color: var(--cf-placeholder-color);
  font-size: var(--cf-placeholder-font-size);
  font-weight: var(--cf-placeholder-font-weight);
}

/* Select placeholder styling */
select.contact-form__input option.placeholder-option {
  display: none; /* Hide it in dropdown list but still shows as initial value */
}

/* Styling for the select dropdown without a value */
select.contact-form__input:not(.has-value) {
  font-size: var(--cf-placeholder-font-size);
  font-weight: var(--cf-placeholder-font-weight);
  line-height: var(--cf-placeholder-line-height);
  color: var(--cf-placeholder-color);
}

/* All actual options in the dropdown list have normal text style */
select.contact-form__input option:not(.placeholder-option) {
  color: var(--cf-color-text);
  font-size: var(--cf-font-size-md);
  font-weight: var(--cf-font-weight-normal);
}

/* Styling for the select element when a real value is selected */
select.contact-form__input.has-value {
  color: var(--cf-color-text);
  font-size: var(--cf-font-size-md);
  font-weight: var(--cf-font-weight-normal);
}

/* Support for validation states */
select.contact-form__input:invalid {
  color: var(--cf-placeholder-color);
}

/* 3.2. Textarea */

.contact-form__textarea {
  height: var(--cf-textarea-height);
  resize: vertical; /* Allow vertical resizing */
}

#field-message {
  border-radius: var(--cf-border-radius);
}

/* 3.3. Labels */

.contact-form__label {
  margin-bottom: var(--cf-spacing-xs);
  font-weight: var(--cf-font-weight-bold);
  font-size: var(--cf-font-size-md);
  line-height: var(--cf-line-height-sm);
  letter-spacing: 0%;
  display: flex;
  height: var(--cf-line-height-sm);
}

.contact-form__label-hint {
  font-weight: var(--cf-font-weight-medium);
  font-size: var(--cf-font-size-xs);
  line-height: var(--cf-line-height-md);
}

/* 3.4. Error States */

.contact-form__label--error {
  color: var(--cf-color-error);
  font-weight: var(--cf-font-weight-normal);
  font-size: var(--cf-font-size-sm);
  line-height: var(--cf-line-height-sm);
  margin-left: var(--cf-spacing-xs);
  margin-top: var(--cf-spacing-xs);
}

.error-field {
  border-color: var(--cf-color-error-border);
  background-color: var(--cf-color-error-bg);
  align-items: center;
  gap: var(--cf-gap-xs);
}

.contact-form__field--error .contact-form__input {
  border-color: var(--cf-color-error-border);
  background-color: var(--cf-color-error-bg);
}

/* Ensure all field types have error styling */
input.error-field,
select.error-field,
textarea.error-field {
  border-color: var(--cf-color-error-border);
  background-color: var(--cf-color-error-bg);
}

/* Specific error styling for all fields */
#field-name.error-field,
#field-email.error-field,
#field-category.error-field,
#field-message.error-field {
  border-color: var(--cf-color-error-border);
  background-color: var(--cf-color-error-bg);
}

.contact-form__error-message {
  color: var(--cf-color-error);
  font-size: var(--cf-font-size-sm);
  margin-top: var(--cf-spacing-xs);
  display: flex;
  align-items: center;
}

/* 3.5. Buttons */

.contact-form__button--primary {
  /* Primary button styles */
}

.contact-form__button--primary:disabled {
  opacity: var(--cf-opacity-disabled);
  cursor: not-allowed;
}

.contact-form__button--secondary {
  /* Secondary button styles */
}

.contact-form__actions {
  /* Styles for the button container */
}

/* 3.6. File Upload */

input#file-upload-button {
  background-color: var(--cf-color-dark);
  width: var(--cf-upload-button-width);
  height: var(--cf-upload-button-height);
  border-radius: var(--cf-border-radius);
  font-size: var(--cf-font-size-sm);
  font-weight: var(--cf-font-weight-bold);
  line-height: var(--cf-line-height-sm);
  color: var(--cf-color-gray);
}

/* Uppy file uploader styling */
.uppy-Dashboard-AddFiles-title {
  font-size: var(--cf-font-size-md) !important;
  line-height: var(--cf-line-height-sm) !important;
  font-weight: var(--cf-font-weight-normal) !important;
  margin-bottom: var(--cf-spacing-sm) !important;
  margin-top: var(--cf-spacing-sm) !important;
  padding: 0 !important;
  width: fit-content !important;
}

.contact-form__attachments
  > div
  > div
  > div.uppy-Dashboard-inner
  > div
  > div.uppy-Dashboard-files
  > div {
  height: auto !important;
}

.uppy-size--md .uppy-Dashboard-AddFiles-list {
  margin-top: 0 !important;
}

.uppy-Dashboard-Item {
  height: auto !important;
}

/* ========================================
   4. Typography
   ======================================== */

.contact-form__title,
.contact-form__success-title {
  font-size: var(--cf-font-size-lg);
  line-height: var(--cf-line-height-lg);
  font-weight: var(--cf-font-weight-bold);
  margin-bottom: var(--cf-spacing-sm);
}

.contact-form__subtitle,
.contact-form__success-subtitle {
  font-size: var(--cf-font-size-md);
  line-height: var(--cf-line-height-sm);
  font-weight: var(--cf-font-weight-normal);
  color: var(--cf-color-text);
}

/* ========================================
   5. Success & Error States
   ======================================== */

/* Error states are defined in section 3.4 */

/* ========================================
   6. Popup & Modal Styles
   ======================================== */

.contact-form__popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--cf-color-white);
  padding: var(--cf-spacing-md);
  box-shadow: var(--cf-shadow-popup);
  z-index: 1000;
}

.contact-form__popup-content {
  text-align: center;
}

.contact-form__popup.lt-hidden {
  display: none;
}

/* ========================================
   7. Loading States & Animations
   ======================================== */

.button-spinner {
  position: relative;
}

.button-spinner.loading {
  color: transparent;
}

.button-spinner.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cf-spinner-size);
  height: var(--cf-spinner-size);
  margin-top: calc(var(--cf-spinner-size) / -2);
  margin-left: calc(var(--cf-spinner-size) / -2);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, var(--cf-opacity-semi-transparent));
  border-top-color: var(--cf-color-white);
  animation: spinner var(--cf-animation-duration-normal) var(--cf-ease-standard) infinite;
}

.contact-form .button-spinner.loading::after {
  border-top-color: var(--cf-color-black);
}

.contact-form__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.contact-form__loading-holder {
  background-color: var(--cf-color-white);
  border-radius: var(--cf-border-radius);
  width: var(--cf-loader-size);
  height: var(--cf-loader-size);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    var(--cf-shadow-depth),
    /* Depth shadow */ var(--cf-shadow-border); /* Border shadow */

  animation: fadeIn var(--cf-animation-duration-fast) ease-in-out;
}

/* Animation keyframes */
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   8. Transitions & Visibility
   ======================================== */

/* Show popup with animation */
.contact-form.lt-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s, 0s, 0s;
}

/* Hide popup smoothly */
.contact-form.lt-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.95);
  transition-delay: 0s, 0s, var(--cf-animation-duration-fast);
}

.uppy-Informer {
  display: none !important; /* Hide Uppy notifications */
}