/* Editor razítek (pages-razitka): rozvržení podle šířky obsahu stránky (ne okna), protože vedle jsou postranní panely různé šířky. */
#rz-editor {
    container-type: inline-size;
    --border: var(--bs-border-color);
    --bg: var(--bs-tertiary-bg);
    --text: var(--bs-body-color);
    --muted: var(--bs-secondary-color);
    --accent: var(--bs-primary);
}

.rz-mrizka {
    display: grid;
    gap: 1.5rem;
    grid-template-areas: "nahled" "ovladani";
}

.rz-nahled { grid-area: nahled; min-width: 0; }
.rz-ovladani { grid-area: ovladani; min-width: 0; }

/* čísla kroků podle toho, které jsou vidět (od produktu je krok Razítko skrytý) */
.rz-ovladani { counter-reset: krok; }
.rz-krok::before { counter-increment: krok; content: counter(krok) ". "; }
#rz-krok-razitko:not([hidden]) + .rz-jiny-rozmer { display: none; }

@container (min-width: 900px) {
    .rz-mrizka {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas: "nahled ovladani";
        align-items: start;
    }

    .rz-nahled {
        position: sticky;
        top: 70px;
    }
}

/* tlačítka přidání prvků s ikonou ze SVG */
#rz-pridat .btn svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
}

/* nabídka pod tlačítkem Logo / obrázek a Tvar / linka; měří se od celé lišty tlačítek, aby na úzkém displeji nepřetekla doprava */
#rz-pridat {
    position: relative;
}

.rz-nabidka {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 220px;
    max-width: 100%;
    margin-top: 4px;
    box-shadow: var(--bs-box-shadow);
}

.rz-nabidka[hidden] {
    display: none;
}

#symbolFlyoutList .list-group-item {
    width: 52px;
    height: 52px;
    padding: 8px;
}

#symbolFlyoutList svg {
    width: 100%;
    height: 100%;
}

/* malá kulatá tlačítka v rohu náhledu šablony (správa) */
.rz-mini {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
}

/* --- převzato ze samostatného editoru tools/stamper --- */
#rz-editor .panel-box {
    position:relative;
    background:var(--panel-bg);
    border:1px solid var(--border);
    border-radius:var(--bs-border-radius, 10px);
    padding:16px;
}
#rz-editor .obj-mini-controls {
    position:absolute;
    top:14px;
    right:14px;
    display:flex;
    gap:4px;
}
#rz-editor .mini-icon-btn {
    width:34px;
    height:34px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--text);
    cursor:pointer;
    border-radius:6px;
}
#rz-editor .mini-icon-btn:hover {
    background:var(--bg);
}
#rz-editor .mini-icon-btn i {
    font-size:17px;
    line-height:1;
}
#rz-editor .mini-icon-btn svg {
    width:19px;
    height:19px;
    display:block;
}
#rz-editor fieldset {
    border:none;
    border-top:1px solid var(--border);
    padding:9px 0;
    margin:0;
}
#rz-editor fieldset:first-of-type {
    border-top:none;
    padding-top:0;
}
#rz-editor .panel-section-sep {
    border-top:1px solid var(--border);
    margin-top:14px;
    padding-top:14px;
}
#rz-editor legend {
    font-weight:600;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--muted);
    margin-bottom:6px;
    padding:0;
}
#rz-editor legend.panel-title-plain {
    text-transform:none;
    letter-spacing:normal;
    color:var(--text);
    margin-bottom:0;
}
#rz-editor label, #rz-editor .form-label {
    display:block;
    font-size:13px;
    margin:6px 0 3px;
}
#rz-editor label.inline {
    display:flex;
    align-items:center;
    gap:8px;
    margin:6px 0;
}
#rz-editor textarea.form-control {
    margin-bottom:10px;
}
#rz-editor textarea.autogrow {
    overflow:hidden;
    resize:none;
}
#rz-editor .font-size-row {
    display:flex;
    gap:8px;
    align-items:center;
    margin:6px 0;
}
#rz-editor .font-size-row > select {
    flex:1 1 50%;
    min-width:0;
}
#rz-editor .font-size-row > .slider-with-number {
    flex:1 1 50%;
    min-width:0;
    margin:0;
}
#rz-editor .font-size-row .form-range {
    min-width:0;
}
#rz-editor .field-row {
    display:flex;
    gap:20px;
    align-items:center;
    flex-wrap:wrap;
    margin:6px 0;
}
#rz-editor .field-row > .field-number {
    flex:0 0 64px;
}
#rz-editor .field-row > .field-grow {
    flex:1 1 140px;
    min-width:0;
}
#rz-editor .swatches {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
#rz-editor .swatch {
    width:38px;
    height:38px;
    border-radius:50%;
    border:2px solid transparent;
    cursor:pointer;
    padding:0;
    box-shadow:inset 0 0 0 1px #d5d5d5;
    flex:none;
}
#rz-editor .swatch.active {
    border-color:var(--accent);
}
#rz-editor .swatch-label {
    font-size:11px;
    color:var(--muted);
    margin-top:2px;
}
#rz-editor .toolbtns {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
#rz-editor .toolbtns .btn {
    flex:1 1 auto;
}
#rz-editor .tplbtn {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:6px 4px;
    min-width:60px;
}
#rz-editor .tplbtn svg {
    width:44px;
    height:44px;
    display:block;
    background:#fff;
    border-radius:3px;
}
#rz-editor .tplbtn span {
    font-size:11px;
    line-height:1.2;
    text-align:center;
}
#rz-editor #tplButtons.toolbtns {
    gap:10px;
}
#rz-editor #tplButtons .tplbtn {
    min-width:100px;
}
#rz-editor #tplButtons .tplbtn svg {
    width:120px;
    height:120px;
}
#rz-editor #tplButtons .tplbtn span {
    font-size:12px;
}
#rz-editor .stage-wrap {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
#rz-editor #stampSvg {
    background:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    touch-action:none;
    display:block;
}
#rz-editor .ruler-wrap {
    display:grid;
    grid-template-columns:26px auto;
    grid-template-rows:20px auto;
}
#rz-editor .ruler-corner {
    grid-column:1;
    grid-row:1;
    background:#f2f3f5;
}
#rz-editor .ruler-h {
    grid-column:2;
    grid-row:1;
    position:relative;
    overflow:hidden;
    background:#f7f8f9;
    border-bottom:1px solid var(--border);
}
#rz-editor .ruler-v {
    grid-column:1;
    grid-row:2;
    position:relative;
    overflow:hidden;
    background:#f7f8f9;
    border-right:1px solid var(--border);
}
#rz-editor #stampSvg {
    grid-column:2;
    grid-row:2;
}
#rz-editor .ruler-h .rtick {
    position:absolute;
    bottom:0;
    width:1px;
    background:#b7bcc3;
}
#rz-editor .ruler-v .rtick {
    position:absolute;
    right:0;
    height:1px;
    background:#b7bcc3;
}
#rz-editor .ruler-h .rlabel {
    position:absolute;
    bottom:8px;
    top:1px;
    transform:translateX(-50%);
    font-size:9px;
    line-height:11px;
    color:#6a6f76;
    white-space:nowrap;
}
#rz-editor .ruler-v .rlabel-v {
    position:absolute;
    right:9px;
    transform:translateY(-50%);
    font-size:9px;
    line-height:11px;
    color:#6a6f76;
    white-space:nowrap;
}
#rz-editor .hint {
    font-size:11.5px;
    color:var(--muted);
    margin-top:6px;
    line-height:1.4;
}
#rz-editor .objlist {
    list-style:none;
    margin:0;
    padding:0;
    max-height:150px;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:6px;
}
#rz-editor .objlist li {
    padding:6px 8px;
    font-size:12.5px;
    cursor:pointer;
    border-bottom:1px solid #f0f0f0;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
#rz-editor .objlist li:last-child {
    border-bottom:none;
}
#rz-editor .objlist li.active {
    background:#eef2ff;
    font-weight:600;
}
#rz-editor .objlist li:hover {
    background:#f7f7f8;
}
#rz-editor .objlist-label {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#rz-editor .objlist-actions {
    flex-shrink:0;
    margin-left:6px;
    display:flex;
    gap:4px;
    align-items:center;
}
#rz-editor .quick-layer-bar {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
}
#rz-editor .quick-layer-btn {
    width:30px;
    height:30px;
    padding:0;
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--panel-bg);
    color:var(--text);
    cursor:pointer;
}
#rz-editor .quick-layer-btn:hover {
    background:var(--bg);
}
#rz-editor .quick-layer-btn.active {
    border-color:var(--accent);
    color:var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, var(--panel-bg));
}
#rz-editor .quick-layer-btn svg {
    width:16px;
    height:16px;
    display:block;
}
#rz-editor .quick-layer-btn i {
    font-size:14px;
}
#rz-editor .actions {
    display:flex;
    gap:8px;
    width:100%;
}
#rz-editor .actions .btn {
    flex:1;
}
#rz-editor .empty-msg {
    font-size:13px;
    color:var(--muted);
    padding:20px 4px;
    text-align:center;
}
#rz-editor .icon-btn {
    width:38px;
    height:38px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
}
#rz-editor .icon-btn svg {
    width:18px;
    height:18px;
    display:block;
}
#rz-editor .icon-btn i {
    font-size:15px;
    line-height:1;
}
#rz-editor .rz-icon-group {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
#rz-editor .rz-icon-group-plain {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin:2px 0 2px -10px;
    position:static;
    float:none;
}
#rz-editor .rz-icon-btn-plain {
    width:64px;
    height:64px;
    padding:0;
    border:0;
    background:transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:static;
    float:none;
    vertical-align:middle;
    color:var(--text);
    cursor:pointer;
    flex:none;
}
#rz-editor .rz-icon-btn-plain svg {
    width:44px;
    height:44px;
    display:block;
}
#rz-editor .rz-icon-btn-plain i {
    font-size:30px;
    line-height:1;
}
#rz-editor .rz-icon-btn-plain:hover {
    color:var(--accent);
}
#rz-editor .rz-icon-btn-plain.active {
    color:var(--accent);
}
#rz-editor .rz-icon-btn-plain:disabled {
    opacity:0.4;
    cursor:default;
}
#rz-editor .rz-icon-group-inline {
    display:block;
}
#rz-editor .rz-icon-group-inline .rz-icon-btn-plain {
    margin-right:4px;
}
#rz-editor .rz-icon-group-inline .rz-icon-btn-plain:last-child {
    margin-right:0;
}
#rz-editor #stampShape svg {
    width:40px;
    height:40px;
    display:block;
}
#rz-editor .font-row {
    display:flex;
    gap:6px;
    align-items:end;
    flex-wrap:wrap;
}
#rz-editor .font-row > .flex-grow {
    flex:1 1 120px;
    min-width:100px;
}
#rz-editor .font-row > .fixed-size {
    flex:0 0 76px;
    width:76px;
}
#rz-editor .compact-row {
    display:flex;
    gap:6px;
    align-items:center;
    flex-wrap:wrap;
    margin:6px 0;
}
#rz-editor .toolbar-groups {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:6px 0;
}
#rz-editor .inline-toolbar {
    display:flex;
    flex-wrap:wrap;
    width:fit-content;
    border:1px solid var(--border);
    border-radius:var(--bs-border-radius, 10px);
    overflow:hidden;
    margin:0;
}
#rz-editor .inline-toolbar .swatches, #rz-editor .inline-toolbar .rz-icon-group {
    display:contents;
}
#rz-editor .inline-toolbar .btn, #rz-editor .inline-toolbar .swatch {
    width:38px;
    height:38px;
    border-radius:0 !important;
    border:0 !important;
    border-right:1px solid var(--border) !important;
    margin:0;
    flex:none;
    box-shadow:none;
}
#rz-editor .inline-toolbar .btn:last-child, #rz-editor .inline-toolbar .swatch:last-child {
    border-right:0 !important;
}
#rz-editor .inline-toolbar .swatch.active {
    box-shadow:inset 0 0 0 3px var(--accent) !important;
}
#rz-editor .slider-with-number {
    display:flex;
    align-items:center;
    gap:8px;
}
#rz-editor .slider-with-number .form-range {
    flex:1 1 auto;
}
#rz-editor .slider-with-number .form-control {
    flex:0 0 78px;
    width:78px;
}
#rz-editor .spacing-row {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}
#rz-editor .spacing-col {
    flex:1 1 140px;
    min-width:140px;
}
#rz-editor .spacing-sub-label {
    font-weight:600;
    font-size:12.5px;
    margin:8px 0 3px;
}
#rz-editor .reset-mini-btn {
    width:22px;
    height:22px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    cursor:pointer;
    border-radius:5px;
    flex:none;
}
#rz-editor .reset-mini-btn:hover:not(:disabled) {
    background:var(--bg);
    color:var(--text);
}
#rz-editor .reset-mini-btn:disabled {
    opacity:.35;
    cursor:default;
}
#rz-editor .reset-mini-btn i {
    font-size:12px;
    line-height:1;
}
#rz-editor .form-check-label {
    display:inline-block;
    margin:0;
    cursor:pointer;
}
#rz-editor .form-check {
    margin:8px 0;
}

/* moje loga přihlášeného v nabídce Logo / obrázek */
.rz-logo img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}