@charset "UTF-8";

@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Black.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-BlackItalic.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-BlackItalic.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Bold.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-BoldItalic.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-ExtraBold.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-ExtraBold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-ExtraBoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-ExtraLight.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-ExtraLightItalic.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-ExtraLightItalic.woff') format('woff'); font-weight: 200; font-style: italic; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Italic.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Italic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Light.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-LightItalic.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-LightItalic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Medium.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-MediumItalic.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-MediumItalic.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Regular.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-SemiBold.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap;}
@font-face {font-family: 'Poppins'; src: url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-SemiBoldItalic.woff2') format('woff2'), url('https://www.puzzleforapurpose.co.uk/fonts/Poppins-SemiBoldItalic.woff') format('woff'); font-weight: 600; font-style: italic; font-display: swap;}

:root {
  /* CONTAINER */
  --container-400: 1480px;
  --container-900: 100%;
  --content-padding-block: 20px;
  --content-padding-inline: 20px;

  /* FONTS */
  --primaryfont: "Poppins", sans-serif;
  --secondaryfont: "Poppins", serif;

  --fontweight-300: 300; /* Light */
  --fontweight-400: 400;
  --fontweight-500: 500; /* Medium */
  --fontweight-600: 600; /* Semibold */
  --fontweight-700: 700; /* Bold */

  /* TEXT SIZE/LINE HEIGHTS */
  --fontsize-100: 0.75rem;
  --fontsize-200: 0.8rem;
  --fontsize-300: 0.9rem;
  --fontsize-400: 1rem;
  --fontsize-500: 1.1rem;
  --fontsize-600: 1.25rem;
  --fontsize-700: 1.5rem;
  --fontsize-800: 1.75rem;
  --fontsize-900: 2rem;
  --defaultlineheight: 1.5;

  /* COLOURS */
  --white: #ffffff;
  --black-100: #F8FAFC;
  --black-200: #e2e8f0;
  --black-300: #cad5e2;
  --black-400: #90a1b9;
  --black-500: #4e5864;
  --black-700: #314158;
  --black-800: #1d293d;
  --black-900: #0f172b;

  --primarycolor-100: #eef2ff;
  --primarycolor-200: #e0e7ff;
  --primarycolor-300: #7c86ff;
  --primarycolor-400: #4f39f6;
  --primarycolor-700: #372aac;
  --primarycolor-900: #1e1a4d;

  --secondarycolor-400: #E8C547;

  --tertiarycolor-400: #4ECDC4;

  --green-100: #d0fae5;
  --green-400: #00d492;
  --green-600: #009966;
  --success: #00d492;
  --orange: #ffb900;
  --warning: #ffb900;
  --red: #e7000b;
  --danger: #e7000b;

}

/* Donate */
.donate p {margin: 0; font-size: var(--fontsize-200); color: var(--black-900);}

.donate .step-bar {display: flex; align-items: flex-start; padding: 20px 30px; background: var(--primarycolor-300); position: sticky; top: 0; z-index: 199;}
.donate .step-bar-item {display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; width: 60px;}
.donate .step-bar-dot {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--black-100); color: var(--black-400); font-size: var(--fontsize-200); font-weight: var(--fontweight-700);}
.donate .step-bar-label {font-size: var(--fontsize-200); color: var(--white); text-align: center;}
.donate .step-bar-line {flex: 1; height: 2px; background: var(--white); margin-top: 15px;}
.donate .step-bar-item.active .step-bar-dot {background: var(--primarycolor-400); color: var(--white);}
.donate .step-bar-item.active .step-bar-label {color: var(--white); font-weight: var(--fontweight-700);}

.donate .step-block {display: none; gap: 20px; height: stretch; padding: 30px}
.donate .step-block.active {display: flex;}
.donate .step-block .grid {margin-top: auto;}

.donate-step {display: flex; align-items: center; gap: 10px;}
.donate-step h2 {margin: 0; font-size: var(--fontsize-400); font-weight: var(--fontweight-700); letter-spacing: 0.05em;}
.donate-step-number {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; line-height: 1; background: var(--primarycolor-400); color: var(--white); font-size: var(--fontsize-200); font-weight: var(--fontweight-700); flex-shrink: 0;}

.donate-type {display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--black-100); background: var(--white); border-radius: 5px;}
.donate-type-btn {background: none; color: var(--black-900); border: none; border-radius: 0; padding: 12px 20px; font-weight: var(--fontweight-700); font-size: var(--fontsize-300);}
.donate-type-btn.active {background: var(--primarycolor-400); color: var(--white);}
.donate-type-arrow {font-size: 1.2em; vertical-align: middle;}

.donate-amounts {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.donate-amount {background: var(--white); color: var(--black-900); border: 1px solid var(--black-100); padding: 12px 10px; font-size: var(--fontsize-300);}
.donate-amount:hover {border-color: var(--primarycolor-400);}
.donate-amount span {font-size: 0.8rem;}
.donate-amount.active {background: var(--primarycolor-400); border: solid 1px var(--primarycolor-400); color: var(--white);}
.donate-amount.active:hover {border-color: var(--primarycolor-400);}

.donate-other {background: var(--white); color: var(--black-900); border: solid 1px var(--white); padding: 12px 20px; width: 100%; font-size: var(--fontsize-300);}
.donate-other:hover {border-color: var(--primarycolor-400);}

.donate-name {display: flex; flex-direction: column; gap: 6px;}
.donate-name label {font-size: var(--fontsize-200); color: var(--black-400);}
.donate-name input {border: 1px solid var(--black-100); background: var(--white); padding: 10px; font-size: var(--fontsize-300);}
.donate-name p {display: flex; align-items: flex-start; gap: 6px; color: var(--black-400);}
.donate-info-icon {flex-shrink: 0;}

.donate .step-buttons {margin-top: auto; row-gap: 10px}
.donate-next {background: var(--primarycolor-400); color: var(--white); border: none; padding: 10px 16px; width: 100%; font-size: var(--fontsize-400); font-weight: var(--fontweight-700);}
.donate-next.grey {background: var(--black-100); border: 1px solid var(--black-400); color: var(--black-900);}
.donate-next.green {background: #18e987; color: var(--black-900);}

.donate textarea {min-height: 100px;}
.donate input, .donate textarea {background: var(--primarycolor-100)}
.donate button[disabled] {cursor: not-allowed; background: var(--black-500); color: var(--black-300)}
.donate input[type="submit"] {background: var(--primarycolor-900); color: var(--white); font-weight: var(--fontweight-700)}

.donate {position: absolute; top: 0; right: -350px; width: 100%; max-width: 400px; height: 100%; box-shadow: -11px 0px 15px -3px rgba(0,0,0,0.6); display: grid; grid-template-columns: 50px 1fr; height: stretch; background: var(--black-100); z-index: 100;}
.donate.opened {right: 0;}
.donate label {font-size: var(--fontsize-100); font-weight: var(--fontweight-600); text-transform: uppercase; color: var(--black-500); letter-spacing: 0.05em; display: flex; margin: 0 0 5px 0}
.donate input, .donate button {font-size: var(--fontsize-200)}
.donate .form-steps {display: flex; flex-direction: column; gap: 20px; height: stretch; overflow-y: scroll;}
.donate .donate-checkbox {display: flex}
.donate hr {background: var(--black-500); height: 1px; width: 100%; margin: 0;}
.donate .donate-bar-toggle {writing-mode: sideways-lr; text-orientation: mixed; font-weight: var(--fontweight-600); font-size: 1rem; animation: onHoverAnimation 3s linear infinite}
.donate.disabled .donate-bar-toggle {background: var(--black-500); color: var(--black-300); cursor: not-allowed; animation: none;}
.donate.disabled {box-shadow: -11px 0px 15px -3px rgba(0,0,0,0.1);}
.donate .donate-bar-toggle:after {font-family: "Font Awesome 6 Pro"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f0a9"; transform: rotate(-90deg); margin: 0 0 10px 0; font-size: 1.2rem}
.donate.opened .donate-bar-toggle:after {transform: rotate(90deg);} 

@keyframes onHoverAnimation {
  0% {background: var(--black-900);}
  50% {background: var(--primarycolor-700);}
  100% {background: var(--black-900);}
}

.zoom {display: none;}

.puzzle-wrapper {grid-template-columns: 1fr 50px; position: relative; overflow: hidden; outline: 1px solid var(--black-900);}
.puzzle-wrapper.puzzle-finished {grid-template-columns: 1fr;}
.puzzle-container {background: var(--black-100); display: grid; grid-template-rows: repeat( var(--rows, 10), minmax(0, 1fr) ); grid-template-columns: repeat( var(--cols, 10), minmax(0, 1fr) ); aspect-ratio: var(--cols, 10) / var(--rows, 10); margin: 40px; width: 100%; margin: 0 auto; justify-content: center; max-width: var(--container-400); overflow: hidden;}
.puzzle-piece {background: var(--white); outline: 1px solid var(--black-900); min-height: 20px; grid-column: span 2; position: relative;}
.puzzle-piece img {width: 100%; height: 100%}

.piece-popup {display: none; background: var(--white); border: 2px solid var(--secondarycolor-400); padding: 20px; position: absolute; top: 8px; left: calc( 100% ); z-index: 50; min-width: 250px; }
.piece-popup:before {content: ""; display: block; width: 20px; height: 20px; background: var(--secondarycolor-400); border-radius: 50%; position: absolute; top: -10px; left: -10px;}
.piece-popup.piece-popup-left {left: auto; right: calc( 100% );}
.piece-popup.piece-popup-left:before {left: auto; right: -10px;}
.piece-popup.piece-popup-bottom {top: auto; bottom: calc( 100% );}
.piece-popup.piece-popup-bottom:before {top: auto; bottom: -10px;}
.puzzle-piece:hover .piece-popup {display: flex; flex-direction: column; gap: 5px;}
.piece-popup p {margin: 0; font-weight: var(--fontweight-700);}
.piece-popup .piece-number {color: var(--primarycolor-400)}
.piece-popup .piece-name {color: var(--secondarycolor-400); font-size: var(--fontsize-500);}
.piece-popup .piece-message {font-weight: var(--fontweight-400); font-size: var(--fontsize-200);}
button.puzzle-piece[data-status="locked"]:hover {cursor: pointer;}

/* bricks */
.puzzle-piece.indent-piece {grid-column: 2 / span 2;}
.puzzle-count {font-size: var(--fontsize-800); color: var(--primarycolor-400); font-weight: var(--fontweight-700); display: flex; align-items: center; gap: 10px;}
.puzzle-count::before {content: "\f12e"; font: var(--fa-font-solid); color: var(--secondarycolor-400); display: block;}
.puzzle-menu {--gap: 20px; align-items: center;}
.puzzle-menu .content {gap: 40px;}
.puzzle-menu .left-col {gap: 20px;}
.puzzle-menu .right-col {gap: 40px;}
.puzzle-menu p {margin: 0;}
.puzzle-menu .input {margin-right: auto; width: 100%; position: relative;}
.puzzle-menu .input input {width: 100%; padding: 8px 40px 8px 10px;}
.puzzle-menu .input input.sr-only {display: none; visibility: hidden;}
.puzzle-menu .input.search {margin-left: auto;}
.puzzle-menu .input.search::after {content: "\f002"; font: var(--fa-font-solid); font-size: var(--fontsize-500); color: var(--primarycolor-400); display: block; position: absolute; right: 10px; top: 11px;}
.puzzle-button {height: max-content; padding: 15px 20px; margin-top: auto;}
.puzzle-piece.selected {background: var(--primarycolor-400); display: flex; align-items: center; align-content: center; justify-content: center;}
.puzzle-piece.selected:after {color: var(--white); font-family: "Font Awesome 6 Pro"; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-weight: 900; content: "\f058";}

/* Leaderboard */
.leader-board {background: var(--primarycolor-200); border-radius: 5px; padding: 40px;}
.leader-board h2 {padding: 0; margin: 0;}
.leader-board .lb-header-row {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--black-900); font-size: 1rem;}
.leader-board .lb-header-row p {margin-right: 25px;}
.leader-board .table-main {overflow: hidden; border-radius: 4px; gap: 5px;}
.leader-board .table-main > div {border-radius: 50vw;}
.leader-board .lb-row {display: grid; grid-template-columns: 105px 1fr 105px; align-items: center; background: #ffffff60; padding: 5px;}
.leader-board .lb-row:nth-child(odd) {background: #f0f0f081;}
.leader-board .lb-row div {padding: 6px 20px; font-size: 1rem;}
.leader-board .lb-row div:nth-child(2) {text-align: center;}
.leader-board .lb-row div:nth-child(3) {text-align: right;}
.leader-board .lb-row span {line-height: 0.9;}
.leader-board .lb-row div:first-child, .leader-board .lb-row div:last-child {text-align: center;}
.leader-board .lb-row--1 div {padding: 20px; font-size: 1.3rem;}
.leader-board .lb-row--2 div {padding: 15px 20px; font-size: 1.2rem;}
.leader-board .lb-row--3 div {padding: 10px 20px; font-size: 1.1rem;}
.leader-board .place, .leader-board .bricks {display: flex; align-content: center; justify-content: center; align-items: center; background: #ffffff50; border-radius: 50vw;}
.leader-board .right-col {justify-content: center; gap: 10px; padding-inline: 40px;}
.leader-board .right-col .see-blockbutton {margin: 0; max-width: max-content;}

.puzzle-terms {margin: 40px 0 0 0;}
.puzzle-terms p {font-size: 0.8rem; margin: 0; font-style: italic}
.puzzle-terms p.heading {font-style: normal; font-weight: var(--fontweight-600)}

.puzzle-access-error {padding: 20px}
.puzzle-access-error p {color: var(--white); padding: 10px 20px; background: red; border-radius: 5px; margin: 0; font-weight: var(--fontweight-600);}

.puzzle-confirmation {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--primarycolor-400); z-index: 300; display: flex; align-items: center; justify-content: center; align-content: center; flex-direction: column; gap: 10px}
.puzzle-confirmation p {color: var(--white); padding: 0; margin: 0;}
.puzzle-confirmation p.heading {font-size: 1.3rem; font-weight: var(--fontweight-600)}
.puzzle-confirmation .blockbutton {background: var(--white); display: flex; padding: 7px 20px; border-radius: 5px; text-decoration: none; color: var(--primarycolor-400); font-weight: var(--fontweight-600)}

.donate .brick-count-sticky {font-size: 0.9rem; font-weight: var(--fontweight-700); color: var(--white); background: var(--black-800); padding: 5px 10px; border-radius: 3px}

.zoom-controls {display: none}

@media screen and (max-width: 768px) {

  :root {
    --button-height: 44px;
    --button-width: 44px;
    --border-radius: 8px;
  }

  /* PUZZLE */
  .zoom {position: relative; display: flex; align-items: center; justify-content: center; width: var(--button-width); height: var(--button-height); padding: 0; margin: 0 0 10px auto; background: var(--white); color: var(--black-900); border: 1px solid var(--black-900); border-radius: var(--border-radius); font-size: 0; cursor: pointer;}
  .zoom::before {content: "\f065"; font: var(--fa-font-solid); font-size: var(--fontsize-400);}
  .zoom::after {content: "Click to zoom into the wall and select your brick"; font-size: var(--fontsize-300); position: absolute; display: block; top: 50%; transform: translateY(-50%); right: calc(100% + 10px); min-width: max-content;}
  .zoom-controls {display: none; position: fixed; z-index: 501; top: 20px; right: 20px; gap: 10px; align-items: center;}
  body.zoom-open .zoom-controls {display: flex;}
  button.zoom-close, [type="button"].zoom-close {display: flex; align-items: center; justify-content: center; width: var(--button-width); height: var(--button-height); padding: 0; background: var(--white); color: var(--black-900); border: none; border-radius: 8px;}
  .zoom-close::after {content: "\f066"; font: var(--fa-font-solid); font-size: var(--fontsize-400);}
  button.zoom-donate, [type="button"].zoom-donate {display: flex; align-items: center; justify-content: center; height: var(--button-height); padding: 0 20px; background: var(--primarycolor-400); color: var(--white); border: none; border-radius: var(--border-radius); font-size: var(--fontsize-300); font-weight: var(--fontweight-700);}
  button.zoom-donate[disabled], [type="button"].zoom-donate[disabled] {background: var(--black-500); color: var(--black-300);
  cursor: not-allowed;}
  .zoom-scrollbar {display: none; position: fixed; z-index: 501; left: 20px; right: 20px; bottom: 30px; height: 20px; background: rgba( 255, 255, 255, 0.25 ); border-radius: 10px;}
  body.zoom-open .zoom-scrollbar {display: block;}
  .zoom-scrollbar-handle {position: absolute; top: 0; left: 0; height: 100%; min-width: 30px; background: var(--white); border-radius: 10px; touch-action: none; cursor: grab;}
  .zoom-scrollbar-handle:active {cursor: grabbing;}
  .puzzle-wrapper {overflow: unset; grid-template-columns: 1fr; grid-template-rows: auto auto;}
  .donate {position: relative; right: unset; max-width: unset; grid-template-columns: unset;}
  .donate.disabled .donate-bar-toggle, .donate .donate-bar-toggle {writing-mode: unset; text-orientation: unset;}
  .puzzle-wrapper.zoomed {position: fixed; inset: 0; z-index: 500; height: 100vh; height: 100dvh; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; background: rgba( 0, 0, 0, 0.85 ); box-sizing: border-box;
  padding: 20px;}
  .puzzle-wrapper.zoomed .donate {display: none;}
  .puzzle-wrapper.zoomed .puzzle-container {height: 80dvh; width: auto; max-width: none; flex-shrink: 0; margin: 0 auto;}
  body.zoom-open { overflow: hidden;}

  .donate label {margin: 0 0 5px 0; font-size: 0.9rem}
  .donate input, .donate button {padding-block: 13px; margin: 0 0 10px 0}
  .donate .step-bar-item {flex-direction: row; width: auto}
  .donate .step-bar-dot {min-width: 25px; height: 25px; width: 25px}
  .donate .step-bar {gap: 10px; padding: 10px 15px}
  .donate .form-steps {gap: 0}
  .donate .step-bar-line {height: 1px; margin-top: 11px}
  .donate .step-block {padding: 20px; gap: 0}
  .donate-step h2 {letter-spacing: 0; margin: 0 0 5px 0;}
  .donate .donate-bar-toggle:after {margin: 0 0 0 10px; font-size: 1rem; transform: rotate(90deg)}
  .donate.disabled .donate-bar-toggle, .donate .donate-bar-toggle {font-size: 0.9rem; margin: 0}
  .donate .brick-count-sticky {padding-block: 10px; font-size: 0.9rem; margin: 0 0 20px 0}
  .donate-name {gap: 0; margin: 0 0 20px 0}
  .donate p {margin: 0 0 10px 0;}
}