/* Vzorkovniky — 2 modaly:
   1. Nahled (tpl_gallery_samplers.tpl) — full-size obrazky 300px, read-only
   2. Vyber (vz{ID} v tpl_detail_samples.tpl) — interaktivni sample picker

   Sjednoceny look: cista bila karta, soft shadow, hover lift, accent
   color (#51B9F2 = brand). */

/* ============================================================
   Modal: NAHLED VZORKOVNIKU (tpl_gallery_samplers.tpl)
   Standalone page — body styling + grid karet
   ============================================================ */
body.samples-gallery {
    margin: 0;
    padding: 24px;
    background: #f7f7f7;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #333;
}

.samples-gallery__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
    color: #2c2c2c;
}

.samples-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.samples-gallery__item {
    background: #fff;
    border-radius: 10px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.samples-gallery__item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.10);
}

.samples-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
    background: #fafafa;
}

.samples-gallery__name {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    border-top: 1px solid #f0f0f0;
}

.samples-gallery__close {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 18px;
    background: #51B9F2;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.samples-gallery__close:hover {
    background: #3aa6e0;
}

/* ============================================================
   Inline modal verze (preview<id> v tpl_detail_samples.tpl).
   Stejne karty jako standalone .samples-gallery, ale v magnific-
   popup wrapper s header + close X.
   ============================================================ */
.popup.samples-gallery-modal {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    max-width: 1100px;
    width: 95%;
    margin: 20px auto;
    overflow: hidden;
}

.samples-gallery-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #51B9F2 0%, #3aa6e0 100%);
    color: #fff;
}

.samples-gallery-modal__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

/* Override mfp-close pro nas header (mimo absolute top-right).
   :before injectuje '×' znak — magnific generuje obsah jen pri svem
   closeBtnInside markupu, pro nase custom <div class="mfp-close">
   musime mit content sami. */
.samples-gallery-modal__close.mfp-close {
    position: static !important;
    width: 32px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    opacity: 1;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0;  /* hide possible &times; from default mfp markup */
}

.samples-gallery-modal__close.mfp-close::before {
    content: "×";
    display: block;
    color: #fff;
    font-size: 28px;
    line-height: 32px;
    font-family: Arial, sans-serif;
    font-weight: 300;
}

.samples-gallery-modal__close.mfp-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.samples-gallery-modal__grid {
    padding: 20px;
    max-height: 75vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    background: #f7f7f7;
}

.samples-gallery-modal__item {
    background: #fff;
    border-radius: 10px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.samples-gallery-modal__item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.10);
}

.samples-gallery-modal__item img {
    display: block;
    width: 100%;
    height: auto;
    background: #fafafa;
}

.samples-gallery-modal__name {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    border-top: 1px solid #f0f0f0;
}

@media (max-width: 600px) {
    .popup.samples-gallery-modal { width: 100%; border-radius: 0; }
    .samples-gallery-modal__grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
        padding: 12px;
    }
}

/* ============================================================
   Modal: VYBER LATKY (.popup.vyskakovaci.vz-picker)
   Override puvodniho vyskakovaci stylu pro vzorkovnik picker.
   Pridana class .vz-picker v tpl_detail_samples.tpl pro scope.
   ============================================================ */
.popup.vyskakovaci.vz-picker {
    max-width: 920px;
    width: 95%;
    background: #fff !important;       /* override inline #EDEDED */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    padding: 0;
    overflow: hidden;
}

.popup.vyskakovaci.vz-picker .obsah {
    padding: 0 !important;             /* override puvodni padding-top:40px */
    background: transparent;
    border-radius: 0;
    max-width: none;
    width: 100%;
    text-align: left;
}

.vz-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #51B9F2 0%, #3aa6e0 100%);
    color: #fff;
}

.vz-picker__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

/* Override puvodni .zavrit (sprite background) za moderni X */
.popup.vyskakovaci.vz-picker .zavrit {
    position: static;                   /* override absolute right:-56px */
    right: auto;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    line-height: 32px;
    padding: 0;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease;
}

.popup.vyskakovaci.vz-picker .zavrit:hover {
    background: rgba(255, 255, 255, 0.35);
}

.popup.vyskakovaci.vz-picker .zavrit:before {
    content: "×";
    color: #fff;
    font-size: 20px;
    line-height: 32px;
    background: none;                   /* override sprite image */
    width: auto;
    height: auto;
}

.vz-picker__body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.vz-picker__hint {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #f0f9fe;
    border-left: 3px solid #51B9F2;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #555;
}

/* changeColor je inner wrapper s vsemi samply.
   margin-top: 0 — override style-2.css:6942 margin-top:-40px (historicka
   kompenzace starého padding-top:40px na .obsah, prekryvalo prvni radek).
   padding: 0 — override style-2.css:6941 padding:20px (uz mam na .vz-picker__body). */
.popup.vyskakovaci.vz-picker .changeColor {
    overflow: visible !important;
    padding: 0 !important;
    margin-top: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
}

/* Sample bunky — flex column, vyrovnana vyska, border-box ze borders v sirce */
.popup.vyskakovaci.vz-picker .sb.sample {
    box-sizing: border-box;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 8px;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
    min-width: 0;             /* prevents flex children overflow */
    overflow: hidden;          /* rohy radius respekt */
}

.popup.vyskakovaci.vz-picker .sb.sample:hover {
    border-color: #51B9F2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(81, 185, 242, 0.18);
}

.popup.vyskakovaci.vz-picker .sb.sample.active,
.popup.vyskakovaci.vz-picker .sb.sample.selected {
    border-color: #51B9F2;
    background: #f0f9fe;
}

/* Image area — fixed vyska 60px (aby vsechny karty byly stejne vysoke
   i pri ruznych ratios obrazku 50x35 / 50x50). object-fit drzi proporce. */
.popup.vyskakovaci.vz-picker .sb.sample img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    margin: 0 auto 8px;
    border-radius: 4px;
}

/* Override style-2.css:6969 `.changeColor a span { display:block; padding-bottom:5px... }`
   — nas markup ma <span class="value"> ne <a><span>, ale Smarty render moze
   matchovat. Plus puvodne nase inline style had width:70/BOXWIDTH. */
.popup.vyskakovaci.vz-picker .sb.sample .value {
    display: block;
    width: 100% !important;
    min-height: 0 !important;
    max-width: 100%;
    padding: 0 !important;
    margin: 0;
    font-size: 11px;
    color: #555;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Sample s priplatkem (samplePrice<ID> — druhy .value uvnitr) */
.popup.vyskakovaci.vz-picker .sb.sample [id^="samplePrice"] {
    margin-top: 6px;
    padding-top: 6px !important;
    border-top: 1px dashed #e0e0e0;
    font-size: 11px;
    font-weight: 600;
    color: #c62828;
    height: auto !important;
    width: 100% !important;
}

@media (max-width: 600px) {
    .popup.vyskakovaci.vz-picker {
        width: 100%;
        border-radius: 0;
    }
    .popup.vyskakovaci.vz-picker .changeColor {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
}