/* Okno wyboru rodzaju tapety z porownaniem materialow (assets/materials.js).
   Wspolne dla plannera (.rrp-app, okno plannera) i karty produktu (.rrp-mat, wlasne okno i przycisk).
   Motyw sklepu (Flatsome) stylizuje przyciski, naglowki i tabele - tu sa resety, zeby okno wygladalo tak samo. */

.rrp-mat {
    --rrp-ink: #03295d;
    --rrp-line: #e3d4d6;
    --rrp-accent: #03295d;
    --rrp-rose: #c9959a;
    --rrp-rose-soft: #f3e4e5;
    color: var(--rrp-ink);
    font-size: 14px;
    line-height: 1.4;
}

.rrp-mat,
.rrp-mat * {
    box-sizing: border-box;
}

/* Klasy z display (np. przyciski) nie moga nadpisac atrybutu hidden. */
.rrp-mat [hidden] {
    display: none !important;
}

:is(.rrp-app, .rrp-mat) .rrp-materials h4 {
    color: var(--rrp-ink);
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
}

:is(.rrp-app, .rrp-mat) .rrp-materials img {
    max-width: 100%;
}

.rrp-materials-lead {
    margin: 0 0 14px;
    color: #6f6a61;
    font-size: 15px;
}

.rrp-materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.rrp-material {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rrp-line);
    border-radius: 10px;
    background: #fff;
}

.rrp-material.is-current {
    border-color: var(--rrp-accent);
    box-shadow: 0 0 0 1px var(--rrp-accent);
}

.rrp-material.is-unavailable .rrp-material-body {
    opacity: 0.6;
}

:is(.rrp-app, .rrp-mat) .rrp-material-photo {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #eee;
    cursor: zoom-in;
}

.rrp-material-photo.is-empty {
    display: grid;
    place-items: center;
    cursor: default;
}

.rrp-material-photo.is-empty svg {
    width: 36px;
    height: 36px;
    color: #a39d94;
}

.rrp-material-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

@media (hover: hover) {
    .rrp-material-photo:hover img {
        transform: scale(1.05);
    }
}

.rrp-material-loupe {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--rrp-ink);
    line-height: 0;
}

.rrp-material-loupe svg {
    width: 16px;
    height: 16px;
}

.rrp-material-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--rrp-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.rrp-material-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
}

.rrp-material-body h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
}

.rrp-material-tag {
    margin: 0;
    color: #8a5f64;
    font-size: 13.5px;
    font-weight: 600;
}

.rrp-material-summary {
    margin: 0;
    color: #4d4a45;
    font-size: 14px;
    line-height: 1.45;
}

.rrp-material-price {
    margin: auto 0 0;
    padding-top: 6px;
    font-size: 14px;
}

.rrp-material-price strong {
    font-size: 18px;
}

.rrp-material-price.is-missing {
    color: #6f6a61;
    font-style: italic;
}

.rrp-material-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 32px;
}

:is(.rrp-app, .rrp-mat) .rrp-material-choose {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    margin: 0;
    padding: 6px 16px;
    border: 1px solid var(--rrp-ink);
    border-radius: 6px;
    background: var(--rrp-ink);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
}

.rrp-material-chosen {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rrp-accent);
    font-size: 14px;
    font-weight: 600;
}

.rrp-material-chosen svg {
    width: 16px;
    height: 16px;
}

.rrp-material-sample {
    color: var(--rrp-accent);
    font-size: 13px;
}

.rrp-materials-heading {
    margin: 24px 0 10px;
    font-size: 15px;
}

/* Na waskim ekranie tabela przewija sie w poziomie, a nazwy cech zostaja przypiete z lewej. */
.rrp-materials-table {
    overflow-x: auto;
    border: 1px solid var(--rrp-line);
    border-radius: 10px;
}

.rrp-materials-table table {
    width: 100%;
    min-width: 640px;
    margin: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
}

.rrp-materials-table th,
.rrp-materials-table td {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--rrp-line);
    text-align: left;
    vertical-align: top;
    line-height: 1.35;
}

.rrp-materials-table tbody tr:last-child > * {
    border-bottom: 0;
}

.rrp-materials-table thead th {
    font-size: 13.5px;
    font-weight: 600;
    vertical-align: bottom;
}

.rrp-materials-table thead img {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 6px;
    object-fit: cover;
}

.rrp-materials-table tbody th,
.rrp-materials-table thead td {
    width: 130px;
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    color: #6f6a61;
    font-weight: 500;
}

.rrp-materials-table .is-current {
    background: var(--rrp-rose-soft);
}

.rrp-materials-none {
    color: #a39d94;
}

.rrp-materials-swipe {
    display: none;
}

.rrp-materials-price-row strong {
    font-size: 14px;
}

.rrp-materials-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.rrp-materials-photos figure {
    margin: 0;
}

.rrp-materials-photos img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    object-fit: cover;
}

.rrp-materials-photos figcaption {
    margin-top: 6px;
    color: #6f6a61;
    font-size: 13px;
}

.rrp-materials-note {
    margin: 18px 0 0;
    color: #6f6a61;
    font-size: 13px;
}

.rrp-materials-note a {
    color: var(--rrp-accent);
}

/* Powiekszona faktura nad oknem; klikniecie w dowolne miejsce ja zamyka. */
:is(.rrp-app, .rrp-mat) .rrp-material-zoom {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 20px;
    border: 0;
    border-radius: 0;
    background: rgba(20, 20, 18, 0.82);
    color: #fff;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
    cursor: zoom-out;
}

.rrp-material-zoom img {
    max-width: min(90vw, 760px);
    max-height: 80vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.rrp-material-zoom span {
    font-size: 15px;
    font-weight: 600;
}

@media (max-width: 700px) {
    .rrp-materials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .rrp-material-body {
        padding: 10px;
    }

    .rrp-material-body h4 {
        font-size: 15px;
    }

    .rrp-material-summary {
        font-size: 13.5px;
    }

    .rrp-material-actions .rrp-material-choose {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Kolumna materialu to ok. 43% widocznej czesci - trzecia zawsze wystaje, wiec widac, ze tabela sie przewija. */
    .rrp-materials-table table {
        width: calc(96px + 4 * (100vw - 32px - 96px) * 0.43);
        min-width: 0;
    }

    .rrp-materials-swipe {
        display: block;
        margin: -4px 0 8px;
        color: #6f6a61;
        font-size: 12px;
    }

    .rrp-materials-table tbody th,
    .rrp-materials-table thead td {
        width: 96px;
        padding-left: 10px;
        padding-right: 8px;
        box-shadow: 1px 0 0 var(--rrp-line);
    }
}

/* Motyw sklepu daje komorkom tabel wersaliki i odstepy. */
.rrp-mat .rrp-materials-table th,
.rrp-mat .rrp-materials-table td {
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

/* ------------------------------------------------- karta produktu: przycisk zamiast natywnego wyboru */

/* Natywny select i przelaczniki zostaja w formularzu (WooCommerce z nich korzysta), ale sa ukryte. */
.rrp-mat-replaced > :not(.rrp-mat-pick):not(.reset_variations) {
    display: none !important;
}

.rrp-mat.rrp-mat-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 0;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--rrp-ink);
    border-radius: 10px;
    background: #fff;
    color: var(--rrp-ink);
    font: inherit;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
}

.rrp-mat-pick-thumb {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--rrp-line);
    border-radius: 8px;
    background: #f3f3f3;
}

.rrp-mat-pick-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rrp-mat-pick-text {
    flex: 1;
    min-width: 0;
}

.rrp-mat-pick-text small {
    display: block;
    color: #6f6a61;
    font-size: 13px;
}

/* Nazwa sie zawija: w tabeli wariantow tekst bez zawijania poszerzylby cala kolumne (takze inne selecty). */
.rrp-mat-pick-text strong {
    display: block;
    overflow-wrap: anywhere;
}

.rrp-mat-pick-go {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 2px;
    color: var(--rrp-ink);
    font-size: 13px;
    font-weight: 600;
}

@media (hover: hover) {
    .rrp-mat.rrp-mat-pick:hover {
        background: var(--rrp-rose-soft);
    }
}

/* ------------------------------------------------- karta produktu: forma zamowienia i dlugosc rolki */

.rrp-forms-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.rrp-lengths-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

:is(.rrp-app, .rrp-mat) .rrp-material-photo.is-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: 10px 8px 4px;
    background: #faf7f7;
    cursor: default;
}

.rrp-form-svg {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
}

.rrp-form-svg text {
    fill: var(--rrp-ink);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
}

.rrp-form-svg .rrp-form-svg-muted {
    fill: #6f6a61;
    font-weight: 400;
}

.rrp-form-svg .rrp-form-svg-rose {
    fill: #a5676d;
}

.rrp-form-points {
    margin: 0;
    padding-left: 18px;
    color: #4d4a45;
    font-size: 14.5px;
    line-height: 1.45;
}

.rrp-form-points li {
    margin: 0;
}

.rrp-form-points li + li {
    margin-top: 3px;
}

.rrp-form-tip,
.rrp-form-example {
    margin: 0;
    color: #6f6a61;
    font-size: 13.5px;
    line-height: 1.4;
}

.rrp-form-tip {
    font-style: italic;
}

.rrp-form-need {
    margin: 0;
    color: var(--rrp-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.rrp-form-calc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--rrp-rose-soft);
}

.rrp-mat .rrp-form-calc label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: var(--rrp-ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.rrp-mat .rrp-form-calc input {
    width: 150px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--rrp-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    color: var(--rrp-ink);
    font: inherit;
    font-size: 16px;
}

/* ------------------------------------------------- poradnik [royal_tapety_poradnik] */

.rrp-mat.rrp-guide {
    max-width: 1080px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.5;
}

.rrp-guide-lead {
    margin: 0 0 14px;
    color: var(--rrp-ink);
    font-size: 19px;
    font-weight: 600;
}

.rrp-guide-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
}

.rrp-guide-toc a {
    padding: 6px 14px;
    border: 1px solid var(--rrp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--rrp-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.rrp-guide-section {
    margin: 0 0 40px;
    scroll-margin-top: 90px;
}

.rrp-mat.rrp-guide h2 {
    margin: 0 0 14px;
    color: var(--rrp-ink);
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

.rrp-mat.rrp-guide h3 {
    margin: 18px 0 10px;
    color: var(--rrp-ink);
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

.rrp-guide .rrp-material-body h3 {
    margin: 0;
    font-size: 17px;
}

.rrp-guide p {
    margin: 0 0 12px;
}

.rrp-guide .rrp-form-points {
    font-size: 15px;
}

.rrp-guide-more {
    margin-top: auto;
    padding-top: 6px;
    color: var(--rrp-ink);
    font-size: 14px;
    font-weight: 600;
}

.rrp-guide-steps {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: rrp-step;
}

.rrp-guide-steps li {
    position: relative;
    margin: 0;
    padding: 2px 0 2px 44px;
    counter-increment: rrp-step;
}

.rrp-guide-steps li::before {
    content: counter(rrp-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rrp-ink);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.rrp-guide-box {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--rrp-rose-soft);
}

.rrp-mat.rrp-guide .rrp-guide-box h3 {
    margin-top: 0;
}

.rrp-guide-box .rrp-form-calc {
    padding: 0;
    background: none;
}

.rrp-guide-result {
    color: var(--rrp-ink);
    font-size: 18px;
}

.rrp-guide .rrp-form-need {
    font-size: 16px;
}

.rrp-guide-note {
    color: #6f6a61;
    font-size: 14px;
}

.rrp-guide-warn {
    padding: 10px 14px;
    border-left: 4px solid var(--rrp-rose);
    background: #fdf7f7;
}

.rrp-guide-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.rrp-guide-demo {
    flex: 0 0 260px;
    max-width: 100%;
}

.rrp-guide .rrp-materials-table,
.rrp-guide .rrp-materials-photos {
    margin-top: 18px;
}

@media (max-width: 700px) {
    .rrp-mat.rrp-guide {
        font-size: 15px;
    }

    .rrp-mat.rrp-guide h2 {
        font-size: 21px;
    }

    .rrp-guide-lead {
        font-size: 17px;
    }

    /* Karty form i materialow w poradniku po jednej - opis ma byc czytelny bez przewijania w bok. */
    .rrp-guide .rrp-materials-grid:not(.rrp-lengths-grid) {
        grid-template-columns: 1fr;
    }

    /* Materialy poziomo: mala faktura z lewej, tekst z prawej - krotsze przewijanie. */
    .rrp-guide-materials .rrp-material {
        flex-direction: row;
        align-items: stretch;
    }

    .rrp-guide-materials .rrp-material-photo {
        flex: 0 0 104px;
        width: 104px;
    }
}

/* ------------------------------------------------- karta produktu: cena nad "Dodaj do koszyka" */

/* Z naszymi oknami komunikat "Wybierz opcje z kazdego pola" (fragment WPCode) zastepuje ponizsza cena. */
body.rrp-mat-pickers #variation-selection-tooltip {
    display: none !important;
}

.rrp-mat.rrp-mat-summary {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 4px solid var(--rrp-ink);
    border-radius: 0 8px 8px 0;
    background: #f4f7f9;
}

.rrp-mat-summary p {
    margin: 0;
}

.rrp-mat-summary-price {
    color: var(--rrp-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.rrp-mat-summary-missing {
    margin-top: 4px !important;
    color: #4d4a45;
    font-size: 14px;
}

.rrp-mat .rrp-mat-summary-link {
    display: inline;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rrp-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
}

/* ------------------------------------------------- karta produktu: okno */

body.rrp-mat-open {
    overflow: hidden;
}

/* Plywajacy przelacznik jezyka (TranslatePress) ma ogromny z-index i zaslanialby okno. */
body.rrp-mat-open #trp-floater-ls {
    display: none;
}

.rrp-mat-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 20, 18, 0.55);
}

.rrp-mat-box {
    display: flex;
    flex-direction: column;
    width: min(1080px, 100%);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.rrp-mat-box header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rrp-line);
}

.rrp-mat-box h3 {
    margin: 0;
    color: var(--rrp-ink);
    font-family: inherit;
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
}

.rrp-mat .rrp-mat-close {
    flex: none;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rrp-line);
    border-radius: 6px;
    background: #fff;
    color: var(--rrp-ink);
    font-size: 20px;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
}

.rrp-mat-body {
    padding: 16px;
    overflow: auto;
}

.rrp-mat-icon {
    flex: none;
}

@media (max-width: 700px) {
    .rrp-mat-modal {
        padding: 0;
    }

    .rrp-mat-box {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .rrp-mat-body {
        padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
    }

    .rrp-mat-pick-go span {
        display: none;
    }

    /* Na telefonie kolumna wariantow jest waska - nazwa ma miescic sie calymi slowami. */
    .rrp-mat.rrp-mat-pick {
        gap: 8px;
        padding: 8px 10px;
    }

    .rrp-mat-pick-thumb {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }

    .rrp-mat-pick-text small {
        display: none;
    }

    .rrp-mat-pick-text strong {
        font-size: 14px;
    }

    /* Karty form z rysunkiem i opisem sa czytelne tylko na cala szerokosc. */
    .rrp-forms-grid:not(.rrp-lengths-grid) {
        grid-template-columns: 1fr;
    }

    .rrp-forms-grid:not(.rrp-lengths-grid) .rrp-form-svg {
        max-width: 240px;
    }

    .rrp-mat .rrp-form-calc label {
        flex: 1 1 120px;
    }

    .rrp-mat .rrp-form-calc input {
        width: 100%;
    }
}