/* Základní proměnné */

:root {

    --rawbark-primary: #f99e22;

    --rawbark-primary-light: #f99e222e;

    --rawbark-border: #e7e7e7;

    --rawbark-text: #3d182c;

    --rawbark-spacing: 1em;

    --rawbark-radius: 8px;

}



/* Základní zprávy a notifikace */

.rawbark_reward_points_message {

    background-color: var(--rawbark-primary-light);

    color: var(--rawbark-text);

    padding: var(--rawbark-spacing) 1.618em;

    margin-bottom: 2.617924em;

    border-radius: var(--rawbark-radius) !important;

    border: 1px solid var(--rawbark-border) !important;

    position: relative;

    overflow: hidden;

}



.rawbark_reward_points_message strong {

    font-weight: 600;

    color: var(--rawbark-text);

}



/* Body a jejich zobrazení */

.rawbark-points-balance {

    display: inline-flex;

    align-items: center;

    gap: 0.5em;

    padding: 0.5em 1em;

    background: var(--rawbark-primary-light);

    border-radius: var(--rawbark-radius);

    margin: 0.5em 0;

}



.rawbark-points-value {

    font-weight: 600;

    color: var(--rawbark-text);

}



/* Úkoly a jejich zobrazení */

.rawbark-tasks-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: var(--rawbark-spacing);

    margin: var(--rawbark-spacing) 0;

}



.rawbark-task-card {

    background: #fff;

    border: 1px solid var(--rawbark-border);

    border-radius: var(--rawbark-radius);

    padding: var(--rawbark-spacing);

    transition: transform 0.2s ease;

}



.rawbark-task-card:hover {

    transform: translateY(-2px);

}



.rawbark-task-card.completed {

    background-color: var(--rawbark-primary-light);

}



/* Historie bodů */

.rawbark-points-history {

    margin: var(--rawbark-spacing) 0;

}



.rawbark-points-history table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    margin: var(--rawbark-spacing) 0;

}



.rawbark-points-history th,

.rawbark-points-history td {

    padding: 0.75em 1em;

    text-align: left;

    border-bottom: 1px solid var(--rawbark-border);

}



.rawbark-points-history th {

    background: var(--rawbark-primary-light);

    font-weight: 600;

}



/* Ikona tlapky */

.paw-after {

    display: inline-block;

    width: 1em;

    height: 1em;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%233d182c" d="M12 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm2 14h-4v6h4v-6z"/></svg>');

    background-size: contain;

    background-repeat: no-repeat;

    vertical-align: middle;

    margin-left: 0.25em;

}



/* Přístupnost pro tmavý režim */

@media (prefers-color-scheme: dark) {

    :root {

        --rawbark-primary-light: rgba(249, 158, 34, 0.15);

        --rawbark-border: #3d3d3d;

        --rawbark-text: #ffffff;

    }



    .rawbark-task-card {

        background: #1f1f1f;

    }

}



/* Responzivita */

@media screen and (max-width: 768px) {

    .rawbark-tasks-grid {

        grid-template-columns: 1fr;

    }



    .rawbark-points-history {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }

}



/* Animace a interaktivita */

@keyframes points-highlight {

    0% { transform: scale(1); }

    50% { transform: scale(1.1); }

    100% { transform: scale(1); }

}



.points-value.updated {

    animation: points-highlight 0.5s ease;

}



/* Přístupnost */

@media (prefers-reduced-motion: reduce) {

    .rawbark-task-card,

    .points-value.updated {

        transition: none;

        animation: none;

    }

}



/* Print styly */

@media print {

    .rawbark_reward_points_message,

    .rawbark-points-balance,

    .rawbark-task-card {

        box-shadow: none !important;

        border: 1px solid #000 !important;

    }

}

/* Uplatnění tlapiček v košíku */

.rawbark-points-input-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

}



.rawbark-points-input-wrapper input {

    width: 80px;

    text-align: center;

}



.rawbark-points-input-wrapper .description {

    color: #666;

}



.rawbark-points-input-wrapper.updating {

    opacity: 0.5;

    pointer-events: none;

}



/* Styly pro úrovně */

.rawbark-current-level,

.rawbark-next-level {

    margin: 20px 0;

    padding: 20px;

    background-color: #f8f9fa;

    border-radius: 5px;

    border-left: 4px solid #007bff;

}



.rawbark-current-level .level-name,

.rawbark-next-level .level-name {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 10px;

    color: #007bff;

}



.rawbark-current-level .level-points,

.rawbark-next-level .level-progress {

    font-size: 16px;

    color: #444;

}



.levels-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 20px;

    margin: 15px 0;

}



.level-card {

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 5px;

    padding: 20px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

    position: relative;

}



.level-card h4 {

    margin-top: 0;

    margin-bottom: 10px;

    font-size: 18px;

    color: #333;

}



.level-requirements {

    font-size: 15px;

    color: #555;

    margin-bottom: 15px;

    padding-bottom: 15px;

    border-bottom: 1px solid #eee;

}



.level-benefits h5 {

    margin-top: 0;

    margin-bottom: 10px;

    font-size: 15px;

    color: #555;

}



.level-benefits ul {

    margin: 0;

    padding-left: 20px;

}



.level-benefits li {

    margin-bottom: 5px;

    font-size: 14px;

}



.level-progress {

    margin-top: 15px;

    font-weight: bold;

    color: #007bff;

}



.level-card.current-level {

    border-color: #28a745;

    background-color: #f8fff8;

}



.level-card.current-level:before {

    content: "✓";

    position: absolute;

    top: 10px;

    right: 10px;

    width: 24px;

    height: 24px;

    background-color: #28a745;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

}



/* Styly pro jednotlivé úrovně */

.rawbark-current-level h3,

.rawbark-next-level h3 {

    margin-top: 0;

    margin-bottom: 15px;

}



/* Barvy úrovní */

.rawbark-current-level.level-1 .level-name,

.level-card.level-1 h4 {

    color: #3498db; /* Modrá pro "Nová" */

}



.rawbark-current-level.level-2 .level-name,

.level-card.level-2 h4 {

    color: #27ae60; /* Zelená pro "Věrná" */

}



.rawbark-current-level.level-3 .level-name,

.level-card.level-3 h4 {

    color: #95a5a6; /* Stříbrná */

}



.rawbark-current-level.level-4 .level-name,

.level-card.level-4 h4 {

    color: #cd7f32; /* Bronzová */

}



.rawbark-current-level.level-5 .level-name,

.level-card.level-5 h4 {

    color: #f1c40f; /* Zlatá */

}



.rawbark-current-level.level-6 .level-name,

.level-card.level-6 h4 {

    color: #8e44ad; /* Fialová pro "Královská" */

}



/* Přidání třídy pro aktuální úroveň */

.rawbark-current-level {

    border-left-width: 6px;

}



/* Speciální styly pro jednotlivé úrovně */

.rawbark-current-level.level-1 {

    border-left-color: #3498db; /* Modrá pro "Nová" */

    background-color: rgba(52, 152, 219, 0.1);

}



.rawbark-current-level.level-2 {

    border-left-color: #27ae60; /* Zelená pro "Věrná" */

    background-color: rgba(39, 174, 96, 0.1);

}



.rawbark-current-level.level-3 {

    border-left-color: #95a5a6; /* Stříbrná */

    background-color: rgba(149, 165, 166, 0.1);

}



.rawbark-current-level.level-4 {

    border-left-color: #cd7f32; /* Bronzová */

    background-color: rgba(205, 127, 50, 0.1);

}



.rawbark-current-level.level-5 {

    border-left-color: #f1c40f; /* Zlatá */

    background-color: rgba(241, 196, 15, 0.1);

}



.rawbark-current-level.level-6 {

    border-left-color: #8e44ad; /* Fialová pro "Královská" */

    background-color: rgba(142, 68, 173, 0.1);

}



/* Karty úrovní se stylem odpovídajícím úrovni */

.level-card.level-1 {

    border-top: 3px solid #3498db;

}



.level-card.level-2 {

    border-top: 3px solid #27ae60;

}



.level-card.level-3 {

    border-top: 3px solid #95a5a6;

}



.level-card.level-4 {

    border-top: 3px solid #cd7f32;

}



.level-card.level-5 {

    border-top: 3px solid #f1c40f;

}



.level-card.level-6 {

    border-top: 3px solid #8e44ad;

}