/* --- Custom Card Container --- */
.player-card-custom {
    background: #fff;
    width: 100%;
    border-radius: 12px;
    /* Rounded card corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Soft shadow */
    overflow: hidden;
    /* Ensures images don't bleed outside rounded corners */
    margin-bottom: 30px;
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- Image Section & Overlays --- */
.img-frame {
    position: relative;
    width: 100%;
    /* 🚨 NEW: Background Image Setup */
    background-image: url('https://assets.cdn.thewebconsole.com/S3WEB6803/images/25-Panther-Head-60.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    /* Keep rounded corners clean */
}

/* --- Add this new rule to your style block --- */
.img-frame .row {
    display: flex;
    /* 🚨 FIX: Forces col-xs-3 and col-xs-9 to match height */
    /* You may need to remove default BS3 row margins for clean edges: */
    margin-left: 0;
    margin-right: 0;
}

/* --- Modify the existing .jumper-number-container rule --- */
.jumper-number-container {
    padding: 15px 0 15px 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* This can now push the number to the guaranteed bottom */
    /* REMOVED: height: 100%; - The flex parent handles stretching now */
}

/* The large number */
.jumper-number-txt {
    font-size: 70px;
    line-height: 1;
    font-weight: 800;
    color: #001540;
    z-index: 2;
    text-align: left;
    margin-top: auto;
}

/* The player image container */
.player-image-container {
    padding-left: 0;
    /* Remove padding between number column and image column */
}

.player-photo {
    width: 100%;
    height: auto;
    display: block;
}

/* The white fade at the bottom (adjust to fit new inner structure) */
.bottom-fade {
    position: absolute;
    bottom: 0;
    left: 25%;
    /* Start the fade at the edge of the number column */
    width: 75%;
    /* Cover only the image column */
    height: 10%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
    z-index: 1;
}

/* --- Typography Section --- */
.card-details {
    padding: 10px 20px 25px 20px;
    color: #001540;
    /* Dark blue base color */
}

.firstname-txt {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 400;
}

.surname-txt {
    font-size: 28px;
    font-weight: 800;
    margin-top: 0;
    text-transform: capitalize;
}

/* Custom thicker, shorter divider */
.custom-divider {
    border-top: 1px solid #091C3A;
    width: 40%;
    /* Short width */
    margin: 15px auto;
    /* Centered margins */
}

.details-txt {
    font-size: 16px;
    margin-bottom: 5px;
    color: #091C3A;
    /* south blue for details */
}

/* --- Sponsor Section --- */
.sponsor-box {
    background-color: #ffffff;
    /* border-radius: 15px;
            padding: 15px;
            margin-top: 15px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.sponsor-img {
    max-width: 100%;
    /* max-height: 60px; */
    /* Ensure logo fits nicely in the box */
    height: auto;
}

/* Add this to the parent .row container */
.row-flex {
    display: flex;
    flex-wrap: wrap;
}

/* Ensure the columns behave like flex items */
.row-flex>[class*='col-'] {
    display: flex;
    flex-direction: column;
}

/* Make the card fill the full height of the column */
.row-flex .player-card-custom {
    flex: 1;
    height: auto !important;
    /* Overrides any previous JS-set heights */
    margin-bottom: 30px;
    /* Keeps spacing between rows */
}