@font-face{
    font-family:"Vazirmatn";
    src:url("/assets/fonts/Vazirmatn-VF.ttf")
        format("truetype");
    font-weight:100 900;
    font-display:swap;
}

@font-face{
    font-family:"Estedad";
    src:url("/assets/fonts/Estedad-VF.ttf")
        format("truetype");
    font-weight:100 900;
    font-display:swap;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:"Vazirmatn",Tahoma,sans-serif;
    background:#f5f7f9;
    color:#172b3c;
}

button,
input,
textarea,
select{
    font:inherit;
}

.tr-header{
    width:min(1180px,calc(100% - 30px));
    margin:24px auto 0;
    padding:14px 20px;
    display:flex;
    align-items:center;
    gap:18px;
    background:#fff;
    border:1px solid #e7ebef;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.tr-logo img{
    width:125px;
    height:auto;
    display:block;
}

.tr-header strong{
    display:block;
    font-family:"Estedad","Vazirmatn";
    font-size:19px;
}

.tr-header span{
    color:#75818c;
    font-size:13px;
}

.tr-wrap{
    width:min(1050px,calc(100% - 30px));
    margin:38px auto 70px;
}

.tr-intro{
    text-align:center;
    max-width:750px;
    margin:0 auto 30px;
}

.tr-kicker{
    color:#118843;
    font-weight:700;
    margin-bottom:6px;
}

.tr-intro h1,
.tr-success-wrap h1{
    font-family:"Estedad","Vazirmatn";
    font-size:40px;
    margin:8px 0 14px;
}

.tr-intro p{
    color:#66727d;
    line-height:2;
}

.tr-warning{
    padding:14px 18px;
    margin-top:18px;
    background:#fff8e6;
    border:1px solid #f3dfab;
    border-radius:14px;
    line-height:1.9;
    color:#755d24;
}

.tr-errors{
    margin:0 0 20px;
    padding:16px 20px;
    background:#fff0f1;
    border:1px solid #f6c5ca;
    border-radius:16px;
    color:#a31d2b;
}

.tr-card{
    margin-bottom:18px;
    padding:26px;
    background:#fff;
    border:1px solid #e5e9ed;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(15,23,42,.04);
}

.tr-card-title{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:24px;
}

.tr-card-title > span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#f2f5f7;
    color:#9aa5ae;
    font-family:"Estedad";
    font-weight:700;
}

.tr-card-title h2{
    margin:0;
    font-family:"Estedad","Vazirmatn";
    font-size:21px;
}

.tr-card-title p{
    margin:3px 0 0;
    color:#8a949d;
    font-size:13px;
}

.tr-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
}

.tr-grid label{
    display:flex;
    flex-direction:column;
    gap:7px;
    color:#34495a;
    font-size:14px;
    font-weight:600;
}

.tr-grid input,
.tr-grid textarea,
.tr-grid select{
    width:100%;
    padding:12px 14px;
    color:#172b3c;
    background:#fff;
    border:1px solid #d9e0e5;
    border-radius:12px;
    outline:none;
    transition:.18s ease;
}

.tr-grid input:focus,
.tr-grid textarea:focus,
.tr-grid select:focus{
    border-color:#1aa057;
    box-shadow:0 0 0 3px rgba(26,160,87,.08);
}

.tr-full{
    grid-column:1 / -1;
}

.tr-check{
    flex-direction:row !important;
    align-items:center;
    font-weight:500 !important;
}

.tr-check input{
    width:20px;
    height:20px;
}

.tr-submit{
    text-align:center;
    margin-top:26px;
}

.tr-submit button,
.tr-home-btn,
.tr-admin-public-link,
.tr-view-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    text-decoration:none;
    cursor:pointer;
}

.tr-submit button{
    min-width:240px;
    padding:14px 24px;
    color:#fff;
    background:#ed2338;
    border-radius:14px;
    font-weight:800;
    box-shadow:0 9px 24px rgba(237,35,56,.22);
}

.tr-submit p{
    color:#8a949d;
    font-size:13px;
}

.tr-success-wrap{
    width:min(680px,calc(100% - 30px));
    margin:70px auto;
    padding:38px;
    text-align:center;
    background:#fff;
    border:1px solid #e4e9ed;
    border-radius:24px;
    box-shadow:0 14px 40px rgba(15,23,42,.07);
}

.tr-success-icon{
    width:72px;
    height:72px;
    margin:0 auto;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eaf8ef;
    color:#159447;
    font-size:36px;
    font-weight:900;
}

.tr-tracking{
    margin:28px 0;
    padding:20px;
    border-radius:17px;
    background:#f3f7f9;
}

.tr-tracking span{
    display:block;
    color:#7b8791;
}

.tr-tracking strong{
    display:block;
    margin-top:5px;
    direction:ltr;
    font-family:"Estedad";
    font-size:27px;
}

.tr-summary{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.tr-summary > div{
    padding:13px;
    background:#fafbfc;
    border-radius:12px;
}

.tr-summary span{
    display:block;
    color:#8a949d;
    font-size:12px;
}

.tr-summary strong{
    display:block;
    margin-top:4px;
}

.tr-home-btn{
    margin-top:24px;
    padding:12px 20px;
    color:#fff;
    background:#173b58;
    border-radius:12px;
}

.tr-admin-page{
    width:100%;
    direction:rtl;
}

.tr-admin-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.tr-admin-head h1{
    margin:0;
    font-family:"Estedad","Vazirmatn";
}

.tr-admin-head p{
    color:#78848e;
}

.tr-admin-public-link{
    padding:10px 15px;
    color:#fff;
    background:#173b58;
    border-radius:11px;
}

.tr-filter{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:18px;
}

.tr-filter a{
    padding:8px 13px;
    color:#53616c;
    text-decoration:none;
    background:#fff;
    border:1px solid #dde4e8;
    border-radius:10px;
}

.tr-filter a.active{
    color:#fff;
    background:#173b58;
}

.tr-table-wrap{
    overflow:auto;
    background:#fff;
    border:1px solid #e3e8ec;
    border-radius:16px;
}

.tr-table{
    width:100%;
    border-collapse:collapse;
}

.tr-table th,
.tr-table td{
    padding:13px 14px;
    text-align:right;
    border-bottom:1px solid #edf0f2;
    white-space:nowrap;
}

.tr-table th{
    background:#f7f9fa;
    color:#64717c;
    font-size:13px;
}

.tr-table td small{
    display:block;
    color:#89949c;
}

.ltr{
    direction:ltr;
    text-align:left !important;
}

.tr-view-btn{
    padding:7px 11px;
    color:#173b58;
    background:#edf4f8;
    border-radius:9px;
}

.tr-status{
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    font-size:12px;
}

.tr-status-new{
    background:#fff3d7;
    color:#9a6a00;
}

.tr-status-reviewing{
    background:#e7f1ff;
    color:#2864a1;
}

.tr-status-approved{
    background:#e9f8ee;
    color:#168943;
}

.tr-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.tr-detail-card{
    padding:22px;
    background:#fff;
    border:1px solid #e4e9ed;
    border-radius:18px;
}

.tr-detail-card h2{
    margin-top:0;
    font-family:"Estedad","Vazirmatn";
}

.tr-detail-card dl{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:11px;
}

.tr-detail-card dt{
    color:#7c8790;
}

.tr-detail-card dd{
    margin:0;
    color:#22384a;
    overflow-wrap:anywhere;
}

.tr-empty{
    padding:35px;
    text-align:center;
    background:#fff;
    border-radius:16px;
    color:#87929b;
}

@media(max-width:700px){

    .tr-header{
        margin-top:12px;
        padding:10px 13px;
        border-radius:17px;
    }

    .tr-logo img{
        width:95px;
    }

    .tr-wrap{
        margin-top:25px;
    }

    .tr-intro h1,
    .tr-success-wrap h1{
        font-size:30px;
    }

    .tr-card{
        padding:19px 16px;
    }

    .tr-grid{
        grid-template-columns:1fr;
    }

    .tr-full{
        grid-column:auto;
    }

    .tr-summary{
        grid-template-columns:1fr;
    }

    .tr-detail-grid{
        grid-template-columns:1fr;
    }

    .tr-admin-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .tr-detail-card dl{
        grid-template-columns:1fr;
        gap:4px;
    }

    .tr-detail-card dd{
        margin-bottom:10px;
    }
}


/* ===== TRANSPORT REVIEW PANEL V1 ===== */

.tr-review-panel{
    margin-top:22px;
    padding:26px;
    background:#fff;
    border:1px solid #e3e8ec;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(15,23,42,.04);
}

.tr-review-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.tr-review-head h2{
    margin:4px 0;
    font-family:"Estedad","Vazirmatn";
}

.tr-review-head p{
    margin:5px 0 0;
    color:#77838d;
}

.tr-review-kicker{
    color:#168c47;
    font-size:13px;
    font-weight:700;
}

.tr-current-status{
    min-width:145px;
    padding:12px 15px;
    text-align:center;
    background:#f5f8fa;
    border-radius:13px;
}

.tr-current-status span{
    display:block;
    color:#89949d;
    font-size:12px;
}

.tr-current-status strong{
    display:block;
    margin-top:3px;
}

.tr-review-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.tr-review-grid label{
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:14px;
    font-weight:600;
    color:#34495a;
}

.tr-review-grid input,
.tr-review-grid textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid #d8e0e5;
    border-radius:11px;
    outline:none;
    background:#fff;
}

.tr-review-grid input:focus,
.tr-review-grid textarea:focus{
    border-color:#168c47;
    box-shadow:0 0 0 3px rgba(22,140,71,.08);
}

.tr-review-full{
    grid-column:1/-1;
}

.tr-review-actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:22px;
}

.tr-review-actions button{
    padding:11px 17px;
    border:0;
    border-radius:11px;
    cursor:pointer;
    font-weight:700;
}

.tr-btn-save{
    color:#173b58;
    background:#edf3f6;
}

.tr-btn-review{
    color:#fff;
    background:#2d78b8;
}

.tr-btn-approve{
    color:#fff;
    background:#168c47;
}

.tr-btn-reject{
    color:#fff;
    background:#d93646;
}

.tr-review-error{
    margin-bottom:18px;
    padding:13px 16px;
    color:#a3222f;
    background:#fff0f1;
    border:1px solid #f5cbd0;
    border-radius:12px;
}

.tr-review-success{
    margin-bottom:18px;
    padding:13px 16px;
    color:#13763b;
    background:#eaf8ef;
    border:1px solid #cbead5;
    border-radius:12px;
}

.tr-approval-info{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-top:16px;
    padding:12px 14px;
    background:#f7f9fa;
    border-radius:11px;
    color:#65727d;
}

.tr-contract-next{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:22px;
    padding:16px;
    color:#126c36;
    background:#eaf8ef;
    border:1px solid #c9ead4;
    border-radius:13px;
}

@media(max-width:700px){

    .tr-review-panel{
        padding:18px 15px;
    }

    .tr-review-head{
        flex-direction:column;
    }

    .tr-current-status{
        width:100%;
    }

    .tr-review-grid{
        grid-template-columns:1fr;
    }

    .tr-review-full{
        grid-column:auto;
    }

    .tr-review-actions{
        flex-direction:column;
    }

    .tr-review-actions button{
        width:100%;
    }

    .tr-contract-next{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* Fadak - transport contract preview button */
.tr-contract-preview-action{
    margin-top:14px;
}
.tr-contract-preview-action a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:10px 24px;
    background:#2f80c3;
    color:#fff !important;
    text-decoration:none !important;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(47,128,195,.18);
}
.tr-contract-preview-action a:hover{
    opacity:.92;
}

/* Contract preview link - force button appearance */
a[href*="/transport-contracts/"][href$="/preview"]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:52px !important;
    padding:0 26px !important;
    background:#2f80c3 !important;
    color:#fff !important;
    text-decoration:none !important;
    border:none !important;
    border-radius:14px !important;
    font-weight:700 !important;
    cursor:pointer !important;
    box-shadow:0 6px 16px rgba(47,128,195,.20) !important;
}

/* ===== TRANSPORT DETAIL COMPACT CARDS V1 ===== */

.tr-detail-grid{
    gap:14px !important;
    align-items:start !important;
}

.tr-detail-card{
    padding:13px 16px !important;
    border-radius:14px !important;
}

.tr-detail-card h2{
    margin:0 0 5px !important;
}

.tr-detail-card dl{
    gap:5px 10px !important;
    margin:0 !important;
}

.tr-detail-card dt,
.tr-detail-card dd{
    line-height:1.45 !important;
}

.tr-detail-card dd{
    margin:0 !important;
}


/* ===== SIGNED COPY BUTTON COMPACT V1 ===== */

.tr-signed-copy-panel .tr-review-actions{
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    direction:rtl !important;
    margin-top:10px !important;
}

.tr-signed-copy-panel .tr-review-actions button{
    width:auto !important;
    min-width:210px !important;
    max-width:280px !important;
    min-height:44px !important;
    padding:10px 18px !important;
    margin:0 !important;
    border-radius:10px !important;
    font-size:14px !important;
    white-space:nowrap !important;
}


/* ===== SIGNED COPY FORM LAYOUT V2 ===== */

.tr-signed-copy-panel .tr-contract-send-form{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    align-items:stretch !important;
}

.tr-signed-copy-panel .tr-contract-send-form > label{
    width:100% !important;
    margin:0 !important;
}

.tr-signed-copy-panel .tr-contract-send-form > small{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    text-align:right !important;
    line-height:1.7 !important;
}

.tr-signed-copy-panel .tr-contract-send-form > button{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:42px !important;
    padding:9px 18px !important;
    margin:2px 0 0 auto !important;
    border-radius:10px !important;
    font-size:14px !important;
    white-space:nowrap !important;
}


/* ===== WHATSAPP BUTTON ===== */
.tr-whatsapp-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:9px 18px !important;
    border-radius:10px !important;
    background:#2f80c3 !important;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:700 !important;
    cursor:pointer !important;
}

.tr-whatsapp-btn:hover{
    opacity:.92;
}


/* ===== WHATSAPP LINK AS BUTTON V2 ===== */

a.tr-whatsapp-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:9px 18px !important;
    border-radius:10px !important;
    background:#2f80c3 !important;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:700 !important;
    font-size:14px !important;
    line-height:1 !important;
    cursor:pointer !important;
    border:0 !important;
    box-shadow:0 5px 14px rgba(47,128,195,.18) !important;
}

a.tr-whatsapp-btn:hover,
a.tr-whatsapp-btn:focus{
    color:#fff !important;
    text-decoration:none !important;
    opacity:.92 !important;
}


/* ===== WHATSAPP GREEN BUTTON ===== */
a.tr-whatsapp-btn{
    background:#25D366 !important;
    box-shadow:0 5px 14px rgba(37,211,102,.22) !important;
}

a.tr-whatsapp-btn:hover,
a.tr-whatsapp-btn:focus{
    background:#1ebe5d !important;
    color:#fff !important;
}