.cf-container {
    max-width: 980px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.cf-tracker {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.cf-step {
    flex: 1;
    padding: .5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    font-size: .9rem;
    color: #666;
}

    .cf-step.active {
        background: #eef7ff;
        border-color: #b6dcff;
        color: #094a7a;
        font-weight: 600;
    }

.cf-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cf-tab {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: .4rem .8rem;
    border-radius: 8px;
}

    .cf-tab.active {
        background: #094a7a;
        color: #fff;
        border-color: #094a7a;
    }

.cf-card {
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 12px;
    background: #fff;
}

.cf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

    .cf-grid .span-2 {
        grid-column: span 2;
    }

.cf-input, select, textarea {
    width: 100%;
    padding: .5rem;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.cf-textarea {
    width: 100%;
}

.cf-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    gap: .5rem;
}

.btn {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: .5rem .9rem;
}

    .btn.ghost {
        background: #f8f8f8;
    }

    .btn.primary {
        background: #0b6dbe;
        color: #fff;
        border-color: #0b6dbe;
    }

.validation-message, .validation-errors, .cf-error {
    color: #b00020;
    margin-top: .25rem;
}

.cf-success {
    border: 1px solid #b7efc5;
    background: #e9f9ee;
    padding: 1rem;
    border-radius: 12px;
}

.cf-previews {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}

    .cf-previews img {
        width: 96px;
        height: 96px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #ddd;
    }

@media (max-width: 780px) {
    .cf-grid {
        grid-template-columns: 1fr;
    }
}

.layout-container {
    min-height: 100vh; /* full viewport height */
    display: flex;
    flex-direction: column; /* stack header, main, footer vertically */
}

.page-body {
    flex: 1; /* expands to push footer down */
    padding: 1rem; /* optional spacing */
}

.k-tabstrip-content
{
    padding-left: 0px !important;
    padding-right: 0px !important;
}