/* GENERIC */

:root {
  --schole-red: #6b1328;
  --schole-gray: #e2e2e2;
  --logo: url("https://cdn.shopify.com/s/files/1/0668/5304/4458/files/sa-shield.png?v=1762793894");
}

body.noscroll {
  overflow: hidden;
}

/* LOADING */

div.loading-animation {
  height: 100px !important;
  position: relative !important;
  width: 100px !important;
  overflow: visible !important;
}

div.loading-animation > div {
  float: left !important;
  height: 50% !important;
  position: relative !important;
  width: 50% !important;
  overflow: visible !important;
}

div.loading-animation > div:before {
  background-image: var(--logo);
  background-size: 100px 100px;
  background-repeat: no-repeat;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

div.loading-animation > div:first-of-type:before {
  animation: top-left-fold 2.4s infinite linear both;
  background-position: 0 0;
  transform-origin: bottom right;
}

div.loading-animation > div:nth-of-type(2):before {
  animation: top-right-fold 2.4s infinite linear both 0.3s;
  background-position: -50px 0;
  transform-origin: bottom left;
}

div.loading-animation > div:nth-of-type(3):before {
  animation: bottom-left-fold 2.4s infinite linear both 0.9s;
  background-position: 0 -50px;
  transform-origin: top right;
}

div.loading-animation > div:nth-of-type(4):before {
  animation: bottom-right-fold 2.4s infinite linear both 0.6s;
  background-position: -50px -50px;
  transform-origin: top left;
}

/* COURSE */

#cart-course-message {
  background-color: #e4cdd3;
  border-radius: 0.5rem;
  color: var(--schole-red);
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 10px;
  padding: 1rem;
}

#cart-course-message.cart-early-access-message {
  background-color: #fff;
}

#cart-course-message h3 {
  color: var(--schole-red);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5rem;
}

#cart-course-message a {
  color: var(--schole-red);
  font-weight: bold;
}

#early-access-guest-message {
  line-height: 1.75rem;
  white-space: pre-wrap;
}

#cart-course-content {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
}

#cart-course-tutoring,
#cart-course-help {
  padding: 0.5rem;
}

#cart-course-tutoring {
  border-top: 1px solid var(--schole-gray);
}

#cart-course-tutoring a,
#cart-course-help a {
  color: var(--schole-red);
}

#cart-course,
#cart-sections {
  max-width: 100%;
  padding: 0.5rem;
  width: auto;
}

#cart-course div {
  margin-bottom: 10px;
}

#cart-course div:last-of-type {
  margin-bottom: 0;
}

#cart-course-content h4 {
  font-size: 1rem;
}

#cart-sections ul {
  padding-left: 0;
}

li.cart-section,
#more-sections {
  align-items: flex-start;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

li.cart-section:last-of-type {
  margin-bottom: 0;
}

li.cart-section > span,
#more-sections > span {
  line-height: 2.65rem;
}

.cart-enroll-button,
.cart-waiting-list-button,
.more-sections-button {
  border-radius: 1rem;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  transition: 0.25s all ease;
  margin: auto;
}

.cart-enroll-button {
  background-color: var(--schole-red);
  color: white;
}

.cart-waiting-list-button {
  background-color: darkgrey;
  color: black;
}

.more-sections-button {
  background-color: white;
  color: var(--schole-red);
}

.cart-enroll-button,
.cart-waiting-list-button,
.more-sections-button {
  margin: 0;
  padding: 0.25rem;
  text-align: center;
  width: 7rem;
}

/* MODAL */

#cart-modal {
  border-radius: 0.25rem;
  border: none;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  margin: auto 1rem;
  max-width: 900px;
  min-height: 50%;
  position: relative;
  width: auto;
}

#cart-modal::backdrop {
  backdrop-filter: blur(2px);
}

#cart-modal-close {
  color: darkgrey;
  font-size: 1.5rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}

#cart-modal-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}

#cart-modal-content #cart-modal-loading,
#cart-modal-content #cart-modal-error {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

#cart-modal-loading {
  height: 100%;
  left: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  width: 100%;
}

#cart-modal-content #cart-modal-error pre {
  background: var(--schole-gray);
  margin: 10px 0;
}

#cart-modal-content div,
#cart-modal-content p {
  text-align: center;
  width: 100%;
}

#cart-modal-content a {
  border-bottom: 1px solid rgba(107, 19, 40, 0.2);
  color: var(--schole-red);
  display: inline-block;
}

#cart-modal-content p {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* MODAL HEADER */

#cart-modal-content #cart-modal-header h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}

/* MODAL MAIN */

#cart-modal #cart-modal-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* the orders modal needs some space to breathe */
#cart-modal #cart-modal-main:has(#orders) {
  min-width: 80%;
}

#cart-modal #cart-modal-message:not(:empty) {
  background: rgba(107, 19, 40, 0.2);
  border-radius: 0.25rem;
  color: var(--schole-red);
  margin-top: 20px;
  padding: 10px;
  white-space: pre-wrap;
}

/* MODAL FORM */

#cart-modal p#form-instructions {
  font-style: italic;
  margin: 0 auto 10px;
  max-width: 35em;
}

#cart-modal form div.cart-form-group {
  margin-bottom: 10px;
}

#cart-modal form p.cart-form-helper-text {
  color: #666;
  font-size: 0.875rem;
  font-style: italic;
  margin: 0 0 15px 0;
  text-align: left;
}

#cart-modal form p.cart-form-helper-text a {
  color: var(--schole-red);
}

#cart-modal form div.cart-form-row {
  display: flex;
  flex-direction: column;
}

#cart-modal form button,
#cart-modal form input:not([type="checkbox"]),
#cart-modal form label,
#cart-modal form select,
#cart-modal form textarea {
  font-size: 1rem;
  line-height: 1.5rem;
  width: 100%;
}

#cart-modal form button,
#cart-modal form input,
#cart-modal form select,
#cart-modal form textarea {
  background: var(--schole-gray);
  border: none;
  border-radius: 0.25rem;
  box-sizing: border-box;
  padding: 5px 10px;
}

#cart-modal form input,
#cart-modal form label {
  text-align: left;
}

#cart-modal form button[type="submit"] {
  background: var(--schole-red);
  color: #fff;
  cursor: pointer;
}

#cart-modal form button[type="submit"]:disabled {
  background: var(--schole-gray);
  cursor: not-allowed;
}

#cart-modal form input:-webkit-autofill,
#cart-modal form input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}

#cart-modal form input:disabled {
  opacity: 0.4;
}

#cart-modal form input:focus {
  outline: none;
}

#cart-modal form input[type="checkbox"] {
  accent-color: var(--schole-red);
}

#cart-modal form label {
  display: block;
}

#cart-modal form select {
  height: 2.1rem;
}

#cart-modal form div.cart-form-checkbox {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: flex-start;
  margin-bottom: 10px;
}

#cart-modal form div.cart-form-checkbox > label {
  font-size: small;
}

#cart-modal form textarea {
  resize: vertical;
}

/* MODAL FOOTER */

#cart-modal #cart-modal-footer {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-direction: column;
}

#cart-modal #cart-modal-footer button {
  background: var(--schole-red);
  border-radius: 0.25rem;
  border: 1px solid var(--schole-red);
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 5px 10px;
}

#cart-modal #cart-modal-footer button:first-of-type {
  background: #fff;
  color: var(--schole-red);
  margin-right: 10px;
}

#cart-modal #cart-modal-footer button:last-of-type {
  background: var(--schole-red);
  color: #fff;
  margin-right: 0;
}

#cart-modal #cart-modal-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* SELECT STUDENT MODAL */

div#cart-students,
button#cart-add-student {
  max-width: 50%;
}

#cart-students {
  display: flex;
  flex-direction: column;
  width: calc(100% / 3);
}

#cart-students button.cart-student {
  background: #fff;
  border-radius: 0.25rem;
  border: 1px dotted #555;
  box-sizing: border-box;
  color: #555;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 10px;
  padding: 5px 10px;
  width: 100%;
}

#cart-students button.cart-current-student {
  background: var(--schole-gray);
  border: 1px solid #333;
  color: #333;
  cursor: default;
}

button#cart-add-student {
  background: #fff;
  border-radius: 0.25rem;
  border: 1px solid var(--schole-red);
  box-sizing: border-box;
  color: var(--schole-red);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 5px 10px;
  width: 100%;
}

button#cart-add-student:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* CART MODAL */

a#cart-empty-link {
  background: var(--schole-red);
  border-radius: 0.25rem;
  border: 1px solid var(--schole-red);
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 10px;
  padding: 5px 10px;
}

#cart-items div.cart-item {
  border-radius: 0.25rem;
  border: solid 2px var(--schole-red);
  box-sizing: border-box;
  display: flex;
  margin-bottom: 20px;
  padding: 2em;
}

#cart-items div.cart-item-product-title,
#cart-items div.cart-item-variant-title,
#cart-items div.cart-item-student {
  text-align: left;
}

#cart-items div.cart-item-product-title {
  color: var(--schole-red);
  font-size: 1.125rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  line-height: 1.75rem;
}

#cart-items div.cart-item-variant-title {
  color: darkgrey;
}

#cart-items div.cart-item-student {
  color: var(--schole-red);
}

#cart-items div.cart-item-cost {
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: right;
}

#cart-items div.cart-item-cost span {
  font-size: 0.875rem;
  line-height: 1.5rem;
  vertical-align: top;
}

#cart-items div.cart-item-additional-info {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#cart-items button.cart-remove-item {
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid var(--schole-red);
  color: var(--schole-red);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0.25rem;
  width: 8rem;
}

/* TUTORING */

#tutoring-description {
  max-width: 35em;
}

#tutoring-description ul {
  list-style: inside;
}

div.tutoring-field {
  margin-top: 10px;
}

#tutoring-purchase {
  background-color: var(--schole-red);
  border: 1px solid var(--schole-red);
  border-radius: 1rem;
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  margin: 20px 0 0;
  padding: 0.25rem;
  text-align: center;
  width: 7rem;
}

#tutoring-purchase:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ENROLLMENTS & ORDERS */
#cart-modal-main #orders-main .order-amount-total,
#cart-modal-main #orders-main .order-enrollments {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

#cart-modal-main #orders-main .order-amount-total .order-amount-original {
  text-decoration: line-through;
}

#cart-modal-main #orders-enrollments-nav,
#cart-modal-main #orders-orders-nav {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.5rem;
}

#cart-modal-main #orders-orders-nav {
  margin-top: 1rem;
}

#enrollments,
#enrollments-main,
#orders,
#orders-main,
#students,
#students-main {
  display: flex;
  flex-direction: column;
}

#enrollments-header,
#cart-modal-content div.enrollment,
#orders-header,
#cart-modal-content div.order,
#students-header,
#cart-modal-content div.student {
  border-bottom: 3px solid var(--schole-gray);
}

#enrollments-header,
#orders-header,
#students-header {
  display: none;
}

#enrollments-header div,
#cart-modal-content div.enrollment div,
#orders-header div,
#cart-modal-content div.order div,
#students-header div,
#cart-modal-content div.student div {
  padding: 0.5rem 0;
  text-align: left;
}

#enrollments-header div:last-of-type div.enrollment div,
#orders-header div:last-of-type div.order div,
#students-header div:last-of-type div.student div {
  text-align: right;
}

#orders-header div:nth-child(n + 3) {
  text-align: right;
}

#orders-enrollments {
  margin-top: 2rem;
}

#orders-enrollments-title {
  text-align: left;
  color: var(--schole-red);
  font-weight: bold;
}

#orders-enrollments-header {
  text-align: left;
  color: var(--schole-red);
  font-weight: bold;
}

#enrollments-header div,
#orders-header div,
#orders-enrollments-header div,
#students-header div {
  color: var(--schole-red);
  font-weight: bold;
}

div.enrollment-student:before,
div.enrollment-status:before,
div.enrollment-course-name:before,
div.enrollment-section-name:before,
div.order-number:before,
div.order-amount:before,
div.order-enrollments:before,
div.order-date:before,
div.student-name:before,
div.student-birthdate:before,
div.student-notes:before,
div.student-actions:before {
  color: var(--schole-red);
  display: block;
  font-weight: bold;
}

div.enrollment-student:before {
  content: "Student:";
}

div.enrollment-status:before {
  content: "Status:";
}

div.enrollment-course-name:before {
  content: "Course:";
}

div.enrollment-section-name:before {
  content: "Section:";
}

div.enrollment-order-number:before,
div.order-number:before {
  content: "Order:";
}

div.order-amount:before {
  content: "Amount:";
}

div.order-enrollments:before {
  content: "Enrollments:";
}

div.order-date:before {
  content: "Date:";
}

div.student-name:before {
  content: "Name:";
}

div.student-birthdate:before {
  content: "Birthdate:";
}

div.student-notes:before {
  content: "Notes:";
}

div.student-actions:before {
  content: "Actions:";
}

div.student-actions a {
  margin-right: 1rem;
}

div.student-actions a:last-of-type {
  margin-right: 0;
}

/* ANIMATIONS */

@keyframes top-left-fold {
  0%,
  10% {
    opacity: 0;
    transform: perspective(140px) rotateX(-180deg);
  }
  25%,
  75% {
    opacity: 1;
    transform: perspective(140px) rotateX(0deg);
  }
  90%,
  100% {
    opacity: 0;
    transform: perspective(140px) rotateY(180deg);
  }
}

@keyframes top-right-fold {
  0%,
  10% {
    opacity: 0;
    transform: perspective(140px) rotateY(180deg);
  }
  25%,
  75% {
    opacity: 1;
    transform: perspective(140px) rotateY(0deg);
  }
  90%,
  100% {
    opacity: 0;
    transform: perspective(140px) rotateX(-180deg);
  }
}

@keyframes bottom-right-fold {
  0%,
  10% {
    opacity: 0;
    transform: perspective(140px) rotateX(180deg);
  }
  25%,
  75% {
    opacity: 1;
    transform: perspective(140px) rotateX(0deg);
  }
  90%,
  100% {
    opacity: 0;
    transform: perspective(140px) rotateY(-180deg);
  }
}

@keyframes bottom-left-fold {
  0%,
  10% {
    opacity: 0;
    transform: perspective(140px) rotateY(180deg);
  }
  25%,
  75% {
    opacity: 1;
    transform: perspective(140px) rotateY(0deg);
  }
  90%,
  100% {
    opacity: 0;
    transform: perspective(140px) rotateX(-180deg);
  }
}

/* on tablet and up*/
@media only screen and (min-width: 767px) {
  #cart-course-content {
    font-size: 0.875rem;
  }

  #cart-modal-main #orders-enrollments-nav,
  #cart-modal-main #orders-orders-nav {
    justify-content: flex-end;
  }

  li.cart-section,
  #more-sections {
    align-items: center;
    flex-direction: row;
    gap: 0;
  }

  #cart-modal {
    width: 50%;
    margin: auto;
  }

  #enrollments-header,
  #cart-modal-content div.enrollment,
  #orders-header,
  #orders-enrollments-header,
  #cart-modal-content div.order,
  #students-header,
  #cart-modal-content div.student {
    border-width: 1px;
    display: flex;
    gap: 2rem;
  }

  div.enrollment-student:before,
  div.enrollment-status:before,
  div.enrollment-course-name:before,
  div.enrollment-section-name:before,
  div.enrollment-order-number:before,
  div.order-number:before,
  div.order-amount:before,
  div.order-enrollments:before,
  div.order-date:before,
  div.student-name:before,
  div.student-birthdate:before,
  div.student-notes:before,
  div.student-actions:before {
    display: none;
  }

  #cart-modal-main #orders-main .order-amount-total,
  #cart-modal-main #orders-main .order-enrollments {
    justify-content: flex-end;
  }
}

/* on laptop and up*/
@media only screen and (min-width: 992px) {
  #cart-course-content {
    flex-direction: row;
    justify-content: flex-start;
  }

  #cart-course {
    padding-right: 1rem;
  }

  #cart-course,
  #cart-sections {
    width: 50%;
  }

  .cart-enroll-button,
  .cart-waiting-list-button,
  .more-sections-button {
    font-size: 0.875rem;
  }

  #cart-modal {
    min-height: calc((100% / 3) * 2);
    padding: 2em;
  }
}

/* on xl laptop and up*/
@media only screen and (min-width: 1280px) {
  #cart-modal form div.cart-form-row {
    flex-direction: row;
    gap: 1rem;
  }
}