* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
}

#container {
    width: 100vw;
    height: auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 40px;
}

@font-face {
    font-family: 'Nexa-book'; /* Tutaj wpisujesz dowolną nazwę, jakiej będziesz używać w kodzie */
    src: url('../res/Nexa-Book.woff') format('woff');
    font-weight: normal; /* Grubość czcionki (np. normal, bold, 400, 700) */
    font-style: normal;  /* Styl (normal lub italic) */
    font-display: swap;  /* Zapobiega niewidzialnemu tekstowi podczas ładowania strony */
}

@font-face {
    font-family: 'Intro-regular'; /* Tutaj wpisujesz dowolną nazwę, jakiej będziesz używać w kodzie */
    src: url('../res/Intro-Regular-Caps.woff') format('woff');
    font-weight: normal; /* Grubość czcionki (np. normal, bold, 400, 700) */
    font-style: normal;  /* Styl (normal lub italic) */
    font-display: swap;  /* Zapobiega niewidzialnemu tekstowi podczas ładowania strony */
}

/* ==========================================================================
   2. ARKUSZE STRON MENU (A4 PIONOWO: 210x297mm)
   ========================================================================== */
#menu {
    position: relative;
    width: 210mm;
    height: 297mm;
    background-image: url(../res/patio-winietki_bg.jpg);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px; /* Odstęp między stronami na ekranie */
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    
    /* Wymuszenie łamania strony po pierwszym arkuszu w druku */
    break-after: page;
    page-break-after: always;
}

#menu-cover {
    width: 210mm;
    height: 297mm;
    background-image: url(../res/skrocone-okladka.jpg); 
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

/* ==========================================================================
   3. POZYCJONOWANIE CZTERECH PÓL TEKSTOWYCH
   ========================================================================== */
.menu-editable-box {
    position: absolute;
    border: 1px dashed rgba(0, 0, 0, 0.15); /* Przerywana ramka widoczna tylko podczas edycji */
    padding: 10px;
    min-height: 100px;
    box-sizing: border-box;
    outline: none;
    text-align: left;
}

/* LINIA GÓRNA (Wspólny poziom top: 100mm) */
.box-text{
    font-family: 'Intro-regular', sans-serif;
    font-size: 22px;
    color: #5b5e3f;
    text-align: center;
}   

/* Pole 1 - Lewa Góra */
#box-1, .pos-1 {
    left: 12.5mm;
    top: 100mm;
    width: 85mm;
    height: 40mm;
}

/* Pole 2 - Prawa Góra */
#box-2, .pos-2 {
    left: 112.5mm;
    top: 100mm;
    width: 85mm;
    height: 40mm;
}

/* LINIA DOLNA (Wspólny poziom top: 228mm) */

/* Pole 3 - Lewy Dół */
#box-3, .pos-3 {
    left: 12.5mm; 
    top: 228mm;
    width: 85mm;
    height: 40mm;
}

/* Pole 4 - Prawy Dół */
#box-4, .pos-4 {
    left: 112.5mm; 
    top: 228mm;
    width: 85mm;
    height: 40mm;
}

/* ==========================================================================
   4. INTERFEJS EDYCJI PÓL NA ŻYWO (EFEKTY HOVER/FOCUS)
   ========================================================================== */
[contenteditable="true"] {
    cursor: text;
    transition: background-color 0.2s ease;
}

[contenteditable="true"]:hover {
    background-color: rgba(241, 196, 15, 0.1); 
    border-radius: 3px;
}

[contenteditable="true"]:focus {
    background-color: rgba(241, 196, 15, 0.2);
    box-shadow: 0 0 4px rgba(241, 196, 15, 0.5);
}

/* ==========================================================================
   5. PANEL ADMINISTRACYJNY (BLOKADA KLIKANIA)
   ========================================================================== */
#admin-panel {
    background: #2c3e50;
    color: #fff;
    padding: 15px;
    text-align: left;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    margin-bottom: 20px;
}

#admin-panel h2 { 
    margin: 0 0 10px 0; 
    font-size: 18px; 
    color: #ecf0f1; 
}

#admin-panel select, #admin-panel button { 
    padding: 8px 12px; 
    margin-right: 10px; 
    border-radius: 4px; 
    border: none; 
}

#admin-panel button { 
    background: #27ae60; 
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
}

.panel-section { 
    display: inline-block; 
    margin-right: 30px; 
    vertical-align: top; 
}

/* Blokada i wyszarzenie nieużywanych opcji (Sekcja 1 i Sekcja 2) */
#admin-panel .panel-section {
    pointer-events: none;
    opacity: 0.35;
    user-select: none;
}

/* Pełne odblokowanie dla sekcji z przyciskiem drukowania */
#admin-panel .panel-section:last-child {
    pointer-events: auto !important;
    opacity: 1 !important;
}

#admin-panel .panel-section:last-child button {
    background-color: #2980b9;
}

#admin-panel .panel-section:last-child button:hover {
    background-color: #1f6391;
}

/* ==========================================================================
   6. REGUŁY WYDRUKU (IDEALNE 2 STRONY A4 PION)
   ========================================================================== */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    #admin-panel, .no-print {
        display: none !important;
    }
    
    body {
        background-color: #fff !important;
    }
    
    #container {
        width: 100% !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    #menu {
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }
    
    #menu-cover {
        box-shadow: none !important;
    }
    
    .menu-editable-box {
        border: none !important; /* Ukrywa linie pomocnicze ramek na wydruku */
    }

    [contenteditable="true"]:hover,
    [contenteditable="true"]:focus {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

#add-page-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #27ae60; /* Ładny zielony kolor */
    color: white;
    border: none;
    border-radius: 50%; /* Koło */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#add-page-btn:hover {
    background-color: #219653;
    transform: scale(1.1); /* Delikatne powiększenie po najechaniu */
}

.btn-icon {
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

/* Dostosowanie klasy generowanych stron */
#menu, .menu-page {
    position: relative;
    width: 210mm;
    height: 297mm;
    background-image: url(../res/patio-winietki_bg.jpg);
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    
    /* Wymuszenie łamania strony w druku */
    break-after: page;
    page-break-after: always;
}

/* Ukrycie przycisku dodawania w druku */
@media print {
    #add-page-btn {
        display: none !important;
    }
    .menu-page {
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }
}