html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #55D3BB;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: 'Segoe UI', sans-serif;
    background-color: #fff;
}

/* ===== Fejlesztői banner ===== */
.dev-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, #262E6A, #55D3BB);
    color: #fff;
    text-align: center;
    padding: 0.75rem;
    font-weight: 500;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
    z-index: 1050;
}

/* ===== Program, napok ===== */
.day-header {
    background: linear-gradient(to right, #55D3BB, #262E6A);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 2px 6px #55D3BB;
    margin-bottom: 1rem;
}

.day-section {
    margin-bottom: 2rem;
}

.day-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
    border-bottom: 2px solid #55D3BB;
    padding-bottom: 0.25rem;
}

.event-card {
    border-left: 5px solid #55D3BB;
    background-color: #ffffff;
    padding: 1rem;
    margin: 0.5rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

    .event-card.optional {
        border-left: 3px dashed #262E6A;
        background-color: #f0f0f0;
        color: #444;
    }

.event-time {
    font-weight: bold;
    color: #55D3BB;
    margin-bottom: 0.25rem;
}

.event-title {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.event-location {
    font-style: italic;
    font-size: 0.9rem;
    color: #777;
}

.location-chip {
    display: inline-block;
    background-color: rgba(38, 46, 106, 0.5);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 100px;
}

.optional-chip {
    display: inline-block;
    background-color: #262E6A;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 100px;
}
    .optional-chip.workshop-chip {
        background-color: #55D3BB;
    }

    .optional-chip.spiritual-chip {
        background-color: #5FD3A2;
    }

    .optional-chip.long-workshop-chip {
        background-color: #1E7F84;
    }

    .optional-chip.free-time-chip {
        background-color: #4FB0C6;
    }

@media (max-width: 600px) {
    .event-card {
        padding: 0.75rem;
    }

    .day-title {
        font-size: 1.25rem;
    }

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

/* ===== Challenge, health, program boxok ===== */
.challenge, .health, .program {
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
    overflow: hidden;
    background-color: #fff;
}

.challenge {
    max-width: 400px;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #55D3BB, #262E6A);
    color: white;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.challenge-header {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
}

.challenge-content {
    font-size: 1.2rem;
}

.program-header {
    background: linear-gradient(to right, #55D3BB, #262E6A);
    color: white;
    padding: 12px 20px;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 2px 6px #55D3BB;
}

.health-header {
    font-weight: bold;
    color: #55D3BB;
    border-left: 5px solid #55D3BB;
    padding-left: 1rem;
}

.health-content, .program_content {
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    border-left: 5px solid #55D3BB;
    font-size: 1.1rem;
}

.health-content {
    padding-left: 1rem;
}

.program-content {
    padding: 1rem 1.25rem;
}

@media (max-width: 600px) {
    .challenge-content, .health-content {
        padding: 0.75rem 1rem;
    }

    .challenge-header, .health-header {
        font-size: 1.25rem;
        padding: 10px 16px;
    }
}

/* ===== Bootstrap btn felülírások ===== */
.btn-info {
    background-color: #55D3BB;
    border-color: #55D3BB;
    color: white;
}

    .btn-info:hover, .btn-info:focus {
        background-color: #3fa796;
        border-color: #3fa796;
        color: white;
    }

.btn-success {
    background-color: #262E6A;
    border-color: #262E6A;
    color: white;
}

    .btn-success:hover, .btn-success:focus {
        background-color: #1b224d;
        border-color: #1b224d;
        color: white;
    }

/* ===== Kártyák ===== */
.card {
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background-color: #fff;
    border: 2px solid #55D3BB;
}

    .card .card-title {
        color: #55D3BB;
        font-weight: 700;
    }

    .card .card-text {
        color: #333;
    }

    .card.shadow-sm {
        box-shadow: 0 2px 8px rgba(85, 211, 187, 0.25);
    }

/* ===== Badge ===== */
.badge.bg-success {
    background-color: #55D3BB;
}

.badge-success-custom {
    background-color: #55D3BB;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    padding: 0.35em 0.6em;
}

/* ===== Workshop dátum gombok ===== */
.btn-outline-custom {
    color: #55D3BB;
    border: 2px solid #55D3BB;
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

    .btn-outline-custom:hover,
    .btn-outline-custom:focus,
    .btn-outline-custom.active {
        color: white;
        background: #55D3BB;
        border-color: #55D3BB;
    }

/* ===== Workshop részletek gombok ===== */
.btn-info-custom {
    background-color: #55D3BB;
    border-color: #55D3BB;
    color: white;
    font-weight: 500;
    transition: background-color 0.3s ease;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
}

    .btn-info-custom:hover,
    .btn-info-custom:focus {
        background-color: #3fa796;
        border-color: #2e7f6d;
        color: white;
    }

.btn-success-custom {
    background-color: #262E6A;
    border-color: #262E6A;
    color: white;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    transition: background-color 0.3s ease;
}

    .btn-success-custom:hover,
    .btn-success-custom:focus {
        background-color: #1b224d;
        border-color: #141a39;
        color: white;
    }

/* ===== Kártya border ===== */
.border-custom {
    border: 2px solid #55D3BB !important;
    border-radius: 12px;
}

/* ===== Workshop cím ===== */
.text-success-custom {
    color: #55D3BB;
    font-weight: 700;
}

/* ===== Section címek ===== */
.custom-title-container {
    margin-bottom: 1.5rem;
    text-align: center;
    position: relative;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.custom-title {
    font-size: 2rem;
    font-weight: 700;
    color: #55D3BB;
    position: relative;
    display: inline-block;
    padding-bottom: 0.3rem;
}

.custom-title-underline {
    height: 6px;
    width: 120px;
    background: linear-gradient(to right, #55D3BB, #262E6A);
    border-radius: 3px;
    margin: 0.3rem auto 0;
    box-shadow: 0 3px 8px rgba(85, 211, 187, 0.5);
}

@media (max-width: 600px) {
    .custom-title {
        font-size: 1.5rem;
    }

    .custom-title-underline {
        width: 80px;
        height: 4px;
    }
}

/* ===== PDF és link gombok ===== */
.pdf-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto 2rem auto;
}

.btn-pdf {
    flex: 1 1 120px;
    text-align: center;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    background: linear-gradient(45deg, #55D3BB, #262E6A);
    box-shadow: 0 4px 10px rgba(38, 46, 106, 0.5);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    border: none;
    display: inline-block;
}

    .btn-pdf:hover,
    .btn-pdf:focus {
        background: linear-gradient(45deg, #3fa796, #1b224d);
        box-shadow: 0 6px 14px rgba(27, 34, 77, 0.7);
        color: white;
        outline: none;
    }

@media (max-width: 480px) {
    .btn-pdf {
        flex: 1 1 100%;
    }
}

/* ===== Link gomb ===== */
.link-button a {
    display: inline-block;
    padding: 10px 18px;
    margin: 15px 20px;
    background: #55D3BB;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

    .link-button a:hover {
        background: #3fa796;
        transform: translateY(-2px);
    }

    .link-button a:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

/* ===== Custom link ===== */
.custom-link a {
    color: #55D3BB;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.25rem;
}

    .custom-link a:hover {
        text-decoration: underline;
    }

/* ===== Képek ===== */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Elérhetőségek (telefon gombok) ===== */
.btn-tel {
    flex: 1 1 200px;
    text-align: center;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    background: linear-gradient(to top, #262E6A, #55D3BB); /* megfordított gradiens */
    box-shadow: 0 4px 10px rgba(85, 211, 187, 0.5);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    border: none;
    display: inline-block;
}

    .btn-tel:hover,
    .btn-tel:focus {
        background: linear-gradient(to top, #1b224d, #3fa796);
        box-shadow: 0 6px 14px rgba(27, 34, 77, 0.7);
        color: white;
        transform: translateY(-2px);
        outline: none;
    }

    .btn-tel strong {
        font-size: 1.1rem;
    }

@media (max-width: 480px) {
    .btn-tel {
        flex: 1 1 100%;
    }
}
.sub-event {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed rgba(85, 211, 187, 0.4); /* halvány elválasztó */
}

    .sub-event:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .sub-event .event-title {
        display: block;
        margin-bottom: 0.4rem;
    }

    .sub-event .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
.location-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: flex-start;
    overflow: hidden;
}

/* Mobilbarát: egymás alá ugrik */
@media (max-width: 768px) {
    .location-grid {
        grid-template-columns: 1fr;
    }
}

.location-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-box {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

    .info-box i {
        color: #26326a;
        font-size: 1.4rem;
        margin-right: 10px;
    }

.map-responsive {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.btn-primary {
    background: linear-gradient(to top, #262E6A, #55D3BB); /* megfordított gradiens */
    box-shadow: 0 4px 10px rgba(85, 211, 187, 0.5);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .btn-primary:hover {
        background: linear-gradient(to top, #1b224d, #3fa796);
        box-shadow: 0 6px 14px rgba(27, 34, 77, 0.7);
        transform: translateY(-2px);
    }

.alert-custom {
    background-color: #f0f4ff; /* világoskék háttér */
    border-left: 5px solid #26466a; /* kiemelő sáv */
    padding: 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #1a1a1a;
}
.btn-gradient-border {
    position: relative;
    border-radius: 12px;
    padding: 0.5rem 1.5rem;
    background-color: white; /* belső szín */
    color: #000;
    font-weight: 500;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

    .btn-gradient-border::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 3px; /* szegély vastagság */
        background: linear-gradient(to top, #262E6A, #55D3BB);
        border-radius: 12px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }

    .btn-gradient-border:hover::before {
        background: linear-gradient(to top, #1b224d, #3fa796);
    }

    .btn-gradient-border:hover {
        color: #3fa796;
    }
@media (max-width: 768px) {
    main {
        display: block !important; /* ne flexbox legyen */
        min-height: auto !important; /* ne fix 100vh */
        padding: 1rem 0.5rem !important;
    }

        main section {
            margin: 0 auto; /* középre igazítás */
        }

    .responsive-img {
        width: 100% !important; /* teljes szélesség */
        height: auto;
    }
}