.rq-page,
.rq-page * {
box-sizing: border-box;
}
.rq-page {
direction: rtl;
max-width: 1060px;
margin: 0 auto;
padding: 24px 14px 110px;
color: #172033;
font-family: Tahoma, Arial, sans-serif;
}
.rq-hero {
position: relative;
overflow: hidden;
padding: 28px;
border: 1px solid #dbe7ff;
border-radius: 28px;
background:
radial-gradient(circle at 0 0, rgba(46, 110, 255, .16), transparent 32%),
linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%);
box-shadow: 0 18px 45px rgba(32, 73, 150, .10);
margin-bottom: 18px;
}
.rq-hero::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
left: -50px;
bottom: -60px;
border-radius: 50%;
background: rgba(27, 94, 255, .08);
}
.rq-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
background: #eaf1ff;
color: #1757d7;
font-size: 13px;
font-weight: 800;
}
.rq-hero h1 {
margin: 14px 0 8px;
font-size: clamp(25px, 5vw, 40px);
line-height: 1.25;
}
.rq-hero p {
margin: 0;
max-width: 720px;
color: #5d687c;
font-size: 16px;
line-height: 1.8;
}
.rq-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 18px;
align-items: start;
}
.rq-card {
background: #fff;
border: 1px solid #e4eaf3;
border-radius: 24px;
box-shadow: 0 13px 35px rgba(34, 54, 90, .08);
}
.rq-form-card {
padding: 22px;
}
.rq-side {
position: sticky;
top: 88px;
padding: 20px;
}
.rq-side h2,
.rq-section-title {
margin: 0 0 8px;
font-size: 19px;
}
.rq-side p {
margin: 0 0 14px;
color: #687286;
line-height: 1.75;
font-size: 14px;
}
.rq-steps {
display: grid;
gap: 12px;
}
.rq-step {
display: flex;
gap: 11px;
align-items: flex-start;
}
.rq-step-number {
flex: 0 0 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
background: #155eef;
color: #fff;
font-size: 13px;
font-weight: 900;
}
.rq-step strong {
display: block;
font-size: 14px;
margin-bottom: 3px;
}
.rq-step span {
color: #758095;
font-size: 12px;
line-height: 1.55;
}
.rq-section {
padding-bottom: 22px;
margin-bottom: 22px;
border-bottom: 1px solid #edf0f5;
}
.rq-section:last-child {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.rq-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.rq-section-head small {
color: #7a8495;
}
.rq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
}
.rq-field {
display: grid;
gap: 7px;
}
.rq-field.full {
grid-column: 1 / -1;
}
.rq-field span {
font-size: 13px;
font-weight: 800;
color: #38445a;
}
.rq-field input,
.rq-field select,
.rq-field textarea {
width: 100%;
border: 1px solid #d8dfeb;
border-radius: 14px;
background: #fbfcff;
padding: 13px 14px;
color: #172033;
outline: none;
font: inherit;
transition: .2s ease;
}
.rq-field textarea {
min-height: 130px;
resize: vertical;
line-height: 1.7;
}
.rq-field input:focus,
.rq-field select:focus,
.rq-field textarea:focus {
background: #fff;
border-color: #2a68ee;
box-shadow: 0 0 0 4px rgba(42, 104, 238, .10);
}
.rq-field input[readonly] {
background: #f1f4f8;
color: #596476;
}
.rq-match-status {
padding: 13px 14px;
border-radius: 14px;
background: #f3f6fb;
color: #667286;
font-size: 14px;
margin-bottom: 12px;
}
.rq-match-status.loading {
background: #eef4ff;
color: #175bdc;
}
.rq-match-status.error {
background: #fff0f0;
color: #bc2020;
}
.rq-craftsmen {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.rq-craftsman {
position: relative;
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 11px;
padding: 13px;
border: 2px solid #e4eaf2;
border-radius: 17px;
background: #fff;
cursor: pointer;
transition: .18s ease;
}
.rq-craftsman:hover {
transform: translateY(-2px);
border-color: #a9c2fa;
box-shadow: 0 10px 24px rgba(31, 75, 160, .10);
}
.rq-craftsman.selected {
border-color: #155eef;
background: #f4f8ff;
box-shadow: 0 0 0 4px rgba(21, 94, 239, .08);
}
.rq-craftsman-check {
position: absolute;
left: 9px;
top: 9px;
width: 23px;
height: 23px;
border-radius: 50%;
display: none;
place-items: center;
background: #155eef;
color: #fff;
font-size: 13px;
font-weight: 900;
}
.rq-craftsman.selected .rq-craftsman-check {
display: grid;
}
.rq-craftsman img {
width: 58px;
height: 58px;
border-radius: 15px;
object-fit: cover;
border: 1px solid #e7ebf2;
}
.rq-craftsman-info {
min-width: 0;
}
.rq-craftsman-name {
display: block;
padding-left: 27px;
color: #16223a;
font-weight: 900;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rq-craftsman-meta {
margin-top: 4px;
color: #6b7688;
font-size: 12px;
line-height: 1.55;
}
.rq-rating {
margin-top: 5px;
color: #e69b00;
font-size: 12px;
font-weight: 800;
}
.rq-actions {
grid-column: 1 / -1;
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 2px;
}
.rq-mini-link {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #dce5f2;
border-radius: 50%;
text-decoration: none;
background: #f5f8fc;
color: #315277;
font-size: 17px;
font-weight: 800;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.rq-mini-link:hover {
transform: translateY(-1px) scale(1.04);
box-shadow: 0 7px 15px rgba(31, 75, 160, .13);
}
.rq-profile-icon {
color: #1877f2;
background: #eef4ff;
}
.rq-chat-icon {
color: #0084ff;
background: #eef7ff;
}
.rq-select-icon {
color: #148544;
background: #ecf9f1;
}
.rq-selected-note {
display: none;
margin-top: 13px;
padding: 12px 14px;
border-radius: 14px;
background: #eaf8ef;
color: #146c36;
font-size: 14px;
font-weight: 800;
}
.rq-selected-note.visible {
display: block;
}
.rq-submit {
width: 100%;
border: 0;
border-radius: 16px;
padding: 15px 18px;
background: #18a957;
color: #fff;
font: inherit;
font-weight: 900;
cursor: pointer;
box-shadow: 0 12px 25px rgba(24, 169, 87, .22);
transition: .2s ease;
}
.rq-submit:hover {
transform: translateY(-1px);
background: #11974c;
}
.rq-submit:disabled {
opacity: .6;
cursor: not-allowed;
transform: none;
}
.rq-status {
display: none;
margin-top: 12px;
padding: 12px 14px;
border-radius: 13px;
font-size: 14px;
font-weight: 700;
}
.rq-status.visible {
display: block;
}
.rq-status.success {
background: #e9f9ef;
color: #146c36;
}
.rq-status.error {
background: #fff0f0;
color: #b42318;
}
.rq-empty {
grid-column: 1 / -1;
padding: 18px;
text-align: center;
border: 1px dashed #ccd5e2;
border-radius: 16px;
color: #778195;
background: #fafbfc;
}
.rq-side-links {
display: grid;
gap: 10px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid #edf0f5;
}
.rq-side-link {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 12px 14px;
border: 1px solid #dce6f5;
border-radius: 14px;
text-decoration: none;
font-size: 14px;
font-weight: 900;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rq-side-link i {
font-size: 18px;
}
.rq-side-link:hover {
transform: translateY(-1px);
box-shadow: 0 9px 20px rgba(31, 75, 160, .10);
}
.rq-side-link-faq {
background: #eef4ff;
color: #155eef;
border-color: #cfe0ff;
}
.rq-side-link-search {
background: #ecf9f1;
color: #148544;
border-color: #ccebd8;
}
@media (max-width: 820px) {
.rq-layout {
grid-template-columns: 1fr;
}
.rq-side {
position: static;
order: -1;
}
}
@media (max-width: 620px) {
.rq-page {
padding: 8px 7px 92px;
}
.rq-hero {
margin-bottom: 10px;
padding: 14px 13px;
border-radius: 17px;
box-shadow: 0 7px 20px rgba(32, 73, 150, .08);
}
.rq-hero::after,
.rq-hero p {
display: none;
}
.rq-badge {
padding: 6px 9px;
font-size: 11px;
gap: 5px;
}
.rq-hero h1 {
margin: 9px 0 0;
font-size: 21px;
line-height: 1.35;
}
.rq-side {
display: none;
}
.rq-layout {
display: block;
}
.rq-form-card {
padding: 13px;
border-radius: 17px;
box-shadow: 0 6px 20px rgba(34, 54, 90, .07);
}
.rq-grid,
.rq-craftsmen {
grid-template-columns: 1fr;
gap: 10px;
}
.rq-section {
margin-bottom: 15px;
padding-bottom: 15px;
}
.rq-section-head {
margin-bottom: 10px;
align-items: flex-start;
flex-direction: column;
}
.rq-section-head small {
display: none;
}
.rq-section-title {
margin-bottom: 0;
font-size: 17px;
}
.rq-field {
gap: 5px;
}
.rq-field input,
.rq-field select,
.rq-field textarea {
padding: 11px 12px;
border-radius: 12px;
font-size: 14px;
}
.rq-field textarea {
min-height: 105px;
}
.rq-match-status {
margin-bottom: 9px;
padding: 10px 11px;
border-radius: 12px;
font-size: 13px;
}
.rq-craftsman {
grid-template-columns: 50px minmax(0, 1fr);
gap: 9px;
padding: 10px;
border-radius: 14px;
}
.rq-craftsman img {
width: 50px;
height: 50px;
border-radius: 12px;
}
.rq-craftsman-name {
font-size: 14px;
}
.rq-actions {
gap: 6px;
}
.rq-mini-link {
width: 35px;
height: 35px;
flex-basis: 35px;
font-size: 16px;
}
.rq-selected-note {
margin-top: 9px;
padding: 10px 11px;
font-size: 13px;
}
.rq-submit {
position: sticky;
bottom: 72px;
z-index: 20;
padding: 13px 14px;
border-radius: 14px;
font-size: 14px;
}
.rq-seo-content {
display: none;
}
}