/* =========================================================
   CLENO.CZ – MOJE SLEVY
   Design sjednocený s produktovými popisy Cleno.cz

   Používá pouze existující Shoptet strukturu:
   #content
   .content-inner
   h1
   .table.table-md-50
   [data-testid="tableCustomerDiscounts"]
   ========================================================= */


/* =========================================================
   HLAVNÍ WRAPPER
   ========================================================= */

#content .content-inner:has([data-testid="tableCustomerDiscounts"]) {
    box-sizing: border-box;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 30px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: #333333;
    line-height: 1.7;

    background: linear-gradient(
        135deg,
        #eaf7fc 0%,
        #ffffff 100%
    );

    border: 1px solid #bfe3f1;
    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 144, 201, 0.10);
}


/* všechny prvky uvnitř */

#content
.content-inner:has([data-testid="tableCustomerDiscounts"]) * {
    box-sizing: border-box;
}


/* =========================================================
   NADPIS STRÁNKY
   ========================================================= */

#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
> h1 {
    margin: 0 0 24px;

    color: #063f56;

    font-size: 29px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.02em;
}


/* =========================================================
   TABULKA
   ========================================================= */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"] {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;

    border: 0;
    border-spacing: 0;
    border-collapse: separate;

    background: transparent;

    overflow: visible;
}


/* tbody převedeme vizuálně na seznam karet */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody {
    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 12px;
}


/* =========================================================
   JEDNOTLIVÉ ŘÁDKY = CLENO KARTY
   ========================================================= */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    width: 100%;
    min-width: 0;

    padding: 18px 20px;

    background: #ffffff;

    border: 1px solid #cde8f3;
    border-radius: 12px;

    box-shadow:
        0 3px 10px rgba(0, 144, 201, 0.06);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}


/* hover pouze desktop */

@media (hover: hover) and (pointer: fine) {

    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr:hover {
        border-color: #b7ddea;

        box-shadow:
            0 5px 16px rgba(0, 144, 201, 0.10);

        transform: translateY(-1px);
    }

}


/* =========================================================
   BUŇKY
   ========================================================= */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
td,

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
th {
    display: block;

    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #444444;

    font-size: 15px;
    line-height: 1.5;

    vertical-align: middle;
}


/* =========================================================
   LEVÁ STRANA – NÁZEV
   ========================================================= */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:first-child,

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> th:first-child {
    min-width: 0;

    padding-right: 22px;

    color: #063f56;

    font-size: 15px;
    font-weight: 700;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRAVÁ STRANA – HODNOTA / BADGE
   ========================================================= */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:last-child,

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> th:last-child {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    justify-self: end;

    min-width: 58px;
    min-height: 36px;

    padding: 7px 13px;

    color: #0077a6;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;

    text-align: center;
    white-space: nowrap;

    background: #e4f5fb;

    border: 1px solid #b9e1f0;
    border-radius: 18px;
}


/* prázdná hodnota */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:last-child:empty::before {
    content: "—";

    color: #7895a1;

    font-weight: 600;
}


/* =========================================================
   VNITŘNÍ TEXTY
   ========================================================= */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
strong,

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
b {
    color: inherit;

    font-weight: 700;
}


#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
span {
    color: inherit;
}


/* =========================================================
   ODKAZY
   ========================================================= */

#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
a {
    color: #0090c9;

    font-weight: 700;

    text-decoration: none;
}


#content
.content-inner
.table.table-md-50[data-testid="tableCustomerDiscounts"]
a:hover {
    color: #007caf;

    text-decoration: underline;
}


/* =========================================================
   ODSTAVCE POD TABULKOU
   ========================================================= */

#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
> p {
    margin: 18px 0 0;

    padding: 16px 18px;

    color: #444444;

    font-size: 14px;
    line-height: 1.6;

    background: #f2faff;

    border: 1px solid #c7e7f3;
    border-left: 4px solid #0090c9;

    border-radius: 10px;
}


/* prázdný odstavec nezobrazuje prázdný box */

#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
> p:empty {
    display: none;
}


/* =========================================================
   ALERT / INFO BOX, POKUD HO SHOPTET POUŽIJE
   ========================================================= */

#content
.content-inner:has([data-testid="tableCustomerDiscounts"])
.alert {
    margin: 18px 0 0;

    padding: 18px;

    color: #314e59;

    background: #edf9fd;

    border: 1px solid #aedceb;
    border-left: 5px solid #0090c9;

    border-radius: 12px;
}


/* =========================================================
   TABLET
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="tableCustomerDiscounts"]) {
        max-width: 100%;

        padding: 26px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="tableCustomerDiscounts"]) {
        width: 100%;

        padding: 22px 18px;

        border-radius: 14px;
    }


    #content
    .content-inner:has([data-testid="tableCustomerDiscounts"])
    > h1 {
        margin-bottom: 20px;

        font-size: 25px;
    }


    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody {
        gap: 10px;
    }


    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr {
        padding: 16px;

        border-radius: 12px;
    }


    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr
    > td:first-child,

    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr
    > th:first-child {
        padding-right: 15px;

        font-size: 14px;
    }


    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr
    > td:last-child,

    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr
    > th:last-child {
        min-height: 34px;

        padding: 6px 11px;

        font-size: 13px;
    }

}


/* =========================================================
   MOBILE 430 PX
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="tableCustomerDiscounts"]) {
        padding: 20px 14px;
    }


    #content
    .content-inner:has([data-testid="tableCustomerDiscounts"])
    > h1 {
        margin-bottom: 18px;

        font-size: 23px;
    }


    /*
       Na malém mobilu:
       název nahoře,
       hodnota pod ním.
    */

    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr {
        grid-template-columns: minmax(0, 1fr);

        gap: 10px;

        padding: 15px;
    }


    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr
    > td:first-child,

    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr
    > th:first-child {
        padding-right: 0;
    }


    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr
    > td:last-child,

    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr
    > th:last-child {
        justify-self: start;
    }

}


/* =========================================================
   MOBILE 390 PX
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="tableCustomerDiscounts"]) {
        padding: 18px 12px;
    }


    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr {
        padding: 14px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    #content
    .content-inner
    .table.table-md-50[data-testid="tableCustomerDiscounts"]
    tbody
    tr {
        transition: none;
    }

}
/* =========================================================
   CLENO.CZ – ZÁKAZNICKÉ CENTRUM / LEVÉ MENU
   Design sjednocený s Cleno.cz

   Reálná struktura:
   .sidebar.sidebar-left[data-testid="sidebarMenu"]
   .sidebar-inner
   .client-center-box[data-testid="boxCustomerCenterMenu"]
   li.active
   li.logout
   [data-testid="buttonSignout"]
   ========================================================= */


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"] {
    box-sizing: border-box;
    min-width: 0;
}


/* =========================================================
   VNITŘNÍ WRAPPER
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.sidebar-inner {
    width: 100%;
}


/* =========================================================
   HLAVNÍ MENU CARD
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] {
    width: 100%;

    margin: 0;
    padding: 12px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    background: linear-gradient(
        135deg,
        #eaf7fc 0%,
        #ffffff 100%
    );

    border: 1px solid #bfe3f1;
    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 144, 201, 0.08);
}


/* box sizing */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"] * {
    box-sizing: border-box;
}


/* =========================================================
   UL
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
ul {
    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   LI
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =========================================================
   MENU ODKAZY
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a {
    display: flex;

    align-items: center;

    width: 100%;
    min-height: 44px;

    padding: 10px 13px;

    color: #40535c;

    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;

    text-decoration: none;

    background: rgba(255, 255, 255, 0.68);

    border: 1px solid transparent;
    border-radius: 10px;

    box-shadow: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li:not(.active):not(.logout)
    > a:hover {
        color: #0077a6;

        background: #ffffff;

        border-color: #cde8f3;

        box-shadow:
            0 3px 10px rgba(0, 144, 201, 0.06);

        transform: translateX(2px);
    }

}


/* =========================================================
   AKTIVNÍ POLOŽKA
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active
> a {
    position: relative;

    color: #0077a6;

    font-weight: 700;

    background: #e4f5fb;

    border-color: #b9e1f0;

    box-shadow:
        0 3px 10px rgba(0, 144, 201, 0.06);
}


/* levý brand accent */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active
> a::before {
    content: "";

    position: absolute;

    top: 9px;
    bottom: 9px;
    left: 5px;

    width: 3px;

    background: #0090c9;

    border-radius: 3px;
}


/* více prostoru kvůli accentu */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.active
> a {
    padding-left: 15px;
}


/* =========================================================
   ODHLAŠOVACÍ POLOŽKA
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li.logout {
    margin-bottom: 5px;
    padding-bottom: 10px;

    border-bottom: 1px solid #dbeaf1;
}


/* Shoptet má zde .btn.btn-xs.btn-primary,
   přepíšeme ho na decentní secondary akci */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-height: 40px;

    margin: 0;
    padding: 9px 12px;

    color: #657781;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;

    text-align: left;
    text-transform: none;

    background: #ffffff;

    border: 1px solid #dbe8ee;
    border-radius: 9px;

    box-shadow: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


@media (hover: hover) and (pointer: fine) {

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    [data-testid="buttonSignout"]:hover {
        color: #4f616b;

        background: #f7fbfd;

        border-color: #cbdde5;

        box-shadow: none;
    }

}


/* =========================================================
   FOCUS / ACCESSIBILITY
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a:focus-visible {
    outline: 2px solid #0090c9;
    outline-offset: 2px;
}


/* =========================================================
   PŘÍPADNÉ IKONY / SVG / FONT IKONY
   pokud je Shoptet v jiných položkách používá
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a svg {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-right: 9px;

    color: #0090c9;
    fill: currentColor;
}


.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
li > a::before {
    flex: 0 0 auto;
}


/* =========================================================
   TABLET
   ========================================================= */

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

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] {
        padding: 10px;

        border-radius: 12px;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li > a {
        min-height: 42px;

        padding-top: 9px;
        padding-bottom: 9px;
    }

}


/* =========================================================
   MOBILE
   Pokud Shoptet sidebar zobrazí nad obsahem,
   uděláme z menu kompaktní blok.
   ========================================================= */

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

    .sidebar.sidebar-left[data-testid="sidebarMenu"] {
        width: 100%;
        max-width: 100%;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .sidebar-inner {
        width: 100%;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] {
        width: 100%;

        padding: 10px;

        border-radius: 12px;

        box-shadow:
            0 3px 12px rgba(0, 144, 201, 0.065);
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    ul {
        gap: 5px;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li > a {
        min-height: 42px;

        padding: 9px 12px;

        font-size: 14px;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li.active
    > a {
        padding-left: 15px;
    }

}


/* =========================================================
   MOBILE 430 PX
   ========================================================= */

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

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] {
        padding: 8px;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li > a {
        min-height: 40px;

        padding: 8px 11px;

        font-size: 13.5px;

        border-radius: 9px;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    [data-testid="buttonSignout"] {
        min-height: 38px;

        padding: 8px 11px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li > a,

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    [data-testid="buttonSignout"] {
        transition: none;
    }

}
/* =========================================================
   CLENO.CZ – MOJE HODNOCENÍ PRODUKTŮ
   Design sjednocený s produktovými popisy Cleno.cz

   Reálná Shoptet struktura:
   #content
   .content-inner
   .table.customer-ratings.table-mobile-enriched
   [data-testid="tableCustomerRatings"]
   .client-table-font
   .rating-authorization-pending
   .cell--rating
   .client-table-heading
   .text-center
   ========================================================= */


/* =========================================================
   HLAVNÍ WRAPPER
   ========================================================= */

#content .content-inner:has([data-testid="tableCustomerRatings"]) {
    box-sizing: border-box;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 30px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: #333333;
    line-height: 1.7;

    background: linear-gradient(
        135deg,
        #eaf7fc 0%,
        #ffffff 100%
    );

    border: 1px solid #bfe3f1;
    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 144, 201, 0.10);
}


/* box sizing pouze uvnitř této stránky */

#content
.content-inner:has([data-testid="tableCustomerRatings"]) * {
    box-sizing: border-box;
}


/* =========================================================
   NADPIS
   ========================================================= */

#content
.content-inner:has([data-testid="tableCustomerRatings"])
> h1 {
    margin: 0 0 24px;

    color: #063f56;

    font-size: 29px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.02em;
}


/* =========================================================
   HLAVNÍ TABULKA
   ========================================================= */

#content
.table.customer-ratings.table-mobile-enriched[data-testid="tableCustomerRatings"] {
    width: 100%;
    max-width: 100%;

    margin: 0;

    border: 0;
    border-collapse: separate;
    border-spacing: 0 10px;

    background: transparent;
}


/* =========================================================
   THEAD
   ========================================================= */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
thead {
    background: transparent;
}


#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
thead
tr {
    background: transparent;
}


#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
thead
th {
    padding: 0 16px 7px;

    border: 0;

    background: transparent;

    color: #607985;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.035em;
}


/* =========================================================
   ŘÁDEK HODNOCENÍ
   ========================================================= */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font {
    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}


/* jednotlivé buňky vytvářejí jednu společnou bílou kartu */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td {
    min-width: 0;

    padding: 17px 16px;

    vertical-align: middle;

    color: #444444;

    font-size: 14px;
    line-height: 1.5;

    background: #ffffff;

    border-top: 1px solid #cde8f3;
    border-bottom: 1px solid #cde8f3;
}


/* první buňka */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td:first-child {
    border-left: 1px solid #cde8f3;

    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}


/* poslední buňka */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td:last-child {
    border-right: 1px solid #cde8f3;

    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}


/* jemný stín celé řádky */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td {
    box-shadow:
        0 3px 10px rgba(0, 144, 201, 0.045);
}


/* aby nebyly vidět vnitřní stíny mezi td */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tbody
tr.client-table-font
> td:not(:first-child) {
    box-shadow:
        4px 3px 10px -7px rgba(0, 144, 201, 0.06);
}


/* =========================================================
   HOVER DESKTOP
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font:hover {
        transform: translateY(-1px);
    }


    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font:hover
    > td {
        border-top-color: #b7ddea;
        border-bottom-color: #b7ddea;

        background: #ffffff;
    }


    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font:hover
    > td:first-child {
        border-left-color: #b7ddea;
    }


    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font:hover
    > td:last-child {
        border-right-color: #b7ddea;
    }

}


/* =========================================================
   AUTOR
   ========================================================= */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.client-table-heading {
    display: block;

    margin: 0 0 3px;

    color: #78909b;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.035em;
}


/* text za nadpisem Autor */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td:has(> .client-table-heading) {
    color: #063f56;

    font-weight: 600;
}


/* =========================================================
   E-MAIL / DELŠÍ TEXTY
   ========================================================= */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td {
    overflow-wrap: anywhere;
}


#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
a {
    color: #0090c9;

    font-weight: 600;

    text-decoration: none;
}


#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
a:hover {
    color: #007caf;

    text-decoration: underline;
}


/* =========================================================
   RATING CELL
   ========================================================= */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.cell--rating {
    min-width: 120px;

    color: #063f56;

    font-weight: 600;
}


/* případné hvězdy, pokud je Shoptet generuje uvnitř cell--rating */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.cell--rating
.stars {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    white-space: nowrap;
}


/* =========================================================
   TEXT-CENTER
   ========================================================= */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
.text-center {
    text-align: center;
}


/* =========================================================
   ČEKAJÍCÍ AUTORIZACE
   rating-authorization-pending je reálná class
   ========================================================= */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tr.rating-authorization-pending
> td {
    background: #fbfdfe;
}


/*
   Jemný modrý akcent na začátku řádku.
   Nezasahuje do obsahu.
*/

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tr.rating-authorization-pending
> td:first-child {
    position: relative;
}


#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
tr.rating-authorization-pending
> td:first-child::before {
    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;
    left: 5px;

    width: 3px;

    background: #0090c9;

    border-radius: 3px;
}


/* =========================================================
   FORM ELEMENTY, POKUD JS SHOPTETU PŘIDÁ EDITACI
   ========================================================= */

#content
.content-inner:has([data-testid="tableCustomerRatings"])
.form-control {
    max-width: 100%;

    min-height: 44px;

    padding: 10px 13px;

    color: #333333;

    background: #ffffff;

    border: 1px solid #cde8f3;
    border-radius: 10px;

    box-shadow: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


#content
.content-inner:has([data-testid="tableCustomerRatings"])
.form-control:focus {
    border-color: #0090c9;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(0, 144, 201, 0.10);
}


/* =========================================================
   BUTTONY, POKUD JS SHOPTETU PŘIDÁ AKCI
   ========================================================= */

#content
.content-inner:has([data-testid="tableCustomerRatings"])
.btn-primary {
    min-height: 42px;

    padding: 9px 16px;

    color: #ffffff;

    font-weight: 700;

    background: #0090c9;

    border: 1px solid #0090c9;
    border-radius: 10px;

    box-shadow: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}


#content
.content-inner:has([data-testid="tableCustomerRatings"])
.btn-primary:hover {
    color: #ffffff;

    background: #007caf;

    border-color: #007caf;
}


/* =========================================================
   TABLET
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="tableCustomerRatings"]) {
        max-width: 100%;

        padding: 26px;
    }


    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font
    > td {
        padding: 15px 13px;
    }

}


/* =========================================================
   MOBILE
   Respektujeme Shoptet .table-mobile-enriched
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="tableCustomerRatings"]) {
        width: 100%;

        padding: 22px 18px;

        border-radius: 14px;
    }


    #content
    .content-inner:has([data-testid="tableCustomerRatings"])
    > h1 {
        margin-bottom: 20px;

        font-size: 25px;
        line-height: 1.25;
    }


    /*
       Nevnucujeme Shoptetu vlastní display:flex/table,
       protože table-mobile-enriched řeší jeho mobilní strukturu.
    */

    #content
    .table.customer-ratings.table-mobile-enriched[data-testid="tableCustomerRatings"] {
        width: 100%;

        border-spacing: 0 12px;
    }


    /* každá recenze jako samostatná karta */

    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font {
        border-radius: 12px;
    }


    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font
    > td {
        padding: 11px 15px;

        background: #ffffff;

        border-left: 1px solid #cde8f3;
        border-right: 1px solid #cde8f3;
        border-top: 0;
        border-bottom: 0;

        box-shadow: none;

        text-align: left;
    }


    /* první viditelná buňka */

    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font
    > td:first-child {
        padding-top: 16px;

        border-top: 1px solid #cde8f3;

        border-radius:
            12px
            12px
            0
            0;
    }


    /* poslední buňka */

    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font
    > td:last-child {
        padding-bottom: 16px;

        border-bottom: 1px solid #cde8f3;

        border-radius:
            0
            0
            12px
            12px;

        box-shadow:
            0 4px 12px rgba(0, 144, 201, 0.06);
    }


    /* label Autor atd. */

    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    .client-table-heading {
        display: block;

        margin-bottom: 3px;

        color: #0077a6;

        font-size: 11px;
    }


    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    .cell--rating {
        min-width: 0;
    }


    /* na mobilu přepis text-center */

    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    td.text-center {
        text-align: left;
    }


    /*
       pending akcent přizpůsoben mobilní kartě
    */

    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tr.rating-authorization-pending
    > td:first-child::before {
        top: 10px;
        bottom: 0;
        left: 5px;
    }

}


/* =========================================================
   MOBILE 430 PX
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="tableCustomerRatings"]) {
        padding: 20px 14px;
    }


    #content
    .content-inner:has([data-testid="tableCustomerRatings"])
    > h1 {
        margin-bottom: 18px;

        font-size: 23px;
    }


    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font
    > td {
        padding-left: 14px;
        padding-right: 14px;

        font-size: 14px;
    }

}


/* =========================================================
   MOBILE 390 PX
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="tableCustomerRatings"]) {
        padding: 18px 12px;
    }


    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font
    > td {
        padding-left: 13px;
        padding-right: 13px;
    }

}


/* =========================================================
   PRÁZDNÁ TABULKA / PŘÍPADNÝ TEXT POD NÍ
   ========================================================= */

#content
.content-inner:has([data-testid="tableCustomerRatings"])
> p {
    margin: 18px 0 0;

    padding: 16px 18px;

    color: #444444;

    font-size: 14px;
    line-height: 1.6;

    background: #f2faff;

    border: 1px solid #c7e7f3;
    border-left: 5px solid #0090c9;

    border-radius: 10px;
}


#content
.content-inner:has([data-testid="tableCustomerRatings"])
> p:empty {
    display: none;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    #content
    .table.customer-ratings[data-testid="tableCustomerRatings"]
    tbody
    tr.client-table-font,

    #content
    .content-inner:has([data-testid="tableCustomerRatings"])
    .form-control,

    #content
    .content-inner:has([data-testid="tableCustomerRatings"])
    .btn-primary {
        transition: none;
    }

}
/* =========================================================
   TLAČÍTKO SMAZAT – červené, bílý text
   ========================================================= */

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
a.btn,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
button.btn,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-xs,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-sm,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 8px 14px;

    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    background: #dc2626 !important;
    border: 1px solid #dc2626 !important;
    border-radius: 10px;

    box-shadow: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
a.btn:hover,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
button.btn:hover,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-xs:hover,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-sm:hover,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
.btn.btn-secondary:hover {
    color: #ffffff !important;

    background: #b91c1c !important;
    border-color: #b91c1c !important;

    transform: translateY(-1px);
}

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
a.btn:focus-visible,

#content
.table.customer-ratings[data-testid="tableCustomerRatings"]
td.text-center
button.btn:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}
/* =========================================================
   ODHLAŠOVACÍ TLAČÍTKO – ČERVENÉ
   ========================================================= */

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-height: 40px;

    margin: 0;
    padding: 9px 12px;

    color: #ffffff !important;

    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;

    text-align: left;
    text-transform: none;

    background: #dc2626 !important;

    border: 1px solid #dc2626 !important;
    border-radius: 9px;

    box-shadow: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    [data-testid="buttonSignout"]:hover {
        color: #ffffff !important;

        background: #b91c1c !important;
        border-color: #b91c1c !important;

        transform: translateY(-1px);
    }

}

.sidebar.sidebar-left[data-testid="sidebarMenu"]
.client-center-box[data-testid="boxCustomerCenterMenu"]
[data-testid="buttonSignout"]:focus-visible {
    color: #ffffff !important;

    outline: 2px solid #dc2626;
    outline-offset: 2px;
}
/* =========================================================
   CLENO.CZ – KLIENTSKÉ CENTRUM / POSLEDNÍ 3 OBJEDNÁVKY
   Design sjednocený s Cleno.cz

   Reálná struktura:
   .content-inner
   h1
   h2
   .table.table-mobile-enriched
   .cell-price
   ========================================================= */


/* =========================================================
   HLAVNÍ WRAPPER STRÁNKY
   ========================================================= */

#content .content-inner:has(> h2 + .table.table-mobile-enriched) {
    box-sizing: border-box;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 30px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: #333333;
    line-height: 1.7;

    background: linear-gradient(
        135deg,
        #eaf7fc 0%,
        #ffffff 100%
    );

    border: 1px solid #bfe3f1;
    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 144, 201, 0.10);
}

#content
.content-inner:has(> h2 + .table.table-mobile-enriched) * {
    box-sizing: border-box;
}


/* =========================================================
   NADPISY
   ========================================================= */

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> h1 {
    margin: 0 0 8px;

    color: #063f56;

    font-size: 29px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: -0.02em;
}

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> h2 {
    margin: 0 0 22px;

    color: #0090c9;

    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}


/* =========================================================
   TABULKA
   ========================================================= */

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched {
    width: 100%;
    max-width: 100%;

    margin: 0;

    border: 0;
    border-collapse: separate;
    border-spacing: 0 10px;

    background: transparent;
}


/* =========================================================
   THEAD
   ========================================================= */

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched thead {
    background: transparent;
}

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched thead tr {
    background: transparent;
}

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched thead th {
    padding: 0 16px 7px;

    border: 0;
    background: transparent;

    color: #607985;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.035em;
}


/* =========================================================
   TĚLO TABULKY – ŘÁDKY JAKO KARTY
   ========================================================= */

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr {
    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td {
    min-width: 0;

    padding: 17px 16px;

    vertical-align: middle;

    color: #444444;

    font-size: 14px;
    line-height: 1.5;

    background: #ffffff;

    border-top: 1px solid #cde8f3;
    border-bottom: 1px solid #cde8f3;

    box-shadow:
        0 3px 10px rgba(0, 144, 201, 0.045);
}

/* první buňka */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:first-child {
    border-left: 1px solid #cde8f3;

    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

/* poslední buňka */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:last-child {
    border-right: 1px solid #cde8f3;

    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* aby nebyly moc vidět přechody mezi td */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:not(:first-child) {
    box-shadow:
        4px 3px 10px -7px rgba(0, 144, 201, 0.06);
}


/* =========================================================
   HOVER DESKTOP
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr:hover {
        transform: translateY(-1px);
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr:hover > td {
        border-top-color: #b7ddea;
        border-bottom-color: #b7ddea;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr:hover > td:first-child {
        border-left-color: #b7ddea;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr:hover > td:last-child {
        border-right-color: #b7ddea;
    }

}


/* =========================================================
   OBSAH BUNĚK
   ========================================================= */

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched td {
    overflow-wrap: anywhere;
}

/* kód objednávky – první sloupec */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:first-child {
    color: #063f56;
    font-weight: 700;
}

/* ceny */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched .cell-price {
    color: #063f56;
    font-weight: 700;
    white-space: nowrap;
}

/* stav objednávky a stav platby – jemný emphasis */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:nth-child(5),
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched tbody tr > td:nth-child(6) {
    color: #40535c;
    font-weight: 600;
}

/* sledování zásilky / odkazy */
#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched a {
    color: #0090c9;
    font-weight: 700;
    text-decoration: none;
}

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> .table.table-mobile-enriched a:hover {
    color: #007caf;
    text-decoration: underline;
}


/* =========================================================
   PRÁZDNÁ TABULKA / INFO ODSTAVEC POD NÍ
   ========================================================= */

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> p {
    margin: 18px 0 0;

    padding: 16px 18px;

    color: #444444;

    font-size: 14px;
    line-height: 1.6;

    background: #f2faff;

    border: 1px solid #c7e7f3;
    border-left: 5px solid #0090c9;

    border-radius: 10px;
}

#content
.content-inner:has(> h2 + .table.table-mobile-enriched)
> p:empty {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

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

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched) {
        max-width: 100%;
        padding: 26px;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr > td {
        padding: 15px 13px;
    }

}


/* =========================================================
   MOBILE
   Respektujeme Shoptet .table-mobile-enriched
   ========================================================= */

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

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched) {
        width: 100%;

        padding: 22px 18px;

        border-radius: 14px;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > h1 {
        margin-bottom: 6px;
        font-size: 25px;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > h2 {
        margin-bottom: 18px;
        font-size: 21px;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched {
        width: 100%;
        border-spacing: 0 12px;
    }

    /* mobilní karta */
    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr > td {
        padding: 11px 15px;

        background: #ffffff;

        border-left: 1px solid #cde8f3;
        border-right: 1px solid #cde8f3;
        border-top: 0;
        border-bottom: 0;

        box-shadow: none;

        text-align: left;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr > td:first-child {
        padding-top: 16px;

        border-top: 1px solid #cde8f3;

        border-radius: 12px 12px 0 0;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr > td:last-child {
        padding-bottom: 16px;

        border-bottom: 1px solid #cde8f3;

        border-radius: 0 0 12px 12px;

        box-shadow:
            0 4px 12px rgba(0, 144, 201, 0.06);
    }

    /* labely uvnitř mobilní enriched tabulky */
    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched td::before,
    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched .cell-label,
    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched .client-table-heading {
        color: #0077a6;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched .cell-price {
        min-width: 0;
        white-space: normal;
    }

}


/* =========================================================
   MOBILE 430 PX
   ========================================================= */

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

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched) {
        padding: 20px 14px;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > h1 {
        font-size: 23px;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > h2 {
        font-size: 20px;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr > td {
        padding-left: 14px;
        padding-right: 14px;

        font-size: 14px;
    }

}


/* =========================================================
   MOBILE 390 PX
   ========================================================= */

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

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched) {
        padding: 18px 12px;
    }

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr > td {
        padding-left: 13px;
        padding-right: 13px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched tbody tr {
        transition: none;
    }

}
/* =========================================================
   CLENO.CZ – MOJE OBJEDNÁVKY
   Design sjednocený s Cleno.cz

   Reálná Shoptet struktura:
   #content
   .content-inner
   .client-link-bottom-lrem
   .table.customer-orders.table-mobile-enriched
   [data-testid="tableCustomerOrders"]
   .cell--price
   .cell--cell--price
   ========================================================= */


/* =========================================================
   HLAVNÍ WRAPPER
   ========================================================= */

#content .content-inner:has([data-testid="tableCustomerOrders"]) {
    box-sizing: border-box;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 30px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: #333333;
    line-height: 1.7;

    background: linear-gradient(
        135deg,
        #eaf7fc 0%,
        #ffffff 100%
    );

    border: 1px solid #bfe3f1;
    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 144, 201, 0.10);
}


/* box sizing jen uvnitř této stránky */

#content
.content-inner:has([data-testid="tableCustomerOrders"]) * {
    box-sizing: border-box;
}


/* =========================================================
   CLENO.CZ – KLIENTSKÁ ZÓNA
   SJEDNOCENÝ DESIGN VŠECH CUSTOMER TABULEK

   Automaticky pokrývá např.:
   tableCustomerOrders
   tableCustomerInvoices
   tableCustomerProformaInvoices
   tableCustomerRatings
   tableCustomerDiscounts
   a další Shoptet customer tabulky

   Princip:
   [data-testid^="tableCustomer"]
   ========================================================= */


/* =========================================================
   1. HLAVNÍ CONTENT WRAPPER
   ========================================================= */

#content
.content-inner:has([data-testid^="tableCustomer"]) {
    box-sizing: border-box;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 30px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    color: #333333;
    line-height: 1.7;

    background: linear-gradient(
        135deg,
        #eaf7fc 0%,
        #ffffff 100%
    );

    border: 1px solid #bfe3f1;
    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 144, 201, 0.10);
}


#content
.content-inner:has([data-testid^="tableCustomer"]) * {
    box-sizing: border-box;
}


/* =========================================================
   2. H1
   ========================================================= */

#content
.content-inner:has([data-testid^="tableCustomer"])
> h1 {
    margin: 0 0 24px;

    color: #063f56;

    font-size: 29px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.02em;
}


/* =========================================================
   3. H2
   např. Poslední 3 objednávky
   ========================================================= */

#content
.content-inner:has([data-testid^="tableCustomer"])
> h2 {
    margin: 0 0 20px;

    color: #0090c9;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}


/* =========================================================
   4. VŠECHNY CUSTOMER TABULKY
   ========================================================= */

#content
.table[data-testid^="tableCustomer"] {
    width: 100%;
    max-width: 100%;

    margin: 0;

    border: 0;
    border-collapse: separate;
    border-spacing: 0 10px;

    background: transparent;
}


/* =========================================================
   5. THEAD
   ========================================================= */

#content
.table[data-testid^="tableCustomer"]
thead {
    background: transparent;
}


#content
.table[data-testid^="tableCustomer"]
thead
tr {
    background: transparent;
}


#content
.table[data-testid^="tableCustomer"]
thead
th {
    padding: 0 14px 7px;

    color: #607985;

    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.035em;

    vertical-align: bottom;

    background: transparent;

    border: 0;
}


/* =========================================================
   6. STANDARDNÍ CUSTOMER ŘÁDKY
   ========================================================= */

#content
.table[data-testid^="tableCustomer"]
tbody
tr {
    transition:
        transform 0.18s ease;
}


/* =========================================================
   7. BUŇKY = BÍLÁ CLENO KARTA
   ========================================================= */

#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td {
    min-width: 0;

    padding: 17px 14px;

    color: #444444;

    font-size: 14px;
    line-height: 1.45;

    vertical-align: middle;

    background: #ffffff;

    border-top: 1px solid #cde8f3;
    border-bottom: 1px solid #cde8f3;

    box-shadow:
        0 3px 10px rgba(0, 144, 201, 0.045);

    overflow-wrap: anywhere;
}


/* první buňka */

#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td:first-child {
    border-left: 1px solid #cde8f3;

    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}


/* poslední buňka */

#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td:last-child {
    border-right: 1px solid #cde8f3;

    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}


/* méně viditelné stíny mezi td */

#content
.table[data-testid^="tableCustomer"]
tbody
tr
> td:not(:first-child) {
    box-shadow:
        4px 3px 10px -7px rgba(0, 144, 201, 0.06);
}


/* =========================================================
   8. DESKTOP HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    #content
    .table[data-testid^="tableCustomer"]
    tbody
    tr:hover {
        transform: translateY(-1px);
    }


    #content
    .table[data-testid^="tableCustomer"]
    tbody
    tr:hover
    > td {
        border-top-color: #b7ddea;
        border-bottom-color: #b7ddea;
    }


    #content
    .table[data-testid^="tableCustomer"]
    tbody
    tr:hover
    > td:first-child {
        border-left-color: #b7ddea;
    }


    #content
    .table[data-testid^="tableCustomer"]
    tbody
    tr:hover
    > td:last-child {
        border-right-color: #b7ddea;
    }

}


/* =========================================================
   9. CLIENT TABLE HEADING
   Mobilní label: Datum, Cena, Autor...
   ========================================================= */

#content
.table[data-testid^="tableCustomer"]
.client-table-heading {
    display: block;

    margin: 0 0 3px;

    color: #0077a6;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.03em;
}


/* =========================================================
   10. CENY
   ========================================================= */

#content
.table[data-testid^="tableCustomer"]
.cell--price,

#content
.table[data-testid^="tableCustomer"]
.cell--cell--price {
    color: #063f56;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   11. ODKAZY
   ========================================================= */

#content
.table[data-testid^="tableCustomer"]
a {
    color: #0090c9;

    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.15s ease;
}


#content
.table[data-testid^="tableCustomer"]
a:hover {
    color: #007caf;

    text-decoration: underline;
}


/* =========================================================
   12. BUTTONY V TABULKÁCH
   ========================================================= */

#content
.table[data-testid^="tableCustomer"]
a.btn,

#content
.table[data-testid^="tableCustomer"]
button.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 7px 12px;

    color: #0077a6 !important;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    background: #e4f5fb;

    border: 1px solid #b9e1f0;
    border-radius: 9px;

    box-shadow: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


#content
.table[data-testid^="tableCustomer"]
a.btn:hover,

#content
.table[data-testid^="tableCustomer"]
button.btn:hover {
    color: #006b94 !important;

    background: #dff2f9;

    border-color: #a9dcea;

    text-decoration: none;
}


/* =========================================================
   13. TEXT CENTER
   ========================================================= */

#content
.table[data-testid^="tableCustomer"]
.text-center {
    text-align: center;
}


/* =========================================================
   14. CLIENT LINK POD/NAD TABULKOU
   ========================================================= */

#content
.content-inner:has([data-testid^="tableCustomer"])
.client-link-bottom-lrem {
    margin-bottom: 18px;
}


#content
.content-inner:has([data-testid^="tableCustomer"])
.client-link-bottom-lrem
a {
    color: #0090c9;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


#content
.content-inner:has([data-testid^="tableCustomer"])
.client-link-bottom-lrem
a:hover {
    color: #007caf;

    text-decoration: underline;
}


/* =========================================================
   15. TEXT / INFO POD TABULKOU
   ========================================================= */

#content
.content-inner:has([data-testid^="tableCustomer"])
> p {
    margin: 18px 0 0;

    padding: 16px 18px;

    color: #444444;

    font-size: 14px;
    line-height: 1.6;

    background: #f2faff;

    border: 1px solid #c7e7f3;
    border-left: 5px solid #0090c9;

    border-radius: 10px;
}


#content
.content-inner:has([data-testid^="tableCustomer"])
> p:empty {
    display: none;
}


/* =========================================================
   16. FORM INPUTY V CLIENT ZÓNĚ
   ========================================================= */

#content
.content-inner:has([data-testid^="tableCustomer"])
.form-control {
    width: 100%;
    max-width: 100%;

    min-height: 44px;

    padding: 10px 13px;

    color: #333333;

    background: #ffffff;

    border: 1px solid #cde8f3;
    border-radius: 10px;

    box-shadow: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


#content
.content-inner:has([data-testid^="tableCustomer"])
.form-control:focus {
    border-color: #0090c9;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(0, 144, 201, 0.10);
}


/* =========================================================
   17. OBECNÝ PRIMARY BUTTON
   ========================================================= */

#content
.content-inner:has([data-testid^="tableCustomer"])
.btn-primary {
    min-height: 42px;

    padding: 9px 16px;

    color: #ffffff;

    font-weight: 700;

    background: #0090c9;

    border: 1px solid #0090c9;
    border-radius: 10px;

    box-shadow: none;
}


#content
.content-inner:has([data-testid^="tableCustomer"])
.btn-primary:hover {
    color: #ffffff;

    background: #007caf;

    border-color: #007caf;
}


/* =========================================================
   18. SPECIÁLNĚ – OBJEDNÁVKY
   Cena včetně DPH zeleně
   ========================================================= */

#content
.table[data-testid="tableCustomerOrders"]
tbody
tr
> td:nth-child(4) {
    color: #198754 !important;

    font-weight: 800;
}


/* =========================================================
   19. SPECIÁLNĚ – HODNOCENÍ PRODUKTŮ
   SMAZAT ČERVENĚ
   ========================================================= */

#content
.table[data-testid="tableCustomerRatings"]
td.text-center
a.btn,

#content
.table[data-testid="tableCustomerRatings"]
td.text-center
button.btn {
    color: #ffffff !important;

    background: #dc2626 !important;

    border-color: #dc2626 !important;
}


#content
.table[data-testid="tableCustomerRatings"]
td.text-center
a.btn:hover,

#content
.table[data-testid="tableCustomerRatings"]
td.text-center
button.btn:hover {
    color: #ffffff !important;

    background: #b91c1c !important;

    border-color: #b91c1c !important;
}


/* =========================================================
   20. DISCOUNTS
   tableCustomerDiscounts má jednodušší 2sloupcový layout
   ========================================================= */

#content
.table[data-testid="tableCustomerDiscounts"] {
    border-spacing: 0 10px;
}


#content
.table[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:first-child {
    color: #063f56;

    font-weight: 700;
}


#content
.table[data-testid="tableCustomerDiscounts"]
tbody
tr
> td:last-child {
    color: #0077a6;

    font-weight: 700;
}


/* =========================================================
   21. TABLET
   ========================================================= */

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

    #content
    .content-inner:has([data-testid^="tableCustomer"]) {
        max-width: 100%;

        padding: 26px;
    }


    #content
    .table[data-testid^="tableCustomer"]
    tbody
    tr
    > td {
        padding: 15px 11px;

        font-size: 13px;
    }


    #content
    .table[data-testid^="tableCustomer"]
    thead
    th {
        padding-left: 11px;
        padding-right: 11px;
    }

}


/* =========================================================
   22. MOBILE
   ========================================================= */

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

    #content
    .content-inner:has([data-testid^="tableCustomer"]) {
        width: 100%;
        max-width: 100%;

        padding: 22px 18px;

        border-radius: 14px;
    }


    #content
    .content-inner:has([data-testid^="tableCustomer"])
    > h1 {
        margin-bottom: 20px;

        font-size: 25px;
    }


    #content
    .content-inner:has([data-testid^="tableCustomer"])
    > h2 {
        margin-bottom: 18px;

        font-size: 21px;
    }


    #content
    .table.table-mobile-enriched[data-testid^="tableCustomer"] {
        width: 100%;

        border-spacing: 0 12px;
    }


    /* =========================
       KAŽDÝ ŘÁDEK = MOBILNÍ KARTA
       ========================= */

    #content
    .table.table-mobile-enriched[data-testid^="tableCustomer"]
    tbody
    tr
    > td {
        padding: 10px 15px;

        color: #444444;

        font-size: 14px;

        background: #ffffff;

        border-left: 1px solid #cde8f3;
        border-right: 1px solid #cde8f3;
        border-top: 0;
        border-bottom: 0;

        box-shadow: none;

        text-align: left;

        white-space: normal;
    }


    /* horní část */

    #content
    .table.table-mobile-enriched[data-testid^="tableCustomer"]
    tbody
    tr
    > td:first-child {
        padding-top: 16px;

        border-top: 1px solid #cde8f3;

        border-radius:
            12px
            12px
            0
            0;
    }


    /* spodní část */

    #content
    .table.table-mobile-enriched[data-testid^="tableCustomer"]
    tbody
    tr
    > td:last-child {
        padding-bottom: 16px;

        border-bottom: 1px solid #cde8f3;

        border-radius:
            0
            0
            12px
            12px;

        box-shadow:
            0 4px 12px rgba(0, 144, 201, 0.06);
    }


    #content
    .table[data-testid^="tableCustomer"]
    .cell--price,

    #content
    .table[data-testid^="tableCustomer"]
    .cell--cell--price {
        white-space: normal;
    }


    /* Shoptet labely */

    #content
    .table[data-testid^="tableCustomer"]
    td::before,

    #content
    .table[data-testid^="tableCustomer"]
    .client-table-heading {
        color: #0077a6;

        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.03em;
    }


    #content
    .table[data-testid^="tableCustomer"]
    td.text-center {
        text-align: left;
    }

}


/* =========================================================
   23. MOBILE 430
   ========================================================= */

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

    #content
    .content-inner:has([data-testid^="tableCustomer"]) {
        padding: 20px 14px;
    }


    #content
    .content-inner:has([data-testid^="tableCustomer"])
    > h1 {
        font-size: 23px;
    }


    #content
    .table[data-testid^="tableCustomer"]
    tbody
    tr
    > td {
        padding-left: 14px;
        padding-right: 14px;
    }

}


/* =========================================================
   24. MOBILE 390
   ========================================================= */

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

    #content
    .content-inner:has([data-testid^="tableCustomer"]) {
        padding: 18px 12px;
    }


    #content
    .table[data-testid^="tableCustomer"]
    tbody
    tr
    > td {
        padding-left: 13px;
        padding-right: 13px;
    }

}


/* =========================================================
   25. ACCESSIBILITY
   ========================================================= */

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

    #content
    .table[data-testid^="tableCustomer"]
    tbody
    tr,

    #content
    .table[data-testid^="tableCustomer"]
    a,

    #content
    .table[data-testid^="tableCustomer"]
    button {
        transition: none;
    }

}
/* =========================================================
   CLENO.CZ – KLIENTSKÉ DOBROPISY
   Doplněk ke společnému designu klientské zóny

   Reálná struktura:
   #content
   .content-inner
   .table.table-mobile-enriched
   [data-testid="customerCreditNotes"]
   .table-th-code
   .table-th-date
   .cell--price
   ========================================================= */


/* =========================================================
   HLAVNÍ WRAPPER
   ========================================================= */

#content
.content-inner:has([data-testid="customerCreditNotes"]) {
    box-sizing: border-box;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 30px;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    color: #333333;
    line-height: 1.7;

    background: linear-gradient(
        135deg,
        #eaf7fc 0%,
        #ffffff 100%
    );

    border: 1px solid #bfe3f1;
    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 144, 201, 0.10);
}


#content
.content-inner:has([data-testid="customerCreditNotes"]) * {
    box-sizing: border-box;
}


/* =========================================================
   NADPIS
   ========================================================= */

#content
.content-inner:has([data-testid="customerCreditNotes"])
> h1 {
    margin: 0 0 24px;

    color: #063f56;

    font-size: 29px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.02em;
}


/* =========================================================
   TABULKA
   ========================================================= */

#content
.table.table-mobile-enriched[data-testid="customerCreditNotes"] {
    width: 100%;
    max-width: 100%;

    margin: 0;

    border: 0;
    border-collapse: separate;
    border-spacing: 0 10px;

    background: transparent;
}


/* =========================================================
   HLAVIČKA TABULKY
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
thead {
    background: transparent;
}


#content
.table[data-testid="customerCreditNotes"]
thead
tr {
    background: transparent;
}


#content
.table[data-testid="customerCreditNotes"]
thead
th {
    padding: 0 14px 7px;

    color: #607985;

    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.035em;

    vertical-align: bottom;

    background: transparent;

    border: 0;
}


/* =========================================================
   ŘÁDKY
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr {
    transition:
        transform 0.18s ease;
}


/* =========================================================
   BUŇKY = BÍLÁ CLENO KARTA
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td {
    min-width: 0;

    padding: 17px 14px;

    color: #444444;

    font-size: 14px;
    line-height: 1.45;

    vertical-align: middle;

    background: #ffffff;

    border-top: 1px solid #cde8f3;
    border-bottom: 1px solid #cde8f3;

    box-shadow:
        0 3px 10px rgba(0, 144, 201, 0.045);

    overflow-wrap: anywhere;
}


/* první buňka */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:first-child {
    color: #063f56;

    font-weight: 700;

    border-left: 1px solid #cde8f3;

    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}


/* poslední buňka */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:last-child {
    border-right: 1px solid #cde8f3;

    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}


/* zjemnění přechodů mezi TD */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:not(:first-child) {
    box-shadow:
        4px 3px 10px -7px rgba(0, 144, 201, 0.06);
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr:hover {
        transform: translateY(-1px);
    }


    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr:hover
    > td {
        border-top-color: #b7ddea;
        border-bottom-color: #b7ddea;
    }


    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr:hover
    > td:first-child {
        border-left-color: #b7ddea;
    }


    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr:hover
    > td:last-child {
        border-right-color: #b7ddea;
    }

}


/* =========================================================
   MOBILNÍ LABELY
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
.client-table-heading {
    display: block;

    margin: 0 0 3px;

    color: #0077a6;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.03em;
}


/* =========================================================
   CENY
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
.cell--price {
    color: #063f56;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   CENA CELKEM VČETNĚ DPH
   5. sloupec = zeleně
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(5) {
    color: #198754 !important;

    font-weight: 800;
}


/* případné elementy uvnitř ceny */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(5)
strong,

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(5)
span {
    color: inherit !important;
}


/* =========================================================
   DATUM
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(2) {
    color: #617680;
}


/* =========================================================
   JMÉNO A PŘÍJMENÍ
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
tbody
tr
> td:nth-child(3) {
    color: #40535c;

    font-weight: 600;
}


/* =========================================================
   ODKAZY
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
a {
    color: #0090c9;

    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.15s ease;
}


#content
.table[data-testid="customerCreditNotes"]
a:hover {
    color: #007caf;

    text-decoration: underline;
}


/* =========================================================
   BUTTONY
   pokud se v tabulce objeví
   ========================================================= */

#content
.table[data-testid="customerCreditNotes"]
a.btn,

#content
.table[data-testid="customerCreditNotes"]
button.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 7px 12px;

    color: #0077a6 !important;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    background: #e4f5fb;

    border: 1px solid #b9e1f0;
    border-radius: 9px;

    box-shadow: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


#content
.table[data-testid="customerCreditNotes"]
a.btn:hover,

#content
.table[data-testid="customerCreditNotes"]
button.btn:hover {
    color: #006b94 !important;

    background: #dff2f9;

    border-color: #a9dcea;

    text-decoration: none;
}


/* =========================================================
   TABLET
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="customerCreditNotes"]) {
        max-width: 100%;

        padding: 26px;
    }


    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr
    > td {
        padding: 15px 11px;

        font-size: 13px;
    }


    #content
    .table[data-testid="customerCreditNotes"]
    thead
    th {
        padding-left: 11px;
        padding-right: 11px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="customerCreditNotes"]) {
        width: 100%;
        max-width: 100%;

        padding: 22px 18px;

        border-radius: 14px;
    }


    #content
    .content-inner:has([data-testid="customerCreditNotes"])
    > h1 {
        margin-bottom: 20px;

        font-size: 25px;
    }


    #content
    .table.table-mobile-enriched[data-testid="customerCreditNotes"] {
        width: 100%;

        border-spacing: 0 12px;
    }


    /* =========================
       KAŽDÝ DOBROPIS = KARTA
       ========================= */

    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr
    > td {
        padding: 10px 15px;

        color: #444444;

        font-size: 14px;

        background: #ffffff;

        border-left: 1px solid #cde8f3;
        border-right: 1px solid #cde8f3;

        border-top: 0;
        border-bottom: 0;

        box-shadow: none;

        text-align: left;

        white-space: normal;
    }


    /* horní část karty */

    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr
    > td:first-child {
        padding-top: 16px;

        border-top: 1px solid #cde8f3;

        border-radius:
            12px
            12px
            0
            0;
    }


    /* spodní část */

    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr
    > td:last-child {
        padding-bottom: 16px;

        border-bottom: 1px solid #cde8f3;

        border-radius:
            0
            0
            12px
            12px;

        box-shadow:
            0 4px 12px rgba(0, 144, 201, 0.06);
    }


    #content
    .table[data-testid="customerCreditNotes"]
    .cell--price {
        white-space: normal;
    }


    /* Shoptet mobilní labely */

    #content
    .table[data-testid="customerCreditNotes"]
    td::before,

    #content
    .table[data-testid="customerCreditNotes"]
    .client-table-heading {
        color: #0077a6;

        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;

        text-transform: uppercase;
        letter-spacing: 0.03em;
    }


    /* cena celkem s DPH zůstane zelená */

    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr
    > td:nth-child(5) {
        color: #198754 !important;

        font-weight: 800;
    }

}


/* =========================================================
   MOBILE 430 PX
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="customerCreditNotes"]) {
        padding: 20px 14px;
    }


    #content
    .content-inner:has([data-testid="customerCreditNotes"])
    > h1 {
        font-size: 23px;
    }


    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr
    > td {
        padding-left: 14px;
        padding-right: 14px;
    }

}


/* =========================================================
   MOBILE 390 PX
   ========================================================= */

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

    #content
    .content-inner:has([data-testid="customerCreditNotes"]) {
        padding: 18px 12px;
    }


    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr
    > td {
        padding-left: 13px;
        padding-right: 13px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    #content
    .table[data-testid="customerCreditNotes"]
    tbody
    tr,

    #content
    .table[data-testid="customerCreditNotes"]
    a,

    #content
    .table[data-testid="customerCreditNotes"]
    button {
        transition: none;
    }

}
/* =========================================================
   CLENO – POSLEDNÍ OBJEDNÁVKY
   DESKTOP: VŠE NA JEDNOM ŘÁDKU
   ========================================================= */

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

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched {
        width: 100%;

        table-layout: fixed;

        border-spacing: 0 10px;
    }


    /* -----------------------------------------
       Všechny hlavičky i hodnoty bez zalamování
       ----------------------------------------- */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    th,

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td {
        white-space: nowrap !important;

        word-break: normal !important;
        overflow-wrap: normal !important;

        hyphens: none;

        padding-left: 10px;
        padding-right: 10px;
    }


    /* -----------------------------------------
       Hlavička trochu kompaktnější
       ----------------------------------------- */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    thead
    th {
        font-size: 10.5px;

        letter-spacing: 0.02em;

        line-height: 1.25;
    }


    /* -----------------------------------------
       Hodnoty
       ----------------------------------------- */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    tbody
    td {
        font-size: 13px;
    }


    /* =====================================================
       ŠÍŘKY SLOUPCŮ
       ===================================================== */


    /* Kód */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    th:nth-child(1),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(1) {
        width: 11%;
    }


    /* Datum */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    th:nth-child(2),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(2) {
        width: 14%;
    }


    /* Cena bez DPH */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    th:nth-child(3),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(3) {
        width: 13%;
    }


    /* Cena celkem včetně DPH */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    th:nth-child(4),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(4) {
        width: 20%;
    }


    /* Stav objednávky */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    th:nth-child(5),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(5) {
        width: 16%;
    }


    /* Stav platby */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    th:nth-child(6),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(6) {
        width: 11%;
    }


    /* Sledování zásilky */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    th:nth-child(7),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(7) {
        width: 15%;
    }


    /* -----------------------------------------
       Kód a tracking – nikdy nelámat číslo
       ----------------------------------------- */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(1),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(7),

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(1) a,

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(7) a {
        white-space: nowrap !important;

        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }


    /* -----------------------------------------
       Stav objednávky – nerozbíjet slova
       ----------------------------------------- */

    #content
    .content-inner:has(> h2 + .table.table-mobile-enriched)
    > .table.table-mobile-enriched
    td:nth-child(5) {
        white-space: nowrap !important;

        word-break: keep-all !important;
    }

}
/* =========================================================
   CLENO.CZ – REGISTRACE / NASTAVENÍ ÚČTU
   Design sjednocený s Cleno.cz

   Reálná struktura ze Shoptetu:
   #register-form[data-testid="formRegistration"]
   .co-box.co-registration
   fieldset.box.box-sm.box-bg-default
   .form-group.smart-label-wrapper
   .form-control-wrapper
   .phone-form-group
   .phone-combined-input
   .country-flags
   .js-country-flags-inner
   .form-control
   #billFullName
   #phone
   ========================================================= */


/* =========================================================
   HLAVNÍ CONTENT
   ========================================================= */

#content
.content-inner:has(#register-form[data-testid="formRegistration"]) {
    box-sizing: border-box;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    color: #333333;
    line-height: 1.7;
}


#content
.content-inner:has(#register-form[data-testid="formRegistration"]) * {
    box-sizing: border-box;
}


/* =========================================================
   H1 – NASTAVENÍ MÉHO ÚČTU
   ========================================================= */

#content
.content-inner:has(#register-form[data-testid="formRegistration"])
> h1 {
    margin: 0 0 24px;

    color: #063f56;

    font-size: 29px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.02em;
}


/* =========================================================
   FORM
   ========================================================= */

#register-form[data-testid="formRegistration"] {
    width: 100%;
    max-width: 100%;

    margin: 0;
}


/* =========================================================
   HLAVNÍ REGISTRAČNÍ WRAPPER
   ========================================================= */

#register-form[data-testid="formRegistration"]
.co-box.co-registration {
    width: 100%;
    max-width: 100%;

    margin: 0;
}


/* =========================================================
   FIELDSET / HLAVNÍ CARD
   ========================================================= */

#register-form[data-testid="formRegistration"]
fieldset.box.box-sm.box-bg-default {
    width: 100%;

    margin: 0 0 18px;
    padding: 28px;

    background: linear-gradient(
        135deg,
        #eaf7fc 0%,
        #ffffff 100%
    );

    border: 1px solid #bfe3f1;
    border-radius: 14px;

    box-shadow:
        0 4px 16px rgba(0, 144, 201, 0.10);
}


/* =========================================================
   H2 UVNITŘ SEKCE
   ========================================================= */

#register-form[data-testid="formRegistration"]
fieldset
> h2 {
    margin: 0 0 22px;

    color: #063f56;

    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;

    letter-spacing: -0.015em;
}


/* =========================================================
   POMOCNÉ TEXTY
   ========================================================= */

#register-form[data-testid="formRegistration"]
fieldset
> p {
    margin: 0 0 18px;

    color: #60747e;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   FORM GROUP
   ========================================================= */

#register-form[data-testid="formRegistration"]
.form-group.smart-label-wrapper {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0 0 17px;
}


/* phone varianta */

#register-form[data-testid="formRegistration"]
.form-group.phone-form-group {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   LABEL
   ========================================================= */

#register-form[data-testid="formRegistration"]
.form-group
> label {
    display: block;

    margin: 0 0 7px;

    color: #063f56;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}


/* =========================================================
   REQUIRED HVĚZDIČKA
   pokud ji Shoptet dává přes pseudo-element
   ========================================================= */

#register-form[data-testid="formRegistration"]
.form-group.required
> label::after {
    color: #0090c9;
}


/* =========================================================
   CONTROL WRAPPER
   ========================================================= */

#register-form[data-testid="formRegistration"]
.form-control-wrapper {
    position: relative;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   INPUTY
   ========================================================= */

#register-form[data-testid="formRegistration"]
.form-control {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 48px;

    margin: 0;
    padding: 11px 14px;

    color: #333333;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;

    background: #ffffff;

    border: 1px solid #cde8f3;
    border-radius: 10px;

    outline: none;

    box-shadow:
        0 2px 6px rgba(0, 144, 201, 0.025);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}


/* placeholder */

#register-form[data-testid="formRegistration"]
.form-control::placeholder {
    color: #91a2aa;

    opacity: 1;
}


/* hover */

@media (hover: hover) and (pointer: fine) {

    #register-form[data-testid="formRegistration"]
    .form-control:hover {
        border-color: #b6dce9;
    }

}


/* focus */

#register-form[data-testid="formRegistration"]
.form-control:focus {
    background: #ffffff;

    border-color: #0090c9;

    box-shadow:
        0 0 0 3px rgba(0, 144, 201, 0.10);
}


/* autofill – Chrome/Safari */

#register-form[data-testid="formRegistration"]
input.form-control:-webkit-autofill,
#register-form[data-testid="formRegistration"]
input.form-control:-webkit-autofill:hover,
#register-form[data-testid="formRegistration"]
input.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #333333;

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* =========================================================
   BILL FULL NAME
   ========================================================= */

#register-form[data-testid="formRegistration"]
#billFullName {
    width: 100%;
}


/* =========================================================
   TELEFON – COMBINED INPUT
   ========================================================= */

#register-form[data-testid="formRegistration"]
.phone-combined-input {
    display: flex;

    align-items: stretch;

    width: 100%;
    min-width: 0;

    background: #ffffff;

    border: 1px solid #cde8f3;
    border-radius: 10px;

    overflow: visible;

    box-shadow:
        0 2px 6px rgba(0, 144, 201, 0.025);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


/* focus celé telefonní komponenty */

#register-form[data-testid="formRegistration"]
.phone-combined-input:focus-within {
    border-color: #0090c9;

    box-shadow:
        0 0 0 3px rgba(0, 144, 201, 0.10);
}


/* =========================================================
   COUNTRY FLAG ČÁST
   ========================================================= */

#register-form[data-testid="formRegistration"]
.phone-combined-input
.country-flags {
    position: relative;

    display: flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    min-width: 64px;

    background: #f2faff;

    border-right: 1px solid #cde8f3;

    border-radius:
        9px
        0
        0
        9px;

    cursor: pointer;
}


/* vnitřek */

#register-form[data-testid="formRegistration"]
.phone-combined-input
.js-country-flags-inner {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 11px;

    color: #063f56;
}


/* =========================================================
   TELEFON INPUT
   odstraníme druhý border
   ========================================================= */

#register-form[data-testid="formRegistration"]
.phone-combined-input
#phone.form-control {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;

    min-height: 46px;

    border: 0;

    border-radius:
        0
        9px
        9px
        0;

    box-shadow: none;
}


/* vlastní focus už řeší parent */

#register-form[data-testid="formRegistration"]
.phone-combined-input
#phone.form-control:focus {
    border: 0;

    box-shadow: none;
}


/* =========================================================
   COUNTRY SELECT
   pokud zůstává v DOM
   ========================================================= */

#register-form[data-testid="formRegistration"]
.phone-combined-input
select[name="phoneCode"] {
    max-width: 100%;
}


/* =========================================================
   VALIDACE – ERROR
   ========================================================= */

#register-form[data-testid="formRegistration"]
.form-control.error,

#register-form[data-testid="formRegistration"]
.form-control.input-error,

#register-form[data-testid="formRegistration"]
.form-control.is-invalid {
    border-color: #dc4545;

    background: #fffafa;

    box-shadow:
        0 0 0 3px rgba(220, 69, 69, 0.08);
}


/* pokud chyba vznikne uvnitř telefonního wrapperu */

#register-form[data-testid="formRegistration"]
.phone-combined-input:has(.error),

#register-form[data-testid="formRegistration"]
.phone-combined-input:has(.input-error),

#register-form[data-testid="formRegistration"]
.phone-combined-input:has(.is-invalid) {
    border-color: #dc4545;

    box-shadow:
        0 0 0 3px rgba(220, 69, 69, 0.08);
}


/* validační zprávy */

#register-form[data-testid="formRegistration"]
.form-group
.error-message,

#register-form[data-testid="formRegistration"]
.form-group
.form-error,

#register-form[data-testid="formRegistration"]
.form-group
.validation-error {
    margin-top: 5px;

    color: #b42323;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}


/* =========================================================
   VALIDACE – SUCCESS
   pokud Shoptet používá success class
   ========================================================= */

#register-form[data-testid="formRegistration"]
.form-control.valid,

#register-form[data-testid="formRegistration"]
.form-control.is-valid {
    border-color: #98d6aa;
}


/* =========================================================
   TEXTAREA
   pokud je v dalších sekcích formuláře
   ========================================================= */

#register-form[data-testid="formRegistration"]
textarea.form-control {
    min-height: 120px;

    resize: vertical;
}


/* =========================================================
   SELECT
   ========================================================= */

#register-form[data-testid="formRegistration"]
select.form-control {
    cursor: pointer;

    appearance: auto;
}


/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

#register-form[data-testid="formRegistration"]
input[type="checkbox"],
#register-form[data-testid="formRegistration"]
input[type="radio"] {
    accent-color: #0090c9;
}


/* =========================================================
   CHECKBOX LABELY
   ========================================================= */

#register-form[data-testid="formRegistration"]
input[type="checkbox"] + label,

#register-form[data-testid="formRegistration"]
input[type="radio"] + label {
    color: #40535c;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}


/* =========================================================
   ODKAZY VE FORMULÁŘI
   ========================================================= */

#register-form[data-testid="formRegistration"]
a {
    color: #0090c9;

    font-weight: 600;

    text-decoration: none;
}


#register-form[data-testid="formRegistration"]
a:hover {
    color: #007caf;

    text-decoration: underline;
}


/* =========================================================
   SUBMIT BUTTON
   scoped pouze na tento registrační formulář
   ========================================================= */

#register-form[data-testid="formRegistration"]
button[type="submit"],

#register-form[data-testid="formRegistration"]
input[type="submit"],

#register-form[data-testid="formRegistration"]
.btn-primary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 11px 20px;

    color: #ffffff !important;

    font-family: "Open Sans", Arial, Helvetica, sans-serif;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;

    text-decoration: none;

    background: #0090c9;

    border: 1px solid #0090c9;
    border-radius: 10px;

    box-shadow: none;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


@media (hover: hover) and (pointer: fine) {

    #register-form[data-testid="formRegistration"]
    button[type="submit"]:hover,

    #register-form[data-testid="formRegistration"]
    input[type="submit"]:hover,

    #register-form[data-testid="formRegistration"]
    .btn-primary:hover {
        color: #ffffff !important;

        background: #007caf;

        border-color: #007caf;

        transform: translateY(-1px);
    }

}


/* =========================================================
   FOCUS ACCESSIBILITY
   ========================================================= */

#register-form[data-testid="formRegistration"]
button:focus-visible,

#register-form[data-testid="formRegistration"]
a:focus-visible,

#register-form[data-testid="formRegistration"]
input:focus-visible,

#register-form[data-testid="formRegistration"]
select:focus-visible,

#register-form[data-testid="formRegistration"]
textarea:focus-visible {
    outline: 2px solid #0090c9;
    outline-offset: 2px;
}


/* inputy mají vlastní focus ring */

#register-form[data-testid="formRegistration"]
.form-control:focus-visible {
    outline: none;
}


/* =========================================================
   TABLET
   ========================================================= */

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

    #register-form[data-testid="formRegistration"]
    fieldset.box.box-sm.box-bg-default {
        padding: 26px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

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

    #content
    .content-inner:has(#register-form[data-testid="formRegistration"])
    > h1 {
        margin-bottom: 20px;

        font-size: 25px;
    }


    #register-form[data-testid="formRegistration"]
    fieldset.box.box-sm.box-bg-default {
        padding: 20px 18px;

        border-radius: 14px;
    }


    #register-form[data-testid="formRegistration"]
    fieldset
    > h2 {
        margin-bottom: 18px;

        font-size: 21px;
    }


    #register-form[data-testid="formRegistration"]
    .form-group.smart-label-wrapper {
        margin-bottom: 15px;
    }


    #register-form[data-testid="formRegistration"]
    .form-control {
        min-height: 46px;

        font-size: 16px;
    }


    /*
       16px na inputu zabrání automatickému zoomu
       v iOS Safari.
    */


    #register-form[data-testid="formRegistration"]
    .phone-combined-input {
        width: 100%;
    }


    #register-form[data-testid="formRegistration"]
    .phone-combined-input
    .country-flags {
        min-width: 62px;
    }


    #register-form[data-testid="formRegistration"]
    button[type="submit"],

    #register-form[data-testid="formRegistration"]
    input[type="submit"],

    #register-form[data-testid="formRegistration"]
    .btn-primary {
        width: 100%;

        min-height: 46px;
    }

}


/* =========================================================
   MOBILE 430 PX
   ========================================================= */

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

    #register-form[data-testid="formRegistration"]
    fieldset.box.box-sm.box-bg-default {
        padding: 18px 14px;
    }


    #content
    .content-inner:has(#register-form[data-testid="formRegistration"])
    > h1 {
        font-size: 23px;
    }


    #register-form[data-testid="formRegistration"]
    fieldset
    > h2 {
        font-size: 20px;
    }


    #register-form[data-testid="formRegistration"]
    .form-control {
        padding-left: 12px;
        padding-right: 12px;
    }


    #register-form[data-testid="formRegistration"]
    .phone-combined-input
    .country-flags {
        min-width: 58px;
    }

}


/* =========================================================
   MOBILE 390 PX
   ========================================================= */

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

    #register-form[data-testid="formRegistration"]
    fieldset.box.box-sm.box-bg-default {
        padding: 17px 12px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    #register-form[data-testid="formRegistration"]
    .form-control,

    #register-form[data-testid="formRegistration"]
    .phone-combined-input,

    #register-form[data-testid="formRegistration"]
    button,

    #register-form[data-testid="formRegistration"]
    .btn {
        transition: none;
    }

}

/* =========================================================
   CLENO.CZ – FINÁLNÍ OPRAVY + MASTER MOBILE OVERRIDE
   Tento blok je záměrně na konci a přebíjí starší mobilní
   pravidla v klientské zóně.
   ========================================================= */

/* ---------------------------------------------------------
   Registrační wrapper – odstranit původní Shoptet rámeček
   --------------------------------------------------------- */
#register-form[data-testid="formRegistration"] .co-box.co-registration {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   Validační hlášky – jednotný radius
   --------------------------------------------------------- */
.validator-msg,
.msg-error,
.validator-msg.msg-warning,
.js-validator-msg.msg-error,
.validator-msg.msg-info {
    border-radius: 10px !important;
}

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

    /* =====================================================
       1. CELKOVÝ LAYOUT KLIENTSKÉ ZÓNY
       ===================================================== */

    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: clip;
    }

    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) .content-wrapper-in {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 14px !important;
    }

    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) main#content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) #content .content-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* =====================================================
       2. SIDEBAR → HORIZONTÁLNÍ MOBILNÍ NAVIGACE
       ===================================================== */

    .sidebar.sidebar-left[data-testid="sidebarMenu"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"] .sidebar-inner {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        background: linear-gradient(135deg, #eaf7fc 0%, #ffffff 100%) !important;
        border: 1px solid #bfe3f1 !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 12px rgba(0, 144, 201, 0.06) !important;
        overflow: hidden !important;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] ul {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 1px 1px 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] ul::-webkit-scrollbar {
        display: none;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] li {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        scroll-snap-align: start;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: max-content !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        color: #40535c;
        font-size: 13px !important;
        line-height: 1.25 !important;
        font-weight: 600;
        white-space: nowrap !important;
        background: #ffffff;
        border: 1px solid #e0edf2;
        border-radius: 9px !important;
        box-shadow: none;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] li.active > a {
        position: relative;
        padding: 8px 12px !important;
        color: #0077a6;
        background: #e4f5fb;
        border-color: #b9e1f0;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] li.active > a::before {
        content: "";
        position: absolute;
        top: auto !important;
        bottom: 3px !important;
        left: 11px !important;
        right: 11px !important;
        width: auto !important;
        height: 2px !important;
        background: #0090c9;
        border-radius: 3px;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] li.logout {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        order: 999;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    [data-testid="buttonSignout"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: max-content !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        background: #dc2626 !important;
        border: 1px solid #dc2626 !important;
        border-radius: 9px !important;
    }

    /* =====================================================
       3. CONTENT CARDS
       ===================================================== */

    #content .content-inner:has([data-testid^="tableCustomer"]),
    #content .content-inner:has([data-testid="customerCreditNotes"]),
    #content .content-inner:has(> h2 + .table.table-mobile-enriched) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px 14px !important;
        background: linear-gradient(135deg, #eaf7fc 0%, #ffffff 100%) !important;
        border: 1px solid #bfe3f1 !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 12px rgba(0, 144, 201, 0.07) !important;
        overflow: hidden !important;
    }

    /* =====================================================
       4. NADPISY
       ===================================================== */

    #content .content-inner > h1 {
        max-width: 100%;
        margin-top: 0 !important;
        font-size: 24px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    #content .content-inner > h2 {
        max-width: 100%;
        font-size: 19px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
    }

    #content .content-inner:has(> h2 + .table.table-mobile-enriched) > h1 {
        margin-bottom: 5px !important;
    }

    #content .content-inner:has(> h2 + .table.table-mobile-enriched) > h2 {
        margin-bottom: 16px !important;
    }

    /* =====================================================
       5. CUSTOMER TABULKY → MOBILNÍ KARTY
       ===================================================== */

    #content .table.table-mobile-enriched[data-testid^="tableCustomer"],
    #content .table.table-mobile-enriched[data-testid="customerCreditNotes"],
    #content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-spacing: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    #content .table.table-mobile-enriched[data-testid^="tableCustomer"] > thead,
    #content .table.table-mobile-enriched[data-testid="customerCreditNotes"] > thead,
    #content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched > thead {
        display: none !important;
    }

    #content .table.table-mobile-enriched[data-testid^="tableCustomer"] > tbody,
    #content .table.table-mobile-enriched[data-testid="customerCreditNotes"] > tbody,
    #content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched > tbody {
        display: block !important;
        width: 100% !important;
    }

    #content .table.table-mobile-enriched[data-testid^="tableCustomer"] tbody > tr,
    #content .table.table-mobile-enriched[data-testid="customerCreditNotes"] tbody > tr,
    #content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched tbody > tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        background: #ffffff;
        border: 1px solid #cde8f3 !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 10px rgba(0, 144, 201, 0.055) !important;
        overflow: hidden !important;
        transform: none !important;
    }

    #content .table.table-mobile-enriched tbody > tr:last-child {
        margin-bottom: 0 !important;
    }

    #content .table.table-mobile-enriched[data-testid^="tableCustomer"] tbody > tr > td,
    #content .table.table-mobile-enriched[data-testid="customerCreditNotes"] tbody > tr > td,
    #content .content-inner:has(> h2 + .table.table-mobile-enriched) > .table.table-mobile-enriched tbody > tr > td {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 10px 13px !important;
        color: #3f4d55;
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid #edf3f6 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #content .table.table-mobile-enriched tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    #content .table.table-mobile-enriched .client-table-heading,
    #content .table.table-mobile-enriched .cell-label {
        display: block !important;
        width: 100% !important;
        margin: 0 0 2px !important;
        color: #0077a6 !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.035em;
        white-space: normal !important;
    }

    #content .table.table-mobile-enriched .cell--price,
    #content .table.table-mobile-enriched .cell--cell--price,
    #content .table.table-mobile-enriched .cell-price {
        min-width: 0 !important;
        white-space: normal !important;
    }

    #content .table.table-mobile-enriched td a {
        max-width: 100% !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    /* =====================================================
       6. STAVY OBJEDNÁVEK
       ===================================================== */

    #content .table.table-mobile-enriched tbody tr.cleno-order-success {
        background: #f2fbf5 !important;
        border-color: #c7e7d0 !important;
    }

    #content .table.table-mobile-enriched tbody tr.cleno-order-cancelled {
        background: #fff5f5 !important;
        border-color: #f0cccc !important;
    }

    #content .table.table-mobile-enriched tbody tr.cleno-order-pending {
        background: #fffbea !important;
        border-color: #eedf9f !important;
    }

    /* =====================================================
       7. HODNOCENÍ – SMAZAT
       ===================================================== */

    #content .table[data-testid="tableCustomerRatings"] td.text-center .btn,
    #content .table[data-testid="tableCustomerRatings"] td.text-center a.btn,
    #content .table[data-testid="tableCustomerRatings"] td.text-center button.btn {
        width: 100% !important;
        margin-top: 3px !important;
        color: #ffffff !important;
        background: #dc2626 !important;
        border-color: #dc2626 !important;
        border-radius: 9px !important;
    }

    /* =====================================================
       8. MOJE SLEVY
       ===================================================== */

    #content .table.table-md-50[data-testid="tableCustomerDiscounts"] {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #content .table.table-md-50[data-testid="tableCustomerDiscounts"] tbody {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 9px !important;
    }

    #content .table.table-md-50[data-testid="tableCustomerDiscounts"] tbody tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
        padding: 13px !important;
        background: #ffffff !important;
        border: 1px solid #cde8f3 !important;
        border-radius: 11px !important;
        box-shadow: 0 3px 10px rgba(0, 144, 201, 0.05) !important;
    }

    #content .table.table-md-50[data-testid="tableCustomerDiscounts"] tbody tr > td {
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
    }

    #content .table.table-md-50[data-testid="tableCustomerDiscounts"] tbody tr > td:last-child {
        align-self: flex-start !important;
        width: auto !important;
        padding: 6px 11px !important;
    }

    /* =====================================================
       9. REGISTRACE / NASTAVENÍ ÚČTU
       ===================================================== */

    #register-form[data-testid="formRegistration"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #register-form[data-testid="formRegistration"] .co-box.co-registration {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #register-form[data-testid="formRegistration"] fieldset {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    #register-form[data-testid="formRegistration"] fieldset > h2 {
        margin-bottom: 16px !important;
        font-size: 19px !important;
        line-height: 1.3 !important;
    }

    #register-form[data-testid="formRegistration"] .form-group {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 14px !important;
    }

    #register-form[data-testid="formRegistration"] .form-group > label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    #register-form[data-testid="formRegistration"] .form-control-wrapper,
    #register-form[data-testid="formRegistration"] .js-validated-element-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #register-form[data-testid="formRegistration"] .form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        border-radius: 10px !important;
    }

    #register-form[data-testid="formRegistration"] .phone-combined-input {
        display: flex !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    #register-form[data-testid="formRegistration"]
    .phone-combined-input .country-flags {
        flex: 0 0 92px !important;
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
    }

    #register-form[data-testid="formRegistration"]
    .phone-combined-input input.form-control {
        flex: 1 1 0 !important;
        width: 1% !important;
        min-width: 0 !important;
        border-radius: 0 9px 9px 0 !important;
    }

    /* =====================================================
       10. VALIDAČNÍ HLÁŠKY
       Desktop Shoptet je má absolute; na mobilu musí být pod polem.
       ===================================================== */

    .validator-msg,
    .msg-error,
    .validator-msg.msg-warning,
    .js-validator-msg.msg-error,
    .validator-msg.msg-info {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 6px 0 0 !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    #register-form[data-testid="formRegistration"] button[type="submit"],
    #register-form[data-testid="formRegistration"] input[type="submit"],
    #register-form[data-testid="formRegistration"] .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        margin-top: 4px !important;
        border-radius: 10px !important;
    }

    /* =====================================================
       11. OBECNÝ OVERFLOW FIX
       ===================================================== */

    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) img,
    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) iframe,
    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) form,
    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) fieldset,
    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) table {
        max-width: 100% !important;
    }

    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) input,
    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) select,
    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) textarea,
    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) button {
        min-width: 0 !important;
    }
}

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

    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #content .content-inner:has([data-testid^="tableCustomer"]),
    #content .content-inner:has([data-testid="customerCreditNotes"]),
    #content .content-inner:has(> h2 + .table.table-mobile-enriched) {
        padding: 14px 12px !important;
    }

    #content .content-inner > h1 {
        font-size: 22px !important;
    }

    #content .content-inner > h2 {
        font-size: 18px !important;
    }

    #register-form[data-testid="formRegistration"] fieldset {
        padding: 14px 12px !important;
    }

    #content .table.table-mobile-enriched tbody > tr > td {
        padding: 9px 11px !important;
    }

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] li > a,
    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    [data-testid="buttonSignout"] {
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: 12.5px !important;
    }
}

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

    #content-wrapper:has(.sidebar.sidebar-left[data-testid="sidebarMenu"]) {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #content .content-inner:has([data-testid^="tableCustomer"]),
    #content .content-inner:has([data-testid="customerCreditNotes"]),
    #content .content-inner:has(> h2 + .table.table-mobile-enriched) {
        padding: 12px 10px !important;
    }

    #content .table.table-mobile-enriched tbody > tr > td {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #register-form[data-testid="formRegistration"]
    .phone-combined-input .country-flags {
        flex-basis: 86px !important;
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
    }
}
/* =========================================================
   CLENO.CZ – FINÁLNÍ MOBILNÍ MENU + CHECKBOX FIX
   vložit ÚPLNĚ NA KONEC CSS
   ========================================================= */

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

    /* =====================================================
       1. MOBILNÍ MENU – ČISTÁ 2SLOUPCOVÁ MŘÍŽKA
       ===================================================== */

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"] {
        width: 100% !important;

        padding: 9px !important;

        background: linear-gradient(
            135deg,
            #edf9fd 0%,
            #ffffff 100%
        ) !important;

        border: 1px solid #bfe3f1 !important;
        border-radius: 14px !important;

        box-shadow:
            0 3px 12px rgba(0, 144, 201, 0.06) !important;

        overflow: hidden !important;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    ul {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 8px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        overflow: visible !important;
    }


    /* =====================================================
       MENU LI
       ===================================================== */

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        border: 0 !important;
    }


    /* úplně odstranit tečky */

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li::marker {
        content: "" !important;
        display: none !important;
    }


    /* =====================================================
       VŠECHNY MENU POLOŽKY
       ===================================================== */

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li > a {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 58px !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 8px !important;

        color: #40535c !important;

        font-size: 13px !important;
        line-height: 1.22 !important;
        font-weight: 700 !important;

        text-align: center !important;

        /* DŮLEŽITÉ – dlouhé názvy na 2 řádky */
        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: normal !important;

        overflow: visible !important;
        text-overflow: clip !important;

        background: #ffffff !important;

        border: 1px solid #d5e8f0 !important;
        border-radius: 11px !important;

        box-shadow:
            0 1px 3px rgba(0, 80, 110, 0.025) !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* odstranit staré čárky/accenty u položek */

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li > a::before,

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li > a::after {
        content: none !important;
        display: none !important;
    }


    /* =====================================================
       AKTIVNÍ POLOŽKA
       ===================================================== */

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li.active > a {
        color: #ffffff !important;

        background: linear-gradient(
            135deg,
            #0088bd 0%,
            #00a3d9 100%
        ) !important;

        border-color: #0090c9 !important;

        box-shadow:
            0 3px 8px rgba(0, 144, 201, 0.16) !important;
    }


    /* =====================================================
       ODHLÁSIT SE

       Stejná velikost jako ostatní,
       ale poslední osamocené tlačítko vycentrujeme.
       ===================================================== */

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li.logout {
        grid-column: 1 / -1 !important;

        justify-self: center !important;

        width: calc((100% - 8px) / 2) !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    [data-testid="buttonSignout"] {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 58px !important;
        min-height: 58px !important;

        margin: 0 !important;
        padding: 7px 8px !important;

        color: #ffffff !important;

        font-size: 13px !important;
        line-height: 1.22 !important;
        font-weight: 700 !important;

        text-align: center !important;
        white-space: normal !important;

        background: #dc2626 !important;

        border: 1px solid #dc2626 !important;
        border-radius: 11px !important;

        box-shadow:
            0 3px 8px rgba(220, 38, 38, 0.12) !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       2. CHECKBOXY – KOMPLETNÍ RESET

       Shoptet checkbox už nebudeme nechávat skrytý.
       Použijeme skutečný nativní checkbox.
       ===================================================== */

    #register-form[data-testid="formRegistration"]
    input[type="checkbox"],

    #register-form[data-testid="formRegistration"]
    input[type="radio"],

    #shipping-address-form
    input[type="checkbox"],

    #shipping-address-form
    input[type="radio"] {

        /* zrušení případného Shoptet schování */

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        clip: auto !important;
        clip-path: none !important;

        overflow: visible !important;

        /* velikost */

        flex: 0 0 20px !important;

        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;

        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;

        margin: 1px 0 0 0 !important;
        padding: 0 !important;

        /* nativní checkbox */

        -webkit-appearance: checkbox !important;
        appearance: auto !important;

        accent-color: #0090c9 !important;

        transform: none !important;

        float: none !important;

        pointer-events: auto !important;

        z-index: auto !important;

        cursor: pointer !important;
    }


    /* radio */

    #register-form[data-testid="formRegistration"]
    input[type="radio"],

    #shipping-address-form
    input[type="radio"] {
        -webkit-appearance: radio !important;
    }


    /* =====================================================
       FORM GROUP OBSAHUJÍCÍ CHECKBOX
       ===================================================== */

    #register-form[data-testid="formRegistration"]
    .form-group:has(input[type="checkbox"]),

    #register-form[data-testid="formRegistration"]
    .form-group:has(input[type="radio"]),

    #shipping-address-form
    .form-group:has(input[type="checkbox"]),

    #shipping-address-form
    .form-group:has(input[type="radio"]) {
        display: grid !important;

        grid-template-columns:
            20px
            minmax(0, 1fr) !important;

        align-items: start !important;

        column-gap: 10px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;
    }


    /* =====================================================
       LABEL ZA CHECKBOXEM
       ===================================================== */

    #register-form[data-testid="formRegistration"]
    .form-group:has(input[type="checkbox"])
    > label,

    #register-form[data-testid="formRegistration"]
    .form-group:has(input[type="radio"])
    > label,

    #shipping-address-form
    .form-group:has(input[type="checkbox"])
    > label,

    #shipping-address-form
    .form-group:has(input[type="radio"])
    > label {
        grid-column: 2 !important;

        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #40535c !important;

        font-size: 14px !important;
        line-height: 1.45 !important;
        font-weight: 500 !important;

        text-align: left !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        cursor: pointer !important;
    }


    /* =====================================================
       KLASICKÉ INPUT + LABEL
       ===================================================== */

    #register-form[data-testid="formRegistration"]
    input[type="checkbox"] + label,

    #register-form[data-testid="formRegistration"]
    input[type="radio"] + label,

    #shipping-address-form
    input[type="checkbox"] + label,

    #shipping-address-form
    input[type="radio"] + label {
        position: static !important;

        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #40535c !important;

        font-size: 14px !important;
        line-height: 1.45 !important;
        font-weight: 500 !important;

        text-align: left !important;

        white-space: normal !important;

        transform: none !important;
    }


    /* =====================================================
       ZRUŠIT SHOPTET VIRTUÁLNÍ CHECKBOX

       Teď ho můžeme bezpečně vypnout, protože skutečný
       input je výše natvrdo viditelný.
       ===================================================== */

    #register-form[data-testid="formRegistration"]
    input[type="checkbox"] + label::before,

    #register-form[data-testid="formRegistration"]
    input[type="checkbox"] + label::after,

    #register-form[data-testid="formRegistration"]
    input[type="radio"] + label::before,

    #register-form[data-testid="formRegistration"]
    input[type="radio"] + label::after,

    #shipping-address-form
    input[type="checkbox"] + label::before,

    #shipping-address-form
    input[type="checkbox"] + label::after,

    #shipping-address-form
    input[type="radio"] + label::before,

    #shipping-address-form
    input[type="radio"] + label::after {
        content: none !important;
        display: none !important;
    }


    /* =====================================================
       VARIANTA, KDY JE INPUT UVNITŘ LABELU
       ===================================================== */

    #register-form[data-testid="formRegistration"]
    label:has(> input[type="checkbox"]),

    #register-form[data-testid="formRegistration"]
    label:has(> input[type="radio"]),

    #shipping-address-form
    label:has(> input[type="checkbox"]),

    #shipping-address-form
    label:has(> input[type="radio"]) {
        display: grid !important;

        grid-template-columns:
            20px
            minmax(0, 1fr) !important;

        align-items: start !important;

        gap: 10px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        color: #40535c !important;

        font-size: 14px !important;
        line-height: 1.45 !important;
        font-weight: 500 !important;
    }

}


/* =========================================================
   VELMI MALÝ MOBIL
   ========================================================= */

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

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    ul {
        grid-template-columns: 1fr !important;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li.logout {
        grid-column: auto !important;

        width: 100% !important;
    }


    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    li > a,

    .sidebar.sidebar-left[data-testid="sidebarMenu"]
    .client-center-box[data-testid="boxCustomerCenterMenu"]
    [data-testid="buttonSignout"] {
        height: auto !important;
        min-height: 52px !important;
    }

}