/* Autorka kodu to Zuzanna Teszke */

:root {
    --color-primary: #4DB6AC;      
    --color-secondary: #80CBC4;    
    --color-tertiary: #A5D6A7;
    --color-text-primary: #263238; 
    --color-text-secondary: #546E7A;
    --color-surface: #ffffff;
    --color-background: #f8fbfb;
    --color-border: #E0E0E0;
    --color-light-gray: #f7f9f9;
    --color-reserved-text: #B71C1C;
    --color-success: #2e7d32;
    --color-warning: #f57c00;
    --color-error: #d32f2f;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;

    --border-radius: 24px; 
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-animation: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-background);
    font-family: var(--font-body);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--color-background);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0s 0.5s;
}
#preloader.hidden { opacity: 0; visibility: hidden; }

.py-section { padding: 4rem 0; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 2rem; font-family: var(--font-body); font-weight: 600; border-radius: 50px; cursor: pointer; transition: var(--transition-smooth); border: 1px solid transparent; text-align: center; text-decoration: none; }
.btn.disabled, .btn:disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}
.btn-primary { background-color: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
.btn-primary:not(.disabled):not(:disabled):hover { background-color: #26A69A; border-color: #26A69A; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(77, 182, 172, 0.3); }
.btn-secondary { background-color: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; font-weight: 600; text-decoration: none; }
.btn-secondary:not(.disabled):not(:disabled):hover { background-color: #c8e6c9; transform: translateY(-2px); }

#login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; position: relative; overflow: hidden; transition: opacity 0.5s ease, transform 0.5s ease; }
#login-container.hidden { opacity: 0; transform: scale(0.95); pointer-events: none; }
.animated-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: linear-gradient(45deg, #e0f2f1, #b2dfdb, #80cbc4, #4db6ac); background-size: 400% 400%; animation: gradientBG 15s ease infinite; }
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.login-box { position: relative; z-index: 2; max-width: 450px; width: 100%; padding: 3rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--border-radius); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1); text-align: center; overflow: hidden; }
.loader-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
.loader-overlay.active { opacity: 1; visibility: visible; transition-delay: 0s; }
.loader { width: 48px; height: 48px; border: 5px solid var(--color-secondary); border-bottom-color: var(--color-primary); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
.loader-small { width: 24px; height: 24px; border: 3px solid var(--color-secondary); border-bottom-color: var(--color-primary); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; margin: 1rem auto; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
h1.login-brand-name { font-family: var(--font-heading); font-style: italic; color: var(--color-text-primary); font-size: 3rem; margin-bottom: 0.5rem; }
.login-box h2 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--color-text-primary); }
.login-box p { color: var(--color-text-secondary); margin-bottom: 2rem; }
.form-group { text-align: left; margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; color: var(--color-text-secondary); }
.form-group input { width: 100%; padding: 1rem; border: 1px solid var(--color-border); border-radius: 12px; font-family: var(--font-body); font-size: 1rem; background-color: var(--color-surface); transition: var(--transition-smooth); }
.form-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(77, 182, 172, 0.2); }
.btn-login { width: 100%; padding: 1rem; font-size: 1.1rem; }
.error-message { color: var(--color-reserved-text); font-weight: 500; margin-top: 1rem; min-height: 1.5em; }

#guest-content.hidden { display: none; }
#guest-content { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
#guest-content.visible { opacity: 1; transform: translateY(0); }

.guest-header { padding: 1rem 0; background-color: var(--color-surface); border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 10px rgba(0,0,0,0.03); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); background-color: rgba(255,255,255,0.8); }
.header-container { display: flex; justify-content: space-between; align-items: center; }
h1.guest-brand-name { font-family: var(--font-heading); font-style: italic; font-size: 1.8rem; color: var(--color-text-primary); margin: 0; }
.header-user-panel { display: flex; align-items: center; gap: 1rem; }
.digital-clock { font-family: 'Roboto Mono', monospace; font-size: 1.1rem; font-weight: 500; color: var(--color-text-secondary); background-color: #f4f7f6; padding: 0.5rem 1rem; border-radius: 8px; }
.night-quiet-alert { display: none; align-items: center; gap: 0.5rem; color: #c62828; background-color: #ffcdd2; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; }
.night-quiet-alert.active { display: flex; }
.btn-logout { background: transparent; border: none; color: var(--color-text-secondary); padding: 0.5rem; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; }
.btn-logout:hover { background-color: #f1f1f1; color: var(--color-text-primary); transform: scale(1.1); }

.welcome-heading { text-align: center; margin-bottom: 3.5rem; }
.section-title { font-size: 2.8rem; font-family: var(--font-heading); }
.section-subtitle { font-size: 1.1rem; color: var(--color-text-secondary); max-width: 600px; margin: 1rem auto 0 auto; }

.guest-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; max-width: 1100px; margin: 0 auto; }
.guest-info-card { background: var(--color-surface); border-radius: var(--border-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: var(--transition-smooth); display: flex; flex-direction: column; border: 1px solid #e8e8e8; }
.guest-info-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); }

[data-aos] { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
[data-aos].aos-animate { opacity: 1; transform: translateY(0); }

.card-header { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid #e8e8e8; }
.card-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: var(--color-surface); display: flex; align-items: center; justify-content: center; }
.card-icon i { width: 24px; height: 24px; }
.guest-info-card h3 { margin: 0; font-size: 1.3rem; font-family: var(--font-body); font-weight: 600; }
.card-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; }
.guest-info-card p { font-size: 1rem; margin: 0; color: var(--color-text-secondary); }
.guest-info-card p strong { color: var(--color-text-primary); display: block; font-size: 1.1rem; }

.code-item { background-color: #f8f9fa; border: 1px solid var(--color-border); padding: 1rem; border-radius: 12px; }
.code-item label { display: block; font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 0.25rem; }
.code-value-wrapper { display: flex; align-items: center; justify-content: space-between; }
.code-item strong { font-size: 1.3rem; color: var(--color-primary); font-family: 'Roboto Mono', monospace; }
.btn-copy { background: transparent; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 4px; border-radius: 50%; }
.btn-copy:hover { background: #e0e0e0; }

.quick-actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.quick-actions .btn, .quick-actions .btn-secondary { width: 100%; }

.contact-person { text-align: left; padding: 0.75rem 0; border-bottom: 1px solid #e8e8e8; }
.contact-person:last-of-type { border-bottom: none; }
.contact-person strong { display: block; color: var(--color-text-primary); }
.contact-person span { color: var(--color-text-secondary); font-size: 0.9rem; }
.contact-main { margin-top: auto; padding-top: 1rem; border-top: 1px solid #e8e8e8; }
.contact-main p { font-size: 0.9rem !important; margin-bottom: 0.5rem !important; }
.phone-number { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: 0.75rem; background-color: var(--color-primary); color: white; padding: 0.8rem 1.5rem; border-radius: 50px; font-size: 1.1rem; font-weight: 600; text-decoration: none; transition: var(--transition-smooth); }
.phone-number:hover { background-color: #26a69a; transform: scale(1.05); }

.payment-status-badge { font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.9rem; }
.payment-status-badge.unpaid { background-color: #ffebee; color: var(--color-error); }
.payment-status-badge.deposit { background-color: #fff3e0; color: var(--color-warning); }
.payment-status-badge.paid { background-color: #e8f5e9; color: var(--color-success); }

.site-footer { background-color: #1f2937; color: #9ca3af; padding: 2rem 0; font-size: 0.95rem; margin-top: 4rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-signature { font-style: italic; opacity: 0.7; }

.gallery-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: none; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s 0.4s; background: rgba(248, 251, 251, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 2rem; }
.gallery-modal-overlay.active { display: flex; opacity: 1; visibility: visible; transition-delay: 0s; }
.gallery-modal-overlay.active .gallery-modal-content, .gallery-modal-overlay.active .extend-stay-content { transform: scale(1); opacity: 1; }
.gallery-modal-content { width: 100%; height: 100%; max-width: 1300px; max-height: 85vh; background: var(--color-surface); border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); display: flex; overflow: hidden; transform: scale(0.95); opacity: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; position: relative; }
.modal-close-btn { position: absolute; top: 1rem; right: 1rem; background: transparent; border: none; cursor: pointer; padding: 0.5rem; color: var(--color-text-secondary); z-index: 100; background: var(--color-light-gray); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.modal-close-btn:hover { transform: scale(1.1) rotate(90deg); background: var(--color-primary); color: white; }
.gallery-modal-left { width: 350px; flex-shrink: 0; padding: 3rem; display: flex; flex-direction: column; border-right: 1px solid var(--color-border); }
.gallery-header { margin-bottom: 2rem; }
.gallery-title { font-size: 2.5rem; line-height: 1.2; margin-bottom: 0.5rem; font-family: var(--font-heading); }
.gallery-category { font-size: 1rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.gallery-description { font-size: 1rem; line-height: 1.8; }
.gallery-modal-right { flex-grow: 1; display: flex; flex-direction: column; padding: 3rem; }
.gallery-image-container { flex-grow: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: #f9f9f9; }
#gallery-main-image { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transform: scale(1.05) rotate(1deg); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; }
#gallery-main-image.loaded { opacity: 1; transform: scale(1) rotate(0deg); }
.gallery-loader-main { width: 48px; height: 48px; border: 5px solid var(--color-border); border-bottom-color: var(--color-primary); border-radius: 50%; animation: rotation 1s linear infinite; position: absolute; }
.gallery-navigation { display: flex; justify-content: flex-end; align-items: center; padding-top: 1.5rem; gap: 1.5rem; }
.gallery-counter { font-family: var(--font-body); font-size: 1rem; color: var(--color-text-secondary); }
.gallery-nav-buttons { display: flex; gap: 0.5rem; }
.gallery-nav-btn { background: var(--color-light-gray); border: 1px solid var(--color-border); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-text-primary); cursor: pointer; transition: all 0.3s ease; }
.gallery-nav-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: white; transform: scale(1.1); }

.extend-stay-content {
    width: 100%;
    max-width: 500px;
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
    text-align: center;
    position: relative;
    transform: scale(0.95); opacity: 0; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.extend-stay-content h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 1rem;
}
.extend-stay-content p {
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}
.extend-form-group {
    margin-bottom: 1.5rem;
}
.extend-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.extend-form-group input {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 1.2rem;
    text-align: center;
}
#extend-result-container {
    padding: 1.5rem;
    background-color: var(--color-light-gray);
    border-radius: 12px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#extend-result-text {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}
#extend-result-text.available { color: var(--color-success); }
#extend-result-text.unavailable { color: var(--color-error); }
.modal-actions {
    margin-top: 2rem;
}

.toast-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 150%);
    background-color: var(--color-text-primary);
    color: var(--color-surface);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.toast-notification.show {
    transform: translate(-50%, 0);
    opacity: 1;
}

@media (max-width: 992px) {
    .guest-info-grid { grid-template-columns: 1fr; }
    .gallery-modal-content { flex-direction: column; height: 95vh; overflow-y: auto; }
    .gallery-modal-left { width: 100%; flex-shrink: 0; padding: 2rem; padding-top: 4rem; border-right: none; border-bottom: 1px solid var(--color-border); }
    .gallery-modal-right { padding: 2rem; }
}
@media (max-width: 768px) {
    .header-container { flex-direction: column; gap: 1rem; }
    .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center;}
    .gallery-modal-overlay { padding: 1rem; }
    .gallery-modal-content { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .gallery-modal-left { padding: 1.5rem; padding-top: 5rem; }
    .gallery-title { font-size: 2rem; }
    .gallery-modal-right { padding: 1.5rem; }
    .extend-stay-content { padding: 1.5rem; }
}
@media (max-width: 480px) {
    .header-user-panel { width: 100%; justify-content: space-between; }
    .digital-clock { font-size: 1rem; }
    .night-quiet-alert span { display: none; }
}