@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap');

/* Dark-mode conference styles based on provided palette */
:root {
    --orange-mid: #D2701B;
    --orange-light: #F1B31D;
    --blue-dark: #273E83;
    --blue-mid: #3B75C3;
    --gray-light: #B1B3B6;
    --gray-mid: #808285;
    --gray-dark: #1e1f21;
    --muted: #9aa0a6;

    /* Kolory konferencji */
    --conf-bg: #5f636c;
    --conf-card-bg: #35383d;
    --conf-text: #c9ccd0;
    --conf-primary: #81160c;
    --conf-primary-light: #d2372a;
    --conf-secondary: #2b4081;
    --conf-secondary-light: #5b79c8;
}


html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    /* For older browsers that do not support gradients
    background-image: linear-gradient(to bottom, #2f2b41, #202c4e, #4a1f57);*/
    background-color: var(--conf-bg);
    height: 100%;
    margin: 0;
    /* For modern browsers */
    /*background-image: linear-gradient(to bottom, #342e4b, #002a6e, #562a91);*/

}

.card-conference {
    background-color: var(--conf-card-bg);
    color: var(--conf-text);
    --bs-heading-color: var(--conf-secondary-light);
}

html, body {
    background-color: var(--conf-bg);
    color: #e7e9ea;
    height: 100%;
}

/* Hero header with optional background image and dark overlay for readability */
.conference-header{
    background-color: #0b0c0d; /* fallback solid color */
    color: #fff;
    position: relative;
    overflow: hidden;
}

.conference-header::before {
    /* dark overlay to ensure text readability over image */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(6, 8, 10, 0.6), rgba(10, 12, 16, 0.8));
    pointer-events: none;
    z-index: 0;
}

/* Ensure container content is above overlay */
.conference-header > .container, .conference-header nav {
    position: relative;
    z-index: 1;
}

.conference-header {
    background: linear-gradient(90deg, rgba(15, 18, 25, 1), rgba(30, 35, 60, 1));
    color: #fff;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.conf-logo {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    /*background: linear-gradient(135deg, var(--blue-mid), var(--orange-mid));*/
    display: inline-block;
}

.logo-giant {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-giant img {
    max-width: 100%;
    height: auto;
}

.conf-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
}

.conf-title-large {
    font-weight: 700;
    font-size: 3rem;
}

.text-primary {
    color: var(--conf-primary) !important;
}

.navbar {
    background: transparent;
}

.nav-pills .nav-link {
    color: var(--gray-light);
}

.nav-pills .nav-link.active, .nav-pills .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.container.my-4 {
    max-width: 1100px;
}

/* Cards */
.card-conference {
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 18px;
}

.qr-placeholder {
    width: 180px;
    height: 180px;
    background: linear-gradient(180deg, var(--gray-mid), var(--gray-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-dark);
    border-radius: 8px;
}

.placeholder-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 600;
}

.list-group-item {
    background: rgba(255, 255, 255, 0.02);
    border: none;
    margin-bottom: 10px;
    border-radius: 8px;
}

.list-group-item strong {
    color: var(--orange-light);
}

.btn-primary {
    --bs-btn-bg: var(--conf-primary);
    --bs-btn-border-color: var(--conf-primary);
    --bs-btn-hover-bg: var(--conf-primary-light);
}

.btn-secondary {
    --bs-btn-bg: var(--conf-secondary);
    --bs-btn-border-color: var(--conf-secondary);
    --bs-btn-hover-bg: var(--conf-secondary-light);
}

.btn-outline-secondary {
    --bs-btn-color: var(--conf-secondary-light);
    --bs-btn-border-color: var(--conf-secondary-light);
    --bs-btn-hover-bg: var(--conf-secondary);
    --bs-btn-hover-border-color: var(--conf-secondary);
}

.card-conference a:not(.btn) {
    color: var(--conf-primary-light);
}

.card-conference a:not(.btn):hover {
    color: var(--conf-primary);
}

/* --- Form Control Overrides --- */
/* Generic styles for all form inputs within a conference card */
.card-conference .form-control,
.card-conference .form-select {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #e8eaec !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.card-conference .form-control::placeholder {
    color: #9aa0a6 !important;
}

/* Disabled inputs should remain readable but visually disabled */
.card-conference .form-control[disabled],
.card-conference .form-select[disabled] {
    background-color: rgba(255, 255, 255, 0.015) !important;
    color: #c9ccd0 !important;
    opacity: 1 !important;
}

/* Make checkbox/radio accent match conference palette */
.card-conference .form-check-input {
    accent-color: var(--orange-mid);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

label {
    color: var(--gray-light);
}

.form-text {
    color: var(--muted);
}

/* Small helpers for crispy form spacing inside card */
.card-conference .form-group, .card-conference .mb-3 {
    margin-bottom: 0.85rem;
}

/* Make muted text inside conference cards brighter for readability */
.card-conference .text-muted {
    color: #c9ccd0 !important; /* lighter muted shade for contrast */
}

footer {
    color: var(--muted);
}

/* Footer KPM logo sizing (smaller and responsive) */
.kpm-logo-footer {
    height: 40px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 700px) {
    .kpm-logo-footer {
        height: 32px;
    }
}

/* Make footer text lighter for contrast */
footer .text-muted {
    color: #d4d7d9 !important;
}

@media (max-width: 800px) {
    .conf-logo {
        width: 44px;
        height: 44px;
    }

    .qr-placeholder {
        width: 140px;
        height: 140px;
    }

    /* center hero/logo on small screens */
    .brand {
        justify-content: center !important;
    }

    .conf-title {
        display: none;
    }

    .logo-giant {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .conf-logo {
        width: 40px;
        height: 40px;
    }

    .conf-title {
        font-size: 1rem;
    }
}