.offer-summary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-bottom:20px;
}

.offer-summary-card{
    background:white;
    border:1px solid var(--border);
    border-radius:12px;
    padding:18px;
}

.offer-summary-label{
    color:var(--muted);
    font-size:11px;
    margin-bottom:5px;
}

.offer-summary-value{
    font-family:"Roboto Condensed",sans-serif;
    color:var(--navy);
    font-size:27px;
    font-weight:800;
}

.offers-list{
    display:grid;
    gap:15px;
}

.offer-card{
    background:white;
    border:1px solid var(--border);
    border-radius:13px;
    overflow:hidden;
}

.offer-card.sent{
    border-color:#cbc6ff;
}

.offer-card-head{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:20px 22px;
    border-bottom:1px solid var(--border);
}

.offer-title{
    font-family:"Roboto Condensed",sans-serif;
    color:var(--navy);
    font-size:21px;
    font-weight:700;
}

.offer-company{
    color:#475467;
    font-size:12px;
    margin-top:5px;
}

.offer-status{
    height:max-content;
    border-radius:16px;
    padding:6px 10px;
    font-size:10px;
    font-weight:700;
}

.offer-status.SENT{
    background:#fff7ed;
    color:#c2410c;
}

.offer-status.ACCEPTED{
    background:#ecfdf3;
    color:#067647;
}

.offer-status.DECLINED{
    background:#fef3f2;
    color:#b42318;
}

.offer-status.EXPIRED{
    background:#f2f4f7;
    color:#667085;
}

.offer-card-body{
    padding:20px 22px;
}

.offer-main-data{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.offer-data{
    background:#f8f9fb;
    border-radius:9px;
    padding:13px;
}

.offer-data-label{
    color:#667085;
    font-size:10px;
    margin-bottom:5px;
}

.offer-data-value{
    color:var(--navy);
    font-size:13px;
    font-weight:700;
}

.offer-actions{
    display:flex;
    gap:8px;
    margin-top:18px;
    flex-wrap:wrap;
}

.offer-btn{
    border:1px solid #d0d5dd;
    background:white;
    color:#344054;
    border-radius:22px;
    padding:10px 15px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.offer-btn:hover{
    border-color:var(--purple);
    color:var(--purple);
}

.offer-btn.primary{
    border-color:var(--purple);
    background:var(--purple);
    color:white;
}

.offer-btn.accept{
    border-color:#12b76a;
    background:#12b76a;
    color:white;
}

.offer-btn.decline{
    border-color:#fda29b;
    color:#b42318;
}

.offer-response-message{
    display:none;
    border-radius:9px;
    padding:12px 14px;
    margin-bottom:17px;
    font-size:12px;
}

.offer-response-message.success{
    display:block;
    background:#ecfdf3;
    color:#067647;
}

.offer-response-message.error{
    display:block;
    background:#fef3f2;
    color:#b42318;
}

.offer-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:700;
    background:rgba(8,26,53,.56);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:auto;
    padding:65px 18px;
}

.offer-modal{
    width:min(760px,100%);
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 25px 80px rgba(0,0,0,.22);
}

.offer-modal-head{
    padding:24px 27px;
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.offer-modal-title{
    font-family:"Roboto Condensed",sans-serif;
    color:var(--navy);
    font-size:27px;
    font-weight:800;
}

.offer-modal-body{
    padding:25px 27px;
}

.offer-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.offer-detail{
    background:#f8f9fb;
    border-radius:9px;
    padding:13px;
}

.offer-detail-label{
    color:#667085;
    font-size:10px;
    margin-bottom:5px;
}

.offer-detail-value{
    color:var(--navy);
    font-size:12px;
    font-weight:650;
}

.offer-description{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--border);
    color:#475467;
    font-size:12px;
    line-height:1.7;
    white-space:pre-line;
}

.offer-warning{
    margin-top:20px;
    padding:15px;
    border:1px solid #fedf89;
    background:#fffaeb;
    border-radius:10px;
    color:#93370d;
    font-size:11px;
    line-height:1.55;
}

@media(max-width:750px){
    .offer-summary{
        grid-template-columns:1fr;
    }

    .offer-main-data,
    .offer-detail-grid{
        grid-template-columns:1fr;
    }
}