/* =========================================
   RESET
========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: #101522;

  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 212, 0, .08),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f6f9fc 48%,
      #ffffff 100%
    );

  min-height: 100vh;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================
   LOADER
========================================= */

.pageLoader {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 18px;

  background: #ffffff;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}

.pageLoader.isHidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pageLoader img {
  width: 70px;
}

.pageLoader span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


/* =========================================
   HEADER
========================================= */

.portalHeader {
  min-height: 82px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  padding:
    12px
    clamp(20px, 4vw, 65px);

  background: rgba(255,255,255,.96);

  border-bottom:
    1px solid #e9edf2;

  box-shadow:
    0 4px 20px rgba(0,0,0,.04);

  position: sticky;
  top: 0;
  z-index: 1000;
}

.portalBrand {
  display: flex;
  align-items: center;
  gap: 14px;

  color: #101522;
  text-decoration: none;
}

.portalBrand img {
  width: 48px;
  height: 58px;
  object-fit: contain;
}

.brandText {
  display: flex;
  align-items: center;
}

.brandText strong {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  white-space: nowrap;
}

.brandText span {
  margin-left: 20px;
  padding-left: 20px;

  border-left:
    2px solid #c9ced8;

  color: #273b5e;

  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;

  white-space: nowrap;
}

.headerActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mainWebsiteButton,
.signInButton {
  min-height: 45px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  padding: 0 18px;

  border-radius: 11px;

  font-weight: 800;
  font-size: 13px;

  text-decoration: none;

  cursor: pointer;
}

.mainWebsiteButton {
  border:
    1px solid #e2e6eb;

  color: #111827;

  background: #fff;

  box-shadow:
    0 5px 15px rgba(0,0,0,.05);
}

.signInButton {
  border: 0;

  background: #e30613;
  color: #fff;

  box-shadow:
    0 8px 22px rgba(227,6,19,.20);
}

.signInButton.isSignedIn {
  background: #15965d;
}


/* =========================================
   MAIN
========================================= */

.portalMain {
  width: min(1500px, 94%);
  margin: auto;

  padding:
    38px 0 60px;
}


/* =========================================
   HERO
========================================= */

.portalHero {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 40px;

  align-items: start;
}

.heroContent {
  max-width: 830px;
}

.eyebrow,
.sectionLabel,
.modalEyebrow {
  display: block;

  color: #e30613;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .7px;

  text-transform: uppercase;
}

.portalHero h1 {
  margin:
    7px 0 6px;

  font-size:
    clamp(32px, 4vw, 52px);

  line-height: 1;

  letter-spacing: -2px;
}

.portalHero p {
  margin:
    0 0 22px;

  color: #516078;

  font-size: 16px;
}


/* =========================================
   SEARCH
========================================= */

.searchBox {
  width: min(100%, 830px);

  min-height: 49px;

  display: flex;
  align-items: center;

  padding: 0 14px;

  border:
    1px solid #dce2e9;

  border-radius: 10px;

  background: #fff;

  box-shadow:
    0 8px 24px rgba(29,48,73,.07);
}

.searchBox > i {
  color: #8492a6;
}

.searchBox input {
  flex: 1;

  min-width: 0;

  border: 0;
  outline: 0;

  padding: 0 12px;

  color: #182235;
  background: transparent;
}

#clearSearchButton {
  display: none;

  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 50%;

  background: #f1f3f6;

  cursor: pointer;
}

#clearSearchButton.isVisible {
  display: block;
}


/* =========================================
   SIGN-IN NOTICE
========================================= */

.signInNotice {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 12px;

  font-size: 11px;
  color: #38475d;
}

.signInNotice i {
  color: #e30613;
}

.signInNotice.isUnlocked i {
  color: #14945c;
}


/* =========================================
   DATE CARD
========================================= */

.dateCard {
  min-width: 220px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 13px 16px;

  border:
    1px solid #e4e7eb;

  border-radius: 12px;

  background: rgba(255,255,255,.94);

  box-shadow:
    0 8px 22px rgba(0,0,0,.06);
}

.dateIcon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: #e30613;
  color: #fff;
}

.dateCard span {
  display: block;

  color: #65738a;

  font-size: 12px;

  margin-bottom: 3px;
}

.dateCard strong {
  font-size: 13px;
}


/* =========================================
   SECTIONS
========================================= */

.portalSection {
  margin-top: 31px;
}

.sectionHeading {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 12px;
}

.sectionHeading h2 {
  margin: 4px 0 0;

  font-size: 27px;

  letter-spacing: -1px;
}

.applicationTotal {
  color: #263b60;
  font-size: 12px;
}


/* =========================================
   RECENT
========================================= */

.recentApplications {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 15px;
}

.recentCard {
  min-height: 84px;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 14px;

  border:
    1px solid #e3e8ee;

  border-radius: 13px;

  background: #fff;

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 8px 24px rgba(0,0,0,.04);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.recentCard:hover {
  transform: translateY(-2px);

  box-shadow:
    0 13px 28px rgba(0,0,0,.08);
}

.recentCardIcon {
  width: 53px;
  height: 53px;

  flex: 0 0 53px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #fff;

  font-size: 21px;
}

.recentCardText strong {
  display: block;

  margin-bottom: 5px;

  font-size: 13px;
}

.recentCardText span {
  color: #607089;
  font-size: 11px;
}


/* =========================================
   ADVERTISEMENTS
========================================= */

.advertisementGrid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 25px;
}

.advertisement {
  min-height: 165px;

  position: relative;

  overflow: hidden;

  display: flex;
  align-items: center;

  gap: 20px;

  padding: 25px 28px;

  border-radius: 15px;

  box-shadow:
    0 14px 35px rgba(0,0,0,.10);
}

.advertisementRed {
  color: #fff;

  background:
    linear-gradient(
      120deg,
      #850813,
      #b50919 60%,
      #e30613
    );
}

.advertisementGold {
  color: #181818;

  background:
    linear-gradient(
      120deg,
      #ffd400,
      #ffc62d 60%,
      #f5a900
    );
}

.advertisementIcon {
  width: 63px;
  height: 63px;

  flex: 0 0 63px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background: rgba(255,255,255,.16);

  font-size: 30px;
}

.advertisementContent {
  position: relative;
  z-index: 2;

  max-width: 440px;
}

.advertisementContent > span {
  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1px;
}

.advertisementContent h3 {
  margin: 5px 0 6px;

  font-size: 25px;
}

.advertisementContent p {
  margin: 0 0 15px;

  line-height: 1.5;

  font-size: 13px;
}

.advertisementContent a {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding: 10px 18px;

  border-radius: 30px;

  background: #fff;

  color: #a20815;

  font-size: 12px;
  font-weight: 900;

  text-decoration: none;
}

.advertisementGold
.advertisementContent a {
  background: #a20815;
  color: #fff;
}

.advertisementArtwork {
  position: absolute;

  right: -20px;
  bottom: -35px;

  font-size: 150px;

  opacity: .10;

  transform: rotate(-7deg);
}


/* =========================================
   APPLICATION GRID
========================================= */

.applicationsSection {
  margin-top: 26px;
}

.applicationGrid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 15px;
}

.applicationCard {
  position: relative;

  min-height: 190px;

  overflow: hidden;

  padding: 16px;

  border:
    1px solid #e1e6ec;

  border-radius: 13px;

  background: #fff;

  box-shadow:
    0 7px 20px rgba(0,0,0,.045);
}

.applicationCard::after {
  content: "";

  position: absolute;

  right: -30px;
  bottom: -40px;

  width: 105px;
  height: 105px;

  border-radius: 50%;

  background:
    var(--card-soft-color);
}

.applicationCard.isLocked {
  background: #f0f2f4;
}

.applicationCard.isLocked
.applicationIcon {
  filter: grayscale(1);

  opacity: .6;
}

.applicationCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}

.applicationIcon {
  width: 47px;
  height: 47px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    var(--card-color);

  color: #fff;

  font-size: 19px;

  box-shadow:
    0 8px 18px
    var(--card-shadow-color);
}

.applicationStatus {
  padding: 5px 9px;

  border-radius: 20px;

  background: #d8f6e9;

  color: #078551;

  font-size: 8px;
  font-weight: 900;

  text-transform: uppercase;
}

.applicationStatus.comingSoon {
  background: #f0f0f0;
  color: #858585;
}

.applicationCard h3 {
  margin:
    14px 0 7px;

  font-size: 14px;
}

.applicationCard p {
  min-height: 42px;

  margin: 0 0 13px;

  color: #64738a;

  font-size: 11px;

  line-height: 1.45;
}

.launchApplication {
  position: relative;
  z-index: 3;

  border: 0;

  padding: 0;

  background: transparent;

  color: #e30613;

  font-size: 11px;
  font-weight: 900;

  cursor: pointer;
}

.applicationCard.isLocked
.launchApplication {
  color: #596474;
}


/* =========================================
   NO RESULTS
========================================= */

.noResults {
  display: none;

  padding: 60px 20px;

  text-align: center;
}

.noResults.isVisible {
  display: block;
}

.noResults i {
  color: #e30613;
  font-size: 30px;
}

.noResults button {
  border: 0;

  padding: 10px 18px;

  border-radius: 8px;

  background: #e30613;
  color: #fff;

  font-weight: 800;

  cursor: pointer;
}


/* =========================================
   MODALS
========================================= */

.modal {
  position: fixed;
  inset: 0;

  z-index: 10000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;
}

.modal.isOpen {
  display: flex;
}

.modalBackdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(8,14,25,.70);

  backdrop-filter:
    blur(5px);
}

.modalCard {
  position: relative;
  z-index: 2;

  width: min(460px, 100%);

  padding: 30px;

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 30px 90px rgba(0,0,0,.30);
}

.modalClose {
  position: absolute;

  right: 16px;
  top: 16px;

  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;

  background: #ffd400;

  color: #8d0915;

  cursor: pointer;
}

.modalLogo img {
  width: 55px;
}

.modalCard h2 {
  margin:
    8px 0;

  font-size: 27px;
}

.modalCard > p {
  color: #627086;

  line-height: 1.5;
}

.modalCard label {
  display: block;

  margin:
    15px 0 7px;

  font-size: 12px;
  font-weight: 800;
}

.modalCard input {
  width: 100%;

  height: 47px;

  border:
    1px solid #d9dee6;

  border-radius: 9px;

  padding: 0 13px;

  outline: 0;
}

.passwordField {
  position: relative;
}

.passwordField input {
  padding-right: 50px;
}

.passwordField button {
  position: absolute;

  right: 5px;
  top: 5px;

  width: 38px;
  height: 37px;

  border: 0;

  background: transparent;

  cursor: pointer;
}

.modalPrimaryButton,
.secondaryButton {
  min-height: 45px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 0 18px;

  border-radius: 9px;

  font-weight: 900;
  font-size: 12px;

  text-decoration: none;

  cursor: pointer;
}

form .modalPrimaryButton {
  width: 100%;

  margin-top: 20px;
}

.modalPrimaryButton {
  border: 0;

  background: #e30613;
  color: #fff;
}

.secondaryButton {
  border:
    1px solid #dce1e7;

  background: #fff;

  color: #303c50;
}

.previewNotice,
.softwareNotice {
  margin-top: 18px;

  padding: 12px;

  border-radius: 9px;

  background: #f5f7f9;

  color: #59687d;

  font-size: 11px;

  line-height: 1.45;
}

.softwareModalIcon {
  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;

  margin-bottom: 15px;

  border-radius: 14px;

  color: #fff;

  font-size: 25px;
}

.modalActions {
  display: flex;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 20px;
}

.modalPrimaryButton.isDisabled {
  opacity: .45;

  pointer-events: none;
}


/* =========================================
   TOAST
========================================= */

.portalToast {
  position: fixed;

  right: 25px;
  bottom: 25px;

  z-index: 20000;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 13px 17px;

  border-radius: 10px;

  background: #111827;
  color: #fff;

  font-size: 12px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.25);

  transform:
    translateY(30px);

  opacity: 0;

  pointer-events: none;

  transition:
    .25s ease;
}

.portalToast.isVisible {
  transform:
    translateY(0);

  opacity: 1;
}

.portalToast i {
  color: #ffd400;
}


/* =========================================
   FOOTER
========================================= */

.portalFooter {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  padding:
    25px
    clamp(20px, 4vw, 65px);

  border-top:
    1px solid #e5e8ed;

  color: #738096;

  font-size: 11px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 1050px) {

  .applicationGrid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .recentApplications {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 800px) {

  .portalHeader {
    padding: 10px 15px;
  }

  .portalBrand img {
    width: 40px;
    height: 48px;
  }

  .brandText strong {
    font-size: 16px;
  }

  .brandText span {
    margin-left: 10px;
    padding-left: 10px;

    font-size: 11px;
  }

  .mainWebsiteButton span,
  .signInButton span {
    display: none;
  }

  .mainWebsiteButton,
  .signInButton {
    width: 43px;
    min-width: 43px;

    padding: 0;
  }

  .portalMain {
    width: 92%;

    padding-top: 25px;
  }

  .portalHero {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .dateCard {
    width: 100%;
  }

  .advertisementGrid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 580px) {

  .portalHero h1 {
    font-size: 36px;
  }

  .brandText span {
    display: none;
  }

  .recentApplications,
  .applicationGrid {
    grid-template-columns: 1fr;
  }

  .recentCard {
    min-height: 75px;
  }

  .advertisement {
    min-height: 185px;

    padding: 22px 18px;
  }

  .advertisementIcon {
    width: 50px;
    height: 50px;

    flex-basis: 50px;

    font-size: 23px;
  }

  .advertisementContent h3 {
    font-size: 20px;
  }

  .sectionHeading h2 {
    font-size: 24px;
  }

  .modal {
    padding: 10px;
  }

  .modalCard {
    padding: 25px 20px;
  }

  .modalActions {
    flex-direction: column;
  }

  .modalActions > * {
    width: 100%;
  }

  .portalFooter {
    flex-direction: column;
  }

}
/* =====================================================
   CORNWALL COLLEGE OFFICIAL CARD COLORS
   Red + Yellow
===================================================== */

:root {
  --cc-red: #e30613;
  --cc-dark-red: #9f0711;
  --cc-yellow: #ffd400;
  --cc-soft-yellow: #fff8cf;
}


/* =========================
   APPLICATION CARDS
========================= */

.applicationCard {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #ffffff 72%,
      #fff8cf 100%
    ) !important;

  border: 2px solid #ffd400 !important;

  box-shadow:
    0 8px 22px rgba(159, 7, 17, .12) !important;
}

.applicationCard:hover {
  border-color: #e30613 !important;

  transform: translateY(-3px);

  box-shadow:
    0 13px 30px rgba(159, 7, 17, .20) !important;
}


/* decorative circle */

.applicationCard::after {
  background: rgba(255, 212, 0, .20) !important;
}


/* =========================
   ALL APPLICATION ICONS RED
========================= */

.applicationIcon {
  background:
    linear-gradient(
      145deg,
      #e30613,
      #a30812
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 8px 18px rgba(227, 6, 19, .25) !important;
}


/* =========================
   AVAILABLE LABEL
========================= */

.applicationStatus {
  background: #ffd400 !important;

  color: #8b0710 !important;

  border: 1px solid #e5bb00;

  font-weight: 900;
}


/* =========================
   COMING SOON
========================= */

.applicationStatus.comingSoon {
  background: #9f0711 !important;

  color: #ffffff !important;

  border-color: #9f0711;
}


/* =========================
   APPLICATION TITLES
========================= */

.applicationCard h3 {
  color: #9f0711;

  font-weight: 900;
}


/* =========================
   LAUNCH LINKS
========================= */

.launchApplication {
  color: #e30613 !important;

  font-weight: 900;
}


/* =========================
   LOCKED CARDS
========================= */

.applicationCard.isLocked {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fffbea
    ) !important;

  opacity: .78;
}


/* Don't turn school colors gray */

.applicationCard.isLocked
.applicationIcon {
  filter: none !important;

  opacity: .65;

  background: #e30613 !important;
}

.applicationCard.isLocked
.launchApplication {
  color: #9f0711 !important;
}


/* =========================
   RECENTLY USED CARDS
========================= */

.recentCard {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fff9da 100%
    ) !important;

  border: 2px solid #ffd400 !important;

  box-shadow:
    0 7px 20px rgba(159, 7, 17, .10) !important;
}

.recentCard:hover {
  border-color: #e30613 !important;

  box-shadow:
    0 12px 28px rgba(159, 7, 17, .18) !important;
}


/* Force ALL recent icons red */

.recentCardIcon {
  background:
    linear-gradient(
      145deg,
      #e30613,
      #9f0711
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 7px 17px rgba(227, 6, 19, .22);
}

.recentCardText strong {
  color: #9f0711;
}


/* =========================
   DATE CARD
========================= */

.dateCard {
  border: 2px solid #ffd400;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fff9dc
    );
}

.dateIcon {
  background: #e30613;
  color: #ffd400;
}


/* =========================
   SEARCH BOX
========================= */

.searchBox {
  border: 2px solid #ffd400;
}

.searchBox:focus-within {
  border-color: #e30613;

  box-shadow:
    0 8px 25px rgba(227, 6, 19, .12);
}


/* =========================
   SECTION LABELS
========================= */

.eyebrow,
.sectionLabel,
.modalEyebrow {
  color: #e30613;
}


/* =========================
   SIGN IN
========================= */

.signInButton {
  background:
    linear-gradient(
      135deg,
      #e30613,
      #9f0711
    );

  color: #ffffff;
}

.signInButton:hover {
  background: #9f0711;
}


/* =========================
   MODALS
========================= */

.modalCard {
  border-top: 7px solid #e30613;
}

.modalClose {
  background: #ffd400;
  color: #9f0711;
}

.modalPrimaryButton {
  background: #e30613;
  color: #ffffff;
}

.modalPrimaryButton:hover {
  background: #9f0711;
}


/* =========================
   TOAST
========================= */

.portalToast {
  background: #9f0711;
  color: #ffffff;

  border-left: 5px solid #ffd400;
}

.portalToast i {
  color: #ffd400;
}