/*
		Free Pirateparty photo generator v1.1
		Made by Joshua (TheYOSH) Rubingh for Piratenpartij Nederland - 10 Sept 2016

		This script uses the latest HTML5 techniques for offline file reading and manipulation.
		No data is uploaded to the server. All graphical calculation is done in the local browser.

		modified to be used as the LP photogenerator V0.1
		source code changed to allow for the different logo
		source code changed to replace pp with lp
		source code changed to replace purple with blue
		adapter by Rico for LP - 19 July 2025
*/
/*
introduce vars for the colors
*/
:root {
  --primary-color: #f6921a;
  --secondary-color: #03254c;
  --tertiary-color: #053d7d;
  --light-text-color: #fff;
  --shadow-color: #222;
}

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  padding: 0 0 64px 0;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  color: var(--shadow-color);
  background-color: var(--light-text-color);
  max-width: 500px;
  box-shadow: 0 8px 8px 0 var(--shadow-color);
  position: relative;
}
#sizeSlider {
  width: 100% !important;
}

.version {
  position: absolute;
  top: 8px;
  right: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--light-text-color);
  z-index: 1000;
  font-weight: bold;
}

.header,
.shamless-plug,
.controls,
.container,
.description-container,
#pasfoto_generator {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 18px;
  gap: 24px;
}

.controls {
  align-items: flex-start
}

/* SVG Color Controls */
.color-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  width: 100%;
  padding-bottom: 2px;
}

.color-control label {
  min-width: 120px;
  font-weight: 500;
}

.color-control input[type="color"] {
  width: 60px;
  height: 40px;
  border: 1px solid var(--shadow-color);
  border-radius: 8px;
  cursor: pointer;
  background: none;
  padding: 0;
}

.color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-control input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.color-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.transparent-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--shadow-color);
  border-radius: 6px;
  background: var(--light-text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.transparent-btn:hover {
  background: var(--primary-color);
  color: var(--light-text-color);
}

.transparent-btn.active {
  background: var(--tertiary-color);
  color: var(--light-text-color);
  border-color: var(--tertiary-color);
}

.color-control span {
  font-family: monospace;
  font-size: 12px;
  color: var(--tertiary-color);
  margin-left: auto;
}

/* Hide color controls initially */
#svg-color-controls {
  margin-top: 16px;
}

#svg-color-controls h3 {
  margin-bottom: 16px;
  color: var(--tertiary-color);
  text-align: center;
}

.container > div {
  width: 100%;
}

.header {
  background-color: var(--primary-color);
  color: var(--light-text-color);
  position: relative;
}

h1 {
  text-transform: uppercase;
  padding-bottom: 0;
}

h1, p, h2 {
  margin: 8px 0;
}

/* Overlay styles removed - now using select dropdown */
.generator_preview {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.container {
  width: 100%;
  margin: 0 auto;
  background: var(--primary-color)12;
}

.preview-container {
  position: relative;
  display: inline-block;
  padding: 2px;
}

.preview-container canvas {
  width: 100%;
  height: auto;
  max-width: 391px;
  display: block;
}

/* Elements that should match preview container width */
.preview-width {
  width: 100%;
  margin: 0 auto;
}

/* Position overlay styles removed - now using click-to-position on canvas */

/* Mask button styles */
.mask-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.mask-button {
  /* Inherits from .btn and .action-button classes */
  flex: 1;
  min-width: 0;
}

.mask-button svg {
  display: block;
  margin: 0 auto;
}

.mask-button.active {
  background-color: #f6921a;
  border-color: #f6921a;
  color: white;
}

.mask-button.active:hover {
  background-color: #e8820a;
  border-color: #e8820a;
}

/* Button base class */
.btn {
  text-decoration: none;
  padding: 12px;
  width: 100%;
  color: var(--light-text-color);
  background-color: var(--secondary-color);
  cursor: pointer;
  box-sizing: border-box;
  display: inline-block;
  transition: all 0.2s ease;
  box-shadow: 8px 8px 0 var(--shadow-color);
  border: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.btn:hover {
  background-color: var(--tertiary-color);
  transform: translateY(-1px);
}

/* Size slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
  height: 8px;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: var(--shadow-color);
  height: 8px;
  border-radius: 4px;
  width: 100%;
}

input[type="range"]::-webkit-slider-track {
  background: var(--shadow-color);
  height: 8px;
  border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--secondary-color);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow-color);
  margin-top: -6px; /* Centers the thumb on the track */
}

input[type="range"]::-webkit-slider-thumb:hover {
  background-color: var(--tertiary-color);
  transform: translateY(-1px);
  box-shadow: 4px 4px 0 var(--shadow-color);
}

input[type="range"]::-moz-range-track {
  background: var(--shadow-color);
  height: 8px;
  border-radius: 4px;
  border: none;
}

input[type="range"]::-moz-range-thumb {
  background: var(--secondary-color);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 4px 4px 0 var(--shadow-color);
}

input[type="range"]::-moz-range-thumb:hover {
  background-color: var(--tertiary-color);
  transform: translateY(-1px);
  box-shadow: 4px 4px 0 var(--shadow-color);
}

.action-button svg {
  display: block;
  margin: 0 auto;
}

/* Size slider container styling */
#sizeSlider, #sizeValue {
  display: inline-block !important;
  vertical-align: middle;
}

.button-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Hide file input and its title */
#pasfoto {
  display: none;
}

h2:first-of-type {
  display: none;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {

  .generator_menu {
    width: 100%;
    max-width: none;
    padding: 10px;
  }
  
  .generator_preview {
    width: 100%;
    max-width: none;
  }
  
  .preview-container {
    max-width: 100%;
    width: 100%;
  }
  
  .preview-container canvas {
    max-width: 100%;
    width: 100%;
  }
  
  .preview-width {
    max-width: 100%;
    width: 100%;
  }
  
  input[type="range"] {
    width: 100%;
    max-width: 300px;
  }
  
  /* Position overlay styles removed */
}

#buy_me_a_coffee {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#qrcode-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#buy_me_a_coffee:hover {
  background-color: var(--tertiary-color);
  transform: translateY(-1px);
  box-shadow: 4px 4px 0 var(--shadow-color);
}

#qrcode {
  margin: 40px 0 20px 0;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #f6921a 0%, #e8820a 100%);
  border-radius: 0;
  box-shadow: 0 8px 25px rgba(246, 146, 26, 0.3);
  position: relative;
  overflow: visible;
}

#qrcode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  pointer-events: none;
}

#qrcode canvas,
#qrcode img {
  border-radius: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background: white;
  padding: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

#qrcode canvas:hover,
#qrcode img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#qrcode canvas:active,
#qrcode img:active {
  transform: scale(0.98);
}

/* QR code clickable container styling */
#qrcode > div {
  position: relative;
  transition: all 0.3s ease;
  border-radius: 0;
  cursor: pointer;
}

#qrcode > div:hover {
  transform: translateY(-2px);
}

#qrcode > div:active {
  transform: translateY(0);
}

/* Always visible lightning payment label */
#qrcode > div::before {
  content: 'Betaal met lightning, klik om te openen';
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f6921a, #e8820a);
  color: white;
  padding: 6px 12px;
  border-radius: 0;
  font-size: 11px;
  font-weight: bold;
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(246, 146, 26, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
}

/* Hover tooltip with click instruction */
#qrcode > div::after {
  content: 'Betaal met lightning, klik om te openen';
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f6921a, #e8820a);
  color: white;
  padding: 6px 12px;
  border-radius: 0;
  font-size: 11px;
  font-weight: bold;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(246, 146, 26, 0.4);
  z-index: 1001;
}

#qrcode > div:hover::before {
  opacity: 0;
}

#qrcode > div:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Mobile responsive styles for QR code */
@media screen and (max-width: 768px) {
  #qrcode {
    margin: 35px 0 15px 0;
    padding: 15px;
  }
  
  #qrcode canvas,
  #qrcode img {
    width: 200px !important;
    height: 200px !important;
    padding: 8px;
  }
  
  /* Mobile always visible label */
  #qrcode > div::before {
    content: 'Betaal met lightning, klik om te openen';
    top: -30px;
    font-size: 10px;
    padding: 5px 10px;
  }

  /* Mobile hover tooltip */
  #qrcode > div::after {
    content: 'Betaal met lightning, klik om te openen';
    top: -30px;
    font-size: 10px;
    padding: 5px 10px;
  }
}

@media screen and (max-width: 480px) {
  #qrcode {
    margin: 30px 0 10px 0;
    padding: 10px;
  }
  
  #qrcode canvas,
  #qrcode img {
    width: 150px !important;
    height: 150px !important;
    padding: 6px;
  }
  
  /* Small screens always visible label */
  #qrcode > div::before {
    content: 'Betaal met lightning, klik om te openen';
    top: -25px;
    font-size: 9px;
    padding: 4px 8px;
  }

  /* Small screens hover tooltip */
  #qrcode > div::after {
    content: 'Betaal met lightning, klik om te openen';
    top: -25px;
    font-size: 9px;
    padding: 4px 8px;
  }
}

.svg-display {
  max-height: 60vh;
  padding: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.svg-display svg {
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  width: auto;
  height: auto;
  display: block;
}

/* Checkerboard background for transparent SVG background */
.svg-display.checkerboard-bg {
  background-image: 
    linear-gradient(45deg, #e0e0e0 25%, transparent 25%), 
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%), 
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #f5f5f5;
}
textarea {
  width: 100%;
  height: 200px;
  font-family: monospace;
}

/* Color control input styling */
.color-control {
  margin: 0;
  display: grid;
  grid-template-columns: 160px 90px max-content;
  align-items: center;
  gap:8px;
}

.color-control label {
  white-space: nowrap;
  justify-self: start;
  text-align: left;
}

.color-control input[type="color"] {
  width: 50px;
  height: 30px;
  border: 2px solid var(--shadow-color);
  border-radius: 4px;
  cursor: pointer;
  justify-self: start;
}

.color-input-group {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  width: 90px;
}

.transparent-btn {
  width: 30px;
  height: 30px;
  border: 2px solid var(--shadow-color);
  border-radius: 4px;
  background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
              linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
              linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
              linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  cursor: pointer;
  color: var(--shadow-color);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.transparent-btn svg {
  width: 16px;
  height: 16px;
  transition: color 0.2s ease;
}

.transparent-btn:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-1px);
}

.transparent-btn:active {
  transform: translateY(0);
}

.transparent-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.color-control span {
  font-family: monospace;
  font-size: 11px;
  color: var(--shadow-color);
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  border-radius: 3px;
  justify-self: end;
}

a {
  text-decoration: none;
  color: var(--light-text-color);
  font-weight: bold;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--secondary-color);
  transform: translateY(-1px);
}