/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background-color: var(--amla-background);
  font: var(--amla-font-default);

  /* 
    The initial animation of .app__main makes it larger than the screen
    hide the overflow to prevent scroll bars
   */
  overflow: hidden;
}

/* 
  Structural styles

  .app__main 
    .app__header
    .app__content-wrapper
    .app__footer
*/

.app__main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;

  color: var(--amla-background-contrast);
}

/* 
  To support the zoom animation the background is applied
  as a psuedo absolute position element the scale/blur of which
  can then be animated without effecting the child content
*/
.app__main::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  
  background-image: url("/assets/background/bg-1366.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: center;
  z-index: -1;
}

@keyframes zoomOut {
  0% {
    transform: scale(2);
  }

  100% {
    transform: scale(1);
  }
}

.app__main--animate-once { 
  /* 
    Targeted to by JS to achieve a once per session animation of the background
    if you renamed either .app__main--animate-once or .app__main--animate
    You MUST update the corresponding JS in _Layout
  */
}
.app__main--animate::after {
  animation: zoomOut 0.6s ease-out;
}

/* Use lower resolution background images for smaller devices */
@media (min-width: 1367px)  {
  .app__main::after  {
    background-image: url("/assets/background/bg-1920.jpg");
  }
}

@media (min-width: 1921px)  {
  .app__main::after  {
    background-image: url("/assets/background/bg-3840.jpg");
  }
}

@media (min-width: 3831px)  {
  .app__main::after  {
    background-image: url("/assets/background/bg-7168.jpg");
  }
}

/* The header, typically containing the branding - using grid and text-align for firefox compatibility */
.app__header {
  height: 35%;
  min-height: 135px;
  display: grid;
  text-align: center; 
  align-items: center;
}

/* The footer, usually contains nothing but used for spacing */
.app__footer {
  flex: 1;
}

/* Wraps the main content */
.app__content-wrapper {
  padding: 0 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 
  Wrapping styling for most pages that constrains the width, this should omitted
  for the product grid pages to allow the grid to take up as much horizontal space
  as it needs
*/
.app__content {
  max-width: 536px;
  width: 100%;
  text-align: center;
}

.app__hidden {
  display: none;
}


/* form related */

.app__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.app__form-field + .app__form-field {
  margin-top: 32px;
}

.app__form-field {
  width: 100%;
  text-align: left;
}

.app__form-field-label {
  display: flex;
  align-items: center;
}

.app__form-field-action {
  align-self: end;
  color: var(--amla-background-contrast-muted);
  font: var(--amla-font-action);
}
a.app__form-field-action {
    text-decoration: none;
}
a.app__form-field-action:hover {
    text-decoration: underline;
}

.app__form-field-action-lr-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.app__form-field-action-lr-row > a.app__form-field-action {
    line-height: 48px;
}

.app__form-field-rich-error {
    font: var(--amla-font-button);
    text-align: left;
    margin-top: -16px;
    padding-left: 16px;
    padding-right: 16px;
}
.app__form-field-rich-error, .app__form-field-rich-error a {
    color: var(--amla-error);
}

.app__form-button {
  background-color: var(--amla-control-primary);
  border-radius: 4px;
  border: none;
  color: var(--amla-primary-contrast);
  font: var(--amla-font-button);
  text-decoration: none;

  padding: 8px 52px;
  margin: 0 10px;
  cursor: pointer;
}

.app__form-button:hover {
  background-color: var(--amla-control-primary-hover);
}

.app__form-button--secondary {
  background-color: var(--amla-control-secondary);
  border-radius: 4px;
  border: none;
  color: var(--amla-primary-contrast);
  font: var(--amla-font-button);

  padding: 8px 52px;
  margin: 0 10px;
  cursor: pointer;
}

.app__form-button--secondary:hover {
  background-color: var(--amla-control-secondary-hover);
}

/* Misc / typography */

.app__heading {
  font: var(--amla-font-heading);
}

.app__email {
  font: var( --amla-font-email);
  color: var(--amla-control-primary);
  margin: 0;
}

.app__text-content {
  text-align: center;
  margin-bottom: 48px;
}

.app__list {
  text-align: left;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app__info {
  align-self: start;
  margin-top: 24px;
  text-align: left;
}

.app__list-item--error {
    color: var(--amla-error);
    font-weight: 500;
}

.app__plain-link {
    color: var(--amla-background-contrast)
}

.app__error-paragraph {
    margin: 16px 0;
    text-align: center;
}