/* --- Style ogólne --- */

/* Komunikaty o statusie (np. "Zapisano pomyślnie") */
.admin-message {
    padding         : 10px;
    margin-bottom   : 15px;
    border-radius   : 4px;
    color           : #155724;
    background-color: #d4edda;
    border          : 1px solid #c3e6cb;
    text-align      : center;
    transition      : opacity 0.5s ease-out;
}

.admin-message.error {
    color           : #721c24;
    background-color: #f8d7da;
    border-color    : #f5c6cb;
}

/* Przełącznik (toggle switch) - KONTERNER */
.toggle-switch {
    position: relative;
    display : inline-block;
    width   : 50px;
    height  : 24px;
}

/* Przełącznik (toggle switch) */
.toggle-switch input {
    opacity: 0;
    width  : 0;
    height : 0;
}

.slider {
    position        : absolute;
    cursor          : pointer;
    top             : 0;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background-color: #dc3545;
    transition      : .4s;
    border-radius   : 24px;
}

.slider:before {
    position        : absolute;
    content         : "";
    height          : 18px;
    width           : 18px;
    left            : 3px;
    bottom          : 3px;
    background-color: white;
    transition      : .4s;
    border-radius   : 50%;
}

/* Tekst wewnątrz przełącznika */
.slider:after {
    content  : 'Nie';
    color    : white;
    display  : block;
    position : absolute;
    transform: translate(-50%, -50%);
    top      : 50%;
    left     : 75%;
    font-size: 10px;
}

input:checked+.slider:after {
    content: 'Tak';
    left   : 25%;
}

input:checked+.slider {
    background-color: #28a745;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

/* --- Style dla formularzy --- */

.przepisy-form-table {
    width: 80%;
}

/* Wymuszenie wyrównania zawartości komórek formularza do lewej */
.przepisy-form-table td.tbl {
    text-align: left;
}

.przepisy-form-field {
    margin-bottom: 15px;
}

.przepisy-form-field label {
    display      : block;
    font-weight  : bold;
    margin-bottom: 5px;
    text-align   : left;
}

.przepisy-form-row {
    margin-bottom: 15px;
}

.przepisy-form-row .przepisy-form-field {
    display       : inline-block;
    vertical-align: top;
    margin-right  : 15px;
}

.przepisy-input-full-width {
    width     : 100%;
    box-sizing: border-box;
}

.przepisy-menu {
    margin-bottom  : 10px;
    margin-top     : 10px;
    text-align     : center;
    display        : flex;
    justify-content: center;
    gap            : 10px;
}

/* NOWOŚĆ: Kontener dla dynamicznych pól wymiarów formy */
.form-dimensions-container {
    display   : flex;
    gap       : 15px;
    margin-top: 10px;
}

/* NOWOŚĆ: Grupowanie pól w rzędzie (Czas, Temp, Termoobieg) */
.przepisy-fields-group {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 25px;
    align-items: flex-start;
}

/* Style dla przycisków wewnątrz menu */
.przepisy-dropdown-content .button {
    display   : block;
    /* Przyciski jeden pod drugim */
    width     : calc(100% - 10px);
    /* Pełna szerokość minus marginesy */
    margin    : 5px;
    box-sizing: border-box;
}

/* Rozwijane menu (dropdown) */
.przepisy-dropdown {
    position: relative;
    display : inline-block;
}

.przepisy-dropdown-content {
    display      : none;
    position     : absolute;
    min-width    : 200px;
    box-shadow   : 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
    z-index      : 1;
    border-radius: 5px;
    padding      : 5px 0;
    margin-top   : 5px;
}

.przepisy-textarea-height-150 {
    height: 150px;
}

.przepisy-textarea-height-80 {
    height: 80px;
}

.przepisy-input-with-unit {
    display      : flex;
    align-items  : center;
    border       : 1px solid #ffa51a;
    border-radius: 4px;
}

.przepisy-input-with-unit input.textbox {
    border   : none;
    flex-grow: 1;
    width    : 100%;
}

.przepisy-input-unit {
    padding    : 0 10px;
    color      : #ffa51a;
    align-self : stretch;
    display    : flex;
    align-items: center;
}

.przepisy-image-preview {
    max-width : 100px;
    max-height: 100px;
}

.przepisy-status-text {
    margin-left: 10px;
    font-weight: bold;
}

.przepisy-skladniki-container {
    width: 100%;
}

.przepisy-skladnik-row {
    margin-bottom: 5px;
    display      : flex;
    gap          : 5px;
    align-items  : center;
}

.przepisy-skladnik-header-item {
    text-align : left;
    flex-shrink: 0;
}

.przepisy-skladnik-row>* {
    flex-shrink: 0;
}

.przepisy-skladnik-width-60 {
    width: 60px !important;
}

.przepisy-skladnik-width-80 {
    width: 80px !important;
}

/* Ujednolicona szerokość dla pól tekstowych składników */
.przepisy-skladnik-width-150 {
    width: 130px !important;
}

.przepisy-button-margin-top {
    margin-top: 10px;
}

/* Style dla dynamicznych etapów */
.przepisy-etapy-container {
    width: 100%;
}

.etap-row {
    display      : flex;
    align-items  : flex-start;
    gap          : 10px;
    margin-bottom: 10px;
}

.etap-label {
    flex-shrink: 0;
    padding-top: 5px;
    font-weight: bold;
}

/* Styl dla samej ikony usuwania (bez tła przycisku) */
.remove-skladnik,
.remove-etap {
    text-decoration: none !important;
    cursor         : pointer;
    font-size      : 18px;
    line-height    : 1;
    display        : inline-block;
    padding        : 5px;
    color          : #dc3545;
    /* Czerwony kolor usuwania */
    transition     : color 0.2s, transform 0.2s;
    vertical-align : middle;
}

.remove-skladnik:hover,
.remove-etap:hover {
    color    : #a71d2a;
    transform: scale(1.2);
}

.przepisy-input-hint {
    display   : block;
    font-size : 11px;
    color     : #666;
    margin-top: 4px;
}

.przepisy-validation-error {
    color      : #d9534f;
    font-weight: bold;
    margin-top : 5px;
}

/* Styl dla intro w formularzu nadsyłania */
.przepisy-form-intro {
    padding         : 15px;
    margin-bottom   : 20px;
    border          : 2px solid #dc3545;
    border-radius   : 5px;
    background-color: rgba(220, 53, 69, 0.1);
}

/* Styl dla paska informacyjnego na górze formularza */
.przepisy-notice-banner {
    padding         : 12px 20px;
    margin-bottom   : 15px;
    border          : 1px solid #4db2ec;
    border-radius   : 8px;
    background-color: rgba(77, 178, 236, 0.05);
    display         : flex;
    align-items     : center;
    gap             : 15px;
    line-height     : 1.4;
}

.przepisy-notice-banner strong {
    color: #4db2ec;
}

.przepisy-notice-banner-admin {
    width           : 80%;
    margin          : 0 auto;
    padding         : 12px 20px;
    margin-bottom   : 15px;
    border          : 1px solid #4db2ec;
    border-radius   : 8px;
    background-color: rgba(77, 178, 236, 0.05);
    display         : flex;
    align-items     : center;
    gap             : 15px;
    line-height     : 1.4;
}

.przepisy-notice-banner-admin strong {
    color: #4db2ec;
}

.przepisy-form-intro h4 {
    margin-top: 0;
    color     : #4db2ec;
}

.przepisy-form-intro p {
    line-height: 1.6;
}

/* Styl dla opisu kategorii w formularzu nadsyłania */
.przepisy-submit-cat-desc {
    display         : none;
    margin-top      : 10px;
    padding         : 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-left     : 3px solid #4db2ec;
    font-size       : 12px;
    color           : #ccc;
}

/* Klasy dla komórek tabeli */
.przepisy-col-width-150 {
    width: 150px;
}

.text-align-center {
    text-align: center;
}

.przepisy-table-width-98 {
    width: 98%;
}

.przepisy-pagination-margin-top {
    margin-top: 10px;
}

.display-none {
    display: none;
}

/* Styl dla dymków z podpowiedziami */
.przepisy-tooltip {
    position   : relative;
    cursor     : help;
    margin-left: 3px;
    font-size  : 16px;
    display    : inline-block;
}

/* Nowy styl dla dymka generowanego przez JS */
.przepisy-tooltip-js {
    position        : fixed;
    background-color: rgba(30, 30, 30, 0.95);
    color           : #f0f0f0;
    padding         : 10px 15px;
    border-radius   : 8px;
    width           : max-content;
    font-size       : 14px;
    max-width       : 350px;
    z-index         : 10000;
    text-align      : left;
    pointer-events  : none;
    line-height     : 1.6;
    border          : 1px solid #4db2ec;
    box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.4);
    word-wrap       : break-word;
    opacity         : 0;
    transition      : opacity 0.2s ease-in-out;
    z-index         : 999;
}

/* Style dla tagów HTML wewnątrz dymka */
.przepisy-tooltip-js strong,
.przepisy-tooltip-js b {
    color: #ffa51a;
}

/* --- Widok listy przepisów i kategorii --- */

/* Nagłówek kategorii (zdjęcie + opis) */
.przepisy-category-header {
    display         : flex;
    align-items     : center;
    gap             : 15px;
    margin-bottom   : 20px;
    padding         : 15px;
    border          : 1px solid #444;
    border-radius   : 8px;
    background-color: rgba(255, 255, 255, 0.03);
}

/* Miniaturka kategorii w nagłówku */
.przepisy-category-header-img {
    max-width    : 60px;
    border-radius: 5px;
    flex-shrink  : 0;
    border       : 1px solid #555;
}

/* Tekst opisu w nagłówku kategorii */
.przepisy-category-header p {
    margin     : 0;
    line-height: 1.6;
}

/* Opis kategorii */
.przepisy-category-description {
    padding         : 15px;
    border-left     : 4px solid #4db2ec;
    background-color: rgba(77, 178, 236, 0.1);
    border-radius   : 0 5px 5px 0;
    color           : #ccc;
    line-height     : 1.6;
}

/* Styl dla ramki wokół ostatnio dodanego przepisu */
.przepis-featured-ramka {
    background-color: rgba(255, 165, 26, 0.05);
    border          : 1px solid #ffa51a;
    border-radius   : 8px;
    padding         : 20px;
    margin-bottom   : 30px;
    box-shadow      : 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Style dla wyróżnionego przepisu */
.przepis-featured-container {
    margin-bottom : 30px;
    padding-bottom: 20px;
    border-bottom : 2px solid #ddd;
}

.przepis-featured-container h3 {
    margin-bottom: 15px;
    font-size    : 18px;
}

.przepis-featured-item {
    display    : flex;
    gap        : 20px;
    align-items: center;
}

.przepis-featured-img {
    width        : 200px;
    height       : 150px;
    object-fit   : cover;
    border-radius: 5px;
    flex-shrink  : 0;
}

.przepis-featured-info h4 {
    margin-top   : 0;
    margin-bottom: 10px;
    font-size    : 22px;
}

.przepis-featured-details {
    list-style-type: none;
    padding        : 0;
    margin         : 0 0 15px 0;
    font-size      : 13px;
}

.przepis-featured-details li {
    padding: 2px 0;
}

.przepis-featured-details strong {
    display: inline-block;
    width  : 150px;
}

.przepisy-lista-container {
    display       : flex;
    flex-direction: column;
    gap           : 20px;
}

.przepis-item {
    display         : flex;
    gap             : 20px;
    padding         : 15px;
    border          : 1px solid #333;
    border-radius   : 5px;
    background-color: rgba(255, 255, 255, 0.05);
    transition      : background-color 0.3s, border-color 0.3s;
}

/* .przepis-item:hover {
    background-color: rgba(77, 178, 236, 0.1);
    border-color    : #4db2ec;
} */

.przepis-item-img {
    width        : 120px;
    height       : 90px;
    object-fit   : cover;
    border-radius: 5px;
    flex-shrink  : 0;
}

.przepis-item-info h3,
.przepis-featured-info h4 {
    color          : #4db2ec;
    text-decoration: none;
}

.przepis-item-description {
    font-size  : 13px;
    color      : #ccc;
    margin     : 10px 0;
    line-height: 1.5;
}

.przepis-item-meta {
    font-size: 12px;
    color    : #bbb;
}

.przepisy-no-items-info {
    padding   : 20px;
    text-align: center;
}

/* --- Widok pojedynczego przepisu --- */

.przepis-view-container {
    display: block;
    width  : 100%;
}

/* Nowy układ wewnątrz ramki metadanych */
.przepis-meta-split {
    display    : flex;
    gap        : 20px;
    align-items: flex-start;
    margin-top : 15px;
}

.przepis-meta-left {
    flex     : 1;
    min-width: 0;
}

.przepis-meta-right {
    flex      : 0 0 180px;
    /* Szerokość zdjęcia wewnątrz ramki (zmniejszona o 1/3) */
    text-align: right;
}

@media (max-width: 600px) {
    .przepis-meta-split {
        flex-direction: column;
    }

    .przepis-meta-right {
        flex      : none;
        width     : 100%;
        text-align: center;
    }
}

.przepis-view-title {
    font-size     : 26px !important;
    color         : #4db2ec !important;
    margin        : 0 0 10px 0 !important;
    text-align    : left;
    border-bottom : 1px solid rgba(77, 178, 236, 0.2);
    padding-bottom: 10px;
}

.przepis-meta-ramka .przepis-badge-container {
    margin-bottom: 15px;
}

.przepis-view-right h3 {
    color         : #40E0D0;
    border-bottom : 1px solid #444;
    padding-bottom: 5px;
}

.przepis-view-img {
    display      : block;
    margin       : 0;
    max-width    : 100%;
    height       : auto;
    max-height   : 250px;
    border-radius: 5px;
    box-shadow   : 0 4px 15px rgba(0, 0, 0, 0.5);
}

.przepis-view-skladniki-lista {
    list-style-type: none;
    padding        : 0;
    margin-bottom  : 20px;
}

.przepis-view-skladniki-lista li {
    padding         : 10px 15px;
    margin-bottom   : 8px;
    background-color: rgba(255, 255, 255, 0.03);
    border-left     : 4px solid #4db2ec;
    border-radius   : 4px;
    display         : flex;
    align-items     : center;
    font-size       : 16px;
    transition      : background-color 0.2s;
}

.przepis-view-skladniki-lista li:hover {
    background-color: rgba(77, 178, 236, 0.08);
}

/* Nowy styl dla dodatkowych informacji o składniku (rodzaj, typ) */
.skladnik-dodatki {
    color    : #9cdcfe;
    font-size: inherit;
}

.skladnik-ilosc {
    font-weight    : bold;
    color          : #ffa51a;
    min-width      : 90px;
    margin-right   : 15px;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    line-height    : 1.3;
}

/* Styl dla całego wiersza opcjonalnego składnika w widoku */
.is-optional-ingredient {
    font-style       : italic;
    opacity          : 0.85;
    border-left-color: #ffa51a !important;
}

/* Styl dla składnika opcjonalnego w widoku */
.skladnik-optional-badge {
    font-size     : 9px;
    background    : rgba(255, 165, 26, 0.2);
    color         : #ffa51a;
    padding       : 1px 8px;
    border-radius : 10px;
    margin-left   : 8px;
    padding       : 1px 4px;
    border-radius : 3px;
    margin-left   : 0;
    margin-bottom : 2px;
    text-transform: uppercase;
    font-weight   : 900;
    font-weight   : bold;
    border        : 1px solid rgba(255, 165, 26, 0.3);
    font-style    : normal;
    width         : fit-content;
}

/* Wyróżnienie opcjonalnego wiersza w formularzu */
.skladnik-row.is-optional {
    background-color: rgba(255, 165, 26, 0.05);
    border-left     : 4px solid #ffa51a !important;
    padding-left    : 5px;
}

/* Numer i opis etapu w widoku przepisu */
.etap-numer {
    font-weight  : bold;
    color        : #01aa01;
    margin-bottom: 5px;
}

.etap-opis {
    color      : #ffffff;
    line-height: 1.6;
}

.przepis-view-przygotowanie,
.przepis-view-sugestie,
.przepis-view-sugestie-admin {
    line-height  : 1.6;
    margin-bottom: 20px;
}

.kategorie-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap                  : 20px;
}

.kategoria-card {
    display         : block;
    text-decoration : none;
    border          : 1px solid #333;
    border-radius   : 8px;
    overflow        : hidden;
    transition      : transform 0.2s ease, box-shadow 0.2s ease;
    background-color: rgba(255, 255, 255, 0.05);
}

/* .kategoria-card:hover {
    border-color   : #4db2ec;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
} */

.kategoria-card-img-wrapper {
    width : 100%;
    height: 150px;
}

.kategoria-card-img {
    width     : 100%;
    height    : 100%;
    object-fit: contain;
}

.kategoria-card-title {
    padding    : 12px;
    font-weight: bold;
    font-size  : 14px;
    text-align : center;
    color      : #ffa51a;
    flex-grow  : 1;
}

.kategoria-card-action {
    text-align   : center;
    margin-top   : 10px;
    margin-bottom: 10px;
}

.przepis-view-etapy-lista {
    list-style-type: none;
    padding-left   : 0;
    counter-reset  : etap-counter;
}

.przepis-view-etapy-lista li {
    counter-increment: etap-counter;
    margin-bottom    : 15px;
    padding-left     : 35px;
    position         : relative;
}

/* Ostrzeżenie (disclaimer) */
.przepis-disclaimer {
    padding         : 15px;
    margin-bottom   : 25px;
    border          : 1px solid #ffc107;
    border-radius   : 5px;
    background-color: rgba(255, 193, 7, 0.1);
    color           : #f8d775;
    text-align      : center;
    font-size       : 13px;
}

.przepis-disclaimer strong {
    color: #ffc107;
}

/* Lista metadanych (autor, czas, itp.) */
.przepis-meta-lista {
    list-style-type: none;
    padding        : 0;
    margin         : 10px 0;
    font-size      : 13px;
    color          : #ccc;
}

.przepis-meta-lista li {
    padding    : 3px 0;
    display    : flex;
    align-items: center;
}

.przepis-meta-lista .meta-label {
    font-weight : bold;
    color       : #ffa51a;
    margin-right: 8px;
    flex-shrink : 0;
}

.przepis-meta-lista .meta-value {
    color: #f0f0f0;
}

/* --- Sekcja komentarzy --- */

.przepisy-comments-section {
    margin-top : 30px;
    padding-top: 20px;
    border-top : 1px solid #444;
}

.comments-list {
    margin-bottom: 30px;
}

.comment-item {
    background-color: rgba(255, 255, 255, 0.05);
    border          : 1px solid #333;
    border-radius   : 5px;
    padding         : 15px;
    margin-bottom   : 15px;
}

/* Subtelne wyróżnienie komentarza admina */
.comment-item.admin-comment {
    background-color: rgba(77, 178, 236, 0.1);
    border-color    : #4db2ec;
}

/* Styl dla ukrytego komentarza (widoczny tylko dla admina) */
.comment-item.hidden-comment {
    background-color: rgba(220, 53, 69, 0.1);
    border-color    : #dc3545;
}

.comment-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 10px;
    padding-bottom : 5px;
    border-bottom  : 1px dotted #555;
}

.comment-author {
    font-weight: bold;
    color      : #ffa51a;
}

.comment-author .admin-label {
    background-color: #d83d3d;
    color           : #fff;
    padding         : 2px 5px;
    border-radius   : 3px;
    font-size       : 10px;
    margin-right    : 5px;
}

.comment-date {
    font-size: 12px;
    color    : #999;
}

.comment-body {
    line-height: 1.6;
}

.comment-edited-info {
    font-size  : 11px;
    color      : #888;
    margin-top : 20px;
    padding-top: 10px;
    line-height: 1.5;
}

.comment-edited-info hr {
    border       : 0;
    border-top   : 1px solid #444;
    margin-bottom: 10px;
}

.comment-edited-info .edited-by-text {
    color     : #dc3545;
    font-style: italic;
}

.comment-edited-info strong {
    color: #ffa51a;
}

.comment-actions {
    margin-top: 10px;
    text-align: right;
}

.comment-actions .button {
    padding   : 3px 8px;
    font-size : 11px;
    background: #444;
    border    : 1px solid #555;
}

.comment-actions .button:hover {
    background: #555;
    border    : 1px solid #666;
}

.comment-actions .admin-edit-btn {
    background  : #6f42c1;
    border-color: #7c50c8;
}

.comment-actions .admin-edit-btn:hover {
    background  : #7c50c8;
    border-color: #8a60d0;
}

.comment-actions .admin-publish-btn {
    background  : #28a745;
    border-color: #2ebf4d;
}

.comment-actions .admin-publish-btn:hover {
    background: #2ebf4d;
}

.comment-actions .admin-hide-btn {
    background  : #ffc107;
    border-color: #ffca2c;
    color       : #212529;
}

.comment-actions .admin-delete-btn {
    background  : #dc3545;
    border-color: #e44d5a;
}

/* Cytaty w komentarzach */
.comment-quote {
    background-color: rgba(0, 0, 0, 0.2);
    border-left     : 3px solid #ffa51a;
    padding         : 10px;
    margin          : 10px 0;
    border-radius   : 0 4px 4px 0;
}

.comment-quote cite {
    display      : block;
    font-style   : normal;
    font-size    : 12px;
    color        : #ccc;
    margin-bottom: 5px;
}

/* --- Panel Administracyjny --- */

.admin-actions {
    text-align: center;
}

.admin-actions a {
    text-decoration: none;
    font-size      : 20px;
    margin         : 0 5px;
    display        : inline-block;
}

/* Tabela w panelu admina - ogólne */
.przepisy-admin-table td {
    vertical-align: middle;
}

/* Tabela komentarzy w panelu admina */
.przepisy-comments-admin-table {
    table-layout: fixed;
    font-size   : 13px;
}

.przepisy-comments-admin-table td {
    padding       : 8px;
    vertical-align: middle;
    word-wrap     : break-word;
}

.przepisy-comments-admin-table .tbl1 {
    background-color: #2a2a2a;
}

.przepisy-comments-admin-table .tbl2 {
    background-color: #333;
}

/* Okno modalne (popup) */
.przepisy-modal {
    display         : none;
    position        : fixed;
    z-index         : 1000;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    overflow        : auto;
    background-color: rgba(0, 0, 0, 0.6);
}

/* --- Dashboard Admina --- */
.przepisy-dashboard {
    display  : flex;
    flex-wrap: wrap;
    gap      : 20px;
    margin   : 10px 0 20px 0;
}

.dash-card {
    flex            : 1;
    min-width       : 180px;
    background-color: rgba(77, 178, 236, 0.05);
    border          : 1px solid #4db2ec;
    border-radius   : 8px;
    padding         : 20px;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    text-align      : center;
    transition      : transform 0.2s, box-shadow 0.2s;
}

.dash-card:hover {
    transform : translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dash-card-icon {
    font-size    : 32px;
    margin-bottom: 10px;
}

.dash-card-value {
    font-size  : 24px;
    font-weight: bold;
    color      : #ffa51a;
}

.dash-card-label {
    font-size     : 12px;
    color         : #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top    : 5px;
}

.dash-popular-section {
    width           : 100%;
    background-color: rgba(255, 255, 255, 0.03);
    border          : 1px solid #444;
    border-radius   : 8px;
    padding         : 15px;
}

/* Nowy wygląd listy popularnych przepisów */
.dash-popular-list {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    margin-top    : 15px;
}

.popular-item {
    display      : flex;
    align-items  : center;
    gap          : 15px;
    padding      : 10px;
    background   : rgba(255, 255, 255, 0.02);
    border       : 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    transition   : background 0.2s;
}

.popular-item:hover {
    background: rgba(77, 178, 236, 0.08);
}

.popular-rank {
    font-size  : 20px;
    font-weight: bold;
    color      : #4db2ec;
    width      : 30px;
    text-align : center;
}

.popular-img {
    width        : 60px;
    height       : 45px;
    object-fit   : cover;
    border-radius: 4px;
    border       : 1px solid rgba(77, 178, 236, 0.3);
}

.popular-title {
    flex       : 1;
    font-size  : 16px;
    font-weight: bold;
}

.popular-title a {
    color          : #f0f0f0;
    text-decoration: none;
}

.popular-info-meta {
    text-align: right;
    min-width : 100px;
}

.popular-views {
    font-size    : 15px;
    color        : #ffa51a;
    font-weight  : bold;
    margin-bottom: 2px;
}

.popular-item-rating {
    font-size: 11px;
    color    : #888;
}

/* Styl dla paska informacyjnego na górze formularza */
.przepisy-modal-content {
    background-color: #222;
    margin          : 10% auto;
    padding         : 20px;
    border          : 1px solid #888;
    width           : 80%;
    max-width       : 500px;
    border-radius   : 8px;
    position        : relative;
    box-shadow      : 0 5px 15px rgba(0, 0, 0, 0.5);
}

.przepisy-modal-close {
    color      : #aaa;
    float      : right;
    font-size  : 28px;
    font-weight: bold;
    position   : absolute;
    top        : 10px;
    right      : 15px;
}

.przepisy-modal-close:hover,
.przepisy-modal-close:focus {
    color          : #fff;
    text-decoration: none;
    cursor         : pointer;
}

/* Styl dla ramek w widoku przepisu (składniki, przygotowanie, etc.) */
.przepis-ramka {
    background-color: rgba(255, 255, 255, 0.05);
    border          : 1px solid #333;
    border-radius   : 5px;
    padding         : 15px;
    margin-bottom   : 20px;
}

/* Upewniamy się, że nagłówek wewnątrz ramki nie ma dodatkowego marginesu na górze */
.przepis-ramka h3 {
    margin-top: 0;
}

/* Ramka metadanych w widoku przepisu */
.przepis-meta-ramka {
    background-color: rgba(77, 178, 236, 0.05);
    border          : 1px solid #4db2ec;
    border-radius   : 8px;
    padding         : 15px;
    margin-top      : 15px;
    margin-bottom   : 30px;
    box-shadow      : 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* Czcionka z ikonami */
@font-face {
    font-family: 'recipe-icons';
    src        : url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUEAAsAAAAAB5wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7klSY21hcAAAAYAAAABVAAABYJA0/CFnbHlmAAABzAAAAU8AAAHwPDt3j2hlYWQAAAM0AAAALwAAADYRT45oaGVhAAADXAAAAB0AAAAkCAEEAmhtdHgAAANwAAAAEAAAABAEAAAAbG9jYQAAA4AAAAAMAAAADACoAGFtYXhwAAADkAAAABgAAAAgAgEAFG5hbWUAAAPQAAABHwAAAoR1/3NtcG9zdAAABJAAAAAgAAABOPlL/bJ4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4AWPZ2QAA/+4-');
    font-weight: normal;
    font-style : normal;
}

[class*="icon-"] {
    font-family            : 'recipe-icons' !important;
    font-style             : normal;
    font-weight            : normal;
    font-variant           : normal;
    text-transform         : none;
    line-height            : 1;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-difficulty:before {
    content: "\e900";
}

.icon-temp:before {
    content: "\e901";
}

.icon-time:before {
    content: "\e902";
}

.ostatnie-przepisy-panel {
    position  : relative;
    overflow  : hidden;
    transition: height 0.5s ease-in-out;
}

.ostatni-przepis-item-new {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    box-sizing      : border-box;
    display         : flex;
    align-items     : center;
    gap             : 15px;
    height          : auto;
    min-height      : 100px;
    padding         : 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border          : 1px solid #333;
    text-decoration : none;
    transition      : opacity 0.5s ease-in-out;
    opacity         : 0;
}

.ostatni-przepis-item-new.active {
    opacity       : 1;
    pointer-events: auto;
}

/* .ostatni-przepis-item-new:hover {
    background-color: rgba(77, 178, 236, 0.1);
    border-color    : #4db2ec;
} */

.ostatni-przepis-img-new {
    width        : 70px;
    height       : 70px;
    object-fit   : cover;
    border-radius: 6px;
    flex-shrink  : 0;
}

.ostatni-przepis-info-new {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    min-height     : 100%;
    flex-grow      : 1;
    overflow       : hidden;
}

.ostatni-przepis-header {
    line-height  : 1.2;
    margin-bottom: 2px;
}

.ostatni-przepis-kategoria {
    font-size     : 11px;
    font-weight   : bold;
    color         : #ffa51a;
    text-transform: uppercase;
}

.ostatni-przepis-info {
    font-size     : 11px;
    font-weight   : bold;
    color         : #26cf26;
    text-transform: uppercase;
}

.ostatni-przepis-title-new {
    font-size    : 16px;
    margin       : 2px 0 0 0;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.ostatni-przepis-title-new a {
    color: #4db2ec;
}

.ostatni-przepis-meta-new {
    display      : flex;
    flex-wrap    : wrap;
    gap          : 8px;
    font-size    : 11px;
    color        : #ccc;
    margin-top   : 5px;
    margin-bottom: 5px;
}

.ostatni-przepis-meta-new span {
    display    : flex;
    align-items: center;
    gap        : 3px;
}

.ostatni-przepis-action-new {
    display        : flex;
    align-items    : center;
    flex-shrink    : 0;
    justify-content: center;
}

.trudnosc-poziom-1 {
    color: #28a745;
}

.trudnosc-poziom-2 {
    color: #ffc107;
}

.trudnosc-poziom-3 {
    color: #dc3545;
}

/* --- Odznaczenia (badges) - Nowy Styl --- */
.przepis-badge-container {
    margin-bottom: 15px;
    display      : flex;
    align-items  : center;
    gap          : 8px;
}

.przepis-badge-label {
    font-size     : 10px;
    text-transform: uppercase;
    color         : #888;
    font-weight   : bold;
    letter-spacing: 1px;
}

.przepis-badge {
    display       : inline-block;
    padding       : 3px 12px;
    font-size     : 11px;
    font-weight   : bold;
    border-radius : 4px;
    color         : #fff;
    text-transform: uppercase;
    box-shadow    : 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Kolor dla "Sprawdzony" */
.badge-1 {
    background-color: #28a745;
}

/* Kolor dla "Dla mnie dobry" */
.badge-2 {
    background-color: #007bff;
}

/* Kolor dla "Testujesz na własną odpowiedzialność" */
.badge-3 {
    background-color: #ffc107;
    color           : #212529;
}

/* Nowe style dla paska akcji (np. drukowanie) */
.przepis-actions-bar {
    text-align : center;
    margin     : 10px 0 20px 0;
    padding-top: 10px;
    border-top : 1px solid #444;
}

.przepis-action-icon {
    font-size      : 24px;
    text-decoration: none;
    opacity        : 0.7;
    transition     : opacity 0.2s;
}

.przepis-action-icon:hover {
    opacity: 1;
}

/* Powiadomienia "na żywo" (toasts) */
.przepisy-toast {
    position     : fixed;
    top          : 20px;
    left         : 50%;
    transform    : translateX(-50%) translateY(-20px);
    padding      : 15px 20px;
    border-radius: 5px;
    color        : #fff;
    font-size    : 14px;
    z-index      : 9999;
    opacity      : 0;
    transition   : opacity 0.5s, transform 0.5s;
    box-shadow   : 0 5px 15px rgba(0, 0, 0, 0.3);
}

.przepisy-toast.show {
    opacity  : 1;
    transform: translateX(-50%) translateY(0);
}

.przepisy-toast.toast-success {
    background-color: #28a745;
}

.przepisy-toast.toast-error {
    background-color: #dc3545;
}

.przepisy-toast.toast-info {
    background-color: #17a2b8;
}

/* Pasek informacyjny dla podglądu admina w widoku przepisu */
.admin-preview-bar {
    background-color: #6f42c1;
    color           : #fff;
    text-align      : center;
    padding         : 10px;
    font-weight     : bold;
    margin-bottom   : 15px;
    border-radius   : 4px;
    border          : 1px solid #8a60d0;
}

/* Nieaktywne przyciski */
.button[disabled],
.button[disabled]:hover {
    background-color: #555 !important;
    color           : #999 !important;
    border-color    : #444 !important;
    cursor          : not-allowed;
    opacity         : 0.6;
}

a.button.disabled {
    pointer-events: none;
}

/* Przyciski o stałej szerokości */
.przepis-button {
    width     : 135px;
    box-sizing: border-box;
}

/* Kontener menu admina w widoku przepisu */
.przepisy-admin-actions-menu {
    text-align: center;
    margin-top: 20px;
}

/* --- Kalkulator kuchenny --- */
.przepisy-calc-container {
    background-color: rgba(255, 165, 26, 0.05);
    border          : 1px solid #ffa51a;
    border-radius   : 8px;
    padding         : 20px;
    margin-top      : 30px;
}

.przepisy-calc-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap                  : 15px;
    margin-top           : 15px;
}

.przepisy-calc-field label {
    display       : block;
    font-size     : 11px;
    color         : #ffa51a;
    margin-bottom : 5px;
    text-transform: uppercase;
}

.przepisy-calc-field input,
.przepisy-calc-field select {
    width     : 100%;
    box-sizing: border-box;
}

.przepisy-calc-intro {
    margin-bottom : 15px;
    border-bottom : 1px solid rgba(255, 165, 26, 0.2);
    padding-bottom: 10px;
}

.przepisy-calc-intro h4 {
    margin: 0 0 5px 0;
    color : #4db2ec;
}

.przepisy-calc-intro p {
    margin   : 0;
    font-size: 12px;
    color    : #ccc;
}

.history-item {
    background     : rgba(255, 255, 255, 0.03);
    border-left    : 3px solid #ffa51a;
    padding        : 8px 10px;
    margin-bottom  : 5px;
    border-radius  : 0 4px 4px 0;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    cursor         : pointer;
    transition     : background 0.2s;
}

.history-item:hover {
    background: rgba(255, 165, 26, 0.1);
}

.history-item-text {
    flex-grow: 1;
}

.history-copy-btn {
    font-size  : 16px;
    cursor     : copy;
    margin-left: 10px;
    opacity    : 0.6;
}

.history-copy-btn:hover {
    opacity: 1;
}

.history-item strong {
    color: #4db2ec;
}

/* --- System Ocen (Gwiazdki) --- */
.stars {
    display: flex;
    gap    : 2px;
}

.star {
    font-size : 24px;
    cursor    : pointer;
    color     : #444;
    /* Kolor pustej gwiazdki */
    transition: color 0.2s, transform 0.1s;
}

.star.filled {
    color: #ffa51a;
    /* Kolor wypełnionej gwiazdki */
}

.star.hovered {
    color    : #ffc107 !important;
    /* Kolor przy najechaniu (wyższy priorytet) */
    transform: scale(1.2);
}

.rating-label {
    font-weight: bold;
}

.rating-info {
    font-size  : 12px;
    color      : #888;
    margin-left: 5px;
}

/* --- Powiadomienie Admina (analogiczne do modułu muzycznego) --- */
.przepisy-notification-popup {
    position     : fixed;
    bottom       : 20px;
    right        : 20px;
    background   : #1a1a1a;
    border       : 2px solid #4db2ec;
    padding      : 15px;
    border-radius: 8px;
    box-shadow   : 0 4px 15px rgba(0, 0, 0, 0.6);
    z-index      : 9999;
    color        : #fff;
    min-width    : 250px;
    animation    : slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity  : 0;
    }

    to {
        transform: translateX(0);
        opacity  : 1;
    }
}

.przepisy-notification-popup strong {
    display      : block;
    color        : #ffa51a;
    margin-bottom: 10px;
    font-size    : 14px;
}
.przepisy-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}