/* =====================================
   YES TRAVELS OTA FLIGHT CARD — FINAL
===================================== */


.wf-airline-col{

width:80px;

text-align:center;

flex-shrink:0;

}

.wf-airline-logo{

width:44px;
height:44px;
object-fit:contain;

margin-bottom:6px;

}

.wf-airline-name{

font-size:12px;
color:#666;

}



.wf-route-row:last-child{

border-bottom:none;

padding-bottom:0;

}



/* TIME BLOCK */

.wf-time-block{

width:110px;

text-align:center;

}

.wf-time{

font-size:20px;

font-weight:700;

}

.wf-date{

font-size:12px;

color:#777;

margin-top:2px;

}

.wf-code{

font-size:12px;

color:#444;

margin-top:3px;

}



.wf-line:before{

content:"";

width:8px;
height:8px;
background:#333;
border-radius:50%;

position:absolute;

left:0;
top:-3px;

}

.wf-line:after{

content:"";

width:8px;
height:8px;
background:#333;
border-radius:50%;

position:absolute;

right:0;
top:-3px;

}



/* BUTTON */

.wf-btn-select{

background:#19b394;

color:#fff;

border:none;

padding:10px 20px;

border-radius:8px;

font-weight:600;

cursor:pointer;

margin-bottom:10px;

}

.wf-btn-select:hover{

background:#129178;

}



/* DETAILS */

.wf-details-link{

font-size:13px;

color:#666;

cursor:pointer;

}



/* --------------------------------
RETURN HIDE (ONEWAY)
-------------------------------- */

.wf-return-row:empty{

display:none;

}

/* AIRLINE PER LEG */

.wf-airline-mini{

width:70px;

text-align:center;

flex-shrink:0;

}

.wf-airline-logo-mini{

width:36px;
height:36px;
object-fit:contain;

margin-bottom:4px;

}

.wf-airline-name-mini{

font-size:11px;
color:#777;

}

.wf-details-link{
    display:inline-flex;
    align-items:center;
    gap:6px;

    font-size:13px;
    font-weight:600;

    color:#2563eb;
    cursor:pointer;

    margin-top:8px;
}

.wf-details-link:hover{
    text-decoration:underline;
}

.wf-details-icon{

width:16px;
height:16px;

opacity:.8;

}

/* =====================================
YES TRAVELS — FLIGHT DETAILS MODAL FINAL
===================================== */

/* BACKDROP */

.wf-modal{

position:fixed;
inset:0;

background:rgba(0,0,0,.55);

display:none;
align-items:center;
justify-content:center;

z-index:9999;

}

.wf-modal.show{
display:flex;
}


/* =====================================
MODAL CARD
===================================== */

.wf-modal-card{

width:920px;
height:90vh;

background:#ffffff;

border-radius:18px;

box-shadow:
0 40px 80px rgba(0,0,0,.35);

display:flex;
flex-direction:column;

overflow:hidden;

}


/* =====================================
HEADER
===================================== */

.wf-modal-header{

padding:18px 24px;

border-bottom:1px solid #eee;

display:flex;
justify-content:space-between;
align-items:center;

background:#fafafa;

}

.wf-modal-title{

font-weight:700;
font-size:18px;

display:flex;
align-items:center;
gap:8px;

}

.wf-modal-title img{
width:18px;
height:18px;
}


#wf-modal-close{

background:none;
border:none;

cursor:pointer;

}

#wf-modal-close img{
width:20px;
height:20px;
}


/* =====================================
BODY
===================================== */

#wf-modal-body{

padding:24px;

overflow:auto;

flex:1;

background:#fbfbfb;

}


/* =====================================
JOURNEY PANELS
===================================== */

.wf-journey{

border-radius:14px;

padding:12px 18px;

margin-bottom:18px;

font-weight:700;

font-size:14px;

display:flex;
align-items:center;
gap:8px;

}

/* OUTBOUND COLOR */

.wf-outbound{

background:#e8f1ff;
border:1px solid #c9ddff;

color:#1e40af;

}

/* RETURN COLOR */

.wf-return{

background:#e9fbf3;
border:1px solid #bdebd8;

color:#047857;

}


/* =====================================
SEGMENT CARD
===================================== */

.wf-seg{

border:1px solid #e5e5e5;

border-radius:14px;

padding:18px 20px;

margin-bottom:14px;

background:#ffffff;

box-shadow:
0 3px 8px rgba(0,0,0,0.04);

}


/* AIRLINE ROW */

.wf-seg-airline{

display:flex;
align-items:center;
gap:12px;

margin-bottom:12px;

}

.wf-seg-airline img{

width:36px;
height:36px;

object-fit:contain;

}


/* =====================================
ROUTE GRID
===================================== */

.wf-seg-route{

display:grid;

grid-template-columns:180px 1fr 180px;

align-items:center;

}


/* TIMES */

.wf-seg-time{

font-size:20px;
font-weight:700;

color:#111;

}


.wf-seg-date{

font-size:12px;
color:#777;

margin-top:2px;

}


/* AIRPORT */

.wf-seg-airport{

font-size:15px;
font-weight:700;

margin-top:4px;

}


.wf-seg-airport-name{

font-size:12px;
color:#666;

margin-top:2px;

}


/* TERMINAL */

.wf-terminal{

font-size:11px;
color:#888;

margin-top:2px;

}


/* CENTER */

.wf-seg-center{

text-align:center;

}


/* DURATION */

.wf-seg-duration{

font-size:14px;

font-weight:600;

color:#333;

}


/* =====================================
LAYOVER
===================================== */

.wf-layover{

text-align:center;

padding:8px;

background:#eef2ff;

border-radius:8px;

margin:8px 0;

font-size:13px;

color:#444;

border:1px solid #d7def8;

}


/* =====================================
FOOTER
===================================== */

.wf-modal-footer{

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;

padding:18px 22px;

border-top:2px solid #facc15;

background:linear-gradient(
180deg,
#fffdf5 0%,
#fff7cc 100%
);

position:sticky;
bottom:0;

z-index:20;

}


.wf-modal-price{

font-size:22px;
font-weight:700;

}


.wf-modal-price-sub{

font-size:12px;
color:#777;

}


/* SELECT BUTTON */

.wf-modal-select{

background:#19b394;

color:#fff;

border:none;

padding:12px 22px;

border-radius:8px;

font-weight:600;

cursor:pointer;

}

.wf-modal-select:hover{

background:#129178;

}

/* ===============================
LEGAL DISCLAIMER
=============================== */

.wf-legal-box{

display:flex;
align-items:center;
gap:12px;

padding:14px 16px;

border-radius:12px;

margin:14px 0 20px 0;

border:1px solid #fde68a;

background:#fff7cc;

}


.wf-legal-icon{

width:22px;
height:22px;

flex-shrink:0;

opacity:.9;

filter: invert(63%) sepia(85%) saturate(500%) hue-rotate(5deg);

}


.wf-legal-text{

font-size:13px;
line-height:1.5;

color:#92400e;

font-weight:500;

}

/* =========================
ICON CONTROL (CRITICAL)
Fix giant icon issue
========================= */

.wf-disclaimer-icon{

width:22px !important;
height:22px !important;

min-width:22px;
min-height:22px;

object-fit:contain;

margin-top:2px;

display:block;

}


/* =========================
TEXT
========================= */

.wf-disclaimer-text{

flex:1;

font-weight:500;

}


/* =========================
OUTBOUND — BLUE
========================= */

.wf-outbound-disclaimer{

background:#eef4ff;
border:1px solid #c7d7ff;

color:#1e3a8a;

}


/* Blue icon */

.wf-outbound-disclaimer .wf-disclaimer-icon{

filter:

invert(23%)
sepia(88%)
saturate(1000%)
hue-rotate(210deg)
brightness(95%);

}


/* =========================
RETURN — YELLOW
========================= */

.wf-return-disclaimer{

background:#fff8db;
border:1px solid #facc15;

color:#92400e;

}


/* Yellow icon */

.wf-return-disclaimer .wf-disclaimer-icon{

filter:

invert(52%)
sepia(80%)
saturate(900%)
hue-rotate(10deg)
brightness(100%);

}


/* =========================
SUBTLE SHADOW
========================= */

.wf-disclaimer{

box-shadow:

0 1px 2px rgba(0,0,0,0.04);

}

/* ===============================
MODAL FOOTER – PREMIUM YELLOW
=============================== */

.wf-modal-footer{

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 22px;

border-top:2px solid #facc15;

background:linear-gradient(
180deg,
#fffdf5 0%,
#fff7cc 100%
);

position:sticky;
bottom:0;

z-index:10;

}


/* PRICE BLOCK */

.wf-modal-price{

font-size:28px;
font-weight:800;

color:#111827;

letter-spacing:.5px;

}


.wf-modal-price-sub{

font-size:12px;

color:#92400e;

font-weight:600;

margin-top:3px;

text-transform:uppercase;
letter-spacing:.5px;

}



.wf-btn-select:active{

transform:translateY(0);

}

.wf-modal-footer::before{

content:"";

position:absolute;

left:0;
right:0;
top:0;

height:3px;

background:linear-gradient(
90deg,
#facc15,
#f59e0b
);

}
/* =====================================
MAIN FLIGHT CARD
Matches Premium Modal Style
===================================== */

.wf-flight-card-ota{

    display:flex;

    justify-content:space-between;

    gap:18px;

    padding:18px;

    border-radius:14px;

    background:#fff;

    border:1px solid #eee;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.05);

    margin-bottom:18px;

    transition:all .25s ease;
}


.wf-flight-card-ota:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 32px rgba(0,0,0,0.12);
}



/* =====================================
ROUTES COLUMN
===================================== */

.wf-routes-col{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:16px;
}



/* =====================================
ROUTE ROW
===================================== */

.wf-route-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding:10px 6px;
}



/* Return row softer */
.wf-return-row{

    border-top:1px dashed #eee;

    padding-top:14px;
}



/* =====================================
AIRLINE LOGO
===================================== */

.wf-airline-logo-mini{

    width:32px;

    height:32px;

    border-radius:6px;

    background:#fff;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.15);

    padding:2px;
}



/* =====================================
TIME BLOCKS
===================================== */

.wf-time{

    font-size:18px;

    font-weight:700;

    color:#111;
}


.wf-date{

    font-size:12px;

    color:#777;
}


.wf-code{

    font-size:13px;

    font-weight:600;

}



/* =====================================
MIDDLE SECTION
===================================== */

.wf-middle{

    flex:1;

    text-align:center;
}


.wf-duration{

    font-weight:600;

    font-size:13px;

    margin-bottom:4px;
}


.wf-line{

    height:2px;

    background:#ddd;

    border-radius:2px;

    margin:6px 20px;
}


.wf-stops{

    font-size:12px;

    color:#777;
}



/* =====================================
PREMIUM PRICE COLUMN
Matches Modal Footer
===================================== */

.wf-price-col{

    background:linear-gradient(
        180deg,
        #fff9e6 0%,
        #ffe9a6 100%
    );

    border-left:4px solid #ffc107;

    border-radius:12px;

    padding:16px;

    text-align:center;

    min-width:160px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}



/* PRICE */

.wf-price{

    font-size:26px;

    font-weight:700;

    color:#111;
}


.wf-total-label{

    font-size:12px;

    color:#555;

    margin-top:4px;

    margin-bottom:10px;
}



/* =====================================
SELECT BUTTON PREMIUM
===================================== */

.wf-btn-select{

    background:#ffc107;

    border:none;

    border-radius:8px;

    padding:10px 18px;

    font-weight:700;

    color:#111;

    cursor:pointer;

    transition:all .2s ease;
}


.wf-btn-select:hover{

    background:#ffb300;

    transform:translateY(-1px);

    box-shadow:
        0 6px 14px rgba(255,193,7,0.45);
}



/* =====================================
FLIGHT DETAILS LINK
===================================== */

.wf-details-link{

    margin-top:10px;

    font-size:13px;

    color:#444;

    cursor:pointer;

    display:flex;

    justify-content:center;

    gap:6px;

    align-items:center;
}


.wf-details-link:hover{

    color:#000;
}



.wf-details-icon{

    width:14px;

    opacity:0.7;
}

/* =====================================
YES TRAVELS — LUXURY CARD ENHANCEMENT
Safe Add-On (No Layout Changes)
===================================== */


/* ===============================
CARD MATERIAL
=============================== */

.wf-flight-card-ota{

background:
linear-gradient(
180deg,
#ffffff 0%,
#fdfdfd 100%
);

border:1px solid #e9ecef;

box-shadow:

0 4px 14px rgba(0,0,0,.05),
0 1px 2px rgba(0,0,0,.04);

position:relative;

}


/* subtle luxury glow */

.wf-flight-card-ota::before{

content:"";

position:absolute;

left:0;
right:0;
top:0;

height:2px;

background:linear-gradient(
90deg,
transparent,
#facc15,
transparent
);

opacity:.4;

border-radius:14px 14px 0 0;

}



/* Premium hover */

.wf-flight-card-ota:hover{

transform:translateY(-3px);

box-shadow:

0 18px 40px rgba(0,0,0,.12);

border-color:#e2e8f0;

}



/* ===============================
AIRLINE PREMIUM BADGE
=============================== */

.wf-airline-logo-mini{

background:#ffffff;

border-radius:8px;

padding:4px;

box-shadow:

0 3px 10px rgba(0,0,0,.12);

border:1px solid #f1f1f1;

}



/* ===============================
TIME TYPOGRAPHY
=============================== */

.wf-time{

font-weight:800;

letter-spacing:.3px;

color:#0f172a;

}



.wf-date{

font-size:11px;

color:#94a3b8;

font-weight:500;

}



.wf-code{

font-size:13px;

font-weight:700;

color:#334155;

}



/* ===============================
CENTER SECTION
=============================== */

.wf-duration{

font-weight:700;

color:#1f2937;

letter-spacing:.2px;

}



.wf-stops{

font-size:12px;

color:#64748b;

font-weight:500;

}



/* ===============================
TIMELINE PREMIUM
=============================== */

.wf-line{

background:

linear-gradient(
90deg,
#cbd5e1,
#94a3b8,
#cbd5e1
);

height:2px;

}



.wf-line:before,
.wf-line:after{

background:#475569;

width:7px;
height:7px;

}



/* ===============================
PRICE PANEL DEPTH
=============================== */

.wf-price-col{

box-shadow:

inset 0 1px 0 rgba(255,255,255,.9),
0 6px 18px rgba(250,204,21,.15);

}



/* PRICE */

.wf-price{

font-weight:900;

letter-spacing:.5px;

color:#0f172a;

}



/* ===============================
DETAILS LINK PREMIUM
=============================== */

.wf-details-link{

color:#475569;

font-weight:700;

transition:.2s;

}


.wf-details-link:hover{

color:#111827;

}



/* ===============================
SUBTLE DIVIDER
=============================== */

.wf-route-row{

position:relative;

}


.wf-return-row{

margin-top:6px;

}



/* ===============================
MICRO-ANIMATION
=============================== */

.wf-airline-logo-mini{

transition:.2s ease;

}


.wf-flight-card-ota:hover .wf-airline-logo-mini{

transform:scale(1.06);

}



/* ===============================
SELECT BUTTON LUXURY FEEL
=============================== */

.wf-btn-select{

box-shadow:

0 6px 18px rgba(0,0,0,.12);

font-weight:800;

letter-spacing:.3px;

}


.wf-btn-select:hover{

box-shadow:

0 10px 26px rgba(0,0,0,.18);

}



/* ===============================
SOFT TYPOGRAPHY BALANCE
=============================== */

.wf-total-label{

letter-spacing:.6px;

font-weight:700;

color:#92400e;

}



/* ===============================
OTA STYLE POLISH
=============================== */

.wf-flight-card-ota{

backdrop-filter: blur(2px);

}

/* =========================
ONE WAY CARD HEIGHT FIX
========================= */

.wf-flight-card-ota{

min-height:110px;

}

/* Smaller card for oneway */

.wf-flight-card-ota.wf-oneway{

padding-top:16px;
padding-bottom:16px;

}

/* Reduce vertical space */

.wf-oneway .wf-route-row{

padding:6px 4px;

}

/* Price column center */

.wf-oneway .wf-price-col{

justify-content:center;

}

#wf-legal-template{
display:none !important;
pointer-events:none;
}

#wf-select-flight{

position:relative;
z-index:5;
pointer-events:auto;

}