:root{
    --bg:#f0f9ff; --card:#ffffff; --muted:#4b5563; --text:#1f2937; --acc:#f97316; --ok:#16a34a; --warn:#d97706; --err:#dc2626;
    --radius:18px;
    --bg-mobile:  url('https://cretanholidays.s3.eu-west-1.wasabisys.com/Bus-DD-mobile.png');
}
*{box-sizing:border-box}
body {
    margin:0;
    font:16px/1.5 'Segoe UI', Roboto, sans-serif;
    color:var(--text);
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:24px;
    background-image: url('https://cretanholidays.s3.eu-west-1.wasabisys.com/Bus-50.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    position:relative;
}



@media (orientation: portrait) and (max-width: 768px){

    html, body {
        height:auto;              /* stop forcing exactly 100% */
        min-height:100svh;        /* or 100dvh for “dynamic” */
        /*overflow:hidden;*/          /* keep if you truly want no scroll */
    }
    body{
        background-image: var(--bg-mobile);
        background-size: contain;   /* make sure it fills */
        background-position: center top; /* δώσε «ανάσα» προς ουρανό */
        background-attachment: scroll;   /* πιο smooth σε iOS/Android */
        align-items: flex-end;  /* όχι vertical center */
        padding:0!important;

    }
 .action-tripadvisor{
     width: 97%;
 }
    @supports (-webkit-touch-callout: none) {
        @media (orientation: portrait) and (max-width: 768px){
            html, body { min-height: -webkit-fill-available; }
            body { min-height: -webkit-fill-available; }
        }
    }

    .dropdown-menu {
        top: auto!important;        /* cancel "below" */
        bottom: 100%!important;     /* anchor above button */
        margin-top: 0!important;
        margin-bottom: 6px!important;
    }

    .wrap{width:min(900px, 100%); backdrop-filter:blur(0px)!important;}
    #bgBtn {display: none;}
}


.wrap{width:min(900px, 100%); backdrop-filter:blur(14px);}
.header{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:center;
    margin-bottom:20px;
    margin: 10px;
}
.title h1{font-size:clamp(22px, 4vw, 26px); margin:10px 0; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5)}
.title p{margin:0; color:#f0f9ff; font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,.6)}

.lang-switch{display:flex; gap:8px; align-self:start}
.lang-btn{border:1px solid #cbd5e1; background:#fff; padding:8px 10px; border-radius:10px; cursor:pointer; font-size:18px}
.lang-btn.active{outline:3px solid rgba(249,115,22,.35)}
@media (prefers-color-scheme: dark){ .lang-btn{ background:#0b141b; border-color:#21303b; color:#e5eef6; } }

.card{background:rgba(255,255,255,.95); border-radius:var(--radius); padding: 35px 20px 35px 20px; box-shadow:0 10px 30px rgba(0,0,0,.3);    }
.search {
    display:grid;
    grid-template-columns:1fr auto auto auto;
    gap:10px;
}

@media (max-width: 600px){
    .search{
        display:grid;
        grid-template-columns: 1fr auto;        /* 2 columns */
        grid-template-areas:
      "input  clear"
      "search info";
        gap:10px;
        align-items:center;
    }

    .search .field      { grid-area: input; }
    .search .btn-search { grid-area: search; width:auto; }
    .search .info-btn   { grid-area: info;   width:auto; }
    .search .btn-clear  { grid-area: clear;  width:100%; }

    /* override any previous mobile rule that stacked all buttons 100% width */
    .search .btn,
    .search .btn-clear,
    .search .info-btn { width:auto; }
}

.field{position:relative}
.field input{width:100%; padding:14px; border-radius:14px; outline:0; border:1px solid #cbd5e1; background:#fff; color:var(--text); font-size:16px;}
.btn{padding:14px 18px; border-radius:14px; border:0; cursor:pointer; font-weight:700; font-size:16px; color:#fff; background:linear-gradient(135deg, #f97316, #ea580c); box-shadow:0 5px 20px rgba(249,115,22,.4);}
.btn-clear{padding:14px 18px; border-radius:14px; border:0; cursor:pointer; font-weight:700; font-size:16px; color:#374151; background:#e5e7eb;}
.info-btn{padding:14px 18px; border-radius:14px; border:0; cursor:pointer; font-weight:700; font-size:16px; color:#fff; background:#1651f9;}
.results{margin-top:20px;}
.result-card{background:#fff; border-radius:16px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.15)}
.badge{padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;}
.badge.ok{background:#dcfce7; color:var(--ok)}
.badge.warn{background:#fef9c3; color:var(--warn)}
.badge.cancel{background:#fee2e2; color:var(--err)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:12px}
.row{font-size:16px}
.label{color:var(--muted); font-size:14px}
.big{font-size:16px; font-weight:700}
.actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; position:relative}
.action{padding:10px 12px; border-radius:12px; background:#f1f5f9; color:var(--text); text-decoration:none; font-size:14px; cursor:pointer}
.action-tripadvisor{padding:10px 12px; border-radius:12px; background:#22EB5B; color:var(--text); text-decoration:none; font-size:14px; cursor:pointer}
.dropdown{position:relative}
.dropdown-menu{display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #cbd5e1; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.15); margin-top:4px; min-width:180px; z-index:1000}
.dropdown-menu a{display:block; padding:10px; color:var(--text); text-decoration:none; font-size:14px}
.dropdown-menu a:hover{background:#f1f5f9}
.dropdown.open .dropdown-menu{display:block}
.msg{margin-top:10px; font-size:14px; color:var(--muted)}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.helper{margin-bottom: 10px; font-size:14px; color:var(--muted)}


/* === Fixed top-right language dropdown === */
.lang-dropdown{
    position:fixed; top:12px; right:12px; z-index:2000;
    font-family:inherit;
}
.lang-current{
    display:flex; align-items:center; gap:8px;
    padding:10px 12px; border-radius:12px;
    border:1px solid #cbd5e1; background:#fff; cursor:pointer; font-weight:600;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.lang-current:focus{ outline:3px solid rgba(249,115,22,.35); outline-offset:2px; }
.lang-menu{
    position:absolute; right:0; margin-top:6px; min-width:180px;
    background:#fff; border:1px solid #cbd5e1; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.15);
    padding:6px; display:none;
}
.lang-dropdown.open .lang-menu{ display:block; }
.lang-item{
    width:100%; text-align:left; padding:10px 12px; border-radius:10px; border:0; background:transparent; cursor:pointer;
    display:flex; align-items:center; gap:8px; font-size:14px;
}
.lang-item:hover{ background:#f1f5f9; }
.flag{ font-size:16px; line-height:1; }

@media (prefers-color-scheme: dark){
    .lang-current{ background:#0b141b; color:#e5eef6; border-color:#21303b; }
    .lang-menu{ background:#0f1b24; color:#e5eef6; border-color:#21303b; }
    .lang-item:hover{ background:#15212b; }
}



.bg-btn {
    position:fixed; bottom:12px; right:60px; /* λίγο αριστερά από το dropdown */
    z-index:2000;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid #cbd5e1;
    background:#fff;
    cursor:pointer;
    font-size:18px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.bg-btn:hover {
    background:#f1f5f9;
}











/* Κρύψε title/subtitles από το header (θα εμφανίζονται στο modal) */

.title #t_subtitle,
.title #t_subtitle2,
.title #t_subtitle3 { display:none; }

/* --- Modal styles --- */
.modal{ position:fixed; inset:0; z-index:3000; display:none; }
.modal[aria-hidden="false"]{ display:block; }

.modal__overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}

.modal__dialog{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:min(720px, 92vw);
    background:#fff; color:#111827;
    border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.modal__body{ padding:20px 22px 24px; }
.modal__body h2{ margin:0 0 10px; font-size:20px; }
.modal__body p{ margin:8px 0; color:#4b5563; }

.modal__close{
    position:absolute; top:10px; right:10px;
    border:0; background:#dc2626; border-radius:10px; width:36px; height:36px; cursor:pointer;
}
.modal__close:hover{ background:#e5e7eb; }

/* Mobile: full-height sheet */
@media (orientation: portrait) and (max-width:768px){
    .modal__dialog{
        left:0; right:0; bottom:0; top:auto; transform:none;
        width:100%; border-radius:16px 16px 0 0;
    }
    .modal__body{ padding:18px 16px 28px; }
    .modal__overlay{ background:rgba(0,0,0,.35); }
    .modal__body h2{ font-size:18px; }
}