@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@400;500&display=swap";

:root {
--accent-color:#d84315;
--bg-color:#f3e5d0;
--primary-color:#8d6e63;
--text-color:#3e2723;
--white:#fff
}

body {
background-color:var(--bg-color);
background-image:radial-gradient(#d7ccc8 1px,transparent 1px);
background-size:20px 20px;
color:var(--text-color);
font-family:'Roboto',sans-serif;
line-height:1.6;
margin:0;
padding:20px
}

.main-container {
background:var(--white);
border-radius:12px;
border-top:6px solid var(--accent-color);
box-shadow:0 4px 15px #0000001a;
margin:0 auto;
max-width:800px;
overflow:hidden
}

.tour-header {
align-items:center;
background:var(--primary-color);
color:var(--white);
display:flex;
justify-content:space-between;
padding:15px 20px
}

.tour-header .logo {
font-family:'Playfair Display',serif;
font-size:1.2rem;
font-weight:700
}

.audio-wrapper {
background:#efebe9;
border-bottom:1px solid #d7ccc8;
padding:15px;
text-align:center
}

.custom-audio {
height:40px;
max-width:400px;
outline:none;
width:100%
}

.content-box {
padding:20px
}

h1,h2 {
color:var(--text-color);
font-family:'Playfair Display',serif;
margin-top:0
}

img.responsive-img {
border:1px solid #ccc;
border-radius:8px;
height:auto;
margin-bottom:15px;
width:100%
}

input[type="email"] {
border:2px solid #ccc;
border-radius:6px;
box-sizing:border-box;
font-size:1rem;
margin:10px 0;
padding:12px;
width:100%
}

.radio-group label {
background:#fafafa;
border:1px solid #ddd;
border-radius:6px;
cursor:pointer;
display:block;
margin-bottom:8px;
padding:12px;
transition:background .2s
}

.radio-group label:hover {
background:#eee
}

.radio-group input {
margin-right:10px
}

.nav-buttons {
background:#fafafa;
border-top:1px solid #eee;
display:flex;
gap:10px;
justify-content:space-between;
padding:20px
}

.btn {
border:none;
border-radius:6px;
cursor:pointer;
flex:1;
font-size:1rem;
font-weight:500;
padding:12px 24px
}

.btn-primary {
background-color:var(--accent-color);
color:#fff
}

.btn-secondary {
background-color:#bcaaa4;
color:#fff
}

.alert.error {
background:#ffcdd2;
border-bottom:1px solid #ef9a9a;
color:#c62828;
padding:10px;
text-align:center
}

.video-container {
background:#000;
border-radius:8px;
box-shadow:0 4px 10px #0003;
height:0;
margin:20px 0;
max-width:100%;
overflow:hidden;
padding-bottom:56.25%;
position:relative
}

.video-container iframe {
border:0;
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}

[class*="img-"] {
border-radius:8px;
box-shadow:0 4px 6px #0000001a;
display:block;
height:auto;
margin:15px auto
}

.img-10 {
width:10%
}

.img-20 {
width:20%
}

.img-30 {
width:30%
}

.img-40 {
width:40%
}

.img-50 {
width:50%
}

.img-60 {
width:60%
}

.img-70 {
width:70%
}

.img-80 {
width:80%
}

.img-90 {
width:90%
}

@media (max-width: 600px) {
[class*="img-"] {
width:100%!important
}
}

[class*="img-"],.zoom-img,.responsive-img {
backface-visibility:hidden;
cursor:pointer;
transition:transform .3s ease-in-out
}

[class*="img-"]:hover,.zoom-img:hover,.responsive-img:hover {
box-shadow:0 8px 15px #0003;
transform:scale(1.02);
z-index:10
}

.sponsors-wrapper {
background-color:#faf8f5;
border:1px solid #e0dcd3;
border-radius:12px;
margin-top:40px;
padding:20px
}

.sponsors-title {
color:var(--accent-color,#d84315);
font-family:'Playfair Display',serif;
font-size:1.5rem;
margin-bottom:10px;
text-align:center
}

.fancy-line {
background-image:linear-gradient(to right,#0000,#8d6e63bf,#0000);
border:0;
height:1px;
margin-bottom:30px
}

.sponsors-grid {
display:grid;
gap:20px;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
text-align:center
}

.sponsor-card {
align-items:center;
background:#fff;
border-radius:8px;
box-shadow:0 2px 5px #0000000d;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:15px;
transition:transform .3s ease
}

.sponsor-card:hover {
box-shadow:0 5px 15px #0000001a;
transform:translateY(-5px)
}

.sponsor-name {
color:#4a3b2a;
font-weight:700;
margin:0 0 5px
}

.sponsor-desc {
color:#666;
font-size:.85rem;
font-style:italic;
margin:0 0 15px
}

.sponsor-logo {
height:auto;
max-width:100%;
object-fit:contain;
width:120px
}

.sponsor-card {
align-items:center;
background:#fff;
border-radius:8px;
box-shadow:0 2px 5px #0000000d;
color:inherit;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:15px;
text-decoration:none;
transition:transform .3s ease,box-shadow .3s ease
}

.sponsor-card:hover {
box-shadow:0 8px 20px #00000026;
transform:translateY(-5px)
}

.story-section {
background-color:#fff;
border-radius:10px;
box-shadow:0 4px 15px #00000014;
line-height:1.7;
margin-bottom:30px;
padding:25px
}

.product-header {
align-items:center;
border-bottom:2px solid #e0dcd3;
display:flex;
flex-direction:column;
margin-bottom:20px;
padding-bottom:15px
}

.section-title {
color:var(--primary-color,#4a3b2a);
font-family:'Playfair Display',serif;
font-size:1.8rem;
margin:0 0 15px;
text-align:center
}

.buy-btn {
background-color:var(--accent-color,#d84315);
border-radius:30px;
box-shadow:0 4px 6px #d843154d;
color:#fff;
font-weight:700;
letter-spacing:1px;
padding:12px 25px;
text-decoration:none;
text-transform:uppercase;
transition:background 0.3s,transform .2s
}

.buy-btn:hover {
background-color:#bf360c;
transform:translateY(-2px)
}

.story-text p {
color:#444;
margin-bottom:15px;
text-align:justify
}

.text-link {
border-bottom:1px dotted currentColor;
color:var(--accent-color,#d84315);
font-weight:700;
text-decoration:none
}

.text-link:hover {
border-bottom-style:solid
}

.cheers-text {
color:var(--primary-color,#4a3b2a);
font-family:'Playfair Display',serif;
font-size:1.5rem;
font-style:italic;
margin-top:20px;
text-align:center
}

.message-box {
background-color:#fcfbf9;
border:1px solid #d7ccc8;
border-left:5px solid var(--accent-color,#d84315);
border-radius:8px;
margin-top:20px;
padding:20px;
position:relative
}

.message-box::before {
color:#d843151a;
content:'”';
font-family:serif;
font-size:5rem;
line-height:1;
position:absolute;
right:20px;
top:-10px
}

.message-content {
color:#5d4037;
font-style:italic;
text-align:center
}

.message-line {
margin-bottom:8px
}

.message-line.highlight {
color:var(--accent-color,#d84315);
font-size:1.1rem;
font-weight:700;
margin-top:10px
}

.station-card {
overflow:hidden;
padding-top:0
}

.station-image-wrapper {
margin:-20px -20px 20px
}

.sub-title {
border-left:4px solid var(--accent-color,#d84315);
color:var(--primary-color,#4a3b2a);
font-family:'Playfair Display',serif;
margin-top:20px;
padding-left:10px
}

.location-banner {
align-items:flex-start;
background-color:#fff8e1;
border:1px solid #ffe0b2;
border-radius:8px;
display:flex;
gap:15px;
margin-bottom:20px;
padding:15px
}

.nav-icon-small {
color:var(--accent-color,#d84315);
flex-shrink:0
}

.nav-link {
color:var(--accent-color,#d84315);
font-size:.9rem;
font-weight:700;
text-transform:uppercase
}

.warning-text {
background:#f5f5f5;
border-left:3px solid #757575;
border-radius:5px;
color:#555;
font-size:.95rem;
padding:10px
}

.benedek-quote {
background-color:#8d6e631a;
border-radius:0 15px 0 15px;
color:#5d4037;
font-family:'Playfair Display',serif;
font-style:italic;
margin:15px 0;
padding:15px;
position:relative
}

.benedek-quote::before {
color:#5d403733;
content:"„";
font-size:3rem;
left:5px;
line-height:1;
position:absolute;
top:-10px
}

.inscription-box {
.answers-containerbackground:#fff;
border:2px solid #a1887f;
border:1px solid #e0e0e0;
border-radius:5px;
border-radius:8px;
margin:30px 0;
overflow:hidden;
padding:20px;
text-align:center
}

.answer-row {
align-items:center;
border-bottom:1px solid #eee;
display:flex;
padding:12px 15px
}

.answer-row:nth-child(even) {
background-color:#faf8f5
}

.answer-row:last-child {
border-bottom:none
}

.answer-number {
color:var(--accent-color,#d84315);
flex-shrink:0;
font-weight:700;
width:30px
}

.answer-text {
color:#4a3b2a;
font-weight:500
}

.code-input {
border:2px solid #ddd;
border-radius:6px;
box-sizing:border-box;
color:#333;
font-size:1.2rem;
font-weight:700;
letter-spacing:2px;
padding:12px;
text-transform:uppercase;
width:100%
}

.code-input:focus {
border-color:#fbc02d;
box-shadow:0 0 5px #fbc02d80;
outline:none
}

.help-btn {
background-color:#8d6e63;
border:none;
border-radius:4px;
color:#fff;
cursor:pointer;
font-size:.9rem;
padding:8px 15px;
transition:background .3s
}

.help-btn:hover {
background-color:#6d4c41
}

.secret-box {
animation:fadeIn .5s;
background-color:#fffde7;
border:1px dashed #fbc02d;
border-radius:4px;
margin-top:15px;
padding:10px;
text-align:center
}

.decoded-text {
color:#d84315;
font-family:'Courier New',monospace;
font-size:1.5rem;
font-weight:700;
letter-spacing:3px;
margin-top:5px
}

@keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

input[type="checkbox"] {
accent-color:#2196F3;
cursor:pointer;
height:20px;
margin-right:10px;
vertical-align:middle;
width:20px
}

.code-input {
border:2px solid #ddd;
border-radius:6px;
box-sizing:border-box;
color:#333;
font-size:1.1rem;
font-weight:700;
letter-spacing:1px;
padding:12px;
text-transform:uppercase;
transition:border-color .3s;
width:100%
}

.code-input:focus {
border-color:#fbc02d;
box-shadow:0 0 8px #fbc02d4d;
outline:none
}

.help-btn {
background-color:#8d6e63;
border:none;
border-radius:20px;
box-shadow:0 2px 5px #0003;
color:#fff;
cursor:pointer;
font-size:.95rem;
font-weight:700;
padding:10px 20px;
transition:background 0.3s,transform .2s
}

.help-btn:hover {
background-color:#6d4c41;
transform:translateY(-2px)
}

.secret-box {
animation:fadeIn .5s;
background-color:#fffde7;
border:1px dashed #fbc02d;
border-radius:8px;
margin-top:20px;
padding:15px;
text-align:center
}

.responsive-video-container {
    width: 100%;
    margin: 20px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden; 
    background-color: #000;
}

.responsive-video-container video {
    width: 100%;    
    height: auto;   
    display: block; 
}

@keyframes fadeIn {
from {
opacity:0;
transform:translateY(-5px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@media (max-width: 600px) {
.tour-header {
flex-direction:column;
gap:5px;
text-align:center
}

.nav-buttons {
flex-direction:column
}

.btn {
width:100%
}
}