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

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

.gold-vertical {
    left: -20px;
    top: 0;
    height: 100%;
    width: 2px;
    border-right: 2px solid #E0BB7F !important;
}

.gold-horizontal {
    top: -20px;
    left: 0;
    width: 100%;
    height: 2px;
    border-bottom: 2px solid #E0BB7F !important;
}

.gold-certificate th {
    text-align: left;
}

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

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

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

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

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

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

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

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

.gold-back .gold-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;
}

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

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



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

}

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

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

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

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

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

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

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


.gold-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 */
}

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

/* .gold-gemstone-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
} */
.gold-footer-div{
background: #E0BB7F !important;
height: 12px;
width: 100%;
}
@page {
    size: 85.60mm 53.98mm;
    margin: 0;
}

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

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

/* Set the entire page to credit card size */
@page {
size: 85.6mm 53.98mm; /* Credit card size */
margin: 0;
}
.gold-certificate.gold-front .gold-header {
margin: 0;
padding: 0;
text-align: center;
background: #E0BB7F !important;

line-height: 0; /* Remove any extra line height */
}
/* header{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}*/
.gold-header img {
    margin-top: 6px;
    width: 90%;
    height: 26px;

}

/* Card container (certificate) */
.gold-certificate {
border:none !important;
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 */
.gold-certificate.gold-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;
}

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

padding: 0%;
text-align: center;
}
.gold-certificate.gold-front{
padding: 0%;
}
.gold-certificate.gold-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;
}
.gold-certificate table {
font-size: 8px !important;
width: 100%;
}
.gold-certificate.gold-front .logo {
font-weight: bold;
color: #000;
}
.gold-qr-code {
    border: none;
}
.gold-qr-code img{
    border: none;
}

.gold-certificate.gold-front .gold-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) */
.gold-certificate.gold-front .gold-left-box {
margin-top: 20px !important;
width: 30%; /* Adjusted to match the image proportions */
/* display: flex;
align-items: center;
justify-content: center; */
border: none;

}


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

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

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

/* Center box (table) */
.gold-certificate.gold-front .gold-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;
}

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

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

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

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

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

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

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

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

.gold-main-area img{
border: #E0BB7F !important;
height: 1000px;
width: 1000px;
}
}