.offersCard {
max-width: 1100px;
}

.offersHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin-bottom: 24px;
}

.offersHeader h2 {
margin: 0;
font-size: 21px;
letter-spacing: -0.03em;
}

.offersHeader p {
margin: 8px 0 0;
color: var(--wp-muted);
font-size: 14px;
line-height: 1.5;
}

.offersList {
display: flex;
flex-direction: column;
gap: 14px;
}

.offerItem {
border: 1px solid var(--wp-border);
border-radius: 16px;
padding: 18px;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.18s ease;
}

.offerItem:hover {
border-color: #fdba74;
background: var(--wp-orange-soft);
}

.offerInfo {
display: flex;
flex-direction: column;
gap: 6px;
}

.offerListTitle {
font-size: 16px;
font-weight: 650;
}

.offerMeta {
font-size: 13px;
color: var(--wp-muted);
}

.offerBadge {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: #fff;
border: 1px solid #fed7aa;
color: var(--wp-orange-dark);
font-size: 12px;
font-weight: 700;
width: fit-content;
}

.offerActions {
display: flex;
gap: 10px;
}

.emptyState {
text-align: center;
padding: 44px;
color: var(--wp-muted);
}

@media (max-width: 850px) {
.offersHeader {
flex-direction: column;
}

.contactSelect
min-width: 220px;
}

.statusBadge {
display: inline-flex;
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
background: #f9fafb;
border: 1px solid var(--wp-border);
color: #374151;
font-size: 12px;
font-weight: 700;
}

.statusSelect {
min-width: 140px;
}

.offerItem {
border: 1px solid var(--wp-border);
border-radius: 16px;
padding: 18px;
background: #fff;
transition: 0.18s ease;

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

.offerInfo {
display: flex;
flex-direction: column;
gap: 6px;
}

.offerActions {
display: flex;
gap: 10px;
align-items: center;
}

.offerMailModalCard{
width:min(680px, 92vw);
}

.modalBody{
display:flex;
flex-direction:column;
gap:14px;
margin-top:18px;
}

.fieldLabel{
font-size:13px;
font-weight:700;
color:#444;
}

.textInput,
.textArea{
width:100%;
border:1px solid #ddd;
border-radius:14px;
padding:12px 14px;
font:inherit;
outline:none;
}

.textArea{
min-height:180px;
resize:vertical;
}

.textInput:focus,
.textArea:focus{
border-color:#fdba74;
}

.hidden {
display: none !important;
}

.modalOverlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15, 23, 42, 0.35);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}

.modalOverlay.hidden {
display: none !important;
}

.modalCard {
background: #fff;
border-radius: 24px;
padding: 24px;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.modalHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}

.iconButton {
border: none;
background: #f3f4f6;
border-radius: 999px;
width: 34px;
height: 34px;
cursor: pointer;
font-size: 16px;
}

.modalActions {
display: flex;
justify-content: flex-end;
margin-top: 18px;
}

.fieldLabel {
font-size: 13px;
font-weight: 700;
color: #444;
}

.textInput,
.textArea {
width: 100%;
border: 1px solid #ddd;
border-radius: 14px;
padding: 12px 14px;
font: inherit;
outline: none;
}

.textArea {
min-height: 180px;
resize: vertical;
}

.textInput:focus,
.textArea:focus {
border-color: #fdba74;
}