@font-face {
  font-family: SRMMacho;
  src: url("/upload/assets/fonts/MachoModular-Medium.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: SRMMacho;
  src: url("/upload/assets/fonts/MachoModular-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html{
background-color: #000;
}
/* SRM Connect 2027 ? common styles, isolated from Coffee components. */
.srm2027 {
  --srm-orange: #f57c00;
  --srm-ink: #302c26;
  --srm-gold: #d5b25b;
  color: var(--srm-ink);
  font-family: SRMMacho, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}
.srm2027 *,
.srm2027 *::before,
.srm2027 *::after {
  box-sizing: border-box;
}
.srm2027 img {
  max-width: 100%;
  height: auto;
  display: block;
}
.srm2027 a {
  color: inherit;
}
.srm2027 h1,
.srm2027 h2,
.srm2027 h3,
.srm2027 p {
  margin: 0 0 1em;
}
.srm2027 h2 {
  font-size: clamp(25px, 2.6vw, 42px);
  line-height: 1.15;
  font-weight: 700;
}
.srm2027 h3 {
  font-size: 24px;
  line-height: 1.25;
}
.srm2027 p {
  font-size: clamp(16px, 1.25vw, 20px);
}
.srm2027 .srm-wrap {
  width: min(1160px, calc(100% - 64px));
  margin-inline: auto;
}
.srm2027 .srm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 30px;
  border: 0;
  border-radius: 40px;
  background: white;
  color: #302c26;
  font:
    700 16px/1.25 SRMMacho,
    Arial,
    sans-serif;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 10px #0002;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.srm2027 .srm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px #0003;
}
.srm2027 .srm-btn-dark {
  background: #2d2b28;
  color: white;
}
.srm2027 .srm-btn-gold {
  background: linear-gradient(100deg, #fff3a8, #d2aa4f, #fff3ba);
}
.srm2027 .srm-btn-orange {
  background: var(--srm-orange);
  color: white;
}
.srm2027 .srm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.srm2027 .srm-rule {
  display: block;
  width: 65%;
  height: 2px;
  background: currentColor;
  margin: -4px 0 26px;
  opacity: 0.65;
}
.srm2027 .srm-panel {
  border: 3px solid white;
  border-radius: clamp(28px, 5vw, 78px);
  padding: clamp(28px, 4.2vw, 68px);
  box-shadow: 0 5px 14px #0002;
}
.srm2027 .srm-muted {
  font-size: 14px;
}
.srm2027 :focus-visible {
  outline: 3px solid #225fb7;
  outline-offset: 5px;
}
.srm2027 [hidden] {
  display: none !important;
}
.srm2027 label {
  display: block;
  font-weight: 700;
  margin-bottom: 7px;
}
.srm2027 input,
.srm2027 select,
.srm2027 textarea {
  width: 100%;
  padding: 14px 17px;
  border: 1px solid #b5a77a;
  border-radius: 12px;
  background: #fff;
  color: #302c26;
  font:
    16px/1.5 SRMMacho,
    Arial,
    sans-serif;
}
.srm2027 textarea {
  resize: vertical;
  min-height: 135px;
}
.srm2027 .srm-field {
  margin: 0 0 22px;
}
.srm2027 .srm-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.srm2027 .srm-message {
  margin: 18px 0 0;
  font-size: 16px;
}
.srm2027 .srm-counter {
  display: block;
  text-align: right;
  font-size: 13px;
  margin-top: 4px;
}
.srm2027 .srm-counter.is-over {
  color: #a01212;
  font-weight: bold;
}
.srm2027 .srm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[id^="srm-"] {
  scroll-margin-top: 100px;
}
@media (max-width: 640px) {
  .srm2027 .srm-wrap {
    width: calc(100% - 36px);
  }
  .srm2027 .srm-two {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .srm2027 .srm-actions {
    gap: 12px;
  }
  .srm2027 .srm-actions .srm-btn {
    flex: 1 1 auto;
  }
  .srm2027 .srm-panel {
    border-width: 2px;
  }
  .srm2027 h3 {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .srm2027 * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
  
/*
 * Coffee 2027 navigation override.
 * Included in global.css. For an existing installation, this file can also
 * be pasted at the END of the global CSS as a standalone hotfix.
 * Keep the CMS menu and its native #nav-toggle click handler.
 */
#navigation,
#navigation * {
  box-sizing: border-box;
}

#navigation {
  position: sticky;
  inset: 0 0 auto;
  z-index: 1000;
  width: 100%;
  height: auto;
  min-height: 78px;
  padding: 0;
  background: #fff;
  font-family: SRMMacho, Arial, sans-serif;
  box-shadow: 0 1px 8px #0001;
}

#navigation > .container {
  width: 100%;
  max-width: 1800px;
  height: auto;
  margin: 0 auto;
  padding: 0 32px;
}

#navigation .nav-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 78px;
  height: auto;
}

#navigation .brand {
  position: static;
  float: none;
  flex: 0 0 155px;
  width: 155px;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: normal;
}

#navigation .brand > a {
  display: block;
  margin: 0;
  padding: 0;
  line-height: normal;
}

#navigation .brand .logoMenu {
  display: block;
  width: 155px;
  max-width: 100%;
  height: auto;
  max-height: 58px;
  margin: 0;
  object-fit: contain;
}

/* Coffee has a second <nav> inside the outer navigation element. */
#navigation .nav-container > nav,
#navigation .nav-container > div:not(.brand) {
  position: static;
  float: none;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

#navigation ul.nav-list {
  position: static;
  float: none;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 18px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
}

#navigation ul.nav-list > li {
  position: relative;
  display: block;
  float: none;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Reset the template's !important anchor margins and mobile padding. */
#navigation ul.nav-list > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 0 !important;
  background: transparent;
  color: #302c26;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

#navigation ul.nav-list > li > a:hover,
#navigation ul.nav-list > li > a:focus-visible {
  color: #ae5500;
}

#navigation ul.nav-list > li > a.srm-nav-cta,
#navigation ul.nav-list > li > a[href*="nominationPortal"] {
  justify-content: center;
  padding: 12px 20px !important;
  border-radius: 30px;
}

#navigation ul.nav-list > li > a.srm-nav-cta {
  background: #f57c00;
  color: #fff;
}

#navigation ul.nav-list > li > a[href*="nominationPortal"] {
  background: linear-gradient(110deg, #ecd681, #ba923e, #f1dc9a);
  color: #302c26;
}

#navigation .nav-mobile {
  display: none;
}

/* Same breakpoint as the actual Coffee 2027 template. */
@media (min-width: 1270px) {
  #navigation ul.nav-list {
    display: flex !important;
  }
}

@media (width < 1270px) {
  #navigation {
    min-height: 72px;
  }

  #navigation > .container {
    padding: 0 20px;
  }

  #navigation .nav-container {
    min-height: 72px;
  }

  #navigation .brand {
    flex-basis: 140px;
    width: 140px;
  }

  #navigation .brand .logoMenu {
    width: 140px;
    max-height: 52px;
  }

  #navigation .nav-mobile {
    position: absolute;
    inset: 0 0 auto auto;
    display: block;
    width: 54px;
    height: 72px;
    background: transparent;
  }

  #navigation #nav-toggle {
    position: absolute;
    top: 14px;
    right: 0;
    left: auto;
    display: block;
    width: 48px;
    height: 44px;
    padding: 20px 8px;
    cursor: pointer;
  }

  #navigation #nav-toggle span,
  #navigation #nav-toggle span::before,
  #navigation #nav-toggle span::after {
    width: 30px;
    height: 3px;
    background: #e77b00;
  }

  #navigation #nav-toggle.active span {
    background: transparent;
  }

  #navigation ul.nav-list {
    position: absolute;
    top: 100%;
    right: -20px;
    left: -20px;
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: auto;
    height: auto !important;
    max-height: calc(100dvh - 72px);
    margin: 0;
    padding: 12px 20px 20px;
    overflow-x: hidden;
    overflow-y: auto !important;
    background: #fff;
    box-shadow: 0 12px 18px #0002;
  }

  /* Native Coffee toggles .active; local preview toggles .is-open. */
  #navigation:has(#nav-toggle.active) ul.nav-list,
  #navigation ul.nav-list.is-open {
    display: flex !important;
  }

  #navigation ul.nav-list > li {
    flex: 0 0 auto;
    width: 100%;
  }

  #navigation ul.nav-list > li > a {
    width: 100%;
    min-height: 48px;
    padding: 14px 12px !important;
    font-size: 15px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #navigation ul.nav-list > li > a.srm-nav-cta,
  #navigation ul.nav-list > li > a[href*="nominationPortal"] {
    margin-top: 8px !important;
  }

  #navigation .srm-menu-toggle {
    width: 54px;
    height: 72px;
    padding: 12px;
    border: 0;
    background: transparent;
    color: #e77b00;
    font-size: 25px;
    cursor: pointer;
  }
}

#navigation :focus-visible {
  outline: 3px solid #225fb7;
  outline-offset: 3px;
}

/* Navigation is sticky in normal flow, not the template's fixed overlay. */
#navigation ~ .firstSection {
  margin-top: 0;
}

/* SRM 2027 ? dopisz NA KONCU /css/edit_template.css.
   Font SRMMacho i logo sa juz dostepne na stronie.
   Medal w tle jest przyblizeniem wzoru, zapisanym jako SVG w CSS.
   Style strony aktywuja sie tylko w obecnosci formularza logowania.
*/

body:has(#ParticipantLoginView) {
  --login-orange: #f57c00;
  --login-ink: #302c26;
  min-width: 0;
  max-width: none;
  margin: 0;
  background: #fff;
  color: var(--login-ink);
  font-family: SRMMacho, Arial, sans-serif;
}

body:has(#ParticipantLoginView) #navigation {
  position: absolute;
  inset: 0 0 auto;
  min-height: 0;
  height: auto;
  padding: clamp(24px, 2.8vw, 54px) clamp(24px, 3.44vw, 66px);
  background: transparent;
  box-shadow: none !important;
}

body:has(#ParticipantLoginView) #navigation > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body:has(#ParticipantLoginView) #navigation .nav-container {
  min-height: 0;
  height: auto;
}

body:has(#ParticipantLoginView) #navigation .brand {
  flex: 0 0 auto;
  width: clamp(170px, 12.5vw, 240px);
  margin: 0;
}

body:has(#ParticipantLoginView) #navigation .brand .logoMenu {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
}

/* Puste menu i stopka nie wystepuja na projekcie logowania. */
body:has(#ParticipantLoginView) #navigation .nav-container > nav,
body:has(#ParticipantLoginView) > footer {
  display: none;
}

body:has(#ParticipantLoginView) #section2 {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 170px 24px;
  overflow: hidden;
  background: #fff;
}

/* Dekoracja nie przechwytuje klikniec ani nie zmienia ukladu. */
body:has(#ParticipantLoginView) #section2::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(100%, 980px);
  height: 100%;
  pointer-events: none;
  opacity: .18;
  filter: blur(4px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='1080' viewBox='0 0 980 1080'%3E%3Cg fill='none' stroke='%23c8ac62' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M980 79 Q951 53 923 67 Q900 35 870 51 Q842 23 810 43 Q780 23 752 49 Q717 33 696 63 Q659 58 646 91 Q606 95 599 132 Q561 139 555 176 Q520 198 525 232 Q488 255 499 292 Q462 321 480 355 Q449 387 470 422 Q444 460 472 488 Q454 530 487 555 Q480 595 514 615 Q512 653 549 670 Q556 709 594 714 Q612 749 651 742 Q678 778 711 758 Q745 784 777 761 Q814 782 839 754 Q879 768 900 735 Q940 741 953 704 Q982 702 997 678'/%3E%3Cpath d='M585 402 C591 247 704 151 833 177 C930 195 1000 272 1015 364 M657 568 C718 638 815 659 888 619 C921 600 935 660 980 726'/%3E%3Cpath d='M621 752 C590 739 561 917 528 981 L626 917 L683 1045 L754 825 Q773 766 798 823 L949 1045 L991 944 M619 768 C568 911 501 1078 25 1067'/%3E%3C/g%3E%3C/svg%3E") right center / auto 100% no-repeat;
}

#ParticipantLoginView,
#ParticipantLoginView * {
  box-sizing: border-box;
}

#ParticipantLoginView.container {
  width: min(100%, 996px);
  max-width: 996px;
  min-height: 578px;
  margin: 0;
  /* !important nadpisuje bootstrapowe .py-5. */
  padding: 88px 48px 86px !important;
  border: 7px solid var(--login-orange, #f57c00);
  border-radius: 164px;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 15px 32px rgb(48 44 38 / 12%),
              inset 0 16px 30px rgb(48 44 38 / 9%);
  color: var(--login-ink, #302c26);
  font-family: SRMMacho, Arial, sans-serif;
}

/* Usuniecie pustego akapitu nad naglowkiem w obecnym HTML. */
#ParticipantLoginView > p:has(> br:only-child) {
  display: none;
}

#ParticipantLoginView > p:has(strong) {
  margin: 0 0 50px;
  text-align: center;
  line-height: 1.2;
}

#ParticipantLoginView > p strong,
#ParticipantLoginView > p strong span {
  font-family: inherit;
  font-size: clamp(40px, 4vw, 76px) !important;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

#ParticipantLoginSectionForm {
  width: min(100%, 642px);
  margin: 0 auto;
}

#ParticipantLoginSectionForm fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#ParticipantLoginSectionForm .form-group.row {
  display: block;
  margin: 0 0 24px;
}

#ParticipantLoginSectionForm .form-group.row > .col-12,
#ParticipantLoginSectionForm .form-group.row > .col-6 {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

#ParticipantLoginSectionForm input.form-control {
  display: block;
  width: 100%;
  height: 66px;
  padding: 12px 24px;
  border: 1px solid var(--login-orange, #f57c00);
  border-radius: 36px;
  background: #fff;
  color: #302c26;
  font: 700 28px/1.3 SRMMacho, Arial, sans-serif;
  box-shadow: 0 16px 30px rgb(48 44 38 / 22%);
}

#ParticipantLoginSectionForm input.form-control::placeholder {
  color: #a6a5a2;
  opacity: 1;
}

#ParticipantLoginSectionForm .form-group.justify-content-center {
  margin: 34px 0 0;
  text-align: center;
}

#ParticipantLoginSectionForm button[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  max-width: 100%;
  min-height: 64px;
  padding: 12px 28px;
  border: 0;
  border-radius: 36px;
  background: var(--login-orange, #f57c00);
  color: #fff;
  font: 700 28px/1.3 SRMMacho, Arial, sans-serif;
  text-transform: none;
  box-shadow: 0 16px 30px rgb(48 44 38 / 22%);
  cursor: pointer;
}

#ParticipantLoginSectionForm button[type="submit"].btn:hover {
  background: #df7000;
}

#ParticipantLoginSectionForm input.form-control:focus-visible,
#ParticipantLoginSectionForm button[type="submit"].btn:focus-visible {
  outline: 3px solid #302c26;
  outline-offset: 5px;
}

#ParticipantLoginSectionForm button[type="submit"].btn:disabled {
  opacity: .65;
  cursor: wait;
}

#ParticipantLoginSectionForm input.form-control.is-invalid,
#ParticipantLoginSectionForm input.form-control.error,
#ParticipantLoginSectionForm input.form-control[aria-invalid="true"] {
  border-color: #b42318;
}

#ParticipantLoginSectionForm label.error,
#ParticipantLoginSectionForm .invalid-feedback {
  margin: 12px 20px 0;
  color: #b42318;
  font-size: 15px;
}

@media (max-width: 767px) {
  body:has(#ParticipantLoginView) #section2 {
    padding: 140px 20px 60px;
  }

  #ParticipantLoginView.container {
    min-height: 0;
    padding: 48px 24px !important;
    border-width: 4px;
    border-radius: 64px;
  }

  #ParticipantLoginView > p:has(strong) {
    margin-bottom: 34px;
  }

  #ParticipantLoginSectionForm input.form-control {
    height: 56px;
    padding-inline: 20px;
    font-size: 20px;
  }

  #ParticipantLoginSectionForm button[type="submit"].btn {
    width: 220px;
    min-height: 56px;
    font-size: 22px;
  }
}

@media (max-width: 380px) {
  #ParticipantLoginView.container {
    padding-inline: 18px !important;
    border-radius: 44px;
  }
}

