/* ==========================================================================
   SIMPLE DESIGNER - CLEAN LAYOUT (1000px)
   ========================================================================== */

/* 1. HLAVNÝ KONTAJNER */
#simple-designer-container {
    width: 1000px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    background: linear-gradient(to bottom, #f5f9fc 0px, #f8fbfe 250px, #f8fbfe 1000px);
    overflow: hidden; /* Bezpečne drží všetky floatované panely vnútri */
}

/* 2. ĽAVÝ OVLÁDACÍ PANEL */
.designer-left-panel {
    width: 340px;
    float: left;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Spoločné rozostupy pre štrukturálne bloky v ľavom paneli */
.designer-textarea-element,
.designer-panel-block {
    margin-bottom: 20px;
}

.designer-panel-block:last-child {
    margin-bottom: 0;
}

/* Mriežka pre tlačidlá fontov */
.font-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 5px;
}



/* Samostatné zrkadlové tlačidlo s odstupom */
.mirror-btn {
    background: var(--off-white);
    border: 1px solid var(--off-blue);
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-neutral);
    transition: all 0.15s ease;
    margin-left: 12px; /* Tento maržín vytvorí vizuálne oddelenie */
}

/* Hover pre zrkadlo */
.mirror-btn:hover {
    background: var(--off-blue);
    color: var(--darker-blue);
    border-color: var(--primary-blue);
}

/* Aktívny stav - keď je zrkadlenie zapnuté */
.mirror-btn.active {
    background: var(--primary-blue);
    color: var(--off-white);
    border-color: var(--darker-blue);
}





/* Tlačidlá fontov usporiadané v mriežke */
.font-grid-btn {
    background: var(--off-white);
    border: 1px solid var(--off-blue);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    color: var(--gray-neutral);
    transition: all 0.15s ease;
}

/* Hover stav - jemný posun do vašej svetlomodrej */
.font-grid-btn:hover {
    background: var(--off-blue);
    color: var(--darker-blue);
    border-color: var(--primary-blue);
}

/* Aktívny stav - plná primárna modrá a svetlý text */
.font-grid-btn.active {
    background: var(--primary-blue);
    color: var(--off-white);
    border-color: var(--darker-blue);
}





/* Kontajner pre galériu ikon - ZMENŠENÁ MEDZERA */
.icon-grid-container {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 5px;
}

/* Štvorcové akčné tlačidlo pre vloženie ikony - JEMNE ZMENŠENÝ ROZMER */
.icon-tile-btn {
    width: 40px;  
    height: 40px; 
    background: var(--off-white);
    border: 1px solid var(--off-blue);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
}

/* Špecifické štýly pre mriežkovú dlaždicu vymazania (X) */
.icon-tile-btn.kalk-remove-all-tile {
    background-color: transparent;
    color: #8c7676; /* Decentná, utlmená červeno-sivá */
    font-size: 16px;
    font-weight: bold;
}

/* Hover stav pre mazacie tlačidlo */
.icon-tile-btn.kalk-remove-all-tile:hover {
    background: #fdf2f2;
    color: #b85c5c;
    border-color: #b85c5c;
}

/* SVG ikona vnútri tlačidla (Rozmer ponechaný pre dobrú viditeľnosť) */
.icon-tile-btn svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: var(--gray-neutral);
    opacity: 0.7;
    transition: fill 0.15s ease, opacity 0.15s ease;
}

/* Hover stav tlačidla */
.icon-tile-btn:hover {
    background: var(--off-blue);
    border-color: var(--primary-blue);
}

/* Hover stav pre SVG */
.icon-tile-btn:hover svg {
    fill: var(--darker-blue);
    opacity: 1;
}












/* Skupina ikon pre zarovnanie textu */
/* Riadkový flexbox pre štítok a ikony ved¾a seba */
.designer-align-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Natlaèí text do¾ava a ikony doprava */
    margin-bottom: 20px;
}


.align-btn-group {
    display: flex;
    border: 1px solid var(--off-blue);
    border-radius: 6px;
    overflow: hidden;
    background: var(--off-white);
}

.align-btn {
    background: transparent;
    border: none;
    border-right: 1px solid var(--off-blue);
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-neutral);
    transition: all 0.15s ease;
}

.align-btn:last-child {
    border-right: none;
}

/* Hover stav - jemná modrá s tmavšou ikonou */
.align-btn:hover {
    background: var(--off-blue);
    color: var(--darker-blue);
}

/* Aktívny stav - výrazná primárna modrá a svetlá ikona */
.align-btn.active {
    background: var(--primary-blue);
    color: var(--off-white);
}











/* 3. OBAL PRE SVG PLÁTNO */
.canvas-border-wrapper {
    width: 600px;
    height: 400px;
    float: right;
    background: #fff;
}

/* Finálne vyčistené plátno */
#stickerCanvas {
    display: block;
    background: #ffffff;
}






/* 4. KONFIGURAČNÝ PANEL PARAMETROV (POD PLÁTNOM) */
.designer-parameters-panel {
    width: 600px;
    float: right;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border: none;
}

/* Ľavá polovica (Materiál + Farba) */
.designer-parameters-left {
    padding-top: 25px; /* Výškové zalícovanie s pravou stranou */
    width: 300px;
    float: left;
    box-sizing: border-box;
}

/* Pravá polovica (Výška / Rozmery) */
.designer-parameters-right {
    width: 300px;
    float: right;
    padding-right: 25px; /* Optická rezerva od pravého okraja plátna */
    box-sizing: border-box;
    margin-top: 0; 
}

/* Prepísanie globálnych štýlov kalkulačky iba vnútri tohto panelu */
.designer-parameters-panel .kalkPole {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.designer-parameters-left .kalkElement {
    width: 100% !important;
    height: auto !important;
    text-align: left !important;
    margin-top: 0 !important;
    display: inline-block;
}

.designer-parameters-right .kalkElement {
    width: 150px !important;       /* Šírka bloku presne podľa input boxu */
    height: auto !important;
    text-align: center !important;  /* Vycentrovanie nápisu nad políčkom */
    margin-top: 0 !important;
    float: right !important;        /* Natlačenie celého 150px bloku na pravú hranu */
    display: inline-block;
}

/* Zarovnanie číselného input boxu */
.designer-parameters-right .kalkInputBox {
    display: inline-block;
    width: 100% !important;
}














/* 5. SPODNÝ PANEL PRE CENU A AKCIE */
.designer-bottom-bar {
    width: 100%;
    float: left;
    margin-top: 25px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch; /* Roztiahne stĺpce na rovnakú výšku pre lepšiu kontrolu */
    padding: 15px 0;
    border-top: 1px dashed #d3dfed;
}

.designer-column-third {
    flex: 1;
    box-sizing: border-box;
    padding: 0 15px;
}

/* Stĺpec s počtom kusov - zarovnáme k hornému okraju a jemne doladíme */
.designer-bottom-bar .designer-column-third:first-child {
    display: flex;
    align-items: flex-start;
    padding-top: 5px; /* Dorovnanie presne na výšku nápisu "Cena" */
}

.designer-price-center {
    text-align: center;
}

/* Stĺpec s tlačidlom - zarovnáme k hornému okraju a natlačíme doprava */
.designer-button-right {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 18px; /* Vertikálne zarovnanie tlačidla na stred voči inputom */
}












/* Špecifické štýly pre mriežkovú dlaždicu vymazania */
.icon-tile-btn.kalk-remove-all-tile {
    background-color: transparent;
    border: 1px solid #dcdcdc;
    color: #8c7676; /* Decentná, utlmená červeno-sivá */
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Jemná reakcia pri prejdení myšou (hover) */
.icon-tile-btn.kalk-remove-all-tile:hover {
    background-color: #fdf2f2; /* Veľmi jemný teplý nádych */
    color: #b85c5c; /* Čistejšia, ale stále decentná červená */
    border-color: #b85c5c;
}

/* Reakcia pri kliknutí/dotyku */
.icon-tile-btn.kalk-remove-all-tile:active {
    background-color: #fbe5e5;
}



















/* Nová vertikálna kóta mimo plátna - upravená pozícia a veľkosť */
.designer-dim-v {
    position: absolute;

    left: 370px; 
    top: 220px; /* (400px výška plátna / 2) + 20px padding kontajnera */
    
    width: 200px; 
    height: 30px;
    line-height: 30px;
    text-align: center;
    
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    
    font-size: 14px; /* Zväčšené o 1px z pôvodných 13px */
    font-weight: 500;
    color: #555;
    //z-index: 10;
    pointer-events: none; 
    white-space: nowrap;
}

/* Vizuálny štýl pre šípky a text */
.designer-dim-v .dim-arrow {
    color: #888;
    font-family: monospace;
    font-weight: bold;
    margin: 0 4px;
}

.designer-dim-v .dim-value {
    background-color: #f8fbfe; /* Rovnaká farba ako pozadie, aby to vyzeralo čisto */
    padding: 0 4px;
}






/* Nová horizontálna kóta mimo plátna */
.designer-dim-h {
    position: absolute;
    /* Zarovnanie na stred plátna: pravý padding 20px + polovica šírky plátna (600px / 2 = 300px) */
    right: 320px; 
    /* Umiestnenie nad plátno: padding kontajnera 20px mínus výška kóty a malá rezerva */
    top: -5px; 
    
    width: 200px; /* Dostatočný priestor pre text kóty */
    height: 30px;
    line-height: 30px;
    text-align: center;
    
    /* Vycentrovanie elementu presne na stred osi X */
    transform: translateX(50%);
    
    font-size: 14px; /* Rovnaká veľkosť ako pri vertikálnej */
    font-weight: 500;
    color: #555;
    z-index: 10;
/* pointer-events: none; <-- 🔴 TENTO RIADOK VYMAZAŤ ALEBO ZAKOMENTOVAŤ */;
    white-space: nowrap;
}

/* Vizuálny štýl pre šípky a text (zdieľaný alebo upravený pre H kótovanie) */
.designer-dim-h .dim-arrow {
    color: #888;
    font-family: monospace;
    font-weight: bold;
    margin: 0 4px;
}

.designer-dim-h .dim-value {
    background-color: #f8fbfe; /* Rovnaká farba ako pozadie na prekrytie prípadných čiar */
    padding: 0 4px;
}