/* wallet-design.css - Revised for Correct Positioning */
/* Embed Open Sans locally */
@font-face {
  font-family: 'Open Sans';
  src: url('./fonts/OpenSans-Light.ttf') format('ttf'),
       url('./fonts/OpenSans-Bold.ttf') format('ttf2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('./fonts/OpenSans-Light.ttf') format('ttf'),
       url('./fonts/OpenSans-Bold.ttf') format('ttf2');
  font-weight: 700;
  font-style: normal;
}
/* Apply Open Sans to the entire body */
body {
  font-family: 'Open Sans', Arial, sans-serif;
}

/* ---- Wallet Container & Elements ---- */
.walletarea {
/* This might be controlled by JS to show/hide the generated wallet.
If .artwallet1 is inside this, ensure this is displayed when needed. */
/* Example: display: block; */
border: 1px solid #ccc; /* Optional: for visual debugging */
margin: 20px auto; /* Center the container */
padding: 0;
}
/* The main container for one wallet */
.artwallet1 {
position: relative; /* Crucial: Establishes positioning context for children */
width: 706px;       /* Match background image width (adjust if needed) */
height: 382px;      /* Match background image height (adjust if needed) */
margin: 0 auto;     /* Center within its parent if needed */
overflow: hidden;   /* Keep elements contained */
font-family: Open Sans, sans-serif; /* Consistent font */
border: 1px solid #ddd; /* Optional border for debugging */
}
/* Position the background image (assuming it's an <img> tag) */
.artwallet1 .paperpng1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* Behind other elements */
}
/* Position Public QR Code Container */
.artwallet1 .qrcode_public {
position: absolute;
top: 76px;          /* From original comments */
left: 30px;         /* From original comments */
z-index: 2;         /* Above background */
background-color: #FFFFFF; /* White background for QR */
padding: 3px 3px 3px 3px; /* From original comments - Adjust as needed */
}
/* Style the Public QR Code image/canvas itself */
.artwallet1 .qrcode_public img,
.artwallet1 .qrcode_public canvas { /* Target img or canvas */
display: block;     /* Prevent extra space */
width: 110px;       
height: 110px;       
}
/* Position Private QR Code Container */
.artwallet1 .qrcode_private {
position: absolute;
top: 182px;         /* From original comments */
left: 520px;        /* From original comments */
z-index: 2;         /* Above background */
background-color: #FFFFFF; /* White background for QR */
padding: 3px 3px 3px 3px; /* From original comments - Adjust as needed */
}
/* Style the Private QR Code image/canvas itself */
.artwallet1 .qrcode_private img,
.artwallet1 .qrcode_private canvas { /* Target img or canvas */
display: block;     /* Prevent extra space */
width: 100px;        /* ADJUSTED: Reduced from 110px */
height: 100px;       /* ADJUSTED: Keep square */
}
/* Position Public Address (Litecoin Address) */
.artwallet1 .ltcaddress { /* Assuming class name is still ltcaddress */
position: absolute;
top: 341px;         /* From original comments */
left: 199px;        /* From original comments */
z-index: 2;         /* Above background */
font-size: 13px;    /* From original comments */
width: 180px;
height: 18px;
font-family: Open Sans, sans-serif;
font-weight: bold;
color: #000000;
background-color: transparent;
white-space: nowrap; /* Prevent wrapping before rotation */
/* Rotation */
transform-origin: top left;
transform: rotate(-90deg);
-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);
-ms-transform-origin: top left;
-ms-transform: rotate(-90deg);
-o-transform-origin: top left;
-o-transform: rotate(-90deg);
}
/* Position Private Key */
.artwallet1 .ltcprivwif { /* Assuming class name is still ltcprivwif */
position: absolute;
top: 337px;         /* From original comments */
left: 495px;        /* From original comments */
z-index: 2;         /* Above background */
font-size: 9px;     /* From original comments - smaller font */
width: 200px;
height: 14px;
font-family: Open Sans, sans-serif;
font-weight: bold;
color: #000000;
background-color: transparent;
white-space: nowrap; /* Prevent wrapping before rotation */
/* Rotation */
transform-origin: top left;
transform: rotate(-90deg);
-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);
-ms-transform-origin: top left;
-ms-transform: rotate(-90deg);
-o-transform-origin: top left;
-o-transform: rotate(-90deg);
}
/* ---- Print Specific Styles ---- */
/* wallet-design.css */
/* ... (Keep all existing styles before @media print) ... */
/* ---- Print Specific Styles ---- */
@media print {
body > header,
body > main > section:not(#wallet), /* Hide all sections except the wallet */
body > main > #intro, /* Explicitly hide intro if it's not a section */
body > main > #entropy, /* Explicitly hide entropy */
body > footer,
#wallet .button-group, /* Hide buttons inside the wallet section */
.no-print { /* Add a class you can put on other elements to hide them */
display: none !important;
}
body, main {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
border: none !important;
background: white !important; /* Ensure clean print background */
}
#wallet { /* Ensure the wallet section takes full space */
display: block !important;
margin: 0 auto !important; /* Center wallet on page */
padding: 0 !important;
border: none !important;
box-shadow: none !important;
width: auto; /* Allow natural width */
max-width: 100%;
page-break-inside: avoid; /* Try to keep wallet on one page */
}
.artwallet1 {
/* Keep the physical dimensions as requested */
width: 150mm;
height: 85mm;
margin: 1mm auto; /* Adjust margin as needed, or set to 0 */
border: none; /* Remove debug border for printing */
position: relative; /* Ensure positioning context */
overflow: hidden; /* Keep elements contained */
page-break-inside: avoid;
font-family: Open Sans, sans-serif; /* Ensure font is set */
}
/* --- SCALED ELEMENT POSITIONS AND SIZES FOR PRINT --- */
/* Original Screen Container: 706px x 382px */
/* Target Print Container: 150mm x 85mm */
/* Approx Scaling Factors: Width ~0.803, Height ~0.840, QR Avg ~0.82 */
/* Position Public QR Code Container */
.artwallet1 .qrcode_public {
position: absolute;
/* top: 76px * 0.840 ≈ 64px */
top: 64px;
/* left: 30px * 0.803 ≈ 24px */
left: 24px;
z-index: 2;
background-color: #FFFFFF !important; /* Force white background */
/* padding: 3px * 0.82 ≈ 2px (use avg scale for padding) */
padding: 2px;
}
/* Style the Public QR Code image/canvas itself */
.artwallet1 .qrcode_public img,
.artwallet1 .qrcode_public canvas {
display: block;
/* width: 110px * 0.82 ≈ 90px (use avg scale for square) */
width: 90px;
/* height: 110px * 0.82 ≈ 90px (use avg scale for square) */
height: 90px;
}
/* Position Private QR Code Container */
.artwallet1 .qrcode_private {
position: absolute;
/* top: 182px * 0.840 ≈ 153px */
top: 153px;
/* left: 520px * 0.803 ≈ 418px */
left: 418px;
z-index: 2;
background-color: #FFFFFF !important; /* Force white background */
/* padding: 3px * 0.82 ≈ 2px */
padding: 2px;
}
/* Style the Private QR Code image/canvas itself */
.artwallet1 .qrcode_private img,
.artwallet1 .qrcode_private canvas {
display: block;
/* width: 100px * 0.82 ≈ 82px */
width: 82px;
/* height: 100px * 0.82 ≈ 82px */
height: 82px;
}
/* Position Public Address (Litecoin Address) */
.artwallet1 .ltcaddress {
position: absolute;
/* top: 341px * 0.840 ≈ 286px (adjusted slightly by eye)*/
top: 288px;
/* left: 199px * 0.803 ≈ 160px */
left: 160px;
z-index: 2;
/* font-size: 13px * 0.840 ≈ 11px */
font-size: 11px;
/* width: 180px * 0.803 ≈ 145px (width before rotation) */
width: 145px;
/* height: 18px * 0.840 ≈ 15px (height before rotation) */
height: 15px;
font-family: Open Sans, sans-serif;
font-weight: bold;
color: #000000 !important; /* Force black text */
background-color: transparent !important;
white-space: nowrap; /* Prevent wrapping */
/* Rotation (keep as is) */
transform-origin: top left;
transform: rotate(-90deg);
-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);
-ms-transform-origin: top left;
-ms-transform: rotate(-90deg);
-o-transform-origin: top left;
-o-transform: rotate(-90deg);
}
/* Position Private Key */
.artwallet1 .ltcprivwif {
position: absolute;
/* top: 337px * 0.840 ≈ 283px (adjusted slightly by eye) */
top: 285px;
/* left: 495px * 0.803 ≈ 398px */
left: 398px;
z-index: 2;
/* font-size: 9px * 0.840 ≈ 8px */
font-size: 8px;
/* width: 200px * 0.803 ≈ 161px (width before rotation) */
width: 161px;
/* height: 14px * 0.840 ≈ 12px (height before rotation) */
height: 12px;
font-family: Open Sans, sans-serif;
font-weight: bold;
color: #000000 !important; /* Force black text */
background-color: transparent !important;
white-space: nowrap; /* Prevent wrapping */
/* Rotation (keep as is) */
transform-origin: top left;
transform: rotate(-90deg);
-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);
-ms-transform-origin: top left;
-ms-transform: rotate(-90deg);
-o-transform-origin: top left;
-o-transform: rotate(-90deg);
}
/* Keep QR table styles if needed for legacy/fallback */
.qrcodetable { border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse; }
.qrcodetddark { border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse; padding: 0; margin: 0; width: 2px; height: 2px; background-color: #000000; }
.qrcodetdlight { border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse; padding: 0; margin: 0; width: 2px; height: 2px; background-color: #ffffff; }
} /* End of @media print */
/* --- Cleaned up irrelevant rules --- */
/* ... (rest of the file) ... */