/* ==========================================================
   Színek   #999a97
   ========================================================== */

:root{

    --jak-main:#999a97;
    --jak-hover:#c0392b;
    --jak-success:#008000;

    --jak-attend: #b8ddb8;
    --jak-not-attend: #e6c0c0;
    --jak-driver: #b8cfe6;

}

/* ==========================================================
   JAK - Közös gombok
   ========================================================== */

.jak-btn{
   background-color:var(--jak-main);
    color:#fff;
    border:none;
    padding:7px 12px;
    border-radius:4px;
    cursor:pointer;
    transition:all .2s ease;
}

.jak-btn:hover{
   background-color:var(--jak-hover);
    color:#fff;
}

.jak-btn-danger{
    background:#008000;
}

.jak-btn-danger:hover{
    background:#c0392b;
}

.jak-btn-success{
    background:#008000;
}

.jak-btn-success:hover{
    background:#00a000;
}


/* ==========================================================
   Találkozó fejléc
   ========================================================== */

.jak-meeting-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
    max-width:760px;
}

.jak-meeting-info,
.jak-meeting-count{
     background-color:var(--jak-main);
    color:#fff;
    padding:10px 16px;
    border-radius:8px;
}

.jak-meeting-info{
    flex:2;
}

.jak-meeting-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:4px;
}

.jak-meeting-line{
    font-size:14px;
    line-height:1.35;
}

.jak-meeting-count{
    flex:1;
    text-align:center;
}

.jak-meeting-count-label{
    font-size:13px;
}

.jak-meeting-count-number{
    font-size:22px;
    font-weight:700;
}

@media (max-width:768px){

    .jak-meeting-header{
        flex-direction:column;
        align-items:stretch;
    }

    .jak-meeting-count{
        text-align:left;
    }

}
/* ==========================================================
   Résztvevői kártyák
   ========================================================== */

.jak-card-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:16px;
    margin-top:16px;
}

.jak-member-card{
    border:1px solid #d6d6d6;
    border-radius:10px;
    padding:14px 16px;
    background-color:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.jak-member-card h4{
    margin-top:0;
    margin-bottom:10px;
}

.jak-member-card p{
    margin:8px 0;
}
/* Résztvevői kártya – autós útvonal */

.jak-card-route{
    margin-top:12px;
}

.jak-route-line{
    display:flex;
    gap:12px;
    margin:4px 0;
}

.jak-route-time{
    width:48px;
    flex-shrink:0;
    font-weight:600;
    color:#666;
}

.jak-route-city{
    flex:1;
}

/* Résztvevői névsor */

.jak-member-name-list {
    border:1px solid #d6d6d6;
    border-radius:8px;
    overflow:hidden;
    margin-top:16px;
}

.jak-member-name-item {
    padding:9px 14px;
    border-bottom:1px solid #e8e8e8;
    background-color:#fff;
}

.jak-member-name-item:last-child {
    border-bottom:none;
}

.jak-member-name-item:nth-child(even) {
    background-color:#f7f7f7;
}

.jak-view-switch {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
/* ===== Üzenetek ===== */

.jak-msg {
    display: inline-block;
    max-width: 40%;
    min-width: 300px;

    padding: 12px 16px;
    margin: 12px 0;

    border-radius: 8px;

    font-size: 16px;
    font-weight: 600;
}

.jak-msg-error {
    background: #ffebee;
    color: #b71c1c;
    border: 1px solid #e53935;
    border-left: 6px solid #d32f2f;
}

.jak-msg-success {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #43a047;
    border-left: 6px solid #2e7d32;
}

.jak-msg-info {
    background: #e3f2fd;
    color: #0d47a1;
    border-color: #64b5f6;
}

/* ==========================================================
   JAK – Szerkeszthető mezők egységes megjelenése
   ========================================================== */

.jak-box input[type="text"],
.jak-box input[type="email"],
.jak-box input[type="password"],
.jak-box input[type="number"],
.jak-box input[type="date"],
.jak-box input[type="time"],
.jak-box input[type="url"],
.jak-box select,
.jak-box textarea {
    background-color: #f3f3f3;
    border: 1px solid #cfcfcf;
}

/* A választómezők ne kapjanak szürke dobozt. */
.jak-box input[type="radio"],
.jak-box input[type="checkbox"] {
    background: initial;
}

/* ==========================================================
   JAK – Résztvevők oldal: harmonikás lista
   ========================================================== */

.jak-members-page{
    max-width:760px;
}

.jak-member-legend{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    margin:6px 0 10px;
    font-size:14px;
}

.jak-member-legend > span{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.jak-member-filters{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}

.jak-member-accordion{
    width:100%;
    max-width:620px;
}

.jak-member-accordion-item{
    width:100%;
    margin:0 0 6px;
}

.jak-member-accordion-title{
    box-sizing:border-box;
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:9px 12px;
    border:1px solid #d6d6d6;
    border-radius:7px;
    background:#f3f3f3;
    color:#222;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.jak-member-accordion-title:hover{
    background:#ededed;
}

.jak-member-accordion-title[aria-expanded="true"]{
    border-radius:7px 7px 0 0;
    background:#ececec;
}

.jak-member-title-main{
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
}

.jak-member-arrow{
    width:14px;
    flex:0 0 14px;
    text-align:center;
    font-size:12px;
}

.jak-member-icon{
    width:22px;
    flex:0 0 22px;
    text-align:center;
}

.jak-member-name{
    font-weight:600;
}

.jak-member-free-places{
    margin-left:auto;
    white-space:nowrap;
    font-size:14px;
}

.jak-member-accordion-content{
    width:100%;
}

.jak-member-accordion-content .jak-member-card{
    box-sizing:border-box;
    width:100%;
    margin:0;
    border-top:0;
    border-radius:0 0 7px 7px;
    box-shadow:none;
    padding:12px 16px 14px;
}

.jak-member-accordion-content .jak-member-card h4{
    margin:0 0 8px;
    font-size:1.12rem;
}

.jak-member-accordion-content .jak-member-card p{
    margin:6px 0;
}

.jak-card-travel{
    margin-top:6px;
}

.jak-card-route{
    margin-top:8px;
}

@media (max-width:640px){
    .jak-member-accordion-title{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .jak-member-free-places{
        width:100%;
        margin-left:43px;
    }
}

/* ==========================================================
   JAK – Résztvevők finomhangolás
   ========================================================== */

.jak-members-page{
    box-sizing:border-box;
    padding-left:48px;
    padding-right:20px;
}

/* A lenyitott sor szövege minden esetben maradjon sötét és olvasható. */
.jak-member-accordion-title,
.jak-member-accordion-title *,
.jak-member-accordion-title[aria-expanded="true"],
.jak-member-accordion-title[aria-expanded="true"] *{
    color:#222 !important;
}

/*
 * Útvonal: a címke és az első időpont/város egy sorban indul,
 * a további állomások pedig ugyanabba az oszlopba rendeződnek.
 */
.jak-card-route{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:12px;
    row-gap:4px;
    align-items:start;
}

.jak-card-route > strong{
    grid-column:1;
    grid-row:1;
    white-space:nowrap;
}

.jak-route-lines{
    grid-column:2;
    grid-row:1;
}

.jak-route-line{
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    gap:10px;
    margin:0 0 4px;
}

.jak-route-time{
    width:auto;
    flex:none;
}

@media (max-width:640px){
    .jak-members-page{
        padding-left:14px;
        padding-right:14px;
    }

    .jak-card-route{
        grid-template-columns:1fr;
        row-gap:5px;
    }

    .jak-card-route > strong,
    .jak-route-lines{
        grid-column:1;
        grid-row:auto;
    }
}

/* ==========================================================
   JAK – Résztvevő sor fókusz/aktív állapot javítása
   ========================================================== */

/*
 * Egyes böngésző/WordPress gombstílusok kattintás után sötét hátteret
 * hagynak a fókuszban maradó harmonikasoron. Ezt itt felülírjuk.
 */
.jak-member-accordion-title,
.jak-member-accordion-title:focus,
.jak-member-accordion-title:focus-visible,
.jak-member-accordion-title:active{
    background:#f3f3f3 !important;
    color:#222 !important;
}

.jak-member-accordion-title:hover{
    background:#ededed !important;
}

.jak-member-accordion-title[aria-expanded="true"],
.jak-member-accordion-title[aria-expanded="true"]:focus,
.jak-member-accordion-title[aria-expanded="true"]:focus-visible,
.jak-member-accordion-title[aria-expanded="true"]:active{
    background:#ececec !important;
    color:#222 !important;
}

.jak-member-accordion-title:focus-visible{
    outline:2px solid #bfc4c8;
    outline-offset:2px;
}