/* =======================================================
   OPSO Visitor Navigator v6
======================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#4b4d2f;
}

#app{
    width:100%;
    height:100%;
}

/* ---------- HOME ---------- */

.home{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    cursor:pointer;
}

.logo{
    width:210px;
    margin-bottom:30px;
}

.home h1{
    color:#FFD21F;
    font-size:64px;
    line-height:1.05;
    letter-spacing:2px;
}

.home h2{
    margin-top:20px;
    font-size:34px;
    font-weight:300;
}

.touchMessage{
    margin-top:70px;
    font-size:30px;
    opacity:.75;
    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{opacity:.3;}

    50%{opacity:1;}

    100%{opacity:.3;}

}

/* ---------- GENERAL ---------- */

.screen{

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    background:#4b4d2f;

    color:white;

}

.header{

    height:110px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 45px;

}

.header h1{

    color:#FFD21F;

    font-size:56px;

}

.homeButton{

    background:#FFD21F;

    color:#333;

    border:none;

    border-radius:12px;

    padding:18px 35px;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;

}

.mainButton{
    width:min(700px,90%);
    min-height:90px;
    margin:18px auto;
    padding:22px 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#ffffff,#f3f3f3);
    border:none;
    border-left:8px solid #d4af37;
    border-radius:18px;
    color:#23411f;
    font-size:30px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.mainButton:hover{
    transform:translateY(-3px);
    background:white;
    box-shadow:0 16px 32px rgba(0,0,0,.25);
}

.mainButton:active{
    transform:scale(.98);
}

/* ---------- CATEGORY ---------- */

.buttonGrid{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:28px;

}

.categoryButton{

    width:700px;

    padding:28px;

    border:none;

    border-radius:18px;

    font-size:34px;

    cursor:pointer;

    background:white;

    transition:.2s;

}

.categoryButton:hover{

    transform:scale(1.03);

}

/* ---------- SERVICES ---------- */

.serviceGrid{

    flex:1;

    overflow-y:auto;

    padding:35px;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.serviceButton{

    border:none;

    border-radius:18px;

    background:white;

    cursor:pointer;

    padding:28px;

    text-align:left;

    transition:.2s;

}

.serviceButton:hover{

    transform:scale(1.02);

}

.serviceButton span{

    display:block;

    font-size:34px;

    font-weight:bold;

    color:#222;

}

.serviceButton small{

    display:block;

    margin-top:8px;

    color:#666;

    font-size:22px;

}

.backButton{

    margin-top:25px;

    width:240px;

    padding:18px;

    border:none;

    border-radius:14px;

    background:#FFD21F;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;

}

/* ---------- MAP ---------- */

.mapScreen{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    background:#4b4d2f;

    color:white;

}

.mapHeader{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:30px;

}

.mapHeader h1{

    color:#FFD21F;

    font-size:54px;

}

.mapHeader h2{

    margin-top:10px;

    font-size:30px;

    color:white;

}

.mapHeader p{

    margin-top:10px;

    font-size:22px;

    color:#ddd;

}

.mapWrapper{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.routeMap{

    max-width:96%;

    max-height:100%;

    object-fit:contain;

    border-radius:12px;

    box-shadow:0 0 25px rgba(0,0,0,.45);

}

.bottomNav{

    display:flex;

    justify-content:center;

    gap:25px;

    padding:25px;

}

.bottomNav button{

    width:260px;

    padding:22px;

    font-size:28px;

    font-weight:bold;

    border:none;

    border-radius:16px;

    background:#FFD21F;

    cursor:pointer;

}/* ==========================================
   PRODUCTION HEADER
========================================== */

.topBar{
    height:90px;
    background:linear-gradient(90deg,#23411f,#305b29);
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    box-shadow:0 4px 18px rgba(0,0,0,.30);
    border-bottom:4px solid #d4af37;
    box-sizing:border-box;
}

.topLeft{
    display:flex;
    align-items:center;
    gap:15px;
}

.topLogo{
    width:60px;
    height:60px;
    object-fit:contain;
}

.topTitle{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.topTitle h2{
    margin:0;
    font-size:32px;
    font-weight:700;
    letter-spacing:.3px;
}

.topTitle p{
    margin:2px 0 0;
    font-size:18px;
    opacity:.9;
}

.topButtons{
    display:flex;
    gap:12px;
}

.navButton{
    background:#d4af37;
    color:#23411f;
    border:none;
    border-radius:14px;
    padding:14px 28px;
    font-size:22px;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.navButton:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.contentArea{
    height:calc(100vh - 72px);
    overflow:hidden;
}

.welcomeMessage{
    margin-top:25px;
    font-size:22px;
    color:white;
    opacity:.88;
    max-width:650px;
    line-height:1.5;
    margin-left:auto;
    margin-right:auto;
}

/* ==========================================   PRODUCTION PAGE LAYOUT========================================== */.pageContent{    width:min(1200px,92%);    margin:30px auto;}.pageHeading{    text-align:center;    margin-bottom:30px;}.pageHeading h1{    font-size:52px;    color:#d4af37;    margin:0;    font-weight:700;}.pageHeading p{    color:white;    font-size:24px;    opacity:.9;    margin-top:10px;}.contentCard{    background:white;    border-radius:20px;    padding:30px;    box-shadow:0 12px 35px rgba(0,0,0,.25);}.bottomNav{    display:flex;    justify-content:space-between;    margin-top:30px;}
/* ==========================================   DIRECTION SCREEN========================================== */.directionCard{    background:white;    border-radius:20px;    padding:24px 30px;    margin:20px auto;    max-width:1100px;    box-shadow:0 10px 30px rgba(0,0,0,.25);}.directionTitle{    font-size:38px;    font-weight:700;    color:#23411f;    margin-bottom:15px;}.directionInfo{    display:flex;    flex-wrap:wrap;    gap:30px;    font-size:24px;    margin-bottom:20px;}.infoBlock{    flex:1;    min-width:220px;}.infoLabel{    font-size:18px;    color:#666;    text-transform:uppercase;    letter-spacing:1px;    margin-bottom:6px;}.infoValue{    font-size:28px;    font-weight:700;    color:#23411f;}.mapTitle{    text-align:center;    color:white;    font-size:28px;    margin:20px 0;}
/* ==========================================   PROGRESS BAR========================================== */.progressContainer{    display:flex;    justify-content:center;    align-items:center;    gap:18px;    margin-top:12px;}.progressStep{    display:flex;    align-items:center;    gap:10px;}.progressDot{    width:18px;    height:18px;    border-radius:50%;    background:#8a8a8a;    transition:.3s;}.progressDot.active{    background:#d4af37;    box-shadow:0 0 12px rgba(212,175,55,.6);}.progressLine{    width:45px;    height:4px;    background:#8a8a8a;    border-radius:2px;}.progressLine.active{    background:#d4af37;}.progressLabels{    display:flex;    justify-content:center;    gap:38px;    margin-top:10px;    color:white;    font-size:14px;    opacity:.9;}