:root{--n:#071a3a;--b:#1677ff;--bg:#f5f8fc;--bd:#dfe6ef;--mut:#68758a;--green:#0b8b62;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,"Segoe UI",sans-serif;background:var(--bg);color:var(--n)}
button,input,textarea,select{font:inherit}.nav{height:82px;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:sticky;top:0;z-index:20}.brand{font-size:29px;font-weight:900;color:var(--n);text-decoration:none;line-height:.8}.brand b{color:var(--b)}.brand small{display:block;text-align:center;font-size:13px;color:var(--b);margin-top:7px}.lang{border:1px solid var(--bd);background:#fff;color:var(--b);padding:10px 17px;border-radius:12px;font-weight:800}
.hero{text-align:center;background:#fff;padding:80px 20px 90px}.badge{display:inline-block;background:#eaf2ff;color:var(--b);padding:10px 18px;border-radius:30px;font-weight:800}.hero h1{font-size:clamp(38px,6vw,70px);line-height:1.1;margin:25px auto 18px;max-width:950px}.hero h1 span{color:var(--b)}.hero p{color:var(--mut);font-size:18px;max-width:720px;margin:0 auto 25px;line-height:1.8}.primary{border:0;background:var(--b);color:#fff;padding:13px 22px;border-radius:12px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px #1677ff22}.primary.big{padding:16px 28px;font-size:17px}
.section{max-width:1180px;margin:auto;padding:65px 6%}.title{text-align:center;margin-bottom:28px}.title.right{text-align:right}.title h2{font-size:34px;margin:0 0 8px}.title p,.resultsHead p{color:var(--mut);margin:0}.roles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:25px}.role{background:#fff;border:1px solid var(--bd);border-radius:20px;padding:25px 10px;cursor:pointer;min-height:135px;color:var(--n)}.role span{display:block;font-size:34px;margin-bottom:10px}.role strong{font-size:16px}.role.selected{border:2px solid var(--b);box-shadow:0 0 0 3px #1677ff14;background:#f8fbff}
.card{background:#fff;border:1px solid var(--bd);border-radius:24px;padding:30px;box-shadow:0 12px 35px #071a3a08}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:1fr 1fr}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field span{font-weight:800}.field em{font-style:normal;color:var(--mut);font-weight:400;font-size:13px}.field input,.field textarea,.field select{border:1px solid var(--bd);border-radius:11px;padding:13px;background:#fff;outline:none}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--b);box-shadow:0 0 0 3px #1677ff12}.actions{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.why{padding-top:20px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.steps>div{background:#fff;border:1px solid var(--bd);border-radius:18px;padding:22px}.steps b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eaf2ff;color:var(--b)}.steps p{color:var(--mut);line-height:1.6}footer{text-align:center;background:var(--n);color:#fff;padding:35px}
.resultsPage{min-height:100vh}.resultsHead{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.resultsHead h1{font-size:42px;margin:0 0 8px}.secondary{border:1px solid var(--bd);background:#fff;color:var(--n);padding:12px 17px;border-radius:11px;font-weight:800;cursor:pointer}.requestSummary{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:16px;display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}.chip{background:#eef5ff;color:var(--b);padding:8px 12px;border-radius:9px;font-weight:800}.resultsLayout{display:grid;grid-template-columns:240px 1fr;gap:22px}.filters{background:#fff;border:1px solid var(--bd);border-radius:18px;padding:20px;height:max-content}.filters h3{margin-top:0}.filters label{display:block;font-weight:800;margin:16px 0}.filters select{display:block;width:100%;margin-top:7px;padding:10px;border:1px solid var(--bd);border-radius:9px;background:#fff}.check{display:flex!important;gap:8px;align-items:center}.listTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--mut)}.offers{display:grid;gap:14px}.offer{background:#fff;border:1px solid var(--bd);border-radius:20px;padding:20px;display:grid;grid-template-columns:1fr auto;gap:18px}.offer.recommended{border:2px solid var(--b);background:#f8fbff}.offer .name{font-size:21px;font-weight:900}.verified{color:var(--green);font-size:13px;font-weight:900}.tag{display:inline-block;background:#e8fff5;color:var(--green);padding:5px 8px;border-radius:7px;font-size:12px;font-weight:900;margin-right:7px}.offer p{color:var(--mut)}.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:15px}.meta div{background:#f7f9fc;border-radius:10px;padding:10px}.meta small{display:block;color:var(--mut);margin-bottom:4px}.price{font-size:25px;font-weight:900;margin-bottom:12px;white-space:nowrap}.pagination{display:flex;justify-content:center;gap:7px;margin-top:22px}.pagination button{border:1px solid var(--bd);background:#fff;padding:9px 13px;border-radius:9px;cursor:pointer}.pagination button.active{background:var(--b);color:#fff;border-color:var(--b)}
.offerDetails{background:#fff;border:1px solid var(--bd);border-radius:22px;margin-top:20px;padding:30px}.detailGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.detailGrid div{background:#f7f9fc;border-radius:12px;padding:15px}.detailGrid small{display:block;color:var(--mut)}.detailGrid strong{display:block;margin-top:5px}.contactBox{margin-top:22px;padding:20px;border-radius:15px;background:#eef5ff}
@media(max-width:850px){.roles{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr 1fr}.resultsLayout{grid-template-columns:1fr}.grid.two{grid-template-columns:1fr}.field.full{grid-column:auto}.meta{grid-template-columns:1fr 1fr}.resultsHead{align-items:start;flex-direction:column}}
@media(max-width:600px){.roles{grid-template-columns:1fr 1fr}.offer{grid-template-columns:1fr}.section{padding:45px 5%}.hero{padding:55px 18px}.resultsHead h1{font-size:31px}}
.logo-brand {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  width: 100px !important;
  height: 55px !important;
}

.logo-brand img {
    width: 75px !important;
    height: 45px !important;
    max-width: 75px !important;
    max-height: 45px !important;
    object-fit: contain !important;
    display: block !important;
}
html[dir="rtl"] .grid.two {
    direction: ltr;
}
html[dir="rtl"] .grid.two .field {
    text-align: right;
}/* Results page layout */
.resultsLayout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

/* Filter يبقى على اليمين */
.filters {
    grid-column: 1;
}

/* الموردين والنتائج يبقوا في المساحة الكبيرة */
.resultsLayout section {
    grid-column: 2;
}

/* عدد الموردين + Suppliers found يبقوا فوق */
.resultsLayout .listTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

/* العروض تحت */
.resultsLayout .offers {
    width: 100%;
}

/* أرقام الصفحات تحت العروض */
.resultsLayout .pagination {
    margin-top: 20px;
}

/* Contact Information */
.contact-info {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #dbe2ea;
  border-radius: 16px;
  background: #fff;
}

.contact-info h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.contact-info p {
  margin: 0 0 18px;
  color: #666;
}

.contact-info .field {
  margin-bottom: 16px;
}

.contact-info input,
.contact-info select {
  width: 100%;
  box-sizing: border-box;
}

/* Contact Information */
.contact-info {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #dbe2ea;
  border-radius: 16px;
  background: #fff;
}

.contact-info h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: #172b4d;
}

.contact-info p {
  margin: 0 0 20px;
  color: #64748b;
  font-size: 15px;
}

.contact-info .field {
  margin-bottom: 18px;
}

.contact-info .field:last-child {
  margin-bottom: 0;
}

.contact-info input,
.contact-info select {
  width: 100%;
  box-sizing: border-box;
}

.phone-input {
  display: flex;
  gap: 10px;
  direction: ltr;
}

.phone-input select {
  width: 105px;
  flex-shrink: 0;
}

.phone-input input {
  flex: 1;
}

@media (max-width: 700px) {
  .contact-info {
    padding: 18px;
  }

  .phone-input {
    flex-direction: column;
  }

  .phone-input select {
    width: 100%;
  }
}