.elementor-4287 .elementor-element.elementor-element-3697729{--display:flex;}@media(min-width:768px){.elementor-4287 .elementor-element.elementor-element-3697729{--content-width:1600px;}}/* Start custom CSS for shortcode, class: .elementor-element-f38701a *//* ─────────────────────────────────────────────
   GLOBAL RESET & TYPOGRAPHY
────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
body,input,button{
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ─────────────────────────────────────────────
   OVERLAY
────────────────────────────────────────────── */
.overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.5);
    z-index:999;
}

/* ─────────────────────────────────────────────
   POP-UP WINDOW – DESKTOP DEFAULT
────────────────────────────────────────────── */
.popup-window{
    display:none;
    position:fixed;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:80%;max-width:800px;
    background:#fff;border:1px solid #ccc;border-radius:20px;
    padding:20px;
    z-index:1000;
    overflow:hidden;                 /* we’ll scroll inner body, not the shell */
}

/* inner scroll area (everything below the sticky header) */
.popup-body{
    max-height:calc(100vh - 120px);   /* keep your existing rule */
    overflow-y:auto;
    padding-bottom:50px;              /* 👈  space to taste (e.g. 16-32 px) */
}
.popup-body h2{
    font-size:20px;
    font-weight:700;
    color:#111;
    margin:20px 0 12px;   /* matches the rule you already use */
}
/* ── header (sticky) ───────────────────────── */
.popup-header{
    position:sticky;top:0;z-index:2; /* sticks during internal scroll */
    display:flex;justify-content:center;align-items:center;
    border-bottom:1px solid #ccc;
    padding:15px 0 20px;     /* extra vertical space */
    min-height:40px;         /* guarantees room */
    background:#fff;                 /* cover content while scrolling */
}

.section-desc{
    font-size:13px;
    color:#666;
    margin:-8px 0 12px;   /* pulls it closer to the heading, keeps gap below */
    line-height:1.4;
}

#filterTitle{
    position:static;         /* was absolute – remove it           */
    transform:none;          /* cancel the -50% translate          */
    margin:0 auto;           /* flex item, fills centre naturally  */
    font-size:22px;font-weight:700;
    pointer-events:none;     /* clicks still reach the close btn   */
}

#closePopupButton{
    position:absolute;right:18px;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border:none;background:none;cursor:pointer;
    color:#555;font-size:20px;line-height:1;
}
#closePopupButton::before{content:"\00D7";display:block;text-align:center;}
#closePopupButton:hover{color:#1D71B8;}

/* ─────────────────────────────────────────────
   SECTION HEADINGS
────────────────────────────────────────────── */
.popup-window > h2,
.PriceRange-container > h3{
    font-size:20px;            /* same size      */
    font-weight:700;           /* same weight    */
    color:#111;                /* slightly darker*/
    margin:20px 0 12px;
}
/* ─────────────────────────────────────────────
   TAG LIST
────────────────────────────────────────────── */
.SubjectStreamTag-container{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;
}
.SubjectStreamTag{
    padding:8px 16px;border-radius:15px;
    background:#e0e0e0;font-size:14px;cursor:pointer;
    transition:.2s background;
}
.SubjectStreamTag:hover,
.SubjectStreamTag.selected{background:#1D71B8;color:#fff;}

/* ─────────────────────────────────────────────
   PRICE RANGE (separator line at top)
────────────────────────────────────────────── */
.PriceRange-container{
    margin-top:20px;padding-top:20px;border-top:1px solid #ccc;
}
.PriceRange-container > h3{margin-bottom:20px;}
/* slider track */
#slider-range.ui-slider{
    width:95%;          /* whatever width you like                */
    margin:0 auto; 
    margin-top:8px;            /* ← this centres it horizontally          */
    background:#e5e5e5;
    border:none;
    height:6px;
    border-radius:3px;
}
#slider-range .ui-slider-range{
    background:#1D71B8;        /* your brand blue */
    border:none;
    height:6px;
    border-radius:3px;
}

#slider-range .ui-slider-handle{
    width:18px;height:18px;
    top:-6px;                  /* centre on bar  */
    background:#fff;
    border:3px solid #1D71B8;  /* blue ring      */
    border-radius:50%;
    cursor:pointer;
    transition:box-shadow .2s;
}
#slider-range .ui-slider-handle:hover,
#slider-range .ui-slider-handle:focus{
    box-shadow:0 0 0 4px rgba(29,113,184,.25); /* focus glow */
}

input[type=number]{
    width:45%;padding:8px;font-size:16px;text-align:center;
    border:1px solid #ccc;border-radius:20px;
}
input[type=number]:focus{border-color:#F39200;outline:none;}

/* ────────────────────────────────
   MIN / MAX PRICE ROW
──────────────────────────────────*/
.PriceNumberSection{
    display:flex;gap:24px;justify-content:space-between;margin-top:28px;
}
@media(max-width:500px){.PriceNumberSection{flex-direction:column}}

/* each box */
.priceBox{position:relative;flex:1;text-align:center;}
.priceBox label{
    display:block;font-size:13px;font-weight:600;color:#555;margin-bottom:6px;
}

/* baht badge */
.currency{
    position:absolute;left:18px;top:50%;transform:translateY(-50%);
    font-size:17px;font-weight:700;color:#1D71B8;pointer-events:none;
}
/* labels next to inputs, not above */
.PriceNumberSection label{
    flex:none;
}

/* number boxes – pill shape, subtle grey, blue focus */
.priceBox input[type=number]{
    width:100%;padding:14px 18px 14px 42px;   /* room for ฿ */
    font-size:18px;font-weight:700;color:#111;
    background:#fafafa;border:1px solid #ccc;border-radius:32px;
    text-align:right;                         /* aligns numbers neatly */
}
.priceBox input[type=number]:focus{
    border-color:#1D71B8;outline:none;
}

/* small tweak to keep the two inputs side-by-side even on narrow view */
@media (max-width:500px){
    .PriceNumberSection{flex-direction:column;gap:10px;}
    .PriceNumberSection input[type=number]{width:100%;max-width:none;}
}

/* ─────────────────────────────────────────────
   FILTER BUTTON (opens pop-up)
────────────────────────────────────────────── */
#openPopupButton{
    position:absolute;right:0;top:-90px;
    padding:6px 12px;font-size:12px;
    border:1px solid #ccc;border-radius:5px;
    background:#fff;cursor:pointer;
    transition:border-color .2s, box-shadow .2s;
}
#openPopupButton:hover,
#openPopupButton:focus{
    border-color:#1D71B8;               /* blue outline on hover / focus   */
    box-shadow:0 0 0 2px rgba(29,113,184,.4);
}
#openPopupButton svg{pointer-events:none;}
#openPopupButton.active{
    border-color:#1D71B8;
    box-shadow:0 0 0 2px rgba(29,113,184,.8);
}

#openPopupButton .badge{
    position:absolute;top:-6px;right:-6px;
    min-width:18px;height:18px;padding:0 4px;
    border-radius:50%;background:#1D71B8;color:#fff;
    font-size:11px;font-weight:700;line-height:18px;
    text-align:center;
    display:none;                        /* hidden until > 0 */
}
#openPopupButton.active .badge { display:block; }
/* ─────────────────────────────────────────────
   RESPONSIVE  – TABLET / PHONE  ( ≤ 991 px )
────────────────────────────────────────────── */
@media (max-width:991px){
    .popup-window{
        top:0;left:0;transform:none;width:100vw;max-width:none;
        height:100vh;border-radius:0;padding:0;   /* true fullscreen */
    }
    .popup-header{padding:14px 0 18px 0;}
    .popup-body{max-height:calc(100vh - 56px);}   /* header = 56 px */
}/* End custom CSS */
/* Start custom CSS for post_grid_widget, class: .elementor-element-45fcf60 */.post-grid {
         max-width: 1500px;   /* or use width:1500px if you need it fixed */
        margin: 0 auto;      /* horizontally center in page */
        padding: 0 12px;     /* optional: some side-padding so cards don’t hug the edge */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }
    
    /* Ensure the text and titles are left-aligned */
    .post-item {
        /* Removed the border outline from post items */
        border: none;            /* No border around the post items */
        border-radius: 11px;     /* Subtle rounded corners */
        padding: 0px;
        text-align: left;        /* Align all text to the left */
        transition: transform 0.3s;
    }
    
    .post-item h3 {
        font-size: 14px;         /* Adjust the size of the post title */
        margin: 0;               /* Remove margin for tighter alignment */
        font-weight: bold;       /* Make title bold for emphasis */
        padding-top: 9px;
    }
    
    /* Ensure post-thumbnail is square with rounded corners and background image */
    .post-thumbnail {
        width: 100%;
        height: 0;
        padding-top: 100%;
        background-size: cover;
        background-position: center center;
        border-radius: 10px;     /* Rounded corners */
        overflow: hidden;       /* Hide overflow */
        display: block;
        margin: 4px 0;  
    }
    
    /* Additional text styling */
    .post-item p {
        font-size: 12px;         /* Slightly smaller text */
        margin: 4px 0;           /* Add spacing between paragraphs */
    }
    
    /* Campus location styling */
.post-item p.campus-location {
    font-size: 12px;        /* Increased font size */
    color: #00457C;         /* Changed to a more visible color */
    font-weight: bold;      /* Make the text bold */
    margin: 4px 0;          /* Ensure consistent spacing */
}
    
    /* Hover effect for the post item */ 
    .post-item:hover {
        transform: scale(1.01);  /* Slight zoom on hover */
    }
    
       /* Bold and consistent price display */
   /* Operate by line */
.post-item p.operate-by {
    font-size: 11px; 
    font-weight: bold;  /* Make entire content bold, including the value */
    color: #333;        /* Optional: Ensure the text is easily readable */
    margin: 4px 0;      /* Consistent spacing */
}

/* Price line */
.post-item p.price .amount {
    font-weight: bold; /* Keep the price amount bold */
    color: #333;       /* Optional: Darker color for emphasis */
    
}

.post-item p.price .per-year {
    font-weight: normal;  /* Regular weight for less emphasis */
    color: #777;          /* Lighter color for distinction */
}

.post-item p {
    font-size: 12px;         /* Slightly smaller text for general content */
    margin: 4px 0;           /* Adjust spacing to fit new bold styles */
}/* End custom CSS */