/* Station 7.14.14 – iPhone-os kinézet-alap (mintakészlet, jóváhagyva 11. 02.).
   A meglévő stíluslapok (styles.css, v7.css, station.css) után töltődik: a közös elemeket és a színeket állítja át.
   Szabály: sárga csak kitöltés (fő gomb, kiválasztott menüpont, kapcsoló, a következő teendő kerete), szövegre soha. */
:root{
 --ios-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
 --ink:#111111;--ink2:#3A3A3C;--muted:#5C5C60;--faint:#8E8E93;
 --line:#E5E5EA;--line2:#86868B;--soft:#E5E5EA;--sep:#D1D1D6;
 --hl:#F5CE3E;--red:#B3261E;--amber:#8A5A00;
 --bg:#F2F2F7;--card:#FFFFFF;--bar:rgba(249,249,249,.94);
 --radius:12px;--radius-card:14px;
}
html,body{font-family:var(--ios-font);font-feature-settings:normal;background:var(--bg);-webkit-text-size-adjust:100%}
body{font-size:17px;line-height:1.35}
.app-shell{background:var(--bg)!important}

/* ---- Fejléc: áttetsző sáv, mint az iPhone-on ---- */
.st-header{background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--sep)}
.page-head .eyebrow{font-size:15px;color:var(--muted)}
.page-head h1{font-size:40px;font-weight:700;letter-spacing:.01em;line-height:1.1}

/* ---- Kártyák: fehér felület a szürke háttéren, keret nélkül ---- */
.card{background:var(--card);border:0;border-radius:var(--radius-card)}
.card-head{border-bottom:1px solid var(--line)}
.card-head h3{font-weight:700;letter-spacing:0}

/* ---- Gombok: egy méret, kitöltött sárga vagy szürke ---- */
.btn{border-radius:var(--radius);min-height:44px;font-size:15px;font-weight:600}
.btn-primary,.mobile-service-main{font-weight:600}
.btn-light,.btn-soft{background:var(--soft)!important}
.btn-light:hover,.btn-soft:hover{background:#DCDCE1!important}
.btn-light:active{background:#D1D1D6!important}
.btn-danger{background:transparent!important;color:var(--red)!important}
.btn-big{min-height:50px;font-size:17px}

/* ---- Mezők ---- */
.field input,.field select,.field textarea,input[type=search]{border:1px solid var(--line2);border-radius:10px;background:var(--card)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(245,206,62,.55)}
.field label{font-size:15px;font-weight:600}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}

/* ---- Ablakok ---- */
.modal{background:rgba(0,0,0,.4)}
.modal-card{background:var(--bg);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.modal-head{background:var(--bg);border-bottom:1px solid var(--sep);align-items:center}
.modal-head h3{font-size:17px;font-weight:600;letter-spacing:0}
.modal-head .close{width:30px;height:30px;min-width:30px;border-radius:15px;background:var(--soft);color:var(--muted);border:0;font-size:20px;line-height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;position:relative}
.modal-head .close::after{content:"";position:absolute;inset:-7px}  /* koppintási terület 44 pont */
.modal-foot{background:var(--bg);border-top:1px solid var(--sep)}
.toast{border-radius:14px;background:#1C1C1E!important;font-size:15px;font-weight:500}

@media screen and (max-width:820px){
 /* A héj a képernyő magasságát tölti ki: a tartalom görög, a fejléc és az alsó menüsor a helyén marad.
    Így az alsó sáv nem tud „felcsúszni” (a billentyűzet vagy a böngészősáv után sem). */
 .app-shell>.main{padding:12px 16px calc(96px + env(safe-area-inset-bottom,0px))!important;padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(16px,env(safe-area-inset-right,0px))!important}
 /* Régi iOS (15.4 alatt nincs :has és dvh): ott a régi viselkedés marad, nem ágyazunk két görgetést egymásba */
 @supports selector(:has(a)) and (height:100dvh){
 html:has(.app-shell),html:has(.app-shell) body{height:100%;overflow:hidden;overscroll-behavior:none}
 .app-shell{display:flex!important;flex-direction:column;height:100dvh;min-height:0!important}
 .app-shell>.st-header{position:relative;flex:none;padding-top:env(safe-area-inset-top,0px)}
 .app-shell>.main{padding-bottom:24px!important;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
 .app-shell>.bottom-nav{position:relative!important;left:auto;right:auto;bottom:auto;flex:none;transform:none!important;-webkit-transform:none!important;will-change:auto}
 }
 .app-shell>.bottom-nav{background:var(--bar)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--sep);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
 .bottom-nav button{background:transparent!important;font-size:11px;font-weight:500;color:var(--muted);gap:3px;min-height:50px}
 .bottom-nav button.active{color:var(--ink);font-weight:700}
 .bottom-nav .nav-icon{width:52px;height:30px;border-radius:15px}
 .bottom-nav .nav-icon svg{width:24px;height:24px}
 .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}

 .page-head{margin-bottom:16px}
 .page-head h1{font-size:34px;line-height:41px}
 .btn{min-height:50px;font-size:17px}
 .field input,.field select,.field textarea,input[type=search]{min-height:48px;font-size:17px}   /* 16 pont alatt az iPhone ránagyítana */

 /* Lap alulról, fogóval – a képernyő aljáig ér */
 .modal{padding:0;align-items:flex-end}
 .modal-card{width:100%;border-radius:14px 14px 0 0;max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px))}
 .modal-card::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:#C6C6C8;margin:6px auto 0}
 .modal-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
@media screen and (min-width:821px){
 .main{padding-top:28px!important;padding-left:max(32px,env(safe-area-inset-left,0px))!important;padding-right:max(32px,env(safe-area-inset-right,0px))!important}
 .btn{min-height:40px}
 .btn-big{min-height:50px}
}

/* Nyomtatás: a telefonos héj ne vágja le a lapot (papíron a lap szélessége 820 pont alatt van) */
@media print{
 html:has(.app-shell),html:has(.app-shell) body{height:auto!important;overflow:visible!important}
 .app-shell{display:block!important;height:auto!important}
 .app-shell>.main{overflow:visible!important}
}
/* Jelentést hordozó szürkék a szürke háttéren is látsszanak */
.st-week-days i,.proc-steps li span,.st-bar span:not(.on),.st-progress{background:#C6C6C8}
.nt-na{color:#8E8E93}
.tag-gray{background:var(--soft);color:var(--ink2)}
.vh-note{color:var(--ink2)}   /* halvány szöveg szürke kitöltésen: AA felett */
/* Fejléc gombjai telefonon egy sorban: kisebb gomb, de 44 pontos koppintási terület */
@media screen and (max-width:820px){
 .st-header .btn{min-height:36px;font-size:15px;padding:0 12px;position:relative;white-space:nowrap}
 .st-header .btn::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
}
.dc-rrow.r-miss>span{color:var(--muted)}   /* „még nincs” a szürke ablakháttéren is olvasható */
.ocr-steps2 .w{color:var(--muted)}   /* a várakozó olvasási lépés a szürke ablakon is olvasható */
/* Vezérlők kerete a szürke felületeken is látszik (WCAG 1.4.11: legalább 3:1) */
.dr-f input:not([type=checkbox]),.dr-f select,.ml-chips select,.doc-veh-head select{border-color:var(--line2)}
.dr-f.unc input,.dr-f.unc select{border-color:var(--ink)}
.ml-chip,.ts-chip,.ocr-opt:not(.ocr-opt-main),.dr-tile{border-color:var(--line2)}
/* A kártya-változatok, amelyeknek a kerete vagy háttere jelentést hordoz, megtartják azt (a .card{border:0} ne írja felül) */
.card.mod-off{border:2px dashed var(--line2)}
.card.kp-offer{border:2px solid var(--ink)}
.card.ins-mini{border:1px solid var(--line)}
.card.empty{background:none}
.ml-search input{border:0;background:transparent;border-radius:0;min-height:0}   /* a keretes kereső-dobozon belül nincs második keret */
.bottom-nav button.st-danger{color:var(--red)}   /* a Segítség kiválasztva is piros */