/* ZOLAK BTCPayServer Theme - Retro-Futuristic Cyber-Punk Style */

/* Import Zolak fonts */
@font-face {
  font-family: 'Retron2000';
  src: url('https://zolak.lt/Retron2000.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

: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;
}

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

.tile {
  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;
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Block all click events on tile and its content */
.tile,
.tile *,
.tile::before,
.tile::after,
.tile > *,
.tile .card,
.tile .card-body,
.tile .card-header,
.tile .card-footer {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
}

/* Force disable any selection or interaction */
.tile[onclick],
.tile[data-toggle],
.tile[data-target],
.tile[href],
.tile a:not(.btn):not([class*="btn"]) {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
}

/* Only buttons are interactive - highest specificity */
.tile .btn,
.tile .btn-primary,
.tile .btn-secondary,
.tile button[type="button"],
.tile button[type="submit"],
.tile input[type="button"],
.tile input[type="submit"],
.tile a.btn,
.tile a.btn-primary,
.tile a.btn-secondary {
  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;
  transition: all 0.3s ease;
}

.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;
  box-shadow: 0 0 25px rgba(255, 248, 12, 0.6);
  transform: translateY(-2px);
}

.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;
  box-shadow: 0 0 25px rgba(29, 176, 0, 0.6);
  transform: translateY(-2px);
}

.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;
  text-shadow: 0 0 5px rgba(29, 176, 0, 0.5);
}

/* 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;
  border: none !important;
  padding: 1.5rem;
}

/* Remove borders from specific payment elements */
.payment-box,
#Lightning_BTC-LN,
#Lightning_BTC-LN *,
[id*="Lightning_BTC-LN"],
[id*="Lightning_BTC-LN"] * {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

.payment-box:focus,
.payment-box:hover,
.payment-box:active,
#Lightning_BTC-LN:focus,
#Lightning_BTC-LN:hover,
#Lightning_BTC-LN:active,
#Lightning_BTC-LN *:focus,
#Lightning_BTC-LN *:hover,
#Lightning_BTC-LN *:active,
[id*="Lightning_BTC-LN"]:focus,
[id*="Lightning_BTC-LN"]:hover,
[id*="Lightning_BTC-LN"]:active,
[id*="Lightning_BTC-LN"] *:focus,
[id*="Lightning_BTC-LN"] *:hover,
[id*="Lightning_BTC-LN"] *:active {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 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;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 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;
  transition: all 0.3s ease;
}

.store-footer a:hover {
  color: var(--color-secondary-green) !important;
  text-shadow: 0 0 10px rgba(29, 176, 0, 0.5);
}

.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;
  text-shadow: 0 0 5px rgba(29, 176, 0, 0.5);
}

/* 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%);
}

/* Cyber Effects */
@keyframes cyber-glow {
  0%, 100% {
    text-shadow: 0 0 5px currentColor;
  }
  50% {
    text-shadow: 0 0 20px currentColor;
  }
}

h1, h2, .cyber-text {
  animation: cyber-glow 3s ease-in-out infinite;
}

/* 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 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;
  box-shadow: 0 0 15px rgba(255, 248, 12, 0.4);
}

.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 - General styling for all btcpay-toggle elements */
.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;
  transition: all 0.3s ease;
}

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

.btcpay-toggle:checked {
  background-color: var(--color-secondary-green) !important;
  border-color: var(--color-secondary-green) !important;
  box-shadow: 0 0 10px rgba(29, 176, 0, 0.3);
}

.btcpay-toggle:checked:before {
  transform: translateX(25px);
  background-color: var(--color-primary-yellow);
  box-shadow: 0 0 5px rgba(255, 248, 12, 0.5);
}

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

/* Toggle Switch - Specific styling for items (maintains existing behavior) */
.item .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;
  transition: all 0.3s ease;
}

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

.item .btcpay-toggle:checked {
  background-color: var(--color-secondary-green) !important;
  border-color: var(--color-secondary-green) !important;
  box-shadow: 0 0 10px rgba(29, 176, 0, 0.3);
}

.item .btcpay-toggle:checked:before {
  transform: translateX(25px);
  background-color: var(--color-primary-yellow);
  box-shadow: 0 0 5px rgba(255, 248, 12, 0.5);
}

.item .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;
}

/* BTCPay Tile Selection Overlay Auto-Hide */
.tile {
  position: relative;
}

/* Target all possible BTCPay overlay elements with high specificity */
.tile div[style*="position: absolute"],
.tile div[style*="background"],
.tile div[style*="rgba"],
.tile div[class*="selected"],
.tile div[class*="overlay"],
.tile div[class*="check"],
.tile [data-selected="true"],
.tile [aria-selected="true"],
.tile.selected,
.tile.selected-item,
.tile[data-selected],
.tile .position-absolute,
.tile .bg-success,
.tile .text-white,
div[style*="position: absolute"][style*="background-color: rgba(34, 197, 94"],
div[style*="position: absolute"][style*="background-color: rgba(29, 176, 0"],
div[style*="position: absolute"][style*="background: rgba(34, 197, 94"],
div[style*="position: absolute"][style*="background: rgba(29, 176, 0"] {
  animation: autoHideOverlay 1.2s ease-in-out forwards !important;
}

/* More specific targeting for green overlays */
.tile > div[style*="position: absolute"]:not([style*="display: none"]),
.tile > div[style*="rgba(34, 197, 94"],
.tile > div[style*="rgba(29, 176, 0"],
.tile > div[style*="rgba(0, 128, 0"],
.tile > div[class*="position-absolute"] {
  animation: autoHideOverlay 1.2s ease-in-out forwards !important;
}

/* Target checkboxes and icons in overlays */
.tile svg[class*="check"],
.tile i[class*="check"],
.tile .fa-check,
.tile .fas.fa-check,
.tile [class*="checkmark"],
.tile input[type="checkbox"][style*="display: block"] {
  animation: autoHideOverlay 1.2s ease-in-out forwards !important;
}

@keyframes autoHideOverlay {
  0% {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  85% {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  100% {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    transform: scale(0) !important;
  }
}

/* Force override any inline styles keeping overlay visible */
.tile [style*="opacity: 1"] {
  animation: autoHideOverlay 1.2s ease-in-out forwards !important;
}

/* Additional targeting for Bootstrap/BTCPay classes */
.tile .position-absolute.top-0.start-0.w-100.h-100,
.tile .d-flex.align-items-center.justify-content-center.position-absolute,
.tile div[class*="position-absolute"][class*="bg-success"],
.tile div[class*="position-absolute"][class*="text-white"] {
  animation: autoHideOverlay 1.2s ease-in-out forwards !important;
}

/* 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;
  }
}