*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Manrope,Arial,sans-serif;color:#10213e;background:#fff}a{text-decoration:none;color:inherit}.topbar{height:42px;background:#06152d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 5%;font-size:12px}.topbar nav{display:flex;gap:28px}.header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:#fff;position:relative;z-index:5}.logo{display:flex;flex-direction:column;line-height:1}.logo strong{font-size:27px;letter-spacing:-1px}.logo strong span{color:#1874df}.logo small{font-size:9px;letter-spacing:2px;margin-top:5px;color:#4b5b72}.mainnav{display:flex;gap:34px;align-items:center;margin-left:35px;font-size:14px}.mainnav a{height:90px;display:flex;align-items:center;border-bottom:3px solid transparent}.mainnav .active{color:#0874e8;border-bottom-color:#0874e8}.actions{display:flex;align-items:center;gap:18px}.icon{background:none;border:0;font-size:23px;position:relative;color:#0a2548}.icon b{position:absolute;right:-7px;top:-6px;background:#126ed1;color:#fff;border-radius:50%;font-size:9px;padding:3px 5px}.post{background:#1473d8;color:#fff;padding:14px 21px;border-radius:7px;font-size:14px;font-weight:700}.hero{height:558px;position:relative;overflow:hidden;background:#061a39}.hero-img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.98}.hero-overlay{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(4,20,48,.98) 0%,rgba(5,27,59,.88) 36%,rgba(5,27,59,.15) 66%,rgba(255,255,255,0) 100%)}.hero-content{position:relative;z-index:2;color:#fff;padding:85px 5%}.eyebrow{color:#1680ee;font-weight:800;font-size:17px;letter-spacing:.3px;margin-bottom:13px}.hero h1{font-size:55px;line-height:1.08;letter-spacing:-2px;margin:0 0 20px;font-weight:800}.hero p{font-size:18px;line-height:1.65;color:#e7edf7;margin-bottom:28px}.buttons{display:flex;gap:16px}.btn{padding:16px 27px;border-radius:6px;font-weight:700;font-size:15px}.primary{background:#1376e5}.secondary{border:1px solid #dbe6f5}.btn span{margin-left:25px}.trust{display:flex;gap:30px;margin-top:42px}.trust>div{display:flex;gap:12px;align-items:center;padding-right:28px;border-right:1px solid rgba(255,255,255,.3)}.trust>div:last-child{border:0}.trust i{width:45px;height:45px;border:1px solid #1e80ed;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:20px}.trust strong,.trust small{display:block}.trust strong{font-size:13px}.trust small{color:#c9d5e6;margin-top:3px}.searchbox{position:relative;z-index:4;margin:-30px 4.5% 0;background:#fff;border-radius:10px;padding:13px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr .55fr;gap:10px;box-shadow:0 10px 35px rgba(9,34,69,.12)}.search-field,.searchbox button{height:52px;border:1px solid #e3e9f1;border-radius:7px;background:#fff;display:flex;align-items:center;padding:0 18px;color:#142947}.search-field{gap:15px;color:#126fd3;font-size:25px}.search-field span{font-size:13px;color:#5e6e83}.searchbox button{justify-content:space-between;font:inherit;font-size:13px}.search-btn{height:52px;background:#1373dc;color:#fff;border-radius:7px;display:grid;place-items:center;font-weight:700;font-size:14px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;padding:60px 5% 42px}.features article{display:flex;gap:20px}.feature-icon{width:58px;height:58px;flex:0 0 58px;border-radius:12px;background:#f1f5fa;color:#126fd3;display:grid;place-items:center;font-size:30px}.features h3{margin:2px 0 8px;font-size:18px}.features p{margin:0 0 12px;color:#607088;font-size:13px;line-height:1.6}.features a{color:#076dde;font-size:13px;font-weight:700}.brands{border-top:1px solid #edf0f5;padding:25px 5%;display:flex;justify-content:space-between;align-items:center;color:#304765;font-weight:800;font-size:18px;opacity:.9}.brands small{font-size:8px}.brands span:nth-child(2),.brands span:nth-child(4){font-size:17px}.brands span:nth-child(5){font-size:17px}.brands span:nth-child(7){font-size:14px}@media(max-width:1050px){.mainnav{gap:14px}.hero h1{font-size:44px}.searchbox{grid-template-columns:1fr 1fr}.search-btn{grid-column:auto}.brands{flex-wrap:wrap;gap:25px}.features{gap:25px}}@media(max-width:760px){.topbar nav,.mainnav{display:none}.header{height:75px}.logo strong{font-size:23px}.post{padding:11px 13px}.hero{height:600px}.hero-img{object-position:65% center}.hero-content{padding:55px 6%}.hero h1{font-size:39px}.hero p br{display:none}.trust{display:none}.searchbox{margin:-20px 5% 0;grid-template-columns:1fr}.features{grid-template-columns:1fr;padding-top:45px}.brands{display:grid;grid-template-columns:repeat(2,1fr);text-align:center}.actions{gap:7px}.icon{font-size:19px}}
/* ========== AUTH PAGES ========== */
.auth-page {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: #f5f8fc;
}
.auth-card {
background: #fff;
border-radius: 12px;
padding: 40px;
width: 100%;
max-width: 440px;
box-shadow: 0 10px 40px rgba(9,34,69,.08);
}
.auth-card h1 {
margin: 0 0 28px;
font-size: 28px;
font-weight: 800;
text-align: center;
}
.auth-form .form-group {
margin-bottom: 18px;
}
.auth-form label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
color: #304765;
}
.auth-form input {
width: 100%;
height: 48px;
border: 1px solid #e3e9f1;
border-radius: 7px;
padding: 0 16px;
font: inherit;
font-size: 15px;
transition: border-color .2s;
}
.auth-form input:focus {
outline: none;
border-color: #1376e5;
box-shadow: 0 0 0 3px rgba(19,118,229,.15);
}
.btn.full {
width: 100%;
display: block;
text-align: center;
margin-top: 10px;
cursor: pointer;
border: none;
}
.btn.primary {
background: #1376e5;
color: #fff;
}
.btn.primary:hover {
background: #0f5fb8;
}
.auth-switch {
text-align: center;
margin-top: 24px;
font-size: 14px;
color: #607088;
}
.auth-switch a {
color: #076dde;
font-weight: 700;
}
.alert {
padding: 12px 16px;
border-radius: 7px;
margin-bottom: 20px;
font-size: 14px;
}
.alert-error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
/* ========== DASHBOARD ========== */
.dashboard-page {
background: #f5f8fc;
min-height: 70vh;
padding: 40px 5%;
}
.dashboard-container {
max-width: 1100px;
margin: 0 auto;
}
.dashboard-header {
margin-bottom: 32px;
}
.dashboard-header h1 {
margin: 0 0 6px;
font-size: 28px;
font-weight: 800;
}
.dashboard-header p {
margin: 0;
color: #607088;
}
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.dash-card {
background: #fff;
border-radius: 12px;
padding: 28px;
box-shadow: 0 4px 20px rgba(9,34,69,.06);
}
.dash-card.full-width {
grid-column: 1 / -1;
}
.dash-card h2 {
margin: 0 0 18px;
font-size: 18px;
font-weight: 700;
}
.info-row {
padding: 8px 0;
border-bottom: 1px solid #edf0f5;
font-size: 14px;
}
.info-row:last-child {
border: none;
}
.note {
font-size: 13px;
color: #607088;
margin: 8px 0 16px;
}
.badge {
display: inline-block;
background: #e8f1fc;
color: #076dde;
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.card-header h2 {
margin: 0;
}
.btn.small {
padding: 10px 16px;
font-size: 13px;
}
.empty {
color: #607088;
font-size: 14px;
text-align: center;
padding: 30px 0;
}
.empty-catalog .btn { margin-top: 8px; display: inline-block; }
.listings-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.listings-table th,
.listings-table td {
text-align: left;
padding: 12px 10px;
border-bottom: 1px solid #edf0f5;
}
.listings-table th {
font-weight: 600;
color: #304765;
background: #f8fafc;
}
.status {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.status.active {
background: #dcfce7;
color: #166534;
}
/* ========== FOOTER ========== */
.footer {
background: #06152d;
color: #c9d5e6;
padding: 50px 5% 0;
margin-top: 40px;
}
.footer-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto 40px;
}
.footer-col h4 {
color: #fff;
font-size: 14px;
margin: 0 0 16px;
font-weight: 700;
}
.footer-col a {
display: block;
font-size: 13px;
margin-bottom: 10px;
color: #a0b0c8;
transition: color .2s;
}
.footer-col a:hover {
color: #fff;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
max-width: 1200px;
margin: 0 auto;
}
.footer-lang a {
margin-left: 12px;
color: #a0b0c8;
font-weight: 600;
}
.footer-lang a.active {
color: #fff;
}
/* ========== LANGUAGE SWITCH ========== */
.lang-switch {
font-weight: 600;
}
@media (max-width: 900px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.footer-inner {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.footer-inner {
grid-template-columns: 1fr;
}
.auth-card {
padding: 28px 20px;
}
}
/* ========== LISTINGS BROWSE ========== */
.listings-page {
background: #f5f8fc;
min-height: 70vh;
padding: 40px 5%;
}
.listings-container {
max-width: 1100px;
margin: 0 auto;
}
.listings-header {
margin-bottom: 24px;
}
.listings-header h1 {
margin: 0 0 6px;
font-size: 28px;
font-weight: 800;
}
.listings-header p {
margin: 0;
color: #607088;
}
.listings-filter {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr auto;
gap: 12px;
background: #fff;
padding: 16px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(9,34,69,.06);
margin-bottom: 28px;
}
.listings-filter input,
.listings-filter select {
height: 46px;
border: 1px solid #e3e9f1;
border-radius: 7px;
padding: 0 14px;
font: inherit;
font-size: 14px;
}
.listings-filter button {
height: 46px;
border: none;
cursor: pointer;
padding: 0 24px;
}
.listings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.listing-card {
background: #fff;
border-radius: 12px;
padding: 22px;
box-shadow: 0 4px 20px rgba(9,34,69,.06);
transition: transform .2s, box-shadow .2s;
display: block;
}
.listing-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(9,34,69,.1);
}
.listing-card h3 {
margin: 0 0 8px;
font-size: 17px;
font-weight: 700;
color: #10213e;
}
.listing-brand {
font-size: 13px;
color: #076dde;
font-weight: 600;
margin-bottom: 10px;
}
.listing-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
}
.tag {
background: #f1f5fa;
color: #304765;
font-size: 12px;
padding: 3px 10px;
border-radius: 12px;
}
.listing-price {
font-size: 20px;
font-weight: 800;
color: #1376e5;
}
/* ========== LISTING DETAIL ========== */
.listing-detail-page {
background: #f5f8fc;
min-height: 70vh;
padding: 40px 5%;
}
.listing-detail-container {
max-width: 800px;
margin: 0 auto;
}
.back-link {
display: inline-block;
margin-bottom: 20px;
color: #076dde;
font-weight: 600;
font-size: 14px;
}
.listing-detail-card {
background: #fff;
border-radius: 12px;
padding: 36px;
box-shadow: 0 4px 20px rgba(9,34,69,.06);
}
.listing-detail-card h1 {
margin: 0 0 12px;
font-size: 28px;
font-weight: 800;
}
.listing-detail-price {
font-size: 32px;
font-weight: 800;
color: #1376e5;
margin-bottom: 24px;
}
.listing-detail-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 28px;
font-size: 14px;
color: #304765;
}
.listing-detail-desc {
border-top: 1px solid #edf0f5;
padding-top: 20px;
margin-bottom: 28px;
}
.listing-detail-desc h3 {
margin: 0 0 10px;
font-size: 16px;
}
.listing-detail-desc p {
margin: 0;
line-height: 1.7;
color: #304765;
}
.listing-seller {
border-top: 1px solid #edf0f5;
padding-top: 20px;
}
.listing-seller h3 {
margin: 0 0 10px;
font-size: 16px;
}
.listing-seller p {
margin: 4px 0;
font-size: 14px;
color: #304765;
}
.btn-link {
color: #076dde;
font-size: 13px;
font-weight: 600;
}
.btn-link.danger {
color: #b91c1c;
}
@media (max-width: 700px) {
.listings-filter {
grid-template-columns: 1fr;
}
.listing-detail-meta {
grid-template-columns: 1fr;
}
}
/* ========== LANGUAGE DROPDOWN ========== */
.lang-dropdown {
position: relative;
display: inline-block;
}
.lang-dropdown .lang-switch {
background: none;
border: 0;
color: #fff;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 0;
}
.lang-menu {
display: none;
position: absolute;
right: 0;
top: 100%;
margin-top: 8px;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0,0,0,.15);
min-width: 80px;
z-index: 100;
overflow: hidden;
}
.lang-dropdown.open .lang-menu {
display: block;
}
.lang-menu a {
display: block;
padding: 10px 16px;
color: #10213e;
font-size: 13px;
font-weight: 600;
transition: background .15s;
}
.lang-menu a:hover,
.lang-menu a.active {
background: #e8f1fc;
color: #076dde;
}
.footer-lang a {
margin-left: 10px;
}
/* ========== BRANDS PAGE ========== */
.brands-alpha {
display: flex;
flex-direction: column;
gap: 28px;
}
.brands-group h2 {
margin: 0 0 12px;
font-size: 22px;
font-weight: 800;
color: #1376e5;
border-bottom: 2px solid #e8f1fc;
padding-bottom: 6px;
}
.brands-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px 16px;
}
.brand-item {
font-size: 14px;
color: #304765;
padding: 6px 0;
transition: color .15s;
}
.brand-item:hover {
color: #076dde;
font-weight: 600;
}
/* Brand category chips */
.brand-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.chip {
display: inline-block;
padding: 8px 16px;
border-radius: 20px;
background: #fff;
border: 1px solid #e3e9f1;
font-size: 13px;
font-weight: 600;
color: #304765;
transition: all .15s;
}
.chip:hover,
.chip.active {
background: #1376e5;
border-color: #1376e5;
color: #fff;
}
.brand-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.brand-cats {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.brand-cats .tag {
font-size: 10px;
padding: 1px 6px;
}
/* Equipment types grid */
.equip-section {
margin-bottom: 28px;
}
.equip-title {
margin: 0 0 14px;
font-size: 18px;
font-weight: 700;
}
.equip-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.equip-card {
background: #fff;
border: 1px solid #e3e9f1;
border-radius: 8px;
padding: 14px 16px;
font-size: 13px;
font-weight: 600;
color: #304765;
transition: all .15s;
text-align: center;
}
.equip-card:hover {
border-color: #1376e5;
color: #076dde;
box-shadow: 0 4px 12px rgba(19,118,229,.1);
}
.equip-card.active {
background: #1376e5;
border-color: #1376e5;
color: #fff;
}
/* ========== eBay-style listing form ========== */
.ebay-form-page {
background: #f5f8fc;
min-height: 70vh;
padding: 40px 5% 60px;
}
.ebay-form-container {
max-width: 720px;
margin: 0 auto;
}
.ebay-form-container h1 {
margin: 0 0 20px;
font-size: 26px;
font-weight: 800;
}
.fee-box {
background: #e8f1fc;
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 24px;
font-size: 14px;
}
.fee-box .fee-note {
display: block;
color: #607088;
margin-top: 4px;
font-size: 13px;
}
.ebay-section {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(9,34,69,.05);
margin-bottom: 16px;
overflow: hidden;
}
.ebay-section-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 22px;
border-bottom: 1px solid #edf0f5;
background: #fafbfc;
}
.ebay-section-header .step {
width: 28px;
height: 28px;
border-radius: 50%;
background: #1376e5;
color: #fff;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.ebay-section-header h2 {
margin: 0;
font-size: 16px;
font-weight: 700;
}
.ebay-section-body {
padding: 20px 22px 24px;
}
.section-hint {
margin: 0 0 14px;
font-size: 13px;
color: #607088;
}
.ebay-form .form-group {
margin-bottom: 16px;
}
.ebay-form .form-group:last-child {
margin-bottom: 0;
}
.ebay-form label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
color: #304765;
}
.ebay-form input[type="text"],
.ebay-form input[type="number"],
.ebay-form select,
.ebay-form textarea {
width: 100%;
height: 46px;
border: 1px solid #e3e9f1;
border-radius: 7px;
padding: 0 14px;
font: inherit;
font-size: 14px;
transition: border-color .2s;
}
.ebay-form textarea {
height: auto;
padding: 12px 14px;
resize: vertical;
}
.ebay-form input:focus,
.ebay-form select:focus,
.ebay-form textarea:focus {
outline: none;
border-color: #1376e5;
box-shadow: 0 0 0 3px rgba(19,118,229,.12);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.char-count {
font-size: 12px;
color: #90a0b5;
float: right;
margin-top: 4px;
}
.price-input {
position: relative;
}
.price-input input {
padding-right: 50px;
}
.price-input .currency {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
color: #607088;
font-size: 14px;
}
/* Photo upload */
.photo-upload-area input[type="file"] {
display: none;
}
.photo-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
border: 2px dashed #c5d0de;
border-radius: 10px;
padding: 32px 20px;
cursor: pointer;
background: #f8fafc;
transition: border-color .2s, background .2s;
text-align: center;
font-size: 14px;
color: #607088;
}
.photo-dropzone:hover {
border-color: #1376e5;
background: #eef5fc;
}
.photo-icon {
font-size: 32px;
}
.photo-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.preview-thumb {
width: 90px;
height: 90px;
border-radius: 8px;
overflow: hidden;
position: relative;
border: 2px solid #e3e9f1;
}
.preview-thumb.main {
border-color: #1376e5;
}
.preview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.preview-thumb span {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0,0,0,.6);
color: #fff;
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
}
.ebay-submit {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
gap: 16px;
}
.btn-cancel {
color: #607088;
font-weight: 600;
font-size: 14px;
}
/* Listing gallery & thumbs */
.listing-gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
}
.listing-gallery img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #e3e9f1;
}
.listing-gallery img.main-img {
width: 100%;
height: 320px;
object-fit: cover;
}
.listing-thumb {
height: 160px;
background: #f1f5fa;
border-radius: 12px 12px 0 0;
overflow: hidden;
display: grid;
place-items: center;
font-size: 40px;
color: #c5d0de;
}
.listing-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.listing-card {
padding: 0;
overflow: hidden;
}
.listing-card-body {
padding: 16px 18px 18px;
}
@media (max-width: 600px) {
.form-row {
grid-template-columns: 1fr;
}
.ebay-submit {
flex-direction: column-reverse;
}
.ebay-submit .btn {
width: 100%;
}
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #304765;
cursor: pointer;
margin-top: 8px;
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #1376e5;
}
.hint {
display: block;
font-size: 12px;
color: #90a0b5;
margin-top: 4px;
}
.delivery-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.delivery-item {
padding: 10px 14px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e3e9f1;
}
.delivery-item:hover {
border-color: #1376e5;
}
/* Portal homepage */
.portal-search {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 10px;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.portal-search input,
.portal-search select {
height: 48px;
border: 1px solid #e3e9f1;
border-radius: 8px;
padding: 0 14px;
font: inherit;
}
.portal-cats, .portal-listings {
padding: 40px 5%;
}
.portal-listings:nth-of-type(even) {
background: #f5f8fc;
}
.portal-inner {
max-width: 1100px;
margin: 0 auto;
}
.portal-cats h2,
.portal-head h2 {
margin: 0 0 18px;
font-size: 22px;
font-weight: 800;
}
.portal-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.portal-head a {
color: #076dde;
font-weight: 600;
font-size: 14px;
}
.portal-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.portal-cat-card {
background: #fff;
border: 1px solid #e3e9f1;
border-radius: 12px;
padding: 20px 14px;
text-align: center;
transition: all .15s;
box-shadow: 0 2px 10px rgba(9,34,69,.04);
}
.portal-cat-card:hover {
border-color: #1376e5;
transform: translateY(-2px);
}
.portal-cat-card .pc-icon {
display: block;
font-size: 28px;
margin-bottom: 8px;
}
.portal-cat-card.small {
padding: 14px 10px;
font-size: 13px;
}
.badge-top {
display: inline-block;
background: #f59e0b;
color: #fff;
font-size: 10px;
font-weight: 800;
padding: 2px 8px;
border-radius: 4px;
margin-bottom: 6px;
}
.featured-card {
border: 2px solid #f59e0b;
}
/* Messages */
.messages-layout .msg-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 16px;
min-height: 420px;
}
.msg-threads {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(9,34,69,.05);
overflow: hidden;
}
.msg-thread {
display: block;
padding: 14px 16px;
border-bottom: 1px solid #edf0f5;
position: relative;
}
.msg-thread strong {
display: block;
font-size: 14px;
}
.msg-thread small {
color: #607088;
font-size: 12px;
}
.msg-thread.active {
background: #e8f1fc;
}
.unread-badge {
position: absolute;
right: 12px;
top: 14px;
background: #ef4444;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
}
.msg-chat {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(9,34,69,.05);
display: flex;
flex-direction: column;
padding: 16px;
}
.msg-chat-head {
padding-bottom: 12px;
border-bottom: 1px solid #edf0f5;
margin-bottom: 12px;
font-size: 14px;
}
.msg-bubbles {
flex: 1;
overflow-y: auto;
max-height: 360px;
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.msg-bubble {
max-width: 75%;
padding: 10px 14px;
border-radius: 12px;
font-size: 14px;
}
.msg-bubble.mine {
align-self: flex-end;
background: #1376e5;
color: #fff;
}
.msg-bubble.theirs {
align-self: flex-start;
background: #f1f5fa;
color: #10213e;
}
.msg-bubble small {
display: block;
opacity: .7;
font-size: 11px;
margin-top: 4px;
}
.msg-compose {
display: flex;
gap: 10px;
align-items: flex-end;
}
.msg-compose textarea {
flex: 1;
border: 1px solid #e3e9f1;
border-radius: 8px;
padding: 10px;
font: inherit;
resize: none;
}
.listing-message-box {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #edf0f5;
}
.listing-message-box textarea {
width: 100%;
border: 1px solid #e3e9f1;
border-radius: 8px;
padding: 12px;
font: inherit;
}
.listing-actions {
margin: 16px 0;
}
.actions .icon {
text-decoration: none;
color: inherit;
}
@media (max-width: 700px) {
.messages-layout .msg-grid {
grid-template-columns: 1fr;
}
.portal-search {
grid-template-columns: 1fr;
}
}
.footer-legal-company {
max-width: 1100px;
margin: 0 auto 16px;
padding: 0 5%;
font-size: 12px;
color: #90a0b5;
line-height: 1.5;
}
/* Logo image */
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo-img {
height: 42px;
width: auto;
display: block;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-text strong {
line-height: 1.1;
}
.logo-text small {
font-size: 9px;
letter-spacing: 0.02em;
}
/* About page */
.about-page {
background: #f5f8fc;
min-height: 70vh;
padding: 40px 5% 60px;
}
.about-container {
max-width: 800px;
margin: 0 auto;
}
.about-hero {
text-align: center;
margin-bottom: 32px;
}
.about-logo {
max-width: 280px;
width: 100%;
height: auto;
margin-bottom: 16px;
background: #0a0a0a;
border-radius: 12px;
padding: 16px;
}
.about-hero h1 {
margin: 0;
font-size: 22px;
font-weight: 800;
color: #10213e;
}
.about-block {
background: #fff;
border-radius: 12px;
padding: 28px;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(9,34,69,.05);
}
.about-block h2 {
margin: 0 0 16px;
font-size: 18px;
}
.about-block p {
margin: 0 0 14px;
line-height: 1.7;
color: #304765;
font-size: 15px;
}
.about-block p:last-child {
margin-bottom: 0;
}
.contact-cards {
display: grid;
gap: 14px;
}
.contact-card {
padding: 14px 16px;
background: #f8fafc;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
}
.contact-card strong {
display: block;
margin-bottom: 4px;
color: #10213e;
}
.contact-card a {
color: #076dde;
font-weight: 600;
}
@media (max-width: 600px) {
.logo-text small {
display: none;
}
.logo-img {
height: 36px;
}
}
.legal-text h2 {
margin: 28px 0 12px;
font-size: 17px;
}
.legal-text p, .legal-text li {
font-size: 14px;
line-height: 1.65;
color: #304765;
}
.legal-meta {
color: #90a0b5;
font-size: 13px;
margin-bottom: 24px;
}
.legal-list {
padding-left: 1.2em;
}
.legal-list li {
margin-bottom: 12px;
}
.footer-links-legal {
max-width: 1100px;
margin: 0 auto 12px;
padding: 0 5%;
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
}
.footer-links-legal a {
color: #90a0b5;
font-weight: 600;
}
.footer-links-legal a:hover {
color: #1376e5;
}
/* Cookie banner */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: #10213e;
color: #fff;
padding: 16px 5%;
box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}
.cookie-banner-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
justify-content: space-between;
}
.cookie-banner p {
margin: 0;
font-size: 13px;
line-height: 1.5;
flex: 1;
min-width: 220px;
}
.cookie-banner a {
color: #7dd3fc;
font-weight: 600;
}
.cookie-banner-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.cookie-banner .btn {
font-size: 13px;
padding: 10px 16px;
}
.cookie-banner .btn.secondary {
background: transparent;
border: 1px solid rgba(255,255,255,.4);
color: #fff;
}
@media (max-width: 600px) {
.cookie-banner-actions {
width: 100%;
}
.cookie-banner-actions .btn {
flex: 1;
}
}
.price-table {
width: 100%;
border-collapse: collapse;
margin: 16px 0 20px;
font-size: 14px;
}
.price-table th,
.price-table td {
border: 1px solid #e3e9f1;
padding: 12px 14px;
text-align: left;
}
.price-table th {
background: #f5f8fc;
font-weight: 700;
}
.fee-tiers-mini {
width: 100%;
margin-top: 12px;
font-size: 13px;
border-collapse: collapse;
}
.fee-tiers-mini td {
padding: 4px 0;
border-bottom: 1px solid #d0e0f5;
}
.fee-tiers-mini td:last-child {
text-align: right;
}
.marketplace-filter {
grid-template-columns: 1.4fr repeat(5, 1fr) auto auto !important;
}
.filter-check {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
white-space: nowrap;
}
@media (max-width: 900px) {
.marketplace-filter {
grid-template-columns: 1fr 1fr !important;
}
}
.footer-social {
max-width: 1100px;
margin: 0 auto 14px;
padding: 0 5%;
display: flex;
gap: 16px;
font-size: 13px;
}
.footer-social a { color: #90a0b5; font-weight: 600; }
.footer-social a:hover { color: #1376e5; }
.save-search-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 12px 0 20px;
padding: 12px 14px;
background: #e8f1fc;
border-radius: 8px;
font-size: 13px;
}
.save-search-bar input[type=text] {
flex: 1;
min-width: 140px;
height: 36px;
border: 1px solid #c5d5ea;
border-radius: 6px;
padding: 0 10px;
}
/* Simple homepage */
.home-simple { background: #f5f8fc; }
.simple-hero {
background: linear-gradient(160deg, #0a1628 0%, #10213e 50%, #0d3a6e 100%);
color: #fff;
padding: 64px 5% 48px;
text-align: center;
}
.simple-hero-inner { max-width: 720px; margin: 0 auto; }
.simple-brand {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.2em;
color: #7dd3fc;
margin-bottom: 16px;
}
.simple-tagline {
margin: 0 0 12px;
font-size: clamp(26px, 5vw, 40px);
font-weight: 800;
line-height: 1.2;
}
.simple-sub {
margin: 0 0 28px;
color: #b8c9dc;
font-size: 16px;
}
.simple-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 200px;
padding: 16px 28px;
border-radius: 12px;
font-weight: 800;
font-size: 15px;
text-decoration: none;
letter-spacing: 0.02em;
transition: transform .15s, box-shadow .15s;
}
.btn-cta:hover { transform: translateY(-2px); }
.btn-cta.search {
background: #fff;
color: #10213e;
box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.btn-cta.sell {
background: #1376e5;
color: #fff;
box-shadow: 0 8px 24px rgba(19,118,229,.4);
}
.simple-search-strip {
margin: -24px auto 0;
max-width: 640px;
padding: 0 5% 8px;
position: relative;
z-index: 2;
}
.simple-search-form {
display: flex;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(9,34,69,.12);
overflow: hidden;
}
.simple-search-form input {
flex: 1;
border: none;
padding: 16px 18px;
font-size: 16px;
font: inherit;
}
.simple-search-form input:focus { outline: none; }
.simple-search-form button {
border: none;
background: #1376e5;
color: #fff;
font-weight: 700;
padding: 0 24px;
cursor: pointer;
font: inherit;
}
.marketplace-filter {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
}
.quick-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 20px;
padding: 4px 0;
}
.quick-label {
font-size: 13px;
font-weight: 700;
color: #607088;
margin-right: 4px;
}
.quick-chip {
display: inline-block;
padding: 7px 14px;
border-radius: 20px;
background: #fff;
border: 1px solid #d0dbe8;
font-size: 13px;
font-weight: 600;
color: #10213e;
text-decoration: none;
transition: all .12s;
}
.quick-chip:hover {
border-color: #1376e5;
color: #1376e5;
}
.quick-chip.active {
background: #1376e5;
border-color: #1376e5;
color: #fff;
}
.quick-chip.clear {
background: #f1f5f9;
color: #64748b;
border-color: transparent;
}
.seller-page {
background: #f5f8fc;
min-height: 70vh;
padding: 32px 5% 48px;
}
.seller-container { max-width: 1100px; margin: 0 auto; }
.seller-card {
display: flex;
gap: 20px;
background: #fff;
border-radius: 14px;
padding: 24px;
box-shadow: 0 2px 12px rgba(9,34,69,.06);
margin-bottom: 28px;
align-items: flex-start;
}
.seller-avatar {
width: 64px;
height: 64px;
border-radius: 14px;
background: linear-gradient(135deg, #1376e5, #0d3a6e);
color: #fff;
font-size: 28px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.seller-info h1 {
margin: 0 0 4px;
font-size: 22px;
}
.seller-contact-name {
margin: 0 0 10px;
color: #607088;
font-size: 14px;
}
.seller-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.seller-badge {
display: inline-block;
background: #e8f1fc;
color: #0d3a6e;
font-size: 12px;
font-weight: 600;
padding: 5px 10px;
border-radius: 6px;
}
.seller-badge.verified {
background: #dcfce7;
color: #166534;
}
.seller-meta { margin: 4px 0; font-size: 14px; color: #304765; }
.seller-listings-title {
font-size: 18px;
margin: 0 0 16px;
}
.seller-profile-link {
color: inherit;
text-decoration: none;
}
.seller-profile-link:hover { color: #1376e5; }
@media (max-width: 600px) {
.seller-card { flex-direction: column; align-items: center; text-align: center; }
.seller-badges { justify-content: center; }
}
.verified-seller {
background: #dcfce7 !important;
color: #14532d !important;
font-weight: 800 !important;
letter-spacing: 0.02em;
}
.verify-page .verify-intro { color: #607088; font-size: 14px; max-width: 560px; }
.verify-banner.ok {
background: #dcfce7;
color: #14532d;
font-weight: 800;
padding: 14px 18px;
border-radius: 10px;
margin-bottom: 20px;
}
.verify-steps { display: grid; gap: 16px; max-width: 520px; }
.verify-step {
background: #fff;
border-radius: 12px;
padding: 18px;
border: 1px solid #e3e9f1;
}
.verify-step.done { border-color: #86efac; background: #f0fdf4; }
.vs-head { font-weight: 800; margin-bottom: 8px; }
.vs-ok { color: #166534; font-weight: 700; font-size: 13px; }
.verify-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.verify-form input {
flex: 1;
min-width: 140px;
height: 40px;
border: 1px solid #e3e9f1;
border-radius: 8px;
padding: 0 12px;
font: inherit;
}
.account-hub .account-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
max-width: 1100px;
margin: 0 auto;
padding: 24px 5% 48px;
}
.account-nav {
background: #fff;
border-radius: 12px;
padding: 12px 0;
box-shadow: 0 2px 12px rgba(9,34,69,.05);
height: fit-content;
position: sticky;
top: 80px;
}
.account-nav-title {
padding: 8px 16px 12px;
font-weight: 800;
font-size: 13px;
color: #1376e5;
border-bottom: 1px solid #edf0f5;
margin-bottom: 6px;
}
.account-nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
color: #304765;
text-decoration: none;
}
.account-nav a:hover, .account-nav a.active {
background: #e8f1fc;
color: #076dde;
}
.account-nav a b {
background: #e8f1fc;
color: #076dde;
font-size: 11px;
padding: 1px 7px;
border-radius: 10px;
}
.account-nav a b.red { background: #fee2e2; color: #b91c1c; }
.account-cta {
margin: 12px 12px 4px !important;
background: #1376e5 !important;
color: #fff !important;
border-radius: 8px;
justify-content: center !important;
}
.account-content h1 { margin: 0 0 16px; font-size: 22px; }
.account-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.account-stat {
background: #fff;
border-radius: 10px;
padding: 14px;
text-align: center;
box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.account-stat strong { display: block; font-size: 22px; }
.account-stat span { font-size: 12px; color: #607088; }
.account-quick { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; font-weight: 600; }
.account-list { list-style: none; padding: 0; margin: 0; }
.account-list li {
background: #fff;
padding: 12px 14px;
border-radius: 8px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
@media (max-width: 800px) {
.account-hub .account-layout { grid-template-columns: 1fr; }
.account-nav { position: static; display: flex; flex-wrap: wrap; gap: 0; }
.account-nav-title { width: 100%; }
.account-stats { grid-template-columns: 1fr 1fr; }
}
.compare-page {
background: #f5f8fc;
min-height: 70vh;
padding: 32px 5% 48px;
}
.compare-container { max-width: 1100px; margin: 0 auto; }
.compare-head h1 { margin: 0 0 6px; }
.compare-head p { color: #607088; margin: 0 0 12px; }
.compare-table-wrap { overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(9,34,69,.05); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.compare-table th, .compare-table td {
border-bottom: 1px solid #edf0f5;
padding: 12px 14px;
vertical-align: top;
text-align: left;
}
.compare-table thead th {
background: #f8fafc;
font-weight: 700;
width: 25%;
}
.compare-table tbody th {
background: #f8fafc;
font-weight: 700;
color: #607088;
width: 140px;
white-space: nowrap;
}
.compare-table .cmp-price td { font-size: 16px; color: #076dde; }
.cmp-desc { font-size: 12px; color: #304765; line-height: 1.45; max-width: 220px; }
.cmp-empty { color: #cbd5e1; text-align: center; }
.cmp-remove { color: #94a3b8; font-size: 12px; }
.wizard-sub { color: #607088; margin: -8px 0 20px; font-size: 14px; }
.wizard-steps {
display: flex;
align-items: flex-start;
gap: 0;
margin-bottom: 28px;
overflow-x: auto;
padding-bottom: 8px;
}
.wz-step {
display: flex;
flex-direction: column;
align-items: center;
min-width: 72px;
text-align: center;
}
.wz-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: #e3e9f1;
color: #607088;
font-weight: 800;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.wz-step.active .wz-num { background: #1376e5; color: #fff; }
.wz-step.done .wz-num { background: #16a34a; color: #fff; }
.wz-label { font-size: 11px; color: #90a0b5; font-weight: 600; max-width: 88px; line-height: 1.25; }
.wz-step.active .wz-label { color: #10213e; }
.wz-line {
flex: 1;
height: 2px;
background: #e3e9f1;
margin-top: 15px;
min-width: 12px;
}
.wz-line.done { background: #16a34a; }
.wz-title { font-size: 18px; margin: 0 0 16px; }
.wz-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.wz-cat {
border: 2px solid #e3e9f1;
border-radius: 12px;
padding: 14px 10px;
text-align: center;
cursor: pointer;
background: #fff;
}
.wz-cat input { display: none; }
.wz-cat.selected, .wz-cat:has(input:checked) {
border-color: #1376e5;
background: #e8f1fc;
}
.wz-cat .pc-icon { display: block; font-size: 24px; margin-bottom: 6px; }
.wz-cat strong { font-size: 12px; }
.wz-nav {
display: flex;
gap: 12px;
margin-top: 20px;
flex-wrap: wrap;
}
.wz-nav .btn { flex: 1; min-width: 120px; }
.wz-summary {
background: #f5f8fc;
border-radius: 12px;
padding: 20px;
line-height: 1.6;
margin-bottom: 8px;
}
.wz-fee { margin-top: 12px; font-size: 15px; }
.report-box {
max-width: 1100px;
margin: 0 auto 40px;
padding: 0 5%;
font-size: 13px;
}
.report-box summary { cursor: pointer; font-weight: 600; color: #64748b; }
.report-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.report-form select, .report-form textarea {
padding: 8px; border: 1px solid #e3e9f1; border-radius: 6px; font: inherit;
}
/* ——— Professional EU medical marketplace polish ——— */
:root {
--a4m-navy: #0b1f3a;
--a4m-blue: #0b6bcb;
--a4m-blue-soft: #e8f2fb;
--a4m-slate: #5a6b7d;
--a4m-line: #e6edf5;
--a4m-bg: #f7f9fc;
--a4m-radius: 12px;
--a4m-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
body {
font-family: var(--a4m-font);
color: #1a2b3c;
background: var(--a4m-bg);
-webkit-font-smoothing: antialiased;
}
/* Header: clean B2B */
.site-header, header.site-header, .header {
background: #fff !important;
border-bottom: 1px solid var(--a4m-line);
box-shadow: 0 1px 0 rgba(11, 31, 58, 0.04);
}
.logo, .brand, .site-logo {
letter-spacing: 0.04em;
font-weight: 800;
color: var(--a4m-navy) !important;
}
.logo span, .brand span {
color: var(--a4m-blue) !important;
}
/* Buttons: restrained professional */
.btn.primary, .btn-cta.sell {
background: var(--a4m-blue) !important;
border-radius: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
box-shadow: none !important;
}
.btn.primary:hover, .btn-cta.sell:hover {
background: #0958a8 !important;
}
.btn.secondary, .btn-cta.search {
border-radius: 10px !important;
border: 1px solid var(--a4m-line) !important;
background: #fff !important;
color: var(--a4m-navy) !important;
box-shadow: none !important;
}
/* Simple hero: clinical / trustworthy */
.simple-hero {
background: linear-gradient(165deg, #0b1f3a 0%, #123a66 55%, #0b6bcb 140%) !important;
padding: 72px 5% 56px !important;
}
.simple-brand {
letter-spacing: 0.28em !important;
font-size: 12px !important;
opacity: 0.9;
}
.simple-tagline {
font-weight: 700 !important;
letter-spacing: -0.02em;
}
.simple-search-form {
border: 1px solid var(--a4m-line);
box-shadow: 0 12px 40px rgba(11, 31, 58, 0.12) !important;
border-radius: 14px !important;
}
.simple-search-form button {
background: var(--a4m-navy) !important;
font-weight: 700;
}
/* Category cards: minimal */
.portal-cat-card, .wz-cat {
border: 1px solid var(--a4m-line) !important;
border-radius: var(--a4m-radius) !important;
background: #fff !important;
transition: border-color .15s, box-shadow .15s;
}
.portal-cat-card:hover, .wz-cat:hover {
border-color: #b6d4f0 !important;
box-shadow: 0 8px 24px rgba(11, 31, 58, 0.06);
}
.portal-cat-card .pc-icon, .wz-cat .pc-icon {
filter: none;
opacity: 0.95;
}
/* Listing cards: product catalog, not classifieds */
.listing-card {
background: #fff !important;
border: 1px solid var(--a4m-line) !important;
border-radius: var(--a4m-radius) !important;
overflow: hidden;
box-shadow: none !important;
transition: border-color .15s, box-shadow .15s;
}
.listing-card:hover {
border-color: #c5daf0 !important;
box-shadow: 0 10px 28px rgba(11, 31, 58, 0.07) !important;
}
.listing-card h3 {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--a4m-navy) !important;
line-height: 1.35;
}
.listing-brand {
font-size: 12px !important;
color: var(--a4m-slate) !important;
font-weight: 500;
}
.listing-price {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--a4m-navy) !important;
}
.badge-top {
background: var(--a4m-navy) !important;
color: #fff !important;
font-size: 10px !important;
letter-spacing: 0.06em;
border-radius: 4px !important;
}
.listing-thumb.placeholder {
background: linear-gradient(145deg, #eef3f9, #e2eaf3) !important;
color: #94a3b8 !important;
}
/* Quick filters: pills, calm */
.quick-chip {
border-radius: 999px !important;
border: 1px solid var(--a4m-line) !important;
background: #fff !important;
font-weight: 600 !important;
}
.quick-chip.active {
background: var(--a4m-navy) !important;
border-color: var(--a4m-navy) !important;
color: #fff !important;
}
/* Home blocks */
.home-block .portal-head h2 {
font-size: 20px !important;
font-weight: 800 !important;
color: var(--a4m-navy);
letter-spacing: -0.02em;
}
.portal-head a {
font-size: 13px;
font-weight: 700;
color: var(--a4m-blue);
}
/* Mobile: touch-friendly */
@media (max-width: 768px) {
.simple-cta .btn-cta {
width: 100%;
min-width: 0;
}
.marketplace-filter {
grid-template-columns: 1fr 1fr !important;
}
.listings-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.listing-card h3 { font-size: 13px !important; }
.account-hub .account-layout {
grid-template-columns: 1fr !important;
}
.wizard-steps {
gap: 0;
}
.wz-label { display: none; }
.simple-hero { padding: 48px 5% 40px !important; }
}
@media (max-width: 480px) {
.listings-grid {
grid-template-columns: 1fr !important;
}
}
/* Footer: institutional */
footer, .site-footer, .footer {
background: var(--a4m-navy) !important;
color: #b8c5d6 !important;
border-top: none !important;
}
footer a, .site-footer a, .footer a {
color: #d0dbe8 !important;
}
.footer-social a:hover { color: #fff !important; }
/* Verified badge: trust */
.verified-seller {
border: 1px solid #86efac;
}
/* Category cards – reliable click feedback */
.wz-cat-grid { gap: 12px !important; }
.wz-cat {
cursor: pointer !important;
user-select: none;
-webkit-user-select: none;
position: relative;
min-height: 100px;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.wz-cat input[type="radio"] {
position: absolute !important;
opacity: 0.01 !important;
width: 100% !important;
height: 100% !important;
left: 0; top: 0;
margin: 0 !important;
cursor: pointer;
z-index: 2;
display: block !important;
}
.wz-cat.selected {
border-color: #0b6bcb !important;
background: #e8f2fb !important;
box-shadow: 0 0 0 2px #0b6bcb !important;
}
.wz-cat:active { transform: scale(0.98); }
/* Professional hero with dental clinic background */
.pro-hero {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
overflow: hidden;
background: #0b1f3a;
}
.pro-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.pro-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
}
.pro-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
rgba(8, 22, 42, 0.94) 0%,
rgba(11, 40, 75, 0.82) 42%,
rgba(13, 60, 110, 0.45) 70%,
rgba(20, 80, 140, 0.25) 100%
);
}
.pro-hero-content {
position: relative;
z-index: 1;
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 64px 5% 72px;
color: #fff;
}
.pro-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
color: #7dd3fc;
margin: 0 0 14px;
text-transform: uppercase;
}
.pro-title {
margin: 0 0 16px;
font-size: clamp(28px, 5vw, 46px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
max-width: 560px;
}
.pro-lead {
margin: 0 0 28px;
font-size: 16px;
line-height: 1.55;
color: #c5d4e8;
max-width: 480px;
}
.pro-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 36px;
}
.pro-cta .btn-cta.search {
background: #0b6bcb !important;
color: #fff !important;
border: none !important;
box-shadow: 0 8px 24px rgba(11, 107, 203, 0.35) !important;
}
.pro-cta .btn-cta.outline {
background: transparent !important;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,0.45) !important;
}
.pro-cta .btn-cta.outline:hover {
background: rgba(255,255,255,0.1) !important;
border-color: #fff !important;
}
.pro-trust {
display: flex;
flex-wrap: wrap;
gap: 20px 32px;
}
.pro-trust-item {
display: flex;
align-items: center;
gap: 10px;
max-width: 200px;
}
.pti-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.pro-trust-item strong {
display: block;
font-size: 13px;
font-weight: 700;
}
.pro-trust-item small {
display: block;
font-size: 11px;
color: #9db0c7;
margin-top: 2px;
}
.simple-search-strip {
margin-top: -28px !important;
position: relative;
z-index: 3;
}
@media (max-width: 768px) {
.pro-hero { min-height: 440px; }
.pro-hero-img { object-position: 70% center; }
.pro-hero-overlay {
background: linear-gradient(
180deg,
rgba(8, 22, 42, 0.92) 0%,
rgba(11, 40, 75, 0.88) 100%
);
}
.pro-title { max-width: none; }
.pro-trust { gap: 14px; }
}
/* Logo higher / better aligned in header */
.header {
height: 78px !important;
align-items: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.logo {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
line-height: 1.15 !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-2px);
}
.logo-img {
height: 52px !important;
width: auto !important;
max-height: 52px !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
}
.logo-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.logo-text strong,
.logo strong {
font-size: 22px !important;
letter-spacing: -0.5px !important;
margin: 0 !important;
}
.logo-text small,
.logo small {
font-size: 8px !important;
letter-spacing: 1.5px !important;
margin-top: 2px !important;
color: #5a6b7d !important;
}
.mainnav a {
height: 78px !important;
}
/* Subpage banner with same dental background */
.page-banner {
position: relative;
min-height: 180px;
display: flex;
align-items: center;
overflow: hidden;
background: #0b1f3a;
}
.page-banner-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.page-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
transform: scale(1.02);
}
.page-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(8, 22, 42, 0.93) 0%,
rgba(11, 40, 75, 0.78) 50%,
rgba(13, 60, 110, 0.5) 100%
);
}
.page-banner-inner {
position: relative;
z-index: 1;
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 36px 5%;
color: #fff;
}
.page-eyebrow {
margin: 0 0 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #7dd3fc;
}
.page-banner-title {
margin: 0;
font-size: clamp(24px, 3.5vw, 34px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.page-banner-lead {
margin: 10px 0 0;
font-size: 15px;
color: #c5d4e8;
max-width: 560px;
line-height: 1.45;
}
/* Reduce double H1 on pages that already print title in content */
.page-banner + main h1:first-child,
.page-banner + .form-container > h1:first-child,
main.add-listing-page > .form-container > h1,
.auth-page .auth-card h1 {
/* keep content titles; banner already has main title */
}
.add-listing-page .form-container > h1,
.listings-page > h1,
.compare-page h1 {
margin-top: 8px;
}
@media (max-width: 768px) {
.logo-img { height: 42px !important; max-height: 42px !important; }
.header { height: 68px !important; }
.mainnav { display: none; }
.page-banner { min-height: 140px; }
.page-banner-inner { padding: 28px 5%; }
}
/* ========== E-veikals / Shop ========== */
.shop-page {
background: #f4f7fb;
min-height: 60vh;
padding: 0 0 48px;
}
.shop-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 20px 5% 0;
}
.shop-toolbar {
background: #fff;
border: 1px solid #e2eaf3;
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(15, 35, 60, 0.04);
margin-bottom: 14px;
}
.shop-search-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.shop-search-field {
flex: 1 1 220px;
position: relative;
}
.shop-search-field input {
width: 100%;
padding: 12px 14px 12px 40px;
border: 1px solid #d0dbe8;
border-radius: 10px;
font-size: 15px;
background: #f8fafc;
transition: border-color .15s, background .15s;
}
.shop-search-field input:focus {
outline: none;
border-color: #0b6bcb;
background: #fff;
box-shadow: 0 0 0 3px rgba(11, 107, 203, 0.12);
}
.shop-search-ico {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
opacity: .55;
pointer-events: none;
}
.shop-stock-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #334155;
white-space: nowrap;
cursor: pointer;
user-select: none;
padding: 8px 12px;
background: #f1f5f9;
border-radius: 10px;
}
.shop-stock-toggle input { accent-color: #0b6bcb; width: 16px; height: 16px; }
.shop-sort {
padding: 11px 12px;
border: 1px solid #d0dbe8;
border-radius: 10px;
background: #fff;
font-size: 14px;
color: #1e293b;
}
.shop-search-btn { white-space: nowrap; border-radius: 10px !important; }
.shop-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.shop-chip {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: #1e3a5f;
background: #fff;
border: 1px solid #d8e3ef;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.shop-chip:hover {
border-color: #0b6bcb;
color: #0b6bcb;
background: #f0f7ff;
}
.shop-chip.is-active {
background: #0b6bcb;
border-color: #0b6bcb;
color: #fff;
box-shadow: 0 2px 8px rgba(11, 107, 203, 0.25);
}
.shop-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: 13px;
color: #64748b;
margin-bottom: 14px;
}
.shop-meta strong { color: #0f172a; }
.shop-clear {
color: #0b6bcb;
font-weight: 600;
text-decoration: none;
font-size: 13px;
}
.shop-clear:hover { text-decoration: underline; }
.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 16px;
}
.shop-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e2eaf3;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .15s, box-shadow .15s, border-color .15s;
height: 100%;
}
.shop-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(15, 40, 80, 0.1);
border-color: #b6d0ec;
}
.shop-card-media {
position: relative;
aspect-ratio: 4 / 3;
background: linear-gradient(160deg, #f8fafc 0%, #eef4fa 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.shop-card-media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 12px;
}
.shop-badge {
position: absolute;
top: 10px;
right: 10px;
font-size: 11px;
font-weight: 700;
padding: 4px 9px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.shop-badge-stock {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.shop-card-body {
padding: 12px 14px 16px;
display: flex;
flex-direction: column;
flex: 1;
gap: 6px;
}
.shop-card-brand {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 11px;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.shop-card-sku {
font-weight: 500;
text-transform: none;
letter-spacing: 0;
opacity: .85;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 55%;
}
.shop-card-title {
margin: 0;
font-size: 14px;
font-weight: 650;
line-height: 1.35;
color: #0f172a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
}
.shop-card-price {
margin-top: auto;
padding-top: 8px;
border-top: 1px solid #f1f5f9;
color: #0b6bcb;
font-size: 14px;
line-height: 1.35;
}
.shop-card-price .price-gross {
display: block;
font-weight: 800;
font-size: 16px;
color: #0b6bcb;
}
.shop-card-price .price-gross small {
font-weight: 500;
font-size: 11px;
color: #64748b;
margin-left: 4px;
}
.shop-card-price .price-net {
display: block;
font-size: 12px;
color: #64748b;
margin-top: 2px;
}
.shop-pagination {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-top: 28px;
}
.shop-page-btn {
min-width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 12px;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
color: #1e3a5f;
background: #fff;
border: 1px solid #d8e3ef;
transition: background .15s, color .15s, border-color .15s;
}
.shop-page-btn:hover {
border-color: #0b6bcb;
color: #0b6bcb;
}
.shop-page-btn.is-active {
background: #0b6bcb;
border-color: #0b6bcb;
color: #fff;
}
.shop-page-gap {
display: inline-flex;
align-items: center;
padding: 0 4px;
color: #94a3b8;
}
.shop-empty {
text-align: center;
background: #fff;
border: 1px dashed #cbd5e1;
border-radius: 16px;
padding: 48px 24px;
margin: 12px 0 8px;
}
.shop-empty-ico { font-size: 40px; margin-bottom: 8px; }
.shop-empty h2 { margin: 0 0 8px; font-size: 20px; color: #0f172a; }
.shop-empty p { margin: 0 0 18px; color: #64748b; }
.shop-vat-note,
.shop-contact-note {
margin: 20px 0 0;
font-size: 13px;
color: #64748b;
text-align: center;
}
.shop-contact-note a { color: #0b6bcb; font-weight: 600; }
@media (max-width: 640px) {
.shop-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.shop-card-body { padding: 10px 10px 12px; }
.shop-card-title { font-size: 13px; min-height: 2.6em; }
.shop-card-price .price-gross { font-size: 14px; }
.shop-search-btn { width: 100%; }
.shop-sort { flex: 1; }
}
/* ========== Produkta lapa ========== */
.product-page {
background: #f4f7fb;
padding: 24px 5% 56px;
}
.product-page > a,
.product-page > p > a {
color: #0b6bcb;
font-weight: 600;
text-decoration: none;
font-size: 14px;
}
.product-page-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
max-width: 1000px;
margin: 16px auto 0;
background: #fff;
border: 1px solid #e2eaf3;
border-radius: 16px;
padding: 28px;
box-shadow: 0 4px 20px rgba(15, 40, 80, 0.05);
}
.product-price .price-gross {
display: block;
font-size: 26px;
font-weight: 800;
color: #0b6bcb;
}
.product-price .price-gross small {
font-size: 13px;
font-weight: 500;
color: #64748b;
margin-left: 6px;
}
.product-price .price-net {
display: block;
font-size: 14px;
color: #64748b;
margin-top: 4px;
}
.product-price .vat-note {
font-size: 12px;
color: #64748b;
margin-top: 10px;
}
@media (max-width: 768px) {
.product-page-grid {
grid-template-columns: 1fr;
padding: 18px;
gap: 20px;
}
}
/* ========== Grozs / Cart ========== */
.cart-icon b,
.header .icon b {
position: absolute;
top: -4px;
right: -6px;
background: #e11d48;
color: #fff;
font-size: 10px;
min-width: 16px;
height: 16px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
font-weight: 700;
}
.header .icon { position: relative; }
.shop-card-wrap {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.shop-card-wrap .shop-card {
flex: 1;
}
.shop-card-add {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 2;
opacity: 0;
transform: translateY(6px);
transition: opacity .15s, transform .15s;
pointer-events: none;
}
.shop-card-wrap:hover .shop-card-add,
.shop-card-wrap:focus-within .shop-card-add {
opacity: 1;
transform: none;
pointer-events: auto;
}
.shop-add-btn {
width: 100%;
border: none;
border-radius: 10px;
padding: 10px 12px;
background: #0b6bcb;
color: #fff;
font-weight: 700;
font-size: 13px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(11, 107, 203, 0.35);
}
.shop-add-btn:hover { background: #0958a8; }
.shop-card-wrap .shop-card-body {
padding-bottom: 48px;
}
@media (max-width: 640px) {
.shop-card-add {
opacity: 1;
transform: none;
pointer-events: auto;
position: static;
padding: 0 10px 10px;
}
.shop-card-wrap .shop-card-body { padding-bottom: 12px; }
}
.product-add-form { margin-top: 12px; }
.product-add-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
}
.product-qty-label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: #64748b;
font-weight: 600;
}
.product-qty-input {
width: 88px;
padding: 11px 12px;
border: 1px solid #d0dbe8;
border-radius: 10px;
font-size: 15px;
}
.product-add-btn {
border-radius: 10px !important;
padding: 12px 20px !important;
}
.product-mail-btn {
display: inline-block;
margin-top: 10px;
background: #f1f5f9 !important;
color: #0f172a !important;
border: 1px solid #d0dbe8 !important;
border-radius: 10px !important;
padding: 10px 16px !important;
text-decoration: none;
font-weight: 600;
font-size: 14px;
}
.cart-page { background: #f4f7fb; min-height: 50vh; padding: 20px 0 48px; }
.cart-wrap { max-width: 1100px; margin: 0 auto; padding: 0 5%; }
.cart-flash {
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #047857;
padding: 12px 16px;
border-radius: 10px;
margin-bottom: 16px;
font-weight: 600;
font-size: 14px;
}
.cart-flash-err {
background: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
}
.cart-success {
background: #fff;
border-radius: 16px;
padding: 40px 28px;
text-align: center;
border: 1px solid #e2eaf3;
}
.cart-success h2 { margin: 0 0 10px; }
.cart-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 24px;
align-items: start;
}
.cart-list {
background: #fff;
border: 1px solid #e2eaf3;
border-radius: 14px;
padding: 8px 16px 16px;
}
.cart-row {
display: grid;
grid-template-columns: 72px 1fr auto auto auto;
gap: 12px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid #f1f5f9;
}
.cart-row-img {
width: 72px;
height: 72px;
background: #f8fafc;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cart-row-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-row-brand { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; }
.cart-row-title {
display: block;
font-weight: 650;
color: #0f172a;
text-decoration: none;
font-size: 14px;
margin: 2px 0 4px;
}
.cart-row-title:hover { color: #0b6bcb; }
.cart-row-price { font-size: 13px; color: #0b6bcb; font-weight: 600; }
.cart-row-price small { color: #64748b; font-weight: 500; }
.cart-row-qty input {
width: 64px;
padding: 8px;
border: 1px solid #d0dbe8;
border-radius: 8px;
text-align: center;
}
.cart-row-line { text-align: right; font-size: 14px; }
.cart-row-line strong { display: block; color: #0f172a; }
.cart-row-line span { font-size: 12px; color: #64748b; }
.cart-remove {
border: none;
background: #f1f5f9;
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
color: #64748b;
font-size: 14px;
}
.cart-remove:hover { background: #fee2e2; color: #b91c1c; }
.cart-clear-btn {
margin-top: 12px;
background: none;
border: none;
color: #64748b;
font-size: 13px;
cursor: pointer;
text-decoration: underline;
}
.cart-summary {
background: #fff;
border: 1px solid #e2eaf3;
border-radius: 14px;
padding: 20px;
position: sticky;
top: 88px;
}
.cart-summary h2 { margin: 0 0 14px; font-size: 18px; }
.cart-sum-row {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #475569;
margin-bottom: 8px;
}
.cart-sum-total {
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid #e2eaf3;
font-size: 17px;
font-weight: 800;
color: #0f172a;
}
.cart-order-title { margin: 22px 0 6px; font-size: 15px; }
.cart-order-hint { margin: 0 0 12px; font-size: 12px; color: #64748b; line-height: 1.4; }
.cart-order-form label {
display: block;
font-size: 12px;
font-weight: 600;
color: #475569;
margin-bottom: 10px;
}
.cart-order-form input,
.cart-order-form textarea {
display: block;
width: 100%;
margin-top: 4px;
padding: 10px 12px;
border: 1px solid #d0dbe8;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
}
.cart-order-btn { width: 100%; margin-top: 6px; border-radius: 10px !important; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
@media (max-width: 860px) {
.cart-layout { grid-template-columns: 1fr; }
.cart-row {
grid-template-columns: 64px 1fr auto;
grid-template-rows: auto auto;
}
.cart-row-qty { grid-column: 2; }
.cart-row-line { grid-column: 3; grid-row: 1 / span 2; }
.cart-summary { position: static; }
}
/* Piegāde */
.cart-shipping {
border: 1px solid #e2eaf3;
border-radius: 10px;
padding: 10px 12px 6px;
margin: 0 0 12px;
}
.cart-shipping legend {
font-size: 12px;
font-weight: 700;
color: #475569;
padding: 0 4px;
}
.cart-ship-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 4px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
font-weight: 500 !important;
color: #0f172a !important;
margin: 0 !important;
}
.cart-ship-option:last-child { border-bottom: none; }
.cart-ship-option input { accent-color: #0b6bcb; flex-shrink: 0; }
.cart-ship-name { flex: 1; font-size: 13px; line-height: 1.3; }
.cart-ship-price {
font-size: 12px;
font-weight: 700;
color: #0b6bcb;
white-space: nowrap;
}
.cart-ship-extra { margin-bottom: 8px; }
.cart-ship-hint {
font-size: 12px;
color: #64748b;
margin: 0 0 4px;
line-height: 1.4;
}
/* ========== Add listing wizard (mockup style) ========== */
.wizard-page .form-container { max-width: 1100px; }
.wizard-steps { display:flex; align-items:center; gap:0; margin: 12px 0 28px; flex-wrap:wrap; }
.wz-step { display:flex; align-items:center; gap:8px; font-size:13px; color:#94a3b8; font-weight:600; }
.wz-step.active { color:#0b6bcb; }
.wz-step.done { color:#059669; }
.wz-num {
width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background:#e2e8f0; color:#64748b; font-size:12px; font-weight:700;
}
.wz-step.active .wz-num { background:#0b6bcb; color:#fff; }
.wz-step.done .wz-num { background:#059669; color:#fff; }
.wz-line { width:28px; height:2px; background:#e2e8f0; margin:0 6px; }
.wz-line.done { background:#059669; }
.al-layout {
display:grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: start;
}
.al-cats {
background:#fff;
border:1px solid #e2eaf3;
border-radius:16px;
padding:16px;
position:sticky;
top:88px;
}
.al-side-title { margin:0 0 12px; font-size:15px; color:#0f172a; }
.al-cat-list { display:flex; flex-direction:column; gap:8px; }
.al-cat {
display:flex; align-items:center; gap:10px;
padding:10px 12px; border-radius:12px; border:1.5px solid #e2eaf3;
cursor:pointer; background:#f8fafc; transition:.15s;
}
.al-cat input { position:absolute; opacity:0; pointer-events:none; }
.al-cat:hover { border-color:#93c5fd; background:#f0f7ff; }
.al-cat.is-selected {
border-color:#0b6bcb; background:#eff6ff;
box-shadow:0 0 0 3px rgba(11,107,203,.12);
}
.al-cat-icon { font-size:22px; line-height:1; }
.al-cat-name { font-size:13px; font-weight:650; color:#0f172a; line-height:1.3; }
.al-main-title { margin:0 0 6px; font-size:22px; color:#0f172a; }
.al-main-lead { margin:0 0 18px; color:#64748b; font-size:14px; line-height:1.45; }
.al-examples { font-size:12px; color:#64748b; margin-top:6px; }
.al-examples span { font-weight:600; }
.al-suggest {
display:flex; gap:12px; align-items:flex-start;
background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px;
padding:12px 14px; margin:0 0 16px;
}
.al-suggest-ok {
width:28px; height:28px; border-radius:50%; background:#22c55e; color:#fff;
display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.al-suggest strong { display:block; font-size:13px; color:#166534; }
.al-suggest div { font-size:14px; color:#0f172a; font-weight:600; }
.al-suggest small { color:#64748b; font-weight:500; }
.al-autofill {
background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af;
padding:10px 12px; border-radius:10px; margin-bottom:14px; font-size:13px; font-weight:600;
}
.al-card {
background:#fff; border:1px solid #e2eaf3; border-radius:16px;
padding:20px 20px 8px; margin-bottom:16px;
box-shadow:0 2px 12px rgba(15,40,80,.04);
}
.al-card-title { margin:0 0 16px; font-size:16px; color:#0f172a; }
.al-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.al-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.al-price-wrap { position:relative; }
.al-price-wrap input { padding-right:36px; }
.al-price-cur {
position:absolute; right:12px; top:50%; transform:translateY(-50%);
color:#64748b; font-weight:700;
}
.al-price-modes, .al-opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.al-opts-row { margin: 4px 0 16px; }
.al-chip, .al-check {
display:inline-flex; align-items:center; gap:6px;
padding:7px 11px; border-radius:999px; background:#f1f5f9;
font-size:12px; font-weight:600; color:#334155; cursor:pointer;
}
.al-chip input, .al-check input { accent-color:#0b6bcb; }
.al-counter { text-align:right; font-size:12px; color:#94a3b8; margin-top:4px; }
.al-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.al-next { border-radius:12px !important; padding:12px 22px !important; font-weight:700 !important; }
@media (max-width: 900px) {
.al-layout { grid-template-columns: 1fr; }
.al-cats { position:static; }
.al-cat-list { display:grid; grid-template-columns:repeat(2,1fr); }
.al-grid-3, .al-grid-2 { grid-template-columns:1fr; }
}
/* Company / legal visibility */
.footer-legal-company {
max-width: 1100px;
margin: 20px auto 8px;
padding: 16px 20px;
border-radius: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: #c8d4e4;
font-size: 13px;
line-height: 1.55;
text-align: center;
}
.footer-legal-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #8fa3bb;
margin-bottom: 6px;
font-weight: 700;
}
.footer-legal-company a {
color: #9ec5ff !important;
text-decoration: none;
font-weight: 600;
}
.footer-legal-company a:hover { text-decoration: underline; }
.footer-legal-company strong { color: #eef3f9; }
.company-card {
background: #f8fafc;
border: 1px solid #e2eaf3;
border-radius: 14px;
padding: 18px 20px;
line-height: 1.55;
color: #334155;
}
.company-card p { margin: 0 0 12px; }
.company-card p:last-child { margin-bottom: 0; }
.about-legal h2 { margin-bottom: 12px; }
/* Listing gallery + lightbox */
.listing-gallery { margin: 16px 0 20px; }
.gallery-main-wrap {
position: relative;
background: #f1f5f9;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4/3;
max-height: 420px;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-main-wrap .main-img {
max-width: 100%;
max-height: 420px;
width: auto;
height: auto;
object-fit: contain;
cursor: zoom-in;
display: block;
}
.gallery-zoom-hint {
position: absolute;
right: 12px;
bottom: 12px;
border: none;
background: rgba(15,23,42,0.65);
color: #fff;
border-radius: 8px;
padding: 6px 10px;
cursor: pointer;
font-size: 14px;
}
.gallery-thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.gallery-thumb {
border: 2px solid transparent;
padding: 0;
border-radius: 8px;
overflow: hidden;
width: 72px;
height: 72px;
cursor: pointer;
background: #e2e8f0;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-thumb.active {
border-color: #1376e5;
box-shadow: 0 0 0 1px #1376e5;
}
.gallery-thumb:hover { border-color: #93c5fd; }
.lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15, 23, 42, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 48px 56px;
}
.lightbox[hidden] { display: none !important; }
.lightbox-img {
max-width: min(96vw, 1100px);
max-height: 88vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.lightbox-close {
position: absolute;
top: 12px;
right: 16px;
background: transparent;
border: none;
color: #fff;
font-size: 36px;
line-height: 1;
cursor: pointer;
padding: 4px 12px;
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.12);
border: none;
color: #fff;
font-size: 42px;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
line-height: 1;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-counter {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
color: #e2e8f0;
font-size: 14px;
font-weight: 600;
}
@media (max-width: 600px) {
.lightbox { padding: 40px 8px; }
.lightbox-nav { width: 40px; height: 40px; font-size: 32px; }
.gallery-thumb { width: 56px; height: 56px; }
}
/* === Category project UI (add-listing) === */
.al-cat-list.category-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.al-cat.category-card {
display: block;
padding: 0;
overflow: hidden;
border-radius: 12px;
border: 1.5px solid #e2e8f0;
background: #fff;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.al-cat.category-card:hover {
border-color: #38bdf8;
box-shadow: 0 6px 16px rgba(14, 165, 233, 0.12);
transform: translateY(-2px);
}
.al-cat.category-card.is-selected,
.al-cat.category-card.selected {
border-color: #0ea5e9;
background: #f0f9ff;
box-shadow: 0 0 0 2px #0ea5e9;
}
.al-cat.category-card .category-image {
height: 88px;
display: flex;
align-items: center;
justify-content: center;
}
.al-cat.category-card .icon-placeholder {
font-size: 36px;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
.al-cat.category-card .category-title {
padding: 10px 6px;
font-size: 12.5px;
font-weight: 600;
color: #1e293b;
background: #fff;
line-height: 1.25;
}
.al-cat.category-card.is-selected .category-title,
.al-cat.category-card.selected .category-title {
background: #f0f9ff;
color: #0369a1;
}
.category-image.dental { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.category-image.medical { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.category-image.lab { background: linear-gradient(135deg, #faf5ff, #e9d5ff); }
.category-image.steril { background: linear-gradient(135deg, #ecfeff, #a5f3fc); }
.category-image.diag { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.category-image.compress { background: linear-gradient(135deg, #f1f5f9, #cbd5e1); }
.category-image.tools { background: linear-gradient(135deg, #fff7ed, #fed7aa); }
.category-image.it { background: linear-gradient(135deg, #eff6ff, #bfdbfe); }
@media (max-width: 900px) {
.al-cat-list.category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.al-cat.category-card .category-image { height: 70px; }
.al-cat.category-card .icon-placeholder { font-size: 28px; }
}
/* ——— Condition badges + home/catalog chips (new / used / refurbished) ——— */
.listing-thumb {
position: relative;
}
.badge-condition {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.2;
padding: 5px 10px;
border-radius: 999px;
color: #fff;
box-shadow: 0 2px 8px rgba(16, 33, 62, 0.22);
}
.badge-condition.badge-new {
background: #0d9488;
}
.badge-condition.badge-used {
background: #10213e;
}
.badge-condition.badge-refurb {
background: #076dde;
}
.listing-thumb .badge-top {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
margin: 0;
}
.home-condition-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0 0 12px;
}
.home-cond-chip,
.cond-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 8px 20px;
border-radius: 999px;
background: #fff;
border: 1.5px solid #c5d4e8;
color: #10213e;
font-family: inherit;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.home-cond-chip:hover,
.cond-chip:hover {
border-color: #076dde;
color: #076dde;
}
.home-cond-chip.active,
.cond-chip.active {
background: #10213e;
border-color: #10213e;
color: #fff;
box-shadow: 0 6px 16px rgba(16, 33, 62, 0.18);
}
.condition-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 18px;
}
@media (max-width: 600px) {
.home-cond-chip,
.cond-chip {
min-height: 40px;
padding: 8px 14px;
font-size: 13px;
}
}
/* Category photo cards */
.portal-cat-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
.portal-cat-card.has-photo {
padding: 0 !important;
overflow: hidden;
text-align: left;
}
.portal-cat-card.has-photo .pc-photo {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #e8eef5;
}
.portal-cat-card.has-photo .pc-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.portal-cat-card.has-photo strong {
display: block;
padding: 12px 14px 14px;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
.portal-cat-card.has-photo.active {
border-color: #1376e5 !important;
box-shadow: 0 0 0 2px rgba(19,118,229,.35);
}
.al-cat.category-card .category-image {
height: 110px;
padding: 0;
overflow: hidden;
}
.al-cat.category-card .category-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 600px) {
.portal-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Brand logos */
.home-brands { padding: 36px 5% 48px; background: #fff; }
.home-brand-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.home-brand-card {
display: flex;
align-items: center;
justify-content: center;
height: 88px;
padding: 14px 16px;
background: #f7f9fc;
border: 1px solid #e3e9f1;
border-radius: 12px;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.home-brand-card img {
max-width: 100%;
max-height: 56px;
object-fit: contain;
filter: grayscale(.15);
}
.home-brand-card:hover {
border-color: #1376e5;
box-shadow: 0 8px 20px rgba(9,34,69,.08);
transform: translateY(-2px);
}
.home-brand-card:hover img { filter: none; }
.home-brand-card.is-dark { background: #111; border-color: #111; }
.home-brand-card.is-dark img { filter: none; }
.brand-item.has-logo, .brand-item {
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
width: 72px;
height: 44px;
flex: 0 0 72px;
display: grid;
place-items: center;
background: #f7f9fc;
border: 1px solid #e3e9f1;
border-radius: 8px;
overflow: hidden;
padding: 6px;
}
.brand-logo img { max-width: 100%; max-height: 32px; object-fit: contain; }
.brand-logo.is-dark { background: #111; border-color: #111; }
.brand-letter {
font-weight: 800;
color: #1376e5;
font-size: 16px;
}
.brand-name { font-weight: 600; }
@media (max-width: 600px) {
.home-brand-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ——— EU delivery + refund (shop / order / piegade) ——— */
.cart-order-form select {
display: block;
width: 100%;
margin-top: 4px;
padding: 10px 12px;
border: 1px solid #d0dbe8;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
background: #fff;
}
.cart-country-label { margin-bottom: 12px !important; }
.cart-ship-cards {
display: flex;
flex-direction: column;
gap: 8px;
margin: 8px 0;
}
.cart-ship-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
border: 1px solid #e2eaf3;
border-radius: 12px;
background: #f8fafc;
cursor: pointer;
font-weight: 500 !important;
color: #10213e !important;
margin: 0 !important;
}
.cart-ship-card:hover { border-color: #1376e5; }
.cart-ship-card:has(input:checked) {
border-color: #1376e5;
background: #eef5ff;
box-shadow: 0 0 0 1px #1376e5;
}
.cart-ship-card input { accent-color: #1376e5; margin-top: 3px; flex-shrink: 0; }
.cart-ship-card-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-ship-card .cart-ship-name { font-size: 13px; font-weight: 700; line-height: 1.3; color: #10213e; }
.cart-ship-eta { font-size: 12px; color: #64748b; font-weight: 500; }
.cart-ship-card .cart-ship-price { font-size: 13px; font-weight: 800; color: #1376e5; white-space: nowrap; }
.cart-ship-typical { font-size: 11px; color: #94a3b8; margin: 4px 0 0; }
.cart-protect, .order-protect {
background: #eef5ff;
border: 1px solid #cfe0f8;
border-radius: 12px;
padding: 12px 14px;
margin: 12px 0;
font-size: 13px;
color: #334155;
line-height: 1.45;
}
.cart-protect strong, .order-protect strong { display: block; color: #10213e; margin-bottom: 4px; font-size: 13px; }
.cart-protect p, .order-protect p { margin: 0 0 6px; }
.cart-protect a, .order-protect a { color: #1376e5; font-weight: 700; text-decoration: none; }
.order-protect ul { margin: 6px 0 8px 1.1em; padding: 0; }
.order-protect li { margin-bottom: 4px; }
.order-page { background: #f4f7fb; min-height: 50vh; padding: 20px 0 48px; }
.order-wrap { max-width: 820px; margin: 0 auto; padding: 0 5%; }
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.order-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1376e5; }
.order-head h1 { margin: 4px 0 6px; font-size: 26px; color: #10213e; }
.order-meta { margin: 0; font-size: 13px; color: #64748b; }
.order-protect-pill {
background: #10213e; color: #fff; font-size: 11px; font-weight: 800;
letter-spacing: .03em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.order-status-banner { border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.order-status-banner.is-return_requested { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; }
.order-status-banner.is-refunded { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.order-status-banner.is-cancelled { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.order-status-banner p { margin: 4px 0 0; }
.order-timeline {
list-style: none; margin: 0 0 24px; padding: 18px 8px 8px;
display: flex; justify-content: space-between; gap: 4px;
background: #fff; border: 1px solid #e2eaf3; border-radius: 14px;
}
.order-timeline li {
flex: 1; text-align: center; position: relative; font-size: 11px; font-weight: 700; color: #94a3b8;
}
.order-timeline li:not(:last-child)::after {
content: ''; position: absolute; top: 7px; left: 50%; right: -50%; height: 2px; background: #e2eaf3; z-index: 0;
}
.order-timeline li.is-done:not(:last-child)::after,
.order-timeline li.is-current:not(:last-child)::after { background: #1376e5; }
.ot-dot {
display: block; width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 8px;
background: #e2eaf3; border: 2px solid #fff; position: relative; z-index: 1;
}
.order-timeline li.is-done .ot-dot { background: #1376e5; }
.order-timeline li.is-current .ot-dot { background: #fff; box-shadow: 0 0 0 3px #1376e5; }
.order-timeline li.is-done, .order-timeline li.is-current { color: #10213e; }
.ot-label { display: block; }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.order-card {
background: #fff; border: 1px solid #e2eaf3; border-radius: 14px; padding: 16px 18px;
}
.order-card h2 { margin: 0 0 10px; font-size: 15px; color: #10213e; }
.order-items { list-style: none; margin: 0; padding: 0; }
.order-items li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.order-totals { margin-top: 10px; font-size: 14px; color: #475569; }
.order-totals div { display: flex; justify-content: space-between; margin-top: 4px; }
.order-totals .is-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2eaf3; color: #10213e; }
.order-tracking code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.order-page .muted { font-size: 12px; color: #64748b; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; }
.order-refund-form {
background: #fff; border: 1px solid #e2eaf3; border-radius: 14px; padding: 18px; margin-bottom: 16px;
}
.order-refund-form h2 { margin: 0 0 8px; font-size: 16px; }
.order-refund-form label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 10px; }
.order-refund-form select,
.order-refund-form textarea {
display: block; width: 100%; margin-top: 4px; padding: 10px 12px;
border: 1px solid #d0dbe8; border-radius: 8px; font: inherit;
}
.listing-delivery { margin: 10px 0; }
.listing-delivery-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.listing-deliv-chip {
display: inline-block; padding: 4px 10px; border-radius: 999px;
background: #eef5ff; color: #10213e; font-size: 12px; font-weight: 650;
border: 1px solid #cfe0f8;
}
.listing-deliv-note { margin: 6px 0 0; font-size: 12px; color: #64748b; line-height: 1.4; }
.piegade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.piegade-col { margin: 0 !important; }
.piegade-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.piegade-table th, .piegade-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #e2eaf3; vertical-align: top; }
.piegade-table th { font-size: 11px; text-transform: uppercase; color: #64748b; }
.piegade-page .muted { color: #64748b; font-size: 13px; }
.piegade-vat { background: #f8fafc; border-radius: 12px; }
@media (max-width: 800px) {
.order-grid, .piegade-cols { grid-template-columns: 1fr; }
.order-timeline { flex-wrap: wrap; }
.order-head { flex-direction: column; }
}
/* ——— Share bar ——— */
.a4m-share-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 16px 0 4px;
}
.a4m-share-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--a4m-slate, #5a6b7d);
margin-right: 4px;
}
.a4m-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 7px 12px;
border-radius: 999px;
border: 1px solid var(--a4m-line, #e6edf5);
background: #fff;
color: var(--a4m-navy, #0b1f3a);
font: inherit;
font-size: 13px;
font-weight: 650;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
white-space: nowrap;
}
.a4m-share-btn:hover {
border-color: #b6d4f0;
background: var(--a4m-blue-soft, #e8f2fb);
color: var(--a4m-blue, #0b6bcb);
}
.a4m-share-btn:focus-visible {
outline: 2px solid var(--a4m-blue, #0b6bcb);
outline-offset: 2px;
}
.a4m-share-fb { border-color: #c5d4f0; }
.a4m-share-fb:hover { background: #eef2ff; color: #1877f2; border-color: #b0c4f0; }
.a4m-share-wa:hover { background: #ecfdf5; color: #128c7e; border-color: #a7f3d0; }
.a4m-share-btn.is-copied {
background: #ecfdf5 !important;
border-color: #a7f3d0 !important;
color: #065f46 !important;
}
.a4m-share-native { display: none; }
.a4m-share-native.is-available { display: inline-flex; }
/* On dark hero: light share bar */
.pro-hero-content .a4m-share-bar {
margin-top: 20px;
}
.pro-hero-content .a4m-share-label {
color: rgba(255, 255, 255, 0.75);
}
.pro-hero-content .a4m-share-btn {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
}
.pro-hero-content .a4m-share-btn:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.pro-hero-content .a4m-share-btn.is-copied {
background: rgba(236, 253, 245, 0.95) !important;
border-color: #a7f3d0 !important;
color: #065f46 !important;
}
.listing-detail-card .a4m-share-bar {
margin: 12px 0 8px;
}
/* Sold listing overlay */
.listing-card.is-sold { opacity: 0.95; }
.listing-thumb.sold-thumb { position: relative; }
.listing-thumb .sold-stripe {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to top left,
transparent 0%,
transparent calc(50% - 3px),
rgba(185, 28, 28, 0.85) calc(50% - 2px),
rgba(185, 28, 28, 0.85) calc(50% + 2px),
transparent calc(50% + 3px),
transparent 100%
);
z-index: 2;
}
.listing-thumb .badge-sold {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
background: #b91c1c;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.listing-price.sold-price { color: #64748b; }
.listing-price .sold-tag {
display: inline-block;
margin-left: 6px;
font-size: 11px;
font-weight: 800;
color: #b91c1c;
text-transform: uppercase;
}
.listing-gallery-wrap.sold-gallery { position: relative; }
.listing-gallery-wrap .sold-stripe,
.gallery-main-wrap .sold-stripe {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to top left,
transparent 0%,
transparent calc(50% - 4px),
rgba(185, 28, 28, 0.9) calc(50% - 3px),
rgba(185, 28, 28, 0.9) calc(50% + 3px),
transparent calc(50% + 4px),
transparent 100%
);
z-index: 5;
border-radius: inherit;
}
.gallery-main-wrap { position: relative; }
.listing-detail-sold-banner {
display: inline-block;
background: #b91c1c;
color: #fff;
font-weight: 800;
text-transform: uppercase;
font-size: 13px;
padding: 6px 14px;
border-radius: 8px;
margin: 8px 0 12px;
letter-spacing: 0.04em;
}