.certificate {
    font-family: Arial, sans-serif;
}
.certificate header{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}
.image-placeholder {
    position: relative;
    width: 100%;
    height: 250px;
    background: #f0f0f0;
}

.scale {
    position: absolute;
    background-color: #000;
}

.vertical {
    left: -20px;
    top: 0;
    height: 100%;
    width: 2px;
    border-right: 2px solid black;
}

.horizontal {
    top: -20px;
    left: 0;
    width: 100%;
    height: 2px;
    border-bottom: 2px solid black;
}

.certificate th {
    text-align: left;
}

.certificate {
    width: 800px;
    min-height: 345px;
    border: 2px solid black;
    margin: 30px auto;
    /* padding: 1px; */
    box-sizing: border-box;
    padding-top: 0%;
    display: flex;
    flex-direction: column;
}

.front header h1 {
    color: #C8A05A;
    text-align: center;
    margin-bottom: 20px;
    outline: 20px solid #000;
    background: black;
}

.front .details {
    display: flex;
    justify-content: space-around;
}

.left-box {
    margin-top: 10px;
    width: 37%;
    border: 1px solid #000;
    height: 204px;
    position: relative;
}

.right-box {
    margin-top: 6px;
    width: 15% !important;
    height: 204px;
    position: relative;
}

.scale {
    text-align: center;
    padding-top: 5px;
}

.center-box table {
    width: 100%;
    font-size: 14px;
    margin-bottom: 20px;
    margin-top: 4px;
}

.qr-code {
    border: 1px solid #000;
    width: 110px;
    height: 110px;
    text-align: center;
    /* margin-top: 10px; */
}
.qr-code img{
    width:120px;
}
.back {
    border: none;
    padding: 34px;
    background: #000;
    color: #C8A05A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.back .logo-large {
    width: 100px;
    height: 100px;
    background: #C8A05A;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    margin-bottom: 20px;
}

.back .info {
    text-align: center;
    font-size: 11px;
}

.back a {
    margin-top: 100px;
    color: #C8A05A;
    text-decoration: none;
}



.scale-container {
    display: flex;
    align-items: flex-start;
    max-width: 100%;

}

.vertical-ruler {
    width: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 10px;
}

.vertical-ruler .ticks {
    width: 100%;
    position: relative;
}

.vertical-ruler .tick {
    position: relative;
    height: 10px;
    border-right: 2px solid black;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.vertical-ruler .tick span {
    font-size: 10px;
    margin-right: 5px;
}

.main-area {
    position: relative;
    background: white;
    max-width: 200px;
}

.gemstone-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    display: block;
}

.page-break {
    page-break-before: always;
    break-before: page;
}


.scale-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* or set a specific height if needed */
width: 100%;  /* optional, depends on your layout */
}

.main-area {
display: flex;
justify-content: center;
align-items: center;
}

.gemstone-image {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* optional - prevents distortion */
}
.footer-div{
background: black;
height: 12px;
width: 100%;
}
@page {
    size: 85.60mm 53.98mm;
    margin: 0;
}

@media print {
.certificate {
margin: 0;
padding: 0;
-webkit-print-color-adjust: exact; /* Ensure colors are printed correctly */
print-color-adjust: exact;}

/* Hide unnecessary elements */
.page-break {
display: none;
}

/* Set the entire page to credit card size */
@page {
size: 85.6mm 53.98mm; /* Credit card size */
margin: 0;
}
.certificate.front header {
margin: 0;
padding: 0;
text-align: center;
background: black;
line-height: 0; /* Remove any extra line height */
}
.certificate header img {
    margin-top: 6px;
    width: 90%;
    height: 26px;

}

/* Card container (certificate) */
.certificate {
border:none;
margin: 0%;
padding: 0%;
width: 85.6mm;
height: 53.98mm;
box-sizing: border-box;
font-family: Arial, sans-serif;
page-break-after: always; /* Ensure front and back are on separate pages */
}

/* Front side styling */
.certificate.front {
display: flex;
flex-direction: column;
padding: 2mm; /* Reduced padding to fit content */
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="0" y="50" font-family="Arial" font-size="20" fill="rgba(0,0,0,0.1)" transform="rotate(-45 50 50)">Gemstone Safe</text></svg>');
background-repeat: round;
background-size: 20mm 20mm;
}

.certificate.front header {
margin: 0%;
padding: 0%;

padding: 0%;
text-align: center;
}
.certificate.front{
padding: 0%;
}
.certificate.front h1 {
margin: 0%;
padding: 0%;
padding-top:2%;
outline: 8px solid #000;
font-size: 8pt; /* Smaller font for header */
margin: 0;
font-weight: bold;
}
.certificate table {
font-size: 8px !important;
width: 100%;
}
.certificate.front .logo {
font-weight: bold;
color: #000;
}
.qr-code {
    border: none;
}
.qr-code img{
    border: none;
}

.certificate.front .details {
/* margin: 0%;
padding: 0%;
display: flex;
justify-content: space-between;
flex: 1;
align-items: stretch; */
margin: 0%;
padding: 0%;
display: flex;
flex-direction: row;
justify-content: space-around;
flex: 1;
align-items: stretch;
max-height: calc(53.98mm - 8pt - 2mm); /* Account for header and bottom padding */
overflow: hidden;

}

/* Left box (image with rulers) */
.certificate.front .left-box {
margin-top: 20px !important;
width: 30%; /* Adjusted to match the image proportions */
/* display: flex;
align-items: center;
justify-content: center; */
border: none;

}


.certificate.front .scale-container {
width: 100%;
height: 50px;
position: relative;
}

.certificate.front .main-area {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.certificate.front .gemstone-image {
max-width: 15mm; /* Adjusted to fit the small space */
max-height: 15mm;
object-fit: contain;
}

/* Center box (table) */
.certificate.front .center-box {
margin-top: -20px !important;

width: 50%; /* Adjusted to match the image proportions */
font-size: 1pt; /* Smaller font to fit in credit card size */
line-height: 1.2;
}

.certificate.front .center-box table {
width: 100%;
border-collapse: collapse;
}

.certificate.front .center-box th,
.certificate.front .center-box td {
text-align: left;
padding: 0.3mm 0; /* Reduced padding */
}

.certificate.front .center-box th {
font-weight: bold;
width: 35%;
}
.certificate.front header img {
object-fit: contain;
}
.certificate.front .center-box td {
width: 65%;
}

/* Right box (QR code) */
.certificate.front .right-box {
margin-top: 7px !important;
width: 15%; /* Adjusted to match the image proportions */
display: flex;
align-items: start;
justify-content: start;
}
.certificate.front .qr-code img {
width: 12mm; /* Adjusted to match the image */
height: 12mm;
}

/* Back side styling */
.certificate.back {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2mm;
text-align: center;
}

.certificate.back img {
max-width: 20mm; /* Adjusted for smaller page */
max-height: 15mm;
margin-bottom: 1mm;
}

.certificate .info {
font-size: 6pt; /* Smaller font for back */
line-height: 1.2;
}

.certificate.back .info a {
text-decoration: none;
}
.scale-container{
border: none;
}

.main-area img{
border: 1px solid #000;
height: 1000px;
width: 1000px;
}
}