/* ZOLAK BTCPayServer Theme - Retro-Futuristic Cyber-Punk Style */
/* Performance-optimized for the bar kiosk PC: no infinite animations,
   no transition:all, no [style*=] attribute selectors, same-origin fonts. */

/* Import Zolak fonts (served from BTCPay LocalStorage, zolak.lt as fallback) */
@font-face {
  font-family: 'Retron2000';
  src: url('/LocalStorage/zolak-Retron2000.ttf') format('truetype'),
       url('https://zolak.lt/Retron2000.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HomeVideo-Regular';
  src: url('/LocalStorage/zolak-HomeVideo-Regular.otf') format('opentype'),
       url('https://zolak.lt/HomeVideo-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Zolak Brand Colors */
  --color-primary-yellow: #FFF80C;
  --color-primary-black: #000000;
  --color-secondary-green: #1DB000;
  --color-secondary-white: #FFFFFF;

  /* Zolak Fonts */
  --font-pixel: 'Retron2000', 'Courier New', monospace;
  --font-regular: 'Courier New', monospace;
  --font-alternative: 'HomeVideo-Regular', monospace;

  /* Override BTCPay Colors with Zolak Brand */
  --btcpay-brand-primary: var(--color-secondary-green);
  --btcpay-brand-secondary: var(--color-primary-yellow);
  --btcpay-brand-tertiary: var(--color-secondary-green);
  --btcpay-brand-dark: var(--color-primary-black);

  /* Background Colors */
  --btcpay-body-bg: var(--color-primary-black);
  --btcpay-body-bg-rgb: 0, 0, 0;
  --btcpay-body-bg-light: #111111;
  --btcpay-body-bg-medium: #1a1a1a;
  --btcpay-body-bg-striped: #0a0a0a;
  --btcpay-body-bg-hover: #222222;
  --btcpay-body-bg-active: var(--color-secondary-green);

  /* Text Colors */
  --btcpay-body-text: var(--color-secondary-white);
  --btcpay-body-text-rgb: 255, 255, 255;
  --btcpay-body-text-muted: #cccccc;
  --btcpay-body-text-hover: var(--color-primary-yellow);
  --btcpay-body-text-active: var(--color-primary-black);

  /* Links */
  --btcpay-body-link: var(--color-primary-yellow);
  --btcpay-body-link-rgb: 255, 248, 12;
  --btcpay-body-link-accent: var(--color-secondary-green);
  --btcpay-body-link-accent-rgb: 29, 176, 0;

  /* Header */
  --btcpay-header-bg: var(--color-primary-black);
  --btcpay-header-text: var(--color-secondary-white);
  --btcpay-header-link: var(--color-primary-yellow);
  --btcpay-header-link-accent: var(--color-secondary-green);
  --btcpay-header-link-active: var(--color-primary-yellow);

  /* Forms */
  --btcpay-form-bg: #1a1a1a;
  --btcpay-form-bg-hover: #222222;
  --btcpay-form-text: var(--color-secondary-white);
  --btcpay-form-text-label: var(--color-primary-yellow);
  --btcpay-form-border: var(--color-secondary-green);
  --btcpay-form-border-hover: var(--color-primary-yellow);
  --btcpay-form-border-focus: var(--color-primary-yellow);
  --btcpay-form-shadow-focus: rgba(255, 248, 12, 0.5);

  /* Primary Button (Yellow CTA) */
  --btcpay-primary: var(--color-primary-yellow);
  --btcpay-primary-rgb: 255, 248, 12;
  --btcpay-primary-text: var(--color-primary-black);
  --btcpay-primary-text-hover: var(--color-primary-black);
  --btcpay-primary-text-active: var(--color-primary-black);
  --btcpay-primary-bg-hover: #e6df0b;
  --btcpay-primary-bg-active: #ccbf0a;
  --btcpay-primary-border: var(--color-primary-yellow);
  --btcpay-primary-border-hover: #e6df0b;
  --btcpay-primary-border-active: #ccbf0a;
  --btcpay-primary-shadow: rgba(255, 248, 12, 0.5);

  /* Secondary Button (Green Interactive) */
  --btcpay-secondary: var(--color-secondary-green);
  --btcpay-secondary-rgb: 29, 176, 0;
  --btcpay-secondary-text: var(--color-secondary-white);
  --btcpay-secondary-text-hover: var(--color-secondary-white);
  --btcpay-secondary-text-active: var(--color-secondary-white);
  --btcpay-secondary-bg-hover: #1a9900;
  --btcpay-secondary-bg-active: #177700;
  --btcpay-secondary-border: var(--color-secondary-green);
  --btcpay-secondary-border-hover: #1a9900;
  --btcpay-secondary-border-active: #177700;
  --btcpay-secondary-shadow: rgba(29, 176, 0, 0.5);

  /* Success Colors */
  --btcpay-success: var(--color-secondary-green);
  --btcpay-success-rgb: 29, 176, 0;
  --btcpay-success-text: var(--color-secondary-white);
  --btcpay-success-shadow: rgba(29, 176, 0, 0.5);

  /* Warning Colors */
  --btcpay-warning: var(--color-primary-yellow);
  --btcpay-warning-rgb: 255, 248, 12;
  --btcpay-warning-text: var(--color-primary-black);
  --btcpay-warning-shadow: rgba(255, 248, 12, 0.5);

  /* Danger Colors */
  --btcpay-danger: #ff3333;
  --btcpay-danger-rgb: 255, 51, 51;
  --btcpay-danger-text: var(--color-secondary-white);
  --btcpay-danger-shadow: rgba(255, 51, 51, 0.5);

  /* Borders and Radius */
  --btcpay-border-radius: 0px; /* No rounded corners for pixel aesthetic */
  --btcpay-border-radius-l: 0px;
  --btcpay-border-radius-xl: 0px;
  --btcpay-border-radius-xxl: 0px;

  /* Fonts */
  --btcpay-font-family-base: var(--font-regular);
  --btcpay-font-family-monospace: var(--font-regular);
}

/* Global Styles */
body {
  background-color: var(--color-primary-black) !important;
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
  font-size: 14px;
  line-height: 1.4;
}

/* Headings with Pixel Font */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-pixel) !important;
  color: var(--color-primary-yellow) !important;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 1px;
}

/* Static glow (was an infinite text-shadow animation — too heavy for the kiosk) */
h1, h2, .cyber-text {
  text-shadow: 0 0 10px currentColor;
}

/* Main Container */
.public-page-wrap {
  background-color: var(--color-primary-black) !important;
  min-height: 100vh;
}

.tile {
  position: relative;
  background-color: var(--color-primary-black) !important;
  border: 2px solid var(--color-secondary-green);
  box-shadow: 0 0 20px rgba(29, 176, 0, 0.3);
  padding: 2rem;
}

/* Tiles are display-only: block all interaction... */
.tile,
.tile * {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ...except buttons */
.tile .btn,
.tile button,
.tile input[type="button"],
.tile input[type="submit"],
.tile a.btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: auto !important;
  position: relative !important;
  z-index: 999 !important;
}

/* Payment Section */
#payment {
  background-color: var(--color-primary-black);
}

/* Amount Due Styling */
#AmountDue {
  font-family: var(--font-pixel) !important;
  color: var(--color-primary-yellow) !important;
  text-shadow: 0 0 10px rgba(255, 248, 12, 0.5);
  font-size: 2.5rem !important;
  margin: 1rem 0;
}

/* Payment Details */
.payment-details dl dt {
  color: var(--color-secondary-green) !important;
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.payment-details dl dd {
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
}

/* Buttons */
.btn {
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
  border-radius: 0 !important;
  border-width: 2px;
  font-weight: normal;
  letter-spacing: 1px;
}

.btn-primary {
  background: linear-gradient(45deg, var(--color-primary-yellow), #ffed4a) !important;
  color: var(--color-primary-black) !important;
  border: 2px solid var(--color-primary-yellow) !important;
  box-shadow: 0 0 15px rgba(255, 248, 12, 0.4);
  font-size: 0.75rem !important;
}

.btn-primary:hover {
  background: var(--color-primary-yellow) !important;
  color: var(--color-primary-black) !important;
  border-color: var(--color-primary-yellow) !important;
}

.btn-secondary {
  background-color: var(--color-secondary-green) !important;
  color: var(--color-secondary-white) !important;
  border: 2px solid var(--color-secondary-green) !important;
  box-shadow: 0 0 15px rgba(29, 176, 0, 0.4);
}

.btn-secondary:hover {
  background-color: #1a9900 !important;
  color: var(--color-secondary-white) !important;
  border-color: #1a9900 !important;
}

.btn-link {
  color: var(--color-primary-yellow) !important;
  font-family: var(--font-regular) !important;
  text-decoration: none;
}

.btn-link:hover {
  color: var(--color-secondary-green) !important;
}

/* QR Code Container */
.qr-container {
  background-color: var(--color-primary-black) !important;
  border: 2px solid var(--color-primary-yellow);
  padding: 1rem;
  position: relative;
}

/* QR Code Color Inversion - Black background, Yellow pattern */
.qr-container svg path[fill="#ffffff"] {
  fill: var(--color-primary-black) !important;
}

.qr-container svg path[stroke="#000000"] {
  stroke: var(--color-primary-yellow) !important;
}

/* Form Controls */
.form-control,
.form-control-plaintext,
.form-select {
  background-color: #1a1a1a !important;
  border: 2px solid var(--color-secondary-green) !important;
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
  border-radius: 0 !important;
}

.form-control:focus,
.form-select:focus {
  background-color: #222222 !important;
  border-color: var(--color-primary-yellow) !important;
  box-shadow: 0 0 10px rgba(255, 248, 12, 0.3) !important;
  color: var(--color-secondary-white) !important;
}

.form-floating > label {
  color: var(--color-primary-yellow) !important;
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Input Groups */
.input-group {
  border-radius: 0 !important;
}

/* Payment Box */
.payment-box {
  background-color: transparent;
  padding: 1.5rem;
}

/* Remove borders from payment / Lightning elements */
.payment-box,
[id^="Lightning_BTC-LN"],
[id^="Lightning_BTC-LN"] * {
  border: none !important;
}

.payment-box:focus,
.payment-box:hover,
.payment-box:active,
[id^="Lightning_BTC-LN"] :focus,
[id^="Lightning_BTC-LN"] :hover,
[id^="Lightning_BTC-LN"] :active {
  border: none !important;
  box-shadow: 0 0 10px rgba(29, 176, 0, 0.3) !important;
}

/* Truncate Center (for addresses) */
.truncate-center,
.truncate-center--copy,
.truncate-center--elastic,
.form-control-plaintext {
  background-color: transparent !important;
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
  border: none !important;
}

.truncate-center:focus,
.truncate-center--copy:focus,
.truncate-center--elastic:focus,
.form-control-plaintext:focus {
  border: none !important;
  box-shadow: 0 0 10px rgba(29, 176, 0, 0.3) !important;
}

/* Footer */
.store-footer {
  background-color: var(--color-primary-black) !important;
  padding: 2rem 1rem;
}

.store-footer a {
  color: var(--color-primary-yellow) !important;
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
  text-decoration: none;
}

.store-footer a:hover {
  color: var(--color-secondary-green) !important;
}

.store-powered-by {
  display: none !important;
}

/* Hide Contact Link */
#ContactLink {
  display: none !important;
}

/* Language Selector */
#DefaultLang {
  background-color: #1a1a1a !important;
  border: 2px solid var(--color-secondary-green) !important;
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
  width: 200px !important;
  min-width: 180px !important;
}

#DefaultLang:focus {
  border-color: var(--color-primary-yellow) !important;
  box-shadow: 0 0 10px rgba(255, 248, 12, 0.3) !important;
}

/* Disable clipboard functionality for AmountDue */
#AmountDue.clipboard-button {
  cursor: default !important;
  pointer-events: none !important;
}

#AmountDue.clipboard-button::after {
  display: none !important;
}

/* Alerts */
.alert {
  border-radius: 0 !important;
  border-width: 2px;
  font-family: var(--font-regular) !important;
}

.alert-danger {
  background-color: rgba(255, 51, 51, 0.1) !important;
  border-color: #ff3333 !important;
  color: #ff3333 !important;
}

.alert-warning {
  background-color: rgba(255, 248, 12, 0.1) !important;
  border-color: var(--color-primary-yellow) !important;
  color: var(--color-primary-yellow) !important;
}

.alert-success {
  background-color: rgba(29, 176, 0, 0.1) !important;
  border-color: var(--color-secondary-green) !important;
  color: var(--color-secondary-green) !important;
}

/* Payment Details Toggle Button */
.payment-details-button {
  color: var(--color-primary-yellow) !important;
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
  border: none !important;
  background: none !important;
}

.payment-details-button:hover {
  color: var(--color-secondary-green) !important;
}

/* Icons */
.icon {
  filter: brightness(0) saturate(100%) invert(89%) sepia(71%) saturate(6395%) hue-rotate(45deg) brightness(106%) contrast(101%);
}

.icon:hover {
  filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(2932%) hue-rotate(74deg) brightness(96%) contrast(101%);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-primary-black);
  border: 1px solid var(--color-secondary-green);
}

::-webkit-scrollbar-thumb {
  background: var(--color-secondary-green);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-yellow);
}

/* Modal Dialogs */
.modal-dialog,
.modal-dialog-centered,
.modal-content {
  background-color: var(--color-primary-black) !important;
  border: 2px solid var(--color-secondary-green) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 20px rgba(29, 176, 0, 0.3) !important;
}

.modal-header {
  background-color: var(--color-primary-black) !important;
  border-bottom: 2px solid var(--color-secondary-green) !important;
  color: var(--color-secondary-white) !important;
}

.modal-header .modal-title {
  color: var(--color-primary-yellow) !important;
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
}

.modal-header .btn-close {
  filter: brightness(0) saturate(100%) invert(89%) sepia(71%) saturate(6395%) hue-rotate(45deg) brightness(106%) contrast(101%) !important;
}

.modal-header .btn-close:hover {
  filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(2932%) hue-rotate(74deg) brightness(96%) contrast(101%) !important;
}

.modal-body {
  background-color: var(--color-primary-black) !important;
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
}

.modal-footer {
  background-color: var(--color-primary-black) !important;
  border-top: 2px solid var(--color-secondary-green) !important;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Container within modal-dialog */
.modal-dialog.modal-dialog-centered .container {
  background-color: var(--color-primary-black) !important;
}

/* Lead Text Styling */
.lead {
  text-align: center !important;
  font-family: var(--font-pixel) !important;
  color: var(--color-primary-yellow) !important;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 1px;
  margin: 1rem 0;
}

/* Product card images — locked to 3:2 container, cropped to fill */
.card-img-top {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover !important;
  object-position: center;
}

/* Product Card Title */
.card-title {
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}

/* Item Editor Form */
#item-form.item {
  background-color: var(--color-primary-black) !important;
  border: 2px solid var(--color-secondary-green);
  padding: 2rem;
  margin: 1rem 0;
  box-shadow: 0 0 15px rgba(29, 176, 0, 0.2);
}

.item .form-group {
  margin-bottom: 1.5rem;
}

.item .form-label {
  color: var(--color-primary-yellow) !important;
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.item .form-text {
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
  font-size: 0.8rem;
  opacity: 0.8;
}

.item .form-control,
.item .form-select {
  background-color: #1a1a1a !important;
  border: 2px solid var(--color-secondary-green) !important;
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
  border-radius: 0 !important;
}

.item .form-control:focus,
.item .form-select:focus {
  background-color: #222222 !important;
  border-color: var(--color-primary-yellow) !important;
  box-shadow: 0 0 10px rgba(255, 248, 12, 0.3) !important;
  color: var(--color-secondary-white) !important;
}

.item .input-group-text {
  background-color: var(--color-secondary-green) !important;
  border: 2px solid var(--color-secondary-green) !important;
  color: var(--color-secondary-white) !important;
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
  border-radius: 0 !important;
}

.item .btn-primary {
  background: linear-gradient(45deg, var(--color-primary-yellow), #ffed4a) !important;
  color: var(--color-primary-black) !important;
  border: 2px solid var(--color-primary-yellow) !important;
  font-family: var(--font-pixel) !important;
  text-transform: uppercase;
  border-radius: 0 !important;
}

.item .btn-primary:hover {
  background: var(--color-primary-yellow) !important;
}

.item .btn-primary:disabled {
  background-color: #666666 !important;
  border-color: #666666 !important;
  color: #999999 !important;
}

/* Tom Select Dropdown */
.item .ts-wrapper {
  border: 2px solid var(--color-secondary-green) !important;
  border-radius: 0 !important;
}

.item .ts-control {
  background-color: #1a1a1a !important;
  color: var(--color-secondary-white) !important;
  border: none !important;
}

.item .ts-dropdown {
  background-color: #1a1a1a !important;
  border: 2px solid var(--color-secondary-green) !important;
  border-radius: 0 !important;
}

/* Toggle Switch */
.btcpay-toggle {
  appearance: none;
  width: 50px;
  height: 25px;
  background-color: #333333 !important;
  border: 2px solid #666666 !important;
  border-radius: 0 !important;
  position: relative;
  cursor: pointer;
}

.btcpay-toggle:before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 19px;
  height: 19px;
  background-color: #666666;
}

.btcpay-toggle:checked {
  background-color: var(--color-secondary-green) !important;
  border-color: var(--color-secondary-green) !important;
}

.btcpay-toggle:checked:before {
  transform: translateX(25px);
  background-color: var(--color-primary-yellow);
}

.btcpay-toggle:focus {
  outline: none;
  border-color: var(--color-primary-yellow) !important;
}

.item .form-check-label {
  color: var(--color-secondary-white) !important;
  font-family: var(--font-regular) !important;
}

/* Auto-hide BTCPay "added" overlay on tiles.
   Class-based selectors only — the old [style*=]/[class*=] substring
   matchers forced expensive style recalc on every DOM mutation. */
.tile .position-absolute,
.tile .bg-success,
.tile.selected,
.tile .fa-check {
  animation: autoHideOverlay 1.2s ease-in-out forwards;
}

@keyframes autoHideOverlay {
  0%, 85% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .tile {
    margin: 0.5rem;
    padding: 1rem;
  }

  #AmountDue {
    font-size: 2rem !important;
  }

  .qr-container {
    padding: 0.5rem;
  }

  .modal-dialog {
    margin: 0.5rem !important;
  }

  #item-form.item {
    padding: 1rem;
    margin: 0.5rem 0;
  }
}