body {
    background-color: #f4f4f4; /* Custom background */
    /* Other properties like font-family, color, line-height will come from Bootstrap */
}

footer {
    text-align: center;
    padding: 1rem 0;
    margin-top: 30px;
    background: #333;
    color: #fff;
}

/* Styles from business_card_form.html */
.field-formset { margin-bottom: 10px; padding: 10px; border: 1px solid #eee; border-radius: 4px; }
.field-formset label { display: inline-block; margin-right: 5px; }
.field-formset input[type="checkbox"] { margin-right: 2px; }
.field-formset p { margin: 5px 0; }
#card-fields-formset-container .card-field-item { cursor: grab; }

/* Styles for card_analytics.html - Keep specific ID/class if still needed */
.analytics-container #viewsMap { height: 400px; margin-bottom: 20px; border: 1px solid #ccc; }
/* .chart-container-wrapper { min-height: 300px; } was in template extra_head, so if this is also there, one can be removed. Assuming extra_head is preferred. */


/* Styles from public_card_detail.html */
/* Assuming .public-card-page .card-container is now .public-card-custom if that's the class on the <div class="card ..."> */
/* For now, keeping .card-container selector as per original CSS, but this might need adjustment to target the Bootstrap card if class name changed. */
.public-card-page .card-container { max-width: 400px; margin: 20px auto; border: 1px solid #ccc; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); background-color: #fff; }
.public-card-page .banner img { width: 100%; height: auto; display: block; }
.public-card-page .profile { padding: 15px; } /* text-align: center; removed (handled by .text-center in template) */
.public-card-page .profile img { width: 100px; height: 100px; object-fit: cover; margin-bottom: 10px; }
.public-card-page .profile-pic-round { border-radius: 50%; }
.public-card-page .profile-pic-rounded-square { border-radius: 15px; }
.public-card-page .profile-pic-square { border-radius: 0; }
/* .public-card-page .card-name removed (handled by .h4 on card-title) */
/* .public-card-page .card-fields, .card-fields li, .field-label removed (handled by Bootstrap list-group and fw-bold) */
.public-card-page .background-container {
    /* background-image property is set inline based on card.background_picture.url */
    background-size: cover;
    background-position: center;
    padding: 10px 0;
    min-height: calc(100vh - 60px - 74px); /* Approx header and footer height */
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 420px) {
    .public-card-page .card-container { margin: 10px; }
    .public-card-page .background-container { padding: 0; }
}
