/* The CSS for the CITB Cards */
.citb-red-card {
    background-color: var(--citb-card-red) !important;
}

.citb-green-card {
    background-color: var(--citb-card-green) !important;
}

.citb-blue-card {
    background-color: var(--citb-card-blue) !important;
}

.citb-gold-card {
    background-color: var(--citb-card-gold) !important;
}

.citb-black-card {
    background-color: var(--citb-card-black) !important;
    color: var(--white) !important;
}

.citb-card {
    /* Scale relative to parent */
    width: 90%; 
    margin: 0 auto;
    
    /* Standard ID Card Ratio (85.60 / 53.98) */
    aspect-ratio: 1.58 / 1; 
    
    background-color: var(--citb-card-default);
    border-radius: 1.5cqw; /* Scalable corners based on width */
    position: relative;
    font-family: Arial, sans-serif;
    overflow: hidden;
    box-shadow: 0 0.3cqw 0.8cqw color-mix(in srgb, var(--highlight), transparent 0%);
    container-type: inline-size; /* Allows children to use cqw units */
    margin-bottom: 1cqw;
}

.citb-logo-placeholder {
    background: var(--light-gray);
    color: var(--white);
    padding: 2cqw 3cqw;
    font-weight: bold;
    border-radius: 1.5cqw; /* Scalable corners based on width */
    font-size: 4cqw;
}

.citb-branding {
    display: flex;
    align-items: center;
    gap: 2cqw;
    text-align: left;
}

.citb-logo-svg {
    height: auto;
    width: 8cqw;
    display: block;
}

.citb-title {
    font-size: 3.5cqw;
    line-height: 1.1;
    font-weight: bold;
}


/* Internal elements use cqw (Container Query Width) to scale perfectly */
.citb-info-section {
    position: absolute;
    top: 30%;
    left: 8%;
    font-weight: bold;
}

.citb-data-field, .citb-expiry {
    font-size: 4.25cqw;
}

.citb-photo-box {
    width: 28cqw; /* Existing width */
    height: 35cqw; /* Existing height */
    background: transparent;
    border: 1px solid var(--page-border);
    position: absolute;
    right: 8%;
    top: 25%;
    overflow: hidden; /* Ensures any cropped parts don't spill out */
}

.citb-photo-box img {
    width: 100%;
    height: 100%;
    /* Key property: covers the box without stretching */
    object-fit: cover; 
    /* Optional: ensures the face stays centered if the image is cropped */
    object-position: center; 
}

.citb-card-footer {
    position: absolute;
    bottom: 5%;
    left: 2%;
    right: 2%;
    height: 15%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 4.5cqw;
    color: #000;
    border-radius: 0 0 1cqw 1cqw;
}

/* Logo placement */
.citb-card-header {
    display: flex;
    justify-content: space-between;
    padding: 4cqw 6cqw;
}