﻿
/* =========================================================
   PRE-LAUNCH B
   Mobile Final Polish + Remove Bottom CTA + Payslip Mobile-first
   ========================================================= */

:root{
    --tw-mobile-x:16px;
    --tw-mobile-radius:16px;
    --tw-mobile-border:#dfe7e4;
    --tw-mobile-text:#173f35;
    --tw-mobile-muted:#71817a;
    --tw-mobile-primary:#266652;
    --tw-mobile-gold:#d1b675;
}

/* ---------- Global public mobile safety ---------- */
body.teachers-public-site,
body.teachers-payslip-site{
    overflow-x:hidden!important;
}

body.teachers-public-site *,
body.teachers-payslip-site *{
    box-sizing:border-box;
}

body.teachers-public-site img,
body.teachers-payslip-site img,
body.teachers-public-site video,
body.teachers-payslip-site video,
body.teachers-public-site svg,
body.teachers-payslip-site svg{
    max-width:100%;
}

body.teachers-public-site :is(
    .container,.container-fluid,.shell,.section-shell,.content-shell
),
body.teachers-payslip-site :is(
    .container,.container-fluid,.shell,.section-shell,.content-shell
){
    min-width:0;
}

/* ---------- Remove fixed bottom CTA completely ---------- */
body.teachers-public-site .teachers-public-bottom-cta,
body.teachers-public-site .mobile-bottom-cta,
body.teachers-public-site .bottom-cta,
body.teachers-public-site .mobile-sticky-actions,
body.teachers-public-site .sticky-mobile-actions,
body.teachers-public-site .fixed-mobile-actions,
body.teachers-public-site [data-mobile-bottom-cta],
body.teachers-public-site [data-bottom-cta]{
    display:none!important;
}

/* Remove any old compensation spacing used for bottom CTA */
body.teachers-public-site{
    padding-bottom:0!important;
}

body.teachers-public-site main,
body.teachers-public-site footer{
    margin-bottom:0!important;
}

/* ---------- Header/mobile menu polish ---------- */
@media(max-width:760px){
    body.teachers-public-site header,
    body.teachers-payslip-site header{
        max-width:100vw;
    }

    body.teachers-public-site :is(
        .site-header,
        .main-header,
        .navbar,
        .public-header
    ){
        min-height:64px;
    }

    body.teachers-public-site :is(
        .mobile-menu,
        .mobile-nav,
        .offcanvas,
        .drawer-menu
    ){
        max-width:min(88vw,360px)!important;
        width:min(88vw,360px)!important;
    }

    body.teachers-public-site :is(
        .mobile-menu a,
        .mobile-nav a,
        .offcanvas a,
        .drawer-menu a
    ){
        min-height:44px;
        font-size:.94rem!important;
        line-height:1.4;
    }
}

/* ---------- Public cards/forms responsive ---------- */
@media(max-width:760px){
    body.teachers-public-site :is(
        .card,.program-card,.branch-card,.story-card,.faq-card,
        .pricing-card,.form-card,.content-card
    ){
        max-width:100%;
        border-radius:var(--tw-mobile-radius);
    }

    body.teachers-public-site :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea,
        .form-control,
        .form-select
    ){
        width:100%!important;
        min-width:0!important;
        min-height:46px;
        font-size:16px!important; /* prevents iOS zoom */
    }

    body.teachers-public-site textarea{
        min-height:110px;
    }

    body.teachers-public-site :is(
        .row,.grid,.form-row,.fields-row,.cards-row
    ){
        min-width:0;
    }

    body.teachers-public-site table{
        width:100%;
        max-width:100%;
    }

    body.teachers-public-site .table-responsive{
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

/* ---------- Compact mobile footer ---------- */
@media(max-width:760px){
    body.teachers-public-site footer :is(
        .footer-main,
        .footer-grid,
        .footer-columns,
        .footer-description,
        .footer-links-large,
        .footer-explore,
        .footer-contact-details
    ){
        display:none!important;
    }

    body.teachers-public-site footer{
        padding-bottom:14px!important;
    }

    body.teachers-public-site footer :is(
        .footer-bottom,
        .footer-mini,
        .footer-social,
        .footer-contact-icons
    ){
        max-width:100%;
    }
}

/* =========================================================
   PAYSLIP MOBILE-FIRST
   ========================================================= */

body.teachers-payslip-site{
    background:#f5f8f7;
}

body.teachers-payslip-site main{
    overflow:visible!important;
}

body.teachers-payslip-site .teachers-payslip-canvas{
    width:min(1180px,calc(100% - 28px))!important;
    max-width:1180px!important;
    margin:18px auto 28px!important;
}

/* All detected top-level Payslip content cards */
body.teachers-payslip-site .teachers-payslip-card{
    border:1px solid #dfe7e4!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 9px 26px rgba(20,61,50,.065)!important;
}

/* Mobile title zone */
body.teachers-payslip-site .teachers-payslip-title{
    margin:0 0 5px!important;
    color:#173f35!important;
    font-size:1.65rem!important;
    line-height:1.25!important;
    font-weight:950!important;
}

body.teachers-payslip-site .teachers-payslip-subtitle{
    margin:0!important;
    color:#71817a!important;
    font-size:.9rem!important;
    line-height:1.7!important;
}

/* Search/filter form */
body.teachers-payslip-site .teachers-payslip-filter{
    padding:18px!important;
}

body.teachers-payslip-site .teachers-payslip-filter
:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    min-height:48px!important;
    border-radius:11px!important;
    border:1px solid #d6e1dd!important;
    background:#fff!important;
    font-size:.95rem!important;
}

body.teachers-payslip-site .teachers-payslip-filter button[type="submit"]{
    min-height:48px!important;
    border-radius:11px!important;
    background:#266652!important;
    color:#fff!important;
    font-size:.92rem!important;
    font-weight:900!important;
}

/* Quick period chips */
body.teachers-payslip-site .teachers-payslip-periods{
    display:flex!important;
    align-items:center;
    gap:7px!important;
    flex-wrap:wrap!important;
    margin-top:10px!important;
}

body.teachers-payslip-site .teachers-payslip-periods
:is(a,button){
    min-height:36px!important;
    padding:7px 11px!important;
    border:1px solid #dce6e2!important;
    border-radius:999px!important;
    background:#f8fbfa!important;
    color:#48635a!important;
    font-size:.8rem!important;
    font-weight:800!important;
}

/* Teacher/result information */
body.teachers-payslip-site .teachers-payslip-result{
    padding:20px!important;
}

body.teachers-payslip-site .teachers-payslip-result h1,
body.teachers-payslip-site .teachers-payslip-result h2,
body.teachers-payslip-site .teachers-payslip-result h3{
    color:#173f35!important;
}

/* Financial status badges */
body.teachers-payslip-site .teachers-payslip-status{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:30px!important;
    padding:5px 10px!important;
    border-radius:999px!important;
    font-size:.77rem!important;
    font-weight:900!important;
}

body.teachers-payslip-site .teachers-payslip-status.is-estimated{
    background:#fff7dd!important;
    color:#806313!important;
}

body.teachers-payslip-site .teachers-payslip-status.is-approved{
    background:#eef7f3!important;
    color:#1d6f51!important;
}

body.teachers-payslip-site .teachers-payslip-status.is-transferred{
    background:#e8f6ef!important;
    color:#126d4b!important;
    box-shadow:inset 0 0 0 1px #b9dfce!important;
}

/* Statement/detail sections */
body.teachers-payslip-site .teachers-payslip-section{
    padding:17px!important;
    border:1px solid #e2e9e6!important;
    border-radius:15px!important;
    background:#fff!important;
}

body.teachers-payslip-site .teachers-payslip-section + .teachers-payslip-section{
    margin-top:10px!important;
}

/* Review textarea/button */
body.teachers-payslip-site textarea{
    width:100%!important;
    min-height:115px!important;
    border-radius:12px!important;
    font-size:16px!important;
}

body.teachers-payslip-site form button{
    touch-action:manipulation;
}

/* Teacher Portal CTA */
body.teachers-payslip-site .tp-entry-card{
    position:relative!important;
    bottom:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:12px 0 16px!important;
}

/* Mobile-first layout */
@media(max-width:760px){
    body.teachers-payslip-site{
        background:#f4f7f6!important;
    }

    body.teachers-payslip-site .teachers-payslip-canvas{
        width:calc(100% - 16px)!important;
        margin:10px auto 18px!important;
    }

    body.teachers-payslip-site .teachers-payslip-title{
        font-size:1.28rem!important;
        text-align:right!important;
    }

    body.teachers-payslip-site .teachers-payslip-subtitle{
        font-size:.8rem!important;
        text-align:right!important;
    }

    body.teachers-payslip-site .teachers-payslip-card{
        border-radius:16px!important;
        box-shadow:0 7px 18px rgba(20,61,50,.055)!important;
    }

    body.teachers-payslip-site .teachers-payslip-filter{
        padding:14px!important;
    }

    body.teachers-payslip-site .teachers-payslip-filter
    :is(label,.form-label){
        display:block!important;
        margin-bottom:5px!important;
        font-size:.8rem!important;
        font-weight:800!important;
        color:#3f5c53!important;
    }

    body.teachers-payslip-site .teachers-payslip-filter
    :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
        width:100%!important;
        min-height:48px!important;
        margin-bottom:9px!important;
        font-size:16px!important;
    }

    body.teachers-payslip-site .teachers-payslip-filter
    button[type="submit"]{
        width:100%!important;
        min-height:49px!important;
        margin-top:3px!important;
    }

    body.teachers-payslip-site .teachers-payslip-periods{
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:6px!important;
    }

    body.teachers-payslip-site .teachers-payslip-periods
    :is(a,button){
        width:100%!important;
        min-width:0!important;
        padding:7px 5px!important;
        font-size:.73rem!important;
        white-space:normal!important;
        text-align:center!important;
    }

    body.teachers-payslip-site .teachers-payslip-result{
        padding:16px!important;
    }

    body.teachers-payslip-site .teachers-payslip-result
    :is(h1,h2){
        font-size:1.12rem!important;
        line-height:1.45!important;
    }

    body.teachers-payslip-site .teachers-payslip-section{
        padding:14px!important;
        border-radius:14px!important;
    }

    body.teachers-payslip-site .teachers-payslip-section table{
        display:block!important;
        width:100%!important;
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch;
    }

    body.teachers-payslip-site .teachers-payslip-section table th,
    body.teachers-payslip-site .teachers-payslip-section table td{
        white-space:nowrap;
        font-size:.78rem!important;
        padding:9px!important;
    }

    body.teachers-payslip-site .tp-entry-card{
        margin:10px 0 14px!important;
    }

    body.teachers-payslip-site .tp-entry-card button{
        width:100%!important;
        min-height:48px!important;
    }

    body.teachers-payslip-site .teachers-payslip-review-form{
        padding:14px!important;
    }
}

@media(max-width:430px){
    :root{
        --tw-mobile-x:12px;
    }

    body.teachers-payslip-site .teachers-payslip-periods{
        grid-template-columns:1fr 1fr 1fr!important;
    }
}

/* Final guard against accidental horizontal overflow */
@media(max-width:760px){
    body.teachers-public-site,
    body.teachers-payslip-site{
        max-width:100vw!important;
    }

    body.teachers-public-site :is(main,section,article,div,form),
    body.teachers-payslip-site :is(main,section,article,div,form){
        min-width:0;
    }
}
