/* =========================================================
   ID CARD THEME VARIABLES
   ========================================================= */
:root {
    /* ===== Main Colors ===== */
    --card-front-bg: #ee0b0b;
    --primary-blue: #ff0000;
    --white: #FFFFFF;
    --black: #000000;
    --profile-red: #FF0000;
    --back-bottom-bg: #F5F3B1;

    /* ===== Card Dimensions ===== */
    --front-top-height: 10px;
    --front-bottom-height: 55px;
    --back-top-height: 30px;
    --back-bottom-height: 40px;
    --offspace-height: 40px;
    --barcode-height: 58px;

    /* ===== Border Radius ===== */
    --radius-front-top-left: 70% 20%;
    --radius-front-top-right: 50% 20%;
    --radius-front-bottom-left: 70% 20%;
    --radius-front-bottom-right: 50% 20%;
    --radius-back-top-left: 70% 20%;
    --radius-back-top-right: 50% 20%;
    --radius-back-bottom-left: 70% 20%;
    --radius-back-bottom-right: 50% 20%;

    /* ===== Positioning ===== */
    --barcode-margin-left: 40px;
    --principal-signature-margin-left: 45px;

    /* ===== Typography ===== */
    --footer-font-weight: 800;
}


/* =========================================================
   FRONT CARD
   ========================================================= */

.card-front-user {
    background-color: var(--card-front-bg);
}


/* =========================================================
   FRONT CARD TOP
   ========================================================= */

.card-front-top {
    border-bottom-left-radius: var(--radius-front-top-left);
    border-bottom-right-radius: var(--radius-front-top-right);

    position: relative;

    height: var(--front-top-height);

    background-image: linear-gradient(
        var(--primary-blue),
        var(--white)
    );
}


/* =========================================================
   FRONT CARD BOTTOM
   ========================================================= */

.card-front-bottom {
    border-top-left-radius: var(--radius-front-bottom-left);
    border-top-right-radius: var(--radius-front-bottom-right);

    position: relative;

    height: var(--front-bottom-height);

    background-image: linear-gradient(
        var(--white),
        var(--primary-blue)
    );
}


/* =========================================================
   FRONT CARD OFFSPACE
   ========================================================= */

.card-front-bottom-offspace td {
    height: var(--offspace-height);
}


/* =========================================================
   BACK CARD TOP
   ========================================================= */

.card-back-top {
    border-bottom-left-radius: var(--radius-back-top-left);
    border-bottom-right-radius: var(--radius-back-top-right);

    position: relative;

    height: var(--back-top-height);

    background-image: linear-gradient(
        var(--primary-blue),
        var(--white)
    );
}


/* =========================================================
   BACK CARD BOTTOM
   ========================================================= */

.card-back-bottom {
    border-top-left-radius: var(--radius-back-bottom-left);
    border-top-right-radius: var(--radius-back-bottom-right);

    position: relative;

    height: var(--back-bottom-height);

    background-image: linear-gradient(
        var(--white),
        var(--primary-blue)
    );

    background-color: var(--back-bottom-bg);
}


/* =========================================================
   FRONT TABLE
   ========================================================= */

.table_front {
    margin-top: -10px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer_font {
    color: var(--black) !important;
    font-weight: var(--footer-font-weight) !important;
}

.footer_font > i > b {
    color: var(--black) !important;
    font-weight: var(--footer-font-weight) !important;
}


/* =========================================================
   PROFILE / STUDENT COURSE
   ========================================================= */

.profile_item_student_course {
    display: none;
}


/* =========================================================
   PROFILE ITEM
   ========================================================= */

.profile_item {
    color: var(--profile-red);
}


/* =========================================================
   PRINCIPAL SIGNATURE
   ========================================================= */

.princi_signature {
    margin-left: var(--principal-signature-margin-left) !important;
}


/* =========================================================
   BARCODE
   ========================================================= */

.barcode_image {
    height: var(--barcode-height) !important;
    margin-left: var(--barcode-margin-left) !important;
}