/* ═══ Reloado Rezepte – Custom CSS ════════════════════════════════════════════
   Bootstrap 5 handles the majority. Only exceptions go here.
   Colors: white base, #0d6efd primary accent
═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Navbar ─────────────────────────────────────────────────────────────────*/
.nav-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    flex-shrink: 0;
}

/* Tighten the search box border radius to match button */
.navbar .input-group .form-control {
    border-radius: .375rem 0 0 .375rem;
}
.navbar .input-group .btn {
    border-radius: 0 .375rem .375rem 0;
}

/* ─── Hero banner ────────────────────────────────────────────────────────────*/
.hero-banner {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

.hero-icon-wrap {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, .15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.hero-stat {
    font-size: .875rem;
    opacity: .9;
}

/* ─── Recipe cards ───────────────────────────────────────────────────────────*/
.recipe-card {
    transition: transform .18s ease, box-shadow .18s ease;
}

.recipe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .1) !important;
}

.recipe-card-img {
    height: 185px;
    object-fit: cover;
}

.recipe-no-img {
    height: 185px;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ced4da;
}

/* ─── Recipe carousel ────────────────────────────────────────────────────────*/
.recipe-carousel-img {
    max-height: 420px;
    object-fit: cover;
}

/* ─── Right sidebar (categories widget) ─────────────────────────────────────*/
.sidebar-cat-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    text-decoration: none !important;
    color: #343a40;
    font-size: .875rem;
    border-bottom: 1px solid #f1f3f5;
    transition: background .12s, color .12s;
}

.sidebar-cat-link:last-child {
    border-bottom: none;
}

.sidebar-cat-link:hover {
    background: #f8f9fa;
    color: #0d6efd;
}

.sidebar-cat-link.active {
    background: #e8f0fe;
    color: #0d6efd;
    font-weight: 600;
}

/* ─── Upload wizard ──────────────────────────────────────────────────────────*/
.step-indicator {
    display: flex;
    align-items: center;
}

.step-indicator .step {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

.step-indicator .step.active {
    background: #0d6efd;
    color: #fff;
}

.step-indicator .step.completed {
    background: #198754;
    color: #fff;
}

.step-indicator .connector {
    flex: 1;
    height: 3px;
    background: #dee2e6;
    transition: background .2s;
}

.step-indicator .connector.completed {
    background: #198754;
}

/* ─── Star rating ────────────────────────────────────────────────────────────*/
.star-vote {
    transition: transform .1s;
    cursor: pointer;
}

.star-vote:hover {
    transform: scale(1.15);
}

/* ─── Ingredient drag handle ─────────────────────────────────────────────────*/
.ing-drag-handle {
    cursor: grab;
    color: #adb5bd;
    background: #f8f9fa;
    padding-left: .6rem;
    padding-right: .6rem;
    transition: color .12s, background .12s;
}

.ing-drag-handle:hover {
    color: #0d6efd;
    background: #e8f0fe;
}

.ing-drag-handle:active {
    cursor: grabbing;
}

.ing-drag-handle--section {
    background: #cfe2ff;
    color: #0d6efd;
}

/* SortableJS ghost / chosen */
.ing-drag-ghost {
    opacity: .4;
    background: #e8f0fe;
    border: 1px dashed #0d6efd;
    border-radius: .375rem;
}

.ing-drag-chosen {
    box-shadow: 0 4px 12px rgba(13, 110, 253, .2);
}

/* ─── Ingredient section row (upload form) ───────────────────────────────────*/
.ing-section-row input {
    background-color: #f0f4ff;
    color: #0d6efd;
}

/* ─── Print ─────────────────────────────────────────────────────────────────*/
@media print {
    header, footer, aside, .btn, nav { display: none !important; }
    main, .container-xl { margin: 0 !important; padding: 0 !important; }
}

/* ─── Misc ───────────────────────────────────────────────────────────────────*/
/* Bootstrap 5.3 doesn't ship bg-primary-subtle by default in older builds */
.bg-primary-subtle {
    background-color: #cfe2ff !important;
}
.text-primary {
    color: #0d6efd !important;
}