/* =========================================================
SALARY SLIP - PRO SEARCH UI
========================================================= */

.salary-page {
scroll-behavior: smooth;
}

.salary-hero {
position: relative;
overflow: hidden;
}

.salary-hero-content {
max-width: 760px;
}

.salary-hero-content h1 {
margin-bottom: 12px;
}

.salary-hero-content p {
max-width: 650px;
}

.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}

.hero-trust span {
display: inline-flex;
align-items: center;
padding: 7px 11px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 999px;
font-size: 13px;
color: rgba(255,255,255,.82);
background: rgba(255,255,255,.05);
}

/* SEARCH CARD */

.salary-search-card {
position: relative;
margin-top: -10px;
z-index: 2;
}

.search-card-header {
display: flex;
align-items: flex-start;
gap: 14px;
}

.search-icon {
width: 44px;
height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #f1f5f9;
font-size: 24px;
}

.search-card-header h2 {
margin: 5px 0 5px;
}

.search-card-header p {
margin: 0;
color: #68737e;
}

/* FORM */

.salary-search-grid {
margin-top: 24px;
}

.form-field {
display: block;
margin: 0;
}

.field-label {
display: block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
color: #25313c;
}

.field-control {
position: relative;
display: block;
}

.field-icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
font-size: 15px;
pointer-events: none;
opacity: .65;
}

.field-control select,
.field-control input {
width: 100%;
min-height: 48px;
padding: 0 14px 0 42px;
border: 1px solid #d9e0e7;
border-radius: 11px;
background: #fff;
color: #26313b;
outline: none;
transition: border-color .2s ease,
box-shadow .2s ease,
background .2s ease;
}

.field-control select:focus,
.field-control input:focus {
border-color: #7b8794;
box-shadow: 0 0 0 4px rgba(70, 80, 90, .08);
}

.field-control select:disabled {
background: #f5f7f9;
cursor: not-allowed;
}

.field-help {
display: block;
margin-top: 6px;
font-size: 12px;
color: #7a858f;
}

.field-help.valid {
color: #16834b;
}

/* SEARCH BUTTON */

.salary-search-btn {
position: relative;
min-width: 205px;
min-height: 48px;
margin-top: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.salary-search-btn.loading {
cursor: wait;
opacity: .82;
}

.btn-loader {
display: none;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: salarySpin .7s linear infinite;
}

.salary-search-btn.loading .btn-loader {
display: inline-block;
}

.salary-search-btn.loading .btn-icon {
display: none;
}

@keyframes salarySpin {
to {
transform: rotate(360deg);
}
}

/* STATUS */

.search-status {
display: flex;
align-items: center;
gap: 9px;
margin-top: 16px;
padding: 11px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
}

.search-status-error {
color: #9b2c2c;
background: #fff5f5;
border: 1px solid #ffd9d9;
}

.search-status-success {
color: #17663f;
background: #f2fbf6;
border: 1px solid #d4f1df;
}

.search-status-loading {
color: #47515b;
background: #f5f7f9;
border: 1px solid #e2e7eb;
}

.status-spinner {
width: 15px;
height: 15px;
border: 2px solid #9aa3ab;
border-right-color: transparent;
border-radius: 50%;
animation: salarySpin .7s linear infinite;
}

/* RESULT AREA */

.salary-result-area {
scroll-margin-top: 25px;
}

.salary-result-card {
overflow: hidden;
animation: salaryResultIn .42s ease both;
}

@keyframes salaryResultIn {
from {
opacity: 0;
transform: translateY(18px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* RESULT HEADER */

.result-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}

.result-person {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}

.result-avatar {
width: 52px;
height: 52px;
min-width: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #eef1f4;
color: #3b4650;
font-size: 19px;
font-weight: 800;
}

.result-person h2 {
margin: 4px 0 3px;
}

.result-person p {
margin: 0;
color: #737e88;
font-size: 13px;
}

.result-dot {
margin: 0 5px;
opacity: .6;
}

.result-action {
display: inline-flex;
align-items: center;
gap: 9px;
white-space: nowrap;
}

.action-arrow {
font-size: 17px;
transition: transform .2s ease;
}

.result-action:hover .action-arrow {
transform: translateX(3px);
}

/* DIVIDER */

.result-divider {
height: 1px;
background: #e8ecef;
margin: 22px 0;
}

/* SUMMARY */

.summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}

.summary-item {
padding: 16px;
border: 1px solid #e8ecef;
border-radius: 12px;
background: #fafbfc;
}

.summary-item span {
display: block;
margin-bottom: 7px;
color: #737e88;
font-size: 12px;
font-weight: 600;
}

.summary-item strong {
display: block;
font-size: 17px;
color: #29343e;
}

.summary-net {
background: #f4faf6;
border-color: #dcefe3;
}

.summary-net strong {
color: #17663f;
}

/* NO RESULT */

.salary-notice {
display: flex;
align-items: flex-start;
gap: 12px;
animation: salaryResultIn .35s ease both;
}

.notice-icon {
width: 30px;
height: 30px;
min-width: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff0f0;
color: #b33939;
font-weight: 800;
}

.salary-notice strong {
display: block;
margin-bottom: 3px;
}

.salary-notice p {
margin: 0;
color: #69747e;
font-size: 13px;
}

/* MOBILE */

@media (max-width: 850px) {

.summary {
grid-template-columns: repeat(2, 1fr);
}

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

.result-action {
width: 100%;
justify-content: center;
}

}

@media (max-width: 640px) {

.salary-hero-content h1 {
font-size: 30px;
}

.hero-trust {
gap: 7px;
}

.hero-trust span {
font-size: 12px;
padding: 6px 9px;
}

.salary-search-card {
margin-top: 0;
}

.search-card-header {
gap: 10px;
}

.search-icon {
width: 39px;
height: 39px;
min-width: 39px;
}

.salary-search-grid {
grid-template-columns: 1fr;
}

.salary-search-btn {
width: 100%;
}

.result-person {
align-items: flex-start;
}

.result-avatar {
width: 44px;
height: 44px;
min-width: 44px;
}

.result-person h2 {
font-size: 20px;
}

.summary {
grid-template-columns: 1fr 1fr;
gap: 8px;
}

.summary-item {
padding: 13px;
}

.summary-item strong {
font-size: 15px;
}

}

@media (max-width: 390px) {

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

}